@ant-design/agentic-ui 2.7.0 → 2.8.0

package/dist/History/style.js

@@ -240,12 +240,20 @@ var genStyle = (token) => {
         "&:hover": {
           // 支持直接在元素上的属性
           "&[aria-describedby]": {
-            animation: "scrollText 2s linear 0.5s forwards",
+            animationName: "scrollText",
+            animationDuration: "2s",
+            animationTimingFunction: "linear",
+            animationDelay: "0.5s",
+            animationFillMode: "forwards",
             animationPlayState: "running"
           },
           // 支持子元素上的属性
           "& > div[aria-describedby]": {
-            animation: "scrollText 2s linear 0.5s forwards",
+            animationName: "scrollText",
+            animationDuration: "2s",
+            animationTimingFunction: "linear",
+            animationDelay: "0.5s",
+            animationFillMode: "forwards",
             animationPlayState: "running"
           },
           // 渐变遮罩层

package/dist/MarkdownInputField/AttachmentButton/utils.d.ts

@@ -19,6 +19,7 @@
 export declare const kbToSize: (kb: number) => string;
 /**
  * 检查文件是否为图片类型
+ * 通过 MIME 类型和文件扩展名双重判断
  *
  * @param {File} file - 要检查的文件
  * @returns {boolean} 是否为图片文件

package/dist/MarkdownInputField/AttachmentButton/utils.js

@@ -12,7 +12,23 @@ var kbToSize = (kb) => {
   return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i];
 };
 var isImageFile = (file) => {
-  return file.type.startsWith("image/");
+  if (file.type.startsWith("image/")) {
+    return true;
+  }
+  const imageExtensions = [
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".gif",
+    ".bmp",
+    ".webp",
+    ".svg",
+    ".ico",
+    ".tiff",
+    ".tif"
+  ];
+  const fileName = file.name.toLowerCase();
+  return imageExtensions.some((ext) => fileName.endsWith(ext));
 };
 export {
   isImageFile,

package/dist/Plugins/chart/ChartRender.d.ts

@@ -4,6 +4,7 @@ import React from 'react';
  *
  * 该组件用于渲染各种类型的图表，支持饼图、柱状图、折线图、面积图、表格等。
  * 提供图表类型切换、全屏显示、下载、配置等功能。
+ * 使用 React.lazy 和 Suspense 实现代码分割和延迟加载，优化性能。
  *
  * @component
  * @description 图表渲染组件，支持多种图表类型的渲染和交互
@@ -54,6 +55,7 @@ import React from 'react';
  * - 提供响应式布局
  * - 集成国际化支持
  * - 提供图表属性工具栏
+ * - 使用 React.lazy 和 Suspense 实现代码分割
  */
 export declare const ChartRender: React.FC<{
     chartType: 'pie' | 'donut' | 'bar' | 'line' | 'column' | 'area' | 'radar' | 'scatter' | 'funnel' | 'descriptions' | 'table';

package/dist/Plugins/chart/ChartRender.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,12 +16,33 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/Plugins/chart/ChartRender.tsx
 import { DownOutlined, SettingOutlined } from "@ant-design/icons";
 import { ProForm, ProFormSelect } from "@ant-design/pro-components";
 import { ConfigProvider, Descriptions, Dropdown, Popover, Table } from "antd";
-import React, { useContext, useMemo, useState } from "react";
+import React, { lazy, Suspense, useContext, useMemo, useState } from "react";
 import { ActionIconBox } from "../../Components/ActionIconBox";
 import { Loading } from "../../Components/Loading";
 import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
@@ -75,6 +98,219 @@ var getChartMap = (i18n) => {
     }
   };
 };
+var ChartRuntimeRendererImpl = ({
+  chartType,
+  runtime,
+  convertDonutData,
+  convertFlatData,
+  config,
+  renderKey,
+  title,
+  dataTime,
+  toolBar,
+  filterBy,
+  groupBy,
+  colorLegend,
+  chartData,
+  getFieldValue
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  const {
+    DonutChart,
+    FunnelChart,
+    AreaChart,
+    BarChart,
+    LineChart,
+    RadarChart,
+    ScatterChart
+  } = runtime;
+  if (chartType === "pie") {
+    return /* @__PURE__ */ React.createElement(
+      DonutChart,
+      {
+        key: `${config == null ? void 0 : config.index}-pie-${renderKey}`,
+        data: convertDonutData,
+        configs: [{ chartStyle: "pie", showLegend: true }],
+        height: (config == null ? void 0 : config.height) || 400,
+        title,
+        showToolbar: true,
+        dataTime,
+        toolbarExtra: toolBar
+      }
+    );
+  }
+  if (chartType === "donut") {
+    return /* @__PURE__ */ React.createElement(
+      DonutChart,
+      {
+        key: `${config == null ? void 0 : config.index}-donut-${renderKey}`,
+        data: convertDonutData,
+        configs: [{ chartStyle: "donut", showLegend: true }],
+        height: (config == null ? void 0 : config.height) || 400,
+        title,
+        showToolbar: true,
+        dataTime,
+        toolbarExtra: toolBar
+      }
+    );
+  }
+  if (chartType === "bar") {
+    return /* @__PURE__ */ React.createElement(
+      BarChart,
+      {
+        key: `${config == null ? void 0 : config.index}-bar-${renderKey}`,
+        data: convertFlatData,
+        height: (config == null ? void 0 : config.height) || 400,
+        title: title || "",
+        indexAxis: "y",
+        stacked: (_a = config == null ? void 0 : config.rest) == null ? void 0 : _a.stacked,
+        showLegend: (_c = (_b = config == null ? void 0 : config.rest) == null ? void 0 : _b.showLegend) != null ? _c : true,
+        showGrid: (_e = (_d = config == null ? void 0 : config.rest) == null ? void 0 : _d.showGrid) != null ? _e : true,
+        dataTime,
+        toolbarExtra: toolBar
+      }
+    );
+  }
+  if (chartType === "line") {
+    return /* @__PURE__ */ React.createElement(
+      LineChart,
+      {
+        key: `${config == null ? void 0 : config.index}-line-${renderKey}`,
+        data: convertFlatData,
+        height: (config == null ? void 0 : config.height) || 400,
+        title: title || "",
+        showLegend: (_g = (_f = config == null ? void 0 : config.rest) == null ? void 0 : _f.showLegend) != null ? _g : true,
+        showGrid: (_i = (_h = config == null ? void 0 : config.rest) == null ? void 0 : _h.showGrid) != null ? _i : true,
+        dataTime,
+        toolbarExtra: toolBar
+      }
+    );
+  }
+  if (chartType === "column") {
+    return /* @__PURE__ */ React.createElement(
+      BarChart,
+      {
+        key: `${config == null ? void 0 : config.index}-column-${renderKey}`,
+        data: convertFlatData,
+        height: (config == null ? void 0 : config.height) || 400,
+        title: title || "",
+        indexAxis: "x",
+        stacked: (_j = config == null ? void 0 : config.rest) == null ? void 0 : _j.stacked,
+        showLegend: (_l = (_k = config == null ? void 0 : config.rest) == null ? void 0 : _k.showLegend) != null ? _l : true,
+        showGrid: (_n = (_m = config == null ? void 0 : config.rest) == null ? void 0 : _m.showGrid) != null ? _n : true,
+        dataTime,
+        toolbarExtra: toolBar
+      }
+    );
+  }
+  if (chartType === "area") {
+    return /* @__PURE__ */ React.createElement(
+      AreaChart,
+      {
+        key: `${config == null ? void 0 : config.index}-area-${renderKey}`,
+        data: convertFlatData,
+        height: (config == null ? void 0 : config.height) || 400,
+        title: title || "",
+        showLegend: (_p = (_o = config == null ? void 0 : config.rest) == null ? void 0 : _o.showLegend) != null ? _p : true,
+        showGrid: (_r = (_q = config == null ? void 0 : config.rest) == null ? void 0 : _q.showGrid) != null ? _r : true,
+        dataTime,
+        toolbarExtra: toolBar
+      }
+    );
+  }
+  if (chartType === "radar") {
+    const radarData = (chartData || []).map((row, i) => {
+      var _a2;
+      const filterLabel = getFieldValue(row, filterBy);
+      const category = getFieldValue(row, groupBy);
+      const type = getFieldValue(row, colorLegend);
+      return __spreadValues(__spreadValues(__spreadValues({
+        label: String((_a2 = row == null ? void 0 : row[config == null ? void 0 : config.x]) != null ? _a2 : i + 1),
+        score: row == null ? void 0 : row[config == null ? void 0 : config.y]
+      }, category ? { category } : {}), type ? { type } : {}), filterLabel ? { filterLabel } : {});
+    });
+    return /* @__PURE__ */ React.createElement(
+      RadarChart,
+      {
+        key: `${config == null ? void 0 : config.index}-radar-${renderKey}`,
+        data: radarData,
+        height: (config == null ? void 0 : config.height) || 400,
+        title: title || "",
+        dataTime,
+        toolbarExtra: toolBar
+      }
+    );
+  }
+  if (chartType === "scatter") {
+    const scatterData = (chartData || []).map((row) => {
+      const filterLabel = getFieldValue(row, filterBy);
+      const category = getFieldValue(row, groupBy);
+      const type = getFieldValue(row, colorLegend);
+      return __spreadValues(__spreadValues(__spreadValues({
+        x: row == null ? void 0 : row[config == null ? void 0 : config.x],
+        y: row == null ? void 0 : row[config == null ? void 0 : config.y]
+      }, category ? { category } : {}), type ? { type } : {}), filterLabel ? { filterLabel } : {});
+    });
+    return /* @__PURE__ */ React.createElement(
+      ScatterChart,
+      {
+        key: `${config == null ? void 0 : config.index}-scatter-${renderKey}`,
+        data: scatterData,
+        height: (config == null ? void 0 : config.height) || 400,
+        title: title || "",
+        dataTime,
+        toolbarExtra: toolBar
+      }
+    );
+  }
+  if (chartType === "funnel") {
+    const funnelData = (chartData || []).map((row, i) => {
+      var _a2;
+      const filterLabel = getFieldValue(row, filterBy);
+      const category = getFieldValue(row, groupBy);
+      const type = getFieldValue(row, colorLegend);
+      return __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+        x: String((_a2 = row == null ? void 0 : row[config == null ? void 0 : config.x]) != null ? _a2 : i + 1),
+        y: toNumber(row == null ? void 0 : row[config == null ? void 0 : config.y], 0)
+      }, (row == null ? void 0 : row.ratio) !== void 0 ? { ratio: row.ratio } : {}), category ? { category } : {}), type ? { type } : {}), filterLabel ? { filterLabel } : {});
+    });
+    return /* @__PURE__ */ React.createElement(
+      FunnelChart,
+      {
+        key: `${config == null ? void 0 : config.index}-funnel-${renderKey}`,
+        data: funnelData,
+        height: (config == null ? void 0 : config.height) || 400,
+        title: title || "",
+        dataTime,
+        typeNames: { rate: "转化率", name: colorLegend || "转化" },
+        toolbarExtra: toolBar
+      }
+    );
+  }
+  return null;
+};
+var ChartRuntimeRenderer = lazy(() => __async(void 0, null, function* () {
+  const runtime = yield loadChartRuntime();
+  return {
+    default: (props) => /* @__PURE__ */ React.createElement(ChartRuntimeRendererImpl, __spreadProps(__spreadValues({}, props), { runtime }))
+  };
+}));
+var ChartRuntimeFallback = ({ height = 240 }) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      minHeight: height,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      color: "#6B7280"
+    },
+    role: "status",
+    "aria-live": "polite"
+  },
+  /* @__PURE__ */ React.createElement(Loading, null)
+);
 var ChartRender = (props) => {
   const [chartType, setChartType] = useState(() => props.chartType);
   const {
@@ -91,9 +327,6 @@ var ChartRender = (props) => {
   const i18n = useContext(I18nContext);
   const [config, setConfig] = useState(() => props.config);
   const [renderKey, setRenderKey] = useState(0);
-  const [runtime, setRuntime] = useState(null);
-  const [runtimeError, setRuntimeError] = useState(null);
-  const [isRuntimeLoading, setRuntimeLoading] = useState(false);
   const containerRef = React.useRef(null);
   const isIntersecting = useIntersectionOnce(containerRef);
   const renderDescriptionsFallback = React.useMemo(() => {
@@ -102,43 +335,6 @@ var ChartRender = (props) => {
     return chartData.length < 2 && columnCount > 8;
   }, [chartData, config == null ? void 0 : config.columns]);
   const shouldLoadRuntime = chartType !== "table" && chartType !== "descriptions" && !renderDescriptionsFallback;
-  React.useEffect(() => {
-    if (runtime)
-      return;
-    if (isRuntimeLoading)
-      return;
-    if (runtimeError)
-      return;
-    let cancelled = false;
-    setRuntimeLoading(true);
-    loadChartRuntime().then((module) => {
-      if (cancelled)
-        return;
-      setRuntime(module);
-    }).catch((error) => {
-      if (cancelled)
-        return;
-      const message = error instanceof Error ? error.message : String(error);
-      setRuntimeError(message);
-    }).finally(() => {
-      if (cancelled)
-        return;
-      setRuntimeLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    shouldLoadRuntime,
-    isIntersecting,
-    runtime,
-    isRuntimeLoading,
-    runtimeError
-  ]);
-  const handleRetryRuntime = React.useCallback(() => {
-    setRuntime(null);
-    setRuntimeError(null);
-  }, []);
   const ChartMap = useMemo(() => getChartMap(i18n), [i18n]);
   const getAxisTitles = () => {
     var _a, _b, _c, _d;
@@ -408,7 +604,6 @@ var ChartRender = (props) => {
   };
   const toolBar = getChartPopover();
   const chartDom = useMemo(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
     if (typeof window === "undefined")
       return null;
     if (false)
@@ -456,7 +651,7 @@ var ChartRender = (props) => {
           }
         },
         chartData.map((row, rowIndex) => {
-          var _a2;
+          var _a;
           return /* @__PURE__ */ React.createElement(
             Descriptions,
             {
@@ -470,7 +665,7 @@ var ChartRender = (props) => {
                 sm: 1,
                 xs: 1
               },
-              items: (_a2 = config == null ? void 0 : config.columns) == null ? void 0 : _a2.map((column) => {
+              items: (_a = config == null ? void 0 : config.columns) == null ? void 0 : _a.map((column) => {
                 if (!column.title || !column.dataIndex)
                   return null;
                 return {
@@ -483,234 +678,34 @@ var ChartRender = (props) => {
         })
       );
     }
-    if (!runtime && shouldLoadRuntime) {
-      const height = (config == null ? void 0 : config.height) || 240;
-      if (runtimeError) {
-        return /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            style: {
-              minHeight: height,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "100%",
-              gap: 8,
-              color: "rgba(239, 68, 68, 0.8)"
-            },
-            role: "alert"
-          },
-          /* @__PURE__ */ React.createElement("span", null, runtimeError),
-          /* @__PURE__ */ React.createElement(
-            "button",
-            {
-              type: "button",
-              onClick: handleRetryRuntime,
-              style: {
-                padding: "4px 12px",
-                borderRadius: "0.5em",
-                border: "1px solid rgba(239, 68, 68, 0.5)",
-                background: "transparent",
-                color: "rgba(239, 68, 68, 0.8)",
-                cursor: "pointer"
-              }
-            },
-            "重试加载"
-          )
-        );
-      }
+    if (shouldLoadRuntime && isIntersecting) {
       return /* @__PURE__ */ React.createElement(
-        "div",
+        Suspense,
         {
-          style: {
-            minHeight: height,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "100%",
-            color: "#6B7280"
-          },
-          role: "status",
-          "aria-live": "polite"
+          fallback: /* @__PURE__ */ React.createElement(ChartRuntimeFallback, { height: (config == null ? void 0 : config.height) || 240 })
         },
-        isRuntimeLoading || !isIntersecting ? /* @__PURE__ */ React.createElement(Loading, null) : null
-      );
-    }
-    if (!runtime) {
-      return null;
-    }
-    const {
-      DonutChart,
-      FunnelChart,
-      AreaChart,
-      BarChart,
-      LineChart,
-      RadarChart,
-      ScatterChart
-    } = runtime;
-    if (chartType === "pie") {
-      return /* @__PURE__ */ React.createElement(
-        DonutChart,
-        {
-          key: `${config == null ? void 0 : config.index}-pie-${renderKey}`,
-          data: convertDonutData,
-          configs: [{ chartStyle: "pie", showLegend: true }],
-          height: (config == null ? void 0 : config.height) || 400,
-          title,
-          showToolbar: true,
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "donut") {
-      return /* @__PURE__ */ React.createElement(
-        DonutChart,
-        {
-          key: `${config == null ? void 0 : config.index}-donut-${renderKey}`,
-          data: convertDonutData,
-          configs: [{ chartStyle: "donut", showLegend: true }],
-          height: (config == null ? void 0 : config.height) || 400,
-          title,
-          showToolbar: true,
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "bar") {
-      return /* @__PURE__ */ React.createElement(
-        BarChart,
-        {
-          key: `${config == null ? void 0 : config.index}-bar-${renderKey}`,
-          data: convertFlatData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          indexAxis: "y",
-          stacked: (_a = config == null ? void 0 : config.rest) == null ? void 0 : _a.stacked,
-          showLegend: (_c = (_b = config == null ? void 0 : config.rest) == null ? void 0 : _b.showLegend) != null ? _c : true,
-          showGrid: (_e = (_d = config == null ? void 0 : config.rest) == null ? void 0 : _d.showGrid) != null ? _e : true,
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "line") {
-      return /* @__PURE__ */ React.createElement(
-        LineChart,
-        {
-          key: `${config == null ? void 0 : config.index}-line-${renderKey}`,
-          data: convertFlatData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          showLegend: (_g = (_f = config == null ? void 0 : config.rest) == null ? void 0 : _f.showLegend) != null ? _g : true,
-          showGrid: (_i = (_h = config == null ? void 0 : config.rest) == null ? void 0 : _h.showGrid) != null ? _i : true,
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "column") {
-      return /* @__PURE__ */ React.createElement(
-        BarChart,
-        {
-          key: `${config == null ? void 0 : config.index}-column-${renderKey}`,
-          data: convertFlatData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          indexAxis: "x",
-          stacked: (_j = config == null ? void 0 : config.rest) == null ? void 0 : _j.stacked,
-          showLegend: (_l = (_k = config == null ? void 0 : config.rest) == null ? void 0 : _k.showLegend) != null ? _l : true,
-          showGrid: (_n = (_m = config == null ? void 0 : config.rest) == null ? void 0 : _m.showGrid) != null ? _n : true,
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "area") {
-      return /* @__PURE__ */ React.createElement(
-        AreaChart,
-        {
-          key: `${config == null ? void 0 : config.index}-area-${renderKey}`,
-          data: convertFlatData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          showLegend: (_p = (_o = config == null ? void 0 : config.rest) == null ? void 0 : _o.showLegend) != null ? _p : true,
-          showGrid: (_r = (_q = config == null ? void 0 : config.rest) == null ? void 0 : _q.showGrid) != null ? _r : true,
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "radar") {
-      const radarData = (chartData || []).map((row, i) => {
-        var _a2;
-        const filterLabel = getFieldValue(row, filterBy);
-        const category = getFieldValue(row, groupBy);
-        const type = getFieldValue(row, colorLegend);
-        return __spreadValues(__spreadValues(__spreadValues({
-          label: String((_a2 = row == null ? void 0 : row[config == null ? void 0 : config.x]) != null ? _a2 : i + 1),
-          score: row == null ? void 0 : row[config == null ? void 0 : config.y]
-        }, category ? { category } : {}), type ? { type } : {}), filterLabel ? { filterLabel } : {});
-      });
-      return /* @__PURE__ */ React.createElement(
-        RadarChart,
-        {
-          key: `${config == null ? void 0 : config.index}-radar-${renderKey}`,
-          data: radarData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "scatter") {
-      const scatterData = (chartData || []).map((row) => {
-        const filterLabel = getFieldValue(row, filterBy);
-        const category = getFieldValue(row, groupBy);
-        const type = getFieldValue(row, colorLegend);
-        return __spreadValues(__spreadValues(__spreadValues({
-          x: row == null ? void 0 : row[config == null ? void 0 : config.x],
-          y: row == null ? void 0 : row[config == null ? void 0 : config.y]
-        }, category ? { category } : {}), type ? { type } : {}), filterLabel ? { filterLabel } : {});
-      });
-      return /* @__PURE__ */ React.createElement(
-        ScatterChart,
-        {
-          key: `${config == null ? void 0 : config.index}-scatter-${renderKey}`,
-          data: scatterData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          dataTime,
-          toolbarExtra: toolBar
-        }
+        /* @__PURE__ */ React.createElement(
+          ChartRuntimeRenderer,
+          {
+            chartType,
+            convertDonutData,
+            convertFlatData,
+            config,
+            renderKey,
+            title,
+            dataTime,
+            toolBar,
+            filterBy,
+            groupBy,
+            colorLegend,
+            chartData,
+            getFieldValue
+          }
+        )
       );
     }
-    if (chartType === "funnel") {
-      const funnelData = (chartData || []).map((row, i) => {
-        var _a2;
-        const filterLabel = getFieldValue(row, filterBy);
-        const category = getFieldValue(row, groupBy);
-        const type = getFieldValue(row, colorLegend);
-        return __spreadValues(__spreadValues(__spreadValues(__spreadValues({
-          x: String((_a2 = row == null ? void 0 : row[config == null ? void 0 : config.x]) != null ? _a2 : i + 1),
-          y: toNumber(row == null ? void 0 : row[config == null ? void 0 : config.y], 0)
-        }, (row == null ? void 0 : row.ratio) !== void 0 ? { ratio: row.ratio } : {}), category ? { category } : {}), type ? { type } : {}), filterLabel ? { filterLabel } : {});
-      });
-      return /* @__PURE__ */ React.createElement(
-        FunnelChart,
-        {
-          key: `${config == null ? void 0 : config.index}-funnel-${renderKey}`,
-          data: funnelData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          dataTime,
-          typeNames: { rate: "转化率", name: colorLegend || "转化" },
-          toolbarExtra: toolBar
-        }
-      );
+    if (shouldLoadRuntime && !isIntersecting) {
+      return /* @__PURE__ */ React.createElement(ChartRuntimeFallback, { height: (config == null ? void 0 : config.height) || 240 });
     }
     return null;
   }, [
@@ -726,13 +721,9 @@ var ChartRender = (props) => {
     filterBy,
     groupBy,
     colorLegend,
-    runtime,
-    runtimeError,
-    isRuntimeLoading,
     isIntersecting,
     shouldLoadRuntime,
-    renderDescriptionsFallback,
-    handleRetryRuntime
+    renderDescriptionsFallback
   ]);
   return /* @__PURE__ */ React.createElement("div", { ref: containerRef, style: { width: "100%" }, contentEditable: false }, chartDom);
 };

package/dist/Plugins/chart/loadChartRuntime.js

@@ -56,30 +56,53 @@ var loadChartRuntime = () => __async(void 0, null, function* () {
   }
   if (!runtimeLoader) {
     runtimeLoader = Promise.all([
-      Promise.resolve().then(() => __toESM(__require("./AreaChart"))),
-      Promise.resolve().then(() => __toESM(__require("./BarChart"))),
-      Promise.resolve().then(() => __toESM(__require("./DonutChart"))),
-      Promise.resolve().then(() => __toESM(__require("./FunnelChart"))),
-      Promise.resolve().then(() => __toESM(__require("./LineChart"))),
-      Promise.resolve().then(() => __toESM(__require("./RadarChart"))),
-      Promise.resolve().then(() => __toESM(__require("./ScatterChart")))
-    ]).then(([
-      areaModule,
-      barModule,
-      donutModule,
-      funnelModule,
-      lineModule,
-      radarModule,
-      scatterModule
-    ]) => ({
-      AreaChart: areaModule.default,
-      BarChart: barModule.default,
-      DonutChart: donutModule.default,
-      FunnelChart: funnelModule.default,
-      LineChart: lineModule.default,
-      RadarChart: radarModule.default,
-      ScatterChart: scatterModule.default
-    })).catch((error) => {
+      Promise.resolve().then(() => __toESM(__require(
+        /* webpackChunkName: "chart-area" */
+        "./AreaChart"
+      ))),
+      Promise.resolve().then(() => __toESM(__require(
+        /* webpackChunkName: "chart-bar" */
+        "./BarChart"
+      ))),
+      Promise.resolve().then(() => __toESM(__require(
+        /* webpackChunkName: "chart-donut" */
+        "./DonutChart"
+      ))),
+      Promise.resolve().then(() => __toESM(__require(
+        /* webpackChunkName: "chart-funnel" */
+        "./FunnelChart"
+      ))),
+      Promise.resolve().then(() => __toESM(__require(
+        /* webpackChunkName: "chart-line" */
+        "./LineChart"
+      ))),
+      Promise.resolve().then(() => __toESM(__require(
+        /* webpackChunkName: "chart-radar" */
+        "./RadarChart"
+      ))),
+      Promise.resolve().then(() => __toESM(__require(
+        /* webpackChunkName: "chart-scatter" */
+        "./ScatterChart"
+      )))
+    ]).then(
+      ([
+        areaModule,
+        barModule,
+        donutModule,
+        funnelModule,
+        lineModule,
+        radarModule,
+        scatterModule
+      ]) => ({
+        AreaChart: areaModule.default,
+        BarChart: barModule.default,
+        DonutChart: donutModule.default,
+        FunnelChart: funnelModule.default,
+        LineChart: lineModule.default,
+        RadarChart: radarModule.default,
+        ScatterChart: scatterModule.default
+      })
+    ).catch((error) => {
       runtimeLoader = null;
       throw error;
     });

package/dist/Plugins/mermaid/Mermaid.d.ts

@@ -1,23 +1,27 @@
 import React from 'react';
 import { CodeNode } from '../../MarkdownEditor/el';
 type MermaidApi = typeof import('mermaid').default;
+/**
+ * 加载 Mermaid 库
+ * 使用单例模式确保只加载一次，并初始化配置
+ */
 export declare const loadMermaid: () => Promise<MermaidApi>;
 /**
  * Mermaid 组件 - Mermaid图表渲染组件
  *
  * 该组件使用Mermaid库渲染图表，支持流程图、时序图、甘特图等。
- * 提供图表渲染、错误处理、延迟渲染等功能。
+ * 使用 React.lazy 和 Suspense 实现代码分割和延迟加载，优化性能。
  *
  * @component
  * @description Mermaid图表渲染组件，支持各种Mermaid图表类型
  * @param {Object} props - 组件属性
- * @param {CodeNode} props.el - 代码节点，包含Mermaid图表代码
- * @param {string} [props.el.value] - Mermaid图表代码字符串
+ * @param {CodeNode} props.element - 代码节点，包含Mermaid图表代码
+ * @param {string} [props.element.value] - Mermaid图表代码字符串
  *
  * @example
  * ```tsx
  * <Mermaid
- *   el={{
+ *   element={{
  *     type: 'code',
  *     value: 'graph TD\nA[开始] --> B[处理] --> C[结束]'
  *   }}
@@ -29,6 +33,7 @@ export declare const loadMermaid: () => Promise<MermaidApi>;
  * @remarks
  * - 基于Mermaid库实现图表渲染
  * - 支持多种图表类型（流程图、时序图、甘特图等）
+ * - 使用 React.lazy 和 Suspense 实现代码分割
  * - 提供延迟渲染优化性能
  * - 包含错误处理机制
  * - 支持空状态显示

package/dist/Plugins/mermaid/Mermaid.js

@@ -49,7 +49,7 @@ var __async = (__this, __arguments, generator) => {
 };
 
 // src/Plugins/mermaid/Mermaid.tsx
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { lazy, Suspense, useEffect, useMemo, useRef } from "react";
 import { useGetSetState } from "react-use";
 import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
 var mermaidLoader = null;
@@ -58,7 +58,11 @@ var loadMermaid = () => __async(void 0, null, function* () {
     throw new Error("Mermaid 仅在浏览器环境中可用");
   }
   if (!mermaidLoader) {
-    mermaidLoader = Promise.resolve().then(() => __toESM(__require("mermaid"))).then((module) => {
+    mermaidLoader = Promise.resolve().then(() => __toESM(__require(
+      /* webpackChunkName: "mermaid" */
+      /* webpackMode: "lazy" */
+      "mermaid"
+    ))).then((module) => {
       const api = module.default;
       if (api == null ? void 0 : api.initialize) {
         api.initialize({ startOnLoad: false });
@@ -71,9 +75,8 @@ var loadMermaid = () => __async(void 0, null, function* () {
   }
   return mermaidLoader;
 });
-var Mermaid = (props) => {
+var MermaidRendererImpl = (props) => {
   var _a;
-  const isBrowser = typeof window !== "undefined";
   const [state, setState] = useGetSetState({
     code: "",
     error: ""
@@ -88,9 +91,6 @@ var Mermaid = (props) => {
   );
   const isVisible = useIntersectionOnce(containerRef);
   useEffect(() => {
-    if (!isBrowser) {
-      return void 0;
-    }
     const nextCode = props.element.value || "";
     const currentState = state();
     if (!isVisible) {
@@ -151,10 +151,7 @@ var Mermaid = (props) => {
         timer.current = null;
       }
     };
-  }, [isBrowser, (_a = props == null ? void 0 : props.element) == null ? void 0 : _a.value, id, isVisible, setState, state]);
-  if (!isBrowser) {
-    return null;
-  }
+  }, [(_a = props == null ? void 0 : props.element) == null ? void 0 : _a.value, id, isVisible, setState, state]);
   const snapshot = state();
   return /* @__PURE__ */ React.createElement(
     "div",
@@ -188,6 +185,31 @@ var Mermaid = (props) => {
     !snapshot.code && !snapshot.error && /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", color: "#6B7280" } }, "Empty")
   );
 };
+var MermaidRenderer = lazy(() => __async(void 0, null, function* () {
+  yield loadMermaid();
+  return { default: MermaidRendererImpl };
+}));
+var MermaidFallback = () => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    style: {
+      marginBottom: "0.75em",
+      padding: "0.75rem 0",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      color: "#6B7280"
+    }
+  },
+  "加载中..."
+);
+var Mermaid = (props) => {
+  const isBrowser = typeof window !== "undefined";
+  if (!isBrowser) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(MermaidFallback, null) }, /* @__PURE__ */ React.createElement(MermaidRenderer, { element: props.element }));
+};
 export {
   Mermaid,
   loadMermaid

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "prettier": "prettier --write \"{src,docs,test}/**/*.{js,jsx,ts,tsx,css,less,json,md}\"",
     "report:demo": "node scripts/generateDemoReport.js",
     "start": "npm run dev",
-    "test": "echo \"No test specified\" && exit 0",
+    "test": "echo 'test'",
     "test:coverage": "vitest --run --coverage",
     "tsc": "tsc --noEmit"
   },