From 46b98e78e55d21c19d74ce91625d255ca1d50ccc Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Tue, 25 Nov 2025 01:34:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E7=95=8C=E9=9D=A2UI?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=20-=20=E7=A7=91=E6=8A=80=E6=9E=81=E7=AE=80?=
 =?UTF-8?q?=E9=BB=91=E8=93=9D=E7=B4=AB=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

设计亮点：
1. 左右布局分区
   - 左侧：品牌展示区，深空黑渐变背景
   - 右侧：登录表单区，黑色主题

2. 配色方案
   - 主色调：深空黑(#0a0a0a) + 冰川蓝(#6B8AFF) + 薰衣紫(#A855F7)
   - 标题：紫色渐变
   - 提示文字：蓝色
   - 背景光点：蓝紫渐变

3. 交互特效
   - 背景50个光点随机分布，hover时联动放大发光
   - 品牌区脉冲动画背景光晕
   - 图标浮动动画
   - 按钮hover光扫过效果

4. 输入框设计
   - 极简圆角矩形(12px)
   - 边框：浅灰透明
   - 聚焦：蓝紫渐变光晕
   - 背景：深色半透明

5. 按钮设计
   - 纯黑底色 + 蓝紫渐变
   - 压印线条图案(光扫效果)
   - hover时提升阴影和上移

6. 品牌元素
   - SVG渐变Logo
   - 产品slogan：AI赋能·智创未来
   - 特性标签：智能创作、数字人技术、内容分析

响应式：
- 小屏自动切换为上下布局

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../app/web-gold/src/views/auth/Login.vue     | 657 ++++++++++++------
 1 file changed, 433 insertions(+), 224 deletions(-)

diff --git a/frontend/app/web-gold/src/views/auth/Login.vue b/frontend/app/web-gold/src/views/auth/Login.vue
index 1a849c7c2f..1f6929f6f2 100644
--- a/frontend/app/web-gold/src/views/auth/Login.vue
+++ b/frontend/app/web-gold/src/views/auth/Login.vue
@@ -1,142 +1,188 @@
 <template>
   <div class="login-container">
-    <!-- 背景动画 -->
-    <div class="bg-animation">
-      <div class="floating-shapes">
-        <div class="shape shape-1"></div>
-        <div class="shape shape-2"></div>
-        <div class="shape shape-3"></div>
-        <div class="shape shape-4"></div>
-      </div>
+    <!-- 科技感背景光点 -->
+    <div class="bg-stars">
+      <div
+        v-for="(star, index) in stars"
+        :key="index"
+        class="star"
+        :class="{ active: star.active }"
+        :style="{
+          left: star.left + '%',
+          top: star.top + '%',
+          width: star.size + 'px',
+          height: star.size + 'px'
+        }"
+        @mouseenter="activateStar(index)"
+        @mouseleave="deactivateStar(index)"
+      ></div>
     </div>
 
-    <!-- 登录表单卡片 -->
-    <div class="login-card">
-      <div class="card-header">
-        <h1 class="title">欢迎回来</h1>
-        <p class="subtitle">登录您的账户以继续</p>
+    <div class="login-content">
+      <!-- 左侧品牌区 -->
+      <div class="brand-panel">
+        <div class="brand-inner">
+          <div class="brand-icon">
+            <svg width="80" height="80" viewBox="0 0 80 80">
+              <defs>
+                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" style="stop-color:#6B8AFF;stop-opacity:1" />
+                  <stop offset="100%" style="stop-color:#A855F7;stop-opacity:1" />
+                </linearGradient>
+              </defs>
+              <circle cx="40" cy="40" r="35" fill="none" stroke="url(#grad1)" stroke-width="2"/>
+              <path d="M 40 20 L 40 40 L 55 40" stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round"/>
+            </svg>
+          </div>
+          <h1 class="brand-title">金牌内容大师</h1>
+          <p class="brand-subtitle">AI赋能 · 智创未来</p>
+          <div class="brand-features">
+            <div class="feature-item">
+              <span class="feature-icon">✦</span>
+              <span>智能创作</span>
+            </div>
+            <div class="feature-item">
+              <span class="feature-icon">✦</span>
+              <span>数字人技术</span>
+            </div>
+            <div class="feature-item">
+              <span class="feature-icon">✦</span>
+              <span>内容分析</span>
+            </div>
+          </div>
+        </div>
       </div>
 
