更新了仪表盘的页面，优化了设备管理的界面，字段框可以拖拉

frontend/src/pages/Dashboard.jsx

@@ -1,6 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import { Card, Row, Col, Statistic, Spin, message } from 'antd';
-import { DatabaseOutlined, CloudServerOutlined, WarningOutlined, PoweroffOutlined } from '@ant-design/icons';
+import { Card, Row, Col, Statistic, Spin, message, Button, Tag } from 'antd';
+import { 
+  DatabaseOutlined, 
+  CloudServerOutlined, 
+  WarningOutlined, 
+  PoweroffOutlined, 
+  HomeOutlined, 
+  MonitorOutlined, 
+  SettingOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  DashboardOutlined,
+  ReloadOutlined
+} from '@ant-design/icons';
 import axios from 'axios';
 
 function Dashboard() {
@@ -8,7 +20,9 @@ function Dashboard() {
     totalDevices: 0,
     totalRacks: 0,
     totalRooms: 0,
-    faultDevices: 0
+    faultDevices: 0,
+    deviceGrowth: 2.5,  // 示例增长数据
+    faultTrend: -12.3   // 示例趋势数据
   });
   const [loading, setLoading] = useState(true);
 
@@ -54,56 +68,424 @@ function Dashboard() {
     fetchStats();
   }, []);
 
