@tmagic/editor 1.1.6 → 1.2.0-beta.2

package/dist/tmagic-editor.umd.js

@@ -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('monaco-editor'), require('@tmagic/stage'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons-vue', 'lodash-es', 'monaco-editor', '@tmagic/stage', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.iconsVue, global.lodashEs, global.monaco, global.StageCore, global.schema, global.utils, global.events, global.core, global.Gesto, global.ElementPlus, global.KeyController));
-})(this, (function (exports, vue, serialize, iconsVue, lodashEs, monaco, StageCore, schema, utils, events, core, Gesto, elementPlus, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('element-plus'), require('lodash-es'), require('@element-plus/icons-vue'), require('monaco-editor'), require('@tmagic/stage'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'element-plus', 'lodash-es', '@element-plus/icons-vue', 'monaco-editor', '@tmagic/stage', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.ElementPlus, global.lodashEs, global.iconsVue, global.monaco, global.StageCore, global.schema, global.utils, global.events, global.core, global.Gesto, global.KeyController));
+})(this, (function (exports, vue, serialize, elementPlus, lodashEs, iconsVue, monaco, StageCore, schema, utils, events, core, Gesto, KeyController) { 'use strict';
 
   const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
@@ -30,7 +30,7 @@
   const Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
   const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
 
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "Code",
     props: {
       model: null,
@@ -42,7 +42,7 @@
     setup(__props, { emit }) {
       const props = __props;
       const language = vue.computed(() => props.config.language || "javascript");
-      const height = vue.computed(() => `${document.body.clientHeight - 168}px`);
+      const height = vue.computed(() => props.config.height || `${document.body.clientHeight - 168}px`);
       const save = (v) => {
         props.model[props.name] = v;
         emit("change", v);
@@ -53,13 +53,14 @@
           style: vue.normalizeStyle(`height: ${vue.unref(height)}`),
           "init-values": __props.model[__props.name],
           language: vue.unref(language),
+          options: __props.config.options,
           onSave: save
-        }, null, 8, ["style", "init-values", "language"]);
+        }, null, 8, ["style", "init-values", "language", "options"]);
       };
     }
   });
 
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     __name: "CodeLink",
     props: {
       config: null,
@@ -70,17 +71,24 @@
     emits: ["change"],
     setup(__props, { emit }) {
       const props = __props;
-      const formConfig = vue.computed(() => ({
-        ...props.config,
-        text: "",
-        type: "link",
-        form: [
-          {
-            name: props.name,
-            type: "vs-code"
-          }
-        ]
-      }));
+      const formConfig = vue.computed(() => {
+        const { codeOptions, ...config } = props.config;
+        return {
+          ...config,
+          text: "",
+          type: "link",
+          form: [
+            {
+              name: props.name,
+              type: "vs-code",
+              options: {
+                tabSize: 2,
+                ...codeOptions || {}
+              }
+            }
+          ]
+        };
+      });
       const modelValue = vue.reactive({
         form: {
           [props.name]: ""
@@ -122,8 +130,186 @@
     }
   });
 
-  const _hoisted_1$b = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
+    ColumnLayout2["LEFT"] = "left";
+    ColumnLayout2["CENTER"] = "center";
+    ColumnLayout2["RIGHT"] = "right";
+    return ColumnLayout2;
+  })(ColumnLayout || {});
+  var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
+    LayerOffset2["TOP"] = "top";
+    LayerOffset2["BOTTOM"] = "bottom";
+    return LayerOffset2;
+  })(LayerOffset || {});
+  var Layout = /* @__PURE__ */ ((Layout2) => {
+    Layout2["FLEX"] = "flex";
+    Layout2["FIXED"] = "fixed";
+    Layout2["RELATIVE"] = "relative";
+    Layout2["ABSOLUTE"] = "absolute";
+    return Layout2;
+  })(Layout || {});
+  var Keys = /* @__PURE__ */ ((Keys2) => {
+    Keys2["ESCAPE"] = "Space";
+    return Keys2;
+  })(Keys || {});
+  const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+  const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
+  var CodeEditorMode = /* @__PURE__ */ ((CodeEditorMode2) => {
+    CodeEditorMode2["LIST"] = "list";
+    CodeEditorMode2["EDITOR"] = "editor";
+    return CodeEditorMode2;
+  })(CodeEditorMode || {});
+  var CodeDeleteErrorType = /* @__PURE__ */ ((CodeDeleteErrorType2) => {
+    CodeDeleteErrorType2["UNDELETEABLE"] = "undeleteable";
+    CodeDeleteErrorType2["BIND"] = "bind";
+    return CodeDeleteErrorType2;
+  })(CodeDeleteErrorType || {});
+  var CodeSelectOp = /* @__PURE__ */ ((CodeSelectOp2) => {
+    CodeSelectOp2["ADD"] = "add";
+    CodeSelectOp2["DELETE"] = "delete";
+    CodeSelectOp2["CHANGE"] = "change";
+    return CodeSelectOp2;
+  })(CodeSelectOp || {});
+
+  const _hoisted_1$d = { class: "tool-bar" };
+  const _hoisted_2$6 = /* @__PURE__ */ vue.createElementVNode("path", {
+    fill: "currentColor",
+    d: "m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
+  }, null, -1);
+  const _hoisted_3$3 = [
+    _hoisted_2$6
+  ];
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+    __name: "CodeSelect",
+    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 selectConfig = vue.computed(() => {
+        const defaultConfig = {
+          multiple: true,
+          options: async () => {
+            const codeDsl = await services?.codeBlockService.getCodeDsl();
+            if (codeDsl) {
+              return lodashEs.map(codeDsl, (value, key) => ({
+                text: `${value.name}\uFF08${key}\uFF09`,
+                label: `${value.name}\uFF08${key}\uFF09`,
+                value: key
+              }));
+            }
+            return [];
+          }
+        };
+        return {
+          ...defaultConfig,
+          ...props.config.selectConfig
+        };
+      });
+      const fieldKey = vue.ref("");
+      const multiple = vue.ref(true);
+      const combineIds = vue.ref([]);
+      let lastTagSnapshot = lodashEs.cloneDeep(props.model[props.name]) || [];
+      vue.watchEffect(async () => {
+        const combineNames = await Promise.all(
+          combineIds.value.map(async (id) => {
+            const { name = "" } = await services?.codeBlockService.getCodeContentById(id) || {};
+            return name;
+          })
+        );
+        fieldKey.value = combineNames.join("-");
+      });
+      const changeHandler = async (value) => {
+        let codeIds = value;
+        if (typeof value === "string") {
+          multiple.value = false;
+          lastTagSnapshot = [lastTagSnapshot];
+          codeIds = value ? [value] : [];
+        }
+        await setCombineRelation(codeIds);
+        emit("change", value);
+      };
+      const setCombineRelation = async (codeIds) => {
+        const { id = "" } = services?.editorService.get("node") || {};
+        let opFlag = CodeSelectOp.CHANGE;
+        let diffValues = codeIds;
+        if (multiple.value) {
+          opFlag = codeIds.length < lastTagSnapshot.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
+          diffValues = lodashEs.xor(codeIds, lastTagSnapshot);
+        }
+        await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);
+        lastTagSnapshot = codeIds;
+        await setCombineIds(codeIds);
+      };
+      const setCombineIds = async (codeIds) => {
+        combineIds.value = codeIds;
+        await services?.codeBlockService.setCombineIds(codeIds);
+      };
+      const viewHandler = async () => {
+        if (props.model[props.name].length === 0) {
+          elementPlus.ElMessage.error("\u8BF7\u5148\u7ED1\u5B9A\u4EE3\u7801\u5757");
+          return;
+        }
+        await setCombineIds(props.model[props.name]);
+        await services?.codeBlockService.setMode(CodeEditorMode.LIST);
+        services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);
+      };
+      return (_ctx, _cache) => {
+        const _component_m_fields_select = vue.resolveComponent("m-fields-select");
+        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+        const _component_el_card = vue.resolveComponent("el-card");
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-fields-code-select",
+          key: fieldKey.value
+        }, [
+          vue.createVNode(_component_el_card, { shadow: "never" }, {
+            header: vue.withCtx(() => [
+              vue.createVNode(_component_m_fields_select, {
+                config: vue.unref(selectConfig),
+                model: __props.model,
+                prop: __props.prop,
+                name: __props.name,
+                size: __props.size,
+                onChange: changeHandler
+              }, null, 8, ["config", "model", "prop", "name", "size"])
+            ]),
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_1$d, [
+                vue.createVNode(_component_el_tooltip, {
+                  class: "tool-item",
+                  effect: "dark",
+                  content: "\u67E5\u770B\u4EE3\u7801\u5757",
+                  placement: "top"
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createElementBlock("svg", {
+                      onClick: viewHandler,
+                      preserveAspectRatio: "xMidYMid meet",
+                      viewBox: "0 0 24 24",
+                      width: "15px",
+                      height: "15px",
+                      "data-v-65a7fb6c": ""
+                    }, _hoisted_3$3))
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          })
+        ]);
+      };
+    }
+  });
+
+  const _hoisted_1$c = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "UISelect",
     props: {
       config: null,
@@ -188,7 +374,7 @@
             style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1$b
+              _hoisted_1$c
             ]),
             _: 1
           }, 8, ["icon"])
