From 1a60bf94b49a22b455a9a9e9937b901cfe07c655 Mon Sep 17 00:00:00 2001
From: Xin <xin@example.com>
Date: Sat, 3 May 2025 22:18:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=99=BB=E5=BD=95/?=
 =?UTF-8?q?=E6=B3=A8=E5=86=8C=E9=A1=B5=E9=9D=A2=E6=A0=87=E7=AD=BE=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/Auth/Login.vue    | 108 +++++++++++++++++++++++++-------
 web/src/views/Auth/Register.vue | 106 ++++++++++++++++++++++++++-----
 2 files changed, 175 insertions(+), 39 deletions(-)

diff --git a/web/src/views/Auth/Login.vue b/web/src/views/Auth/Login.vue
index 0db9a31..aab476b 100644
--- a/web/src/views/Auth/Login.vue
+++ b/web/src/views/Auth/Login.vue
@@ -24,21 +24,24 @@
         />
       </el-form-item>
 
-      <el-form-item>
-        <el-button 
-          type="primary" 
-          @click="handleLogin"
-          :loading="loading"
-        >
-          登录
-        </el-button>
-        <el-button 
-          link
-          @click="$router.push('/register')"
-          style="margin-left: 10px"
-        >
-          注册
-        </el-button>
+      <el-form-item style="position: relative; grid-template-columns: 1fr; margin-top: 60px;">
+        <div style="position: absolute; right: 0; display: flex; flex-direction: column; gap: 12px;">
+          <el-button 
+            type="primary" 
+            @click="handleLogin"
+            :loading="loading"
+            style="width: auto;"
+          >
+            登录
+          </el-button>
+          <el-button 
+            link
+            @click="$router.push('/register')"
+            style="margin-top: 10px;"
+          >
+            注册
+          </el-button>
+        </div>
       </el-form-item>
     </el-form>
   </div>
@@ -51,6 +54,7 @@ import { encryptPassword } from '../../utils/encrypt'
 import { setupTokenRefresh } from '../../utils/auth'
 import { setToken, getToken } from '../../utils/storage'
 import { useRouter } from 'vue-router'
+import { useUserStore } from '@/store/modules/user'
 import type { LoginParams, LoginFormData } from '@/api/auth/types'
 
 const router = useRouter()
@@ -78,12 +82,20 @@ const handleLogin = async () => {
     formData.append('password', encryptedPassword)
     
     const res = await login(formData as LoginFormData)
-    console.log('登录成功:', res.access_token)
-    setToken(res.access_token) // 存储token
-    setupTokenRefresh() // 启动token自动续期
-    console.log('存储的token:', getToken()) // 验证token是否存储成功
-    // 使用router.push确保Vue路由正确处理跳转
-    router.push('/dashboard')
+    console.log('登录成功:', res)
+    
+    // 确保token存储完成后再跳转
+    const token = res.access_token || res.token
+    setToken(token)
+    localStorage.setItem('token', token)
+    setupTokenRefresh()
+    
+    // 等待用户信息加载完成
+    const userStore = useUserStore()
+    await userStore.getUserInfo()
+    
+    console.log('存储的token:', getToken(), 'localStorage:', localStorage.getItem('token'))
+    await router.push('/dashboard')
   } finally {
     loading.value = false
   }
@@ -93,9 +105,61 @@ const handleLogin = async () => {
 <style scoped>
 .login-container {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  background-color: #f5f7fa;
+}
+
+.el-form {
+  width: 400px;
+  padding: 40px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.el-form-item {
+  margin-bottom: 24px;
+}
+
+.el-form-item {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  align-items: start;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.el-form-item__content {
+  margin-left: 0 !important;
+}
+
+.el-form-item__label {
+  width: 100px !important;
+  text-align: left !important;
+  padding: 0 12px 0 0 !important;
+  margin: 0 !important;
+  display: block !important;
+  box-sizing: border-box;
+  justify-content: flex-start !important;
+  height: auto !important;
+  line-height: normal !important;
+}
+
+.el-form-item__content {
+  flex: 1;
+  margin-left: 0 !important;
+  min-width: 0;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.el-button--primary {
+  width: 100%;
+  margin-top: 10px;
 }
 </style>
diff --git a/web/src/views/Auth/Register.vue b/web/src/views/Auth/Register.vue
index eb08014..f75945c 100644
--- a/web/src/views/Auth/Register.vue
+++ b/web/src/views/Auth/Register.vue
@@ -41,21 +41,24 @@
         />
       </el-form-item>
 
-      <el-form-item>
-        <el-button 
-          type="primary" 
-          @click="handleRegister"
-          :loading="loading"
-        >
-          注册
-        </el-button>
-        <el-button 
-          link
-          @click="$router.push('/login')"
-          style="margin-left: 10px"
-        >
-          已有账号，去登录
-        </el-button>
+      <el-form-item style="position: relative; grid-template-columns: 1fr; margin-top: 60px;">
+        <div style="position: absolute; right: 0; display: flex; flex-direction: column; gap: 12px;">
+          <el-button 
+            type="primary" 
+            @click="handleRegister"
+            :loading="loading"
+            style="width: auto;"
+          >
+            注册
+          </el-button>
+          <el-button 
+            link
+            @click="$router.push('/login')"
+            style="margin-top: 10px;"
+          >
+            已有账号，去登录
+          </el-button>
+        </div>
       </el-form-item>
     </el-form>
   </div>
@@ -65,6 +68,8 @@
 import { ref } from 'vue'
 import { register } from '@/api/auth'
 import { encryptPassword } from '@/utils/encrypt'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
 import type { RegisterParams, RegisterFormData } from '@/api/auth/types'
 
 const registerForm = ref<RegisterParams>({
@@ -100,6 +105,7 @@ const registerRules = {
   ],
 }
 
+const router = useRouter()
 const loading = ref(false)
 const registerFormRef = ref()
 
@@ -115,7 +121,8 @@ const handleRegister = async () => {
     
     const res = await register(formData)
     console.log('注册成功:', res.user_id)
-    // 跳转到登录页或其他处理
+    ElMessage.success('注册成功')
+    await router.push('/login')
   } finally {
     loading.value = false
   }
@@ -125,9 +132,74 @@ const handleRegister = async () => {
 <style scoped>
 .register-container {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  background-color: #f5f7fa;
+}
+
+.el-form {
+  width: 400px;
+  padding: 40px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.el-form-item {
+  margin-bottom: 24px;
+}
+
+.el-form-item {
+  display: grid;
+  grid-template-columns: 100px 1fr;
+  align-items: start;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.el-form-item__label {
+  width: 100px;
+  text-align: justify;
+  text-align-last: justify;
+  padding-right: 12px;
+  flex-shrink: 0;
+}
+
+.el-form-item__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.el-form-item__label {
+  width: 100px !important;
+  text-align: left !important;
+  padding: 0 12px 0 0 !important;
+  margin: 0 !important;
+  display: block !important;
+  box-sizing: border-box;
+  justify-content: flex-start !important;
+  height: auto !important;
+  line-height: normal !important;
+}
+
+.el-form-item__content {
+  flex: 1;
+  margin-left: 0 !important;
+  min-width: 0;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.el-button--primary {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.el-button--link {
+  margin-left: 10px;
 }
 </style>