@tmagic/editor 1.3.1 → 1.3.3

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('monaco-editor'), require('serialize-javascript'), require('@tmagic/design'), require('@tmagic/schema'), require('@tmagic/form'), require('@tmagic/table'), require('@tmagic/utils'), require('gesto'), require('@tmagic/stage'), require('events'), require('@tmagic/core'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'monaco-editor', 'serialize-javascript', '@tmagic/design', '@tmagic/schema', '@tmagic/form', '@tmagic/table', '@tmagic/utils', 'gesto', '@tmagic/stage', 'events', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.monaco, global.serialize, global.design, global.schema, global.form, global.table, global.utils, global.Gesto, global.StageCore, global.events, global.core, global.KeyController));
-})(this, (function (exports, vue, iconsVue, lodashEs, monaco, serialize, design, schema, form, table, utils, Gesto, StageCore, events, core, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('monaco-editor'), require('serialize-javascript'), require('@tmagic/design'), 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', 'monaco-editor', 'serialize-javascript', '@tmagic/design', '@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.monaco, global.serialize, global.design, 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, monaco, serialize, design, schema, form, table, utils, Gesto, Moveable, dep, StageCore, events, core, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -50,8 +50,9 @@
       parse: { type: Boolean, default: false }
     },
     emits: ["initd", "save"],
-    setup(__props, { expose: __expose, emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const toString = (v, language) => {
         let value = "";
         if (typeof v !== "string") {
@@ -234,7 +235,8 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
       const props = __props;
       const save = (v) => {
         props.model[props.name] = v;
@@ -273,8 +275,9 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const formConfig = vue.computed(() => {
         const { codeOptions, ...config } = props.config;
         return {
@@ -352,9 +355,10 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
-      const props = __props;
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
       const services = vue.inject("services");
+      const props = __props;
       const codeConfig = vue.computed(() => ({
         type: "group-list",
         name: "hookData",
@@ -420,11 +424,13 @@
       content: {},
       disabled: { type: Boolean },
       isDataSource: { type: Boolean },
-      dataSourceType: {}
+      dataSourceType: {},
+      slideType: {}
     },
     emits: ["submit"],
-    setup(__props, { expose: __expose, emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const services = vue.inject("services");
       const difVisible = vue.ref(false);
       const height = vue.ref(globalThis.innerHeight);
@@ -591,7 +597,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createVNode(vue.unref(form.MFormDrawer), {
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.slideType === "box" ? vue.unref(form.MFormBox) : vue.unref(form.MFormDrawer)), {
             class: "m-editor-code-block-editor",
             ref_key: "fomDrawer",
             ref: fomDrawer,
@@ -622,7 +628,7 @@
               })
             ]),
             _: 1
-          }, 8, ["title", "width", "config", "values", "disabled"]),
+          }, 40, ["title", "width", "config", "values", "disabled"])),
           vue.createVNode(vue.unref(design.TMagicDialog), {
             modelValue: difVisible.value,
             "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => difVisible.value = $event),
@@ -1131,12 +1137,14 @@
       };
       this.get("dataSources").push(newConfig);
       this.emit("add", newConfig);
+      return newConfig;
     }
     update(config) {
       const dataSources = this.get("dataSources");
       const index = dataSources.findIndex((ds) => ds.id === config.id);
       dataSources[index] = lodashEs.cloneDeep(config);
       this.emit("update", config);
+      return config;
     }
     remove(id) {
       const dataSources = this.get("dataSources");
@@ -1559,14 +1567,6 @@
     KeyBindingCommand2["SWITCH_NODE"] = "tmagic-system-switch-node";
     return KeyBindingCommand2;
   })(KeyBindingCommand || {});
-  var DepTargetType = /* @__PURE__ */ ((DepTargetType2) => {
-    DepTargetType2["DEFAULT"] = "default";
-    DepTargetType2["CODE_BLOCK"] = "code-block";
-    DepTargetType2["DATA_SOURCE"] = "data-source";
-    DepTargetType2["DATA_SOURCE_METHOD"] = "data-source-method";
-    DepTargetType2["DATA_SOURCE_COND"] = "data-source-cond";
-    return DepTargetType2;
-  })(DepTargetType || {});
   var DragType = /* @__PURE__ */ ((DragType2) => {
     DragType2["COMPONENT_LIST"] = "component-list";
     DragType2["LAYER_TREE"] = "layer-tree";
@@ -2986,8 +2986,9 @@
       paramsConfig: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const form$1 = vue.ref();
       const getFormConfig = (items = []) => [
         {
@@ -3111,6 +3112,7 @@
       if (!codeId.value)
         return;
       await codeBlockService?.setCodeDslById(codeId.value, values);
+      design.tMagicMessage.success("代码块保存成功");
       codeBlockEditor.value?.hide();
     };
     return {
@@ -3143,9 +3145,10 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
-      const props = __props;
+    setup(__props, { emit: __emit }) {
       const services = vue.inject("services");
+      const emit = __emit;
+      const props = __props;
       const getParamItemsConfig = (codeId) => {
         if (!codeDsl.value || !codeId)
           return [];
@@ -3254,8 +3257,9 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const services = vue.inject("services");
       const addDialog = vue.ref();
       const fieldValues = vue.ref({});
@@ -3539,9 +3543,10 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
-      const props = __props;
+    setup(__props, { emit: __emit }) {
       const services = vue.inject("services");
+      const emit = __emit;
+      const props = __props;
       const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources"));
       const getOptionChildren = (fields = []) => fields.map((field) => ({
         label: field.title || field.name,
@@ -3599,8 +3604,9 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const { dataSourceService } = vue.inject("services") || {};
       const autocomplete = vue.ref();
       const isFocused = vue.ref(false);
@@ -3908,8 +3914,9 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
       const methodColumns = [
         {
@@ -4013,10 +4020,11 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
-      const props = __props;
+    setup(__props, { emit: __emit }) {
       const services = vue.inject("services");
+      const emit = __emit;
       const dataSourceService = services?.dataSourceService;
+      const props = __props;
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources"));
       const getParamItemsConfig = ([dataSourceId, medthodName] = ["", ""]) => {
         if (!dataSourceId)
@@ -4134,8 +4142,9 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const services = vue.inject("services");
       const width = vue.computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
       const addDialog = vue.ref();
@@ -4365,18 +4374,20 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
       const props = __props;
       const { dataSourceService } = vue.inject("services") || {};
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
       const selectConfig = vue.computed(() => {
-        const { type, dataSourceType, ...config } = props.config;
+        const { type, dataSourceType, value, ...config } = props.config;
+        const valueIsId = props.config.value === "id";
         return {
           ...config,
           type: "select",
           valueKey: "dataSourceId",
-          options: dataSources.value.filter((ds) => !dataSourceType || ds.type === dataSourceType).map((ds) => ({
-            value: {
+          options: dataSources.value.filter((ds) => !props.config.dataSourceType || ds.type === props.config.dataSourceType).map((ds) => ({
+            value: valueIsId ? ds.id : {
               isBindDataSource: true,
               dataSourceType: ds.type,
               dataSourceId: ds.id
@@ -4425,8 +4436,9 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const dataSourceService = services?.dataSourceService;
@@ -4689,8 +4701,9 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const records = vue.ref([]);
       vue.watchEffect(() => {
         records.value = Object.entries(props.model[props.name] || {});
@@ -4793,8 +4806,9 @@
       lastValues: {}
     },
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const services = vue.inject("services");
       const mForm = vue.inject("mForm");
       const val = vue.computed(() => props.model[props.name]);
@@ -4968,7 +4982,8 @@
     },
     __name: "Resizer",
     emits: ["change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
       const target = vue.ref();
       const { isDraging } = useGetSo(target, emit);
       return (_ctx, _cache) => {
@@ -4999,7 +5014,8 @@
       centerClass: {}
     },
     emits: ["update:left", "change", "update:right"],
-    setup(__props, { expose: __expose, emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const emit = __emit;
       const props = __props;
       const el = vue.ref();
       const hasLeft = vue.computed(() => typeof props.left !== "undefined");
@@ -5188,7 +5204,8 @@
       const root = vue.computed(() => editorService?.get("root"));
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
       const showSrc = vue.computed(() => uiService?.get("showSrc"));
-      const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
+      const getLeftColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
+      const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
       const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
       const columnWidth = vue.ref({
         left: leftColumnWidthCacheData,
@@ -5218,6 +5235,12 @@
           globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
         }
       );
+      vue.watch(
+        () => uiService?.get("hideSlideBar"),
+        (hideSlideBar) => {
+          columnWidth.value.left = hideSlideBar ? 0 : getLeftColumnWidthCacheData();
+        }
+      );
       const columnWidthChange = (columnW) => {
         columnWidth.value.left = columnW.left;
         columnWidth.value.center = columnW.center;
@@ -5646,7 +5669,8 @@
       extendState: { type: Function }
     },
     emits: ["mounted"],
-    setup(__props, { expose: __expose, emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const emit = __emit;
       const internalInstance = vue.getCurrentInstance();
       const values = vue.ref({});
       const configForm = vue.ref();
@@ -5710,13 +5734,145 @@
     }
   });
 
+  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 showingBoxKeys = vue.computed(
+      () => [...floatBoxStates.value?.keys() ?? []].filter((key) => floatBoxStates.value?.get(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 dragendHandler = (key, e) => {
+      setSlideState(key, {
+        left: e.clientX,
+        top: e.clientY
+      });
+      showFloatBox(key);
+      isDraging.value = false;
+    };
+    document.body.addEventListener("dragover", (e) => {
+      if (!isDraging.value)
+        return;
+      e.preventDefault();
+    });
+    const dragstartHandler = () => isDraging.value = true;
+    vue.watch(
+      () => slideKeys.value,
+      () => {
+        services?.uiService.setFloatBox(slideKeys.value);
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    return {
+      showFloatBox,
+      closeFloatBox,
+      dragstartHandler,
+      dragendHandler,
+      floatBoxStates,
+      floatBox,
+      showingBoxKeys
+    };
+  };
+
   const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
     __name: "SearchInput",
     emits: ["search"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
       const filterText = vue.ref("");
       let timer = null;
       const filterTextChangeHandler = () => {
@@ -5812,11 +5968,12 @@
       customError: { type: Function }
     },
     emits: ["edit", "remove"],
-    setup(__props, { expose: __expose, emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const { codeBlockService, depService, editorService } = vue.inject("services") || {};
       const codeList = vue.computed(
-        () => Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
+        () => Object.values(depService?.getTargets(dep.DepTargetType.CODE_BLOCK) || {}).map((target) => {
           const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
             name: dep.name,
             type: "node",
@@ -5967,7 +6124,8 @@
     },
     __name: "CodeBlockListPanel",
     props: {
-      customError: { type: Function }
+      customError: { type: Function },
+      slideType: {}
     },
     setup(__props) {
       const { codeBlockService } = vue.inject("services") || {};
@@ -5978,52 +6136,55 @@
         codeBlockList.value?.filter(val);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
-          default: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              vue.createElementVNode("div", _hoisted_1$f, [
-                vue.createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
-                editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                  key: 0,
-                  class: "create-code-button",
-                  type: "primary",
-                  size: "small",
-                  onClick: vue.unref(createCodeBlock)
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode("新增")
-                  ]),
-                  _: 1
-                }, 8, ["onClick"])) : vue.createCommentVNode("", true),
-                vue.renderSlot(_ctx.$slots, "code-block-panel-search")
-              ])
-            ]),
-            vue.createVNode(_sfc_main$r, {
-              ref_key: "codeBlockList",
-              ref: codeBlockList,
-              "custom-error": _ctx.customError,
-              onEdit: vue.unref(editCode),
-              onRemove: vue.unref(deleteCode)
-            }, {
-              "code-block-panel-tool": vue.withCtx(({ id, data }) => [
-                vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                  id,
-                  data
-                })
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
+                vue.createElementVNode("div", _hoisted_1$f, [
+                  vue.createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
+                  editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                    key: 0,
+                    class: "create-code-button",
+                    type: "primary",
+                    size: "small",
+                    onClick: vue.unref(createCodeBlock)
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode("新增")
+                    ]),
+                    _: 1
+                  }, 8, ["onClick"])) : vue.createCommentVNode("", true),
+                  vue.renderSlot(_ctx.$slots, "code-block-panel-search")
+                ])
               ]),
-              _: 3
-            }, 8, ["custom-error", "onEdit", "onRemove"]),
-            vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
-              key: 0,
-              ref_key: "codeBlockEditor",
-              ref: codeBlockEditor,
-              disabled: !editable.value,
-              content: vue.unref(codeConfig),
-              onSubmit: vue.unref(submitCodeBlockHandler)
-            }, null, 8, ["disabled", "content", "onSubmit"])) : vue.createCommentVNode("", true)
-          ]),
-          _: 3
-        });
+              vue.createVNode(_sfc_main$r, {
+                ref_key: "codeBlockList",
+                ref: codeBlockList,
+                "custom-error": _ctx.customError,
+                onEdit: vue.unref(editCode),
+                onRemove: vue.unref(deleteCode)
+              }, {
+                "code-block-panel-tool": vue.withCtx(({ id, data }) => [
+                  vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                    id,
+                    data
+                  })
+                ]),
+                _: 3
+              }, 8, ["custom-error", "onEdit", "onRemove"])
+            ]),
+            _: 3
+          }),
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+            key: 0,
+            ref_key: "codeBlockEditor",
+            ref: codeBlockEditor,
+            disabled: !editable.value,
+            content: vue.unref(codeConfig),
+            slideType: _ctx.slideType,
+            onSubmit: vue.unref(submitCodeBlockHandler)
+          }, null, 8, ["disabled", "content", "slideType", "onSubmit"])) : vue.createCommentVNode("", true)
+        ], 64);
       };
     }
   });
@@ -6036,11 +6197,13 @@
     props: {
       title: {},
       values: {},
-      disabled: { type: Boolean }
+      disabled: { type: Boolean },
+      slideType: {}
     },
     emits: ["submit"],
-    setup(__props, { expose: __expose, emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const services = vue.inject("services");
       const size = vue.computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
       const fomDrawer = vue.ref();
@@ -6065,7 +6228,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(form.MFormDrawer), {
+        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.slideType === "box" ? vue.unref(form.MFormBox) : vue.unref(form.MFormDrawer)), {
           ref_key: "fomDrawer",
           ref: fomDrawer,
           "label-width": "80px",
@@ -6077,7 +6240,7 @@
           disabled: _ctx.disabled,
           onSubmit: submitHandler,
           onError: errorHandler
-        }, null, 8, ["title", "width", "config", "values", "disabled"]);
+        }, null, 40, ["title", "width", "config", "values", "disabled"]);
       };
     }
   });
@@ -6094,13 +6257,14 @@
     },
     __name: "DataSourceList",
     emits: ["edit", "remove"],
-    setup(__props, { expose: __expose, emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const emit = __emit;
       const { depService, editorService, dataSourceService } = vue.inject("services") || {};
       const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
-      const dsDep = vue.computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) || {});
-      const dsMethodDep = vue.computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_METHOD) || {});
-      const dsCondDep = vue.computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_COND) || {});
+      const dsDep = vue.computed(() => depService?.getTargets(dep.DepTargetType.DATA_SOURCE) || {});
+      const dsMethodDep = vue.computed(() => depService?.getTargets(dep.DepTargetType.DATA_SOURCE_METHOD) || {});
+      const dsCondDep = vue.computed(() => depService?.getTargets(dep.DepTargetType.DATA_SOURCE_COND) || {});
       const getKeyTreeConfig = (dep, type) => dep.keys.map((key) => ({ name: key, id: key, type: "key", isMethod: type === "method", isCond: type === "cond" }));
       const getNodeTreeConfig = (id, dep, type) => ({
         name: dep.name,
@@ -6120,9 +6284,9 @@
       };
       const list = vue.computed(
         () => dataSources.value.map((ds) => {
-          const dsDeps = dsDep.value[ds.id].deps;
-          const dsMethodDeps = dsMethodDep.value[ds.id].deps;
-          const dsCondDeps = dsCondDep.value[ds.id].deps;
+          const dsDeps = dsDep.value[ds.id]?.deps || {};
+          const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
+          const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
           const children = [];
           mergeChildren(children, dsDeps);
           mergeChildren(children, dsMethodDeps, "method");
@@ -6244,6 +6408,9 @@
       name: "MEditorDataSourceListPanel"
     },
     __name: "DataSourceListPanel",
+    props: {
+      slideType: {}
+    },
     setup(__props) {
       const { dataSourceService } = vue.inject("services") || {};
       const editDialog = vue.ref();
@@ -6278,7 +6445,7 @@
         dataSourceValues.value = {
           ...dataSourceService?.getDataSourceById(id)
         };
-        dialogTitle.value = `新增${dataSourceValues.value.title || ""}`;
+        dialogTitle.value = `编辑${dataSourceValues.value.title || ""}`;
         editDialog.value.show();
       };
       const removeHandler = (id) => {
@@ -6297,64 +6464,62 @@
         dataSourceList.value?.filter(val);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$d, [
-              vue.createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
-              editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
-                key: 0,
-                placement: "right"
-              }, {
-                reference: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(design.TMagicButton), {
-                    type: "primary",
-                    size: "small"
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode("新增")
-                    ]),
-                    _: 1
-                  })
-                ]),
-                default: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_2$a, [
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                      return vue.openBlock(), vue.createBlock(_sfc_main$x, {
-                        data: {
-                          type: "button",
-                          text: item.text,
-                          handler: () => {
-                            addHandler(item.type);
-                          }
-                        },
-                        key: index
-                      }, null, 8, ["data"]);
-                    }), 128))
-                  ])
-                ]),
-                _: 1
-              })) : vue.createCommentVNode("", true)
-            ]),
-            vue.createVNode(_sfc_main$o, {
-              onEdit: editHandler,
-              onRemove: removeHandler
-            }, {
-              "data-source-panel-tool": vue.withCtx(({ data }) => [
-                vue.renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_1$d, [
+                vue.createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
+                editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
+                  key: 0,
+                  placement: "right"
+                }, {
+                  reference: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(design.TMagicButton), {
+                      type: "primary",
+                      size: "small"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode("新增")
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("div", _hoisted_2$a, [
+                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
+                        return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                          data: {
+                            type: "button",
+                            text: item.text,
+                            handler: () => {
+                              addHandler(item.type);
+                            }
+                          },
+                          key: index
+                        }, null, 8, ["data"]);
+                      }), 128))
+                    ])
+                  ]),
+                  _: 1
+                })) : vue.createCommentVNode("", true)
               ]),
