refactor(模型关系): 重构模型关联关系定义位置，从模型文件移至路由文件

frontend/src/components/CableCreateModal.jsx

@@ -13,20 +13,27 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
   const [sourcePorts, setSourcePorts] = useState([]);
   const [targetPorts, setTargetPorts] = useState([]);
   const [fetchingDevices, setFetchingDevices] = useState(false);
-  const prevVisibleRef = useRef(false);
+  const devicesRef = useRef([]);
 
   const fetchDevices = useCallback(async (keyword = '') => {
     try {
       setFetchingDevices(true);
-      const params = { pageSize: 50 };
+      const params = { pageSize: 100 };
       if (keyword && keyword.trim()) {
         params.keyword = keyword.trim();
       }
+      console.log('[CableCreateModal] Fetching devices with params:', params);
       const response = await axios.get('/api/devices', { params });
-      setDevices(response.data.devices || []);
+      console.log('[CableCreateModal] API response:', response.data);
+      const deviceList = response.data.devices || [];
+      console.log('[CableCreateModal] Device list:', deviceList.length, 'devices');
+      setDevices(deviceList);
+      devicesRef.current = deviceList;
+      return deviceList;
     } catch (error) {
-      console.error('Failed to fetch devices:', error);
+      console.error('[CableCreateModal] Failed to fetch devices:', error);
       message.error('获取设备列表失败');
+      return [];
     } finally {
       setFetchingDevices(false);
     }
@@ -40,18 +47,32 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
   );
 
   useEffect(() => {
-    if (visible && !prevVisibleRef.current) {
+    if (visible) {
+      console.log('[CableCreateModal] Modal opened, sourceDevice:', sourceDevice);
       form.resetFields();
-      if (sourceDevice) {
-        form.setFieldsValue({
-          sourceDeviceId: sourceDevice.deviceId || sourceDevice.id,
-        });
-        fetchDevicePorts(sourceDevice.deviceId || sourceDevice.id, 'source');
-      }
-      fetchDevices();
+      setSourcePorts([]);
+      setTargetPorts([]);
+      setDevices([]);
+      devicesRef.current = [];
+      
+      fetchDevices().then(deviceList => {
+        console.log('[CableCreateModal] Devices fetched:', deviceList.length);
+        const sourceDeviceId = sourceDevice?.deviceId || sourceDevice?.id;
+        console.log('[CableCreateModal] sourceDeviceId:', sourceDeviceId);
+        if (sourceDeviceId && deviceList.length > 0) {
+          const deviceExists = deviceList.some(d => d.deviceId === sourceDeviceId);
+          console.log('[CableCreateModal] Device exists in list:', deviceExists);
+          if (deviceExists) {
+            console.log('[CableCreateModal] Setting form value:', sourceDeviceId);
+            form.setFieldsValue({
+              sourceDeviceId: sourceDeviceId,
+            });
+            fetchDevicePorts(sourceDeviceId, 'source');
+          }
+        }
+      });
     }
-    prevVisibleRef.current = visible;
-  }, [visible, sourceDevice, form, fetchDevices]);
+  }, [visible, sourceDevice?.deviceId, sourceDevice?.id, form, fetchDevices]);
 
   const fetchDevicePorts = async (deviceId, type) => {
     if (!deviceId) {
@@ -138,9 +159,11 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
           <Select
             showSearch
             filterOption={false}
-            placeholder="搜索设备..."
+            placeholder={fetchingDevices ? '加载中...' : '搜索设备...'}
+            loading={fetchingDevices}
             onSearch={handleDeviceSearch}
             onChange={handleSourceDeviceChange}
+            notFoundContent={fetchingDevices ? <Spin size="small" /> : '暂无数据'}
           >
             {devices.map(device => (
               <Option key={device.deviceId} value={device.deviceId}>
@@ -167,9 +190,11 @@ const CableCreateModal = ({ visible, onClose, onSuccess, sourceDevice }) => {
           <Select
             showSearch
             filterOption={false}
-            placeholder="搜索设备..."
+            placeholder={fetchingDevices ? '加载中...' : '搜索设备...'}
+            loading={fetchingDevices}
             onSearch={handleDeviceSearch}
             onChange={handleTargetDeviceChange}
+            notFoundContent={fetchingDevices ? <Spin size="small" /> : '暂无数据'}
           >
             {devices.map(device => (
               <Option key={device.deviceId} value={device.deviceId}>

frontend/src/config/theme.js

@@ -110,6 +110,17 @@ export const designTokens = {
       date: '#06b6d4',
       textarea: '#64748b',
     },
+    slot: {
+      empty: '#4b5563',
+      occupied: '#3b82f6',
+      warning: '#f59e0b',
+      error: '#ef4444',
+    },
+    metal: {
+      light: '#9ca3af',
+      medium: '#6b7280',
+      dark: '#374151',
+    },
   },
   shadows: {
     small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',

frontend/src/pages/CableManagement.jsx

@@ -206,18 +206,36 @@ function CableManagement() {
   const fetchDevices = useCallback(async (keyword = '') => {
     try {
       setDeviceSearching(true);
-      const params = { pageSize: 50 };
+      
+      // 并行获取所有设备和交换机设备
+      const params = { pageSize: 1000 };
       if (keyword && keyword.trim()) {
         params.keyword = keyword.trim();
       }
-      const response = await axios.get('/api/devices', { params });
-      const allDevices = response.data.devices || [];
-      const switches = allDevices.filter(device => device.type === 'switch');
+      
+      const [allResponse, switchResponse] = await Promise.all([
+        axios.get('/api/devices', { params }),
+        axios.get('/api/devices', { params: { ...params, type: 'switch' } })
+      ]);
+      
+      const allDevices = allResponse.data.devices || [];
+      const switchDevices = switchResponse.data.devices || [];
+      
+      // 统计各类型设备数量
+      const typeCount = {};
+      allDevices.forEach(d => {
+        const t = d.type || 'undefined';
+        typeCount[t] = (typeCount[t] || 0) + 1;
+      });
+      console.log('[CableManagement] 设备类型统计:', typeCount);
+      console.log('[CableManagement] All devices:', allDevices.length);
+      console.log('[CableManagement] Switch devices (from API):', switchDevices.length);
+      
       setDevices(allDevices);
-      setSwitchDevices(switches);
+      setSwitchDevices(switchDevices);
     } catch (error) {
       message.error('获取设备列表失败');
-      console.error('获取设备列表失败:', error);
+      console.error('[CableManagement] 获取设备列表失败:', error);
     } finally {
       setDeviceSearching(false);
     }
@@ -1244,7 +1262,7 @@ function CableManagement() {
                   rules={[{ required: true, message: '请选择源设备' }]}
                 >
                   <Select
-                    placeholder="输入关键词搜索源设备"
+                    placeholder="输入关键词搜索交换机"
                     showSearch
                     loading={deviceSearching}
                     filterOption={false}