@@ -236,45 +422,36 @@
 
   const UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const toString = (v, language) => {
-    let value = "";
-    if (typeof v !== "string") {
-      value = serialize__default.default(v, {
-        space: 2,
-        unsafe: true
-      }).replace(/"(\w+)":\s/g, "$1: ");
-    } else {
-      value = v;
-    }
-    if (language === "javascript" && value.startsWith("{") && value.endsWith("}")) {
-      value = `(${value})`;
-    }
-    return value;
-  };
-  const _sfc_main$m = vue.defineComponent({
-    name: "magic-code-editor",
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+    __name: "CodeEditor",
     props: {
-      initValues: {
-        type: [String, Object]
-      },
-      modifiedValues: {
-        type: [String, Object]
-      },
-      type: {
-        type: String,
-        default: () => ""
-      },
-      language: {
-        type: String,
-        default: () => "javascript"
-      },
-      options: {
-        type: Object,
-        default: () => ({})
-      }
+      initValues: null,
+      modifiedValues: null,
+      type: { default: "" },
+      language: { default: "javascript" },
+      options: { default: () => ({
+        tabSize: 2
+      }) },
+      autoSave: { type: Boolean, default: true }
     },
     emits: ["initd", "save"],
-    setup(props, { emit }) {
+    setup(__props, { expose, emit }) {
+      const props = __props;
+      const toString = (v, language) => {
+        let value = "";
+        if (typeof v !== "string") {
+          value = serialize__default.default(v, {
+            space: 2,
+            unsafe: true
+          }).replace(/"(\w+)":\s/g, "$1: ");
+        } else {
+          value = v;
+        }
+        if (language === "javascript" && value.startsWith("{") && value.endsWith("}")) {
+          value = `(${value})`;
+        }
+        return value;
+      };
       let vsEditor = null;
       let vsDiffEditor = null;
       const values = vue.ref("");
@@ -323,7 +500,7 @@
             emit("save", getEditorValue());
           }
         });
-        if (props.type !== "diff") {
+        if (props.type !== "diff" && props.autoSave) {
           vsEditor?.onDidBlurEditorWidget(() => {
             emit("save", getEditorValue());
           });
@@ -349,10 +526,7 @@
       vue.onUnmounted(() => {
         resizeObserver.disconnect();
       });
-      return {
-        values,
-        loading,
-        codeEditor,
+      expose({
         getEditor() {
           return vsEditor || vsDiffEditor;
         },
@@ -361,78 +535,48 @@
           vsEditor?.focus();
           vsDiffEditor?.focus();
         }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "codeEditor",
+          ref: codeEditor,
+          class: "magic-code-editor"
+        }, null, 512);
       };
     }
   });
 
-  const _export_sfc = (sfc, props) => {
-    const target = sfc.__vccOpts || sfc;
-    for (const [key, val] of props) {
-      target[key] = val;
-    }
-    return target;
-  };
-
-  const _hoisted_1$a = {
-    ref: "codeEditor",
-    class: "magic-code-editor"
-  };
-  function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, null, 512);
-  }
-  const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$6]]);
-
   let $TMAGIC_EDITOR = {};
   const setConfig = (option) => {
     $TMAGIC_EDITOR = option;
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  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;
+  const log = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.log("magic editor: ", ...args);
     }
-    undo() {
-      if (!this.canUndo()) {
-        return null;
-      }
-      this.listCursor -= 1;
-      return this.getCurrentElement();
+  };
+  const info = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.info("magic editor: ", ...args);
     }
-    canRedo() {
-      return this.elementList.length > this.listCursor;
+  };
+  const warn = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.warn("magic editor: ", ...args);
     }
-    redo() {
-      if (!this.canRedo()) {
-        return null;
-      }
-      this.listCursor += 1;
-      return this.getCurrentElement();
+  };
+  const debug = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.debug("magic editor: ", ...args);
     }
-    getCurrentElement() {
-      if (this.listCursor < 1) {
-        return null;
-      }
-      return lodashEs.cloneDeep(this.elementList[this.listCursor - 1]);
+  };
+  const error = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.error("magic editor: ", ...args);
     }
-  }
+  };
 
   const compose = (middleware) => {
     if (!Array.isArray(middleware))
@@ -548,6 +692,269 @@
     }
   }
 
