feat: 新增验证码配置开关

package.json

@@ -4,6 +4,7 @@
   "version": "3.4.0",
   "private": "true",
   "scripts": {
+    "bootstrap": "pnpm install --registry=https://registry.npmmirror.com",
     "dev": "vite --host",
     "build": "vue-tsc --noEmit && vite build",
     "build:test": "vue-tsc --noEmit && vite build --mode test",

src/apis/auth/type.ts

@@ -45,6 +45,7 @@ export interface RouteItem {
 export interface AccountLoginReq {
   username: string
   password: string
+  unCaptcha: boolean
   captcha: string
   uuid: string
 }

src/apis/common/captcha.ts

@@ -5,6 +5,11 @@ export type * from './type'
 
 const BASE_URL = '/captcha'
 
+/** @desc 获取图片验证码 */
+export function getCaptchaConfig() {
+  return http.get<boolean>(`${BASE_URL}/config`)
+}
+
 /** @desc 获取图片验证码 */
 export function getImageCaptcha() {
   return http.get<T.ImageCaptchaResp>(`${BASE_URL}/image`)

src/apis/system/type.ts

@@ -316,6 +316,11 @@ export interface SecurityConfig {
   PASSWORD_REQUIRE_SYMBOLS: OptionResp
 }
 
+/** 安全配置类型 */
+export interface CaptchaSetting {
+  NEED_CAPTCHA: OptionResp
+}
+
 /** 绑定三方账号信息 */
 export interface BindSocialAccountRes {
   source: string

src/views/login/components/account/index.vue

@@ -4,15 +4,15 @@
       :wrapper-col-style="{ flex: 1 }" size="large" @submit="handleLogin"
   >
     <a-form-item field="username" hide-label>
-      <a-input v-model="form.username" placeholder="请输入用户名" allow-clear />
+      <a-input v-model="form.username" placeholder="请输入用户名" allow-clear/>
     </a-form-item>
     <a-form-item field="password" hide-label>
-      <a-input-password v-model="form.password" placeholder="请输入密码" />
+      <a-input-password v-model="form.password" placeholder="请输入密码"/>
     </a-form-item>
-    <a-form-item field="captcha" hide-label>
+    <a-form-item field="captcha" hide-label v-if="unCaptcha">
-      <a-input v-model="form.captcha" placeholder="请输入验证码" :max-length="4" allow-clear style="flex: 1 1" />
+      <a-input v-model="form.captcha" placeholder="请输入验证码" :max-length="4" allow-clear style="flex: 1 1"/>
       <div class="captcha-container" @click="getCaptcha">
-        <img :src="captchaImgBase64" alt="验证码" class="captcha" />
+        <img :src="captchaImgBase64" alt="验证码" class="captcha"/>
         <div v-if="form.expired" class="overlay">
           <p>已过期，请刷新</p>
         </div>
@@ -33,11 +33,11 @@
 </template>
 
 <script setup lang="ts">
-import { type FormInstance, Message } from '@arco-design/web-vue'
+import {type FormInstance, Message} from '@arco-design/web-vue'
-import { useStorage } from '@vueuse/core'
+import {useStorage} from '@vueuse/core'
-import { getImageCaptcha } from '@/apis/common'
+import {getCaptchaConfig, getImageCaptcha} from '@/apis/common'
-import { useTabsStore, useUserStore } from '@/stores'
+import {useTabsStore, useUserStore} from '@/stores'
-import { encryptByRsa } from '@/utils/encrypt'
+import {encryptByRsa} from '@/utils/encrypt'
 
 const loginConfig = useStorage('login-config', {
   rememberMe: true,
@@ -46,19 +46,24 @@ const loginConfig = useStorage('login-config', {
   // username: debug ? 'admin' : '', // 演示默认值
   // password: debug ? 'admin123' : '', // 演示默认值
 })
+// 是否开启验证码
+const unCaptcha = ref(true)
+// 验证码图片
+const captchaImgBase64 = ref()
 
 const formRef = ref<FormInstance>()
 const form = reactive({
   username: loginConfig.value.username,
   password: loginConfig.value.password,
+  unCaptcha: unCaptcha.value,
   captcha: '',
   uuid: '',
   expired: false,
 })
 const rules: FormInstance['rules'] = {
-  username: [{ required: true, message: '请输入用户名' }],
+  username: [{required: true, message: '请输入用户名'}],
-  password: [{ required: true, message: '请输入密码' }],
+  password: [{required: true, message: '请输入密码'}],
-  captcha: [{ required: true, message: '请输入验证码' }],
+  captcha: [{required: unCaptcha.value, message: '请输入验证码'}],
 }
 
 // 验证码过期定时器
@@ -83,11 +88,10 @@ onBeforeUnmount(() => {
   }
 })
 
-const captchaImgBase64 = ref()
 // 获取验证码
 const getCaptcha = () => {
   getImageCaptcha().then((res) => {
-    const { uuid, img, expireTime } = res.data
+    const {uuid, img, expireTime} = res.data
     form.uuid = uuid
     captchaImgBase64.value = img
     form.expired = false
@@ -95,6 +99,17 @@ const getCaptcha = () => {
   })
 }
 
+const initCaptchaConfig = () => {
+  getCaptchaConfig().then((res) => {
+    const result = res.data
+    if (result.NEED_CAPTCHA == 0) {
+      unCaptcha.value = false
+    } else {
+      getCaptcha()
+    }
+  })
+}
+
 const userStore = useUserStore()
 const tabsStore = useTabsStore()
 const router = useRouter()
@@ -108,18 +123,19 @@ const handleLogin = async () => {
     await userStore.accountLogin({
       username: form.username,
       password: encryptByRsa(form.password) || '',
+      unCaptcha: form.unCaptcha,
       captcha: form.captcha,
       uuid: form.uuid,
     })
     tabsStore.reset()
-    const { redirect, ...othersQuery } = router.currentRoute.value.query
+    const {redirect, ...othersQuery} = router.currentRoute.value.query
     await router.push({
       path: (redirect as string) || '/',
       query: {
         ...othersQuery,
       },
     })
-    const { rememberMe } = loginConfig.value
+    const {rememberMe} = loginConfig.value
     loginConfig.value.username = rememberMe ? form.username : ''
     Message.success('欢迎使用')
   } catch (error) {
@@ -131,7 +147,7 @@ const handleLogin = async () => {
 }
 
 onMounted(() => {
-  getCaptcha()
+  initCaptchaConfig()
 })
 </script>
 

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

@@ -0,0 +1,151 @@
+<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>
+      <a-form-item
+          field="NEED_CAPTCHA"
+          :label="captchaSetting.NEED_CAPTCHA.name"
+      >
+        <a-switch v-model="form.NEED_CAPTCHA" 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>
+          修改
+        </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>
+  </a-spin>
+</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'
+
+defineOptions({name: 'CaptchaSetting'})
+const {width} = useWindowSize()
+
+const loading = ref<boolean>(false)
+const formRef = ref<FormInstance>()
+const [form] = useResetReactive({
+  NEED_CAPTCHA: 1,
+})
+
+const captchaSetting = ref<CaptchaSetting>({
+  NEED_CAPTCHA: {},
+})
+// 重置
+const reset = () => {
+  formRef.value?.resetFields()
+  form.NEED_CAPTCHA = captchaSetting.value.NEED_CAPTCHA.value
+}
+
+const isUpdate = ref(false)
+// 修改
+const onUpdate = () => {
+  isUpdate.value = true
+}
+
+// 取消
+const handleCancel = () => {
+  reset()
+  isUpdate.value = false
+}
+
+const queryForm = {
+  category: 'CAPTCHA',
+}
+// 查询列表数据
+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
+}
+
+// 保存
+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}
+      }),
+  )
+  await getDataList()
+  Message.success('保存成功')
+}
+
+// 恢复默认
+const handleResetValue = async () => {
+  await resetOptionValue(queryForm)
+  Message.success('恢复成功')
+  await getDataList()
+}
+const onResetValue = () => {
+  Modal.warning({
+    title: '警告',
+    content: '确认恢复安全配置为默认值吗？',
+    hideCancel: false,
+    maskClosable: false,
+    onOk: handleResetValue,
+  })
+}
+
+onMounted(() => {
+  getDataList()
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.arco-form-item.arco-form-item-has-help) {
+  margin-bottom: 5px;
+}
+
+.input-width {
+  width: 200px;
+}
+</style>

src/views/system/config/index.vue

@@ -15,6 +15,9 @@
       <a-tab-pane key="3">
         <template #title><icon-safe /> 安全配置</template>
       </a-tab-pane>
+      <a-tab-pane key="4">
+      <template #title><icon-safe /> 登录配置</template>
+    </a-tab-pane>
     </a-tabs>
     <keep-alive>
       <component :is="PanMap[activeKey]" />
@@ -27,6 +30,7 @@ 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'
 
 defineOptions({ name: 'SystemConfig' })
 
@@ -34,6 +38,7 @@ const PanMap: Record<string, Component> = {
   1: BasicSetting,
   2: MailSetting,
   3: SecuritySetting,
+  4: LoginSetting,
 }
 
 const route = useRoute()