支持电子邮件登录注册

src/api/user.js

@@ -13,9 +13,9 @@ export const UserAPI = {
 
   /**
    * 用户登录
-   * @param {Object} data 登录信息
+   * @param {Object} data
-   * @param {string} data.username 用户名
+   * @param {string} data.username - 用户名或邮箱
-   * @param {string} data.password 密码
+   * @param {string} data.password - 密码
    */
   login(data) {
     return request.post('/user/login', data)

src/views/LoginView.vue

@@ -15,10 +15,10 @@
         label-width="100px"
         @keyup.enter="handleLogin">
         
-        <el-form-item label="管理员账号" prop="username">
+        <el-form-item label="账号" prop="username">
           <el-input 
             v-model="loginForm.username"
-            placeholder="请输入管理员账号"
+            placeholder="请输入用户名或邮箱"
             :prefix-icon="User"
             clearable />
         </el-form-item>
@@ -39,14 +39,8 @@
           @click="handleLogin">
           登录
         </el-button>
-        <div class="guest-login">
+
-          <el-button 
+        <div class="form-footer">
-            type="info" 
-            link
-            @click="handleGuestLogin">
-            游客登录>>
-          </el-button>
-          <el-divider direction="vertical" />
           <el-button 
             type="primary" 
             link
@@ -78,8 +72,8 @@ const loginForm = ref({
 
 const loginRules = {
   username: [
-    { required: true, message: '请输入管理员账号', trigger: 'blur' },
+    { required: true, message: '请输入用户名或邮箱', trigger: 'blur' },
-    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+    { min: 3, message: '长度不能小于3个字符', trigger: 'blur' }
   ],
   password: [
     { required: true, message: '请输入登录密码', trigger: 'blur' },
@@ -87,14 +81,6 @@ const loginRules = {
   ]
 }
 
-// 游客登录处理
-const handleGuestLogin = () => {
-  localStorage.setItem('isAuthenticated', 'true')
-  localStorage.setItem('userRole', 'guest')
-  router.push('/dashboard')
-  ElMessage.success('游客登录成功')
-}
-
 // 管理员登录处理
 const handleLogin = async () => {
   if (!loginFormRef.value) return
@@ -103,7 +89,10 @@ const handleLogin = async () => {
     if (valid) {
       loading.value = true
       try {
-        const response = await UserAPI.login(loginForm.value)
+        const response = await UserAPI.login({
+          username: loginForm.value.username,
+          password: loginForm.value.password
+        })
         if (response.retcode === 0) {
           localStorage.setItem('token', JSON.stringify(response.data))
           localStorage.setItem('isAuthenticated', 'true')
@@ -160,6 +149,8 @@ const handleRegister = () => {
   margin: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  backdrop-filter: blur(8px);
+  background-color: rgba(255,255,255,0.6);
 }
 
 .login-header {
@@ -198,17 +189,8 @@ const handleRegister = () => {
   white-space: nowrap;
 }
 
-.guest-login {
+.form-footer {
   text-align: center;
   margin-top: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.form-footer {
-  padding: 0 0 0 100px;  /* 左内边距与label宽度相同 */
-  margin-top: 20px;
 }
 </style> 

src/views/RegisterView.vue

@@ -4,7 +4,7 @@
       <template #header>
         <div class="register-header">
           <img src="../assets/logo.png" alt="logo" class="register-logo">
-          <h2>用户注册</h2>
+          <h2>注册账号</h2>
         </div>
       </template>
       
@@ -12,8 +12,7 @@
         ref="registerFormRef"
         :model="registerForm"
         :rules="registerRules"
-        label-width="100px"
+        label-width="100px">
-        @keyup.enter="handleRegister">
         
         <el-form-item label="用户名" prop="username">
           <el-input 
@@ -31,6 +30,14 @@
             clearable />
         </el-form-item>
 
+        <el-form-item label="电子邮件" prop="email">
+          <el-input 
+            v-model="registerForm.email"
+            placeholder="请输入电子邮件"
+            :prefix-icon="Message"
+            clearable />
+        </el-form-item>
+
         <el-form-item label="密码" prop="password">
           <el-input 
             v-model="registerForm.password"
@@ -56,13 +63,13 @@
           @click="handleRegister">
           注册
         </el-button>
-        <div class="login-link">
+
-          已有账号？
+        <div class="form-footer">
           <el-button 
             type="primary" 
             link
             @click="router.push('/login')">
-            立即登录
+            返回登录
           </el-button>
         </div>
       </el-form>
@@ -74,7 +81,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { User, UserFilled, Lock } from '@element-plus/icons-vue'
+import { User, UserFilled, Lock, Message } from '@element-plus/icons-vue'
 import { UserAPI } from '../api/user'
 
 const router = useRouter()
@@ -84,26 +91,18 @@ const loading = ref(false)
 const registerForm = ref({
   username: '',
   nickname: '',
+  email: '',
   password: '',
   confirmPassword: ''
 })
 
-const validatePass = (rule, value, callback) => {
+// 邮箱验证规则
-  if (value === '') {
+const validateEmail = (rule, value, callback) => {
-    callback(new Error('请输入密码'))
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-  } else {
+  if (!value) {
-    if (registerForm.value.confirmPassword !== '') {
+    callback(new Error('请输入电子邮件'))
-      registerFormRef.value.validateField('confirmPassword')
+  } else if (!emailRegex.test(value)) {
-    }
+    callback(new Error('请输入有效的电子邮件地址'))
-    callback()
-  }
-}
-
-const validatePass2 = (rule, value, callback) => {
-  if (value === '') {
-    callback(new Error('请再次输入密码'))
-  } else if (value !== registerForm.value.password) {
-    callback(new Error('两次输入密码不一致!'))
   } else {
     callback()
   }
@@ -118,12 +117,25 @@ const registerRules = {
     { required: true, message: '请输入昵称', trigger: 'blur' },
     { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
   ],
+  email: [
+    { required: true, validator: validateEmail, trigger: 'blur' }
+  ],
   password: [
-    { validator: validatePass, trigger: 'blur' },
+    { required: true, message: '请输入密码', trigger: 'blur' },
     { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
   ],
   confirmPassword: [
-    { validator: validatePass2, trigger: 'blur' }
+    { required: true, message: '请再次输入密码', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== registerForm.value.password) {
+          callback(new Error('两次输入的密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
   ]
 }
 
@@ -137,15 +149,19 @@ const handleRegister = async () => {
         const response = await UserAPI.register({
           username: registerForm.value.username,
           nickname: registerForm.value.nickname,
+          email: registerForm.value.email,
           password: registerForm.value.password
         })
-
+        
         if (response.retcode === 0) {
-          ElMessage.success('注册成功，请登录')
+          ElMessage.success('注册成功')
           router.push('/login')
+        } else {
+          ElMessage.error(response.message || '注册失败')
         }
       } catch (error) {
         console.error('注册失败:', error)
+        ElMessage.error('注册失败，请重试')
       } finally {
         loading.value = false
       }