+  class CodeBlock extends BaseService {
+    state = vue.reactive({
+      isShowCodeEditor: false,
+      codeDsl: null,
+      id: "",
+      editable: true,
+      mode: CodeEditorMode.EDITOR,
+      combineIds: [],
+      undeletableList: []
+    });
+    constructor() {
+      super([
+        "setCodeDsl",
+        "getCodeDsl",
+        "getCodeContentById",
+        "getCodeDslByIds",
+        "getCurrentDsl",
+        "setCodeDslById",
+        "setCodeEditorShowStatus",
+        "setEditStatus",
+        "setMode",
+        "setCombineIds",
+        "setUndeleteableList",
+        "deleteCodeDslByIds"
+      ]);
+    }
+    async setCodeDsl(codeDsl) {
+      this.state.codeDsl = codeDsl;
+      await editorService.setCodeDsl(this.state.codeDsl);
+      info("[code-block]:code-dsl-change", this.state.codeDsl);
+      this.emit("code-dsl-change", this.state.codeDsl);
+    }
+    async getCodeDsl(forceRefresh = false) {
+      if (!this.state.codeDsl || forceRefresh) {
+        this.state.codeDsl = await editorService.getCodeDsl();
+      }
+      return this.state.codeDsl;
+    }
+    async getCodeContentById(id) {
+      if (!id)
+        return null;
+      const totalCodeDsl = await this.getCodeDsl();
+      if (!totalCodeDsl)
+        return null;
+      return totalCodeDsl[id] ?? null;
+    }
+    async setCodeDslById(id, codeConfig) {
+      let codeDsl = await this.getCodeDsl();
+      if (!codeDsl) {
+        codeDsl = {
+          [id]: codeConfig
+        };
+      } else {
+        const existContent = codeDsl[id] || {};
+        codeDsl = {
+          ...codeDsl,
+          [id]: {
+            ...existContent,
+            ...codeConfig
+          }
+        };
+      }
+      await this.setCodeDsl(codeDsl);
+    }
+    async getCodeDslByIds(ids) {
+      const codeDsl = await this.getCodeDsl();
+      return lodashEs.pick(codeDsl, ids);
+    }
+    async setCodeEditorShowStatus(status) {
+      this.state.isShowCodeEditor = status;
+    }
+    getCodeEditorShowStatus() {
+      return this.state.isShowCodeEditor;
+    }
+    setCodeEditorContent(status, id) {
+      if (!id)
+        return;
+      this.setId(id);
+      this.state.isShowCodeEditor = status;
+    }
+    async getCurrentDsl() {
+      return await this.getCodeContentById(this.state.id);
+    }
+    getEditStatus() {
+      return this.state.editable;
+    }
+    async setEditStatus(status) {
+      this.state.editable = status;
+    }
+    setId(id) {
+      if (!id)
+        return;
+      this.state.id = id;
+    }
+    getId() {
+      return this.state.id;
+    }
+    getMode() {
+      return this.state.mode;
+    }
+    async setMode(mode) {
+      this.state.mode = mode;
+    }
+    async setCombineIds(ids) {
+      this.state.combineIds = ids;
+    }
+    getCombineIds() {
+      return this.state.combineIds;
+    }
+    async setCombineRelation(compId, diffCodeIds, opFlag, hook) {
+      const codeDsl = lodashEs.cloneDeep(await this.getCodeDsl());
+      if (!codeDsl)
+        return;
+      if (opFlag === CodeSelectOp.DELETE) {
+        try {
+          diffCodeIds.forEach((codeId) => {
+            const compsContent = codeDsl[codeId].comps;
+            const index = compsContent?.[compId].findIndex((item) => item === hook);
+            if (typeof index !== "undefined" && index !== -1) {
+              compsContent?.[compId].splice(index, 1);
+            }
+          });
+        } catch (e) {
+          error(e);
+          throw new Error("\u89E3\u7ED1\u4EE3\u7801\u5757\u5931\u8D25");
+        }
+      } else if (opFlag === CodeSelectOp.ADD) {
+        try {
+          diffCodeIds.forEach((codeId) => {
+            const compsContent = codeDsl[codeId].comps;
+            const existHooks = compsContent?.[compId];
+            if (lodashEs.isEmpty(existHooks)) {
+              codeDsl[codeId].comps = {
+                ...codeDsl[codeId].comps || {},
+                [compId]: [hook]
+              };
+            } else {
+              existHooks?.push(hook);
+            }
+          });
+        } catch (e) {
+          error(e);
+          throw new Error("\u7ED1\u5B9A\u4EE3\u7801\u5757\u5931\u8D25");
+        }
+      } else if (opFlag === CodeSelectOp.CHANGE) {
+        lodashEs.forIn(codeDsl, (codeBlockContent, codeId) => {
+          if (codeId === diffCodeIds[0]) {
+            codeBlockContent.comps = {
+              ...codeBlockContent?.comps || {},
+              [compId]: [hook]
+            };
+          } else if (lodashEs.isEmpty(diffCodeIds) || codeId !== diffCodeIds[0]) {
+            const compHooks = codeBlockContent?.comps?.[compId];
+            if (!compHooks)
+              return true;
+            const index = compHooks.findIndex((hookName) => hookName === hook);
+            if (index !== -1) {
+              compHooks.splice(index, 1);
+              return false;
+            }
+          }
+        });
+      }
+      this.setCodeDsl(codeDsl);
+    }
+    getUndeletableList() {
+      return this.state.undeletableList;
+    }
+    async setUndeleteableList(codeIds) {
+      this.state.undeletableList = codeIds;
+    }
+    async deleteCodeDslByIds(codeIds) {
+      const currentDsl = await this.getCodeDsl();
+      const newDsl = lodashEs.omit(currentDsl, codeIds);
+      await this.setCodeDsl(newDsl);
+      return newDsl;
+    }
+    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 deleteCompsInRelation(node) {
+      const codeDsl = lodashEs.cloneDeep(await this.getCodeDsl());
+      if (!codeDsl)
+        return;
+      this.recurseNodes(node, codeDsl);
+      this.setCodeDsl(codeDsl);
+    }
+    destroy() {
+      this.state.isShowCodeEditor = false;
+      this.state.codeDsl = null;
+      this.state.id = "";
+      this.state.editable = true;
+      this.state.mode = CodeEditorMode.EDITOR;
+      this.state.combineIds = [];
+      this.state.undeletableList = [];
+    }
+    recurseNodes(node, codeDsl) {
+      if (!node.id)
+        return;
+      lodashEs.forIn(codeDsl, (codeBlockContent) => {
+        const compsContent = codeBlockContent.comps || {};
+        codeBlockContent.comps = lodashEs.omit(compsContent, node.id);
+      });
+      if (!lodashEs.isEmpty(node.items)) {
+        node.items.forEach((item) => {
+          this.recurseNodes(item, codeDsl);
+        });
+      }
+    }
+  }
+  const codeBlockService = new CodeBlock();
+
+  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]);
+    }
+  }
+
   class History extends BaseService {
     state = vue.reactive({
       pageSteps: {},
@@ -713,31 +1120,6 @@
   }
   const storageService = new WebStorage();
 
-  var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
-    ColumnLayout2["LEFT"] = "left";
-    ColumnLayout2["CENTER"] = "center";
-    ColumnLayout2["RIGHT"] = "right";
-    return ColumnLayout2;
-  })(ColumnLayout || {});
-  var LayerOffset = /* @__PURE__ */ ((LayerOffset2) => {
-    LayerOffset2["TOP"] = "top";
-    LayerOffset2["BOTTOM"] = "bottom";
-    return LayerOffset2;
-  })(LayerOffset || {});
-  var Layout = /* @__PURE__ */ ((Layout2) => {
-    Layout2["FLEX"] = "flex";
-    Layout2["FIXED"] = "fixed";
-    Layout2["RELATIVE"] = "relative";
-    Layout2["ABSOLUTE"] = "absolute";
-    return Layout2;
-  })(Layout || {});
-  var Keys = /* @__PURE__ */ ((Keys2) => {
-    Keys2["ESCAPE"] = "Space";
-    return Keys2;
-  })(Keys || {});
-  const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
-  const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
-
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
   const getPageList = (app) => {
     if (app.items && Array.isArray(app.items)) {
@@ -1098,7 +1480,9 @@
           "move",
           "undo",
           "redo",
-          "highlight"
+          "highlight",
+          "getCodeDsl",
+          "setCodeDsl"
         ],
         ["select", "update", "moveLayer"]
       );
@@ -1323,6 +1707,7 @@
         stage?.select(parent.id);
       }
       this.addModifiedNodeId(parent.id);
+      codeBlockService.deleteCompsInRelation(node);
     }
     async remove(nodeOrNodeList) {
       const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
@@ -1548,6 +1933,17 @@
     resetModifiedNodeId() {
       this.get("modifiedNodeIds").clear();
     }
+    async getCodeDsl() {
+      const root = this.get("root");
+      if (!root)
+        return null;
+      return root.codeBlocks || null;
+    }
+    async setCodeDsl(codeDsl) {
+      if (!this.state.root)
+        return;
+      this.state.root.codeBlocks = codeDsl;
+    }
     addModifiedNodeId(id) {
       if (!this.isHistoryStateChange) {
         this.get("modifiedNodeIds").set(id, id);
@@ -1852,13 +2248,19 @@
         },
         {
           title: "\u9AD8\u7EA7",
-          labelWidth: "80px",
+          lazy: true,
           items: [
             {
-              type: "code-link",
               name: "created",
               text: "created",
-              formTitle: "created"
+              type: "code-select",
+              labelWidth: "100px"
+            },
+            {
+              name: "mounted",
+              text: "mounted",
+              type: "code-select",
+              labelWidth: "100px"
             }
           ]
         }
@@ -1866,32 +2268,6 @@
     }
   ];
 
-  const log = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.log("magic editor: ", ...args);
-    }
-  };
-  const info = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.info("magic editor: ", ...args);
-    }
-  };
-  const warn = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.warn("magic editor: ", ...args);
-    }
-  };
-  const debug = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.debug("magic editor: ", ...args);
-    }
-  };
-  const error = (...args) => {
-    if (process.env.NODE_ENV === "development") {
-      console.error("magic editor: ", ...args);
-    }
-  };
-
   const state = vue.reactive({
     uiSelectMode: false,
     showSrc: false,
@@ -2032,52 +2408,47 @@
     return stage;
   };
 
-  const _sfc_main$l = vue.defineComponent({
-    components: { Plus: iconsVue.Plus },
-    setup() {
+  const _hoisted_1$b = { class: "m-editor-empty-panel" };
+  const _hoisted_2$5 = { class: "m-editor-empty-content" };
+  const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+    __name: "AddPageBox",
+    setup(__props) {
       const services = vue.inject("services");
-      return {
-        clickHandler() {
-          const { editorService } = services || {};
-          if (!editorService)
-            return;
-          editorService.add({
-            type: schema.NodeType.PAGE,
-            name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
-          });
-        }
+      const clickHandler = () => {
+        const { editorService } = services || {};
+        if (!editorService)
+          return;
+        editorService.add({
+          type: schema.NodeType.PAGE,
+          name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
+        });
+      };
+      return (_ctx, _cache) => {
+        const _component_el_icon = vue.resolveComponent("el-icon");
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+          vue.createElementVNode("div", _hoisted_2$5, [
+            vue.createElementVNode("div", {
+              class: "m-editor-empty-button",
+              onClick: clickHandler
+            }, [
+              vue.createElementVNode("div", null, [
+                vue.createVNode(_component_el_icon, null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.Plus))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _hoisted_3$2
+            ])
+          ])
+        ]);
       };
     }
   });
 
-  const _hoisted_1$9 = { class: "m-editor-empty-panel" };
-  const _hoisted_2$3 = { class: "m-editor-empty-content" };
-  const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_plus = vue.resolveComponent("plus");
-    const _component_el_icon = vue.resolveComponent("el-icon");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
-      vue.createElementVNode("div", _hoisted_2$3, [
-        vue.createElementVNode("div", {
-          class: "m-editor-empty-button",
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
-        }, [
-          vue.createElementVNode("div", null, [
-            vue.createVNode(_component_el_icon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_plus)
-              ]),
-              _: 1
-            })
-          ]),
-          _hoisted_3
-        ])
-      ])
-    ]);
-  }
-  const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$5]]);
-
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "Resizer",
     emits: ["change"],
     setup(__props, { emit }) {
@@ -2110,7 +2481,7 @@
     }
   });
 
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "Layout",
     props: {
       left: null,
@@ -2173,7 +2544,8 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "el",
-          ref: el
+          ref: el,
+          class: "m-editor-layout"
         }, [
           typeof props.left !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createElementVNode("div", {
@@ -2182,7 +2554,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$k, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$m, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
@@ -2191,7 +2563,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           typeof props.right !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$k, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$m, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
               style: vue.normalizeStyle(`width: ${__props.right}px`)
@@ -2204,8 +2576,8 @@
     }
   });
 
