From ffb23e75b456a74a2732c66a6d03d1fa36f2fdc0 Mon Sep 17 00:00:00 2001
From: Yuzhiran Dev <dev@yuzhiran.com>
Date: Fri, 10 Jul 2026 19:18:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2+?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E6=90=AD=E9=85=8D=E9=87=8D=E6=9E=84=20v2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复CSS变量未全局加载的问题（page选择器在H5中转为uni-page-body）
- 背景色由#050508改为#0a0a12（深空紫黑色，更耐看）
- 玻璃拟态透明度从3%提升到6%（卡片现在可见）
- 维度卡片背景从8%提升到12%（色彩更饱和）
- 文字层次重构：primary 0.95/ secondary 0.7/ tertiary 0.5/ muted 0.3
- 字体大小优化：dim-desc 12px, count 11px, news-title 14px
- 维度色系更新：紫#a78bfa/蓝#60a5fa/翠绿#34d399/金#fbbf24/玫瑰#fb7185
- 所有16个页面替换硬编码rgba颜色为CSS变量
- 卡片background/border替换为CSS变量
- 修复news.vue行号污染问题
---
 frontend/ai-dimension/src/App.vue             |  76 ++++++-
 .../src/pages/achievements/achievements.vue   |  16 +-
 frontend/ai-dimension/src/pages/chat/chat.vue |  14 +-
 .../src/pages/favorites/favorites.vue         |   6 +-
 .../ai-dimension/src/pages/index/index.vue    |  42 ++--
 .../src/pages/leaderboard/leaderboard.vue     |  12 +-
 .../src/pages/payment/payment.vue             |  12 +-
 .../src/pages/profile/profile.vue             |  18 +-
 .../ai-dimension/src/pages/search/search.vue  |   4 +-
 .../ai-dimension/src/pages/trend/trend.vue    |  22 +-
 frontend/ai-dimension/src/styles/theme.scss   | 215 +++++++-----------
 frontend/ai-dimension/vite.config.js          |   8 -
 package.json                                  |   5 +
 pnpm-workspace.yaml                           |   5 +
 upload-wx.js                                  |  30 +++
 15 files changed, 265 insertions(+), 220 deletions(-)
 create mode 100644 package.json
 create mode 100644 pnpm-workspace.yaml
 create mode 100644 upload-wx.js

