refactor: 优化登录验证码开关代码

src/views/system/config/components/LoginSetting.vue

@@ -1,53 +1,44 @@
 <template>
   <a-spin :loading="loading">
     <a-form
-        ref="formRef"
-        :model="form"
-        auto-label-width
-        label-align="left"
-        :layout="width >= 500 ? 'horizontal' : 'vertical'"
-        :disabled="!isUpdate"
-        scroll-to-first-error>
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      auto-label-width
+      label-align="left"
+      :layout="width >= 500 ? 'horizontal' : 'vertical'"
+      :disabled="!isUpdate"
+      scroll-to-first-error
+    >
       <a-form-item
-          field="NEED_CAPTCHA"
-          :label="captchaSetting.NEED_CAPTCHA.name"
+        field="LOGIN_CAPTCHA_ENABLED"
+        :label="loginConfig.LOGIN_CAPTCHA_ENABLED.name"
       >
-        <a-switch v-model="form.NEED_CAPTCHA" type="round" :checked-value="1" :unchecked-value="0">
+        <a-switch
+          v-model="form.LOGIN_CAPTCHA_ENABLED"
+          type="round"
+          :checked-value="1"
+          :unchecked-value="0"
+        >
           <template #checked>是</template>
           <template #unchecked>否</template>
         </a-switch>
       </a-form-item>
-
       <a-space style="margin-bottom: 16px">
         <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
-          <template #icon>
-            <icon-edit/>
-          </template>
-          修改
+          <template #icon><icon-edit /></template>修改
         </a-button>
         <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
-          <template #icon>
-            <icon-undo/>
-          </template>
-          恢复默认
+          <template #icon><icon-undo /></template>恢复默认
         </a-button>
         <a-button v-if="isUpdate" type="primary" @click="handleSave">
-          <template #icon>
-            <icon-save/>
-          </template>
-          保存
+          <template #icon><icon-save /></template>保存
         </a-button>
         <a-button v-if="isUpdate" @click="reset">
-          <template #icon>
-            <icon-refresh/>
-          </template>
-          重置
+          <template #icon><icon-refresh /></template>重置
         </a-button>
         <a-button v-if="isUpdate" @click="handleCancel">
-          <template #icon>
-            <icon-undo/>
-          </template>
-          取消
+          <template #icon><icon-undo /></template>取消
         </a-button>
       </a-space>
     </a-form>
@@ -55,27 +46,31 @@
 </template>
 
 <script setup lang="ts">
-import {useWindowSize} from '@vueuse/core'
-import {type FormInstance, Message, Modal} from '@arco-design/web-vue'
-import {type CaptchaSetting, listOption, type OptionResp, resetOptionValue, updateOption} from '@/apis/system'
-import {useResetReactive} from '@/hooks'
+import { useWindowSize } from '@vueuse/core'
+import { type FormInstance, Message, Modal } from '@arco-design/web-vue'
+import { type LoginConfig, type OptionResp, listOption, resetOptionValue, updateOption } from '@/apis/system'
+import { useResetReactive } from '@/hooks'
 
-defineOptions({name: 'CaptchaSetting'})
-const {width} = useWindowSize()
+defineOptions({ name: 'LoginSetting' })
+const { width } = useWindowSize()
 
 const loading = ref<boolean>(false)
 const formRef = ref<FormInstance>()
 const [form] = useResetReactive({
-  NEED_CAPTCHA: 1,
+  LOGIN_CAPTCHA_ENABLED: 1,
+})
+const rules: FormInstance['rules'] = {
+  LOGIN_CAPTCHA_ENABLED: [{ required: true, message: '请选择' }],
+}
+
+const loginConfig = ref<LoginConfig>({
+  LOGIN_CAPTCHA_ENABLED: {},
 })
 
-const captchaSetting = ref<CaptchaSetting>({
-  NEED_CAPTCHA: {},
-})
 // 重置
 const reset = () => {
   formRef.value?.resetFields()
-  form.NEED_CAPTCHA = captchaSetting.value.NEED_CAPTCHA.value
+  form.LOGIN_CAPTCHA_ENABLED = loginConfig.value.LOGIN_CAPTCHA_ENABLED.value || 0
 }
 
 const isUpdate = ref(false)
