瀏覽代碼

fix:修复有多个登录注册页面的问题,统一为一个页面

yangyi 4 月之前
父節點
當前提交
3ed7dc6e09
共有 5 個文件被更改,包括 47 次插入 和 244 次删除
  1. 2 2
      src/layout/AdminLayout.vue
  2. 1 1
      src/layout/UserLayout.vue
  3. 44 23
      src/view/Login.vue
  4. 0 123
      src/view/Register.vue
  5. 0 95
      src/view/admin/Login.vue

+ 2 - 2
src/layout/AdminLayout.vue

@@ -49,7 +49,7 @@
             </el-dropdown>
           </template>
           <template v-else>
-            <el-button type="primary" size="small" @click="router.push('/admin/login')">登录</el-button>
+            <el-button type="primary" size="small" @click="router.push('/login')">登录</el-button>
           </template>
         </div>
       </el-header>
@@ -78,7 +78,7 @@ const isCollapse = ref(false)
 
 const logoutHandler = () => {
   userStore.logout()
-  router.push('/admin/login')
+  router.push('/login')
 }
 </script>
 

+ 1 - 1
src/layout/UserLayout.vue

@@ -36,7 +36,7 @@
           </template>
           <template v-else>
             <el-button plain size="small" @click="router.push('/login')" class="header-btn">登录</el-button>
-            <el-button plain size="small" @click="router.push('/register')" class="header-btn">注册</el-button>
+            <el-button plain size="small" @click="router.push('/login')" class="header-btn">注册</el-button>
           </template>
         </div>
       </el-header>

+ 44 - 23
src/view/Login.vue

@@ -67,18 +67,18 @@
               class="auth-form"
               @submit.prevent="handleRegister"
             >
-              <el-form-item prop="account">
+              <el-form-item prop="studentId">
                 <el-input
-                  v-model="registerForm.account"
-                  placeholder="请输入账号"
+                  v-model="registerForm.studentId"
+                  placeholder="请输入学号"
                   :prefix-icon="User"
                   size="large"
                 />
               </el-form-item>
-              <el-form-item prop="username">
+              <el-form-item prop="name">
                 <el-input
-                  v-model="registerForm.username"
-                  placeholder="请输入用户名"
+                  v-model="registerForm.name"
+                  placeholder="请输入真实姓名"
                   :prefix-icon="User"
                   size="large"
                 />
@@ -103,6 +103,17 @@
                   size="large"
                 />
               </el-form-item>
+              <el-form-item label="校园卡">
+                <el-upload
+                  v-model:file-list="cardFileList"
+                  :auto-upload="false"
+                  list-type="picture-card"
+                  :limit="1"
+                  :on-preview="handlePreview"
+                >
+                  <el-icon><Plus /></el-icon>
+                </el-upload>
+              </el-form-item>
               <el-form-item>
                 <el-button
                   type="primary"
