完整性更新

现在已经实现了大部分基础功能

src/modules/settings/components/theme-preferences-card.tsx

@@ -0,0 +1,60 @@
+"use client"
+import { Monitor, Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { Label } from "@/shared/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/components/ui/select"
+
+type ThemeChoice = "system" | "light" | "dark"
+
+export function ThemePreferencesCard() {
+  const { theme, setTheme } = useTheme()
+
+  const value: ThemeChoice = theme === "light" || theme === "dark" || theme === "system" ? theme : "system"
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Theme</CardTitle>
+        <CardDescription>Choose how the admin console looks on this device.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-3 sm:max-w-md">
+        <div className="space-y-2">
+          <Label htmlFor="theme">Color theme</Label>
+          <Select value={value} onValueChange={(v) => setTheme(v)}>
+            <SelectTrigger id="theme" suppressHydrationWarning>
+              <SelectValue placeholder="Select theme" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="system">
+                <div className="flex items-center gap-2">
+                  <Monitor className="h-4 w-4 text-muted-foreground" />
+                  System
+                </div>
+              </SelectItem>
+              <SelectItem value="light">
+                <div className="flex items-center gap-2">
+                  <Sun className="h-4 w-4 text-muted-foreground" />
+                  Light
+                </div>
+              </SelectItem>
+              <SelectItem value="dark">
+                <div className="flex items-center gap-2">
+                  <Moon className="h-4 w-4 text-muted-foreground" />
+                  Dark
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}