代码修改

web-code/contexts/ThemeContext.tsx

@@ -0,0 +1,145 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+// 主题类型
+export type ThemeType = 'dark' | 'light';
+
+// 主题配置
+export interface ThemeConfig {
+  type: ThemeType;
+  name: string;
+  colors: {
+    background: string;
+    backgroundSecondary: string;
+    text: string;
+    textSecondary: string;
+    primary: string;
+    primaryHover: string;
+    border: string;
+    accent: string;
+    success: string;
+    warning: string;
+    error: string;
+    card: string;
+    cardHover: string;
+    input: string;
+    inputBorder: string;
+    overlay: string;
+  };
+}
+
+// 主题配置
+const themes: Record<ThemeType, ThemeConfig> = {
+  dark: {
+    type: 'dark',
+    name: '深色主题',
+    colors: {
+      background: 'slate-900',
+      backgroundSecondary: 'slate-800',
+      text: 'white',
+      textSecondary: 'slate-400',
+      primary: 'blue-500',
+      primaryHover: 'blue-400',
+      border: 'blue-800',
+      accent: 'cyan-400',
+      success: 'emerald-500',
+      warning: 'amber-500',
+      error: 'rose-500',
+      card: 'slate-800',
+      cardHover: 'slate-700',
+      input: 'slate-800',
+      inputBorder: 'blue-800',
+      overlay: 'slate-900/50',
+    },
+  },
+  light: {
+    type: 'light',
+    name: '红白主题',
+    colors: {
+      background: 'white',
+      backgroundSecondary: 'red-50',
+      text: 'gray-900',
+      textSecondary: 'gray-600',
+      primary: 'red-600',
+      primaryHover: 'red-500',
+      border: 'red-200',
+      accent: 'red-700',
+      success: 'green-600',
+      warning: 'amber-500',
+      error: 'red-600',
+      card: 'white',
+      cardHover: 'red-50',
+      input: 'white',
+      inputBorder: 'red-200',
+      overlay: 'black/30',
+    },
+  },
+};
+
+// 主题上下文
+interface ThemeContextType {
+  theme: ThemeType;
+  themeConfig: ThemeConfig;
+  toggleTheme: () => void;
+  setTheme: (theme: ThemeType) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+// 主题提供者
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const [theme, setThemeState] = useState<ThemeType>(() => {
+    // 从 localStorage 读取保存的主题
+    const saved = localStorage.getItem('strategy-theme');
+    return (saved as ThemeType) || 'dark';
+  });
+
+  // 切换主题
+  const toggleTheme = () => {
+    setThemeState((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  };
+
+  // 设置特定主题
+  const setTheme = (newTheme: ThemeType) => {
+    setThemeState(newTheme);
+  };
+
+  // 保存到 localStorage
+  useEffect(() => {
+    localStorage.setItem('strategy-theme', theme);
+    // 更新文档类名
+    document.documentElement.classList.remove('dark', 'light');
+    document.documentElement.classList.add(theme);
+  }, [theme]);
+
+  const themeConfig = themes[theme];
+
+  return (
+    <ThemeContext.Provider value={{ theme, themeConfig, toggleTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+// 使用主题的 Hook
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+// 主题工具函数 - 生成动态类名
+export const getThemeClasses = (colorKey: keyof ThemeConfig['colors']): string => {
+  const { themeConfig } = useTheme();
+  return themeConfig.colors[colorKey];
+};
+
+// 组合类名工具函数
+export const cn = (...classes: (string | undefined | null | false)[]): string => {
+  return classes.filter(Boolean).join(' ');
+};