@ant-design/agentic-ui 2.30.2 → 2.30.3

package/dist/Plugins/chart/DonutChart/index.js

@@ -154,10 +154,11 @@ import { useLocale } from "../../../I18n";
 import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
 import { isWindowDefined } from "../env";
+import { useChartTheme } from "../hooks";
 import { resolveCssVariable } from "../utils";
 import { SINGLE_MODE_DESKTOP_CUTOUT, SINGLE_MODE_MOBILE_CUTOUT } from "./constants";
 import { useAutoCategory, useFilterLabels, useMobile, useResponsiveDimensions } from "./hooks";
-import LegendView from "./Legend";
+import DonutChartLegend from "./Legend";
 import { createBackgroundArcPlugin, createCenterTextPlugin, createDataLabelsLeaderLinePlugin } from "./plugins";
 import { useStyle } from "./style";
 /**
@@ -198,7 +199,7 @@ import { useStyle } from "./style";
  *
  * @since 1.0.0
  */ var DonutChart = function DonutChart(_0) {
-    var data = _0.data, configs = _0.configs, _0_width = _0.width, width = _0_width === void 0 ? 200 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 200 : _0_height, className = _0.className, classNamesProp = _0.classNames, title = _0.title, _0_showToolbar = _0.showToolbar, showToolbar = _0_showToolbar === void 0 ? true : _0_showToolbar, onDownload = _0.onDownload, dataTime = _0.dataTime, filterList = _0.filterList, selectedFilter = _0.selectedFilter, onFilterChange = _0.onFilterChange, _0_enableAutoCategory = _0.enableAutoCategory, enableAutoCategory = _0_enableAutoCategory === void 0 ? true : _0_enableAutoCategory, _0_singleMode = _0.singleMode, singleMode = _0_singleMode === void 0 ? false : _0_singleMode, toolbarExtra = _0.toolbarExtra, _0_renderFilterInToolbar = _0.renderFilterInToolbar, renderFilterInToolbar = _0_renderFilterInToolbar === void 0 ? false : _0_renderFilterInToolbar, statisticConfig = _0.statistic, _0_loading = _0.loading, loading = _0_loading === void 0 ? false : _0_loading, props = _object_without_properties(_0, [
+    var data = _0.data, configs = _0.configs, _0_width = _0.width, width = _0_width === void 0 ? 200 : _0_width, _0_height = _0.height, height = _0_height === void 0 ? 200 : _0_height, className = _0.className, classNamesProp = _0.classNames, title = _0.title, _0_showToolbar = _0.showToolbar, showToolbar = _0_showToolbar === void 0 ? true : _0_showToolbar, onDownload = _0.onDownload, _0_theme = _0.theme, theme = _0_theme === void 0 ? 'light' : _0_theme, dataTime = _0.dataTime, filterList = _0.filterList, selectedFilter = _0.selectedFilter, onFilterChange = _0.onFilterChange, _0_enableAutoCategory = _0.enableAutoCategory, enableAutoCategory = _0_enableAutoCategory === void 0 ? true : _0_enableAutoCategory, _0_singleMode = _0.singleMode, singleMode = _0_singleMode === void 0 ? false : _0_singleMode, toolbarExtra = _0.toolbarExtra, _0_renderFilterInToolbar = _0.renderFilterInToolbar, renderFilterInToolbar = _0_renderFilterInToolbar === void 0 ? false : _0_renderFilterInToolbar, statisticConfig = _0.statistic, _0_loading = _0.loading, loading = _0_loading === void 0 ? false : _0_loading, props = _object_without_properties(_0, [
         "data",
         "configs",
         "width",
@@ -208,6 +209,7 @@ import { useStyle } from "./style";
         "title",
         "showToolbar",
         "onDownload",
+        "theme",
         "dataTime",
         "filterList",
         "selectedFilter",
@@ -219,7 +221,7 @@ import { useStyle } from "./style";
         "statistic",
         "loading"
     ]);
-    var _finalConfigs_, _props_styles;
+    var _props_styles;
     useMemo(function() {
         if (donutChartComponentsRegistered) {
             return undefined;
@@ -233,6 +235,8 @@ import { useStyle } from "./style";
     }, []);
     var _useMobile = useMobile(), isMobile = _useMobile.isMobile, windowWidth = _useMobile.windowWidth;
     var locale = useLocale();
+    // 使用 useChartTheme hook 获取主题相关颜色
+    var isLight = useChartTheme(theme).isLight;
     // 默认配置：当 configs 不传时，使用默认配置，showLegend 默认为 true
     var defaultConfigs = [
         {
@@ -371,7 +375,8 @@ import { useStyle } from "./style";
     var finalFilterList = filterList || (autoCategoryData ? autoCategoryData.categories : []);
     var finalSelectedFilter = selectedFilter || internalSelectedCategory;
     var finalOnFilterChange = onFilterChange || handleInternalCategoryChange;
-    var chartFilterTheme = ((_finalConfigs_ = finalConfigs[0]) === null || _finalConfigs_ === void 0 ? void 0 : _finalConfigs_.theme) || 'light';
+    // 使用组件级别的 theme prop，而不是从 configs 中获取
+    var chartFilterTheme = theme;
     var dimensions = useResponsiveDimensions(isMobile, windowWidth, width, height);
     var renderConfigs = singleMode && !configs ? Array.from({
         length: filteredData.length
@@ -389,12 +394,17 @@ import { useStyle } from "./style";
         baseClassName: baseClassName,
         className: classNames(classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp.root, className),
         variant: props.variant,
+        theme: theme,
+        isMobile: isMobile,
         style: _object_spread(_define_property({}, '--donut-item-min-width', "".concat(dimensions.width, "px")), props.style, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root)
     }, showToolbar && /*#__PURE__*/ React.createElement(ChartContainer, {
         baseClassName: "".concat(baseClassName, "-toolbar-wrapper"),
-        variant: "borderless"
+        variant: "borderless",
+        theme: theme,
+        isMobile: isMobile
     }, title && /*#__PURE__*/ React.createElement(ChartToolBar, {
         title: title,
+        theme: chartFilterTheme,
         onDownload: handleDownload,
         extra: toolbarExtra,
         dataTime: dataTime,
@@ -444,7 +454,9 @@ import { useStyle } from "./style";
         theme: chartFilterTheme
     }))), /*#__PURE__*/ React.createElement(ChartContainer, {
         baseClassName: "".concat(baseClassName, "-content"),
-        variant: "borderless"
+        variant: "borderless",
+        theme: theme,
+        isMobile: isMobile
     }, renderConfigs.map(function(cfg, idx) {
         var _ref;
         var _cfg_backgroundColor;
@@ -492,6 +504,51 @@ import { useStyle } from "./style";
         });
         var mainColor = (_ref = (_cfg_backgroundColor = cfg.backgroundColor) === null || _cfg_backgroundColor === void 0 ? void 0 : _cfg_backgroundColor[0]) !== null && _ref !== void 0 ? _ref : defaultColorList[idx % defaultColorList.length];
         var resolvedMainColor = resolveCssVariable(mainColor);
+        var isDarkTheme = !isLight;
+        /** 与 ChartContainer 暗色底一致，扇区描边融进背景，避免亮白描边突兀 */ var donutDarkSegmentBorder = '#1f1f1f';
+        var donutDarkSegmentBorderHover = 'rgba(255, 255, 255, 0.14)';
+        var chartBorderColor = function() {
+            if (isSingleValueMode) {
+                if (isDarkTheme) {
+                    return [
+                        cfg.borderColor || 'rgba(255, 255, 255, 0.14)',
+                        'transparent'
+                    ];
+                }
+                return [
+                    cfg.borderColor || '#fff',
+                    'transparent'
+                ];
+            }
+            if (cfg.chartStyle === 'pie') {
+                return cfg.borderColor || '#fff';
+            }
+            if (isDarkTheme) {
+                return donutDarkSegmentBorder;
+            }
+            return cfg.borderColor || '#fff';
+        }();
+        var chartHoverBorderColor = function() {
+            if (isSingleValueMode) {
+                if (isDarkTheme) {
+                    return [
+                        cfg.borderColor || 'rgba(255, 255, 255, 0.22)',
+                        'transparent'
+                    ];
+                }
+                return [
+                    cfg.borderColor || '#fff',
+                    'transparent'
+                ];
+            }
+            if (cfg.chartStyle === 'pie') {
+                return cfg.borderColor || '#fff';
+            }
+            if (isDarkTheme) {
+                return donutDarkSegmentBorderHover;
+            }
+            return cfg.borderColor || '#fff';
+        }();
         var chartJsData = {
             labels: labels,
             datasets: [
@@ -501,20 +558,14 @@ import { useStyle } from "./style";
                         resolvedMainColor,
                         'transparent'
                     ] : resolvedBackgroundColors.slice(0, values.length),
-                    borderColor: isSingleValueMode ? [
-                        cfg.borderColor || '#fff',
-                        'transparent'
-                    ] : cfg.borderColor || '#fff',
+                    borderColor: chartBorderColor,
                     hoverBackgroundColor: isSingleValueMode ? [
                         resolvedMainColor,
                         'transparent'
                     ] : resolvedBackgroundColors.slice(0, values.length),
-                    hoverBorderColor: isSingleValueMode ? [
-                        cfg.borderColor || '#fff',
-                        'transparent'
-                    ] : cfg.borderColor || '#fff',
+                    hoverBorderColor: chartHoverBorderColor,
                     borderWidth: cfg.chartStyle === 'pie' ? 0 : isMobile ? 1 : 1,
-                    spacing: isSingleValueMode ? 0 : cfg.chartStyle === 'pie' ? 0 : isMobile ? 3 : 6,
+                    spacing: isSingleValueMode ? 0 : cfg.chartStyle === 'pie' ? 0 : isDarkTheme ? isMobile ? 4 : 8 : isMobile ? 3 : 6,
                     borderRadius: cfg.chartStyle === 'pie' ? 0 : 4,
                     hoverOffset: function hoverOffset(ctx) {
                         return isSingleValueMode && (ctx === null || ctx === void 0 ? void 0 : ctx.dataIndex) === 1 ? 0 : isMobile ? 4 : 6;
@@ -536,7 +587,6 @@ import { useStyle } from "./style";
             }
             return (_cfg_cutout = cfg.cutout) !== null && _cfg_cutout !== void 0 ? _cfg_cutout : isSingleValueMode ? SINGLE_MODE_DESKTOP_CUTOUT : '75%';
         }();
-        var isDarkTheme = cfg.theme === 'dark';
         var tooltipBackgroundColor = isDarkTheme ? '#1F2937' : '#FFFFFF';
         var tooltipBorderColor = isDarkTheme ? '#374151' : '#E5E7EB';
         var tooltipTitleColor = isDarkTheme ? '#F9FAFB' : '#111827';
@@ -617,7 +667,7 @@ import { useStyle } from "./style";
                         var labelStr = label !== undefined && label !== null ? String(label) : '';
                         return labelStr ? "".concat(labelStr, ": ").concat(pct, "%") : "".concat(value, " (").concat(pct, "%)");
                     },
-                    color: isDarkTheme ? '#fff' : '#343A45',
+                    color: isDarkTheme ? '#F9FAFB' : '#343A45',
                     font: {
                         size: isMobile ? 10 : 11,
                         weight: 'normal'
@@ -634,10 +684,14 @@ import { useStyle } from "./style";
         return /*#__PURE__*/ React.createElement(ChartContainer, {
             key: idx,
             baseClassName: "".concat(baseClassName, "-chart-wrapper"),
-            variant: "borderless"
+            variant: "borderless",
+            theme: theme,
+            isMobile: isMobile
         }, isSingleValueMode ? /*#__PURE__*/ React.createElement(ChartContainer, {
             baseClassName: "".concat(baseClassName, "-single"),
             variant: "borderless",
+            theme: theme,
+            isMobile: isMobile,
             style: _object_spread((_obj = {}, _define_property(_obj, '--donut-chart-height', "".concat(dimensions.height, "px")), _define_property(_obj, '--donut-chart-width', "".concat(dimensions.width, "px")), _define_property(_obj, "width", dimensions.width), _define_property(_obj, "height", dimensions.height), _define_property(_obj, "marginTop", '20px'), _obj), isMobile ? {
                 margin: '0 auto'
             } : {})
@@ -649,12 +703,14 @@ import { useStyle } from "./style";
             options: options,
             plugins: // 只有环形图才显示中心文本和背景
             _to_consumable_array(cfg.chartStyle !== 'pie' ? [
-                createCenterTextPlugin((typeof currentDataItem.value === 'number' ? currentDataItem.value : Number(currentDataItem.value)) / (total || 1) * 100, currentDataItem.label, isMobile),
-                createBackgroundArcPlugin()
+                createCenterTextPlugin((typeof currentDataItem.value === 'number' ? currentDataItem.value : Number(currentDataItem.value)) / (total || 1) * 100, currentDataItem.label, isMobile, isDarkTheme),
+                createBackgroundArcPlugin(isDarkTheme ? 'rgba(255, 255, 255, 0.08)' : '#F7F8F9')
             ] : [])
         })) : /*#__PURE__*/ React.createElement(ChartContainer, {
             baseClassName: "".concat(baseClassName, "-row"),
             variant: "borderless",
+            theme: theme,
+            isMobile: isMobile,
             style: _object_spread({}, isMobile ? {
                 flexDirection: 'column',
                 alignItems: 'stretch'
@@ -662,6 +718,8 @@ import { useStyle } from "./style";
         }, /*#__PURE__*/ React.createElement(ChartContainer, {
             baseClassName: "".concat(baseClassName, "-chart"),
             variant: "borderless",
+            theme: theme,
+            isMobile: isMobile,
             style: (_obj1 = {}, _define_property(_obj1, '--donut-chart-width', "".concat(dimensions.chartWidth, "px")), _define_property(_obj1, '--donut-chart-height', "".concat(dimensions.chartHeight, "px")), _define_property(_obj1, "width", dimensions.chartWidth), _define_property(_obj1, "height", dimensions.chartHeight), _define_property(_obj1, "marginTop", '20px'), _obj1)
         }, /*#__PURE__*/ React.createElement(Doughnut, {
             ref: function ref(instance) {
@@ -670,10 +728,10 @@ import { useStyle } from "./style";
             data: chartJsData,
             options: optionsWithDataLabels,
             plugins: cfg.showDataLabels === true && !isSingleValueMode ? [
-                createDataLabelsLeaderLinePlugin(dataLabelOffset),
+                createDataLabelsLeaderLinePlugin(dataLabelOffset, isDarkTheme),
                 ChartDataLabels
             ] : []
-        })), cfg.showLegend && /*#__PURE__*/ React.createElement(LegendView, {
+        })), cfg.showLegend && /*#__PURE__*/ React.createElement(DonutChartLegend, {
             chartData: chartData,
             backgroundColors: chartData.map(function(_, i) {
                 return backgroundColors[i % backgroundColors.length];
@@ -686,7 +744,8 @@ import { useStyle } from "./style";
             total: total,
             baseClassName: baseClassName,
             hashId: hashId,
-            isMobile: isMobile
+            isMobile: isMobile,
+            theme: theme
         })));
     })));
 };

package/dist/Plugins/chart/DonutChart/plugins.d.ts

@@ -3,6 +3,6 @@ import { Plugin } from 'chart.js';
  * 数据标签指示线插件：仅在会展示数据标签的扇区上绘制线（与 datalabels display 逻辑一致，避免无线无文案）。
  * 传入的 lineLength 应与 options.plugins.datalabels.offset 一致。
  */
-export declare const createDataLabelsLeaderLinePlugin: (lineLength?: number) => Plugin<'doughnut'>;
-export declare const createCenterTextPlugin: (value: number, label: string, isMobile?: boolean) => Plugin<'doughnut'>;
+export declare const createDataLabelsLeaderLinePlugin: (lineLength?: number, darkMode?: boolean) => Plugin<'doughnut'>;
+export declare const createCenterTextPlugin: (value: number, label: string, isMobile?: boolean, darkMode?: boolean) => Plugin<'doughnut'>;
 export declare const createBackgroundArcPlugin: (bgColor?: string, padding?: number) => Plugin<'doughnut'>;

package/dist/Plugins/chart/DonutChart/plugins.js

@@ -5,7 +5,7 @@
  * 数据标签指示线插件：仅在会展示数据标签的扇区上绘制线（与 datalabels display 逻辑一致，避免无线无文案）。
  * 传入的 lineLength 应与 options.plugins.datalabels.offset 一致。
  */ export var createDataLabelsLeaderLinePlugin = function createDataLabelsLeaderLinePlugin() {
-    var lineLength = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_LEADER_LINE_PX;
+    var lineLength = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_LEADER_LINE_PX, darkMode = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
     return {
         id: 'datalabelsLeaderLine',
         afterDatasetDraw: function afterDatasetDraw(chart, args) {
@@ -20,7 +20,7 @@
             }, 0);
             if (total <= 0) return;
             ctx.save();
-            ctx.strokeStyle = 'rgba(0, 25, 61, 0.16)';
+            ctx.strokeStyle = darkMode ? 'rgba(255, 255, 255, 0.22)' : 'rgba(0, 25, 61, 0.16)';
             ctx.lineWidth = 1;
             meta.data.forEach(function(element, i) {
                 var val = Number(values[i]);
@@ -47,7 +47,7 @@
     };
 };
 export var createCenterTextPlugin = function createCenterTextPlugin(value, label) {
-    var isMobile = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
+    var isMobile = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false, darkMode = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
     return {
         id: 'centerText',
         beforeDraw: function beforeDraw(chart) {
@@ -59,13 +59,13 @@ export var createCenterTextPlugin = function createCenterTextPlugin(value, label
             var labelFontSize = isMobile ? 10 : 12; // px
             // value 优先使用 Rubik
             ctx.font = "".concat(isMobile ? '400' : '500', " ").concat(percentFontSize, "px 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif");
-            ctx.fillStyle = '#343A45';
+            ctx.fillStyle = darkMode ? 'rgba(255, 255, 255, 0.92)' : '#343A45';
             ctx.textAlign = 'center';
             ctx.textBaseline = 'middle';
             ctx.fillText("".concat(value, "%"), centerX, centerY - labelFontSize * 0.8);
             // label 优先使用 PingFang SC
             ctx.font = "300 ".concat(labelFontSize, "px 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif");
-            ctx.fillStyle = '#767E8B';
+            ctx.fillStyle = darkMode ? 'rgba(255, 255, 255, 0.55)' : '#767E8B';
             ctx.fillText(label, centerX, centerY + labelFontSize * 0.6);
             ctx.restore();
         }

package/dist/Plugins/chart/DonutChart/types.d.ts

@@ -33,6 +33,8 @@ export interface DonutChartProps extends ChartContainerProps {
     title?: string;
     showToolbar?: boolean;
     onDownload?: () => void;
+    /** 图表主题 */
+    theme?: 'light' | 'dark';
     /** 数据时间 */
     dataTime?: string;
     /** 筛选项列表，不传时不显示筛选器 */

package/dist/Plugins/chart/FunnelChart/index.js

@@ -152,6 +152,7 @@ import { Bar } from "react-chartjs-2";
 import ChartStatistic from "../ChartStatistic";
 import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
+import { useChartTheme } from "../hooks";
 import { findDataPointByXValue, isXValueEqual, resolveCssVariable, toNumber } from "../utils";
 import { useStyle } from "./style";
 var funnelChartComponentsRegistered = false;
@@ -508,8 +509,8 @@ var FunnelChart = function FunnelChart(_0) {
     }, [
         filterLabels
     ]);
-    var isLight = theme === 'light';
-    var axisTextColor = isLight ? 'rgba(0, 25, 61, 0.3255)' : 'rgba(255, 255, 255, 0.8)';
+    // 使用 useChartTheme hook 获取主题相关颜色
+    var _useChartTheme = useChartTheme(theme), axisTextColor = _useChartTheme.axisTextColor, isLight = _useChartTheme.isLight;
     var options = {
         responsive: true,
         maintainAspectRatio: false,
@@ -561,11 +562,12 @@ var FunnelChart = function FunnelChart(_0) {
                             return true;
                         });
                         if (!anyNonTopProvided) return base;
+                        var trapezoidLegendFill = isLight ? '#F1F2F4' : 'rgba(255, 255, 255, 0.3)';
                         return _to_consumable_array(base).concat([
                             {
                                 text: (typeNames === null || typeNames === void 0 ? void 0 : typeNames.rate) || '转化率',
-                                fillStyle: '#F1F2F4',
-                                strokeStyle: '#F1F2F4',
+                                fillStyle: trapezoidLegendFill,
+                                strokeStyle: trapezoidLegendFill,
                                 lineWidth: 0,
                                 hidden: !showTrapezoid,
                                 datasetIndex: chart.data.datasets.length,
@@ -723,12 +725,17 @@ var FunnelChart = function FunnelChart(_0) {
                     ctx.lineTo(botR, botY);
                     ctx.lineTo(botL, botY);
                     ctx.closePath();
-                    ctx.fillStyle = '#F1F2F4';
+                    ctx.fillStyle = isLight ? '#F1F2F4' : 'rgba(255, 255, 255, 0.28)';
                     ctx.fill();
+                    if (!isLight) {
+                        ctx.strokeStyle = 'rgba(255, 255, 255, 0.16)';
+                        ctx.lineWidth = 1;
+                        ctx.stroke();
+                    }
                     // 文本（展示该比率）
                     var midY = (topY + botY) / 2;
                     var cx = centerX !== null && centerX !== void 0 ? centerX : (Math.min(topL, botL) + Math.max(topR, botR)) / 2;
-                    ctx.fillStyle = '#626F86';
+                    ctx.fillStyle = isLight ? '#626F86' : 'rgba(255, 255, 255, 0.95)';
                     ctx.font = "".concat(isMobile ? 10 : 12, "px sans-serif");
                     ctx.textAlign = 'center';
                     ctx.textBaseline = 'middle';
@@ -738,6 +745,7 @@ var FunnelChart = function FunnelChart(_0) {
             }
         };
     }, [
+        isLight,
         isMobile,
         showTrapezoid,
         JSON.stringify(filteredData.map(function(d) {
@@ -756,11 +764,6 @@ var FunnelChart = function FunnelChart(_0) {
                 if (!meta) return;
                 var xScale = scales === null || scales === void 0 ? void 0 : scales.x;
                 var labels = (data === null || data === void 0 ? void 0 : data.labels) || [];
-                ctx.save();
-                ctx.fillStyle = axisTextColor;
-                ctx.font = "".concat(isMobile ? 10 : 12, "px sans-serif");
-                ctx.textAlign = 'left';
-                ctx.textBaseline = 'middle';
                 var ds = (data === null || data === void 0 ? void 0 : (_data_datasets = data.datasets) === null || _data_datasets === void 0 ? void 0 : (_data_datasets_ = _data_datasets[0]) === null || _data_datasets_ === void 0 ? void 0 : _data_datasets_.data) || [];
                 // 计算所有条末端的像素坐标，找最大值作为对齐基准
                 var ends = meta.data.map(function(el, i) {
@@ -778,7 +781,13 @@ var FunnelChart = function FunnelChart(_0) {
                     if (!raw || !Array.isArray(raw)) return;
                     var y = el.y;
                     var label = (_ref = labels === null || labels === void 0 ? void 0 : labels[i]) !== null && _ref !== void 0 ? _ref : '';
+                    ctx.save();
+                    ctx.fillStyle = axisTextColor;
+                    ctx.font = "".concat(isMobile ? 10 : 12, "px sans-serif");
+                    ctx.textAlign = 'left';
+                    ctx.textBaseline = 'middle';
                     ctx.fillText(label, maxEnd + padding, y);
+                    ctx.restore();
                     // 在柱体中心绘制数值文本（白色）- 使用原始值
                     var start = Number((_raw_ = raw[0]) !== null && _raw_ !== void 0 ? _raw_ : 0);
                     var end = Number((_raw_1 = raw[1]) !== null && _raw_1 !== void 0 ? _raw_1 : 0);
@@ -788,16 +797,17 @@ var FunnelChart = function FunnelChart(_0) {
                     ctx.save();
                     ctx.fillStyle = '#fff';
                     ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
                     ctx.fillText(String(Math.round(originalValue)), cx, y);
                     ctx.restore();
                 });
-                ctx.restore();
             }
         };
     }, [
         isMobile,
         axisTextColor,
-        originalValues
+        originalValues,
+        theme
     ]);
     var containerClassName = useMemo(function() {
         if (isMobile) return 'w-full';
@@ -875,7 +885,7 @@ var FunnelChart = function FunnelChart(_0) {
             height: finalHeight
         }, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.wrapper)
     }, /*#__PURE__*/ React.createElement(Bar, {
-        key: "funnel-".concat(pluginToggleKey),
+        key: "funnel-".concat(theme, "-").concat(pluginToggleKey),
         ref: chartRef,
         data: processedData,
         options: options,

package/dist/Plugins/chart/HistogramChart/index.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { ChartContainerProps } from '../components';
+import { StatisticConfigType } from '../hooks/useChartStatistic';
+import type { ChartClassNames, ChartStyles } from '../types/classNames';
+/**
+ * 直方图数据项接口
+ */
+export interface HistogramChartDataItem {
+    /** 原始数据值 */
+    value: number;
+    /** 数据系列（用于分组显示） */
+    type?: string;
+    /** 分类（用于筛选） */
+    category?: string;
+    /** 筛选标签 */
+    filterLabel?: string;
+}
+export interface HistogramChartProps extends ChartContainerProps {
+    /** 扁平化数据数组 */
+    data: HistogramChartDataItem[];
+    /** 图表标题 */
+    title?: string;
+    /** 图表宽度，默认600px */
+    width?: number | string;
+    /** 图表高度，默认400px */
+    height?: number | string;
+    /** 自定义CSS类名 */
+    className?: string;
+    /** 自定义CSS类名（支持对象格式，为每层DOM设置类名） */
+    classNames?: ChartClassNames;
+    /** 数据时间 */
+    dataTime?: string;
+    /** 图表主题 */
+    theme?: 'dark' | 'light';
+    /** 自定义主色 */
+    color?: string | string[];
+    /** 是否显示图例，默认true */
+    showLegend?: boolean;
+    /** 图例位置 */
+    legendPosition?: 'top' | 'left' | 'bottom' | 'right';
+    /** 是否显示网格线，默认true */
+    showGrid?: boolean;
+    /** X轴标签 */
+    xAxisLabel?: string;
+    /** Y轴标签 */
+    yAxisLabel?: string;
+    /** 是否堆叠显示，默认true */
+    stacked?: boolean;
+    /** 自定义分箱数量（不设置则自动计算） */
+    binCount?: number;
+    /** 是否显示频率而非计数 */
+    showFrequency?: boolean;
+    /** 头部工具条额外按钮 */
+    toolbarExtra?: React.ReactNode;
+    /** 是否将过滤器渲染到工具栏 */
+    renderFilterInToolbar?: boolean;
+    /** ChartStatistic组件配置 */
+    statistic?: StatisticConfigType;
+    /** 是否显示加载状态 */
+    loading?: boolean;
+    /** 自定义样式对象 */
+    styles?: ChartStyles;
+}
+declare const HistogramChart: React.FC<HistogramChartProps>;
+export default HistogramChart;