✨ feat(dashboard): implement new dashboard interface

- create DashBoard.tsx component with main dashboard layout
- add status statistics section with different order types and counts
- implement department menu with visual icons and hover effects
- add company notification area with table layout and pagination
- create subsystem links section with colorful icons
- add search functionality with dropdown and input field
- implement header with ERP logo and user controls
- update index.tsx to render new dashboard component instead of home page
- add interactive buttons for updating statistics, order, and logout functionality
- use mock data for demonstration purposes (to be connected to API in future)

src/client/home/DashBoard.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { logger } from '@/client/utils/logger';
+
+const DashBoard: React.FC = () => {
+  // 模拟数据 - 实际项目中应从API获取
+  const statusData = [
+    { name: '待现场量尺', count: 2, type: 'pending', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMkY5RjZGIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '待家具设计', count: 27, type: 'pending' },
+    { name: '待投影报价', count: 3, type: 'pending' },
+    { name: '待财务收款', count: 1, type: 'pending' },
+    { name: '待拆单下单', count: 1, type: 'pending' },
+    { name: '待生产订单', count: 4, type: 'pending' },
+    { name: '待送货安装', count: 18, type: 'pending' },
+    { name: '已完成安装', count: 797, type: 'completed' },
+    { name: '已取消订单', count: 19, type: 'cancelled' },
+    { name: '零售订单:', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMkI3QkZGIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '采购订单: 待采购入库', count: 20, type: 'pending', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjRjE0NTM4IiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '待采购入库', count: 20, type: 'pending' },
+    { name: '已采购入库', count: 463, type: 'completed' },
+  ];
+
+  const departments = [
+    { name: '销售管理', color: '#2ECC71', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '设计管理', color: '#E67E22', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '财务管理', color: '#27AE60', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '采购管理', color: '#E74C3C', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '生产管理', color: '#3498DB', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '物料仓库', color: '#95A5A6', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '成品仓库', color: '#7F8C8D', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '安装管理', color: '#F39C12', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+  ];
+
+  const notifications = [
+    { title: '系统更新通知', date: '2025-07-01', content: 'ERP系统将于7月10日进行维护升级，届时系统将暂停服务，请提前做好准备。' },
+    { title: '新功能上线', date: '2025-06-25', content: '生产管理模块新增物料需求分析功能，请各部门组织培训学习。' },
+    { title: '月度销售报表', date: '2025-06-30', content: '六月份销售报表已生成，请各销售经理及时查看。' },
+  ];
+
+  const subsystems = [
+    { name: '系统管理后台', color: '#F8C4E1', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '人事管理系统', color: '#F5B7B1', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '生产数据大屏', color: '#D2BDE6', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '分拣打包系统', color: '#A9DFBF', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '共享资料平台', color: '#AED6F1', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '供应商门户', color: '#FDEDEC', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '经销商用户端', color: '#D6EAF8', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+    { name: '数据报表中心', color: '#A9DFBF', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+' },
+  ];
+
+  // 模拟更新统计功能
+  const handleUpdateStats = () => {
+    logger.info('Updating statistics...');
+    // 实际项目中应调用API更新数据
+    alert('统计数据已更新');
+  };
+
+  // 模拟更新顺序功能
+  const handleUpdateOrder = () => {
+    logger.info('Updating order...');
+    // 实际项目中应调用API更新数据
+    alert('顺序已更新');
+  };
+
+  // 模拟退出登录功能
+  const handleLogout = () => {
+    logger.info('User logging out...');
+    // 实际项目中应调用认证API
+    alert('已退出登录');
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-4 sm:p-6">
+      {/* 头部区域 */}
+      <header className="flex justify-between items-center mb-6 pb-4 border-b border-gray-200">
+        <div className="flex items-center">
+          <img src="image.png" alt="瑞耐之家ERP" className="h-8 mr-3" />
+          <h1 className="text-xl font-bold text-gray-800">瑞耐之家ERP</h1>
+        </div>
+        
+        <div className="flex space-x-4">
+          <button 
+            onClick={handleUpdateStats}
+            className="text-sm text-gray-700 hover:bg-gray-100 px-3 py-1 rounded transition-colors"
+          >
+            点击更新统计
+          </button>
+          <button 
+            onClick={handleUpdateOrder}
+            className="text-sm text-gray-700 hover:bg-gray-100 px-3 py-1 rounded transition-colors"
+          >
+            点击更新顺序
+          </button>
+          <span className="text-sm text-gray-700">陈明峰</span>
+          <button 
+            onClick={handleLogout}
+            className="text-sm text-gray-700 hover:bg-gray-100 px-3 py-1 rounded transition-colors"
+          >
+            退出登录
+          </button>
+        </div>
+      </header>
+
+      {/* 搜索栏 */}
+      <div className="flex flex-wrap gap-3 mb-6">
+        <span className="text-sm text-gray-700 self-center">搜索订单</span>
+        <select className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+          <option>终端客户地址</option>
+        </select>
+        <input 
+          type="text" 
+          placeholder="请输入搜索内容" 
+          className="flex-1 min-w-[200px] px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <button className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors">
+          搜索
+        </button>
+        <button className="px-4 py-2 bg-gray-500 text-white rounded-md text-sm hover:bg-gray-600 transition-colors">
+          重置
+        </button>
+      </div>
+
+      {/* 仪表盘内容 */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* 状态统计卡片 */}
+        <div className="bg-white rounded-lg shadow-sm p-5">
+          <h2 className="text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">状态统计栏:</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            {statusData.map((item, index)=>(
+              <div key={index} className="flex items-center text-sm p-2 rounded-md bg-gray-50">
+                {item.icon && (
+                  <img src={item.icon} alt={item.name} className="w-4 h-4 mr-2" />
+                )}
+                <span>{item.name}</span>
+                {item.count && (
+                  <span className={`ml-2 px-2 py-0.5 rounded-full text-xs ${
+                    item.type === 'pending' ? 'bg-yellow-100 text-yellow-800' :
+                    item.type === 'completed' ? 'bg-green-100 text-green-800' :
+                    item.type === 'cancelled' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'
+                  }`}>
+                    {item.count}
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 部门菜单卡片 */}
+        <div className="bg-white rounded-lg shadow-sm p-5">
+          <h2 className="text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">部门菜单栏:</h2>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+            {departments.map((dept, index)=>(
+              <div key={index} className="flex flex-col items-center text-center group cursor-pointer">
+                <div className="w-16 h-16 rounded-lg flex items-center justify-center mb-2 transition-transform shadow-sm group-hover:transform group-hover:-translate-y-1 group-hover:shadow-md" style={{ backgroundColor: dept.color }}>
+                  <img src={dept.icon} alt={dept.name} className="w-8 h-8" />
+                </div>
+                <span className="text-xs text-gray-700">{dept.name}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 公司通知卡片 */}
+        <div className="bg-white rounded-lg shadow-sm p-5">
+          <h2 className="text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">公司通知栏:</h2>
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-sm">
+              <thead>
+                <tr className="bg-gray-50">
+                  <th className="text-left py-2 px-3 font-medium text-gray-700">通知主题</th>
+                  <th className="text-left py-2 px-3 font-medium text-gray-700">通知日期</th>
+                  <th className="text-left py-2 px-3 font-medium text-gray-700">通知内容</th>
+                </tr>
+              </thead>
+              <tbody>
+                {notifications.map((note, index)=>(
+                  <tr key={index} className="border-b border-gray-100 hover:bg-gray-50">
+                    <td className="py-2 px-3">{note.title}</td>
+                    <td className="py-2 px-3">{note.date}</td>
+                    <td className="py-2 px-3 max-w-xs truncate">{note.content}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="flex justify-center items-center mt-4 space-x-3 text-sm text-gray-600">
+            <span>首页</span>
+            <span>上一页</span>
+            <span>共 0 页</span>
+            <button className="px-2 py-1 border border-gray-300 rounded">跳转到页</button>
+          </div>
+        </div>
+
+        {/* 子系统网址卡片 */}
+        <div className="bg-white rounded-lg shadow-sm p-5">
+          <h2 className="text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">子系统网址:</h2>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+            {subsystems.map((system, index)=>(
+              <div key={index} className="flex flex-col items-center text-center group cursor-pointer">
+                <div className="w-12 h-12 rounded-full flex items-center justify-center mb-2 transition-transform shadow-sm group-hover:transform group-hover:scale-105 group-hover:shadow-md" style={{ backgroundColor: system.color }}>
+                  <img src={system.icon} alt={system.name} className="w-6 h-6" />
+                </div>
+                <span className="text-xs text-gray-700">{system.name}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashBoard;

src/client/home/index.tsx

@@ -1,51 +1,10 @@
-import { createRoot } from 'react-dom/client'
-import { getGlobalConfig } from '../utils/utils'
+import DashBoard from './DashBoard';
+import { createRoot } from 'react-dom/client';
 
-const Home = () => {
-  return (
-    
-    <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-    <div className="max-w-md w-full space-y-8">
-      {/* 系统介绍区域 */}
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-gray-900 mb-4">
-          {getGlobalConfig('APP_NAME')}
-        </h1>
-        <p className="text-lg text-gray-600 mb-8">
-          全功能应用Starter
-        </p>
-        <p className="text-base text-gray-500 mb-8">
-          这是一个基于Hono和React的应用Starter，提供了用户认证、文件管理、图表分析、地图集成和主题切换等常用功能。
-        </p>
-      </div>
-
-      {/* 管理入口按钮 */}
-      <div className="space-y-4">
-        <a
-          href="/admin"
-          className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-        >
-          进入管理后台
-        </a>
-        
-        {/* 移动端入口按钮 */}
-        <a
-          href="/mobile"
-          className="w-full flex justify-center py-3 px-4 border border-blue-600 rounded-md shadow-sm text-lg font-medium text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-        >
-          进入移动端
-        </a>
-        
-      </div>
-    </div>
-  </div>
-  )
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  const root = createRoot(rootElement);
+  root.render(<DashBoard />);
 }
 
-const rootElement = document.getElementById('root')
-if (rootElement) {
-  const root = createRoot(rootElement)
-  root.render(
-    <Home />
-  )
-}
+export default DashBoard;