@tmagic/editor 1.2.0 → 1.2.2

package/dist/tmagic-editor.js

@@ -1,10 +1,10 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, createElementBlock, createVNode, ref, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, renderSlot, Fragment, createElementVNode, normalizeClass, resolveDynamicComponent, toRaw, createSlots, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, provide, withDirectives, Teleport, vShow, nextTick, toHandlers } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, inject, createCommentVNode, ref, withModifiers, createTextVNode, toDisplayString, onMounted, onUnmounted, renderSlot, Fragment, createSlots, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, provide, withDirectives, Teleport, vShow, nextTick, toHandlers } from 'vue';
 import serialize from 'serialize-javascript';
-import { isEmpty, map, throttle, pick, omit, keys, cloneDeep, forIn, mergeWith, uniq, isObject, difference, union } from 'lodash-es';
+import { Edit, View, Delete, Close, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Link, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
+import { isEmpty, map, throttle, pick, omit, keys, cloneDeep, forIn, mergeWith, isObject, uniq, difference, union } from 'lodash-es';
 import { createValues, MForm } from '@tmagic/form';
 import { HookType, NodeType } from '@tmagic/schema';
-import { Delete, Close, Edit, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
-import { TMagicButton, TMagicTooltip, TMagicIcon, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, tMagicMessageBox, TMagicCard, TMagicInput, TMagicDialog, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
+import { TMagicIcon, TMagicButton, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, tMagicMessageBox, TMagicCard, TMagicInput, TMagicDialog, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
 import * as monaco from 'monaco-editor';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import Gesto from 'gesto';
@@ -119,12 +119,55 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = { class: "m-fields-code-select" };
+const _hoisted_1$g = ["src"];
 const __default__$r = defineComponent({
-  name: "MEditorCodeSelect"
+  name: "MEditorIcon"
 });
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...__default__$r,
+  props: {
+    icon: null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return !__props.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 0,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Edit))
+        ]),
+        _: 1
+      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 1,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$g)
+        ]),
+        _: 1
+      })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
+        key: 2,
+        class: normalizeClass(["magic-editor-icon", __props.icon])
+      }, null, 2)) : (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 3,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))
+        ]),
+        _: 1
+      }));
+    };
+  }
+});
+
+const _hoisted_1$f = { class: "m-fields-code-select" };
+const __default__$q = defineComponent({
+  name: "MEditorCodeSelect"
+});
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  ...__default__$q,
   props: {
     config: null,
     model: null,
@@ -140,9 +183,10 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const codeDsl = computed(() => services?.codeBlockService.getCodeDslSync());
     const tableConfig = computed(() => {
       const defaultConfig = {
-        dropSort: true,
+        dropSort: false,
         enableFullscreen: false,
         border: true,
+        operateColWidth: 60,
         items: [
           {
             type: "select",
@@ -169,9 +213,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             defaultValue: {},
             itemsFunction: (row) => {
               const paramsConfig = getParamsConfig(row.codeId);
-              if (!row.params)
-                row.params = {};
-              if (isEmpty(row.params)) {
+              if (isEmpty(row.params) || !row.params) {
                 createValues(mForm, paramsConfig, {}, row.params);
               }
               return paramsConfig;
@@ -184,6 +226,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         ...props.config.tableConfig
       };
     });
+    const editable = computed(() => services?.codeBlockService.getEditStatus());
     watch(
       () => props.model[props.name],
       (value) => {
@@ -208,15 +251,17 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       if (isEmpty(paramStatements))
         return [];
       return paramStatements.map((paramState) => ({
-        name: paramState.name,
-        text: paramState.name,
         labelWidth: "100px",
-        type: "text"
+        text: paramState.name,
+        ...paramState
       }));
     };
+    const editCode = (codeId) => {
+      services?.codeBlockService.setCodeEditorContent(true, codeId);
+    };
     return (_ctx, _cache) => {
       const _component_m_form_table = resolveComponent("m-form-table");
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
         createVNode(_component_m_form_table, {
           config: unref(tableConfig),
           model: __props.model[__props.name],
@@ -225,18 +270,28 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           prop: __props.prop,
           size: __props.size,
           onChange: changeHandler
-        }, null, 8, ["config", "model", "prop", "size"])
+        }, {
+          operateCol: withCtx(({ scope }) => [
+            scope.row.codeId ? (openBlock(), createBlock(_sfc_main$s, {
+              key: 0,
+              icon: unref(editable) ? unref(Edit) : unref(View),
+              class: "edit-icon",
+              onClick: ($event) => editCode(scope.row.codeId)
+            }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["config", "model", "prop", "size"])
       ]);
     };
   }
 });
 
-const _hoisted_1$f = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
-const __default__$q = defineComponent({
+const _hoisted_1$e = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const __default__$p = defineComponent({
   name: "MEditorUISelect"
 });
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  ...__default__$q,
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...__default__$p,
   props: {
     config: null,
     model: null,
@@ -298,7 +353,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$f
+            _hoisted_1$e
           ]),
           _: 1
         }, 8, ["icon"])
@@ -346,11 +401,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
 
 const UISelect_vue_vue_type_style_index_0_lang = '';
 
-const __default__$p = defineComponent({
+const __default__$o = defineComponent({
   name: "MEditorCodeEditor"
 });
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  ...__default__$p,
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...__default__$o,
   props: {
     initValues: null,
     modifiedValues: null,
@@ -479,11 +534,11 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const __default__$o = defineComponent({
+const __default__$n = defineComponent({
   name: "MEditorResizer"
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  ...__default__$o,
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...__default__$n,
   emits: ["change"],
   setup(__props, { emit }) {
     const target = ref();
@@ -515,17 +570,17 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$n = defineComponent({
+const __default__$m = defineComponent({
   name: "MEditorLayout"
 });
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  ...__default__$n,
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...__default__$m,
   props: {
     left: null,
     right: null,
     minLeft: { default: 46 },
     minRight: { default: 1 },
-    minCenter: { default: 1 },
+    minCenter: { default: 5 },
     leftClass: null,
     rightClass: null,
     centerClass: null
@@ -627,7 +682,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$p, { onChange: changeLeft })
+          createVNode(_sfc_main$o, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
@@ -636,7 +691,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         unref(hasRight) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$p, { onChange: changeRight }),
+          createVNode(_sfc_main$o, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
             style: normalizeStyle(`width: ${__props.right}px`)
@@ -649,49 +704,6 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$e = ["src"];
-const __default__$m = defineComponent({
-  name: "MEditorIcon"
-});
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  ...__default__$m,
-  props: {
-    icon: null
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return !__props.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
-        key: 0,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(Edit))
-        ]),
-        _: 1
-      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(unref(TMagicIcon), {
-        key: 1,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$e)
-        ]),
-        _: 1
-      })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
-        key: 2,
-        class: normalizeClass(["magic-editor-icon", __props.icon])
-      }, null, 2)) : (openBlock(), createBlock(unref(TMagicIcon), {
-        key: 3,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          (openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))
-        ]),
-        _: 1
-      }));
-    };
-  }
-});
-
 var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
   ColumnLayout2["LEFT"] = "left";
   ColumnLayout2["CENTER"] = "center";
