@gadmin2n/schematics 0.0.111 → 0.0.112

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

@@ -12,10 +12,12 @@ import {
   PlusOutlined,
   PlusCircleOutlined,
   MinusCircleOutlined,
+  ArrowLeftOutlined,
 } from '@ant-design/icons';
 import CanvasCell from './CanvasCell';
 import CodeFloatWindow from './CodeFloatWindow';
 import CanvasToolbar from './CanvasToolbar';
+import CanvasComponentLibrary from './CanvasComponentLibrary';
 import { CANVAS_COMPONENTS, CANVAS_DEFAULTS } from './canvasDefaults';
 import { CANVAS_CONFIG_REGISTRY } from './canvasConfigRegistry';
 import { useAgent } from '@/components/agentPanel/AgentContext';
@@ -144,6 +146,7 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
   const [isPreview, setIsPreview] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [libraryCollapsed, setLibraryCollapsed] = useState(false);
   const isAgentAllowed = useIsAgentAllowed();
   const [configModal, setConfigModal] = useState<{
     id: string;
@@ -295,7 +298,7 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
   );
 
   // 添加组件
-  const addComponent = useCallback((type: string) => {
+  const addComponent = useCallback((type: string, customCode?: string) => {
     const { items, layout, onBothChange } = liveRef.current;
     const def = CANVAS_DEFAULTS[type];
     if (!def) return;
@@ -304,10 +307,17 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
     const h = def.layout.h;
     // 映射实际 componentType（BarChart/LineChart/PieChart → MultiChart）
     const actualType = COMPONENT_TYPE_MAP[type] ?? type;
+    // 优先使用 variant 代码（来自点击/拖拽指定的 variant），fallback 到默认 code
+    const baseCode = customCode
+      ? customCode.replace(
+          /testId="demo-([^"]+)"/g,
+          `testId="canvas-$1-${Date.now()}"`,
+        )
+      : def.code;
     onBothChange(
       [
         ...items,
-        { id, componentType: actualType, code: syncCodeHeight(def.code, h) },
+        { id, componentType: actualType, code: syncCodeHeight(baseCode, h) },
       ],
       [
         ...layout,
@@ -614,812 +624,883 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
         />
       )}
 
-      {/* ── 画布 ── */}
-      <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>
+      {/* ── 主体：左侧组件库 + 右侧画布 ── */}
+      <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
+        {!isPreview && isAgentAllowed && (
+          <CanvasComponentLibrary
+            collapsed={libraryCollapsed}
+            onToggleCollapsed={() => setLibraryCollapsed((v) => !v)}
+            onAdd={addComponent}
+          />
         )}
 
-        {/* 网格布局 */}
-        {mounted && (
-          <div style={{ maxWidth: 1600, margin: '0 auto', width: '100%' }}>
-            <GridLayout
-              className="layout"
-              layout={layout}
-              width={Math.min(containerWidth, 1600)}
+        {/* ── 画布 ── */}
+        <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={{
-                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,
-                ),
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                userSelect: 'none',
+                pointerEvents: 'none',
               }}
-              gridConfig={{
-                cols: COLS,
-                rowHeight: ROW_HEIGHT,
-                margin: [MARGIN_Y, MARGIN_Y] as const,
+            >
+              <style>{`
+                @keyframes canvas-arrow-nudge {
+                  0%, 100% { transform: translateX(0); }
+                  50% { transform: translateX(-8px); }
+                }
+                .canvas-empty-arrow {
+                  animation: canvas-arrow-nudge 1.4s ease-in-out infinite;
+                }
+              `}</style>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 16,
+                }}
+              >
+                {!isPreview && isAgentAllowed && !libraryCollapsed && (
+                  <ArrowLeftOutlined
+                    className="canvas-empty-arrow"
+                    style={{ fontSize: 28, color: '#4361ee' }}
+                  />
+                )}
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '24px 32px',
+                    background: '#fff',
+                    border: '1px dashed #c8d3ff',
+                    borderRadius: 12,
+                    boxShadow: '0 2px 12px rgba(67,97,238,0.06)',
+                  }}
+                >
+                  <PlusCircleOutlined
+                    style={{ fontSize: 36, color: '#4361ee' }}
+                  />
+                  <span
+                    style={{ fontSize: 15, color: '#333', fontWeight: 500 }}
+                  >
+                    {t('canvas.emptyHint')}
+                  </span>
+                  <span style={{ fontSize: 12, color: '#8c8c8c' }}>
+                    在左侧组件库 <b style={{ color: '#4361ee' }}>点击</b> 或{' '}
+                    <b style={{ color: '#4361ee' }}>拖拽</b> 任一组件
+                  </span>
+                </div>
+              </div>
+            </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 && isAgentAllowed,
+                  handle: '.canvas-item-drag',
+                }}
+                resizeConfig={{
+                  enabled: !isPreview && isAgentAllowed,
+                }}
+                dropConfig={
+                  isPreview || !isAgentAllowed ? undefined : dropConfig
+                }
+                onDrop={isPreview || !isAgentAllowed ? 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)
+                    }
+                    onDuplicate={() => duplicateComponent(item.id)}
+                    onDelete={() => removeComponent(item.id)}
+                    onMore={(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',
               }}
