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

src/components/ThemeToggle.tsx

@@ -4,55 +4,57 @@ 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 options = [
-  const CurrentIcon = iconMap[theme];
+    { value: "light" as const, icon: Sun, label: "浅色" },
+    { value: "dark" as const, icon: Moon, label: "深色" },
+    { value: "system" as const, icon: Monitor, 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="relative">
+    <div ref={ref} className="flex items-center bg-muted rounded-lg p-0.5 gap-0.5 shadow-sm">
-      <button
+      {options.map(({ value, icon: Icon, label }) => (
-        onClick={() => setOpen(!open)}
+        <button
-        className="flex items-center justify-center w-8 h-8 rounded-lg bg-muted text-muted-foreground hover:text-foreground shadow-sm transition-colors"
+          key={value}
-        title="切换主题"
+          onClick={() => { setTheme(value); setExpanded(false); }}
-      >
+          title={label}
-        <CurrentIcon className="h-4 w-4" />
+          className={`flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors ${
-      </button>
+            theme === value
-
+              ? "bg-background text-foreground shadow-sm"
-      {open && (
+              : "text-muted-foreground hover:text-foreground"
-        <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: "浅色" },
+          <Icon className="h-4 w-4" />
-            { value: "dark" as const, icon: Moon, label: "深色" },
+        </button>
-            { 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>
   );
 }