From f4b5fe0d605936819e662525449a6af92e2196c8 Mon Sep 17 00:00:00 2001
From: xxm <xxm1995@outlook.com>
Date: Sun, 6 Nov 2022 01:05:18 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=BC=80=E6=94=BE=E5=B9=B3=E5=8F=B0?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96,=20?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/sys/login.ts                          |  47 +++++++
 src/api/sys/user.ts                           |  31 +++--
 src/components/CountDown/src/CountButton.vue  |   2 +-
 src/router/guard/permissionGuard.ts           |   3 +-
 src/router/index.ts                           |   4 +-
 src/store/modules/dict.ts                     |   2 +-
 src/store/modules/user.ts                     |   9 +-
 src/views/account/accountModel.ts             |  14 --
 src/views/account/bind/AccountBind.vue        |  30 ++++-
 src/views/account/bind/WeChatQrBind.vue       | 100 +++++++++++++-
 src/views/account/security/EmailBind.vue      |  22 +--
 src/views/account/security/EmailEdit.vue      |  98 +++++---------
 src/views/account/security/PasswordEdit.vue   |   1 +
 src/views/account/security/PhoneBind.vue      |  51 ++-----
 src/views/account/security/PhoneEdit.vue      |  99 +++++---------
 src/views/account/setting/data.ts             |  32 -----
 src/views/login/Login.vue                     |   8 +-
 src/views/login/LoginForm.vue                 |   4 +-
 src/views/login/LoginFormTitle.vue            |  13 +-
 src/views/login/RegisterForm.vue              |  78 -----------
 .../login/{ => user}/ForgetPasswordForm.vue   |  10 +-
 src/views/login/user/RegisterForm.vue         | 126 ++++++++++++++++++
 .../monitor/redis/RedisInfoMonitor.vue        |   7 +-
 .../monitor/system/SystemInfoMonitor.vue      |   4 +-
 24 files changed, 443 insertions(+), 352 deletions(-)
 create mode 100644 src/api/sys/login.ts
 delete mode 100644 src/views/login/RegisterForm.vue
 rename src/views/login/{ => user}/ForgetPasswordForm.vue (89%)
 create mode 100644 src/views/login/user/RegisterForm.vue

diff --git a/src/api/sys/login.ts b/src/api/sys/login.ts
new file mode 100644
index 00000000..235a9bb9
--- /dev/null
+++ b/src/api/sys/login.ts
@@ -0,0 +1,47 @@
+import { defHttp } from '/@/utils/http/axios'
+import { LoginParams } from './model/userModel'
+import { Result } from '/#/axios'
+
+/**
+ * 登录接口 返回token
+ */
+export function login(params: LoginParams) {
+  return defHttp.post<Result<string>>({
+    url: '/token/login',
+    params,
+  })
+}
+
+/**
+ * 获取微信扫码登录二维码
+ */
+export function applyQrCode() {
+  return defHttp.get<Result<WeChatLoginQrCode>>({
+    url: `/token/wechat/qr/applyQrCode`,
+  })
+}
+
+/**
+ * 获取扫码状态
+ */
+export function getQrStatus(qrCodeKey) {
+  return defHttp.get<Result<string>>({
+    url: `/token/wechat/qr/getStatus`,
+    params: { qrCodeKey },
+  })
+}
+
+/**
+ * 退出
+ */
+export function doLogout() {
+  return defHttp.post({ url: '/token/logout' })
+}
+
+/**
+ * 登录二维码
+ */
+export interface WeChatLoginQrCode {
+  qrCodeKey: string
+  qrCodeUrl: string
+}
diff --git a/src/api/sys/user.ts b/src/api/sys/user.ts
index 66816cb6..b6d29d2a 100644
--- a/src/api/sys/user.ts
+++ b/src/api/sys/user.ts
@@ -1,17 +1,7 @@
 import { defHttp } from '/@/utils/http/axios'
-import { LoginParams, GetUserInfoModel } from './model/userModel'
+import { GetUserInfoModel } from './model/userModel'
 import { Result } from '/#/axios'
 
-/**
- * 登录接口 返回token
- */
-export function loginApi(params: LoginParams) {
-  return defHttp.post<Result<string>>({
-    url: '/token/login',
-    params,
-  })
-}
-
 /**
  * 登录后获取用户信息
  */
@@ -20,8 +10,21 @@ export function getUserInfo() {
 }
 
 /**
- * 退出
+ * 注册
  */
