@tmagic/editor 1.2.10 → 1.2.11

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/form'), require('@tmagic/schema'), require('@tmagic/design'), require('monaco-editor'), require('@tmagic/stage'), require('gesto'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons-vue', 'lodash-es', '@tmagic/form', '@tmagic/schema', '@tmagic/design', 'monaco-editor', '@tmagic/stage', 'gesto', '@tmagic/utils', 'events', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.iconsVue, global.lodashEs, global.form, global.schema, global.design, global.monaco, global.StageCore, global.Gesto, global.utils, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, serialize, iconsVue, lodashEs, form, schema, design, monaco, StageCore, Gesto, utils, events, core, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/form'), require('@tmagic/schema'), require('@tmagic/design'), require('monaco-editor'), require('gesto'), require('@tmagic/utils'), require('@tmagic/stage'), require('events'), require('keycon'), require('@tmagic/core')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons-vue', 'lodash-es', '@tmagic/form', '@tmagic/schema', '@tmagic/design', 'monaco-editor', 'gesto', '@tmagic/utils', '@tmagic/stage', 'events', 'keycon', '@tmagic/core'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.iconsVue, global.lodashEs, global.form, global.schema, global.design, global.monaco, global.Gesto, global.utils, global.StageCore, global.events, global.KeyController, global.core));
+})(this, (function (exports, vue, serialize, iconsVue, lodashEs, form, schema, design, monaco, Gesto, utils, StageCore, events, KeyController, core) { 'use strict';
 
   const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
@@ -26,15 +26,15 @@
 
   const serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
   const monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
-  const StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
   const Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
+  const StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
   const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
 
-  const __default__$t = vue.defineComponent({
+  const __default__$v = vue.defineComponent({
     name: "MEditorCode"
   });
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$t,
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$v,
     props: {
       model: null,
       name: null,
@@ -63,11 +63,11 @@
     }
   });
 
-  const __default__$s = vue.defineComponent({
+  const __default__$u = vue.defineComponent({
     name: "MEditorCodeLink"
   });
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$s,
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$u,
     props: {
       config: null,
       model: null,
@@ -136,12 +136,12 @@
     }
   });
 
-  const _hoisted_1$g = ["src"];
-  const __default__$r = vue.defineComponent({
+  const _hoisted_1$h = ["src"];
+  const __default__$t = vue.defineComponent({
     name: "MEditorIcon"
   });
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$r,
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$t,
     props: {
       icon: null
     },
@@ -160,7 +160,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$g)
+            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$h)
           ]),
           _: 1
         })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -179,14 +179,15 @@
     }
   });
 
-  const _hoisted_1$f = { class: "m-fields-code-select" };
-  const __default__$q = vue.defineComponent({
+  const __default__$s = vue.defineComponent({
     name: "MEditorCodeSelect"
   });
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$q,
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$s,
     props: {
-      config: null,
+      config: { default: () => ({
+        editable: true
+      }) },
       model: null,
       prop: null,
       name: null,
@@ -230,7 +231,7 @@
               defaultValue: {},
               itemsFunction: (row) => {
                 const paramsConfig = getParamsConfig(row.codeId);
-                if (lodashEs.isEmpty(row.params) || !row.params) {
+                if (!row.params || lodashEs.isEmpty(row.params)) {
                   form.createValues(mForm, paramsConfig, {}, row.params);
                 }
                 return paramsConfig;
@@ -270,6 +271,7 @@
         return paramStatements.map((paramState) => ({
           labelWidth: "100px",
           text: paramState.name,
+          inline: true,
           ...paramState
         }));
       };
@@ -278,7 +280,9 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_table = vue.resolveComponent("m-form-table");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["m-fields-code-select", __props.config.className])
+        }, [
           vue.createVNode(_component_m_form_table, {
             config: vue.unref(tableConfig),
             model: __props.model[__props.name],
@@ -289,7 +293,7 @@
             onChange: changeHandler
           }, {
             operateCol: vue.withCtx(({ scope }) => [
-              scope.row.codeId ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
+              scope.row.codeId && __props.config.editable ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
                 key: 0,
                 icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                 class: "edit-icon",
@@ -298,6 +302,326 @@
             ]),
             _: 1
           }, 8, ["config", "model", "prop", "size"])
+        ], 2);
+      };
+    }
+  });
+
+  const _hoisted_1$g = { class: "m-fields-code-select-col" };
+  const __default__$r = vue.defineComponent({
+    name: "MEditorCodeSelectCol"
+  });
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$r,
+    props: {
+      config: null,
+      model: null,
+      prop: null,
+      name: null,
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const services = vue.inject("services");
+      const mForm = vue.inject("mForm");
+      const codeDsl = vue.computed(() => services?.codeBlockService.getCodeDsl());
+      const codeParamsConfig = vue.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 lodashEs.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 (lodashEs.isEmpty(paramStatements))
+          return [];
+        return paramStatements.map((paramState) => ({
+          labelWidth: "100px",
+          text: paramState.name,
+          ...paramState
+        }));
+      };
+      const getCodeParamsConfig = (codeId) => {
+        const paramsConfig = getParamItemsConfig(codeId);
+        if (!props.model.params || lodashEs.isEmpty(props.model.params)) {
+          props.model.params = {};
+          form.createValues(mForm, paramsConfig, {}, props.model.params);
+        }
+        codeParamsConfig.value = {
+          type: "fieldset",
+          items: paramsConfig,
+          legend: "\u53C2\u6570",
+          labelWidth: "70px",
+          name: "params",
+          display: !lodashEs.isEmpty(paramsConfig)
+        };
+      };
+      const onParamsChangeHandler = () => {
+        emit("change", props.model);
+      };
+      vue.watch(
+        () => props.model.codeId,
+        (codeId) => {
+          if (!codeId)
+            return;
+          getCodeParamsConfig(codeId);
+        },
+        {
+          immediate: true
+        }
+      );
+      return (_ctx, _cache) => {
+        const _component_m_form_container = vue.resolveComponent("m-form-container");
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+          vue.createVNode(_component_m_form_container, {
+            config: selectConfig,
+            model: __props.model,
+            onChange: onParamsChangeHandler
+          }, null, 8, ["model"]),
+          vue.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__ */ vue.createTextVNode("\u6DFB\u52A0\u4E8B\u4EF6");
+  const __default__$q = vue.defineComponent({
+    name: "MEditorEventSelect"
+  });
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$q,
+    props: {
+      config: null,
+      model: null,
+      prop: null,
+      name: null,
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const services = vue.inject("services");
+      const eventNameConfig = vue.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 = vue.computed(() => {
+        const defaultActionTypeConfig = {
+          name: "actionType",
+          text: "\u8054\u52A8\u7C7B\u578B",
+          labelWidth: "70px",
+          type: "select",
+          defaultValue: schema.ActionType.COMP,
+          options: () => [
+            {
+              text: "\u7EC4\u4EF6",
+              label: "\u7EC4\u4EF6",
+              value: schema.ActionType.COMP
+            },
+            {
+              text: "\u4EE3\u7801",
+              label: "\u4EE3\u7801",
+              value: schema.ActionType.CODE
+            }
+          ]
+        };
+        return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
+      });
+      const targetCompConfig = vue.computed(() => {
+        const defaultTargetCompConfig = {
+          name: "to",
+          text: "\u8054\u52A8\u7EC4\u4EF6",
+          labelWidth: "70px",
+          type: "ui-select",
+          display: (mForm, { model }) => model.actionType === schema.ActionType.COMP
+        };
+        return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
+      });
+      const compActionConfig = vue.computed(() => {
+        const defaultCompActionConfig = {
+          name: "method",
+          text: "\u52A8\u4F5C",
+          labelWidth: "70px",
+          type: "select",
+          display: (mForm, { model }) => model.actionType === schema.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 = vue.computed(() => {
+        const defaultCodeActionConfig = {
+          type: "code-select-col",
+          display: (mForm, { model }) => model.actionType === schema.ActionType.CODE
+        };
+        return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
+      });
+      const tableConfig = vue.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 = vue.computed(() => ({
+        items: [
+          {
+            type: "group-list",
+            name: "actions",
+            enableToggleMode: false,
+            items: [actionTypeConfig.value, targetCompConfig.value, compActionConfig.value, codeActionConfig.value]
+          }
+        ]
+      }));
+      const isOldVersion = vue.computed(() => {
+        if (props.model[props.name].length === 0)
+          return false;
+        return !lodashEs.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 = vue.resolveComponent("m-form-container");
+        const _component_m_form_panel = vue.resolveComponent("m-form-panel");
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+          vue.unref(isOldVersion) ? (vue.openBlock(), vue.createBlock(_component_m_form_container, {
+            key: 0,
+            ref: "eventForm",
+            size: props.size,
+            model: __props.model,
+            config: vue.unref(tableConfig),
+            onChange: onChangeHandler
+          }, null, 8, ["size", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              class: "create-button",
+              type: "primary",
+              size: "small",
+              onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
+            }, {
+              default: vue.withCtx(() => [
+                _hoisted_3$4
+              ]),
+              _: 1
+            }),
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.model[__props.name], (cardItem, index) => {
+              return vue.openBlock(), vue.createBlock(_component_m_form_panel, {
+                key: index,
+                config: vue.unref(actionsConfig),
+                model: cardItem,
+                onChange: onChangeHandler
+              }, {
+                header: vue.withCtx(() => [
+                  vue.createVNode(_component_m_form_container, {
+                    class: "fullWidth",
+                    config: vue.unref(eventNameConfig),
+                    model: cardItem,
+                    onChange: onChangeHandler
+                  }, null, 8, ["config", "model"]),
+                  vue.createVNode(vue.unref(design.TMagicButton), {
+                    style: { "color": "#f56c6c" },
+                    text: "",
+                    icon: vue.unref(iconsVue.Delete),
+                    onClick: ($event) => removeEvent(index)
+                  }, null, 8, ["icon", "onClick"])
+                ]),
+                _: 2
+              }, 1032, ["config", "model"]);
+            }), 128))
+          ]))
         ]);
       };
     }
