89fc482d99
从 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 个组件文件
427 lines
16 KiB
TypeScript
427 lines
16 KiB
TypeScript
import { useEffect, useState, useCallback, useRef } from 'react';
|
||
import { Row, Col, Spin, theme } from 'antd';
|
||
import {
|
||
UserOutlined,
|
||
SafetyCertificateOutlined,
|
||
FileTextOutlined,
|
||
BellOutlined,
|
||
ThunderboltOutlined,
|
||
SettingOutlined,
|
||
PartitionOutlined,
|
||
ClockCircleOutlined,
|
||
ApartmentOutlined,
|
||
CheckCircleOutlined,
|
||
TeamOutlined,
|
||
FileProtectOutlined,
|
||
RiseOutlined,
|
||
FallOutlined,
|
||
RightOutlined,
|
||
} from '@ant-design/icons';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import client from '../api/client';
|
||
import { useMessageStore } from '../stores/message';
|
||
|
||
interface DashboardStats {
|
||
userCount: number;
|
||
roleCount: number;
|
||
processInstanceCount: number;
|
||
unreadMessages: number;
|
||
}
|
||
|
||
interface TrendData {
|
||
value: string;
|
||
direction: 'up' | 'down' | 'neutral';
|
||
label: string;
|
||
}
|
||
|
||
interface StatCardConfig {
|
||
key: string;
|
||
title: string;
|
||
value: number;
|
||
icon: React.ReactNode;
|
||
gradient: string;
|
||
iconBg: string;
|
||
delay: string;
|
||
trend: TrendData;
|
||
sparkline: number[];
|
||
onClick?: () => void;
|
||
}
|
||
|
||
interface TaskItem {
|
||
id: string;
|
||
title: string;
|
||
priority: 'high' | 'medium' | 'low';
|
||
assignee: string;
|
||
dueText: string;
|
||
color: string;
|
||
icon: React.ReactNode;
|
||
path: string;
|
||
}
|
||
|
||
interface ActivityItem {
|
||
id: string;
|
||
text: string;
|
||
time: string;
|
||
icon: React.ReactNode;
|
||
}
|
||
|
||
function useCountUp(end: number, duration = 800) {
|
||
const [count, setCount] = useState(0);
|
||
const prevEnd = useRef(end);
|
||
|
||
useEffect(() => {
|
||
if (end === prevEnd.current && count > 0) return;
|
||
prevEnd.current = end;
|
||
|
||
if (end === 0) { setCount(0); return; }
|
||
|
||
const startTime = performance.now();
|
||
const startVal = 0;
|
||
|
||
function tick(now: number) {
|
||
const elapsed = now - startTime;
|
||
const progress = Math.min(elapsed / duration, 1);
|
||
const eased = 1 - Math.pow(1 - progress, 3);
|
||
setCount(Math.round(startVal + (end - startVal) * eased));
|
||
if (progress < 1) requestAnimationFrame(tick);
|
||
}
|
||
|
||
requestAnimationFrame(tick);
|
||
}, [end, duration]);
|
||
|
||
return count;
|
||
}
|
||
|
||
function StatValue({ value, loading }: { value: number; loading: boolean }) {
|
||
const animatedValue = useCountUp(value);
|
||
if (loading) return <Spin size="small" />;
|
||
return <span className="erp-count-up">{animatedValue.toLocaleString()}</span>;
|
||
}
|
||
|
||
export default function Home() {
|
||
const [stats, setStats] = useState<DashboardStats>({
|
||
userCount: 0,
|
||
roleCount: 0,
|
||
processInstanceCount: 0,
|
||
unreadMessages: 0,
|
||
});
|
||
const [loading, setLoading] = useState(true);
|
||
const unreadCount = useMessageStore((s) => s.unreadCount);
|
||
const fetchUnreadCount = useMessageStore((s) => s.fetchUnreadCount);
|
||
const { token } = theme.useToken();
|
||
const navigate = useNavigate();
|
||
|
||
const isDark = token.colorBgContainer === '#111827' || token.colorBgContainer === 'rgb(17, 24, 39)';
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
|
||
async function loadStats() {
|
||
setLoading(true);
|
||
try {
|
||
const [usersRes, rolesRes, instancesRes] = await Promise.allSettled([
|
||
client.get('/users', { params: { page: 1, page_size: 1 } }),
|
||
client.get('/roles', { params: { page: 1, page_size: 1 } }),
|
||
client.get('/workflow/instances', { params: { page: 1, page_size: 1 } }),
|
||
]);
|
||
|
||
if (cancelled) return;
|
||
|
||
const extractTotal = (res: PromiseSettledResult<{ data: { data?: { total?: number } } }>) => {
|
||
if (res.status !== 'fulfilled') return 0;
|
||
const body = res.value.data;
|
||
if (body && typeof body === 'object' && 'data' in body) {
|
||
const inner = (body as { data?: { total?: number } }).data;
|
||
return inner?.total ?? 0;
|
||
}
|
||
return 0;
|
||
};
|
||
|
||
setStats({
|
||
userCount: extractTotal(usersRes),
|
||
roleCount: extractTotal(rolesRes),
|
||
processInstanceCount: extractTotal(instancesRes),
|
||
unreadMessages: unreadCount,
|
||
});
|
||
} catch {
|
||
// 静默处理
|
||
} finally {
|
||
if (!cancelled) setLoading(false);
|
||
}
|
||
}
|
||
|
||
fetchUnreadCount();
|
||
loadStats();
|
||
|
||
return () => { cancelled = true; };
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
const handleNavigate = useCallback((path: string) => {
|
||
navigate(path);
|
||
}, [navigate]);
|
||
|
||
const statCards: StatCardConfig[] = [
|
||
{
|
||
key: 'users',
|
||
title: '用户总数',
|
||
value: stats.userCount,
|
||
icon: <UserOutlined />,
|
||
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: '较上周' },
|
||
sparkline: [30, 45, 35, 50, 40, 55, 60, 50, 65, 70],
|
||
onClick: () => handleNavigate('/users'),
|
||
},
|
||
{
|
||
key: 'roles',
|
||
title: '角色数量',
|
||
value: stats.roleCount,
|
||
icon: <SafetyCertificateOutlined />,
|
||
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: '较上月' },
|
||
sparkline: [20, 25, 30, 28, 35, 40, 38, 42, 45, 50],
|
||
onClick: () => handleNavigate('/roles'),
|
||
},
|
||
{
|
||
key: 'processes',
|
||
title: '流程实例',
|
||
value: stats.processInstanceCount,
|
||
icon: <FileTextOutlined />,
|
||
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: '较昨日' },
|
||
sparkline: [10, 15, 12, 20, 18, 25, 22, 28, 24, 20],
|
||
onClick: () => handleNavigate('/workflow'),
|
||
},
|
||
{
|
||
key: 'messages',
|
||
title: '未读消息',
|
||
value: stats.unreadMessages,
|
||
icon: <BellOutlined />,
|
||
gradient: 'linear-gradient(135deg, #E11D48, #F43F5E)',
|
||
iconBg: 'rgba(225, 29, 72, 0.12)',
|
||
delay: 'erp-fade-in erp-fade-in-delay-4',
|
||
trend: { value: '0', direction: 'neutral', label: '全部已读' },
|
||
sparkline: [5, 8, 3, 10, 6, 12, 8, 4, 7, 5],
|
||
onClick: () => handleNavigate('/messages'),
|
||
},
|
||
];
|
||
|
||
const quickActions = [
|
||
{ 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: '#475569' },
|
||
];
|
||
|
||
const pendingTasks: TaskItem[] = [
|
||
{ 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[] = [
|
||
{ id: '1', text: '系统管理员 创建了 管理员角色', time: '刚刚', icon: <TeamOutlined /> },
|
||
{ id: '2', text: '系统管理员 配置了 工作流模板', time: '5 分钟前', icon: <FileProtectOutlined /> },
|
||
{ id: '3', text: '系统管理员 更新了 组织架构', time: '10 分钟前', icon: <ApartmentOutlined /> },
|
||
{ id: '4', text: '系统管理员 设置了 消息通知偏好', time: '30 分钟前', icon: <BellOutlined /> },
|
||
];
|
||
|
||
const priorityLabel: Record<string, string> = { high: '紧急', medium: '一般', low: '低' };
|
||
|
||
return (
|
||
<div>
|
||
{/* 欢迎语 */}
|
||
<div className="erp-fade-in" style={{ marginBottom: 24 }}>
|
||
<h2 style={{
|
||
fontSize: 24,
|
||
fontWeight: 700,
|
||
color: isDark ? '#f8fafc' : 'rgba(0,0,0,0.95)',
|
||
margin: '0 0 4px',
|
||
letterSpacing: '-0.5px',
|
||
}}>
|
||
工作台
|
||
</h2>
|
||
<p style={{ fontSize: 14, color: isDark ? '#94a3b8' : '#475569', margin: 0 }}>
|
||
欢迎回来，这是您的系统概览
|
||
</p>
|
||
</div>
|
||
|
||
{/* 统计卡片行 */}
|
||
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
||
{statCards.map((card) => {
|
||
const maxSpark = Math.max(...card.sparkline, 1);
|
||
return (
|
||
<Col xs={24} sm={12} lg={6} key={card.key}>
|
||
<div
|
||
className={`erp-stat-card ${card.delay}`}
|
||
style={{ '--card-gradient': card.gradient, '--card-icon-bg': card.iconBg } as React.CSSProperties}
|
||
onClick={card.onClick}
|
||
role="button"
|
||
tabIndex={0}
|
||
onKeyDown={(e) => { if (e.key === 'Enter') card.onClick?.(); }}
|
||
>
|
||
<div className="erp-stat-card-bar" />
|
||
<div className="erp-stat-card-body">
|
||
<div className="erp-stat-card-info">
|
||
<div className="erp-stat-card-title">{card.title}</div>
|
||
<div className="erp-stat-card-value">
|
||
<StatValue value={card.value} loading={loading} />
|
||
</div>
|
||
<div className={`erp-stat-card-trend erp-stat-card-trend-${card.trend.direction}`}>
|
||
{card.trend.direction === 'up' && <RiseOutlined />}
|
||
{card.trend.direction === 'down' && <FallOutlined />}
|
||
<span>{card.trend.value}</span>
|
||
<span className="erp-stat-card-trend-label">{card.trend.label}</span>
|
||
</div>
|
||
</div>
|
||
<div className="erp-stat-card-icon">{card.icon}</div>
|
||
</div>
|
||
<div className="erp-stat-card-sparkline">
|
||
{card.sparkline.map((v, i) => (
|
||
<div
|
||
key={i}
|
||
className="erp-stat-card-sparkline-bar"
|
||
style={{
|
||
height: `${(v / maxSpark) * 100}%`,
|
||
background: card.gradient,
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
);
|
||
})}
|
||
</Row>
|
||
|
||
{/* 待办任务 + 最近活动 */}
|
||
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
||
{/* 待办任务 */}
|
||
<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: '#2563eb' }} />
|
||
<span className="erp-section-title">待办任务</span>
|
||
<span style={{
|
||
marginLeft: 'auto',
|
||
fontSize: 12,
|
||
color: isDark ? '#94a3b8' : '#475569',
|
||
}}>
|
||
{pendingTasks.length} 项待处理
|
||
</span>
|
||
</div>
|
||
<div className="erp-task-list">
|
||
{pendingTasks.map((task) => (
|
||
<div
|
||
key={task.id}
|
||
className="erp-task-item"
|
||
style={{ '--task-color': task.color } as React.CSSProperties}
|
||
onClick={() => handleNavigate(task.path)}
|
||
role="button"
|
||
tabIndex={0}
|
||
onKeyDown={(e) => { if (e.key === 'Enter') handleNavigate(task.path); }}
|
||
>
|
||
<div className="erp-task-item-icon">{task.icon}</div>
|
||
<div className="erp-task-item-content">
|
||
<div className="erp-task-item-title">{task.title}</div>
|
||
<div className="erp-task-item-meta">
|
||
<span>{task.assignee}</span>
|
||
<span>{task.dueText}</span>
|
||
</div>
|
||
</div>
|
||
<span className={`erp-task-priority erp-task-priority-${task.priority}`}>
|
||
{priorityLabel[task.priority]}
|
||
</span>
|
||
<RightOutlined style={{ color: isDark ? '#475569' : '#CBD5E1', fontSize: 12 }} />
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
|
||
{/* 最近活动 */}
|
||
<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: '#60a5fa' }} />
|
||
<span className="erp-section-title">最近动态</span>
|
||
</div>
|
||
<div className="erp-activity-list">
|
||
{recentActivities.map((activity) => (
|
||
<div key={activity.id} className="erp-activity-item">
|
||
<div className="erp-activity-dot">{activity.icon}</div>
|
||
<div className="erp-activity-content">
|
||
<div className="erp-activity-text">{activity.text}</div>
|
||
<div className="erp-activity-time">{activity.time}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
|
||
{/* 快捷入口 + 系统信息 */}
|
||
<Row gutter={[16, 16]}>
|
||
<Col xs={24} lg={16}>
|
||
<div className="erp-content-card erp-fade-in erp-fade-in-delay-3">
|
||
<div className="erp-section-header">
|
||
<ThunderboltOutlined className="erp-section-icon" />
|
||
<span className="erp-section-title">快捷入口</span>
|
||
</div>
|
||
<Row gutter={[12, 12]}>
|
||
{quickActions.map((action) => (
|
||
<Col xs={12} sm={8} md={8} key={action.path}>
|
||
<div
|
||
className="erp-quick-action"
|
||
style={{ '--action-color': action.color } as React.CSSProperties}
|
||
onClick={() => handleNavigate(action.path)}
|
||
role="button"
|
||
tabIndex={0}
|
||
onKeyDown={(e) => { if (e.key === 'Enter') handleNavigate(action.path); }}
|
||
>
|
||
<div className="erp-quick-action-icon">{action.icon}</div>
|
||
<span className="erp-quick-action-label">{action.label}</span>
|
||
</div>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
</div>
|
||
</Col>
|
||
|
||
<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: '#60a5fa' }} />
|
||
<span className="erp-section-title">系统信息</span>
|
||
</div>
|
||
<div className="erp-system-info-list">
|
||
{[
|
||
{ label: '系统版本', value: 'v0.1.0' },
|
||
{ label: '后端框架', value: 'Axum 0.8 + Tokio' },
|
||
{ label: '数据库', value: 'PostgreSQL 16' },
|
||
{ label: '缓存', value: 'Redis 7' },
|
||
{ label: '前端框架', value: 'React 19 + Ant Design 6' },
|
||
{ label: '模块数量', value: '5 个业务模块' },
|
||
].map((item) => (
|
||
<div key={item.label} className="erp-system-info-item">
|
||
<span className="erp-system-info-label">{item.label}</span>
|
||
<span className="erp-system-info-value">{item.value}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
);
|
||
}
|