From 30ee117c1a973a6c4d5319e00d1fdeba7c078138 Mon Sep 17 00:00:00 2001
From: Stev_Wang <304865932@qq.com>
Date: Mon, 5 Jan 2026 17:44:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AE=8C=E5=96=84=E7=8E=A9?=
 =?UTF-8?q?=E5=AE=B6=E6=9C=8D=E5=8A=A1=E4=B8=AD=E5=BF=83=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E9=A1=B5=E5=92=8C=E8=BF=90=E8=90=A5=E7=AE=A1=E7=90=86=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E5=90=8E=E5=8F=B0=E7=99=BB=E5=BD=95=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/admin/Login.vue  | 468 +++++++++++++++++++++++++---
 frontend/src/views/player/Login.vue |   4 +-
 2 files changed, 432 insertions(+), 40 deletions(-)

diff --git a/frontend/src/views/admin/Login.vue b/frontend/src/views/admin/Login.vue
index a72b41b..401ec67 100644
--- a/frontend/src/views/admin/Login.vue
+++ b/frontend/src/views/admin/Login.vue
@@ -1,44 +1,107 @@
 <template>
-  <div class="login-container">
-    <n-card title="管理员登录" style="width: 400px;">
-      <n-form ref="formRef" :model="formValue" :rules="rules" size="large">
-        <n-form-item path="username" label="用户名">
-          <n-input v-model:value="formValue.username" placeholder="请输入用户名" />
-        </n-form-item>
-        <n-form-item path="password" label="密码">
-          <n-input
-            v-model:value="formValue.password"
-            type="password"
-            show-password-on="click"
-            placeholder="请输入密码"
-          />
-        </n-form-item>
-        <n-form-item v-if="captchaEnabled" path="captchaCode" label="验证码">
-          <n-space style="width: 100%">
+  <div class="admin-login">
+    <div class="login-background">
+      <div class="circle circle-1"></div>
+      <div class="circle circle-2"></div>
+      <div class="circle circle-3"></div>
+      <div class="line line-1"></div>
+      <div class="line line-2"></div>
+      <div class="line line-3"></div>
+      <div class="square square-1"></div>
+      <div class="square square-2"></div>
+    </div>
+    <div class="login-container animate__animated animate__fadeInUp">
+      <div class="login-header">
+        <div class="login-logo">
+          <img :src="logoImage" alt="运营管理系统" />
+        </div>
+        <h1 class="login-title">梦幻西游运营管理系统</h1>
+        <p class="login-subtitle">管理员登录</p>
+      </div>
+      <div class="login-form-wrapper">
+        <n-form ref="formRef" :model="formValue" :rules="rules" size="large" class="login-form">
+          <n-form-item path="username" class="form-item">
+            <n-input 
+              v-model:value="formValue.username" 
+              placeholder="请输入用户名"
+              class="login-input"
+            >
+              <template #prefix>
+                <n-icon size="18" color="#808695">
+                  <PersonOutline />
+                </n-icon>
+              </template>
+            </n-input>
+          </n-form-item>
+          <n-form-item path="password" class="form-item">
             <n-input
