@hsu-react/ui 2.4.0 → 2.4.2

package/es/components/Chart/_hooks/useContainerReady.js

@@ -0,0 +1,56 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useState } from "react";
+
+/**
+ * Whether the referenced element has a non-zero box yet.
+ *
+ * `echarts.init` on a 0×0 element logs `Can't get DOM width or height` and builds a canvas with no
+ * size, recovering only on the next `resize()`. A chart hits that path whenever it mounts before
+ * layout has given it space — inside a keep-alive tab that is not the active one, a collapsed
+ * panel, a modal that has not opened yet — so consuming apps see the warning for charts that end
+ * up rendering perfectly well.
+ *
+ * Gating `init` on this flag defers it to the first frame the element actually occupies space.
+ *
+ * It **latches**: once measured, the element going back to 0×0 (a keep-alive tab losing focus)
+ * must not read as "not ready" again, or the init effect would tear the chart down and re-create
+ * it on every tab switch.
+ */
+var useContainerReady = function useContainerReady(ref) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    ready = _useState2[0],
+    setReady = _useState2[1];
+  useEffect(function () {
+    if (ready) return;
+    var el = ref.current;
+    if (!el) return;
+    var measure = function measure() {
+      var _el$getBoundingClient = el.getBoundingClientRect(),
+        width = _el$getBoundingClient.width,
+        height = _el$getBoundingClient.height;
+      if (width > 0 && height > 0) {
+        setReady(true);
+        return true;
+      }
+      return false;
+    };
+
+    // Already laid out on mount — the common case, and it must not cost an extra frame
+    if (measure()) return;
+    var observer = new ResizeObserver(function () {
+      if (measure()) observer.disconnect();
+    });
+    observer.observe(el);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [ready, ref]);
+  return ready;
+};
+export default useContainerReady;

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

@@ -1,5 +1,6 @@
 import * as echarts from "echarts";
 import { ChartOptionType, SeriesDataType } from "..";
