@tmagic/editor 1.3.1 → 1.3.2

package/dist/tmagic-editor.js

@@ -1,14 +1,16 @@
-import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, createTextVNode, createCommentVNode, toRaw, resolveDynamicComponent, nextTick, mergeProps, toDisplayString, renderList, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, createStaticVNode, provide, Transition, toHandlers, mergeDefaults } from 'vue';
+import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, createStaticVNode, provide, Transition, toHandlers, mergeDefaults } from 'vue';
 import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, ArrowRight, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, Top, Bottom, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, map, has, pick, keys } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicTree, TMagicPopover, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 import { HookType, NodeType, ActionType } from '@tmagic/schema';
-import { MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
+import { MFormBox, MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
-import { guid, isPop, getNodePath, isNumber, isPage, toLine, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getDefaultValueFromFields, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes, isObject as isObject$1 } from '@tmagic/utils';
+import { guid, isPop, getNodePath, isNumber, isPage, toLine, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getDefaultValueFromFields, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
 import Gesto from 'gesto';
+import Moveable from 'moveable';
+import { DepTargetType, Watcher, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
 import StageCore, { GuidesType, StageDragStatus, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
@@ -41,8 +43,9 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     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") {
@@ -225,7 +228,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
     const props = __props;
     const save = (v) => {
       props.model[props.name] = v;
@@ -264,8 +268,9 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const formConfig = computed(() => {
       const { codeOptions, ...config } = props.config;
       return {
@@ -343,9 +348,10 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
-    const props = __props;
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
     const services = inject("services");
+    const props = __props;
     const codeConfig = computed(() => ({
       type: "group-list",
       name: "hookData",
@@ -411,11 +417,13 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     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 = inject("services");
     const difVisible = ref(false);
     const height = ref(globalThis.innerHeight);
@@ -582,7 +590,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(MFormDrawer), {
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.slideType === "box" ? unref(MFormBox) : unref(MFormDrawer)), {
           class: "m-editor-code-block-editor",
           ref_key: "fomDrawer",
           ref: fomDrawer,
@@ -613,7 +621,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             })
           ]),
           _: 1
-        }, 8, ["title", "width", "config", "values", "disabled"]),
+        }, 40, ["title", "width", "config", "values", "disabled"])),
         createVNode(unref(TMagicDialog), {
           modelValue: difVisible.value,
           "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => difVisible.value = $event),
@@ -1122,12 +1130,14 @@ class DataSource extends BaseService {
     };
     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] = cloneDeep(config);
     this.emit("update", config);
+    return config;
   }
   remove(id) {
     const dataSources = this.get("dataSources");
@@ -1550,14 +1560,6 @@ var KeyBindingCommand = /* @__PURE__ */ ((KeyBindingCommand2) => {
   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";
@@ -2977,8 +2979,9 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     paramsConfig: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const form = ref();
     const getFormConfig = (items = []) => [
       {
@@ -3102,6 +3105,7 @@ const useCodeBlockEdit = (codeBlockService) => {
     if (!codeId.value)
       return;
     await codeBlockService?.setCodeDslById(codeId.value, values);
+    tMagicMessage.success("代码块保存成功");
     codeBlockEditor.value?.hide();
   };
   return {
@@ -3134,9 +3138,10 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
-    const props = __props;
+  setup(__props, { emit: __emit }) {
     const services = inject("services");
+    const emit = __emit;
+    const props = __props;
     const getParamItemsConfig = (codeId) => {
       if (!codeDsl.value || !codeId)
         return [];
@@ -3245,8 +3250,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const services = inject("services");
     const addDialog = ref();
     const fieldValues = ref({});
@@ -3530,9 +3536,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
-    const props = __props;
+  setup(__props, { emit: __emit }) {
     const services = inject("services");
+    const emit = __emit;
+    const props = __props;
     const dataSources = computed(() => services?.dataSourceService.get("dataSources"));
     const getOptionChildren = (fields = []) => fields.map((field) => ({
       label: field.title || field.name,
@@ -3590,8 +3597,9 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { dataSourceService } = inject("services") || {};
     const autocomplete = ref();
     const isFocused = ref(false);
@@ -3899,8 +3907,9 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     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 = [
       {
@@ -4004,10 +4013,11 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
-    const props = __props;
+  setup(__props, { emit: __emit }) {
     const services = inject("services");
+    const emit = __emit;
     const dataSourceService = services?.dataSourceService;
+    const props = __props;
     const dataSources = computed(() => dataSourceService?.get("dataSources"));
     const getParamItemsConfig = ([dataSourceId, medthodName] = ["", ""]) => {
       if (!dataSourceId)
@@ -4125,8 +4135,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const services = inject("services");
     const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
     const addDialog = ref();
@@ -4356,18 +4367,20 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
     const props = __props;
     const { dataSourceService } = inject("services") || {};
     const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
     const selectConfig = 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
@@ -4416,8 +4429,9 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const services = inject("services");
     const editorService = services?.editorService;
     const dataSourceService = services?.dataSourceService;
@@ -4680,8 +4694,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const records = ref([]);
     watchEffect(() => {
       records.value = Object.entries(props.model[props.name] || {});
@@ -4784,8 +4799,9 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     lastValues: {}
   },
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const services = inject("services");
     const mForm = inject("mForm");
     const val = computed(() => props.model[props.name]);
@@ -4959,7 +4975,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   },
   __name: "Resizer",
   emits: ["change"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
     const target = ref();
     const { isDraging } = useGetSo(target, emit);
     return (_ctx, _cache) => {
@@ -4990,7 +5007,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     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 = ref();
     const hasLeft = computed(() => typeof props.left !== "undefined");
@@ -5179,7 +5197,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const root = computed(() => editorService?.get("root"));
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
     const showSrc = 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 = ref({
       left: leftColumnWidthCacheData,
@@ -5209,6 +5228,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
       }
     );
+    watch(
+      () => uiService?.get("hideSlideBar"),
+      (hideSlideBar) => {
+        columnWidth.value.left = hideSlideBar ? 0 : getLeftColumnWidthCacheData();
+      }
+    );
     const columnWidthChange = (columnW) => {
       columnWidth.value.left = columnW.left;
       columnWidth.value.center = columnW.center;
@@ -5637,7 +5662,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     extendState: { type: Function }
   },
   emits: ["mounted"],
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
     const internalInstance = getCurrentInstance();
     const values = ref({});
     const configForm = ref();
@@ -5701,13 +5727,145 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
+const useFloatBox = (slideKeys) => {
+  const services = inject("services");
+  const moveable = ref();
+  const floatBox = ref();
+  const floatBoxStates = computed(() => services?.uiService.get("floatBox"));
+  const curKey = ref("");
+  const target = computed(
+    () => floatBox.value ? floatBox.value.find((item) => item.classList.contains(`m-editor-float-box-${curKey.value}`)) : void 0
+  );
+  const showingBoxKeys = computed(
+    () => [...floatBoxStates.value?.keys() ?? []].filter((key) => floatBoxStates.value?.get(key)?.status)
+  );
+  const isDraging = 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 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;
+  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__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
   __name: "SearchInput",
   emits: ["search"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
     const filterText = ref("");
     let timer = null;
     const filterTextChangeHandler = () => {
@@ -5803,8 +5961,9 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     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 } = inject("services") || {};
     const codeList = computed(
       () => Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
@@ -5958,7 +6117,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   },
   __name: "CodeBlockListPanel",
   props: {
-    customError: { type: Function }
+    customError: { type: Function },
+    slideType: {}
   },
   setup(__props) {
     const { codeBlockService } = inject("services") || {};
@@ -5969,52 +6129,55 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       codeBlockList.value?.filter(val);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-            createElementVNode("div", _hoisted_1$f, [
-              createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
-              editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
-                key: 0,
-                class: "create-code-button",
-                type: "primary",
-                size: "small",
-                onClick: unref(createCodeBlock)
-              }, {
-                default: withCtx(() => [
-                  createTextVNode("新增")
-                ]),
-                _: 1
-              }, 8, ["onClick"])) : createCommentVNode("", true),
-              renderSlot(_ctx.$slots, "code-block-panel-search")
-            ])
-          ]),
-          createVNode(_sfc_main$r, {
-            ref_key: "codeBlockList",
-            ref: codeBlockList,
-            "custom-error": _ctx.customError,
-            onEdit: unref(editCode),
-            onRemove: unref(deleteCode)
-          }, {
-            "code-block-panel-tool": withCtx(({ id, data }) => [
-              renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                id,
-                data
-              })
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
+              createElementVNode("div", _hoisted_1$f, [
+                createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
+                editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
+                  key: 0,
+                  class: "create-code-button",
+                  type: "primary",
+                  size: "small",
+                  onClick: unref(createCodeBlock)
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("新增")
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])) : createCommentVNode("", true),
+                renderSlot(_ctx.$slots, "code-block-panel-search")
+              ])
             ]),
-            _: 3
-          }, 8, ["custom-error", "onEdit", "onRemove"]),
-          unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
-            key: 0,
-            ref_key: "codeBlockEditor",
-            ref: codeBlockEditor,
-            disabled: !editable.value,
-            content: unref(codeConfig),
-            onSubmit: unref(submitCodeBlockHandler)
-          }, null, 8, ["disabled", "content", "onSubmit"])) : createCommentVNode("", true)
-        ]),
-        _: 3
-      });
+            createVNode(_sfc_main$r, {
+              ref_key: "codeBlockList",
+              ref: codeBlockList,
+              "custom-error": _ctx.customError,
+              onEdit: unref(editCode),
+              onRemove: unref(deleteCode)
+            }, {
+              "code-block-panel-tool": withCtx(({ id, data }) => [
+                renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                  id,
+                  data
+                })
+              ]),
+              _: 3
+            }, 8, ["custom-error", "onEdit", "onRemove"])
+          ]),
+          _: 3
+        }),
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$P, {
+          key: 0,
+          ref_key: "codeBlockEditor",
+          ref: codeBlockEditor,
+          disabled: !editable.value,
+          content: unref(codeConfig),
+          slideType: _ctx.slideType,
+          onSubmit: unref(submitCodeBlockHandler)
+        }, null, 8, ["disabled", "content", "slideType", "onSubmit"])) : createCommentVNode("", true)
+      ], 64);
     };
   }
 });
