@hsu-react/ui 0.0.9 → 0.0.11

package/lib/components/Table/_hooks/useTableColumns.js

@@ -19,6 +19,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const MEASURE_ALIGN_FONT_SIZE = 14;
 // Canvas measureText 仅返回 advance width，较 DOM 实际渲染偏窄约 1px，补 2px 缓冲避免最宽行被挤压
 const MEASURE_ALIGN_BUFFER_PX = 2;
+// 单元格左右内边距合计的默认值（默认 --td-padding: 4px 8px），用于把列宽抬到能放下定宽内容块
+const MEASURE_ALIGN_CELL_PADDING_PX = 16;
+
+/**
+ * 解析 tdPadding（CSS padding 简写）的左右内边距合计；
+ * 未传或解析不出时回退默认值（与默认 --td-padding: 4px 8px 一致）。
+ */
+const getCellHorizontalPadding = tdPadding => {
+  if (!tdPadding) return MEASURE_ALIGN_CELL_PADDING_PX;
+  const parts = tdPadding.trim().split(/\s+/).map(v => parseFloat(v));
+  if (!parts.length || parts.some(v => Number.isNaN(v))) {
+    return MEASURE_ALIGN_CELL_PADDING_PX;
+  }
+
+  // CSS 简写：1 值=四边；2/3 值=第 2 个为左右；4 值=右+左
+  if (parts.length === 1) return parts[0] * 2;
+  if (parts.length === 4) return parts[1] + parts[3];
+  return parts[1] * 2;
+};
 
 // 计算 measureAlign 列的定宽（取本列所有行展示文本的最大像素宽）
 const getMeasureAlignWidth = (column, dataSource) => {
@@ -55,7 +74,8 @@ const useTableColumns = params => {
     cls,
     bordered,
     rowSelection,
-    expandable
+    expandable,
+    tdPadding
   } = params;
   const {
     checkPermission
@@ -109,6 +129,15 @@ const useTableColumns = params => {
         }, 0) ?? 0 : 0;
         item.width = Math.max(titleWidth, dataIndexWidth) + 32;
       }
