@hsu-react/ui 0.0.8 → 0.0.10

package/lib/components/Chart/Bar/index.js

@@ -34,6 +34,8 @@ const ChartBar = props => {
     insideDataZoom,
     sliderDataZoom,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
@@ -42,6 +44,7 @@ const ChartBar = props => {
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);
+  const prevXAxisKeyRef = (0, _react.useRef)(null);
   const legendScrollRef = (0, _react.useRef)(null);
   const normalizedScroll = (0, _react.useMemo)(() => (0, _cartesian.resolveScrollConfig)(scrollConfig), [scrollConfig]);
 
@@ -198,8 +201,37 @@ const ChartBar = props => {
       chartInstanceRef.current = chart;
     }
 
-    // 设置配置
+    // 设置配置：notMerge 会把 dataZoom 窗口重置回初始位置，
+    // x 轴数据未变化时（如坐标轴重算/图例点选触发的重渲染）先记录当前窗口，设置后恢复
+    const xAxisKey = xAxisData?.join("\u0001") ?? "";
+    const prevZoomRanges = prevXAxisKeyRef.current === xAxisKey ? chart.getOption()?.dataZoom : undefined;
+    prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption, true);
+    const nextZooms = chartOption.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()?.dataZoom;
+      const zoom = zooms?.[0];
+      const totalLen = xAxisData?.length ?? 0;
+      if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
+        onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(zoom.start, zoom.end, totalLen));
+      } else {
+        // 无 dataZoom（如数据量不足未启用滚动）时窗口即全量，同步一次避免残留旧窗口
+        onDataZoomWindowChanged({
+          startIndex: 0,
+          endIndex: Math.max(0, totalLen - 1)
+        });
+      }
+    }
 
     // 添加 resize 监听
     window.addEventListener("resize", handleResize);
@@ -215,6 +247,31 @@ const ChartBar = props => {
       chartInstanceRef.current?.on("click", onClick);
     }
 
