From 64c6ed92b05c6852b7a1355e4be834810c85763d Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Tue, 1 Sep 2026 12:41:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E7=82=B9=E5=87=BB=E5=B1=95=E5=BC=80=E6=94=B6?=
 =?UTF-8?q?=E8=B5=B7=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ThemeToggle.tsx | 76 +++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 11e139c..36238ec 100644
--- a/src/components/ThemeToggle.tsx
+++ b/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 CurrentIcon = iconMap[theme];
+  const options = [
+    { 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">
-      <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 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); setExpanded(false); }}
+          title={label}
+          className={`flex items-center justify-center w-8 h-8 rounded-md text-sm transition-colors ${
+            theme === value
+              ? "bg-background text-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          <Icon className="h-4 w-4" />
+        </button>
+      ))}
     </div>
   );
 }