perf: 优化工作流的节点UI和交互

easyflow-ui-admin/packages/tinyflow-ui/src/components/utils/createFloating.ts

@@ -1,7 +1,6 @@
 import {
   arrow,
   computePosition,
-  flip,
   type FlipOptions,
   offset,
   type OffsetOptions,
@@ -20,6 +19,8 @@ export type FloatingOptions = {
     shiftOptions?: ShiftOptions;
     interactive?: boolean;
     showArrow?: boolean;
+    onShow?: () => void;
+    onHide?: () => void;
 };
 
 export type FloatingInstance = {
@@ -37,7 +38,9 @@ export const createFloating = ({
     flipOptions,
     shiftOptions,
     interactive,
-    showArrow
+    showArrow,
+    onShow,
+    onHide
 }: FloatingOptions): FloatingInstance => {
     if (typeof trigger === 'string') {
         const triggerEl = document.querySelector(trigger);
@@ -78,14 +81,15 @@ export const createFloating = ({
             placement: placement,
             middleware: [
                 offset(offsetOptions), // 手动偏移配置
-                flip(flipOptions), //自动翻转
+                // flip(flipOptions), // 注释掉自动翻转，强制向下弹出，避免遮挡顶部工具栏
                 shift(shiftOptions), //自动偏移（使得浮动元素能够进入视野）
                 ...(showArrow ? [arrow({ element: arrowElement })] : [])
             ]
         }).then(({ x, y, placement, middlewareData }) => {
             Object.assign(floating.style, {
                 left: `${x}px`,
-                top: `${y}px`
+                top: `${y}px`,
+                position: 'absolute'
             });
 
             if (showArrow) {
@@ -113,7 +117,7 @@ export const createFloating = ({
 
     function showTooltip() {
         floating.style.display = 'block';
-        floating.style.visibility = 'block';
+        floating.style.visibility = 'visible';
         floating.style.position = 'absolute';
 
         if (showArrow) {
@@ -122,6 +126,7 @@ export const createFloating = ({
 
         visible = true;
         updatePosition();
+        onShow?.();
     }
 
     function hideTooltip() {
@@ -130,10 +135,10 @@ export const createFloating = ({
             arrowElement.style.display = 'none';
         }
         visible = false;
+        onHide?.();
     }
 
     function onTrigger(event: any) {
-        event.stopPropagation();
         if (!visible) {
             showTooltip();
         } else {
@@ -142,7 +147,7 @@ export const createFloating = ({
     }
 
     function hideTooltipCompute(event: any) {
-        if (floating.contains(event.target as Node)) {
+        if (floating.contains(event.target as Node) || (trigger as Node).contains(event.target as Node)) {
             return;
         }
         hideTooltip();