style: 首页暗黑主题改造

Yi.Ai.Vue3/src/styles/var.scss

@@ -220,14 +220,15 @@
 /* ========== 暗色模式变量 ========== */
 [data-theme="dark"] {
   /* ========== 颜色系统 ========== */
-  --color-primary: #60a5fa;
+  /* 主色调 - 绿色系 */
-  --color-primary-light: #93c5fd;
+  --color-primary: #00ff88;
-  --color-primary-lighter: #bfdbfe;
+  --color-primary-light: #00d36e;
-  --color-primary-dark: #3b82f6;
+  --color-primary-lighter: #00ff88;
-  --color-primary-darker: #2563eb;
+  --color-primary-dark: #00c060;
+  --color-primary-darker: #00a850;
 
   /* 辅助色 */
-  --color-success: #34d399;
+  --color-success: #00d36e;
   --color-warning: #fbbf24;
   --color-danger: #f87171;
   --color-info: #9ca3af;
@@ -247,33 +248,33 @@
   --color-gray-900: #f9fafb;
 
   /* ========== 头部区域 ========== */
-  --header-background-color: #1f2937;
+  --header-background-color: rgba(10, 10, 10, 0.9);
   --header-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  --header-text-color: #f3f4f6;
+  --header-text-color: #ffffff;
   --header-icon-color: #9ca3af;
-  --header-border: 1px solid #374151;
+  --header-border: 1px solid rgba(0, 255, 136, 0.1);
 
   /* ========== 侧边栏区域 ========== */
-  --sidebar-background-color: #111827;
+  --sidebar-background-color: #04080b;
-  --sidebar-active-bg-color: #374151;
+  --sidebar-active-bg-color: rgba(0, 255, 136, 0.15);
-  --sidebar-active-text-color: #f9fafb;
+  --sidebar-active-text-color: #00ff88;
-  --sidebar-hover-bg-color: #374151;
+  --sidebar-hover-bg-color: rgba(0, 255, 136, 0.08);
-  --sidebar-text-color: #d1d5db;
+  --sidebar-text-color: #a0a0a0;
   --sidebar-icon-color: #9ca3af;
-  --sidebar-border-color: rgba(255, 255, 255, 0.08);
+  --sidebar-border-color: rgba(0, 255, 136, 0.15);
 
   /* ========== 主要内容区域 ========== */
-  --content-background-color: #111827;
+  --content-background-color: transparent;
 
   /* ========== 聊天区域 ========== */
-  --chat-container-bg: #111827;
+  --chat-container-bg: transparent;
-  --chat-sender-bg: #1f2937;
+  --chat-sender-bg: #04080b;
-  --chat-sender-border: 1px solid #374151;
+  --chat-sender-border: 1px solid rgba(0, 255, 136, 0.2);
-  --chat-bubble-user-bg: #3b82f6;
+  --chat-bubble-user-bg: #00d36e;
-  --chat-bubble-user-text: #ffffff;
+  --chat-bubble-user-text: #000000;
-  --chat-bubble-ai-bg: #1f2937;
+  --chat-bubble-ai-bg: #04080b;
-  --chat-bubble-ai-text: #e5e7eb;
+  --chat-bubble-ai-text: #a0a0a0;
-  --chat-typing-indicator-color: #6b7280;
+  --chat-typing-indicator-color: #666;
 
   /* ========== 登录弹框 ========== */
   --login-dialog-logo-background: #1f2937;
@@ -283,32 +284,35 @@
   --login-dialog-input-focus-border: 1px solid #60a5fa;
 
   /* 文字颜色 */
-  --text-color-primary: #f9fafb;
+  --text-color-primary: #ffffff;
-  --text-color-secondary: #e5e7eb;
+  --text-color-secondary: #a0a0a0;
-  --text-color-tertiary: #9ca3af;
+  --text-color-tertiary: #666;
   --text-color-placeholder: #6b7280;
   --text-color-disabled: #4b5563;
-  --text-color-inverse: #111827;
+  --text-color-inverse: #000000;
 
   /* 背景颜色 */
-  --bg-color-primary: #111827;
+  --bg-color-primary: transparent;
-  --bg-color-secondary: #1f2937;
+  --bg-color-secondary: #04080b;
-  --bg-color-tertiary: #374151;
+  --bg-color-tertiary: #0a0a0a;
-  --bg-color-overlay: rgba(0, 0, 0, 0.7);
+  --bg-color-overlay: rgba(0, 0, 0, 0.8);
-  --bg-color-mask: rgba(0, 0, 0, 0.6);
+  --bg-color-mask: rgba(0, 0, 0, 0.7);
 
   /* ========== 边框 ========== */
-  --border-color-light: #374151;
+  --border-color-light: rgba(0, 255, 136, 0.15);
-  --border-color-default: #4b5563;
+  --border-color-default: rgba(0, 255, 136, 0.2);
-  --border-color-dark: #6b7280;
+  --border-color-dark: rgba(0, 255, 136, 0.3);
 
   /* ========== 阴影系统 ========== */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
+  --shadow-xl: 0 10px 25px rgba(0, 255, 136, 0.3);
   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
   --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+
+  /* 脉冲动画（主要按钮） */
+  --pulse-color: rgba(0, 255, 136, 0.4);
 }
 
 /* ========== 响应式断点 ========== */