@seakoi/native-ui 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 本文档记录了项目的所有重要变更。
 
+# [1.3.0](https://gitlab.seakoi.net/digiziting_client/native-ui/compare/@seakoi/native-ui@1.2.0...@seakoi/native-ui@1.3.0) (2026-03-17)
+
+
+### ♻️Code Refactoring
+
+* **native-ui:** overflow code-review (By [@caoguizhi](https://gitlab.seakoi.net/caoguizhi)) ([7df2a0a4](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/7df2a0a4584298a0928f98fc4dce47f436fbffb9))
+* **native-ui:** overflow 优化新增内容时的闪烁 (By [@caoguizhi](https://gitlab.seakoi.net/caoguizhi)) ([03af9b89](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/03af9b89c9582696ab27ebd0684d0203723ac639))
+* **root:** 优化 docs-writer 技能 (By [@dengrenshan](https://gitlab.seakoi.net/dengrenshan)) ([83548f7c](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/83548f7c317179f5630f3af824938720f2d57814))
+* **native-ui:** 优化 Picker 取值逻辑 (By [@dengrenshan](https://gitlab.seakoi.net/dengrenshan)) ([2eed1672](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/2eed16721aedaef315ee4df7a47a49b2bb5a59a3))
+* **root:** 重构 create-component 技能 (By [@dengrenshan](https://gitlab.seakoi.net/dengrenshan)) ([3b45d12a](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/3b45d12a49ec9d3a21718c06b9c321498a10b637))
+* **native-ui:** 重构 Overflow 组件架构 (By [@caoguizhi](https://gitlab.seakoi.net/caoguizhi)) ([9c91647b](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/9c91647b6f00df2b8a45cfc6ad2deb578e6778c8))
+* **native-ui:** 重构 Select 组件 API 为扁平化结构 (By [@caoguizhi](https://gitlab.seakoi.net/caoguizhi)) ([07f6b042](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/07f6b042a3e154b59cf56d1fa771376088d99d88))
+* **native-ui:** 重构 Select 组件样式系统和 Props 结构、修复受控与非受控模式 (By [@caoguizhi](https://gitlab.seakoi.net/caoguizhi)) ([e7cee1b6](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/e7cee1b6fc1bd20b927fcaceffa063859e799f09))
+
+
+### ⚡Performance Improvements
+
+* **native-ui:** 修复 Select 组件代码审查问题 (By [@caoguizhi](https://gitlab.seakoi.net/caoguizhi)) ([912357c8](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/912357c8db91e14fd50600d2e4865b65f7c53883))
+
+
+### ✨Features
+
+* **native-ui:** 增强 Portal 组件样式自定义能力 (By [@caoguizhi](https://gitlab.seakoi.net/caoguizhi)) ([0c0967da](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/0c0967dac6730b717af1f0624e22303a516d4bc7))
+* **native-ui:** 实现 Tabs 组件均分模式和徽标功能 (By [@xuzhijun](https://gitlab.seakoi.net/xuzhijun)) ([36d50faa](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/36d50faaf4b243c555487e81c9e724fcf88c7575))
+* **native-ui:** 扩展共享工具函数 (By [@caoguizhi](https://gitlab.seakoi.net/caoguizhi)) ([0b872987](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/0b872987a840b8e0d7bc90b3b631e577bde7d640))
+* **native-ui:** 新增 Overflow 溢出处理组件 (By [@caoguizhi](https://gitlab.seakoi.net/caoguizhi)) ([34b850f5](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/34b850f56e319e3e941ce2aba5829f86441eeeb4))
+* **native-ui:** 新增 Select 选择器组件 (By [@caoguizhi](https://gitlab.seakoi.net/caoguizhi)) ([0adbc6d7](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/0adbc6d7d1c9ad25923d98c4781d5dcd618956d0))
+* **root:** 添加 OpenSpec 工作流技能 (By [@dengrenshan](https://gitlab.seakoi.net/dengrenshan)) ([5f5da26c](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/5f5da26c17dde4ae39b29edb9dc2963a3cb2b030))
+
+
+### 🐛Bug Fixes
+
+* **native-ui:** 修复 BaseInput 组件失去焦点后的值处理 (By [@caoguizhi](https://gitlab.seakoi.net/caoguizhi)) ([3c1afbb5](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/3c1afbb524c0c0ac8a02f9b7927fe8f2c34b1c2d))
+* **example:** 更新tabs的示例 (By [@xuzhijun](https://gitlab.seakoi.net/xuzhijun)) ([7e5531ff](https://gitlab.seakoi.net/digiziting_client/native-ui/commit/7e5531ffeb5ea5014e12b5cb247d5dd68dfca254))
+
 # [1.2.0](https://gitlab.seakoi.net/digiziting_client/native-ui/compare/@seakoi/native-ui@1.1.3...@seakoi/native-ui@1.2.0) (2026-03-05)
 
 

package/dist/commonjs/components/base/index.js

@@ -256,7 +256,7 @@ Object.keys(_index21).forEach(function (key) {
     }
   });
 });
-var _index22 = require("./picker/index.js");
+var _index22 = require("./overflow/index.js");
 Object.keys(_index22).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _index22[key]) return;
@@ -267,7 +267,7 @@ Object.keys(_index22).forEach(function (key) {
     }
   });
 });
-var _index23 = require("./picker-backup/index.js");
+var _index23 = require("./picker/index.js");
 Object.keys(_index23).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _index23[key]) return;
@@ -278,7 +278,7 @@ Object.keys(_index23).forEach(function (key) {
     }
   });
 });
-var _index24 = require("./picker-view/index.js");
+var _index24 = require("./picker-backup/index.js");
 Object.keys(_index24).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _index24[key]) return;
@@ -289,7 +289,7 @@ Object.keys(_index24).forEach(function (key) {
     }
   });
 });
-var _index25 = require("./portal/index.js");
+var _index25 = require("./picker-view/index.js");
 Object.keys(_index25).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _index25[key]) return;
@@ -300,7 +300,7 @@ Object.keys(_index25).forEach(function (key) {
     }
   });
 });
-var _index26 = require("./radio/index.js");
+var _index26 = require("./portal/index.js");
 Object.keys(_index26).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _index26[key]) return;
@@ -311,7 +311,7 @@ Object.keys(_index26).forEach(function (key) {
     }
   });
 });
-var _index27 = require("./result/index.js");
+var _index27 = require("./radio/index.js");
 Object.keys(_index27).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _index27[key]) return;
@@ -322,7 +322,7 @@ Object.keys(_index27).forEach(function (key) {
     }
   });
 });
-var _index28 = require("./surface/index.js");
+var _index28 = require("./result/index.js");
 Object.keys(_index28).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _index28[key]) return;
@@ -333,7 +333,7 @@ Object.keys(_index28).forEach(function (key) {
     }
   });
 });
-var _index29 = require("./switch/index.js");
+var _index29 = require("./select/index.js");
 Object.keys(_index29).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _index29[key]) return;
@@ -344,7 +344,7 @@ Object.keys(_index29).forEach(function (key) {
     }
   });
 });