-              _: 3
-            }),
-            vue.createVNode(_sfc_main$p, {
-              ref_key: "editDialog",
-              ref: editDialog,
-              disabled: !editable.value,
-              values: dataSourceValues.value,
-              title: dialogTitle.value,
-              onSubmit: submitDataSourceHandler
-            }, null, 8, ["disabled", "values", "title"])
-          ]),
-          _: 3
-        });
+              vue.createVNode(_sfc_main$o, {
+                onEdit: editHandler,
+                onRemove: removeHandler
+              })
+            ]),
+            _: 1
+          }),
+          vue.createVNode(_sfc_main$p, {
+            ref_key: "editDialog",
+            ref: editDialog,
+            disabled: !editable.value,
+            values: dataSourceValues.value,
+            title: dialogTitle.value,
+            slideType: _ctx.slideType,
+            onSubmit: submitDataSourceHandler
+          }, null, 8, ["disabled", "values", "title", "slideType"])
+        ], 64);
       };
     }
   });
@@ -6388,9 +6553,9 @@
       indent: { default: 0 }
     },
     emits: ["node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
-    setup(__props, { emit }) {
-      const props = __props;
+    setup(__props, { emit: __emit }) {
       const treeEmit = vue.inject("treeEmit");
+      const props = __props;
       const nodeStatus = vue.computed(
         () => props.nodeStatusMap?.get(props.data.id) || {
           selected: false,
@@ -6500,7 +6665,8 @@
       emptyText: { default: "暂无数据" }
     },
     emits: ["node-dragover", "node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
       vue.provide("treeEmit", emit);
       const handleDragOver = (event) => {
         emit("node-dragover", event);
@@ -6545,8 +6711,9 @@
       autoHide: { type: Boolean, default: true }
     },
     emits: ["hide", "show", "mouseenter"],
-    setup(__props, { expose: __expose, emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const menu = vue.ref();
       const buttons = vue.ref();
       const subMenu = vue.ref();
@@ -6814,8 +6981,9 @@
       layerContentMenu: {}
     },
     emits: ["collapse-all"],
-    setup(__props, { expose: __expose, emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const services = vue.inject("services");
       const menu = vue.ref();
       const node = vue.computed(() => services?.editorService.get("node"));
@@ -7098,6 +7266,9 @@
         return;
       removeStatusClass(dragState.container);
       if (node && dragState.dragOverNodeId && dragState.dropType && services) {
+        if (dragState.dragOverNodeId === node.id) {
+          return;
+        }
         const targetInfo = services.editorService.getNodeInfo(dragState.dragOverNodeId, false);
         const targetNode = targetInfo.node;
         let targetParent = targetInfo.parent;
@@ -7333,7 +7504,7 @@
     };
   };
 
-  const createPageNodeStatus = (services, pageId) => {
+  const createPageNodeStatus = (services, pageId, initalLayerNodeStatus) => {
     const map = /* @__PURE__ */ new Map();
     map.set(pageId, {
       visible: true,
@@ -7343,12 +7514,15 @@
     });
     services?.editorService.getNodeById(pageId)?.items.forEach(
       (node) => traverseNode(node, (node2) => {
-        map.set(node2.id, {
-          visible: true,
-          expand: false,
-          selected: false,
-          draggable: true
-        });
+        map.set(
+          node2.id,
+          initalLayerNodeStatus?.get(node2.id) || {
+            visible: true,
+            expand: false,
+            selected: false,
+            draggable: true
+          }
+        );
       })
     );
     return map;
@@ -7360,12 +7534,12 @@
       () => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map()
     );
     vue.watch(
-      () => page.value?.id,
-      (pageId) => {
-        if (!pageId || nodeStatusMaps.value.has(pageId)) {
+      page,
+      (page2) => {
+        if (!page2) {
           return;
         }
-        nodeStatusMaps.value.set(pageId, createPageNodeStatus(services, pageId));
+        nodeStatusMaps.value.set(page2.id, createPageNodeStatus(services, page2.id, nodeStatusMaps.value.get(page2.id)));
       },
       {
         immediate: true
@@ -7638,11 +7812,14 @@
     class: "m-editor-sidebar"
   };
   const _hoisted_2$6 = { class: "m-editor-sidebar-header" };
-  const _hoisted_3$3 = ["onClick"];
+  const _hoisted_3$3 = ["onClick", "onDragend"];
   const _hoisted_4$3 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
+  const _hoisted_5$3 = { class: "m-editor-float-box-list" };
+  const _hoisted_6$2 = ["onClick"];
+  const _hoisted_7 = { class: "m-editor-float-box-body" };
   const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSidebar"
@@ -7654,6 +7831,7 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
+      const services = vue.inject("services");
       const activeTabName = vue.ref(props.data?.status);
       const getItemConfig = (data) => {
         const map = {
@@ -7682,7 +7860,12 @@
             icon: iconsVue.EditPen,
             text: "代码编辑",
             component: _sfc_main$q,
-            slots: {}
+            slots: {},
+            boxComponentConfig: {
+              props: {
+                slideType: "box"
+              }
+            }
           },
           "data-source": {
             $key: "data-source",
@@ -7690,7 +7873,12 @@
             icon: iconsVue.Coin,
             text: "数据源",
             component: _sfc_main$n,
-            slots: {}
+            slots: {},
+            boxComponentConfig: {
+              props: {
+                slideType: "box"
+              }
+            }
           }
         };
         return typeof data === "string" ? map[data] : data;
@@ -7702,119 +7890,182 @@
           activeTabName.value = status || "0";
         }
       );
+      const slideKeys = vue.computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key));
+      const { showFloatBox, closeFloatBox, dragstartHandler, dragendHandler, floatBoxStates, floatBox, showingBoxKeys } = useFloatBox(slideKeys);
+      vue.watch(
+        () => showingBoxKeys.value.length,
+        () => {
+          const isActiveTabShow = showingBoxKeys.value.some(
+            (key) => activeTabName.value === sideBarItems.value.find((v) => v.$key === key)?.text
+          );
+          if (!isActiveTabShow && activeTabName.value)
+            return;
+          const nextSlideBarItem = sideBarItems.value.find((sideBarItem) => !showingBoxKeys.value.includes(sideBarItem.$key));
+          if (!nextSlideBarItem) {
+            activeTabName.value = "";
+            services?.uiService.set("hideSlideBar", true);
+            return;
+          }
+          services?.uiService.set("hideSlideBar", false);
+          activeTabName.value = nextSlideBarItem?.text;
+        }
+      );
       __expose({
         activeTabName
       });
       return (_ctx, _cache) => {
-        return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
-          vue.createElementVNode("div", _hoisted_2$6, [
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+            vue.createElementVNode("div", _hoisted_2$6, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
+                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                  class: vue.normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
+                  key: config.$key ?? index,
+                  onClick: ($event) => activeTabName.value = config.text || `${index}`,
+                  draggable: "true",
+                  onDragstart: _cache[0] || (_cache[0] = //@ts-ignore
+                  (...args) => vue.unref(dragstartHandler) && vue.unref(dragstartHandler)(...args)),
+                  onDragend: ($event) => vue.unref(dragendHandler)(config.$key, $event)
+                }, [
+                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
+                    key: 0,
+                    icon: config.icon
+                  }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                  config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
+                ], 42, _hoisted_3$3)), [
+                  [vue.vShow, !vue.unref(floatBoxStates)?.get(config.$key)?.status]
+                ]);
+              }), 128))
+            ]),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
-              return vue.openBlock(), vue.createElementBlock("div", {
-                class: vue.normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
-                key: config.$key ?? index,
-                onClick: ($event) => activeTabName.value = config.text || `${index}`
+              return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                class: "m-editor-sidebar-content",
+                key: config.$key ?? index
               }, [
-                config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$N, {
-                  key: 0,
-                  icon: config.icon
-                }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
-              ], 10, _hoisted_3$3);
+                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.$key === "component-list" || config.slots?.componentListPanelHeader ? {
+                    name: "component-list-panel-header",
+                    fn: vue.withCtx(() => [
+                      config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                    ]),
+                    key: "0"
+                  } : void 0,
+                  config.$key === "component-list" || config.slots?.componentListItem ? {
+                    name: "component-list-item",
+                    fn: vue.withCtx(({ component }) => [
+                      config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-item", {
+                        key: 0,
+                        component
+                      }) : config.slots?.componentListItem ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListItem), {
+                        key: 1,
+                        component
+                      }, null, 8, ["component"])) : vue.createCommentVNode("", true)
+                    ]),
+                    key: "1"
+                  } : void 0,
+                  config.$key === "layer" || config.slots?.layerPanelHeader ? {
+                    name: "layer-panel-header",
+                    fn: vue.withCtx(() => [
+                      config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                    ]),
+                    key: "2"
+                  } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
+                    name: "code-block-panel-header",
+                    fn: vue.withCtx(() => [
+                      config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+                    ]),
+                    key: "3"
+                  } : void 0,
+                  config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
+                    name: "code-block-panel-tool",
+                    fn: vue.withCtx(({ id, data }) => [
+                      config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                        key: 0,
+                        id,
+                        data
+                      }) : config.slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
+                    ]),
+                    key: "4"
+                  } : void 0,
+                  config.$key === "layer" || config.slots?.layerNodeContent ? {
+                    name: "layer-node-content",
+                    fn: vue.withCtx(({ data: nodeData }) => [
+                      config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                        key: 0,
+                        data: nodeData
+                      }) : config.slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerNodeContent), {
+                        key: 1,
+                        data: nodeData
+                      }, null, 8, ["data"])) : vue.createCommentVNode("", true)
+                    ]),
+                    key: "5"
+                  } : void 0,
+                  config.$key === "layer" || config.slots?.layerNodeTool ? {
+                    name: "layer-node-tool",
+                    fn: vue.withCtx(({ data: nodeData }) => [
+                      config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-tool", {
+                        key: 0,
+                        data: nodeData
+                      }) : config.slots?.layerNodeTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerNodeTool), {
+                        key: 1,
+                        data: nodeData
+                      }, null, 8, ["data"])) : vue.createCommentVNode("", true)
+                    ]),
+                    key: "6"
+                  } : void 0,
+                  config.$key === "data-source" || config.slots?.codeBlockPanelTool ? {
+                    name: "data-source-panel-tool",
+                    fn: vue.withCtx(({ data }) => [
+                      config.$key === "data-source" ? vue.renderSlot(_ctx.$slots, "data-source-panel-tool", {
+                        key: 0,
+                        data
+                      }) : config.slots?.DataSourcePanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : vue.createCommentVNode("", true)
+                    ]),
+                    key: "7"
+                  } : void 0
+                ]), 1040)) : vue.createCommentVNode("", true)
+              ])), [
+                [vue.vShow, activeTabName.value === config.text]
+              ]);
             }), 128))
