feat: 实现减脂体重管理App完整功能
- 实现拍照识别食物功能(集成大语言模型视觉能力) - 实现智能对话功能(集成大语言模型流式输出) - 实现食物记录和卡路里管理功能 - 实现体重记录和统计功能 - 实现健康数据管理页面 - 配置数据库表结构(用户、食物记录、体重记录) - 实现Express后端API路由 - 配置Tab导航和前端页面 - 采用健康运动配色方案
This commit is contained in:
177
client/constants/theme.ts
Normal file
177
client/constants/theme.ts
Normal file
@@ -0,0 +1,177 @@
|
||||
export const Colors = {
|
||||
light: {
|
||||
textPrimary: "#1F2937",
|
||||
textSecondary: "#6B7280",
|
||||
textMuted: "#9CA3AF",
|
||||
primary: "#059669", // Emerald-600 - 健康运动主色
|
||||
accent: "#10B981", // Emerald-500 - 辅助色
|
||||
success: "#10B981",
|
||||
error: "#EF4444",
|
||||
backgroundRoot: "#F8FAFC", // 冷瓷白
|
||||
backgroundDefault: "#FFFFFF",
|
||||
backgroundTertiary: "#F1F5F9",
|
||||
buttonPrimaryText: "#FFFFFF",
|
||||
tabIconSelected: "#059669",
|
||||
border: "#E2E8F0",
|
||||
borderLight: "#F1F5F9",
|
||||
},
|
||||
dark: {
|
||||
textPrimary: "#F9FAFB",
|
||||
textSecondary: "#9CA3AF",
|
||||
textMuted: "#6B7280",
|
||||
primary: "#34D399", // Emerald-400 - 暗色模式主色
|
||||
accent: "#10B981",
|
||||
success: "#34D399",
|
||||
error: "#F87171",
|
||||
backgroundRoot: "#111827", // 更深的背景色
|
||||
backgroundDefault: "#1F2937",
|
||||
backgroundTertiary: "#374151",
|
||||
buttonPrimaryText: "#111827",
|
||||
tabIconSelected: "#34D399",
|
||||
border: "#374151",
|
||||
borderLight: "#4B5563",
|
||||
},
|
||||
};
|
||||
|
||||
export const Spacing = {
|
||||
xs: 4,
|
||||
sm: 8,
|
||||
md: 12,
|
||||
lg: 16,
|
||||
xl: 20,
|
||||
"2xl": 24,
|
||||
"3xl": 32,
|
||||
"4xl": 40,
|
||||
"5xl": 48,
|
||||
"6xl": 64,
|
||||
};
|
||||
|
||||
export const BorderRadius = {
|
||||
xs: 4,
|
||||
sm: 8,
|
||||
md: 12,
|
||||
lg: 16,
|
||||
xl: 20,
|
||||
"2xl": 24,
|
||||
"3xl": 28,
|
||||
"4xl": 32,
|
||||
full: 9999,
|
||||
};
|
||||
|
||||
export const Typography = {
|
||||
display: {
|
||||
fontSize: 112,
|
||||
lineHeight: 112,
|
||||
fontWeight: "200" as const,
|
||||
letterSpacing: -4,
|
||||
},
|
||||
displayLarge: {
|
||||
fontSize: 112,
|
||||
lineHeight: 112,
|
||||
fontWeight: "200" as const,
|
||||
letterSpacing: -2,
|
||||
},
|
||||
displayMedium: {
|
||||
fontSize: 48,
|
||||
lineHeight: 56,
|
||||
fontWeight: "200" as const,
|
||||
},
|
||||
h1: {
|
||||
fontSize: 32,
|
||||
lineHeight: 40,
|
||||
fontWeight: "700" as const,
|
||||
},
|
||||
h2: {
|
||||
fontSize: 28,
|
||||
lineHeight: 36,
|
||||
fontWeight: "700" as const,
|
||||
},
|
||||
h3: {
|
||||
fontSize: 24,
|
||||
lineHeight: 32,
|
||||
fontWeight: "300" as const,
|
||||
},
|
||||
h4: {
|
||||
fontSize: 20,
|
||||
lineHeight: 28,
|
||||
fontWeight: "600" as const,
|
||||
},
|
||||
title: {
|
||||
fontSize: 18,
|
||||
lineHeight: 24,
|
||||
fontWeight: "700" as const,
|
||||
},
|
||||
body: {
|
||||
fontSize: 16,
|
||||
lineHeight: 24,
|
||||
fontWeight: "400" as const,
|
||||
},
|
||||
bodyMedium: {
|
||||
fontSize: 16,
|
||||
lineHeight: 24,
|
||||
fontWeight: "500" as const,
|
||||
},
|
||||
small: {
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
fontWeight: "400" as const,
|
||||
},
|
||||
smallMedium: {
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
fontWeight: "500" as const,
|
||||
},
|
||||
caption: {
|
||||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
fontWeight: "400" as const,
|
||||
},
|
||||
captionMedium: {
|
||||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
fontWeight: "500" as const,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
fontWeight: "500" as const,
|
||||
letterSpacing: 2,
|
||||
textTransform: "uppercase" as const,
|
||||
},
|
||||
labelSmall: {
|
||||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
fontWeight: "500" as const,
|
||||
letterSpacing: 1,
|
||||
textTransform: "uppercase" as const,
|
||||
},
|
||||
labelTitle: {
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
fontWeight: "700" as const,
|
||||
letterSpacing: 2,
|
||||
textTransform: "uppercase" as const,
|
||||
},
|
||||
link: {
|
||||
fontSize: 16,
|
||||
lineHeight: 24,
|
||||
fontWeight: "400" as const,
|
||||
},
|
||||
stat: {
|
||||
fontSize: 30,
|
||||
lineHeight: 36,
|
||||
fontWeight: "300" as const,
|
||||
},
|
||||
tiny: {
|
||||
fontSize: 10,
|
||||
lineHeight: 14,
|
||||
fontWeight: "400" as const,
|
||||
},
|
||||
navLabel: {
|
||||
fontSize: 10,
|
||||
lineHeight: 14,
|
||||
fontWeight: "500" as const,
|
||||
},
|
||||
};
|
||||
|
||||
export type Theme = typeof Colors.light;
|
||||
Reference in New Issue
Block a user