@ant-design/agentic-ui 2.29.37 → 2.29.38

package/dist/MarkdownEditor/editor/elements/index.js

@@ -132,9 +132,23 @@ import { Paragraph } from "./Paragraph";
 import { ReadonlyParagraph } from "./Paragraph/ReadonlyParagraph";
 import { Schema } from "./Schema";
 import { ReadonlySchema } from "./Schema/ReadonlySchema";
+import { JINJA_DOLLAR_PLACEHOLDER } from "../parser/constants";
 import { tableRenderElement } from "./Table";
 import { ReadonlyTableComponent } from "./Table/ReadonlyTableComponent";
 import { TagPopup } from "./TagPopup";
+/** 递归将 Jinja 占位符还原为 $ 显示 */ var restoreJinjaDollarInChildren = function restoreJinjaDollarInChildren1(children) {
+    return React.Children.map(children, function(child) {
+        if (typeof child === 'string') {
+            return child.split(JINJA_DOLLAR_PLACEHOLDER).join('$');
+        }
+        if (/*#__PURE__*/ React.isValidElement(child) && child.props.children !== undefined && child.props.children !== null) {
+            return /*#__PURE__*/ React.cloneElement(child, {
+                children: restoreJinjaDollarInChildren(child.props.children)
+            });
+        }
+        return child;
+    });
+};
 /**
  * 性能优化说明：
  *
@@ -481,7 +495,7 @@ var MLeafComponent = function MLeafComponent(props) {
         "data-url": leaf.url ? 'url' : undefined,
         style: style,
         className: (prefixClassName === null || prefixClassName === void 0 ? void 0 : prefixClassName.trim()) ? prefixClassName === null || prefixClassName === void 0 ? void 0 : prefixClassName.trim() : undefined
-    }), children);
+    }), restoreJinjaDollarInChildren(children));
     // 如果有评论，使用 CommentLeaf 包裹普通 DOM
     if (hasComment) {
         return /*#__PURE__*/ React.createElement(CommentLeaf, {

package/dist/MarkdownEditor/editor/parser/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 占位符：保护 Jinja 块内 $ 不被 remark-math 解析为数学公式。
+ * 在 markdown 解析前替换，渲染与序列化时还原为 $。
+ */
+export declare const JINJA_DOLLAR_PLACEHOLDER = "\uE01A";

package/dist/MarkdownEditor/editor/parser/constants.js

@@ -0,0 +1,4 @@
+/**
+ * 占位符：保护 Jinja 块内 $ 不被 remark-math 解析为数学公式。
+ * 在 markdown 解析前替换，渲染与序列化时还原为 $。
+ */ export var JINJA_DOLLAR_PLACEHOLDER = '\uE01A';

package/dist/MarkdownEditor/editor/parser/parserSlateNodeToMarkdown.js

@@ -82,6 +82,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 /* eslint-disable @typescript-eslint/no-loop-func */ /* eslint-disable no-case-declarations */ /* eslint-disable no-param-reassign */ /* eslint-disable @typescript-eslint/no-use-before-define */ import { Node } from "slate";
 import stringWidth from "string-width";
 import { debugInfo } from "../../../Utils/debugUtils";
+import { JINJA_DOLLAR_PLACEHOLDER } from "./constants";
 import { getMediaType } from "../utils/dom";
 var inlineNode = new Set([
     'break'
@@ -718,7 +719,7 @@ export var isMix = function isMix(t) {
  * - `<del>` if `strikethrough` is true.
  * - `<a href="{url}">` if `url` is defined.
  */ var textHtml = function textHtml(t) {
-    var str = t.text || '';
+    var str = (t.text || '').split(JINJA_DOLLAR_PLACEHOLDER).join('$');
     if (t.highColor) str = '<span style="color:'.concat(t.highColor, '">').concat(str, "</span>");
     if (t.code) str = "<code>".concat(str, "</code>");
     if (t.italic) str = "<i>".concat(str, "</i>");
@@ -745,9 +746,9 @@ export var isMix = function isMix(t) {
  * - 将换行符转换为 Markdown 换行符
  * - 保留文本前后的空白字符
  */ var textStyle = function textStyle(t) {
-    var _t_text;
+    var _split_join;
     if (!t.text && !t.tag) return '';
-    var str = (t === null || t === void 0 ? void 0 : (_t_text = t.text) === null || _t_text === void 0 ? void 0 : _t_text.replace(RegExp("(?<!\\\\)\\\\", "g"), '\\').replace(/\n/g, '  \n')) || '';
+    var str = ((_split_join = ((t === null || t === void 0 ? void 0 : t.text) || '').split(JINJA_DOLLAR_PLACEHOLDER).join('$')) === null || _split_join === void 0 ? void 0 : _split_join.replace(RegExp("(?<!\\\\)\\\\", "g"), '\\').replace(/\n/g, '  \n')) || '';
     var preStr = '', afterStr = '';
     // Apply formats in a consistent order:
     // 1. Code (most specific)
@@ -834,7 +835,7 @@ export var isMix = function isMix(t) {
     });
     var str = textStyle(t);
     if (t === null || t === void 0 ? void 0 : t.url) {
-        str = "[".concat(t.text, "](").concat(encodeURI(t === null || t === void 0 ? void 0 : t.url), ")");
+        str = "[".concat((t.text || '').split(JINJA_DOLLAR_PLACEHOLDER).join('$'), "](").concat(encodeURI(t === null || t === void 0 ? void 0 : t.url), ")");
     } else if (isMix(t) && index !== -1) {
         var next = siblings[index + 1];
         if (!str.endsWith(' ') && next && !Node.string(next).startsWith(' ')) {

package/dist/MarkdownEditor/editor/parser/remarkParse.d.ts

@@ -15,5 +15,10 @@ export declare function convertParagraphToImage(): (tree: any) => void;
  *   Transformer function.
  */
 export declare function fixStrongWithSpecialChars(): (tree: any) => void;
+/**
+ * 保护 Jinja 块内的 $，防止被 remark-math 误解析为行内数学（如 {{ $var }}）
+ * 须在 remark-math 之前运行
+ */
+export declare function protectJinjaDollarInText(): (tree: any) => void;
 declare const markdownParser: import("unified").Processor<import("mdast").Root, undefined, undefined, import("mdast").Root, string>;
 export default markdownParser;

package/dist/MarkdownEditor/editor/parser/remarkParse.js

@@ -30,6 +30,7 @@ import remarkMath from "remark-math";
 import remarkParse from "remark-parse";
 import { unified } from "unified";
 import { visit } from "unist-util-visit";
+import { JINJA_DOLLAR_PLACEHOLDER } from "./constants";
 /**
  * 提取段落节点的文本内容
  * @param paragraphNode - 段落节点
@@ -344,6 +345,20 @@ import { visit } from "unist-util-visit";
         });
     };
 }
+/**
+ * 保护 Jinja 块内的 $，防止被 remark-math 误解析为行内数学（如 {{ $var }}）
+ * 须在 remark-math 之前运行
+ */ export function protectJinjaDollarInText() {
+    return function(tree) {
+        visit(tree, 'text', function(node) {
+            if (!node.value || typeof node.value !== 'string') return;
+            var replaceInBlock = function replaceInBlock(str) {
+                return str.replace(/\$/g, JINJA_DOLLAR_PLACEHOLDER);
+            };
+            node.value = node.value.replace(/\{\{[^}]*\}\}/g, replaceInBlock).replace(/\{%[^%]*%\}/g, replaceInBlock).replace(/\{#[\s\S]*?#\}/g, replaceInBlock);
+        });
+    };
+}
 // Markdown 解析器（用于解析 Markdown 为 mdast AST）
 // 注意：这个解析器只用于解析，不包含 HTML 渲染相关的插件
 var markdownParser = unified().use(remarkParse) // 解析 Markdown
@@ -355,6 +370,7 @@ var markdownParser = unified().use(remarkParse) // 解析 Markdown
 }) // GFM 插件，禁用单波浪线删除线
 .use(fixStrongWithSpecialChars) // 修复包含特殊字符的加粗文本
 .use(convertParagraphToImage) // 将以 ! 开头的段落转换为图片,将 | 开头的段落转换为表格
+.use(protectJinjaDollarInText) // 保护 Jinja 块内 $，避免被 remark-math 误解析
 .use(remarkMath, {
     singleDollarTextMath: true
 });

package/dist/MarkdownEditor/editor/plugins/useHighlight.js

@@ -134,6 +134,45 @@ var createRange = function createRange(path, childIndex, offset, length) {
         }
     }, props);
 };
+/** 创建可跨子节点的 range（用于 Jinja 等可能被 inline code 分割的匹配） */ var createRangeSpanningChildren = function createRangeSpanningChildren(path, children, globalStart, globalEnd) {
+    var props = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : {};
+    var offset = 0;
+    var anchorPath = null;
+    var anchorOffset = 0;
+    var focusPath = null;
+    var focusOffset = 0;
+    for(var i = 0; i < children.length; i++){
+        var _ref;
+        var _children_i;
+        var text = (_ref = (_children_i = children[i]) === null || _children_i === void 0 ? void 0 : _children_i.text) !== null && _ref !== void 0 ? _ref : '';
+        var len = text.length;
+        var childStart = offset;
+        var childEnd = offset + len;
+        if (globalStart < childEnd && anchorPath === null) {
+            anchorPath = path.concat(i);
+            anchorOffset = Math.max(0, globalStart - childStart);
+        }
+        if (globalEnd <= childEnd && focusPath === null) {
+            focusPath = path.concat(i);
+            focusOffset = Math.min(len, globalEnd - childStart);
+            break;
+        }
+        offset = childEnd;
+    }
+    if (anchorPath && focusPath) {
+        return _object_spread({
+            anchor: {
+                path: anchorPath,
+                offset: anchorOffset
+            },
+            focus: {
+                path: focusPath,
+                offset: focusOffset
+            }
+        }, props);
+    }
+    return null;
+};
 // 处理文本节点的匹配逻辑
 var processTextMatches = function processTextMatches(text, path, childIndex) {
     var ranges = [];
@@ -176,16 +215,18 @@ var processLinkMatches = function processLinkMatches(text, path, childIndex) {
     }
     return ranges;
 };
-var processJinjaMatches = function processJinjaMatches(text, path, childIndex) {
+/** 在整段文本上匹配 Jinja，支持被 inline code 分割的语法（如 {% if `x` %}） */ var processJinjaMatchesOnFullText = function processJinjaMatchesOnFullText(fullText, path, children) {
     var ranges = [];
     var collect = function collect(reg, prop) {
         reg.lastIndex = 0;
         var match;
-        while((match = reg.exec(text)) !== null){
-            var index = match.index;
-            if (typeof index === 'number') {
-                ranges.push(createRange(path, childIndex, index, match[0].length, _define_property({}, prop, true)));
-            }
+        while((match = reg.exec(fullText)) !== null){
+            var start = match.index;
+            var matched = match[0];
+            if (typeof start !== 'number' || !matched) continue;
+            var end = start + matched.length;
+            var range = createRangeSpanningChildren(path, children, start, end, _define_property({}, prop, true));
+            if (range) ranges.push(range);
         }
     };
     collect(JINJA_VARIABLE_REG, 'jinjaVariable');
@@ -213,6 +254,7 @@ export function useHighlight(store, jinjaEnabled) {
                 var allTextRanges = [];
                 var children = node.children;
                 var childrenLength = children.length;
+                var fullText = Node.string(node);
                 for(var i = 0; i < childrenLength; i++){
                     var child = children[i];
                     // 处理 footnote 和 HTML
@@ -225,10 +267,11 @@ export function useHighlight(store, jinjaEnabled) {
                         var _allTextRanges1;
                         (_allTextRanges1 = allTextRanges).push.apply(_allTextRanges1, _to_consumable_array(processLinkMatches(child.text, path, i)));
                     }
-                    if (jinjaEnabled && child.text && !EditorUtils.isDirtLeaf(child)) {
-                        var _allTextRanges2;
-                        (_allTextRanges2 = allTextRanges).push.apply(_allTextRanges2, _to_consumable_array(processJinjaMatches(child.text, path, i)));
-                    }
+                }
+                // Jinja 在整段文本上匹配，支持 {% if `x` %} 等被 inline code 分割的语法
+                if (jinjaEnabled && fullText) {
+                    var _allTextRanges2;
+                    (_allTextRanges2 = allTextRanges).push.apply(_allTextRanges2, _to_consumable_array(processJinjaMatchesOnFullText(fullText, path, children)));
                 }
                 // 统一缓存
                 cacheTextNode.set(node, {

package/dist/MarkdownEditor/editor/plugins/useKeyboard.js

@@ -257,8 +257,8 @@ import { useEditorStore } from "../store";
                     var codeMatch = str.match(/^```([\w+\-#]+)$/i);
                     if (codeMatch) {} else {
                         var strAfterKey = str + (e.key.length === 1 ? e.key : '');
-                        // 仅在实际输入一个字符且刚好补全 trigger 时打开面板，避免 Backspace 等导致误打开
-                        if (jinjaTemplatePanelEnabled && e.key.length === 1 && strAfterKey === jinjaTrigger && setOpenJinjaTemplate && setJinjaAnchorPath) {
+                        // 在实际输入一个字符且补全 trigger 时打开面板，支持在文本后输入（如 "hello {}"）
+                        if (jinjaTemplatePanelEnabled && e.key.length === 1 && strAfterKey.endsWith(jinjaTrigger) && setOpenJinjaTemplate && setJinjaAnchorPath) {
                             setJinjaAnchorPath(node3[1]);
                             setTimeout(function() {
                                 return setOpenJinjaTemplate(true);

package/dist/MarkdownEditor/editor/style.js

@@ -498,7 +498,7 @@ var genStyle = function genStyle(token) {
             marginTop: '0.5em',
             marginBottom: '0.5em'
         },
-        '& &-inline-code': {
+        '& code&-inline-code': {
             display: 'inline',
             fontFamily: "'Roboto,Mono SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
             margin: '1px 3px',

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/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,7 +61,19 @@ 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";
+/** 图例每页显示条数，超过则显示分页 */ 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 hiddenDataIndices = React.useMemo(function() {
@@ -35,23 +82,53 @@ var Legend = function Legend(param) {
         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,12 +141,12 @@ 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,
@@ -80,7 +157,7 @@ var Legend = function Legend(param) {
                 "".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 +195,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": "上一页",
+        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": "下一页",
+        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,6 +146,7 @@ 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 { Doughnut } from "react-chartjs-2";
@@ -156,7 +157,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,7 +226,7 @@ import { useStyle } from "./style";
         if (!isWindowDefined()) {
             return undefined;
         }
-        ChartJS.register(ArcElement, Tooltip, Legend);
+        ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
         donutChartComponentsRegistered = true;
         return undefined;
     }, []);
@@ -546,6 +547,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 +572,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 +591,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 +666,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[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.29.37",
+  "version": "2.29.38",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",
@@ -24,6 +24,7 @@
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
     "prepare": "husky install && dumi setup",
+    "prepublishOnly": "father doctor && pnpm run test && pnpm run build",
     "prettier": "prettier --write \"{src,docs,test}/**/*.{js,jsx,ts,tsx,css,less,json,md}\"",
     "preview": "pnpm dumi preview",
     "report:demo": "node scripts/generateDemoReport.js",
@@ -84,6 +85,7 @@
     "is-hotkey": "^0.2.0",
     "json5": "^2.2.3",
     "katex": "^0.16.28",
+    "lodash": "^4.17.23",
     "lodash-es": "^4.17.23",
     "lottie-react": "^2.4.1",
     "mermaid": "^11.12.2",