@tmagic/editor 1.1.6 → 1.2.0-beta.2

package/dist/tmagic-editor.mjs

@@ -1,7 +1,8 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, ref, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, watchEffect, createSlots, resolveDynamicComponent, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, Teleport, nextTick, toHandlers, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, ref, watchEffect, createElementBlock, createVNode, withCtx, createElementVNode, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, toRaw, renderSlot, Fragment, normalizeClass, createSlots, resolveDynamicComponent, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, isRef, Teleport, nextTick, toHandlers, provide } from 'vue';
 import serialize from 'serialize-javascript';
-import { Delete, Close, Plus, Edit, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
-import { throttle, cloneDeep, mergeWith, isEmpty, uniq } from 'lodash-es';
+import { ElMessage } from 'element-plus';
+import { cloneDeep, map, xor, throttle, pick, isEmpty, forIn, omit, keys, mergeWith, uniq } from 'lodash-es';
+import { Delete, Close, Plus, Edit, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Files, DocumentCopy, EditPen, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
 import * as monaco from 'monaco-editor';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType } from '@tmagic/stage';
 import { NodeType } from '@tmagic/schema';
@@ -9,10 +10,9 @@ import { isPop, getNodePath, isNumber, isPage, toLine, removeClassNameByClassNam
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import Gesto from 'gesto';
-import { ElMessage } from 'element-plus';
 import KeyController from 'keycon';
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "Code",
   props: {
     model: null,
@@ -24,7 +24,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const language = computed(() => props.config.language || "javascript");
-    const height = computed(() => `${document.body.clientHeight - 168}px`);
+    const height = computed(() => props.config.height || `${document.body.clientHeight - 168}px`);
     const save = (v) => {
       props.model[props.name] = v;
       emit("change", v);
@@ -35,13 +35,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(`height: ${unref(height)}`),
         "init-values": __props.model[__props.name],
         language: 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__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "CodeLink",
   props: {
     config: null,
@@ -52,17 +53,24 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit }) {
     const props = __props;
-    const formConfig = computed(() => ({
-      ...props.config,
-      text: "",
-      type: "link",
-      form: [
-        {
-          name: props.name,
-          type: "vs-code"
-        }
-      ]
-    }));
+    const formConfig = computed(() => {
+      const { codeOptions, ...config } = props.config;
+      return {
+        ...config,
+        text: "",
+        type: "link",
+        form: [
+          {
+            name: props.name,
+            type: "vs-code",
+            options: {
+              tabSize: 2,
+              ...codeOptions || {}
+            }
+          }
+        ]
+      };
+    });
     const modelValue = reactive({
       form: {
         [props.name]: ""
@@ -104,8 +112,186 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$b = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
-const _sfc_main$n = /* @__PURE__ */ 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__ */ 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__ */ defineComponent({
+  __name: "CodeSelect",
+  props: {
+    config: null,
+    model: null,
+    prop: null,
+    name: null,
+    size: null
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const services = inject("services");
+    const selectConfig = computed(() => {
+      const defaultConfig = {
+        multiple: true,
+        options: async () => {
+          const codeDsl = await services?.codeBlockService.getCodeDsl();
+          if (codeDsl) {
+            return 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 = ref("");
+    const multiple = ref(true);
+    const combineIds = ref([]);
+    let lastTagSnapshot = cloneDeep(props.model[props.name]) || [];
+    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 = 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) {
+        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 = resolveComponent("m-fields-select");
+      const _component_el_tooltip = resolveComponent("el-tooltip");
+      const _component_el_card = resolveComponent("el-card");
+      return openBlock(), createElementBlock("div", {
+        class: "m-fields-code-select",
+        key: fieldKey.value
+      }, [
+        createVNode(_component_el_card, { shadow: "never" }, {
+          header: withCtx(() => [
+            createVNode(_component_m_fields_select, {
+              config: unref(selectConfig),
+              model: __props.model,
+              prop: __props.prop,
+              name: __props.name,
+              size: __props.size,
+              onChange: changeHandler
+            }, null, 8, ["config", "model", "prop", "name", "size"])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_1$d, [
+              createVNode(_component_el_tooltip, {
+                class: "tool-item",
+                effect: "dark",
+                content: "\u67E5\u770B\u4EE3\u7801\u5757",
+                placement: "top"
+              }, {
+                default: withCtx(() => [
+                  (openBlock(), 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__ */ createTextVNode("\u53D6\u6D88");
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "UISelect",
   props: {
     config: null,
@@ -170,7 +356,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$b
+            _hoisted_1$c
           ]),
           _: 1
         }, 8, ["icon"])
@@ -218,45 +404,36 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
 
 const UISelect_vue_vue_type_style_index_0_lang = '';
 
-const toString = (v, language) => {
-  let value = "";
-  if (typeof v !== "string") {
-    value = serialize(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 = defineComponent({
-  name: "magic-code-editor",
+const _sfc_main$o = /* @__PURE__ */ 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(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 = ref("");
@@ -305,7 +482,7 @@ const _sfc_main$m = defineComponent({
           emit("save", getEditorValue());
         }
       });
-      if (props.type !== "diff") {
+      if (props.type !== "diff" && props.autoSave) {
         vsEditor?.onDidBlurEditorWidget(() => {
           emit("save", getEditorValue());
         });
@@ -331,10 +508,7 @@ const _sfc_main$m = defineComponent({
     onUnmounted(() => {
       resizeObserver.disconnect();
     });
-    return {
-      values,
-      loading,
-      codeEditor,
+    expose({
       getEditor() {
         return vsEditor || vsDiffEditor;
       },
@@ -343,78 +517,48 @@ const _sfc_main$m = defineComponent({
         vsEditor?.focus();
         vsDiffEditor?.focus();
       }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), 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 openBlock(), 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, 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 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))
@@ -507,26 +651,289 @@ class BaseService extends EventEmitter {
       });
     });
   }
-  use(options) {
-    Object.entries(options).forEach(([methodName2, method]) => {
-      if (typeof method === "function")
-        this.middleware[methodName2].push(method);
-    });
+  use(options) {
+    Object.entries(options).forEach(([methodName2, method]) => {
+      if (typeof method === "function")
+        this.middleware[methodName2].push(method);
+    });
+  }
+  usePlugin(options) {
+    Object.entries(options).forEach(([methodName2, method]) => {
+      if (typeof method === "function")
+        this.pluginOptionsList[methodName2].push(method);
+    });
+  }
+  async doTask() {
+    this.doingTask = true;
+    let task = this.taskList.shift();
+    while (task) {
+      await task();
+      task = this.taskList.shift();
+    }
+    this.doingTask = false;
+  }
+}
+
+class CodeBlock extends BaseService {
+  state = 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 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 = 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 (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) {
+      forIn(codeDsl, (codeBlockContent, codeId) => {
+        if (codeId === diffCodeIds[0]) {
+          codeBlockContent.comps = {
+            ...codeBlockContent?.comps || {},
+            [compId]: [hook]
+          };
+        } else if (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 = 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 = keys(dsl);
+    if (!existedIds.includes(newId))
+      return newId;
+    return await this.getUniqueId();
+  }
+  async deleteCompsInRelation(node) {
+    const codeDsl = 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;
+    forIn(codeDsl, (codeBlockContent) => {
+      const compsContent = codeBlockContent.comps || {};
+      codeBlockContent.comps = omit(compsContent, node.id);
+    });
+    if (!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, cloneDeep(element));
+    this.listCursor += 1;
+    if (this.elementList.length > this.listMaxSize) {
+      this.elementList.shift();
+      this.listCursor -= 1;
+    }
+  }
+  canUndo() {
+    return this.listCursor > 1;
   }
-  usePlugin(options) {
-    Object.entries(options).forEach(([methodName2, method]) => {
-      if (typeof method === "function")
-        this.pluginOptionsList[methodName2].push(method);
-    });
+  undo() {
+    if (!this.canUndo()) {
+      return null;
+    }
+    this.listCursor -= 1;
+    return this.getCurrentElement();
   }
-  async doTask() {
-    this.doingTask = true;
-    let task = this.taskList.shift();
-    while (task) {
-      await task();
-      task = this.taskList.shift();
+  canRedo() {
+    return this.elementList.length > this.listCursor;
+  }
+  redo() {
+    if (!this.canRedo()) {
+      return null;
     }
-    this.doingTask = false;
+    this.listCursor += 1;
+    return this.getCurrentElement();
+  }
+  getCurrentElement() {
+    if (this.listCursor < 1) {
+      return null;
+    }
+    return cloneDeep(this.elementList[this.listCursor - 1]);
   }
 }
 
@@ -695,31 +1102,6 @@ class WebStorage extends BaseService {
 }
 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)) {
@@ -1080,7 +1462,9 @@ class Editor$1 extends BaseService {
         "move",
         "undo",
         "redo",
-        "highlight"
+        "highlight",
+        "getCodeDsl",
+        "setCodeDsl"
       ],
       ["select", "update", "moveLayer"]
     );
@@ -1305,6 +1689,7 @@ class Editor$1 extends BaseService {
       stage?.select(parent.id);
     }
     this.addModifiedNodeId(parent.id);
+    codeBlockService.deleteCompsInRelation(node);
   }
   async remove(nodeOrNodeList) {
     const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
@@ -1530,6 +1915,17 @@ class Editor$1 extends BaseService {
   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);
@@ -1834,13 +2230,19 @@ const fillConfig = (config = []) => [
       },
       {
         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"
           }
         ]
       }
@@ -1848,32 +2250,6 @@ const fillConfig = (config = []) => [
   }
 ];
 
-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 = reactive({
   uiSelectMode: false,
   showSrc: false,
@@ -2014,52 +2390,47 @@ const useStage = (stageOptions) => {
   return stage;
 };
 
-const _sfc_main$l = defineComponent({
-  components: { 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__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "AddPageBox",
+  setup(__props) {
     const services = inject("services");
-    return {
-      clickHandler() {
-        const { editorService } = services || {};
-        if (!editorService)
-          return;
-        editorService.add({
-          type: NodeType.PAGE,
-          name: generatePageNameByApp(toRaw(editorService.get("root")))
-        });
-      }
+    const clickHandler = () => {
+      const { editorService } = services || {};
+      if (!editorService)
+        return;
+      editorService.add({
+        type: NodeType.PAGE,
+        name: generatePageNameByApp(toRaw(editorService.get("root")))
+      });
+    };
+    return (_ctx, _cache) => {
+      const _component_el_icon = resolveComponent("el-icon");
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        createElementVNode("div", _hoisted_2$5, [
+          createElementVNode("div", {
+            class: "m-editor-empty-button",
+            onClick: clickHandler
+          }, [
+            createElementVNode("div", null, [
+              createVNode(_component_el_icon, null, {
+                default: withCtx(() => [
+                  createVNode(unref(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__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_plus = resolveComponent("plus");
-  const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$9, [
-    createElementVNode("div", _hoisted_2$3, [
-      createElementVNode("div", {
-        class: "m-editor-empty-button",
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
-      }, [
-        createElementVNode("div", null, [
-          createVNode(_component_el_icon, null, {
-            default: withCtx(() => [
-              createVNode(_component_plus)
-            ]),
-            _: 1
-          })
-        ]),
-        _hoisted_3
-      ])
-    ])
-  ]);
-}
-const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$5]]);
-
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "Resizer",
   emits: ["change"],
   setup(__props, { emit }) {
@@ -2092,7 +2463,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "Layout",
   props: {
     left: null,
@@ -2155,7 +2526,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "el",
-        ref: el
+        ref: el,
+        class: "m-editor-layout"
       }, [
         typeof props.left !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createElementVNode("div", {
@@ -2164,7 +2536,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$k, { onChange: changeLeft })
+          createVNode(_sfc_main$m, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
@@ -2173,7 +2545,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         typeof props.right !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$k, { onChange: changeRight }),
+          createVNode(_sfc_main$m, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
             style: normalizeStyle(`width: ${__props.right}px`)
@@ -2186,8 +2558,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$8 = { class: "m-editor" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = { class: "m-editor" };
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "Framework",
   props: {
     codeOptions: { default: () => ({}) }
@@ -2238,7 +2610,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_magic_code_editor = resolveComponent("magic-code-editor");
       const _component_el_scrollbar = resolveComponent("el-scrollbar");
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
         unref(showSrc) ? (openBlock(), createBlock(_component_magic_code_editor, {
           key: 0,
@@ -2246,7 +2618,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           "init-values": unref(root),
           options: __props.codeOptions,
           onSave: saveCode
-        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$j, {
+        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$l, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -2265,7 +2637,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             unref(pageLength) > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(AddPageBox)
+              createVNode(_sfc_main$n)
             ])
           ]),
           _: 2
@@ -2287,8 +2659,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = ["src"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9 = ["src"];
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     icon: null
@@ -2309,7 +2681,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$7)
+          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$9)
         ]),
         _: 1
       })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -2328,12 +2700,12 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _hoisted_2$4 = { class: "el-dropdown-link menubar-menu-button" };
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "ToolButton",
   props: {
     data: { default: () => ({
@@ -2416,7 +2788,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         __props.data.type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
           key: 0,
           direction: __props.data.direction || "vertical"
-        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$6, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$8, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           __props.data.tooltip ? (openBlock(), createBlock(_component_el_tooltip, {
             key: 0,
             effect: "dark",
@@ -2430,7 +2802,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 disabled: unref(disabled)
               }, {
                 default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$h, {
+                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$j, {
                     key: 0,
                     icon: __props.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2447,7 +2819,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             disabled: unref(disabled)
           }, {
             default: withCtx(() => [
-              __props.data.icon ? (openBlock(), createBlock(_sfc_main$h, {
+              __props.data.icon ? (openBlock(), createBlock(_sfc_main$j, {
                 key: 0,
                 icon: __props.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2480,7 +2852,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$2, [
+            createElementVNode("span", _hoisted_2$4, [
               createTextVNode(toDisplayString(__props.data.text), 1),
               createVNode(_component_el_icon, { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -2497,7 +2869,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "NavMenu",
   props: {
     data: { default: () => ({}) },
@@ -2653,7 +3025,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${unref(columnWidth)?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttons)[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$g, {
+              return openBlock(), createBlock(_sfc_main$i, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -2665,8 +3037,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = { class: "`m-editor-props-panel" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "m-editor-props-panel" };
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "PropsPanel",
   emits: ["mounted"],
   setup(__props, { expose, emit }) {
@@ -2683,50 +3055,545 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         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;
+    };
+    watchEffect(init);
+    services?.propsService.on("props-configs-change", init);
+    onMounted(() => {
+      emit("mounted", internalInstance);
+    });
+    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);
+        ElMessage.closeAll();
+        ElMessage.error({
+          duration: 1e4,
+          showClose: true,
+          message: e.message,
+          dangerouslyUseHTMLString: true
+        });
+      }
+    };
+    expose({ submit });
+    return (_ctx, _cache) => {
+      const _component_m_form = resolveComponent("m-form");
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+        renderSlot(_ctx.$slots, "props-panel-header"),
+        createVNode(_component_m_form, {
+          ref_key: "configForm",
+          ref: configForm,
+          class: normalizeClass(`m-editor-props-panel ${unref(propsPanelSize)}`),
+          "popper-class": `m-editor-props-panel-popper ${unref(propsPanelSize)}`,
+          size: 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__ */ 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__ */ createTextVNode("\u4FDD\u5B58");
+const _hoisted_9$1 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const _hoisted_10 = {
+  key: 2,
+  class: "m-editor-content-bottom"
+};
+const _hoisted_11 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "CodeBlockEditor",
+  setup(__props) {
+    const services = inject("services");
+    const codeEditor = ref();
+    const left = ref(200);
+    const currentTitle = ref("");
+    const codeConfig = ref(null);
+    const state = reactive({
+      codeList: []
+    });
+    const isShowCodeBlockEditor = computed(
+      () => codeConfig.value && services?.codeBlockService.getCodeEditorShowStatus() || false
+    );
+    const mode = computed(() => services?.codeBlockService.getMode());
+    const id = computed(() => services?.codeBlockService.getId() || "");
+    const editable = computed(() => services?.codeBlockService.getEditStatus());
+    const selectedIds = computed(() => services?.codeBlockService.getCombineIds() || []);
+    watchEffect(async () => {
+      codeConfig.value = await services?.codeBlockService.getCodeContentById(id.value) || null;
+    });
+    watchEffect(async () => {
+      const codeDsl = await services?.codeBlockService.getCodeDslByIds(selectedIds.value) || null;
+      if (!codeDsl)
+        return;
+      state.codeList = [];
+      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) {
+        ElMessage.error(e.stack);
+        return false;
+      }
+      await services?.codeBlockService.setCodeDslById(id.value, {
+        name: codeConfig.value.name,
+        content: codeConfig.value.content
+      });
+      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 = resolveComponent("el-tree");
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_card = resolveComponent("el-card");
+      const _component_el_dialog = resolveComponent("el-dialog");
+      return openBlock(), createBlock(_component_el_dialog, {
+        modelValue: unref(isShowCodeBlockEditor),
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(isShowCodeBlockEditor) ? isShowCodeBlockEditor.value = $event : null),
+        class: "code-editor-dialog",
+        title: currentTitle.value,
+        fullscreen: true,
+        "before-close": saveAndClose,
+        "append-to-body": true
+      }, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$l, {
+            left: left.value,
+            "onUpdate:left": _cache[1] || (_cache[1] = ($event) => left.value = $event),
+            "min-left": 45,
+            class: "code-editor-layout"
+          }, createSlots({
+            center: withCtx(() => [
+              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass([
+                  unref(mode) === unref(CodeEditorMode).LIST ? "m-editor-code-block-editor-panel-list-mode" : "m-editor-code-block-editor-panel"
+                ])
+              }, [
+                renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: unref(id) }),
+                createVNode(_component_el_card, { shadow: "never" }, {
+                  header: withCtx(() => [
+                    createElementVNode("div", _hoisted_4$1, [
+                      _hoisted_5$1,
+                      codeConfig.value ? (openBlock(), 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: !unref(editable)
+                      }, null, 8, ["modelValue", "disabled"])) : createCommentVNode("", true)
+                    ])
+                  ]),
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_6$1, [
+                      codeConfig.value ? (openBlock(), 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: !unref(editable)
+                        }
+                      }, null, 8, ["init-values", "options"])) : createCommentVNode("", true),
+                      unref(editable) ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
+                        createVNode(_component_el_button, {
+                          type: "primary",
+                          class: "button",
+                          onClick: saveCode
+                        }, {
+                          default: withCtx(() => [
+                            _hoisted_8$1
+                          ]),
+                          _: 1
+                        }),
+                        createVNode(_component_el_button, {
+                          type: "primary",
+                          class: "button",
+                          onClick: saveAndClose
+                        }, {
+                          default: withCtx(() => [
+                            _hoisted_9$1
+                          ]),
+                          _: 1
+                        })
+                      ])) : (openBlock(), createElementBlock("div", _hoisted_10, [
+                        createVNode(_component_el_button, {
+                          type: "primary",
+                          class: "button",
+                          onClick: saveAndClose
+                        }, {
+                          default: withCtx(() => [
+                            _hoisted_11
+                          ]),
+                          _: 1
+                        })
+                      ]))
+                    ])
+                  ]),
+                  _: 1
+                })
+              ], 2)) : createCommentVNode("", true)
+            ]),
+            _: 2
+          }, [
+            unref(mode) === unref(CodeEditorMode).LIST ? {
+              name: "left",
+              fn: withCtx(() => [
+                !unref(isEmpty)(state.codeList) ? (openBlock(), 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: withCtx(({ data }) => [
+                    createElementVNode("div", {
+                      id: data.id,
+                      class: "list-container"
+                    }, [
+                      createElementVNode("div", _hoisted_2$3, [
+                        createElementVNode("div", _hoisted_3$1, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1)
+                      ])
+                    ], 8, _hoisted_1$6)
+                  ]),
+                  _: 1
+                }, 8, ["data", "current-node-key"])) : 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__ */ 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__ */ createElementVNode("svg", {
+  class: "arrow-left",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg",
+  "data-v-029747aa": ""
+}, [
+  /* @__PURE__ */ createElementVNode("path", {
+    fill: "currentColor",
+    d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
+  })
+], -1);
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "CodeBlockList",
+  props: {
+    customError: null
+  },
+  setup(__props) {
+    const props = __props;
+    const services = inject("services");
+    const state = reactive({
+      codeList: [],
+      bindComps: {}
+    });
+    const editable = computed(() => services?.codeBlockService.getEditStatus());
+    const getBindCompsByCodeId = (codeId, codeBlockContent) => {
+      if (isEmpty(codeBlockContent) || isEmpty(codeBlockContent.comps)) {
+        state.bindComps[codeId] = [];
+        return;
+      }
+      const compsField = codeBlockContent.comps;
+      const bindCompIds = Object.keys(compsField);
+      const bindCompsFiltered = bindCompIds.filter((compId) => !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 = [];
+      forIn(codeDsl, (value, codeId) => {
+        getBindCompsByCodeId(codeId, value);
+        state.codeList.push({
+          id: codeId,
+          name: value.name,
+          codeBlockContent: value,
+          showRelation: true
+        });
+      });
+    };
+    watch(
+      () => services?.codeBlockService.getCodeDsl(),
+      () => {
+        initList();
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    watch(
+      () => services?.editorService.get("node"),
+      (curNode) => {
+        if (!curNode?.id)
+          return;
+        forIn(state.bindComps, (bindCompInfo) => {
+          bindCompInfo.forEach((comp) => {
+            if (comp.id === curNode.id) {
+              comp.name = curNode.name;
+            }
+          });
+        });
+      }
+    );
+    const createCodeBlock = async () => {
+      const { codeBlockService } = services || {};
+      if (!codeBlockService) {
+        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);
     };
-    watchEffect(init);
-    services?.propsService.on("props-configs-change", init);
-    onMounted(() => {
-      emit("mounted", internalInstance);
-    });
-    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 {
+          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);
-        ElMessage.closeAll();
-        ElMessage.error({
-          duration: 1e4,
-          showClose: true,
-          message: e.message,
-          dangerouslyUseHTMLString: true
-        });
+    };
+    const filterText = ref("");
+    const tree = 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 = resolveComponent("m-form");
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_tooltip = resolveComponent("el-tooltip");
+      const _component_el_tree = resolveComponent("el-tree");
       return openBlock(), createElementBlock("div", _hoisted_1$5, [
-        renderSlot(_ctx.$slots, "props-panel-header"),
-        createVNode(_component_m_form, {
-          ref_key: "configForm",
-          ref: configForm,
-          class: normalizeClass(`m-editor-props-panel ${unref(propsPanelSize)}`),
-          "popper-class": `m-editor-props-panel-popper ${unref(propsPanelSize)}`,
-          size: unref(propsPanelSize),
-          "init-values": values.value,
-          config: curFormConfig.value,
-          onChange: submit
-        }, null, 8, ["class", "popper-class", "size", "init-values", "config"])
+        renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
+          createElementVNode("div", _hoisted_2$2, [
+            createVNode(_component_el_input, {
+              class: normalizeClass([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"]),
+            unref(editable) ? (openBlock(), createBlock(_component_el_button, {
+              key: 0,
+              class: "create-code-button",
+              type: "primary",
+              size: "small",
+              onClick: createCodeBlock
+            }, {
+              default: withCtx(() => [
+                _hoisted_3
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])
+        ]),
+        !unref(isEmpty)(state.codeList) ? (openBlock(), 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: withCtx(({ data }) => [
+            createElementVNode("div", {
+              id: data.id,
+              class: "list-container"
+            }, [
+              createElementVNode("div", _hoisted_5, [
+                createElementVNode("div", _hoisted_6, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1),
+                createElementVNode("div", _hoisted_7, [
+                  createVNode(_component_el_tooltip, {
+                    effect: "dark",
+                    content: unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
+                    placement: "bottom"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_sfc_main$j, {
+                        icon: unref(editable) ? unref(Edit) : unref(View),
+                        class: "edit-icon",
+                        onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
+                      }, null, 8, ["icon", "onClick"])
+                    ]),
+                    _: 2
+                  }, 1032, ["content"]),
+                  state.bindComps[data.id] && state.bindComps[data.id].length > 0 ? (openBlock(), createBlock(_component_el_tooltip, {
+                    key: 0,
+                    effect: "dark",
+                    content: "\u67E5\u770B\u7ED1\u5B9A\u5173\u7CFB",
+                    placement: "bottom"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_sfc_main$j, {
+                        icon: unref(Link),
+                        class: "edit-icon",
+                        onClick: withModifiers(($event) => toggleCombineRelation(data), ["stop"])
+                      }, null, 8, ["icon", "onClick"])
+                    ]),
+                    _: 2
+                  }, 1024)) : createCommentVNode("", true),
+                  unref(editable) ? (openBlock(), createBlock(_component_el_tooltip, {
+                    key: 1,
+                    effect: "dark",
+                    content: "\u5220\u9664",
+                    placement: "bottom"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_sfc_main$j, {
+                        icon: unref(Close),
+                        class: "edit-icon",
+                        onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
+                      }, null, 8, ["icon", "onClick"])
+                    ]),
+                    _: 2
+                  }, 1024)) : createCommentVNode("", true),
+                  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 ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                _hoisted_9,
+                (openBlock(true), createElementBlock(Fragment, null, renderList(state.bindComps[data.id], (comp, index) => {
+                  return openBlock(), createBlock(_component_el_button, {
+                    key: index,
+                    class: "code-comp",
+                    size: "small",
+                    plain: true,
+                    onClick: withModifiers(($event) => selectComp(comp.id), ["stop"])
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(comp.name), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["onClick"]);
+                }), 128))
+              ])) : createCommentVNode("", true)
+            ], 8, _hoisted_4)
+          ]),
+          _: 3
+        }, 8, ["data"])) : createCommentVNode("", true),
+        createVNode(_sfc_main$f, null, {
+          "code-block-edit-panel-header": withCtx(({ id }) => [
+            renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
+          ]),
+          _: 3
+        })
       ]);
     };
   }
@@ -2844,7 +3711,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$h, {
+                            createVNode(_sfc_main$j, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
                             createVNode(_component_el_tooltip, {
@@ -2964,7 +3831,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$g, {
+            return openBlock(), createBlock(_sfc_main$i, {
               "event-type": "mouseup",
               data: item,
               key: index,
@@ -2988,9 +3855,9 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$b = defineComponent({
-  components: { ContentMenu: _sfc_main$c },
-  setup() {
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "LayerMenu",
+  setup(__props, { expose }) {
     const services = inject("services");
     const menu = ref();
     const node = computed(() => services?.editorService.get("node"));
@@ -3041,53 +3908,51 @@ const _sfc_main$b = defineComponent({
       }
       return [];
     });
-    return {
-      menu,
-      menuData: computed(() => [
-        {
-          type: "button",
-          text: "\u65B0\u589E",
-          icon: markRaw(Plus),
-          display: () => node.value?.items,
-          items: getSubMenuData.value
-        },
-        {
-          type: "button",
-          text: "\u590D\u5236",
-          icon: markRaw(DocumentCopy),
-          display: () => !isRoot.value,
-          handler: () => {
-            node.value && services?.editorService.copy(node.value);
-          }
-        },
-        {
-          type: "button",
-          text: "\u5220\u9664",
-          icon: markRaw(Delete),
-          display: () => !isRoot.value && !isPage.value,
-          handler: () => {
-            node.value && services?.editorService.remove(node.value);
-          }
-        },
-        ...layerContentMenu
-      ]),
-      show(e) {
-        menu.value?.show(e);
-      }
+    const menuData = computed(() => [
+      {
+        type: "button",
+        text: "\u65B0\u589E",
+        icon: markRaw(Plus),
+        display: () => node.value?.items,
+        items: getSubMenuData.value
+      },
+      {
+        type: "button",
+        text: "\u590D\u5236",
+        icon: markRaw(DocumentCopy),
+        display: () => !isRoot.value,
+        handler: () => {
+          node.value && services?.editorService.copy(node.value);
+        }
+      },
+      {
+        type: "button",
+        text: "\u5220\u9664",
+        icon: markRaw(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 openBlock(), createBlock(_sfc_main$c, {
+        "menu-data": 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 = resolveComponent("content-menu");
-  return openBlock(), 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) {
@@ -3215,7 +4080,7 @@ const useFilter = (tree) => ({
 });
 const _sfc_main$a = defineComponent({
   name: "magic-editor-layer-panel",
-  components: { LayerMenu },
+  components: { LayerMenu: _sfc_main$b },
   setup() {
     const services = inject("services");
     const tree = ref();
@@ -3263,8 +4128,16 @@ const _sfc_main$a = defineComponent({
   }
 });
 
+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 = resolveComponent("el-input");
   const _component_el_tree = resolveComponent("el-tree");
   const _component_layer_menu = resolveComponent("layer-menu");
@@ -3328,190 +4201,232 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   });
 }
-const LayerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$3]]);
-
-const _sfc_main$9 = defineComponent({
-  components: { MIcon: _sfc_main$h },
-  props: {
-    data: {
-      type: [Object, String]
-    }
-  },
-  setup(props) {
-    return {
-      config: computed(() => {
-        if (typeof props.data !== "string") {
-          return props.data;
-        }
-        switch (props.data) {
-          case "component-list":
-            return {
-              type: "component",
-              icon: Coin,
-              text: "\u7EC4\u4EF6",
-              component: _sfc_main$d,
-              slots: {}
-            };
-          case "layer":
-            return {
-              type: "component",
-              icon: 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 = resolveComponent("m-icon");
-  const _component_el_tab_pane = resolveComponent("el-tab-pane");
-  return _ctx.config ? (openBlock(), createBlock(_component_el_tab_pane, {
-    key: 0,
-    name: _ctx.config.text
-  }, {
-    label: withCtx(() => [
-      (openBlock(), createElementBlock("div", {
-        key: _ctx.config.text
-      }, [
-        _ctx.config.icon ? (openBlock(), createBlock(_component_m_icon, {
-          key: 0,
-          icon: _ctx.config.icon
-        }, null, 8, ["icon"])) : createCommentVNode("", true),
-        _ctx.config.text ? (openBlock(), createElementBlock("div", _hoisted_1$2, toDisplayString(_ctx.config.text), 1)) : createCommentVNode("", true)
-      ]))
-    ]),
-    default: withCtx(() => [
-      (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.component), mergeProps(_ctx.config.props || {}, toHandlers(_ctx.config?.listeners || {})), createSlots({ _: 2 }, [
-        _ctx.data === "component-list" || _ctx.config.slots?.componentListPanelHeader ? {
-          name: "component-list-panel-header",
-          fn: withCtx(() => [
-            _ctx.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : _ctx.config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
-          ])
-        } : void 0,
-        _ctx.data === "component-list" || _ctx.config.slots?.componentListItem ? {
-          name: "component-list-item",
-          fn: withCtx(({ component }) => [
-            _ctx.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
-              key: 0,
-              component
-            }) : _ctx.config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.componentListItem), {
-              key: 1,
-              component
-            }, null, 8, ["component"])) : createCommentVNode("", true)
-          ])
-        } : void 0,
-        _ctx.data === "layer" || _ctx.config.slots?.layerPanelHeader ? {
-          name: "layer-panel-header",
-          fn: withCtx(() => [
-            _ctx.data === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : _ctx.config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
-          ])
-        } : void 0,
-        _ctx.data === "layer" || _ctx.config.slots?.layerNodeContent ? {
-          name: "layer-node-content",
-          fn: withCtx(({ data: nodeData, node }) => [
-            _ctx.data === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "TabPane",
+  props: {
+    data: null
+  },
+  setup(__props) {
+    const props = __props;
+    const config = computed(() => {
+      if (typeof props.data !== "string") {
+        return props.data;
+      }
+      switch (props.data) {
+        case "component-list":
+          return {
+            type: "component",
+            icon: Coin,
+            text: "\u7EC4\u4EF6",
+            component: _sfc_main$d,
+            slots: {}
+          };
+        case "layer":
+          return {
+            type: "component",
+            icon: Files,
+            text: "\u5DF2\u9009\u7EC4\u4EF6",
+            component: LayerPanel,
+            slots: {}
+          };
+        case "code-block":
+          return {
+            type: "component",
+            icon: EditPen,
+            text: "\u4EE3\u7801\u7F16\u8F91",
+            component: _sfc_main$e,
+            slots: {}
+          };
+        default:
+          return void 0;
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_el_tab_pane = resolveComponent("el-tab-pane");
+      return unref(config) ? (openBlock(), createBlock(_component_el_tab_pane, {
+        key: 0,
+        name: unref(config).text
+      }, {
+        label: withCtx(() => [
+          (openBlock(), createElementBlock("div", {
+            key: unref(config).text
+          }, [
+            unref(config).icon ? (openBlock(), createBlock(_sfc_main$j, {
               key: 0,
-              data: nodeData,
-              node
-            }) : _ctx.config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.layerNodeContent), {
-              key: 1,
-              data: nodeData,
-              node
-            }, null, 8, ["data", "node"])) : createCommentVNode("", true)
-          ])
-        } : void 0
-      ]), 1040))
-    ]),
-    _: 3
-  }, 8, ["name"])) : createCommentVNode("", true);
-}
-const TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$2]]);
+              icon: unref(config).icon
+            }, null, 8, ["icon"])) : createCommentVNode("", true),
+            unref(config).text ? (openBlock(), createElementBlock("div", _hoisted_1$2, toDisplayString(unref(config).text), 1)) : createCommentVNode("", true)
+          ]))
+        ]),
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(unref(config).component), mergeProps(unref(config).props || {}, toHandlers(unref(config)?.listeners || {})), createSlots({ _: 2 }, [
+            __props.data === "component-list" || unref(config).slots?.componentListPanelHeader ? {
+              name: "component-list-panel-header",
+              fn: withCtx(() => [
+                __props.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : unref(config).slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
+              ])
+            } : void 0,
+            __props.data === "component-list" || unref(config).slots?.componentListItem ? {
+              name: "component-list-item",
+              fn: withCtx(({ component }) => [
+                __props.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
+                  key: 0,
+                  component
+                }) : unref(config).slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.componentListItem), {
+                  key: 1,
+                  component
+                }, null, 8, ["component"])) : createCommentVNode("", true)
+              ])
+            } : void 0,
+            __props.data === "layer" || unref(config).slots?.layerPanelHeader ? {
+              name: "layer-panel-header",
+              fn: withCtx(() => [
+                __props.data === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : unref(config).slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
+              ])
+            } : void 0,
+            __props.data === "code-block" || unref(config).slots?.codeBlockPanelHeader ? {
+              name: "code-block-panel-header",
+              fn: withCtx(() => [
+                __props.data === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : unref(config).slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
+              ])
+            } : void 0,
+            __props.data === "code-block" || unref(config).slots?.codeBlockPanelTool ? {
+              name: "code-block-panel-tool",
+              fn: withCtx(({ id, data }) => [
+                data === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                  key: 0,
+                  id,
+                  data
+                }) : unref(config).slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
+              ])
+            } : void 0,
+            __props.data === "code-block" || unref(config).slots?.codeBlockEditPanelHeader ? {
+              name: "code-block-edit-panel-header",
+              fn: withCtx(({ id }) => [
+                __props.data === "code-block" ? renderSlot(_ctx.$slots, "code-block-edit-panel-header", {
+                  key: 0,
+                  id
+                }) : unref(config).slots?.codeBlockEditPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.codeBlockEditPanelHeader), { key: 1 })) : createCommentVNode("", true)
+              ])
+            } : void 0,
+            __props.data === "layer" || unref(config).slots?.layerNodeContent ? {
+              name: "layer-node-content",
+              fn: withCtx(({ data: nodeData, node }) => [
+                __props.data === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
+                  key: 0,
+                  data: nodeData,
+                  node
+                }) : unref(config).slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).slots.layerNodeContent), {
+                  key: 1,
+                  data: nodeData,
+                  node
+                }, null, 8, ["data", "node"])) : createCommentVNode("", true)
+              ])
+            } : void 0
+          ]), 1040))
+        ]),
+        _: 3
+      }, 8, ["name"])) : createCommentVNode("", true);
+    };
+  }
+});
 
-const _sfc_main$8 = defineComponent({
-  components: { TabPane },
-  name: "m-sidebar",
+const _sfc_main$8 = /* @__PURE__ */ 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 = ref(props.data?.status);
     watch(
-      () => props.data?.status,
+      () => props.data.status,
       (status) => {
         activeTabName.value = status || "0";
       }
     );
-    return {
+    expose({
       activeTabName
+    });
+    return (_ctx, _cache) => {
+      const _component_el_tabs = resolveComponent("el-tabs");
+      return __props.data.type === "tabs" && __props.data.items.length ? (openBlock(), 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: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (item, index) => {
+            return openBlock(), createBlock(_sfc_main$9, {
+              key: index,
+              data: item
+            }, createSlots({ _: 2 }, [
+              item === "layer" ? {
+                name: "layer-panel-header",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "layer-panel-header")
+                ])
+              } : void 0,
+              item === "layer" ? {
+                name: "layer-node-content",
+                fn: withCtx(({ node, data }) => [
+                  renderSlot(_ctx.$slots, "layer-node-content", {
+                    data,
+                    node
+                  })
+                ])
+              } : void 0,
+              item === "component-list" ? {
+                name: "component-list-panel-header",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "component-list-panel-header")
+                ])
+              } : void 0,
+              item === "component-list" ? {
+                name: "component-list-item",
+                fn: withCtx(({ component }) => [
+                  renderSlot(_ctx.$slots, "component-list-item", { component })
+                ])
+              } : void 0,
+              item === "code-block" ? {
+                name: "code-block-panel-header",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "code-block-panel-header")
+                ])
+              } : void 0,
+              item === "code-block" ? {
+                name: "code-block-panel-tool",
+                fn: withCtx(({ id, data }) => [
+                  renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                    id,
+                    data
+                  })
+                ])
+              } : void 0,
+              item === "code-block" ? {
+                name: "code-block-edit-panel-header",
+                fn: withCtx(({ id }) => [
+                  renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
+                ])
+              } : void 0
+            ]), 1032, ["data"]);
+          }), 128))
+        ]),
+        _: 3
+      }, 8, ["modelValue"])) : createCommentVNode("", true);
     };
   }
 });
 
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_tab_pane = resolveComponent("tab-pane");
-  const _component_el_tabs = resolveComponent("el-tabs");
-  return _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), 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: withCtx(() => [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (item, index) => {
-        return openBlock(), createBlock(_component_tab_pane, {
-          key: index,
-          data: item
-        }, createSlots({ _: 2 }, [
-          item === "layer" ? {
-            name: "layer-panel-header",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "layer-panel-header")
-            ])
-          } : void 0,
-          item === "layer" ? {
-            name: "layer-node-content",
-            fn: withCtx(({ node, data }) => [
-              renderSlot(_ctx.$slots, "layer-node-content", {
-                data,
-                node
-              })
-            ])
-          } : void 0,
-          item === "component-list" ? {
-            name: "component-list-panel-header",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "component-list-panel-header")
-            ])
-          } : void 0,
-          item === "component-list" ? {
-            name: "component-list-item",
-            fn: withCtx(({ component }) => [
-              renderSlot(_ctx.$slots, "component-list-item", { component })
-            ])
-          } : void 0
-        ]), 1032, ["data"]);
-      }), 128))
-    ]),
-    _: 3
-  }, 8, ["modelValue"])) : createCommentVNode("", true);
-}
-const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$1]]);
-
 const _hoisted_1$1 = {
   key: 1,
   style: { "width": "21px" }
@@ -3598,14 +4513,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$h, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$j, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$h, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$j, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         unref(pageLength) ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -3621,7 +4536,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$h, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$j, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -3693,7 +4608,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$g, {
+                      createVNode(_sfc_main$i, {
                         data: {
                           type: "button",
                           text: "\u590D\u5236",
@@ -3701,7 +4616,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$g, {
+                      createVNode(_sfc_main$i, {
                         data: {
                           type: "button",
                           text: "\u5220\u9664",
@@ -4475,11 +5390,11 @@ const componentListService = new ComponentList();
 const _sfc_main = 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: {
@@ -4574,7 +5489,9 @@ const _sfc_main = defineComponent({
     });
     watch(
       () => props.modelValue,
-      (modelValue) => editorService.set("root", modelValue),
+      (modelValue) => {
+        editorService.set("root", modelValue);
+      },
       {
         immediate: true
       }
@@ -4637,6 +5554,7 @@ const _sfc_main = defineComponent({
       uiService.destroy();
       componentListService.destroy();
       storageService.destroy();
+      codeBlockService.destroy();
     });
     const services = {
       componentListService,
@@ -4645,7 +5563,8 @@ const _sfc_main = defineComponent({
       propsService,
       editorService,
       uiService,
-      storageService
+      storageService,
+      codeBlockService
     };
     provide("services", services);
     provide("layerContentMenu", props.layerContentMenu);
@@ -4699,6 +5618,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "component-list-item": withCtx(({ component }) => [
             renderSlot(_ctx.$slots, "component-list-item", { component })
           ]),
+          "code-block-panel-header": withCtx(() => [
+            renderSlot(_ctx.$slots, "code-block-panel-header")
+          ]),
+          "code-block-panel-tool": withCtx(({ id, data }) => [
+            renderSlot(_ctx.$slots, "code-block-panel-tool", {
+              id,
+              data
+            })
+          ]),
+          "code-block-edit-panel-header": withCtx(({ id }) => [
+            renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
+          ]),
           _: 3
         }, 8, ["data"])
       ])
@@ -4751,12 +5682,13 @@ const index = {
     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);
   }
 };
 
-export { COPY_STORAGE_KEY, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$h as Icon, Keys, LayerOffset, LayerPanel, Layout, _sfc_main$e as PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$g as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, CodeEditorMode, _sfc_main$q as CodeSelect, CodeSelectOp, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$j as Icon, Keys, LayerOffset, LayerPanel, Layout, _sfc_main$g as PropsPanel, _sfc_main$o as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$i as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.mjs.map