@tmagic/editor 1.5.0-beta.8 → 1.5.0

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,7 +23,7 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
-  const _hoisted_1$w = ["src"];
+  const _hoisted_1$x = ["src"];
   const _sfc_main$Y = /* @__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$x)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -76,7 +76,7 @@
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
 
-  const _hoisted_1$v = {
+  const _hoisted_1$w = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
   const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
@@ -236,7 +236,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -287,9 +287,7 @@
     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) => {
@@ -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])
@@ -566,7 +564,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 +585,7 @@
                 fieldConfig: {
                   type: "text"
                 },
-                disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
+                disabled: (_vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
               }
             ]
           },
@@ -836,7 +834,7 @@
   };
   const displayTabConfig = {
     title: "显示条件",
-    display: (vm, { model }) => model.type !== "page",
+    display: (_vm, { model }) => model.type !== "page",
     items: [
       {
         type: "display-conds",
@@ -1144,15 +1142,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 +1158,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 必须是一个数组!");
@@ -1874,28 +1912,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 +2133,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 +2159,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 +2181,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 +2202,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 +2418,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 +2427,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 +2784,7 @@
           name: "params",
           type: "key-value",
           defaultValue: {},
+          advanced: true,
           text: "参数"
         },
         {
@@ -2773,6 +2798,7 @@
           name: "headers",
           type: "key-value",
           defaultValue: {},
+          advanced: true,
           text: "请求头"
         }
       ]
@@ -2827,7 +2853,7 @@
         },
         {
           title: "请求参数裁剪",
-          display: (formState, { model }) => model.type === "http",
+          display: (_formState, { model }) => model.type === "http",
           items: [
             {
               name: "beforeRequest",
@@ -2839,7 +2865,7 @@
         },
         {
           title: "响应数据裁剪",
-          display: (formState, { model }) => model.type === "http",
+          display: (_formState, { model }) => model.type === "http",
           items: [
             {
               name: "afterResponse",
@@ -3006,6 +3032,10 @@
   class IdleTask extends events.EventEmitter {
     taskList = [];
     taskHandle = null;
+    constructor() {
+      super();
+      this.setMaxListeners(1e3);
+    }
     enqueueTask(taskHandler, taskData) {
       this.taskList.push({
         handler: taskHandler,
@@ -3015,6 +3045,9 @@
         this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
       }
     }
+    clearTasks() {
+      this.taskList = [];
+    }
     on(eventName, listener) {
       return super.on(eventName, listener);
     }
@@ -3025,12 +3058,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");
@@ -3212,10 +3263,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,8 +3286,8 @@
     }
   });
 
-  const _hoisted_1$u = { class: "m-fields-code-select-col" };
-  const _hoisted_2$g = { class: "code-select-container" };
+  const _hoisted_1$v = { class: "m-fields-code-select-col" };
+  const _hoisted_2$h = { class: "code-select-container" };
   const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelectCol"
@@ -3308,22 +3359,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$v, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             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,
@@ -3622,7 +3690,7 @@
       }
       codeConfig.value = {
         name: "",
-        content: `({app, params}) => {
+        content: `({app, params, flowState}) => {
   // place your code here
 }`,
         params: []
@@ -3668,78 +3736,6 @@
     };
   };
 
-  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,
@@ -4078,7 +4074,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) {
@@ -4156,7 +4152,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,8 +4183,8 @@
     };
   };
 
-  const _hoisted_1$t = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$f = { class: "m-editor-data-source-fields-footer" };
+  const _hoisted_1$u = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$g = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFields"
@@ -4226,14 +4222,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 +4437,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 +4449,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$u, [
           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$g, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               disabled: _ctx.disabled,
@@ -4518,7 +4527,7 @@
     }
   });
 
-  const _hoisted_1$s = { class: "m-editor-data-source-field-select" };
+  const _hoisted_1$t = { class: "m-editor-data-source-field-select" };
   const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     __name: "FieldSelect",
     props: /* @__PURE__ */ vue.mergeModels({
@@ -4600,7 +4609,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$t, [
           _ctx.checkStrictly ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(designPlugin.TMagicSelect), {
               "model-value": selectDataSourceId.value,
@@ -4682,7 +4691,7 @@
     }
   });
 
-  const _hoisted_1$r = { class: "m-fields-data-source-field-select" };
+  const _hoisted_1$s = { class: "m-fields-data-source-field-select" };
   const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFieldSelect"
@@ -4784,7 +4793,7 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
           showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
             key: 0,
             "model-value": _ctx.model[_ctx.name],
@@ -4832,8 +4841,8 @@
     }
   });
 