-export function doLogout() {
-  return defHttp.post({ url: '/token/logout' })
+export function register(obj) {
+  return defHttp.post({
+    url: `/user/register`,
+    data: obj,
+  })
+}
+
+/**
+ * 重置密码
+ */
+export function forgetPasswordByPhone(obj) {
+  return defHttp.post({
+    url: `/user/forgetPasswordByPhone`,
+    data: obj,
+  })
 }
diff --git a/src/components/CountDown/src/CountButton.vue b/src/components/CountDown/src/CountButton.vue
index 712091fb..5a319d2f 100644
--- a/src/components/CountDown/src/CountButton.vue
+++ b/src/components/CountDown/src/CountButton.vue
@@ -28,7 +28,7 @@
 
       const { currentCount, isStart, start, reset } = useCountdown(props.count)
       const { t } = useI18n()
-
+      // 优化
       const getButtonText = computed(() => {
         return !unref(isStart) ? t('component.countdown.normalText') : t('component.countdown.sendText', [unref(currentCount)])
       })
diff --git a/src/router/guard/permissionGuard.ts b/src/router/guard/permissionGuard.ts
index 74c8e607..652aa300 100644
--- a/src/router/guard/permissionGuard.ts
+++ b/src/router/guard/permissionGuard.ts
@@ -98,12 +98,13 @@ export function createPermissionGuard(router: Router) {
       return
     }
     //TODO 添加 websocket连接.
-    console.log(`路由守卫`)
 
     // 重载菜单
+    console.log('重载菜单')
     const routes = await permissionStore.buildRoutesAction()
 
     // 初始化字典
+    console.log('初始化字典')
     await useDictStore.initDict()
 
     routes.forEach((route) => {
diff --git a/src/router/index.ts b/src/router/index.ts
index 510ed9f7..ab7d5967 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router'
 import type { App } from 'vue'
 
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
 import { basicRoutes } from './routes'
 
 // 白名单应该包含基本静态路由
@@ -17,7 +17,7 @@ getRouteNames(basicRoutes)
 // 创建一个可以被 Vue 应用程序使用的路由实例
 export const router = createRouter({
   // 创建一个 hash 历史记录。
-  history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
+  history: createWebHistory(import.meta.env.VITE_PUBLIC_PATH),
   // 应该添加到路由的初始路由列表。
   routes: basicRoutes as unknown as RouteRecordRaw[],
   // 是否应该禁止尾部斜杠。默认为假
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index 57f43558..719c3cd3 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -17,7 +17,7 @@ export const useDictStore = defineStore({
     },
   },
   actions: {
-    async initDict() {
+    initDict() {
       findAll().then(({ data }) => {
         this.dict = data.map((o) => {
           return {
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 2ed33020..9deb0ddc 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -6,9 +6,8 @@ import { RoleEnum } from '/@/enums/roleEnum'
 import { PageEnum } from '/@/enums/pageEnum'
 import { ROLES_KEY, TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum'
 import { getAuthCache, setAuthCache } from '/@/utils/auth'
-import { GetUserInfoModel, LoginParams } from '/@/api/sys/model/userModel'
-import { doLogout, getUserInfo, loginApi } from '/@/api/sys/user'
-import { useI18n } from '/@/hooks/web/useI18n'
+import { LoginParams } from '/@/api/sys/model/userModel'
+import { doLogout, login } from '/@/api/sys/login'
 import { useMessage } from '/@/hooks/web/useMessage'
 import { router } from '/@/router'
 import { usePermissionStore } from '/@/store/modules/permission'
@@ -16,6 +15,8 @@ import { RouteRecordRaw } from 'vue-router'
 import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic'
 import { h } from 'vue'
 import { getFilePreviewUrlPrefix } from '/@/api/common/FileUpload'
+// @ts-ignore
+import { getUserInfo } from '/@/api/sys/user'
 
 interface UserState {
   userInfo: Nullable<UserInfo>
@@ -89,7 +90,7 @@ export const useUserStore = defineStore({
      */
     async login(params: LoginParams) {
       try {
-        const { data: token } = await loginApi(params)
+        const { data: token } = await login(params)
         // 保存token
         this.setToken(token)
         await this.afterLoginAction(true)
diff --git a/src/views/account/accountModel.ts b/src/views/account/accountModel.ts
index 4f0872f0..cb8c617a 100644
--- a/src/views/account/accountModel.ts
+++ b/src/views/account/accountModel.ts
@@ -18,20 +18,6 @@ export interface UserDetails {
   clientIdList?: string[]
 }
 
-/**
- * 登录后用户信息
- */
-export interface GetUserInfoModel {
-  // 用户id
-  userId: number
-  // 名称
-  name: string
-  // 账号
-  username: string
-  // 头像
-  avatar: string
-}
-
 /**
  * 用户基础消息
  */
diff --git a/src/views/account/bind/AccountBind.vue b/src/views/account/bind/AccountBind.vue
index 2cafa2dd..4c9322a9 100644
--- a/src/views/account/bind/AccountBind.vue
+++ b/src/views/account/bind/AccountBind.vue
@@ -56,24 +56,25 @@
         </a-col>
       </a-row>
     </a-spin>
+    <we-chat-qr-bind ref="weChatQrBind" @bind="bindWeChatCallback" />
   </CollapseContainer>
 </template>
 <script lang="ts" setup>
-  import { List } from 'ant-design-vue'
-  import { defineComponent, onMounted } from 'vue'
+  import { onMounted } from 'vue'
   import { CollapseContainer } from '/@/components/Container'
-  import {} from 'OpenIdLoginType'
   import { $ref } from 'vue/macros'
   import { DING_TALK, WE_CHAT, WE_CHAT_OPEN, QQ, WE_COM } from '/@/views/login/third/OpenIdLoginType'
   import { bindThird, getThirdBindInfo, unbindThird } from '/@/views/account/account.api'
   import { UserThirdBindInfo } from '/@/views/account/accountModel'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { getAppEnvConfig } from "/@/utils/env";
+  import { getAppEnvConfig } from '/@/utils/env'
+  import WeChatQrBind from './WeChatQrBind.vue'
 
   const { createMessage, createConfirm } = useMessage()
 
   let loading = $ref(false)
   let currentLoginType = $ref()
+  let weChatQrBind = $ref<any>()
   let bindInfo = $ref({
     weChat: {},
     weChatOpen: {},
@@ -130,6 +131,27 @@
       })
   }
 
+  /**
+   * 微信公众平台绑定
+   */
+  function bindWeChat() {
+    weChatQrBind.init()
+  }
+
+  /**
+   * 微信绑定回调
+   */
+  function bindWeChatCallback(from) {
+    loading = true
+    bindThird(from)
+      .then(() => {
+        createMessage.success('绑定成功')
+      })
+      .finally(() => {
+        init()
+      })
+  }
+
   /**
    * 解绑账号
    */
diff --git a/src/views/account/bind/WeChatQrBind.vue b/src/views/account/bind/WeChatQrBind.vue
index 2b112b58..7a3b2c69 100644
--- a/src/views/account/bind/WeChatQrBind.vue
+++ b/src/views/account/bind/WeChatQrBind.vue
@@ -1,5 +1,101 @@
-<template> </template>
+<template>
+  <basic-modal
+    title="扫码绑定"
+    :footer="null"
+    :can-fullscreen="false"
+    v-bind="$attrs"
+    :width="250"
+    :height="250"
+    :visible="visible"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="loading">
+      <qr-code :value="qrCodeUrl" />
+    </a-spin>
+  </basic-modal>
+</template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue'
+  import { $ref } from 'vue/macros'
+  import { QrCode } from '/@/components/Qrcode'
+  import { applyQrCode, getQrStatus } from '/@/api/sys/login'
+  import { onBeforeUnmount, reactive } from 'vue'
+  import { WE_CHAT } from '/@/views/login/third/OpenIdLoginType'
+
+  let visible = $ref(false)
+  let loading = $ref(false)
+  let qrCodeUrl = $ref('请稍等')
+  let interval: any
+
+  const emits = defineEmits(['bind'])
+
+  const form = reactive({
+    client: '',
+    loginType: WE_CHAT,
+    authCode: '',
+  })
+
+  function init() {
+    visible = true
+    getApplyQrCode()
+  }
+
+  /**
+   * 获取
+   */
+  function getApplyQrCode() {
+    loading = true
+    applyQrCode().then((res) => {
+      form.authCode = res.data.qrCodeKey
+      qrCodeUrl = res.data.qrCodeUrl
+      loading = false
+      checkQrScanStatus()
+    })
+  }
+
+  /**
+   * 定时查询扫码情况
+   */
+  function checkQrScanStatus() {
+    interval = setInterval(() => {
+      getQrStatus(form.authCode).then(({ data }) => {
+        // 成功 进行绑定
+        if (data === 'ok') {
+          bindWeChat()
+        } else if (data === 'expired') {
+          clearInterval(interval)
+          interval = null
+          getApplyQrCode()
+        }
+      })
+    }, 1000)
+  }
+
+  /**
+   * 绑定
+   */
+  function bindWeChat() {
+    emits('bind', {
+      authCode: form.authCode,
+      clientCode: form.loginType,
+    })
+    handleCancel()
+  }
+  /**
+   * 关闭
+   */
+  function handleCancel() {
+    clearInterval(interval)
+    interval = null
+    visible = false
+  }
+  onBeforeUnmount(() => {
+    handleCancel()
+  })
+  defineExpose({
+    init,
+  })
+</script>
 
 <style scoped></style>
diff --git a/src/views/account/security/EmailBind.vue b/src/views/account/security/EmailBind.vue
index 2b0871bd..9bbaf2fe 100644
--- a/src/views/account/security/EmailBind.vue
+++ b/src/views/account/security/EmailBind.vue
@@ -1,9 +1,9 @@
 <template>
   <basic-modal
+    title="邮箱绑定"
     v-bind="$attrs"
     :loading="confirmLoading"
     :width="640"
-    title="邮箱绑定"
     :visible="visible"
     @ok="handleOk"
     @cancel="handleCancel"
@@ -17,10 +17,11 @@
         :label-col="labelCol"
         :wrapper-col="wrapperCol"
       >
-        <a-form-item label="邮箱号" name="email">
+        <a-form-item validateFirst label="邮箱号" name="email">
           <a-input v-model:value="form.email" placeholder="邮箱" />
         </a-form-item>
-        <a-form-item label="验证码" name="captcha">
+        <a-form-item validateFirst label="验证码" name="captcha">
+          <count-down-input v-model:value="form.captcha" :send-code-api="sendEmailCaptcha" :count="120">获取验证码</count-down-input>
           <a-input :maxLength="8" placeholder="验证码" v-model:value="form.captcha">
             <template #addonAfter>
               <a-button size="small" type="link" :disabled="state.newCaptcha" href="javascript:" @click="sendEmailCaptcha">
@@ -44,6 +45,7 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { validateEmail } from '/@/utils/validate'
   import { bindEmail } from '/@/views/account/account.api'
+  import CountDownInput from "/@/components/CountDown/src/CountdownInput.vue";
 
   const emits = defineEmits(['ok'])
   const { visible, confirmLoading, modalWidth, labelCol, wrapperCol, handleCancel } = useFormEdit()
@@ -95,9 +97,6 @@
    */
   function validateEmailRule() {
     const { email } = form
-    if (!email) {
-      return Promise.resolve()
-    }
     const { msg, result } = validateEmail(email)
     return result ? Promise.resolve() : Promise.reject(msg)
   }
@@ -106,14 +105,6 @@
    */
   async function validateBindEmail() {
     const { email } = form
-    if (!email) {
-      return Promise.resolve()
-    }
-    const { msg, result } = validateEmail(email)
-    // 邮箱号验证
-    if (!result) {
-      return Promise.reject(msg)
-    }
     const { data } = await existsEmail(email)
     return data ? Promise.reject('邮箱已被使用') : Promise.resolve()
   }
@@ -122,9 +113,6 @@
    */
   async function validateCaptcha() {
     const { captcha } = form
-    if (!captcha) {
-      return Promise.resolve()
-    }
     const { data } = await validateEmailChangeCaptcha(form.email, captcha)
     return data ? Promise.resolve() : Promise.reject('验证码错误')
   }
diff --git a/src/views/account/security/EmailEdit.vue b/src/views/account/security/EmailEdit.vue
index f844d81d..a56b442b 100644
--- a/src/views/account/security/EmailEdit.vue
+++ b/src/views/account/security/EmailEdit.vue
@@ -5,30 +5,25 @@
         <a-step title="验证邮箱" />
         <a-step title="绑定新邮箱" />
       </a-steps>
-      <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-form-item label="邮箱" v-show="currentTab === 0">
+      <a-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        :validate-trigger="['blur', 'change']"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-item label="邮箱" v-show="currentTab === 0" validateFirst>
           <span>{{ email }}</span>
         </a-form-item>
-        <a-form-item label="验证码" name="oldCaptcha" v-show="currentTab === 0">
-          <a-input :maxLength="8" placeholder="验证码" v-model:value="form.oldCaptcha">
-            <template #addonAfter>
-              <a-button size="small" type="link" :disabled="state.oldCaptcha" href="javascript:" @click="sendOldEmailCaptcha">
-                {{ (!state.oldCaptcha && '获取验证码') || '请等待 ' + (state.oldCaptchaTime + ' s') }}
-              </a-button>
-            </template>
-          </a-input>
+        <a-form-item validate-first label="验证码" name="oldCaptcha" v-show="currentTab === 0">
+          <count-down-input v-model:value="form.oldCaptcha" :send-code-api="sendOldEmailCaptcha" :count="120">获取验证码1</count-down-input>
         </a-form-item>
-        <a-form-item label="邮箱" name="email" v-show="currentTab === 1">
+        <a-form-item validate-first label="邮箱" name="email" v-show="currentTab === 1">
           <a-input v-model:value="form.email" placeholder="邮箱" />
         </a-form-item>
-        <a-form-item label="验证码" name="newCaptcha" v-show="currentTab === 1">
-          <a-input :maxLength="8" placeholder="验证码" v-model:value="form.newCaptcha">
-            <template #addonAfter>
-              <a-button size="small" type="link" :disabled="state.newCaptcha" href="javascript:" @click="sendNewEmailCaptcha">
-                {{ (!state.newCaptcha && '获取验证码') || '请等待 ' + (state.newCaptchaTime + ' s') }}
-              </a-button>
-            </template>
-          </a-input>
+        <a-form-item validate-first label="验证码" name="newCaptcha" v-show="currentTab === 1">
+          <count-down-input v-model:value="form.newCaptcha" :send-code-api="sendNewEmailCaptcha" :count="120">获取验证码1</count-down-input>
         </a-form-item>
       </a-form>
     </a-spin>
@@ -44,7 +39,7 @@
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { $ref } from 'vue/macros'
-  import { computed, nextTick, reactive } from 'vue'
+  import { computed, nextTick } from 'vue'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { validateEmail, validateMobile } from '/@/utils/validate'
@@ -56,6 +51,7 @@
     validateEmailChangeCaptcha,
   } from '/@/api/sys/userAssist'
   import { updateEmail } from '/@/views/account/account.api'
+  import CountDownInput from '/@/components/CountDown/src/CountdownInput.vue'
 
   const props = defineProps({
     email: String,
@@ -74,7 +70,7 @@
     return {
       email: [
         { required: currentTab === 1, message: '请输入新邮箱!' },
-        { validator: validateEmailRule, trigger: 'change' },
+        { validator: validateEmailRule },
         { validator: validateNewEmail, trigger: 'blur' },
       ],
       oldCaptcha: [
@@ -87,12 +83,6 @@
       ],
     } as Record<string, Rule[]>
   })
-  const state = reactive({
-    oldCaptcha: false,
-    newCaptcha: false,
-    oldCaptchaTime: 120,
-    newCaptchaTime: 120,
-  })
   const formRef = $ref<FormInstance>()
 
   function init() {
@@ -121,7 +111,7 @@
    */
   function validateEmailRule() {
     const { email } = form
-    if (currentTab !== 1 || !email) {
+    if (currentTab !== 1) {
       return Promise.resolve()
     }
     const { msg, result } = validateEmail(email)
@@ -135,11 +125,6 @@
     if (currentTab !== 1) {
       return Promise.resolve()
     }
-    const { msg, result } = validateMobile(email)
-    // 邮箱验证
-    if (!result) {
-      return Promise.reject(msg)
-    }
     const { data } = await existsEmail(email)
     return data ? Promise.reject('邮箱已被使用') : Promise.resolve()
   }
@@ -148,9 +133,6 @@
    */
   async function validateOldCaptcha() {
     const { oldCaptcha } = form
-    if (!oldCaptcha) {
-      return Promise.resolve()
-    }
     const { data } = await validateCurrentEmailChangeCaptcha(oldCaptcha)
     return data ? Promise.resolve() : Promise.reject('验证码错误')
   }
@@ -168,36 +150,30 @@
   /**
    *  发送验证码 旧
    */
-  function sendOldEmailCaptcha() {
-    sendCurrentEmailChangeCaptcha().then(() => {
-      createMessage.success('发送验证码成功')
-      state.oldCaptcha = true
-      const interval = window.setInterval(() => {
-        if (state.oldCaptchaTime-- <= 0) {
-          state.oldCaptchaTime = 120
-          state.oldCaptcha = false
-          window.clearInterval(interval)
-        }
-      }, 1000)
-    })
+  async function sendOldEmailCaptcha() {
+    try {
+      await sendCurrentEmailChangeCaptcha().then(() => {
+        createMessage.success('发送验证码成功')
+      })
+    } catch (e) {
+      return false
+    }
+    return true
   }
   /**
    * 发送验证码 新手机
    */
-  function sendNewEmailCaptcha() {
-    formRef.validateFields('email').then(async () => {
-      sendEmailChangeCaptcha(form.email).then(() => {
-        createMessage.success('发送验证码成功')
-        state.newCaptcha = true
-        const interval = window.setInterval(() => {
-          if (state.newCaptchaTime-- <= 0) {
-            state.newCaptchaTime = 120
-            state.newCaptcha = false
-            window.clearInterval(interval)
-          }
-        }, 1000)
+  async function sendNewEmailCaptcha() {
+    try {
+      await formRef.validateFields('email').then(async () => {
+        sendEmailChangeCaptcha(form.email).then(() => {
+          createMessage.success('发送验证码成功')
+        })
       })
-    })
+    } catch (e) {
+      return false
+    }
+    return true
   }
 
   /**
diff --git a/src/views/account/security/PasswordEdit.vue b/src/views/account/security/PasswordEdit.vue
index de294f82..9caf02d6 100644
--- a/src/views/account/security/PasswordEdit.vue
+++ b/src/views/account/security/PasswordEdit.vue
@@ -2,6 +2,7 @@
   <basic-modal v-bind="$attrs" :loading="confirmLoading" :width="640" title="密码修改" :visible="visible" @cancel="handleCancel">
     <a-form
       ref="formRef"
+      validateFirst
       :validate-trigger="['blur', 'change']"
       :model="form"
       :rules="rules"
diff --git a/src/views/account/security/PhoneBind.vue b/src/views/account/security/PhoneBind.vue
index 4874db4d..8391345f 100644
--- a/src/views/account/security/PhoneBind.vue
+++ b/src/views/account/security/PhoneBind.vue
@@ -11,6 +11,7 @@
     <a-spin :spinning="confirmLoading">
       <a-form
         ref="formRef"
+        validateFirst
         :model="form"
         :rules="rules"
         :validate-trigger="['blur', 'change']"
@@ -21,13 +22,7 @@
           <a-input v-model:value="form.phone" placeholder="手机号" />
         </a-form-item>
         <a-form-item label="验证码" name="captcha">
-          <a-input :maxLength="8" placeholder="验证码" v-model:value="form.captcha">
-            <template #addonAfter>
-              <a-button size="small" type="link" :disabled="state.captcha" href="javascript:" @click="sendPhoneCaptcha">
-                {{ (!state.captcha && '获取验证码') || '请等待 ' + (state.captchaTime + ' s') }}
-              </a-button>
-            </template>
-          </a-input>
+          <count-down-input v-model:value="form.captcha" :send-code-api="sendPhoneCaptcha" :count="120">获取验证码</count-down-input>
         </a-form-item>
       </a-form>
     </a-spin>
@@ -44,6 +39,7 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { validateMobile } from '/@/utils/validate'
   import { bindPhone } from '/@/views/account/account.api'
+  import CountDownInput from '/@/components/CountDown/src/CountdownInput.vue'
 
   const emits = defineEmits(['ok'])
   const { visible, confirmLoading, modalWidth, labelCol, wrapperCol, handleCancel } = useFormEdit()
@@ -64,10 +60,6 @@
     ],
   } as Record<string, Rule[]>
 
-  const state = reactive({
-    captcha: false,
-    captchaTime: 120,
-  })
   const formRef = $ref<FormInstance>()
   function init() {
     visible.value = true
@@ -94,9 +86,6 @@
    */
   function validatePhone() {
     const { phone } = form
-    if (!phone) {
-      return Promise.resolve()
-    }
     const { msg, result } = validateMobile(phone)
     return result ? Promise.resolve() : Promise.reject(msg)
   }
@@ -105,14 +94,6 @@
    */
   async function validateBindPhone() {
     const { phone } = form
-    if (!phone) {
-      return Promise.resolve()
-    }
-    const { msg, result } = validateMobile(phone)
-    // 手机号验证
-    if (!result) {
-      return Promise.reject(msg)
-    }
     const { data } = await existsPhone(phone)
     return data ? Promise.reject('手机号已被使用') : Promise.resolve()
   }
@@ -121,29 +102,23 @@
    */
   async function validateCaptcha() {
     const { captcha } = form
-    if (!captcha) {
-      return Promise.resolve()
-    }
     const { data } = await validatePhoneChangeCaptcha(form.phone, captcha)
     return data ? Promise.resolve() : Promise.reject('验证码错误')
   }
   /**
    * 发送验证码 绑定邮箱
    */
-  function sendPhoneCaptcha() {
-    formRef.validateFields('phone').then(async () => {
-      sendPhoneChangeCaptcha(form.phone).then(() => {
-        createMessage.success('发送验证码成功')
-        state.captcha = true
-        const interval = window.setInterval(() => {
-          if (state.captchaTime-- <= 0) {
-            state.captchaTime = 120
-            state.captcha = false
-            window.clearInterval(interval)
-          }
-        }, 1000)
+  async function sendPhoneCaptcha() {
+    try {
+      await formRef.validateFields('phone').then(async () => {
+        sendPhoneChangeCaptcha(form.phone).then(() => {
+          createMessage.success('发送验证码成功')
+        })
       })
-    })
+    } catch (e) {
+      return false
+    }
+    return true
   }
   defineExpose({ init })
 </script>
diff --git a/src/views/account/security/PhoneEdit.vue b/src/views/account/security/PhoneEdit.vue
index 2be64980..3aa64d00 100644
--- a/src/views/account/security/PhoneEdit.vue
+++ b/src/views/account/security/PhoneEdit.vue
@@ -1,34 +1,30 @@
 <template>
-  <basic-modal v-bind="$attrs" :width="640" title="密码修改" :loading="confirmLoading" :visible="visible" @cancel="handleCancel">
+  <basic-modal v-bind="$attrs" :width="640" title="手机号修改" :loading="confirmLoading" :visible="visible" @cancel="handleCancel">
     <a-spin :spinning="confirmLoading">
       <a-steps class="steps" :current="currentTab">
         <a-step title="验证手机" />
         <a-step title="绑定新手机" />
       </a-steps>
-      <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-form
+        ref="formRef"
+        validateFirst
+        :model="form"
+        :rules="rules"
+        :validate-trigger="['blur', 'change']"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
         <a-form-item label="手机号" v-show="currentTab === 0">
           <span>{{ phone }}</span>
         </a-form-item>
-        <a-form-item label="验证码" name="oldCaptcha" v-show="currentTab === 0">
-          <a-input :maxLength="8" placeholder="验证码" v-model:value="form.oldCaptcha">
-            <template #addonAfter>
-              <a-button size="small" type="link" :disabled="state.oldCaptcha" href="javascript:" @click="sendOldPhoneCaptcha">
-                {{ (!state.oldCaptcha && '获取验证码') || '请等待 ' + (state.oldCaptchaTime + ' s') }}
-              </a-button>
-            </template>
-          </a-input>
+        <a-form-item validateFirst label="验证码" name="oldCaptcha" v-show="currentTab === 0">
+          <count-down-input v-model:value="form.oldCaptcha" :send-code-api="sendOldPhoneCaptcha" :count="120">获取验证码</count-down-input>
         </a-form-item>
-        <a-form-item label="手机号" name="phone" v-show="currentTab === 1">
+        <a-form-item validateFirst label="手机号" name="phone" v-show="currentTab === 1">
           <a-input v-model:value="form.phone" placeholder="手机号" />
         </a-form-item>
-        <a-form-item label="验证码" name="newCaptcha" v-show="currentTab === 1">
-          <a-input :maxLength="8" placeholder="验证码" v-model:value="form.newCaptcha">
-            <template #addonAfter>
-              <a-button size="small" type="link" :disabled="state.newCaptcha" href="javascript:" @click="sendNewPhoneCaptcha">
-                {{ (!state.newCaptcha && '获取验证码') || '请等待 ' + (state.newCaptchaTime + ' s') }}
-              </a-button>
-            </template>
-          </a-input>
+        <a-form-item validateFirst label="验证码" name="newCaptcha" v-show="currentTab === 1">
+          <count-down-input v-model:value="form.newCaptcha" :send-code-api="sendNewPhoneCaptcha" :count="120">获取验证码</count-down-input>
         </a-form-item>
       </a-form>
     </a-spin>
@@ -44,7 +40,7 @@
   import BasicModal from '/@/components/Modal/src/BasicModal.vue'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
   import { $ref } from 'vue/macros'
-  import { computed, nextTick, reactive } from 'vue'
+  import { computed, nextTick } from 'vue'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import {
     existsPhone,
@@ -56,6 +52,7 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { validateMobile } from '/@/utils/validate'
   import { updatePhone } from '/@/views/account/account.api'
+  import CountDownInput from '/@/components/CountDown/src/CountdownInput.vue'
 
   const props = defineProps({
     phone: String,
@@ -64,7 +61,7 @@
   const emits = defineEmits(['ok'])
   const { visible, confirmLoading, modalWidth, labelCol, wrapperCol, handleCancel } = useFormEdit()
   const { createMessage, createConfirm } = useMessage()
-  let currentTab = $ref(0)
+  let currentTab = $ref(1)
   let form = $ref({
     phone: '',
     oldCaptcha: '',
@@ -87,12 +84,6 @@
       ],
     } as Record<string, Rule[]>
   })
-  const state = reactive({
-    oldCaptcha: false,
-    newCaptcha: false,
-    oldCaptchaTime: 120,
-    newCaptchaTime: 120,
-  })
   const formRef = $ref<FormInstance>()
 
   function init() {
@@ -131,14 +122,9 @@
    */
   async function validateNewPhone() {
     const { phone } = form
-    if (currentTab !== 1) {
+    if (!(currentTab === 1 && phone)) {
       return Promise.resolve()
     }
-    const { msg, result } = validateMobile(phone)
-    // 手机号验证
-    if (!result) {
-      return Promise.reject(msg)
-    }
     const { data } = await existsPhone(phone)
     return data ? Promise.reject('手机号已被使用') : Promise.resolve()
   }
@@ -147,9 +133,6 @@
    */
   async function validateOldCaptcha() {
     const { oldCaptcha } = form
-    if (!oldCaptcha) {
-      return Promise.resolve()
-    }
     const { data } = await validateCurrentPhoneChangeCaptcha(oldCaptcha)
     return data ? Promise.resolve() : Promise.reject('验证码错误')
   }
@@ -158,45 +141,35 @@
    */
   async function validateNewCaptcha() {
     const { newCaptcha } = form
-    if (!(currentTab === 1 && newCaptcha)) {
-      return Promise.resolve()
-    }
     const { data } = await validatePhoneChangeCaptcha(form.phone, newCaptcha)
     return data ? Promise.resolve() : Promise.reject('验证码错误')
   }
   /**
    *  发送验证码 旧
    */
-  function sendOldPhoneCaptcha() {
-    sendCurrentPhoneChangeCaptcha().then(() => {
-      createMessage.success('发送验证码成功')
-      state.oldCaptcha = true
-      const interval = window.setInterval(() => {
-        if (state.oldCaptchaTime-- <= 0) {
-          state.oldCaptchaTime = 120
-          state.oldCaptcha = false
-          window.clearInterval(interval)
-        }
-      }, 1000)
-    })
+  async function sendOldPhoneCaptcha() {
+    try {
+      await sendCurrentPhoneChangeCaptcha().then(() => {
+        createMessage.success('发送验证码成功')
+      })
+    } catch (e) {
+      return false
+    }
+    return true
   }
   /**
    * 发送验证码 新手机
    */
-  function sendNewPhoneCaptcha() {
-    formRef.validateFields('phone').then(async () => {
-      sendPhoneChangeCaptcha(form.phone).then(() => {
+  async function sendNewPhoneCaptcha() {
+    try {
+      await formRef.validateFields('phone')
+      await sendPhoneChangeCaptcha(form.phone).then(() => {
         createMessage.success('发送验证码成功')
-        state.newCaptcha = true
-        const interval = window.setInterval(() => {
-          if (state.newCaptchaTime-- <= 0) {
-            state.newCaptchaTime = 120
-            state.newCaptcha = false
-            window.clearInterval(interval)
-          }
-        }, 1000)
       })
-    })
+    } catch (e) {
+      return false
+    }
+    return true
   }
   /**
    * 下一步
diff --git a/src/views/account/setting/data.ts b/src/views/account/setting/data.ts
index 420bee5f..c89ee819 100644
--- a/src/views/account/setting/data.ts
+++ b/src/views/account/setting/data.ts
@@ -30,38 +30,6 @@ export const settingList = [
     name: '账号绑定',
     component: AccountBind,
   },
-  {
-    key: '4',
-    name: '新消息通知',
-    component: MsgNotify,
-  },
-]
-
-export const accountBindList: ListItem[] = [
-  {
-    key: '1',
-    title: '绑定淘宝',
-    description: '当前未绑定淘宝账号',
-    extra: '绑定',
-    avatar: 'ri:taobao-fill',
-    color: '#ff4000',
-  },
-  {
-    key: '2',
-    title: '绑定支付宝',
-    description: '当前未绑定支付宝账号',
-    extra: '绑定',
-    avatar: 'fa-brands:alipay',
-    color: '#2eabff',
-  },
-  {
-    key: '3',
-    title: '绑定钉钉',
-    description: '当前未绑定钉钉账号',
-    extra: '绑定',
-    avatar: 'ri:dingding-fill',
-    color: '#2eabff',
-  },
 ]
 
 // 新消息通知 list
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
index cf3dd19d..e06bd90c 100644
--- a/src/views/login/Login.vue
+++ b/src/views/login/Login.vue
@@ -28,9 +28,13 @@
           >
             <!--       账号密码登录     -->
             <LoginForm />
+            <!--      找回密码      -->
             <ForgetPasswordForm />
+            <!--      注册      -->
             <RegisterForm />
+            <!--      手机登录      -->
             <MobileForm />
+            <!--      扫码登录      -->
             <QrCodeForm />
           </div>
         </div>
@@ -43,8 +47,8 @@
   import { AppLogo } from '/@/components/Application'
   import { AppDarkModeToggle } from '/@/components/Application'
   import LoginForm from './LoginForm.vue'
-  import ForgetPasswordForm from './ForgetPasswordForm.vue'
-  import RegisterForm from './RegisterForm.vue'
+  import ForgetPasswordForm from './user/ForgetPasswordForm.vue'
+  import RegisterForm from './user/RegisterForm.vue'
   import MobileForm from './MobileForm.vue'
   import QrCodeForm from './QrCodeForm.vue'
   import { useGlobSetting } from '/@/hooks/setting'
diff --git a/src/views/login/LoginForm.vue b/src/views/login/LoginForm.vue
index ed3a3a3a..a31e4beb 100644
--- a/src/views/login/LoginForm.vue
+++ b/src/views/login/LoginForm.vue
@@ -86,7 +86,7 @@
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { LoginParams } from '/@/api/sys/model/userModel'
 
-  const { notification, createErrorModal } = useMessage()
+  const { notification } = useMessage()
   const { prefixCls } = useDesign('login')
   // 用户信息存储
   const userStore = useUserStore()
@@ -157,8 +157,8 @@
    * 登录处理
    */
   async function handleLogin() {
-    const data = await formRef.validate()
     try {
+      await formRef.validate()
       loading = true
       const token = await userStore.login(form)
       if (token) {
diff --git a/src/views/login/LoginFormTitle.vue b/src/views/login/LoginFormTitle.vue
index bcdbac65..4c32d0a6 100644
--- a/src/views/login/LoginFormTitle.vue
+++ b/src/views/login/LoginFormTitle.vue
@@ -5,20 +5,17 @@
 </template>
 <script lang="ts" setup>
   import { computed, unref } from 'vue'
-  import { useI18n } from '/@/hooks/web/useI18n'
   import { LoginStateEnum, useLoginState } from './useLogin'
 
-  const { t } = useI18n()
-
   const { getLoginState } = useLoginState()
 
   const getFormTitle = computed(() => {
     const titleObj = {
-      [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
-      [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
-      [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
-      [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
-      [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
+      [LoginStateEnum.RESET_PASSWORD]: '重置密码',
+      [LoginStateEnum.LOGIN]: '登录',
+      [LoginStateEnum.REGISTER]: '注册',
+      [LoginStateEnum.MOBILE]: '手机登录',
+      [LoginStateEnum.QR_CODE]: '二维码登录',
     }
     return titleObj[unref(getLoginState)]
   })
diff --git a/src/views/login/RegisterForm.vue b/src/views/login/RegisterForm.vue
deleted file mode 100644
index 5de12c2c..00000000
--- a/src/views/login/RegisterForm.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <template v-if="getShow">
-    <LoginFormTitle class="enter-x" />
-    <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
-      <FormItem name="account" class="enter-x">
-        <Input class="fix-auto-fill" size="large" v-model:value="formData.account" :placeholder="t('sys.login.userName')" />
-      </FormItem>
-      <FormItem name="mobile" class="enter-x">
-        <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" class="fix-auto-fill" />
-      </FormItem>
-      <FormItem name="sms" class="enter-x">
-        <CountdownInput size="large" class="fix-auto-fill" v-model:value="formData.sms" :placeholder="t('sys.login.smsCode')" />
-      </FormItem>
-      <FormItem name="password" class="enter-x">
-        <StrengthMeter size="large" v-model:value="formData.password" :placeholder="t('sys.login.password')" />
-      </FormItem>
-      <FormItem name="confirmPassword" class="enter-x">
-        <InputPassword
-          size="large"
-          visibilityToggle
-          v-model:value="formData.confirmPassword"
-          :placeholder="t('sys.login.confirmPassword')"
-        />
-      </FormItem>
-
-      <FormItem class="enter-x" name="policy">
-        <!-- No logic, you need to deal with it yourself -->
-        <Checkbox v-model:checked="formData.policy" size="small">
-          {{ t('sys.login.policy') }}
-        </Checkbox>
-      </FormItem>
-
-      <Button type="primary" class="enter-x" size="large" block @click="handleRegister" :loading="loading">
-        {{ t('sys.login.registerButton') }}
-      </Button>
-      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
-        {{ t('sys.login.backSignIn') }}
-      </Button>
-    </Form>
-  </template>
-</template>
-<script lang="ts" setup>
-  import { reactive, ref, unref, computed } from 'vue'
-  import LoginFormTitle from './LoginFormTitle.vue'
-  import { Form, Input, Button, Checkbox } from 'ant-design-vue'
-  import { StrengthMeter } from '/@/components/StrengthMeter'
-  import { CountdownInput } from '/@/components/CountDown'
-  import { useI18n } from '/@/hooks/web/useI18n'
-  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin'
-
-  const FormItem = Form.Item
-  const InputPassword = Input.Password
-  const { t } = useI18n()
-  const { handleBackLogin, getLoginState } = useLoginState()
-
-  const formRef = ref()
-  const loading = ref(false)
-
-  const formData = reactive({
-    account: '',
-    password: '',
-    confirmPassword: '',
-    mobile: '',
-    sms: '',
-    policy: false,
-  })
-
-  const { getFormRules } = useFormRules(formData)
-  const { validForm } = useFormValid(formRef)
-
-  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
-
-  async function handleRegister() {
-    const data = await validForm()
-    if (!data) return
-    console.log(data)
-  }
-</script>
diff --git a/src/views/login/ForgetPasswordForm.vue b/src/views/login/user/ForgetPasswordForm.vue
similarity index 89%
rename from src/views/login/ForgetPasswordForm.vue
rename to src/views/login/user/ForgetPasswordForm.vue
index 9fce3eae..7bbdfaf9 100644
--- a/src/views/login/ForgetPasswordForm.vue
+++ b/src/views/login/user/ForgetPasswordForm.vue
@@ -1,7 +1,7 @@
 <template>
   <template v-if="getShow">
-    <LoginFormTitle class="enter-x" />
-    <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+    <login-form-title class="enter-x" />
+    <a-form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
       <FormItem name="account" class="enter-x">
         <Input size="large" v-model:value="formData.account" :placeholder="t('sys.login.userName')" />
       </FormItem>
@@ -21,16 +21,16 @@
           {{ t('sys.login.backSignIn') }}
         </Button>
       </FormItem>
-    </Form>
+    </a-form>
   </template>
 </template>
 <script lang="ts" setup>
   import { reactive, ref, computed, unref } from 'vue'
-  import LoginFormTitle from './LoginFormTitle.vue'
+  import LoginFormTitle from '../LoginFormTitle.vue'
   import { Form, Input, Button } from 'ant-design-vue'
   import { CountdownInput } from '/@/components/CountDown'
   import { useI18n } from '/@/hooks/web/useI18n'
-  import { useLoginState, useFormRules, LoginStateEnum } from './useLogin'
+  import { useLoginState, useFormRules, LoginStateEnum } from '../useLogin'
 
   const FormItem = Form.Item
   const { t } = useI18n()
diff --git a/src/views/login/user/RegisterForm.vue b/src/views/login/user/RegisterForm.vue
new file mode 100644
index 00000000..d55bb6e9
--- /dev/null
+++ b/src/views/login/user/RegisterForm.vue
@@ -0,0 +1,126 @@
+<template>
+  <template v-if="getShow">
+    <login-form-title class="enter-x" />
+    <a-spin :spinning="loading">
+      <a-form class="p-4 enter-x" :model="form" :validate-trigger="['blur', 'change']" :rules="rules" ref="formRef">
+        <a-form-item validate-first name="username" class="enter-x">
+          <a-input class="fix-auto-fill" size="large" v-model:value="form.username" placeholder="账号" />
+        </a-form-item>
+        <a-form-item validate-first name="password" class="enter-x">
+          <strength-meter size="large" v-model:value="form.password" placeholder="密码" />
+        </a-form-item>
+        <a-form-item validate-first name="confirmPassword" class="enter-x">
+          <a-input-password size="large" visibilityToggle v-model:value="form.confirmPassword" placeholder="确认密码" />
+        </a-form-item>
+        <a-row :span="12" class="enter-x">
+          <a-col :span="16">
+            <a-form-item name="captcha" class="enter-x">
+              <a-input size="large" placeholder="验证码" v-model:value="form.captcha" style="min-width: 100px" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8" style="text-align: right">
+            <a-form-item :style="{ 'text-align': 'right', 'margin-left': '20px' }" class="enter-x">
+              <img style="margin-top: 2px" :src="captchaData" @click="getCaptcha" alt="验证码" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+    <a-button type="primary" class="enter-x" size="large" block @click="handleSubmit" :loading="loading"> 注册 </a-button>
+    <a-button size="large" block class="mt-4 enter-x" @click="handleBackLogin"> 返回 </a-button>
+  </template>
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, unref, computed, onMounted } from 'vue'
+  import LoginFormTitle from '../LoginFormTitle.vue'
+  import { StrengthMeter } from '/@/components/StrengthMeter'
+  import { useLoginState, LoginStateEnum } from '../useLogin'
+  import { $ref } from 'vue/macros'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { imgCaptcha } from '/@/api/common/Captcha'
+  import { existsUsername } from '/@/api/sys/userAssist'
+  import { register } from '/@/api/sys/user'
+  import { useMessage } from '/@/hooks/web/useMessage'
+
+  const { handleBackLogin, getLoginState } = useLoginState()
+  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
+
+  const { createMessage } = useMessage()
+
+  const formRef = $ref<FormInstance>()
+  let loading = $ref(false)
+  let captchaData = $ref('')
+  let confirmDirty = $ref(false)
+  const form = reactive({
+    username: '',
+    password: '',
+    confirmPassword: '',
+    captchaKey: '',
+    captcha: '',
+  })
+
+  const rules = {
+    username: [{ required: true, message: '请输入登录账号!' }, { validator: checkUsername }],
+    password: [
+      { required: true, message: '请输入登录密码!' },
+      { validator: validateToNextPassword, trigger: 'change' },
+    ],
+    confirmPassword: [{ required: true, message: '请重新输入登录密码!' }, { validator: compareToFirstPassword }],
+    captcha: [{ required: true, message: '请输入验证码!' }],
+  } as Record<string, Rule[]>
+
+  onMounted(() => {
+    getCaptcha()
+  })
+
+  /**
+   * 获取验证码
+   */
+  function getCaptcha() {
+    imgCaptcha().then(({ data }) => {
+      captchaData = data.captchaData
+      form.captchaKey = data.captchaKey
+    })
+  }
+  /**
+   * 用户名检查
+   */
+  async function checkUsername() {
+    const { data } = await existsUsername(form.username)
+    return data ? Promise.reject('用户名已存在!') : Promise.resolve()
+  }
+  /**
+   * 密码检查
+   */
+  function validateToNextPassword() {
+    if (confirmDirty) {
+      formRef.validateFields(['confirmPassword'])
+    }
+    return Promise.resolve()
+  }
+  function compareToFirstPassword() {
+    if (form.confirmPassword !== form.password) {
+      confirmDirty = true
+      return Promise.reject('密码不一致')
+    } else {
+      return Promise.resolve()
+    }
+  }
+
+  /**
+   * 注册
+   */
+  async function handleSubmit() {
+    await formRef.validate()
+    loading = true
+    try {
+      await register(form).then(() => {
+        createMessage.success('注册成功')
+        handleBackLogin()
+      })
+      formRef.resetFields()
+    } finally {
+      loading = false
+    }
+  }
+</script>
diff --git a/src/views/modules/monitor/redis/RedisInfoMonitor.vue b/src/views/modules/monitor/redis/RedisInfoMonitor.vue
index a5a1260c..46a7d139 100644
--- a/src/views/modules/monitor/redis/RedisInfoMonitor.vue
+++ b/src/views/modules/monitor/redis/RedisInfoMonitor.vue
@@ -53,7 +53,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, Ref, onMounted } from 'vue'
+  import { ref, Ref, onMounted, onBeforeUnmount } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   import { getRedisInfo } from '/@/views/modules/monitor/redis/RedisInfoMonitor.api'
   import { $ref } from 'vue/macros'
@@ -128,6 +128,11 @@
     }, 1000 * 5)
   })
 
+  onBeforeUnmount(() => {
+    clearInterval(interval)
+    interval = null
+  })
+
   /**
    * 获取Redis服务信息
    */
diff --git a/src/views/modules/monitor/system/SystemInfoMonitor.vue b/src/views/modules/monitor/system/SystemInfoMonitor.vue
index 152d7ab3..a4e4f375 100644
--- a/src/views/modules/monitor/system/SystemInfoMonitor.vue
+++ b/src/views/modules/monitor/system/SystemInfoMonitor.vue
@@ -139,7 +139,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, onUnmounted } from 'vue'
+  import { onBeforeUnmount, onMounted, onUnmounted } from 'vue'
   import { getSystemInfo } from './SystemInfo.api'
   import { $ref } from 'vue/macros'
 
@@ -169,7 +169,7 @@
     })
   }
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     clearInterval(interval)
     interval = null
   })