refactor: 优化密码策略处理

2025-11-12 04:58:42 +08:00 · 2024-05-15 23:13:05 +08:00
parent 7c1106e8c2
commit 95047179c0
8 changed files with 190 additions and 111 deletions
--- a/src/views/system/config/components/BasicSetting.vue
+++ b/src/views/system/config/components/BasicSetting.vue
@@ -2,7 +2,7 @@
  <a-form ref="formRef" :model="form" :rules="rules" size="large" layout="vertical" :disabled="!isUpdate">
    <a-list class="list-layout" :bordered="false">
      <a-list-item>
-        <a-form-item class="image-item" hide-label field="site_favicon">
+        <a-form-item class="image-item" hide-label field="SITE_FAVICON">
          {{ siteFavicon?.name }}
          <template #extra>
            {{ siteFavicon?.description }}
@@ -41,7 +41,7 @@
        </a-form-item>
      </a-list-item>
      <a-list-item>
-        <a-form-item class="image-item" hide-label field="site_logo">
+        <a-form-item class="image-item" hide-label field="SITE_LOGO">
          {{ siteLogo?.name }}
          <template #extra>
            {{ siteLogo?.description }}
@@ -77,12 +77,12 @@
        </a-form-item>
      </a-list-item>
      <a-list-item style="padding-top: 13px; border: none">
-        <a-form-item class="input-item" :label="siteTitle?.name" field="site_title">
-          <a-input v-model.trim="form.site_title" placeholder="请输入网站标题" :max-length="18" />
+        <a-form-item class="input-item" :label="siteTitle?.name" field="SITE_TITLE">
+          <a-input v-model.trim="form.SITE_TITLE" placeholder="请输入网站标题" :max-length="18" />
        </a-form-item>
-        <a-form-item class="input-item" :label="siteCopyright?.name" field="site_copyright" tooltip="支持HTML标签">
+        <a-form-item class="input-item" :label="siteCopyright?.name" field="SITE_COPYRIGHT" tooltip="支持HTML标签">
          <a-textarea
-            v-model.trim="form.site_copyright"
+            v-model.trim="form.SITE_COPYRIGHT"
            placeholder="请输入版权信息"
            :auto-size="{
              minRows: 3,
@@ -137,15 +137,15 @@ import { useForm } from '@/hooks'

 const formRef = ref<FormInstance>()
 const rules: FormInstance['rules'] = {
-  site_title: [{ required: true, message: '请输入系统标题' }],
-  site_copyright: [{ required: true, message: '请输入版权信息' }]
+  SITE_TITLE: [{ required: true, message: '请输入系统标题' }],
+  SITE_COPYRIGHT: [{ required: true, message: '请输入版权信息' }]
 }

 const { form } = useForm({
-  site_favicon: '',
-  site_logo: '',
-  site_title: '',
-  site_copyright: ''
+  SITE_FAVICON: '',
+  SITE_LOGO: '',
+  SITE_TITLE: '',
+  SITE_COPYRIGHT: ''
 })

 const siteFavicon = ref<OptionResp>()
@@ -156,10 +156,10 @@ const faviconFile = ref<FileItem>({ uid: '-1' })
 const logoFile = ref<FileItem>({ uid: '-2' })
 // 重置
 const reset = () => {
-  form.site_favicon = siteFavicon.value?.value || ''
-  form.site_logo = siteLogo.value?.value || ''
-  form.site_title = siteTitle.value?.value || ''
-  form.site_copyright = siteCopyright.value?.value || ''
+  form.SITE_FAVICON = siteFavicon.value?.value || ''
+  form.SITE_LOGO = siteLogo.value?.value || ''
+  form.SITE_TITLE = siteTitle.value?.value || ''
+  form.SITE_COPYRIGHT = siteCopyright.value?.value || ''
  faviconFile.value.url = siteFavicon.value?.value
  logoFile.value.url = siteLogo.value?.value
 }
