@tmagic/editor 1.5.0-beta.9 → 1.5.1

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tmagic/design'), require('@tmagic/form'), require('@tmagic/table'), require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/core'), require('@tmagic/utils'), require('moveable'), require('@tmagic/stage'), require('events'), require('gesto'), require('sortablejs'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@tmagic/design', '@tmagic/form', '@tmagic/table', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', 'emmet-monaco-es', 'monaco-editor', '@tmagic/core', '@tmagic/utils', 'moveable', '@tmagic/stage', 'events', 'gesto', 'sortablejs', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.designPlugin, global.formPlugin, global.tablePlugin, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.emmetMonacoEs, global.monaco, global.core, global.utils, global.VanillaMoveable, global.StageCore, global.events, global.Gesto, global.Sortable, global.KeyController));
-})(this, (function (exports, designPlugin, formPlugin, tablePlugin, vue, iconsVue, lodashEs, serialize, emmetMonacoEs, monaco, core, utils, VanillaMoveable, StageCore, events, Gesto, Sortable, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tmagic/design'), require('@tmagic/form'), require('@tmagic/table'), require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/core'), require('@tmagic/utils'), require('moveable'), require('@tmagic/stage'), require('events'), require('gesto'), require('deep-object-diff'), require('sortablejs'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tmagic/design', '@tmagic/form', '@tmagic/table', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', 'emmet-monaco-es', 'monaco-editor', '@tmagic/core', '@tmagic/utils', 'moveable', '@tmagic/stage', 'events', 'gesto', 'deep-object-diff', 'sortablejs', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.designPlugin, global.formPlugin, global.tablePlugin, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.emmetMonacoEs, global.monaco, global.core, global.utils, global.VanillaMoveable, global.StageCore, global.events, global.Gesto, global.deepObjectDiff, global.Sortable, global.KeyController));
+})(this, (function (exports, designPlugin, formPlugin, tablePlugin, vue, iconsVue, lodashEs, serialize, emmetMonacoEs, monaco, core, utils, VanillaMoveable, StageCore, events, Gesto, deepObjectDiff, Sortable, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -23,8 +23,8 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
-  const _hoisted_1$w = ["src"];
-  const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$y = ["src"];
+  const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -48,7 +48,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$w)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$y)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -76,10 +76,10 @@
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
 
-  const _hoisted_1$v = {
+  const _hoisted_1$x = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
-  const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
@@ -132,7 +132,7 @@
       let vsDiffEditor = null;
       const values = vue.ref("");
       const loading = vue.ref(false);
-      const codeEditor = vue.ref();
+      const codeEditor = vue.useTemplateRef("codeEditor");
       const resizeObserver = new globalThis.ResizeObserver(
         lodashEs.throttle(() => {
           vsEditor?.layout();
@@ -236,7 +236,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -252,7 +252,7 @@
                 onClick: fullScreenHandler
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.FullScreen) }, null, 8, ["icon"])
+                  vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.FullScreen) }, null, 8, ["icon"])
                 ]),
                 _: 1
               }),
@@ -268,7 +268,7 @@
     }
   });
 
-  const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsVsCode"
     },
@@ -287,13 +287,11 @@
     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 vue.openBlock(), vue.createBlock(_sfc_main$X, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$Y, {
           height: _ctx.config.height,
           "init-values": _ctx.model[_ctx.name],
           language: _ctx.config.language,
@@ -308,7 +306,7 @@
     }
   });
 
-  const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeLink"
     },
@@ -387,7 +385,7 @@
     }
   });
 
-  const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelect"
     },
@@ -439,11 +437,13 @@
                   { value: core.HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
                 ],
                 defaultValue: "code",
-                onChange: (mForm, v, { model }) => {
+                onChange: (mForm, v, { model, prop, changeRecords }) => {
                   if (v === core.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;
                 }
@@ -482,9 +482,7 @@
           immediate: true
         }
       );
-      const changeHandler = async () => {
-        emit("change", props.model[props.name]);
-      };
+      const changeHandler = (v, eventData) => emit("change", v, eventData);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["m-fields-code-select", _ctx.config.className])
@@ -526,6 +524,7 @@
   ];
   const styleTabConfig = {
     title: "样式",
+    display: ({ services }) => !(services.uiService.get("showStylePanel") ?? true),
     items: [
       {
         name: "style",
@@ -538,6 +537,7 @@
                 type: "data-source-field-select",
                 name: "position",
                 text: "固定定位",
+                labelPosition: "left",
                 checkStrictly: false,
                 dataSourceFieldType: ["string"],
                 fieldConfig: {
@@ -566,7 +566,7 @@
                 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",
@@ -587,7 +587,7 @@
                 fieldConfig: {
                   type: "text"
                 },
-                disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
+                disabled: (_vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
               }
             ]
           },
@@ -595,6 +595,27 @@
             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",
@@ -623,13 +644,16 @@
                 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" }
                   ]
                 }
               }
@@ -696,7 +720,7 @@
                 checkStrictly: false,
                 dataSourceFieldType: ["string"],
                 fieldConfig: {
-                  type: "text"
+                  type: "img-upload"
                 }
               },
               {
@@ -825,18 +849,20 @@
       {
         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",
@@ -863,8 +889,21 @@
             // 组件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}`);
+                    designPlugin.tMagicMessage.success("已复制");
+                  } catch (err) {
+                    designPlugin.tMagicMessage.error("复制失败");
+                  }
+                }
+              }
             },
             {
               name: "name",
@@ -1144,15 +1183,6 @@
     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--) {
@@ -1169,6 +1199,55 @@
       }
     }
   };
+  const isIncludeDataSourceByDiffAddResult = (diffResult) => {
+    for (const value of Object.values(diffResult)) {
+      const result = utils.isValueIncludeDataSource(value);
+      if (result) {
+        return true;
+      }
+      if (lodashEs.isObject(value)) {
+        return isIncludeDataSourceByDiffAddResult(value);
+      }
+    }
+    return false;
+  };
+  const isIncludeDataSourceByDiffUpdatedResult = (diffResult, oldNode) => {
+    for (const [key, value] of Object.entries(diffResult)) {
+      if (utils.isValueIncludeDataSource(value)) {
+        return true;
+      }
+      if (utils.isValueIncludeDataSource(oldNode[key])) {
+        return true;
+      }
+      if (lodashEs.isObject(value)) {
+        return isIncludeDataSourceByDiffUpdatedResult(value, oldNode[key]);
+      }
+    }
+    return false;
+  };
+  const isIncludeDataSource = (node, oldNode) => {
+    const diffResult = deepObjectDiff.detailedDiff(oldNode, node);
+    let isIncludeDataSource2 = false;
+    if (diffResult.updated) {
+      if (diffResult.updated[core.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[core.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 必须是一个数组!");
@@ -1715,7 +1794,8 @@
         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;
       }
@@ -1874,28 +1954,7 @@
       if (raw) {
         root = vue.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 = utils.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 (utils.isPage(item) || utils.isPageFragment(item)) {
-          info.page = item;
-          return;
-        }
-      });
-      return info;
+      return utils.getNodeInfo(id, root);
     }
     /**
      * 根据ID获取指点节点配置
@@ -2116,10 +2175,10 @@
       const rootItems = root.items || [];
       if (utils.isPage(node)) {
         this.state.pageLength -= 1;
-        await selectDefault(getPageList(root));
+        await selectDefault(rootItems);
       } else if (utils.isPageFragment(node)) {
         this.state.pageFragmentLength -= 1;
-        await selectDefault(getPageFragmentList(root));
+        await selectDefault(rootItems);
       } else {
         await this.select(parent);
         stage?.select(parent.id);
@@ -2142,13 +2201,13 @@
       }
       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 = lodashEs.cloneDeep(vue.toRaw(info.node));
+      const node = vue.toRaw(info.node);
       let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, root);
       newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue, key) => {
         if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
@@ -2164,7 +2223,11 @@
       if (!newConfig.type) throw new Error("配置缺少type值");
       if (newConfig.type === core.NodeType.ROOT) {
         this.set("root", newConfig);
-        return newConfig;
+        return {
+          oldNode: node,
+          newNode: newConfig,
+          changeRecords
+        };
       }
       const { parent } = info;
       if (!parent) throw new Error("获取不到父级节点");
@@ -2181,30 +2244,29 @@
       const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
       nodes.splice(targetIndex, 1, newConfig);
       this.set("nodes", [...nodes]);
-      this.get("stage")?.update({
-        config: lodashEs.cloneDeep(newConfig),
-        parentId: parent.id,
-        root: lodashEs.cloneDeep(root)
-      });
       if (utils.isPage(newConfig) || utils.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 !== core.NodeType.ROOT) {
+      const updateData = await Promise.all(nodes.map((node) => this.doUpdate(node, data)));
+      if (updateData[0].oldNode?.type !== core.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]
@@ -2398,7 +2460,7 @@
         parent.items?.splice(index, 1);
         await stage.remove({ id: node.id, parentId: parent.id, root: lodashEs.cloneDeep(root) });
         const layout = await this.getLayout(target);
-        const newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), config, (objValue, srcValue) => {
+        const newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), config, (_objValue, srcValue) => {
           if (Array.isArray(srcValue)) {
             return srcValue;
           }
@@ -2407,7 +2469,11 @@
         target.items.push(newConfig);
         await stage.select(targetId);
         const targetParent = this.getParentById(target.id);
-        await stage.update({ config: lodashEs.cloneDeep(target), parentId: targetParent?.id, root: lodashEs.cloneDeep(root) });
+        await stage.update({
+          config: lodashEs.cloneDeep(target),
+          parentId: targetParent?.id,
+          root: lodashEs.cloneDeep(root)
+        });
         await this.select(newConfig);
         stage.select(newConfig.id);
         this.addModifiedNodeId(target.id);
@@ -2760,6 +2826,7 @@
           name: "params",
           type: "key-value",
           defaultValue: {},
+          advanced: true,
           text: "参数"
         },
         {
@@ -2773,6 +2840,7 @@
           name: "headers",
           type: "key-value",
           defaultValue: {},
+          advanced: true,
           text: "请求头"
         }
       ]
@@ -2827,7 +2895,7 @@
         },
         {
           title: "请求参数裁剪",
-          display: (formState, { model }) => model.type === "http",
+          display: (_formState, { model }) => model.type === "http",
           items: [
             {
               name: "beforeRequest",
@@ -2839,7 +2907,7 @@
         },
         {
           title: "响应数据裁剪",
-          display: (formState, { model }) => model.type === "http",
+          display: (_formState, { model }) => model.type === "http",
           items: [
             {
               name: "afterResponse",
@@ -3006,6 +3074,10 @@
   class IdleTask extends events.EventEmitter {
     taskList = [];
     taskHandle = null;
+    constructor() {
+      super();
+      this.setMaxListeners(1e3);
+    }
     enqueueTask(taskHandler, taskData) {
       this.taskList.push({
         handler: taskHandler,
@@ -3015,6 +3087,9 @@
         this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
       }
     }
+    clearTasks() {
+      this.taskList = [];
+    }
     on(eventName, listener) {
       return super.on(eventName, listener);
     }
@@ -3025,12 +3100,30 @@
       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");
@@ -3175,7 +3268,7 @@
     });
   };
 
-  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -3191,7 +3284,7 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const form = vue.ref();
+      const form = vue.useTemplateRef("form");
       const getFormConfig = (items = []) => [
         {
           type: "fieldset",
@@ -3212,10 +3305,10 @@
           }))
         )
       );
-      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);
         }
@@ -3235,9 +3328,9 @@
     }
   });
 
-  const _hoisted_1$u = { class: "m-fields-code-select-col" };
-  const _hoisted_2$g = { class: "code-select-container" };
-  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$w = { class: "m-fields-code-select-col" };
+  const _hoisted_2$i = { class: "code-select-container" };
+  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelectCol"
     },
@@ -3308,22 +3401,39 @@
           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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
-          vue.createElementVNode("div", _hoisted_2$g, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             vue.createVNode(vue.unref(formPlugin.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 ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
               key: 0,
@@ -3332,14 +3442,14 @@
               onClick: _cache[0] || (_cache[0] = ($event) => editCode(_ctx.model[_ctx.name]))
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$Y, {
+                vue.createVNode(_sfc_main$Z, {
                   icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
                 }, null, 8, ["icon"])
               ]),
               _: 1
             }, 8, ["size"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
             name: "params",
             key: _ctx.model[_ctx.name],
             model: _ctx.model,
@@ -3352,7 +3462,7 @@
     }
   });
 
-  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCondOpSelect"
     },
@@ -3438,7 +3548,7 @@
     }
   });
 
-  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     __name: "FloatingBox",
     props: /* @__PURE__ */ vue.mergeModels({
       position: { default: () => ({ left: 0, top: 0 }) },
@@ -3458,8 +3568,8 @@
       const height = vue.useModel(__props, "height");
       const visible = vue.useModel(__props, "visible");
       const props = __props;
-      const target = vue.ref();
-      const titleEl = vue.ref();
+      const target = vue.useTemplateRef("target");
+      const titleEl = vue.useTemplateRef("titleEl");
       const zIndex = designPlugin.useZIndex();
       const curZIndex = vue.ref(0);
       const titleHeight = vue.ref(0);
@@ -3593,7 +3703,7 @@
                   onClick: closeHandler
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
+                    vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
                   ]),
                   _: 1
                 })
