chore: 统一代码风格并配置ESLint和Prettier

配置ESLint和Prettier规则添加前端和后端的忽略文件统一代码格式和缩进修复代码风格问题
2026-02-10 11:04:01 +08:00
parent f82d82e57e
commit afc372a432
61 changed files with 14976 additions and 6124 deletions
@@ -1,6 +1,35 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Table, Button, Modal, Form, Input, Select, message, Card, Space, Popconfirm, Tag, Tooltip, Collapse, Empty, Spin, Upload, Progress, Checkbox } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, ReloadOutlined, ExportOutlined, ImportOutlined, DownloadOutlined, UploadOutlined as UploadIcon } from '@ant-design/icons';
+import {
+  Table,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  message,
+  Card,
+  Space,
+  Popconfirm,
+  Tag,
+  Tooltip,
+  Collapse,
+  Empty,
+  Spin,
+  Upload,
+  Progress,
+  Checkbox,
+} from 'antd';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SearchOutlined,
+  ReloadOutlined,
+  ExportOutlined,
+  ImportOutlined,
+  DownloadOutlined,
+  UploadOutlined as UploadIcon,
+} from '@ant-design/icons';
 import axios from 'axios';
 import * as XLSX from 'xlsx';
 import Papa from 'papaparse';
@@ -14,35 +43,35 @@ const designTokens = {
      main: '#667eea',
      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      light: '#8b9ff0',
-      dark: '#4f5db8'
+      dark: '#4f5db8',
    },
    success: {
      main: '#10b981',
      gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
      light: '#34d399',
-      dark: '#047857'
+      dark: '#047857',
    },
    warning: {
      main: '#f59e0b',
      gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
      light: '#fbbf24',
-      dark: '#b45309'
+      dark: '#b45309',
    },
    error: {
      main: '#ef4444',
      gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
      light: '#f87171',
-      dark: '#b91c1c'
-    }
+      dark: '#b91c1c',
+    },
  },
  borderRadius: {
    small: '6px',
    medium: '10px',
-    large: '16px'
+    large: '16px',
  },
  shadows: {
-    medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-  }
+    medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+  },
 };

 function CableManagement() {
@@ -55,12 +84,12 @@ function CableManagement() {
  const [filters, setFilters] = useState({
    switchDeviceId: '',
    status: 'all',
-    cableType: 'all'
+    cableType: 'all',
  });
  const [modalVisible, setModalVisible] = useState(false);
  const [editingCable, setEditingCable] = useState(null);
  const [form] = Form.useForm();
-  
+
  const [importModalVisible, setImportModalVisible] = useState(false);
  const [importFileList, setImportFileList] = useState([]);
  const [importPreview, setImportPreview] = useState([]);
@@ -88,7 +117,7 @@ function CableManagement() {
        if (!grouped[switchId]) {
          grouped[switchId] = {
            switch: cable.sourceDevice,
-            cables: []
+            cables: [],
          };
        }
        grouped[switchId].cables.push(cable);
@@ -128,12 +157,12 @@ function CableManagement() {
    }
  }, []);

-  const fetchDevicePorts = useCallback(async (deviceId) => {
+  const fetchDevicePorts = useCallback(async deviceId => {
    if (!deviceId) {
      setDevicePorts(prev => ({ ...prev, [deviceId]: [] }));
      return;
    }
-    
+
    try {
      const response = await axios.get(`/api/device-ports/device/${deviceId}`);
      setDevicePorts(prev => ({ ...prev, [deviceId]: response.data || [] }));
@@ -156,7 +185,7 @@ function CableManagement() {
    setFilters({
      switchDeviceId: '',
      status: 'all',
-      cableType: 'all'
+      cableType: 'all',
    });
  };

@@ -166,7 +195,7 @@ function CableManagement() {
    setModalVisible(true);
  };

-  const handleEdit = (cable) => {
+  const handleEdit = cable => {
    setEditingCable(cable);
    form.setFieldsValue({
      sourceDeviceId: cable.sourceDeviceId,
@@ -176,12 +205,12 @@ function CableManagement() {
      cableType: cable.cableType,
      cableLength: cable.cableLength,
      status: cable.status,
-      description: cable.description
+      description: cable.description,
    });
    setModalVisible(true);
  };

-  const handleDelete = async (cableId) => {
+  const handleDelete = async cableId => {
    try {
      await axios.delete(`/api/cables/${cableId}`);
      message.success('删除成功');
@@ -192,7 +221,7 @@ function CableManagement() {
    }
  };

-  const handleDeleteSwitch = async (switchId) => {
+  const handleDeleteSwitch = async switchId => {
    try {
      await axios.delete(`/api/devices/${switchId}`);
      message.success('删除设备成功');
@@ -228,7 +257,7 @@ function CableManagement() {
          sourceDeviceId: values.sourceDeviceId,
          sourcePort: values.sourcePort,
          targetDeviceId: values.targetDeviceId,
-          targetPort: values.targetPort
+          targetPort: values.targetPort,
        });

        if (checkResponse.data.hasConflict) {
@@ -247,10 +276,12 @@ function CableManagement() {
      } catch (error) {
        if (error.response?.status === 409) {
          // 冲突错误
-          setConflictInfo([{
-            type: 'unknown',
-            existingCable: error.response.data.existingCable
-          }]);
+          setConflictInfo([
+            {
+              type: 'unknown',
+              existingCable: error.response.data.existingCable,
+            },
+          ]);
          setPendingSubmitValues(values);
          setConflictModalVisible(true);
        } else {
@@ -269,7 +300,7 @@ function CableManagement() {

      await axios.post('/api/cables', {
        ...pendingSubmitValues,
-        force: true
+        force: true,
      });

      message.success('接线已强制接管并创建成功');
@@ -291,16 +322,16 @@ function CableManagement() {
    setImportProgress({ current: 0, total: 0 });
  };

-  const handleFileUpload = (info) => {
+  const handleFileUpload = info => {
    const { file } = info;
    setImportFileList([file]);
-    
+
    const reader = new FileReader();
-    reader.onload = async (e) => {
+    reader.onload = async e => {
      try {
        const data = e.target.result;
        let parsedData = [];
-        
+
        if (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
          const workbook = XLSX.read(data, { type: 'binary' });
          const sheetName = workbook.SheetNames[0];
@@ -310,15 +341,15 @@ function CableManagement() {
          Papa.parse(data, {
            header: true,
            skipEmptyLines: true,
-            complete: (results) => {
+            complete: results => {
              parsedData = results.data;
-            }
+            },
          });
        } else {
          message.error('不支持的文件格式，请上传 .xlsx 或 .csv 文件');
          return;
        }
-        
+
        const validatedData = await validateImportData(parsedData);
        setImportPreview(validatedData);
        setImportProgress({ current: 0, total: validatedData.length });
@@ -327,64 +358,64 @@ function CableManagement() {
        console.error('文件解析失败:', error);
      }
    };
-    
+
    reader.readAsBinaryString(file);
  };

-  const validateImportData = async (data) => {
+  const validateImportData = async data => {
    const validatedData = [];
    const errors = [];
-    
+
    for (let i = 0; i < data.length; i++) {
      const row = data[i];
      const error = await validateCableRow(row, i);
-      
+
      if (error) {
        errors.push(error);
      } else {
        validatedData.push(row);
      }
    }
-    
+
    if (errors.length > 0) {
      message.warning(`发现 ${errors.length} 条数据错误，已跳过`);
      console.log('导入错误:', errors);
    }
-    
+
    return validatedData;
  };

  const validateCableRow = async (row, index) => {
    const errors = [];
-    
+
    if (!row['源设备ID'] || !row['源设备端口']) {
      return { valid: false, error: `第 ${index + 1} 行：缺少必填字段（源设备ID或源设备端口）` };
    }
-    
+
    const sourceDevice = devices.find(d => d.deviceId === row['源设备ID']);
    if (!sourceDevice) {
      return { valid: false, error: `第 ${index + 1} 行：源设备不存在` };
    }
-    
+
    const targetDevice = devices.find(d => d.deviceId === row['目标设备ID']);
    if (!targetDevice) {
      return { valid: false, error: `第 ${index + 1} 行：目标设备不存在` };
    }
-    
+
    const validCableTypes = ['网线', '光纤', '铜缆'];
    if (!validCableTypes.includes(row['线缆类型'])) {
      return { valid: false, error: `第 ${index + 1} 行：无效的线缆类型` };
    }
-    
+
    const validStatuses = ['正常', '故障', '未连接'];
    if (!validStatuses.includes(row['状态'])) {
      return { valid: false, error: `第 ${index + 1} 行：无效的状态` };
    }
-    
+
    if (errors.length > 0) {
      return { valid: false, error: errors.join('; ') };
    }
-    
+
    return { valid: true };
  };

@@ -393,23 +424,23 @@ function CableManagement() {
      message.warning('请先选择要导入的数据');
      return;
    }
-    
+
    setImporting(true);
    setImportProgress({ current: 0, total: importPreview.length });
-    
+
    try {
      const cableTypeMap = {
-        '网线': 'ethernet',
-        '光纤': 'fiber',
-        '铜缆': 'copper'
+        网线: 'ethernet',
+        光纤: 'fiber',
+        铜缆: 'copper',
      };
-      
+
      const statusMap = {
-        '正常': 'normal',
-        '故障': 'fault',
-        '未连接': 'disconnected'
+        正常: 'normal',
+        故障: 'fault',
+        未连接: 'disconnected',
      };
-      
+
      const cablesData = importPreview.map((row, index) => ({
        cableId: `CABLE-${Date.now()}-${index}`,
        sourceDeviceId: row['源设备ID'],
@@ -419,22 +450,22 @@ function CableManagement() {
        cableType: cableTypeMap[row['线缆类型']] || 'ethernet',
        cableLength: row['线缆长度(米)'],
        status: statusMap[row['状态']] || 'normal',
-        description: row['描述']
+        description: row['描述'],
      }));
-      
+
      const response = await axios.post('/api/cables/batch', { cables: cablesData });
-      
+
      const { total, success, failed, errors } = response.data;
-      
+
      setImportProgress({ current: total, total: total });
-      
+
      if (failed > 0) {
        console.error('导入错误:', errors);
        message.warning(`导入完成！成功 ${success} 条，失败 ${failed} 条`);
      } else {
        message.success(`导入完成！成功 ${success} 条`);
      }
-      
+
      fetchCables();
      setImportModalVisible(false);
      setImportPreview([]);
@@ -449,38 +480,38 @@ function CableManagement() {
  const handleDownloadTemplate = () => {
    const templateData = [
      {
-        '源设备ID': 'DEV001',
-        '源设备端口': 'eth0/1',
-        '目标设备ID': 'DEV002',
-        '目标设备端口': 'eth0',
-        '线缆类型': '网线',
+        源设备ID: 'DEV001',
+        源设备端口: 'eth0/1',
+        目标设备ID: 'DEV002',
+        目标设备端口: 'eth0',
+        线缆类型: '网线',
        '线缆长度(米)': '5',
-        '状态': '正常',
-        '描述': '示例接线'
-      }
+        状态: '正常',
+        描述: '示例接线',
+      },
    ];
-    
+
    const worksheet = XLSX.utils.json_to_sheet(templateData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, '接线数据');
    XLSX.writeFile(workbook, '接线导入模板.xlsx');
  };

-  const getStatusTag = (status) => {
+  const getStatusTag = status => {
    const statusMap = {
      normal: { color: 'success', text: '正常' },
      fault: { color: 'error', text: '故障' },
-      disconnected: { color: 'default', text: '未连接' }
+      disconnected: { color: 'default', text: '未连接' },
    };
    const config = statusMap[status] || { color: 'default', text: status };
    return <Tag color={config.color}>{config.text}</Tag>;
  };

-  const getCableTypeTag = (type) => {
+  const getCableTypeTag = type => {
    const typeMap = {
-      '网线': { color: 'blue', text: '网线' },
-      '光纤': { color: 'green', text: '光纤' },
-      '铜缆': { color: 'orange', text: '铜缆' }
+      网线: { color: 'blue', text: '网线' },
+      光纤: { color: 'green', text: '光纤' },
+      铜缆: { color: 'orange', text: '铜缆' },
    };
    const config = typeMap[type] || { color: 'default', text: type };
    return <Tag color={config.color}>{config.text}</Tag>;
@@ -494,7 +525,7 @@ function CableManagement() {
    return {
      status: cable.status,
      text: cable.status === 'normal' ? '已连接' : cable.status === 'fault' ? '故障' : '未连接',
-      color: cable.status === 'normal' ? 'success' : cable.status === 'fault' ? 'error' : 'default'
+      color: cable.status === 'normal' ? 'success' : cable.status === 'fault' ? 'error' : 'default',
    };
  };

@@ -503,31 +534,31 @@ function CableManagement() {
      title: '端口名称',
      dataIndex: 'portName',
      key: 'portName',
-      width: 120
+      width: 120,
    },
    {
      title: '端口类型',
      dataIndex: 'portType',
      key: 'portType',
      width: 100,
-      render: (type) => {
+      render: type => {
        const typeMap = {
-          'RJ45': { color: 'blue', text: 'RJ45' },
-          'SFP': { color: 'green', text: 'SFP' },
+          RJ45: { color: 'blue', text: 'RJ45' },
+          SFP: { color: 'green', text: 'SFP' },
          'SFP+': { color: 'cyan', text: 'SFP+' },
-          'SFP28': { color: 'purple', text: 'SFP28' },
-          'QSFP': { color: 'orange', text: 'QSFP' },
-          'QSFP28': { color: 'red', text: 'QSFP28' }
+          SFP28: { color: 'purple', text: 'SFP28' },
+          QSFP: { color: 'orange', text: 'QSFP' },
+          QSFP28: { color: 'red', text: 'QSFP28' },
        };
        const config = typeMap[type] || { color: 'default', text: type };
        return <Tag color={config.color}>{config.text}</Tag>;
-      }
+      },
    },
    {
      title: '端口速率',
      dataIndex: 'portSpeed',
      key: 'portSpeed',
-      width: 100
+      width: 100,
    },
    {
      title: '连接状态',
@@ -537,7 +568,7 @@ function CableManagement() {
      render: (_, record) => {
        const status = getPortConnectionStatus(record.portName, record.switchData);
        return <Tag color={status.color}>{status.text}</Tag>;
-      }
+      },
    },
    {
      title: '目标设备',
@@ -553,7 +584,7 @@ function CableManagement() {
            <div style={{ fontSize: 12, color: '#999' }}>{cable.targetPort}</div>
          </div>
        );
-      }
+      },
    },
    {
      title: '线缆类型',
@@ -564,7 +595,7 @@ function CableManagement() {
        const cable = record.switchData.cables.find(c => c.sourcePort === record.portName);
        if (!cable) return '-';
        return getCableTypeTag(cable.cableType);
-      }
+      },
    },
    {
      title: '长度(米)',
@@ -575,7 +606,7 @@ function CableManagement() {
        const cable = record.switchData.cables.find(c => c.sourcePort === record.portName);
        if (!cable) return '-';
        return cable.cableLength ? `${cable.cableLength}m` : '-';
-      }
+      },
    },
    {
      title: '操作',
@@ -602,12 +633,7 @@ function CableManagement() {
                  okText="确定"
                  cancelText="取消"
                >
-                  <Button
-                    type="link"
-                    size="small"
-                    danger
-                    icon={<DeleteOutlined />}
-                  >
+                  <Button type="link" size="small" danger icon={<DeleteOutlined />}>
                    删除
                  </Button>
                </Popconfirm>
@@ -615,17 +641,17 @@ function CableManagement() {
            )}
          </Space>
        );
-      }
-    }
+      },
+    },
  ];

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
-      <Card 
-        style={{ 
+      <Card
+        style={{
          borderRadius: designTokens.borderRadius.large,
          boxShadow: designTokens.shadows.medium,
-          marginBottom: 16
+          marginBottom: 16,
        }}
      >
        <div style={{ marginBottom: 16 }}>
@@ -634,7 +660,7 @@ function CableManagement() {
              placeholder="选择交换机"
              style={{ width: 200 }}
              value={filters.switchDeviceId || undefined}
-              onChange={(value) => setFilters(prev => ({ ...prev, switchDeviceId: value }))}
+              onChange={value => setFilters(prev => ({ ...prev, switchDeviceId: value }))}
              allowClear
              showSearch
              filterOption={(input, option) => {
@@ -655,67 +681,65 @@ function CableManagement() {
              placeholder="线缆类型"
              style={{ width: 120 }}
              value={filters.cableType}
-              onChange={(value) => setFilters(prev => ({ ...prev, cableType: value }))}
+              onChange={value => setFilters(prev => ({ ...prev, cableType: value }))}
            >
              <Option value="all">全部</Option>
              <Option value="ethernet">网线</Option>
              <Option value="fiber">光纤</Option>
              <Option value="copper">铜缆</Option>
            </Select>
-            
+
            <Select
              placeholder="连接状态"
              style={{ width: 120 }}
              value={filters.status}
-              onChange={(value) => setFilters(prev => ({ ...prev, status: value }))}
+              onChange={value => setFilters(prev => ({ ...prev, status: value }))}
            >
              <Option value="all">全部</Option>
              <Option value="normal">已连接</Option>
              <Option value="fault">故障</Option>
              <Option value="disconnected">未连接</Option>
            </Select>
-            
-            <Button 
-              type="primary" 
-              icon={<SearchOutlined />} 
+
+            <Button
+              type="primary"
+              icon={<SearchOutlined />}
              onClick={handleSearch}
              style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
            >
              搜索
            </Button>
-            
+
            <Button icon={<ReloadOutlined />} onClick={handleReset}>
              重置
            </Button>
          </Space>
        </div>
-        
+
        <div style={{ marginBottom: 16 }}>
          <Space>
-            <Button 
-              type="primary" 
-              icon={<PlusOutlined />} 
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
              onClick={handleAdd}
              style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
            >
              新增接线
            </Button>
-            
-            <Button 
-              type="primary" 
-              icon={<ImportOutlined />} 
+
+            <Button
+              type="primary"
+              icon={<ImportOutlined />}
              onClick={handleImport}
              style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
            >
              批量导入
            </Button>
-            
-            <Button icon={<ExportOutlined />}>
-              导出
-            </Button>
+
+            <Button icon={<ExportOutlined />}>导出</Button>
          </Space>
        </div>
-        
+
        {loading ? (
          <div style={{ textAlign: 'center', padding: '40px' }}>
            <Spin size="large" tip="加载接线数据中..." />
@@ -733,26 +757,37 @@ function CableManagement() {
              const switchDevice = switchData.switch;
              const switchPorts = devicePorts[switchId] || [];
              const connectedCount = switchData.cables.filter(c => c.status === 'normal').length;
-              const disconnectedCount = switchData.cables.filter(c => c.status === 'disconnected').length;
+              const disconnectedCount = switchData.cables.filter(
+                c => c.status === 'disconnected'
+              ).length;
              const faultCount = switchData.cables.filter(c => c.status === 'fault').length;
-              
+
              return (
                <Panel
                  key={switchId}
                  header={
-                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                      }}
+                    >
                      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                        <div style={{
-                          width: '40px',
-                          height: '40px',
-                          borderRadius: designTokens.borderRadius.medium,
-                          background: designTokens.colors.primary.gradient,
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          color: '#fff',
-                          fontSize: '18px'
-                        }}>
+                        <div
+                          style={{
+                            width: '40px',
+                            height: '40px',
+                            borderRadius: designTokens.borderRadius.medium,
+                            background: designTokens.colors.primary.gradient,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: '#fff',
+                            fontSize: '18px',
+                          }}
+                        >
                          🔀
                        </div>
                        <div>
@@ -792,12 +827,7 @@ function CableManagement() {
                        okText="确定"
                        cancelText="取消"
                      >
-                        <Button
-                          type="link"
-                          size="small"
-                          danger
-                          icon={<DeleteOutlined />}
-                        >
+                        <Button type="link" size="small" danger icon={<DeleteOutlined />}>
                          删除设备
                        </Button>
                      </Popconfirm>
@@ -808,7 +838,7 @@ function CableManagement() {
                    columns={portColumns}
                    dataSource={switchPorts.map(port => ({
                      ...port,
-                      switchData: switchData
+                      switchData: switchData,
                    }))}
                    rowKey="portId"
                    pagination={false}
@@ -821,7 +851,7 @@ function CableManagement() {
          </Collapse>
        )}
      </Card>
-      
+
      <Modal
        title={editingCable ? '编辑接线' : '新增接线'}
        open={modalVisible}
@@ -849,7 +879,7 @@ function CableManagement() {
                const searchText = `${device.name} ${device.deviceId}`.toLowerCase();
                return searchText.indexOf(input.toLowerCase()) >= 0;
              }}
-              onChange={(value) => {
+              onChange={value => {
                fetchDevicePorts(value);
                form.setFieldsValue({ sourcePort: undefined });
              }}
@@ -874,7 +904,8 @@ function CableManagement() {
                const ports = devicePorts[form.getFieldValue('sourceDeviceId')] || [];
                const port = ports.find(p => p.portName === option.value);
                if (!port) return false;
-                const searchText = `${port.portName} ${port.portType} ${port.portSpeed}`.toLowerCase();
+                const searchText =
+                  `${port.portName} ${port.portType} ${port.portSpeed}`.toLowerCase();
                return searchText.indexOf(input.toLowerCase()) >= 0;
              }}
              disabled={!form.getFieldValue('sourceDeviceId')}
@@ -901,7 +932,7 @@ function CableManagement() {
                const searchText = `${device.name} ${device.deviceId}`.toLowerCase();
                return searchText.indexOf(input.toLowerCase()) >= 0;
              }}
-              onChange={(value) => {
+              onChange={value => {
                fetchDevicePorts(value);
                form.setFieldsValue({ targetPort: undefined });
              }}
@@ -926,7 +957,8 @@ function CableManagement() {
                const ports = devicePorts[form.getFieldValue('targetDeviceId')] || [];
                const port = ports.find(p => p.portName === option.value);
                if (!port) return false;
-                const searchText = `${port.portName} ${port.portType} ${port.portSpeed}`.toLowerCase();
+                const searchText =
+                  `${port.portName} ${port.portType} ${port.portSpeed}`.toLowerCase();
                return searchText.indexOf(input.toLowerCase()) >= 0;
              }}
              disabled={!form.getFieldValue('targetDeviceId')}
@@ -951,14 +983,11 @@ function CableManagement() {
              <Option value="copper">铜缆</Option>
            </Select>
          </Form.Item>
-          
-          <Form.Item
-            name="cableLength"
-            label="线缆长度(米)"
-          >
+
+          <Form.Item name="cableLength" label="线缆长度(米)">
            <Input type="number" placeholder="请输入线缆长度" />
          </Form.Item>
-          
+
          <Form.Item
            name="status"
            label="状态"
@@ -971,16 +1000,13 @@ function CableManagement() {
              <Option value="disconnected">未连接</Option>
            </Select>
          </Form.Item>
-          
-          <Form.Item
-            name="description"
-            label="描述"
-          >
+
+          <Form.Item name="description" label="描述">
            <Input.TextArea rows={3} placeholder="请输入描述" />
          </Form.Item>
        </Form>
      </Modal>
-      
+
      <Modal
        title="批量导入接线"
        open={importModalVisible}
@@ -994,24 +1020,20 @@ function CableManagement() {
          <Button key="cancel" onClick={() => setImportModalVisible(false)}>
            取消
          </Button>,
-          <Button 
-            key="download" 
-            icon={<DownloadOutlined />} 
-            onClick={handleDownloadTemplate}
-          >
+          <Button key="download" icon={<DownloadOutlined />} onClick={handleDownloadTemplate}>
            下载模板
          </Button>,
-          <Button 
-            key="import" 
-            type="primary" 
-            icon={<ImportOutlined />} 
+          <Button
+            key="import"
+            type="primary"
+            icon={<ImportOutlined />}
            onClick={handleBatchImport}
            loading={importing}
            disabled={importPreview.length === 0}
            style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
          >
            开始导入
-          </Button>
+          </Button>,
        ]}
      >
        <div style={{ marginBottom: 16 }}>
@@ -1031,26 +1053,29 @@ function CableManagement() {
              <p className="ant-upload-hint">支持 .xlsx, .xls, .csv 格式</p>
            </Upload.Dragger>
          </div>
-          
+
          <div style={{ display: 'flex', gap: '12px', marginBottom: 16 }}>
-            <Checkbox checked={skipExisting} onChange={(e) => setSkipExisting(e.target.checked)}>
+            <Checkbox checked={skipExisting} onChange={e => setSkipExisting(e.target.checked)}>
              跳过已存在的接线
            </Checkbox>
-            <Checkbox checked={updateExisting} onChange={(e) => setUpdateExisting(e.target.checked)}>
+            <Checkbox checked={updateExisting} onChange={e => setUpdateExisting(e.target.checked)}>
              更新已存在的接线
            </Checkbox>
          </div>
-          
+
          {importPreview.length > 0 && (
            <>
              <div style={{ marginBottom: 16 }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 8,
+                  }}
+                >
                  <Text strong>数据预览（前10条）</Text>
-                  <Button 
-                    size="small" 
-                    icon={<DownloadOutlined />} 
-                    onClick={handleDownloadTemplate}
-                  >
+                  <Button size="small" icon={<DownloadOutlined />} onClick={handleDownloadTemplate}>
                    下载模板
                  </Button>
                </div>
@@ -1060,46 +1085,46 @@ function CableManagement() {
                      title: '源设备ID',
                      dataIndex: '源设备ID',
                      key: 'sourceDeviceId',
-                      width: 150
+                      width: 150,
                    },
                    {
                      title: '源设备端口',
                      dataIndex: '源设备端口',
                      key: 'sourcePort',
-                      width: 120
+                      width: 120,
                    },
                    {
                      title: '目标设备ID',
                      dataIndex: '目标设备ID',
                      key: 'targetDeviceId',
-                      width: 150
+                      width: 150,
                    },
                    {
                      title: '目标设备端口',
                      dataIndex: '目标设备端口',
                      key: 'targetPort',
-                      width: 120
+                      width: 120,
                    },
                    {
                      title: '线缆类型',
                      dataIndex: '线缆类型',
                      key: 'cableType',
                      width: 100,
-                      render: (type) => getCableTypeTag(type)
+                      render: type => getCableTypeTag(type),
                    },
                    {
                      title: '状态',
                      dataIndex: '状态',
                      key: 'status',
                      width: 100,
-                      render: (status) => getStatusTag(status)
+                      render: status => getStatusTag(status),
                    },
                    {
                      title: '描述',
                      dataIndex: '描述',
                      key: 'description',
-                      ellipsis: true
-                    }
+                      ellipsis: true,
+                    },
                  ]}
                  dataSource={importPreview.slice(0, 10)}
                  rowKey={(record, index) => index}
@@ -1108,7 +1133,7 @@ function CableManagement() {
                  scroll={{ x: 1000 }}
                />
              </div>
-              
+
              {importPreview.length > 10 && (
                <div style={{ textAlign: 'center', marginTop: 8 }}>
                  <Text type="secondary">仅显示前10条数据，共 {importPreview.length} 条</Text>
@@ -1116,17 +1141,17 @@ function CableManagement() {
              )}
            </>
          )}
-          
+
          {importing && (
            <div style={{ textAlign: 'center', padding: '24px' }}>
              <Spin size="large" tip="导入中..." />
              <div style={{ marginTop: 16 }}>
-                <Progress 
-                  percent={Math.round((importProgress.current / importProgress.total) * 100)} 
+                <Progress
+                  percent={Math.round((importProgress.current / importProgress.total) * 100)}
                  status="active"
                  strokeColor={{
                    '0%': designTokens.colors.primary.main,
-                    '100%': designTokens.colors.success.main
+                    '100%': designTokens.colors.success.main,
                  }}
                />
                <div style={{ marginTop: 8 }}>
@@ -1135,7 +1160,8 @@ function CableManagement() {
                  </Text>
                  {importProgress.current > 0 && (
                    <Text type="secondary">
-                      预计剩余时间：{Math.ceil((importProgress.total - importProgress.current) / 5)} 秒
+                      预计剩余时间：{Math.ceil((importProgress.total - importProgress.current) / 5)}{' '}
+                      秒
                    </Text>
                  )}
                </div>
@@ -1165,14 +1191,9 @@ function CableManagement() {
          >
            取消
          </Button>,
-          <Button
-            key="force"
-            type="primary"
-            danger
-            onClick={handleForceSubmit}
-          >
+          <Button key="force" type="primary" danger onClick={handleForceSubmit}>
            强制接管
-          </Button>
+          </Button>,
        ]}
        width={600}
      >
@@ -1190,7 +1211,11 @@ function CableManagement() {
              >
                <div style={{ marginBottom: 8 }}>
                  <Tag color="error">
-                    {conflict.type === 'source' ? '源端口' : conflict.type === 'target' ? '目标端口' : '端口'}
+                    {conflict.type === 'source'
+                      ? '源端口'
+                      : conflict.type === 'target'
+                        ? '目标端口'
+                        : '端口'}
                  </Tag>
                  <span style={{ fontWeight: 500, marginLeft: 8 }}>{conflict.port}</span>
                </div>
@@ -1199,11 +1224,15 @@ function CableManagement() {
                    <div>当前连接：</div>
                    <div style={{ marginTop: 4, paddingLeft: 12 }}>
                      <div>
-                        源设备：{conflict.existingCable.sourceDevice?.name || conflict.existingCable.sourceDeviceId}
+                        源设备：
+                        {conflict.existingCable.sourceDevice?.name ||
+                          conflict.existingCable.sourceDeviceId}
                        ({conflict.existingCable.sourcePort})
                      </div>
                      <div style={{ marginTop: 2 }}>
-                        目标设备：{conflict.existingCable.targetDevice?.name || conflict.existingCable.targetDeviceId}
+                        目标设备：
+                        {conflict.existingCable.targetDevice?.name ||
+                          conflict.existingCable.targetDeviceId}
                        ({conflict.existingCable.targetPort})
                      </div>
                      <div style={{ marginTop: 2 }}>
@@ -1214,7 +1243,15 @@ function CableManagement() {
                )}
              </Card>
            ))}
-            <div style={{ marginTop: 16, padding: 12, background: '#fff7ed', borderRadius: 6, border: '1px solid #fed7aa' }}>
+            <div
+              style={{
+                marginTop: 16,
+                padding: 12,
+                background: '#fff7ed',
+                borderRadius: 6,
+                border: '1px solid #fed7aa',
+              }}
+            >
              <span style={{ color: '#ea580c' }}>💡</span>
              <span style={{ marginLeft: 8, color: '#9a3412' }}>
                点击"强制接管"将断开原有连接并创建新接线。此操作不可恢复！