@hsu-react/ui 0.0.8 → 0.0.10

package/lib/components/Search/index.js

@@ -4,137 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _antd = require("antd");
-var _FormItem = _interopRequireDefault(require("../FormItem"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _indexModule = _interopRequireDefault(require("./index.module.scss"));
-var _hooks = require("./_hooks");
+var _react = _interopRequireDefault(require("react"));
 var _SearchCard = _interopRequireDefault(require("./SearchCard"));
 var _SearchAdvanced = _interopRequireDefault(require("./SearchAdvanced"));
 var _SearchCollapsible = _interopRequireDefault(require("./SearchCollapsible"));
 var _SearchWithFilter = _interopRequireDefault(require("./SearchWithFilter"));
 var _SearchWithMore = _interopRequireDefault(require("./SearchWithMore"));
-var _ButtonGroup = require("./_components/ButtonGroup");
-var _SearchButtons = require("./_components/SearchButtons");
-var _ExpandButton = require("./_components/ExpandButton");
+var _SearchBase = _interopRequireDefault(require("./_components/SearchBase"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // 导出所有可用的 Search 模式键名
 
 // 导出 Search 模式映射类型
 
+/**
+ * 基础 Search 组件
+ * - 标准的搜索表单布局，自适应列数与展开/收起
+ */
 const Search = 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,
-    columnOffsetWidth = 0
-  } = props;
-  const [form] = _antd.Form.useForm(externalForm);
-  const {
-    containerRef,
-    buttonGroupRef,
-    cls,
-    getLabelWidth,
-    currentSearchItems,
-    totalColumnNum,
-    expand,
-    toggleExpand,
-    showExpandButton,
-    onSearchClick,
-    onResetClick,
-    shouldRender,
-    permitted
-  } = (0, _hooks.useSearchCommon)({
-    form,
-    searchItems,
-    moreSearchItems,
-    searchData,
-    hasPermi,
-    beforeButtonGroup,
-    affterButtonGroup,
-    columnNum,
-    autoAdaptWidth,
-    defaultExpanded,
-    onExpandChange,
-    showAllSearchItems,
-    minLabelWidth,
-    baseWidth,
-    onSearch,
-    onReset,
-    columnOffsetWidth
-  });
-  if (!shouldRender) {
-    return null;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    ref: containerRef,
-    className: (0, _classnames.default)(_indexModule.default.Search, className),
-    style: {
-      "--column-number": totalColumnNum,
-      "--column-offset-width": `${columnOffsetWidth}px`
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)(_indexModule.default.searchOption, _indexModule.default[expand.toString()]),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Form, {
-        form: form,
-        className: (0, _classnames.default)(_indexModule.default.option, cls),
-        onValuesChange: onValuesChange,
-        children: [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 /*#__PURE__*/(0, _react.createElement)(_FormItem.default, {
-            ...item,
-            key: item.name,
-            className: (0, _classnames.default)(_indexModule.default.item, item.className, {
-              [_indexModule.default.unFill]: item.width !== undefined
-            }),
-            labelWidth: item.width !== undefined ? undefined : getLabelWidth(sameColumnItems, undefined, minLabelWidth)
-          });
-        }), (beforeButtonGroup?.length || affterButtonGroup?.length || permitted) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.ButtonGroup, {
-          beforeButtonGroup: beforeButtonGroup,
-          affterButtonGroup: affterButtonGroup,
-          expandButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandButton.ExpandButton, {
-            expand: expand,
-            toggleExpand: toggleExpand,
-            advancedFilters: false,
-            showExpandButton: showExpandButton,
-            showAllSearchItems: showAllSearchItems || !!moreSearchItems?.length
-          }),
-          permitted: permitted,
-          ref: buttonGroupRef,
-          children: currentSearchItems.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchButtons.SearchButtons, {
-            onSearch: onSearchClick,
-            onReset: onResetClick,
-            searchDisabled: searchDisabled,
-            searchText: searchText,
-            resetText: resetText
-          })
-        })]
-      })
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBase.default, {
+    ...props
   });
 };
 Search.Card = _SearchCard.default;

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

