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

fix: 主题颜色+文字搭配重构 v2

Browse Source 
- 修复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行号污染问题
This commit is contained in:
Yuzhiran Dev
2026-07-10 19:18:37 +08:00
parent f1097a0331
commit ffb23e75b4
15 changed files with 265 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/ai-dimension/src/App.vue
+75 -1
View File
@@ -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 {
frontend/ai-dimension/src/pages/achievements/achievements.vue
+8 -8
View File
@@ -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>
frontend/ai-dimension/src/pages/chat/chat.vue
+7 -7
View File
@@ -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 {
frontend/ai-dimension/src/pages/favorites/favorites.vue
+3 -3
View File
@@ -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;
}
frontend/ai-dimension/src/pages/index/index.vue
+21 -21
View File
@@ -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 {
frontend/ai-dimension/src/pages/leaderboard/leaderboard.vue
+6 -6
View File
@@ -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>
frontend/ai-dimension/src/pages/payment/payment.vue
+6 -6
View File
@@ -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;
frontend/ai-dimension/src/pages/profile/profile.vue
+9 -9
View File
@@ -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 {
frontend/ai-dimension/src/pages/search/search.vue
+2 -2
View File
@@ -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;
frontend/ai-dimension/src/pages/trend/trend.vue
+11 -11
View File
@@ -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;
}
frontend/ai-dimension/src/styles/theme.scss
+77 -138
View File
@@ -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); }
frontend/ai-dimension/vite.config.js
-8
View File
@@ -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";`
}
}
}
})
package.json
+5
View File
@@ -0,0 +1,5 @@
{
"devDependencies": {
"miniprogram-ci": "^2.1.31"
}
}
pnpm-workspace.yaml
+5
View File
@@ -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
upload-wx.js
+30
View File
@@ -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);
});