aldehyde 0.2.481 → 0.2.482

package/src/aldehyde/draw-canvas-edit/components/render/components/index.less

@@ -0,0 +1,61 @@
+// 工位卡片
+.workstation-card {
+    overflow: hidden;
+
+    .card-list,
+    .ant-card {
+        margin: 0;
+    }
+
+    .ant-card {
+        height: 100%;
+
+        .ant-card-body {
+            padding: 0 !important;
+        }
+    }
+
+    .card-list-item-head {
+        margin: 12px 0 8px;
+    }
+
+    .card-list-item-head-title {
+        .card-list-item-head-primary {
+            min-height: 0px !important;
+
+            .primary-column {
+                font-size: 16px !important;
+            }
+        }
+
+        .card-list-item-head-second {
+            min-height: 0px !important;
+            margin-top: 0px !important;
+
+            .second-column {
+                font-size: 12px !important;
+                opacity: 0.8;
+            }
+        }
+    }
+
+    .card-list-item-content {
+        padding: 0 12px;
+
+        .card-list-item-main {
+            background-color: transparent;
+            margin-bottom: 8px;
+        }
+
+        .card-show-cols {
+            padding: 0;
+            background-color: transparent;
+        }
+    }
+
+    .card-list-item-footer {
+        text-align: right;
+        padding: 8px;
+        border-top: 1px solid #e8e8e8;
+    }
+}

package/src/aldehyde/draw-canvas-edit/components/render/components/workstation-component.tsx

@@ -1,32 +1,147 @@
 import React from "react";
+import { createRoot } from 'react-dom/client';
 import Konva from 'konva';
+import { Card, ConfigProvider } from "antd";
 import { Render } from '../index';
 import { AssetSettings } from '../types';
-import HcserviceV3 from "../../../../tmpl/hcservice-v3";
+import LtmplTable from "../../../../module/ltmpl-table";
+import { antdLangMp } from "../../../../index";
+import "./index.less";
 
