feat(web): 采用 UI UX Pro Max Soft UI Evolution 设计系统

从 Pinterest 风格切换到 Soft UI Evolution 设计系统,使用 UI UX Pro Max
推理引擎生成适合跨行业 ERP 业务用户的专业设计方案。

设计变更:
- 主色从 Pinterest Red (#e60023) 切换到 Trust Blue (#2563EB)
- 字体从系统默认切换到 Noto Sans SC(中文优先)
- 圆角从 16-20px 调整到 10-12px(专业但不夸张)
- 中性色从暖橄榄调切换到 Slate 石板蓝调
- 成功色 #103c25 → #059669,警告色 #b56e1a → #d97706
- 暗色模式从暖黑 (#1a1a18) 切换到深海军蓝 (#0f172a)

涉及文件:DESIGN.md + index.css + App.tsx + 24 个组件文件
This commit is contained in:
iven
2026-04-20 23:27:24 +08:00
parent 85e732cf12
commit 89fc482d99
27 changed files with 598 additions and 588 deletions

View File

@@ -167,7 +167,7 @@ export default function Home() {
title: '用户总数',
value: stats.userCount,
icon: <UserOutlined />,
gradient: 'linear-gradient(135deg, #e60023, #f05a5a)',
gradient: 'linear-gradient(135deg, #2563eb, #60a5fa)',
iconBg: 'rgba(79, 70, 229, 0.12)',
delay: 'erp-fade-in erp-fade-in-delay-1',
trend: { value: '+2', direction: 'up', label: '较上周' },
@@ -179,7 +179,7 @@ export default function Home() {
title: '角色数量',
value: stats.roleCount,
icon: <SafetyCertificateOutlined />,
gradient: 'linear-gradient(135deg, #103c25, #10B981)',
gradient: 'linear-gradient(135deg, #059669, #10B981)',
iconBg: 'rgba(5, 150, 105, 0.12)',
delay: 'erp-fade-in erp-fade-in-delay-2',
trend: { value: '+1', direction: 'up', label: '较上月' },
@@ -191,7 +191,7 @@ export default function Home() {
title: '流程实例',
value: stats.processInstanceCount,
icon: <FileTextOutlined />,
gradient: 'linear-gradient(135deg, #b56e1a, #F59E0B)',
gradient: 'linear-gradient(135deg, #d97706, #F59E0B)',
iconBg: 'rgba(217, 119, 6, 0.12)',
delay: 'erp-fade-in erp-fade-in-delay-3',
trend: { value: '0', direction: 'neutral', label: '较昨日' },
@@ -213,18 +213,18 @@ export default function Home() {
];
const quickActions = [
{ icon: <UserOutlined />, label: '用户管理', path: '/users', color: '#e60023' },
{ icon: <SafetyCertificateOutlined />, label: '权限管理', path: '/roles', color: '#103c25' },
{ icon: <ApartmentOutlined />, label: '组织架构', path: '/organizations', color: '#b56e1a' },
{ icon: <UserOutlined />, label: '用户管理', path: '/users', color: '#2563eb' },
{ icon: <SafetyCertificateOutlined />, label: '权限管理', path: '/roles', color: '#059669' },
{ icon: <ApartmentOutlined />, label: '组织架构', path: '/organizations', color: '#d97706' },
{ icon: <PartitionOutlined />, label: '工作流', path: '/workflow', color: '#7C3AED' },
{ icon: <BellOutlined />, label: '消息中心', path: '/messages', color: '#E11D48' },
{ icon: <SettingOutlined />, label: '系统设置', path: '/settings', color: '#62625b' },
{ icon: <SettingOutlined />, label: '系统设置', path: '/settings', color: '#475569' },
];
const pendingTasks: TaskItem[] = [
{ id: '1', title: '审核新用户注册申请', priority: 'high', assignee: '系统', dueText: '待处理', color: '#9e0a0a', icon: <UserOutlined />, path: '/users' },
{ id: '2', title: '配置工作流审批节点', priority: 'medium', assignee: '管理员', dueText: '进行中', color: '#b56e1a', icon: <PartitionOutlined />, path: '/workflow' },
{ id: '3', title: '更新角色权限策略', priority: 'low', assignee: '管理员', dueText: '计划中', color: '#103c25', icon: <SafetyCertificateOutlined />, path: '/roles' },
{ id: '1', title: '审核新用户注册申请', priority: 'high', assignee: '系统', dueText: '待处理', color: '#dc2626', icon: <UserOutlined />, path: '/users' },
{ id: '2', title: '配置工作流审批节点', priority: 'medium', assignee: '管理员', dueText: '进行中', color: '#d97706', icon: <PartitionOutlined />, path: '/workflow' },
{ id: '3', title: '更新角色权限策略', priority: 'low', assignee: '管理员', dueText: '计划中', color: '#059669', icon: <SafetyCertificateOutlined />, path: '/roles' },
];
const recentActivities: ActivityItem[] = [
@@ -243,13 +243,13 @@ export default function Home() {
<h2 style={{
fontSize: 24,
fontWeight: 700,
color: isDark ? '#f6f6f3' : 'rgba(0,0,0,0.95)',
color: isDark ? '#f8fafc' : 'rgba(0,0,0,0.95)',
margin: '0 0 4px',
letterSpacing: '-0.5px',
}}>
</h2>
<p style={{ fontSize: 14, color: isDark ? '#91918c' : '#62625b', margin: 0 }}>
<p style={{ fontSize: 14, color: isDark ? '#94a3b8' : '#475569', margin: 0 }}>
</p>
</div>
@@ -308,12 +308,12 @@ export default function Home() {
<Col xs={24} lg={14}>
<div className="erp-content-card erp-fade-in erp-fade-in-delay-2">
<div className="erp-section-header">
<CheckCircleOutlined className="erp-section-icon" style={{ color: '#E11D48' }} />
<CheckCircleOutlined className="erp-section-icon" style={{ color: '#2563eb' }} />
<span className="erp-section-title"></span>
<span style={{
marginLeft: 'auto',
fontSize: 12,
color: isDark ? '#91918c' : '#62625b',
color: isDark ? '#94a3b8' : '#475569',
}}>
{pendingTasks.length}
</span>
@@ -340,7 +340,7 @@ export default function Home() {
<span className={`erp-task-priority erp-task-priority-${task.priority}`}>
{priorityLabel[task.priority]}
</span>
<RightOutlined style={{ color: isDark ? '#62625b' : '#CBD5E1', fontSize: 12 }} />
<RightOutlined style={{ color: isDark ? '#475569' : '#CBD5E1', fontSize: 12 }} />
</div>
))}
</div>
@@ -351,7 +351,7 @@ export default function Home() {
<Col xs={24} lg={10}>
<div className="erp-content-card erp-fade-in erp-fade-in-delay-3" style={{ height: '100%' }}>
<div className="erp-section-header">
<ClockCircleOutlined className="erp-section-icon" style={{ color: '#f05a5a' }} />
<ClockCircleOutlined className="erp-section-icon" style={{ color: '#60a5fa' }} />
<span className="erp-section-title"></span>
</div>
<div className="erp-activity-list">
@@ -400,7 +400,7 @@ export default function Home() {
<Col xs={24} lg={8}>
<div className="erp-content-card erp-fade-in erp-fade-in-delay-4" style={{ height: '100%' }}>
<div className="erp-section-header">
<ClockCircleOutlined className="erp-section-icon" style={{ color: '#f05a5a' }} />
<ClockCircleOutlined className="erp-section-icon" style={{ color: '#60a5fa' }} />
<span className="erp-section-title"></span>
</div>
<div className="erp-system-info-list">