完善 PNVO001 与 PNRP17 前端图标及端口交互

按 AMESim 参考样式重绘孔板与气动活塞图标，调整端口锚点和旋转后的连接方向，并补充组件图标及接触连接回归测试。

frontend/src/App.tsx

@@ -1546,7 +1546,7 @@ function transformedPortPlacements(
 
       return {
         port,
-        position: transformedPortPosition(side, rotation, mirrored),
+        position: transformedPortPosition(side, rotation, mirrored, anchor),
         x: renderedX,
         y: renderedY,
       };
@@ -1571,12 +1571,28 @@ function transformedPortPosition(
   side: PortSide,
   rotation: NodeRotation,
   mirrored: boolean,
+  anchor?: { x: number; y: number },
 ) {
   let directionX = side === "left" ? -1 : 1;
+  let directionY = 0;
+
+  if (anchor) {
+    const closestEdge = [
+      { distance: anchor.x, x: -1, y: 0 },
+      { distance: SYMBOL_VIEWBOX_WIDTH - anchor.x, x: 1, y: 0 },
+      { distance: anchor.y, x: 0, y: -1 },
+      { distance: SYMBOL_VIEWBOX_HEIGHT - anchor.y, x: 0, y: 1 },
+    ].reduce((closest, candidate) =>
+      candidate.distance < closest.distance ? candidate : closest,
+    );
+    directionX = closestEdge.x;
+    directionY = closestEdge.y;
+  }
+
   if (mirrored) {
     directionX = -directionX;
   }
-  const [x, y] = rotatePoint(directionX, 0, rotation);
+  const [x, y] = rotatePoint(directionX, directionY, rotation);
   if (x < -0.01) {
     return Position.Left;
   }