@gadmin2n/schematics 0.0.109 → 0.0.110

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

@@ -8,15 +8,9 @@ import React, {
 import { GridLayout, useContainerWidth } from 'react-grid-layout';
 import type { LayoutItem } from 'react-grid-layout';
 import { Dropdown, Modal, Checkbox, Input, Button, Space } from 'antd';
-import type { MenuProps } from 'antd';
 import {
   PlusOutlined,
-  DeleteOutlined,
-  EditOutlined,
-  CopyOutlined,
-  SettingOutlined,
   PlusCircleOutlined,
-  DatabaseOutlined,
   MinusCircleOutlined,
 } from '@ant-design/icons';
 import CanvasCell from './CanvasCell';
@@ -26,9 +20,9 @@ import { CANVAS_COMPONENTS, CANVAS_DEFAULTS } from './canvasDefaults';
 import { CANVAS_CONFIG_REGISTRY } from './canvasConfigRegistry';
 import { useAgent } from '@/components/agentPanel/AgentContext';
 import { generatePrompt } from '@/components/agentPanel/promptGenerator';
-import { CANVAS_CONTEXT_MENU_REGISTRY } from './canvasContextMenuRegistry';
 import type { MenuActionContext } from './canvasContextMenuRegistry';
 import type { CanvasConfigModalProps } from './canvasConfigRegistry';
+import { useCanvasContextMenu } from './hooks/useCanvasContextMenu';
 import { useIsAgentAllowed } from 'config/agentAllowed';
 import NumCardDataSourceModal from './components/NumCardDataSourceModal';
 import TableDataSourceModal from './components/TableDataSourceModal';
@@ -387,7 +381,7 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
     }) => {
       const { items, layout: currentLayout, onBothChange } = liveRef.current;
       onBothChange(
-        [...items, item],
+        [...items, { ...item, code: syncCodeHeight(item.code, layout.h) }],
         [
           ...currentLayout,
           {
@@ -548,203 +542,26 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
 
   // ── 右键菜单 ──
 
-  const [itemMenu, setItemMenu] = useState<{
-    x: number;
-    y: number;
-    id: string;
-  } | null>(null);
-
-  const handleItemContextMenu = useCallback(
-    (e: React.MouseEvent, id: string) => {
-      setItemMenu({ x: e.clientX, y: e.clientY, id });
-    },
-    [],
-  );
-
-  const itemMenuItems: MenuProps['items'] = itemMenu
-    ? (() => {
-        const item = items.find((i) => i.id === itemMenu.id);
-        const componentType = item?.componentType ?? '';
-        const hasConfig = componentType in CANVAS_CONFIG_REGISTRY;
-
-        // ── 第 1 层：组件特有操作 ──
-        const specificActionsFactory =
-          CANVAS_CONTEXT_MENU_REGISTRY[componentType];
-        const specificActions = specificActionsFactory
-          ? specificActionsFactory(
-              item?.code ?? '',
-              (newCode) => {
-                updateCode(itemMenu.id, newCode);
-              },
-              () => setItemMenu(null),
-              menuActionContext,
-              t,
-            )
-          : [];
-
-        // ── 第 2 层：通用操作（检查元素） ──
-        const commonActions: MenuProps['items'] = [
-          ...(hasConfig
-            ? [
-                {
-                  key: 'config',
-                  icon: <SettingOutlined />,
-                  label:
-                    componentType === 'MultiChart'
-                      ? (t('canvas.configCharts') ?? '配置显示图表与顺序')
-                      : componentType === 'Table'
-                        ? (t('canvas.menu.configColumns') ?? '配置列')
-                        : t('canvas.config'),
-                  onClick: () => {
-                    setConfigModal({ id: itemMenu.id, componentType });
-                    setItemMenu(null);
-                  },
-                },
-              ]
-            : []),
-          {
-            key: 'data-source',
-            icon: <DatabaseOutlined />,
-            label: t('canvas.dataSource.label'),
-            onClick: () => {
-              if (
-                componentType === 'NumCard' ||
-                componentType === 'Table' ||
-                componentType === 'BarChart' ||
-                componentType === 'LineChart' ||
-                componentType === 'RadarChart' ||
-                componentType === 'MultiChart'
-              ) {
-                setDataSourceModal({
-                  id: itemMenu.id,
-                  componentType,
-                  code: item?.code ?? '',
-                });
-              } else {
-                menuActionContext.showPrompt({
-                  label: t('canvas.dataSource.label'),
-                  placeholder: t('canvas.dataSource.placeholder'),
-                  defaultValue: '',
-                  onConfirm: (value) => {
-                    if (!value.trim()) return;
-                    const prompt = generatePrompt({
-                      skill: 'canvas-sql-query',
-                      pageInfo: agent?.pageInfo ?? {
-                        resourceName: '',
-                        pageType: 'unknown',
-                        path: '',
-                        sourceFilePath: null,
-                      },
-                      userPrompt: `为此 ${componentType} 组件用 SQL 查询真实数据并填充：${value.trim()}`,
-                      inspectedElement: {
-                        type: 'canvas-component' as any,
-                        resource: 'canvas',
-                        x: 0,
-                        y: 0,
-                        meta: {
-                          componentType,
-                          canvasItemId: itemMenu.id,
-                          code: item?.code ?? '',
-                        },
-                      },
-                    });
-                    agent?.sendPrompt(prompt);
-                  },
-                });
-              }
-              setItemMenu(null);
-            },
-          },
-          {
-            key: 'custom-agent',
-            icon: <EditOutlined />,
-            label: t('canvas.custom'),
-            onClick: () => {
-              setItemMenu(null);
-              menuActionContext.showPrompt({
-                label: t('canvas.customAction'),
-                placeholder: t('canvas.customPlaceholder'),
-                defaultValue: '',
-                onConfirm: (value) => {
-                  if (!value.trim()) return;
-                  const prompt = generatePrompt({
-                    skill: 'canvas-component-edit',
-                    pageInfo: agent?.pageInfo ?? {
-                      resourceName: '',
-                      pageType: 'unknown',
-                      path: '',
-                      sourceFilePath: null,
-                    },
-                    userPrompt: value.trim(),
-                    inspectedElement: {
-                      type: 'canvas-component' as any,
-                      resource: 'canvas',
-                      x: 0,
-                      y: 0,
-                      meta: {
-                        componentType,
-                        canvasItemId: itemMenu.id,
-                        code: item?.code ?? '',
-                      },
-                    },
-                  });
-                  agent?.sendPrompt(prompt);
-                },
-              });
-            },
-          },
-        ];
-
-        // ── 第 3 层：代码级操作 ──
-        const codeActions: MenuProps['items'] = [
-          {
-            key: 'edit',
-            icon: <EditOutlined />,
-            label: t('canvas.editCode'),
-            onClick: () => {
-              setEditingId(itemMenu.id);
-              setItemMenu(null);
-            },
-          },
-          {
-            key: 'copy',
-            icon: <CopyOutlined />,
-            label: t('canvas.duplicate'),
-            onClick: () => {
-              duplicateComponent(itemMenu.id);
-              setItemMenu(null);
-            },
-          },
-          {
-            key: 'delete',
-            icon: <DeleteOutlined />,
-            label: t('canvas.delete'),
-            danger: true,
-            onClick: () => {
-              removeComponent(itemMenu.id);
-              setItemMenu(null);
-            },
-          },
-        ];
-
-        // ── 组装三层 ──
-        const result: MenuProps['items'] = [];
-        if (specificActions && specificActions.length > 0) {
-          result.push(...specificActions);
-          result.push({ type: 'divider' as const });
-        }
-        result.push(...commonActions);
-        result.push({ type: 'divider' as const });
-        result.push(...codeActions);
-
-        return result;
-      })()
-    : [];
+  const { itemMenu, handleItemContextMenu, closeItemMenu, itemMenuItems } =
+    useCanvasContextMenu({
+      items,
+      updateCode,
+      duplicateComponent,
+      removeComponent,
+      menuActionContext,
+      t,
+      agent,
+      openConfigModal: (id, componentType) =>
+        setConfigModal({ id, componentType }),
+      openDataSourceModal: (id, componentType, code) =>
+        setDataSourceModal({ id, componentType, code }),
+      openEditCode: (id) => setEditingId(id),
+    });
 
   const handleCanvasClick = useCallback(() => {
     setSelectedId(null);
-    setItemMenu(null);
-  }, []);
+    closeItemMenu();
+  }, [closeItemMenu]);
 
   const editingItem = editingId ? items.find((i) => i.id === editingId) : null;
   const editingDef = editingItem
@@ -938,7 +755,7 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
             open
             trigger={['click']}
             onOpenChange={(open) => {
-              if (!open) setItemMenu(null);
+              if (!open) closeItemMenu();
             }}
           >
             <div

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

@@ -27,7 +27,16 @@ import {
   Section,
 } from '@gadmin2n/charts';
 import * as echarts from 'echarts';
-import { Form, Select, Input, DatePicker, Tag, Button, Space } from 'antd';
+import {
+  Form,
+  Select,
+  Input,
+  DatePicker,
+  Tag,
+  Button,
+  Space,
+  Spin,
+} from 'antd';
 import {
   CaretUpOutlined,
   CaretDownOutlined,
@@ -59,6 +68,7 @@ const SCOPE: Record<string, unknown> = {
   Tag,
   Button,
   Space,
+  Spin,
   CaretUpOutlined,
   CaretDownOutlined,
   UserOutlined,

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

@@ -16,6 +16,7 @@ import {
   writeMultiChartTableFlags,
   buildVirtualTableCode,
 } from './utils/tableCodeUtils';
+import { parseJsLiteralProp } from './utils/jsLiteralParser';
 
 // ─── 组件特有右键菜单操作注册表 ────────────────────────────────────────────────
 //
@@ -1068,25 +1069,16 @@ function parseDefaultVariant(code: string): string {
 
 /** 从 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'];
-  }
+  const parsed = parseJsLiteralProp(code, 'charts');
+  return Array.isArray(parsed) ? parsed : ['bar', 'line', 'pie'];
 }
 
-/** 从 code 中解析 chartConfig JSON */
+/** 从 code 中解析 chartConfig */
 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 {};
-  }
+  const parsed = parseJsLiteralProp(code, 'chartConfig');
+  return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+    ? (parsed as Record<string, Record<string, any>>)
+    : {};
 }
 
 /** 将 chartConfig 写回 code 字符串 */
@@ -1186,6 +1178,8 @@ function multiChartActions(
         virtualCode += `  ${k}={${v}}\n`;
       } else if (typeof v === 'string') {
         virtualCode += `  ${k}="${v}"\n`;
+      } else if (typeof v === 'number') {
+        virtualCode += `  ${k}={${v}}\n`;
       }
     }
     virtualCode += `  testId="virtual"\n/>`;
@@ -1205,6 +1199,11 @@ function multiChartActions(
       for (const m of strMatches) {
         if (m[1] !== 'testId') newConfig[m[1]] = m[2];
       }
+      // 解析 number props: xxx={123}
+      const numMatches = newVirtualCode.matchAll(/(\w+)\s*=\s*\{(\d+)\}/g);
+      for (const m of numMatches) {
+        if (m[1] !== 'testId') newConfig[m[1]] = Number(m[2]);
+      }
 
       // 更新 chartConfig
       const updatedConfig = { ...chartConfig, [activeChart]: newConfig };

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

@@ -0,0 +1,246 @@
+import { useCallback, useState } from 'react';
+import type { MenuProps } from 'antd';
+import type { TFunction } from 'i18next';
+import {
+  EditOutlined,
+  CopyOutlined,
+  SettingOutlined,
+  DatabaseOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons';
+import { CANVAS_CONFIG_REGISTRY } from '../canvasConfigRegistry';
+import { CANVAS_CONTEXT_MENU_REGISTRY } from '../canvasContextMenuRegistry';
+import type { MenuActionContext } from '../canvasContextMenuRegistry';
+import { generatePrompt } from '@/components/agentPanel/promptGenerator';
+import type { useAgent } from '@/components/agentPanel/AgentContext';
+import type { CanvasItem as CanvasItemType } from '../types';
+
+interface UseCanvasContextMenuParams {
+  items: CanvasItemType[];
+  updateCode: (id: string, code: string) => void;
+  duplicateComponent: (id: string) => void;
+  removeComponent: (id: string) => void;
+  menuActionContext: MenuActionContext;
+  t: TFunction;
+  agent: ReturnType<typeof useAgent>;
+  openConfigModal: (id: string, componentType: string) => void;
+  openDataSourceModal: (
+    id: string,
+    componentType: string,
+    code: string,
+  ) => void;
+  openEditCode: (id: string) => void;
+}
+
+interface ItemMenuState {
+  x: number;
+  y: number;
+  id: string;
+}
+
+/** 画布组件右键菜单：开关 state + 三层菜单项（组件特有 / 通用 / 代码级）的组装逻辑 */
+export function useCanvasContextMenu({
+  items,
+  updateCode,
+  duplicateComponent,
+  removeComponent,
+  menuActionContext,
+  t,
+  agent,
+  openConfigModal,
+  openDataSourceModal,
+  openEditCode,
+}: UseCanvasContextMenuParams) {
+  const [itemMenu, setItemMenu] = useState<ItemMenuState | null>(null);
+
+  const handleItemContextMenu = useCallback(
+    (e: React.MouseEvent, id: string) => {
+      setItemMenu({ x: e.clientX, y: e.clientY, id });
+    },
+    [],
+  );
+
+  const closeItemMenu = useCallback(() => setItemMenu(null), []);
+
+  const itemMenuItems: MenuProps['items'] = itemMenu
+    ? (() => {
+        const item = items.find((i) => i.id === itemMenu.id);
+        const componentType = item?.componentType ?? '';
+        const hasConfig = componentType in CANVAS_CONFIG_REGISTRY;
+
+        // ── 第 1 层：组件特有操作 ──
+        const specificActionsFactory =
+          CANVAS_CONTEXT_MENU_REGISTRY[componentType];
+        const specificActions = specificActionsFactory
+          ? specificActionsFactory(
+              item?.code ?? '',
+              (newCode) => {
+                updateCode(itemMenu.id, newCode);
+              },
+              () => setItemMenu(null),
+              menuActionContext,
+              t,
+            )
+          : [];
+
+        // ── 第 2 层：通用操作（检查元素） ──
+        const commonActions: MenuProps['items'] = [
+          ...(hasConfig
+            ? [
+                {
+                  key: 'config',
+                  icon: <SettingOutlined />,
+                  label:
+                    componentType === 'MultiChart'
+                      ? (t('canvas.configCharts') ?? '配置显示图表与顺序')
+                      : componentType === 'Table'
+                        ? (t('canvas.menu.configColumns') ?? '配置列')
+                        : t('canvas.config'),
+                  onClick: () => {
+                    openConfigModal(itemMenu.id, componentType);
+                    setItemMenu(null);
+                  },
+                },
+              ]
+            : []),
+          {
+            key: 'data-source',
+            icon: <DatabaseOutlined />,
+            label: t('canvas.dataSource.label'),
+            onClick: () => {
+              if (
+                componentType === 'NumCard' ||
+                componentType === 'Table' ||
+                componentType === 'BarChart' ||
+                componentType === 'LineChart' ||
+                componentType === 'RadarChart' ||
+                componentType === 'MultiChart'
+              ) {
+                openDataSourceModal(
+                  itemMenu.id,
+                  componentType,
+                  item?.code ?? '',
+                );
+              } else {
+                menuActionContext.showPrompt({
+                  label: t('canvas.dataSource.label'),
+                  placeholder: t('canvas.dataSource.placeholder'),
+                  defaultValue: '',
+                  onConfirm: (value) => {
+                    if (!value.trim()) return;
+                    const prompt = generatePrompt({
+                      skill: 'canvas-sql-query',
+                      pageInfo: agent?.pageInfo ?? {
+                        resourceName: '',
+                        pageType: 'unknown',
+                        path: '',
+                        sourceFilePath: null,
+                      },
+                      userPrompt: `为此 ${componentType} 组件用 SQL 查询真实数据并填充：${value.trim()}`,
+                      inspectedElement: {
+                        type: 'canvas-component' as any,
+                        resource: 'canvas',
+                        x: 0,
+                        y: 0,
+                        meta: {
+                          componentType,
+                          canvasItemId: itemMenu.id,
+                          code: item?.code ?? '',
+                        },
+                      },
+                    });
+                    agent?.sendPrompt(prompt);
+                  },
+                });
+              }
+              setItemMenu(null);
+            },
+          },
+          {
+            key: 'custom-agent',
+            icon: <EditOutlined />,
+            label: t('canvas.custom'),
+            onClick: () => {
+              setItemMenu(null);
+              menuActionContext.showPrompt({
+                label: t('canvas.customAction'),
+                placeholder: t('canvas.customPlaceholder'),
+                defaultValue: '',
+                onConfirm: (value) => {
+                  if (!value.trim()) return;
+                  const prompt = generatePrompt({
+                    skill: 'canvas-component-edit',
+                    pageInfo: agent?.pageInfo ?? {
+                      resourceName: '',
+                      pageType: 'unknown',
+                      path: '',
+                      sourceFilePath: null,
+                    },
+                    userPrompt: value.trim(),
+                    inspectedElement: {
+                      type: 'canvas-component' as any,
+                      resource: 'canvas',
+                      x: 0,
+                      y: 0,
+                      meta: {
+                        componentType,
+                        canvasItemId: itemMenu.id,
+                        code: item?.code ?? '',
+                      },
+                    },
+                  });
+                  agent?.sendPrompt(prompt);
+                },
+              });
+            },
+          },
+        ];
+
+        // ── 第 3 层：代码级操作 ──
+        const codeActions: MenuProps['items'] = [
+          {
+            key: 'edit',
+            icon: <EditOutlined />,
+            label: t('canvas.editCode'),
+            onClick: () => {
+              openEditCode(itemMenu.id);
+              setItemMenu(null);
+            },
+          },
+          {
+            key: 'copy',
+            icon: <CopyOutlined />,
+            label: t('canvas.duplicate'),
+            onClick: () => {
+              duplicateComponent(itemMenu.id);
+              setItemMenu(null);
+            },
+          },
+          {
+            key: 'delete',
+            icon: <DeleteOutlined />,
+            label: t('canvas.delete'),
+            danger: true,
+            onClick: () => {
+              removeComponent(itemMenu.id);
+              setItemMenu(null);
+            },
+          },
+        ];
+
+        // ── 组装三层 ──
+        const result: MenuProps['items'] = [];
+        if (specificActions && specificActions.length > 0) {
+          result.push(...specificActions);
+          result.push({ type: 'divider' as const });
+        }
+        result.push(...commonActions);
+        result.push({ type: 'divider' as const });
+        result.push(...codeActions);
+
+        return result;
+      })()
+    : [];
+
+  return { itemMenu, handleItemContextMenu, closeItemMenu, itemMenuItems };
+}

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

@@ -0,0 +1,50 @@
+/**
+ * 从 JSX 代码中提取某个 prop 的字面量值，按 JS 表达式语法求值
+ * （兼容裸 key、单引号字符串等非严格 JSON 写法，因为这本来就是 JS/JSX，不是 JSON）。
+ * 求值失败（语法错误、未找到该 prop 等）时返回 undefined。
+ */
+export function parseJsLiteralProp(code: string, propName: string): unknown {
+  const openBraceMatch = code.match(new RegExp(`${propName}\\s*=\\s*\\{`));
+  if (!openBraceMatch || openBraceMatch.index === undefined) return undefined;
+
+  const openIndex = openBraceMatch.index + openBraceMatch[0].length - 1;
+  const closeIndex = findMatchingBrace(code, openIndex);
+  if (closeIndex === -1) return undefined;
+
+  const expr = code.slice(openIndex + 1, closeIndex);
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    return new Function(`return (${expr})`)();
+  } catch {
+    return undefined;
+  }
+}
+
+/** 从 openIndex（必须指向 '{'）开始，找到与之匹配的 '}' 的下标；跳过字符串内的花括号 */
+function findMatchingBrace(code: string, openIndex: number): number {
+  let depth = 0;
+  let inString: '"' | "'" | null = null;
+
+  for (let i = openIndex; i < code.length; i++) {
+    const ch = code[i];
+
+    if (inString) {
+      if (ch === '\\') {
+        i++; // 跳过转义字符，避免把 \" 误判为字符串结束
+      } else if (ch === inString) {
+        inString = null;
+      }
+      continue;
+    }
+
+    if (ch === '"' || ch === "'") {
+      inString = ch;
+    } else if (ch === '{') {
+      depth++;
+    } else if (ch === '}') {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gadmin2n/schematics",
-  "version": "0.0.109",
+  "version": "0.0.110",
   "description": "Gadmin - modern, fast, powerful node.js web framework (@schematics)",
   "main": "dist/index.js",
   "files": [