From bf589dce92f79a4cb993a069383884f79cb36278 Mon Sep 17 00:00:00 2001
From: Zyronon <zyronon@163.com>
Date: Tue, 11 Nov 2025 11:47:59 +0000
Subject: [PATCH] save

---
 src/apis/auth.ts                      |  23 +-
 src/assets/css/style.scss             |   7 +-
 src/components/BaseButton.vue         |   1 +
 src/components/base/BaseInput.vue     | 133 ++--
 src/components/base/form/Form.vue     |  24 +-
 src/components/base/form/FormItem.vue |  81 ++-
 src/components/base/form/types.ts     |  65 ++
 src/config/auth.ts                    |   4 +-
 src/pages/layout.vue                  |   8 +-
 src/pages/user/Notice.vue             |  15 +
 src/pages/user/login.vue              | 864 +++++++++++---------------
 src/router.ts                         |   4 +-
 src/stores/auth.ts                    |   1 +
 src/utils/validation.ts               | 164 +----
 14 files changed, 662 insertions(+), 732 deletions(-)
 create mode 100644 src/components/base/form/types.ts
 create mode 100644 src/pages/user/Notice.vue

diff --git a/src/apis/auth.ts b/src/apis/auth.ts
index f557cd50..4a4891e3 100644
--- a/src/apis/auth.ts
+++ b/src/apis/auth.ts
@@ -62,7 +62,23 @@ export interface WechatLoginParams {
 
 // API 函数定义
 export function login(params: LoginParams) {
-  return http<LoginResponse>('auth/login', params, null, 'post')
+  // 暂时直接返回成功响应，等待后端接入
+  return Promise.resolve({
+    success: true,
+    code: 200,
+    msg: '登录成功',
+    data: {
+      token: 'mock_token_' + Date.now(),
+      user: {
+        id: '1',
+        email: params.email,
+        phone: params.phone,
+        nickname: '测试用户',
+        avatar: ''
+      }
+    }
+  })
+  // return http<LoginResponse>('auth/login', params, null, 'post')
 }
 
 export function register(params: RegisterParams) {
@@ -70,6 +86,11 @@ export function register(params: RegisterParams) {
 }
 
 export function sendCode(params: SendCodeParams) {
+  return Promise.resolve({
+    success: true,
+    code: 200,
+    msg: '登录成功',
+  })
   return http<boolean>('auth/sendCode', params, null, 'post')
 }
 
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 6f357ea5..1659ba57 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -72,7 +72,7 @@
   --color-progress-bar: #d1d5df !important;
 
   --color-label-bg: whitesmoke;
-  --color-link: rgb(64, 158, 255)
+  --color-link: #2563EB;
 }
 
 .footer {
@@ -219,6 +219,11 @@ a {
   text-decoration: none;
 }
 
+.link{
+  color: var(--color-link);
+  @apply hover:opacity-80;
+}
+
 .cp{
   @apply cursor-pointer;
 }
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 2f92769a..9918a4f3 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -86,6 +86,7 @@ defineEmits(['click'])
     padding: 0 1.3rem;
     height: 2.4rem;
     font-size: 0.9rem;
+    border-radius: .5rem;
   }
 
   & > span {
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 4a0533c7..eb03222e 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch } from 'vue';
+import {defineComponent, ref, useAttrs, watch, computed} from 'vue';
 import Close from "@/components/icon/Close.vue";
-import { useDisableEventListener } from "@/hooks/event.ts";
+import {useDisableEventListener} from "@/hooks/event.ts";
+
+defineOptions({
+  name: "BaseInput",
+})
 
 const props = defineProps({
   modelValue: [String, Number],
   placeholder: String,
   disabled: Boolean,
   autofocus: Boolean,
+  error: Boolean,
   type: {
     type: String,
     default: 'text',
@@ -32,34 +37,31 @@ const emit = defineEmits(['update:modelValue', 'input', 'change', 'focus', 'blur
 const attrs = useAttrs();
 
 const inputValue = ref(props.modelValue);
-const errorMsg = ref('');
 let focus = $ref(false)
 let inputEl = $ref<HTMLDivElement>()
+const passwordVisible = ref(false)
+
+const inputType = computed(() => {
+  if (props.type === 'password') {
+    return passwordVisible.value ? 'text' : 'password'
+  }
+  return props.type
+})
+
+const togglePasswordVisibility = () => {
+  passwordVisible.value = !passwordVisible.value
+}
 
 watch(() => props.modelValue, (val) => {
   inputValue.value = val;
-  validate(val);
 });
 
-const validate = (val: string | number | null | undefined) => {
-  let err = '';
-  const strVal = val == null ? '' : String(val);
-  if (props.required && !strVal.trim()) {
-    err = '不能为空';
-  } else if (props.maxLength && strVal.length > props.maxLength) {
-    err = `长度不能超过 ${props.maxLength} 个字符`;
-  }
-  errorMsg.value = err;
-  emit('validation', err === '', err);
-  return err === '';
-};
-
 const onInput = (e: Event) => {
   const target = e.target as HTMLInputElement;
   inputValue.value = target.value;
-  validate(target.value);
   emit('update:modelValue', target.value);
   emit('input', e);
+  emit('change', e);
 };
 
 const onChange = (e: Event) => {
@@ -73,14 +75,11 @@ const onFocus = (e: FocusEvent) => {
 
 const onBlur = (e: FocusEvent) => {
   focus = false
-  validate(inputValue.value);
   emit('blur', e);
 };
 
 const clearInput = () => {
-
   inputValue.value = '';
-  validate('');
   emit('update:modelValue', '');
 };
 
@@ -99,50 +98,63 @@ const vFocus = {
 </script>
 
 <template>
-  <div class="base-input2"
+  <div class="base-input"
        ref="inputEl"
-       :class="{ 'is-disabled': disabled, 'has-error': errorMsg,focus, [`base-input2--${size}`]: true }">
+       :class="{ 'is-disabled': disabled, 'error': props.error, focus, [`base-input--${size}`]: true }">
     <slot name="subfix"></slot>
     <input
-        v-bind="attrs"
-        :type="type"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :value="inputValue"
-        @input="onInput"
-        @change="onChange"
-        @focus="onFocus"
-        @blur="onBlur"
-        class="inner"
-        v-focus="autofocus"
-        :maxlength="maxLength"
+      v-bind="attrs"
+      :type="inputType"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :value="inputValue"
+      @input="onInput"
+      @change="onChange"
+      @focus="onFocus"
+      @blur="onBlur"
+      class="inner"
+      v-focus="autofocus"
+      :maxlength="maxLength"
     />
     <slot name="prefix"></slot>
     <Close
-        v-if="clearable && inputValue && !disabled"
-        @click="clearInput"/>
-    <div v-if="errorMsg" class="base-input2__error">{{ errorMsg }}</div>
+      v-if="clearable && inputValue && !disabled"
+      @click="clearInput"/>
+    <!-- Password visibility toggle -->
+    <div
+      v-if="type === 'password' && !disabled"
+      class="password-toggle"
+      @click="togglePasswordVisibility"
+      :title="passwordVisible ? '隐藏密码' : '显示密码'">
+      <IconFluentEye16Regular v-if="!passwordVisible"/>
+      <IconFluentEyeOff16Regular v-else/>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.base-input2 {
+.base-input {
   position: relative;
   display: inline-flex;
   box-sizing: border-box;
   width: 100%;
   border: 1px solid var(--color-input-border);
-  border-radius: 4px;
+  border-radius: 6px;
   overflow: hidden;
   padding: .2rem .3rem;
   transition: all .3s;
   align-items: center;
   background: var(--color-input-bg);
 
+  ::placeholder {
+    font-size: 0.9rem;
+    color: darkgray;
+  }
+
   // normal size (default)
   &--normal {
     padding: .2rem .3rem;
-    
+
     .inner {
       height: 1.5rem;
       font-size: 1rem;
@@ -151,8 +163,9 @@ const vFocus = {
 
   // large size
   &--large {
-    padding: .6rem .8rem;
-    
+    padding: .4rem .6rem;
+    border-radius: .5rem;
+
     .inner {
       height: 2rem;
       font-size: 1.125rem;
@@ -163,16 +176,9 @@ const vFocus = {
     opacity: 0.6;
   }
 
-  &.has-error {
-    .base-input2__inner {
-      border-color: #f56c6c;
-    }
-
-    .base-input2__error {
-      color: #f56c6c;
-      font-size: 0.85rem;
-      margin-top: 0.25rem;
-    }
+  &.error {
+    border-color: #f56c6c;
+    background: rgba(245, 108, 108, 0.07);
   }
 
   &.focus {
@@ -184,10 +190,6 @@ const vFocus = {
     cursor: not-allowed;
   }
 
-  &__error {
-    padding-left: 0.5rem;
-  }
-
   .inner {
     flex: 1;
     font-size: 1rem;
@@ -200,5 +202,22 @@ const vFocus = {
     background: transparent;
     width: 100%;
   }
+
+  .password-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-left: 4px;
+    cursor: pointer;
+    color: var(--color-input-color);
+    opacity: 0.6;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
 }
 </style>
diff --git a/src/components/base/form/Form.vue b/src/components/base/form/Form.vue
index 94095f90..7f6ac7ea 100644
--- a/src/components/base/form/Form.vue
+++ b/src/components/base/form/Form.vue
@@ -5,7 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import {ref, provide, watch, toRef} from 'vue'
+import {provide, ref, toRef} from 'vue'
+import type {FormField, FormModel, FormRules} from './types'
 
 interface Field {
   prop: string
@@ -14,8 +15,8 @@ interface Field {
 }
 
 const props = defineProps({
-  model: Object,
-  rules: Object // { word: [{required:true,...}, ...], name: [...] }
+  model: Object as () => FormModel,
+  rules: Object as () => FormRules
 })
 
 const fields = ref<Field[]>([])
@@ -25,7 +26,7 @@ const registerField = (field: Field) => {
 }
 
 // 校验整个表单
-const validate = (cb): boolean => {
+function validate(cb) {
   let valid = true
   fields.value.forEach(f => {
     const fieldRules = props.rules?.[f.prop] || []
@@ -35,10 +36,23 @@ const validate = (cb): boolean => {
   cb(valid)
 }
 
+// 校验指定字段
+function validateField(fieldName: string, cb?: (valid: boolean) => void): boolean {
+  const field = fields.value.find(f => f.prop === fieldName)
+  if (field) {
+    const fieldRules = props.rules?.[fieldName] || []
+    const valid = field.validate(fieldRules)
+    if (cb) cb(valid)
+    return valid
+  }
+  if (cb) cb(true)
+  return true
+}
+
 provide('registerField', registerField)
 provide('formModel', toRef(props, 'model'))
 provide('formValidate', validate)
 provide('formRules', props.rules)
 
-defineExpose({validate})
+defineExpose({validate, validateField})
 </script>
diff --git a/src/components/base/form/FormItem.vue b/src/components/base/form/FormItem.vue
index 0247c43f..8f6ba091 100644
--- a/src/components/base/form/FormItem.vue
+++ b/src/components/base/form/FormItem.vue
@@ -11,7 +11,7 @@ let error = $ref('')
 
 // 拿到 form 的 model 和注册函数
 const formModel = inject<ref>('formModel')
-const registerField = inject('registerField')
+const registerField = inject<Function>('registerField')
 const formRules = inject('formRules', {})
 
 const myRules = $computed(() => {
@@ -31,43 +31,94 @@ const validate = (rules) => {
       error = rule.message
       return false
     }
+    if (rule.min && val && val.toString().length < rule.min) {
+      error = rule.message
+      return false
+    }
+    if (rule.max && val && val.toString().length > rule.max) {
+      error = rule.message
+      return false
+    }
+    if (rule.validator) {
+      try {
+        rule.validator(rule, val)
+        return true
+      } catch (e) {
+        error = e.message
+        return false
+      }
+    }
   }
   return true
 }
 
 // 自动触发 blur 校验
-const handleBlur = () => {
+function handleBlur() {
   const blurRules = myRules.filter((r) => r.trigger === 'blur')
   if (blurRules.length) validate(blurRules)
 }
 
+function handChange() {
+  error = ''
+}
+
 // 注册到 Form
 onMounted(() => {
   registerField && registerField({prop: props.prop, modelValue: value, validate})
 })
+
 let slot = useSlots()
 
+
+function patchVNode(vnode, patchFn) {
+  if (!vnode) return vnode
+
+  // 如果当前节点就是我们要找的 BaseInput
+  if (vnode.type && vnode.type.name) {
+    return patchFn(vnode)
+  }
+
+  // 如果有子节点，则递归修改
+  if (Array.isArray(vnode.children)) {
+    vnode.children = vnode.children.map(child => patchVNode(child, patchFn))
+  }
+
+  return vnode
+}
+
+
 defineRender(() => {
-  let DefaultNode = slot.default()[0]
-  return <div class="form-item mb-6 flex gap-space">
+  let DefaultNode: any = slot.default()[0]
+
+  // 对 DefaultNode 深度查找 BaseInput 并加上 onBlur / error
+  DefaultNode = patchVNode(DefaultNode, vnode => {
+    return {
+      ...vnode,
+      props: {
+        ...vnode.props,
+        error: !!error,
+        onBlur: handleBlur,
+        onChange: handChange
+      },
+    }
+  })
+
+  return <div class="form-item   flex gap-space">
     {props.label &&
-        <label class="w-20 flex items-start mt-1 justify-end">
-          {myRules.length ? <span class="form-error">*</span> : null} {props.label}
-        </label>}
+      <label class="w-20 flex items-start mt-1 justify-end">
+        {myRules.length ? <span class="form-error">*</span> : null} {props.label}
+      </label>}
     <div class="flex-1 relative">
-      <DefaultNode onBlur={handleBlur}/>
-      <div class="form-error absolute top-[100%] anim" style={{opacity: error ? 1 : 0}}>{error}</div>
+      <DefaultNode/>
+      <div class="form-error my-0.5 anim" style={{opacity: error ? 1 : 0}}>{error} &nbsp;</div>
     </div>
   </div>
 })
 </script>
 
 <style scoped lang="scss">
-.form-item {
-
-  .form-error {
-    color: #f56c6c;
-    font-size: 0.8rem;
-  }
+.form-error {
+  color: #f56c6c;
+  font-size: 0.8rem;
 }
 </style>
diff --git a/src/components/base/form/types.ts b/src/components/base/form/types.ts
new file mode 100644
index 00000000..f3834630
--- /dev/null
+++ b/src/components/base/form/types.ts
@@ -0,0 +1,65 @@
+// Form 组件的 TypeScript 类型定义
+
+// 表单字段接口
+export interface FormField {
+  prop: string
+  modelValue: any
+  validate: (rules: FormRule[]) => boolean
+}
+
+// 表单规则接口
+export interface FormRule {
+  required?: boolean
+  message?: string
+  pattern?: RegExp
+  validator?: (rule: FormRule, value: any, callback: (error?: Error) => void) => void
+  min?: number
+  max?: number
+  len?: number
+  type?: string
+}
+
+// 表单规则对象类型
+export type FormRules = Record<string, FormRule[]>
+
+// 表单模型对象类型
+export type FormModel = Record<string, any>
+
+// Form 组件的 Props 接口
+export interface FormProps {
+  model?: FormModel
+  rules?: FormRules
+}
+
+// Form 组件的实例接口
+export interface FormInstance {
+  /**
+   * 校验整个表单
+   * @param callback 校验完成后的回调函数，接收校验结果
+   */
+  validate: (callback: (valid: boolean) => void) => void
+  
+  /**
+   * 校验指定字段
+   * @param fieldName 要校验的字段名称
+   * @param callback 可选的回调函数，接收校验结果
+   * @returns 校验是否通过
+   */
+  validateField: (fieldName: string, callback?: (valid: boolean) => void) => boolean
+}
+
+// 注入的上下文类型
+export interface FormContext {
+  registerField: (field: FormField) => void
+  formModel: FormModel
+  formValidate: (callback: (valid: boolean) => void) => void
+  formRules: FormRules
+}
+
+// 验证状态枚举
+export enum ValidateStatus {
+  Success = 'success',
+  Error = 'error',
+  Validating = 'validating',
+  Pending = 'pending'
+}
\ No newline at end of file
diff --git a/src/config/auth.ts b/src/config/auth.ts
index 69b957c2..4590b319 100644
--- a/src/config/auth.ts
+++ b/src/config/auth.ts
@@ -30,7 +30,7 @@ export const PHONE_CONFIG = {
   sendInterval: 60,
 
   // 手机号正则表达式（中国大陆）
-  phoneRegex: /^1[3-9]\d{9}$/
+  phoneRegex: /^1[2-9]\d{9}$/
 }
 
 // 邮箱配置
@@ -45,7 +45,7 @@ export const EMAIL_CONFIG = {
 // 密码配置
 export const PASSWORD_CONFIG = {
   // 密码最小长度
-  minLength: 6,
+  minLength: 9,
 
   // 密码最大长度
   maxLength: 20
diff --git a/src/pages/layout.vue b/src/pages/layout.vue
index 52bcf7cc..ba5cdf60 100644
--- a/src/pages/layout.vue
+++ b/src/pages/layout.vue
@@ -44,10 +44,10 @@ function goHome() {
           <span v-if="settingStore.sideExpand">设置</span>
           <div class="red-point" :class="!settingStore.sideExpand && 'top-1 right-0'" v-if="runtimeStore.isNew"></div>
         </div>
-        <!--        <div class="row" @click="router.push('/user')">-->
-        <!--          <IconFluentPerson20Regular/>-->
-        <!--          <span v-if="settingStore.sideExpand">用户</span>-->
-        <!--        </div>-->
+        <div class="row" @click="router.push('/user')">
+          <IconFluentPerson20Regular/>
+          <span v-if="settingStore.sideExpand">用户</span>
+        </div>
       </div>
       <div class="bottom flex justify-evenly ">
         <BaseIcon
diff --git a/src/pages/user/Notice.vue b/src/pages/user/Notice.vue
new file mode 100644
index 00000000..9c602505
--- /dev/null
+++ b/src/pages/user/Notice.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="h-12 text-xs text-gray-400">
+    <span>
+      继续操作即表示你阅读并同意我们的
+    <router-link to="/user-agreement" className="link">用户协议</router-link>
+    与
+    <router-link to="/privacy-policy" className="link">隐私政策</router-link>
+    </span>
+    <slot/>
+  </div>
+</template>
diff --git a/src/pages/user/login.vue b/src/pages/user/login.vue
index 8c03e966..c7ba312b 100644
--- a/src/pages/user/login.vue
+++ b/src/pages/user/login.vue
@@ -1,14 +1,18 @@
-<script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+<script setup lang="tsx">
+import {onBeforeUnmount, onMounted} from 'vue'
+import {useRoute} from 'vue-router'
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import { APP_NAME } from "@/config/env.ts";
-import { useAuthStore } from "@/stores/auth.ts";
-import { sendCode, register as registerApi, resetPassword, uploadImportData } from "@/apis";
-import { validateLoginForm, validateRegisterForm, validateResetPasswordForm } from "@/utils/validation.ts";
+import {APP_NAME} from "@/config/env.ts";
+import {useAuthStore} from "@/stores/auth.ts";
+import {sendCode} from "@/apis";
+import {validateEmail, validatePhone} from "@/utils/validation.ts";
 import Toast from "@/components/base/toast/Toast.ts";
-import { getWechatAuthUrl, PHONE_CONFIG } from "@/config/auth.ts";
+import FormItem from "@/components/base/form/FormItem.vue";
+import Form from "@/components/base/form/Form.vue";
+import Notice from "@/pages/user/Notice.vue";
+import {FormInstance} from "@/components/base/form/types.ts";
+import {PASSWORD_CONFIG, PHONE_CONFIG} from "@/config/auth.ts";
 
 // 状态管理
 const authStore = useAuthStore()
@@ -21,30 +25,63 @@ let isLoading = $ref(false)
 let isSendingCode = $ref(false)
 let codeCountdown = $ref(0)
 let showWechatQR = $ref(true)
-let wechatQRUrl = $ref('')
-let qrExpired = $ref(false)
-let qrScanned = $ref(true) // 二维码是否已扫描
+let wechatQRUrl = $ref('https://open.weixin.qq.com/connect/qrcode/041GmMJM2wfM0w3D')
+// 微信二维码状态：idle-正常/等待扫码，scanned-已扫码待确认，expired-已过期，cancelled-已取消
+let qrStatus = $ref<'idle' | 'scanned' | 'expired' | 'cancelled'>('idle')
 let qrExpireTimer: ReturnType<typeof setTimeout> | null = null
 let qrCheckInterval: ReturnType<typeof setInterval> | null = null
 const QR_EXPIRE_TIME = 5 * 60 * 1000 // 5分钟过期
 
-// 密码显示/隐藏状态
-let showLoginPassword = $ref(false)
-let showRegisterPassword = $ref(false)
-let showRegisterConfirmPassword = $ref(false)
-let showForgotPassword = $ref(false)
-let showForgotConfirmPassword = $ref(false)
+const codeRules = [
+  {required: true, message: '请输入验证码', trigger: 'blur'},
+  {min: PHONE_CONFIG.codeLength, message: `请输入 ${PHONE_CONFIG.codeLength} 位验证码`, trigger: 'blur'},
+]
+const accountRules = [
+  {required: true, message: '请输入手机号/邮箱地址', trigger: 'blur'},
+  {
+    validator: (rule: any, value: any) => {
+      if (!validatePhone(value) && !validateEmail(value)) {
+        throw new Error('请输入有效的手机号或邮箱地址')
+      }
+    }, trigger: 'blur'
+  },
+]
+const phoneRules = [
+  {required: true, message: '请输入手机号', trigger: 'blur'},
+  {
+    validator: (rule: any, value: any) => {
+      if (!validatePhone(value)) {
+        throw new Error('请输入有效的手机号')
+      }
+    }, trigger: 'blur'
+  },
+]
+const passwordRules = [
+  {required: true, message: '请输入密码', trigger: 'blur'},
+  {
+    min: PASSWORD_CONFIG.minLength,
+    max: PASSWORD_CONFIG.maxLength,
+    message: `密码长度为 ${PASSWORD_CONFIG.minLength}-${PASSWORD_CONFIG.maxLength} 位`,
+    trigger: 'blur'
+  },
+]
 
-// 表单数据
-const loginForm = $ref({
-  account: '', // 支持邮箱或手机号
-  password: ''
-})
 
-const phoneLoginForm = $ref({
-  phone: '',
-  code: ''
-})
+let phoneLoginForm = $ref({phone: '', code: ''})
+let phoneLoginFormRef = $ref<FormInstance>()
+let phoneLoginFormRules = {
+  phone: phoneRules,
+  code: codeRules
+}
+
+
+let loginForm2 = $ref({account: '', password: ''})
+let loginForm2Ref = $ref<FormInstance>()
+let loginForm2Rules = {
+  account: accountRules,
+  password: passwordRules,
+}
+
 
 const registerForm = $ref({
   phone: '',
@@ -52,133 +89,116 @@ const registerForm = $ref({
   confirmPassword: '',
   code: ''
 })
+let registerFormRef = $ref<FormInstance>()
+// 注册表单规则和引用
+let registerFormRules = {
+  phone: phoneRules,
+  code: codeRules,
+  password: passwordRules,
+  confirmPassword: [
+    {required: true, message: '请再次输入密码', trigger: 'blur'},
+    {
+      validator: (rule: any, value: any) => {
+        if (value !== registerForm.password) {
+          throw new Error('两次密码输入不一致')
+        }
+      }, trigger: 'blur'
+    },
+  ],
+}
+
 
 const forgotForm = $ref({
-  phone: '',
+  account: '',
   code: '',
   newPassword: '',
   confirmPassword: ''
 })
+let forgotFormRef = $ref<FormInstance>()
+// 忘记密码表单规则和引用
+let forgotFormRules = {
+  account: accountRules,
+  code: codeRules,
+  newPassword: passwordRules,
+  confirmPassword: [
+    {required: true, message: '请再次输入新密码', trigger: 'blur'},
+    {
+      validator: (rule: any, value: any) => {
+        if (value !== forgotForm.newPassword) {
+          throw new Error('两次密码输入不一致')
+        }
+      }, trigger: 'blur'
+    },
+  ],
+}
 
-// 错误信息
-const loginErrors = ref<Record<string, string>>({})
-const registerErrors = ref<Record<string, string>>({})
-const forgotErrors = ref<Record<string, string>>({})
+// 表单数据
+const loginForm = $ref({
+  account: '', // 支持邮箱或手机号
+  password: ''
+})
+
+const currentFormRef = $computed<FormInstance>(() => {
+  if (currentMode === 'login') {
+    if (loginType == 'code') return phoneLoginFormRef
+    else return loginForm2Ref
+  } else if (currentMode === 'register') return registerFormRef
+  else return forgotFormRef
+})
 
 // 发送验证码
-async function sendVerificationCode(phone: string, type: 'login' | 'register' | 'reset_password') {
-  if (!phone) {
-    Toast.error('请输入手机号')
-    return
-  }
-
-  if (!PHONE_CONFIG.phoneRegex.test(phone)) {
-    Toast.error('请输入有效的手机号')
-    return
-  }
-
-  try {
-    isSendingCode = true
-    const response = await sendCode({phone, type})
-
-    if (response.success) {
-      Toast.success('验证码已发送')
-      codeCountdown = PHONE_CONFIG.sendInterval
-      const timer = setInterval(() => {
-        codeCountdown--
-        if (codeCountdown <= 0) {
-          clearInterval(timer)
-        }
-      }, 1000)
-    } else {
-      Toast.error(response.msg || '发送失败')
+async function sendVerificationCode(phone: string, type: 'login' | 'register' | 'reset_password', fileName: string) {
+  let res = currentFormRef.validateField(fileName)
+  if (res) {
+    try {
+      isSendingCode = true
+      const response = await sendCode({phone, type})
+      if (response.success) {
+        Toast.success('验证码已发送')
+        codeCountdown = PHONE_CONFIG.sendInterval
+        const timer = setInterval(() => {
+          codeCountdown--
+          if (codeCountdown <= 0) {
+            clearInterval(timer)
+          }
+        }, 1000)
+      } else {
+        Toast.error(response.msg || '发送失败')
+      }
+    } catch (error) {
+      console.error('Send code error:', error)
+      Toast.error('发送验证码失败')
+    } finally {
+      isSendingCode = false
     }
-  } catch (error) {
-    console.error('Send code error:', error)
-    Toast.error('发送验证码失败')
-  } finally {
-    isSendingCode = false
   }
 }
 
-// 账号密码登录
+// 统一登录处理
 async function handleLogin() {
-  // 判断是邮箱还是手机号
-  const isEmail = loginForm.account.includes('@')
-  const validation = validateLoginForm({
-    email: isEmail ? loginForm.account : undefined,
-    phone: !isEmail ? loginForm.account : undefined,
-    password: loginForm.password,
-    code: undefined,
-    type: 'email'
+  await currentFormRef.validate(async (valid) => {
+    if (!valid) return;
+    //手机号登录
+    if (loginType === 'code') {
+      await authStore.login({
+        phone: phoneLoginForm.phone,
+        code: phoneLoginForm.code,
+        type: 'phone'
+      })
+    } else {
+      await authStore.login({
+        account: loginForm.account,
+        password: loginForm.password,
+        type: 'account'
+      })
+    }
   })
-
-  if (!validation.isValid) {
-    Object.assign(loginErrors, validation.errors)
-    return
-  }
-
-  isLoading = true
-  try {
-    await authStore.login({
-      email: isEmail ? loginForm.account : undefined,
-      phone: !isEmail ? loginForm.account : undefined,
-      password: loginForm.password,
-      type: 'email'
-    })
-  } finally {
-    isLoading = false
-  }
-}
-
-// 手机号验证码登录
-async function handlePhoneCodeLogin() {
-  const validation = validateLoginForm({
-    phone: phoneLoginForm.phone,
-    code: phoneLoginForm.code,
-    password: undefined,
-    type: 'phone'
-  })
-
-  if (!validation.isValid) {
-    Object.assign(loginErrors, validation.errors)
-    return
-  }
-
-  isLoading = true
-  try {
-    await authStore.login({
-      phone: phoneLoginForm.phone,
-      code: phoneLoginForm.code,
-      type: 'phone'
-    })
-  } finally {
-    isLoading = false
-  }
 }
 
 // 注册
 async function handleRegister() {
-  if (registerForm.password !== registerForm.confirmPassword) {
-    Toast.error('两次密码输入不一致')
-    return
-  }
-
-  const validation = validateRegisterForm({
-    phone: registerForm.phone,
-    password: registerForm.password,
-    code: registerForm.code,
-    nickname: undefined,
-    email: undefined
-  })
-
-  if (!validation.isValid) {
-    Object.assign(registerErrors, validation.errors)
-    return
-  }
-
-  isLoading = true
-  try {
+  await registerFormRef.validate(async (valid) => {
+    if (!valid) return
     await authStore.register({
       phone: registerForm.phone,
       password: registerForm.password,
@@ -186,48 +206,26 @@ async function handleRegister() {
       nickname: undefined,
       email: undefined
     })
-  } finally {
-    isLoading = false
-  }
+  })
 }
 
 // 忘记密码
 async function handleForgotPassword() {
-  if (forgotForm.newPassword !== forgotForm.confirmPassword) {
-    Toast.error('两次密码输入不一致')
-    return
-  }
-
-  const validation = validateResetPasswordForm({
-    phone: forgotForm.phone,
-    email: undefined,
-    code: forgotForm.code,
-    newPassword: forgotForm.newPassword
-  })
-
-  if (!validation.isValid) {
-    Object.assign(forgotErrors, validation.errors)
-    return
-  }
-
-  isLoading = true
-  try {
+  await forgotFormRef.validate(async (valid) => {
+    if (!valid) return
     const response = await authStore.resetPassword({
       phone: forgotForm.phone,
       email: undefined,
       code: forgotForm.code,
       newPassword: forgotForm.newPassword
     })
-
     if (response.success) {
       Toast.success('密码重置成功，请重新登录')
       switchMode('login')
     } else {
       Toast.error(response.msg || '重置失败')
     }
-  } finally {
-    isLoading = false
-  }
+  })
 }
 
 // 清除二维码相关定时器
@@ -245,8 +243,7 @@ function clearQRTimers() {
 // 刷新二维码
 async function refreshQRCode() {
   clearQRTimers()
-  qrExpired = false
-  qrScanned = false
+  qrStatus = 'idle'
   await handleWechatLogin()
 }
 
@@ -254,8 +251,7 @@ async function refreshQRCode() {
 async function handleWechatLogin() {
   try {
     showWechatQR = true
-    qrExpired = false
-    qrScanned = false
+    qrStatus = 'idle'
 
     // 这里应该调用后端获取二维码
     // const response = await getWechatQR()
@@ -268,21 +264,18 @@ async function handleWechatLogin() {
     qrCheckInterval = setInterval(async () => {
       // 这里应该轮询后端检查扫码状态
       // const result = await checkWechatLoginStatus()
-      // if (result.scanned) {
-      //   qrScanned = true // 设置扫描成功状态
-      // }
+      // if (result.scanned) qrStatus = 'scanned'
       // if (result.success) {
       //   clearQRTimers()
       //   showWechatQR = false
-      //   qrScanned = false
+      //   qrStatus = 'idle'
       //   // 登录成功处理
       // }
     }, 2000)
 
     // 设置二维码过期
     qrExpireTimer = setTimeout(() => {
-      qrExpired = true
-      qrScanned = false
+      qrStatus = 'expired'
       clearInterval(qrCheckInterval!)
       qrCheckInterval = null
       Toast.info('二维码已过期，请点击刷新')
@@ -297,45 +290,19 @@ async function handleWechatLogin() {
 // 切换模式
 function switchMode(mode: 'login' | 'register' | 'forgot') {
   currentMode = mode
-  clearErrors()
   // 切换到注册或忘记密码模式时，隐藏微信扫码
   if (mode === 'register' || mode === 'forgot') {
     if (showWechatQR) {
       clearQRTimers()
       showWechatQR = false
-      qrExpired = false
+      qrStatus = 'idle'
     }
   }
 }
 
-// 清除错误
-function clearErrors() {
-  loginErrors.value = {}
-  registerErrors.value = {}
-  forgotErrors.value = {}
-}
-
-async function handleAudioChange(e) {
-  let uploadFile = e.target?.files?.[0]
-  if (!uploadFile) return
-  let data = new FormData();
-  data.append("file", uploadFile);
-  let res = await uploadImportData(data, e => {
-    console.log('e', e)
-  })
-  console.log('res', res)
-  console.log(uploadFile)
-  e.target.value = ''
-}
-
-async function s() {
-  const taskId = await fetch('/startImport').then(r => r.json()).then(d => d.taskId);
-
-  const timer = setInterval(async () => {
-    const res = await fetch(`/getProgress/${taskId}`).then(r => r.json());
-    console.log(`当前进度: ${res.progress}%`);
-    if (res.progress >= 100) clearInterval(timer);
-  }, 1000);
+// 用户主动取消登录（示例：可在需要的地方调用）
+function cancelWechatLogin() {
+  qrStatus = 'cancelled'
 }
 
 // 初始化页面
@@ -356,386 +323,311 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="center min-h-screen">
-    <div class="rounded-2xl p-6 bg-white shadow-lg">
+    <div class="rounded-2xl p-2 bg-white shadow-lg">
       <!-- 登录区域容器 - 弹框形式 -->
-      <div class="flex gap-8">
+      <div class="flex gap-2">
         <!-- 左侧登录区域 -->
-        <div class="flex-1 w-80">
-          <h1 class="mb-6 text-center text-2xl font-semibold">{{ APP_NAME }}</h1>
-
+        <div class="flex-1 w-80 p-6">
           <!-- 登录选项 -->
           <div v-if="currentMode === 'login'">
+            <div class="mb-6 text-center text-2xl font-bold">{{ APP_NAME }}</div>
+
             <!-- Tab切换 -->
-            <div class="flex mb-6 border-b border-gray-200">
+            <div class="center gap-8 mb-6">
               <div
-                  class="flex-1 py-3 text-center cursor-pointer transition-colors relative"
-                  :class="loginType === 'code' ? 'text-blue-600 font-medium' : 'text-gray-600'"
-                  @click="loginType = 'code'"
+                class="center cp transition-colors"
+                :class="loginType === 'code' ? 'link font-medium' : 'text-gray-600'"
+                @click="loginType = 'code'"
               >
-                验证码登录
-                <div
-                    v-if="loginType === 'code'"
-                    class="absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 bg-blue-600"
-                    style="width: 4rem;"
-                ></div>
+                <div>
+                  <span>验证码登录</span>
+                  <div
+                    v-opacity="loginType === 'code'"
+                    class="mt-1 h-0.5 bg-blue-600"
+                  ></div>
+                </div>
               </div>
               <div
-                  class="flex-1 py-3 text-center cursor-pointer transition-colors relative"
-                  :class="loginType === 'password' ? 'text-blue-600 font-medium' : 'text-gray-600'"
-                  @click="loginType = 'password'"
+                class="center cp transition-colors"
+                :class="loginType === 'password' ? 'link font-medium' : 'text-gray-600'"
+                @click="loginType = 'password'"
               >
-                密码登录
-                <div
-                    v-if="loginType === 'password'"
-                    class="absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 bg-blue-600"
-                    style="width: 4rem;"
-                ></div>
+                <div>
+                  <span>密码登录</span>
+                  <div
+                    v-opacity="loginType === 'password'"
+                    class="mt-1 h-0.5 bg-blue-600"
+                  ></div>
+                </div>
               </div>
             </div>
 
             <!-- 验证码登录表单 -->
-            <template v-if="loginType === 'code'">
-              <div class="mb-4">
-                <BaseInput
-                    v-model="phoneLoginForm.phone"
-                    type="tel"
-                    size="large"
-                    placeholder="请输入手机号"
-                    :class="{ 'has-error': loginErrors.phone }"
+            <Form
+              v-if="loginType === 'code'"
+              ref="phoneLoginFormRef"
+              :rules="phoneLoginFormRules"
+              :model="phoneLoginForm">
+              <FormItem prop="phone">
+                <BaseInput v-model="phoneLoginForm.phone"
+                           type="tel"
+                           size="large"
+                           placeholder="请输入手机号"
                 />
-                <div v-if="loginErrors.phone" class="mt-1 text-sm text-red-500 pl-2">{{ loginErrors.phone }}</div>
-              </div>
-
-              <div class="mb-4 flex gap-2">
-                <div class="flex-1">
+              </FormItem>
+              <FormItem prop="code">
+                <div class="flex gap-2">
                   <BaseInput
-                      v-model="phoneLoginForm.code"
-                      type="text"
-                      size="large"
-                      placeholder="请输入验证码"
-                      :class="{ 'has-error': loginErrors.code }"
+                    v-model="phoneLoginForm.code"
+                    type="text"
+                    size="large"
+                    :max-length="PHONE_CONFIG.codeLength"
+                    placeholder="请输入验证码"
                   />
-                  <div v-if="loginErrors.code" class="mt-1 text-sm text-red-500 pl-2">{{ loginErrors.code }}</div>
-                </div>
-                <BaseButton
-                    @click="sendVerificationCode(phoneLoginForm.phone, 'login')"
+                  <BaseButton
+                    @click="sendVerificationCode(phoneLoginForm.phone, 'login','phone')"
                     :disabled="isSendingCode || codeCountdown > 0"
                     type="info"
                     size="large"
-                    class="whitespace-nowrap flex-shrink-0 min-w-[100px]"
-                >
-                  {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '获取验证码') }}
-                </BaseButton>
-              </div>
-
-            </template>
+                    style="border: 1px solid var(--color-input-border)"
+                  >
+                    {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '发送验证码') }}
+                  </BaseButton>
+                </div>
+              </FormItem>
+            </Form>
 
             <!-- 密码登录表单 -->
-            <template v-else>
-              <div class="mb-4">
-                <BaseInput
-                    v-model="loginForm.account"
-                    type="text"
-                    size="large"
-                    placeholder="请输入邮箱或手机号"
-                    :class="{ 'has-error': loginErrors.email || loginErrors.phone }"
+            <Form
+              v-else
+              ref="loginForm2Ref"
+              :rules="loginForm2Rules"
+              :model="loginForm2">
+              <FormItem prop="account">
+                <BaseInput v-model="loginForm2.account"
+                           type="text"
+                           size="large"
+                           placeholder="请输入手机号/邮箱地址"
                 />
-                <div v-if="loginErrors.email" class="mt-1 text-sm text-red-500 pl-2">{{ loginErrors.email }}</div>
-                <div v-if="loginErrors.phone" class="mt-1 text-sm text-red-500 pl-2">{{ loginErrors.phone }}</div>
-              </div>
-              <div class="mb-4 relative">
-                <BaseInput
-                    v-model="loginForm.password"
-                    :type="showLoginPassword ? 'text' : 'password'"
+              </FormItem>
+              <FormItem prop="password">
+                <div class="flex gap-2">
+                  <BaseInput
+                    v-model="loginForm2.password"
+                    type="password"
                     size="large"
                     placeholder="请输入密码"
-                    :class="{ 'has-error': loginErrors.password }"
-                />
-                <div
-                    class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-700 z-10"
-                    @click="showLoginPassword = !showLoginPassword"
-                >
-                  <IconFluentEye16Regular v-if="!showLoginPassword"/>
-                  <IconFluentEyeOff16Regular v-else/>
+                  />
                 </div>
-                <div v-if="loginErrors.password" class="mt-1 text-sm text-red-500 pl-2">{{ loginErrors.password }}</div>
-              </div>
-            </template>
+              </FormItem>
+            </Form>
 
-            <div class="mb-4 text-xs text-gray-500 text-center leading-relaxed">
-              继续操作即表示你同意我们的
-              <router-link to="/user-agreement" class="text-blue-600 hover:opacity-80">用户协议</router-link>
-              与
-              <router-link to="/privacy-policy" class="text-blue-600 hover:opacity-80">隐私政策</router-link>
-            </div>
+            <Notice>
+              <span v-if="loginType === 'code'">，未注册的手机号将自动注册</span>
+            </Notice>
 
             <BaseButton
-                class="w-full"
-                size="large"
-                :loading="isLoading"
-                @click="handlePhoneCodeLogin"
+              class="w-full"
+              size="large"
+              :loading="authStore.isLoading"
+              @click="handleLogin"
             >
               登录
             </BaseButton>
 
             <!-- 底部操作链接 - 只在密码登录时显示 -->
             <div class="mt-4 flex justify-between text-sm" v-opacity="loginType !== 'code'">
-              <div class="text-blue-600 cursor-pointer hover:opacity-80" @click="switchMode('register')">注册账号</div>
-              <div class="text-blue-600 cursor-pointer hover:opacity-80" @click="switchMode('forgot')">忘记密码?</div>
+              <div class="link cp" @click="switchMode('forgot')">忘记密码?</div>
+              <div class="link cp" @click="switchMode('register')">注册账号</div>
             </div>
           </div>
 
           <!-- 注册模式 -->
           <div v-else-if="currentMode === 'register'">
-            <h2 class="mb-6 text-xl font-semibold text-center">注册新账号</h2>
-
-            <div class="mb-4">
-              <BaseInput
+            <div class="mb-6 text-xl font-bold text-center">注册新账号</div>
+            <Form
+              ref="registerFormRef"
+              :rules="registerFormRules"
+              :model="registerForm">
+              <FormItem prop="phone">
+                <BaseInput
                   v-model="registerForm.phone"
                   type="tel"
                   size="large"
                   placeholder="请输入手机号"
-                  :class="{ 'has-error': registerErrors.phone }"
-              />
-              <div v-if="registerErrors.phone" class="mt-1 text-sm text-red-500 pl-2">{{ registerErrors.phone }}</div>
-            </div>
-
-            <div class="mb-4 flex gap-2">
-              <div class="flex-1">
-                <BaseInput
+                />
+              </FormItem>
+              <FormItem prop="code">
+                <div class="flex gap-2">
+                  <BaseInput
                     v-model="registerForm.code"
                     type="text"
                     size="large"
                     placeholder="请输入验证码"
-                    :class="{ 'has-error': registerErrors.code }"
-                />
-                <div v-if="registerErrors.code" class="mt-1 text-sm text-red-500 pl-2">{{ registerErrors.code }}</div>
-              </div>
-              <BaseButton
-                  @click="sendVerificationCode(registerForm.phone, 'register')"
-                  :disabled="isSendingCode || codeCountdown > 0"
-                  type="info"
-                  size="large"
-                  class="whitespace-nowrap flex-shrink-0 min-w-[100px]"
-              >
-                {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '获取验证码') }}
-              </BaseButton>
-            </div>
-
-            <div class="mb-4 relative">
-              <BaseInput
+                    :max-length="PHONE_CONFIG.codeLength"
+                  />
+                  <BaseButton
+                    @click="sendVerificationCode(registerForm.phone, 'register','phone')"
+                    :disabled="isSendingCode || codeCountdown > 0"
+                    type="info"
+                    size="large"
+                    style="border: 1px solid var(--color-input-border)"
+                  >
+                    {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '获取验证码') }}
+                  </BaseButton>
+                </div>
+              </FormItem>
+              <FormItem prop="password">
+                <BaseInput
                   v-model="registerForm.password"
-                  :type="showRegisterPassword ? 'text' : 'password'"
+                  type="password"
                   size="large"
-                  placeholder="请设置密码（6-20位）"
-                  :class="{ 'has-error': registerErrors.password }"
-              />
-              <div
-                  class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-700 z-10"
-                  @click="showRegisterPassword = !showRegisterPassword"
-              >
-                <IconFluentEye16Regular v-if="!showRegisterPassword"/>
-                <IconFluentEyeOff16Regular v-else/>
-              </div>
-              <div v-if="registerErrors.password" class="mt-1 text-sm text-red-500 pl-2">{{
-                  registerErrors.password
-                }}
-              </div>
-            </div>
-
-            <div class="mb-4 relative">
-              <BaseInput
+                  :placeholder="`请设置密码（${PASSWORD_CONFIG.minLength}-${PASSWORD_CONFIG.maxLength} 位）`"
+                />
+              </FormItem>
+              <FormItem prop="confirmPassword">
+                <BaseInput
                   v-model="registerForm.confirmPassword"
-                  :type="showRegisterConfirmPassword ? 'text' : 'password'"
+                  type="password"
                   size="large"
                   placeholder="请再次输入密码"
-              />
-              <div
-                  class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-700 z-10"
-                  @click="showRegisterConfirmPassword = !showRegisterConfirmPassword"
-              >
-                <IconFluentEye16Regular v-if="!showRegisterConfirmPassword"/>
-                <IconFluentEyeOff16Regular v-else/>
-              </div>
-            </div>
+                />
+              </FormItem>
+            </Form>
 
-            <div class="mb-4 text-xs text-gray-500 text-center leading-relaxed">
-              继续操作即表示你同意我们的
-              <router-link to="/user-agreement" class="text-blue-600 hover:opacity-80">用户协议</router-link>
-              并确认已了解
-              <router-link to="/privacy-policy" class="text-blue-600 hover:opacity-80">隐私政策</router-link>
-              。
-            </div>
+            <Notice/>
 
             <BaseButton
-                class="w-full"
-                size="large"
-                :loading="isLoading"
-                @click="handleRegister"
+              class="w-full"
+              size="large"
+              :loading="authStore.isLoading"
+              @click="handleRegister"
             >
               注册
             </BaseButton>
 
             <div class="mt-4 text-center">
-              <div class="text-blue-600 cursor-pointer hover:opacity-80 text-sm" @click="switchMode('login')">返回登录
+              <div class="color-link cp hover:opacity-80 text-sm" @click="switchMode('login')">返回登录
               </div>
             </div>
           </div>
 
           <!-- 忘记密码模式 -->
           <div v-else-if="currentMode === 'forgot'">
-            <h2 class="mb-6 text-xl font-semibold text-center">重置密码</h2>
-
-            <div class="mb-4">
-              <BaseInput
-                  v-model="forgotForm.phone"
+            <div class="mb-6 text-xl font-bold text-center">重置密码</div>
+            <Form
+              ref="forgotFormRef"
+              :rules="forgotFormRules"
+              :model="forgotForm">
+              <FormItem prop="account">
+                <BaseInput
+                  v-model="forgotForm.account"
                   type="tel"
                   size="large"
-                  placeholder="请输入手机号"
-                  :class="{ 'has-error': forgotErrors.phone }"
-              />
-              <div v-if="forgotErrors.phone" class="mt-1 text-sm text-red-500 pl-2">{{ forgotErrors.phone }}</div>
-            </div>
-
-            <div class="mb-4 flex gap-2">
-              <div class="flex-1">
-                <BaseInput
+                  placeholder="请输入手机号/邮箱地址"
+                />
+              </FormItem>
+              <FormItem prop="code">
+                <div class="flex gap-2">
+                  <BaseInput
                     v-model="forgotForm.code"
                     type="text"
                     size="large"
                     placeholder="请输入验证码"
-                    :class="{ 'has-error': forgotErrors.code }"
-                />
-                <div v-if="forgotErrors.code" class="mt-1 text-sm text-red-500 pl-2">{{ forgotErrors.code }}</div>
-              </div>
-              <BaseButton
-                  @click="sendVerificationCode(forgotForm.phone, 'reset_password')"
-                  :disabled="isSendingCode || codeCountdown > 0"
-                  type="info"
-                  size="large"
-                  class="whitespace-nowrap flex-shrink-0 min-w-[100px]"
-              >
-                {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '获取验证码') }}
-              </BaseButton>
-            </div>
-
-            <div class="mb-4 relative">
-              <BaseInput
+                    :max-length="PHONE_CONFIG.codeLength"
+                  />
+                  <BaseButton
+                    @click="sendVerificationCode(forgotForm.account, 'reset_password','account')"
+                    :disabled="isSendingCode || codeCountdown > 0"
+                    type="info"
+                    size="large"
+                    style="border: 1px solid var(--color-input-border)"
+                  >
+                    {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '获取验证码') }}
+                  </BaseButton>
+                </div>
+              </FormItem>
+              <FormItem prop="newPassword">
+                <BaseInput
                   v-model="forgotForm.newPassword"
-                  :type="showForgotPassword ? 'text' : 'password'"
+                  type="password"
                   size="large"
-                  placeholder="请输入新密码（6-20位）"
-                  :class="{ 'has-error': forgotErrors.newPassword }"
-              />
-              <div
-                  class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-700 z-10"
-                  @click="showForgotPassword = !showForgotPassword"
-              >
-                <IconFluentEye16Regular v-if="!showForgotPassword"/>
-                <IconFluentEyeOff16Regular v-else/>
-              </div>
-              <div v-if="forgotErrors.newPassword" class="mt-1 text-sm text-red-500 pl-2">{{
-                  forgotErrors.newPassword
-                }}
-              </div>
-            </div>
-
-            <div class="mb-4 relative">
-              <BaseInput
+                  :placeholder="`请输入新密码（${PASSWORD_CONFIG.minLength}-${PASSWORD_CONFIG.maxLength} 位）`"
+                />
+              </FormItem>
+              <FormItem prop="confirmPassword">
+                <BaseInput
                   v-model="forgotForm.confirmPassword"
-                  :type="showForgotConfirmPassword ? 'text' : 'password'"
+                  type="password"
                   size="large"
                   placeholder="请再次输入新密码"
-              />
-              <div
-                  class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-700 z-10"
-                  @click="showForgotConfirmPassword = !showForgotConfirmPassword"
-              >
-                <IconFluentEye16Regular v-if="!showForgotConfirmPassword"/>
-                <IconFluentEyeOff16Regular v-else/>
-              </div>
-            </div>
-
-            <div class="mb-4 text-xs text-gray-500 text-center leading-relaxed">
-              继续操作即表示你同意我们的
-              <router-link to="/user-agreement" class="text-blue-600 hover:opacity-80">用户协议</router-link>
-              并确认已了解
-              <router-link to="/privacy-policy" class="text-blue-600 hover:opacity-80">隐私政策</router-link>
-              。
-            </div>
+                />
+              </FormItem>
+            </Form>
 
             <BaseButton
-                class="w-full"
-                size="large"
-                :loading="isLoading"
-                @click="handleForgotPassword"
+              class="w-full mt-2"
+              size="large"
+              :loading="authStore.isLoading"
+              @click="handleForgotPassword"
             >
               重置密码
             </BaseButton>
 
             <div class="mt-4 text-center">
-              <div class="text-blue-600 cursor-pointer hover:opacity-80 text-sm" @click="switchMode('login')">返回登录
+              <div class="color-link cp hover:opacity-80 text-sm" @click="switchMode('login')">返回登录
               </div>
             </div>
           </div>
         </div>
 
         <!-- 右侧微信二维码 - 只在登录模式时显示 -->
-         <div v-if="currentMode === 'login'" class="center flex-col bg-gray-100 rounded-xl p-8 shadow-lg">
-           <div class="flex flex-col items-center">
-             <div class="relative inline-block">
-               <img
-                   v-if="showWechatQR"
-                   :src="wechatQRUrl"
-                   alt="微信登录二维码"
-                   class="w-[200px] h-[200px] border border-gray-300 rounded-lg bg-white block transition-opacity"
-                   :class="{ 'opacity-50': qrExpired }"
-               />
-               <img
-                   v-else
-                   src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2Y1ZjVmNSIvPgogIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OTk5OSI+55So5o6l566h55CG6L295Lit6K+B77yBPC90ZXh0Pgo8L3N2Zz4K"
-                   alt="微信登录二维码"
-                   class="w-[200px] h-[200px] border border-gray-300 rounded-lg bg-white block"
-               />
-               <!-- 扫描成功蒙层 -->
-               <div
-                   v-if="showWechatQR && qrScanned && !qrExpired"
-                   class="absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-95 rounded-lg flex items-center justify-center backdrop-blur-sm z-10"
-               >
-                 <div class="text-center px-4">
-                   <p class="text-base text-gray-700 mb-2 font-medium">扫描成功</p>
-                   <p class="text-sm text-gray-600">在微信中轻触允许即可登录</p>
-                 </div>
-               </div>
-               <!-- 过期蒙层 -->
-               <div
-                   v-if="showWechatQR && qrExpired"
-                   class="absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-95 rounded-lg flex items-center justify-center backdrop-blur-sm z-10"
-               >
-                 <div class="text-center">
-                   <p class="text-base text-gray-600 mb-4 font-medium">二维码已过期</p>
-                   <BaseButton
-                       @click="refreshQRCode"
-                       type="primary"
-                       size="large"
-                       class="flex items-center justify-center"
-                   >
-                     <IconFluentReplay20Regular class="mr-2"/>
-                     刷新二维码
-                   </BaseButton>
-                 </div>
-               </div>
-             </div>
-             <p class="mt-4 text-sm text-gray-600">微信扫码登录</p>
-           </div>
-         </div>
+        <div v-if="currentMode === 'login'" class="center flex-col bg-gray-100 rounded-xl px-12">
+          <div class="relative w-40 h-40 bg-white rounded-xl overflow-hidden shadow-xl">
+            <img
+              v-if="showWechatQR"
+              :src="wechatQRUrl"
+              alt="微信登录二维码"
+              class="w-full h-full"
+              :class="{ 'opacity-30': qrStatus === 'expired' }"
+            />
+            <!-- 扫描成功蒙层 -->
+            <div
+              v-if="qrStatus === 'scanned'"
+              class="absolute left-0 top-0 w-full h-full center flex-col gap-space bg-white"
+            >
+              <IconFluentCheckmarkCircle20Filled class="color-green text-4xl"/>
+              <div class="text-base text-gray-700 font-medium">扫描成功</div>
+              <div class="text-xs text-gray-600">微信中轻触允许即可登录</div>
+            </div>
+            <!-- 取消登录蒙层 -->
+            <div
+              v-if="qrStatus === 'cancelled'"
+              class="absolute left-0 top-0 w-full h-full center flex-col gap-space bg-white"
+            >
+              <IconFluentErrorCircle20Regular class="color-red text-4xl"/>
+              <div class="text-base text-gray-700 font-medium">你已取消此次登录</div>
+              <div class="text-xs text-gray-600">你可<span class="color-link" @click="refreshQRCode">再次登录</span>，或关闭窗口
+              </div>
+            </div>
+            <!-- 过期蒙层 -->
+            <div
+              v-if=" qrStatus === 'expired'"
+              class="absolute top-0 left-0 right-0 bottom-0 bg-opacity-95 center backdrop-blur-sm"
+            >
+              <IconFluentArrowClockwise20Regular
+                @click="refreshQRCode"
+                class="cp text-4xl"/>
+            </div>
+          </div>
+          <p class="mt-4 center gap-space">
+            <IconIxWechatLogo class="text-xl color-green"/>
+            <span class="text-sm text-gray-600">微信扫码登录</span>
+          </p>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <style scoped lang="scss">
-// Input错误状态覆盖
-:deep(.base-input2.has-error) {
-  border-color: #f56c6c;
-}
 </style>
diff --git a/src/router.ts b/src/router.ts
index cf6a3482..c582f8c1 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -63,6 +63,8 @@ const router = VueRouter.createRouter({
 
 // 路由守卫
 router.beforeEach(async (to: any, from: any) => {
+  return true
+
   const authStore = useAuthStore()
   
   // 公共路由，不需要登录验证
@@ -78,7 +80,7 @@ router.beforeEach(async (to: any, from: any) => {
     // 尝试初始化认证状态
     const isInitialized = await authStore.initAuth()
     if (!isInitialized) {
-      return { path: '/login', query: { redirect: to.fullPath } }
+      return {path: '/login', query: {redirect: to.fullPath}}
     }
   }
   
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 3f6cecff..d3d08ec1 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
 import { login as loginApi, register as registerApi, logout as logoutApi, getUserInfo, resetPassword as resetPasswordApi, type LoginParams, type RegisterParams } from '@/apis/auth'
 import Toast from '@/components/base/toast/Toast.ts'
 import router from '@/router.ts'
+import {sleep} from "@/utils";
 export interface User {
   id: string
   email?: string
diff --git a/src/utils/validation.ts b/src/utils/validation.ts
index 5e9714bb..ffff054e 100644
--- a/src/utils/validation.ts
+++ b/src/utils/validation.ts
@@ -1,166 +1,10 @@
 // 邮箱验证
+import {EMAIL_CONFIG, PHONE_CONFIG} from "@/config/auth.ts";
+
 export const validateEmail = (email: string): boolean => {
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-  return emailRegex.test(email)
+  return EMAIL_CONFIG.emailRegex.test(email)
 }
 // 手机号验证（中国大陆）
 export const validatePhone = (phone: string): boolean => {
-  const phoneRegex = /^1[3-9]\d{9}$/
-  return phoneRegex.test(phone)
-}
-
-// 密码验证
-export const validatePassword = (password: string): { isValid: boolean; message?: string } => {
-  if (!password) {
-    return { isValid: false, message: '密码不能为空' }
-  }
-  if (password.length < 6) {
-    return { isValid: false, message: '密码长度不能少于6位' }
-  }
-  if (password.length > 20) {
-    return { isValid: false, message: '密码长度不能超过20位' }
-  }
-  return { isValid: true }
-}
-
-// 验证码验证
-export const validateCode = (code: string): boolean => {
-  return /^\d{6}$/.test(code)
-}
-
-// 用户名验证
-export const validateNickname = (nickname: string): { isValid: boolean; message?: string } => {
-  if (!nickname) {
-    return { isValid: true } // 昵称可以为空
-  }
-  if (nickname.length < 2) {
-    return { isValid: false, message: '昵称长度不能少于2位' }
-  }
-  if (nickname.length > 20) {
-    return { isValid: false, message: '昵称长度不能超过20位' }
-  }
-  return { isValid: true }
-}
-
-// 综合验证函数
-export const validateLoginForm = (data: {
-  email?: string
-  phone?: string
-  password: string
-  code?: string
-  type: 'email' | 'phone' | 'wechat'
-}): { isValid: boolean; errors: Record<string, string> } => {
-  const errors: Record<string, string> = {}
-
-  if (data.type === 'email') {
-    if (!data.email) {
-      errors.email = '邮箱不能为空'
-    } else if (!validateEmail(data.email)) {
-      errors.email = '请输入有效的邮箱地址'
-    }
-  }
-
-  if (data.type === 'phone') {
-    if (!data.phone) {
-      errors.phone = '手机号不能为空'
-    } else if (!validatePhone(data.phone)) {
-      errors.phone = '请输入有效的手机号'
-    }
-
-    if (!data.code) {
-      errors.code = '验证码不能为空'
-    } else if (!validateCode(data.code)) {
-      errors.code = '请输入6位数字验证码'
-    }
-  }
-
-  if (data.type !== 'phone' && !data.password) {
-    errors.password = '密码不能为空'
-  } else if (data.type !== 'phone' && data.password) {
-    const passwordValidation = validatePassword(data.password)
-    if (!passwordValidation.isValid) {
-      errors.password = passwordValidation.message
-    }
-  }
-
-  return {
-    isValid: Object.keys(errors).length === 0,
-    errors
-  }
-}
-
-export const validateRegisterForm = (data: {
-  email?: string
-  phone: string
-  password: string
-  code: string
-  nickname?: string
-}): { isValid: boolean; errors: Record<string, string> } => {
-  const errors: Record<string, string> = {}
-
-  if (!data.phone) {
-    errors.phone = '手机号不能为空'
-  } else if (!validatePhone(data.phone)) {
-    errors.phone = '请输入有效的手机号'
-  }
-
-  if (!data.code) {
-    errors.code = '验证码不能为空'
-  } else if (!validateCode(data.code)) {
-    errors.code = '请输入6位数字验证码'
-  }
-
-  const passwordValidation = validatePassword(data.password)
-  if (!passwordValidation.isValid) {
-    errors.password = passwordValidation.message
-  }
-
-  const nicknameValidation = validateNickname(data.nickname || '')
-  if (!nicknameValidation.isValid) {
-    errors.nickname = nicknameValidation.message
-  }
-
-  if (data.email && !validateEmail(data.email)) {
-    errors.email = '请输入有效的邮箱地址'
-  }
-
-  return {
-    isValid: Object.keys(errors).length === 0,
-    errors
-  }
-}
-
-export const validateResetPasswordForm = (data: {
-  email?: string
-  phone: string
-  code: string
-  newPassword: string
-}): { isValid: boolean; errors: Record<string, string> } => {
-  const errors: Record<string, string> = {}
-
-  if (!data.phone) {
-    errors.phone = '手机号不能为空'
-  } else if (!validatePhone(data.phone)) {
-    errors.phone = '请输入有效的手机号'
-  }
-
-  if (!data.code) {
-    errors.code = '验证码不能为空'
-  } else if (!validateCode(data.code)) {
-    errors.code = '请输入6位数字验证码'
-  }
-
-  const passwordValidation = validatePassword(data.newPassword)
-  if (!passwordValidation.isValid) {
-    errors.newPassword = passwordValidation.message
-  }
-
-  if (data.email && !validateEmail(data.email)) {
-    errors.email = '请输入有效的邮箱地址'
-  }
-
-  return {
-    isValid: Object.keys(errors).length === 0,
-    errors
-  }
+  return PHONE_CONFIG.phoneRegex.test(phone)
 }