@tmagic/editor 1.4.5 → 1.4.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.5",
+  "version": "1.4.7",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -50,18 +50,8 @@
     "lodash-es": "^4.17.21",
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
-    "@tmagic/dep": "1.4.5",
-    "@tmagic/table": "1.4.5"
-  },
-  "peerDependencies": {
-    "monaco-editor": "^0.48.0",
-    "vue": "^3.4.27",
-    "@tmagic/design": "1.4.5",
-    "@tmagic/form": "1.4.5",
-    "@tmagic/schema": "1.4.5",
-    "@tmagic/stage": "1.4.5",
-    "@tmagic/utils": "1.4.5",
-    "@tmagic/core": "1.4.5"
+    "@tmagic/dep": "1.4.7",
+    "@tmagic/table": "1.4.7"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -75,10 +65,25 @@
     "sass": "^1.77.0",
     "tsc-alias": "^1.8.5",
     "type-fest": "^4.10.3",
-    "typescript": "^5.4.2",
     "vite": "^5.2.11",
     "vue-tsc": "^2.0.16"
   },
+  "peerDependencies": {
+    "monaco-editor": "^0.48.0",
+    "vue": "^3.4.27",
+    "typescript": "*",
+    "@tmagic/core": "1.4.7",
+    "@tmagic/design": "1.4.7",
+    "@tmagic/form": "1.4.7",
+    "@tmagic/schema": "1.4.7",
+    "@tmagic/stage": "1.4.7",
+    "@tmagic/utils": "1.4.7"
+  },
+  "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",

package/src/components/TreeNode.vue

@@ -114,7 +114,9 @@ const selected = computed(() => nodeStatus.value.selected);
 const visible = computed(() => nodeStatus.value.visible);
 const draggable = computed(() => nodeStatus.value.draggable);
 
