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

frontend/src/App.jsx

@@ -9,7 +9,7 @@ import RoomManagement from './pages/RoomManagement';
 import DeviceFieldManagement from './pages/DeviceFieldManagement';
 
 
-const { Header, Content, Sider } = Layout;
+const { Content, Sider } = Layout;
 
 function App() {
   const { 
@@ -18,17 +18,6 @@ function App() {
 
   return (
     <Router>
-      <Layout>
-        <Header className="header" style={{ 
-          display: 'flex', 
-          alignItems: 'center', 
-          backgroundColor: '#001529',
-          color: '#fff',
-          fontSize: '20px',
-          fontWeight: 'bold'
-        }}>
-          IDC设备管理系统
-        </Header>
       <Layout>
         <Sider width={200} style={{ backgroundColor: colorBgContainer }}>
             <Menu
@@ -84,7 +73,6 @@ function App() {
           </Content>
         </Layout>
       </Layout>
-      </Layout>
     </Router>
   );
 }

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 { Card, Row, Col, Statistic, Spin, message, Button, Tag } from 'antd';
-import { DatabaseOutlined, CloudServerOutlined, WarningOutlined, PoweroffOutlined } from '@ant-design/icons';
+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,57 +68,425 @@ 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>
+    <div style={containerStyle}>
-      <h1>仪表盘</h1>
+      {/* 页面头部 */}
-      <Row gutter={16} style={{ marginTop: 16 }}>
+      <div style={headerStyle}>
-        <Col span={6}>
+        <h1 style={titleStyle}>
-          <Card variant="outlined">
+          <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="总设备数"
+                title={
+                  <span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
+                    总设备数
+                  </span>
+                }
                 value={stats.totalDevices}
-              prefix={<CloudServerOutlined />}
+                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">
+        <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="总机柜数"
+                title={
+                  <span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
+                    总机柜数
+                  </span>
+                }
                 value={stats.totalRacks}
-              prefix={<DatabaseOutlined />}
+                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">
+        <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="总机房数"
+                title={
+                  <span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
+                    总机房数
+                  </span>
+                }
                 value={stats.totalRooms}
-              prefix={<DatabaseOutlined />}
+                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">
+        <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="故障设备"
+                title={
+                  <span style={{ fontSize: '0.95rem', fontWeight: '600', color: theme.textSecondary }}>
+                    故障设备
+                  </span>
+                }
                 value={stats.faultDevices}
-              prefix={<WarningOutlined />}
+                prefix={<WarningOutlined style={{ color: theme.error, fontSize: '1.2rem' }} />}
-              valueStyle={{ color: '#cf1322' }}
+                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>
+      <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>
   );
 }
 

frontend/src/pages/DeviceManagement.jsx

@@ -1,12 +1,72 @@
 import React, { useState, useEffect } from 'react';
 import { Table, Button, Modal, Form, Input, Select, DatePicker, message, Card, Space, InputNumber, Switch, Upload, Progress, Checkbox } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, UploadOutlined, DownloadOutlined, SettingOutlined } from '@ant-design/icons';
+import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, UploadOutlined, DownloadOutlined, SettingOutlined, UndoOutlined, CloudServerOutlined, SwapOutlined, SafetyOutlined, DatabaseOutlined, AppstoreOutlined } from '@ant-design/icons';
 import axios from 'axios';
 import dayjs from 'dayjs';
 
 const { Option } = Select;
 const { RangePicker } = DatePicker;
 