-var _index30 = require("./tabs/index.js");
+var _index30 = require("./surface/index.js");
 Object.keys(_index30).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _index30[key]) return;
@@ -355,7 +355,7 @@ Object.keys(_index30).forEach(function (key) {
     }
   });
 });
-var _index31 = require("./tag/index.js");
+var _index31 = require("./switch/index.js");
 Object.keys(_index31).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _index31[key]) return;
@@ -366,7 +366,7 @@ Object.keys(_index31).forEach(function (key) {
     }
   });
 });
-var _index32 = require("./text/index.js");
+var _index32 = require("./tabs/index.js");
 Object.keys(_index32).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _index32[key]) return;
@@ -376,4 +376,26 @@ Object.keys(_index32).forEach(function (key) {
       return _index32[key];
     }
   });
+});
+var _index33 = require("./tag/index.js");
+Object.keys(_index33).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index33[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index33[key];
+    }
+  });
+});
+var _index34 = require("./text/index.js");
+Object.keys(_index34).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index34[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index34[key];
+    }
+  });
 });

package/dist/commonjs/components/base/input/base-input.js

@@ -131,7 +131,9 @@ const BaseInput = ({
         if (!elementState.current.pointerDown) {
           props.onBlur?.(event);
           setInputIsFocused(false);
-          setInputValue(inputValue?.trimEnd());
+          if (inputValue && inputValue?.trimEnd() !== inputValue) {
+            setInputValue(inputValue?.trimEnd());
+          }
         } else {
           inputRef.current?.focus();
         }
@@ -139,7 +141,7 @@ const BaseInput = ({
           pointerDown: false
         };
       }
-    }), !!hasSuffixNode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Flex, {
+    }), hasSuffixNode && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Flex, {
       align: "center",
       gap: theme.spacing.sm,
       children: [!!props.allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {

package/dist/commonjs/components/base/overflow/all-mode-overflow.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AllModeOverflow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 全部显示模式组件
+ */
+const AllModeOverflow = ({
+  data,
+  renderItem,
+  prefix,
+  suffix,
+  style,
+  prefixStyle,
+  itemStyle,
+  suffixStyle,
+  onVisibleCountChange,
+  styles,
+  getKey
+}) => {
+  (0, _react.useEffect)(() => {
+    onVisibleCountChange?.(data.length);
+  }, [data.length, onVisibleCountChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.item, prefixStyle],
+      children: prefix
+    }), data.map((item, index) => {
+      const key = getKey(item, index);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.item, itemStyle],
+        children: renderItem(item, {
+          index
+        })
+      }, key);
+    }), suffix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.item, suffixStyle],
+      children: suffix
+    })]
+  });
+};
+exports.AllModeOverflow = AllModeOverflow;