@@ -3614,7 +3724,7 @@
   const useCodeBlockEdit = (codeBlockService) => {
     const codeConfig = vue.ref();
     const codeId = vue.ref();
-    const codeBlockEditor = vue.ref();
+    const codeBlockEditor = vue.useTemplateRef("codeBlockEditor");
     const createCodeBlock = async () => {
       if (!codeBlockService) {
         designPlugin.tMagicMessage.error("新增代码块失败");
@@ -3622,7 +3732,7 @@
       }
       codeConfig.value = {
         name: "",
-        content: `({app, params}) => {
+        content: `({app, params, flowState}) => {
   // place your code here
 }`,
         params: []
@@ -3668,81 +3778,10 @@
     };
   };
 
-  const useDataSourceMethod = () => {
-    const codeConfig = vue.ref();
-    const codeBlockEditor = vue.ref();
-    const dataSource = vue.ref();
-    const dataSourceMethod = vue.ref("");
-    return {
-      codeConfig,
-      codeBlockEditor,
-      createCode: async (model) => {
-        codeConfig.value = {
-          name: "",
-          content: `({ params, dataSource, app }) => {
-  // place your code here
-}`,
-          params: []
-        };
-        await vue.nextTick();
-        dataSource.value = model;
-        dataSourceMethod.value = "";
-        codeBlockEditor.value?.show();
-      },
-      editCode: async (model, methodName) => {
-        const method = model.methods?.find((method2) => method2.name === methodName);
-        if (!method) {
-          designPlugin.tMagicMessage.error("获取数据源方法失败");
-          return;
-        }
-        let codeContent = method.content || `({ params, dataSource, app }) => {
-  // place your code here
-}`;
-        if (typeof codeContent !== "string") {
-          codeContent = codeContent.toString();
-        }
-        codeConfig.value = {
-          ...lodashEs.cloneDeep(method),
-          content: codeContent
-        };
-        await vue.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 = vue.reactive({
     uiSelectMode: false,
     showSrc: false,
+    showStylePanel: true,
     zoom: 1,
     stageContainerRect: {
       width: 0,
@@ -4078,7 +4117,7 @@
     const filter = (text) => {
       if (!nodeData.value.length) return;
       nodeData.value.forEach((node) => {
-        traverseNode(node, (node2, parents) => {
+        utils.traverseNode(node, (node2, parents) => {
           if (!nodeStatusMap.value) return;
           const visible = filterIsMatch(text, node2);
           if (visible && parents.length) {
@@ -4105,7 +4144,7 @@
 
   const useGetSo = (target, emit) => {
     let getso;
-    const isDraging = vue.ref(false);
+    const isDragging = vue.ref(false);
     vue.onMounted(() => {
       if (!target.value) return;
       getso = new Gesto(target.value, {
@@ -4115,17 +4154,17 @@
         if (!target.value) return;
         emit("change", e);
       }).on("dragStart", () => {
-        isDraging.value = true;
+        isDragging.value = true;
       }).on("dragEnd", () => {
-        isDraging.value = false;
+        isDragging.value = false;
       });
     });
     vue.onBeforeUnmount(() => {
       getso?.unset();
-      isDraging.value = false;
+      isDragging.value = false;
     });
     return {
-      isDraging
+      isDragging
     };
   };
 
@@ -4156,7 +4195,7 @@
   const createPageNodeStatus$1 = (nodeData, initialLayerNodeStatus) => {
     const map = /* @__PURE__ */ new Map();
     nodeData.forEach(
-      (node) => traverseNode(node, (node2) => {
+      (node) => utils.traverseNode(node, (node2) => {
         map.set(
           node2.id,
           initialLayerNodeStatus?.get(node2.id) || {
@@ -4187,9 +4226,9 @@
     };
   };
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFields"
     },
@@ -4226,14 +4265,28 @@
         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 = [
         {
@@ -4427,9 +4480,8 @@
       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) {
           designPlugin.tMagicMessage.error(e.message);
         }
@@ -4440,12 +4492,12 @@
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$f, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               disabled: _ctx.disabled,
@@ -4470,7 +4522,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.createVNode(_sfc_main$Q, {
+          vue.createVNode(_sfc_main$R, {
             visible: addDialogVisible.value,
             "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),
             width: width.value,
@@ -4493,7 +4545,7 @@
             ]),
             _: 1
           }, 8, ["visible", "width", "height", "title", "position"]),
-          vue.createVNode(_sfc_main$Q, {
+          vue.createVNode(_sfc_main$R, {
             visible: addFromJsonDialogVisible.value,
             "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => addFromJsonDialogVisible.value = $event),
             width: width.value,
@@ -4518,8 +4570,8 @@
     }
   });
 
-  const _hoisted_1$s = { class: "m-editor-data-source-field-select" };
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$u = { class: "m-editor-data-source-field-select" };
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     __name: "FieldSelect",
     props: /* @__PURE__ */ vue.mergeModels({
       value: {},
@@ -4600,7 +4652,7 @@
         eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
           _ctx.checkStrictly ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(designPlugin.TMagicSelect), {
               "model-value": selectDataSourceId.value,
@@ -4668,7 +4720,7 @@
                 onClick: _cache[0] || (_cache[0] = ($event) => editHandler(selectDataSourceId.value))
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_sfc_main$Y, {
+                  vue.createVNode(_sfc_main$Z, {
                     icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
                   }, null, 8, ["icon"])
                 ]),
@@ -4682,8 +4734,8 @@
     }
   });
 
-  const _hoisted_1$r = { class: "m-fields-data-source-field-select" };
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$t = { class: "m-fields-data-source-field-select" };
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFieldSelect"
     },
@@ -4784,8 +4836,8 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
-          showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+          showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
             key: 0,
             "model-value": _ctx.model[_ctx.name],
             disabled: _ctx.disabled,
@@ -4820,7 +4872,7 @@
                 onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+                  vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
                 ]),
                 _: 1
               }, 8, ["type", "size"])
@@ -4832,10 +4884,10 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceInput"
     },
@@ -4856,7 +4908,7 @@
       const props = __props;
       const emit = __emit;
       const { dataSourceService } = vue.inject("services") || {};
-      const autocomplete = vue.ref();
+      const autocomplete = vue.useTemplateRef("autocomplete");
       const isFocused = vue.ref(false);
       const state = vue.ref("");
       const displayState = vue.ref([]);
@@ -5035,12 +5087,12 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$q, [
+            vue.createElementVNode("div", _hoisted_1$s, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$e, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$g, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -5070,7 +5122,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$Y, {
+              vue.createVNode(_sfc_main$Z, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -5081,11 +5133,11 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -5111,7 +5163,7 @@
       const { height: codeBlockEditorHeight } = useEditorContentHeight();
       const difVisible = vue.ref(false);
       const { rect: windowRect } = useWindowRect();
-      const magicVsEditor = vue.ref();
+      const magicVsEditor = vue.useTemplateRef("magicVsEditor");
       const diffChange = () => {
         if (!magicVsEditor.value || !formBox.value?.form) {
           return;
@@ -5213,14 +5265,14 @@
           }
         }
       ]);
-      const submitForm = (values) => {
+      const submitForm = (values, data) => {
         changedValue.value = void 0;
-        emit("submit", values);
+        emit("submit", values, data);
       };
       const errorHandler = (error) => {
         designPlugin.tMagicMessage.error(error.message);
       };
-      const formBox = vue.ref();
+      const formBox = vue.useTemplateRef("formBox");
       const changedValue = vue.ref();
       const changeHandler = (values) => {
         changedValue.value = values;
@@ -5236,7 +5288,7 @@
           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");
@@ -5258,7 +5310,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createVNode(_sfc_main$Q, {
+          vue.createVNode(_sfc_main$R, {
             visible: boxVisible.value,
             "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => boxVisible.value = $event),
             width: width.value,
@@ -5335,8 +5387,8 @@
                 ])
               ]),
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_1$p, [
-                  vue.createElementVNode("div", _hoisted_2$d, [
+                vue.createElementVNode("div", _hoisted_1$r, [
+                  vue.createElementVNode("div", _hoisted_2$f, [
                     vue.createVNode(vue.unref(designPlugin.TMagicTag), {
                       size: "small",
                       type: "info"
@@ -5359,14 +5411,14 @@
                     })
                   ])
                 ]),
-                difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$X, {
+                difVisible.value ? (vue.openBlock(), vue.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: vue.unref(formBox)?.form?.values.content,
                   style: vue.normalizeStyle(`height: ${vue.unref(windowRect).height - 150}px`)
                 }, null, 8, ["initValues", "modifiedValues", "style"])) : vue.createCommentVNode("", true)
               ]),
@@ -5378,9 +5430,9 @@
     }
   });
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethods"
     },
@@ -5400,7 +5452,9 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
+      const codeConfig = vue.ref();
+      const codeBlockEditor = vue.useTemplateRef("codeBlockEditor");
+      let editIndex = -1;
       const methodColumns = [
         {
           label: "名称",
@@ -5425,16 +5479,29 @@
           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 = {
+                  ...lodashEs.cloneDeep(method),
+                  content: codeContent
+                };
+                editIndex = index;
+                vue.nextTick(() => {
+                  codeBlockEditor.value?.show();
+                });
               }
             },
             {
               text: "删除",
               buttonType: "danger",
-              handler: (row) => {
-                deleteCode(props.model, row.name);
+              handler: async (row, index) => {
+                await designPlugin.tMagicMessageBox.confirm(`确定删除${row.name}?`, "提示");
+                props.model[props.name].splice(index, 1);
                 emit("change", props.model[props.name]);
               }
             }
@@ -5442,20 +5509,56 @@
         }
       ];
       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;
+        vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$c, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5469,12 +5572,12 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
+          codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
             disabled: _ctx.disabled,
-            content: vue.unref(codeConfig),
+            content: codeConfig.value,
             "is-data-source": true,
             "data-source-type": _ctx.model.type,
             onSubmit: submitCodeHandler
@@ -5484,9 +5587,9 @@
     }
   });
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethodSelect"
     },
@@ -5572,8 +5675,8 @@
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
-          vue.createElementVNode("div", _hoisted_2$b, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+          vue.createElementVNode("div", _hoisted_2$d, [
             vue.createVNode(vue.unref(formPlugin.MContainer), {
               class: "select",
               config: cascaderConfig.value,
@@ -5592,7 +5695,7 @@
                   onClick: editCodeHandler
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(_sfc_main$Y, {
+                    vue.createVNode(_sfc_main$Z, {
                       icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
                     }, null, 8, ["icon"])
                   ]),
@@ -5602,7 +5705,7 @@
               _: 1
             }, 8, ["content"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -5616,9 +5719,9 @@
     }
   });
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMocks"
     },
@@ -5707,7 +5810,7 @@
       const columns = [
         {
           type: "expand",
-          component: _sfc_main$X,
+          component: _sfc_main$Y,
           props: (row) => ({
             initValues: row.data,
             language: "json",
@@ -5822,12 +5925,12 @@
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$a, [
+          vue.createElementVNode("div", _hoisted_2$c, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5841,7 +5944,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.createVNode(_sfc_main$Q, {
+          vue.createVNode(_sfc_main$R, {
             visible: addDialogVisible.value,
             "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),
             width: width.value,
@@ -5853,7 +5956,6 @@
           }, {
             body: vue.withCtx(() => [
               vue.createVNode(vue.unref(formPlugin.MFormBox), {
-                ref: "addDialog",
                 "label-width": "120px",
                 config: formConfig,
                 values: formValues.value,
@@ -5869,8 +5971,8 @@
     }
   });
 
-  const _hoisted_1$l = { class: "m-fields-data-source-select" };
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$n = { class: "m-fields-data-source-select" };
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceSelect"
     },
@@ -5927,7 +6029,7 @@
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           vue.createVNode(vue.unref(formPlugin.MSelect), {
             model: _ctx.model,
             name: _ctx.name,
@@ -5949,7 +6051,7 @@
                 onClick: editHandler
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_sfc_main$Y, {
+                  vue.createVNode(_sfc_main$Z, {
                     icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
                   }, null, 8, ["icon"])
                 ]),
@@ -5963,7 +6065,7 @@
     }
   });
 
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "m-fields-display-conds"
     },
@@ -6072,8 +6174,11 @@
           }
         ]
       }));
-      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 vue.openBlock(), vue.createBlock(vue.unref(formPlugin.MGroupList), {
@@ -6091,12 +6196,12 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsEventSelect"
     },
@@ -6144,13 +6249,13 @@
                 if (pageFragment) {
                   events = [
                     {
-                      label: pageFragment.name || "迭代器容器",
+                      label: pageFragment.name || "页面片容器",
                       value: pageFragment.id,
                       children: events
                     }
                   ];
                   pageFragment.items.forEach((node) => {
-                    traverseNode(node, (node2) => {
+                    utils.traverseNode(node, (node2) => {
                       const nodeEvents = node2.type && eventsService.getEvent(node2.type) || [];
                       events.push({
                         label: `${node2.name}_${node2.id}`,
@@ -6251,7 +6356,7 @@
               if (pageFragment) {
                 methods = [];
                 pageFragment.items.forEach((node2) => {
-                  traverseNode(node2, (node3) => {
+                  utils.traverseNode(node2, (node3) => {
                     const nodeMethods = node3.type && eventsService?.getMethod(node3.type) || [];
                     if (nodeMethods.length) {
                       methods.push({
@@ -6357,30 +6462,31 @@
         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 = vue.resolveComponent("m-form-table");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           isOldVersion.value ? (vue.openBlock(), vue.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"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$9, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -6398,6 +6504,7 @@
                 key: index,
                 disabled: _ctx.disabled,
                 size: _ctx.size,
+                prop: `${_ctx.prop}.${index}`,
                 config: actionsConfig.value,
                 model: cardItem,
                 "label-width": _ctx.config.labelWidth || "100px",
@@ -6410,8 +6517,9 @@
                     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"]),
                   vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                     style: { "color": "#f56c6c" },
                     link: "",
@@ -6422,7 +6530,7 @@
                   }, null, 8, ["icon", "disabled", "size", "onClick"])
                 ]),
                 _: 2
-              }, 1032, ["disabled", "size", "config", "model", "label-width"]);
+              }, 1032, ["disabled", "size", "prop", "config", "model", "label-width"]);
             }), 128))
           ]))
         ]);
@@ -6430,29 +6538,29 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$j, _cache[0] || (_cache[0] = [
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$l, _cache[0] || (_cache[0] = [
           vue.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__ */ vue.defineComponent({
+  const _hoisted_1$k = { class: "m-fields-key-value" };
+  const _hoisted_2$a = { key: 0 };
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsKeyValue"
     },
@@ -6475,14 +6583,18 @@
       const records = vue.ref([]);
       const showCode = vue.ref(false);
       vue.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 = {};
@@ -6510,8 +6622,8 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$8, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: "m-fields-key-value-item",
@@ -6525,7 +6637,7 @@
                   size: _ctx.size,
                   onChange: keyChangeHandler
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-                _cache[1] || (_cache[1] = vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1)),
+                _cache[1] || (_cache[1] = vue.createElementVNode("span", { class: "m-fields-key-value-delimiter" }, ":", -1)),
                 vue.createVNode(vue.unref(designPlugin.TMagicInput), {
                   placeholder: "value",
                   modelValue: records.value[index][1],
@@ -6535,7 +6647,7 @@
                   onChange: valueChangeHandler
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
                 vue.createVNode(vue.unref(designPlugin.TMagicButton), {
-                  class: "m-fileds-key-value-delete",
+                  class: "m-fields-key-value-delete",
                   type: "danger",
                   size: _ctx.size,
                   disabled: _ctx.disabled,
@@ -6560,11 +6672,11 @@
               _: 1
             }, 8, ["size", "disabled", "icon"])
           ])) : vue.createCommentVNode("", true),
-          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$X, {
+          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
             key: 1,
             height: "200px",
             "init-values": _ctx.model[_ctx.name],
-            language: "json",
+            language: "javascript",
             options: {
               readOnly: _ctx.disabled
             },
@@ -6576,7 +6688,7 @@
             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"])) : vue.createCommentVNode("", true)
         ]);
@@ -6584,9 +6696,9 @@
     }
   });
 
-  const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
-  const _hoisted_2$7 = { class: "page-fragment-select-container" };
-  const _sfc_main$C = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsPageFragmentSelect"
     },
@@ -6632,8 +6744,8 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-          vue.createElementVNode("div", _hoisted_2$7, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+          vue.createElementVNode("div", _hoisted_2$9, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -6641,7 +6753,7 @@
               size: _ctx.size,
               onChange: changeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
               key: 0,
               class: "icon",
               icon: vue.unref(iconsVue.Edit),
@@ -6653,12 +6765,12 @@
     }
   });
 
-  const _hoisted_1$g = {
+  const _hoisted_1$i = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
   };
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsUISelect"
     },
@@ -6689,7 +6801,10 @@
         globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
       };
       const clickHandler = ({ detail }) => {
-        const id = utils.getIdFromEl()(detail);
+        let { id } = detail;
+        if (detail.nodeType) {
+          id = utils.getIdFromEl()(detail) || id;
+        }
         if (id) {
           props.model[props.name] = id;
           emit("change", id);
@@ -6753,7 +6868,7 @@
             ])),
             _: 1
           }, 8, ["icon", "disabled", "size"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(designPlugin.TMagicTooltip), {
               content: "清除",
@@ -6820,7 +6935,7 @@
     }
   });
 
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -6828,13 +6943,13 @@
     emits: ["change"],
     setup(__props, { emit: __emit }) {
       const emit = __emit;
-      const target = vue.ref();
-      const { isDraging } = useGetSo(target, emit);
+      const target = vue.useTemplateRef("target");
+      const { isDragging } = useGetSo(target, emit);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("span", {
           ref_key: "target",
           ref: target,
-          class: vue.normalizeClass(["m-editor-resizer", { "m-editor-resizer-draging": vue.unref(isDraging) }])
+          class: vue.normalizeClass(["m-editor-resizer", { "m-editor-resizer-dragging": vue.unref(isDragging) }])
         }, [
           vue.renderSlot(_ctx.$slots, "default")
         ], 2);
@@ -6842,7 +6957,7 @@
     }
   });
 
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSplitView"
     },
@@ -6862,7 +6977,7 @@
     setup(__props, { expose: __expose, emit: __emit }) {
       const emit = __emit;
       const props = __props;
-      const el = vue.ref();
+      const el = vue.useTemplateRef("el");
       const hasLeft = vue.computed(() => typeof props.left !== "undefined");
       const hasRight = vue.computed(() => typeof props.right !== "undefined");
       const center = vue.ref(0);
@@ -6980,7 +7095,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$A, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$B, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -6989,7 +7104,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$A, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$B, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -7002,12 +7117,12 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -7063,7 +7178,7 @@
       };
       const mouseupHandler = (item, event) => {
         if (props.eventType !== "mouseup") return;
-        if (item.type === "button") {
+        if (item.type === "button" && event.button === 0) {
           buttonHandler(item, event);
         }
       };
@@ -7078,7 +7193,7 @@
           _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -7092,7 +7207,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -7110,7 +7225,7 @@
               title: _ctx.data.text
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -7143,7 +7258,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$6, [
+              vue.createElementVNode("span", _hoisted_2$8, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(designPlugin.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -7160,69 +7275,90 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarAddButton"
     },
     __name: "AddButton",
-    props: {
-      type: {}
-    },
     setup(__props) {
-      const props = __props;
       const services = vue.inject("services");
       const uiService = services?.uiService;
       const editorService = services?.editorService;
       const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
-      const addPage = () => {
+      const addPage = (type) => {
         if (!editorService) return;
         const root = vue.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 ? (vue.openBlock(), vue.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
-        }, [
-          vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e));
+        return showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+          vue.createVNode(vue.unref(designPlugin.TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
+            reference: vue.withCtx(() => [
+              vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            ]),
+            default: vue.withCtx(() => [
+              vue.createVNode(_sfc_main$z, {
+                data: {
+                  type: "button",
+                  text: "页面",
+                  handler: () => {
+                    addPage(vue.unref(core.NodeType).PAGE);
+                  }
+                }
+              }, null, 8, ["data"]),
+              vue.createVNode(_sfc_main$z, {
+                data: {
+                  type: "button",
+                  text: "页面片",
+                  handler: () => {
+                    addPage(vue.unref(core.NodeType).PAGE_FRAGMENT);
+                  }
+                }
+              }, null, 8, ["data"])
+            ]),
+            _: 1
+          })
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7));
       };
     }
   });
 
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarScrollContainer"
     },
     __name: "PageBarScrollContainer",
     props: {
-      type: {},
-      pageBarSortOptions: {}
+      pageBarSortOptions: {},
+      length: {}
     },
-    setup(__props) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const uiService = services?.uiService;
-      const itemsContainer = vue.ref();
+      const itemsContainer = vue.useTemplateRef("itemsContainer");
       const canScroll = vue.ref(false);
       const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
       const showPageListButton = vue.computed(() => uiService?.get("showPageListButton"));
       const itemsContainerWidth = vue.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);
         vue.nextTick(() => {
           if (itemsContainer.value) {
             canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
@@ -7232,7 +7368,7 @@
       const resizeObserver = new ResizeObserver(() => {
         setCanScroll();
       });
-      const pageBar = vue.ref();
+      const pageBar = vue.useTemplateRef("pageBar");
       vue.onMounted(() => {
         pageBar.value && resizeObserver.observe(pageBar.value);
       });
@@ -7241,38 +7377,43 @@
       });
       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 = vue.computed(() => editorService?.get("pageLength") || 0);
-      const pageFragmentLength = vue.computed(() => editorService?.get("pageFragmentLength") || 0);
-      const crateWatchLength = (length) => vue.watch(
-        length,
-        (length2 = 0, preLength = 0) => {
+      vue.watch(
+        () => props.length,
+        (length = 0, preLength = 0) => {
           setTimeout(() => {
             setCanScroll();
-            if (length2 < preLength) {
-              scroll("start");
-            } else {
-              scroll("end");
-            }
-            if (length2 > 1) {
+            vue.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 = {
@@ -7308,25 +7449,14 @@
           immediate: true
         }
       );
-      let unWatchPageLength;
-      let unWatchPageFragmentLength;
-      vue.watch(
-        () => props.type,
-        (type) => {
-          if (type === core.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 vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor-page-bar",
@@ -7334,40 +7464,39 @@
           ref: pageBar
         }, [
           vue.renderSlot(_ctx.$slots, "prepend"),
-          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          _ctx.length ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
-            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
-          }, [
-            vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
-          ])) : vue.createCommentVNode("", true),
-          _ctx.type === vue.unref(core.NodeType).PAGE && pageLength.value || _ctx.type === vue.unref(core.NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 1,
             class: "m-editor-page-bar-items",
             ref_key: "itemsContainer",
-            ref: itemsContainer,
-            style: vue.normalizeStyle(`width: ${itemsContainerWidth.value}px`)
+            ref: itemsContainer
           }, [
             vue.renderSlot(_ctx.$slots, "default")
-          ], 4)) : vue.createCommentVNode("", true),
+          ], 512)) : vue.createCommentVNode("", true),
+          canScroll.value ? (vue.openBlock(), vue.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"))
+          }, [
+            vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+          ])) : vue.createCommentVNode("", true),
           canScroll.value ? (vue.openBlock(), vue.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"))
           }, [
-            vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.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__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageList"
     },
@@ -7380,11 +7509,12 @@
       const uiService = services?.uiService;
       const editorService = services?.editorService;
       const showPageListButton = vue.computed(() => uiService?.get("showPageListButton"));
-      const switchPage = (id) => {
-        editorService?.select(id);
+      const page = vue.computed(() => editorService?.get("page"));
+      const switchPage = async (id) => {
+        await editorService?.select(id);
       };
       return (_ctx, _cache) => {
-        return showPageListButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        return showPageListButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
           vue.createVNode(vue.unref(designPlugin.TMagicPopover), {
             "popper-class": "page-bar-popover",
             placement: "top",
@@ -7404,10 +7534,11 @@
               vue.createElementVNode("div", null, [
                 vue.renderSlot(_ctx.$slots, "page-list-popover", { list: _ctx.list }, () => [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.list, (item, index) => {
-                    return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                    return vue.openBlock(), vue.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
@@ -7423,118 +7554,108 @@
     }
   });
 
-  const _sfc_main$u = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+    __name: "Search",
     props: {
-      modelValue: {}
+      "query": {},
+      "queryModifiers": {}
     },
-    emits: ["update:modelValue"],
+    emits: /* @__PURE__ */ vue.mergeModels(["search"], ["update:query"]),
     setup(__props, { emit: __emit }) {
-      const data = [
+      const emit = __emit;
+      const query = vue.useModel(__props, "query");
+      const formConfig = formPlugin.createForm([
         {
-          type: core.NodeType.PAGE,
-          text: "页面"
+          type: "checkbox-group",
+          name: "pageType",
+          options: [
+            {
+              value: core.NodeType.PAGE,
+              text: "页面"
+            },
+            {
+              value: core.NodeType.PAGE_FRAGMENT,
+              text: "页面片段"
+            }
+          ]
         },
         {
-          type: core.NodeType.PAGE_FRAGMENT,
-          text: "页面片"
+          name: "keyword",
+          type: "text",
+          placeholder: "请输入关键字",
+          clearable: true
         }
-      ];
-      const emit = __emit;
-      const clickHandler = (value) => {
-        emit("update:modelValue", value);
+      ]);
+      const visible = vue.ref(false);
+      const onFormChange = (values) => {
+        query.value = values;
+        emit("search", values);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(data, (item) => {
-          return vue.createVNode(vue.unref(designPlugin.TMagicButton), {
-            class: vue.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: vue.withCtx(() => [
-              vue.createTextVNode(vue.toDisplayString(item.text), 1)
-            ]),
-            _: 2
-          }, 1032, ["class", "type", "onClick"]);
-        }), 64);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+          vue.createVNode(_sfc_main$Z, {
+            icon: vue.unref(iconsVue.Search),
+            onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
+            class: vue.normalizeClass({ "icon-active": visible.value })
+          }, null, 8, ["icon", "class"]),
+          visible.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+            key: 0,
+            to: ".m-editor-page-bar-tabs"
+          }, [
+            query.value ? (vue.openBlock(), vue.createBlock(vue.unref(formPlugin.MForm), {
+              key: 0,
+              class: "m-editor-page-bar-search-panel",
+              inline: true,
+              config: vue.unref(formConfig),
+              "init-values": query.value,
+              "prevent-submit-default": true,
+              onChange: onFormChange
+            }, null, 8, ["config", "init-values"])) : vue.createCommentVNode("", true)
+          ])) : vue.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__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.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 = vue.ref(core.NodeType.PAGE);
+      const props = __props;
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const root = vue.computed(() => editorService?.get("root"));
       const page = vue.computed(() => editorService?.get("page"));
-      const pageList = vue.computed(() => getPageList(root.value));
-      const pageFragmentList = vue.computed(() => getPageFragmentList(root.value));
-      const list = vue.computed(() => active.value === core.NodeType.PAGE ? pageList.value : pageFragmentList.value);
-      const activePage = vue.ref("");
-      const activePageFragment = vue.ref("");
-      vue.watch(
-        page,
-        (page2) => {
-          if (!page2) {
-            if (active.value === core.NodeType.PAGE) {
-              activePage.value = "";
-            }
-            if (active.value === core.NodeType.PAGE_FRAGMENT) {
-              activePageFragment.value = "";
-            }
-            return;
-          }
-          if (utils.isPage(page2)) {
-            activePage.value = page2?.id;
-            if (active.value !== core.NodeType.PAGE) {
-              active.value = core.NodeType.PAGE;
-            }
-          } else if (utils.isPageFragment(page2)) {
-            activePageFragment.value = page2?.id;
-            if (active.value !== core.NodeType.PAGE_FRAGMENT) {
-              active.value = core.NodeType.PAGE_FRAGMENT;
-            }
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-      vue.watch(active, (active2) => {
-        if (active2 === core.NodeType.PAGE) {
-          if (!activePage.value && !pageList.value.length) {
-            editorService?.selectRoot();
-            return;
-          }
-          switchPage(activePage.value);
-          return;
+      const query = vue.ref({
+        pageType: [core.NodeType.PAGE, core.NodeType.PAGE_FRAGMENT],
+        keyword: ""
+      });
+      const list = vue.computed(() => {
+        const { pageType, keyword } = query.value;
+        if (pageType.length === 0) {
+          return [];
         }
-        if (active2 === core.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);
@@ -7549,20 +7670,50 @@
       const remove = (node) => {
         editorService?.remove(node);
       };
+      const pageBarScrollContainer = vue.useTemplateRef("pageBarScrollContainer");
+      const pageBarItems = vue.useTemplateRef("pageBarItems");
+      vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-          !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createBlock(_sfc_main$u, {
-            key: 0,
-            modelValue: active.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
-          }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$w, {
-            type: active.value,
-            "page-bar-sort-options": _ctx.pageBarSortOptions
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+          vue.createVNode(_sfc_main$x, {
+            ref_key: "pageBarScrollContainer",
+            ref: pageBarScrollContainer,
+            "page-bar-sort-options": _ctx.pageBarSortOptions,
+            length: list.value.length
           }, {
             prepend: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$x, { type: active.value }, null, 8, ["type"]),
-              vue.createVNode(_sfc_main$v, { list: list.value }, {
+              vue.renderSlot(_ctx.$slots, "page-bar-add-button", {}, () => [
+                vue.createVNode(_sfc_main$y)
+              ]),
+              vue.createVNode(_sfc_main$v, {
+                query: query.value,
+                "onUpdate:query": _cache[0] || (_cache[0] = ($event) => query.value = $event)
+              }, null, 8, ["query"]),
+              vue.createVNode(_sfc_main$w, { list: list.value }, {
                 "page-list-popover": vue.withCtx(({ list: list2 }) => [
                   vue.renderSlot(_ctx.$slots, "page-list-popover", { list: list2 })
                 ]),
@@ -7573,8 +7724,11 @@
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (item) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   class: vue.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)
                 }, [
                   vue.createElementVNode("div", _hoisted_3$2, [
@@ -7602,7 +7756,7 @@
                     default: vue.withCtx(() => [
                       vue.createElementVNode("div", null, [
                         vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                          vue.createVNode(_sfc_main$y, {
+                          vue.createVNode(_sfc_main$z, {
                             data: {
                               type: "button",
                               text: "复制",
@@ -7610,7 +7764,7 @@
                               handler: () => copy(item)
                             }
                           }, null, 8, ["data"]),
-                          vue.createVNode(_sfc_main$y, {
+                          vue.createVNode(_sfc_main$z, {
                             data: {
                               type: "button",
                               text: "删除",
@@ -7623,19 +7777,19 @@
                     ]),
                     _: 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__ */ vue.defineComponent({
+  const _hoisted_1$c = { class: "m-editor-empty-panel" };
+  const _hoisted_2$5 = { class: "m-editor-empty-content" };
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -7657,14 +7811,14 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-          vue.createElementVNode("div", _hoisted_2$4, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+          vue.createElementVNode("div", _hoisted_2$5, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(core.NodeType).PAGE))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _cache[2] || (_cache[2] = vue.createElementVNode("p", null, "新增页面", -1))
             ]),
@@ -7674,7 +7828,7 @@
               onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(vue.unref(core.NodeType).PAGE_FRAGMENT))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _cache[3] || (_cache[3] = vue.createElementVNode("p", null, "新增页面片", -1))
             ])) : vue.createCommentVNode("", true)
@@ -7688,24 +7842,24 @@
   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__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
     __name: "Framework",
     props: {
       disabledPageFragment: { type: Boolean },
-      pageBarSortOptions: {}
+      pageBarSortOptions: {},
+      pageFilterFunction: { type: Function }
     },
     setup(__props) {
       const codeOptions = vue.inject("codeOptions", {});
       const { editorService, uiService } = vue.inject("services") || {};
-      const content = vue.ref();
-      const splitView = vue.ref();
+      const content = vue.useTemplateRef("content");
+      const splitView = vue.useTemplateRef("splitView");
       const root = vue.computed(() => editorService?.get("root"));
       const page = vue.computed(() => editorService?.get("page"));
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
-      const stageLoading = vue.computed(() => editorService?.get("stageLoading") || false);
       const showSrc = vue.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;
@@ -7756,7 +7910,6 @@
         }
       };
       return (_ctx, _cache) => {
-        const _directive_loading = vue.resolveDirective("loading");
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor",
           ref_key: "content",
@@ -7767,15 +7920,14 @@
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
           showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-            vue.createVNode(_sfc_main$X, {
+            vue.createVNode(_sfc_main$Y, {
               class: "m-editor-content",
               "init-values": root.value,
               options: vue.unref(codeOptions),
               onSave: saveCode
             }, null, 8, ["init-values", "options"])
-          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$z, {
+          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$A, {
             key: 1,
-            "element-loading-text": "Runtime 加载中...",
             ref_key: "splitView",
             ref: splitView,
             class: "m-editor-content",
@@ -7787,7 +7939,7 @@
             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
@@ -7797,13 +7949,17 @@
             ]),
             center: vue.withCtx(() => [
               page.value ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$s, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
+                vue.createVNode(_sfc_main$t, { "disabled-page-fragment": _ctx.disabledPageFragment }, null, 8, ["disabled-page-fragment"])
               ]),
               vue.renderSlot(_ctx.$slots, "page-bar", {}, () => [
-                vue.createVNode(_sfc_main$t, {
+                vue.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": vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "page-bar-add-button")
+                  ]),
                   "page-bar-title": vue.withCtx(({ page: page2 }) => [
                     vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                   ]),
@@ -7814,7 +7970,7 @@
                     vue.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
@@ -7822,18 +7978,11 @@
             page.value ? {
               name: "right",
               fn: vue.withCtx(() => [
-                vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), null, {
-                  default: vue.withCtx(() => [
-                    vue.renderSlot(_ctx.$slots, "props-panel")
-                  ]),
-                  _: 3
-                })
+                vue.renderSlot(_ctx.$slots, "props-panel")
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["left", "right", "width"])), [
-            [_directive_loading, stageLoading.value]
-          ]),
+          ]), 1032, ["left", "right", "width"])),
           vue.renderSlot(_ctx.$slots, "content-after"),
           vue.renderSlot(_ctx.$slots, "footer")
         ], 512);
@@ -7841,7 +7990,7 @@
     }
   });
 
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -8002,7 +8151,7 @@
           });
         }
       });
-      const navMenu = vue.ref();
+      const navMenu = vue.useTemplateRef("navMenu");
       vue.onMounted(() => {
         navMenu.value && resizeObserver.observe(navMenu.value);
       });
@@ -8023,7 +8172,7 @@
               style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$z, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -8035,7 +8184,132 @@
     }
   });
 
+  const _hoisted_1$b = { class: "m-editor-props-form-panel" };
+  const _sfc_main$q = /* @__PURE__ */ vue.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 = vue.inject("services");
+      const codeOptions = vue.inject("codeOptions", {});
+      const showSrc = vue.ref(false);
+      const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
+      const { height: editorContentHeight } = useEditorContentHeight();
+      const stage = vue.computed(() => services?.editorService.get("stage"));
+      const configForm = vue.useTemplateRef("configForm");
+      vue.watchEffect(() => {
+        if (configForm.value) {
+          configForm.value.formState.stage = stage.value;
+          configForm.value.formState.services = services;
+        }
+      });
+      const internalInstance = vue.getCurrentInstance();
+      vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+          vue.renderSlot(_ctx.$slots, "props-form-panel-header"),
+          vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), null, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(formPlugin.MForm), {
+                ref_key: "configForm",
+                ref: configForm,
+                class: vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.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: vue.withCtx(() => [
+              vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Document) }, null, 8, ["icon"])
+            ]),
+            _: 1
+          }, 8, ["type"])) : vue.createCommentVNode("", true),
+          showSrc.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+            key: 1,
+            class: "m-editor-props-panel-src-code",
+            height: `${vue.unref(editorContentHeight)}px`,
+            "init-values": _ctx.codeValueKey ? _ctx.values[_ctx.codeValueKey] : _ctx.values,
+            options: vue.unref(codeOptions),
+            parse: true,
+            onSave: saveCode
+          }, null, 8, ["height", "init-values", "options"])) : vue.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 = vue.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__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
@@ -8045,21 +8319,20 @@
       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 = vue.inject("codeOptions", {});
       const emit = __emit;
-      const showSrc = vue.ref(false);
-      const internalInstance = vue.getCurrentInstance();
+      const services = vue.inject("services");
       const values = vue.ref({});
-      const configForm = vue.ref();
       const curFormConfig = vue.ref([]);
-      const services = vue.inject("services");
       const node = vue.computed(() => services?.editorService.get("node"));
       const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
-      const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
-      const stage = vue.computed(() => services?.editorService.get("stage"));
-      const { height: editorContentHeight } = useEditorContentHeight();
+      const styleFormConfig = [
+        {
+          tabPosition: "right",
+          items: styleTabConfig.items
+        }
+      ];
       const init = async () => {
         if (!node.value) {
           curFormConfig.value = [];
@@ -8071,21 +8344,15 @@
       };
       vue.watchEffect(init);
       services?.propsService.on("props-configs-change", init);
-      vue.onMounted(() => {
-        emit("mounted", internalInstance);
-      });
       vue.onBeforeUnmount(() => {
         services?.propsService.off("props-configs-change", init);
       });
-      vue.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);
         }
@@ -8093,48 +8360,76 @@
       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 = vue.useTemplateRef("propertyFormPanel");
+      __expose({
+        getFormState() {
+          return propertyFormPanelRef.value?.configForm?.formState;
+        },
+        submit
+      });
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
-          vue.createVNode(vue.unref(formPlugin.MForm), {
-            ref_key: "configForm",
-            ref: configForm,
-            class: vue.normalizeClass(propsPanelSize.value),
-            "popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
-            size: propsPanelSize.value,
-            "init-values": values.value,
+          vue.createVNode(_sfc_main$q, {
+            ref: "propertyFormPanel",
+            class: vue.normalizeClass(["m-editor-props-property-panel", { "show-style-panel": vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.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"]),
+          vue.unref(showStylePanel) ? (vue.openBlock(), vue.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": vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_2$4, [
+                _cache[0] || (_cache[0] = vue.createElementVNode("span", null, "样式", -1)),
+                vue.createElementVNode("div", null, [
+                  vue.createVNode(vue.unref(designPlugin.TMagicButton), {
+                    link: "",
+                    size: "small",
+                    onClick: vue.unref(closeStylePanelHandler)
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
+                    ]),
+                    _: 1
+                  }, 8, ["onClick"])
+                ])
+              ])
+            ]),
+            _: 1
+          }, 8, ["values", "disabledShowSrc", "extendState"])) : vue.createCommentVNode("", true),
+          !vue.unref(showStylePanel) ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.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: vue.unref(showStylePanel) ? "primary" : "",
+            onClick: vue.unref(showStylePanelHandler)
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Document) }, null, 8, ["icon"])
+              vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Sugar) }, null, 8, ["icon"])
             ]),
             _: 1
-          }, 8, ["type"])) : vue.createCommentVNode("", true),
-          showSrc.value ? (vue.openBlock(), vue.createBlock(_sfc_main$X, {
-            key: 1,
-            class: "m-editor-props-panel-src-code",
-            height: `${vue.unref(editorContentHeight)}px`,
-            "init-values": values.value,
-            options: vue.unref(codeOptions),
-            parse: true,
-            onSave: saveCode
-          }, null, 8, ["height", "init-values", "options"])) : vue.createCommentVNode("", true)
+          }, 8, ["type", "onClick"])) : vue.createCommentVNode("", true)
         ], 512)), [
           [vue.vShow, nodes.value.length === 1]
         ]);
@@ -8144,7 +8439,174 @@
 
   const _sfc_main$o = /* @__PURE__ */ vue.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 = vue.useTemplateRef("menu");
+      const buttons = vue.useTemplateRef("buttons");
+      const subMenu = vue.useTemplateRef("subMenu");
+      const visible = vue.ref(false);
+      const subMenuData = vue.ref([]);
+      const zIndex = designPlugin.useZIndex();
+      const curZIndex = vue.ref(0);
+      const menuPosition = vue.ref({
+        left: 0,
+        top: 0
+      });
+      const menuStyle = vue.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;
+        vue.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");
+      };
+      vue.onMounted(() => {
+        if (props.isSubMenu) return;
+        globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
+      });
+      vue.onBeforeUnmount(() => {
+        if (props.isSubMenu) return;
+        globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
+      });
+      __expose({
+        menu,
+        menuPosition,
+        hide,
+        show,
+        contains,
+        setPosition
+      });
+      return (_ctx, _cache) => {
+        const _component_content_menu = vue.resolveComponent("content-menu", true);
+        return vue.openBlock(), vue.createBlock(vue.Transition, { name: "fade" }, {
+          default: vue.withCtx(() => [
+            vue.withDirectives(vue.createElementVNode("div", {
+              class: "magic-editor-content-menu",
+              ref_key: "menu",
+              ref: menu,
+              style: vue.normalizeStyle(menuStyle.value),
+              onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler()),
+              onContextmenu: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+              }, ["prevent"]))
+            }, [
+              vue.renderSlot(_ctx.$slots, "title"),
+              vue.createElementVNode("div", null, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$z, {
+                    "event-type": "mouseup",
+                    ref_for: true,
+                    ref_key: "buttons",
+                    ref: buttons,
+                    class: vue.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))
+              ]),
+              (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+                subMenuData.value.length ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)
+              ]))
+            ], 36), [
+              [vue.vShow, visible.value]
+            ])
+          ]),
+          _: 3
+        });
+      };
+    }
+  });
+
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorSearchInput"
     },
     __name: "SearchInput",
     emits: ["search"],
@@ -8190,7 +8652,7 @@
     key: 0,
     class: "m-editor-tree-node-children"
   };
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTreeNode"
     },
@@ -8264,7 +8726,7 @@
             onContextmenu: nodeContentmenuHandler,
             onMouseenter: mouseenterHandler
           }, [
-            vue.createVNode(_sfc_main$Y, {
+            vue.createVNode(_sfc_main$Z, {
               class: "expand-icon",
               style: vue.normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
               icon: expanded.value ? vue.unref(iconsVue.ArrowDown) : vue.unref(iconsVue.ArrowRight),
@@ -8320,7 +8782,7 @@
     key: 1,
     class: "m-editor-tree-empty"
   };
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorTree"
     },
@@ -8345,7 +8807,7 @@
           onDragover: handleDragOver
         }, [
           _ctx.data?.length ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.data, (item) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$n, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$m, {
               key: item.id,
               data: item,
               indent: _ctx.indent,
@@ -8371,7 +8833,7 @@
     }
   });
 
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
     },
@@ -8381,12 +8843,13 @@
       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 = vue.inject("services");
       const { codeBlockService, depService, editorService } = services || {};
+      const collecting = vue.computed(() => depService?.get("collecting"));
       const codeList = vue.computed(
         () => Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
           const target = depService?.getTarget(codeId, core.DepTargetType.CODE_BLOCK);
@@ -8461,20 +8924,29 @@
           if (typeof props.customError === "function") {
             props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
           } else {
-            designPlugin.tMagicMessage.error("代码块删除失败");
+            if (existBinds) {
+              designPlugin.tMagicMessage.error("代码块存在绑定关系，不可删除");
+            } else {
+              designPlugin.tMagicMessage.error("代码块不可删除");
+            }
           }
         }
       };
+      const nodeContentMenuHandler = (event, data) => {
+        emit("node-contextmenu", event, data);
+      };
       __expose({
-        filter: filterTextChangeHandler
+        filter: filterTextChangeHandler,
+        deleteCode
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
           data: codeList.value,
           "node-status-map": vue.unref(nodeStatusMap),
           indent: _ctx.indent,
           "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
-          onNodeClick: clickHandler
+          onNodeClick: clickHandler,
+          onNodeContextmenu: nodeContentMenuHandler
         }, {
           "tree-node-label": vue.withCtx(({ data }) => [
             vue.createElementVNode("div", {
@@ -8486,14 +8958,25 @@
             }, vue.toDisplayString(data.name) + " " + vue.toDisplayString(data.key ? `(${data.key})` : ""), 3)
           ]),
           "tree-node-tool": vue.withCtx(({ data }) => [
-            data.type === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
+            collecting.value && data.type === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTag), {
               key: 0,
+              type: "info",
+              size: "small",
+              style: { "margin-right": "5px" }
+            }, {
+              default: vue.withCtx(() => _cache[0] || (_cache[0] = [
+                vue.createTextVNode("依赖收集中")
+              ])),
+              _: 1
+            })) : vue.createCommentVNode("", true),
+            data.type === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
+              key: 1,
               effect: "dark",
               content: editable.value ? "编辑" : "查看",
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$Y, {
+                vue.createVNode(_sfc_main$Z, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -8502,13 +8985,13 @@
               _: 2
             }, 1032, ["content"])) : vue.createCommentVNode("", true),
             data.type === "code" && editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
-              key: 1,
+              key: 2,
               effect: "dark",
               content: "删除",
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$Y, {
+                vue.createVNode(_sfc_main$Z, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -8527,8 +9010,74 @@
     }
   });
 
+  const useContentMenu$1 = (deleteCode) => {
+    const eventBus = vue.inject("eventBus");
+    const menuRef = vue.useTemplateRef("menu");
+    let selectId = "";
+    const menuData = [
+      {
+        type: "button",
+        text: "编辑",
+        icon: iconsVue.Edit,
+        display: (services) => services?.codeBlockService?.getEditStatus() ?? true,
+        handler: () => {
+          if (!selectId) {
+            return;
+          }
+          eventBus?.emit("edit-code", selectId);
+        }
+      },
+      {
+        type: "button",
+        text: "复制并粘贴至当前",
+        icon: vue.markRaw(iconsVue.CopyDocument),
+        handler: async ({ codeBlockService }) => {
+          if (!selectId) {
+            return;
+          }
+          const codeBlock = codeBlockService.getCodeContentById(selectId);
+          if (!codeBlock) {
+            return;
+          }
+          const newCodeId = await codeBlockService.getUniqueId();
+          codeBlockService.setCodeDslById(newCodeId, lodashEs.cloneDeep(codeBlock));
+        }
+      },
+      {
+        type: "button",
+        text: "删除",
+        icon: iconsVue.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__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
     },
@@ -8536,27 +9085,37 @@
     props: {
       indent: {},
       nextLevelIndentIncrement: {},
-      customError: { type: Function }
+      customError: { type: Function },
+      customContentMenu: { type: Function }
     },
     setup(__props) {
+      const props = __props;
       const eventBus = vue.inject("eventBus");
       const { codeBlockService } = vue.inject("services") || {};
       const editable = vue.computed(() => codeBlockService?.getEditStatus());
       const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
-      const codeBlockList = vue.ref();
+      const codeBlockList = vue.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 = vue.computed(() => props.customContentMenu(contentMenuData, "code-block"));
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
                 vue.createElementVNode("div", _hoisted_1$7, [
-                  vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                  vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                   editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
                     key: 0,
                     class: "create-code-button",
@@ -8572,14 +9131,15 @@
                   vue.renderSlot(_ctx.$slots, "code-block-panel-search")
                 ])
               ]),
-              vue.createVNode(_sfc_main$l, {
+              vue.createVNode(_sfc_main$k, {
                 ref_key: "codeBlockList",
                 ref: codeBlockList,
                 "custom-error": _ctx.customError,
                 indent: _ctx.indent,
                 "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
                 onEdit: vue.unref(editCode),
-                onRemove: vue.unref(deleteCode)
+                onRemove: vue.unref(deleteCode),
+                onNodeContextmenu: vue.unref(nodeContentMenuHandler)
               }, {
                 "code-block-panel-tool": vue.withCtx(({ id, data }) => [
                   vue.renderSlot(_ctx.$slots, "code-block-panel-tool", {
@@ -8588,18 +9148,27 @@
                   })
                 ]),
                 _: 3
-              }, 8, ["custom-error", "indent", "next-level-indent-increment", "onEdit", "onRemove"])
+              }, 8, ["custom-error", "indent", "next-level-indent-increment", "onEdit", "onRemove", "onNodeContextmenu"])
             ]),
             _: 3
           }),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
             disabled: !editable.value,
             content: vue.unref(codeConfig),
             onSubmit: vue.unref(submitCodeBlockHandler)
-          }, null, 8, ["disabled", "content", "onSubmit"])) : vue.createCommentVNode("", true)
+          }, null, 8, ["disabled", "content", "onSubmit"])) : vue.createCommentVNode("", true),
+          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+            menuData.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+              key: 0,
+              "menu-data": menuData.value,
+              ref: "menu",
+              style: { "overflow": "initial" },
+              onHide: vue.unref(contentMenuHideHandler)
+            }, null, 8, ["menu-data", "onHide"])) : vue.createCommentVNode("", true)
+          ]))
         ], 64);
       };
     }
@@ -8618,9 +9187,9 @@
       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);
       }
@@ -8636,7 +9205,7 @@
     };
   };
 
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceConfigPanel"
     },
@@ -8667,8 +9236,8 @@
         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) => {
         designPlugin.tMagicMessage.error(error.message);
@@ -8683,7 +9252,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$R, {
           visible: boxVisible.value,
           "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
           width: width.value,
@@ -8711,7 +9280,7 @@
     }
   });
 
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceList"
     },
@@ -8720,10 +9289,11 @@
       indent: {},
       nextLevelIndentIncrement: {}
     },
-    emits: ["edit", "remove"],
+    emits: ["edit", "remove", "node-contextmenu"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const emit = __emit;
       const { depService, editorService, dataSourceService } = vue.inject("services") || {};
+      const collecting = vue.computed(() => depService?.get("collecting"));
       const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
       const dsDep = vue.computed(() => depService?.getTargets(core.DepTargetType.DATA_SOURCE) || {});
@@ -8791,11 +9361,6 @@
         emit("edit", id);
       };
       const removeHandler = async (id) => {
-        await designPlugin.tMagicMessageBox.confirm("确定删除?", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        });
         emit("remove", id);
       };
       const selectComp = (compId) => {
@@ -8808,16 +9373,20 @@
           selectComp(data.key);
         }
       };
+      const nodeContentMenuHandler = (event, data) => {
+        emit("node-contextmenu", event, data);
+      };
       __expose({
         filter: filterTextChangeHandler
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$m, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$l, {
           data: list.value,
           "node-status-map": vue.unref(nodeStatusMap),
           indent: _ctx.indent,
           "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
-          onNodeClick: clickHandler
+          onNodeClick: clickHandler,
+          onNodeContextmenu: nodeContentMenuHandler
         }, {
           "tree-node-label": vue.withCtx(({ data }) => [
             vue.createElementVNode("div", {
@@ -8829,14 +9398,25 @@
             }, vue.toDisplayString(data.name) + " " + vue.toDisplayString(data.key ? `(${data.key})` : ""), 3)
           ]),
           "tree-node-tool": vue.withCtx(({ data }) => [
-            data.type === "ds" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
+            collecting.value && data.type === "ds" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTag), {
               key: 0,
+              type: "info",
+              size: "small",
+              style: { "margin-right": "5px" }
+            }, {
+              default: vue.withCtx(() => _cache[0] || (_cache[0] = [
+                vue.createTextVNode("依赖收集中")
+              ])),
+              _: 1
+            })) : vue.createCommentVNode("", true),
+            data.type === "ds" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
+              key: 1,
               effect: "dark",
               content: editable.value ? "编辑" : "查看",
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$Y, {
+                vue.createVNode(_sfc_main$Z, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -8845,13 +9425,13 @@
               _: 2
             }, 1032, ["content"])) : vue.createCommentVNode("", true),
             data.type === "ds" && editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
-              key: 1,
+              key: 2,
               effect: "dark",
               content: "删除",
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$Y, {
+                vue.createVNode(_sfc_main$Z, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -8867,17 +9447,84 @@
     }
   });
 
+  const useContentMenu = () => {
+    const eventBus = vue.inject("eventBus");
+    const menuRef = vue.useTemplateRef("menu");
+    let selectId = "";
+    const menuData = [
+      {
+        type: "button",
+        text: "编辑",
+        icon: iconsVue.Edit,
+        display: (services) => services?.dataSourceService?.get("editable") ?? true,
+        handler: () => {
+          if (!selectId) {
+            return;
+          }
+          eventBus?.emit("edit-data-source", selectId);
+        }
+      },
+      {
+        type: "button",
+        text: "复制并粘贴至当前",
+        icon: vue.markRaw(iconsVue.CopyDocument),
+        handler: ({ dataSourceService }) => {
+          if (!selectId) {
+            return;
+          }
+          const ds = dataSourceService.getDataSourceById(selectId);
+          if (!ds) {
+            return;
+          }
+          dataSourceService.add(lodashEs.cloneDeep(ds));
+        }
+      },
+      {
+        type: "button",
+        text: "删除",
+        icon: iconsVue.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__ */ vue.defineComponent({
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
     },
     __name: "DataSourceListPanel",
     props: {
       indent: {},
-      nextLevelIndentIncrement: {}
+      nextLevelIndentIncrement: {},
+      customContentMenu: { type: Function }
     },
     setup(__props) {
+      const props = __props;
       const eventBus = vue.inject("eventBus");
       const { dataSourceService } = vue.inject("services") || {};
       const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(dataSourceService);
@@ -8902,243 +9549,100 @@
         dialogTitle.value = `新增${datasourceType?.text || ""}`;
         editDialog.value.show();
       };
-      const removeHandler = (id) => {
+      const removeHandler = async (id) => {
+        await designPlugin.tMagicMessageBox.confirm("确定删除?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        });
         dataSourceService?.remove(id);
       };
       const dataSourceList = vue.ref();
-      const filterTextChangeHandler = (val) => {
-        dataSourceList.value?.filter(val);
-      };
-      eventBus?.on("edit-data-source", (id) => {
-        editHandler(id);
-      });
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
-            default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$6, [
-                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
-                vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicPopover), {
-                  key: 0,
-                  placement: "right",
-                  trigger: "hover",
-                  "popper-class": "data-source-list-panel-add-menu",
-                  "destroy-on-close": true
-                }, {
-                  reference: vue.withCtx(() => [
-                    vue.createVNode(vue.unref(designPlugin.TMagicButton), {
-                      type: "primary",
-                      size: "small"
-                    }, {
-                      default: vue.withCtx(() => _cache[0] || (_cache[0] = [
-                        vue.createTextVNode("新增")
-                      ])),
-                      _: 1
-                    })
-                  ]),
-                  default: vue.withCtx(() => [
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                      return vue.openBlock(), vue.createBlock(_sfc_main$y, {
-                        data: {
-                          type: "button",
-                          text: item.text,
-                          handler: () => {
-                            addHandler(item.type);
-                          }
-                        },
-                        key: index
-                      }, null, 8, ["data"]);
-                    }), 128))
-                  ]),
-                  _: 1
-                })) : vue.createCommentVNode("", true),
-                vue.renderSlot(_ctx.$slots, "data-source-panel-search")
-              ]),
-              vue.createVNode(_sfc_main$i, {
-                ref_key: "dataSourceList",
-                ref: dataSourceList,
-                indent: _ctx.indent,
-                "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
-                onEdit: vue.unref(editHandler),
-                onRemove: removeHandler
-              }, null, 8, ["indent", "next-level-indent-increment", "onEdit"])
-            ]),
-            _: 3
-          }),
-          vue.createVNode(_sfc_main$j, {
-            ref_key: "editDialog",
-            ref: editDialog,
-            disabled: !vue.unref(editable),
-            values: vue.unref(dataSourceValues),
-            title: vue.unref(dialogTitle),
-            onSubmit: vue.unref(submitDataSourceHandler)
-          }, null, 8, ["disabled", "values", "title", "onSubmit"])
-        ], 64);
-      };
-    }
-  });
-
-  const _sfc_main$g = /* @__PURE__ */ vue.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 = vue.ref();
-      const buttons = vue.ref();
-      const subMenu = vue.ref();
-      const visible = vue.ref(false);
-      const subMenuData = vue.ref([]);
-      const zIndex = designPlugin.useZIndex();
-      const curZIndex = vue.ref(0);
-      const menuPosition = vue.ref({
-        left: 0,
-        top: 0
-      });
-      const menuStyle = vue.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;
-          vue.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");
+      const filterTextChangeHandler = (val) => {
+        dataSourceList.value?.filter(val);
       };
-      vue.onMounted(() => {
-        if (props.isSubMenu) return;
-        globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
-      });
-      vue.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 = vue.computed(
+        () => props.customContentMenu(contentMenuData, "data-source")
+      );
       return (_ctx, _cache) => {
-        const _component_content_menu = vue.resolveComponent("content-menu", true);
-        return vue.openBlock(), vue.createBlock(vue.Transition, { name: "fade" }, {
-          default: vue.withCtx(() => [
-            vue.withDirectives(vue.createElementVNode("div", {
-              class: "magic-editor-content-menu",
-              ref_key: "menu",
-              ref: menu,
-              style: vue.normalizeStyle(menuStyle.value),
-              onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler())
-            }, [
-              vue.renderSlot(_ctx.$slots, "title"),
-              vue.createElementVNode("div", null, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
-                  return vue.openBlock(), vue.createBlock(_sfc_main$y, {
-                    "event-type": "mouseup",
-                    ref_for: true,
-                    ref_key: "buttons",
-                    ref: buttons,
-                    class: vue.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))
-              ]),
-              (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-                subMenuData.value.length ? (vue.openBlock(), vue.createBlock(_component_content_menu, {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_1$6, [
+                vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
+                vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.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"])) : vue.createCommentVNode("", true)
-              ]))
-            ], 36), [
-              [vue.vShow, visible.value]
-            ])
-          ]),
-          _: 3
-        });
+                  placement: "right",
+                  trigger: "hover",
+                  "popper-class": "data-source-list-panel-add-menu",
+                  "destroy-on-close": true
+                }, {
+                  reference: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(designPlugin.TMagicButton), {
+                      type: "primary",
+                      size: "small"
+                    }, {
+                      default: vue.withCtx(() => _cache[0] || (_cache[0] = [
+                        vue.createTextVNode("新增")
+                      ])),
+                      _: 1
+                    })
+                  ]),
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
+                      return vue.openBlock(), vue.createBlock(_sfc_main$z, {
+                        data: {
+                          type: "button",
+                          text: item.text,
+                          handler: () => {
+                            addHandler(item.type);
+                          }
+                        },
+                        key: index
+                      }, null, 8, ["data"]);
+                    }), 128))
+                  ]),
+                  _: 1
+                })) : vue.createCommentVNode("", true),
+                vue.renderSlot(_ctx.$slots, "data-source-panel-search")
+              ]),
+              vue.createVNode(_sfc_main$h, {
+                ref_key: "dataSourceList",
+                ref: dataSourceList,
+                indent: _ctx.indent,
+                "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
+                onEdit: vue.unref(editHandler),
+                onRemove: removeHandler,
+                onNodeContextmenu: vue.unref(nodeContentMenuHandler)
+              }, null, 8, ["indent", "next-level-indent-increment", "onEdit", "onNodeContextmenu"])
+            ]),
+            _: 3
+          }),
+          vue.createVNode(_sfc_main$i, {
+            ref_key: "editDialog",
+            ref: editDialog,
+            disabled: !vue.unref(editable),
+            values: vue.unref(dataSourceValues),
+            title: vue.unref(dialogTitle),
+            onSubmit: vue.unref(submitDataSourceHandler)
+          }, null, 8, ["disabled", "values", "title", "onSubmit"]),
+          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+            menuData.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+              key: 0,
+              "menu-data": menuData.value,
+              ref: "menu",
+              style: { "overflow": "initial" },
+              onHide: vue.unref(contentMenuHideHandler)
+            }, null, 8, ["menu-data", "onHide"])) : vue.createCommentVNode("", true)
+          ]))
+        ], 64);
       };
     }
   });
@@ -9248,15 +9752,15 @@
     },
     __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 = vue.inject("services");
-      const menu = vue.ref();
+      const menu = vue.useTemplateRef("menu");
       const node = vue.computed(() => services?.editorService.get("node"));
       const nodes = vue.computed(() => services?.editorService.get("nodes"));
       const componentList = vue.computed(() => services?.componentListService.getList() || []);
@@ -9338,7 +9842,7 @@
         show
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$g, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$o, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu,
@@ -9366,12 +9870,12 @@
       };
       return (_ctx, _cache) => {
         return _ctx.data.type !== "page" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
             key: 0,
             icon: vue.unref(iconsVue.Hide),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => setNodeVisible(true), ["stop"])),
             title: "点击显示"
-          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
             key: 1,
             icon: vue.unref(iconsVue.View),
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -9448,7 +9952,7 @@
         select(data);
       });
     };
-    const menu = vue.ref();
+    const menu = vue.useTemplateRef("menu");
     return {
       menu,
       nodeClickHandler,
@@ -9767,7 +10271,7 @@
       draggable: false
     });
     page.items.forEach(
-      (node) => traverseNode(node, (node2) => {
+      (node) => utils.traverseNode(node, (node2) => {
         map.set(
           node2.id,
           initialLayerNodeStatus?.get(node2.id) || {
@@ -9822,7 +10326,7 @@
     services?.editorService.on("add", (newNodes) => {
       newNodes.forEach((node) => {
         if (utils.isPage(node) || utils.isPageFragment(node)) return;
-        traverseNode(node, (node2) => {
+        utils.traverseNode(node, (node2) => {
           nodeStatusMap.value?.set(node2.id, {
             visible: true,
             expand: Array.isArray(node2.items),
@@ -9834,7 +10338,7 @@
     });
     services?.editorService.on("remove", (nodes2) => {
       nodes2.forEach((node) => {
-        traverseNode(node, (node2) => {
+        utils.traverseNode(node, (node2) => {
           nodeStatusMap.value?.delete(node2.id);
         });
       });
@@ -9859,7 +10363,7 @@
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
-      const tree = vue.ref();
+      const tree = vue.useTemplateRef("tree");
       const page = vue.computed(() => editorService?.get("page"));
       const nodeData = vue.computed(() => !page.value ? [] : [page.value]);
       const { nodeStatusMap } = useNodeStatus(services);
@@ -9895,8 +10399,8 @@
         return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$o, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
-            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
+            vue.createVNode(_sfc_main$n, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+            page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
               key: 0,
               tabindex: "-1",
               ref_key: "tree",
@@ -10018,7 +10522,7 @@
         return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicScrollbar), null, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "component-list-panel-header"),
-            vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+            vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
             vue.renderSlot(_ctx.$slots, "component-list", { componentGroupList: list.value }, () => [
               vue.createVNode(vue.unref(designPlugin.TMagicCollapse), {
                 class: "ui-component-panel",
@@ -10032,7 +10536,7 @@
                         name: `${index}`
                       }, {
                         title: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                          vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                           vue.createTextVNode(vue.toDisplayString(group.title), 1)
                         ]),
                         default: vue.withCtx(() => [
@@ -10053,7 +10557,7 @@
                                   content: item.desc
                                 }, {
                                   default: vue.withCtx(() => [
-                                    vue.createVNode(_sfc_main$Y, {
+                                    vue.createVNode(_sfc_main$Z, {
                                       icon: item.icon
                                     }, null, 8, ["icon"])
                                   ]),
@@ -10111,6 +10615,7 @@
     setup(__props, { expose: __expose }) {
       const props = __props;
       const services = vue.inject("services");
+      const collecting = vue.computed(() => services?.depService.get("collecting"));
       const columnLeftWidth = vue.computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
       const { height: editorContentHeight } = useEditorContentHeight();
       const columnLeftHeight = vue.ref(0);
@@ -10158,10 +10663,11 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$k,
+            component: _sfc_main$j,
             props: {
               indent: props.indent,
-              nextLevelIndentIncrement: props.nextLevelIndentIncrement
+              nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+              customContentMenu: props.customContentMenu
             },
             slots: {}
           },
@@ -10170,10 +10676,11 @@
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
-            component: _sfc_main$h,
+            component: _sfc_main$g,
             props: {
               indent: props.indent,
-              nextLevelIndentIncrement: props.nextLevelIndentIncrement
+              nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+              customContentMenu: props.customContentMenu
             },
             slots: {}
           }
@@ -10241,7 +10748,7 @@
                   (...args) => vue.unref(dragstartHandler) && vue.unref(dragstartHandler)(...args)),
                   onDragend: ($event) => vue.unref(dragendHandler)(config.$key, $event)
                 }, [
-                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -10253,7 +10760,7 @@
             ]),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
               return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-                class: "m-editor-sidebar-content",
+                class: vue.normalizeClass(["m-editor-sidebar-content", { "m-editor-dep-collecting": collecting.value }]),
                 key: config.$key ?? index
               }, [
                 config?.component && !vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({
@@ -10379,7 +10886,7 @@
                     key: "11"
                   } : void 0
                 ]), 1040)) : vue.createCommentVNode("", true)
-              ])), [
+              ], 2)), [
                 [vue.vShow, [config.text, config.$key, `${index}`].includes(activeTabName.value)]
               ]);
             }), 128))
@@ -10387,7 +10894,7 @@
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
               return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+                vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(_sfc_main$R, {
                   key: config.$key ?? index,
                   visible: vue.unref(floatBoxStates)[config.$key].status,
                   "onUpdate:visible": ($event) => vue.unref(floatBoxStates)[config.$key].status = $event,
@@ -10433,8 +10940,8 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const bar = vue.ref();
-      const thumb = vue.ref();
+      const bar = vue.useTemplateRef("bar");
+      const thumb = vue.useTemplateRef("thumb");
       const thumbSize = vue.computed(() => props.size * (props.size / props.scrollSize));
       const thumbPos = vue.computed(() => props.pos / props.scrollSize * props.size);
       const thumbStyle = vue.computed(() => ({
@@ -10522,8 +11029,8 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
-      const container = vue.ref();
-      const el = vue.ref();
+      const container = vue.useTemplateRef("container");
+      const el = vue.useTemplateRef("el");
       const style = vue.computed(
         () => `
         width: ${utils.isNumber(`${props.width}`) ? `${props.width}px` : props.width};
@@ -10617,8 +11124,8 @@
       const editorService = services?.editorService;
       const visible = vue.ref(false);
       const buttonVisible = vue.ref(false);
-      const button = vue.ref();
-      const box = vue.ref();
+      const button = vue.useTemplateRef("button");
+      const box = vue.useTemplateRef("box");
       const stage = vue.computed(() => editorService?.get("stage"));
       const page = vue.computed(() => editorService?.get("page"));
       const nodes = vue.computed(() => editorService?.get("nodes") || []);
@@ -10690,7 +11197,7 @@
             ]),
             _: 1
           })) : vue.createCommentVNode("", true),