@@ -6027,11 +6190,13 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   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 = inject("services");
     const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get("columnWidth").left || 0));
     const fomDrawer = ref();
@@ -6056,7 +6221,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(MFormDrawer), {
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.slideType === "box" ? unref(MFormBox) : unref(MFormDrawer)), {
         ref_key: "fomDrawer",
         ref: fomDrawer,
         "label-width": "80px",
@@ -6068,7 +6233,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         disabled: _ctx.disabled,
         onSubmit: submitHandler,
         onError: errorHandler
-      }, null, 8, ["title", "width", "config", "values", "disabled"]);
+      }, null, 40, ["title", "width", "config", "values", "disabled"]);
     };
   }
 });
@@ -6085,7 +6250,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   },
   __name: "DataSourceList",
   emits: ["edit", "remove"],
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
     const { depService, editorService, dataSourceService } = inject("services") || {};
     const editable = computed(() => dataSourceService?.get("editable") ?? true);
     const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
@@ -6111,9 +6277,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
     const list = 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");
@@ -6235,6 +6401,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     name: "MEditorDataSourceListPanel"
   },
   __name: "DataSourceListPanel",
+  props: {
+    slideType: {}
+  },
   setup(__props) {
     const { dataSourceService } = inject("services") || {};
     const editDialog = ref();
@@ -6269,7 +6438,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       dataSourceValues.value = {
         ...dataSourceService?.getDataSourceById(id)
       };
-      dialogTitle.value = `新增${dataSourceValues.value.title || ""}`;
+      dialogTitle.value = `编辑${dataSourceValues.value.title || ""}`;
       editDialog.value.show();
     };
     const removeHandler = (id) => {
@@ -6288,64 +6457,62 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       dataSourceList.value?.filter(val);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$d, [
-            createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
-            editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
-              key: 0,
-              placement: "right"
-            }, {
-              reference: withCtx(() => [
-                createVNode(unref(TMagicButton), {
-                  type: "primary",
-                  size: "small"
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode("新增")
-                  ]),
-                  _: 1
-                })
-              ]),
-              default: withCtx(() => [
-                createElementVNode("div", _hoisted_2$a, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                    return openBlock(), createBlock(_sfc_main$x, {
-                      data: {
-                        type: "button",
-                        text: item.text,
-                        handler: () => {
-                          addHandler(item.type);
-                        }
-                      },
-                      key: index
-                    }, null, 8, ["data"]);
-                  }), 128))
-                ])
-              ]),
-              _: 1
-            })) : createCommentVNode("", true)
-          ]),
-          createVNode(_sfc_main$o, {
-            onEdit: editHandler,
-            onRemove: removeHandler
-          }, {
-            "data-source-panel-tool": withCtx(({ data }) => [
-              renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_1$d, [
+              createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
+              editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
+                key: 0,
+                placement: "right"
+              }, {
+                reference: withCtx(() => [
+                  createVNode(unref(TMagicButton), {
+                    type: "primary",
+                    size: "small"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("新增")
+                    ]),
+                    _: 1
+                  })
+                ]),
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_2$a, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
+                      return openBlock(), createBlock(_sfc_main$x, {
+                        data: {
+                          type: "button",
+                          text: item.text,
+                          handler: () => {
+                            addHandler(item.type);
+                          }
+                        },
+                        key: index
+                      }, null, 8, ["data"]);
+                    }), 128))
+                  ])
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
             ]),