package/dist/commonjs/components/base/overflow/fixed-count-overflow.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FixedCountOverflow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 固定数量模式组件
+ */
+const FixedCountOverflow = ({
+  data,
+  renderItem,
+  renderRest,
+  maxCount,
+  prefix,
+  suffix,
+  style,
+  prefixStyle,
+  itemStyle,
+  suffixStyle,
+  restStyle,
+  onVisibleCountChange,
+  styles,
+  getKey
+}) => {
+  const visibleCount = Math.min(data.length, maxCount);
+  const showRest = data.length > maxCount;
+  const omittedData = data.slice(maxCount);
+  (0, _react.useEffect)(() => {
+    onVisibleCountChange?.(visibleCount);
+  }, [visibleCount, onVisibleCountChange]);
+  const renderRestContent = (0, _react.useCallback)(() => {
+    if (typeof renderRest === 'function') {
+      return renderRest(omittedData);
+    }
+    if (renderRest) {
+      return renderRest;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      style: [styles.rest],
+      children: ["+", omittedData.length, "..."]
+    });
+  }, [renderRest, omittedData, styles.rest]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.item, prefixStyle],
+      children: prefix
+    }), data.slice(0, visibleCount).map((item, index) => {
+      const key = getKey(item, index);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.item, itemStyle],
+        children: renderItem(item, {
+          index
+        })
+      }, key);
+    }), showRest && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.item, restStyle],
+      children: renderRestContent()
+    }), suffix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.item, suffixStyle],
+      children: suffix
+    })]
+  });
+};
+exports.FixedCountOverflow = FixedCountOverflow;

package/dist/commonjs/components/base/overflow/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _overflow = require("./overflow.js");
+Object.keys(_overflow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _overflow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _overflow[key];
+    }
+  });
+});

package/dist/commonjs/components/base/overflow/overflow.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Overflow = void 0;
+var _lodashEs = require("lodash-es");
+var _react = _interopRequireWildcard(require("react"));
+var _allModeOverflow = require("./all-mode-overflow.js");
+var _fixedCountOverflow = require("./fixed-count-overflow.js");
+var _responsiveOverflow = require("./responsive-overflow.js");
+var _index = require("./style/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Overflow 组件
+ *
+ * 利用 onLayout 在渲染前触发的特性，实现单次渲染的溢出处理组件
+ * 固定数量模式直接渲染，响应式模式通过预先计算确定最终显示状态
+ *
+ * @param props - 组件属性
+ * @returns React 元素
+ */
+const Overflow = props => {
+  const {
+    maxCount = 'responsive',
+    itemKey
+  } = props;
+  const styles = (0, _index.useOverflowStyles)({
+    maxCount
+  });
+
+  /**
+   * 获取元素唯一标识
+   */
+  const getKey = (0, _react.useCallback)((item, index) => {
+    if (typeof itemKey === 'function') {
+      return itemKey(item, index);
+    }
+    if (itemKey && typeof item === 'object' && item !== null && typeof itemKey === 'string') {
+      const value = item[itemKey];
+      return typeof value === 'string' || typeof value === 'number' ? value : index;
+    }
+    return index;
+  }, [itemKey]);
+
+  // 固定数量模式
+  if ((0, _lodashEs.isNumber)(maxCount)) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_fixedCountOverflow.FixedCountOverflow, {
+      ...props,
+      styles: styles,
+      getKey: getKey
+    });
+  }
+
+  // 全部显示模式
+  if (maxCount === 'all') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_allModeOverflow.AllModeOverflow, {
+      ...props,
+      styles: styles,
+      getKey: getKey
+    });
+  }
+
+  // 响应式模式
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_responsiveOverflow.ResponsiveOverflow, {
+    ...props,
+    styles: styles,
+    getKey: getKey
+  });
+};
+exports.Overflow = Overflow;

