feat(线缆管理): 新增向导式接线创建功能

- 新增四步向导流程，简化接线创建过程
- 添加线缆标签、颜色、安装信息等新字段
- 实现端口可视化面板和冲突检测功能
- 新增耗材日志设备关联字段
- 添加耗材导入后台任务管理
- 更新线缆管理文档和使用指南

frontend/src/pages/CableManagement.jsx

@@ -54,6 +54,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { designTokens } from '../config/theme';
 import { debounce } from '../utils/common';
 import CloseButton from '../components/CloseButton';
+import CableWizardModal from '../components/CableWizardModal';
 
 const { Option } = Select;
 const { Panel } = Collapse;
@@ -127,6 +128,9 @@ function CableManagement() {
   const [editingCable, setEditingCable] = useState(null);
   const [form] = Form.useForm();
 
+  const [wizardVisible, setWizardVisible] = useState(false);
+  const [wizardInitialSourceDevice, setWizardInitialSourceDevice] = useState(null);
+
   const [importModalVisible, setImportModalVisible] = useState(false);
   const [importFileList, setImportFileList] = useState([]);
   const [importPreview, setImportPreview] = useState([]);
@@ -284,24 +288,14 @@ function CableManagement() {
   };
 
   const handleAdd = () => {
-    setEditingCable(null);
-    form.resetFields();
-    setModalVisible(true);
+    setWizardInitialSourceDevice(null);
+    setWizardVisible(true);
   };
 
   const handleEdit = cable => {
     setEditingCable(cable);
-    form.setFieldsValue({
-      sourceDeviceId: cable.sourceDeviceId,
-      sourcePort: cable.sourcePort,
-      targetDeviceId: cable.targetDeviceId,
-      targetPort: cable.targetPort,
-      cableType: cable.cableType,
-      cableLength: cable.cableLength,
-      status: cable.status,
-      description: cable.description,
-    });
-    setModalVisible(true);
+    setWizardInitialSourceDevice(null);
+    setWizardVisible(true);
   };
 
   const handleDelete = async cableId => {
@@ -1243,9 +1237,8 @@ function CableManagement() {
                             type="text"
                             icon={<PlusOutlined />}
                             onClick={() => {
-                              setEditingCable(null);
-                              form.setFieldsValue({ sourceDeviceId: switchId });
-                              setModalVisible(true);
+                              setWizardInitialSourceDevice(switchData.switch);
+                              setWizardVisible(true);
                             }}
                             style={{ color: designTokens.colors.primary.main }}
                           />
@@ -1510,6 +1503,22 @@ function CableManagement() {
         </Form>
       </Modal>
 
+      {/* 向导式接线创建弹窗 */}
+      <CableWizardModal
+        visible={wizardVisible}
+        onClose={() => {
+          setWizardVisible(false);
+          setWizardInitialSourceDevice(null);
+          setEditingCable(null);
+        }}
+        onSuccess={() => {
+          setEditingCable(null);
+          fetchCables();
+        }}
+        initialSourceDevice={wizardInitialSourceDevice}
+        editingCable={editingCable}
+      />
+
       {/* 批量导入弹窗 */}
       <Modal
         title={