@@ -177,16 +177,16 @@ const handleCancel = () => {

 const dataList = ref<OptionResp[]>([])
 const queryForm = reactive({
-  code: ['site_title', 'site_copyright', 'site_logo', 'site_favicon']
+  code: ['SITE_TITLE', 'SITE_COPYRIGHT', 'SITE_LOGO', 'SITE_FAVICON']
 })
 // 查询列表数据
 const getDataList = async () => {
  const res = await listOption(queryForm)
  dataList.value = res.data
-  siteFavicon.value = dataList.value.find((option) => option.code === 'site_favicon')
-  siteLogo.value = dataList.value.find((option) => option.code === 'site_logo')
-  siteTitle.value = dataList.value.find((option) => option.code === 'site_title')
-  siteCopyright.value = dataList.value.find((option) => option.code === 'site_copyright')
+  siteFavicon.value = dataList.value.find((option) => option.code === 'SITE_FAVICON')
+  siteLogo.value = dataList.value.find((option) => option.code === 'SITE_LOGO')
+  siteTitle.value = dataList.value.find((option) => option.code === 'SITE_TITLE')
+  siteCopyright.value = dataList.value.find((option) => option.code === 'SITE_COPYRIGHT')
  reset()
 }

@@ -236,7 +236,7 @@ const handleUploadFavicon = (options: RequestOption) => {
    uploadFile(formData)
      .then((res) => {
        onSuccess(res)
-        form.site_favicon = res.data.url
+        form.SITE_FAVICON = res.data.url
        Message.success('上传成功')
      })
      .catch((error) => {
@@ -266,7 +266,7 @@ const handleUploadLogo = (options: RequestOption) => {
    uploadFile(formData)
      .then((res) => {
        onSuccess(res)
-        form.site_logo = res.data.url
+        form.SITE_LOGO = res.data.url
        Message.success('上传成功')
      })
      .catch((error) => {
--- a/src/views/system/config/components/MailSetting.vue
+++ b/src/views/system/config/components/MailSetting.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>暂未开放</div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/views/system/config/components/SecuritySetting.vue
+++ b/src/views/system/config/components/SecuritySetting.vue
@@ -1,52 +1,102 @@
 <template>
-  <a-form ref="formRef" style="margin-top: 20px" :model="form" size="small" label-align="left" :disabled="!isUpdate">
+  <a-form
+    ref="formRef"
+    :model="form"
+    size="small"
+    :auto-label-width="true"
+    label-align="left"
+    :layout="width >= 500 ? 'horizontal' : 'vertical'"
+    :disabled="!isUpdate"
+    style="margin-top: 10px"
+  >
    <a-list size="small" :bordered="false">
-      <a-list-item style="border: none">
+      <a-list-item>
        <a-form-item
-          :help="form.password_expiration_days.description"
-          :label="form.password_expiration_days.name"
-          field="password_expiration_days"
+          :label="form.PASSWORD_ERROR_LOCK_COUNT.name"
+          field="PASSWORD_ERROR_LOCK_COUNT"
+          :help="form.PASSWORD_ERROR_LOCK_COUNT.description"
        >
-          <a-input-number v-model="form.password_expiration_days.value" class="input-width" :min="0" :max="999">
+          <a-input-number v-model="form.PASSWORD_ERROR_LOCK_COUNT.value" class="input-width" :min="0" :max="10">
+            <template #append>次</template>
+          </a-input-number>
+        </a-form-item>
+      </a-list-item>
+     <a-list-item>
+        <a-form-item
+          :label="form.PASSWORD_ERROR_LOCK_MINUTES.name"
+          field="PASSWORD_ERROR_LOCK_MINUTES"
+          :help="form.PASSWORD_ERROR_LOCK_MINUTES.description"
+        >
+          <a-input-number v-model="form.PASSWORD_ERROR_LOCK_MINUTES.value" class="input-width" :min="1" :max="1440">
+            <template #append>分钟</template>
+          </a-input-number>
+        </a-form-item>
+      </a-list-item>
+      <a-list-item>
+        <a-form-item
+          :label="form.PASSWORD_EXPIRATION_WARNING_DAYS.name"
+          field="PASSWORD_EXPIRATION_WARNING_DAYS"
+          :help="form.PASSWORD_EXPIRATION_WARNING_DAYS.description"
+        >
+          <a-input-number v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS.value" class="input-width" :min="0">
            <template #append>天</template>
          </a-input-number>
        </a-form-item>
      </a-list-item>
-      <a-list-item style="border: none">
-        <a-form-item :help="form.password_min_length.description" :label="form.password_min_length.name">
-          <a-input-number v-model="form.password_min_length.value" class="input-width" :min="8" :max="32" />
-        </a-form-item>
-      </a-list-item>
-      <a-list-item style="border: none">
-        <a-form-item :help="form.password_update_interval.description" :label="form.password_update_interval.name">
-          <a-input-number v-model="form.password_update_interval.value" class="input-width" :min="0" :max="9999">
-            <template #append>分钟</template>
+      <a-list-item>
+        <a-form-item
+          :label="form.PASSWORD_EXPIRATION_DAYS.name"
+          field="PASSWORD_EXPIRATION_DAYS"
+          :help="form.PASSWORD_EXPIRATION_DAYS.description"
+        >
+          <a-input-number v-model="form.PASSWORD_EXPIRATION_DAYS.value" class="input-width" :min="0" :max="999">
+            <template #append>天</template>
          </a-input-number>
        </a-form-item>
      </a-list-item>
-      <a-list-item style="border: none">
-        <a-form-item :help="form.password_error_count.description" :label="form.password_error_count.name">
-          <a-input-number v-model="form.password_error_count.value" class="input-width" :min="0" :max="9999" />
-        </a-form-item>
-      </a-list-item>
-      <a-list-item style="border: none">
-        <a-form-item :help="form.password_lock_minutes.description" :label="form.password_lock_minutes.name">
-          <a-input-number v-model="form.password_lock_minutes.value" class="input-width" :min="0" :max="9999">
-            <template #append>分钟</template>
+      <a-list-item>
+        <a-form-item
+          :label="form.PASSWORD_REUSE_POLICY.name"
+          field="PASSWORD_REUSE_POLICY"
+          :help="form.PASSWORD_REUSE_POLICY.description"
+        >
+          <a-input-number v-model="form.PASSWORD_REUSE_POLICY.value" class="input-width" :min="3" :max="32">
+            <template #append>次</template>
          </a-input-number>
        </a-form-item>
      </a-list-item>
-      <a-list-item style="border: none">
-        <a-form-item :help="form.password_special_char.description" :label="form.password_special_char.name">
-          <a-switch v-model="form.password_special_char.value" type="round" :checked-value="1" :unchecked-value="0" />
+      <a-list-item>
+        <a-form-item
+          :label="form.PASSWORD_MIN_LENGTH.name"
+          field="PASSWORD_MIN_LENGTH"
+          :help="form.PASSWORD_MIN_LENGTH.description"
+        >
+          <a-input-number v-model="form.PASSWORD_MIN_LENGTH.value" class="input-width" :min="8" :max="32" />
        </a-form-item>
      </a-list-item>
-      <a-list-item style="border: none">
-        <a-form-item :help="form.password_contain_name.description" :label="form.password_contain_name.name">
-          <a-switch v-model="form.password_contain_name.value" type="round" :checked-value="1" :unchecked-value="0" />
+      <a-list-item>
+        <a-form-item
+          :label="form.PASSWORD_ALLOW_CONTAIN_USERNAME.name"
+          field="PASSWORD_ALLOW_CONTAIN_USERNAME"
+        >
+          <a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME.value" type="round" :checked-value="1" :unchecked-value="0">
+            <template #checked>是</template>
+            <template #unchecked>否</template>
+          </a-switch>
        </a-form-item>
      </a-list-item>
-      <a-list-item style="padding-top: 13px; border: none">
+      <a-list-item>
+        <a-form-item
+          :label="form.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.name"
+          field="PASSWORD_CONTAIN_SPECIAL_CHARACTERS"
+        >
+          <a-switch v-model="form.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.value" type="round" :checked-value="1" :unchecked-value="0">
+            <template #checked>是</template>
+            <template #unchecked>否</template>
+          </a-switch>
+        </a-form-item>
+      </a-list-item>
+      <a-list-item>
        <a-space>
          <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
            <template #icon>
@@ -85,39 +135,42 @@
 </template>

 <script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
 import { type FormInstance, Message, Modal } from '@arco-design/web-vue'
-import { type OptionResp, type SecurityConfigResp, listOption, resetOptionValue, updateOption } from '@/apis'
+import { type OptionResp, type SecurityConfig, listOption, resetOptionValue, updateOption } from '@/apis'
+
+const { width } = useWindowSize()

 const formRef = ref<FormInstance>()
-
-const form = ref<SecurityConfigResp>({
-  password_contain_name: {},
-  password_error_count: {},
-  password_expiration_days: {},
-  password_lock_minutes: {},
-  password_min_length: {},
-  password_special_char: {},
-  password_update_interval: {}
+const form = ref<SecurityConfig>({
+  PASSWORD_ERROR_LOCK_COUNT: {},
+  PASSWORD_ERROR_LOCK_MINUTES: {},
+  PASSWORD_EXPIRATION_WARNING_DAYS: {},
+  PASSWORD_EXPIRATION_DAYS: {},
+  PASSWORD_REUSE_POLICY: {},
+  PASSWORD_MIN_LENGTH: {},
+  PASSWORD_ALLOW_CONTAIN_USERNAME: {},
+  PASSWORD_CONTAIN_SPECIAL_CHARACTERS: {}
 })

-const isUpdate = ref(false)
-// 修改
-const onUpdate = () => {
-  isUpdate.value = true
-}
-
 const queryForm = {
  code: Object.keys(form.value)
 }
 // 查询列表数据
 const getDataList = async () => {
  const { data } = await listOption(queryForm)
-  form.value = data.reduce((obj: SecurityConfigResp, option: OptionResp) => {
+  form.value = data.reduce((obj: SecurityConfig, option: OptionResp) => {
    obj[option.code] = { ...option, value: Number.parseInt(option.value) }
    return obj
  }, {})
 }

+const isUpdate = ref(false)
+// 修改
+const onUpdate = () => {
+  isUpdate.value = true
+}
+
 // 重置
 const reset = () => {
  getDataList()
@@ -155,12 +208,17 @@ const onResetValue = () => {
    onOk: handleResetValue
  })
 }
+
 onMounted(() => {
  getDataList()
 })
 </script>

 <style lang="scss" scoped>
+:deep(.arco-list-item:not(:last-child)) {
+  border-bottom: none;
+}
+
 .input-width {
  width: 130px;
 }
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -5,7 +5,9 @@
        <a-tab-pane key="1" title="基础配置">
          <BasicSetting />
        </a-tab-pane>
-        <a-tab-pane key="2" title="邮件配置(暂未开放)" disabled></a-tab-pane>
+        <a-tab-pane key="2" title="邮件配置">
+          <MailSetting />
+        </a-tab-pane>
        <a-tab-pane key="3" title="安全配置">
          <SecuritySetting />
        </a-tab-pane>
@@ -16,6 +18,7 @@

 <script setup lang="ts">
 import BasicSetting from './components/BasicSetting.vue'
+import MailSetting from './components/MailSetting.vue'
 import SecuritySetting from './components/SecuritySetting.vue'

 defineOptions({ name: 'SystemConfig' })
@@ -25,4 +28,8 @@ defineOptions({ name: 'SystemConfig' })
 :deep(.arco-tabs-content) {
  padding-top: 5px;
 }
+
+:deep(.arco-tabs-tab) {
+  background-color: var(--color-fill-2);
+}
 </style>