feat(ui): 统一应用主题色为天空蓝并优化渐变背景

将应用主色调从 '#BBF246' 更改为 '#87CEEB'(天空蓝),并更新所有相关组件和页面中的颜色引用。同时为多个页面添加统一的渐变背景,提升视觉效果和用户体验。新增压力分析模态框组件,并优化压力计组件的交互与显示逻辑。更新应用图标和启动图资源。
This commit is contained in:
richarjiang
2025-08-20 09:38:25 +08:00
parent 37f8c3c78d
commit d76ba48424
35 changed files with 519 additions and 184 deletions

View File

@@ -6,7 +6,7 @@
// 原子调色板(与设计图一致)
export const palette = {
// Primary
primary: '#BBF246',
primary: '#87CEEB',
ink: '#192126',
// Secondary / Neutrals
@@ -18,10 +18,11 @@ export const palette = {
purple: '#A48AED',
red: '#ED4747',
orange: '#FCC46F',
blue: '#95CCE3',
blue: '#87CEEB', // 更贴近logo背景的天空蓝
blueSecondary: '#4682B4', // 钢蓝色,用于选中状态
} as const;
const primaryColor = palette.primary; // 应用主题色
const primaryColor = palette.blue; // 应用主题色
const tintColorLight = primaryColor;
const tintColorDark = '#FFFFFF';
@@ -35,6 +36,8 @@ export const Colors = {
surface: '#FFFFFF',
card: '#FFFFFF',
buttonBackground: palette.blue,
// 品牌与可交互主色
tint: tintColorLight,
primary: primaryColor,
@@ -51,6 +54,12 @@ export const Colors = {
danger: palette.red,
info: palette.blue,
accentPurple: palette.purple,
accentGreen: palette.blue,
accentGreenDark: palette.blueSecondary, // 深绿色,用于文本和强调
// 日期选择器主题色
datePickerNormal: palette.blue,
datePickerSelected: palette.blueSecondary,
// 结构色
border: palette.neutral100 + '33', // 20% 透明度
@@ -64,10 +73,14 @@ export const Colors = {
tabBarActiveBackground: primaryColor, // tab 激活时的背景色
// 页面氛围与装饰(新)
pageBackgroundEmphasis: '#F9FBF2',
heroSurfaceTint: 'rgba(187,242,70,0.18)',
pageBackgroundEmphasis: '#F0F8FF', // 淡蓝色背景强调
heroSurfaceTint: 'rgba(135,206,235,0.18)', // 蓝色调的表面色彩
ornamentPrimary: 'rgba(187,242,70,0.22)',
ornamentAccent: 'rgba(164,138,237,0.16)',
// 统一背景渐变色(基于 StressAnalysisModal 的设计)
backgroundGradientStart: '#d3e9eeff', // 浅蓝色起始 (与logo背景匹配)
backgroundGradientEnd: '#ffffff', // 白色结束
},
dark: {
// 基础文本/背景
@@ -94,6 +107,11 @@ export const Colors = {
danger: palette.red,
info: palette.blue,
accentPurple: palette.purple,
accentGreenDark: '#2D5016', // 深绿色,用于文本和强调
// 日期选择器主题色
datePickerNormal: palette.blue,
datePickerSelected: palette.blueSecondary,
// 结构色
border: '#2A2F32',
@@ -111,5 +129,9 @@ export const Colors = {
heroSurfaceTint: 'rgba(187,242,70,0.12)',
ornamentPrimary: 'rgba(187,242,70,0.18)',
ornamentAccent: 'rgba(164,138,237,0.14)',
// 统一背景渐变色(深色模式)
backgroundGradientStart: '#0A0B0C', // 深黑色起始
backgroundGradientEnd: '#151718', // 背景色结束
},
} as const;