package/dist/commonjs/components/base/overflow/responsive-overflow.js

@@ -0,0 +1,280 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResponsiveOverflow = void 0;
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * 测量数据 - 存储所有测量的宽度信息
+ */
+
+/**
+ * 计算结果 - 存储基于测量数据计算出的显示状态
+ */
+
+/**
+ * 响应式 Overflow 组件
+ * 只有在 props 变化时才重新测量，onLayout 不直接触发测量
+ */
+const ResponsiveOverflow = ({
+  data,
+  renderItem,
+  renderRest,
+  prefix,
+  suffix,
+  style,
+  prefixStyle,
+  itemStyle,
+  suffixStyle,
+  restStyle,
+  onVisibleCountChange,
+  itemsWidthTolerance = 0,
+  styles,
+  getKey
+}) => {
+  // 测量数据
+  const measurementDataRef = (0, _react.useRef)({
+    container: 0,
+    items: new Map(),
+    prefix: 0,
+    suffix: 0,
+    rest: 0
+  });
+
+  // 计算结果
+  const calculationResultRef = (0, _react.useRef)({
+    visibleCount: 0,
+    showRest: false
+  });
+
+  // 上一次的结果（用于测量期间的显示优化）
+  const previousResultRef = (0, _react.useRef)({
+    visibleCount: 0,
+    showRest: false
+  });
+
+  // 测量完成标记
+  const measurementFlags = (0, _react.useRef)({
+    container: false,
+    prefix: false,
+    suffix: false,
+    rest: false,
+    items: new Set()
+  });
+
+  // 状态管理
+  const [, forceUpdate] = (0, _react.useState)({});
+  const [remeasureKey, setRemeasureKey] = (0, _react.useState)(0);
+  const isComplete = (0, _react.useRef)(false);
+  const triggerRerender = (0, _ahooks.useMemoizedFn)(() => forceUpdate({}));
+  /**
+   * 重置所有测量状态
+   */
+  const resetMeasurement = (0, _ahooks.useMemoizedFn)(() => {
+    if (!isComplete.current) {
+      return;
+    }
+    // 保存当前结果作为上一次的结果
+    previousResultRef.current = {
+      ...calculationResultRef.current
+    };
+    measurementDataRef.current = {
+      container: 0,
+      items: new Map(),
+      prefix: 0,
+      suffix: 0,
+      rest: 0
+    };
+    calculationResultRef.current = {
+      visibleCount: 0,
+      showRest: false
+    };
+    isComplete.current = false;
+    measurementFlags.current = {
+      container: false,
+      prefix: false,
+      suffix: false,
+      rest: false,
+      items: new Set()
+    };
+    setRemeasureKey(prev => prev + 1);
+  });
+
+  /**
+   * 检查是否所有必要的测量都已完成
+   */
+  const isAllMeasurementsComplete = () => {
+    const flags = measurementFlags.current;
+    if (!flags.container || !flags.rest) return false;
+    if (prefix && !flags.prefix) return false;
+    if (suffix && !flags.suffix) return false;
+
+    // 检查所有元素是否都已测量
+    for (let i = 0; i < data.length; i++) {
+      const key = getKey(data[i], i);
+      if (!flags.items.has(key)) return false;
+    }
+    return true;
+  };
+
+  /**
+   * 计算最终显示状态
+   */
+  const calculateDisplayState = measurementData => {
+    const {
+      container,
+      items,
+      prefix,
+      suffix,
+      rest
+    } = measurementData;
+    if (!container || data.length === 0) {
+      return {
+        visibleCount: 0,
+        showRest: false
+      };
+    }
+    const availableWidth = container - prefix - suffix;
+    let currentWidth = 0;
+    let visibleCount = 0;
+
+    // 计算所有元素的总宽度
+    let totalItemsWidth = 0;
+    for (let i = 0; i < data.length; i++) {
+      const key = getKey(data[i], i);
+      const itemWidth = items.get(key) || 0;
+      totalItemsWidth += itemWidth;
+    }
+
+    // 如果所有元素都能放下（考虑容差）
+    if (totalItemsWidth <= availableWidth + itemsWidthTolerance) {
+      return {
+        visibleCount: data.length,
+        showRest: false
+      };
+    }
+
+    // 需要截断，从前往后累积宽度
+    for (let i = 0; i < data.length; i++) {
+      const key = getKey(data[i], i);
+      const itemWidth = items.get(key) || 0;
+
+      // 检查加上当前元素和rest节点是否会超出
+      if (currentWidth + itemWidth + rest > availableWidth) {
+        // 如果是第一个元素就超出，至少显示一个
+        visibleCount = i === 0 ? 1 : i;
+        break;
+      }
+      currentWidth += itemWidth;
+      visibleCount = i + 1;
+    }
+    return {
+      visibleCount,
+      showRest: visibleCount < data.length
+    };
+  };
+
+  /**
+   * 完成测量并更新结果
+   */
+  const completeMeasurement = (0, _ahooks.useMemoizedFn)(() => {
+    if (!isAllMeasurementsComplete()) return;
+    const result = calculateDisplayState(measurementDataRef.current);
+    calculationResultRef.current = result;
+    isComplete.current = true;
+    previousResultRef.current = {
+      ...result
+    };
+    onVisibleCountChange?.(result.visibleCount);
+    triggerRerender();
+  });
+
+  // 影响布局的 props 变化时标记需要重新计算
+  (0, _react.useEffect)(() => {
+    resetMeasurement();
+  }, [data, renderItem, renderRest, prefix, suffix, style, prefixStyle, itemStyle, suffixStyle, restStyle, onVisibleCountChange, itemsWidthTolerance, styles, getKey]);
+
+  /**
+   * 布局测量处理函数
+   */
+  const createLayoutHandler = (0, _ahooks.useMemoizedFn)((elementType, itemKey) => event => {
+    // 测量完成后不再更新数据
+    if (isComplete.current) {
+      return;
+    }
+    const {
+      width
+    } = event.nativeEvent.layout;
+
+    // 更新测量数据和标记
+    if (elementType === 'items') {
+      measurementFlags.current.items.add(itemKey);
+      measurementDataRef.current.items.set(itemKey, width);
+    } else {
+      measurementFlags.current[elementType] = true;
+      measurementDataRef.current[elementType] = width;
+    }
+
+    // 检查是否可以完成测量
+    completeMeasurement();
+  });
+
+  /**
+   * 渲染 Rest 内容
+   */
+  const renderRestContent = () => {
+    const omittedData = data.slice(calculationResultRef.current.visibleCount);
+    if (typeof renderRest === 'function') {
+      return renderRest(omittedData);
+    }
+    if (renderRest) {
+      return renderRest;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      style: [styles.rest, restStyle],
+      children: ["+", omittedData.length, "..."]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    onLayout: createLayoutHandler('container'),
+    style: [styles.container, style],
+    children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      onLayout: createLayoutHandler('prefix'),
+      style: [styles.item, prefixStyle],
+      children: prefix
+    }), data.map((item, index) => {
+      const key = getKey(item, index);
+
+      // 测量完成后，不渲染超出可见范围的元素
+      if (isComplete.current && index >= calculationResultRef.current.visibleCount) {
+        return null;
+      }
+
+      // 测量期间，如果有上一次的结果且当前元素超出上一次的可见范围，需要隐藏
+      const shouldHideInMeasurement = !isComplete.current && previousResultRef.current.visibleCount > 0 && index >= previousResultRef.current.visibleCount;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        onLayout: createLayoutHandler('items', key),
+        style: [styles.item, itemStyle, shouldHideInMeasurement && styles.hidden],
+        children: renderItem(item, {
+          index
+        })
+      }, key);
+    }), !isComplete.current || calculationResultRef.current.showRest ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      onLayout: createLayoutHandler('rest'),
+      style: [styles.item, restStyle,
+      // 测量期间隐藏，测量完成后根据 showRest 决定是否隐藏
+      !isComplete.current && !previousResultRef.current.showRest && styles.hidden],
+      children: renderRestContent()
+    }) : null, suffix && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      onLayout: createLayoutHandler('suffix'),
+      style: [styles.item, suffixStyle],
+      children: suffix
+    })]
+  }, remeasureKey);
+};
+exports.ResponsiveOverflow = ResponsiveOverflow;