@hsu-react/ui 0.0.12 → 0.0.14

package/lib/components/Table/_hooks/useTableColumns.js

@@ -15,16 +15,16 @@ var _tableUtils = require("../_utils/tableUtils");
 var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// measureAlign 列：与表体、autoWidth 标题测量一致，统一按 14px 测量
+// measureAlign columns: measured at 14px, consistent with the table body and autoWidth title measurement
 const MEASURE_ALIGN_FONT_SIZE = 14;
-// Canvas measureText 仅返回 advance width，较 DOM 实际渲染偏窄约 1px，补 2px 缓冲避免最宽行被挤压
+// Canvas measureText only returns the advance width, about 1px narrower than the actual DOM rendering; add a 2px buffer to avoid squeezing the widest row
 const MEASURE_ALIGN_BUFFER_PX = 2;
-// 单元格左右内边距合计的默认值（默认 --td-padding: 4px 8px），用于把列宽抬到能放下定宽内容块
+// Default total horizontal cell padding (default --td-padding: 4px 8px), used to raise the column width enough to fit the fixed-width content block
 const MEASURE_ALIGN_CELL_PADDING_PX = 16;
 
 /**
- * 解析 tdPadding（CSS padding 简写）的左右内边距合计；
- * 未传或解析不出时回退默认值（与默认 --td-padding: 4px 8px 一致）。
+ * Parses the total horizontal padding from tdPadding (CSS padding shorthand);
+ * falls back to the default when absent or unparsable (matching the default --td-padding: 4px 8px).
  */
 const getCellHorizontalPadding = tdPadding => {
   if (!tdPadding) return MEASURE_ALIGN_CELL_PADDING_PX;
@@ -33,13 +33,13 @@ const getCellHorizontalPadding = tdPadding => {
     return MEASURE_ALIGN_CELL_PADDING_PX;
   }
 
-  // CSS 简写：1 值=四边；2/3 值=第 2 个为左右；4 值=右+左
+  // CSS shorthand: 1 value = all four sides; 2/3 values = the 2nd is left/right; 4 values = right + left
   if (parts.length === 1) return parts[0] * 2;
   if (parts.length === 4) return parts[1] + parts[3];
   return parts[1] * 2;
 };
 
