mirror of
https://github.com/Cccc-owo/CheckInApp.git
synced 2026-06-17 14:06:28 +00:00
style: use united style
This commit is contained in:
+129
-98
@@ -2,180 +2,211 @@ import { theme } from 'ant-design-vue'
|
||||
|
||||
/**
|
||||
* Ant Design Vue 主题配置
|
||||
* 匹配现有 Material Design 3 色彩系统
|
||||
* 严格遵循 Material Design 3 规范
|
||||
* @param {boolean} isDark - 是否为暗色模式
|
||||
*/
|
||||
export default function getAntdTheme(isDark = false) {
|
||||
return {
|
||||
token: {
|
||||
// 主色调 - 绿色（与 MD3 primary 保持一致）
|
||||
// === Material Design 3 Color System ===
|
||||
|
||||
// Primary - 主色调（绿色）
|
||||
colorPrimary: isDark ? '#81c784' : '#4caf50',
|
||||
|
||||
// 成功色
|
||||
// Secondary colors
|
||||
colorSuccess: isDark ? '#81c784' : '#4caf50',
|
||||
|
||||
// 警告色
|
||||
colorWarning: '#ff9800',
|
||||
|
||||
// 错误色
|
||||
colorError: '#f56c6c',
|
||||
|
||||
// 信息色 - 蓝色（与 MD3 secondary 保持一致）
|
||||
colorError: '#f44336', // MD3 标准错误色
|
||||
colorInfo: isDark ? '#64b5f6' : '#2196f3',
|
||||
|
||||
// 背景色
|
||||
colorBgBase: isDark ? '#121212' : '#ffffff',
|
||||
colorBgContainer: isDark ? '#1c1c1e' : '#ffffff',
|
||||
colorBgElevated: isDark ? '#2c2c2e' : '#ffffff',
|
||||
colorBgLayout: isDark ? '#121212' : '#fafafa',
|
||||
colorBgSpotlight: isDark ? '#2c2c2e' : '#ffffff',
|
||||
// === Surface & Background (MD3 规范) ===
|
||||
colorBgBase: isDark ? '#1c1b1f' : '#ffffff',
|
||||
colorBgContainer: isDark ? '#1c1b1f' : '#ffffff',
|
||||
colorBgElevated: isDark ? '#26252a' : '#ffffff',
|
||||
colorBgLayout: isDark ? '#1c1b1f' : '#fefbff', // MD3 标准背景色
|
||||
colorBgSpotlight: isDark ? '#26252a' : '#ffffff',
|
||||
|
||||
// 文字色
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorTextSecondary: isDark ? '#a0a0a3' : '#64748b',
|
||||
colorTextTertiary: isDark ? '#808083' : '#94a3b8',
|
||||
colorTextQuaternary: isDark ? '#606063' : '#cbd5e1',
|
||||
// === Typography (MD3 规范) ===
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f', // On-surface
|
||||
colorTextSecondary: isDark ? '#cac4d0' : '#49454f', // On-surface-variant
|
||||
colorTextTertiary: isDark ? '#938f99' : '#79747e',
|
||||
colorTextQuaternary: isDark ? '#79747e' : '#938f99',
|
||||
|
||||
// 边框色
|
||||
colorBorder: isDark ? '#3a3a3c' : '#e5e7eb',
|
||||
colorBorderSecondary: isDark ? '#2c2c2e' : '#f3f4f6',
|
||||
// === Borders ===
|
||||
colorBorder: isDark ? '#49454f' : '#d1cdd6',
|
||||
colorBorderSecondary: isDark ? '#3a3740' : '#e3e1e6',
|
||||
colorSplit: isDark ? '#49454f' : '#e3e1e6',
|
||||
|
||||
// 分割线颜色
|
||||
colorSplit: isDark ? '#3a3a3c' : '#e5e7eb',
|
||||
// === Shape System ===
|
||||
borderRadius: 12, // Medium shape
|
||||
borderRadiusLG: 16, // Large shape
|
||||
borderRadiusSM: 8, // Small shape
|
||||
borderRadiusXS: 4, // Extra small shape
|
||||
|
||||
// 边框圆角 - 与 Material Design 3 一致
|
||||
borderRadius: 12,
|
||||
// === Typography ===
|
||||
fontFamily: "'Roboto', 'Inter', system-ui, -apple-system, sans-serif",
|
||||
fontSize: 14, // Body Medium
|
||||
fontSizeLG: 16, // Body Large
|
||||
fontSizeSM: 12, // Body Small
|
||||
lineHeight: 1.428, // 20/14 = 1.428
|
||||
lineHeightLG: 1.5, // 24/16 = 1.5
|
||||
|
||||
// 字体家族
|
||||
fontFamily: "'Inter', 'Segoe UI', 'Roboto', system-ui, -apple-system, sans-serif",
|
||||
|
||||
// 链接色
|
||||
// === Links ===
|
||||
colorLink: isDark ? '#64b5f6' : '#2196f3',
|
||||
colorLinkHover: isDark ? '#90caf9' : '#1976d2',
|
||||
colorLinkActive: isDark ? '#42a5f5' : '#1565c0',
|
||||
|
||||
// 字体大小
|
||||
fontSize: 14,
|
||||
|
||||
// 行高
|
||||
lineHeight: 1.5715,
|
||||
|
||||
// 控制组件高度
|
||||
// === Components ===
|
||||
controlHeight: 40,
|
||||
controlHeightLG: 48,
|
||||
controlHeightSM: 32,
|
||||
|
||||
// === Motion (MD3 规范) ===
|
||||
motionDurationSlow: '0.3s',
|
||||
motionDurationMid: '0.2s',
|
||||
motionDurationFast: '0.1s',
|
||||
},
|
||||
|
||||
components: {
|
||||
// Card 组件定制
|
||||
// === Card 组件 (MD3 Elevated Card) ===
|
||||
Card: {
|
||||
borderRadiusLG: 16,
|
||||
boxShadowTertiary: isDark
|
||||
? '0 1px 3px 1px rgba(0, 0, 0, 0.5)'
|
||||
: '0 1px 3px 1px rgba(0, 0, 0, 0.08)',
|
||||
paddingLG: 24,
|
||||
colorBgContainer: isDark ? '#1c1c1e' : '#ffffff',
|
||||
colorBorderSecondary: isDark ? '#3a3a3c' : '#f0f0f0',
|
||||
colorTextHeading: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorBgContainer: isDark ? '#1c1b1f' : '#ffffff',
|
||||
colorBorderSecondary: isDark ? '#49454f' : '#e3e1e6',
|
||||
colorTextHeading: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
},
|
||||
|
||||
// Button 组件定制
|
||||
// === Button 组件 (MD3 规范) ===
|
||||
Button: {
|
||||
borderRadius: 24, // 圆角按钮，类似 MD3
|
||||
borderRadius: 20, // MD3 Filled Button 圆角
|
||||
borderRadiusLG: 24,
|
||||
borderRadiusSM: 16,
|
||||
controlHeight: 40,
|
||||
controlHeightLG: 48,
|
||||
controlHeightSM: 32,
|
||||
fontSize: 14,
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorBgContainer: isDark ? '#2c2c2e' : '#ffffff',
|
||||
fontSizeLG: 16,
|
||||
fontSizeSM: 12,
|
||||
paddingContentHorizontal: 24,
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
colorBgContainer: isDark ? '#26252a' : '#ffffff',
|
||||
},
|
||||
|
||||
// Input 组件定制
|
||||
// === Input 组件 (MD3 Text Field) ===
|
||||
Input: {
|
||||
borderRadius: 12,
|
||||
controlHeight: 40,
|
||||
colorBgContainer: isDark ? '#2c2c2e' : '#ffffff',
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorTextPlaceholder: isDark ? '#808083' : '#94a3b8',
|
||||
colorBorder: isDark ? '#3a3a3c' : '#e5e7eb',
|
||||
colorBgContainer: isDark ? '#26252a' : '#ffffff',
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
colorTextPlaceholder: isDark ? '#938f99' : '#79747e',
|
||||
colorBorder: isDark ? '#49454f' : '#d1cdd6',
|
||||
},
|
||||
|
||||
// Select 组件定制
|
||||
// === Select 组件 ===
|
||||
Select: {
|
||||
borderRadius: 12,
|
||||
controlHeight: 40,
|
||||
colorBgContainer: isDark ? '#2c2c2e' : '#ffffff',
|
||||
colorBgElevated: isDark ? '#2c2c2e' : '#ffffff',
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorTextPlaceholder: isDark ? '#808083' : '#94a3b8',
|
||||
colorBorder: isDark ? '#3a3a3c' : '#e5e7eb',
|
||||
colorBgContainer: isDark ? '#26252a' : '#ffffff',
|
||||
colorBgElevated: isDark ? '#26252a' : '#ffffff',
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
colorTextPlaceholder: isDark ? '#938f99' : '#79747e',
|
||||
colorBorder: isDark ? '#49454f' : '#d1cdd6',
|
||||
},
|
||||
|
||||
// Modal 组件定制
|
||||
// === Modal 组件 (MD3 Dialog) ===
|
||||
Modal: {
|
||||
borderRadiusLG: 16,
|
||||
colorBgElevated: isDark ? '#1c1c1e' : '#ffffff',
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorTextHeading: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
borderRadiusLG: 28, // MD3 Dialog 使用 Extra Large 圆角
|
||||
colorBgElevated: isDark ? '#1c1b1f' : '#ffffff',
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
colorTextHeading: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
},
|
||||
|
||||
// Table 组件定制
|
||||
// === Table 组件 ===
|
||||
Table: {
|
||||
borderRadius: 12,
|
||||
colorBgContainer: isDark ? '#1c1c1e' : '#ffffff',
|
||||
colorFillAlter: isDark ? '#2c2c2e' : '#f5f7fa',
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorTextHeading: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorBorderSecondary: isDark ? '#3a3a3c' : '#f0f0f0',
|
||||
colorBgContainer: isDark ? '#1c1b1f' : '#ffffff',
|
||||
colorFillAlter: isDark ? '#26252a' : '#f5f5f5',
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
colorTextHeading: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
colorBorderSecondary: isDark ? '#49454f' : '#e3e1e6',
|
||||
},
|
||||
|
||||
// Tabs 组件定制
|
||||
// === Tabs 组件 ===
|
||||
Tabs: {
|
||||
borderRadius: 12,
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorBgContainer: isDark ? '#1c1c1e' : '#ffffff',
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
colorBgContainer: isDark ? '#1c1b1f' : '#ffffff',
|
||||
},
|
||||
|
||||
// Menu 组件定制
|
||||
// === Menu 组件 ===
|
||||
Menu: {
|
||||
colorItemBg: isDark ? '#1c1c1e' : '#ffffff',
|
||||
colorItemBgHover: isDark ? '#2c2c2e' : '#f5f7fa',
|
||||
colorItemBgSelected: isDark ? '#2c2c2e' : '#e8f5e9',
|
||||
colorItemText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorItemBg: isDark ? '#1c1b1f' : '#ffffff',
|
||||
colorItemBgHover: isDark ? '#26252a' : '#f5f5f5',
|
||||
colorItemBgSelected: isDark ? '#3a4a3f' : '#e8f5e9',
|
||||
colorItemText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
colorItemTextSelected: isDark ? '#81c784' : '#4caf50',
|
||||
borderRadius: 12,
|
||||
},
|
||||
|
||||
// Dropdown 组件定制
|
||||
// === Dropdown 组件 ===
|
||||
Dropdown: {
|
||||
colorBgElevated: isDark ? '#2c2c2e' : '#ffffff',
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorBgElevated: isDark ? '#26252a' : '#ffffff',
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
borderRadiusLG: 12,
|
||||
},
|
||||
|
||||
// Descriptions 组件定制
|
||||
// === Descriptions 组件 ===
|
||||
Descriptions: {
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorTextSecondary: isDark ? '#a0a0a3' : '#64748b',
|
||||
colorBgContainer: isDark ? '#1c1c1e' : '#ffffff',
|
||||
colorFillAlter: isDark ? '#2c2c2e' : '#f5f7fa',
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
colorTextSecondary: isDark ? '#cac4d0' : '#49454f',
|
||||
colorBgContainer: isDark ? '#1c1b1f' : '#ffffff',
|
||||
colorFillAlter: isDark ? '#201f24' : '#f3f4f6', // Label 背景色 = surface-container
|
||||
colorSplit: isDark ? '#49454f' : '#e3e1e6',
|
||||
borderRadiusLG: 8, // 设置 Descriptions 容器圆角
|
||||
},
|
||||
|
||||
// Alert 组件定制
|
||||
// === Alert 组件 ===
|
||||
Alert: {
|
||||
borderRadiusLG: 12,
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
},
|
||||
|
||||
// Drawer 组件定制
|
||||
// === Drawer 组件 ===
|
||||
Drawer: {
|
||||
colorBgElevated: isDark ? '#1c1c1e' : '#ffffff',
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorBgElevated: isDark ? '#1c1b1f' : '#ffffff',
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
borderRadiusLG: 16,
|
||||
},
|
||||
|
||||
// Form 组件定制
|
||||
// === Form 组件 ===
|
||||
Form: {
|
||||
colorText: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorTextHeading: isDark ? '#e5e5e7' : '#1c1b1f',
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
colorTextHeading: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
},
|
||||
|
||||
// Empty 组件定制
|
||||
// === Empty 组件 ===
|
||||
Empty: {
|
||||
colorTextDescription: isDark ? '#a0a0a3' : '#94a3b8',
|
||||
colorTextDescription: isDark ? '#938f99' : '#79747e',
|
||||
},
|
||||
|
||||
// === Tag 组件 ===
|
||||
Tag: {
|
||||
borderRadiusSM: 16, // 药丸形
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
},
|
||||
|
||||
// === Switch 组件 ===
|
||||
Switch: {
|
||||
colorPrimary: isDark ? '#81c784' : '#4caf50',
|
||||
colorText: isDark ? '#e6e1e5' : '#1c1b1f',
|
||||
},
|
||||
|
||||
// === Tooltip 组件 ===
|
||||
Tooltip: {
|
||||
colorBgSpotlight: isDark ? '#313033' : '#f5f5f5', // Tooltip 背景色（跟随主题）
|
||||
colorTextLightSolid: isDark ? '#ffffff' : '#1c1b1f', // Tooltip 文本颜色（跟随主题）
|
||||
borderRadius: 8,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user