@tmagic/editor 1.3.13 → 1.3.14

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('@tmagic/design'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/form'), require('@tmagic/table'), require('@tmagic/utils'), require('gesto'), require('moveable'), require('@tmagic/dep'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
   typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', '@tmagic/design', 'emmet-monaco-es', 'monaco-editor', '@tmagic/schema', '@tmagic/form', '@tmagic/table', '@tmagic/utils', 'gesto', 'moveable', '@tmagic/dep', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.design, global.emmetMonacoEs, global.monaco, global.schema, global.form, global.table, global.utils, global.Gesto, global.Moveable, global.dep, global.StageCore, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, schema, form, table, utils, Gesto, Moveable, dep, StageCore, events, core, KeyController) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.design, global.emmetMonacoEs, global.monaco, global.schema, global.form, global.table, global.utils, global.Gesto, global.VanillaMoveable, global.dep, global.StageCore, global.events, global.core, global.KeyController));
+})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, schema, form, table, utils, Gesto, VanillaMoveable, dep, StageCore, events, core, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -367,13 +367,38 @@
         name: "hookData",
         enableToggleMode: false,
         expandAll: true,
-        titleKey: "codeId",
+        title: (mForm, { model, index }) => {
+          if (model.codeType === schema.HookCodeType.DATA_SOURCE_METHOD) {
+            if (Array.isArray(model.codeId)) {
+              const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
+              return `${ds?.title} / ${model.codeId[1]}`;
+            }
+            return Array.isArray(model.codeId) ? model.codeId.join("/") : index;
+          }
+          return model.codeId || index;
+        },
         items: [
           {
-            type: "code-select-col",
-            name: "codeId",
-            labelWidth: 0,
-            disabled: () => !services?.codeBlockService.getEditStatus()
+            type: "row",
+            items: [
+              {
+                type: "select",
+                name: "codeType",
+                span: 8,
+                options: [
+                  { value: schema.HookCodeType.CODE, text: "代码块" },
+                  { value: schema.HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
+                ],
+                defaultValue: "code"
+              },
+              {
+                type: (mForm, { model }) => model.codeType === schema.HookCodeType.DATA_SOURCE_METHOD ? "data-source-method-select" : "code-select-col",
+                name: "codeId",
+                span: 16,
+                labelWidth: 0,
+                disabled: () => !services?.codeBlockService.getEditStatus()
+              }
+            ]
           }
         ]
       }));
@@ -3464,8 +3489,8 @@
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
           paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
-            key: 0,
             name: "params",
+            key: _ctx.model[_ctx.name],
             model: _ctx.model,
             size: _ctx.size,
             "params-config": paramsConfig.value,
@@ -5681,7 +5706,7 @@
               ])
             ]),
             _: 1
-          }, 8, ["disabled"])) : _ctx.data.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.data.component), vue.normalizeProps(vue.mergeProps({ key: 4 }, _ctx.data.props || {})), null, 16)) : vue.createCommentVNode("", true)
+          }, 8, ["disabled"])) : _ctx.data.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.data.component), vue.mergeProps({ key: 4 }, _ctx.data.props || {}, vue.toHandlers(_ctx.data.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
         ], 34)) : vue.createCommentVNode("", true);
       };
     }
@@ -5957,7 +5982,7 @@
       );
       vue.watch(active, (active2) => {
         if (active2 === schema.NodeType.PAGE) {
-          if (!activePage.value) {
+          if (!activePage.value && !pageList.value.length) {
             editorService?.selectRoot();
             return;
           }
@@ -5965,11 +5990,11 @@
           return;
         }
         if (active2 === schema.NodeType.PAGE_FRAGMENT) {
-          if (!activePageFragment.value) {
+          if (!activePageFragment.value && !pageFragmentList.value.length) {
             editorService?.selectRoot();
             return;
           }
-          switchPage(activePageFragment.value);
+          switchPage(activePageFragment.value || pageFragmentList.value[0].id);
         }
       });
       const switchPage = (id) => {
@@ -6516,108 +6541,141 @@
     }
   });
 
