- {sidebarCollapsed ? 'E' : 'ERP Platform'}
+ {/* 现代深色侧边栏 */}
+
+ {/* Logo 区域 */}
+ navigate('/')}>
+
E
+ {!sidebarCollapsed && (
+
ERP Platform
+ )}
-
-
diff --git a/apps/web/src/pages/Home.tsx b/apps/web/src/pages/Home.tsx
index 411bcaa..3915a60 100644
--- a/apps/web/src/pages/Home.tsx
+++ b/apps/web/src/pages/Home.tsx
@@ -1,11 +1,23 @@
-import { useEffect, useState } from 'react';
-import { Typography, Card, Row, Col, Statistic, Spin } from 'antd';
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { Row, Col, Spin, theme } from 'antd';
import {
UserOutlined,
- TeamOutlined,
+ 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';
@@ -16,6 +28,76 @@ interface DashboardStats {
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
;
+ return
{animatedValue.toLocaleString()};
+}
+
export default function Home() {
const [stats, setStats] = useState
({
userCount: 0,
@@ -24,19 +106,27 @@ export default function Home() {
unreadMessages: 0,
});
const [loading, setLoading] = useState(true);
- const { unreadCount, fetchUnreadCount } = useMessageStore();
+ 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 } } }>) =>
res.status === 'fulfilled' ? (res.value.data?.data?.total ?? 0) : 0;
@@ -47,51 +137,282 @@ export default function Home() {
unreadMessages: unreadCount,
});
} catch {
- // 静默处理，显示默认值
+ // 静默处理
} finally {
- setLoading(false);
+ if (!cancelled) setLoading(false);
}
}
fetchUnreadCount();
loadStats();
+
+ return () => { cancelled = true; };
}, [fetchUnreadCount, unreadCount]);
+ const handleNavigate = useCallback((path: string) => {
+ navigate(path);
+ }, [navigate]);
+
+ const statCards: StatCardConfig[] = [
+ {
+ key: 'users',
+ title: '用户总数',
+ value: stats.userCount,
+ icon: ,
+ gradient: 'linear-gradient(135deg, #4F46E5, #6366F1)',
+ 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: ,
+ 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: ,
+ 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: ,
+ 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: , label: '用户管理', path: '/users', color: '#4F46E5' },
+ { icon: , label: '权限管理', path: '/roles', color: '#059669' },
+ { icon: , label: '组织架构', path: '/organizations', color: '#D97706' },
+ { icon: , label: '工作流', path: '/workflow', color: '#7C3AED' },
+ { icon: , label: '消息中心', path: '/messages', color: '#E11D48' },
+ { icon: , label: '系统设置', path: '/settings', color: '#64748B' },
+ ];
+
+ const pendingTasks: TaskItem[] = [
+ { id: '1', title: '审核新用户注册申请', priority: 'high', assignee: '系统', dueText: '待处理', color: '#DC2626', icon: , path: '/users' },
+ { id: '2', title: '配置工作流审批节点', priority: 'medium', assignee: '管理员', dueText: '进行中', color: '#D97706', icon: , path: '/workflow' },
+ { id: '3', title: '更新角色权限策略', priority: 'low', assignee: '管理员', dueText: '计划中', color: '#059669', icon: , path: '/roles' },
+ ];
+
+ const recentActivities: ActivityItem[] = [
+ { id: '1', text: '系统管理员 创建了 管理员角色', time: '刚刚', icon: },
+ { id: '2', text: '系统管理员 配置了 工作流模板', time: '5 分钟前', icon: },
+ { id: '3', text: '系统管理员 更新了 组织架构', time: '10 分钟前', icon: },
+ { id: '4', text: '系统管理员 设置了 消息通知偏好', time: '30 分钟前', icon: },
+ ];
+
+ const priorityLabel: Record = { high: '紧急', medium: '一般', low: '低' };
+
return (
-
工作台
-
-
-
-
- } />
-
-
-
-
- } />
-
-
-
-
- }
- />
-
-
-
-
- }
- />
-
-
-
-
+ {/* 欢迎语 */}
+
+
+ 工作台
+
+
+ 欢迎回来，这是您的系统概览
+
+
+
+ {/* 统计卡片行 */}
+
+ {statCards.map((card) => {
+ const maxSpark = Math.max(...card.sparkline, 1);
+ return (
+
+ { if (e.key === 'Enter') card.onClick?.(); }}
+ >
+
+
+
+
{card.title}
+
+
+
+
+ {card.trend.direction === 'up' && }
+ {card.trend.direction === 'down' && }
+ {card.trend.value}
+ {card.trend.label}
+
+
+
{card.icon}
+
+
+ {card.sparkline.map((v, i) => (
+
+ ))}
+
+
+
+ {/* 待办任务 + 最近活动 */}
+
+ {/* 待办任务 */}
+
+
+
+
+ 待办任务
+
+ {pendingTasks.length} 项待处理
+
+
+
+ {pendingTasks.map((task) => (
+
handleNavigate(task.path)}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => { if (e.key === 'Enter') handleNavigate(task.path); }}
+ >
+
{task.icon}
+
+
{task.title}
+
+ {task.assignee}
+ {task.dueText}
+
+
+
+ {priorityLabel[task.priority]}
+
+
+
+ ))}
+
+
+
+
+ 最近动态
+
+
+ {recentActivities.map((activity) => (
+
+ ))}
+
+
+
+ {/* 快捷入口 + 系统信息 */}
+
+
+
+
+
+ 快捷入口
+
+
+ {quickActions.map((action) => (
+
+ handleNavigate(action.path)}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => { if (e.key === 'Enter') handleNavigate(action.path); }}
+ >
+
{action.icon}
+
{action.label}
+
+
+
+
+ 系统信息
+
+
+ {[
+ { 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) => (
+
+ {item.label}
+ {item.value}
+
+ ))}
+
+
+
{contextHolder}
-
-
-
+
+ {/* 左侧品牌展示区 */}
+ <div
+ style={{
+ flex: 1,
+ background: 'linear-gradient(135deg, #312E81 0%, #4F46E5 50%, #6366F1 100%)',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: '60px',
+ position: 'relative',
+ overflow: 'hidden',
+ }}
+ >
+ {/* 装饰性背景元素 */}
+ <div
+ style={{
+ position: 'absolute',
+ top: '-20%',
+ right: '-10%',
+ width: '500px',
+ height: '500px',
+ borderRadius: '50%',
+ background: 'rgba(255, 255, 255, 0.05)',
+ }}
+ />
+ <div
+ style={{
+ position: 'absolute',
+ bottom: '-15%',
+ left: '-8%',
+ width: '400px',
+ height: '400px',
+ borderRadius: '50%',
+ background: 'rgba(255, 255, 255, 0.03)',
+ }}
+ />
+
+ {/* 品牌内容 */}
+ <div style={{ position: 'relative', zIndex: 1, textAlign: 'center', maxWidth: '480px' }}>
+ <div
+ style={{
+ width: 64,
+ height: 64,
+ borderRadius: 16,
+ background: 'rgba(255, 255, 255, 0.15)',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ margin: '0 auto 32px',
+ backdropFilter: 'blur(8px)',
+ border: '1px solid rgba(255, 255, 255, 0.2)',
+ }}
+ >
+ <SafetyCertificateOutlined style={{ fontSize: 32, color: '#fff' }} />
+ </div>
+
+ <h1
+ style={{
+ color: '#fff',
+ fontSize: 36,
+ fontWeight: 800,
+ margin: '0 0 16px',
+ letterSpacing: '-1px',
+ lineHeight: 1.2,
+ }}
+ >
ERP Platform
-
-
企业资源管理平台
+
+
+ 新一代模块化企业资源管理平台
+
+
+ 身份权限 · 工作流引擎 · 消息中心 · 系统配置
+
+
+ {/* 底部特性点 */}
+
+ {[
+ { label: '多租户架构', value: 'SaaS' },
+ { label: '模块化设计', value: '可插拔' },
+ { label: '事件驱动', value: '可扩展' },
+ ].map((item) => (
+
+
+ {item.value}
+
+
+ {item.label}
+
+
+ ))}
+
+
+
+ {/* 右侧登录表单区 */}
+
+
+
+ 欢迎回来
+
+
+ 请登录您的账户以继续
+
+
+
+
+
+
+
+
+ ERP Platform v0.1.0 · Powered by Rust + React
+
+
+
+
+
+
消息中心
+
管理站内消息、模板和通知偏好
+
+
+
+
+ 全部消息
+
+ ),
children: ,
},
{
key: 'unread',
- label: '未读消息',
+ label: (
+
+
+ 未读消息
+
+ ),
children: ,
},
{
key: 'templates',
- label: '消息模板',
+ label: (
+
+
+ 消息模板
+
+ ),
children: ,
},
{
key: 'preferences',
- label: '通知设置',
+ label: (
+
+
+ 通知设置
+
+ ),
children: ,
},
]}
diff --git a/apps/web/src/pages/Organizations.tsx b/apps/web/src/pages/Organizations.tsx
index b07bda4..c2e25a4 100644
--- a/apps/web/src/pages/Organizations.tsx
+++ b/apps/web/src/pages/Organizations.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
import {
Tree,
Button,
@@ -14,6 +14,7 @@ import {
Card,
Empty,
Tag,
+ theme,
} from 'antd';
import {
PlusOutlined,
@@ -39,6 +40,15 @@ import {
} from '../api/orgs';
export default function Organizations() {
+ const { token } = theme.useToken();
+ const isDark = token.colorBgContainer === '#111827' || token.colorBgContainer === 'rgb(17, 24, 39)';
+
+ const cardStyle = {
+ background: isDark ? '#111827' : '#FFFFFF',
+ borderRadius: 12,
+ border: `1px solid ${isDark ? '#1E293B' : '#F1F5F9'}`,
+ };
+
// --- Org tree state ---
const [orgTree, setOrgTree] = useState([]);
const [selectedOrg, setSelectedOrg] = useState(null);
@@ -67,7 +77,6 @@ export default function Organizations() {
try {
const tree = await listOrgTree();
setOrgTree(tree);
- // Clear selection if org no longer exists
if (selectedOrg) {
const stillExists = findOrgInTree(tree, selectedOrg.id);
if (!stillExists) {
@@ -152,8 +161,7 @@ export default function Organizations() {
fetchOrgTree();
} catch (err: unknown) {
const errorMsg =
- (err as { response?: { data?: { message?: string } } })?.response?.data
- ?.message || '操作失败';
+ (err as { response?: { data?: { message?: string } } })?.response?.data?.message || '操作失败';
message.error(errorMsg);
}
};
@@ -168,8 +176,7 @@ export default function Organizations() {
fetchOrgTree();
} catch (err: unknown) {
const errorMsg =
- (err as { response?: { data?: { message?: string } } })?.response?.data
- ?.message || '删除失败';
+ (err as { response?: { data?: { message?: string } } })?.response?.data?.message || '删除失败';
message.error(errorMsg);
}
};
@@ -194,8 +201,7 @@ export default function Organizations() {
fetchDeptTree();
} catch (err: unknown) {
const errorMsg =
- (err as { response?: { data?: { message?: string } } })?.response?.data
- ?.message || '操作失败';
+ (err as { response?: { data?: { message?: string } } })?.response?.data?.message || '操作失败';
message.error(errorMsg);
}
};
@@ -209,8 +215,7 @@ export default function Organizations() {
fetchDeptTree();
} catch (err: unknown) {
const errorMsg =
- (err as { response?: { data?: { message?: string } } })?.response?.data
- ?.message || '删除失败';
+ (err as { response?: { data?: { message?: string } } })?.response?.data?.message || '删除失败';
message.error(errorMsg);
}
};
@@ -236,8 +241,7 @@ export default function Organizations() {
fetchPositions();
} catch (err: unknown) {
const errorMsg =
- (err as { response?: { data?: { message?: string } } })?.response?.data
- ?.message || '操作失败';
+ (err as { response?: { data?: { message?: string } } })?.response?.data?.message || '操作失败';
message.error(errorMsg);
}
};
@@ -259,7 +263,13 @@ export default function Organizations() {
title: (
{item.name}{' '}
- {item.code && {item.code}}
+ {item.code && {item.code}}
),
children: convertOrgTree(item.children),
@@ -271,13 +281,18 @@ export default function Organizations() {
title: (
{item.name}{' '}
- {item.code && {item.code}}
+ {item.code && {item.code}}
),
children: convertDeptTree(item.children),
}));
- // --- Helper to find node in tree ---
const onSelectOrg = (selectedKeys: React.Key[]) => {
if (selectedKeys.length === 0) {
setSelectedOrg(null);
@@ -315,7 +330,7 @@ export default function Organizations() {
title="确定删除此岗位？"
onConfirm={() => handleDeletePosition(record.id)}
>
- }>
+ }>
删除
@@ -325,41 +340,45 @@ export default function Organizations() {
return (
-
-
-
- 组织架构管理
-
+ {/* 页面标题 */}
+
+
+
+
+ 组织架构管理
+
+
管理组织、部门和岗位的层级结构
+
+ {/* 三栏布局 */}
- {/* Left: Organization Tree */}
-
+ {/* 左栏：组织树 */}
+
+
+ 组织
+
}
onClick={() => {
setEditOrg(null);
orgForm.resetFields();
setOrgModalOpen(true);
}}
- >
- 新建
-
+ />
{selectedOrg && (
<>
}
onClick={() => {
setEditOrg(selectedOrg);
@@ -375,80 +394,96 @@ export default function Organizations() {
title="确定删除此组织？"
onConfirm={() => handleDeleteOrg(selectedOrg.id)}
>
- } />
+ } />
)}
- }
- >
- {orgTree.length > 0 ? (
-
- ) : (
-
- )}
-
+
+
+ {orgTree.length > 0 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {selectedOrg ? `${selectedOrg.name} · 部门` : '部门'}
+
+ {selectedOrg && (
+
}
onClick={() => {
deptForm.resetFields();
setDeptModalOpen(true);
}}
- >
- 新建
-
+ />
{selectedDept && (
handleDeleteDept(selectedDept.id)}
>
- } />
+ } />
)}
- ) : null
- }
- >
- {selectedOrg ? (
- deptTree.length > 0 ? (
-
+ )}
+
+
+ {selectedOrg ? (
+ deptTree.length > 0 ? (
+
+ ) : (
+
+ )
) : (
-
- )
- ) : (
-
- )}
-
+
+ )}
+
+
+
+ {selectedDept ? `${selectedDept.name} · 岗位` : '岗位'}
+
+ {selectedDept && (
}
onClick={() => {
positionForm.resetFields();
@@ -457,21 +492,24 @@ export default function Organizations() {
>
新建岗位
- ) : null
- }
- >
- {selectedDept ? (
-
- ) : (
-
- )}
-
+ )}
+
+ {selectedDept ? (
+
+ ) : (
+
+
+
+ )}
+
{/* Org Modal */}
@@ -484,7 +522,7 @@ export default function Organizations() {
}}
onOk={() => orgForm.submit()}
>
-