@oceanbase/design 1.0.0-alpha.15 → 1.0.0-alpha.17

package/lib/filter/components/ResponsiveFilterGroup.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
 var _antd = require("antd");
 var _icons = require("@oceanbase/icons");
 var _button = _interopRequireDefault(require("../../button"));
@@ -17,61 +16,44 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * ResponsiveFilterGroup 组件
- *
- * 响应式 Filter 容器，当宽度不足时自动将后面的 Filter 收起到 FilterWrap 中
- *
- * @example
- * ```tsx
- * <ResponsiveFilterGroup onApply={handleSearch} onClearAll={handleReset}>
- *   <Filter.Select label="操作者" ... />
- *   <Filter.Cascader label="事件操作" ... />
- *   <Filter.Select label="执行结果" ... />
- * </ResponsiveFilterGroup>
- * ```
- */
-// 检查子元素是否可以被收集
-const isCollapsible = child => {
-  // 检查子元素的 props 中是否有 collapsible 属性
-  // 如果子元素是 Form.Item，需要检查其子元素的 props
-  const childProps = child.props;
+// 检查元素是否是 Filter 组件（通过 __isFilterComponent 静态标记识别）
+const isFilterComponent = child => {
+  const type = child.type;
+  if (type?.__isFilterComponent) return true;
+  if (child.props?.children && /*#__PURE__*/(0, _react.isValidElement)(child.props.children)) {
+    const innerType = child.props.children.type;
+    if (innerType?.__isFilterComponent) return true;
+  }
+  return false;
+};
 
-  // 直接检查 collapsible 属性
+// 检查子元素是否可以被折叠（只有 Filter 组件默认可折叠，其他组件需要显式设置 collapsible）
+const isCollapsibleCheck = child => {
+  const childProps = child.props;
   if (childProps?.collapsible !== undefined) {
     return childProps.collapsible !== false;
   }
-
-  // 如果是 Form.Item 等包装组件，检查其 children 的 collapsible
   if (childProps?.children && /*#__PURE__*/(0, _react.isValidElement)(childProps.children)) {
     const innerChild = childProps.children;
     if (innerChild.props?.collapsible !== undefined) {
       return innerChild.props.collapsible !== false;
     }
   }
-
-  // 默认可以被收集
-  return true;
+  return isFilterComponent(child);
 };
 
 // 检查子元素是否应该始终折叠
-const isAlwaysCollapse = child => {
+const isAlwaysCollapseCheck = child => {
   const childProps = child.props;
-
-  // 直接检查 alwaysCollapse 属性
   if (childProps?.alwaysCollapse !== undefined) {
     return childProps.alwaysCollapse === true;
   }
-
-  // 如果是 Form.Item 等包装组件，检查其 children 的 alwaysCollapse
   if (childProps?.children && /*#__PURE__*/(0, _react.isValidElement)(childProps.children)) {
     const innerChild = childProps.children;
     if (innerChild.props?.alwaysCollapse !== undefined) {
       return innerChild.props.alwaysCollapse === true;
     }
   }
-
-  // 默认不始终折叠
   return false;
 };
 const ResponsiveFilterGroup = ({
@@ -95,232 +77,135 @@ const ResponsiveFilterGroup = ({
     ...contextLocale?.Filter,
     ...customLocale
   };
-  // 如果没有传入 label，使用国际化默认值
   const filterLabel = label ?? filterLocale?.filters;
   const containerRef = (0, _react.useRef)(null);
-  const innerFlexRef = (0, _react.useRef)(null);
-  const measureRef = (0, _react.useRef)(null);
-  const unmeasureRef = (0, _react.useRef)(null);
-  const moreButtonRef = (0, _react.useRef)(null);
   const filterButtonRef = (0, _react.useRef)(null);
-  const [visibleCount, setVisibleCount] = (0, _react.useState)(-1); // -1 表示还未计算
-  const [childWidths, setChildWidths] = (0, _react.useState)([]);
-  // 不再依赖外部传入的预留宽度，初始为 0，后续通过真实 DOM 测量获得
-  const [actualMoreButtonWidth, setActualMoreButtonWidth] = (0, _react.useState)(0);
-  const [unCollapsibleWidth, setUnCollapsibleWidth] = (0, _react.useState)(0);
-  const [measureContainer, setMeasureContainer] = (0, _react.useState)(null);
-  // 维护筛选值的数组
+  const moreButtonMeasureRef = (0, _react.useRef)(null);
+  const cachedWidths = (0, _react.useRef)([]);
+  const [visibleCount, setVisibleCount] = (0, _react.useState)(null);
   const [filterValues, setFilterValues] = (0, _react.useState)([]);
-  const childrenArray = _react.Children.toArray(children).filter(_react.isValidElement);
-
-  // 分离不可收集和可收集的子元素
-  const unCollapsibleChildren = childrenArray.filter(child => !isCollapsible(child));
-  const collapsibleChildren = childrenArray.filter(child => isCollapsible(child));
-
-  // 分离始终折叠和普通可收集的子元素
-  const alwaysCollapseChildren = collapsibleChildren.filter(child => isAlwaysCollapse(child));
-  const normalCollapsibleChildren = collapsibleChildren.filter(child => !isAlwaysCollapse(child));
-
-  // 创建测量容器
-  (0, _react.useEffect)(() => {
-    const container = document.createElement('div');
-    container.style.cssText = 'position: absolute; visibility: hidden; pointer-events: none; top: -9999px; left: -9999px;';
-    document.body.appendChild(container);
-    setMeasureContainer(container);
-    return () => {
-      document.body.removeChild(container);
-    };
-  }, []);
-
-  // 测量每个可收集子元素的宽度（只测量普通可收集的，不包括始终折叠的）
-  const measureChildren = (0, _react.useCallback)(() => {
-    if (!measureRef.current) return;
-
-    // 测量普通可收集子元素宽度
-    const widths = [];
-    if (measureRef.current) {
-      const measureDiv = measureRef.current;
-      const measureItems = measureDiv.children;
-      for (let i = 0; i < measureItems.length; i++) {
-        const item = measureItems[i];
-        widths.push(item.offsetWidth);
-      }
-    }
-    setChildWidths(widths);
-
-    // 测量 more button 的宽度
-    if (moreButtonRef.current) {
-      setActualMoreButtonWidth(moreButtonRef.current.offsetWidth);
-    }
-
-    // 测量不可收集子元素的总宽度（使用隐藏测量容器，保证与普通可收集项的测量方式一致）
-    if (unmeasureRef.current) {
-      let sum = 0;
-      const items = unmeasureRef.current.children;
-      for (let i = 0; i < items.length; i++) {
-        const it = items[i];
-        sum += it.offsetWidth;
+  const childrenArray = (0, _react.useMemo)(() => _react.Children.toArray(children).filter(_react.isValidElement), [children]);
+  const childInfo = (0, _react.useMemo)(() => childrenArray.map((child, index) => ({
+    child,
+    index,
+    isCollapsible: isCollapsibleCheck(child),
+    isAlwaysCollapse: isAlwaysCollapseCheck(child)
+  })), [childrenArray]);
+  const collapsibleItems = (0, _react.useMemo)(() => childInfo.filter(item => item.isCollapsible), [childInfo]);
+  const alwaysCollapseItems = (0, _react.useMemo)(() => collapsibleItems.filter(item => item.isAlwaysCollapse), [collapsibleItems]);
+  const normalCollapsibleItems = (0, _react.useMemo)(() => collapsibleItems.filter(item => !item.isAlwaysCollapse), [collapsibleItems]);
+
+  // 当 children 结构变化（增删/重排）时才重置为测量模式
+  // 不能用 childrenArray 引用比较，因为 JSX 每次渲染都产生新引用
+  const childrenStructureKey = childrenArray.map(c => c.key ?? c.type).join(',');
+  const [prevStructureKey, setPrevStructureKey] = (0, _react.useState)(childrenStructureKey);
+  if (childrenStructureKey !== prevStructureKey) {
+    setPrevStructureKey(childrenStructureKey);
+    setVisibleCount(null);
+  }
+  const isMeasuring = visibleCount === null;
+
+  // 纯计算函数：根据容器宽度计算可显示的可折叠项数量
+  const calculateVisibleCount = (0, _react.useCallback)(containerWidth => {
+    if (normalCollapsibleItems.length === 0) return 0;
+    const widths = cachedWidths.current;
+    if (widths.length === 0) return normalCollapsibleItems.length;
+    let uncollapsibleTotalWidth = 0;
+    let uncollapsibleCount = 0;
+    childInfo.forEach(info => {
+      if (!info.isCollapsible) {
+        uncollapsibleTotalWidth += widths[info.index] || 0;
+        uncollapsibleCount++;
       }
-      setUnCollapsibleWidth(sum || 0);
-    } else {
-      setUnCollapsibleWidth(0);
-    }
-  }, [unCollapsibleChildren.length, normalCollapsibleChildren.length, gap]);
-
-  // 计算可见的可收集子元素数量（只计算普通可收集的，不包括始终折叠的）
-  const calculateVisibleCount = (0, _react.useCallback)(() => {
-    if (!containerRef.current) return;
-    // 如果没有普通可收集的子元素，显示全部（0表示全部折叠）
-    if (normalCollapsibleChildren.length === 0) {
-      setVisibleCount(0);
-      return;
-    }
-    if (childWidths.length === 0) return;
-
-    // 可用宽度 = 容器宽度 - 不可收集子元素占用的宽度 - 可能存在的间隙
-    const containerWidth = containerRef.current.offsetWidth;
-    const gapBetweenUncollapsibleAndCollapsible = unCollapsibleChildren.length > 0 && normalCollapsibleChildren.length > 0 ? gap : 0;
-    const availableWidth = containerWidth - (unCollapsibleWidth || 0) - gapBetweenUncollapsibleAndCollapsible;
-    let totalWidth = 0;
+    });
+    const moreWidth = moreButtonMeasureRef.current?.offsetWidth || 0;
+    const hasAlwaysCollapse = alwaysCollapseItems.length > 0;
+    let visibleWidth = 0;
     let count = 0;
-
-    // 如果有始终折叠的元素，需要预留 more button 的宽度
-    const hasAlwaysCollapse = alwaysCollapseChildren.length > 0;
-    const reservedForMoreButton = hasAlwaysCollapse ? actualMoreButtonWidth + gap : 0;
-    for (let i = 0; i < childWidths.length; i++) {
-      const itemWidth = childWidths[i] + (i > 0 ? gap : 0);
-      // 检查是否还有空间放置当前元素
-      // 如果不是最后一个元素，需要预留实际测量到的更多按钮宽度
-      const needMoreButton = i < childWidths.length - 1;
-      const reservedWidth = needMoreButton ? actualMoreButtonWidth + gap : reservedForMoreButton;
-      if (totalWidth + itemWidth + reservedWidth <= availableWidth) {
-        totalWidth += itemWidth;
+    for (let i = 0; i < normalCollapsibleItems.length; i++) {
+      const itemWidth = widths[normalCollapsibleItems[i].index] || 0;
+      const newWidth = visibleWidth + itemWidth;
+      const remaining = normalCollapsibleItems.length - i - 1;
+      const needMore = remaining > 0 || hasAlwaysCollapse;
+      const totalItems = uncollapsibleCount + count + 1 + (needMore ? 1 : 0);
+      const totalGaps = totalItems > 1 ? (totalItems - 1) * gap : 0;
+      const totalWidth = uncollapsibleTotalWidth + newWidth + (needMore ? moreWidth : 0) + totalGaps;
+      if (totalWidth <= containerWidth) {
+        visibleWidth = newWidth;
         count++;
       } else {
         break;
       }
     }
+    return count;
+  }, [childInfo, normalCollapsibleItems, alwaysCollapseItems, gap]);
 
-    // 如果所有元素都能显示，就显示全部
-    if (count === childWidths.length) {
-      setVisibleCount(childWidths.length);
-    } else if (count === 0) {
-      // 如果一个都放不下，只显示 more button
-      setVisibleCount(0);
-    } else {
-      setVisibleCount(count);
-    }
-  }, [childWidths, gap, actualMoreButtonWidth, normalCollapsibleChildren.length, alwaysCollapseChildren.length, unCollapsibleWidth, unCollapsibleChildren.length]);
+  // 使用 ref 保存最新的计算函数，避免 ResizeObserver 等 effect 频繁重建
+  const calculateRef = (0, _react.useRef)(calculateVisibleCount);
+  calculateRef.current = calculateVisibleCount;
 
-  // 初始测量 - 使用 useLayoutEffect 确保在绘制前完成
+  // Effect 1: 测量模式下，读取所有子元素宽度并计算 visibleCount
   (0, _react.useLayoutEffect)(() => {
-    if (measureContainer) {
-      // 延迟一帧确保 portal 已渲染
-      requestAnimationFrame(() => {
-        measureChildren();
-      });
-    }
-  }, [children, measureChildren, measureContainer, normalCollapsibleChildren]);
-
-  // 当 filterValues 改变时，more 按钮可能会显示 badge，导致宽度变化，需重新测量
-  (0, _react.useEffect)(() => {
-    if (measureContainer) {
-      requestAnimationFrame(() => {
-        measureChildren();
-      });
-    }
-  }, [filterValues, measureChildren, measureContainer]);
-
-  // 当 childWidths 更新后计算可见数量
-  (0, _react.useLayoutEffect)(() => {
-    calculateVisibleCount();
-  }, [childWidths, unCollapsibleWidth, calculateVisibleCount]);
-
-  // 监听窗口大小变化
-  (0, _react.useEffect)(() => {
-    const handleResize = () => {
-      calculateVisibleCount();
-    };
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [calculateVisibleCount]);
+    if (!containerRef.current || !isMeasuring) return;
+    const items = containerRef.current.querySelectorAll('[data-filter-item]');
+    const newWidths = [];
+    items.forEach(el => {
+      const idx = Number(el.dataset.filterItem);
+      if (!isNaN(idx)) {
+        newWidths[idx] = el.offsetWidth;
+      }
+    });
+    cachedWidths.current = newWidths;
+    const count = calculateRef.current(containerRef.current.offsetWidth);
+    setVisibleCount(count);
+  }, [isMeasuring]);
 
-  // 监听容器大小变化
+  // Effect 2: 监听容器大小变化，用缓存宽度重新计算（不需要重新测量）
   (0, _react.useEffect)(() => {
     if (!containerRef.current) return;
-    const resizeObserver = new ResizeObserver(() => {
-      calculateVisibleCount();
+    const el = containerRef.current;
+    const ro = new ResizeObserver(() => {
+      if (cachedWidths.current.length === 0) return;
+      const count = calculateRef.current(el.offsetWidth);
+      setVisibleCount(prev => prev === count ? prev : count);
     });
-    resizeObserver.observe(containerRef.current);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [calculateVisibleCount]);
-
-  // 分离可见和隐藏的普通可收集子元素（始终折叠的不参与计算）
-  const visibleCollapsibleChildren = visibleCount === -1 ? normalCollapsibleChildren : normalCollapsibleChildren.slice(0, visibleCount);
-  const hiddenCollapsibleChildren = visibleCount === -1 ? [] : normalCollapsibleChildren.slice(visibleCount);
-
-  // 合并始终折叠和隐藏的普通可收集子元素
-  const allHiddenChildren = [...alwaysCollapseChildren, ...hiddenCollapsibleChildren];
-
-  // 递归地为子元素添加 _isCollapsed prop
-  const addIsInWrapProp = element => {
-    const childProps = element.props;
-
-    // 对当前元素添加 _isCollapsed prop
-    const newProps = {
-      _isCollapsed: true
-    };
-
-    // 如果有 children，递归处理
-    if (childProps?.children) {
-      if ( /*#__PURE__*/(0, _react.isValidElement)(childProps.children)) {
-        // 单个子元素
-        newProps.children = addIsInWrapProp(childProps.children);
-      } else if (Array.isArray(childProps.children)) {
-        // 多个子元素
-        newProps.children = childProps.children.map(child => {
-          if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
-            return addIsInWrapProp(child);
-          }
-          return child;
-        });
-      }
-    }
-    return /*#__PURE__*/(0, _react.cloneElement)(element, newProps);
-  };
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
 
-  // 更新筛选值的函数
+  // Effect 3: filterValues 变化时，more 按钮 badge 可能变化，需要重新计算
+  (0, _react.useEffect)(() => {
+    if (!containerRef.current || cachedWidths.current.length === 0) return;
+    const count = calculateRef.current(containerRef.current.offsetWidth);
+    setVisibleCount(prev => prev === count ? prev : count);
+  }, [filterValues]);
+
+  // --- 派生状态 ---
+  const visibleIndexSet = (0, _react.useMemo)(() => {
+    if (visibleCount === null) return null;
+    return new Set(normalCollapsibleItems.slice(0, visibleCount).map(item => item.index));
+  }, [visibleCount, normalCollapsibleItems]);
+  const hiddenCollapsibleItems = (0, _react.useMemo)(() => {
+    if (!visibleIndexSet) return [];
+    return normalCollapsibleItems.filter(item => !visibleIndexSet.has(item.index));
+  }, [visibleIndexSet, normalCollapsibleItems]);
+  const allHiddenItems = (0, _react.useMemo)(() => [...alwaysCollapseItems, ...hiddenCollapsibleItems], [alwaysCollapseItems, hiddenCollapsibleItems]);
+
+  // --- 值管理 ---
   const updateFilterValue = (0, _react.useCallback)((id, _filterLabel, value, options, componentName) => {
     setFilterValues(prev => {
-      // 如果值为空，移除该项
-      // 对于 switch 组件，false 被视为未选中状态，应该被视为空值
-      const isEmpty = value === undefined || value === null || value === '' || componentName === 'switch' && value === false ||
-      // switch 组件的 false 值视为空
-      Array.isArray(value) && value.length === 0;
+      const isEmpty = value === undefined || value === null || value === '' || componentName === 'switch' && value === false || Array.isArray(value) && value.length === 0;
       if (isEmpty) {
         const filtered = prev.filter(item => item.id !== id);
-        // 如果数组长度没变化，说明该项本来就不存在，直接返回原数组
-        if (filtered.length === prev.length) {
-          return prev;
-        }
-        return filtered;
+        return filtered.length === prev.length ? prev : filtered;
       }
-      // 查找是否已存在
       const existingIndex = prev.findIndex(item => item.id === id);
       if (existingIndex >= 0) {
-        const existingItem = prev[existingIndex];
-        // 深度比较 options 是否相等
-        const optionsEqual = existingItem.options === options || existingItem.options === undefined && options === undefined || existingItem.options !== undefined && options !== undefined && JSON.stringify(existingItem.options) === JSON.stringify(options);
-
-        // 如果值、选项和组件名都没变化，直接返回原数组
-        if (existingItem.value === value && optionsEqual && existingItem.componentName === componentName && existingItem.label === _filterLabel) {
+        const existing = prev[existingIndex];
+        const optionsEqual = existing.options === options || existing.options === undefined && options === undefined || existing.options !== undefined && options !== undefined && JSON.stringify(existing.options) === JSON.stringify(options);
+        if (existing.value === value && optionsEqual && existing.componentName === componentName && existing.label === _filterLabel) {
           return prev;
         }
-        // 更新已存在的项
         const newValues = [...prev];
         newValues[existingIndex] = {
           id,
@@ -330,43 +215,35 @@ const ResponsiveFilterGroup = ({
           componentName
         };
         return newValues;
-      } else {
-        // 添加新项
-        return [...prev, {
-          id,
-          label: _filterLabel,
-          value,
-          options,
-          componentName
-        }];
       }
+      return [...prev, {
+        id,
+        label: _filterLabel,
+        value,
+        options,
+        componentName
+      }];
     });
   }, []);
   const handleClearAll = () => {
-    // 先清除所有子组件的值
-    allHiddenChildren.forEach(child => {
-      if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
-        const childProps = child.props;
-        // 如果是 Form.Item，需要访问其子组件
+    allHiddenItems.forEach(item => {
+      if ( /*#__PURE__*/(0, _react.isValidElement)(item.child)) {
+        const childProps = item.child.props;
         if (childProps.children && /*#__PURE__*/(0, _react.isValidElement)(childProps.children)) {
           const innerChildProps = childProps.children.props;
-          if (innerChildProps.onChange) {
-            innerChildProps.onChange(undefined);
-          }
-        } else if (childProps.onChange) {
-          childProps.onChange(undefined);
+          innerChildProps.onChange?.(undefined);
+        } else {
+          childProps.onChange?.(undefined);
         }
       }
     });
-    // 然后清除 filterValues
     setFilterValues([]);
-    // 最后调用外部回调
-    onClearAll();
+    onClearAll?.();
   };
 
-  // 渲染隐藏的可收集子元素到 FilterWrap 中（包括始终折叠和隐藏的普通可收集子元素）
+  // --- 渲染 FilterWrap（收起的筛选项） ---
   const renderHiddenChildren = () => {
-    if (allHiddenChildren.length === 0) return null;
+    if (allHiddenItems.length === 0) return null;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterContext.FilterProvider, {
       isCollapsed: true,
       filterValues: filterValues,
@@ -378,6 +255,7 @@ const ResponsiveFilterGroup = ({
         label: filterLabel,
         extra: extra,
         onClearAll: handleClearAll,
+        showCount: showCount,
         footer: showActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
           justify: "space-between",
           children: [onApply && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
@@ -395,86 +273,95 @@ const ResponsiveFilterGroup = ({
             children: filterLocale?.clearAll
           })]
         }),
-        children: allHiddenChildren.map((child, index) => {
-          if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
-            // 使用 child.key 或生成稳定的 key
-            const stableKey = child.key || `responsive-filter-child-${index}`;
+        children: allHiddenItems.map((item, index) => {
+          if ( /*#__PURE__*/(0, _react.isValidElement)(item.child)) {
+            const stableKey = item.child.key || `responsive-filter-child-${index}`;
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
-              children: addIsInWrapProp(child)
+              children: item.child
             }, stableKey);
           }
-          return child;
+          return item.child;
         })
       })
     });
   };
 
-  // 测量容器内容 - 使用 Portal 渲染到 body 外部，避免影响布局计算
-  // 只测量可收集的子元素
-  const measureContent = measureContainer ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: unmeasureRef,
-      style: {
-        display: 'flex',
-        gap,
-        whiteSpace: 'nowrap'
-      },
-      children: unCollapsibleChildren.map((child, index) => {
-        const stableKey = /*#__PURE__*/(0, _react.isValidElement)(child) && child.key ? child.key : `measure-unc-${index}`;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  // --- 渲染子元素 ---
+  // 所有子元素始终保持在 Flex 中的稳定位置（FilterProvider + div 包裹 + 稳定 key），
+  // 通过 CSS display 控制显隐，避免在可见/折叠间切换时卸载重挂载导致表单值丢失。
+  // FilterProvider 使隐藏的原始组件能直接感知 isCollapsed 并上报值，无需依赖 Popover 中的克隆。
+  const renderChildren = () => {
+    const elements = [];
+    let filterWrapInserted = false;
+    let collapsibleIdx = 0;
+    childrenArray.forEach((child, index) => {
+      const info = childInfo[index];
+      const stableKey = child.key || `filter-item-${index}`;
+      let display;
+      let isHidden = false;
+      if (isMeasuring) {
+        display = 'inline-flex';
+      } else if (!info.isCollapsible) {
+        display = undefined;
+      } else if (info.isAlwaysCollapse) {
+        display = 'none';
+        isHidden = true;
+      } else {
+        const isVisible = collapsibleIdx < visibleCount;
+        display = isVisible ? undefined : 'none';
+        isHidden = !isVisible;
+        collapsibleIdx++;
+      }
+      elements.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterContext.FilterProvider, {
+        isCollapsed: !isMeasuring && isHidden,
+        filterValues: filterValues,
+        updateFilterValue: updateFilterValue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          "data-filter-item": isMeasuring ? index : undefined,
           style: {
-            display: 'inline-flex'
+            display
           },
           children: child
-        }, stableKey);
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: measureRef,
+        })
+      }, stableKey));
+      if (!isMeasuring && isHidden && !filterWrapInserted && allHiddenItems.length > 0) {
+        filterWrapInserted = true;
+        elements.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+          children: renderHiddenChildren()
+        }, "filter-wrap"));
+      }
+    });
+    if (!isMeasuring && !filterWrapInserted && allHiddenItems.length > 0) {
+      elements.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+        children: renderHiddenChildren()
+      }, "filter-wrap"));
+    }
+    return elements;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: containerRef,
+    className: "responsive-filter-group",
+    style: {
+      flex: '1 1 auto',
+      minWidth: 0,
+      position: 'relative',
+      visibility: isMeasuring ? 'hidden' : undefined,
+      ...style
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: moreButtonMeasureRef,
       style: {
-        display: 'flex',
-        gap,
-        whiteSpace: 'nowrap'
+        position: 'absolute',
+        visibility: 'hidden',
+        pointerEvents: 'none',
+        top: -9999,
+        left: -9999,
+        display: 'inline-flex'
       },
-      children: normalCollapsibleChildren.map((child, index) => {
-        // 使用 child.key 或生成稳定的 key
-        const stableKey = /*#__PURE__*/(0, _react.isValidElement)(child) && child.key ? child.key : `measure-child-${index}`;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          style: {
-            display: 'inline-flex'
-          },
-          children: child
-        }, stableKey);
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterContext.FilterProvider, {
-      isCollapsed: true,
-      filterValues: filterValues,
-      updateFilterValue: updateFilterValue,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          position: 'absolute',
-          visibility: 'hidden',
-          pointerEvents: 'none',
-          top: -9999,
-          left: -9999
-        },
-        children: allHiddenChildren.map((child, index) => {
-          if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
-              children: addIsInWrapProp(child)
-            }, child.key || `hidden-clone-${index}`);
-          }
-          return child;
-        })
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterContext.FilterProvider, {
-      isCollapsed: true,
-      filterValues: filterValues,
-      updateFilterValue: updateFilterValue,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        ref: moreButtonRef,
-        style: {
-          display: 'inline-flex'
-        },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterContext.FilterProvider, {
+        isCollapsed: true,
+        filterValues: filterValues,
+        updateFilterValue: updateFilterValue,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterWrap.default, {
           collapsed: true,
           icon: icon,
@@ -484,24 +371,11 @@ const ResponsiveFilterGroup = ({
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {})
         })
       })
-    })]
-  }), measureContainer) : null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [measureContent, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: containerRef,
-      style: {
-        flex: '1 1 auto',
-        minWidth: 0,
-        overflow: 'hidden',
-        ...style
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
-        ref: innerFlexRef,
-        gap: gap,
-        align: "center",
-        wrap: "nowrap",
-        children: [unCollapsibleChildren, visibleCollapsibleChildren, renderHiddenChildren()]
-      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Flex, {
+      gap: gap,
+      align: "center",
+      wrap: "nowrap",
+      children: renderChildren()
     })]
   });
 };