feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型（dark/light） - storage 新增 loadTheme/saveTheme 持久化主题偏好 - ConfigPanel 新增外观分组，主题下拉选择 - App.tsx 通过 data-theme 属性挂载到 html 元素 - App.css 新增 [data-theme=light] 亮色变量覆盖 Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-13 17:08:56 +08:00
parent f17c3c24a7
commit 0227822120
5 changed files with 75 additions and 7 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,16 +2,29 @@
 // CamTalk — 主应用组件（Web 端双栏布局）
 // ============================================================

-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useVisionSession } from "./hooks/useVisionSession";
 import { VideoPreview } from "./components/VideoPreview";
 import { ChatPanel } from "./components/ChatPanel";
 import { ConfigPanel } from "./components/ConfigPanel";
 import { ToastContainer } from "./components/Toast";
+import { loadTheme, saveTheme } from "./lib/storage";
+import type { Theme } from "./types";
 import "./App.css";

 function App() {
  const [showConfig, setShowConfig] = useState(false);
+  const [theme, setTheme] = useState<Theme>(loadTheme);
+
+  // 切换主题时更新 <html> 的 data-theme 属性
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [theme]);
+
+  const handleThemeChange = useCallback((t: Theme) => {
+    setTheme(t);
+    saveTheme(t);
+  }, []);

  const {
    messages,
@@ -67,7 +80,9 @@ function App() {
      {showConfig && (
        <ConfigPanel
          config={config}
+          theme={theme}
          onUpdate={updateConfig}
+          onThemeChange={handleThemeChange}
          onClose={() => setShowConfig(false)}
        />
      )}