@tmagic/editor 1.1.4 → 1.1.5

package/dist/tmagic-editor.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, createElementBlock, createVNode, unref, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, Teleport, nextTick, toHandlers, createSlots, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, ref, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, watchEffect, createSlots, resolveDynamicComponent, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, Teleport, nextTick, toHandlers, provide } from 'vue';
 import serialize from 'serialize-javascript';
 import { Delete, Close, Plus, Edit, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, cloneDeep, mergeWith, isEmpty, uniq } from 'lodash-es';
@@ -12,112 +12,100 @@ import Gesto from 'gesto';
 import { ElMessage } from 'element-plus';
 import KeyController from 'keycon';
 
-const _sfc_main$o = defineComponent({
-  name: "m-fields-vs-code",
-  props: ["model", "name", "config", "prop"],
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "Code",
+  props: {
+    model: null,
+    name: null,
+    config: null,
+    prop: null
+  },
   emits: ["change"],
-  setup(props, { emit }) {
+  setup(__props, { emit }) {
+    const props = __props;
     const language = computed(() => props.config.language || "javascript");
     const height = computed(() => `${document.body.clientHeight - 168}px`);
-    return {
-      height,
-      language,
-      save(v) {
-        props.model[props.name] = v;
-        emit("change", v);
-      }
+    const save = (v) => {
+      props.model[props.name] = v;
+      emit("change", v);
+    };
+    return (_ctx, _cache) => {
+      const _component_magic_code_editor = resolveComponent("magic-code-editor");
+      return openBlock(), createBlock(_component_magic_code_editor, {
+        style: normalizeStyle(`height: ${unref(height)}`),
+        "init-values": __props.model[__props.name],
+        language: unref(language),
+        onSave: save
+      }, null, 8, ["style", "init-values", "language"]);
     };
   }
 });
 
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
-function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_magic_code_editor = resolveComponent("magic-code-editor");
-  return openBlock(), createBlock(_component_magic_code_editor, {
-    style: normalizeStyle(`height: ${_ctx.height}`),
-    "init-values": _ctx.model[_ctx.name],
-    language: _ctx.language,
-    onSave: _ctx.save
-  }, null, 8, ["style", "init-values", "language", "onSave"]);
-}
-const Code = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$a]]);
-
-const _sfc_main$n = defineComponent({
-  name: "m-fields-code-link",
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  __name: "CodeLink",
   props: {
-    config: {
-      type: Object
-    },
-    model: {
-      type: Object
-    },
-    name: {
-      type: String
-    },
-    prop: {
-      type: String
-    }
+    config: null,
+    model: null,
+    name: null,
+    prop: null
   },
   emits: ["change"],
-  setup(props, { emit }) {
-    const modelValue = ref({
-      form: {}
+  setup(__props, { emit }) {
+    const props = __props;
+    const formConfig = computed(() => ({
+      ...props.config,
+      text: "",
+      type: "link",
+      form: [
+        {
+          name: props.name,
+          type: "vs-code"
+        }
+      ]
+    }));
+    const modelValue = reactive({
+      form: {
+        [props.name]: ""
+      }
     });
-    watchEffect(() => {
-      if (!props.model || !props.name)
+    watch(
+      () => props.model[props.name],
+      (value) => {
+        modelValue.form = {
+          [props.name]: serialize(value, {
+            space: 2,
+            unsafe: true
+          }).replace(/"(\w+)":\s/g, "$1: ")
+        };
+      },
+      {
+        immediate: true
+      }
+    );
+    const changeHandler = (v) => {
+      if (!props.name || !props.model)
         return;
-      modelValue.value.form[props.name] = serialize(props.model[props.name], {
-        space: 2,
-        unsafe: true
-      }).replace(/"(\w+)":\s/g, "$1: ");
-    });
-    return {
-      modelValue,
-      formConfig: computed(() => ({
-        ...props.config,
-        text: "",
-        type: "link",
-        form: [
-          {
-            name: props.name,
-            type: "vs-code"
-          }
-        ]
-      })),
-      changeHandler(v) {
-        if (!props.name || !props.model)
-          return;
-        try {
-          props.model[props.name] = eval(`${v[props.name]}`);
-          emit("change", props.model[props.name]);
-        } catch (e) {
-          console.error(e);
-        }
+      try {
+        props.model[props.name] = eval(`(${v[props.name]})`);
+        emit("change", props.model[props.name]);
+      } catch (e) {
+        console.error(e);
       }
     };
+    return (_ctx, _cache) => {
+      const _component_m_fields_link = resolveComponent("m-fields-link");
+      return openBlock(), createBlock(_component_m_fields_link, {
+        config: unref(formConfig),
+        model: modelValue,
+        name: "form",
+        onChange: changeHandler
+      }, null, 8, ["config", "model"]);
+    };
   }
 });
 
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_m_fields_link = resolveComponent("m-fields-link");
-  return openBlock(), createBlock(_component_m_fields_link, {
-    config: _ctx.formConfig,
-    model: _ctx.modelValue,
-    name: "form",
-    onChange: _ctx.changeHandler
-  }, null, 8, ["config", "model", "onChange"]);
-}
-const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$9]]);
-
-const _hoisted_1$c = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_1$b = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "UISelect",
   props: {
     config: null,
@@ -182,7 +170,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$c
+            _hoisted_1$b
           ]),
           _: 1
         }, 8, ["icon"])
