Initial commit

src/components/settings/appearance-settings.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { Monitor, Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+type ThemeMode = "system" | "light" | "dark"
+
+export function AppearanceSettings() {
+  const { theme, resolvedTheme, setTheme } = useTheme()
+  const resolvedThemeLabel =
+    resolvedTheme === "dark"
+      ? "深色"
+      : resolvedTheme === "light"
+        ? "浅色"
+        : "--"
+
+  return (
+    <div className="h-full overflow-auto">
+      <div className="w-full space-y-4">
+        <section className="rounded-xl border bg-card p-4 space-y-4">
+          <div className="flex items-center gap-2">
+            <Sun className="h-4 w-4 text-muted-foreground" />
+            <h2 className="text-sm font-semibold">主题外观</h2>
+          </div>
+
+          <p className="text-xs text-muted-foreground leading-5">
+            选择浅色、深色或跟随系统主题，设置会自动保存。
+          </p>
+
+          <div className="space-y-2">
+            <label className="text-xs font-medium text-muted-foreground">
+              主题模式
+            </label>
+            <Select
+              value={theme ?? "system"}
+              onValueChange={(value) => setTheme(value as ThemeMode)}
+            >
+              <SelectTrigger className="w-56">
+                <SelectValue placeholder="请选择主题模式" />
+              </SelectTrigger>
+              <SelectContent align="start">
+                <SelectItem value="system">
+                  <span className="inline-flex items-center gap-2">
+                    <Monitor className="h-3.5 w-3.5" />
+                    跟随系统
+                  </span>
+                </SelectItem>
+                <SelectItem value="light">
+                  <span className="inline-flex items-center gap-2">
+                    <Sun className="h-3.5 w-3.5" />
+                    浅色
+                  </span>
+                </SelectItem>
+                <SelectItem value="dark">
+                  <span className="inline-flex items-center gap-2">
+                    <Moon className="h-3.5 w-3.5" />
+                    深色
+                  </span>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <p
+              className="text-[11px] text-muted-foreground"
+              suppressHydrationWarning
+            >
+              当前生效主题：{resolvedThemeLabel}
+            </p>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}