完善建模交互、组件图标与系统协议

frontend/src/ContactAwareEdge.tsx

@@ -6,11 +6,9 @@ import {
 } 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({
+  data,
   id,
   interactionWidth,
   markerEnd,
@@ -23,31 +21,9 @@ export function ContactAwareEdge({
   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 isContactEdge = data?.isContactEdge === true;
+  if (isContactEdge) {
+    return null;
   }
 
   const [edgePath] = getSmoothStepPath({