feat: update global tokens and remove legacy decorations

This commit is contained in:
2026-08-07 15:16:24 +08:00
parent 5cca31c295
commit 351a049610
3 changed files with 114 additions and 101 deletions
+4 -4
View File
@@ -27,10 +27,10 @@ export default defineAppConfig({
navigationStyle: 'custom', navigationStyle: 'custom',
// 顶部/窗口颜色先显式固定为小程序浅色主题,避免 iOS 顶部区域跟随系统深色; // 顶部/窗口颜色先显式固定为小程序浅色主题,避免 iOS 顶部区域跟随系统深色;
// 应用启动后页面 Hook 会按小程序内主题实时覆盖上面的值。 // 应用启动后页面 Hook 会按小程序内主题实时覆盖上面的值。
navigationBarBackgroundColor: '#ffffff', navigationBarBackgroundColor: '#faf7f2',
backgroundColor: '#ffffff', backgroundColor: '#faf7f2',
backgroundColorTop: '#ffffff', backgroundColorTop: '#faf7f2',
backgroundColorBottom: '#ffffff', backgroundColorBottom: '#faf7f2',
// 状态栏文字默认黑字;各页面 useStatusBar 会按小程序主题覆盖它。 // 状态栏文字默认黑字;各页面 useStatusBar 会按小程序主题覆盖它。
navigationBarTextStyle: 'black', navigationBarTextStyle: 'black',
}, },
+101 -88
View File
@@ -20,33 +20,61 @@
/* 变量定义 */ /* 变量定义 */
.theme-light { .theme-light {
--bg-page: #ffffff; --bg-page: #faf7f2;
--line-card: 3px dashed #ffb7c5;
--line-star: #ffb7c5;
--text-primary: #5c3a3a;
--text-secondary: #b08d8d;
--text-muted: #d28a8a;
--accent-pink: #ff9a9e;
--accent-blue: #5b8cff;
--btn-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%);
--shadow-card: 0 8px 24px rgba(255, 154, 158, 0.12);
--bg-input: #f8f9fa;
--bg-card: #ffffff; --bg-card: #ffffff;
--bg-muted: #f3eee7;
--bg-input: #f5f1eb;
--text-primary: #2e2622;
--text-secondary: #8a7e76;
--text-muted: #b3a89e;
--accent-primary: #d96c6a;
--accent-primary-strong: #c75b59;
--accent-primary-soft: #f6e0dc;
--accent-secondary: #6c7bdb;
--accent-secondary-soft: rgba(108, 123, 219, 0.12);
--success: #4fa477;
--warning: #d99a4e;
--danger: #d85d5d;
--border: #ede5dc;
--border-strong: #e0d5c8;
--glass: rgba(255, 255, 255, 0.72);
--glass-line: rgba(255, 255, 255, 0.55);
--shadow-card: 0 8rpx 24rpx rgba(46, 38, 34, 0.08);
--shadow-elevated: 0 12rpx 40rpx rgba(46, 38, 34, 0.12);
--line-card: 1rpx solid var(--border);
--line-star: var(--border);
--accent-pink: var(--accent-primary);
--accent-blue: var(--accent-secondary);
--btn-gradient: var(--accent-primary);
} }
.theme-dark { .theme-dark {
--bg-page: #191919; --bg-page: #191919;
--line-card: 3px dashed #5b8cff; --bg-card: #23201d;
--line-star: #5b8cff; --bg-muted: #2b2622;
--text-primary: #e6e6e6; --bg-input: #2b2622;
--text-secondary: #999999; --text-primary: #f5efe8;
--text-muted: #737373; --text-secondary: #b3a79c;
--accent-pink: #ff7eb3; --text-muted: #82766c;
--accent-blue: #5cadff; --accent-primary: #f09198;
--btn-gradient: linear-gradient(135deg, #ff7eb3 0%, #7a5cff 100%); --accent-primary-strong: #ffa7ad;
--shadow-card: 0 8px 24px rgba(0, 0, 0, 0.3); --accent-primary-soft: rgba(240, 145, 152, 0.14);
--bg-input: #232323; --accent-secondary: #8e97e8;
--bg-card: #232323; --accent-secondary-soft: rgba(142, 151, 232, 0.14);
--success: #67c58e;
--warning: #e0ad68;
--danger: #ef7a7a;
--border: #37312c;
--border-strong: #463e37;
--glass: rgba(25, 25, 25, 0.72);
--glass-line: rgba(255, 255, 255, 0.14);
--shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.32);
--shadow-elevated: 0 12rpx 40rpx rgba(0, 0, 0, 0.48);
--line-card: 1rpx solid var(--border);
--line-star: var(--border);
--accent-pink: var(--accent-primary);
--accent-blue: var(--accent-secondary);
--btn-gradient: var(--accent-primary);
} }
/* page 基础字体 */ /* page 基础字体 */
@@ -58,41 +86,16 @@ page {
全局组件样式 全局组件样式
========================================================== */ ========================================================== */
.dashed-card { .surface-card {
background: var(--bg-card); background: var(--bg-card);
border: var(--line-card); border: 1rpx solid var(--border);
border-radius: 24px; border-radius: 24rpx;
padding: 32px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
} }
/* 虚线无填充星星(左上角装饰) */ /* 为兼容旧页面中的卡片类名,保留过渡别名 */
.star-badge { .dashed-card {
position: absolute; @extend .surface-card;
top: -10px;
left: -10px;
width: 48px;
height: 48px;
z-index: 2;
}
.star-badge::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
background: var(--bg-card);
clip-path: polygon(
50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
);
border: 2px dashed var(--line-star);
box-sizing: border-box;
} }
/* === 常用工具类 === */ /* === 常用工具类 === */
@@ -111,37 +114,36 @@ page {
.mb-20 { margin-bottom: 20px; } .mb-20 { margin-bottom: 20px; }
/* === 通用按钮 === */ /* === 通用按钮 === */
.btn-gradient { .btn-primary {
background: var(--btn-gradient); background: var(--accent-primary);
color: #fff;
border-radius: 999rpx;
}
.btn-secondary {
background: var(--bg-card);
color: var(--text-primary); color: var(--text-primary);
border-radius: 50px; border: 1rpx solid var(--border-strong);
padding: 24px 48px; border-radius: 999rpx;
font-size: 32px;
font-weight: 600;
text-align: center;
box-shadow: 0 8px 24px rgba(255, 154, 158, 0.25);
border: none;
} }
.theme-dark .btn-gradient { .btn-ghost {
color: #ffffff; background: transparent;
box-shadow: 0 8px 24px rgba(122, 92, 255, 0.3); color: var(--accent-primary);
} }
.btn-gradient:active { .btn-danger {
opacity: 0.9; background: var(--danger);
transform: scale(0.98); color: #fff;
border-radius: 999rpx;
}
.btn-gradient {
@extend .btn-primary;
} }
.btn-outline { .btn-outline {
background: var(--bg-card); @extend .btn-secondary;
color: var(--accent-blue);
border: var(--line-card);
border-radius: 50px;
padding: 20px 48px;
font-size: 28px;
font-weight: 500;
text-align: center;
} }
/* 固定底部操作栏 */ /* 固定底部操作栏 */
@@ -150,15 +152,16 @@ page {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: var(--bg-card);
border-top: var(--line-card);
padding: 20px 32px calc(20px + env(safe-area-inset-bottom));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 24px; gap: 24px;
padding: 20px 32px calc(20px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(32px) saturate(1.2);
-webkit-backdrop-filter: blur(32px) saturate(1.2);
border-top: 1rpx solid var(--glass-line);
z-index: 500; z-index: 500;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
} }
/* === 标题文字 === */ /* === 标题文字 === */
@@ -187,22 +190,32 @@ page {
} }
.badge-pink { .badge-pink {
background: rgba(255, 154, 158, 0.15); background: var(--accent-primary-soft);
color: var(--accent-pink); color: var(--accent-primary);
} }
.badge-blue { .badge-blue {
background: rgba(160, 196, 255, 0.15); background: var(--accent-secondary-soft);
color: var(--accent-blue); color: var(--accent-secondary);
} }
.badge-green { .badge-green {
background: rgba(139, 211, 161, 0.15); background: rgba(79, 164, 119, 0.14);
color: #2ecc71; color: var(--success);
}
.badge-warning {
background: rgba(217, 154, 78, 0.14);
color: var(--warning);
}
.badge-danger {
background: rgba(216, 93, 93, 0.14);
color: var(--danger);
} }
.badge-gray { .badge-gray {
background: rgba(128, 128, 128, 0.15); background: var(--bg-muted);
color: var(--text-secondary); color: var(--text-secondary);
} }
@@ -213,7 +226,7 @@ page {
} }
.safe-bottom-placeholder { .safe-bottom-placeholder {
height: 160px; height: 200px;
} }
/* === 自定义导航栏安全区适配 === */ /* === 自定义导航栏安全区适配 === */
+9 -9
View File
@@ -1,14 +1,14 @@
{ {
"light": { "light": {
"navBgColor": "#ffffff", "navBgColor": "#faf7f2",
"navTxtStyle": "black", "navTxtStyle": "black",
"bgColor": "#ffffff", "bgColor": "#faf7f2",
"bgTxtStyle": "dark", "bgTxtStyle": "dark",
"bgColorTop": "#ffffff", "bgColorTop": "#faf7f2",
"bgColorBottom": "#ffffff", "bgColorBottom": "#faf7f2",
"tabBarColor": "#b08d8d", "tabBarColor": "#8a7e76",
"tabBarSelectedColor": "#ff9a9e", "tabBarSelectedColor": "#d96c6a",
"tabBarBgColor": "#ffffff", "tabBarBgColor": "#faf7f2",
"tabBarBorderStyle": "black" "tabBarBorderStyle": "black"
}, },
"dark": { "dark": {
@@ -18,8 +18,8 @@
"bgTxtStyle": "light", "bgTxtStyle": "light",
"bgColorTop": "#191919", "bgColorTop": "#191919",
"bgColorBottom": "#191919", "bgColorBottom": "#191919",
"tabBarColor": "#999999", "tabBarColor": "#b3a79c",
"tabBarSelectedColor": "#ff7eb3", "tabBarSelectedColor": "#f09198",
"tabBarBgColor": "#191919", "tabBarBgColor": "#191919",
"tabBarBorderStyle": "white" "tabBarBorderStyle": "white"
} }