@gadmin2n/schematics 0.0.71 → 0.0.74

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/canvasContextMenuRegistry.tsx

@@ -1,6 +1,12 @@
 import type { MenuProps } from 'antd';
 import type { TFunction } from 'i18next';
-import { PlusOutlined, MinusOutlined, EditOutlined } from '@ant-design/icons';
+import {
+  PlusOutlined,
+  MinusOutlined,
+  EditOutlined,
+  SwapOutlined,
+  DownloadOutlined,
+} from '@ant-design/icons';
 
 // ─── 组件特有右键菜单操作注册表 ────────────────────────────────────────────────
 //
@@ -104,7 +110,7 @@ function numCardActions(
       onClick: () => {
         let newCode = code;
         if (isWithChart) {
-          // 隐藏折线图：注入 showChart={false}，保留 variant 和数据
+          // 隐藏折线图：注入 showChart={false}，切 variant 回 default（恢复数字大小）
           if (/showChart\s*=/.test(newCode)) {
             newCode = newCode.replace(
               /showChart\s*=\s*\{true\}/,
@@ -120,12 +126,28 @@ function numCardActions(
               newCode = newCode.replace(/\/>/, `  showChart={false}\n/>`);
             }
           }
+          // 切 variant 回 default，避免数字保持 withChart 的小字体
+          newCode = newCode.replace(
+            /variant\s*=\s*"withChart"/,
+            'variant="default"',
+          );
         } else {
           // 显示折线图
           const chartHidden = /showChart\s*=\s*\{false\}/.test(newCode);
           if (chartHidden) {
-            // 有数据但被隐藏了 → 移除 showChart={false}
+            // 有数据但被隐藏了 → 移除 showChart={false}，切 variant 回 withChart
             newCode = newCode.replace(/\s*showChart\s*=\s*\{false\}/, '');
+            if (/variant\s*=\s*"[^"]*"/.test(newCode)) {
+              newCode = newCode.replace(
+                /variant\s*=\s*"[^"]*"/,
+                'variant="withChart"',
+              );
+            } else {
+              newCode = newCode.replace(
+                /(<NumCard)/,
+                '$1\n  variant="withChart"',
+              );
+            }
           } else {
             // 从没有 chart → 切 variant + 注入默认数据
             if (/variant\s*=\s*"[^"]*"/.test(newCode)) {
@@ -161,29 +183,29 @@ function numCardActions(
     ...(isWithChart
       ? [
           {
-            key: 'toggle-axes',
-            icon: /showAxes\s*=\s*\{true\}/.test(code) ? (
+            key: 'toggle-axis',
+            icon: /showAxis\s*=\s*\{true\}/.test(code) ? (
               <MinusOutlined />
             ) : (
               <PlusOutlined />
             ),
-            danger: /showAxes\s*=\s*\{true\}/.test(code) ? true : undefined,
-            label: /showAxes\s*=\s*\{true\}/.test(code)
-              ? (t?.('canvas.menu.hideAxes') ?? '隐藏坐标轴')
-              : (t?.('canvas.menu.showAxes') ?? '显示坐标轴'),
+            danger: /showAxis\s*=\s*\{true\}/.test(code) ? true : undefined,
+            label: /showAxis\s*=\s*\{true\}/.test(code)
+              ? (t?.('canvas.menu.hideAxis') ?? '隐藏坐标轴')
+              : (t?.('canvas.menu.showAxis') ?? '显示坐标轴'),
             onClick: () => {
               let newCode = code;
-              const hasAxes = /showAxes\s*=\s*\{true\}/.test(newCode);
-              if (hasAxes) {
-                newCode = newCode.replace(/\s*showAxes\s*=\s*\{true\}/, '');
+              const hasAxis = /showAxis\s*=\s*\{true\}/.test(newCode);
+              if (hasAxis) {
+                newCode = newCode.replace(/\s*showAxis\s*=\s*\{true\}/, '');
               } else {
                 if (/testId\s*=/.test(newCode)) {
                   newCode = newCode.replace(
                     /([ \t]*)(testId\s*=)/,
-                    `$1showAxes={true}\n$1$2`,
+                    `$1showAxis={true}\n$1$2`,
                   );
                 } else {
-                  newCode = newCode.replace(/\/>/, `  showAxes={true}\n/>`);
+                  newCode = newCode.replace(/\/>/, `  showAxis={true}\n/>`);
                 }
               }
               updateCode(newCode);
@@ -208,6 +230,8 @@ function tableActions(
 ): MenuProps['items'] {
   const hasPagination = /pagination\s*=\s*\{\{/.test(code);
 
+  const downloadItems = chartDownloadActions(code, updateCode, closeMenu, t)!;
+
   if (hasPagination) {
     // 已有分页：显示"修改分页数量"子菜单 + "移除分页"
     const currentPageSize = code.match(/pageSize\s*:\s*(\d+)/)?.[1] ?? '10';
@@ -243,6 +267,7 @@ function tableActions(
           closeMenu();
         },
       },
+      ...downloadItems,
     ];
   }
 
@@ -271,6 +296,7 @@ function tableActions(
         },
       })),
     },
+    ...downloadItems,
   ];
 }
 
@@ -388,6 +414,45 @@ function chartTitleActions(
   ];
 }
 
+// ─── 通用 Chart 操作：显示/隐藏下载按钮 ───────────────────────────────────────
+
+function chartDownloadActions(
+  code: string,
+  updateCode: (newCode: string) => void,
+  closeMenu: () => void,
+  t?: TFunction,
+): MenuProps['items'] {
+  const hasDownload = /showDownload\s*=\s*\{true\}/.test(code);
+
+  return [
+    {
+      key: 'toggle-download',
+      icon: <DownloadOutlined />,
+      label: hasDownload
+        ? (t?.('canvas.menu.hideDownload') ?? '隐藏下载按钮')
+        : (t?.('canvas.menu.showDownload') ?? '显示下载按钮'),
+      danger: hasDownload ? true : undefined,
+      onClick: () => {
+        let newCode = code;
+        if (hasDownload) {
+          newCode = newCode.replace(/\s*showDownload\s*=\s*\{true\}/, '');
+        } else {
+          if (/testId\s*=/.test(newCode)) {
+            newCode = newCode.replace(
+              /([ \t]*)(testId\s*=)/,
+              `$1showDownload={true}\n$1$2`,
+            );
+          } else {
+            newCode = newCode.replace(/\/>/, `  showDownload={true}\n/>`);
+          }
+        }
+        updateCode(newCode);
+        closeMenu();
+      },
+    },
+  ];
+}
+
 // ─── BarChart 特有操作 ─────────────────────────────────────────────────────
 
 function barChartActions(
@@ -400,8 +465,79 @@ function barChartActions(
   const isHorizontal = /direction\s*=\s*"horizontal"/.test(code);
   const gridIsHidden = /showGrid\s*=\s*\{false\}/.test(code);
   const labelIsHidden = /showLabel\s*=\s*\{false\}/.test(code);
+  const isGroupBar = /variant\s*=\s*"groupBar"/.test(code);
+  const isStacked = /stacked\s*=\s*\{true\}/.test(code);
+  const isPercent = /percent\s*=\s*\{true\}/.test(code);
 
   return [
+    // ── 多系列模式切换（仅 groupBar） ─────────────────────────────
+    ...(isGroupBar
+      ? [
+          {
+            key: 'toggle-stacked',
+            icon: isStacked ? <MinusOutlined /> : <PlusOutlined />,
+            label: isStacked
+              ? (t?.('canvas.menu.disableStacked') ?? '关闭堆叠')
+              : (t?.('canvas.menu.enableStacked') ?? '开启堆叠'),
+            danger: isStacked ? true : undefined,
+            onClick: () => {
+              let newCode = code;
+              if (isStacked) {
+                // 关闭堆叠 → 同时移除 percent
+                newCode = newCode.replace(/\s*stacked\s*=\s*\{true\}/, '');
+                newCode = newCode.replace(/\s*percent\s*=\s*\{true\}/, '');
+              } else {
+                if (/testId\s*=/.test(newCode)) {
+                  newCode = newCode.replace(
+                    /([ \t]*)(testId\s*=)/,
+                    `$1stacked={true}\n$1$2`,
+                  );
+                } else {
+                  newCode = newCode.replace(/\/>/, `  stacked={true}\n/>`);
+                }
+              }
+              updateCode(newCode);
+              closeMenu();
+            },
+          },
+          // percent 仅在 stacked 时显示
+          ...(isStacked
+            ? [
+                {
+                  key: 'toggle-percent',
+                  icon: isPercent ? <MinusOutlined /> : <PlusOutlined />,
+                  label: isPercent
+                    ? (t?.('canvas.menu.disablePercent') ?? '关闭百分比')
+                    : (t?.('canvas.menu.enablePercent') ?? '开启百分比'),
+                  danger: isPercent ? true : undefined,
+                  onClick: () => {
+                    let newCode = code;
+                    if (isPercent) {
+                      newCode = newCode.replace(
+                        /\s*percent\s*=\s*\{true\}/,
+                        '',
+                      );
+                    } else {
+                      if (/testId\s*=/.test(newCode)) {
+                        newCode = newCode.replace(
+                          /([ \t]*)(testId\s*=)/,
+                          `$1percent={true}\n$1$2`,
+                        );
+                      } else {
+                        newCode = newCode.replace(
+                          /\/>/,
+                          `  percent={true}\n/>`,
+                        );
+                      }
+                    }
+                    updateCode(newCode);
+                    closeMenu();
+                  },
+                },
+              ]
+            : []),
+        ]
+      : []),
     {
       key: 'bar-direction',
       icon: <PlusOutlined />,
@@ -495,6 +631,7 @@ function barChartActions(
     },
     ...chartLegendActions(code, updateCode, closeMenu, t)!,
     ...chartTitleActions(code, updateCode, closeMenu, ctx, t)!,
+    ...chartDownloadActions(code, updateCode, closeMenu, t)!,
   ];
 }
 
@@ -585,6 +722,7 @@ function pieChartActions(
   // 图例 + 标题（所有 chart 通用）
   items.push(...chartLegendActions(code, updateCode, closeMenu, t)!);
   items.push(...chartTitleActions(code, updateCode, closeMenu, ctx, t)!);
+  items.push(...chartDownloadActions(code, updateCode, closeMenu, t)!);
 
   return items;
 }
@@ -818,6 +956,7 @@ function lineChartActions(
       },
     },
     ...chartTitleActions(code, updateCode, closeMenu, ctx, t)!,
+    ...chartDownloadActions(code, updateCode, closeMenu, t)!,
   ];
 }
 
@@ -833,6 +972,7 @@ function radarChartActions(
   return [
     ...chartLegendActions(code, updateCode, closeMenu, t)!,
     ...chartTitleActions(code, updateCode, closeMenu, ctx, t)!,
+    ...chartDownloadActions(code, updateCode, closeMenu, t)!,
   ];
 }
 
@@ -848,6 +988,200 @@ function treemapChartActions(
   return [
     ...chartLegendActions(code, updateCode, closeMenu, t)!,
     ...chartTitleActions(code, updateCode, closeMenu, ctx, t)!,
+    ...chartDownloadActions(code, updateCode, closeMenu, t)!,
+  ];
+}
+
+// ─── MultiChart 特有操作 ──────────────────────────────────────────────────────
+
+const MULTI_CHART_TYPES = [
+  { key: 'bar', label: '柱状图', labelEn: 'Bar Chart' },
+  { key: 'line', label: '折线图', labelEn: 'Line Chart' },
+  { key: 'pie', label: '饼图', labelEn: 'Pie Chart' },
+  { key: 'radar', label: '雷达图', labelEn: 'Radar Chart' },
+  { key: 'treemap', label: '矩形树图', labelEn: 'Treemap' },
+  { key: 'worldmap', label: '世界地图', labelEn: 'World Map' },
+  { key: 'table', label: '表格', labelEn: 'Table' },
+];
+
+/** 从 code 中解析当前 defaultVariant */
+function parseDefaultVariant(code: string): string {
+  const match = code.match(/defaultVariant\s*=\s*"([^"]*)"/);
+  return match?.[1] ?? 'bar';
+}
+
+/** 从 code 中解析 charts 列表 */
+function parseChartsList(code: string): string[] {
+  const match = code.match(/charts=\{(\[.*?\])\}/s);
+  if (!match) return ['bar', 'line', 'pie'];
+  try {
+    return JSON.parse(match[1].replace(/'/g, '"'));
+  } catch {
+    return ['bar', 'line', 'pie'];
+  }
+}
+
+/** 从 code 中解析 chartConfig JSON */
+function parseChartConfig(code: string): Record<string, Record<string, any>> {
+  const match = code.match(/chartConfig=\{([\s\S]*?)\}\s*(?=\w+=|\/?>)/);
+  if (!match) return {};
+  try {
+    // chartConfig={{"bar":{"showGrid":false}}}
+    return JSON.parse(match[1]);
+  } catch {
+    return {};
+  }
+}
+
+/** 将 chartConfig 写回 code 字符串 */
+function writeChartConfig(
+  code: string,
+  config: Record<string, Record<string, any>>,
+): string {
+  const configStr = `chartConfig={${JSON.stringify(config)}}`;
+  if (/chartConfig=\{[\s\S]*?\}\s*(?=\w+=|\/?>)/.test(code)) {
+    return code.replace(
+      /chartConfig=\{[\s\S]*?\}\s*(?=\w+=|\/?>)/,
+      configStr + '\n  ',
+    );
+  }
+  // 注入到 testId 之前
+  if (/testId\s*=/.test(code)) {
+    return code.replace(/([ \t]*)(testId\s*=)/, `$1${configStr}\n$1$2`);
+  }
+  return code.replace(/\/>/, `  ${configStr}\n/>`);
+}
+
+/** 各子图表的隐式默认 props（右键菜单 regex 所依赖的） */
+const CHART_IMPLICIT_DEFAULTS: Record<string, Record<string, any>> = {
+  pie: { variant: 'pie' },
+  bar: { variant: 'groupBar' },
+  line: {},
+  radar: {},
+  treemap: {},
+  worldmap: {},
+  table: {},
+};
+
+function multiChartActions(
+  code: string,
+  updateCode: (newCode: string) => void,
+  closeMenu: () => void,
+  ctx?: MenuActionContext,
+  t?: TFunction,
+): MenuProps['items'] {
+  const activeChart = parseDefaultVariant(code);
+  const chartsList = parseChartsList(code);
+  const chartConfig = parseChartConfig(code);
+  const activeConfig = chartConfig[activeChart] ?? {};
+
+  // ── 切换到 (二级菜单) ──
+  const switchItems: MenuProps['items'] = chartsList.map((key) => {
+    const meta = MULTI_CHART_TYPES.find((c) => c.key === key);
+    const label = meta?.label ?? key;
+    return {
+      key: `switch-${key}`,
+      label: `${label}${key === activeChart ? ' ✓' : ''}`,
+      onClick: () => {
+        let newCode = code;
+        if (/defaultVariant\s*=\s*"[^"]*"/.test(newCode)) {
+          newCode = newCode.replace(
+            /defaultVariant\s*=\s*"[^"]*"/,
+            `defaultVariant="${key}"`,
+          );
+        } else {
+          if (/testId\s*=/.test(newCode)) {
+            newCode = newCode.replace(
+              /([ \t]*)(testId\s*=)/,
+              `$1defaultVariant="${key}"\n$1$2`,
+            );
+          } else {
+            newCode = newCode.replace(/\/>/, `  defaultVariant="${key}"\n/>`);
+          }
+        }
+        updateCode(newCode);
+        closeMenu();
+      },
+    };
+  });
+
+  // ── 当前图表的配置项 ──
+  // 构建一个"虚拟 code"传给 chart actions，让它们能正确读取/修改状态
+  // chart actions 修改虚拟 code 后，我们提取差异写入 chartConfig
+  const chartActionsMap: Record<string, ComponentActionsFactory | undefined> = {
+    bar: barChartActions,
+    line: lineChartActions,
+    pie: pieChartActions,
+    radar: radarChartActions,
+    treemap: treemapChartActions,
+    table: tableActions,
+  };
+
+  const currentChartFactory = chartActionsMap[activeChart];
+  let chartSpecificItems: MenuProps['items'] = [];
+
+  if (currentChartFactory) {
+    // 构建虚拟 code：合并隐式默认 + 用户显式配置，转为 JSX props
+    const implicitDefaults = CHART_IMPLICIT_DEFAULTS[activeChart] ?? {};
+    const effectiveConfig = { ...implicitDefaults, ...activeConfig };
+    let virtualCode = `<Component\n`;
+    for (const [k, v] of Object.entries(effectiveConfig)) {
+      if (typeof v === 'boolean') {
+        virtualCode += `  ${k}={${v}}\n`;
+      } else if (typeof v === 'string') {
+        virtualCode += `  ${k}="${v}"\n`;
+      }
+    }
+    virtualCode += `  testId="virtual"\n/>`;
+
+    const virtualUpdateCode = (newVirtualCode: string) => {
+      // 从 newVirtualCode 提取所有 props
+      const newConfig: Record<string, any> = {};
+      // 解析 boolean props: xxx={true} / xxx={false}
+      const boolMatches = newVirtualCode.matchAll(
+        /(\w+)\s*=\s*\{(true|false)\}/g,
+      );
+      for (const m of boolMatches) {
+        if (m[1] !== 'testId') newConfig[m[1]] = m[2] === 'true';
+      }
+      // 解析 string props: xxx="yyy"
+      const strMatches = newVirtualCode.matchAll(/(\w+)\s*=\s*"([^"]*)"/g);
+      for (const m of strMatches) {
+        if (m[1] !== 'testId') newConfig[m[1]] = m[2];
+      }
+
+      // 更新 chartConfig
+      const updatedConfig = { ...chartConfig, [activeChart]: newConfig };
+      // 清理空对象
+      if (Object.keys(updatedConfig[activeChart]).length === 0) {
+        delete updatedConfig[activeChart];
+      }
+      const newCode = writeChartConfig(code, updatedConfig);
+      updateCode(newCode);
+    };
+
+    chartSpecificItems = currentChartFactory(
+      virtualCode,
+      virtualUpdateCode,
+      closeMenu,
+      ctx,
+      t,
+    );
+  }
+
+  return [
+    {
+      key: 'switch-chart',
+      icon: <SwapOutlined />,
+      label: t?.('canvas.menu.switchTo') ?? '切换到',
+      children: switchItems,
+    },
+    ...(chartSpecificItems && chartSpecificItems.length > 0
+      ? [
+          { type: 'divider' as const, key: 'div-chart-config' },
+          ...chartSpecificItems,
+        ]
+      : []),
   ];
 }
 
@@ -872,4 +1206,5 @@ export const CANVAS_CONTEXT_MENU_REGISTRY: Record<
   LineChart: lineChartActions,
   RadarChart: radarChartActions,
   TreemapChart: treemapChartActions,
+  MultiChart: multiChartActions,
 };

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/canvasDefaults.ts