+  const _hoisted_1$a = { class: "m-editor-float-box-body" };
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+    __name: "FloatingBox",
+    props: {
+      visible: { type: Boolean, default: false },
+      position: { default: () => ({ left: 0, top: 0 }) },
+      rect: { default: () => ({ width: "auto", height: "auto" }) },
+      title: { default: "" }
+    },
+    emits: ["update:visible"],
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const target = vue.ref();
+      const dragTarget = vue.ref();
+      const style = vue.computed(() => ({
+        left: `${props.position.left}px`,
+        top: `${props.position.top}px`,
+        width: typeof props.rect.width === "string" ? props.rect.width : `${props.rect.width}px`,
+        height: typeof props.rect.height === "string" ? props.rect.height : `${props.rect.height}px`
+      }));
+      let moveable = null;
+      const initMoveable = () => {
+        moveable = new VanillaMoveable(globalThis.document.body, {
+          className: "m-editor-floating-box-moveable",
+          target: target.value,
+          draggable: true,
+          resizable: true,
+          edge: true,
+          keepRatio: false,
+          origin: false,
+          snappable: true,
+          dragTarget: dragTarget.value,
+          dragTargetSelf: false,
+          linePadding: 10,
+          controlPadding: 10
+        });
+        moveable.on("drag", (e) => {
+          e.target.style.transform = e.transform;
+        });
+        moveable.on("resize", (e) => {
+          e.target.style.width = `${e.width}px`;
+          e.target.style.height = `${e.height}px`;
+          e.target.style.transform = e.drag.transform;
+        });
+      };
+      const destroyMoveable = () => {
+        moveable?.destroy();
+        moveable = null;
+      };
+      vue.watch(
+        () => props.visible,
+        async (visible) => {
+          if (visible) {
+            await vue.nextTick();
+            initMoveable();
+          } else {
+            destroyMoveable();
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+      vue.onBeforeUnmount(() => {
+        destroyMoveable();
+      });
+      const closeHandler = () => {
+        emit("update:visible", false);
+      };
+      __expose({
+        target
+      });
+      return (_ctx, _cache) => {
+        return _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          key: 0,
+          to: "body"
+        }, [
+          vue.createElementVNode("div", {
+            ref_key: "target",
+            ref: target,
+            class: "m-editor-float-box",
+            style: vue.normalizeStyle(style.value)
+          }, [
+            vue.createElementVNode("div", {
+              ref_key: "dragTarget",
+              ref: dragTarget,
+              class: "m-editor-float-box-title"
+            }, [
+              vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
+              ]),
+              vue.createElementVNode("div", null, [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  link: "",
+                  size: "small",
+                  icon: vue.unref(iconsVue.Close),
+                  onClick: closeHandler
+                }, null, 8, ["icon"])
+              ])
+            ], 512),
+            vue.createElementVNode("div", _hoisted_1$a, [
+              vue.renderSlot(_ctx.$slots, "body")
+            ])
+          ], 4)
+        ])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
   const useFloatBox = (slideKeys) => {
-    const services = vue.inject("services");
-    const moveable = vue.ref();
-    const floatBox = vue.ref();
-    const floatBoxStates = vue.computed(() => services?.uiService.get("floatBox"));
-    const curKey = vue.ref("");
-    const target = vue.computed(
-      () => floatBox.value ? floatBox.value.find((item) => item.classList.contains(`m-editor-float-box-${curKey.value}`)) : void 0
+    const floatBoxStates = vue.ref(
+      slideKeys.value.reduce(
+        (total, cur) => ({
+          ...total,
+          [cur]: {
+            status: false,
+            top: 0,
+            left: 0
+          }
+        }),
+        {}
+      )
     );
     const showingBoxKeys = vue.computed(
-      () => [...floatBoxStates.value?.keys() ?? []].filter((key) => floatBoxStates.value?.get(key)?.status)
+      () => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
     );
     const isDraging = vue.ref(false);
-    const showFloatBox = async (key) => {
-      const curBoxStatus = floatBoxStates.value?.get(curKey.value)?.status;
-      if (curKey.value === key && curBoxStatus)
-        return;
-      curKey.value = key;
-      setSlideState(key, {
-        zIndex: getMaxZIndex() + 1,
-        status: true
-      });
-      await vue.nextTick();
-      if (moveable.value) {
-        moveable.value.target = target.value;
-        moveable.value.dragTarget = getDragTarget();
-        moveable.value.updateRect();
-      } else {
-        initFloatBoxMoveable();
-      }
-    };
-    const setSlideState = (key, data) => {
-      const slideState = floatBoxStates.value?.get(key);
-      if (!slideState)
-        return;
-      floatBoxStates.value?.set(key, {
-        ...slideState,
-        ...data
-      });
-    };
-    const getDragTarget = (key) => `.m-editor-float-box-header-${key ?? curKey.value}`;
-    const closeFloatBox = (key) => {
-      setSlideState(key, {
-        status: false
-      });
-      if (!floatBoxStates.value?.values)
-        return;
-      const keys = [...floatBoxStates.value?.keys()];
-      const values = [...floatBoxStates.value?.values()];
-      const lastFloatBoxLen = values.filter((state) => state.status).length;
-      if (lastFloatBoxLen === 0) {
-        moveable.value?.destroy();
-        moveable.value = void 0;
-        return;
-      }
-      if (key === curKey.value) {
-        const zIndexList = values.filter((item) => item.status).map((item) => item.zIndex);
-        const maxZIndex = Math.max(...zIndexList);
-        const key2 = keys.find((key3) => floatBoxStates.value?.get(key3)?.zIndex === maxZIndex);
-        if (!key2)
-          return;
-        showFloatBox(key2);
-      }
-    };
-    const getMaxZIndex = () => {
-      if (!floatBoxStates.value?.values())
-        return 0;
-      const list = [...floatBoxStates.value?.values()].map((state) => state.zIndex);
-      return Math.max(...list) ?? 0;
-    };
-    const initFloatBoxMoveable = () => {
-      const dragTarget = getDragTarget();
-      moveable.value = new Moveable(document.body, {
-        target: target.value,
-        draggable: true,
-        resizable: true,
-        edge: true,
-        keepRatio: false,
-        origin: false,
-        snappable: true,
-        dragTarget,
-        dragTargetSelf: false,
-        linePadding: 10,
-        controlPadding: 10,
-        elementGuidelines: [...floatBoxStates.value?.keys() ?? []].map((key) => getDragTarget(key)),
-        bounds: { left: 0, top: 0, right: 0, bottom: 0, position: "css" }
-      });
-      moveable.value.on("drag", (e) => {
-        e.target.style.transform = e.transform;
-      });
-      moveable.value.on("resize", (e) => {
-        e.target.style.width = `${e.width}px`;
-        e.target.style.height = `${e.height}px`;
-        e.target.style.transform = e.drag.transform;
-      });
-    };
+    const dragstartHandler = () => isDraging.value = true;
     const dragendHandler = (key, e) => {
-      setSlideState(key, {
+      floatBoxStates.value[key] = {
         left: e.clientX,
-        top: e.clientY
-      });
-      showFloatBox(key);
+        top: e.clientY,
+        status: true
+      };
       isDraging.value = false;
     };
     document.body.addEventListener("dragover", (e) => {
@@ -6625,11 +6683,18 @@
         return;
       e.preventDefault();
     });
-    const dragstartHandler = () => isDraging.value = true;
     vue.watch(
       () => slideKeys.value,
       () => {
-        services?.uiService.setFloatBox(slideKeys.value);
+        for (const key in slideKeys.value) {
+          if (floatBoxStates.value[key])
+            continue;
+          floatBoxStates.value[key] = {
+            status: false,
+            top: 0,
+            left: 0
+          };
+        }
       },
       {
         deep: true,
@@ -6637,17 +6702,14 @@
       }
     );
     return {
-      showFloatBox,
-      closeFloatBox,
       dragstartHandler,
       dragendHandler,
       floatBoxStates,
-      floatBox,
       showingBoxKeys
     };
   };
 
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -6698,14 +6760,14 @@
     });
   };
 
