feat: 增加主题色功能

2026-09-01 11:15:00 +08:00
parent bb5a9b3c0f
commit bc6512f668
12 changed files with 386 additions and 229 deletions
--- a/src/utils/themes.ts
+++ b/src/utils/themes.ts
@@ -0,0 +1,72 @@
+import type { ConfigProviderThemeVars } from "@wot-ui/ui";
+
+export type ThemeKey = 'purple' | 'green' | 'blue' | 'amber'
+
+interface ThemeMeta {
+  label: string;
+  vars: ConfigProviderThemeVars
+}
+
+const THEMES: Record<ThemeKey, ThemeMeta> = {
+  purple: {
+    label: '暮夜紫',
+    vars: {
+      primary1: '#f5f3ff', primary2: '#ede9fe', primary3: '#ddd6fe', primary4: '#c4b5fd',
+      primary5: '#8b5cf6', primary6: '#7c3aed', primary7: '#6d28d9',
+      primary8: '#5b21b6', primary9: '#4c1d95', primary10: '#3b1779'
+    }
+  },
+  green: {
+    label: '薄荷绿',
+    vars: {
+      primary1: '#ecfdf5', primary2: '#d1fae5', primary3: '#a7f3d0', primary4: '#6ee7b7',
+      primary5: '#34d399', primary6: '#059669', primary7: '#047857',
+      primary8: '#065f46', primary9: '#04472f', primary10: '#03301f'
+    }
+  },
+  blue: {
+    label: '极客蓝',
+    vars: {
+      primary1: '#eff6ff', primary2: '#dbeafe', primary3: '#bfdbfe', primary4: '#93c5fd',
+      primary5: '#60a5fa', primary6: '#2563eb', primary7: '#1d4ed8',
+      primary8: '#1e40af', primary9: '#1e3a8a', primary10: '#172554'
+    }
+  },
+  amber: {
+    label: '落日橙',
+    vars: {
+      primary1: '#fff7ed', primary2: '#ffedd5', primary3: '#fed7aa', primary4: '#fdba74',
+      primary5: '#fb923c', primary6: '#ea580c', primary7: '#c2410c',
+      primary8: '#9a3412', primary9: '#7c2d12', primary10: '#4a1d0b'
+    }
+  }
+}
+
+export const DEFAULT_THEME: ThemeKey = 'purple'
+
+export function getTheme(key?: string | ThemeKey | null): ConfigProviderThemeVars {
+  const safeKey = (key ?? DEFAULT_THEME) as ThemeKey
+  return THEMES[safeKey].vars ?? THEMES[DEFAULT_THEME].vars
+}
+
+export const getThemeStyle: Record<ThemeKey, { backgroundImage: string }> = {
+  purple: {
+    backgroundImage: 'linear-gradient(180deg, #7c3aed 0%, #a78bfa 42%, #ede9fe 100%)'
+  },
+  green: {
+    backgroundImage: 'linear-gradient(180deg, #059669 0%, #34d399 42%, #d1fae5 100%)'
+  },
+  blue: {
+    backgroundImage: 'linear-gradient(180deg, #2563eb 0%, #60a5fa 42%, #dbeafe 100%)'
+  },
+  amber: {
+    backgroundImage: 'linear-gradient(180deg, #c2410c 0%, #fb923c 42%, #ffedd5 100%)'
+  }
+}
+
+export const getThemePrimaryColor: Record<ThemeKey, string> = {
+  purple: '#6d28d9',
+  green:  '#047857',
+  blue:   '#1d4ed8',
+  amber:  '#b45309'
+}