refactor: 给Canvas解耦合

src/components/LabCanvas/ComponentSelector.vue

@@ -258,7 +258,7 @@ async function loadComponentModule(type: string) {
   if (!componentModules.value[type]) {
     try {
       // 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
-      const module = await import(`../components/equipments/${type}.vue`);
+      const module = await import(`@/components/equipments/${type}.vue`);
 
       // 将模块添加到缓存中
       componentModules.value = {

src/components/LabCanvas/DiagramCanvas.vue

@@ -83,7 +83,8 @@
           }
         ">
         <!-- 动态渲染组件 -->
-        <component :is="getComponentDefinition(component.type)" v-if="props.componentModules[component.type]"
+        <component :is="getComponentDefinition(component.type)" 
+          v-if="props.componentModules[component.type] && getComponentDefinition(component.type)"
           v-bind="prepareComponentProps(component.attrs || {}, component.id)" @update:bindKey="
             (value: string) =>
               updateComponentProp(component.id, 'bindKey', value)
@@ -98,6 +99,7 @@
           <div class="flex flex-col items-center">
             <div class="loading loading-spinner loading-xs mb-1"></div>
             <span>Loading {{ component.type }}...</span>
+            <small class="mt-1 text-xs">{{ props.componentModules[component.type] ? 'Module loaded but invalid' : 'Module not found' }}</small>
           </div>
         </div>
       </div>
@@ -159,6 +161,7 @@ import type {
 } from "./diagramManager";
 
 import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
+import { useComponentManager } from "./componentManager";
 
 // 右键菜单处理函数
 function handleContextMenu(e: MouseEvent) {
@@ -168,13 +171,9 @@ function handleContextMenu(e: MouseEvent) {
 // 定义组件发出的事件
 const emit = defineEmits([
   "diagram-updated",
-  "component-selected",
-  "component-moved",
-  "component-delete",
   "toggle-doc-panel",
   "wire-created",
   "wire-deleted",
-  "load-component-module",
   "open-components",
 ]);
 
@@ -184,6 +183,12 @@ const props = defineProps<{
   showDocPanel?: boolean; // 添加属性接收文档面板的显示状态
 }>();
 
+// 获取componentManager实例
+const componentManager = useComponentManager();
+if (!componentManager) {
+  throw new Error("DiagramCanvas must be used within a component manager provider");
+}
+
 // --- 画布状态 ---
 const canvasContainer = ref<HTMLElement | null>(null);
 const canvas = ref<HTMLElement | null>(null);
@@ -365,7 +370,13 @@ function onZoom(e: WheelEvent) {
 // --- 动态组件渲染 ---
 const getComponentDefinition = (type: string) => {
   const module = props.componentModules[type];
-  if (!module) return null;
+  
+  if (!module) {
+    console.warn(`No module found for component type: ${type}`);
+    // 尝试异步加载组件模块
+    loadComponentModule(type);
+    return null;
+  }
 
   // 确保我们返回一个有效的组件定义
   if (module.default) {
@@ -414,8 +425,12 @@ function resetComponentRefs() {
 async function loadComponentModule(type: string) {
   if (!props.componentModules[type]) {
     try {
-      // 通知父组件需要加载此类型的组件
-      emit("load-component-module", type);
+      // 直接通过componentManager加载组件模块
+      if (componentManager) {
+        await componentManager.loadComponentModule(type);
+        // 强制更新当前组件，确保新加载的模块能被识别
+        console.log(`Component module ${type} loaded successfully`);
+      }
     } catch (error) {
       console.error(`Failed to request component module ${type}:`, error);
     }
@@ -428,7 +443,10 @@ function handleCanvasMouseDown(e: MouseEvent) {
   if (e.target === canvasContainer.value || e.target === canvas.value) {
     if (selectedComponentId.value !== null) {
       selectedComponentId.value = null;
-      emit("component-selected", null);
+      // 直接通过componentManager选择组件
+      if (componentManager) {
+        componentManager.selectComponent(null);
+      }
     }
   }
 
@@ -505,7 +523,10 @@ function startComponentDrag(e: MouseEvent, component: DiagramPart) {
   // 仍然选中组件，无论是否为交互元素
   if (selectedComponentId.value !== component.id) {
     selectedComponentId.value = component.id;
-    emit("component-selected", component);
+    // 直接通过componentManager选择组件
+    if (componentManager) {
+      componentManager.selectComponent(component);
+    }
   }
 
   // 如果组件锁定位置或是交互元素，则不启动拖拽
@@ -600,12 +621,14 @@ function onComponentDrag(e: MouseEvent) {
     }
   }
 
-  // 通知父组件位置已更新
-  emit("component-moved", {
-    id: draggingComponentId.value,
-    x: Math.round(newX),
-    y: Math.round(newY),
-  });
+  // 通知componentManager位置已更新
+  if (componentManager) {
+    componentManager.moveComponent({
+      id: draggingComponentId.value,
+      x: Math.round(newX),
+      y: Math.round(newY),
+    });
+  }
 
   // 通知图表已更新
   emit("diagram-updated", diagramData.value);
@@ -634,14 +657,20 @@ function updateComponentProp(
   propName: string,
   value: any,
 ) {
-  diagramData.value = updatePartAttribute(
-    diagramData.value,
-    componentId,
-    propName,
-    value,
-  );
-  emit("diagram-updated", diagramData.value);
-  saveDiagramData(diagramData.value);
+  // 直接通过componentManager更新组件属性
+  if (componentManager) {
+    componentManager.updateComponentProp(componentId, propName, value);
+  } else {
+    // 后备方案：直接更新数据
+    diagramData.value = updatePartAttribute(
+      diagramData.value,
+      componentId,
+      propName,
+      value,
+    );
+    emit("diagram-updated", diagramData.value);
+    saveDiagramData(diagramData.value);
+  }
 }
 
 // --- 连线操作 ---
@@ -871,7 +900,10 @@ function deleteWire(wireIndex: number) {
 // 删除组件
 function deleteComponent(componentId: string) {
   diagramData.value = deletePart(diagramData.value, componentId);
-  emit("component-delete", componentId);
+  // 直接通过componentManager删除组件
+  if (componentManager) {
+    componentManager.deleteComponent(componentId);
+  }
   emit("diagram-updated", diagramData.value);
   saveDiagramData(diagramData.value);
 
@@ -1024,6 +1056,24 @@ onMounted(async () => {
   // 重置组件引用
   resetComponentRefs();
 
+  // 设置componentManager的画布引用
+  if (componentManager) {
+    // 创建一个包含必要方法的画布API对象
+    const canvasAPI = {
+      getDiagramData: () => diagramData.value,
+      updateDiagramDataDirectly: (data: DiagramData) => {
+        diagramData.value = data;
+        saveDiagramData(data);
+        emit("diagram-updated", data);
+      },
+      getCanvasPosition: () => ({ x: position.x, y: position.y }),
+      getScale: () => scale.value,
+      $el: canvasContainer.value,
+      showToast
+    };
+    componentManager.setCanvasRef(canvasAPI);
+  }
+
   // 加载图表数据
   try {
     diagramData.value = await loadDiagramData();
@@ -1039,12 +1089,10 @@ onMounted(async () => {
       Array.from(componentTypes),
     );
 
-    // 通知父组件需要加载组件模块
-    componentTypes.forEach((type) => {
-      if (!props.componentModules[type]) {
-        emit("load-component-module", type);
-      }
-    });
+    // 直接通过componentManager预加载组件模块
+    if (componentManager) {
+      await componentManager.preloadComponentModules(Array.from(componentTypes));
+    }
   } catch (error) {
     console.error("加载图表数据失败:", error);
   }
@@ -1115,7 +1163,7 @@ function updateDiagramDataDirectly(data: DiagramData) {
   emit("diagram-updated", data);
 }
 
-// 暴露方法给父组件
+// 暴露方法给父组件 - 简化版本，主要用于数据访问
 defineExpose({
   // 基本数据操作
   getDiagramData: () => diagramData.value,
@@ -1154,23 +1202,6 @@ defineExpose({
     });
   },
 
-  // 文件操作
-  openDiagramFileSelector,
-  exportDiagram,
-
-  // 组件操作
-  getSelectedComponent: () => {
-    if (!selectedComponentId.value) return null;
-    return (
-      diagramParts.value.find((p) => p.id === selectedComponentId.value) || null
-    );
-  },
-  deleteSelectedComponent: () => {
-    if (selectedComponentId.value) {
-      deleteComponent(selectedComponentId.value);
-    }
-  },
-
   // 画布状态
   getCanvasPosition: () => ({ x: position.x, y: position.y }),
   getScale: () => scale.value,

src/components/LabCanvas/README.md

@@ -0,0 +1,75 @@
+# 组件管理器重构
+
+这次重构将 ProjectView 中关于组件和模板的增删查改逻辑抽取到了独立的服务中，使代码更加模块化和可维护。
+
+## 新增文件
+
+### `/src/components/LabCanvas/componentManager.ts`
+使用 VueUse 的 `createInjectionState` 创建的组件管理服务，包含以下功能：
+
+#### 状态管理
+- `componentModules`: 存储动态导入的组件模块
+- `selectedComponentId`: 当前选中的组件ID
+- `selectedComponentData`: 当前选中的组件数据（计算属性）
+- `selectedComponentConfig`: 当前选中组件的配置信息
+
+#### 核心方法
+- `loadComponentModule(type: string)`: 动态加载组件模块
+- `preloadComponentModules(types: string[])`: 预加载多个组件模块
+- `addComponent(componentData)`: 添加新组件到画布
+- `addTemplate(templateData)`: 添加模板到画布
+- `deleteComponent(componentId)`: 删除组件及其相关连接
+- `selectComponent(componentData)`: 选中组件并生成配置
+- `updateComponentProp()`: 更新组件属性
+- `updateComponentDirectProp()`: 更新组件直接属性
+- `moveComponent()`: 移动组件位置
+
+### `/src/components/LabCanvas/index.ts`
+统一导出文件，提供清晰的模块接口：
+- 导出组件管理器的 hooks
+- 导出类型定义
+
+## 重构后的 ProjectView
+
+现在 ProjectView 仅负责：
+
+### 页面UI状态管理
+- 文档面板的显示/隐藏
+- 组件选择器的显示/隐藏
+- 通知消息的显示
+
+### 文档相关功能
+- 加载和显示教程文档
+- 文档面板的切换动画
+
+### 事件委托
+- 将所有组件操作事件委托给组件管理器处理
+- 保持简洁的事件处理逻辑
+
+## 使用方式
+
+在需要使用组件管理功能的地方：
+
+```typescript
+// 提供服务（通常在父组件中）
+import { useProvideComponentManager } from "@/components/LabCanvas";
+const componentManager = useProvideComponentManager();
+
+// 消费服务（在子组件中）
+import { useComponentManager } from "@/components/LabCanvas";
+const componentManager = useComponentManager(); // 如果未提供则会报错
+```
+
+## 优势
+
+1. **关注点分离**: ProjectView 专注于页面动画和UI状态，组件管理逻辑独立
+2. **可重用性**: componentManager 可以在其他页面或组件中复用
+3. **可测试性**: 组件管理逻辑可以独立进行单元测试
+4. **类型安全**: 完整的 TypeScript 类型支持
+5. **依赖注入**: 使用 VueUse 的注入机制，避免 prop drilling
+
+## 注意事项
+
+- 组件管理器需要在使用前通过 `useProvideComponentManager` 提供
+- 画布引用需要通过 `setCanvasRef` 设置
+- 初始化需要调用 `initialize` 方法

src/components/LabCanvas/componentManager.ts

@@ -0,0 +1,531 @@
+import { ref, shallowRef, computed } from "vue";
+import { createInjectionState } from "@vueuse/core";
+import type { DiagramData, DiagramPart } from "./diagramManager";
+import type { PropertyConfig } from "@/components/equipments/componentConfig";
+import {
+  generatePropertyConfigs,
+  generatePropsFromDefault,
+  generatePropsFromAttrs,
+} from "@/components/equipments/componentConfig";
+
+// 存储动态导入的组件模块
+interface ComponentModule {
+  default: any;
+  getDefaultProps?: () => Record<string, any>;
+  config?: {
+    props?: Array<PropertyConfig>;
+  };
+}
+
+// 定义组件管理器的状态和方法
+const [useProvideComponentManager, useComponentManager] = createInjectionState(
+  () => {
+    // --- 状态管理 ---
+    const componentModules = ref<Record<string, ComponentModule>>({});
+    const selectedComponentId = ref<string | null>(null);
+    const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(null);
+    const diagramCanvas = ref(null);
+
+    // 计算当前选中的组件数据
+    const selectedComponentData = computed(() => {
+      if (!diagramCanvas.value || !selectedComponentId.value) return null;
+      
+      const canvasInstance = diagramCanvas.value as any;
+      if (canvasInstance && canvasInstance.getDiagramData) {
+        const data = canvasInstance.getDiagramData();
+        return data.parts.find((p: DiagramPart) => p.id === selectedComponentId.value) || null;
+      }
+      return null;
+    });
+
+    // --- 组件模块管理 ---
+    
+    /**
+     * 动态加载组件模块
+     */
+    async function loadComponentModule(type: string) {
+      console.log(`尝试加载组件模块: ${type}`);
+      console.log(`当前已加载的模块:`, Object.keys(componentModules.value));
+      
+      if (!componentModules.value[type]) {
+        try {
+          console.log(`正在动态导入模块: @/components/equipments/${type}.vue`);
+          const module = await import(`@/components/equipments/${type}.vue`);
+          console.log(`成功导入模块 ${type}:`, module);
+          
+          // 直接设置新的对象引用以触发响应性
+          componentModules.value = {
+            ...componentModules.value,
+            [type]: module,
+          };
+          console.log(`模块 ${type} 已添加到 componentModules`);
+          console.log(`更新后的模块列表:`, Object.keys(componentModules.value));
+        } catch (error) {
+          console.error(`Failed to load component module ${type}:`, error);
+          return null;
+        }
+      } else {
+        console.log(`模块 ${type} 已经存在`);
+      }
+      return componentModules.value[type];
+    }
+
+    /**
+     * 预加载所有组件模块
+     */
+    async function preloadComponentModules(componentTypes: string[]) {
+      console.log("Preloading component modules:", componentTypes);
+      await Promise.all(
+        componentTypes.map((type) => loadComponentModule(type))
+      );
+      console.log("All component modules loaded");
+    }
+
+    // --- 组件操作 ---
+
+    /**
+     * 添加新组件到画布
+     */
+    async function addComponent(componentData: {
+      type: string;
+      name: string;
+      props: Record<string, any>;
+    }) {
+      console.log("=== 开始添加组件 ===");
+      console.log("组件数据:", componentData);
+      
+      const canvasInstance = diagramCanvas.value as any;
+      if (!canvasInstance) {
+        console.error("没有可用的画布实例");
+        return;
+      }
+
+      // 预加载组件模块，确保组件能正常渲染
+      console.log(`预加载组件模块: ${componentData.type}`);
+      const componentModule = await loadComponentModule(componentData.type);
+      if (!componentModule) {
+        console.error(`无法加载组件模块: ${componentData.type}`);
+        return;
+      }
+      console.log(`组件模块加载成功: ${componentData.type}`, componentModule);
+
+      // 获取画布位置信息
+      let position = { x: 100, y: 100 };
+      let scale = 1;
+
+      try {
+        if (canvasInstance.getCanvasPosition && canvasInstance.getScale) {
+          position = canvasInstance.getCanvasPosition();
+          scale = canvasInstance.getScale();
+
+          const canvasContainer = canvasInstance.$el as HTMLElement;
+          if (canvasContainer) {
+            const viewportWidth = canvasContainer.clientWidth;
+            const viewportHeight = canvasContainer.clientHeight;
+
+            position.x = (viewportWidth / 2 - position.x) / scale;
+            position.y = (viewportHeight / 2 - position.y) / scale;
+          }
+        }
+      } catch (error) {
+        console.error("获取画布位置时出错:", error);
+      }
+
+      // 添加随机偏移
+      const offsetX = Math.floor(Math.random() * 100) - 50;
+      const offsetY = Math.floor(Math.random() * 100) - 50;
+
+      // 获取组件能力页面
+      let capsPage = null;
+      if (
+        componentModule &&
+        componentModule.default &&
+        typeof componentModule.default.getCapabilities === "function"
+      ) {
+        try {
+          capsPage = componentModule.default.getCapabilities();
+          console.log(`获取到${componentData.type}组件的能力页面`);
+        } catch (error) {
+          console.error(`获取${componentData.type}组件能力页面失败:`, error);
+        }
+      }
+
+      // 创建新组件
+      const newComponent: DiagramPart = {
+        id: `component-${Date.now()}`,
+        type: componentData.type,
+        x: Math.round(position.x + offsetX),
+        y: Math.round(position.y + offsetY),
+        attrs: componentData.props,
+        rotate: 0,
+        group: "",
+        positionlock: false,
+        hidepins: true,
+        isOn: true,
+        index: 0,
+      };
+
+      // 通过画布实例添加组件
+      if (canvasInstance.getDiagramData && canvasInstance.updateDiagramDataDirectly) {
+        const currentData = canvasInstance.getDiagramData();
+        currentData.parts.push(newComponent);
+        
+        // 使用 updateDiagramDataDirectly 避免触发加载状态
+        canvasInstance.updateDiagramDataDirectly(currentData);
+        
+        console.log("组件添加完成:", newComponent);
+        
+        // 等待Vue的下一个tick，确保组件模块已经更新
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+    }
+
+    /**
+     * 添加模板到画布
+     */
+    async function addTemplate(templateData: {
+      id: string;
+      name: string;
+      template: any;
+    }) {
+      console.log("添加模板:", templateData);
+      
+      const canvasInstance = diagramCanvas.value as any;
+      if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
+        console.error("没有可用的画布实例添加模板");
+        return;
+      }
+
+      const currentData = canvasInstance.getDiagramData();
+      console.log("=== 当前图表组件数量:", currentData.parts.length);
+
+      // 生成唯一ID前缀
+      const idPrefix = `template-${Date.now()}-`;
+
+      if (templateData.template?.parts) {
+        // 获取视口中心位置
+        let viewportCenter = { x: 300, y: 200 };
+        try {
+          if (canvasInstance.getCanvasPosition && canvasInstance.getScale) {
+            const position = canvasInstance.getCanvasPosition();
+            const scale = canvasInstance.getScale();
+            const canvasContainer = canvasInstance.$el as HTMLElement;
+            
+            if (canvasContainer) {
+              const viewportWidth = canvasContainer.clientWidth;
+              const viewportHeight = canvasContainer.clientHeight;
+              viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
+              viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
+            }
+          }
+        } catch (error) {
+          console.error("获取视口中心位置时出错:", error);
+        }
+
+        const mainPart = templateData.template.parts[0];
+
+        // 创建新组件
+        const newParts = await Promise.all(
+          templateData.template.parts.map(async (part: any) => {
+            const newPart = JSON.parse(JSON.stringify(part));
+            newPart.id = `${idPrefix}${part.id}`;
+
+            // 加载组件模块并获取能力页面
+            try {
+              const componentModule = await loadComponentModule(part.type);
+              if (
+                componentModule?.default &&
+                typeof componentModule.default.getCapabilities === "function"
+              ) {
+                newPart.capsPage = componentModule.default.getCapabilities();
+                console.log(`加载模板组件${part.type}组件的能力页面成功`);
+              }
+            } catch (error) {
+              console.error(`加载模板组件${part.type}的能力页面失败:`, error);
+            }
+
+            // 计算新位置
+            if (typeof newPart.x === "number" && typeof newPart.y === "number") {
+              const relativeX = part.x - mainPart.x;
+              const relativeY = part.y - mainPart.y;
+              newPart.x = viewportCenter.x + relativeX;
+              newPart.y = viewportCenter.y + relativeY;
+            }
+
+            return newPart;
+          })
+        );
+
+        currentData.parts.push(...newParts);
+
+        // 处理连接关系
+        if (templateData.template.connections) {
+          const idMap: Record<string, string> = {};
+          templateData.template.parts.forEach((part: any) => {
+            idMap[part.id] = `${idPrefix}${part.id}`;
+          });
+
+          const newConnections = templateData.template.connections.map((conn: any) => {
+            if (Array.isArray(conn)) {
+              const [from, to, type, path] = conn;
+              const fromParts = from.split(":");
+              const toParts = to.split(":");
+
+              if (fromParts.length === 2 && toParts.length === 2) {
+                const fromComponentId = fromParts[0];
+                const fromPinId = fromParts[1];
+                const toComponentId = toParts[0];
+                const toPinId = toParts[1];
+
+                const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
+                const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;
+
+                return [newFrom, newTo, type, path];
+              }
+            }
+            return conn;
+          });
+
+          currentData.connections.push(...newConnections);
+        }
+
+        canvasInstance.updateDiagramDataDirectly(currentData);
+        console.log("=== 更新图表数据完成，新组件数量:", currentData.parts.length);
+
+        return { success: true, message: `已添加 ${templateData.name} 模板` };
+      } else {
+        console.error("模板格式错误，缺少parts数组");
+        return { success: false, message: "模板格式错误" };
+      }
+    }
+
+    /**
+     * 删除组件
+     */
+    function deleteComponent(componentId: string) {
+      const canvasInstance = diagramCanvas.value as any;
+      if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
+        return;
+      }
+
+      const currentData = canvasInstance.getDiagramData();
+      const component = currentData.parts.find((p: DiagramPart) => p.id === componentId);
+      
+      if (!component) return;
+
+      const componentsToDelete: string[] = [componentId];
+
+      // 处理组件组
+      if (component.group && component.group !== "") {
+        const groupMembers = currentData.parts.filter(
+          (p: DiagramPart) => p.group === component.group && p.id !== componentId
+        );
+        componentsToDelete.push(...groupMembers.map((p: DiagramPart) => p.id));
+        console.log(`删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`);
+      }
+
+      // 删除组件
+      currentData.parts = currentData.parts.filter(
+        (p: DiagramPart) => !componentsToDelete.includes(p.id)
+      );
+
+      // 删除相关连接
+      currentData.connections = currentData.connections.filter((connection: any) => {
+        for (const id of componentsToDelete) {
+          if (connection[0].startsWith(`${id}:`) || connection[1].startsWith(`${id}:`)) {
+            return false;
+          }
+        }
+        return true;
+      });
+
+      // 清除选中状态
+      if (selectedComponentId.value && componentsToDelete.includes(selectedComponentId.value)) {
+        selectedComponentId.value = null;
+        selectedComponentConfig.value = null;
+      }
+
+      canvasInstance.updateDiagramDataDirectly(currentData);
+    }
+
+    /**
+     * 选中组件
+     */
+    async function selectComponent(componentData: DiagramPart | null) {
+      selectedComponentId.value = componentData ? componentData.id : null;
+      selectedComponentConfig.value = null;
+
+      if (componentData) {
+        const moduleRef = await loadComponentModule(componentData.type);
+
+        if (moduleRef) {
+          try {
+            const propConfigs: PropertyConfig[] = [];
+            const addedProps = new Set<string>();
+
+            // 从 getDefaultProps 方法获取默认配置
+            if (typeof moduleRef.getDefaultProps === "function") {
+              const defaultProps = moduleRef.getDefaultProps();
+              const defaultPropConfigs = generatePropsFromDefault(defaultProps);
+              defaultPropConfigs.forEach((config) => {
+                propConfigs.push(config);
+                addedProps.add(config.name);
+              });
+            }
+
+            // 添加组件直接属性
+            const directPropConfigs = generatePropertyConfigs(componentData);
+            const newDirectProps = directPropConfigs.filter(
+              (config) => !addedProps.has(config.name)
+            );
+            propConfigs.push(...newDirectProps);
+
+            // 添加 attrs 中的属性
+            if (componentData.attrs) {
+              const attrPropConfigs = generatePropsFromAttrs(componentData.attrs);
+              attrPropConfigs.forEach((attrConfig) => {
+                const existingIndex = propConfigs.findIndex(
+                  (p) => p.name === attrConfig.name
+                );
+                if (existingIndex >= 0) {
+                  propConfigs[existingIndex] = attrConfig;
+                } else {
+                  propConfigs.push(attrConfig);
+                }
+              });
+            }
+
+            selectedComponentConfig.value = { props: propConfigs };
+            console.log(`Built config for ${componentData.type}:`, selectedComponentConfig.value);
+          } catch (error) {
+            console.error(`Error building config for ${componentData.type}:`, error);
+            selectedComponentConfig.value = { props: [] };
+          }
+        } else {
+          console.warn(`Module for component ${componentData.type} not found.`);
+          selectedComponentConfig.value = { props: [] };
+        }
+      }
+    }
+
+    /**
+     * 更新组件属性
+     */
+    function updateComponentProp(componentId: string, propName: string, value: any) {
+      const canvasInstance = diagramCanvas.value as any;
+      if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
+        console.error("没有可用的画布实例进行属性更新");
+        return;
+      }
+
+      // 检查值格式
+      if (value !== null && typeof value === "object" && "value" in value) {
+        value = value.value;
+      }
+
+      const currentData = canvasInstance.getDiagramData();
+      const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
+
+      if (part) {
+        if (propName in part) {
+          (part as any)[propName] = value;
+        } else {
+          if (!part.attrs) {
+            part.attrs = {};
+          }
+          part.attrs[propName] = value;
+        }
+
+        canvasInstance.updateDiagramDataDirectly(currentData);
+        console.log(`更新组件${componentId}的属性${propName}为:`, value, typeof value);
+      }
+    }
+
+    /**
+     * 更新组件直接属性
+     */
+    function updateComponentDirectProp(componentId: string, propName: string, value: any) {
+      const canvasInstance = diagramCanvas.value as any;
+      if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
+        console.error("没有可用的画布实例进行属性更新");
+        return;
+      }
+
+      const currentData = canvasInstance.getDiagramData();
+      const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
+
+      if (part) {
+        (part as any)[propName] = value;
+        canvasInstance.updateDiagramDataDirectly(currentData);
+        console.log(`更新组件${componentId}的直接属性${propName}为:`, value, typeof value);
+      }
+    }
+
+    /**
+     * 移动组件
+     */
+    function moveComponent(moveData: { id: string; x: number; y: number }) {
+      const canvasInstance = diagramCanvas.value as any;
+      if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
+        return;
+      }
+
+      const currentData = canvasInstance.getDiagramData();
+      const part = currentData.parts.find((p: DiagramPart) => p.id === moveData.id);
+      if (part) {
+        part.x = moveData.x;
+        part.y = moveData.y;
+        canvasInstance.updateDiagramDataDirectly(currentData);
+      }
+    }
+
+    /**
+     * 设置画布实例引用
+     */
+    function setCanvasRef(canvasRef: any) {
+      diagramCanvas.value = canvasRef;
+    }
+
+    /**
+     * 初始化组件管理器
+     */
+    async function initialize() {
+      const canvasInstance = diagramCanvas.value as any;
+      if (canvasInstance?.getDiagramData) {
+        const diagramData = canvasInstance.getDiagramData();
+        
+        // 收集所有组件类型
+        const componentTypes = new Set<string>();
+        diagramData.parts.forEach((part: DiagramPart) => {
+          componentTypes.add(part.type);
+        });
+
+        // 预加载组件模块
+        await preloadComponentModules(Array.from(componentTypes));
+      }
+    }
+
+    return {
+      // 状态
+      componentModules,
+      selectedComponentId,
+      selectedComponentData,
+      selectedComponentConfig,
+      
+      // 方法
+      loadComponentModule,
+      preloadComponentModules,
+      addComponent,
+      addTemplate,
+      deleteComponent,
+      selectComponent,
+      updateComponentProp,
+      updateComponentDirectProp,
+      moveComponent,
+      setCanvasRef,
+      initialize,
+    };
+  }
+);
+
+export { useProvideComponentManager, useComponentManager };

src/components/LabCanvas/index.ts

@@ -0,0 +1,8 @@
+// 导出组件管理器服务
+export { useProvideComponentManager, useComponentManager } from './componentManager';
+
+// 导出图表管理器
+export type { DiagramData, DiagramPart } from './diagramManager';
+
+// 导出连线管理器
+export type { WireItem } from './wireManager';

src/components/LabCanvasNew/LabComponentsDrawer.vue

@@ -410,7 +410,7 @@ async function loadComponentModule(type: string) {
   if (!componentModules.value[type]) {
     try {
       // 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
-      const module = await import(`../../components/equipments/${type}.vue`);
+      const module = await import(`@/components/equipments/${type}.vue`);
 
       // 将模块添加到缓存中
       componentModules.value = {