From b3a5342d6bda1627d475c4ed84513bbfa98277a3 Mon Sep 17 00:00:00 2001
From: alivender <13898766233@163.com>
Date: Sat, 26 Apr 2025 21:53:33 +0800
Subject: [PATCH] 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/components/DiagramCanvas.vue  | 540 +++++++++++++++++++++++++++++-
 src/components/Wire.vue           | 141 ++++++++
 src/components/equipments/Pin.vue | 186 +++++++++-
 src/views/ProjectView.vue         |  62 +++-
 4 files changed, 896 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Wire.vue

diff --git a/src/components/DiagramCanvas.vue b/src/components/DiagramCanvas.vue
index 12a40f8..87b6a81 100644
--- a/src/components/DiagramCanvas.vue
+++ b/src/components/DiagramCanvas.vue
@@ -2,11 +2,46 @@
   <div class="flex-1 min-w-[60%] bg-base-200 relative overflow-hidden diagram-container" ref="canvasContainer"
       @mousedown="handleCanvasMouseDown"
       @mousedown.middle.prevent="startMiddleDrag"
-      @wheel.prevent="onZoom">
-    <div
+      @wheel.prevent="onZoom"
+      @contextmenu.prevent="handleContextMenu"><div
       ref="canvas"
       class="diagram-canvas"
-      :style="{ transform: `translate(${position.x}px, ${position.y}px) scale(${scale})` }">      <!-- 渲染画布上的组件 -->
+      :style="{ transform: `translate(${position.x}px, ${position.y}px) scale(${scale})` }">      <!-- 渲染连线 -->
+      <svg class="wires-layer" width="4000" height="4000">
+        <!-- 已完成的连线 -->
+        <Wire
+          v-for="wire in wires"
+          :key="wire.id"
+          :id="wire.id"
+          :start-x="wire.startX"
+          :start-y="wire.startY"
+          :end-x="wire.endX"
+          :end-y="wire.endY"
+          :stroke-color="wire.color || '#4a5568'"
+          :stroke-width="2"
+          :is-active="wire.isActive"
+          :start-component-id="wire.startComponentId"
+          :start-pin-label="wire.startPinLabel"
+          :end-component-id="wire.endComponentId"
+          :end-pin-label="wire.endPinLabel"
+          @click="handleWireClick(wire)"
+        />
+        
+        <!-- 正在创建的连线 -->
+        <Wire
+          v-if="isCreatingWire"
+          id="temp-wire"
+          :start-x="creatingWireStart.x"
+          :start-y="creatingWireStart.y"
+          :end-x="mousePosition.x"
+          :end-y="mousePosition.y"
+          stroke-color="#3182ce"
+          :stroke-width="2"
+          :is-active="true"
+        />
+      </svg>
+      
+      <!-- 渲染画布上的组件 -->
       <div v-for="component in props.components" :key="component.id"
           class="component-wrapper"
           :class="{
@@ -20,13 +55,13 @@
           }"
           @mousedown.left.stop="startComponentDrag($event, component)"
           @mouseover="hoveredComponent = component.id"
-          @mouseleave="hoveredComponent = null"><!-- 动态渲染组件 -->
-        <component
+          @mouseleave="hoveredComponent = null"><!-- 动态渲染组件 -->        <component
           :is="getComponentDefinition(component.type)"
           v-if="props.componentModules[component.type]"
           v-bind="prepareComponentProps(component.props || {})"
           @update:bindKey="(value: string) => updateComponentProp(component.id, 'bindKey', value)"
-          :ref="el => { if (el) componentRefs[component.id] = el; }"
+          @pin-click="(pinInfo: any) => handlePinClick(component.id, pinInfo, pinInfo.originalEvent)"
+          :ref="(el: any) => { if (el) componentRefs[component.id] = el; }"
         />
          
          <!-- Fallback if component module not loaded yet -->