-export interface WorkstationSettings extends AssetSettings {
-  workstationNumber: string; // 工位编号
+// 详情卡片
+const DetailCard = (props: { workstationNumber: string, pageId: string, locale: string }) => {
+  const { pageId, workstationNumber, locale } = props;
+
+  return <ConfigProvider locale={antdLangMp[locale]}>
+    <Card
+      className="workstation-card"
+      styles={{
+        body: { padding: 0 },
+        root: { width: 200, boxShadow: '0 2px 8px rgba(0,0,0,0.2)', border: "none" }
+      }}
+    >
+      <LtmplTable
+        sourceId={pageId}
+        funcMode="simple"
+        defShowType="cardList"
+        defaultCriteriaValue={{ thirdCriterion: workstationNumber }}
+        showPagination={false}
+        showAggregates={false}
+        defRowCardCount={1}
+      />
+    </Card >
+  </ConfigProvider >;
 }
 
-// 渲染工位详情卡片
-const renderCard = async (props: { node: Konva.Group, settings: WorkstationSettings, pointerPos: { x: number, y: number } }) => {
-  const { node, settings, pointerPos } = props;
-  const { pageId, pageConfig, workstationNumber } = settings;
-  if (!node || !pageId || !workstationNumber || !pointerPos) return;
-  const pageInfo = { pageNo: 1, pageSize: 1, thirdCriterion: workstationNumber };
-  const queryKey = await HcserviceV3.requestLtmplQueryKey(null, pageId, pageInfo);
-  const { entities } = await HcserviceV3.requestQueryData(null, queryKey.key, pageInfo);
-  console.log("entitiesentities", entities);
-  const renderCard = <div></div>;
+export interface WorkstationSettings extends AssetSettings {
+  workstationNumber: string; // 工位编号
 }
 
 export class WorkstationComponent {
   private render: Render;
+  // 卡片挂载管理 
+  private cardRoot: ReturnType<typeof createRoot> | null = null;
+  private cardWrapper: HTMLDivElement | null = null;
+  private currentNodeId: string | null = null; // 当前打开的卡片对应的工位标识
 
   constructor(render: Render) {
     this.render = render;
   }
 
+  // 关闭并销毁卡片，清理所有监听器
+  private closeCard = () => {
+    const stage = this.render?.stage;
+    if (stage) {  // 清理 stage 事件监听
+      stage.off('click tap');
+    }
+    if (this.cardRoot) { // 销毁 React 根节点
+      this.cardRoot.unmount();
+      this.cardRoot = null;
+    }
+    if (this.cardWrapper) { // 移除 DOM 节点
+      this.cardWrapper.remove();
+      this.cardWrapper = null;
+    }
+    this.currentNodeId = null;
+  };
+
+  // 根据容器边界重新计算卡片位置，避免被遮挡
+  private adjustCardPosition = (pointerPos: { x: number; y: number }) => {
+    if (!this.cardWrapper || !this.render.stage) return;
+    const container = this.render.stage.getContent();
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+    const cardWidth = this.cardWrapper.offsetWidth;
+    const cardHeight = this.cardWrapper.offsetHeight;
+    if (!cardWidth || !cardHeight) return;
+    const padding = 8; // 距离容器边缘的最小间距
+    let translateX = -(cardWidth / 2);  // 默认水平居中于指针
+    let translateY = -(cardHeight + padding); // 默认显示在指针上方
+    // 水平边界处理：卡片左侧超出
+    const cardLeft = pointerPos.x + translateX;
+    if (cardLeft < padding) {
+      translateX = padding - pointerPos.x;
+    }
+    // 水平边界处理：卡片右侧超出
+    const cardRight = pointerPos.x + translateX + cardWidth;
+    if (cardRight > containerWidth - padding) {
+      translateX = containerWidth - padding - cardWidth - pointerPos.x;
+    }
+    // 垂直边界处理：卡片上方超出 → 尝试翻转到指针下方
+    const cardTop = pointerPos.y + translateY;
+    if (cardTop < padding) {
+      // 检查下方空间是否足够
+      const cardBottomWhenBelow = pointerPos.y + padding + cardHeight;
+      if (cardBottomWhenBelow <= containerHeight - padding) {
+        translateY = padding; // 翻转到指针下方
+      } else {
+        // 上下空间都不足，强制贴住容器上边缘
+        translateY = padding - pointerPos.y;
+      }
+    } else {
+      // 即使上方不超出，也检查下方是否被容器底部裁切
+      const cardBottom = cardTop + cardHeight;
+      if (cardBottom > containerHeight - padding) {
+        translateY = padding; // 翻转到下方
+      }
+    }
+    this.cardWrapper.style.left = `${pointerPos.x}px`;
+    this.cardWrapper.style.top = `${pointerPos.y}px`;
+    this.cardWrapper.style.transform = `translate(${translateX}px, ${translateY}px)`;
+  };
+
+  // 渲染工位详情卡片
+  private renderCard = async (props: { node: Konva.Group, settings: WorkstationSettings, pointerPos: { x: number, y: number } }) => {
+    const { node, settings, pointerPos } = props;
+    const { pageId, workstationNumber } = settings;
+    if (!node || !pageId || !workstationNumber || !pointerPos) return;
+    // 如果同一个工位的卡片已经渲染，不再重复渲染
+    const nodeId = node.id();
+    if (this.currentNodeId === nodeId) return;
+    this.closeCard(); // 先关闭已有卡片（不同工位时）
+    const container = this.render.stage.getContent();
+    this.cardWrapper = document.createElement('div');
+    this.cardWrapper.style.cssText = `
+      position:absolute;
+      left:${pointerPos.x}px;
+      top:${pointerPos.y}px;
+      transform:translate(-50%, calc(-100% - 8px));
+      z-index:1000;
+    `;
+    // 用原生监听器在 wrapper 层截断事件，阻止冒泡到 container（Konva 监听层）
+    // this.cardWrapper.addEventListener('click', (e) => e.stopImmediatePropagation());
+    this.cardWrapper.addEventListener('mousedown', (e) => e.stopImmediatePropagation());
+    container.appendChild(this.cardWrapper); // 挂载到 container 下面
+    this.cardRoot = createRoot(this.cardWrapper);
+    this.cardRoot.render(<DetailCard workstationNumber={workstationNumber} pageId={pageId} locale={this.render?.config?.locale} />);
+    this.currentNodeId = nodeId; // 记录当前打开的工位
+    this.render.stage.on('click tap', this.closeCard); // 点击画布外关闭卡片
+    this.render.stage.on('wheel', this.closeCard); // 缩放画布关闭卡片
+    this.render.stage.on('dragmove', this.closeCard); // 平移画布关闭卡片
+    // 渲染完成后根据容器边界重新校准卡片位置，避免被遮挡
+    requestAnimationFrame(() => this.adjustCardPosition(pointerPos));
+  };
+
   /**
    * 创建工位组件
    */
@@ -97,8 +212,9 @@ export class WorkstationComponent {
   componentOnClick(node: Konva.Group, settings: WorkstationSettings) {
     node.off("click");
     node.on('click', (e) => {
-      const pointerPos = e.target.getStage().getPointerPosition();
-      renderCard({ node, settings, pointerPos })
+      e.cancelBubble = true; // 阻止事件向上冒泡到 Stage 
+      const pointerPos = e.target.getStage()?.getPointerPosition();
+      this.renderCard({ node, settings, pointerPos });
     });
   }
 }

package/src/aldehyde/draw-canvas-edit/components/render/handlers/selection-handlers.ts

@@ -141,16 +141,28 @@ export class SelectionHandlers implements Handler {
           } else if (parent instanceof Konva.Transformer) {
             // transformer 点击事件交给 transformer 自己的 handler
           } else if (parent instanceof Konva.Group) {
-            // （判断 ctrlKey 为了排查 mac 拖动快捷键）
-            if (e.evt.button === MouseButton["左键"] && !e.evt.ctrlKey) {
+            if (e.evt.button === MouseButton["左键"]) {
               if (!this.render.ignore(parent) && !this.render.ignoreDraw(e.target)) {
                 // 锁定节点：在 select 之前先禁用 Konva 内置拖拽，防止 race condition
                 if (parent.attrs.locked) {
                   parent.draggable(false);
                 }
-                if (e.evt.ctrlKey || e.evt.metaKey) { // 新增多选
-                  this.render.selectionTool.select([...this.render.selectionTool.selectingNodes, parent]);
-                } else {  // 单选
+                if (e.evt.ctrlKey || e.evt.metaKey) { // Ctrl+点选：切换选择
+                  const idx = this.render.selectionTool.selectingNodes.findIndex((n) => n.id() === parent.id());
+                  if (idx >= 0) {
+                    // 已选中则移除
+                    const nodes = [...this.render.selectionTool.selectingNodes];
+                    nodes.splice(idx, 1);
+                    if (nodes.length > 0) {
+                      this.render.selectionTool.select(nodes);
+                    } else {
+                      this.render.selectionTool.selectingClear();
+                    }
+                  } else {
+                    // 未选中则添加
+                    this.render.selectionTool.select([...this.render.selectionTool.selectingNodes, parent]);
+                  }
+                } else {  // 普通点击：单选
                   this.render.selectionTool.select([parent]);
                   // 单选时无法通过 transformer 获取拖动初始位置 transformerMousedownPos
                   // 此时直接取目标的 getClientRect 位置

package/src/aldehyde/draw-canvas-edit/components/render/index.ts

@@ -540,7 +540,11 @@ export class Render {
 
   // 获取素材设置
   getAssetSettings(asset?: Konva.Node): AssetSettings {
-    const base = asset?.attrs.assetSettings ?? { ...Render.AssetSettingsDefault };
+    if (!asset) {
+      return { ...Render.AssetSettingsDefault };
+    }
+    const attrs = asset.attrs;
+    const base = attrs.assetSettings ?? { ...Render.AssetSettingsDefault };
     return {
       // 特定
       ...base,
@@ -554,9 +558,11 @@ export class Render {
       x: parseFloat((asset?.position().x ?? 0).toFixed(1)),
       y: parseFloat((asset?.position().y ?? 0).toFixed(1)),
       rotation: parseFloat((asset?.rotation() ?? 0).toFixed(1)),
+      width: parseFloat(((attrs.width ?? 0) * (asset?.scaleX?.() ?? 1)).toFixed(1)),
+      height: parseFloat(((attrs.height ?? 0) * (asset?.scaleY?.() ?? 1)).toFixed(1)),
       tension:
-        asset?.attrs.assetType === AssetType.Graph &&
-          asset?.attrs.graphType === "Curve"
+        attrs.assetType === AssetType.Graph &&
+          attrs.graphType === "Curve"
           ? base.tension
           : undefined
     };
@@ -702,6 +708,13 @@ export class Render {
         }
       }
     }
+    // 通过 scale 实现视觉尺寸变更（设置 Group 的 width/height 只影响裁剪，不会缩放内部子元素）
+    if (settings.width || settings.height) {
+      const baseWidth = asset.width() || 1;
+      const baseHeight = asset.height() || 1;
+      asset.scaleX(settings.width / baseWidth);
+      asset.scaleY(settings.height / baseHeight);
+    }
     asset.setAttr('assetSettings', settings);
     if (update) {
       // 更新历史

package/src/aldehyde/draw-canvas-edit/components/render/tools/asset-tool.ts

@@ -6,14 +6,23 @@ const gifler = (window as any).gifler;
 
 export class AssetTool {
   private render: Render;
+  // 同一个 svgXML 内容只转一次 Blob，避免重复创建 Blob URL
+  private svgBlobCache: Map<string, string> = new Map();
+  // 同地址 svg 只 fetch 一次，避免重复网络请求
+  private svgRawCache: Map<string, string> = new Map();
+
   constructor(render: Render) {
     this.render = render;
   }
 
-  // 加载 svg xml
-  async loadSvgXML(svgXML: string) {
-    const blob = new Blob([svgXML], { type: 'image/svg+xml' });
-    const url = URL.createObjectURL(blob);
+  // 加载 svg xml（带 Blob 缓存）
+  loadSvgXML(svgXML: string) {
+    let url = this.svgBlobCache.get(svgXML);
+    if (!url) {
+      const blob = new Blob([svgXML], { type: 'image/svg+xml' });
+      url = URL.createObjectURL(blob);
+      this.svgBlobCache.set(svgXML, url);
+    }
     return new Promise<Konva.Image>((resolve) => {
       Konva.Image.fromURL(url, (imageNode) => {
         imageNode.setAttrs({ svgXML } as any);
@@ -22,10 +31,15 @@ export class AssetTool {
     });
   }
 
-  // 加载 svg
+  // 加载 svg（带 fetch 缓存 + Blob 缓存）
   async loadSvg(src: string) {
-    const svgXML = await (await fetch(src)).text();
-    return this.loadSvgXML(this.render.setSvgXMLSettings(svgXML, this.render.getAssetSettings()));
+    let rawSvg = this.svgRawCache.get(src);
+    if (!rawSvg) {
+      rawSvg = await (await fetch(src)).text();
+      this.svgRawCache.set(src, rawSvg);
+    }
+    const svgXML = this.render.setSvgXMLSettings(rawSvg, this.render.getAssetSettings());
+    return this.loadSvgXML(svgXML);
   }
 
   // 加载 gif

package/src/aldehyde/draw-canvas-edit/components/render/tools/component-factory.ts

@@ -31,7 +31,7 @@ export class ComponentFactory {
    */
   async createImageComponent(options: CreateImageComponentOptions) {
     const { src, type, componentType } = options;
-    const { pageHeight, pageWidth } = this.render.getPageSettings()
+    const { pageHeight, pageWidth } = this.render.getPageSettings();
     const target = await this.render.assetTool[{ svg: "loadSvg", gif: "loadGif" }[type] || "loadImg"](handleImgUrl(src));
     let width = target.width();
     let height = target.height();

package/src/aldehyde/draw-canvas-edit/components/render/tools/import-export-tool.ts

@@ -99,34 +99,46 @@ export class ImportExportTool {
     });
   }
 
-  // 恢复图片（用于导入）
-  async restoreImage(nodes: Konva.Node[] = []) {
-    for (const node of nodes) {
+  // 汇总图片组件
+  getImgNodes(nodes: Konva.Node[] = []) {
+    const temNodes = nodes.map(node => {
       if (node instanceof Konva.Group) {
-        // 递归
-        await this.restoreImage(node.getChildren());
+        return this.getImgNodes(node.getChildren());
       } else if (node instanceof Konva.Image) {
+        return node;
+      }
+    }).flat(Infinity).filter(Boolean);
+    return temNodes;
+  }
+
+  // 恢复图片（用于导入）
+  async restoreImage(nodes: Konva.Node[] = []) {
+    const imgNodes = this.getImgNodes(nodes);
+    const tasks = imgNodes.map(node => {
+      // 处理图片
+      if (node.attrs.svgXML) { // svg 素材
+        return this.render.assetTool.loadSvgXML(node.attrs.svgXML);
+      } else if (node.attrs.gif) {  // gif 素材
+        return this.render.assetTool.loadGif(node.attrs.gif);
+      } else if (node.attrs.src) { // 其他图片素材
+        return this.loadImage(node.attrs.src);
+      }
+    });
+    Promise.all(tasks).then(res => {
+      res.forEach((imageNode, index) => {
+        const node = imgNodes[index];
         // 处理图片
-        if (node.attrs.svgXML) { // svg 素材
-          const blob = new Blob([node.attrs.svgXML], { type: 'image/svg+xml' });
-          const url = URL.createObjectURL(blob);
-          const image = await this.loadImage(url);
-          if (image) { // 设置图片
-            node.image(image);
-          }
-        } else if (node.attrs.gif) {  // gif 素材
-          const imageNode = await this.render.assetTool.loadGif(node.attrs.gif);
-          if (imageNode) {
+        if (imageNode && node) {
+          if (node.attrs.svgXML) { // svg 素材
             node.image(imageNode.image());
-          }
-        } else if (node.attrs.src) { // 其他图片素材
-          const image = await this.loadImage(node.attrs.src);
-          if (image) {
-            node.image(image);
+          } else if (node.attrs.gif) {  // gif 素材
+            node.image(imageNode.image());
+          } else if (node.attrs.src) { // 其他图片素材
+            node.image(imageNode);
           }
         }
-      }
-    }
+      })
+    });
   }
 
   // 恢复图形

package/src/aldehyde/draw-canvas-edit/components/render/types.ts

@@ -15,6 +15,7 @@ export interface RenderConfig {
   attractNode?: boolean;
   readonly?: boolean;
   themeToken?: { [key: string]: any };
+  locale?: string; // 语言
 }
 
 export type RenderEvents = {
@@ -274,6 +275,8 @@ export interface AssetSettings {
   text: string;
   x: number;
   y: number;
+  width?: number;
+  height?: number;
   rotation: number;
   tension: number;
   dataSource?: string;

package/src/aldehyde/draw-canvas-edit/components/setting-form/index.tsx

@@ -27,6 +27,17 @@ const positionSetting = {
     ]
 };
 
+// 尺寸配置
+const sizeSetting = {
+    title: "宽高",
+    isGroup: true,
+    fields: [
+        { title: "宽", noStyle: true, id: "width", extControlType: "float", colSpan: 1, min: 0, style: { width: "100%" } },
+        { title: "高", noStyle: true, id: "height", extControlType: "float", colSpan: 1, min: 0, style: { width: "100%" } }
+    ]
+};
+
+
 // 旋转角度配置
 const rotationSetting = { fields: [{ title: "旋转角度", id: "rotation", extControlType: "int", min: -3600, max: 3600, style: { width: "100%" } }] };
 
@@ -39,6 +50,7 @@ const baseGraphSetting = [
             { title: "填充颜色", id: "fill", extControlType: "color", style: { width: "100%" } },
         ]
     },
+    sizeSetting,
     positionSetting,
     rotationSetting
 ];

package/src/aldehyde/draw-canvas-edit/index.tsx

@@ -9,6 +9,7 @@ import MainHeader from './components/main-header';
 import AssetBar from './components/asset-bar';
 import SettingForm from "./components/setting-form";
 import type Konva from 'konva';
+import { useLocale } from "../index";
 import './index.less';
 
 interface Props {
@@ -33,6 +34,7 @@ const Index = (props: Props) => {
     const assetCurrentRef = useRef<Konva.Node>(null); // 当前选中组件Ref
     const [loading, setLoading] = useState<boolean>(false);
     const { token: themeToken } = theme.useToken();
+    const { getLocale } = useLocale();
 
     // 获取视图数据
     const getViewData = async () => {
@@ -48,10 +50,10 @@ const Index = (props: Props) => {
         const decompressedBuffer = gunzipSync(temByteArray);
         // 2. 将 Uint8Array 转换回普通字符串
         const originalData = strFromU8(decompressedBuffer);
-        setLoading(false);
         // 重置画面数据
         await renderRef.current.importExportTool.restore(originalData as string);
         await renderRef.current.positionTool.positionFit(); // 画布默认自适应居中
+        setLoading(false);
     }
 
     useEffect(() => {
@@ -63,12 +65,13 @@ const Index = (props: Props) => {
     // 初始化渲染器
     const initRender = useCallback((width: number, height: number) => {
         if (renderRef.current || !stageRef.current) return;
+        const locale = getLocale();
         const render = new Render(stageRef.current, {
             width, height,
             showBg: true, showRuler: true, showRefLine: true,
             showPreview: false, showContextmenu: true,
             attractResize: true, attractBg: true, attractNode: true,
-            themeToken
+            themeToken, locale
         });
         renderRef.current = render;
         // 初始化设置

package/src/aldehyde/draw-canvas-view/index.less

@@ -33,9 +33,16 @@
         }
     }
 
+    .ant-spin,
+    .ant-spin-container {
+        width: 100%;
+        height: 100%;
+    }
+
     // 画布区域
     .draw-viewer-content {
         width: 100%;
+        height: 100%;
         flex-grow: 1;
         background-color: var(--ant-layout-body-bg);
         position: relative;

package/src/aldehyde/draw-canvas-view/view.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useCallback } from 'react';
-import { Space, Button } from "antd";
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import { Space, Button, Spin } from "antd";
 import { ExpandOutlined } from '@ant-design/icons';
 import chunk from "lodash/chunk";
 import HcserviceV3 from "../tmpl/hcservice-v3";
 import WebSocket from "../tmpl/web-socket";
 import { Render } from '../draw-canvas-edit/components/render';
-import { LtmplConfig, LtmplConfigRes } from "../tmpl/interface";
+import { useLocale } from "../index";
 import './index.less';
 
 // 数据源请求结果
@@ -35,12 +35,14 @@ const Index = (props: ViewerProps) => {
   const observerRef = useRef<ResizeObserver | null>(null);
   const wsRef = useRef(undefined); // 实时数据websocket连接
   const subscribeRef = useRef(undefined); // 实时数据订阅
-  const dataPageConfigRef = useRef<{ [key: string]: LtmplConfig }>({}); // 数据页面配置
+  const [loading, setLoading] = useState<boolean>(false);
+  const { getLocale } = useLocale();
 
   // 初始化渲染器（只读模式）
   const initRender = useCallback(
     (width: number, height: number) => {
       if (renderRef.current || !stageRef.current) return;
+      const locale = getLocale();
       const render = new Render(stageRef.current, {
         width,
         height,
@@ -49,7 +51,8 @@ const Index = (props: ViewerProps) => {
         showPreview: false, // 不需要预览框
         showContextmenu: false, // 不需要右键菜单
         showBg: true,
-        readonly: true // ★ 只读模式
+        readonly: true, // 只读模式
+        locale
       });
       renderRef.current = render;
       // 如果有数据，恢复画布
@@ -61,7 +64,7 @@ const Index = (props: ViewerProps) => {
   );
 
   // 更新指定组件设置
-  const updateComponentSetting = (node: { [key: string]: any }, data: DataSource, pageId: string, pageConfig: LtmplConfig) => {
+  const updateComponentSetting = (node: { [key: string]: any }, data: DataSource, pageId: string) => {
     const { componentType, id, settings } = node;
     let temSetting;
     switch (componentType) {
@@ -73,23 +76,13 @@ const Index = (props: ViewerProps) => {
       default:
         break;
     }
-    temSetting && renderRef.current.updateAssetById(id, { ...temSetting, pageId, pageConfig });
+    temSetting && renderRef.current.updateAssetById(id, { ...temSetting, pageId });
   }
 
-  // 查询关联页面配置
-  const getDataPageConfig = async (sourceId: string) => {
-    if (!sourceId) return null;
-    if (dataPageConfigRef.current[sourceId]) return dataPageConfigRef.current[sourceId];
-    let ltmplConfigRes: LtmplConfigRes = await HcserviceV3.requestLtmplConfig(null, sourceId);
-    dataPageConfigRef.current = { ...dataPageConfigRef.current, [sourceId]: ltmplConfigRes.ltmplConfig };
-    return ltmplConfigRes.ltmplConfig;
-  };
-
   // 更新组件数据->更新画面
   const updateAssetSettings = async (nodes: { [key: string]: any }[], data: DataSource) => {
     if (!renderRef.current || !nodes?.length || !data) return;
-    const pageConfig = await getDataPageConfig(data.config?.pageId);
-    nodes.forEach(node => updateComponentSetting(node, data, data.config?.pageId, pageConfig));
+    nodes.forEach(node => updateComponentSetting(node, data, data.config?.pageId));
   };
 
   // 整理组件数据源
@@ -163,6 +156,7 @@ const Index = (props: ViewerProps) => {
 
   // 加载画布数据
   const loadData = useCallback(async (render: Render, jsonData: string) => {
+    setLoading(true);
     try {
       await render.importExportTool.restore(jsonData);
       // 数据加载完成后自适应居中
@@ -171,6 +165,7 @@ const Index = (props: ViewerProps) => {
     } catch (e) {
       console.error('Failed to load canvas data:', e);
     }
+    setLoading(false);
   }, []);
 
   // 监听容器尺寸变化
@@ -230,9 +225,11 @@ const Index = (props: ViewerProps) => {
         </Space>
       </div>
       {/* 画布区域 */}
-      <div className="draw-viewer-content" ref={boardRef}>
-        <div ref={stageRef} />
-      </div>
+      <Spin spinning={loading}>
+        <div className="draw-viewer-content" ref={boardRef}>
+          <div ref={stageRef} />
+        </div>
+      </Spin>
     </div>
   );
 };