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

package/dist/tmagic-editor.js

@@ -1,21 +1,21 @@
 import designPlugin__default, { TMagicIcon, TMagicButton, TMagicCard, getDesignConfig, TMagicSelect, useZIndex, tMagicMessage, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 export * from '@tmagic/design';
 export { default as designPlugin } from '@tmagic/design';
-import formPlugin__default, { MContainer, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel } from '@tmagic/form';
+import formPlugin__default, { MContainer, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel, createForm } from '@tmagic/form';
 export * from '@tmagic/form';
 export { default as formPlugin } from '@tmagic/form';
 import tablePlugin__default, { MagicTable } from '@tmagic/table';
 export * from '@tmagic/table';
 export { default as tablePlugin } from '@tmagic/table';
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, createCommentVNode, Fragment, renderList, mergeProps, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, createTextVNode, isRef, createStaticVNode, watchEffect, withModifiers, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, Transition, mergeDefaults } from 'vue';
-import { Edit, FullScreen, View, Close, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Search, ArrowRight, CopyDocument, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
-import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys, debounce } from 'lodash-es';
+import { Edit, FullScreen, View, Close, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, Search, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, ArrowRight, CopyDocument, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
+import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
 import * as monaco from 'monaco-editor';
 import { HookCodeType, HookType, NODE_CONDS_KEY, Target, Watcher, NodeType, ActionType, DepTargetType, DEFAULT_EVENTS, DEFAULT_METHODS, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/core';
 export { DepTargetType } from '@tmagic/core';
-import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, toLine, guid, getValueByKeyPath, setValueByKeyPath, dataSourceTemplateRegExp, getKeysArray, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, convertToNumber, getIdFromEl, traverseNode, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, removeClassName, addClassName, removeClassNameByClassName } from '@tmagic/utils';
+import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, toLine, guid, getValueByKeyPath, setValueByKeyPath, getNodeInfo, dataSourceTemplateRegExp, getKeysArray, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, convertToNumber, getIdFromEl, traverseNode, getDefaultValueFromFields, DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, removeClassName, addClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
 export * from '@tmagic/utils';
 import VanillaMoveable from 'moveable';
 import StageCore__default, { isFixed, GuidesType, getOffset, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
@@ -26,7 +26,7 @@ import Gesto from 'gesto';
 import Sortable from 'sortablejs';
 import KeyController from 'keycon';
 
-const _hoisted_1$w = ["src"];
+const _hoisted_1$x = ["src"];
 const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
@@ -51,7 +51,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$w)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$x)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -79,7 +79,7 @@ const getEditorConfig = (key) => $TMAGIC_EDITOR[key];
 emmetHTML(monaco);
 emmetCSS(monaco, ["css", "scss"]);
 
