@hsu-react/ui 0.0.8 → 0.0.10

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

@@ -1,15 +1,7 @@
 import React from "react";
-import { Form as AntdForm } from "antd";
-import FormItem, { FormItemProps } from "../../FormItem";
-import { CSSProperties } from "react";
-import classNames from "classnames";
-import styles from "../index.module.scss";
-import { useSearchCommon } from "../_hooks";
+import { FormItemProps } from "../../FormItem";
+import SearchBase from "../_components/SearchBase";
 import { ChakraButtonProps } from "../../Button";
-import { ButtonGroup } from "../_components/ButtonGroup";
-import { SearchButtons } from "../_components/SearchButtons";
-import { FilterDropdown } from "../_components/FilterDropdown";
-import { ExpandButton } from "../_components/ExpandButton";
 import { SearchPropsWithFilter } from "../_types";
 
 export interface SearchWithMoreProps
@@ -26,159 +18,15 @@ export interface SearchWithMoreProps
  * - 适合有大量搜索字段的场景
  */
 const SearchWithMore: React.FC<SearchWithMoreProps> = (props) => {
-  const {
-    searchItems = [],
-    moreSearchItems,
-    className,
-    onSearch,
-    onReset,
-    externalForm,
-    hasPermi,
-    columnNum = 4,
-    beforeButtonGroup,
-    affterButtonGroup,
-    searchData,
-    setFilter,
-    minLabelWidth,
-    defaultExpanded = false,
-    onExpandChange,
-    autoAdaptWidth = true,
-    baseWidth,
-    onValuesChange,
-    searchDisabled = false,
-    searchText,
-    resetText,
-    onFilterChange,
-    columnOffsetWidth = 0,
-  } = props;
-
-  const [form] = AntdForm.useForm(externalForm);
-
-  const {
-    containerRef,
-    buttonGroupRef,
-    cls,
-    getLabelWidth,
-    processedSearchItems,
-    setSearchItems,
-    currentSearchItems,
-    totalColumnNum,
-    expand,
-    toggleExpand,
-    showExpandButton,
-    onSearchClick,
-    onResetClick,
-    shouldRender,
-    permitted,
-  } = useSearchCommon({
-    form,
-    searchItems,
-    moreSearchItems,
-    searchData,
-    hasPermi,
-    beforeButtonGroup,
-    affterButtonGroup,
-    columnNum,
-    autoAdaptWidth,
-    defaultExpanded,
-    onExpandChange,
-    showAllSearchItems: true, // SearchWithMore 始终显示所有搜索项
-    minLabelWidth,
-    baseWidth,
-    onSearch,
-    onReset,
-    columnOffsetWidth,
-  });
-
-  if (!shouldRender) {
-    return null;
-  }
+  const { setFilter, ...rest } = props;
 
   return (
-    <div
-      ref={containerRef}
-      className={classNames(styles.Search, className)}
-      style={
-        {
-          "--column-number": totalColumnNum,
-          "--column-offset-width": `${columnOffsetWidth}px`,
-        } as CSSProperties
-      }
-    >
-      <div
-        className={classNames(styles.searchOption, styles[expand.toString()])}
-      >
-        <AntdForm
-          form={form}
-          className={classNames(styles.option, cls)}
-          onValuesChange={onValuesChange}
-        >
-          {permitted &&
-            currentSearchItems?.map((item, idx) => {
-              // 计算同一列的项（用于计算标签宽度）
-              const visibleCurrentItems = currentSearchItems.filter(
-                (i) => i.visible !== false
-              );
-              const columnIndex = idx % totalColumnNum;
-              const sameColumnItems = visibleCurrentItems.filter(
-                (_, _idx) => _idx % totalColumnNum === columnIndex
-              );
-
-              return (
-                <FormItem
-                  {...item}
-                  key={item.name}
-                  className={classNames(styles.item, item.className, {
-                    [styles.unFill]: item.width !== undefined,
-                  })}
-                  labelWidth={
-                    item.width !== undefined
-                      ? undefined
-                      : getLabelWidth(sameColumnItems, undefined, minLabelWidth)
-                  }
-                />
-              );
-            })}
-          {(beforeButtonGroup?.length ||
-            affterButtonGroup?.length ||
-            permitted) && (
-            <ButtonGroup
-              beforeButtonGroup={beforeButtonGroup}
-              affterButtonGroup={affterButtonGroup}
-              expandButton={
-                <ExpandButton
-                  expand={expand}
-                  toggleExpand={toggleExpand}
-                  advancedFilters={false}
-                  showExpandButton={showExpandButton}
-                  showAllSearchItems={true}
-                />
-              }
-              permitted={permitted}
-              ref={buttonGroupRef}
-            >
-              {currentSearchItems.length > 0 && (
-                <SearchButtons
-                  onSearch={onSearchClick}
-                  onReset={onResetClick}
-                  searchDisabled={searchDisabled}
-                  searchText={searchText}
-                  resetText={resetText}
-                />
-              )}
-              {setFilter && (
-                <FilterDropdown
-                  searchItems={processedSearchItems}
-                  originalSearchItems={searchItems}
-                  setSearchItems={setSearchItems}
-                  onFilterChange={onFilterChange}
-                />
-              )}
-            </ButtonGroup>
-          )}
-        </AntdForm>
-      </div>
-    </div>
+    <SearchBase
+      {...rest}
+      // SearchWithMore 始终显示所有搜索项
+      showAllSearchItems
+      showFilter={!!setFilter}
+    />
   );
 };
 