+    // 图例点选事件
+    const handleLegendSelectChanged = params => {
+      onLegendSelectChanged?.(params.selected);
+    };
+    if (onLegendSelectChanged) {
+      chartInstanceRef.current?.on("legendselectchanged", handleLegendSelectChanged);
+    }
+
+    // dataZoom 原生交互（slider 拖动 / inside 缩放）→ 同步可见窗口
+    const handleDataZoom = params => {
+      const raw = params;
+      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?.((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
+      }
+    };
+    if (onDataZoomWindowChanged) {
+      chartInstanceRef.current?.on("datazoom", handleDataZoom);
+    }
+
     // 图例自动滚动（参考 Pie 组件）
     const opt = chartOption;
     const legendDataLen = Array.isArray(opt.legend) ? opt.legend[0]?.data?.length : opt.legend?.data?.length;
@@ -239,12 +296,18 @@ const ChartBar = props => {
       if (onClick) {
         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;
       }
     };
-  }, [chartOption, handleResize, onClick, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
+  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
 
   // 处理自动播放
   (0, _react.useEffect)(() => {
@@ -260,10 +323,11 @@ const ChartBar = props => {
       interval: normalizedScroll.interval,
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
-      enableWheelScroll
+      enableWheelScroll,
+      onWindowChange: onDataZoomWindowChanged ? (startPercent, endPercent) => onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
     });
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
 
   // 组件卸载时清理资源
   (0, _react.useEffect)(() => {

package/lib/components/Chart/Line/index.d.ts

@@ -1,7 +1,7 @@
 import * as echarts from "echarts";
 import { ChartCommonProps, SeriesDataType } from "..";
 import React from "react";
-import { ChartScrollConfig } from "../_utils/cartesian";
+import { ChartScrollConfig, DataZoomIndexWindow } from "../_utils/cartesian";
 export interface ChartLineProps extends ChartCommonProps {
     chartTitle?: string;
     xAxisData?: Array<string>;
@@ -10,6 +10,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 */

package/lib/components/Chart/Line/index.js

@@ -34,6 +34,8 @@ const ChartLine = props => {
     insideDataZoom,
     sliderDataZoom,
     onClick,
+    onLegendSelectChanged,
+    onDataZoomWindowChanged,
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
@@ -42,6 +44,7 @@ const ChartLine = props => {
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);
+  const prevXAxisKeyRef = (0, _react.useRef)(null);
   const legendScrollRef = (0, _react.useRef)(null);
   const normalizedScroll = (0, _react.useMemo)(() => (0, _cartesian.resolveScrollConfig)(scrollConfig), [scrollConfig]);
 
@@ -194,8 +197,37 @@ const ChartLine = props => {
       chartInstanceRef.current = chart;
     }
 
-    // 设置配置
+    // 设置配置：notMerge 会把 dataZoom 窗口重置回初始位置，
+    // x 轴数据未变化时（如坐标轴重算/图例点选触发的重渲染）先记录当前窗口，设置后恢复
+    const xAxisKey = xAxisData?.join("\u0001") ?? "";
+    const prevZoomRanges = prevXAxisKeyRef.current === xAxisKey ? chart.getOption()?.dataZoom : undefined;
+    prevXAxisKeyRef.current = xAxisKey;
     chart.setOption(chartOption, true);
+    const nextZooms = chartOption.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()?.dataZoom;
+      const zoom = zooms?.[0];
+      const totalLen = xAxisData?.length ?? 0;
+      if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
+        onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(zoom.start, zoom.end, totalLen));
+      } else {
+        // 无 dataZoom（如数据量不足未启用滚动）时窗口即全量，同步一次避免残留旧窗口
+        onDataZoomWindowChanged({
+          startIndex: 0,
+          endIndex: Math.max(0, totalLen - 1)
+        });
+      }
+    }
 
     // 添加 resize 监听
     window.addEventListener("resize", handleResize);
@@ -211,6 +243,31 @@ const ChartLine = props => {
       chartInstanceRef.current?.on("click", onClick);
     }
 
+    // 图例点选事件
+    const handleLegendSelectChanged = params => {
+      onLegendSelectChanged?.(params.selected);
+    };
+    if (onLegendSelectChanged) {
+      chartInstanceRef.current?.on("legendselectchanged", handleLegendSelectChanged);
+    }
+
+    // dataZoom 原生交互（slider 拖动 / inside 缩放）→ 同步可见窗口
+    const handleDataZoom = params => {
+      const raw = params;
+      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?.((0, _cartesian.percentWindowToIndexWindow)(info.start, info.end, xAxisData?.length ?? 0));
+      }
+    };
+    if (onDataZoomWindowChanged) {
+      chartInstanceRef.current?.on("datazoom", handleDataZoom);
+    }
+
     // 图例自动滚动（与 Pie/Bar 一致）
     const opt = chartOption;
     const legendDataLen = Array.isArray(opt.legend) ? opt.legend[0]?.data?.length : opt.legend?.data?.length;
@@ -235,12 +292,18 @@ const ChartLine = props => {
       if (onClick) {
         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;
       }
     };
-  }, [chartOption, handleResize, onClick, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
+  }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
 
   // 处理自动播放
   (0, _react.useEffect)(() => {
@@ -256,10 +319,11 @@ const ChartLine = props => {
       interval: normalizedScroll.interval,
       startIndex: normalizedScroll.startIndex,
       autoPlay: normalizedScroll.autoScroll,
-      enableWheelScroll
+      enableWheelScroll,
+      onWindowChange: onDataZoomWindowChanged ? (startPercent, endPercent) => onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(startPercent, endPercent, xAxisData.length)) : undefined
     });
     return dispose;
-  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData]);
+  }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
 
   // 组件卸载时清理资源
   (0, _react.useEffect)(() => {

package/lib/components/Chart/_utils/autoSmooth.d.ts

@@ -7,6 +7,8 @@ export interface AutoScrollByItemProps {
     startIndex?: number;
     autoPlay?: boolean;
     enableWheelScroll?: boolean;
+    /** 窗口变化回调（创建同步、自动滚动、滚轮、resize 均触发），参数为当前窗口 start/end 百分比 */
+    onWindowChange?: (startPercent: number, endPercent: number) => void;
 }
 export declare function autoScrollByItem(props: AutoScrollByItemProps): {
     pause: () => void;

package/lib/components/Chart/_utils/autoSmooth.js

@@ -12,7 +12,8 @@ function autoScrollByItem(props) {
     interval = 2000,
     startIndex = 0,
     autoPlay = true,
-    enableWheelScroll = true
+    enableWheelScroll = true,
+    onWindowChange
   } = props;
   const total = xAxisData?.length ?? 0;
   if (total <= 0) {
@@ -28,6 +29,14 @@ function autoScrollByItem(props) {
   const initialStartPercent = total > 0 ? initialStartIndex / total * 100 : 0;
   let start = initialStartPercent;
   let end = Math.min(initialStartPercent + windowSizePercent, 100);
+
+  // 图表已有 dataZoom 窗口时（组件重渲染重建滚动器）从当前位置继续，
+  // 避免图例点选、坐标轴重算等触发的重渲染把已滚动位置重置回初始窗口
+  const currentZoom = chart.getOption()?.dataZoom?.[0];
+  if (typeof currentZoom?.start === "number" && typeof currentZoom?.end === "number") {
+    start = currentZoom.start;
+    end = currentZoom.end;
+  }
   const syncDataZoomRange = () => {
     const option = chart.getOption();
     const currentDataZoom = option?.dataZoom;
@@ -39,6 +48,7 @@ function autoScrollByItem(props) {
         end
       }))
     });
+    onWindowChange?.(start, end);
   };
   syncDataZoomRange();
   let timer = null;

package/lib/components/Chart/_utils/cartesian.d.ts

@@ -18,6 +18,17 @@ export interface NormalizedScrollConfig {
     sliderVisible?: boolean;
     wheelModeWhenSliderHidden: "scroll" | "none";
 }
+/** dataZoom 当前可见窗口对应的 x 轴索引区间（闭区间） */
+export interface DataZoomIndexWindow {
+    startIndex: number;
+    endIndex: number;
+}
+/**
+ * 把 dataZoom 的 start/end 百分比换算为 x 轴索引窗口。
+ * 与本组件族写入 dataZoom 的百分比约定一致（index / total * 100），
+ * 对 echarts 原生交互产生的百分比做外扩取整，边界最多多含一项，不影响坐标轴量级。
+ */
+export declare const percentWindowToIndexWindow: (startPercent: number, endPercent: number, total: number) => DataZoomIndexWindow;
 export declare const createDefaultCategoryXAxis: (xAxisData?: Array<string>) => ChartOptionType;
 export declare const createDefaultValueYAxis: (mode?: "bar" | "line") => ChartOptionType;
 export declare const buildCartesianSeriesOptions: (mode: "bar" | "line", seriesData?: SeriesDataType, series?: echarts.SeriesOption | echarts.SeriesOption[]) => echarts.SeriesOption[];

package/lib/components/Chart/_utils/cartesian.js

@@ -3,7 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolveScrollConfig = exports.getSliderShow = exports.createDefaultValueYAxis = exports.createDefaultCategoryXAxis = exports.buildCartesianSeriesOptions = void 0;
+exports.resolveScrollConfig = exports.percentWindowToIndexWindow = exports.getSliderShow = exports.createDefaultValueYAxis = exports.createDefaultCategoryXAxis = exports.buildCartesianSeriesOptions = void 0;
+/** dataZoom 当前可见窗口对应的 x 轴索引区间（闭区间） */
+
+/**
+ * 把 dataZoom 的 start/end 百分比换算为 x 轴索引窗口。
+ * 与本组件族写入 dataZoom 的百分比约定一致（index / total * 100），
+ * 对 echarts 原生交互产生的百分比做外扩取整，边界最多多含一项，不影响坐标轴量级。
+ */
+const percentWindowToIndexWindow = (startPercent, endPercent, total) => {
+  if (total <= 0) return {
+    startIndex: 0,
+    endIndex: 0
+  };
+  const startIndex = Math.max(0, Math.min(total - 1, Math.floor(startPercent / 100 * total)));
+  const endIndex = Math.max(startIndex, Math.min(total - 1, Math.ceil(endPercent / 100 * total) - 1));
+  return {
+    startIndex,
+    endIndex
+  };
+};
+exports.percentWindowToIndexWindow = percentWindowToIndexWindow;
 const createDefaultCategoryXAxis = xAxisData => ({
   type: "category",
   boundaryGap: true,

package/lib/components/Chart/chartUtils/chartTooltipFormatter.d.ts

@@ -18,6 +18,8 @@ export interface ChartTooltipFormatterProps {
     hideMarker?: boolean;
     textStyle?: Record<string, unknown>;
     unit?: string;
+    /** 多系列时按数值从大到小排序展示（大的在上） */
+    sortDescending?: boolean;
 }
 declare const chartTooltipFormatter: (props: ChartTooltipFormatterProps) => string;
 export default chartTooltipFormatter;

package/lib/components/Chart/chartUtils/chartTooltipFormatter.js

@@ -14,7 +14,8 @@ const chartTooltipFormatter = props => {
       color: "#666",
       fontWeight: 400
     },
-    unit
+    unit,
+    sortDescending
   } = props;
   if (!Array.isArray(params)) {
     return `
@@ -43,10 +44,11 @@ const chartTooltipFormatter = props => {
       </div>
     `;
   }
-  const items = params?.map((item, idx) => {
+  const sortedParams = sortDescending ? [...params].sort((a, b) => (Number(b.value) || 0) - (Number(a.value) || 0)) : params;
+  const items = sortedParams?.map((item, idx) => {
     const value = item.value ?? "";
     return `
-      <div style="margin: 0 0 ${idx === params.length - 1 ? "0" : "10px"} 0;line-height:1;">
+      <div style="margin: 0 0 ${idx === sortedParams.length - 1 ? "0" : "10px"} 0;line-height:1;">
         <div style="margin: 0px 0 0;line-height:1;">
           ${hideMarker ? "" : `${item?.marker}`}
           <span style="font-size:${textStyle?.fontSize}px;color:${textStyle?.color};font-weight:${textStyle?.fontWeight};margin-left:2px">${item?.seriesName}</span>

package/lib/components/Chart/chartUtils/index.d.ts

@@ -2,6 +2,9 @@ import chartTooltipFormatter from "./chartTooltipFormatter";
 import { TooltipParams, ChartTooltipFormatterProps } from "./chartTooltipFormatter";
 import { autoScrollLegend, AutoScrollLegendProps } from "../_utils/autoScrollLegend";
 import { calculateAxisConfig } from "./calculateAxisConfig";
+import { useLegendSelection, LegendSelectionResult } from "./useLegendSelection";
+import { useDataZoomWindow, DataZoomWindowOptions, DataZoomWindowResult } from "./useDataZoomWindow";
+import { DataZoomIndexWindow } from "../_utils/cartesian";
 import { MB_PER_GB, MB_PER_TB, trimAxisNumber, chineseMagnitudeDivisor, formatChineseMagnitudeTick, mbDisplayTier, formatMbAxisTick } from "./yAxisDisplayUnit";
-export { chartTooltipFormatter, autoScrollLegend, calculateAxisConfig, MB_PER_GB, MB_PER_TB, trimAxisNumber, chineseMagnitudeDivisor, formatChineseMagnitudeTick, mbDisplayTier, formatMbAxisTick, };
-export type { TooltipParams, ChartTooltipFormatterProps, AutoScrollLegendProps, };
+export { chartTooltipFormatter, autoScrollLegend, calculateAxisConfig, useLegendSelection, useDataZoomWindow, MB_PER_GB, MB_PER_TB, trimAxisNumber, chineseMagnitudeDivisor, formatChineseMagnitudeTick, mbDisplayTier, formatMbAxisTick, };
+export type { TooltipParams, ChartTooltipFormatterProps, AutoScrollLegendProps, LegendSelectionResult, DataZoomWindowOptions, DataZoomWindowResult, DataZoomIndexWindow, };

package/lib/components/Chart/chartUtils/index.js

@@ -63,8 +63,22 @@ Object.defineProperty(exports, "trimAxisNumber", {
     return _yAxisDisplayUnit.trimAxisNumber;
   }
 });
+Object.defineProperty(exports, "useDataZoomWindow", {
+  enumerable: true,
+  get: function () {
+    return _useDataZoomWindow.useDataZoomWindow;
+  }
+});
+Object.defineProperty(exports, "useLegendSelection", {
+  enumerable: true,
+  get: function () {
+    return _useLegendSelection.useLegendSelection;
+  }
+});
 var _chartTooltipFormatter = _interopRequireDefault(require("./chartTooltipFormatter"));
 var _autoScrollLegend = require("../_utils/autoScrollLegend");
 var _calculateAxisConfig = require("./calculateAxisConfig");
+var _useLegendSelection = require("./useLegendSelection");
+var _useDataZoomWindow = require("./useDataZoomWindow");
 var _yAxisDisplayUnit = require("./yAxisDisplayUnit");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/Chart/chartUtils/useDataZoomWindow.d.ts

@@ -0,0 +1,19 @@
+import { DataZoomIndexWindow } from "../_utils/cartesian";
+export interface DataZoomWindowOptions {
+    /** 开关：是否按 dataZoom 当前可见窗口重算坐标轴，默认开启 */
+    enabled?: boolean;
+}
+export interface DataZoomWindowResult {
+    /** 当前可见窗口；开关关闭或尚未收到回调时为 null（表示全量） */
+    zoomWindow: DataZoomIndexWindow | null;
+    /** 传给 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged；开关关闭时为 undefined（不绑定事件） */
+    onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => void;
+    /** 按当前可见窗口裁剪系列数据，配合 calculateAxisConfig 只对展示部分重算坐标轴 */
+    sliceByZoomWindow: <T>(values?: T[] | null) => T[];
+}
+/**
+ * dataZoom 可见窗口管理：配合 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged，
+ * 在调用方按"当前可见窗口"裁剪数据后重算 Y 轴 min/max/interval（calculateAxisConfig），
+ * 实现滑块拖动/滚轮/自动滚动时坐标轴跟随展示部分动态重算；可与 useLegendSelection 叠加。
+ */
+export declare function useDataZoomWindow(options?: DataZoomWindowOptions): DataZoomWindowResult;

package/lib/components/Chart/chartUtils/useDataZoomWindow.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataZoomWindow = useDataZoomWindow;
+var _react = require("react");
+/**
+ * dataZoom 可见窗口管理：配合 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged，
+ * 在调用方按"当前可见窗口"裁剪数据后重算 Y 轴 min/max/interval（calculateAxisConfig），
+ * 实现滑块拖动/滚轮/自动滚动时坐标轴跟随展示部分动态重算；可与 useLegendSelection 叠加。
+ */
+function useDataZoomWindow(options) {
+  const enabled = options?.enabled ?? true;
+  const [zoomWindow, setZoomWindow] = (0, _react.useState)(null);
+  const onDataZoomWindowChanged = (0, _react.useCallback)(next => {
+    // 窗口未变化时保持原引用，避免重渲染 → 同步回调 → 再重渲染的循环
+    setZoomWindow(prev => prev && prev.startIndex === next.startIndex && prev.endIndex === next.endIndex ? prev : next);
+  }, []);
+  const effectiveWindow = enabled ? zoomWindow : null;
+  const sliceByZoomWindow = (0, _react.useCallback)(values => {
+    if (!values) return [];
+    if (!effectiveWindow) return values;
+    return values.slice(effectiveWindow.startIndex, effectiveWindow.endIndex + 1);
+  }, [effectiveWindow]);
+  return {
+    zoomWindow: effectiveWindow,
+    onDataZoomWindowChanged: enabled ? onDataZoomWindowChanged : undefined,
+    sliceByZoomWindow
+  };
+}

package/lib/components/Chart/chartUtils/useLegendSelection.d.ts

@@ -0,0 +1,14 @@
+export interface LegendSelectionResult {
+    /** 传给图表 legend.selected，保证重渲染(setOption notMerge)后隐藏状态不丢 */
+    legendSelected: Record<string, boolean>;
+    /** 传给图表 onLegendSelectChanged */
+    onLegendSelectChanged: (selected: Record<string, boolean>) => void;
+    /** 判断某系列当前是否可见（未点过的系列默认可见） */
+    isSeriesVisible: (name?: string | null) => boolean;
+}
+/**
+ * 图例选中状态管理：配合 Chart.Bar / Chart.Line 的 onLegendSelectChanged，
+ * 在调用方按"当前可见系列"重算 Y 轴 min/max/interval（calculateAxisConfig），
+ * 实现图例隐藏某一项后坐标轴自动重算。
+ */
+export declare function useLegendSelection(): LegendSelectionResult;

package/lib/components/Chart/chartUtils/useLegendSelection.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLegendSelection = useLegendSelection;
+var _react = require("react");
+/**
+ * 图例选中状态管理：配合 Chart.Bar / Chart.Line 的 onLegendSelectChanged，
+ * 在调用方按"当前可见系列"重算 Y 轴 min/max/interval（calculateAxisConfig），
+ * 实现图例隐藏某一项后坐标轴自动重算。
+ */
+function useLegendSelection() {
+  const [legendSelected, setLegendSelected] = (0, _react.useState)({});
+  const onLegendSelectChanged = (0, _react.useCallback)(selected => {
+    setLegendSelected({
+      ...selected
+    });
+  }, []);
+  const isSeriesVisible = (0, _react.useCallback)(name => name == null || legendSelected[name] !== false, [legendSelected]);
+  return {
+    legendSelected,
+    onLegendSelectChanged,
+    isSeriesVisible
+  };
+}

package/lib/components/FormItem/ItemContainer/index.d.ts

@@ -35,6 +35,8 @@ export interface ItemContainerProps extends FormItemProps {
     labelBreak?: boolean;
     hideAdditiona?: boolean;
     hideLabel?: boolean;
+    /** 显隐开关，由 FormItem 消费；在此解构剥离，避免透传到 DOM */
+    visible?: boolean;
 }
 declare const ItemContainer: React.FC<ItemContainerProps>;
 export default ItemContainer;

package/lib/components/FormItem/ItemContainer/index.js

@@ -55,6 +55,7 @@ const ItemContainer = props => {
     labelBreak = false,
     hideAdditiona = false,
     hideLabel = false,
+    visible: _visible,
     ...formItemProps
   } = props;
   const {
@@ -149,12 +150,8 @@ const ItemContainer = props => {
   if (!permitted) {
     return null;
   }
-
-  // 页面层 FormItemProps 的展示控制属性（如 visible）不属于 antd Form.Item，
-  // 剥离后再透传，避免被 antd 转发到 DOM 触发 React 非法属性警告。
-  const restFormItemProps = Object.fromEntries(Object.entries(formItemProps).filter(([key]) => key !== "visible"));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form.Item, {
-    ...restFormItemProps,
+    ...formItemProps,
     name: name,
     rules: [{
       required,

package/lib/components/Modal/index.module.scss

@@ -62,6 +62,7 @@
         align-items: center;
         justify-content: flex-end;
         column-gap: 10px;
+        margin-left: auto; // title 为空时仍保持靠右
       }
     }
   }

package/lib/components/Panel/ListPanel/ListModalPanel/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Search = _interopRequireDefault(require("../../../Search"));
 var _Table = _interopRequireDefault(require("../../../Table"));
+var _icons = require("@ant-design/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
@@ -49,6 +50,12 @@ const ListModalPanel = props => {
   } = (0, _usePermissions.default)(hasPermi);
   const [_columns, setColumns] = (0, _react.useState)(columns);
   const [showColumnMgt, setShowColumnMgt] = (0, _react.useState)(false);
+  const [isFullscreen, setIsFullscreen] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (modalConfig.open) {
+      setIsFullscreen(false);
+    }
+  }, [modalConfig.open]);
   (0, _react.useEffect)(() => {
     if (columnMgt && columns?.length) {
       const _columns = columns?.map(col => {
@@ -109,9 +116,20 @@ const ListModalPanel = props => {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
-      width: 1400,
-      className: (0, _classnames.default)(modalClassName),
       ...modalConfig,
+      width: isFullscreen ? "100vw" : modalConfig.width ?? 1400,
+      ...(isFullscreen ? {
+        full: true
+      } : {}),
+      className: (0, _classnames.default)(_indexModule.default.modal, modalClassName, {
+        [_indexModule.default.fullscreen]: isFullscreen
+      }),
+      titleButtonGroup: [{
+        type: "text",
+        icon: isFullscreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FullscreenExitOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FullscreenOutlined, {}),
+        title: isFullscreen ? "退出全屏" : "全屏",
+        onClick: () => setIsFullscreen(v => !v)
+      }, ...(modalConfig.titleButtonGroup ?? [])],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classnames.default)(_indexModule.default.ListModalPanel, className),
         children: [extraContent, SearchComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -130,6 +148,7 @@ const ListModalPanel = props => {
             scroll: true,
             serialNumberColumn: true,
             bordered: true,
+            fillPanel: true,
             ...tableConfig,
             columns: _columns
           })]

package/lib/components/Panel/ListPanel/ListModalPanel/index.module.scss

@@ -1,10 +1,25 @@
+.modal {
+  // 定高让内部“height: 100%”链路可解析（antd Modal 默认内容自适应，内层设置 height/max-height 无效）
+  height: 700px;
+
+  &.fullscreen {
+    top: 0;
+
+    width: 100vw !important;
+    max-width: 100vw !important;
+    height: 100vh !important;
+
+    margin: 0;
+    padding-bottom: 0;
+  }
+}
+
 .ListModalPanel {
   display: flex;
   flex-direction: column;
   row-gap: 10px;
 
-  height: max-content;
-  max-height: 70vh;
+  height: 100%;
 
   .search {
     padding: 0px;