-  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$r = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_2$f = { 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({
     ...{
@@ -5038,9 +5047,9 @@
             vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$q, [
+            vue.createElementVNode("div", _hoisted_1$r, [
               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$f, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -5081,8 +5090,8 @@
     }
   });
 
-  const _hoisted_1$p = { style: { "display": "flex", "margin-bottom": "10px" } };
-  const _hoisted_2$d = { style: { "flex": "1" } };
+  const _hoisted_1$q = { style: { "display": "flex", "margin-bottom": "10px" } };
+  const _hoisted_2$e = { style: { "flex": "1" } };
   const _hoisted_3$3 = { style: { "flex": "1" } };
   const _hoisted_4$3 = { class: "dialog-footer" };
   const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
@@ -5213,9 +5222,9 @@
           }
         }
       ]);
-      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);
@@ -5236,7 +5245,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");
@@ -5335,8 +5344,8 @@
                 ])
               ]),
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_1$p, [
-                  vue.createElementVNode("div", _hoisted_2$d, [
+                vue.createElementVNode("div", _hoisted_1$q, [
+                  vue.createElementVNode("div", _hoisted_2$e, [
                     vue.createVNode(vue.unref(designPlugin.TMagicTag), {
                       size: "small",
                       type: "info"
@@ -5378,8 +5387,8 @@
     }
   });
 
-  const _hoisted_1$o = { class: "m-editor-data-source-methods" };
-  const _hoisted_2$c = { class: "m-editor-data-source-methods-footer" };
+  const _hoisted_1$p = { class: "m-editor-data-source-methods" };
+  const _hoisted_2$d = { class: "m-editor-data-source-methods-footer" };
   const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethods"
@@ -5400,7 +5409,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.ref();
+      let editIndex = -1;
       const methodColumns = [
         {
           label: "名称",
@@ -5425,16 +5436,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 +5466,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$p, [
           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$d, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5469,12 +5529,12 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
+          codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
             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,8 +5544,8 @@
     }
   });
 
-  const _hoisted_1$n = { class: "m-fields-data-source-method-select" };
-  const _hoisted_2$b = { class: "data-source-method-select-container" };
+  const _hoisted_1$o = { class: "m-fields-data-source-method-select" };
+  const _hoisted_2$c = { class: "data-source-method-select-container" };
   const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethodSelect"
@@ -5572,8 +5632,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$o, [
+          vue.createElementVNode("div", _hoisted_2$c, [
             vue.createVNode(vue.unref(formPlugin.MContainer), {
               class: "select",
               config: cascaderConfig.value,
@@ -5616,8 +5676,8 @@
     }
   });
 
-  const _hoisted_1$m = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$a = { class: "m-editor-data-source-fields-footer" };
+  const _hoisted_1$n = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$b = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMocks"
@@ -5822,12 +5882,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$n, [
           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$b, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5869,7 +5929,7 @@
     }
   });
 
-  const _hoisted_1$l = { class: "m-fields-data-source-select" };
+  const _hoisted_1$m = { class: "m-fields-data-source-select" };
   const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceSelect"
@@ -5927,7 +5987,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$m, [
           vue.createVNode(vue.unref(formPlugin.MSelect), {
             model: _ctx.model,
             name: _ctx.name,
@@ -6072,8 +6132,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,8 +6154,8 @@
     }
   });
 
-  const _hoisted_1$k = { class: "m-fields-event-select" };
-  const _hoisted_2$9 = {
+  const _hoisted_1$l = { class: "m-fields-event-select" };
+  const _hoisted_2$a = {
     key: 1,
     class: "fullWidth"
   };
@@ -6144,13 +6207,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 +6314,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,20 +6420,22 @@
         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$l, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -6380,7 +6445,7 @@
             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$a, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -6398,6 +6463,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 +6476,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 +6489,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,7 +6497,7 @@
     }
   });
 
-  const _hoisted_1$j = {
+  const _hoisted_1$k = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -6443,15 +6510,15 @@
     __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$k, _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 _hoisted_1$j = { class: "m-fields-key-value" };
+  const _hoisted_2$9 = { key: 0 };
   const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsKeyValue"
@@ -6475,14 +6542,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 +6581,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$j, [
+          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$9, [
             (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",
@@ -6564,7 +6635,7 @@
             key: 1,
             height: "200px",
             "init-values": _ctx.model[_ctx.name],
-            language: "json",
+            language: "javascript",
             options: {
               readOnly: _ctx.disabled
             },
@@ -6584,8 +6655,8 @@
     }
   });
 
-  const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
-  const _hoisted_2$7 = { class: "page-fragment-select-container" };
+  const _hoisted_1$i = { class: "m-fields-page-fragment-select" };
+  const _hoisted_2$8 = { class: "page-fragment-select-container" };
   const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsPageFragmentSelect"
@@ -6632,8 +6703,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$i, [
+          vue.createElementVNode("div", _hoisted_2$8, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -6653,7 +6724,7 @@
     }
   });
 
-  const _hoisted_1$g = {
+  const _hoisted_1$h = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
@@ -6689,7 +6760,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 +6827,7 @@
             ])),
             _: 1
           }, 8, ["icon", "disabled", "size"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(designPlugin.TMagicTooltip), {
               content: "清除",
@@ -7002,11 +7076,11 @@
     }
   });
 