-            _: 3
-          }),
-          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
-      });
+            createVNode(_sfc_main$o, {
+              onEdit: editHandler,
+              onRemove: removeHandler
+            })
+          ]),
+          _: 1
+        }),
+        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);
     };
   }
 });
@@ -6379,9 +6546,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     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 = inject("treeEmit");
+    const props = __props;
     const nodeStatus = computed(
       () => props.nodeStatusMap?.get(props.data.id) || {
         selected: false,
@@ -6491,7 +6658,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     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;
     provide("treeEmit", emit);
     const handleDragOver = (event) => {
       emit("node-dragover", event);
@@ -6536,8 +6704,9 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     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 = ref();
     const buttons = ref();
     const subMenu = ref();
@@ -6805,8 +6974,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     layerContentMenu: {}
   },
   emits: ["collapse-all"],
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const services = inject("services");
     const menu = ref();
     const node = computed(() => services?.editorService.get("node"));
@@ -7089,6 +7259,9 @@ const useDrag = (services) => {
       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;
@@ -7324,7 +7497,7 @@ const useKeybinding = (services, contianer) => {
   };
 };
 
-const createPageNodeStatus = (services, pageId) => {
+const createPageNodeStatus = (services, pageId, initalLayerNodeStatus) => {
   const map = /* @__PURE__ */ new Map();
   map.set(pageId, {
     visible: true,
@@ -7334,12 +7507,15 @@ const createPageNodeStatus = (services, pageId) => {
   });
   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;
@@ -7351,12 +7527,12 @@ const useNodeStatus = (services, page) => {
     () => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map()
   );
   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
@@ -7629,11 +7805,14 @@ const _hoisted_1$8 = {
   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__ */ defineComponent({
   ...{
     name: "MEditorSidebar"
@@ -7645,6 +7824,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
+    const services = inject("services");
     const activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
@@ -7673,7 +7853,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           icon: EditPen,
           text: "代码编辑",
           component: _sfc_main$q,
-          slots: {}
+          slots: {},
+          boxComponentConfig: {
+            props: {
+              slideType: "box"
+            }
+          }
         },
         "data-source": {
           $key: "data-source",
@@ -7681,7 +7866,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           icon: Coin,
           text: "数据源",
           component: _sfc_main$n,
-          slots: {}
+          slots: {},
+          boxComponentConfig: {
+            props: {
+              slideType: "box"
+            }
+          }
         }
       };
       return typeof data === "string" ? map[data] : data;
@@ -7693,119 +7883,182 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         activeTabName.value = status || "0";
       }
     );
+    const slideKeys = computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key));
+    const { showFloatBox, closeFloatBox, dragstartHandler, dragendHandler, floatBoxStates, floatBox, showingBoxKeys } = useFloatBox(slideKeys);
+    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 ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
-        createElementVNode("div", _hoisted_2$6, [
+      return openBlock(), createElementBlock(Fragment, null, [
+        _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
+          createElementVNode("div", _hoisted_2$6, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
+              return withDirectives((openBlock(), createElementBlock("div", {
+                class: 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) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
+                onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
+              }, [
+                config.icon ? (openBlock(), createBlock(_sfc_main$N, {
+                  key: 0,
+                  icon: config.icon
+                }, null, 8, ["icon"])) : createCommentVNode("", true),
+                config.text ? (openBlock(), createElementBlock("div", _hoisted_4$3, toDisplayString(config.text), 1)) : createCommentVNode("", true)
+              ], 42, _hoisted_3$3)), [
+                [vShow, !unref(floatBoxStates)?.get(config.$key)?.status]
+              ]);
+            }), 128))
+          ]),
           (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
-            return openBlock(), createElementBlock("div", {
-              class: normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
-              key: config.$key ?? index,
-              onClick: ($event) => activeTabName.value = config.text || `${index}`
+            return withDirectives((openBlock(), createElementBlock("div", {
+              class: "m-editor-sidebar-content",
+              key: config.$key ?? index
             }, [
-              config.icon ? (openBlock(), createBlock(_sfc_main$N, {
-                key: 0,
-                icon: config.icon
-              }, null, 8, ["icon"])) : createCommentVNode("", true),
-              config.text ? (openBlock(), createElementBlock("div", _hoisted_4$3, toDisplayString(config.text), 1)) : createCommentVNode("", true)
-            ], 10, _hoisted_3$3);
+              config && !unref(floatBoxStates)?.get(config.$key)?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
+                config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
+                  name: "component-list-panel-header",
+                  fn: withCtx(() => [
+                    config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                  ]),
+                  key: "0"
+                } : void 0,
+                config.$key === "component-list" || config.slots?.componentListItem ? {
+                  name: "component-list-item",
+                  fn: withCtx(({ component }) => [
+                    config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
+                      key: 0,
+                      component
+                    }) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
+                      key: 1,
+                      component
+                    }, null, 8, ["component"])) : createCommentVNode("", true)
+                  ]),
+                  key: "1"
+                } : void 0,
+                config.$key === "layer" || config.slots?.layerPanelHeader ? {
+                  name: "layer-panel-header",
+                  fn: withCtx(() => [
+                    config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                  ]),
+                  key: "2"
+                } : void 0,
+                config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
+                  name: "code-block-panel-header",
+                  fn: withCtx(() => [
+                    config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
+                  ]),
+                  key: "3"
+                } : void 0,
+                config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
+                  name: "code-block-panel-tool",
+                  fn: withCtx(({ id, data }) => [
+                    config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
+                      key: 0,
+                      id,
+                      data
+                    }) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
+                  ]),
+                  key: "4"
+                } : void 0,
+                config.$key === "layer" || config.slots?.layerNodeContent ? {
+                  name: "layer-node-content",
+                  fn: withCtx(({ data: nodeData }) => [
+                    config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
+                      key: 0,
+                      data: nodeData
+                    }) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
+                      key: 1,
+                      data: nodeData
+                    }, null, 8, ["data"])) : createCommentVNode("", true)
+                  ]),
+                  key: "5"
+                } : void 0,
+                config.$key === "layer" || config.slots?.layerNodeTool ? {
+                  name: "layer-node-tool",
+                  fn: withCtx(({ data: nodeData }) => [
+                    config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-tool", {
+                      key: 0,
+                      data: nodeData
+                    }) : config.slots?.layerNodeTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
+                      key: 1,
+                      data: nodeData
+                    }, null, 8, ["data"])) : createCommentVNode("", true)
+                  ]),
+                  key: "6"
+                } : void 0,
+                config.$key === "data-source" || config.slots?.codeBlockPanelTool ? {
+                  name: "data-source-panel-tool",
+                  fn: withCtx(({ data }) => [
+                    config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-tool", {
+                      key: 0,
+                      data
+                    }) : config.slots?.DataSourcePanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : createCommentVNode("", true)
+                  ]),
+                  key: "7"
+                } : void 0
+              ]), 1040)) : createCommentVNode("", true)
+            ])), [
+              [vShow, activeTabName.value === config.text]
+            ]);
           }), 128))