-              v-model:value="formValue.captchaCode"
-              placeholder="请输入验证码"
-              @keyup.enter="handleLogin"
-            />
-            <div class="captcha-image" @click="handleRefreshCaptcha" v-html="captchaSvg"></div>
-          </n-space>
-        </n-form-item>
-        <n-form-item>
-          <n-button type="primary" block @click="handleLogin" :loading="loading">
-            登录
-          </n-button>
-        </n-form-item>
-      </n-form>
-    </n-card>
+              v-model:value="formValue.password"
+              type="password"
+              show-password-on="click"
+              placeholder="请输入密码"
+              class="login-input"
+            >
+              <template #prefix>
+                <n-icon size="18" color="#808695">
+                  <LockClosedOutline />
+                </n-icon>
+              </template>
+            </n-input>
+          </n-form-item>
+          <n-form-item v-if="captchaEnabled" path="captchaCode" class="form-item">
+            <n-space style="width: 100%">
+              <n-input
+                v-model:value="formValue.captchaCode"
+                placeholder="请输入验证码"
+                class="login-input"
+              >
+                <template #prefix>
+                  <n-icon size="18" color="#808695">
+                    <ShieldOutline />
+                  </n-icon>
+                </template>
+              </n-input>
+              <div class="captcha-image" @click="handleRefreshCaptcha" v-html="captchaSvg"></div>
+            </n-space>
+          </n-form-item>
+          <n-form-item class="form-item remember-forgot">
+            <div class="flex-between-wrapper">
+              <div class="left">
+                <n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
+              </div>
+              <div class="right">
+                <a href="javascript:" class="forgot-link">忘记密码</a>
+              </div>
+            </div>
+          </n-form-item>
+          <n-form-item class="form-item">
+            <n-button 
+              type="primary" 
+              block 
+              @click="handleLogin" 
+              :loading="loading"
+              class="login-button"
+            >
+              登录
+            </n-button>
+          </n-form-item>
+        </n-form>
+      </div>
+      <div class="login-footer">
+        <p>© 2024 梦幻西游运营管理系统</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { NCard, NForm, NFormItem, NInput, NButton, NSpace, useMessage } from 'naive-ui'
+import { NForm, NFormItem, NInput, NButton, NSpace, NIcon, NCheckbox, useMessage } from 'naive-ui'
+import { PersonOutline, LockClosedOutline, ShieldOutline } from '@vicons/ionicons5'
 import { useAdminStore } from '@/stores/admin'
 import { generateCaptcha, checkCaptchaEnabled } from '@/api/admin'
+import logoImage from '../../../assets/logo.png'
 
 const router = useRouter()
 const message = useMessage()
@@ -49,6 +112,7 @@ const loading = ref(false)
 const captchaEnabled = ref(false)
 const captchaSvg = ref('')
 const captchaId = ref('')
