2 Commit-ok cd86729115 ... c77e82bdcf

Szerző SHA1 Üzenet Dátum
  yourname c77e82bdcf ✨ feat(dashboard): implement new dashboard interface 5 hónapja
  yourname 096836a3a0 📝 docs(index): add ERP system homepage documentation 5 hónapja
3 módosított fájl, 726 hozzáadás és 48 törlés
  1. 506 0
      docs/index.html.md
  2. 213 0
      src/client/home/DashBoard.tsx
  3. 7 48
      src/client/home/index.tsx

+ 506 - 0
docs/index.html.md

@@ -0,0 +1,506 @@
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>瑞耐之家ERP系统</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Arial', sans-serif;
+        }
+        
+        body {
+            background-color: #f5f5f5;
+            padding: 20px;
+        }
+        
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        
+        .user-menu a {
+            text-decoration: none;
+            color: #333;
+            font-size: 14px;
+            padding: 5px 10px;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+        }
+        
+        .user-menu a:hover {
+            background-color: #f0f0f0;
+        }
+        
+        .logo {
+            display: flex;
+            align-items: center;
+            font-weight: bold;
+            font-size: 18px;
+        }
+        
+        .logo img {
+            height: 30px;
+            margin-right: 10px;
+        }
+        
+        .user-menu {
+            display: flex;
+            gap: 15px;
+        }
+        
+        .user-menu a {
+            text-decoration: none;
+            color: #333;
+            font-size: 14px;
+        }
+        
+        .search-bar {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        
+        .search-bar select, .search-bar input {
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        
+        .search-bar button {
+            padding: 8px 15px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        
+        .search-bar button:hover {
+            background-color: #0056b3;
+        }
+        
+        .search-bar .reset-btn {
+            background-color: #6c757d;
+        }
+        
+        .search-bar .reset-btn:hover {
+            background-color: #5a6268;
+        }
+        
+        .search-bar .reset-btn {
+            background-color: #6c757d;
+        }
+        
+        .dashboard {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
+            margin-top: 20px;
+        }
+        
+        /* 响应式布局优化 */
+        @media (max-width: 1024px) {
+            .dashboard {
+                grid-template-columns: 1fr;
+            }
+            
+            .department-menu, .subsystem-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        
+        @media (max-width: 768px) {
+            .search-bar {
+                flex-wrap: wrap;
+            }
+            
+            .status-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+        
+        .card {
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            padding: 15px;
+        }
+        
+        .card-title {
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 15px;
+            color: #333;
+            padding-bottom: 8px;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        
+        .status-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 10px;
+        }
+        
+        .status-item {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            padding: 8px 12px;
+            border-radius: 4px;
+            margin-bottom: 5px;
+        }
+        
+        .status-item .count {
+            font-weight: bold;
+            margin-left: 5px;
+            padding: 2px 6px;
+            border-radius: 12px;
+            font-size: 12px;
+            background-color: #e9ecef;
+        }
+        
+        .status-item .pending {
+            background-color: #fff3cd;
+            color: #856404;
+        }
+        
+        .status-item .completed {
+            background-color: #d4edda;
+            color: #155724;
+        }
+        
+        .status-item .cancelled {
+            background-color: #f8d7da;
+            color: #721c24;
+        }
+        
+        .status-item:nth-child(odd) {
+            background-color: #f9f9f9;
+        }
+        
+        .status-item img {
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+        }
+        
+        .department-menu {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 15px;
+        }
+        
+        .department-icon {
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        
+        .department-icon:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
+        
+        .department-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+        
+        .department-icon {
+            width: 60px;
+            height: 60px;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 8px;
+        }
+        
+        .department-name {
+            font-size: 14px;
+            color: #333;
+        }
+        
+        .notification-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 14px;
+        }
+        
+        .notification-table th, .notification-table td {
+            padding: 8px;
+            text-align: left;
+            border-bottom: 1px solid #eee;
+        }
+        
+        .notification-table th {
+            background-color: #f9f9f9;
+            font-weight: bold;
+        }
+        
+        .pagination {
+            display: flex;
+            justify-content: center;
+            margin-top: 15px;
+            gap: 10px;
+            font-size: 14px;
+        }
+        
+        .pagination button {
+            padding: 5px 10px;
+            border: 1px solid #ddd;
+            background-color: white;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        
+        .subsystem-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 15px;
+        }
+        
+        .subsystem-icon {
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        
+        .subsystem-icon:hover {
+            transform: scale(1.05);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
+        
+        .subsystem-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+        
+        .subsystem-icon {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 8px;
+        }
+        
+        .subsystem-name {
+            font-size: 13px;
+            color: #333;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="logo">
+            <img src="image.png" alt="瑞耐之家ERP">
+            瑞耐之家ERP
+        </div>
+        <div class="user-menu">
+            <a href="#">点击更新统计</a>
+            <a href="#">点击更新顺序</a>
+            <a href="#">陈明峰</a>
+            <a href="#">退出登录</a>
+        </div>
+    </div>
+    
+    <div class="search-bar">
+        <span>搜索订单</span>
+        <select>
+            <option>终端客户地址</option>
+        </select>
+        <input type="text" placeholder="请输入搜索内容">
+        <button class="search-btn">搜索</button>
+        <button class="reset-btn">重置</button>
+    </div>
+    
+    <div class="dashboard">
+        <div class="card">
+            <div class="card-title">状态统计栏:</div>
+            <div class="status-grid">
+                <div class="status-item">
+                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMkY5RjZGIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="销售订单">
+                    销售订单: 待现场量尺 <span class="count pending">2</span>
+                </div>
+                <div class="status-item">待家具设计 <span class="count pending">27</span></div>
+                <div class="status-item">待投影报价 <span class="count pending">3</span></div>
+                <div class="status-item">待财务收款 <span class="count pending">1</span></div>
+                <div class="status-item">待拆单下单 <span class="count pending">1</span></div>
+                <div class="status-item">待生产订单 <span class="count pending">4</span></div>
+                <div class="status-item">待送货安装 <span class="count pending">18</span></div>
+                <div class="status-item">已完成安装 <span class="count completed">797</span></div>
+                <div class="status-item">已取消订单 <span class="count cancelled">19</span></div>
+                
+                <div class="status-item">
+                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMkI3QkZGIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="零售订单">
+                    零售订单:
+                </div>
+                
+                <div class="status-item">
+                    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjRjE0NTM4IiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="采购订单">
+                    采购订单: 待采购入库 20
+                </div>
+                <div class="status-item">待采购入库 20</div>
+                <div class="status-item">已采购入库 463</div>
+            </div>
+        </div>
+        
+        <div class="card">
+            <div class="card-title">部门菜单栏:</div>
+            <div class="department-menu">
+                <div class="department-item">
+                    <div class="department-icon" style="background-color: #2ECC71;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="销售管理" width="30" height="30">
+                    </div>
+                    <div class="department-name">销售管理</div>
+                </div>
+                <div class="department-item">
+                    <div class="department-icon" style="background-color: #E67E22;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="设计管理" width="30" height="30">
+                    </div>
+                    <div class="department-name">设计管理</div>
+                </div>
+                <div class="department-item">
+                    <div class="department-icon" style="background-color: #27AE60;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="财务管理" width="30" height="30">
+                    </div>
+                    <div class="department-name">财务管理</div>
+                </div>
+                <div class="department-item">
+                    <div class="department-icon" style="background-color: #E74C3C;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="采购管理" width="30" height="30">
+                    </div>
+                    <div class="department-name">采购管理</div>
+                </div>
+                <div class="department-item">
+                    <div class="department-icon" style="background-color: #3498DB;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="生产管理" width="30" height="30">
+                    </div>
+                    <div class="department-name">生产管理</div>
+                </div>
+                <div class="department-item">
+                    <div class="department-icon" style="background-color: #95A5A6;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="物料仓库" width="30" height="30">
+                    </div>
+                    <div class="department-name">物料仓库</div>
+                </div>
+                <div class="department-item">
+                    <div class="department-icon" style="background-color: #7F8C8D;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="成品仓库" width="30" height="30">
+                    </div>
+                    <div class="department-name">成品仓库</div>
+                </div>
+                <div class="department-item">
+                    <div class="department-icon" style="background-color: #F39C12;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="安装管理" width="30" height="30">
+                    </div>
+                    <div class="department-name">安装管理</div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="card">
+            <div class="card-title">公司通知栏:</div>
+            <table class="notification-table">
+                <thead>
+                    <tr>
+                        <th>通知主题</th>
+                        <th>通知日期</th>
+                        <th>通知内容</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>系统更新通知</td>
+                        <td>2025-07-01</td>
+                        <td>ERP系统将于7月10日进行维护升级,届时系统将暂停服务,请提前做好准备。</td>
+                    </tr>
+                    <tr>
+                        <td>新功能上线</td>
+                        <td>2025-06-25</td>
+                        <td>生产管理模块新增物料需求分析功能,请各部门组织培训学习。</td>
+                    </tr>
+                    <tr>
+                        <td>月度销售报表</td>
+                        <td>2025-06-30</td>
+                        <td>六月份销售报表已生成,请各销售经理及时查看。</td>
+                    </tr>
+                </tbody>
+            </table>
+            <div class="pagination">
+                <span>首页</span>
+                <span>上一页</span>
+                <span>共 0 页</span>
+                <button>跳转到页</button>
+            </div>
+        </div>
+        
+        <div class="card">
+            <div class="card-title">子系统网址:</div>
+            <div class="subsystem-grid">
+                <div class="subsystem-item">
+                    <div class="subsystem-icon" style="background-color: #F8C4E1;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="系统管理后台" width="24" height="24">
+                    </div>
+                    <div class="subsystem-name">系统管理后台</div>
+                </div>
+                <div class="subsystem-item">
+                    <div class="subsystem-icon" style="background-color: #F5B7B1;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="人事管理系统" width="24" height="24">
+                    </div>
+                    <div class="subsystem-name">人事管理系统</div>
+                </div>
+                <div class="subsystem-item">
+                    <div class="subsystem-icon" style="background-color: #D2BDE6;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="生产数据大屏" width="24" height="24">
+                    </div>
+                    <div class="subsystem-name">生产数据大屏</div>
+                </div>
+                <div class="subsystem-item">
+                    <div class="subsystem-icon" style="background-color: #A9DFBF;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="分拣打包系统" width="24" height="24">
+                    </div>
+                    <div class="subsystem-name">分拣打包系统</div>
+                </div>
+                <div class="subsystem-item">
+                    <div class="subsystem-icon" style="background-color: #AED6F1;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="共享资料平台" width="24" height="24">
+                    </div>
+                    <div class="subsystem-name">共享资料平台</div>
+                </div>
+                <div class="subsystem-item">
+                    <div class="subsystem-icon" style="background-color: #FDEDEC;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="供应商门户" width="24" height="24">
+                    </div>
+                    <div class="subsystem-name">供应商门户</div>
+                </div>
+                <div class="subsystem-item">
+                    <div class="subsystem-icon" style="background-color: #D6EAF8;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="经销商用户端" width="24" height="24">
+                    </div>
+                    <div class="subsystem-name">经销商用户端</div>
+                </div>
+                <div class="subsystem-item">
+                    <div class="subsystem-icon" style="background-color: #A9DFBF;">
+                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDhDMTE5IDggOCAxMTkgOCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzOTMgOCAyNTYgOHptMCA0NDhjLTExMC41IDAtMjAwLTg5LjUtMjAwLTIwMFMxNDUuNSA1NiAyNTYgNTZzMjAwIDg5LjUgMjAwIDIwMC04OS41IDIwMC0yMDAgMjAwem0xMjAtMzEyYy0xNi42IDAtMzAtMTMuNC0zMC0zMFMxNjkuNCAyNCAxODYgMjRzMzAgMTMuNCAzMCAzMFMyMDIuNiA4OCAxODYgODh6Ii8+PC9zdmc+" alt="数据报表中心" width="24" height="24">
+                    </div>
+                    <div class="subsystem-name">数据报表中心</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+```

+ 213 - 0
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;

+ 7 - 48
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;