refactor: 移除调试日志并优化代码结构

feat(components): 新增设备管理相关组件和仪表盘组件 feat(hooks): 添加自定义hooks用于API调用和数据管理 style: 优化滚动条样式和模态框布局 chore: 清理无用脚本和调试文件 docs: 更新组件导出文件
2026-03-10 14:34:39 +08:00
parent 98f705de8b
commit 196dc4ae41
43 changed files with 3082 additions and 3736 deletions
@@ -0,0 +1,89 @@
+import React from 'react';
+import { Card, Typography } from 'antd';
+import { LineChartOutlined, SafetyOutlined, ThunderboltOutlined } from '@ant-design/icons';
+import { designTokens } from '../../config/theme';
+
+const { Text } = Typography;
+
+const quickStatItemStyle = {
+  background: 'linear-gradient(135deg, #fff 0%, #fafafa 100%)',
+  borderRadius: designTokens.borderRadius.medium,
+  padding: '20px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '16px',
+  border: '1px solid #f0f0f0',
+  boxShadow: designTokens.shadows.small,
+};
+
+const QuickStats = ({ onlineRate, powerUsage }) => {
+  const quickStats = [
+    {
+      icon: LineChartOutlined,
+      label: '在线率',
+      value: `${onlineRate}%`,
+      color: designTokens.colors.success.main,
+    },
+    {
+      icon: SafetyOutlined,
+      label: '安全等级',
+      value: 'A级',
+      color: designTokens.colors.primary.main,
+    },
+    {
+      icon: ThunderboltOutlined,
+      label: '功率使用',
+      value: `${powerUsage}W`,
+      color: designTokens.colors.warning.main,
+    },
+  ];
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+        gap: '16px',
+        marginBottom: '0',
+        animation: 'fadeInUp 0.6s ease-out 0.5s backwards',
+      }}
+    >
+      {quickStats.map((stat, index) => (
+        <div key={index} style={quickStatItemStyle}>
+          <div
+            style={{
+              width: '48px',
+              height: '48px',
+              borderRadius: designTokens.borderRadius.medium,
+              background: `linear-gradient(135deg, ${stat.color}20 0%, ${stat.color}10 100%)`,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '24px',
+              color: stat.color,
+              boxShadow: `0 4px 12px ${stat.color}20`,
+            }}
+          >
+            <stat.icon />
+          </div>
+          <div>
+            <Text style={{ color: designTokens.colors.text.secondary, fontSize: '0.85rem' }}>
+              {stat.label}
+            </Text>
+            <div
+              style={{
+                fontSize: '1.2rem',
+                fontWeight: '700',
+                color: designTokens.colors.text.primary,
+              }}
+            >
+              {stat.value}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default React.memo(QuickStats);