-  const _hoisted_1$f = {
+  const _hoisted_1$g = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$6 = { class: "el-dropdown-link menubar-menu-button" };
+  const _hoisted_2$7 = { class: "el-dropdown-link menubar-menu-button" };
   const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
@@ -7078,7 +7152,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$g, 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",
@@ -7143,7 +7217,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$6, [
+              vue.createElementVNode("span", _hoisted_2$7, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(designPlugin.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -7160,7 +7234,12 @@
     }
   });
 
-  const _hoisted_1$e = {
+  const _hoisted_1$f = {
+    key: 0,
+    id: "m-editor-page-bar-add-icon",
+    class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
+  };
+  const _hoisted_2$6 = {
     key: 1,
     style: { "width": "21px" }
   };
@@ -7169,35 +7248,51 @@
       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$f, [
+          vue.createVNode(vue.unref(designPlugin.TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
+            reference: vue.withCtx(() => [
+              vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            ]),
+            default: vue.withCtx(() => [
+              vue.createVNode(_sfc_main$y, {
+                data: {
+                  type: "button",
+                  text: "页面",
+                  handler: () => {
+                    addPage(vue.unref(core.NodeType).PAGE);
+                  }
+                }
+              }, null, 8, ["data"]),
+              vue.createVNode(_sfc_main$y, {
+                data: {
+                  type: "button",
+                  text: "页面片",
+                  handler: () => {
+                    addPage(vue.unref(core.NodeType).PAGE_FRAGMENT);
+                  }
+                }
+              }, null, 8, ["data"])
+            ]),
+            _: 1
+          })
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6));
       };
     }
   });
@@ -7208,10 +7303,10 @@
     },
     __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;
@@ -7222,7 +7317,7 @@
       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;
@@ -7241,38 +7336,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 +7408,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,25 +7423,24 @@
           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$Y, { 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"])
@@ -7362,7 +7450,7 @@
     }
   });
 
-  const _hoisted_1$d = {
+  const _hoisted_1$e = {
     key: 0,
     id: "m-editor-page-bar-list-icon",
     class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
@@ -7380,11 +7468,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$e, [
           vue.createVNode(vue.unref(designPlugin.TMagicPopover), {
             "popper-class": "page-bar-popover",
             placement: "top",
@@ -7408,6 +7497,7 @@
                       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,52 +7513,72 @@
     }
   });
 
+  const _hoisted_1$d = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
   const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorPageBarSwitchTypeButton"
-    },
-    __name: "SwitchTypeButton",
+    __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$d, [
+          vue.createVNode(_sfc_main$Y, {
+            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_2$5 = ["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({
@@ -7478,63 +7588,33 @@
     __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,19 +7629,49 @@
       const remove = (node) => {
         editorService?.remove(node);
       };
+      const pageBarScrollContainer = vue.ref();
+      const pageBarItems = vue.ref();
+      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
+            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.renderSlot(_ctx.$slots, "page-bar-add-button", {}, () => [
+                vue.createVNode(_sfc_main$x)
+              ]),
+              vue.createVNode(_sfc_main$u, {
+                query: query.value,
+                "onUpdate:query": _cache[0] || (_cache[0] = ($event) => query.value = $event)
+              }, null, 8, ["query"]),
               vue.createVNode(_sfc_main$v, { list: list.value }, {
                 "page-list-popover": vue.withCtx(({ list: list2 }) => [
                   vue.renderSlot(_ctx.$slots, "page-list-popover", { list: list2 })
@@ -7573,8 +7683,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, [
@@ -7627,7 +7740,7 @@
               }), 128))
             ]),
             _: 3
-          }, 8, ["type", "page-bar-sort-options"])
+          }, 8, ["page-bar-sort-options", "length"])
         ]);
       };
     }