+const autoLogin = ref(false)
 
 const formValue = ref({
   username: '',
@@ -143,33 +207,361 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-.login-container {
+<style lang="less" scoped>
+.admin-login {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+CiAgPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iMiIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpIiAvPgo8L3N2Zz4=');
+    opacity: 0.3;
+    z-index: 0;
+  }
+}
+
+.login-background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+  
+  .circle {
+    position: absolute;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+    
+    &-1 {
+      width: 300px;
+      height: 300px;
+      top: -100px;
+      right: -100px;
+      animation: float 20s ease-in-out infinite;
+    }
+    
+    &-2 {
+      width: 200px;
+      height: 200px;
+      bottom: -50px;
+      left: -50px;
+      animation: float 15s ease-in-out infinite reverse;
+    }
+    
+    &-3 {
+      width: 150px;
+      height: 150px;
+      top: 50%;
+      left: 10%;
+      animation: float 18s ease-in-out infinite 2s;
+    }
+  }
+  
+  .line {
+    position: absolute;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
+    
+    &-1 {
+      width: 200px;
+      height: 2px;
+      top: 20%;
+      left: 20%;
+      transform: rotate(-30deg);
+      animation: pulse 8s ease-in-out infinite;
+    }
+    
+    &-2 {
+      width: 150px;
+      height: 2px;
+      bottom: 30%;
+      right: 15%;
+      transform: rotate(45deg);
+      animation: pulse 6s ease-in-out infinite 1s;
+    }
+    
+    &-3 {
+      width: 100px;
+      height: 2px;
+      top: 60%;
+      left: 30%;
+      transform: rotate(-15deg);
+      animation: pulse 7s ease-in-out infinite 2s;
+    }
+  }
+  
+  .square {
+    position: absolute;
+    
+    &-1 {
+      width: 80px;
+      height: 80px;
+      top: 15%;
+      left: 10%;
+      background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+      transform: rotate(30deg);
+      animation: rotate 15s linear infinite;
+    }
+    
+    &-2 {
+      width: 60px;
+      height: 60px;
+      bottom: 20%;
+      right: 20%;
+      border: 2px solid rgba(255, 255, 255, 0.1);
+      background: transparent;
+      animation: rotate 12s linear infinite reverse;
+    }
+  }
+  
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 0.3;
+    }
+    50% {
+      opacity: 0.6;
+    }
+  }
+  
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
+  @keyframes float {
+    0%, 100% {
+      transform: translateY(0) rotate(0deg);
+    }
+    50% {
+      transform: translateY(-20px) rotate(180deg);
+    }
+  }
+}
+
+.login-container {
+  width: 100%;
+  max-width: 420px;
+  padding: 40px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  position: relative;
+  z-index: 1;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
+    transform: translateY(-5px);
+  }
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 30px;
+  
+  .login-logo {
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
+    
+    img {
+      height: 64px;
+    }
+  }
+  
+  .login-title {
+    font-size: 28px;
+    font-weight: 600;
+    color: #333;
+    margin: 0 0 8px 0;
+    position: relative;
+    
+    /* &::after {
+      content: '';
+      position: absolute;
+      bottom: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60px;
+      height: 3px;
+      background: linear-gradient(to right, #18a058, #36ad6a);
+      border-radius: 2px;
+    } */
+  }
+  
+  .login-subtitle {
+    font-size: 14px;
+    color: #666;
+    margin: 20px 0 0 0;
+  }
+}
+
+.login-form-wrapper {
+  margin-bottom: 20px;
+}
+
+.login-form {
+  :deep(.n-form-item-feedback-wrapper) {
+    min-height: 18px;
+  }
+  
+  padding: 0;
+  
+  .form-item {
+    margin-bottom: 24px;
+    
+    :deep(.n-form-item-blank) {
+      width: 100%;
+    }
+  }
+  
+  .remember-forgot {
+    margin-bottom: 5px;
+    
+    .flex-between-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+    
+    .right {
+      text-align: right;
+    }
+  }
+  
+  .forgot-link {
+    color: #606266;
+    transition: all 0.2s;
+    
+    &:hover {
+      color: #667eea;
+    }
+  }
+}
+
+.login-input {
+  :deep(.n-input__input-el) {
+    padding-left: 5px;
+  }
+  
+  :deep(.n-input-wrapper) {
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+  
+  &:hover {
+    :deep(.n-input-wrapper) {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+  }
+  
+  &:focus-within {
+    :deep(.n-input-wrapper) {
+      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+      border-color: #667eea;
+    }
+  }
+}
+
+.login-button {
+  height: 48px;
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+  
+  :deep(.n-button__border),
+  :deep(.n-button__state-border) {
+    border: none !important;
+  }
+  
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(24, 160, 88, 0.4);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
 }
 
 .captcha-image {
   width: 120px;
-  height: 40px;
+  height: 48px;
   cursor: pointer;
   border: 1px solid #dcdfe6;
-  border-radius: 4px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #fff;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .captcha-image:hover {
-  border-color: #409eff;
+  border-color: #667eea;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+  transform: scale(1.02);
 }
 
 .captcha-image :deep(svg) {
   width: 100%;
   height: 100%;
 }
+
+.login-footer {
+  text-align: center;
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+  
+  p {
+    font-size: 12px;
+    color: #999;
+    margin: 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .login-container {
+    padding: 30px 20px;
+    margin: 20px;
+  }
+  
+  .login-header {
+    .login-logo img {
+      height: 56px;
+    }
+    
+    .login-title {
+      font-size: 24px;
+    }
+  }
+}
 </style>
diff --git a/frontend/src/views/player/Login.vue b/frontend/src/views/player/Login.vue
index 8e86a8d..d10b9b3 100644
--- a/frontend/src/views/player/Login.vue
+++ b/frontend/src/views/player/Login.vue
@@ -349,7 +349,7 @@ onMounted(() => {
     margin-bottom: 8px;
     position: relative;
     
-    &::after {
+    /* &::after {
       content: '';
       position: absolute;
       bottom: -10px;
@@ -359,7 +359,7 @@ onMounted(() => {
       height: 2px;
       background: linear-gradient(to right, #2d8cf0, #0081ff);
       border-radius: 2px;
-    }
+    } */
   }
   
   .login-welcome {