-      <a-tabs v-model:activeKey="activeTab" centered class="login-tabs">
-        <a-tab-pane key="sms" tab="短信登录">
-          <a-form
-            :model="smsForm"
-            :rules="smsRules"
-            ref="smsFormRef"
-            layout="vertical"
-          >
-            <a-form-item name="mobile" label="手机号">
-              <a-input
-                v-model:value="smsForm.mobile"
-                size="large"
-                placeholder="请输入手机号"
-                :maxlength="11"
+      <!-- 右侧登录区 -->
+      <div class="login-panel">
+        <div class="login-card">
+          <div class="card-header">
+            <h2 class="login-title">欢迎登录</h2>
+            <p class="login-subtitle">进入您的创作空间</p>
+          </div>
+
+          <a-tabs v-model:activeKey="activeTab" centered class="login-tabs">
+            <a-tab-pane key="sms" tab="短信登录">
+              <a-form
+                :model="smsForm"
+                :rules="smsRules"
+                ref="smsFormRef"
+                layout="vertical"
               >
-                <template #prefix>
-                  <PhoneOutlined />
-                </template>
-              </a-input>
-            </a-form-item>
+                <a-form-item name="mobile" label="手机号">
+                  <a-input
+                    v-model:value="smsForm.mobile"
+                    size="large"
+                    placeholder="请输入手机号"
+                    :maxlength="11"
+                    class="tech-input"
+                  >
+                    <template #prefix>
+                      <PhoneOutlined class="input-icon" />
+                    </template>
+                  </a-input>
+                </a-form-item>
 
-            <a-form-item name="code" label="验证码">
-              <div class="code-input">
-                <a-input
-                  v-model:value="smsForm.code"
-                  size="large"
-                  placeholder="请输入验证码"
-                  :maxlength="6"
-                >
-                  <template #prefix>
-                    <SafetyOutlined />
-                  </template>
-                </a-input>
-                <a-button
-                  type="primary"
-                  :disabled="codeCountdown > 0"
-                  :loading="sendingCode"
-                  @click="sendSmsCode"
-                  class="send-code-btn"
-                >
-                  {{ codeCountdown > 0 ? `${codeCountdown}s后重发` : '发送验证码' }}
-                </a-button>
-              </div>
-            </a-form-item>
+                <a-form-item name="code" label="验证码">
+                  <div class="code-input">
+                    <a-input
+                      v-model:value="smsForm.code"
+                      size="large"
+                      placeholder="请输入验证码"
+                      :maxlength="6"
+                      class="tech-input"
+                    >
+                      <template #prefix>
+                        <SafetyOutlined class="input-icon" />
+                      </template>
+                    </a-input>
+                    <a-button
+                      type="primary"
+                      :disabled="codeCountdown > 0"
+                      :loading="sendingCode"
+                      @click="sendSmsCode"
+                      class="send-code-btn"
+                    >
+                      {{ codeCountdown > 0 ? `${codeCountdown}s后重发` : '发送验证码' }}
+                    </a-button>
+                  </div>
+                </a-form-item>
 
-            <a-form-item>
-              <a-button
-                type="primary"
-                html-type="submit"
-                size="large"
-                block
-                :loading="loggingIn"
-                @click="handleSmsLogin"
-                class="login-btn"
+                <a-form-item>
+                  <a-button
+                    type="primary"
+                    html-type="submit"
+                    size="large"
+                    block
+                    :loading="loggingIn"
+                    @click="handleSmsLogin"
+                    class="login-btn"
+                  >
+                    立即登录
+                  </a-button>
+                </a-form-item>
+              </a-form>
+            </a-tab-pane>
+
+            <a-tab-pane key="password" tab="密码登录">
+              <a-form
+                :model="passwordForm"
+                :rules="passwordRules"
+                ref="passwordFormRef"
+                layout="vertical"
               >
-                登录
-              </a-button>
-            </a-form-item>
-          </a-form>
-        </a-tab-pane>
+                <a-form-item name="mobile" label="手机号">
+                  <a-input
+                    v-model:value="passwordForm.mobile"
+                    size="large"
+                    placeholder="请输入手机号"
+                    :maxlength="11"
+                    class="tech-input"
+                  >
+                    <template #prefix>
+                      <PhoneOutlined class="input-icon" />
+                    </template>
+                  </a-input>
+                </a-form-item>
 
-        <a-tab-pane key="password" tab="密码登录">
-          <a-form
-            :model="passwordForm"
-            :rules="passwordRules"
-            ref="passwordFormRef"
-            layout="vertical"
-          >
-            <a-form-item name="mobile" label="手机号">
-              <a-input
-                v-model:value="passwordForm.mobile"
-                size="large"
-                placeholder="请输入手机号"
-                :maxlength="11"
-              >
-                <template #prefix>
-                  <PhoneOutlined />
-                </template>
-              </a-input>
-            </a-form-item>
+                <a-form-item name="password" label="密码">
+                  <a-input-password
+                    v-model:value="passwordForm.password"
+                    size="large"
+                    placeholder="请输入密码"
+                    @pressEnter="handlePasswordLogin"
+                    class="tech-input"
+                  >
+                    <template #prefix>
+                      <LockOutlined class="input-icon" />
+                    </template>
+                  </a-input-password>
+                </a-form-item>
 
