fix: 修复登录/注册页面标签对齐问题

web/src/views/Auth/Login.vue

@@ -24,21 +24,24 @@
         />
       </el-form-item>
 
-      <el-form-item>
+      <el-form-item style="position: relative; grid-template-columns: 1fr; margin-top: 60px;">
-        <el-button 
+        <div style="position: absolute; right: 0; display: flex; flex-direction: column; gap: 12px;">
-          type="primary" 
+          <el-button 
-          @click="handleLogin"
+            type="primary" 
-          :loading="loading"
+            @click="handleLogin"
-        >
+            :loading="loading"
-          登录
+            style="width: auto;"
-        </el-button>
+          >
-        <el-button 
+            登录
-          link
+          </el-button>
-          @click="$router.push('/register')"
+          <el-button 
-          style="margin-left: 10px"
+            link
-        >
+            @click="$router.push('/register')"
-          注册
+            style="margin-top: 10px;"
-        </el-button>
+          >
+            注册
+          </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)
+    console.log('登录成功:', res)
-    setToken(res.access_token) // 存储token
+    
-    setupTokenRefresh() // 启动token自动续期
+    // 确保token存储完成后再跳转
-    console.log('存储的token:', getToken()) // 验证token是否存储成功
+    const token = res.access_token || res.token
-    // 使用router.push确保Vue路由正确处理跳转
+    setToken(token)
-    router.push('/dashboard')
+    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>

web/src/views/Auth/Register.vue

@@ -41,21 +41,24 @@
         />
       </el-form-item>
 
-      <el-form-item>
+      <el-form-item style="position: relative; grid-template-columns: 1fr; margin-top: 60px;">
-        <el-button 
+        <div style="position: absolute; right: 0; display: flex; flex-direction: column; gap: 12px;">
-          type="primary" 
+          <el-button 
-          @click="handleRegister"
+            type="primary" 
-          :loading="loading"
+            @click="handleRegister"
-        >
+            :loading="loading"
-          注册
+            style="width: auto;"
-        </el-button>
+          >
-        <el-button 
+            注册
-          link
+          </el-button>
-          @click="$router.push('/login')"
+          <el-button 
-          style="margin-left: 10px"
+            link
-        >
+            @click="$router.push('/login')"
-          已有账号，去登录
+            style="margin-top: 10px;"
-        </el-button>
+          >
+            已有账号，去登录
+          </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>