-const _hoisted_1$v = {
+const _hoisted_1$w = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
 const _sfc_main$X = /* @__PURE__ */ defineComponent({
@@ -239,7 +239,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$v, [
+      return openBlock(), createElementBlock("div", _hoisted_1$w, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -1868,28 +1868,7 @@ class Editor extends BaseService {
     if (raw) {
       root = toRaw(root);
     }
-    const info = {
-      node: null,
-      parent: null,
-      page: null
-    };
-    if (!root) return info;
-    if (id === root.id) {
-      info.node = root;
-      return info;
-    }
-    const path = getNodePath(id, root.items);
-    if (!path.length) return info;
-    path.unshift(root);
-    info.node = path[path.length - 1];
-    info.parent = path[path.length - 2];
-    path.forEach((item) => {
-      if (isPage(item) || isPageFragment(item)) {
-        info.page = item;
-        return;
-      }
-    });
-    return info;
+    return getNodeInfo(id, root);
   }
   /**
    * 根据ID获取指点节点配置
@@ -2110,10 +2089,10 @@ class Editor extends BaseService {
     const rootItems = root.items || [];
     if (isPage(node)) {
       this.state.pageLength -= 1;
-      await selectDefault(getPageList(root));
+      await selectDefault(rootItems);
     } else if (isPageFragment(node)) {
       this.state.pageFragmentLength -= 1;
-      await selectDefault(getPageFragmentList(root));
+      await selectDefault(rootItems);
     } else {
       await this.select(parent);
       stage?.select(parent.id);
@@ -2175,11 +2154,6 @@ class Editor extends BaseService {
     const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
     nodes.splice(targetIndex, 1, newConfig);
     this.set("nodes", [...nodes]);
-    this.get("stage")?.update({
-      config: cloneDeep(newConfig),
-      parentId: parent.id,
-      root: cloneDeep(root)
-    });
     if (isPage(newConfig) || isPageFragment(newConfig)) {
       this.set("page", newConfig);
     }
@@ -2401,7 +2375,11 @@ class Editor extends BaseService {
       target.items.push(newConfig);
       await stage.select(targetId);
       const targetParent = this.getParentById(target.id);
-      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root: cloneDeep(root) });
+      await stage.update({
+        config: cloneDeep(target),
+        parentId: targetParent?.id,
+        root: cloneDeep(root)
+      });
       await this.select(newConfig);
       stage.select(newConfig.id);
       this.addModifiedNodeId(target.id);
@@ -3019,12 +2997,12 @@ class IdleTask extends EventEmitter {
     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");
@@ -3229,8 +3207,8 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$u = { class: "m-fields-code-select-col" };
-const _hoisted_2$g = { class: "code-select-container" };
+const _hoisted_1$v = { class: "m-fields-code-select-col" };
+const _hoisted_2$h = { class: "code-select-container" };
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelectCol"
@@ -3310,8 +3288,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-code", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$u, [
-        createElementVNode("div", _hoisted_2$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$v, [
+        createElementVNode("div", _hoisted_2$h, [
           createVNode(unref(MContainer), {
             class: "select",
             config: selectConfig,
@@ -4181,8 +4159,8 @@ const useNodeStatus$1 = (nodeData) => {
   };
 };
 
-const _hoisted_1$t = { class: "m-editor-data-source-fields" };
-const _hoisted_2$f = { class: "m-editor-data-source-fields-footer" };
+const _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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFields"
@@ -4434,12 +4412,12 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     const parentFloating = inject("parentFloating", ref(null));
     const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+      return openBlock(), createElementBlock("div", _hoisted_1$u, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$f, [
+        createElementVNode("div", _hoisted_2$g, [
           createVNode(unref(TMagicButton), {
             size: "small",
             disabled: _ctx.disabled,
@@ -4512,7 +4490,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   __name: "FieldSelect",
   props: /* @__PURE__ */ mergeModels({
@@ -4594,7 +4572,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$s, [
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
         _ctx.checkStrictly ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicSelect), {
             "model-value": selectDataSourceId.value,
@@ -4676,7 +4654,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFieldSelect"
@@ -4778,7 +4756,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$r, [
+      return openBlock(), createElementBlock("div", _hoisted_1$s, [
         showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (openBlock(), createBlock(_sfc_main$O, {
           key: 0,
           "model-value": _ctx.model[_ctx.name],
@@ -4826,8 +4804,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$q = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-const _hoisted_2$e = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+const _hoisted_1$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__ */ defineComponent({
   ...{
@@ -5032,9 +5010,9 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           createVNode(_sfc_main$Y, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$q, [
+          createElementVNode("div", _hoisted_1$r, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$e, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$f, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -5075,8 +5053,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$p = { style: { "display": "flex", "margin-bottom": "10px" } };
-const _hoisted_2$d = { style: { "flex": "1" } };
+const _hoisted_1$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__ */ defineComponent({
@@ -5329,8 +5307,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
               ])
             ]),
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$p, [
-                createElementVNode("div", _hoisted_2$d, [
+              createElementVNode("div", _hoisted_1$q, [
+                createElementVNode("div", _hoisted_2$e, [
                   createVNode(unref(TMagicTag), {
                     size: "small",
                     type: "info"
@@ -5372,8 +5350,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$o = { class: "m-editor-data-source-methods" };
-const _hoisted_2$c = { class: "m-editor-data-source-methods-footer" };
+const _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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethods"
@@ -5444,12 +5422,12 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name]);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: methodColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$c, [
+        createElementVNode("div", _hoisted_2$d, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5478,8 +5456,8 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = { class: "m-fields-data-source-method-select" };
-const _hoisted_2$b = { class: "data-source-method-select-container" };
+const _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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethodSelect"
@@ -5566,8 +5544,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
-        createElementVNode("div", _hoisted_2$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+        createElementVNode("div", _hoisted_2$c, [
           createVNode(unref(MContainer), {
             class: "select",
             config: cascaderConfig.value,
@@ -5610,8 +5588,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$m = { class: "m-editor-data-source-fields" };
-const _hoisted_2$a = { class: "m-editor-data-source-fields-footer" };
+const _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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMocks"
@@ -5816,12 +5794,12 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     const parentFloating = inject("parentFloating", ref(null));
     const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$a, [
+        createElementVNode("div", _hoisted_2$b, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5863,7 +5841,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceSelect"
@@ -5921,7 +5899,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createVNode(unref(MSelect), {
           model: _ctx.model,
           name: _ctx.name,
@@ -6085,8 +6063,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-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"
 };
@@ -6364,7 +6342,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_table = resolveComponent("m-form-table");
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -6374,7 +6352,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$9, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$a, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -6424,7 +6402,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = {
+const _hoisted_1$k = {
   viewBox: "0 0 32 32",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg",
@@ -6437,15 +6415,15 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$j, _cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$k, _cache[0] || (_cache[0] = [
         createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2)
       ]));
     };
   }
 });
 
-const _hoisted_1$i = { class: "m-fields-key-value" };
-const _hoisted_2$8 = { key: 0 };
+const _hoisted_1$j = { class: "m-fields-key-value" };
+const _hoisted_2$9 = { key: 0 };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsKeyValue"
@@ -6504,8 +6482,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
-        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
             return openBlock(), createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -6578,8 +6556,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
-const _hoisted_2$7 = { class: "page-fragment-select-container" };
+const _hoisted_1$i = { class: "m-fields-page-fragment-select" };
+const _hoisted_2$8 = { class: "page-fragment-select-container" };
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsPageFragmentSelect"
@@ -6626,8 +6604,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        createElementVNode("div", _hoisted_2$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+        createElementVNode("div", _hoisted_2$8, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
@@ -6647,7 +6625,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = {
+const _hoisted_1$h = {
   key: 1,
   class: "m-fields-ui-select",
   style: { "display": "flex" }
@@ -6747,7 +6725,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           ])),
           _: 1
         }, 8, ["icon", "disabled", "size"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$g, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$h, [
         val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicTooltip), {
             content: "清除",
@@ -6996,11 +6974,11 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
@@ -7072,7 +7050,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$g, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -7137,7 +7115,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$6, [
+            createElementVNode("span", _hoisted_2$7, [
               createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -7154,7 +7132,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-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" }
 };
@@ -7163,35 +7146,51 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     name: "MEditorPageBarAddButton"
   },
   __name: "AddButton",
-  props: {
-    type: {}
-  },
   setup(__props) {
-    const props = __props;
     const services = inject("services");
     const uiService = services?.uiService;
     const editorService = services?.editorService;
     const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
-    const addPage = () => {
+    const addPage = (type) => {
       if (!editorService) return;
       const root = toRaw(editorService.get("root"));
       if (!root) throw new Error("root 不能为空");
       const pageConfig = {
-        type: props.type,
-        name: generatePageNameByApp(root, props.type),
+        type,
+        name: generatePageNameByApp(root, type),
         items: []
       };
       editorService.add(pageConfig);
     };
     return (_ctx, _cache) => {
-      return showAddPageButton.value ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        id: "m-editor-page-bar-add-icon",
-        class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-        onClick: addPage
-      }, [
-        createVNode(_sfc_main$Y, { icon: unref(Plus) }, null, 8, ["icon"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$e));
+      return showAddPageButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createVNode(unref(TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
+          reference: withCtx(() => [
+            createVNode(_sfc_main$Y, { icon: unref(Plus) }, null, 8, ["icon"])
+          ]),
+          default: withCtx(() => [
+            createVNode(_sfc_main$y, {
+              data: {
+                type: "button",
+                text: "页面",
+                handler: () => {
+                  addPage(unref(NodeType).PAGE);
+                }
+              }
+            }, null, 8, ["data"]),
+            createVNode(_sfc_main$y, {
+              data: {
+                type: "button",
+                text: "页面片",
+                handler: () => {
+                  addPage(unref(NodeType).PAGE_FRAGMENT);
+                }
+              }
+            }, null, 8, ["data"])
+          ]),
+          _: 1
+        })
+      ])) : (openBlock(), createElementBlock("div", _hoisted_2$6));
     };
   }
 });
@@ -7202,8 +7201,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   },
   __name: "PageBarScrollContainer",
   props: {
-    type: {},
-    pageBarSortOptions: {}
+    pageBarSortOptions: {},
+    length: {}
   },
   setup(__props) {
     const props = __props;
@@ -7216,7 +7215,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const showPageListButton = computed(() => uiService?.get("showPageListButton"));
     const itemsContainerWidth = ref(0);
     const setCanScroll = () => {
-      itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21) - (showPageListButton.value ? 37 : 0);
+      itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - 37 - (showAddPageButton.value ? 37 : 21) - (showPageListButton.value ? 37 : 0);
       nextTick(() => {
         if (itemsContainer.value) {
           canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
@@ -7254,19 +7253,17 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       }
       itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
     };
-    const pageLength = computed(() => editorService?.get("pageLength") || 0);
-    const pageFragmentLength = computed(() => editorService?.get("pageFragmentLength") || 0);
-    const crateWatchLength = (length) => watch(
-      length,
-      (length2 = 0, preLength = 0) => {
+    watch(
+      () => props.length,
+      (length = 0, preLength = 0) => {
         setTimeout(() => {
           setCanScroll();
-          if (length2 < preLength) {
+          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 = {
@@ -7302,25 +7299,6 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
-    let unWatchPageLength;
-    let unWatchPageFragmentLength;
-    watch(
-      () => props.type,
-      (type) => {
-        if (type === NodeType.PAGE) {
-          unWatchPageFragmentLength?.();
-          unWatchPageFragmentLength = null;
-          unWatchPageLength = crateWatchLength(pageLength);
-        } else {
-          unWatchPageLength?.();
-          unWatchPageLength = null;
-          unWatchPageFragmentLength = crateWatchLength(pageFragmentLength);
-        }
-      },
-      {
-        immediate: true
-      }
-    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "m-editor-page-bar",
@@ -7335,7 +7313,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         }, [
           createVNode(_sfc_main$Y, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
-        _ctx.type === unref(NodeType).PAGE && pageLength.value || _ctx.type === unref(NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (openBlock(), createElementBlock("div", {
+        _ctx.length ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: "m-editor-page-bar-items",
           ref_key: "itemsContainer",
@@ -7356,7 +7334,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-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"
@@ -7378,7 +7356,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       editorService?.select(id);
     };
     return (_ctx, _cache) => {
-      return showPageListButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return showPageListButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
         createVNode(unref(TMagicPopover), {
           "popper-class": "page-bar-popover",
           placement: "top",
@@ -7417,46 +7395,66 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
+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__ */ defineComponent({
-  ...{
-    name: "MEditorPageBarSwitchTypeButton"
-  },
-  __name: "SwitchTypeButton",
+  __name: "Search",
   props: {
-    modelValue: {}
+    "query": {},
+    "queryModifiers": {}
   },
-  emits: ["update:modelValue"],
+  emits: /* @__PURE__ */ mergeModels(["search"], ["update:query"]),
   setup(__props, { emit: __emit }) {
-    const data = [
+    const emit = __emit;
+    const query = useModel(__props, "query");
+    const formConfig = createForm([
       {
-        type: NodeType.PAGE,
-        text: "页面"
+        type: "checkbox-group",
+        name: "pageType",
+        options: [
+          {
+            value: NodeType.PAGE,
+            text: "页面"
+          },
+          {
+            value: NodeType.PAGE_FRAGMENT,
+            text: "页面片段"
+          }
+        ]
       },
       {
-        type: NodeType.PAGE_FRAGMENT,
-        text: "页面片"
+        name: "keyword",
+        type: "text",
+        placeholder: "请输入关键字",
+        clearable: true
       }
-    ];
-    const emit = __emit;
-    const clickHandler = (value) => {
-      emit("update:modelValue", value);
+    ]);
+    const visible = ref(false);
+    const onFormChange = (values) => {
+      query.value = values;
+      emit("search", values);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, renderList(data, (item) => {
-        return createVNode(unref(TMagicButton), {
-          class: normalizeClass(["m-editor-page-bar-switch-type-button", { active: _ctx.modelValue === item.type }]),
-          size: "small",
-          key: item.type,
-          link: "",
-          type: _ctx.modelValue === item.type ? "primary" : "",
-          onClick: ($event) => clickHandler(item.type)
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(item.text), 1)
-          ]),
-          _: 2
-        }, 1032, ["class", "type", "onClick"]);
-      }), 64);
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+        createVNode(_sfc_main$Y, {
+          icon: unref(Search),
+          onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
+          class: normalizeClass({ "icon-active": visible.value })
+        }, null, 8, ["icon", "class"]),
+        visible.value ? (openBlock(), createBlock(Teleport, {
+          key: 0,
+          to: ".m-editor-page-bar-tabs"
+        }, [
+          query.value ? (openBlock(), createBlock(unref(MForm), {
+            key: 0,
+            class: "m-editor-page-bar-search-panel",
+            inline: true,
+            config: unref(formConfig),
+            "init-values": query.value,
+            "prevent-submit-default": true,
+            onChange: onFormChange
+          }, null, 8, ["config", "init-values"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ]);
     };
   }
 });
@@ -7472,63 +7470,33 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "PageBar",
   props: {
     disabledPageFragment: { type: Boolean },
-    pageBarSortOptions: {}
+    pageBarSortOptions: {},
+    filterFunction: { type: Function, default: (page, keyword) => page.name?.includes(keyword) || `${page.id}`.includes(keyword) }
   },
   setup(__props) {
-    const active = ref(NodeType.PAGE);
+    const props = __props;
     const services = inject("services");
     const editorService = services?.editorService;
     const root = computed(() => editorService?.get("root"));
     const page = computed(() => editorService?.get("page"));
-    const pageList = computed(() => getPageList(root.value));
-    const pageFragmentList = computed(() => getPageFragmentList(root.value));
-    const list = computed(() => active.value === NodeType.PAGE ? pageList.value : pageFragmentList.value);
-    const activePage = ref("");
-    const activePageFragment = ref("");
-    watch(
-      page,
-      (page2) => {
-        if (!page2) {
-          if (active.value === NodeType.PAGE) {
-            activePage.value = "";
-          }
-          if (active.value === NodeType.PAGE_FRAGMENT) {
-            activePageFragment.value = "";
-          }
-          return;
-        }
-        if (isPage(page2)) {
-          activePage.value = page2?.id;
-          if (active.value !== NodeType.PAGE) {
-            active.value = NodeType.PAGE;
-          }
-        } else if (isPageFragment(page2)) {
-          activePageFragment.value = page2?.id;
-          if (active.value !== NodeType.PAGE_FRAGMENT) {
-            active.value = NodeType.PAGE_FRAGMENT;
-          }
-        }
-      },
-      {
-        immediate: true
-      }
-    );
-    watch(active, (active2) => {
-      if (active2 === NodeType.PAGE) {
-        if (!activePage.value && !pageList.value.length) {
-          editorService?.selectRoot();
-          return;
-        }
-        switchPage(activePage.value);
-        return;
+    const query = ref({
+      pageType: [NodeType.PAGE, NodeType.PAGE_FRAGMENT],
+      keyword: ""
+    });
+    const list = computed(() => {
+      const { pageType, keyword } = query.value;
+      if (pageType.length === 0) {
+        return [];
       }
-      if (active2 === NodeType.PAGE_FRAGMENT) {
-        if (!activePageFragment.value && !pageFragmentList.value.length) {
-          editorService?.selectRoot();
-          return;
+      return (root.value?.items || []).filter((item) => {
+        if (pageType.includes(item.type)) {
+          if (keyword) {
+            return props.filterFunction(item, keyword);
+          }
+          return true;
         }
-        switchPage(activePageFragment.value || pageFragmentList.value[0].id);
-      }
+        return false;
+      });
     });
     const switchPage = (id) => {
       editorService?.select(id);
@@ -7545,17 +7513,18 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        !_ctx.disabledPageFragment ? (openBlock(), createBlock(_sfc_main$u, {
-          key: 0,
-          modelValue: active.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => active.value = $event)
-        }, null, 8, ["modelValue"])) : createCommentVNode("", true),
         createVNode(_sfc_main$w, {
-          type: active.value,
-          "page-bar-sort-options": _ctx.pageBarSortOptions
+          "page-bar-sort-options": _ctx.pageBarSortOptions,
+          length: list.value.length
         }, {
           prepend: withCtx(() => [
-            createVNode(_sfc_main$x, { type: active.value }, null, 8, ["type"]),
+            renderSlot(_ctx.$slots, "page-bar-add-button", {}, () => [
+              createVNode(_sfc_main$x)
+            ]),
+            createVNode(_sfc_main$u, {
+              query: query.value,
+              "onUpdate:query": _cache[0] || (_cache[0] = ($event) => query.value = $event)
+            }, null, 8, ["query"]),
             createVNode(_sfc_main$v, { list: list.value }, {
               "page-list-popover": withCtx(({ list: list2 }) => [
                 renderSlot(_ctx.$slots, "page-list-popover", { list: list2 })
@@ -7621,7 +7590,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             }), 128))
           ]),
           _: 3
-        }, 8, ["type", "page-bar-sort-options"])
+        }, 8, ["page-bar-sort-options", "length"])
       ]);
     };
   }
@@ -7689,7 +7658,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "Framework",
   props: {
     disabledPageFragment: { type: Boolean },
-    pageBarSortOptions: {}
+    pageBarSortOptions: {},
+    pageFilterFunction: { type: Function }
   },
   setup(__props) {
     const codeOptions = inject("codeOptions", {});
@@ -7796,8 +7766,12 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "page-bar", {}, () => [
               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": withCtx(() => [
+                  renderSlot(_ctx.$slots, "page-bar-add-button")
+                ]),
                 "page-bar-title": withCtx(({ page: page2 }) => [
                   renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
                 ]),
@@ -7808,7 +7782,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "page-list-popover", { list })
                 ]),
                 _: 3
-              }, 8, ["disabled-page-fragment", "page-bar-sort-options"])
+              }, 8, ["disabled-page-fragment", "page-bar-sort-options", "filter-function"])
             ])
           ]),
           _: 2
@@ -11003,9 +10977,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       if (!stage || !zoom2) return;
       stage.setZoom(zoom2);
     });
+    let timeoutId = null;
     watch(page, (page2) => {
       if (runtime && page2) {
         services?.editorService.set("stageLoading", true);
+        if (timeoutId) {
+          globalThis.clearTimeout(timeoutId);
+        }
+        timeoutId = globalThis.setTimeout(() => {
+          services?.editorService.set("stageLoading", false);
+          timeoutId = null;
+        }, 3e3);
         runtime.updatePageId?.(page2.id);
         nextTick(() => {
           stage?.select(page2.id);
@@ -11674,7 +11656,9 @@ class Dep extends BaseService {
     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);
@@ -11686,8 +11670,16 @@ class Dep extends BaseService {
         }
       );
     });
-    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) {
@@ -12324,49 +12316,19 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     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 === DepTargetType.DATA_SOURCE) {
-      if (!root.dataSourceDeps) {
-        root.dataSourceDeps = {};
-      }
-      root.dataSourceDeps[target.id] = target.deps;
-    }
-    if (target.type === 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 = 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) => {
@@ -12390,17 +12352,58 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
         });
       });
     });
-  }, 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: cloneDeep(node),
+        parentId: editorService.getParentById(node.id)?.id,
+        root: cloneDeep(root)
+      });
+    }
+  };
+  const targetAddHandler = (target) => {
+    const root = editorService.get("root");
+    if (!root) return;
+    if (target.type === DepTargetType.DATA_SOURCE) {
+      if (!root.dataSourceDeps) {
+        root.dataSourceDeps = {};
+      }
+      root.dataSourceDeps[target.id] = target.deps;
+    }
+    if (target.type === 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(createDataSourceTarget(ds, reactive({})));
     depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
-  const collectIdle = (nodes, deep) => {
-    nodes.forEach((node) => {
+  const collectIdle = (nodes, deep) => Promise.all(
+    nodes.map((node) => {
       let pageId;
       if (isPage(node)) {
         pageId = node.id;
@@ -12408,20 +12411,26 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
         const info = editorService.getNodeInfo(node.id);
         pageId = info.page?.id;
       }
-      depService.collectIdle([node], { pageId }, deep);
-    });
-  };
+      return depService.collectIdle([node], { pageId }, deep);
+    })
+  );
   const nodeAddHandler = (nodes) => {
-    collectIdle(nodes, true);
+    collectIdle(nodes, true).then(() => {
+      afterUpdateNodes(nodes);
+    });
   };
   const nodeUpdateHandler = (nodes) => {
-    collectIdle(nodes, true);
+    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);
@@ -12448,7 +12457,9 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     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, DepTargetType.DATA_SOURCE);
@@ -12456,8 +12467,13 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     depService.removeTarget(id, DepTargetType.DATA_SOURCE_METHOD);
   };
   const dataSourceRemoveHandler = (id) => {
+    const root = editorService.get("root");
+    const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
+    const nodes = getNodes(nodeIds, root?.items);
+    collectIdle(nodes, false).then(() => {
+      updateDataSourceSchema(nodes, false);
+    });
     removeDataSourceTarget(id);
-    getApp()?.dataSourceManager?.removeDataSource(id);
   };
   dataSourceService.on("add", dataSourceAddHandler);
   dataSourceService.on("update", dataSourceUpdateHandler);
@@ -12465,7 +12481,6 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   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);
@@ -12522,7 +12537,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     isContainer: { type: Function },
     customContentMenu: { type: Function },
     extendFormState: { type: Function },
-    pageBarSortOptions: {}
+    pageBarSortOptions: {},
+    pageFilterFunction: { type: Function }
   }, defaultEditorProps),
   emits: ["props-panel-mounted", "update:modelValue", "props-form-error", "props-submit-error"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -12571,7 +12587,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), 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: withCtx(() => [
           renderSlot(_ctx.$slots, "header")
@@ -12684,6 +12701,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "page-bar": withCtx(() => [
           renderSlot(_ctx.$slots, "page-bar")
         ]),
+        "page-bar-add-button": withCtx(() => [
+          renderSlot(_ctx.$slots, "page-bar-add-button")
+        ]),
         "page-bar-title": withCtx(({ page }) => [
           renderSlot(_ctx.$slots, "page-bar-title", { page })
         ]),
@@ -12694,7 +12714,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "page-list-popover", { list })
         ]),
         _: 3
-      }, 8, ["disabled-page-fragment", "page-bar-sort-options"]);
+      }, 8, ["disabled-page-fragment", "page-bar-sort-options", "page-filter-function"]);
     };
   }
 });