支持电子邮件登录注册

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/layout/Layout.vue

@@ -22,30 +22,26 @@
         text-color="rgba(255,255,255,0.65)"
         active-text-color="#fff"
         :collapse="isCollapse">
-        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/dashboard`">
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/dashboard`" v-if="hasPermission(UserMask.Admin, userInfo?.mask)">
           <el-icon><DataLine /></el-icon>
           <span>概览面板</span>
         </el-menu-item>
-        <template v-if="userRole === 'admin'">
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/tasks`" v-if="hasPermission(UserMask.Admin, userInfo?.mask)">
-          <el-menu-item :index="`${ADMIN_ROUTE_BASE}/tasks`">
+          <el-icon><List /></el-icon>
-            <el-icon><List /></el-icon>
+          <span>任务管理</span>
-            <span>任务管理</span>
+        </el-menu-item>
-          </el-menu-item>
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/config`" v-if="hasPermission(UserMask.Admin, userInfo?.mask)">
-          <el-menu-item :index="`${ADMIN_ROUTE_BASE}/config`">
+          <el-icon><Setting /></el-icon>
-            <el-icon><Setting /></el-icon>
+          <span>系统配置</span>
-            <span>系统配置</span>
+        </el-menu-item>
-          </el-menu-item>
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/users`" v-if="hasPermission(UserMask.SuperAdmin, userInfo?.mask)">
-          <template v-if="userInfo.mask === 2">
+          <el-icon><User /></el-icon>
-            <el-menu-item :index="`${ADMIN_ROUTE_BASE}/users`">
+          <span>用户管理</span>
-              <el-icon><User /></el-icon>
+        </el-menu-item>
-              <span>用户管理</span>
+        <el-menu-item :index="`${ADMIN_ROUTE_BASE}/events`">
-            </el-menu-item>
+          <el-icon><List /></el-icon>
-          </template>
+          <span>事件记录</span>
-          <el-menu-item :index="`${ADMIN_ROUTE_BASE}/events`">
+        </el-menu-item>
-            <el-icon><List /></el-icon>
-            <span>事件记录</span>
-          </el-menu-item>
-        </template>
       </el-menu>
     </el-aside>
     
@@ -91,11 +87,18 @@ import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { DataLine, List, Expand, Fold, Setting, User, SwitchButton } from '@element-plus/icons-vue'
 import { ADMIN_ROUTE_BASE } from '@/config/api.config'
+import { UserMask, hasPermission } from '@/utils/permission'
 
 const router = useRouter()
 const route = useRoute()
 const userRole = computed(() => localStorage.getItem('userRole'))
-const userInfo = computed(() => JSON.parse(localStorage.getItem('userInfo')))
+const userInfo = computed(() => {
+  try {
+    return JSON.parse(localStorage.getItem('userInfo'))
+  } catch {
+    return null
+  }
+})
 
 const handleLogout = () => {
   localStorage.removeItem('token')

src/router/index.js

@@ -3,6 +3,7 @@ import { ElMessage } from 'element-plus'
 import Layout from '../layout/Layout.vue'
 import { UserAPI } from '../api/user'
 import { ADMIN_ROUTE_BASE } from '@/config/api.config'
+import { UserMask, hasPermission } from '@/utils/permission'
 
 const routes = [
   {
@@ -28,25 +29,33 @@ const routes = [
         path: 'dashboard',
         name: 'Dashboard',
         component: () => import('../views/Dashboard.vue'),
-        meta: { roles: ['admin', 'guest'] }
+        meta: { 
+          minMask: UserMask.Admin  // 管理员及以上权限可访问
+        }
       },
       {
         path: 'tasks',
         name: 'Tasks',
         component: () => import('../views/TaskManagement.vue'),
-        meta: { roles: ['admin'] }
+        meta: { 
+          minMask: UserMask.Admin  // 管理员及以上权限可访问
+        }
       },
       {
         path: 'config',
         name: 'Config',
         component: () => import('../views/ConfigView.vue'),
-        meta: { roles: ['admin'] }
+        meta: { 
+          minMask: UserMask.Admin  // 管理员及以上权限可访问
+        }
       },
       {
         path: 'users',
         name: 'Users',
         component: () => import('../views/UserManagement.vue'),
-        meta: { roles: ['admin'] }
+        meta: { 
+          minMask: UserMask.SuperAdmin  // 仅超级管理员可访问
+        }
       },
       {
         path: 'profile',
@@ -129,31 +138,15 @@ router.beforeEach(async (to, from, next) => {
   if (to.path.startsWith(ADMIN_ROUTE_BASE)) {
     const token = localStorage.getItem('token')
     const isAuthenticated = localStorage.getItem('isAuthenticated')
-    const userRole = localStorage.getItem('userRole')
+    const userInfo = JSON.parse(localStorage.getItem('userInfo'))
     
-    if (!isAuthenticated) {
+    if (!isAuthenticated || !token || !userInfo) {
       next('/login')
       return
     }
 
-    // 如果是管理员但没有用户信息，尝试获取
-    if (userRole === 'admin' && token) {
-      try {
-        const response = await UserAPI.getUserInfo()
-        if (response.retcode !== 0) {
-          localStorage.clear()
-          next('/login')
-          return
-        }
-      } catch (error) {
-        localStorage.clear()
-        next('/login')
-        return
-      }
-    }
-
     // 检查权限
-    if (to.meta.roles && !to.meta.roles.includes(userRole)) {
+    if (to.meta.minMask !== undefined && !hasPermission(to.meta.minMask, userInfo.mask)) {
       ElMessage.error('没有访问权限')
       next('/admin/dashboard')
       return

src/utils/permission.js

@@ -0,0 +1,48 @@
+// 用户权限掩码
+export const UserMask = {
+  Guest: -1,
+  User: 0,
+  Admin: 1,
+  SuperAdmin: 2
+}
+
+// 检查用户是否有权限
+export function hasPermission(requiredMask, userMask) {
+  // 超级管理员拥有所有权限
+  if (userMask === UserMask.SuperAdmin) {
+    return true
+  }
+
+  // 管理员拥有除超级管理员外的所有权限
+  if (userMask === UserMask.Admin && requiredMask !== UserMask.SuperAdmin) {
+    return true
+  }
+
+  // 普通用户只能访问用户级别的功能
+  if (userMask === UserMask.User && requiredMask <= UserMask.User) {
+    return true
+  }
+
+  // 访客只能访问访客功能
+  if (userMask === UserMask.Guest && requiredMask === UserMask.Guest) {
+    return true
+  }
+
+  return false
+}
+
+// 获取用户角色标签
+export function getUserRoleLabel(mask) {
+  switch (mask) {
+    case UserMask.SuperAdmin:
+      return '超级管理员'
+    case UserMask.Admin:
+      return '管理员'
+    case UserMask.User:
+      return '普通用户'
+    case UserMask.Guest:
+      return '访客'
+    default:
+      return '未知'
+  }
+} 

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
@@ -65,6 +59,7 @@ import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { User, Lock } from '@element-plus/icons-vue'
 import { UserAPI } from '../api/user'
+import { UserMask } from '@/utils/permission'
 
 const router = useRouter()
 const loginFormRef = ref(null)
@@ -77,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' },
@@ -86,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
@@ -106,23 +93,31 @@ const handleLogin = async () => {
           username: loginForm.value.username,
           password: loginForm.value.password
         })
-
         if (response.retcode === 0) {
-          // 保存 用户信息
           localStorage.setItem('token', JSON.stringify(response.data))
           localStorage.setItem('isAuthenticated', 'true')
+          localStorage.setItem('userRole', 'admin')
 
           // 获取用户信息
-          const userInfo = await UserAPI.getUserInfo()
+          const userInfoResponse = await UserAPI.getUserInfo()
-          if (userInfo.retcode === 0) {
+          if (userInfoResponse.retcode === 0) {
-            localStorage.setItem('userRole', 'admin')
+            localStorage.setItem('userInfo', JSON.stringify(userInfoResponse.data))
-            localStorage.setItem('userInfo', JSON.stringify(userInfo.data))
+            
+            // 根据用户权限决定跳转页面
+            if (userInfoResponse.data.mask >= UserMask.Admin) {
+              router.push('/admin/dashboard')  // 管理员及以上跳转到概览页
+            } else {
+              router.push('/admin/events')     // 普通用户跳转到事件记录页
+            }
+            
             ElMessage.success('登录成功')
-            router.push('/dashboard')
           }
+        } else {
+          ElMessage.error(response.message || '登录失败')
         }
       } catch (error) {
         console.error('登录失败:', error)
+        ElMessage.error('登录失败，请重试')
       } finally {
         loading.value = false
       }
@@ -154,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 {
@@ -192,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
       }