-  const _hoisted_1$8 = { class: "m-editor" };
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$a = { class: "m-editor" };
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "Framework",
     props: {
       codeOptions: { default: () => ({}) }
@@ -2256,7 +2628,7 @@
       return (_ctx, _cache) => {
         const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
         const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
           vue.unref(showSrc) ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
             key: 0,
@@ -2264,7 +2636,7 @@
             "init-values": vue.unref(root),
             options: __props.codeOptions,
             onSave: saveCode
-          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$j, {
+          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$l, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -2283,7 +2655,7 @@
             ]),
             center: vue.withCtx(() => [
               vue.unref(pageLength) > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(AddPageBox)
+                vue.createVNode(_sfc_main$n)
               ])
             ]),
             _: 2
@@ -2305,8 +2677,8 @@
     }
   });
 
-  const _hoisted_1$7 = ["src"];
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$9 = ["src"];
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     __name: "Icon",
     props: {
       icon: null
@@ -2327,7 +2699,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$7)
+            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$9)
           ]),
           _: 1
         })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -2346,12 +2718,12 @@
     }
   });
 
-  const _hoisted_1$6 = {
+  const _hoisted_1$8 = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$2 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$4 = { class: "el-dropdown-link menubar-menu-button" };
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     __name: "ToolButton",
     props: {
       data: { default: () => ({
@@ -2434,7 +2806,7 @@
           __props.data.type === "divider" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
             key: 0,
             direction: __props.data.direction || "vertical"
-          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             __props.data.tooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
               key: 0,
               effect: "dark",
@@ -2448,7 +2820,7 @@
                   disabled: vue.unref(disabled)
                 }, {
                   default: vue.withCtx(() => [
-                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
+                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
                       key: 0,
                       icon: __props.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -2465,7 +2837,7 @@
               disabled: vue.unref(disabled)
             }, {
               default: vue.withCtx(() => [
-                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
+                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
                   key: 0,
                   icon: __props.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -2498,7 +2870,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$2, [
+              vue.createElementVNode("span", _hoisted_2$4, [
                 vue.createTextVNode(vue.toDisplayString(__props.data.text), 1),
                 vue.createVNode(_component_el_icon, { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -2515,7 +2887,7 @@
     }
   });
 
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "NavMenu",
     props: {
       data: { default: () => ({}) },
@@ -2671,7 +3043,7 @@
               style: vue.normalizeStyle(`width: ${vue.unref(columnWidth)?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttons)[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$g, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$i, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -2683,8 +3055,8 @@
     }
   });
 
-  const _hoisted_1$5 = { class: "`m-editor-props-panel" };
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$7 = { class: "m-editor-props-panel" };
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "PropsPanel",
     emits: ["mounted"],
     setup(__props, { expose, emit }) {
@@ -2701,50 +3073,545 @@
           curFormConfig.value = [];
           return;
         }
-        const type = node.value.type || (node.value.items ? "container" : "text");
-        curFormConfig.value = await services?.propsService.getPropsConfig(type) || [];
-        values.value = node.value;
+        const type = node.value.type || (node.value.items ? "container" : "text");
+        curFormConfig.value = await services?.propsService.getPropsConfig(type) || [];
+        values.value = node.value;
+      };
+      vue.watchEffect(init);
+      services?.propsService.on("props-configs-change", init);
+      vue.onMounted(() => {
+        emit("mounted", internalInstance);
+      });
+      vue.watchEffect(() => {
+        if (configForm.value && stage.value) {
+          configForm.value.formState.stage = stage.value;
+        }
+      });
+      const submit = async () => {
+        try {
+          const values2 = await configForm.value?.submitForm();
+          services?.editorService.update(values2);
+        } catch (e) {
+          console.error(e);
+          elementPlus.ElMessage.closeAll();
+          elementPlus.ElMessage.error({
+            duration: 1e4,
+            showClose: true,
+            message: e.message,
+            dangerouslyUseHTMLString: true
+          });
+        }
+      };
+      expose({ submit });
+      return (_ctx, _cache) => {
+        const _component_m_form = vue.resolveComponent("m-form");
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+          vue.renderSlot(_ctx.$slots, "props-panel-header"),
+          vue.createVNode(_component_m_form, {
+            ref_key: "configForm",
+            ref: configForm,
+            class: vue.normalizeClass(`m-editor-props-panel ${vue.unref(propsPanelSize)}`),
+            "popper-class": `m-editor-props-panel-popper ${vue.unref(propsPanelSize)}`,
+            size: vue.unref(propsPanelSize),
+            "init-values": values.value,
+            config: curFormConfig.value,
+            onChange: submit
+          }, null, 8, ["class", "popper-class", "size", "init-values", "config"])
+        ]);
+      };
+    }
+  });
+
+  const _hoisted_1$6 = ["id"];
+  const _hoisted_2$3 = { class: "list-item" };
+  const _hoisted_3$1 = { class: "code-name" };
+  const _hoisted_4$1 = { class: "code-name-wrapper" };
+  const _hoisted_5$1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
+  const _hoisted_6$1 = { class: "m-editor-wrapper" };
+  const _hoisted_7$1 = {
+    key: 1,
+    class: "m-editor-content-bottom"
+  };
+  const _hoisted_8$1 = /* @__PURE__ */ vue.createTextVNode("\u4FDD\u5B58");
+  const _hoisted_9$1 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
+  const _hoisted_10 = {
+    key: 2,
+    class: "m-editor-content-bottom"
+  };
+  const _hoisted_11 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+    __name: "CodeBlockEditor",
+    setup(__props) {
+      const services = vue.inject("services");
+      const codeEditor = vue.ref();
+      const left = vue.ref(200);
+      const currentTitle = vue.ref("");
+      const codeConfig = vue.ref(null);
+      const state = vue.reactive({
+        codeList: []
+      });
+      const isShowCodeBlockEditor = vue.computed(
+        () => codeConfig.value && services?.codeBlockService.getCodeEditorShowStatus() || false
+      );
+      const mode = vue.computed(() => services?.codeBlockService.getMode());
+      const id = vue.computed(() => services?.codeBlockService.getId() || "");
+      const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
+      const selectedIds = vue.computed(() => services?.codeBlockService.getCombineIds() || []);
+      vue.watchEffect(async () => {
+        codeConfig.value = await services?.codeBlockService.getCodeContentById(id.value) || null;
+      });
+      vue.watchEffect(async () => {
+        const codeDsl = await services?.codeBlockService.getCodeDslByIds(selectedIds.value) || null;
+        if (!codeDsl)
+          return;
+        state.codeList = [];
+        lodashEs.forIn(codeDsl, (value, key) => {
+          state.codeList.push({
+            id: key,
+            name: value.name
+          });
+        });
+        currentTitle.value = state.codeList[0]?.name || "";
+      });
+      const saveCode = async () => {
+        if (!codeEditor.value || !codeConfig.value || !editable.value)
+          return true;
+        try {
+          const codeContent = codeEditor.value.getEditor()?.getValue();
+          codeConfig.value.content = eval(codeContent);
+        } catch (e) {
+          elementPlus.ElMessage.error(e.stack);
+          return false;
+        }
+        await services?.codeBlockService.setCodeDslById(id.value, {
+          name: codeConfig.value.name,
+          content: codeConfig.value.content
+        });
+        elementPlus.ElMessage.success("\u4EE3\u7801\u4FDD\u5B58\u6210\u529F");
+        return true;
+      };
+      const saveAndClose = async () => {
+        const saveRes = await saveCode();
+        if (saveRes) {
+          await services?.codeBlockService.setCodeEditorShowStatus(false);
+        }
+      };
+      const selectHandler = (data) => {
+        services?.codeBlockService.setId(data.id);
+        currentTitle.value = data.name;
+      };
+      return (_ctx, _cache) => {
+        const _component_el_tree = vue.resolveComponent("el-tree");
+        const _component_el_input = vue.resolveComponent("el-input");
+        const _component_el_button = vue.resolveComponent("el-button");
+        const _component_el_card = vue.resolveComponent("el-card");
+        const _component_el_dialog = vue.resolveComponent("el-dialog");
+        return vue.openBlock(), vue.createBlock(_component_el_dialog, {
+          modelValue: vue.unref(isShowCodeBlockEditor),
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(isShowCodeBlockEditor) ? isShowCodeBlockEditor.value = $event : null),
+          class: "code-editor-dialog",
+          title: currentTitle.value,
+          fullscreen: true,
+          "before-close": saveAndClose,
+          "append-to-body": true
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_sfc_main$l, {
+              left: left.value,
+              "onUpdate:left": _cache[1] || (_cache[1] = ($event) => left.value = $event),
+              "min-left": 45,
+              class: "code-editor-layout"
+            }, vue.createSlots({
+              center: vue.withCtx(() => [
+                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 0,
+                  class: vue.normalizeClass([
+                    vue.unref(mode) === vue.unref(CodeEditorMode).LIST ? "m-editor-code-block-editor-panel-list-mode" : "m-editor-code-block-editor-panel"
+                  ])
+                }, [
+                  vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: vue.unref(id) }),
+                  vue.createVNode(_component_el_card, { shadow: "never" }, {
+                    header: vue.withCtx(() => [
+                      vue.createElementVNode("div", _hoisted_4$1, [
+                        _hoisted_5$1,
+                        codeConfig.value ? (vue.openBlock(), vue.createBlock(_component_el_input, {
+                          key: 0,
+                          class: "code-name-input",
+                          modelValue: codeConfig.value.name,
+                          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => codeConfig.value.name = $event),
+                          disabled: !vue.unref(editable)
+                        }, null, 8, ["modelValue", "disabled"])) : vue.createCommentVNode("", true)
+                      ])
+                    ]),
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", _hoisted_6$1, [
+                        codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+                          key: 0,
+                          ref_key: "codeEditor",
+                          ref: codeEditor,
+                          class: "m-editor-container",
+                          "init-values": `${codeConfig.value.content}`,
+                          onSave: saveCode,
+                          options: {
+                            tabSize: 2,
+                            fontSize: 16,
+                            formatOnPaste: true,
+                            readOnly: !vue.unref(editable)
+                          }
+                        }, null, 8, ["init-values", "options"])) : vue.createCommentVNode("", true),
+                        vue.unref(editable) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
+                          vue.createVNode(_component_el_button, {
+                            type: "primary",
+                            class: "button",
+                            onClick: saveCode
+                          }, {
+                            default: vue.withCtx(() => [
+                              _hoisted_8$1
+                            ]),
+                            _: 1
+                          }),
+                          vue.createVNode(_component_el_button, {
+                            type: "primary",
+                            class: "button",
+                            onClick: saveAndClose
+                          }, {
+                            default: vue.withCtx(() => [
+                              _hoisted_9$1
+                            ]),
+                            _: 1
+                          })
+                        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+                          vue.createVNode(_component_el_button, {
+                            type: "primary",
+                            class: "button",
+                            onClick: saveAndClose
+                          }, {
+                            default: vue.withCtx(() => [
+                              _hoisted_11
+                            ]),
+                            _: 1
+                          })
+                        ]))
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ], 2)) : vue.createCommentVNode("", true)
+              ]),
+              _: 2
+            }, [
+              vue.unref(mode) === vue.unref(CodeEditorMode).LIST ? {
+                name: "left",
+                fn: vue.withCtx(() => [
+                  !vue.unref(lodashEs.isEmpty)(state.codeList) ? (vue.openBlock(), vue.createBlock(_component_el_tree, {
+                    key: 0,
+                    ref: "tree",
+                    "node-key": "id",
+                    "empty-text": "\u6682\u65E0\u4EE3\u7801\u5757",
+                    data: state.codeList,
+                    "highlight-current": true,
+                    onNodeClick: selectHandler,
+                    "current-node-key": state.codeList[0].id,
+                    class: "side-tree"
+                  }, {
+                    default: vue.withCtx(({ data }) => [
+                      vue.createElementVNode("div", {
+                        id: data.id,
+                        class: "list-container"
+                      }, [
+                        vue.createElementVNode("div", _hoisted_2$3, [
+                          vue.createElementVNode("div", _hoisted_3$1, vue.toDisplayString(data.name) + "\uFF08" + vue.toDisplayString(data.id) + "\uFF09", 1)
+                        ])
+                      ], 8, _hoisted_1$6)
+                    ]),
+                    _: 1
+                  }, 8, ["data", "current-node-key"])) : vue.createCommentVNode("", true)
+                ])
+              } : void 0
+            ]), 1032, ["left"])
+          ]),
+          _: 3
+        }, 8, ["modelValue", "title"]);
+      };
+    }
+  });
+
+  const _hoisted_1$5 = { class: "m-editor-code-block-list" };
+  const _hoisted_2$2 = { class: "code-header-wrapper" };
+  const _hoisted_3 = /* @__PURE__ */ vue.createTextVNode("\u65B0\u589E");
+  const _hoisted_4 = ["id"];
+  const _hoisted_5 = { class: "list-item" };
+  const _hoisted_6 = { class: "code-name" };
+  const _hoisted_7 = { class: "right-tool" };
+  const _hoisted_8 = {
+    key: 0,
+    class: "code-comp-map-wrapper"
+  };
+  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 _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+    __name: "CodeBlockList",
+    props: {
+      customError: null
+    },
+    setup(__props) {
+      const props = __props;
+      const services = vue.inject("services");
+      const state = vue.reactive({
+        codeList: [],
+        bindComps: {}
+      });
+      const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
+      const getBindCompsByCodeId = (codeId, codeBlockContent) => {
+        if (lodashEs.isEmpty(codeBlockContent) || lodashEs.isEmpty(codeBlockContent.comps)) {
+          state.bindComps[codeId] = [];
+          return;
+        }
+        const compsField = codeBlockContent.comps;
+        const bindCompIds = Object.keys(compsField);
+        const bindCompsFiltered = bindCompIds.filter((compId) => !lodashEs.isEmpty(compsField[compId]));
+        const compsInfo = bindCompsFiltered.map((compId) => ({
+          id: compId,
+          name: getCompName(compId)
+        }));
+        state.bindComps[codeId] = compsInfo;
+      };
+      const initList = async () => {
+        const codeDsl = await services?.codeBlockService.getCodeDsl() || null;
+        if (!codeDsl)
+          return;
+        state.codeList = [];
+        lodashEs.forIn(codeDsl, (value, codeId) => {
+          getBindCompsByCodeId(codeId, value);
+          state.codeList.push({
+            id: codeId,
+            name: value.name,
+            codeBlockContent: value,
+            showRelation: true
+          });
+        });
+      };
+      vue.watch(
+        () => services?.codeBlockService.getCodeDsl(),
+        () => {
+          initList();
+        },
+        {
+          immediate: true,
+          deep: true
+        }
+      );
+      vue.watch(
+        () => services?.editorService.get("node"),
+        (curNode) => {
+          if (!curNode?.id)
+            return;
+          lodashEs.forIn(state.bindComps, (bindCompInfo) => {
+            bindCompInfo.forEach((comp) => {
+              if (comp.id === curNode.id) {
+                comp.name = curNode.name;
+              }
+            });
+          });
+        }
+      );
+      const createCodeBlock = async () => {
+        const { codeBlockService } = services || {};
+        if (!codeBlockService) {
+          elementPlus.ElMessage.error("\u65B0\u589E\u4EE3\u7801\u5757\u5931\u8D25");
+          return;
+        }
+        const codeConfig = {
+          name: "\u4EE3\u7801\u5757",
+          content: `() => {
+  // place your code here
+}`
+        };
+        await codeBlockService.setMode(CodeEditorMode.EDITOR);
+        const id = await codeBlockService.getUniqueId();
+        await codeBlockService.setCodeDslById(id, codeConfig);
+        codeBlockService.setCodeEditorContent(true, id);
       };
-      vue.watchEffect(init);
-      services?.propsService.on("props-configs-change", init);
-      vue.onMounted(() => {
-        emit("mounted", internalInstance);
-      });
-      vue.watchEffect(() => {
-        if (configForm.value && stage.value) {
-          configForm.value.formState.stage = stage.value;
+      const editCode = async (key) => {
+        await services?.codeBlockService.setMode(CodeEditorMode.EDITOR);
+        services?.codeBlockService.setCodeEditorContent(true, key);
+      };
+      const deleteCode = (key) => {
+        const existBinds = !!(state.bindComps[key]?.length > 0);
+        const undeleteableList = services?.codeBlockService.getUndeletableList() || [];
+        if (!existBinds && !undeleteableList.includes(key)) {
+          services?.codeBlockService.deleteCodeDslByIds([key]);
+        } else {
+          if (typeof props.customError === "function") {
+            props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
+          } else {
+            elementPlus.ElMessage.error("\u4EE3\u7801\u5757\u5220\u9664\u5931\u8D25");
+          }
         }
-      });
-      const submit = async () => {
-        try {
-          const values2 = await configForm.value?.submitForm();
-          services?.editorService.update(values2);
-        } catch (e) {
-          console.error(e);
-          elementPlus.ElMessage.closeAll();
-          elementPlus.ElMessage.error({
-            duration: 1e4,
-            showClose: true,
-            message: e.message,
-            dangerouslyUseHTMLString: true
-          });
+      };
+      const filterText = vue.ref("");
+      const tree = vue.ref();
+      const filterNode = (value, data) => {
+        if (!value) {
+          return true;
         }
+        return `${data.name}${data.id}`.indexOf(value) !== -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);
+        stage?.select(compId);
       };
-      expose({ submit });
       return (_ctx, _cache) => {
-        const _component_m_form = vue.resolveComponent("m-form");
+        const _component_el_input = vue.resolveComponent("el-input");
+        const _component_el_button = vue.resolveComponent("el-button");
+        const _component_el_tooltip = vue.resolveComponent("el-tooltip");
+        const _component_el_tree = vue.resolveComponent("el-tree");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
-          vue.renderSlot(_ctx.$slots, "props-panel-header"),
-          vue.createVNode(_component_m_form, {
-            ref_key: "configForm",
-            ref: configForm,
-            class: vue.normalizeClass(`m-editor-props-panel ${vue.unref(propsPanelSize)}`),
-            "popper-class": `m-editor-props-panel-popper ${vue.unref(propsPanelSize)}`,
-            size: vue.unref(propsPanelSize),
-            "init-values": values.value,
-            config: curFormConfig.value,
-            onChange: submit
-          }, null, 8, ["class", "popper-class", "size", "init-values", "config"])
+          vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
+            vue.createElementVNode("div", _hoisted_2$2, [
+              vue.createVNode(_component_el_input, {
+                class: vue.normalizeClass([vue.unref(editable) ? "code-filter-input" : "code-filter-input-no-btn"]),
+                size: "small",
+                placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
+                clearable: "",
+                modelValue: filterText.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
+                onInput: filterTextChangeHandler
+              }, null, 8, ["class", "modelValue"]),
+              vue.unref(editable) ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                key: 0,
+                class: "create-code-button",
+                type: "primary",
+                size: "small",
+                onClick: createCodeBlock
+              }, {
+                default: vue.withCtx(() => [
+                  _hoisted_3
+                ]),
+                _: 1
+              })) : vue.createCommentVNode("", true)
+            ])
+          ]),
+          !vue.unref(lodashEs.isEmpty)(state.codeList) ? (vue.openBlock(), vue.createBlock(_component_el_tree, {
+            key: 0,
+            ref_key: "tree",
+            ref: tree,
+            "node-key": "id",
+            "empty-text": "\u6682\u65E0\u4EE3\u7801\u5757",
+            data: state.codeList,
+            "highlight-current": true,
+            "filter-node-method": filterNode,
+            onNodeClick: toggleCombineRelation
+          }, {
+            default: vue.withCtx(({ data }) => [
+              vue.createElementVNode("div", {
+                id: data.id,
+                class: "list-container"
+              }, [
+                vue.createElementVNode("div", _hoisted_5, [
+                  vue.createElementVNode("div", _hoisted_6, vue.toDisplayString(data.name) + "\uFF08" + vue.toDisplayString(data.id) + "\uFF09", 1),
+                  vue.createElementVNode("div", _hoisted_7, [
+                    vue.createVNode(_component_el_tooltip, {
+                      effect: "dark",
+                      content: vue.unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
+                      placement: "bottom"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(_sfc_main$j, {
+                          icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+                          class: "edit-icon",
+                          onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
+                        }, null, 8, ["icon", "onClick"])
+                      ]),
+                      _: 2
+                    }, 1032, ["content"]),
+                    state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+                      key: 0,
+                      effect: "dark",
+                      content: "\u67E5\u770B\u7ED1\u5B9A\u5173\u7CFB",
+                      placement: "bottom"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(_sfc_main$j, {
+                          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(_component_el_tooltip, {
+                      key: 1,
+                      effect: "dark",
+                      content: "\u5220\u9664",
+                      placement: "bottom"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(_sfc_main$j, {
+                          icon: vue.unref(iconsVue.Close),
+                          class: "edit-icon",
+                          onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
+                        }, null, 8, ["icon", "onClick"])
+                      ]),
+                      _: 2
+                    }, 1024)) : vue.createCommentVNode("", true),
+                    vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                      id: data.id,
+                      data: data.codeBlockContent
+                    })
+                  ])
+                ]),
+                data.showRelation && state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+                  _hoisted_9,
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(state.bindComps[data.id], (comp, index) => {
+                    return vue.openBlock(), vue.createBlock(_component_el_button, {
+                      key: index,
+                      class: "code-comp",
+                      size: "small",
+                      plain: true,
+                      onClick: vue.withModifiers(($event) => selectComp(comp.id), ["stop"])
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(vue.toDisplayString(comp.name), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"]);
+                  }), 128))
+                ])) : vue.createCommentVNode("", true)
+              ], 8, _hoisted_4)
+            ]),
+            _: 3
+          }, 8, ["data"])) : vue.createCommentVNode("", true),
+          vue.createVNode(_sfc_main$f, null, {
+            "code-block-edit-panel-header": vue.withCtx(({ id }) => [
+              vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
+            ]),
+            _: 3
+          })
         ]);
       };
     }
