@tmagic/editor 1.2.0 → 1.2.2

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/form'), require('@tmagic/schema'), require('@element-plus/icons-vue'), require('@tmagic/design'), require('monaco-editor'), require('@tmagic/stage'), require('gesto'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/form', '@tmagic/schema', '@element-plus/icons-vue', '@tmagic/design', 'monaco-editor', '@tmagic/stage', 'gesto', '@tmagic/utils', 'events', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.form, global.schema, global.iconsVue, global.design, global.monaco, global.StageCore, global.Gesto, global.utils, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, serialize, lodashEs, form, schema, iconsVue, design, monaco, StageCore, Gesto, utils, events, core, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/form'), require('@tmagic/schema'), require('@tmagic/design'), require('monaco-editor'), require('@tmagic/stage'), require('gesto'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons-vue', 'lodash-es', '@tmagic/form', '@tmagic/schema', '@tmagic/design', 'monaco-editor', '@tmagic/stage', 'gesto', '@tmagic/utils', 'events', '@tmagic/core', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.iconsVue, global.lodashEs, global.form, global.schema, global.design, global.monaco, global.StageCore, global.Gesto, global.utils, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, serialize, iconsVue, lodashEs, form, schema, design, monaco, StageCore, Gesto, utils, events, core, KeyController) { 'use strict';
 
   const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
 
@@ -136,12 +136,55 @@
     }
   });
 
-  const _hoisted_1$g = { class: "m-fields-code-select" };
+  const _hoisted_1$g = ["src"];
   const __default__$r = vue.defineComponent({
-    name: "MEditorCodeSelect"
+    name: "MEditorIcon"
   });
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...__default__$r,
+    props: {
+      icon: null
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return !__props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 0,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(iconsVue.Edit))
+          ]),
+          _: 1
+        })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 1,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$g)
+          ]),
+          _: 1
+        })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+          key: 2,
+          class: vue.normalizeClass(["magic-editor-icon", __props.icon])
+        }, null, 2)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 3,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(__props.icon))))
+          ]),
+          _: 1
+        }));
+      };
+    }
+  });
+
+  const _hoisted_1$f = { class: "m-fields-code-select" };
+  const __default__$q = vue.defineComponent({
+    name: "MEditorCodeSelect"
+  });
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$q,
     props: {
       config: null,
       model: null,
@@ -157,9 +200,10 @@
       const codeDsl = vue.computed(() => services?.codeBlockService.getCodeDslSync());
       const tableConfig = vue.computed(() => {
         const defaultConfig = {
-          dropSort: true,
+          dropSort: false,
           enableFullscreen: false,
           border: true,
+          operateColWidth: 60,
           items: [
             {
               type: "select",
@@ -186,9 +230,7 @@
               defaultValue: {},
               itemsFunction: (row) => {
                 const paramsConfig = getParamsConfig(row.codeId);
-                if (!row.params)
-                  row.params = {};
-                if (lodashEs.isEmpty(row.params)) {
+                if (lodashEs.isEmpty(row.params) || !row.params) {
                   form.createValues(mForm, paramsConfig, {}, row.params);
                 }
                 return paramsConfig;
@@ -201,6 +243,7 @@
           ...props.config.tableConfig
         };
       });
+      const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
       vue.watch(
         () => props.model[props.name],
         (value) => {
@@ -225,15 +268,17 @@
         if (lodashEs.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 = vue.resolveComponent("m-form-table");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
           vue.createVNode(_component_m_form_table, {
             config: vue.unref(tableConfig),
             model: __props.model[__props.name],
@@ -242,18 +287,28 @@
             prop: __props.prop,
             size: __props.size,
             onChange: changeHandler
-          }, null, 8, ["config", "model", "prop", "size"])
+          }, {
+            operateCol: vue.withCtx(({ scope }) => [
+              scope.row.codeId ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
+                key: 0,
+                icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+                class: "edit-icon",
+                onClick: ($event) => editCode(scope.row.codeId)
+              }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["config", "model", "prop", "size"])
         ]);
       };
     }
   });
 
-  const _hoisted_1$f = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
-  const __default__$q = vue.defineComponent({
+  const _hoisted_1$e = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const __default__$p = vue.defineComponent({
     name: "MEditorUISelect"
   });
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$q,
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$p,
     props: {
       config: null,
       model: null,
@@ -315,7 +370,7 @@
             style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1$f
+              _hoisted_1$e
             ]),
             _: 1
           }, 8, ["icon"])
@@ -363,11 +418,11 @@
 
   const UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const __default__$p = vue.defineComponent({
+  const __default__$o = vue.defineComponent({
     name: "MEditorCodeEditor"
   });
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$p,
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$o,
     props: {
       initValues: null,
       modifiedValues: null,
@@ -496,11 +551,11 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const __default__$o = vue.defineComponent({
+  const __default__$n = vue.defineComponent({
     name: "MEditorResizer"
   });
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$o,
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$n,
     emits: ["change"],
     setup(__props, { emit }) {
       const target = vue.ref();
@@ -532,17 +587,17 @@
     }
   });
 
-  const __default__$n = vue.defineComponent({
+  const __default__$m = vue.defineComponent({
     name: "MEditorLayout"
   });
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$n,
+  const _sfc_main$n = /* @__PURE__ */ vue.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
@@ -644,7 +699,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$p, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$o, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
@@ -653,7 +708,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           vue.unref(hasRight) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$p, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$o, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
               style: vue.normalizeStyle(`width: ${__props.right}px`)
@@ -666,49 +721,6 @@
     }
   });
 
-  const _hoisted_1$e = ["src"];
-  const __default__$m = vue.defineComponent({
-    name: "MEditorIcon"
-  });
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$m,
-    props: {
-      icon: null
-    },
-    setup(__props) {
-      return (_ctx, _cache) => {
-        return !__props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
-          key: 0,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(iconsVue.Edit))
-          ]),
-          _: 1
-        })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
-          key: 1,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$e)
-          ]),
-          _: 1
-        })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
-          key: 2,
-          class: vue.normalizeClass(["magic-editor-icon", __props.icon])
-        }, null, 2)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
-          key: 3,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(__props.icon))))
-          ]),
-          _: 1
-        }));
-      };
-    }
-  });
-
   var ColumnLayout = /* @__PURE__ */ ((ColumnLayout2) => {
     ColumnLayout2["LEFT"] = "left";
     ColumnLayout2["CENTER"] = "center";
@@ -733,11 +745,6 @@
   })(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";
@@ -899,7 +906,6 @@
       codeDsl: null,
       id: "",
       editable: true,
-      mode: CodeEditorMode.EDITOR,
       combineIds: [],
       undeletableList: [],
       relations: {}
@@ -914,7 +920,6 @@
         "setCodeDslById",
         "setCodeEditorShowStatus",
         "setEditStatus",
-        "setMode",
         "setCombineIds",
         "setUndeleteableList",
         "deleteCodeDslByIds"
@@ -1000,12 +1005,6 @@
     getId() {
       return this.state.id;
     }
-    getMode() {
-      return this.state.mode;
-    }
-    async setMode(mode) {
-      this.state.mode = mode;
-    }
     async setCombineIds(ids) {
       this.state.combineIds = ids;
     }
@@ -1065,7 +1064,6 @@
       this.state.codeDsl = null;
       this.state.id = "";
       this.state.editable = true;
-      this.state.mode = CodeEditorMode.EDITOR;
       this.state.combineIds = [];
       this.state.undeletableList = [];
     }
@@ -1089,6 +1087,7 @@
     }
     recurseMNode(node, relations) {
       lodashEs.forIn(node, (value, key) => {
+        let unConfirmedValue = { id: node.id };
         if (value?.hookType === schema.HookType.CODE && !lodashEs.isEmpty(value.hookData)) {
           value.hookData.forEach((relationItem) => {
             if (!relationItem.codeId)
@@ -1102,6 +1101,14 @@
             }
             codeItem[node.id].push(key);
           });
+          return;
+        }
+        if (typeof value === "object") {
+          unConfirmedValue = {
+            ...unConfirmedValue,
+            ...value
+          };
+          this.recurseMNode(unConfirmedValue, relations);
         }
       });
       if (!lodashEs.isEmpty(node.items)) {
@@ -1374,10 +1381,14 @@
   };
   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);
@@ -1605,7 +1616,7 @@
       config.map(async (configItem) => {
         const { offsetX = 0, offsetY = 0, ...positionClone } = position;
         let pastePosition = positionClone;
-        if (!lodashEs.isEmpty(pastePosition) && curNode.items) {
+        if (!lodashEs.isEmpty(pastePosition) && curNode?.items) {
           pastePosition = getPositionInContainer(pastePosition, curNode.id);
         }
         if (pastePosition.left && configItem.style?.left) {
@@ -1628,8 +1639,9 @@
             ...pastePosition
           };
         }
-        if (utils.isPage(pasteConfig)) {
-          pasteConfig.name = generatePageNameByApp(editorService.get("root"));
+        const root = editorService.get("root");
+        if (utils.isPage(pasteConfig) && root) {
+          pasteConfig.name = generatePageNameByApp(root);
         }
         return pasteConfig;
       })
@@ -1652,9 +1664,9 @@
     let parentNode;
     if (utils.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;
@@ -1712,11 +1724,18 @@
     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 && lodashEs.isObject(value) && !(value instanceof StageCore__default.default) && !(value instanceof Map)) {
+          this.state.pageLength = value.items?.length || 0;
+        } else {
+          this.state.pageLength = 0;
+        }
         this.emit("root-change", value, preValue);
       }
     }
@@ -1728,16 +1747,21 @@
       if (raw) {
         root = vue.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 = utils.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) => {
@@ -1753,8 +1777,6 @@
       return node;
     }
     getParentById(id, raw = true) {
-      if (!this.get("root"))
-        return;
       const { parent } = this.getNodeInfo(id, raw);
       return parent;
     }
@@ -1771,9 +1793,9 @@
     }
     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(vue.toRaw(page));
       } else {
@@ -1787,7 +1809,7 @@
             page,
             parent
           },
-          utils.getNodePath(node.id, this.get("root").items)
+          utils.getNodePath(node.id, this.get("root")?.items)
         );
       }
       this.emit("select", node);
@@ -1809,6 +1831,10 @@
     async selectNextPage() {
       const root = vue.toRaw(this.get("root"));
       const page = vue.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);
@@ -1835,16 +1861,20 @@
     }
     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 === schema.NodeType.ROOT || curNode.type === schema.NodeType.ROOT) && node.type !== schema.NodeType.PAGE) {
+      if (!curNode)
+        throw new Error("\u5F53\u524D\u9009\u4E2D\u8282\u70B9\u4E3A\u7A7A");
+      if ((parent.type === schema.NodeType.ROOT || curNode?.type === schema.NodeType.ROOT) && node.type !== schema.NodeType.PAGE) {
         throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
       }
       if (parent.id !== curNode.id && node.type !== schema.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(vue.toRaw(parent), node);
       node.style = getInitPositionStyle(node.style, layout);
@@ -1875,8 +1905,9 @@
       }
       const newNodes = await Promise.all(
         addNodes.map((node) => {
-          if (utils.isPage(node)) {
-            return this.doAdd(node, this.get("root"));
+          const root = this.get("root");
+          if (utils.isPage(node) && root) {
+            return this.doAdd(node, root);
           }
           const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
           if (!parentNode)
@@ -1905,7 +1936,7 @@
     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");
@@ -1946,13 +1977,16 @@
       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 = lodashEs.cloneDeep(vue.toRaw(info.node));
-      let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, this.get("root"));
+      let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, root);
       newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue) => {
         if (lodashEs.isObject(srcValue) && Array.isArray(objValue)) {
           return srcValue;
@@ -1980,14 +2014,14 @@
         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: lodashEs.cloneDeep(newConfig),
         parentId: parent.id,
-        root: lodashEs.cloneDeep(this.get("root"))
+        root: lodashEs.cloneDeep(root)
       });
       if (newConfig.type === schema.NodeType.PAGE) {
         this.set("page", newConfig);
@@ -2004,8 +2038,15 @@
       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 = lodashEs.cloneDeep(vue.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;
@@ -2016,7 +2057,7 @@
       this.get("stage")?.update({
         config: lodashEs.cloneDeep(node),
         parentId: parent.id,
-        root: lodashEs.cloneDeep(this.get("root"))
+        root: lodashEs.cloneDeep(root)
       });
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
@@ -2031,10 +2072,10 @@
       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 === schema.NodeType.ROOT) {
+        if (parent?.type === schema.NodeType.ROOT) {
           parent = this.get("page");
         }
       }
@@ -2082,9 +2123,16 @@
       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;
@@ -2100,17 +2148,17 @@
       this.get("stage")?.update({
         config: lodashEs.cloneDeep(vue.toRaw(parent)),
         parentId: grandparent?.id,
-        root: lodashEs.cloneDeep(this.get("root"))
+        root: lodashEs.cloneDeep(root)
       });
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
     }
     async moveToContainer(config, targetId) {
+      const root = lodashEs.cloneDeep(this.get("root"));
       const { node, parent } = this.getNodeInfo(config.id, false);
       const target = this.getNodeById(targetId, false);
       const stage = this.get("stage");
-      if (node && parent && stage) {
-        const root = lodashEs.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 });
@@ -2173,7 +2221,7 @@
       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();
@@ -2185,15 +2233,11 @@
     }
     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)
@@ -2207,9 +2251,10 @@
     }
     pushHistoryState() {
       const curNode = lodashEs.cloneDeep(vue.toRaw(this.get("node")));
-      if (!this.isHistoryStateChange) {
+      const page = this.get("page");
+      if (!this.isHistoryStateChange && curNode && page) {
         historyService.push({
-          data: lodashEs.cloneDeep(vue.toRaw(this.get("page"))),
+          data: lodashEs.cloneDeep(vue.toRaw(page)),
           modifiedNodeIds: this.get("modifiedNodeIds"),
           nodeId: curNode.id
         });
@@ -2668,8 +2713,10 @@
     });
     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);
@@ -2688,8 +2735,8 @@
   };
 
   const _hoisted_1$d = { class: "m-editor-empty-panel" };
-  const _hoisted_2$7 = { class: "m-editor-empty-content" };
-  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+  const _hoisted_2$6 = { class: "m-editor-empty-content" };
+  const _hoisted_3$3 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
   const __default__$l = vue.defineComponent({
     name: "MEditorAddPageBox"
   });
@@ -2701,22 +2748,25 @@
         const { editorService } = services || {};
         if (!editorService)
           return;
+        const root = vue.toRaw(editorService.get("root"));
+        if (!root)
+          throw new Error("root \u4E0D\u80FD\u4E3A\u7A7A");
         editorService.add({
           type: schema.NodeType.PAGE,
-          name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
+          name: generatePageNameByApp(root)
         });
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
-          vue.createElementVNode("div", _hoisted_2$7, [
+          vue.createElementVNode("div", _hoisted_2$6, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$n, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
-              _hoisted_3$4
+              _hoisted_3$3
             ])
           ])
         ]);
@@ -2763,7 +2813,7 @@
             columnWidth.value.right = right;
             columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
           }
-          uiService?.set("columnWidth", columnWidth);
+          uiService?.set("columnWidth", columnWidth.value);
         },
         {
           immediate: true
@@ -2783,8 +2833,11 @@
           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 {
@@ -2803,7 +2856,7 @@
             "init-values": vue.unref(root),
             options: __props.codeOptions,
             onSave: saveCode
-          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$n, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -2848,7 +2901,7 @@
     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 = vue.defineComponent({
     name: "MEditorToolButton"
   });
@@ -2942,7 +2995,7 @@
                   disabled: vue.unref(disabled)
                 }, {
                   default: vue.withCtx(() => [
-                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
+                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
                       key: 0,
                       icon: __props.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -2959,7 +3012,7 @@
               disabled: vue.unref(disabled)
             }, {
               default: vue.withCtx(() => [
-                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
+                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
                   key: 0,
                   icon: __props.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -2992,7 +3045,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$6, [
+              vue.createElementVNode("span", _hoisted_2$5, [
                 vue.createTextVNode(vue.toDisplayString(__props.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -3057,7 +3110,10 @@
               icon: vue.markRaw(iconsVue.Delete),
               tooltip: `\u522A\u9664(Delete)`,
               disabled: () => services?.editorService.get("node")?.type === schema.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":
@@ -3194,9 +3250,7 @@
       const curFormConfig = vue.ref([]);
       const services = vue.inject("services");
       const node = vue.computed(() => services?.editorService.get("node"));
-      const propsPanelSize = vue.computed(
-        () => services?.uiService.get("propsPanelSize") || "small"
-      );
+      const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
       const stage = vue.computed(() => services?.editorService.get("stage"));
       const init = async () => {
         if (!node.value) {
@@ -3253,8 +3307,8 @@
     key: 0,
     class: "m-editor-content-bottom"
   };
-  const _hoisted_2$5 = /* @__PURE__ */ vue.createTextVNode("\u4FDD\u5B58");
-  const _hoisted_3$3 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
+  const _hoisted_2$4 = /* @__PURE__ */ vue.createTextVNode("\u786E\u8BA4");
+  const _hoisted_3$2 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
   const _hoisted_4$2 = {
     key: 1,
     class: "m-editor-content-bottom"
@@ -3273,7 +3327,7 @@
       codeOptions: null,
       language: null
     },
-    emits: ["save", "close", "saveAndClose"],
+    emits: ["close", "saveAndClose"],
     setup(__props, { emit }) {
       const props = __props;
       const services = vue.inject("services");
@@ -3306,12 +3360,6 @@
         services?.codeBlockService.setCodeDraft(props.id, codeValue);
         design.tMagicMessage.success(`\u4EE3\u7801\u8349\u7A3F\u4FDD\u5B58\u6210\u529F ${utils.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;
@@ -3345,7 +3393,7 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
         }, [
-          vue.createVNode(_sfc_main$q, {
+          vue.createVNode(_sfc_main$p, {
             ref_key: "codeEditor",
             ref: codeEditor,
             class: "m-editor-container",
@@ -3368,10 +3416,10 @@
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
-              onClick: saveCode
+              onClick: saveAndClose
             }, {
               default: vue.withCtx(() => [
-                _hoisted_2$5
+                _hoisted_2$4
               ]),
               _: 1
             }),
@@ -3381,7 +3429,7 @@
               onClick: close
             }, {
               default: vue.withCtx(() => [
-                _hoisted_3$3
+                _hoisted_3$2
               ]),
               _: 1
             })
@@ -3413,9 +3461,9 @@
   });
 
   const _hoisted_1$8 = { class: "code-name-wrapper" };
-  const _hoisted_2$4 = /* @__PURE__ */ vue.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__ */ vue.createElementVNode("div", { class: "code-name-label" }, "\u53C2\u6570\u5B9A\u4E49", -1);
+  const _hoisted_2$3 = /* @__PURE__ */ vue.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__ */ vue.createElementVNode("div", { class: "code-name-label" }, "\u53C2\u6570", -1);
   const __default__$f = vue.defineComponent({
     name: "MEditorFunctionEditor"
   });
@@ -3427,22 +3475,58 @@
       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 = vue.inject("services");
@@ -3460,7 +3544,7 @@
         codeContent.value = props.content;
       });
       const initTableModel = () => {
-        const codeDsl = services?.codeBlockService.getCodeDslSync();
+        const codeDsl = lodashEs.cloneDeep(services?.codeBlockService.getCodeDslSync());
         if (!codeDsl)
           return;
         tableModel.value = {
@@ -3505,7 +3589,7 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), { shadow: "never" }, {
           header: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_1$8, [
-              _hoisted_2$4,
+              _hoisted_2$3,
               vue.createVNode(vue.unref(design.TMagicInput), {
                 class: "code-name-input",
                 modelValue: codeName.value,
@@ -3513,10 +3597,10 @@
                 disabled: !__props.editable
               }, null, 8, ["modelValue", "disabled"])
             ]),
-            vue.createElementVNode("div", _hoisted_3$2, [
+            vue.createElementVNode("div", _hoisted_3$1, [
               _hoisted_4$1,
               vue.createVNode(_component_m_form_table, {
-                style: { "width": "320px" },
+                style: { "width": "800px" },
                 config: tableConfig,
                 model: tableModel.value,
                 enableToggleMode: false,
@@ -3534,7 +3618,6 @@
               autoSaveDraft: __props.autoSaveDraft,
               codeOptions: __props.codeOptions,
               language: "javascript",
-              onSave: saveCode,
               onSaveAndClose: saveAndClose,
               onClose: close
             }, null, 8, ["id", "content", "editable", "autoSaveDraft", "codeOptions"])
@@ -3545,14 +3628,18 @@
     }
   });
 
-  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 = vue.defineComponent({
     name: "MEditorCodeBlockEditor"
   });
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     ...__default__$e,
+    props: {
+      paramsColConfig: null
+    },
     setup(__props) {
       const services = vue.inject("services");
       const codeOptions = vue.inject("codeOptions", {});
@@ -3562,7 +3649,6 @@
       const state = vue.reactive({
         codeList: []
       });
-      const mode = vue.computed(() => services?.codeBlockService.getMode());
       const id = vue.computed(() => services?.codeBlockService.getId() || "");
       const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
       const selectedIds = vue.computed(() => services?.codeBlockService.getCombineIds() || []);
@@ -3585,10 +3671,6 @@
         });
         currentTitle.value = state.codeList[0]?.name || "";
       });
-      const selectHandler = (data) => {
-        services?.codeBlockService.setId(data.id);
-        currentTitle.value = data.name;
-      };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDialog), {
           "model-value": true,
@@ -3600,61 +3682,29 @@
           "show-close": false
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$o, {
+            vue.createVNode(_sfc_main$n, {
               left: left.value,
               "onUpdate:left": _cache[0] || (_cache[0] = ($event) => left.value = $event),
               "min-left": 45,
               class: "code-editor-layout"
-            }, vue.createSlots({
+            }, {
               center: vue.withCtx(() => [
-                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", {
-                  key: 0,
-                  class: vue.normalizeClass([
-                    vue.unref(mode) === vue.unref(CodeEditorMode).LIST ? "m-editor-code-block-editor-panel-list-mode" : "m-editor-code-block-editor-panel"
-                  ])
-                }, [
+                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
                   vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: vue.unref(id) }),
                   codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
                     key: 0,
                     id: vue.unref(id),
                     name: codeConfig.value.name,
                     content: codeConfig.value.content,
+                    paramsColConfig: __props.paramsColConfig,
                     editable: !!vue.unref(editable),
-                    autoSaveDraft: vue.unref(mode) === vue.unref(CodeEditorMode).EDITOR,
+                    autoSaveDraft: true,
                     codeOptions: vue.unref(codeOptions)
-                  }, null, 8, ["id", "name", "content", "editable", "autoSaveDraft", "codeOptions"])) : vue.createCommentVNode("", true)
-                ], 2)) : vue.createCommentVNode("", true)
+                  }, null, 8, ["id", "name", "content", "paramsColConfig", "editable", "codeOptions"])) : vue.createCommentVNode("", true)
+                ])) : vue.createCommentVNode("", true)
               ]),
-              _: 2
-            }, [
-              vue.unref(mode) === vue.unref(CodeEditorMode).LIST ? {
-                name: "left",
-                fn: vue.withCtx(() => [
-                  !vue.unref(lodashEs.isEmpty)(state.codeList) ? (vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(({ data }) => [
-                      vue.createElementVNode("div", {
-                        id: data.id,
-                        class: "list-container"
-                      }, [
-                        vue.createElementVNode("div", _hoisted_2$3, [
-                          vue.createElementVNode("div", _hoisted_3$1, vue.toDisplayString(data.name) + "\uFF08" + vue.toDisplayString(data.id) + "\uFF09", 1)
-                        ])
-                      ], 8, _hoisted_1$7)
-                    ]),
-                    _: 1
-                  }, 8, ["data", "current-node-key"])) : vue.createCommentVNode("", true)
-                ])
-              } : void 0
-            ]), 1032, ["left"])
+              _: 3
+            }, 8, ["left"])
           ]),
           _: 3
         }, 8, ["title"]);
@@ -3690,7 +3740,8 @@
   const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     ...__default__$d,
     props: {
-      customError: null
+      customError: null,
+      paramsColConfig: null
     },
     setup(__props) {
       const props = __props;
@@ -3749,13 +3800,11 @@
 }`,
           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) => {
@@ -3853,7 +3902,7 @@
                           placement: "bottom"
                         }, {
                           default: vue.withCtx(() => [
-                            vue.createVNode(_sfc_main$n, {
+                            vue.createVNode(_sfc_main$s, {
                               icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                               class: "edit-icon",
                               onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -3868,7 +3917,7 @@
                           placement: "bottom"
                         }, {
                           default: vue.withCtx(() => [
-                            vue.createVNode(_sfc_main$n, {
+                            vue.createVNode(_sfc_main$s, {
                               icon: vue.unref(iconsVue.Link),
                               class: "edit-icon",
                               onClick: vue.withModifiers(($event) => toggleCombineRelation(data), ["stop"])
@@ -3883,7 +3932,7 @@
                           placement: "bottom"
                         }, {
                           default: vue.withCtx(() => [
-                            vue.createVNode(_sfc_main$n, {
+                            vue.createVNode(_sfc_main$s, {
                               icon: vue.unref(iconsVue.Close),
                               class: "edit-icon",
                               onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -3921,12 +3970,15 @@
             ]),
             _: 3
           }),
-          vue.unref(isShowCodeBlockEditor) ? (vue.openBlock(), vue.createBlock(_sfc_main$f, { key: 0 }, {
+          vue.unref(isShowCodeBlockEditor) ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
+            key: 0,
+            paramsColConfig: __props.paramsColConfig
+          }, {
             "code-block-edit-panel-header": vue.withCtx(({ id }) => [
               vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
             ]),
             _: 3
-          })) : vue.createCommentVNode("", true)
+          }, 8, ["paramsColConfig"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -4026,7 +4078,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$n, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -4041,7 +4093,7 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$n, {
+                              vue.createVNode(_sfc_main$s, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
                               vue.createVNode(vue.unref(design.TMagicTooltip), {
@@ -4424,13 +4476,13 @@
       });
       vue.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 = () => {
@@ -4636,7 +4688,7 @@
                   (vue.openBlock(), vue.createElementBlock("div", {
                     key: config.text
                   }, [
-                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
+                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
                       key: 0,
                       icon: config.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -4836,9 +4888,12 @@
       const addPage = () => {
         if (!editorService)
           return;
+        const root = vue.toRaw(editorService.get("root"));
+        if (!root)
+          throw new Error("root \u4E0D\u80FD\u4E3A\u7A7A");
         const pageConfig = {
           type: schema.NodeType.PAGE,
-          name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
+          name: generatePageNameByApp(root)
         };
         editorService.add(pageConfig);
       };
@@ -4854,14 +4909,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$n, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$n, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           vue.unref(pageLength) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -4877,7 +4932,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$n, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$s, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -5422,7 +5477,7 @@
           type: "button",
           text: "\u6E05\u7A7A\u53C2\u8003\u7EBF",
           handler: () => {
-            editorService?.get("stage").clearGuides();
+            editorService?.get("stage")?.clearGuides();
           }
         },
         ...props.stageContentMenu
@@ -5473,7 +5528,8 @@
       const stageWrap = vue.ref();
       const stageContainer = vue.ref();
       const menu = vue.ref();
-      const isMultiSelect = vue.computed(() => services?.editorService.get("nodes")?.length > 1);
+      const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
+      const isMultiSelect = vue.computed(() => nodes.value.length > 1);
       const stageRect = vue.computed(() => services?.uiService.get("stageRect"));
       const stageContainerRect = vue.computed(() => services?.uiService.get("stageContainerRect"));
       const root = vue.computed(() => services?.editorService.get("root"));
@@ -6103,11 +6159,11 @@
       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);
     }
   };
 
@@ -6115,21 +6171,20 @@
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
   exports.CodeBlockList = _sfc_main$e;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeEditorMode = CodeEditorMode;
-  exports.CodeSelect = _sfc_main$s;
+  exports.CodeSelect = _sfc_main$r;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$d;
   exports.ContentMenu = _sfc_main$c;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$n;
+  exports.Icon = _sfc_main$s;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$a;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$o;
+  exports.LayoutContainer = _sfc_main$n;
   exports.PropsPanel = _sfc_main$i;
-  exports.TMagicCodeEditor = _sfc_main$q;
+  exports.TMagicCodeEditor = _sfc_main$p;
   exports.TMagicEditor = Editor;
   exports.ToolButton = _sfc_main$k;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;