@@ -7695,7 +7808,8 @@
     __name: "Framework",
     props: {
       disabledPageFragment: { type: Boolean },
-      pageBarSortOptions: {}
+      pageBarSortOptions: {},
+      pageFilterFunction: { type: Function }
     },
     setup(__props) {
       const codeOptions = vue.inject("codeOptions", {});
@@ -7705,7 +7819,6 @@
       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 +7869,6 @@
         }
       };
       return (_ctx, _cache) => {
-        const _directive_loading = vue.resolveDirective("loading");
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor",
           ref_key: "content",
@@ -7773,9 +7885,8 @@
               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$z, {
             key: 1,
-            "element-loading-text": "Runtime 加载中...",
             ref_key: "splitView",
             ref: splitView,
             class: "m-editor-content",
@@ -7802,8 +7913,12 @@
               vue.renderSlot(_ctx.$slots, "page-bar", {}, () => [
                 vue.createVNode(_sfc_main$t, {
                   "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 +7929,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
@@ -7831,9 +7946,7 @@
               ]),
               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);
@@ -8082,10 +8195,10 @@
           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);
+          services?.editorService.update(values2, { changeRecords: eventData.changeRecords });
         } catch (e) {
           emit("submit-error", e);
         }
@@ -8387,6 +8500,7 @@
       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);
@@ -8486,8 +8600,19 @@
             }, 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"
@@ -8502,7 +8627,7 @@
               _: 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"
@@ -8618,9 +8743,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);
       }
@@ -8667,8 +8792,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);
@@ -8724,6 +8849,7 @@
     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) || {});
@@ -8829,8 +8955,19 @@
             }, 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"
@@ -8845,7 +8982,7 @@
               _: 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"
@@ -9767,7 +9904,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 +9959,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 +9971,7 @@
     });
     services?.editorService.on("remove", (nodes2) => {
       nodes2.forEach((node) => {
-        traverseNode(node, (node2) => {
+        utils.traverseNode(node, (node2) => {
           nodeStatusMap.value?.delete(node2.id);
         });
       });
@@ -10111,6 +10248,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);
@@ -10253,7 +10391,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 +10517,7 @@
                     key: "11"
                   } : void 0
                 ]), 1040)) : vue.createCommentVNode("", true)
-              ])), [
+              ], 2)), [
                 [vue.vShow, [config.text, config.$key, `${index}`].includes(activeTabName.value)]
               ]);
             }), 128))
@@ -10960,15 +11098,17 @@
     },
     __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 stageLoading = vue.computed(() => services?.editorService.get("stageLoading") || false);
       const stageWrap = vue.ref();
       const stageContainer = vue.ref();
       const menu = vue.ref();
@@ -10983,8 +11123,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 +11144,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 +11212,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 +11253,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,
@@ -11143,7 +11296,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 +11360,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 +11723,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 +11809,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 +11845,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 +11897,9 @@
     hasSpecifiedTypeTarget(type = core.DepTargetType.DEFAULT) {
       return this.watcher.hasSpecifiedTypeTarget(type);
     }
+    clearIdleTasks() {
+      idleTask.clearTasks();
+    }
     on(eventName, listener) {
       return super.on(eventName, listener);
     }
@@ -11729,6 +11909,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();
 
@@ -12302,6 +12499,7 @@
         initDataSourceDepTarget(ds);
       });
       if (Array.isArray(value.items)) {
+        depService.clearIdleTasks();
         collectIdle(value.items, true);
       } else {
         depService.clear();
@@ -12326,15 +12524,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 +12603,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 +12636,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 +12699,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 +12730,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 +12744,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 +12801,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 }) {
@@ -12577,7 +12851,8 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$r, {
           "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")
@@ -12690,6 +12965,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 +12978,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"]);
       };
     }
   });
@@ -12835,6 +13113,7 @@
   exports.getRelativeStyle = getRelativeStyle;
   exports.historyService = historyService;
   exports.info = info;
+  exports.isIncludeDataSource = isIncludeDataSource;
   exports.log = log;
   exports.moveItemsInContainer = moveItemsInContainer;
   exports.numberOptions = numberOptions;
@@ -12847,11 +13126,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;