diff --git a/frontend/ai-dimension/src/App.vue b/frontend/ai-dimension/src/App.vue
index 5b12154..598c37f 100644
--- a/frontend/ai-dimension/src/App.vue
+++ b/frontend/ai-dimension/src/App.vue
@@ -37,11 +37,85 @@ function applyTheme(theme) {
 </script>
 
 <style>
-/* 全局样式 */
+/* 全局样式 - 直接定义 CSS 变量（不通过 @import 避免循环） */
 page {
+  --bg-primary: #0a0a12;
+  --bg-secondary: #0d0d1a;
+  --bg-tertiary: #12102a;
+  --glass-bg: rgba(255, 255, 255, 0.06);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --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);
+  --text-primary: rgba(255, 255, 255, 0.95);
+  --text-secondary: rgba(255, 255, 255, 0.7);
+  --text-tertiary: rgba(255, 255, 255, 0.5);
+  --text-muted: rgba(255, 255, 255, 0.3);
+  --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);
+  --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);
+  --dim2-color: #60a5fa;
+  --dim2-bg: rgba(96, 165, 250, 0.12);
+  --dim2-icon-bg: rgba(96, 165, 250, 0.2);
+  --dim2-border: rgba(96, 165, 250, 0.18);
+  --dim2-glow: rgba(96, 165, 250, 0.08);
+  --dim3-color: #34d399;
+  --dim3-bg: rgba(52, 211, 153, 0.12);
+  --dim3-icon-bg: rgba(52, 211, 153, 0.2);
+  --dim3-border: rgba(52, 211, 153, 0.18);
+  --dim3-glow: rgba(52, 211, 153, 0.08);
+  --dim4-color: #fbbf24;
+  --dim4-bg: rgba(251, 191, 36, 0.12);
+  --dim4-icon-bg: rgba(251, 191, 36, 0.2);
+  --dim4-border: rgba(251, 191, 36, 0.18);
+  --dim4-glow: rgba(251, 191, 36, 0.08);
+  --dim5-color: #fb7185;
+  --dim5-bg: rgba(251, 113, 133, 0.12);
+  --dim5-icon-bg: rgba(251, 113, 133, 0.2);
+  --dim5-border: rgba(251, 113, 133, 0.18);
+  --dim5-glow: rgba(251, 113, 133, 0.08);
+  --color-free: #34d399;
+  --color-free-bg: rgba(52, 211, 153, 0.12);
+  --color-pro: #fbbf24;
+  --color-pro-bg: rgba(251, 191, 36, 0.12);
+  --color-vip: #fb7185;
+  --color-vip-bg: rgba(251, 113, 133, 0.12);
+  --color-hot: #fb7185;
+  --color-hot-bg: rgba(251, 113, 133, 0.15);
+  --color-new: #60a5fa;
+  --color-new-bg: rgba(96, 165, 250, 0.15);
+  --color-pick: #a78bfa;
+  --color-pick-bg: rgba(139, 92, 246, 0.15);
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-2xl: 24px;
+  --blur-bg: 20px;
+  --transition-fast: 0.2s ease;
+  --transition-normal: 0.3s ease;
+  --glow-brand: 0 0 20px rgba(139, 92, 246, 0.1);
+  --glow-brand-strong: 0 0 30px rgba(139, 92, 246, 0.15);
+
   background-color: var(--bg-primary);
   color: var(--text-secondary);
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 view {
diff --git a/frontend/ai-dimension/src/pages/achievements/achievements.vue b/frontend/ai-dimension/src/pages/achievements/achievements.vue
index 391521c..24861b5 100644
--- a/frontend/ai-dimension/src/pages/achievements/achievements.vue
+++ b/frontend/ai-dimension/src/pages/achievements/achievements.vue
@@ -215,7 +215,7 @@ function formatDate(dateStr) {
 
 .overview-text {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
 }
 
 // 成就分类
@@ -247,7 +247,7 @@ function formatDate(dateStr) {
 
 .category-count {
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.35);
+  color: var(--text-muted);
 }
 
 // 成就列表
@@ -285,7 +285,7 @@ function formatDate(dateStr) {
 
 .achievement-item.locked .ach-icon {
   background: rgba(255, 255, 255, 0.04);
-  color: rgba(255, 255, 255, 0.2);
+  color: var(--text-muted);
 }
 
 .ach-info {
@@ -298,7 +298,7 @@ function formatDate(dateStr) {
 
 .ach-name {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
@@ -307,7 +307,7 @@ function formatDate(dateStr) {
 
 .ach-desc {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.35);
+  color: var(--text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -320,7 +320,7 @@ function formatDate(dateStr) {
 }
 
 .achievement-item.locked .ach-date {
-  color: rgba(255, 255, 255, 0.2);
+  color: var(--text-muted);
 }
 
 // 空状态
@@ -341,14 +341,14 @@ function formatDate(dateStr) {
 
 .empty-text {
   font-size: 16px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
   display: block;
   margin-bottom: 6px;
 }
 
 .empty-sub {
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.25);
+  color: var(--text-muted);
   display: block;
 }
 </style>
diff --git a/frontend/ai-dimension/src/pages/chat/chat.vue b/frontend/ai-dimension/src/pages/chat/chat.vue
index b3f7921..3863909 100644
--- a/frontend/ai-dimension/src/pages/chat/chat.vue
+++ b/frontend/ai-dimension/src/pages/chat/chat.vue
@@ -244,7 +244,7 @@ function goShare() {
 
 .chat-status {
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-tertiary);
   display: block;
 }
 
@@ -280,7 +280,7 @@ function goShare() {
 
 .hint-text {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
 }
 
 .login-btn {
@@ -310,7 +310,7 @@ function goShare() {
 
 .welcome-text {
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
   display: block;
   margin-bottom: 10px;
 }
@@ -326,7 +326,7 @@ function goShare() {
   background: rgba(124, 77, 255, 0.08);
   border-radius: 8px;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-secondary);
 }
 
 // 消息列表
@@ -365,7 +365,7 @@ function goShare() {
 .chat-msg.assistant .bubble {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--text-primary);
   border-bottom-left-radius: 4px;
 }
 
@@ -420,14 +420,14 @@ function goShare() {
   flex: 1;
   height: 24px;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--text-primary);
   background: none;
   border: none;
   outline: none;
 }
 
 .input-field::placeholder {
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-muted);
 }
 
 .send-btn {
diff --git a/frontend/ai-dimension/src/pages/favorites/favorites.vue b/frontend/ai-dimension/src/pages/favorites/favorites.vue
index 0b5165e..d3af01a 100644
--- a/frontend/ai-dimension/src/pages/favorites/favorites.vue
+++ b/frontend/ai-dimension/src/pages/favorites/favorites.vue
@@ -178,7 +178,7 @@ function goHome() {
 
 .fav-title {
   font-size: 15px;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--text-primary);
   line-height: 1.5;
 }
 
@@ -221,14 +221,14 @@ function goHome() {
 
 .empty-text {
   font-size: 16px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
   display: block;
   margin-bottom: 6px;
 }
 
 .empty-sub {
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.25);
+  color: var(--text-muted);
   display: block;
   margin-bottom: 28px;
 }
diff --git a/frontend/ai-dimension/src/pages/index/index.vue b/frontend/ai-dimension/src/pages/index/index.vue
index 5a9bc10..28dcd14 100644
--- a/frontend/ai-dimension/src/pages/index/index.vue
+++ b/frontend/ai-dimension/src/pages/index/index.vue
@@ -200,8 +200,8 @@ function goNewsDetail(item) {
   letter-spacing: 1px;
 }
 .brand-text .subtitle {
-  font-size: 10px;
-  color: rgba(255,255,255,0.3);
+  font-size: 11px;
+  color: var(--text-muted);
   letter-spacing: 2px;
 }
 
@@ -212,8 +212,8 @@ function goNewsDetail(item) {
 .icon-btn {
   width: 36px; height: 36px;
   border-radius: 50%;
-  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);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -239,13 +239,13 @@ function goNewsDetail(item) {
 .greeting-desc {
   display: block;
   font-size: 13px;
-  color: rgba(255,255,255,0.3);
+  color: var(--text-tertiary);
   margin-top: 4px;
 }
 
 .search-bar {
-  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: 12px 16px;
   display: flex;
@@ -255,8 +255,8 @@ function goNewsDetail(item) {
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
 }
-.search-icon { color: rgba(255,255,255,0.2); }
-.search-placeholder { color: rgba(255,255,255,0.2); font-size: 14px; }
+.search-icon { color: var(--text-muted); }
+.search-placeholder { color: var(--text-muted); font-size: 14px; }
 
 .section-header {
   display: flex;
@@ -272,7 +272,7 @@ function goNewsDetail(item) {
 }
 .section-more {
   font-size: 12px;
-  color: rgba(255,255,255,0.25);
+  color: var(--text-muted);
 }
 
 .dim-grid {
@@ -285,7 +285,7 @@ function goNewsDetail(item) {
 .dim-card {
   border-radius: 18px;
   padding: 20px 16px;
-  border: 1px solid rgba(255,255,255,0.06);
+  border: 1px solid var(--glass-border);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
 }
@@ -311,14 +311,14 @@ function goNewsDetail(item) {
   display: block;
 }
 .dim-desc {
-  font-size: 11px;
-  color: rgba(255,255,255,0.3);
+  font-size: 12px;
+  color: var(--text-tertiary);
   line-height: 1.5;
   display: block;
 }
 .dim-count {
-  font-size: 10px;
-  color: rgba(255,255,255,0.15);
+  font-size: 11px;
+  color: var(--text-muted);
   margin-top: 10px;
   display: block;
 }
@@ -327,8 +327,8 @@ function goNewsDetail(item) {
   border-radius: 14px;
   padding: 14px 16px;
   margin-bottom: 10px;
-  background: rgba(255,255,255,0.03);
-  border: 1px solid rgba(255,255,255,0.05);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
 }
@@ -355,8 +355,8 @@ function goNewsDetail(item) {
 }
 
 .news-title {
-  font-size: 13px;
-  color: rgba(255,255,255,0.85);
+  font-size: 14px;
+  color: var(--text-primary);
   line-height: 1.5;
   margin-bottom: 8px;
   font-weight: 500;
@@ -366,8 +366,8 @@ function goNewsDetail(item) {
 .news-meta {
   display: flex;
   gap: 16px;
-  font-size: 10px;
-  color: rgba(255,255,255,0.2);
+  font-size: 11px;
+  color: var(--text-muted);
 }
 
 .bottom-spacer {
diff --git a/frontend/ai-dimension/src/pages/leaderboard/leaderboard.vue b/frontend/ai-dimension/src/pages/leaderboard/leaderboard.vue
index c6128d7..b9e2c5b 100644
--- a/frontend/ai-dimension/src/pages/leaderboard/leaderboard.vue
+++ b/frontend/ai-dimension/src/pages/leaderboard/leaderboard.vue
@@ -171,7 +171,7 @@ function dimDotColor(id) {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.06);
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
   transition: all 0.2s ease;
 }
 
@@ -223,7 +223,7 @@ function dimDotColor(id) {
 
 .rank-num {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.25);
+  color: var(--text-muted);
   font-weight: 500;
 }
 
@@ -263,7 +263,7 @@ function dimDotColor(id) {
 
 .user-name {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--text-primary);
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
@@ -272,7 +272,7 @@ function dimDotColor(id) {
 
 .user-score {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
 }
 
 // 已解锁维度
@@ -307,14 +307,14 @@ function dimDotColor(id) {
 
 .empty-text {
   font-size: 16px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
   display: block;
   margin-bottom: 6px;
 }
 
 .empty-sub {
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.25);
+  color: var(--text-muted);
   display: block;
 }
 </style>
diff --git a/frontend/ai-dimension/src/pages/payment/payment.vue b/frontend/ai-dimension/src/pages/payment/payment.vue
index 4da9042..3c335c9 100644
--- a/frontend/ai-dimension/src/pages/payment/payment.vue
+++ b/frontend/ai-dimension/src/pages/payment/payment.vue
@@ -229,7 +229,7 @@ function goBack() {
 
 .header-desc {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
   margin-top: 6px;
   display: block;
 }
@@ -282,7 +282,7 @@ function goBack() {
 
 .unit {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
   font-weight: 400;
 }
 
@@ -299,7 +299,7 @@ function goBack() {
 
 .plan-desc {
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-muted);
   margin-top: 4px;
   display: block;
 }
@@ -328,7 +328,7 @@ function goBack() {
 
 .b-text {
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-secondary);
 }
 
 // 套餐时长
@@ -402,7 +402,7 @@ function goBack() {
 
 .pay-agreement {
   font-size: 10px;
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-muted);
   text-align: center;
   margin-top: 10px;
   display: block;
@@ -410,7 +410,7 @@ function goBack() {
 
 .footer-text {
   font-size: 10px;
-  color: rgba(255, 255, 255, 0.2);
+  color: var(--text-muted);
   text-align: center;
   margin-top: 20px;
   display: block;
diff --git a/frontend/ai-dimension/src/pages/profile/profile.vue b/frontend/ai-dimension/src/pages/profile/profile.vue
index 12762b2..8f10b6a 100644
--- a/frontend/ai-dimension/src/pages/profile/profile.vue
+++ b/frontend/ai-dimension/src/pages/profile/profile.vue
@@ -325,7 +325,7 @@ function goSettings() {
 
 .profile-level {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
   margin-top: 4px;
   display: block;
 }
@@ -355,7 +355,7 @@ function goSettings() {
 
 .plan-desc {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
   margin-top: 4px;
   display: block;
 }
@@ -379,7 +379,7 @@ function goSettings() {
 
 .progress-text {
   font-size: 10px;
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-muted);
   margin-top: 6px;
   display: block;
 }
@@ -410,7 +410,7 @@ function goSettings() {
 
 .quota-card-title {
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-secondary);
   display: block;
   margin-bottom: 10px;
 }
@@ -431,14 +431,14 @@ function goSettings() {
 
 .quota-text {
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 .quota-note {
-  color: rgba(255, 255, 255, 0.2);
+  color: var(--text-muted);
 }
 
 .quota-share {
@@ -475,12 +475,12 @@ function goSettings() {
 .m-label {
   flex: 1;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--text-secondary);
 }
 
 .m-arrow {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.15);
+  color: var(--text-muted);
 }
 
 .m-badge {
@@ -502,7 +502,7 @@ function goSettings() {
 }
 
 .action-btn.logout {
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-muted);
 }
 
 .version {
diff --git a/frontend/ai-dimension/src/pages/search/search.vue b/frontend/ai-dimension/src/pages/search/search.vue
index b766027..be8724f 100644
--- a/frontend/ai-dimension/src/pages/search/search.vue
+++ b/frontend/ai-dimension/src/pages/search/search.vue
@@ -303,7 +303,7 @@ onUnmounted(() => {
 
   .empty-icon { font-size: 48px; opacity: 0.5; }
   .empty-text { font-size: 16px; color: var(--text-secondary); }
-  .empty-hint { font-size: 13px; color: rgba(255, 255, 255, 0.2); }
+  .empty-hint { font-size: 13px; color: var(--text-muted); }
 }
 
 // 结果列表
@@ -348,7 +348,7 @@ onUnmounted(() => {
 .result-summary {
   display: block;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.55);
+  color: var(--text-tertiary);
   line-height: 1.6;
   margin-bottom: 10px;
   overflow: hidden;
diff --git a/frontend/ai-dimension/src/pages/trend/trend.vue b/frontend/ai-dimension/src/pages/trend/trend.vue
index ff21e78..b5a85ea 100644
--- a/frontend/ai-dimension/src/pages/trend/trend.vue
+++ b/frontend/ai-dimension/src/pages/trend/trend.vue
@@ -205,7 +205,7 @@ function getSampleData() {
 
 .header-desc {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
   margin-top: 4px;
   display: block;
 }
@@ -224,7 +224,7 @@ function getSampleData() {
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 16px;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-secondary);
 }
 
 .filter-item.active {
@@ -291,13 +291,13 @@ function getSampleData() {
 
 .card-source {
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-muted);
 }
 
 .card-title {
   font-size: 14px;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--text-primary);
   line-height: 1.5;
   margin-bottom: 8px;
   display: block;
@@ -305,7 +305,7 @@ function getSampleData() {
 
 .card-summary {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
   line-height: 1.6;
   margin-bottom: 10px;
   display: block;
@@ -319,18 +319,18 @@ function getSampleData() {
 
 .card-date {
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-muted);
 }
 
 .card-stats {
   display: flex;
   gap: 12px;
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-muted);
 }
 
 .stat-item {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--text-tertiary);
 }
 
 // 加载/空状态
@@ -341,7 +341,7 @@ function getSampleData() {
 }
 
 .loading-state text {
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-muted);
   font-size: 13px;
 }
 
@@ -353,13 +353,13 @@ function getSampleData() {
 
 .empty-text {
   font-size: 15px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--text-tertiary);
   display: block;
 }
 
 .empty-sub {
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.3);
+  color: var(--text-muted);
   margin-top: 6px;
   display: block;
 }
diff --git a/frontend/ai-dimension/src/styles/theme.scss b/frontend/ai-dimension/src/styles/theme.scss
index 94ca1a1..65d9015 100644
--- a/frontend/ai-dimension/src/styles/theme.scss
+++ b/frontend/ai-dimension/src/styles/theme.scss
@@ -1,101 +1,104 @@
 /* ============================================
-   宇之然AI维度 — 主题系统
+   宇之然AI维度 — 主题系统 v2
    使用 CSS 自定义属性，一键切换主题
    ============================================ */
 
 /* ---- 主题色板 ----
-   🌌 宇宙深空背景
-   🟣 紫色 — 品牌色、AI 起源
-   🔵 青色 — AI 发展、科技
+   🌌 宇宙深空：深紫黑渐变背景
+   🟣 紫 — 品牌色、AI 起源
+   🔵 青 — AI 发展、科技
    🟢 青绿 — AI 当前
-   🟡 金色 — AI 学习
+   🟡 金 — AI 学习
    🔴 珊瑚 — AI 趋势
    ============================================ */
 
 :root,
 page {
-  /* === 基础色 === */
-  --bg-primary: #050508;
-  --bg-secondary: #08080f;
-  --bg-tertiary: #0f0a1a;
+  /* === 基础色 — 深空紫黑 === */
+  --bg-primary: #0a0a12;
+  --bg-secondary: #0d0d1a;
+  --bg-tertiary: #12102a;
 
-  /* === 玻璃拟态 === */
-  --glass-bg: rgba(255, 255, 255, 0.03);
-  --glass-border: rgba(255, 255, 255, 0.06);
-  --glass-hover: rgba(255, 255, 255, 0.05);
-  --glass-hover-border: rgba(255, 255, 255, 0.12);
-  --glass-strong: rgba(255, 255, 255, 0.08);
+  /* === 玻璃拟态 — 足够可见 === */
+  --glass-bg: rgba(255, 255, 255, 0.06);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --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);
 
-  /* === 文字 === */
-  --text-primary: #ffffff;
-  --text-secondary: rgba(255, 255, 255, 0.8);
-  --text-tertiary: rgba(255, 255, 255, 0.4);
-  --text-muted: rgba(255, 255, 255, 0.2);
-  --text-dim: rgba(255, 255, 255, 0.08);
+  /* === 文字 — 更清晰的分层 === */
+  --text-primary: rgba(255, 255, 255, 0.95);
+  --text-secondary: rgba(255, 255, 255, 0.7);
+  --text-tertiary: rgba(255, 255, 255, 0.5);
+  --text-muted: rgba(255, 255, 255, 0.3);
 
   /* === 品牌色 — 紫色系 === */
-  --color-brand: #7c4dff;
-  --color-brand-light: #b388ff;
-  --color-brand-dark: #651fff;
-  --color-brand-bg: rgba(124, 77, 255, 0.1);
-  --color-brand-glow: rgba(124, 77, 255, 0.2);
+  --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);
 
-  /* === 维度色系 === */
+  /* === 维度色系 — 更饱和 === */
 
-  /* dim1: AI 起源 — 紫色 */
-  --dim1-color: #b388ff;
-  --dim1-bg: rgba(124, 77, 255, 0.08);
-  --dim1-icon-bg: rgba(124, 77, 255, 0.25);
-  --dim1-border: rgba(124, 77, 255, 0.15);
-  --dim1-glow: rgba(124, 77, 255, 0.1);
+  /* dim1: AI 起源 — 紫罗兰 */
+  --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);
 
-  /* dim2: AI 发展 — 青色 */
-  --dim2-color: #4dd0e1;
-  --dim2-bg: rgba(0, 188, 212, 0.08);
-  --dim2-icon-bg: rgba(0, 188, 212, 0.25);
-  --dim2-border: rgba(0, 188, 212, 0.15);
-  --dim2-glow: rgba(0, 188, 212, 0.1);
+  /* dim2: AI 发展 — 天蓝 */
+  --dim2-color: #60a5fa;
+  --dim2-bg: rgba(96, 165, 250, 0.12);
+  --dim2-icon-bg: rgba(96, 165, 250, 0.2);
+  --dim2-border: rgba(96, 165, 250, 0.18);
+  --dim2-glow: rgba(96, 165, 250, 0.08);
 
-  /* dim3: AI 当前 — 青绿 */
-  --dim3-color: #4db6ac;
-  --dim3-bg: rgba(0, 200, 150, 0.08);
-  --dim3-icon-bg: rgba(0, 200, 150, 0.25);
-  --dim3-border: rgba(0, 200, 150, 0.15);
-  --dim3-glow: rgba(0, 200, 150, 0.1);
+  /* dim3: AI 当前 — 翠绿 */
+  --dim3-color: #34d399;
+  --dim3-bg: rgba(52, 211, 153, 0.12);
+  --dim3-icon-bg: rgba(52, 211, 153, 0.2);
+  --dim3-border: rgba(52, 211, 153, 0.18);
+  --dim3-glow: rgba(52, 211, 153, 0.08);
 
-  /* dim4: AI 学习 — 金色 */
-  --dim4-color: #ffd54f;
-  --dim4-bg: rgba(255, 193, 7, 0.08);
-  --dim4-icon-bg: rgba(255, 193, 7, 0.25);
-  --dim4-border: rgba(255, 193, 7, 0.15);
-  --dim4-glow: rgba(255, 193, 7, 0.1);
+  /* dim4: AI 学习 — 琥珀金 */
+  --dim4-color: #fbbf24;
+  --dim4-bg: rgba(251, 191, 36, 0.12);
+  --dim4-icon-bg: rgba(251, 191, 36, 0.2);
+  --dim4-border: rgba(251, 191, 36, 0.18);
+  --dim4-glow: rgba(251, 191, 36, 0.08);
 
-  /* dim5: AI 趋势 — 珊瑚 */
-  --dim5-color: #ef5350;
-  --dim5-bg: rgba(239, 83, 80, 0.08);
-  --dim5-icon-bg: rgba(239, 83, 80, 0.25);
-  --dim5-border: rgba(239, 83, 80, 0.15);
-  --dim5-glow: rgba(239, 83, 80, 0.1);
+  /* dim5: AI 趋势 — 玫瑰红 */
+  --dim5-color: #fb7185;
+  --dim5-bg: rgba(251, 113, 133, 0.12);
+  --dim5-icon-bg: rgba(251, 113, 133, 0.2);
+  --dim5-border: rgba(251, 113, 133, 0.18);
+  --dim5-glow: rgba(251, 113, 133, 0.08);
 
   /* === 功能色 === */
-  --color-free: #66bb6a;
-  --color-free-bg: rgba(76, 175, 80, 0.12);
-  --color-pro: #ffa726;
-  --color-pro-bg: rgba(255, 152, 0, 0.12);
-  --color-hot: #ef5350;
-  --color-hot-bg: rgba(239, 83, 80, 0.12);
-  --color-new: #4dd0e1;
-  --color-new-bg: rgba(0, 188, 212, 0.12);
-  --color-pick: #b388ff;
-  --color-pick-bg: rgba(124, 77, 255, 0.12);
+  --color-free: #34d399;
+  --color-free-bg: rgba(52, 211, 153, 0.12);
+  --color-pro: #fbbf24;
+  --color-pro-bg: rgba(251, 191, 36, 0.12);
+  --color-vip: #fb7185;
+  --color-vip-bg: rgba(251, 113, 133, 0.12);
+  --color-hot: #fb7185;
+  --color-hot-bg: rgba(251, 113, 133, 0.15);
+  --color-new: #60a5fa;
+  --color-new-bg: rgba(96, 165, 250, 0.15);
+  --color-pick: #a78bfa;
+  --color-pick-bg: rgba(139, 92, 246, 0.15);
 
-  /* === 布局 === */
+  /* === 圆角 === */
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
-  --radius-xl: 18px;
+  --radius-xl: 20px;
   --radius-full: 9999px;
 
+  /* === 间距 === */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 12px;
@@ -103,7 +106,7 @@ page {
   --spacing-xl: 20px;
   --spacing-2xl: 24px;
 
-  /* === 玻璃态 === */
+  /* === 玻璃模糊 === */
   --blur-bg: 20px;
 
   /* === 过渡 === */
@@ -111,49 +114,20 @@ page {
   --transition-normal: 0.3s ease;
 
   /* === 辉光 === */
-  --glow-brand: 0 0 20px rgba(124, 77, 255, 0.1);
-  --glow-brand-strong: 0 0 30px rgba(124, 77, 255, 0.2);
-}
-
-/* ============================================
-   主题切换 — 后期只需覆盖这里的变量
-   ============================================ */
-
-/* 浅色主题（预留） */
-.theme-light {
-  --bg-primary: #f5f5f8;
-  --bg-secondary: #eeeef2;
-  --bg-tertiary: #e8e4f0;
-  --glass-bg: rgba(255, 255, 255, 0.6);
-  --glass-border: rgba(0, 0, 0, 0.06);
-  --text-primary: #1a1a24;
-  --text-secondary: rgba(0, 0, 0, 0.7);
-  --text-tertiary: rgba(0, 0, 0, 0.4);
-  --text-muted: rgba(0, 0, 0, 0.2);
-  --color-brand: #7c4dff;
-  --color-brand-light: #9c7af0;
-}
-
-/* 圣诞主题（示例） */
-.theme-christmas {
-  --color-brand: #d32f2f;
-  --color-brand-light: #ef5350;
-  --dim1-color: #c62828;
-  --dim2-color: #2e7d32;
-  /* ... 更多覆盖 */
+  --glow-brand: 0 0 20px rgba(139, 92, 246, 0.1);
+  --glow-brand-strong: 0 0 30px rgba(139, 92, 246, 0.15);
 }
 
 /* ============================================
    全局排版
    ============================================ */
 
-/* 字体抗锯齿 */
 page {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* 卡片通用样式 */
+/* 卡片通用 */
 .card {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
@@ -168,19 +142,6 @@ page {
   border-color: var(--glass-hover-border);
 }
 
-/* 维度卡片通用 */
-.dim-card-base {
-  border-radius: var(--radius-xl);
-  padding: var(--spacing-xl) var(--spacing-lg);
-  backdrop-filter: blur(var(--blur-bg));
-  -webkit-backdrop-filter: blur(var(--blur-bg));
-  transition: all var(--transition-normal);
-}
-
-.dim-card-base:active {
-  transform: scale(0.98);
-}
-
 /* 品牌渐变 */
 .gradient-brand {
   background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light));
@@ -193,29 +154,7 @@ page {
   background-clip: text;
 }
 
-/* 徽章通用 */
-.badge {
-  display: inline-block;
-  font-size: 10px;
-  padding: 2px 10px;
-  border-radius: 6px;
-  font-weight: 500;
-}
-
-/* 搜索栏通用 */
-.search-bar {
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-md);
-  padding: 12px 16px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  backdrop-filter: blur(var(--blur-bg));
-  -webkit-backdrop-filter: blur(var(--blur-bg));
-}
-
-/* 维度色映射工具类 */
+/* 维度色工具类 */
 .dim-color-1 { color: var(--dim1-color); }
 .dim-color-2 { color: var(--dim2-color); }
 .dim-color-3 { color: var(--dim3-color); }
diff --git a/frontend/ai-dimension/vite.config.js b/frontend/ai-dimension/vite.config.js
index 4caf1cd..6e6aea7 100644
--- a/frontend/ai-dimension/vite.config.js
+++ b/frontend/ai-dimension/vite.config.js
@@ -3,12 +3,4 @@ import uni from '@dcloudio/vite-plugin-uni'
 
 export default defineConfig({
   plugins: [uni()],
-  css: {
-    preprocessorOptions: {
-      scss: {
-        // 全局 SCSS 变量注入
-        additionalData: `@import "@/styles/theme.scss";`
-      }
-    }
-  }
 })
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..dff2183
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+	"devDependencies": {
+		"miniprogram-ci": "^2.1.31"
+	}
+}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..a9807ce
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,5 @@
+allowBuilds:
+  '@parcel/watcher': set this to true or false
+  '@swc/core': set this to true or false
+  less: set this to true or false
+  protobufjs: set this to true or false
diff --git a/upload-wx.js b/upload-wx.js
new file mode 100644
index 0000000..a36d457
--- /dev/null
+++ b/upload-wx.js
@@ -0,0 +1,30 @@
+const ci = require('miniprogram-ci');
+const path = require('path');
+
+(async () => {
+  const project = new ci.Project({
+    appid: 'wxdad62baf4ccd09e3',
+    type: 'miniProgram',
+    projectPath: path.resolve(__dirname, 'frontend/ai-dimension/dist/build/mp-weixin'),
+    privateKeyPath: path.resolve('/root/Hermes-workspace/宇之然AI维度appid/private.wxdad62baf4ccd09e3.key'),
+    ignores: ['node_modules/**/*'],
+  });
+
+  console.log('→ 正在上传微信小程序...');
+  const uploadResult = await ci.upload({
+    project,
+    version: '1.1.0',
+    desc: 'AI维度 - 完整版开发',
+    setting: {
+      es6: true,
+      es7: true,
+      minify: true,
+      autoPrefixWXSS: true,
+    },
+    onProgressUpdate: console.log,
+  });
+  console.log('✅ 上传成功！', uploadResult);
+})().catch(err => {
+  console.error('❌ 上传失败:', err);
+  process.exit(1);
+});
\ No newline at end of file