@@ -91,19 +86,21 @@ const handleCancel = () => {
 }
 
 const queryForm = {
-  category: 'CAPTCHA',
+  category: 'LOGIN',
 }
 // 查询列表数据
 const getDataList = async () => {
-  loading.value = true
-  const {data} = await listOption(queryForm)
-  captchaSetting.value = data.reduce((obj: CaptchaSetting, option: OptionResp) => {
-    obj[option.code] = {...option, value: Number.parseInt(option.value)}
-    return obj
-  }, {})
-
-  handleCancel()
-  loading.value = false
+  try {
+    loading.value = true
+    const { data } = await listOption(queryForm)
+    loginConfig.value = data.reduce((obj: LoginConfig, option: OptionResp) => {
+      obj[option.code] = { ...option, value: Number.parseInt(option.value) }
+      return obj
+    }, {})
+    handleCancel()
+  } finally {
+    loading.value = false
+  }
 }
 
 // 保存
@@ -111,9 +108,9 @@ const handleSave = async () => {
   const isInvalid = await formRef.value?.validate()
   if (isInvalid) return false
   await updateOption(
-      Object.entries(form).map(([key, value]) => {
-        return {id: captchaSetting.value[key].id, code: key, value}
-      }),
+    Object.entries(form).map(([key, value]) => {
+      return { id: loginConfig.value[key].id, code: key, value }
+    }),
   )
   await getDataList()
   Message.success('保存成功')
@@ -128,7 +125,7 @@ const handleResetValue = async () => {
 const onResetValue = () => {
   Modal.warning({
     title: '警告',
-    content: '确认恢复安全配置为默认值吗？',
+    content: '确认恢复登录配置为默认值吗？',
     hideCancel: false,
     maskClosable: false,
     onOk: handleResetValue,

src/views/system/config/components/MailSetting.vue

@@ -7,7 +7,8 @@
       auto-label-width
       label-align="left"
       :layout="width >= 500 ? 'horizontal' : 'vertical'"
-      :disabled="!isUpdate" scroll-to-first-error
+      :disabled="!isUpdate"
+      scroll-to-first-error
     >
       <a-form-item field="MAIL_PROTOCOL" :label="mailConfig.MAIL_PROTOCOL.name" hide-asterisk>
         <a-select v-model.trim="form.MAIL_PROTOCOL">
@@ -27,10 +28,15 @@
         <a-input-password v-model.trim="form.MAIL_PASSWORD" class="input-width" />
       </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-switch
+          v-model="form.MAIL_SSL_ENABLED"
+          type="round"
+          :checked-value="1"
+          :unchecked-value="0"
+        >
+          <template #checked>启用</template>
+          <template #unchecked>禁用</template>
+        </a-switch>
       </a-form-item>
       <a-form-item
         v-if="form.MAIL_SSL_ENABLED === '1'" field="MAIL_SSL_PORT" :label="mailConfig.MAIL_SSL_PORT.name"

src/views/system/config/index.vue

@@ -10,14 +10,14 @@
         <template #title><icon-settings /> 基础配置</template>
       </a-tab-pane>
       <a-tab-pane key="2">
-        <template #title><icon-email /> 邮件配置</template>
-      </a-tab-pane>
-      <a-tab-pane key="3">
         <template #title><icon-safe /> 安全配置</template>
       </a-tab-pane>
+      <a-tab-pane key="3">
+        <template #title><icon-email /> 邮件配置</template>
+      </a-tab-pane>
       <a-tab-pane key="4">
-      <template #title><icon-safe /> 登录配置</template>
-    </a-tab-pane>
+        <template #title><icon-lock /> 登录配置</template>
+      </a-tab-pane>
     </a-tabs>
     <keep-alive>
       <component :is="PanMap[activeKey]" />
@@ -28,16 +28,16 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router'
 import BasicSetting from './components/BasicSetting.vue'
-import MailSetting from './components/MailSetting.vue'
 import SecuritySetting from './components/SecuritySetting.vue'
-import LoginSetting from './components/CaptchaSetting.vue'
+import MailSetting from './components/MailSetting.vue'
+import LoginSetting from './components/LoginSetting.vue'
 
 defineOptions({ name: 'SystemConfig' })
 
 const PanMap: Record<string, Component> = {
   1: BasicSetting,
-  2: MailSetting,
-  3: SecuritySetting,
+  2: SecuritySetting,
+  3: MailSetting,
   4: LoginSetting,
 }