-          ]),
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
-            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-              class: "m-editor-sidebar-content",
-              key: config.$key ?? index
-            }, [
-              config ? (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(() => [
-                    config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                  ]),
-                  key: "0"
-                } : void 0,
-                config.$key === "component-list" || config.slots?.componentListItem ? {
-                  name: "component-list-item",
-                  fn: vue.withCtx(({ component }) => [
-                    config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-item", {
-                      key: 0,
-                      component
-                    }) : config.slots?.componentListItem ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListItem), {
-                      key: 1,
-                      component
-                    }, null, 8, ["component"])) : vue.createCommentVNode("", true)
-                  ]),
-                  key: "1"
-                } : void 0,
-                config.$key === "layer" || config.slots?.layerPanelHeader ? {
-                  name: "layer-panel-header",
-                  fn: vue.withCtx(() => [
-                    config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                  ]),
-                  key: "2"
-                } : void 0,
-                config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
-                  name: "code-block-panel-header",
-                  fn: vue.withCtx(() => [
-                    config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                  ]),
-                  key: "3"
-                } : void 0,
-                config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
-                  name: "code-block-panel-tool",
-                  fn: vue.withCtx(({ id, data }) => [
-                    config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                      key: 0,
-                      id,
-                      data
-                    }) : config.slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
-                  ]),
-                  key: "4"
-                } : void 0,
-                config.$key === "layer" || config.slots?.layerNodeContent ? {
-                  name: "layer-node-content",
-                  fn: vue.withCtx(({ data: nodeData }) => [
-                    config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-content", {
-                      key: 0,
-                      data: nodeData
-                    }) : config.slots?.layerNodeContent ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerNodeContent), {
-                      key: 1,
-                      data: nodeData
-                    }, null, 8, ["data"])) : vue.createCommentVNode("", true)
-                  ]),
-                  key: "5"
-                } : void 0,
-                config.$key === "layer" || config.slots?.layerNodeTool ? {
-                  name: "layer-node-tool",
-                  fn: vue.withCtx(({ data: nodeData }) => [
-                    config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-node-tool", {
-                      key: 0,
-                      data: nodeData
-                    }) : config.slots?.layerNodeTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerNodeTool), {
-                      key: 1,
-                      data: nodeData
-                    }, null, 8, ["data"])) : vue.createCommentVNode("", true)
-                  ]),
-                  key: "6"
-                } : void 0,
-                config.$key === "data-source" || config.slots?.codeBlockPanelTool ? {
-                  name: "data-source-panel-tool",
-                  fn: vue.withCtx(({ data }) => [
-                    config.$key === "data-source" ? vue.renderSlot(_ctx.$slots, "data-source-panel-tool", {
-                      key: 0,
-                      data
-                    }) : config.slots?.DataSourcePanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : vue.createCommentVNode("", true)
-                  ]),
-                  key: "7"
-                } : void 0
-              ]), 1040)) : vue.createCommentVNode("", true)
-            ])), [
-              [vue.vShow, activeTabName.value === config.text]
-            ]);
-          }), 128))
-        ])) : vue.createCommentVNode("", true);
+          ])) : vue.createCommentVNode("", true),
+          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+            vue.createElementVNode("div", _hoisted_5$3, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
+                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                  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$N, {
+                      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$2),
+                  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))
+            ])
+          ]))
+        ], 64);
       };
     }
   });
