@tmagic/editor 1.5.0-beta.9 → 1.5.1

package/dist/tmagic-editor.js

@@ -1,21 +1,21 @@
-import designPlugin__default, { TMagicIcon, TMagicButton, TMagicCard, getDesignConfig, TMagicSelect, useZIndex, tMagicMessage, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+import designPlugin__default, { TMagicIcon, TMagicButton, TMagicCard, tMagicMessage, getDesignConfig, TMagicSelect, useZIndex, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 export * from '@tmagic/design';
 export { default as designPlugin } from '@tmagic/design';
-import formPlugin__default, { MContainer, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel } from '@tmagic/form';
+import formPlugin__default, { MContainer, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel, createForm } from '@tmagic/form';
 export * from '@tmagic/form';
 export { default as formPlugin } from '@tmagic/form';
 import tablePlugin__default, { MagicTable } from '@tmagic/table';
 export * from '@tmagic/table';
 export { default as tablePlugin } from '@tmagic/table';
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, createCommentVNode, Fragment, renderList, mergeProps, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, createTextVNode, isRef, createStaticVNode, watchEffect, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, Transition, mergeDefaults } from 'vue';
-import { Edit, FullScreen, View, Close, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Search, ArrowRight, CopyDocument, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
-import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys } from 'lodash-es';
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, useTemplateRef, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, createCommentVNode, Fragment, renderList, mergeProps, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, createTextVNode, isRef, createStaticVNode, watchEffect, withModifiers, toHandlers, createSlots, markRaw, getCurrentInstance, withDirectives, vShow, Transition, resolveDirective, mergeDefaults } from 'vue';
+import { Edit, FullScreen, View, Close, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, Search, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Sugar, ArrowRight, CopyDocument, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
+import { throttle, isEmpty, isObject, cloneDeep, mergeWith, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
 import * as monaco from 'monaco-editor';
 import { HookCodeType, HookType, NODE_CONDS_KEY, Target, Watcher, NodeType, ActionType, DepTargetType, DEFAULT_EVENTS, DEFAULT_METHODS, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/core';
 export { DepTargetType } from '@tmagic/core';
-import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, toLine, guid, getValueByKeyPath, setValueByKeyPath, dataSourceTemplateRegExp, getKeysArray, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, convertToNumber, getIdFromEl, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, removeClassName, addClassName, removeClassNameByClassName } from '@tmagic/utils';
+import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, isValueIncludeDataSource, toLine, guid, getValueByKeyPath, setValueByKeyPath, getNodeInfo, dataSourceTemplateRegExp, getKeysArray, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, convertToNumber, getIdFromEl, traverseNode, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, removeClassName, addClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
 export * from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
 import StageCore__default, { isFixed, GuidesType, getOffset, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
@@ -23,11 +23,12 @@ export * from '@tmagic/stage';
 export { default as StageCore } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import Gesto from 'gesto';
+import { detailedDiff } from 'deep-object-diff';
 import Sortable from 'sortablejs';
 import KeyController from 'keycon';
 
-const _hoisted_1$w = ["src"];
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$y = ["src"];
+const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -51,7 +52,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$w)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$y)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -79,10 +80,10 @@ const getEditorConfig = (key) => $TMAGIC_EDITOR[key];
 emmetHTML(monaco);
 emmetCSS(monaco, ["css", "scss"]);
 
-const _hoisted_1$v = {
+const _hoisted_1$x = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
   },
@@ -135,7 +136,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     let vsDiffEditor = null;
     const values = ref("");
     const loading = ref(false);
-    const codeEditor = ref();
+    const codeEditor = useTemplateRef("codeEditor");
     const resizeObserver = new globalThis.ResizeObserver(
       throttle(() => {
         vsEditor?.layout();
@@ -239,7 +240,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$v, [
+      return openBlock(), createElementBlock("div", _hoisted_1$x, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -255,7 +256,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
               onClick: fullScreenHandler
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Y, { icon: unref(FullScreen) }, null, 8, ["icon"])
+                createVNode(_sfc_main$Z, { icon: unref(FullScreen) }, null, 8, ["icon"])
               ]),
               _: 1
             }),
@@ -271,7 +272,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsVsCode"
   },
