@gadmin2n/schematics 0.0.109 → 0.0.111

package/dist/lib/application/files/gadmin2-game-angle-demo/config/ui/Event.ts

@@ -30,18 +30,11 @@ export const Event: ModelConfig = {
     fields: [
       "*",
       "!created_at",
-      "!businessRequester",
-      "!number",
-      "!additionalInfo",
-      "!snSysId",
-      "!oitOwner",
       "!createdAt",
       "!endDate",
       "!creator",
       "!updatedAt",
       "!startDate",
-      "!eventType",
-      "!country",
     ],
     rowSelection: {
       actions: [
@@ -86,11 +79,6 @@ export const Event: ModelConfig = {
     fields: [
       "*",
       "!created_at",
-      "!businessRequester",
-      "!number",
-      "!additionalInfo",
-      "!snSysId",
-      "!oitOwner",
       "!createdAt",
       "!endDate",
       "!creator",

package/dist/lib/application/files/gadmin2-game-angle-demo/config/ui/ITActivityDay.ts

@@ -27,7 +27,7 @@ export const ITActivityDay: ModelConfig = {
       filter: [],
       sorter: ["id"],
     },
-    fields: ["*", "!createdAt", "!updatedAt", "!dateKey"],
+    fields: ["*", "!createdAt", "!updatedAt"],
     rowSelection: {
       actions: [
         { action: "DELETE", desc: "Delete" },

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/dev-shell/DevShell.tsx

@@ -10,12 +10,15 @@ import AddDataModal from './AddDataModal';
 import AddPageModal from './AddPageModal';
 import DeleteDataConfirm from './DeleteDataConfirm';
 import EditDataModal from './EditDataModal';
+import OnboardingModal from './OnboardingModal';
 import { resolvePagePaths } from '../components/agentPanel/pagePathUtils';
 import SkillMenu from './SkillMenu';
 import { agentAllowedPromise } from '../config/agentAllowed';
 import './style.css';
 import UndoConfirm from './UndoConfirm';
 
+const ONBOARDING_KEY = 'gadmin-onboarded';
+
 declare global {
   interface Window {
     ChatSDK: any;
@@ -82,6 +85,9 @@ function DevShellInner() {
   const [modal, setModal] = useState<ModalType>(null);
   const [isDataMngtPage, setIsDataMngtPage] = useState(false);
   const [pageType, setPageType] = useState<string>('');
+  const [showOnboarding, setShowOnboarding] = useState(
+    () => !localStorage.getItem(ONBOARDING_KEY),
+  );
   const pageContextRef = useRef<PageContext | null>(null);
   const inspectorSendDepthRef = useRef(0);
 
@@ -475,6 +481,19 @@ function DevShellInner() {
       />
 
       {/* Modals */}
+      {showOnboarding && (
+        <OnboardingModal
+          onAddData={() => {
+            localStorage.setItem(ONBOARDING_KEY, '1');
+            setShowOnboarding(false);
+            setModal('addData');
+          }}
+          onDismiss={() => {
+            localStorage.setItem(ONBOARDING_KEY, '1');
+            setShowOnboarding(false);
+          }}
+        />
+      )}
       {modal === 'undo' && (
         <UndoConfirm
           onConfirm={(prompt) => {

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/dev-shell/OnboardingModal.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+
+interface Props {
+  onAddData: () => void;
+  onDismiss: () => void;
+}
+
+const CAPABILITIES = [
+  {
+    icon: '🗄️',
+    title: '管理数据表',
+    desc: '用自然语言描述业务数据，AI 自动生成数据库和完整的数据管理页面',
+  },
+  {
+    icon: '✏️',
+    title: '所见即所得定制',
+    desc: 'Inspector模式下，点击数据管理页面任意元素，告诉 AI 要改什么，立即生效',
+  },
+  {
+    icon: '📊',
+    title: '新建 Dashboard',
+    desc: '在 Canvas 画布上拖拽搭建数据可视化看板，完成后一键发布到导航菜单',
+  },
+];
+
+export default function OnboardingModal({ onAddData, onDismiss }: Props) {
+  const [step, setStep] = useState<1 | 2>(1);
+
+  return (
+    <div id="onboarding-overlay">
+      <div id="onboarding-card">
+        {step === 1 ? (
+          <>
+            <div className="onboarding-header">
+              <div className="onboarding-welcome-icon">👋</div>
+              <h2 className="onboarding-title">欢迎使用 AI+ Ops Admin</h2>
+              <p className="onboarding-subtitle">
+                这里是你的 AI 驱动开发环境，你可以做这些事：
+              </p>
+            </div>
+
+            <div className="onboarding-caps">
+              {CAPABILITIES.map((cap) => (
+                <div key={cap.title} className="onboarding-cap-card">
+                  <div className="onboarding-cap-icon">{cap.icon}</div>
+                  <div className="onboarding-cap-title">{cap.title}</div>
+                  <div className="onboarding-cap-desc">{cap.desc}</div>
+                </div>
+              ))}
+            </div>
+
+            <div className="onboarding-footer">
+              <button className="add-data-btn-cancel" onClick={onDismiss}>
+                我已了解，跳过
+              </button>
+              <button
+                className="add-data-btn-confirm"
+                onClick={() => setStep(2)}
+              >
+                下一步：如何开始 →
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="onboarding-step2-body">
+              <div className="onboarding-step2-icon">🚀</div>
+              <h3 className="onboarding-step2-title">开始旅程：添加数据表</h3>
+              <p className="onboarding-step2-desc">
+                数据表是一切的基础。描述你要管理什么业务数据，AI
+                会自动设计数据库结构，并同步生成完整的管理页面。
+                <br />
+                <br />
+                有了数据表之后，你就可以用 Inspector 点击页面元素进行定制， 或在
+                Canvas 上搭建可视化看板。
+              </p>
+              <div className="onboarding-step2-hint">
+                💡 之后随时可以通过右下角菜单「添加数据表」重新触发
+              </div>
+            </div>
+
+            <div className="onboarding-footer">
+              <button
+                className="add-data-btn-cancel"
+                onClick={() => setStep(1)}
+              >
+                ← 返回
+              </button>
+              <button className="add-data-btn-cancel" onClick={onDismiss}>
+                先跳过
+              </button>
+              <button className="add-data-btn-confirm" onClick={onAddData}>
+                立即添加数据表
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/dev-shell/style.css

@@ -833,3 +833,132 @@ div.chat-header {
   opacity: 1;
   transform: translateY(-50%) scale(1);
 }
+
+/* ── Onboarding Modal ────────────────────────────────────────────────────── */
+#onboarding-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 999999;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#onboarding-card {
+  background: #fff;
+  border-radius: 16px;
+  width: 600px;
+  max-width: calc(100vw - 32px);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.onboarding-header {
+  padding: 32px 32px 20px;
+  text-align: center;
+}
+
+.onboarding-welcome-icon {
+  font-size: 36px;
+  line-height: 1;
+  margin-bottom: 12px;
+}
+
+.onboarding-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 0 0 8px;
+}
+
+.onboarding-subtitle {
+  font-size: 13px;
+  color: #8c8c8c;
+  margin: 0;
+}
+
+.onboarding-caps {
+  display: flex;
+  gap: 12px;
+  padding: 0 32px 24px;
+}
+
+.onboarding-cap-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 20px 12px;
+  border: 1.5px solid #f0f0f0;
+  border-radius: 12px;
+  background: #fafafa;
+  text-align: center;
+}
+
+.onboarding-cap-icon {
+  font-size: 28px;
+  line-height: 1;
+}
+
+.onboarding-cap-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.onboarding-cap-desc {
+  font-size: 12px;
+  color: #8c8c8c;
+  line-height: 1.5;
+}
+
+.onboarding-footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 16px 32px 24px;
+  border-top: 1px solid #f0f0f0;
+}
+
+/* Step 2 */
+.onboarding-step2-body {
+  padding: 32px 40px 24px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.onboarding-step2-icon {
+  font-size: 44px;
+  line-height: 1;
+}
+
+.onboarding-step2-title {
+  font-size: 17px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 0;
+}
+
+.onboarding-step2-desc {
+  font-size: 13px;
+  color: #595959;
+  line-height: 1.7;
+  margin: 0;
+  max-width: 440px;
+}
+
+.onboarding-step2-hint {
+  font-size: 12px;
+  color: #8c8c8c;
+  background: #f5f5f5;
+  border-radius: 8px;
+  padding: 10px 16px;
+  margin-top: 4px;
+}

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.111",
   "description": "Gadmin - modern, fast, powerful node.js web framework (@schematics)",
   "main": "dist/index.js",
   "files": [