@hsu-react/ui 0.0.13 → 0.0.15

package/src/components/Operate/_hooks/useOperateEllipsis.ts

@@ -2,11 +2,11 @@ import { useMemo } from "react";
 import { OperateProps } from "../index";
 
 /**
- * 计算操作按钮是否超出显示范围
- * @param menu - 菜单项数组
- * @param maxVisible - 最大可见数量
- * @param enableEllipsis - 是否启用省略
- * @returns 是否超出
+ * Determine whether the operate buttons overflow the visible range
+ * @param menu - Array of menu items
+ * @param maxVisible - Maximum number of visible items
+ * @param enableEllipsis - Whether ellipsis is enabled
+ * @returns Whether it overflows
  */
 const useOperateEllipsis = (
   menu: OperateProps[],

package/src/components/Operate/index.tsx

@@ -29,10 +29,10 @@ export interface OperateProps
 }
 
 /**
- * 渲染图标
- * @param icon - 图标配置
- * @param defaultIcon - 默认图标
- * @returns 渲染的图标元素
+ * Render an icon
+ * @param icon - Icon configuration
+ * @param defaultIcon - Default icon
+ * @returns The rendered icon element
  */
 const renderIcon = (
   icon: ReactNode | false | undefined,
@@ -46,7 +46,7 @@ const renderIcon = (
 };
 
 /**
- * 阻止事件冒泡的处理器
+ * Handler that stops event propagation
  */
 const stopPropagation = (e?: React.MouseEvent) => {
   e?.stopPropagation();
@@ -71,21 +71,21 @@ const Operate: React.FC<OperateProps> = (props) => {
   } = props;
   const { checkPermission } = usePermissions();
 
-  // 过滤菜单项（根据权限和隐藏状态）
+  // Filter menu items (by permission and hidden state)
   const filteredMenu = useMemo(() => {
     return menu.filter(
       (item) => !item.hidden && checkPermission(item.hasPermi)
     ) as OperateProps[];
   }, [menu, checkPermission]);
 
-  // 计算是否超出
+  // Determine whether it overflows
   const isOverflow = useOperateEllipsis(
     filteredMenu,
     maxVisible,
     enableEllipsis
   );
 
-  // 计算可见的菜单项和隐藏的菜单项
+  // Compute the visible and hidden menu items
   const { visibleItems, hiddenItems } = useMemo(() => {
     if (!isOverflow || maxVisible === undefined) {
       return { visibleItems: filteredMenu, hiddenItems: [] };
@@ -96,7 +96,7 @@ const Operate: React.FC<OperateProps> = (props) => {
     };
   }, [filteredMenu, isOverflow, maxVisible]);
 
-  // 处理确认事件
+  // Handle the confirm event
   const handleConfirm = useCallback(
     (e?: React.MouseEvent) => {
       stopPropagation(e);
@@ -105,7 +105,7 @@ const Operate: React.FC<OperateProps> = (props) => {
     [onConfirm, onClick]
   );
 
-  // 处理菜单项确认事件
+  // Handle the confirm event for a menu item
   const handleMenuItemConfirm = useCallback(
     (item: OperateProps) => (e?: React.MouseEvent) => {
       stopPropagation(e);
@@ -116,18 +116,18 @@ const Operate: React.FC<OperateProps> = (props) => {
 
   if (hidden) return null;
 
-  // 渲染按钮的通用配置
+  // Common configuration for rendering the button
   const buttonClassName = `${styles.Operate} ${className ?? ""}`.trim();
 
-  // 准备传递给 Button 的 props（排除 hasPermi，因为 Button 不支持 false 类型）
+  // Prepare props to pass to Button (exclude hasPermi, since Button does not support the false type)
   const buttonProps = {
     ...config,
     ...(hasPermi?.length ? { hasPermi } : {}),
   };
 
-  // 如果有菜单，渲染多个操作按钮
+  // If there is a menu, render multiple operate buttons
   if (menu.length > 0) {
-    // 生成下拉菜单项（用于"更多"按钮）
+    // Generate dropdown menu items (for the "more" button)
     const menuItems: ItemType[] = hiddenItems?.map((item) => {
       const hasConfirm = !!item.onConfirm;
       const defaultIcon = item.delete ? <DeleteOutlined /> : <FormOutlined />;
@@ -200,7 +200,7 @@ const Operate: React.FC<OperateProps> = (props) => {
             className: itemClassName,
             hasPermi: itemHasPermi,
           } = item;
-          // 透传剩余 Button 属性时排除事件/配置键，避免 onConfirm 等泄漏到 DOM（React 警告）
+          // When passing through the remaining Button props, exclude event/config keys to prevent onConfirm etc. from leaking to the DOM (React warning)
           const itemButtonProps = Object.fromEntries(
             Object.entries(item).filter(
               ([key]) =>
@@ -290,7 +290,7 @@ const Operate: React.FC<OperateProps> = (props) => {
     );
   }
 
-  // 单个操作按钮
+  // Single operate button
   const hasConfirm = !!onConfirm;
   const defaultIcon = isDelete ? <DeleteOutlined /> : <FormOutlined />;
   const buttonContent = (

package/src/components/Panel/DefaultPanel/index.module.scss

@@ -45,7 +45,7 @@
 
   background: var(--cf-surface);
 
-  // CF 风格：描边白卡片
+  // CF style: outlined white card
   border-radius: 8px;
   border: 1px solid var(--cf-border);
 }

package/src/components/Panel/IframePanel/index.module.scss

@@ -57,7 +57,7 @@
     height: 60px;
 
     font-size: 50px;
-    color: #6b7280;
+    color: var(--cf-text-2);
 
     background: var(--cf-surface);
 

package/src/components/Panel/ListPanel/ListModalPanel/index.module.scss

@@ -1,5 +1,5 @@
 .modal {
-  // 定高让内部“height: 100%”链路可解析（antd Modal 默认内容自适应，内层设置 height/max-height 无效）
+  // Fixed height so the inner "height: 100%" chain can resolve (antd Modal content auto-sizes by default, so setting height/max-height on inner layers has no effect)
   height: 700px;
 
   &.fullscreen {

package/src/components/Panel/ListPanel/ListModalPanel/index.tsx

@@ -30,7 +30,7 @@ interface TableTools {
 }
 
 export interface ListModalPanelTabelProps extends Omit<TableProps, "title"> {
-  /** 透传给内部 Table 的 key，用于在异构列集切换时强制重挂载表格 */
+  /** Key passed through to the inner Table, used to force-remount the table when switching between heterogeneous column sets */
   key?: React.Key;
   title?: string;
   buttonGroup?: ButtonProps[];
@@ -69,7 +69,7 @@ export interface ListModalPanelProps<
   modalClassName?: string;
   className?: string;
   searchProps?: SearchModePropsMap[T];
-  /** Search 组件模式：default-基础 | Advanced-高级筛选 | Collapsible-可折叠 | WithFilter-带筛选器 | WithMore-带更多项 | Card-卡片式 */
+  /** Search component mode: default-basic | Advanced-advanced filtering | Collapsible-collapsible | WithFilter-with filter | WithMore-with more items | Card-card style */
   searchMode?: T;
   tableProps?: ListModalPanelTabelProps;
   hasPermi?: string[];
@@ -99,8 +99,8 @@ const ListModalPanel: React.FC<ListModalPanelProps<SearchModeKeys>> = (
     tableContainerClassName,
     tips,
     otherTool,
-    // 异构列集切换时用于强制重挂载表格的 key；显式提取，避免随 ...tableConfig
-    // 展开进 JSX 触发 React "key prop being spread" 警告
+    // Key used to force-remount the table when switching between heterogeneous column sets; extracted
+    // explicitly so it is not spread into JSX via ...tableConfig, which triggers React's "key prop being spread" warning
     key: tableInstanceKey,
     ...tableConfig
   } = tableProps;
@@ -109,8 +109,8 @@ const ListModalPanel: React.FC<ListModalPanelProps<SearchModeKeys>> = (
   const [_columns, setColumns] = useState<ColumnsType | undefined>(columns);
   const [showColumnMgt, setShowColumnMgt] = useState<boolean>(false);
   const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
-  // 弹窗打开动画是否已完成：Search 的列数/展开等 DOM 测量要等弹窗完全展开
-  // 才能取到准确尺寸（zoom 动画只变 transform，不触发 ResizeObserver）
+  // Whether the modal's opening animation has finished: Search's DOM measurements (column count/expansion, etc.)
+  // only yield accurate sizes after the modal is fully expanded (the zoom animation only changes transform and does not trigger ResizeObserver)
   const [modalReady, setModalReady] = useState<boolean>(false);
 
   useEffect(() => {
@@ -138,7 +138,7 @@ const ListModalPanel: React.FC<ListModalPanelProps<SearchModeKeys>> = (
     }
   }, [columnMgt, columns]);
 
-  // 根据 searchMode 渲染对应的 Search 组件
+  // Render the matching Search component based on searchMode
   const SearchComponent = useMemo(() => {
     const searchClassName = classNames(searchProps?.className, styles.search);
 
@@ -226,7 +226,7 @@ const ListModalPanel: React.FC<ListModalPanelProps<SearchModeKeys>> = (
       >
         <div className={classNames(styles.ListModalPanel, className)}>
           {extraContent}
-          {/* 动画完成后重挂载 Search，使其在弹窗完全展开后重新初测 DOM 尺寸 */}
+          {/* Remount Search after the animation completes so it re-measures DOM sizes once the modal is fully expanded */}
           {React.cloneElement(SearchComponent, {
             key: modalReady ? "modal-ready" : "modal-pending",
           })}

package/src/components/Panel/ListPanel/_components/ColumnMgt/index.tsx

@@ -251,7 +251,7 @@ const ColumnMgt: React.FC<ColumnMgtProps> = (props) => {
         );
         const newDataSource = arrayMove(prevState, activeIndex, overIndex);
 
-        // 更新 sort 值以反映新的顺序
+        // Update sort values to reflect the new order
         const updatedDataSource = newDataSource?.map((item, index) => ({
           ...item,
           sort: index,

package/src/components/Panel/ListPanel/index.module.scss

@@ -51,14 +51,14 @@
 
   &:hover {
     &::before {
-      background: rgba(24, 144, 255, 0.45);
+      background: color-mix(in srgb, var(--primary-color) 45%, transparent);
     }
   }
 }
 
 .resizing {
   &::before {
-    background: #1890ff;
+    background: var(--primary-color);
   }
 }
 
@@ -91,7 +91,7 @@
 
     background: var(--cf-surface);
 
-    // CF 风格：描边白卡片 + 小圆角，去投影
+    // CF style: outlined white card + small border radius, no shadow
     border-radius: 8px;
     border: 1px solid var(--cf-border);
     box-shadow: none;
@@ -104,8 +104,8 @@
     column-gap: 10px;
   }
 
-  // 页面级页签：无底色容器，页签拆成独立圆角块、块间留空；
-  // margin/radius 需 !important 压过 TabBar 内部的连体分段样式（负 margin + 首尾切角）
+  // Page-level tabs: container without background; tabs split into standalone rounded blocks with gaps between them;
+  // margin/radius need !important to override TabBar's internal joined-segment styles (negative margin + first/last corner cuts)
   .headerTabBar {
     column-gap: 4px;
 

package/src/components/Panel/ListPanel/index.tsx

@@ -36,7 +36,7 @@ interface TableTools {
 }
 
 export interface ListPanelTabelProps extends Omit<TableProps, "title"> {
-  /** 透传给内部 Table 的 key，用于在异构列集切换时强制重挂载表格 */
+  /** Key passed through to the inner Table, used to force-remount the table when switching between heterogeneous column sets */
   key?: React.Key;
   title?: string;
   buttonGroup?: ButtonProps[];
@@ -77,7 +77,7 @@ export interface ListPanelProps<T extends SearchModeKeys = "Default"> {
   headerTabBarChildren?: ReactNode;
   treeProps?: TreeProps;
   searchProps?: SearchModePropsMap[T];
-  /** Search 组件模式：default-基础 | Advanced-高级筛选 | Collapsible-可折叠 | WithFilter-带筛选器 | WithMore-带更多项 | Card-卡片式 */
+  /** Search component mode: default-basic | Advanced-advanced filtering | Collapsible-collapsible | WithFilter-with filter | WithMore-with more items | Card-card style */
   searchMode?: T;
   tableProps?: ListPanelTabelProps;
   hasPermi?: string[];
@@ -129,8 +129,8 @@ const ListPanel: ListPanelFC = (props) => {
     tableContainerClassName,
     tips,
     otherTool,
-    // 异构列集切换时用于强制重挂载表格的 key；显式提取，避免随 ...tableConfig
-    // 展开进 JSX 触发 React "key prop being spread" 警告
+    // Key used to force-remount the table when switching between heterogeneous column sets; extracted
+    // explicitly so it is not spread into JSX via ...tableConfig, which triggers React's "key prop being spread" warning
     key: tableInstanceKey,
     ...tableConfig
   } = tableProps;
@@ -291,7 +291,7 @@ const ListPanel: ListPanelFC = (props) => {
     };
   }, [hasHeaderTabBar, legacyHasSelector, searchMode, searchProps]);
 
-  // 根据 searchMode 渲染对应的 Search 组件
+  // Render the matching Search component based on searchMode
   const SearchComponent = useMemo(() => {
     const searchClassName = classNames(searchProps?.className, styles.search);
 

package/src/components/Search/SearchAdvanced/index.module.scss

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

package/src/components/Search/SearchAdvanced/index.tsx

@@ -14,10 +14,10 @@ export interface SearchAdvancedProps extends SearchPropsWithFilter {
 }
 
 /**
- * 高级筛选模式的 Search 组件
- * - 不显示标签（label）
- * - 使用抽屉形式展示更多筛选项
- * - 更适合复杂的筛选场景
+ * Search component in advanced filters mode
+ * - Does not display labels
+ * - Uses a drawer to present additional filter items
+ * - Better suited for complex filtering scenarios
  */
 const SearchAdvanced: React.FC<SearchAdvancedProps> = (props) => {
   const {

package/src/components/Search/SearchCard/_components/OptionRow/ChildrenItems/index.tsx

@@ -15,21 +15,21 @@ interface ChildrenItemsProps {
 export const ChildrenItems: React.FC<ChildrenItemsProps> = memo((props) => {
   const { parentItem, option, value, setValue } = props;
 
-  // 子项的名称，默认使用父项的name加上Children后缀
+  // Name of the child items; defaults to the parent item's name with a "Children" suffix
   const childrenName = useMemo(
     () => `${parentItem.name || option.name}Children`,
     [parentItem.name, option.name]
   );
 
-  // 判断子项是否支持多选
+  // Determine whether child items support multi-select
   const isChildrenMultiple = !!parentItem.childrenMultiple;
 
-  // 优化：缓存子项点击处理函数
+  // Optimization: cache the child item click handler
   const createChildClickHandler = useCallback(
     (childItem: ElementItem) => {
       return () => {
         if (isChildrenMultiple) {
-          // 多选模式：可以同时选择多个子项
+          // Multi-select mode: multiple child items can be selected at once
           const currentValue = (value[childrenName] as unknown[]) || [];
           const newValues = array_is_includes(currentValue, [childItem.value])
             ? currentValue.filter((v) => !Equal.ValEqual(v, childItem.value))
@@ -40,11 +40,11 @@ export const ChildrenItems: React.FC<ChildrenItemsProps> = memo((props) => {
             [childrenName]: newValues,
           };
 
-          // 更新真实返回值
+          // Update the real return value
           updateRealValue(value, option.name, newValue);
           setValue(newValue);
         } else {
-          // 单选模式：一次只能选一个子项
+          // Single-select mode: only one child item can be selected at a time
           const newValue = {
             ...value,
             [childrenName]: Equal.ValEqual(childItem.value, value[childrenName])
@@ -52,7 +52,7 @@ export const ChildrenItems: React.FC<ChildrenItemsProps> = memo((props) => {
               : childItem.value,
           };
 
-          // 更新真实返回值
+          // Update the real return value
           updateRealValue(value, option.name, newValue);
           setValue(newValue);
         }
@@ -68,7 +68,7 @@ export const ChildrenItems: React.FC<ChildrenItemsProps> = memo((props) => {
   return (
     <div className={styles.childrenItems}>
       {parentItem.children?.map((childItem) => {
-        // 判断子项是否被选中
+        // Determine whether the child item is selected
         const isChildSelected = isChildrenMultiple
           ? array_is_includes((value[childrenName] as unknown[]) || [], [
               childItem.value,

package/src/components/Search/SearchCard/_components/OptionRow/Item/index.tsx

@@ -19,54 +19,54 @@ export const Item: React.FC<ItemProps> = memo((props) => {
   const { item, idx, option, value, setValue } = props;
   const [lastElementValue, setLastElementValue] = useState<unknown>(undefined);
 
-  // 优化：缓存激活状态计算
+  // Optimization: cache the active state calculation
   const isActive = useMemo(() => {
     return option.multiple
       ? array_is_includes((value[option.name] as unknown[]) || [], [item.value])
       : value?.[option.name] === item.value;
   }, [option.multiple, option.name, value, item.value]);
 
-  // 优化：缓存点击处理函数
+  // Optimization: cache the click handler
   const handleClick = useCallback(() => {
     try {
       if (option.multiple) {
         const currentValue = (value[option.name] as unknown[]) || [];
-        // 检查是否之前已选中
+        // Check whether it was previously selected
         const wasSelected = array_is_includes(currentValue, [item.value]);
         const newValues = wasSelected
           ? currentValue.filter((v) => !Equal.ValEqual(v, item.value))
           : [...currentValue, item.value];
 
-        // 准备新的值对象
+        // Prepare the new value object
         const newValue: Record<string, unknown> = {
           ...value,
           [option.name]: newValues,
         };
 
-        // 如果取消选中且有子项，清除子项的选择
+        // If deselected and it has children, clear the children's selection
         const hasChildren = item.children && item.children.length > 0;
         if (wasSelected && hasChildren) {
           const childrenName = `${item.name || option.name}Children`;
           newValue[childrenName] = item.childrenMultiple ? [] : "";
         }
 
-        // 更新真实返回值
+        // Update the real return value
         updateRealValue(value, option.name, newValue);
 
         setValue(newValue);
       } else {
-        // 检查是否之前已选中
+        // Check whether it was previously selected
         const wasSelected = Equal.ValEqual(item.value, value[option.name]);
 
-        // 准备新的值对象
+        // Prepare the new value object
         const newValue: Record<string, unknown> = {
           ...value,
           [option.name]: wasSelected ? "" : item.value,
         };
 
-        // 清除所有子项的选择状态
+        // Clear the selection state of all child items
         if (!wasSelected) {
-          // 清除所有子项选择状态
+          // Clear all child item selection states
           option.items?.forEach((parentItem) => {
             if (parentItem.children && parentItem.children.length > 0) {
               const parentChildrenName = `${
@@ -79,7 +79,7 @@ export const Item: React.FC<ItemProps> = memo((props) => {
           });
         }
 
-        // 更新真实返回值
+        // Update the real return value
         updateRealValue(value, option.name, newValue);
 
         setValue(newValue);
@@ -117,7 +117,7 @@ export const Item: React.FC<ItemProps> = memo((props) => {
               [name ?? option.name]: e ? [...currentValue, e] : currentValue,
             };
 
-            // 更新真实返回值
+            // Update the real return value
             updateRealValue(value, option.name, newValue);
 
             setValue(newValue);
@@ -128,7 +128,7 @@ export const Item: React.FC<ItemProps> = memo((props) => {
               [name ?? option.name]: e ?? "",
             };
 
-            // 更新真实返回值
+            // Update the real return value
             updateRealValue(value, option.name, newValue);
 
             setValue(newValue);

package/src/components/Search/SearchCard/_components/OptionRow/index.tsx

@@ -67,7 +67,7 @@ const OptionRow: React.FC<OptionRowProps> = memo((props) => {
   const labelRef = useRef<HTMLSpanElement>(null);
   const [labelWidth, setLabelWidth] = useState(0);
 
-  // 测量标签宽度
+  // Measure the label width
   useEffect(() => {
     if (labelRef.current) {
       const width = labelRef.current.offsetWidth;
@@ -83,11 +83,11 @@ const OptionRow: React.FC<OptionRowProps> = memo((props) => {
     gap
   );
 
-  // 优化：缓存过滤后的子项
+  // Optimization: cache the filtered child items
   const filteredChildrenItems = useMemo(() => {
     return option.items.filter(
       (item) =>
-        // 过滤条件：1. 有子项 2. 父项被选中
+        // Filter criteria: 1. has children 2. the parent item is selected
         item.children &&
         item.children.length > 0 &&
         (option.multiple
@@ -98,11 +98,11 @@ const OptionRow: React.FC<OptionRowProps> = memo((props) => {
     );
   }, [option.items, option.multiple, option.name, value]);
 
-  // 优化：缓存"全部"按钮点击处理函数
+  // Optimization: cache the "All" button click handler
   const handleAllClick = useCallback(() => {
     const newValue = { ...value, [option.name]: "" };
 
-    // 清除所有子项的选择
+    // Clear the selection of all child items
     option.items?.forEach((parentItem) => {
       if (parentItem.children && parentItem.children.length > 0) {
         const parentChildrenName = `${parentItem.name || option.name}Children`;
@@ -110,13 +110,13 @@ const OptionRow: React.FC<OptionRowProps> = memo((props) => {
       }
     });
 
-    // 设置Real值为空
+    // Set the Real value to empty
     newValue[`${option.name}Real`] = "";
 
     setValue(newValue);
   }, [value, option, setValue]);
 
-  // 优化：缓存"更多"按钮点击处理函数
+  // Optimization: cache the "More" button click handler
   const handleMoreClick = useCallback(() => {
     const newShowMore = {
       ...showMore,
@@ -125,7 +125,7 @@ const OptionRow: React.FC<OptionRowProps> = memo((props) => {
     setShowMore(newShowMore);
   }, [showMore, option.name, setShowMore]);
 
-  // 优化：缓存"全部"按钮的激活状态
+  // Optimization: cache the active state of the "All" button
   const isAllActive = useMemo(() => {
     return option.multiple
       ? !((value[option.name] as unknown[]) || []).length
@@ -180,7 +180,7 @@ const OptionRow: React.FC<OptionRowProps> = memo((props) => {
         )}
       </div>
 
-      {/* 渲染所有有子项的父项的子项选项 */}
+      {/* Render the child options of every parent item that has children */}
       {filteredChildrenItems?.map((item, idx) => (
         <div
           key={`${String(item.value)}-children-${idx}`}

package/src/components/Search/SearchCard/_hooks/useSearchCardCollapse.ts

@@ -5,7 +5,7 @@ interface UseSearchCardCollapseProps {
 }
 
 /**
- * 管理 SearchCard 的折叠状态
+ * Manages the collapse state of SearchCard
  */
 export function useSearchCardCollapse({
   defaultCollapse = false,

package/src/components/Search/SearchCard/_hooks/useSearchCardMoreOptions.ts

@@ -3,21 +3,21 @@ import { useEffect, useState, RefObject, useCallback } from "react";
 import { createRoot } from "react-dom/client";
 import { ElementItem, Font, SearchCardOption } from "../_components/OptionRow";
 
-// 优化：缓存测量结果
+// Optimization: cache measurement results
 const measurementCache = new Map<string, number>();
 
 function directMeasureWidth(element: React.ReactElement): Promise<number> {
-  // 尝试从缓存获取
+  // Try to get from the cache
   const cacheKey = JSON.stringify(element.props);
   if (measurementCache.has(cacheKey)) {
     return Promise.resolve(measurementCache.get(cacheKey)!);
   }
 
   return new Promise((resolve) => {
-    // 创建隐藏容器
+    // Create a hidden container
     const container = document.createElement("div");
 
-    // 设置样式使其不可见但能正确计算尺寸
+    // Set styles so it is invisible but its size can be computed correctly
     Object.assign(container.style, {
       position: "absolute",
       visibility: "hidden",
@@ -30,27 +30,27 @@ function directMeasureWidth(element: React.ReactElement): Promise<number> {
 
     document.body.appendChild(container);
 
-    // 创建根并渲染
+    // Create a root and render
     const root = createRoot(container);
 
     try {
-      // 直接渲染元素
+      // Render the element directly
       root.render(element);
 
-      // 等待渲染完成
+      // Wait for rendering to finish
       setTimeout(() => {
         try {
-          // 获取容器中第一个子元素的宽度
+          // Get the width of the first child element in the container
           const width = container.clientWidth || 0;
 
-          // 缓存结果
+          // Cache the result
           measurementCache.set(cacheKey, width);
           resolve(width);
         } catch {
           resolve(0);
         }
 
-        // 清理
+        // Clean up
         try {
           root.unmount();
           if (document.body.contains(container)) {
@@ -63,7 +63,7 @@ function directMeasureWidth(element: React.ReactElement): Promise<number> {
     } catch {
       resolve(0);
 
-      // 清理
+      // Clean up
       try {
         if (document.body.contains(container)) {
           document.body.removeChild(container);
@@ -76,7 +76,7 @@ function directMeasureWidth(element: React.ReactElement): Promise<number> {
 }
 
 /**
- * 自定义Hook，用于计算需要显示"更多"按钮的选项
+ * Custom hook that computes which options need to display the "More" button
  */
 export function useSearchCardMoreOptions(
   containerRef: RefObject<HTMLDivElement>,
@@ -91,7 +91,7 @@ export function useSearchCardMoreOptions(
 ) {
   const [showMore, setShowMore] = useState<Record<string, boolean>>({});
 
-  // 优化：缓存计算函数
+  // Optimization: cache the calculation function
   const calculateMoreOptions = useCallback(async () => {
     if (containerRef.current) {
       const div = containerRef.current;
@@ -162,7 +162,7 @@ export function useSearchCardMoreOptions(
   useEffect(() => {
     calculateMoreOptions();
 
-    // 添加窗口大小调整监听器
+    // Add a window resize listener
     window.addEventListener("resize", calculateMoreOptions);
 
     return () => {