From b9a1763e7123653c2428f7e02e13ae253e7af8ea Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Sun, 22 Mar 2026 22:07:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/agents/ChatDrawer.vue      |   2 +-
 .../src/components/agents/HistoryPanel.vue    |  12 +-
 .../app/web-gold/src/views/auth/Login.vue     | 929 +++++-------------
 3 files changed, 229 insertions(+), 714 deletions(-)

diff --git a/frontend/app/web-gold/src/components/agents/ChatDrawer.vue b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
index a7143270a1..a9b43c127d 100644
--- a/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
+++ b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
@@ -180,7 +180,7 @@ watch(() => props.visible, (val) => {
 
 <template>
   <Sheet :open="visible" @update:open="handleClose">
-    <SheetContent side="right" class="w-[560px] sm:max-w-full p-0 flex flex-col bg-background">
+    <SheetContent side="right" class="w-full sm:w-[560px] p-0 flex flex-col bg-background">
       <!-- Header -->
       <SheetHeader class="shrink-0">
         <ChatDrawerHeader :agent="agent" @history="openHistory" />
diff --git a/frontend/app/web-gold/src/components/agents/HistoryPanel.vue b/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
index 3c28d86b54..1a1f6df8b2 100644
--- a/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
+++ b/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
@@ -954,17 +954,19 @@ watch(() => props.visible, (val) => {
 // ========================================
 @media (max-width: 768px) {
   .history-overlay {
-    padding: 20px;
-    align-items: flex-end;
+    padding: 0;
+    align-items: stretch;
   }
 
   .history-modal {
-    max-height: calc(100vh - 40px);
-    border-radius: 20px 20px 12px 12px;
+    max-width: 100%;
+    max-height: 100vh;
+    height: 100vh;
+    border-radius: 0;
   }
 
   .modal-header {
-    padding: 20px 20px 16px;
+    padding: 16px 20px;
   }
 
   .modal-body {
diff --git a/frontend/app/web-gold/src/views/auth/Login.vue b/frontend/app/web-gold/src/views/auth/Login.vue
index f74edc5b80..c6318d1546 100644
--- a/frontend/app/web-gold/src/views/auth/Login.vue
+++ b/frontend/app/web-gold/src/views/auth/Login.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="login-container">
+  <div class="min-h-screen bg-background relative overflow-hidden">
     <!-- 动态背景层 -->
-    <div class="bg-layer">
+    <div class="absolute inset-0 overflow-hidden">
       <div class="gradient-orb orb-1"></div>
       <div class="gradient-orb orb-2"></div>
       <div class="gradient-orb orb-3"></div>
@@ -10,10 +10,10 @@
     </div>
 
     <!-- 粒子背景 -->
-    <canvas ref="particleCanvas" class="particle-canvas"></canvas>
+    <canvas ref="particleCanvas" class="absolute inset-0 pointer-events-none z-10"></canvas>
 
-    <!-- 浮动几何元素 -->
-    <div class="floating-shapes">
+    <!-- 浮动几何元素 - 仅桌面端显示 -->
+    <div class="floating-shapes hidden lg:block">
       <div class="shape shape-1"></div>
       <div class="shape shape-2"></div>
       <div class="shape shape-3"></div>
@@ -22,15 +22,15 @@
     </div>
 
     <!-- 主内容区 -->
-    <div class="login-content">
+    <div class="min-h-screen flex flex-col lg:flex-row relative z-20">
       <!-- 左侧品牌区 -->
-      <div class="brand-section">
-        <div class="brand-content">
+      <div class="flex-1 flex items-center justify-center p-6 sm:p-10 lg:p-16 animate-fade-in">
+        <div class="w-full max-w-md">
           <!-- 品牌标识 -->
-          <div class="brand-logo">
+          <div class="brand-logo mx-auto lg:mx-0">
             <div class="logo-ring"></div>
             <div class="logo-core">
-              <svg viewBox="0 0 40 40" class="logo-icon">
+              <svg viewBox="0 0 40 40" class="w-9 h-9 text-primary">
                 <polygon points="20,4 36,12 36,28 20,36 4,28 4,12" fill="none" stroke="currentColor" stroke-width="1.5"/>
                 <polygon points="20,10 28,14 28,26 20,30 12,26 12,14" fill="currentColor" opacity="0.3"/>
                 <circle cx="20" cy="20" r="4" fill="currentColor"/>
@@ -39,47 +39,49 @@
           </div>
 
           <!-- 品牌文字 -->
-          <h1 class="brand-title">
-            <span class="title-gold">金牌</span>内容大师
+          <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mt-6 mb-3 text-center lg:text-left tracking-tight">
+            <span class="text-primary">金牌</span>内容大师
           </h1>
-          <p class="brand-tagline">AI 驱动 · 智慧创作 · 无限可能</p>
+          <p class="text-sm sm:text-base text-muted-foreground mb-8 lg:mb-12 text-center lg:text-left tracking-wider">
+            AI 驱动 · 智慧创作 · 无限可能
+          </p>
 
           <!-- 特性展示 -->
-          <div class="features-grid">
+          <div class="flex flex-col sm:flex-row lg:flex-col gap-3 justify-center lg:justify-start">
             <div class="feature-card">
               <div class="feature-icon">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6">
                   <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                 </svg>
               </div>
-              <div class="feature-text">
-                <span class="feature-label">智能创作</span>
-                <span class="feature-desc">AI赋能内容生成</span>
+              <div class="flex flex-col gap-0.5">
+                <span class="text-sm font-semibold text-foreground">智能创作</span>
+                <span class="text-xs text-muted-foreground">AI赋能内容生成</span>
               </div>
             </div>
             <div class="feature-card">
               <div class="feature-icon">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6">
                   <circle cx="12" cy="8" r="4"/>
                   <path d="M4 20c0-4 4-6 8-6s8 2 8 6"/>
                   <circle cx="12" cy="8" r="8" stroke-dasharray="2 2"/>
                 </svg>
               </div>
-              <div class="feature-text">
-                <span class="feature-label">数字人技术</span>
-                <span class="feature-desc">虚拟形象定制</span>
+              <div class="flex flex-col gap-0.5">
+                <span class="text-sm font-semibold text-foreground">数字人技术</span>
+                <span class="text-xs text-muted-foreground">虚拟形象定制</span>
               </div>
             </div>
             <div class="feature-card">
               <div class="feature-icon">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6">
                   <rect x="3" y="3" width="18" height="18" rx="2"/>
                   <path d="M3 9h18M9 21V9"/>
                 </svg>
               </div>
-              <div class="feature-text">
-                <span class="feature-label">数据分析</span>
-                <span class="feature-desc">精准内容洞察</span>
+              <div class="flex flex-col gap-0.5">
+                <span class="text-sm font-semibold text-foreground">数据分析</span>
+                <span class="text-xs text-muted-foreground">精准内容洞察</span>
               </div>
             </div>
           </div>
@@ -87,106 +89,100 @@
       </div>
 
       <!-- 右侧登录区 -->
-      <div class="login-section">
-        <div class="login-card">
-          <!-- 装饰边框 -->
-          <div class="card-border"></div>
-
-          <!-- 卡片内容 -->
-          <div class="card-inner">
-            <!-- 标题区 -->
-            <div class="card-header">
-              <h2 class="login-title">欢迎回来</h2>
-              <p class="login-subtitle">登录您的账户，开启创作之旅</p>
-            </div>
-
-            <!-- 登录表单 -->
-            <form class="login-form" @submit.prevent="handleSmsLogin">
-              <!-- 手机号 -->
-              <div class="form-item" :class="{ 'has-error': errors.mobile }">
-                <label class="form-label">手机号码</label>
-                <div class="input-wrapper">
-                  <div class="input-prefix">
-                    <Icon icon="lucide:smartphone" class="input-icon" />
-                  </div>
-                  <input
-                    v-model="smsForm.mobile"
-                    type="tel"
-                    class="custom-input"
-                    :class="{ 'input-error': errors.mobile }"
-                    placeholder="请输入手机号"
-                    maxlength="11"
-                    autocomplete="off"
-                    autocorrect="off"
-                    autocapitalize="off"
-                    spellcheck="false"
-                    @blur="validateMobile"
-                  />
-                  <div class="input-glow"></div>
-                </div>
-                <span v-if="errors.mobile" class="error-message">{{ errors.mobile }}</span>
+      <div class="flex-1 flex items-center justify-center p-5 sm:p-8 lg:p-16 animate-slide-up">
+        <div class="w-full max-w-sm sm:max-w-md">
+          <!-- 登录卡片 -->
+          <div class="login-card">
+            <div class="card-border"></div>
+            <div class="card-inner p-6 sm:p-10">
+              <!-- 标题区 -->
+              <div class="text-center mb-8">
+                <h2 class="text-2xl sm:text-3xl font-semibold text-foreground mb-2">欢迎回来</h2>
+                <p class="text-sm text-muted-foreground">登录您的账户，开启创作之旅</p>
               </div>
 
-              <!-- 验证码 -->
-              <div class="form-item" :class="{ 'has-error': errors.code }">
-                <label class="form-label">验证码</label>
-                <div class="code-row">
-                  <div class="input-wrapper code-input">
-                    <div class="input-prefix">
-                      <Icon icon="lucide:shield-check" class="input-icon" />
+              <!-- 登录表单 -->
+              <form class="space-y-6" @submit.prevent="handleSmsLogin">
+                <!-- 手机号 -->
+                <div class="space-y-2" :class="{ 'has-error': errors.mobile }">
+                  <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">手机号码</label>
+                  <div class="input-wrapper" :class="{ 'border-destructive': errors.mobile }">
+                    <div class="flex items-center justify-center pl-4 text-muted-foreground">
+                      <Icon icon="lucide:smartphone" class="text-lg" />
                     </div>
                     <input
-                      v-model="smsForm.code"
-                      type="text"
+                      v-model="smsForm.mobile"
+                      type="tel"
                       class="custom-input"
-                      :class="{ 'input-error': errors.code }"
-                      placeholder="请输入验证码"
-                      maxlength="4"
+                      placeholder="请输入手机号"
+                      maxlength="11"
                       autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       spellcheck="false"
-                      @blur="validateCode"
+                      @blur="validateMobile"
                     />
-                    <div class="input-glow"></div>
                   </div>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    :disabled="codeCountdown > 0"
-                    class="code-btn"
-                    @click="sendSmsCode"
-                  >
-                    <span v-if="sendingCode" class="custom-spinner small"></span>
-                    <span v-if="codeCountdown > 0">{{ codeCountdown }}s</span>
-                    <span v-else>获取验证码</span>
-                  </Button>
+                  <span v-if="errors.mobile" class="text-xs text-destructive">{{ errors.mobile }}</span>
                 </div>
-                <span v-if="errors.code" class="error-message">{{ errors.code }}</span>
-              </div>
 
-              <!-- 提交按钮 -->
-              <div class="submit-item">
+                <!-- 验证码 -->
+                <div class="space-y-2" :class="{ 'has-error': errors.code }">
+                  <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">验证码</label>
+                  <div class="flex flex-col sm:flex-row gap-3">
+                    <div class="input-wrapper flex-1" :class="{ 'border-destructive': errors.code }">
+                      <div class="flex items-center justify-center pl-4 text-muted-foreground">
+                        <Icon icon="lucide:shield-check" class="text-lg" />
+                      </div>
+                      <input
+                        v-model="smsForm.code"
+                        type="text"
+                        class="custom-input"
+                        placeholder="请输入验证码"
+                        maxlength="4"
+                        autocomplete="off"
+                        autocorrect="off"
+                        autocapitalize="off"
+                        spellcheck="false"
+                        @blur="validateCode"
+                      />
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      :disabled="codeCountdown > 0"
+                      class="code-btn h-12 sm:h-13 px-5 rounded-xl whitespace-nowrap"
+                      @click="sendSmsCode"
+                    >
+                      <span v-if="sendingCode" class="custom-spinner small"></span>
+                      <span v-if="codeCountdown > 0">{{ codeCountdown }}s</span>
+                      <span v-else>获取验证码</span>
+                    </Button>
+                  </div>
+                  <span v-if="errors.code" class="text-xs text-destructive">{{ errors.code }}</span>
+                </div>
+
+                <!-- 提交按钮 -->
                 <Button
                   type="submit"
                   size="lg"
-                  class="submit-btn w-full"
+                  class="submit-btn w-full h-13 sm:h-14 rounded-xl text-base font-semibold mt-8"
                   :disabled="loggingIn"
                 >
                   <span v-if="loggingIn" class="custom-spinner"></span>
                   <template v-else>
-                    <span class="btn-text">立即登录</span>
-                    <span class="btn-arrow">→</span>
+                    <span>立即登录</span>
+                    <span class="ml-2 transition-transform group-hover:translate-x-1">→</span>
                   </template>
                 </Button>
-              </div>
-            </form>
+              </form>
 
-            <!-- 底部装饰 -->
-            <div class="card-footer">
-              <div class="footer-line"></div>
-              <span class="footer-text">安全登录 · 数据加密</span>
-              <div class="footer-line"></div>
+              <!-- 底部装饰 -->
+              <div class="flex items-center justify-center gap-4 mt-8 pt-6 border-t border-border/50">
+                <div class="flex-1 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div>
+                <span class="text-xs text-muted-foreground tracking-wider">安全登录 · 数据加密</span>
+                <div class="flex-1 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div>
+              </div>
             </div>
           </div>
         </div>
@@ -287,13 +283,11 @@ class Particle {
     this.x += this.speedX
     this.y += this.speedY
 
-    // 边界检测
     if (this.x < 0 || this.x > this.canvas.width ||
         this.y < 0 || this.y > this.canvas.height) {
       this.reset()
     }
 
-    // 透明度呼吸效果
     this.opacity += this.fadeSpeed * this.fadeDirection
     if (this.opacity >= 0.7) this.fadeDirection = -1
     if (this.opacity <= 0.1) this.fadeDirection = 1
@@ -302,7 +296,7 @@ class Particle {
   draw(ctx) {
     ctx.beginPath()
     ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
-    ctx.fillStyle = `rgba(212, 168, 83, ${this.opacity})`
+    ctx.fillStyle = `oklch(0.55 0.14 270 / ${this.opacity})`
     ctx.fill()
   }
 }
@@ -314,8 +308,7 @@ function initParticles() {
   ctx = canvas.getContext('2d')
   resizeCanvas()
 
-  // 根据屏幕大小创建粒子数量
-  const particleCount = Math.min(80, Math.floor((canvas.width * canvas.height) / 15000))
+  const particleCount = Math.min(60, Math.floor((canvas.width * canvas.height) / 20000))
   particles = []
   for (let i = 0; i < particleCount; i++) {
     particles.push(new Particle(canvas))
@@ -336,20 +329,18 @@ function animateParticles() {
 
   ctx.clearRect(0, 0, particleCanvas.value.width, particleCanvas.value.height)
 
-  // 更新和绘制粒子
   particles.forEach(particle => {
     particle.update()
     particle.draw(ctx)
   })
 
-  // 绘制粒子连线
   drawConnections()
 
   animationId = requestAnimationFrame(animateParticles)
 }
 
 function drawConnections() {
-  const maxDistance = 120
+  const maxDistance = 100
   for (let i = 0; i < particles.length; i++) {
     for (let j = i + 1; j < particles.length; j++) {
       const dx = particles[i].x - particles[j].x
@@ -357,11 +348,11 @@ function drawConnections() {
       const distance = Math.sqrt(dx * dx + dy * dy)
 
       if (distance < maxDistance) {
-        const opacity = (1 - distance / maxDistance) * 0.15
+        const opacity = (1 - distance / maxDistance) * 0.12
         ctx.beginPath()
         ctx.moveTo(particles[i].x, particles[i].y)
         ctx.lineTo(particles[j].x, particles[j].y)
-        ctx.strokeStyle = `rgba(212, 168, 83, ${opacity})`
+        ctx.strokeStyle = `oklch(0.55 0.14 270 / ${opacity})`
         ctx.lineWidth = 0.5
         ctx.stroke()
       }
@@ -389,33 +380,15 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', resizeCanvas)
 })
 
-// 表单验证规则
-const smsRules = {
-  mobile: [
-    { required: true, message: '请输入手机号', trigger: 'blur' },
-    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
-  ],
-  code: [
-    { required: true, message: '请输入验证码', trigger: 'blur' },
-    { pattern: /^\d{4}$/, message: '验证码为4位数字', trigger: 'blur' }
-  ]
-}
-
 // 发送验证码
 async function sendSmsCode() {
-  // 验证手机号
-  if (!validateMobile()) {
-    return
-  }
+  if (!validateMobile()) return
 
   try {
     sendingCode.value = true
-
     await authApi.sendSmsCode(smsForm.mobile, SMS_SCENE.MEMBER_LOGIN)
-
     toast.success('验证码已发送')
 
-    // 开始倒计时
     codeCountdown.value = 60
     countdownTimer = setInterval(() => {
       codeCountdown.value--
@@ -438,17 +411,12 @@ async function sendSmsCode() {
 
 // 短信登录
 async function handleSmsLogin() {
-  // 验证表单
-  if (!validateForm()) {
-    return
-  }
+  if (!validateForm()) return
 
   try {
     loggingIn.value = true
-
     const info = await authApi.loginBySms(smsForm.mobile, smsForm.code)
 
-    // 更新用户登录状态
     const userInfo = info?.userInfo || {}
     userStore.login({
       userId: String(userInfo.id || userInfo.userId || smsForm.mobile),
@@ -459,11 +427,8 @@ async function handleSmsLogin() {
       credits: userInfo.credits ?? 0,
     })
 
-    // 获取完整的用户信息
     await userStore.fetchUserInfo()
-
     toast.success('登录成功')
-
     router.push({ name: '对标分析' })
   } catch (error) {
     if (error?.response?.data?.message) {
@@ -475,40 +440,10 @@ async function handleSmsLogin() {
     loggingIn.value = false
   }
 }
-
 </script>
 
 <style scoped lang="less">
-
-/* ========== CSS变量 ========== */
-@primary-gold: #D4A853;
-@primary-gold-light: #E8C97A;
-@primary-gold-dark: #B8943F;
-@deep-black: #0A0B0D;
-@deep-blue: #0D1117;
-@card-bg: rgba(15, 18, 25, 0.85);
-@border-subtle: rgba(212, 168, 83, 0.15);
-@border-active: rgba(212, 168, 83, 0.4);
-@text-primary: #F0F2F5;
-@text-secondary: #8B919A;
-@text-muted: #5A5F6B;
-
-/* ========== 容器 ========== */
-.login-container {
-  min-height: 100vh;
-  background: @deep-black;
-  position: relative;
-  overflow: hidden;
-  font-family: 'DM Sans', sans-serif;
-}
-
-/* ========== 背景层 ========== */
-.bg-layer {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-}
-
+// ========== 背景层 ==========
 .gradient-orb {
   position: absolute;
   border-radius: 50%;
@@ -517,27 +452,26 @@ async function handleSmsLogin() {
   animation: float 20s ease-in-out infinite;
 
   &.orb-1 {
-    width: 600px;
-    height: 600px;
-    background: radial-gradient(circle, rgba(212, 168, 83, 0.15) 0%, transparent 70%);
-    top: -200px;
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, oklch(0.55 0.14 270 / 0.12) 0%, transparent 70%);
+    top: -150px;
     left: -100px;
-    animation-delay: 0s;
   }
 
   &.orb-2 {
-    width: 500px;
-    height: 500px;
-    background: radial-gradient(circle, rgba(30, 64, 120, 0.2) 0%, transparent 70%);
-    bottom: -150px;
-    right: -100px;
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, oklch(0.60 0.12 200 / 0.15) 0%, transparent 70%);
+    bottom: -100px;
+    right: -80px;
     animation-delay: -7s;
   }
 
   &.orb-3 {
-    width: 400px;
-    height: 400px;
-    background: radial-gradient(circle, rgba(212, 168, 83, 0.1) 0%, transparent 70%);
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, oklch(0.55 0.14 270 / 0.08) 0%, transparent 70%);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -564,22 +498,14 @@ async function handleSmsLogin() {
   position: absolute;
   inset: 0;
   background-image:
-    linear-gradient(rgba(212, 168, 83, 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(212, 168, 83, 0.03) 1px, transparent 1px);
+    linear-gradient(oklch(0.55 0.14 270 / 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, oklch(0.55 0.14 270 / 0.03) 1px, transparent 1px);
   background-size: 60px 60px;
   mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
   pointer-events: none;
 }
 
-/* 粒子画布 */
-.particle-canvas {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 1;
-}
-
-/* ========== 浮动几何元素 ========== */
+// ========== 浮动几何元素 ==========
 .floating-shapes {
   position: absolute;
   inset: 0;
@@ -589,7 +515,7 @@ async function handleSmsLogin() {
 
 .shape {
   position: absolute;
-  border: 1px solid @border-subtle;
+  border: 1px solid oklch(0.55 0.14 270 / 0.15);
   opacity: 0.6;
   animation: shapeFloat 25s ease-in-out infinite;
 
@@ -599,7 +525,6 @@ async function handleSmsLogin() {
     top: 15%;
     left: 8%;
     transform: rotate(45deg);
-    animation-delay: 0s;
   }
 
   &.shape-2 {
@@ -643,51 +568,22 @@ async function handleSmsLogin() {
   50% { transform: translateY(-20px) rotate(10deg); opacity: 0.3; }
 }
 
-/* ========== 主内容区 ========== */
-.login-content {
-  display: flex;
-  min-height: 100vh;
-  position: relative;
-  z-index: 1;
-}
-
-/* ========== 左侧品牌区 ========== */
-.brand-section {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 60px;
-  animation: slideInLeft 0.8s ease-out;
-}
-
-@keyframes slideInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-40px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.brand-content {
-  max-width: 480px;
-}
-
-/* 品牌Logo */
+// ========== 品牌Logo ==========
 .brand-logo {
   position: relative;
-  width: 100px;
-  height: 100px;
-  margin-bottom: 40px;
+  width: 80px;
+  height: 80px;
+
+  @media (min-width: 1024px) {
+    width: 100px;
+    height: 100px;
+  }
 }
 
 .logo-ring {
   position: absolute;
   inset: 0;
-  border: 1px solid @primary-gold;
+  border: 1px solid var(--primary);
   border-radius: 50%;
   animation: ringPulse 3s ease-in-out infinite;
 }
@@ -699,247 +595,120 @@ async function handleSmsLogin() {
 
 .logo-core {
   position: absolute;
-  inset: 15px;
+  inset: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, rgba(212, 168, 83, 0.15) 0%, rgba(212, 168, 83, 0.05) 100%);
+  background: linear-gradient(135deg, oklch(0.55 0.14 270 / 0.12) 0%, oklch(0.55 0.14 270 / 0.04) 100%);
   border-radius: 50%;
-  border: 1px solid @border-subtle;
-}
+  border: 1px solid oklch(0.55 0.14 270 / 0.15);
 
-.logo-icon {
-  width: 36px;
-  height: 36px;
-  color: @primary-gold;
-}
-
-/* 品牌标题 */
-.brand-title {
-  font-family: 'Playfair Display', serif;
-  font-size: 52px;
-  font-weight: 700;
-  color: @text-primary;
-  margin-bottom: 16px;
-  letter-spacing: -1px;
-  line-height: 1.1;
-
-  .title-gold {
-    color: @primary-gold;
-    font-style: italic;
+  @media (min-width: 1024px) {
+    inset: 15px;
   }
 }
 
-.brand-tagline {
-  font-size: 15px;
-  color: @text-secondary;
-  margin-bottom: 48px;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-}
-
-/* 特性网格 */
-.features-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
+// ========== 特性卡片 ==========
 .feature-card {
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 16px 20px;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid @border-subtle;
+  gap: 12px;
+  padding: 12px 16px;
+  background: oklch(0.55 0.14 270 / 0.03);
+  border: 1px solid oklch(0.55 0.14 270 / 0.1);
   border-radius: 12px;
   transition: all 0.3s ease;
+  flex: 1;
+  min-width: 0;
+
+  @media (min-width: 1024px) {
+    flex: none;
+    min-width: auto;
+  }
 
   &:hover {
-    background: rgba(212, 168, 83, 0.05);
-    border-color: @border-active;
-    transform: translateX(8px);
+    background: oklch(0.55 0.14 270 / 0.06);
+    border-color: oklch(0.55 0.14 270 / 0.2);
+    transform: translateX(4px);
 
     .feature-icon {
-      color: @primary-gold;
+      color: var(--primary);
       transform: scale(1.1);
     }
   }
 }
 
 .feature-icon {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: @text-muted;
+  color: var(--muted-foreground);
   transition: all 0.3s ease;
-
-  svg {
-    width: 24px;
-    height: 24px;
-  }
+  flex-shrink: 0;
 }
 
-.feature-text {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.feature-label {
-  font-size: 15px;
-  font-weight: 600;
-  color: @text-primary;
-}
-
-.feature-desc {
-  font-size: 13px;
-  color: @text-muted;
-}
-
-/* ========== 右侧登录区 ========== */
-.login-section {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 80px;
-  animation: slideInRight 0.8s ease-out 0.2s both;
-}
-
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(40px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* 登录卡片 */
+// ========== 登录卡片 ==========
 .login-card {
   position: relative;
   width: 100%;
-  max-width: 420px;
 }
 
 .card-border {
   position: absolute;
   inset: -1px;
   border-radius: 24px;
-  background: linear-gradient(135deg, @primary-gold 0%, transparent 50%, @primary-gold 100%);
-  opacity: 0.3;
+  background: linear-gradient(135deg, var(--primary) 0%, transparent 50%, var(--primary) 100%);
+  opacity: 0.2;
   padding: 1px;
 
   &::before {
     content: '';
     position: absolute;
     inset: 1px;
-    background: @card-bg;
+    background: var(--card);
     border-radius: 23px;
   }
 }
 
 .card-inner {
   position: relative;
-  background: @card-bg;
+  background: var(--card);
   backdrop-filter: blur(20px);
   border-radius: 24px;
-  padding: 48px 40px;
-  border: 1px solid @border-subtle;
-}
-
-/* 卡片标题 */
-.card-header {
-  text-align: center;
-  margin-bottom: 36px;
-}
-
-.login-title {
-  font-family: 'Playfair Display', serif;
-  font-size: 32px;
-  font-weight: 600;
-  color: @text-primary;
-  margin-bottom: 8px;
-}
-
-.login-subtitle {
-  font-size: 14px;
-  color: @text-muted;
-  margin: 0;
-}
-
-/* ========== 表单样式 ========== */
-.login-form {
-  .form-item {
-    margin-bottom: 24px;
-  }
-
-  .form-label {
-    display: block;
-    font-size: 13px;
-    font-weight: 500;
-    color: @text-secondary;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-    margin-bottom: 8px;
-  }
-
-  .error-message {
-    display: block;
-    color: #E5484D;
-    font-size: 12px;
-    margin-top: 6px;
-  }
-
-  &.has-error {
-    .custom-input {
-      border-color: #E5484D !important;
-      background: rgba(229, 72, 77, 0.05) !important;
-    }
-  }
+  border: 1px solid oklch(0.55 0.14 270 / 0.1);
 }
 
+// ========== 输入框 ==========
 .input-wrapper {
-  position: relative;
   display: flex;
   align-items: center;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid @border-subtle;
+  background: oklch(0.55 0.14 270 / 0.03);
+  border: 1px solid oklch(0.55 0.14 270 / 0.12);
   border-radius: 12px;
-  height: 52px;
+  height: 48px;
   transition: all 0.3s ease;
 
+  @media (min-width: 640px) {
+    height: 52px;
+  }
+
   &:hover {
-    border-color: @border-active;
-    background: rgba(255, 255, 255, 0.05);
+    border-color: oklch(0.55 0.14 270 / 0.25);
+    background: oklch(0.55 0.14 270 / 0.05);
   }
 
   &:focus-within {
-    border-color: @primary-gold;
-    background: rgba(255, 255, 255, 0.05);
-    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.1);
-
-    .input-glow {
-      opacity: 1;
-    }
+    border-color: var(--primary);
+    background: oklch(0.55 0.14 270 / 0.05);
+    box-shadow: 0 0 0 3px oklch(0.55 0.14 270 / 0.1);
   }
-}
 
-.input-prefix {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: 16px;
-  color: @text-muted;
-}
-
-.input-icon {
-  font-size: 18px;
+  &.border-destructive {
+    border-color: var(--destructive) !important;
+    background: oklch(0.58 0.22 25 / 0.05) !important;
+  }
 }
 
 .custom-input {
@@ -948,79 +717,41 @@ async function handleSmsLogin() {
   padding: 0 16px 0 12px;
   border: none;
   background: transparent;
-  color: @text-primary;
+  color: var(--foreground);
   font-size: 15px;
   outline: none;
 
   &::placeholder {
-    color: @text-muted;
-  }
-
-  &.input-error {
-    border-color: #E5484D;
-  }
-}
-
-.input-glow {
-  position: absolute;
-  inset: 0;
-  border-radius: 12px;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  box-shadow: 0 0 20px rgba(212, 168, 83, 0.15);
-}
-
-/* 验证码行 */
-.code-row {
-  display: flex;
-  gap: 12px;
-
-  .code-input {
-    flex: 1;
+    color: var(--muted-foreground);
   }
 }
 
+// ========== 验证码按钮 ==========
 .code-btn {
-  height: 52px;
-  padding: 0 20px;
-  border-radius: 12px;
   background: transparent;
-  border: 1px solid @border-subtle;
-  color: @primary-gold;
+  border: 1px solid oklch(0.55 0.14 270 / 0.15);
+  color: var(--primary);
   font-weight: 500;
-  font-size: 14px;
-  white-space: nowrap;
   transition: all 0.3s ease;
 
   &:hover:not(:disabled) {
-    background: rgba(212, 168, 83, 0.1);
-    border-color: @primary-gold;
+    background: oklch(0.55 0.14 270 / 0.08);
+    border-color: var(--primary);
   }
 
   &:disabled {
-    color: @text-muted;
-    border-color: @border-subtle;
+    color: var(--muted-foreground);
+    border-color: oklch(0.55 0.14 270 / 0.1);
     opacity: 0.6;
   }
 }
 
-/* 提交按钮 */
-.submit-item {
-  margin-top: 32px;
-  margin-bottom: 0;
-}
-
+// ========== 提交按钮 ==========
 .submit-btn {
-  height: 56px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, @primary-gold 0%, @primary-gold-dark 100%);
+  background: linear-gradient(135deg, var(--primary) 0%, oklch(0.48 0.16 270) 100%);
   border: none;
-  font-size: 16px;
-  font-weight: 600;
-  color: @deep-black;
+  color: oklch(0.99 0 0);
   letter-spacing: 1px;
-  transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
 
@@ -1028,22 +759,18 @@ async function handleSmsLogin() {
     content: '';
     position: absolute;
     inset: 0;
-    background: linear-gradient(135deg, @primary-gold-light 0%, @primary-gold 100%);
+    background: linear-gradient(135deg, oklch(0.60 0.14 270) 0%, var(--primary) 100%);
     opacity: 0;
     transition: opacity 0.3s ease;
   }
 
   &:hover:not(:disabled) {
     transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(212, 168, 83, 0.3);
+    box-shadow: 0 8px 24px oklch(0.55 0.14 270 / 0.25);
 
     &::before {
       opacity: 1;
     }
-
-    .btn-arrow {
-      transform: translateX(4px);
-    }
   }
 
   &:active {
@@ -1054,25 +781,14 @@ async function handleSmsLogin() {
     opacity: 0.7;
     cursor: not-allowed;
   }
-
-  .btn-text,
-  .btn-arrow {
-    position: relative;
-    z-index: 1;
-  }
-
-  .btn-arrow {
-    margin-left: 8px;
-    transition: transform 0.3s ease;
-  }
 }
 
-/* 自定义加载动画 */
+// ========== 加载动画 ==========
 .custom-spinner {
   width: 18px;
   height: 18px;
-  border: 2px solid rgba(10, 11, 13, 0.2);
-  border-top-color: @deep-black;
+  border: 2px solid oklch(0.99 0 0 / 0.3);
+  border-top-color: oklch(0.99 0 0);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 
@@ -1086,253 +802,50 @@ async function handleSmsLogin() {
   to { transform: rotate(360deg); }
 }
 
-/* 卡片底部 */
-.card-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  margin-top: 32px;
-  padding-top: 24px;
-  border-top: 1px solid @border-subtle;
+// ========== 动画 ==========
+.animate-fade-in {
+  animation: fadeIn 0.8s ease-out;
 }
 
-.footer-line {
-  flex: 1;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, @border-subtle, transparent);
+.animate-slide-up {
+  animation: slideUp 0.8s ease-out 0.2s both;
 }
 
-.footer-text {
-  font-size: 12px;
-  color: @text-muted;
-  letter-spacing: 1px;
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateX(-30px); }
+  to { opacity: 1; transform: translateX(0); }
 }
 
-/* ========== 响应式设计 ========== */
-@media (max-width: 1200px) {
-  .brand-title {
-    font-size: 44px;
-  }
-
-  .login-section {
-    padding: 60px;
-  }
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(30px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-@media (max-width: 992px) {
-  .login-content {
-    flex-direction: column;
+// ========== 移动端适配 ==========
+@media (max-width: 1023px) {
+  .animate-fade-in {
+    animation-name: fadeInUp;
   }
 
-  .brand-section {
-    padding: 40px 30px;
-    animation: slideInUp 0.8s ease-out;
+  @keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
   }
 
-  @keyframes slideInUp {
-    from {
-      opacity: 0;
-      transform: translateY(30px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .brand-logo {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 24px;
-  }
-
-  .logo-core {
-    inset: 12px;
-  }
-
-  .logo-icon {
-    width: 28px;
-    height: 28px;
-  }
-
-  .brand-title {
-    font-size: 36px;
-    text-align: center;
-  }
-
-  .brand-tagline {
-    text-align: center;
-    margin-bottom: 32px;
-  }
-
-  .features-grid {
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 12px;
+  .animate-slide-up {
+    animation-delay: 0.1s;
   }
 
   .feature-card {
-    flex: 1;
-    min-width: 200px;
-    max-width: 280px;
-    padding: 12px 16px;
-  }
-
-  .login-section {
-    padding: 30px;
-    animation: slideInUp 0.8s ease-out 0.2s both;
-  }
-
-  .card-inner {
-    padding: 36px 32px;
+    flex: 1 1 calc(50% - 6px);
+    max-width: 200px;
   }
 }
 
-@media (max-width: 768px) {
-  .floating-shapes {
-    display: none;
-  }
-
-  .brand-section {
-    padding: 32px 20px;
-  }
-
-  .brand-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-
-  .brand-title {
-    font-size: 32px;
-  }
-
-  .brand-tagline {
-    font-size: 13px;
-    letter-spacing: 1.5px;
-  }
-
-  .features-grid {
-    flex-direction: column;
-    width: 100%;
-    max-width: 320px;
-  }
-
+@media (max-width: 639px) {
   .feature-card {
+    flex: 1 1 100%;
     max-width: 100%;
   }
-
-  .login-section {
-    padding: 20px 20px 40px;
-  }
-
-  .login-card {
-    max-width: 100%;
-  }
-
-  .card-inner {
-    padding: 32px 24px;
-    border-radius: 20px;
-  }
-
-  .login-title {
-    font-size: 28px;
-  }
-
-  .code-row {
-    flex-direction: column;
-    gap: 12px;
-
-    .code-btn {
-      width: 100%;
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .brand-section {
-    padding: 24px 16px;
-  }
-
-  .brand-logo {
-    width: 64px;
-    height: 64px;
-    margin-bottom: 20px;
-  }
-
-  .logo-core {
-    inset: 10px;
-  }
-
-  .logo-icon {
-    width: 22px;
-    height: 22px;
-  }
-
-  .brand-title {
-    font-size: 28px;
-  }
-
-  .brand-tagline {
-    font-size: 12px;
-    margin-bottom: 24px;
-  }
-
-  .feature-card {
-    padding: 10px 14px;
-  }
-
-  .feature-icon {
-    width: 36px;
-    height: 36px;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .feature-label {
-    font-size: 14px;
-  }
-
-  .feature-desc {
-    font-size: 12px;
-  }
-
-  .login-section {
-    padding: 16px 16px 32px;
-  }
-
-  .card-inner {
-    padding: 28px 20px;
-    border-radius: 16px;
-  }
-
-  .login-title {
-    font-size: 24px;
-  }
-
-  .login-subtitle {
-    font-size: 13px;
-  }
-
-  .input-wrapper {
-    height: 48px;
-  }
-
-  .code-btn,
-  .submit-btn {
-    height: 48px;
-    font-size: 15px;
-  }
-
-  .card-footer {
-    margin-top: 24px;
-    padding-top: 20px;
-  }
 }
 </style>