@@ -2862,7 +3729,7 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$h, {
+                              vue.createVNode(_sfc_main$j, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
                               vue.createVNode(_component_el_tooltip, {
@@ -2982,7 +3849,7 @@
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menuData, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$g, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$i, {
                 "event-type": "mouseup",
                 data: item,
                 key: index,
@@ -3006,9 +3873,9 @@
     }
   });
 
-  const _sfc_main$b = vue.defineComponent({
-    components: { ContentMenu: _sfc_main$c },
-    setup() {
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+    __name: "LayerMenu",
+    setup(__props, { expose }) {
       const services = vue.inject("services");
       const menu = vue.ref();
       const node = vue.computed(() => services?.editorService.get("node"));
@@ -3059,53 +3926,51 @@
         }
         return [];
       });
-      return {
-        menu,
-        menuData: vue.computed(() => [
-          {
-            type: "button",
-            text: "\u65B0\u589E",
-            icon: vue.markRaw(iconsVue.Plus),
-            display: () => node.value?.items,
-            items: getSubMenuData.value
-          },
-          {
-            type: "button",
-            text: "\u590D\u5236",
-            icon: vue.markRaw(iconsVue.DocumentCopy),
-            display: () => !isRoot.value,
-            handler: () => {
-              node.value && services?.editorService.copy(node.value);
-            }
-          },
-          {
-            type: "button",
-            text: "\u5220\u9664",
-            icon: vue.markRaw(iconsVue.Delete),
-            display: () => !isRoot.value && !isPage.value,
-            handler: () => {
-              node.value && services?.editorService.remove(node.value);
-            }
-          },
-          ...layerContentMenu
-        ]),
-        show(e) {
-          menu.value?.show(e);
-        }
+      const menuData = vue.computed(() => [
+        {
+          type: "button",
+          text: "\u65B0\u589E",
+          icon: vue.markRaw(iconsVue.Plus),
+          display: () => node.value?.items,
+          items: getSubMenuData.value
+        },
+        {
+          type: "button",
+          text: "\u590D\u5236",
+          icon: vue.markRaw(iconsVue.DocumentCopy),
+          display: () => !isRoot.value,
+          handler: () => {
+            node.value && services?.editorService.copy(node.value);
+          }
+        },
+        {
+          type: "button",
+          text: "\u5220\u9664",
+          icon: vue.markRaw(iconsVue.Delete),
+          display: () => !isRoot.value && !isPage.value,
+          handler: () => {
+            node.value && services?.editorService.remove(node.value);
+          }
+        },
+        ...layerContentMenu
+      ]);
+      const show = (e) => {
+        menu.value?.show(e);
+      };
+      expose({
+        show
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
+          "menu-data": vue.unref(menuData),
+          ref_key: "menu",
+          ref: menu,
+          style: { "overflow": "initial" }
+        }, null, 8, ["menu-data"]);
       };
     }
   });
 
