完善 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;
   }

frontend/src/ComponentSymbol.tsx

@@ -3,6 +3,7 @@ import {
   AmesimF000Symbol,
   AmesimForcSymbol,
   AmesimLmechn1Symbol,
+  AmesimPnrp17Symbol,
   AmesimLstp00aSymbol,
   AmesimMecmas21Symbol,
 } from "./componentSymbols/mechanical";
@@ -194,6 +195,7 @@ const symbolRegistry = {
   amesim_mecmas21: { presentation: "framed", render: AmesimMecmas21Symbol },
   amesim_lstp00a: { presentation: "framed", render: AmesimLstp00aSymbol },
   amesim_lmechn1: { presentation: "framed", render: AmesimLmechn1Symbol },
+  amesim_pnrp17: { presentation: "framed", render: AmesimPnrp17Symbol },
   amesim_ideal_air_medium: {
     presentation: "bare",
     render: AmesimIdealAirMediumSymbol,
@@ -261,15 +263,15 @@ const symbolPortAnchors: Partial<
     right: [{ x: 62, y: 24 }],
   },
   amesim_pnvo001_fixed: {
-    left: [{ x: 2, y: 28 }],
-    right: [{ x: 62, y: 28 }],
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
   },
   amesim_pnvo001: {
     left: [
-      { x: 2, y: 16 },
-      { x: 2, y: 32 },
+      { x: 26, y: 46 },
+      { x: 2, y: 24 },
     ],
-    right: [{ x: 62, y: 25 }],
+    right: [{ x: 62, y: 24 }],
   },
   amesim_pnl00r: {
     left: [{ x: 2, y: 24 }],
@@ -321,6 +323,14 @@ const symbolPortAnchors: Partial<
     left: [7, 12, 17, 22, 27, 32, 37, 42].map((y) => ({ x: 5, y })),
     right: [{ x: 59, y: 24 }],
   },
+  amesim_pnrp17: {
+    left: [
+      { x: 25.5, y: 48 },
+      { x: 2, y: 4.4 },
+      { x: 2, y: 24.1 },
+    ],
+    right: [{ x: 62, y: 4.4 }, { x: 62, y: 24.1 }],
+  },
 };
 
 function isRegisteredComponentSymbol(symbol: string): symbol is RegisteredComponentSymbol {

frontend/src/componentSymbols/mechanical.tsx

@@ -7,6 +7,9 @@ import {
 } from "./primitives";
 
 const MECHANICAL_LINE_WIDTH = 1.8;
+const PNRP17_STROKE = "#8b134f";
+const PNRP17_FILL = "#cf9db6";
+const PNRP17_LIGHT_FILL = "#f5ebf0";
 
 const mechanicalStroke = {
   fill: "none",
@@ -215,3 +218,86 @@ export function AmesimLmechn1Symbol() {
     </SymbolSvg>
   );
 }
+
+export function AmesimPnrp17Symbol() {
+  return (
+    <SymbolSvg className="component-symbol-amesim-pnrp17" domain="mechanical">
+      <path
+        d="M13.4 1.1H51.4V3h4.1v2.9h-4.1v1.9H18.2v13.8h-10V7h5.2V5.9H9.3V3h4.1Z"
+        fill={PNRP17_FILL}
+        stroke={PNRP17_STROKE}
+        strokeLinejoin="miter"
+        strokeWidth="1.2"
+      />
+      <path
+        d="M8.2 26.7h12.7v13.8h2v6.7H8.2Z"
+        fill={PNRP17_FILL}
+        stroke={PNRP17_STROKE}
+        strokeLinejoin="miter"
+        strokeWidth="1.2"
+      />
+      <path
+        d="M28 40.5h28.5v6.7H28Z"
+        fill={PNRP17_FILL}
+        stroke={PNRP17_STROKE}
+        strokeLinejoin="miter"
+        strokeWidth="1.2"
+      />
+      <rect
+        fill={PNRP17_LIGHT_FILL}
+        height="34"
+        stroke={PNRP17_STROKE}
+        strokeWidth="1.2"
+        width="7.7"
+        x="40.8"
+        y="7.2"
+      />
+      <rect fill={PNRP17_STROKE} height="34" width="1.8" x="38.8" y="7.2" />
+      <rect
+        fill={PNRP17_LIGHT_FILL}
+        height="2.8"
+        stroke={PNRP17_STROKE}
+        strokeWidth="1.2"
+        width="31.5"
+        x="9.3"
+        y="22.7"
+      />
+      <rect
+        fill={PNRP17_LIGHT_FILL}
+        height="2.8"
+        stroke={PNRP17_STROKE}
+        strokeWidth="1.2"
+        width="7.7"
+        x="47.8"
+        y="22.7"
+      />
+      <path
+        d="M2 4.4h7.3m46.2 0H62M2 24.1h7.3m46.2 0H62M25.5 43.4V48"
+        stroke={PNRP17_STROKE}
+        strokeLinecap="butt"
+        strokeWidth="1.2"
+      />
+      {[15.3, 33].map((centerY) => (
+        <g
+          fill="none"
+          key={centerY}
+          stroke={PNRP17_STROKE}
+          strokeLinecap="butt"
+          strokeLinejoin="miter"
+          strokeWidth="1.1"
+        >
+          <path d={`M28.8 ${centerY}h-3.4`} />
+          <path
+            d={`M25.4 ${centerY - 2.5} 21.5 ${centerY}l3.9 2.5Z`}
+            fill="#ffffff"
+          />
+          <path d={`M30.9 ${centerY}h3.4`} />
+          <path
+            d={`M34.3 ${centerY - 2.5} 38.3 ${centerY} 34.3 ${centerY + 2.5}Z`}
+            fill="#ffffff"
+          />
+        </g>
+      ))}
+    </SymbolSvg>
+  );
+}

frontend/src/componentSymbols/pneumatic.tsx

@@ -7,6 +7,7 @@ import {
 } from "./primitives";
 
 const PNEUMATIC_STROKE_WIDTH = 1.7;
+const PNVO001_STROKE = "#8b134f";
 
 function OrificeBody({
   centerY = 25,
@@ -49,6 +50,46 @@ export function AmesimPnor001Symbol() {
   );
 }
 
+function Pnvo001Body({
+  signalControlled = false,
+}: {
+  signalControlled?: boolean;
+}) {
+  return (
+    <>
+      <path
+        d="M0 24.5h64"
+        stroke={PNVO001_STROKE}
+        strokeLinecap="butt"
+        strokeWidth="2.1"
+      />
+      <path
+        d="M15.5 14.4Q33.4 27 51.2 14.4M15.5 34.8Q33.2 22.4 51.2 34.8"
+        stroke={PNVO001_STROKE}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3.1"
+      />
+      <path
+        d="M19 46.7 44.5 10"
+        stroke={PNVO001_STROKE}
+        strokeLinecap="butt"
+        strokeWidth="2.6"
+      />
+      {signalControlled ? (
+        <path
+          d="M26 48V36.6l7.2 10.1"
+          stroke={PNVO001_STROKE}
+          strokeLinecap="butt"
+          strokeLinejoin="round"
+          strokeWidth="2.3"
+        />
+      ) : null}
+      <path d="M50.6 0 38.6 8.2 48 12.3Z" fill={PNVO001_STROKE} />
+    </>
+  );
+}
+
 /** PNVO001 convenience variant whose opening is fixed by a parameter. */
 export function AmesimPnvo001FixedSymbol() {
   return (
@@ -56,14 +97,7 @@ export function AmesimPnvo001FixedSymbol() {
       className="component-symbol-amesim-pnvo001-fixed-svg"
       domain="pneumatic"
     >
-      <OrificeBody centerY={28} />
-      <path
-        d="M43 4 34 20m9-16-2 7-5-3"
-        stroke={SYMBOL_ACCENT}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.7"
-      />
+      <Pnvo001Body />
     </SymbolSvg>
   );
 }
@@ -75,14 +109,7 @@ export function AmesimPnvo001SignalSymbol() {
       className="component-symbol-amesim-pnvo001-signal-svg"
       domain="pneumatic"
     >
-      <OrificeBody centerY={25} leftPortY={32} />
-      <path
-        d="M2 16h11l21 5m0 0-7-1m7 1-5 5"
-        stroke={SYMBOL_ACCENT}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.7"
-      />
+      <Pnvo001Body signalControlled />
     </SymbolSvg>
   );
 }

frontend/tests/e2e/component-symbols.spec.ts

@@ -28,6 +28,7 @@ const symbolCases: SymbolCase[] = [
   { category: "mechanical", domain: "mechanical", modelType: "amesim_mecmas21" },
   { category: "mechanical", domain: "mechanical", modelType: "amesim_lstp00a" },
   { category: "mechanical", domain: "mechanical", modelType: "amesim_lmechn1" },
+  { category: "mechanical", domain: "mechanical", modelType: "amesim_pnrp17" },
 ];
 
 function physicalPort(
@@ -62,6 +63,22 @@ function signalPort(
   };
 }
 
+function mechanicalPort(
+  name: string,
+  side: "left" | "right",
+  order: number,
+) {
+  return {
+    name,
+    kind: "physical",
+    domain: "mechanical",
+    nominalRole: "bidirectional",
+    positiveFlowDirection: "intoComponent",
+    side,
+    order,
+  };
+}
+
 function portsForSymbol(modelType: string) {
   if (modelType === "amesim_pnor001") {
     return [
@@ -79,6 +96,15 @@ function portsForSymbol(modelType: string) {
   if (modelType === "amesim_step0") {
     return [signalPort("out", "right", "output", 10)];
   }
+  if (modelType === "amesim_pnrp17") {
+    return [
+      physicalPort("port_1", "left", 10),
+      mechanicalPort("port_3", "left", 20),
+      mechanicalPort("port_4", "left", 30),
+      mechanicalPort("port_2", "right", 40),
+      mechanicalPort("port_5", "right", 50),
+    ];
+  }
   return [];
 }
 
@@ -276,6 +302,33 @@ test("全部已移植 AMESim 模型使用专属图标及正确领域配色", asy
   }
 });
 
+test("PNRP17 图标匹配参考结构并将五个端口放在对应接口", async ({ page }) => {
+  await page.goto("/");
+
+  const paletteSymbol = page.locator(
+    'aside.palette [data-component-symbol="amesim_pnrp17"]',
+  );
+  await expect(paletteSymbol).toHaveCount(1);
+  await expect(
+    paletteSymbol.locator('[stroke="#00af00"], [fill="#00af00"]'),
+  ).toHaveCount(0);
+
+  const piston = await dragSymbolToCanvas(page, "amesim_pnrp17", {
+    x: 430,
+    y: 300,
+  });
+  await expectSymbolAnchors(piston, [
+    { portName: "port_1", x: 25.5, y: 48 },
+    { portName: "port_3", x: 2, y: 4.4 },
+    { portName: "port_4", x: 2, y: 24.1 },
+    { portName: "port_2", x: 62, y: 4.4 },
+    { portName: "port_5", x: 62, y: 24.1 },
+  ]);
+  await expect(
+    piston.locator('.port-handle[data-port-name="port_1"]'),
+  ).toHaveClass(/react-flow__handle-bottom/);
+});
+
 test("AMESim canvas nodes use icon anchors and highlight only compatible free ports", async ({
   page,
 }) => {
@@ -319,9 +372,9 @@ test("AMESim canvas nodes use icon anchors and highlight only compatible free po
   ];
   await expectSymbolAnchors(firstOrifice, firstOrificeAnchors);
   await expectSymbolAnchors(signalOrifice, [
-    { portName: "res", x: 2, y: 16 },
-    { portName: "port_2", x: 2, y: 32 },
-    { portName: "port_3", x: 62, y: 25 },
+    { portName: "res", x: 26, y: 46 },
+    { portName: "port_2", x: 2, y: 24 },
+    { portName: "port_3", x: 62, y: 24 },
   ]);
 
   await firstOrifice.locator(".node-symbol").click({ position: { x: 56, y: 42 } });
@@ -349,6 +402,7 @@ test("AMESim canvas nodes use icon anchors and highlight only compatible free po
   const signalInput = signalOrifice.locator(
     '.port-handle[data-port-name="res"]',
   );
+  await expect(signalInput).toHaveClass(/react-flow__handle-bottom/);
   const pneumaticInput = signalOrifice.locator(
     '.port-handle[data-port-name="port_2"]',
   );