-          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
+          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$R, {
             key: 1,
             ref_key: "box",
             ref: box,
@@ -10700,7 +11207,7 @@
             position: menuPosition.value
           }, {
             body: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$m, {
+              vue.createVNode(_sfc_main$l, {
                 class: "m-editor-node-list-menu magic-editor-layer-tree",
                 data: nodeData.value,
                 "node-status-map": vue.unref(nodeStatusMap),
@@ -10719,7 +11226,7 @@
     setup(__props) {
       const services = vue.inject("services");
       const stageOptions = vue.inject("stageOptions");
-      const stageOverlay = vue.ref();
+      const stageOverlay = vue.useTemplateRef("stageOverlay");
       const stageOverlayVisible = vue.computed(() => services?.stageOverlayService.get("stageOverlayVisible"));
       const wrapWidth = vue.computed(() => services?.stageOverlayService.get("wrapWidth") || 0);
       const wrapHeight = vue.computed(() => services?.stageOverlayService.get("wrapHeight") || 0);
@@ -10833,14 +11340,14 @@
     __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 = vue.inject("services");
       const editorService = services?.editorService;
-      const menu = vue.ref();
+      const menu = vue.useTemplateRef("menu");
       const canCenter = vue.ref(false);
       const node = vue.computed(() => editorService?.get("node"));
       const nodes = vue.computed(() => editorService?.get("nodes"));
@@ -10945,7 +11452,7 @@
       };
       __expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$g, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$o, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu
@@ -10960,18 +11467,20 @@
     },
     __name: "Stage",
     props: {
+      stageOptions: {},
       stageContentMenu: {},
       disabledStageOverlay: { type: Boolean, default: false },
       customContentMenu: {}
     },
     setup(__props) {
+      const props = __props;
       let stage = null;
       let runtime = null;
       const services = vue.inject("services");
-      const stageOptions = vue.inject("stageOptions");
-      const stageWrap = vue.ref();
-      const stageContainer = vue.ref();
-      const menu = vue.ref();
+      const stageLoading = vue.computed(() => services?.editorService.get("stageLoading") || false);
+      const stageWrap = vue.useTemplateRef("stageWrap");
+      const stageContainer = vue.useTemplateRef("stageContainer");
+      const menu = vue.useTemplateRef("menu");
       const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
       const isMultiSelect = vue.computed(() => nodes.value.length > 1);
       const stageRect = vue.computed(() => services?.uiService.get("stageRect"));
@@ -10983,8 +11492,8 @@
       vue.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();
         });
@@ -11004,14 +11513,23 @@
       });
       vue.onBeforeUnmount(() => {
         stage?.destroy();
+        services?.editorService.set("stage", null);
       });
       vue.watch(zoom, (zoom2) => {
         if (!stage || !zoom2) return;
         stage.setZoom(zoom2);
       });
