@tmagic/editor 1.2.10 → 1.2.12

package/dist/tmagic-editor.js

@@ -1,23 +1,23 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, inject, createCommentVNode, ref, withModifiers, createTextVNode, toDisplayString, onMounted, onUnmounted, renderSlot, Fragment, createSlots, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, provide, withDirectives, Teleport, vShow, nextTick, toHandlers } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, inject, createCommentVNode, ref, Fragment, renderList, createTextVNode, withModifiers, toDisplayString, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, provide, withDirectives, Teleport, vShow, nextTick, toHandlers } from 'vue';
 import serialize from 'serialize-javascript';
-import { Edit, View, Delete, Close, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Link, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
-import { isEmpty, map, throttle, cloneDeep, mergeWith, isObject, uniq, forIn, difference, union, pick, keys, omit } from 'lodash-es';
+import { Edit, View, Delete, Close, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
+import { isEmpty, map, has, throttle, cloneDeep, mergeWith, isObject, uniq, forIn, difference, union, pick, keys } from 'lodash-es';
 import { createValues, MForm } from '@tmagic/form';
-import { HookType, NodeType } from '@tmagic/schema';
+import { HookType, ActionType, NodeType } from '@tmagic/schema';
 import { TMagicIcon, TMagicButton, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, tMagicMessageBox, TMagicCard, TMagicInput, TMagicDialog, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
 import * as monaco from 'monaco-editor';
-import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import Gesto from 'gesto';
 import { isPop, getNodePath, isNumber, isPage, toLine, datetimeFormatter, removeClassNameByClassName } from '@tmagic/utils';
+import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
-import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
+import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 
-const __default__$t = defineComponent({
+const __default__$v = defineComponent({
   name: "MEditorCode"
 });
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
-  ...__default__$t,
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  ...__default__$v,
   props: {
     model: null,
     name: null,
@@ -46,11 +46,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$s = defineComponent({
+const __default__$u = defineComponent({
   name: "MEditorCodeLink"
 });
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
-  ...__default__$s,
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  ...__default__$u,
   props: {
     config: null,
     model: null,
@@ -119,12 +119,12 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = ["src"];
-const __default__$r = defineComponent({
+const _hoisted_1$h = ["src"];
+const __default__$t = defineComponent({
   name: "MEditorIcon"
 });
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  ...__default__$r,
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  ...__default__$t,
   props: {
     icon: null
   },
@@ -143,7 +143,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$g)
+          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$h)
         ]),
         _: 1
       })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -162,14 +162,15 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$f = { class: "m-fields-code-select" };
-const __default__$q = defineComponent({
+const __default__$s = defineComponent({
   name: "MEditorCodeSelect"
 });
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  ...__default__$q,
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  ...__default__$s,
   props: {
-    config: null,
+    config: { default: () => ({
+      editable: true
+    }) },
     model: null,
     prop: null,
     name: null,
@@ -213,7 +214,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             defaultValue: {},
             itemsFunction: (row) => {
               const paramsConfig = getParamsConfig(row.codeId);
-              if (isEmpty(row.params) || !row.params) {
+              if (!row.params || isEmpty(row.params)) {
                 createValues(mForm, paramsConfig, {}, row.params);
               }
               return paramsConfig;
@@ -253,6 +254,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       return paramStatements.map((paramState) => ({
         labelWidth: "100px",
         text: paramState.name,
+        inline: true,
         ...paramState
       }));
     };
@@ -261,7 +263,9 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_table = resolveComponent("m-form-table");
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["m-fields-code-select", __props.config.className])
+      }, [
         createVNode(_component_m_form_table, {
           config: unref(tableConfig),
           model: __props.model[__props.name],
@@ -272,7 +276,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           onChange: changeHandler
         }, {
           operateCol: withCtx(({ scope }) => [
-            scope.row.codeId ? (openBlock(), createBlock(_sfc_main$s, {
+            scope.row.codeId && __props.config.editable ? (openBlock(), createBlock(_sfc_main$u, {
               key: 0,
               icon: unref(editable) ? unref(Edit) : unref(View),
               class: "edit-icon",
@@ -281,6 +285,326 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["config", "model", "prop", "size"])
+      ], 2);
+    };
+  }
+});
+
+const _hoisted_1$g = { class: "m-fields-code-select-col" };
+const __default__$r = defineComponent({
+  name: "MEditorCodeSelectCol"
+});
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  ...__default__$r,
+  props: {
+    config: null,
+    model: null,
+    prop: null,
+    name: null,
+    size: null
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const services = inject("services");
+    const mForm = inject("mForm");
+    const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
+    const codeParamsConfig = ref({
+      type: "fieldset",
+      items: [],
+      legend: "\u53C2\u6570",
+      labelWidth: "70px",
+      name: "params",
+      display: false
+    });
+    const selectConfig = {
+      type: "select",
+      text: "\u4EE3\u7801\u5757",
+      name: "codeId",
+      labelWidth: "70px",
+      options: () => {
+        if (codeDsl.value) {
+          return map(codeDsl.value, (value, key) => ({
+            text: `${value.name}\uFF08${key}\uFF09`,
+            label: `${value.name}\uFF08${key}\uFF09`,
+            value: key
+          }));
+        }
+        return [];
+      },
+      onChange: (formState, codeId, { model }) => {
+        model.params = {};
+      }
+    };
+    const getParamItemsConfig = (codeId) => {
+      if (!codeDsl.value)
+        return [];
+      const paramStatements = codeDsl.value[codeId]?.params;
+      if (isEmpty(paramStatements))
+        return [];
+      return paramStatements.map((paramState) => ({
+        labelWidth: "100px",
+        text: paramState.name,
+        ...paramState
+      }));
+    };
+    const getCodeParamsConfig = (codeId) => {
+      const paramsConfig = getParamItemsConfig(codeId);
+      if (!props.model.params || isEmpty(props.model.params)) {
+        props.model.params = {};
+        createValues(mForm, paramsConfig, {}, props.model.params);
+      }
+      codeParamsConfig.value = {
+        type: "fieldset",
+        items: paramsConfig,
+        legend: "\u53C2\u6570",
+        labelWidth: "70px",
+        name: "params",
+        display: !isEmpty(paramsConfig)
+      };
+    };
+    const onParamsChangeHandler = () => {
+      emit("change", props.model);
+    };
+    watch(
+      () => props.model.codeId,
+      (codeId) => {
+        if (!codeId)
+          return;
+        getCodeParamsConfig(codeId);
+      },
+      {
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      const _component_m_form_container = resolveComponent("m-form-container");
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+        createVNode(_component_m_form_container, {
+          config: selectConfig,
+          model: __props.model,
+          onChange: onParamsChangeHandler
+        }, null, 8, ["model"]),
+        createVNode(_component_m_form_container, {
+          config: codeParamsConfig.value,
+          model: __props.model,
+          onChange: onParamsChangeHandler
+        }, null, 8, ["config", "model"])
+      ]);
+    };
+  }
+});
+
+const _hoisted_1$f = { class: "m-fields-event-select" };
+const _hoisted_2$7 = {
+  key: 1,
+  class: "fullWidth"
+};
+const _hoisted_3$4 = /* @__PURE__ */ createTextVNode("\u6DFB\u52A0\u4E8B\u4EF6");
+const __default__$q = defineComponent({
+  name: "MEditorEventSelect"
+});
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  ...__default__$q,
+  props: {
+    config: null,
+    model: null,
+    prop: null,
+    name: null,
+    size: null
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const services = inject("services");
+    const eventNameConfig = computed(() => {
+      const defaultEventNameConfig = {
+        name: "name",
+        text: "\u4E8B\u4EF6",
+        type: "select",
+        labelWidth: "40px",
+        options: (mForm, { formValue }) => services?.eventsService.getEvent(formValue.type).map((option) => ({
+          text: option.label,
+          value: option.value
+        }))
+      };
+      return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
+    });
+    const actionTypeConfig = computed(() => {
+      const defaultActionTypeConfig = {
+        name: "actionType",
+        text: "\u8054\u52A8\u7C7B\u578B",
+        labelWidth: "70px",
+        type: "select",
+        defaultValue: ActionType.COMP,
+        options: () => [
+          {
+            text: "\u7EC4\u4EF6",
+            label: "\u7EC4\u4EF6",
+            value: ActionType.COMP
+          },
+          {
+            text: "\u4EE3\u7801",
+            label: "\u4EE3\u7801",
+            value: ActionType.CODE
+          }
+        ]
+      };
+      return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
+    });
+    const targetCompConfig = computed(() => {
+      const defaultTargetCompConfig = {
+        name: "to",
+        text: "\u8054\u52A8\u7EC4\u4EF6",
+        labelWidth: "70px",
+        type: "ui-select",
+        display: (mForm, { model }) => model.actionType === ActionType.COMP
+      };
+      return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
+    });
+    const compActionConfig = computed(() => {
+      const defaultCompActionConfig = {
+        name: "method",
+        text: "\u52A8\u4F5C",
+        labelWidth: "70px",
+        type: "select",
+        display: (mForm, { model }) => model.actionType === ActionType.COMP,
+        options: (mForm, { model }) => {
+          const node = services?.editorService.getNodeById(model.to);
+          if (!node?.type)
+            return [];
+          return services?.eventsService.getMethod(node.type).map((option) => ({
+            text: option.label,
+            value: option.value
+          }));
+        }
+      };
+      return { ...defaultCompActionConfig, ...props.config.compActionConfig };
+    });
+    const codeActionConfig = computed(() => {
+      const defaultCodeActionConfig = {
+        type: "code-select-col",
+        display: (mForm, { model }) => model.actionType === ActionType.CODE
+      };
+      return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
+    });
+    const tableConfig = computed(() => ({
+      type: "table",
+      name: "events",
+      items: [
+        {
+          name: "name",
+          label: "\u4E8B\u4EF6\u540D",
+          type: eventNameConfig.value.type,
+          options: (mForm, { formValue }) => services?.eventsService.getEvent(formValue.type).map((option) => ({
+            text: option.label,
+            value: option.value
+          }))
+        },
+        {
+          name: "to",
+          label: "\u8054\u52A8\u7EC4\u4EF6",
+          type: "ui-select"
+        },
+        {
+          name: "method",
+          label: "\u52A8\u4F5C",
+          type: compActionConfig.value.type,
+          options: (mForm, { model }) => {
+            const node = services?.editorService.getNodeById(model.to);
+            if (!node?.type)
+              return [];
+            return services?.eventsService.getMethod(node.type).map((option) => ({
+              text: option.label,
+              value: option.value
+            }));
+          }
+        }
+      ]
+    }));
+    const actionsConfig = computed(() => ({
+      items: [
+        {
+          type: "group-list",
+          name: "actions",
+          enableToggleMode: false,
+          items: [actionTypeConfig.value, targetCompConfig.value, compActionConfig.value, codeActionConfig.value]
+        }
+      ]
+    }));
+    const isOldVersion = computed(() => {
+      if (props.model[props.name].length === 0)
+        return false;
+      return !has(props.model[props.name][0], "actions");
+    });
+    const addEvent = () => {
+      const defaultEvent = {
+        name: "",
+        actions: []
+      };
+      if (!props.model[props.name]) {
+        props.model[props.name] = [];
+      }
+      props.model[props.name].push(defaultEvent);
+      onChangeHandler();
+    };
+    const removeEvent = (index) => {
+      if (!props.name)
+        return;
+      props.model[props.name].splice(index, 1);
+      onChangeHandler();
+    };
+    const onChangeHandler = () => {
+      emit("change", props.model);
+    };
+    return (_ctx, _cache) => {
+      const _component_m_form_container = resolveComponent("m-form-container");
+      const _component_m_form_panel = resolveComponent("m-form-panel");
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        unref(isOldVersion) ? (openBlock(), createBlock(_component_m_form_container, {
+          key: 0,
+          ref: "eventForm",
+          size: props.size,
+          model: __props.model,
+          config: unref(tableConfig),
+          onChange: onChangeHandler
+        }, null, 8, ["size", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$7, [
+          createVNode(unref(TMagicButton), {
+            class: "create-button",
+            type: "primary",
+            size: "small",
+            onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
+          }, {
+            default: withCtx(() => [
+              _hoisted_3$4
+            ]),
+            _: 1
+          }),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.model[__props.name], (cardItem, index) => {
+            return openBlock(), createBlock(_component_m_form_panel, {
+              key: index,
+              config: unref(actionsConfig),
+              model: cardItem,
+              onChange: onChangeHandler
+            }, {
+              header: withCtx(() => [
+                createVNode(_component_m_form_container, {
+                  class: "fullWidth",
+                  config: unref(eventNameConfig),
+                  model: cardItem,
+                  onChange: onChangeHandler
+                }, null, 8, ["config", "model"]),
+                createVNode(unref(TMagicButton), {
+                  style: { "color": "#f56c6c" },
+                  text: "",
+                  icon: unref(Delete),
+                  onClick: ($event) => removeEvent(index)
+                }, null, 8, ["icon", "onClick"])
+              ]),
+              _: 2
+            }, 1032, ["config", "model"]);
+          }), 128))
+        ]))
       ]);
     };
   }
@@ -704,341 +1028,211 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-class UndoRedo {
-  elementList;
-  listCursor;
-  listMaxSize;
-  constructor(listMaxSize = 200) {
-    const minListMaxSize = 2;
-    this.elementList = [];
-    this.listCursor = 0;
-    this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
-  }
-  pushElement(element) {
-    this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, cloneDeep(element));
-    this.listCursor += 1;
-    if (this.elementList.length > this.listMaxSize) {
-      this.elementList.shift();
-      this.listCursor -= 1;
-    }
-  }
-  canUndo() {
-    return this.listCursor > 1;
-  }
-  undo() {
-    if (!this.canUndo()) {
-      return null;
-    }
-    this.listCursor -= 1;
-    return this.getCurrentElement();
-  }
-  canRedo() {
-    return this.elementList.length > this.listCursor;
-  }
-  redo() {
-    if (!this.canRedo()) {
-      return null;
-    }
-    this.listCursor += 1;
-    return this.getCurrentElement();
-  }
-  getCurrentElement() {
-    if (this.listCursor < 1) {
-      return null;
-    }
-    return cloneDeep(this.elementList[this.listCursor - 1]);
-  }
-}
-
-const compose = (middleware) => {
-  if (!Array.isArray(middleware))
-    throw new TypeError("Middleware \u5FC5\u987B\u662F\u4E00\u4E2A\u6570\u7EC4!");
-  for (const fn of middleware) {
-    if (typeof fn !== "function")
-      throw new TypeError("Middleware \u5FC5\u987B\u7531\u51FD\u6570\u7EC4\u6210!");
-  }
-  return (args, next) => {
-    let index = -1;
-    return dispatch(0);
-    function dispatch(i) {
-      if (i <= index)
-        return Promise.reject(new Error("next() \u88AB\u591A\u6B21\u8C03\u7528"));
-      index = i;
-      let fn = middleware[i];
-      if (i === middleware.length && next)
-        fn = next;
-      if (!fn)
-        return Promise.resolve();
-      try {
-        return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
-      } catch (err) {
-        return Promise.reject(err);
-      }
-    }
-  };
-};
-
-const methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
-const isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
-const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
-  try {
-    let beforeArgs = args;
-    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-      beforeArgs = await beforeMethod(...beforeArgs) || [];
-      if (isError(beforeArgs))
-        throw beforeArgs;
-      if (!Array.isArray(beforeArgs)) {
-        beforeArgs = [beforeArgs];
-      }
-    }
-    let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
-    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-      returnValue = await afterMethod(returnValue, ...beforeArgs);
-      if (isError(returnValue))
-        throw returnValue;
-    }
-    return returnValue;
-  } catch (error) {
-    throw error;
-  }
-};
-class BaseService extends EventEmitter {
-  pluginOptionsList = {};
-  middleware = {};
-  taskList = [];
-  doingTask = false;
-  constructor(methods = [], serialMethods = []) {
-    super();
-    methods.forEach((propertyName) => {
-      const scope = this;
-      const sourceMethod = scope[propertyName];
-      const beforeMethodName = methodName("before", propertyName);
-      const afterMethodName = methodName("after", propertyName);
-      this.pluginOptionsList[beforeMethodName] = [];
-      this.pluginOptionsList[afterMethodName] = [];
-      this.middleware[propertyName] = [];
-      const fn = compose(this.middleware[propertyName]);
-      Object.defineProperty(scope, propertyName, {
-        value: async (...args) => {
-          if (!serialMethods.includes(propertyName)) {
-            return doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
-          }
-          const promise = new Promise((resolve, reject) => {
-            this.taskList.push(async () => {
-              try {
-                const value = await doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
-                resolve(value);
-              } catch (e) {
-                reject(e);
+const fillConfig = (config = []) => [
+  {
+    type: "tab",
+    items: [
+      {
+        title: "\u5C5E\u6027",
+        labelWidth: "80px",
+        items: [
+          {
+            text: "type",
+            name: "type",
+            type: "hidden"
+          },
+          {
+            name: "id",
+            type: "display",
+            text: "id"
+          },
+          {
+            name: "name",
+            text: "\u7EC4\u4EF6\u540D\u79F0"
+          },
+          ...config
+        ]
+      },
+      {
+        title: "\u6837\u5F0F",
+        labelWidth: "80px",
+        items: [
+          {
+            name: "style",
+            items: [
+              {
+                type: "fieldset",
+                legend: "\u4F4D\u7F6E",
+                items: [
+                  {
+                    name: "position",
+                    type: "checkbox",
+                    activeValue: "fixed",
+                    inactiveValue: "absolute",
+                    defaultValue: "absolute",
+                    text: "\u56FA\u5B9A\u5B9A\u4F4D"
+                  },
+                  {
+                    name: "left",
+                    text: "left"
+                  },
+                  {
+                    name: "top",
+                    text: "top",
+                    disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
+                  },
+                  {
+                    name: "right",
+                    text: "right"
+                  },
+                  {
+                    name: "bottom",
+                    text: "bottom",
+                    disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
+                  }
+                ]
+              },
+              {
+                type: "fieldset",
+                legend: "\u76D2\u5B50",
+                items: [
+                  {
+                    name: "width",
+                    text: "\u5BBD\u5EA6"
+                  },
+                  {
+                    name: "height",
+                    text: "\u9AD8\u5EA6"
+                  }
+                ]
+              },
+              {
+                type: "fieldset",
+                legend: "\u80CC\u666F",
+                items: [
+                  {
+                    name: "backgroundImage",
+                    text: "\u80CC\u666F\u56FE"
+                  },
+                  {
+                    name: "backgroundColor",
+                    text: "\u80CC\u666F\u989C\u8272",
+                    type: "colorPicker"
+                  },
+                  {
+                    name: "backgroundRepeat",
+                    text: "\u80CC\u666F\u56FE\u91CD\u590D",
+                    type: "select",
+                    defaultValue: "no-repeat",
+                    options: [
+                      { text: "repeat", value: "repeat" },
+                      { text: "repeat-x", value: "repeat-x" },
+                      { text: "repeat-y", value: "repeat-y" },
+                      { text: "no-repeat", value: "no-repeat" },
+                      { text: "inherit", value: "inherit" }
+                    ]
+                  },
+                  {
+                    name: "backgroundSize",
+                    text: "\u80CC\u666F\u56FE\u5927\u5C0F",
+                    defaultValue: "100% 100%"
+                  }
+                ]
+              },
+              {
+                type: "fieldset",
+                legend: "\u5B57\u4F53",
+                items: [
+                  {
+                    name: "color",
+                    text: "\u989C\u8272",
+                    type: "colorPicker"
+                  },
+                  {
+                    name: "fontSize",
+                    text: "\u5927\u5C0F"
+                  },
+                  {
+                    name: "fontWeight",
+                    text: "\u7C97\u7EC6"
+                  }
+                ]
+              },
+              {
+                type: "fieldset",
+                legend: "\u53D8\u5F62",
+                name: "transform",
+                items: [
+                  {
+                    name: "rotate",
+                    text: "\u65CB\u8F6C\u89D2\u5EA6"
+                  },
+                  {
+                    name: "scale",
+                    text: "\u7F29\u653E"
+                  }
+                ]
               }
-            });
-          });
-          if (!this.doingTask) {
-            this.doTask();
+            ]
           }
-          return promise;
-        }
-      });
-    });
-  }
-  use(options) {
-    Object.entries(options).forEach(([methodName2, method]) => {
-      if (typeof method === "function")
-        this.middleware[methodName2].push(method);
-    });
+        ]
+      },
+      {
+        title: "\u4E8B\u4EF6",
+        items: [
+          {
+            name: "events",
+            type: "event-select"
+          }
+        ]
+      },
+      {
+        title: "\u9AD8\u7EA7",
+        lazy: true,
+        items: [
+          {
+            name: "created",
+            text: "created",
+            labelWidth: "100px",
+            type: "code-select"
+          },
+          {
+            name: "mounted",
+            text: "mounted",
+            labelWidth: "100px",
+            type: "code-select"
+          }
+        ]
+      }
+    ]
   }
-  usePlugin(options) {
-    Object.entries(options).forEach(([methodName2, method]) => {
-      if (typeof method === "function")
-        this.pluginOptionsList[methodName2].push(method);
-    });
+];
+
+const log = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.log("magic editor: ", ...args);
   }
-  removeAllPlugins() {
-    Object.keys(this.pluginOptionsList).forEach((key) => {
-      this.pluginOptionsList[key] = [];
-    });
-    Object.keys(this.middleware).forEach((key) => {
-      this.middleware[key] = [];
-    });
+};
+const info = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.info("magic editor: ", ...args);
   }
-  async doTask() {
-    this.doingTask = true;
-    let task = this.taskList.shift();
-    while (task) {
-      await task();
-      task = this.taskList.shift();
-    }
-    this.doingTask = false;
+};
+const warn = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.warn("magic editor: ", ...args);
   }
-}
-
-class History extends BaseService {
-  state = reactive({
-    pageSteps: {},
-    pageId: void 0,
-    canRedo: false,
-    canUndo: false
-  });
-  constructor() {
-    super([]);
-    this.on("change", this.setCanUndoRedo);
-  }
-  reset() {
-    this.state.pageSteps = {};
-    this.state.pageId = void 0;
-    this.state.canRedo = false;
-    this.state.canUndo = false;
-  }
-  changePage(page) {
-    if (!page)
-      return;
-    this.state.pageId = page.id;
-    if (!this.state.pageSteps[this.state.pageId]) {
-      const undoRedo = new UndoRedo();
-      undoRedo.pushElement({
-        data: page,
-        modifiedNodeIds: /* @__PURE__ */ new Map(),
-        nodeId: page.id
-      });
-      this.state.pageSteps[this.state.pageId] = undoRedo;
-    }
-    this.setCanUndoRedo();
-    this.emit("page-change", this.state.pageSteps[this.state.pageId]);
-  }
-  resetState() {
-    this.state.pageId = void 0;
-    this.state.pageSteps = {};
-    this.state.canRedo = false;
-    this.state.canUndo = false;
-  }
-  push(state) {
-    const undoRedo = this.getUndoRedo();
-    if (!undoRedo)
-      return null;
-    undoRedo.pushElement(state);
-    this.emit("change", state);
-    return state;
-  }
-  undo() {
-    const undoRedo = this.getUndoRedo();
-    if (!undoRedo)
-      return null;
-    const state = undoRedo.undo();
-    this.emit("change", state);
-    return state;
-  }
-  redo() {
-    const undoRedo = this.getUndoRedo();
-    if (!undoRedo)
-      return null;
-    const state = undoRedo.redo();
-    this.emit("change", state);
-    return state;
-  }
-  destroy() {
-    this.resetState();
-    this.removeAllListeners();
-    this.removeAllPlugins();
-  }
-  getUndoRedo() {
-    if (!this.state.pageId)
-      return null;
-    return this.state.pageSteps[this.state.pageId];
-  }
-  setCanUndoRedo() {
-    const undoRedo = this.getUndoRedo();
-    this.state.canRedo = undoRedo?.canRedo() || false;
-    this.state.canUndo = undoRedo?.canUndo() || false;
-  }
-}
-const historyService = new History();
-
-var Protocol = /* @__PURE__ */ ((Protocol2) => {
-  Protocol2["OBJECT"] = "object";
-  Protocol2["JSON"] = "json";
-  Protocol2["STRING"] = "string";
-  Protocol2["NUMBER"] = "number";
-  Protocol2["BOOLEAN"] = "boolean";
-  return Protocol2;
-})(Protocol || {});
-class WebStorage extends BaseService {
-  storage = globalThis.localStorage;
-  namespace = "tmagic";
-  constructor() {
-    super(["getStorage", "getNamespace", "clear", "getItem", "removeItem", "setItem"]);
-  }
-  async getStorage() {
-    return this.storage;
-  }
-  async getNamespace() {
-    return this.namespace;
-  }
-  async clear() {
-    const storage2 = await this.getStorage();
-    storage2.clear();
-  }
-  async getItem(key, options = {}) {
-    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
-    const { protocol = options.protocol, item } = this.getValueAndProtocol(
-      storage.getItem(`${options.namespace || namespace}:${key}`)
-    );
-    if (item === null)
-      return null;
-    switch (protocol) {
-      case "object" /* OBJECT */:
-        return eval(`(${item})`);
-      case "json" /* JSON */:
-        return JSON.parse(item);
-      case "number" /* NUMBER */:
-        return Number(item);
-      case "boolean" /* BOOLEAN */:
-        return Boolean(item);
-      default:
-        return item;
-    }
-  }
-  async key(index) {
-    const storage2 = await this.getStorage();
-    return storage2.key(index);
-  }
-  async removeItem(key2, options2 = {}) {
-    const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
-    storage2.removeItem(`${options2.namespace || namespace2}:${key2}`);
-  }
-  async setItem(key2, value, options2 = {}) {
-    const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
-    let item2 = value;
-    const protocol2 = options2.protocol ? `${options2.protocol}:` : "";
-    if (typeof value === "string" /* STRING */ || typeof value === "number" /* NUMBER */) {
-      item2 = `${protocol2}${value}`;
-    } else {
-      item2 = `${protocol2}${serialize(value)}`;
-    }
-    storage2.setItem(`${options2.namespace || namespace2}:${key2}`, item2);
-  }
-  destroy() {
-    this.removeAllListeners();
-    this.removeAllPlugins();
+};
+const debug = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.debug("magic editor: ", ...args);
   }
-  getValueAndProtocol(value) {
-    let protocol2 = "";
-    if (value === null) {
-      return {
-        item: value,
-        protocol: protocol2
-      };
-    }
-    const item2 = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
-      protocol2 = $1;
-      return $3;
-    });
-    return {
-      protocol: protocol2,
-      item: item2
-    };
+};
+const error = (...args) => {
+  if (process.env.NODE_ENV === "development") {
+    console.error("magic editor: ", ...args);
   }
-}
-const storageService = new WebStorage();
+};
 
 var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
   ColumnLayout2["LEFT"] = "left";
