diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5b4c058..b64e028 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -65,9 +65,11 @@ import {
   type NodeChange,
   type NodeProps,
   type NodeTypes,
+  type OnNodeDrag,
   useEdgesState,
   useNodesState,
   useReactFlow,
+  useStoreApi,
   useUpdateNodeInternals,
 } from "@xyflow/react";
 import {
@@ -79,9 +81,15 @@ import {
 import { AutoFitView } from "./AutoFitView";
 import {
   ComponentSymbol,
+  componentSymbolPortAnchors,
   componentSymbolPresentation,
   hasComponentSymbol,
 } from "./ComponentSymbol";
+import type { ComponentSymbolPortAnchors } from "./componentSymbols/types";
+import {
+  CONTACT_AWARE_EDGE_TYPE,
+  contactAwareEdgeTypes,
+} from "./ContactAwareEdge";
 import {
   ParameterTable,
   loadParameterColumnLayout,
@@ -114,6 +122,37 @@ type PortDefinition = {
   side: PortSide;
 };
 
+type PortConnectionState =
+  | "idle"
+  | "connected"
+  | "origin"
+  | "compatible"
+  | "incompatible";
+
+type ActivePortConnection = {
+  nodeId: string;
+  portName: string;
+  mode: "drag" | "click";
+};
+
+type ContactSnapCandidate = {
+  connection: Connection;
+  draggedNodeId: string;
+  draggedPortName: string;
+  snappedPosition: { x: number; y: number };
+  targetNodeId: string;
+  targetPortName: string;
+};
+
+type ContactDragSession = {
+  contactEdgeIds: Set<string>;
+  disconnected: boolean;
+  effectiveEdges: SimulationEdge[];
+  multipleNodes: boolean;
+  nodeId: string;
+  startPosition: { x: number; y: number };
+};
+
 type UnitOption = {
   value: string;
   label: string;
@@ -218,6 +257,7 @@ type SimulationNodeData = {
   parameterUnits: Record<string, string>;
   rotation: NodeRotation;
   mirrored: boolean;
+  portConnectionStates?: Record<string, PortConnectionState>;
 };
 
 type SimulationNode = Node<SimulationNodeData, "simulationComponent">;
@@ -320,15 +360,20 @@ type EditorClipboard = {
 type ModelingPaneLayout = {
   paletteWidth: number;
   propertiesWidth: number;
+  componentParametersHeight: number;
 };
 
-type ModelingPaneResizeKind = "palette-width" | "properties-width";
+type ModelingPaneResizeKind =
+  | "palette-width"
+  | "properties-width"
+  | "component-parameters-height";
 
 type ModelingPaneResizeState = {
   kind: ModelingPaneResizeKind;
   pointerId: number;
   startX: number;
-  startWidth: number;
+  startY: number;
+  startSize: number;
 };
 
 type CanvasGridVisibility = {
@@ -363,16 +408,28 @@ const MIN_PALETTE_WIDTH = 180;
 const MAX_PALETTE_WIDTH = 420;
 const MIN_PROPERTIES_WIDTH = 280;
 const MAX_PROPERTIES_WIDTH = 560;
+const PROPERTIES_PANE_SPLITTER_SIZE = 7;
+const MIN_COMPONENT_PARAMETERS_HEIGHT = 120;
+const MIN_SIMULATION_SETTINGS_HEIGHT = 120;
 const MIN_MODELING_CANVAS_WIDTH = 420;
 const MODELING_PANE_KEYBOARD_STEP = 20;
 const HISTORY_LIMIT = 50;
 const NODE_FRAME_WIDTH = 132;
 const NODE_FRAME_HEIGHT = 84;
+const NODE_SYMBOL_WIDTH = 112;
+const NODE_SYMBOL_HEIGHT = 84;
+const SYMBOL_VIEWBOX_WIDTH = 64;
+const SYMBOL_VIEWBOX_HEIGHT = 48;
+const CONTACT_SNAP_RADIUS_PX = 24;
+const CONTACT_DISCONNECT_DISTANCE_PX = 8;
+const CONTACT_GEOMETRY_TOLERANCE = 0.5;
+const CONTACT_DELETE_SEPARATION = 16;
 
 function defaultModelingPaneLayout(): ModelingPaneLayout {
   return {
     paletteWidth: 230,
     propertiesWidth: 330,
+    componentParametersHeight: 340,
   };
 }
 
@@ -382,22 +439,30 @@ function loadModelingPaneLayout(): ModelingPaneLayout {
     const parsed = JSON.parse(
       localStorage.getItem(MODELING_PANE_LAYOUT_KEY) ?? "null",
     ) as Partial<ModelingPaneLayout> | null;
-    if (
-      !parsed ||
-      !Number.isFinite(parsed.paletteWidth) ||
-      !Number.isFinite(parsed.propertiesWidth)
-    ) {
+    if (!parsed) {
       return fallback;
     }
     return {
-      paletteWidth: Math.min(
-        MAX_PALETTE_WIDTH,
-        Math.max(MIN_PALETTE_WIDTH, Number(parsed.paletteWidth)),
-      ),
-      propertiesWidth: Math.min(
-        MAX_PROPERTIES_WIDTH,
-        Math.max(MIN_PROPERTIES_WIDTH, Number(parsed.propertiesWidth)),
-      ),
+      paletteWidth: Number.isFinite(parsed.paletteWidth)
+        ? Math.min(
+            MAX_PALETTE_WIDTH,
+            Math.max(MIN_PALETTE_WIDTH, Number(parsed.paletteWidth)),
+          )
+        : fallback.paletteWidth,
+      propertiesWidth: Number.isFinite(parsed.propertiesWidth)
+        ? Math.min(
+            MAX_PROPERTIES_WIDTH,
+            Math.max(MIN_PROPERTIES_WIDTH, Number(parsed.propertiesWidth)),
+          )
+        : fallback.propertiesWidth,
+      componentParametersHeight: Number.isFinite(
+        parsed.componentParametersHeight,
+      )
+        ? Math.max(
+            MIN_COMPONENT_PARAMETERS_HEIGHT,
+            Number(parsed.componentParametersHeight),
+          )
+        : fallback.componentParametersHeight,
     };
   } catch {
     return fallback;
@@ -407,6 +472,7 @@ function loadModelingPaneLayout(): ModelingPaneLayout {
 function clampModelingPaneLayout(
   layout: ModelingPaneLayout,
   workbenchWidth: number,
+  workbenchHeight: number,
 ): ModelingPaneLayout {
   let paletteWidth = Math.min(
     MAX_PALETTE_WIDTH,
@@ -437,7 +503,25 @@ function clampModelingPaneLayout(
       paletteWidth - MIN_PALETTE_WIDTH,
     );
   }
-  return { paletteWidth, propertiesWidth };
+  const maximumComponentParametersHeight = Math.max(
+    MIN_COMPONENT_PARAMETERS_HEIGHT,
+    workbenchHeight -
+      PROPERTIES_PANE_SPLITTER_SIZE -
+      MIN_SIMULATION_SETTINGS_HEIGHT,
+  );
+  const requestedComponentParametersHeight = Number.isFinite(
+    layout.componentParametersHeight,
+  )
+    ? layout.componentParametersHeight
+    : defaultModelingPaneLayout().componentParametersHeight;
+  const componentParametersHeight = Math.min(
+    maximumComponentParametersHeight,
+    Math.max(
+      MIN_COMPONENT_PARAMETERS_HEIGHT,
+      requestedComponentParametersHeight,
+    ),
+  );
+  return { paletteWidth, propertiesWidth, componentParametersHeight };
 }
 
 function loadCanvasGridVisibility(): CanvasGridVisibility {
@@ -1318,7 +1402,15 @@ function SimulationComponentNode({ id, data, selected }: NodeProps<SimulationNod
   const symbol = data.symbol ?? data.componentType;
   const hasDedicatedSymbol = hasComponentSymbol(symbol);
   const symbolPresentation = componentSymbolPresentation(symbol);
-  const portPlacements = transformedPortPlacements(data.ports, rotation, mirrored);
+  const portAnchors = hasDedicatedSymbol
+    ? componentSymbolPortAnchors(symbol)
+    : undefined;
+  const portPlacements = transformedPortPlacements(
+    data.ports,
+    rotation,
+    mirrored,
+    portAnchors,
+  );
 
   useEffect(() => {
     updateNodeInternals(id);
@@ -1326,7 +1418,7 @@ function SimulationComponentNode({ id, data, selected }: NodeProps<SimulationNod
 
   return (
     <div
-      className={`sim-node sim-node-${data.componentType} ${vertical ? "orientation-vertical" : ""} ${hasDedicatedSymbol ? "" : "generic-component"} ${symbolPresentation === "bare" ? "symbol-presentation-bare" : ""} ${selected ? "selected" : ""}`}
+      className={`sim-node sim-node-${data.componentType} ${vertical ? "orientation-vertical" : ""} ${hasDedicatedSymbol ? "component-icon-only" : "generic-component"} ${symbolPresentation === "bare" ? "symbol-presentation-bare" : ""} ${selected ? "selected" : ""}`}
     >
       <div
         className="sim-node-frame"
@@ -1335,17 +1427,34 @@ function SimulationComponentNode({ id, data, selected }: NodeProps<SimulationNod
         }}
       >
       </div>
-      {portPlacements.map(({ port, position, x, y }) => (
-        <Handle
-          className={`port-handle port-handle-${port.kind}`}
-          id={port.name}
-          key={port.name}
-          position={position}
-          style={{ left: x, top: y, transform: "translate(-50%, -50%)" }}
-          title={`${port.name} (${port.domain})`}
-          type={portHandleType(port)}
-        />
-      ))}
+      {portPlacements.map(({ port, position, x, y }) => {
+        const connectionState = data.portConnectionStates?.[port.name] ?? "idle";
+        const isConnected = connectionState === "connected";
+        return (
+          <Handle
+            aria-label={`${data.label} 端口 ${port.name}`}
+            className={`port-handle port-handle-${port.kind} port-connection-${connectionState}`}
+            data-connected={isConnected ? "true" : "false"}
+            data-connection-state={connectionState}
+            data-port-domain={port.domain}
+            data-port-kind={port.kind}
+            data-port-name={port.name}
+            id={port.name}
+            isConnectable={!isConnected}
+            isConnectableEnd={
+              connectionState === "idle" || connectionState === "compatible"
+            }
+            isConnectableStart={
+              connectionState === "idle" || connectionState === "origin"
+            }
+            key={port.name}
+            position={position}
+            style={{ left: x, top: y, transform: "translate(-50%, -50%)" }}
+            title={`${port.name} (${port.domain})`}
+            type={portHandleType(port)}
+          />
+        );
+      })}
       {hasDedicatedSymbol ? (
         <div className="node-symbol-anchor" aria-hidden="true">
           <div
@@ -1407,16 +1516,25 @@ function transformedPortPlacements(
   ports: PortDefinition[],
   rotation: NodeRotation,
   mirrored: boolean,
+  portAnchors?: ComponentSymbolPortAnchors,
 ) {
   const renderedSize = nodeFrameDimensions(rotation);
 
   return (["left", "right"] as PortSide[]).flatMap((side) => {
     const sidePorts = ports.filter((port) => port.side === side);
+    const sideAnchors = portAnchors?.[side];
+    const usesSymbolAnchors = sideAnchors?.length === sidePorts.length;
     return sidePorts.map((port, index) => {
-      let x = side === "left" ? -NODE_FRAME_WIDTH / 2 : NODE_FRAME_WIDTH / 2;
-      let y =
-        -NODE_FRAME_HEIGHT / 2 +
-        ((index + 1) * NODE_FRAME_HEIGHT) / (sidePorts.length + 1);
+      const anchor = usesSymbolAnchors ? sideAnchors[index] : undefined;
+      let x = anchor
+        ? (anchor.x / SYMBOL_VIEWBOX_WIDTH - 0.5) * NODE_SYMBOL_WIDTH
+        : side === "left"
+          ? -NODE_FRAME_WIDTH / 2
+          : NODE_FRAME_WIDTH / 2;
+      let y = anchor
+        ? (anchor.y / SYMBOL_VIEWBOX_HEIGHT - 0.5) * NODE_SYMBOL_HEIGHT
+        : -NODE_FRAME_HEIGHT / 2 +
+          ((index + 1) * NODE_FRAME_HEIGHT) / (sidePorts.length + 1);
 
       if (mirrored) {
         x = -x;
@@ -1428,7 +1546,7 @@ function transformedPortPlacements(
 
       return {
         port,
-        position: portPosition(renderedX, renderedY, renderedSize),
+        position: transformedPortPosition(side, rotation, mirrored),
         x: renderedX,
         y: renderedY,
       };
@@ -1449,23 +1567,267 @@ function rotatePoint(x: number, y: number, rotation: NodeRotation): [number, num
   return [x, y];
 }
 
-function portPosition(
-  x: number,
-  y: number,
-  size: { width: number; height: number },
+function transformedPortPosition(
+  side: PortSide,
+  rotation: NodeRotation,
+  mirrored: boolean,
 ) {
-  if (Math.abs(x) < 0.01) {
+  let directionX = side === "left" ? -1 : 1;
+  if (mirrored) {
+    directionX = -directionX;
+  }
+  const [x, y] = rotatePoint(directionX, 0, rotation);
+  if (x < -0.01) {
     return Position.Left;
   }
-  if (Math.abs(x - size.width) < 0.01) {
+  if (x > 0.01) {
     return Position.Right;
   }
-  if (Math.abs(y) < 0.01) {
+  if (y < 0) {
     return Position.Top;
   }
   return Position.Bottom;
 }
 
+function nodePortFlowPlacements(node: SimulationNode) {
+  const rotation = normalizeNodeRotation(node.data.rotation);
+  const symbol = node.data.symbol ?? node.data.componentType;
+  const anchors = hasComponentSymbol(symbol)
+    ? componentSymbolPortAnchors(symbol)
+    : undefined;
+  return transformedPortPlacements(
+    node.data.ports,
+    rotation,
+    Boolean(node.data.mirrored),
+    anchors,
+  ).map((placement) => ({
+    ...placement,
+    flowX: node.position.x + placement.x,
+    flowY: node.position.y + placement.y,
+  }));
+}
+
+function nodePortFlowPlacement(node: SimulationNode, portName: string | null) {
+  if (!portName) {
+    return undefined;
+  }
+  return nodePortFlowPlacements(node).find(
+    (placement) => placement.port.name === portName,
+  );
+}
+
+function connectionForContactPorts(
+  draggedNode: SimulationNode,
+  draggedPort: PortDefinition,
+  targetNode: SimulationNode,
+  targetPort: PortDefinition,
+): Connection {
+  if (draggedPort.kind === "signal" && draggedPort.nominalRole === "input") {
+    return {
+      source: targetNode.id,
+      sourceHandle: targetPort.name,
+      target: draggedNode.id,
+      targetHandle: draggedPort.name,
+    };
+  }
+  return {
+    source: draggedNode.id,
+    sourceHandle: draggedPort.name,
+    target: targetNode.id,
+    targetHandle: targetPort.name,
+  };
+}
+
+function findContactSnapCandidate(
+  draggedNode: SimulationNode,
+  nodes: SimulationNode[],
+  edges: SimulationEdge[],
+  maximumDistance: number,
+) {
+  const occupiedPorts = new Set<string>();
+  edges.forEach((edge) => {
+    if (edge.sourceHandle) {
+      occupiedPorts.add(portConnectionKey(edge.source, edge.sourceHandle));
+    }
+    if (edge.targetHandle) {
+      occupiedPorts.add(portConnectionKey(edge.target, edge.targetHandle));
+    }
+  });
+
+  let nearest: (ContactSnapCandidate & { distance: number }) | null = null;
+  const draggedPlacements = nodePortFlowPlacements(draggedNode);
+  for (const draggedPlacement of draggedPlacements) {
+    if (
+      occupiedPorts.has(
+        portConnectionKey(draggedNode.id, draggedPlacement.port.name),
+      )
+    ) {
+      continue;
+    }
+    for (const targetNode of nodes) {
+      if (targetNode.id === draggedNode.id) {
+        continue;
+      }
+      for (const targetPlacement of nodePortFlowPlacements(targetNode)) {
+        if (
+          occupiedPorts.has(
+            portConnectionKey(targetNode.id, targetPlacement.port.name),
+          ) ||
+          !arePortsCompatible(draggedPlacement.port, targetPlacement.port)
+        ) {
+          continue;
+        }
+        const distance = Math.hypot(
+          targetPlacement.flowX - draggedPlacement.flowX,
+          targetPlacement.flowY - draggedPlacement.flowY,
+        );
+        if (distance > maximumDistance || (nearest && distance >= nearest.distance)) {
+          continue;
+        }
+        const connection = connectionForContactPorts(
+          draggedNode,
+          draggedPlacement.port,
+          targetNode,
+          targetPlacement.port,
+        );
+        if (!canConnectPorts(nodes, edges, connection)) {
+          continue;
+        }
+        nearest = {
+          connection,
+          distance,
+          draggedNodeId: draggedNode.id,
+          draggedPortName: draggedPlacement.port.name,
+          snappedPosition: {
+            x:
+              draggedNode.position.x +
+              targetPlacement.flowX -
+              draggedPlacement.flowX,
+            y:
+              draggedNode.position.y +
+              targetPlacement.flowY -
+              draggedPlacement.flowY,
+          },
+          targetNodeId: targetNode.id,
+          targetPortName: targetPlacement.port.name,
+        };
+      }
+    }
+  }
+  if (!nearest) {
+    return null;
+  }
+  const { distance: _distance, ...candidate } = nearest;
+  return candidate;
+}
+
+function sameContactSnapCandidate(
+  first: ContactSnapCandidate | null,
+  second: ContactSnapCandidate | null,
+) {
+  return (
+    first === second ||
+    (Boolean(first) &&
+      Boolean(second) &&
+      first?.draggedNodeId === second?.draggedNodeId &&
+      first?.draggedPortName === second?.draggedPortName &&
+      first?.targetNodeId === second?.targetNodeId &&
+      first?.targetPortName === second?.targetPortName)
+  );
+}
+
+function isContactEdgeGeometry(nodes: SimulationNode[], edge: SimulationEdge) {
+  const sourceNode = nodes.find((node) => node.id === edge.source);
+  const targetNode = nodes.find((node) => node.id === edge.target);
+  if (!sourceNode || !targetNode) {
+    return false;
+  }
+  const source = nodePortFlowPlacement(sourceNode, edge.sourceHandle ?? null);
+  const target = nodePortFlowPlacement(targetNode, edge.targetHandle ?? null);
+  return Boolean(
+    source &&
+      target &&
+      Math.hypot(target.flowX - source.flowX, target.flowY - source.flowY) <=
+        CONTACT_GEOMETRY_TOLERANCE,
+  );
+}
+
+function separateDeletedContactEdges(
+  nodes: SimulationNode[],
+  deletedEdges: SimulationEdge[],
+) {
+  const offsets = new Map<string, { x: number; y: number }>();
+  deletedEdges.forEach((edge) => {
+    if (!isContactEdgeGeometry(nodes, edge)) {
+      return;
+    }
+    const sourceNode = nodes.find((node) => node.id === edge.source);
+    const targetNode = nodes.find((node) => node.id === edge.target);
+    if (!sourceNode || !targetNode) {
+      return;
+    }
+    const sourceSize = nodeFrameDimensions(
+      normalizeNodeRotation(sourceNode.data.rotation),
+    );
+    const targetSize = nodeFrameDimensions(
+      normalizeNodeRotation(targetNode.data.rotation),
+    );
+    const centerDelta = {
+      x:
+        targetNode.position.x +
+        targetSize.width / 2 -
+        (sourceNode.position.x + sourceSize.width / 2),
+      y:
+        targetNode.position.y +
+        targetSize.height / 2 -
+        (sourceNode.position.y + sourceSize.height / 2),
+    };
+    const magnitude = Math.hypot(centerDelta.x, centerDelta.y) || 1;
+    const current = offsets.get(targetNode.id) ?? { x: 0, y: 0 };
+    offsets.set(targetNode.id, {
+      x: current.x + (centerDelta.x / magnitude) * CONTACT_DELETE_SEPARATION,
+      y: current.y + (centerDelta.y / magnitude) * CONTACT_DELETE_SEPARATION,
+    });
+  });
+  if (offsets.size === 0) {
+    return nodes;
+  }
+  return nodes.map((node) => {
+    const offset = offsets.get(node.id);
+    return offset
+      ? {
+          ...node,
+          position: {
+            x: node.position.x + offset.x,
+            y: node.position.y + offset.y,
+          },
+        }
+      : node;
+  });
+}
+
+function disconnectInvalidatedContactEdges(
+  previousNodes: SimulationNode[],
+  nextNodes: SimulationNode[],
+  edges: SimulationEdge[],
+  transformedNodeIds: Set<string>,
+) {
+  const removedEdges: SimulationEdge[] = [];
+  const remainingEdges = edges.filter((edge) => {
+    const affected =
+      transformedNodeIds.has(edge.source) || transformedNodeIds.has(edge.target);
+    const invalidated =
+      affected &&
+      isContactEdgeGeometry(previousNodes, edge) &&
+      !isContactEdgeGeometry(nextNodes, edge);
+    if (invalidated) {
+      removedEdges.push(edge);
+    }
+    return !invalidated;
+  });
+  return { remainingEdges, removedEdges };
+}
+
 type ToolbarButtonProps = {
   label: string;
   icon: LucideIcon;
@@ -2261,6 +2623,10 @@ function FlowWorkbench() {
   const [edges, setEdges, onEdgesChange] = useEdgesState<SimulationEdge>([]);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
+  const [activePortConnection, setActivePortConnection] =
+    useState<ActivePortConnection | null>(null);
+  const [contactSnapCandidate, setContactSnapCandidate] =
+    useState<ContactSnapCandidate | null>(null);
   const [projectName, setProjectName] = useState("demo-system");
   const [simulationConfig, setSimulationConfig] = useState<SimulationConfig>(
     defaultSimulationConfig,
@@ -2300,6 +2666,12 @@ function FlowWorkbench() {
     useState<ModelingPaneLayout>(loadModelingPaneLayout);
   const [activeModelingPaneResize, setActiveModelingPaneResize] =
     useState<ModelingPaneResizeKind | null>(null);
+  const [modelingWorkbenchHeight, setModelingWorkbenchHeight] = useState(0);
+  const effectiveComponentParametersHeight = Number.isFinite(
+    modelingPaneLayout.componentParametersHeight,
+  )
+    ? modelingPaneLayout.componentParametersHeight
+    : defaultModelingPaneLayout().componentParametersHeight;
   const [validationIssues, setValidationIssues] = useState<ValidationIssue[]>([]);
   const [validatedSignature, setValidatedSignature] = useState("");
   const [saveState, setSaveState] = useState("正在检查本地草稿...");
@@ -2310,6 +2682,7 @@ function FlowWorkbench() {
     canRedo: false,
   });
   const reactFlow = useReactFlow<SimulationNode, SimulationEdge>();
+  const reactFlowStore = useStoreApi<SimulationNode, SimulationEdge>();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const workbenchRef = useRef<HTMLElement>(null);
   const modelingPaneResizeRef = useRef<ModelingPaneResizeState | null>(null);
@@ -2325,12 +2698,31 @@ function FlowWorkbench() {
   const activeSimulationIdRef = useRef<string | null>(null);
   const previousActiveViewRef = useRef(activeView);
   const paletteIconPreviewTimerRef = useRef<number | null>(null);
+  const suppressCancelledConnectionRef = useRef(false);
+  const contactDragSessionRef = useRef<ContactDragSession | null>(null);
 
   nodesRef.current = nodes;
   edgesRef.current = edges;
   projectNameRef.current = projectName;
   simulationConfigRef.current = simulationConfig;
 
+  const clearContactSnapCandidate = useCallback(() => {
+    setContactSnapCandidate(null);
+  }, []);
+
+  const cancelPortConnection = useCallback(() => {
+    const flowState = reactFlowStore.getState();
+    if (flowState.connection.inProgress) {
+      suppressCancelledConnectionRef.current = true;
+    }
+    flowState.cancelConnection();
+    // React Flow 12 的拖拽取消不会同时清理点击连线起点。
+    reactFlowStore.setState({ connectionClickStartHandle: null });
+    setActivePortConnection(null);
+    contactDragSessionRef.current = null;
+    clearContactSnapCandidate();
+  }, [clearContactSnapCandidate, reactFlowStore]);
+
   const dismissPaletteIconPreview = useCallback(() => {
     if (paletteIconPreviewTimerRef.current !== null) {
       window.clearTimeout(paletteIconPreviewTimerRef.current);
@@ -2491,19 +2883,26 @@ function FlowWorkbench() {
     if (!workbench || typeof ResizeObserver === "undefined") {
       return;
     }
-    const clampToWorkbench = (width: number) => {
+    const clampToWorkbench = (width: number, height: number) => {
+      if (width <= 0 || height <= 0) {
+        return;
+      }
+      setModelingWorkbenchHeight((current) =>
+        current === height ? current : height,
+      );
       setModelingPaneLayout((current) => {
-        const next = clampModelingPaneLayout(current, width);
+        const next = clampModelingPaneLayout(current, width, height);
         return next.paletteWidth === current.paletteWidth &&
-          next.propertiesWidth === current.propertiesWidth
+          next.propertiesWidth === current.propertiesWidth &&
+          next.componentParametersHeight === current.componentParametersHeight
           ? current
           : next;
       });
     };
-    clampToWorkbench(workbench.clientWidth);
+    clampToWorkbench(workbench.clientWidth, workbench.clientHeight);
     const observer = new ResizeObserver(([entry]) => {
       if (entry) {
-        clampToWorkbench(entry.contentRect.width);
+        clampToWorkbench(entry.contentRect.width, entry.contentRect.height);
       }
     });
     observer.observe(workbench);
@@ -2512,19 +2911,34 @@ function FlowWorkbench() {
 
   const setModelingPaneSize = (
     kind: ModelingPaneResizeKind,
-    requestedWidth: number,
+    requestedSize: number,
   ) => {
-    const workbenchWidth = workbenchRef.current?.getBoundingClientRect().width;
-    if (!workbenchWidth) {
+    const workbenchBounds = workbenchRef.current?.getBoundingClientRect();
+    if (!workbenchBounds) {
       return;
     }
     setModelingPaneLayout((current) => {
+      if (kind === "component-parameters-height") {
+        const maximum = Math.max(
+          MIN_COMPONENT_PARAMETERS_HEIGHT,
+          workbenchBounds.height -
+            PROPERTIES_PANE_SPLITTER_SIZE -
+            MIN_SIMULATION_SETTINGS_HEIGHT,
+        );
+        return {
+          ...current,
+          componentParametersHeight: Math.min(
+            maximum,
+            Math.max(MIN_COMPONENT_PARAMETERS_HEIGHT, requestedSize),
+          ),
+        };
+      }
       if (kind === "palette-width") {
         const maximum = Math.max(
           MIN_PALETTE_WIDTH,
           Math.min(
             MAX_PALETTE_WIDTH,
-            workbenchWidth -
+            workbenchBounds.width -
               current.propertiesWidth -
               MIN_MODELING_CANVAS_WIDTH -
               MODELING_PANE_SPLITTER_SIZE * 2,
@@ -2534,7 +2948,7 @@ function FlowWorkbench() {
           ...current,
           paletteWidth: Math.min(
             maximum,
-            Math.max(MIN_PALETTE_WIDTH, requestedWidth),
+            Math.max(MIN_PALETTE_WIDTH, requestedSize),
           ),
         };
       }
@@ -2542,7 +2956,7 @@ function FlowWorkbench() {
         MIN_PROPERTIES_WIDTH,
         Math.min(
           MAX_PROPERTIES_WIDTH,
-          workbenchWidth -
+          workbenchBounds.width -
             current.paletteWidth -
             MIN_MODELING_CANVAS_WIDTH -
             MODELING_PANE_SPLITTER_SIZE * 2,
@@ -2552,7 +2966,7 @@ function FlowWorkbench() {
         ...current,
         propertiesWidth: Math.min(
           maximum,
-          Math.max(MIN_PROPERTIES_WIDTH, requestedWidth),
+          Math.max(MIN_PROPERTIES_WIDTH, requestedSize),
         ),
       };
     });
@@ -2567,10 +2981,13 @@ function FlowWorkbench() {
       kind,
       pointerId: event.pointerId,
       startX: event.clientX,
-      startWidth:
+      startY: event.clientY,
+      startSize:
         kind === "palette-width"
           ? modelingPaneLayout.paletteWidth
-          : modelingPaneLayout.propertiesWidth,
+          : kind === "properties-width"
+            ? modelingPaneLayout.propertiesWidth
+            : effectiveComponentParametersHeight,
     };
     event.currentTarget.setPointerCapture(event.pointerId);
     setActiveModelingPaneResize(kind);
@@ -2584,11 +3001,14 @@ function FlowWorkbench() {
       return;
     }
     event.preventDefault();
-    const delta = event.clientX - resize.startX;
+    const delta =
+      resize.kind === "component-parameters-height"
+        ? event.clientY - resize.startY
+        : event.clientX - resize.startX;
     setModelingPaneSize(
       resize.kind,
-      resize.startWidth +
-        (resize.kind === "palette-width" ? delta : -delta),
+      resize.startSize +
+        (resize.kind === "properties-width" ? -delta : delta),
     );
   };
 
@@ -2609,20 +3029,26 @@ function FlowWorkbench() {
     event: ReactKeyboardEvent<HTMLDivElement>,
     kind: ModelingPaneResizeKind,
   ) => {
-    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+    const decreaseKey =
+      kind === "component-parameters-height" ? "ArrowUp" : "ArrowLeft";
+    const increaseKey =
+      kind === "component-parameters-height" ? "ArrowDown" : "ArrowRight";
+    if (event.key !== decreaseKey && event.key !== increaseKey) {
       return;
     }
     event.preventDefault();
-    const direction = event.key === "ArrowRight" ? 1 : -1;
-    const currentWidth =
+    const direction = event.key === increaseKey ? 1 : -1;
+    const currentSize =
       kind === "palette-width"
         ? modelingPaneLayout.paletteWidth
-        : modelingPaneLayout.propertiesWidth;
+        : kind === "properties-width"
+          ? modelingPaneLayout.propertiesWidth
+          : effectiveComponentParametersHeight;
     setModelingPaneSize(
       kind,
-      currentWidth +
+      currentSize +
         MODELING_PANE_KEYBOARD_STEP *
-          (kind === "palette-width" ? direction : -direction),
+          (kind === "properties-width" ? -direction : direction),
     );
   };
 
@@ -2632,7 +3058,9 @@ function FlowWorkbench() {
       kind,
       kind === "palette-width"
         ? defaults.paletteWidth
-        : defaults.propertiesWidth,
+        : kind === "properties-width"
+          ? defaults.propertiesWidth
+          : defaults.componentParametersHeight,
     );
   };
 
@@ -2665,16 +3093,22 @@ function FlowWorkbench() {
     setModelingFitRequest((request) => request + 1);
   }, []);
 
-  const changeWorkspaceView = useCallback((view: WorkspaceView) => {
-    setActiveView(view);
-    if (view === "results") {
-      setHasUnreadResults(false);
-    }
-    const nextHash = view === "results" ? "#/results" : "#/modeling";
-    if (window.location.hash !== nextHash) {
-      window.history.pushState({ workspaceView: view }, "", nextHash);
-    }
-  }, []);
+  const changeWorkspaceView = useCallback(
+    (view: WorkspaceView) => {
+      if (view !== "modeling") {
+        cancelPortConnection();
+      }
+      setActiveView(view);
+      if (view === "results") {
+        setHasUnreadResults(false);
+      }
+      const nextHash = view === "results" ? "#/results" : "#/modeling";
+      if (window.location.hash !== nextHash) {
+        window.history.pushState({ workspaceView: view }, "", nextHash);
+      }
+    },
+    [cancelPortConnection],
+  );
 
   const loadSimulationResultsSnapshot = useCallback(
     (snapshot: SimulationResultsSnapshot) => {
@@ -2735,30 +3169,103 @@ function FlowWorkbench() {
     },
     [validationCurrent, validationIssues],
   );
+  const connectedPortKeys = useMemo(() => {
+    const keys = new Set<string>();
+    edges.forEach((edge) => {
+      if (edge.sourceHandle) {
+        keys.add(portConnectionKey(edge.source, edge.sourceHandle));
+      }
+      if (edge.targetHandle) {
+        keys.add(portConnectionKey(edge.target, edge.targetHandle));
+      }
+    });
+    return keys;
+  }, [edges]);
+  const activeConnectionPort = useMemo(
+    () =>
+      activePortConnection
+        ? findNodePort(
+            nodes,
+            activePortConnection.nodeId,
+            activePortConnection.portName,
+          )
+        : undefined,
+    [activePortConnection, nodes],
+  );
   const renderedNodes = useMemo(
     () =>
-      nodes.map((node) => ({
-        ...node,
-        className: validationSeverityByNode.has(node.id)
-          ? `validation-${validationSeverityByNode.get(node.id)}`
-          : node.className,
-      })),
-    [nodes, validationSeverityByNode],
+      nodes.map((node) => {
+        const portConnectionStates = Object.fromEntries(
+          node.data.ports.map((port) => {
+            const key = portConnectionKey(node.id, port.name);
+            let state: PortConnectionState = "idle";
+            if (connectedPortKeys.has(key)) {
+              state = "connected";
+            } else if (
+              contactSnapCandidate?.draggedNodeId === node.id &&
+              contactSnapCandidate.draggedPortName === port.name
+            ) {
+              state = "origin";
+            } else if (
+              contactSnapCandidate?.targetNodeId === node.id &&
+              contactSnapCandidate.targetPortName === port.name
+            ) {
+              state = "compatible";
+            } else if (
+              activePortConnection?.nodeId === node.id &&
+              activePortConnection.portName === port.name
+            ) {
+              state = "origin";
+            } else if (activePortConnection && activeConnectionPort) {
+              state =
+                activePortConnection.nodeId !== node.id &&
+                arePortsCompatible(activeConnectionPort, port)
+                  ? "compatible"
+                  : "incompatible";
+            }
+            return [port.name, state];
+          }),
+        );
+        return {
+          ...node,
+          className: validationSeverityByNode.has(node.id)
+            ? `validation-${validationSeverityByNode.get(node.id)}`
+            : node.className,
+          data: {
+            ...node.data,
+            portConnectionStates,
+          },
+        };
+      }),
+    [
+      activeConnectionPort,
+      activePortConnection,
+      contactSnapCandidate,
+      connectedPortKeys,
+      nodes,
+      validationSeverityByNode,
+    ],
   );
   const renderedEdges = useMemo(
     () =>
       edges.map((edge) => {
         const selected = edge.selected || edge.id === selectedEdgeId;
-        const className = [edge.className, selected ? "editor-edge-selected" : ""]
+        const contact = isContactEdgeGeometry(nodes, edge);
+        const className = [
+          edge.className,
+          contact ? "editor-edge-contact" : "",
+          selected ? "editor-edge-selected" : "",
+        ]
           .filter(Boolean)
           .join(" ");
         return {
           ...edge,
           className: className || undefined,
-          type: "step",
+          type: CONTACT_AWARE_EDGE_TYPE,
+          zIndex: contact ? 2000 : edge.zIndex,
         };
       }),
-    [edges, selectedEdgeId],
+    [edges, nodes, selectedEdgeId],
   );
 
   const updateHistoryAvailability = useCallback(() => {
@@ -2801,6 +3308,7 @@ function FlowWorkbench() {
 
   const restoreSnapshot = useCallback(
     (snapshot: EditorSnapshot) => {
+      cancelPortConnection();
       const restoredNodes = cloneValue(snapshot.nodes).map((node) => ({
         ...node,
         selected: false,
@@ -2813,7 +3321,7 @@ function FlowWorkbench() {
       setSelectedEdgeId(null);
       syncNextNodeNumbers(restoredNodes);
     },
-    [setEdges, setNodes],
+    [cancelPortConnection, setEdges, setNodes],
   );
 
   const undo = useCallback(() => {
@@ -2849,13 +3357,28 @@ function FlowWorkbench() {
       return;
     }
     recordHistory();
-    setNodes((currentNodes) =>
-      currentNodes.map((node) =>
-        selectedIds.has(node.id) ? rotateNodeClockwise(node) : node,
-      ),
+    const previousNodes = nodesRef.current;
+    const rotatedNodes = previousNodes.map((node) =>
+      selectedIds.has(node.id) ? rotateNodeClockwise(node) : node,
     );
+    const { remainingEdges, removedEdges } = disconnectInvalidatedContactEdges(
+      previousNodes,
+      rotatedNodes,
+      edgesRef.current,
+      selectedIds,
+    );
+    nodesRef.current = rotatedNodes;
+    edgesRef.current = remainingEdges;
+    setNodes(rotatedNodes);
+    if (removedEdges.length > 0) {
+      setEdges(remainingEdges);
+      appendConsoleEntry(
+        "info",
+        `旋转使接口分离，已断开 ${removedEdges.length} 个接触连接`,
+      );
+    }
     appendConsoleEntry("info", `已顺时针旋转 ${selectedIds.size} 个组件`);
-  }, [appendConsoleEntry, recordHistory, selectedNodeId, setNodes]);
+  }, [appendConsoleEntry, recordHistory, selectedNodeId, setEdges, setNodes]);
 
   const mirrorSelection = useCallback(() => {
     const selectedNodes = nodesRef.current.filter(
@@ -2868,29 +3391,45 @@ function FlowWorkbench() {
     const selectedIds = new Set(selectedNodes.map((node) => node.id));
     const nextMirrored = !selectedNodes.every((node) => Boolean(node.data.mirrored));
     recordHistory();
-    setNodes((currentNodes) =>
-      currentNodes.map((node) =>
-        selectedIds.has(node.id)
-          ? {
-              ...node,
-              data: {
-                ...node.data,
-                mirrored: nextMirrored,
-              },
-            }
-          : node,
-      ),
+    const previousNodes = nodesRef.current;
+    const mirroredNodes = previousNodes.map((node) =>
+      selectedIds.has(node.id)
+        ? {
+            ...node,
+            data: {
+              ...node.data,
+              mirrored: nextMirrored,
+            },
+          }
+        : node,
     );
+    const { remainingEdges, removedEdges } = disconnectInvalidatedContactEdges(
+      previousNodes,
+      mirroredNodes,
+      edgesRef.current,
+      selectedIds,
+    );
+    nodesRef.current = mirroredNodes;
+    edgesRef.current = remainingEdges;
+    setNodes(mirroredNodes);
+    if (removedEdges.length > 0) {
+      setEdges(remainingEdges);
+      appendConsoleEntry(
+        "info",
+        `镜像使接口分离，已断开 ${removedEdges.length} 个接触连接`,
+      );
+    }
     appendConsoleEntry(
       "info",
       `${nextMirrored ? "已镜像" : "已取消镜像"} ${selectedIds.size} 个组件`,
     );
-  }, [appendConsoleEntry, recordHistory, selectedNodeId, setNodes]);
+  }, [appendConsoleEntry, recordHistory, selectedNodeId, setEdges, setNodes]);
 
   const handleNodesChange = useCallback(
     (changes: NodeChange<SimulationNode>[]) => {
       const removesNodes = changes.some((change) => change.type === "remove");
       if (removesNodes) {
+        cancelPortConnection();
         recordHistory();
       }
       const preview = repairAmesimGasReferences(
@@ -2910,28 +3449,251 @@ function FlowWorkbench() {
         );
       }
     },
-    [appendConsoleEntry, componentDefinitions, recordHistory, setNodes],
+    [
+      appendConsoleEntry,
+      cancelPortConnection,
+      componentDefinitions,
+      recordHistory,
+      setNodes,
+    ],
   );
 
   const handleEdgesChange = useCallback(
     (changes: EdgeChange<SimulationEdge>[]) => {
-      if (changes.some((change) => change.type === "remove")) {
+      const removedEdgeIds = new Set(
+        changes
+          .filter((change) => change.type === "remove")
+          .map((change) => change.id),
+      );
+      if (removedEdgeIds.size > 0) {
         recordHistory();
+        const selectedNodeIds = new Set(
+          nodesRef.current
+            .filter((node) => node.selected || node.id === selectedNodeId)
+            .map((node) => node.id),
+        );
+        const deletedContactEdges = edgesRef.current.filter(
+          (edge) =>
+            removedEdgeIds.has(edge.id) &&
+            !selectedNodeIds.has(edge.source) &&
+            !selectedNodeIds.has(edge.target),
+        );
+        const separatedNodes = separateDeletedContactEdges(
+          nodesRef.current,
+          deletedContactEdges,
+        );
+        if (separatedNodes !== nodesRef.current) {
+          nodesRef.current = separatedNodes;
+          setNodes(separatedNodes);
+        }
       }
       onEdgesChange(changes);
     },
-    [onEdgesChange, recordHistory],
+    [onEdgesChange, recordHistory, selectedNodeId, setNodes],
   );
 
+  const handleNodeDragStart = useCallback<OnNodeDrag<SimulationNode>>(
+    (_event, draggedNode, draggedNodes) => {
+      recordHistory();
+      clearContactSnapCandidate();
+      const effectiveNodes = nodesRef.current.map((node) =>
+        node.id === draggedNode.id
+          ? { ...node, position: { ...draggedNode.position } }
+          : node,
+      );
+      const multipleNodes = draggedNodes.length > 1;
+      const contactEdgeIds = new Set(
+        multipleNodes
+          ? []
+          : edgesRef.current
+              .filter(
+                (edge) =>
+                  (edge.source === draggedNode.id ||
+                    edge.target === draggedNode.id) &&
+                  isContactEdgeGeometry(effectiveNodes, edge),
+              )
+              .map((edge) => edge.id),
+      );
+      contactDragSessionRef.current = {
+        contactEdgeIds,
+        disconnected: false,
+        effectiveEdges: edgesRef.current,
+        multipleNodes,
+        nodeId: draggedNode.id,
+        startPosition: { ...draggedNode.position },
+      };
+    },
+    [clearContactSnapCandidate, recordHistory],
+  );
+
+  const handleNodeDrag = useCallback<OnNodeDrag<SimulationNode>>(
+    (_event, draggedNode) => {
+      const session = contactDragSessionRef.current;
+      if (!session || session.nodeId !== draggedNode.id) {
+        return;
+      }
+
+      const screenDistance =
+        Math.hypot(
+          draggedNode.position.x - session.startPosition.x,
+          draggedNode.position.y - session.startPosition.y,
+        ) * reactFlow.getZoom();
+      if (
+        !session.multipleNodes &&
+        !session.disconnected &&
+        session.contactEdgeIds.size > 0 &&
+        screenDistance >= CONTACT_DISCONNECT_DISTANCE_PX
+      ) {
+        const remainingEdges = session.effectiveEdges.filter(
+          (edge) => !session.contactEdgeIds.has(edge.id),
+        );
+        session.disconnected = true;
+        session.effectiveEdges = remainingEdges;
+        edgesRef.current = remainingEdges;
+        setEdges(remainingEdges);
+        setSelectedEdgeId((current) =>
+          current && session.contactEdgeIds.has(current) ? null : current,
+        );
+        appendConsoleEntry(
+          "info",
+          `已拖开并断开 ${session.contactEdgeIds.size} 个接触连接`,
+        );
+      }
+
+      if (session.multipleNodes) {
+        clearContactSnapCandidate();
+        return;
+      }
+      const effectiveDraggedNode = {
+        ...(nodesRef.current.find((node) => node.id === draggedNode.id) ??
+          draggedNode),
+        position: { ...draggedNode.position },
+      };
+      const effectiveNodes = nodesRef.current.map((node) =>
+        node.id === draggedNode.id ? effectiveDraggedNode : node,
+      );
+      const candidate = findContactSnapCandidate(
+        effectiveDraggedNode,
+        effectiveNodes,
+        session.effectiveEdges,
+        CONTACT_SNAP_RADIUS_PX / Math.max(reactFlow.getZoom(), 0.01),
+      );
+      setContactSnapCandidate((current) =>
+        sameContactSnapCandidate(current, candidate) ? current : candidate,
+      );
+    },
+    [appendConsoleEntry, clearContactSnapCandidate, reactFlow, setEdges],
+  );
+
+  const handleNodeDragStop = useCallback<OnNodeDrag<SimulationNode>>(
+    (_event, draggedNode) => {
+      const session = contactDragSessionRef.current;
+      if (!session || session.nodeId !== draggedNode.id) {
+        clearContactSnapCandidate();
+        return;
+      }
+      const effectiveDraggedNode = {
+        ...(nodesRef.current.find((node) => node.id === draggedNode.id) ??
+          draggedNode),
+        position: { ...draggedNode.position },
+      };
+      const effectiveNodes = nodesRef.current.map((node) =>
+        node.id === draggedNode.id ? effectiveDraggedNode : node,
+      );
+      const candidate = session.multipleNodes
+        ? null
+        : findContactSnapCandidate(
+            effectiveDraggedNode,
+            effectiveNodes,
+            session.effectiveEdges,
+            CONTACT_SNAP_RADIUS_PX / Math.max(reactFlow.getZoom(), 0.01),
+          );
+
+      contactDragSessionRef.current = null;
+      clearContactSnapCandidate();
+      if (!candidate) {
+        return;
+      }
+
+      const snappedNodes = effectiveNodes.map((node) =>
+        node.id === candidate.draggedNodeId
+          ? {
+              ...node,
+              position: { ...candidate.snappedPosition },
+            }
+          : node,
+      );
+      if (!canConnectPorts(snappedNodes, session.effectiveEdges, candidate.connection)) {
+        return;
+      }
+      const contactEdge: SimulationEdge = {
+        ...candidate.connection,
+        id: `edge-contact-${candidate.connection.source}-${candidate.connection.sourceHandle}-${candidate.connection.target}-${candidate.connection.targetHandle}-${Date.now()}`,
+        type: CONTACT_AWARE_EDGE_TYPE,
+      };
+      const connectedEdges = addEdge(contactEdge, session.effectiveEdges);
+      nodesRef.current = snappedNodes;
+      edgesRef.current = connectedEdges;
+      setNodes(snappedNodes);
+      setEdges(connectedEdges);
+      setSelectedEdgeId(null);
+      appendConsoleEntry(
+        "info",
+        `接口已吸附连接 ${candidate.connection.source}.${candidate.connection.sourceHandle ?? "port"} 与 ${candidate.connection.target}.${candidate.connection.targetHandle ?? "port"}`,
+      );
+    },
+    [appendConsoleEntry, clearContactSnapCandidate, reactFlow, setEdges, setNodes],
+  );
+
+  const beginPortConnection = useCallback(
+    (
+      nodeId: string | null,
+      portName: string | null,
+      mode: ActivePortConnection["mode"],
+    ) => {
+      if (!nodeId || !portName || !findNodePort(nodesRef.current, nodeId, portName)) {
+        return;
+      }
+      suppressCancelledConnectionRef.current = false;
+      setActivePortConnection((current) => {
+        if (mode === "drag" && current?.mode === "click") {
+          return current;
+        }
+        return { nodeId, portName, mode };
+      });
+    },
+    [],
+  );
+
+  const endDragPortConnection = useCallback(() => {
+    suppressCancelledConnectionRef.current = false;
+    setActivePortConnection((current) =>
+      current?.mode === "click" ? current : null,
+    );
+  }, []);
+
+  const endClickPortConnection = useCallback(() => {
+    suppressCancelledConnectionRef.current = false;
+    setActivePortConnection(null);
+  }, []);
+
   const onConnect = useCallback(
     (connection: Connection) => {
+      if (suppressCancelledConnectionRef.current) {
+        setActivePortConnection(null);
+        return;
+      }
+      if (!canConnectPorts(nodesRef.current, edgesRef.current, connection)) {
+        setActivePortConnection(null);
+        return;
+      }
       recordHistory();
       setEdges((currentEdges) =>
         addEdge(
           {
             ...connection,
             id: `edge-${connection.source}-${connection.sourceHandle}-${connection.target}-${connection.targetHandle}-${Date.now()}`,
-            type: "step",
+            type: CONTACT_AWARE_EDGE_TYPE,
           },
           currentEdges,
         ),
@@ -2940,13 +3702,16 @@ function FlowWorkbench() {
         "info",
         `已连接 ${connection.source}.${connection.sourceHandle ?? "port"} 与 ${connection.target}.${connection.targetHandle ?? "port"}`,
       );
+      suppressCancelledConnectionRef.current = false;
+      setActivePortConnection(null);
     },
     [appendConsoleEntry, recordHistory, setEdges],
   );
 
   const isValidConnection = useCallback(
-    (connection: Connection | SimulationEdge) => canConnectPorts(nodes, connection),
-    [nodes],
+    (connection: Connection | SimulationEdge) =>
+      canConnectPorts(nodes, edges, connection),
+    [edges, nodes],
   );
 
   const onDragStart = (event: DragEvent<HTMLButtonElement>, type: string) => {
@@ -3281,6 +4046,7 @@ function FlowWorkbench() {
 
   const applyProject = useCallback(
     (project: ReactFlowProjectPayload, message: string, addToHistory = true) => {
+      cancelPortConnection();
       if (addToHistory) {
         recordHistory();
       }
@@ -3329,6 +4095,7 @@ function FlowWorkbench() {
     },
     [
       appendConsoleEntry,
+      cancelPortConnection,
       componentDefinitions,
       recordHistory,
       requestModelingFitView,
@@ -3738,21 +4505,33 @@ function FlowWorkbench() {
       appendConsoleEntry("warning", "请先选择需要删除的组件或连接");
       return;
     }
+    cancelPortConnection();
     recordHistory();
     const remainingNodes = nodesRef.current.filter((node) => !nodeIds.has(node.id));
     const repairedGasReferences = repairAmesimGasReferences(
       remainingNodes,
       componentDefinitions,
     );
-    setNodes(repairedGasReferences.nodes);
-    setEdges((currentEdges) =>
-      currentEdges.filter(
+    const explicitlyDeletedEdges = edgesRef.current.filter(
+      (edge) =>
+        edgeIds.has(edge.id) &&
+        !nodeIds.has(edge.source) &&
+        !nodeIds.has(edge.target),
+    );
+    const separatedNodes = separateDeletedContactEdges(
+      repairedGasReferences.nodes,
+      explicitlyDeletedEdges,
+    );
+    const remainingEdges = edgesRef.current.filter(
         (edge) =>
           !edgeIds.has(edge.id) &&
           !nodeIds.has(edge.source) &&
           !nodeIds.has(edge.target),
-      ),
     );
+    nodesRef.current = separatedNodes;
+    edgesRef.current = remainingEdges;
+    setNodes(separatedNodes);
+    setEdges(remainingEdges);
     setSelectedNodeId(null);
     setSelectedEdgeId(null);
     appendConsoleEntry(
@@ -3767,6 +4546,7 @@ function FlowWorkbench() {
     }
   }, [
     appendConsoleEntry,
+    cancelPortConnection,
     componentDefinitions,
     recordHistory,
     selectedEdgeId,
@@ -3859,10 +4639,14 @@ function FlowWorkbench() {
   useEffect(() => {
     const previousView = previousActiveViewRef.current;
     previousActiveViewRef.current = activeView;
+    if (activeView !== "modeling") {
+      cancelPortConnection();
+      return;
+    }
     if (activeView === "modeling" && previousView !== "modeling") {
       requestModelingFitView();
     }
-  }, [activeView, requestModelingFitView]);
+  }, [activeView, cancelPortConnection, requestModelingFitView]);
 
   useEffect(() => {
     if (activeView === "results" && hasUnreadResults) {
@@ -3876,6 +4660,11 @@ function FlowWorkbench() {
     }
     const handleKeyDown = (event: KeyboardEvent) => {
       const key = event.key.toLowerCase();
+      if (event.key === "Escape" && activePortConnection) {
+        event.preventDefault();
+        cancelPortConnection();
+        return;
+      }
       if (event.ctrlKey && !event.shiftKey && key === "r") {
         event.preventDefault();
         rotateSelection();
@@ -3908,7 +4697,9 @@ function FlowWorkbench() {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [
+    activePortConnection,
     activeView,
+    cancelPortConnection,
     copySelection,
     mirrorSelection,
     pasteSelection,
@@ -4457,6 +5248,7 @@ function FlowWorkbench() {
           {
             "--palette-width": `${modelingPaneLayout.paletteWidth}px`,
             "--properties-width": `${modelingPaneLayout.propertiesWidth}px`,
+            "--component-parameters-height": `${effectiveComponentParametersHeight}px`,
           } as CSSProperties
         }
       >
@@ -4682,12 +5474,25 @@ function FlowWorkbench() {
             connectionMode={ConnectionMode.Loose}
             connectionLineType={ConnectionLineType.Step}
             connectionRadius={24}
-            defaultEdgeOptions={{ interactionWidth: 28, type: "step" }}
+            connectionDragThreshold={0}
+            defaultEdgeOptions={{
+              interactionWidth: 28,
+              type: CONTACT_AWARE_EDGE_TYPE,
+            }}
             edges={renderedEdges}
+            edgeTypes={contactAwareEdgeTypes}
             nodeTypes={nodeTypes}
             nodes={renderedNodes}
             deleteKeyCode={["Backspace", "Delete"]}
             onConnect={onConnect}
+            onConnectEnd={endDragPortConnection}
+            onConnectStart={(_, { nodeId, handleId }) =>
+              beginPortConnection(nodeId, handleId, "drag")
+            }
+            onClickConnectEnd={endClickPortConnection}
+            onClickConnectStart={(_, { nodeId, handleId }) =>
+              beginPortConnection(nodeId, handleId, "click")
+            }
             isValidConnection={isValidConnection}
             minZoom={0.1}
             onEdgeClick={(_, edge) => {
@@ -4705,10 +5510,13 @@ function FlowWorkbench() {
               setSelectedNodeId(node.id);
               setSelectedEdgeId(null);
             }}
-            onNodeDragStart={recordHistory}
+            onNodeDrag={handleNodeDrag}
+            onNodeDragStart={handleNodeDragStart}
+            onNodeDragStop={handleNodeDragStop}
             onNodesChange={handleNodesChange}
             onNodesDelete={(deletedNodes) => {
               setSelectedNodeId(null);
+              cancelPortConnection();
               if (deletedNodes.length > 0) {
                 appendConsoleEntry("info", `已删除 ${deletedNodes.length} 个组件`);
               }
@@ -4716,6 +5524,7 @@ function FlowWorkbench() {
             onPaneClick={() => {
               setSelectedNodeId(null);
               setSelectedEdgeId(null);
+              cancelPortConnection();
             }}
             onSelectionChange={({ nodes: selectedNodes, edges: selectedEdges }) => {
               setSelectedNodeId(selectedNodes.length === 1 ? selectedNodes[0].id : null);
@@ -4795,28 +5604,79 @@ function FlowWorkbench() {
         </div>
 
         <aside className="properties">
-          <div className="panel-title">组件参数</div>
-          {selectedNode && selectedDefinition ? (
-            <ParameterTable
-              ariaLabel="组件参数"
-              availableWidth={parameterTableAvailableWidth}
-              columnLayout={parameterColumnLayout}
-              onColumnLayoutChange={setParameterColumnLayout}
-              rows={componentParameterRows}
-            />
-          ) : (
-            <div className="empty-state">选择画布上的组件后编辑参数</div>
-          )}
+          <section
+            aria-label="组件参数子栏"
+            className="properties-subpane component-parameters-pane"
+          >
+            <div className="panel-title">组件参数</div>
+            <div className="properties-subpane-content">
+              {selectedNode && selectedDefinition ? (
+                <ParameterTable
+                  ariaLabel="组件参数"
+                  availableWidth={parameterTableAvailableWidth}
+                  columnLayout={parameterColumnLayout}
+                  onColumnLayoutChange={setParameterColumnLayout}
+                  rows={componentParameterRows}
+                />
+              ) : (
+                <div className="empty-state">选择画布上的组件后编辑参数</div>
+              )}
+            </div>
+          </section>
 
-          <div className="panel-title">仿真设置</div>
-          <ParameterTable
-            ariaLabel="仿真设置"
-            availableWidth={parameterTableAvailableWidth}
-            columnLayout={parameterColumnLayout}
-            onColumnLayoutChange={setParameterColumnLayout}
-            rows={simulationSettingRows}
-          />
+          <div
+            aria-label="调整组件参数和仿真设置区域高度"
+            aria-orientation="horizontal"
+            aria-valuemax={Math.max(
+              MIN_COMPONENT_PARAMETERS_HEIGHT,
+              effectiveComponentParametersHeight,
+              modelingWorkbenchHeight -
+                PROPERTIES_PANE_SPLITTER_SIZE -
+                MIN_SIMULATION_SETTINGS_HEIGHT,
+            )}
+            aria-valuemin={MIN_COMPONENT_PARAMETERS_HEIGHT}
+            aria-valuenow={Math.round(
+              effectiveComponentParametersHeight,
+            )}
+            className="properties-pane-splitter"
+            onDoubleClick={() =>
+              resetModelingPaneSize("component-parameters-height")
+            }
+            onKeyDown={(event) =>
+              resizeModelingPaneWithKeyboard(
+                event,
+                "component-parameters-height",
+              )
+            }
+            onLostPointerCapture={stopModelingPaneResize}
+            onPointerCancel={stopModelingPaneResize}
+            onPointerDown={(event) =>
+              startModelingPaneResize(event, "component-parameters-height")
+            }
+            onPointerMove={moveModelingPaneResize}
+            onPointerUp={stopModelingPaneResize}
+            role="separator"
+            tabIndex={0}
+            title="拖动调整两个参数子栏的高度，双击恢复默认"
+          >
+            <span aria-hidden="true" />
+          </div>
 
+          <section
+            aria-label="仿真设置子栏"
+            className="properties-subpane simulation-settings-pane"
+          >
+            <div className="panel-title">仿真设置</div>
+            <div className="properties-subpane-content">
+              <ParameterTable
+                ariaLabel="仿真设置"
+                availableWidth={parameterTableAvailableWidth}
+                columnLayout={parameterColumnLayout}
+                onColumnLayoutChange={setParameterColumnLayout}
+                rows={simulationSettingRows}
+              />
+            </div>
+          </section>
         </aside>
         </main>
       </div>
@@ -5008,12 +5868,16 @@ function findNodePort(
     ?.data.ports.find((port) => port.name === portName);
 }
 
+function portConnectionKey(nodeId: string, portName: string) {
+  return `${nodeId}:${portName}`;
+}
+
 function arePortsCompatible(first: PortDefinition, second: PortDefinition) {
-  if (first.kind !== second.kind) {
+  if (first.kind !== second.kind || first.domain !== second.domain) {
     return false;
   }
   if (first.kind === "physical") {
-    return first.domain === second.domain;
+    return true;
   }
   return new Set([first.nominalRole, second.nominalRole]).size === 2 &&
     [first.nominalRole, second.nominalRole].every((role) =>
@@ -5023,6 +5887,7 @@ function arePortsCompatible(first: PortDefinition, second: PortDefinition) {
 
 function canConnectPorts(
   nodes: SimulationNode[],
+  edges: SimulationEdge[],
   connection: Connection | SimulationEdge,
 ) {
   if (
@@ -5034,7 +5899,22 @@ function canConnectPorts(
   }
   const first = findNodePort(nodes, connection.source, connection.sourceHandle ?? null);
   const second = findNodePort(nodes, connection.target, connection.targetHandle ?? null);
-  return Boolean(first && second && arePortsCompatible(first, second));
+  if (!first || !second || !arePortsCompatible(first, second)) {
+    return false;
+  }
+  const firstKey = portConnectionKey(connection.source, connection.sourceHandle!);
+  const secondKey = portConnectionKey(connection.target, connection.targetHandle!);
+  return !edges.some(
+    (edge) =>
+      (typeof edge.sourceHandle === "string" &&
+        portConnectionKey(edge.source, edge.sourceHandle) === firstKey) ||
+      (typeof edge.targetHandle === "string" &&
+        portConnectionKey(edge.target, edge.targetHandle) === firstKey) ||
+      (typeof edge.sourceHandle === "string" &&
+        portConnectionKey(edge.source, edge.sourceHandle) === secondKey) ||
+      (typeof edge.targetHandle === "string" &&
+        portConnectionKey(edge.target, edge.targetHandle) === secondKey),
+  );
 }
 
 function connectionIdentity(edge: SimulationEdge, unordered: boolean) {
diff --git a/frontend/src/ComponentSymbol.tsx b/frontend/src/ComponentSymbol.tsx
index 41d947b..da1867c 100644
--- a/frontend/src/ComponentSymbol.tsx
+++ b/frontend/src/ComponentSymbol.tsx
@@ -25,6 +25,7 @@ import { SymbolSvg } from "./componentSymbols/primitives";
 import { AmesimStep0Symbol, AmesimUd00Symbol } from "./componentSymbols/signals";
 import { AmesimPnch012Symbol, AmesimPnch023Symbol } from "./componentSymbols/storage";
 import type {
+  ComponentSymbolPortAnchors,
   ComponentSymbolPresentation,
   SymbolDefinition,
 } from "./componentSymbols/types";
@@ -60,7 +61,7 @@ function CylinderSymbol() {
 function TankSymbol() {
   return (
     <SymbolSvg>
-      <path d="M32 2v5M32 41v5" stroke="currentColor" strokeWidth="2" />
+      <path d="M2 24h14M32 2v5M32 41v5" stroke="currentColor" strokeWidth="2" />
       <path
         d="M16 13c0-4 7.2-7 16-7s16 3 16 7v22c0 4-7.2 7-16 7s-16-3-16-7V13Z"
         fill="#dcfce7"
@@ -75,7 +76,7 @@ function TankSymbol() {
 function PipeSymbol() {
   return (
     <SymbolSvg>
-      <path d="M2 19h60M2 29h60" stroke="currentColor" strokeWidth="2" />
+      <path d="M2 24h7M55 24h7M9 19h46M9 29h46" stroke="currentColor" strokeWidth="2" />
       <path d="M9 17v14M55 17v14" stroke="currentColor" strokeWidth="2" />
     </SymbolSvg>
   );
@@ -99,8 +100,18 @@ function OrificeSymbol() {
 function TeeSymbol() {
   return (
     <SymbolSvg>
-      <path d="M2 27h60M32 27V3" stroke="currentColor" strokeWidth="8" />
-      <path d="M2 27h60M32 27V3" stroke="#f8fafc" strokeWidth="4" />
+      <path
+        d="M2 24h28M30 24C42 24 44 12 62 12M30 24c12 0 14 12 32 12"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="7"
+      />
+      <path
+        d="M2 24h28M30 24C42 24 44 12 62 12M30 24c12 0 14 12 32 12"
+        stroke="#f8fafc"
+        strokeLinecap="round"
+        strokeWidth="3"
+      />
     </SymbolSvg>
   );
 }
@@ -195,6 +206,123 @@ const symbolRegistry = {
 
 type RegisteredComponentSymbol = keyof typeof symbolRegistry;
 
+const symbolPortAnchors: Partial<
+  Record<RegisteredComponentSymbol, ComponentSymbolPortAnchors>
+> = {
+  cylinder: {
+    left: [{ x: 3, y: 24 }],
+    right: [{ x: 61, y: 24 }],
+  },
+  tank: { left: [{ x: 2, y: 24 }] },
+  pipe: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  orifice: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  tee: {
+    left: [{ x: 2, y: 24 }],
+    right: [
+      { x: 62, y: 12 },
+      { x: 62, y: 36 },
+    ],
+  },
+  generic: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  signal: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  junction: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  amesim_pnpl01: { left: [{ x: 2, y: 24 }] },
+  amesim_pnch023: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  amesim_pnch012: {
+    left: [
+      { x: 2, y: 16 },
+      { x: 2, y: 32 },
+    ],
+    right: [
+      { x: 62, y: 16 },
+      { x: 62, y: 32 },
+    ],
+  },
+  amesim_pnor001: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  amesim_pnvo001_fixed: {
+    left: [{ x: 2, y: 28 }],
+    right: [{ x: 62, y: 28 }],
+  },
+  amesim_pnvo001: {
+    left: [
+      { x: 2, y: 16 },
+      { x: 2, y: 32 },
+    ],
+    right: [{ x: 62, y: 25 }],
+  },
+  amesim_pnl00r: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  amesim_pnl0001: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  amesim_pnl0002: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  amesim_pnl0003: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  amesim_pn3node2: {
+    left: [{ x: 3, y: 24 }],
+    right: [
+      { x: 61, y: 12 },
+      { x: 61, y: 36 },
+    ],
+  },
+  amesim_p4node2: {
+    left: [{ x: 3, y: 24 }],
+    right: [
+      { x: 61, y: 8 },
+      { x: 61, y: 24 },
+      { x: 61, y: 40 },
+    ],
+  },
+  amesim_step0: { right: [{ x: 60, y: 24 }] },
+  amesim_ud00: { right: [{ x: 60, y: 24 }] },
+  amesim_f000: { right: [{ x: 62, y: 24 }] },
+  amesim_forc: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  amesim_mecmas21: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  amesim_lstp00a: {
+    left: [{ x: 2, y: 24 }],
+    right: [{ x: 62, y: 24 }],
+  },
+  amesim_lmechn1: {
+    left: [7, 12, 17, 22, 27, 32, 37, 42].map((y) => ({ x: 5, y })),
+    right: [{ x: 59, y: 24 }],
+  },
+};
+
 function isRegisteredComponentSymbol(symbol: string): symbol is RegisteredComponentSymbol {
   return Object.prototype.hasOwnProperty.call(symbolRegistry, symbol);
 }
@@ -211,6 +339,14 @@ export function componentSymbolPresentation(
     : "framed";
 }
 
+export function componentSymbolPortAnchors(
+  symbol: string,
+): ComponentSymbolPortAnchors | undefined {
+  return isRegisteredComponentSymbol(symbol)
+    ? symbolPortAnchors[symbol]
+    : undefined;
+}
+
 export function ComponentSymbol({
   symbol,
   surface,
diff --git a/frontend/src/ContactAwareEdge.tsx b/frontend/src/ContactAwareEdge.tsx
new file mode 100644
index 0000000..6564787
--- /dev/null
+++ b/frontend/src/ContactAwareEdge.tsx
@@ -0,0 +1,76 @@
+import {
+  BaseEdge,
+  getSmoothStepPath,
+  type EdgeProps,
+  type EdgeTypes,
+} from "@xyflow/react";
+
+export const CONTACT_AWARE_EDGE_TYPE = "contact-aware";
+// React Flow 在 Loose 模式下会把重叠 Handle 的边端点分别放在圆点两侧，
+// 因此两个端口中心完全重合时，edge props 仍会相差约一个 Handle 直径。
+export const CONTACT_EDGE_SCREEN_TOLERANCE = 12;
+
+export function ContactAwareEdge({
+  id,
+  interactionWidth,
+  markerEnd,
+  markerStart,
+  sourcePosition,
+  sourceX,
+  sourceY,
+  style,
+  targetPosition,
+  targetX,
+  targetY,
+}: EdgeProps) {
+  const distance = Math.hypot(targetX - sourceX, targetY - sourceY);
+  if (distance <= CONTACT_EDGE_SCREEN_TOLERANCE) {
+    const centerX = (sourceX + targetX) / 2;
+    const centerY = (sourceY + targetY) / 2;
+    return (
+      <>
+        <circle
+          aria-label="接触连接"
+          className="contact-edge-hit"
+          cx={centerX}
+          cy={centerY}
+          data-contact-edge-id={id}
+          r={12}
+          role="button"
+          tabIndex={0}
+        />
+        <circle
+          aria-hidden="true"
+          className="contact-edge-marker"
+          cx={centerX}
+          cy={centerY}
+          r={3.5}
+        />
+      </>
+    );
+  }
+
+  const [edgePath] = getSmoothStepPath({
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY,
+    borderRadius: 0,
+  });
+  return (
+    <BaseEdge
+      id={id}
+      interactionWidth={interactionWidth}
+      markerEnd={markerEnd}
+      markerStart={markerStart}
+      path={edgePath}
+      style={style}
+    />
+  );
+}
+
+export const contactAwareEdgeTypes: EdgeTypes = {
+  [CONTACT_AWARE_EDGE_TYPE]: ContactAwareEdge,
+};
diff --git a/frontend/src/SimulationResultsView.tsx b/frontend/src/SimulationResultsView.tsx
index 4b074c8..0405a2e 100644
--- a/frontend/src/SimulationResultsView.tsx
+++ b/frontend/src/SimulationResultsView.tsx
@@ -34,6 +34,10 @@ import {
   type WorkspaceView,
 } from "./WorkspaceViewTabs";
 import { AutoFitView } from "./AutoFitView";
+import {
+  CONTACT_AWARE_EDGE_TYPE,
+  contactAwareEdgeTypes,
+} from "./ContactAwareEdge";
 
 type ResultPortDefinition = {
   name: string;
@@ -55,6 +59,10 @@ type ResultNodeData = {
   mirrored: boolean;
 };
 
+type ResultRenderedNodeData = ResultNodeData & {
+  portConnectionStates: Record<string, "idle" | "connected">;
+};
+
 type ResultProjectNode = {
   id: string;
   type: "simulationComponent";
@@ -340,8 +348,6 @@ export function SimulationResultsView({
   const [activePaneResize, setActivePaneResize] =
     useState<PaneResizeKind | null>(null);
   const [csvDownloadPending, setCsvDownloadPending] = useState(false);
-  const [multiCreateMenuOpen, setMultiCreateMenuOpen] = useState(false);
-  const [mixedCreateMenuOpen, setMixedCreateMenuOpen] = useState(false);
   const [activeMultiPickerWindowId, setActiveMultiPickerWindowId] =
     useState<string | null>(null);
   const [multiDropTargetWindowId, setMultiDropTargetWindowId] =
@@ -428,7 +434,21 @@ export function SimulationResultsView({
 
   const selectedNode =
     snapshot.project.nodes.find((node) => node.id === selectedNodeId) ?? null;
-  const readOnlyNodes = useMemo<Node<ResultNodeData, "simulationComponent">[]>(
+  const connectedPortKeys = useMemo(() => {
+    const keys = new Set<string>();
+    snapshot.project.edges.forEach((edge) => {
+      if (edge.sourceHandle) {
+        keys.add(`${edge.source}:${edge.sourceHandle}`);
+      }
+      if (edge.targetHandle) {
+        keys.add(`${edge.target}:${edge.targetHandle}`);
+      }
+    });
+    return keys;
+  }, [snapshot.project.edges]);
+  const readOnlyNodes = useMemo<
+    Node<ResultRenderedNodeData, "simulationComponent">[]
+  >(
     () =>
       snapshot.project.nodes.map((node) => ({
         ...node,
@@ -438,8 +458,19 @@ export function SimulationResultsView({
         focusable: true,
         selectable: true,
         selected: node.id === selectedNodeId,
+        data: {
+          ...node.data,
+          portConnectionStates: Object.fromEntries(
+            node.data.ports.map((port) => [
+              port.name,
+              connectedPortKeys.has(`${node.id}:${port.name}`)
+                ? "connected"
+                : "idle",
+            ]),
+          ),
+        },
       })),
-    [selectedNodeId, snapshot.project.nodes],
+    [connectedPortKeys, selectedNodeId, snapshot.project.nodes],
   );
   const readOnlyEdges = useMemo<Edge[]>(
     () =>
@@ -447,7 +478,7 @@ export function SimulationResultsView({
         ...edge,
         focusable: false,
         selectable: false,
-        type: "step",
+        type: CONTACT_AWARE_EDGE_TYPE,
       })),
     [snapshot.project.edges],
   );
@@ -480,23 +511,6 @@ export function SimulationResultsView({
         ),
     [snapshot.result.series, snapshot.result.variables],
   );
-  const multiCurveUnitGroups = useMemo(() => {
-    const groups = new Map<string, ResultVariableMetadata[]>();
-    plottableResultVariables.forEach((variable) => {
-      const group = groups.get(variable.unit) ?? [];
-      group.push(variable);
-      groups.set(variable.unit, group);
-    });
-    return Array.from(groups, ([unit, variables]) => ({ unit, variables }))
-      .filter((group) => group.variables.length >= 2)
-      .sort((first, second) =>
-        (first.unit || "无量纲").localeCompare(
-          second.unit || "无量纲",
-          "zh-CN",
-        ),
-      );
-  }, [plottableResultVariables]);
-
   const setPaneSize = (kind: PaneResizeKind, requestedSize: number) => {
     const bounds = workbenchRef.current?.getBoundingClientRect();
     if (!bounds) {
@@ -659,15 +673,12 @@ export function SimulationResultsView({
     ]);
   };
 
-  const addMultiChartWindow = (
-    variableKey: string,
+  const addCombinedChartWindow = (
+    kind: "multi" | "mixed",
     requestedPosition?: { x: number; y: number },
   ) => {
     const workspace = workspaceRef.current;
-    const variable = snapshot.result.variables.find(
-      (item) => item.key === variableKey,
-    );
-    if (!workspace || !variable) {
+    if (!workspace) {
       return;
     }
 
@@ -680,8 +691,8 @@ export function SimulationResultsView({
     );
     const index = chartWindows.length;
     const position = requestedPosition ?? {
-      x: 28 + (index % 3) * 28,
-      y: 28 + (index % 4) * 28,
+      x: (kind === "mixed" ? 38 : 28) + (index % 3) * 28,
+      y: (kind === "mixed" ? 38 : 28) + (index % 4) * 28,
     };
     const id = `chart-${nextWindowIdRef.current++}`;
     const zIndex = ++topZIndexRef.current;
@@ -689,68 +700,21 @@ export function SimulationResultsView({
       ...current,
       {
         id,
-        kind: "multi",
-        variableKey,
-        variableKeys: [variableKey],
+        kind,
+        variableKey: "",
+        variableKeys: [],
         hiddenVariableKeys: [],
-        variableUnits: { [variableKey]: variable.unit },
+        variableUnits: {},
         x: clampWindowCoordinate(position.x, bounds.width, size.width),
         y: clampWindowCoordinate(position.y, bounds.height, size.height),
         width: size.width,
         height: size.height,
-        unit: variable.unit,
+        unit: "",
         cursorEnabled: false,
         zIndex,
       },
     ]);
-    setActiveMultiPickerWindowId(id);
-  };
-
-  const addMixedChartWindow = (
-    variableKey: string,
-    requestedPosition?: { x: number; y: number },
-  ) => {
-    const workspace = workspaceRef.current;
-    const variable = snapshot.result.variables.find(
-      (item) => item.key === variableKey,
-    );
-    if (!workspace || !variable) {
-      return;
-    }
-
-    const bounds = workspace.getBoundingClientRect();
-    const size = clampChartWindowDimensions(
-      MULTI_CHART_WINDOW_WIDTH,
-      MULTI_CHART_WINDOW_HEIGHT,
-      bounds.width,
-      bounds.height,
-    );
-    const index = chartWindows.length;
-    const position = requestedPosition ?? {
-      x: 38 + (index % 3) * 28,
-      y: 38 + (index % 4) * 28,
-    };
-    const id = `chart-${nextWindowIdRef.current++}`;
-    const zIndex = ++topZIndexRef.current;
-    setChartWindows((current) => [
-      ...current,
-      {
-        id,
-        kind: "mixed",
-        variableKey,
-        variableKeys: [variableKey],
-        hiddenVariableKeys: [],
-        variableUnits: { [variableKey]: variable.unit },
-        x: clampWindowCoordinate(position.x, bounds.width, size.width),
-        y: clampWindowCoordinate(position.y, bounds.height, size.height),
-        width: size.width,
-        height: size.height,
-        unit: variable.unit,
-        cursorEnabled: false,
-        zIndex,
-      },
-    ]);
-    setActiveMultiPickerWindowId(id);
+    setActiveMultiPickerWindowId(null);
   };
 
   const toggleChartCurveVisibility = (
@@ -774,41 +738,47 @@ export function SimulationResultsView({
   };
 
   const removeChartCurve = (windowId: string, variableKey: string) => {
-    const removesWindow = chartWindows.some(
+    const resetsWindow = chartWindows.some(
       (window) =>
         window.id === windowId &&
         window.kind !== "single" &&
         window.variableKeys.length === 1,
     );
     setChartWindows((current) =>
-      current.flatMap((window) => {
+      current.map((window) => {
         if (window.id !== windowId || window.kind === "single") {
-          return [window];
+          return window;
         }
         if (window.variableKeys.length === 1) {
-          return [];
+          return {
+            ...window,
+            variableKey: "",
+            variableKeys: [],
+            hiddenVariableKeys: [],
+            variableUnits: {},
+            unit: "",
+            cursorEnabled: false,
+          };
         }
         const variableKeys = window.variableKeys.filter(
           (key) => key !== variableKey,
         );
-        return [
-          {
-            ...window,
-            variableKey: variableKeys[0],
-            variableKeys,
-            hiddenVariableKeys: window.hiddenVariableKeys.filter(
-              (key) => key !== variableKey,
+        return {
+          ...window,
+          variableKey: variableKeys[0],
+          variableKeys,
+          hiddenVariableKeys: window.hiddenVariableKeys.filter(
+            (key) => key !== variableKey,
+          ),
+          variableUnits: Object.fromEntries(
+            Object.entries(window.variableUnits).filter(
+              ([key]) => key !== variableKey,
             ),
-            variableUnits: Object.fromEntries(
-              Object.entries(window.variableUnits).filter(
-                ([key]) => key !== variableKey,
-              ),
-            ),
-          },
-        ];
+          ),
+        };
       }),
     );
-    if (removesWindow) {
+    if (resetsWindow) {
       setActiveMultiPickerWindowId(null);
     }
   };
@@ -824,18 +794,23 @@ export function SimulationResultsView({
     const variable = snapshot.result.variables.find(
       (item) => item.key === variableKey,
     );
-    const primaryVariable = snapshot.result.variables.find(
-      (item) => item.key === chartWindow.variableKey,
-    );
-    if (
-      !variableKey ||
-      !variable ||
-      !primaryVariable ||
-      chartWindow.kind === "single"
-    ) {
+    const primaryVariable =
+      snapshot.result.variables.find(
+        (item) => item.key === chartWindow.variableKey,
+      ) ??
+      chartWindow.variableKeys
+        .map((key) =>
+          snapshot.result.variables.find((item) => item.key === key),
+        )
+        .find((item): item is ResultVariableMetadata => item !== undefined);
+    if (!variableKey || !variable || chartWindow.kind === "single") {
       return;
     }
-    if (chartWindow.kind === "multi" && variable.unit !== primaryVariable.unit) {
+    if (
+      chartWindow.kind === "multi" &&
+      primaryVariable &&
+      variable.unit !== primaryVariable.unit
+    ) {
       window.alert(
         `无法加入曲线：该窗口只接受 SI 单位为 ${primaryVariable.unit || "无量纲"} 的变量。`,
       );
@@ -846,6 +821,16 @@ export function SimulationResultsView({
         if (window.id !== chartWindow.id || window.kind === "single") {
           return window;
         }
+        if (window.variableKeys.length === 0 || !primaryVariable) {
+          return {
+            ...window,
+            variableKey,
+            variableKeys: [variableKey],
+            hiddenVariableKeys: [],
+            variableUnits: { [variableKey]: variable.unit },
+            unit: variable.unit,
+          };
+        }
         if (window.variableKeys.includes(variableKey)) {
           return {
             ...window,
@@ -1143,6 +1128,7 @@ export function SimulationResultsView({
                 connectionMode={ConnectionMode.Loose}
                 deleteKeyCode={null}
                 edges={readOnlyEdges}
+                edgeTypes={contactAwareEdgeTypes}
                 edgesFocusable={false}
                 edgesReconnectable={false}
                 elementsSelectable
@@ -1263,32 +1249,11 @@ export function SimulationResultsView({
                 )}{" "}
                 条曲线
               </span>
-              <div
-                className="results-multi-create"
-                onBlur={(event) => {
-                  if (
-                    !(event.relatedTarget instanceof HTMLElement) ||
-                    !event.currentTarget.contains(event.relatedTarget)
-                  ) {
-                    setMultiCreateMenuOpen(false);
-                  }
-                }}
-                onKeyDown={(event) => {
-                  if (event.key === "Escape") {
-                    event.stopPropagation();
-                    setMultiCreateMenuOpen(false);
-                  }
-                }}
-              >
+              <div className="results-multi-create">
                 <button
-                  aria-expanded={multiCreateMenuOpen}
                   aria-label="新建同单位多曲线对比窗口"
-                  className={multiCreateMenuOpen ? "active" : ""}
-                  disabled={multiCurveUnitGroups.length === 0}
-                  onClick={() => {
-                    setMixedCreateMenuOpen(false);
-                    setMultiCreateMenuOpen((current) => !current);
-                  }}
+                  disabled={plottableResultVariables.length === 0}
+                  onClick={() => addCombinedChartWindow("multi")}
                   title="新建同单位多曲线对比窗口"
                   type="button"
                 >
@@ -1298,56 +1263,12 @@ export function SimulationResultsView({
                     strokeWidth={1.9}
                   />
                 </button>
-                {multiCreateMenuOpen ? (
-                  <div
-                    aria-label="选择多曲线窗口的 SI 单位"
-                    className="results-multi-create-menu"
-                    role="menu"
-                  >
-                    <div className="results-multi-create-title">选择 SI 单位</div>
-                    {multiCurveUnitGroups.map((group) => (
-                      <button
-                        key={group.unit || "dimensionless"}
-                        onClick={() => {
-                          addMultiChartWindow(group.variables[0].key);
-                          setMultiCreateMenuOpen(false);
-                        }}
-                        role="menuitem"
-                        type="button"
-                      >
-                        <strong>{group.unit || "无量纲"}</strong>
-                        <span>{group.variables.length} 条变量</span>
-                      </button>
-                    ))}
-                  </div>
-                ) : null}
               </div>
-              <div
-                className="results-multi-create"
-                onBlur={(event) => {
-                  if (
-                    !(event.relatedTarget instanceof HTMLElement) ||
-                    !event.currentTarget.contains(event.relatedTarget)
-                  ) {
-                    setMixedCreateMenuOpen(false);
-                  }
-                }}
-                onKeyDown={(event) => {
-                  if (event.key === "Escape") {
-                    event.stopPropagation();
-                    setMixedCreateMenuOpen(false);
-                  }
-                }}
-              >
+              <div className="results-multi-create">
                 <button
-                  aria-expanded={mixedCreateMenuOpen}
                   aria-label="新建异单位上下对比窗口"
-                  className={mixedCreateMenuOpen ? "active" : ""}
                   disabled={plottableResultVariables.length === 0}
-                  onClick={() => {
-                    setMultiCreateMenuOpen(false);
-                    setMixedCreateMenuOpen((current) => !current);
-                  }}
+                  onClick={() => addCombinedChartWindow("mixed")}
                   title="新建异单位上下对比窗口"
                   type="button"
                 >
@@ -1357,43 +1278,6 @@ export function SimulationResultsView({
                     strokeWidth={1.9}
                   />
                 </button>
-                {mixedCreateMenuOpen ? (
-                  <div
-                    aria-label="选择异单位上下对比窗口的首条曲线"
-                    className="results-multi-create-menu variables"
-                    role="menu"
-                  >
-                    <div className="results-multi-create-title">选择首条曲线</div>
-                    {plottableResultVariables.map((item) => {
-                      const itemComponent = snapshot.project.nodes.find(
-                        (node) => node.id === item.componentId,
-                      );
-                      return (
-                        <button
-                          key={item.key}
-                          onClick={() => {
-                            addMixedChartWindow(item.key);
-                            setMixedCreateMenuOpen(false);
-                          }}
-                          role="menuitem"
-                          title={resultVariableTitle(
-                            item,
-                            itemComponent?.data.label ?? item.componentId,
-                          )}
-                          type="button"
-                        >
-                          <strong>
-                            {resultVariableTitle(
-                              item,
-                              itemComponent?.data.label ?? item.componentId,
-                            )}
-                          </strong>
-                          <span>{item.unit || "无量纲"}</span>
-                        </button>
-                      );
-                    })}
-                  </div>
-                ) : null}
               </div>
             </div>
           </div>
@@ -1409,6 +1293,8 @@ export function SimulationResultsView({
             ref={workspaceRef}
           >
             {chartWindows.map((chartWindow) => {
+              const isCombined = chartWindow.kind !== "single";
+              const isMixed = chartWindow.kind === "mixed";
               const windowVariables = chartWindow.variableKeys
                 .map((key) =>
                   snapshot.result.variables.find((item) => item.key === key),
@@ -1421,10 +1307,114 @@ export function SimulationResultsView({
                   (item) => item.key === chartWindow.variableKey,
                 ) ?? windowVariables[0];
               if (!variable) {
-                return null;
+                if (!isCombined) {
+                  return null;
+                }
+                const pendingTitle = isMixed
+                  ? "异单位上下对比"
+                  : "同单位多曲线对比";
+                return (
+                  <article
+                    aria-label={`${pendingTitle}窗口（待定）`}
+                    className={`result-chart-window ${chartWindow.kind} pending ${
+                      multiDropTargetWindowId === chartWindow.id
+                        ? "drop-target"
+                        : ""
+                    }`}
+                    data-chart-kind={chartWindow.kind}
+                    data-pending="true"
+                    key={chartWindow.id}
+                    onDragLeave={(event) => {
+                      if (
+                        event.relatedTarget instanceof Element &&
+                        event.currentTarget.contains(event.relatedTarget)
+                      ) {
+                        return;
+                      }
+                      if (multiDropTargetWindowId === chartWindow.id) {
+                        setMultiDropTargetWindowId(null);
+                      }
+                    }}
+                    onDragOver={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      event.dataTransfer.dropEffect = "copy";
+                      setMultiDropTargetWindowId(chartWindow.id);
+                    }}
+                    onDrop={(event) =>
+                      addDroppedVariableToMultiChart(event, chartWindow)
+                    }
+                    onPointerDown={() => focusChartWindow(chartWindow.id)}
+                    style={{
+                      height: chartWindow.height,
+                      left: chartWindow.x,
+                      top: chartWindow.y,
+                      width: chartWindow.width,
+                      zIndex: chartWindow.zIndex,
+                    }}
+                  >
+                    <div
+                      className="result-chart-window-header"
+                      onPointerCancel={stopWindowDrag}
+                      onPointerDown={(event) =>
+                        startWindowDrag(event, chartWindow)
+                      }
+                      onPointerMove={moveChartWindow}
+                      onPointerUp={stopWindowDrag}
+                    >
+                      <div className="result-chart-window-title">
+                        <strong>{pendingTitle}</strong>
+                        <span>待定 · 请拖入第一条曲线</span>
+                      </div>
+                      <div className="result-chart-window-actions">
+                        <button
+                          aria-label={`关闭${pendingTitle}窗口`}
+                          className="close"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            removeChartWindow(chartWindow.id);
+                          }}
+                          onPointerDown={(event) => event.stopPropagation()}
+                          title="关闭曲线窗口"
+                          type="button"
+                        >
+                          <X aria-hidden="true" size={16} strokeWidth={1.9} />
+                        </button>
+                      </div>
+                    </div>
+                    <div className="result-chart-pending">
+                      {isMixed ? (
+                        <ChartSpline aria-hidden="true" size={34} strokeWidth={1.5} />
+                      ) : (
+                        <ChartNoAxesCombined
+                          aria-hidden="true"
+                          size={34}
+                          strokeWidth={1.5}
+                        />
+                      )}
+                      <strong>等待第一条曲线</strong>
+                      <span>
+                        拖入变量后，将以第一条曲线初始化单位和显示设置
+                      </span>
+                    </div>
+                    <button
+                      aria-label={`调整${pendingTitle}窗口大小`}
+                      className="result-chart-resize-handle"
+                      onLostPointerCapture={stopWindowResize}
+                      onPointerCancel={stopWindowResize}
+                      onPointerDown={(event) =>
+                        startWindowResize(event, chartWindow)
+                      }
+                      onPointerMove={resizeChartWindow}
+                      onPointerUp={stopWindowResize}
+                      title="调整窗口大小"
+                      type="button"
+                    >
+                      <Scaling aria-hidden="true" size={13} strokeWidth={1.8} />
+                    </button>
+                  </article>
+                );
               }
-              const isCombined = chartWindow.kind !== "single";
-              const isMixed = chartWindow.kind === "mixed";
               const label = resultVariableLabel(variable);
               const component = snapshot.project.nodes.find(
                 (node) => node.id === variable.componentId,
@@ -1476,6 +1466,8 @@ export function SimulationResultsView({
                       ? "drop-target"
                       : ""
                   }`}
+                  data-chart-kind={chartWindow.kind}
+                  data-pending="false"
                   key={chartWindow.id}
                   onDragLeave={(event) => {
                     if (
@@ -1525,7 +1517,7 @@ export function SimulationResultsView({
                         {isMixed
                           ? "异单位上下对比"
                           : isCombined
-                            ? "多曲线对比"
+                            ? "同单位多曲线对比"
                             : label}
                       </strong>
                       <span>
@@ -4284,16 +4276,24 @@ function normalizeStoredChartWindow(window: StoredChartWindow): ChartWindow {
     window.kind === "multi" || window.kind === "mixed"
       ? window.kind
       : "single";
-  const storedVariableKeys = Array.isArray(window.variableKeys)
-    ? window.variableKeys.filter(
+  const rawVariableKeys = window.variableKeys;
+  const hasStoredVariableKeys = Array.isArray(rawVariableKeys);
+  const storedVariableKeys = hasStoredVariableKeys
+    ? rawVariableKeys.filter(
         (key, index, keys) =>
           typeof key === "string" && key.length > 0 && keys.indexOf(key) === index,
       )
     : [];
   const variableKeys =
-    kind !== "single" && storedVariableKeys.length > 0
-      ? storedVariableKeys
-      : [window.variableKey];
+    kind === "single"
+      ? window.variableKey
+        ? [window.variableKey]
+        : []
+      : hasStoredVariableKeys
+        ? storedVariableKeys
+        : window.variableKey
+          ? [window.variableKey]
+          : [];
   const hiddenVariableKeys = Array.isArray(window.hiddenVariableKeys)
     ? window.hiddenVariableKeys.filter(
         (key, index, keys) =>
@@ -4314,7 +4314,7 @@ function normalizeStoredChartWindow(window: StoredChartWindow): ChartWindow {
   return {
     ...window,
     kind,
-    variableKey: variableKeys[0],
+    variableKey: variableKeys[0] ?? "",
     variableKeys,
     hiddenVariableKeys,
     variableUnits,
diff --git a/frontend/src/componentSymbols/types.ts b/frontend/src/componentSymbols/types.ts
index 752bbec..4c18291 100644
--- a/frontend/src/componentSymbols/types.ts
+++ b/frontend/src/componentSymbols/types.ts
@@ -2,6 +2,15 @@ import type { ReactNode } from "react";
 
 export type ComponentSymbolPresentation = "framed" | "bare";
 
+export type ComponentSymbolPortAnchor = {
+  x: number;
+  y: number;
+};
+
+export type ComponentSymbolPortAnchors = Partial<
+  Record<"left" | "right", readonly ComponentSymbolPortAnchor[]>
+>;
+
 export type SymbolDefinition = {
   presentation: ComponentSymbolPresentation;
   render: () => ReactNode;
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 3b885bc..eb3c200 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -293,6 +293,7 @@ textarea {
 .workbench {
   --palette-width: 230px;
   --properties-width: 330px;
+  --component-parameters-height: 340px;
   display: grid;
   grid-template-columns:
     var(--palette-width) 7px minmax(0, 1fr) 7px
@@ -306,6 +307,11 @@ textarea {
   user-select: none;
 }
 
+.workbench.resizing-component-parameters-height {
+  cursor: row-resize;
+  user-select: none;
+}
+
 .modeling-pane-splitter {
   position: relative;
   z-index: 8;
@@ -367,6 +373,71 @@ textarea {
 
 .properties {
   border-left: 0;
+  display: grid;
+  grid-template-rows:
+    minmax(0, var(--component-parameters-height)) 7px
+    minmax(120px, 1fr);
+  overflow: hidden;
+}
+
+.properties-subpane {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.properties-subpane-content {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.properties-pane-splitter {
+  position: relative;
+  z-index: 9;
+  display: grid;
+  width: 100%;
+  height: 7px;
+  min-height: 7px;
+  padding: 0;
+  border: 0;
+  place-items: center;
+  background: #eef2f6;
+  cursor: row-resize;
+  touch-action: none;
+}
+
+.properties-pane-splitter::before {
+  position: absolute;
+  inset: 3px 0 auto;
+  height: 1px;
+  background: #c7d1dc;
+  content: "";
+}
+
+.properties-pane-splitter span {
+  position: relative;
+  width: 42px;
+  height: 3px;
+  border-radius: 2px;
+  background: #9eacbb;
+  opacity: 0;
+  transition: opacity 120ms ease, background 120ms ease;
+}
+
+.properties-pane-splitter:hover span,
+.properties-pane-splitter:focus-visible span,
+.workbench.resizing-component-parameters-height .properties-pane-splitter span {
+  background: #1d6fb8;
+  opacity: 1;
+}
+
+.properties-pane-splitter:focus-visible {
+  outline: 2px solid #1d6fb8;
+  outline-offset: -2px;
 }
 
 .panel-title {
@@ -1229,15 +1300,15 @@ textarea {
   z-index: 1;
   top: 50%;
   left: 50%;
-  width: 48px;
-  height: 48px;
+  width: 112px;
+  height: 84px;
   transform: translate(-50%, -50%);
 }
 
 .node-symbol {
   display: grid;
-  width: 48px;
-  height: 48px;
+  width: 112px;
+  height: 84px;
   place-items: center;
   transform-origin: center;
 }
@@ -1248,28 +1319,34 @@ textarea {
 }
 
 .sim-node.symbol-presentation-bare .sim-node-frame,
-.sim-node.symbol-presentation-bare.selected .sim-node-frame {
+.sim-node.symbol-presentation-bare.selected .sim-node-frame,
+.sim-node.component-icon-only .sim-node-frame,
+.sim-node.component-icon-only.selected .sim-node-frame {
+  border-width: 0;
   border-color: transparent;
   background: transparent;
   box-shadow: none;
 }
 
-.sim-node.symbol-presentation-bare .node-label {
+.sim-node.symbol-presentation-bare .node-label,
+.sim-node.component-icon-only .node-label {
+  display: none;
   background: transparent;
 }
 
-.sim-node.symbol-presentation-bare.selected .component-symbol-svg {
+.sim-node.symbol-presentation-bare.selected .component-symbol-svg,
+.sim-node.component-icon-only.selected .component-symbol-svg {
   filter: drop-shadow(0 0 3px rgba(29, 111, 184, 0.62));
 }
 
 .react-flow__node.validation-error
-  .sim-node.symbol-presentation-bare
+  .sim-node.component-icon-only
   .component-symbol-svg {
   filter: drop-shadow(0 0 3px rgba(198, 59, 50, 0.68));
 }
 
 .react-flow__node.validation-warning
-  .sim-node.symbol-presentation-bare
+  .sim-node.component-icon-only
   .component-symbol-svg {
   filter: drop-shadow(0 0 3px rgba(192, 138, 22, 0.68));
 }
@@ -1310,10 +1387,49 @@ textarea {
 
 .port-handle {
   z-index: 3;
-  width: 10px;
-  height: 10px;
-  border: 2px solid #374151;
+  width: 9px;
+  height: 9px;
+  box-sizing: border-box;
+  border: 1.5px solid var(--port-handle-color, #475569);
+  border-radius: 50%;
   background: #ffffff;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.82);
+  opacity: 1;
+  transition: opacity 100ms ease, border-color 100ms ease,
+    background 100ms ease, box-shadow 100ms ease;
+}
+
+.port-handle-physical {
+  --port-handle-color: #a12b70;
+}
+
+.port-handle-signal {
+  --port-handle-color: #dc2626;
+  border-radius: 2px;
+}
+
+.port-handle.port-connection-connected {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.port-handle.port-connection-origin {
+  border-color: #d97706;
+  background: #fff7d6;
+  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.24),
+    0 0 8px rgba(217, 119, 6, 0.42);
+}
+
+.port-handle.port-connection-compatible {
+  border-color: #15803d;
+  background: #dcfce7;
+  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.24),
+    0 0 9px rgba(21, 128, 61, 0.48);
+}
+
+.port-handle.port-connection-incompatible {
+  pointer-events: none;
+  opacity: 0.18;
 }
 
 .flow-canvas .react-flow__edge-path,
@@ -1342,6 +1458,38 @@ textarea {
   filter: drop-shadow(0 0 2px rgba(29, 111, 184, 0.42));
 }
 
+.contact-edge-hit {
+  cursor: pointer;
+  fill: transparent;
+  pointer-events: all;
+  stroke: transparent;
+}
+
+.contact-edge-marker {
+  fill: #ffffff;
+  opacity: 0;
+  pointer-events: none;
+  stroke: #64748b;
+  stroke-width: 1.5;
+  transition: opacity 120ms ease-out, fill 120ms ease-out, stroke 120ms ease-out;
+  vector-effect: non-scaling-stroke;
+}
+
+.react-flow__edge.editor-edge-contact:hover .contact-edge-marker,
+.react-flow__edge.editor-edge-contact.selected .contact-edge-marker,
+.react-flow__edge.editor-edge-contact.editor-edge-selected .contact-edge-marker,
+.contact-edge-hit:focus-visible + .contact-edge-marker {
+  opacity: 1;
+}
+
+.react-flow__edge.editor-edge-contact.selected .contact-edge-marker,
+.react-flow__edge.editor-edge-contact.editor-edge-selected .contact-edge-marker,
+.contact-edge-hit:focus-visible + .contact-edge-marker {
+  fill: #dbeafe;
+  stroke: #1d6fb8;
+  stroke-width: 2;
+}
+
 .field {
   display: grid;
   gap: 6px;
@@ -1791,6 +1939,15 @@ textarea {
   stroke-width: 1.5;
 }
 
+.results-system-canvas .contact-edge-hit {
+  cursor: default;
+  pointer-events: none;
+}
+
+.results-system-canvas .contact-edge-marker {
+  opacity: 0;
+}
+
 .results-chart-workspace {
   position: relative;
   z-index: 0;
@@ -1834,6 +1991,38 @@ textarea {
     0 7px 20px rgba(30, 41, 59, 0.18);
 }
 
+.result-chart-pending {
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: 7px;
+  margin: 16px;
+  padding: 24px;
+  border: 1px dashed #9aaaba;
+  border-radius: 5px;
+  color: #718096;
+  text-align: center;
+  background: #f8fafc;
+  pointer-events: none;
+}
+
+.result-chart-pending strong {
+  color: #43556a;
+  font-size: 13px;
+}
+
+.result-chart-pending span {
+  max-width: 300px;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.result-chart-window.pending.drop-target .result-chart-pending {
+  border-color: #1d6fb8;
+  color: #1d6fb8;
+  background: #edf6fd;
+}
+
 .result-chart-window-header {
   display: flex;
   align-items: center;
diff --git a/frontend/tests/e2e/component-symbols.spec.ts b/frontend/tests/e2e/component-symbols.spec.ts
index c45bd46..9c5cea1 100644
--- a/frontend/tests/e2e/component-symbols.spec.ts
+++ b/frontend/tests/e2e/component-symbols.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test, type Locator, type Page } from "@playwright/test";
 
 type SymbolCase = {
   category: string;
@@ -30,6 +30,176 @@ const symbolCases: SymbolCase[] = [
   { category: "mechanical", domain: "mechanical", modelType: "amesim_lmechn1" },
 ];
 
+function physicalPort(
+  name: string,
+  side: "left" | "right",
+  order: number,
+) {
+  return {
+    name,
+    kind: "physical",
+    domain: "pneumatic",
+    nominalRole: "bidirectional",
+    positiveFlowDirection: "intoComponent",
+    side,
+    order,
+  };
+}
+
+function signalPort(
+  name: string,
+  side: "left" | "right",
+  nominalRole: "input" | "output",
+  order: number,
+) {
+  return {
+    name,
+    kind: "signal",
+    domain: "signal",
+    nominalRole,
+    side,
+    order,
+  };
+}
+
+function portsForSymbol(modelType: string) {
+  if (modelType === "amesim_pnor001") {
+    return [
+      physicalPort("port_1", "left", 10),
+      physicalPort("port_2", "right", 20),
+    ];
+  }
+  if (modelType === "amesim_pnvo001") {
+    return [
+      signalPort("res", "left", "input", 5),
+      physicalPort("port_2", "left", 10),
+      physicalPort("port_3", "right", 20),
+    ];
+  }
+  if (modelType === "amesim_step0") {
+    return [signalPort("out", "right", "output", 10)];
+  }
+  return [];
+}
+
+async function dragSymbolToCanvas(
+  page: Page,
+  modelType: string,
+  targetPosition: { x: number; y: number },
+) {
+  const pane = page.locator(".flow-canvas .react-flow__pane");
+  const paletteItem = page
+    .locator(".palette-item")
+    .filter({
+      has: page.locator(`[data-component-symbol="${modelType}"]`),
+    })
+    .first();
+  await paletteItem.dragTo(pane, { targetPosition });
+  const node = page
+    .locator(
+      `.flow-canvas .react-flow__node[data-id^="${modelType}_"]`,
+    )
+    .last();
+  await expect(node).toBeVisible();
+  const nodeId = await node.getAttribute("data-id");
+  expect(nodeId).not.toBeNull();
+  return page.locator(
+    `.flow-canvas .react-flow__node[data-id="${nodeId}"]`,
+  );
+}
+
+async function expectSymbolAnchors(
+  node: Locator,
+  anchors: Array<{ portName: string; x: number; y: number }>,
+) {
+  for (const anchor of anchors) {
+    const error = await node.evaluate((element, expected) => {
+      const svg = element.querySelector<SVGSVGElement>(".component-symbol-svg");
+      const handle = element.querySelector<HTMLElement>(
+        `.port-handle[data-port-name="${expected.portName}"]`,
+      );
+      const matrix = svg?.getScreenCTM();
+      if (!svg || !handle || !matrix) {
+        return Number.POSITIVE_INFINITY;
+      }
+      const point = svg.createSVGPoint();
+      point.x = expected.x;
+      point.y = expected.y;
+      const screenPoint = point.matrixTransform(matrix);
+      const handleBounds = handle.getBoundingClientRect();
+      return Math.hypot(
+        screenPoint.x - (handleBounds.left + handleBounds.width / 2),
+        screenPoint.y - (handleBounds.top + handleBounds.height / 2),
+      );
+    }, anchor);
+    expect(error).toBeLessThan(2.5);
+  }
+}
+
+async function locatorCenter(locator: Locator) {
+  const bounds = await locator.boundingBox();
+  expect(bounds).not.toBeNull();
+  return {
+    x: bounds!.x + bounds!.width / 2,
+    y: bounds!.y + bounds!.height / 2,
+  };
+}
+
+async function distanceBetween(first: Locator, second: Locator) {
+  const [firstCenter, secondCenter] = await Promise.all([
+    locatorCenter(first),
+    locatorCenter(second),
+  ]);
+  return Math.hypot(
+    secondCenter.x - firstCenter.x,
+    secondCenter.y - firstCenter.y,
+  );
+}
+
+async function dragNodePortNearTarget(
+  page: Page,
+  movingNode: Locator,
+  movingPort: Locator,
+  targetPort: Locator,
+  remainingGap = 8,
+) {
+  const [dragStart, movingPortCenter, targetPortCenter] = await Promise.all([
+    locatorCenter(movingNode.locator(".node-symbol")),
+    locatorCenter(movingPort),
+    locatorCenter(targetPort),
+  ]);
+  const deltaX = targetPortCenter.x - movingPortCenter.x;
+  const deltaY = targetPortCenter.y - movingPortCenter.y;
+  const distance = Math.hypot(deltaX, deltaY);
+  expect(distance).toBeGreaterThan(remainingGap);
+  const movementRatio = (distance - remainingGap) / distance;
+
+  await page.mouse.move(dragStart.x, dragStart.y);
+  await page.mouse.down();
+  let pointerX = dragStart.x + deltaX * movementRatio;
+  let pointerY = dragStart.y + deltaY * movementRatio;
+  await page.mouse.move(pointerX, pointerY, { steps: 12 });
+
+  // 旋转会改变节点外框尺寸，React Flow 可能同时刷新 viewport；根据实际
+  // Handle 中心再校正两次，确保测试模拟的是用户真正把端口拖到附近。
+  for (let attempt = 0; attempt < 2; attempt += 1) {
+    const [actualMovingCenter, actualTargetCenter] = await Promise.all([
+      locatorCenter(movingPort),
+      locatorCenter(targetPort),
+    ]);
+    const correctionX = actualTargetCenter.x - actualMovingCenter.x;
+    const correctionY = actualTargetCenter.y - actualMovingCenter.y;
+    const actualDistance = Math.hypot(correctionX, correctionY);
+    if (actualDistance <= remainingGap + 1) {
+      break;
+    }
+    const correctionRatio = (actualDistance - remainingGap) / actualDistance;
+    pointerX += correctionX * correctionRatio;
+    pointerY += correctionY * correctionRatio;
+    await page.mouse.move(pointerX, pointerY, { steps: 4 });
+  }
+}
+
 const categoryLabels: Record<string, string> = {
   boundary: "边界元件",
   flow: "流动元件",
@@ -76,7 +246,7 @@ test.beforeEach(async ({ page }) => {
                 label: categoryLabels[item.category],
                 order: Object.keys(categoryLabels).indexOf(item.category) + 1,
               },
-              ports: [],
+              ports: portsForSymbol(item.modelType),
               parameters: [],
             })),
           },
@@ -106,6 +276,429 @@ test("全部已移植 AMESim 模型使用专属图标及正确领域配色", asy
   }
 });
 
+test("AMESim canvas nodes use icon anchors and highlight only compatible free ports", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  const firstOrifice = await dragSymbolToCanvas(page, "amesim_pnor001", {
+    x: 250,
+    y: 210,
+  });
+  const secondOrifice = await dragSymbolToCanvas(page, "amesim_pnor001", {
+    x: 610,
+    y: 210,
+  });
+  const stepSource = await dragSymbolToCanvas(page, "amesim_step0", {
+    x: 250,
+    y: 450,
+  });
+  const signalOrifice = await dragSymbolToCanvas(page, "amesim_pnvo001", {
+    x: 610,
+    y: 450,
+  });
+
+  await expect(firstOrifice.locator(".sim-node")).toHaveClass(
+    /component-icon-only/,
+  );
+  await expect(firstOrifice.locator(".node-label")).toBeHidden();
+  const frameStyle = await firstOrifice.locator(".sim-node-frame").evaluate(
+    (element) => ({
+      borderWidth: getComputedStyle(element).borderTopWidth,
+      background: getComputedStyle(element).backgroundColor,
+    }),
+  );
+  expect(frameStyle).toEqual({
+    borderWidth: "0px",
+    background: "rgba(0, 0, 0, 0)",
+  });
+
+  const firstOrificeAnchors = [
+    { portName: "port_1", x: 2, y: 24 },
+    { portName: "port_2", x: 62, y: 24 },
+  ];
+  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 },
+  ]);
+
+  await firstOrifice.locator(".node-symbol").click({ position: { x: 56, y: 42 } });
+  await page
+    .getByRole("button", { name: "顺时针旋转 90° (Ctrl+R)", exact: true })
+    .click();
+  await expectSymbolAnchors(firstOrifice, firstOrificeAnchors);
+  await page
+    .getByRole("button", { name: "水平镜像 (Shift+H)", exact: true })
+    .click();
+  await expectSymbolAnchors(firstOrifice, firstOrificeAnchors);
+
+  const firstPhysicalOutput = firstOrifice.locator(
+    '.port-handle[data-port-name="port_2"]',
+  );
+  const sameNodePort = firstOrifice.locator(
+    '.port-handle[data-port-name="port_1"]',
+  );
+  const compatiblePhysicalPort = secondOrifice.locator(
+    '.port-handle[data-port-name="port_1"]',
+  );
+  const signalOutput = stepSource.locator(
+    '.port-handle[data-port-name="out"]',
+  );
+  const signalInput = signalOrifice.locator(
+    '.port-handle[data-port-name="res"]',
+  );
+  const pneumaticInput = signalOrifice.locator(
+    '.port-handle[data-port-name="port_2"]',
+  );
+
+  await firstPhysicalOutput.click();
+  await expect(firstPhysicalOutput).toHaveAttribute(
+    "data-connection-state",
+    "origin",
+  );
+  await expect(compatiblePhysicalPort).toHaveAttribute(
+    "data-connection-state",
+    "compatible",
+  );
+  await expect(pneumaticInput).toHaveAttribute(
+    "data-connection-state",
+    "compatible",
+  );
+  await expect(sameNodePort).toHaveAttribute(
+    "data-connection-state",
+    "incompatible",
+  );
+  await expect(signalInput).toHaveAttribute(
+    "data-connection-state",
+    "incompatible",
+  );
+
+  await page.locator(".flow-canvas .react-flow__pane").click({
+    position: { x: 20, y: 20 },
+  });
+  await expect(firstPhysicalOutput).toHaveAttribute(
+    "data-connection-state",
+    "idle",
+  );
+  await compatiblePhysicalPort.click();
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(0);
+  await expect(compatiblePhysicalPort).toHaveAttribute(
+    "data-connection-state",
+    "origin",
+  );
+  await page.keyboard.press("Escape");
+  await expect(compatiblePhysicalPort).toHaveAttribute(
+    "data-connection-state",
+    "idle",
+  );
+
+  await firstPhysicalOutput.click();
+  await compatiblePhysicalPort.click();
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(1);
+  await expect(firstPhysicalOutput).toHaveAttribute("data-connected", "true");
+  await expect(compatiblePhysicalPort).toHaveAttribute("data-connected", "true");
+  await expect(firstPhysicalOutput).toHaveCSS("opacity", "0");
+  await expect(compatiblePhysicalPort).toHaveCSS("opacity", "0");
+
+  const physicalEdge = page.locator(".flow-canvas .react-flow__edge").first();
+  await physicalEdge.locator(".react-flow__edge-interaction").click({ force: true });
+  await page.getByRole("button", { name: "删除 (Delete)", exact: true }).click();
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(0);
+  await expect(firstPhysicalOutput).toHaveAttribute("data-connected", "false");
+  await expect(compatiblePhysicalPort).toHaveAttribute("data-connected", "false");
+  await expect(firstPhysicalOutput).toHaveCSS("opacity", "1");
+  await expect(compatiblePhysicalPort).toHaveCSS("opacity", "1");
+  await expect(firstPhysicalOutput).not.toHaveCSS("pointer-events", "none");
+  await expect(compatiblePhysicalPort).not.toHaveCSS("pointer-events", "none");
+
+  await firstPhysicalOutput.click();
+  await compatiblePhysicalPort.click();
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(1);
+
+  const signalOutputBounds = await signalOutput.boundingBox();
+  const signalInputBounds = await signalInput.boundingBox();
+  expect(signalOutputBounds).not.toBeNull();
+  expect(signalInputBounds).not.toBeNull();
+  await page.mouse.move(
+    signalOutputBounds!.x + signalOutputBounds!.width / 2,
+    signalOutputBounds!.y + signalOutputBounds!.height / 2,
+  );
+  await page.mouse.down();
+  await expect(signalOutput).toHaveAttribute(
+    "data-connection-state",
+    "origin",
+  );
+  await expect(signalInput).toHaveAttribute(
+    "data-connection-state",
+    "compatible",
+  );
+  const paneBounds = await page
+    .locator(".flow-canvas .react-flow__pane")
+    .boundingBox();
+  expect(paneBounds).not.toBeNull();
+  await page.mouse.move(paneBounds!.x + 20, paneBounds!.y + 20, { steps: 4 });
+  await page.mouse.up();
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(1);
+  await expect(page.locator(".flow-canvas .react-flow__connection")).toHaveCount(0);
+  await expect(signalOutput).toHaveAttribute(
+    "data-connection-state",
+    "idle",
+  );
+  await expect(signalInput).toHaveAttribute(
+    "data-connection-state",
+    "idle",
+  );
+  await expect(pneumaticInput).toHaveAttribute(
+    "data-connection-state",
+    "idle",
+  );
+
+  const retriedSignalOutputBounds = await signalOutput.boundingBox();
+  const retriedSignalInputBounds = await signalInput.boundingBox();
+  expect(retriedSignalOutputBounds).not.toBeNull();
+  expect(retriedSignalInputBounds).not.toBeNull();
+  await page.mouse.move(
+    retriedSignalOutputBounds!.x + retriedSignalOutputBounds!.width / 2,
+    retriedSignalOutputBounds!.y + retriedSignalOutputBounds!.height / 2,
+  );
+  await page.mouse.down();
+  await expect(signalOutput).toHaveAttribute(
+    "data-connection-state",
+    "origin",
+  );
+  await page.mouse.move(
+    retriedSignalOutputBounds!.x + retriedSignalOutputBounds!.width / 2 + 12,
+    retriedSignalOutputBounds!.y + retriedSignalOutputBounds!.height / 2,
+  );
+  await expect(signalInput).toHaveAttribute(
+    "data-connection-state",
+    "compatible",
+  );
+  await expect(pneumaticInput).toHaveAttribute(
+    "data-connection-state",
+    "incompatible",
+  );
+  await page.mouse.move(
+    retriedSignalInputBounds!.x + retriedSignalInputBounds!.width / 2,
+    retriedSignalInputBounds!.y + retriedSignalInputBounds!.height / 2,
+    { steps: 5 },
+  );
+  await page.mouse.up();
+
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(2);
+  await expect(signalOutput).toHaveAttribute("data-connected", "true");
+  await expect(signalInput).toHaveAttribute("data-connected", "true");
+});
+
+test("兼容接口接近时吸附为无连线接触连接，拖开后自动断开", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.getByRole("button", { name: "关闭网格吸附", exact: true }).click();
+
+  const firstOrifice = await dragSymbolToCanvas(page, "amesim_pnor001", {
+    x: 280,
+    y: 300,
+  });
+  const secondOrifice = await dragSymbolToCanvas(page, "amesim_pnor001", {
+    x: 650,
+    y: 300,
+  });
+  const firstPort = firstOrifice.locator(
+    '.port-handle[data-port-name="port_2"]',
+  );
+  const secondPort = secondOrifice.locator(
+    '.port-handle[data-port-name="port_1"]',
+  );
+
+  await dragNodePortNearTarget(
+    page,
+    secondOrifice,
+    secondPort,
+    firstPort,
+  );
+  await expect(firstPort).toHaveAttribute(
+    "data-connection-state",
+    "compatible",
+  );
+  await expect(secondPort).toHaveAttribute(
+    "data-connection-state",
+    "origin",
+  );
+  expect(await distanceBetween(firstPort, secondPort)).toBeGreaterThan(4);
+  await page.mouse.up();
+
+  await expect
+    .poll(() => distanceBetween(firstPort, secondPort))
+    .toBeLessThan(2);
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(1);
+  await expect(page.locator(".flow-canvas .react-flow__edge-path")).toHaveCount(0);
+  const contactHit = page.locator(".flow-canvas .contact-edge-hit");
+  await expect(contactHit).toHaveCount(1);
+  await expect(firstPort).toHaveAttribute("data-connected", "true");
+  await expect(secondPort).toHaveAttribute("data-connected", "true");
+  await expect(firstPort).toHaveCSS("opacity", "0");
+  await expect(secondPort).toHaveCSS("opacity", "0");
+
+  await page.getByRole("button", { name: "生成系统 XML", exact: true }).click();
+  const xmlBlock = page.getByLabel("生成的系统 XML");
+  await expect(xmlBlock).toContainText('<Connection id="edge-contact-');
+  await expect(xmlBlock).toContainText('component="amesim_pnor001_1" port="port_2"');
+  await expect(xmlBlock).toContainText('component="amesim_pnor001_2" port="port_1"');
+
+  await page.getByRole("button", { name: "保存工程", exact: true }).click();
+  const savedEdge = await page.evaluate(() => {
+    const raw = window.localStorage.getItem(
+      "system-simulation-flow:project:demo-system",
+    );
+    const project = raw ? JSON.parse(raw) : null;
+    return project?.edges?.[0] ?? null;
+  });
+  expect(savedEdge).toMatchObject({
+    source: "amesim_pnor001_2",
+    sourceHandle: "port_1",
+    target: "amesim_pnor001_1",
+    targetHandle: "port_2",
+  });
+
+  await contactHit.click();
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveClass(
+    /editor-edge-selected/,
+  );
+  await page.getByRole("button", { name: "删除 (Delete)", exact: true }).click();
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(0);
+  await expect(firstPort).toHaveAttribute("data-connected", "false");
+  await expect(secondPort).toHaveAttribute("data-connected", "false");
+  expect(await distanceBetween(firstPort, secondPort)).toBeGreaterThan(8);
+
+  await dragNodePortNearTarget(
+    page,
+    secondOrifice,
+    secondPort,
+    firstPort,
+    5,
+  );
+  await expect(firstPort).toHaveAttribute(
+    "data-connection-state",
+    "compatible",
+  );
+  await page.mouse.up();
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(1);
+  await expect(page.locator(".flow-canvas .react-flow__edge-path")).toHaveCount(0);
+
+  await page
+    .getByRole("button", { name: "顺时针旋转 90° (Ctrl+R)", exact: true })
+    .click();
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(0);
+  await page.getByRole("button", { name: "撤销 (Ctrl+Z)", exact: true }).click();
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(1);
+  await expect(page.locator(".flow-canvas .react-flow__edge-path")).toHaveCount(0);
+
+  const secondSymbolCenter = await locatorCenter(
+    secondOrifice.locator(".node-symbol"),
+  );
+  await page.mouse.move(secondSymbolCenter.x, secondSymbolCenter.y);
+  await page.mouse.down();
+  await page.mouse.move(secondSymbolCenter.x + 90, secondSymbolCenter.y + 35, {
+    steps: 10,
+  });
+  await page.mouse.up();
+
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(0);
+  await expect(firstPort).toHaveAttribute("data-connected", "false");
+  await expect(secondPort).toHaveAttribute("data-connected", "false");
+  await expect(firstPort).toHaveCSS("opacity", "1");
+  await expect(secondPort).toHaveCSS("opacity", "1");
+  expect(await distanceBetween(firstPort, secondPort)).toBeGreaterThan(50);
+});
+
+test("不同类型接口接近时不会吸附或建立逻辑连接", async ({ page }) => {
+  await page.goto("/");
+  await page.getByRole("button", { name: "关闭网格吸附", exact: true }).click();
+
+  const orifice = await dragSymbolToCanvas(page, "amesim_pnor001", {
+    x: 280,
+    y: 320,
+  });
+  const stepSource = await dragSymbolToCanvas(page, "amesim_step0", {
+    x: 650,
+    y: 320,
+  });
+  const physicalPort = orifice.locator(
+    '.port-handle[data-port-name="port_2"]',
+  );
+  const signalPort = stepSource.locator(
+    '.port-handle[data-port-name="out"]',
+  );
+
+  await dragNodePortNearTarget(
+    page,
+    stepSource,
+    signalPort,
+    physicalPort,
+  );
+  await expect(physicalPort).not.toHaveAttribute(
+    "data-connection-state",
+    "compatible",
+  );
+  await page.mouse.up();
+
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(0);
+  expect(await distanceBetween(physicalPort, signalPort)).toBeGreaterThan(4);
+  await expect(physicalPort).toHaveAttribute("data-connected", "false");
+  await expect(signalPort).toHaveAttribute("data-connected", "false");
+});
+
+test("旋转后的接口可以与方向不同的兼容接口接触连接", async ({ page }) => {
+  await page.goto("/");
+  await page.getByRole("button", { name: "关闭网格吸附", exact: true }).click();
+
+  const horizontalOrifice = await dragSymbolToCanvas(page, "amesim_pnor001", {
+    x: 300,
+    y: 300,
+  });
+  const rotatedOrifice = await dragSymbolToCanvas(page, "amesim_pnor001", {
+    x: 650,
+    y: 500,
+  });
+  await rotatedOrifice.locator(".node-symbol").click();
+  await page
+    .getByRole("button", { name: "顺时针旋转 90° (Ctrl+R)", exact: true })
+    .click();
+
+  const horizontalPort = horizontalOrifice.locator(
+    '.port-handle[data-port-name="port_2"]',
+  );
+  const rotatedPort = rotatedOrifice.locator(
+    '.port-handle[data-port-name="port_1"]',
+  );
+  await dragNodePortNearTarget(
+    page,
+    rotatedOrifice,
+    rotatedPort,
+    horizontalPort,
+  );
+  await expect(horizontalPort).toHaveAttribute(
+    "data-connection-state",
+    "compatible",
+  );
+  await expect(rotatedPort).toHaveAttribute(
+    "data-connection-state",
+    "origin",
+  );
+  await page.mouse.up();
+
+  await expect
+    .poll(() => distanceBetween(horizontalPort, rotatedPort))
+    .toBeLessThan(2);
+  await expect(page.locator(".flow-canvas .react-flow__edge")).toHaveCount(1);
+  await expect(page.locator(".flow-canvas .react-flow__edge-path")).toHaveCount(0);
+  await expect(horizontalPort).toHaveAttribute("data-connected", "true");
+  await expect(rotatedPort).toHaveAttribute("data-connected", "true");
+});
+
 test("旧工程保存的通用图标会按当前目录定义升级", async ({ page }) => {
   await page.goto("/");
   await page.evaluate(() => {
diff --git a/frontend/tests/e2e/fit-view.spec.ts b/frontend/tests/e2e/fit-view.spec.ts
index 297742d..3679012 100644
--- a/frontend/tests/e2e/fit-view.spec.ts
+++ b/frontend/tests/e2e/fit-view.spec.ts
@@ -52,14 +52,27 @@ test("恢复自动保存工程后自动适配建模画布", async ({ page }) =>
 
 test("切换到结果页时自动适配只读系统图", async ({ page }) => {
   await prepareApp(page);
-  await page.addInitScript((snapshot) => {
+  await page.addInitScript(({ project, snapshot }) => {
     window.sessionStorage.setItem(
       "system-simulation-flow:latest-result",
       JSON.stringify(snapshot),
     );
-  }, resultSnapshot);
+    window.localStorage.setItem(
+      "system-simulation-flow:project:demo-system",
+      JSON.stringify(project),
+    );
+  }, { project: wideProject, snapshot: resultSnapshot });
 
   await page.goto("/");
+  await page.getByRole("button", { name: "加载工程" }).click();
+  const freeModelingHandle = page.locator(
+    '.flow-canvas .react-flow__node[data-id="generic_sensor_1"] .port-handle[data-port-name="port_a"]',
+  );
+  await freeModelingHandle.dispatchEvent("click");
+  await expect(freeModelingHandle).toHaveAttribute(
+    "data-connection-state",
+    "origin",
+  );
   await page.getByRole("tab", { name: /^结果/ }).click();
   await expectAllNodesInsideCanvas(page, ".results-system-canvas");
   await expect(
@@ -67,6 +80,10 @@ test("切换到结果页时自动适配只读系统图", async ({ page }) => {
   ).toHaveCount(0);
 
   await page.getByRole("tab", { name: "建模" }).click();
+  await expect(freeModelingHandle).toHaveAttribute(
+    "data-connection-state",
+    "idle",
+  );
   await expect(
     page.getByRole("complementary", { name: "仿真控制台", exact: true }),
   ).toBeVisible();
@@ -78,4 +95,15 @@ test("切换到结果页时自动适配只读系统图", async ({ page }) => {
   await expect(page.locator(".results-system-canvas .react-flow__edge")).toHaveCount(
     wideProject.edges.length,
   );
+  const connectedResultHandles = page.locator(
+    '.results-system-canvas .port-handle[data-connected="true"]',
+  );
+  const idleResultHandles = page.locator(
+    '.results-system-canvas .port-handle[data-connected="false"]',
+  );
+  await expect(connectedResultHandles).toHaveCount(
+    wideProject.edges.length * 2,
+  );
+  await expect(idleResultHandles).toHaveCount(2);
+  await expect(connectedResultHandles.first()).toHaveCSS("opacity", "0");
 });
diff --git a/frontend/tests/e2e/parameter-table.spec.ts b/frontend/tests/e2e/parameter-table.spec.ts
index 79d9c79..a9af781 100644
--- a/frontend/tests/e2e/parameter-table.spec.ts
+++ b/frontend/tests/e2e/parameter-table.spec.ts
@@ -202,6 +202,88 @@ test("参数表列宽可调整并在刷新后保留", async ({ page }) => {
   await expect(reloadedSeparator).toHaveAttribute("aria-valuenow", "120");
 });
 
+test("组件参数和仿真设置是可独立滚动并可调高度的子栏", async ({ page }) => {
+  await page.goto("/");
+  await addPneumaticTestComponent(page);
+
+  const componentPane = page.getByRole("region", {
+    name: "组件参数子栏",
+    exact: true,
+  });
+  const simulationPane = page.getByRole("region", {
+    name: "仿真设置子栏",
+    exact: true,
+  });
+  const separator = page.getByRole("separator", {
+    name: "调整组件参数和仿真设置区域高度",
+    exact: true,
+  });
+  await expect(componentPane).toBeVisible();
+  await expect(simulationPane).toBeVisible();
+  await expect(separator).toBeVisible();
+
+  const initialValue = Number(await separator.getAttribute("aria-valuenow"));
+  const initialMaximum = Number(await separator.getAttribute("aria-valuemax"));
+  expect(initialMaximum).toBeGreaterThanOrEqual(initialValue);
+  const initialComponentBox = await componentPane.boundingBox();
+  const initialSimulationBox = await simulationPane.boundingBox();
+  const separatorBox = await separator.boundingBox();
+  expect(initialComponentBox).not.toBeNull();
+  expect(initialSimulationBox).not.toBeNull();
+  expect(separatorBox).not.toBeNull();
+  expect(initialSimulationBox!.height).toBeGreaterThanOrEqual(120);
+
+  await page.mouse.move(
+    separatorBox!.x + separatorBox!.width / 2,
+    separatorBox!.y + separatorBox!.height / 2,
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    separatorBox!.x + separatorBox!.width / 2,
+    separatorBox!.y + separatorBox!.height / 2 + 40,
+    { steps: 4 },
+  );
+  await page.mouse.up();
+
+  await expect(separator).toHaveAttribute(
+    "aria-valuenow",
+    String(initialValue + 40),
+  );
+  const resizedComponentBox = await componentPane.boundingBox();
+  const resizedSimulationBox = await simulationPane.boundingBox();
+  expect(resizedComponentBox!.height).toBeGreaterThan(
+    initialComponentBox!.height + 38,
+  );
+  expect(resizedSimulationBox!.height).toBeLessThan(
+    initialSimulationBox!.height - 38,
+  );
+
+  const overflowModes = await page
+    .locator(".properties-subpane-content")
+    .evaluateAll((elements) =>
+      elements.map((element) => getComputedStyle(element).overflowY),
+    );
+  expect(overflowModes).toEqual(["auto", "auto"]);
+
+  await page.reload();
+  const reloadedSeparator = page.getByRole("separator", {
+    name: "调整组件参数和仿真设置区域高度",
+    exact: true,
+  });
+  await expect(reloadedSeparator).toHaveAttribute(
+    "aria-valuenow",
+    String(initialValue + 40),
+  );
+  await reloadedSeparator.focus();
+  await page.keyboard.press("ArrowUp");
+  await expect(reloadedSeparator).toHaveAttribute(
+    "aria-valuenow",
+    String(initialValue + 20),
+  );
+  await reloadedSeparator.dblclick();
+  await expect(reloadedSeparator).toHaveAttribute("aria-valuenow", "340");
+});
+
 test("组件参数公式保留原式，并在说明中显示计算值且 XML 只写数值", async ({
   page,
 }) => {
diff --git a/frontend/tests/e2e/results-chart-windows.spec.ts b/frontend/tests/e2e/results-chart-windows.spec.ts
new file mode 100644
index 0000000..83f7ad5
--- /dev/null
+++ b/frontend/tests/e2e/results-chart-windows.spec.ts
@@ -0,0 +1,160 @@
+import { expect, test, type Page } from "@playwright/test";
+
+import { prepareApp, resultSnapshot } from "./fixtures";
+
+const chartWindowSnapshot = {
+  ...resultSnapshot,
+  id: "e2e-pending-chart-windows",
+  result: {
+    ...resultSnapshot.result,
+    variables: [
+      ...resultSnapshot.result.variables,
+      {
+        key: "generic_sensor_1.pressure",
+        componentId: "generic_sensor_1",
+        componentType: "generic_sensor",
+        scope: "component",
+        portName: null,
+        name: "pressure",
+        label: "压力",
+        quantity: "pressure",
+        unit: "Pa",
+        category: "state",
+        order: 2,
+      },
+    ],
+    final: {
+      ...resultSnapshot.result.final,
+      "generic_sensor_1.pressure": 120000,
+    },
+    series: {
+      ...resultSnapshot.result.series,
+      "generic_sensor_1.pressure": [100000, 110000, 120000],
+    },
+  },
+};
+
+async function openResults(page: Page) {
+  await page.getByRole("tab", { name: "结果", exact: true }).click();
+  await expect(page.locator(".results-chart-workspace")).toBeVisible();
+}
+
+test.beforeEach(async ({ page }) => {
+  await prepareApp(page);
+  await page.addInitScript((snapshot) => {
+    window.sessionStorage.setItem(
+      "system-simulation-flow:latest-result",
+      JSON.stringify(snapshot),
+    );
+  }, chartWindowSnapshot);
+});
+
+test("组合曲线窗口先创建为空窗，并在删除最后一条曲线后恢复待定", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await openResults(page);
+
+  await page
+    .getByRole("button", { name: "新建同单位多曲线对比窗口", exact: true })
+    .click();
+  let sameUnitWindow = page.locator(
+    '.result-chart-window[data-chart-kind="multi"]',
+  );
+  await expect(sameUnitWindow).toHaveCount(1);
+  await expect(sameUnitWindow).toHaveAttribute("data-pending", "true");
+  await expect(sameUnitWindow).toContainText("等待第一条曲线");
+
+  const valueVariable = page
+    .locator(".results-variable-list button")
+    .filter({ hasText: "数值" })
+    .first();
+  await valueVariable.dragTo(sameUnitWindow);
+  await expect(sameUnitWindow).toHaveAttribute("data-pending", "false");
+  await expect(sameUnitWindow).toContainText("1/1 条显示");
+  await expect(sameUnitWindow).toContainText("无量纲");
+
+  await sameUnitWindow
+    .getByRole("button", {
+      name: "管理多曲线窗口中的曲线",
+      exact: true,
+    })
+    .click();
+  await sameUnitWindow.locator(".result-chart-multi-menu-row .remove").click();
+  await expect(sameUnitWindow).toHaveCount(1);
+  await expect(sameUnitWindow).toHaveAttribute("data-pending", "true");
+  await expect(sameUnitWindow).toContainText("等待第一条曲线");
+
+  await page.reload();
+  await openResults(page);
+  sameUnitWindow = page.locator(
+    '.result-chart-window[data-chart-kind="multi"]',
+  );
+  await expect(sameUnitWindow).toHaveCount(1);
+  await expect(sameUnitWindow).toHaveAttribute("data-pending", "true");
+
+  await page
+    .getByRole("button", { name: "新建异单位上下对比窗口", exact: true })
+    .click();
+  const mixedWindow = page.locator(
+    '.result-chart-window[data-chart-kind="mixed"]',
+  );
+  await expect(mixedWindow).toHaveCount(1);
+  await expect(mixedWindow).toHaveAttribute("data-pending", "true");
+
+  const pressureVariable = page
+    .locator(".results-variable-list button")
+    .filter({ hasText: "压力" })
+    .first();
+  await pressureVariable.dragTo(mixedWindow);
+  await expect(mixedWindow).toHaveAttribute("data-pending", "false");
+  await expect(mixedWindow).toContainText("Pa");
+
+  await mixedWindow
+    .getByRole("button", {
+      name: "管理多曲线窗口中的曲线",
+      exact: true,
+    })
+    .click();
+  await mixedWindow.locator(".result-chart-multi-menu-row .remove").click();
+  await expect(mixedWindow).toHaveCount(1);
+  await expect(mixedWindow).toHaveAttribute("data-pending", "true");
+});
+
+test("a pending window recovered from stale variable keys accepts a new first curve", async ({
+  page,
+}) => {
+  await page.addInitScript((snapshotId) => {
+    window.sessionStorage.setItem(
+      `system-simulation-flow:result-layout:${snapshotId}`,
+      JSON.stringify([
+        {
+          id: "chart-1",
+          kind: "multi",
+          variableKey: "removed.variable",
+          variableKeys: ["removed.variable"],
+          hiddenVariableKeys: [],
+          variableUnits: { "removed.variable": "Pa" },
+          x: 40,
+          y: 40,
+          width: 620,
+          height: 330,
+          unit: "Pa",
+          cursorEnabled: false,
+          zIndex: 1,
+        },
+      ]),
+    );
+  }, chartWindowSnapshot.id);
+
+  await page.goto("/");
+  await openResults(page);
+
+  const pendingWindow = page.locator(
+    '.result-chart-window[data-chart-kind="multi"]',
+  );
+  await expect(pendingWindow).toHaveAttribute("data-pending", "true");
+
+  await page.locator(".results-variable-list button").first().dragTo(pendingWindow);
+  await expect(pendingWindow).toHaveAttribute("data-pending", "false");
+});