-            <a-form-item name="password" label="密码">
-              <a-input-password
-                v-model:value="passwordForm.password"
-                size="large"
-                placeholder="请输入密码"
-                @pressEnter="handlePasswordLogin"
-              >
-                <template #prefix>
-                  <LockOutlined />
-                </template>
-              </a-input-password>
-            </a-form-item>
-
-            <a-form-item>
-              <a-button
-                type="primary"
-                html-type="submit"
-                size="large"
-                block
-                :loading="loggingIn"
-                @click="handlePasswordLogin"
-                class="login-btn"
-              >
-                登录
-              </a-button>
-            </a-form-item>
-          </a-form>
-        </a-tab-pane>
-      </a-tabs>
-
-      <div class="card-footer">
-        <p class="tip">登录即表示您同意我们的服务条款和隐私政策</p>
+                <a-form-item>
+                  <a-button
+                    type="primary"
+                    html-type="submit"
+                    size="large"
+                    block
+                    :loading="loggingIn"
+                    @click="handlePasswordLogin"
+                    class="login-btn"
+                  >
+                    立即登录
+                  </a-button>
+                </a-form-item>
+              </a-form>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
 import {
@@ -173,6 +219,9 @@ const codeCountdown = ref(0)
 // 验证码倒计时
 let countdownTimer = null
 
+// 背景光点
+const stars = ref([])
+
 // 表单验证规则
 const smsRules = {
   mobile: [
@@ -196,6 +245,29 @@ const passwordRules = {
   ]
 }
 
+// 初始化背景光点
+onMounted(() => {
+  const starCount = 50
+  for (let i = 0; i < starCount; i++) {
+    stars.value.push({
+      left: Math.random() * 100,
+      top: Math.random() * 100,
+      size: Math.random() * 3 + 1,
+      active: false
+    })
+  }
+})
+
+// 激活光点
+function activateStar(index) {
+  stars.value[index].active = true
+}
+
+// 停用光点
+function deactivateStar(index) {
+  stars.value[index].active = false
+}
+
 // 发送验证码
 async function sendSmsCode() {
   try {
@@ -283,120 +355,185 @@ async function handlePasswordLogin() {
 <style scoped>
 .login-container {
   min-height: 100vh;
+  background: #0a0a0a;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 背景光点 */
+.bg-stars {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.star {
+  position: absolute;
+  background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
+  border-radius: 50%;
+  opacity: 0.3;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.star.active {
+  opacity: 0.8;
+  transform: scale(1.5);
+  box-shadow: 0 0 20px rgba(107, 138, 255, 0.6);
+}
+
+/* 主内容区 */
+.login-content {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* 左侧品牌区 */
+.brand-panel {
+  flex: 1;
+  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 60px;
   position: relative;
   overflow: hidden;
 }
 
-/* 背景动画 */
-.bg-animation {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.floating-shapes {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.shape {
+.brand-panel::before {
+  content: '';
   position: absolute;
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, rgba(107, 138, 255, 0.1) 0%, transparent 70%);
   border-radius: 50%;
-  filter: blur(40px);
-  opacity: 0.3;
-  animation: float 20s infinite ease-in-out;
-}
-
-.shape-1 {
-  width: 300px;
-  height: 300px;
-  background: #ffffff;
   top: -100px;
-  left: -100px;
-  animation-delay: 0s;
+  right: -100px;
+  animation: pulse 4s ease-in-out infinite;
 }
 
-.shape-2 {
+.brand-panel::after {
+  content: '';
+  position: absolute;
   width: 400px;
   height: 400px;
-  background: #ffd700;
-  top: 50%;
-  right: -150px;
-  animation-delay: -5s;
+  background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+  bottom: -50px;
+  left: -50px;
+  animation: pulse 4s ease-in-out infinite 2s;
 }
 
-.shape-3 {
-  width: 250px;
-  height: 250px;
-  background: #ff6b9d;
-  bottom: -80px;
-  left: 30%;
-  animation-delay: -10s;
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
 }
 
-.shape-4 {
-  width: 350px;
-  height: 350px;
-  background: #00f2fe;
-  top: 20%;
-  left: 10%;
-  animation-delay: -15s;
+.brand-inner {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  max-width: 400px;
+}
+
+.brand-icon {
+  margin-bottom: 30px;
+  animation: float 3s ease-in-out infinite;
 }
 
 @keyframes float {
   0%, 100% {
-    transform: translate(0, 0) rotate(0deg);
+    transform: translateY(0);
   }
-  33% {
-    transform: translate(100px, -100px) rotate(120deg);
-  }
-  66% {
-    transform: translate(-80px, 80px) rotate(240deg);
+  50% {
+    transform: translateY(-10px);
   }
 }
 
-/* 登录卡片 */
+.brand-title {
+  font-size: 48px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 15px;
+}
+
+.brand-subtitle {
+  font-size: 18px;
+  color: #6B8AFF;
+  margin-bottom: 50px;
+  opacity: 0.8;
+}
+
+.brand-features {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #a0a0a0;
+  font-size: 16px;
+}
+
+.feature-icon {
+  color: #A855F7;
+  font-size: 20px;
+}
+
+/* 右侧登录区 */
+.login-panel {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px;
+  background: #0a0a0a;
+}
+
 .login-card {
   width: 100%;
-  max-width: 450px;
-  background: rgba(255, 255, 255, 0.95);
+  max-width: 420px;
+  background: rgba(26, 26, 46, 0.6);
   backdrop-filter: blur(20px);
-  border-radius: 20px;
+  border-radius: 24px;
   padding: 50px 40px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  position: relative;
-  z-index: 1;
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(107, 138, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }
 
 .card-header {
   text-align: center;
-  margin-bottom: 30px;
+  margin-bottom: 40px;
 }
 
-.title {
+.login-title {
   font-size: 32px;
   font-weight: 700;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #A855F7;
   margin-bottom: 10px;
 }
 
-.subtitle {
-  color: #666;
+.login-subtitle {
   font-size: 14px;
+  color: #6B8AFF;
   margin: 0;
+  opacity: 0.8;
 }
 
-/* 标签页样式 */
+/* 标签页 */
 .login-tabs {
   margin-bottom: 20px;
 }
@@ -406,83 +543,155 @@ async function handlePasswordLogin() {
 }
 
 .login-tabs :deep(.ant-tabs-tab) {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 500;
-  padding: 12px 20px;
+  padding: 10px 24px;
+  color: #666;
 }
 
 .login-tabs :deep(.ant-tabs-tab-active) {
-  color: #667eea;
+  color: #A855F7;
 }
 
 .login-tabs :deep(.ant-tabs-ink-bar) {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
+  height: 3px;
 }
 
-/* 表单样式 */
-:deep(.ant-form-item-label > label) {
-  font-weight: 500;
-  color: #333;
-}
-
-:deep(.ant-input-affix-wrapper) {
-  border-radius: 10px;
-  border: 2px solid #e8e8e8;
+/* 输入框 */
+.tech-input {
+  border-radius: 12px;
+  border: 1.5px solid rgba(255, 255, 255, 0.1);
+  background: rgba(15, 15, 30, 0.5);
   transition: all 0.3s;
 }
 
-:deep(.ant-input-affix-wrapper:hover),
-:deep(.ant-input-affix-wrapper-focused) {
-  border-color: #667eea;
-  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+.tech-input:hover {
+  border-color: rgba(107, 138, 255, 0.5);
+}
+
+.tech-input:focus,
+.tech-input-focused {
+  border-color: transparent;
+  background: rgba(15, 15, 30, 0.8);
+  box-shadow: 0 0 0 2px rgba(107, 138, 255, 0.2);
 }
 
 :deep(.ant-input) {
+  color: #fff;
   font-size: 15px;
 }
 
-/* 验证码输入组 */
+:deep(.ant-input-prefix) {
+  color: rgba(107, 138, 255, 0.8);
+}
+
+:deep(.ant-form-item-label > label) {
+  font-weight: 500;
+  color: #a0a0a0;
+}
+
+:deep(.ant-input-affix-wrapper) {
+  border-radius: 12px;
+  border: 1.5px solid rgba(255, 255, 255, 0.1);
+  background: rgba(15, 15, 30, 0.5);
+  transition: all 0.3s;
+}
+
+:deep(.ant-input-affix-wrapper:hover) {
+  border-color: rgba(107, 138, 255, 0.5);
+}
+
+:deep(.ant-input-affix-wrapper-focused) {
+  border-color: transparent;
+  background: rgba(15, 15, 30, 0.8);
+  box-shadow: 0 0 0 2px rgba(107, 138, 255, 0.2);
+}
+
+/* 验证码输入 */
 .code-input {
   display: flex;
-  gap: 10px;
+  gap: 12px;
 }
 
 .send-code-btn {
-  border-radius: 10px;
+  border-radius: 12px;
   white-space: nowrap;
   flex-shrink: 0;
+  background: linear-gradient(135deg, rgba(107, 138, 255, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
+  border: 1px solid rgba(107, 138, 255, 0.3);
+  color: #6B8AFF;
+  font-weight: 500;
+}
+
+.send-code-btn:hover {
+  background: linear-gradient(135deg, rgba(107, 138, 255, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
+  border-color: rgba(107, 138, 255, 0.5);
 }
 
 /* 登录按钮 */
 .login-btn {
-  height: 48px;
+  height: 52px;
   font-size: 16px;
   font-weight: 600;
-  border-radius: 10px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
   border: none;
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
-  transition: all 0.3s;
+  box-shadow: 0 4px 20px rgba(107, 138, 255, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+.login-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s;
+}
+
+.login-btn:hover::before {
+  left: 100%;
 }
 
 .login-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+  box-shadow: 0 6px 30px rgba(107, 138, 255, 0.5);
 }
 
 .login-btn:active {
   transform: translateY(0);
 }
 
-/* 底部提示 */
-.card-footer {
-  text-align: center;
-  margin-top: 20px;
+/* 图标 */
+.input-icon {
+  font-size: 18px;
 }
 
-.tip {
-  color: #999;
-  font-size: 12px;
-  margin: 0;
+/* 响应式 */
+@media (max-width: 992px) {
+  .login-content {
+    flex-direction: column;
+  }
+
+  .brand-panel {
+    padding: 40px 20px;
+    min-height: 200px;
+  }
+
+  .login-panel {
+    padding: 40px 20px;
+  }
+
+  .brand-title {
+    font-size: 36px;
+  }
+
+  .login-card {
+    padding: 30px 20px;
+  }
 }
 </style>