-              dragConfig={{
-                enabled: !isPreview && isAgentAllowed,
-                handle: '.canvas-item-drag',
+            >
+              {t('canvas.exitPreview')}
+            </Button>
+          )}
+
+          {/* 组件右键菜单 */}
+          {itemMenu && (
+            <Dropdown
+              menu={{
+                items: itemMenuItems,
+                style: { maxHeight: 'calc(100vh - 80px)', overflowY: 'auto' },
               }}
-              resizeConfig={{
-                enabled: !isPreview && isAgentAllowed,
+              open
+              trigger={['click']}
+              onOpenChange={(open) => {
+                if (!open) closeItemMenu();
               }}
-              dropConfig={isPreview || !isAgentAllowed ? undefined : dropConfig}
-              onDrop={isPreview || !isAgentAllowed ? 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,
-                  })}
+              <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}
-                  selected={selectedId === item.id}
-                  onClick={() => setSelectedId(item.id)}
-                  onDoubleClick={() => setEditingId(item.id)}
-                  onContextMenu={(e: React.MouseEvent) =>
-                    handleItemContextMenu(e, item.id)
-                  }
+                  onConfirm={(newCode) => {
+                    updateCode(configModal.id, newCode);
+                    setConfigModal(null);
+                  }}
+                  onCancel={() => setConfigModal(null)}
                 />
-              ))}
-            </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) closeItemMenu();
-            }}
-          >
-            <div
-              style={{
-                position: 'fixed',
-                left: itemMenu.x,
-                top: itemMenu.y,
-                width: 1,
-                height: 1,
-              }}
+              );
+            })()}
+
+          {/* 浮动代码窗口 */}
+          {!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)}
             />