@@ -721,341 +1045,211 @@
     }
   });
 
-  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, lodashEs.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 lodashEs.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 events.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;
-          }
-        });
-      });
+          ]
+        },
+        {
+          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"
+            }
+          ]
+        }
+      ]
     }
-    use(options) {
-      Object.entries(options).forEach(([methodName2, method]) => {
-        if (typeof method === "function")
-          this.middleware[methodName2].push(method);
-      });
+  ];
+
+  const log = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.log("magic editor: ", ...args);
     }
-    usePlugin(options) {
-      Object.entries(options).forEach(([methodName2, method]) => {
-        if (typeof method === "function")
-          this.pluginOptionsList[methodName2].push(method);
-      });
+  };
+  const info = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.info("magic editor: ", ...args);
     }
-    removeAllPlugins() {
-      Object.keys(this.pluginOptionsList).forEach((key) => {
-        this.pluginOptionsList[key] = [];
-      });
-      Object.keys(this.middleware).forEach((key) => {
-        this.middleware[key] = [];
-      });
+  };
+  const warn = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.warn("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 debug = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.debug("magic editor: ", ...args);
     }
-  }
-
-  class History extends BaseService {
-    state = vue.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__default.default(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 error = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.error("magic editor: ", ...args);
     }
-  }
-  const storageService = new WebStorage();
+  };
 
   var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
     ColumnLayout2["LEFT"] = "left";
@@ -1248,145 +1442,481 @@
     unsafe: true
   }).replace(/"(\w+)":\s/g, "$1: ");
 