-  const _hoisted_1$a = ["draggable", "data-node-id", "data-is-container"];
+  const _hoisted_1$9 = ["draggable", "data-node-id", "data-is-container"];
   const _hoisted_2$6 = { class: "tree-node-label" };
   const _hoisted_3$3 = { class: "tree-node-tool" };
   const _hoisted_4$3 = {
     key: 0,
     class: "m-editor-tree-node-children"
   };
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTreeNode"
     },
@@ -6815,18 +6877,18 @@
               }, 1032, ["data", "node-status-map", "indent"]);
             }), 128))
           ])) : vue.createCommentVNode("", true)
-        ], 40, _hoisted_1$a)), [
+        ], 40, _hoisted_1$9)), [
           [vue.vShow, visible.value]
         ]);
       };
     }
   });
 
-  const _hoisted_1$9 = {
+  const _hoisted_1$8 = {
     key: 1,
     class: "m-editor-tree-empty"
   };
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTree"
     },
@@ -6850,7 +6912,7 @@
           onDragover: handleDragOver
         }, [
           _ctx.data?.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.data, (item) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$o, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$n, {
               key: item.id,
               data: item,
               indent: _ctx.indent,
@@ -6867,7 +6929,7 @@
               ]),
               _: 2
             }, 1032, ["data", "indent", "node-status-map"]);
