@tmagic/editor 1.5.0-beta.11 → 1.5.0-beta.13

package/dist/tmagic-editor.umd.cjs

@@ -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
@@ -1865,28 +1865,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获取指点节点配置
@@ -2107,10 +2086,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);
@@ -2172,11 +2151,6 @@
       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);
       }
@@ -2398,7 +2372,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);
@@ -3016,12 +2994,12 @@
       return super.emit(eventName, ...args);
     }
     runTaskQueue(deadline) {
-      while ((deadline.timeRemaining() > 15 || deadline.didTimeout) && this.taskList.length) {
+      while ((deadline.timeRemaining() > 10 || deadline.didTimeout) && this.taskList.length) {
         const task = this.taskList.shift();
         task.handler(task.data);
       }
       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");
@@ -3226,8 +3204,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"
@@ -3307,8 +3285,8 @@
         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,
@@ -4178,8 +4156,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"
@@ -4431,12 +4409,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,
@@ -4509,7 +4487,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({
@@ -4591,7 +4569,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,
@@ -4673,7 +4651,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"
@@ -4775,7 +4753,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],
@@ -4823,8 +4801,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({
     ...{
@@ -5029,9 +5007,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
@@ -5072,8 +5050,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({
@@ -5326,8 +5304,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"
@@ -5369,8 +5347,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"
@@ -5441,12 +5419,12 @@
         emit("change", props.model[props.name]);
       };
       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",
@@ -5475,8 +5453,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"
@@ -5563,8 +5541,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,
@@ -5607,8 +5585,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"
@@ -5813,12 +5791,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",
@@ -5860,7 +5838,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"
@@ -5918,7 +5896,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,
@@ -6082,8 +6060,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"
   };
@@ -6361,7 +6339,7 @@
       };
       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",
@@ -6371,7 +6349,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",
@@ -6421,7 +6399,7 @@
     }
   });
 
-  const _hoisted_1$j = {
+  const _hoisted_1$k = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -6434,15 +6412,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"
@@ -6501,8 +6479,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",
@@ -6575,8 +6553,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"
@@ -6623,8 +6601,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,
@@ -6644,7 +6622,7 @@
     }
   });
 
-  const _hoisted_1$g = {
+  const _hoisted_1$h = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
@@ -6744,7 +6722,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: "清除",
@@ -6993,11 +6971,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"
@@ -7069,7 +7047,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",
@@ -7134,7 +7112,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(() => [
@@ -7151,7 +7129,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" }
   };
@@ -7160,35 +7143,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));
       };
     }
   });
@@ -7199,8 +7198,8 @@
     },
     __name: "PageBarScrollContainer",
     props: {
-      type: {},
-      pageBarSortOptions: {}
+      pageBarSortOptions: {},
+      length: {}
     },
     setup(__props) {
       const props = __props;
@@ -7213,7 +7212,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;
@@ -7251,19 +7250,17 @@
         }
         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) {
+            if (length < preLength) {
               scroll("start");
             } else {
               scroll("end");
             }
-            if (length2 > 1) {
+            if (length > 1) {
               const el = document.querySelector(".m-editor-page-bar-items");
               let beforeDragList = [];
               const options = {
@@ -7299,25 +7296,6 @@
           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
-        }
-      );
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor-page-bar",
@@ -7332,7 +7310,7 @@
           }, [
             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", {
+          _ctx.length ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
             class: "m-editor-page-bar-items",
             ref_key: "itemsContainer",
@@ -7353,7 +7331,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"
@@ -7375,7 +7353,7 @@
         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",
@@ -7414,46 +7392,66 @@
     }
   });
 
+  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)
+        ]);
       };
     }
   });
@@ -7469,63 +7467,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);
@@ -7542,17 +7510,18 @@
       };
       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
+            "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 })
@@ -7618,7 +7587,7 @@
               }), 128))
             ]),
             _: 3
-          }, 8, ["type", "page-bar-sort-options"])
+          }, 8, ["page-bar-sort-options", "length"])
         ]);
       };
     }
@@ -7686,7 +7655,8 @@
     __name: "Framework",
     props: {
       disabledPageFragment: { type: Boolean },
-      pageBarSortOptions: {}
+      pageBarSortOptions: {},
+      pageFilterFunction: { type: Function }
     },
     setup(__props) {
       const codeOptions = vue.inject("codeOptions", {});
@@ -7793,8 +7763,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 })
                   ]),
@@ -7805,7 +7779,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
@@ -11000,9 +10974,17 @@
         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);
@@ -11671,7 +11653,9 @@
       this.emit("collected", nodes, deep);
     }
     collectIdle(nodes, depExtendedData = {}, deep = false, type) {
+      let startTask = false;
       this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
+        startTask = true;
         idleTask.enqueueTask(
           ({ node: node2, deep: deep2, target: target2 }) => {
             this.collectNode(node2, target2, depExtendedData, deep2);
@@ -11683,8 +11667,16 @@
           }
         );
       });