+      let timeoutId = null;
       vue.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);
           vue.nextTick(() => {
             stage?.select(page2.id);
@@ -11063,7 +11581,9 @@
         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 = utils.getIdFromEl()(parentEl);
         if (parentId) {
@@ -11102,11 +11622,13 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$8, {
+        const _directive_loading = vue.resolveDirective("loading");
+        return vue.withDirectives((vue.openBlock(), vue.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,
@@ -11116,7 +11638,7 @@
             width: 60,
             height: 50
           },
-          onClick: _cache[0] || (_cache[0] = ($event) => stageWrap.value?.container?.focus())
+          onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(stageWrap)?.container?.focus())
         }, {
           content: vue.withCtx(() => [
             !_ctx.disabledStageOverlay ? (vue.openBlock(), vue.createBlock(_sfc_main$6, { key: 0 })) : vue.createCommentVNode("", true),
@@ -11143,7 +11665,9 @@
             vue.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]
+        ]);
       };
     }
   });
@@ -11205,18 +11729,20 @@
       customContentMenu: {}
     },
     setup(__props) {
+      const stageOptions = vue.inject("stageOptions");
       const services = vue.inject("services");
       const page = vue.computed(() => services?.editorService.get("page"));
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
           vue.createVNode(_sfc_main$2),
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
-            page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$3, {
+            page.value && (vue.unref(stageOptions)?.render || vue.unref(stageOptions)?.runtimeUrl) ? (vue.openBlock(), vue.createBlock(_sfc_main$3, {
               key: 0,
+              "stage-options": vue.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"])) : vue.createCommentVNode("", true)
+            }, null, 8, ["stage-options", "disabled-stage-overlay", "stage-content-menu", "custom-content-menu"])) : vue.createCommentVNode("", true)
           ]),
           vue.renderSlot(_ctx.$slots, "workspace-content")
         ]);