-          }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+          }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
             vue.createElementVNode("p", null, vue.toDisplayString(_ctx.emptyText), 1)
           ]))
         ], 32);
@@ -6947,7 +7009,7 @@
     };
   };
 
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
     },
@@ -7029,7 +7091,7 @@
         filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$n, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
           data: codeList.value,
           "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
@@ -7085,8 +7147,8 @@
     }
   });
 
-  const _hoisted_1$8 = { class: "search-wrapper" };
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$7 = { class: "search-wrapper" };
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
     },
@@ -7108,8 +7170,8 @@
           vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-                vue.createElementVNode("div", _hoisted_1$8, [
-                  vue.createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
+                vue.createElementVNode("div", _hoisted_1$7, [
+                  vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                   editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                     key: 0,
                     class: "create-code-button",
@@ -7125,7 +7187,7 @@
                   vue.renderSlot(_ctx.$slots, "code-block-panel-search")
                 ])
               ]),
-              vue.createVNode(_sfc_main$m, {
+              vue.createVNode(_sfc_main$l, {
                 ref_key: "codeBlockList",
                 ref: codeBlockList,
                 "custom-error": _ctx.customError,
@@ -7157,7 +7219,7 @@
     }
   });
 
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceConfigPanel"
     },
@@ -7213,7 +7275,7 @@
     }
   });
 
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceList"
     },
@@ -7302,7 +7364,7 @@
         filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$n, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
           data: list.value,
           "node-status-map": vue.unref(nodeStatusMap),
           onNodeClick: clickHandler
@@ -7355,9 +7417,9 @@
     }
   });
 
-  const _hoisted_1$7 = { class: "search-wrapper" };
+  const _hoisted_1$6 = { class: "search-wrapper" };
   const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
     },
@@ -7421,8 +7483,8 @@
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$7, [
-                vue.createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
+              vue.createElementVNode("div", _hoisted_1$6, [
+                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                 editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                   key: 0,
                   placement: "right"
@@ -7457,14 +7519,14 @@
                   _: 1
                 })) : vue.createCommentVNode("", true)
               ]),
-              vue.createVNode(_sfc_main$j, {
+              vue.createVNode(_sfc_main$i, {
                 onEdit: editHandler,
                 onRemove: removeHandler
               })
             ]),
             _: 1
           }),
-          vue.createVNode(_sfc_main$k, {
+          vue.createVNode(_sfc_main$j, {
             ref_key: "editDialog",
             ref: editDialog,
             disabled: !editable.value,
@@ -7478,7 +7540,7 @@
     }
   });
 
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorContentMenu"
     },
@@ -7644,7 +7706,7 @@
     }
   });
 
-  const _hoisted_1$6 = {
+  const _hoisted_1$5 = {
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -7664,14 +7726,14 @@
     _hoisted_2$4,
     _hoisted_3$2
   ];
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFolderMinusIcon"
     },
     __name: "FolderMinusIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, _hoisted_4$2);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$5, _hoisted_4$2);
       };
     }
   });
@@ -7749,7 +7811,7 @@
     };
   };
 
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerMenu"
     },