-// 计算 measureAlign 列的定宽（取本列所有行展示文本的最大像素宽）
+// Computes the fixed width for a measureAlign column (the max pixel width of the display text across all rows in the column)
 const getMeasureAlignWidth = (column, dataSource) => {
   if (!dataSource?.length) return 0;
   const {
@@ -82,7 +82,7 @@ const useTableColumns = params => {
   } = (0, _usePermissions.default)();
   const [tableWidth, setTableWidth] = (0, _react.useState)(null);
 
-  // 监听表格宽度变化
+  // Observe table width changes
   (0, _react.useEffect)(() => {
     if (ref?.current && cls) {
       const tableElement = document.querySelector(`.${cls} .ant-table`);
@@ -101,7 +101,7 @@ const useTableColumns = params => {
     }
   }, [ref, cls]);
 
-  // 处理列的基础设置（权限、宽度、排序等）
+  // Handle basic column setup (permissions, width, sorting, etc.)
   const _columns = (0, _react.useMemo)(() => {
     const cloned = (0, _lodash.cloneDeep)(columns);
     const newColumns = cloned?.map((item, idx) => {
@@ -130,8 +130,9 @@ const useTableColumns = params => {
         item.width = Math.max(titleWidth, dataIndexWidth) + 32;
       }
 
-      // measureAlign 列：列宽须容得下最宽行的定宽内容块 + 单元格左右内边距，
-      // 否则出现超长值（如 +3357.52%）时内容会被列宽截断；声明的 width 只作下限。
+      // measureAlign columns: the column width must fit the widest row's fixed-width content block
+      // plus horizontal cell padding, otherwise very long values (e.g. +3357.52%) get truncated
+      // by the column width; the declared width only serves as a lower bound.
       if (item.measureAlign && typeof item.width === "number") {
         const measured = getMeasureAlignWidth(item, dataSource);
         if (measured > 0) {
@@ -152,7 +153,7 @@ const useTableColumns = params => {
     return newColumns;
   }, [autoWidth, columns, dataSource, checkPermission, scroll, tdPadding]);
 
-  // 渲染列标题
+  // Render column titles
   const renderColumnTitle = (0, _react.useCallback)(column => {
     const titleContent = column?.titleSort ? column.titleSort : column.renderTitle ? column.renderTitle(column.title || "") : column.title;
     if (!column.help) {
@@ -166,13 +167,13 @@ const useTableColumns = params => {
           icon: "material-symbols:help",
           className: _indexModule.default.help,
           fontSize: 16,
-          color: "#999999"
+          color: "var(--cf-text-3)"
         })
       })]
     });
   }, []);
   const renderColumns = (0, _react.useCallback)(columns => {
-    // 先增强列配置，为 ellipsis 列添加自动 Tooltip
+    // First enhance the column config, adding an automatic Tooltip for ellipsis columns
     let enhancedColumns = enhanceColumns(columns);
     if (serialNumberColumn && !_columns.find(v => !!v.children)) {
       enhancedColumns?.unshift({
@@ -187,26 +188,26 @@ const useTableColumns = params => {
       });
     }
 
-    // 处理 fixedWidth 列的宽度分配（在 enhancedColumns 基础上）
+    // Handle width allocation for fixedWidth columns (based on enhancedColumns)
     if (enhancedColumns && tableWidth && tableWidth > 0) {
-      // 检查是否有 fixedWidth 为 true 的列
+      // Check whether any column has fixedWidth set to true
       const hasFixedWidth = enhancedColumns.some(col => col.fixedWidth === true);
       if (hasFixedWidth) {
-        // 过滤出可见列（排除 hidden 列，即宽度为 0.01 的列）
+        // Filter out visible columns (excluding hidden columns, i.e. those with width 0.01)
         const visibleColumns = enhancedColumns.filter(col => typeof col.width === "number" && col.width > 0.01);
 
-        // 检查所有可见列是否都有宽度（非"100%"）
+        // Check whether all visible columns have a width (not "100%")
         const allHaveWidth = visibleColumns.every(col => col.width && col.width !== "100%" && typeof col.width === "number");
         if (allHaveWidth && visibleColumns.length > 0) {
-          // 计算所有可见列的宽度总和
+          // Compute the total width of all visible columns
           const totalWidth = visibleColumns.reduce((sum, col) => {
             const width = typeof col.width === "number" ? col.width : 0;
             return sum + width;
           }, 0);
 
-          // 如果总和小于表格宽度，按比例分配给非 fixedWidth 的可见列
-          // 当 bordered 为 true 时，tableWidth 需要减去 2（边框宽度）
-          // 当有 rowSelection 时，tableWidth 需要减去 48（选择列宽度）
+          // If the total is less than the table width, distribute proportionally to visible non-fixedWidth columns
+          // When bordered is true, subtract 2 from tableWidth (border width)
+          // When rowSelection is present, subtract 48 from tableWidth (selection column width)
           let adjustedTableWidth = bordered ? tableWidth - 2 : tableWidth;
           if (rowSelection) {
             adjustedTableWidth -= 48;
@@ -222,9 +223,9 @@ const useTableColumns = params => {
               return sum + width;
             }, 0);
             if (nonFixedWidthTotal > 0) {
-              // 按比例分配多余宽度
+              // Distribute the extra width proportionally
               enhancedColumns = enhancedColumns?.map(col => {
-                // hidden 列（宽度为 0.01）或 fixedWidth 列保持原宽度
+                // hidden columns (width 0.01) and fixedWidth columns keep their original width
                 const currentWidth = typeof col.width === "number" ? col.width : 0;
                 if (col.fixedWidth === true || currentWidth <= 0.01) {
                   return col;
@@ -245,8 +246,9 @@ const useTableColumns = params => {
       const orderKey = column.orderKey || column.dataIndex;
       const isOrderColumn = orderKey && orderKey !== "serialNumber";
 
-      // measureAlign 列：把展示内容包进定宽右对齐块（块随列 align 居中），各行右边缘对齐。
-      // 不适用于 render 返回 { children, rowSpan } 这类 RenderedCell 的合并单元格场景。
+      // measureAlign columns: wrap the display content in a fixed-width right-aligned block
+      // (the block is centered per the column align), so all rows' right edges align.
+      // Not applicable to merged-cell scenarios where render returns a RenderedCell like { children, rowSpan }.
       let render = column.render;
       if (column.measureAlign) {
         const cellWidth = getMeasureAlignWidth(column, dataSource);
@@ -286,10 +288,10 @@ const useTableColumns = params => {
     });
   }, [enhanceColumns, serialNumberColumn, _columns, tableWidth, pagination, _pageNum, _pageSize, bordered, rowSelection, expandable, sorter, renderColumnTitle, order, mergeRowDataSource, dataSource]);
 
-  // 缓存渲染后的列配置
+  // Cache the rendered column config
   const renderedColumns = (0, _react.useMemo)(() => renderColumns((0, _lodash.cloneDeep)(_columns)), [renderColumns, _columns]);
 
-  // 处理排序变化
+  // Handle sort changes
   const handleTableChange = (0, _react.useCallback)((pagination, filters, sorter, extra) => {
     onChange?.(pagination, filters, sorter, extra);
     const sorterResult = Array.isArray(sorter) ? sorter[0] : sorter;

package/lib/components/Table/_hooks/useTablePagination.js

@@ -18,7 +18,7 @@ const useTablePagination = params => {
     onStaticPaginationChange
   } = params;
 
-  // 直接传入原始值，不使用默认值，让 usePaginationSync 自行处理
+  // Pass the raw values directly without defaults; let usePaginationSync handle them itself
   const {
     _pageNum,
     _pageSize,
@@ -38,7 +38,7 @@ const useTablePagination = params => {
     }
   }, [_dataSource, dataSource, staticDataSource, setPageNum]);
 
-  // 计算分页数据源
+  // Compute the paginated data source
   const paginatedDataSource = (0, _react.useMemo)(() => {
     if (!pagination) return dataSource;
     if (staticDataSource) {
@@ -48,30 +48,30 @@ const useTablePagination = params => {
     return dataSource;
   }, [pagination, staticDataSource, _dataSource, _pageSize, _pageNum, dataSource]);
 
-  // 计算用于合并行的数据源
+  // Compute the data source used for merged rows
   const mergeRowDataSource = (0, _react.useMemo)(() => {
     if (!pagination) return dataSource;
     const start = _pageSize * (_pageNum - 1);
     return _dataSource?.slice(start, start + _pageSize);
   }, [pagination, _dataSource, _pageSize, _pageNum, dataSource]);
 
-  // 处理分页变化
+  // Handle pagination changes
   const handlePageChange = (0, _react.useCallback)((num, size) => {
     setPageNum(num);
     setPageSize(size);
     onChangePage?.(num, size);
-    // 当使用 staticDataSource 时，通过 onStaticPaginationChange 传递变化
+    // When staticDataSource is used, propagate the change via onStaticPaginationChange
     if (staticDataSource) {
       onStaticPaginationChange?.(num, size);
     }
   }, [onChangePage, onStaticPaginationChange, staticDataSource, setPageNum, setPageSize]);
 
-  // 处理分页大小变化
+  // Handle page size changes
   const handlePageSizeChange = (0, _react.useCallback)((page, size) => {
     setPageNum(page);
     setPageSize(size);
     onShowSizeChange?.(page, size);
-    // 当使用 staticDataSource 时，通过 onStaticPaginationChange 传递变化
+    // When staticDataSource is used, propagate the change via onStaticPaginationChange
     if (staticDataSource) {
       onStaticPaginationChange?.(page, size);
     }

package/lib/components/Table/_utils/tableUtils.d.ts

@@ -1,14 +1,14 @@
 /**
- * 获取相同值的连续行数
- * @param record 当前行数据
- * @param index 当前行索引
- * @param dataSource 数据源
- * @param key 相同值的key
- * @returns 相同值的连续行数
+ * Gets the number of consecutive rows with the same value
+ * @param record Current row data
+ * @param index Current row index
+ * @param dataSource Data source
+ * @param key Key of the shared value
+ * @returns Number of consecutive rows with the same value
  */
 export declare function getDepartmentRowSpan<T extends Record<string, unknown>>(record: T, index: number, dataSource: T[], key: string): number;
 /**
- * Tooltip 配置常量
+ * Tooltip config constants
  */
 export declare const HELP_TOOLTIP_CONFIG: {
     arrow: boolean;

package/lib/components/Table/_utils/tableUtils.js

@@ -6,22 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.HELP_TOOLTIP_CONFIG = void 0;
 exports.getDepartmentRowSpan = getDepartmentRowSpan;
 /**
- * 获取相同值的连续行数
- * @param record 当前行数据
- * @param index 当前行索引
- * @param dataSource 数据源
- * @param key 相同值的key
- * @returns 相同值的连续行数
+ * Gets the number of consecutive rows with the same value
+ * @param record Current row data
+ * @param index Current row index
+ * @param dataSource Data source
+ * @param key Key of the shared value
+ * @returns Number of consecutive rows with the same value
  */
 function getDepartmentRowSpan(record, index, dataSource, key) {
   const current = record[key];
 
-  // 如果不是该值的第一行，返回0（不显示）
+  // If this is not the first row with the value, return 0 (not displayed)
   if (index > 0 && dataSource[index - 1][key] === current) {
     return 0;
   }
 
-  // 计算相同值的连续行数
+  // Count consecutive rows with the same value
   let count = 1;
   for (let i = index + 1; i < dataSource.length; i++) {
     if (dataSource[i][key] === current) {
@@ -34,15 +34,15 @@ function getDepartmentRowSpan(record, index, dataSource, key) {
 }
 
 /**
- * Tooltip 配置常量
+ * Tooltip config constants
  */
 const HELP_TOOLTIP_CONFIG = exports.HELP_TOOLTIP_CONFIG = {
   arrow: false,
   placement: "top",
-  color: "#f2f4f5",
+  color: "var(--cf-subtle)",
   styles: {
     body: {
-      color: "#131212",
+      color: "var(--cf-text)",
       padding: "6px 16px"
     }
   }

package/lib/components/Table/index.d.ts

@@ -25,13 +25,16 @@ export interface ColumnType<RecordType> extends AntColumnType<RecordType> {
     fixedWidth?: boolean;
     ellipsisPosition?: "start" | "end";
     /**
-     * 定宽对齐列：列标题随 align 居中，单元格内容放进按本列最宽内容
-     * 测量出的定宽块内右对齐，使各行右边缘对齐、整体在列内居中（适合数字/金额列）。
+     * Fixed-width aligned column: the column title is centered per align, and cell content
+     * is placed right-aligned inside a fixed-width block measured from the column's widest
+     * content, so all rows' right edges align and the block is centered within the column
+     * (suitable for number/amount columns).
      */
     measureAlign?: boolean;
     /**
-     * measureAlign 列测量宽度所用的文本。默认取 dataIndex 原始值；当单元格由 render
-     * 产出复合/JSX 内容（无法从 dataIndex 直接得到展示文本）时，用它提供与展示一致的文本。
+     * Text used to measure the width of a measureAlign column. Defaults to the raw dataIndex
+     * value; when the cell renders composite/JSX content via render (so the display text cannot
+     * be derived from dataIndex directly), use this to provide text matching what is displayed.
      */
     measureText?: (record: RecordType) => string;
 }
@@ -72,14 +75,14 @@ export interface TableProps<RecordType = AnyObject> extends Omit<AntdTableProps<
     antdTableClassName?: string;
     autoScrolling?: boolean;
     autoScrollingInterval?: number;
-    /** smooth 模式自动滚动速度，单位 px/s，默认 25 */
+    /** Auto-scroll speed in smooth mode, in px/s, default 25 */
     autoScrollingSpeed?: number;
     autoScrollMode?: "smooth" | "row";
-    /** 自动滚动到末尾后是否循环回到顶部，默认 true */
+    /** Whether to loop back to the top after auto-scrolling to the end, default true */
     autoScrollLoop?: boolean;
-    /** 循环模式："reset" 回到顶部重新滚动（默认），"seamless" 无缝衔接继续滚动 */
+    /** Loop mode: "reset" returns to the top and scrolls again (default), "seamless" continues scrolling without a visible jump */
     autoScrollLoopMode?: "reset" | "seamless";
-    /** 自动滚动偏移量阈值（px），可滚动溢出超过该值后才启动自动滚动，默认 0 */
+    /** Auto-scroll offset threshold (px); auto-scrolling starts only when the scrollable overflow exceeds this value, default 0 */
     autoScrollingOffset?: number;
     hideEmpty?: boolean;
     ellipsisTooltipConfig?: EllipsisTooltipConfig;

package/lib/components/Table/index.module.scss

@@ -71,10 +71,10 @@
       &:global(.ant-table-row-selected) {
         :global(.ant-table-cell) {
           &:global(.ant-table-column-sort) {
-            background: rgba(19, 194, 194, 0.12);
+            background: color-mix(in srgb, var(--primary-color) 12%, transparent);
 
             &:global(.ant-table-cell-row-hover) {
-              background: rgba(19, 194, 194, 0.22);
+              background: color-mix(in srgb, var(--primary-color) 22%, transparent);
             }
           }
         }
@@ -143,7 +143,7 @@
     }
   }
 
-  // 表格
+  // Table
   .antdTable {
     border-color: var(--cf-border-weak);
 

package/lib/components/Tags/_components/EllipsisTag/index.d.ts

@@ -5,7 +5,7 @@ export interface EllipsisTagProps {
     colors?: string[];
 }
 /**
- * 省略标签组件，显示被省略的标签数量，悬浮时通过 Tooltip 展示所有被省略的标签
+ * Ellipsis tag component: shows the number of omitted tags, and displays all omitted tags in a Tooltip on hover
  */
 declare const EllipsisTag: React.FC<EllipsisTagProps>;
 export default EllipsisTag;

package/lib/components/Tags/_components/EllipsisTag/index.js

@@ -11,7 +11,7 @@ var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * 省略标签组件，显示被省略的标签数量，悬浮时通过 Tooltip 展示所有被省略的标签
+ * Ellipsis tag component: shows the number of omitted tags, and displays all omitted tags in a Tooltip on hover
  */
 const EllipsisTag = props => {
   const {

package/lib/components/Tags/_components/MeasureContainer/index.d.ts

@@ -4,7 +4,7 @@ export interface MeasureContainerProps {
     colors?: string[];
 }
 /**
- * 用于测量标签宽度的隐藏容器
+ * Hidden container used to measure tag widths
  */
 declare const MeasureContainer: React.ForwardRefExoticComponent<MeasureContainerProps & React.RefAttributes<HTMLDivElement>>;
 export default MeasureContainer;

package/lib/components/Tags/_components/MeasureContainer/index.js

@@ -11,7 +11,7 @@ var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * 用于测量标签宽度的隐藏容器
+ * Hidden container used to measure tag widths
  */
 const MeasureContainer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {

package/lib/components/Tags/_hooks/useVisibleTags.d.ts

@@ -6,10 +6,10 @@ export interface UseVisibleTagsOptions {
     ellipsis?: boolean;
 }
 /**
- * 计算可见标签数量的 Hook
- * @param containerRef 容器引用
- * @param measureRef 测量容器引用
- * @param options 配置选项
- * @returns 可见的标签数量
+ * Hook that computes the number of visible tags
+ * @param containerRef Container ref
+ * @param measureRef Measure container ref
+ * @param options Config options
+ * @returns Number of visible tags
  */
 export declare function useVisibleTags(containerRef: React.RefObject<HTMLDivElement>, measureRef: React.RefObject<HTMLDivElement>, options: UseVisibleTagsOptions): number;

package/lib/components/Tags/_hooks/useVisibleTags.js

@@ -7,11 +7,11 @@ exports.useVisibleTags = useVisibleTags;
 var _react = require("react");
 var _calculateVisibleCount = require("../_utils/calculateVisibleCount");
 /**
- * 计算可见标签数量的 Hook
- * @param containerRef 容器引用
- * @param measureRef 测量容器引用
- * @param options 配置选项
- * @returns 可见的标签数量
+ * Hook that computes the number of visible tags
+ * @param containerRef Container ref
+ * @param measureRef Measure container ref
+ * @param options Config options
+ * @returns Number of visible tags
  */
 function useVisibleTags(containerRef, measureRef, options) {
   const {
@@ -22,21 +22,21 @@ function useVisibleTags(containerRef, measureRef, options) {
   } = options;
   const [visibleCount, setVisibleCount] = (0, _react.useState)(tags.length);
 
-  // 当 tags 变化时，重置 visibleCount
+  // Reset visibleCount when tags change
   (0, _react.useEffect)(() => {
     setVisibleCount(tags.length);
   }, [tags.length]);
 
-  // 如果禁用省略，直接返回所有标签数量
+  // If ellipsis is disabled, just return the total tag count
   (0, _react.useEffect)(() => {
     if (!ellipsis) {
       setVisibleCount(tags.length);
     }
   }, [ellipsis, tags.length]);
 
-  // 计算可见的 tag 数量
+  // Compute the number of visible tags
   (0, _react.useEffect)(() => {
-    // 如果禁用省略，不进行计算
+    // If ellipsis is disabled, skip the calculation
     if (!ellipsis) {
       return;
     }
@@ -50,11 +50,11 @@ function useVisibleTags(containerRef, measureRef, options) {
       if (!container || !measureContainer) return;
       const containerWidth = container.offsetWidth;
       if (containerWidth === 0) {
-        // 容器宽度为 0，可能是隐藏状态，不进行计算
+        // Container width is 0, possibly hidden; skip the calculation
         return;
       }
 
-      // 获取所有 tag 元素的实际宽度
+      // Get the actual widths of all tag elements
       const tagElements = measureContainer.children;
       const tagWidths = [];
       for (let i = 0; i < tagElements.length; i++) {
@@ -65,12 +65,12 @@ function useVisibleTags(containerRef, measureRef, options) {
       setVisibleCount(count);
     };
 
-    // 使用 requestAnimationFrame 确保 DOM 已更新
+    // Use requestAnimationFrame to ensure the DOM has been updated
     const timer = requestAnimationFrame(() => {
       calculate();
     });
 
-    // 监听容器大小变化
+    // Observe container size changes
     const resizeObserver = new ResizeObserver(() => {
       requestAnimationFrame(() => {
         calculate();

package/lib/components/Tags/_utils/calculateVisibleCount.d.ts

@@ -1,9 +1,9 @@
 /**
- * 计算可见的标签数量
- * @param containerWidth 容器宽度
- * @param tagWidths 所有标签的宽度数组
- * @param gap 标签之间的间距
- * @param ellipsisTagWidth 省略标签的预估宽度
- * @returns 可见的标签数量
+ * Calculates the number of visible tags
+ * @param containerWidth Container width
+ * @param tagWidths Array of all tag widths
+ * @param gap Gap between tags
+ * @param ellipsisTagWidth Estimated width of the ellipsis tag
+ * @returns Number of visible tags
  */
 export declare function calculateVisibleCount(containerWidth: number, tagWidths: number[], gap?: number, ellipsisTagWidth?: number): number;

package/lib/components/Tags/_utils/calculateVisibleCount.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.calculateVisibleCount = calculateVisibleCount;
 /**
- * 计算可见的标签数量
- * @param containerWidth 容器宽度
- * @param tagWidths 所有标签的宽度数组
- * @param gap 标签之间的间距
- * @param ellipsisTagWidth 省略标签的预估宽度
- * @returns 可见的标签数量
+ * Calculates the number of visible tags
+ * @param containerWidth Container width
+ * @param tagWidths Array of all tag widths
+ * @param gap Gap between tags
+ * @param ellipsisTagWidth Estimated width of the ellipsis tag
+ * @returns Number of visible tags
  */
 function calculateVisibleCount(containerWidth, tagWidths, gap = 8, ellipsisTagWidth = 60) {
   if (containerWidth === 0 || tagWidths.length === 0) {
@@ -19,20 +19,20 @@ function calculateVisibleCount(containerWidth, tagWidths, gap = 8, ellipsisTagWi
   let usedWidth = 0;
   let count = 0;
 
-  // 遍历所有 tag，计算能显示多少个
+  // Iterate over all tags to compute how many can be displayed
   for (let i = 0; i < tagWidths.length; i++) {
     const tagWidth = tagWidths[i] || 0;
-    // 计算加上当前 tag 后的总宽度
+    // Compute the total width after adding the current tag
     const nextWidth = usedWidth + tagWidth + (i > 0 ? gap : 0);
 
-    // 检查是否需要显示省略标签
+    // Check whether the ellipsis tag needs to be displayed
     if (i < tagWidths.length - 1) {
-      // 不是最后一个 tag，需要预留省略标签的空间
+      // Not the last tag; space must be reserved for the ellipsis tag
       if (nextWidth + gap + ellipsisTagWidth > containerWidth) {
         break;
       }
     } else {
-      // 是最后一个 tag，只需要检查当前宽度
+      // The last tag; only the current width needs to be checked
       if (nextWidth > containerWidth) {
         break;
       }
@@ -41,6 +41,6 @@ function calculateVisibleCount(containerWidth, tagWidths, gap = 8, ellipsisTagWi
     usedWidth = nextWidth;
   }
 
-  // 至少显示 0 个（如果连一个都放不下，就只显示省略标签）
+  // Show at least 0 (if not even one fits, show only the ellipsis tag)
   return Math.max(0, count);
 }

package/lib/components/Tags/_utils/getTagColor.d.ts

@@ -1,7 +1,7 @@
 /**
- * 根据索引获取标签颜色
- * @param index 标签索引
- * @param colors 颜色数组
- * @returns 颜色值或 undefined
+ * Gets the tag color by index
+ * @param index Tag index
+ * @param colors Color array
+ * @returns Color value or undefined
  */
 export declare function getTagColor(index: number, colors?: string[]): string | undefined;

package/lib/components/Tags/_utils/getTagColor.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTagColor = getTagColor;
 /**
- * 根据索引获取标签颜色
- * @param index 标签索引
- * @param colors 颜色数组
- * @returns 颜色值或 undefined
+ * Gets the tag color by index
+ * @param index Tag index
+ * @param colors Color array
+ * @returns Color value or undefined
  */
 function getTagColor(index, colors) {
   if (colors && colors.length > 0) {

package/lib/components/Tags/index.js

@@ -28,14 +28,14 @@ const Tags = props => {
   const containerRef = (0, _react.useRef)(null);
   const measureRef = (0, _react.useRef)(null);
 
-  // 使用 hook 计算可见的标签数量
+  // Use the hook to compute the number of visible tags
   const visibleCount = (0, _hooks.useVisibleTags)(containerRef, measureRef, {
     tags,
     ellipsis,
     gap
   });
 
-  // 获取可见的 tags 和省略的 tags
+  // Get the visible tags and the omitted tags
   const visibleTags = tags.slice(0, visibleCount);
   const ellipsisTags = tags.slice(visibleCount);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/lib/components/TextEllipsis/index.d.ts

@@ -1,29 +1,29 @@
 import { TooltipProps } from "antd";
 import { ReactNode } from "react";
 export interface TextEllipsisProps {
-    /** 要显示的文本内容 */
+    /** Text content to display */
     children: ReactNode;
-    /** 容器宽度，用于计算 Tooltip 宽度 */
+    /** Container width, used to compute the Tooltip width */
     width?: number | string;
-    /** Tooltip 配置 */
+    /** Tooltip config */
     tooltipConfig?: Omit<TooltipProps, "title" | "children"> & {
-        /** 默认 Tooltip 宽度（当没有设置 width 时使用） */
+        /** Default Tooltip width (used when width is not set) */
         defaultWidth?: number;
     };
-    /** 自定义样式 */
+    /** Custom style */
     style?: React.CSSProperties;
-    /** 自定义类名 */
+    /** Custom class name */
     className?: string;
-    /** 是否禁用 Tooltip（即使文本溢出也不显示） */
+    /** Whether to disable the Tooltip (not shown even when the text overflows) */
     disabled?: boolean;
-    /** 省略号位置，'start' 表示省略前面(...xxx)，'end' 表示省略后面(xxx...) */
+    /** Ellipsis position: 'start' truncates the beginning (...xxx), 'end' truncates the end (xxx...) */
     ellipsisPosition?: "start" | "end";
-    /** container 样式 */
+    /** Container style */
     containerStyle?: React.CSSProperties;
 }
 /**
- * 文本溢出组件
- * 当文本溢出时自动显示 Tooltip，并省略超出文本
+ * Text overflow component
+ * Automatically shows a Tooltip when the text overflows, and truncates the overflowing text
  */
 declare const TextEllipsis: React.FC<TextEllipsisProps>;
 export default TextEllipsis;