@@ -245,7 +233,7 @@ const toString = (v, language) => {
   }
   return value;
 };
-const _sfc_main$l = defineComponent({
+const _sfc_main$m = defineComponent({
   name: "magic-code-editor",
   props: {
     initValues: {
@@ -274,10 +262,12 @@ const _sfc_main$l = defineComponent({
     const values = ref("");
     const loading = ref(false);
     const codeEditor = ref();
-    const resizeObserver = new globalThis.ResizeObserver(throttle(() => {
-      vsEditor?.layout();
-      vsDiffEditor?.layout();
-    }, 300));
+    const resizeObserver = new globalThis.ResizeObserver(
+      throttle(() => {
+        vsEditor?.layout();
+        vsDiffEditor?.layout();
+      }, 300)
+    );
     const setEditorValue = (v, m) => {
       values.value = toString(v, props.language);
       if (props.type === "diff") {
@@ -322,14 +312,18 @@ const _sfc_main$l = defineComponent({
       }
       resizeObserver.observe(codeEditor.value);
     };
-    watch(() => props.initValues, (v, preV) => {
-      if (v !== preV) {
-        setEditorValue(props.initValues, props.modifiedValues);
+    watch(
+      () => props.initValues,
+      (v, preV) => {
+        if (v !== preV) {
+          setEditorValue(props.initValues, props.modifiedValues);
+        }
+      },
+      {
+        deep: true,
+        immediate: true
       }
-    }, {
-      deep: true,
-      immediate: true
-    });
+    );
     onMounted(async () => {
       loading.value = true;
       init();
@@ -353,14 +347,22 @@ const _sfc_main$l = defineComponent({
   }
 });
 
-const _hoisted_1$b = {
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _hoisted_1$a = {
   ref: "codeEditor",
   class: "magic-code-editor"
 };
-function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$b, null, 512);
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$a, null, 512);
 }
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$8]]);
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$6]]);
 
 let $TMAGIC_EDITOR = {};
 const setConfig = (option) => {
@@ -633,7 +635,9 @@ class WebStorage extends BaseService {
   }
   async getItem(key, options = {}) {
     const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
-    const { protocol = options.protocol, item } = this.getValueAndProtocol(storage.getItem(`${options.namespace || namespace}:${key}`));
+    const { protocol = options.protocol, item } = this.getValueAndProtocol(
+      storage.getItem(`${options.namespace || namespace}:${key}`)
+    );
     if (item === null)
       return null;
     switch (protocol) {
@@ -924,10 +928,12 @@ class Props extends BaseService {
     const [id, defaultPropsValue, data] = await Promise.all([
       this.createId(type),
       this.getDefaultPropsValue(type),
-      this.setNewItemId(cloneDeep({
-        type,
-        ...defaultValue
-      }))
+      this.setNewItemId(
+        cloneDeep({
+          type,
+          ...defaultValue
+        })
+      )
     ]);
     return {
       id,
@@ -980,37 +986,39 @@ const beforePaste = async (position, config) => {
     return config;
   const curNode = editorService.get("node");
   const { left: referenceLeft, top: referenceTop } = config[0].style;
-  const pasteConfigs = await Promise.all(config.map(async (configItem) => {
-    const { offsetX = 0, offsetY = 0, ...positionClone } = position;
-    let pastePosition = positionClone;
-    if (!isEmpty(pastePosition) && curNode.items) {
-      pastePosition = getPositionInContainer(pastePosition, curNode.id);
-    }
-    if (pastePosition.left && configItem.style?.left) {
-      pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
-    }
-    if (pastePosition.top && configItem.style?.top) {
-      pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
-    }
-    const pasteConfig = await propsService.setNewItemId(configItem);
-    if (pasteConfig.style) {
-      const { left, top } = pasteConfig.style;
-      if (typeof left === "number" || !!left && !isNaN(Number(left))) {
-        pasteConfig.style.left = Number(left) + offsetX;
+  const pasteConfigs = await Promise.all(
+    config.map(async (configItem) => {
+      const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+      let pastePosition = positionClone;
+      if (!isEmpty(pastePosition) && curNode.items) {
+        pastePosition = getPositionInContainer(pastePosition, curNode.id);
       }
-      if (typeof top === "number" || !!top && !isNaN(Number(top))) {
-        pasteConfig.style.top = Number(top) + offsetY;
+      if (pastePosition.left && configItem.style?.left) {
+        pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
       }
-      pasteConfig.style = {
-        ...pasteConfig.style,
-        ...pastePosition
-      };
-    }
-    if (isPage(pasteConfig)) {
-      pasteConfig.name = generatePageNameByApp(editorService.get("root"));
-    }
-    return pasteConfig;
-  }));
+      if (pastePosition.top && configItem.style?.top) {
+        pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+      }
+      const pasteConfig = await propsService.setNewItemId(configItem);
+      if (pasteConfig.style) {
+        const { left, top } = pasteConfig.style;
+        if (typeof left === "number" || !!left && !isNaN(Number(left))) {
+          pasteConfig.style.left = Number(left) + offsetX;
+        }
+        if (typeof top === "number" || !!top && !isNaN(Number(top))) {
+          pasteConfig.style.top = Number(top) + offsetY;
+        }
+        pasteConfig.style = {
+          ...pasteConfig.style,
+          ...pastePosition
+        };
+      }
+      if (isPage(pasteConfig)) {
+        pasteConfig.name = generatePageNameByApp(editorService.get("root"));
+      }
+      return pasteConfig;
+    })
+  );
   return pasteConfigs;
 };
 const getPositionInContainer = (position = {}, id) => {
@@ -1051,28 +1059,31 @@ class Editor$1 extends BaseService {
   });
   isHistoryStateChange = false;
   constructor() {
-    super([
-      "getLayout",
-      "select",
-      "doAdd",
-      "add",
-      "doRemove",
-      "remove",
-      "doUpdate",
-      "update",
-      "sort",
-      "copy",
-      "paste",
-      "doPaste",
-      "duAlignCenter",
-      "alignCenter",
-      "moveLayer",
-      "moveToContainer",
-      "move",
-      "undo",
-      "redo",
-      "highlight"
-    ], ["select", "update", "moveLayer"]);
+    super(
+      [
+        "getLayout",
+        "select",
+        "doAdd",
+        "add",
+        "doRemove",
+        "remove",
+        "doUpdate",
+        "update",
+        "sort",
+        "copy",
+        "paste",
+        "doPaste",
+        "duAlignCenter",
+        "alignCenter",
+        "moveLayer",
+        "moveToContainer",
+        "move",
+        "undo",
+        "redo",
+        "highlight"
+      ],
+      ["select", "update", "moveLayer"]
+    );
   }
   set(name, value) {
     this.state[name] = value;
@@ -1144,11 +1155,15 @@ class Editor$1 extends BaseService {
       historyService.empty();
     }
     if (node?.id) {
-      this.get("stage")?.renderer.runtime?.getApp?.()?.emit("editor:select", {
-        node,
-        page,
-        parent
-      }, getNodePath(node.id, this.get("root").items));
+      this.get("stage")?.renderer.runtime?.getApp?.()?.emit(
+        "editor:select",
+        {
+          node,
+          page,
+          parent
+        },
+        getNodePath(node.id, this.get("root").items)
+      );
     }
     this.emit("select", node);
     return node;
@@ -1214,8 +1229,11 @@ class Editor$1 extends BaseService {
       parentId: parent.id,
       root: cloneDeep(root)
     });
-    node.style = fixNodePosition(node, parent, stage);
-    await stage?.update({ config: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
+    const newStyle = fixNodePosition(node, parent, stage);
+    if (newStyle && (newStyle.top !== node.style.top || newStyle.left !== node.style.left)) {
+      node.style = newStyle;
+      await stage?.update({ config: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
+    }
     this.addModifiedNodeId(node.id);
     return node;
   }
@@ -1230,12 +1248,14 @@ class Editor$1 extends BaseService {
     } else {
       addNodes.push(...addNode);
     }
-    const newNodes = await Promise.all(addNodes.map((node) => {
-      const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
-      if (!parentNode)
-        throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
-      return this.doAdd(node, parentNode);
-    }));
+    const newNodes = await Promise.all(
+      addNodes.map((node) => {
+        const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
+        if (!parentNode)
+          throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
+        return this.doAdd(node, parentNode);
+      })
+    );
     if (newNodes.length > 1) {
       const newNodeIds = newNodes.map((node) => node.id);
       stage?.multiSelect(newNodeIds);
@@ -1854,16 +1874,6 @@ const error = (...args) => {
   }
 };
 
-const DEFAULT_LEFT_COLUMN_WIDTH = 310;
-const MIN_LEFT_COLUMN_WIDTH = 45;
-const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-const MIN_RIGHT_COLUMN_WIDTH = 1;
-const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
-const defaultColumnWidth = {
-  left: DEFAULT_LEFT_COLUMN_WIDTH,
-  center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
-  right: DEFAULT_RIGHT_COLUMN_WIDTH
-};
 const state = reactive({
   uiSelectMode: false,
   showSrc: false,
@@ -1876,7 +1886,11 @@ const state = reactive({
     width: 375,
     height: 817
   },
-  columnWidth: defaultColumnWidth,
+  columnWidth: {
+    left: 0,
+    right: 0,
+    center: 0
+  },
   showGuides: true,
   showRule: true,
   propsPanelSize: "small",
@@ -1884,19 +1898,10 @@ const state = reactive({
 });
 class Ui extends BaseService {
   constructor() {
-    super(["initColumnWidth", "zoom", "calcZoom"]);
-    globalThis.addEventListener("resize", () => {
-      this.setColumnWidth({
-        center: "auto"
-      });
-    });
+    super(["zoom", "calcZoom"]);
   }
   set(name, value) {
     const mask = editorService.get("stage")?.mask;
-    if (name === "columnWidth") {
-      this.setColumnWidth(value);
-      return;
-    }
     if (name === "stageRect") {
       this.setStageRect(value);
       return;
@@ -1912,17 +1917,6 @@ class Ui extends BaseService {
   get(name) {
     return state[name];
   }
-  async initColumnWidth() {
-    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-    if (columnWidthCacheData) {
-      try {
-        const columnWidthCache = JSON.parse(columnWidthCacheData);
-        this.setColumnWidth(columnWidthCache);
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  }
   async zoom(zoom) {
     this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
     if (this.get("zoom") < 0.1)
@@ -1943,30 +1937,6 @@ class Ui extends BaseService {
   destroy() {
     this.removeAllListeners();
   }
-  setColumnWidth({ left, center, right }) {
-    const columnWidth = {
-      ...toRaw(this.get("columnWidth"))
-    };
-    if (left) {
-      columnWidth.left = Math.max(left, MIN_LEFT_COLUMN_WIDTH);
-    }
-    if (right) {
-      columnWidth.right = Math.max(right, MIN_RIGHT_COLUMN_WIDTH);
-    }
-    if (!center || center === "auto") {
-      const bodyWidth = globalThis.document.body.clientWidth;
-      columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
-      if (columnWidth.center <= 0) {
-        columnWidth.left = defaultColumnWidth.left;
-        columnWidth.center = defaultColumnWidth.center;
-        columnWidth.right = defaultColumnWidth.right;
-      }
-    } else {
-      columnWidth.center = center;
-    }
-    globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
-    state.columnWidth = columnWidth;
-  }
   async setStageRect(value) {
     state.stageRect = {
       ...state.stageRect,
@@ -2032,7 +2002,9 @@ const useStage = (stageOptions) => {
     uiService.set("showGuides", true);
     if (!root.value || !page.value)
       return;
-    const storageKey = getGuideLineKey(e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY);
+    const storageKey = getGuideLineKey(
+      e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY
+    );
     if (e.guides.length) {
       globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
     } else {
@@ -2042,7 +2014,7 @@ const useStage = (stageOptions) => {
   return stage;
 };
 
-const _sfc_main$k = defineComponent({
+const _sfc_main$l = defineComponent({
   components: { Plus },
   setup() {
     const services = inject("services");
@@ -2060,14 +2032,14 @@ const _sfc_main$k = defineComponent({
   }
 });
 
-const _hoisted_1$a = { class: "m-editor-empty-panel" };
-const _hoisted_2$4 = { class: "m-editor-empty-content" };
+const _hoisted_1$9 = { class: "m-editor-empty-panel" };
+const _hoisted_2$3 = { class: "m-editor-empty-content" };
 const _hoisted_3 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_plus = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$a, [
-    createElementVNode("div", _hoisted_2$4, [
+  return openBlock(), createElementBlock("div", _hoisted_1$9, [
+    createElementVNode("div", _hoisted_2$3, [
       createElementVNode("div", {
         class: "m-editor-empty-button",
         onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
@@ -2085,17 +2057,12 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$7]]);
+const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$5]]);
 
-const _sfc_main$j = defineComponent({
-  name: "m-editor-resize",
-  props: {
-    type: {
-      type: String
-    }
-  },
-  setup(props) {
-    const services = inject("services");
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  __name: "Resizer",
+  emits: ["change"],
+  setup(__props, { emit }) {
     const target = ref();
     let getso;
     onMounted(() => {
@@ -2105,124 +2072,220 @@ const _sfc_main$j = defineComponent({
         container: window,
         pinchOutside: true
       }).on("drag", (e) => {
-        if (!target.value || !services)
+        if (!target.value)
           return;
-        let { left, right } = {
-          ...toRaw(services.uiService.get("columnWidth"))
-        };
-        if (props.type === "left") {
-          left += e.deltaX;
-        } else if (props.type === "right") {
-          right -= e.deltaX;
-        }
-        services.uiService.set("columnWidth", {
-          left,
-          right
-        });
+        emit("change", e.deltaX);
       });
     });
     onUnmounted(() => {
       getso?.unset();
     });
-    return {
-      target
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        ref_key: "target",
+        ref: target,
+        class: "m-editor-resizer"
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512);
     };
   }
 });
 
-const _hoisted_1$9 = {
-  ref: "target",
-  class: "m-editor-resizer"
-};
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$9, [
-    renderSlot(_ctx.$slots, "default")
-  ], 512);
-}
-const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$6]]);
-
-const _sfc_main$i = defineComponent({
-  components: {
-    AddPageBox,
-    Resizer
-  },
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "Layout",
   props: {
-    codeOptions: {
-      type: Object,
-      default: () => ({})
-    }
+    left: null,
+    right: null,
+    minLeft: { default: 1 },
+    minRight: { default: 1 },
+    leftClass: null,
+    rightClass: null,
+    centerClass: null
   },
-  setup() {
-    const { editorService, uiService } = inject("services") || {};
-    const root = computed(() => editorService?.get("root"));
-    return {
-      root,
-      pageLength: computed(() => editorService?.get("pageLength") || 0),
-      showSrc: computed(() => uiService?.get("showSrc")),
-      columnWidth: computed(() => uiService?.get("columnWidth")),
-      saveCode(value) {
-        try {
-          editorService?.set("root", eval(value));
-        } catch (e) {
-          console.error(e);
-        }
+  emits: ["update:left", "change", "update:right"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const el = ref();
+    let clientWidth = 0;
+    const resizerObserver = new ResizeObserver((entries) => {
+      for (const { contentRect } of entries) {
+        clientWidth = contentRect.width;
+        center.value = clientWidth - (props.left || 0) - (props.right || 0);
+        emit("change", {
+          left: props.left,
+          center: center.value,
+          right: props.right
+        });
+      }
+    });
+    onMounted(() => {
+      if (el.value) {
+        resizerObserver.observe(el.value);
       }
+    });
+    onUnmounted(() => {
+      resizerObserver.disconnect();
+    });
+    const center = ref(0);
+    const changeLeft = (deltaX) => {
+      if (typeof props.left === "undefined")
+        return;
+      const left = Math.max(props.left + deltaX, props.minLeft) || 0;
+      emit("update:left", left);
+      center.value = clientWidth - left - (props.right || 0);
+      emit("change", {
+        left,
+        center: center.value,
+        right: props.right
+      });
+    };
+    const changeRight = (deltaX) => {
+      if (typeof props.right === "undefined")
+        return;
+      const right = Math.max(props.right - deltaX, props.minRight) || 0;
+      emit("update:right", right);
+      center.value = clientWidth - (props.left || 0) - right;
+      emit("change", {
+        left: props.left,
+        center: center.value,
+        right
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "el",
+        ref: el
+      }, [
+        typeof props.left !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("div", {
+            class: normalizeClass(["m-editor-layout-left", __props.leftClass]),
+            style: normalizeStyle(`width: ${__props.left}px`)
+          }, [
+            renderSlot(_ctx.$slots, "left")
+          ], 6),
+          createVNode(_sfc_main$k, { onChange: changeLeft })
+        ], 64)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
+          style: normalizeStyle(`width: ${center.value}px`)
+        }, [
+          renderSlot(_ctx.$slots, "center")
+        ], 6),
+        typeof props.right !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createVNode(_sfc_main$k, { onChange: changeRight }),
+          createElementVNode("div", {
+            class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
+            style: normalizeStyle(`width: ${__props.right}px`)
+          }, [
+            renderSlot(_ctx.$slots, "right")
+          ], 6)
+        ], 64)) : createCommentVNode("", true)
+      ], 512);
     };
   }
 });
 
 const _hoisted_1$8 = { class: "m-editor" };
-const _hoisted_2$3 = {
-  key: 1,
-  class: "m-editor-content"
-};
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_magic_code_editor = resolveComponent("magic-code-editor");
-  const _component_resizer = resolveComponent("resizer");
-  const _component_el_scrollbar = resolveComponent("el-scrollbar");
-  const _component_add_page_box = resolveComponent("add-page-box");
-  return openBlock(), createElementBlock("div", _hoisted_1$8, [
-    renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
-    _ctx.showSrc ? (openBlock(), createBlock(_component_magic_code_editor, {
-      key: 0,
-      class: "m-editor-content",
-      "init-values": _ctx.root,
-      options: _ctx.codeOptions,
-      onSave: _ctx.saveCode
-    }, null, 8, ["init-values", "options", "onSave"])) : (openBlock(), createElementBlock("div", _hoisted_2$3, [
-      createElementVNode("div", {
-        class: "m-editor-framework-left",
-        style: normalizeStyle(`width: ${_ctx.columnWidth?.left}px`)
-      }, [
-        renderSlot(_ctx.$slots, "sidebar")
-      ], 4),
-      createVNode(_component_resizer, { type: "left" }),
-      _ctx.pageLength > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        createElementVNode("div", {
-          class: "m-editor-framework-center",
-          style: normalizeStyle(`width: ${_ctx.columnWidth?.center}px`)
-        }, [
-          renderSlot(_ctx.$slots, "workspace")
-        ], 4),
-        createVNode(_component_resizer, { type: "right" }),
-        createElementVNode("div", {
-          class: "m-editor-framework-right",
-          style: normalizeStyle(`width: ${_ctx.columnWidth?.right}px`)
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "Framework",
+  props: {
+    codeOptions: { default: () => ({}) }
+  },
+  setup(__props) {
+    const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+    const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+    const { editorService, uiService } = inject("services") || {};
+    const root = computed(() => editorService?.get("root"));
+    const pageLength = computed(() => editorService?.get("pageLength") || 0);
+    const showSrc = computed(() => uiService?.get("showSrc"));
+    const columnWidth = ref({
+      left: DEFAULT_LEFT_COLUMN_WIDTH,
+      center: 0,
+      right: 0
+    });
+    uiService?.set("columnWidth", columnWidth.value);
+    watchEffect(() => {
+      if (pageLength.value <= 0) {
+        columnWidth.value.right = void 0;
+        columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH;
+      } else {
+        columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
+        columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH;
+      }
+    });
+    const saveCode = (value) => {
+      try {
+        editorService?.set("root", eval(value));
+      } catch (e) {
+        console.error(e);
+      }
+    };
+    const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
+    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
+    if (columnWidthCacheData) {
+      try {
+        const columnWidthCache = JSON.parse(columnWidthCacheData);
+        columnWidth.value = columnWidthCache;
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    const columnWidthChange = (columnWidth2) => {
+      uiService?.set("columnWidth", columnWidth2);
+      globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth2));
+    };
+    return (_ctx, _cache) => {
+      const _component_magic_code_editor = resolveComponent("magic-code-editor");
+      const _component_el_scrollbar = resolveComponent("el-scrollbar");
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+        renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
+        unref(showSrc) ? (openBlock(), createBlock(_component_magic_code_editor, {
+          key: 0,
+          class: "m-editor-content",
+          "init-values": unref(root),
+          options: __props.codeOptions,
+          onSave: saveCode
+        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$j, {
+          key: 1,
+          class: "m-editor-content",
+          "left-class": "m-editor-framework-left",
+          "center-class": "m-editor-framework-center",
+          "right-class": "m-editor-framework-right",
+          left: columnWidth.value.left,
+          "onUpdate:left": _cache[0] || (_cache[0] = ($event) => columnWidth.value.left = $event),
+          right: columnWidth.value.right,
+          "onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
+          "min-left": 45,
+          "min-right": 1,
+          onChange: columnWidthChange
+        }, createSlots({
+          left: withCtx(() => [
+            renderSlot(_ctx.$slots, "sidebar")
+          ]),
+          center: withCtx(() => [
+            unref(pageLength) > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+              createVNode(AddPageBox)
+            ])
+          ]),
+          _: 2
         }, [
-          createVNode(_component_el_scrollbar, null, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "props-panel")
-            ]),
-            _: 3
-          })
-        ], 4)
-      ], 64)) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-        createVNode(_component_add_page_box)
-      ])
-    ]))
-  ]);
-}
-const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$5]]);
+          unref(pageLength) > 0 ? {
+            name: "right",
+            fn: withCtx(() => [
+              createVNode(_component_el_scrollbar, null, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "props-panel")
+                ]),
+                _: 3
+              })
+            ])
+          } : void 0
+        ]), 1032, ["left", "right"]))
+      ]);
+    };
+  }
+});
 
 const _hoisted_1$7 = ["src"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
@@ -2464,7 +2527,13 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           });
           break;
         case "zoom":
-          config.push(...getConfig("zoom-out"), ...getConfig(`${parseInt(`${zoom.value * 100}`, 10)}%`), ...getConfig("zoom-in"), ...getConfig("scale-to-original"), ...getConfig("scale-to-fit"));
+          config.push(
+            ...getConfig("zoom-out"),
+            ...getConfig(`${parseInt(`${zoom.value * 100}`, 10)}%`),
+            ...getConfig("zoom-in"),
+            ...getConfig("scale-to-original"),
+            ...getConfig("scale-to-fit")
+          );
           break;
         case "delete":
           config.push({
@@ -2672,11 +2741,15 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const stageOptions = inject("stageOptions");
     const stage = computed(() => services?.editorService.get("stage"));
-    const list = computed(() => services?.componentListService.getList().map((group) => ({
-      ...group,
-      items: group.items.filter((item) => item.text.includes(searchText.value))
-    })));
-    const collapseValue = computed(() => Array(list.value?.length).fill(1).map((x, i) => i));
+    const list = computed(
+      () => services?.componentListService.getList().map((group) => ({
+        ...group,
+        items: group.items.filter((item) => item.text.includes(searchText.value))
+      }))
+    );
+    const collapseValue = computed(
+      () => Array(list.value?.length).fill(1).map((x, i) => i)
+    );
     let timeout;
     let clientX;
     let clientY;
@@ -2690,11 +2763,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const dragstartHandler = ({ text, type, data = {} }, e) => {
       if (e.dataTransfer) {
         e.dataTransfer.effectAllowed = "move";
-        e.dataTransfer.setData("data", serialize({
-          name: text,
-          type,
-          ...data
-        }).replace(/"(\w+)":\s/g, "$1: "));
+        e.dataTransfer.setData(
+          "data",
+          serialize({
+            name: text,
+            type,
+            ...data
+          }).replace(/"(\w+)":\s/g, "$1: ")
+        );
       }
     };
     const dragendHandler = () => {
@@ -2950,12 +3026,18 @@ const _sfc_main$b = defineComponent({
         ];
       }
       if (node.value?.items) {
-        return componentList.value.reduce((subMenuData, group, index) => subMenuData.concat(createMenuItems(group), index < componentList.value.length - 1 ? [
-          {
-            type: "divider",
-            direction: "horizontal"
-          }
-        ] : []), []) || [];
+        return componentList.value.reduce(
+          (subMenuData, group, index) => subMenuData.concat(
+            createMenuItems(group),
+            index < componentList.value.length - 1 ? [
+              {
+                type: "divider",
+                direction: "horizontal"
+              }
+            ] : []
+          ),
+          []
+        ) || [];
       }
       return [];
     });
@@ -3147,7 +3229,9 @@ const _sfc_main$a = defineComponent({
       clicked.value = !clicked.value;
     };
     const statusData = useStatus(tree, editorService);
-    const canHighlight = computed(() => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value);
+    const canHighlight = computed(
+      () => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value
+    );
     editorService?.on("remove", () => {
       setTimeout(() => {
         tree.value?.getNode(editorService.get("node").id)?.updateChildren();
@@ -3359,9 +3443,12 @@ const _sfc_main$8 = defineComponent({
   },
   setup(props) {
     const activeTabName = ref(props.data?.status);
-    watch(() => props.data?.status, (status) => {
-      activeTabName.value = status || "0";
-    });
+    watch(
+      () => props.data?.status,
+      (status) => {
+        activeTabName.value = status || "0";
+      }
+    );
     return {
       activeTabName
     };
@@ -3839,12 +3926,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const container = ref();
     const el = ref();
-    const style = computed(() => `
+    const style = computed(
+      () => `
         width: ${props.width}px;
         height: ${props.height}px;
         position: absolute;
         margin-top: 30px;
-      `);
+      `
+    );
     const scrollWidth = ref(0);
     const scrollHeight = ref(0);
     let scrollViewer;
@@ -3866,9 +3955,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     onUnmounted(() => {
       scrollViewer.destroy();
     });
-    watch(() => props.zoom, () => {
-      scrollViewer.setZoom(props.zoom);
-    });
+    watch(
+      () => props.zoom,
+      () => {
+        scrollViewer.setZoom(props.zoom);
+      }
+    );
     const vOffset = ref(0);
     const vScrollHandler = (delta) => {
       vOffset.value += delta;
@@ -4040,14 +4132,20 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       },
       ...stageContentMenu
     ]);
-    watch(parent, async () => {
-      if (!parent.value || !editorService)
-        return canCenter.value = false;
-      const layout = await editorService.getLayout(parent.value);
-      const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
-      const isTypeConform = nodes.value?.every((selectedNode) => ![NodeType.ROOT, NodeType.PAGE, "pop"].includes(`${selectedNode?.type}`));
-      canCenter.value = isLayoutConform && !!isTypeConform;
-    }, { immediate: true });
+    watch(
+      parent,
+      async () => {
+        if (!parent.value || !editorService)
+          return canCenter.value = false;
+        const layout = await editorService.getLayout(parent.value);
+        const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
+        const isTypeConform = nodes.value?.every(
+          (selectedNode) => ![NodeType.ROOT, NodeType.PAGE, "pop"].includes(`${selectedNode?.type}`)
+        );
+        canCenter.value = isLayoutConform && !!isTypeConform;
+      },
+      { immediate: true }
+    );
     const show = async (e) => {
       menu.value?.show(e);
       const data = await storageService.getItem(COPY_STORAGE_KEY);
@@ -4367,7 +4465,7 @@ const _sfc_main = defineComponent({
     Sidebar,
     Workspace: _sfc_main$1,
     PropsPanel: _sfc_main$e,
-    Framework
+    Framework: _sfc_main$i
   },
   props: {
     modelValue: {
@@ -4460,37 +4558,64 @@ const _sfc_main = defineComponent({
       }
       emit("update:modelValue", toRaw(editorService.get("root")));
     });
-    watch(() => props.modelValue, (modelValue) => editorService.set("root", modelValue), {
-      immediate: true
-    });
-    watch(() => props.componentGroupList, (componentGroupList) => componentListService.setList(componentGroupList), {
-      immediate: true
-    });
-    watch(() => props.propsConfigs, (configs) => propsService.setPropsConfigs(configs), {
-      immediate: true
-    });
-    watch(() => props.propsValues, (values) => propsService.setPropsValues(values), {
-      immediate: true
-    });
-    watch(() => props.eventMethodList, (eventMethodList) => {
-      const eventsList = {};
-      const methodsList = {};
-      Object.keys(eventMethodList).forEach((type) => {
-        eventsList[type] = eventMethodList[type].events;
-        methodsList[type] = eventMethodList[type].methods;
-      });
-      eventsService.setEvents(eventsList);
-      eventsService.setMethods(methodsList);
-    }, {
-      immediate: true
-    });
-    watch(() => props.defaultSelected, (defaultSelected) => defaultSelected && editorService.select(defaultSelected), {
-      immediate: true
-    });
-    watch(() => props.stageRect, (stageRect) => stageRect && uiService.set("stageRect", stageRect), {
-      immediate: true
-    });
-    uiService.initColumnWidth();
+    watch(
+      () => props.modelValue,
+      (modelValue) => editorService.set("root", modelValue),
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.componentGroupList,
+      (componentGroupList) => componentListService.setList(componentGroupList),
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.propsConfigs,
+      (configs) => propsService.setPropsConfigs(configs),
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.propsValues,
+      (values) => propsService.setPropsValues(values),
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.eventMethodList,
+      (eventMethodList) => {
+        const eventsList = {};
+        const methodsList = {};
+        Object.keys(eventMethodList).forEach((type) => {
+          eventsList[type] = eventMethodList[type].events;
+          methodsList[type] = eventMethodList[type].methods;
+        });
+        eventsService.setEvents(eventsList);
+        eventsService.setMethods(methodsList);
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.defaultSelected,
+      (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.stageRect,
+      (stageRect) => stageRect && uiService.set("stageRect", stageRect),
+      {
+        immediate: true
+      }
+    );
     onUnmounted(() => {
       editorService.destroy();
       historyService.destroy();
@@ -4511,18 +4636,21 @@ const _sfc_main = defineComponent({
     provide("services", services);
     provide("layerContentMenu", props.layerContentMenu);
     provide("stageContentMenu", props.stageContentMenu);
-    provide("stageOptions", reactive({
-      runtimeUrl: props.runtimeUrl,
-      autoScrollIntoView: props.autoScrollIntoView,
-      render: props.render,
-      moveableOptions: props.moveableOptions,
-      canSelect: props.canSelect,
-      updateDragEl: props.updateDragEl,
-      isContainer: props.isContainer,
-      containerHighlightClassName: props.containerHighlightClassName,
-      containerHighlightDuration: props.containerHighlightDuration,
-      containerHighlightType: props.containerHighlightType
-    }));
+    provide(
+      "stageOptions",
+      reactive({
+        runtimeUrl: props.runtimeUrl,
+        autoScrollIntoView: props.autoScrollIntoView,
+        render: props.render,
+        moveableOptions: props.moveableOptions,
+        canSelect: props.canSelect,
+        updateDragEl: props.updateDragEl,
+        isContainer: props.isContainer,
+        containerHighlightClassName: props.containerHighlightClassName,
+        containerHighlightDuration: props.containerHighlightDuration,
+        containerHighlightType: props.containerHighlightType
+      })
+    );
     return services;
   }
 });
@@ -4603,9 +4731,9 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(Editor.name, Editor);
-    app.component("m-fields-ui-select", _sfc_main$m);
-    app.component(CodeLink.name, CodeLink);
-    app.component(Code.name, Code);
+    app.component("m-fields-ui-select", _sfc_main$n);
+    app.component("m-fields-code-link", _sfc_main$o);
+    app.component("m-fields-vs-code", _sfc_main$p);
     app.component(CodeEditor.name, CodeEditor);
   }
 };