@@ -11566,12 +12092,17 @@
       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] = lodashEs.cloneDeep(config);
-      this.emit("update", config);
-      return config;
+      const oldConfig = dataSources[index];
+      const newConfig = lodashEs.cloneDeep(config);
+      dataSources[index] = newConfig;
+      this.emit("update", newConfig, {
+        oldConfig,
+        changeRecords
+      });
+      return newConfig;
     }
     remove(id) {
       const dataSources = this.get("dataSources");
@@ -11647,7 +12178,16 @@
 
   const idleTask = new IdleTask();
   class Dep extends BaseService {
+    state = vue.reactive({
+      collecting: false
+    });
     watcher = new core.Watcher({ initialTargets: vue.reactive({}) });
+    set(name, value) {
+      this.state[name] = value;
+    }
+    get(name) {
+      return this.state[name];
+    }
     removeTargets(type = core.DepTargetType.DEFAULT) {
       this.watcher.removeTargets(type);
       const targets = this.watcher.getTargets(type);
@@ -11674,26 +12214,32 @@
       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) {
@@ -11720,6 +12266,9 @@
     hasSpecifiedTypeTarget(type = core.DepTargetType.DEFAULT) {
       return this.watcher.hasSpecifiedTypeTarget(type);
     }
+    clearIdleTasks() {
+      idleTask.clearTasks();
+    }
     on(eventName, listener) {
       return super.on(eventName, listener);
     }
@@ -11729,6 +12278,23 @@
     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();
 
@@ -12145,7 +12711,8 @@
     datasourceConfigs: () => ({}),
     canSelect: (el) => Boolean(utils.getIdFromEl()(el)),
     isContainer: (el) => el.classList.contains("magic-ui-container"),
-    codeOptions: () => ({})
+    codeOptions: () => ({}),
+    customContentMenu: (menus) => menus
   };
 
   const initServiceState = (props, {
@@ -12302,6 +12869,7 @@
         initDataSourceDepTarget(ds);
       });
       if (Array.isArray(value.items)) {
+        depService.clearIdleTasks();
         collectIdle(value.items, true);
       } else {
         depService.clear();
@@ -12326,15 +12894,66 @@
         emit("update:modelValue", value);
       }
     };
-    const getApp = () => {
-      const stage = editorService.get("stage");
-      return stage?.renderer?.runtime?.getApp?.();
-    };
-    const updateDataSourceSchema = () => {
+    const stage = vue.computed(() => editorService.get("stage"));
+    vue.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) => {
+          utils.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: lodashEs.cloneDeep(node),
+            parentId: editorService.getParentById(node.id)?.id,
+            root: lodashEs.cloneDeep(root)
+          });
+        });
+      });
+    };
+    const afterUpdateNodes = (nodes) => {
+      const root = editorService.get("root");
+      if (!root) return;
+      for (const node of nodes) {
+        stage.value?.update({
+          config: lodashEs.cloneDeep(node),
+          parentId: editorService.getParentById(node.id)?.id,
+          root: lodashEs.cloneDeep(root)
+        });
+      }
     };
     const targetAddHandler = (target) => {
       const root = editorService.get("root");
@@ -12354,59 +12973,32 @@
     };
     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: lodashEs.cloneDeep(node),