-  function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_content_menu = vue.resolveComponent("content-menu");
-    return vue.openBlock(), vue.createBlock(_component_content_menu, {
-      "menu-data": _ctx.menuData,
-      ref: "menu",
-      style: { "overflow": "initial" }
-    }, null, 8, ["menu-data"]);
-  }
-  const LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$4]]);
-
   const throttleTime = 150;
   const select = async (data, editorService) => {
     if (!data.id) {
@@ -3233,7 +4098,7 @@
   });
   const _sfc_main$a = vue.defineComponent({
     name: "magic-editor-layer-panel",
-    components: { LayerMenu },
+    components: { LayerMenu: _sfc_main$b },
     setup() {
       const services = vue.inject("services");
       const tree = vue.ref();
@@ -3281,8 +4146,16 @@
     }
   });
 
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+
   const _hoisted_1$3 = ["id", "onMouseenter"];
-  function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_el_tree = vue.resolveComponent("el-tree");
     const _component_layer_menu = vue.resolveComponent("layer-menu");
@@ -3346,190 +4219,232 @@
       _: 3
     });
   }
-  const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$3]]);
-
-  const _sfc_main$9 = vue.defineComponent({
-    components: { MIcon: _sfc_main$h },
-    props: {
-      data: {
-        type: [Object, String]
-      }
-    },
-    setup(props) {
-      return {
-        config: vue.computed(() => {
-          if (typeof props.data !== "string") {
-            return props.data;
-          }
-          switch (props.data) {
-            case "component-list":
-              return {
-                type: "component",
-                icon: iconsVue.Coin,
-                text: "\u7EC4\u4EF6",
-                component: _sfc_main$d,
-                slots: {}
-              };
-            case "layer":
-              return {
-                type: "component",
-                icon: iconsVue.Files,
-                text: "\u5DF2\u9009\u7EC4\u4EF6",
-                component: LayerPanel,
-                slots: {}
-              };
-            default:
-              return void 0;
-          }
-        })
-      };
-    }
-  });
+  const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$1]]);
 
   const _hoisted_1$2 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_m_icon = vue.resolveComponent("m-icon");