@@ -7816,7 +7878,7 @@
             {
               type: "button",
               text: "全部折叠",
-              icon: _sfc_main$g,
+              icon: _sfc_main$f,
               display: () => utils.isPage(node.value) || utils.isPageFragment(node.value),
               handler: () => {
                 emit("collapse-all");
@@ -7845,7 +7907,7 @@
         show
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$h, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$g, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu,
@@ -7855,7 +7917,7 @@
     }
   });
 
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "LayerNodeTool",
     props: {
       data: {}
@@ -7952,7 +8014,7 @@
     return {
       menu,
       nodeClickHandler,
-      nodeContentmenuHandler(event, data) {
+      nodeContentMenuHandler(event, data) {
         event.preventDefault();
         const nodes = services?.editorService.get("nodes") || [];
         if (nodes.length < 2 || !nodes.includes(data)) {
@@ -8278,12 +8340,12 @@
       () => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map()
     );
     vue.watch(
-      page,
-      (page2) => {
-        if (!page2) {
+      () => page.value?.id,
+      (pageId) => {
+        if (!pageId) {
           return;
         }
-        nodeStatusMaps.value.set(page2.id, createPageNodeStatus(page2, nodeStatusMaps.value.get(page2.id)));
+        nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value, nodeStatusMaps.value.get(pageId)));
       },
       {
         immediate: true
@@ -8311,6 +8373,8 @@
     );
     services?.editorService.on("add", (newNodes) => {
       newNodes.forEach((node) => {
+        if (utils.isPage(node) || utils.isPageFragment(node))
+          return;
         traverseNode(node, (node2) => {
           nodeStatusMap.value?.set(node2.id, {
             visible: true,
@@ -8334,7 +8398,7 @@
     };
   };
 
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerPanel"
     },
@@ -8376,15 +8440,15 @@
       const {
         menu,
         nodeClickHandler,
-        nodeContentmenuHandler,
+        nodeContentMenuHandler,
         highlightHandler: mouseenterHandler
       } = useClick(services, isCtrlKeyDown, nodeStatusMap);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$p, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
+            vue.createVNode(_sfc_main$o, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
               key: 0,
               tabindex: "-1",
               ref_key: "tree",
@@ -8395,7 +8459,7 @@
               onNodeDragstart: vue.unref(handleDragStart),
               onNodeDragleave: vue.unref(handleDragLeave),
               onNodeDragend: vue.unref(handleDragEnd),
-              onNodeContextmenu: vue.unref(nodeContentmenuHandler),
+              onNodeContextmenu: vue.unref(nodeContentMenuHandler),
               onNodeMouseenter: vue.unref(mouseenterHandler),
               onNodeClick: vue.unref(nodeClickHandler)
             }, {
@@ -8404,7 +8468,7 @@
               ]),
               "tree-node-tool": vue.withCtx(({ data: nodeData2 }) => [
                 vue.renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData2 }, () => [
-                  vue.createVNode(_sfc_main$e, { data: nodeData2 }, null, 8, ["data"])
+                  vue.createVNode(_sfc_main$d, { data: nodeData2 }, null, 8, ["data"])
                 ])
               ]),
               "tree-node-label": vue.withCtx(({ data: nodeData2 }) => [
@@ -8413,7 +8477,7 @@
               _: 3
             }, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-              vue.createVNode(_sfc_main$f, {
+              vue.createVNode(_sfc_main$e, {
                 ref_key: "menu",
                 ref: menu,
                 "layer-content-menu": _ctx.layerContentMenu,
@@ -8428,9 +8492,9 @@
     }
   });
 
-  const _hoisted_1$5 = ["onClick", "onDragstart"];
+  const _hoisted_1$4 = ["onClick", "onDragstart"];
   const _hoisted_2$3 = ["title"];
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorComponentListPanel"
     },
@@ -8510,7 +8574,7 @@
               "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$p, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
@@ -8549,7 +8613,7 @@
                                 title: item.text
                               }, vue.toDisplayString(item.text), 9, _hoisted_2$3)
                             ])
-                          ], 40, _hoisted_1$5);
+                          ], 40, _hoisted_1$4);
                         }), 128))
                       ]),
                       _: 2
@@ -8566,7 +8630,7 @@
     }
   });
 
-  const _hoisted_1$4 = {
+  const _hoisted_1$3 = {
     key: 0,
     class: "m-editor-sidebar"
   };
@@ -8576,10 +8640,8 @@
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  const _hoisted_5$1 = { class: "m-editor-float-box-list" };
-  const _hoisted_6 = ["onClick"];
-  const _hoisted_7 = { class: "m-editor-float-box-body" };
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_5$1 = { class: "m-editor-slide-list-box" };
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSidebar"
     },
@@ -8600,7 +8662,7 @@
             type: "component",
             icon: iconsVue.Goods,
             text: "组件",
-            component: _sfc_main$c,
+            component: _sfc_main$b,
             slots: {}
           },
           layer: {
@@ -8612,7 +8674,7 @@
               layerContentMenu: props.layerContentMenu,
               customContentMenu: props.customContentMenu
             },
-            component: _sfc_main$d,
+            component: _sfc_main$c,
             slots: {}
           },
           "code-block": {
@@ -8620,26 +8682,16 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$l,
-            slots: {},
-            boxComponentConfig: {
-              props: {
-                slideType: "box"
-              }
-            }
+            component: _sfc_main$k,
+            slots: {}
           },
           "data-source": {
             $key: "data-source",
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
-            component: _sfc_main$i,
-            slots: {},
-            boxComponentConfig: {
-              props: {
-                slideType: "box"
-              }
-            }
+            component: _sfc_main$h,
+            slots: {}
           }
         };
         return typeof data === "string" ? map[data] : data;
@@ -8652,7 +8704,7 @@
         }
       );
       const slideKeys = vue.computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key));
-      const { showFloatBox, closeFloatBox, dragstartHandler, dragendHandler, floatBoxStates, floatBox, showingBoxKeys } = useFloatBox(slideKeys);
+      const { dragstartHandler, dragendHandler, floatBoxStates, showingBoxKeys } = useFloatBox(slideKeys);
       vue.watch(
         () => showingBoxKeys.value.length,
         () => {
@@ -8676,7 +8728,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+          _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
             vue.createElementVNode("div", _hoisted_2$2, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
@@ -8694,7 +8746,7 @@
                   }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
                   config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
                 ], 42, _hoisted_3$1)), [
-                  [vue.vShow, !vue.unref(floatBoxStates)?.get(config.$key)?.status]
+                  [vue.vShow, !vue.unref(floatBoxStates)[config.$key]?.status]
                 ]);
               }), 128))
             ]),