-            parentId: editorService.getParentById(node.id)?.id,
-            root: lodashEs.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(core.createDataSourceTarget(ds, vue.reactive({})));
       depService.addTarget(core.createDataSourceMethodTarget(ds, vue.reactive({})));
       depService.addTarget(core.createDataSourceCondTarget(ds, vue.reactive({})));
     };
-    const collectIdle = (nodes, deep) => {
-      nodes.forEach((node) => {
+    const collectIdle = (nodes, deep) => Promise.all(
+      nodes.map((node) => {
         let pageId;
         if (utils.isPage(node)) {
           pageId = node.id;
@@ -12414,20 +13006,47 @@
           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(`${core.NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) || new RegExp(`${core.NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) || record.propPath === core.NODE_CONDS_KEY || utils.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);
@@ -12450,11 +13069,30 @@
       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, core.DepTargetType.DATA_SOURCE);
@@ -12462,8 +13100,13 @@
       depService.removeTarget(id, core.DepTargetType.DATA_SOURCE_METHOD);
     };
     const dataSourceRemoveHandler = (id) => {
+      const root = editorService.get("root");
+      const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
+      const nodes = utils.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);
@@ -12471,7 +13114,7 @@
     vue.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);
@@ -12528,7 +13171,8 @@
       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 }) {
@@ -12573,18 +13217,28 @@
       vue.provide("codeOptions", props.codeOptions);
       vue.provide("stageOptions", stageOptions);
       vue.provide("eventBus", new events.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 vue.openBlock(), vue.createBlock(_sfc_main$r, {
+        return vue.openBlock(), vue.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: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "header")
           ]),
           nav: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "nav", { editorService: vue.unref(editorService) }, () => [
-              vue.createVNode(_sfc_main$q, { data: _ctx.menu }, null, 8, ["data"])
+              vue.createVNode(_sfc_main$r, { data: _ctx.menu }, null, 8, ["data"])
             ])
           ]),
           "content-before": vue.withCtx(() => [
@@ -12667,9 +13321,9 @@
               vue.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": vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "props-panel-header")
@@ -12690,6 +13344,9 @@
           "page-bar": vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "page-bar")
           ]),
