feat: enhance DiagramCanvas and Pin components with wire creation and tooltip functionality

- Added wire creation logic in DiagramCanvas.vue with mouse tracking and event handling.
- Implemented tooltip display for pins in Pin.vue with detailed information on hover.
- Updated ProjectView.vue to handle wire creation and deletion events.
- Refactored Wire.vue to support dynamic path rendering based on routing mode.

src/views/ProjectView.vue

@@ -4,11 +4,12 @@
       <!-- 左侧图形化区域 -->
       <div class="relative bg-base-200 overflow-hidden" :style="{ width: leftPanelWidth + '%' }">        <DiagramCanvas
           ref="diagramCanvas"          :components="components"
-          :componentModules="componentModules"
-          @component-selected="handleComponentSelected"
+          :componentModules="componentModules"          @component-selected="handleComponentSelected"
           @component-moved="handleComponentMoved"
           @update-component-prop="updateComponentProp"
           @component-delete="handleComponentDelete"
+          @wire-created="handleWireCreated"
+          @wire-deleted="handleWireDeleted"
         />
         <!-- 添加元器件按钮 -->
         <button class="btn btn-circle btn-primary absolute top-8 right-8 shadow-lg z-10" @click="openComponentsMenu">
@@ -219,12 +220,50 @@ async function handleAddComponent(componentData: { type: string; name: string; p
   // 加载组件模块以便后续使用
   await loadComponentModule(componentData.type);
 
+  // 获取画布容器和位置信息
+  const canvasInstance = diagramCanvas.value as any;
+  
+  // 默认位置（当无法获取画布信息时使用）
+  let posX = 100;
+  let posY = 100;
+  
+  try {
+    if (canvasInstance) {
+      // 获取画布容器
+      const canvasContainer = canvasInstance.$el as HTMLElement;
+      if (canvasContainer) {
+        // 获取当前画布的位置和缩放信息
+        const canvasPosition = canvasInstance.getCanvasPosition ? 
+                              canvasInstance.getCanvasPosition() : 
+                              { x: 0, y: 0 };
+        const scale = canvasInstance.getScale ? 
+                     canvasInstance.getScale() : 
+                     1;
+        
+        // 计算可视区域中心点在画布坐标系中的位置
+        const viewportWidth = canvasContainer.clientWidth;
+        const viewportHeight = canvasContainer.clientHeight;
+        
+        // 计算画布中心点的坐标
+        posX = (viewportWidth / 2 - canvasPosition.x) / scale;
+        posY = (viewportHeight / 2 - canvasPosition.y) / scale;
+      }
+    }
+  } catch (error) {
+    console.error('Error getting canvas position:', error);
+    // 使用默认位置
+  }
+  
+  // 添加一些随机偏移，避免元器件重叠
+  const offsetX = Math.floor(Math.random() * 100) - 50;
+  const offsetY = Math.floor(Math.random() * 100) - 50;
+
   const newComponent: ComponentItem = {
     id: `component-${Date.now()}`,
     type: componentData.type,
     name: componentData.name,
-    x: 100, // 或者计算画布中心位置
-    y: 100,
+    x: Math.round(posX + offsetX),
+    y: Math.round(posY + offsetY),
     props: componentData.props, // 使用从 ComponentSelector 传递的默认属性
   };
 
@@ -302,9 +341,22 @@ function updateComponentProp(componentId: string | { id: string; propName: strin
   }
 }
 
+// 处理连线创建事件
+function handleWireCreated(wireData: any) {
+  console.log('Wire created:', wireData);
+  // 可以在这里添加连线创建的相关逻辑
+}
+
+// 处理连线删除事件
+function handleWireDeleted(wireId: string) {
+  console.log('Wire deleted:', wireId);
+  // 可以在这里添加连线删除的相关逻辑
+}
+
 // --- 生命周期钩子 ---
 onMounted(() => {
-  // 无需在这里预加载组件，ComponentSelector 组件会处理这部分逻辑
+  // 初始化画布设置
+  console.log('ProjectView mounted, diagram canvas ref:', diagramCanvas.value);
 });
 
 onUnmounted(() => {