+import { ChartChrome } from "./chartTheme";
 export interface ChartScrollConfig {
     enabled?: boolean;
     autoScroll?: boolean;
@@ -29,8 +30,8 @@ export interface DataZoomIndexWindow {
  * percentages produced by native echarts interactions are rounded outward, so each boundary may include at most one extra item, without affecting the axis magnitude.
  */
 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 createDefaultCategoryXAxis: (xAxisData: Array<string> | undefined, chrome: ChartChrome) => ChartOptionType;
+export declare const createDefaultValueYAxis: (mode: "bar" | "line" | undefined, chrome: ChartChrome) => ChartOptionType;
 export declare const buildCartesianSeriesOptions: (mode: "bar" | "line", seriesData?: SeriesDataType, series?: echarts.SeriesOption | echarts.SeriesOption[]) => echarts.SeriesOption[];
 export declare const getSliderShow: (zoom?: echarts.DataZoomComponentOption | Record<string, unknown>) => boolean | undefined;
 export declare const resolveScrollConfig: (scrollConfig?: ChartScrollConfig) => NormalizedScrollConfig;

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

@@ -23,7 +23,7 @@ export var percentWindowToIndexWindow = function percentWindowToIndexWindow(star
     endIndex: endIndex
   };
 };
-export var createDefaultCategoryXAxis = function createDefaultCategoryXAxis(xAxisData) {
+export var createDefaultCategoryXAxis = function createDefaultCategoryXAxis(xAxisData, chrome) {
   return {
     type: "category",
     boundaryGap: true,
@@ -31,10 +31,10 @@ export var createDefaultCategoryXAxis = function createDefaultCategoryXAxis(xAxi
     axisLabel: {
       interval: 0,
       hideOverlap: true,
-      textStyle: {
-        fontSize: 14,
-        color: "#373D48"
-      }
+      // echarts removed the `textStyle` nesting under `axisLabel` in v4: keeping it means both
+      // properties are silently dropped *and* a deprecation warning is logged on every render.
+      fontSize: chrome.fontSize,
+      color: chrome.axis
     },
     axisTick: {
       show: false
@@ -43,17 +43,16 @@ export var createDefaultCategoryXAxis = function createDefaultCategoryXAxis(xAxi
 };
 export var createDefaultValueYAxis = function createDefaultValueYAxis() {
   var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "bar";
+  var chrome = arguments.length > 1 ? arguments[1] : undefined;
   return {
     type: "value",
     axisLabel: {
-      textStyle: {
-        fontSize: 14,
-        color: "#373D48"
-      }
+      fontSize: chrome.fontSize,
+      color: chrome.axis
     },
     splitLine: mode === "line" ? {
       lineStyle: {
-        color: "#C9CED6",
+        color: chrome.splitLine,
         type: "dashed"
       }
     } : {

package/es/components/Chart/_utils/chartTheme.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Colours for the chart *chrome* — axis ticks, split lines, legend labels.
+ *
+ * echarts options are plain JS, so they cannot read the `--vita-*` CSS variables the rest of the
+ * library styles itself with; the literal values have to be resolved here instead. These used to
+ * be hard-coded to a light-mode slate (`#373D48` / `#C9CED6`), which left every axis and legend
+ * nearly invisible once the page switched to the dark palette.
+ *
+ * The plotted data is deliberately *not* covered here: series colours come from echarts' own
+ * palette or from whatever the caller passes as `color`, and both read fine on either background.
+ */
+export interface ChartChrome {
+    /** Legend labels — a real label, so it sits on the foreground ramp */
+    text: string;
+    /** Axis tick labels — secondary information, one step down */
+    axis: string;
+    /** Split lines behind the plot area */
+    splitLine: string;
+    /** Base font size, same scale the rest of the library uses */
+    fontSize: number;
+}
+export declare const resolveChartChrome: (dark: boolean) => ChartChrome;

package/es/components/Chart/_utils/chartTheme.js

@@ -0,0 +1,23 @@
+import { darkTokens, fontTokens, lightTokens } from "../../../styles/tokens";
+
+/**
+ * Colours for the chart *chrome* — axis ticks, split lines, legend labels.
+ *
+ * echarts options are plain JS, so they cannot read the `--vita-*` CSS variables the rest of the
+ * library styles itself with; the literal values have to be resolved here instead. These used to
+ * be hard-coded to a light-mode slate (`#373D48` / `#C9CED6`), which left every axis and legend
+ * nearly invisible once the page switched to the dark palette.
+ *
+ * The plotted data is deliberately *not* covered here: series colours come from echarts' own
+ * palette or from whatever the caller passes as `color`, and both read fine on either background.
+ */
+
+export var resolveChartChrome = function resolveChartChrome(dark) {
+  var t = dark ? darkTokens : lightTokens;
+  return {
+    text: t.foreground,
+    axis: t.mutedForeground,
+    splitLine: t.border,
+    fontSize: fontTokens.size
+  };
+};

package/es/components/Chart/_utils/heatmap.d.ts

@@ -1,3 +1,4 @@
 import { ChartOptionType } from "..";
-export declare const createDefaultHeatmapXAxis: (xAxisData?: string[]) => ChartOptionType;
-export declare const createDefaultHeatmapYAxis: (yAxisData?: string[]) => ChartOptionType;
+import { ChartChrome } from "./chartTheme";
+export declare const createDefaultHeatmapXAxis: (xAxisData: string[] | undefined, chrome: ChartChrome) => ChartOptionType;
+export declare const createDefaultHeatmapYAxis: (yAxisData: string[] | undefined, chrome: ChartChrome) => ChartOptionType;

package/es/components/Chart/_utils/heatmap.js

@@ -1,4 +1,4 @@
-export var createDefaultHeatmapXAxis = function createDefaultHeatmapXAxis(xAxisData) {
+export var createDefaultHeatmapXAxis = function createDefaultHeatmapXAxis(xAxisData, chrome) {
   return {
     type: "category",
     data: xAxisData,
@@ -8,17 +8,16 @@ export var createDefaultHeatmapXAxis = function createDefaultHeatmapXAxis(xAxisD
     axisLabel: {
       interval: 0,
       hideOverlap: true,
-      textStyle: {
-        fontSize: 14,
-        color: "#373D48"
-      }
+      // See the note in `cartesian.ts`: `axisLabel.textStyle` has been deprecated since echarts 4
+      fontSize: chrome.fontSize,
+      color: chrome.axis
     },
     axisTick: {
       show: false
     }
   };
 };
-export var createDefaultHeatmapYAxis = function createDefaultHeatmapYAxis(yAxisData) {
+export var createDefaultHeatmapYAxis = function createDefaultHeatmapYAxis(yAxisData, chrome) {
   return {
     type: "category",
     data: yAxisData,
@@ -26,10 +25,8 @@ export var createDefaultHeatmapYAxis = function createDefaultHeatmapYAxis(yAxisD
       show: true
     },
     axisLabel: {
-      textStyle: {
-        fontSize: 14,
-        color: "#373D48"
-      }
+      fontSize: chrome.fontSize,
+      color: chrome.axis
     },
     axisTick: {
       show: false

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

@@ -21,8 +21,18 @@
 
   height: 100%;
 
+  // Inside a modal the Search must not keep its card chrome. On a page it is an outlined white
+  // card standing on the grey page background; in a modal the body is already `--vita-surface`,
+  // so the same treatment paints a white card on white and only the border survives — a stray
+  // outline around the search row. The padding was already being cleared here; the background and
+  // border are the other half of the same intent, and `.tableContainer` below is flush for
+  // exactly this reason.
   .search {
     padding: 0px;
+
+    background: transparent;
+
+    border: none;
   }
 
   .tableContainer {

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

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var echarts = _interopRequireWildcard(require("echarts"));
+var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var _autoScrollLegend = require("../_utils/autoScrollLegend");
 var _autoSmooth = require("../_utils/autoSmooth");
 var _cartesian = require("../_utils/cartesian");
+var _chartTheme = require("../_utils/chartTheme");
+var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
 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,15 +46,21 @@ const ChartBar = props => {
   } = props;
   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
+  const containerReady = (0, _useContainerReady.default)(chartRef);
   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]);
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and
+  // legend colours have to be resolved against the active appearance here
+  const isDark = (0, _useIsDark.default)();
+  const chrome = (0, _react.useMemo)(() => (0, _chartTheme.resolveChartChrome)(isDark), [isDark]);
 
   // Cache the chart option with useMemo
   const chartOption = (0, _react.useMemo)(() => {
-    const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData);
-    const def_yAxis = (0, _cartesian.createDefaultValueYAxis)("bar");
+    const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData, chrome);
+    const def_yAxis = (0, _cartesian.createDefaultValueYAxis)("bar", chrome);
 
     // Process xAxis config
     const processedXAxis = Array.isArray(xAxis) ? xAxis?.map(item => ({
@@ -155,8 +164,7 @@ const ChartBar = props => {
           data: legendData,
           icon: "circle",
           textStyle: {
-            color: "#373D48",
-            fontSize: 16
+            color: chrome.text
           },
           itemWidth: 8,
           itemHeight: 8,
@@ -183,16 +191,20 @@ const ChartBar = props => {
       ...coreOption
     };
     return option;
-  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, tooltip, legendData, legend, seriesData, series, enableLegendAutoScroll, coreOption]);
+  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, tooltip, legendData, legend, seriesData, series, enableLegendAutoScroll, coreOption, chrome]);
 
   // Callback for handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   (0, _react.useEffect)(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
@@ -322,7 +334,7 @@ const ChartBar = props => {
     };
   }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
   // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
-  normalizedScroll]);
+  normalizedScroll, containerReady]);
 
   // Handle auto play
   (0, _react.useEffect)(() => {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var echarts = _interopRequireWildcard(require("echarts"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -20,6 +21,8 @@ const Common = props => {
   } = props;
   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
+  const containerReady = (0, _useContainerReady.default)(chartRef);
   const resizeObserverRef = (0, _react.useRef)(null);
 
   // Cache the chart configuration with useMemo
@@ -32,12 +35,16 @@ const Common = props => {
 
   // Callback that handles chart resize
   const handleResize = (0, _react.useCallback)(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   (0, _react.useEffect)(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse an existing instance
     let chart = chartInstanceRef.current;
@@ -65,7 +72,7 @@ const Common = props => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, onChart]);
+  }, [chartOption, handleResize, onChart, containerReady]);
 
   // Clean up resources on component unmount
   (0, _react.useEffect)(() => {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var echarts = _interopRequireWildcard(require("echarts"));
+var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -32,6 +33,8 @@ const Gauge = props => {
   } = series;
   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
+  const containerReady = (0, _useContainerReady.default)(chartRef);
   const resizeObserverRef = (0, _react.useRef)(null);
 
   // Cache the chart option with useMemo
@@ -92,12 +95,16 @@ const Gauge = props => {
 
   // Callback for handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   (0, _react.useEffect)(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
@@ -122,7 +129,7 @@ const Gauge = props => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize]);
+  }, [chartOption, handleResize, containerReady]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {

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

@@ -5,9 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var echarts = _interopRequireWildcard(require("echarts"));
 var _heatmap = require("../_utils/heatmap");
+var _chartTheme = require("../_utils/chartTheme");
+var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
 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); }
@@ -35,7 +38,13 @@ const Heatmap = props => {
   } = props;
   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
+  const containerReady = (0, _useContainerReady.default)(chartRef);
   const resizeObserverRef = (0, _react.useRef)(null);
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and legend
+  // colours have to be resolved against the active appearance here
+  const isDark = (0, _useIsDark.default)();
+  const chrome = (0, _react.useMemo)(() => (0, _chartTheme.resolveChartChrome)(isDark), [isDark]);
 
   // Process the data and generate the chart option
   const chartOption = (0, _react.useMemo)(() => {
@@ -76,7 +85,7 @@ const Heatmap = props => {
       left: "right",
       top: "center",
       textStyle: {
-        color: "#373D48"
+        color: chrome.text
       },
       inRange: {
         color: inRangeColor
@@ -84,7 +93,7 @@ const Heatmap = props => {
     };
 
     // Process xAxis config
-    const def_xAxis = (0, _heatmap.createDefaultHeatmapXAxis)(xAxisData);
+    const def_xAxis = (0, _heatmap.createDefaultHeatmapXAxis)(xAxisData, chrome);
     const processedXAxis = Array.isArray(xAxis) ? xAxis?.map(item => ({
       ...def_xAxis,
       data: item?.type === "value" ? undefined : xAxisData,
@@ -96,7 +105,7 @@ const Heatmap = props => {
     };
 
     // Process yAxis config
-    const def_yAxis = (0, _heatmap.createDefaultHeatmapYAxis)(yAxisData);
+    const def_yAxis = (0, _heatmap.createDefaultHeatmapYAxis)(yAxisData, chrome);
     const processedYAxis = Array.isArray(yAxis) ? yAxis?.map(item => ({
       ...def_yAxis,
       data: item?.type === "value" ? undefined : yAxisData,
@@ -172,16 +181,20 @@ const Heatmap = props => {
       ...coreOption
     };
     return option;
-  }, [data, inRangeColor, xAxisData, xAxis, yAxisData, yAxis, propVisualMap, grid, chartTitle, title, tooltip, series, coreOption, zeroColor]);
+  }, [data, inRangeColor, xAxisData, xAxis, yAxisData, yAxis, propVisualMap, grid, chartTitle, title, tooltip, series, coreOption, zeroColor, chrome]);
 
   // Callback for handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   (0, _react.useEffect)(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
@@ -216,7 +229,7 @@ const Heatmap = props => {
         chartInstanceRef.current?.off("click", onClick);
       }
     };
-  }, [chartOption, handleResize, onChart, onClick]);
+  }, [chartOption, handleResize, onChart, onClick, containerReady]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {

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

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var echarts = _interopRequireWildcard(require("echarts"));
+var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
 var _autoScrollLegend = require("../_utils/autoScrollLegend");
 var _autoSmooth = require("../_utils/autoSmooth");
 var _cartesian = require("../_utils/cartesian");
+var _chartTheme = require("../_utils/chartTheme");
+var _useIsDark = _interopRequireDefault(require("../../../hooks/useIsDark"));
 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,15 +46,21 @@ const ChartLine = props => {
   } = props;
   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
+  const containerReady = (0, _useContainerReady.default)(chartRef);
   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]);
+  // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and
+  // legend colours have to be resolved against the active appearance here
+  const isDark = (0, _useIsDark.default)();
+  const chrome = (0, _react.useMemo)(() => (0, _chartTheme.resolveChartChrome)(isDark), [isDark]);
 
   // Cache the chart option with useMemo
   const chartOption = (0, _react.useMemo)(() => {
-    const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData);
-    const def_yAxis = (0, _cartesian.createDefaultValueYAxis)("line");
+    const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData, chrome);
+    const def_yAxis = (0, _cartesian.createDefaultValueYAxis)("line", chrome);
 
     // Process xAxis config
     const processedXAxis = Array.isArray(xAxis) ? xAxis?.map(item => ({
@@ -148,7 +157,7 @@ const ChartLine = props => {
           top: "5%",
           icon: "circle",
           textStyle: {
-            color: "#373D48"
+            color: chrome.text
           },
           itemWidth: 8,
           itemHeight: 8,
@@ -179,16 +188,20 @@ const ChartLine = props => {
       ...coreOption
     };
     return option;
-  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, legendData, legend, tooltip, seriesData, series, enableLegendAutoScroll, coreOption]);
+  }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, legendData, legend, tooltip, seriesData, series, enableLegendAutoScroll, coreOption, chrome]);
 
   // Callback for handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   (0, _react.useEffect)(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
@@ -318,7 +331,7 @@ const ChartLine = props => {
     };
   }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval,
   // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
-  normalizedScroll]);
+  normalizedScroll, containerReady]);
 
   // Handle auto play
   (0, _react.useEffect)(() => {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var echarts = _interopRequireWildcard(require("echarts"));
+var _useContainerReady = _interopRequireDefault(require("../../_hooks/useContainerReady"));
 require("echarts-gl");
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("./_hooks");
@@ -41,6 +42,8 @@ const ChartPie3D = props => {
   } = props;
   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
+  const containerReady = (0, _useContainerReady.default)(chartRef);
   const resizeObserverRef = (0, _react.useRef)(null);
   const hoveredIndexRef = (0, _react.useRef)("");
   const optionRef = (0, _react.useRef)(null);
@@ -62,6 +65,10 @@ const ChartPie3D = props => {
     });
   }, [pieData, internalDiameterRatio, tooltip, alpha, beta, autoRotate, distance, coreOption, minHeight, maxHeight, yOffset, label, enableMouseControl]);
   const handleResize = (0, _react.useCallback)(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
   const handleMouseOver = (0, _hooks.useMouseOverHandler)(optionRef, chartInstanceRef, hoveredIndexRef, {
@@ -78,7 +85,7 @@ const ChartPie3D = props => {
     autoRotate
   });
   (0, _react.useEffect)(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
     let chart = chartInstanceRef.current;
     if (!chart) {
       chart = echarts.init(chartRef.current);
@@ -107,7 +114,7 @@ const ChartPie3D = props => {
         }
       }
     };
-  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChart, onClick]);
+  }, [chartOption, handleResize, handleMouseOver, handleGlobalOut, onChart, onClick, containerReady]);
   (0, _react.useEffect)(() => {
     return () => {
       if (resizeObserverRef.current) {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var echarts = _interopRequireWildcard(require("echarts"));
+var _useContainerReady = _interopRequireDefault(require("../_hooks/useContainerReady"));
 var _react = _interopRequireWildcard(require("react"));
 var _chartUtils = require("../chartUtils");
 var _indexModule = _interopRequireDefault(require("../index.module.scss"));
@@ -38,6 +39,8 @@ const ChartPie = props => {
   } = props;
   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
+  const containerReady = (0, _useContainerReady.default)(chartRef);
   const resizeObserverRef = (0, _react.useRef)(null);
   const legendScrollRef = (0, _react.useRef)(null);
 
@@ -191,12 +194,16 @@ const ChartPie = props => {
 
   // Callback for handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   (0, _react.useEffect)(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
@@ -252,7 +259,7 @@ const ChartPie = props => {
         legendScrollRef.current = null;
       }
     };
-  }, [chartOption, handleResize, onChart, onClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval]);
+  }, [chartOption, handleResize, onChart, onClick, enableLegendAutoScroll, seriesData, legendVisibleCount, legendScrollInterval, containerReady]);
 
   // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {