@tmagic/editor 1.0.0-rc.6 → 1.0.0-rc.9

package/dist/types/src/Editor.vue.d.ts

@@ -62,6 +62,9 @@ declare const _default: DefineComponent<{
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
         type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
+        default: () => (core?: StageCore | undefined) => {
+            container: HTMLElement | null | undefined;
+        };
     };
     /** 编辑器初始化时默认选中的组件ID */
     defaultSelected: {
@@ -69,6 +72,7 @@ declare const _default: DefineComponent<{
     };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
+        default: (el: HTMLElement) => boolean;
     };
     stageRect: {
         type: PropType<StageRect>;
@@ -77,6 +81,9 @@ declare const _default: DefineComponent<{
         type: ObjectConstructor;
         default: () => {};
     };
+    updateDragEl: {
+        type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
+    };
 }, Services, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("props-panel-mounted" | "update:modelValue")[], "props-panel-mounted" | "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     /** 页面初始值 */
     modelValue: {
@@ -135,6 +142,9 @@ declare const _default: DefineComponent<{
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
         type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
+        default: () => (core?: StageCore | undefined) => {
+            container: HTMLElement | null | undefined;
+        };
     };
     /** 编辑器初始化时默认选中的组件ID */
     defaultSelected: {
@@ -142,6 +152,7 @@ declare const _default: DefineComponent<{
     };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
+        default: (el: HTMLElement) => boolean;
     };
     stageRect: {
         type: PropType<StageRect>;
@@ -150,6 +161,9 @@ declare const _default: DefineComponent<{
         type: ObjectConstructor;
         default: () => {};
     };
+    updateDragEl: {
+        type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
+    };
 }>> & {
     "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -157,12 +171,14 @@ declare const _default: DefineComponent<{
     menu: MenuBarData;
     layerContentMenu: MenuItem[];
     stageContentMenu: MenuItem[];
-    autoScrollIntoView: boolean;
     codeOptions: Record<string, any>;
     modelValue: MApp;
     componentGroupList: ComponentGroup[];
+    autoScrollIntoView: boolean;
     propsConfigs: Record<string, FormConfig>;
     propsValues: Record<string, MNode>;
     eventMethodList: Record<string, any>;
+    moveableOptions: MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions);
+    canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
 }>;
 export default _default;

package/dist/types/src/fields/Code.vue.d.ts

@@ -16,9 +16,9 @@ declare const _default: DefineComponent<Readonly<{
 }>>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    name: any;
-    config: any;
-    model: any;
-    prop: any;
+    readonly name?: any;
+    readonly config?: any;
+    readonly model?: any;
+    readonly prop?: any;
 }>;
 export default _default;

package/dist/types/src/fields/CodeLink.vue.d.ts

