fix: 主题切换改为点击展开收起模式

src/components/ThemeToggle.tsx

@@ -4,47 +4,51 @@ import { useTheme } from "../lib/use-theme";
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
-  const [open, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (!open) return;
+    if (!expanded) return;
     const handler = (e: MouseEvent) => {
       if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
+        setExpanded(false);
       }
     };
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
+  }, [expanded]);
 
-  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">
-          {([
+  const options = [
     { 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 }) => (
+  ];
+
+  if (!expanded) {
+    const CurrentIcon = options.find(o => o.value === theme)!.icon;
+    return (
+      <div ref={ref}>
+        <button
+          onClick={() => setExpanded(true)}
+          title="切换主题"
+          className="flex items-center justify-center w-8 h-8 rounded-lg bg-muted text-muted-foreground hover:text-foreground shadow-sm transition-colors"
+        >
+          <CurrentIcon className="h-4 w-4" />
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={ref} className="flex items-center bg-muted rounded-lg p-0.5 gap-0.5 shadow-sm">
+      {options.map(({ value, icon: Icon, label }) => (
         <button
           key={value}
-              onClick={() => { setTheme(value); setOpen(false); }}
+          onClick={() => { setTheme(value); setExpanded(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"
+              ? "bg-background text-foreground shadow-sm"
               : "text-muted-foreground hover:text-foreground"
           }`}
         >
@@ -52,7 +56,5 @@ export function ThemeToggle() {
         </button>
       ))}
     </div>
-      )}
-    </div>
   );
 }