+          "page-bar-add-button": vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "page-bar-add-button")
+          ]),
           "page-bar-title": vue.withCtx(({ page }) => [
             vue.renderSlot(_ctx.$slots, "page-bar-title", { page })
           ]),
@@ -12700,7 +13357,7 @@
             vue.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"]);
       };
     }
   });
@@ -12718,24 +13375,24 @@
       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);
     }
   };
 
@@ -12751,50 +13408,51 @@
   exports.COPY_CODE_STORAGE_KEY = COPY_CODE_STORAGE_KEY;
   exports.COPY_DS_STORAGE_KEY = COPY_DS_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$L;
-  exports.CodeBlockList = _sfc_main$l;
-  exports.CodeBlockListPanel = _sfc_main$k;
+  exports.CodeBlockEditor = _sfc_main$M;
+  exports.CodeBlockList = _sfc_main$k;
+  exports.CodeBlockListPanel = _sfc_main$j;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$U;
-  exports.CodeSelectCol = _sfc_main$S;
+  exports.CodeSelect = _sfc_main$V;
+  exports.CodeSelectCol = _sfc_main$T;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$b;
-  exports.CondOpSelect = _sfc_main$R;
-  exports.ContentMenu = _sfc_main$g;
-  exports.DataSourceConfigPanel = _sfc_main$j;
-  exports.DataSourceFieldSelect = _sfc_main$N;
-  exports.DataSourceFields = _sfc_main$P;
-  exports.DataSourceInput = _sfc_main$M;
-  exports.DataSourceMethodSelect = _sfc_main$J;
-  exports.DataSourceMethods = _sfc_main$K;
-  exports.DataSourceMocks = _sfc_main$I;
-  exports.DataSourceSelect = _sfc_main$H;
-  exports.DisplayConds = _sfc_main$G;
+  exports.CondOpSelect = _sfc_main$S;
+  exports.ContentMenu = _sfc_main$o;
+  exports.DataSourceConfigPanel = _sfc_main$i;
+  exports.DataSourceFieldSelect = _sfc_main$O;
+  exports.DataSourceFields = _sfc_main$Q;
+  exports.DataSourceInput = _sfc_main$N;
+  exports.DataSourceMethodSelect = _sfc_main$K;
+  exports.DataSourceMethods = _sfc_main$L;
+  exports.DataSourceMocks = _sfc_main$J;
+  exports.DataSourceSelect = _sfc_main$I;
+  exports.DisplayConds = _sfc_main$H;
   exports.DragType = DragType;
