优化交互

src/App.tsx

@@ -10,6 +10,8 @@ import {
   NodeTypes,
   NodeChange,
   OnEdgesChange,
+  ConnectionMode,
+  MarkerType,
   OnConnect,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
@@ -102,8 +104,13 @@ function FlowContent(): ReactNode {
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
-        onNodeClick={onNodeClick}
+        onNodeDoubleClick={onNodeClick}
         nodeTypes={nodeTypes}
+        deleteKeyCode={["Delete"]}
+        defaultEdgeOptions={{ 
+          animated: true,
+          markerEnd: { type: MarkerType.ArrowClosed }
+        }}
         fitView
       >
         <Background />

src/components/CustomNode.css

@@ -13,6 +13,20 @@
   box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
 }
 
+.custom-node .node-handle {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.custom-node:hover .node-handle {
+  opacity: 1;
+}
+
+.custom-node:hover .node-handle,
+.node-handle.react-flow__handle-connecting {
+  opacity: 1;
+}
+
 .node-header {
   display: flex;
   justify-content: space-between;

src/components/CustomNode.tsx

@@ -28,8 +28,11 @@ export default function CustomNode({
         )}
       </div>
 
-      <Handle type="target" position={Position.Top} />
-      <Handle type="source" position={Position.Bottom} />
+      {[Position.Top, Position.Bottom, Position.Right, Position.Left].map((position) => (
+        (["target", "source"] as const).map((type) => (
+          <Handle type={type} position={position} id={position} key={position} className="node-handle"/>
+        ))
+      ))}
     </div>
   );
 }