package/src/components/Search/_components/FilterDropdown/index.tsx

@@ -22,16 +22,15 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = ({
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
-    document.addEventListener("click", () => {
+    const handleDocumentClick = () => {
       setOpen(false);
-    });
+    };
+    document.addEventListener("click", handleDocumentClick);
 
     return () => {
-      document.removeEventListener("click", () => {
-        setOpen(false);
-      });
+      document.removeEventListener("click", handleDocumentClick);
     };
-  }, [searchItems]);
+  }, []);
 
   return (
     <Dropdown

package/src/components/Search/_components/SearchBase/index.tsx

@@ -0,0 +1,224 @@
+import React, { CSSProperties, ReactNode, useMemo } from "react";
+import { Form as AntdForm, FormInstance } from "antd";
+import classNames from "classnames";
+import FormItem, { FormItemProps } from "../../../FormItem";
+import type useLabelWidth from "../../../../hooks/useLabelWidth";
+import styles from "../../index.module.scss";
+import { useSearchCommon } from "../../_hooks";
+import { ButtonGroup } from "../ButtonGroup";
+import { SearchButtons } from "../SearchButtons";
+import { ExpandButton } from "../ExpandButton";
+import { FilterDropdown } from "../FilterDropdown";
+import { SearchPropsWithFilter } from "../../_types";
+
+/** 暴露给变体扩展渲染（如高级筛选抽屉）的上下文 */
+export interface SearchBaseContext {
+  form: FormInstance;
+  expand: boolean;
+  setExpand?: (expand: boolean) => void;
+  processedSearchItems: FormItemProps[];
+  getLabelWidth: ReturnType<typeof useLabelWidth>[1];
+  onSearchClick: () => void;
+  onResetClick: () => void;
+}
+
+export interface SearchBaseProps extends SearchPropsWithFilter {
+  /** 高级筛选模式：搜索项不显示 label，展开按钮显示为"高级筛选" */
+  advancedFilters?: boolean;
+  /** 是否渲染 FilterDropdown（筛选器设置下拉） */
+  showFilter?: boolean;
+  /** 表单区域之后、容器之内的附加内容（如折叠开关），仅在有权限时渲染 */
+  afterForm?: ReactNode;
+  /** 容器之外的附加内容（如高级筛选抽屉），仅在有权限时渲染 */
+  renderOutside?: (ctx: SearchBaseContext) => ReactNode;
+}
+
+/**
+ * Search 各变体共享的基础实现：
+ * 表单渲染、列布局、展开/收起、按钮组、权限控制。
+ * 变体只负责自身差异（筛选器、折叠开关、高级筛选抽屉等）。
+ */
+const SearchBase: React.FC<SearchBaseProps> = (props) => {
+  const {
+    searchItems = [],
+    moreSearchItems = [],
+    className,
+    onSearch,
+    onReset,
+    externalForm,
+    hasPermi,
+    columnNum = 4,
+    beforeButtonGroup,
+    affterButtonGroup,
+    searchData,
+    minLabelWidth,
+    defaultExpanded = false,
+    onExpandChange,
+    autoAdaptWidth = true,
+    baseWidth,
+    onValuesChange,
+    searchDisabled = false,
+    showAllSearchItems = false,
+    searchText,
+    resetText,
+    onFilterChange,
+    columnOffsetWidth = 0,
+    advancedFilters = false,
+    showFilter = false,
+    afterForm,
+    renderOutside,
+  } = props;
+
+  const [form] = AntdForm.useForm(externalForm);
+
+  const {
+    containerRef,
+    buttonGroupRef,
+    cls,
+    getLabelWidth,
+    processedSearchItems,
+    setSearchItems,
+    currentSearchItems,
+    totalColumnNum,
+    expand,
+    setExpand,
+    toggleExpand,
+    showExpandButton,
+    onSearchClick,
+    onResetClick,
+    shouldRender,
+    permitted,
+  } = useSearchCommon({
+    form,
+    searchItems,
+    moreSearchItems,
+    searchData,
+    hasPermi,
+    beforeButtonGroup,
+    affterButtonGroup,
+    columnNum,
+    autoAdaptWidth,
+    defaultExpanded,
+    onExpandChange,
+    showAllSearchItems,
+    minLabelWidth,
+    baseWidth,
+    onSearch,
+    onReset,
+    columnOffsetWidth,
+  });
+
+  // 按列分组预计算（用于对齐同列 label 宽度），避免在 map 中逐项重复 filter
+  const columnGroups = useMemo(() => {
+    const groups: FormItemProps[][] = Array.from(
+      { length: totalColumnNum },
+      () => []
+    );
+    currentSearchItems.forEach((item, idx) => {
+      groups[idx % totalColumnNum].push(item);
+    });
+    return groups;
+  }, [currentSearchItems, totalColumnNum]);
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className={classNames(styles.Search, className)}
+        style={
+          {
+            "--column-number": totalColumnNum,
+            "--column-offset-width": `${columnOffsetWidth}px`,
+          } as CSSProperties
+        }
+      >
+        <div
+          className={classNames(styles.searchOption, styles[expand.toString()])}
+        >
+          <AntdForm
+            form={form}
+            className={classNames(styles.option, cls)}
+            onValuesChange={onValuesChange}
+          >
+            {permitted &&
+              currentSearchItems.map((item, idx) => (
+                <FormItem
+                  {...item}
+                  key={item.name}
+                  className={classNames(styles.item, item.className, {
+                    [styles.unFill]: item.width !== undefined,
+                  })}
+                  label={advancedFilters ? undefined : item.label}
+                  labelWidth={
+                    advancedFilters || item.width !== undefined
+                      ? undefined
+                      : getLabelWidth(
+                          columnGroups[idx % totalColumnNum],
+                          undefined,
+                          minLabelWidth
+                        )
+                  }
+                />
+              ))}
+            {(beforeButtonGroup?.length ||
+              affterButtonGroup?.length ||
+              permitted) && (
+              <ButtonGroup
+                beforeButtonGroup={beforeButtonGroup}
+                affterButtonGroup={affterButtonGroup}
+                expandButton={
+                  <ExpandButton
+                    expand={expand}
+                    toggleExpand={toggleExpand}
+                    advancedFilters={advancedFilters}
+                    showExpandButton={showExpandButton}
+                    showAllSearchItems={
+                      showAllSearchItems || !!moreSearchItems?.length
+                    }
+                  />
+                }
+                permitted={permitted}
+                ref={buttonGroupRef}
+              >
+                {currentSearchItems.length > 0 && (
+                  <SearchButtons
+                    onSearch={onSearchClick}
+                    onReset={onResetClick}
+                    searchDisabled={searchDisabled}
+                    searchText={searchText}
+                    resetText={resetText}
+                  />
+                )}
+                {showFilter && (
+                  <FilterDropdown
+                    searchItems={processedSearchItems}
+                    originalSearchItems={searchItems}
+                    setSearchItems={setSearchItems}
+                    onFilterChange={onFilterChange}
+                  />
+                )}
+              </ButtonGroup>
+            )}
+          </AntdForm>
+        </div>
+        {permitted && afterForm}
+      </div>
+      {permitted &&
+        renderOutside?.({
+          form,
+          expand,
+          setExpand,
+          processedSearchItems,
+          getLabelWidth,
+          onSearchClick,
+          onResetClick,
+        })}
+    </>
+  );
+};
+
+export default SearchBase;

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

