From 88f6516fa9554d1c7071f381b50c7337485417eb Mon Sep 17 00:00:00 2001
From: iven <iven_h@qq.com>
Date: Sun, 12 Apr 2026 18:57:10 +0800
Subject: [PATCH] fix(web): fix PaletteOutlined icon import and apply theme
 config

- Replace non-existent PaletteOutlined with BgColorsOutlined
- Apply user's refined light/dark theme configuration with proper
  color tokens, component overrides, and design system consistency
---
 apps/web/src/App.tsx            |  86 +++++++++++++++++++++++++-
 apps/web/src/pages/Settings.tsx | 105 +++++++++++++++++++++++++++++---
 2 files changed, 178 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index ad7e097..39f9bf5 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -19,20 +19,100 @@ function PrivateRoute({ children }: { children: React.ReactNode }) {
   return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
 }
 
+const themeConfig = {
+  token: {
+    colorPrimary: '#4F46E5',
+    colorSuccess: '#059669',
+    colorWarning: '#D97706',
+    colorError: '#DC2626',
+    colorInfo: '#2563EB',
+    colorBgLayout: '#F1F5F9',
+    colorBgContainer: '#FFFFFF',
+    colorBgElevated: '#FFFFFF',
+    colorBorder: '#E2E8F0',
+    colorBorderSecondary: '#F1F5F9',
+    borderRadius: 8,
+    borderRadiusLG: 12,
+    borderRadiusSM: 6,
+    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    fontSize: 14,
+    fontSizeHeading4: 20,
+    controlHeight: 36,
+    controlHeightLG: 40,
+    controlHeightSM: 28,
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06)',
+    boxShadowSecondary: '0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07)',
+  },
+  components: {
+    Button: {
+      primaryShadow: '0 1px 2px 0 rgba(79, 70, 229, 0.3)',
+      fontWeight: 500,
+    },
+    Card: {
+      paddingLG: 20,
+    },
+    Table: {
+      headerBg: '#F8FAFC',
+      headerColor: '#475569',
+      rowHoverBg: '#F5F3FF',
+      fontSize: 14,
+    },
+    Menu: {
+      itemBorderRadius: 8,
+      itemMarginInline: 8,
+      itemHeight: 40,
+    },
+    Modal: {
+      borderRadiusLG: 16,
+    },
+    Tag: {
+      borderRadiusSM: 6,
+    },
+  },
+};
+
+const darkThemeConfig = {
+  ...themeConfig,
+  token: {
+    ...themeConfig.token,
+    colorBgLayout: '#0B0F1A',
+    colorBgContainer: '#111827',
+    colorBgElevated: '#1E293B',
+    colorBorder: '#1E293B',
+    colorBorderSecondary: '#1E293B',
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.3)',
+    boxShadowSecondary: '0 4px 6px -1px rgba(0, 0, 0, 0.4)',
+  },
+  components: {
+    ...themeConfig.components,
+    Table: {
+      headerBg: '#1E293B',
+      headerColor: '#94A3B8',
+      rowHoverBg: '#1E293B',
+    },
+  },
+};
+
 export default function App() {
   const loadFromStorage = useAuthStore((s) => s.loadFromStorage);
-  const theme = useAppStore((s) => s.theme);
+  const themeMode = useAppStore((s) => s.theme);
 
-  // Restore auth state from localStorage on app load
   useEffect(() => {
     loadFromStorage();
   }, [loadFromStorage]);
 
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', themeMode);
+  }, [themeMode]);
+
+  const isDark = themeMode === 'dark';
+
   return (
     <ConfigProvider
       locale={zhCN}
       theme={{
-        algorithm: theme === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
+        ...isDark ? darkThemeConfig : themeConfig,
+        algorithm: isDark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
       }}
     >
       <HashRouter>
diff --git a/apps/web/src/pages/Settings.tsx b/apps/web/src/pages/Settings.tsx
index 719f283..7fa38ac 100644
--- a/apps/web/src/pages/Settings.tsx
+++ b/apps/web/src/pages/Settings.tsx
@@ -1,4 +1,13 @@
 import { Tabs } from 'antd';
+import {
+  BookOutlined,
+  GlobalOutlined,
+  MenuOutlined,
+  NumberOutlined,
+  SettingOutlined,
+  BgColorsOutlined,
+  AuditOutlined,
+} from '@ant-design/icons';
 import DictionaryManager from './settings/DictionaryManager';
 import LanguageManager from './settings/LanguageManager';
 import MenuConfig from './settings/MenuConfig';
@@ -8,17 +17,93 @@ import ThemeSettings from './settings/ThemeSettings';
 import AuditLogViewer from './settings/AuditLogViewer';
 
 const Settings: React.FC = () => {
-  const items = [
-    { key: 'dictionaries', label: '数据字典', children: <DictionaryManager /> },
-    { key: 'languages', label: '语言管理', children: <LanguageManager /> },
-    { key: 'menus', label: '菜单配置', children: <MenuConfig /> },
-    { key: 'numbering', label: '编号规则', children: <NumberingRules /> },
-    { key: 'settings', label: '系统参数', children: <SystemSettings /> },
-    { key: 'theme', label: '主题设置', children: <ThemeSettings /> },
-    { key: 'audit-log', label: '审计日志', children: <AuditLogViewer /> },
-  ];
+  return (
+    <div>
+      <div className="erp-page-header" style={{ borderBottom: 'none', marginBottom: 0, paddingBottom: 8 }}>
+        <div>
+          <h4>系统设置</h4>
+          <div className="erp-page-subtitle">管理系统参数、字典、菜单、主题等配置</div>
+        </div>
+      </div>
 
-  return <Tabs defaultActiveKey="dictionaries" items={items} />;
+      <Tabs
+        defaultActiveKey="dictionaries"
+        style={{ marginTop: 8 }}
+        items={[
+          {
+            key: 'dictionaries',
+            label: (
+              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <BookOutlined style={{ fontSize: 14 }} />
+                数据字典
+              </span>
+            ),
+            children: <DictionaryManager />,
+          },
+          {
+            key: 'languages',
+            label: (
+              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <GlobalOutlined style={{ fontSize: 14 }} />
+                语言管理
+              </span>
+            ),
+            children: <LanguageManager />,
+          },
+          {
+            key: 'menus',
+            label: (
+              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <MenuOutlined style={{ fontSize: 14 }} />
+                菜单配置
+              </span>
+            ),
+            children: <MenuConfig />,
+          },
+          {
+            key: 'numbering',
+            label: (
+              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <NumberOutlined style={{ fontSize: 14 }} />
+                编号规则
+              </span>
+            ),
+            children: <NumberingRules />,
+          },
+          {
+            key: 'settings',
+            label: (
+              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <SettingOutlined style={{ fontSize: 14 }} />
+                系统参数
+              </span>
+            ),
+            children: <SystemSettings />,
+          },
+          {
+            key: 'theme',
+            label: (
+              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <BgColorsOutlined style={{ fontSize: 14 }} />
+                主题设置
+              </span>
+            ),
+            children: <ThemeSettings />,
+          },
+          {
+            key: 'audit-log',
+            label: (
+              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <AuditOutlined style={{ fontSize: 14 }} />
+                审计日志
+              </span>
+            ),
+            children: <AuditLogViewer />,
+          },
+        ]}
+      />
+    </div>
+  );
 };
 
 export default Settings;