refactor(前端): 集中管理设计令牌和工具函数

frontend/src/components/CableCreateModal.jsx

@@ -2,21 +2,10 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { Modal, Form, Select, Input, Button, message, Space, Spin } from 'antd';
 import { SwapOutlined } from '@ant-design/icons';
 import axios from 'axios';
+import { debounce } from '../utils/common';
 
 const { Option } = Select;
 
-const debounce = (func, wait) => {
-  let timeout;
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-};
-
 const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
@@ -50,7 +39,6 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
     [fetchDevices]
   );
 
-  // Initialize when visible changes from false to true
   useEffect(() => {
     if (visible && !prevVisibleRef.current) {
       form.resetFields();
@@ -101,13 +89,11 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
       const values = await form.validateFields();
       setLoading(true);
 
-      // Logic to ensure Switch is always Source if possible (for Cable Management view consistency)
       const sourceDev = devices.find(d => d.deviceId === values.sourceDeviceId);
       const targetDev = devices.find(d => d.deviceId === values.targetDeviceId);
 
       let payload = { ...values };
 
-      // If Source is NOT Switch AND Target IS Switch, swap them
       if (sourceDev && targetDev && sourceDev.type !== 'switch' && targetDev.type === 'switch') {
         payload = {
           ...values,
@@ -148,135 +134,67 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
       maskClosable={false}
     >
       <Form form={form} layout="vertical">
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
-          {/* Source Side */}
-          <div style={{ padding: '12px', background: '#f9f9f9', borderRadius: '8px' }}>
-            <div style={{ marginBottom: 12, fontWeight: 500, color: '#666' }}>源设备 (起点)</div>
-            <Form.Item
-              name="sourceDeviceId"
-              label="设备"
-              rules={[{ required: true, message: '请选择源设备' }]}
-            >
-              <Select
-                placeholder="输入关键词搜索源设备"
-                showSearch
-                filterOption={false}
-                onSearch={handleDeviceSearch}
-                onDropdownVisibleChange={open => {
-                  if (open && devices.length === 0) {
-                    fetchDevices();
-                  }
-                }}
-                onChange={handleSourceDeviceChange}
-                loading={fetchingDevices}
-                disabled={!!sourceDevice}
-              >
-                {devices.map(d => (
-                  <Option key={d.deviceId} value={d.deviceId}>
-                    {d.name}
-                  </Option>
-                ))}
-              </Select>
-            </Form.Item>
-            <Form.Item
-              name="sourcePort"
-              label="端口"
-              rules={[{ required: true, message: '请选择源端口' }]}
-            >
-              <Select placeholder="选择源端口" showSearch>
-                {sourcePorts.map(p => (
-                  <Option key={p.portId} value={p.portName}>
-                    {p.portName} ({p.portType})
-                  </Option>
-                ))}
-              </Select>
-            </Form.Item>
-          </div>
+        <Form.Item label="源设备" name="sourceDeviceId" rules={[{ required: true, message: '请选择源设备' }]}>
+          <Select
+            showSearch
+            filterOption={false}
+            placeholder="搜索设备..."
+            onSearch={handleDeviceSearch}
+            onChange={handleSourceDeviceChange}
+          >
+            {devices.map(device => (
+              <Option key={device.deviceId} value={device.deviceId}>
+                {device.name} ({device.deviceId})
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
 
-          {/* Target Side */}
-          <div style={{ padding: '12px', background: '#f9f9f9', borderRadius: '8px' }}>
-            <div style={{ marginBottom: 12, fontWeight: 500, color: '#666' }}>目标设备 (终点)</div>
-            <Form.Item
-              name="targetDeviceId"
-              label="设备"
-              rules={[{ required: true, message: '请选择目标设备' }]}
-            >
-              <Select
-                placeholder="输入关键词搜索目标设备"
-                showSearch
-                filterOption={false}
-                onSearch={handleDeviceSearch}
-                onDropdownVisibleChange={open => {
-                  if (open && devices.length === 0) {
-                    fetchDevices();
-                  }
-                }}
-                onChange={handleTargetDeviceChange}
-                loading={fetchingDevices}
-              >
-                {devices
-                  .filter(d => d.deviceId !== form.getFieldValue('sourceDeviceId'))
-                  .map(d => (
-                    <Option key={d.deviceId} value={d.deviceId}>
-                      {d.name}
-                    </Option>
-                  ))}
-              </Select>
-            </Form.Item>
-            <Form.Item
-              name="targetPort"
-              label="端口"
-              rules={[{ required: true, message: '请选择目标端口' }]}
-            >
-              <Select
-                placeholder="选择目标端口"
-                showSearch
-                disabled={!form.getFieldValue('targetDeviceId')}
-              >
-                {targetPorts.map(p => (
-                  <Option key={p.portId} value={p.portName}>
-                    {p.portName} ({p.portType})
-                  </Option>
-                ))}
-              </Select>
-            </Form.Item>
-          </div>
-        </div>
+        <Form.Item label="源端口" name="sourcePort" rules={[{ required: true, message: '请选择源端口' }]}>
+          <Select
+            placeholder="请先选择设备"
+            disabled={!sourcePorts.length}
+          >
+            {sourcePorts.map(port => (
+              <Option key={port.portId} value={port.portName}>
+                {port.portName}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
 
-        <div style={{ marginTop: 16 }}>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
-            <Form.Item
-              name="cableType"
-              label="线缆类型"
-              initialValue="ethernet"
-              rules={[{ required: true }]}
-            >
-              <Select>
-                <Option value="ethernet">网线</Option>
-                <Option value="fiber">光纤</Option>
-                <Option value="copper">铜缆</Option>
-              </Select>
-            </Form.Item>
-            <Form.Item
-              name="status"
-              label="状态"
-              initialValue="normal"
-              rules={[{ required: true }]}
-            >
-              <Select>
-                <Option value="normal">正常</Option>
-                <Option value="fault">故障</Option>
-                <Option value="disconnected">未连接</Option>
-              </Select>
-            </Form.Item>
-            <Form.Item name="cableLength" label="长度 (米)">
-              <Input type="number" min={0} />
-            </Form.Item>
-          </div>
-          <Form.Item name="description" label="描述">
-            <Input.TextArea rows={2} />
-          </Form.Item>
-        </div>
+        <Form.Item label="目标设备" name="targetDeviceId" rules={[{ required: true, message: '请选择目标设备' }]}>
+          <Select
+            showSearch
+            filterOption={false}
+            placeholder="搜索设备..."
+            onSearch={handleDeviceSearch}
+            onChange={handleTargetDeviceChange}
+          >
+            {devices.map(device => (
+              <Option key={device.deviceId} value={device.deviceId}>
+                {device.name} ({device.deviceId})
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+
+        <Form.Item label="目标端口" name="targetPort" rules={[{ required: true, message: '请选择目标端口' }]}>
+          <Select
+            placeholder="请先选择设备"
+            disabled={!targetPorts.length}
+          >
+            {targetPorts.map(port => (
+              <Option key={port.portId} value={port.portName}>
+                {port.portName}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+
+        <Form.Item label="备注" name="notes">
+          <Input.TextArea placeholder="接线备注信息" rows={2} />
+        </Form.Item>
       </Form>
     </Modal>
   );

frontend/src/components/DeviceDetailDrawer.jsx

@@ -33,25 +33,11 @@ import {
 } from '@ant-design/icons';
 import NetworkCardPanel from './NetworkCardPanel';
 import { deviceAPI } from '../api';
+import { designTokens } from '../config/theme';
 import dayjs from 'dayjs';
 
 const { Text, Title } = Typography;
 
-const designTokens = {
-  colors: {
-    primary: '#1890ff',
-    success: '#52c41a',
-    error: '#f5222d',
-    warning: '#faad14',
-    info: '#13c2c2',
-    gray: '#8c8c8c',
-    bgLight: '#f6ffed',
-    bgBlue: '#e6f7ff',
-    bgGray: '#f5f5f5',
-    bgOrange: '#fff7e6',
-  },
-};
-
 function DeviceDetailDrawer({
   device,
   visible,

frontend/src/components/NetworkCardCreateModal.jsx

@@ -2,21 +2,11 @@ import React, { useState, useCallback } from 'react';
 import { Modal, Form, Input, InputNumber, Select, message, Space, Tooltip } from 'antd';
 import { PlusOutlined, InfoCircleOutlined, CloudServerOutlined } from '@ant-design/icons';
 import axios from 'axios';
+import { designTokens } from '../config/theme';
 
 const { Option } = Select;
 const { TextArea } = Input;
 
-const designTokens = {
-  colors: {
-    primary: {
-      main: '#667eea',
-    },
-  },
-  borderRadius: {
-    medium: '10px',
-  },
-};
-
 function NetworkCardCreateModal({ device, visible, onClose, onSuccess }) {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);

frontend/src/components/NetworkCardPanel.jsx

@@ -23,20 +23,10 @@ import {
 import axios from 'axios';
 import PortCreateModal from './PortCreateModal';
 import NetworkCardCreateModal from './NetworkCardCreateModal';
+import { designTokens } from '../config/theme';
 
 const { Panel } = Collapse;
 
-const designTokens = {
-  colors: {
-    primary: {
-      main: '#667eea',
-    },
-    success: '#10b981',
-    error: '#ef4444',
-    warning: '#f59e0b',
-  },
-};
-
 function NetworkCardPanel({ deviceId, deviceName, onRefresh, refreshTrigger }) {
   const [cards, setCards] = useState([]);
   const [networkCards, setNetworkCards] = useState([]);

frontend/src/components/PortCreateModal.jsx

@@ -14,22 +14,11 @@ import {
 } from 'antd';
 import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import axios from 'axios';
+import { designTokens } from '../config/theme';
 
 const { Option } = Select;
 const { TextArea } = Input;
 
-const designTokens = {
-  colors: {
-    primary: {
-      main: '#667eea',
-      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-    },
-  },
-  borderRadius: {
-    medium: '10px',
-  },
-};
-
 function parsePortRange(portName) {
   if (!portName || typeof portName !== 'string') {
     return null;

frontend/src/components/PortManagementPanel.jsx

@@ -9,17 +9,7 @@ import {
 } from '@ant-design/icons';
 import axios from 'axios';
 import PortCreateModal from './PortCreateModal';
-
-const designTokens = {
-  colors: {
-    primary: {
-      main: '#667eea',
-    },
-    success: '#10b981',
-    error: '#ef4444',
-    warning: '#f59e0b',
-  },
-};
+import { designTokens } from '../config/theme';
 
 function PortManagementPanel({ deviceId, deviceName, onRefresh }) {
   const [ports, setPorts] = useState([]);

frontend/src/components/ServerBackplanePanel.jsx

@@ -13,20 +13,10 @@ import {
 } from '@ant-design/icons';
 import PortPanel from './PortPanel';
 import axios from 'axios';
+import { designTokens } from '../config/theme';
 
 const { Text } = Typography;
 
-const designTokens = {
-  colors: {
-    primary: { main: '#667eea', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
-    success: '#10b981',
-    error: '#ef4444',
-    warning: '#f59e0b',
-    metal: { light: '#9ca3af', DEFAULT: '#6b7280', dark: '#4b5563' },
-    slot: { empty: '#d1d5db', occupied: '#3b82f6' },
-  },
-};
-
 /**
  * 服务器背板可视化组件
  * 按照真实服务器背板布局展示网卡和端口