feat: 更换ui组件库，naiveui->element-plus

src/views/auth/Login.vue

@@ -6,56 +6,66 @@
         <span style="color: #71717a">登录账号以进入对战</span>
       </p>
     </div>
-    <n-form
+    <el-form
       ref="formRef"
       :model="loginModel"
       :rules="rules"
-      :show-label="false"
+      hide-required-asterisk
       class="login-wrapper__form"
     >
-      <n-form-item path="username">
-        <n-input v-model:value="loginModel.username" placeholder="请输入账号" :maxlength="20" />
-      </n-form-item>
-      <n-form-item path="password">
-        <n-input
-          v-model:value="loginModel.password"
+      <el-form-item prop="username">
+        <el-input
+          size="large"
+          v-model="loginModel.username"
+          placeholder="请输入账号"
+          :maxlength="20"
+        />
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginModel.password"
+          size="large"
           type="password"
-          show-password-on="click"
+          show-password
           placeholder="密码"
           :maxlength="20"
         />
-      </n-form-item>
-      <n-form-item>
+      </el-form-item>
+      <el-form-item>
         <div class="login-wrapper__actions">
-          <n-checkbox v-model:checked="rememberAccount">记住账号</n-checkbox>
+          <el-checkbox v-model="rememberAccount">记住账号</el-checkbox>
           <a href="javascript:void(0)" style="color: #2080f0">忘记密码？</a>
         </div>
-      </n-form-item>
-      <n-form-item>
-        <n-button :loading="loading" style="width: 100%" type="primary" @click="userLoginFun"
+      </el-form-item>
+      <el-form-item>
+        <el-button :loading="loading" style="width: 100%" type="primary" @click="userLoginFun"
           >登录
-        </n-button>
-      </n-form-item>
-      <n-form-item>
+        </el-button>
+      </el-form-item>
+      <el-form-item>
         <div class="login-wrapper__quick-btns">
-          <n-button class="login-wrapper__quick-btn" @click="router.push('/auth/phone-login')"> 手机登录 </n-button>
-          <n-button class="login-wrapper__quick-btn" @click="router.push('/auth/qrcode-login')"> 扫码登录 </n-button>
+          <el-button class="login-wrapper__quick-btn" @click="router.push('/auth/phone-login')">
+            手机登录
+          </el-button>
+          <el-button class="login-wrapper__quick-btn" @click="router.push('/auth/qrcode-login')">
+            扫码登录
+          </el-button>
         </div>
-      </n-form-item>
-      <n-form-item>
+      </el-form-item>
+      <el-form-item>
         <div class="login-wrapper__register-link">
           <span>没有账号？</span>
           <router-link to="/auth/register" style="color: #2080f0">创建账号</router-link>
         </div>
-      </n-form-item>
-    </n-form>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref, useTemplateRef, onMounted } from 'vue'
-import type { FormItemRule, FormRules, FormInst } from 'naive-ui'
-import { useMessage } from 'naive-ui'
+import type { FormRules, FormInstance } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import { useAccountStore } from '@/stores'
 import { useRouter, useRoute } from 'vue-router'
 
@@ -65,8 +75,7 @@ const REMEMBER_KEY = 'login_remembered_username'
 const router = useRouter()
 const route = useRoute()
 const accountStore = useAccountStore()