@@ -290,13 +291,11 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
-    const props = __props;
     const save = (v) => {
-      props.model[props.name] = v;
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$X, {
+      return openBlock(), createBlock(_sfc_main$Y, {
         height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
         language: _ctx.config.language,
@@ -311,7 +310,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$W = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeLink"
   },
@@ -390,7 +389,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$V = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelect"
   },
@@ -442,11 +441,13 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 { value: HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
               ],
               defaultValue: "code",
-              onChange: (mForm, v, { model }) => {
+              onChange: (mForm, v, { model, prop, changeRecords }) => {
                 if (v === HookCodeType.DATA_SOURCE_METHOD) {
                   model.codeId = [];
+                  changeRecords.push({ propPath: prop.replace("codeType", "codeId"), value: [] });
                 } else {
                   model.codeId = "";
+                  changeRecords.push({ propPath: prop.replace("codeType", "codeId"), value: "" });
                 }
                 return v;
               }
@@ -485,9 +486,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
-    const changeHandler = async () => {
-      emit("change", props.model[props.name]);
-    };
+    const changeHandler = (v, eventData) => emit("change", v, eventData);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["m-fields-code-select", _ctx.config.className])
@@ -529,6 +528,7 @@ const numberOptions = [
 ];
 const styleTabConfig = {
   title: "样式",
+  display: ({ services }) => !(services.uiService.get("showStylePanel") ?? true),
   items: [
     {
       name: "style",
@@ -541,6 +541,7 @@ const styleTabConfig = {
               type: "data-source-field-select",
               name: "position",
               text: "固定定位",
+              labelPosition: "left",
               checkStrictly: false,
               dataSourceFieldType: ["string"],
               fieldConfig: {
@@ -569,7 +570,7 @@ const styleTabConfig = {
               fieldConfig: {
                 type: "text"
               },
-              disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
+              disabled: (_vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
             },
             {
               type: "data-source-field-select",
@@ -590,7 +591,7 @@ const styleTabConfig = {
               fieldConfig: {
                 type: "text"
               },
-              disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
+              disabled: (_vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
             }
           ]
         },
@@ -598,6 +599,27 @@ const styleTabConfig = {
           type: "fieldset",
           legend: "盒子",
           items: [
+            {
+              type: "data-source-field-select",
+              name: "display",
+              text: "display",
+              checkStrictly: false,
+              dataSourceFieldType: ["string"],
+              fieldConfig: {
+                type: "select",
+                clearable: true,
+                allowCreate: true,
+                options: [
+                  { text: "block", value: "block" },
+                  { text: "flex", value: "flex" },
+                  { text: "none", value: "none" },
+                  { text: "inline-block", value: "inline-block" },
+                  { text: "grid", value: "grid" },
+                  { text: "inline", value: "inline" },
+                  { text: "initial", value: "initial" }
+                ]
+              }
+            },
             {
               type: "data-source-field-select",
               name: "width",
@@ -626,13 +648,16 @@ const styleTabConfig = {
               dataSourceFieldType: ["string"],
               fieldConfig: {
                 type: "select",
+                clearable: true,
+                allowCreate: true,
                 options: [
                   { text: "visible", value: "visible" },
                   { text: "hidden", value: "hidden" },
                   { text: "clip", value: "clip" },
                   { text: "scroll", value: "scroll" },
                   { text: "auto", value: "auto" },
-                  { text: "overlay", value: "overlay" }
+                  { text: "overlay", value: "overlay" },
+                  { text: "initial", value: "initial" }
                 ]
               }
             }
@@ -699,7 +724,7 @@ const styleTabConfig = {
               checkStrictly: false,
               dataSourceFieldType: ["string"],
               fieldConfig: {
-                type: "text"
+                type: "img-upload"
               }
             },
             {
@@ -828,18 +853,20 @@ const advancedTabConfig = {
     {
       name: "created",
       text: "created",
+      labelPosition: "top",
       type: "code-select"
     },
     {
       name: "mounted",
       text: "mounted",
+      labelPosition: "top",
       type: "code-select"
     }
   ]
 };
 const displayTabConfig = {
   title: "显示条件",
-  display: (vm, { model }) => model.type !== "page",
+  display: (_vm, { model }) => model.type !== "page",
   items: [
     {
       type: "display-conds",
@@ -866,8 +893,21 @@ const fillConfig$1 = (config = [], labelWidth = "80px") => [
           // 组件id，必须要有
           {
             name: "id",
-            type: "display",
-            text: "id"
+            text: "ID",
+            type: "text",
+            disabled: true,
+            append: {
+              type: "button",
+              text: "复制",
+              handler: async (vm, { model }) => {
+                try {
+                  await navigator.clipboard.writeText(`${model.id}`);
+                  tMagicMessage.success("已复制");
+                } catch (err) {
+                  tMagicMessage.error("复制失败");
+                }
+              }
+            }
           },
           {
             name: "name",
@@ -1147,15 +1187,6 @@ const serializeConfig = (config) => serialize(config, {
   space: 2,
   unsafe: true
 }).replace(/"(\w+)":\s/g, "$1: ");
-const traverseNode = (node, cb, parents = []) => {
-  cb(node, parents);
-  if (Array.isArray(node.items) && node.items.length) {
-    parents.push(node);
-    node.items.forEach((item) => {
-      traverseNode(item, cb, [...parents]);
-    });
-  }
-};
 const moveItemsInContainer = (sourceIndices, parent, targetIndex) => {
   sourceIndices.sort((a, b) => a - b);
   for (let i = sourceIndices.length - 1; i >= 0; i--) {
@@ -1172,6 +1203,55 @@ const moveItemsInContainer = (sourceIndices, parent, targetIndex) => {
     }
   }
 };
+const isIncludeDataSourceByDiffAddResult = (diffResult) => {
+  for (const value of Object.values(diffResult)) {
+    const result = isValueIncludeDataSource(value);
+    if (result) {
+      return true;
+    }
+    if (isObject(value)) {
+      return isIncludeDataSourceByDiffAddResult(value);
+    }
+  }
+  return false;
+};
+const isIncludeDataSourceByDiffUpdatedResult = (diffResult, oldNode) => {
+  for (const [key, value] of Object.entries(diffResult)) {
+    if (isValueIncludeDataSource(value)) {
+      return true;
+    }
+    if (isValueIncludeDataSource(oldNode[key])) {
+      return true;
+    }
+    if (isObject(value)) {
+      return isIncludeDataSourceByDiffUpdatedResult(value, oldNode[key]);
+    }
+  }
+  return false;
+};
+const isIncludeDataSource = (node, oldNode) => {
+  const diffResult = detailedDiff(oldNode, node);
+  let isIncludeDataSource2 = false;
+  if (diffResult.updated) {
+    if (diffResult.updated[NODE_CONDS_KEY]) {
+      return true;
+    }
+    isIncludeDataSource2 = isIncludeDataSourceByDiffUpdatedResult(diffResult.updated, oldNode);
+    if (isIncludeDataSource2) return true;
+  }
+  if (diffResult.added) {
+    isIncludeDataSource2 = isIncludeDataSourceByDiffAddResult(diffResult.added);
+    if (isIncludeDataSource2) return true;
+  }
+  if (diffResult.deleted) {
+    if (diffResult.deleted[NODE_CONDS_KEY]) {
+      return true;
+    }
+    isIncludeDataSource2 = isIncludeDataSourceByDiffAddResult(diffResult.deleted);
+    if (isIncludeDataSource2) return true;
+  }
+  return isIncludeDataSource2;
+};
 
 const compose = (middleware, isAsync) => {
   if (!Array.isArray(middleware)) throw new TypeError("Middleware 必须是一个数组!");
@@ -1718,7 +1798,8 @@ class WebStorage extends BaseService {
       case "number" /* NUMBER */:
         return Number(item);
       case "boolean" /* BOOLEAN */:
-        return Boolean(item);
+        if (item === "true") return true;
+        if (item === "false") return false;
       default:
         return item;
     }
@@ -1877,28 +1958,7 @@ class Editor extends BaseService {
     if (raw) {
       root = toRaw(root);
     }
-    const info = {
-      node: null,
-      parent: null,
-      page: null
-    };
-    if (!root) return info;
-    if (id === root.id) {
-      info.node = root;
-      return info;
-    }
-    const path = getNodePath(id, root.items);
-    if (!path.length) return info;
-    path.unshift(root);
-    info.node = path[path.length - 1];
-    info.parent = path[path.length - 2];
-    path.forEach((item) => {
-      if (isPage(item) || isPageFragment(item)) {
-        info.page = item;
-        return;
-      }
-    });
-    return info;
+    return getNodeInfo(id, root);
   }
   /**
    * 根据ID获取指点节点配置
@@ -2119,10 +2179,10 @@ class Editor extends BaseService {
     const rootItems = root.items || [];
     if (isPage(node)) {
       this.state.pageLength -= 1;
-      await selectDefault(getPageList(root));
+      await selectDefault(rootItems);
     } else if (isPageFragment(node)) {
       this.state.pageFragmentLength -= 1;
-      await selectDefault(getPageFragmentList(root));
+      await selectDefault(rootItems);
     } else {
       await this.select(parent);
       stage?.select(parent.id);
@@ -2145,13 +2205,13 @@ class Editor extends BaseService {
     }
     this.emit("remove", nodes);
   }
-  async doUpdate(config) {
+  async doUpdate(config, { changeRecords = [] } = {}) {
     const root = this.get("root");
     if (!root) throw new Error("root为空");
     if (!config?.id) throw new Error("没有配置或者配置缺少id值");
     const info = this.getNodeInfo(config.id, false);
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
-    const node = cloneDeep(toRaw(info.node));
+    const node = toRaw(info.node);
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key) => {
       if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
@@ -2167,7 +2227,11 @@ class Editor extends BaseService {
     if (!newConfig.type) throw new Error("配置缺少type值");
     if (newConfig.type === NodeType.ROOT) {
       this.set("root", newConfig);
-      return newConfig;
+      return {
+        oldNode: node,
+        newNode: newConfig,
+        changeRecords
+      };
     }
     const { parent } = info;
     if (!parent) throw new Error("获取不到父级节点");
@@ -2184,30 +2248,29 @@ class Editor extends BaseService {
     const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
     nodes.splice(targetIndex, 1, newConfig);
     this.set("nodes", [...nodes]);
-    this.get("stage")?.update({
-      config: cloneDeep(newConfig),
-      parentId: parent.id,
-      root: cloneDeep(root)
-    });
     if (isPage(newConfig) || isPageFragment(newConfig)) {
       this.set("page", newConfig);
     }
     this.addModifiedNodeId(newConfig.id);
-    return newConfig;
+    return {
+      oldNode: node,
+      newNode: newConfig,
+      changeRecords
+    };
   }
   /**
    * 更新节点
    * @param config 新的节点配置，配置中需要有id信息
    * @returns 更新后的节点配置
    */
-  async update(config) {
+  async update(config, data = {}) {
     const nodes = Array.isArray(config) ? config : [config];
-    const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
-    if (newNodes[0]?.type !== NodeType.ROOT) {
+    const updateData = await Promise.all(nodes.map((node) => this.doUpdate(node, data)));
+    if (updateData[0].oldNode?.type !== NodeType.ROOT) {
       this.pushHistoryState();
     }
-    this.emit("update", newNodes);
-    return Array.isArray(config) ? newNodes : newNodes[0];
+    this.emit("update", updateData);
+    return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
   }
   /**
    * 将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
@@ -2401,7 +2464,7 @@ class Editor extends BaseService {
       parent.items?.splice(index, 1);
       await stage.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
       const layout = await this.getLayout(target);
-      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
+      const newConfig = mergeWith(cloneDeep(node), config, (_objValue, srcValue) => {
         if (Array.isArray(srcValue)) {
           return srcValue;
         }
@@ -2410,7 +2473,11 @@ class Editor extends BaseService {
       target.items.push(newConfig);
       await stage.select(targetId);
       const targetParent = this.getParentById(target.id);
-      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root: cloneDeep(root) });
+      await stage.update({
+        config: cloneDeep(target),
+        parentId: targetParent?.id,
+        root: cloneDeep(root)
+      });
       await this.select(newConfig);
       stage.select(newConfig.id);
       this.addModifiedNodeId(target.id);
@@ -2763,6 +2830,7 @@ const HttpFormConfig = [
         name: "params",
         type: "key-value",
         defaultValue: {},
+        advanced: true,
         text: "参数"
       },
       {
@@ -2776,6 +2844,7 @@ const HttpFormConfig = [
         name: "headers",
         type: "key-value",
         defaultValue: {},
+        advanced: true,
         text: "请求头"
       }
     ]
@@ -2830,7 +2899,7 @@ const fillConfig = (config) => [
       },
       {
         title: "请求参数裁剪",
-        display: (formState, { model }) => model.type === "http",
+        display: (_formState, { model }) => model.type === "http",
         items: [
           {
             name: "beforeRequest",
@@ -2842,7 +2911,7 @@ const fillConfig = (config) => [
       },
       {
         title: "响应数据裁剪",
-        display: (formState, { model }) => model.type === "http",
+        display: (_formState, { model }) => model.type === "http",
         items: [
           {
             name: "afterResponse",
@@ -3009,6 +3078,10 @@ globalThis.requestIdleCallback = globalThis.requestIdleCallback || function(cb)
 class IdleTask extends EventEmitter {
   taskList = [];
   taskHandle = null;
+  constructor() {
+    super();
+    this.setMaxListeners(1e3);
+  }
   enqueueTask(taskHandler, taskData) {
     this.taskList.push({
       handler: taskHandler,
@@ -3018,6 +3091,9 @@ class IdleTask extends EventEmitter {
       this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
     }
   }
+  clearTasks() {
+    this.taskList = [];
+  }
   on(eventName, listener) {
     return super.on(eventName, listener);
   }
@@ -3028,12 +3104,30 @@ class IdleTask extends EventEmitter {
     return super.emit(eventName, ...args);
   }
   runTaskQueue(deadline) {
-    while ((deadline.timeRemaining() > 15 || deadline.didTimeout) && this.taskList.length) {
-      const task = this.taskList.shift();
-      task.handler(task.data);
+    while (deadline.timeRemaining() > 0 && this.taskList.length) {
+      const timeRemaining = deadline.timeRemaining();
+      let times = 0;
+      if (timeRemaining <= 5) {
+        times = 10;
+      } else if (timeRemaining <= 10) {
+        times = 100;
+      } else if (timeRemaining <= 15) {
+        times = 300;
+      } else {
+        times = 600;
+      }
+      for (let i = 0; i < times; i++) {
+        const task = this.taskList.shift();
+        if (task) {
+          task.handler(task.data);
+        }
+        if (this.taskList.length === 0) {
+          break;
+        }
+      }
     }
     if (this.taskList.length) {
-      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
+      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
     } else {
       this.taskHandle = 0;
       this.emit("finish");
@@ -3178,7 +3272,7 @@ const updateStatus = (nodeStatusMap, id, status) => {
   });
 };
 
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3194,7 +3288,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const form = ref();
+    const form = useTemplateRef("form");
     const getFormConfig = (items = []) => [
       {
         type: "fieldset",
@@ -3215,10 +3309,10 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
         }))
       )
     );
-    const onParamsChangeHandler = async () => {
+    const onParamsChangeHandler = async (v, eventData) => {
       try {
         const value = await form.value?.submitForm(true);
-        emit("change", value);
+        emit("change", value, eventData);
       } catch (e) {
         error(e);
       }
@@ -3238,9 +3332,9 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$u = { class: "m-fields-code-select-col" };
-const _hoisted_2$g = { class: "code-select-container" };
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _hoisted_1$w = { class: "m-fields-code-select-col" };
+const _hoisted_2$i = { class: "code-select-container" };
+const _sfc_main$T = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelectCol"
   },
@@ -3311,22 +3405,39 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         return codeId;
       }
     };
-    const onParamsChangeHandler = (value) => {
+    const onCodeIdChangeHandler = (value) => {
       props.model.params = value.params;
-      emit("change", props.model);
+      emit("change", props.model, {
+        changeRecords: [
+          {
+            propPath: props.prop,
+            value: value[props.name]
+          }
+        ]
+      });
+    };
+    const onParamsChangeHandler = (value, eventData) => {
+      props.model.params = value.params;
+      emit("change", props.model, {
+        ...eventData,
+        changeRecords: (eventData.changeRecords || []).map((item) => ({
+          prop: `${props.prop.replace(props.name, "")}${item.propPath}`,
+          value: item.value
+        }))
+      });
     };
     const editCode = (id) => {
       eventBus?.emit("edit-code", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$u, [
-        createElementVNode("div", _hoisted_2$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$w, [
+        createElementVNode("div", _hoisted_2$i, [
           createVNode(unref(MContainer), {
             class: "select",
             config: selectConfig,
             model: _ctx.model,
             size: _ctx.size,
-            onChange: onParamsChangeHandler
+            onChange: onCodeIdChangeHandler
           }, null, 8, ["model", "size"]),
           _ctx.model[_ctx.name] && hasCodeBlockSidePanel.value ? (openBlock(), createBlock(unref(TMagicButton), {
             key: 0,
@@ -3335,14 +3446,14 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => editCode(_ctx.model[_ctx.name]))
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Y, {
+              createVNode(_sfc_main$Z, {
                 icon: !notEditable.value ? unref(Edit) : unref(View)
               }, null, 8, ["icon"])
             ]),
             _: 1
           }, 8, ["size"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$T, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$U, {
           name: "params",
           key: _ctx.model[_ctx.name],
           model: _ctx.model,
@@ -3355,7 +3466,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCondOpSelect"
   },
@@ -3441,7 +3552,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "FloatingBox",
   props: /* @__PURE__ */ mergeModels({
     position: { default: () => ({ left: 0, top: 0 }) },
@@ -3461,8 +3572,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     const height = useModel(__props, "height");
     const visible = useModel(__props, "visible");
     const props = __props;
-    const target = ref();
-    const titleEl = ref();
+    const target = useTemplateRef("target");
+    const titleEl = useTemplateRef("titleEl");
     const zIndex = useZIndex();
     const curZIndex = ref(0);
     const titleHeight = ref(0);
@@ -3596,7 +3707,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
                 onClick: closeHandler
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$Y, { icon: unref(Close) }, null, 8, ["icon"])
+                  createVNode(_sfc_main$Z, { icon: unref(Close) }, null, 8, ["icon"])
                 ]),
                 _: 1
               })
@@ -3617,7 +3728,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
 const useCodeBlockEdit = (codeBlockService) => {
   const codeConfig = ref();
   const codeId = ref();
-  const codeBlockEditor = ref();
+  const codeBlockEditor = useTemplateRef("codeBlockEditor");
   const createCodeBlock = async () => {
     if (!codeBlockService) {
       tMagicMessage.error("新增代码块失败");
@@ -3625,7 +3736,7 @@ const useCodeBlockEdit = (codeBlockService) => {
     }
     codeConfig.value = {
       name: "",
-      content: `({app, params}) => {
+      content: `({app, params, flowState}) => {
   // place your code here
 }`,
       params: []
@@ -3671,81 +3782,10 @@ const useCodeBlockEdit = (codeBlockService) => {
   };
 };
 
-const useDataSourceMethod = () => {
-  const codeConfig = ref();
-  const codeBlockEditor = ref();
-  const dataSource = ref();
-  const dataSourceMethod = ref("");
-  return {
-    codeConfig,
-    codeBlockEditor,
-    createCode: async (model) => {
-      codeConfig.value = {
-        name: "",
-        content: `({ params, dataSource, app }) => {
-  // place your code here
-}`,
-        params: []
-      };
-      await nextTick();
-      dataSource.value = model;
-      dataSourceMethod.value = "";
-      codeBlockEditor.value?.show();
-    },
-    editCode: async (model, methodName) => {
-      const method = model.methods?.find((method2) => method2.name === methodName);
-      if (!method) {
-        tMagicMessage.error("获取数据源方法失败");
-        return;
-      }
-      let codeContent = method.content || `({ params, dataSource, app }) => {
-  // place your code here
-}`;
-      if (typeof codeContent !== "string") {
-        codeContent = codeContent.toString();
-      }
-      codeConfig.value = {
-        ...cloneDeep(method),
-        content: codeContent
-      };
-      await nextTick();
-      dataSource.value = model;
-      dataSourceMethod.value = methodName;
-      codeBlockEditor.value?.show();
-    },
-    deleteCode: async (model, methodName) => {
-      if (!model.methods) return;
-      const index = model.methods.findIndex((method) => method.name === methodName);
-      if (index === -1) {
-        return;
-      }
-      model.methods.splice(index, 1);
-    },
-    submitCode: (values) => {
-      if (!dataSource.value) return;
-      if (!dataSource.value.methods) {
-        dataSource.value.methods = [];
-      }
-      if (values.content) {
-        const parseDSL = getEditorConfig("parseDSL");
-        if (typeof values.content === "string") {
-          values.content = parseDSL(values.content);
-        }
-      }
-      if (dataSourceMethod.value) {
-        const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
-        dataSource.value.methods.splice(index, 1, values);
-      } else {
-        dataSource.value.methods.push(values);
-      }
-      codeBlockEditor.value?.hide();
-    }
-  };
-};
-
 const state = reactive({
   uiSelectMode: false,
   showSrc: false,
+  showStylePanel: true,
   zoom: 1,
   stageContainerRect: {
     width: 0,
@@ -4108,7 +4148,7 @@ const useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
 
 const useGetSo = (target, emit) => {
   let getso;
-  const isDraging = ref(false);
+  const isDragging = ref(false);
   onMounted(() => {
     if (!target.value) return;
     getso = new Gesto(target.value, {
@@ -4118,17 +4158,17 @@ const useGetSo = (target, emit) => {
       if (!target.value) return;
       emit("change", e);
     }).on("dragStart", () => {
-      isDraging.value = true;
+      isDragging.value = true;
     }).on("dragEnd", () => {
-      isDraging.value = false;
+      isDragging.value = false;
     });
   });
   onBeforeUnmount(() => {
     getso?.unset();
-    isDraging.value = false;
+    isDragging.value = false;
   });
   return {
-    isDraging
+    isDragging
   };
 };
 
@@ -4190,9 +4230,9 @@ const useNodeStatus$1 = (nodeData) => {
   };
 };
 
-const _hoisted_1$t = { class: "m-editor-data-source-fields" };
-const _hoisted_2$f = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _hoisted_1$v = { class: "m-editor-data-source-fields" };
+const _hoisted_2$h = { class: "m-editor-data-source-fields-footer" };
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFields"
   },
@@ -4229,14 +4269,28 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       calcBoxPosition();
       addDialogVisible.value = true;
     };
-    const fieldChange = ({ index, ...value }) => {
+    const fieldChange = ({ index, ...value }, data) => {
+      addDialogVisible.value = false;
       if (index > -1) {
-        props.model[props.name][index] = value;
+        emit("change", value, {
+          modifyKey: index,
+          changeRecords: (data.changeRecords || []).map((item) => ({
+            propPath: `${props.prop}.${index}.${item.propPath}`,
+            value: item.value
+          }))
+        });
       } else {
-        props.model[props.name].push(value);
+        const modifyKey = props.model[props.name].length;
+        emit("change", value, {
+          modifyKey,
+          changeRecords: [
+            {
+              propPath: `${props.prop}.${modifyKey}`,
+              value
+            }
+          ]
+        });
       }
-      addDialogVisible.value = false;
-      emit("change", props.model[props.name]);
     };
     const fieldColumns = [
       {
@@ -4430,9 +4484,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     const addFromJsonFromChange = ({ data }) => {
       try {
         const value = JSON.parse(data);
-        props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
         addFromJsonDialogVisible.value = false;
-        emit("change", props.model[props.name]);
+        emit("change", getFieldsConfig(value, props.model[props.name]));
       } catch (e) {
         tMagicMessage.error(e.message);
       }
@@ -4443,12 +4496,12 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     const parentFloating = inject("parentFloating", ref(null));
     const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+      return openBlock(), createElementBlock("div", _hoisted_1$v, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$f, [
+        createElementVNode("div", _hoisted_2$h, [
           createVNode(unref(TMagicButton), {
             size: "small",
             disabled: _ctx.disabled,
@@ -4473,7 +4526,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        createVNode(_sfc_main$Q, {
+        createVNode(_sfc_main$R, {
           visible: addDialogVisible.value,
           "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),
           width: width.value,
@@ -4496,7 +4549,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["visible", "width", "height", "title", "position"]),
-        createVNode(_sfc_main$Q, {
+        createVNode(_sfc_main$R, {
           visible: addFromJsonDialogVisible.value,
           "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => addFromJsonDialogVisible.value = $event),
           width: width.value,
@@ -4521,8 +4574,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$s = { class: "m-editor-data-source-field-select" };
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _hoisted_1$u = { class: "m-editor-data-source-field-select" };
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "FieldSelect",
   props: /* @__PURE__ */ mergeModels({
     value: {},
@@ -4603,7 +4656,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$s, [
+      return openBlock(), createElementBlock("div", _hoisted_1$u, [
         _ctx.checkStrictly ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicSelect), {
             "model-value": selectDataSourceId.value,
@@ -4671,7 +4724,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
               onClick: _cache[0] || (_cache[0] = ($event) => editHandler(selectDataSourceId.value))
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Y, {
+                createVNode(_sfc_main$Z, {
                   icon: !notEditable.value ? unref(Edit) : unref(View)
                 }, null, 8, ["icon"])
               ]),
@@ -4685,8 +4738,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$r = { class: "m-fields-data-source-field-select" };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _hoisted_1$t = { class: "m-fields-data-source-field-select" };
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFieldSelect"
   },
@@ -4787,8 +4840,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$r, [
-        showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (openBlock(), createBlock(_sfc_main$O, {
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+        showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (openBlock(), createBlock(_sfc_main$P, {
           key: 0,
           "model-value": _ctx.model[_ctx.name],
           disabled: _ctx.disabled,
@@ -4823,7 +4876,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
               onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Y, { icon: unref(Coin) }, null, 8, ["icon"])
+                createVNode(_sfc_main$Z, { icon: unref(Coin) }, null, 8, ["icon"])
               ]),
               _: 1
             }, 8, ["type", "size"])
@@ -4835,10 +4888,10 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$q = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-const _hoisted_2$e = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+const _hoisted_1$s = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+const _hoisted_2$g = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
 const _hoisted_3$4 = { class: "el-input__inner t-input__inner" };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceInput"
   },
@@ -4859,7 +4912,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { dataSourceService } = inject("services") || {};
-    const autocomplete = ref();
+    const autocomplete = useTemplateRef("autocomplete");
     const isFocused = ref(false);
     const state = ref("");
     const displayState = ref([]);
@@ -5038,12 +5091,12 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$Y, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$Z, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$q, [
+          createElementVNode("div", _hoisted_1$s, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$e, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$g, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -5073,7 +5126,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$Y, {
+            createVNode(_sfc_main$Z, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -5084,11 +5137,11 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$p = { style: { "display": "flex", "margin-bottom": "10px" } };
-const _hoisted_2$d = { style: { "flex": "1" } };
+const _hoisted_1$r = { style: { "display": "flex", "margin-bottom": "10px" } };
+const _hoisted_2$f = { style: { "flex": "1" } };
 const _hoisted_3$3 = { style: { "flex": "1" } };
 const _hoisted_4$3 = { class: "dialog-footer" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
@@ -5114,7 +5167,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     const { height: codeBlockEditorHeight } = useEditorContentHeight();
     const difVisible = ref(false);
     const { rect: windowRect } = useWindowRect();
-    const magicVsEditor = ref();
+    const magicVsEditor = useTemplateRef("magicVsEditor");
     const diffChange = () => {
       if (!magicVsEditor.value || !formBox.value?.form) {
         return;
@@ -5216,14 +5269,14 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         }
       }
     ]);
-    const submitForm = (values) => {
+    const submitForm = (values, data) => {
       changedValue.value = void 0;
-      emit("submit", values);
+      emit("submit", values, data);
     };
     const errorHandler = (error) => {
       tMagicMessage.error(error.message);
     };
-    const formBox = ref();
+    const formBox = useTemplateRef("formBox");
     const changedValue = ref();
     const changeHandler = (values) => {
       changedValue.value = values;
@@ -5239,7 +5292,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         type: "warning",
         distinguishCancelAndClose: true
       }).then(() => {
-        changedValue.value && submitForm(changedValue.value);
+        changedValue.value && submitForm(changedValue.value, { changeRecords: formBox.value?.form?.changeRecords });
         done();
       }).catch((action) => {
         done(action === "cancel");
@@ -5261,7 +5314,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$Q, {
+        createVNode(_sfc_main$R, {
           visible: boxVisible.value,
           "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => boxVisible.value = $event),
           width: width.value,
@@ -5338,8 +5391,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
               ])
             ]),
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$p, [
-                createElementVNode("div", _hoisted_2$d, [
+              createElementVNode("div", _hoisted_1$r, [
+                createElementVNode("div", _hoisted_2$f, [
                   createVNode(unref(TMagicTag), {
                     size: "small",
                     type: "info"
@@ -5362,14 +5415,14 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                   })
                 ])
               ]),
-              difVisible.value ? (openBlock(), createBlock(_sfc_main$X, {
+              difVisible.value ? (openBlock(), createBlock(_sfc_main$Y, {
                 key: 0,
                 ref_key: "magicVsEditor",
                 ref: magicVsEditor,
                 type: "diff",
                 language: "json",
                 initValues: _ctx.content.content,
-                modifiedValues: formBox.value?.form?.values.content,
+                modifiedValues: unref(formBox)?.form?.values.content,
                 style: normalizeStyle(`height: ${unref(windowRect).height - 150}px`)
               }, null, 8, ["initValues", "modifiedValues", "style"])) : createCommentVNode("", true)
             ]),
@@ -5381,9 +5434,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$o = { class: "m-editor-data-source-methods" };
-const _hoisted_2$c = { class: "m-editor-data-source-methods-footer" };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = { class: "m-editor-data-source-methods" };
+const _hoisted_2$e = { class: "m-editor-data-source-methods-footer" };
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethods"
   },
@@ -5403,7 +5456,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
+    const codeConfig = ref();
+    const codeBlockEditor = useTemplateRef("codeBlockEditor");
+    let editIndex = -1;
     const methodColumns = [
       {
         label: "名称",
@@ -5428,16 +5483,29 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         actions: [
           {
             text: "编辑",
-            handler: (row) => {
-              editCode(props.model, row.name);
-              emit("change", props.model[props.name]);
+            handler: (method, index) => {
+              let codeContent = method.content || `({ params, dataSource, app }) => {
+  // place your code here
+}`;
+              if (typeof codeContent !== "string") {
+                codeContent = codeContent.toString();
+              }
+              codeConfig.value = {
+                ...cloneDeep(method),
+                content: codeContent
+              };
+              editIndex = index;
+              nextTick(() => {
+                codeBlockEditor.value?.show();
+              });
             }
           },
           {
             text: "删除",
             buttonType: "danger",
-            handler: (row) => {
-              deleteCode(props.model, row.name);
+            handler: async (row, index) => {
+              await tMagicMessageBox.confirm(`确定删除${row.name}?`, "提示");
+              props.model[props.name].splice(index, 1);
               emit("change", props.model[props.name]);
             }
           }
@@ -5445,20 +5513,56 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       }
     ];
     const createCodeHandler = () => {
-      createCode(props.model);
-      emit("change", props.model[props.name]);
+      codeConfig.value = {
+        name: "",
+        content: `({ params, dataSource, app, flowState }) => {
+  // place your code here
+}`,
+        params: []
+      };
+      editIndex = -1;
+      nextTick(() => {
+        codeBlockEditor.value?.show();
+      });
     };
-    const submitCodeHandler = (values) => {
-      submitCode(values);
-      emit("change", props.model[props.name]);
+    const submitCodeHandler = (value, data) => {
+      if (value.content) {
+        const parseDSL = getEditorConfig("parseDSL");
+        if (typeof value.content === "string") {
+          value.content = parseDSL(value.content);
+        }
+      }
+      if (editIndex > -1) {
+        emit("change", value, {
+          modifyKey: editIndex,
+          changeRecords: (data.changeRecords || []).map((item) => ({
+            propPath: `${props.prop}.${editIndex}.${item.propPath}`,
+            value: item.value
+          }))
+        });
+      } else {
+        const modifyKey = props.model[props.name].length;
+        emit("change", value, {
+          modifyKey,
+          changeRecords: [
+            {
+              propPath: `${props.prop}.${modifyKey}`,
+              value
+            }
+          ]
+        });
+      }
+      editIndex = -1;
+      codeConfig.value = void 0;
+      codeBlockEditor.value?.hide();
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: methodColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$c, [
+        createElementVNode("div", _hoisted_2$e, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5472,12 +5576,12 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$L, {
+        codeConfig.value ? (openBlock(), createBlock(_sfc_main$M, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
           disabled: _ctx.disabled,
-          content: unref(codeConfig),
+          content: codeConfig.value,
           "is-data-source": true,
           "data-source-type": _ctx.model.type,
           onSubmit: submitCodeHandler
@@ -5487,9 +5591,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = { class: "m-fields-data-source-method-select" };
-const _hoisted_2$b = { class: "data-source-method-select-container" };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = { class: "m-fields-data-source-method-select" };
+const _hoisted_2$d = { class: "data-source-method-select-container" };
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethodSelect"
   },
@@ -5575,8 +5679,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
-        createElementVNode("div", _hoisted_2$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+        createElementVNode("div", _hoisted_2$d, [
           createVNode(unref(MContainer), {
             class: "select",
             config: cascaderConfig.value,
@@ -5595,7 +5699,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                 onClick: editCodeHandler
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$Y, {
+                  createVNode(_sfc_main$Z, {
                     icon: !notEditable.value ? unref(Edit) : unref(View)
                   }, null, 8, ["icon"])
                 ]),
@@ -5605,7 +5709,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["content"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$T, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$U, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -5619,9 +5723,9 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$m = { class: "m-editor-data-source-fields" };
-const _hoisted_2$a = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _hoisted_1$o = { class: "m-editor-data-source-fields" };
+const _hoisted_2$c = { class: "m-editor-data-source-fields-footer" };
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMocks"
   },
@@ -5710,7 +5814,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     const columns = [
       {
         type: "expand",
-        component: _sfc_main$X,
+        component: _sfc_main$Y,
         props: (row) => ({
           initValues: row.data,
           language: "json",
@@ -5825,12 +5929,12 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     const parentFloating = inject("parentFloating", ref(null));
     const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$a, [
+        createElementVNode("div", _hoisted_2$c, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5844,7 +5948,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        createVNode(_sfc_main$Q, {
+        createVNode(_sfc_main$R, {
           visible: addDialogVisible.value,
           "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),
           width: width.value,
@@ -5856,7 +5960,6 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         }, {
           body: withCtx(() => [
             createVNode(unref(MFormBox), {
-              ref: "addDialog",
               "label-width": "120px",
               config: formConfig,
               values: formValues.value,
@@ -5872,8 +5975,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$l = { class: "m-fields-data-source-select" };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _hoisted_1$n = { class: "m-fields-data-source-select" };
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceSelect"
   },
@@ -5930,7 +6033,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createVNode(unref(MSelect), {
           model: _ctx.model,
           name: _ctx.name,
@@ -5952,7 +6055,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
               onClick: editHandler
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Y, {
+                createVNode(_sfc_main$Z, {
                   icon: !notEditable.value ? unref(Edit) : unref(View)
                 }, null, 8, ["icon"])
               ]),
@@ -5966,7 +6069,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   ...{
     name: "m-fields-display-conds"
   },
@@ -6075,8 +6178,11 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         }
       ]
     }));
-    const changeHandler = (v) => {
-      emit("change", v);
+    const changeHandler = (v, eventData) => {
+      if (!Array.isArray(props.model[props.name])) {
+        props.model[props.name] = [];
+      }
+      emit("change", v, eventData);
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(MGroupList), {
@@ -6094,12 +6200,12 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$k = { class: "m-fields-event-select" };
-const _hoisted_2$9 = {
+const _hoisted_1$m = { class: "m-fields-event-select" };
+const _hoisted_2$b = {
   key: 1,
   class: "fullWidth"
 };
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsEventSelect"
   },
@@ -6147,7 +6253,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
               if (pageFragment) {
                 events = [
                   {
-                    label: pageFragment.name || "迭代器容器",
+                    label: pageFragment.name || "页面片容器",
                     value: pageFragment.id,
                     children: events
                   }
@@ -6360,30 +6466,31 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       if (!props.model[props.name]) {
         props.model[props.name] = [];
       }
-      props.model[props.name].push(defaultEvent);
-      onChangeHandler();
+      emit("change", defaultEvent, {
+        modifyKey: props.model[props.name].length
+      });
     };
     const removeEvent = (index) => {
       if (!props.name) return;
       props.model[props.name].splice(index, 1);
-      onChangeHandler();
+      emit("change", props.model[props.name]);
     };
-    const onChangeHandler = () => {
-      emit("change", props.model);
+    const eventNameChangeHandler = (v, eventData) => {
+      emit("change", props.model[props.name], eventData);
     };
+    const onChangeHandler = (v, eventData) => emit("change", props.model[props.name], eventData);
     return (_ctx, _cache) => {
       const _component_m_form_table = resolveComponent("m-form-table");
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
-          ref: "eventForm",
           name: "events",
           size: _ctx.size,
           disabled: _ctx.disabled,
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$9, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$b, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -6401,6 +6508,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
               key: index,
               disabled: _ctx.disabled,
               size: _ctx.size,
+              prop: `${_ctx.prop}.${index}`,
               config: actionsConfig.value,
               model: cardItem,
               "label-width": _ctx.config.labelWidth || "100px",
@@ -6413,8 +6521,9 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                   model: cardItem,
                   disabled: _ctx.disabled,
                   size: _ctx.size,
-                  onChange: onChangeHandler
-                }, null, 8, ["config", "model", "disabled", "size"]),
+                  prop: `${_ctx.prop}.${index}`,
+                  onChange: eventNameChangeHandler
+                }, null, 8, ["config", "model", "disabled", "size", "prop"]),
                 createVNode(unref(TMagicButton), {
                   style: { "color": "#f56c6c" },
                   link: "",
@@ -6425,7 +6534,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["icon", "disabled", "size", "onClick"])
               ]),
               _: 2
-            }, 1032, ["disabled", "size", "config", "model", "label-width"]);
+            }, 1032, ["disabled", "size", "prop", "config", "model", "label-width"]);
           }), 128))
         ]))
       ]);
@@ -6433,29 +6542,29 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = {
+const _hoisted_1$l = {
   viewBox: "0 0 32 32",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink"
 };
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$j, _cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$l, _cache[0] || (_cache[0] = [
         createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2)
       ]));
     };
   }
 });
 
-const _hoisted_1$i = { class: "m-fields-key-value" };
-const _hoisted_2$8 = { key: 0 };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _hoisted_1$k = { class: "m-fields-key-value" };
+const _hoisted_2$a = { key: 0 };
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsKeyValue"
   },
@@ -6478,14 +6587,18 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     const records = ref([]);
     const showCode = ref(false);
     watchEffect(() => {
-      const initValues = Object.entries(props.model[props.name] || {});
-      for (const [, value] of initValues) {
-        if (typeof value !== "string") {
-          showCode.value = true;
-          break;
+      if (typeof props.model[props.name] === "function") {
+        showCode.value = true;
+      } else {
+        const initValues = Object.entries(props.model[props.name] || {});
+        for (const [, value] of initValues) {
+          if (typeof value !== "string") {
+            showCode.value = true;
+            break;
+          }
         }
+        records.value = initValues;
       }
-      records.value = initValues;
     });
     const getValue = () => {
       const record = {};
@@ -6513,8 +6626,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
-        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
             return openBlock(), createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -6528,7 +6641,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                 size: _ctx.size,
                 onChange: keyChangeHandler
               }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-              _cache[1] || (_cache[1] = createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1)),
+              _cache[1] || (_cache[1] = createElementVNode("span", { class: "m-fields-key-value-delimiter" }, ":", -1)),
               createVNode(unref(TMagicInput), {
                 placeholder: "value",
                 modelValue: records.value[index][1],
@@ -6538,7 +6651,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                 onChange: valueChangeHandler
               }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
               createVNode(unref(TMagicButton), {
-                class: "m-fileds-key-value-delete",
+                class: "m-fields-key-value-delete",
                 type: "danger",
                 size: _ctx.size,
                 disabled: _ctx.disabled,
@@ -6563,11 +6676,11 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["size", "disabled", "icon"])
         ])) : createCommentVNode("", true),
-        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$X, {
+        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$Y, {
           key: 1,
           height: "200px",
           "init-values": _ctx.model[_ctx.name],
-          language: "json",
+          language: "javascript",
           options: {
             readOnly: _ctx.disabled
           },
@@ -6579,7 +6692,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           size: "default",
           disabled: _ctx.disabled,
           link: "",
-          icon: _sfc_main$E,
+          icon: _sfc_main$F,
           onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
         }, null, 8, ["disabled"])) : createCommentVNode("", true)
       ]);
@@ -6587,9 +6700,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
-const _hoisted_2$7 = { class: "page-fragment-select-container" };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$j = { class: "m-fields-page-fragment-select" };
+const _hoisted_2$9 = { class: "page-fragment-select-container" };
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsPageFragmentSelect"
   },
@@ -6635,8 +6748,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        createElementVNode("div", _hoisted_2$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+        createElementVNode("div", _hoisted_2$9, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
@@ -6644,7 +6757,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: changeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$Y, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$Z, {
             key: 0,
             class: "icon",
             icon: unref(Edit),
@@ -6656,12 +6769,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = {
+const _hoisted_1$i = {
   key: 1,
   class: "m-fields-ui-select",
   style: { "display": "flex" }
 };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsUISelect"
   },
@@ -6692,7 +6805,10 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
     };
     const clickHandler = ({ detail }) => {
-      const id = getIdFromEl()(detail);
+      let { id } = detail;
+      if (detail.nodeType) {
+        id = getIdFromEl()(detail) || id;
+      }
       if (id) {
         props.model[props.name] = id;
         emit("change", id);
@@ -6756,7 +6872,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           ])),
           _: 1
         }, 8, ["icon", "disabled", "size"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$g, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$i, [
         val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicTooltip), {
             content: "清除",
@@ -6823,7 +6939,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -6831,13 +6947,13 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
-    const target = ref();
-    const { isDraging } = useGetSo(target, emit);
+    const target = useTemplateRef("target");
+    const { isDragging } = useGetSo(target, emit);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("span", {
         ref_key: "target",
         ref: target,
-        class: normalizeClass(["m-editor-resizer", { "m-editor-resizer-draging": unref(isDraging) }])
+        class: normalizeClass(["m-editor-resizer", { "m-editor-resizer-dragging": unref(isDragging) }])
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -6845,7 +6961,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSplitView"
   },
@@ -6865,7 +6981,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const el = ref();
+    const el = useTemplateRef("el");
     const hasLeft = computed(() => typeof props.left !== "undefined");
     const hasRight = computed(() => typeof props.right !== "undefined");
     const center = ref(0);
@@ -6983,7 +7099,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$A, { onChange: changeLeft })
+          createVNode(_sfc_main$B, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -6992,7 +7108,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$A, { onChange: changeRight }),
+          createVNode(_sfc_main$B, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -7005,12 +7121,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$f = {
+const _hoisted_1$h = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_2$6 = { class: "el-dropdown-link menubar-menu-button" };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -7066,7 +7182,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
     const mouseupHandler = (item, event) => {
       if (props.eventType !== "mouseup") return;
-      if (item.type === "button") {
+      if (item.type === "button" && event.button === 0) {
         buttonHandler(item, event);
       }
     };
@@ -7081,7 +7197,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$h, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -7095,7 +7211,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$Y, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$Z, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -7113,7 +7229,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             title: _ctx.data.text
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$Y, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$Z, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -7146,7 +7262,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$6, [
+            createElementVNode("span", _hoisted_2$8, [
               createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -7163,69 +7279,90 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$e = {
+const _hoisted_1$g = {
+  key: 0,
+  id: "m-editor-page-bar-add-icon",
+  class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
+};
+const _hoisted_2$7 = {
   key: 1,
   style: { "width": "21px" }
 };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarAddButton"
   },
   __name: "AddButton",
-  props: {
-    type: {}
-  },
   setup(__props) {
-    const props = __props;
     const services = inject("services");
     const uiService = services?.uiService;
     const editorService = services?.editorService;
     const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
-    const addPage = () => {
+    const addPage = (type) => {
       if (!editorService) return;
       const root = toRaw(editorService.get("root"));
       if (!root) throw new Error("root 不能为空");
       const pageConfig = {
-        type: props.type,
-        name: generatePageNameByApp(root, props.type),
+        type,
+        name: generatePageNameByApp(root, type),
         items: []
       };
       editorService.add(pageConfig);
     };
     return (_ctx, _cache) => {
-      return showAddPageButton.value ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        id: "m-editor-page-bar-add-icon",
-        class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-        onClick: addPage
-      }, [
-        createVNode(_sfc_main$Y, { icon: unref(Plus) }, null, 8, ["icon"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$e));
+      return showAddPageButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
+        createVNode(unref(TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
+          reference: withCtx(() => [
+            createVNode(_sfc_main$Z, { icon: unref(Plus) }, null, 8, ["icon"])
+          ]),
+          default: withCtx(() => [
+            createVNode(_sfc_main$z, {
+              data: {
+                type: "button",
+                text: "页面",
+                handler: () => {
+                  addPage(unref(NodeType).PAGE);
+                }
+              }
+            }, null, 8, ["data"]),
+            createVNode(_sfc_main$z, {
+              data: {
+                type: "button",
+                text: "页面片",
+                handler: () => {
+                  addPage(unref(NodeType).PAGE_FRAGMENT);
+                }
+              }
+            }, null, 8, ["data"])
+          ]),
+          _: 1
+        })
+      ])) : (openBlock(), createElementBlock("div", _hoisted_2$7));
     };
   }
 });
 
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBarScrollContainer"
   },
   __name: "PageBarScrollContainer",
   props: {
-    type: {},
-    pageBarSortOptions: {}
+    pageBarSortOptions: {},
+    length: {}
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
     const editorService = services?.editorService;
     const uiService = services?.uiService;
-    const itemsContainer = ref();
+    const itemsContainer = useTemplateRef("itemsContainer");
     const canScroll = ref(false);
     const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
     const showPageListButton = computed(() => uiService?.get("showPageListButton"));
     const itemsContainerWidth = ref(0);
     const setCanScroll = () => {
-      itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21) - (showPageListButton.value ? 37 : 0);
+      itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - 37 - (showAddPageButton.value ? 37 : 21) - (showPageListButton.value ? 37 : 0);
       nextTick(() => {
         if (itemsContainer.value) {
           canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
@@ -7235,7 +7372,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const resizeObserver = new ResizeObserver(() => {
       setCanScroll();
     });
-    const pageBar = ref();
+    const pageBar = useTemplateRef("pageBar");
     onMounted(() => {
       pageBar.value && resizeObserver.observe(pageBar.value);
     });
@@ -7244,38 +7381,43 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     });
     let translateLeft = 0;
     const scroll = (type) => {
-      if (!itemsContainer.value) return;
+      if (!itemsContainer.value || !canScroll.value) return;
       const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
       if (type === "left") {
-        translateLeft += 100;
-        if (translateLeft > 0) {
-          translateLeft = 0;
-        }
+        scrollTo(translateLeft + 200);
       } else if (type === "right") {
-        translateLeft -= 100;
-        if (-translateLeft > maxScrollLeft) {
-          translateLeft = -maxScrollLeft;
-        }
+        scrollTo(translateLeft - 200);
       } else if (type === "start") {
-        translateLeft = 0;
+        scrollTo(0);
       } else if (type === "end") {
-        translateLeft = -maxScrollLeft;
+        scrollTo(-maxScrollLeft);
+      }
+    };
+    const scrollTo = (value) => {
+      if (!itemsContainer.value || !canScroll.value) return;
+      const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+      if (value >= 0) {
+        value = 0;
+      }
+      if (-value > maxScrollLeft) {
+        value = -maxScrollLeft;
       }
+      translateLeft = value;
       itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
     };
-    const pageLength = computed(() => editorService?.get("pageLength") || 0);
-    const pageFragmentLength = computed(() => editorService?.get("pageFragmentLength") || 0);
-    const crateWatchLength = (length) => watch(
-      length,
-      (length2 = 0, preLength = 0) => {
+    watch(
+      () => props.length,
+      (length = 0, preLength = 0) => {
         setTimeout(() => {
           setCanScroll();
-          if (length2 < preLength) {
-            scroll("start");
-          } else {
-            scroll("end");
-          }
-          if (length2 > 1) {
+          nextTick(() => {
+            if (length < preLength || preLength === 0) {
+              scroll("start");
+            } else {
+              scroll("end");
+            }
+          });
+          if (length > 1) {
             const el = document.querySelector(".m-editor-page-bar-items");
             let beforeDragList = [];
             const options = {
@@ -7311,25 +7453,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
-    let unWatchPageLength;
-    let unWatchPageFragmentLength;
-    watch(
-      () => props.type,
-      (type) => {
-        if (type === NodeType.PAGE) {
-          unWatchPageFragmentLength?.();
-          unWatchPageFragmentLength = null;
-          unWatchPageLength = crateWatchLength(pageLength);
-        } else {
-          unWatchPageLength?.();
-          unWatchPageLength = null;
-          unWatchPageFragmentLength = crateWatchLength(pageFragmentLength);
-        }
-      },
-      {
-        immediate: true
+    __expose({
+      itemsContainerWidth,
+      scroll,
+      scrollTo,
+      getTranslateLeft() {
+        return translateLeft;
       }
-    );
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "m-editor-page-bar",
@@ -7337,40 +7468,39 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         ref: pageBar
       }, [
         renderSlot(_ctx.$slots, "prepend"),
-        canScroll.value ? (openBlock(), createElementBlock("div", {
+        _ctx.length ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-          onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
-        }, [
-          createVNode(_sfc_main$Y, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
-        ])) : createCommentVNode("", true),
-        _ctx.type === unref(NodeType).PAGE && pageLength.value || _ctx.type === unref(NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (openBlock(), createElementBlock("div", {
-          key: 1,
           class: "m-editor-page-bar-items",
           ref_key: "itemsContainer",
-          ref: itemsContainer,
-          style: normalizeStyle(`width: ${itemsContainerWidth.value}px`)
+          ref: itemsContainer
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 4)) : createCommentVNode("", true),
+        ], 512)) : createCommentVNode("", true),
+        canScroll.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-left-icon",
+          onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
+        }, [
+          createVNode(_sfc_main$Z, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+        ])) : createCommentVNode("", true),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
-          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+          class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-right-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$Y, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$Z, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
   }
 });
 
-const _hoisted_1$d = {
+const _hoisted_1$f = {
   key: 0,
   id: "m-editor-page-bar-list-icon",
   class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
 };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageList"
   },
@@ -7383,11 +7513,12 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     const uiService = services?.uiService;
     const editorService = services?.editorService;
     const showPageListButton = computed(() => uiService?.get("showPageListButton"));
-    const switchPage = (id) => {
-      editorService?.select(id);
+    const page = computed(() => editorService?.get("page"));
+    const switchPage = async (id) => {
+      await editorService?.select(id);
     };
     return (_ctx, _cache) => {
-      return showPageListButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return showPageListButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
         createVNode(unref(TMagicPopover), {
           "popper-class": "page-bar-popover",
           placement: "top",
@@ -7407,10 +7538,11 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             createElementVNode("div", null, [
               renderSlot(_ctx.$slots, "page-list-popover", { list: _ctx.list }, () => [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, index) => {
-                  return openBlock(), createBlock(_sfc_main$y, {
+                  return openBlock(), createBlock(_sfc_main$z, {
                     data: {
                       type: "button",
                       text: item.devconfig?.tabName || item.name || item.id,
+                      className: item.id === page.value?.id ? "active" : "",
                       handler: () => switchPage(item.id)
                     },
                     key: index
@@ -7426,118 +7558,108 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorPageBarSwitchTypeButton"
-  },
-  __name: "SwitchTypeButton",
+const _hoisted_1$e = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  __name: "Search",
   props: {
-    modelValue: {}
+    "query": {},
+    "queryModifiers": {}
   },
-  emits: ["update:modelValue"],
+  emits: /* @__PURE__ */ mergeModels(["search"], ["update:query"]),
   setup(__props, { emit: __emit }) {
-    const data = [
+    const emit = __emit;
+    const query = useModel(__props, "query");
+    const formConfig = createForm([
       {
-        type: NodeType.PAGE,
-        text: "页面"
+        type: "checkbox-group",
+        name: "pageType",
+        options: [
+          {
+            value: NodeType.PAGE,
+            text: "页面"
+          },
+          {
+            value: NodeType.PAGE_FRAGMENT,
+            text: "页面片段"
+          }
+        ]
       },
       {
-        type: NodeType.PAGE_FRAGMENT,
-        text: "页面片"
+        name: "keyword",
+        type: "text",
+        placeholder: "请输入关键字",
+        clearable: true
       }
-    ];
-    const emit = __emit;
-    const clickHandler = (value) => {
-      emit("update:modelValue", value);
+    ]);
+    const visible = ref(false);
+    const onFormChange = (values) => {
+      query.value = values;
+      emit("search", values);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, renderList(data, (item) => {
-        return createVNode(unref(TMagicButton), {
-          class: normalizeClass(["m-editor-page-bar-switch-type-button", { active: _ctx.modelValue === item.type }]),
-          size: "small",
-          key: item.type,
-          link: "",
-          type: _ctx.modelValue === item.type ? "primary" : "",
-          onClick: ($event) => clickHandler(item.type)
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(item.text), 1)
-          ]),
-          _: 2
-        }, 1032, ["class", "type", "onClick"]);
-      }), 64);
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        createVNode(_sfc_main$Z, {
+          icon: unref(Search),
+          onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
+          class: normalizeClass({ "icon-active": visible.value })
+        }, null, 8, ["icon", "class"]),
+        visible.value ? (openBlock(), createBlock(Teleport, {
+          key: 0,
+          to: ".m-editor-page-bar-tabs"
+        }, [
+          query.value ? (openBlock(), createBlock(unref(MForm), {
+            key: 0,
+            class: "m-editor-page-bar-search-panel",
+            inline: true,
+            config: unref(formConfig),
+            "init-values": query.value,
+            "prevent-submit-default": true,
+            onChange: onFormChange
+          }, null, 8, ["config", "init-values"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ]);
     };
   }
 });
 
-const _hoisted_1$c = { class: "m-editor-page-bar-tabs" };
-const _hoisted_2$5 = ["page-id", "onClick"];
+const _hoisted_1$d = { class: "m-editor-page-bar-tabs" };
+const _hoisted_2$6 = ["data-page-id", "onClick"];
 const _hoisted_3$2 = { class: "m-editor-page-bar-title" };
 const _hoisted_4$2 = ["title"];
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPageBar"
   },
   __name: "PageBar",
   props: {
     disabledPageFragment: { type: Boolean },
-    pageBarSortOptions: {}
+    pageBarSortOptions: {},
+    filterFunction: { type: Function, default: (page, keyword) => page.name?.includes(keyword) || `${page.id}`.includes(keyword) }
   },
   setup(__props) {
-    const active = ref(NodeType.PAGE);
+    const props = __props;
     const services = inject("services");
     const editorService = services?.editorService;
     const root = computed(() => editorService?.get("root"));
     const page = computed(() => editorService?.get("page"));
-    const pageList = computed(() => getPageList(root.value));
-    const pageFragmentList = computed(() => getPageFragmentList(root.value));
-    const list = computed(() => active.value === NodeType.PAGE ? pageList.value : pageFragmentList.value);
-    const activePage = ref("");
-    const activePageFragment = ref("");
-    watch(
-      page,
-      (page2) => {
-        if (!page2) {
-          if (active.value === NodeType.PAGE) {
-            activePage.value = "";
-          }
-          if (active.value === NodeType.PAGE_FRAGMENT) {
-            activePageFragment.value = "";
-          }
-          return;
-        }
-        if (isPage(page2)) {
-          activePage.value = page2?.id;
-          if (active.value !== NodeType.PAGE) {
-            active.value = NodeType.PAGE;
-          }
-        } else if (isPageFragment(page2)) {
-          activePageFragment.value = page2?.id;
-          if (active.value !== NodeType.PAGE_FRAGMENT) {
-            active.value = NodeType.PAGE_FRAGMENT;
-          }
-        }
-      },
-      {
-        immediate: true
-      }
-    );
-    watch(active, (active2) => {
-      if (active2 === NodeType.PAGE) {
-        if (!activePage.value && !pageList.value.length) {
-          editorService?.selectRoot();
-          return;
-        }
-        switchPage(activePage.value);
-        return;
+    const query = ref({
+      pageType: [NodeType.PAGE, NodeType.PAGE_FRAGMENT],
+      keyword: ""
+    });
+    const list = computed(() => {
+      const { pageType, keyword } = query.value;
+      if (pageType.length === 0) {
+        return [];
       }
-      if (active2 === NodeType.PAGE_FRAGMENT) {
-        if (!activePageFragment.value && !pageFragmentList.value.length) {
-          editorService?.selectRoot();
-          return;
+      return (root.value?.items || []).filter((item) => {
+        if (pageType.includes(item.type)) {
+          if (keyword) {
+            return props.filterFunction(item, keyword);
+          }
+          return true;
         }
-        switchPage(activePageFragment.value || pageFragmentList.value[0].id);
-      }
+        return false;
+      });
     });
     const switchPage = (id) => {
       editorService?.select(id);
@@ -7552,20 +7674,50 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     const remove = (node) => {
       editorService?.remove(node);
     };
+    const pageBarScrollContainer = useTemplateRef("pageBarScrollContainer");
+    const pageBarItems = useTemplateRef("pageBarItems");
+    watch(page, (page2) => {
+      if (!page2 || !pageBarScrollContainer.value?.itemsContainerWidth || !pageBarItems.value || pageBarItems.value.length < 2) {
+        return;
+      }
+      const firstItem = pageBarItems.value[0];
+      const lastItem = pageBarItems.value[pageBarItems.value.length - 1];
+      if (page2.id === firstItem.dataset.pageId) {
+        pageBarScrollContainer.value.scroll("start");
+      } else if (page2.id === lastItem.dataset.pageId) {
+        pageBarScrollContainer.value.scroll("end");
+      } else {
+        const pageItem = pageBarItems.value.find((item) => item.dataset.pageId === page2.id);
+        if (!pageItem) {
+          return;
+        }
+        const pageItemRect = pageItem.getBoundingClientRect();
+        const offsetLeft = pageItemRect.left - firstItem.getBoundingClientRect().left;
+        const { itemsContainerWidth } = pageBarScrollContainer.value;
+        const left = itemsContainerWidth - offsetLeft - pageItemRect.width;
+        const translateLeft = pageBarScrollContainer.value.getTranslateLeft();
+        if (offsetLeft + translateLeft < 0 || offsetLeft + pageItemRect.width > itemsContainerWidth - translateLeft) {
+          pageBarScrollContainer.value.scrollTo(left);
+        }
+      }
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        !_ctx.disabledPageFragment ? (openBlock(), createBlock(_sfc_main$u, {
-          key: 0,
-          modelValue: active.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
-        }, null, 8, ["modelValue"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$w, {
-          type: active.value,
-          "page-bar-sort-options": _ctx.pageBarSortOptions
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+        createVNode(_sfc_main$x, {
+          ref_key: "pageBarScrollContainer",
+          ref: pageBarScrollContainer,
+          "page-bar-sort-options": _ctx.pageBarSortOptions,
+          length: list.value.length
         }, {
           prepend: withCtx(() => [
-            createVNode(_sfc_main$x, { type: active.value }, null, 8, ["type"]),
-            createVNode(_sfc_main$v, { list: list.value }, {
+            renderSlot(_ctx.$slots, "page-bar-add-button", {}, () => [
+              createVNode(_sfc_main$y)
+            ]),
+            createVNode(_sfc_main$v, {
+              query: query.value,
+              "onUpdate:query": _cache[0] || (_cache[0] = ($event) => query.value = $event)
+            }, null, 8, ["query"]),
+            createVNode(_sfc_main$w, { list: list.value }, {
               "page-list-popover": withCtx(({ list: list2 }) => [
                 renderSlot(_ctx.$slots, "page-list-popover", { list: list2 })
               ]),
@@ -7576,8 +7728,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item) => {
               return openBlock(), createElementBlock("div", {
                 class: normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
+                ref_for: true,
+                ref_key: "pageBarItems",
+                ref: pageBarItems,
                 key: item.id,
-                "page-id": item.id,
+                "data-page-id": item.id,
                 onClick: ($event) => switchPage(item.id)
               }, [
                 createElementVNode("div", _hoisted_3$2, [
@@ -7605,7 +7760,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                   default: withCtx(() => [
                     createElementVNode("div", null, [
                       renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        createVNode(_sfc_main$y, {
+                        createVNode(_sfc_main$z, {
                           data: {
                             type: "button",
                             text: "复制",
@@ -7613,7 +7768,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        createVNode(_sfc_main$y, {
+                        createVNode(_sfc_main$z, {
                           data: {
                             type: "button",
                             text: "删除",
@@ -7626,19 +7781,19 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 2
                 }, 1024)
-              ], 10, _hoisted_2$5);
+              ], 10, _hoisted_2$6);
             }), 128))
           ]),
           _: 3
-        }, 8, ["type", "page-bar-sort-options"])
+        }, 8, ["page-bar-sort-options", "length"])
       ]);
     };
   }
 });
 
-const _hoisted_1$b = { class: "m-editor-empty-panel" };
-const _hoisted_2$4 = { class: "m-editor-empty-content" };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _hoisted_1$c = { class: "m-editor-empty-panel" };
+const _hoisted_2$5 = { class: "m-editor-empty-content" };
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -7660,14 +7815,14 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createElementVNode("div", _hoisted_2$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        createElementVNode("div", _hoisted_2$5, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(NodeType).PAGE))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$Y, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$Z, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _cache[2] || (_cache[2] = createElementVNode("p", null, "新增页面", -1))
           ]),
@@ -7677,7 +7832,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(unref(NodeType).PAGE_FRAGMENT))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$Y, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$Z, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _cache[3] || (_cache[3] = createElementVNode("p", null, "新增页面片", -1))
           ])) : createCommentVNode("", true)
@@ -7691,24 +7846,24 @@ const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
   __name: "Framework",
   props: {
     disabledPageFragment: { type: Boolean },
-    pageBarSortOptions: {}
+    pageBarSortOptions: {},
+    pageFilterFunction: { type: Function }
   },
   setup(__props) {
     const codeOptions = inject("codeOptions", {});
     const { editorService, uiService } = inject("services") || {};
-    const content = ref();
-    const splitView = ref();
+    const content = useTemplateRef("content");
+    const splitView = useTemplateRef("splitView");
     const root = computed(() => editorService?.get("root"));
     const page = computed(() => editorService?.get("page"));
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
-    const stageLoading = computed(() => editorService?.get("stageLoading") || false);
     const showSrc = computed(() => uiService?.get("showSrc"));
     const getLeftColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
     const getRightColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
@@ -7759,7 +7914,6 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      const _directive_loading = resolveDirective("loading");
       return openBlock(), createElementBlock("div", {
         class: "m-editor",
         ref_key: "content",
@@ -7770,15 +7924,14 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$X, {
+          createVNode(_sfc_main$Y, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : withDirectives((openBlock(), createBlock(_sfc_main$z, {
+        ]) : (openBlock(), createBlock(_sfc_main$A, {
           key: 1,
-          "element-loading-text": "Runtime 加载中...",
           ref_key: "splitView",
           ref: splitView,
           class: "m-editor-content",
@@ -7790,7 +7943,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           right: columnWidth.value.right,
           "onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
           "min-left": 65,
-          "min-right": 20,
+          "min-right": 420,
           "min-center": 100,
           width: frameworkRect.value?.width || 0,
           onChange: columnWidthChange
@@ -7800,13 +7953,17 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             page.value ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
+              createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
             ]),
             renderSlot(_ctx.$slots, "page-bar", {}, () => [
-              createVNode(_sfc_main$t, {
+              createVNode(_sfc_main$u, {
                 "disabled-page-fragment": _ctx.disabledPageFragment,
-                "page-bar-sort-options": _ctx.pageBarSortOptions
+                "page-bar-sort-options": _ctx.pageBarSortOptions,
+                "filter-function": _ctx.pageFilterFunction
               }, {
+                "page-bar-add-button": withCtx(() => [
+                  renderSlot(_ctx.$slots, "page-bar-add-button")
+                ]),
                 "page-bar-title": withCtx(({ page: page2 }) => [
                   renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                 ]),
@@ -7817,7 +7974,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "page-list-popover", { list })
                 ]),
                 _: 3
-              }, 8, ["disabled-page-fragment", "page-bar-sort-options"])
+              }, 8, ["disabled-page-fragment", "page-bar-sort-options", "filter-function"])
             ])
           ]),
           _: 2
@@ -7825,18 +7982,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           page.value ? {
             name: "right",
             fn: withCtx(() => [
-              createVNode(unref(TMagicScrollbar), null, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "props-panel")
-                ]),
-                _: 3
-              })
+              renderSlot(_ctx.$slots, "props-panel")
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["left", "right", "width"])), [
-          [_directive_loading, stageLoading.value]
-        ]),
+        ]), 1032, ["left", "right", "width"])),
         renderSlot(_ctx.$slots, "content-after"),
         renderSlot(_ctx.$slots, "footer")
       ], 512);
@@ -7844,7 +7994,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -8005,7 +8155,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         });
       }
     });
-    const navMenu = ref();
+    const navMenu = useTemplateRef("navMenu");
     onMounted(() => {
       navMenu.value && resizeObserver.observe(navMenu.value);
     });
@@ -8026,7 +8176,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$y, {
+              return openBlock(), createBlock(_sfc_main$z, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -8038,7 +8188,132 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$b = { class: "m-editor-props-form-panel" };
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorFormPanel"
+  },
+  __name: "FormPanel",
+  props: {
+    config: {},
+    values: {},
+    disabledShowSrc: { type: Boolean },
+    labelWidth: {},
+    codeValueKey: {},
+    labelPosition: {},
+    extendState: { type: Function }
+  },
+  emits: ["submit", "submit-error", "form-error", "mounted"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const services = inject("services");
+    const codeOptions = inject("codeOptions", {});
+    const showSrc = ref(false);
+    const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
+    const { height: editorContentHeight } = useEditorContentHeight();
+    const stage = computed(() => services?.editorService.get("stage"));
+    const configForm = useTemplateRef("configForm");
+    watchEffect(() => {
+      if (configForm.value) {
+        configForm.value.formState.stage = stage.value;
+        configForm.value.formState.services = services;
+      }
+    });
+    const internalInstance = getCurrentInstance();
+    onMounted(() => {
+      emit("mounted", internalInstance);
+    });
+    const submit = async (v, eventData) => {
+      try {
+        const values = await configForm.value?.submitForm();
+        emit("submit", values, eventData);
+      } catch (e) {
+        emit("submit-error", e);
+      }
+    };
+    const errorHandler = (e) => {
+      emit("form-error", e);
+    };
+    const saveCode = (values) => {
+      emit("submit", props.codeValueKey ? { [props.codeValueKey]: values } : values);
+    };
+    __expose({ configForm, submit });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        renderSlot(_ctx.$slots, "props-form-panel-header"),
+        createVNode(unref(TMagicScrollbar), null, {
+          default: withCtx(() => [
+            createVNode(unref(MForm), {
+              ref_key: "configForm",
+              ref: configForm,
+              class: normalizeClass(propsPanelSize.value),
+              "popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
+              "label-width": _ctx.labelWidth,
+              "label-position": _ctx.labelPosition,
+              size: propsPanelSize.value,
+              "init-values": _ctx.values,
+              config: _ctx.config,
+              "extend-state": _ctx.extendState,
+              onChange: submit,
+              onError: errorHandler
+            }, null, 8, ["class", "popper-class", "label-width", "label-position", "size", "init-values", "config", "extend-state"])
+          ]),
+          _: 1
+        }),
+        !_ctx.disabledShowSrc ? (openBlock(), createBlock(unref(TMagicButton), {
+          key: 0,
+          class: "m-editor-props-panel-src-icon",
+          circle: "",
+          title: "源码",
+          type: showSrc.value ? "primary" : "",
+          onClick: _cache[0] || (_cache[0] = ($event) => showSrc.value = !showSrc.value)
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$Z, { icon: unref(Document) }, null, 8, ["icon"])
+          ]),
+          _: 1
+        }, 8, ["type"])) : createCommentVNode("", true),
+        showSrc.value ? (openBlock(), createBlock(_sfc_main$Y, {
+          key: 1,
+          class: "m-editor-props-panel-src-code",
+          height: `${unref(editorContentHeight)}px`,
+          "init-values": _ctx.codeValueKey ? _ctx.values[_ctx.codeValueKey] : _ctx.values,
+          options: unref(codeOptions),
+          parse: true,
+          onSave: saveCode
+        }, null, 8, ["height", "init-values", "options"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const useStylePanel = (services) => {
+  const showStylePanelStorageKey = "props-panel-show-style-panel";
+  const showStylePanelStorageValue = services?.storageService.getItem(showStylePanelStorageKey, {
+    protocol: Protocol.BOOLEAN
+  });
+  if (typeof showStylePanelStorageValue === "boolean") {
+    services?.uiService.set("showStylePanel", showStylePanelStorageValue);
+  }
+  const showStylePanel = computed(() => services?.uiService.get("showStylePanel") ?? true);
+  const showStylePanelHandler = () => {
+    services?.uiService.set("showStylePanel", true);
+    services?.storageService.setItem(showStylePanelStorageKey, true, { protocol: Protocol.BOOLEAN });
+  };
+  const closeStylePanelHandler = () => {
+    services?.uiService.set("showStylePanel", false);
+    services?.storageService.setItem(showStylePanelStorageKey, false, { protocol: Protocol.BOOLEAN });
+  };
+  return {
+    showStylePanel,
+    showStylePanelHandler,
+    closeStylePanelHandler
+  };
+};
+
 const _hoisted_1$a = { class: "m-editor-props-panel" };
+const _hoisted_2$4 = { class: "m-editor-props-style-panel-title" };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
@@ -8048,21 +8323,20 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     disabledShowSrc: { type: Boolean },
     extendState: { type: Function }
   },
-  emits: ["mounted", "submit-error", "form-error"],
+  emits: ["submit-error", "form-error", "mounted"],
   setup(__props, { expose: __expose, emit: __emit }) {
-    const codeOptions = inject("codeOptions", {});
     const emit = __emit;
-    const showSrc = ref(false);
-    const internalInstance = getCurrentInstance();
+    const services = inject("services");
     const values = ref({});
-    const configForm = ref();
     const curFormConfig = ref([]);
-    const services = inject("services");
     const node = computed(() => services?.editorService.get("node"));
     const nodes = computed(() => services?.editorService.get("nodes") || []);
-    const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
-    const stage = computed(() => services?.editorService.get("stage"));
-    const { height: editorContentHeight } = useEditorContentHeight();
+    const styleFormConfig = [
+      {
+        tabPosition: "right",
+        items: styleTabConfig.items
+      }
+    ];
     const init = async () => {
       if (!node.value) {
         curFormConfig.value = [];
@@ -8074,21 +8348,15 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
     watchEffect(init);
     services?.propsService.on("props-configs-change", init);
-    onMounted(() => {
-      emit("mounted", internalInstance);
-    });
     onBeforeUnmount(() => {
       services?.propsService.off("props-configs-change", init);
     });
-    watchEffect(() => {
-      if (configForm.value && stage.value) {
-        configForm.value.formState.stage = stage.value;
-      }
-    });
-    const submit = async () => {
+    const submit = async (v, eventData) => {
       try {
-        const values2 = await configForm.value?.submitForm();
-        services?.editorService.update(values2);
+        if (!v.id) {
+          v.id = values.value.id;
+        }
+        services?.editorService.update(v, { changeRecords: eventData?.changeRecords });
       } catch (e) {
         emit("submit-error", e);
       }
@@ -8096,48 +8364,76 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const errorHandler = (e) => {
       emit("form-error", e);
     };
-    const saveCode = (values2) => {
-      services?.editorService.update(values2);
+    const mountedHandler = (e) => {
+      emit("mounted", e);
     };
-    __expose({ configForm, submit });
+    const { showStylePanel, showStylePanelHandler, closeStylePanelHandler } = useStylePanel(services);
+    const propertyFormPanelRef = useTemplateRef("propertyFormPanel");
+    __expose({
+      getFormState() {
+        return propertyFormPanelRef.value?.configForm?.formState;
+      },
+      submit
+    });
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$a, [
         renderSlot(_ctx.$slots, "props-panel-header"),
-        createVNode(unref(MForm), {
-          ref_key: "configForm",
-          ref: configForm,
-          class: normalizeClass(propsPanelSize.value),
-          "popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
-          size: propsPanelSize.value,
-          "init-values": values.value,
+        createVNode(_sfc_main$q, {
+          ref: "propertyFormPanel",
+          class: normalizeClass(["m-editor-props-property-panel", { "show-style-panel": unref(showStylePanel) }]),
           config: curFormConfig.value,
-          "extend-state": _ctx.extendState,
-          onChange: submit,
-          onError: errorHandler
-        }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"]),
-        !_ctx.disabledShowSrc ? (openBlock(), createBlock(unref(TMagicButton), {
+          values: values.value,
+          disabledShowSrc: _ctx.disabledShowSrc,
+          extendState: _ctx.extendState,
+          onSubmit: submit,
+          onSubmitError: errorHandler,
+          onFormError: errorHandler,
+          onMounted: mountedHandler
+        }, null, 8, ["class", "config", "values", "disabledShowSrc", "extendState"]),
+        unref(showStylePanel) ? (openBlock(), createBlock(_sfc_main$q, {
           key: 0,
-          class: "m-editor-props-panel-src-icon",
+          class: "m-editor-props-style-panel",
+          "label-position": "top",
+          "code-value-key": "style",
+          config: styleFormConfig,
+          values: values.value,
+          disabledShowSrc: _ctx.disabledShowSrc,
+          extendState: _ctx.extendState,
+          onSubmit: submit,
+          onSubmitError: errorHandler,
+          onFormError: errorHandler
+        }, {
+          "props-form-panel-header": withCtx(() => [
+            createElementVNode("div", _hoisted_2$4, [
+              _cache[0] || (_cache[0] = createElementVNode("span", null, "样式", -1)),
+              createElementVNode("div", null, [
+                createVNode(unref(TMagicButton), {
+                  link: "",
+                  size: "small",
+                  onClick: unref(closeStylePanelHandler)
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$Z, { icon: unref(Close) }, null, 8, ["icon"])
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["values", "disabledShowSrc", "extendState"])) : createCommentVNode("", true),
+        !unref(showStylePanel) ? (openBlock(), createBlock(unref(TMagicButton), {
+          key: 1,
+          class: "m-editor-props-panel-style-icon",
           circle: "",
-          size: "large",
-          title: "源码",
-          type: showSrc.value ? "primary" : "",
-          onClick: _cache[0] || (_cache[0] = ($event) => showSrc.value = !showSrc.value)
+          type: unref(showStylePanel) ? "primary" : "",
+          onClick: unref(showStylePanelHandler)
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$Y, { icon: unref(Document) }, null, 8, ["icon"])
+            createVNode(_sfc_main$Z, { icon: unref(Sugar) }, null, 8, ["icon"])
           ]),
           _: 1
-        }, 8, ["type"])) : createCommentVNode("", true),
-        showSrc.value ? (openBlock(), createBlock(_sfc_main$X, {
-          key: 1,
-          class: "m-editor-props-panel-src-code",
-          height: `${unref(editorContentHeight)}px`,
-          "init-values": values.value,
-          options: unref(codeOptions),
-          parse: true,
-          onSave: saveCode
-        }, null, 8, ["height", "init-values", "options"])) : createCommentVNode("", true)
+        }, 8, ["type", "onClick"])) : createCommentVNode("", true)
       ], 512)), [
         [vShow, nodes.value.length === 1]
       ]);
@@ -8147,7 +8443,174 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
 
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorSearchInput"
+    name: "MEditorContentMenu"
+  },
+  __name: "ContentMenu",
+  props: {
+    menuData: { default: () => [] },
+    isSubMenu: { type: Boolean, default: false },
+    active: {},
+    autoHide: { type: Boolean, default: true }
+  },
+  emits: ["hide", "show", "mouseenter"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const menu = useTemplateRef("menu");
+    const buttons = useTemplateRef("buttons");
+    const subMenu = useTemplateRef("subMenu");
+    const visible = ref(false);
+    const subMenuData = ref([]);
+    const zIndex = useZIndex();
+    const curZIndex = ref(0);
+    const menuPosition = ref({
+      left: 0,
+      top: 0
+    });
+    const menuStyle = computed(() => ({
+      top: `${menuPosition.value.top + 2}px`,
+      left: `${menuPosition.value.left + 2}px`,
+      zIndex: curZIndex.value
+    }));
+    const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
+    const hide = () => {
+      if (!visible.value) return;
+      visible.value = false;
+      subMenu.value?.hide();
+      emit("hide");
+    };
+    const clickHandler = (event) => {
+      if (!props.autoHide) return;
+      if (event.button === 0) {
+        hide();
+      }
+    };
+    const outsideClickHideHandler = (e) => {
+      if (!props.autoHide) return;
+      const target = e.target;
+      if (!visible.value || !target) {
+        return;
+      }
+      if (contains(target)) {
+        return;
+      }
+      hide();
+    };
+    const setPosition = (e) => {
+      const menuHeight = menu.value?.clientHeight || 0;
+      let top = e.clientY;
+      if (menuHeight + e.clientY > document.body.clientHeight) {
+        top = document.body.clientHeight - menuHeight;
+      }
+      menuPosition.value = {
+        top,
+        left: e.clientX
+      };
+    };
+    const show = (e) => {
+      visible.value = true;
+      nextTick(() => {
+        e && setPosition(e);
+        curZIndex.value = zIndex.nextZIndex();
+        emit("show");
+      });
+    };
+    const showSubMenu = (item, index) => {
+      const menuItem = item;
+      if (typeof item !== "object") {
+        return;
+      }
+      subMenuData.value = menuItem.items || [];
+      setTimeout(() => {
+        if (!visible.value) {
+          return;
+        }
+        if (menu.value) {
+          let y = menu.value.offsetTop;
+          if (buttons.value?.[index].$el) {
+            const rect = buttons.value?.[index].$el.getBoundingClientRect();
+            y = rect.top;
+          }
+          subMenu.value?.show({
+            clientX: menu.value.offsetLeft + menu.value.clientWidth - 2,
+            clientY: y
+          });
+        }
+      }, 0);
+    };
+    const mouseenterHandler = () => {
+      emit("mouseenter");
+    };
+    onMounted(() => {
+      if (props.isSubMenu) return;
+      globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
+    });
+    onBeforeUnmount(() => {
+      if (props.isSubMenu) return;
+      globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
+    });
+    __expose({
+      menu,
+      menuPosition,
+      hide,
+      show,
+      contains,
+      setPosition
+    });
+    return (_ctx, _cache) => {
+      const _component_content_menu = resolveComponent("content-menu", true);
+      return openBlock(), createBlock(Transition, { name: "fade" }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("div", {
+            class: "magic-editor-content-menu",
+            ref_key: "menu",
+            ref: menu,
+            style: normalizeStyle(menuStyle.value),
+            onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler()),
+            onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {
+            }, ["prevent"]))
+          }, [
+            renderSlot(_ctx.$slots, "title"),
+            createElementVNode("div", null, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
+                return openBlock(), createBlock(_sfc_main$z, {
+                  "event-type": "mouseup",
+                  ref_for: true,
+                  ref_key: "buttons",
+                  ref: buttons,
+                  class: normalizeClass({ active: _ctx.active && item.id === _ctx.active }),
+                  data: item,
+                  key: index,
+                  onMouseup: clickHandler,
+                  onMouseenter: ($event) => showSubMenu(item, index)
+                }, null, 8, ["class", "data", "onMouseenter"]);
+              }), 128))
+            ]),
+            (openBlock(), createBlock(Teleport, { to: "body" }, [
+              subMenuData.value.length ? (openBlock(), createBlock(_component_content_menu, {
+                key: 0,
+                class: "sub-menu",
+                ref_key: "subMenu",
+                ref: subMenu,
+                active: _ctx.active,
+                "menu-data": subMenuData.value,
+                "is-sub-menu": true,
+                onHide: hide
+              }, null, 8, ["active", "menu-data"])) : createCommentVNode("", true)
+            ]))
+          ], 36), [
+            [vShow, visible.value]
+          ])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorSearchInput"
   },
   __name: "SearchInput",
   emits: ["search"],
@@ -8193,7 +8656,7 @@ const _hoisted_4$1 = {
   key: 0,
   class: "m-editor-tree-node-children"
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTreeNode"
   },
@@ -8267,7 +8730,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           onContextmenu: nodeContentmenuHandler,
           onMouseenter: mouseenterHandler
         }, [
-          createVNode(_sfc_main$Y, {
+          createVNode(_sfc_main$Z, {
             class: "expand-icon",
             style: normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
             icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
@@ -8323,7 +8786,7 @@ const _hoisted_1$8 = {
   key: 1,
   class: "m-editor-tree-empty"
 };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorTree"
   },
@@ -8348,7 +8811,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         onDragover: handleDragOver
       }, [
         _ctx.data?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
-          return openBlock(), createBlock(_sfc_main$n, {
+          return openBlock(), createBlock(_sfc_main$m, {
             key: item.id,
             data: item,
             indent: _ctx.indent,
@@ -8374,7 +8837,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
@@ -8384,12 +8847,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     nextLevelIndentIncrement: {},
     customError: { type: Function }
   },
-  emits: ["edit", "remove"],
+  emits: ["edit", "remove", "node-contextmenu"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const services = inject("services");
     const { codeBlockService, depService, editorService } = services || {};
+    const collecting = computed(() => depService?.get("collecting"));
     const codeList = computed(
       () => Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
         const target = depService?.getTarget(codeId, DepTargetType.CODE_BLOCK);
@@ -8464,20 +8928,29 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         if (typeof props.customError === "function") {
           props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
         } else {
-          tMagicMessage.error("代码块删除失败");
+          if (existBinds) {
+            tMagicMessage.error("代码块存在绑定关系，不可删除");
+          } else {
+            tMagicMessage.error("代码块不可删除");
+          }
         }
       }
     };
+    const nodeContentMenuHandler = (event, data) => {
+      emit("node-contextmenu", event, data);
+    };
     __expose({
-      filter: filterTextChangeHandler
+      filter: filterTextChangeHandler,
+      deleteCode
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$m, {
+      return openBlock(), createBlock(_sfc_main$l, {
         data: codeList.value,
         "node-status-map": unref(nodeStatusMap),
         indent: _ctx.indent,
         "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
-        onNodeClick: clickHandler
+        onNodeClick: clickHandler,
+        onNodeContextmenu: nodeContentMenuHandler
       }, {
         "tree-node-label": withCtx(({ data }) => [
           createElementVNode("div", {
@@ -8489,14 +8962,25 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           }, toDisplayString(data.name) + " " + toDisplayString(data.key ? `(${data.key})` : ""), 3)
         ]),
         "tree-node-tool": withCtx(({ data }) => [
-          data.type === "code" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+          collecting.value && data.type === "code" ? (openBlock(), createBlock(unref(TMagicTag), {
             key: 0,
+            type: "info",
+            size: "small",
+            style: { "margin-right": "5px" }
+          }, {
+            default: withCtx(() => _cache[0] || (_cache[0] = [
+              createTextVNode("依赖收集中")
+            ])),
+            _: 1
+          })) : createCommentVNode("", true),
+          data.type === "code" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 1,
             effect: "dark",
             content: editable.value ? "编辑" : "查看",
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Y, {
+              createVNode(_sfc_main$Z, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -8505,13 +8989,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1032, ["content"])) : createCommentVNode("", true),
           data.type === "code" && editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
-            key: 1,
+            key: 2,
             effect: "dark",
             content: "删除",
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Y, {
+              createVNode(_sfc_main$Z, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -8530,8 +9014,74 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
+const useContentMenu$1 = (deleteCode) => {
+  const eventBus = inject("eventBus");
+  const menuRef = useTemplateRef("menu");
+  let selectId = "";
+  const menuData = [
+    {
+      type: "button",
+      text: "编辑",
+      icon: Edit,
+      display: (services) => services?.codeBlockService?.getEditStatus() ?? true,
+      handler: () => {
+        if (!selectId) {
+          return;
+        }
+        eventBus?.emit("edit-code", selectId);
+      }
+    },
+    {
+      type: "button",
+      text: "复制并粘贴至当前",
+      icon: markRaw(CopyDocument),
+      handler: async ({ codeBlockService }) => {
+        if (!selectId) {
+          return;
+        }
+        const codeBlock = codeBlockService.getCodeContentById(selectId);
+        if (!codeBlock) {
+          return;
+        }
+        const newCodeId = await codeBlockService.getUniqueId();
+        codeBlockService.setCodeDslById(newCodeId, cloneDeep(codeBlock));
+      }
+    },
+    {
+      type: "button",
+      text: "删除",
+      icon: Delete,
+      handler: () => {
+        if (!selectId) {
+          return;
+        }
+        deleteCode(selectId);
+      }
+    }
+  ];
+  const nodeContentMenuHandler = (event, data) => {
+    event.preventDefault();
+    if (data.type === "code") {
+      menuRef.value?.show(event);
+      if (data.id) {
+        selectId = `${data.id}`;
+      } else {
+        selectId = "";
+      }
+    }
+  };
+  const contentMenuHideHandler = () => {
+    selectId = "";
+  };
+  return {
+    menuData,
+    nodeContentMenuHandler,
+    contentMenuHideHandler
+  };
+};
+
 const _hoisted_1$7 = { class: "search-wrapper" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockListPanel"
   },
@@ -8539,27 +9089,37 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   props: {
     indent: {},
     nextLevelIndentIncrement: {},
-    customError: { type: Function }
+    customError: { type: Function },
+    customContentMenu: { type: Function }
   },
   setup(__props) {
+    const props = __props;
     const eventBus = inject("eventBus");
     const { codeBlockService } = inject("services") || {};
     const editable = computed(() => codeBlockService?.getEditStatus());
     const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
-    const codeBlockList = ref();
+    const codeBlockList = useTemplateRef("codeBlockList");
     const filterTextChangeHandler = (val) => {
       codeBlockList.value?.filter(val);
     };
     eventBus?.on("edit-code", (id) => {
       editCode(id);
     });
+    const {
+      nodeContentMenuHandler,
+      menuData: contentMenuData,
+      contentMenuHideHandler
+    } = useContentMenu$1((id) => {
+      codeBlockList.value?.deleteCode(id);
+    });
+    const menuData = computed(() => props.customContentMenu(contentMenuData, "code-block"));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
               createElementVNode("div", _hoisted_1$7, [
-                createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                 editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -8575,14 +9135,15 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "code-block-panel-search")
               ])
             ]),
-            createVNode(_sfc_main$l, {
+            createVNode(_sfc_main$k, {
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
               indent: _ctx.indent,
               "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
               onEdit: unref(editCode),
-              onRemove: unref(deleteCode)
+              onRemove: unref(deleteCode),
+              onNodeContextmenu: unref(nodeContentMenuHandler)
             }, {
               "code-block-panel-tool": withCtx(({ id, data }) => [
                 renderSlot(_ctx.$slots, "code-block-panel-tool", {
@@ -8591,18 +9152,27 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 })
               ]),
               _: 3
-            }, 8, ["custom-error", "indent", "next-level-indent-increment", "onEdit", "onRemove"])
+            }, 8, ["custom-error", "indent", "next-level-indent-increment", "onEdit", "onRemove", "onNodeContextmenu"])
           ]),
           _: 3
         }),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$L, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
           disabled: !editable.value,
           content: unref(codeConfig),
           onSubmit: unref(submitCodeBlockHandler)
-        }, null, 8, ["disabled", "content", "onSubmit"])) : createCommentVNode("", true)
+        }, null, 8, ["disabled", "content", "onSubmit"])) : createCommentVNode("", true),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          menuData.value.length ? (openBlock(), createBlock(_sfc_main$o, {
+            key: 0,
+            "menu-data": menuData.value,
+            ref: "menu",
+            style: { "overflow": "initial" },
+            onHide: unref(contentMenuHideHandler)
+          }, null, 8, ["menu-data", "onHide"])) : createCommentVNode("", true)
+        ]))
       ], 64);
     };
   }
@@ -8621,9 +9191,9 @@ const useDataSourceEdit = (dataSourceService) => {
     dialogTitle.value = `编辑${dataSourceValues.value.title || ""}`;
     editDialog.value.show();
   };
-  const submitDataSourceHandler = (value) => {
+  const submitDataSourceHandler = (value, eventData) => {
     if (value.id) {
-      dataSourceService?.update(value);
+      dataSourceService?.update(value, { changeRecords: eventData.changeRecords });
     } else {
       dataSourceService?.add(value);
     }
@@ -8639,7 +9209,7 @@ const useDataSourceEdit = (dataSourceService) => {
   };
 };
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceConfigPanel"
   },
@@ -8670,8 +9240,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       initValues.value = props.values;
       dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
     });
-    const submitHandler = (values) => {
-      emit("submit", values);
+    const submitHandler = (values, data) => {
+      emit("submit", values, data);
     };
     const errorHandler = (error) => {
       tMagicMessage.error(error.message);
@@ -8686,7 +9256,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$Q, {
+      return openBlock(), createBlock(_sfc_main$R, {
         visible: boxVisible.value,
         "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
         width: width.value,
@@ -8714,7 +9284,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceList"
   },
@@ -8723,10 +9293,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     indent: {},
     nextLevelIndentIncrement: {}
   },
-  emits: ["edit", "remove"],
+  emits: ["edit", "remove", "node-contextmenu"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
     const { depService, editorService, dataSourceService } = inject("services") || {};
+    const collecting = computed(() => depService?.get("collecting"));
     const editable = computed(() => dataSourceService?.get("editable") ?? true);
     const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
     const dsDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) || {});
@@ -8794,11 +9365,6 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       emit("edit", id);
     };
     const removeHandler = async (id) => {
-      await tMagicMessageBox.confirm("确定删除?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      });
       emit("remove", id);
     };
     const selectComp = (compId) => {
@@ -8811,16 +9377,20 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         selectComp(data.key);
       }
     };
+    const nodeContentMenuHandler = (event, data) => {
+      emit("node-contextmenu", event, data);
+    };
     __expose({
       filter: filterTextChangeHandler
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$m, {
+      return openBlock(), createBlock(_sfc_main$l, {
         data: list.value,
         "node-status-map": unref(nodeStatusMap),
         indent: _ctx.indent,
         "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
-        onNodeClick: clickHandler
+        onNodeClick: clickHandler,
+        onNodeContextmenu: nodeContentMenuHandler
       }, {
         "tree-node-label": withCtx(({ data }) => [
           createElementVNode("div", {
@@ -8832,14 +9402,25 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           }, toDisplayString(data.name) + " " + toDisplayString(data.key ? `(${data.key})` : ""), 3)
         ]),
         "tree-node-tool": withCtx(({ data }) => [
-          data.type === "ds" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+          collecting.value && data.type === "ds" ? (openBlock(), createBlock(unref(TMagicTag), {
             key: 0,
+            type: "info",
+            size: "small",
+            style: { "margin-right": "5px" }
+          }, {
+            default: withCtx(() => _cache[0] || (_cache[0] = [
+              createTextVNode("依赖收集中")
+            ])),
+            _: 1
+          })) : createCommentVNode("", true),
+          data.type === "ds" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 1,
             effect: "dark",
             content: editable.value ? "编辑" : "查看",
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Y, {
+              createVNode(_sfc_main$Z, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -8848,13 +9429,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1032, ["content"])) : createCommentVNode("", true),
           data.type === "ds" && editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
-            key: 1,
+            key: 2,
             effect: "dark",
             content: "删除",
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Y, {
+              createVNode(_sfc_main$Z, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -8870,17 +9451,84 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
+const useContentMenu = () => {
+  const eventBus = inject("eventBus");
+  const menuRef = useTemplateRef("menu");
+  let selectId = "";
+  const menuData = [
+    {
+      type: "button",
+      text: "编辑",
+      icon: Edit,
+      display: (services) => services?.dataSourceService?.get("editable") ?? true,
+      handler: () => {
+        if (!selectId) {
+          return;
+        }
+        eventBus?.emit("edit-data-source", selectId);
+      }
+    },
+    {
+      type: "button",
+      text: "复制并粘贴至当前",
+      icon: markRaw(CopyDocument),
+      handler: ({ dataSourceService }) => {
+        if (!selectId) {
+          return;
+        }
+        const ds = dataSourceService.getDataSourceById(selectId);
+        if (!ds) {
+          return;
+        }
+        dataSourceService.add(cloneDeep(ds));
+      }
+    },
+    {
+      type: "button",
+      text: "删除",
+      icon: Delete,
+      handler: () => {
+        if (!selectId) {
+          return;
+        }
+        eventBus?.emit("remove-data-source", selectId);
+      }
+    }
+  ];
+  const nodeContentMenuHandler = (event, data) => {
+    event.preventDefault();
+    if (data.type === "ds") {
+      menuRef.value?.show(event);
+      if (data.id) {
+        selectId = `${data.id}`;
+      } else {
+        selectId = "";
+      }
+    }
+  };
+  const contentMenuHideHandler = () => {
+    selectId = "";
+  };
+  return {
+    menuData,
+    nodeContentMenuHandler,
+    contentMenuHideHandler
+  };
+};
+
 const _hoisted_1$6 = { class: "search-wrapper" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
   },
   __name: "DataSourceListPanel",
   props: {
     indent: {},
-    nextLevelIndentIncrement: {}
+    nextLevelIndentIncrement: {},
+    customContentMenu: { type: Function }
   },
   setup(__props) {
+    const props = __props;
     const eventBus = inject("eventBus");
     const { dataSourceService } = inject("services") || {};
     const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
@@ -8905,243 +9553,100 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       dialogTitle.value = `新增${datasourceType?.text || ""}`;
       editDialog.value.show();
     };
-    const removeHandler = (id) => {
+    const removeHandler = async (id) => {
+      await tMagicMessageBox.confirm("确定删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      });
       dataSourceService?.remove(id);
     };
     const dataSourceList = ref();
     const filterTextChangeHandler = (val) => {
       dataSourceList.value?.filter(val);
     };
-    eventBus?.on("edit-data-source", (id) => {
-      editHandler(id);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$6, [
-              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
-              unref(editable) ? (openBlock(), createBlock(unref(TMagicPopover), {
-                key: 0,
-                placement: "right",
-                trigger: "hover",
-                "popper-class": "data-source-list-panel-add-menu",
-                "destroy-on-close": true
-              }, {
-                reference: withCtx(() => [
-                  createVNode(unref(TMagicButton), {
-                    type: "primary",
-                    size: "small"
-                  }, {
-                    default: withCtx(() => _cache[0] || (_cache[0] = [
-                      createTextVNode("新增")
-                    ])),
-                    _: 1
-                  })
-                ]),
-                default: withCtx(() => [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                    return openBlock(), createBlock(_sfc_main$y, {
-                      data: {
-                        type: "button",
-                        text: item.text,
-                        handler: () => {
-                          addHandler(item.type);
-                        }
-                      },
-                      key: index
-                    }, null, 8, ["data"]);
-                  }), 128))
-                ]),
-                _: 1
-              })) : createCommentVNode("", true),
-              renderSlot(_ctx.$slots, "data-source-panel-search")
-            ]),
-            createVNode(_sfc_main$i, {
-              ref_key: "dataSourceList",
-              ref: dataSourceList,
-              indent: _ctx.indent,
-              "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
-              onEdit: unref(editHandler),
-              onRemove: removeHandler
-            }, null, 8, ["indent", "next-level-indent-increment", "onEdit"])
-          ]),
-          _: 3
-        }),
-        createVNode(_sfc_main$j, {
-          ref_key: "editDialog",
-          ref: editDialog,
-          disabled: !unref(editable),
-          values: unref(dataSourceValues),
-          title: unref(dialogTitle),
-          onSubmit: unref(submitDataSourceHandler)
-        }, null, 8, ["disabled", "values", "title", "onSubmit"])
-      ], 64);
-    };
-  }
-});
-
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorContentMenu"
-  },
-  __name: "ContentMenu",
-  props: {
-    menuData: { default: () => [] },
-    isSubMenu: { type: Boolean, default: false },
-    active: {},
-    autoHide: { type: Boolean, default: true }
-  },
-  emits: ["hide", "show", "mouseenter"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const menu = ref();
-    const buttons = ref();
-    const subMenu = ref();
-    const visible = ref(false);
-    const subMenuData = ref([]);
-    const zIndex = useZIndex();
-    const curZIndex = ref(0);
-    const menuPosition = ref({
-      left: 0,
-      top: 0
-    });
-    const menuStyle = computed(() => ({
-      top: `${menuPosition.value.top}px`,
-      left: `${menuPosition.value.left}px`,
-      zIndex: curZIndex.value
-    }));
-    const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
-    const hide = () => {
-      if (!visible.value) return;
-      visible.value = false;
-      subMenu.value?.hide();
-      emit("hide");
-    };
-    const clickHandler = () => {
-      if (!props.autoHide) return;
-      hide();
-    };
-    const outsideClickHideHandler = (e) => {
-      if (!props.autoHide) return;
-      const target = e.target;
-      if (!visible.value || !target) {
-        return;
-      }
-      if (contains(target)) {
-        return;
-      }
-      hide();
-    };
-    const setPosition = (e) => {
-      const menuHeight = menu.value?.clientHeight || 0;
-      let top = e.clientY;
-      if (menuHeight + e.clientY > document.body.clientHeight) {
-        top = document.body.clientHeight - menuHeight;
-      }
-      menuPosition.value = {
-        top,
-        left: e.clientX
-      };
-    };
-    const show = (e) => {
-      setTimeout(() => {
-        visible.value = true;
-        nextTick(() => {
-          e && setPosition(e);
-          curZIndex.value = zIndex.nextZIndex();
-          emit("show");
-        });
-      }, 300);
-    };
-    const showSubMenu = (item, index) => {
-      const menuItem = item;
-      if (typeof item !== "object") {
-        return;
-      }
-      subMenuData.value = menuItem.items || [];
-      setTimeout(() => {
-        if (!visible.value) {
-          return;
-        }
-        if (menu.value) {
-          let y = menu.value.offsetTop;
-          if (buttons.value?.[index].$el) {
-            const rect = buttons.value?.[index].$el.getBoundingClientRect();
-            y = rect.top;
-          }
-          subMenu.value?.show({
-            clientX: menu.value.offsetLeft + menu.value.clientWidth,
-            clientY: y
-          });
-        }
-      }, 0);
-    };
-    const mouseenterHandler = () => {
-      emit("mouseenter");
-    };
-    onMounted(() => {
-      if (props.isSubMenu) return;
-      globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
-    });
-    onBeforeUnmount(() => {
-      if (props.isSubMenu) return;
-      globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
+    eventBus?.on("edit-data-source", (id) => {
+      editHandler(id);
     });
-    __expose({
-      menu,
-      menuPosition,
-      hide,
-      show,
-      contains,
-      setPosition
+    eventBus?.on("remove-data-source", (id) => {
+      removeHandler(id);
     });
+    const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler } = useContentMenu();
+    const menuData = computed(
+      () => props.customContentMenu(contentMenuData, "data-source")
+    );
     return (_ctx, _cache) => {
-      const _component_content_menu = resolveComponent("content-menu", true);
-      return openBlock(), createBlock(Transition, { name: "fade" }, {
-        default: withCtx(() => [
-          withDirectives(createElementVNode("div", {
-            class: "magic-editor-content-menu",
-            ref_key: "menu",
-            ref: menu,
-            style: normalizeStyle(menuStyle.value),
-            onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler())
-          }, [
-            renderSlot(_ctx.$slots, "title"),
-            createElementVNode("div", null, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-                return openBlock(), createBlock(_sfc_main$y, {
-                  "event-type": "mouseup",
-                  ref_for: true,
-                  ref_key: "buttons",
-                  ref: buttons,
-                  class: normalizeClass({ active: _ctx.active && item.id === _ctx.active }),
-                  data: item,
-                  key: index,
-                  onMouseup: clickHandler,
-                  onMouseenter: ($event) => showSubMenu(item, index)
-                }, null, 8, ["class", "data", "onMouseenter"]);
-              }), 128))
-            ]),
-            (openBlock(), createBlock(Teleport, { to: "body" }, [
-              subMenuData.value.length ? (openBlock(), createBlock(_component_content_menu, {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_1$6, [
+              createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+              unref(editable) ? (openBlock(), createBlock(unref(TMagicPopover), {
                 key: 0,
-                class: "sub-menu",
-                ref_key: "subMenu",
-                ref: subMenu,
-                active: _ctx.active,
-                "menu-data": subMenuData.value,
-                "is-sub-menu": true,
-                onHide: hide
-              }, null, 8, ["active", "menu-data"])) : createCommentVNode("", true)
-            ]))
-          ], 36), [
-            [vShow, visible.value]
-          ])
-        ]),
-        _: 3
-      });
+                placement: "right",
+                trigger: "hover",
+                "popper-class": "data-source-list-panel-add-menu",
+                "destroy-on-close": true
+              }, {
+                reference: withCtx(() => [
+                  createVNode(unref(TMagicButton), {
+                    type: "primary",
+                    size: "small"
+                  }, {
+                    default: withCtx(() => _cache[0] || (_cache[0] = [
+                      createTextVNode("新增")
+                    ])),
+                    _: 1
+                  })
+                ]),
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
+                    return openBlock(), createBlock(_sfc_main$z, {
+                      data: {
+                        type: "button",
+                        text: item.text,
+                        handler: () => {
+                          addHandler(item.type);
+                        }
+                      },
+                      key: index
+                    }, null, 8, ["data"]);
+                  }), 128))
+                ]),
+                _: 1
+              })) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "data-source-panel-search")
+            ]),
+            createVNode(_sfc_main$h, {
+              ref_key: "dataSourceList",
+              ref: dataSourceList,
+              indent: _ctx.indent,
+              "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
+              onEdit: unref(editHandler),
+              onRemove: removeHandler,
+              onNodeContextmenu: unref(nodeContentMenuHandler)
+            }, null, 8, ["indent", "next-level-indent-increment", "onEdit", "onNodeContextmenu"])
+          ]),
+          _: 3
+        }),
+        createVNode(_sfc_main$i, {
+          ref_key: "editDialog",
+          ref: editDialog,
+          disabled: !unref(editable),
+          values: unref(dataSourceValues),
+          title: unref(dialogTitle),
+          onSubmit: unref(submitDataSourceHandler)
+        }, null, 8, ["disabled", "values", "title", "onSubmit"]),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          menuData.value.length ? (openBlock(), createBlock(_sfc_main$o, {
+            key: 0,
+            "menu-data": menuData.value,
+            ref: "menu",
+            style: { "overflow": "initial" },
+            onHide: unref(contentMenuHideHandler)
+          }, null, 8, ["menu-data", "onHide"])) : createCommentVNode("", true)
+        ]))
+      ], 64);
     };
   }
 });
@@ -9251,15 +9756,15 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   },
   __name: "LayerMenu",
   props: {
-    layerContentMenu: { default: () => [] },
-    customContentMenu: { type: Function, default: (menus) => menus }
+    layerContentMenu: {},
+    customContentMenu: { type: Function }
   },
   emits: ["collapse-all"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const services = inject("services");
-    const menu = ref();
+    const menu = useTemplateRef("menu");
     const node = computed(() => services?.editorService.get("node"));
     const nodes = computed(() => services?.editorService.get("nodes"));
     const componentList = computed(() => services?.componentListService.getList() || []);
@@ -9341,7 +9846,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$g, {
+      return openBlock(), createBlock(_sfc_main$o, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu,
@@ -9369,12 +9874,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$Y, {
+        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$Z, {
           key: 0,
           icon: unref(Hide),
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
           title: "点击显示"
-        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$Y, {
+        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$Z, {
           key: 1,
           icon: unref(View),
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -9451,7 +9956,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
       select(data);
     });
   };
-  const menu = ref();
+  const menu = useTemplateRef("menu");
   return {
     menu,
     nodeClickHandler,
@@ -9862,7 +10367,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
-    const tree = ref();
+    const tree = useTemplateRef("tree");
     const page = computed(() => editorService?.get("page"));
     const nodeData = computed(() => !page.value ? [] : [page.value]);
     const { nodeStatusMap } = useNodeStatus(services);
@@ -9898,8 +10403,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$o, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$m, {
+          createVNode(_sfc_main$n, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+          page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$l, {
             key: 0,
             tabindex: "-1",
             ref_key: "tree",
@@ -10021,7 +10526,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), null, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "component-list-panel-header"),
-          createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+          createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
           renderSlot(_ctx.$slots, "component-list", { componentGroupList: list.value }, () => [
             createVNode(unref(TMagicCollapse), {
               class: "ui-component-panel",
@@ -10035,7 +10540,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       name: `${index}`
                     }, {
                       title: withCtx(() => [
-                        createVNode(_sfc_main$Y, { icon: unref(Grid) }, null, 8, ["icon"]),
+                        createVNode(_sfc_main$Z, { icon: unref(Grid) }, null, 8, ["icon"]),
                         createTextVNode(toDisplayString(group.title), 1)
                       ]),
                       default: withCtx(() => [
@@ -10056,7 +10561,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                                 content: item.desc
                               }, {
                                 default: withCtx(() => [
-                                  createVNode(_sfc_main$Y, {
+                                  createVNode(_sfc_main$Z, {
                                     icon: item.icon
                                   }, null, 8, ["icon"])
                                 ]),
@@ -10114,6 +10619,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
+    const collecting = computed(() => services?.depService.get("collecting"));
     const columnLeftWidth = computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
     const { height: editorContentHeight } = useEditorContentHeight();
     const columnLeftHeight = ref(0);
@@ -10161,10 +10667,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$k,
+          component: _sfc_main$j,
           props: {
             indent: props.indent,
-            nextLevelIndentIncrement: props.nextLevelIndentIncrement
+            nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+            customContentMenu: props.customContentMenu
           },
           slots: {}
         },
@@ -10173,10 +10680,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Coin,
           text: "数据源",
-          component: _sfc_main$h,
+          component: _sfc_main$g,
           props: {
             indent: props.indent,
-            nextLevelIndentIncrement: props.nextLevelIndentIncrement
+            nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+            customContentMenu: props.customContentMenu
           },
           slots: {}
         }
@@ -10244,7 +10752,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 (...args) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
                 onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
               }, [
-                config.icon ? (openBlock(), createBlock(_sfc_main$Y, {
+                config.icon ? (openBlock(), createBlock(_sfc_main$Z, {
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -10256,7 +10764,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           ]),
           (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
             return withDirectives((openBlock(), createElementBlock("div", {
-              class: "m-editor-sidebar-content",
+              class: normalizeClass(["m-editor-sidebar-content", { "m-editor-dep-collecting": collecting.value }]),
               key: config.$key ?? index
             }, [
               config?.component && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
@@ -10382,7 +10890,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   key: "11"
                 } : void 0
               ]), 1040)) : createCommentVNode("", true)
-            ])), [
+            ], 2)), [
               [vShow, [config.text, config.$key, `${index}`].includes(activeTabName.value)]
             ]);
           }), 128))
@@ -10390,7 +10898,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
             return openBlock(), createElementBlock(Fragment, null, [
-              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$Q, {
+              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$R, {
                 key: config.$key ?? index,
                 visible: unref(floatBoxStates)[config.$key].status,
                 "onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
@@ -10436,8 +10944,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const bar = ref();
-    const thumb = ref();
+    const bar = useTemplateRef("bar");
+    const thumb = useTemplateRef("thumb");
     const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
     const thumbPos = computed(() => props.pos / props.scrollSize * props.size);
     const thumbStyle = computed(() => ({
@@ -10525,8 +11033,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const container = ref();
-    const el = ref();
+    const container = useTemplateRef("container");
+    const el = useTemplateRef("el");
     const style = computed(
       () => `
         width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};
@@ -10620,8 +11128,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const editorService = services?.editorService;
     const visible = ref(false);
     const buttonVisible = ref(false);
-    const button = ref();
-    const box = ref();
+    const button = useTemplateRef("button");
+    const box = useTemplateRef("box");
     const stage = computed(() => editorService?.get("stage"));
     const page = computed(() => editorService?.get("page"));
     const nodes = computed(() => editorService?.get("nodes") || []);
@@ -10693,7 +11201,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$Q, {
+        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$R, {
           key: 1,
           ref_key: "box",
           ref: box,
@@ -10703,7 +11211,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           position: menuPosition.value
         }, {
           body: withCtx(() => [
-            createVNode(_sfc_main$m, {
+            createVNode(_sfc_main$l, {
               class: "m-editor-node-list-menu magic-editor-layer-tree",
               data: nodeData.value,
               "node-status-map": unref(nodeStatusMap),
@@ -10722,7 +11230,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const services = inject("services");
     const stageOptions = inject("stageOptions");
-    const stageOverlay = ref();
+    const stageOverlay = useTemplateRef("stageOverlay");
     const stageOverlayVisible = computed(() => services?.stageOverlayService.get("stageOverlayVisible"));
     const wrapWidth = computed(() => services?.stageOverlayService.get("wrapWidth") || 0);
     const wrapHeight = computed(() => services?.stageOverlayService.get("wrapHeight") || 0);
@@ -10836,14 +11344,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "ViewerMenu",
   props: {
     isMultiSelect: { type: Boolean, default: false },
-    stageContentMenu: { default: () => [] },
-    customContentMenu: { type: Function, default: (menus) => menus }
+    stageContentMenu: {},
+    customContentMenu: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
     const editorService = services?.editorService;
-    const menu = ref();
+    const menu = useTemplateRef("menu");
     const canCenter = ref(false);
     const node = computed(() => editorService?.get("node"));
     const nodes = computed(() => editorService?.get("nodes"));
@@ -10948,7 +11456,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
     __expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$g, {
+      return openBlock(), createBlock(_sfc_main$o, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu
@@ -10963,18 +11471,20 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   },
   __name: "Stage",
   props: {
+    stageOptions: {},
     stageContentMenu: {},
     disabledStageOverlay: { type: Boolean, default: false },
     customContentMenu: {}
   },
   setup(__props) {
+    const props = __props;
     let stage = null;
     let runtime = null;
     const services = inject("services");
-    const stageOptions = inject("stageOptions");
-    const stageWrap = ref();
-    const stageContainer = ref();
-    const menu = ref();
+    const stageLoading = computed(() => services?.editorService.get("stageLoading") || false);
+    const stageWrap = useTemplateRef("stageWrap");
+    const stageContainer = useTemplateRef("stageContainer");
+    const menu = useTemplateRef("menu");
     const nodes = computed(() => services?.editorService.get("nodes") || []);
     const isMultiSelect = computed(() => nodes.value.length > 1);
     const stageRect = computed(() => services?.uiService.get("stageRect"));
@@ -10986,8 +11496,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     watchEffect(() => {
       if (stage || !page.value) return;
       if (!stageContainer.value) return;
-      if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
-      stage = useStage(stageOptions);
+      if (!(props.stageOptions?.runtimeUrl || props.stageOptions?.render) || !root.value) return;
+      stage = useStage(props.stageOptions);
       stage.on("select", () => {
         stageWrap.value?.container?.focus();
       });
@@ -11007,14 +11517,23 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     });
     onBeforeUnmount(() => {
       stage?.destroy();
+      services?.editorService.set("stage", null);
     });
     watch(zoom, (zoom2) => {
       if (!stage || !zoom2) return;
       stage.setZoom(zoom2);
     });
+    let timeoutId = null;
     watch(page, (page2) => {
       if (runtime && page2) {
         services?.editorService.set("stageLoading", true);
+        if (timeoutId) {
+          globalThis.clearTimeout(timeoutId);
+        }
+        timeoutId = globalThis.setTimeout(() => {
+          services?.editorService.set("stageLoading", false);
+          timeoutId = null;
+        }, 3e3);
         runtime.updatePageId?.(page2.id);
         nextTick(() => {
           stage?.select(page2.id);
@@ -11066,7 +11585,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
       e.preventDefault();
       const doc = stage?.renderer?.contentWindow?.document;
-      const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
+      const parentEl = doc?.querySelector(
+        `.${props.stageOptions?.containerHighlightClassName}`
+      );
       let parent = page.value;
       const parentId = getIdFromEl()(parentEl);
       if (parentId) {
@@ -11105,11 +11626,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$8, {
+      const _directive_loading = resolveDirective("loading");
+      return withDirectives((openBlock(), createBlock(_sfc_main$8, {
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
         tabindex: "-1",
+        "element-loading-text": "Runtime 加载中...",
         width: stageRect.value?.width,
         height: stageRect.value?.height,
         "wrap-width": stageContainerRect.value?.width,
@@ -11119,7 +11642,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           width: 60,
           height: 50
         },
-        onClick: _cache[0] || (_cache[0] = ($event) => stageWrap.value?.container?.focus())
+        onClick: _cache[0] || (_cache[0] = ($event) => unref(stageWrap)?.container?.focus())
       }, {
         content: withCtx(() => [
           !_ctx.disabledStageOverlay ? (openBlock(), createBlock(_sfc_main$6, { key: 0 })) : createCommentVNode("", true),
@@ -11146,7 +11669,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           createVNode(_sfc_main$7)
         ]),
         _: 1
-      }, 8, ["width", "height", "wrap-width", "wrap-height", "zoom"]);
+      }, 8, ["width", "height", "wrap-width", "wrap-height", "zoom"])), [
+        [_directive_loading, stageLoading.value]
+      ]);
     };
   }
 });
@@ -11208,18 +11733,20 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     customContentMenu: {}
   },
   setup(__props) {
+    const stageOptions = inject("stageOptions");
     const services = inject("services");
     const page = computed(() => services?.editorService.get("page"));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(_sfc_main$2),
         renderSlot(_ctx.$slots, "stage", {}, () => [
-          page.value ? (openBlock(), createBlock(_sfc_main$3, {
+          page.value && (unref(stageOptions)?.render || unref(stageOptions)?.runtimeUrl) ? (openBlock(), createBlock(_sfc_main$3, {
             key: 0,
+            "stage-options": unref(stageOptions),
             "disabled-stage-overlay": _ctx.disabledStageOverlay,
             "stage-content-menu": _ctx.stageContentMenu,
             "custom-content-menu": _ctx.customContentMenu
-          }, null, 8, ["disabled-stage-overlay", "stage-content-menu", "custom-content-menu"])) : createCommentVNode("", true)
+          }, null, 8, ["stage-options", "disabled-stage-overlay", "stage-content-menu", "custom-content-menu"])) : createCommentVNode("", true)
         ]),
         renderSlot(_ctx.$slots, "workspace-content")
       ]);
@@ -11569,12 +12096,17 @@ class DataSource extends BaseService {
     this.emit("add", newConfig);
     return newConfig;
   }
-  update(config) {
+  update(config, { changeRecords = [] } = {}) {
     const dataSources = this.get("dataSources");
     const index = dataSources.findIndex((ds) => ds.id === config.id);
-    dataSources[index] = cloneDeep(config);
-    this.emit("update", config);
-    return config;
+    const oldConfig = dataSources[index];
+    const newConfig = cloneDeep(config);
+    dataSources[index] = newConfig;
+    this.emit("update", newConfig, {
+      oldConfig,
+      changeRecords
+    });
+    return newConfig;
   }
   remove(id) {
     const dataSources = this.get("dataSources");
@@ -11650,7 +12182,16 @@ const dataSourceService = new DataSource();
 
 const idleTask = new IdleTask();
 class Dep extends BaseService {
+  state = reactive({
+    collecting: false
+  });
   watcher = new Watcher({ initialTargets: reactive({}) });
+  set(name, value) {
+    this.state[name] = value;
+  }
+  get(name) {
+    return this.state[name];
+  }
   removeTargets(type = DepTargetType.DEFAULT) {
     this.watcher.removeTargets(type);
     const targets = this.watcher.getTargets(type);
@@ -11677,26 +12218,32 @@ class Dep extends BaseService {
     this.watcher.clearTargets();
   }
   collect(nodes, depExtendedData = {}, deep = false, type) {
+    this.set("collecting", true);
     this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
       this.collectNode(node, target, depExtendedData, deep);
     });
+    this.set("collecting", false);
     this.emit("collected", nodes, deep);
   }
   collectIdle(nodes, depExtendedData = {}, deep = false, type) {
+    this.set("collecting", true);
+    let startTask = false;
     this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
-      idleTask.enqueueTask(
-        ({ node: node2, deep: deep2, target: target2 }) => {
-          this.collectNode(node2, target2, depExtendedData, deep2);
-        },
-        {
-          node,
-          deep,
-          target
-        }
-      );
-    });
-    idleTask.once("finish", () => {
-      this.emit("collected", nodes, deep);
+      startTask = true;
+      this.enqueueTask(node, target, depExtendedData, deep);
+    });
+    return new Promise((resolve) => {
+      if (!startTask) {
+        this.emit("collected", nodes, deep);
+        this.set("collecting", false);
+        resolve();
+        return;
+      }
+      idleTask.once("finish", () => {
+        this.emit("collected", nodes, deep);
+        this.set("collecting", false);
+        resolve();
+      });
     });
   }
   collectNode(node, target, depExtendedData = {}, deep = false) {
@@ -11723,6 +12270,9 @@ class Dep extends BaseService {
   hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {
     return this.watcher.hasSpecifiedTypeTarget(type);
   }
+  clearIdleTasks() {
+    idleTask.clearTasks();
+  }
   on(eventName, listener) {
     return super.on(eventName, listener);
   }
@@ -11732,6 +12282,23 @@ class Dep extends BaseService {
   emit(eventName, ...args) {
     return super.emit(eventName, ...args);
   }
+  enqueueTask(node, target, depExtendedData, deep) {
+    idleTask.enqueueTask(
+      ({ node: node2, deep: deep2, target: target2 }) => {
+        this.collectNode(node2, target2, depExtendedData, deep2);
+      },
+      {
+        node,
+        deep: false,
+        target
+      }
+    );
+    if (deep && Array.isArray(node.items) && node.items.length) {
+      node.items.forEach((item) => {
+        this.enqueueTask(item, target, depExtendedData, deep);
+      });
+    }
+  }
 }
 const depService = new Dep();
 
@@ -12148,7 +12715,8 @@ const defaultEditorProps = {
   datasourceConfigs: () => ({}),
   canSelect: (el) => Boolean(getIdFromEl()(el)),
   isContainer: (el) => el.classList.contains("magic-ui-container"),
-  codeOptions: () => ({})
+  codeOptions: () => ({}),
+  customContentMenu: (menus) => menus
 };
 
 const initServiceState = (props, {
@@ -12305,6 +12873,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       initDataSourceDepTarget(ds);
     });
     if (Array.isArray(value.items)) {
+      depService.clearIdleTasks();
       collectIdle(value.items, true);
     } else {
       depService.clear();
@@ -12329,15 +12898,66 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       emit("update:modelValue", value);
     }
   };
-  const getApp = () => {
-    const stage = editorService.get("stage");
-    return stage?.renderer?.runtime?.getApp?.();
-  };
-  const updateDataSourceSchema = () => {
+  const stage = computed(() => editorService.get("stage"));
+  watch(stage, (stage2) => {
+    if (!stage2) {
+      return;
+    }
+    stage2.on("rerender", () => {
+      const node = editorService.get("node");
+      if (!node) return;
+      collectIdle([node], true).then(() => {
+        afterUpdateNodes([node]);
+      });
+    });
+  });
+  const getApp = () => stage.value?.renderer?.runtime?.getApp?.();
+  const updateDataSourceSchema = (nodes, deep) => {
     const root = editorService.get("root");
+    const app = getApp();
+    if (root && app?.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
     if (root?.dataSources) {
       getApp()?.dataSourceManager?.updateSchema(root.dataSources);
     }
+    if (!root || !stage.value) return;
+    const allNodes = [];
+    if (deep) {
+      nodes.forEach((node) => {
+        traverseNode(node, (node2) => {
+          if (!allNodes.includes(node2)) {
+            allNodes.push(node2);
+          }
+        });
+      });
+    } else {
+      allNodes.push(...nodes);
+    }
+    const deps = Object.values(root.dataSourceDeps || {});
+    deps.forEach((dep) => {
+      Object.keys(dep).forEach((id) => {
+        const node = allNodes.find((node2) => node2.id === id);
+        node && stage.value?.update({
+          config: cloneDeep(node),
+          parentId: editorService.getParentById(node.id)?.id,
+          root: cloneDeep(root)
+        });
+      });
+    });
+  };
+  const afterUpdateNodes = (nodes) => {
+    const root = editorService.get("root");
+    if (!root) return;
+    for (const node of nodes) {
+      stage.value?.update({
+        config: cloneDeep(node),
+        parentId: editorService.getParentById(node.id)?.id,
+        root: cloneDeep(root)
+      });
+    }
   };
   const targetAddHandler = (target) => {
     const root = editorService.get("root");
@@ -12357,59 +12977,32 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   };
   const targetRemoveHandler = (id) => {
     const root = editorService.get("root");
-    if (root?.dataSourceDeps) {
+    if (!root) return;
+    if (root.dataSourceDeps) {
       delete root.dataSourceDeps[id];
     }
-    if (root?.dataSourceCondDeps) {
+    if (root.dataSourceCondDeps) {
       delete root.dataSourceCondDeps[id];
     }
   };
-  const collectedHandler = (nodes, deep) => {
+  const depCollectedHandler = () => {
     const root = editorService.get("root");
-    const stage = editorService.get("stage");
-    if (!root || !stage) return;
+    if (!root) return;
     const app = getApp();
-    if (!app) return;
-    if (app.dsl) {
+    if (app?.dsl) {
       app.dsl.dataSourceDeps = root.dataSourceDeps;
-      app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
-      app.dsl.dataSources = root.dataSources;
-    }
-    updateDataSourceSchema();
-    const allNodes = [];
-    if (deep) {
-      nodes.forEach((node) => {
-        traverseNode(node, (node2) => {
-          if (!allNodes.includes(node2)) {
-            allNodes.push(node2);
-          }
-        });
-      });
-    } else {
-      allNodes.push(...nodes);
     }
-    const deps = Object.values(root.dataSourceDeps || {});
-    deps.forEach((dep) => {
-      Object.keys(dep).forEach((id) => {
-        const node = allNodes.find((node2) => node2.id === id);
-        node && stage.update({
-          config: cloneDeep(node),
-          parentId: editorService.getParentById(node.id)?.id,
-          root: cloneDeep(root)
-        });
-      });
-    });
   };
   depService.on("add-target", targetAddHandler);
   depService.on("remove-target", targetRemoveHandler);
-  depService.on("collected", collectedHandler);
+  depService.on("collected", depCollectedHandler);
   const initDataSourceDepTarget = (ds) => {
     depService.addTarget(createDataSourceTarget(ds, reactive({})));
     depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
-  const collectIdle = (nodes, deep) => {
-    nodes.forEach((node) => {
+  const collectIdle = (nodes, deep) => Promise.all(
+    nodes.map((node) => {
       let pageId;
       if (isPage(node)) {
         pageId = node.id;
@@ -12417,20 +13010,47 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
         const info = editorService.getNodeInfo(node.id);
         pageId = info.page?.id;
       }
-      depService.collectIdle([node], { pageId }, deep);
-    });
-  };
+      return depService.collectIdle([node], { pageId }, deep);
+    })
+  );
   const nodeAddHandler = (nodes) => {
-    collectIdle(nodes, true);
+    collectIdle(nodes, true).then(() => {
+      afterUpdateNodes(nodes);
+    });
   };
-  const nodeUpdateHandler = (nodes) => {
-    collectIdle(nodes, true);
+  const nodeUpdateHandler = (data) => {
+    const needRecollectNodes = [];
+    const normalNodes = [];
+    data.forEach(({ newNode, oldNode, changeRecords }) => {
+      if (changeRecords?.length) {
+        for (const record of changeRecords) {
+          if (!record.propPath || new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) || new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) || record.propPath === NODE_CONDS_KEY || isValueIncludeDataSource(record.value)) {
+            needRecollectNodes.push(newNode);
+          } else {
+            normalNodes.push(newNode);
+          }
+        }
+      } else if (isIncludeDataSource(newNode, oldNode)) {
+        needRecollectNodes.push(newNode);
+      } else {
+        normalNodes.push(newNode);
+      }
+    });
+    if (needRecollectNodes.length) {
+      collectIdle(needRecollectNodes, true).then(() => {
+        afterUpdateNodes(needRecollectNodes);
+      });
+    } else if (normalNodes.length) {
+      afterUpdateNodes(normalNodes);
+    }
   };
   const nodeRemoveHandler = (nodes) => {
     depService.clear(nodes);
   };
   const historyChangeHandler = (page) => {
-    collectIdle([page], true);
+    collectIdle([page], true).then(() => {
+      updateDataSourceSchema([page], true);
+    });
   };
   editorService.on("history-change", historyChangeHandler);
   editorService.on("root-change", rootChangeHandler);
@@ -12453,11 +13073,30 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     initDataSourceDepTarget(config);
     getApp()?.dataSourceManager?.addDataSource(config);
   };
-  const dataSourceUpdateHandler = (config) => {
+  const dataSourceUpdateHandler = (config, { changeRecords }) => {
+    let needRecollectDep = false;
+    for (const changeRecord of changeRecords) {
+      if (!changeRecord.propPath) {
+        continue;
+      }
+      needRecollectDep = changeRecord.propPath === "fields" || changeRecord.propPath === "methods" || /fields.(\d)+.name/.test(changeRecord.propPath) || /fields.(\d)+$/.test(changeRecord.propPath) || /methods.(\d)+.name/.test(changeRecord.propPath) || /methods.(\d)+$/.test(changeRecord.propPath);
+      if (needRecollectDep) {
+        break;
+      }
+    }
     const root = editorService.get("root");
-    removeDataSourceTarget(config.id);
-    initDataSourceDepTarget(config);
-    collectIdle(root?.items || [], true);
+    if (needRecollectDep) {
+      if (Array.isArray(root?.items)) {
+        depService.clearIdleTasks();
+        removeDataSourceTarget(config.id);
+        initDataSourceDepTarget(config);
+        collectIdle(root.items, true).then(() => {
+          updateDataSourceSchema(root?.items || [], true);
+        });
+      }
+    } else if (root?.dataSources) {
+      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    }
   };
   const removeDataSourceTarget = (id) => {
     depService.removeTarget(id, DepTargetType.DATA_SOURCE);
@@ -12465,8 +13104,13 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     depService.removeTarget(id, DepTargetType.DATA_SOURCE_METHOD);
   };
   const dataSourceRemoveHandler = (id) => {
+    const root = editorService.get("root");
+    const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
+    const nodes = getNodes(nodeIds, root?.items);
+    collectIdle(nodes, false).then(() => {
+      updateDataSourceSchema(nodes, false);
+    });
     removeDataSourceTarget(id);
-    getApp()?.dataSourceManager?.removeDataSource(id);
   };
   dataSourceService.on("add", dataSourceAddHandler);
   dataSourceService.on("update", dataSourceUpdateHandler);
@@ -12474,7 +13118,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   onBeforeUnmount(() => {
     depService.off("add-target", targetAddHandler);
     depService.off("remove-target", targetRemoveHandler);
-    depService.off("collected", collectedHandler);
+    depService.off("collected", depCollectedHandler);
     editorService.off("history-change", historyChangeHandler);
     editorService.off("root-change", rootChangeHandler);
     editorService.off("add", nodeAddHandler);
@@ -12531,7 +13175,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     isContainer: { type: Function },
     customContentMenu: { type: Function },
     extendFormState: { type: Function },
-    pageBarSortOptions: {}
+    pageBarSortOptions: {},
+    pageFilterFunction: { type: Function }
   }, defaultEditorProps),
   emits: ["props-panel-mounted", "update:modelValue", "props-form-error", "props-submit-error"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -12576,18 +13221,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     provide("codeOptions", props.codeOptions);
     provide("stageOptions", stageOptions);
     provide("eventBus", new EventEmitter());
+    const propsPanelMountedHandler = (e) => {
+      emit("props-panel-mounted", e);
+    };
+    const propsPanelSubmitErrorHandler = (e) => {
+      emit("props-submit-error", e);
+    };
+    const propsPanelFormErrorHandler = (e) => {
+      emit("props-form-error", e);
+    };
     __expose(services);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$r, {
+      return openBlock(), createBlock(_sfc_main$s, {
         "disabled-page-fragment": _ctx.disabledPageFragment,
-        "page-bar-sort-options": _ctx.pageBarSortOptions
+        "page-bar-sort-options": _ctx.pageBarSortOptions,
+        "page-filter-function": _ctx.pageFilterFunction
       }, {
         header: withCtx(() => [
           renderSlot(_ctx.$slots, "header")
         ]),
         nav: withCtx(() => [
           renderSlot(_ctx.$slots, "nav", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
+            createVNode(_sfc_main$r, { data: _ctx.menu }, null, 8, ["data"])
           ])
         ]),
         "content-before": withCtx(() => [
@@ -12670,9 +13325,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$p, {
               "extend-state": _ctx.extendFormState,
               "disabled-show-src": _ctx.disabledShowSrc,
-              onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance)),
-              onFormError: _cache[1] || (_cache[1] = (e) => _ctx.$emit("props-form-error", e)),
-              onSubmitError: _cache[2] || (_cache[2] = (e) => _ctx.$emit("props-submit-error", e))
+              onMounted: propsPanelMountedHandler,
+              onFormError: propsPanelFormErrorHandler,
+              onSubmitError: propsPanelSubmitErrorHandler
             }, {
               "props-panel-header": withCtx(() => [
                 renderSlot(_ctx.$slots, "props-panel-header")
@@ -12693,6 +13348,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "page-bar": withCtx(() => [
           renderSlot(_ctx.$slots, "page-bar")
         ]),
+        "page-bar-add-button": withCtx(() => [
+          renderSlot(_ctx.$slots, "page-bar-add-button")
+        ]),
         "page-bar-title": withCtx(({ page }) => [
           renderSlot(_ctx.$slots, "page-bar-title", { page })
         ]),
@@ -12703,7 +13361,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "page-list-popover", { list })
         ]),
         _: 3
-      }, 8, ["disabled-page-fragment", "page-bar-sort-options"]);
+      }, 8, ["disabled-page-fragment", "page-bar-sort-options", "page-filter-function"]);
     };
   }
 });
@@ -12721,25 +13379,25 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setEditorConfig(option);
     app.component(`${_sfc_main.name || "MEditor"}`, _sfc_main);
-    app.component("magic-code-editor", _sfc_main$X);
-    app.component("m-fields-ui-select", _sfc_main$B);
-    app.component("m-fields-code-link", _sfc_main$V);
-    app.component("m-fields-vs-code", _sfc_main$W);
-    app.component("m-fields-code-select", _sfc_main$U);
-    app.component("m-fields-code-select-col", _sfc_main$S);
-    app.component("m-fields-event-select", _sfc_main$F);
-    app.component("m-fields-data-source-fields", _sfc_main$P);
-    app.component("m-fields-data-source-mocks", _sfc_main$I);
-    app.component("m-fields-key-value", _sfc_main$D);
-    app.component("m-fields-data-source-input", _sfc_main$M);
-    app.component("m-fields-data-source-select", _sfc_main$H);
-    app.component("m-fields-data-source-methods", _sfc_main$K);
-    app.component("m-fields-data-source-method-select", _sfc_main$J);
-    app.component("m-fields-data-source-field-select", _sfc_main$N);
-    app.component("m-fields-page-fragment-select", _sfc_main$C);
-    app.component("m-fields-display-conds", _sfc_main$G);
-    app.component("m-fields-cond-op-select", _sfc_main$R);
+    app.component("magic-code-editor", _sfc_main$Y);
+    app.component("m-fields-ui-select", _sfc_main$C);
+    app.component("m-fields-code-link", _sfc_main$W);
+    app.component("m-fields-vs-code", _sfc_main$X);
+    app.component("m-fields-code-select", _sfc_main$V);
+    app.component("m-fields-code-select-col", _sfc_main$T);
+    app.component("m-fields-event-select", _sfc_main$G);
+    app.component("m-fields-data-source-fields", _sfc_main$Q);
+    app.component("m-fields-data-source-mocks", _sfc_main$J);
+    app.component("m-fields-key-value", _sfc_main$E);
+    app.component("m-fields-data-source-input", _sfc_main$N);
+    app.component("m-fields-data-source-select", _sfc_main$I);
+    app.component("m-fields-data-source-methods", _sfc_main$L);
+    app.component("m-fields-data-source-method-select", _sfc_main$K);
+    app.component("m-fields-data-source-field-select", _sfc_main$O);
+    app.component("m-fields-page-fragment-select", _sfc_main$D);
+    app.component("m-fields-display-conds", _sfc_main$H);
+    app.component("m-fields-cond-op-select", _sfc_main$S);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$L as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$U as CodeSelect, _sfc_main$S as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$R as CondOpSelect, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$N as DataSourceFieldSelect, _sfc_main$P as DataSourceFields, _sfc_main$M as DataSourceInput, _sfc_main$J as DataSourceMethodSelect, _sfc_main$K as DataSourceMethods, _sfc_main$I as DataSourceMocks, _sfc_main$H as DataSourceSelect, _sfc_main$G as DisplayConds, DragType, _sfc_main$F as EventSelect, Fixed2Other, _sfc_main$Q as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Y as Icon, IdleTask, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$A as Resizer, ScrollViewer, SideItemKey, _sfc_main$z as SplitView, _sfc_main$X as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, _sfc_main$m as Tree, _sfc_main$n as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, updateStatus, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$M as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$V as CodeSelect, _sfc_main$T as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$S as CondOpSelect, _sfc_main$o as ContentMenu, _sfc_main$i as DataSourceConfigPanel, _sfc_main$O as DataSourceFieldSelect, _sfc_main$Q as DataSourceFields, _sfc_main$N as DataSourceInput, _sfc_main$K as DataSourceMethodSelect, _sfc_main$L as DataSourceMethods, _sfc_main$J as DataSourceMocks, _sfc_main$I as DataSourceSelect, _sfc_main$H as DisplayConds, DragType, _sfc_main$G as EventSelect, Fixed2Other, _sfc_main$R as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Z as Icon, IdleTask, KeyBindingCommand, _sfc_main$E as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$A as LayoutContainer, _sfc_main$D as PageFragmentSelect, _sfc_main$q as PropsFormPanel, _sfc_main$p as PropsPanel, _sfc_main$B as Resizer, ScrollViewer, SideItemKey, _sfc_main$A as SplitView, _sfc_main$Y as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$z as ToolButton, _sfc_main$l as Tree, _sfc_main$m as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };