@hsu-react/ui 0.0.1

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

@@ -0,0 +1,87 @@
+import React from "react";
+import type { FormInstance } from "antd";
+import Form from "../../../Form";
+import { FilterFilled } from "@ant-design/icons";
+import { FormItemProps } from "../../../FormItem";
+import { DrawerFormProps } from "../../../Form/DrawerForm";
+import Icon from "../../../Icon";
+import type useLabelWidth from "../../../../hooks/useLabelWidth";
+import styles from "../../index.module.less";
+
+interface AdvancedFiltersDrawerProps {
+  expand: boolean;
+  setExpand: (expand: boolean) => void;
+  searchItems: FormItemProps[];
+  form: FormInstance<Record<string, unknown>>;
+  getLabelWidth: ReturnType<typeof useLabelWidth>[1];
+  minLabelWidth?: boolean | number;
+  onSearchClick: () => void;
+  onResetClick: () => void;
+  advancedFiltersProps?: DrawerFormProps;
+}
+
+export const AdvancedFiltersDrawer: React.FC<AdvancedFiltersDrawerProps> = ({
+  expand,
+  setExpand,
+  searchItems,
+  form,
+  getLabelWidth,
+  minLabelWidth,
+  onSearchClick,
+  onResetClick,
+  advancedFiltersProps,
+}) => {
+  return (
+    <Form.Drawer
+      {...advancedFiltersProps}
+      open={expand}
+      reset={false}
+      formItems={searchItems
+        .filter((item) => item.visible)
+        ?.map((i, idx) => ({
+          ...i,
+          labelWidth:
+            i.layout === "vertical"
+              ? undefined
+              : i.width ??
+                getLabelWidth(
+                  searchItems
+                    .filter((item) => item.visible)
+                    .filter((_, _idx) => {
+                      return _idx % 2 === idx % 2;
+                    }),
+                  undefined,
+                  minLabelWidth
+                ),
+        }))}
+      externalForm={form}
+      onClose={() => setExpand(false)}
+      title={
+        <div className={styles.drawerTitle}>
+          <FilterFilled className={styles.drawerTitleIcon} />
+          高级筛选
+        </div>
+      }
+      className={styles.DrawerForm}
+      buttonGroup={[
+        {
+          title: "查询",
+          type: "primary",
+          onClick: () => {
+            onSearchClick();
+            setExpand(false);
+          },
+          icon: <Icon icon="tabler:search" />,
+        },
+        {
+          title: "重置",
+          onClick: () => {
+            onResetClick();
+            setExpand(false);
+          },
+          icon: <Icon icon="basil:refresh-solid" />,
+        },
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,64 @@
+import React from "react";
+import Button, {
+  ChakraButtonProps as BasicButtonProps,
+} from "../../../Button";
+import { ReactNode } from "react";
+import styles from "../../index.module.less";
+
+interface ChakraButtonProps extends Omit<
+  BasicButtonProps,
+  "children" | "title"
+> {
+  title?: ReactNode;
+}
+
+interface ButtonGroupProps {
+  beforeButtonGroup?: ChakraButtonProps[];
+  affterButtonGroup?: ChakraButtonProps[];
+  expandButton?: ReactNode;
+  children?: ReactNode;
+  permitted?: boolean;
+}
+
+export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  (props, ref) => {
+    const {
+      beforeButtonGroup,
+      affterButtonGroup,
+      children,
+      expandButton,
+      permitted = true,
+    } = props;
+
+    // 判断是否有搜索项（children 存在且不为空）
+    const hasSearchItems = permitted && children;
+
+    return (
+      <div
+        className={`${styles.buttonGroup} ${!hasSearchItems ? styles.flexStart : ""}`}
+        ref={ref}
+      >
+        {beforeButtonGroup?.map((button, idx) => {
+          const { title, ...buttonProps } = button;
+          return (
+            <Button.Chakra key={idx} variant="surface" {...buttonProps}>
+              {title}
+            </Button.Chakra>
+          );
+        })}
+        {permitted && children}
+        {affterButtonGroup?.map((button, idx) => {
+          const { title, ...buttonProps } = button;
+          return (
+            <Button.Chakra key={idx} variant="surface" {...buttonProps}>
+              {title}
+            </Button.Chakra>
+          );
+        })}
+        {permitted && expandButton}
+      </div>
+    );
+  },
+);
+
+ButtonGroup.displayName = "ButtonGroup";

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

@@ -0,0 +1,28 @@
+import React from "react";
+import Icon from "../../../Icon";
+import classNames from "classnames";
+import styles from "../../index.module.less";
+
+interface CollapseToggleProps {
+  collapse: boolean;
+  onToggle: () => void;
+}
+
+export const CollapseToggle: React.FC<CollapseToggleProps> = ({
+  collapse,
+  onToggle,
+}) => {
+  return (
+    <div className={styles.collapseExpand}>
+      <span onClick={onToggle}>
+        <Icon
+          icon="mingcute:up-line"
+          className={classNames(styles.collapseExpandIcon, {
+            [styles.collapse]: collapse,
+          })}
+        />
+      </span>
+    </div>
+  );
+};
+

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

@@ -0,0 +1,51 @@
+import React from "react";
+import Button from "../../../Button";
+import { DownOutlined, FilterFilled } from "@ant-design/icons";
+import classNames from "classnames";
+import styles from "../../index.module.less";
+
+interface ExpandButtonProps {
+  expand: boolean;
+  toggleExpand: () => void;
+  advancedFilters?: boolean;
+  showExpandButton: boolean;
+  showAllSearchItems?: boolean;
+}
+
+export const ExpandButton: React.FC<ExpandButtonProps> = ({
+  expand,
+  toggleExpand,
+  advancedFilters = false,
+  showExpandButton,
+  showAllSearchItems = false,
+}) => {
+  if (!showExpandButton) {
+    return null;
+  }
+
+  return (
+    <Button
+      type="link"
+      onClick={toggleExpand}
+      className={classNames(styles.show, {
+        [styles.advancedFilters]: advancedFilters,
+      })}
+      icon={
+        advancedFilters ? (
+          <FilterFilled className={styles.icon} />
+        ) : (
+          <DownOutlined className={styles.icon} />
+        )
+      }
+      iconPosition="end"
+    >
+      {advancedFilters
+        ? "高级筛选"
+        : expand
+        ? "收起"
+        : showAllSearchItems
+        ? "更多"
+        : "展开"}
+    </Button>
+  );
+};

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

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from "react";
+import { Dropdown } from "antd";
+import Checkbox from "../../../Checkbox";
+import Icon from "../../../Icon";
+import { FormItemProps } from "../../../FormItem";
+import styles from "../../index.module.less";
+import Button from "../../../Button";
+
+interface FilterDropdownProps {
+  searchItems: FormItemProps[];
+  originalSearchItems: FormItemProps[];
+  setSearchItems: (items: FormItemProps[]) => void;
+  onFilterChange?: (items: FormItemProps[]) => void;
+}
+
+export const FilterDropdown: React.FC<FilterDropdownProps> = ({
+  searchItems,
+  originalSearchItems,
+  setSearchItems,
+  onFilterChange,
+}) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    document.addEventListener("click", () => {
+      setOpen(false);
+    });
+
+    return () => {
+      document.removeEventListener("click", () => {
+        setOpen(false);
+      });
+    };
+  }, [searchItems]);
+
+  return (
+    <Dropdown
+      open={open}
+      overlayClassName={styles.filterDropdown}
+      trigger={["click"]}
+      placement="bottomRight"
+      menu={{
+        onClick: (e) => {
+          e.domEvent.stopPropagation();
+        },
+        items: [
+          {
+            key: "1",
+            label: (
+              <div className={styles.filterDropdownItem}>
+                <Checkbox
+                  indeterminate={
+                    searchItems.some((item) => item.visible) &&
+                    !searchItems.every((item) => item.visible)
+                  }
+                  checked={searchItems.every((item) => item.visible)}
+                  onChange={(e) => {
+                    const newItems = searchItems?.map((item) => ({
+                      ...item,
+                      visible: e.target.checked,
+                    }));
+                    setSearchItems(newItems);
+                    onFilterChange?.(newItems);
+                  }}
+                >
+                  全选
+                </Checkbox>
+
+                <Icon
+                  icon="basil:refresh-solid"
+                  className={styles.filterDropdownItemIcon}
+                  onClick={(e) => {
+                    e.stopPropagation();
+
+                    const newItems = originalSearchItems?.map((i) => ({
+                      ...i,
+                      visible:
+                        typeof i.visible === "boolean" ? i.visible : true,
+                    }));
+                    setSearchItems(newItems);
+                    onFilterChange?.(newItems);
+                  }}
+                />
+              </div>
+            ),
+          },
+          {
+            type: "divider",
+          },
+          ...(searchItems || []).map((i) => {
+            return {
+              label: (
+                <Checkbox
+                  checked={i.visible}
+                  onChange={(e) => {
+                    e.stopPropagation();
+
+                    const newItems = searchItems?.map((item) => {
+                      if (item.name === i.name) {
+                        return {
+                          ...item,
+                          visible: e.target.checked,
+                        };
+                      }
+                      return item;
+                    });
+                    setSearchItems(newItems);
+                    onFilterChange?.(newItems);
+                  }}
+                >
+                  {i.label}
+                </Checkbox>
+              ),
+              key: i.name,
+            };
+          }),
+        ],
+      }}
+    >
+      <Button
+        icon={<Icon icon="solar:settings-linear" />}
+        onClick={(e) => {
+          e.stopPropagation();
+
+          setOpen(!open);
+        }}
+      >
+        设置
+      </Button>
+    </Dropdown>
+  );
+};

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