@@ -45,6 +80,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import Wire from '@/components/Wire.vue';
 
 // 定义组件接受的属性
 interface ComponentItem {
@@ -62,7 +98,7 @@ const props = defineProps<{
 }>();
 
 // 定义组件发出的事件
-const emit = defineEmits(['component-selected', 'component-moved', 'update-component-prop', 'component-delete']);
+const emit = defineEmits(['component-selected', 'component-moved', 'update-component-prop', 'component-delete', 'wire-created', 'wire-deleted']);
 
 // --- 画布状态 ---
 const canvasContainer = ref<HTMLElement | null>(null);
@@ -292,7 +328,22 @@ function onComponentDrag(e: MouseEvent) {
 
 // 停止拖拽组件
 function stopComponentDrag() {
-  draggingComponentId.value = null;
+  // 如果有组件被拖拽，更新相关的连线
+  if (draggingComponentId.value) {
+    console.log(`组件拖拽结束: ${draggingComponentId.value}，开始更新连线位置`);
+    // 保存当前拖动的组件ID
+    const currentId = draggingComponentId.value;
+    
+    // 先清除拖动状态
+    draggingComponentId.value = null;
+    
+    // 等待DOM更新后再更新连线位置
+    setTimeout(() => {
+      updateWiresForComponent(currentId);
+    }, 50);
+  } else {
+    draggingComponentId.value = null;
+  }
   
   document.removeEventListener('mousemove', onComponentDrag);
   document.removeEventListener('mouseup', stopComponentDrag);
@@ -314,21 +365,462 @@ function getComponentRef(componentId: string) {
 
 // 暴露给父组件的方法
 defineExpose({
-  getComponentRef
+  getComponentRef,
+  getCanvasPosition: () => ({ x: position.x, y: position.y }),
+  getScale: () => scale.value
 });
 
+// --- 连线状态 ---
+interface WireItem {
+  id: string;
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+  startComponentId: string;
+  startPinLabel: string;
+  endComponentId?: string;
+  endPinLabel?: string;
+  color?: string;
+  isActive?: boolean;
+  constraint?: string;
+}
+
+const wires = ref<WireItem[]>([]);
+const isCreatingWire = ref(false);
+const creatingWireStart = reactive({ x: 0, y: 0 });
+const creatingWireStartInfo = reactive({
+  componentId: '',
+  pinLabel: '',
+  constraint: ''
+});
+const mousePosition = reactive({ x: 0, y: 0 });
+
+// 更新鼠标位置
+function updateMousePosition(e: MouseEvent) {
+  if (!canvasContainer.value) return;
+  
+  const containerRect = canvasContainer.value.getBoundingClientRect();
+  mousePosition.x = (e.clientX - containerRect.left - position.x) / scale.value;
+  mousePosition.y = (e.clientY - containerRect.top - position.y) / scale.value;
+}
+
+// 处理Pin点击事件
+function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
+  if (!canvasContainer.value) return;
+  
+  // 获取容器位置
+  const containerRect = canvasContainer.value.getBoundingClientRect();
+  
+  // 更新鼠标位置 (用于跟踪临时连线)
+  updateMousePosition(event);
+  
+  // 检查 pinInfo 是否有效
+  if (!pinInfo || !pinInfo.label) {
+    console.error('无效的针脚信息:', pinInfo);
+    return;
+  }
+  
+  // 针脚在页面上的绝对位置
+  if (!pinInfo.position) {
+    console.error('针脚信息中缺少位置数据:', pinInfo);
+    return;
+  }
+  
+  const pinPagePosition = pinInfo.position;
+  console.log(`针脚 ${pinInfo.label} 的页面坐标:`, pinPagePosition);
+  
+  // 将针脚页面位置转换为画布坐标系中的位置
+  const pinCanvasX = (pinPagePosition.x - containerRect.left - position.x) / scale.value;
+  const pinCanvasY = (pinPagePosition.y - containerRect.top - position.y) / scale.value;
+  console.log(`针脚 ${pinInfo.label} 的画布坐标:`, { x: pinCanvasX, y: pinCanvasY });
+  
+  if (!isCreatingWire.value) {
+    // 开始创建连线
+    isCreatingWire.value = true;
+    // 使用针脚的实际位置作为连线起点
+    creatingWireStart.x = pinCanvasX;
+    creatingWireStart.y = pinCanvasY;
+    creatingWireStartInfo.componentId = componentId;
+    creatingWireStartInfo.pinLabel = pinInfo.label;
+    creatingWireStartInfo.constraint = pinInfo.constraint;
+    
+    console.log(`开始创建连线，起点针脚: ${componentId}/${pinInfo.label}, 位置: (${pinCanvasX}, ${pinCanvasY})`);
+    
+    // 添加鼠标移动监听
+    document.addEventListener('mousemove', onCreatingWireMouseMove);
+    
+  } else {
+    // 完成连线
+    if (componentId === creatingWireStartInfo.componentId && pinInfo.label === creatingWireStartInfo.pinLabel) {
+      // 如果点了同一个Pin，取消连线
+      cancelWireCreation();
+      return;
+    }
+    
+    // 检查约束条件
+    const startConstraint = creatingWireStartInfo.constraint;
+    const endConstraint = pinInfo.constraint;
+    
+    if (startConstraint && endConstraint && startConstraint !== endConstraint) {
+      // 两个Pin都有约束，但约束不同，需要询问用户选择哪个约束
+      promptForConstraintSelection(
+        componentId, 
+        pinInfo, 
+        startConstraint, 
+        endConstraint
+      );
+    } else {
+      // 确定最终约束
+      let finalConstraint = '';
+      
+      if (startConstraint) {
+        finalConstraint = startConstraint;
+      } else if (endConstraint) {
+        finalConstraint = endConstraint;
+      } else {
+        // 两个Pin都没有约束，生成随机约束
+        finalConstraint = generateRandomConstraint();
+      }
+        // 完成连线
+      completeWireCreation(
+        componentId, 
+        pinInfo.label, 
+        finalConstraint,
+        pinInfo
+      );
+      
+      // 更新两个Pin的约束
+      updatePinConstraint(creatingWireStartInfo.componentId, creatingWireStartInfo.pinLabel, finalConstraint);
+      updatePinConstraint(componentId, pinInfo.label, finalConstraint);
+    }
+  }
+}
+
+// 生成随机约束名
+function generateRandomConstraint() {
+  const randomId = Math.floor(Math.random() * 1000000);
+  return `$auto_constraint_${randomId}`;
+}
+
+// 询问用户选择约束
+function promptForConstraintSelection(
+  endComponentId: string, 
+  endPinInfo: any, 
+  startConstraint: string,
+  endConstraint: string
+) {
+  // 在实际应用中，这里可以使用Modal对话框等UI组件
+  // 这里简化为使用浏览器的confirm
+  const useStartConstraint = confirm(
+    `连接两个不同约束的Pin:\n` +
+    `- 起点约束: ${startConstraint}\n` +
+    `- 终点约束: ${endConstraint}\n\n` +
+    `点击"确定"使用起点约束，点击"取消"使用终点约束。`
+  );
+  
+  const finalConstraint = useStartConstraint ? startConstraint : endConstraint;
+    // 完成连线
+  completeWireCreation(
+    endComponentId, 
+    endPinInfo.label, 
+    finalConstraint,
+    endPinInfo
+  );
+  
+  // 更新两个Pin的约束
+  updatePinConstraint(creatingWireStartInfo.componentId, creatingWireStartInfo.pinLabel, finalConstraint);
+  updatePinConstraint(endComponentId, endPinInfo.label, finalConstraint);
+}
+
+// 更新Pin的约束
+function updatePinConstraint(componentId: string, pinLabel: string, constraint: string) {
+  // 通过组件ID获取组件实例
+  const component = props.components.find(c => c.id === componentId);
+  if (!component) return;
+  
+  // 获取组件引用
+  const componentRef = componentRefs.value[componentId];
+  if (!componentRef) return;
+  
+  // 更新组件属性
+  if (component.props && componentRef.getInfo) {
+    const pinInfo = componentRef.getInfo();
+    if (pinInfo && pinInfo.label === pinLabel) {
+      emit('update-component-prop', { 
+        id: componentId, 
+        propName: 'constraint', 
+        value: constraint 
+      });
+    }
+  }
+}
+
+// 完成连线创建
+function completeWireCreation(endComponentId: string, endPinLabel: string, constraint: string, endPinInfo?: any) {
+  if (!canvasContainer.value) return;
+  const containerRect = canvasContainer.value.getBoundingClientRect();
+  
+  // 获取终点针脚的位置
+  let endX = mousePosition.x;
+  let endY = mousePosition.y;
+  
+  console.log(`开始创建连线，起点:(${creatingWireStart.x}, ${creatingWireStart.y})`);
+  
+  // 尝试使用 getPinPosition 获取精确的针脚位置
+  const endComponentRef = componentRefs.value[endComponentId];
+  if (endComponentRef && endComponentRef.getPinPosition) {
+    const pinPosition = endComponentRef.getPinPosition(endPinLabel);
+    if (pinPosition) {
+      endX = (pinPosition.x - containerRect.left - position.x) / scale.value;
+      endY = (pinPosition.y - containerRect.top - position.y) / scale.value;
+      console.log(`通过 getPinPosition 获取终点针脚 ${endPinLabel} 的画布坐标: (${endX}, ${endY})`);
+    } else {
+      console.warn(`getPinPosition 返回 null，将使用备选方法`);
+    }
+  } else if (endPinInfo && endPinInfo.position) {
+    // 如果 getPinPosition 不可用，使用传入的针脚位置信息
+    const pinPagePosition = endPinInfo.position;
+    endX = (pinPagePosition.x - containerRect.left - position.x) / scale.value;
+    endY = (pinPagePosition.y - containerRect.top - position.y) / scale.value;
+    console.log(`通过 pinInfo.position 获取终点针脚位置: (${endX}, ${endY})`);
+  } else {
+    console.warn(`无法获取针脚 ${endPinLabel} 的精确位置，使用鼠标位置代替`);
+  }
+    // 检查起点和终点是否重合
+  const distanceSquared = Math.pow(endX - creatingWireStart.x, 2) + Math.pow(endY - creatingWireStart.y, 2);
+  if (distanceSquared < 1) { // 如果距离小于1像素
+    console.warn(`起点和终点太接近 (${distanceSquared}像素²)，调整终点位置`);
+    // 稍微调整终点位置，避免重合
+    endX += 10 + Math.random() * 5;
+    endY += 10 + Math.random() * 5;
+  }
+    // 创建新的连线
+  const newWire: WireItem = {
+    id: `wire-${Date.now()}`,
+    startX: creatingWireStart.x,
+    startY: creatingWireStart.y,
+    endX: endX,
+    endY: endY,
+    startComponentId: creatingWireStartInfo.componentId,
+    startPinLabel: creatingWireStartInfo.pinLabel,
+    endComponentId: endComponentId,
+    endPinLabel: endPinLabel,
+    color: '#4a5568',
+    constraint: constraint
+  };
+  
+  console.log(`新连线创建完成:`, newWire);
+  
+  // 确保起点和终点不重合
+  if (Math.abs(newWire.startX - newWire.endX) < 1 && Math.abs(newWire.startY - newWire.endY) < 1) {
+    console.warn(`连线的起点和终点重合，调整终点位置`);
+    newWire.endX += 20;
+    newWire.endY += 20;
+  }
+  
+  wires.value.push(newWire);
+  
+  // 通知父组件连线已创建
+  emit('wire-created', newWire);
+  
+  // 重置创建状态
+  isCreatingWire.value = false;
+  document.removeEventListener('mousemove', onCreatingWireMouseMove);
+}
+
+// 取消连线创建
+function cancelWireCreation() {
+  isCreatingWire.value = false;
+  document.removeEventListener('mousemove', onCreatingWireMouseMove);
+}
+
+// 鼠标移动时更新连线
+function onCreatingWireMouseMove(e: MouseEvent) {
+  updateMousePosition(e);
+}
+
+// 处理连线点击
+function handleWireClick(wire: WireItem) {
+  // 这里可以添加连线选中、删除等功能
+  const deleteWire = confirm('是否删除此连线？');
+  if (deleteWire) {
+    // 删除连线
+    const index = wires.value.findIndex(w => w.id === wire.id);
+    if (index !== -1) {
+      const deletedWire = wires.value.splice(index, 1)[0];
+      
+      // 通知父组件连线已删除
+      emit('wire-deleted', deletedWire.id);
+    }
+  }
+}
+
+// 更新所有连线位置
+function updateAllWires() {
+  if (!canvasContainer.value) return;
+  
+  // 遍历所有连线并更新位置
+  wires.value.forEach(wire => {
+    updateWireWithPinPositions(wire);
+  });
+}
+
+// 根据针脚位置更新连线
+function updateWireWithPinPositions(wire: WireItem) {
+  if (!canvasContainer.value) return;
+  const containerRect = canvasContainer.value.getBoundingClientRect();
+  
+  console.log(`更新连线 ${wire.id}，当前位置: 起点(${wire.startX}, ${wire.startY}), 终点(${wire.endX}, ${wire.endY})`);
+  
+  // 保存原始位置，用于检测变化
+  const originalStartX = wire.startX;
+  const originalStartY = wire.startY;
+  const originalEndX = wire.endX;
+  const originalEndY = wire.endY;
+  
+  // 更新起点
+  if (wire.startComponentId && wire.startPinLabel) {
+    const startComponentRef = componentRefs.value[wire.startComponentId];
+    if (startComponentRef && startComponentRef.getPinPosition) {
+      const pinPosition = startComponentRef.getPinPosition(wire.startPinLabel);
+      if (pinPosition) {
+        const newStartX = (pinPosition.x - containerRect.left - position.x) / scale.value;
+        const newStartY = (pinPosition.y - containerRect.top - position.y) / scale.value;
+        
+        console.log(`更新连线起点 ${wire.startComponentId}/${wire.startPinLabel}: (${wire.startX}, ${wire.startY}) => (${newStartX}, ${newStartY})`);
+        
+        wire.startX = newStartX;
+        wire.startY = newStartY;
+      } else {
+        console.warn(`无法获取针脚 ${wire.startComponentId}/${wire.startPinLabel} 的位置`);
+      }
+    } else {
+      console.warn(`组件 ${wire.startComponentId} 没有实现 getPinPosition 方法`);
+    }
+  }
+  
+  // 更新终点
+  if (wire.endComponentId && wire.endPinLabel) {
+    const endComponentRef = componentRefs.value[wire.endComponentId];
+    if (endComponentRef && endComponentRef.getPinPosition) {
+      const pinPosition = endComponentRef.getPinPosition(wire.endPinLabel);
+      if (pinPosition) {
+        const newEndX = (pinPosition.x - containerRect.left - position.x) / scale.value;
+        const newEndY = (pinPosition.y - containerRect.top - position.y) / scale.value;
+        
+        console.log(`更新连线终点 ${wire.endComponentId}/${wire.endPinLabel}: (${wire.endX}, ${wire.endY}) => (${newEndX}, ${newEndY})`);
+        
+        wire.endX = newEndX;
+        wire.endY = newEndY;
+      } else {
+        console.warn(`无法获取针脚 ${wire.endComponentId}/${wire.endPinLabel} 的位置`);
+      }
+    } else {
+      console.warn(`组件 ${wire.endComponentId} 没有实现 getPinPosition 方法`);
+    }
+  }
+  
+  // 在更新后检查起点和终点是否重合
+  const positionChanged = 
+    originalStartX !== wire.startX || 
+    originalStartY !== wire.startY || 
+    originalEndX !== wire.endX || 
+    originalEndY !== wire.endY;
+  
+  if (positionChanged) {
+    // 如果位置有更新，确保起点和终点不重合
+    ensureUniquePinPositions(wire);
+  }
+}
+
+// 更新与组件相关的所有连线位置
+function updateWiresForComponent(componentId: string) {
+  if (!canvasContainer.value || !componentId) return;
+  
+  console.log(`更新组件 ${componentId} 相关的连线位置`);
+  
+  // 检查组件是否存在
+  const component = props.components.find(c => c.id === componentId);
+  if (!component) {
+    console.warn(`找不到组件 ${componentId}`);
+    return;
+  }
+  
+  // 查找与该组件关联的所有连线
+  const relatedWires = wires.value.filter(wire => 
+    wire.startComponentId === componentId || 
+    wire.endComponentId === componentId
+  );
+  
+  console.log(`找到 ${relatedWires.length} 条相关连线`);
+  
+  if (relatedWires.length === 0) {
+    // 没有找到直接关联的连线，检查所有连线
+    console.log('没有找到直接关联的连线，检查所有连线');
+    
+    // 打印所有连线信息，帮助调试
+    wires.value.forEach((wire, index) => {
+      console.log(`连线 ${index}: startComponentId=${wire.startComponentId}, endComponentId=${wire.endComponentId}`);
+    });
+    
+    return;
+  }
+  
+  // 更新所有相关连线的位置
+  relatedWires.forEach(wire => {
+    console.log(`更新连线 ${wire.id} (${wire.startComponentId}/${wire.startPinLabel} -> ${wire.endComponentId}/${wire.endPinLabel})`);
+    updateWireWithPinPositions(wire);
+  });
+}
+
+// 确保针脚位置有差异
+function ensureUniquePinPositions(wire: WireItem) {
+  if (Math.abs(wire.startX - wire.endX) < 5 && Math.abs(wire.startY - wire.endY) < 5) {
+    console.warn('检测到连线起点和终点非常接近，添加随机偏移');
+    
+    // 根据组件ID和针脚标签生成一个确定性的偏移
+    const idSum = (wire.startComponentId?.charCodeAt(0) || 0) + 
+                 (wire.endComponentId?.charCodeAt(0) || 0) +
+                 (wire.startPinLabel?.charCodeAt(0) || 0) +
+                 (wire.endPinLabel?.charCodeAt(0) || 0);
+    
+    // 使用组件ID和针脚标签生成偏移，确保相同的组件始终有相同的偏移
+    const offsetX = 20 * Math.cos(idSum * 0.1);
+    const offsetY = 20 * Math.sin(idSum * 0.1);
+    
+    wire.endX += offsetX;
+    wire.endY += offsetY;
+    
+    console.log(`应用偏移 (${offsetX.toFixed(2)}, ${offsetY.toFixed(2)}) 到连线终点`);
+  }
+}
+
 // --- 生命周期钩子 ---
 onMounted(() => {
   // 初始化中心位置
   if (canvasContainer.value) {
-    position.x = canvasContainer.value.clientWidth / 2;
-    position.y = canvasContainer.value.clientHeight / 2;
-  }
-  if (canvasContainer.value) {
+    // 修改为将画布中心点放在容器中心点
+    position.x = canvasContainer.value.clientWidth / 2 - 2000; // 画布宽度的一半
+    position.y = canvasContainer.value.clientHeight / 2 - 2000; // 画布高度的一半
+    
     canvasContainer.value.addEventListener('wheel', onZoom);
   }
+  
   // 添加键盘事件监听器
   window.addEventListener('keydown', handleKeyDown);
+  
+  // 添加定期更新连线位置的定时器
+  const wireUpdateInterval = setInterval(() => {
+    if (wires.value.length > 0) {
+      updateAllWires();
+    }
+  }, 1000); // 每秒更新一次所有连线位置
+  
+  // 在组件卸载时清除定时器
+  onUnmounted(() => {
+    clearInterval(wireUpdateInterval);
+  });
 });
 
 // 处理键盘事件
@@ -340,6 +832,12 @@ function handleKeyDown(e: KeyboardEvent) {
     // 清除选中状态
     selectedComponentId.value = null;
   }
+  
+  // 如果当前正在创建连线，并且按下了ESC键
+  if (isCreatingWire.value && e.key === 'Escape') {
+    // 取消连线创建
+    cancelWireCreation();
+  }
 }
 
 onUnmounted(() => {
@@ -386,6 +884,22 @@ onUnmounted(() => {
   -ms-user-select: none;
 }
 
+/* 连线层样式 */
+.wires-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 50;
+}
+
+.wires-layer path {
+  pointer-events: stroke;
+  cursor: pointer;
+}
+
 /* 元器件容器样式 */
 .component-wrapper {
   position: absolute;
diff --git a/src/components/Wire.vue b/src/components/Wire.vue
new file mode 100644
index 0000000..2528d96
--- /dev/null
+++ b/src/components/Wire.vue
@@ -0,0 +1,141 @@
+<template>
+  <path 
+    :d="pathData" 
+    fill="none" 
+    :stroke="strokeColor" 
+    :stroke-width="strokeWidth" 
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :class="{ 'wire-active': isActive }"
+    @click="handleClick"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, defineEmits } from 'vue';
+
+interface Props {
+  id: string;
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+  strokeColor?: string;
+  strokeWidth?: number;
+  isActive?: boolean;
+  routingMode?: 'auto' | 'orthogonal' | 'direct';
+  // 添加针脚引用属性
+  startComponentId?: string;
+  startPinLabel?: string;
+  endComponentId?: string;
+  endPinLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  strokeColor: '#4a5568',
+  strokeWidth: 2,
+  isActive: false,
+  routingMode: 'orthogonal'
+});
+
+const emit = defineEmits(['click']);
+
+function handleClick(event: MouseEvent) {
+  emit('click', { id: props.id, event });
+}
+
+const pathData = computed(() => {
+  // 先检查起点和终点是否几乎重合
+  const dx = Math.abs(props.endX - props.startX);
+  const dy = Math.abs(props.endY - props.startY);
+  
+  // 如果几乎重合，强制绘制一个小的可见路径
+  if (dx < 0.5 && dy < 0.5) {
+    console.warn('连线的起点和终点几乎重合，强制绘制可见路径');
+    // 这里绘制一个小圆圈
+    const r = 5; // 半径5像素
+    return `M ${props.startX} ${props.startY} 
+            m -${r}, 0 
+            a ${r},${r} 0 1,0 ${r*2},0 
+            a ${r},${r} 0 1,0 -${r*2},0`;
+  }
+  
+  if (props.routingMode === 'direct') {
+    return `M ${props.startX} ${props.startY} L ${props.endX} ${props.endY}`;
+  } else if (props.routingMode === 'orthogonal') {
+    // 计算直角连线路径
+    return calculateOrthogonalPath(props.startX, props.startY, props.endX, props.endY);
+  } else {
+    // 自动判断连线方式
+    if (dx < 10 || dy < 10) {
+      // 如果距离足够近，使用直线
+      return `M ${props.startX} ${props.startY} L ${props.endX} ${props.endY}`;
+    } else {
+      // 否则使用直角线
+      return calculateOrthogonalPath(props.startX, props.startY, props.endX, props.endY);
+    }
+  }
+});
+
+function calculateOrthogonalPath(startX: number, startY: number, endX: number, endY: number) {
+  // 计算两点之间的水平和垂直距离
+  const dx = endX - startX;
+  const dy = endY - startY;
+  
+  // 如果起点和终点非常接近，稍微偏移终点
+  if (Math.abs(dx) < 1 && Math.abs(dy) < 1) {
+    console.warn('连线的起点和终点几乎重合，调整路径显示');
+    // 强制创建一个小的正方形路径
+    const offset = 5; // 5像素的小正方形
+    return `M ${startX} ${startY} 
+            L ${startX + offset} ${startY} 
+            L ${startX + offset} ${startY + offset} 
+            L ${startX} ${startY + offset} 
+            L ${startX} ${startY}`;
+  }
+  
+  // 如果在同一水平或垂直线上，直接连线
+  if (dx === 0 || dy === 0) {
+    return `M ${startX} ${startY} L ${endX} ${endY}`;
+  }
+  
+  // 检查是否能走45度斜线
+  const absDx = Math.abs(dx);
+  const absDy = Math.abs(dy);
+  
+  if (absDx === absDy) {
+    // 可以直接走45度斜线
+    return `M ${startX} ${startY} L ${endX} ${endY}`;
+  }
+  
+  // 确定要走的路径 - 我们这里使用L型路径
+  // 先水平移动，然后垂直移动
+  if (absDx > absDy) {
+    const middleX = startX + dx * 0.5;
+    return `M ${startX} ${startY} 
+            L ${middleX} ${startY} 
+            L ${middleX} ${endY} 
+            L ${endX} ${endY}`;
+  } else {
+    // 先垂直移动，然后水平移动
+    const middleY = startY + dy * 0.5;
+    return `M ${startX} ${startY} 
+            L ${startX} ${middleY} 
+            L ${endX} ${middleY} 
+            L ${endX} ${endY}`;
+  }
+}
+</script>
+
+<style scoped>
+.wire-active {
+  stroke-dasharray: 5;
+  animation: dash 0.5s linear infinite;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: 10;
+  }
+}
+</style>
diff --git a/src/components/equipments/Pin.vue b/src/components/equipments/Pin.vue
index fc637a5..ff4e20e 100644
--- a/src/components/equipments/Pin.vue
+++ b/src/components/equipments/Pin.vue
@@ -5,15 +5,18 @@
     :height="height" 
     :viewBox="'0 0 ' + viewBoxWidth + ' ' + viewBoxHeight"
     class="pin-component"
+    :data-pin-id="props.label"
   >
-    <g :transform="`translate(${viewBoxWidth/2}, ${viewBoxHeight/2})`">
-      <g v-if="props.appearance === 'None'">
-        <g transform="translate(-12.5, -12.5)" class="interactive">
-          <circle
+    <g :transform="`translate(${viewBoxWidth/2}, ${viewBoxHeight/2})`">      <g v-if="props.appearance === 'None'">
+        <g transform="translate(-12.5, -12.5)" class="interactive">          <circle
             style="fill:#909090"
             cx="12.5"
             cy="12.5"
-            r="3.75" />
+            r="3.75"
+            @mouseenter="showPinTooltip"
+            @mouseleave="hidePinTooltip"
+            @click.stop="handlePinClick"
+            :data-pin-id="`${props.label}-${props.constraint}`" />
         </g>
       </g>      
       <g v-else-if="props.appearance === 'Dip'">
@@ -25,31 +28,52 @@
             height="25"
             x="0"
             y="0"
-            rx="2.5" />
-          <circle
+            rx="2.5" />          <circle
             style="fill:#ecececc5;fill-opacity:0.772973"
             cx="12.5"
             cy="12.5"
-            r="3.75" />
+            r="3.75"
+            @mouseenter="showPinTooltip"
+            @mouseleave="hidePinTooltip"
+            @click.stop="handlePinClick"
+            :data-pin-id="`${props.label}-${props.constraint}`" />
           <text
             style="font-size:6.85px;text-align:start;fill:#ffffff;fill-opacity:0.772973"
             x="7.3"
             y="7"
             xml:space="preserve">{{ props.label }}</text>
         </g>
-      </g>
-      <g v-else-if="props.appearance === 'SMT'">
+      </g>      <g v-else-if="props.appearance === 'SMT'">
         <rect x="-20" y="-10" width="40" height="20" fill="#aaa" rx="2" ry="2" />
         <rect x="-18" y="-8" width="36" height="16" :fill="getColorByType" rx="1" ry="1" />
         <rect x="-16" y="-6" width="26" height="12" :fill="getColorByType" rx="1" ry="1" />
         <text text-anchor="middle" dominant-baseline="middle" font-size="8" fill="white" x="-3">{{ props.label }}</text>
-      </g>
-    </g>
+        <!-- SMT样式的针脚 -->        <circle
+          fill="#ecececc5"
+          cx="10"
+          cy="0"
+          r="3.75"
+          class="interactive"
+          @mouseenter="showPinTooltip"
+          @mouseleave="hidePinTooltip"
+          @click.stop="handlePinClick"
+          :data-pin-id="`${props.label}-${props.constraint}`" />
+      </g>    </g>
   </svg>
+  <!-- 提示框 - 在SVG外部 -->
+  <div v-if="showTooltip" class="pin-tooltip" :style="{
+    position: 'absolute',
+    top: tooltipPosition.top + 'px',
+    left: tooltipPosition.left + 'px',
+    transform: 'translate(-50%, -100%)',
+    marginTop: '-5px'
+  }">
+    {{ tooltipText }}
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, reactive } from 'vue';
 
 interface Props {
   size?: number;
@@ -70,11 +94,92 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits([
-  'value-change'
+  'value-change',
+  'pin-click'  // 新增Pin点击事件
 ]);
 
 // 内部状态
 const analogValue = ref(0);
+const showTooltip = ref(false);
+const tooltipText = ref('');
+const tooltipPosition = reactive({
+  top: 0,
+  left: 0
+});
+
+// 显示针脚提示
+function showPinTooltip(event: MouseEvent) {
+  showTooltip.value = true;
+  const target = event.target as SVGElement;
+  const rect = target.getBoundingClientRect();
+  
+  // 更新提示位置
+  tooltipPosition.top = rect.top;
+  tooltipPosition.left = rect.left + rect.width / 2;
+  
+  // 更新提示文本
+  tooltipText.value = generateTooltipText();
+}
+
+// 隐藏针脚提示
+function hidePinTooltip() {
+  showTooltip.value = false;
+}
+
+// 生成提示文本
+function generateTooltipText() {
+  const parts = [];
+  parts.push(`标签: ${props.label}`);
+  
+  if (props.constraint) {
+    parts.push(`约束: ${props.constraint}`);
+  } else {
+    parts.push('约束: 未定义');
+  }
+  
+  parts.push(`方向: ${getDirectionText()}`);
+  parts.push(`类型: ${props.type === 'digital' ? '数字' : '模拟'}`);
+  
+  return parts.join(' | ');
+}
+
+// 获取方向文本
+function getDirectionText() {
+  switch (props.direction) {
+    case 'input': return '输入';
+    case 'output': return '输出';
+    case 'inout': return '双向';
+    default: return '未知';
+  }
+}
+
+// 处理针脚点击
+function handlePinClick(event: MouseEvent) {
+  // 获取针脚在SVG中的位置
+  const target = event.target as SVGElement;
+  const rect = target.getBoundingClientRect();
+  const pinCenter = {
+    x: rect.left + rect.width / 2,
+    y: rect.top + rect.height / 2
+  };
+
+  console.log(`针脚 ${props.label} 被点击，位置:`, pinCenter);
+
+  // 发送针脚点击事件给父组件
+  emit('pin-click', {
+    label: props.label,
+    constraint: props.constraint,
+    type: props.type,
+    direction: props.direction,
+    // 获取针脚在页面上的位置
+    position: {
+      x: pinCenter.x,
+      y: pinCenter.y
+    },
+    // 获取原始事件
+    originalEvent: event
+  });
+}
 
 const width = computed(() => props.appearance === 'None' ? 40 * props.size : 30 * props.size);
 const height = computed(() => {
@@ -112,7 +217,46 @@ defineExpose({
     direction: props.direction,
     type: props.type,
     appearance: props.appearance
-  })
+  }),  // 添加获取针脚位置的方法
+  getPinPosition: (pinLabel: string) => {
+    // 在 Pin 组件中，只有一个针脚，所以直接检查标签是否匹配
+    if (pinLabel !== props.label) return null;
+    
+    // 使用自身作为一个唯一标识符，确保针脚位置是基于实际的DOM位置
+    // 这样可以避免document.querySelector获取到非预期的元素
+    const pinElement = document.querySelector(`[data-pin-id="${props.label}-${props.constraint}"]`) as SVGElement;
+    
+    if (pinElement) {
+      // 获取针脚元素的位置
+      const rect = pinElement.getBoundingClientRect();
+      return {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2
+      };
+    }
+    
+    // 如果找不到特定元素，使用计算出的位置
+    // 这种情况下我们需要找到父SVG元素位置
+    const svgElement = document.querySelector(`.pin-component[data-pin-id="${props.label}"]`) as SVGElement;
+    if (!svgElement) {
+      console.error(`找不到针脚 ${props.label} 的SVG元素`);
+      return null;
+    }
+    
+    const svgRect = svgElement.getBoundingClientRect();
+    
+    // 根据针脚类型和方向计算相对位置
+    let pinX = svgRect.left + svgRect.width / 2;
+    let pinY = svgRect.top + svgRect.height / 2;
+    
+    // 添加一个小的随机偏移，确保不同针脚返回不同位置
+    // 仅在测试时启用，生产环境应使用更精确的算法
+    const randomOffset = 0.1;
+    pinX += Math.random() * randomOffset;
+    pinY += Math.random() * randomOffset;
+    
+    return { x: pinX, y: pinY };
+  }
 });
 </script>
 
@@ -120,6 +264,7 @@ defineExpose({
 .pin-component {
   display: block;
   user-select: none;
+  position: relative;
 }
 .interactive {
   cursor: pointer;
@@ -128,4 +273,15 @@ defineExpose({
 .interactive:hover {
   filter: brightness(1.2);
 }
+.pin-tooltip {
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  z-index: 1000;
+  pointer-events: none;
+  white-space: nowrap;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
 </style>
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index cb0856f..e475bdb 100644
--- a/src/views/ProjectView.vue
+++ b/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(() => {