@ant-design/agentic-ui 2.0.15 → 2.0.16

package/dist/MarkdownInputField/style.js

@@ -26,7 +26,6 @@ import {
 } from "../Hooks/useStyle";
 var GLOW_BORDER_OFFSET = 2;
 var GLOW_BORDER_TOTAL_OFFSET = GLOW_BORDER_OFFSET * 2;
-var getGlowBorderOffset = () => `-${GLOW_BORDER_OFFSET}px`;
 var DIRECT_RETURN_KEYWORDS = /* @__PURE__ */ new Set([
   "auto",
   "inherit",
@@ -66,13 +65,28 @@ var stopIconRotate = new Keyframes("stopIconRotate", {
     transform: "rotate(360deg)"
   }
 });
+var rotateFadeOnce = new Keyframes("rotateFadeOnce", {
+  "0%": {
+    "--mif-angle": "42deg",
+    opacity: 1
+  },
+  "100%": {
+    "--mif-angle": "calc(42deg + 1turn)",
+    opacity: 0
+  }
+});
 var genStyle = (token) => {
   return {
+    // 声明 CSS 自定义属性 --mif-angle，使其可动画（需浏览器支持 @property）
+    "@property --mif-angle": {
+      syntax: '"<angle>"',
+      "initial-value": "0deg",
+      inherits: false
+    },
     [token.componentCls]: {
       width: "100%",
       height: "100%",
       display: "flex",
-      boxShadow: `0px 0px 1px 0px rgba(0, 19, 41, 0.05),0px 2px 7px 0px rgba(0, 19, 41, 0.05),0px 2px 5px -2px rgba(0, 19, 41, 0.06)`,
       flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
@@ -81,40 +95,24 @@ var genStyle = (token) => {
       minHeight: "48px",
       maxWidth: 980,
       backdropFilter: "blur(5.44px)",
+      boxShadow: "var(--shadow-control-lg)",
       position: "relative",
-      transition: "all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)",
       "> * ": {
         boxSizing: "border-box"
       },
       "&:active,&.active": {
         [`${token.componentCls}-background`]: {
-          opacity: 1,
-          backgroundColor: "#1890ff"
-        }
-      },
-      "&:hover": {
-        [`${token.componentCls}-background`]: {
-          opacity: 1
-          // backgroundColor: 'rgba(0, 9, 50, 0.1)',
+          opacity: 0,
+          height: "100%",
+          backgroundImage: "radial-gradient(127% 127% at 0% 0%, rgba(255, 255, 255, 0) 57%, #EEF0F5 84%),linear-gradient(var(--mif-angle), #D7B9FF 14%, #9BA0FF 57%, #09B1FF 98%)",
+          // 单一动画：一次性旋转并淡出
+          animationName: rotateFadeOnce,
+          animationDuration: "2.5s",
+          animationTimingFunction: "ease-in-out",
+          animationIterationCount: "1"
         }
       },
       "&-enlarged": {
-        // 覆盖基础样式的限制
-        minHeight: "100%",
-        height: "100%",
-        width: "100%",
-        maxWidth: "none",
-        // 覆盖原来的 maxWidth: 980
-        alignItems: "stretch",
-        // 覆盖原来的 center
-        justifyContent: "flex-start",
-        // 覆盖原来的 center
-        display: "flex",
-        flexDirection: "column",
-        // 保持和普通状态相同的阴影效果
-        boxShadow: `0px 0px 1px 0px rgba(0, 19, 41, 0.05),0px 2px 7px 0px rgba(0, 19, 41, 0.05),0px 2px 5px -2px rgba(0, 19, 41, 0.06)`,
-        transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",
-        // 内部白色容器
         "> div:last-child": {
           flex: 1,
           height: "100%",
@@ -127,8 +125,7 @@ var genStyle = (token) => {
           minHeight: "100%",
           maxHeight: "none",
           overflow: "hidden",
-          width: "100%",
-          transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
+          width: "100%"
         },
         [`${token.componentCls}-editor-content`]: {
           flex: 1,
@@ -136,33 +133,33 @@ var genStyle = (token) => {
           minHeight: "100%",
           maxHeight: "none",
           overflow: "auto",
-          width: "100%",
-          transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
+          width: "100%"
         },
         [`${token.componentCls}-background`]: {
           // 放大时保持和普通状态相同的背景效果
-          opacity: 1,
-          backgroundColor: "rgba(0, 9, 50, 0.1)"
+          opacity: 1
         }
       },
       "&-background": {
         boxSizing: "border-box",
-        transition: "all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)",
         position: "absolute",
-        top: getGlowBorderOffset(),
-        left: getGlowBorderOffset(),
-        width: addGlowBorderOffset("100%"),
-        height: addGlowBorderOffset("100%"),
+        width: "calc(100% - 4px)",
+        height: "calc(100% - 4px)",
         zIndex: 2,
-        backgroundColor: "rgba(0, 9, 50, 0.1)",
+        backgroundColor: "transparent",
         pointerEvents: "none",
-        borderRadius: "inherit"
+        borderRadius: "inherit",
+        // 自定义属性控制线性渐变角度，默认与原始设计保持一致 42deg
+        "--mif-angle": "42deg",
+        // 提示浏览器该节点将频繁重绘背景图像
+        willChange: "background-image",
+        // 限定绘制范围，降低重绘影响
+        contain: "paint"
       },
       "&:focus": {
         boxShadow: "none",
         [`${token.componentCls}-background`]: {
-          opacity: 1,
-          backgroundColor: "#1890ff"
+          opacity: 1
         }
       },
       "&-editor": {
@@ -176,7 +173,6 @@ var genStyle = (token) => {
         overflowY: "visible",
         scrollbarColor: "var(--color-gray-text-tertiary) transparent",
         scrollbarWidth: "thin",
-        transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",
         "&&-disabled": {
           backgroundColor: "rgba(0,0,0,0.04)",
           cursor: "not-allowed"
@@ -191,8 +187,7 @@ var genStyle = (token) => {
         maxHeight: "inherit",
         scrollbarColor: "var(--color-gray-text-tertiary) transparent",
         scrollbarWidth: "thin",
-        borderRadius: "inherit",
-        transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
+        borderRadius: "inherit"
       },
       "&&-disabled": {
         backgroundColor: "rgba(0,0,0,0.04)",

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

@@ -91,10 +91,10 @@ export interface AreaChartConfigItem {
  * ```
  */
 export interface AreaChartProps extends ChartContainerProps {
-    /** 图表标题 */
-    title?: string;
     /** 扁平化数据数组 */
     data: AreaChartDataItem[];
+    /** 图表标题 */
+    title?: string;
     /** 图表宽度，默认600px */
     width?: number | string;
     /** 图表高度，默认400px */

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

@@ -39,9 +39,7 @@ import {
   ChartToolBar,
   downloadChart
 } from "../components";
-import {
-  useChartStatistic
-} from "../hooks/useChartStatistic";
+import { defaultColorList } from "../const";
 import {
   extractAndSortXValues,
   findDataPointByXValue
@@ -55,28 +53,6 @@ ChartJS.register(
   Tooltip,
   Legend
 );
-var defaultColors = [
-  "#1677ff",
-  // 蓝色
-  "#8954FC",
-  // 紫色
-  "#15e7e4",
-  // 青色
-  "#F45BB5",
-  // 粉色
-  "#00A6FF",
-  // 天蓝色
-  "#33E59B",
-  // 绿色
-  "#D666E4",
-  // 紫红色
-  "#6151FF",
-  // 靛蓝色
-  "#BF3C93",
-  // 深粉色
-  "#005EE0"
-  // 深蓝色
-];
 var hexToRgba = (hex, alpha) => {
   const sanitized = hex.replace("#", "");
   const isShort = sanitized.length === 3;
@@ -136,7 +112,11 @@ var AreaChart = ({
   const context = useContext(ConfigProvider.ConfigContext);
   const baseClassName = context == null ? void 0 : context.getPrefixCls("area-chart-container");
   const chartRef = useRef(null);
-  const statisticComponentConfigs = useChartStatistic(statisticConfig);
+  const statistics = useMemo(() => {
+    if (!statisticConfig)
+      return null;
+    return Array.isArray(statisticConfig) ? statisticConfig : [statisticConfig];
+  }, [statisticConfig]);
   const categories = useMemo(() => {
     const uniqueCategories = [
       ...new Set(safeData.map((item) => item.category))
@@ -191,7 +171,7 @@ var AreaChart = ({
     const labels = xValues.map((x) => x.toString());
     const datasets = types.map((type, index) => {
       const provided = color;
-      const baseColor = Array.isArray(provided) ? provided[index % provided.length] || defaultColors[index % defaultColors.length] : provided || defaultColors[index % defaultColors.length];
+      const baseColor = Array.isArray(provided) ? provided[index % provided.length] || defaultColorList[index % defaultColorList.length] : provided || defaultColorList[index % defaultColorList.length];
       const typeData = xValues.map((x) => {
         const dataPoint = findDataPointByXValue(filteredData, x, type);
         const v = dataPoint == null ? void 0 : dataPoint.y;
@@ -379,7 +359,7 @@ var AreaChart = ({
         ) : void 0
       }
     ),
-    statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { className: "chart-statistic-container" }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
+    statistics && /* @__PURE__ */ React.createElement("div", { className: `${baseClassName}-statistic-container` }, statistics.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
     !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /* @__PURE__ */ React.createElement(
       ChartFilter,
       __spreadProps(__spreadValues({
@@ -397,7 +377,7 @@ var AreaChart = ({
     /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: "chart-wrapper",
+        className: `${baseClassName}-wrapper`,
         style: { marginTop: "20px", height: responsiveHeight }
       },
       /* @__PURE__ */ React.createElement(Line, { ref: chartRef, data: processedData, options })

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

@@ -73,10 +73,10 @@ export interface BarChartConfigItem {
     indexAxis?: 'x' | 'y';
 }
 export interface BarChartProps extends ChartContainerProps {
-    /** 图表标题 */
-    title?: string;
     /** 扁平化数据数组 */
     data: BarChartDataItem[];
+    /** 图表标题 */
+    title?: string;
     /** 图表宽度，默认600px */
     width?: number | string;
     /** 图表高度，默认400px */
@@ -112,12 +112,6 @@ export interface BarChartProps extends ChartContainerProps {
     stacked?: boolean;
     /** 图表轴向，'x'为垂直柱状图，'y'为水平柱状图 */
     indexAxis?: 'x' | 'y';
-    /** 头部工具条额外按钮 */
-    toolbarExtra?: React.ReactNode;
-    /** 是否将过滤器渲染到工具栏 */
-    renderFilterInToolbar?: boolean;
-    /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
-    statistic?: StatisticConfigType;
     /** 是否显示数据标签，默认false */
     showDataLabels?: boolean;
     /** 数据标签格式化函数 */
@@ -130,6 +124,12 @@ export interface BarChartProps extends ChartContainerProps {
     }) => string;
     /** 外部传入的 Chart.js 选项，会与默认选项合并 */
     chartOptions?: Partial<ChartOptions<'bar'>>;
+    /** 头部工具条额外按钮 */
+    toolbarExtra?: React.ReactNode;
+    /** 是否将过滤器渲染到工具栏 */
+    renderFilterInToolbar?: boolean;
+    /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
+    statistic?: StatisticConfigType;
 }
 declare const BarChart: React.FC<BarChartProps>;
 export default BarChart;

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

@@ -38,15 +38,12 @@ import {
   ChartToolBar,
   downloadChart
 } from "../components";
-import {
-  useChartStatistic
-} from "../hooks/useChartStatistic";
+import { defaultColorList } from "../const";
 import {
   extractAndSortXValues,
   findDataPointByXValue
 } from "../utils";
 ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
-var defaultColors = ["#917EF7", "#2AD8FC", "#388BFF", "#718AB6", "#84DC18"];
 var hexToRgba = (hex, alpha) => {
   const sanitized = hex.replace("#", "");
   const isShort = sanitized.length === 3;
@@ -113,7 +110,11 @@ var BarChart = ({
   const context = useContext(ConfigProvider.ConfigContext);
   const baseClassName = context == null ? void 0 : context.getPrefixCls("bar-chart-container");
   const chartRef = useRef(null);
-  const statisticComponentConfigs = useChartStatistic(statisticConfig);
+  const statistics = useMemo(() => {
+    if (!statisticConfig)
+      return null;
+    return Array.isArray(statisticConfig) ? statisticConfig : [statisticConfig];
+  }, [statisticConfig]);
   const categories = useMemo(() => {
     const uniqueCategories = [
       ...new Set(safeData.map((item) => item.category))
@@ -189,7 +190,7 @@ var BarChart = ({
     const labels = xValues.map((x) => x.toString());
     const datasets = types.map((type, index) => {
       const provided = color;
-      const pickByIndex = (i) => Array.isArray(provided) ? provided[i] || provided[0] || defaultColors[i % defaultColors.length] : provided || defaultColors[i % defaultColors.length];
+      const pickByIndex = (i) => Array.isArray(provided) ? provided[i] || provided[0] || defaultColorList[i % defaultColorList.length] : provided || defaultColorList[i % defaultColorList.length];
       const baseColor = pickByIndex(index);
       const typeData = xValues.map((x) => {
         const dataPoint = findDataPointByXValue(filteredData, x, type);
@@ -652,7 +653,7 @@ var BarChart = ({
         ) : void 0
       }
     ),
-    statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { className: "chart-statistic-container" }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
+    statistics && /* @__PURE__ */ React.createElement("div", { className: `${baseClassName}-statistic-container` }, statistics.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
     !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /* @__PURE__ */ React.createElement(
       ChartFilter,
       __spreadProps(__spreadValues({
@@ -670,7 +671,7 @@ var BarChart = ({
     /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: "chart-wrapper",
+        className: `${baseClassName}-wrapper`,
         style: { marginTop: "20px", height: responsiveHeight }
       },
       /* @__PURE__ */ React.createElement(

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

@@ -1,4 +1,3 @@
-export declare const DEFAULT_COLORS: string[];
 export declare const MOBILE_MAX_CHART_SIZE = 160;
 export declare const BASE_CLASS_NAME = "md-editor-donut-chart";
 export declare const SINGLE_MODE_DESKTOP_CUTOUT = "70%";

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

@@ -1,24 +1,10 @@
 // src/Plugins/chart/DonutChart/constants.ts
-var DEFAULT_COLORS = [
-  "#917EF7",
-  "#2AD8FC",
-  "#388BFF",
-  "#718AB6",
-  "#84DC18",
-  "#FACC15",
-  "#33E59B",
-  "#D666E4",
-  "#6151FF",
-  "#BF3C93",
-  "#005EE0"
-];
 var MOBILE_MAX_CHART_SIZE = 160;
 var BASE_CLASS_NAME = "md-editor-donut-chart";
 var SINGLE_MODE_DESKTOP_CUTOUT = "70%";
 var SINGLE_MODE_MOBILE_CUTOUT = "65%";
 export {
   BASE_CLASS_NAME,
-  DEFAULT_COLORS,
   MOBILE_MAX_CHART_SIZE,
   SINGLE_MODE_DESKTOP_CUTOUT,
   SINGLE_MODE_MOBILE_CUTOUT

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

@@ -38,6 +38,7 @@ import {
   Legend,
   Tooltip
 } from "chart.js";
+import classNames from "classnames";
 import React, { useContext, useMemo, useRef, useState } from "react";
 import { Doughnut } from "react-chartjs-2";
 import {
@@ -47,9 +48,8 @@ import {
   ChartToolBar,
   downloadChart
 } from "../components";
-import { useChartStatistic } from "../hooks/useChartStatistic";
+import { defaultColorList } from "../const";
 import {
-  DEFAULT_COLORS,
   SINGLE_MODE_DESKTOP_CUTOUT,
   SINGLE_MODE_MOBILE_CUTOUT
 } from "./constants";
@@ -80,6 +80,7 @@ var DonutChart = (_a) => {
     enableAutoCategory = true,
     singleMode = false,
     toolbarExtra,
+    renderFilterInToolbar = false,
     statistic: statisticConfig
   } = _b, props = __objRest(_b, [
     "data",
@@ -97,6 +98,7 @@ var DonutChart = (_a) => {
     "enableAutoCategory",
     "singleMode",
     "toolbarExtra",
+    "renderFilterInToolbar",
     "statistic"
   ]);
   var _a2;
@@ -163,7 +165,11 @@ var DonutChart = (_a) => {
       );
     }
   }
-  const statisticComponentConfigs = useChartStatistic(statisticConfig);
+  const statistics = useMemo(() => {
+    if (!statisticConfig)
+      return null;
+    return Array.isArray(statisticConfig) ? statisticConfig : [statisticConfig];
+  }, [statisticConfig]);
   const handleDownload = () => {
     var _a3, _b2;
     if (onDownload) {
@@ -228,7 +234,7 @@ var DonutChart = (_a) => {
     showLegend: false,
     showTooltip: false,
     backgroundColor: [
-      DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+      defaultColorList[i % defaultColorList.length],
       "#F7F8F9"
     ]
   })) : finalConfigs;
@@ -254,18 +260,47 @@ var DonutChart = (_a) => {
           title,
           onDownload: handleDownload,
           extra: toolbarExtra,
-          dataTime
+          dataTime,
+          filter: renderFilterInToolbar && shouldShowFilter ? /* @__PURE__ */ React.createElement(
+            ChartFilter,
+            __spreadProps(__spreadValues({
+              filterOptions: finalFilterList.map((item) => {
+                return {
+                  label: item || "",
+                  value: item || ""
+                };
+              }),
+              selectedFilter: finalSelectedFilter || "",
+              onFilterChange: finalOnFilterChange
+            }, filterLabels && {
+              customOptions: filteredDataByFilterLabel,
+              selectedCustomSelection: selectedFilterLabel,
+              onSelectionChange: setSelectedFilterLabel
+            }), {
+              theme: chartFilterTheme,
+              variant: "compact"
+            })
+          ) : void 0
         }
       ),
-      statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { className: "chart-statistic-container" }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(
-        ChartStatistic,
-        __spreadProps(__spreadValues({
-          key: index
-        }, config), {
-          theme: chartFilterTheme
-        })
-      ))),
-      shouldShowFilter && /* @__PURE__ */ React.createElement(
+      statistics && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            `${baseClassName}-statistic-container`,
+            hashId
+          )
+        },
+        statistics.map((config, index) => /* @__PURE__ */ React.createElement(
+          ChartStatistic,
+          __spreadProps(__spreadValues({
+            key: index
+          }, config), {
+            theme: chartFilterTheme
+          })
+        ))
+      ),
+      !renderFilterInToolbar && shouldShowFilter && /* @__PURE__ */ React.createElement(
         ChartFilter,
         __spreadProps(__spreadValues({
           filterOptions: finalFilterList.map((item) => {
@@ -324,8 +359,8 @@ var DonutChart = (_a) => {
           (sum, v) => sum + (Number.isFinite(v) ? v : 0),
           0
         );
-        const backgroundColors = cfg.backgroundColor || DEFAULT_COLORS;
-        const mainColor = (_b2 = (_a3 = cfg.backgroundColor) == null ? void 0 : _a3[0]) != null ? _b2 : DEFAULT_COLORS[idx % DEFAULT_COLORS.length];
+        const backgroundColors = cfg.backgroundColor || defaultColorList;
+        const mainColor = (_b2 = (_a3 = cfg.backgroundColor) == null ? void 0 : _a3[0]) != null ? _b2 : defaultColorList[idx % defaultColorList.length];
         const chartJsData = {
           labels,
           datasets: [

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

@@ -152,6 +152,13 @@ var genStyle = (token) => {
           marginTop: 1
         }
       },
+      "&-statistic-container": {
+        display: "flex",
+        gap: "16px",
+        marginBottom: "16px",
+        flexWrap: "wrap",
+        alignItems: "flex-start"
+      },
       // 响应式网格调整
       [`@media (max-width: 768px)`]: {
         gap: 12,

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

@@ -42,6 +42,8 @@ export interface DonutChartProps extends ChartContainerProps {
     singleMode?: boolean;
     /** 头部工具条额外按钮 */
     toolbarExtra?: React.ReactNode;
+    /** 是否将过滤器渲染到工具栏 */
+    renderFilterInToolbar?: boolean;
     /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
     statistic?: StatisticConfigType;
 }

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

@@ -16,12 +16,10 @@ export interface FunnelChartDataItem {
     ratio?: number | string;
 }
 export interface FunnelChartProps extends ChartContainerProps {
-    /** 图表标题 */
-    title?: string;
     /** 扁平化数据数组（x 为阶段名，y 为数值） */
     data: FunnelChartDataItem[];
-    /** 自定义主色 */
-    color?: string;
+    /** 图表标题 */
+    title?: string;
     /** 图表宽度，默认600px */
     width?: number | string;
     /** 图表高度，默认400px */
@@ -30,12 +28,12 @@ export interface FunnelChartProps extends ChartContainerProps {
     className?: string;
     /** 数据时间 */
     dataTime?: string;
-    /** 主题 */
+    /** 图表主题 */
     theme?: 'dark' | 'light';
-    /** 是否显示图例 */
+    /** 自定义主色 */
+    color?: string;
+    /** 是否显示图例，默认true */
     showLegend?: boolean;
-    /** 统计数据组件配置 */
-    statistic?: StatisticConfigType;
     /** 图例位置 */
     legendPosition?: 'top' | 'left' | 'bottom' | 'right';
     /** 图例水平对齐方式 */
@@ -46,6 +44,8 @@ export interface FunnelChartProps extends ChartContainerProps {
     toolbarExtra?: React.ReactNode;
     /** 是否将过滤器渲染到工具栏 */
     renderFilterInToolbar?: boolean;
+    /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
+    statistic?: StatisticConfigType;
     typeNames?: {
         rate?: string;
         /** 类型名称，用于图例和数据集标签 */