diff --git a/src/assets/css/components/common/loading-mask.scss b/src/assets/css/components/common/loading-mask.scss index ad20dde..9b44a1a 100644 --- a/src/assets/css/components/common/loading-mask.scss +++ b/src/assets/css/components/common/loading-mask.scss @@ -1,10 +1,8 @@ .loading-mask { - position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: 100; - background-color: rgba(200, 200, 200, 0.2); } \ No newline at end of file diff --git a/src/assets/css/pages/system/settings.scss b/src/assets/css/pages/system/settings.scss index 0b999c9..f6b284b 100644 --- a/src/assets/css/pages/system/settings.scss +++ b/src/assets/css/pages/system/settings.scss @@ -22,11 +22,8 @@ font-size: 1.2em; } - .bt { + :nth-child(n+3) { flex: 0 0 auto; - } - - .bt-reset { color: constants.$font-main-color; } diff --git a/src/assets/svg/test.svg b/src/assets/svg/test.svg new file mode 100644 index 0000000..dcc7fc9 --- /dev/null +++ b/src/assets/svg/test.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/common/LoadingMask.tsx b/src/components/common/LoadingMask.tsx new file mode 100644 index 0000000..8f5cf1c --- /dev/null +++ b/src/components/common/LoadingMask.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import Icon from '@ant-design/icons' +import '@/assets/css/components/common/loading-mask.scss' +import { COLOR_FONT_MAIN } from '@/constants/common.constants' + +interface LoadingMaskProps extends React.PropsWithChildren { + hidden?: boolean +} +const LoadingMask: React.FC = (props) => { + const loadingIcon = ( + <> + + + ) + return props.hidden ? ( + props.children + ) : ( + <> +
+ +
+ + ) +} + +export default LoadingMask diff --git a/src/global.d.ts b/src/global.d.ts index 7b4085a..37e5024 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -295,22 +295,30 @@ interface AvatarBase64Vo { base64: string } -interface SystemSettingVo { +interface SystemSettingsVo { mail: MailSettingsVo } interface MailSettingsVo { host?: string port?: number + securityType?: string username?: string password?: string from?: string + fromName?: string } interface MailSettingsParam { host?: string port?: number + securityType?: string username?: string password?: string from?: string + fromName?: string +} + +interface MailSendParam { + to: string } diff --git a/src/pages/system/Settings.tsx b/src/pages/system/Settings.tsx index 61a79cd..bd829ce 100644 --- a/src/pages/system/Settings.tsx +++ b/src/pages/system/Settings.tsx @@ -1,16 +1,23 @@ import React from 'react' import Icon from '@ant-design/icons' import '@/assets/css/pages/system/settings.scss' +import { useUpdatedEffect } from '@/util/hooks' +import { + r_sys_settings_mail_get, + r_sys_settings_mail_send, + r_sys_settings_mail_update +} from '@/services/system' import FitFullScreen from '@/components/common/FitFullScreen' import HideScrollbar from '@/components/common/HideScrollbar' import Card from '@/components/common/Card' import FlexBox from '@/components/common/FlexBox' -import { useUpdatedEffect } from '@/util/hooks.tsx' -import { r_sys_settings_get, r_sys_settings_mail_update } from '@/services/system.tsx' +import LoadingMask from '@/components/common/LoadingMask' interface SettingsCardProps extends React.PropsWithChildren { icon: IconComponent title: string + loading?: boolean + expand?: React.ReactNode onReset?: () => void onSave?: () => void } @@ -21,25 +28,81 @@ const SettingsCard: React.FC = (props) => {
{props.title}
- - - - - - + {!props.loading ? ( + <> + {props.expand} + + + + + + + + ) : undefined} - {props.children} + ) } -const MailSettings: React.FC<{ mail?: MailSettingsVo; onSave?: () => void }> = (props) => { +const MailSettings: React.FC = () => { + const [modal, contextHolder] = AntdModal.useModal() const [mailForm] = AntdForm.useForm() const mailFormValues = AntdForm.useWatch([], mailForm) + const [loading, setLoading] = useState(false) + const [mailSendForm] = AntdForm.useForm() + + const handleOnTest = () => { + void modal.confirm({ + title: '发送测试邮件', + content: ( + <> + + + + + + + 将使用服务器已保存的邮件设置进行发送邮件，请保证编辑的内容已保存 + + + ), + onOk: () => + mailSendForm.validateFields().then( + () => { + return new Promise((resolve) => { + void r_sys_settings_mail_send({ + to: mailSendForm.getFieldValue('to') as string + }).then((res) => { + const response = res.data + + if (response.success) { + void message.success('发送成功') + resolve(true) + } else { + void message.error('发送失败，请检查配置后重试') + resolve(true) + } + }) + }) + }, + () => { + return new Promise((_, reject) => { + reject('未输入接收者') + }) + } + ) + }) + } const handleOnReset = () => { - props.mail && mailForm.setFieldsValue(props.mail) + getMailSettings() } const handleOnSave = () => { @@ -47,72 +110,87 @@ const MailSettings: React.FC<{ mail?: MailSettingsVo; onSave?: () => void }> = ( const response = res.data if (response.success) { void message.success('保存设置成功') - props.onSave && props.onSave() + getMailSettings() } else { void message.error('保存设置失败，请稍后重试') } }) } - useUpdatedEffect(() => { - props.mail && mailForm.setFieldsValue(props.mail) - }, [props.mail]) + const getMailSettings = () => { + if (loading) { + return + } - return ( - - - - - - - - - - - - - - - - - - - - ) -} - -const Settings: React.FC = () => { - const [systemSetting, setSystemSetting] = useState() - - const getSystemSetting = () => { - void r_sys_settings_get().then((res) => { + setLoading(true) + void r_sys_settings_mail_get().then((res) => { const response = res.data if (response.success) { const data = response.data - data && setSystemSetting(data) + data && mailForm.setFieldsValue(data) + setLoading(false) } }) } - const handleOnSave = () => { - getSystemSetting() - } - useUpdatedEffect(() => { - getSystemSetting() + getMailSettings() }, []) + return ( + <> + + + + } + > + + + + + + + + + + None + SSL/TLS + StartTls + + + + + + + + + + + + + + + + + {contextHolder} + + ) +} + +const Settings: React.FC = () => { return ( <> - + diff --git a/src/services/system.tsx b/src/services/system.tsx index f23c38d..4b85022 100644 --- a/src/services/system.tsx +++ b/src/services/system.tsx @@ -8,7 +8,6 @@ import { URL_SYS_GROUP, URL_SYS_GROUP_LIST, URL_SYS_LOG, - URL_SYS_SETTINGS, URL_SYS_SETTINGS_MAIL } from '@/constants/urls.constants' import request from '@/services/index' @@ -66,7 +65,10 @@ export const r_sys_group_delete_list = (ids: React.Key[]) => request.delete(URL_ export const r_sys_log_get = (param: SysLogGetParam) => request.get>(URL_SYS_LOG, param) -export const r_sys_settings_get = () => request.get(URL_SYS_SETTINGS) +export const r_sys_settings_mail_get = () => request.get(URL_SYS_SETTINGS_MAIL) export const r_sys_settings_mail_update = (param: MailSettingsParam) => request.put(URL_SYS_SETTINGS_MAIL, param) + +export const r_sys_settings_mail_send = (param: MailSendParam) => + request.post(URL_SYS_SETTINGS_MAIL, param)