@hsu-react/ui 0.0.13 → 0.0.14

package/src/components/Search/_hooks/useSearchCommon.ts

@@ -77,7 +77,7 @@ export interface UseSearchCommonReturn {
 }
 
 /**
- * 提取所有 Search 组件的通用逻辑
+ * Extracts the common logic shared by all Search components
  */
 export const useSearchCommon = (
   params: UseSearchCommonParams,
@@ -109,23 +109,23 @@ export const useSearchCommon = (
   const buttonGroupRef = useRef<HTMLDivElement>(null);
   const cls = useMemo(() => generateRandomStr(10), []);
 
-  // 提取可见搜索项
+  // Extract visible search items
   const visibleSearchItems = useMemo(() => {
     return processedSearchItems.filter((item) => item.visible !== false);
   }, [processedSearchItems]);
 
-  // 提取可见的更多搜索项
+  // Extract visible "more" search items
   const visibleMoreSearchItems = 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 = useAdaptiveColumnNum(
     containerRef,
     baseTotalColumnNum,
@@ -136,10 +136,10 @@ export const useSearchCommon = (
     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, toggleExpand, visibleItemCount } = useSearchExpand(
     containerRef,
     buttonGroupRef,
@@ -156,14 +156,14 @@ export const useSearchCommon = (
 
   useSearchForm({ form, searchData });
 
-  // 计算当前应该显示的搜索项
+  // Compute the search items that should currently be displayed
   const currentSearchItems = 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: number | undefined;
     let columnWidth: number | undefined;
 
@@ -178,7 +178,7 @@ export const useSearchCommon = (
       columnWidth = result.columnWidth;
     }
 
-    // 否则使用计算函数
+    // Otherwise use the calculation function
     return calculateVisibleItems(
       processedSearchItems,
       expand,
@@ -215,18 +215,18 @@ export const useSearchCommon = (
     });
   }, [form, onSearch]);
 
-  // 检查是否有自定义宽度
+  // Check whether any item has a custom width
   const hasCustomWidth = 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 = useMemo(() => {
     if (hasCustomWidth) {
       return visibleItemCount;
     }
 
-    // 计算按钮组宽度和列宽
+    // Compute button group width and column width
     const { buttonGroupWidth, columnWidth } =
       calculateButtonGroupAndColumnWidth(
         containerRef,
@@ -235,7 +235,7 @@ export const useSearchCommon = (
         columnOffsetWidth,
       );
 
-    // 判断按钮组宽度是否大于列宽，如果是，则显示 实际搜索项数量+1
+    // If the button group is wider than a column, display actual search item count + 1
     if (
       shouldDisplayExtraItem(
         buttonGroupWidth,
@@ -256,9 +256,9 @@ export const useSearchCommon = (
     visibleItemCount,
   ]);
 
-  // 计算是否显示展开按钮
+  // Determine whether to show the expand button
   const showExpandButton = useMemo(() => {
-    // 如果有更多搜索项，显示展开按钮
+    // If there are "more" search items, show the expand button
     if (showAllSearchItems || !!moreSearchItems?.length) {
       if (visibleMoreSearchItems?.length) {
         return true;
@@ -266,11 +266,11 @@ export const useSearchCommon = (
       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,
@@ -282,7 +282,7 @@ export const useSearchCommon = (
     visibleItemCount,
   ]);
 
-  // 检查按钮组是否有权限的按钮
+  // Check whether the button group contains any permitted button
   const hasPermittedButtons = useCallback(
     (buttonGroup?: ChakraButtonProps[]) => {
       if (!buttonGroup?.length) return false;
@@ -292,7 +292,7 @@ export const useSearchCommon = (
     [checkPermission],
   );
 
-  // 权限和内容检查
+  // Permission and content check
   const shouldRender = useMemo(() => {
     return Boolean(
       hasPermittedButtons(beforeButtonGroup) ||

package/src/components/Search/_hooks/useSearchExpand.ts

@@ -3,18 +3,18 @@ import { FormItemProps } from "../../FormItem";
 import { measureButtonGroupWidth } from "../_utils";
 
 /**
- * 基于宽度自适应控制展开/收起的Hook
- * @param containerRef 容器引用
- * @param buttonGroupRef 按钮组引用
- * @param itemClassName 搜索项的className
- * @param itemCount 搜索项总数
- * @param columnNum 列数
- * @param autoAdaptWidth 是否启用自适应宽度
- * @param defaultExpanded 默认是否展开
- * @param onExpandChange 展开状态变化回调
- * @param searchItems 搜索项配置数组（可选）
- * @param showAllSearchItems 是否显示所有搜索项
- * @returns 展开状态及控制方法
+ * Hook that controls expand/collapse adaptively based on width
+ * @param containerRef Container ref
+ * @param buttonGroupRef Button group ref
+ * @param itemClassName className of the search items
+ * @param itemCount Total number of search items
+ * @param columnNum Column count
+ * @param autoAdaptWidth Whether adaptive width is enabled
+ * @param defaultExpanded Whether expanded by default
+ * @param onExpandChange Callback when expand state changes
+ * @param searchItems Search item config array (optional)
+ * @param showAllSearchItems Whether to show all search items
+ * @returns Expand state and control methods
  */
 export function useSearchExpand(
   containerRef: React.RefObject<HTMLDivElement>,
@@ -43,41 +43,41 @@ export function useSearchExpand(
       if (!containerRef.current || !buttonGroupRef.current) return;
 
       const containerWidth = container.offsetWidth;
-      // 减去padding
+      // Subtract padding
       const availableWidth = containerWidth - 30; // 15px padding on each side
 
-      // 获取按钮组的实际宽度（计算所有子元素宽度总和）
+      // Get the actual width of the button group (sum of all child element widths)
       const buttonGroupWidth =
         measureButtonGroupWidth(buttonGroupRef.current) ?? 0;
 
-      // 获取所有搜索项元素
+      // Get all search item elements
       const items = container.querySelectorAll(`${itemClassName}`);
 
-      // 计算第一行能放下的搜索项数量
+      // Compute how many search items fit in the first row
       let count = 0;
       let usedWidth = 0;
-      const gap = 10; // 项之间的间距
+      const gap = 10; // Gap between items
 
-      // 计算默认单个项的宽度（容器宽度除以列数）
+      // Compute the default width of a single item (container width divided by column count)
       const defaultItemWidth =
         (availableWidth - (columnNum - 1) * gap) / columnNum -
         columnOffsetWidth;
 
-      // 遍历所有搜索项（包括未渲染的）
+      // Iterate over all search items (including unrendered ones)
       for (let i = 0; i < itemCount; i++) {
         let itemWidth = 0;
 
-        // 如果DOM中有这个item，使用实际宽度
+        // If this item exists in the DOM, use its actual width
         if (i < items.length) {
           const item = items[i] as HTMLElement;
           itemWidth = item.offsetWidth;
         } else if (searchItems && searchItems[i]?.width !== undefined) {
-          // 如果DOM中没有，但有设置宽度，使用设置的宽度
+          // If not in the DOM but a width is configured, use the configured width
           const configWidth = searchItems[i].width;
           if (typeof configWidth === "number") {
             itemWidth = configWidth;
           } else if (typeof configWidth === "string") {
-            // 处理百分比或像素值
+            // Handle percentage or pixel values
             if (configWidth.endsWith("%")) {
               const percent = parseFloat(configWidth) / 100;
               itemWidth = availableWidth * percent;
@@ -86,14 +86,14 @@ export function useSearchExpand(
             }
           }
         } else {
-          // 如果DOM中没有且没有设置宽度，使用默认计算宽度
+          // If not in the DOM and no width is configured, use the default computed width
           itemWidth = defaultItemWidth;
         }
 
-        // 计算加上当前项后的总宽度（包括gap）
+        // Compute the total width after adding the current item (including gap)
         const nextWidth = usedWidth + itemWidth + (i > 0 ? gap : 0);
 
-        // 检查是否还能放下按钮组（需要预留gap和按钮组宽度）
+        // Check whether the button group still fits (must reserve the gap and the button group width)
         if (nextWidth + gap + buttonGroupWidth <= availableWidth) {
           count++;
           usedWidth = nextWidth;
@@ -102,26 +102,26 @@ export function useSearchExpand(
         }
       }
 
-      // 至少显示1个搜索项
+      // Show at least 1 search item
       count = Math.max(1, count);
       setVisibleItemCount(count);
 
-      // 如果所有项都能显示，则不需要展开
+      // If all items can be displayed, expanding is not needed
       if (count >= itemCount) {
         setExpand(false);
       }
     };
 
     const resizeObserver = new ResizeObserver(() => {
-      // 使用 requestAnimationFrame 延迟到下一帧，确保DOM已更新
+      // Use requestAnimationFrame to defer to the next frame, ensuring the DOM has updated
       requestAnimationFrame(() => {
         calculateVisibleItems();
       });
     });
 
-    // MutationObserver 监听DOM变化
+    // MutationObserver watches for DOM changes
     const mutationObserver = new MutationObserver(() => {
-      // 使用 requestAnimationFrame 延迟到下一帧
+      // Use requestAnimationFrame to defer to the next frame
       requestAnimationFrame(() => {
         calculateVisibleItems();
       });
@@ -135,7 +135,7 @@ export function useSearchExpand(
       attributeFilter: ["class", "style"],
     });
 
-    // 监听窗口大小变化
+    // Listen for window resize
     const handleWindowResize = () => {
       requestAnimationFrame(() => {
         calculateVisibleItems();
@@ -143,7 +143,7 @@ export function useSearchExpand(
     };
     window.addEventListener("resize", handleWindowResize);
 
-    // 初始计算（延迟执行以确保DOM已渲染）
+    // Initial calculation (deferred to ensure the DOM has rendered)
     requestAnimationFrame(() => {
       calculateVisibleItems();
     });

package/src/components/Search/_hooks/useSearchForm.ts

@@ -8,7 +8,7 @@ interface UseSearchFormProps {
 }
 
 /**
- * 管理搜索表单数据
+ * Manages search form data
  */
 export function useSearchForm({ form, searchData }: UseSearchFormProps) {
   useEffect(() => {

package/src/components/Search/_hooks/useSearchItems.ts

@@ -2,11 +2,12 @@ import { useCallback, useMemo, useState } from "react";
 import { FormItemProps } from "../../FormItem";
 
 /**
- * 管理搜索项状态
+ * Manages search item state
  *
- * 通过 useMemo 直接从入参派生，仅把用户在 FilterDropdown 里手动切换的
- * visible 覆盖保存为 state；避免 useEffect 镜像 prop 时因为父组件传入
- * 新数组引用而反复 setState，从而触发 Maximum update depth 循环。
+ * Derives directly from the input via useMemo, storing only the visible
+ * overrides the user manually toggles in FilterDropdown as state; this avoids
+ * repeated setState when a useEffect mirrors the prop and the parent passes a
+ * new array reference, which would trigger a Maximum update depth loop.
  */
 export function useSearchItems(searchItems: FormItemProps[]) {
   const [visibilityOverrides, setVisibilityOverrides] = useState<

package/src/components/Search/_types/index.ts

@@ -4,7 +4,7 @@ import { FormItemProps } from "../../FormItem";
 import { ChakraButtonProps } from "../../Button";
 
 /**
- * Search 组件的基础属性接口
+ * Base props interface for the Search component
  */
 export interface BaseSearchProps {
   searchItems?: FormItemProps[];
@@ -14,19 +14,19 @@ export interface BaseSearchProps {
   className?: string;
   externalForm?: FormInstance;
   hasPermi?: string[];
-  /** 搜索项列数（不包括按钮组，总列数为 columnNum + 1） */
+  /** Search item column count (excluding the button group; total column count is columnNum + 1) */
   columnNum?: number;
   beforeButtonGroup?: ChakraButtonProps[];
   affterButtonGroup?: ChakraButtonProps[];
   searchData?: Record<string, unknown>;
   minLabelWidth?: boolean | number;
-  /** 默认是否展开 */
+  /** Whether expanded by default */
   defaultExpanded?: boolean;
-  /** 展开状态变化时的回调 */
+  /** Callback when the expand state changes */
   onExpandChange?: (expand: boolean) => void;
-  /** 是否启用基于宽度的自适应布局（默认显示一行包括按钮） */
+  /** Whether to enable width-based adaptive layout (by default shows one row including buttons) */
   autoAdaptWidth?: boolean;
-  /** 自适应布局的基准宽度（默认1200px） */
+  /** Base width for adaptive layout (default 1200px) */
   baseWidth?: number;
   onValuesChange?: (
     value: Record<string, unknown>,
@@ -34,20 +34,20 @@ export interface BaseSearchProps {
   ) => void;
   searchDisabled?: boolean;
   showAllSearchItems?: boolean;
-  /** 查询按钮文本 */
+  /** Search button text */
   searchText?: ReactNode;
-  /** 重置按钮文本 */
+  /** Reset button text */
   resetText?: ReactNode;
-  /** 列偏移宽度，用于调整列宽计算（默认 0） */
+  /** Column offset width, used to adjust column width calculation (default 0) */
   columnOffsetWidth?: number;
 }
 
 /**
- * 带筛选器的 Search 组件属性接口
+ * Props interface for the Search component with filter
  */
 export interface SearchPropsWithFilter extends BaseSearchProps {
-  /** 是否显示筛选器 */
+  /** Whether to show the filter */
   setFilter?: boolean;
-  /** FilterDropdown 勾选项变化时的回调 */
+  /** Callback when checked items change in FilterDropdown */
   onFilterChange?: (items: FormItemProps[]) => void;
 }

package/src/components/Search/_utils/calculateButtonGroupAndColumnWidth.ts

@@ -2,12 +2,12 @@ import { RefObject } from "react";
 import { measureButtonGroupWidth } from "./measureButtonGroupWidth";
 
 /**
- * 计算按钮组宽度和列宽
- * @param containerRef 容器引用
- * @param buttonGroupRef 按钮组引用
- * @param adaptiveColumnNum 自适应列数
- * @param columnOffsetWidth 列偏移宽度（默认 0）
- * @returns 按钮组宽度和列宽
+ * Computes the button group width and column width
+ * @param containerRef Container ref
+ * @param buttonGroupRef Button group ref
+ * @param adaptiveColumnNum Adaptive column count
+ * @param columnOffsetWidth Column offset width (default 0)
+ * @returns Button group width and column width
  */
 export function calculateButtonGroupAndColumnWidth(
   containerRef: RefObject<HTMLDivElement>,
@@ -23,13 +23,13 @@ export function calculateButtonGroupAndColumnWidth(
 
   if (containerRef.current && buttonGroupRef.current) {
     const containerWidth = containerRef.current.offsetWidth;
-    const availableWidth = containerWidth - 30; // 减去padding
-    const gap = 10; // 项之间的间距
+    const availableWidth = containerWidth - 30; // Subtract padding
+    const gap = 10; // Gap between items
 
-    // 计算按钮组宽度
+    // Compute the button group width
     buttonGroupWidth = measureButtonGroupWidth(buttonGroupRef.current);
 
-    // 计算列宽（单个搜索项的默认宽度）
+    // Compute the column width (default width of a single search item)
     if (adaptiveColumnNum > 0) {
       columnWidth =
         availableWidth -

package/src/components/Search/_utils/calculateVisibleItems.ts

@@ -2,15 +2,15 @@ import { FormItemProps } from "../../FormItem";
 import { shouldDisplayExtraItem } from "./shouldDisplayExtraItem";
 
 /**
- * 计算当前应该显示的搜索项
- * @param searchItems 所有搜索项
- * @param expand 是否展开
- * @param columnNum 列数
- * @param visibleItemCount 可见项数量（自适应宽度时使用）
- * @param autoAdaptWidth 是否启用自适应宽度
- * @param buttonGroupWidth 按钮组宽度（可选）
- * @param columnWidth 列宽（可选）
- * @returns 当前应该显示的搜索项
+ * Computes the search items that should currently be displayed
+ * @param searchItems All search items
+ * @param expand Whether expanded
+ * @param columnNum Column count
+ * @param visibleItemCount Visible item count (used with adaptive width)
+ * @param autoAdaptWidth Whether adaptive width is enabled
+ * @param buttonGroupWidth Button group width (optional)
+ * @param columnWidth Column width (optional)
+ * @returns The search items that should currently be displayed
  */
 export function calculateVisibleItems(
   searchItems: FormItemProps[],
@@ -25,14 +25,14 @@ export function calculateVisibleItems(
   const hasCustomWidth = searchItems.some((item) => item.width !== undefined);
 
   if (!expand) {
-    // 当有自定义宽度时，使用自适应计算
+    // When there are custom widths, use adaptive calculation
     if (hasCustomWidth && autoAdaptWidth) {
       if (visibleItems.length > visibleItemCount) {
         return visibleItems.slice(0, visibleItemCount);
       }
     } else if (!hasCustomWidth) {
-      // 没有自定义宽度时，使用 columnNum（实际搜索项数量）
-      // 判断按钮组宽度是否大于列宽，如果是，则显示 实际搜索项数量+1
+      // Without custom widths, use columnNum (actual search item count)
+      // If the button group is wider than a column, display actual search item count + 1
       const displayCount = shouldDisplayExtraItem(
         buttonGroupWidth,
         columnWidth,

package/src/components/Search/_utils/cleanSearchData.ts

@@ -1,7 +1,7 @@
 /**
- * 清理搜索数据，移除 undefined 值
- * @param data 原始搜索数据
- * @returns 清理后的搜索数据
+ * Cleans search data by removing undefined values
+ * @param data Raw search data
+ * @returns Cleaned search data
  */
 export function cleanSearchData<T = Record<string, unknown>>(
   data: Record<string, unknown>

package/src/components/Search/_utils/measureButtonGroupWidth.ts

@@ -1,7 +1,7 @@
 /**
- * 计算按钮组的实际宽度（所有子元素宽度总和 + 子元素间距）
- * @param buttonGroupEl 按钮组元素
- * @returns 按钮组宽度；无子元素时返回 undefined
+ * Computes the actual width of the button group (sum of all child element widths + gaps between children)
+ * @param buttonGroupEl Button group element
+ * @returns Button group width; undefined when there are no children
  */
 export function measureButtonGroupWidth(
   buttonGroupEl: HTMLElement | null
@@ -15,7 +15,7 @@ export function measureButtonGroupWidth(
   buttonChildren.forEach((child) => {
     totalWidth += (child as HTMLElement).offsetWidth;
   });
-  // 加上子元素之间的间距
+  // Add the gaps between child elements
   const childGap = 5;
   totalWidth += (buttonChildren.length - 1) * childGap;
 

package/src/components/Search/_utils/shouldDisplayExtraItem.ts

@@ -1,12 +1,12 @@
 /**
- * 判断收起状态下是否应多显示一个搜索项
+ * Determines whether one extra search item should be displayed in collapsed state
  *
- * 规则：按钮组宽度大于列宽（按钮组独占更宽空间，首行有富余）；
- * 或按钮组宽度小于列宽且可见项刚好比列数多 1（此时收起只会藏起 1 项，不如直接放下）。
- * @param buttonGroupWidth 按钮组宽度
- * @param columnWidth 列宽
- * @param columnNum 搜索项列数（不含按钮组）
- * @param visibleCount 可见搜索项总数
+ * Rules: the button group is wider than a column (the button group takes up more space on its own, leaving spare room in the first row);
+ * or the button group is narrower than a column and the visible items exceed the column count by exactly 1 (collapsing would only hide 1 item, so it's better to just fit it in).
+ * @param buttonGroupWidth Button group width
+ * @param columnWidth Column width
+ * @param columnNum Search item column count (excluding the button group)
+ * @param visibleCount Total number of visible search items
  */
 export function shouldDisplayExtraItem(
   buttonGroupWidth: number | undefined,

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

@@ -8,7 +8,7 @@
   width: 100%;
   padding: 14px 16px;
 
-  // CF 风格：描边白卡片（随外观切换），去投影
+  // CF style: outlined white card (follows appearance switching), no shadow
   background: var(--cf-surface);
 
   border-radius: 8px;

package/src/components/Search/index.tsx

@@ -21,12 +21,12 @@ interface SearchFC extends React.FC<SearchProps> {
   WithMore: typeof SearchWithMore;
 }
 
-// 导出所有可用的 Search 模式键名
+// Export all available Search mode key names
 export type SearchModeKeys =
   | "Default"
   | keyof Omit<SearchFC, keyof React.FC<SearchProps>>;
 
-// 导出 Search 模式映射类型
+// Export the Search mode props mapping type
 export type SearchModePropsMap = {
   Default: SearchProps;
   Card: React.ComponentProps<SearchFC["Card"]>;
@@ -37,8 +37,8 @@ export type SearchModePropsMap = {
 };
 
 /**
- * 基础 Search 组件
- * - 标准的搜索表单布局，自适应列数与展开/收起
+ * Base Search component
+ * - Standard search form layout with adaptive column count and expand/collapse
  */
 const Search: SearchFC = (props) => {
   return <SearchBase {...props} />;

package/src/components/SecondConf/index.module.scss

@@ -13,7 +13,7 @@
 
     .icon {
       font-size: 50px;
-      color: #ff9900;
+      color: var(--cf-warning);
     }
 
     .content {

package/src/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/src/components/Select/AutoCompleteSelect/index.tsx

@@ -84,7 +84,7 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
       })
     : autoCompleteWidth;
 
-  // 转换 options 格式为 AutoComplete 需要的格式
+  // Convert options into the format AutoComplete requires
   const autoCompleteOptions = useMemo(() => {
     return options?.map((option) => {
       const { label, value, disabled, ...rest } = option;
@@ -97,16 +97,16 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
     });
   }, [options]);
 
-  // 处理 filterOption
+  // Handle filterOption
   const handleFilterOption = useMemo(() => {
-    // 如果提供了自定义 filterOption，优先使用
+    // If a custom filterOption is provided, use it first
     if (customFilterOption) {
       return (inputValue: string, option?: AutoCompleteOption) => {
         return customFilterOption(inputValue, option);
       };
     }
 
-    // 默认过滤逻辑：不区分大小写的包含匹配
+    // Default filtering logic: case-insensitive substring match
     return (inputValue: string, option?: AutoCompleteOption): boolean => {
       if (!isComposing && option) {
         const searchText = inputValue.toUpperCase();

package/src/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);
       }
     }
   }