@@ -19,6 +19,8 @@ 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;
 
 // 计算 measureAlign 列的定宽（取本列所有行展示文本的最大像素宽）
 const getMeasureAlignWidth = (column, dataSource) => {
@@ -109,6 +111,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 + MEASURE_ALIGN_CELL_PADDING_PX);
+        }
+      }
       return item;
     })?.map(item => {
       return {

package/package.json

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

package/src/components/Chart/Bar/index.tsx

@@ -16,7 +16,9 @@ import {
   ChartScrollConfig,
   createDefaultCategoryXAxis,
   createDefaultValueYAxis,
+  DataZoomIndexWindow,
   getSliderShow,
+  percentWindowToIndexWindow,
   resolveScrollConfig,
 } from "../_utils/cartesian";
 
@@ -27,6 +29,10 @@ export interface ChartBarProps extends ChartCommonProps {
   legendData?: string[];
   scrollConfig?: ChartScrollConfig;
   onClick?: (event: echarts.ECElementEvent) => void;
+  /** 图例点选变化回调，参数为当前各系列选中状态（配合 legend.selected 可实现坐标轴重算） */
+  onLegendSelectChanged?: (selected: Record<string, boolean>) => void;
+  /** dataZoom 可见窗口变化回调（滑块/滚轮/自动滚动/初始同步均触发），参数为当前可见的 x 轴索引区间（配合 useDataZoomWindow 可按展示部分重算坐标轴） */
+  onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => void;
   /** 是否启用图例自动滚动，默认 false */
   enableLegendAutoScroll?: boolean;
   /** 图例每页可见数量，默认 8 */
@@ -55,6 +61,8 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     insideDataZoom,
     sliderDataZoom,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
@@ -63,6 +71,7 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const prevXAxisKeyRef = useRef<string | null>(null);
   const legendScrollRef = useRef<ReturnType<typeof autoScrollLegend> | null>(
     null,
   );
@@ -268,8 +277,46 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       chartInstanceRef.current = chart;
     }
 
-    // 设置配置
+    // 设置配置：notMerge 会把 dataZoom 窗口重置回初始位置，
+    // x 轴数据未变化时（如坐标轴重算/图例点选触发的重渲染）先记录当前窗口，设置后恢复
+    const xAxisKey = xAxisData?.join("\u0001") ?? "";
+    const prevZoomRanges =
+      prevXAxisKeyRef.current === xAxisKey
+        ? ((chart.getOption() as ChartsOption | undefined)?.dataZoom as
+            | Array<{ start?: number; end?: number }>
+            | undefined)
+        : undefined;
+    prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption as ChartOptionType, true);
+    const nextZooms = (chartOption as ChartsOption).dataZoom;
+    if (
+      prevZoomRanges?.length &&
+      Array.isArray(nextZooms) &&
+      nextZooms.length === prevZoomRanges.length
+    ) {
+      chart.setOption({
+        dataZoom: prevZoomRanges.map((z) => ({ start: z.start, end: z.end })),
+      });
+    }
+
+    // 向调用方同步当前可见窗口（初始渲染与恢复后），用于按展示部分重算坐标轴
+    if (onDataZoomWindowChanged) {
+      const zooms = (chart.getOption() as ChartsOption | undefined)
+        ?.dataZoom as Array<{ start?: number; end?: number }> | undefined;
+      const zoom = zooms?.[0];
+      const totalLen = xAxisData?.length ?? 0;
+      if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
+        onDataZoomWindowChanged(
+          percentWindowToIndexWindow(zoom.start, zoom.end, totalLen),
+        );
+      } else {
+        // 无 dataZoom（如数据量不足未启用滚动）时窗口即全量，同步一次避免残留旧窗口
+        onDataZoomWindowChanged({
+          startIndex: 0,
+          endIndex: Math.max(0, totalLen - 1),
+        });
+      }
+    }
 
     // 添加 resize 监听
     window.addEventListener("resize", handleResize);
@@ -285,6 +332,59 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       chartInstanceRef.current?.on("click", onClick);
     }
 
+    // 图例点选事件
+    const handleLegendSelectChanged = (params: unknown) => {
+      onLegendSelectChanged?.(
+        (params as { selected: Record<string, boolean> }).selected,
+      );
+    };
+    if (onLegendSelectChanged) {
+      chartInstanceRef.current?.on(
+        "legendselectchanged",
+        handleLegendSelectChanged,
+      );
+    }
+
+    // dataZoom 原生交互（slider 拖动 / inside 缩放）→ 同步可见窗口
+    const handleDataZoom = (params: unknown) => {
+      const raw = params as {
+        start?: number;
+        end?: number;
+        startValue?: number;
+        endValue?: number;
+        batch?: Array<{
+          start?: number;
+          end?: number;
+          startValue?: number;
+          endValue?: number;
+        }>;
+      };
+      const info = raw?.batch?.[0] ?? raw;
+      if (
+        typeof info?.startValue === "number" &&
+        typeof info?.endValue === "number"
+      ) {
+        onDataZoomWindowChanged?.({
+          startIndex: Math.max(0, Math.round(info.startValue)),
+          endIndex: Math.max(0, Math.round(info.endValue)),
+        });
+      } else if (
+        typeof info?.start === "number" &&
+        typeof info?.end === "number"
+      ) {
+        onDataZoomWindowChanged?.(
+          percentWindowToIndexWindow(
+            info.start,
+            info.end,
+            xAxisData?.length ?? 0,
+          ),
+        );
+      }
+    };
+    if (onDataZoomWindowChanged) {
+      chartInstanceRef.current?.on("datazoom", handleDataZoom);
+    }
+
     // 图例自动滚动（参考 Pie 组件）
     const opt = chartOption as ChartsOption;
     const legendDataLen = Array.isArray(opt.legend)