+
+      // measureAlign 列：列宽须容得下最宽行的定宽内容块 + 单元格左右内边距，
+      // 否则出现超长值（如 +3357.52%）时内容会被列宽截断；声明的 width 只作下限。
+      if (item.measureAlign && typeof item.width === "number") {
+        const measured = getMeasureAlignWidth(item, dataSource);
+        if (measured > 0) {
+          item.width = Math.max(item.width, measured + getCellHorizontalPadding(tdPadding));
+        }
+      }
       return item;
     })?.map(item => {
       return {
@@ -121,7 +150,7 @@ const useTableColumns = params => {
       };
     });
     return newColumns;
-  }, [autoWidth, columns, dataSource, checkPermission, scroll]);
+  }, [autoWidth, columns, dataSource, checkPermission, scroll, tdPadding]);
 
   // 渲染列标题
   const renderColumnTitle = (0, _react.useCallback)(column => {

package/lib/components/Table/index.js

@@ -125,7 +125,8 @@ const Table = props => {
     cls,
     bordered,
     rowSelection,
-    expandable
+    expandable,
+    tdPadding
   });
   (0, _useSetTableHeight.default)({
     pagination,

package/lib/components/TextEllipsis/index.js

@@ -29,6 +29,8 @@ const TextEllipsis = ({
   const measureRef = (0, _react.useRef)(null);
   const [isOverflow, setIsOverflow] = (0, _react.useState)(false);
   const [truncatedText, setTruncatedText] = (0, _react.useState)(children);
+  // 容器实际渲染宽度：未声明 width 时（如表格列宽动态分配）作为 Tooltip 宽度
+  const [measuredWidth, setMeasuredWidth] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
     const element = textRef.current;
     const measureElement = measureRef.current;
@@ -84,26 +86,37 @@ const TextEllipsis = ({
       return result;
     };
     const textContent = getTextContent(children);
-    const isTextOverflow = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
-    setIsOverflow(isTextOverflow);
+    const update = () => {
+      const isTextOverflow = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
+      setIsOverflow(isTextOverflow);
+      setMeasuredWidth(element.clientWidth);
 
-    // 如果是省略前面且文本溢出，需要计算截断后的文本
-    if (ellipsisPosition === "start" && isTextOverflow && textContent) {
-      const maxWidth = element.clientWidth;
-      const truncated = calculateTruncatedText(textContent, maxWidth);
-      setTruncatedText(truncated);
-    } else {
-      setTruncatedText(children);
-    }
+      // 如果是省略前面且文本溢出，需要计算截断后的文本
+      if (ellipsisPosition === "start" && isTextOverflow && textContent) {
+        const maxWidth = element.clientWidth;
+        const truncated = calculateTruncatedText(textContent, maxWidth);
+        setTruncatedText(truncated);
+      } else {
+        setTruncatedText(children);
+      }
+    };
+    update();
+
+    // 容器宽度动态变化（如表格列宽重分配、窗口 resize）时重测溢出与宽度
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
   }, [children, ellipsisPosition, style]);
 
-  // 计算 Tooltip 的宽度
+  // 计算 Tooltip 的宽度：显式 width 优先；未声明（或百分比）时用容器实际渲染宽度，
+  // 实测不到再回退 defaultWidth
   const getTooltipWidth = () => {
     const defaultWidth = tooltipConfig?.defaultWidth ?? DEFAULT_TOOLTIP_WIDTH;
-    if (!width) return defaultWidth;
+    const dynamicWidth = measuredWidth > 0 ? measuredWidth : defaultWidth;
+    if (!width) return dynamicWidth;
     if (typeof width === "number") return width;
-    if (typeof width === "string" && width.includes("%")) return defaultWidth;
-    return parseInt(width) || defaultWidth;
+    if (typeof width === "string" && width.includes("%")) return dynamicWidth;
+    return parseInt(width) || dynamicWidth;
   };
   const tooltipWidth = getTooltipWidth();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/components/FormItem/ItemContainer/index.tsx

@@ -46,6 +46,8 @@ export interface ItemContainerProps extends FormItemProps {
   labelBreak?: boolean;
   hideAdditiona?: boolean;
   hideLabel?: boolean;
+  /** 显隐开关，由 FormItem 消费；在此解构剥离，避免透传到 DOM */
+  visible?: boolean;
 }
 
 const ItemContainer: React.FC<ItemContainerProps> = (props) => {
@@ -84,6 +86,7 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
     labelBreak = false,
     hideAdditiona = false,
     hideLabel = false,
+    visible: _visible,
     ...formItemProps
   } = props;
   const { icon = "material-symbols:help", iconClassName, ...tipsConfig } = tips;
@@ -198,15 +201,9 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
     return null;
   }
 
-  // 页面层 FormItemProps 的展示控制属性（如 visible）不属于 antd Form.Item，
-  // 剥离后再透传，避免被 antd 转发到 DOM 触发 React 非法属性警告。
-  const restFormItemProps = Object.fromEntries(
-    Object.entries(formItemProps).filter(([key]) => key !== "visible")
-  );
-
   return (
     <Form.Item
-      {...restFormItemProps}
+      {...formItemProps}
       name={name}
       rules={[
         {

package/src/components/Search/{_components → SearchAdvanced/_components}/AdvancedFiltersDrawer/index.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import type { FormInstance } from "antd";
-import Form from "../../../Form";
+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.scss";
+import { FormItemProps } from "../../../../FormItem";
+import { DrawerFormProps } from "../../../../Form/DrawerForm";
+import Icon from "../../../../Icon";
+import type useLabelWidth from "../../../../../hooks/useLabelWidth";
+import styles from "../../../index.module.scss";
 
 interface AdvancedFiltersDrawerProps {
   expand: boolean;

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

@@ -1,17 +1,10 @@
 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.scss";
-import { useSearchCommon } from "../_hooks";
+import SearchBase from "../_components/SearchBase";
+import { AdvancedFiltersDrawer } from "./_components/AdvancedFiltersDrawer";
 import { ChakraButtonProps } from "../../Button";
 import { DrawerFormProps } from "../../Form/DrawerForm";
-import { ButtonGroup } from "../_components/ButtonGroup";
-import { SearchButtons } from "../_components/SearchButtons";
-import { FilterDropdown } from "../_components/FilterDropdown";
-import { ExpandButton } from "../_components/ExpandButton";
-import { AdvancedFiltersDrawer } from "../_components/AdvancedFiltersDrawer";
 import { SearchPropsWithFilter } from "../_types";
 
 export interface SearchAdvancedProps extends SearchPropsWithFilter {
@@ -28,168 +21,36 @@ export interface SearchAdvancedProps extends SearchPropsWithFilter {
  */
 const SearchAdvanced: React.FC<SearchAdvancedProps> = (props) => {
   const {
-    searchItems = [],
-    moreSearchItems = [],
     className,
-    onSearch,
-    onReset,
-    externalForm,
-    hasPermi,
-    columnNum = 4,
-    beforeButtonGroup,
-    affterButtonGroup,
-    searchData,
     advancedFiltersProps,
     setFilter,
     minLabelWidth,
-    defaultExpanded = false,
-    onExpandChange,
-    autoAdaptWidth = true,
-    baseWidth,
-    onValuesChange,
-    searchDisabled = false,
-    showAllSearchItems = false,
-    searchText,
-    resetText,
-    onFilterChange,
-    columnOffsetWidth = 0,
+    ...rest
   } = 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,
-  });
-
-  if (!shouldRender) {
-    return null;
-  }
-
   return (
-    <>
-      <div
-        ref={containerRef}
-        className={classNames(styles.Search, className, {
-          [styles.advancedFilters]: true,
-        })}
-        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) => {
-                return (
-                  <FormItem
-                    {...item}
-                    key={item.name}
-                    className={classNames(styles.item, item.className, {
-                      [styles.unFill]: item.width !== undefined,
-                    })}
-                    label={undefined}
-                    labelWidth={undefined}
-                  />
-                );
-              })}
-            {(beforeButtonGroup?.length ||
-              affterButtonGroup?.length ||
-              permitted) && (
-              <ButtonGroup
-                beforeButtonGroup={beforeButtonGroup}
-                affterButtonGroup={affterButtonGroup}
-                expandButton={
-                  <ExpandButton
-                    expand={expand}
-                    toggleExpand={toggleExpand}
-                    advancedFilters={true}
-                    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>
-      </div>
-      {permitted && setExpand && (
-        <AdvancedFiltersDrawer
-          expand={expand}
-          setExpand={setExpand}
-          searchItems={processedSearchItems}
-          form={form}
-          getLabelWidth={getLabelWidth}
-          minLabelWidth={minLabelWidth}
-          onSearchClick={onSearchClick}
-          onResetClick={onResetClick}
-          advancedFiltersProps={advancedFiltersProps}
-        />
-      )}
-    </>
+    <SearchBase
+      {...rest}
+      minLabelWidth={minLabelWidth}
+      advancedFilters
+      showFilter={!!setFilter}
+      className={classNames(className, styles.advancedFilters)}
+      renderOutside={(ctx) =>
+        ctx.setExpand && (
+          <AdvancedFiltersDrawer
+            expand={ctx.expand}
+            setExpand={ctx.setExpand}
+            searchItems={ctx.processedSearchItems}
+            form={ctx.form}
+            getLabelWidth={ctx.getLabelWidth}
+            minLabelWidth={minLabelWidth}
+            onSearchClick={ctx.onSearchClick}
+            onResetClick={ctx.onResetClick}
+            advancedFiltersProps={advancedFiltersProps}
+          />
+        )
+      }
+    />
   );
 };
 

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

@@ -77,7 +77,7 @@ const SearchCard: React.FC<SearchCardProps> = memo((props) => {
       style={
         {
           "--searchCard-column-gap": `${gap}px`,
-          " --searchCard-padding-left-right": `${padding}px`,
+          "--searchCard-padding-left-right": `${padding}px`,
         } as CSSProperties
       }
     >

package/src/components/Search/{_components → SearchCollapsible/_components}/CollapseToggle/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import Icon from "../../../Icon";
+import Icon from "../../../../Icon";
 import classNames from "classnames";
-import styles from "../../index.module.scss";
+import styles from "../../../index.module.scss";
 
 interface CollapseToggleProps {
   collapse: boolean;

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

@@ -1,16 +1,9 @@
-import React from "react";
-import { Form as AntdForm } from "antd";
-import FormItem from "../../FormItem";
-import { CSSProperties, useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import classNames from "classnames";
 import styles from "../index.module.scss";
-import { useSearchCommon } from "../_hooks";
+import SearchBase from "../_components/SearchBase";
+import { CollapseToggle } from "./_components/CollapseToggle";
 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 {
@@ -27,73 +20,16 @@ export interface SearchCollapsibleProps extends SearchPropsWithFilter {
  */
 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,
+    setFilter,
+    ...rest
   } = 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) => {
@@ -103,103 +39,18 @@ const SearchCollapsible: React.FC<SearchCollapsibleProps> = (props) => {
     });
   }, [onCollapseToggle]);
 
-  if (!shouldRender) {
-    return null;
-  }
-
   return (
-    <div
-      ref={containerRef}
-      className={classNames(styles.Search, className, {
-        [styles.collapseExpand]: true,
+    <SearchBase
+      {...rest}
+      defaultExpanded={defaultExpanded}
+      showFilter={!!setFilter}
+      className={classNames(className, styles.collapseExpand, {
         [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 && (
+      afterForm={
         <CollapseToggle collapse={collapse} onToggle={handleCollapseToggle} />
-      )}
-    </div>
+      }
+    />
   );
 };