@hsu-react/ui 0.0.12 → 0.0.14

package/src/components/Select/TreeSelect/_utils/getExpandedKeysByLevel.ts

@@ -1,10 +1,10 @@
 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 const getExpandedKeysByLevel = (
   treeData: DataNode[],
@@ -18,7 +18,7 @@ export const getExpandedKeysByLevel = (
 
   const traverse = (nodes: DataNode[], currentLevel: number) => {
     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 as SafeKey);
         traverse(node.children, currentLevel + 1);

package/src/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/src/components/Select/_hooks/useSelectComposition.ts

@@ -5,7 +5,7 @@ interface UseSelectCompositionProps {
 }
 
 /**
- * 管理输入法组合状态
+ * Manage IME composition state
  */
 export function useSelectComposition({
   onSearch,

package/src/components/Select/_hooks/useSelectInputOptions.ts

@@ -10,7 +10,7 @@ interface UseSelectInputOptionsProps {
 }
 
 /**
- * 管理输入选项（当没有匹配项时）
+ * Manage input options (when there are no matching options)
  */
 export function useSelectInputOptions({
   searchValue,

package/src/components/Select/_utils/calculatePopupWidth.ts

@@ -10,7 +10,7 @@ interface CalculatePopupWidthOptions {
 }
 
 /**
- * 计算弹出层宽度
+ * Calculate popup width
  */
 export function calculatePopupWidth({
   options,

package/src/components/Select/_utils/filterOption.ts

@@ -12,7 +12,7 @@ interface FilterOptionParams {
 }
 
 /**
- * 过滤选项
+ * Filter options
  */
 export function filterOption({
   searchValue,

package/src/components/Select/_utils/getElementPosition.ts

@@ -1,16 +1,17 @@
 /**
- * 获取元素相对于视口的顶部位置。
- * 下拉框为 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 function getElementTop(element: HTMLDivElement): number {
   return element.getBoundingClientRect().top;
 }
 
 /**
- * 获取元素相对于视口的左侧位置（同上，配合 position: fixed）。
+ * Get the element's left position relative to the viewport (same as above, for position: fixed).
  */
 export function getElementLeft(element: HTMLDivElement): number {
   return element.getBoundingClientRect().left;

package/src/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/src/components/Spreadsheet/xlsxspread.ts

@@ -1,6 +1,6 @@
 import * as XLSX from "xlsx";
 
-// 定义类型接口
+// Type interface definitions
 interface CellData {
   text: string;
   merge?: [number, number];
@@ -37,7 +37,7 @@ export function stox(wb: XLSX.WorkBook): SheetData[] {
     const o: SheetData = { name: name, rows: {}, merges: [] };
     const ws = wb.Sheets[name];
 
-    // 检查 ws["!ref"] 是否存在
+    // Check whether ws["!ref"] exists
     if (!ws["!ref"]) {
       out.push(o);
       return;

package/src/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/src/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/src/components/Table/_components/Pagination/index.tsx

@@ -36,7 +36,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     align,
   } = props;
   const selectRef = useRef<BaseSelectRef>(null);
-  // 直接传入原始值，不使用默认值，让 usePaginationSync 自行处理
+  // Pass the raw values directly without defaults; let usePaginationSync handle them itself
   const { _pageNum, _pageSize, setPageNum, setPageSize } = usePaginationSync({
     current: props.current,
     pageSize: props.pageSize,
@@ -122,7 +122,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
   return (
     <AntdPagination
       {...props}
-      // 没有外部传入时使用内部状态
+      // Use internal state when no external value is provided
       current={props.current ?? _pageNum}
       pageSize={props.pageSize ?? _pageSize}
       total={total}
@@ -132,7 +132,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         [styles.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/src/components/Table/_hooks/useAutoScrolling.ts

@@ -19,7 +19,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;
 }
@@ -62,7 +62,7 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
     mouseleave?: () => void;
   }>({});
 
-  // seamless 模式相关
+  // Seamless mode related
   const isSeamless = autoScrollLoopMode === "seamless" && autoScrollLoop;
   const originalRowsHeightRef = useRef(0);
   const clonedNodesRef = useRef<Node[]>([]);
@@ -99,7 +99,7 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
         height += (row as HTMLElement).offsetHeight;
       });
 
-      // 内容不足一屏时不需要无缝滚动
+      // No seamless scrolling needed when content is less than one screen
       if (height <= body.clientHeight) return;
 
       originalRowsHeightRef.current = height;
@@ -388,7 +388,7 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
         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) {
@@ -414,7 +414,7 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
       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;
@@ -498,15 +498,16 @@ const useAutoScrolling = (props: UseAutoScrollingProps) => {
     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 =

package/src/components/Table/_hooks/useEllipsisTooltip.ts

@@ -5,7 +5,7 @@ import TextEllipsis from "../../TextEllipsis";
 import React from "react";
 
 /**
- * 为设置了 ellipsis 且没有自定义 render 的列自动添加溢出检测和 Tooltip
+ * Automatically adds overflow detection and a Tooltip for columns that set ellipsis and have no custom render
  */
 const useEllipsisTooltip = <T extends AnyObject>(
   tooltipConfig?: EllipsisTooltipConfig,
@@ -13,7 +13,7 @@ const useEllipsisTooltip = <T extends AnyObject>(
   const enhanceColumns = useCallback(
     (columns?: ColumnsType<T>): ColumnsType<T> | undefined => {
       return columns?.map((column) => {
-        // 递归处理子列
+        // Recursively process child columns
         if (column.children) {
           return {
             ...column,
@@ -21,19 +21,19 @@ const useEllipsisTooltip = <T extends AnyObject>(
           };
         }
 
-        // 如果设置了 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 React.createElement(TextEllipsis, {
                 tooltipConfig: tooltipConfig,
                 children: displayValue,

package/src/components/Table/_hooks/usePaginationSync.ts

@@ -6,9 +6,9 @@ interface UsePaginationSyncParams {
 }
 
 /**
- * 分页状态同步 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: UsePaginationSyncParams) => {
   const { current, pageSize } = params;
@@ -17,14 +17,14 @@ const usePaginationSync = (params: UsePaginationSyncParams) => {
   const [_pageSize, setPageSize] = useState<number>(pageSize ?? 10);
 
   useEffect(() => {
-    // 只有明确传入 current 时才同步
+    // Sync only when current is explicitly provided
     if (current !== undefined && current !== _pageNum) {
       setPageNum(current);
     }
   }, [_pageNum, current]);
 
   useEffect(() => {
-    // 只有明确传入 pageSize 时才同步
+    // Sync only when pageSize is explicitly provided
     if (pageSize !== undefined && pageSize !== _pageSize) {
       setPageSize(pageSize);
     }

package/src/components/Table/_hooks/useScrollEnd.ts

@@ -7,8 +7,8 @@ interface useScrollEndProps {
   ref?: React.RefObject<HTMLDivElement>;
   dataSource?: TableProps["dataSource"];
   onScrollEnd?: () => void;
-  threshold?: number; // 距离底部的阈值，默认 50px
-  autoScrolling?: boolean; // 当 autoScrolling 开启时，此 hook 不启用
+  threshold?: number; // Distance-to-bottom threshold, default 50px
+  autoScrolling?: boolean; // When autoScrolling is enabled, this hook is disabled
 }
 
 const useScrollEnd = (props: useScrollEndProps) => {
@@ -28,16 +28,16 @@ const useScrollEnd = (props: useScrollEndProps) => {
   useDebounceEffect(() => {
     let body: HTMLDivElement | null = 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 &&
@@ -51,22 +51,22 @@ const useScrollEnd = (props: useScrollEndProps) => {
       ) as HTMLDivElement;
 
       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();
           }

package/src/components/Table/_hooks/useTableColumns.tsx

@@ -19,16 +19,16 @@ import {
 import usePermissions from "../../../hooks/usePermissions";
 import { PaginationProps } from "../_components/Pagination";
 
-// 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?: string): number => {
   if (!tdPadding) return MEASURE_ALIGN_CELL_PADDING_PX;
@@ -41,13 +41,13 @@ const getCellHorizontalPadding = (tdPadding?: string): number => {
     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 = <T extends AnyObject>(
   column: ColumnType<T>,
   dataSource?: readonly T[]
@@ -121,7 +121,7 @@ const useTableColumns = <T extends AnyObject>(
   const { checkPermission } = usePermissions();
   const [tableWidth, setTableWidth] = useState<number | null>(null);
 
-  // 监听表格宽度变化
+  // Observe table width changes
   useEffect(() => {
     if (ref?.current && cls) {
       const tableElement = document.querySelector(
@@ -142,7 +142,7 @@ const useTableColumns = <T extends AnyObject>(
     }
   }, [ref, cls]);
 
-  // 处理列的基础设置（权限、宽度、排序等）
+  // Handle basic column setup (permissions, width, sorting, etc.)
   const _columns = useMemo(() => {
     const cloned = cloneDeep(columns);
 
@@ -184,8 +184,9 @@ const useTableColumns = <T extends AnyObject>(
           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 as ColumnType<T>,
@@ -215,7 +216,7 @@ const useTableColumns = <T extends AnyObject>(
     return newColumns;
   }, [autoWidth, columns, dataSource, checkPermission, scroll, tdPadding]);
 
-  // 渲染列标题
+  // Render column titles
   const renderColumnTitle = useCallback(
     (column: ColumnType<T> | ColumnsGroupType<T>) => {
       const titleContent = column?.titleSort
@@ -236,7 +237,7 @@ const useTableColumns = <T extends AnyObject>(
               icon="material-symbols:help"
               className={styles.help}
               fontSize={16}
-              color="#999999"
+              color="var(--cf-text-3)"
             />
           </Tooltip>
         </>
@@ -247,7 +248,7 @@ const useTableColumns = <T extends AnyObject>(
 
   const renderColumns = useCallback(
     (columns?: ColumnsType<T>): AntColumnsType<T> | undefined => {
-      // 先增强列配置，为 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)) {
@@ -265,35 +266,35 @@ const useTableColumns = <T extends AnyObject>(
         });
       }
 
-      // 处理 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;
@@ -315,9 +316,9 @@ const useTableColumns = <T extends AnyObject>(
               );
 
               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) {
@@ -340,8 +341,9 @@ const useTableColumns = <T extends AnyObject>(
         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(
@@ -425,13 +427,13 @@ const useTableColumns = <T extends AnyObject>(
     ]
   );
 
-  // 缓存渲染后的列配置
+  // Cache the rendered column config
   const renderedColumns = useMemo(
     () => renderColumns(cloneDeep(_columns)),
     [renderColumns, _columns]
   );
 
-  // 处理排序变化
+  // Handle sort changes
   const handleTableChange = useCallback(
     (
       pagination: TablePaginationConfig,