-const hasChildren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+const hasChildren = computed(
+  () => Array.isArray(props.data.items) && props.data.items.some((item) => props.nodeStatusMap.get(item.id)?.visible),
+);
 
 const handleDragStart = (event: DragEvent) => {
   treeEmit?.('node-dragstart', event, props.data);

package/src/editorProps.ts

@@ -1,5 +1,4 @@
 import type { EventOption } from '@tmagic/core';
-import type { CustomTargetOptions } from '@tmagic/dep';
 import type { FormConfig, FormState } from '@tmagic/form';
 import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, {
@@ -70,8 +69,6 @@ export interface EditorProps {
   codeOptions?: { [key: string]: any };
   /** 禁用鼠标左键按下时就开始拖拽，需要先选中再可以拖拽 */
   disabledDragStart?: boolean;
-  /** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
-  collectorOptions?: CustomTargetOptions;
   /** 标尺配置 */
   guidesOptions?: Partial<GuidesOptions>;
   /** 禁止多选 */

package/src/fields/DataSourceInput.vue

@@ -54,6 +54,7 @@ import { Coin } from '@element-plus/icons-vue';
 import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
 import type { FieldProps, FormItem } from '@tmagic/form';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
+import { isNumber } from '@tmagic/utils';
 
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
@@ -209,7 +210,7 @@ const fieldQuerySearch = (
   const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
 
   // 可能是xx.xx.xx，存在链式调用
-  const keys = dsKey.split('.');
+  const keys = dsKey.replaceAll(/\[(\d+)\]/g, '.$1').split('.');
 
   // 最前的是数据源id
   const dsId = keys.shift();
@@ -224,6 +225,11 @@ const fieldQuerySearch = (
   // 后面这些是字段
   let key = keys.shift();
   while (key) {
+    if (isNumber(key)) {
+      key = keys.shift();
+      continue;
+    }
+
     for (const field of fields) {
       if (field.name === key) {
         fields = field.fields || [];

package/src/fields/EventSelect.vue

@@ -26,14 +26,14 @@
         @change="onChangeHandler"
       >
         <template #header>
-          <MContainer
+          <MFormContainer
             class="fullWidth"
             :config="eventNameConfig"
             :model="cardItem"
             :disabled="disabled"
             :size="size"
             @change="onChangeHandler"
-          ></MContainer>
+          ></MFormContainer>
           <TMagicButton
             style="color: #f56c6c"
             link
@@ -55,13 +55,13 @@ import { has } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { CascaderOption, FieldProps, FormState, PanelConfig } from '@tmagic/form';
-import { MContainer, MPanel } from '@tmagic/form';
-import { ActionType } from '@tmagic/schema';
+import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
+import { ActionType, type MComponent, type MContainer } 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';
+import { getCascaderOptionsFromFields, traverseNode } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -80,13 +80,20 @@ const codeBlockService = services?.codeBlockService;
 
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
-  const fieldType = props.config.src === 'component' ? 'select' : 'cascader';
-  const defaultEventNameConfig = {
+  const defaultEventNameConfig: ChildConfig = {
     name: 'name',
     text: '事件',
-    type: fieldType,
+    type: (mForm, { formValue }: any) => {
+      if (
+        props.config.src !== 'component' ||
+        (formValue.type === 'page-fragment-container' && formValue.pageFragmentId)
+      ) {
+        return 'cascader';
+      }
+      return 'select';
+    },
     labelWidth: '40px',
-    checkStrictly: true,
+    checkStrictly: () => props.config.src !== 'component',
     valueSeparator: '.',
     options: (mForm: FormState, { formValue }: any) => {
       let events: EventOption[] | CascaderOption[] = [];
@@ -95,11 +102,39 @@ const eventNameConfig = computed(() => {
 
       if (props.config.src === 'component') {
         events = eventsService.getEvent(formValue.type);
+
+        if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
+          const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
+          if (pageFragment) {
+            events = [
+              {
+                label: pageFragment.name || '迭代器容器',
+                value: pageFragment.id,
+                children: events,
+              },
+            ];
+            pageFragment.items.forEach((node) => {
+              traverseNode<MComponent | MContainer>(node, (node) => {
+                const nodeEvents = (node.type && eventsService.getEvent(node.type)) || [];
+
+                events.push({
+                  label: `${node.name}_${node.id}`,
+                  value: `${node.id}`,
+                  children: nodeEvents,
+                });
+              });
+            });
+
+            return events;
+          }
+        }
+
         return events.map((option) => ({
           text: option.label,
           value: option.value,
         }));
       }
+
       if (props.config.src === 'datasource') {
         // 从数据源类型中获取到相关事件
         events = dataSourceService.getFormEvent(formValue.type);
@@ -163,24 +198,63 @@ const targetCompConfig = computed(() => {
     text: '联动组件',
     type: 'ui-select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
+    onChange: (MForm: FormState, v: string, { model }: any) => {
+      model.method = '';
+      return v;
+    },
   };
   return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
 });
 
 // 联动组件动作配置
 const compActionConfig = computed(() => {
-  const defaultCompActionConfig = {
+  const defaultCompActionConfig: ChildConfig = {
     name: 'method',
     text: '动作',
-    type: 'select',
-    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
+    type: (mForm, { model }: any) => {
+      const to = editorService?.getNodeById(model.to);
+
+      if (to && to.type === 'page-fragment-container' && to.pageFragmentId) {
+        return 'cascader';
+      }
+
+      return 'select';
+    },
+    checkStrictly: () => props.config.src !== 'component',
+    display: (mForm, { model }: any) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
       const node = editorService?.getNodeById(model.to);
       if (!node?.type) return [];
 
-      return eventsService?.getMethod(node.type).map((option: any) => ({
-        text: option.label,
-        value: option.value,
+      let methods: EventOption[] | CascaderOption[] = [];
+
+      methods = eventsService?.getMethod(node.type) || [];
+
+      if (node.type === 'page-fragment-container' && node.pageFragmentId) {
+        const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
+        if (pageFragment) {
+          methods = [];
+          pageFragment.items.forEach((node: MComponent | MContainer) => {
+            traverseNode<MComponent | MContainer>(node, (node) => {
+              const nodeMethods = (node.type && eventsService?.getMethod(node.type)) || [];
+
+              if (nodeMethods.length) {
+                methods.push({
+                  label: `${node.name}_${node.id}`,
+                  value: `${node.id}`,
+                  children: nodeMethods,
+                });
+              }
+            });
+          });
+
+          return methods;
+        }
+      }
+
+      return methods.map((method) => ({
+        text: method.label,
+        value: method.value,
       }));
     },
   };

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,12 +7,11 @@ import {
   createDataSourceCondTarget,
   createDataSourceMethodTarget,
   createDataSourceTarget,
-  createRelatedCompTarget,
   DepTargetType,
   Target,
 } from '@tmagic/dep';
 import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { getNodes } from '@tmagic/utils';
+import { getNodes, isPage } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { EditorProps } from './editorProps';
@@ -268,17 +267,12 @@ export const initServiceEvents = (
     }
   };
 
-  const depUpdateHandler = (node: MNode) => {
-    updateNodeWhenDataSourceChange([node]);
-  };
-
   const collectedHandler = (nodes: MNode[]) => {
     updateNodeWhenDataSourceChange(nodes);
   };
 
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);
-  depService.on('dep-update', depUpdateHandler);
   depService.on('collected', collectedHandler);
 
   const initDataSourceDepTarget = (ds: DataSourceSchema) => {
@@ -307,7 +301,9 @@ export const initServiceEvents = (
     });
 
     if (Array.isArray(value.items)) {
-      depService.collect(value.items, true);
+      value.items.forEach((page) => {
+        depService.collectIdle([page], { pageId: page.id }, true);
+      });
     } else {
       depService.clear();
       delete value.dataSourceDeps;
@@ -334,14 +330,28 @@ export const initServiceEvents = (
     }
   };
 
+  const collectIdle = (nodes: MNode[], deep: boolean) => {
+    nodes.forEach((node) => {
+      let pageId: Id | undefined;
+
+      if (isPage(node)) {
+        pageId = node.id;
+      } else {
+        const info = editorService.getNodeInfo(node.id);
+        pageId = info.page?.id;
+      }
+      depService.collectIdle([node], { pageId }, deep);
+    });
+  };
+
   // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MNode[]) => {
-    depService.collect(nodes);
+    collectIdle(nodes, true);
   };
 
   // 节点更新，收集依赖
   const nodeUpdateHandler = (nodes: MNode[]) => {
-    depService.collect(nodes);
+    collectIdle(nodes, false);
   };
 
   // 节点删除，清除对齐的依赖收集
@@ -351,7 +361,7 @@ export const initServiceEvents = (
 
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage | MPageFragment) => {
-    depService.collect([page], true);
+    depService.collectIdle([page], { pageId: page.id }, true);
   };
 
   editorService.on('history-change', historyChangeHandler);
@@ -386,7 +396,9 @@ export const initServiceEvents = (
     removeDataSourceTarget(config.id);
     initDataSourceDepTarget(config);
 
-    depService.collect(root?.items || [], true);
+    (root?.items || []).forEach((page) => {
+      depService.collectIdle([page], { pageId: page.id }, true);
+    });
 
     const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
 
@@ -410,15 +422,9 @@ export const initServiceEvents = (
   dataSourceService.on('update', dataSourceUpdateHandler);
   dataSourceService.on('remove', dataSourceRemoveHandler);
 
-  // 初始化复制组件相关的依赖收集器
-  if (props.collectorOptions && !depService.hasTarget(DepTargetType.RELATED_COMP_WHEN_COPY)) {
-    depService.addTarget(createRelatedCompTarget(props.collectorOptions));
-  }
-
   onBeforeUnmount(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
-    depService.off('dep-update', depUpdateHandler);
     depService.off('collected', collectedHandler);
 
     editorService.off('history-change', historyChangeHandler);

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -58,26 +58,44 @@ const { codeBlockService, depService, editorService } = services || {};
 
 // 代码块列表
 const codeList = computed<TreeNodeData[]>(() =>
-  Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
+  Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
+    const target = depService?.getTarget(codeId, DepTargetType.CODE_BLOCK);
+
+    // 按页面分类显示
+    const pageList: TreeNodeData[] =
+      editorService?.get('root')?.items.map((page) => ({
+        name: page.devconfig?.tabName || page.name,
+        type: 'node',
+        id: `${codeId}_${page.id}`,
+        key: page.id,
+        items: [],
+      })) || [];
+
     // 组件节点
-    const compNodes: TreeNodeData[] = Object.entries(target.deps).map(([id, dep]) => ({
-      name: dep.name,
-      type: 'node',
-      id: `${target.id}_${id}`,
-      key: id,
-      items: dep.keys.map((key) => {
-        const data: TreeNodeData = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: 'key' };
-        return data;
-      }),
-    }));
+    if (target) {
+      Object.entries(target.deps).forEach(([id, dep]) => {
+        const page = pageList.find((page) => page.key === dep.data?.pageId);
+        page?.items?.push({
+          name: dep.name,
+          type: 'node',
+          id: `${page.id}_${id}`,
+          key: id,
+          items: dep.keys.map((key) => {
+            const data: TreeNodeData = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: 'key' };
+            return data;
+          }),
+        });
+      });
+    }
 
     const data: TreeNodeData = {
-      id: target.id,
-      key: target.id,
-      name: target.name,
+      id: codeId,
+      key: codeId,
+      name: code.name,
       type: 'code',
-      codeBlockContent: codeBlockService?.getCodeContentById(target.id),
-      items: compNodes,
+      codeBlockContent: codeBlockService?.getCodeContentById(codeId),
+      // 只有一个页面不显示页面分类
+      items: pageList.length > 1 ? pageList.filter((page) => page.items?.length) : pageList[0]?.items || [],
     };
 
     return data;

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -81,16 +81,19 @@ const getNodeTreeConfig = (id: string, dep: DepData[string], type?: string, pare
  * @param deps 依赖
  * @param type 依赖类型
  */
-const mergeChildren = (dsId: Id, items: any[], deps: DepData, type?: string) => {
+const mergeChildren = (dsId: Id, pageItems: any[], deps: DepData, type?: string) => {
   Object.entries(deps).forEach(([id, dep]) => {
+    // 按页面分类显示
+    const page = pageItems.find((page) => page.key === dep.data?.pageId);
+
     // 已经生成过的节点
-    const nodeItem = items.find((item) => item.key === id);
+    const nodeItem = page?.items.find((item: any) => item.key === id);
     // 节点存在，则追加依赖的key
     if (nodeItem) {
       nodeItem.items = nodeItem.items.concat(getKeyTreeConfig(dep, type, nodeItem.key));
     } else {
       // 节点不存在，则生成
-      items.push(getNodeTreeConfig(id, dep, type, dsId));
+      page?.items.push(getNodeTreeConfig(id, dep, type, page.id));
     }
   });
 };
@@ -101,7 +104,15 @@ const list = computed(() =>
     const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
     const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
 
-    const items: any[] = [];
+    const items =
+      editorService?.get('root')?.items.map((page) => ({
+        name: page.devconfig?.tabName || page.name,
+        type: 'node',
+        id: `${ds.id}_${page.id}`,
+        key: page.id,
+        items: [],
+      })) || [];
+
     // 数据源依赖分为三种类型：key/node、method、cond，是分开存储，这里将其合并展示
     mergeChildren(ds.id, items, dsDeps);
     mergeChildren(ds.id, items, dsMethodDeps, 'method');
@@ -112,7 +123,8 @@ const list = computed(() =>
       key: ds.id,
       name: ds.title,
       type: 'ds',
-      items,
+      // 只有一个页面不显示页面分类
+      items: items.length > 1 ? items.filter((page) => page.items.length) : items[0]?.items || [],
     };
   }),
 );

package/src/services/codeBlock.ts

@@ -17,21 +17,25 @@
  */
 
 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 { Target, type TargetOptions, Watcher } 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 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 +50,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 +95,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 +252,58 @@ class CodeBlock extends BaseService {
     return await this.getUniqueId();
   }
 
+  /**
+   * 复制时会带上组件关联的代码块
+   * @param config 组件节点配置
+   * @returns
+   */
+  public copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void {
+    const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
+    const copyData: CodeBlockDSL = {};
+
+    if (collectorOptions && typeof collectorOptions.isTarget === 'function') {
+      const customTarget = new Target({
+        ...collectorOptions,
+      });
+
+      const coperWatcher = new Watcher();
+
+      coperWatcher.addTarget(customTarget);
+
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
+
+      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;