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:
@@ -19,20 +19,100 @@ function PrivateRoute({ children }: { children: React.ReactNode }) {
|
|||||||
return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
|
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() {
|
export default function App() {
|
||||||
const loadFromStorage = useAuthStore((s) => s.loadFromStorage);
|
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(() => {
|
useEffect(() => {
|
||||||
loadFromStorage();
|
loadFromStorage();
|
||||||
}, [loadFromStorage]);
|
}, [loadFromStorage]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.documentElement.setAttribute('data-theme', themeMode);
|
||||||
|
}, [themeMode]);
|
||||||
|
|
||||||
|
const isDark = themeMode === 'dark';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ConfigProvider
|
<ConfigProvider
|
||||||
locale={zhCN}
|
locale={zhCN}
|
||||||
theme={{
|
theme={{
|
||||||
algorithm: theme === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
|
...isDark ? darkThemeConfig : themeConfig,
|
||||||
|
algorithm: isDark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<HashRouter>
|
<HashRouter>
|
||||||
|
|||||||
@@ -1,4 +1,13 @@
|
|||||||
import { Tabs } from 'antd';
|
import { Tabs } from 'antd';
|
||||||
|
import {
|
||||||
|
BookOutlined,
|
||||||
|
GlobalOutlined,
|
||||||
|
MenuOutlined,
|
||||||
|
NumberOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
BgColorsOutlined,
|
||||||
|
AuditOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
import DictionaryManager from './settings/DictionaryManager';
|
import DictionaryManager from './settings/DictionaryManager';
|
||||||
import LanguageManager from './settings/LanguageManager';
|
import LanguageManager from './settings/LanguageManager';
|
||||||
import MenuConfig from './settings/MenuConfig';
|
import MenuConfig from './settings/MenuConfig';
|
||||||
@@ -8,17 +17,93 @@ import ThemeSettings from './settings/ThemeSettings';
|
|||||||
import AuditLogViewer from './settings/AuditLogViewer';
|
import AuditLogViewer from './settings/AuditLogViewer';
|
||||||
|
|
||||||
const Settings: React.FC = () => {
|
const Settings: React.FC = () => {
|
||||||
const items = [
|
return (
|
||||||
{ key: 'dictionaries', label: '数据字典', children: <DictionaryManager /> },
|
<div>
|
||||||
{ key: 'languages', label: '语言管理', children: <LanguageManager /> },
|
<div className="erp-page-header" style={{ borderBottom: 'none', marginBottom: 0, paddingBottom: 8 }}>
|
||||||
{ key: 'menus', label: '菜单配置', children: <MenuConfig /> },
|
<div>
|
||||||
{ key: 'numbering', label: '编号规则', children: <NumberingRules /> },
|
<h4>系统设置</h4>
|
||||||
{ key: 'settings', label: '系统参数', children: <SystemSettings /> },
|
<div className="erp-page-subtitle">管理系统参数、字典、菜单、主题等配置</div>
|
||||||
{ key: 'theme', label: '主题设置', children: <ThemeSettings /> },
|
</div>
|
||||||
{ key: 'audit-log', label: '审计日志', children: <AuditLogViewer /> },
|
</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;
|
export default Settings;
|
||||||
|
|||||||
Reference in New Issue
Block a user