@@ -20,9 +20,7 @@ declare const _default: DefineComponent<{
     };
 }, {
     modelValue: Ref<{
-        form: {
-            [x: string]: any;
-        };
+        form: Record<string, any>;
     }>;
     formConfig: ComputedRef<{
         text: string;

package/dist/types/src/layouts/PropsPanel.vue.d.ts

@@ -1,9 +1,7 @@
 import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { FormValue } from '@tmagic/form';
 declare const _default: DefineComponent<{}, {
-    values: Ref<{
-        [x: string]: any;
-        [x: number]: any;
-    }>;
+    values: Ref<FormValue>;
     configForm: Ref<any>;
     curFormConfig: any;
     propsPanelSize: ComputedRef<unknown>;

package/dist/types/src/layouts/workspace/Workspace.vue.d.ts

@@ -1,35 +1,7 @@
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
 import type { MPage } from '@tmagic/schema';
-import type { MoveableOptions } from '@tmagic/stage';
-import StageCore from '@tmagic/stage';
-declare const _default: DefineComponent<{
-    runtimeUrl: StringConstructor;
-    autoScrollIntoView: BooleanConstructor;
-    render: {
-        type: PropType<() => HTMLDivElement>;
-    };
-    moveableOptions: {
-        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
-    };
-    canSelect: {
-        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
-    };
-}, {
+declare const _default: DefineComponent<{}, {
     workspace: Ref<HTMLDivElement | undefined>;
     page: ComputedRef<MPage | undefined>;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
-    runtimeUrl: StringConstructor;
-    autoScrollIntoView: BooleanConstructor;
-    render: {
-        type: PropType<() => HTMLDivElement>;
-    };
-    moveableOptions: {
-        type: PropType<MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions)>;
-    };
-    canSelect: {
-        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
-    };
-}>>, {
-    autoScrollIntoView: boolean;
-}>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/services/history.d.ts

@@ -15,24 +15,7 @@ export interface HistoryState {
 declare class History extends BaseService {
     state: {
         pageId?: Id | undefined;
-        pageSteps: {
-            [x: string]: {
-                pushElement: (element: StepValue) => void;
-                canUndo: () => boolean;
-                undo: () => StepValue | null;
-                canRedo: () => boolean;
-                redo: () => StepValue | null;
-                getCurrentElement: () => StepValue | null;
-            };
-            [x: number]: {
-                pushElement: (element: StepValue) => void;
-                canUndo: () => boolean;
-                undo: () => StepValue | null;
-                canRedo: () => boolean;
-                redo: () => StepValue | null;
-                getCurrentElement: () => StepValue | null;
-            };
-        };
+        pageSteps: Record<Id, UndoRedo<StepValue>>;
         canRedo: boolean;
         canUndo: boolean;
     };

package/dist/types/src/services/props.d.ts

@@ -1,5 +1,5 @@
 import type { FormConfig } from '@tmagic/form';
-import type { MNode } from '@tmagic/schema';
+import type { MNode, MPage } from '@tmagic/schema';
 import BaseService from './BaseService';
 declare class Props extends BaseService {
     private state;
@@ -29,7 +29,13 @@ declare class Props extends BaseService {
      * @param type 组件类型
      * @returns 组件初始值
      */
-    getPropsValue(type: string, defaultValue?: {}): Promise<any>;
+    getPropsValue(type: string, defaultValue?: Record<string, any>): Promise<any>;
+    createId(type: string | number): Promise<string>;
+    /**
+     * 将组件与组件的子元素配置中的id都设置成一个新的ID
+     * @param {Object} config 组件配置
+     */
+    setNewItemId(config: MNode, parent?: MPage): Promise<void>;
 }
 export declare type PropsService = Props;
 declare const _default: Props;

package/dist/types/src/type.d.ts

@@ -2,6 +2,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
+import type { MoveableOptions } from '@tmagic/stage';
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -21,6 +22,14 @@ export interface Services {
     componentListService: ComponentListService;
     uiService: UiService;
 }
+export interface StageOptions {
+    runtimeUrl: string;
+    autoScrollIntoView: boolean;
+    render: () => HTMLDivElement;
+    moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
+    canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
+    updateDragEl: (el: HTMLDivElement) => void;
+}
 export interface StoreState {
     root: MApp | null;
     page: MPage | null;

package/dist/types/src/utils/editor.d.ts

@@ -2,7 +2,6 @@ import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { Layout } from '../type';
 export declare const COPY_STORAGE_KEY = "$MagicEditorCopyData";
-export declare const generateId: (type: string | number) => string;
 /**
  * 获取所有页面配置
  * @param app DSL跟节点
@@ -27,11 +26,6 @@ export declare const generatePageName: (pageNameList: string[]) => string;
  * @returns {string}
  */
 export declare const generatePageNameByApp: (app: MApp) => string;
-/**
- * 将组件与组件的子元素配置中的id都设置成一个新的ID
- * @param {Object} config 组件配置
- */
-export declare const setNewItemId: (config: MNode, parent?: MPage | undefined) => void;
 /**
  * @param {Object} node
  * @returns {boolean}

package/dist/types/src/utils/props.d.ts

@@ -41,9 +41,16 @@ export declare const DEFAULT_CONFIG: FormConfig;
  * @param type 组件类型
  * @returns Object
  */
-export declare const getDefaultPropsValue: (type: string) => {
+export declare const getDefaultPropsValue: (type: string, id: string) => {
     type: string;
     id: string;
     style: {};
     name: string;
+    items: never[];
+} | {
+    type: string;
+    id: string;
+    style: {};
+    name: string;
+    items?: undefined;
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.9",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -22,9 +22,7 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build",
-    "test": "jest --maxWorkers=8",
-    "test:coverage": "jest --maxWorkers=16 --coverage"
+    "build": "vite build"
   },
   "engines": {
     "node": ">=14"
@@ -45,11 +43,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-rc.6",
-    "@tmagic/form": "^1.0.0-rc.6",
-    "@tmagic/schema": "^1.0.0-rc.6",
-    "@tmagic/stage": "^1.0.0-rc.6",
-    "@tmagic/utils": "^1.0.0-rc.6",
+    "@tmagic/core": "1.0.0-rc.9",
+    "@tmagic/form": "1.0.0-rc.9",
+    "@tmagic/schema": "1.0.0-rc.9",
+    "@tmagic/stage": "1.0.0-rc.9",
+    "@tmagic/utils": "1.0.0-rc.9",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.0",
@@ -62,31 +60,24 @@
     "vue": "^3.2.0"
   },
   "peerDependencies": {
-    "@tmagic/form": "^1.0.0-rc.1",
+    "@tmagic/form": "1.0.0-rc.9",
     "element-plus": "^2.2.0",
+    "monaco-editor": "^0.32.1",
     "vue": "^3.2.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
-    "@types/jest": "^27.5.1",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.2.0",
-    "@vue/test-utils": "^2.0.0-rc.20",
-    "@vue/vue3-jest": "^27.0.0-alpha.4",
-    "babel-jest": "^27.0.6",
-    "jest": "^27.5.1",
-    "jest-serializer-vue": "^2.0.2",
-    "jest-transform-stub": "^2.0.0",
+    "@vue/test-utils": "^2.0.0",
     "sass": "^1.35.1",
-    "ts-jest": "^27.1.4",
     "typescript": "^4.3.4",
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
-  },
-  "gitHead": "a93928e56d73b7924991e899a4dfaf9614cd357c"
+  }
 }

package/src/Editor.vue

@@ -12,13 +12,7 @@
 
     <template #workspace :editorService="editorService">
       <slot name="workspace">
-        <workspace
-          :runtime-url="runtimeUrl"
-          :auto-scroll-into-view="autoScrollIntoView"
-          :render="render"
-          :moveable-options="moveableOptions"
-          :can-select="canSelect"
-        >
+        <workspace>
           <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
           <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
           <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
@@ -37,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted, PropType, provide, toRaw, watch } from 'vue';
+import { defineComponent, onUnmounted, PropType, provide, reactive, toRaw, watch } from 'vue';
 
 import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
@@ -136,6 +130,9 @@ export default defineComponent({
     /** 画布中组件选中框的移动范围 */
     moveableOptions: {
       type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
+      default: () => (core?: StageCore) => ({
+        container: core?.renderer?.contentWindow?.document.getElementById('app'),
+      }),
     },
 
     /** 编辑器初始化时默认选中的组件ID */
@@ -145,6 +142,7 @@ export default defineComponent({
 
     canSelect: {
       type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+      default: (el: HTMLElement) => Boolean(el.id),
     },
 
     stageRect: {
@@ -155,6 +153,10 @@ export default defineComponent({
       type: Object,
       default: () => ({}),
     },
+
+    updateDragEl: {
+      type: Function as PropType<(el: HTMLDivElement, target: HTMLElement) => void>,
+    },
   },
 
   emits: ['props-panel-mounted', 'update:modelValue'],
@@ -249,6 +251,17 @@ export default defineComponent({
 
     provide('layerContentMenu', props.layerContentMenu);
     provide('stageContentMenu', props.stageContentMenu);
+    provide(
+      'stageOptions',
+      reactive({
+        runtimeUrl: props.runtimeUrl,
+        autoScrollIntoView: props.autoScrollIntoView,
+        render: props.render,
+        moveableOptions: props.moveableOptions,
+        canSelect: props.canSelect,
+        updateDragEl: props.updateDragEl,
+      }),
+    );
 
     return services;
   },

package/src/layouts/workspace/Stage.vue

@@ -28,7 +28,6 @@ import {
   markRaw,
   onMounted,
   onUnmounted,
-  PropType,
   ref,
   toRaw,
   watch,
@@ -37,11 +36,11 @@ import {
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MNode, MPage } from '@tmagic/schema';
-import type { MoveableOptions, Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
+import type { Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
-import { Layout, Services, StageRect } from '@editor/type';
+import { Layout, Services, StageOptions, StageRect } from '@editor/type';
 
 import ViewerMenu from './ViewerMenu.vue';
 
@@ -53,29 +52,9 @@ export default defineComponent({
     ScrollViewer,
   },
 
-  props: {
-    render: {
-      type: Function as PropType<() => HTMLDivElement>,
-    },
-
-    runtimeUrl: String,
-    autoScrollIntoView: Boolean,
-
-    canSelect: {
-      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-      default: (el: HTMLElement) => Boolean(el.id),
-    },
-
-    moveableOptions: {
-      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
-      default: () => (core?: StageCore) => ({
-        container: core?.renderer?.contentWindow?.document.getElementById('app'),
-      }),
-    },
-  },
-
-  setup(props) {
+  setup() {
     const services = inject<Services>('services');
+    const stageOptions = inject<StageOptions>('stageOptions');
 
     const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
     const stageContainer = ref<HTMLDivElement>();
@@ -95,15 +74,15 @@ export default defineComponent({
       if (stage) return;
 
       if (!stageContainer.value) return;
-      if (!(props.runtimeUrl || props.render) || !root.value) return;
+      if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
 
       stage = new StageCore({
-        render: props.render,
-        runtimeUrl: props.runtimeUrl,
+        render: stageOptions.render,
+        runtimeUrl: stageOptions.runtimeUrl,
         zoom: zoom.value,
-        autoScrollIntoView: props.autoScrollIntoView,
+        autoScrollIntoView: stageOptions.autoScrollIntoView,
         canSelect: (el, event, stop) => {
-          const elCanSelect = props.canSelect(el);
+          const elCanSelect = stageOptions.canSelect(el);
           // 在组件联动过程中不能再往下选择，返回并触发 ui-select
           if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
             document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
@@ -112,7 +91,8 @@ export default defineComponent({
 
           return elCanSelect;
         },
-        moveableOptions: props.moveableOptions,
+        moveableOptions: stageOptions.moveableOptions,
+        updateDragEl: stageOptions.updateDragEl,
       });
 
       services?.editorService.set('stage', markRaw(stage));

package/src/layouts/workspace/Workspace.vue

@@ -1,13 +1,6 @@
 <template>
   <div class="m-editor-workspace" tabindex="1" ref="workspace">
-    <magic-stage
-      :key="page?.id"
-      :runtime-url="runtimeUrl"
-      :auto-scroll-into-view="autoScrollIntoView"
-      :render="render"
-      :moveable-options="moveableOptions"
-      :can-select="canSelect"
-    ></magic-stage>
+    <magic-stage :key="page?.id"></magic-stage>
 
     <slot name="workspace-content"></slot>
 
@@ -19,12 +12,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, onMounted, onUnmounted, PropType, ref } from 'vue';
+import { computed, defineComponent, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
 import type { MNode, MPage } from '@tmagic/schema';
-import type { MoveableOptions } from '@tmagic/stage';
-import StageCore from '@tmagic/stage';
 import { isPage } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
@@ -40,23 +31,6 @@ export default defineComponent({
     MagicStage,
   },
 
-  props: {
-    runtimeUrl: String,
-    autoScrollIntoView: Boolean,
-
-    render: {
-      type: Function as PropType<() => HTMLDivElement>,
-    },
-
-    moveableOptions: {
-      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
-    },
-
-    canSelect: {
-      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-    },
-  },
-
   setup() {
     const services = inject<Services>('services');
     const workspace = ref<HTMLDivElement>();

package/src/services/editor.ts

@@ -38,7 +38,6 @@ import {
   initPosition,
   isFixed,
   setLayout,
-  setNewItemId,
 } from '@editor/utils/editor';
 import { log } from '@editor/utils/logger';
 
@@ -495,7 +494,7 @@ class Editor extends BaseService {
       return;
     }
 
-    setNewItemId(config, this.get('root'));
+    await propsService.setNewItemId(config, this.get('root'));
     if (config.style) {
       config.style = {
         ...config.style,

package/src/services/props.ts

@@ -17,11 +17,12 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep, mergeWith } from 'lodash-es';
+import { cloneDeep, mergeWith, random } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
-import type { MComponent, MNode } from '@tmagic/schema';
-import { toLine } from '@tmagic/utils';
+import type { Id, MComponent, MNode, MPage } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
+import { isPop, toLine } from '@tmagic/utils';
 
 import type { PropsState } from '@editor/type';
 import { DEFAULT_CONFIG, fillConfig, getDefaultPropsValue } from '@editor/utils/props';
@@ -35,7 +36,7 @@ class Props extends BaseService {
   });
 
   constructor() {
-    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue']);
+    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue', 'createId', 'setNewItemId']);
   }
 
   public setPropsConfigs(configs: Record<string, FormConfig>) {
@@ -87,7 +88,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件初始值
    */
-  public async getPropsValue(type: string, defaultValue = {}) {
+  public async getPropsValue(type: string, defaultValue: Record<string, any> = {}) {
     if (type === 'area') {
       const value = (await this.getPropsValue('button')) as MComponent;
       value.className = 'action-area';
@@ -98,13 +99,67 @@ class Props extends BaseService {
       return value;
     }
 
+    const data = cloneDeep(defaultValue as any);
+
+    await this.setNewItemId(data);
+
     return {
-      ...getDefaultPropsValue(type),
-      ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), cloneDeep(defaultValue)),
+      ...getDefaultPropsValue(type, await this.createId(type)),
+      ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), data),
     };
   }
+
+  public async createId(type: string | number): Promise<string> {
+    return `${type}_${random(10000, false)}`;
+  }
+
+  /**
+   * 将组件与组件的子元素配置中的id都设置成一个新的ID
+   * @param {Object} config 组件配置
+   */
+  /* eslint no-param-reassign: ["error", { "props": false }] */
+  public async setNewItemId(config: MNode, parent?: MPage) {
+    const oldId = config.id;
+
+    config.id = await this.createId(config.type || 'component');
+
+    // 只有弹窗在页面下的一级子元素才有效
+    if (isPop(config) && parent?.type === NodeType.PAGE) {
+      updatePopId(oldId, config.id, parent);
+    }
+
+    if (config.items && Array.isArray(config.items)) {
+      for (const item of config.items) {
+        await this.setNewItemId(item, config as MPage);
+      }
+    }
+  }
 }
 
+/**
+ * 复制页面时，需要把组件下关联的弹窗id换测复制出来的弹窗的id
+ * @param {number} oldId 复制的源弹窗id
+ * @param {number} popId 新的弹窗id
+ * @param {Object} pageConfig 页面配置
+ */
+const updatePopId = (oldId: Id, popId: Id, pageConfig: MPage) => {
+  pageConfig.items?.forEach((config) => {
+    if (config.pop === oldId) {
+      config.pop = popId;
+      return;
+    }
+
+    if (config.popId === oldId) {
+      config.popId = popId;
+      return;
+    }
+
+    if (Array.isArray(config.items)) {
+      updatePopId(oldId, popId, config as MPage);
+    }
+  });
+};
+
 export type PropsService = Props;
 
 export default new Props();

package/src/theme/workspace.scss

@@ -2,4 +2,8 @@
   height: 100%;
   width: 100%;
   user-select: none;
+
+  &:focus-visible {
+    outline: 0;
+  }
 }