-          </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 {
+          {/* 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(
-                  /(<NumCard)/,
-                  '$1\n  variant="withChart"',
+                  /variant\s*=\s*"withChart"/,
+                  'variant="default"',
                 );
-              }
-              if (!/chartData\s*=/.test(newCode)) {
-                const tpl = `chartData={[]}\n  chartTestId="canvas-numcard-chart"`;
                 newCode = newCode.replace(
-                  /([ \t]*)(testId\s*=)/,
-                  `$1${tpl}\n$1$2`,
+                  /\s*chartData\s*=\s*\{[\s\S]*?\]\s*\}/,
+                  '',
                 );
+                newCode = newCode.replace(/\s*chartTestId\s*=\s*"[^"]*"/, '');
               }
-            } 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)) {
+              // 处理比较数据
+              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(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1${compProp}\n$1$2`,
+                    /comparisons\s*=\s*\{\[[\s\S]*?\]\}/,
+                    compProp,
                   );
                 } else {
-                  newCode = newCode.replace(/\/>/, `  ${compProp}\n/>`);
+                  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]*?\]\}/,
+                  '',
+                );
               }
-            } else if (!wantComparisons && curHasComp) {
-              newCode = newCode.replace(
-                /\s*comparisons\s*=\s*\{\[[\s\S]*?\]\}/,
-                '',
-              );
-            }
 
-            updateCode(dataSourceModal.id, newCode);
-            setDataSourceModal(null);
+              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,
-              'canvas-sql-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  ]}`,
+              // 构造描述发给 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,
+                'canvas-sql-query',
               );
-            }
+            }}
+            onCancel={() => setDataSourceModal(null)}
+          />
 
-            // 处理分页
-            const curHasPagination = /pagination\s*=\s*\{\{/.test(newCode);
-            if (wantPagination && !curHasPagination) {
-              const paginationTpl = `pagination={{ current: 1, pageSize: ${pageSize}, total: 0 }}`;
-              if (/testId\s*=/.test(newCode)) {
+          {/* 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(
-                  /([ \t]*)(testId\s*=)/,
-                  `$1${paginationTpl}\n$1$2`,
+                  /columns\s*=\s*\{\[[\s\S]*?\]\}/,
+                  `columns={[\n${colsStr},\n  ]}`,
                 );
-              } 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,
-              'canvas-sql-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)) {
+              // 处理分页
+              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*=)/,
-                    `$1direction="horizontal"\n$1$2`,
+                    `$1${paginationTpl}\n$1$2`,
                   );
                 } else {
-                  newCode = newCode.replace(
-                    /\/>/,
-                    `  direction="horizontal"\n/>`,
-                  );
+                  newCode = newCode.replace(/\/>/, `  ${paginationTpl}\n/>`);
                 }
-              } else {
+              } else if (wantPagination && curHasPagination) {
+                // 更新已有的 pageSize
+                newCode = newCode.replace(
+                  /pageSize\s*:\s*\d+/,
+                  `pageSize: ${pageSize}`,
+                );
+              } else if (!wantPagination && curHasPagination) {
                 newCode = newCode.replace(
-                  /direction\s*=\s*"[^"]*"/,
-                  'direction="horizontal"',
+                  /\s*pagination\s*=\s*\{\{[\s\S]*?\}\}/,
+                  '',
                 );
+                newCode = newCode.replace(/\s*entityName\s*=\s*"[^"]*"/, '');
               }
-            } 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)) {
+              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,
+                'canvas-sql-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(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1showGrid={false}\n$1$2`,
+                    /direction\s*=\s*"[^"]*"/,
+                    'direction="horizontal"',
                   );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  showGrid={false}\n/>`);
                 }
+              } else {
+                // vertical 是默认值，移除 direction prop
+                newCode = newCode.replace(/\s*direction\s*=\s*"[^"]*"/, '');
               }
-            } 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/>`);
+              // 修改 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\}/, '');
               }
-            } 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,
-              'canvas-sql-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/>`);
+              // 修改 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(
-                  /legendShow\s*=\s*\{true\}/,
-                  'legendShow={false}',
-                );
+                newCode = newCode.replace(/\s*showLabel\s*=\s*\{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)) {
+              // 更新画布
+              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,
+                'canvas-sql-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(
-                    /([ \t]*)(testId\s*=)/,
-                    `$1showGrid={false}\n$1$2`,
+                    /legendShow\s*=\s*\{true\}/,
+                    'legendShow={false}',
                   );
-                } else {
-                  newCode = newCode.replace(/\/>/, `  showGrid={false}\n/>`);
                 }
+              } else {
+                newCode = newCode.replace(/\s*legendShow\s*=\s*\{false\}/, '');
               }
-            } 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/>`);
+              // ── 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\}/, '');
               }
-            } 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/>`);
+              // ── 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\}/, '');
               }
-            } 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/>`);
+              // ── 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\}/, '');
               }
-            } 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/>`);
+              // ── 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\}/, '');
               }
-            } 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/>`);
+              // ── 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\}/, '');
               }
-            } 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/>`);
+              // ── 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\}/, '');
               }
-            } 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,
-              'canvas-sql-query',
-            );
-          }}
-          onCancel={() => setDataSourceModal(null)}
-        />
+              // ── 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*=)/, '');
+              }
 
-        {/* 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,
-              'canvas-sql-query',
-            );
-          }}
-          onCancel={() => setDataSourceModal(null)}
-        />
+              // 更新画布
+              updateCode(dataSourceModal.id, newCode);
+              setDataSourceModal(null);
 
-        {/* MultiChart 修改数据来源 Modal */}
-        <MultiChartDataSourceModal
-          open={
-            !!dataSourceModal && dataSourceModal.componentType === 'MultiChart'
-          }
-          code={dataSourceModal?.code ?? ''}
-          onConfirm={({
-            dataDescription,
-            charts,
-            chartConfigs,
-            code: origCode,
-          }) => {
-            if (!dataSourceModal) return;
-            let newCode = origCode;
-
-            // 更新 charts prop
-            const chartsStr = `charts={${JSON.stringify(charts)}}`;
-            if (/charts=\{.*?\}/s.test(newCode)) {
-              newCode = newCode.replace(/charts=\{.*?\}/s, chartsStr);
-            } else if (/testId\s*=/.test(newCode)) {
-              newCode = newCode.replace(
-                /([ \t]*)(testId\s*=)/,
-                `$1${chartsStr}\n$1$2`,
+              // 构造 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,
+                'canvas-sql-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,
+                'canvas-sql-query',
+              );
+            }}
+            onCancel={() => setDataSourceModal(null)}
+          />
 
-            // 更新 chartConfig prop
-            const configObj: Record<string, Record<string, any>> = {};
-            for (const [chartKey, config] of Object.entries(chartConfigs)) {
-              const nonDefaults: Record<string, any> = {};
-              for (const [k, v] of Object.entries(config)) {
-                // 只存非默认值的配置
-                if (
-                  k === 'showGrid' ||
-                  k === 'showLabel' ||
-                  k === 'legendShow'
-                ) {
-                  if (!v) nonDefaults[k] = false;
-                } else {
-                  if (v) nonDefaults[k] = true;
-                }
-              }
-              if (Object.keys(nonDefaults).length > 0) {
-                configObj[chartKey] = nonDefaults;
-              }
+          {/* MultiChart 修改数据来源 Modal */}
+          <MultiChartDataSourceModal
+            open={
+              !!dataSourceModal &&
+              dataSourceModal.componentType === 'MultiChart'
             }
-            if (Object.keys(configObj).length > 0) {
-              const configStr = `chartConfig={${JSON.stringify(configObj)}}`;
-              if (/chartConfig=\{[\s\S]*?\}\s*(?=\w+=|\/?>)/.test(newCode)) {
-                newCode = newCode.replace(
-                  /chartConfig=\{[\s\S]*?\}\s*(?=\w+=|\/?>)/,
-                  configStr + '\n  ',
-                );
+            code={dataSourceModal?.code ?? ''}
+            onConfirm={({
+              dataDescription,
+              charts,
+              chartConfigs,
+              code: origCode,
+            }) => {
+              if (!dataSourceModal) return;
+              let newCode = origCode;
+
+              // 更新 charts prop
+              const chartsStr = `charts={${JSON.stringify(charts)}}`;
+              if (/charts=\{.*?\}/s.test(newCode)) {
+                newCode = newCode.replace(/charts=\{.*?\}/s, chartsStr);
               } else if (/testId\s*=/.test(newCode)) {
                 newCode = newCode.replace(
                   /([ \t]*)(testId\s*=)/,
-                  `$1${configStr}\n$1$2`,
+                  `$1${chartsStr}\n$1$2`,
                 );
               }
-            }
 
-            updateCode(dataSourceModal.id, newCode);
-            setDataSourceModal(null);
-
-            // 构造 prompt 发给 agent
-            const parts: string[] = [];
-            if (dataDescription) parts.push(dataDescription);
-            parts.push(`复合图表包含：${charts.join('、')}`);
-            // 附加各图表配置描述（与单独图表 DataSource modal 输出一致）
-            for (const [chartKey, config] of Object.entries(chartConfigs)) {
-              const flags: string[] = [];
-              for (const [k, v] of Object.entries(config)) {
-                if (v === false || v === '' || v === undefined || v === null)
-                  continue;
-                // select/slider 类型：输出具体值
-                if (typeof v === 'string') {
-                  if (k === 'variant' && v === 'groupBar') flags.push('多系列');
-                  else if (k === 'variant' && v === 'bar') flags.push('单系列');
-                  else if (k === 'variant' && v === 'ring')
-                    flags.push('环形图');
-                  else if (k === 'direction' && v === 'horizontal')
-                    flags.push('横向');
-                  else if (k === 'direction' && v === 'vertical')
-                    flags.push('纵向');
-                } else if (typeof v === 'number') {
-                  if (k === 'dimensionCount') flags.push(`${v}个维度`);
-                } else if (v === true) {
-                  // boolean 类型：输出中文描述
-                  if (k === 'stacked') flags.push('堆叠');
-                  else if (k === 'percent') flags.push('百分比');
-                  else if (k === 'area') flags.push('面积填充');
-                  else if (k === 'smooth') flags.push('拟合曲线');
-                  else if (k === 'showDots') flags.push('显示坐标点');
-                  else if (k === 'showLabel') flags.push('显示坐标点数据');
-                  // 默认开启的项目只在关闭时才有意义，开启时不输出
+              // 更新 chartConfig prop
+              const configObj: Record<string, Record<string, any>> = {};
+              for (const [chartKey, config] of Object.entries(chartConfigs)) {
+                const nonDefaults: Record<string, any> = {};
+                for (const [k, v] of Object.entries(config)) {
+                  // 只存非默认值的配置
+                  if (
+                    k === 'showGrid' ||
+                    k === 'showLabel' ||
+                    k === 'legendShow'
+                  ) {
+                    if (!v) nonDefaults[k] = false;
+                  } else {
+                    if (v) nonDefaults[k] = true;
+                  }
+                }
+                if (Object.keys(nonDefaults).length > 0) {
+                  configObj[chartKey] = nonDefaults;
                 }
               }
-              // 默认开启的项目关闭时输出
-              if (config.showGrid === false) flags.push('隐藏网格线');
-              if (config.showAxis === false) flags.push('隐藏坐标轴');
-              if (config.legendShow === false) flags.push('隐藏图例');
-              if (config.showLabel === false) flags.push('隐藏数据标签');
-              if (flags.length > 0) {
-                parts.push(`${chartKey}: ${flags.join(', ')}`);
+              if (Object.keys(configObj).length > 0) {
+                const configStr = `chartConfig={${JSON.stringify(configObj)}}`;
+                if (/chartConfig=\{[\s\S]*?\}\s*(?=\w+=|\/?>)/.test(newCode)) {
+                  newCode = newCode.replace(
+                    /chartConfig=\{[\s\S]*?\}\s*(?=\w+=|\/?>)/,
+                    configStr + '\n  ',
+                  );
+                } else if (/testId\s*=/.test(newCode)) {
+                  newCode = newCode.replace(
+                    /([ \t]*)(testId\s*=)/,
+                    `$1${configStr}\n$1$2`,
+                  );
+                }
               }
-            }
-            parts.push(
-              '请返回 MultiChartData 格式：{ xData: string[], series: [{ name, data }] }',
-            );
-            const userPrompt = parts.join('。');
-            triggerDataSourceAgent(
-              dataSourceModal.id,
-              dataSourceModal.componentType,
-              newCode,
-              userPrompt,
-              'canvas-sql-query',
-            );
-          }}
-          onCancel={() => setDataSourceModal(null)}
-        />
 
-        {/* MultiChart 切到 table 时的列配置 Modal（virtualCode 桥接） */}
-        {virtualTableConfigModal && (
-          <TableConfigModal
-            code={virtualTableConfigModal.virtualCode}
-            onConfirm={(newVirtualCode) => {
-              virtualTableConfigModal.onConfirm(newVirtualCode);
-              setVirtualTableConfigModal(null);
+              updateCode(dataSourceModal.id, newCode);
+              setDataSourceModal(null);
+
+              // 构造 prompt 发给 agent
+              const parts: string[] = [];
+              if (dataDescription) parts.push(dataDescription);
+              parts.push(`复合图表包含：${charts.join('、')}`);
+              // 附加各图表配置描述（与单独图表 DataSource modal 输出一致）
+              for (const [chartKey, config] of Object.entries(chartConfigs)) {
+                const flags: string[] = [];
+                for (const [k, v] of Object.entries(config)) {
+                  if (v === false || v === '' || v === undefined || v === null)
+                    continue;
+                  // select/slider 类型：输出具体值
+                  if (typeof v === 'string') {
+                    if (k === 'variant' && v === 'groupBar')
+                      flags.push('多系列');
+                    else if (k === 'variant' && v === 'bar')
+                      flags.push('单系列');
+                    else if (k === 'variant' && v === 'ring')
+                      flags.push('环形图');
+                    else if (k === 'direction' && v === 'horizontal')
+                      flags.push('横向');
+                    else if (k === 'direction' && v === 'vertical')
+                      flags.push('纵向');
+                  } else if (typeof v === 'number') {
+                    if (k === 'dimensionCount') flags.push(`${v}个维度`);
+                  } else if (v === true) {
+                    // boolean 类型：输出中文描述
+                    if (k === 'stacked') flags.push('堆叠');
+                    else if (k === 'percent') flags.push('百分比');
+                    else if (k === 'area') flags.push('面积填充');
+                    else if (k === 'smooth') flags.push('拟合曲线');
+                    else if (k === 'showDots') flags.push('显示坐标点');
+                    else if (k === 'showLabel') flags.push('显示坐标点数据');
+                    // 默认开启的项目只在关闭时才有意义，开启时不输出
+                  }
+                }
+                // 默认开启的项目关闭时输出
+                if (config.showGrid === false) flags.push('隐藏网格线');
+                if (config.showAxis === false) flags.push('隐藏坐标轴');
+                if (config.legendShow === false) flags.push('隐藏图例');
+                if (config.showLabel === false) flags.push('隐藏数据标签');
+                if (flags.length > 0) {
+                  parts.push(`${chartKey}: ${flags.join(', ')}`);
+                }
+              }
+              parts.push(
+                '请返回 MultiChartData 格式：{ xData: string[], series: [{ name, data }] }',
+              );
+              const userPrompt = parts.join('。');
+              triggerDataSourceAgent(
+                dataSourceModal.id,
+                dataSourceModal.componentType,
+                newCode,
+                userPrompt,
+                'canvas-sql-query',
+              );
             }}
-            onCancel={() => setVirtualTableConfigModal(null)}
+            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)}
-        />
-        <CanvasAiModal
-          open={aiModalOpen}
-          onClose={() => setAiModalOpen(false)}
-          onSubmit={handleAiSubmit}
-        />
+          {/* MultiChart 切到 table 时的列配置 Modal（virtualCode 桥接） */}
+          {virtualTableConfigModal && (
+            <TableConfigModal
+              code={virtualTableConfigModal.virtualCode}
+              onConfirm={(newVirtualCode) => {
+                virtualTableConfigModal.onConfirm(newVirtualCode);
+                setVirtualTableConfigModal(null);
+              }}
+              onCancel={() => setVirtualTableConfigModal(null)}
+            />
+          )}
+
+          {/* ── 通用文本输入弹窗（如修改标题） ── */}
+          <PromptModal
+            open={!!promptModal}
+            label={promptModal?.label ?? ''}
+            placeholder={promptModal?.placeholder}
+            defaultValue={promptModal?.defaultValue ?? ''}
+            onConfirm={(value) => {
+              promptModal?.onConfirm(value);
+              setPromptModal(null);
+            }}
+            onCancel={() => setPromptModal(null)}
+          />
+          <CanvasAiModal
+            open={aiModalOpen}
+            onClose={() => setAiModalOpen(false)}
+            onSubmit={handleAiSubmit}
+          />
+        </div>
       </div>
     </div>
   );