feat: AI分析单页展示 + 主题切换 + 移动端适配

- AI分析页改为直接展示最新报告，历史存数据库 - 新增浅色/深色/系统自动主题切换 - 市场看板、AI分析页适配主题变量 - 移动端表格可滑动、按钮自动换行 - Mermaid图表支持 - Markdown表格渲染支持(remark-gfm)
2026-09-01 12:33:27 +08:00
parent 912a224b6b
commit 6478e0d403
16 changed files with 614 additions and 407 deletions
@@ -0,0 +1,58 @@
+import { useState, useRef, useEffect } from "react";
+import { Sun, Moon, Monitor } from "lucide-react";
+import { useTheme } from "../lib/use-theme";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const iconMap = { light: Sun, dark: Moon, system: Monitor };
+  const CurrentIcon = iconMap[theme];
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center justify-center w-8 h-8 rounded-lg bg-muted text-muted-foreground hover:text-foreground shadow-sm transition-colors"
+        title="切换主题"
+      >
+        <CurrentIcon className="h-4 w-4" />
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full right-0 mb-1 bg-popover border rounded-lg shadow-lg p-1 flex gap-0.5 animate-in fade-in slide-in-from-bottom-2 duration-150">
+          {([
+            { value: "light" as const, icon: Sun, label: "浅色" },
+            { value: "dark" as const, icon: Moon, label: "深色" },
+            { value: "system" as const, icon: Monitor, label: "自动" },
+          ]).map(({ value, icon: Icon, label }) => (
+            <button
+              key={value}
+              onClick={() => { setTheme(value); setOpen(false); }}
+              title={label}
+              className={`flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors ${
+                theme === value
+                  ? "bg-accent text-accent-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Icon className="h-4 w-4" />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}