@@ -1231,143 +1425,479 @@ const serializeConfig = (config) => serialize(config, {
   unsafe: true
 }).replace(/"(\w+)":\s/g, "$1: ");
 
-class Props extends BaseService {
-  state = reactive({
-    propsConfigMap: {},
-    propsValueMap: {}
-  });
-  constructor() {
-    super([
-      "setPropsConfig",
-      "getPropsConfig",
-      "setPropsValue",
-      "getPropsValue",
-      "createId",
-      "setNewItemId",
-      "fillConfig",
-      "getDefaultPropsValue"
-    ]);
-  }
-  setPropsConfigs(configs) {
-    Object.keys(configs).forEach((type) => {
-      this.setPropsConfig(toLine(type), configs[type]);
-    });
-    this.emit("props-configs-change");
+class UndoRedo {
+  elementList;
+  listCursor;
+  listMaxSize;
+  constructor(listMaxSize = 200) {
+    const minListMaxSize = 2;
+    this.elementList = [];
+    this.listCursor = 0;
+    this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
   }
-  async fillConfig(config) {
-    return fillConfig(config);
+  pushElement(element) {
+    this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, cloneDeep(element));
+    this.listCursor += 1;
+    if (this.elementList.length > this.listMaxSize) {
+      this.elementList.shift();
+      this.listCursor -= 1;
+    }
   }
-  async setPropsConfig(type, config) {
-    this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
+  canUndo() {
+    return this.listCursor > 1;
   }
-  async getPropsConfig(type) {
-    if (type === "area") {
-      return await this.getPropsConfig("button");
+  undo() {
+    if (!this.canUndo()) {
+      return null;
     }
-    return cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
+    this.listCursor -= 1;
+    return this.getCurrentElement();
   }
-  setPropsValues(values) {
-    Object.keys(values).forEach((type) => {
-      this.setPropsValue(toLine(type), values[type]);
-    });
+  canRedo() {
+    return this.elementList.length > this.listCursor;
   }
-  async setPropsValue(type, value) {
-    this.state.propsValueMap[type] = value;
+  redo() {
+    if (!this.canRedo()) {
+      return null;
+    }
+    this.listCursor += 1;
+    return this.getCurrentElement();
   }
-  async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
-    if (type === "area") {
-      const value = await this.getPropsValue("button");
-      value.className = "action-area";
-      value.text = "";
-      if (value.style) {
-        value.style.backgroundColor = "rgba(255, 255, 255, 0)";
-      }
-      return value;
+  getCurrentElement() {
+    if (this.listCursor < 1) {
+      return null;
     }
-    const [id, defaultPropsValue, data] = await Promise.all([
-      this.createId(type),
-      this.getDefaultPropsValue(type),
-      this.setNewItemId(
-        cloneDeep({
-          type,
-          ...defaultValue
-        })
-      )
-    ]);
-    return {
-      id,
-      ...defaultPropsValue,
-      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
-    };
+    return cloneDeep(this.elementList[this.listCursor - 1]);
   }
-  async createId(type) {
-    return `${type}_${this.guid()}`;
+}
+
+const compose = (middleware) => {
+  if (!Array.isArray(middleware))
+    throw new TypeError("Middleware \u5FC5\u987B\u662F\u4E00\u4E2A\u6570\u7EC4!");
+  for (const fn of middleware) {
+    if (typeof fn !== "function")
+      throw new TypeError("Middleware \u5FC5\u987B\u7531\u51FD\u6570\u7EC4\u6210!");
   }
-  async setNewItemId(config) {
-    config.id = await this.createId(config.type || "component");
-    if (config.items && Array.isArray(config.items)) {
-      for (const item of config.items) {
-        await this.setNewItemId(item);
+  return (args, next) => {
+    let index = -1;
+    return dispatch(0);
+    function dispatch(i) {
+      if (i <= index)
+        return Promise.reject(new Error("next() \u88AB\u591A\u6B21\u8C03\u7528"));
+      index = i;
+      let fn = middleware[i];
+      if (i === middleware.length && next)
+        fn = next;
+      if (!fn)
+        return Promise.resolve();
+      try {
+        return Promise.resolve(fn(...args, dispatch.bind(null, i + 1)));
+      } catch (err) {
+        return Promise.reject(err);
       }
     }
-    return config;
+  };
+};
+
+const methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
+const isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
+const doAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
+  try {
+    let beforeArgs = args;
+    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+      beforeArgs = await beforeMethod(...beforeArgs) || [];
+      if (isError(beforeArgs))
+        throw beforeArgs;
+      if (!Array.isArray(beforeArgs)) {
+        beforeArgs = [beforeArgs];
+      }
+    }
+    let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
+    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+      returnValue = await afterMethod(returnValue, ...beforeArgs);
+      if (isError(returnValue))
+        throw returnValue;
+    }
+    return returnValue;
+  } catch (error) {
+    throw error;
   }
-  async getDefaultPropsValue(type) {
-    return ["page", "container"].includes(type) ? {
-      type,
-      layout: "absolute",
-      style: {},
-      name: type,
-      items: []
-    } : {
-      type,
-      style: {},
-      name: type
-    };
+};
+class BaseService extends EventEmitter {
+  pluginOptionsList = {};
+  middleware = {};
+  taskList = [];
+  doingTask = false;
+  constructor(methods = [], serialMethods = []) {
+    super();
+    methods.forEach((propertyName) => {
+      const scope = this;
+      const sourceMethod = scope[propertyName];
+      const beforeMethodName = methodName("before", propertyName);
+      const afterMethodName = methodName("after", propertyName);
+      this.pluginOptionsList[beforeMethodName] = [];
+      this.pluginOptionsList[afterMethodName] = [];
+      this.middleware[propertyName] = [];
+      const fn = compose(this.middleware[propertyName]);
+      Object.defineProperty(scope, propertyName, {
+        value: async (...args) => {
+          if (!serialMethods.includes(propertyName)) {
+            return doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+          }
+          const promise = new Promise((resolve, reject) => {
+            this.taskList.push(async () => {
+              try {
+                const value = await doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                resolve(value);
+              } catch (e) {
+                reject(e);
+              }
+            });
+          });
+          if (!this.doingTask) {
+            this.doTask();
+          }
+          return promise;
+        }
+      });
+    });
+  }
+  use(options) {
+    Object.entries(options).forEach(([methodName2, method]) => {
+      if (typeof method === "function")
+        this.middleware[methodName2].push(method);
+    });
+  }
+  usePlugin(options) {
+    Object.entries(options).forEach(([methodName2, method]) => {
+      if (typeof method === "function")
+        this.pluginOptionsList[methodName2].push(method);
+    });
+  }
+  removeAllPlugins() {
+    Object.keys(this.pluginOptionsList).forEach((key) => {
+      this.pluginOptionsList[key] = [];
+    });
+    Object.keys(this.middleware).forEach((key) => {
+      this.middleware[key] = [];
+    });
+  }
+  async doTask() {
+    this.doingTask = true;
+    let task = this.taskList.shift();
+    while (task) {
+      await task();
+      task = this.taskList.shift();
+    }
+    this.doingTask = false;
+  }
+}
+
+class History extends BaseService {
+  state = reactive({
+    pageSteps: {},
+    pageId: void 0,
+    canRedo: false,
+    canUndo: false
+  });
+  constructor() {
+    super([]);
+    this.on("change", this.setCanUndoRedo);
+  }
+  reset() {
+    this.state.pageSteps = {};
+    this.state.pageId = void 0;
+    this.state.canRedo = false;
+    this.state.canUndo = false;
+  }
+  changePage(page) {
+    if (!page)
+      return;
+    this.state.pageId = page.id;
+    if (!this.state.pageSteps[this.state.pageId]) {
+      const undoRedo = new UndoRedo();
+      undoRedo.pushElement({
+        data: page,
+        modifiedNodeIds: /* @__PURE__ */ new Map(),
+        nodeId: page.id
+      });
+      this.state.pageSteps[this.state.pageId] = undoRedo;
+    }
+    this.setCanUndoRedo();
+    this.emit("page-change", this.state.pageSteps[this.state.pageId]);
   }
   resetState() {
-    this.state.propsConfigMap = {};
-    this.state.propsValueMap = {};
+    this.state.pageId = void 0;
+    this.state.pageSteps = {};
+    this.state.canRedo = false;
+    this.state.canUndo = false;
+  }
+  push(state) {
+    const undoRedo = this.getUndoRedo();
+    if (!undoRedo)
+      return null;
+    undoRedo.pushElement(state);
+    this.emit("change", state);
+    return state;
+  }
+  undo() {
+    const undoRedo = this.getUndoRedo();
+    if (!undoRedo)
+      return null;
+    const state = undoRedo.undo();
+    this.emit("change", state);
+    return state;
+  }
+  redo() {
+    const undoRedo = this.getUndoRedo();
+    if (!undoRedo)
+      return null;
+    const state = undoRedo.redo();
+    this.emit("change", state);
+    return state;
   }
   destroy() {
     this.resetState();
     this.removeAllListeners();
     this.removeAllPlugins();
   }
-  guid(digit = 8) {
-    return "x".repeat(digit).replace(/[xy]/g, (c) => {
-      const r = Math.random() * 16 | 0;
-      const v = c === "x" ? r : r & 3 | 8;
-      return v.toString(16);
-    });
+  getUndoRedo() {
+    if (!this.state.pageId)
+      return null;
+    return this.state.pageSteps[this.state.pageId];
+  }
+  setCanUndoRedo() {
+    const undoRedo = this.getUndoRedo();
+    this.state.canRedo = undoRedo?.canRedo() || false;
+    this.state.canUndo = undoRedo?.canUndo() || false;
   }
 }
-const propsService = new Props();
+const historyService = new History();
 
-const beforePaste = async (position, config) => {
-  if (!config[0]?.style)
-    return config;
-  const curNode = editorService.get("node");
-  const { left: referenceLeft, top: referenceTop } = config[0].style;
-  const pasteConfigs = await Promise.all(
-    config.map(async (configItem) => {
-      const { offsetX = 0, offsetY = 0, ...positionClone } = position;
-      let pastePosition = positionClone;
-      if (!isEmpty(pastePosition) && curNode?.items) {
-        pastePosition = getPositionInContainer(pastePosition, curNode.id);
-      }
-      if (pastePosition.left && configItem.style?.left) {
-        pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
-      }
-      if (pastePosition.top && configItem.style?.top) {
-        pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
-      }
-      const pasteConfig = await propsService.setNewItemId(configItem);
-      if (pasteConfig.style) {
-        const { left, top } = pasteConfig.style;
-        if (typeof left === "number" || !!left && !isNaN(Number(left))) {
-          pasteConfig.style.left = Number(left) + offsetX;
-        }
+var Protocol = /* @__PURE__ */ ((Protocol2) => {
+  Protocol2["OBJECT"] = "object";
+  Protocol2["JSON"] = "json";
+  Protocol2["STRING"] = "string";
+  Protocol2["NUMBER"] = "number";
+  Protocol2["BOOLEAN"] = "boolean";
+  return Protocol2;
+})(Protocol || {});
+class WebStorage extends BaseService {
+  storage = globalThis.localStorage;
+  namespace = "tmagic";
+  constructor() {
+    super(["getStorage", "getNamespace", "clear", "getItem", "removeItem", "setItem"]);
+  }
+  async getStorage() {
+    return this.storage;
+  }
+  async getNamespace() {
+    return this.namespace;
+  }
+  async clear() {
+    const storage2 = await this.getStorage();
+    storage2.clear();
+  }
+  async getItem(key, options = {}) {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    const { protocol = options.protocol, item } = this.getValueAndProtocol(
+      storage.getItem(`${options.namespace || namespace}:${key}`)
+    );
+    if (item === null)
+      return null;
+    switch (protocol) {
+      case "object" /* OBJECT */:
+        return eval(`(${item})`);
+      case "json" /* JSON */:
+        return JSON.parse(item);
+      case "number" /* NUMBER */:
+        return Number(item);
+      case "boolean" /* BOOLEAN */:
+        return Boolean(item);
+      default:
+        return item;
+    }
+  }
+  async key(index) {
+    const storage2 = await this.getStorage();
+    return storage2.key(index);
+  }
+  async removeItem(key2, options2 = {}) {
+    const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    storage2.removeItem(`${options2.namespace || namespace2}:${key2}`);
+  }
+  async setItem(key2, value, options2 = {}) {
+    const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    let item2 = value;
+    const protocol2 = options2.protocol ? `${options2.protocol}:` : "";
+    if (typeof value === "string" /* STRING */ || typeof value === "number" /* NUMBER */) {
+      item2 = `${protocol2}${value}`;
+    } else {
+      item2 = `${protocol2}${serialize(value)}`;
+    }
+    storage2.setItem(`${options2.namespace || namespace2}:${key2}`, item2);
+  }
+  destroy() {
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+  getValueAndProtocol(value) {
+    let protocol2 = "";
+    if (value === null) {
+      return {
+        item: value,
+        protocol: protocol2
+      };
+    }
+    const item2 = value.replace(new RegExp(`^(${Object.values(Protocol).join("|")})(:)(.+)`), (_$0, $1, _$2, $3) => {
+      protocol2 = $1;
+      return $3;
+    });
+    return {
+      protocol: protocol2,
+      item: item2
+    };
+  }
+}
+const storageService = new WebStorage();
+
+class Props extends BaseService {
+  state = reactive({
+    propsConfigMap: {},
+    propsValueMap: {}
+  });
+  constructor() {
+    super([
+      "setPropsConfig",
+      "getPropsConfig",
+      "setPropsValue",
+      "getPropsValue",
+      "createId",
+      "setNewItemId",
+      "fillConfig",
+      "getDefaultPropsValue"
+    ]);
+  }
+  setPropsConfigs(configs) {
+    Object.keys(configs).forEach((type) => {
+      this.setPropsConfig(toLine(type), configs[type]);
+    });
+    this.emit("props-configs-change");
+  }
+  async fillConfig(config) {
+    return fillConfig(config);
+  }
+  async setPropsConfig(type, config) {
+    this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
+  }
+  async getPropsConfig(type) {
+    if (type === "area") {
+      return await this.getPropsConfig("button");
+    }
+    return cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
+  }
+  setPropsValues(values) {
+    Object.keys(values).forEach((type) => {
+      this.setPropsValue(toLine(type), values[type]);
+    });
+  }
+  async setPropsValue(type, value) {
+    this.state.propsValueMap[type] = value;
+  }
+  async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
+    if (type === "area") {
+      const value = await this.getPropsValue("button");
+      value.className = "action-area";
+      value.text = "";
+      if (value.style) {
+        value.style.backgroundColor = "rgba(255, 255, 255, 0)";
+      }
+      return value;
+    }
+    const [id, defaultPropsValue, data] = await Promise.all([
+      this.createId(type),
+      this.getDefaultPropsValue(type),
+      this.setNewItemId(
+        cloneDeep({
+          type,
+          ...defaultValue
+        })
+      )
+    ]);
+    return {
+      id,
+      ...defaultPropsValue,
+      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
+    };
+  }
+  async createId(type) {
+    return `${type}_${this.guid()}`;
+  }
+  async setNewItemId(config) {
+    config.id = await this.createId(config.type || "component");
+    if (config.items && Array.isArray(config.items)) {
+      for (const item of config.items) {
+        await this.setNewItemId(item);
+      }
+    }
+    return config;
+  }
+  async getDefaultPropsValue(type) {
+    return ["page", "container"].includes(type) ? {
+      type,
+      layout: "absolute",
+      style: {},
+      name: type,
+      items: []
+    } : {
+      type,
+      style: {},
+      name: type
+    };
+  }
+  resetState() {
+    this.state.propsConfigMap = {};
+    this.state.propsValueMap = {};
+  }
+  destroy() {
+    this.resetState();
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+  guid(digit = 8) {
+    return "x".repeat(digit).replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c === "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  }
+}
+const propsService = new Props();
+
+const beforePaste = async (position, config) => {
+  if (!config[0]?.style)
+    return config;
+  const curNode = editorService.get("node");
+  const { left: referenceLeft, top: referenceTop } = config[0].style;
+  const pasteConfigs = await Promise.all(
+    config.map(async (configItem) => {
+      const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+      let pastePosition = positionClone;
+      if (!isEmpty(pastePosition) && curNode?.items) {
+        pastePosition = getPositionInContainer(pastePosition, curNode.id);
+      }
+      if (pastePosition.left && configItem.style?.left) {
+        pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
+      }
+      if (pastePosition.top && configItem.style?.top) {
+        pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+      }
+      const pasteConfig = await propsService.setNewItemId(configItem);
+      if (pasteConfig.style) {
+        const { left, top } = pasteConfig.style;
+        if (typeof left === "number" || !!left && !isNaN(Number(left))) {
+          pasteConfig.style.left = Number(left) + offsetX;
+        }
         if (typeof top === "number" || !!top && !isNaN(Number(top))) {
           pasteConfig.style.top = Number(top) + offsetY;
         }
@@ -1537,7 +2067,7 @@ class Editor$1 extends BaseService {
       historyService.resetState();
     }
     if (node?.id) {
-      this.get("stage")?.renderer.runtime?.getApp?.().page?.emit(
+      this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
         "editor:select",
         {
           node,
@@ -1888,437 +2418,148 @@ class Editor$1 extends BaseService {
   }
   async moveToContainer(config, targetId) {
     const root = cloneDeep(this.get("root"));
-    const { node, parent } = this.getNodeInfo(config.id, false);
-    const target = this.getNodeById(targetId, false);
-    const stage = this.get("stage");
-    if (root && node && parent && stage) {
-      const index = getNodeIndex(node, parent);
-      parent.items?.splice(index, 1);
-      await stage.remove({ id: node.id, parentId: parent.id, root });
-      const layout = await this.getLayout(target);
-      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
-        if (Array.isArray(srcValue)) {
-          return srcValue;
-        }
-      });
-      newConfig.style = getInitPositionStyle(newConfig.style, layout);
-      target.items.push(newConfig);
-      await stage.select(targetId);
-      const targetParent = this.getParentById(target.id);
-      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root });
-      await this.select(newConfig);
-      stage.select(newConfig.id);
-      this.addModifiedNodeId(target.id);
-      this.addModifiedNodeId(parent.id);
-      this.pushHistoryState();
-      return newConfig;
-    }
-  }
-  async undo() {
-    const value = historyService.undo();
-    await this.changeHistoryState(value);
-    return value;
-  }
-  async redo() {
-    const value = historyService.redo();
-    await this.changeHistoryState(value);
-    return value;
-  }
-  async move(left, top) {
-    const node = toRaw(this.get("node"));
-    if (!node || isPage(node))
-      return;
-    const { style, id, type } = node;
-    if (!style || style.position !== "absolute")
-      return;
-    if (top && !isNumber(style.top))
-      return;
-    if (left && !isNumber(style.left))
-      return;
-    this.update({
-      id,
-      type,
-      style: {
-        ...style,
-        left: Number(style.left) + left,
-        top: Number(style.top) + top
-      }
-    });
-  }
-  resetState() {
-    this.set("root", null);
-    this.set("node", null);
-    this.set("nodes", []);
-    this.set("page", null);
-    this.set("parent", null);
-    this.set("stage", null);
-    this.set("highlightNode", null);
-    this.set("modifiedNodeIds", /* @__PURE__ */ new Map());
-    this.set("pageLength", 0);
-  }
-  destroy() {
-    this.removeAllListeners();
-    this.resetState();
-    this.removeAllPlugins();
-  }
-  resetModifiedNodeId() {
-    this.get("modifiedNodeIds").clear();
-  }
-  addModifiedNodeId(id) {
-    if (!this.isHistoryStateChange) {
-      this.get("modifiedNodeIds").set(id, id);
-    }
-  }
-  pushHistoryState() {
-    const curNode = cloneDeep(toRaw(this.get("node")));
-    const page = this.get("page");
-    if (!this.isHistoryStateChange && curNode && page) {
-      historyService.push({
-        data: cloneDeep(toRaw(page)),
-        modifiedNodeIds: this.get("modifiedNodeIds"),
-        nodeId: curNode.id
-      });
-    }
-    this.isHistoryStateChange = false;
-  }
-  async changeHistoryState(value) {
-    if (!value)
-      return;
-    this.isHistoryStateChange = true;
-    await this.update(value.data);
-    this.set("modifiedNodeIds", value.modifiedNodeIds);
-    setTimeout(async () => {
-      if (!value.nodeId)
-        return;
-      await this.select(value.nodeId);
-      this.get("stage")?.select(value.nodeId);
-    }, 0);
-    this.emit("history-change", value.data);
-  }
-  async toggleFixedPosition(dist, src, root) {
-    const newConfig = cloneDeep(dist);
-    if (!isPop(src) && newConfig.style?.position) {
-      if (isFixed(newConfig) && !isFixed(src)) {
-        newConfig.style = change2Fixed(newConfig, root);
-      } else if (!isFixed(newConfig) && isFixed(src)) {
-        newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
-      }
-    }
-    return newConfig;
-  }
-  selectedConfigExceptionHandler(config) {
-    let id;
-    if (typeof config === "string" || typeof config === "number") {
-      id = config;
-    } else {
-      id = config.id;
-    }
-    if (!id) {
-      throw new Error("\u6CA1\u6709ID\uFF0C\u65E0\u6CD5\u9009\u4E2D");
-    }
-    const { node, parent, page } = this.getNodeInfo(id);
-    if (!node)
-      throw new Error("\u83B7\u53D6\u4E0D\u5230\u7EC4\u4EF6\u4FE1\u606F");
-    if (node.id === this.state.root?.id) {
-      throw new Error("\u4E0D\u80FD\u9009\u6839\u8282\u70B9");
-    }
-    return {
-      node,
-      parent,
-      page
-    };
-  }
-}
-const editorService = new Editor$1();
-
-let eventMap = reactive({});
-let methodMap = reactive({});
-class Events extends BaseService {
-  constructor() {
-    super([]);
-  }
-  init(componentGroupList) {
-    componentGroupList.forEach((group) => {
-      group.items.forEach((element) => {
-        const type = toLine(element.type);
-        if (!this.getEvent(type)) {
-          this.setEvent(type, DEFAULT_EVENTS);
-        }
-        if (!this.getMethod(type)) {
-          this.setMethod(type, DEFAULT_METHODS);
-        }
-      });
-    });
-  }
-  setEvents(events) {
-    Object.keys(events).forEach((type) => {
-      this.setEvent(toLine(type), events[type] || []);
-    });
-  }
-  setEvent(type, events) {
-    eventMap[type] = [...DEFAULT_EVENTS, ...events];
-  }
-  getEvent(type) {
-    return cloneDeep(eventMap[type] || DEFAULT_EVENTS);
-  }
-  setMethods(methods) {
-    Object.keys(methods).forEach((type) => {
-      this.setMethod(toLine(type), methods[type] || []);
-    });
-  }
-  setMethod(type, method) {
-    methodMap[type] = [...DEFAULT_METHODS, ...method];
-  }
-  getMethod(type) {
-    return cloneDeep(methodMap[type] || DEFAULT_METHODS);
-  }
-  resetState() {
-    eventMap = reactive({});
-    methodMap = reactive({});
-  }
-  destroy() {
-    this.resetState();
-    this.removeAllListeners();
-    this.removeAllPlugins();
-  }
-}
-const eventsService = new Events();
-
-const fillConfig = (config = []) => [
-  {
-    type: "tab",
-    items: [
-      {
-        title: "\u5C5E\u6027",
-        labelWidth: "80px",
-        items: [
-          {
-            text: "type",
-            name: "type",
-            type: "hidden"
-          },
-          {
-            name: "id",
-            type: "display",
-            text: "id"
-          },
-          {
-            name: "name",
-            text: "\u7EC4\u4EF6\u540D\u79F0"
-          },
-          ...config
-        ]
-      },
-      {
-        title: "\u6837\u5F0F",
-        labelWidth: "80px",
-        items: [
-          {
-            name: "style",
-            items: [
-              {
-                type: "fieldset",
-                legend: "\u4F4D\u7F6E",
-                items: [
-                  {
-                    name: "position",
-                    type: "checkbox",
-                    activeValue: "fixed",
-                    inactiveValue: "absolute",
-                    defaultValue: "absolute",
-                    text: "\u56FA\u5B9A\u5B9A\u4F4D"
-                  },
-                  {
-                    name: "left",
-                    text: "left"
-                  },
-                  {
-                    name: "top",
-                    text: "top",
-                    disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
-                  },
-                  {
-                    name: "right",
-                    text: "right"
-                  },
-                  {
-                    name: "bottom",
-                    text: "bottom",
-                    disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
-                  }
-                ]
-              },
-              {
-                type: "fieldset",
-                legend: "\u76D2\u5B50",
-                items: [
-                  {
-                    name: "width",
-                    text: "\u5BBD\u5EA6"
-                  },
-                  {
-                    name: "height",
-                    text: "\u9AD8\u5EA6"
-                  }
-                ]
-              },
-              {
-                type: "fieldset",
-                legend: "\u80CC\u666F",
-                items: [
-                  {
-                    name: "backgroundImage",
-                    text: "\u80CC\u666F\u56FE"
-                  },
-                  {
-                    name: "backgroundColor",
-                    text: "\u80CC\u666F\u989C\u8272",
-                    type: "colorPicker"
-                  },
-                  {
-                    name: "backgroundRepeat",
-                    text: "\u80CC\u666F\u56FE\u91CD\u590D",
-                    type: "select",
-                    defaultValue: "no-repeat",
-                    options: [
-                      { text: "repeat", value: "repeat" },
-                      { text: "repeat-x", value: "repeat-x" },
-                      { text: "repeat-y", value: "repeat-y" },
-                      { text: "no-repeat", value: "no-repeat" },
-                      { text: "inherit", value: "inherit" }
-                    ]
-                  },
-                  {
-                    name: "backgroundSize",
-                    text: "\u80CC\u666F\u56FE\u5927\u5C0F",
-                    defaultValue: "100% 100%"
-                  }
-                ]
-              },
-              {
-                type: "fieldset",
-                legend: "\u5B57\u4F53",
-                items: [
-                  {
-                    name: "color",
-                    text: "\u989C\u8272",
-                    type: "colorPicker"
-                  },
-                  {
-                    name: "fontSize",
-                    text: "\u5927\u5C0F"
-                  },
-                  {
-                    name: "fontWeight",
-                    text: "\u7C97\u7EC6"
-                  }
-                ]
-              },
-              {
-                type: "fieldset",
-                legend: "\u53D8\u5F62",
-                name: "transform",
-                items: [
-                  {
-                    name: "rotate",
-                    text: "\u65CB\u8F6C\u89D2\u5EA6"
-                  },
-                  {
-                    name: "scale",
-                    text: "\u7F29\u653E"
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        title: "\u4E8B\u4EF6",
-        items: [
-          {
-            type: "table",
-            name: "events",
-            items: [
-              {
-                name: "name",
-                label: "\u4E8B\u4EF6\u540D",
-                type: "select",
-                options: (mForm, { formValue }) => eventsService.getEvent(formValue.type).map((option) => ({
-                  text: option.label,
-                  value: option.value
-                }))
-              },
-              {
-                name: "to",
-                label: "\u8054\u52A8\u7EC4\u4EF6",
-                type: "ui-select"
-              },
-              {
-                name: "method",
-                label: "\u52A8\u4F5C",
-                type: "select",
-                options: (mForm, { model }) => {
-                  const node = editorService.getNodeById(model.to);
-                  if (!node?.type)
-                    return [];
-                  return eventsService.getMethod(node.type).map((option) => ({
-                    text: option.label,
-                    value: option.value
-                  }));
-                }
-              }
-            ]
-          }
-        ]
-      },
-      {
-        title: "\u9AD8\u7EA7",
-        lazy: true,
-        items: [
-          {
-            name: "created",
-            text: "created",
-            labelWidth: "100px",
-            type: "code-select"
-          },
-          {
-            name: "mounted",
-            text: "mounted",
-            labelWidth: "100px",
-            type: "code-select"
-          }
-        ]
+    const { node, parent } = this.getNodeInfo(config.id, false);
+    const target = this.getNodeById(targetId, false);
+    const stage = this.get("stage");
+    if (root && node && parent && stage) {
+      const index = getNodeIndex(node, parent);
+      parent.items?.splice(index, 1);
+      await stage.remove({ id: node.id, parentId: parent.id, root });
+      const layout = await this.getLayout(target);
+      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
+        if (Array.isArray(srcValue)) {
+          return srcValue;
+        }
+      });
+      newConfig.style = getInitPositionStyle(newConfig.style, layout);
+      target.items.push(newConfig);
+      await stage.select(targetId);
+      const targetParent = this.getParentById(target.id);
+      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root });
+      await this.select(newConfig);
+      stage.select(newConfig.id);
+      this.addModifiedNodeId(target.id);
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
+      return newConfig;
+    }
+  }
+  async undo() {
+    const value = historyService.undo();
+    await this.changeHistoryState(value);
+    return value;
+  }
+  async redo() {
+    const value = historyService.redo();
+    await this.changeHistoryState(value);
+    return value;
+  }
+  async move(left, top) {
+    const node = toRaw(this.get("node"));
+    if (!node || isPage(node))
+      return;
+    const { style, id, type } = node;
+    if (!style || style.position !== "absolute")
+      return;
+    if (top && !isNumber(style.top))
+      return;
+    if (left && !isNumber(style.left))
+      return;
+    this.update({
+      id,
+      type,
+      style: {
+        ...style,
+        left: Number(style.left) + left,
+        top: Number(style.top) + top
       }
-    ]
+    });
   }
-];
-
-const log = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.log("magic editor: ", ...args);
+  resetState() {
+    this.set("root", null);
+    this.set("node", null);
+    this.set("nodes", []);
+    this.set("page", null);
+    this.set("parent", null);
+    this.set("stage", null);
+    this.set("highlightNode", null);
+    this.set("modifiedNodeIds", /* @__PURE__ */ new Map());
+    this.set("pageLength", 0);
   }
-};
-const info = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.info("magic editor: ", ...args);
+  destroy() {
+    this.removeAllListeners();
+    this.resetState();
+    this.removeAllPlugins();
   }
-};
-const warn = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.warn("magic editor: ", ...args);
+  resetModifiedNodeId() {
+    this.get("modifiedNodeIds").clear();
   }
-};
-const debug = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.debug("magic editor: ", ...args);
+  addModifiedNodeId(id) {
+    if (!this.isHistoryStateChange) {
+      this.get("modifiedNodeIds").set(id, id);
+    }
   }
-};
-const error = (...args) => {
-  if (process.env.NODE_ENV === "development") {
-    console.error("magic editor: ", ...args);
+  pushHistoryState() {
+    const curNode = cloneDeep(toRaw(this.get("node")));
+    const page = this.get("page");
+    if (!this.isHistoryStateChange && curNode && page) {
+      historyService.push({
+        data: cloneDeep(toRaw(page)),
+        modifiedNodeIds: this.get("modifiedNodeIds"),
+        nodeId: curNode.id
+      });
+    }
+    this.isHistoryStateChange = false;
   }
-};
+  async changeHistoryState(value) {
+    if (!value)
+      return;
+    this.isHistoryStateChange = true;
+    await this.update(value.data);
+    this.set("modifiedNodeIds", value.modifiedNodeIds);
+    setTimeout(async () => {
+      if (!value.nodeId)
+        return;
+      await this.select(value.nodeId);
+      this.get("stage")?.select(value.nodeId);
+    }, 0);
+    this.emit("history-change", value.data);
+  }
+  async toggleFixedPosition(dist, src, root) {
+    const newConfig = cloneDeep(dist);
+    if (!isPop(src) && newConfig.style?.position) {
+      if (isFixed(newConfig) && !isFixed(src)) {
+        newConfig.style = change2Fixed(newConfig, root);
+      } else if (!isFixed(newConfig) && isFixed(src)) {
+        newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
+      }
+    }
+    return newConfig;
+  }
+  selectedConfigExceptionHandler(config) {
+    let id;
+    if (typeof config === "string" || typeof config === "number") {
+      id = config;
+    } else {
+      id = config.id;
+    }
+    if (!id) {
+      throw new Error("\u6CA1\u6709ID\uFF0C\u65E0\u6CD5\u9009\u4E2D");
+    }
+    const { node, parent, page } = this.getNodeInfo(id);
+    if (!node)
+      throw new Error("\u83B7\u53D6\u4E0D\u5230\u7EC4\u4EF6\u4FE1\u606F");
+    if (node.id === this.state.root?.id) {
+      throw new Error("\u4E0D\u80FD\u9009\u6839\u8282\u70B9");
+    }
+    return {
+      node,
+      parent,
+      page
+    };
+  }
+}
+const editorService = new Editor$1();
 
 const state = reactive({
   uiSelectMode: false,
@@ -2518,7 +2759,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$s, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$u, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_3$3
           ])
@@ -2749,7 +2990,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 disabled: unref(disabled)
               }, {
                 default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$s, {
+                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$u, {
                     key: 0,
                     icon: __props.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2766,7 +3007,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             disabled: unref(disabled)
           }, {
             default: withCtx(() => [
-              __props.data.icon ? (openBlock(), createBlock(_sfc_main$s, {
+              __props.data.icon ? (openBlock(), createBlock(_sfc_main$u, {
                 key: 0,
                 icon: __props.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -3124,14 +3365,17 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
       if (codeDraft) {
         tMagicMessageBox.confirm("\u60A8\u6709\u4EE3\u7801\u4FEE\u6539\u672A\u4FDD\u5B58\uFF0C\u662F\u5426\u4FDD\u5B58\u540E\u518D\u5173\u95ED\uFF1F", "\u63D0\u793A", {
-          confirmButtonText: "\u786E\u8BA4",
-          cancelButtonText: "\u53D6\u6D88",
-          type: "warning"
+          confirmButtonText: "\u4FDD\u5B58\u5E76\u5173\u95ED",
+          cancelButtonText: "\u76F4\u63A5\u5173\u95ED",
+          type: "warning",
+          distinguishCancelAndClose: true
         }).then(async () => {
           saveAndClose();
-        }).catch(() => {
-          services?.codeBlockService.removeCodeDraft(props.id);
-          emit("close");
+        }).catch((action) => {
+          if (action === "cancel") {
+            services?.codeBlockService.removeCodeDraft(props.id);
+            emit("close");
+          }
         });
       } else {
         emit("close");
@@ -3472,22 +3716,10 @@ const _hoisted_3 = /* @__PURE__ */ createTextVNode("\u65B0\u589E");
 const _hoisted_4 = ["id"];
 const _hoisted_5 = { class: "list-item" };
 const _hoisted_6 = { class: "code-name" };
-const _hoisted_7 = { class: "right-tool" };
-const _hoisted_8 = {
+const _hoisted_7 = {
   key: 0,
-  class: "code-comp-map-wrapper"
+  class: "right-tool"
 };
-const _hoisted_9 = /* @__PURE__ */ createElementVNode("svg", {
-  class: "arrow-left",
-  viewBox: "0 0 1024 1024",
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-v-029747aa": ""
-}, [
-  /* @__PURE__ */ createElementVNode("path", {
-    fill: "currentColor",
-    d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
-  })
-], -1);
 const __default__$d = defineComponent({
   name: "MEditorCodeBlockList"
 });
@@ -3499,64 +3731,23 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const services = inject("services");
-    const state = reactive({
-      codeList: []
-    });
-    const editable = computed(() => services?.codeBlockService.getEditStatus());
-    const isShowCodeBlockEditor = computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
-    const codeCombineInfo = ref(null);
-    const getBindCompsByCodeId = (codeId) => {
-      if (!codeCombineInfo.value)
-        return [];
-      const bindsComp = [];
-      forIn(codeCombineInfo.value, (codeIds, compId) => {
-        if (codeIds.includes(codeId)) {
-          bindsComp.push({
-            compId,
-            compName: getCompName(compId)
-          });
-        }
-      });
-      return bindsComp;
-    };
-    const refreshCodeList = async () => {
-      const codeDsl = cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
-      codeCombineInfo.value = cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
-      if (!codeDsl || !codeCombineInfo.value)
-        return;
-      state.codeList = [];
-      forIn(codeDsl, (value, codeId) => {
-        state.codeList.push({
-          id: codeId,
-          name: value.name,
-          codeBlockContent: value,
-          showRelation: true,
-          combineInfo: getBindCompsByCodeId(codeId)
-        });
-      });
-    };
-    watch(
-      () => services?.editorService.get("root"),
-      () => {
-        services?.codeBlockService.refreshAllRelations();
-        refreshCodeList();
-      },
-      {
-        immediate: true
-      }
-    );
-    watch(
-      [() => services?.codeBlockService.getCodeDsl(), () => services?.codeBlockService.getCombineInfo()],
-      () => {
-        refreshCodeList();
-      },
-      {
-        deep: true
-      }
+    const { codeBlockService, depService, editorService } = inject("services") || {};
+    const codeList = computed(
+      () => Object.values(depService?.targets["code-block"] || {}).map((target) => ({
+        id: target.id,
+        name: target.name,
+        type: "code",
+        children: Object.entries(target.deps).map(([id, dep]) => ({
+          name: dep.name,
+          type: "node",
+          id,
+          children: dep.keys.map((key) => ({ name: key, id: key, type: "key" }))
+        }))
+      }))
     );
+    const editable = computed(() => codeBlockService?.getEditStatus());
+    const isShowCodeBlockEditor = computed(() => codeBlockService?.getCodeEditorShowStatus() || false);
     const createCodeBlock = async () => {
-      const { codeBlockService } = services || {};
       if (!codeBlockService) {
         tMagicMessage.error("\u65B0\u589E\u4EE3\u7801\u5757\u5931\u8D25");
         return;
@@ -3573,14 +3764,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       codeBlockService.setCodeEditorContent(true, id);
     };
     const editCode = async (key) => {
-      services?.codeBlockService.setCodeEditorContent(true, key);
+      codeBlockService?.setCodeEditorContent(true, key);
     };
     const deleteCode = (key) => {
-      const currentCode = state.codeList.find((codeItem) => codeItem.id === key);
-      const existBinds = !isEmpty(currentCode?.combineInfo);
-      const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
+      const currentCode = codeList.value.find((codeItem) => codeItem.id === key);
+      const existBinds = Boolean(currentCode?.children.length);
+      const undeleteableList = codeBlockService?.getUndeletableList() || [];
       if (!existBinds && !undeleteableList.includes(key)) {
-        services?.codeBlockService.deleteCodeDslByIds([key]);
+        codeBlockService?.deleteCodeDslByIds([key]);
       } else {
         if (typeof props.customError === "function") {
           props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
@@ -3595,27 +3786,23 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       if (!value) {
         return true;
       }
-      return `${data.name}${data.id}`.indexOf(value) !== -1;
+      return `${data.name}${data.id}`.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1;
     };
     const filterTextChangeHandler = (val) => {
       tree.value?.filter(val);
     };
-    const toggleCombineRelation = (data) => {
-      const { id } = data;
-      const currentCode = state.codeList.find((item) => item.id === id);
-      if (!currentCode)
-        return;
-      currentCode.showRelation = !currentCode?.showRelation;
-    };
-    const getCompName = (compId) => {
-      const node = services?.editorService.getNodeById(compId);
-      return node?.name || String(compId);
-    };
     const selectComp = (compId) => {
-      const stage = services?.editorService.get("stage");
-      services?.editorService.select(compId);
+      const stage = editorService?.get("stage");
+      editorService?.select(compId);
       stage?.select(compId);
     };
+    const clickHandler = (data, node) => {
+      if (data.type === "node") {
+        selectComp(data.id);
+      } else if (data.type === "key") {
+        selectComp(node.parent.data.id);
+      }
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$6, [
         renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
@@ -3645,16 +3832,18 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         ]),
         createVNode(unref(TMagicScrollbar), null, {
           default: withCtx(() => [
-            !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(unref(TMagicTree), {
-              key: 0,
+            createVNode(unref(TMagicTree), {
               ref_key: "tree",
               ref: tree,
+              class: "magic-editor-layer-tree",
               "node-key": "id",
               "empty-text": "\u6682\u65E0\u4EE3\u7801\u5757",
-              data: state.codeList,
+              "default-expand-all": "",
+              "expand-on-click-node": false,
+              data: unref(codeList),
               "highlight-current": true,
               "filter-node-method": filterNode,
-              onNodeClick: toggleCombineRelation
+              onNodeClick: clickHandler
             }, {
               default: withCtx(({ data }) => [
                 createElementVNode("div", {
@@ -3663,14 +3852,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 }, [
                   createElementVNode("div", _hoisted_5, [
                     createElementVNode("span", _hoisted_6, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1),
-                    createElementVNode("div", _hoisted_7, [
+                    data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_7, [
                       createVNode(unref(TMagicTooltip), {
                         effect: "dark",
                         content: unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
                         placement: "bottom"
                       }, {
                         default: withCtx(() => [
-                          createVNode(_sfc_main$s, {
+                          createVNode(_sfc_main$u, {
                             icon: unref(editable) ? unref(Edit) : unref(View),
                             class: "edit-icon",
                             onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -3678,29 +3867,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         ]),
                         _: 2
                       }, 1032, ["content"]),
-                      data.combineInfo && data.combineInfo.length > 0 ? (openBlock(), createBlock(unref(TMagicTooltip), {
-                        key: 0,
-                        effect: "dark",
-                        content: "\u67E5\u770B\u7ED1\u5B9A\u5173\u7CFB",
-                        placement: "bottom"
-                      }, {
-                        default: withCtx(() => [
-                          createVNode(_sfc_main$s, {
-                            icon: unref(Link),
-                            class: "edit-icon",
-                            onClick: withModifiers(($event) => toggleCombineRelation(data), ["stop"])
-                          }, null, 8, ["icon", "onClick"])
-                        ]),
-                        _: 2
-                      }, 1024)) : createCommentVNode("", true),
                       unref(editable) ? (openBlock(), createBlock(unref(TMagicTooltip), {
-                        key: 1,
+                        key: 0,
                         effect: "dark",
                         content: "\u5220\u9664",
                         placement: "bottom"
                       }, {
                         default: withCtx(() => [
-                          createVNode(_sfc_main$s, {
+                          createVNode(_sfc_main$u, {
                             icon: unref(Close),
                             class: "edit-icon",
                             onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -3712,29 +3886,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         id: data.id,
                         data: data.codeBlockContent
                       })
-                    ])
-                  ]),
-                  data.showRelation && data.combineInfo && data.combineInfo.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_8, [
-                    _hoisted_9,
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(data.combineInfo, (comp, index) => {
-                      return openBlock(), createBlock(unref(TMagicButton), {
-                        key: index,
-                        class: "code-comp",
-                        size: "small",
-                        plain: true,
-                        onClick: withModifiers(($event) => selectComp(comp.compId), ["stop"])
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(comp.compName), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["onClick"]);
-                    }), 128))
-                  ])) : createCommentVNode("", true)
+                    ])) : createCommentVNode("", true)
+                  ])
                 ], 8, _hoisted_4)
               ]),
               _: 3
-            }, 8, ["data"])) : createCommentVNode("", true)
+            }, 8, ["data"])
           ]),
           _: 3
         }),
@@ -3846,7 +4003,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$s, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$u, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -3861,7 +4018,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$s, {
+                            createVNode(_sfc_main$u, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
                             createVNode(unref(TMagicTooltip), {
@@ -4462,7 +4619,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 (openBlock(), createElementBlock("div", {
                   key: config.text
                 }, [
-                  config.icon ? (openBlock(), createBlock(_sfc_main$s, {
+                  config.icon ? (openBlock(), createBlock(_sfc_main$u, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -4683,14 +4840,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$s, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$u, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$s, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$u, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         unref(pageLength) ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -4706,7 +4863,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$s, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$u, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -5597,8 +5754,7 @@ class CodeBlock extends BaseService {
     id: "",
     editable: true,
     combineIds: [],
-    undeletableList: [],
-    relations: {}
+    undeletableList: []
   });
   constructor() {
     super([
@@ -5643,6 +5799,7 @@ class CodeBlock extends BaseService {
       ...existContent,
       ...codeConfigProcessed
     };
+    this.emit("addOrUpdate", id, codeDsl[id]);
   }
   async getCodeDslByIds(ids) {
     const codeDsl2 = await this.getCodeDsl();
@@ -5683,39 +5840,6 @@ class CodeBlock extends BaseService {
   getCombineIds() {
     return this.state.combineIds;
   }
-  addCodeRelationListener() {
-    editorService.on("update", (nodes) => {
-      const relations = cloneDeep(this.state.relations);
-      nodes.forEach((node) => {
-        if (node?.id) {
-          relations[node.id] = [];
-          this.getNodeRelation(node, relations);
-        }
-      });
-      this.state.relations = { ...relations };
-    });
-    editorService.on("remove", (nodes) => {
-      nodes.forEach((node) => {
-        this.state.relations = this.deleteNodeRelation(node, this.state.relations);
-      });
-    });
-    editorService.on("history-change", (page) => {
-      const relations = {};
-      this.getNodeRelation(page, relations, true);
-      this.state.relations = relations;
-    });
-  }
-  refreshAllRelations() {
-    const root = editorService.get("root");
-    if (!root)
-      return;
-    const relations = {};
-    this.getNodeRelation(root, relations, true);
-    this.state.relations = relations;
-  }
-  getCombineInfo() {
-    return this.state.relations;
-  }
   getUndeletableList() {
     return this.state.undeletableList;
   }
@@ -5737,88 +5861,268 @@ class CodeBlock extends BaseService {
       return;
     codeIds.forEach((id2) => {
       delete currentDsl[id2];
+      this.emit("remove", id2);
     });
   }
-  async getUniqueId() {
-    const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
-    const dsl = await this.getCodeDsl();
-    const existedIds = keys(dsl);
-    if (!existedIds.includes(newId))
-      return newId;
-    return await this.getUniqueId();
+  async getUniqueId() {
+    const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
+    const dsl = await this.getCodeDsl();
+    const existedIds = keys(dsl);
+    if (!existedIds.includes(newId))
+      return newId;
+    return await this.getUniqueId();
+  }
+  resetState() {
+    this.state.isShowCodeEditor = false;
+    this.state.codeDsl = null;
+    this.state.id = "";
+    this.state.editable = true;
+    this.state.combineIds = [];
+    this.state.undeletableList = [];
+  }
+  destroy() {
+    this.resetState();
+    this.removeAllListeners();
+    this.removeAllPlugins();
+  }
+}
+const codeBlockService = new CodeBlock();
+
+class ComponentList extends BaseService {
+  state = reactive({
+    list: []
+  });
+  constructor() {
+    super([]);
+  }
+  setList(componentGroupList) {
+    this.state.list = componentGroupList;
+  }
+  getList() {
+    return this.state.list;
   }
   resetState() {
-    this.state.isShowCodeEditor = false;
-    this.state.codeDsl = null;
-    this.state.id = "";
-    this.state.editable = true;
-    this.state.combineIds = [];
-    this.state.undeletableList = [];
+    this.state.list = [];
   }
   destroy() {
     this.resetState();
     this.removeAllListeners();
     this.removeAllPlugins();
   }
-  getNodeRelation(node, relation, deep = false) {
-    forIn(node, (value, key) => {
-      if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
-        value.hookData.forEach((relationItem) => {
-          if (relationItem.codeId) {
-            relation[node.id] = union(relation[node.id], [relationItem.codeId]);
-          }
-        });
-        return;
+}
+const componentListService = new ComponentList();
+
+class Target extends EventEmitter {
+  isTarget;
+  id;
+  name;
+  type = "default";
+  deps = reactive({});
+  constructor(options) {
+    super();
+    this.isTarget = options.isTarget;
+    this.id = options.id;
+    this.name = options.name;
+    if (options.type) {
+      this.type = options.type;
+    }
+  }
+  updateDep(node, key) {
+    const dep = this.deps[node.id] || {
+      name: node.name,
+      keys: []
+    };
+    if (node.name) {
+      dep.name = node.name;
+    }
+    this.deps[node.id] = dep;
+    if (dep.keys.indexOf(key) === -1) {
+      dep.keys.push(key);
+    }
+    this.emit("change");
+  }
+  removeDep(node, key) {
+    if (!node) {
+      Object.keys(this.deps).forEach((depKey) => {
+        delete this.deps[depKey];
+      });
+      this.emit("change");
+      return;
+    }
+    const dep = this.deps[node.id];
+    if (!dep)
+      return;
+    if (key) {
+      const index = dep.keys.indexOf(key);
+      dep.keys.splice(index, 1);
+      if (dep.keys.length === 0) {
+        delete this.deps[node.id];
       }
-      let isContinue = false;
-      try {
-        isContinue = key !== "items" && typeof value === "object" && JSON.stringify(value).includes("hookType");
-      } catch (error) {
-        console.error(error);
+    } else {
+      delete this.deps[node.id];
+    }
+    this.emit("change");
+  }
+  hasDep(node, key) {
+    const dep = this.deps[node.id];
+    return Boolean(dep?.keys.find((d) => d === key));
+  }
+  destroy() {
+    this.removeAllListeners();
+  }
+}
+class Watcher extends EventEmitter {
+  targets = reactive({});
+  getTargets(type = "default") {
+    return this.targets[type] || {};
+  }
+  addTarget(target) {
+    const targets = this.getTargets(target.type) || {};
+    this.targets[target.type] = targets;
+    targets[target.id] = target;
+    this.emit("add-target", target);
+  }
+  getTarget(id) {
+    const allTargets = Object.values(this.targets);
+    for (const targets of allTargets) {
+      if (targets[id]) {
+        return targets[id];
       }
-      if (isContinue) {
-        const unConfirmedValue = {
-          id: node.id,
-          ...value
-        };
-        this.getNodeRelation(unConfirmedValue, relation);
+    }
+  }
+  hasTarget(id) {
+    const allTargets = Object.values(this.targets);
+    for (const targets of allTargets) {
+      if (targets[id]) {
+        return true;
       }
-      if (key === "items" && !isEmpty(value) && deep) {
-        value.forEach((item) => {
-          this.getNodeRelation(item, relation, deep);
-        });
+    }
+    return false;
+  }
+  removeTarget(id) {
+    const allTargets = Object.values(this.targets);
+    for (const targets of allTargets) {
+      if (targets[id]) {
+        targets[id].destroy();
+        delete targets[id];
       }
+    }
+    this.emit("remove-target");
+  }
+  removeTargets(type = "default") {
+    const targets = this.targets[type];
+    if (!targets)
+      return;
+    for (const target of Object.values(targets)) {
+      target.destroy();
+    }
+    delete this.targets[type];
+    this.emit("remove-target");
+  }
+  clearTargets() {
+    Object.keys(this.targets).forEach((key) => {
+      delete this.targets[key];
+    });
+  }
+  collect(nodes, deep = false) {
+    Object.values(this.targets).forEach((targets) => {
+      Object.values(targets).forEach((target) => {
+        nodes.forEach((node) => {
+          target.removeDep(node);
+          this.collectItem(node, target, deep);
+        });
+      });
     });
   }
-  deleteNodeRelation(node, relations) {
-    if (!node.id)
-      return {};
-    let newRelations = omit(relations, [node.id]);
-    if (!isEmpty(node.items)) {
-      node.items.forEach((item) => {
-        newRelations = this.deleteNodeRelation(item, newRelations);
+  clear(nodes) {
+    Object.values(this.targets).forEach((targets) => {
+      Object.values(targets).forEach((target) => {
+        if (nodes) {
+          nodes.forEach((node) => {
+            target.removeDep(node);
+            if (Array.isArray(node.items)) {
+              this.clear(node.items);
+            }
+          });
+        } else {
+          target.removeDep();
+        }
       });
-    }
-    return newRelations;
+    });
+  }
+  collectItem(node, target, deep = false) {
+    const collectTarget = (config, prop = "") => {
+      const doCollect = (key, value) => {
+        const keyIsItems = key === "items";
+        const fullKey = prop ? `${prop}.${key}` : key;
+        if (target.isTarget(key, value)) {
+          target.updateDep(node, fullKey);
+        } else if (!keyIsItems && Array.isArray(value)) {
+          value.forEach((item, index) => {
+            collectTarget(item, `${fullKey}.${index}`);
+          });
+        } else if (Object.prototype.toString.call(value) === "[object Object]") {
+          collectTarget(value, fullKey);
+        }
+        if (keyIsItems && deep && Array.isArray(value)) {
+          value.forEach((child) => {
+            this.collectItem(child, target, deep);
+          });
+        }
+      };
+      Object.entries(config).forEach(([key, value]) => {
+        doCollect(key, value);
+      });
+    };
+    collectTarget(node);
   }
 }
-const codeBlockService = new CodeBlock();
+const depService = new Watcher();
 
-class ComponentList extends BaseService {
-  state = reactive({
-    list: []
-  });
+let eventMap = reactive({});
+let methodMap = reactive({});
+class Events extends BaseService {
   constructor() {
     super([]);
   }
-  setList(componentGroupList) {
-    this.state.list = componentGroupList;
+  init(componentGroupList) {
+    componentGroupList.forEach((group) => {
+      group.items.forEach((element) => {
+        const type = toLine(element.type);
+        if (!this.getEvent(type)) {
+          this.setEvent(type, DEFAULT_EVENTS);
+        }
+        if (!this.getMethod(type)) {
+          this.setMethod(type, DEFAULT_METHODS);
+        }
+      });
+    });
   }
-  getList() {
-    return this.state.list;
+  setEvents(events) {
+    Object.keys(events).forEach((type) => {
+      this.setEvent(toLine(type), events[type] || []);
+    });
+  }
+  setEvent(type, events) {
+    eventMap[type] = [...DEFAULT_EVENTS, ...events];
+  }
+  getEvent(type) {
+    return cloneDeep(eventMap[type] || DEFAULT_EVENTS);
+  }
+  setMethods(methods) {
+    Object.keys(methods).forEach((type) => {
+      this.setMethod(toLine(type), methods[type] || []);
+    });
+  }
+  setMethod(type, method) {
+    methodMap[type] = [...DEFAULT_METHODS, ...method];
+  }
+  getMethod(type) {
+    return cloneDeep(methodMap[type] || DEFAULT_METHODS);
   }
   resetState() {
-    this.state.list = [];
+    eventMap = reactive({});
+    methodMap = reactive({});
   }
   destroy() {
     this.resetState();
@@ -5826,7 +6130,252 @@ class ComponentList extends BaseService {
     this.removeAllPlugins();
   }
 }
-const componentListService = new ComponentList();
+const eventsService = new Events();
+
+const editorProps = {
+  modelValue: {
+    type: Object,
+    default: () => ({}),
+    require: true
+  },
+  componentGroupList: {
+    type: Array,
+    default: () => []
+  },
+  sidebar: {
+    type: Object
+  },
+  menu: {
+    type: Object,
+    default: () => ({ left: [], right: [] })
+  },
+  layerContentMenu: {
+    type: Array,
+    default: () => []
+  },
+  stageContentMenu: {
+    type: Array,
+    default: () => []
+  },
+  render: {
+    type: Function
+  },
+  runtimeUrl: String,
+  autoScrollIntoView: Boolean,
+  propsConfigs: {
+    type: Object,
+    default: () => ({})
+  },
+  propsValues: {
+    type: Object,
+    default: () => ({})
+  },
+  eventMethodList: {
+    type: Object,
+    default: () => ({})
+  },
+  moveableOptions: {
+    type: [Object, Function]
+  },
+  defaultSelected: {
+    type: [Number, String]
+  },
+  canSelect: {
+    type: Function,
+    default: (el) => Boolean(el.id)
+  },
+  isContainer: {
+    type: Function,
+    default: (el) => el.classList.contains("magic-ui-container")
+  },
+  containerHighlightClassName: {
+    type: String,
+    default: CONTAINER_HIGHLIGHT_CLASS_NAME
+  },
+  containerHighlightDuration: {
+    type: Number,
+    default: 800
+  },
+  containerHighlightType: {
+    type: String,
+    default: ContainerHighlightType.DEFAULT
+  },
+  stageRect: {
+    type: [String, Object]
+  },
+  codeOptions: {
+    type: Object,
+    default: () => ({})
+  },
+  updateDragEl: {
+    type: Function
+  },
+  disabledDragStart: {
+    type: Boolean
+  }
+};
+
+const createCodeBlockTarget = (id, codeBlock) => new Target({
+  type: "code-block",
+  id,
+  name: codeBlock.name,
+  isTarget: (key, value) => {
+    if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
+      const index = value.hookData.findIndex((item) => item.codeId === id);
+      return Boolean(index > -1);
+    }
+    return false;
+  }
+});
+
+const initServiceState = (props, {
+  editorService,
+  historyService,
+  componentListService,
+  propsService,
+  eventsService,
+  uiService,
+  codeBlockService
+}) => {
+  watch(
+    () => props.modelValue,
+    (modelValue) => {
+      editorService.set("root", modelValue);
+    },
+    {
+      immediate: true
+    }
+  );
+  watch(
+    () => props.componentGroupList,
+    (componentGroupList) => componentListService.setList(componentGroupList),
+    {
+      immediate: true
+    }
+  );
+  watch(
+    () => props.propsConfigs,
+    (configs) => propsService.setPropsConfigs(configs),
+    {
+      immediate: true
+    }
+  );
+  watch(
+    () => props.propsValues,
+    (values) => propsService.setPropsValues(values),
+    {
+      immediate: true
+    }
+  );
+  watch(
+    () => props.eventMethodList,
+    (eventMethodList) => {
+      const eventsList = {};
+      const methodsList = {};
+      Object.keys(eventMethodList).forEach((type) => {
+        eventsList[type] = eventMethodList[type].events;
+        methodsList[type] = eventMethodList[type].methods;
+      });
+      eventsService.setEvents(eventsList);
+      eventsService.setMethods(methodsList);
+    },
+    {
+      immediate: true
+    }
+  );
+  watch(
+    () => props.defaultSelected,
+    (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
+    {
+      immediate: true
+    }
+  );
+  watch(
+    () => props.stageRect,
+    (stageRect) => stageRect && uiService.set("stageRect", stageRect),
+    {
+      immediate: true
+    }
+  );
+  onUnmounted(() => {
+    editorService.resetState();
+    historyService.resetState();
+    propsService.resetState();
+    uiService.resetState();
+    componentListService.resetState();
+    codeBlockService.resetState();
+  });
+};
+const initServiceEvents = (props, emit, { editorService, codeBlockService, depService }) => {
+  const rootChangeHandler = async (value, preValue) => {
+    const nodeId = editorService.get("node")?.id || props.defaultSelected;
+    let node;
+    if (nodeId) {
+      node = editorService.getNodeById(nodeId);
+    }
+    if (node && node !== value) {
+      await editorService.select(node.id);
+    } else if (value?.items?.length) {
+      await editorService.select(value.items[0]);
+    } else if (value?.id) {
+      editorService.set("nodes", [value]);
+      editorService.set("parent", null);
+      editorService.set("page", null);
+    }
+    if (toRaw(value) !== toRaw(preValue)) {
+      emit("update:modelValue", value);
+    }
+    value.codeBlocks = value.codeBlocks || {};
+    codeBlockService.setCodeDsl(value.codeBlocks);
+    depService.removeTargets("code-block");
+    Object.entries(value.codeBlocks).forEach(([id, code]) => {
+      depService.addTarget(createCodeBlockTarget(id, code));
+    });
+    if (value && Array.isArray(value.items)) {
+      depService.collect(value.items, true);
+    } else {
+      depService.clear();
+    }
+  };
+  const nodeAddHandler = (nodes) => {
+    depService.collect(nodes);
+  };
+  const nodeUpdateHandler = (nodes) => {
+    depService.collect(nodes);
+  };
+  const nodeRemoveHandler = (nodes) => {
+    depService.clear(nodes);
+  };
+  const historyChangeHandler = (page) => {
+    depService.collect([page], true);
+  };
+  editorService.on("history-change", historyChangeHandler);
+  editorService.on("root-change", rootChangeHandler);
+  editorService.on("add", nodeAddHandler);
+  editorService.on("remove", nodeRemoveHandler);
+  editorService.on("update", nodeUpdateHandler);
+  const codeBlockAddOrUpdateHandler = (id, codeBlock) => {
+    if (depService.hasTarget(id)) {
+      depService.getTarget(id).name = codeBlock.name;
+      return;
+    }
+    depService.addTarget(createCodeBlockTarget(id, codeBlock));
+  };
+  const codeBlockRemoveHandler = (id) => {
+    depService.removeTarget(id);
+  };
+  codeBlockService.on("addOrUpdate", codeBlockAddOrUpdateHandler);
+  codeBlockService.on("remove", codeBlockRemoveHandler);
+  onUnmounted(() => {
+    editorService.off("history-change", historyChangeHandler);
+    editorService.off("root-change", rootChangeHandler);
+    editorService.off("add", nodeAddHandler);
+    editorService.off("remove", nodeRemoveHandler);
+    editorService.off("update", nodeUpdateHandler);
+    codeBlockService.off("addOrUpdate", codeBlockAddOrUpdateHandler);
+    codeBlockService.off("remove", codeBlockRemoveHandler);
+  });
+};
 
 const _sfc_main = defineComponent({
   name: "m-editor",
@@ -5837,181 +6386,9 @@ const _sfc_main = defineComponent({
     PropsPanel: _sfc_main$i,
     Framework: _sfc_main$l
   },
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => ({}),
-      require: true
-    },
-    componentGroupList: {
-      type: Array,
-      default: () => []
-    },
-    sidebar: {
-      type: Object
-    },
-    menu: {
-      type: Object,
-      default: () => ({ left: [], right: [] })
-    },
-    layerContentMenu: {
-      type: Array,
-      default: () => []
-    },
-    stageContentMenu: {
-      type: Array,
-      default: () => []
-    },
-    render: {
-      type: Function
-    },
-    runtimeUrl: String,
-    autoScrollIntoView: Boolean,
-    propsConfigs: {
-      type: Object,
-      default: () => ({})
-    },
-    propsValues: {
-      type: Object,
-      default: () => ({})
-    },
-    eventMethodList: {
-      type: Object,
-      default: () => ({})
-    },
-    moveableOptions: {
-      type: [Object, Function]
-    },
-    defaultSelected: {
-      type: [Number, String]
-    },
-    canSelect: {
-      type: Function,
-      default: (el) => Boolean(el.id)
-    },
-    isContainer: {
-      type: Function,
-      default: (el) => el.classList.contains("magic-ui-container")
-    },
-    containerHighlightClassName: {
-      type: String,
-      default: CONTAINER_HIGHLIGHT_CLASS_NAME
-    },
-    containerHighlightDuration: {
-      type: Number,
-      default: 800
-    },
-    containerHighlightType: {
-      type: String,
-      default: ContainerHighlightType.DEFAULT
-    },
-    stageRect: {
-      type: [String, Object]
-    },
-    codeOptions: {
-      type: Object,
-      default: () => ({})
-    },
-    updateDragEl: {
-      type: Function
-    },
-    disabledDragStart: {
-      type: Boolean
-    }
-  },
+  props: editorProps,
   emits: ["props-panel-mounted", "update:modelValue"],
   setup(props, { emit }) {
-    const rootChangeHandler = (value, preValue) => {
-      const nodeId = editorService.get("node")?.id || props.defaultSelected;
-      let node;
-      if (nodeId) {
-        node = editorService.getNodeById(nodeId);
-      }
-      if (node && node !== value) {
-        editorService.select(node.id);
-      } else if (value?.items?.length) {
-        editorService.select(value.items[0]);
-      } else if (value?.id) {
-        editorService.set("nodes", [value]);
-        editorService.set("parent", null);
-        editorService.set("page", null);
-      }
-      if (toRaw(value) !== toRaw(preValue)) {
-        emit("update:modelValue", value);
-      }
-      value.codeBlocks = value.codeBlocks || {};
-      codeBlockService.setCodeDsl(value.codeBlocks);
-    };
-    editorService.on("root-change", rootChangeHandler);
-    watch(
-      () => props.modelValue,
-      (modelValue) => {
-        editorService.set("root", modelValue);
-      },
-      {
-        immediate: true
-      }
-    );
-    watch(
-      () => props.componentGroupList,
-      (componentGroupList) => componentListService.setList(componentGroupList),
-      {
-        immediate: true
-      }
-    );
-    watch(
-      () => props.propsConfigs,
-      (configs) => propsService.setPropsConfigs(configs),
-      {
-        immediate: true
-      }
-    );
-    watch(
-      () => props.propsValues,
-      (values) => propsService.setPropsValues(values),
-      {
-        immediate: true
-      }
-    );
-    watch(
-      () => props.eventMethodList,
-      (eventMethodList) => {
-        const eventsList = {};
-        const methodsList = {};
-        Object.keys(eventMethodList).forEach((type) => {
-          eventsList[type] = eventMethodList[type].events;
-          methodsList[type] = eventMethodList[type].methods;
-        });
-        eventsService.setEvents(eventsList);
-        eventsService.setMethods(methodsList);
-      },
-      {
-        immediate: true
-      }
-    );
-    watch(
-      () => props.defaultSelected,
-      (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
-      {
-        immediate: true
-      }
-    );
-    watch(
-      () => props.stageRect,
-      (stageRect) => stageRect && uiService.set("stageRect", stageRect),
-      {
-        immediate: true
-      }
-    );
-    onUnmounted(() => {
-      editorService.resetState();
-      historyService.resetState();
-      propsService.resetState();
-      uiService.resetState();
-      componentListService.resetState();
-      codeBlockService.resetState();
-      editorService.off("root-change", rootChangeHandler);
-    });
     const services = {
       componentListService,
       eventsService,
@@ -6020,8 +6397,11 @@ const _sfc_main = defineComponent({
       editorService,
       uiService,
       storageService,
-      codeBlockService
+      codeBlockService,
+      depService
     };
+    initServiceEvents(props, emit, services);
+    initServiceState(props, services);
     provide("services", services);
     provide("codeOptions", props.codeOptions);
     provide(
@@ -6040,7 +6420,6 @@ const _sfc_main = defineComponent({
         disabledDragStart: props.disabledDragStart
       })
     );
-    codeBlockService.addCodeRelationListener();
     return services;
   }
 });
@@ -6151,12 +6530,14 @@ const index = {
     setConfig(option);
     app.component(Editor.name, Editor);
     app.component("m-fields-ui-select", _sfc_main$q);
-    app.component("m-fields-code-link", _sfc_main$t);
-    app.component("m-fields-vs-code", _sfc_main$u);
+    app.component("m-fields-code-link", _sfc_main$v);
+    app.component("m-fields-vs-code", _sfc_main$w);
     app.component("magic-code-editor", _sfc_main$p);
-    app.component("m-fields-code-select", _sfc_main$r);
+    app.component("m-fields-code-select", _sfc_main$t);
+    app.component("m-fields-code-select-col", _sfc_main$s);
+    app.component("m-fields-event-select", _sfc_main$r);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, _sfc_main$r as CodeSelect, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$s as Icon, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$n as LayoutContainer, _sfc_main$i as PropsPanel, _sfc_main$p as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$k as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, _sfc_main$t as CodeSelect, _sfc_main$s as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$r as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$u as Icon, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$n as LayoutContainer, _sfc_main$i as PropsPanel, _sfc_main$p as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$k as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, debug, index as default, depService, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map