feat(web): 多主题系统 — 4 套主题 + CSS 变量 + Ant Design 动态主题

- CSS 变量层: :root 默认 blue, [data-theme] 覆盖 warm/dark/emerald - Ant Design: ConfigProvider 按 ThemeName 切换 token + algorithm - ThemeSwitcher: 下拉面板含 4 主题色块预览 + localStorage 持久化 - useThemeMode: 从 store 读取主题名替代色值比对（修复 33 页面暗色失效） - index.html: 添加 Noto Serif SC 字体（warm 主题衬线标题）
2026-04-28 00:20:02 +08:00
parent 50eae8b809
commit e56cd73e49
8 changed files with 918 additions and 276 deletions
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect, lazy, Suspense } from 'react';
+import { useEffect, lazy, Suspense, useMemo } from 'react';
 import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { ConfigProvider, theme as antdTheme, Spin } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
@@ -7,6 +7,7 @@ import Login from './pages/Login';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { useAuthStore } from './stores/auth';
 import { useAppStore } from './stores/app';
+import type { ThemeName } from './stores/app';

 const Home = lazy(() => import('./pages/Home'));
 const Users = lazy(() => import('./pages/Users'));
@@ -68,93 +69,129 @@ function PrivateRoute({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
 }

-const themeConfig = {
-  token: {
-    colorPrimary: '#2563eb',
-    colorSuccess: '#059669',
-    colorWarning: '#d97706',
-    colorError: '#dc2626',
-    colorInfo: '#0284c7',
-    colorBgLayout: '#f8fafc',
-    colorBgContainer: '#ffffff',
-    colorBgElevated: '#ffffff',
-    colorBorder: '#e2e8f0',
-    colorBorderSecondary: '#f1f5f9',
-    borderRadius: 10,
-    borderRadiusLG: 12,
-    borderRadiusSM: 6,
-    fontFamily: "'Noto Sans SC', -apple-system, system-ui, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', Helvetica, Arial, sans-serif",
-    fontSize: 14,
-    fontSizeHeading4: 20,
-    controlHeight: 40,
-    controlHeightLG: 44,
-    controlHeightSM: 32,
-    boxShadow: 'none',
-    boxShadowSecondary: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
-  },
-  components: {
-    Button: {
-      primaryShadow: 'none',
-      fontWeight: 500,
-    },
-    Card: {
-      paddingLG: 20,
-    },
-    Table: {
-      headerBg: '#f1f5f9',
-      headerColor: '#475569',
-      rowHoverBg: '#f1f5f9',
-      fontSize: 14,
-    },
-    Menu: {
-      itemBorderRadius: 10,
-      itemMarginInline: 8,
-      itemHeight: 40,
-    },
-    Modal: {
-      borderRadiusLG: 16,
-    },
-    Tag: {
-      borderRadiusSM: 6,
-    },
-  },
+const baseToken = {
+  borderRadius: 10,
+  borderRadiusLG: 12,
+  borderRadiusSM: 6,
+  fontFamily: "'Noto Sans SC', -apple-system, system-ui, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', Helvetica, Arial, sans-serif",
+  fontSize: 14,
+  fontSizeHeading4: 20,
+  controlHeight: 40,
+  controlHeightLG: 44,
+  controlHeightSM: 32,
+  boxShadow: 'none',
+  boxShadowSecondary: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
 };

-const darkThemeConfig = {
-  ...themeConfig,
-  token: {
-    ...themeConfig.token,
-    colorBgLayout: '#0f172a',
-    colorBgContainer: '#1e293b',
-    colorBgElevated: '#334155',
-    colorBorder: '#334155',
-    colorBorderSecondary: 'rgba(255, 255, 255, 0.06)',
-    boxShadow: 'none',
-    boxShadowSecondary: '0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2)',
+const baseComponents = {
+  Button: { primaryShadow: 'none', fontWeight: 500 },
+  Card: { paddingLG: 20 },
+  Menu: { itemBorderRadius: 10, itemMarginInline: 8, itemHeight: 40 },
+  Modal: { borderRadiusLG: 16 },
+  Tag: { borderRadiusSM: 6 },
+};
+
+const themeConfigs: Record<ThemeName, { token: Record<string, unknown>; components: Record<string, Record<string, unknown>> }> = {
+  blue: {
+    token: {
+      ...baseToken,
+      colorPrimary: '#2563eb',
+      colorSuccess: '#059669',
+      colorWarning: '#d97706',
+      colorError: '#dc2626',
+      colorInfo: '#0284c7',
+      colorBgLayout: '#f8fafc',
+      colorBgContainer: '#ffffff',
+      colorBgElevated: '#ffffff',
+      colorBorder: '#e2e8f0',
+      colorBorderSecondary: '#f1f5f9',
+    },
+    components: {
+      ...baseComponents,
+      Table: { headerBg: '#f1f5f9', headerColor: '#475569', rowHoverBg: '#f1f5f9', fontSize: 14 },
+    },
  },
-  components: {
-    ...themeConfig.components,
-    Table: {
-      headerBg: '#1e293b',
-      headerColor: '#94a3b8',
-      rowHoverBg: '#1e293b',
+  warm: {
+    token: {
+      ...baseToken,
+      borderRadius: 12,
+      borderRadiusLG: 14,
+      borderRadiusSM: 8,
+      colorPrimary: '#C4623A',
+      colorSuccess: '#5B7A5E',
+      colorWarning: '#C4873A',
+      colorError: '#B54A4A',
+      colorInfo: '#8B7A5E',
+      colorBgLayout: '#F5F0EB',
+      colorBgContainer: '#ffffff',
+      colorBgElevated: '#ffffff',
+      colorBorder: '#E8E2DC',
+      colorBorderSecondary: '#F0EBE5',
+    },
+    components: {
+      ...baseComponents,
+      Table: { headerBg: '#EDE8E2', headerColor: '#7A756E', rowHoverBg: '#F5F0EB', fontSize: 14 },
+    },
+  },
+  dark: {
+    token: {
+      ...baseToken,
+      colorPrimary: '#60A5FA',
+      colorSuccess: '#34D399',
+      colorWarning: '#FBBF24',
+      colorError: '#F87171',
+      colorInfo: '#38BDF8',
+      colorBgLayout: '#0F172A',
+      colorBgContainer: '#1E293B',
+      colorBgElevated: '#334155',
+      colorBorder: '#334155',
+      colorBorderSecondary: 'rgba(255,255,255,0.06)',
+      boxShadow: 'none',
+      boxShadowSecondary: '0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2)',
+    },
+    components: {
+      ...baseComponents,
+      Table: { headerBg: '#1E293B', headerColor: '#94A3B8', rowHoverBg: '#1E293B', fontSize: 14 },
+    },
+  },
+  emerald: {
+    token: {
+      ...baseToken,
+      borderRadius: 10,
+      borderRadiusLG: 14,
+      borderRadiusSM: 8,
+      colorPrimary: '#5B7A5E',
+      colorSuccess: '#3D7A42',
+      colorWarning: '#B8863A',
+      colorError: '#A54A4A',
+      colorInfo: '#4A7A8B',
+      colorBgLayout: '#F4F7F4',
+      colorBgContainer: '#ffffff',
+      colorBgElevated: '#ffffff',
+      colorBorder: '#D5DED5',
+      colorBorderSecondary: '#E5ECE5',
+    },
+    components: {
+      ...baseComponents,
+      Table: { headerBg: '#EDF2ED', headerColor: '#5A6E5A', rowHoverBg: '#F4F7F4', fontSize: 14 },
    },
  },
 };

 export default function App() {
  const loadFromStorage = useAuthStore((s) => s.loadFromStorage);
-  const themeMode = useAppStore((s) => s.theme);
+  const themeName = useAppStore((s) => s.theme);

  useEffect(() => {
    loadFromStorage();
  }, [loadFromStorage]);

  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', themeMode);
-  }, [themeMode]);
+    document.documentElement.setAttribute('data-theme', themeName);
+  }, [themeName]);

-  const isDark = themeMode === 'dark';
+  const isDark = themeName === 'dark';
+  const antTheme = useMemo(() => themeConfigs[themeName] ?? themeConfigs.blue, [themeName]);

  return (
    <>
@@ -162,7 +199,7 @@ export default function App() {
    <ConfigProvider
      locale={zhCN}
      theme={{
-        ...isDark ? darkThemeConfig : themeConfig,
+        ...antTheme,
        algorithm: isDark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
      }}
    >
--- a/apps/web/src/components/ThemeSwitcher.tsx
+++ b/apps/web/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,64 @@
+import { Dropdown } from 'antd';
+import { BgColorsOutlined } from '@ant-design/icons';
+import { useAppStore, THEME_OPTIONS } from '../stores/app';
+
+export default function ThemeSwitcher() {
+  const theme = useAppStore((s) => s.theme);
+  const setTheme = useAppStore((s) => s.setTheme);
+
+  const content = (
+    <div style={{
+      padding: 8,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 6,
+      minWidth: 220,
+      background: 'var(--erp-bg-container)',
+      borderRadius: 12,
+      boxShadow: 'var(--erp-shadow-lg)',
+    }}>
+      {THEME_OPTIONS.map((opt) => {
+        const active = theme === opt.key;
+        return (
+          <div
+            key={opt.key}
+            onClick={() => setTheme(opt.key)}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 12,
+              padding: '10px 12px',
+              borderRadius: 8,
+              cursor: 'pointer',
+              border: `2px solid ${active ? opt.preview.primary : 'transparent'}`,
+              background: active ? `${opt.preview.primary}08` : 'transparent',
+              transition: 'all 0.15s ease',
+            }}
+          >
+            {/* 色块预览 */}
+            <div style={{ display: 'flex', gap: 3, flexShrink: 0 }}>
+              <div style={{ width: 20, height: 20, borderRadius: 4, background: opt.preview.primary }} />
+              <div style={{ width: 20, height: 20, borderRadius: 4, background: opt.preview.bg, border: '1px solid #e0e0e0' }} />
+              <div style={{ width: 20, height: 20, borderRadius: 4, background: opt.preview.surface, border: '1px solid #e0e0e0' }} />
+            </div>
+            <div style={{ flex: 1 }}>
+              <div style={{ fontSize: 13, fontWeight: 600, color: active ? opt.preview.primary : '#333' }}>{opt.label}</div>
+              <div style={{ fontSize: 11, color: '#999', marginTop: 1 }}>{opt.desc}</div>
+            </div>
+            {active && (
+              <div style={{ width: 8, height: 8, borderRadius: 4, background: opt.preview.primary, flexShrink: 0 }} />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <Dropdown dropdownRender={() => content} trigger={['click']} placement="bottomRight">
+      <div className="erp-header-btn" title="切换主题">
+        <BgColorsOutlined style={{ fontSize: 16 }} />
+      </div>
+    </Dropdown>
+  );
+}
--- a/apps/web/src/hooks/useThemeMode.ts
+++ b/apps/web/src/hooks/useThemeMode.ts
@@ -1,15 +1,11 @@
-import { theme } from 'antd';
+import { useAppStore } from '../stores/app';

 /**
 * 判断当前是否处于暗色主题模式。
 *
- * 通过 antd design token 的 colorBgContainer 色值检测，
- * 统一替代各页面中重复的 `token.colorBgContainer === '#111827'` 内联判断。
+ * 通过 store 的主题名称判断，替代旧的 token 色值检测，
+ * 支持多主题系统（blue / warm / dark / emerald）。
 */
 export function useThemeMode(): boolean {
-  const { token } = theme.useToken();
-  return (
-    token.colorBgContainer === '#111827' ||
-    token.colorBgContainer === 'rgb(17, 24, 39)'
-  );
+  return useAppStore((s) => s.theme) === 'dark';
 }
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -96,54 +96,175 @@
  --erp-line-height-normal: 1.5;
  --erp-line-height-relaxed: 1.625;

+  /* Heading font — override per theme */
+  --erp-font-heading: 'Noto Sans SC', -apple-system, system-ui, sans-serif;
+
  /* Layout */
  --erp-sidebar-width: 240px;
  --erp-sidebar-collapsed-width: 72px;
  --erp-header-height: 56px;
 }

-/* --- Dark Mode Tokens --- */
-[data-theme='dark'] {
-  --erp-primary-light: rgba(37, 99, 235, 0.15);
-  --erp-primary-light-hover: rgba(37, 99, 235, 0.22);
-  --erp-primary-bg-subtle: rgba(37, 99, 235, 0.1);
+/* ─── Theme: 温润东方 (warm) ─── */
+[data-theme='warm'] {
+  --erp-primary: #C4623A;
+  --erp-primary-hover: #B55A33;
+  --erp-primary-active: #8B3E1F;
+  --erp-primary-light: #F0DDD4;
+  --erp-primary-light-hover: #E8CEBF;
+  --erp-primary-bg-subtle: #FAF5F0;

-  --erp-bg-page: #0f172a;
-  --erp-bg-container: #1e293b;
-  --erp-bg-elevated: #334155;
-  --erp-bg-spotlight: #1e293b;
-  --erp-bg-sidebar: #0f172a;
-  --erp-bg-sidebar-hover: #1e293b;
+  --erp-success: #5B7A5E;
+  --erp-success-bg: #E8F0E8;
+  --erp-warning: #C4873A;
+  --erp-warning-bg: #FFF3E0;
+  --erp-error: #B54A4A;
+  --erp-error-bg: #FDEAEA;
+  --erp-info: #8B7A5E;
+  --erp-info-bg: #F5F0E8;

-  --erp-text-primary: rgba(255, 255, 255, 0.95);
-  --erp-text-secondary: #94a3b8;
-  --erp-text-tertiary: #64748b;
-  --erp-text-sidebar: #94a3b8;
-  --erp-text-sidebar-active: #60a5fa;
+  --erp-bg-page: #F5F0EB;
+  --erp-bg-container: #FFFFFF;
+  --erp-bg-elevated: #FFFFFF;
+  --erp-bg-spotlight: #EDE8E2;
+  --erp-bg-sidebar: #FFFFFF;
+  --erp-bg-sidebar-hover: #F5F0EB;
+  --erp-bg-sidebar-active: #F0DDD4;

-  --erp-border: #334155;
-  --erp-border-light: rgba(255, 255, 255, 0.06);
-  --erp-border-dark: rgba(255, 255, 255, 0.12);
+  --erp-text-primary: #2D2A26;
+  --erp-text-secondary: #7A756E;
+  --erp-text-tertiary: #A8A29E;
+  --erp-text-inverse: #FFFFFF;
+  --erp-text-sidebar: #7A756E;
+  --erp-text-sidebar-active: #C4623A;

-  --erp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --erp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
-  --erp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
-  --erp-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
+  --erp-border: #E8E2DC;
+  --erp-border-light: #F0EBE5;
+  --erp-border-dark: #D5CFC8;

-  --erp-trend-up: #34d399;
-  --erp-trend-down: #f87171;
-  --erp-trend-neutral: #94a3b8;
+  --erp-shadow-xs: 0 1px 2px rgba(45,42,38,0.04);
+  --erp-shadow-sm: 0 1px 3px rgba(45,42,38,0.06), 0 1px 2px rgba(45,42,38,0.03);
+  --erp-shadow-md: 0 4px 6px rgba(45,42,38,0.07), 0 2px 4px rgba(45,42,38,0.04);
+  --erp-shadow-lg: 0 8px 30px rgba(45,42,38,0.10);
+  --erp-shadow-xl: 0 12px 40px rgba(45,42,38,0.14);

-  --erp-success-bg: rgba(5, 150, 105, 0.15);
-  --erp-warning-bg: rgba(217, 119, 6, 0.15);
-  --erp-error-bg: rgba(220, 38, 38, 0.15);
-  --erp-info-bg: rgba(2, 132, 199, 0.15);
+  --erp-radius-sm: 8px;
+  --erp-radius-md: 12px;
+  --erp-radius-lg: 14px;
+  --erp-radius-xl: 18px;
+
+  --erp-trend-up: #5B7A5E;
+  --erp-trend-down: #B54A4A;
+  --erp-trend-neutral: #7A756E;
+
+  --erp-font-heading: 'Noto Serif SC', Georgia, serif;
+}
+
+/* ─── Theme: 深邃夜色 (dark) ─── */
+[data-theme='dark'] {
+  --erp-primary: #60A5FA;
+  --erp-primary-hover: #93C5FD;
+  --erp-primary-active: #3B82F6;
+  --erp-primary-light: rgba(96,165,250,0.15);
+  --erp-primary-light-hover: rgba(96,165,250,0.22);
+  --erp-primary-bg-subtle: rgba(96,165,250,0.10);
+
+  --erp-success: #34D399;
+  --erp-success-bg: rgba(5,150,105,0.15);
+  --erp-warning: #FBBF24;
+  --erp-warning-bg: rgba(217,119,6,0.15);
+  --erp-error: #F87171;
+  --erp-error-bg: rgba(220,38,38,0.15);
+  --erp-info: #38BDF8;
+  --erp-info-bg: rgba(2,132,199,0.15);
+
+  --erp-bg-page: #0F172A;
+  --erp-bg-container: #1E293B;
+  --erp-bg-elevated: #334155;
+  --erp-bg-spotlight: #1E293B;
+  --erp-bg-sidebar: #0F172A;
+  --erp-bg-sidebar-hover: #1E293B;
+  --erp-bg-sidebar-active: rgba(96,165,250,0.15);
+
+  --erp-text-primary: rgba(255,255,255,0.95);
+  --erp-text-secondary: #94A3B8;
+  --erp-text-tertiary: #64748B;
+  --erp-text-inverse: #0F172A;
+  --erp-text-sidebar: #94A3B8;
+  --erp-text-sidebar-active: #60A5FA;
+
+  --erp-border: #334155;
+  --erp-border-light: rgba(255,255,255,0.06);
+  --erp-border-dark: rgba(255,255,255,0.12);
+
+  --erp-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
+  --erp-shadow-sm: 0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
+  --erp-shadow-md: 0 4px 12px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2);
+  --erp-shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
+  --erp-shadow-xl: 0 12px 40px rgba(0,0,0,0.5);
+
+  --erp-trend-up: #34D399;
+  --erp-trend-down: #F87171;
+  --erp-trend-neutral: #94A3B8;
+
+  --erp-font-heading: 'Noto Sans SC', -apple-system, system-ui, sans-serif;
+}
+
+/* ─── Theme: 翡翠清雅 (emerald) ─── */
+[data-theme='emerald'] {
+  --erp-primary: #5B7A5E;
+  --erp-primary-hover: #4D6B50;
+  --erp-primary-active: #3E5C41;
+  --erp-primary-light: #E0EBE1;
+  --erp-primary-light-hover: #D1E0D3;
+  --erp-primary-bg-subtle: #F0F5F0;
+
+  --erp-success: #3D7A42;
+  --erp-success-bg: #E0F0E2;
+  --erp-warning: #B8863A;
+  --erp-warning-bg: #FFF3E0;
+  --erp-error: #A54A4A;
+  --erp-error-bg: #FDEAEA;
+  --erp-info: #4A7A8B;
+  --erp-info-bg: #E0F0F5;
+
+  --erp-bg-page: #F4F7F4;
+  --erp-bg-container: #FFFFFF;
+  --erp-bg-elevated: #FFFFFF;
+  --erp-bg-spotlight: #EDF2ED;
+  --erp-bg-sidebar: #FFFFFF;
+  --erp-bg-sidebar-hover: #F4F7F4;
+  --erp-bg-sidebar-active: #E0EBE1;
+
+  --erp-text-primary: #1A2E1A;
+  --erp-text-secondary: #5A6E5A;
+  --erp-text-tertiary: #8FA08F;
+  --erp-text-inverse: #FFFFFF;
+  --erp-text-sidebar: #5A6E5A;
+  --erp-text-sidebar-active: #5B7A5E;
+
+  --erp-border: #D5DED5;
+  --erp-border-light: #E5ECE5;
+  --erp-border-dark: #B8C5B8;
+
+  --erp-shadow-xs: 0 1px 2px rgba(30,60,30,0.04);
+  --erp-shadow-sm: 0 1px 3px rgba(30,60,30,0.06), 0 1px 2px rgba(30,60,30,0.03);
+  --erp-shadow-md: 0 4px 6px rgba(30,60,30,0.07), 0 2px 4px rgba(30,60,30,0.04);
+  --erp-shadow-lg: 0 8px 30px rgba(30,60,30,0.10);
+  --erp-shadow-xl: 0 12px 40px rgba(30,60,30,0.14);
+
+  --erp-radius-sm: 8px;
+  --erp-radius-md: 10px;
+  --erp-radius-lg: 14px;
+  --erp-radius-xl: 18px;
+
+  --erp-trend-up: #3D7A42;
+  --erp-trend-down: #A54A4A;
+  --erp-trend-neutral: #5A6E5A;
+
+  --erp-font-heading: 'Noto Sans SC', -apple-system, system-ui, sans-serif;
 }

-[data-theme='dark'] .erp-stat-card-trend-up { color: #34d399; }
-[data-theme='dark'] .erp-stat-card-trend-down { color: #f87171; }
-[data-theme='dark'] .erp-stat-card-trend-neutral { color: #94a3b8; }
-[data-theme='dark'] .erp-stat-card-trend-label { color: #94a3b8; }

 /* --- Global Reset & Base --- */
 body {
@@ -156,6 +277,23 @@ body {
  -moz-osx-font-smoothing: grayscale;
 }

+/* Force Ant Design Layout backgrounds to follow theme */
+.ant-layout {
+  background: var(--erp-bg-page) !important;
+}
+.ant-layout-content {
+  background: transparent !important;
+}
+.ant-layout-sider {
+  background: var(--erp-bg-sidebar) !important;
+}
+.ant-layout-header {
+  background: var(--erp-bg-container) !important;
+}
+.ant-layout-footer {
+  background: transparent !important;
+}
+
 /* --- Smooth Scrolling --- */
 * {
  scroll-behavior: smooth;
@@ -182,7 +320,7 @@ body {

 /* --- Selection --- */
 ::selection {
-  background-color: rgba(37, 99, 235, 0.15);
+  background-color: var(--erp-primary-bg-subtle);
  color: var(--erp-text-primary);
 }

@@ -546,16 +684,16 @@ body {
 }

 .erp-sidebar-menu .ant-menu-item-selected {
-  background: #eff6ff !important;
-  color: #2563eb !important;
+  background: var(--erp-bg-sidebar-active) !important;
+  color: var(--erp-text-sidebar-active) !important;
 }

 .erp-sidebar-menu .ant-menu-item-selected .anticon {
-  color: #2563eb !important;
+  color: var(--erp-text-sidebar-active) !important;
 }

 .erp-sidebar-menu .ant-menu-item:not(.ant-menu-item-selected):hover {
-  background: #f1f5f9 !important;
+  background: var(--erp-bg-sidebar-hover) !important;
 }

 /* Sidebar group label */
@@ -565,17 +703,17 @@ body {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
-  color: #94a3b8;
+  color: var(--erp-text-tertiary);
 }

 /* ====================================================================
 * MainLayout — CSS classes replacing inline styles
 * ==================================================================== */

-/* Sider — White sidebar, Soft UI style */
+/* Sider */
 .erp-sider-dark {
-  background: #ffffff !important;
-  border-right: 1px solid #e2e8f0 !important;
+  background: var(--erp-bg-sidebar) !important;
+  border-right: 1px solid var(--erp-border) !important;
  position: fixed !important;
  left: 0;
  top: 0;
@@ -584,25 +722,16 @@ body {
  overflow: auto;
 }

-[data-theme='dark'] .erp-sider-dark {
-  background: #0f172a !important;
-  border-right: 1px solid #334155 !important;
-}
-
 /* Logo */
 .erp-sidebar-logo {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 20px;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--erp-border);
  cursor: pointer;
 }

-[data-theme='dark'] .erp-sidebar-logo {
-  border-bottom: 1px solid #334155;
-}
-
 .ant-layout-sider-collapsed .erp-sidebar-logo {
  justify-content: center;
  padding: 0;
@@ -612,7 +741,7 @@ body {
  width: 28px;
  height: 28px;
  border-radius: var(--erp-radius-sm);
-  background: #2563eb;
+  background: var(--erp-primary);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -624,17 +753,13 @@ body {

 .erp-sidebar-logo-text {
  margin-left: 10px;
-  color: #0f172a;
+  color: var(--erp-text-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
 }

-[data-theme='dark'] .erp-sidebar-logo-text {
-  color: rgba(255, 255, 255, 0.95);
-}
-
 /* Sidebar menu item */
 .erp-sidebar-item {
  display: flex;
@@ -644,7 +769,7 @@ body {
  padding: 0 12px;
  border-radius: var(--erp-radius-md);
  cursor: pointer;
-  color: #475569;
+  color: var(--erp-text-sidebar);
  font-size: 14px;
  font-weight: 400;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
@@ -657,30 +782,16 @@ body {
 }

 .erp-sidebar-item:hover:not(.erp-sidebar-item-active) {
-  background: #f1f5f9;
-  color: #0f172a;
-}
-
-[data-theme='dark'] .erp-sidebar-item {
-  color: #94a3b8;
-}
-
-[data-theme='dark'] .erp-sidebar-item:hover:not(.erp-sidebar-item-active) {
-  background: #1e293b;
-  color: rgba(255, 255, 255, 0.95);
+  background: var(--erp-bg-sidebar-hover);
+  color: var(--erp-text-primary);
 }

 .erp-sidebar-item-active {
-  background: #eff6ff;
-  color: #2563eb;
+  background: var(--erp-bg-sidebar-active);
+  color: var(--erp-text-sidebar-active);
  font-weight: 500;
 }

-[data-theme='dark'] .erp-sidebar-item-active {
-  background: rgba(37, 99, 235, 0.15);
-  color: #60a5fa;
-}
-
 .erp-sidebar-item-icon {
  font-size: 16px;
  display: flex;
@@ -700,7 +811,7 @@ body {
  padding: 0 12px;
  border-radius: var(--erp-radius-md);
  cursor: pointer;
-  color: #94a3b8;
+  color: var(--erp-text-tertiary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
@@ -710,25 +821,12 @@ body {
 }

 .erp-sidebar-submenu-title:hover {
-  background: #f1f5f9;
-  color: #475569;
-}
-
-[data-theme='dark'] .erp-sidebar-submenu-title {
-  color: #64748b;
-}
-
-[data-theme='dark'] .erp-sidebar-submenu-title:hover {
-  background: #1e293b;
-  color: #94a3b8;
+  background: var(--erp-bg-sidebar-hover);
+  color: var(--erp-text-secondary);
 }

 .erp-sidebar-submenu-title-active {
-  color: #2563eb;
-}
-
-[data-theme='dark'] .erp-sidebar-submenu-title-active {
-  color: #60a5fa;
+  color: var(--erp-text-sidebar-active);
 }

 .erp-sidebar-submenu-arrow {
@@ -750,12 +848,10 @@ body {

 /* Main layout */
 .erp-main-layout {
+  background: var(--erp-bg-page) !important;
  transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }

-.erp-main-layout-light { background: #f8fafc; }
-.erp-main-layout-dark { background: #0f172a; }
-
 /* Header */
 .erp-header {
  height: 56px !important;
@@ -767,17 +863,8 @@ body {
  top: 0;
  z-index: 99;
  line-height: 56px !important;
-}
-
-.erp-header-light {
-  background: #ffffff !important;
-  border-bottom: 1px solid #e2e8f0;
-  box-shadow: none;
-}
-
-.erp-header-dark {
-  background: #1e293b !important;
-  border-bottom: 1px solid #334155;
+  background: var(--erp-bg-container) !important;
+  border-bottom: 1px solid var(--erp-border) !important;
  box-shadow: none;
 }

@@ -790,24 +877,20 @@ body {
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
-  color: #475569;
+  color: var(--erp-text-secondary);
  will-change: background;
 }

-.erp-header-light .erp-header-btn { color: #475569; }
-.erp-header-dark .erp-header-btn { color: #94a3b8; }
-.erp-header-btn:hover { background: #f1f5f9; }
-.erp-header-dark .erp-header-btn:hover { background: #334155; }
+.erp-header-btn:hover { background: var(--erp-bg-spotlight); }

-.erp-header-title { font-size: 15px; font-weight: 600; }
-.erp-text-light { color: #0f172a; }
-.erp-text-dark { color: rgba(255, 255, 255, 0.95); }
-.erp-text-light-secondary { color: #475569; }
-.erp-text-dark-secondary { color: #94a3b8; }
+.erp-header-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--erp-text-primary);
+  font-family: var(--erp-font-heading);
+}

-.erp-header-divider { width: 1px; height: 24px; margin: 0 8px; }
-.erp-header-divider-light { background: rgba(0, 0, 0, 0.06); }
-.erp-header-divider-dark { background: rgba(255, 255, 255, 0.06); }
+.erp-header-divider { width: 1px; height: 24px; margin: 0 8px; background: var(--erp-border-light); }

 /* User avatar */
 .erp-header-user {
@@ -820,20 +903,17 @@ body {
  transition: all 0.15s ease;
 }

-.erp-header-user:hover { background: #f1f5f9; }
-.erp-header-dark .erp-header-user:hover { background: #334155; }
+.erp-header-user:hover { background: var(--erp-bg-spotlight); }

 .erp-user-avatar {
-  background: #2563eb !important;
+  background: var(--erp-primary) !important;
  font-size: 13px !important;
 }

-.erp-user-name { font-size: 13px; font-weight: 500; }
+.erp-user-name { font-size: 13px; font-weight: 500; color: var(--erp-text-secondary); }

 /* Footer */
-.erp-footer { text-align: center; padding: 12px 24px !important; background: transparent !important; font-size: 12px; }
-.erp-footer-light { color: #94a3b8; }
-.erp-footer-dark { color: #64748b; }
+.erp-footer { text-align: center; padding: 12px 24px !important; background: transparent !important; font-size: 12px; color: var(--erp-text-tertiary); }

 /* ====================================================================
 * Dashboard — Stat Cards & Quick Actions
@@ -864,7 +944,7 @@ body {
  left: 0;
  right: 0;
  height: 3px;
-  background: var(--card-gradient, linear-gradient(135deg, #2563eb, #60a5fa));
+  background: var(--card-gradient, linear-gradient(135deg, var(--erp-primary), var(--erp-primary-hover)));
 }

 .erp-stat-card-body {
@@ -895,7 +975,7 @@ body {
  width: 48px;
  height: 48px;
  border-radius: var(--erp-radius-lg);
-  background: var(--card-icon-bg, rgba(37, 99, 235, 0.08));
+  background: var(--card-icon-bg, var(--erp-primary-bg-subtle));
  display: flex;
  align-items: center;
  justify-content: center;
@@ -913,7 +993,7 @@ body {

 .erp-section-icon {
  font-size: 16px;
-  color: #2563eb;
+  color: var(--erp-primary);
 }

 .erp-section-title {
@@ -936,17 +1016,8 @@ body {
 }

 .erp-quick-action:hover {
-  background: #eff6ff;
-  border-color: var(--action-color, #2563eb);
-}
-
-[data-theme='dark'] .erp-quick-action {
-  background: #0f172a;
-}
-
-[data-theme='dark'] .erp-quick-action:hover {
-  background: #1e293b;
-  border-color: var(--action-color, #2563eb);
+  background: var(--erp-primary-bg-subtle);
+  border-color: var(--action-color, var(--erp-primary));
 }

 .erp-quick-action-icon {
@@ -956,8 +1027,8 @@ body {
  display: flex;
  align-items: center;
  justify-content: center;
-  background: color-mix(in srgb, var(--action-color, #2563eb) 8%, transparent);
-  color: var(--action-color, #2563eb);
+  background: color-mix(in srgb, var(--action-color, var(--erp-primary)) 8%, transparent);
+  color: var(--action-color, var(--erp-primary));
  font-size: 16px;
  flex-shrink: 0;
 }
@@ -1008,12 +1079,12 @@ body {
  font-weight: 500;
 }

-.erp-stat-card-trend-up { color: #059669; }
-.erp-stat-card-trend-down { color: #dc2626; }
-.erp-stat-card-trend-neutral { color: #475569; }
+.erp-stat-card-trend-up { color: var(--erp-trend-up); }
+.erp-stat-card-trend-down { color: var(--erp-trend-down); }
+.erp-stat-card-trend-neutral { color: var(--erp-trend-neutral); }

 .erp-stat-card-trend-label {
-  color: #475569;
+  color: var(--erp-text-secondary);
  font-weight: 400;
 }

@@ -1046,8 +1117,8 @@ body {
  display: flex;
  align-items: center;
  justify-content: center;
-  background: color-mix(in srgb, var(--action-color, #2563eb) 8%, transparent);
-  color: var(--action-color, #2563eb);
+  background: color-mix(in srgb, var(--action-color, var(--erp-primary)) 8%, transparent);
+  color: var(--action-color, var(--erp-primary));
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
@@ -1075,7 +1146,7 @@ body {
  padding: 12px 16px;
  border-radius: var(--erp-radius-md);
  background: var(--erp-bg-spotlight);
-  border-left: 3px solid var(--task-color, #2563eb);
+  border-left: 3px solid var(--task-color, var(--erp-primary));
  cursor: pointer;
  transition: all 0.15s ease;
 }
@@ -1093,7 +1164,7 @@ body {
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--task-color, #2563eb) 8%, transparent);
-  color: var(--task-color, #2563eb);
+  color: var(--task-color, var(--erp-primary));
  font-size: 14px;
  flex-shrink: 0;
 }
@@ -1115,7 +1186,7 @@ body {
  gap: 12px;
  margin-top: 2px;
  font-size: var(--erp-font-size-xs);
-  color: #94a3b8;
+  color: var(--erp-text-tertiary);
 }

 .erp-task-priority {
@@ -1127,13 +1198,9 @@ body {
  font-weight: 600;
 }

-.erp-task-priority-high { background: #fef2f2; color: #dc2626; }
-.erp-task-priority-medium { background: #fffbeb; color: #d97706; }
-.erp-task-priority-low { background: #ecfdf5; color: #059669; }
-
-[data-theme='dark'] .erp-task-priority-high { background: rgba(220, 38, 38, 0.15); color: #f87171; }
-[data-theme='dark'] .erp-task-priority-medium { background: rgba(217, 119, 6, 0.15); color: #fbbf24; }
-[data-theme='dark'] .erp-task-priority-low { background: rgba(5, 150, 105, 0.15); color: #34d399; }
+.erp-task-priority-high { background: var(--erp-error-bg); color: var(--erp-error); }
+.erp-task-priority-medium { background: var(--erp-warning-bg); color: var(--erp-warning); }
+.erp-task-priority-low { background: var(--erp-success-bg); color: var(--erp-success); }

 /* Activity Timeline */
 .erp-activity-list {
@@ -1189,14 +1256,10 @@ body {

 .erp-activity-time {
  font-size: 11px;
-  color: #94a3b8;
+  color: var(--erp-text-tertiary);
  margin-top: 2px;
 }

-[data-theme='dark'] .erp-activity-time {
-  color: #64748b;
-}
-
 /* Empty State */
 .erp-empty-state {
  display: flex;
--- a/apps/web/src/layouts/MainLayout.tsx
+++ b/apps/web/src/layouts/MainLayout.tsx
@@ -12,8 +12,6 @@ import {
  LogoutOutlined,
  MessageOutlined,
  SearchOutlined,
-  BulbOutlined,
-  BulbFilled,
  AppstoreOutlined,
  TeamOutlined,
  TableOutlined,
@@ -39,6 +37,7 @@ import { usePluginStore } from '../stores/plugin';
 import type { PluginMenuGroup } from '../stores/plugin';
 import { getMenusForUser, type MenuInfo } from '../api/menus';
 import NotificationPanel from '../components/NotificationPanel';
+import ThemeSwitcher from '../components/ThemeSwitcher';

 const { Header, Sider, Content, Footer } = Layout;

@@ -345,7 +344,7 @@ const DynamicMenuSection = memo(function DynamicMenuSection({
 });

 export default function MainLayout({ children }: { children: React.ReactNode }) {
-  const { sidebarCollapsed, toggleSidebar, theme: themeMode, setTheme } = useAppStore();
+  const { sidebarCollapsed, toggleSidebar } = useAppStore();
  const { user, logout } = useAuthStore();
  const pluginMenuItems = usePluginStore((s) => s.pluginMenuItems);
  const pluginMenuGroups = usePluginStore((s) => s.pluginMenuGroups);
@@ -413,24 +412,23 @@ export default function MainLayout({ children }: { children: React.ReactNode })
  ];

  const sidebarWidth = sidebarCollapsed ? 72 : 240;
-  const isDark = themeMode === 'dark';

  return (
    <Layout style={{ minHeight: '100vh' }}>
-      {/* 现代深色侧边栏 */}
+      {/* 侧边栏 */}
      <Sider
        trigger={null}
        collapsible
        collapsed={sidebarCollapsed}
        width={240}
        collapsedWidth={72}
-        className={isDark ? 'erp-sider-dark' : 'erp-sider-dark erp-sider-default'}
+        className="erp-sider-dark"
      >
        {/* Logo 区域 */}
        <div className="erp-sidebar-logo" onClick={() => navigate('/')}>
-          <div className="erp-sidebar-logo-icon">E</div>
+          <div className="erp-sidebar-logo-icon">H</div>
          {!sidebarCollapsed && (
-            <span className="erp-sidebar-logo-text">ERP Platform</span>
+            <span className="erp-sidebar-logo-text">HMS 健康</span>
          )}
        </div>

@@ -469,22 +467,22 @@ export default function MainLayout({ children }: { children: React.ReactNode })

      {/* 右侧主区域 */}
      <Layout
-        className={`erp-main-layout ${isDark ? 'erp-main-layout-dark' : 'erp-main-layout-light'}`}
+        className="erp-main-layout"
        style={{ marginLeft: sidebarWidth }}
      >
        {/* 顶部导航栏 */}
-        <Header className={`erp-header ${isDark ? 'erp-header-dark' : 'erp-header-light'}`}>
+        <Header className="erp-header">
          {/* 左侧：折叠按钮 + 标题 */}
          <Space size="middle" style={{ alignItems: 'center' }}>
            <div className="erp-header-btn" onClick={toggleSidebar}>
              {sidebarCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </div>
-            <span className={`erp-header-title ${isDark ? 'erp-text-dark' : 'erp-text-light'}`}>
+            <span className="erp-header-title">
              {headerTitle}
            </span>
          </Space>

-          {/* 右侧：搜索 + 通知 + 主题切换 + 用户 */}
+          {/* 右侧：搜索 + 主题切换 + 通知 + 用户 */}
          <Space size={4} style={{ alignItems: 'center' }}>
            <Tooltip title="搜索">
              <div className="erp-header-btn">
@@ -492,15 +490,11 @@ export default function MainLayout({ children }: { children: React.ReactNode })
              </div>
            </Tooltip>

-            <Tooltip title={isDark ? '切换亮色模式' : '切换暗色模式'}>
-              <div className="erp-header-btn" onClick={() => setTheme(isDark ? 'blue' : 'dark')}>
-                {isDark ? <BulbFilled style={{ fontSize: 16 }} /> : <BulbOutlined style={{ fontSize: 16 }} />}
-              </div>
-            </Tooltip>
+            <ThemeSwitcher />

            <NotificationPanel />

-            <div className={`erp-header-divider ${isDark ? 'erp-header-divider-dark' : 'erp-header-divider-light'}`} />
+            <div className="erp-header-divider" />

            <Dropdown menu={{ items: userMenuItems }} placement="bottomRight" trigger={['click']}>
              <div className="erp-header-user">
@@ -511,7 +505,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
                  {(user?.display_name?.[0] || user?.username?.[0] || 'U').toUpperCase()}
                </Avatar>
                {!sidebarCollapsed && (
-                  <span className={`erp-user-name ${isDark ? 'erp-text-dark-secondary' : 'erp-text-light-secondary'}`}>
+                  <span className="erp-user-name">
                    {user?.display_name || user?.username || 'User'}
                  </span>
                )}
@@ -526,7 +520,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
        </Content>

        {/* 底部 */}
-        <Footer className={`erp-footer ${isDark ? 'erp-footer-dark' : 'erp-footer-light'}`}>
+        <Footer className="erp-footer">
          HMS 健康管理平台
        </Footer>
      </Layout>
--- a/apps/web/src/stores/app.ts
+++ b/apps/web/src/stores/app.ts
@@ -1,15 +1,64 @@
 import { create } from 'zustand';

+export type ThemeName = 'blue' | 'warm' | 'dark' | 'emerald';
+
+export interface ThemeOption {
+  key: ThemeName;
+  label: string;
+  desc: string;
+  preview: { primary: string; bg: string; surface: string };
+}
+
+export const THEME_OPTIONS: ThemeOption[] = [
+  {
+    key: 'blue',
+    label: '信任蓝',
+    desc: '专业沉稳 · 企业风格',
+    preview: { primary: '#2563EB', bg: '#F8FAFC', surface: '#FFFFFF' },
+  },
+  {
+    key: 'warm',
+    label: '温润东方',
+    desc: '暖色人文 · 医疗关怀',
+    preview: { primary: '#C4623A', bg: '#F5F0EB', surface: '#FFFFFF' },
+  },
+  {
+    key: 'dark',
+    label: '深邃夜色',
+    desc: '暗色护眼 · 深度专注',
+    preview: { primary: '#60A5FA', bg: '#0F172A', surface: '#1E293B' },
+  },
+  {
+    key: 'emerald',
+    label: '翡翠清雅',
+    desc: '清新自然 · 健康生机',
+    preview: { primary: '#5B7A5E', bg: '#F4F7F4', surface: '#FFFFFF' },
+  },
+];
+
+const STORAGE_KEY = 'hms-theme';
+
+function loadTheme(): ThemeName {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved && THEME_OPTIONS.some((t) => t.key === saved)) return saved as ThemeName;
+  } catch {}
+  return 'blue';
+}
+
 interface AppState {
-  theme: 'light' | 'dark';
+  theme: ThemeName;
  sidebarCollapsed: boolean;
  toggleSidebar: () => void;
-  setTheme: (theme: 'light' | 'dark') => void;
+  setTheme: (theme: ThemeName) => void;
 }

 export const useAppStore = create<AppState>((set) => ({
-  theme: 'light',
+  theme: loadTheme(),
  sidebarCollapsed: false,
  toggleSidebar: () => set((s) => ({ sidebarCollapsed: !s.sidebarCollapsed })),
-  setTheme: (theme) => set({ theme }),
+  setTheme: (theme) => {
+    try { localStorage.setItem(STORAGE_KEY, theme); } catch {}
+    set({ theme });
+  },
 }));