@hsu-react/ui 0.0.13 → 0.0.14

package/lib/components/Search/SearchCard/_utils/updateRealValue.js

@@ -7,34 +7,34 @@ exports.updateRealValue = updateRealValue;
 var _typeGuards = require("./typeGuards");
 var _hasSelectedChildren = require("./hasSelectedChildren");
 /**
- * 更新真实返回值
+ * Updates the real return value
  */
 function updateRealValue(value, optionName, newValues) {
-  // 参数验证
+  // Parameter validation
   if (!value || !(0, _typeGuards.isStringValue)(optionName) || !newValues) {
     return;
   }
 
-  // 合并当前值和新值以获取最新状态
+  // Merge the current values and new values to get the latest state
   const mergedValues = {
     ...value,
     ...newValues
   };
 
-  // 检查是否存在子项数据
+  // Check whether child item data exists
   let hasAnyChildrenSelected = false;
   let childrenValue = null;
 
-  // 遍历所有可能的子项名称
+  // Iterate over all possible child item names
   Object.keys(mergedValues)?.forEach(key => {
     if (key.endsWith("Children")) {
-      // 找到对应的父项名称
+      // Find the corresponding parent item name
       const parentName = key.replace("Children", "");
 
-      // 只处理当前选项的子项
+      // Only handle the child items of the current option
       if (parentName === optionName) {
         try {
-          // 检查子项是否有选中值
+          // Check whether the child items have a selected value
           const currentChildrenValue = mergedValues[key];
           const hasSelected = (0, _hasSelectedChildren.hasSelectedChildren)(mergedValues, key, Array.isArray(currentChildrenValue));
           if (hasSelected) {
@@ -48,13 +48,13 @@ function updateRealValue(value, optionName, newValues) {
     }
   });
 
-  // 设置真实返回值
+  // Set the real return value
   const realValueKey = `${optionName}Real`;
   if (hasAnyChildrenSelected) {
-    // 如果有子项被选中，使用子项值
+    // If any child item is selected, use the child value
     newValues[realValueKey] = childrenValue;
   } else {
-    // 如果没有子项被选中，使用父项值
+    // If no child item is selected, use the parent value
     const parentValue = newValues[optionName] ?? value[optionName];
     newValues[realValueKey] = parentValue;
   }

package/lib/components/Search/SearchCard/index.js

@@ -56,7 +56,7 @@ const SearchCard = /*#__PURE__*/(0, _react.memo)(props => {
     defaultCollapse
   });
 
-  // 处理搜索
+  // Handle search
   const handleSearch = () => {
     const realValues = getRealValues();
     onChange?.({

package/lib/components/Search/SearchCard/index.module.scss

@@ -61,7 +61,7 @@
     transition: all 0.3s, border-top 0s;
   }
 
-  // 当有搜索框时，调整选项框的样式
+  // When there is a search box, adjust the options box styles
   &:has(.searchBox) .optionsBox {
     border-radius: 0 0 8px 8px;
     padding-top: 12px;
@@ -177,9 +177,9 @@
 
           &.active,
           &:hover {
-            color: #0e59ef;
+            color: var(--primary-color);
 
-            background: rgba(14, 89, 239, 0.12);
+            background: color-mix(in srgb, var(--primary-color) 12%, transparent);
           }
         }
 
@@ -195,7 +195,7 @@
         .help {
           margin-left: 2px;
 
-          color: #7f7f7f;
+          color: var(--cf-text-2);
           font-size: 16px;
         }
       }
@@ -207,7 +207,7 @@
         height: max-content;
         padding: 3px 0px;
 
-        color: #7f7f7f;
+        color: var(--cf-text-2);
         font-weight: 400;
         font-size: 16px;
         font-family: PingFangSC-Regular, PingFang SC;
@@ -220,7 +220,7 @@
         transition: color 0.3s;
 
         &:hover {
-          color: #0e59ef;
+          color: var(--primary-color);
         }
       }
     }
@@ -252,8 +252,8 @@
 
         &.active,
         &:hover {
-          color: #0e59ef;
-          background: rgba(14, 89, 239, 0.12);
+          color: var(--primary-color);
+          background: color-mix(in srgb, var(--primary-color) 12%, transparent);
         }
       }
     }

package/lib/components/Search/SearchCollapsible/index.d.ts

@@ -7,10 +7,10 @@ export interface SearchCollapsibleProps extends SearchPropsWithFilter {
     affterButtonGroup?: ChakraButtonProps[];
 }
 /**
- * 可折叠模式的 Search 组件
- * - 可以完全折叠/展开整个搜索区域
- * - 通过 defaultExpanded 控制初始展开状态
- * - 适合需要隐藏搜索栏以获得更多展示空间的场景
+ * Search component in collapsible mode
+ * - The entire search area can be fully collapsed/expanded
+ * - Initial expanded state is controlled via defaultExpanded
+ * - Suitable for scenarios where the search bar needs to be hidden to gain more display space
  */
 declare const SearchCollapsible: React.FC<SearchCollapsibleProps>;
 export default SearchCollapsible;

package/lib/components/Search/SearchCollapsible/index.js

@@ -14,10 +14,10 @@ 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; }
 /**
- * 可折叠模式的 Search 组件
- * - 可以完全折叠/展开整个搜索区域
- * - 通过 defaultExpanded 控制初始展开状态
- * - 适合需要隐藏搜索栏以获得更多展示空间的场景
+ * Search component in collapsible mode
+ * - The entire search area can be fully collapsed/expanded
+ * - Initial expanded state is controlled via defaultExpanded
+ * - Suitable for scenarios where the search bar needs to be hidden to gain more display space
  */
 const SearchCollapsible = props => {
   const {
@@ -28,10 +28,10 @@ const SearchCollapsible = props => {
     ...rest
   } = props;
 
-  // collapse 的语义是反的，所以需要取反 defaultExpanded
+  // The semantics of collapse are inverted, so defaultExpanded needs to be negated
   const [collapse, setCollapse] = (0, _react.useState)(!defaultExpanded);
 
-  // 处理折叠切换
+  // Handle collapse toggle
   const handleCollapseToggle = (0, _react.useCallback)(() => {
     setCollapse(prev => {
       const newCollapse = !prev;

package/lib/components/Search/SearchCollapsible/index.module.scss

@@ -1,3 +1,3 @@
-// SearchCollapsible 组件的独立样式
-// 目前复用父级 Search 组件的样式，如需自定义可在此处添加
+// Standalone styles for the SearchCollapsible component
+// Currently reuses the parent Search component's styles; add customizations here if needed
 

package/lib/components/Search/SearchWithFilter/index.d.ts

@@ -6,10 +6,10 @@ export interface SearchWithFilterProps extends SearchPropsWithFilter {
     affterButtonGroup?: ChakraButtonProps[];
 }
 /**
- * 带筛选器设置的 Search 组件
- * - 提供下拉菜单，允许用户动态选择显示哪些搜索项
- * - 用户可以自定义显示的搜索字段
- * - 提供更灵活的搜索体验
+ * Search component with filter settings
+ * - Provides a dropdown menu allowing users to dynamically choose which search items are displayed
+ * - Users can customize the displayed search fields
+ * - Offers a more flexible search experience
  */
 declare const SearchWithFilter: React.FC<SearchWithFilterProps>;
 export default SearchWithFilter;

package/lib/components/Search/SearchWithFilter/index.js

@@ -9,10 +9,10 @@ var _SearchBase = _interopRequireDefault(require("../_components/SearchBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * 带筛选器设置的 Search 组件
- * - 提供下拉菜单，允许用户动态选择显示哪些搜索项
- * - 用户可以自定义显示的搜索字段
- * - 提供更灵活的搜索体验
+ * Search component with filter settings
+ * - Provides a dropdown menu allowing users to dynamically choose which search items are displayed
+ * - Users can customize the displayed search fields
+ * - Offers a more flexible search experience
  */
 const SearchWithFilter = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBase.default, {

package/lib/components/Search/SearchWithFilter/index.module.scss

@@ -1,3 +1,3 @@
-// SearchWithFilter 组件的独立样式
-// 目前复用父级 Search 组件的样式，如需自定义可在此处添加
+// Standalone styles for the SearchWithFilter component
+// Currently reuses the parent Search component's styles; add customizations here if needed
 

package/lib/components/Search/SearchWithMore/index.d.ts

@@ -8,10 +8,10 @@ export interface SearchWithMoreProps extends Omit<SearchPropsWithFilter, "moreSe
     affterButtonGroup?: ChakraButtonProps[];
 }
 /**
- * 带更多搜索项的 Search 组件
- * - 将搜索项分为基础项和更多项两组
- * - 初始只显示基础搜索项，点击展开后显示更多项
- * - 适合有大量搜索字段的场景
+ * Search component with a "more items" section
+ * - Splits search items into a basic group and a "more" group
+ * - Only basic items are shown initially; expanding reveals the rest
+ * - Suitable for pages with a large number of search fields
  */
 declare const SearchWithMore: React.FC<SearchWithMoreProps>;
 export default SearchWithMore;

package/lib/components/Search/SearchWithMore/index.js

@@ -9,10 +9,10 @@ var _SearchBase = _interopRequireDefault(require("../_components/SearchBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * 带更多搜索项的 Search 组件
- * - 将搜索项分为基础项和更多项两组
- * - 初始只显示基础搜索项，点击展开后显示更多项
- * - 适合有大量搜索字段的场景
+ * Search component with a "more items" section
+ * - Splits search items into a basic group and a "more" group
+ * - Only basic items are shown initially; expanding reveals the rest
+ * - Suitable for pages with a large number of search fields
  */
 const SearchWithMore = props => {
   const {
@@ -21,7 +21,7 @@ const SearchWithMore = props => {
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBase.default, {
     ...rest,
-    // SearchWithMore 始终显示所有搜索项
+    // SearchWithMore always shows all search items
     showAllSearchItems: true,
     showFilter: !!setFilter
   });

package/lib/components/Search/SearchWithMore/index.module.scss

@@ -1,3 +1,3 @@
-// SearchWithMore 组件的独立样式
-// 目前复用父级 Search 组件的样式，如需自定义可在此处添加
+// Standalone styles for the SearchWithMore component
+// Currently reuses the parent Search component's styles; add customizations here if needed
 

package/lib/components/Search/_components/ButtonGroup/index.js

@@ -18,7 +18,7 @@ const ButtonGroup = exports.ButtonGroup = /*#__PURE__*/_react.default.forwardRef
     permitted = true
   } = props;
 
-  // 判断是否有搜索项（children 存在且不为空）
+  // Determine whether there are search items (children exists and is not empty)
   const hasSearchItems = permitted && children;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: `${_indexModule.default.buttonGroup} ${!hasSearchItems ? _indexModule.default.flexStart : ""}`,

package/lib/components/Search/_components/SearchBase/index.d.ts

@@ -3,7 +3,7 @@ import { FormInstance } from "antd";
 import { FormItemProps } from "../../../FormItem";
 import type useLabelWidth from "../../../../hooks/useLabelWidth";
 import { SearchPropsWithFilter } from "../../_types";
-/** 暴露给变体扩展渲染（如高级筛选抽屉）的上下文 */
+/** Context exposed to variant extension rendering (e.g. the advanced filters drawer) */
 export interface SearchBaseContext {
     form: FormInstance;
     expand: boolean;
@@ -14,19 +14,19 @@ export interface SearchBaseContext {
     onResetClick: () => void;
 }
 export interface SearchBaseProps extends SearchPropsWithFilter {
-    /** 高级筛选模式：搜索项不显示 label，展开按钮显示为"高级筛选" */
+    /** Advanced filters mode: search items hide their label, and the expand button shows as "advanced filters" */
     advancedFilters?: boolean;
-    /** 是否渲染 FilterDropdown（筛选器设置下拉） */
+    /** Whether to render FilterDropdown (the filter settings dropdown) */
     showFilter?: boolean;
-    /** 表单区域之后、容器之内的附加内容（如折叠开关），仅在有权限时渲染 */
+    /** Extra content after the form area but inside the container (e.g. the collapse toggle); rendered only when permitted */
     afterForm?: ReactNode;
-    /** 容器之外的附加内容（如高级筛选抽屉），仅在有权限时渲染 */
+    /** Extra content outside the container (e.g. the advanced filters drawer); rendered only when permitted */
     renderOutside?: (ctx: SearchBaseContext) => ReactNode;
 }
 /**
- * Search 各变体共享的基础实现：
- * 表单渲染、列布局、展开/收起、按钮组、权限控制。
- * 变体只负责自身差异（筛选器、折叠开关、高级筛选抽屉等）。
+ * Base implementation shared by all Search variants:
+ * form rendering, column layout, expand/collapse, button group, permission control.
+ * Variants are only responsible for their own differences (filter, collapse toggle, advanced filters drawer, etc.).
  */
 declare const SearchBase: React.FC<SearchBaseProps>;
 export default SearchBase;

package/lib/components/Search/_components/SearchBase/index.js

@@ -18,12 +18,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** 暴露给变体扩展渲染（如高级筛选抽屉）的上下文 */
+/** Context exposed to variant extension rendering (e.g. the advanced filters drawer) */
 
 /**
- * Search 各变体共享的基础实现：
- * 表单渲染、列布局、展开/收起、按钮组、权限控制。
- * 变体只负责自身差异（筛选器、折叠开关、高级筛选抽屉等）。
+ * Base implementation shared by all Search variants:
+ * form rendering, column layout, expand/collapse, button group, permission control.
+ * Variants are only responsible for their own differences (filter, collapse toggle, advanced filters drawer, etc.).
  */
 const SearchBase = props => {
   const {
@@ -93,7 +93,7 @@ const SearchBase = props => {
     columnOffsetWidth
   });
 
-  // 按列分组预计算（用于对齐同列 label 宽度），避免在 map 中逐项重复 filter
+  // Precompute grouping by column (used to align label widths within the same column), avoiding repeated per-item filtering inside map
   const columnGroups = (0, _react.useMemo)(() => {
     const groups = Array.from({
       length: totalColumnNum

package/lib/components/Search/_components/SearchButtons/index.d.ts

@@ -3,9 +3,9 @@ interface SearchButtonsProps {
     onSearch: () => void;
     onReset: () => void;
     searchDisabled?: boolean;
-    /** 查询按钮文本 */
+    /** Search button text */
     searchText?: React.ReactNode;
-    /** 重置按钮文本 */
+    /** Reset button text */
     resetText?: React.ReactNode;
 }
 export declare const SearchButtons: React.FC<SearchButtonsProps>;

package/lib/components/Search/_hooks/useAdaptiveColumnNum.d.ts

@@ -1,13 +1,13 @@
 import { RefObject } from "react";
 /**
- * 根据容器宽度动态调整列数的Hook
- * @param containerRef 容器引用
- * @param totalColumnNum 基础总列数（包括按钮组）
- * @param enabled 是否启用自适应（默认true）
- * @param minColumnNum 最小列数（默认1）
- * @param maxColumnNum 最大列数（默认不限制）
- * @param breakpoints 断点配置，格式：{ width: columnNum }，例如 { 1200: 5, 800: 3 }
- * @param baseWidth 基准宽度，用于计算宽度比例（默认1200px）
- * @returns 调整后的总列数
+ * Hook that dynamically adjusts the column count based on container width
+ * @param containerRef Container ref
+ * @param totalColumnNum Base total column count (including the button group)
+ * @param enabled Whether adaptive mode is enabled (default true)
+ * @param minColumnNum Minimum column count (default 1)
+ * @param maxColumnNum Maximum column count (unlimited by default)
+ * @param breakpoints Breakpoint config, format: { width: columnNum }, e.g. { 1200: 5, 800: 3 }
+ * @param baseWidth Base width used to compute the width ratio (default 1200px)
+ * @returns Adjusted total column count
  */
 export declare function useAdaptiveColumnNum(containerRef: RefObject<HTMLDivElement>, totalColumnNum: number, enabled?: boolean, minColumnNum?: number, maxColumnNum?: number, breakpoints?: Record<number, number>, baseWidth?: number): number;

package/lib/components/Search/_hooks/useAdaptiveColumnNum.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAdaptiveColumnNum = useAdaptiveColumnNum;
 var _react = require("react");
 /**
- * 根据容器宽度动态调整列数的Hook
- * @param containerRef 容器引用
- * @param totalColumnNum 基础总列数（包括按钮组）
- * @param enabled 是否启用自适应（默认true）
- * @param minColumnNum 最小列数（默认1）
- * @param maxColumnNum 最大列数（默认不限制）
- * @param breakpoints 断点配置，格式：{ width: columnNum }，例如 { 1200: 5, 800: 3 }
- * @param baseWidth 基准宽度，用于计算宽度比例（默认1200px）
- * @returns 调整后的总列数
+ * Hook that dynamically adjusts the column count based on container width
+ * @param containerRef Container ref
+ * @param totalColumnNum Base total column count (including the button group)
+ * @param enabled Whether adaptive mode is enabled (default true)
+ * @param minColumnNum Minimum column count (default 1)
+ * @param maxColumnNum Maximum column count (unlimited by default)
+ * @param breakpoints Breakpoint config, format: { width: columnNum }, e.g. { 1200: 5, 800: 3 }
+ * @param baseWidth Base width used to compute the width ratio (default 1200px)
+ * @returns Adjusted total column count
  */
 function useAdaptiveColumnNum(containerRef, totalColumnNum, enabled = true, minColumnNum = 1, maxColumnNum, breakpoints, baseWidth = 1200) {
   const [adaptiveColumnNum, setAdaptiveColumnNum] = (0, _react.useState)(totalColumnNum);
@@ -28,9 +28,9 @@ function useAdaptiveColumnNum(containerRef, totalColumnNum, enabled = true, minC
       const containerWidth = containerRef.current.offsetWidth;
       let calculatedColumnNum = totalColumnNum;
 
-      // 如果提供了断点配置，优先使用断点
+      // If breakpoint config is provided, use breakpoints first
       if (breakpoints) {
-        const sortedBreakpoints = Object.keys(breakpoints)?.map(Number).sort((a, b) => b - a); // 从大到小排序
+        const sortedBreakpoints = Object.keys(breakpoints)?.map(Number).sort((a, b) => b - a); // Sort descending
 
         for (const breakpoint of sortedBreakpoints) {
           if (containerWidth >= breakpoint) {
@@ -39,13 +39,13 @@ function useAdaptiveColumnNum(containerRef, totalColumnNum, enabled = true, minC
           }
         }
       } else {
-        // 默认策略：根据容器宽度自动计算
-        // 基于基础列数，根据容器宽度比例调整
+        // Default strategy: compute automatically from container width
+        // Based on the base column count, adjusted by the container width ratio
         const widthRatio = containerWidth / baseWidth;
         calculatedColumnNum = Math.round(totalColumnNum * widthRatio);
       }
 
-      // 应用最小值和最大值限制
+      // Apply min and max limits
       if (calculatedColumnNum < minColumnNum) {
         calculatedColumnNum = minColumnNum;
       }
@@ -55,24 +55,24 @@ function useAdaptiveColumnNum(containerRef, totalColumnNum, enabled = true, minC
       setAdaptiveColumnNum(calculatedColumnNum);
     };
     const resizeObserver = new ResizeObserver(() => {
-      // 使用 requestAnimationFrame 延迟到下一帧，确保DOM已更新
+      // Use requestAnimationFrame to defer to the next frame, ensuring the DOM has updated
       requestAnimationFrame(() => {
         calculateColumnNum();
       });
     });
 
-    // 延迟观察，确保 ref 已被赋值
+    // Defer observation to ensure the ref has been assigned
     const observeContainer = () => {
       if (containerRef.current) {
         resizeObserver.observe(containerRef.current);
       } else {
-        // 如果 ref 还未赋值，稍后重试
+        // If the ref is not assigned yet, retry later
         requestAnimationFrame(observeContainer);
       }
     };
     observeContainer();
 
-    // 监听窗口大小变化
+    // Listen for window resize
     const handleWindowResize = () => {
       requestAnimationFrame(() => {
         calculateColumnNum();
@@ -80,7 +80,7 @@ function useAdaptiveColumnNum(containerRef, totalColumnNum, enabled = true, minC
     };
     window.addEventListener("resize", handleWindowResize);
 
-    // 初始计算（延迟执行以确保DOM已渲染）
+    // Initial calculation (deferred to ensure the DOM has rendered)
     requestAnimationFrame(() => {
       calculateColumnNum();
     });

package/lib/components/Search/_hooks/useSearchCommon.d.ts

@@ -47,6 +47,6 @@ export interface UseSearchCommonReturn {
     permitted: boolean;
 }
 /**
- * 提取所有 Search 组件的通用逻辑
+ * Extracts the common logic shared by all Search components
  */
 export declare const useSearchCommon: (params: UseSearchCommonParams) => UseSearchCommonReturn;

package/lib/components/Search/_hooks/useSearchCommon.js

@@ -16,7 +16,7 @@ var _utils = require("../_utils");
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * 提取所有 Search 组件的通用逻辑
+ * Extracts the common logic shared by all Search components
  */
 const useSearchCommon = params => {
   const {
@@ -50,23 +50,23 @@ const useSearchCommon = params => {
   const buttonGroupRef = (0, _react.useRef)(null);
   const cls = (0, _react.useMemo)(() => (0, _hsuUtils.generateRandomStr)(10), []);
 
-  // 提取可见搜索项
+  // Extract visible search items
   const visibleSearchItems = (0, _react.useMemo)(() => {
     return processedSearchItems.filter(item => item.visible !== false);
   }, [processedSearchItems]);
 
-  // 提取可见的更多搜索项
+  // Extract visible "more" search items
   const visibleMoreSearchItems = (0, _react.useMemo)(() => {
     return moreSearchItems.filter(item => item.visible !== false);
   }, [moreSearchItems]);
 
-  // 计算可见的搜索项数量
+  // Count of visible search items
   const visibleSearchItemCount = visibleSearchItems.length;
 
-  // 计算总列数（包括按钮组）
+  // Total column count (including the button group)
   const baseTotalColumnNum = columnNum + 1;
 
-  // 根据容器宽度动态调整列数
+  // Dynamically adjust column count based on container width
   const totalColumnNum = (0, _useAdaptiveColumnNum.useAdaptiveColumnNum)(containerRef, baseTotalColumnNum, autoAdaptWidth, 1,
   // minColumnNum
   undefined,
@@ -75,10 +75,10 @@ const useSearchCommon = params => {
   // breakpoints
   baseWidth);
 
-  // 计算调整后的搜索项列数（不包括按钮组）
+  // Adjusted search-item column count (excluding the button group)
   const adaptiveColumnNum = Math.max(1, totalColumnNum - 1);
 
-  // 使用基于宽度的展开/收起控制
+  // Use width-based expand/collapse control
   const {
     expand,
     setExpand,
@@ -90,14 +90,14 @@ const useSearchCommon = params => {
     searchData
   });
 
-  // 计算当前应该显示的搜索项
+  // Compute the search items that should currently be displayed
   const currentSearchItems = (0, _react.useMemo)(() => {
     if (showAllSearchItems || !!moreSearchItems?.length) {
       if (expand) return [...visibleSearchItems, ...visibleMoreSearchItems];
       return visibleSearchItems;
     }
 
-    // 计算按钮组宽度和列宽（用于判断是否需要显示更多项）
+    // Compute button group width and column width (used to decide whether more items should be displayed)
     let buttonGroupWidth;
     let columnWidth;
     if (!expand) {
@@ -106,7 +106,7 @@ const useSearchCommon = params => {
       columnWidth = result.columnWidth;
     }
 
-    // 否则使用计算函数
+    // Otherwise use the calculation function
     return (0, _utils.calculateVisibleItems)(processedSearchItems, expand, adaptiveColumnNum, visibleItemCount, autoAdaptWidth, buttonGroupWidth, columnWidth);
   }, [showAllSearchItems, moreSearchItems?.length, expand, processedSearchItems, adaptiveColumnNum, visibleItemCount, autoAdaptWidth, visibleSearchItems, visibleMoreSearchItems, columnOffsetWidth]);
   const onResetClick = (0, _react.useCallback)(() => {
@@ -122,33 +122,33 @@ const useSearchCommon = params => {
     });
   }, [form, onSearch]);
 
-  // 检查是否有自定义宽度
+  // Check whether any item has a custom width
   const hasCustomWidth = (0, _react.useMemo)(() => {
     return processedSearchItems.some(item => item.width !== undefined);
   }, [processedSearchItems]);
 
-  // 计算实际应该显示的项数（考虑按钮组宽度大于列宽的情况）
+  // Compute the actual number of items to display (accounting for the case where the button group is wider than a column)
   const actualDisplayCount = (0, _react.useMemo)(() => {
     if (hasCustomWidth) {
       return visibleItemCount;
     }
 
-    // 计算按钮组宽度和列宽
+    // Compute button group width and column width
     const {
       buttonGroupWidth,
       columnWidth
     } = (0, _utils.calculateButtonGroupAndColumnWidth)(containerRef, buttonGroupRef, adaptiveColumnNum, columnOffsetWidth);
 
-    // 判断按钮组宽度是否大于列宽，如果是，则显示 实际搜索项数量+1
+    // If the button group is wider than a column, display actual search item count + 1
     if ((0, _utils.shouldDisplayExtraItem)(buttonGroupWidth, columnWidth, adaptiveColumnNum, visibleSearchItemCount)) {
       return adaptiveColumnNum + 1;
     }
     return adaptiveColumnNum;
   }, [hasCustomWidth, adaptiveColumnNum, columnOffsetWidth, visibleSearchItemCount, visibleItemCount]);
 
-  // 计算是否显示展开按钮
+  // Determine whether to show the expand button
   const showExpandButton = (0, _react.useMemo)(() => {
-    // 如果有更多搜索项，显示展开按钮
+    // If there are "more" search items, show the expand button
     if (showAllSearchItems || !!moreSearchItems?.length) {
       if (visibleMoreSearchItems?.length) {
         return true;
@@ -156,21 +156,21 @@ const useSearchCommon = params => {
       return false;
     }
 
-    // 如果有自定义宽度，根据可见项数量判断
+    // If there are custom widths, decide based on the visible item count
     if (hasCustomWidth) {
       return visibleSearchItemCount > visibleItemCount;
     }
-    // 否则根据实际显示项数判断（考虑按钮组宽度大于列宽的情况）
+    // Otherwise decide based on the actual display count (accounting for the case where the button group is wider than a column)
     return visibleSearchItemCount > actualDisplayCount;
   }, [showAllSearchItems, moreSearchItems, hasCustomWidth, visibleSearchItemCount, actualDisplayCount, visibleMoreSearchItems?.length, visibleItemCount]);
 
-  // 检查按钮组是否有权限的按钮
+  // Check whether the button group contains any permitted button
   const hasPermittedButtons = (0, _react.useCallback)(buttonGroup => {
     if (!buttonGroup?.length) return false;
     return buttonGroup.some(button => checkPermission(button.hasPermi));
   }, [checkPermission]);
 
-  // 权限和内容检查
+  // Permission and content check
   const shouldRender = (0, _react.useMemo)(() => {
     return Boolean(hasPermittedButtons(beforeButtonGroup) || hasPermittedButtons(affterButtonGroup) || permitted && searchItems.length > 0);
   }, [searchItems.length, beforeButtonGroup, affterButtonGroup, permitted, hasPermittedButtons]);