@@ -0,0 +1,41 @@
+import React from "react";
+import Button from "../../../Button";
+import Icon from "../../../Icon";
+
+interface SearchButtonsProps {
+  onSearch: () => void;
+  onReset: () => void;
+  searchDisabled?: boolean;
+  /** 查询按钮文本 */
+  searchText?: React.ReactNode;
+  /** 重置按钮文本 */
+  resetText?: React.ReactNode;
+}
+
+export const SearchButtons: React.FC<SearchButtonsProps> = ({
+  onSearch,
+  onReset,
+  searchDisabled = false,
+  searchText = "查询",
+  resetText = "重置",
+}) => {
+  return (
+    <>
+      <Button
+        type="primary"
+        onClick={onSearch}
+        icon={<Icon icon="tabler:search" />}
+        disabled={searchDisabled}
+      >
+        {searchText}
+      </Button>
+      <Button
+        onClick={onReset}
+        icon={<Icon icon="basil:refresh-solid" />}
+        disabled={searchDisabled}
+      >
+        {resetText}
+      </Button>
+    </>
+  );
+};

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

@@ -0,0 +1,6 @@
+export { useSearchExpand } from "./useSearchExpand";
+export { useSearchItems } from "./useSearchItems";
+export { useSearchForm } from "./useSearchForm";
+export { useAdaptiveColumnNum } from "./useAdaptiveColumnNum";
+export { useSearchCommon } from "./useSearchCommon";
+export type { UseSearchCommonParams, UseSearchCommonReturn } from "./useSearchCommon";

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

