@hsu-react/ui 0.0.13 → 0.0.14

package/lib/components/Select/AutoCompleteSelect/index.module.scss

@@ -8,7 +8,7 @@
   height: 100%;
   padding: 0px 11px;
 
-  // CF 风格：随外观切换的描边输入控件
+  // CF style: outlined input control that follows appearance switching
   border: 1px solid var(--cf-border);
   border-radius: 6px;
 
@@ -49,7 +49,7 @@
   &.focused {
     border-color: var(--primary-color);
 
-    box-shadow: 0 0 0 2px rgba(19, 194, 194, 0.12);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 12%, transparent);
 
     outline: 0;
   }
@@ -76,20 +76,20 @@
   }
 
   &:has(:global(.ant-select-status-error)) {
-    border: 1px solid #ff4d4f;
+    border: 1px solid var(--cf-error);
 
     .prefix,
     .suffix {
-      color: #ff4d4f;
+      color: var(--cf-error);
     }
   }
 
   &.legacyHasErrorStatus {
-    border: 1px solid #ff4d4f;
+    border: 1px solid var(--cf-error);
 
     .prefix,
     .suffix {
-      color: #ff4d4f;
+      color: var(--cf-error);
     }
   }
 

package/lib/components/Select/IconSelect/index.module.scss

@@ -54,12 +54,12 @@
 
       font-size: 16px;
 
-      border: 1px solid #f0edea;
+      border: 1px solid var(--cf-border-weak);
 
       cursor: pointer;
 
       &.active {
-        background: #dddddd;
+        background: var(--cf-row-hover);
       }
     }
   }

package/lib/components/Select/TreeSelect/_utils/getExpandedKeysByLevel.d.ts

@@ -1,8 +1,8 @@
 import { DataNode, SafeKey } from "rc-tree-select/lib/interface";
 /**
- * 根据默认展开层级计算应该展开的节点 keys（用于 TreeSelect）
- * @param treeData 树数据（DataNode 类型）
- * @param level 展开层级（从 1 开始，1 表示第一层，2 表示第二层，以此类推）
- * @returns 应该展开的节点 keys 数组
+ * Compute the node keys that should be expanded based on the default expand level (for TreeSelect)
+ * @param treeData Tree data (DataNode type)
+ * @param level Expand level (starting from 1; 1 means the first level, 2 the second, and so on)
+ * @returns Array of node keys that should be expanded
  */
 export declare const getExpandedKeysByLevel: (treeData: DataNode[], level: number) => SafeKey[];