-      idleTask.once("finish", () => {
-        this.emit("collected", nodes, deep);
+      return new Promise((resolve) => {
+        if (!startTask) {
+          this.emit("collected", nodes, deep);
+          resolve();
+          return;
+        }
+        idleTask.once("finish", () => {
+          this.emit("collected", nodes, deep);
+          resolve();
+        });
       });
     }
     collectNode(node, target, depExtendedData = {}, deep = false) {
@@ -12321,49 +12313,19 @@
       const stage = editorService.get("stage");
       return stage?.renderer?.runtime?.getApp?.();
     };
-    const updateDataSourceSchema = () => {
-      const root = editorService.get("root");
-      if (root?.dataSources) {
-        getApp()?.dataSourceManager?.updateSchema(root.dataSources);
-      }
-    };
-    const targetAddHandler = (target) => {
-      const root = editorService.get("root");
-      if (!root) return;
-      if (target.type === core.DepTargetType.DATA_SOURCE) {
-        if (!root.dataSourceDeps) {
-          root.dataSourceDeps = {};
-        }
-        root.dataSourceDeps[target.id] = target.deps;
-      }
-      if (target.type === core.DepTargetType.DATA_SOURCE_COND) {
-        if (!root.dataSourceCondDeps) {
-          root.dataSourceCondDeps = {};
-        }
-        root.dataSourceCondDeps[target.id] = target.deps;
-      }
-    };
-    const targetRemoveHandler = (id) => {
+    const updateDataSourceSchema = (nodes, deep) => {
       const root = editorService.get("root");
-      if (root?.dataSourceDeps) {
-        delete root.dataSourceDeps[id];
-      }
-      if (root?.dataSourceCondDeps) {
-        delete root.dataSourceCondDeps[id];
-      }
-    };
-    const collectedHandler = lodashEs.debounce((nodes, deep) => {
-      const root = editorService.get("root");
-      const stage = editorService.get("stage");
-      if (!root || !stage) return;
       const app = getApp();
-      if (!app) return;
-      if (app.dsl) {
+      if (root && app?.dsl) {
         app.dsl.dataSourceDeps = root.dataSourceDeps;
         app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
         app.dsl.dataSources = root.dataSources;
       }
-      updateDataSourceSchema();
+      if (root?.dataSources) {
+        getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+      }
+      const stage = editorService.get("stage");
+      if (!root || !stage) return;
       const allNodes = [];
       if (deep) {
         nodes.forEach((node) => {
@@ -12387,17 +12349,58 @@
           });
         });
       });
-    }, 300);
+    };
+    const afterUpdateNodes = (nodes) => {
+      const root = editorService.get("root");
+      if (!root) return;
+      const stage = editorService.get("stage");
+      const app = getApp();
+      if (app?.dsl) {
+        app.dsl.dataSourceDeps = root.dataSourceDeps;
+      }
+      for (const node of nodes) {
+        stage?.update({
+          config: lodashEs.cloneDeep(node),
+          parentId: editorService.getParentById(node.id)?.id,
+          root: lodashEs.cloneDeep(root)
+        });
+      }
+    };
+    const targetAddHandler = (target) => {
+      const root = editorService.get("root");
+      if (!root) return;
+      if (target.type === core.DepTargetType.DATA_SOURCE) {
+        if (!root.dataSourceDeps) {
+          root.dataSourceDeps = {};
+        }
+        root.dataSourceDeps[target.id] = target.deps;
+      }
+      if (target.type === core.DepTargetType.DATA_SOURCE_COND) {
+        if (!root.dataSourceCondDeps) {
+          root.dataSourceCondDeps = {};
+        }
+        root.dataSourceCondDeps[target.id] = target.deps;
+      }
+    };
+    const targetRemoveHandler = (id) => {
+      const root = editorService.get("root");
+      if (!root) return;
+      if (root.dataSourceDeps) {
+        delete root.dataSourceDeps[id];
+      }
+      if (root.dataSourceCondDeps) {
+        delete root.dataSourceCondDeps[id];
+      }
+    };
     depService.on("add-target", targetAddHandler);
     depService.on("remove-target", targetRemoveHandler);
-    depService.on("collected", collectedHandler);
     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;
@@ -12405,20 +12408,26 @@
           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);
+      collectIdle(nodes, true).then(() => {
+        afterUpdateNodes(nodes);
+      });
     };
     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);
@@ -12445,7 +12454,9 @@
       const root = editorService.get("root");
       removeDataSourceTarget(config.id);
       initDataSourceDepTarget(config);
-      collectIdle(root?.items || [], true);
+      collectIdle(root?.items || [], true).then(() => {
+        updateDataSourceSchema(root?.items || [], true);
+      });
     };
     const removeDataSourceTarget = (id) => {
       depService.removeTarget(id, core.DepTargetType.DATA_SOURCE);
@@ -12453,8 +12464,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);
@@ -12462,7 +12478,6 @@
     vue.onBeforeUnmount(() => {
       depService.off("add-target", targetAddHandler);
       depService.off("remove-target", targetRemoveHandler);
-      depService.off("collected", collectedHandler);
       editorService.off("history-change", historyChangeHandler);
       editorService.off("root-change", rootChangeHandler);
       editorService.off("add", nodeAddHandler);
@@ -12519,7 +12534,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 }) {
@@ -12568,7 +12584,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")
@@ -12681,6 +12698,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 })
           ]),
@@ -12691,7 +12711,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"]);
       };
     }
   });