-    const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
-    return _ctx.config ? (vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
-      key: 0,
-      name: _ctx.config.text
-    }, {
-      label: vue.withCtx(() => [
-        (vue.openBlock(), vue.createElementBlock("div", {
-          key: _ctx.config.text
-        }, [
-          _ctx.config.icon ? (vue.openBlock(), vue.createBlock(_component_m_icon, {
-            key: 0,
-            icon: _ctx.config.icon
-          }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-          _ctx.config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, vue.toDisplayString(_ctx.config.text), 1)) : vue.createCommentVNode("", true)
-        ]))
-      ]),
-      default: vue.withCtx(() => [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.component), vue.mergeProps(_ctx.config.props || {}, vue.toHandlers(_ctx.config?.listeners || {})), vue.createSlots({ _: 2 }, [
-          _ctx.data === "component-list" || _ctx.config.slots?.componentListPanelHeader ? {
-            name: "component-list-panel-header",
-            fn: vue.withCtx(() => [
-              _ctx.data === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : _ctx.config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-            ])
-          } : void 0,
-          _ctx.data === "component-list" || _ctx.config.slots?.componentListItem ? {
-            name: "component-list-item",
-            fn: vue.withCtx(({ component }) => [
-              _ctx.data === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-item", {
-                key: 0,
-                component
-              }) : _ctx.config.slots?.componentListItem ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.componentListItem), {
-                key: 1,
-                component
-              }, null, 8, ["component"])) : vue.createCommentVNode("", true)
-            ])
-          } : void 0,
-          _ctx.data === "layer" || _ctx.config.slots?.layerPanelHeader ? {
-            name: "layer-panel-header",
-            fn: vue.withCtx(() => [
-              _ctx.data === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : _ctx.config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-            ])
-          } : void 0,
-          _ctx.data === "layer" || _ctx.config.slots?.layerNodeContent ? {
-            name: "layer-node-content",
-            fn: vue.withCtx(({ data: nodeData, node }) => [
-              _ctx.data === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+    __name: "TabPane",
+    props: {
+      data: null
+    },
+    setup(__props) {
+      const props = __props;
+      const config = vue.computed(() => {
+        if (typeof props.data !== "string") {
+          return props.data;
+        }
+        switch (props.data) {
+          case "component-list":
+            return {
+              type: "component",
+              icon: iconsVue.Coin,
+              text: "\u7EC4\u4EF6",
+              component: _sfc_main$d,
+              slots: {}
+            };
+          case "layer":
+            return {
+              type: "component",
+              icon: iconsVue.Files,
+              text: "\u5DF2\u9009\u7EC4\u4EF6",
+              component: LayerPanel,
+              slots: {}
+            };
+          case "code-block":
+            return {
+              type: "component",
+              icon: iconsVue.EditPen,
+              text: "\u4EE3\u7801\u7F16\u8F91",
+              component: _sfc_main$e,
+              slots: {}
+            };
+          default:
+            return void 0;
+        }
+      });
+      return (_ctx, _cache) => {
+        const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
+        return vue.unref(config) ? (vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
+          key: 0,
+          name: vue.unref(config).text
+        }, {
+          label: vue.withCtx(() => [
+            (vue.openBlock(), vue.createElementBlock("div", {
+              key: vue.unref(config).text
+            }, [
+              vue.unref(config).icon ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
                 key: 0,
-                data: nodeData,
-                node
-              }) : _ctx.config.slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.layerNodeContent), {
-                key: 1,
-                data: nodeData,
-                node
-              }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
-            ])
-          } : void 0
-        ]), 1040))
-      ]),
-      _: 3
-    }, 8, ["name"])) : vue.createCommentVNode("", true);
-  }
-  const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$2]]);
+                icon: vue.unref(config).icon
+              }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+              vue.unref(config).text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, vue.toDisplayString(vue.unref(config).text), 1)) : vue.createCommentVNode("", true)
+            ]))
+          ]),
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).component), vue.mergeProps(vue.unref(config).props || {}, vue.toHandlers(vue.unref(config)?.listeners || {})), vue.createSlots({ _: 2 }, [
+              __props.data === "component-list" || vue.unref(config).slots?.componentListPanelHeader ? {
+                name: "component-list-panel-header",
+                fn: vue.withCtx(() => [
+                  __props.data === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : vue.unref(config).slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                ])
+              } : void 0,
+              __props.data === "component-list" || vue.unref(config).slots?.componentListItem ? {
+                name: "component-list-item",
+                fn: vue.withCtx(({ component }) => [
+                  __props.data === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-item", {
+                    key: 0,
+                    component
+                  }) : vue.unref(config).slots?.componentListItem ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.componentListItem), {
+                    key: 1,
+                    component
+                  }, null, 8, ["component"])) : vue.createCommentVNode("", true)
+                ])
+              } : void 0,
+              __props.data === "layer" || vue.unref(config).slots?.layerPanelHeader ? {
+                name: "layer-panel-header",
+                fn: vue.withCtx(() => [
+                  __props.data === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : vue.unref(config).slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                ])
+              } : void 0,
+              __props.data === "code-block" || vue.unref(config).slots?.codeBlockPanelHeader ? {
+                name: "code-block-panel-header",
+                fn: vue.withCtx(() => [
+                  __props.data === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : vue.unref(config).slots?.codeBlockPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.codeBlockPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                ])
+              } : void 0,
+              __props.data === "code-block" || vue.unref(config).slots?.codeBlockPanelTool ? {
+                name: "code-block-panel-tool",
+                fn: vue.withCtx(({ id, data }) => [
+                  data === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                    key: 0,
+                    id,
+                    data
+                  }) : vue.unref(config).slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
+                ])
+              } : void 0,
+              __props.data === "code-block" || vue.unref(config).slots?.codeBlockEditPanelHeader ? {
+                name: "code-block-edit-panel-header",
+                fn: vue.withCtx(({ id }) => [
+                  __props.data === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
+                    key: 0,
+                    id
+                  }) : vue.unref(config).slots?.codeBlockEditPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.codeBlockEditPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                ])
+              } : void 0,
+              __props.data === "layer" || vue.unref(config).slots?.layerNodeContent ? {
+                name: "layer-node-content",
+                fn: vue.withCtx(({ data: nodeData, node }) => [
+                  __props.data === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                    key: 0,
+                    data: nodeData,
+                    node
+                  }) : vue.unref(config).slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(config).slots.layerNodeContent), {
+                    key: 1,
+                    data: nodeData,
+                    node
+                  }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
+                ])
+              } : void 0
+            ]), 1040))
+          ]),
+          _: 3
+        }, 8, ["name"])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
 
