@gadmin2n/schematics 0.0.71 → 0.0.72

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

@@ -1,1372 +0,0 @@
-import React, {
-  useState,
-  useCallback,
-  useMemo,
-  useRef,
-  useEffect,
-} from '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';
-import CodeFloatWindow from './CodeFloatWindow';
-import CanvasToolbar from './CanvasToolbar';
-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 NumCardDataSourceModal from './components/NumCardDataSourceModal';
-import TableDataSourceModal from './components/TableDataSourceModal';
-import BarChartDataSourceModal from './components/BarChartDataSourceModal';
-import LineChartDataSourceModal from './components/LineChartDataSourceModal';
-import RadarChartDataSourceModal from './components/RadarChartDataSourceModal';
-import PromptModal from './components/PromptModal';
-import { createSectionCompactor } from './sectionCompactor';
-import type { CanvasItem as CanvasItemType } from './types';
-import { useTranslation } from 'react-i18next';
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-
-// ─── ID 生成 ─────────────────────────────────────────────────────────────────
-
-let _id = 0;
-const genId = () => `canvas-${Date.now()}-${++_id}`;
-
-// ─── Constants ───────────────────────────────────────────────────────────────
-
-const COLS = 48;
-const ROW_HEIGHT = 10;
-const MARGIN_Y = 8;
-
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-
-/** Compute the pixel height a component should fill given a grid row count. */
-function gridRowsToPx(h: number): number {
-  return h * ROW_HEIGHT + (h - 1) * MARGIN_Y;
-}
-
-function syncCodeHeight(code: string, h: number): string {
-  const px = Math.max(50, gridRowsToPx(h));
-
-  // Table 组件用 height:100% 自适应外层容器，不需要注入固定高度
-  if (/^<Table[\s\n]/.test(code.trim())) {
-    return code;
-  }
-
-  // withChart variant 不需要固定高度（自适应外层容器）
-  if (/variant\s*=\s*"withChart"/.test(code)) {
-    let cleaned = code;
-    // 移除可能残留的 contentHeight prop
-    cleaned = cleaned.replace(/\s*contentHeight\s*=\s*\{[^}]*\}/, '');
-    // 移除 style={{ height: X }} （固定高度会阻止自适应）
-    cleaned = cleaned.replace(
-      /\s*style\s*=\s*\{\{\s*height\s*:\s*\d+\s*\}\}/,
-      '',
-    );
-    return cleaned;
-  }
-
-  // contentHeight={X} — NumLineCard inner chart area (subtract Card padding 32px)
-  if (/contentHeight\s*=\s*\{[^}]*\}/.test(code)) {
-    const inner = Math.max(40, px - 32);
-    return code.replace(
-      /contentHeight\s*=\s*\{[^}]*\}/g,
-      `contentHeight={${inner}}`,
-    );
-  }
-  if (/height\s*=\s*\{[^}]*\}/.test(code)) {
-    return code.replace(/height\s*=\s*\{[^}]*\}/g, `height={${px}}`);
-  }
-  if (/style\s*=\s*\{\{[^}]*height\s*:/.test(code)) {
-    return code.replace(/(height\s*:\s*)\d+/g, `$1${px}`);
-  }
-  if (/\/>\s*$/.test(code)) {
-    return code.replace(/\/>\s*$/, `  style={{ height: ${px} }}\n/>`);
-  }
-  return code;
-}
-
-// ─── Props ───────────────────────────────────────────────────────────────────
-
-interface CanvasPageProps {
-  items: CanvasItemType[];
-  layout: LayoutItem[];
-  isDirty: boolean;
-  canvasName: string;
-  isPublished: boolean;
-  onItemsChange: (items: CanvasItemType[]) => void;
-  onLayoutChange: (layout: LayoutItem[]) => void;
-  onBothChange: (items: CanvasItemType[], layout: LayoutItem[]) => void;
-  onSave: () => void;
-  onBack: () => void;
-  onPublish: () => void;
-  onUnpublish: () => void;
-}
-
-// ─── CanvasPage ────────────────────────────────────────────────────────────────
-
-const CanvasPage: React.FC<CanvasPageProps> = ({
-  items,
-  layout,
-  isDirty,
-  canvasName,
-  isPublished,
-  onItemsChange,
-  onLayoutChange,
-  onBothChange,
-  onSave,
-  onBack,
-  onPublish,
-  onUnpublish,
-}) => {
-  const { t } = useTranslation();
-
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [isPreview, setIsPreview] = useState(false);
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [configModal, setConfigModal] = useState<{
-    id: string;
-    componentType: string;
-  } | null>(null);
-
-  const [dataSourceModal, setDataSourceModal] = useState<{
-    id: string;
-    componentType: string;
-    code: string;
-    mode: 'api' | 'sql';
-  } | null>(null);
-
-  // ── PromptModal state（通用文本输入弹窗）──
-  const [promptModal, setPromptModal] = useState<{
-    label: string;
-    placeholder?: string;
-    defaultValue?: string;
-    onConfirm: (value: string) => void;
-  } | null>(null);
-
-  const menuActionContext: MenuActionContext = useMemo(
-    () => ({
-      showPrompt: (opts) => setPromptModal(opts),
-    }),
-    [],
-  );
-
-  const agent = useAgent();
-
-  // 触发 agent 修改数据来源
-  const triggerDataSourceAgent = useCallback(
-    (
-      id: string,
-      componentType: string,
-      code: string,
-      userPrompt?: string,
-      skill?: string,
-    ) => {
-      const prompt = generatePrompt({
-        skill: skill ?? 'canvas-data-query',
-        pageInfo: agent?.pageInfo ?? {
-          resourceName: '',
-          pageType: 'unknown',
-          path: '',
-          sourceFilePath: null,
-        },
-        userPrompt: userPrompt || '修改数据来源',
-        inspectedElement: {
-          type: 'canvas-component' as any,
-          resource: 'canvas',
-          x: 0,
-          y: 0,
-          meta: { componentType, canvasItemId: id, code },
-        },
-      });
-      agent?.sendPrompt(prompt);
-    },
-    [agent],
-  );
-
-  const { width: containerWidth, containerRef, mounted } = useContainerWidth();
-
-  const liveRef = useRef({
-    items,
-    layout,
-    onItemsChange,
-    onLayoutChange,
-    onBothChange,
-    selectedId,
-    editingId,
-  });
-  liveRef.current = {
-    items,
-    layout,
-    onItemsChange,
-    onLayoutChange,
-    onBothChange,
-    selectedId,
-    editingId,
-  };
-
-  // 自定义 compactor：Section 与普通组件之间允许重叠
-  const sectionCompactor = useMemo(
-    () => createSectionCompactor(() => liveRef.current.items),
-    [],
-  );
-
-  // 添加组件
-  const addComponent = useCallback((type: string) => {
-    const { items, layout, onBothChange } = liveRef.current;
-    const def = CANVAS_DEFAULTS[type];
-    if (!def) return;
-    const id = genId();
-    const maxY = layout.reduce((m, l) => Math.max(m, l.y + l.h), 0);
-    const h = def.layout.h;
-    onBothChange(
-      [
-        ...items,
-        { id, componentType: type, code: syncCodeHeight(def.code, h) },
-      ],
-      [
-        ...layout,
-        {
-          i: id,
-          x: 0,
-          y: maxY,
-          w: def.layout.w,
-          h,
-          minW: def.layout.minW,
-          minH: def.layout.minH ?? 2,
-        },
-      ],
-    );
-  }, []);
-
-  // 删除组件
-  const removeComponent = useCallback((id: string) => {
-    const { items, layout, onBothChange } = liveRef.current;
-    onBothChange(
-      items.filter((item) => item.id !== id),
-      layout.filter((l) => l.i !== id),
-    );
-    setSelectedId((prev) => (prev === id ? null : prev));
-    setEditingId((prev) => (prev === id ? null : prev));
-  }, []);
-
-  // 复制组件
-  const duplicateComponent = useCallback((id: string) => {
-    const { items, layout, onBothChange } = liveRef.current;
-    const item = items.find((i) => i.id === id);
-    const itemLayout = layout.find((l) => l.i === id);
-    if (!item || !itemLayout) return;
-    const newId = genId();
-    const maxY = layout.reduce((m, l) => Math.max(m, l.y + l.h), 0);
-    onBothChange(
-      [...items, { ...item, id: newId }],
-      [...layout, { ...itemLayout, i: newId, y: maxY }],
-    );
-  }, []);
-
-  // 更新组件代码
-  const updateCode = useCallback((id: string, code: string) => {
-    const { items, onItemsChange } = liveRef.current;
-    onItemsChange(
-      items.map((item) => (item.id === id ? { ...item, code } : item)),
-    );
-  }, []);
-
-  // ── canvas:patch HMR 监听 — agent 通过 POST /canvas-patch 触发画布实时更新 ──
-  useEffect(() => {
-    if (!import.meta.hot) return;
-    const handler = ({ itemId, code }: { itemId: string; code: string }) => {
-      updateCode(itemId, code);
-    };
-    import.meta.hot.on('canvas:patch', handler);
-    return () => {
-      import.meta.hot?.off('canvas:patch', handler);
-    };
-  }, [updateCode]);
-
-  const handleDragStop = useCallback((_layout: readonly LayoutItem[]) => {
-    setIsDragging(false);
-    if (_layout.some((l) => l.i === '__dropping-elem__')) return;
-    const { layout, onLayoutChange } = liveRef.current;
-    const hasChanged = _layout.some((l) => {
-      const existing = layout.find((e) => e.i === l.i);
-      return (
-        !existing ||
-        l.x !== existing.x ||
-        l.y !== existing.y ||
-        l.w !== existing.w ||
-        l.h !== existing.h
-      );
-    });
-    if (!hasChanged) return;
-    const merged = _layout.map((l) => {
-      const existing = layout.find((e) => e.i === l.i);
-      return existing?.minW !== undefined || existing?.minH !== undefined
-        ? { ...l, minW: existing?.minW, minH: existing?.minH }
-        : l;
-    });
-    onLayoutChange(merged);
-  }, []);
-
-  const handleResizeStop = useCallback(
-    (_layout: readonly LayoutItem[], _oldItem: any, newItem: any) => {
-      const { layout, items, onItemsChange, onLayoutChange } = liveRef.current;
-
-      if (
-        _layout.length > 0 &&
-        !_layout.some((l) => l.i === '__dropping-elem__')
-      ) {
-        const merged = _layout.map((l) => {
-          const existing = layout.find((e) => e.i === l.i);
-          return existing?.minW !== undefined || existing?.minH !== undefined
-            ? { ...l, minW: existing?.minW, minH: existing?.minH }
-            : l;
-        });
-        onLayoutChange(merged);
-      }
-
-      if (!newItem?.i) return;
-      const { i: itemId, h } = newItem;
-      onItemsChange(
-        items.map((item) => {
-          if (item.id !== itemId) return item;
-          return { ...item, code: syncCodeHeight(item.code, h) };
-        }),
-      );
-    },
-    [],
-  );
-
-  // ── 外部拖拽放入 ──
-
-  const handleDrop = useCallback(
-    (
-      _layout: readonly LayoutItem[],
-      item: LayoutItem | undefined,
-      e: Event,
-    ) => {
-      const type = (e as DragEvent).dataTransfer?.getData('componentType');
-      if (!type) return;
-      const def = CANVAS_DEFAULTS[type];
-      if (!def) return;
-      const { items, onBothChange } = liveRef.current;
-      const id = genId();
-      const h = def.layout.h;
-      const cleanLayout = _layout.filter((l) => l.i !== '__dropping-elem__');
-
-      // 优先使用 variant 代码（来自 Popover 拖拽），fallback 到 def.code
-      const rawVariantCode = (e as DragEvent).dataTransfer?.getData(
-        'variantCode',
-      );
-      const baseCode = rawVariantCode
-        ? rawVariantCode.replace(
-            /testId="demo-([^"]+)"/g,
-            `testId="canvas-$1-${Date.now()}"`,
-          )
-        : def.code;
-
-      onBothChange(
-        [
-          ...items,
-          { id, componentType: type, code: syncCodeHeight(baseCode, h) },
-        ],
-        [
-          ...cleanLayout,
-          {
-            i: id,
-            x: item?.x ?? 0,
-            y: item?.y ?? 0,
-            w: def.layout.w,
-            h,
-            minW: def.layout.minW,
-            minH: def.layout.minH ?? 2,
-          },
-        ],
-      );
-    },
-    [],
-  );
-
-  // ── 右键菜单 ──
-
-  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: t('canvas.config'),
-                  onClick: () => {
-                    setConfigModal({ id: itemMenu.id, componentType });
-                    setItemMenu(null);
-                  },
-                },
-              ]
-            : []),
-          {
-            key: 'data-source',
-            icon: <DatabaseOutlined />,
-            label: t('canvas.dataSource.api'),
-            onClick: () => {
-              if (
-                componentType === 'NumCard' ||
-                componentType === 'Table' ||
-                componentType === 'BarChart' ||
-                componentType === 'LineChart' ||
-                componentType === 'RadarChart'
-              ) {
-                setDataSourceModal({
-                  id: itemMenu.id,
-                  componentType,
-                  code: item?.code ?? '',
-                  mode: 'api',
-                });
-              } else {
-                // 其他组件：弹 modal 收集描述后触发 agent
-                menuActionContext.showPrompt({
-                  label: t('canvas.dataSource.api'),
-                  placeholder: t('canvas.dataSource.apiPlaceholder'),
-                  defaultValue: '',
-                  onConfirm: (value) => {
-                    if (!value.trim()) return;
-                    triggerDataSourceAgent(
-                      itemMenu.id,
-                      componentType,
-                      item?.code ?? '',
-                      value.trim(),
-                    );
-                  },
-                });
-              }
-              setItemMenu(null);
-            },
-          },
-          {
-            key: 'data-source-sql',
-            icon: <DatabaseOutlined />,
-            label: t('canvas.dataSource.sql'),
-            onClick: () => {
-              if (
-                componentType === 'NumCard' ||
-                componentType === 'Table' ||
-                componentType === 'BarChart' ||
-                componentType === 'LineChart' ||
-                componentType === 'RadarChart'
-              ) {
-                setDataSourceModal({
-                  id: itemMenu.id,
-                  componentType,
-                  code: item?.code ?? '',
-                  mode: 'sql',
-                });
-              } else {
-                // 其他组件：弹通用输入 modal
-                menuActionContext.showPrompt({
-                  label: t('canvas.dataSource.sql'),
-                  placeholder: t('canvas.dataSource.sqlPlaceholder'),
-                  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: null,
-                    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 handleCanvasClick = useCallback(() => {
-    setSelectedId(null);
-    setItemMenu(null);
-  }, []);
-
-  const editingItem = editingId ? items.find((i) => i.id === editingId) : null;
-  const editingDef = editingItem
-    ? CANVAS_DEFAULTS[editingItem.componentType]
-    : null;
-
-  const dropConfig = useMemo(
-    () => ({
-      enabled: true,
-      defaultItem: { w: 12, h: 12 },
-      onDragOver: (e: DragEvent) => {
-        const typeKey = Array.from(
-          (e as unknown as React.DragEvent).dataTransfer?.types ??
-            e.dataTransfer?.types ??
-            [],
-        ).find((t: string) => t.startsWith('x-component-type/'));
-        if (!typeKey) return;
-        const componentType = CANVAS_COMPONENTS.find(
-          (t) => `x-component-type/${t.toLowerCase()}` === typeKey,
-        );
-        if (!componentType) return;
-        const def = CANVAS_DEFAULTS[componentType];
-        if (!def) return;
-        return { w: def.layout.w, h: def.layout.h };
-      },
-    }),
-    [],
-  );
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        ...(isPreview ? {} : { height: 'calc(100vh - 64px - 64px)' }),
-      }}
-    >
-      {/* ── 顶部工具栏（固定在画布外面，不参与滚动） ── */}
-      {!isPreview && (
-        <CanvasToolbar
-          isDirty={isDirty}
-          canvasName={canvasName}
-          isPublished={isPublished}
-          onSave={onSave}
-          onBack={onBack}
-          onPublish={onPublish}
-          onUnpublish={onUnpublish}
-          onPreview={() => setIsPreview(true)}
-        />
-      )}
-
-      {/* ── 画布 ── */}
-      <div
-        ref={containerRef as React.RefObject<HTMLDivElement>}
-        onClick={handleCanvasClick}
-        style={{
-          flex: 1,
-          overflow: isPreview ? 'visible' : 'auto',
-          position: 'relative',
-          background: isDragging
-            ? `
-              radial-gradient(circle, #1677ff 1.5px, transparent 1.5px) 0 0 / 90px 90px,
-              radial-gradient(circle, #1677ff 0.8px, transparent 0.8px) 0 0 / 18px 18px,
-              #f0f2f5
-            `
-            : '#f0f2f5',
-          transition: 'background 0.15s',
-        }}
-      >
-        {/* 空画布提示 */}
-        {items.length === 0 && (
-          <div
-            style={{
-              position: 'absolute',
-              inset: 0,
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: 12,
-              userSelect: 'none',
-              pointerEvents: 'none',
-            }}
-          >
-            <PlusCircleOutlined style={{ fontSize: 48, color: '#d9d9d9' }} />
-            <span style={{ fontSize: 16, color: '#8c8c8c' }}>
-              {t('canvas.emptyHint')}
-            </span>
-            <span style={{ fontSize: 13, color: '#bfbfbf' }}>
-              或右键画布添加组件
-            </span>
-          </div>
-        )}
-
-        {/* 网格布局 */}
-        {mounted && (
-          <div style={{ maxWidth: 1600, margin: '0 auto', width: '100%' }}>
-            <GridLayout
-              className="layout"
-              layout={layout}
-              width={Math.min(containerWidth, 1600)}
-              style={{
-                minHeight: Math.max(
-                  // 根据 layout 内容底部动态延伸 + 额外空间
-                  layout.reduce(
-                    (max, item) =>
-                      Math.max(
-                        max,
-                        (item.y + item.h) * (ROW_HEIGHT + MARGIN_Y),
-                      ),
-                    0,
-                  ) + (isDragging ? 600 : 300),
-                  // 至少占满一屏
-                  window.innerHeight - 200,
-                ),
-              }}
-              gridConfig={{
-                cols: COLS,
-                rowHeight: ROW_HEIGHT,
-                margin: [MARGIN_Y, MARGIN_Y] as const,
-              }}
-              dragConfig={{
-                enabled: !isPreview,
-                handle: '.canvas-item-drag',
-              }}
-              resizeConfig={{
-                enabled: !isPreview,
-              }}
-              dropConfig={isPreview ? undefined : dropConfig}
-              onDrop={isPreview ? undefined : handleDrop}
-              compactor={sectionCompactor}
-              onResizeStop={handleResizeStop}
-              onDragStart={() => setIsDragging(true)}
-              onDragStop={handleDragStop}
-            >
-              {items.map((item) => (
-                <CanvasCell
-                  key={item.id}
-                  className="canvas-item-drag"
-                  style={{ zIndex: item.componentType === 'Section' ? 0 : 1 }}
-                  componentType={item.componentType}
-                  isPreview={isPreview}
-                  data-grid-id={item.id}
-                  data-agent-type="canvas-component"
-                  data-agent-resource="canvas"
-                  data-agent-meta={JSON.stringify({
-                    componentType: item.componentType,
-                    canvasItemId: item.id,
-                    code: item.code,
-                  })}
-                  code={item.code}
-                  selected={selectedId === item.id}
-                  onClick={() => setSelectedId(item.id)}
-                  onDoubleClick={() => setEditingId(item.id)}
-                  onContextMenu={(e: React.MouseEvent) =>
-                    handleItemContextMenu(e, item.id)
-                  }
-                />
-              ))}
-            </GridLayout>
-          </div>
-        )}
-
-        {/* 预览模式退出按钮 */}
-        {isPreview && (
-          <Button
-            onClick={() => setIsPreview(false)}
-            style={{
-              position: 'fixed',
-              top: 68,
-              left: '58%',
-              transform: 'translateX(-50%)',
-              zIndex: 1000,
-              borderRadius: 8,
-              background: '#fff',
-              border: '1px solid #e0e0e0',
-              boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
-              fontWeight: 500,
-              color: '#555',
-            }}
-          >
-            {t('canvas.exitPreview')}
-          </Button>
-        )}
-
-        {/* 组件右键菜单 */}
-        {itemMenu && (
-          <Dropdown
-            menu={{ items: itemMenuItems }}
-            open
-            trigger={['click']}
-            onOpenChange={(open) => {
-              if (!open) setItemMenu(null);
-            }}
-          >
-            <div
-              style={{
-                position: 'fixed',
-                left: itemMenu.x,
-                top: itemMenu.y,
-                width: 1,
-                height: 1,
-              }}
-            />
-          </Dropdown>
-        )}
-
-        {/* 组件配置 Modal */}
-        {configModal &&
-          (() => {
-            const ConfigModal = CANVAS_CONFIG_REGISTRY[
-              configModal.componentType
-            ] as React.FC<CanvasConfigModalProps> | undefined;
-            const item = items.find((i) => i.id === configModal.id);
-            if (!ConfigModal || !item) return null;
-            return (
-              <ConfigModal
-                code={item.code}
-                onConfirm={(newCode) => {
-                  updateCode(configModal.id, newCode);
-                  setConfigModal(null);
-                }}
-                onCancel={() => setConfigModal(null)}
-              />
-            );
-          })()}
-
-        {/* 浮动代码窗口 */}
-        {!isPreview && editingItem && editingDef && (
-          <CodeFloatWindow
-            componentType={editingItem.componentType}
-            imports={editingDef.imports}
-            code={editingItem.code}
-            props={editingDef.props}
-            variants={editingDef.variants}
-            onChange={(code) => updateCode(editingItem.id, code)}
-            onClose={() => setEditingId(null)}
-          />
-        )}
-
-        {/* NumCard 修改数据来源 Modal */}
-        <NumCardDataSourceModal
-          open={
-            !!dataSourceModal && dataSourceModal.componentType === 'NumCard'
-          }
-          code={dataSourceModal?.code ?? ''}
-          onConfirm={({
-            wantChart,
-            chartRange,
-            wantComparisons,
-            comparisonLabels,
-            dataDescription,
-            code: origCode,
-          }) => {
-            if (!dataSourceModal) return;
-            let newCode = origCode;
-
-            // 处理折线图
-            const curHasChart = /variant\s*=\s*"withChart"/.test(newCode);
-            if (wantChart && !curHasChart) {
-              // 添加 withChart
-              if (/variant\s*=\s*"[^"]*"/.test(newCode)) {
-                newCode = newCode.replace(
-                  /variant\s*=\s*"[^"]*"/,
-                  'variant="withChart"',
-                );
-              } else {
-                newCode = newCode.replace(
-                  /(<NumCard)/,
-                  '$1\n  variant="withChart"',
-                );
-              }
-              if (!/chartData\s*=/.test(newCode)) {
-                const tpl = `chartData={[]}\n  chartTestId="canvas-numcard-chart"`;
-                newCode = newCode.replace(
-                  /([ \t]*)(testId\s*=)/,
-                  `$1${tpl}\n$1$2`,
-                );
-              }
-            } else if (!wantChart && curHasChart) {
-              // 移除 withChart
-              newCode = newCode.replace(
-                /variant\s*=\s*"withChart"/,
-                'variant="default"',
-              );
-              newCode = newCode.replace(
-                /\s*chartData\s*=\s*\{[\s\S]*?\]\s*\}/,
-                '',
-              );
-              newCode = newCode.replace(/\s*chartTestId\s*=\s*"[^"]*"/, '');
-            }
-
-            // 处理比较数据
-            const curHasComp = /comparisons\s*=\s*\{\[/.test(newCode);
-            if (wantComparisons && comparisonLabels.length > 0) {
-              const compStr = comparisonLabels
-                .map((l) => `{ label: "${l}", value: "0%", isUp: true }`)
-                .join(',\n    ');
-              const compProp = `comparisons={[\n    ${compStr},\n  ]}`;
-              if (curHasComp) {
-                newCode = newCode.replace(
-                  /comparisons\s*=\s*\{\[[\s\S]*?\]\}/,
-                  compProp,
-                );
-              } else {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1${compProp}\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  ${compProp}\n/>`);
-                }
-              }
-            } else if (!wantComparisons && curHasComp) {
-              newCode = newCode.replace(
-                /\s*comparisons\s*=\s*\{\[[\s\S]*?\]\}/,
-                '',
-              );
-            }
-
-            updateCode(dataSourceModal.id, newCode);
-            setDataSourceModal(null);
-
-            // 构造描述发给 agent
-            const parts: string[] = [];
-            if (dataDescription) parts.push(dataDescription);
-            if (wantChart)
-              parts.push(`需要右侧折线图数据，显示范围：${chartRange}`);
-            if (wantComparisons && comparisonLabels.length > 0) {
-              parts.push(`需要比较数据：${comparisonLabels.join('、')}`);
-            }
-            const userPrompt = parts.join('。');
-            triggerDataSourceAgent(
-              dataSourceModal.id,
-              dataSourceModal.componentType,
-              newCode,
-              userPrompt || undefined,
-              dataSourceModal.mode === 'sql'
-                ? 'canvas-sql-query'
-                : 'canvas-data-query',
-            );
-          }}
-          onCancel={() => setDataSourceModal(null)}
-        />
-
-        {/* Table 修改数据来源 Modal */}
-        <TableDataSourceModal
-          open={!!dataSourceModal && dataSourceModal.componentType === 'Table'}
-          code={dataSourceModal?.code ?? ''}
-          onConfirm={({
-            columns,
-            wantPagination,
-            pageSize,
-            dataDescription,
-            code: origCode,
-          }) => {
-            if (!dataSourceModal) return;
-            let newCode = origCode;
-
-            // 根据用户选择更新 columns
-            const colsStr = columns
-              .map(
-                (c) => `    { title: "${c}", dataIndex: "${c}", key: "${c}" }`,
-              )
-              .join(',\n');
-            if (/columns\s*=\s*\{\[/.test(newCode)) {
-              newCode = newCode.replace(
-                /columns\s*=\s*\{\[[\s\S]*?\]\}/,
-                `columns={[\n${colsStr},\n  ]}`,
-              );
-            }
-
-            // 处理分页
-            const curHasPagination = /pagination\s*=\s*\{\{/.test(newCode);
-            if (wantPagination && !curHasPagination) {
-              const paginationTpl = `pagination={{ current: 1, pageSize: ${pageSize}, total: 0 }}`;
-              if (/testId\s*=/.test(newCode)) {
-                newCode = newCode.replace(
-                  /([ \t]*)(testId\s*=)/,
-                  `$1${paginationTpl}\n$1$2`,
-                );
-              } else {
-                newCode = newCode.replace(/\/>/, `  ${paginationTpl}\n/>`);
-              }
-            } else if (wantPagination && curHasPagination) {
-              // 更新已有的 pageSize
-              newCode = newCode.replace(
-                /pageSize\s*:\s*\d+/,
-                `pageSize: ${pageSize}`,
-              );
-            } else if (!wantPagination && curHasPagination) {
-              newCode = newCode.replace(
-                /\s*pagination\s*=\s*\{\{[\s\S]*?\}\}/,
-                '',
-              );
-              newCode = newCode.replace(/\s*entityName\s*=\s*"[^"]*"/, '');
-            }
-
-            updateCode(dataSourceModal.id, newCode);
-            setDataSourceModal(null);
-
-            // 构造描述发给 agent
-            const parts: string[] = [];
-            if (dataDescription) parts.push(dataDescription);
-            parts.push(`表格列：${columns.join('、')}`);
-            if (wantPagination) parts.push(`需要分页，每页 ${pageSize} 条`);
-            const userPrompt = parts.join('。');
-            triggerDataSourceAgent(
-              dataSourceModal.id,
-              dataSourceModal.componentType,
-              newCode,
-              userPrompt,
-              dataSourceModal.mode === 'sql'
-                ? 'canvas-sql-query'
-                : 'canvas-data-query',
-            );
-          }}
-          onCancel={() => setDataSourceModal(null)}
-        />
-
-        {/* BarChart 修改数据来源 Modal */}
-        <BarChartDataSourceModal
-          open={
-            !!dataSourceModal && dataSourceModal.componentType === 'BarChart'
-          }
-          code={dataSourceModal?.code ?? ''}
-          onConfirm={(result) => {
-            if (!dataSourceModal) return;
-            let newCode = result.code;
-
-            // 修改 direction
-            if (result.direction === 'horizontal') {
-              if (!/direction\s*=/.test(newCode)) {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1direction="horizontal"\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(
-                    /\/>/,
-                    `  direction="horizontal"\n/>`,
-                  );
-                }
-              } else {
-                newCode = newCode.replace(
-                  /direction\s*=\s*"[^"]*"/,
-                  'direction="horizontal"',
-                );
-              }
-            } else {
-              // vertical 是默认值，移除 direction prop
-              newCode = newCode.replace(/\s*direction\s*=\s*"[^"]*"/, '');
-            }
-
-            // 修改 showGrid
-            if (!result.showGrid) {
-              if (!/showGrid\s*=/.test(newCode)) {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1showGrid={false}\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  showGrid={false}\n/>`);
-                }
-              }
-            } else {
-              newCode = newCode.replace(/\s*showGrid\s*=\s*\{false\}/, '');
-            }
-
-            // 修改 showLabel
-            if (!result.showLabel) {
-              if (!/showLabel\s*=/.test(newCode)) {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1showLabel={false}\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  showLabel={false}\n/>`);
-                }
-              }
-            } else {
-              newCode = newCode.replace(/\s*showLabel\s*=\s*\{false\}/, '');
-            }
-
-            // 更新画布
-            updateCode(dataSourceModal.id, newCode);
-            setDataSourceModal(null);
-
-            // 构造 prompt 并触发 agent
-            const dirLabel =
-              result.direction === 'horizontal' ? '横向' : '纵向';
-            const parts: string[] = [];
-            if (result.dataDescription) parts.push(result.dataDescription);
-            parts.push(`方向: ${dirLabel}`);
-            if (!result.showGrid) parts.push('隐藏网格线');
-            if (!result.showLabel) parts.push('隐藏数据标签');
-            const userPrompt = parts.join('。');
-            triggerDataSourceAgent(
-              dataSourceModal.id,
-              'BarChart',
-              newCode,
-              userPrompt,
-              dataSourceModal.mode === 'sql'
-                ? 'canvas-sql-query'
-                : 'canvas-data-query',
-            );
-          }}
-          onCancel={() => setDataSourceModal(null)}
-        />
-
-        <LineChartDataSourceModal
-          open={
-            !!dataSourceModal && dataSourceModal.componentType === 'LineChart'
-          }
-          code={dataSourceModal?.code ?? ''}
-          onConfirm={(result) => {
-            if (!dataSourceModal) return;
-            let newCode = result.code;
-
-            // ── legendShow ──
-            if (!result.legendShow) {
-              if (!/legendShow\s*=\s*\{/.test(newCode)) {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1legendShow={false}\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  legendShow={false}\n/>`);
-                }
-              } else {
-                newCode = newCode.replace(
-                  /legendShow\s*=\s*\{true\}/,
-                  'legendShow={false}',
-                );
-              }
-            } else {
-              newCode = newCode.replace(/\s*legendShow\s*=\s*\{false\}/, '');
-            }
-
-            // ── showGrid（默认 true，false 时注入）──
-            if (!result.showGrid) {
-              if (!/showGrid\s*=/.test(newCode)) {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1showGrid={false}\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  showGrid={false}\n/>`);
-                }
-              }
-            } else {
-              newCode = newCode.replace(/\s*showGrid\s*=\s*\{false\}/, '');
-            }
-
-            // ── showAxis（默认 true，false 时注入）──
-            if (!result.showAxis) {
-              if (!/showAxis\s*=/.test(newCode)) {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1showAxis={false}\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  showAxis={false}\n/>`);
-                }
-              }
-            } else {
-              newCode = newCode.replace(/\s*showAxis\s*=\s*\{false\}/, '');
-            }
-
-            // ── showDots（默认 false，true 时注入）──
-            if (result.showDots) {
-              if (!/showDots\s*=/.test(newCode)) {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1showDots={true}\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  showDots={true}\n/>`);
-                }
-              }
-            } else {
-              newCode = newCode.replace(/\s*showDots\s*=\s*\{true\}/, '');
-            }
-
-            // ── showLabel（默认 false，true 时注入，仅 showDots 时有意义）──
-            if (result.showDots && result.showLabel) {
-              if (!/showLabel\s*=/.test(newCode)) {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1showLabel={true}\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  showLabel={true}\n/>`);
-                }
-              }
-            } else {
-              newCode = newCode.replace(/\s*showLabel\s*=\s*\{true\}/, '');
-            }
-
-            // ── stacked（默认 false，true 时注入）──
-            if (result.stacked) {
-              if (!/stacked\s*=/.test(newCode)) {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1stacked={true}\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  stacked={true}\n/>`);
-                }
-              }
-            } else {
-              newCode = newCode.replace(/\s*stacked\s*=\s*\{true\}/, '');
-            }
-
-            // ── area（默认 false，true 时注入）──
-            if (result.area) {
-              if (!/area\s*=/.test(newCode)) {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1area={true}\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  area={true}\n/>`);
-                }
-              }
-            } else {
-              newCode = newCode.replace(/\s*area\s*=\s*\{true\}/, '');
-            }
-
-            // ── smooth（默认 false，true 时注入）──
-            if (result.smooth) {
-              if (!/smooth\s*=/.test(newCode)) {
-                if (/testId\s*=/.test(newCode)) {
-                  newCode = newCode.replace(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1smooth={true}\n$1$2`,
-                  );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  smooth={true}\n/>`);
-                }
-              }
-            } else {
-              newCode = newCode.replace(/\s*smooth\s*=\s*\{true\}/, '');
-              newCode = newCode.replace(/\s*smooth\b(?!\s*=)/, '');
-            }
-
-            // 更新画布
-            updateCode(dataSourceModal.id, newCode);
-            setDataSourceModal(null);
-
-            // 构造 prompt 并触发 agent
-            const parts: string[] = [];
-            if (result.dataDescription) parts.push(result.dataDescription);
-            const flags: string[] = [];
-            if (result.stacked) flags.push('堆叠');
-            if (result.area) flags.push('面积填充');
-            if (result.smooth) flags.push('拟合曲线');
-            if (!result.showGrid) flags.push('无网格线');
-            if (!result.showAxis) flags.push('无坐标轴');
-            if (!result.legendShow) flags.push('隐藏图例');
-            if (result.showDots) flags.push('显示坐标点');
-            if (result.showDots && result.showLabel)
-              flags.push('显示坐标点数据');
-            if (flags.length) parts.push(`样式: ${flags.join(', ')}`);
-            const userPrompt = parts.join('。');
-            triggerDataSourceAgent(
-              dataSourceModal.id,
-              'LineChart',
-              newCode,
-              userPrompt || undefined,
-              dataSourceModal.mode === 'sql'
-                ? 'canvas-sql-query'
-                : 'canvas-data-query',
-            );
-          }}
-          onCancel={() => setDataSourceModal(null)}
-        />
-
-        {/* RadarChart 修改数据来源 Modal */}
-        <RadarChartDataSourceModal
-          open={
-            !!dataSourceModal && dataSourceModal.componentType === 'RadarChart'
-          }
-          code={dataSourceModal?.code ?? ''}
-          onConfirm={({ dimensionCount, dataDescription }) => {
-            if (!dataSourceModal) return;
-            setDataSourceModal(null);
-
-            // 不修改代码，仅构建 prompt 发给 agent
-            const parts: string[] = [];
-            parts.push(`雷达图需要${dimensionCount}个维度`);
-            if (dataDescription) parts.push(dataDescription);
-            const userPrompt = parts.join('，');
-            triggerDataSourceAgent(
-              dataSourceModal.id,
-              dataSourceModal.componentType,
-              dataSourceModal.code,
-              userPrompt,
-              dataSourceModal.mode === 'sql'
-                ? 'canvas-sql-query'
-                : 'canvas-data-query',
-            );
-          }}
-          onCancel={() => setDataSourceModal(null)}
-        />
-
-        {/* ── 通用文本输入弹窗（如修改标题） ── */}
-        <PromptModal
-          open={!!promptModal}
-          label={promptModal?.label ?? ''}
-          placeholder={promptModal?.placeholder}
-          defaultValue={promptModal?.defaultValue ?? ''}
-          onConfirm={(value) => {
-            promptModal?.onConfirm(value);
-            setPromptModal(null);
-          }}
-          onCancel={() => setPromptModal(null)}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default CanvasPage;