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
This commit is contained in:
iven
2026-04-12 18:57:10 +08:00
parent 9557c9ca16
commit 88f6516fa9
2 changed files with 178 additions and 13 deletions

View File

@@ -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>

View File

@@ -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;