@ant-design/agentic-ui 2.29.37 → 2.29.39

package/dist/MarkdownEditor/editor/tools/JinjaTemplatePanel/templates.d.ts

@@ -1,5 +1,17 @@
+import type { LocalKeys } from '../../../../I18n';
 import type { JinjaTemplateItem } from '../../../types';
-/** 内置 Jinja 模板数据，与 agent-ui-pc JinjaTemplateData 文案一致 */
+declare const JINJA_TEMPLATE_IDS: readonly ["variableInterpolation", "condition", "loop", "filter", "setVariable"];
+/** 内置 Jinja 模板基础数据（不含 i18n 文案） */
+export declare const JINJA_TEMPLATE_BASE: {
+    id: (typeof JINJA_TEMPLATE_IDS)[number];
+    template: string;
+}[];
+/**
+ * 根据 locale 生成带国际化文案的 Jinja 模板列表
+ */
+export declare function getJinjaTemplateData(locale: LocalKeys): JinjaTemplateItem[];
+/** 内置 Jinja 模板数据（默认中文），与 agent-ui-pc JinjaTemplateData 文案一致 */
 export declare const JINJA_TEMPLATE_DATA: JinjaTemplateItem[];
 /** 默认使用说明链接，未配置 jinja.docLink 时使用 */
 export declare const JINJA_DOC_LINK = "https://jinja.palletsprojects.com/";
+export {};

package/dist/MarkdownEditor/editor/tools/JinjaTemplatePanel/templates.js

