ContiNew/continew-admin-ui
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin-ui.git synced 2025-10-26 20:57:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 优化邮件配置、安全配置页面样式

Browse Source
This commit is contained in:
Charles7c
2024-05-28 22:06:56 +08:00
parent 59bf8decd1
commit 45cbabf545
3 changed files with 141 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/apis/system/type.ts
View File

@@ -283,14 +283,13 @@ export interface BasicConfig {
/** 邮箱配置类型 */ /** 邮箱配置类型 */
export interface MailConfig { export interface MailConfig {
MAIL_PROTOCOL: string MAIL_SMTP_HOST: OptionResp
MAIL_HOST: string MAIL_SMTP_PORT: OptionResp
MAIL_SMTP_PORT: string MAIL_SMTP_USERNAME: OptionResp
MAIL_SMTP_USERNAME: string MAIL_SMTP_PASSWORD: OptionResp
MAIL_SMTP_PASSWORD: string MAIL_SSL_ENABLED: OptionResp
MAIL_FROM: string MAIL_SSL_PORT: OptionResp
MAIL_SSL_ENABLE: string MAIL_FROM: OptionResp
MAIL_SSL_PORT: string
} }
/** 安全配置类型 */ /** 安全配置类型 */

284
src/views/system/config/components/MailSetting.vue
View File

@@ -1,224 +1,182 @@
<template> <template>
<a-form ref="formRef" <a-space wrap :size="30">
:model="form" <a-form
:auto-label-width="true" ref="formRef"
label-align="left" :model="form"
:rules="rules" :rules="rules"
size="small" auto-label-width
:layout="width >= 500 ? 'horizontal' : 'vertical' " label-align="left"
scroll-to-first-error :layout="width >= 500 ? 'horizontal' : 'vertical' "
style="margin-top: 30px" :disabled="!isUpdate"
:disabled="!isUpdate"> scroll-to-first-error
<a-row> class="form"
<a-col :span="6"> >
<a-form-item field="MAIL_PROTOCOL" :label="mailProtocol?.name" :disabled="true"> <a-form-item field="MAIL_SMTP_HOST" :label="mailConfig.MAIL_SMTP_HOST.name" hide-asterisk>
<a-select v-model.trim="form.MAIL_PROTOCOL"> <a-input v-model.trim="form.MAIL_SMTP_HOST" />
<a-option value="smtp" label="smtp" /> </a-form-item>
</a-select> <a-form-item field="MAIL_SMTP_PORT" :label="mailConfig.MAIL_SMTP_PORT.name" hide-asterisk>
</a-form-item> <a-input-number v-model="form.MAIL_SMTP_PORT" :min="0" />
</a-col> </a-form-item>
</a-row> <a-form-item field="MAIL_SMTP_USERNAME" :label="mailConfig.MAIL_SMTP_USERNAME.name" hide-asterisk>
<a-row> <a-input v-model.trim="form.MAIL_SMTP_USERNAME" />
<a-col :span="6"> </a-form-item>
<a-form-item field="MAIL_HOST" :label="mailHost?.name"> <a-form-item field="MAIL_SMTP_PASSWORD" :label="mailConfig.MAIL_SMTP_PASSWORD?.name" hide-asterisk>
<a-input v-model.trim="form.MAIL_HOST" /> <a-input-password v-model.trim="form.MAIL_SMTP_PASSWORD" />
</a-form-item> </a-form-item>
</a-col> <a-form-item field="MAIL_SSL_ENABLED" :label="mailConfig.MAIL_SSL_ENABLED?.name" hide-asterisk>
</a-row> <a-radio-group v-model:model-value="form.MAIL_SSL_ENABLED">
<a-row> <a-radio value="1">启用</a-radio>
<a-col :span="6"> <a-radio value="0">禁用</a-radio>
<a-form-item field="MAIL_SMTP_PORT" :label="mailPort?.name"> </a-radio-group>
<a-input v-model.number="form.MAIL_SMTP_PORT" /> </a-form-item>
</a-form-item> <a-form-item v-if="form.MAIL_SSL_ENABLED === '1'" field="MAIL_SSL_PORT" :label="mailConfig.MAIL_SSL_PORT.name" hide-asterisk>
</a-col> <a-input-number v-model="form.MAIL_SSL_PORT" :min="0" />
</a-row> </a-form-item>
<a-row> <a-form-item field="MAIL_FROM" :label="mailConfig.MAIL_FROM.name" hide-asterisk>
<a-col :span="6"> <a-input v-model.trim="form.MAIL_FROM" />
<a-form-item field="MAIL_SMTP_USERNAME" :label="mailUsername?.name"> </a-form-item>
<a-input v-model.trim="form.MAIL_SMTP_USERNAME" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-item field="MAIL_SMTP_PASSWORD" :label="mailPassword?.name">
<a-input v-model.trim="form.MAIL_SMTP_PASSWORD" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-item field="MAIL_SSL_ENABLE" :label="mailSslEnable?.name">
<a-radio-group v-model:model-value="form.MAIL_SSL_ENABLE">
<a-radio value="1">启用</a-radio>
<a-radio value="2">禁用</a-radio>
</a-radio-group>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-item v-if="form.MAIL_SSL_ENABLE === '1'" field="MAIL_SSL_PORT" :label="mailSslPort?.name" :disabled="isUpdate ? form.MAIL_SSL_ENABLE === '2' : !isUpdate">
<a-input v-model.number="form.MAIL_SSL_PORT" />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<a-form-item field="MAIL_FROM" :label="mailFrom?.name">
<a-input v-model.trim="form.MAIL_FROM" />
</a-form-item>
</a-col>
</a-row>
<div style="margin-top: 20px">
<a-space> <a-space>
<a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
<template #icon>
<icon-undo />
</template>
恢复默认
</a-button>
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate"> <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
<template #icon> <template #icon><icon-edit /></template>修改
<icon-edit /> </a-button>
</template> <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
修改 <template #icon><icon-undo /></template>恢复默认
</a-button> </a-button>
<a-button v-if="isUpdate" type="primary" @click="handleSave"> <a-button v-if="isUpdate" type="primary" @click="handleSave">
<template #icon> <template #icon><icon-save /></template>保存
<icon-save />
</template>
保存
</a-button> </a-button>
<a-button v-if="isUpdate" @click="reset"> <a-button v-if="isUpdate" @click="reset">
<template #icon> <template #icon><icon-refresh /></template>重置
<icon-refresh />
</template>
重置
</a-button> </a-button>
<a-button v-if="isUpdate" @click="handleCancel"> <a-button v-if="isUpdate" @click="handleCancel">
<template #icon> <template #icon><icon-undo /></template>取消
<icon-undo />
</template>
取消
</a-button> </a-button>
</a-space> </a-space>
</div> </a-form>
</a-form> </a-space>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { type FormInstance, Message, Modal } from '@arco-design/web-vue'
import { useWindowSize } from '@vueuse/core' import { useWindowSize } from '@vueuse/core'
import { type FormInstance, Message, Modal } from '@arco-design/web-vue'
import {
type MailConfig,
type OptionResp,
listOption,
resetOptionValue,
updateOption
} from '@/apis'
import { useForm } from '@/hooks' import { useForm } from '@/hooks'
import { type MailConfig, type OptionResp, listOption, resetOptionValue, updateOption } from '@/apis'
defineOptions({ name: 'MailSetting' }) defineOptions({ name: 'MailSetting' })
const formRef = ref<FormInstance>()
const { form } = useForm<MailConfig>({
MAIL_PROTOCOL: '',
MAIL_HOST: '',
MAIL_SMTP_PORT: '',
MAIL_SMTP_USERNAME: '',
MAIL_SMTP_PASSWORD: '',
MAIL_FROM: '',
MAIL_SSL_ENABLE: '',
MAIL_SSL_PORT: ''
})
// 表单初始化
onMounted(() => {
getDataList() // 获取配置
})
const { width } = useWindowSize() const { width } = useWindowSize()
const mailProtocol = ref<OptionResp>() const formRef = ref<FormInstance>()
const mailHost = ref<OptionResp>() const { form } = useForm({
const mailPort = ref<OptionResp>() MAIL_SMTP_HOST: '',
const mailUsername = ref<OptionResp>() MAIL_SMTP_PORT: 0,
const mailPassword = ref<OptionResp>() MAIL_SMTP_USERNAME: '',
const mailFrom = ref<OptionResp>() MAIL_SMTP_PASSWORD: '',
const mailSslEnable = ref<OptionResp>() MAIL_SSL_ENABLED: '',
const mailSslPort = ref<OptionResp>() MAIL_SSL_PORT: 0,
// 参数校验规则 MAIL_FROM: ''
})
const rules: FormInstance['rules'] = { const rules: FormInstance['rules'] = {
SITE_TITLE: [{ required: true, message: '请输入系统标题' }], MAIL_SMTP_HOST: [{ required: true, message: '请输入值' }],
SITE_COPYRIGHT: [{ required: true, message: '请输入版权信息' }] MAIL_SMTP_PORT: [{ required: true, message: '请输入值' }],
MAIL_SMTP_USERNAME: [{ required: true, message: '请输入值' }],
MAIL_SMTP_PASSWORD: [{ required: true, message: '请输入值' }],
MAIL_SSL_PORT: [{ required: true, message: '请输入值' }],
MAIL_FROM: [{ required: true, message: '请输入值' }]
} }
const mailConfig = ref<MailConfig>({
MAIL_SMTP_HOST: {},
MAIL_SMTP_PORT: {},
MAIL_SMTP_USERNAME: {},
MAIL_SMTP_PASSWORD: {},
MAIL_SSL_ENABLED: {},
MAIL_SSL_PORT: {},
MAIL_FROM: {}
})
// 重置
const reset = () => {
formRef.value?.resetFields()
form.MAIL_SMTP_HOST = mailConfig.value.MAIL_SMTP_HOST.value || ''
form.MAIL_SMTP_PORT = mailConfig.value.MAIL_SMTP_PORT.value || 0
form.MAIL_SMTP_USERNAME = mailConfig.value.MAIL_SMTP_USERNAME.value || ''
form.MAIL_SMTP_PASSWORD = mailConfig.value.MAIL_SMTP_PASSWORD?.value || ''
form.MAIL_SSL_ENABLED = mailConfig.value.MAIL_SSL_ENABLED.value || ''
form.MAIL_SSL_PORT = mailConfig.value.MAIL_SSL_PORT.value || 0
form.MAIL_FROM = mailConfig.value.MAIL_FROM.value || ''
}
const isUpdate = ref(false) const isUpdate = ref(false)
// 修改 // 修改
const onUpdate = () => { const onUpdate = () => {
isUpdate.value = true isUpdate.value = true
} }
// 取消 // 取消
const handleCancel = () => { const handleCancel = () => {
reset() reset()
isUpdate.value = false isUpdate.value = false
} }
const queryForm = {
code: Object.keys(mailConfig.value)
}
// 查询列表数据
const getDataList = async () => {
const { data } = await listOption(queryForm)
mailConfig.value = data.reduce((obj: MailConfig, option: OptionResp) => {
obj[option.code] = { ...option, value: ['MAIL_SMTP_PORT', 'MAIL_SSL_PORT'].includes(option.code) ? Number.parseInt(option.value) : option.value }
return obj
}, {})
handleCancel()
}
// 保存 // 保存
const handleSave = async () => { const handleSave = async () => {
const isInvalid = await formRef.value?.validate() const isInvalid = await formRef.value?.validate()
if (isInvalid) return false if (isInvalid) return false
await updateOption( await updateOption(
Object.entries(form).map((item) => { Object.entries(form).map(([key, value]) => {
return { return { code: key, value }
code: item[0],
value: item[1]
}
}) })
) )
// appStore.setSiteConfig(form)
await getDataList() await getDataList()
Message.success('保存成功') Message.success('保存成功')
} }
// 查询参数
const queryForm = reactive({
code: ['MAIL_FROM', 'MAIL_SMTP_PASSWORD', 'MAIL_SMTP_PORT', 'MAIL_PROTOCOL', 'MAIL_HOST', 'MAIL_SMTP_USERNAME', 'MAIL_SSL_ENABLE', 'MAIL_SSL_PORT']
})
// 接收参数类型
const dataList = ref<OptionResp[]>([])
// 从数据库中获取配置
const getDataList = async () => {
const res = await listOption(queryForm)
dataList.value = res.data
mailProtocol.value = dataList.value.find((option) => option.code === 'MAIL_PROTOCOL')
mailHost.value = dataList.value.find((option) => option.code === 'MAIL_HOST')
mailPort.value = dataList.value.find((option) => option.code === 'MAIL_SMTP_PORT')
mailUsername.value = dataList.value.find((option) => option.code === 'MAIL_SMTP_USERNAME')
mailPassword.value = dataList.value.find((option) => option.code === 'MAIL_SMTP_PASSWORD')
mailFrom.value = dataList.value.find((option) => option.code === 'MAIL_FROM')
mailSslEnable.value = dataList.value.find((option) => option.code === 'MAIL_SSL_ENABLE')
mailSslPort.value = dataList.value.find((option) => option.code === 'MAIL_SSL_PORT')
reset()
}
// 恢复默认
const handleResetValue = async () => { const handleResetValue = async () => {
await resetOptionValue(queryForm) await resetOptionValue(queryForm)
Message.success('恢复成功') Message.success('恢复成功')
await getDataList() await getDataList()
// appStore.setSiteConfig(form)
} }
const onResetValue = () => { const onResetValue = () => {
Modal.warning({ Modal.warning({
title: '警告', title: '警告',
content: '确认恢复基础配置为默认值吗？', content: '确认恢复邮件配置为默认值吗？',
hideCancel: false, hideCancel: false,
maskClosable: false, maskClosable: false,
onOk: handleResetValue onOk: handleResetValue
}) })
} }
const reset = () => {
form.MAIL_PROTOCOL = mailProtocol.value?.value || '' onMounted(() => {
form.MAIL_HOST = mailHost.value?.value || '' getDataList()
form.MAIL_SMTP_PORT = mailPort.value?.value || '' })
form.MAIL_SMTP_USERNAME = mailUsername.value?.value || ''
form.MAIL_SMTP_PASSWORD = mailPassword.value?.value || ''
form.MAIL_FROM = mailFrom.value?.value || ''
form.MAIL_SSL_ENABLE = mailSslEnable.value?.value || ''
form.MAIL_SSL_PORT = mailSslPort.value?.value || ''
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.form {
margin: 20px 0 0 20px;
}
:deep(.arco-form-item.arco-form-item-has-help) {
margin-bottom: 5px;
}
</style> </style>

24
src/views/system/config/components/SecuritySetting.vue
View File

@@ -6,27 +6,26 @@
:rules="rules" :rules="rules"
auto-label-width auto-label-width
label-align="left" label-align="left"
size="small"
:layout="width >= 500 ? 'horizontal' : 'vertical'" :layout="width >= 500 ? 'horizontal' : 'vertical'"
:disabled="!isUpdate" :disabled="!isUpdate"
scroll-to-first-error scroll-to-first-error
class="form" class="form"
> >
<a-form-item :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name" field="PASSWORD_ERROR_LOCK_COUNT" <a-form-item field="PASSWORD_ERROR_LOCK_COUNT" :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name"
:help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk> :help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk>
<a-input-number v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0" <a-input-number v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0"
:min="0" :max="10"> :min="0" :max="10">
<template #append>次</template> <template #append>次</template>
</a-input-number> </a-input-number>
</a-form-item> </a-form-item>
<a-form-item :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name" field="PASSWORD_ERROR_LOCK_MINUTES" <a-form-item field="PASSWORD_ERROR_LOCK_MINUTES" :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name"
:help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description" hide-asterisk> :help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description" hide-asterisk>
<a-input-number v-model="form.PASSWORD_ERROR_LOCK_MINUTES" class="input-width" :precision="0" :min="1" <a-input-number v-model="form.PASSWORD_ERROR_LOCK_MINUTES" class="input-width" :precision="0" :min="1"
:max="1440"> :max="1440">
<template #append>分钟</template> <template #append>分钟</template>
</a-input-number> </a-input-number>
</a-form-item> </a-form-item>
<a-form-item :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name" field="PASSWORD_EXPIRATION_DAYS" <a-form-item field="PASSWORD_EXPIRATION_DAYS" :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name"
:help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk> :help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk>
<a-input-number v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0" <a-input-number v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0"
:max="999"> :max="999">
@@ -41,25 +40,23 @@
<template #append>天</template> <template #append>天</template>
</a-input-number> </a-input-number>
</a-form-item> </a-form-item>
<a-form-item :label="securityConfig.PASSWORD_REUSE_POLICY.name" field="PASSWORD_REUSE_POLICY" <a-form-item field="PASSWORD_REUSE_POLICY" :label="securityConfig.PASSWORD_REUSE_POLICY.name"
:help="securityConfig.PASSWORD_REUSE_POLICY.description" hide-asterisk> :help="securityConfig.PASSWORD_REUSE_POLICY.description" hide-asterisk>
<a-input-number v-model="form.PASSWORD_REUSE_POLICY" class="input-width" :precision="0" :min="3" :max="32"> <a-input-number v-model="form.PASSWORD_REUSE_POLICY" class="input-width" :precision="0" :min="3" :max="32">
<template #append>次</template> <template #append>次</template>
</a-input-number> </a-input-number>
</a-form-item> </a-form-item>
<a-form-item :label="securityConfig.PASSWORD_MIN_LENGTH.name" field="PASSWORD_MIN_LENGTH" <a-form-item field="PASSWORD_MIN_LENGTH" :label="securityConfig.PASSWORD_MIN_LENGTH.name"
:help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk> :help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk>
<a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" /> <a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" />
</a-form-item> </a-form-item>
<a-form-item :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name" <a-form-item field="PASSWORD_ALLOW_CONTAIN_USERNAME" :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name">
field="PASSWORD_ALLOW_CONTAIN_USERNAME">
<a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0"> <a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0">
<template #checked>是</template> <template #checked>是</template>
<template #unchecked>否</template> <template #unchecked>否</template>
</a-switch> </a-switch>
</a-form-item> </a-form-item>
<a-form-item :label="securityConfig.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.name" <a-form-item field="PASSWORD_CONTAIN_SPECIAL_CHARACTERS" :label="securityConfig.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.name">
field="PASSWORD_CONTAIN_SPECIAL_CHARACTERS">
<a-switch v-model="form.PASSWORD_CONTAIN_SPECIAL_CHARACTERS" type="round" :checked-value="1" <a-switch v-model="form.PASSWORD_CONTAIN_SPECIAL_CHARACTERS" type="round" :checked-value="1"
:unchecked-value="0"> :unchecked-value="0">
<template #checked>是</template> <template #checked>是</template>
@@ -139,6 +136,7 @@ const securityConfig = ref<SecurityConfig>({
}) })
// 重置 // 重置
const reset = () => { const reset = () => {
formRef.value?.resetFields()
form.PASSWORD_ERROR_LOCK_COUNT = securityConfig.value.PASSWORD_ERROR_LOCK_COUNT.value || 0 form.PASSWORD_ERROR_LOCK_COUNT = securityConfig.value.PASSWORD_ERROR_LOCK_COUNT.value || 0
form.PASSWORD_ERROR_LOCK_MINUTES = securityConfig.value.PASSWORD_ERROR_LOCK_MINUTES.value || 0 form.PASSWORD_ERROR_LOCK_MINUTES = securityConfig.value.PASSWORD_ERROR_LOCK_MINUTES.value || 0
form.PASSWORD_EXPIRATION_DAYS = securityConfig.value.PASSWORD_EXPIRATION_DAYS.value || 0 form.PASSWORD_EXPIRATION_DAYS = securityConfig.value.PASSWORD_EXPIRATION_DAYS.value || 0
@@ -196,7 +194,7 @@ const handleResetValue = async () => {
const onResetValue = () => { const onResetValue = () => {
Modal.warning({ Modal.warning({
title: '警告', title: '警告',
content: '确认恢复基础配置为默认值吗？', content: '确认恢复安全配置为默认值吗？',
hideCancel: false, hideCancel: false,
maskClosable: false, maskClosable: false,
onOk: handleResetValue onOk: handleResetValue
@@ -213,6 +211,10 @@ onMounted(() => {
margin: 20px 0 0 20px; margin: 20px 0 0 20px;
} }
.input-width {
width: 196px;
}
:deep(.arco-form-item.arco-form-item-has-help) { :deep(.arco-form-item.arco-form-item-has-help) {
margin-bottom: 5px; margin-bottom: 5px;
} }