perf: 优化节点下拉框UI

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

@@ -6,7 +6,8 @@ import {
   type OffsetOptions,
   type Placement,
   shift,
-  type ShiftOptions
+  type ShiftOptions,
+  size
 } from '@floating-ui/dom';
 
 export type FloatingOptions = {
@@ -21,6 +22,7 @@ export type FloatingOptions = {
     showArrow?: boolean;
     onShow?: () => void;
     onHide?: () => void;
+    syncWidth?: boolean;
 };
 
 export type FloatingInstance = {
@@ -40,7 +42,8 @@ export const createFloating = ({
     interactive,
     showArrow,
     onShow,
-    onHide
+    onHide,
+    syncWidth = false
 }: FloatingOptions): FloatingInstance => {
     if (typeof trigger === 'string') {
         const triggerEl = document.querySelector(trigger);
@@ -83,7 +86,14 @@ export const createFloating = ({
                 offset(offsetOptions), // 手动偏移配置
                 // flip(flipOptions), // 注释掉自动翻转，强制向下弹出，避免遮挡顶部工具栏
                 shift(shiftOptions), //自动偏移（使得浮动元素能够进入视野）
-                ...(showArrow ? [arrow({ element: arrowElement })] : [])
+                ...(showArrow ? [arrow({ element: arrowElement })] : []),
+                ...(syncWidth ? [size({
+                    apply({ rects, elements }) {
+                        Object.assign(elements.floating.style, {
+                            minWidth: `${rects.reference.width}px`,
+                        });
+                    }
+                })] : [])
             ]
         }).then(({ x, y, placement, middlewareData }) => {
             Object.assign(floating.style, {