@hsu-react/ui 0.0.1

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

@@ -0,0 +1,123 @@
+import React, { CSSProperties, useRef, memo } from "react";
+import classNames from "classnames";
+import styles from "./index.module.less";
+import OptionRow, {
+  ElementItem,
+  SearchCardOption,
+  Font,
+} from "./_components/OptionRow";
+import { useSearchCardValue, useSearchCardCollapse } from "./_hooks";
+import { SearchBox } from "./_components/SearchBox";
+import { CollapseToggle } from "./_components/CollapseToggle";
+import { isLegacyHasSelectorBrowser } from "../../../utils/cssSupports";
+
+export type { ElementItem, SearchCardOption, Font };
+
+export interface SearchCardProps {
+  options: SearchCardOption[];
+  defaultValue?: Record<string, unknown>;
+  onChange?: (data: Record<string, unknown>) => void;
+  padding?: number;
+  gap?: number;
+  font?: Font;
+  className?: string;
+  defaultCollapse?: boolean;
+  collapseExpand?: boolean;
+  showSearchBox?: boolean;
+  searchPlaceholder?: string;
+  searchField?: string;
+}
+
+const SearchCard: React.FC<SearchCardProps> = memo((props) => {
+  const {
+    options,
+    defaultValue,
+    onChange,
+    padding = 8,
+    gap = 8,
+    font = {
+      family: "PingFangSC-Regular, PingFang SC",
+      size: 14,
+      weight: "400",
+    },
+    className,
+    defaultCollapse = false,
+    collapseExpand = true,
+    showSearchBox = false,
+    searchPlaceholder,
+    searchField = "",
+  } = props;
+  const ref = useRef<HTMLDivElement>(null);
+  const legacyHasSelector = isLegacyHasSelectorBrowser();
+
+  const { value, setValue, internalValue, setInternalValue, getRealValues } =
+    useSearchCardValue({
+      defaultValue,
+      searchField,
+      options,
+      onChange,
+    });
+
+  const { collapse, toggleCollapse } = useSearchCardCollapse({
+    defaultCollapse,
+  });
+
+  // 处理搜索
+  const handleSearch = () => {
+    const realValues = getRealValues();
+    onChange?.({ ...realValues, [searchField]: internalValue });
+  };
+
+  return (
+    <div
+      className={classNames(styles.SearchCard, className, {
+        [styles.collapse]: collapse,
+        [styles.legacyHasSearchBox]: legacyHasSelector && showSearchBox,
+      })}
+      style={
+        {
+          "--searchCard-column-gap": `${gap}px`,
+          " --searchCard-padding-left-right": `${padding}px`,
+        } as CSSProperties
+      }
+    >
+      {showSearchBox && (
+        <SearchBox
+          value={internalValue}
+          onChange={setInternalValue}
+          onSearch={handleSearch}
+          placeholder={searchPlaceholder}
+        />
+      )}
+
+      <div className={styles.optionsBox} ref={ref}>
+        <div className={styles.options}>
+          {options?.map((option) => {
+            return (
+              <OptionRow
+                key={option.name}
+                option={option}
+                value={value}
+                setValue={(v) => {
+                  setValue({
+                    ...v,
+                    [searchField]: internalValue,
+                  });
+                }}
+                font={font}
+                padding={padding}
+                gap={gap}
+                legacyHasSelector={legacyHasSelector}
+              />
+            );
+          })}
+        </div>
+      </div>
+      {collapseExpand && (
+        <CollapseToggle collapse={collapse} onToggle={toggleCollapse} />
+      )}
+    </div>
+  );
+});
+
+export default SearchCard;

package/src/components/Search/SearchCollapsible/index.module.less

@@ -0,0 +1,3 @@
+// SearchCollapsible 组件的独立样式
+// 目前复用父级 Search 组件的样式，如需自定义可在此处添加
+

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

