@tmagic/editor 1.4.4 → 1.4.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.4",
+  "version": "1.4.6",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -40,16 +40,7 @@
     "typescript"
   ],
   "dependencies": {
-    "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.4.4",
-    "@tmagic/dep": "1.4.4",
-    "@tmagic/design": "1.4.4",
-    "@tmagic/form": "1.4.4",
-    "@tmagic/schema": "1.4.4",
-    "@tmagic/stage": "1.4.4",
-    "@tmagic/table": "1.4.4",
-    "@tmagic/utils": "1.4.4",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -57,37 +48,46 @@
     "gesto": "^1.19.1",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.47.0",
-    "moveable": "^0.51.1",
+    "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.4.21"
-  },
-  "peerDependencies": {
-    "@tmagic/design": "1.4.4",
-    "@tmagic/form": "1.4.4",
-    "monaco-editor": "^0.47.0",
-    "vue": "^3.4.21"
+    "@tmagic/dep": "1.4.6",
+    "@tmagic/table": "1.4.6"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/compiler-sfc": "^3.4.21",
-    "@vue/test-utils": "^2.4.4",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/compiler-sfc": "^3.4.27",
+    "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
-    "sass": "^1.35.1",
+    "sass": "^1.77.0",
     "tsc-alias": "^1.8.5",
     "type-fest": "^4.10.3",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
-    "vue-tsc": "^2.0.6"
+    "vite": "^5.2.11",
+    "vue-tsc": "^2.0.16"
+  },
+  "peerDependencies": {
+    "monaco-editor": "^0.48.0",
+    "vue": "^3.4.27",
+    "typescript": "*",
+    "@tmagic/form": "1.4.6",
+    "@tmagic/schema": "1.4.6",
+    "@tmagic/design": "1.4.6",
+    "@tmagic/core": "1.4.6",
+    "@tmagic/utils": "1.4.6",
+    "@tmagic/stage": "1.4.6"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "scripts": {
     "build": "npm run build:type && vite build",
     "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "clear:type": "rimraf ./types",
-    "type:check": "vue-tsc --noEmit"
+    "check:type": "vue-tsc --noEmit --project tsconfig.build.json"
   }
 }

package/src/editorProps.ts

