V4.12.3 features (#5595)

* refactor: remove ModelProviderIdType and update related types (#5549)

* perf: model provider

* fix eval create split (#5570)

* git rebase --continuedoc

* add more variable types (#5540)

* variable types

* password

* time picker

* internal var

* file

* fix-test

* time select default value & range

* password & type render

* fix

* fix build

* fix

* move method

* split date select

* icon

* perf: variable code

* prompt editor add markdown plugin (#5556)

* editor markdown

* fix build

* pnpm lock

* add props

* update code

* fix list

* editor ui

* fix variable reset (#5586)

* perf: variables type code

* customize lexical indent (#5588)

* perf: multiple selector

* perf: tab plugin

* doc

* refactor: update workflow constants to use ToolTypeEnum (#5491)

* refactor: replace FlowNodeTemplateTypeEnum with string literals in workflow templates

* perf: tool type

---------

Co-authored-by: archer <545436317@qq.com>

* update doc

* fix: make table's row more natural while dragging it (#5596)

* feat: add APIGetTemplate function and refactor template fetching logic (#5498)

* feat: add APIGetTemplate function and refactor template fetching logic

* chore: adjust the code

* chore: update sdk

---------

Co-authored-by: FinleyGe <m13203533462@163.com>

* perf init system

* doc

* remove log

* remove i18n

* perf: variables render

---------

Co-authored-by: Ctrlz <143257420+ctrlz526@users.noreply.github.com>
Co-authored-by: heheer <heheer@sealos.io>
Co-authored-by: 伍闲犬 <whoeverimf5@gmail.com>
Co-authored-by: FinleyGe <m13203533462@163.com>

packages/web/components/common/MySelect/MultipleSelect.tsx

@@ -22,6 +22,7 @@ import type { useScrollPagination } from '../../../hooks/useScrollPagination';
 import MyDivider from '../MyDivider';
 import { shadowLight } from '../../../styles/theme';
 import { isArray } from 'lodash';
+import { useMount } from 'ahooks';
 
 const menuItemStyles: MenuItemProps = {
   borderRadius: 'sm',
@@ -83,7 +84,6 @@ const MultipleSelect = <T = any,>({
   tagStyle,
   ...props
 }: SelectProps<T>) => {
-  const ref = useRef<HTMLButtonElement>(null);
   const SearchInputRef = useRef<HTMLInputElement>(null);
   const tagsContainerRef = useRef<HTMLDivElement>(null);
 
@@ -116,7 +116,7 @@ const MultipleSelect = <T = any,>({
         onSelect(newValue);
       }
     },
-    [inputValue, value, isSelectAll, onSelect]
+    [inputValue, value, onSelect]
   );
   useEffect(() => {
     if (!isOpen) {
@@ -124,40 +124,6 @@ const MultipleSelect = <T = any,>({
     }
   }, [isOpen]);
 
-  useEffect(() => {
-    const getWidth = (w: any) =>
-      typeof w === 'number' ? w : typeof w === 'string' ? parseInt(w) : 0;
-
-    const totalWidth = getWidth(props.w) || 200;
-    const tagWidth = getWidth(tagStyle?.w) || 60;
-    const formLabelWidth = formLabel ? formLabel.length * 8 + 20 : 0;
-    const availableWidth = totalWidth - formLabelWidth - 40;
-    const overflowWidth = 30;
-
-    if (availableWidth <= 0) {
-      setVisibleItems(selectedItems.length > 0 ? [selectedItems[0]] : []);
-      setOverflowItems(selectedItems.slice(1));
-      return;
-    }
-
-    const { count } = selectedItems.reduce(
-      (acc, item, i) => {
-        const remain = selectedItems.length - i - 1;
-        const needOverflow = remain > 0 ? overflowWidth : 0;
-        if (acc.used + tagWidth + needOverflow <= availableWidth) {
-          return {
-            used: acc.used + tagWidth,
-            count: i + 1
-          };
-        }
-        return acc;
-      },
-      { used: 0, count: 0 }
-    );
-    setVisibleItems(selectedItems.slice(0, count));
-    setOverflowItems(selectedItems.slice(count));
-  }, [selectedItems, isOpen, props.w, tagStyle, formLabel]);
-
   const onclickItem = useCallback(
     (val: T) => {
       if (isSelectAll) {
@@ -172,15 +138,128 @@ const MultipleSelect = <T = any,>({
         onSelect([...value, val]);
       }
     },
-    [value, isSelectAll, onSelect, setIsSelectAll]
+    [isSelectAll, value, onSelect, list, setIsSelectAll]
   );
 
   const onSelectAll = useCallback(() => {
-    const hasSelected = isSelectAll || value.length > 0;
-    onSelect(hasSelected ? [] : list.map((item) => item.value));
+    onSelect(isSelectAll ? [] : list.map((item) => item.value));
 
     setIsSelectAll?.((state) => !state);
-  }, [value, list, setIsSelectAll, onSelect]);
+  }, [isSelectAll, onSelect, list, setIsSelectAll]);
+
+  // 动态长度计算器 - 计算一行能展示多少个tag，剩余用+n表示
+  const calculateLayout = useCallback(() => {
+    if (!tagsContainerRef.current || selectedItems.length === 0) {
+      setVisibleItems(selectedItems);
+      setOverflowItems([]);
+      return;
+    }
+
+    const containerWidth = tagsContainerRef.current.offsetWidth;
+    const tagGap = 4; // tag之间的gap
+    const overflowIndicatorWidth = 30; // "+n" 宽度
+    const formLabelWidth = formLabel ? formLabel.length * 8 + 20 : 0;
+
+    // 实际可用宽度
+    const availableWidth = containerWidth - formLabelWidth - 10;
+
+    // 如果只有一个项目，直接显示
+    if (selectedItems.length === 1) {
+      setVisibleItems(selectedItems);
+      setOverflowItems([]);
+      return;
+    }
+
+    // 创建临时元素来测量每个tag的实际宽度
+    const measureTagWidth = (item: any): number => {
+      // 如果有tagStyle.w，优先使用
+      if (tagStyle?.w) {
+        return typeof tagStyle.w === 'number' ? tagStyle.w : parseInt(String(tagStyle.w)) || 60;
+      }
+
+      // 否则根据文本长度估算（更精确）
+      const text = String(item.label || item.value);
+      const baseWidth = 16; // 基础padding
+      const charWidth = 8; // 每个字符约8px
+      const closeIconWidth = closeable ? 20 : 0; // 关闭按钮宽度
+
+      return baseWidth + text.length * charWidth + closeIconWidth;
+    };
+
+    // 确保至少显示1个tag
+    const firstTagWidth = measureTagWidth(selectedItems[0]);
+
+    // 如果连第一个tag都放不下，也要强制显示
+    if (availableWidth < firstTagWidth) {
+      setVisibleItems([selectedItems[0]]);
+      setOverflowItems(selectedItems.slice(1));
+      return;
+    }
+
+    // 精确计算每个tag的宽度
+    let usedWidth = 0;
+    let visibleCount = 0;
+
+    for (let i = 0; i < selectedItems.length; i++) {
+      const currentTagWidth = measureTagWidth(selectedItems[i]);
+      const currentGap = i > 0 ? tagGap : 0;
+      const remainingItems = selectedItems.length - i - 1;
+      const needsOverflow = remainingItems > 0;
+      const overflowSpace = needsOverflow ? overflowIndicatorWidth + tagGap : 0;
+
+      const totalNeeded = usedWidth + currentTagWidth + currentGap + overflowSpace;
+
+      if (totalNeeded <= availableWidth) {
+        usedWidth += currentTagWidth + currentGap;
+        visibleCount = i + 1;
+      } else {
+        break;
+      }
+    }
+
+    // 保证至少显示1个tag
+    if (visibleCount === 0) {
+      visibleCount = 1;
+    }
+
+    setVisibleItems(selectedItems.slice(0, visibleCount));
+    setOverflowItems(selectedItems.slice(visibleCount));
+  }, [closeable, formLabel, selectedItems, tagStyle?.w]);
+
+  // 动态监听容器宽度变化并重新计算布局
+  useEffect(() => {
+    if (!tagsContainerRef.current) return;
+
+    // 创建 ResizeObserver 监听容器宽度变化
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        // 当容器宽度发生变化时，触发重新计算
+        requestAnimationFrame(() => {
+          calculateLayout();
+        });
+      }
+    });
+
+    // 开始监听容器
+    resizeObserver.observe(tagsContainerRef.current);
+
+    // 初始计算
+    requestAnimationFrame(() => {
+      calculateLayout();
+    });
+
+    // 清理监听器
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [calculateLayout]);
+
+  // 当选中项目、样式等发生变化时重新计算
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      calculateLayout();
+    });
+  }, [calculateLayout]);
 
   const ListRender = useMemo(() => {
     return (
@@ -215,7 +294,7 @@ const MultipleSelect = <T = any,>({
         })}
       </>
     );
-  }, [value, list, isSelectAll]);
+  }, [list, isSelectAll, value, onclickItem]);
 
   return (
     <Box h={'100%'} w={'100%'}>
@@ -230,7 +309,6 @@ const MultipleSelect = <T = any,>({
       >
         <MenuButton
           as={Flex}
-          ref={ref}
           px={3}
           alignItems={'center'}
           borderRadius={'md'}