From 6dc85281a52a380bf9336ca2810945a31da1b71e Mon Sep 17 00:00:00 2001 From: Yuzhiran Dev Date: Sat, 11 Jul 2026 17:28:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=AE=E8=89=B2=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E6=94=B9=E4=B8=BA=E6=B7=B1=E5=BA=95=E4=BA=AE=E5=8D=A1=E7=8E=B0?= =?UTF-8?q?=E4=BB=A3=E8=AE=BE=E8=AE=A1-=E5=8F=82=E8=80=83Linear=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E7=B3=BB=E7=BB=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/App.vue | 166 +++++++++++++++++++++-------------- client/src/pages.json | 18 ++-- client/src/styles/theme.scss | 4 +- 3 files changed, 112 insertions(+), 76 deletions(-) diff --git a/client/src/App.vue b/client/src/App.vue index 43c8df9..72f4005 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -54,10 +54,10 @@ function applyTabBarTheme(theme) { }) } else { uni.setTabBarStyle({ - color: 'rgba(99,102,241,0.4)', - selectedColor: '#6366f1', - backgroundColor: '#f0f2f8', - borderStyle: 'white' + color: 'rgba(255,255,255,0.35)', + selectedColor: '#818cf8', + backgroundColor: '#1a1b26', + borderStyle: 'black' }) } } catch (e) { @@ -72,79 +72,79 @@ function applyTabBarTheme(theme) { 默认：亮色模式（蓝紫主题） | .theme-dark：暗色模式 ============================================ */ -/* ---- 亮色模式（默认：层次分明，视觉丰富） ---- */ +/* ---- 亮色模式（默认：深底亮卡，现代感） ---- */ page, .theme-light { - /* 基础色 — 层次感 */ - --bg-primary: #edeff3; - --bg-secondary: #f5f6f9; - --bg-tertiary: #e2e5ec; + /* 基础色 — 深灰底 */ + --bg-primary: #1a1b26; + --bg-secondary: #1e1f2d; + --bg-tertiary: #24253a; - /* 卡片 — 纯白+阴影+细边框 */ + /* 卡片 — 纯白，在深底上弹出 */ --glass-bg: #ffffff; - --glass-border: rgba(0, 0, 0, 0.08); - --glass-hover: #f5f6ff; + --glass-border: rgba(255, 255, 255, 0.08); + --glass-hover: #f0f1ff; --glass-hover-border: rgba(99, 102, 241, 0.2); --glass-strong: #ffffff; - --glass-dim-bg: #eef0ff; + --glass-dim-bg: rgba(99, 102, 241, 0.06); - /* 文字 — 高对比 */ - --text-primary: #0d0d1a; - --text-secondary: rgba(13, 13, 26, 0.65); - --text-tertiary: rgba(13, 13, 26, 0.45); - --text-muted: rgba(13, 13, 26, 0.28); - --text-disabled: rgba(13, 13, 26, 0.15); + /* 文字 — 白色文本在深色底上 */ + --text-primary: rgba(255, 255, 255, 0.92); + --text-secondary: rgba(255, 255, 255, 0.65); + --text-tertiary: rgba(255, 255, 255, 0.45); + --text-muted: rgba(255, 255, 255, 0.28); + --text-disabled: rgba(255, 255, 255, 0.15); - /* 品牌色 — Indigo */ + /* 品牌色 — Indigo 高饱和 */ --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); + --color-brand-bg: rgba(99, 102, 241, 0.12); + --color-brand-glow: rgba(99, 102, 241, 0.15); - /* 维度色 — 加饱和度，更鲜明 */ - --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.18); - --dim1-glow: rgba(99, 102, 241, 0.05); + /* 维度色 — 在深色底上加饱和度，更鲜艳 */ + --dim1-color: #818cf8; + --dim1-bg: rgba(99, 102, 241, 0.15); + --dim1-icon-bg: rgba(99, 102, 241, 0.25); + --dim1-border: rgba(99, 102, 241, 0.25); + --dim1-glow: rgba(99, 102, 241, 0.08); - --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.18); - --dim2-glow: rgba(8, 145, 178, 0.05); + --dim2-color: #38bdf8; + --dim2-bg: rgba(56, 189, 248, 0.15); + --dim2-icon-bg: rgba(56, 189, 248, 0.25); + --dim2-border: rgba(56, 189, 248, 0.25); + --dim2-glow: rgba(56, 189, 248, 0.08); - --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.18); - --dim3-glow: rgba(5, 150, 105, 0.05); + --dim3-color: #34d399; + --dim3-bg: rgba(52, 211, 153, 0.15); + --dim3-icon-bg: rgba(52, 211, 153, 0.25); + --dim3-border: rgba(52, 211, 153, 0.25); + --dim3-glow: rgba(52, 211, 153, 0.08); - --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.18); - --dim4-glow: rgba(217, 119, 6, 0.05); + --dim4-color: #fbbf24; + --dim4-bg: rgba(251, 191, 36, 0.15); + --dim4-icon-bg: rgba(251, 191, 36, 0.25); + --dim4-border: rgba(251, 191, 36, 0.25); + --dim4-glow: rgba(251, 191, 36, 0.08); - --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.18); - --dim5-glow: rgba(220, 38, 38, 0.05); + --dim5-color: #fb7185; + --dim5-bg: rgba(251, 113, 133, 0.15); + --dim5-icon-bg: rgba(251, 113, 133, 0.25); + --dim5-border: rgba(251, 113, 133, 0.25); + --dim5-glow: rgba(251, 113, 133, 0.08); /* 功能色 */ - --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); + --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: #38bdf8; + --color-new-bg: rgba(56, 189, 248, 0.15); + --color-pick: #818cf8; + --color-pick-bg: rgba(99, 102, 241, 0.15); /* 圆角/间距/过渡 */ --radius-sm: 8px; @@ -161,12 +161,12 @@ page, .theme-light { --blur-bg: 20px; --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; - --glow-brand: 0 0 20px rgba(99, 102, 241, 0.08); - --glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.12); + --glow-brand: 0 0 20px rgba(99, 102, 241, 0.12); + --glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.18); - /* 亮色专属：卡片阴影 */ - --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03); - --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08); + /* 亮色专属：卡片阴影（在深色底上发光的阴影效果） */ + --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15); + --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.3); } /* ---- 暗色模式 ---- */ @@ -298,4 +298,40 @@ view { -webkit-text-fill-color: transparent; background-clip: text; } + +/* 卡片内文字：白色卡片上文字应为深色 */ +.glass-text { + --text-primary: #0d0d1a; + --text-secondary: rgba(13, 13, 26, 0.65); + --text-tertiary: rgba(13, 13, 26, 0.45); + --text-muted: rgba(13, 13, 26, 0.28); + --text-disabled: rgba(13, 13, 26, 0.15); +} + +/* 所有卡片/列表/输入框等白底元素的文字自动变深色 */ +.card, +.search-bar, +[class$="-card"], +[class$="-item"], +[class$="-input"], +[class*="Form-input"], +[class*="form-"], +.welcome-card, +.msg-list, +.chat-input, +.bubble, +.quota-badge, +.filter-item, +.menu-item, +.news-card, +.dim-tag, +.card-tag, +[class*="-badge"] { + --text-primary: #0d0d1a; + --text-secondary: rgba(13, 13, 26, 0.65); + --text-tertiary: rgba(13, 13, 26, 0.45); + --text-muted: rgba(13, 13, 26, 0.28); + --text-disabled: rgba(13, 13, 26, 0.15); + --glass-text-primary: #0d0d1a; +} \ No newline at end of file diff --git a/client/src/pages.json b/client/src/pages.json index edd1b22..2f5bd7a 100644 --- a/client/src/pages.json +++ b/client/src/pages.json @@ -18,20 +18,20 @@ {"path": "pages/profile/profile", "style": {"navigationBarTitleText": "我的", "navigationStyle": "custom"}} ], "globalStyle": { - "navigationBarTextStyle": "black", + "navigationBarTextStyle": "white", "navigationBarTitleText": "宇之然AI维度", - "navigationBarBackgroundColor": "#edeff3", - "backgroundColor": "#edeff3", - "backgroundColorTop": "#edeff3", - "backgroundColorBottom": "#edeff3", + "navigationBarBackgroundColor": "#1a1b26", + "backgroundColor": "#1a1b26", + "backgroundColorTop": "#1a1b26", + "backgroundColorBottom": "#1a1b26", "app-plus": { - "background": "#edeff3" + "background": "#1a1b26" } }, "tabBar": { - "color": "rgba(0,0,0,0.35)", - "selectedColor": "#6366f1", - "backgroundColor": "#ffffff", + "color": "rgba(255,255,255,0.35)", + "selectedColor": "#818cf8", + "backgroundColor": "#1a1b26", "borderStyle": "white", "list": [ {"pagePath": "pages/index/index", "text": "探索"}, diff --git a/client/src/styles/theme.scss b/client/src/styles/theme.scss index 9889d33..6f126a9 100644 --- a/client/src/styles/theme.scss +++ b/client/src/styles/theme.scss @@ -12,8 +12,8 @@ /* ---- SCSS 变量（方便组件内使用） ---- */ $color-brand: #6366f1; $color-brand-light: #818cf8; -$color-bg-primary: #edeff3; -$color-bg-dark: #14141e; +$color-bg-primary: #1a1b26; +$color-bg-dark: #0d0d15; $dim1-color: #6366f1; $dim2-color: #0891b2;