+  // 科技感配色主题
+  const theme = {
+    primary: '#1890ff',      // 科技蓝
+    primaryDark: '#096dd9',  // 深蓝
+    secondary: '#722ed1',    // 紫色
+    success: '#52c41a',      // 绿色
+    warning: '#faad14',      // 橙色
+    error: '#ff4d4f',        // 红色
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    cardBg: 'rgba(255, 255, 255, 0.95)',
+    textPrimary: '#262626',
+    textSecondary: '#8c8c8c'
+  };
+
+  const containerStyle = {
+    minHeight: '100vh',
+    background: 'linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%)',
+    padding: '24px'
+  };
+
+  const headerStyle = {
+    textAlign: 'center',
+    marginBottom: '32px'
+  };
+
+  const titleStyle = {
+    fontSize: '2.5rem',
+    fontWeight: '700',
+    background: theme.background,
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    margin: '0 0 8px 0'
+  };
+
+  const subtitleStyle = {
+    fontSize: '1.1rem',
+    color: theme.textSecondary,
+    margin: '0'
+  };
+
+  const statCardStyle = {
+    borderRadius: '16px',
+    border: 'none',
+    boxShadow: '0 4px 16px rgba(24, 144, 255, 0.1)',
+    background: theme.cardBg,
+    backdropFilter: 'blur(10px)',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    position: 'relative',
+    overflow: 'hidden',
+    cursor: 'pointer'
+  };
+
+  const statCardHoverStyle = {
+    transform: 'translateY(-4px)',
+    boxShadow: '0 8px 32px rgba(24, 144, 255, 0.2)'
+  };
+
+  const trendStyle = (trend) => ({
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '0.875rem',
+    fontWeight: '500',
+    color: trend > 0 ? theme.success : theme.error,
+    marginTop: '8px'
+  });
+
+  const systemOverviewStyle = {
+    marginTop: '32px'
+  };
+
+  const overviewCardStyle = {
+    borderRadius: '20px',
+    border: 'none',
+    boxShadow: '0 8px 32px rgba(24, 144, 255, 0.15)',
+    background: theme.cardBg,
+    backdropFilter: 'blur(10px)'
+  };
+
+  const welcomeSectionStyle = {
+    background: theme.background,
+    borderRadius: '12px',
+    padding: '20px',
+    textAlign: 'center',
+    color: 'white',
+    marginBottom: '24px'
+  };
+
+  const navigationGridStyle = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
+    gap: '16px',
+    marginBottom: '24px'
+  };
+
+  const navButtonStyle = {
+    height: 'auto',
+    padding: '20px 16px',
+    borderRadius: '12px',
+    border: '2px solid rgba(24, 144, 255, 0.1)',
+    background: 'rgba(24, 144, 255, 0.02)',
+    transition: 'all 0.3s ease',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '8px'
+  };
+
+  const navButtonHoverStyle = {
+    borderColor: theme.primary,
+    background: 'rgba(24, 144, 255, 0.1)',
+    transform: 'translateY(-2px)'
+  };
+
+  const navIconStyle = {
+    fontSize: '2rem',
+    color: theme.primary
+  };
+
+  const navTextStyle = {
+    fontSize: '0.95rem',
+    fontWeight: '600',
+    color: theme.textPrimary
+  };
+
+  const systemInfoStyle = {
+    background: 'linear-gradient(135deg, #e8f4fd 0%, #f0f9ff 100%)',
+    borderRadius: '12px',
+    padding: '16px',
+    border: '1px solid rgba(24, 144, 255, 0.1)'
+  };
+
   return (
-    <div>
-      <h1>仪表盘</h1>
-      <Row gutter={16} style={{ marginTop: 16 }}>
-        <Col span={6}>
-          <Card variant="outlined">
-            <Statistic
-              title="总设备数"
-              value={stats.totalDevices}
-              prefix={<CloudServerOutlined />}
-              loading={loading}
-            />
+    <div style={containerStyle}>
+      {/* 页面头部 */}
+      <div style={headerStyle}>
+        <h1 style={titleStyle}>
+          <DashboardOutlined style={{ marginRight: '12px' }} />
+          IDC设备管理系统
+        </h1>
+        <p style={subtitleStyle}>实时监控 • 智能管理 • 高效运维</p>
+      </div>
+
+      {/* 数据概览卡片 */}
+      <Row gutter={[24, 24]} style={{ marginBottom: '32px' }}>
+        <Col xs={24} sm={12} lg={6}>
+          <Card style={statCardStyle}>
+            <div style={{ position: 'relative' }}>
+              <div style={{ 
+                position: 'absolute', 
+                top: '0', 
+                right: '0', 
+                width: '60px', 
+                height: '60px', 
+                background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
+                borderRadius: '50%',
+                opacity: '0.1'
+              }} />
+              <Statistic
+                title={
+                  <span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
+                    总设备数
+                  </span>
+                }
+                value={stats.totalDevices}
+                prefix={<CloudServerOutlined style={{ color: theme.primary, fontSize: '1.2rem' }} />}
+                valueStyle={{ 
+                  fontSize: '2rem', 
+                  fontWeight: '700', 
+                  color: theme.textPrimary,
+                  marginBottom: '8px'
+                }}
+                loading={loading}
+              />
+              <div style={trendStyle(stats.deviceGrowth)}>
+                {stats.deviceGrowth > 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
+                <span style={{ marginLeft: '4px' }}>{Math.abs(stats.deviceGrowth)}%</span>
+                <Tag color="blue" style={{ marginLeft: '8px', fontSize: '0.75rem' }}>本月</Tag>
+              </div>
+            </div>
           </Card>
         </Col>
-        <Col span={6}>
-          <Card variant="outlined">
-            <Statistic
-              title="总机柜数"
-              value={stats.totalRacks}
-              prefix={<DatabaseOutlined />}
-              loading={loading}
-            />
+
+        <Col xs={24} sm={12} lg={6}>
+          <Card style={statCardStyle}>
+            <div style={{ position: 'relative' }}>
+              <div style={{ 
+                position: 'absolute', 
+                top: '0', 
+                right: '0', 
+                width: '60px', 
+                height: '60px', 
+                background: 'linear-gradient(135deg, #722ed1 0%, #531dab 100%)',
+                borderRadius: '50%',
+                opacity: '0.1'
+              }} />
+              <Statistic
+                title={
+                  <span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
+                    总机柜数
+                  </span>
+                }
+                value={stats.totalRacks}
+                prefix={<DatabaseOutlined style={{ color: theme.secondary, fontSize: '1.2rem' }} />}
+                valueStyle={{ 
+                  fontSize: '2rem', 
+                  fontWeight: '700', 
+                  color: theme.textPrimary,
+                  marginBottom: '8px'
+                }}
+                loading={loading}
+              />
+              <div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
+                <PoweroffOutlined style={{ marginRight: '4px' }} />
+                <span>正常运行</span>
+              </div>
+            </div>
           </Card>
         </Col>
-        <Col span={6}>
-          <Card variant="outlined">
-            <Statistic
-              title="总机房数"
-              value={stats.totalRooms}
-              prefix={<DatabaseOutlined />}
-              loading={loading}
-            />
+
+        <Col xs={24} sm={12} lg={6}>
+          <Card style={statCardStyle}>
+            <div style={{ position: 'relative' }}>
+              <div style={{ 
+                position: 'absolute', 
+                top: '0', 
+                right: '0', 
+                width: '60px', 
+                height: '60px', 
+                background: 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)',
+                borderRadius: '50%',
+                opacity: '0.1'
+              }} />
+              <Statistic
+                title={
+                  <span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
+                    总机房数
+                  </span>
+                }
+                value={stats.totalRooms}
+                prefix={<HomeOutlined style={{ color: theme.success, fontSize: '1.2rem' }} />}
+                valueStyle={{ 
+                  fontSize: '2rem', 
+                  fontWeight: '700', 
+                  color: theme.textPrimary,
+                  marginBottom: '8px'
+                }}
+                loading={loading}
+              />
+              <div style={{ display: 'flex', alignItems: 'center', fontSize: '0.875rem', color: theme.success }}>
+                <span style={{ width: '8px', height: '8px', background: theme.success, borderRadius: '50%', marginRight: '8px' }} />
+                <span>全部在线</span>
+              </div>
+            </div>
           </Card>
         </Col>
-        <Col span={6}>
-          <Card variant="outlined">
-            <Statistic
-              title="故障设备"
-              value={stats.faultDevices}
-              prefix={<WarningOutlined />}
-              valueStyle={{ color: '#cf1322' }}
-              loading={loading}
-            />
+
+        <Col xs={24} sm={12} lg={6}>
+          <Card style={{ ...statCardStyle, borderLeft: `4px solid ${theme.error}` }}>
+            <div style={{ position: 'relative' }}>
+              <div style={{ 
+                position: 'absolute', 
+                top: '0', 
+                right: '0', 
+                width: '60px', 
+                height: '60px', 
+                background: 'linear-gradient(135deg, #ff4d4f 0%, #d73027 100%)',
+                borderRadius: '50%',
+                opacity: '0.1'
+              }} />
+              <Statistic
+                title={
+                  <span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
+                    故障设备
+                  </span>
+                }
+                value={stats.faultDevices}
+                prefix={<WarningOutlined style={{ color: theme.error, fontSize: '1.2rem' }} />}
+                valueStyle={{ 
+                  fontSize: '2rem', 
+                  fontWeight: '700', 
+                  color: theme.error,
+                  marginBottom: '8px'
+                }}
+                loading={loading}
+              />
+              <div style={trendStyle(stats.faultTrend)}>
+                {stats.faultTrend < 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />}
+                <span style={{ marginLeft: '4px' }}>{Math.abs(stats.faultTrend)}%</span>
+                <Tag color="red" style={{ marginLeft: '8px', fontSize: '0.75rem' }}>本周</Tag>
+              </div>
+            </div>
           </Card>
         </Col>
       </Row>
-      <Card title="系统概览" style={{ marginTop: 16 }}>
-        <p>欢迎使用IDC设备管理系统！</p>
-        <p>本系统用于管理IDC机房中的设备、机柜和机房信息，提供设备状态监控、资源分配等功能。</p>
-      </Card>
+
+      {/* 系统概览 */}
+      <div style={systemOverviewStyle}>
+        <Card style={overviewCardStyle}>
+          <div style={{ padding: '24px' }}>
+            {/* 欢迎区域 */}
+            <div style={welcomeSectionStyle}>
+              <h2 style={{ 
+                fontSize: '1.5rem', 
+                fontWeight: '600', 
+                margin: '0 0 8px 0',
+                color: 'white'
+              }}>
+                欢迎使用IDC设备管理系统
+              </h2>
+              <p style={{ 
+                fontSize: '1rem', 
+                margin: '0',
+                opacity: '0.9',
+                color: 'white'
+              }}>
+                专业的机房设备管理解决方案
+              </p>
+            </div>
+
+            {/* 导航功能网格 */}
+            <div style={navigationGridStyle}>
+              <Button 
+                type="text" 
+                style={navButtonStyle}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.borderColor = theme.primary;
+                  e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
+                  e.currentTarget.style.transform = 'translateY(-2px)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
+                  e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
+                  e.currentTarget.style.transform = 'translateY(0)';
+                }}
+              >
+                <CloudServerOutlined style={navIconStyle} />
+                <span style={navTextStyle}>设备管理</span>
+              </Button>
+
+              <Button 
+                type="text" 
+                style={navButtonStyle}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.borderColor = theme.primary;
+                  e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
+                  e.currentTarget.style.transform = 'translateY(-2px)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
+                  e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
+                  e.currentTarget.style.transform = 'translateY(0)';
+                }}
+              >
+                <DatabaseOutlined style={navIconStyle} />
+                <span style={navTextStyle}>资源规划</span>
+              </Button>
+
+              <Button 
+                type="text" 
+                style={navButtonStyle}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.borderColor = theme.primary;
+                  e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
+                  e.currentTarget.style.transform = 'translateY(-2px)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
+                  e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
+                  e.currentTarget.style.transform = 'translateY(0)';
+                }}
+              >
+                <WarningOutlined style={navIconStyle} />
+                <span style={navTextStyle}>故障监控</span>
+              </Button>
+
+              <Button 
+                type="text" 
+                style={navButtonStyle}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.borderColor = theme.primary;
+                  e.currentTarget.style.background = 'rgba(24, 144, 255, 0.1)';
+                  e.currentTarget.style.transform = 'translateY(-2px)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.borderColor = 'rgba(24, 144, 255, 0.1)';
+                  e.currentTarget.style.background = 'rgba(24, 144, 255, 0.02)';
+                  e.currentTarget.style.transform = 'translateY(0)';
+                }}
+              >
+                <SettingOutlined style={navIconStyle} />
+                <span style={navTextStyle}>系统配置</span>
+              </Button>
+            </div>
+
+            {/* 系统信息 */}
+            <div style={systemInfoStyle}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div>
+                  <p style={{ margin: '0', fontSize: '0.95rem', color: theme.textPrimary, fontWeight: '500' }}>
+                    <strong>系统版本：</strong> v1.0.0
+                  </p>
+                  <p style={{ margin: '4px 0 0 0', fontSize: '0.85rem', color: theme.textSecondary }}>
+                    最后更新：{new Date().toLocaleDateString()}
+                  </p>
+                </div>
+                <Button 
+                  type="primary" 
+                  icon={<ReloadOutlined />} 
+                  size="small"
+                  style={{ background: theme.primary, borderColor: theme.primary }}
+                >
+                  刷新数据
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
     </div>
   );
 }