From 8b06017d020aaf0e4249bf7666454fb99986bc62 Mon Sep 17 00:00:00 2001
From: Yuzhiran Dev <dev@yuzhiran.com>
Date: Sat, 11 Jul 2026 16:48:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BA=AE=E8=89=B2=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=85=A8=E6=96=B0=E9=85=8D=E8=89=B2(=E8=93=9D=E7=B4=AB)+?=
 =?UTF-8?q?=E8=B6=8B=E5=8A=BF=E7=AD=9B=E9=80=89=E6=8D=A2=E8=A1=8C+?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E9=A1=B5=E9=9D=A2=E7=A1=AC=E7=BC=96=E7=A0=81?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E4=B8=BACSS=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/App.vue                            | 168 +++++++++---------
 client/src/pages.json                         |  16 +-
 .../src/pages/achievements/achievements.vue   |   6 +-
 client/src/pages/chat/chat.vue                |   8 +-
 client/src/pages/dimension/dimension.vue      |   4 +-
 client/src/pages/leaderboard/leaderboard.vue  |   2 +-
 client/src/pages/payment/payment.vue          |   2 +-
 client/src/pages/profile/profile.vue          |  14 +-
 client/src/pages/progress/progress.vue        |  12 +-
 client/src/pages/trend/trend.vue              |  10 +-
 client/src/styles/theme.scss                  |  16 +-
 11 files changed, 131 insertions(+), 127 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 0c6fc75..631fbae 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -47,16 +47,16 @@ function applyTabBarTheme(theme) {
   try {
     if (theme === 'dark') {
       uni.setTabBarStyle({
-        color: 'rgba(255,255,255,0.25)',
-        selectedColor: '#b388ff',
-        backgroundColor: '#08080f',
+        color: 'rgba(255,255,255,0.35)',
+        selectedColor: '#a78bfa',
+        backgroundColor: '#0d0d1a',
         borderStyle: 'black'
       })
     } else {
       uni.setTabBarStyle({
-        color: 'rgba(0,0,0,0.35)',
-        selectedColor: '#7c4dff',
-        backgroundColor: '#ffffff',
+        color: 'rgba(99,102,241,0.4)',
+        selectedColor: '#6366f1',
+        backgroundColor: '#f0f2f8',
         borderStyle: 'white'
       })
     }
@@ -69,82 +69,82 @@ function applyTabBarTheme(theme) {
 <style>
 /* ============================================
    宇之然AI维度 — 全局主题
-   默认：亮色模式  |  .theme-dark：暗色模式
+   默认：亮色模式（蓝紫主题）  |  .theme-dark：暗色模式
    ============================================ */
 
-/* ---- 亮色模式（默认） ---- */
+/* ---- 亮色模式（默认：蓝紫科技主题） ---- */
 page, .theme-light {
-  /* 基础色 — 清爽浅灰 */
-  --bg-primary: #f5f5f7;
-  --bg-secondary: #ffffff;
-  --bg-tertiary: #e8e8ed;
+  /* 基础色 — 蓝紫科技灰 */
+  --bg-primary: #f0f2f8;
+  --bg-secondary: #f5f6fb;
+  --bg-tertiary: #e8eaf3;
 
-  /* 玻璃拟态 */
-  --glass-bg: rgba(255, 255, 255, 0.7);
-  --glass-border: rgba(0, 0, 0, 0.06);
-  --glass-hover: rgba(255, 255, 255, 0.85);
-  --glass-hover-border: rgba(0, 0, 0, 0.1);
-  --glass-strong: rgba(255, 255, 255, 0.9);
-  --glass-dim-bg: rgba(139, 92, 246, 0.05);
+  /* 玻璃拟态 — 蓝紫玻璃 */
+  --glass-bg: rgba(99, 102, 241, 0.05);
+  --glass-border: rgba(99, 102, 241, 0.1);
+  --glass-hover: rgba(99, 102, 241, 0.08);
+  --glass-hover-border: rgba(99, 102, 241, 0.15);
+  --glass-strong: rgba(99, 102, 241, 0.08);
+  --glass-dim-bg: rgba(99, 102, 241, 0.03);
 
-  /* 文字 */
-  --text-primary: rgba(0, 0, 0, 0.88);
-  --text-secondary: rgba(0, 0, 0, 0.55);
-  --text-tertiary: rgba(0, 0, 0, 0.4);
-  --text-muted: rgba(0, 0, 0, 0.25);
-  --text-disabled: rgba(0, 0, 0, 0.2);
+  /* 文字 — 深色高对比 */
+  --text-primary: #1a1a2e;
+  --text-secondary: rgba(26, 26, 46, 0.65);
+  --text-tertiary: rgba(26, 26, 46, 0.45);
+  --text-muted: rgba(26, 26, 46, 0.28);
+  --text-disabled: rgba(26, 26, 46, 0.18);
 
-  /* 品牌色 */
-  --color-brand: #7c4dff;
-  --color-brand-light: #b388ff;
-  --color-brand-dark: #651fff;
-  --color-brand-bg: rgba(124, 77, 255, 0.08);
-  --color-brand-glow: rgba(124, 77, 255, 0.12);
+  /* 品牌色 — 蓝紫 */
+  --color-brand: #6366f1;
+  --color-brand-light: #818cf8;
+  --color-brand-dark: #4f46e5;
+  --color-brand-bg: rgba(99, 102, 241, 0.08);
+  --color-brand-glow: rgba(99, 102, 241, 0.1);
 
-  /* 维度色 */
-  --dim1-color: #7c4dff;
-  --dim1-bg: rgba(124, 77, 255, 0.08);
-  --dim1-icon-bg: rgba(124, 77, 255, 0.15);
-  --dim1-border: rgba(124, 77, 255, 0.15);
-  --dim1-glow: rgba(124, 77, 255, 0.06);
+  /* 维度色 — 保持可识别性，亮色模式加饱和度 */
+  --dim1-color: #6366f1;
+  --dim1-bg: rgba(99, 102, 241, 0.08);
+  --dim1-icon-bg: rgba(99, 102, 241, 0.14);
+  --dim1-border: rgba(99, 102, 241, 0.16);
+  --dim1-glow: rgba(99, 102, 241, 0.05);
 
-  --dim2-color: #0ea5e9;
-  --dim2-bg: rgba(14, 165, 233, 0.08);
-  --dim2-icon-bg: rgba(14, 165, 233, 0.15);
-  --dim2-border: rgba(14, 165, 233, 0.15);
-  --dim2-glow: rgba(14, 165, 233, 0.06);
+  --dim2-color: #0891b2;
+  --dim2-bg: rgba(8, 145, 178, 0.08);
+  --dim2-icon-bg: rgba(8, 145, 178, 0.14);
+  --dim2-border: rgba(8, 145, 178, 0.16);
+  --dim2-glow: rgba(8, 145, 178, 0.05);
 
-  --dim3-color: #10b981;
-  --dim3-bg: rgba(16, 185, 129, 0.08);
-  --dim3-icon-bg: rgba(16, 185, 129, 0.15);
-  --dim3-border: rgba(16, 185, 129, 0.15);
-  --dim3-glow: rgba(16, 185, 129, 0.06);
+  --dim3-color: #059669;
+  --dim3-bg: rgba(5, 150, 105, 0.08);
+  --dim3-icon-bg: rgba(5, 150, 105, 0.14);
+  --dim3-border: rgba(5, 150, 105, 0.16);
+  --dim3-glow: rgba(5, 150, 105, 0.05);
 
-  --dim4-color: #f59e0b;
-  --dim4-bg: rgba(245, 158, 11, 0.08);
-  --dim4-icon-bg: rgba(245, 158, 11, 0.15);
-  --dim4-border: rgba(245, 158, 11, 0.15);
-  --dim4-glow: rgba(245, 158, 11, 0.06);
+  --dim4-color: #d97706;
+  --dim4-bg: rgba(217, 119, 6, 0.08);
+  --dim4-icon-bg: rgba(217, 119, 6, 0.14);
+  --dim4-border: rgba(217, 119, 6, 0.16);
+  --dim4-glow: rgba(217, 119, 6, 0.05);
 
-  --dim5-color: #ef4444;
-  --dim5-bg: rgba(239, 68, 68, 0.08);
-  --dim5-icon-bg: rgba(239, 68, 68, 0.15);
-  --dim5-border: rgba(239, 68, 68, 0.15);
-  --dim5-glow: rgba(239, 68, 68, 0.06);
+  --dim5-color: #dc2626;
+  --dim5-bg: rgba(220, 38, 38, 0.08);
+  --dim5-icon-bg: rgba(220, 38, 38, 0.14);
+  --dim5-border: rgba(220, 38, 38, 0.16);
+  --dim5-glow: rgba(220, 38, 38, 0.05);
 
   /* 功能色 */
-  --color-free: #10b981;
-  --color-free-bg: rgba(16, 185, 129, 0.1);
-  --color-pro: #f59e0b;
-  --color-pro-bg: rgba(245, 158, 11, 0.1);
-  --color-vip: #ef4444;
-  --color-vip-bg: rgba(239, 68, 68, 0.1);
-  --color-hot: #ef4444;
-  --color-hot-bg: rgba(239, 68, 68, 0.12);
-  --color-new: #0ea5e9;
-  --color-new-bg: rgba(14, 165, 233, 0.12);
-  --color-pick: #7c4dff;
-  --color-pick-bg: rgba(124, 77, 255, 0.12);
+  --color-free: #059669;
+  --color-free-bg: rgba(5, 150, 105, 0.1);
+  --color-pro: #d97706;
+  --color-pro-bg: rgba(217, 119, 6, 0.1);
+  --color-vip: #dc2626;
+  --color-vip-bg: rgba(220, 38, 38, 0.1);
+  --color-hot: #dc2626;
+  --color-hot-bg: rgba(220, 38, 38, 0.12);
+  --color-new: #0891b2;
+  --color-new-bg: rgba(8, 145, 178, 0.12);
+  --color-pick: #6366f1;
+  --color-pick-bg: rgba(99, 102, 241, 0.12);
 
   /* 圆角/间距/过渡 */
   --radius-sm: 8px;
@@ -161,8 +161,8 @@ page, .theme-light {
   --blur-bg: 20px;
   --transition-fast: 0.2s ease;
   --transition-normal: 0.3s ease;
-  --glow-brand: 0 0 20px rgba(124, 77, 255, 0.08);
-  --glow-brand-strong: 0 0 30px rgba(124, 77, 255, 0.12);
+  --glow-brand: 0 0 20px rgba(99, 102, 241, 0.08);
+  --glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.12);
 }
 
 /* ---- 暗色模式 ---- */
@@ -177,7 +177,7 @@ page, .theme-light {
   --glass-hover: rgba(255, 255, 255, 0.1);
   --glass-hover-border: rgba(255, 255, 255, 0.15);
   --glass-strong: rgba(255, 255, 255, 0.12);
-  --glass-dim-bg: rgba(124, 77, 255, 0.06);
+  --glass-dim-bg: rgba(99, 102, 241, 0.06);
 
   --text-primary: rgba(255, 255, 255, 0.95);
   --text-secondary: rgba(255, 255, 255, 0.7);
@@ -185,17 +185,17 @@ page, .theme-light {
   --text-muted: rgba(255, 255, 255, 0.3);
   --text-disabled: rgba(255, 255, 255, 0.15);
 
-  --color-brand: #8b5cf6;
-  --color-brand-light: #a78bfa;
-  --color-brand-dark: #7c3aed;
-  --color-brand-bg: rgba(139, 92, 246, 0.12);
-  --color-brand-glow: rgba(139, 92, 246, 0.15);
+  --color-brand: #818cf8;
+  --color-brand-light: #a5b4fc;
+  --color-brand-dark: #6366f1;
+  --color-brand-bg: rgba(99, 102, 241, 0.12);
+  --color-brand-glow: rgba(99, 102, 241, 0.15);
 
   --dim1-color: #a78bfa;
-  --dim1-bg: rgba(139, 92, 246, 0.12);
-  --dim1-icon-bg: rgba(139, 92, 246, 0.2);
-  --dim1-border: rgba(139, 92, 246, 0.18);
-  --dim1-glow: rgba(139, 92, 246, 0.08);
+  --dim1-bg: rgba(99, 102, 241, 0.12);
+  --dim1-icon-bg: rgba(99, 102, 241, 0.2);
+  --dim1-border: rgba(99, 102, 241, 0.18);
+  --dim1-glow: rgba(99, 102, 241, 0.08);
 
   --dim2-color: #60a5fa;
   --dim2-bg: rgba(96, 165, 250, 0.12);
@@ -232,10 +232,10 @@ page, .theme-light {
   --color-new: #60a5fa;
   --color-new-bg: rgba(96, 165, 250, 0.15);
   --color-pick: #a78bfa;
-  --color-pick-bg: rgba(139, 92, 246, 0.15);
+  --color-pick-bg: rgba(99, 102, 241, 0.15);
 
-  --glow-brand: 0 0 20px rgba(139, 92, 246, 0.1);
-  --glow-brand-strong: 0 0 30px rgba(139, 92, 246, 0.15);
+  --glow-brand: 0 0 20px rgba(99, 102, 241, 0.1);
+  --glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.15);
 }
 
 /* 全局排版 */
diff --git a/client/src/pages.json b/client/src/pages.json
index a0a08c5..4d9e8a0 100644
--- a/client/src/pages.json
+++ b/client/src/pages.json
@@ -20,18 +20,18 @@
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "宇之然AI维度",
-    "navigationBarBackgroundColor": "#f5f5f7",
-    "backgroundColor": "#f5f5f7",
-    "backgroundColorTop": "#f5f5f7",
-    "backgroundColorBottom": "#f5f5f7",
+    "navigationBarBackgroundColor": "#f0f2f8",
+    "backgroundColor": "#f0f2f8",
+    "backgroundColorTop": "#f0f2f8",
+    "backgroundColorBottom": "#f0f2f8",
     "app-plus": {
-      "background": "#f5f5f7"
+      "background": "#f0f2f8"
     }
   },
   "tabBar": {
-    "color": "rgba(0,0,0,0.35)",
-    "selectedColor": "#7c4dff",
-    "backgroundColor": "#ffffff",
+    "color": "rgba(99,102,241,0.4)",
+    "selectedColor": "#6366f1",
+    "backgroundColor": "#f0f2f8",
     "borderStyle": "white",
     "list": [
       {"pagePath": "pages/index/index", "text": "探索"},
diff --git a/client/src/pages/achievements/achievements.vue b/client/src/pages/achievements/achievements.vue
index 017111f..a2304ca 100644
--- a/client/src/pages/achievements/achievements.vue
+++ b/client/src/pages/achievements/achievements.vue
@@ -200,7 +200,7 @@ function formatDate(dateStr) {
 
 .overview-bar {
   height: 4px;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
   border-radius: 2px;
   overflow: hidden;
   margin-bottom: 10px;
@@ -230,7 +230,7 @@ function formatDate(dateStr) {
   align-items: center;
   gap: 10px;
   padding: 0 0 10px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  border-bottom: 1px solid var(--glass-border);
   margin-bottom: 12px;
 }
 
@@ -284,7 +284,7 @@ function formatDate(dateStr) {
 }
 
 .achievement-item.locked .ach-icon {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg);
   color: var(--text-muted);
 }
 
diff --git a/client/src/pages/chat/chat.vue b/client/src/pages/chat/chat.vue
index 51e62a7..d70b46f 100644
--- a/client/src/pages/chat/chat.vue
+++ b/client/src/pages/chat/chat.vue
@@ -374,8 +374,8 @@ function goShare() {
 }
 
 .chat-msg.assistant .bubble {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   color: var(--text-primary);
   border-bottom-left-radius: 4px;
 }
@@ -418,8 +418,8 @@ function goShare() {
 }
 
 .chat-input {
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
   padding: 10px 14px;
   display: flex;
diff --git a/client/src/pages/dimension/dimension.vue b/client/src/pages/dimension/dimension.vue
index 5b6ead0..964aac3 100644
--- a/client/src/pages/dimension/dimension.vue
+++ b/client/src/pages/dimension/dimension.vue
@@ -204,7 +204,7 @@ function goDetail(item) {
 
 .progress-track {
   height: 3px;
-  background: rgba(255,255,255,0.06);
+  background: var(--glass-bg);
   border-radius: 2px;
   margin-top: 16px;
   overflow: hidden;
@@ -240,7 +240,7 @@ function goDetail(item) {
   align-items: center;
   justify-content: center;
   font-size: 18px;
-  border: 1px solid rgba(255,255,255,0.06);
+  border: 1px solid var(--glass-border);
 }
 .k-info { flex: 1; }
 .k-title {
diff --git a/client/src/pages/leaderboard/leaderboard.vue b/client/src/pages/leaderboard/leaderboard.vue
index 81658c3..44fffef 100644
--- a/client/src/pages/leaderboard/leaderboard.vue
+++ b/client/src/pages/leaderboard/leaderboard.vue
@@ -169,7 +169,7 @@ function dimDotColor(id) {
   padding: 7px 16px;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--glass-border);
   font-size: 13px;
   color: var(--text-tertiary);
   transition: all 0.2s ease;
diff --git a/client/src/pages/payment/payment.vue b/client/src/pages/payment/payment.vue
index d0f7cd4..02dd338 100644
--- a/client/src/pages/payment/payment.vue
+++ b/client/src/pages/payment/payment.vue
@@ -321,7 +321,7 @@ function goBack() {
 }
 
 .benefit-item:not(:last-child) {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  border-bottom: 1px solid var(--glass-border);
 }
 
 .b-icon { font-size: 16px; }
diff --git a/client/src/pages/profile/profile.vue b/client/src/pages/profile/profile.vue
index a65aae8..1e31c13 100644
--- a/client/src/pages/profile/profile.vue
+++ b/client/src/pages/profile/profile.vue
@@ -366,11 +366,15 @@ function goSettings() {
 
 .progress-track {
   height: 3px;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
   border-radius: 2px;
   overflow: hidden;
 }
 
+.plan-progress .progress-track {
+  margin-top: 10px;
+}
+
 .progress-fill {
   height: 100%;
   background: linear-gradient(90deg, var(--dim1-color), var(--dim3-color));
@@ -417,7 +421,7 @@ function goSettings() {
 
 .quota-bar {
   height: 4px;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
   border-radius: 2px;
   overflow: hidden;
   margin-bottom: 8px;
@@ -450,7 +454,7 @@ function goSettings() {
 
 // 菜单
 .menu-section {
-  border-top: 1px solid rgba(255, 255, 255, 0.04);
+  border-top: 1px solid var(--glass-border);
 }
 
 .menu-item {
@@ -458,7 +462,7 @@ function goSettings() {
   align-items: center;
   gap: 14px;
   padding: 14px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  border-bottom: 1px solid var(--glass-border);
 }
 
 .m-icon {
@@ -498,7 +502,7 @@ function goSettings() {
   margin-top: 20px;
   font-size: 14px;
   color: var(--dim1-color);
-  border-top: 1px solid rgba(255, 255, 255, 0.04);
+  border-top: 1px solid var(--glass-border);
 }
 
 .action-btn.logout {
diff --git a/client/src/pages/progress/progress.vue b/client/src/pages/progress/progress.vue
index 040ea43..7d2c2fc 100644
--- a/client/src/pages/progress/progress.vue
+++ b/client/src/pages/progress/progress.vue
@@ -366,14 +366,14 @@ function goBack() {
 }
 
 .dim-icon-circle {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
+  background: var(--glass-bg);
+    height: 6px;
+    border-radius: 3px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--glass-border);
 }
 
 .dim-text {
@@ -427,13 +427,13 @@ function goBack() {
 }
 
 .ring-empty {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg);
 }
 
 // 展开内容
 .dim-card-body {
   padding: 0 16px 16px;
-  border-top: 1px solid rgba(255, 255, 255, 0.04);
+  border-top: 1px solid var(--glass-border);
 }
 
 .progress-detail {
diff --git a/client/src/pages/trend/trend.vue b/client/src/pages/trend/trend.vue
index b58a391..7eaf6ae 100644
--- a/client/src/pages/trend/trend.vue
+++ b/client/src/pages/trend/trend.vue
@@ -213,15 +213,15 @@ function getSampleData() {
 // 筛选栏
 .filter-bar {
   padding: 0 20px 12px;
-  white-space: nowrap;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
 .filter-item {
-  display: inline-block;
   padding: 6px 14px;
-  margin-right: 8px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: 16px;
   font-size: 13px;
   color: var(--text-secondary);
diff --git a/client/src/styles/theme.scss b/client/src/styles/theme.scss
index e8df101..16def53 100644
--- a/client/src/styles/theme.scss
+++ b/client/src/styles/theme.scss
@@ -10,16 +10,16 @@
  */
 
 /* ---- SCSS 变量（方便组件内使用） ---- */
-$color-brand: #7c4dff;
-$color-brand-light: #b388ff;
-$color-bg-primary: #f5f5f7;
+$color-brand: #6366f1;
+$color-brand-light: #818cf8;
+$color-bg-primary: #f0f2f8;
 $color-bg-dark: #14141e;
 
-$dim1-color: #7c4dff;
-$dim2-color: #0ea5e9;
-$dim3-color: #10b981;
-$dim4-color: #f59e0b;
-$dim5-color: #ef4444;
+$dim1-color: #6366f1;
+$dim2-color: #0891b2;
+$dim3-color: #059669;
+$dim4-color: #d97706;
+$dim5-color: #dc2626;
 
 /* 全局排版 */
 page {