From 18b65d4635094e36a22f62fb7dfe4a6be4b457a8 Mon Sep 17 00:00:00 2001
From: Stev_Wang <304865932@qq.com>
Date: Tue, 23 Dec 2025 09:51:26 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=93=8C=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/admin/Login.vue  | 358 ++++++++++++++-------------
 frontend/src/views/player/Login.vue | 366 +++++++++++++++-------------
 2 files changed, 392 insertions(+), 332 deletions(-)

diff --git a/frontend/src/views/admin/Login.vue b/frontend/src/views/admin/Login.vue
index 6eb4588..83d3b5d 100644
--- a/frontend/src/views/admin/Login.vue
+++ b/frontend/src/views/admin/Login.vue
@@ -1,165 +1,195 @@
-<template>
-  <div class="login-container">
-    <div class="login-form">
-      <div class="login-header">
-        <h2>运营管理系统</h2>
-        <p>欢迎登录游戏运营平台后台</p>
-      </div>
-      
-      <el-form
-        ref="loginFormRef"
-        :model="loginForm"
-        :rules="loginRules"
-        label-position="top"
-      >
-        <el-form-item label="管理员账号" prop="username">
-          <el-input
-              v-model="loginForm.username"
-              placeholder="请输入管理员账号"
-              size="large"
-              :prefix-icon="RiAdminLine"
-            />
-        </el-form-item>
-        
-        <el-form-item label="密码" prop="password">
-          <el-input
-              v-model="loginForm.password"
-              type="password"
-              placeholder="请输入管理员密码"
-              show-password
-              size="large"
-              :prefix-icon="RiLockLine"
-            />
-        </el-form-item>
-        
-        <el-form-item>
-          <el-button
-            type="primary"
-            :loading="loading"
-            @click="handleLogin"
-            size="large"
-            block
-          >
-            登录
-          </el-button>
-        </el-form-item>
-        
-        <div class="login-footer">
-          <el-link type="primary" :underline="false">忘记密码？</el-link>
-          <el-link type="primary" :underline="false">联系管理员</el-link>
-        </div>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { ElMessage } from 'element-plus'
-import { useRouter } from 'vue-router'
-import { useUserStore } from '@/store/user'
-import type { LoginForm } from '@/types/auth'
-// 导入Remix Icon组件
-import { RiAdminLine, RiLockLine } from '@remixicon/vue'
-
-const router = useRouter()
-const userStore = useUserStore()
-
-// 登录表单引用
-const loginFormRef = ref()
-
-// 加载状态
-const loading = ref(false)
-
-// 登录表单
-const loginForm = reactive<LoginForm>({
-  username: '',
-  password: ''
-})
-
-// 表单验证规则
-const loginRules = {
-  username: [
-    { required: true, message: '请输入管理员账号', trigger: 'blur' },
-    { min: 3, max: 20, message: '账号长度在 3 到 20 个字符', trigger: 'blur' }
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
-  ]
-}
-
-// 处理登录
-const handleLogin = async () => {
-  // 表单验证
-  if (!loginFormRef.value) return
-  
-  try {
-    await loginFormRef.value.validate()
-    loading.value = true
-    
-    // 调用userStore的登录方法
-    await userStore.login(loginForm)
-    
-    // 检查是否为管理员
-    if (!userStore.isAdmin) {
-      throw new Error('您不是管理员，无法登录运营管理系统')
-    }
-    
-    ElMessage.success('登录成功')
-    
-    // 跳转到管理员首页
-    router.push('/admin')
-  } catch (error: any) {
-    ElMessage.error(error?.message || '登录失败，请稍后重试')
-    console.error('登录失败:', error)
-  } finally {
-    loading.value = false
-  }
-}
-</script>
-
-<style scoped>
-.login-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background: linear-gradient(135deg, #1890ff 0%, #52c41a 100%);
-  padding: 20px;
-}
-
-.login-form {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-  padding: 40px;
-  width: 100%;
-  max-width: 400px;
-}
-
-.login-header {
-  text-align: center;
-  margin-bottom: 30px;
-}
-
-.login-header h2 {
-  font-size: 24px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 8px;
-}
-
-.login-header p {
-  font-size: 14px;
-  color: #666;
-}
-
-.login-footer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-}
-
-/* 输入框图标样式已通过Element Plus的prefix-icon属性自动处理 */
+<template>
+  <div class="login-container">
+    <div class="login-form">
+      <div class="login-header">
+        <h2>运营管理系统</h2>
+        <p>欢迎登录游戏运营平台后台</p>
+      </div>
+      
+      <el-form
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="loginRules"
+        label-position="left"
+        label-width="80px"
+        class="login-form-inner"
+      >
+        <el-form-item label="管理员账号" prop="username">
+          <el-input
+              v-model="loginForm.username"
+              placeholder="请输入管理员账号"
+              size="large"
+              :prefix-icon="RiAdminLine"
+            />
+        </el-form-item>
+        
+        <el-form-item label="密码" prop="password">
+          <el-input
+              v-model="loginForm.password"
+              type="password"
+              placeholder="请输入管理员账号密码"
+              show-password
+              size="large"
+              :prefix-icon="RiLockLine"
+            />
+        </el-form-item>
+        
+        <el-form-item class="login-button-item">
+          <el-button
+            type="primary"
+            :loading="loading"
+            @click="handleLogin"
+            size="large"
+            class="login-button"
+          >
+            登录
+          </el-button>
+        </el-form-item>
+        
+        <div class="login-footer">
+          <el-link type="primary" :underline="false">忘记密码？</el-link>
+          <el-link type="primary" :underline="false">联系管理员</el-link>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/store/user'
+import type { LoginForm } from '@/types/auth'
+// 导入Remix Icon组件
+import { RiAdminLine, RiLockLine } from '@remixicon/vue'
+
+const router = useRouter()
+const userStore = useUserStore()
+
+// 登录表单引用
+const loginFormRef = ref()
+
+// 加载状态
+const loading = ref(false)
+
+// 登录表单
+const loginForm = reactive<LoginForm>({
+  username: '',
+  password: ''
+})
+
+// 表单验证规则
+const loginRules = {
+  username: [
+    { required: true, message: '请输入管理员账号', trigger: 'blur' },
+    { min: 3, max: 20, message: '账号长度在 3 到 20 个字符', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
+  ]
+}
+
+// 处理登录
+const handleLogin = async () => {
+  // 表单验证
+  if (!loginFormRef.value) return
+  
+  try {
+    await loginFormRef.value.validate()
+    loading.value = true
+    
+    // 调用userStore的登录方法
+    await userStore.login(loginForm)
+    
+    // 检查是否为管理员
+    if (!userStore.isAdmin) {
+      throw new Error('您不是管理员，无法登录运营管理系统')
+    }
+    
+    ElMessage.success('登录成功')
+    
+    // 跳转到管理员首页
+    router.push('/admin')
+  } catch (error: any) {
+    ElMessage.error(error?.message || '登录失败，请稍后重试')
+    console.error('登录失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #1890ff 0%, #52c41a 100%);
+  padding: 20px;
+}
+
+.login-form {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  width: 100%;
+  max-width: 400px;
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.login-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.login-header p {
+  font-size: 14px;
+  color: #666;
+}
+
+.login-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+/* 输入框图标样式已通过Element Plus的prefix-icon属性自动处理 */
+
+/* 修复label和输入框水平居中对齐问题 */
+.login-form-inner :deep(.el-form-item__label) {
+  display: flex;
+  align-items: center;
+  height: 40px; /* 与输入框高度一致 */
+  line-height: normal;
+}
+
+.login-form-inner :deep(.el-form-item__content) {
+  display: flex;
+  align-items: center;
+}
+
+/* 登录按钮样式 */
+.login-button-item {
+  margin-left: -80px; /* 抵消label宽度，使按钮在整个表单中居中 */
+}
+
+.login-button-item :deep(.el-form-item__content) {
+  justify-content: center; /* 水平居中 */
+  margin-left: 80px; /* 重新添加左边距，使按钮内容居中 */
+}
+
+.login-button {
+  width: 100%; /* 按钮宽度占满容器 */
+  max-width: 280px; /* 最大宽度限制 */
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/player/Login.vue b/frontend/src/views/player/Login.vue
index 116b128..9cc46a2 100644
--- a/frontend/src/views/player/Login.vue
+++ b/frontend/src/views/player/Login.vue
@@ -1,169 +1,199 @@
-<template>
-  <div class="login-container">
-    <div class="login-form">
-      <div class="login-header">
-        <h2>一梦西游玩家服务中心</h2>
-        <p>欢迎登录一梦西游一站式玩家服务中心</p>
-      </div>
-      
-      <el-form
-        ref="loginFormRef"
-        :model="loginForm"
-        :rules="loginRules"
-        label-position="top"
-      >
-        <el-form-item label="游戏账号" prop="username">
-          <el-input
-            v-model="loginForm.username"
-            placeholder="请输入游戏账号"
-            size="large"
-            :prefix-icon="RiUserLine"
-          />
-        
-        </el-form-item>
-        
-        <el-form-item label="密码" prop="password">
-          <el-input
-            v-model="loginForm.password"
-            type="password"
-            placeholder="请输入游戏密码"
-            size="large"
-            show-password
-            :prefix-icon="RiLockLine"
-          />
-        
-        </el-form-item>
-        
-        <el-form-item>
-          <el-button
-            type="primary"
-            :loading="loading"
-            @click="handleLogin"
-            size="large"
-            block
-          >
-            登录
-          </el-button>
-        </el-form-item>
-        
-        <div class="login-footer">
-          <el-link type="primary" :underline="false">忘记密码？</el-link>
-          <el-link type="primary" :underline="false">注册账号</el-link>
-        </div>
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { ElMessage } from 'element-plus'
-import { useRouter } from 'vue-router'
-import { playerLogin } from '@/api/auth'
-import type { LoginForm } from '@/types/auth'
-
-// 导入Remix Icon组件
-import { RiUserLine, RiLockLine } from '@remixicon/vue'
-
-const router = useRouter()
-
-
-// 登录表单引用
-const loginFormRef = ref()
-
-// 加载状态
-const loading = ref(false)
-
-// 登录表单
-const loginForm = reactive<LoginForm>({
-  username: '',
-  password: ''
-})
-
-// 表单验证规则
-const loginRules = {
-  username: [
-    { required: true, message: '请输入用户名', trigger: 'blur' },
-    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
-  ]
-}
-
-// 处理登录
-const handleLogin = async () => {
-  // 表单验证
-  if (!loginFormRef.value) return
-  
-  try {
-    await loginFormRef.value.validate()
-    loading.value = true
-    
-    // 调用游戏服务端API登录（API层会自动处理存储）
-    const response = await playerLogin(loginForm)
-    
-    // 检查响应是否成功（游戏服务端返回code=200表示成功）
-    if (response?.code === 200 && response?.success === true) {
-      ElMessage.success('登录成功')
-      
-      // 跳转到玩家首页
-      router.push('/player')
-    } else {
-      throw new Error(response?.message || '登录失败，请稍后重试')
-    }
-  } catch (error: any) {
-    ElMessage.error(error?.message || '登录失败，请稍后重试')
-    console.error('登录失败:', error)
-    console.log('详细错误信息:', JSON.stringify(error, null, 2))
-  } finally {
-    loading.value = false
-  }
-}
-</script>
-
-<style scoped>
-.login-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 20px;
-}
-
-.login-form {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-  padding: 40px;
-  width: 100%;
-  max-width: 400px;
-}
-
-.login-header {
-  text-align: center;
-  margin-bottom: 30px;
-}
-
-.login-header h2 {
-  font-size: 24px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 8px;
-}
-
-.login-header p {
-  font-size: 14px;
-  color: #666;
-}
-
-.login-footer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-}
-
-/* 输入框图标样式已通过Element Plus的prefix-icon属性自动处理 */
+<template>
+  <div class="login-container">
+    <div class="login-form">
+      <div class="login-header">
+        <h2>一梦西游玩家服务中心</h2>
+        <p>欢迎登录一梦西游一站式玩家服务中心</p>
+      </div>
+      
+      <el-form
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="loginRules"
+        label-position="left"
+        label-width="80px"
+        class="login-form-inner"
+      >
+        <el-form-item label="游戏账号" prop="username">
+          <el-input
+            v-model="loginForm.username"
+            placeholder="请输入游戏账号"
+            size="large"
+            :prefix-icon="RiUserLine"
+          />
+        
+        </el-form-item>
+        
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            placeholder="请输入游戏账号密码"
+            size="large"
+            show-password
+            :prefix-icon="RiLockLine"
+          />
+        
+        </el-form-item>
+        
+        <el-form-item class="login-button-item">
+          <el-button
+            type="primary"
+            :loading="loading"
+            @click="handleLogin"
+            size="large"
+            class="login-button"
+          >
+            登录
+          </el-button>
+        </el-form-item>
+        
+        <div class="login-footer">
+          <el-link type="primary" :underline="false">忘记密码？</el-link>
+          <el-link type="primary" :underline="false">注册游戏账号</el-link>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { playerLogin } from '@/api/auth'
+import type { LoginForm } from '@/types/auth'
+
+// 导入Remix Icon组件
+import { RiUserLine, RiLockLine } from '@remixicon/vue'
+
+const router = useRouter()
+
+
+// 登录表单引用
+const loginFormRef = ref()
+
+// 加载状态
+const loading = ref(false)
+
+// 登录表单
+const loginForm = reactive<LoginForm>({
+  username: '',
+  password: ''
+})
+
+// 表单验证规则
+const loginRules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
+  ]
+}
+
+// 处理登录
+const handleLogin = async () => {
+  // 表单验证
+  if (!loginFormRef.value) return
+  
+  try {
+    await loginFormRef.value.validate()
+    loading.value = true
+    
+    // 调用游戏服务端API登录（API层会自动处理存储）
+    const response = await playerLogin(loginForm)
+    
+    // 检查响应是否成功（游戏服务端返回code=200表示成功）
+    if (response?.code === 200 && response?.success === true) {
+      ElMessage.success('登录成功')
+      
+      // 跳转到玩家首页
+      router.push('/player')
+    } else {
+      throw new Error(response?.message || '登录失败，请稍后重试')
+    }
+  } catch (error: any) {
+    ElMessage.error(error?.message || '登录失败，请稍后重试')
+    console.error('登录失败:', error)
+    console.log('详细错误信息:', JSON.stringify(error, null, 2))
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+}
+
+.login-form {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  width: 100%;
+  max-width: 400px;
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.login-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.login-header p {
+  font-size: 14px;
+  color: #666;
+}
+
+.login-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+/* 输入框图标样式已通过Element Plus的prefix-icon属性自动处理 */
+
+/* 修复label和输入框水平居中对齐问题 */
+.login-form-inner :deep(.el-form-item__label) {
+  display: flex;
+  align-items: center;
+  height: 40px; /* 与输入框高度一致 */
+  line-height: normal;
+}
+
+.login-form-inner :deep(.el-form-item__content) {
+  display: flex;
+  align-items: center;
+}
+
+/* 登录按钮样式 */
+.login-button-item {
+  margin-left: -80px; /* 抵消label宽度，使按钮在整个表单中居中 */
+}
+
+.login-button-item :deep(.el-form-item__content) {
+  justify-content: center; /* 水平居中 */
+  margin-left: 80px; /* 重新添加左边距，使按钮内容居中 */
+}
+
+.login-button {
+  width: 100%; /* 按钮宽度占满容器 */
+  max-width: 280px; /* 最大宽度限制 */
+}
 </style>
\ No newline at end of file