@@ -317,6 +417,17 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
         chartInstanceRef.current?.off("click", onClick);
       }
 
+      if (onLegendSelectChanged) {
+        chartInstanceRef.current?.off(
+          "legendselectchanged",
+          handleLegendSelectChanged,
+        );
+      }
+
+      if (onDataZoomWindowChanged) {
+        chartInstanceRef.current?.off("datazoom", handleDataZoom);
+      }
+
       if (legendScrollRef.current) {
         legendScrollRef.current.dispose();
         legendScrollRef.current = null;
@@ -326,6 +437,9 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
     chartOption,
     handleResize,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
+    xAxisData,
     enableLegendAutoScroll,
     legendVisibleCount,
     legendScrollInterval,
@@ -358,10 +472,26 @@ const ChartBar: React.FC<ChartBarProps> = (props) => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
+      onWindowChange: onDataZoomWindowChanged
+        ? (startPercent, endPercent) =>
+            onDataZoomWindowChanged(
+              percentWindowToIndexWindow(
+                startPercent,
+                endPercent,
+                xAxisData.length,
+              ),
+            )
+        : undefined,
     });
 
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData]);
+  }, [
+    dataZoom,
+    normalizedScroll,
+    sliderDataZoom,
+    xAxisData,
+    onDataZoomWindowChanged,
+  ]);
 
   // 组件卸载时清理资源
   useEffect(() => {

package/src/components/Chart/Line/index.tsx

@@ -16,7 +16,9 @@ import {
   ChartScrollConfig,
   createDefaultCategoryXAxis,
   createDefaultValueYAxis,
+  DataZoomIndexWindow,
   getSliderShow,
+  percentWindowToIndexWindow,
   resolveScrollConfig,
 } from "../_utils/cartesian";
 
@@ -28,6 +30,10 @@ export interface ChartLineProps extends ChartCommonProps {
   scrollConfig?: ChartScrollConfig;
   yAxisNameOffsets?: number[];
   onClick?: (event: echarts.ECElementEvent) => void;
+  /** 图例点选变化回调，参数为当前各系列选中状态（配合 legend.selected 可实现坐标轴重算） */
+  onLegendSelectChanged?: (selected: Record<string, boolean>) => void;
+  /** dataZoom 可见窗口变化回调（滑块/滚轮/自动滚动/初始同步均触发），参数为当前可见的 x 轴索引区间（配合 useDataZoomWindow 可按展示部分重算坐标轴） */
+  onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => void;
   /** 是否启用图例自动滚动，默认 false */
   enableLegendAutoScroll?: boolean;
   /** 图例每页可见数量，默认 8 */
@@ -56,6 +62,8 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     insideDataZoom,
     sliderDataZoom,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
@@ -64,6 +72,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const prevXAxisKeyRef = useRef<string | null>(null);
   const legendScrollRef = useRef<ReturnType<typeof autoScrollLegend> | null>(
     null,
   );
@@ -265,8 +274,46 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
       chartInstanceRef.current = chart;
     }
 
-    // 设置配置
+    // 设置配置：notMerge 会把 dataZoom 窗口重置回初始位置，
+    // x 轴数据未变化时（如坐标轴重算/图例点选触发的重渲染）先记录当前窗口，设置后恢复
+    const xAxisKey = xAxisData?.join("\u0001") ?? "";
+    const prevZoomRanges =
+      prevXAxisKeyRef.current === xAxisKey
+        ? ((chart.getOption() as ChartsOption | undefined)?.dataZoom as
+            | Array<{ start?: number; end?: number }>
+            | undefined)
+        : undefined;
+    prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption as ChartOptionType, true);
+    const nextZooms = (chartOption as ChartsOption).dataZoom;
+    if (
+      prevZoomRanges?.length &&
+      Array.isArray(nextZooms) &&
+      nextZooms.length === prevZoomRanges.length
+    ) {
+      chart.setOption({
+        dataZoom: prevZoomRanges.map((z) => ({ start: z.start, end: z.end })),
+      });
+    }
+
+    // 向调用方同步当前可见窗口（初始渲染与恢复后），用于按展示部分重算坐标轴
+    if (onDataZoomWindowChanged) {
+      const zooms = (chart.getOption() as ChartsOption | undefined)
+        ?.dataZoom as Array<{ start?: number; end?: number }> | undefined;
+      const zoom = zooms?.[0];
+      const totalLen = xAxisData?.length ?? 0;
+      if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
+        onDataZoomWindowChanged(
+          percentWindowToIndexWindow(zoom.start, zoom.end, totalLen),
+        );
+      } else {
+        // 无 dataZoom（如数据量不足未启用滚动）时窗口即全量，同步一次避免残留旧窗口
+        onDataZoomWindowChanged({
+          startIndex: 0,
+          endIndex: Math.max(0, totalLen - 1),
+        });
+      }
+    }
 
     // 添加 resize 监听
     window.addEventListener("resize", handleResize);