@@ -12,6 +12,7 @@ import {
   cleanSearchData,
   calculateVisibleItems,
   calculateButtonGroupAndColumnWidth,
+  shouldDisplayExtraItem,
 } from "../_utils";
 import styles from "../index.module.scss";
 import { ChakraButtonProps } from "../../Button";
@@ -119,12 +120,10 @@ export const useSearchCommon = (
   }, [moreSearchItems]);
 
   // 计算可见的搜索项数量
-  const visibleSearchItemCount = useMemo(() => {
-    return visibleSearchItems.length;
-  }, [visibleSearchItems]);
+  const visibleSearchItemCount = visibleSearchItems.length;
 
   // 计算总列数（包括按钮组）
-  const baseTotalColumnNum = useMemo(() => columnNum + 1, [columnNum]);
+  const baseTotalColumnNum = columnNum + 1;
 
   // 根据容器宽度动态调整列数
   const totalColumnNum = useAdaptiveColumnNum(
@@ -138,10 +137,7 @@ export const useSearchCommon = (
   );
 
   // 计算调整后的搜索项列数（不包括按钮组）
-  const adaptiveColumnNum = useMemo(
-    () => Math.max(1, totalColumnNum - 1),
-    [totalColumnNum],
-  );
+  const adaptiveColumnNum = Math.max(1, totalColumnNum - 1);
 
   // 使用基于宽度的展开/收起控制
   const { expand, setExpand, toggleExpand, visibleItemCount } = useSearchExpand(
@@ -241,11 +237,12 @@ export const useSearchCommon = (
 
     // 判断按钮组宽度是否大于列宽，如果是，则显示 实际搜索项数量+1
     if (
-      buttonGroupWidth !== undefined &&
-      columnWidth !== undefined &&
-      (buttonGroupWidth > columnWidth ||
-        (buttonGroupWidth < columnWidth &&
-          adaptiveColumnNum + 1 === visibleSearchItemCount))
+      shouldDisplayExtraItem(
+        buttonGroupWidth,
+        columnWidth,
+        adaptiveColumnNum,
+        visibleSearchItemCount,
+      )
     ) {
       return adaptiveColumnNum + 1;
     }

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

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { FormItemProps } from "../../FormItem";
+import { measureButtonGroupWidth } from "../_utils";
 
 /**
  * 基于宽度自适应控制展开/收起的Hook
@@ -46,19 +47,8 @@ export function useSearchExpand(
       const availableWidth = containerWidth - 30; // 15px padding on each side
 
       // 获取按钮组的实际宽度（计算所有子元素宽度总和）
-      let buttonGroupWidth = 0;
-      const buttonChildren = Array.from(buttonGroupRef.current.children);
-      if (buttonChildren.length > 0) {
-        // 计算所有子元素的宽度总和
-        let totalWidth = 0;
-        buttonChildren?.forEach((child) => {
-          totalWidth += (child as HTMLElement).offsetWidth;
-        });
-        // 加上子元素之间的间距（column-gap: 10px）
-        const childGap = 5;
-        totalWidth += (buttonChildren.length - 1) * childGap;
-        buttonGroupWidth = totalWidth;
-      }
+      const buttonGroupWidth =
+        measureButtonGroupWidth(buttonGroupRef.current) ?? 0;
 
       // 获取所有搜索项元素
       const items = container.querySelectorAll(`${itemClassName}`);

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

@@ -1,4 +1,5 @@
 import { RefObject } from "react";
+import { measureButtonGroupWidth } from "./measureButtonGroupWidth";
 
 /**
  * 计算按钮组宽度和列宽
@@ -26,16 +27,7 @@ export function calculateButtonGroupAndColumnWidth(
     const gap = 10; // 项之间的间距
 
     // 计算按钮组宽度
-    const buttonChildren = Array.from(buttonGroupRef.current.children);
-    if (buttonChildren.length > 0) {
-      let totalWidth = 0;
-      buttonChildren?.forEach((child) => {
-        totalWidth += (child as HTMLElement).offsetWidth;
-      });
-      const childGap = 5;
-      totalWidth += (buttonChildren.length - 1) * childGap;
-      buttonGroupWidth = totalWidth;
-    }
+    buttonGroupWidth = measureButtonGroupWidth(buttonGroupRef.current);
 
     // 计算列宽（单个搜索项的默认宽度）
     if (adaptiveColumnNum > 0) {

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

@@ -1,4 +1,5 @@
 import { FormItemProps } from "../../FormItem";
+import { shouldDisplayExtraItem } from "./shouldDisplayExtraItem";
 
 /**
  * 计算当前应该显示的搜索项
@@ -21,7 +22,7 @@ export function calculateVisibleItems(
   columnWidth?: number,
 ): FormItemProps[] {
   const visibleItems = searchItems.filter((item) => item.visible);
-  const hasCustomWidth = searchItems.find((item) => item.width !== undefined);
+  const hasCustomWidth = searchItems.some((item) => item.width !== undefined);
 
   if (!expand) {
     // 当有自定义宽度时，使用自适应计算
@@ -32,16 +33,14 @@ export function calculateVisibleItems(
     } else if (!hasCustomWidth) {
       // 没有自定义宽度时，使用 columnNum（实际搜索项数量）
       // 判断按钮组宽度是否大于列宽，如果是，则显示 实际搜索项数量+1
-      let displayCount = columnNum;
-      if (
-        buttonGroupWidth !== undefined &&
-        columnWidth !== undefined &&
-        (buttonGroupWidth > columnWidth ||
-          (buttonGroupWidth < columnWidth &&
-            columnNum + 1 === visibleItems.length))
-      ) {
-        displayCount = columnNum + 1;
-      }
+      const displayCount = shouldDisplayExtraItem(
+        buttonGroupWidth,
+        columnWidth,
+        columnNum,
+        visibleItems.length,
+      )
+        ? columnNum + 1
+        : columnNum;
       if (visibleItems.length >= displayCount) {
         return visibleItems.slice(0, displayCount);
       }

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

@@ -1,4 +1,6 @@
 export { cleanSearchData } from "./cleanSearchData";
 export { calculateVisibleItems } from "./calculateVisibleItems";
 export { calculateButtonGroupAndColumnWidth } from "./calculateButtonGroupAndColumnWidth";
+export { measureButtonGroupWidth } from "./measureButtonGroupWidth";
+export { shouldDisplayExtraItem } from "./shouldDisplayExtraItem";
 

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

@@ -0,0 +1,23 @@
+/**
+ * 计算按钮组的实际宽度（所有子元素宽度总和 + 子元素间距）
+ * @param buttonGroupEl 按钮组元素
+ * @returns 按钮组宽度；无子元素时返回 undefined
+ */
+export function measureButtonGroupWidth(
+  buttonGroupEl: HTMLElement | null
+): number | undefined {
+  if (!buttonGroupEl) return undefined;
+
+  const buttonChildren = Array.from(buttonGroupEl.children);
+  if (buttonChildren.length === 0) return undefined;
+
+  let totalWidth = 0;
+  buttonChildren.forEach((child) => {
+    totalWidth += (child as HTMLElement).offsetWidth;
+  });
+  // 加上子元素之间的间距
+  const childGap = 5;
+  totalWidth += (buttonChildren.length - 1) * childGap;
+
+  return totalWidth;
+}

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

@@ -0,0 +1,23 @@
+/**
+ * 判断收起状态下是否应多显示一个搜索项
+ *
+ * 规则：按钮组宽度大于列宽（按钮组独占更宽空间，首行有富余）；
+ * 或按钮组宽度小于列宽且可见项刚好比列数多 1（此时收起只会藏起 1 项，不如直接放下）。
+ * @param buttonGroupWidth 按钮组宽度
+ * @param columnWidth 列宽
+ * @param columnNum 搜索项列数（不含按钮组）
+ * @param visibleCount 可见搜索项总数
+ */
+export function shouldDisplayExtraItem(
+  buttonGroupWidth: number | undefined,
+  columnWidth: number | undefined,
+  columnNum: number,
+  visibleCount: number
+): boolean {
+  return (
+    buttonGroupWidth !== undefined &&
+    columnWidth !== undefined &&
+    (buttonGroupWidth > columnWidth ||
+      (buttonGroupWidth < columnWidth && columnNum + 1 === visibleCount))
+  );
+}