@hsu-react/ui 2.5.5 → 2.5.6

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

@@ -17,6 +17,7 @@ import { buildCartesianSeriesOptions, createDefaultCategoryXAxis, createDefaultV
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
 import useLatestRef from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChartBar = function ChartBar(props) {
   var className = props.className,
@@ -45,7 +46,11 @@ var ChartBar = function ChartBar(props) {
     legendVisibleCount = _props$legendVisibleC === void 0 ? 8 : _props$legendVisibleC,
     _props$legendScrollIn = props.legendScrollInterval,
     legendScrollInterval = _props$legendScrollIn === void 0 ? 1500 : _props$legendScrollIn,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/es/components/Chart/Bubble/index.js

@@ -22,6 +22,7 @@ import styles from "../index.module.scss";
 import * as echarts from "echarts";
 import { defaultBubbleColorList, drawCircles } from "../_utils/bubble";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 // Extended data item type containing all properties the chart needs
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -38,7 +39,11 @@ var Bubble = function Bubble(props) {
     title = props.title,
     onChart = props.onChart,
     onClick = props.onClick,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   var resizeObserverRef = useRef(null);

package/es/components/Chart/Common/index.js

@@ -12,12 +12,17 @@ import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import * as echarts from "echarts";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Common = function Common(props) {
   var className = props.className,
     style = props.style,
     onChart = props.onChart,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/es/components/Chart/Gauge/index.js

@@ -11,6 +11,7 @@ import * as echarts from "echarts";
 import useContainerReady from "../_hooks/useContainerReady";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import styles from "../index.module.scss";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Gauge = function Gauge(props) {
   var className = props.className,
@@ -29,7 +30,11 @@ var Gauge = function Gauge(props) {
     title = _ref.title,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#1675FB" : _ref$color,
-    coreSeries = _objectWithoutProperties(_ref, _excluded);
+    restSeries = _objectWithoutProperties(_ref, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreSeries = useShallowStable(restSeries);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/es/components/Chart/Heatmap/index.js

@@ -21,7 +21,10 @@ import { createDefaultHeatmapXAxis, createDefaultHeatmapYAxis } from "../_utils/
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+var DEFAULT_IN_RANGE_COLOR = ["#8BCCFB", "#75C3FB", "#5AB5F6", "#42AEFA", "#2DA1F5", "#0F89E1", "#056FBB", "#025794", "#0A4089"];
 var Heatmap = function Heatmap(props) {
   var className = props.className,
     style = props.style,
@@ -40,8 +43,12 @@ var Heatmap = function Heatmap(props) {
     onClick = props.onClick,
     zeroColor = props.zeroColor,
     _props$inRangeColor = props.inRangeColor,
-    inRangeColor = _props$inRangeColor === void 0 ? ["#8BCCFB", "#75C3FB", "#5AB5F6", "#42AEFA", "#2DA1F5", "#0F89E1", "#056FBB", "#025794", "#0A4089"] : _props$inRangeColor,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    inRangeColor = _props$inRangeColor === void 0 ? DEFAULT_IN_RANGE_COLOR : _props$inRangeColor,
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -17,6 +17,7 @@ import { buildCartesianSeriesOptions, createDefaultCategoryXAxis, createDefaultV
 import { resolveChartChrome } from "../_utils/chartTheme";
 import useIsDark from "../../../hooks/useIsDark";
 import useLatestRef from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChartLine = function ChartLine(props) {
   var className = props.className,
@@ -45,7 +46,11 @@ var ChartLine = function ChartLine(props) {
     legendVisibleCount = _props$legendVisibleC === void 0 ? 8 : _props$legendVisibleC,
     _props$legendScrollIn = props.legendScrollInterval,
     legendScrollInterval = _props$legendScrollIn === void 0 ? 1500 : _props$legendScrollIn,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/es/components/Chart/Pie/Pie3D/index.js

@@ -9,7 +9,15 @@ import { useMouseOverHandler, useGlobalOutHandler } from "./_hooks";
 import { getPie3DOption } from "./_utils/option";
 import styles from "../../index.module.scss";
 import { useLatestRef } from "../../../../hooks/useLatestRef";
+import useShallowStable from "../../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
+// 解构默认值写成字面量会每次渲染新建一个对象，进依赖数组就让 memo 恒不命中；提到模块级常量
+var DEFAULT_TOOLTIP = {
+  show: false
+};
+var DEFAULT_LABEL = {
+  show: true
+};
 var ChartPie3D = function ChartPie3D(props) {
   var className = props.className,
     style = props.style,
@@ -33,18 +41,18 @@ var ChartPie3D = function ChartPie3D(props) {
     _props$yOffset = props.yOffset,
     yOffset = _props$yOffset === void 0 ? -0.2 : _props$yOffset,
     _props$tooltip = props.tooltip,
-    tooltip = _props$tooltip === void 0 ? {
-      show: false
-    } : _props$tooltip,
+    tooltip = _props$tooltip === void 0 ? DEFAULT_TOOLTIP : _props$tooltip,
     _props$label = props.label,
-    label = _props$label === void 0 ? {
-      show: true
-    } : _props$label,
+    label = _props$label === void 0 ? DEFAULT_LABEL : _props$label,
     _props$enableMouseCon = props.enableMouseControl,
     enableMouseControl = _props$enableMouseCon === void 0 ? false : _props$enableMouseCon,
     onChart = props.onChart,
     onClick = props.onClick,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/es/components/Chart/Pie/index.js

@@ -20,7 +20,10 @@ import { autoScrollLegend } from "../chartUtils";
 import styles from "../index.module.scss";
 import ChartPie3D from "./Pie3D";
 import { useLatestRef } from "../../../hooks/useLatestRef";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+var EMPTY_EXTEND_SERIES = [];
 var ChartPie = function ChartPie(props) {
   var className = props.className,
     style = props.style,
@@ -32,7 +35,7 @@ var ChartPie = function ChartPie(props) {
     title = props.title,
     onChart = props.onChart,
     _props$extendSeries = props.extendSeries,
-    extendSeries = _props$extendSeries === void 0 ? [] : _props$extendSeries,
+    extendSeries = _props$extendSeries === void 0 ? EMPTY_EXTEND_SERIES : _props$extendSeries,
     onClick = props.onClick,
     _props$enableLegendAu = props.enableLegendAutoScroll,
     enableLegendAutoScroll = _props$enableLegendAu === void 0 ? false : _props$enableLegendAu,
@@ -48,7 +51,11 @@ var ChartPie = function ChartPie(props) {
     spanAngle = _props$spanAngle === void 0 ? 180 : _props$spanAngle,
     center = props.center,
     radius = props.radius,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/es/components/Chart/Polar/index.js

@@ -11,7 +11,10 @@ import * as echarts from "echarts";
 import useContainerReady from "../_hooks/useContainerReady";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import styles from "../index.module.scss";
+import useShallowStable from "../../../hooks/useShallowStable";
 import { jsx as _jsx } from "react/jsx-runtime";
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+var DEFAULT_COLOR = ["#00FFA3", "#00FFA3"];
 var Polar = function Polar(props) {
   var className = props.className,
     style = props.style,
@@ -26,8 +29,12 @@ var Polar = function Polar(props) {
     textStyle = props.textStyle,
     seriesData = props.seriesData,
     _props$color = props.color,
-    color = _props$color === void 0 ? ["#00FFA3", "#00FFA3"] : _props$color,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    color = _props$color === void 0 ? DEFAULT_COLOR : _props$color,
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/es/components/Chart/Radar/index.js

@@ -17,6 +17,7 @@ import * as echarts from "echarts";
 import useContainerReady from "../_hooks/useContainerReady";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import styles from "../index.module.scss";
+import useShallowStable from "../../../hooks/useShallowStable";
 
 /** Single-indicator tooltip trigger mode
  * - `point`  triggers only when hovering data points/lines (native echarts item trigger)
@@ -38,7 +39,11 @@ var Radar = function Radar(props) {
     singleIndicatorTooltipProp = _props$singleIndicato === void 0 ? false : _props$singleIndicato,
     singleIndicatorMode = props.singleIndicatorMode,
     singleIndicatorHoverFill = props.singleIndicatorHoverFill,
-    coreOption = _objectWithoutProperties(props, _excluded);
+    restOption = _objectWithoutProperties(props, _excluded);
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  var coreOption = useShallowStable(restOption);
   var chartRef = useRef(null);
   var chartInstanceRef = useRef(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/es/hooks/useShallowStable.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 把一个**内容没变、但每次渲染都新建**的对象收敛成**引用恒定**的对象：
+ * 浅比较（自有键 ＋ `Object.is` 比值）相等就继续返回上一次那个引用。
+ *
+ * 用途只有一个：让它可以直接进 `useMemo` / `useEffect` 的依赖数组。
+ *
+ * React 的依赖数组按 `Object.is` 比引用，所以依赖里只要混进一个「每次渲染都新建
+ * 的对象」，memo 就**恒不命中**、effect 就**每渲染必重跑**。组件内部最容易出现
+ * 这种对象的地方是 rest 解构：
+ *
+ * ```tsx
+ * const { className, style, ...coreOption } = props; // coreOption 每次都是新对象
+ * const option = useMemo(() => ({ ...coreOption }), [coreOption]); // 永远不命中
+ * ```
+ *
+ * 消费方就算把每一个 prop 都 memo 好，也躲不掉——新对象是组件自己建的。
+ * 正确写法是让这个对象回到值语义：
+ *
+ * ```tsx
+ * const { className, style, ...restOption } = props;
+ * const coreOption = useShallowStable(restOption); // 内容不变 → 引用不变
+ * ```
+ *
+ * 注意这**不是**「缓存结果跳过副作用」：memo 该重算时照样重算、effect 该重跑时
+ * 照样重跑——只要 rest 里任何一个值真的变了，浅比较就不相等，新引用立刻透出去。
+ *
+ * 渲染期间读写 ref 的安全性：并发渲染下被丢弃的那次渲染可能已经把 ref 换成了它
+ * 自己的对象，但那个对象与当次 props 浅相等，所以后续渲染拿到的引用**内容永远
+ * 与当前 props 一致**，不会读到过期值。
+ */
+export declare function useShallowStable<T extends object>(value: T): T;
+export default useShallowStable;

package/es/hooks/useShallowStable.js

@@ -0,0 +1,54 @@
+import { useRef } from "react";
+
+/**
+ * 把一个**内容没变、但每次渲染都新建**的对象收敛成**引用恒定**的对象：
+ * 浅比较（自有键 ＋ `Object.is` 比值）相等就继续返回上一次那个引用。
+ *
+ * 用途只有一个：让它可以直接进 `useMemo` / `useEffect` 的依赖数组。
+ *
+ * React 的依赖数组按 `Object.is` 比引用，所以依赖里只要混进一个「每次渲染都新建
+ * 的对象」，memo 就**恒不命中**、effect 就**每渲染必重跑**。组件内部最容易出现
+ * 这种对象的地方是 rest 解构：
+ *
+ * ```tsx
+ * const { className, style, ...coreOption } = props; // coreOption 每次都是新对象
+ * const option = useMemo(() => ({ ...coreOption }), [coreOption]); // 永远不命中
+ * ```
+ *
+ * 消费方就算把每一个 prop 都 memo 好，也躲不掉——新对象是组件自己建的。
+ * 正确写法是让这个对象回到值语义：
+ *
+ * ```tsx
+ * const { className, style, ...restOption } = props;
+ * const coreOption = useShallowStable(restOption); // 内容不变 → 引用不变
+ * ```
+ *
+ * 注意这**不是**「缓存结果跳过副作用」：memo 该重算时照样重算、effect 该重跑时
+ * 照样重跑——只要 rest 里任何一个值真的变了，浅比较就不相等，新引用立刻透出去。
+ *
+ * 渲染期间读写 ref 的安全性：并发渲染下被丢弃的那次渲染可能已经把 ref 换成了它
+ * 自己的对象，但那个对象与当次 props 浅相等，所以后续渲染拿到的引用**内容永远
+ * 与当前 props 一致**，不会读到过期值。
+ */
+export function useShallowStable(value) {
+  var ref = useRef(value);
+  if (!shallowEqual(ref.current, value)) {
+    ref.current = value;
+  }
+  return ref.current;
+}
+function shallowEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  var aKeys = Object.keys(a);
+  var bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (var _i = 0, _aKeys = aKeys; _i < _aKeys.length; _i++) {
+    var key = _aKeys[_i];
+    if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+    if (!Object.is(a[key], b[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+export default useShallowStable;

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

@@ -14,6 +14,7 @@ var _cartesian = require("../_utils/cartesian");
 var _chartTheme = require("../_utils/chartTheme");
 var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
 var _useLatestRef = _interopRequireDefault(require("../../../hooks/useLatestRef"));
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -43,8 +44,12 @@ const ChartBar = props => {
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -9,6 +9,7 @@ var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var echarts = _interopRequireWildcard(require("echarts"));
 var _bubble = require("../_utils/bubble");
 var _useLatestRef = require("../../../hooks/useLatestRef");
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -28,8 +29,12 @@ const Bubble = props => {
     title,
     onChart,
     onClick,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);

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

@@ -9,6 +9,7 @@ var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerR
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var echarts = _interopRequireWildcard(require("echarts"));
 var _useLatestRef = require("../../../hooks/useLatestRef");
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -18,8 +19,12 @@ const Common = props => {
     className,
     style,
     onChart,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -8,6 +8,7 @@ var echarts = _interopRequireWildcard(require("echarts"));
 var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -29,8 +30,12 @@ const Gauge = props => {
     axisLabel,
     title,
     color = "#1675FB",
-    ...coreSeries
+    ...restSeries
   } = series;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreSeries = (0, _useShallowStable.default)(restSeries);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -12,10 +12,13 @@ var _heatmap = require("../_utils/heatmap");
 var _chartTheme = require("../_utils/chartTheme");
 var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
 var _useLatestRef = require("../../../hooks/useLatestRef");
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const DEFAULT_IN_RANGE_COLOR = ["#8BCCFB", "#75C3FB", "#5AB5F6", "#42AEFA", "#2DA1F5", "#0F89E1", "#056FBB", "#025794", "#0A4089"];
 const Heatmap = props => {
   const {
     className,
@@ -34,9 +37,13 @@ const Heatmap = props => {
     onChart,
     onClick,
     zeroColor,
-    inRangeColor = ["#8BCCFB", "#75C3FB", "#5AB5F6", "#42AEFA", "#2DA1F5", "#0F89E1", "#056FBB", "#025794", "#0A4089"],
-    ...coreOption
+    inRangeColor = DEFAULT_IN_RANGE_COLOR,
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -14,6 +14,7 @@ var _cartesian = require("../_utils/cartesian");
 var _chartTheme = require("../_utils/chartTheme");
 var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
 var _useLatestRef = _interopRequireDefault(require("../../../hooks/useLatestRef"));
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -43,8 +44,12 @@ const ChartLine = props => {
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
     legendScrollInterval = 1500,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

package/lib/components/Chart/Pie/Pie3D/index.js

@@ -12,10 +12,18 @@ var _hooks = require("./_hooks");
 var _option = require("./_utils/option");
 var _indexModule = _interopRequireDefault(require("../../index.module.scss"));
 var _useLatestRef = require("../../../../hooks/useLatestRef");
+var _useShallowStable = _interopRequireDefault(require("../../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
+// 解构默认值写成字面量会每次渲染新建一个对象，进依赖数组就让 memo 恒不命中；提到模块级常量
+const DEFAULT_TOOLTIP = {
+  show: false
+};
+const DEFAULT_LABEL = {
+  show: true
+};
 const ChartPie3D = props => {
   const {
     className,
@@ -30,17 +38,17 @@ const ChartPie3D = props => {
     minHeight = 1,
     maxHeight = 10,
     yOffset = -0.2,
-    tooltip = {
-      show: false
-    },
-    label = {
-      show: true
-    },
+    tooltip = DEFAULT_TOOLTIP,
+    label = DEFAULT_LABEL,
     enableMouseControl = false,
     onChart,
     onClick,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -11,10 +11,13 @@ var _chartUtils = require("../chartUtils");
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var _Pie3D = _interopRequireDefault(require("./Pie3D"));
 var _useLatestRef = require("../../../hooks/useLatestRef");
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const EMPTY_EXTEND_SERIES = [];
 const ChartPie = props => {
   const {
     className,
@@ -26,7 +29,7 @@ const ChartPie = props => {
     series,
     title,
     onChart,
-    extendSeries = [],
+    extendSeries = EMPTY_EXTEND_SERIES,
     onClick,
     enableLegendAutoScroll = false,
     legendVisibleCount = 8,
@@ -36,8 +39,12 @@ const ChartPie = props => {
     spanAngle = 180,
     center,
     radius,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -8,10 +8,13 @@ var echarts = _interopRequireWildcard(require("echarts"));
 var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
+// 解构默认值写成字面量会每次渲染新建一个数组，进依赖数组就让 memo 恒不命中；提到模块级常量
+const DEFAULT_COLOR = ["#00FFA3", "#00FFA3"];
 const Polar = props => {
   const {
     className,
@@ -26,9 +29,13 @@ const Polar = props => {
     title2Style,
     textStyle,
     seriesData,
-    color = ["#00FFA3", "#00FFA3"],
-    ...coreOption
+    color = DEFAULT_COLOR,
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why

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

@@ -8,6 +8,7 @@ var echarts = _interopRequireWildcard(require("echarts"));
 var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
+var _useShallowStable = _interopRequireDefault(require("../../../hooks/useShallowStable"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -30,8 +31,12 @@ const Radar = props => {
     singleIndicatorTooltip: singleIndicatorTooltipProp = false,
     singleIndicatorMode,
     singleIndicatorHoverFill,
-    ...coreOption
+    ...restOption
   } = props;
+  // rest 解构出来的对象每次渲染都是新引用，直接进依赖数组会让 chartOption 的 memo
+  // 恒不命中 —— 父组件每渲染一次就重跑一次 setOption(notMerge)，动画重播、悬浮态被清掉。
+  // useShallowStable 让它回到值语义：内容浅相等就复用同一引用，真变了立刻透出新引用。
+  const coreOption = (0, _useShallowStable.default)(restOption);
   const chartRef = (0, _react.useRef)(null);
   const chartInstanceRef = (0, _react.useRef)(null);
   // Defers `echarts.init` until the container has a box — see the hook for why