aldehyde 0.2.474 → 0.2.476

package/src/aldehyde/controls/text/index.less

@@ -4,4 +4,5 @@
     text-overflow: ellipsis;
     width: fit-content;
     max-width: 100%;
+    min-width: 100%;
 }

package/src/aldehyde/controls/view-control.tsx

@@ -147,6 +147,7 @@ function renderControl(
       case "textarea":
       case "text-view":
       case "preselect":
+      case "scan-code":
         if (holderType == "table") {
           viewControl = (
             <EllipsisText

package/src/aldehyde/detail/button/edit-button.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "antd";
+import { Button, Tooltip } from "antd";
 import { DoEditParam, DtmplData, LtmplConfig } from "../../tmpl/interface";
 import { EditOutlined } from "@ant-design/icons";
 import ActionUtils from "../../controls/action/utils";
@@ -13,26 +13,23 @@ interface EditButtonProps {
 
 const EditButton: React.FC<EditButtonProps> = (props) => {
   const { doEdit, data, ltmplConfig } = props;
+  const { classEditConfigs, buttonEditAction, editBtnTitle } = ltmplConfig || {};
   let button = undefined;
-  if (ltmplConfig.classEditConfigs) {
-    ltmplConfig.classEditConfigs.forEach((classEditConfig) => {
+  if (classEditConfigs) {
+    classEditConfigs.forEach((classEditConfig) => {
       if (
         !button &&
         ActionUtils.isShow(classEditConfig.preposes, [data], undefined)
       ) {
+        const btnProps: any = {
+          size: "small",
+          type: "dashed",
+          onClick: () => doEdit({ code: data.code, mode: "update", dtmplSourceId: classEditConfig.id })
+        };
         button = (
-          <Button
-            size="small"
-            type="dashed"
-            icon={<EditOutlined />}
-            onClick={() =>
-              doEdit({
-                code: data.code,
-                mode: "update",
-                dtmplSourceId: classEditConfig.id,
-              })
-            }
-          ></Button>
+          (!editBtnTitle || editBtnTitle?.length < 4) ?
+            <Button {...btnProps}>{editBtnTitle || <EditOutlined />}</Button> :
+            <Tooltip title={editBtnTitle}><Button {...btnProps} icon={<EditOutlined />} /></Tooltip>
         );
       }
     });
@@ -42,18 +39,20 @@ const EditButton: React.FC<EditButtonProps> = (props) => {
   if (
     !button &&
     ActionUtils.isShow(
-      ltmplConfig.buttonEditAction?.preposes,
+      buttonEditAction?.preposes,
       [data],
       undefined
     )
   ) {
+    const btnProps: any = {
+      size: "small",
+      type: "dashed",
+      onClick: () => doEdit({ code: data.code, mode: "update" })
+    };
     button = (
-      <Button
-        size="small"
-        type="dashed"
-        icon={<EditOutlined />}
-        onClick={() => doEdit({ code: data.code, mode: "update" })}
-      ></Button>
+      (!editBtnTitle || editBtnTitle?.length < 4) ?
+        <Button {...btnProps}>{editBtnTitle || <EditOutlined />}</Button> :
+        <Tooltip title={editBtnTitle}><Button {...btnProps} icon={<EditOutlined />} /></Tooltip>
     );
   }
 

package/src/aldehyde/detail/button/view-button.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "antd";
+import { Button, Tooltip } from "antd";
 import { DtmplData, LtmplConfig, ShowViewParam } from "../../tmpl/interface";
 import { AlignCenterOutlined } from "@ant-design/icons";
 import ActionUtils from "../../controls/action/utils";
@@ -14,25 +14,24 @@ interface ViewButtonProps {
 
 const ViewButton: React.FC<ViewButtonProps> = (props) => {
   const { showView, data, ltmplConfig, buttonType = "primary" } = props;
+  const { classViewConfigs, detailBtnTitle, buttonViewAction } = ltmplConfig || {};
   let button = undefined;
-  if (ltmplConfig.classViewConfigs) {
-    ltmplConfig.classViewConfigs.forEach((classViewConfig) => {
+  if (classViewConfigs) {
+    classViewConfigs.forEach((classViewConfig) => {
       if (
         !button &&
         ActionUtils.isShow(classViewConfig.preposes, [data], undefined)
       ) {
+        const btnProps: any = {
+          size: "small",
+          type: buttonType,
+          onClick: () => showView({ code: data.code, dtmplSourceId: classViewConfig.id, })
+        };
         button = (
-          <Button
-            size="small"
-            type={buttonType}
-            icon={<AlignCenterOutlined />}
-            onClick={() =>
-              showView({
-                code: data.code,
-                dtmplSourceId: classViewConfig.id,
-              })
-            }
-          ></Button>
+          (!detailBtnTitle || detailBtnTitle?.length < 4) ?
+            <Button {...btnProps} >
+              {detailBtnTitle || <AlignCenterOutlined />}
+            </Button> : <Tooltip title={detailBtnTitle}><Button {...btnProps} icon={<AlignCenterOutlined />} /></Tooltip>
         );
       }
     });
@@ -42,18 +41,21 @@ const ViewButton: React.FC<ViewButtonProps> = (props) => {
   if (
     !button &&
     ActionUtils.isShow(
-      ltmplConfig.buttonViewAction?.preposes,
+      buttonViewAction?.preposes,
       [data],
       undefined
     )
   ) {
+    const btnProps: any = {
+      size: "small",
+      type: buttonType,
+      onClick: () => showView({ code: data.code })
+    };
     button = (
-      <Button
-        size="small"
-        type={buttonType}
-        icon={<AlignCenterOutlined />}
-        onClick={() => showView({ code: data.code })}
-      ></Button>
+      (!detailBtnTitle || detailBtnTitle?.length < 4) ?
+        <Button {...btnProps}>
+          {detailBtnTitle || <AlignCenterOutlined />}
+        </Button> : <Tooltip title={detailBtnTitle}><Button {...btnProps} icon={<AlignCenterOutlined />} /></Tooltip>
     );
   }
 

package/src/aldehyde/{draw-canvas/edit → draw-canvas-edit}/components/asset-bar/index.tsx

@@ -1,6 +1,6 @@
 import React, { DragEvent, useEffect, useMemo, useState } from 'react';
 import { Collapse, Empty, Tooltip } from "antd";
-import { ProgramConfig } from "../../../../index";
+import { ProgramConfig } from "../../../index";
 import './index.less';
 
 // 组件分组配置
@@ -37,7 +37,8 @@ interface AssetItem {
   body: {
     path: string;
     suffix: string;
-  }
+  };
+  type: string; // 组件类型
 }
 
 const AssetList = () => {
@@ -52,6 +53,7 @@ const AssetList = () => {
     const url = handleImgUrl(item.body.path);
     e.dataTransfer.setData('src', url);
     e.dataTransfer.setData('type', item.body.suffix);
+    e.dataTransfer.setData('componentType', item.type); // 组件类型
     // e.dataTransfer.setData('points', '[]');
   };
 

package/src/aldehyde/{draw-canvas/edit → draw-canvas-edit}/components/main-header/index.tsx

@@ -1,6 +1,10 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { Dropdown, Modal, Space, Button, Divider, Tooltip } from 'antd';
-import IconFont from "../../../../icon/aliIcon";
+import { ImportOutlined, ExportOutlined, SaveOutlined, QuestionCircleOutlined, MergeCellsOutlined, NumberOutlined } from '@ant-design/icons';
+import { gzipSync, strToU8 } from 'fflate';
+import { uint8ArrayToHex } from 'uint8array-extras';
+import HcserviceV3 from "../../../tmpl/hcservice-v3";
+import IconFont from "../../../icon/aliIcon";
 import { Render } from '../render';
 import { GraphType, LinkType, AlignType } from '../render/types';
 import * as Draws from '../render/draws';
@@ -35,12 +39,17 @@ interface MainHeaderProps {
   render: Render | null;
   graphType?: GraphType; // 图类型
   texting?: boolean; // 添加文本状态
+  showGrid?: boolean; // 显示网格
+  showAttract?: boolean; // 显示磁吸
   onGraphTypeChange: (type: GraphType | undefined) => void; // 更新图类型
   onTexting: (texting: boolean) => void;
+  setShowGrid?: (show: boolean) => void;
+  setShowAttract?: (show: boolean) => void;
+  recordCode: string;
 }
 
 const MainHeader = (props: MainHeaderProps) => {
-  const { render, graphType, onGraphTypeChange, onTexting, texting } = props;
+  const { render, graphType, onGraphTypeChange, onTexting, texting, recordCode, showGrid, setShowGrid, showAttract, setShowAttract } = props;
   const [scale, setScale] = useState<number>(100); // 缩放
   const [history, setHistory] = useState<string[]>([]); // 历史记录
   const [historyIndex, setHistoryIndex] = useState(-1); // 当前历史记录标签
@@ -69,17 +78,37 @@ const MainHeader = (props: MainHeaderProps) => {
     input.click();
   }, [render]);
 
+  // 保存
+  const handleSave = async () => {
+    if (!recordCode) {
+      return;
+    }
+    setLoading(true);
+    const data = render.importExportTool.save();
+    // 1. 将普通字符串转换为 Uint8Array
+    const dataBuffer = strToU8(data);
+    // 2. 压缩为 ByteArray
+    const content = gzipSync(dataBuffer, { level: 9 });
+    // 3. 将 Uint8Array 转为 16进制字符串
+    const hexString = uint8ArrayToHex(content);
+    await HcserviceV3.postDiagram2DConfig(recordCode, hexString);
+    setLoading(false);
+  }
+
   // 数据导出
-  const handleSave = useCallback((type: 'json' | 'svg' | 'asset' | 'png' | 'assetPng') => {
+  const handleExport = useCallback((type: 'json' | 'svg' | 'asset' | 'png' | 'assetPng', action?: "save" | "download") => {
     if (!render) return;
-    const data: { name: string; content: string }[] = [];
     switch (type) {
       case 'json':
-        data.push({ name: 'data.json', content: render.importExportTool.save() });
-        break;
+        if (action === "save") {
+          handleSave();
+        } else {
+          download("data.json", render.importExportTool.save());
+        }
+        return;
       case 'asset':
-        data.push({ name: 'asset.json', content: render.importExportTool.getAsset() });
-        break;
+        download("asset.json", render.importExportTool.getAsset());
+        return;
       case 'png':
         download('image.png', render.importExportTool.getAssetImage(2));
         return;
@@ -87,9 +116,6 @@ const MainHeader = (props: MainHeaderProps) => {
         download('image.png', render.importExportTool.getAssetImage());
         return;
     }
-    if (data.length) {
-      data.forEach(({ name, content }) => download(name, content));
-    }
   }, [render]);
 
   // 下载辅助函数
@@ -138,8 +164,8 @@ const MainHeader = (props: MainHeaderProps) => {
 
   // 缩放菜单选项
   const scaleMenu = [
-    { key: "fit", label: <a onClick={() => handleScale('fit')}>自适应大小</a> },
-    { key: "reset", label: <a onClick={() => handleScale('reset')}>重置位置大小</a> },
+    { key: "fit", label: <a onClick={() => handleScale('fit')}>自适应</a> },
+    { key: "reset", label: <a onClick={() => handleScale('reset')}>重置位置及缩放</a> },
     { key: "position", label: <a onClick={() => handleScale('position')}>仅重置位置</a> }
   ];
 
@@ -173,9 +199,29 @@ const MainHeader = (props: MainHeaderProps) => {
         <Tooltip title="插入文字">
           <Button type="text" onClick={() => onTexting(true)} className={texting ? "active" : ""} ><IconFont type="icon-wenben" /></Button>
         </Tooltip>
+        <Tooltip title="网格">
+          <Button type="text" onClick={() => setShowGrid(!showGrid)} className={showGrid ? "active" : ""} ><NumberOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="磁吸">
+          <Button type="text" onClick={() => setShowAttract(!showAttract)} className={showAttract ? "active" : ""} ><MergeCellsOutlined /></Button>
+        </Tooltip>
+      </Space>
+      <Space size={4} separator={<Divider vertical styles={{ root: { margin: "0 4px" } }} />}>
+        <Tooltip title="快捷键">
+          <Button type="text" onClick={() => setShowShortCut(true)} ><QuestionCircleOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="导入">
+          <Button type="text" onClick={handleRestore} ><ImportOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="导出">
+          <Button type="text" onClick={() => handleExport("json")} ><ExportOutlined /></Button>
+        </Tooltip>
+        <Tooltip title="保存">
+          <Button loading={loading} type="text" onClick={() => handleExport("json", "save")} ><SaveOutlined /></Button>
+        </Tooltip>
       </Space>
       {showShortCut &&
-        <Modal title="快捷键" open={showShortCut} onCancel={() => setShowShortCut(false)}>
+        <Modal title="快捷键" width={600} footer={null} open={showShortCut} onCancel={() => setShowShortCut(false)}>
           <p>1、复制、粘贴、多选、全选、删除、上一步、下一步等快捷键与一般文档编辑器类似；</p>
           <p>2、放大缩小，【Win】鼠标上滚动下滚动，【Mac】触控板双指放大、缩小；</p>
           <p>3、画布拖动，在空白处，【Win】右键按下移动，【Mac】control + 触控板三指移动；</p>

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

@@ -0,0 +1,163 @@
+import Konva from 'konva';
+import { Draw, BaseDraw, Render } from '../types';
+
+// 画布
+
+export interface BgDrawOption {
+  size: number;
+  readonly?: boolean;
+  showGrid?: boolean;
+}
+
+export class BgDraw extends BaseDraw implements Draw {
+  // @ts-ignore
+  static override readonly name = 'bg';
+  option: BgDrawOption;
+
+  // 独立容器：用于存放静态的背景和画布
+  private staticGroup: Konva.Group;
+  // 独立容器：专门用于存放动态网格
+  private gridGroup: Konva.Group;
+  // 标记静态元素是否需要重绘
+  private isStaticInitialized: boolean = false;
+
+  constructor(render: Render, layer: Konva.Layer, option: BgDrawOption) {
+    super(render, layer);
+    this.option = option;
+    this.group.listening(false);
+
+    // 预先创建好两个独立的 Group
+    this.staticGroup = new Konva.Group({ name: 'bg-static', listening: false });
+    this.gridGroup = new Konva.Group({ name: 'bg-grid', listening: false });
+
+    // 注意添加顺序：静态在下，网格在上
+    this.group.add(this.staticGroup);
+    this.group.add(this.gridGroup);
+
+    // 监听页面配置变化，当配置改变时，重置静态层初始化状态
+    this.render.on('page-settings-change', () => {
+      this.isStaticInitialized = false;
+      // 触发整体重绘，让 draw 方法重新执行
+      this.draw();
+    });
+  }
+
+  // 更新配置项，触发重绘
+  public updateOption(newOption: Partial<BgDrawOption>) {
+    this.option = { ...this.option, ...newOption };
+    this.draw();
+  }
+
+  override draw() {
+    // 1. 如果静态元素未初始化，或者配置发生变化导致标记被重置，则重新绘制
+    if (!this.isStaticInitialized) {
+      this.renderStaticElements();
+      this.isStaticInitialized = true;
+    }
+    // 2. 仅重绘网格部分（拖拽/缩放时高频调用）
+    if (!this.option.readonly && this.option.showGrid) { // 只读页面不显示网格
+      this.renderGrid();
+    } else { // 清除已渲染网格
+      this.gridGroup.destroyChildren();
+    }
+  }
+
+  /**
+   * 渲染静态元素（仅在初始化或配置改变时执行）
+   */
+  private renderStaticElements() {
+    // 清除旧的静态元素
+    this.staticGroup.destroyChildren();
+    const { width, height, x, y } = this.render.getStageState();
+    const { pageWidth, pageHeight, background, backgroundImg } = this.render.getPageSettings();
+
+    // 背景层（填满整个 stage）
+    const bgRect = new Konva.Rect({
+      name: `${this.constructor.name}__background`,
+      x: this.render.toStageValue(-x + this.render.rulerSize),
+      y: this.render.toStageValue(-y + this.render.rulerSize),
+      width: this.render.toStageValue(width),
+      height: this.render.toStageValue(height),
+      listening: false,
+      fill: 'transparent'
+    });
+
+    // 画布边框
+    const canvas = new Konva.Rect({
+      name: this.constructor.name,
+      x: 0,
+      y: 0,
+      width: pageWidth,
+      height: pageHeight,
+      stroke: this.option.readonly ? "transparent" : 'rgba(255,0,0,0.3)',
+      strokeWidth: this.render.toStageValue(2),
+      listening: false,
+      dash: [this.render.toStageValue(6), this.render.toStageValue(6)],
+      fill: background || 'transparent',
+    });
+
+    this.staticGroup.add(bgRect);
+    this.staticGroup.add(canvas);
+
+    // 处理背景图（异步）
+    if (backgroundImg?.src) {
+      const img = new Image();
+      img.crossOrigin = 'anonymous'; // 如果图片在 CDN 上，必须加上此属性防止跨域问题
+      img.src = backgroundImg.src;
+      img.onload = () => {
+        canvas.fill(null);
+        canvas.fillPatternImage(img);
+        canvas.fillPatternRepeat('no-repeat');
+        // 让图片自适应填满矩形（等比缩放裁剪效果）
+        const scaleX = pageWidth / img.width;
+        const scaleY = pageHeight / img.height;
+        canvas.fillPatternScaleX(scaleX);
+        canvas.fillPatternScaleY(scaleY);
+      };
+    }
+  }
+
+  /**
+   * 渲染网格（每次拖拽/缩放时调用）
+   */
+  private renderGrid() {
+    // 仅清空网格 Group，不影响静态层
+    this.gridGroup.destroyChildren();
+    const { width, height, x, y } = this.render.getStageState();
+    const cellSize = this.option.size;
+    const lenX = Math.ceil(this.render.toStageValue(width + this.render.rulerSize) / cellSize);
+    const lenY = Math.ceil(this.render.toStageValue(height + this.render.rulerSize) / cellSize);
+    const startX = -Math.ceil(this.render.toStageValue(x) / cellSize);
+    const startY = -Math.ceil(this.render.toStageValue(y) / cellSize);
+    const lines: Konva.Line[] = [];
+
+    // 生成竖线
+    for (let i = startX; i < lenX + startX + 2; i++) {
+      lines.push(new Konva.Line({
+        points: [
+          cellSize * i, this.render.toStageValue(-y + this.render.rulerSize),
+          cellSize * i, this.render.toStageValue(height - y + this.render.rulerSize)
+        ],
+        stroke: '#ddd',
+        strokeWidth: this.render.toStageValue(1),
+        listening: false
+      }));
+    }
+
+    // 生成横线
+    for (let j = startY; j < lenY + startY + 2; j++) {
+      lines.push(new Konva.Line({
+        points: [
+          this.render.toStageValue(-x + this.render.rulerSize), cellSize * j,
+          this.render.toStageValue(width - x + this.render.rulerSize), cellSize * j
+        ],
+        stroke: '#ddd',
+        strokeWidth: this.render.toStageValue(1),
+        listening: false
+      }));
+    }
+
+    // 批量添加线条到网格 Group
+    this.gridGroup.add(...lines);
+  }
+}

package/src/aldehyde/{draw-canvas/edit → draw-canvas-edit}/components/render/draws/preview-draw.ts

@@ -25,7 +25,7 @@ export class PreviewDraw extends BaseDraw implements Draw {
   override draw() {
     this.clear();
     const stageState = this.render.getStageState();
-    const { pageWidth, pageHeight, background } = this.render.getPageSettings(); // 画布尺寸
+    const { pageWidth, pageHeight, background, backgroundImg } = this.render.getPageSettings(); // 画布尺寸
     const previewMargin = 20;  // 预览框的外边距
     // 预览框 group
     const group = new Konva.Group({
@@ -101,7 +101,6 @@ export class PreviewDraw extends BaseDraw implements Draw {
       height: group.height(),
       stroke: '#666',
       strokeWidth: this.render.toStageValue(1),
-      fill: !background ? "#ffffff" : background
     });
 
     // 根据预览框内部拖动，同步画布的移动
@@ -139,19 +138,38 @@ export class PreviewDraw extends BaseDraw implements Draw {
       this.state.moving = false;
     })
     group.add(bg);
-    // 预览框 边框
-    group.add(
-      new Konva.Rect({
-        name: this.constructor.name,
-        x: 0,
-        y: 0,
-        width: this.render.toStageValue(pageWidth * stageState.scale),
-        height: this.render.toStageValue(pageHeight * stageState.scale),
-        stroke: 'rgba(255,0,0,0.2)',
-        strokeWidth: 1 / this.option.size,
-        listening: false
-      })
-    );
+    // 预览框 画布
+    const canvas = new Konva.Rect({
+      name: this.constructor.name,
+      x: 0,
+      y: 0,
+      width: this.render.toStageValue(pageWidth * stageState.scale),
+      height: this.render.toStageValue(pageHeight * stageState.scale),
+      stroke: 'rgba(255,0,0,0.2)',
+      strokeWidth: 1 / this.option.size,
+      listening: false,
+      fill: !background ? "#ffffff" : background
+    });
+
+    group.add(canvas);
+
+    // // 处理背景图（异步）
+    // if (backgroundImg?.src) {
+    //   const img = new Image();
+    //   img.crossOrigin = 'anonymous'; // 如果图片在 CDN 上，必须加上此属性防止跨域问题
+    //   img.src = backgroundImg.src;
+    //   img.onload = () => {
+    //     canvas.fill(null);
+    //     canvas.fillPatternImage(img);
+    //     canvas.fillPatternRepeat('no-repeat');
+    //     // 让图片自适应填满矩形（等比缩放裁剪效果）
+    //     const scaleX = pageWidth / img.width;
+    //     const scaleY = pageHeight / img.height;
+    //     canvas.fillPatternScaleX(scaleX);
+    //     canvas.fillPatternScaleY(scaleY);
+    //   };
+    // }
+
     // 复制提取的节点，用作预览
     for (const node of nodes) {
       const copy = node.clone();

package/src/aldehyde/{draw-canvas/edit → draw-canvas-edit}/components/render/handlers/drag-outside-handlers.ts

@@ -1,7 +1,7 @@
 import Konva from 'konva';
 import { nanoid } from 'nanoid';
 import { Render } from '../index';
-import { Handler, AssetInfoPoint, ImageType, AssetType, LinkDrawPoint } from '../types';
+import { Handler, AssetInfoPoint, AssetType, LinkDrawPoint } from '../types';
 import { RefLineDraw, PreviewDraw } from '../draws';
 
 export class DragOutsideHandlers implements Handler {
@@ -25,6 +25,7 @@ export class DragOutsideHandlers implements Handler {
       },
       drop: (e: GlobalEventHandlersEventMap['drop']) => {
         const src = e.dataTransfer?.getData('src');
+        const componentType = e.dataTransfer?.getData('componentType'); // 组件类型
         // 接收连接点信息
         let morePoints: AssetInfoPoint[] = [];
         const morePointsTxt = e.dataTransfer?.getData('points') ?? '[]';
@@ -36,37 +37,34 @@ export class DragOutsideHandlers implements Handler {
         const type = e.dataTransfer?.getData('type');
         if (src && type) {
           const stageState = this.render.getStageState();
+          const { pageHeight, pageWidth } = this.render.getPageSettings()
           this.render.stage.setPointersPositions(e);
           const pos = this.render.stage.getPointerPosition();
           if (pos) {
-            this.render.assetTool[
-              type === ImageType.svg
-                ? `loadSvg`
-                : type === ImageType.gif
-                  ? 'loadGif'
-                  : type === 'json'
-                    ? 'loadJson'
-                    : 'loadImg'
-            ](src).then((target: Konva.Image | Konva.Group) => {
+            this.render.assetTool[type === 'json' ? 'loadJson' : ({ svg: "loadSvg", gif: "loadGif" }[type] || "loadImg")](src).then((target: Konva.Image | Konva.Group) => {
               let group = null;
+              let width = target.width();
+              let height = target.height();
+              if (width > pageWidth || height > pageHeight) {
+                const sizeScale = Math.min(pageWidth / width, pageHeight / height);
+                width *= sizeScale;
+                height *= sizeScale;
+                target.setSize({ width, height });
+              }
               // 默认连接点
               let points: AssetInfoPoint[] = [];
-              // 图片素材
-              if (target instanceof Konva.Image) {
+              if (target instanceof Konva.Image) { // 图片素材
                 group = new Konva.Group({
                   id: nanoid(),
-                  width: target.width(),
-                  height: target.height(),
+                  width,
+                  height,
                   name: 'asset',
                   assetType: AssetType.Image,
                   draggable: true,
+                  componentType,
                   imageType:
                     type !== 'json'
-                      ? type === ImageType.svg
-                        ? ImageType.svg
-                        : type === ImageType.gif
-                          ? ImageType.gif
-                          : ImageType.other
+                      ? (["svg", "gif", "other"].includes(type) ? type : "other")
                       : undefined
                 });
                 this.render.setAssetSettings(group, this.render.getAssetSettings(), false);
@@ -77,8 +75,7 @@ export class DragOutsideHandlers implements Handler {
                   { x: group.width() / 2, y: 0, direction: 'top' }, // 上
                   { x: group.width() / 2, y: group.height(), direction: 'bottom' } // 下
                 ];
-              } else {
-                // json 素材
+              } else {// json 素材
                 target.id(nanoid());
                 target.setAttrs({
                   name: 'asset',
@@ -89,7 +86,7 @@ export class DragOutsideHandlers implements Handler {
                 this.render.linkTool.groupIdCover(group);
               }
               target.setAttrs({ x: 0, y: 0 } as any);
-              this.render.layer.add(group);
+              this.render.layer.add(group); // 组件添加到画布
               const x = this.render.toStageValue(pos.x - stageState.x) - group.width() / 2;
               const y = this.render.toStageValue(pos.y - stageState.y) - group.height() / 2;
               group.setAttrs({ x, y });