feature: 新增全局主题系统（浅色/深色/跟随系统）、主题持久化与主题切换组件

frontend/src/theme/ThemeProvider.tsx

@@ -0,0 +1,155 @@
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import { getThemeConfig, type ResolvedThemeMode } from './themeConfig';
+import { ThemeModeContext } from './themeContext';
+import { getStoredThemeMode, setStoredThemeMode, type ThemeMode } from './themeStorage';
+
+const getSystemResolvedMode = (): ResolvedThemeMode => {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return 'light';
+  }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+
+const getResolvedMode = (themeMode: ThemeMode, currentSystemMode: ResolvedThemeMode): ResolvedThemeMode => {
+  return themeMode === 'system' ? currentSystemMode : themeMode;
+};
+
+const hexToRgba = (hexColor: string, alpha: number): string => {
+  const hex = hexColor.replace('#', '').trim();
+
+  if (/^[\da-fA-F]{3}$/.test(hex)) {
+    const [r, g, b] = hex.split('');
+    return `rgba(${parseInt(`${r}${r}`, 16)}, ${parseInt(`${g}${g}`, 16)}, ${parseInt(`${b}${b}`, 16)}, ${alpha})`;
+  }
+
+  if (/^[\da-fA-F]{6}$/.test(hex)) {
+    return `rgba(${parseInt(hex.slice(0, 2), 16)}, ${parseInt(hex.slice(2, 4), 16)}, ${parseInt(hex.slice(4, 6), 16)}, ${alpha})`;
+  }
+
+  return `rgba(136, 77, 92, ${alpha})`;
+};
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+  const [mode, setModeState] = useState<ThemeMode>(() => getStoredThemeMode());
+  const [systemMode, setSystemMode] = useState<ResolvedThemeMode>(() => getSystemResolvedMode());
+  const transitionCleanupRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (event: MediaQueryListEvent) => {
+      setSystemMode(event.matches ? 'dark' : 'light');
+    };
+
+    setSystemMode(mediaQuery.matches ? 'dark' : 'light');
+
+    if (typeof mediaQuery.addEventListener === 'function') {
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    }
+
+    mediaQuery.addListener(handleChange);
+    return () => mediaQuery.removeListener(handleChange);
+  }, []);
+
+  const resolvedMode: ResolvedThemeMode = getResolvedMode(mode, systemMode);
+  const themeConfig = useMemo(() => getThemeConfig(resolvedMode), [resolvedMode]);
+
+  const setMode = (nextMode: ThemeMode) => {
+    if (nextMode === mode) {
+      return;
+    }
+
+    const nextResolvedMode = getResolvedMode(nextMode, systemMode);
+    const applyMode = () => {
+      setModeState(nextMode);
+      setStoredThemeMode(nextMode);
+    };
+
+    if (typeof document === 'undefined') {
+      applyMode();
+      return;
+    }
+
+    const root = document.documentElement;
+    const docWithViewTransition = document as Document & {
+      startViewTransition?: (callback: () => void) => { finished: Promise<void> };
+    };
+
+    if (!docWithViewTransition.startViewTransition || nextResolvedMode === resolvedMode) {
+      applyMode();
+      return;
+    }
+
+    root.setAttribute('data-theme-transition', nextResolvedMode === 'dark' ? 'to-dark' : 'to-light');
+
+    try {
+      docWithViewTransition.startViewTransition(() => {
+        applyMode();
+      }).finished.finally(() => {
+        if (transitionCleanupRef.current !== null) {
+          window.clearTimeout(transitionCleanupRef.current);
+        }
+        transitionCleanupRef.current = window.setTimeout(() => {
+          root.removeAttribute('data-theme-transition');
+          transitionCleanupRef.current = null;
+        }, 50);
+      });
+    } catch {
+      root.removeAttribute('data-theme-transition');
+      applyMode();
+    }
+  };
+
+  useLayoutEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const root = document.documentElement;
+    root.setAttribute('data-theme-mode', mode);
+    root.setAttribute('data-theme-resolved', resolvedMode);
+    root.style.colorScheme = resolvedMode;
+
+    const tooltipBg = themeConfig.token?.colorPrimary ?? '#884d5c';
+    root.style.setProperty('--app-tooltip-bg', tooltipBg);
+    root.style.setProperty('--app-tooltip-shadow', hexToRgba(tooltipBg, 0.3));
+  }, [mode, resolvedMode, themeConfig]);
+
+  useEffect(() => {
+    return () => {
+      if (transitionCleanupRef.current !== null) {
+        window.clearTimeout(transitionCleanupRef.current);
+      }
+    };
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      mode,
+      resolvedMode,
+      setMode,
+    }),
+    [mode, resolvedMode],
+  );
+
+  return (
+    <ThemeModeContext.Provider value={contextValue}>
+      <ConfigProvider
+        locale={zhCN}
+        theme={{
+          ...themeConfig,
+          cssVar: true,
+        }}
+      >
+        {children}
+      </ConfigProvider>
+    </ThemeModeContext.Provider>
+  );
+};