@@ -282,6 +329,59 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
       chartInstanceRef.current?.on("click", onClick);
     }
 
+    // 图例点选事件
+    const handleLegendSelectChanged = (params: unknown) => {
+      onLegendSelectChanged?.(
+        (params as { selected: Record<string, boolean> }).selected,
+      );
+    };
+    if (onLegendSelectChanged) {
+      chartInstanceRef.current?.on(
+        "legendselectchanged",
+        handleLegendSelectChanged,
+      );
+    }
+
+    // dataZoom 原生交互（slider 拖动 / inside 缩放）→ 同步可见窗口
+    const handleDataZoom = (params: unknown) => {
+      const raw = params as {
+        start?: number;
+        end?: number;
+        startValue?: number;
+        endValue?: number;
+        batch?: Array<{
+          start?: number;
+          end?: number;
+          startValue?: number;
+          endValue?: number;
+        }>;
+      };
+      const info = raw?.batch?.[0] ?? raw;
+      if (
+        typeof info?.startValue === "number" &&
+        typeof info?.endValue === "number"
+      ) {
+        onDataZoomWindowChanged?.({
+          startIndex: Math.max(0, Math.round(info.startValue)),
+          endIndex: Math.max(0, Math.round(info.endValue)),
+        });
+      } else if (
+        typeof info?.start === "number" &&
+        typeof info?.end === "number"
+      ) {
+        onDataZoomWindowChanged?.(
+          percentWindowToIndexWindow(
+            info.start,
+            info.end,
+            xAxisData?.length ?? 0,
+          ),
+        );
+      }
+    };
+    if (onDataZoomWindowChanged) {
+      chartInstanceRef.current?.on("datazoom", handleDataZoom);
+    }
+
     // 图例自动滚动（与 Pie/Bar 一致）
     const opt = chartOption as ChartsOption;
     const legendDataLen = Array.isArray(opt.legend)
@@ -314,6 +414,17 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
         chartInstanceRef.current?.off("click", onClick);
       }
 
+      if (onLegendSelectChanged) {
+        chartInstanceRef.current?.off(
+          "legendselectchanged",
+          handleLegendSelectChanged,
+        );
+      }
+
+      if (onDataZoomWindowChanged) {
+        chartInstanceRef.current?.off("datazoom", handleDataZoom);
+      }
+
       if (legendScrollRef.current) {
         legendScrollRef.current.dispose();
         legendScrollRef.current = null;
@@ -323,6 +434,9 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     chartOption,
     handleResize,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
+    xAxisData,
     enableLegendAutoScroll,
     legendVisibleCount,
     legendScrollInterval,
@@ -355,10 +469,26 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
       enableWheelScroll,
+      onWindowChange: onDataZoomWindowChanged
+        ? (startPercent, endPercent) =>
+            onDataZoomWindowChanged(
+              percentWindowToIndexWindow(
+                startPercent,
+                endPercent,
+                xAxisData.length,
+              ),
+            )
+        : undefined,
     });
 
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData]);
+  }, [
+    dataZoom,
+    normalizedScroll,
+    sliderDataZoom,
+    xAxisData,
+    onDataZoomWindowChanged,
+  ]);
 
   // 组件卸载时清理资源
   useEffect(() => {