-  exports.EventSelect = _sfc_main$F;
+  exports.EventSelect = _sfc_main$G;
   exports.Fixed2Other = Fixed2Other;
-  exports.FloatingBox = _sfc_main$Q;
+  exports.FloatingBox = _sfc_main$R;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$Y;
+  exports.Icon = _sfc_main$Z;
   exports.IdleTask = IdleTask;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$D;
+  exports.KeyValue = _sfc_main$E;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$c;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$z;
-  exports.PageFragmentSelect = _sfc_main$C;
+  exports.LayoutContainer = _sfc_main$A;
+  exports.PageFragmentSelect = _sfc_main$D;
+  exports.PropsFormPanel = _sfc_main$q;
   exports.PropsPanel = _sfc_main$p;
-  exports.Resizer = _sfc_main$A;
+  exports.Resizer = _sfc_main$B;
   exports.ScrollViewer = ScrollViewer;
   exports.SideItemKey = SideItemKey;
-  exports.SplitView = _sfc_main$z;
-  exports.TMagicCodeEditor = _sfc_main$X;
+  exports.SplitView = _sfc_main$A;
+  exports.TMagicCodeEditor = _sfc_main$Y;
   exports.TMagicEditor = _sfc_main;
-  exports.ToolButton = _sfc_main$y;
-  exports.Tree = _sfc_main$m;
-  exports.TreeNode = _sfc_main$n;
+  exports.ToolButton = _sfc_main$z;
+  exports.Tree = _sfc_main$l;
+  exports.TreeNode = _sfc_main$m;
   exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
   exports.UndoRedo = UndoRedo;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
@@ -12835,6 +13493,7 @@
   exports.getRelativeStyle = getRelativeStyle;
   exports.historyService = historyService;
   exports.info = info;
+  exports.isIncludeDataSource = isIncludeDataSource;
   exports.log = log;
   exports.moveItemsInContainer = moveItemsInContainer;
   exports.numberOptions = numberOptions;
@@ -12847,11 +13506,9 @@
   exports.stageOverlayService = stageOverlayService;
   exports.storageService = storageService;
   exports.styleTabConfig = styleTabConfig;
-  exports.traverseNode = traverseNode;
   exports.uiService = uiService;
   exports.updateStatus = updateStatus;
   exports.useCodeBlockEdit = useCodeBlockEdit;
-  exports.useDataSourceMethod = useDataSourceMethod;
   exports.useEditorContentHeight = useEditorContentHeight;
   exports.useFilter = useFilter;
   exports.useFloatBox = useFloatBox;