-        ]),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
-          return withDirectives((openBlock(), createElementBlock("div", {
-            class: "m-editor-sidebar-content",
-            key: config.$key ?? index
-          }, [
-            config ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
-              config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
-                name: "component-list-panel-header",
-                fn: withCtx(() => [
-                  config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                ]),
-                key: "0"
-              } : void 0,
-              config.$key === "component-list" || config.slots?.componentListItem ? {
-                name: "component-list-item",
-                fn: withCtx(({ component }) => [
-                  config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
-                    key: 0,
-                    component
-                  }) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
-                    key: 1,
-                    component
-                  }, null, 8, ["component"])) : createCommentVNode("", true)
-                ]),
-                key: "1"
-              } : void 0,
-              config.$key === "layer" || config.slots?.layerPanelHeader ? {
-                name: "layer-panel-header",
-                fn: withCtx(() => [
-                  config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                ]),
-                key: "2"
-              } : void 0,
-              config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
-                name: "code-block-panel-header",
-                fn: withCtx(() => [
-                  config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                ]),
-                key: "3"
-              } : void 0,
-              config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
-                name: "code-block-panel-tool",
-                fn: withCtx(({ id, data }) => [
-                  config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
-                    key: 0,
-                    id,
-                    data
-                  }) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
-                ]),
-                key: "4"
-              } : void 0,
-              config.$key === "layer" || config.slots?.layerNodeContent ? {
-                name: "layer-node-content",
-                fn: withCtx(({ data: nodeData }) => [
-                  config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
-                    key: 0,
-                    data: nodeData
-                  }) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
-                    key: 1,
-                    data: nodeData
-                  }, null, 8, ["data"])) : createCommentVNode("", true)
-                ]),
-                key: "5"
-              } : void 0,
-              config.$key === "layer" || config.slots?.layerNodeTool ? {
-                name: "layer-node-tool",
-                fn: withCtx(({ data: nodeData }) => [
-                  config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-tool", {
-                    key: 0,
-                    data: nodeData
-                  }) : config.slots?.layerNodeTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
-                    key: 1,
-                    data: nodeData
-                  }, null, 8, ["data"])) : createCommentVNode("", true)
-                ]),
-                key: "6"
-              } : void 0,
-              config.$key === "data-source" || config.slots?.codeBlockPanelTool ? {
-                name: "data-source-panel-tool",
-                fn: withCtx(({ data }) => [
-                  config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-tool", {
-                    key: 0,
-                    data
-                  }) : config.slots?.DataSourcePanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : createCommentVNode("", true)
-                ]),
-                key: "7"
-              } : void 0
-            ]), 1040)) : createCommentVNode("", true)
-          ])), [
-            [vShow, activeTabName.value === config.text]
-          ]);
-        }), 128))
-      ])) : createCommentVNode("", true);
+        ])) : createCommentVNode("", true),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createElementVNode("div", _hoisted_5$3, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
+              return withDirectives((openBlock(), createElementBlock("div", {
+                key: config.$key ?? index,
+                ref_for: true,
+                ref_key: "floatBox",
+                ref: floatBox,
+                class: normalizeClass(["m-editor-float-box", `m-editor-float-box-${config.$key}`]),
+                style: normalizeStyle({
+                  left: `${unref(floatBoxStates)?.get(config.$key)?.left}px`,
+                  top: `${unref(floatBoxStates)?.get(config.$key)?.top}px`,
+                  zIndex: unref(floatBoxStates)?.get(config.$key)?.zIndex
+                })
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(["m-editor-float-box-header", `m-editor-float-box-header-${config.$key}`]),
+                  onClick: ($event) => unref(showFloatBox)(config.$key)
+                }, [
+                  createElementVNode("div", null, toDisplayString(config.text), 1),
+                  createVNode(_sfc_main$N, {
+                    class: "m-editor-float-box-close",
+                    icon: unref(Close),
+                    onClick: withModifiers(($event) => unref(closeFloatBox)(config.$key), ["stop"])
+                  }, null, 8, ["icon", "onClick"])
+                ], 10, _hoisted_6$2),
+                createElementVNode("div", _hoisted_7, [
+                  config && unref(floatBoxStates)?.get(config.$key)?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.boxComponentConfig?.component || config.component), mergeProps({ key: 0 }, config.boxComponentConfig?.props || config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
+                ])
+              ], 6)), [
+                [vShow, unref(floatBoxStates)?.get(config.$key)?.status]
+              ]);
+            }), 128))
+          ])
+        ]))
+      ], 64);
     };
   }
 });
