wlt/ai-dimension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 亮色主题全新配色(蓝紫)+趋势筛选换行+所有页面硬编码替换为CSS变量

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