@@ -28,6 +28,7 @@ export const CANVAS_COMPONENTS: string[] = [
   'PieChart',
   'RadarChart',
   'TreemapChart',
+  'MultiChart',
   'Table',
   'WorldMap',
 ];
@@ -38,7 +39,7 @@ export const CANVAS_DEFAULTS: Record<string, CanvasDefault> = {
     layout: { w: 10, h: 8, minW: 4, minH: 2 },
     props: getPropsFor('NumCard'),
     variants: getVariantsFor('NumCard'),
-    imports: `import { NumCard } from "@/components/canvas/NumCard";`,
+    imports: `import { NumCard } from "@gadmin2n/charts";`,
   },
 
   Filter: {
@@ -46,15 +47,15 @@ export const CANVAS_DEFAULTS: Record<string, CanvasDefault> = {
     layout: { w: 48, h: 10, minW: 20, minH: 4 },
     props: getPropsFor('Filter'),
     variants: getVariantsFor('Filter'),
-    imports: `import { Filter } from "@/components/canvas/Filter";\nimport { Form, Select, Input } from "antd";`,
+    imports: `import { Filter } from "@gadmin2n/charts";\nimport { Form, Select, Input } from "antd";`,
   },
 
   BarChart: {
-    code: `<BarChart variant="bar" data={[{ name: "A", value: 1 }]} height={300} legendShow={true} testId="canvas-barchart" />`,
+    code: `<BarChart variant="bar" data={[{ name: "A", value: 1 }]} height={300} testId="canvas-barchart" />`,
     layout: { w: 24, h: 20, minW: 8, minH: 8 },
     props: getPropsFor('BarChart'),
     variants: getVariantsFor('BarChart'),
-    imports: `import { BarChart } from "@/components/canvas/BarChart";`,
+    imports: `import { BarChart } from "@gadmin2n/charts";`,
   },
 
   LineChart: {
@@ -62,7 +63,7 @@ export const CANVAS_DEFAULTS: Record<string, CanvasDefault> = {
     layout: { w: 24, h: 20, minW: 10, minH: 8 },
     props: getPropsFor('LineChart'),
     variants: getVariantsFor('LineChart'),
-    imports: `import { LineChart } from "@/components/canvas/LineChart";`,
+    imports: `import { LineChart } from "@gadmin2n/charts";`,
   },
 
   PieChart: {
@@ -70,7 +71,7 @@ export const CANVAS_DEFAULTS: Record<string, CanvasDefault> = {
     layout: { w: 24, h: 20, minW: 8, minH: 8 },
     props: getPropsFor('PieChart'),
     variants: getVariantsFor('PieChart'),
-    imports: `import { PieChart } from "@/components/canvas/PieChart";`,
+    imports: `import { PieChart } from "@gadmin2n/charts";`,
   },
 
   RadarChart: {
@@ -78,7 +79,7 @@ export const CANVAS_DEFAULTS: Record<string, CanvasDefault> = {
     layout: { w: 24, h: 20, minW: 8, minH: 8 },
     props: getPropsFor('RadarChart'),
     variants: getVariantsFor('RadarChart'),
-    imports: `import { RadarChart } from "@/components/canvas/RadarChart";`,
+    imports: `import { RadarChart } from "@gadmin2n/charts";`,
   },
 
   TreemapChart: {
@@ -86,7 +87,7 @@ export const CANVAS_DEFAULTS: Record<string, CanvasDefault> = {
     layout: { w: 24, h: 20, minW: 8, minH: 8 },
     props: getPropsFor('TreemapChart'),
     variants: getVariantsFor('TreemapChart'),
-    imports: `import { TreemapChart } from "@/components/canvas/TreemapChart";`,
+    imports: `import { TreemapChart } from "@gadmin2n/charts";`,
   },
 
   Table: {
@@ -94,7 +95,7 @@ export const CANVAS_DEFAULTS: Record<string, CanvasDefault> = {
     layout: { w: 24, h: 20, minW: 10, minH: 5 },
     props: getPropsFor('Table'),
     variants: getVariantsFor('Table'),
-    imports: `import { Table } from "@/components/canvas/Table";`,
+    imports: `import { Table } from "@gadmin2n/charts";`,
   },
 
   WorldMap: {
@@ -102,18 +103,18 @@ export const CANVAS_DEFAULTS: Record<string, CanvasDefault> = {
     layout: { w: 32, h: 20, minW: 14, minH: 10 },
     props: getPropsFor('WorldMap'),
     variants: getVariantsFor('WorldMap'),
-    imports: `import { WorldMap } from "@/components/canvas/WorldMap";`,
+    imports: `import { WorldMap } from "@gadmin2n/charts";`,
   },
 
-  ChartViewer: {
-    code: `<ChartViewer
+  MultiChart: {
+    code: `<MultiChart
   height={300}
-  testId="canvas-chartviewer"
+  testId="canvas-multichart"
 />`,
     layout: { w: 24, h: 20, minW: 8, minH: 8 },
-    props: getPropsFor('ChartViewer'),
-    variants: getVariantsFor('ChartViewer'),
-    imports: `import { ChartViewer } from "@/components/canvas/ChartViewer";`,
+    props: getPropsFor('MultiChart'),
+    variants: getVariantsFor('MultiChart'),
+    imports: `import { MultiChart } from "@gadmin2n/charts";`,
   },
 
   Section: {
@@ -121,6 +122,6 @@ export const CANVAS_DEFAULTS: Record<string, CanvasDefault> = {
     layout: { w: 24, h: 14, minW: 8, minH: 4 },
     props: getPropsFor('Section'),
     variants: getVariantsFor('Section'),
-    imports: `import { Section } from "@/components/canvas/Section";`,
+    imports: `import { Section } from "@gadmin2n/charts";`,
   },
 };

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/components/BarChartDataSourceModal.tsx

@@ -1,6 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Modal, Radio, Input, Checkbox } from 'antd';
 import { useTranslation } from 'react-i18next';
+import {
+  CANVAS_MODAL_PROPS,
+  CANVAS_MODAL_TITLE_STYLE,
+} from './canvasModalProps';
 
 export interface BarChartDataSourceResult {
   direction: 'vertical' | 'horizontal';
@@ -58,15 +62,17 @@ const BarChartDataSourceModal: React.FC<BarChartDataSourceModalProps> = ({
 
   return (
     <Modal
-      title={t('canvas.dataSourceModal.title')}
+      {...CANVAS_MODAL_PROPS}
+      title={
+        <span style={CANVAS_MODAL_TITLE_STYLE}>
+          {t('canvas.dataSourceModal.title')}
+        </span>
+      }
       open={open}
       onOk={handleConfirm}
       onCancel={onCancel}
       okText={t('canvas.dataSourceModal.ok')}
       cancelText={t('canvas.dataSourceModal.cancel')}
-      width={420}
-      centered
-      destroyOnClose
     >
       <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
         <div>

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/components/LineChartDataSourceModal.tsx

@@ -1,6 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Modal, Checkbox, Input } from 'antd';
 import { useTranslation } from 'react-i18next';
+import {
+  CANVAS_MODAL_PROPS,
+  CANVAS_MODAL_TITLE_STYLE,
+} from './canvasModalProps';
 
 export interface LineChartDataSourceResult {
   legendShow: boolean;
@@ -73,15 +77,17 @@ const LineChartDataSourceModal: React.FC<LineChartDataSourceModalProps> = ({
 
   return (
     <Modal
-      title={t('canvas.dataSourceModal.title')}
+      {...CANVAS_MODAL_PROPS}
+      title={
+        <span style={CANVAS_MODAL_TITLE_STYLE}>
+          {t('canvas.dataSourceModal.title')}
+        </span>
+      }
       open={open}
       onOk={handleConfirm}
       onCancel={onCancel}
       okText={t('canvas.dataSourceModal.ok')}
       cancelText={t('canvas.dataSourceModal.cancel')}
-      width={420}
-      centered
-      destroyOnClose
     >
       <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
         <Checkbox