package/lib/components/Select/TreeSelect/_utils/getExpandedKeysByLevel.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getExpandedKeysByLevel = void 0;
 /**
- * 根据默认展开层级计算应该展开的节点 keys（用于 TreeSelect）
- * @param treeData 树数据（DataNode 类型）
- * @param level 展开层级（从 1 开始，1 表示第一层，2 表示第二层，以此类推）
- * @returns 应该展开的节点 keys 数组
+ * Compute the node keys that should be expanded based on the default expand level (for TreeSelect)
+ * @param treeData Tree data (DataNode type)
+ * @param level Expand level (starting from 1; 1 means the first level, 2 the second, and so on)
+ * @returns Array of node keys that should be expanded
  */
 const getExpandedKeysByLevel = (treeData, level) => {
   if (level < 1 || !treeData?.length) {
@@ -17,7 +17,7 @@ const getExpandedKeysByLevel = (treeData, level) => {
   const expandedKeys = [];
   const traverse = (nodes, currentLevel) => {
     for (const node of nodes) {
-      // 如果当前层级小于目标层级，则展开该节点
+      // Expand this node if the current level is below the target level
       if (currentLevel < level && node.children?.length && node.key !== undefined) {
         expandedKeys.push(node.key);
         traverse(node.children, currentLevel + 1);

package/lib/components/Select/TreeSelect/index.module.scss

@@ -6,7 +6,7 @@
   width: 100%;
   height: 100%;
 
-  // CF 风格：随外观切换的描边输入控件
+  // CF style: outlined input control that follows appearance switching
   background: var(--cf-surface);
   border: 1px solid var(--cf-border);
   border-radius: 6px;

package/lib/components/Select/_hooks/useSelectComposition.d.ts

@@ -2,7 +2,7 @@ interface UseSelectCompositionProps {
     onSearch?: (value: string) => void;
 }
 /**
- * 管理输入法组合状态
+ * Manage IME composition state
  */
 export declare function useSelectComposition({ onSearch, }: UseSelectCompositionProps): {
     isComposing: boolean;

package/lib/components/Select/_hooks/useSelectComposition.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useSelectComposition = useSelectComposition;
 var _react = require("react");
 /**
- * 管理输入法组合状态
+ * Manage IME composition state
  */
 function useSelectComposition({
   onSearch

package/lib/components/Select/_hooks/useSelectInputOptions.d.ts

@@ -8,7 +8,7 @@ interface UseSelectInputOptionsProps {
     optionsLength: number;
 }
 /**
- * 管理输入选项（当没有匹配项时）
+ * Manage input options (when there are no matching options)
  */
 export declare function useSelectInputOptions({ searchValue, isComposing, onChange, onSearch, optionsLength, }: UseSelectInputOptionsProps): {
     inputOptions: SelectOption<string | number>[];

package/lib/components/Select/_hooks/useSelectInputOptions.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useSelectInputOptions = useSelectInputOptions;
 var _react = require("react");
 /**
- * 管理输入选项（当没有匹配项时）
+ * Manage input options (when there are no matching options)
  */
 function useSelectInputOptions({
   searchValue,

package/lib/components/Select/_utils/calculatePopupWidth.d.ts

@@ -7,7 +7,7 @@ interface CalculatePopupWidthOptions {
     valueInlabel?: "before" | "after";
 }
 /**
- * 计算弹出层宽度
+ * Calculate popup width
  */
 export declare function calculatePopupWidth({ options, selectWidth, mode, optionFontSize, valueInlabel, }: CalculatePopupWidthOptions): number;
 export {};

package/lib/components/Select/_utils/calculatePopupWidth.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.calculatePopupWidth = calculatePopupWidth;
 var _hsuUtils = require("hsu-utils");
 /**
- * 计算弹出层宽度
+ * Calculate popup width
  */
 function calculatePopupWidth({
   options,

package/lib/components/Select/_utils/filterOption.d.ts

@@ -7,7 +7,7 @@ interface FilterOptionParams {
     valueInlabel?: "before" | "after";
 }
 /**
- * 过滤选项
+ * Filter options
  */
 export declare function filterOption({ searchValue, option, isComposing, customFilterOption, valueInlabel, }: FilterOptionParams): boolean;
 export {};

package/lib/components/Select/_utils/filterOption.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.filterOption = filterOption;
 /**
- * 过滤选项
+ * Filter options
  */
 function filterOption({
   searchValue,

package/lib/components/Select/_utils/getElementPosition.d.ts

@@ -1,12 +1,13 @@
 /**
- * 获取元素相对于视口的顶部位置。
- * 下拉框为 position: fixed（相对视口定位），故此处必须返回视口坐标，
- * 不能叠加 document.scrollTop——否则当文档本身可滚动时（如文档站长页面），
- * 下拉框会被定位到 scrollTop 像素之外而“消失”。
- * 在固定布局（document 不滚动，scrollTop=0）下与原行为一致。
+ * Get the element's top position relative to the viewport.
+ * The dropdown uses position: fixed (positioned relative to the viewport), so this must
+ * return viewport coordinates and must NOT add document.scrollTop — otherwise, when the
+ * document itself is scrollable (e.g. docs-site long pages), the dropdown would be
+ * positioned scrollTop pixels away and "disappear".
+ * In fixed layouts (document does not scroll, scrollTop=0) this matches the original behavior.
  */
 export declare function getElementTop(element: HTMLDivElement): number;
 /**
- * 获取元素相对于视口的左侧位置（同上，配合 position: fixed）。
+ * Get the element's left position relative to the viewport (same as above, for position: fixed).
  */
 export declare function getElementLeft(element: HTMLDivElement): number;

package/lib/components/Select/_utils/getElementPosition.js

@@ -6,18 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.getElementLeft = getElementLeft;
 exports.getElementTop = getElementTop;
 /**
- * 获取元素相对于视口的顶部位置。
- * 下拉框为 position: fixed（相对视口定位），故此处必须返回视口坐标，
- * 不能叠加 document.scrollTop——否则当文档本身可滚动时（如文档站长页面），
- * 下拉框会被定位到 scrollTop 像素之外而“消失”。
- * 在固定布局（document 不滚动，scrollTop=0）下与原行为一致。
+ * Get the element's top position relative to the viewport.
+ * The dropdown uses position: fixed (positioned relative to the viewport), so this must
+ * return viewport coordinates and must NOT add document.scrollTop — otherwise, when the
+ * document itself is scrollable (e.g. docs-site long pages), the dropdown would be
+ * positioned scrollTop pixels away and "disappear".
+ * In fixed layouts (document does not scroll, scrollTop=0) this matches the original behavior.
  */
 function getElementTop(element) {
   return element.getBoundingClientRect().top;
 }
 
 /**
- * 获取元素相对于视口的左侧位置（同上，配合 position: fixed）。
+ * Get the element's left position relative to the viewport (same as above, for position: fixed).
  */
 function getElementLeft(element) {
   return element.getBoundingClientRect().left;

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

@@ -6,12 +6,12 @@
 
   width: 100%;
   height: 100%;
-  // 父级未给定高度时（height:100% 解析为 auto），保证最小高度，
-  // 与 Input 等录入控件高度一致，避免被压扁或在搜索行中高度异常。
+  // When the parent has no explicit height (height:100% resolves to auto), guarantee a min height
+  // consistent with Input and other form controls, so it is neither squashed nor mis-sized in search rows.
   min-height: 32px;
   padding: 0px 11px;
 
-  // CF 风格：随外观切换的描边输入控件
+  // CF style: outlined input control that follows appearance switching
   border: 1px solid var(--cf-border);
   border-radius: 6px;
 
@@ -54,7 +54,7 @@
   &.focused {
     border-color: var(--primary-color);
 
-    box-shadow: 0 0 0 2px rgba(19, 194, 194, 0.12);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 12%, transparent);
 
     outline: 0;
   }
@@ -81,20 +81,20 @@
   }
 
   &:has(> :global(.ant-select-status-error)) {
-    border: 1px solid #ff4d4f;
+    border: 1px solid var(--cf-error);
 
     .prefix,
     .suffix {
-      color: #ff4d4f;
+      color: var(--cf-error);
     }
   }
 
   &.legacyHasErrorStatus {
-    border: 1px solid #ff4d4f;
+    border: 1px solid var(--cf-error);
 
     .prefix,
     .suffix {
-      color: #ff4d4f;
+      color: var(--cf-error);
     }
   }
 

package/lib/components/Spreadsheet/xlsxspread.js

@@ -8,7 +8,7 @@ exports.xtos = xtos;
 var XLSX = _interopRequireWildcard(require("xlsx"));
 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; }
-// 定义类型接口
+// Type interface definitions
 
 function stox(wb) {
   const out = [];
@@ -20,7 +20,7 @@ function stox(wb) {
     };
     const ws = wb.Sheets[name];
 
-    // 检查 ws["!ref"] 是否存在
+    // Check whether ws["!ref"] exists
     if (!ws["!ref"]) {
       out.push(o);
       return;

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

@@ -1,5 +1,5 @@
-// 让开关在表单/录入场景中与 Input、Select 等控件保持一致的 32px 最小高度。
-// 开关本体（pill）保持原始尺寸，由该容器居中占位，故不会被拉大。
+// Keep the switch at the same 32px min height as Input, Select and other controls in form/input scenarios.
+// The switch itself (pill) keeps its original size; this container centers it, so it is not stretched.
 .SwitchWrapper {
   display: inline-flex;
   align-items: center;

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

@@ -20,13 +20,13 @@
     padding: 0px 15px;
 
     font-size: 14px;
-    color: #31455c;
+    color: var(--cf-text);
 
     transition: all 0.3s;
 
     cursor: pointer;
 
-    border: 1px solid rgba(49, 69, 92, 0.2);
+    border: 1px solid var(--cf-border);
 
     &:not(:first-child) {
       margin-left: -1px;
@@ -45,11 +45,11 @@
     }
 
     &:hover {
-      color: #489dff;
+      color: var(--primary-color);
     }
 
     &.active {
-      background: #489dff;
+      background: var(--primary-color);
 
       color: #fff;
 
@@ -78,12 +78,12 @@
       background: transparent !important;
 
       font-size: 16px !important;
-      color: #4d4d4d !important;
+      color: var(--cf-text) !important;
 
       transition: all 0.2s;
 
       &:hover {
-        color: #0364f5 !important;
+        color: var(--primary-color) !important;
       }
 
       &::after {
@@ -103,10 +103,10 @@
       &.active {
         font-weight: 500;
         font-size: 16px;
-        color: #0364f5 !important;
+        color: var(--primary-color) !important;
 
         &::after {
-          background: #0364f5;
+          background: var(--primary-color);
         }
       }
     }

package/lib/components/Table/_components/Pagination/index.js

@@ -30,7 +30,7 @@ const Pagination = props => {
     align
   } = props;
   const selectRef = (0, _react.useRef)(null);
-  // 直接传入原始值，不使用默认值，让 usePaginationSync 自行处理
+  // Pass the raw values directly without defaults; let usePaginationSync handle them itself
   const {
     _pageNum,
     _pageSize,
@@ -108,7 +108,7 @@ const Pagination = props => {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Pagination, {
     ...props,
-    // 没有外部传入时使用内部状态
+    // Use internal state when no external value is provided
     current: props.current ?? _pageNum,
     pageSize: props.pageSize ?? _pageSize,
     total: total,
@@ -118,7 +118,7 @@ const Pagination = props => {
       [_indexModule.default.bordered]: bordered
     }),
     onChange: (page, size) => {
-      // 没有外部传入时，更新内部状态
+      // Update internal state when no external value is provided
       if (props.current === undefined) setPageNum(page);
       if (props.pageSize === undefined) setPageSize(size);
       onChange?.(page, size);

package/lib/components/Table/_hooks/useAutoScrolling.d.ts

@@ -10,7 +10,7 @@ interface UseAutoScrollingProps {
     onAutoScrollEndAdd?: () => Promise<boolean>;
     autoScrollMode?: "smooth" | "row";
     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";
     autoScrollingOffset?: number;
 }

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

@@ -41,7 +41,7 @@ const useAutoScrolling = props => {
   const prevDataSourceRef = (0, _react.useRef)(dataSource);
   const hoverHandlersRef = (0, _react.useRef)({});
 
-  // seamless 模式相关
+  // Seamless mode related
   const isSeamless = autoScrollLoopMode === "seamless" && autoScrollLoop;
   const originalRowsHeightRef = (0, _react.useRef)(0);
   const clonedNodesRef = (0, _react.useRef)([]);
@@ -69,7 +69,7 @@ const useAutoScrolling = props => {
       height += row.offsetHeight;
     });
 
-    // 内容不足一屏时不需要无缝滚动
+    // No seamless scrolling needed when content is less than one screen
     if (height <= body.clientHeight) return;
     originalRowsHeightRef.current = height;
     const clones = [];
@@ -290,7 +290,7 @@ const useAutoScrolling = props => {
         return;
       }
       if (isSeamless && seamlessReadyRef.current) {
-        // 无缝模式下不会真正到底，直接继续滚动
+        // In seamless mode the scroll never actually reaches the bottom; just keep scrolling
         phaseRef.current = "idle";
       } else if (isAtBottom(body)) {
         if (onAutoScrollEndAdd) {
@@ -314,7 +314,7 @@ const useAutoScrolling = props => {
       return;
     }
 
-    // 内容不足一屏时，也按“滚动到底”处理，触发 load-more 逻辑
+    // When content is less than one screen, treat it as "scrolled to bottom" too, triggering the load-more logic
     if (!bodyScrollable) {
       phaseRef.current = "wait";
       waitUntilRef.current = performance.now() + interval;
@@ -357,14 +357,15 @@ const useAutoScrolling = props => {
     const body = getBody();
     if (!changed || !body) return;
 
-    // 无缝模式：实时刷新场景下保留滚动进度，clone 节点交由 loop 在下一帧按需重建，
-    // 避免每次轮询都把 scrollTop 重置为 0 导致用户视觉上"不滚动"。
+    // Seamless mode: in real-time refresh scenarios keep the scroll progress; clone nodes are
+    // rebuilt on demand by loop on the next frame, avoiding resetting scrollTop to 0 on every
+    // poll, which would make it look like the table "isn't scrolling".
     if (isSeamless) {
       cleanupClones();
       return;
     }
     if (onAutoScrollEndAdd) {
-      // 当 load-more 模式且此前已停止时，有新数据后恢复自动滚动
+      // In load-more mode, if scrolling had stopped, resume auto-scrolling when new data arrives
       if (phaseRef.current === "stopped") {
         phaseRef.current = autoScrollMode === "row" ? "wait" : "idle";
         waitUntilRef.current = autoScrollMode === "row" ? performance.now() + interval : 0;

package/lib/components/Table/_hooks/useEllipsisTooltip.d.ts

@@ -1,7 +1,7 @@
 import { ColumnsType, EllipsisTooltipConfig } from "..";
 import { AnyObject } from "antd/es/_util/type";
 /**
- * 为设置了 ellipsis 且没有自定义 render 的列自动添加溢出检测和 Tooltip
+ * Automatically adds overflow detection and a Tooltip for columns that set ellipsis and have no custom render
  */
 declare const useEllipsisTooltip: <T extends AnyObject>(tooltipConfig?: EllipsisTooltipConfig) => {
     enhanceColumns: (columns?: ColumnsType<T>) => ColumnsType<T> | undefined;

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

@@ -10,12 +10,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 /**
- * 为设置了 ellipsis 且没有自定义 render 的列自动添加溢出检测和 Tooltip
+ * Automatically adds overflow detection and a Tooltip for columns that set ellipsis and have no custom render
  */
 const useEllipsisTooltip = tooltipConfig => {
   const enhanceColumns = (0, _react.useCallback)(columns => {
     return columns?.map(column => {
-      // 递归处理子列
+      // Recursively process child columns
       if (column.children) {
         return {
           ...column,
@@ -23,16 +23,16 @@ const useEllipsisTooltip = tooltipConfig => {
         };
       }
 
-      // 如果设置了 ellipsis 且没有自定义 render
+      // If ellipsis is set and there is no custom render
       if (column.ellipsis && !column.render && column.dataIndex) {
         return {
           ...column,
           render: text => {
-            // 获取实际的显示值
+            // Get the actual display value
             const displayValue = typeof text === "string" || typeof text === "number" ? text : String(text ?? "");
 
-            // 不传 width：由 TextEllipsis 实测单元格实际渲染宽度作为 Tooltip 宽度
-            // （声明的列宽经 fixedWidth 比例分配后与实际宽度并不一致）
+            // Do not pass width: let TextEllipsis measure the cell's actual rendered width as the Tooltip width
+            // (the declared column width, after fixedWidth proportional allocation, does not match the actual width)
             return /*#__PURE__*/_react.default.createElement(_TextEllipsis.default, {
               tooltipConfig: tooltipConfig,
               children: displayValue,

package/lib/components/Table/_hooks/usePaginationSync.d.ts

@@ -4,9 +4,9 @@ interface UsePaginationSyncParams {
     pageSize?: number;
 }
 /**
- * 分页状态同步 hook
- * 用于同步外部传入的 current 和 pageSize 到内部状态
- * 注意：只有明确传入 current/pageSize 时才会进行同步，undefined 时不受默认值影响
+ * Pagination state sync hook
+ * Syncs externally provided current and pageSize into internal state
+ * Note: sync only happens when current/pageSize is explicitly provided; undefined is not affected by defaults
  */
 declare const usePaginationSync: (params: UsePaginationSyncParams) => {
     _pageNum: number;

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 /**
- * 分页状态同步 hook
- * 用于同步外部传入的 current 和 pageSize 到内部状态
- * 注意：只有明确传入 current/pageSize 时才会进行同步，undefined 时不受默认值影响
+ * Pagination state sync hook
+ * Syncs externally provided current and pageSize into internal state
+ * Note: sync only happens when current/pageSize is explicitly provided; undefined is not affected by defaults
  */
 const usePaginationSync = params => {
   const {
@@ -18,13 +18,13 @@ const usePaginationSync = params => {
   const [_pageNum, setPageNum] = (0, _react.useState)(current ?? 1);
   const [_pageSize, setPageSize] = (0, _react.useState)(pageSize ?? 10);
   (0, _react.useEffect)(() => {
-    // 只有明确传入 current 时才同步
+    // Sync only when current is explicitly provided
     if (current !== undefined && current !== _pageNum) {
       setPageNum(current);
     }
   }, [_pageNum, current]);
   (0, _react.useEffect)(() => {
-    // 只有明确传入 pageSize 时才同步
+    // Sync only when pageSize is explicitly provided
     if (pageSize !== undefined && pageSize !== _pageSize) {
       setPageSize(pageSize);
     }

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

@@ -20,35 +20,35 @@ const useScrollEnd = props => {
   (0, _ahooks.useDebounceEffect)(() => {
     let body = null;
 
-    // 清理函数
+    // Cleanup function
     const cleanup = () => {
-      // 移除事件监听器
+      // Remove event listeners
       if (body && eventHandlersRef.current.scroll) {
         body.removeEventListener("scroll", eventHandlersRef.current.scroll);
       }
       eventHandlersRef.current = {};
     };
 
-    // 当 autoScrolling 开启时，不启用此 hook
+    // Do not enable this hook when autoScrolling is on
     if (ref && ref.current && ready && onScrollEnd && dataSource?.length && !autoScrolling) {
       body = document.querySelector(`.${cls} .ant-table-body`);
       if (body && body.scrollHeight > body.clientHeight) {
-        // 清理之前的监听器
+        // Clean up previous listeners
         cleanup();
 
-        // 添加滚动事件监听器
+        // Add scroll event listener
         const handleScroll = () => {
           if (!body) {
             return;
           }
 
-          // 计算距离底部的距离
+          // Compute the distance to the bottom
           const scrollTop = body.scrollTop;
           const scrollHeight = body.scrollHeight;
           const clientHeight = body.clientHeight;
           const distanceToBottom = scrollHeight - scrollTop - clientHeight;
 
-          // 当滚动到接近底部时触发
+          // Trigger when scrolled close to the bottom
           if (distanceToBottom <= threshold) {
             onScrollEnd();
           }