@@ -70,8 +70,12 @@ export interface EditorProps {
   codeOptions?: { [key: string]: any };
   /** 禁用鼠标左键按下时就开始拖拽，需要先选中再可以拖拽 */
   disabledDragStart?: boolean;
-  /** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
+  /** 自定义依赖收集器，复制组件时会将关联组件一并复制 */
   collectorOptions?: CustomTargetOptions;
+  /** 自定义依赖收集器，复制组件时会将关联代码块一并复制 */
+  collectorOptionsForCode?: CustomTargetOptions;
+  /** 自定义依赖收集器，复制组件时会将关联数据源一并复制 */
+  collectorOptionsForDataSource?: CustomTargetOptions;
   /** 标尺配置 */
   guidesOptions?: Partial<GuidesOptions>;
   /** 禁止多选 */

package/src/fields/DataSourceFieldSelect.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="m-fields-data-source-field-select">
     <component
-      style="width: 100%"
       :is="tagName"
       :config="showDataSourceFieldSelect || !config.fieldConfig ? cascaderConfig : config.fieldConfig"
       :model="model"
@@ -39,14 +38,14 @@ import { computed, inject, ref, resolveComponent, watch } from 'vue';
 import { Coin, Edit, View } from '@element-plus/icons-vue';
 
 import { TMagicButton } from '@tmagic/design';
-import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '@tmagic/form';
+import type { CascaderConfig, FieldProps, FormState } from '@tmagic/form';
 import { filterFunction, MCascader } from '@tmagic/form';
-import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import type { DataSourceFieldSelectConfig, EventBus, Services } from '@editor/type';
 import { SideItemKey } from '@editor/type';
+import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsDataSourceFieldSelect',
@@ -77,43 +76,6 @@ const selectedDataSourceId = computed(() => {
 
 const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
 
-const getOptionChildren = (
-  fields: DataSchema[] = [],
-  dataSourceFieldType: DataSourceFieldType[] = ['any'],
-): CascaderOption[] => {
-  const child: CascaderOption[] = [];
-  fields.forEach((field) => {
-    if (!dataSourceFieldType.length) {
-      dataSourceFieldType.push('any');
-    }
-
-    const children = getOptionChildren(field.fields, dataSourceFieldType);
-
-    const item = {
-      label: field.title || field.name,
-      value: field.name,
-      children,
-    };
-
-    const fieldType = field.type || 'any';
-    if (dataSourceFieldType.includes('any') || dataSourceFieldType.includes(fieldType)) {
-      child.push(item);
-      return;
-    }
-
-    if (!dataSourceFieldType.includes(fieldType) && !['array', 'object', 'any'].includes(fieldType)) {
-      return;
-    }
-
-    if (!children.length && ['object', 'array', 'any'].includes(field.type || '')) {
-      return;
-    }
-
-    child.push(item);
-  });
-  return child;
-};
-
 const cascaderConfig = computed<CascaderConfig>(() => {
   const valueIsKey = props.config.value === 'key';
 
@@ -126,7 +88,7 @@ const cascaderConfig = computed<CascaderConfig>(() => {
         dataSources.value?.map((ds) => ({
           label: ds.title || ds.id,
           value: valueIsKey ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
-          children: getOptionChildren(ds.fields, props.config.dataSourceFieldType),
+          children: getCascaderOptionsFromFields(ds.fields, props.config.dataSourceFieldType),
         })) || [];
       return options.filter((option) => option.children.length);
     },

package/src/fields/EventSelect.vue

@@ -55,11 +55,13 @@ import { has } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import type { CascaderOption, FieldProps, FormState, PanelConfig } from '@tmagic/form';
 import { MContainer, MPanel } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
+import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -78,26 +80,45 @@ const codeBlockService = services?.codeBlockService;
 
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
+  const fieldType = props.config.src === 'component' ? 'select' : 'cascader';
   const defaultEventNameConfig = {
     name: 'name',
     text: '事件',
-    type: 'select',
+    type: fieldType,
     labelWidth: '40px',
+    checkStrictly: true,
+    valueSeparator: '.',
     options: (mForm: FormState, { formValue }: any) => {
-      let events: EventOption[] = [];
+      let events: EventOption[] | CascaderOption[] = [];
 
       if (!eventsService || !dataSourceService) return events;
 
       if (props.config.src === 'component') {
         events = eventsService.getEvent(formValue.type);
-      } else if (props.config.src === 'datasource') {
-        events = dataSourceService.getFormEvent(formValue.type);
+        return events.map((option) => ({
+          text: option.label,
+          value: option.value,
+        }));
       }
+      if (props.config.src === 'datasource') {
+        // 从数据源类型中获取到相关事件
+        events = dataSourceService.getFormEvent(formValue.type);
+        // 从数据源类型和实例中分别获取数据以追加数据变化的事件
+        const dataSource = dataSourceService.getDataSourceById(formValue.id);
+        const fields = dataSource?.fields || [];
+        if (fields.length > 0) {
+          return [
+            ...events,
+            {
+              label: '数据变化',
+              value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+              children: getCascaderOptionsFromFields(fields),
+            },
+          ];
+        }
 
-      return events.map((option) => ({
-        text: option.label,
-        value: option.value,
-      }));
+        return events;
+      }
     },
   };
   return { ...defaultEventNameConfig, ...props.config.eventNameConfig };

package/src/hooks/use-code-block-edit.ts

@@ -67,8 +67,6 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     await codeBlockService?.setCodeDslById(codeId.value, values);
 
-    tMagicMessage.success('代码块保存成功');
-
     codeBlockEditor.value?.hide();
   };
 

package/src/hooks/use-stage.ts

@@ -24,7 +24,7 @@ export const useStage = (stageOptions: StageOptions) => {
   const stage = new StageCore({
     render: stageOptions.render,
     runtimeUrl: stageOptions.runtimeUrl,
-    zoom: zoom.value,
+    zoom: stageOptions.zoom ?? zoom.value,
     autoScrollIntoView: stageOptions.autoScrollIntoView,
     isContainer: stageOptions.isContainer,
     containerHighlightClassName: stageOptions.containerHighlightClassName,

package/src/index.ts

@@ -82,6 +82,7 @@ export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
 export { default as Resizer } from './components/Resizer.vue';
 export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
+export { default as FloatingBox } from './components/FloatingBox.vue';
 export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
 
 const defaultInstallOpt: InstallOptions = {

package/src/initService.ts

@@ -7,7 +7,7 @@ import {
   createDataSourceCondTarget,
   createDataSourceMethodTarget,
   createDataSourceTarget,
-  createRelatedCompTarget,
+  createRelatedTargetForCopy,
   DepTargetType,
   Target,
 } from '@tmagic/dep';
@@ -412,7 +412,17 @@ export const initServiceEvents = (
 
   // 初始化复制组件相关的依赖收集器
   if (props.collectorOptions && !depService.hasTarget(DepTargetType.RELATED_COMP_WHEN_COPY)) {
-    depService.addTarget(createRelatedCompTarget(props.collectorOptions));
+    depService.addTarget(createRelatedTargetForCopy(props.collectorOptions, DepTargetType.RELATED_COMP_WHEN_COPY));
+  }
+  if (props.collectorOptionsForCode && !depService.hasTarget(DepTargetType.RELATED_CODE_WHEN_COPY)) {
+    depService.addTarget(
+      createRelatedTargetForCopy(props.collectorOptionsForCode, DepTargetType.RELATED_CODE_WHEN_COPY),
+    );
+  }
+  if (props.collectorOptionsForDataSource && !depService.hasTarget(DepTargetType.RELATED_DS_WHEN_COPY)) {
+    depService.addTarget(
+      createRelatedTargetForCopy(props.collectorOptionsForDataSource, DepTargetType.RELATED_DS_WHEN_COPY),
+    );
   }
 
   onBeforeUnmount(() => {

package/src/layouts/workspace/viewer/Stage.vue

@@ -45,7 +45,8 @@ import { computed, inject, markRaw, nextTick, onBeforeUnmount, onMounted, ref, t
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer } from '@tmagic/schema';
-import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
+import StageCore, { getOffset, Runtime } from '@tmagic/stage';
+import { calcValueByFontsize } from '@tmagic/utils';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useStage } from '@editor/hooks/use-stage';
@@ -223,18 +224,18 @@ const dropHandler = async (e: DragEvent) => {
       top = e.clientY - containerRect.top + scrollTop;
       left = e.clientX - containerRect.left + scrollLeft;
 
-      if (parentEl && doc) {
+      if (parentEl) {
         const { left: parentLeft, top: parentTop } = getOffset(parentEl);
-        left = left - calcValueByFontsize(doc, parentLeft) * zoom.value;
-        top = top - calcValueByFontsize(doc, parentTop) * zoom.value;
+        left = left - parentLeft * zoom.value;
+        top = top - parentTop * zoom.value;
       }
     }
 
     config.data.style = {
       ...style,
       position,
-      top: top / zoom.value,
-      left: left / zoom.value,
+      top: calcValueByFontsize(doc, top / zoom.value),
+      left: calcValueByFontsize(doc, left / zoom.value),
     };
 
     config.data.inputEvent = e;

package/src/services/codeBlock.ts

@@ -17,21 +17,26 @@
  */
 
 import { reactive } from 'vue';
-import { keys, pick } from 'lodash-es';
+import { cloneDeep, get, keys, pick } from 'lodash-es';
 import type { Writable } from 'type-fest';
 
+import { DepTargetType } from '@tmagic/dep';
 import type { ColumnConfig } from '@tmagic/form';
-import type { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
+import type { CodeBlockContent, CodeBlockDSL, Id, MNode } from '@tmagic/schema';
 
+import depService from '@editor/services/dep';
+import editorService from '@editor/services/editor';
+import storageService, { Protocol } from '@editor/services/storage';
 import type { AsyncHookPlugin, CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
+import { COPY_CODE_STORAGE_KEY } from '@editor/utils/editor';
 
 import BaseService from './BaseService';
 
 const canUsePluginMethods = {
   async: ['setCodeDslById', 'setEditStatus', 'setCombineIds', 'setUndeleteableList', 'deleteCodeDslByIds'] as const,
-  sync: [],
+  sync: ['setCodeDslByIdSync'],
 };
 
 type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
@@ -46,7 +51,10 @@ class CodeBlock extends BaseService {
   });
 
   constructor() {
-    super(canUsePluginMethods.async.map((methodName) => ({ name: methodName, isAsync: true })));
+    super([
+      ...canUsePluginMethods.async.map((methodName) => ({ name: methodName, isAsync: true })),
+      ...canUsePluginMethods.sync.map((methodName) => ({ name: methodName, isAsync: false })),
+    ]);
   }
 
   /**
@@ -88,20 +96,32 @@ class CodeBlock extends BaseService {
    * @returns {void}
    */
   public async setCodeDslById(id: Id, codeConfig: Partial<CodeBlockContent>): Promise<void> {
+    this.setCodeDslByIdSync(id, codeConfig, true);
+  }
+
+  /**
+   * 为了兼容历史原因
+   * 设置代码块ID和代码内容到源dsl
+   * @param {Id} id 代码块id
+   * @param {CodeBlockContent} codeConfig 代码块内容配置信息
+   * @param {boolean} force 是否强制写入，默认true
+   * @returns {void}
+   */
+  public setCodeDslByIdSync(id: Id, codeConfig: Partial<CodeBlockContent>, force = true): void {
     const codeDsl = this.getCodeDsl();
 
     if (!codeDsl) {
       throw new Error('dsl中没有codeBlocks');
     }
+    if (codeDsl[id] && !force) return;
 
-    const codeConfigProcessed = codeConfig;
-    if (codeConfig.content) {
+    const codeConfigProcessed = cloneDeep(codeConfig);
+    if (codeConfigProcessed.content) {
       // 在保存的时候转换代码内容
       const parseDSL = getConfig('parseDSL');
-      if (typeof codeConfig.content === 'string') {
-        codeConfig.content = parseDSL<(...args: any[]) => any>(codeConfig.content);
+      if (typeof codeConfigProcessed.content === 'string') {
+        codeConfigProcessed.content = parseDSL<(...args: any[]) => any>(codeConfigProcessed.content);
       }
-      codeConfigProcessed.content = codeConfig.content;
     }
 
     const existContent = codeDsl[id] || {};
@@ -233,6 +253,54 @@ class CodeBlock extends BaseService {
     return await this.getUniqueId();
   }
 
+  /**
+   * 复制时会带上组件关联的代码块
+   * @param config 组件节点配置
+   * @returns
+   */
+  public copyWithRelated(config: MNode | MNode[]): void {
+    const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
+    // 关联的代码块也一并复制
+    depService.clearByType(DepTargetType.RELATED_CODE_WHEN_COPY);
+    depService.collect(copyNodes, true, DepTargetType.RELATED_CODE_WHEN_COPY);
+    const customTarget = depService.getTarget(
+      DepTargetType.RELATED_CODE_WHEN_COPY,
+      DepTargetType.RELATED_CODE_WHEN_COPY,
+    );
+    const copyData: CodeBlockDSL = {};
+    if (customTarget) {
+      Object.keys(customTarget.deps).forEach((nodeId: Id) => {
+        const node = editorService.getNodeById(nodeId);
+        if (!node) return;
+        customTarget!.deps[nodeId].keys.forEach((key) => {
+          const relateCodeId = get(node, key);
+          const isExist = Object.keys(copyData).find((codeId: Id) => codeId === relateCodeId);
+          if (!isExist) {
+            const relateCode = this.getCodeContentById(relateCodeId);
+            if (relateCode) {
+              copyData[relateCodeId] = relateCode;
+            }
+          }
+        });
+      });
+    }
+    storageService.setItem(COPY_CODE_STORAGE_KEY, copyData, {
+      protocol: Protocol.OBJECT,
+    });
+  }
+
+  /**
+   * 粘贴代码块
+   * @returns
+   */
+  public paste() {
+    const codeDsl: CodeBlockDSL = storageService.getItem(COPY_CODE_STORAGE_KEY);
+    Object.keys(codeDsl).forEach((codeId: Id) => {
+      // 不覆盖同样id的代码块
+      this.setCodeDslByIdSync(codeId, codeDsl[codeId], false);
+    });
+  }
+
   public resetState() {
     this.state.codeDsl = null;
     this.state.editable = true;

package/src/services/dataSource.ts

@@ -1,14 +1,19 @@
 import { reactive } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, get } from 'lodash-es';
 import { Writable } from 'type-fest';
 
 import type { EventOption } from '@tmagic/core';
+import { DepTargetType } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
-import type { DataSourceSchema } from '@tmagic/schema';
+import type { DataSourceSchema, Id, MNode } from '@tmagic/schema';
 import { guid, toLine } from '@tmagic/utils';
 
+import depService from '@editor/services/dep';
+import editorService from '@editor/services/editor';
+import storageService, { Protocol } from '@editor/services/storage';
 import type { DatasourceTypeOption, SyncHookPlugin } from '@editor/type';
 import { getFormConfig, getFormValue } from '@editor/utils/data-source';
+import { COPY_DS_STORAGE_KEY } from '@editor/utils/editor';
 
 import BaseService from './BaseService';
 
@@ -102,7 +107,7 @@ class DataSource extends BaseService {
   public add(config: DataSourceSchema) {
     const newConfig = {
       ...config,
-      id: this.createId(),
+      id: config.id && !this.getDataSourceById(config.id) ? config.id : this.createId(),
     };
 
     this.get('dataSources').push(newConfig);
@@ -116,7 +121,6 @@ class DataSource extends BaseService {
     const dataSources = this.get('dataSources');
 
     const index = dataSources.findIndex((ds) => ds.id === config.id);
-
     dataSources[index] = cloneDeep(config);
 
     this.emit('update', config);
@@ -153,6 +157,51 @@ class DataSource extends BaseService {
   public usePlugin(options: SyncHookPlugin<SyncMethodName, DataSource>): void {
     super.usePlugin(options);
   }
+
+  /**
+   * 复制时会带上组件关联的数据源
+   * @param config 组件节点配置
+   * @returns
+   */
+  public copyWithRelated(config: MNode | MNode[]): void {
+    const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
+    depService.clearByType(DepTargetType.RELATED_DS_WHEN_COPY);
+    depService.collect(copyNodes, true, DepTargetType.RELATED_DS_WHEN_COPY);
+    const customTarget = depService.getTarget(DepTargetType.RELATED_DS_WHEN_COPY, DepTargetType.RELATED_DS_WHEN_COPY);
+    const copyData: DataSourceSchema[] = [];
+    if (customTarget) {
+      Object.keys(customTarget.deps).forEach((nodeId: Id) => {
+        const node = editorService.getNodeById(nodeId);
+        if (!node) return;
+        customTarget!.deps[nodeId].keys.forEach((key) => {
+          const [relateDsId] = get(node, key);
+          const isExist = copyData.find((dsItem) => dsItem.id === relateDsId);
+          if (!isExist) {
+            const relateDs = this.getDataSourceById(relateDsId);
+            if (relateDs) {
+              copyData.push(relateDs);
+            }
+          }
+        });
+      });
+    }
+    storageService.setItem(COPY_DS_STORAGE_KEY, copyData, {
+      protocol: Protocol.OBJECT,
+    });
+  }
+  /**
+   * 粘贴数据源
+   * @returns
+   */
+  public paste() {
+    const dataSource: DataSourceSchema[] = storageService.getItem(COPY_DS_STORAGE_KEY);
+    dataSource.forEach((item: DataSourceSchema) => {
+      // 不覆盖同样id的数据源
+      if (!this.getDataSourceById(item.id)) {
+        this.add(item);
+      }
+    });
+  }
 }
 
 export type DataSourceService = DataSource;

package/src/services/editor.ts

@@ -23,7 +23,7 @@ import { Writable } from 'type-fest';
 import { DepTargetType } from '@tmagic/dep';
 import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
-import { getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+import { calcValueByFontsize, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import BaseService from '@editor/services//BaseService';
 import propsService from '@editor/services//props';
@@ -741,7 +741,7 @@ class Editor extends BaseService {
       const el = doc.getElementById(`${node.id}`);
       const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
       if (parentEl && el) {
-        node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+        node.style.left = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
         node.style.right = '';
       }
     } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {

package/src/services/props.ts

@@ -23,7 +23,7 @@ import { Writable } from 'type-fest';
 import { DepTargetType } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MComponent, MNode } from '@tmagic/schema';
-import { getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
+import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
 
 import depService from '@editor/services/dep';
 import editorService from '@editor/services/editor';
@@ -199,13 +199,14 @@ class Props extends BaseService {
   public replaceRelateId(originConfigs: MNode[], targetConfigs: MNode[]) {
     const relateIdMap = this.getRelateIdMap();
     if (Object.keys(relateIdMap).length === 0) return;
-
+    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
+    depService.collect(originConfigs, true, DepTargetType.RELATED_COMP_WHEN_COPY);
     const target = depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY);
     if (!target) return;
-
     originConfigs.forEach((config: MNode) => {
       const newId = relateIdMap[config.id];
-      const targetConfig = targetConfigs.find((targetConfig) => targetConfig.id === newId);
+      const path = getNodePath(newId, targetConfigs);
+      const targetConfig = path[path.length - 1];
 
       if (!targetConfig) return;
 
@@ -213,9 +214,13 @@ class Props extends BaseService {
         const relateOriginId = getValueByKeyPath(fullKey, config);
         const relateTargetId = relateIdMap[relateOriginId];
         if (!relateTargetId) return;
-
         setValueByKeyPath(fullKey, relateTargetId, targetConfig);
       });
+
+      // 递归items
+      if (config.items && Array.isArray(config.items)) {
+        this.replaceRelateId(config.items, targetConfigs);
+      }
     });
   }
 

package/src/services/stageOverlay.ts

@@ -90,6 +90,7 @@ class StageOverlay extends BaseService {
   public createStage(stageOptions: StageOptions = {}) {
     return useStage({
       ...stageOptions,
+      zoom: 1,
       runtimeUrl: '',
       autoScrollIntoView: false,
       render: async (stage: StageCore) => {

package/src/type.ts

@@ -150,6 +150,7 @@ export interface StageOptions {
   renderType?: RenderType;
   guidesOptions?: Partial<GuidesOptions>;
   disabledMultiSelect?: boolean;
+  zoom?: number;
 }
 
 export interface StoreState {

package/src/utils/content-menu.ts

@@ -2,7 +2,7 @@ import { computed, markRaw, Ref } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { Id, MContainer, NodeType } from '@tmagic/schema';
-import { isPage, isPageFragment } from '@tmagic/utils';
+import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { MenuButton, Services } from '@editor/type';
@@ -46,8 +46,12 @@ export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undef
       const stage = services?.editorService?.get('stage');
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
-      const initialLeft = (rect.left || 0) - (parentRect?.left || 0);
-      const initialTop = (rect.top || 0) - (parentRect?.top || 0);
+      const initialLeft =
+        calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
+        services.uiService.get('zoom');
+      const initialTop =
+        calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
+        services.uiService.get('zoom');
       services?.editorService?.paste({ left: initialLeft, top: initialTop });
     } else {
       services?.editorService?.paste();