+// 可调整列宽的表头组件
+const ResizeableTitle = (props) => {
+  const { onResize, width, ...restProps } = props;
+  
+  if (!width) {
+    return <th {...restProps} />;
+  }
+  
+  const handleMouseDown = (e) => {
+    if (!onResize) return;
+    
+   
+    const startX = e.pageX;
+    const startWidth = width;
+    
+    const handleMouseMove = (moveEvent) => {
+      const diff = moveEvent.pageX - startX;
+      const newWidth = Math.max(50, startWidth + diff); // 最小宽度50px
+      onResize(newWidth);
+    };
+    
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+  
+  return (
+    <th
+      {...restProps}
+      style={{
+        position: 'relative',
+        width: width,
+        maxWidth: width,
+        minWidth: width,
+        ...restProps.style,
+      }}
+    >
+      {restProps.children}
+      <div
+        style={{
+          position: 'absolute',
+          right: '-3px',
+          top: 0,
+          bottom: 0,
+          width: '6px',
+          cursor: 'col-resize',
+          backgroundColor: 'transparent',
+          zIndex: 10,
+        }}
+        onMouseDown={handleMouseDown}
+        title="拖拽调整列宽"
+      />
+    </th>
+  );
+};
+
 function DeviceManagement() {
   const [devices, setDevices] = useState([]);
   const [racks, setRacks] = useState([]);
@@ -38,7 +98,9 @@ function DeviceManagement() {
   const [isImporting, setIsImporting] = useState(false);
   const [importResult, setImportResult] = useState(null);
   const [selectedDevices, setSelectedDevices] = useState([]);
-  const [selectAll, setSelectAll] = useState(false);
+  const [detailModalVisible, setDetailModalVisible] = useState(false);
+  const [selectedDevice, setSelectedDevice] = useState(null);
+
   // 自定义字段状态
   const [customFieldName, setCustomFieldName] = useState('');
   const [customFieldValue, setCustomFieldValue] = useState('');
@@ -46,6 +108,9 @@ function DeviceManagement() {
   // 字段配置模态框
   const [fieldConfigModalVisible, setFieldConfigModalVisible] = useState(false);
   
+  // 列宽状态
+  const [columnWidths, setColumnWidths] = useState({});
+
   // 获取所有设备（支持搜索、筛选和分页）
   const fetchDevices = async (page = 1, pageSize = 10, searchParams = {}) => {
     try {
@@ -341,6 +406,12 @@ function DeviceManagement() {
     });
   };
 
+  // 显示设备详情
+  const handleShowDetail = (device) => {
+    setSelectedDevice(device);
+    setDetailModalVisible(true);
+  };
+
   // 导出设备数据
   const handleExport = async () => {
     try {
@@ -369,26 +440,7 @@ function DeviceManagement() {
     }
   };
 
-  // 处理单个设备选择
-  const handleDeviceSelect = (deviceId) => {
-    setSelectedDevices(prev => {
-      if (prev.includes(deviceId)) {
-        return prev.filter(id => id !== deviceId);
-      } else {
-        return [...prev, deviceId];
-      }
-    });
-  };
 
-  // 处理全选/取消全选
-  const handleSelectAll = (e) => {
-    setSelectAll(e.target.checked);
-    if (e.target.checked) {
-      setSelectedDevices(devices.map(device => device.deviceId));
-    } else {
-      setSelectedDevices([]);
-    }
-  };
 
 
 
@@ -464,6 +516,36 @@ function DeviceManagement() {
     other: '其他设备'
   };
 
+  // 获取设备类型图标
+  const getDeviceTypeIcon = (type) => {
+    const iconMap = {
+      server: <CloudServerOutlined style={{ color: '#1890ff' }} />,
+      switch: <SwapOutlined style={{ color: '#52c41a' }} />,
+      router: <SafetyOutlined style={{ color: '#faad14' }} />,
+      storage: <DatabaseOutlined style={{ color: '#722ed1' }} />,
+      other: <AppstoreOutlined style={{ color: '#8c8c8c' }} />
+    };
+    return iconMap[type] || <AppstoreOutlined style={{ color: '#8c8c8c' }} />;
+  };
+
+  // 处理列宽变化
+  const handleColumnResize = (key, width) => {
+    setColumnWidths(prev => ({ ...prev, [key]: width }));
+  };
+  
+  // 重置列宽到默认值
+  const resetColumnWidths = () => {
+    setColumnWidths({});
+    message.success('列宽已重置为默认值');
+  };
+  
+  // 处理表头单元格拖拽
+  const handleHeaderCellResize = (key) => (column) => ({
+    width: column.width,
+    onResize: (width) => handleColumnResize(key, width),
+  });
+
+  
   // 动态生成表格列配置
   const columns = React.useMemo(() => {
     const generatedColumns = [];
@@ -480,12 +562,16 @@ function DeviceManagement() {
           title: '所在机房',
           dataIndex: ['Rack', 'Room', 'name'],
           key: 'roomName',
+          width: columnWidths.roomName || 120,
+          onHeaderCell: handleHeaderCellResize('roomName'),
         });
         // 添加机柜信息列
         generatedColumns.push({
           title: field.displayName,
           dataIndex: ['Rack', 'name'],
           key: field.fieldName,
+          width: columnWidths[field.fieldName] || 120,
+          onHeaderCell: handleHeaderCellResize(field.fieldName),
         });
       } 
       // 特殊处理设备类型
@@ -494,17 +580,15 @@ function DeviceManagement() {
           title: field.displayName,
           dataIndex: field.fieldName,
           key: field.fieldName,
+          width: columnWidths[field.fieldName] || 100,
+          onHeaderCell: handleHeaderCellResize(field.fieldName),
           render: (type) => {
-            if (Array.isArray(type)) {
             return (
               <Space>
-                  {type.map(t => (
+                {getDeviceTypeIcon(type)}
-                    <span key={t}>{typeMap[t]}</span>
+                <span>{typeMap[type]}</span>
-                  ))}
               </Space>
             );
-            }
-            return typeMap[type];
           },
         });
       }
@@ -514,6 +598,8 @@ function DeviceManagement() {
           title: field.displayName,
           dataIndex: field.fieldName,
           key: field.fieldName,
+          width: columnWidths[field.fieldName] || 100,
+          onHeaderCell: handleHeaderCellResize(field.fieldName),
           render: (status) => {
             if (Array.isArray(status)) {
               return (
@@ -540,6 +626,8 @@ function DeviceManagement() {
           title: field.displayName,
           dataIndex: field.fieldName,
           key: field.fieldName,
+          width: columnWidths[field.fieldName] || 120,
+          onHeaderCell: handleHeaderCellResize(field.fieldName),
           render: (date) => {
             if (!date) return '';
             
@@ -565,11 +653,46 @@ function DeviceManagement() {
       }
       // 普通字段
       else {
-        generatedColumns.push({
+        // 为不同类型的字段设置不同的默认宽度
+        let defaultWidth = 120;
+        if (field.fieldName === 'deviceId' || field.fieldName === 'name') {
+          defaultWidth = 150;
+        } else if (field.fieldName === 'description') {
+          defaultWidth = 200;
+        } else if (field.fieldType === 'number') {
+          defaultWidth = 80;
+        } else if (field.fieldType === 'textarea') {
+          defaultWidth = 180;
+        }
+        
+        // 为设备名称和ID列添加点击查看详情功能
+        const columnConfig = {
           title: field.displayName,
           dataIndex: field.fieldName,
           key: field.fieldName,
-        });
+          width: columnWidths[field.fieldName] || defaultWidth,
+          onHeaderCell: handleHeaderCellResize(field.fieldName),
+        };
+        
+        // 设备名称和ID列添加点击效果
+        if (field.fieldName === 'deviceId' || field.fieldName === 'name') {
+          columnConfig.render = (value, record) => (
+            <a 
+              onClick={() => handleShowDetail(record)}
+              style={{ 
+                color: '#1890ff', 
+                textDecoration: 'none',
+                cursor: 'pointer'
+              }}
+              onMouseEnter={(e) => e.target.style.textDecoration = 'underline'}
+              onMouseLeave={(e) => e.target.style.textDecoration = 'none'}
+            >
+              {value || '-'}
+            </a>
+          );
+        }
+        
+        generatedColumns.push(columnConfig);
       }
     });
     
@@ -577,6 +700,8 @@ function DeviceManagement() {
     generatedColumns.push({
       title: '操作',
       key: 'action',
+      width: columnWidths.action || 120,
+      onHeaderCell: handleHeaderCellResize('action'),
       render: (_, record) => (
         <Space size="middle">
           <Button type="primary" icon={<EditOutlined />} onClick={() => showModal(record)} size="small">
@@ -590,7 +715,7 @@ function DeviceManagement() {
     });
     
     return generatedColumns;
-  }, [deviceFields]);
+  }, [deviceFields, columnWidths]);
 
   // 保存字段配置
   const handleSaveFieldConfig = async (values) => {
@@ -629,6 +754,13 @@ function DeviceManagement() {
           <Button icon={<DownloadOutlined />} onClick={handleExport}>导出设备</Button>
           <Button icon={<UploadOutlined />} onClick={() => setImportModalVisible(true)}>导入设备</Button>
           <Button icon={<SettingOutlined />} onClick={() => setFieldConfigModalVisible(true)}>字段配置</Button>
+          <Button 
+            icon={<UndoOutlined />} 
+            onClick={resetColumnWidths}
+            title="重置列宽"
+          >
+            重置列宽
+          </Button>
           <Button 
             type="primary" 
             danger={false} 
@@ -711,31 +843,22 @@ function DeviceManagement() {
 
 
         <Table
-          columns={[
+          components={{
-            {
+            header: {
-              title: (
+              cell: ResizeableTitle,
-                <Checkbox
-                  checked={selectAll && devices.length > 0}
-                  onChange={handleSelectAll}
-                  indeterminate={selectedDevices.length > 0 && selectedDevices.length < devices.length}
-                />
-              ),
-              key: 'selection',
-              width: 60,
-              render: (_, record) => (
-                <Checkbox
-                  checked={selectedDevices.includes(record.deviceId)}
-                  onChange={() => handleDeviceSelect(record.deviceId)}
-                />
-              )
             },
-            ...columns
+          }}
-          ]}
+          columns={columns}
           dataSource={devices}
           rowKey="deviceId"
           loading={loading}
           pagination={pagination}
           onChange={handleTableChange}
+          scroll={{ x: 'max-content' }}
+          rowSelection={{
+            selectedRowKeys: selectedDevices,
+            onChange: setSelectedDevices,
+          }}
         />
       </Card>
 
@@ -744,7 +867,7 @@ function DeviceManagement() {
         open={modalVisible}
         onCancel={handleCancel}
         footer={null}
-        width={800}
+        width={700}
       >
         <Form
           form={form}
@@ -786,17 +909,15 @@ function DeviceManagement() {
                     </Select>
                   );
                 } else {
-                  // 其他select类型字段改为使用复选框组支持多选
+                  // 设备类型等使用单选select
                   control = (
-                    <Checkbox.Group placeholder={`请选择${field.displayName}`}>
+                    <Select placeholder={`请选择${field.displayName}`}>
-                      <Space direction="vertical">
                       {field.options && field.options.map(option => (
-                          <Checkbox key={option.value} value={option.value}>
+                        <Option key={option.value} value={option.value}>
                           {option.label}
-                          </Checkbox>
+                        </Option>
                       ))}
-                      </Space>
+                    </Select>
-                    </Checkbox.Group>
                   );
                 }
                 break;
@@ -986,6 +1107,127 @@ function DeviceManagement() {
           </div>
         )}
       </Modal>
+
+      {/* 设备详情模态框 */}
+      <Modal
+        title="设备详情"
+        open={detailModalVisible}
+        onCancel={() => {
+          setDetailModalVisible(false);
+          setSelectedDevice(null);
+        }}
+        footer={[
+          <Button key="close" onClick={() => {
+            setDetailModalVisible(false);
+            setSelectedDevice(null);
+          }}>
+            关闭
+          </Button>,
+          <Button key="edit" type="primary" onClick={() => {
+            setDetailModalVisible(false);
+            showModal(selectedDevice);
+          }}>
+            编辑
+          </Button>
+        ]}
+        width={800}
+        destroyOnClose
+      >
+        {selectedDevice && (
+          <div>
+            {/* 基本信息区域 */}
+            <Card size="small" title="基本信息">
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>设备ID：</label>
+                  <span style={{ marginLeft: 8 }}>{selectedDevice.deviceId || '-'}</span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>设备名称：</label>
+                  <span style={{ marginLeft: 8 }}>{selectedDevice.name || '-'}</span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>设备类型：</label>
+                  <span style={{ marginLeft: 8 }}>
+                    {selectedDevice.type ? (
+                      <Space>
+                        {getDeviceTypeIcon(selectedDevice.type)}
+                        <span>{typeMap[selectedDevice.type] || selectedDevice.type}</span>
+                      </Space>
+                    ) : '-'}
+                  </span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>型号：</label>
+                  <span style={{ marginLeft: 8 }}>{selectedDevice.model || '-'}</span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>序列号：</label>
+                  <span style={{ marginLeft: 8 }}>{selectedDevice.serialNumber || '-'}</span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>IP地址：</label>
+                  <span style={{ marginLeft: 8 }}>{selectedDevice.ipAddress || '-'}</span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>所在机房：</label>
+                  <span style={{ marginLeft: 8 }}>{selectedDevice.Rack?.Room?.name || '-'}</span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>所在机柜：</label>
+                  <span style={{ marginLeft: 8 }}>{selectedDevice.Rack?.name || '-'}</span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>位置：</label>
+                  <span style={{ marginLeft: 8 }}>{selectedDevice.position || '-'}</span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>高度(U)：</label>
+                  <span style={{ marginLeft: 8 }}>{selectedDevice.height || '-'}</span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>功率(W)：</label>
+                  <span style={{ marginLeft: 8 }}>{selectedDevice.power || '-'}</span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>状态：</label>
+                  <span style={{ 
+                    marginLeft: 8, 
+                    color: selectedDevice.status ? statusMap[selectedDevice.status]?.color : '#666',
+                    fontWeight: 'bold'
+                  }}>
+                    {selectedDevice.status ? statusMap[selectedDevice.status]?.text || selectedDevice.status : '-'}
+                  </span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>购买日期：</label>
+                  <span style={{ marginLeft: 8 }}>
+                    {selectedDevice.purchaseDate ? new Date(selectedDevice.purchaseDate).toLocaleDateString('zh-CN') : '-'}
+                  </span>
+                </div>
+                <div>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>保修到期：</label>
+                  <span style={{ 
+                    marginLeft: 8, 
+                    color: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? '#d93025' : '#666',
+                    fontWeight: selectedDevice.warrantyExpiry && new Date(selectedDevice.warrantyExpiry) < new Date() ? 'bold' : 'normal'
+                  }}>
+                    {selectedDevice.warrantyExpiry ? new Date(selectedDevice.warrantyExpiry).toLocaleDateString('zh-CN') : '-'}
+                  </span>
+                </div>
+              </div>
+              {selectedDevice.description && (
+                <div style={{ marginTop: 16 }}>
+                  <label style={{ fontWeight: 'bold', color: '#666' }}>描述：</label>
+                  <div style={{ marginTop: 8, padding: '8px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
+                    {selectedDevice.description}
+                  </div>
+                </div>
+              )}
+            </Card>
+          </div>
+        )}
+      </Modal>
     </div>
   );
 }