@@ -7950,8 +8203,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     pos: {}
   },
   emits: ["scroll"],
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const bar = ref();
     const thumb = ref();
     const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
@@ -8153,7 +8407,9 @@ const state = reactive({
   showGuides: true,
   showRule: true,
   propsPanelSize: "small",
-  showAddPageButton: true
+  showAddPageButton: true,
+  floatBox: /* @__PURE__ */ new Map(),
+  hideSlideBar: false
 });
 class Ui extends BaseService {
   constructor() {
@@ -8193,6 +8449,19 @@ class Ui extends BaseService {
     }
     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);
@@ -8405,8 +8674,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     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);
     };
@@ -9469,254 +9739,41 @@ class ComponentList extends BaseService {
 }
 const componentListService = new ComponentList();
 
-class Target extends EventEmitter {
-  /**
-   * 如何识别目标
-   */
-  isTarget;
-  /**
-   * 目标id，不可重复
-   * 例如目标是代码块，则为代码块id
-   */
-  id;
-  /**
-   * 目标名称，用于显示在依赖列表中
-   */
-  name;
-  /**
-   * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type
-   */
-  type = DepTargetType.DEFAULT;
-  /**
-   * 依赖详情
-   * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }
-   */
-  deps = 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));
-  }
-  destroy() {
-    this.removeAllListeners();
+class Dep extends BaseService {
+  watcher = new Watcher({ initialTargets: reactive({}) });
+  removeTargets(type = DepTargetType.DEFAULT) {
+    this.watcher.removeTargets(type);
+    this.emit("remove-target");
   }
-}
-class Watcher extends EventEmitter {
-  targets = reactive({});
-  /**
-   * 获取指定类型中的所有target
-   * @param type 分类
-   * @returns Target[]
-   */
   getTargets(type = DepTargetType.DEFAULT) {
-    return this.targets[type] || {};
-  }
-  /**
-   * 添加新的目标
-   * @param target Target
-   */
-  addTarget(target) {
-    const targets = this.getTargets(target.type) || {};
-    this.targets[target.type] = targets;
-    targets[target.id] = target;
-    this.emit("add-target", target);
+    return this.watcher.getTargets(type);
   }
-  /**
-   * 获取指定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];
-      }
-    }
+    return this.watcher.getTarget(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;
+  addTarget(target) {
+    this.watcher.addTarget(target);
+    this.emit("add-target", target);
   }
-  /**
-   * 删除指定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 (isObject$1(item)) {
-              collectTarget(item, `${fullKey}.${index}`);
-            }
-          });
-        } else if (isObject$1(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 = reactive({});
 let methodMap = reactive({});
@@ -9940,61 +9997,6 @@ const defaultEditorProps = {
   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 === HookType.CODE && !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(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
-    if (prefixIndex === -1) {
-      return false;
-    }
-    const dsId = prefixId.substring(prefixIndex + 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,
@@ -10200,9 +10202,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   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(createDataSourceTarget(ds, reactive({})));
+    depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
+    depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
   const rootChangeHandler = async (value, preValue) => {
     if (!value)
@@ -10342,7 +10344,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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,
@@ -10510,5 +10513,5 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$r as CodeBlockList, _sfc_main$q as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$k as ContentMenu, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DepTargetType, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$g as LayerPanel, Layout, _sfc_main$A as LayoutContainer, _sfc_main$v as PropsPanel, _sfc_main$B as Resizer, _sfc_main$A as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChilrenLayout, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$r as CodeBlockList, _sfc_main$q as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$k as ContentMenu, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$g as LayerPanel, Layout, _sfc_main$A as LayoutContainer, _sfc_main$v as PropsPanel, _sfc_main$B as Resizer, _sfc_main$A as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChilrenLayout, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map