-  class Props extends BaseService {
-    state = vue.reactive({
-      propsConfigMap: {},
-      propsValueMap: {}
-    });
-    constructor() {
-      super([
-        "setPropsConfig",
-        "getPropsConfig",
-        "setPropsValue",
-        "getPropsValue",
-        "createId",
-        "setNewItemId",
-        "fillConfig",
-        "getDefaultPropsValue"
-      ]);
-    }
-    setPropsConfigs(configs) {
-      Object.keys(configs).forEach((type) => {
-        this.setPropsConfig(utils.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, lodashEs.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 lodashEs.cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
+      this.listCursor -= 1;
+      return this.getCurrentElement();
     }
-    setPropsValues(values) {
-      Object.keys(values).forEach((type) => {
-        this.setPropsValue(utils.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(
-          lodashEs.cloneDeep({
-            type,
-            ...defaultValue
-          })
-        )
-      ]);
-      return {
-        id,
-        ...defaultPropsValue,
-        ...lodashEs.mergeWith({}, lodashEs.cloneDeep(this.state.propsValueMap[type] || {}), data)
-      };
+      return lodashEs.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 events.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 = vue.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 (!lodashEs.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;
+  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__default.default(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 = vue.reactive({
+      propsConfigMap: {},
+      propsValueMap: {}
+    });
+    constructor() {
+      super([
+        "setPropsConfig",
+        "getPropsConfig",
+        "setPropsValue",
+        "getPropsValue",
+        "createId",
+        "setNewItemId",
+        "fillConfig",
+        "getDefaultPropsValue"
+      ]);
+    }
+    setPropsConfigs(configs) {
+      Object.keys(configs).forEach((type) => {
+        this.setPropsConfig(utils.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 lodashEs.cloneDeep(this.state.propsConfigMap[type] || await this.fillConfig([]));
+    }
+    setPropsValues(values) {
+      Object.keys(values).forEach((type) => {
+        this.setPropsValue(utils.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(
+          lodashEs.cloneDeep({
+            type,
+            ...defaultValue
+          })
+        )
+      ]);
+      return {
+        id,
+        ...defaultPropsValue,
+        ...lodashEs.mergeWith({}, lodashEs.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 (!lodashEs.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;
           }
           pasteConfig.style = {
             ...pasteConfig.style,
@@ -1554,7 +2084,7 @@
         historyService.resetState();
       }
       if (node?.id) {
-        this.get("stage")?.renderer.runtime?.getApp?.().page?.emit(
+        this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
           "editor:select",
           {
             node,
@@ -1905,437 +2435,148 @@
     }
     async moveToContainer(config, targetId) {
       const root = lodashEs.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 = lodashEs.mergeWith(lodashEs.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: lodashEs.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 = vue.toRaw(this.get("node"));
-      if (!node || utils.isPage(node))
-        return;
-      const { style, id, type } = node;
-      if (!style || style.position !== "absolute")
-        return;
-      if (top && !utils.isNumber(style.top))
-        return;
-      if (left && !utils.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 = lodashEs.cloneDeep(vue.toRaw(this.get("node")));
-      const page = this.get("page");
-      if (!this.isHistoryStateChange && curNode && page) {
-        historyService.push({
-          data: lodashEs.cloneDeep(vue.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 = lodashEs.cloneDeep(dist);
-      if (!utils.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 = vue.reactive({});
-  let methodMap = vue.reactive({});
-  class Events extends BaseService {
-    constructor() {
-      super([]);
-    }
-    init(componentGroupList) {
-      componentGroupList.forEach((group) => {
-        group.items.forEach((element) => {
-          const type = utils.toLine(element.type);
-          if (!this.getEvent(type)) {
-            this.setEvent(type, core.DEFAULT_EVENTS);
-          }
-          if (!this.getMethod(type)) {
-            this.setMethod(type, core.DEFAULT_METHODS);
-          }
-        });
-      });
-    }
-    setEvents(events) {
-      Object.keys(events).forEach((type) => {
-        this.setEvent(utils.toLine(type), events[type] || []);
-      });
-    }
-    setEvent(type, events) {
-      eventMap[type] = [...core.DEFAULT_EVENTS, ...events];
-    }
-    getEvent(type) {
-      return lodashEs.cloneDeep(eventMap[type] || core.DEFAULT_EVENTS);
-    }
-    setMethods(methods) {
-      Object.keys(methods).forEach((type) => {
-        this.setMethod(utils.toLine(type), methods[type] || []);
-      });
-    }
-    setMethod(type, method) {
-      methodMap[type] = [...core.DEFAULT_METHODS, ...method];
-    }
-    getMethod(type) {
-      return lodashEs.cloneDeep(methodMap[type] || core.DEFAULT_METHODS);
-    }
-    resetState() {
-      eventMap = vue.reactive({});
-      methodMap = vue.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 = lodashEs.mergeWith(lodashEs.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: lodashEs.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 = vue.toRaw(this.get("node"));
+      if (!node || utils.isPage(node))
+        return;
+      const { style, id, type } = node;
+      if (!style || style.position !== "absolute")
+        return;
+      if (top && !utils.isNumber(style.top))
+        return;
+      if (left && !utils.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 = lodashEs.cloneDeep(vue.toRaw(this.get("node")));
+      const page = this.get("page");
+      if (!this.isHistoryStateChange && curNode && page) {
+        historyService.push({
+          data: lodashEs.cloneDeep(vue.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 = lodashEs.cloneDeep(dist);
+      if (!utils.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 = vue.reactive({
     uiSelectMode: false,
@@ -2535,7 +2776,7 @@
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$u, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_3$3
             ])
@@ -2766,7 +3007,7 @@
                   disabled: vue.unref(disabled)
                 }, {
                   default: vue.withCtx(() => [
-                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
+                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
                       key: 0,
                       icon: __props.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -2783,7 +3024,7 @@
               disabled: vue.unref(disabled)
             }, {
               default: vue.withCtx(() => [
-                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
+                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
                   key: 0,
                   icon: __props.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -3141,14 +3382,17 @@
         const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
         if (codeDraft) {
           design.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");
@@ -3489,22 +3733,10 @@
   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__ */ vue.createElementVNode("svg", {
-    class: "arrow-left",
-    viewBox: "0 0 1024 1024",
-    xmlns: "http://www.w3.org/2000/svg",
-    "data-v-029747aa": ""
-  }, [
-    /* @__PURE__ */ vue.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 = vue.defineComponent({
     name: "MEditorCodeBlockList"
   });
@@ -3516,64 +3748,23 @@
     },
     setup(__props) {
       const props = __props;
-      const services = vue.inject("services");
-      const state = vue.reactive({
-        codeList: []
-      });
-      const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
-      const isShowCodeBlockEditor = vue.computed(() => services?.codeBlockService.getCodeEditorShowStatus() || false);
-      const codeCombineInfo = vue.ref(null);
-      const getBindCompsByCodeId = (codeId) => {
-        if (!codeCombineInfo.value)
-          return [];
-        const bindsComp = [];
-        lodashEs.forIn(codeCombineInfo.value, (codeIds, compId) => {
-          if (codeIds.includes(codeId)) {
-            bindsComp.push({
-              compId,
-              compName: getCompName(compId)
-            });
-          }
-        });
-        return bindsComp;
-      };
-      const refreshCodeList = async () => {
-        const codeDsl = lodashEs.cloneDeep(await services?.codeBlockService.getCodeDsl()) || null;
-        codeCombineInfo.value = lodashEs.cloneDeep(services?.codeBlockService.getCombineInfo()) || null;
-        if (!codeDsl || !codeCombineInfo.value)
-          return;
-        state.codeList = [];
-        lodashEs.forIn(codeDsl, (value, codeId) => {
-          state.codeList.push({
-            id: codeId,
-            name: value.name,
-            codeBlockContent: value,
-            showRelation: true,
-            combineInfo: getBindCompsByCodeId(codeId)
-          });
-        });
-      };
-      vue.watch(
-        () => services?.editorService.get("root"),
-        () => {
-          services?.codeBlockService.refreshAllRelations();
-          refreshCodeList();
-        },
-        {
-          immediate: true
-        }
-      );
-      vue.watch(
-        [() => services?.codeBlockService.getCodeDsl(), () => services?.codeBlockService.getCombineInfo()],
-        () => {
-          refreshCodeList();
-        },
-        {
-          deep: true
-        }
+      const { codeBlockService, depService, editorService } = vue.inject("services") || {};
+      const codeList = vue.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 = vue.computed(() => codeBlockService?.getEditStatus());
+      const isShowCodeBlockEditor = vue.computed(() => codeBlockService?.getCodeEditorShowStatus() || false);
       const createCodeBlock = async () => {
-        const { codeBlockService } = services || {};
         if (!codeBlockService) {
           design.tMagicMessage.error("\u65B0\u589E\u4EE3\u7801\u5757\u5931\u8D25");
           return;
@@ -3590,14 +3781,14 @@
         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 = !lodashEs.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);
@@ -3612,27 +3803,23 @@
         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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
           vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
@@ -3662,16 +3849,18 @@
           ]),
           vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
             default: vue.withCtx(() => [
-              !vue.unref(lodashEs.isEmpty)(state.codeList) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
-                key: 0,
+              vue.createVNode(vue.unref(design.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: vue.unref(codeList),
                 "highlight-current": true,
                 "filter-node-method": filterNode,
-                onNodeClick: toggleCombineRelation
+                onNodeClick: clickHandler
               }, {
                 default: vue.withCtx(({ data }) => [
                   vue.createElementVNode("div", {
@@ -3680,14 +3869,14 @@
                   }, [
                     vue.createElementVNode("div", _hoisted_5, [
                       vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(data.name) + "\uFF08" + vue.toDisplayString(data.id) + "\uFF09", 1),
-                      vue.createElementVNode("div", _hoisted_7, [
+                      data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
                         vue.createVNode(vue.unref(design.TMagicTooltip), {
                           effect: "dark",
                           content: vue.unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
                           placement: "bottom"
                         }, {
                           default: vue.withCtx(() => [
-                            vue.createVNode(_sfc_main$s, {
+                            vue.createVNode(_sfc_main$u, {
                               icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                               class: "edit-icon",
                               onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -3695,29 +3884,14 @@
                           ]),
                           _: 2
                         }, 1032, ["content"]),
-                        data.combineInfo && data.combineInfo.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                          key: 0,
-                          effect: "dark",
-                          content: "\u67E5\u770B\u7ED1\u5B9A\u5173\u7CFB",
-                          placement: "bottom"
-                        }, {
-                          default: vue.withCtx(() => [
-                            vue.createVNode(_sfc_main$s, {
-                              icon: vue.unref(iconsVue.Link),
-                              class: "edit-icon",
-                              onClick: vue.withModifiers(($event) => toggleCombineRelation(data), ["stop"])
-                            }, null, 8, ["icon", "onClick"])
-                          ]),
-                          _: 2
-                        }, 1024)) : vue.createCommentVNode("", true),
                         vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                          key: 1,
+                          key: 0,
                           effect: "dark",
                           content: "\u5220\u9664",
                           placement: "bottom"
                         }, {
                           default: vue.withCtx(() => [
-                            vue.createVNode(_sfc_main$s, {
+                            vue.createVNode(_sfc_main$u, {
                               icon: vue.unref(iconsVue.Close),
                               class: "edit-icon",
                               onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -3729,29 +3903,12 @@
                           id: data.id,
                           data: data.codeBlockContent
                         })
-                      ])
-                    ]),
-                    data.showRelation && data.combineInfo && data.combineInfo.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
-                      _hoisted_9,
-                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(data.combineInfo, (comp, index) => {
-                        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                          key: index,
-                          class: "code-comp",
-                          size: "small",
-                          plain: true,
-                          onClick: vue.withModifiers(($event) => selectComp(comp.compId), ["stop"])
-                        }, {
-                          default: vue.withCtx(() => [
-                            vue.createTextVNode(vue.toDisplayString(comp.compName), 1)
-                          ]),
-                          _: 2
-                        }, 1032, ["onClick"]);
-                      }), 128))
-                    ])) : vue.createCommentVNode("", true)
+                      ])) : vue.createCommentVNode("", true)
+                    ])
                   ], 8, _hoisted_4)
                 ]),
                 _: 3
-              }, 8, ["data"])) : vue.createCommentVNode("", true)
+              }, 8, ["data"])
             ]),
             _: 3
           }),
@@ -3863,7 +4020,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$u, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -3878,7 +4035,7 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$s, {
+                              vue.createVNode(_sfc_main$u, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
                               vue.createVNode(vue.unref(design.TMagicTooltip), {
@@ -4479,7 +4636,7 @@
                   (vue.openBlock(), vue.createElementBlock("div", {
                     key: config.text
                   }, [
-                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
+                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
                       key: 0,
                       icon: config.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -4700,14 +4857,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$u, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$u, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           vue.unref(pageLength) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -4723,7 +4880,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$u, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -5614,8 +5771,7 @@
       id: "",
       editable: true,
       combineIds: [],
-      undeletableList: [],
-      relations: {}
+      undeletableList: []
     });
     constructor() {
       super([
@@ -5660,6 +5816,7 @@
         ...existContent,
         ...codeConfigProcessed
       };
+      this.emit("addOrUpdate", id, codeDsl[id]);
     }
     async getCodeDslByIds(ids) {
       const codeDsl2 = await this.getCodeDsl();
@@ -5700,39 +5857,6 @@
     getCombineIds() {
       return this.state.combineIds;
     }
-    addCodeRelationListener() {
-      editorService.on("update", (nodes) => {
-        const relations = lodashEs.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;
     }
@@ -5754,88 +5878,268 @@
         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 = lodashEs.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 = lodashEs.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 = vue.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) {
-      lodashEs.forIn(node, (value, key) => {
-        if (value?.hookType === schema.HookType.CODE && !lodashEs.isEmpty(value.hookData)) {
-          value.hookData.forEach((relationItem) => {
-            if (relationItem.codeId) {
-              relation[node.id] = lodashEs.union(relation[node.id], [relationItem.codeId]);
-            }
-          });
-          return;
+  }
+  const componentListService = new ComponentList();
+
+  class Target extends events.EventEmitter {
+    isTarget;
+    id;
+    name;
+    type = "default";
+    deps = vue.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 events.EventEmitter {
+    targets = vue.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" && !lodashEs.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 = lodashEs.omit(relations, [node.id]);
-      if (!lodashEs.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 = vue.reactive({
-      list: []
-    });
+  let eventMap = vue.reactive({});
+  let methodMap = vue.reactive({});
+  class Events extends BaseService {
     constructor() {
       super([]);
     }
-    setList(componentGroupList) {
-      this.state.list = componentGroupList;
+    init(componentGroupList) {
+      componentGroupList.forEach((group) => {
+        group.items.forEach((element) => {
+          const type = utils.toLine(element.type);
+          if (!this.getEvent(type)) {
+            this.setEvent(type, core.DEFAULT_EVENTS);
+          }
+          if (!this.getMethod(type)) {
+            this.setMethod(type, core.DEFAULT_METHODS);
+          }
+        });
+      });
     }
-    getList() {
-      return this.state.list;
+    setEvents(events) {
+      Object.keys(events).forEach((type) => {
+        this.setEvent(utils.toLine(type), events[type] || []);
+      });
+    }
+    setEvent(type, events) {
+      eventMap[type] = [...core.DEFAULT_EVENTS, ...events];
+    }
+    getEvent(type) {
+      return lodashEs.cloneDeep(eventMap[type] || core.DEFAULT_EVENTS);
+    }
+    setMethods(methods) {
+      Object.keys(methods).forEach((type) => {
+        this.setMethod(utils.toLine(type), methods[type] || []);
+      });
+    }
+    setMethod(type, method) {
+      methodMap[type] = [...core.DEFAULT_METHODS, ...method];
+    }
+    getMethod(type) {
+      return lodashEs.cloneDeep(methodMap[type] || core.DEFAULT_METHODS);
     }
     resetState() {
-      this.state.list = [];
+      eventMap = vue.reactive({});
+      methodMap = vue.reactive({});
     }
     destroy() {
       this.resetState();
@@ -5843,7 +6147,252 @@
       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: StageCore.CONTAINER_HIGHLIGHT_CLASS_NAME
+    },
+    containerHighlightDuration: {
+      type: Number,
+      default: 800
+    },
+    containerHighlightType: {
+      type: String,
+      default: StageCore.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 === schema.HookType.CODE && !lodashEs.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
+  }) => {
+    vue.watch(
+      () => props.modelValue,
+      (modelValue) => {
+        editorService.set("root", modelValue);
+      },
+      {
+        immediate: true
+      }
+    );
+    vue.watch(
+      () => props.componentGroupList,
+      (componentGroupList) => componentListService.setList(componentGroupList),
+      {
+        immediate: true
+      }
+    );
+    vue.watch(
+      () => props.propsConfigs,
+      (configs) => propsService.setPropsConfigs(configs),
+      {
+        immediate: true
+      }
+    );
+    vue.watch(
+      () => props.propsValues,
+      (values) => propsService.setPropsValues(values),
+      {
+        immediate: true
+      }
+    );
+    vue.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
+      }
+    );
+    vue.watch(
+      () => props.defaultSelected,
+      (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
+      {
+        immediate: true
+      }
+    );
+    vue.watch(
+      () => props.stageRect,
+      (stageRect) => stageRect && uiService.set("stageRect", stageRect),
+      {
+        immediate: true
+      }
+    );
+    vue.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 (vue.toRaw(value) !== vue.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);
+    vue.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 = vue.defineComponent({
     name: "m-editor",
@@ -5854,181 +6403,9 @@
       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: StageCore.CONTAINER_HIGHLIGHT_CLASS_NAME
-      },
-      containerHighlightDuration: {
-        type: Number,
-        default: 800
-      },
-      containerHighlightType: {
-        type: String,
-        default: StageCore.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 (vue.toRaw(value) !== vue.toRaw(preValue)) {
-          emit("update:modelValue", value);
-        }
-        value.codeBlocks = value.codeBlocks || {};
-        codeBlockService.setCodeDsl(value.codeBlocks);
-      };
-      editorService.on("root-change", rootChangeHandler);
-      vue.watch(
-        () => props.modelValue,
-        (modelValue) => {
-          editorService.set("root", modelValue);
-        },
-        {
-          immediate: true
-        }
-      );
-      vue.watch(
-        () => props.componentGroupList,
-        (componentGroupList) => componentListService.setList(componentGroupList),
-        {
-          immediate: true
-        }
-      );
-      vue.watch(
-        () => props.propsConfigs,
-        (configs) => propsService.setPropsConfigs(configs),
-        {
-          immediate: true
-        }
-      );
-      vue.watch(
-        () => props.propsValues,
-        (values) => propsService.setPropsValues(values),
-        {
-          immediate: true
-        }
-      );
-      vue.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
-        }
-      );
-      vue.watch(
-        () => props.defaultSelected,
-        (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
-        {
-          immediate: true
-        }
-      );
-      vue.watch(
-        () => props.stageRect,
-        (stageRect) => stageRect && uiService.set("stageRect", stageRect),
-        {
-          immediate: true
-        }
-      );
-      vue.onUnmounted(() => {
-        editorService.resetState();
-        historyService.resetState();
-        propsService.resetState();
-        uiService.resetState();
-        componentListService.resetState();
-        codeBlockService.resetState();
-        editorService.off("root-change", rootChangeHandler);
-      });
       const services = {
         componentListService,
         eventsService,
@@ -6037,8 +6414,11 @@
         editorService,
         uiService,
         storageService,
-        codeBlockService
+        codeBlockService,
+        depService
       };
+      initServiceEvents(props, emit, services);
+      initServiceState(props, services);
       vue.provide("services", services);
       vue.provide("codeOptions", props.codeOptions);
       vue.provide(
@@ -6057,7 +6437,6 @@
           disabledDragStart: props.disabledDragStart
         })
       );
-      codeBlockService.addCodeRelationListener();
       return services;
     }
   });
@@ -6168,10 +6547,12 @@
       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);
     }
   };
 
@@ -6179,13 +6560,15 @@
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
   exports.CodeBlockList = _sfc_main$e;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$r;
+  exports.CodeSelect = _sfc_main$t;
+  exports.CodeSelectCol = _sfc_main$s;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$d;
   exports.ContentMenu = _sfc_main$c;
+  exports.EventSelect = _sfc_main$r;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$s;
+  exports.Icon = _sfc_main$u;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$a;
@@ -6201,6 +6584,7 @@
   exports.codeBlockService = codeBlockService;
   exports.debug = debug;
   exports.default = index;
+  exports.depService = depService;
   exports.editorService = editorService;
   exports.error = error;
   exports.eventsService = eventsService;