@@ -1,28 +1,47 @@
-/** 内置 Jinja 模板数据，与 agent-ui-pc JinjaTemplateData 文案一致 */ export var JINJA_TEMPLATE_DATA = [
+import { cnLabels } from "../../../../I18n";
+var JINJA_TEMPLATE_IDS = [
+    'variableInterpolation',
+    'condition',
+    'loop',
+    'filter',
+    'setVariable'
+];
+/** 内置 Jinja 模板基础数据（不含 i18n 文案） */ export var JINJA_TEMPLATE_BASE = [
     {
-        title: '变量插值',
-        description: '{{ variable }}',
+        id: 'variableInterpolation',
         template: '{{ }}'
     },
     {
-        title: '条件语句',
-        description: '{% if condition %}...{% endif %}',
+        id: 'condition',
         template: '{% if  %}\n  \n{% endif %}'
     },
     {
-        title: '循环遍历',
-        description: '{% for item in list %}...{% endfor %}',
+        id: 'loop',
         template: '{% for  in  %}\n  \n{% endfor %}'
     },
     {
-        title: '过滤器',
-        description: '{{ value | filter }}',
+        id: 'filter',
         template: '{{  | }}'
     },
     {
-        title: '设置变量',
-        description: '{% set name = value %}',
+        id: 'setVariable',
         template: '{% set  =  %}'
     }
 ];
+/**
+ * 根据 locale 生成带国际化文案的 Jinja 模板列表
+ */ export function getJinjaTemplateData(locale) {
+    return JINJA_TEMPLATE_BASE.map(function(param) {
+        var id = param.id, template = param.template;
+        var _locale_titleKey, _locale_descKey;
+        var titleKey = "jinja.template.".concat(id, ".title");
+        var descKey = "jinja.template.".concat(id, ".description");
+        return {
+            title: (_locale_titleKey = locale[titleKey]) !== null && _locale_titleKey !== void 0 ? _locale_titleKey : id,
+            description: (_locale_descKey = locale[descKey]) !== null && _locale_descKey !== void 0 ? _locale_descKey : undefined,
+            template: template
+        };
+    });
+}
+/** 内置 Jinja 模板数据（默认中文），与 agent-ui-pc JinjaTemplateData 文案一致 */ export var JINJA_TEMPLATE_DATA = getJinjaTemplateData(cnLabels);
 /** 默认使用说明链接，未配置 jinja.docLink 时使用 */ export var JINJA_DOC_LINK = 'https://jinja.palletsprojects.com/';

package/dist/MarkdownEditor/editor/utils/markdownToHtml.js

@@ -170,7 +170,8 @@ import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import { unified } from "unified";
 import { visit } from "unist-util-visit";
-import { convertParagraphToImage, fixStrongWithSpecialChars } from "../parser/remarkParse";
+import { JINJA_DOLLAR_PLACEHOLDER } from "../parser/constants";
+import { convertParagraphToImage, fixStrongWithSpecialChars, protectJinjaDollarInText } from "../parser/remarkParse";
 // HTML 转义相关的正则表达式和工具
 var ESCAPE_TEST_NO_ENCODE = /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/;
 var ESCAPE_TEST = /[&<>"']/;
@@ -305,6 +306,7 @@ export var DEFAULT_MARKDOWN_REMARK_PLUGINS = [
     ],
     fixStrongWithSpecialChars,
     convertParagraphToImage,
+    protectJinjaDollarInText,
     [
         remarkMath,
         INLINE_MATH_WITH_SINGLE_DOLLAR
@@ -414,7 +416,7 @@ var createMarkdownProcessor = function createMarkdownProcessor(plugins, config)
                     htmlContent = _state.sent();
                     return [
                         2,
-                        String(htmlContent)
+                        String(htmlContent).split(JINJA_DOLLAR_PLACEHOLDER).join('$')
                     ];
                 case 2:
                     error = _state.sent();
@@ -463,7 +465,7 @@ var createMarkdownProcessor = function createMarkdownProcessor(plugins, config)
  */ export var markdownToHtmlSync = function markdownToHtmlSync(markdown, plugins, config) {
     try {
         var file = createMarkdownProcessor(plugins, config).processSync(markdown);
-        return String(file);
+        return String(file).split(JINJA_DOLLAR_PLACEHOLDER).join('$');
     } catch (error) {
         console.error('Error converting markdown to HTML:', error);
         return '';

package/dist/MarkdownInputField/RefinePromptButton/index.js

@@ -2,6 +2,7 @@ import { LoadingOutlined } from "@ant-design/icons";
 import { TextOptimize } from "@sofa-design/icons";
 import { ConfigProvider, Tooltip } from "antd";
 import React, { useContext } from "react";
+import { useLocale } from "../../I18n";
 import { ErrorBoundary } from "react-error-boundary";
 import { ActionIconBox } from "../../Components/ActionIconBox";
 import { isBrowserEnv } from "./env";
@@ -9,6 +10,7 @@ import { useStyle } from "./style";
 export var RefinePromptButton = function RefinePromptButton(props) {
     var disabled = props.disabled, status = props.status, onRefine = props.onRefine;
     var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
+    var locale = useLocale();
     var baseCls = getPrefixCls('agentic-md-input-field-refine-button');
     var wrapSSR = useStyle(baseCls).wrapSSR;
     var handleClick = function handleClick() {
@@ -24,9 +26,9 @@ export var RefinePromptButton = function RefinePromptButton(props) {
         return null;
     }
     return wrapSSR(/*#__PURE__*/ React.createElement(Tooltip, {
-        title: status === 'loading' ? '优化中' : '一键优化提示词'
+        title: status === 'loading' ? locale['refine.loading'] : locale['refine.oneClickOptimize']
     }, /*#__PURE__*/ React.createElement(ActionIconBox, {
-        title: '优化提示词',
+        title: locale['refine.optimizePrompt'],
         onClick: handleClick,
         "data-testid": "refine-prompt-button"
     }, /*#__PURE__*/ React.createElement(ErrorBoundary, {

package/dist/Plugins/chart/ChartRender.js

@@ -345,6 +345,7 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
  * 负责使用已加载的 runtime 渲染图表
  */ var ChartRuntimeRendererImpl = function ChartRuntimeRendererImpl(param) {
     var chartType = param.chartType, runtime = param.runtime, convertDonutData = param.convertDonutData, convertFlatData = param.convertFlatData, config = param.config, title = param.title, dataTime = param.dataTime, toolBar = param.toolBar, filterBy = param.filterBy, groupBy = param.groupBy, colorLegend = param.colorLegend, chartData = param.chartData, getFieldValue = param.getFieldValue, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading;
+    var i18n = useContext(I18nContext);
     var DonutChart = runtime.DonutChart, FunnelChart = runtime.FunnelChart, AreaChart = runtime.AreaChart, BarChart = runtime.BarChart, LineChart = runtime.LineChart, RadarChart = runtime.RadarChart, ScatterChart = runtime.ScatterChart;
     if (chartType === 'pie') {
         return /*#__PURE__*/ React.createElement(DonutChart, {
@@ -505,6 +506,7 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
         });
     }
     if (chartType === 'funnel') {
+        var _i18n_locale, _i18n_locale1;
         var funnelData = (chartData || []).map(function(row, i) {
             var filterLabel = getFieldValue(row, filterBy);
             var category = getFieldValue(row, groupBy);
@@ -532,8 +534,8 @@ import { debounce, getDataHash, isConfigEqual, isNotEmpty, toNumber } from "./ut
             title: title || '',
             dataTime: dataTime,
             typeNames: {
-                rate: '转化率',
-                name: colorLegend || '转化'
+                rate: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale = i18n.locale) === null || _i18n_locale === void 0 ? void 0 : _i18n_locale['common.conversionRate']) || '转化率',
+                name: colorLegend || (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale1 = i18n.locale) === null || _i18n_locale1 === void 0 ? void 0 : _i18n_locale1['common.conversion']) || '转化'
             },
             toolbarExtra: toolBar,
             loading: loading

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

@@ -1,3 +1,11 @@
+function _array_like_to_array(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 _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -11,6 +19,33 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    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 _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -26,32 +61,76 @@ function _object_spread(target) {
     }
     return target;
 }
-import React from "react";
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(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(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import React, { useEffect, useState } from "react";
+import { useLocale } from "../../../I18n";
+/** 图例每页显示条数，超过则显示分页 */ var LEGEND_PAGE_SIZE = 12;
 var Legend = function Legend(param) {
     var chartData = param.chartData, backgroundColors = param.backgroundColors, hiddenDataIndicesByChart = param.hiddenDataIndicesByChart, chartIndex = param.chartIndex, onLegendItemClick = param.onLegendItemClick, total = param.total, baseClassName = param.baseClassName, hashId = param.hashId, isMobile = param.isMobile;
+    var locale = useLocale();
     var hiddenDataIndices = React.useMemo(function() {
         return hiddenDataIndicesByChart[chartIndex] || new Set();
     }, [
         hiddenDataIndicesByChart,
         chartIndex
     ]);
+    var totalPages = Math.max(1, Math.ceil(chartData.length / LEGEND_PAGE_SIZE));
+    var _useState = _sliced_to_array(useState(0), 2), currentPage = _useState[0], setCurrentPage = _useState[1];
+    useEffect(function() {
+        setCurrentPage(0);
+    }, [
+        chartData.length,
+        chartIndex
+    ]);
+    var startIndex = currentPage * LEGEND_PAGE_SIZE;
+    var displayedItems = chartData.slice(startIndex, startIndex + LEGEND_PAGE_SIZE);
+    var handlePrevPage = function handlePrevPage() {
+        setCurrentPage(function(p) {
+            return Math.max(0, p - 1);
+        });
+    };
+    var handleNextPage = function handleNextPage() {
+        setCurrentPage(function(p) {
+            return Math.min(totalPages - 1, p + 1);
+        });
+    };
     return /*#__PURE__*/ React.createElement("div", {
         className: [
             "".concat(baseClassName, "-legend"),
             hashId
         ].filter(Boolean).join(' '),
         style: _object_spread({
-            marginLeft: isMobile ? 0 : 12,
-            maxHeight: isMobile ? '120px' : 'none',
-            overflowY: isMobile ? 'auto' : 'visible'
+            marginLeft: isMobile ? 0 : 12
         }, isMobile ? {
+            display: 'flex',
+            flexDirection: 'column',
+            maxHeight: '200px',
+            minHeight: 0,
             alignSelf: 'center'
         } : {})
-    }, chartData.map(function(d, i) {
-        var isHidden = hiddenDataIndices.has(i);
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: _object_spread({}, isMobile ? {
+            flex: 1,
+            minHeight: 0,
+            overflowY: 'auto',
+            overflowX: 'hidden'
+        } : {})
+    }, displayedItems.map(function(d, i) {
+        var dataIndex = startIndex + i;
+        var isHidden = hiddenDataIndices.has(dataIndex);
         var _obj;
         return /*#__PURE__*/ React.createElement("div", {
-            key: i,
+            key: dataIndex,
             className: [
                 "".concat(baseClassName, "-legend-item"),
                 hashId
@@ -64,23 +143,23 @@ var Legend = function Legend(param) {
                 textDecoration: isHidden ? 'line-through' : 'none'
             },
             onClick: function onClick() {
-                return onLegendItemClick(i);
+                return onLegendItemClick(dataIndex);
             },
             onKeyDown: function onKeyDown(e) {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
-                    onLegendItemClick(i);
+                    onLegendItemClick(dataIndex);
                 }
             },
             tabIndex: 0,
             role: "button",
-            "aria-label": "".concat(isHidden ? '显示' : '隐藏', " ").concat(d.label)
+            "aria-label": "".concat(isHidden ? locale['chart.legend.show'] : locale['chart.legend.hide'], " ").concat(d.label)
         }, /*#__PURE__*/ React.createElement("span", {
             className: [
                 "".concat(baseClassName, "-legend-color"),
                 hashId
             ].filter(Boolean).join(' '),
-            style: (_obj = {}, _define_property(_obj, '--donut-legend-color', backgroundColors[i] || '#ccc'), _define_property(_obj, "width", isMobile ? 10 : 12), _define_property(_obj, "height", isMobile ? 10 : 12), _define_property(_obj, "borderRadius", 4), _define_property(_obj, "marginRight", isMobile ? 4 : 6), _obj)
+            style: (_obj = {}, _define_property(_obj, '--donut-legend-color', backgroundColors[dataIndex] || '#ccc'), _define_property(_obj, "width", isMobile ? 10 : 12), _define_property(_obj, "height", isMobile ? 10 : 12), _define_property(_obj, "borderRadius", 4), _define_property(_obj, "marginRight", isMobile ? 4 : 6), _obj)
         }), /*#__PURE__*/ React.createElement("span", {
             className: [
                 "".concat(baseClassName, "-legend-label"),
@@ -118,6 +197,47 @@ var Legend = function Legend(param) {
             var v = typeof d.value === 'number' ? d.value : Number(d.value);
             return total > 0 && Number.isFinite(v) ? (v / total * 100).toFixed(0) : '0';
         }(), "%")));
-    }));
+    })), totalPages > 1 && /*#__PURE__*/ React.createElement("div", {
+        className: [
+            "".concat(baseClassName, "-legend-pagination"),
+            hashId
+        ].filter(Boolean).join(' '),
+        style: isMobile ? {
+            flexShrink: 0
+        } : undefined
+    }, /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        "aria-label": locale['chart.legend.prevPage'],
+        disabled: currentPage <= 0,
+        onClick: handlePrevPage,
+        style: {
+            padding: '2px 6px',
+            fontSize: 12,
+            cursor: currentPage <= 0 ? 'not-allowed' : 'pointer',
+            opacity: currentPage <= 0 ? 0.5 : 1,
+            border: '1px solid rgba(0,0,0,0.15)',
+            borderRadius: 4,
+            background: '#fff'
+        }
+    }, "<"), /*#__PURE__*/ React.createElement("span", {
+        style: {
+            fontSize: 12,
+            color: '#767E8B'
+        }
+    }, currentPage + 1, "/", totalPages), /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        "aria-label": locale['chart.legend.nextPage'],
+        disabled: currentPage >= totalPages - 1,
+        onClick: handleNextPage,
+        style: {
+            padding: '2px 6px',
+            fontSize: 12,
+            cursor: currentPage >= totalPages - 1 ? 'not-allowed' : 'pointer',
+            opacity: currentPage >= totalPages - 1 ? 0.5 : 1,
+            border: '1px solid rgba(0,0,0,0.15)',
+            borderRadius: 4,
+            background: '#fff'
+        }
+    }, ">")));
 };
 export default Legend;

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

@@ -146,8 +146,10 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import { ConfigProvider } from "antd";
 import { ArcElement, Chart as ChartJS, Legend, Tooltip } from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
 import classNames from "clsx";
 import React, { useContext, useMemo, useRef, useState } from "react";
+import { useLocale } from "../../../I18n";
 import { Doughnut } from "react-chartjs-2";
 import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
 import { isWindowDefined } from "../env";
@@ -156,7 +158,7 @@ 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 { createBackgroundArcPlugin, createCenterTextPlugin } from "./plugins";
+import { createBackgroundArcPlugin, createCenterTextPlugin, createDataLabelsLeaderLinePlugin } from "./plugins";
 import { useStyle } from "./style";
 /**
  * @fileoverview 环形图组件文件
@@ -225,11 +227,12 @@ import { useStyle } from "./style";
         if (!isWindowDefined()) {
             return undefined;
         }
-        ChartJS.register(ArcElement, Tooltip, Legend);
+        ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
         donutChartComponentsRegistered = true;
         return undefined;
     }, []);
     var _useMobile = useMobile(), isMobile = _useMobile.isMobile, windowWidth = _useMobile.windowWidth;
+    var locale = useLocale();
     // 默认配置：当 configs 不传时，使用默认配置，showLegend 默认为 true
     var defaultConfigs = [
         {
@@ -454,7 +457,7 @@ import { useStyle } from "./style";
             chartData = [
                 currentDataItem,
                 {
-                    label: '剩余',
+                    label: locale['chart.legend.remaining'],
                     value: remainingValue,
                     category: currentDataItem.category
                 }
@@ -546,6 +549,9 @@ import { useStyle } from "./style";
                 legend: {
                     display: false
                 },
+                /** 默认不展示扇区上的数值与占比，仅通过 configs[].showDataLabels === true 开启 */ datalabels: {
+                    display: false
+                },
                 tooltip: {
                     enabled: cfg.showTooltip !== false,
                     filter: function filter(tooltipItem) {
@@ -568,7 +574,10 @@ import { useStyle } from "./style";
                             var label = param.label, raw = param.raw;
                             var val = typeof raw === 'number' ? raw : Number(raw);
                             var pct = total > 0 && Number.isFinite(val) ? (val / total * 100).toFixed(0) : '0';
-                            return "".concat(label, ": ").concat(Number.isFinite(val) ? val : raw, " (").concat(pct, "%)");
+                            if (cfg.showDataLabels) {
+                                return "".concat(label, ": ").concat(Number.isFinite(val) ? val : raw, " (").concat(pct, "%)");
+                            }
+                            return "".concat(label, " (").concat(pct, "%)");
                         }
                     }
                 }
@@ -584,6 +593,43 @@ import { useStyle } from "./style";
                 padding: isMobile ? 4 : 6
             }
         };
+        var dataLabelOffset = isMobile ? 22 : 36;
+        var optionsWithDataLabels = _object_spread_props(_object_spread({}, options, cfg.showDataLabels === true && !isSingleValueMode && {
+            layout: _object_spread_props(_object_spread({}, options.layout), {
+                padding: isMobile ? 36 : 52
+            })
+        }), {
+            plugins: _object_spread({}, options.plugins, cfg.showDataLabels === true && !isSingleValueMode && {
+                datalabels: {
+                    display: function display(context) {
+                        var _context_dataset_data, _context_dataset;
+                        var value = (_context_dataset = context.dataset) === null || _context_dataset === void 0 ? void 0 : (_context_dataset_data = _context_dataset.data) === null || _context_dataset_data === void 0 ? void 0 : _context_dataset_data[context.dataIndex];
+                        var numVal = typeof value === 'number' ? value : Number(value);
+                        if (!Number.isFinite(numVal) || total <= 0) return false;
+                        var pct = numVal / total * 100;
+                        if (pct < 2) return false;
+                        return true;
+                    },
+                    formatter: function formatter(value, context) {
+                        var _context_chart_data_labels;
+                        var pct = total > 0 ? (value / total * 100).toFixed(2) : '0';
+                        var label = (_context_chart_data_labels = context.chart.data.labels) === null || _context_chart_data_labels === void 0 ? void 0 : _context_chart_data_labels[context.dataIndex];
+                        var labelStr = label !== undefined && label !== null ? String(label) : '';
+                        return labelStr ? "".concat(labelStr, ": ").concat(pct, "%") : "".concat(value, " (").concat(pct, "%)");
+                    },
+                    color: isDarkTheme ? '#fff' : '#343A45',
+                    font: {
+                        size: isMobile ? 10 : 11,
+                        weight: 'normal'
+                    },
+                    anchor: 'end',
+                    align: 'end',
+                    offset: dataLabelOffset,
+                    clamp: false,
+                    clip: false
+                }
+            })
+        });
         var _obj, _obj1;
         return /*#__PURE__*/ React.createElement(ChartContainer, {
             key: idx,
@@ -622,10 +668,16 @@ import { useStyle } from "./style";
                 chartRefs.current[idx] = instance;
             },
             data: chartJsData,
-            options: options
+            options: optionsWithDataLabels,
+            plugins: cfg.showDataLabels === true && !isSingleValueMode ? [
+                createDataLabelsLeaderLinePlugin(dataLabelOffset),
+                ChartDataLabels
+            ] : []
         })), cfg.showLegend && /*#__PURE__*/ React.createElement(LegendView, {
             chartData: chartData,
-            backgroundColors: backgroundColors,
+            backgroundColors: chartData.map(function(_, i) {
+                return backgroundColors[i % backgroundColors.length];
+            }),
             hiddenDataIndicesByChart: hiddenDataIndicesByChart,
             chartIndex: idx,
             onLegendItemClick: function onLegendItemClick(dataIndex) {

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

@@ -1,3 +1,8 @@
 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 createBackgroundArcPlugin: (bgColor?: string, padding?: number) => Plugin<'doughnut'>;

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

@@ -1,3 +1,51 @@
+/** 指示线默认长度（像素），需与 datalabels 的 offset 一致，使线头与文案衔接 */ var DEFAULT_LEADER_LINE_PX = 4;
+/** 曲线控制点偏移系数，使指示线呈柔和弧线 */ var CURVE_OFFSET = 12;
+/** 与 datalabels 的 display 阈值一致：占比不超过此不展示标签，也不画指示线 */ var MIN_PCT_FOR_LABEL = 2;
+/**
+ * 数据标签指示线插件：仅在会展示数据标签的扇区上绘制线（与 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;
+    return {
+        id: 'datalabelsLeaderLine',
+        afterDatasetDraw: function afterDatasetDraw(chart, args) {
+            var _chart_data_datasets, _meta_data;
+            var ctx = chart.ctx;
+            var meta = chart.getDatasetMeta(args.index);
+            var dataset = (_chart_data_datasets = chart.data.datasets) === null || _chart_data_datasets === void 0 ? void 0 : _chart_data_datasets[args.index];
+            var values = dataset === null || dataset === void 0 ? void 0 : dataset.data;
+            if (!(meta === null || meta === void 0 ? void 0 : (_meta_data = meta.data) === null || _meta_data === void 0 ? void 0 : _meta_data.length) || !(values === null || values === void 0 ? void 0 : values.length)) return;
+            var total = values.reduce(function(s, v) {
+                return s + (Number.isFinite(Number(v)) ? Number(v) : 0);
+            }, 0);
+            if (total <= 0) return;
+            ctx.save();
+            ctx.strokeStyle = 'rgba(0, 25, 61, 0.16)';
+            ctx.lineWidth = 1;
+            meta.data.forEach(function(element, i) {
+                var val = Number(values[i]);
+                if (!Number.isFinite(val) || val / total * 100 < MIN_PCT_FOR_LABEL) return;
+                var arc = element;
+                var angle = (arc.startAngle + arc.endAngle) / 2;
+                var cos = Math.cos(angle);
+                var sin = Math.sin(angle);
+                var x1 = arc.x + arc.outerRadius * cos;
+                var y1 = arc.y + arc.outerRadius * sin;
+                var x2 = arc.x + (arc.outerRadius + lineLength) * cos;
+                var y2 = arc.y + (arc.outerRadius + lineLength) * sin;
+                var midX = (x1 + x2) / 2;
+                var midY = (y1 + y2) / 2;
+                var ctrlX = midX + CURVE_OFFSET * -sin;
+                var ctrlY = midY + CURVE_OFFSET * cos;
+                ctx.beginPath();
+                ctx.moveTo(x1, y1);
+                ctx.quadraticCurveTo(ctrlX, ctrlY, x2, y2);
+                ctx.stroke();
+            });
+            ctx.restore();
+        }
+    };
+};
 export var createCenterTextPlugin = function createCenterTextPlugin(value, label) {
     var isMobile = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
     return {

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

@@ -77,20 +77,24 @@ var genStyle = function genStyle(token) {
             gap: 8,
             marginBottom: 6
         }),
-        '&-chart-wrapper': _define_property({}, "@media (max-width: 768px)", {
+        '&-chart-wrapper': _define_property({
+            overflow: 'visible'
+        }, "@media (max-width: 768px)", {
             marginBottom: 12
         }),
         '&-row': _define_property({
             display: 'flex',
             alignItems: 'center',
-            flexDirection: 'row'
+            flexDirection: 'row',
+            overflow: 'visible'
         }, "@media (max-width: 768px)", {
             flexDirection: 'column',
             alignItems: 'stretch'
         }),
         '&-chart': _define_property({
             width: 'var(--donut-chart-width, 200px)',
-            height: 'var(--donut-chart-height, 200px)'
+            height: 'var(--donut-chart-height, 200px)',
+            overflow: 'visible'
         }, "@media (max-width: 768px)", {
             alignSelf: 'center',
             marginBottom: 8
@@ -105,9 +109,7 @@ var genStyle = function genStyle(token) {
             marginLeft: 12
         }, "@media (max-width: 768px)", {
             marginLeft: 0,
-            marginTop: 8,
-            maxHeight: '120px',
-            overflowY: 'auto'
+            marginTop: 8
         }),
         '&-legend-item': _define_property({
             display: 'flex',
@@ -168,6 +170,15 @@ var genStyle = function genStyle(token) {
             fontSize: 10,
             marginTop: 1
         }),
+        '&-legend-pagination': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+            marginTop: 8,
+            paddingTop: 8,
+            borderTop: '1px solid rgba(0,0,0,0.06)'
+        },
         '&-statistic-container': {
             display: 'flex',
             gap: '16px',

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

@@ -19,6 +19,8 @@ export interface DonutChartConfig {
     borderColor?: string;
     /** 图表样式：'donut' 为环形图（默认），'pie' 为饼图 */
     chartStyle?: 'donut' | 'pie';
+    /** 是否展示数据标签与指示线：开启后扇区外显示数值/占比及连接线，tooltip 中也会展示原始数值，默认 false */
+    showDataLabels?: boolean;
 }
 export interface DonutChartProps extends ChartContainerProps {
     data: DonutChartData[];