-  const _sfc_main$8 = vue.defineComponent({
-    components: { TabPane },
-    name: "m-sidebar",
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+    __name: "Sidebar",
     props: {
-      data: {
-        type: Object,
-        default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer"] })
-      }
+      data: { default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer", "code-block"] }) }
     },
-    setup(props) {
+    setup(__props, { expose }) {
+      const props = __props;
       const activeTabName = vue.ref(props.data?.status);
       vue.watch(
-        () => props.data?.status,
+        () => props.data.status,
         (status) => {
           activeTabName.value = status || "0";
         }
       );
-      return {
+      expose({
         activeTabName
+      });
+      return (_ctx, _cache) => {
+        const _component_el_tabs = vue.resolveComponent("el-tabs");
+        return __props.data.type === "tabs" && __props.data.items.length ? (vue.openBlock(), vue.createBlock(_component_el_tabs, {
+          key: 0,
+          class: "m-editor-sidebar",
+          modelValue: activeTabName.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
+          type: "card",
+          "tab-position": "left"
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.data.items, (item, index) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$9, {
+                key: index,
+                data: item
+              }, vue.createSlots({ _: 2 }, [
+                item === "layer" ? {
+                  name: "layer-panel-header",
+                  fn: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "layer-panel-header")
+                  ])
+                } : void 0,
+                item === "layer" ? {
+                  name: "layer-node-content",
+                  fn: vue.withCtx(({ node, data }) => [
+                    vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                      data,
+                      node
+                    })
+                  ])
+                } : void 0,
+                item === "component-list" ? {
+                  name: "component-list-panel-header",
+                  fn: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "component-list-panel-header")
+                  ])
+                } : void 0,
+                item === "component-list" ? {
+                  name: "component-list-item",
+                  fn: vue.withCtx(({ component }) => [
+                    vue.renderSlot(_ctx.$slots, "component-list-item", { component })
+                  ])
+                } : void 0,
+                item === "code-block" ? {
+                  name: "code-block-panel-header",
+                  fn: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "code-block-panel-header")
+                  ])
+                } : void 0,
+                item === "code-block" ? {
+                  name: "code-block-panel-tool",
+                  fn: vue.withCtx(({ id, data }) => [
+                    vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                      id,
+                      data
+                    })
+                  ])
+                } : void 0,
+                item === "code-block" ? {
+                  name: "code-block-edit-panel-header",
+                  fn: vue.withCtx(({ id }) => [
+                    vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
+                  ])
+                } : void 0
+              ]), 1032, ["data"]);
+            }), 128))
+          ]),
+          _: 3
+        }, 8, ["modelValue"])) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_tab_pane = vue.resolveComponent("tab-pane");
-    const _component_el_tabs = vue.resolveComponent("el-tabs");
-    return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(_component_el_tabs, {
-      key: 0,
-      class: "m-editor-sidebar",
-      modelValue: _ctx.activeTabName,
-      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.activeTabName = $event),
-      type: "card",
-      "tab-position": "left"
-    }, {
-      default: vue.withCtx(() => [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (item, index) => {
-          return vue.openBlock(), vue.createBlock(_component_tab_pane, {
-            key: index,
-            data: item
-          }, vue.createSlots({ _: 2 }, [
-            item === "layer" ? {
-              name: "layer-panel-header",
-              fn: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "layer-panel-header")
-              ])
-            } : void 0,
-            item === "layer" ? {
-              name: "layer-node-content",
-              fn: vue.withCtx(({ node, data }) => [
-                vue.renderSlot(_ctx.$slots, "layer-node-content", {
-                  data,
-                  node
-                })
-              ])
-            } : void 0,
-            item === "component-list" ? {
-              name: "component-list-panel-header",
-              fn: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "component-list-panel-header")
-              ])
-            } : void 0,
-            item === "component-list" ? {
-              name: "component-list-item",
-              fn: vue.withCtx(({ component }) => [
-                vue.renderSlot(_ctx.$slots, "component-list-item", { component })
-              ])
-            } : void 0
-          ]), 1032, ["data"]);
-        }), 128))
-      ]),
-      _: 3
-    }, 8, ["modelValue"])) : vue.createCommentVNode("", true);
-  }
-  const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$1]]);
-
   const _hoisted_1$1 = {
     key: 1,
     style: { "width": "21px" }
@@ -3616,14 +4531,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$h, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$j, { 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$h, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$j, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           vue.unref(pageLength) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -3639,7 +4554,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$h, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$j, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -3711,7 +4626,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$g, {
+                        vue.createVNode(_sfc_main$i, {
                           data: {
                             type: "button",
                             text: "\u590D\u5236",
@@ -3719,7 +4634,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$g, {
+                        vue.createVNode(_sfc_main$i, {
                           data: {
                             type: "button",
                             text: "\u5220\u9664",
@@ -4493,11 +5408,11 @@
   const _sfc_main = vue.defineComponent({
     name: "m-editor",
     components: {
-      NavMenu: _sfc_main$f,
-      Sidebar,
+      NavMenu: _sfc_main$h,
+      Sidebar: _sfc_main$8,
       Workspace: _sfc_main$1,
-      PropsPanel: _sfc_main$e,
-      Framework: _sfc_main$i
+      PropsPanel: _sfc_main$g,
+      Framework: _sfc_main$k
     },
     props: {
       modelValue: {
@@ -4592,7 +5507,9 @@
       });
       vue.watch(
         () => props.modelValue,
-        (modelValue) => editorService.set("root", modelValue),
+        (modelValue) => {
+          editorService.set("root", modelValue);
+        },
         {
           immediate: true
         }
@@ -4655,6 +5572,7 @@
         uiService.destroy();
         componentListService.destroy();
         storageService.destroy();
+        codeBlockService.destroy();
       });
       const services = {
         componentListService,
@@ -4663,7 +5581,8 @@
         propsService,
         editorService,
         uiService,
-        storageService
+        storageService,
+        codeBlockService
       };
       vue.provide("services", services);
       vue.provide("layerContentMenu", props.layerContentMenu);
@@ -4717,6 +5636,18 @@
             "component-list-item": vue.withCtx(({ component }) => [
               vue.renderSlot(_ctx.$slots, "component-list-item", { component })
             ]),
+            "code-block-panel-header": vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "code-block-panel-header")
+            ]),
+            "code-block-panel-tool": vue.withCtx(({ id, data }) => [
+              vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                id,
+                data
+              })
+            ]),
+            "code-block-edit-panel-header": vue.withCtx(({ id }) => [
+              vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
+            ]),
             _: 3
           }, 8, ["data"])
         ])
@@ -4769,30 +5700,37 @@
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
       app.component(Editor.name, Editor);
-      app.component("m-fields-ui-select", _sfc_main$n);
-      app.component("m-fields-code-link", _sfc_main$o);
-      app.component("m-fields-vs-code", _sfc_main$p);
-      app.component(CodeEditor.name, CodeEditor);
+      app.component("m-fields-ui-select", _sfc_main$p);
+      app.component("m-fields-code-link", _sfc_main$r);
+      app.component("m-fields-vs-code", _sfc_main$s);
+      app.component("magic-code-editor", _sfc_main$o);
+      app.component("m-fields-code-select", _sfc_main$q);
     }
   };
 
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
+  exports.CodeBlockList = _sfc_main$e;
+  exports.CodeDeleteErrorType = CodeDeleteErrorType;
+  exports.CodeEditorMode = CodeEditorMode;
+  exports.CodeSelect = _sfc_main$q;
+  exports.CodeSelectOp = CodeSelectOp;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$d;
   exports.ContentMenu = _sfc_main$c;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$h;
+  exports.Icon = _sfc_main$j;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = LayerPanel;
   exports.Layout = Layout;
-  exports.PropsPanel = _sfc_main$e;
-  exports.TMagicCodeEditor = CodeEditor;
+  exports.PropsPanel = _sfc_main$g;
+  exports.TMagicCodeEditor = _sfc_main$o;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$g;
+  exports.ToolButton = _sfc_main$i;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.change2Fixed = change2Fixed;
+  exports.codeBlockService = codeBlockService;
   exports.debug = debug;
   exports.default = index;
   exports.editorService = editorService;