@@ -0,0 +1,115 @@
+import { useEffect, useState, 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 调整后的总列数
+ */
+export function useAdaptiveColumnNum(
+  containerRef: RefObject<HTMLDivElement>,
+  totalColumnNum: number,
+  enabled: boolean = true,
+  minColumnNum: number = 1,
+  maxColumnNum?: number,
+  breakpoints?: Record<number, number>,
+  baseWidth: number = 1200
+) {
+  const [adaptiveColumnNum, setAdaptiveColumnNum] =
+    useState<number>(totalColumnNum);
+
+  useEffect(() => {
+    if (!enabled) {
+      setAdaptiveColumnNum(totalColumnNum);
+      return;
+    }
+
+    const calculateColumnNum = () => {
+      if (!containerRef.current || !containerRef.current.offsetWidth) return;
+
+      const containerWidth = containerRef.current.offsetWidth;
+
+      let calculatedColumnNum = totalColumnNum;
+
+      // 如果提供了断点配置，优先使用断点
+      if (breakpoints) {
+        const sortedBreakpoints = Object.keys(breakpoints)
+          ?.map(Number)
+          .sort((a, b) => b - a); // 从大到小排序
+
+        for (const breakpoint of sortedBreakpoints) {
+          if (containerWidth >= breakpoint) {
+            calculatedColumnNum = breakpoints[breakpoint];
+            break;
+          }
+        }
+      } else {
+        // 默认策略：根据容器宽度自动计算
+        // 基于基础列数，根据容器宽度比例调整
+        const widthRatio = containerWidth / baseWidth;
+        calculatedColumnNum = Math.round(totalColumnNum * widthRatio);
+      }
+
+      // 应用最小值和最大值限制
+      if (calculatedColumnNum < minColumnNum) {
+        calculatedColumnNum = minColumnNum;
+      }
+      if (maxColumnNum !== undefined && calculatedColumnNum > maxColumnNum) {
+        calculatedColumnNum = maxColumnNum;
+      }
+
+      setAdaptiveColumnNum(calculatedColumnNum);
+    };
+
+    const resizeObserver = new ResizeObserver(() => {
+      // 使用 requestAnimationFrame 延迟到下一帧，确保DOM已更新
+      requestAnimationFrame(() => {
+        calculateColumnNum();
+      });
+    });
+
+    // 延迟观察，确保 ref 已被赋值
+    const observeContainer = () => {
+      if (containerRef.current) {
+        resizeObserver.observe(containerRef.current);
+      } else {
+        // 如果 ref 还未赋值，稍后重试
+        requestAnimationFrame(observeContainer);
+      }
+    };
+    observeContainer();
+
+    // 监听窗口大小变化
+    const handleWindowResize = () => {
+      requestAnimationFrame(() => {
+        calculateColumnNum();
+      });
+    };
+    window.addEventListener("resize", handleWindowResize);
+
+    // 初始计算（延迟执行以确保DOM已渲染）
+    requestAnimationFrame(() => {
+      calculateColumnNum();
+    });
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, [
+    containerRef,
+    totalColumnNum,
+    enabled,
+    minColumnNum,
+    maxColumnNum,
+    breakpoints,
+    baseWidth,
+  ]);
+
+  return enabled ? adaptiveColumnNum : totalColumnNum;
+}