@@ -7959,8 +8210,9 @@
       pos: {}
     },
     emits: ["scroll"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const bar = vue.ref();
       const thumb = vue.ref();
       const thumbSize = vue.computed(() => props.size * (props.size / props.scrollSize));
@@ -8162,7 +8414,9 @@
     showGuides: true,
     showRule: true,
     propsPanelSize: "small",
-    showAddPageButton: true
+    showAddPageButton: true,
+    floatBox: /* @__PURE__ */ new Map(),
+    hideSlideBar: false
   });
   class Ui extends BaseService {
     constructor() {
@@ -8202,6 +8456,19 @@
       }
       return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
     }
+    async setFloatBox(keys) {
+      const map = state.floatBox;
+      for (const key of keys) {
+        if (map.get(key))
+          continue;
+        map.set(key, {
+          status: false,
+          zIndex: 99,
+          top: 0,
+          left: 0
+        });
+      }
+    }
     resetState() {
       this.set("showSrc", false);
       this.set("uiSelectMode", false);
@@ -8414,8 +8681,9 @@
       pinned: { type: Boolean }
     },
     emits: ["close", "update:pinned", "change"],
-    setup(__props, { emit }) {
+    setup(__props, { emit: __emit }) {
       const props = __props;
+      const emit = __emit;
       const pinHandler = () => {
         emit("update:pinned", !props.pinned);
       };
@@ -9478,254 +9746,41 @@
   }
   const componentListService = new ComponentList();
 
-  class Target extends events.EventEmitter {
-    /**
-     * 如何识别目标
-     */
-    isTarget;
-    /**
-     * 目标id，不可重复
-     * 例如目标是代码块，则为代码块id
-     */
-    id;
-    /**
-     * 目标名称，用于显示在依赖列表中
-     */
-    name;
-    /**
-     * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type
-     */
-    type = DepTargetType.DEFAULT;
-    /**
-     * 依赖详情
-     * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }
-     */
-    deps = vue.reactive({});
-    constructor(options) {
-      super();
-      this.isTarget = options.isTarget;
-      this.id = options.id;
-      this.name = options.name;
-      if (options.type) {
-        this.type = options.type;
-      }
-    }
-    /**
-     * 更新依赖
-     * @param node 节点配置
-     * @param key 哪个key配置了这个目标的id
-     */
-    updateDep(node, key) {
-      const dep = this.deps[node.id] || {
-        name: node.name,
-        keys: []
-      };
-      if (node.name) {
-        dep.name = node.name;
-      }
-      this.deps[node.id] = dep;
-      if (dep.keys.indexOf(key) === -1) {
-        dep.keys.push(key);
-      }
-      this.emit("change");
-    }
-    /**
-     * 删除依赖
-     * @param node 哪个节点的依赖需要移除，如果为空，则移除所有依赖
-     * @param key 节点下哪个key需要移除，如果为空，则移除改节点下的所有依赖key
-     * @returns void
-     */
-    removeDep(node, key) {
-      if (!node) {
-        Object.keys(this.deps).forEach((depKey) => {
-          delete this.deps[depKey];
-        });
-        this.emit("change");
-        return;
-      }
-      const dep = this.deps[node.id];
-      if (!dep)
-        return;
-      if (key) {
-        const index = dep.keys.indexOf(key);
-        dep.keys.splice(index, 1);
-        if (dep.keys.length === 0) {
-          delete this.deps[node.id];
-        }
-      } else {
-        delete this.deps[node.id];
-      }
-      this.emit("change");
-    }
-    /**
-     * 判断指定节点下的指定key是否存在在依赖列表中
-     * @param node 哪个节点
-     * @param key 哪个key
-     * @returns boolean
-     */
-    hasDep(node, key) {
-      const dep = this.deps[node.id];
-      return Boolean(dep?.keys.find((d) => d === key));
+  class Dep extends BaseService {
+    watcher = new dep.Watcher({ initialTargets: vue.reactive({}) });
+    removeTargets(type = dep.DepTargetType.DEFAULT) {
+      this.watcher.removeTargets(type);
+      this.emit("remove-target");
     }
-    destroy() {
-      this.removeAllListeners();
+    getTargets(type = dep.DepTargetType.DEFAULT) {
+      return this.watcher.getTargets(type);
     }
-  }
-  class Watcher extends events.EventEmitter {
-    targets = vue.reactive({});
-    /**
-     * 获取指定类型中的所有target
-     * @param type 分类
-     * @returns Target[]
-     */
-    getTargets(type = DepTargetType.DEFAULT) {
-      return this.targets[type] || {};
+    getTarget(id) {
+      return this.watcher.getTarget(id);
     }
-    /**
-     * 添加新的目标
-     * @param target Target
-     */
     addTarget(target) {
-      const targets = this.getTargets(target.type) || {};
-      this.targets[target.type] = targets;
-      targets[target.id] = target;
+      this.watcher.addTarget(target);
       this.emit("add-target", target);
     }
-    /**
-     * 获取指定id的target
-     * @param id target id
-     * @returns Target
-     */
-    getTarget(id) {
-      const allTargets = Object.values(this.targets);
-      for (const targets of allTargets) {
-        if (targets[id]) {
-          return targets[id];
-        }
-      }
-    }
-    /**
-     * 判断是否存在指定id的target
-     * @param id target id
-     * @returns boolean
-     */
-    hasTarget(id) {
-      const allTargets = Object.values(this.targets);
-      for (const targets of allTargets) {
-        if (targets[id]) {
-          return true;
-        }
-      }
-      return false;
-    }
-    /**
-     * 删除指定id的target
-     * @param id target id
-     */
     removeTarget(id) {
-      const allTargets = Object.values(this.targets);
-      for (const targets of allTargets) {
-        if (targets[id]) {
-          targets[id].destroy();
-          delete targets[id];
-        }
-      }
-      this.emit("remove-target");
-    }
-    /**
-     * 删除指定分类的所有target
-     * @param type 分类
-     * @returns void
-     */
-    removeTargets(type = DepTargetType.DEFAULT) {
-      const targets = this.targets[type];
-      if (!targets)
-        return;
-      for (const target of Object.values(targets)) {
-        target.destroy();
-      }
-      delete this.targets[type];
+      this.watcher.removeTarget(id);
       this.emit("remove-target");
     }
-    /**
-     * 删除所有target
-     */
     clearTargets() {
-      Object.keys(this.targets).forEach((key) => {
-        delete this.targets[key];
-      });
+      this.watcher.clearTargets();
     }
-    /**
-     * 收集依赖
-     * @param nodes 需要收集的节点
-     * @param deep 是否需要收集子节点
-     */
     collect(nodes, deep = false) {
-      Object.values(this.targets).forEach((targets) => {
-        Object.values(targets).forEach((target) => {
-          nodes.forEach((node) => {
-            target.removeDep(node);
-            this.collectItem(node, target, deep);
-          });
-        });
-      });
+      this.watcher.collect(nodes, deep);
       this.emit("collected", nodes, deep);
     }
-    /**
-     * 清除依赖
-     * @param nodes 需要清除依赖的节点
-     */
     clear(nodes) {
-      const clearedItemsNodeIds = [];
-      Object.values(this.targets).forEach((targets) => {
-        Object.values(targets).forEach((target) => {
-          if (nodes) {
-            nodes.forEach((node) => {
-              target.removeDep(node);
-              if (Array.isArray(node.items) && node.items.length && !clearedItemsNodeIds.includes(node.id)) {
-                clearedItemsNodeIds.push(node.id);
-                this.clear(node.items);
-              }
-            });
-          } else {
-            target.removeDep();
-          }
-        });
-      });
+      return this.watcher.clear(nodes);
     }
-    collectItem(node, target, deep = false) {
-      const collectTarget = (config, prop = "") => {
-        const doCollect = (key, value) => {
-          const keyIsItems = key === "items";
-          const fullKey = prop ? `${prop}.${key}` : key;
-          if (target.isTarget(fullKey, value)) {
-            target.updateDep(node, fullKey);
-            this.emit("update-dep", node, fullKey);
-          } else if (!keyIsItems && Array.isArray(value)) {
-            value.forEach((item, index) => {
-              if (utils.isObject(item)) {
-                collectTarget(item, `${fullKey}.${index}`);
-              }
-            });
-          } else if (utils.isObject(value)) {
-            collectTarget(value, fullKey);
-          }
-          if (keyIsItems && deep && Array.isArray(value)) {
-            value.forEach((child) => {
-              this.collectItem(child, target, deep);
-            });
-          }
-        };
-        Object.entries(config).forEach(([key, value]) => {
-          if (typeof value === "undefined" || value === "")
-            return;
-          doCollect(key, value);
-        });
-      };
-      collectTarget(node);
+    hasTarget(id) {
+      return this.watcher.hasTarget(id);
     }
   }
-  const depService = new Watcher();
+  const depService = new Dep();
 
   let eventMap = vue.reactive({});
   let methodMap = vue.reactive({});
@@ -9949,61 +10004,6 @@
     codeOptions: () => ({})
   };
 
-  const createCodeBlockTarget = (id, codeBlock) => new Target({
-    type: DepTargetType.CODE_BLOCK,
-    id,
-    name: codeBlock.name,
-    isTarget: (key, value) => {
-      if (id === value) {
-        return true;
-      }
-      if (value?.hookType === schema.HookType.CODE && !lodashEs.isEmpty(value.hookData)) {
-        const index = value.hookData.findIndex((item) => item.codeId === id);
-        return Boolean(index > -1);
-      }
-      return false;
-    }
-  });
-  const createDataSourceTarget = (id) => new Target({
-    type: DepTargetType.DATA_SOURCE,
-    id,
-    isTarget: (key, value) => {
-      if (value?.isBindDataSource && value.dataSourceId || typeof value === "string" && value.includes(`${id}`)) {
-        return true;
-      }
-      if (!Array.isArray(value) || typeof value[0] !== "string") {
-        return false;
-      }
-      const [prefixId] = value;
-      const prefixIndex = prefixId.indexOf(utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
-      if (prefixIndex === -1) {
-        return false;
-      }
-      const dsId = prefixId.substring(prefixIndex + utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length);
-      return dsId === id && Boolean(dataSourceService.getDataSourceById(id));
-    }
-  });
-  const createDataSourceCondTarget = (id) => new Target({
-    type: DepTargetType.DATA_SOURCE_COND,
-    id,
-    isTarget: (key, value) => {
-      if (!Array.isArray(value) || value[0] !== id || !`${key}`.startsWith("displayConds"))
-        return false;
-      const ds = dataSourceService.getDataSourceById(id);
-      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
-    }
-  });
-  const createDataSourceMethodTarget = (id) => new Target({
-    type: DepTargetType.DATA_SOURCE_METHOD,
-    id,
-    isTarget: (key, value) => {
-      if (!Array.isArray(value) || value[0] !== id)
-        return false;
-      const ds = dataSourceService.getDataSourceById(id);
-      return Boolean(ds?.methods?.find((method) => method.name === value[1]));
-    }
-  });
-
   const initServiceState = (props, {
     editorService,
     historyService,
@@ -10176,13 +10176,13 @@
       const root = editorService.get("root");
       if (!root)
         return;
-      if (target.type === DepTargetType.DATA_SOURCE) {
+      if (target.type === dep.DepTargetType.DATA_SOURCE) {
         if (!root.dataSourceDeps) {
           root.dataSourceDeps = {};
         }
         root.dataSourceDeps[target.id] = target.deps;
       }
-      if (target.type === DepTargetType.DATA_SOURCE_COND) {
+      if (target.type === dep.DepTargetType.DATA_SOURCE_COND) {
         if (!root.dataSourceCondDeps) {
           root.dataSourceCondDeps = {};
         }
@@ -10209,9 +10209,9 @@
     depService.on("dep-update", depUpdateHandler);
     depService.on("collected", collectedHandler);
     const initDataSourceDepTarget = (ds) => {
-      depService.addTarget(createDataSourceTarget(ds.id));
-      depService.addTarget(createDataSourceMethodTarget(ds.id));
-      depService.addTarget(createDataSourceCondTarget(ds.id));
+      depService.addTarget(dep.createDataSourceTarget(ds, vue.reactive({})));
+      depService.addTarget(dep.createDataSourceMethodTarget(ds, vue.reactive({})));
+      depService.addTarget(dep.createDataSourceCondTarget(ds, vue.reactive({})));
     };
     const rootChangeHandler = async (value, preValue) => {
       if (!value)
@@ -10220,9 +10220,9 @@
       value.dataSources = value.dataSources || [];
       codeBlockService.setCodeDsl(value.codeBlocks);
       dataSourceService.set("dataSources", value.dataSources);
-      depService.removeTargets(DepTargetType.CODE_BLOCK);
+      depService.removeTargets(dep.DepTargetType.CODE_BLOCK);
       Object.entries(value.codeBlocks).forEach(([id, code]) => {
-        depService.addTarget(createCodeBlockTarget(id, code));
+        depService.addTarget(dep.createCodeBlockTarget(id, code));
       });
       value.dataSources.forEach((ds) => {
         initDataSourceDepTarget(ds);
@@ -10273,7 +10273,7 @@
         depService.getTarget(id).name = codeBlock.name;
         return;
       }
-      depService.addTarget(createCodeBlockTarget(id, codeBlock));
+      depService.addTarget(dep.createCodeBlockTarget(id, codeBlock));
     };
     const codeBlockRemoveHandler = (id) => {
       depService.removeTarget(id);
@@ -10286,7 +10286,7 @@
     };
     const dataSourceUpdateHandler = (config) => {
       const root = editorService.get("root");
-      const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
+      const targets = depService.getTargets(dep.DepTargetType.DATA_SOURCE);
       const nodes = utils.getNodes(Object.keys(targets[config.id].deps), root?.items);
       upateNodeWhenDataSourceChange(nodes);
     };
@@ -10351,7 +10351,8 @@
       extendFormState: { type: Function }
     }, defaultEditorProps),
     emits: ["props-panel-mounted", "update:modelValue"],
-    setup(__props, { expose: __expose, emit }) {
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const emit = __emit;
       const props = __props;
       const services = {
         componentListService,
@@ -10519,6 +10520,10 @@
     }
   };
 
+  Object.defineProperty(exports, 'DepTargetType', {
+    enumerable: true,
+    get: () => dep.DepTargetType
+  });
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
   exports.CodeBlockEditor = _sfc_main$P;
@@ -10537,7 +10542,6 @@
   exports.DataSourceMethods = _sfc_main$I;
   exports.DataSourceMocks = _sfc_main$G;
   exports.DataSourceSelect = _sfc_main$F;
-  exports.DepTargetType = DepTargetType;
   exports.DragType = DragType;
   exports.EventSelect = _sfc_main$E;
   exports.Fixed2Other = Fixed2Other;
@@ -10604,6 +10608,7 @@
   exports.uiService = uiService;
   exports.useCodeBlockEdit = useCodeBlockEdit;
   exports.useDataSourceMethod = useDataSourceMethod;
+  exports.useFloatBox = useFloatBox;
   exports.useStage = useStage;
   exports.warn = warn;