-const message = useMessage()
-const formRef = useTemplateRef<FormInst>('formRef')
+const formRef = useTemplateRef<FormInstance>('formRef')
 const loginModel = reactive({
   username: '',
   password: ''
@@ -84,43 +93,39 @@ onMounted(() => {
   }
 })
 
+/** 账号验证规则 */
+const validateUsername = (_rule: unknown, value: string, callback: (error?: Error) => void) => {
+  if (!value) {
+    callback(new Error('请输入登陆账号'))
+  } else if (value.length < 2) {
+    callback(new Error('账号长度不能小于2位'))
+  } else if (value.length > 20) {
+    callback(new Error('账号长度不能大于20位'))
+  } else if (!/^[A-Za-z][A-Za-z0-9]*$/.test(value)) {
+    callback(new Error('账号以字母开头，只能包含字母和数字'))
+  } else {
+    callback()
+  }
+}
+
+/** 密码验证规则 */
+const validatePassword = (_rule: unknown, value: string, callback: (error?: Error) => void) => {
+  if (!value) {
+    callback(new Error('请输入密码'))
+  } else if (value.length < 8) {
+    callback(new Error('密码长度不能小于8位'))
+  } else if (value.length > 20) {
+    callback(new Error('密码长度不能大于20位'))
+  } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/.test(value)) {
+    callback(new Error('密码必须包含大小写字母和数字'))
+  } else {
+    callback()
+  }
+}
+
 const rules: FormRules = {
-  username: [
-    {
-      required: true,
-      trigger: ['blur'],
-      validator: (_rule: FormItemRule, value: string) => {
-        if (!value) {
-          return new Error('请输入登陆账号')
-        } else if (value.length < 2) {
-          return new Error('账号长度不能小于2位')
-        } else if (value.length > 20) {
-          return new Error('账号长度不能大于20位')
-        } else if (!/^[A-Za-z][A-Za-z0-9]*$/.test(value)) {
-          return new Error('账号以字母开头，只能包含字母和数字')
-        }
-        return true
-      }
-    }
-  ],
-  password: [
-    {
-      required: true,
-      trigger: ['blur'],
-      validator: (_rule: FormItemRule, value: string) => {
-        if (!value) {
-          return new Error('请输入密码')
-        } else if (value.length < 8) {
-          return new Error('密码长度不能小于8位')
-        } else if (value.length > 20) {
-          return new Error('密码长度不能大于20位')
-        } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/.test(value)) {
-          return new Error('密码必须包含大小写字母和数字')
-        }
-        return true
-      }
-    }
-  ]
+  username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+  password: [{ required: true, trigger: 'blur', validator: validatePassword }]
 }
 
 /**
@@ -147,32 +152,34 @@ function getErrorMessage(error: unknown): string {
 
 /** 用户登录 */
 const userLoginFun = () => {
-  formRef.value?.validate(async (errors) => {
-    if (errors) return
+  formRef.value?.validate((valid: boolean) => {
+    if (!valid) return
 
     loading.value = true
-    try {
-      await accountStore.login({
+    accountStore
+      .login({
         username: loginModel.username,
         password: loginModel.password
       })
+      .then(() => {
+        // 记住账号：将用户名存入 localStorage
+        if (rememberAccount.value) {
+          localStorage.setItem(REMEMBER_KEY, loginModel.username)
+        } else {
+          localStorage.removeItem(REMEMBER_KEY)
+        }
 
-      // 记住账号：将用户名存入 localStorage
-      if (rememberAccount.value) {
-        localStorage.setItem(REMEMBER_KEY, loginModel.username)
-      } else {
-        localStorage.removeItem(REMEMBER_KEY)
-      }
-
-      message.success('登录成功')
-      // 跳转到目标页面（有 redirect 参数则优先跳回原页面，否则去首页）
-      const redirectPath = (route.query.redirect as string) || '/'
-      router.push(redirectPath)
-    } catch (error: unknown) {
-      message.error(getErrorMessage(error))
-    } finally {
-      loading.value = false
-    }
+        ElMessage.success('登录成功')
+        // 跳转到目标页面（有 redirect 参数则优先跳回原页面，否则去首页）
+        const redirectPath = (route.query.redirect as string) || '/'
+        router.push(redirectPath)
+      })
+      .catch((error: unknown) => {
+        ElMessage.error(getErrorMessage(error))
+      })
+      .finally(() => {
+        loading.value = false
+      })
   })
 }
 </script>
@@ -204,7 +211,7 @@ const userLoginFun = () => {
 
 .login-wrapper__form {
   width: 100%;
-  margin-top: 40px;
+  margin-top: 20px;
 }
 
 .login-wrapper__actions {