feat: 全局设置系统 — settings 表、CRUD 路由、主题偏好持久化

src/web/shared/components/ConsoleShell/ConsoleShell.tsx

@@ -1,7 +1,7 @@
 import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
 import { XProvider } from "@ant-design/x";
 import zhCN_X from "@ant-design/x/locale/zh_CN";
-import { App as AntApp, Layout, Segmented } from "antd";
+import { App as AntApp, Layout } from "antd";
 import zhCN from "antd/locale/zh_CN";
 import { useMemo } from "react";
 
@@ -17,14 +17,8 @@ import { ConsoleOutlet } from "./ConsoleOutlet";
 
 const { Content, Header, Sider } = Layout;
 
-const THEME_OPTIONS = [
-  { label: "系统", value: "system" },
-  { label: "明亮", value: "light" },
-  { label: "黑暗", value: "dark" },
-] as const;
-
 export function ConsoleShell({ headerExtra, menuItems, title }: ConsoleShellProps) {
-  const { effectiveTheme, preference: themePreference, setPreference: setThemePreference } = useThemePreference();
+  const { effectiveTheme } = useThemePreference();
   const { collapsed, setCollapsed } = useSidebarCollapsed();
   const { data: meta } = useMeta();
 
@@ -43,14 +37,7 @@ export function ConsoleShell({ headerExtra, menuItems, title }: ConsoleShellProp
                 <span className="app-console-title">{title}</span>
               </span>
             </div>
-            <div className="app-header-right">
-              {headerExtra}
-              <Segmented
-                onChange={(value) => setThemePreference(value)}
-                options={THEME_OPTIONS.map((option) => ({ label: option.label, value: option.value }))}
-                value={themePreference}
-              />
-            </div>
+            <div className="app-header-right">{headerExtra}</div>
           </Header>
           <Layout>
             <Sider

src/web/shared/hooks/use-settings.ts

@@ -0,0 +1,44 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import type { SettingsData } from "../../../shared/api";
+
+export function useSettings() {
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
+    queryFn: fetchSettings,
+    queryKey: ["settings"],
+    staleTime: 60000,
+  });
+
+  const mutation = useMutation({
+    mutationFn: updateSettings,
+    onSuccess: (data) => {
+      queryClient.setQueryData(["settings"], data);
+    },
+  });
+
+  return {
+    data: query.data,
+    error: query.error,
+    isLoading: query.isLoading,
+    isUpdating: mutation.isPending,
+    updateSettings: mutation.mutate,
+  };
+}
+
+async function fetchSettings(): Promise<SettingsData> {
+  const response = await fetch("/api/settings");
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  return response.json() as Promise<SettingsData>;
+}
+
+async function updateSettings(data: Partial<SettingsData>): Promise<SettingsData> {
+  const response = await fetch("/api/settings", {
+    body: JSON.stringify(data),
+    headers: { "Content-Type": "application/json" },
+    method: "PUT",
+  });
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  return response.json() as Promise<SettingsData>;
+}

src/web/shared/hooks/use-theme-preference.ts

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 
+import type { SettingsData } from "../../../shared/api";
+
 export type EffectiveTheme = "dark" | "light";
 export type ThemePreference = "dark" | "light" | "system";
 
@@ -38,6 +40,27 @@ export function useThemePreference() {
   const [systemPrefersDark, setSystemPrefersDark] = useState(() => getSystemPrefersDark());
   const effectiveTheme = resolveEffectiveTheme(preference, systemPrefersDark);
 
+  useEffect(() => {
+    let cancelled = false;
+    fetch("/api/settings")
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json() as Promise<SettingsData>;
+      })
+      .then((data) => {
+        if (cancelled) return;
+        const apiTheme = parseThemePreference(data.theme);
+        setPreferenceState((prev) => (prev !== apiTheme ? apiTheme : prev));
+        writeThemePreference(apiTheme);
+      })
+      .catch(() => {
+        // API 不可用时维持 localStorage 缓存值
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
   useEffect(() => {
     const mediaQueryList = window.matchMedia(THEME_MEDIA_QUERY);
 

src/web/shared/theme/theme-config.ts

@@ -12,7 +12,7 @@ export function buildThemeConfig(effectiveTheme: EffectiveTheme) {
       Layout: {
         bodyBg: isDark ? "#0a0a0a" : "transparent",
         headerBg: "transparent",
-        siderBg: isDark ? "#0a0a0a" : "#ffffff",
+        siderBg: isDark ? "#141414" : "#ffffff",
         triggerBg: isDark ? "#141414" : "#ffffff",
       },
       Menu: {