1

frontend/src/pages/Workflow/Definition/Design/index.tsx

@@ -227,19 +227,46 @@ const WorkflowDesign: React.FC = () => {
 
     // 注册事件处理器
     const registerEventHandlers = (graph: Graph) => {
-        // 显示/隐藏连接桩
+        // 显示/隐藏连接桩和高亮
         graph.on('node:mouseenter', ({node}) => {
+            // 显示连接桩
             const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
             ports.forEach((port) => {
                 port.setAttribute('style', 'visibility: visible');
             });
+            
+            // 高亮当前节点
+            node.setAttrByPath('body/stroke', '#ff4d4f');
+            node.setAttrByPath('body/strokeWidth', 2);
         });
 
         graph.on('node:mouseleave', ({node}) => {
+            // 隐藏连接桩
             const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
             ports.forEach((port) => {
                 port.setAttribute('style', 'visibility: hidden');
             });
+            
+            // 取消高亮（除非是选中状态）
+            if (!node.hasTools()) {
+                node.setAttrByPath('body/stroke', '#5B8FF9');
+                node.setAttrByPath('body/strokeWidth', 1);
+            }
+        });
+
+        // 节点点击时的高亮
+        graph.on('node:click', ({ node }) => {
+            node.setAttrByPath('body/stroke', '#ff4d4f');
+            node.setAttrByPath('body/strokeWidth', 2);
+        });
+
+        // 点击空白处取消高亮
+        graph.on('blank:click', () => {
+            const selectedNode = graph.getSelectedCells()[0];
+            if (selectedNode && selectedNode.isNode()) {
+                selectedNode.setAttrByPath('body/stroke', '#5B8FF9');
+                selectedNode.setAttrByPath('body/strokeWidth', 1);
+            }
         });
 
         // 节点双击事件