@@ -0,0 +1,206 @@
+import React from "react";
+import { Form as AntdForm } from "antd";
+import FormItem from "../../FormItem";
+import { CSSProperties, useCallback, useState } from "react";
+import classNames from "classnames";
+import styles from "../index.module.less";
+import { useSearchCommon } from "../_hooks";
+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 { CollapseToggle } from "../_components/CollapseToggle";
+import { SearchPropsWithFilter } from "../_types";
+
+export interface SearchCollapsibleProps extends SearchPropsWithFilter {
+  onCollapseToggle?: (collapse: boolean) => void;
+  beforeButtonGroup?: ChakraButtonProps[];
+  affterButtonGroup?: ChakraButtonProps[];
+}
+
+/**
+ * 可折叠模式的 Search 组件
+ * - 可以完全折叠/展开整个搜索区域
+ * - 通过 defaultExpanded 控制初始展开状态
+ * - 适合需要隐藏搜索栏以获得更多展示空间的场景
+ */
+const SearchCollapsible: React.FC<SearchCollapsibleProps> = (props) => {
+  const {
+    searchItems = [],
+    moreSearchItems = [],
+    className,
+    onSearch,
+    onReset,
+    externalForm,
+    hasPermi,
+    columnNum = 4,
+    beforeButtonGroup,
+    affterButtonGroup,
+    searchData,
+    setFilter,
+    minLabelWidth,
+    defaultExpanded = false,
+    onCollapseToggle,
+    onExpandChange,
+    autoAdaptWidth = true,
+    baseWidth,
+    onValuesChange,
+    searchDisabled = false,
+    showAllSearchItems = false,
+    searchText,
+    resetText,
+    onFilterChange,
+    columnOffsetWidth = 0,
+  } = props;
+
+  const [form] = AntdForm.useForm(externalForm);
+  // collapse 的语义是反的，所以需要取反 defaultExpanded
+  const [collapse, setCollapse] = useState(!defaultExpanded);
+
+  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,
+    minLabelWidth,
+    baseWidth,
+    onSearch,
+    onReset,
+    columnOffsetWidth,
+  });
+
+  // 处理折叠切换
+  const handleCollapseToggle = useCallback(() => {
+    setCollapse((prev) => {
+      const newCollapse = !prev;
+      onCollapseToggle?.(newCollapse);
+      return newCollapse;
+    });
+  }, [onCollapseToggle]);
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames(styles.Search, className, {
+        [styles.collapseExpand]: true,
+        [styles.collapse]: collapse,
+      })}
+      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={
+                    showAllSearchItems || !!moreSearchItems?.length
+                  }
+                />
+              }
+              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>
+      {permitted && (
+        <CollapseToggle collapse={collapse} onToggle={handleCollapseToggle} />
+      )}
+    </div>
+  );
+};
+
+export default SearchCollapsible;

package/src/components/Search/SearchWithFilter/index.module.less

@@ -0,0 +1,3 @@
+// SearchWithFilter 组件的独立样式
+// 目前复用父级 Search 组件的样式，如需自定义可在此处添加
+

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

@@ -0,0 +1,183 @@
+import React from "react";
+import { Form as AntdForm } from "antd";
+import FormItem from "../../FormItem";
+import { CSSProperties } from "react";
+import classNames from "classnames";
+import styles from "../index.module.less";
+import { useSearchCommon } from "../_hooks";
+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 SearchWithFilterProps extends SearchPropsWithFilter {
+  beforeButtonGroup?: ChakraButtonProps[];
+  affterButtonGroup?: ChakraButtonProps[];
+}
+
+/**
+ * 带筛选器设置的 Search 组件
+ * - 提供下拉菜单，允许用户动态选择显示哪些搜索项
+ * - 用户可以自定义显示的搜索字段
+ * - 提供更灵活的搜索体验
+ */
+const SearchWithFilter: React.FC<SearchWithFilterProps> = (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,
+  } = 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,
+    minLabelWidth,
+    baseWidth,
+    onSearch,
+    onReset,
+    columnOffsetWidth,
+  });
+
+  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) => {
+              // 计算同一列的项（用于计算标签宽度）
+              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={
+                    showAllSearchItems || !!moreSearchItems?.length
+                  }
+                />
+              }
+              permitted={permitted}
+              ref={buttonGroupRef}
+            >
+              {currentSearchItems.length > 0 && (
+                <SearchButtons
+                  onSearch={onSearchClick}
+                  onReset={onResetClick}
+                  searchDisabled={searchDisabled}
+                  searchText={searchText}
+                  resetText={resetText}
+                />
+              )}
+              <FilterDropdown
+                searchItems={processedSearchItems}
+                originalSearchItems={searchItems}
+                setSearchItems={setSearchItems}
+                onFilterChange={onFilterChange}
+              />
+            </ButtonGroup>
+          )}
+        </AntdForm>
+      </div>
+    </div>
+  );
+};
+
+export default SearchWithFilter;

package/src/components/Search/SearchWithMore/index.module.less

@@ -0,0 +1,3 @@
+// SearchWithMore 组件的独立样式
+// 目前复用父级 Search 组件的样式，如需自定义可在此处添加
+

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

@@ -0,0 +1,185 @@
+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.less";
+import { useSearchCommon } from "../_hooks";
+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
+  extends Omit<SearchPropsWithFilter, "moreSearchItems"> {
+  moreSearchItems: FormItemProps[];
+  beforeButtonGroup?: ChakraButtonProps[];
+  affterButtonGroup?: ChakraButtonProps[];
+}
+
+/**
+ * 带更多搜索项的 Search 组件
+ * - 将搜索项分为基础项和更多项两组
+ * - 初始只显示基础搜索项，点击展开后显示更多项
+ * - 适合有大量搜索字段的场景
+ */
+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;
+  }
+
+  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>
+  );
+};
+
+export default SearchWithMore;