@@ -8703,7 +8755,7 @@
                 class: "m-editor-sidebar-content",
                 key: config.$key ?? index
               }, [
-                config && !vue.unref(floatBoxStates)?.get(config.$key)?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
+                config && !vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({ key: 0 }, config.props || {}, vue.toHandlers(config?.listeners || {})), vue.createSlots({ _: 2 }, [
                   config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
                     name: "component-list-panel-header",
                     fn: vue.withCtx(() => [
@@ -8805,39 +8857,27 @@
             }), 128))
           ])) : vue.createCommentVNode("", true),
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-            vue.createElementVNode("div", _hoisted_5$1, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
-                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
+              return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
                   key: config.$key ?? index,
-                  ref_for: true,
-                  ref_key: "floatBox",
-                  ref: floatBox,
-                  class: vue.normalizeClass(["m-editor-float-box", `m-editor-float-box-${config.$key}`]),
-                  style: vue.normalizeStyle({
-                    left: `${vue.unref(floatBoxStates)?.get(config.$key)?.left}px`,
-                    top: `${vue.unref(floatBoxStates)?.get(config.$key)?.top}px`,
-                    zIndex: vue.unref(floatBoxStates)?.get(config.$key)?.zIndex
-                  })
-                }, [
-                  vue.createElementVNode("div", {
-                    class: vue.normalizeClass(["m-editor-float-box-header", `m-editor-float-box-header-${config.$key}`]),
-                    onClick: ($event) => vue.unref(showFloatBox)(config.$key)
-                  }, [
-                    vue.createElementVNode("div", null, vue.toDisplayString(config.text), 1),
-                    vue.createVNode(_sfc_main$O, {
-                      class: "m-editor-float-box-close",
-                      icon: vue.unref(iconsVue.Close),
-                      onClick: vue.withModifiers(($event) => vue.unref(closeFloatBox)(config.$key), ["stop"])
-                    }, null, 8, ["icon", "onClick"])
-                  ], 10, _hoisted_6),
-                  vue.createElementVNode("div", _hoisted_7, [
-                    config && vue.unref(floatBoxStates)?.get(config.$key)?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.boxComponentConfig?.component || config.component), vue.mergeProps({ key: 0 }, config.boxComponentConfig?.props || config.props || {}, vue.toHandlers(config?.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
-                  ])
-                ], 6)), [
-                  [vue.vShow, vue.unref(floatBoxStates)?.get(config.$key)?.status]
-                ]);
-              }), 128))
-            ])
+                  visible: vue.unref(floatBoxStates)[config.$key].status,
+                  "onUpdate:visible": ($event) => vue.unref(floatBoxStates)[config.$key].status = $event,
+                  title: config.text,
+                  position: {
+                    left: vue.unref(floatBoxStates)[config.$key].left,
+                    top: vue.unref(floatBoxStates)[config.$key].top
+                  }
+                }, {
+                  body: vue.withCtx(() => [
+                    vue.createElementVNode("div", _hoisted_5$1, [
+                      config && vue.unref(floatBoxStates)[config.$key].status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.boxComponentConfig?.component || config.component), vue.mergeProps({ key: 0 }, config.boxComponentConfig?.props || config.props || {}, vue.toHandlers(config?.listeners || {})), null, 16)) : vue.createCommentVNode("", true)
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["visible", "onUpdate:visible", "title", "position"])) : vue.createCommentVNode("", true)
+              ], 64);
+            }), 256))
           ]))
         ], 64);
       };
@@ -8972,7 +9012,7 @@
     };
   }
 
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollBar"
     },
@@ -9060,7 +9100,7 @@
     }
   });
 
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollViewer"
     },
@@ -9147,14 +9187,14 @@
             vue.renderSlot(_ctx.$slots, "default")
           ], 4),
           vue.renderSlot(_ctx.$slots, "content"),
-          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$a, {
+          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
             key: 0,
             "scroll-size": scrollHeight.value,
             pos: vOffset.value,
             size: _ctx.wrapHeight,
             onScroll: vScrollHandler
           }, null, 8, ["scroll-size", "pos", "size"])) : vue.createCommentVNode("", true),
-          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$a, {
+          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
             key: 1,
             "is-horizontal": true,
             "scroll-size": scrollWidth.value,
@@ -9370,116 +9410,6 @@
     return stage;
   };
 
