richard/digital-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移除目标管理演示页面并优化相关组件

Browse Source 
- 删除目标管理演示页面的代码，简化项目结构
- 更新底部导航，移除目标管理演示页面的路由
- 调整相关组件的样式和逻辑，确保界面一致性
- 优化颜色常量的使用，提升视觉效果
This commit is contained in:
richarjiang
2025-08-22 21:24:31 +08:00
parent 9e719a9eda
commit c12329bc96
16 changed files with 1130 additions and 759 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
constants/Colors.ts
View File

@@ -1,138 +1,212 @@
/**
* 应用全局配色规范（来自设计规范图）。
* 说明：保持原有导出结构不变，同时扩展更完整的语义令牌与原子调色板。
* 应用全局配色规范（基于设计规范图）。
* 包含完整的语义化颜色系统：灰色、紫色、成功色、错误色、警告色和基础色。
*/
// 原子调色板（与设计图一致）
export const palette = {
// Primary
primary: '#7A5AF8',
ink: '#FFFFFF',
// Secondary / Neutrals
neutral100: '#888F92',
neutral200: '#5E6468',
neutral300: '#384046',
// Accents
purple: '#A48AED',
red: '#ED4747',
orange: '#FCC46F',
blue: '#7A5AF8', // 更贴近logo背景的天空蓝
blueSecondary: '#4682B4', // 钢蓝色，用于选中状态
green: '#9ceb87', // 温暖的绿色，用于心情日历等
// 灰色系统 - 中性色，UI设计的基础
gray: {
25: '#fcfcfd',
50: '#ebecee',
100: '#c0c4ca',
200: '#a2a7b0',
300: '#777f8c',
400: '#5d6676',
500: '#344054',
600: '#2f3a4c',
700: '#252d3c',
800: '#1d232e',
900: '#161b23',
},
// 紫色系统 - 品牌主色，用于交互元素
purple: {
25: '#fafaff',
50: '#f4f3ff',
100: '#ebe9fe',
200: '#d9d6fe',
300: '#bdb4fe',
400: '#9b8afb',
500: '#7a5af8',
600: '#6938ef',
700: '#5925dc',
800: '#4a1fb8',
900: '#3e1c96',
},
// 成功色系统 - 绿色，用于正面反馈
success: {
25: '#f6fef9',
50: '#e8f7f1',
100: '#b8e7d2',
200: '#95dcbc',
300: '#65cc9e',
400: '#47c28b',
500: '#19b36e',
600: '#17a364',
700: '#127f4e',
800: '#0e623d',
900: '#0b4b2e',
},
// 错误色系统 - 红色，用于错误状态和破坏性操作
error: {
25: '#fffbfa',
50: '#feeeee',
100: '#fdcaca',
200: '#fcb1b1',
300: '#fb8d8d',
400: '#fa7777',
500: '#f95555',
600: '#e34d4d',
700: '#b13c3c',
800: '#892f2f',
900: '#692424',
},
// 警告色系统 - 黄色/橙色，用于警告和确认
warning: {
25: '#fff7ec',
50: '#fff7ec',
100: '#ffe6c4',
200: '#ffd9a8',
300: '#ffc880',
400: '#ffbd68',
500: '#ffad42',
600: '#e89d3c',
700: '#b57b2f',
800: '#8c5f24',
900: '#6b491c',
},
// 基础色
base: {
white: '#ffffff',
black: '#1d232e',
}
} as const;
const primaryColor = palette.blue; // 应用主题色
// 主色调定义
const primaryColor = palette.purple[500]; // 紫色500作为主色
const tintColorLight = primaryColor;
const tintColorDark = '#FFFFFF';
const tintColorDark = palette.base.white;
export const Colors = {
light: {
// 基础文本/背景（优化对比度）
text: '#1A2027', // 更深的文本色，提高可读性
textSecondary: '#4A5568', // 温和的次要文本色
textMuted: '#718096', // 柔和的静音文本色
background: '#FFFFFF',
surface: '#FFFFFF',
card: 'rgba(255,255,255,0.95)', // 半透明卡片，与渐变背景融合
buttonBackground: palette.blue,
// 基础文本/背景
text: palette.gray[900], // 最深灰色用于主要文本
textSecondary: palette.gray[600], // 中等灰色用于次要文本
textMuted: palette.gray[400], // 浅灰色用于静音文本
background: palette.base.white,
surface: palette.base.white,
card: palette.gray[25], // 最浅灰色用于卡片背景
// 品牌与可交互主色
tint: tintColorLight,
primary: primaryColor,
onPrimary: palette.ink, // 与主色搭配的前景色（按钮文字/图标）
onPrimary: palette.base.white, // 主色上的文字/图标颜色
// 中性色与辅助
neutral100: palette.neutral100,
neutral200: palette.neutral200,
neutral300: palette.neutral300,
neutral100: palette.gray[100],
neutral200: palette.gray[200],
neutral300: palette.gray[300],
// 状态/反馈色
success: palette.primary,
warning: palette.orange,
danger: palette.red,
info: palette.blue,
accentPurple: palette.purple,
accentGreen: palette.green, // 温暖的绿色
accentGreenDark: palette.blueSecondary, // 深绿色，用于文本和强调
success: palette.success[500],
successLight: palette.success[100],
successDark: palette.success[700],
warning: palette.warning[500],
warningLight: palette.warning[100],
warningDark: palette.warning[700],
danger: palette.error[500],
dangerLight: palette.error[100],
dangerDark: palette.error[700],
info: palette.purple[500],
accentPurple: palette.purple[400],
accentGreen: palette.success[400],
// 日期选择器主题色
datePickerNormal: palette.blue,
datePickerSelected: palette.green, // 使用温暖的绿色作为选中状态
datePickerNormal: palette.purple[500],
datePickerSelected: palette.success[500],
// 结构色（优化后的蓝色主题）
border: 'rgba(135,206,235,0.2)', // 蓝色调边框
separator: 'rgba(135,206,235,0.15)', // 更淡的分隔线
icon: '#5A6C7D', // 蓝灰色图标
// 结构色
border: palette.gray[200], // 浅灰色边框
separator: palette.gray[100], // 更浅的分隔线
icon: palette.gray[500], // 中等灰色图标
// Tab 相关（保持兼容）
tabIconDefault: '#687076',
tabIconSelected: palette.ink, // tab 激活时的文字/图标颜色（深色，在亮色背景上显示）
tabBarBackground: palette.ink, // tab 栏背景色
tabBarActiveBackground: primaryColor, // tab 激活时的背景色
// Tab 相关
tabIconDefault: palette.gray[400],
tabIconSelected: palette.base.white, // 选中时使用白色文字/图标，确保在紫色背景上清晰可见
tabBarBackground: palette.base.white,
tabBarActiveBackground: palette.purple[500], // 使用主色作为选中背景
// 页面氛围与装饰（优化后的蓝色配色方案）
pageBackgroundEmphasis: '#F0F8FF', // 淡蓝色背景强调
heroSurfaceTint: 'rgba(135,206,235,0.12)', // 更柔和的蓝色调表面色彩
ornamentPrimary: 'rgba(135,206,235,0.15)', // 与主色调和的装饰色
ornamentAccent: 'rgba(70,130,180,0.12)', // 钢蓝色装饰，增加层次
// 页面氛围与装饰
pageBackgroundEmphasis: palette.gray[25],
heroSurfaceTint: palette.purple[25],
ornamentPrimary: palette.purple[100],
ornamentAccent: palette.success[100],
// 优化的背景渐变色（更柔和的蓝色过渡）
backgroundGradientStart: '#E6F3FF', // 更柔和的浅蓝色起始
backgroundGradientEnd: '#FAFCFF', // 带有微蓝调的白色结束
// 背景渐变色
backgroundGradientStart: palette.gray[25],
backgroundGradientEnd: palette.base.white,
},
dark: {
// 基础文本/背景
text: '#ECEDEE',
textSecondary: palette.neutral100,
textMuted: '#9BA1A6',
background: '#151718',
surface: '#1A1D1E',
card: '#1A1D1E',
text: palette.gray[25], // 最浅灰色用于主要文本
textSecondary: palette.gray[100], // 浅灰色用于次要文本
textMuted: palette.gray[300], // 中等灰色用于静音文本
background: palette.gray[900],
surface: palette.gray[800],
card: palette.gray[800],
// 品牌与可交互主色
tint: tintColorDark,
primary: primaryColor,
onPrimary: palette.ink,
onPrimary: palette.base.white,
// 中性色与辅助
neutral100: palette.neutral100,
neutral200: palette.neutral200,
neutral300: palette.neutral300,
neutral100: palette.gray[100],
neutral200: palette.gray[200],
neutral300: palette.gray[300],
// 状态/反馈色
success: palette.primary,
warning: palette.orange,
danger: palette.red,
info: palette.blue,
accentPurple: palette.purple,
accentGreenDark: '#2D5016', // 深绿色，用于文本和强调
success: palette.success[400], // 深色模式下使用较亮的成功色
successLight: palette.success[200],
successDark: palette.success[600],
warning: palette.warning[400],
warningLight: palette.warning[200],
warningDark: palette.warning[600],
danger: palette.error[400],
dangerLight: palette.error[200],
dangerDark: palette.error[600],
info: palette.purple[400],
accentPurple: palette.purple[300],
accentGreen: palette.success[300],
// 日期选择器主题色
datePickerNormal: palette.blue,
datePickerSelected: palette.green, // 使用温暖的绿色作为选中状态
datePickerNormal: palette.purple[400],
datePickerSelected: palette.success[400],
// 结构色
border: '#2A2F32',
separator: '#2A2F32',
icon: '#9BA1A6',
border: palette.gray[700],
separator: palette.gray[700],
icon: palette.gray[300],
// Tab 相关（保持兼容）
tabIconDefault: '#9BA1A6',
tabIconSelected: palette.ink, // 在亮色背景上使用深色文字
tabBarBackground: palette.ink,
tabBarActiveBackground: primaryColor,
// Tab 相关
tabIconDefault: palette.gray[400],
tabIconSelected: palette.base.white, // 选中时使用白色文字/图标，确保在紫色背景上清晰可见
tabBarBackground: palette.gray[800],
tabBarActiveBackground: palette.purple[500], // 使用主色作为选中背景，在深色模式下更突出
// 页面氛围与装饰（新）
pageBackgroundEmphasis: '#151718',
heroSurfaceTint: 'rgba(187,242,70,0.12)',
ornamentPrimary: 'rgba(187,242,70,0.18)',
ornamentAccent: 'rgba(164,138,237,0.14)',
// 页面氛围与装饰
pageBackgroundEmphasis: palette.gray[800],
heroSurfaceTint: palette.purple[900],
ornamentPrimary: palette.purple[800],
ornamentAccent: palette.success[800],
// 统一背景渐变色（深色模式）
backgroundGradientStart: '#0A0B0C', // 深黑色起始
backgroundGradientEnd: '#151718', // 背景色结束
// 背景渐变色
backgroundGradientStart: palette.gray[900],
backgroundGradientEnd: palette.gray[800],
},
} as const;