@@ -716,11 +728,6 @@ var Keys = /* @__PURE__ */ ((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";
@@ -882,7 +889,6 @@ class CodeBlock extends BaseService {
     codeDsl: null,
     id: "",
     editable: true,
-    mode: CodeEditorMode.EDITOR,
     combineIds: [],
     undeletableList: [],
     relations: {}
@@ -897,7 +903,6 @@ class CodeBlock extends BaseService {
       "setCodeDslById",
       "setCodeEditorShowStatus",
       "setEditStatus",
-      "setMode",
       "setCombineIds",
       "setUndeleteableList",
       "deleteCodeDslByIds"
@@ -983,12 +988,6 @@ class CodeBlock extends BaseService {
   getId() {
     return this.state.id;
   }
-  getMode() {
-    return this.state.mode;
-  }
-  async setMode(mode) {
-    this.state.mode = mode;
-  }
   async setCombineIds(ids) {
     this.state.combineIds = ids;
   }
@@ -1048,7 +1047,6 @@ class CodeBlock extends BaseService {
     this.state.codeDsl = null;
     this.state.id = "";
     this.state.editable = true;
-    this.state.mode = CodeEditorMode.EDITOR;
     this.state.combineIds = [];
     this.state.undeletableList = [];
   }
@@ -1072,6 +1070,7 @@ class CodeBlock extends BaseService {
   }
   recurseMNode(node, relations) {
     forIn(node, (value, key) => {
+      let unConfirmedValue = { id: node.id };
       if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
         value.hookData.forEach((relationItem) => {
           if (!relationItem.codeId)
@@ -1085,6 +1084,14 @@ class CodeBlock extends BaseService {
           }
           codeItem[node.id].push(key);
         });
+        return;
+      }
+      if (typeof value === "object") {
+        unConfirmedValue = {
+          ...unConfirmedValue,
+          ...value
+        };
+        this.recurseMNode(unConfirmedValue, relations);
       }
     });
     if (!isEmpty(node.items)) {
@@ -1357,10 +1364,14 @@ const getMiddleTop = (node, parentNode, stage) => {
 };
 const getInitPositionStyle = (style = {}, layout) => {
   if (layout === Layout.ABSOLUTE) {
-    return {
+    const newStyle = {
       ...style,
       position: "absolute"
     };
+    if (typeof newStyle.left === "undefined" && typeof newStyle.right === "undefined") {
+      newStyle.left = 0;
+    }
+    return newStyle;
   }
   if (layout === Layout.RELATIVE) {
     return getRelativeStyle(style);
@@ -1588,7 +1599,7 @@ const beforePaste = async (position, config) => {
     config.map(async (configItem) => {
       const { offsetX = 0, offsetY = 0, ...positionClone } = position;
       let pastePosition = positionClone;
-      if (!isEmpty(pastePosition) && curNode.items) {
+      if (!isEmpty(pastePosition) && curNode?.items) {
         pastePosition = getPositionInContainer(pastePosition, curNode.id);
       }
       if (pastePosition.left && configItem.style?.left) {
@@ -1611,8 +1622,9 @@ const beforePaste = async (position, config) => {
           ...pastePosition
         };
       }
-      if (isPage(pasteConfig)) {
-        pasteConfig.name = generatePageNameByApp(editorService.get("root"));
+      const root = editorService.get("root");
+      if (isPage(pasteConfig) && root) {
+        pasteConfig.name = generatePageNameByApp(root);
       }
       return pasteConfig;
     })
@@ -1635,9 +1647,9 @@ const getAddParent = (node) => {
   let parentNode;
   if (isPage(node)) {
     parentNode = editorService.get("root");
-  } else if (curNode.items) {
+  } else if (curNode?.items) {
     parentNode = curNode;
-  } else {
+  } else if (curNode?.id) {
     parentNode = editorService.getParentById(curNode.id, false);
   }
   return parentNode;
@@ -1695,11 +1707,18 @@ class Editor$1 extends BaseService {
   set(name, value) {
     const preValue = this.state[name];
     this.state[name] = value;
-    if (name === "nodes") {
+    if (name === "nodes" && Array.isArray(value)) {
       this.set("node", value[0]);
     }
     if (name === "root") {
-      this.state.pageLength = value?.items?.length || 0;
+      if (Array.isArray(value)) {
+        throw new Error("root \u4E0D\u80FD\u4E3A\u6570\u7EC4");
+      }
+      if (value && isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) {
+        this.state.pageLength = value.items?.length || 0;
+      } else {
+        this.state.pageLength = 0;
+      }
       this.emit("root-change", value, preValue);
     }
   }
@@ -1711,16 +1730,21 @@ class Editor$1 extends BaseService {
     if (raw) {
       root = toRaw(root);
     }
+    const info = {
+      node: null,
+      parent: null,
+      page: null
+    };
     if (!root)
-      return {};
+      return info;
     if (id === root.id) {
-      return { node: root };
+      info.node = root;
+      return info;
     }
     const path = getNodePath(id, root.items);
     if (!path.length)
-      return {};
+      return info;
     path.unshift(root);
-    const info = {};
     info.node = path[path.length - 1];
     info.parent = path[path.length - 2];
     path.forEach((item) => {
@@ -1736,8 +1760,6 @@ class Editor$1 extends BaseService {
     return node;
   }
   getParentById(id, raw = true) {
-    if (!this.get("root"))
-      return;
     const { parent } = this.getNodeInfo(id, raw);
     return parent;
   }
@@ -1754,9 +1776,9 @@ class Editor$1 extends BaseService {
   }
   async select(config) {
     const { node, page, parent } = this.selectedConfigExceptionHandler(config);
-    this.set("nodes", [node]);
-    this.set("page", page || null);
-    this.set("parent", parent || null);
+    this.set("nodes", node ? [node] : []);
+    this.set("page", page);
+    this.set("parent", parent);
     if (page) {
       historyService.changePage(toRaw(page));
     } else {
@@ -1770,7 +1792,7 @@ class Editor$1 extends BaseService {
           page,
           parent
         },
-        getNodePath(node.id, this.get("root").items)
+        getNodePath(node.id, this.get("root")?.items)
       );
     }
     this.emit("select", node);
@@ -1792,6 +1814,10 @@ class Editor$1 extends BaseService {
   async selectNextPage() {
     const root = toRaw(this.get("root"));
     const page = toRaw(this.get("page"));
+    if (!page)
+      throw new Error("page\u4E0D\u80FD\u4E3A\u7A7A");
+    if (!root)
+      throw new Error("root\u4E0D\u80FD\u4E3A\u7A7A");
     const index = getNodeIndex(page, root);
     const nextPage = root.items[index + 1] || root.items[0];
     await this.select(nextPage);
@@ -1818,16 +1844,20 @@ class Editor$1 extends BaseService {
   }
   async doAdd(node, parent) {
     const root = this.get("root");
+    if (!root)
+      throw new Error("root\u4E3A\u7A7A");
     const curNode = this.get("node");
     const stage = this.get("stage");
-    if ((parent?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
+    if (!curNode)
+      throw new Error("\u5F53\u524D\u9009\u4E2D\u8282\u70B9\u4E3A\u7A7A");
+    if ((parent.type === NodeType.ROOT || curNode?.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
       throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
     }
     if (parent.id !== curNode.id && node.type !== NodeType.PAGE) {
       const index = parent.items.indexOf(curNode);
-      parent?.items?.splice(index + 1, 0, node);
+      parent.items?.splice(index + 1, 0, node);
     } else {
-      parent?.items?.push(node);
+      parent.items?.push(node);
     }
     const layout = await this.getLayout(toRaw(parent), node);
     node.style = getInitPositionStyle(node.style, layout);
@@ -1858,8 +1888,9 @@ class Editor$1 extends BaseService {
     }
     const newNodes = await Promise.all(
       addNodes.map((node) => {
-        if (isPage(node)) {
-          return this.doAdd(node, this.get("root"));
+        const root = this.get("root");
+        if (isPage(node) && root) {
+          return this.doAdd(node, root);
         }
         const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
         if (!parentNode)
@@ -1888,7 +1919,7 @@ class Editor$1 extends BaseService {
   async doRemove(node) {
     const root = this.get("root");
     if (!root)
-      throw new Error("\u6CA1\u6709root");
+      throw new Error("root\u4E0D\u80FD\u4E3A\u7A7A");
     const { parent, node: curNode } = this.getNodeInfo(node.id);
     if (!parent || !curNode)
       throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
@@ -1929,13 +1960,16 @@ class Editor$1 extends BaseService {
     this.emit("remove", nodes);
   }
   async doUpdate(config) {
+    const root = this.get("root");
+    if (!root)
+      throw new Error("root\u4E3A\u7A7A");
     if (!config?.id)
       throw new Error("\u6CA1\u6709\u914D\u7F6E\u6216\u8005\u914D\u7F6E\u7F3A\u5C11id\u503C");
     const info = this.getNodeInfo(config.id, false);
     if (!info.node)
       throw new Error(`\u83B7\u53D6\u4E0D\u5230id\u4E3A${config.id}\u7684\u8282\u70B9`);
     const node = cloneDeep(toRaw(info.node));
-    let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get("root"));
+    let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
       if (isObject(srcValue) && Array.isArray(objValue)) {
         return srcValue;
@@ -1963,14 +1997,14 @@ class Editor$1 extends BaseService {
       newConfig = setLayout(newConfig, newLayout);
     }
     parentNodeItems[index] = newConfig;
-    const nodes = this.get("nodes") || [];
+    const nodes = this.get("nodes");
     const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
     nodes.splice(targetIndex, 1, newConfig);
     this.set("nodes", [...nodes]);
     this.get("stage")?.update({
       config: cloneDeep(newConfig),
       parentId: parent.id,
-      root: cloneDeep(this.get("root"))
+      root: cloneDeep(root)
     });
     if (newConfig.type === NodeType.PAGE) {
       this.set("page", newConfig);
@@ -1987,8 +2021,15 @@ class Editor$1 extends BaseService {
     return Array.isArray(config) ? newNodes : newNodes[0];
   }
   async sort(id1, id2) {
+    const root = this.get("root");
+    if (!root)
+      throw new Error("root\u4E3A\u7A7A");
     const node = this.get("node");
+    if (!node)
+      throw new Error("\u5F53\u524D\u8282\u70B9\u4E3A\u7A7A");
     const parent = cloneDeep(toRaw(this.get("parent")));
+    if (!parent)
+      throw new Error("\u7236\u8282\u70B9\u4E3A\u7A7A");
     const index2 = parent.items.findIndex((node2) => `${node2.id}` === `${id2}`);
     if (index2 < 0)
       return;
@@ -1999,7 +2040,7 @@ class Editor$1 extends BaseService {
     this.get("stage")?.update({
       config: cloneDeep(node),
       parentId: parent.id,
-      root: cloneDeep(this.get("root"))
+      root: cloneDeep(root)
     });
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
@@ -2014,10 +2055,10 @@ class Editor$1 extends BaseService {
     if (!Array.isArray(config))
       return;
     const node = this.get("node");
-    let parent = void 0;
-    if (config.length === 1 && config[0].id === node.id) {
+    let parent = null;
+    if (config.length === 1 && config[0].id === node?.id) {
       parent = this.get("parent");
-      if (parent.type === NodeType.ROOT) {
+      if (parent?.type === NodeType.ROOT) {
         parent = this.get("page");
       }
     }
@@ -2065,9 +2106,16 @@ class Editor$1 extends BaseService {
     return newNode;
   }
   async moveLayer(offset) {
+    const root = this.get("root");
+    if (!root)
+      throw new Error("root\u4E3A\u7A7A");
     const parent = this.get("parent");
+    if (!parent)
+      throw new Error("\u7236\u8282\u70B9\u4E3A\u7A7A");
     const node = this.get("node");
-    const brothers = parent?.items || [];
+    if (!node)
+      throw new Error("\u5F53\u524D\u8282\u70B9\u4E3A\u7A7A");
+    const brothers = parent.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
     const layout = await this.getLayout(parent, node);
     const isRelative = layout === Layout.RELATIVE;
@@ -2083,17 +2131,17 @@ class Editor$1 extends BaseService {
     this.get("stage")?.update({
       config: cloneDeep(toRaw(parent)),
       parentId: grandparent?.id,
-      root: cloneDeep(this.get("root"))
+      root: cloneDeep(root)
     });
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
   }
   async moveToContainer(config, targetId) {
+    const root = cloneDeep(this.get("root"));
     const { node, parent } = this.getNodeInfo(config.id, false);
     const target = this.getNodeById(targetId, false);
     const stage = this.get("stage");
-    if (node && parent && stage) {
-      const root = cloneDeep(this.get("root"));
+    if (root && node && parent && stage) {
       const index = getNodeIndex(node, parent);
       parent.items?.splice(index, 1);
       await stage.remove({ id: node.id, parentId: parent.id, root });
@@ -2156,7 +2204,7 @@ class Editor$1 extends BaseService {
     this.set("stage", null);
     this.set("highlightNode", null);
     this.set("modifiedNodeIds", /* @__PURE__ */ new Map());
-    this.set("pageLength", /* @__PURE__ */ new Map());
+    this.set("pageLength", 0);
   }
   destroy() {
     this.removeAllListeners();
@@ -2168,15 +2216,11 @@ class Editor$1 extends BaseService {
   }
   async getCodeDsl() {
     const root = this.get("root");
-    if (!root)
-      return null;
-    return root.codeBlocks || null;
+    return root?.codeBlocks || null;
   }
   getCodeDslSync() {
     const root = this.get("root");
-    if (!root)
-      return null;
-    return root.codeBlocks || null;
+    return root?.codeBlocks || null;
   }
   async setCodeDsl(codeDsl) {
     if (!this.state.root)
@@ -2190,9 +2234,10 @@ class Editor$1 extends BaseService {
   }
   pushHistoryState() {
     const curNode = cloneDeep(toRaw(this.get("node")));
-    if (!this.isHistoryStateChange) {
+    const page = this.get("page");
+    if (!this.isHistoryStateChange && curNode && page) {
       historyService.push({
-        data: cloneDeep(toRaw(this.get("page"))),
+        data: cloneDeep(toRaw(page)),
         modifiedNodeIds: this.get("modifiedNodeIds"),
         nodeId: curNode.id
       });
@@ -2651,8 +2696,10 @@ const useStage = (stageOptions) => {
   });
   stage.on("select-parent", () => {
     const parent = editorService.get("parent");
+    if (!parent)
+      throw new Error("\u7236\u8282\u70B9\u4E3A\u7A7A");
     editorService.select(parent);
-    editorService.get("stage").select(parent.id);
+    editorService.get("stage")?.select(parent.id);
   });
   stage.on("change-guides", (e) => {
     uiService.set("showGuides", true);
@@ -2671,8 +2718,8 @@ const useStage = (stageOptions) => {
 };
 
 const _hoisted_1$d = { class: "m-editor-empty-panel" };
-const _hoisted_2$7 = { class: "m-editor-empty-content" };
-const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+const _hoisted_2$6 = { class: "m-editor-empty-content" };
+const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
 const __default__$l = defineComponent({
   name: "MEditorAddPageBox"
 });
@@ -2684,22 +2731,25 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       const { editorService } = services || {};
       if (!editorService)
         return;
+      const root = toRaw(editorService.get("root"));
+      if (!root)
+        throw new Error("root \u4E0D\u80FD\u4E3A\u7A7A");
       editorService.add({
         type: NodeType.PAGE,
-        name: generatePageNameByApp(toRaw(editorService.get("root")))
+        name: generatePageNameByApp(root)
       });
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
-        createElementVNode("div", _hoisted_2$7, [
+        createElementVNode("div", _hoisted_2$6, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$n, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$s, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_3$4
+            _hoisted_3$3
           ])
         ])
       ]);
@@ -2746,7 +2796,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           columnWidth.value.right = right;
           columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
         }
-        uiService?.set("columnWidth", columnWidth);
+        uiService?.set("columnWidth", columnWidth.value);
       },
       {
         immediate: true
@@ -2766,8 +2816,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
       }
     );
-    const columnWidthChange = (columnWidth2) => {
-      uiService?.set("columnWidth", columnWidth2);
+    const columnWidthChange = (columnW) => {
+      columnWidth.value.left = columnW.left;
+      columnWidth.value.center = columnW.center;
+      columnWidth.value.right = columnW.right;
+      uiService?.set("columnWidth", columnW);
     };
     const saveCode = (value) => {
       try {
@@ -2786,7 +2839,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           "init-values": unref(root),
           options: __props.codeOptions,
           onSave: saveCode
-        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$o, {
+        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$n, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -2831,7 +2884,7 @@ const _hoisted_1$b = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_2$6 = { class: "el-dropdown-link menubar-menu-button" };
+const _hoisted_2$5 = { class: "el-dropdown-link menubar-menu-button" };
 const __default__$j = defineComponent({
   name: "MEditorToolButton"
 });
@@ -2925,7 +2978,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 disabled: unref(disabled)
               }, {
                 default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$n, {
+                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$s, {
                     key: 0,
                     icon: __props.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2942,7 +2995,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             disabled: unref(disabled)
           }, {
             default: withCtx(() => [
-              __props.data.icon ? (openBlock(), createBlock(_sfc_main$n, {
+              __props.data.icon ? (openBlock(), createBlock(_sfc_main$s, {
                 key: 0,
                 icon: __props.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2975,7 +3028,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$6, [
+            createElementVNode("span", _hoisted_2$5, [
               createTextVNode(toDisplayString(__props.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -3040,7 +3093,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             icon: markRaw(Delete),
             tooltip: `\u522A\u9664(Delete)`,
             disabled: () => services?.editorService.get("node")?.type === NodeType.PAGE,
-            handler: () => services?.editorService.remove(services?.editorService.get("node"))
+            handler: () => {
+              const node = services?.editorService.get("node");
+              node && services?.editorService.remove(node);
+            }
           });
           break;
         case "undo":
@@ -3177,9 +3233,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const curFormConfig = ref([]);
     const services = inject("services");
     const node = computed(() => services?.editorService.get("node"));
-    const propsPanelSize = computed(
-      () => services?.uiService.get("propsPanelSize") || "small"
-    );
+    const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
     const stage = computed(() => services?.editorService.get("stage"));
     const init = async () => {
       if (!node.value) {
@@ -3236,8 +3290,8 @@ const _hoisted_1$9 = {
   key: 0,
   class: "m-editor-content-bottom"
 };
-const _hoisted_2$5 = /* @__PURE__ */ createTextVNode("\u4FDD\u5B58");
-const _hoisted_3$3 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const _hoisted_2$4 = /* @__PURE__ */ createTextVNode("\u786E\u8BA4");
+const _hoisted_3$2 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
 const _hoisted_4$2 = {
   key: 1,
   class: "m-editor-content-bottom"
@@ -3256,7 +3310,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     codeOptions: null,
     language: null
   },
-  emits: ["save", "close", "saveAndClose"],
+  emits: ["close", "saveAndClose"],
   setup(__props, { emit }) {
     const props = __props;
     const services = inject("services");
@@ -3289,12 +3343,6 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       services?.codeBlockService.setCodeDraft(props.id, codeValue);
       tMagicMessage.success(`\u4EE3\u7801\u8349\u7A3F\u4FDD\u5B58\u6210\u529F ${datetimeFormatter(new Date())}`);
     };
-    const saveCode = () => {
-      if (!codeEditor.value || !props.editable)
-        return;
-      editorContent.value = codeEditor.value.getEditor()?.getValue();
-      emit("save", editorContent.value);
-    };
     const saveAndClose = () => {
       if (!codeEditor.value || !props.editable)
         return;
@@ -3328,7 +3376,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
       }, [
-        createVNode(_sfc_main$q, {
+        createVNode(_sfc_main$p, {
           ref_key: "codeEditor",
           ref: codeEditor,
           class: "m-editor-container",
@@ -3351,10 +3399,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
-            onClick: saveCode
+            onClick: saveAndClose
           }, {
             default: withCtx(() => [
-              _hoisted_2$5
+              _hoisted_2$4
             ]),
             _: 1
           }),
@@ -3364,7 +3412,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             onClick: close
           }, {
             default: withCtx(() => [
-              _hoisted_3$3
+              _hoisted_3$2
             ]),
             _: 1
           })
@@ -3396,9 +3444,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$8 = { class: "code-name-wrapper" };
-const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
-const _hoisted_3$2 = { class: "code-name-wrapper" };
-const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "\u53C2\u6570\u5B9A\u4E49", -1);
+const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
+const _hoisted_3$1 = { class: "code-name-wrapper" };
+const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "\u53C2\u6570", -1);
 const __default__$f = defineComponent({
   name: "MEditorFunctionEditor"
 });
@@ -3410,22 +3458,58 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     content: null,
     editable: { type: Boolean, default: true },
     autoSaveDraft: { type: Boolean, default: true },
-    codeOptions: null
+    codeOptions: null,
+    paramsColConfig: null
   },
   emits: ["change", "field-input"],
   setup(__props, { emit }) {
     const props = __props;
+    const defaultParamColConfig = {
+      type: "row",
+      label: "\u53C2\u6570\u7C7B\u578B",
+      items: [
+        {
+          text: "\u53C2\u6570\u7C7B\u578B",
+          labelWidth: "70px",
+          type: "select",
+          name: "type",
+          options: [
+            {
+              text: "\u6570\u5B57",
+              label: "\u6570\u5B57",
+              value: "number"
+            },
+            {
+              text: "\u5B57\u7B26\u4E32",
+              label: "\u5B57\u7B26\u4E32",
+              value: "text"
+            }
+          ]
+        }
+      ]
+    };
+    const paramsColConfig = props.paramsColConfig || defaultParamColConfig;
     const tableConfig = {
+      type: "table",
       border: true,
       enableFullscreen: false,
       name: "params",
-      maxHeight: "150px",
+      maxHeight: "300px",
+      dropSort: false,
       items: [
         {
           type: "text",
           label: "\u53C2\u6570\u540D",
-          name: "name"
-        }
+          name: "name",
+          width: 200
+        },
+        {
+          type: "text",
+          label: "\u53C2\u6570\u6CE8\u91CA",
+          name: "tip",
+          width: 200
+        },
+        paramsColConfig
       ]
     };
     const services = inject("services");
@@ -3443,7 +3527,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       codeContent.value = props.content;
     });
     const initTableModel = () => {
-      const codeDsl = services?.codeBlockService.getCodeDslSync();
+      const codeDsl = cloneDeep(services?.codeBlockService.getCodeDslSync());
       if (!codeDsl)
         return;
       tableModel.value = {
@@ -3488,7 +3572,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicCard), { shadow: "never" }, {
         header: withCtx(() => [
           createElementVNode("div", _hoisted_1$8, [
-            _hoisted_2$4,
+            _hoisted_2$3,
             createVNode(unref(TMagicInput), {
               class: "code-name-input",
               modelValue: codeName.value,
@@ -3496,10 +3580,10 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               disabled: !__props.editable
             }, null, 8, ["modelValue", "disabled"])
           ]),
-          createElementVNode("div", _hoisted_3$2, [
+          createElementVNode("div", _hoisted_3$1, [
             _hoisted_4$1,
             createVNode(_component_m_form_table, {
-              style: { "width": "320px" },
+              style: { "width": "800px" },
               config: tableConfig,
               model: tableModel.value,
               enableToggleMode: false,
@@ -3517,7 +3601,6 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             autoSaveDraft: __props.autoSaveDraft,
             codeOptions: __props.codeOptions,
             language: "javascript",
-            onSave: saveCode,
             onSaveAndClose: saveAndClose,
             onClose: close
           }, null, 8, ["id", "content", "editable", "autoSaveDraft", "codeOptions"])
@@ -3528,14 +3611,18 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = ["id"];
-const _hoisted_2$3 = { class: "list-item" };
-const _hoisted_3$1 = { class: "code-name" };
+const _hoisted_1$7 = {
+  key: 0,
+  class: "m-editor-code-block-editor-panel"
+};
 const __default__$e = defineComponent({
   name: "MEditorCodeBlockEditor"
 });
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...__default__$e,
+  props: {
+    paramsColConfig: null
+  },
   setup(__props) {
     const services = inject("services");
     const codeOptions = inject("codeOptions", {});
@@ -3545,7 +3632,6 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const state = reactive({
       codeList: []
     });
-    const mode = computed(() => services?.codeBlockService.getMode());
     const id = computed(() => services?.codeBlockService.getId() || "");
     const editable = computed(() => services?.codeBlockService.getEditStatus());
     const selectedIds = computed(() => services?.codeBlockService.getCombineIds() || []);
@@ -3568,10 +3654,6 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       });
       currentTitle.value = state.codeList[0]?.name || "";
     });
-    const selectHandler = (data) => {
-      services?.codeBlockService.setId(data.id);
-      currentTitle.value = data.name;
-    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicDialog), {
         "model-value": true,
@@ -3583,61 +3665,29 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         "show-close": false
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$o, {
+          createVNode(_sfc_main$n, {
             left: left.value,
             "onUpdate:left": _cache[0] || (_cache[0] = ($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"
-                ])
-              }, [
+              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
                 renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: unref(id) }),
                 codeConfig.value ? (openBlock(), createBlock(_sfc_main$g, {
                   key: 0,
                   id: unref(id),
                   name: codeConfig.value.name,
                   content: codeConfig.value.content,
+                  paramsColConfig: __props.paramsColConfig,
                   editable: !!unref(editable),
-                  autoSaveDraft: unref(mode) === unref(CodeEditorMode).EDITOR,
+                  autoSaveDraft: true,
                   codeOptions: unref(codeOptions)
-                }, null, 8, ["id", "name", "content", "editable", "autoSaveDraft", "codeOptions"])) : createCommentVNode("", true)
-              ], 2)) : createCommentVNode("", true)
+                }, null, 8, ["id", "name", "content", "paramsColConfig", "editable", "codeOptions"])) : createCommentVNode("", true)
+              ])) : createCommentVNode("", true)
             ]),
-            _: 2
-          }, [
-            unref(mode) === unref(CodeEditorMode).LIST ? {
-              name: "left",
-              fn: withCtx(() => [
-                !unref(isEmpty)(state.codeList) ? (openBlock(), createBlock(unref(TMagicTree), {
-                  key: 0,
-                  class: "side-tree",
-                  "node-key": "id",
-                  "empty-text": "\u6682\u65E0\u4EE3\u7801\u5757",
-                  data: state.codeList,
-                  "highlight-current": true,
-                  "current-node-key": state.codeList[0].id,
-                  onNodeClick: selectHandler
-                }, {
-                  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$7)
-                  ]),
-                  _: 1
-                }, 8, ["data", "current-node-key"])) : createCommentVNode("", true)
-              ])
-            } : void 0
-          ]), 1032, ["left"])
+            _: 3
+          }, 8, ["left"])
         ]),
         _: 3
       }, 8, ["title"]);
@@ -3673,7 +3723,8 @@ const __default__$d = defineComponent({
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...__default__$d,
   props: {
-    customError: null
+    customError: null,
+    paramsColConfig: null
   },
   setup(__props) {
     const props = __props;
@@ -3732,13 +3783,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
 }`,
         params: []
       };
-      await codeBlockService.setMode(CodeEditorMode.EDITOR);
       const id = await codeBlockService.getUniqueId();
       await codeBlockService.setCodeDslById(id, codeConfig);
       codeBlockService.setCodeEditorContent(true, id);
     };
     const editCode = async (key) => {
-      await services?.codeBlockService.setMode(CodeEditorMode.EDITOR);
       services?.codeBlockService.setCodeEditorContent(true, key);
     };
     const deleteCode = (key) => {
@@ -3836,7 +3885,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         placement: "bottom"
                       }, {
                         default: withCtx(() => [
-                          createVNode(_sfc_main$n, {
+                          createVNode(_sfc_main$s, {
                             icon: unref(editable) ? unref(Edit) : unref(View),
                             class: "edit-icon",
                             onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -3851,7 +3900,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         placement: "bottom"
                       }, {
                         default: withCtx(() => [
-                          createVNode(_sfc_main$n, {
+                          createVNode(_sfc_main$s, {
                             icon: unref(Link),
                             class: "edit-icon",
                             onClick: withModifiers(($event) => toggleCombineRelation(data), ["stop"])
@@ -3866,7 +3915,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         placement: "bottom"
                       }, {
                         default: withCtx(() => [
-                          createVNode(_sfc_main$n, {
+                          createVNode(_sfc_main$s, {
                             icon: unref(Close),
                             class: "edit-icon",
                             onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -3904,12 +3953,15 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        unref(isShowCodeBlockEditor) ? (openBlock(), createBlock(_sfc_main$f, { key: 0 }, {
+        unref(isShowCodeBlockEditor) ? (openBlock(), createBlock(_sfc_main$f, {
+          key: 0,
+          paramsColConfig: __props.paramsColConfig
+        }, {
           "code-block-edit-panel-header": withCtx(({ id }) => [
             renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
           ]),
           _: 3
-        })) : createCommentVNode("", true)
+        }, 8, ["paramsColConfig"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -4009,7 +4061,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$n, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$s, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -4024,7 +4076,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$n, {
+                            createVNode(_sfc_main$s, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
                             createVNode(unref(TMagicTooltip), {
@@ -4407,13 +4459,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     });
     watch(isMultiSelect, (isMultiSelect2) => {
       if (!isMultiSelect2) {
-        currentNodeKey.value = editorService?.get("node").id;
+        currentNodeKey.value = editorService?.get("node")?.id;
         tree.value?.setCurrentKey(currentNodeKey.value);
       }
     });
     const editorServiceRemoveHandler = () => {
       setTimeout(() => {
-        tree.value?.getNode(editorService?.get("node").id)?.updateChildren();
+        tree.value?.getNode(editorService?.get("node")?.id)?.updateChildren();
       }, 0);
     };
     const windowBlurHandler = () => {
@@ -4619,7 +4671,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 (openBlock(), createElementBlock("div", {
                   key: config.text
                 }, [
-                  config.icon ? (openBlock(), createBlock(_sfc_main$n, {
+                  config.icon ? (openBlock(), createBlock(_sfc_main$s, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -4819,9 +4871,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const addPage = () => {
       if (!editorService)
         return;
+      const root = toRaw(editorService.get("root"));
+      if (!root)
+        throw new Error("root \u4E0D\u80FD\u4E3A\u7A7A");
       const pageConfig = {
         type: NodeType.PAGE,
-        name: generatePageNameByApp(toRaw(editorService.get("root")))
+        name: generatePageNameByApp(root)
       };
       editorService.add(pageConfig);
     };
@@ -4837,14 +4892,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$n, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$s, { 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$n, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$s, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         unref(pageLength) ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -4860,7 +4915,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$n, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$s, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -5405,7 +5460,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         type: "button",
         text: "\u6E05\u7A7A\u53C2\u8003\u7EBF",
         handler: () => {
-          editorService?.get("stage").clearGuides();
+          editorService?.get("stage")?.clearGuides();
         }
       },
       ...props.stageContentMenu
@@ -5456,7 +5511,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const stageWrap = ref();
     const stageContainer = ref();
     const menu = ref();
-    const isMultiSelect = computed(() => services?.editorService.get("nodes")?.length > 1);
+    const nodes = computed(() => services?.editorService.get("nodes") || []);
+    const isMultiSelect = computed(() => nodes.value.length > 1);
     const stageRect = computed(() => services?.uiService.get("stageRect"));
     const stageContainerRect = computed(() => services?.uiService.get("stageContainerRect"));
     const root = computed(() => services?.editorService.get("root"));
@@ -6086,13 +6142,13 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(Editor.name, Editor);
-    app.component("m-fields-ui-select", _sfc_main$r);
+    app.component("m-fields-ui-select", _sfc_main$q);
     app.component("m-fields-code-link", _sfc_main$t);
     app.component("m-fields-vs-code", _sfc_main$u);
-    app.component("magic-code-editor", _sfc_main$q);
-    app.component("m-fields-code-select", _sfc_main$s);
+    app.component("magic-code-editor", _sfc_main$p);
+    app.component("m-fields-code-select", _sfc_main$r);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, CodeEditorMode, _sfc_main$s as CodeSelect, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$n as Icon, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$o as LayoutContainer, _sfc_main$i as PropsPanel, _sfc_main$q as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$k as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, _sfc_main$r as CodeSelect, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$s as Icon, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$n as LayoutContainer, _sfc_main$i as PropsPanel, _sfc_main$p as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$k as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map