@hsu-react/ui 0.0.12 → 0.0.14

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

@@ -25,7 +25,7 @@ const Tree = props => {
   const chartInstanceRef = (0, _react.useRef)(null);
   const resizeObserverRef = (0, _react.useRef)(null);
 
-  // 使用 useMemo 缓存 chart 配置
+  // Cache the chart option with useMemo
   const chartOption = (0, _react.useMemo)(() => {
     const option = {
       series: {
@@ -41,22 +41,22 @@ const Tree = props => {
     return option;
   }, [seriesData, series]);
 
-  // 处理图表 resize 的回调
+  // Callback handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
     chartInstanceRef.current?.resize();
   }, []);
 
-  // 初始化图表
+  // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current) return;
 
-    // 初始化或获取已存在的实例
+    // Initialize a new instance or reuse the existing one
     let chart = chartInstanceRef.current;
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
 
-      // 首次初始化时添加 finished 事件监听
+      // Attach the finished event listener on first initialization
       chart.on("finished", () => {
         getImage?.(chart.getDataURL({
           type: "png",
@@ -66,33 +66,33 @@ const Tree = props => {
       });
     }
 
-    // 设置配置
+    // Apply the option
     chart.setOption(chartOption, true);
 
-    // 添加 resize 监听
+    // Add resize listener
     window.addEventListener("resize", handleResize);
 
-    // 添加 ResizeObserver
+    // Add ResizeObserver
     if (chartRef.current && !resizeObserverRef.current) {
       resizeObserverRef.current = new ResizeObserver(handleResize);
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // 清理函数
+    // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [chartOption, handleResize, getImage]);
 
-  // 组件卸载时清理资源
+  // Clean up resources on unmount
   (0, _react.useEffect)(() => {
     return () => {
-      // 清理 ResizeObserver
+      // Clean up the ResizeObserver
       if (resizeObserverRef.current) {
         resizeObserverRef.current.disconnect();
         resizeObserverRef.current = null;
       }
-      // 销毁图表实例
+      // Dispose the chart instance
       if (chartInstanceRef.current) {
         chartInstanceRef.current.off("finished");
         chartInstanceRef.current.dispose();

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

@@ -7,7 +7,7 @@ export interface AutoScrollByItemProps {
     startIndex?: number;
     autoPlay?: boolean;
     enableWheelScroll?: boolean;
-    /** 窗口变化回调（创建同步、自动滚动、滚轮、resize 均触发），参数为当前窗口 start/end 百分比 */
+    /** Window change callback (fired on creation sync, auto-scroll, wheel, and resize), receives the current window start/end percentages */
     onWindowChange?: (startPercent: number, endPercent: number) => void;
 }
 export declare function autoScrollByItem(props: AutoScrollByItemProps): {

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

@@ -30,8 +30,8 @@ function autoScrollByItem(props) {
   let start = initialStartPercent;
   let end = Math.min(initialStartPercent + windowSizePercent, 100);
 
-  // 图表已有 dataZoom 窗口时（组件重渲染重建滚动器）从当前位置继续，
-  // 避免图例点选、坐标轴重算等触发的重渲染把已滚动位置重置回初始窗口
+  // If the chart already has a dataZoom window (scroller rebuilt on component re-render), continue from the current position
+  // to prevent re-renders triggered by legend toggling, axis recalculation, etc. from resetting the scrolled position back to the initial window
   const currentZoom = chart.getOption()?.dataZoom?.[0];
   if (typeof currentZoom?.start === "number" && typeof currentZoom?.end === "number") {
     start = currentZoom.start;

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

@@ -50,10 +50,10 @@ function drawCircles(radiusList, maxX, maxY) {
   const MIN_GAP = Math.max(1.5, avgRadius * 0.08);
   const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
 
-  // 按容器长宽比例将同心圆扩展为同心椭圆（面积守恒：aspectX * aspectY = 1）：
-  // - 容器正方形时 aspectX = aspectY = 1（标准圆形环）
-  // - 容器越扁平，长边方向被适度拉伸、短边方向被对应压缩，
-  //   使层层外扩既贴合区域比例，又不会让边缘气泡飞离中心，保持"同心紧凑"观感。
+  // Stretch concentric circles into concentric ellipses based on the container aspect ratio (area-preserving: aspectX * aspectY = 1):
+  // - For a square container, aspectX = aspectY = 1 (standard circular rings)
+  // - The flatter the container, the more the long axis is moderately stretched and the short axis correspondingly compressed,
+  //   so the outward ring expansion follows the region's proportions without letting edge bubbles drift away from the center, keeping a "concentric and compact" look.
   const aspectRatio = maxY > 0 ? maxX / maxY : 1;
   const aspectX = Math.sqrt(aspectRatio);
   const aspectY = 1 / aspectX;
@@ -78,7 +78,7 @@ function drawCircles(radiusList, maxX, maxY) {
       continue;
     }
 
-    // 同心椭圆的"单位环半径"上限：需同时保证在 x、y 两个方向上不越界
+    // Upper bound of the concentric ellipse "unit ring radius": must stay within bounds in both the x and y directions
     const maxRingUnitX = aspectX > 0 ? Math.min(maxInnerX - centerX, centerX - minX) / aspectX : 0;
     const maxRingUnitY = aspectY > 0 ? Math.min(maxInnerY - centerY, centerY - minY) / aspectY : 0;
     const maxSearchRadius = Math.max(0, Math.min(maxRingUnitX, maxRingUnitY));
@@ -96,9 +96,9 @@ function drawCircles(radiusList, maxX, maxY) {
     }
 
     // 1) Deterministic concentric rings.
-    // 环间距要同时满足：
-    // - 与最大气泡（位于中心）不重叠：centerRadius + radius + gap
-    // - 标准六边形紧致堆叠：2 * avgRadius + gap
+    // Ring spacing must satisfy both:
+    // - No overlap with the largest bubble (at the center): centerRadius + radius + gap
+    // - Standard hexagonal close packing: 2 * avgRadius + gap
     const centerRadius = radiusList[sortedIndices[0]] ?? avgRadius;
     const ringSpacing = Math.max(centerRadius + radius + MIN_GAP, avgRadius * 2 + MIN_GAP, 8);
     for (let ring = 1; ring * ringSpacing <= maxSearchRadius && !placed; ring++) {

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

@@ -18,15 +18,15 @@ export interface NormalizedScrollConfig {
     sliderVisible?: boolean;
     wheelModeWhenSliderHidden: "scroll" | "none";
 }
-/** dataZoom 当前可见窗口对应的 x 轴索引区间（闭区间） */
+/** X-axis index range (closed interval) corresponding to the current visible dataZoom window */
 export interface DataZoomIndexWindow {
     startIndex: number;
     endIndex: number;
 }
 /**
- * 把 dataZoom 的 start/end 百分比换算为 x 轴索引窗口。
- * 与本组件族写入 dataZoom 的百分比约定一致（index / total * 100），
- * 对 echarts 原生交互产生的百分比做外扩取整，边界最多多含一项，不影响坐标轴量级。
+ * Converts dataZoom start/end percentages into an x-axis index window.
+ * Follows the same percentage convention this component family writes to dataZoom (index / total * 100);
+ * 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;

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

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resolveScrollConfig = exports.percentWindowToIndexWindow = exports.getSliderShow = exports.createDefaultValueYAxis = exports.createDefaultCategoryXAxis = exports.buildCartesianSeriesOptions = void 0;
-/** dataZoom 当前可见窗口对应的 x 轴索引区间（闭区间） */
+/** X-axis index range (closed interval) corresponding to the current visible dataZoom window */
 
 /**
- * 把 dataZoom 的 start/end 百分比换算为 x 轴索引窗口。
- * 与本组件族写入 dataZoom 的百分比约定一致（index / total * 100），
- * 对 echarts 原生交互产生的百分比做外扩取整，边界最多多含一项，不影响坐标轴量级。
+ * Converts dataZoom start/end percentages into an x-axis index window.
+ * Follows the same percentage convention this component family writes to dataZoom (index / total * 100);
+ * percentages produced by native echarts interactions are rounded outward, so each boundary may include at most one extra item, without affecting the axis magnitude.
  */
 const percentWindowToIndexWindow = (startPercent, endPercent, total) => {
   if (total <= 0) return {

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

@@ -1,8 +1,8 @@
 /**
- * 计算合适的Y轴范围和间隔，确保0是刻度点，且总刻度数固定为6个
- * @param min 最小值
- * @param max 最大值
- * @returns { min, max, interval } Y轴配置
+ * Calculates a suitable Y-axis range and interval, ensuring 0 is a tick point and the total tick count is fixed at 6
+ * @param min minimum value
+ * @param max maximum value
+ * @returns { min, max, interval } Y-axis configuration
  */
 export declare function calculateAxisConfig(min: number, max: number): {
     min: number;

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

@@ -5,25 +5,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.calculateAxisConfig = calculateAxisConfig;
 /**
- * 计算合适的Y轴范围和间隔，确保0是刻度点，且总刻度数固定为6个
- * @param min 最小值
- * @param max 最大值
- * @returns { min, max, interval } Y轴配置
+ * Calculates a suitable Y-axis range and interval, ensuring 0 is a tick point and the total tick count is fixed at 6
+ * @param min minimum value
+ * @param max maximum value
+ * @returns { min, max, interval } Y-axis configuration
  */
 function calculateAxisConfig(min, max) {
-  // 根据数值大小选择合适的取整基数
+  // Choose a suitable rounding base according to the value's magnitude
   const getNiceNumber = value => {
     if (value === 0) return 1;
     const magnitude = Math.pow(10, Math.floor(Math.log10(Math.abs(value))));
     const normalized = value / magnitude;
 
-    // 选择 1, 2, 5, 10 这样的"整齐"数字
+    // Pick a "nice" number like 1, 2, 5, or 10
     let niceNormalized;
     if (normalized <= 1) niceNormalized = 1;else if (normalized <= 2) niceNormalized = 2;else if (normalized <= 5) niceNormalized = 5;else niceNormalized = 10;
     return niceNormalized * magnitude;
   };
 
-  // 处理无效数据
+  // Handle invalid data
   if (min === Number.POSITIVE_INFINITY || max === Number.NEGATIVE_INFINITY) {
     return {
       min: 0,
@@ -32,7 +32,7 @@ function calculateAxisConfig(min, max) {
     };
   }
 
-  // 如果数据全部为0，返回默认值（6个刻度：0,1,2,3,4,5）
+  // If all data is 0, return default values (6 ticks: 0,1,2,3,4,5)
   if (min === 0 && max === 0) {
     return {
       min: 0,
@@ -41,22 +41,22 @@ function calculateAxisConfig(min, max) {
     };
   }
 
-  // 如果数据跨越0（有正有负）
+  // If the data spans 0 (has both positive and negative values)
   if (min < 0 && max > 0) {
     const absMax = Math.abs(max * 1.1);
     const absMin = Math.abs(min * 1.1);
 
-    // 计算总范围，分成5个间隔（6个刻度）
+    // Compute the total range, split into 5 intervals (6 ticks)
     const totalRange = absMax + absMin;
     const roughInterval = totalRange / 5;
     const interval = getNiceNumber(roughInterval);
 
-    // 计算需要多少个刻度能覆盖正负数据
+    // Compute how many ticks are needed to cover the positive and negative data
     const negativeSteps = Math.ceil(absMin / interval);
     const positiveSteps = Math.ceil(absMax / interval);
-    const totalSteps = negativeSteps + positiveSteps; // 不包括0
+    const totalSteps = negativeSteps + positiveSteps; // excluding 0
 
-    // 如果总刻度数正好是6个（5个间隔+0）
+    // If the total tick count is exactly 6 (5 intervals + 0)
     if (totalSteps === 5) {
       return {
         min: -negativeSteps * interval,
@@ -65,7 +65,7 @@ function calculateAxisConfig(min, max) {
       };
     }
 
-    // 否则，调整为固定5个间隔，按比例分配正负两边
+    // Otherwise, adjust to a fixed 5 intervals, distributed proportionally between the positive and negative sides
     const ratio = absMax / (absMax + absMin);
     const positiveIntervals = Math.round(ratio * 5);
     const negativeIntervals = 5 - positiveIntervals;
@@ -76,7 +76,7 @@ function calculateAxisConfig(min, max) {
     };
   }
 
-  // 如果全是非负数（固定6个刻度：0到max，分5段）
+  // If all values are non-negative (fixed 6 ticks: 0 to max, split into 5 segments)
   if (min >= 0) {
     const roughMax = max * 1.1;
     const roughInterval = roughMax / 5;
@@ -88,7 +88,7 @@ function calculateAxisConfig(min, max) {
     };
   }
 
-  // 如果全是负数（固定6个刻度：min到0，分5段）
+  // If all values are negative (fixed 6 ticks: min to 0, split into 5 segments)
   const roughMin = Math.abs(min * 1.1);
   const roughInterval = roughMin / 5;
   const interval = getNiceNumber(roughInterval);

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

@@ -18,7 +18,7 @@ export interface ChartTooltipFormatterProps {
     hideMarker?: boolean;
     textStyle?: Record<string, unknown>;
     unit?: string;
-    /** 多系列时按数值从大到小排序展示（大的在上） */
+    /** For multiple series, display sorted by value in descending order (largest on top) */
     sortDescending?: boolean;
 }
 declare const chartTooltipFormatter: (props: ChartTooltipFormatterProps) => string;

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

@@ -45,7 +45,7 @@ const chartTooltipFormatter = props => {
     `;
   }
 
-  // value 可能是数值、拼了单位的字符串("123次")或带千分位("1,234"），排序前统一还原成数值
+  // value may be a number, a string with a unit appended ("123次"), or one with thousands separators ("1,234"); normalize back to a number before sorting
   const toSortValue = v => {
     if (typeof v === "number") return v;
     if (Array.isArray(v)) return toSortValue(v[v.length - 1]);

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

@@ -1,19 +1,19 @@
 import { DataZoomIndexWindow } from "../_utils/cartesian";
 export interface DataZoomWindowOptions {
-    /** 开关：是否按 dataZoom 当前可见窗口重算坐标轴，默认开启 */
+    /** Toggle: whether to recalculate the axis based on the current visible dataZoom window; enabled by default */
     enabled?: boolean;
 }
 export interface DataZoomWindowResult {
-    /** 当前可见窗口；开关关闭或尚未收到回调时为 null（表示全量） */
+    /** Current visible window; null when disabled or before any callback has been received (meaning the full range) */
     zoomWindow: DataZoomIndexWindow | null;
-    /** 传给 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged；开关关闭时为 undefined（不绑定事件） */
+    /** onDataZoomWindowChanged to pass to Chart.Bar / Chart.Line; undefined when disabled (event not bound) */
     onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => void;
-    /** 按当前可见窗口裁剪系列数据，配合 calculateAxisConfig 只对展示部分重算坐标轴 */
+    /** Slices series data by the current visible window; used with calculateAxisConfig to recalculate the axis for the displayed portion only */
     sliceByZoomWindow: <T>(values?: T[] | null) => T[];
 }
 /**
- * dataZoom 可见窗口管理：配合 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged，
- * 在调用方按"当前可见窗口"裁剪数据后重算 Y 轴 min/max/interval（calculateAxisConfig），
- * 实现滑块拖动/滚轮/自动滚动时坐标轴跟随展示部分动态重算；可与 useLegendSelection 叠加。
+ * dataZoom visible-window management: works with Chart.Bar / Chart.Line's onDataZoomWindowChanged
+ * so the caller can slice data by the "current visible window" and recalculate the Y-axis min/max/interval (calculateAxisConfig),
+ * making the axis dynamically follow the displayed portion during slider dragging / wheel scrolling / auto-scroll; can be combined with useLegendSelection.
  */
 export declare function useDataZoomWindow(options?: DataZoomWindowOptions): DataZoomWindowResult;

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

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataZoomWindow = useDataZoomWindow;
 var _react = require("react");
 /**
- * dataZoom 可见窗口管理：配合 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged，
- * 在调用方按"当前可见窗口"裁剪数据后重算 Y 轴 min/max/interval（calculateAxisConfig），
- * 实现滑块拖动/滚轮/自动滚动时坐标轴跟随展示部分动态重算；可与 useLegendSelection 叠加。
+ * dataZoom visible-window management: works with Chart.Bar / Chart.Line's onDataZoomWindowChanged
+ * so the caller can slice data by the "current visible window" and recalculate the Y-axis min/max/interval (calculateAxisConfig),
+ * making the axis dynamically follow the displayed portion during slider dragging / wheel scrolling / auto-scroll; can be combined with useLegendSelection.
  */
 function useDataZoomWindow(options) {
   const enabled = options?.enabled ?? true;
   const [zoomWindow, setZoomWindow] = (0, _react.useState)(null);
   const onDataZoomWindowChanged = (0, _react.useCallback)(next => {
-    // 窗口未变化时保持原引用，避免重渲染 → 同步回调 → 再重渲染的循环
+    // Keep the original reference when the window is unchanged, avoiding a re-render → sync callback → re-render loop
     setZoomWindow(prev => prev && prev.startIndex === next.startIndex && prev.endIndex === next.endIndex ? prev : next);
   }, []);
   const effectiveWindow = enabled ? zoomWindow : null;

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

@@ -1,14 +1,14 @@
 export interface LegendSelectionResult {
-    /** 传给图表 legend.selected，保证重渲染(setOption notMerge)后隐藏状态不丢 */
+    /** Pass to the chart's legend.selected to keep hidden state from being lost after re-render (setOption notMerge) */
     legendSelected: Record<string, boolean>;
-    /** 传给图表 onLegendSelectChanged */
+    /** Pass to the chart's onLegendSelectChanged */
     onLegendSelectChanged: (selected: Record<string, boolean>) => void;
-    /** 判断某系列当前是否可见（未点过的系列默认可见） */
+    /** Checks whether a series is currently visible (series never toggled are visible by default) */
     isSeriesVisible: (name?: string | null) => boolean;
 }
 /**
- * 图例选中状态管理：配合 Chart.Bar / Chart.Line 的 onLegendSelectChanged，
- * 在调用方按"当前可见系列"重算 Y 轴 min/max/interval（calculateAxisConfig），
- * 实现图例隐藏某一项后坐标轴自动重算。
+ * Legend selection state management: works with Chart.Bar / Chart.Line's onLegendSelectChanged
+ * so the caller can recalculate the Y-axis min/max/interval (calculateAxisConfig) based on the "currently visible series",
+ * making the axis automatically recalculate after an item is hidden via the legend.
  */
 export declare function useLegendSelection(): LegendSelectionResult;

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.useLegendSelection = useLegendSelection;
 var _react = require("react");
 /**
- * 图例选中状态管理：配合 Chart.Bar / Chart.Line 的 onLegendSelectChanged，
- * 在调用方按"当前可见系列"重算 Y 轴 min/max/interval（calculateAxisConfig），
- * 实现图例隐藏某一项后坐标轴自动重算。
+ * Legend selection state management: works with Chart.Bar / Chart.Line's onLegendSelectChanged
+ * so the caller can recalculate the Y-axis min/max/interval (calculateAxisConfig) based on the "currently visible series",
+ * making the axis automatically recalculate after an item is hidden via the legend.
  */
 function useLegendSelection() {
   const [legendSelected, setLegendSelected] = (0, _react.useState)({});

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

@@ -1,13 +1,13 @@
 /**
- * 大屏 Y 轴：按「万 / 亿」或 MB/GB/TB 换算时，要求刻度步长换算后 ≥ 1，
- * 避免出现 0.2 万、0.5GB 等小于 1 的刻度文案。
+ * Dashboard (large-screen) Y-axis: when converting to "万 (10^4) / 亿 (10^8)" or MB/GB/TB units,
+ * the converted tick step must be >= 1, avoiding tick labels smaller than 1 such as "0.2万" or "0.5GB".
  */
 export declare const MB_PER_GB = 1024;
 export declare const MB_PER_TB: number;
 export declare function trimAxisNumber(n: number): string;
-/** 中文量级：仅当最大值与刻度间隔都达到该量级时才用「万」「亿」缩放 */
+/** Chinese magnitude: scale by "万" (10^4) / "亿" (10^8) only when both the max value and the tick interval reach that magnitude */
 export declare function chineseMagnitudeDivisor(max: number, interval: number): 1 | 10000 | 100000000;
 export declare function formatChineseMagnitudeTick(value: number, max: number, interval: number): string;
-/** MB 进位：仅当最大值与刻度间隔在该单位下均 ≥ 1 时才升到 GB/TB */
+/** MB tiering: promote to GB/TB only when both the max value and the tick interval are >= 1 in that unit */
 export declare function mbDisplayTier(maxMb: number, intervalMb: number): "MB" | "GB" | "TB";
 export declare function formatMbAxisTick(value: number, maxMb: number, intervalMb: number): string;

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

@@ -10,8 +10,8 @@ exports.formatMbAxisTick = formatMbAxisTick;
 exports.mbDisplayTier = mbDisplayTier;
 exports.trimAxisNumber = trimAxisNumber;
 /**
- * 大屏 Y 轴：按「万 / 亿」或 MB/GB/TB 换算时，要求刻度步长换算后 ≥ 1，
- * 避免出现 0.2 万、0.5GB 等小于 1 的刻度文案。
+ * Dashboard (large-screen) Y-axis: when converting to "万 (10^4) / 亿 (10^8)" or MB/GB/TB units,
+ * the converted tick step must be >= 1, avoiding tick labels smaller than 1 such as "0.2万" or "0.5GB".
  */
 
 const MB_PER_GB = exports.MB_PER_GB = 1024;
@@ -22,7 +22,7 @@ function trimAxisNumber(n) {
   return s === "" || s === "-" ? "0" : s;
 }
 
-/** 中文量级：仅当最大值与刻度间隔都达到该量级时才用「万」「亿」缩放 */
+/** Chinese magnitude: scale by "万" (10^4) / "亿" (10^8) only when both the max value and the tick interval reach that magnitude */
 function chineseMagnitudeDivisor(max, interval) {
   const m = Number.isFinite(max) ? max : 0;
   const iv = Number.isFinite(interval) ? interval : 0;
@@ -38,7 +38,7 @@ function formatChineseMagnitudeTick(value, max, interval) {
   return trimAxisNumber(v / div);
 }
 
-/** MB 进位：仅当最大值与刻度间隔在该单位下均 ≥ 1 时才升到 GB/TB */
+/** MB tiering: promote to GB/TB only when both the max value and the tick interval are >= 1 in that unit */
 function mbDisplayTier(maxMb, intervalMb) {
   const m = Number.isFinite(maxMb) ? maxMb : 0;
   const iv = Number.isFinite(intervalMb) ? intervalMb : 0;

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

@@ -16,7 +16,7 @@ export type CommonObj<T = unknown> = Record<string, T>;
  * ChartTypes
  * ChartOptionsType
  *
- * 关联 Group
+ * Associated with Group
  */
 export type ChartTypes = "Line" | "Bar" | "Pie";
 export type ChartOptionsType = ChartLineProps | ChartBarProps | ChartPieProps;
@@ -39,7 +39,7 @@ export interface ChartCommonProps extends ChartsOption {
     style?: ChartCSSProperties;
     insideDataZoom?: echarts.DataZoomComponentOption;
     sliderDataZoom?: echarts.DataZoomComponentOption;
-    /** 图表实例就绪回调，可用于图例自动滚动等 */
+    /** Callback fired when the chart instance is ready; can be used for legend auto-scroll, etc. */
     onChart?: (chart: echarts.ECharts) => void;
 }
 interface ChartType {

package/lib/components/Chart/index.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * ChartTypes
  * ChartOptionsType
  *
- * 关联 Group
+ * Associated with Group
  */
 
 const Chart = {

package/lib/components/Chat/ChatHistory/_components/HistoryGroup/index.module.scss

@@ -8,7 +8,7 @@
 
     font-size: 14px;
     font-weight: bold;
-    color: #b3b3b3;
+    color: var(--cf-text-3);
 
     cursor: default;
   }

package/lib/components/Chat/ChatHistory/_components/HistoryItem/index.js

@@ -24,30 +24,30 @@ const HistoryItem = ({
   deleteHistory,
   onClick
 }) => {
-  // 重命名相关状态
+  // Rename-related state
   const [isRenaming, setIsRenaming] = (0, _react.useState)(false);
   const [renameTitle, setRenameTitle] = (0, _react.useState)("");
   const [currentTitle, setCurrentTitle] = (0, _react.useState)((0, _utils.formatChatName)(item.name));
-  // 用于跟踪是否刚刚完成重命名，避免立即被外部更新覆盖
+  // Tracks whether a rename has just completed, to avoid being immediately overwritten by external updates
   const justRenamedRef = (0, _react.useRef)(false);
 
-  // 删除确认弹窗状态
+  // Delete confirmation modal state
   const [deleteModal, setDeleteModal] = (0, _react.useState)(false);
 
-  // 初始化重命名标题
+  // Initialize the rename title
   (0, _react.useEffect)(() => {
     if (isRenaming) {
       setRenameTitle(currentTitle);
     }
   }, [isRenaming, currentTitle]);
 
-  // 同步 item.name 的变化到 currentTitle（仅在非重命名状态下）
+  // Sync changes of item.name to currentTitle (only when not renaming)
   (0, _react.useEffect)(() => {
     if (!isRenaming && !justRenamedRef.current) {
       const formattedName = (0, _utils.formatChatName)(item.name);
       setCurrentTitle(formattedName);
     }
-    // 重置重命名标记
+    // Reset the rename flag
     if (justRenamedRef.current) {
       justRenamedRef.current = false;
     }
@@ -59,9 +59,9 @@ const HistoryItem = ({
     const newTitle = renameTitle.trim();
     if (newTitle && updateTitle) {
       updateTitle(item.conversationId, newTitle);
-      // 先更新显示的标题，确保立即显示用户输入的名称
+      // Update the displayed title first to immediately show the user-entered name
       setCurrentTitle(newTitle);
-      // 标记刚刚完成重命名，避免立即被外部更新覆盖
+      // Mark that a rename has just completed, to avoid being immediately overwritten by external updates
       justRenamedRef.current = true;
     }
     setIsRenaming(false);

package/lib/components/Chat/ChatHistory/_components/HistoryItem/index.module.scss

@@ -26,7 +26,7 @@
   cursor: pointer;
 
   &:hover {
-    background: #0000000a;
+    background: var(--cf-row-hover);
 
     .operation {
       display: flex;
@@ -34,9 +34,9 @@
   }
 
   &.active {
-    background: #0000000a;
+    background: var(--cf-row-hover);
 
-    color: #126dff;
+    color: var(--primary-color);
   }
 
   .operation {
@@ -55,10 +55,10 @@
 
     background-color: transparent;
 
-    color: #0a0a0a;
+    color: var(--cf-text);
 
     &:hover {
-      color: #126dff;
+      color: var(--primary-color);
     }
   }
 }
@@ -69,6 +69,6 @@
   column-gap: 8px;
 
   &.delete {
-    color: #ff4d4f;
+    color: var(--cf-error);
   }
 }

package/lib/components/Chat/ChatHistory/_components/NewChatButton/index.module.scss

@@ -5,7 +5,7 @@
 
   padding: 0px 10px;
 
-  background-color: #f9f9f9;
+  background-color: var(--cf-subtle);
 
   .newChat {
     display: flex;
@@ -18,17 +18,17 @@
 
     font-size: 14px;
 
-    background-color: #fff;
+    background-color: var(--cf-surface);
 
     border-radius: 6px;
-    border: 1px solid #0d0d0d0d;
+    border: 1px solid var(--cf-border-weak);
 
     cursor: pointer;
 
     transition: box-shadow 0.3s;
 
     &:hover {
-      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+      box-shadow: var(--cf-shadow-2);
     }
   }
 }

package/lib/components/Chat/ChatHistory/_utils/index.d.ts

@@ -1,4 +1,4 @@
 /**
- * 格式化聊天名称（截取省略号前的部分）
+ * Format the chat name (take the part before the ellipsis)
  */
 export declare const formatChatName: (name: string) => string;

package/lib/components/Chat/ChatHistory/_utils/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formatChatName = void 0;
 /**
- * 格式化聊天名称（截取省略号前的部分）
+ * Format the chat name (take the part before the ellipsis)
  */
 const formatChatName = name => {
   return name.split("…")[0];