-  const _hoisted_1$3 = { class: "m-editor-float-box-body" };
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
-    __name: "FloatingBox",
-    props: {
-      visible: { type: Boolean, default: false },
-      position: { default: () => ({ left: 0, top: 0 }) },
-      rect: { default: () => ({ width: "auto", height: "auto" }) },
-      title: { default: "" }
-    },
-    emits: ["update:visible"],
-    setup(__props, { expose: __expose, emit: __emit }) {
-      const props = __props;
-      const emit = __emit;
-      const target = vue.ref();
-      const dragTarget = vue.ref();
-      const style = vue.computed(() => ({
-        left: `${props.position.left}px`,
-        top: `${props.position.top}px`,
-        width: typeof props.rect.width === "string" ? props.rect.width : `${props.rect.width}px`,
-        height: typeof props.rect.height === "string" ? props.rect.height : `${props.rect.height}px`
-      }));
-      let moveable = null;
-      const initMoveable = () => {
-        moveable = new Moveable(globalThis.document.body, {
-          className: "m-editor-floating-box-moveable",
-          target: target.value,
-          draggable: true,
-          resizable: true,
-          edge: true,
-          keepRatio: false,
-          origin: false,
-          snappable: true,
-          dragTarget: dragTarget.value,
-          dragTargetSelf: false,
-          linePadding: 10,
-          controlPadding: 10
-        });
-        moveable.on("drag", (e) => {
-          e.target.style.transform = e.transform;
-        });
-        moveable.on("resize", (e) => {
-          e.target.style.width = `${e.width}px`;
-          e.target.style.height = `${e.height}px`;
-          e.target.style.transform = e.drag.transform;
-        });
-      };
-      const destroyMoveable = () => {
-        moveable?.destroy();
-        moveable = null;
-      };
-      vue.watch(
-        () => props.visible,
-        async (visible) => {
-          if (visible) {
-            await vue.nextTick();
-            initMoveable();
-          } else {
-            destroyMoveable();
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-      vue.onBeforeUnmount(() => {
-        destroyMoveable();
-      });
-      const closeHandler = () => {
-        emit("update:visible", false);
-      };
-      __expose({
-        target
-      });
-      return (_ctx, _cache) => {
-        return _ctx.visible ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
-          key: 0,
-          to: "body"
-        }, [
-          vue.createElementVNode("div", {
-            ref_key: "target",
-            ref: target,
-            class: "m-editor-float-box",
-            style: vue.normalizeStyle(style.value)
-          }, [
-            vue.createElementVNode("div", {
-              ref_key: "dragTarget",
-              ref: dragTarget,
-              class: "m-editor-float-box-title"
-            }, [
-              vue.renderSlot(_ctx.$slots, "title", {}, () => [
-                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
-              ]),
-              vue.createElementVNode("div", null, [
-                vue.createVNode(vue.unref(design.TMagicButton), {
-                  link: "",
-                  size: "small",
-                  icon: vue.unref(iconsVue.Close),
-                  onClick: closeHandler
-                }, null, 8, ["icon"])
-              ])
-            ], 512),
-            vue.createElementVNode("div", _hoisted_1$3, [
-              vue.renderSlot(_ctx.$slots, "body")
-            ])
-          ], 4)
-        ])) : vue.createCommentVNode("", true);
-      };
-    }
-  });
-
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "NodeListMenu",
     setup(__props) {
@@ -9562,7 +9492,7 @@
             ]),
             _: 1
           })) : vue.createCommentVNode("", true),
-          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
+          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
             key: 1,
             ref_key: "box",
             ref: box,
@@ -9572,7 +9502,7 @@
             position: menuPosition.value
           }, {
             body: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$n, {
+              vue.createVNode(_sfc_main$m, {
                 class: "m-editor-node-list-menu magic-editor-layer-tree",
                 data: nodeData.value,
                 "node-status-map": vue.unref(nodeStatusMap),
@@ -9821,7 +9751,7 @@
       };
       __expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$h, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$g, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu
@@ -9982,7 +9912,7 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$9, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$8, {
           class: "m-editor-stage",
           ref_key: "stageWrap",
           ref: stageWrap,
@@ -11168,7 +11098,7 @@
           ]),
           sidebar: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "sidebar", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$b, {
+              vue.createVNode(_sfc_main$a, {
                 data: _ctx.sidebar,
                 "layer-content-menu": _ctx.layerContentMenu,
                 "custom-content-menu": _ctx.customContentMenu
@@ -11299,14 +11229,14 @@
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
   exports.CodeBlockEditor = _sfc_main$Q;
-  exports.CodeBlockList = _sfc_main$m;
-  exports.CodeBlockListPanel = _sfc_main$l;
+  exports.CodeBlockList = _sfc_main$l;
+  exports.CodeBlockListPanel = _sfc_main$k;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
   exports.CodeSelect = _sfc_main$R;
   exports.CodeSelectCol = _sfc_main$N;
   exports.ColumnLayout = ColumnLayout;
-  exports.ComponentListPanel = _sfc_main$c;
-  exports.ContentMenu = _sfc_main$h;
+  exports.ComponentListPanel = _sfc_main$b;
+  exports.ContentMenu = _sfc_main$g;
   exports.DataSourceFieldSelect = _sfc_main$L;
   exports.DataSourceFields = _sfc_main$M;
   exports.DataSourceInput = _sfc_main$K;
@@ -11323,7 +11253,7 @@
   exports.KeyValue = _sfc_main$D;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
-  exports.LayerPanel = _sfc_main$d;
+  exports.LayerPanel = _sfc_main$c;
   exports.Layout = Layout;
   exports.LayoutContainer = _sfc_main$z;
   exports.PageFragmentSelect = _sfc_main$C;