From 1d8c9705e9c1849f77d298ba23266df04dda4da8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=8B=E5=B8=86?= <201379873@qq.com>
Date: Sun, 2 Jun 2024 10:55:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=E4=BC=98=E5=8C=96=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/config/components/BasicSetting.vue | 241 +++++++++---------
 .../system/config/components/MailSetting.vue  | 106 ++++----
 .../config/components/SecuritySetting.vue     | 158 ++++++------
 src/views/system/user/index.vue               |  24 +-
 4 files changed, 255 insertions(+), 274 deletions(-)

diff --git a/src/views/system/config/components/BasicSetting.vue b/src/views/system/config/components/BasicSetting.vue
index 98efd72..395025f 100644
--- a/src/views/system/config/components/BasicSetting.vue
+++ b/src/views/system/config/components/BasicSetting.vue
@@ -1,100 +1,94 @@
 <template>
-  <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" field="SITE_FAVICON" hide-label>
-          {{ siteConfig.SITE_FAVICON.name }}
-          <template #extra>
-            {{ siteConfig.SITE_FAVICON.description }}
-            <br />
-            <a-upload :file-list="faviconFile ? [faviconFile] : []" accept="image/*" :show-file-list="false"
-              :custom-request="handleUploadFavicon" @change="handleChangeFavicon">
-              <template #upload-button>
-                <div :class="`arco-upload-list-item${faviconFile && faviconFile.status === 'error' ? ' arco-upload-list-item-error' : ''
-                  }`">
-                  <div v-if="faviconFile && faviconFile.url"
-                    class="arco-upload-list-picture custom-upload-avatar favicon">
-                    <img :src="faviconFile.url" alt="favicon" />
-                    <div v-if="isUpdate" class="arco-upload-list-picture-mask favicon">
-                      <IconEdit />
-                    </div>
-                  </div>
-                  <div v-else class="arco-upload-picture-card favicon">
-                    <div class="arco-upload-picture-card-text">
-                      <icon-upload />
-                    </div>
+  <a-form ref="formRef" :model="form" :rules="rules" size="large" layout="vertical" :disabled="!isUpdate" class="form">
+    <a-list class="list-layout" :bordered="false" :loading="loading">
+      <a-form-item class="image-item" field="SITE_FAVICON" hide-label>
+        {{ siteConfig.SITE_FAVICON.name }}
+        <template #extra>
+          {{ siteConfig.SITE_FAVICON.description }}
+          <br />
+          <a-upload :file-list="faviconFile ? [faviconFile] : []" accept="image/*" :show-file-list="false"
+            :custom-request="handleUploadFavicon" @change="handleChangeFavicon">
+            <template #upload-button>
+              <div :class="`arco-upload-list-item${faviconFile && faviconFile.status === 'error' ? ' arco-upload-list-item-error' : ''
+                }`">
+                <div v-if="faviconFile && faviconFile.url"
+                  class="arco-upload-list-picture custom-upload-avatar favicon">
+                  <img :src="faviconFile.url" alt="favicon" />
+                  <div v-if="isUpdate" class="arco-upload-list-picture-mask favicon">
+                    <IconEdit />
                   </div>
                 </div>
-              </template>
-            </a-upload>
-          </template>
-        </a-form-item>
-      </a-list-item>
-      <a-list-item>
-        <a-form-item class="image-item" field="SITE_LOGO" hide-label>
-          {{ siteConfig.SITE_LOGO.name }}
-          <template #extra>
-            {{ siteConfig.SITE_LOGO.description }}
-            <br />
-            <a-upload :file-list="logoFile ? [logoFile] : []" accept="image/*" :show-file-list="false"
-              :custom-request="handleUploadLogo" @change="handleChangeLogo">
-              <template #upload-button>
-                <div :class="`arco-upload-list-item${logoFile && logoFile.status === 'error' ? ' arco-upload-list-item-error' : ''
-                  }`">
-                  <div v-if="logoFile && logoFile.url" class="arco-upload-list-picture custom-upload-avatar logo">
-                    <img :src="logoFile.url" alt="Logo" />
-                    <div v-if="isUpdate" class="arco-upload-list-picture-mask logo">
-                      <IconEdit />
-                    </div>
-                  </div>
-                  <div v-else class="arco-upload-picture-card logo">
-                    <div class="arco-upload-picture-card-text">
-                      <icon-upload />
-                    </div>
+                <div v-else class="arco-upload-picture-card favicon">
+                  <div class="arco-upload-picture-card-text">
+                    <icon-upload />
                   </div>
                 </div>
-              </template>
-            </a-upload>
-          </template>
-        </a-form-item>
-      </a-list-item>
-      <a-list-item style="padding-top: 13px; border: none">
-        <a-form-item class="input-item" field="SITE_TITLE" :label="siteConfig.SITE_TITLE.name">
-          <a-input v-model.trim="form.SITE_TITLE" placeholder="请输入网站标题" :max-length="18" />
-        </a-form-item>
-        <a-form-item class="input-item" field="SITE_COPYRIGHT" :label="siteConfig.SITE_COPYRIGHT.name">
-          <a-input v-model.trim="form.SITE_COPYRIGHT" placeholder="请输入版权信息" />
-        </a-form-item>
-        <div style="margin-top: 20px">
-          <a-space>
-            <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
-              <template #icon>
-                <icon-edit />
-              </template>修改
-            </a-button>
-            <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
-              <template #icon>
-                <icon-undo />
-              </template>恢复默认
-            </a-button>
-            <a-button v-if="isUpdate" type="primary" @click="handleSave">
-              <template #icon>
-                <icon-save />
-              </template>保存
-            </a-button>
-            <a-button v-if="isUpdate" @click="reset">
-              <template #icon>
-                <icon-refresh />
-              </template>重置
-            </a-button>
-            <a-button v-if="isUpdate" @click="handleCancel">
-              <template #icon>
-                <icon-undo />
-              </template>取消
-            </a-button>
-          </a-space>
-        </div>
-      </a-list-item>
+              </div>
+            </template>
+          </a-upload>
+        </template>
+      </a-form-item>
+      <a-form-item class="image-item" field="SITE_LOGO" hide-label>
+        {{ siteConfig.SITE_LOGO.name }}
+        <template #extra>
+          {{ siteConfig.SITE_LOGO.description }}
+          <br />
+          <a-upload :file-list="logoFile ? [logoFile] : []" accept="image/*" :show-file-list="false"
+            :custom-request="handleUploadLogo" @change="handleChangeLogo">
+            <template #upload-button>
+              <div :class="`arco-upload-list-item${logoFile && logoFile.status === 'error' ? ' arco-upload-list-item-error' : ''
+                }`">
+                <div v-if="logoFile && logoFile.url" class="arco-upload-list-picture custom-upload-avatar logo">
+                  <img :src="logoFile.url" alt="Logo" />
+                  <div v-if="isUpdate" class="arco-upload-list-picture-mask logo">
+                    <IconEdit />
+                  </div>
+                </div>
+                <div v-else class="arco-upload-picture-card logo">
+                  <div class="arco-upload-picture-card-text">
+                    <icon-upload />
+                  </div>
+                </div>
+              </div>
+            </template>
+          </a-upload>
+        </template>
+      </a-form-item>
+      <a-form-item class="input-item" field="SITE_TITLE" :label="siteConfig.SITE_TITLE.name">
+        <a-input v-model.trim="form.SITE_TITLE" placeholder="请输入网站标题" :max-length="18" />
+      </a-form-item>
+      <a-form-item class="input-item" field="SITE_COPYRIGHT" :label="siteConfig.SITE_COPYRIGHT.name">
+        <a-input v-model.trim="form.SITE_COPYRIGHT" placeholder="请输入版权信息" />
+      </a-form-item>
+      <div style="margin-top: 20px">
+        <a-space>
+          <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
+            <template #icon>
+              <icon-edit />
+            </template>修改
+          </a-button>
+          <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
+            <template #icon>
+              <icon-undo />
+            </template>恢复默认
+          </a-button>
+          <a-button v-if="isUpdate" type="primary" @click="handleSave">
+            <template #icon>
+              <icon-save />
+            </template>保存
+          </a-button>
+          <a-button v-if="isUpdate" @click="reset">
+            <template #icon>
+              <icon-refresh />
+            </template>重置
+          </a-button>
+          <a-button v-if="isUpdate" @click="handleCancel">
+            <template #icon>
+              <icon-undo />
+            </template>取消
+          </a-button>
+        </a-space>
+      </div>
     </a-list>
   </a-form>
 </template>
@@ -114,6 +108,7 @@ import { useForm } from '@/hooks'
 
 defineOptions({ name: 'BasicSetting' })
 
+const loading = ref<boolean>(false)
 const formRef = ref<FormInstance>()
 const { form } = useForm({
   SITE_FAVICON: '',
@@ -162,12 +157,14 @@ const queryForm = reactive({
 })
 // 查询列表数据
 const getDataList = async () => {
+  loading.value = true
   const { data } = await listOption(queryForm)
   siteConfig.value = data.reduce((obj: SiteConfig, option: OptionResp) => {
     obj[option.code] = { ...option }
     return obj
   }, {})
   handleCancel()
+  loading.value = false
 }
 
 const appStore = useAppStore()
@@ -206,20 +203,20 @@ const onResetValue = () => {
 const handleUploadFavicon = (options: RequestOption) => {
   const controller = new AbortController()
     ; (async function requestWrap() {
-    const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
-    onProgress(20)
-    const formData = new FormData()
-    formData.append(name as string, fileItem.file as Blob)
-    uploadFile(formData)
-      .then((res) => {
-        onSuccess(res)
-        form.SITE_FAVICON = res.data.url
-        Message.success('上传成功')
-      })
-      .catch((error) => {
-        onError(error)
-      })
-  })()
+      const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
+      onProgress(20)
+      const formData = new FormData()
+      formData.append(name as string, fileItem.file as Blob)
+      uploadFile(formData)
+        .then((res) => {
+          onSuccess(res)
+          form.SITE_FAVICON = res.data.url
+          Message.success('上传成功')
+        })
+        .catch((error) => {
+          onError(error)
+        })
+    })()
   return {
     abort() {
       controller.abort()
@@ -236,20 +233,20 @@ const handleChangeFavicon = (_: any, currentFile: any) => {
 const handleUploadLogo = (options: RequestOption) => {
   const controller = new AbortController()
     ; (async function requestWrap() {
-    const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
-    onProgress(20)
-    const formData = new FormData()
-    formData.append(name as string, fileItem.file as Blob)
-    uploadFile(formData)
-      .then((res) => {
-        onSuccess(res)
-        form.SITE_LOGO = res.data.url
-        Message.success('上传成功')
-      })
-      .catch((error) => {
-        onError(error)
-      })
-  })()
+      const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
+      onProgress(20)
+      const formData = new FormData()
+      formData.append(name as string, fileItem.file as Blob)
+      uploadFile(formData)
+        .then((res) => {
+          onSuccess(res)
+          form.SITE_LOGO = res.data.url
+          Message.success('上传成功')
+        })
+        .catch((error) => {
+          onError(error)
+        })
+    })()
   return {
     abort() {
       controller.abort()
@@ -268,6 +265,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.form {
+  margin: 20px 0 0 20px;
+}
+
 .logo {
   width: 33px;
   height: 33px;
diff --git a/src/views/system/config/components/MailSetting.vue b/src/views/system/config/components/MailSetting.vue
index b99cd36..0cdd195 100644
--- a/src/views/system/config/components/MailSetting.vue
+++ b/src/views/system/config/components/MailSetting.vue
@@ -1,59 +1,53 @@
 <template>
   <a-space wrap :size="30">
-    <a-form
-      ref="formRef"
-      :model="form"
-      :rules="rules"
-      auto-label-width
-      label-align="left"
-      :layout="width >= 500 ? 'horizontal' : 'vertical' "
-      :disabled="!isUpdate"
-      scroll-to-first-error
-      class="form"
-    >
-      <a-form-item field="MAIL_PROTOCOL" :label="mailConfig.MAIL_PROTOCOL.name" hide-asterisk>
-        <a-select v-model.trim="form.MAIL_PROTOCOL">
-          <a-option label="SMTP" value="smtp" />
-        </a-select>
-      </a-form-item>
-      <a-form-item field="MAIL_HOST" :label="mailConfig.MAIL_HOST.name" hide-asterisk>
-        <a-input v-model.trim="form.MAIL_HOST" />
-      </a-form-item>
-      <a-form-item field="MAIL_PORT" :label="mailConfig.MAIL_PORT.name" hide-asterisk>
-        <a-input-number v-model="form.MAIL_PORT" :min="0" />
-      </a-form-item>
-      <a-form-item field="MAIL_USERNAME" :label="mailConfig.MAIL_USERNAME.name" hide-asterisk>
-        <a-input v-model.trim="form.MAIL_USERNAME" />
-      </a-form-item>
-      <a-form-item field="MAIL_PASSWORD" :label="mailConfig.MAIL_PASSWORD?.name" hide-asterisk>
-        <a-input-password v-model.trim="form.MAIL_PASSWORD" />
-      </a-form-item>
-      <a-form-item field="MAIL_SSL_ENABLED" :label="mailConfig.MAIL_SSL_ENABLED?.name" hide-asterisk>
-        <a-radio-group v-model:model-value="form.MAIL_SSL_ENABLED">
-          <a-radio value="1">启用</a-radio>
-          <a-radio value="0">禁用</a-radio>
-        </a-radio-group>
-      </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-input-number v-model="form.MAIL_SSL_PORT" :min="0" />
-      </a-form-item>
-      <a-space>
-        <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
-          <template #icon><icon-edit /></template>修改
-        </a-button>
-        <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
-          <template #icon><icon-undo /></template>恢复默认
-        </a-button>
-        <a-button v-if="isUpdate" type="primary" @click="handleSave">
-          <template #icon><icon-save /></template>保存
-        </a-button>
-        <a-button v-if="isUpdate" @click="reset">
-          <template #icon><icon-refresh /></template>重置
-        </a-button>
-        <a-button v-if="isUpdate" @click="handleCancel">
-          <template #icon><icon-undo /></template>取消
-        </a-button>
-      </a-space>
+    <a-form ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
+      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error class="form">
+      <a-list :bordered="false" :loading="loading">
+        <a-form-item field="MAIL_PROTOCOL" :label="mailConfig.MAIL_PROTOCOL.name" hide-asterisk>
+          <a-select v-model.trim="form.MAIL_PROTOCOL">
+            <a-option label="SMTP" value="smtp" />
+          </a-select>
+        </a-form-item>
+        <a-form-item field="MAIL_HOST" :label="mailConfig.MAIL_HOST.name" hide-asterisk>
+          <a-input v-model.trim="form.MAIL_HOST" />
+        </a-form-item>
+        <a-form-item field="MAIL_PORT" :label="mailConfig.MAIL_PORT.name" hide-asterisk>
+          <a-input-number v-model="form.MAIL_PORT" :min="0" />
+        </a-form-item>
+        <a-form-item field="MAIL_USERNAME" :label="mailConfig.MAIL_USERNAME.name" hide-asterisk>
+          <a-input v-model.trim="form.MAIL_USERNAME" />
+        </a-form-item>
+        <a-form-item field="MAIL_PASSWORD" :label="mailConfig.MAIL_PASSWORD?.name" hide-asterisk>
+          <a-input-password v-model.trim="form.MAIL_PASSWORD" />
+        </a-form-item>
+        <a-form-item field="MAIL_SSL_ENABLED" :label="mailConfig.MAIL_SSL_ENABLED?.name" hide-asterisk>
+          <a-radio-group v-model:model-value="form.MAIL_SSL_ENABLED">
+            <a-radio value="1">启用</a-radio>
+            <a-radio value="0">禁用</a-radio>
+          </a-radio-group>
+        </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-input-number v-model="form.MAIL_SSL_PORT" :min="0" />
+        </a-form-item>
+        <a-space>
+          <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
+            <template #icon><icon-edit /></template>修改
+          </a-button>
+          <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
+            <template #icon><icon-undo /></template>恢复默认
+          </a-button>
+          <a-button v-if="isUpdate" type="primary" @click="handleSave">
+            <template #icon><icon-save /></template>保存
+          </a-button>
+          <a-button v-if="isUpdate" @click="reset">
+            <template #icon><icon-refresh /></template>重置
+          </a-button>
+          <a-button v-if="isUpdate" @click="handleCancel">
+            <template #icon><icon-undo /></template>取消
+          </a-button>
+        </a-space>
+      </a-list>
     </a-form>
   </a-space>
 </template>
@@ -72,7 +66,7 @@ import { useForm } from '@/hooks'
 
 defineOptions({ name: 'MailSetting' })
 const { width } = useWindowSize()
-
+const loading = ref<boolean>(false)
 const formRef = ref<FormInstance>()
 const { form } = useForm({
   MAIL_PROTOCOL: '',
@@ -130,12 +124,14 @@ const queryForm = {
 }
 // 查询列表数据
 const getDataList = async () => {
+  loading.value = true
   const { data } = await listOption(queryForm)
   mailConfig.value = data.reduce((obj: MailConfig, option: OptionResp) => {
     obj[option.code] = { ...option, value: ['MAIL_PORT', 'MAIL_SSL_PORT'].includes(option.code) ? Number.parseInt(option.value) : option.value }
     return obj
   }, {})
   handleCancel()
+  loading.value = false
 }
 
 // 保存
diff --git a/src/views/system/config/components/SecuritySetting.vue b/src/views/system/config/components/SecuritySetting.vue
index e3de3aa..05f576a 100644
--- a/src/views/system/config/components/SecuritySetting.vue
+++ b/src/views/system/config/components/SecuritySetting.vue
@@ -1,85 +1,80 @@
 <template>
   <a-space wrap :size="30">
-    <a-form
-      ref="formRef"
-      :model="form"
-      :rules="rules"
-      auto-label-width
-      label-align="left"
-      :layout="width >= 500 ? 'horizontal' : 'vertical'"
-      :disabled="!isUpdate"
-      scroll-to-first-error
-      class="form"
-    >
-      <a-form-item field="PASSWORD_ERROR_LOCK_COUNT" :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name"
-        :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"
-          :min="0" :max="10">
-          <template #append>次</template>
-        </a-input-number>
-      </a-form-item>
-      <a-form-item field="PASSWORD_ERROR_LOCK_MINUTES" :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name"
-        :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"
-          :max="1440">
-          <template #append>分钟</template>
-        </a-input-number>
-      </a-form-item>
-      <a-form-item field="PASSWORD_EXPIRATION_DAYS" :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name"
-        :help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk>
-        <a-input-number v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0"
-          :max="999">
-          <template #append>天</template>
-        </a-input-number>
-      </a-form-item>
-      <a-form-item :label="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.name"
-        field="PASSWORD_EXPIRATION_WARNING_DAYS" :help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description"
-        hide-asterisk>
-        <a-input-number v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS" class="input-width" :precision="0" :min="0"
-          :max="998">
-          <template #append>天</template>
-        </a-input-number>
-      </a-form-item>
-      <a-form-item field="PASSWORD_REUSE_POLICY" :label="securityConfig.PASSWORD_REUSE_POLICY.name"
-        :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">
-          <template #append>次</template>
-        </a-input-number>
-      </a-form-item>
-      <a-form-item field="PASSWORD_MIN_LENGTH" :label="securityConfig.PASSWORD_MIN_LENGTH.name"
-        :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-form-item>
-      <a-form-item field="PASSWORD_ALLOW_CONTAIN_USERNAME" :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name">
-        <a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0">
-          <template #checked>是</template>
-          <template #unchecked>否</template>
-        </a-switch>
-      </a-form-item>
-      <a-form-item field="PASSWORD_CONTAIN_SPECIAL_CHARACTERS" :label="securityConfig.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.name">
-        <a-switch v-model="form.PASSWORD_CONTAIN_SPECIAL_CHARACTERS" type="round" :checked-value="1"
-          :unchecked-value="0">
-          <template #checked>是</template>
-          <template #unchecked>否</template>
-        </a-switch>
-      </a-form-item>
-      <a-space>
-        <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
-          <template #icon><icon-edit /></template>修改
-        </a-button>
-        <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
-          <template #icon><icon-undo /></template>恢复默认
-        </a-button>
-        <a-button v-if="isUpdate" type="primary" @click="handleSave">
-          <template #icon><icon-save /></template>保存
-        </a-button>
-        <a-button v-if="isUpdate" @click="reset">
-          <template #icon><icon-refresh /></template>重置
-        </a-button>
-        <a-button v-if="isUpdate" @click="handleCancel">
-          <template #icon><icon-undo /></template>取消
-        </a-button>
-      </a-space>
+    <a-form ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left"
+      :layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error class="form">
+      <a-list :bordered="false" :loading="loading">
+        <a-form-item field="PASSWORD_ERROR_LOCK_COUNT" :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name"
+          :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"
+            :min="0" :max="10">
+            <template #append>次</template>
+          </a-input-number>
+        </a-form-item>
+        <a-form-item field="PASSWORD_ERROR_LOCK_MINUTES" :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name"
+          :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"
+            :max="1440">
+            <template #append>分钟</template>
+          </a-input-number>
+        </a-form-item>
+        <a-form-item field="PASSWORD_EXPIRATION_DAYS" :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name"
+          :help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk>
+          <a-input-number v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0"
+            :max="999">
+            <template #append>天</template>
+          </a-input-number>
+        </a-form-item>
+        <a-form-item :label="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.name"
+          field="PASSWORD_EXPIRATION_WARNING_DAYS" :help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description"
+          hide-asterisk>
+          <a-input-number v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS" class="input-width" :precision="0" :min="0"
+            :max="998">
+            <template #append>天</template>
+          </a-input-number>
+        </a-form-item>
+        <a-form-item field="PASSWORD_REUSE_POLICY" :label="securityConfig.PASSWORD_REUSE_POLICY.name"
+          :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">
+            <template #append>次</template>
+          </a-input-number>
+        </a-form-item>
+        <a-form-item field="PASSWORD_MIN_LENGTH" :label="securityConfig.PASSWORD_MIN_LENGTH.name"
+          :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-form-item>
+        <a-form-item field="PASSWORD_ALLOW_CONTAIN_USERNAME"
+          :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name">
+          <a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0">
+            <template #checked>是</template>
+            <template #unchecked>否</template>
+          </a-switch>
+        </a-form-item>
+        <a-form-item field="PASSWORD_CONTAIN_SPECIAL_CHARACTERS"
+          :label="securityConfig.PASSWORD_CONTAIN_SPECIAL_CHARACTERS.name">
+          <a-switch v-model="form.PASSWORD_CONTAIN_SPECIAL_CHARACTERS" type="round" :checked-value="1"
+            :unchecked-value="0">
+            <template #checked>是</template>
+            <template #unchecked>否</template>
+          </a-switch>
+        </a-form-item>
+        <a-space>
+          <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
+            <template #icon><icon-edit /></template>修改
+          </a-button>
+          <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
+            <template #icon><icon-undo /></template>恢复默认
+          </a-button>
+          <a-button v-if="isUpdate" type="primary" @click="handleSave">
+            <template #icon><icon-save /></template>保存
+          </a-button>
+          <a-button v-if="isUpdate" @click="reset">
+            <template #icon><icon-refresh /></template>重置
+          </a-button>
+          <a-button v-if="isUpdate" @click="handleCancel">
+            <template #icon><icon-undo /></template>取消
+          </a-button>
+        </a-space>
+      </a-list>
     </a-form>
   </a-space>
 </template>
@@ -93,6 +88,7 @@ import { useForm } from '@/hooks'
 defineOptions({ name: 'SecuritySetting' })
 const { width } = useWindowSize()
 
+const loading = ref<boolean>(false)
 const formRef = ref<FormInstance>()
 const { form } = useForm({
   PASSWORD_ERROR_LOCK_COUNT: 0,
@@ -164,12 +160,14 @@ const queryForm = {
 }
 // 查询列表数据
 const getDataList = async () => {
+  loading.value = true
   const { data } = await listOption(queryForm)
   securityConfig.value = data.reduce((obj: SecurityConfig, option: OptionResp) => {
     obj[option.code] = { ...option, value: Number.parseInt(option.value) }
     return obj
   }, {})
   handleCancel()
+  loading.value = false
 }
 
 // 保存
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index cb4c694..7cb7c66 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -12,29 +12,15 @@
         <DeptTree placeholder="请输入关键词" @node-click="handleSelectDept" />
       </a-col>
       <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden">
-        <GiTable
-          row-key="id"
-          :data="dataList"
-          :columns="columns"
-          :loading="loading"
-          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
-          :pagination="pagination"
-          :disabled-tools="['size']"
-          :disabled-column-keys="['username']"
-          @refresh="search"
-        >
+        <GiTable row-key="id" :data="dataList" :columns="columns" :loading="loading"
+          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }" :pagination="pagination" :disabled-tools="['size']"
+          :disabled-column-keys="['username']" @refresh="search">
           <template #custom-left>
             <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
               <template #prefix><icon-search /></template>
             </a-input>
-            <a-select
-              v-model="queryForm.status"
-              :options="DisEnableStatusList"
-              placeholder="请选择状态"
-              allow-clear
-              style="width: 150px"
-              @change="search"
-            />
+            <a-select v-model="queryForm.status" :options="DisEnableStatusList" placeholder="请选择状态" allow-clear
+              style="width: 150px" @change="search" />
             <a-button @click="reset">重置</a-button>
           </template>
           <template #custom-right>