feat: optimize web ui

packages/web/src/components/ThemeToggle.tsx

@@ -0,0 +1,45 @@
+import { useTheme } from '../lib/theme';
+
+const icons = {
+  light: (
+    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <circle cx="12" cy="12" r="5" /><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+    </svg>
+  ),
+  dark: (
+    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  ),
+  system: (
+    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <rect x="2" y="3" width="20" height="14" rx="2" /><path d="M8 21h8m-4-4v4" />
+    </svg>
+  ),
+};
+
+const labels = { light: '浅色', dark: '深色', system: '跟随系统' } as const;
+const order: Array<'light' | 'dark' | 'system'> = ['light', 'dark', 'system'];
+
+export default function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <div className="flex items-center gap-1 p-1 rounded-lg bg-bg-tertiary">
+      {order.map((t) => (
+        <button
+          key={t}
+          onClick={() => setTheme(t)}
+          title={labels[t]}
+          className={`flex items-center justify-center w-8 h-7 rounded-md transition-all duration-150 ${
+            theme === t
+              ? 'bg-bg-elevated text-text-primary shadow-sm'
+              : 'text-text-muted hover:text-text-secondary'
+          }`}
+        >
+          {icons[t]}
+        </button>
+      ))}
+    </div>
+  );
+}