feat: antd 主题改造 — 启用 cssVar、纯黑白 colorPrimary、统一 sidebar/滚动条/按钮样式

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, theme } from "antd";
+import { App as AntApp, Layout, Segmented } from "antd";
 import zhCN from "antd/locale/zh_CN";
 import { useMemo } from "react";
 
@@ -11,6 +11,7 @@ import { APP } from "../../../../shared/app";
 import { useMeta } from "../../hooks/use-meta";
 import { useSidebarCollapsed } from "../../hooks/use-sidebar-collapsed";
 import { useThemePreference } from "../../hooks/use-theme-preference";
+import { buildThemeConfig } from "../../theme/theme-config";
 import { Sidebar } from "../Sidebar";
 import { ConsoleOutlet } from "./ConsoleOutlet";
 
@@ -28,11 +29,10 @@ export function ConsoleShell({ headerExtra, menuItems, title }: ConsoleShellProp
   const { data: meta } = useMeta();
 
   const versionDisplay = meta?.version ? `v${meta.version}` : null;
-  const themeAlgorithm = effectiveTheme === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm;
   const locale = useMemo(() => ({ ...zhCN, ...zhCN_X }), []);
 
   return (
-    <XProvider locale={locale} theme={{ algorithm: themeAlgorithm }}>
+    <XProvider locale={locale} theme={buildThemeConfig(effectiveTheme)}>
       <AntApp>
         <Layout className="app-layout">
           <Header className="app-header">
@@ -58,7 +58,7 @@ export function ConsoleShell({ headerExtra, menuItems, title }: ConsoleShellProp
               collapsedWidth={64}
               collapsible
               onCollapse={(c) => setCollapsed(c)}
-              theme="light"
+              theme={effectiveTheme === "dark" ? "dark" : "light"}
               trigger={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
               width={232}
             >

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

@@ -0,0 +1,33 @@
+import { theme } from "antd";
+
+import type { EffectiveTheme } from "../hooks/use-theme-preference";
+
+export function buildThemeConfig(effectiveTheme: EffectiveTheme) {
+  const isDark = effectiveTheme === "dark";
+  const algorithm = isDark ? theme.darkAlgorithm : theme.defaultAlgorithm;
+
+  return {
+    algorithm,
+    components: {
+      Layout: {
+        bodyBg: isDark ? "#0a0a0a" : "transparent",
+        headerBg: "transparent",
+        siderBg: isDark ? "#0a0a0a" : "#ffffff",
+        triggerBg: isDark ? "#141414" : "#ffffff",
+      },
+      Menu: {
+        itemActiveBg: isDark ? "#1f1f1f" : "#e5e5e5",
+        itemHoverBg: isDark ? "#1a1a1a" : "#f0f0f0",
+        itemSelectedBg: isDark ? "#2a2a2a" : "#0a0a0a",
+        itemSelectedColor: "#ffffff",
+      },
+    },
+    cssVar: {},
+    token: {
+      borderRadius: 10,
+      colorLink: isDark ? "#a3a3a3" : "#0a0a0a",
+      colorPrimary: isDark ? "#525252" : "#0a0a0a",
+      controlHeight: 36,
+    },
+  };
+}