@@ -126,8 +137,8 @@
 import { reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { User, Lock, ArrowLeft } from '@element-plus/icons-vue'
-import type { FormInstance, FormRules } from 'element-plus'
+import { User, Lock, ArrowLeft, Plus } from '@element-plus/icons-vue'
+import type { FormInstance, FormRules, UploadFile } from 'element-plus'
 import { getAuth } from '../api/endpoints/auth'
 import { useUserStore } from '../store'
 
@@ -148,12 +159,14 @@ const loginForm = reactive({
 })
 
 const registerForm = reactive({
-  account: '',
-  username: '',
+  studentId: '',
+  name: '',
   password: '',
   confirmPassword: ''
 })
 
+const cardFileList = ref<UploadFile[]>([])
+
 const validateConfirmPassword = (_rule: any, value: string, callback: any) => {
   if (value !== registerForm.password) {
     callback(new Error('两次输入密码不一致'))
@@ -171,13 +184,13 @@ const loginRules = reactive<FormRules>({
 })
 
 const registerRules = reactive<FormRules>({
-  account: [
-    { required: true, message: '请输入账号', trigger: 'blur' },
-    { min: 4, max: 20, message: '账号长度4-20个字符', trigger: 'blur' }
+  studentId: [
+    { required: true, message: '请输入学号', trigger: 'blur' },
+    { min: 4, max: 20, message: '学号长度4-20个字符', trigger: 'blur' }
   ],
-  username: [
-    { required: true, message: '请输入用户名', trigger: 'blur' },
-    { min: 2, max: 32, message: '用户名长度2-32个字符', trigger: 'blur' }
+  name: [
+    { required: true, message: '请输入真实姓名', trigger: 'blur' },
+    { min: 2, max: 32, message: '姓名长度2-32个字符', trigger: 'blur' }
   ],
   password: [
     { required: true, message: '请输入密码', trigger: 'blur' },
@@ -203,15 +216,17 @@ const handleLogin = async () => {
 
     if (res.code === 200) {
       const data = res.data!
+      const role = data.role || 'USER'
       userStore.login({
         id: data.id ?? 0,
         nickname: data.nickname || data.name || '用户',
         avatarUrl: data.avatarUrl ?? '',
-        role: data.role || 'USER',
-        authStatus: data.authStatus || (data.role === 'ADMIN' ? 'AUTHENTICATED' : 'UNAUTHENTICATED'),
+        role,
+        authStatus: data.authStatus || (role === 'ADMIN' ? 'AUTHENTICATED' : 'UNAUTHENTICATED'),
       })
       ElMessage.success('登录成功')
-      router.push((route.query.redirect as string) || '/')
+      const redirect = (route.query.redirect as string) || '/'
+      router.push(redirect)
     } else {
       ElMessage.error(res.message || '登录失败')
     }
@@ -222,6 +237,10 @@ const handleLogin = async () => {
   }
 }
 
+const handlePreview = (file: UploadFile) => {
+  if (file.url) window.open(file.url)
+}
+
 const handleRegister = async () => {
   const valid = await registerFormRef.value?.validate().catch(() => false)
   if (!valid) return
@@ -230,18 +249,20 @@ const handleRegister = async () => {
   try {
     const authApi = getAuth()
     const res = await authApi.register({
-      studentId: registerForm.account,
-      name: registerForm.username,
+      studentId: registerForm.studentId,
+      name: registerForm.name,
       password: registerForm.password,
+      campusCardImage: cardFileList.value[0]?.raw,
     })
 
     if (res.code === 200) {
       ElMessage.success('注册成功,请登录')
       activeTab.value = 'login'
-      registerForm.account = ''
-      registerForm.username = ''
+      registerForm.studentId = ''
+      registerForm.name = ''
       registerForm.password = ''
       registerForm.confirmPassword = ''
+      cardFileList.value = []
     } else {
       ElMessage.error(res.message || '注册失败')
     }

+ 0 - 123
src/view/Register.vue

@@ -1,123 +0,0 @@
-<template>
-  <div class="register-page">
-    <el-card class="register-card">
-      <h1 class="register-title">注册</h1>
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" @submit.prevent="handleRegister">
-        <el-form-item label="学号" prop="studentId">
-          <el-input v-model="form.studentId" placeholder="请输入学号" />
-        </el-form-item>
-        <el-form-item label="姓名" prop="name">
-          <el-input v-model="form.name" placeholder="请输入真实姓名" />
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="form.password" type="password" show-password placeholder="请输入密码" />
-        </el-form-item>
-        <el-form-item label="确认密码" prop="confirmPassword">
-          <el-input v-model="form.confirmPassword" type="password" show-password placeholder="请再次输入密码" />
-        </el-form-item>
-        <el-form-item label="校园卡">
-          <el-upload
-            v-model:file-list="cardFileList"
-            :auto-upload="false"
-            list-type="picture-card"
-            :limit="1"
-            :on-preview="handlePreview"
-          >
-            <el-icon><Plus /></el-icon>
-          </el-upload>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" :loading="submitting" size="large" native-type="submit">
-            注册
-          </el-button>
-          <el-button size="large" @click="router.push('/login')">返回登录</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import type { FormInstance, FormRules, UploadFile } from 'element-plus'
-import { getAuth } from '../api/endpoints/auth'
-
-const router = useRouter()
-const formRef = ref<FormInstance>()
-const submitting = ref(false)
-const cardFileList = ref<UploadFile[]>([])
-
-const form = reactive({
-  studentId: '',
-  name: '',
-  password: '',
-  confirmPassword: '',
-})
-
-const rules: FormRules = {
-  studentId: [{ required: true, message: '请输入学号', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 4, message: '密码长度至少4位', trigger: 'blur' },
-  ],
-  confirmPassword: [
-    { required: true, message: '请确认密码', trigger: 'blur' },
-    { validator: (_rule: unknown, value: string, cb: (err?: Error) => void) => {
-      value !== form.password ? cb(new Error('两次输入的密码不一致')) : cb()
-    }, trigger: 'blur' },
-  ],
-}
-
-const handlePreview = (file: UploadFile) => {
-  if (file.url) window.open(file.url)
-}
-
-const handleRegister = async () => {
-  const valid = await formRef.value?.validate().catch(() => false)
-  if (!valid) return
-
-  submitting.value = true
-  try {
-    const res = await getAuth().register({
-      studentId: form.studentId,
-      name: form.name,
-      password: form.password,
-      campusCardImage: cardFileList.value[0]?.raw,
-    })
-    if (res.code === 200) {
-      ElMessage.success('注册成功,等待实名审核')
-      router.push('/login')
-    }
-  } catch (err: unknown) {
-    if (err && typeof err === 'object' && 'message' in err) {
-      ElMessage.error((err as { message: string }).message)
-    }
-  } finally {
-    submitting.value = false
-  }
-}
-</script>
-
-<style scoped>
-.register-page {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background: linear-gradient(135deg, #e8edf9 0%, #d4def5 50%, #c1cef0 100%);
-}
-.register-card {
-  width: 480px;
-  padding: 20px;
-}
-.register-title {
-  text-align: center;
-  margin-bottom: 24px;
-  font-size: 24px;
-  color: #0f2a73;
-}
-</style>

+ 0 - 95
src/view/admin/Login.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="admin-login-page">
-    <el-card class="login-card">
-      <h1 class="login-title">管理员登录</h1>
-      <el-form ref="formRef" :model="form" :rules="rules" @submit.prevent="handleLogin">
-        <el-form-item prop="studentId">
-          <el-input v-model="form.studentId" placeholder="学号" :prefix-icon="User" size="large" />
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input v-model="form.password" type="password" show-password placeholder="密码" :prefix-icon="Lock" size="large" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" :loading="loading" size="large" native-type="submit" class="login-btn">
-            登录
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
-import { User, Lock } from '@element-plus/icons-vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import { getAuth } from '../../api/endpoints/auth'
-import { useUserStore } from '../../store'
-
-const router = useRouter()
-const formRef = ref<FormInstance>()
-const loading = ref(false)
-const userStore = useUserStore()
-
-const form = reactive({
-  studentId: '',
-  password: '',
-})
-
-const rules: FormRules = {
-  studentId: [{ required: true, message: '请输入学号', trigger: 'blur' }],
-  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
-}
-
-const handleLogin = async () => {
-  const valid = await formRef.value?.validate().catch(() => false)
-  if (!valid) return
-
-  loading.value = true
-  try {
-    const res = await getAuth().login({ studentId: form.studentId, password: form.password })
-    if (res.code === 200 && res.data) {
-      userStore.login({
-        id: res.data.id ?? 0,
-        nickname: res.data.nickname || res.data.name || '管理员',
-        avatarUrl: res.data.avatarUrl ?? '',
-        role: res.data.role || 'ADMIN',
-        authStatus: res.data.authStatus || 'AUTHENTICATED',
-      })
-      ElMessage.success('登录成功')
-      router.push('/admin/review/user')
-    }
-  } catch (err: unknown) {
-    if (err && typeof err === 'object' && 'message' in err) {
-      ElMessage.error((err as { message: string }).message)
-    }
-  } finally {
-    loading.value = false
-  }
-}
-</script>
-
-<style scoped>
-.admin-login-page {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background: #304156;
-}
-.login-card {
-  width: 400px;
-  padding: 20px;
-}
-.login-title {
-  text-align: center;
-  margin-bottom: 24px;
-  font-size: 22px;
-  color: #303133;
-}
-.login-btn {
-  width: 100%;
-}
-</style>