@tmagic/editor 1.5.0-beta.14 → 1.5.0-beta.16

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tmagic/design'), require('@tmagic/form'), require('@tmagic/table'), require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/core'), require('@tmagic/utils'), require('moveable'), require('@tmagic/stage'), require('events'), require('gesto'), require('sortablejs'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@tmagic/design', '@tmagic/form', '@tmagic/table', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', 'emmet-monaco-es', 'monaco-editor', '@tmagic/core', '@tmagic/utils', 'moveable', '@tmagic/stage', 'events', 'gesto', 'sortablejs', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.designPlugin, global.formPlugin, global.tablePlugin, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.emmetMonacoEs, global.monaco, global.core, global.utils, global.VanillaMoveable, global.StageCore, global.events, global.Gesto, global.Sortable, global.KeyController));
-})(this, (function (exports, designPlugin, formPlugin, tablePlugin, vue, iconsVue, lodashEs, serialize, emmetMonacoEs, monaco, core, utils, VanillaMoveable, StageCore, events, Gesto, Sortable, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tmagic/design'), require('@tmagic/form'), require('@tmagic/table'), require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/core'), require('@tmagic/utils'), require('moveable'), require('@tmagic/stage'), require('events'), require('gesto'), require('deep-object-diff'), require('sortablejs'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tmagic/design', '@tmagic/form', '@tmagic/table', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', 'emmet-monaco-es', 'monaco-editor', '@tmagic/core', '@tmagic/utils', 'moveable', '@tmagic/stage', 'events', 'gesto', 'deep-object-diff', 'sortablejs', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.designPlugin, global.formPlugin, global.tablePlugin, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.emmetMonacoEs, global.monaco, global.core, global.utils, global.VanillaMoveable, global.StageCore, global.events, global.Gesto, global.deepObjectDiff, global.Sortable, global.KeyController));
+})(this, (function (exports, designPlugin, formPlugin, tablePlugin, vue, iconsVue, lodashEs, serialize, emmetMonacoEs, monaco, core, utils, VanillaMoveable, StageCore, events, Gesto, deepObjectDiff, Sortable, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -287,9 +287,7 @@
     emits: ["change"],
     setup(__props, { emit: __emit }) {
       const emit = __emit;
-      const props = __props;
       const save = (v) => {
-        props.model[props.name] = v;
         emit("change", v);
       };
       return (_ctx, _cache) => {
@@ -439,11 +437,13 @@
                   { value: core.HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
                 ],
                 defaultValue: "code",
-                onChange: (mForm, v, { model }) => {
+                onChange: (mForm, v, { model, prop, changeRecords }) => {
                   if (v === core.HookCodeType.DATA_SOURCE_METHOD) {
                     model.codeId = [];
+                    changeRecords.push({ propPath: prop.replace("codeType", "codeId"), value: [] });
                   } else {
                     model.codeId = "";
+                    changeRecords.push({ propPath: prop.replace("codeType", "codeId"), value: "" });
                   }
                   return v;
                 }
@@ -482,9 +482,7 @@
           immediate: true
         }
       );
-      const changeHandler = async () => {
-        emit("change", props.model[props.name]);
-      };
+      const changeHandler = (v, eventData) => emit("change", v, eventData);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["m-fields-code-select", _ctx.config.className])
@@ -566,7 +564,7 @@
                 fieldConfig: {
                   type: "text"
                 },
-                disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
+                disabled: (_vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
               },
               {
                 type: "data-source-field-select",
@@ -587,7 +585,7 @@
                 fieldConfig: {
                   type: "text"
                 },
-                disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
+                disabled: (_vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
               }
             ]
           },
@@ -836,7 +834,7 @@
   };
   const displayTabConfig = {
     title: "显示条件",
-    display: (vm, { model }) => model.type !== "page",
+    display: (_vm, { model }) => model.type !== "page",
     items: [
       {
         type: "display-conds",
@@ -1160,6 +1158,55 @@
       }
     }
   };
+  const isIncludeDataSourceByDiffAddResult = (diffResult) => {
+    for (const value of Object.values(diffResult)) {
+      const result = utils.isValueIncludeDataSource(value);
+      if (result) {
+        return true;
+      }
+      if (lodashEs.isObject(value)) {
+        return isIncludeDataSourceByDiffAddResult(value);
+      }
+    }
+    return false;
+  };
+  const isIncludeDataSourceByDiffUpdatedResult = (diffResult, oldNode) => {
+    for (const [key, value] of Object.entries(diffResult)) {
+      if (utils.isValueIncludeDataSource(value)) {
+        return true;
+      }
+      if (utils.isValueIncludeDataSource(oldNode[key])) {
+        return true;
+      }
+      if (lodashEs.isObject(value)) {
+        return isIncludeDataSourceByDiffUpdatedResult(value, oldNode[key]);
+      }
+    }
+    return false;
+  };
+  const isIncludeDataSource = (node, oldNode) => {
+    const diffResult = deepObjectDiff.detailedDiff(oldNode, node);
+    let isIncludeDataSource2 = false;
+    if (diffResult.updated) {
+      if (diffResult.updated[core.NODE_CONDS_KEY]) {
+        return true;
+      }
+      isIncludeDataSource2 = isIncludeDataSourceByDiffUpdatedResult(diffResult.updated, oldNode);
+      if (isIncludeDataSource2) return true;
+    }
+    if (diffResult.added) {
+      isIncludeDataSource2 = isIncludeDataSourceByDiffAddResult(diffResult.added);
+      if (isIncludeDataSource2) return true;
+    }
+    if (diffResult.deleted) {
+      if (diffResult.deleted[core.NODE_CONDS_KEY]) {
+        return true;
+      }
+      isIncludeDataSource2 = isIncludeDataSourceByDiffAddResult(diffResult.deleted);
+      if (isIncludeDataSource2) return true;
+    }
+    return isIncludeDataSource2;
+  };
 
   const compose = (middleware, isAsync) => {
     if (!Array.isArray(middleware)) throw new TypeError("Middleware 必须是一个数组!");
@@ -2112,13 +2159,13 @@
       }
       this.emit("remove", nodes);
     }
-    async doUpdate(config) {
+    async doUpdate(config, { changeRecords = [] } = {}) {
       const root = this.get("root");
       if (!root) throw new Error("root为空");
       if (!config?.id) throw new Error("没有配置或者配置缺少id值");
       const info = this.getNodeInfo(config.id, false);
       if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
-      const node = lodashEs.cloneDeep(vue.toRaw(info.node));
+      const node = vue.toRaw(info.node);
       let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, root);
       newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue, key) => {
         if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
@@ -2134,7 +2181,11 @@
       if (!newConfig.type) throw new Error("配置缺少type值");
       if (newConfig.type === core.NodeType.ROOT) {
         this.set("root", newConfig);
-        return newConfig;
+        return {
+          oldNode: node,
+          newNode: newConfig,
+          changeRecords
+        };
       }
       const { parent } = info;
       if (!parent) throw new Error("获取不到父级节点");
@@ -2155,21 +2206,25 @@
         this.set("page", newConfig);
       }
       this.addModifiedNodeId(newConfig.id);
-      return newConfig;
+      return {
+        oldNode: node,
+        newNode: newConfig,
+        changeRecords
+      };
     }
     /**
      * 更新节点
      * @param config 新的节点配置，配置中需要有id信息
      * @returns 更新后的节点配置
      */
-    async update(config) {
+    async update(config, data = {}) {
       const nodes = Array.isArray(config) ? config : [config];
-      const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
-      if (newNodes[0]?.type !== core.NodeType.ROOT) {
+      const updateData = await Promise.all(nodes.map((node) => this.doUpdate(node, data)));
+      if (updateData[0].oldNode?.type !== core.NodeType.ROOT) {
         this.pushHistoryState();
       }
-      this.emit("update", newNodes);
-      return Array.isArray(config) ? newNodes : newNodes[0];
+      this.emit("update", updateData);
+      return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
     }
     /**
      * 将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
@@ -2363,7 +2418,7 @@
         parent.items?.splice(index, 1);
         await stage.remove({ id: node.id, parentId: parent.id, root: lodashEs.cloneDeep(root) });
         const layout = await this.getLayout(target);
-        const newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), config, (objValue, srcValue) => {
+        const newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), config, (_objValue, srcValue) => {
           if (Array.isArray(srcValue)) {
             return srcValue;
           }
@@ -2729,6 +2784,7 @@
           name: "params",
           type: "key-value",
           defaultValue: {},
+          advanced: true,
           text: "参数"
         },
         {
@@ -2742,6 +2798,7 @@
           name: "headers",
           type: "key-value",
           defaultValue: {},
+          advanced: true,
           text: "请求头"
         }
       ]
@@ -2796,7 +2853,7 @@
         },
         {
           title: "请求参数裁剪",
-          display: (formState, { model }) => model.type === "http",
+          display: (_formState, { model }) => model.type === "http",
           items: [
             {
               name: "beforeRequest",
@@ -2808,7 +2865,7 @@
         },
         {
           title: "响应数据裁剪",
-          display: (formState, { model }) => model.type === "http",
+          display: (_formState, { model }) => model.type === "http",
           items: [
             {
               name: "afterResponse",
@@ -2975,6 +3032,10 @@
   class IdleTask extends events.EventEmitter {
     taskList = [];
     taskHandle = null;
+    constructor() {
+      super();
+      this.setMaxListeners(1e3);
+    }
     enqueueTask(taskHandler, taskData) {
       this.taskList.push({
         handler: taskHandler,
@@ -2984,6 +3045,9 @@
         this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
       }
     }
+    clearTasks() {
+      this.taskList = [];
+    }
     on(eventName, listener) {
       return super.on(eventName, listener);
     }
@@ -2994,9 +3058,27 @@
       return super.emit(eventName, ...args);
     }
     runTaskQueue(deadline) {
-      while ((deadline.timeRemaining() > 10 || deadline.didTimeout) && this.taskList.length) {
-        const task = this.taskList.shift();
-        task.handler(task.data);
+      while (deadline.timeRemaining() > 0 && this.taskList.length) {
+        const timeRemaining = deadline.timeRemaining();
+        let times = 0;
+        if (timeRemaining <= 5) {
+          times = 10;
+        } else if (timeRemaining <= 10) {
+          times = 100;
+        } else if (timeRemaining <= 15) {
+          times = 300;
+        } else {
+          times = 600;
+        }
+        for (let i = 0; i < times; i++) {
+          const task = this.taskList.shift();
+          if (task) {
+            task.handler(task.data);
+          }
+          if (this.taskList.length === 0) {
+            break;
+          }
+        }
       }
       if (this.taskList.length) {
         this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
@@ -3181,10 +3263,10 @@
           }))
         )
       );
-      const onParamsChangeHandler = async () => {
+      const onParamsChangeHandler = async (v, eventData) => {
         try {
           const value = await form.value?.submitForm(true);
-          emit("change", value);
+          emit("change", value, eventData);
         } catch (e) {
           error(e);
         }
@@ -3277,9 +3359,26 @@
           return codeId;
         }
       };
-      const onParamsChangeHandler = (value) => {
+      const onCodeIdChangeHandler = (value) => {
         props.model.params = value.params;
-        emit("change", props.model);
+        emit("change", props.model, {
+          changeRecords: [
+            {
+              propPath: props.prop,
+              value: value[props.name]
+            }
+          ]
+        });
+      };
+      const onParamsChangeHandler = (value, eventData) => {
+        props.model.params = value.params;
+        emit("change", props.model, {
+          ...eventData,
+          changeRecords: (eventData.changeRecords || []).map((item) => ({
+            prop: `${props.prop.replace(props.name, "")}${item.propPath}`,
+            value: item.value
+          }))
+        });
       };
       const editCode = (id) => {
         eventBus?.emit("edit-code", id);
@@ -3292,7 +3391,7 @@
               config: selectConfig,
               model: _ctx.model,
               size: _ctx.size,
-              onChange: onParamsChangeHandler
+              onChange: onCodeIdChangeHandler
             }, null, 8, ["model", "size"]),
             _ctx.model[_ctx.name] && hasCodeBlockSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
               key: 0,
@@ -3591,7 +3690,7 @@
       }
       codeConfig.value = {
         name: "",
-        content: `({app, params}) => {
+        content: `({app, params, flowState}) => {
   // place your code here
 }`,
         params: []
@@ -3637,78 +3736,6 @@
     };
   };
 
-  const useDataSourceMethod = () => {
-    const codeConfig = vue.ref();
-    const codeBlockEditor = vue.ref();
-    const dataSource = vue.ref();
-    const dataSourceMethod = vue.ref("");
-    return {
-      codeConfig,
-      codeBlockEditor,
-      createCode: async (model) => {
-        codeConfig.value = {
-          name: "",
-          content: `({ params, dataSource, app }) => {
-  // place your code here
-}`,
-          params: []
-        };
-        await vue.nextTick();
-        dataSource.value = model;
-        dataSourceMethod.value = "";
-        codeBlockEditor.value?.show();
-      },
-      editCode: async (model, methodName) => {
-        const method = model.methods?.find((method2) => method2.name === methodName);
-        if (!method) {
-          designPlugin.tMagicMessage.error("获取数据源方法失败");
-          return;
-        }
-        let codeContent = method.content || `({ params, dataSource, app }) => {
-  // place your code here
-}`;
-        if (typeof codeContent !== "string") {
-          codeContent = codeContent.toString();
-        }
-        codeConfig.value = {
-          ...lodashEs.cloneDeep(method),
-          content: codeContent
-        };
-        await vue.nextTick();
-        dataSource.value = model;
-        dataSourceMethod.value = methodName;
-        codeBlockEditor.value?.show();
-      },
-      deleteCode: async (model, methodName) => {
-        if (!model.methods) return;
-        const index = model.methods.findIndex((method) => method.name === methodName);
-        if (index === -1) {
-          return;
-        }
-        model.methods.splice(index, 1);
-      },
-      submitCode: (values) => {
-        if (!dataSource.value) return;
-        if (!dataSource.value.methods) {
-          dataSource.value.methods = [];
-        }
-        if (values.content) {
-          const parseDSL = getEditorConfig("parseDSL");
-          if (typeof values.content === "string") {
-            values.content = parseDSL(values.content);
-          }
-        }
-        if (dataSourceMethod.value) {
-          const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
-          dataSource.value.methods.splice(index, 1, values);
-        } else {
-          dataSource.value.methods.push(values);
-        }
-        codeBlockEditor.value?.hide();
-      }
-    };
-  };
-
   const state = vue.reactive({
     uiSelectMode: false,
     showSrc: false,
@@ -4195,14 +4222,28 @@
         calcBoxPosition();
         addDialogVisible.value = true;
       };
-      const fieldChange = ({ index, ...value }) => {
+      const fieldChange = ({ index, ...value }, data) => {
+        addDialogVisible.value = false;
         if (index > -1) {
-          props.model[props.name][index] = value;
+          emit("change", value, {
+            modifyKey: index,
+            changeRecords: (data.changeRecords || []).map((item) => ({
+              propPath: `${props.prop}.${index}.${item.propPath}`,
+              value: item.value
+            }))
+          });
         } else {
-          props.model[props.name].push(value);
+          const modifyKey = props.model[props.name].length;
+          emit("change", value, {
+            modifyKey,
+            changeRecords: [
+              {
+                propPath: `${props.prop}.${modifyKey}`,
+                value
+              }
+            ]
+          });
         }
-        addDialogVisible.value = false;
-        emit("change", props.model[props.name]);
       };
       const fieldColumns = [
         {
@@ -4396,9 +4437,8 @@
       const addFromJsonFromChange = ({ data }) => {
         try {
           const value = JSON.parse(data);
-          props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
           addFromJsonDialogVisible.value = false;
-          emit("change", props.model[props.name]);
+          emit("change", getFieldsConfig(value, props.model[props.name]));
         } catch (e) {
           designPlugin.tMagicMessage.error(e.message);
         }
@@ -5182,9 +5222,9 @@
           }
         }
       ]);
-      const submitForm = (values) => {
+      const submitForm = (values, data) => {
         changedValue.value = void 0;
-        emit("submit", values);
+        emit("submit", values, data);
       };
       const errorHandler = (error) => {
         designPlugin.tMagicMessage.error(error.message);
@@ -5205,7 +5245,7 @@
           type: "warning",
           distinguishCancelAndClose: true
         }).then(() => {
-          changedValue.value && submitForm(changedValue.value);
+          changedValue.value && submitForm(changedValue.value, { changeRecords: formBox.value?.form?.changeRecords });
           done();
         }).catch((action) => {
           done(action === "cancel");
@@ -5369,7 +5409,9 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
+      const codeConfig = vue.ref();
+      const codeBlockEditor = vue.ref();
+      let editIndex = -1;
       const methodColumns = [
         {
           label: "名称",
@@ -5394,16 +5436,29 @@
           actions: [
             {
               text: "编辑",
-              handler: (row) => {
-                editCode(props.model, row.name);
-                emit("change", props.model[props.name]);
+              handler: (method, index) => {
+                let codeContent = method.content || `({ params, dataSource, app }) => {
+  // place your code here
+}`;
+                if (typeof codeContent !== "string") {
+                  codeContent = codeContent.toString();
+                }
+                codeConfig.value = {
+                  ...lodashEs.cloneDeep(method),
+                  content: codeContent
+                };
+                editIndex = index;
+                vue.nextTick(() => {
+                  codeBlockEditor.value?.show();
+                });
               }
             },
             {
               text: "删除",
               buttonType: "danger",
-              handler: (row) => {
-                deleteCode(props.model, row.name);
+              handler: async (row, index) => {
+                await designPlugin.tMagicMessageBox.confirm(`确定删除${row.name}?`, "提示");
+                props.model[props.name].splice(index, 1);
                 emit("change", props.model[props.name]);
               }
             }
@@ -5411,12 +5466,48 @@
         }
       ];
       const createCodeHandler = () => {
-        createCode(props.model);
-        emit("change", props.model[props.name]);
+        codeConfig.value = {
+          name: "",
+          content: `({ params, dataSource, app, flowState }) => {
+  // place your code here
+}`,
+          params: []
+        };
+        editIndex = -1;
+        vue.nextTick(() => {
+          codeBlockEditor.value?.show();
+        });
       };
-      const submitCodeHandler = (values) => {
-        submitCode(values);
-        emit("change", props.model[props.name]);
+      const submitCodeHandler = (value, data) => {
+        if (value.content) {
+          const parseDSL = getEditorConfig("parseDSL");
+          if (typeof value.content === "string") {
+            value.content = parseDSL(value.content);
+          }
+        }
+        if (editIndex > -1) {
+          emit("change", value, {
+            modifyKey: editIndex,
+            changeRecords: (data.changeRecords || []).map((item) => ({
+              propPath: `${props.prop}.${editIndex}.${item.propPath}`,
+              value: item.value
+            }))
+          });
+        } else {
+          const modifyKey = props.model[props.name].length;
+          emit("change", value, {
+            modifyKey,
+            changeRecords: [
+              {
+                propPath: `${props.prop}.${modifyKey}`,
+                value
+              }
+            ]
+          });
+        }
+        editIndex = -1;
+        codeConfig.value = void 0;
+        codeBlockEditor.value?.hide();
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
@@ -5438,12 +5529,12 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
+          codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
             disabled: _ctx.disabled,
-            content: vue.unref(codeConfig),
+            content: codeConfig.value,
             "is-data-source": true,
             "data-source-type": _ctx.model.type,
             onSubmit: submitCodeHandler
@@ -6041,8 +6132,11 @@
           }
         ]
       }));
-      const changeHandler = (v) => {
-        emit("change", v);
+      const changeHandler = (v, eventData) => {
+        if (!Array.isArray(props.model[props.name])) {
+          props.model[props.name] = [];
+        }
+        emit("change", v, eventData);
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(formPlugin.MGroupList), {
@@ -6326,17 +6420,19 @@
         if (!props.model[props.name]) {
           props.model[props.name] = [];
         }
-        props.model[props.name].push(defaultEvent);
-        onChangeHandler();
+        emit("change", defaultEvent, {
+          modifyKey: props.model[props.name].length
+        });
       };
       const removeEvent = (index) => {
         if (!props.name) return;
         props.model[props.name].splice(index, 1);
-        onChangeHandler();
+        emit("change", props.model[props.name]);
       };
-      const onChangeHandler = () => {
-        emit("change", props.model);
+      const eventNameChangeHandler = (v, eventData) => {
+        emit("change", props.model[props.name], eventData);
       };
+      const onChangeHandler = (v, eventData) => emit("change", props.model[props.name], eventData);
       return (_ctx, _cache) => {
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
@@ -6367,6 +6463,7 @@
                 key: index,
                 disabled: _ctx.disabled,
                 size: _ctx.size,
+                prop: `${_ctx.prop}.${index}`,
                 config: actionsConfig.value,
                 model: cardItem,
                 "label-width": _ctx.config.labelWidth || "100px",
@@ -6379,8 +6476,9 @@
                     model: cardItem,
                     disabled: _ctx.disabled,
                     size: _ctx.size,
-                    onChange: onChangeHandler
-                  }, null, 8, ["config", "model", "disabled", "size"]),
+                    prop: `${_ctx.prop}.${index}`,
+                    onChange: eventNameChangeHandler
+                  }, null, 8, ["config", "model", "disabled", "size", "prop"]),
                   vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                     style: { "color": "#f56c6c" },
                     link: "",
@@ -6391,7 +6489,7 @@
                   }, null, 8, ["icon", "disabled", "size", "onClick"])
                 ]),
                 _: 2
-              }, 1032, ["disabled", "size", "config", "model", "label-width"]);
+              }, 1032, ["disabled", "size", "prop", "config", "model", "label-width"]);
             }), 128))
           ]))
         ]);
@@ -6444,14 +6542,18 @@
       const records = vue.ref([]);
       const showCode = vue.ref(false);
       vue.watchEffect(() => {
-        const initValues = Object.entries(props.model[props.name] || {});
-        for (const [, value] of initValues) {
-          if (typeof value !== "string") {
-            showCode.value = true;
-            break;
+        if (typeof props.model[props.name] === "function") {
+          showCode.value = true;
+        } else {
+          const initValues = Object.entries(props.model[props.name] || {});
+          for (const [, value] of initValues) {
+            if (typeof value !== "string") {
+              showCode.value = true;
+              break;
+            }
           }
+          records.value = initValues;
         }
-        records.value = initValues;
       });
       const getValue = () => {
         const record = {};
@@ -6533,7 +6635,7 @@
             key: 1,
             height: "200px",
             "init-values": _ctx.model[_ctx.name],
-            language: "json",
+            language: "javascript",
             options: {
               readOnly: _ctx.disabled
             },
@@ -7201,7 +7303,7 @@
       pageBarSortOptions: {},
       length: {}
     },
-    setup(__props) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -7231,23 +7333,28 @@
       });
       let translateLeft = 0;
       const scroll = (type) => {
-        if (!itemsContainer.value) return;
+        if (!itemsContainer.value || !canScroll.value) return;
         const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
         if (type === "left") {
-          translateLeft += 100;
-          if (translateLeft > 0) {
-            translateLeft = 0;
-          }
+          scrollTo(translateLeft + 200);
         } else if (type === "right") {
-          translateLeft -= 100;
-          if (-translateLeft > maxScrollLeft) {
-            translateLeft = -maxScrollLeft;
-          }
+          scrollTo(translateLeft - 200);
         } else if (type === "start") {
-          translateLeft = 0;
+          scrollTo(0);
         } else if (type === "end") {
-          translateLeft = -maxScrollLeft;
+          scrollTo(-maxScrollLeft);
+        }
+      };
+      const scrollTo = (value) => {
+        if (!itemsContainer.value || !canScroll.value) return;
+        const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+        if (value >= 0) {
+          value = 0;
+        }
+        if (-value > maxScrollLeft) {
+          value = -maxScrollLeft;
         }
+        translateLeft = value;
         itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
       };
       vue.watch(
@@ -7255,11 +7362,13 @@
         (length = 0, preLength = 0) => {
           setTimeout(() => {
             setCanScroll();
-            if (length < preLength) {
-              scroll("start");
-            } else {
-              scroll("end");
-            }
+            vue.nextTick(() => {
+              if (length < preLength || preLength === 0) {
+                scroll("start");
+              } else {
+                scroll("end");
+              }
+            });
             if (length > 1) {
               const el = document.querySelector(".m-editor-page-bar-items");
               let beforeDragList = [];
@@ -7296,6 +7405,14 @@
           immediate: true
         }
       );
+      __expose({
+        itemsContainerWidth,
+        scroll,
+        scrollTo,
+        getTranslateLeft() {
+          return translateLeft;
+        }
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor-page-bar",
@@ -7303,25 +7420,24 @@
           ref: pageBar
         }, [
           vue.renderSlot(_ctx.$slots, "prepend"),
-          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
-          }, [
-            vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
-          ])) : vue.createCommentVNode("", true),
           _ctx.length ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 1,
+            key: 0,
             class: "m-editor-page-bar-items",
             ref_key: "itemsContainer",
-            ref: itemsContainer,
-            style: vue.normalizeStyle(`width: ${itemsContainerWidth.value}px`)
+            ref: itemsContainer
           }, [
             vue.renderSlot(_ctx.$slots, "default")
-          ], 4)) : vue.createCommentVNode("", true),
+          ], 512)) : vue.createCommentVNode("", true),
+          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-left-icon",
+            onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
+          }, [
+            vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+          ])) : vue.createCommentVNode("", true),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
-            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-right-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
             vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
@@ -7349,8 +7465,9 @@
       const uiService = services?.uiService;
       const editorService = services?.editorService;
       const showPageListButton = vue.computed(() => uiService?.get("showPageListButton"));
-      const switchPage = (id) => {
-        editorService?.select(id);
+      const page = vue.computed(() => editorService?.get("page"));
+      const switchPage = async (id) => {
+        await editorService?.select(id);
       };
       return (_ctx, _cache) => {
         return showPageListButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
@@ -7377,6 +7494,7 @@
                       data: {
                         type: "button",
                         text: item.devconfig?.tabName || item.name || item.id,
+                        className: item.id === page.value?.id ? "active" : "",
                         handler: () => switchPage(item.id)
                       },
                       key: index
@@ -7457,7 +7575,7 @@
   });
 
   const _hoisted_1$c = { class: "m-editor-page-bar-tabs" };
-  const _hoisted_2$5 = ["page-id", "onClick"];
+  const _hoisted_2$5 = ["data-page-id", "onClick"];
   const _hoisted_3$2 = { class: "m-editor-page-bar-title" };
   const _hoisted_4$2 = ["title"];
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
@@ -7508,9 +7626,38 @@
       const remove = (node) => {
         editorService?.remove(node);
       };
+      const pageBarScrollContainer = vue.ref();
+      const pageBarItems = vue.ref();
+      vue.watch(page, (page2) => {
+        if (!page2 || !pageBarScrollContainer.value?.itemsContainerWidth || !pageBarItems.value || pageBarItems.value.length < 2) {
+          return;
+        }
+        const firstItem = pageBarItems.value[0];
+        const lastItem = pageBarItems.value[pageBarItems.value.length - 1];
+        if (page2.id === firstItem.dataset.pageId) {
+          pageBarScrollContainer.value.scroll("start");
+        } else if (page2.id === lastItem.dataset.pageId) {
+          pageBarScrollContainer.value.scroll("end");
+        } else {
+          const pageItem = pageBarItems.value.find((item) => item.dataset.pageId === page2.id);
+          if (!pageItem) {
+            return;
+          }
+          const pageItemRect = pageItem.getBoundingClientRect();
+          const offsetLeft = pageItemRect.left - firstItem.getBoundingClientRect().left;
+          const { itemsContainerWidth } = pageBarScrollContainer.value;
+          const left = itemsContainerWidth - offsetLeft - pageItemRect.width;
+          const translateLeft = pageBarScrollContainer.value.getTranslateLeft();
+          if (offsetLeft + translateLeft < 0 || offsetLeft + pageItemRect.width > itemsContainerWidth - translateLeft) {
+            pageBarScrollContainer.value.scrollTo(left);
+          }
+        }
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
           vue.createVNode(_sfc_main$w, {
+            ref_key: "pageBarScrollContainer",
+            ref: pageBarScrollContainer,
             "page-bar-sort-options": _ctx.pageBarSortOptions,
             length: list.value.length
           }, {
@@ -7533,8 +7680,11 @@
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (item) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   class: vue.normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
+                  ref_for: true,
+                  ref_key: "pageBarItems",
+                  ref: pageBarItems,
                   key: item.id,
-                  "page-id": item.id,
+                  "data-page-id": item.id,
                   onClick: ($event) => switchPage(item.id)
                 }, [
                   vue.createElementVNode("div", _hoisted_3$2, [
@@ -7666,7 +7816,6 @@
       const root = vue.computed(() => editorService?.get("root"));
       const page = vue.computed(() => editorService?.get("page"));
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
-      const stageLoading = vue.computed(() => editorService?.get("stageLoading") || false);
       const showSrc = vue.computed(() => uiService?.get("showSrc"));
       const getLeftColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
       const getRightColumnWidthCacheData = () => Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
@@ -7717,7 +7866,6 @@
         }
       };
       return (_ctx, _cache) => {
-        const _directive_loading = vue.resolveDirective("loading");
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor",
           ref_key: "content",
@@ -7734,9 +7882,8 @@
               options: vue.unref(codeOptions),
               onSave: saveCode
             }, null, 8, ["init-values", "options"])
-          ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$z, {
+          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$z, {
             key: 1,
-            "element-loading-text": "Runtime 加载中...",
             ref_key: "splitView",
             ref: splitView,
             class: "m-editor-content",
@@ -7796,9 +7943,7 @@
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["left", "right", "width"])), [
-            [_directive_loading, stageLoading.value]
-          ]),
+          ]), 1032, ["left", "right", "width"])),
           vue.renderSlot(_ctx.$slots, "content-after"),
           vue.renderSlot(_ctx.$slots, "footer")
         ], 512);
@@ -8047,10 +8192,10 @@
           configForm.value.formState.stage = stage.value;
         }
       });
-      const submit = async () => {
+      const submit = async (v, eventData) => {
         try {
           const values2 = await configForm.value?.submitForm();
-          services?.editorService.update(values2);
+          services?.editorService.update(values2, { changeRecords: eventData.changeRecords });
         } catch (e) {
           emit("submit-error", e);
         }
@@ -8352,6 +8497,7 @@
       const emit = __emit;
       const services = vue.inject("services");
       const { codeBlockService, depService, editorService } = services || {};
+      const collecting = vue.computed(() => depService?.get("collecting"));
       const codeList = vue.computed(
         () => Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
           const target = depService?.getTarget(codeId, core.DepTargetType.CODE_BLOCK);
@@ -8451,8 +8597,19 @@
             }, vue.toDisplayString(data.name) + " " + vue.toDisplayString(data.key ? `(${data.key})` : ""), 3)
           ]),
           "tree-node-tool": vue.withCtx(({ data }) => [
-            data.type === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
+            collecting.value && data.type === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTag), {
               key: 0,
+              type: "info",
+              size: "small",
+              style: { "margin-right": "5px" }
+            }, {
+              default: vue.withCtx(() => _cache[0] || (_cache[0] = [
+                vue.createTextVNode("依赖收集中")
+              ])),
+              _: 1
+            })) : vue.createCommentVNode("", true),
+            data.type === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
+              key: 1,
               effect: "dark",
               content: editable.value ? "编辑" : "查看",
               placement: "bottom"
@@ -8467,7 +8624,7 @@
               _: 2
             }, 1032, ["content"])) : vue.createCommentVNode("", true),
             data.type === "code" && editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
-              key: 1,
+              key: 2,
               effect: "dark",
               content: "删除",
               placement: "bottom"
@@ -8583,9 +8740,9 @@
       dialogTitle.value = `编辑${dataSourceValues.value.title || ""}`;
       editDialog.value.show();
     };
-    const submitDataSourceHandler = (value) => {
+    const submitDataSourceHandler = (value, eventData) => {
       if (value.id) {
-        dataSourceService?.update(value);
+        dataSourceService?.update(value, { changeRecords: eventData.changeRecords });
       } else {
         dataSourceService?.add(value);
       }
@@ -8632,8 +8789,8 @@
         initValues.value = props.values;
         dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
       });
-      const submitHandler = (values) => {
-        emit("submit", values);
+      const submitHandler = (values, data) => {
+        emit("submit", values, data);
       };
       const errorHandler = (error) => {
         designPlugin.tMagicMessage.error(error.message);
@@ -8689,6 +8846,7 @@
     setup(__props, { expose: __expose, emit: __emit }) {
       const emit = __emit;
       const { depService, editorService, dataSourceService } = vue.inject("services") || {};
+      const collecting = vue.computed(() => depService?.get("collecting"));
       const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
       const dsDep = vue.computed(() => depService?.getTargets(core.DepTargetType.DATA_SOURCE) || {});
@@ -8794,8 +8952,19 @@
             }, vue.toDisplayString(data.name) + " " + vue.toDisplayString(data.key ? `(${data.key})` : ""), 3)
           ]),
           "tree-node-tool": vue.withCtx(({ data }) => [
-            data.type === "ds" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
+            collecting.value && data.type === "ds" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTag), {
               key: 0,
+              type: "info",
+              size: "small",
+              style: { "margin-right": "5px" }
+            }, {
+              default: vue.withCtx(() => _cache[0] || (_cache[0] = [
+                vue.createTextVNode("依赖收集中")
+              ])),
+              _: 1
+            })) : vue.createCommentVNode("", true),
+            data.type === "ds" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
+              key: 1,
               effect: "dark",
               content: editable.value ? "编辑" : "查看",
               placement: "bottom"
@@ -8810,7 +8979,7 @@
               _: 2
             }, 1032, ["content"])) : vue.createCommentVNode("", true),
             data.type === "ds" && editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
-              key: 1,
+              key: 2,
               effect: "dark",
               content: "删除",
               placement: "bottom"
@@ -10076,6 +10245,7 @@
     setup(__props, { expose: __expose }) {
       const props = __props;
       const services = vue.inject("services");
+      const collecting = vue.computed(() => services?.depService.get("collecting"));
       const columnLeftWidth = vue.computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
       const { height: editorContentHeight } = useEditorContentHeight();
       const columnLeftHeight = vue.ref(0);
@@ -10218,7 +10388,7 @@
             ]),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
               return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-                class: "m-editor-sidebar-content",
+                class: vue.normalizeClass(["m-editor-sidebar-content", { "m-editor-dep-collecting": collecting.value }]),
                 key: config.$key ?? index
               }, [
                 config?.component && !vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({
@@ -10344,7 +10514,7 @@
                     key: "11"
                   } : void 0
                 ]), 1040)) : vue.createCommentVNode("", true)
-              ])), [
+              ], 2)), [
                 [vue.vShow, [config.text, config.$key, `${index}`].includes(activeTabName.value)]
               ]);
             }), 128))
@@ -10925,15 +11095,17 @@
     },
     __name: "Stage",
     props: {
+      stageOptions: {},
       stageContentMenu: {},
       disabledStageOverlay: { type: Boolean, default: false },
       customContentMenu: {}
     },
     setup(__props) {
+      const props = __props;
       let stage = null;
       let runtime = null;
       const services = vue.inject("services");
-      const stageOptions = vue.inject("stageOptions");
+      const stageLoading = vue.computed(() => services?.editorService.get("stageLoading") || false);
       const stageWrap = vue.ref();
       const stageContainer = vue.ref();
       const menu = vue.ref();
@@ -10948,8 +11120,8 @@
       vue.watchEffect(() => {
         if (stage || !page.value) return;
         if (!stageContainer.value) return;
-        if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
-        stage = useStage(stageOptions);
+        if (!(props.stageOptions?.runtimeUrl || props.stageOptions?.render) || !root.value) return;
+        stage = useStage(props.stageOptions);
         stage.on("select", () => {
           stageWrap.value?.container?.focus();
         });
@@ -10969,6 +11141,7 @@
       });
       vue.onBeforeUnmount(() => {
         stage?.destroy();
+        services?.editorService.set("stage", null);
       });
       vue.watch(zoom, (zoom2) => {
         if (!stage || !zoom2) return;
@@ -11036,7 +11209,9 @@
         if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
         e.preventDefault();
         const doc = stage?.renderer?.contentWindow?.document;
-        const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
+        const parentEl = doc?.querySelector(
+          `.${props.stageOptions?.containerHighlightClassName}`
+        );
         let parent = page.value;
         const parentId = utils.getIdFromEl()(parentEl);
         if (parentId) {
@@ -11075,11 +11250,13 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$8, {
+        const _directive_loading = vue.resolveDirective("loading");
+        return vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$8, {
           class: "m-editor-stage",
           ref_key: "stageWrap",
           ref: stageWrap,
           tabindex: "-1",
+          "element-loading-text": "Runtime 加载中...",
           width: stageRect.value?.width,
           height: stageRect.value?.height,
           "wrap-width": stageContainerRect.value?.width,
@@ -11116,7 +11293,9 @@
             vue.createVNode(_sfc_main$7)
           ]),
           _: 1
-        }, 8, ["width", "height", "wrap-width", "wrap-height", "zoom"]);
+        }, 8, ["width", "height", "wrap-width", "wrap-height", "zoom"])), [
+          [_directive_loading, stageLoading.value]
+        ]);
       };
     }
   });
@@ -11178,18 +11357,20 @@
       customContentMenu: {}
     },
     setup(__props) {
+      const stageOptions = vue.inject("stageOptions");
       const services = vue.inject("services");
       const page = vue.computed(() => services?.editorService.get("page"));
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
           vue.createVNode(_sfc_main$2),
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
-            page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$3, {
+            page.value && (vue.unref(stageOptions)?.render || vue.unref(stageOptions)?.runtimeUrl) ? (vue.openBlock(), vue.createBlock(_sfc_main$3, {
               key: 0,
+              "stage-options": vue.unref(stageOptions),
               "disabled-stage-overlay": _ctx.disabledStageOverlay,
               "stage-content-menu": _ctx.stageContentMenu,
               "custom-content-menu": _ctx.customContentMenu
-            }, null, 8, ["disabled-stage-overlay", "stage-content-menu", "custom-content-menu"])) : vue.createCommentVNode("", true)
+            }, null, 8, ["stage-options", "disabled-stage-overlay", "stage-content-menu", "custom-content-menu"])) : vue.createCommentVNode("", true)
           ]),
           vue.renderSlot(_ctx.$slots, "workspace-content")
         ]);
@@ -11539,12 +11720,17 @@
       this.emit("add", newConfig);
       return newConfig;
     }
-    update(config) {
+    update(config, { changeRecords = [] } = {}) {
       const dataSources = this.get("dataSources");
       const index = dataSources.findIndex((ds) => ds.id === config.id);
-      dataSources[index] = lodashEs.cloneDeep(config);
-      this.emit("update", config);
-      return config;
+      const oldConfig = dataSources[index];
+      const newConfig = lodashEs.cloneDeep(config);
+      dataSources[index] = newConfig;
+      this.emit("update", newConfig, {
+        oldConfig,
+        changeRecords
+      });
+      return newConfig;
     }
     remove(id) {
       const dataSources = this.get("dataSources");
@@ -11620,7 +11806,16 @@
 
   const idleTask = new IdleTask();
   class Dep extends BaseService {
+    state = vue.reactive({
+      collecting: false
+    });
     watcher = new core.Watcher({ initialTargets: vue.reactive({}) });
+    set(name, value) {
+      this.state[name] = value;
+    }
+    get(name) {
+      return this.state[name];
+    }
     removeTargets(type = core.DepTargetType.DEFAULT) {
       this.watcher.removeTargets(type);
       const targets = this.watcher.getTargets(type);
@@ -11647,34 +11842,30 @@
       this.watcher.clearTargets();
     }
     collect(nodes, depExtendedData = {}, deep = false, type) {
+      this.set("collecting", true);
       this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
         this.collectNode(node, target, depExtendedData, deep);
       });
+      this.set("collecting", false);
       this.emit("collected", nodes, deep);
     }
     collectIdle(nodes, depExtendedData = {}, deep = false, type) {
+      this.set("collecting", true);
       let startTask = false;
       this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
         startTask = true;
-        idleTask.enqueueTask(
-          ({ node: node2, deep: deep2, target: target2 }) => {
-            this.collectNode(node2, target2, depExtendedData, deep2);
-          },
-          {
-            node,
-            deep,
-            target
-          }
-        );
+        this.enqueueTask(node, target, depExtendedData, deep);
       });
       return new Promise((resolve) => {
         if (!startTask) {
           this.emit("collected", nodes, deep);
+          this.set("collecting", false);
           resolve();
           return;
         }
         idleTask.once("finish", () => {
           this.emit("collected", nodes, deep);
+          this.set("collecting", false);
           resolve();
         });
       });
@@ -11703,6 +11894,9 @@
     hasSpecifiedTypeTarget(type = core.DepTargetType.DEFAULT) {
       return this.watcher.hasSpecifiedTypeTarget(type);
     }
+    clearIdleTasks() {
+      idleTask.clearTasks();
+    }
     on(eventName, listener) {
       return super.on(eventName, listener);
     }
@@ -11712,6 +11906,23 @@
     emit(eventName, ...args) {
       return super.emit(eventName, ...args);
     }
+    enqueueTask(node, target, depExtendedData, deep) {
+      idleTask.enqueueTask(
+        ({ node: node2, deep: deep2, target: target2 }) => {
+          this.collectNode(node2, target2, depExtendedData, deep2);
+        },
+        {
+          node,
+          deep: false,
+          target
+        }
+      );
+      if (deep && Array.isArray(node.items) && node.items.length) {
+        node.items.forEach((item) => {
+          this.enqueueTask(item, target, depExtendedData, deep);
+        });
+      }
+    }
   }
   const depService = new Dep();
 
@@ -12285,6 +12496,7 @@
         initDataSourceDepTarget(ds);
       });
       if (Array.isArray(value.items)) {
+        depService.clearIdleTasks();
         collectIdle(value.items, true);
       } else {
         depService.clear();
@@ -12309,10 +12521,20 @@
         emit("update:modelValue", value);
       }
     };
-    const getApp = () => {
-      const stage = editorService.get("stage");
-      return stage?.renderer?.runtime?.getApp?.();
-    };
+    const stage = vue.computed(() => editorService.get("stage"));
+    vue.watch(stage, (stage2) => {
+      if (!stage2) {
+        return;
+      }
+      stage2.on("rerender", () => {
+        const node = editorService.get("node");
+        if (!node) return;
+        collectIdle([node], true).then(() => {
+          afterUpdateNodes([node]);
+        });
+      });
+    });
+    const getApp = () => stage.value?.renderer?.runtime?.getApp?.();
     const updateDataSourceSchema = (nodes, deep) => {
       const root = editorService.get("root");
       const app = getApp();
@@ -12324,8 +12546,7 @@
       if (root?.dataSources) {
         getApp()?.dataSourceManager?.updateSchema(root.dataSources);
       }
-      const stage = editorService.get("stage");
-      if (!root || !stage) return;
+      if (!root || !stage.value) return;
       const allNodes = [];
       if (deep) {
         nodes.forEach((node) => {
@@ -12342,7 +12563,7 @@
       deps.forEach((dep) => {
         Object.keys(dep).forEach((id) => {
           const node = allNodes.find((node2) => node2.id === id);
-          node && stage.update({
+          node && stage.value?.update({
             config: lodashEs.cloneDeep(node),
             parentId: editorService.getParentById(node.id)?.id,
             root: lodashEs.cloneDeep(root)
@@ -12353,13 +12574,8 @@
     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({
+        stage.value?.update({
           config: lodashEs.cloneDeep(node),
           parentId: editorService.getParentById(node.id)?.id,
           root: lodashEs.cloneDeep(root)
@@ -12392,8 +12608,17 @@
         delete root.dataSourceCondDeps[id];
       }
     };
+    const depCollectedHandler = () => {
+      const root = editorService.get("root");
+      if (!root) return;
+      const app = getApp();
+      if (app?.dsl) {
+        app.dsl.dataSourceDeps = root.dataSourceDeps;
+      }
+    };
     depService.on("add-target", targetAddHandler);
     depService.on("remove-target", targetRemoveHandler);
+    depService.on("collected", depCollectedHandler);
     const initDataSourceDepTarget = (ds) => {
       depService.addTarget(core.createDataSourceTarget(ds, vue.reactive({})));
       depService.addTarget(core.createDataSourceMethodTarget(ds, vue.reactive({})));
@@ -12416,10 +12641,31 @@
         afterUpdateNodes(nodes);
       });
     };
-    const nodeUpdateHandler = (nodes) => {
-      collectIdle(nodes, true).then(() => {
-        afterUpdateNodes(nodes);
+    const nodeUpdateHandler = (data) => {
+      const needRecollectNodes = [];
+      const normalNodes = [];
+      data.forEach(({ newNode, oldNode, changeRecords }) => {
+        if (changeRecords?.length) {
+          for (const record of changeRecords) {
+            if (!record.propPath || new RegExp(`${core.NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) || new RegExp(`${core.NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) || record.propPath === core.NODE_CONDS_KEY || utils.isValueIncludeDataSource(record.value)) {
+              needRecollectNodes.push(newNode);
+            } else {
+              normalNodes.push(newNode);
+            }
+          }
+        } else if (isIncludeDataSource(newNode, oldNode)) {
+          needRecollectNodes.push(newNode);
+        } else {
+          normalNodes.push(newNode);
+        }
       });
+      if (needRecollectNodes.length) {
+        collectIdle(needRecollectNodes, true).then(() => {
+          afterUpdateNodes(needRecollectNodes);
+        });
+      } else if (normalNodes.length) {
+        afterUpdateNodes(normalNodes);
+      }
     };
     const nodeRemoveHandler = (nodes) => {
       depService.clear(nodes);
@@ -12450,13 +12696,30 @@
       initDataSourceDepTarget(config);
       getApp()?.dataSourceManager?.addDataSource(config);
     };
-    const dataSourceUpdateHandler = (config) => {
+    const dataSourceUpdateHandler = (config, { changeRecords }) => {
+      let needRecollectDep = false;
+      for (const changeRecord of changeRecords) {
+        if (!changeRecord.propPath) {
+          continue;
+        }
+        needRecollectDep = changeRecord.propPath === "fields" || changeRecord.propPath === "methods" || /fields.(\d)+.name/.test(changeRecord.propPath) || /fields.(\d)+$/.test(changeRecord.propPath) || /methods.(\d)+.name/.test(changeRecord.propPath) || /methods.(\d)+$/.test(changeRecord.propPath);
+        if (needRecollectDep) {
+          break;
+        }
+      }
       const root = editorService.get("root");
-      removeDataSourceTarget(config.id);
-      initDataSourceDepTarget(config);
-      collectIdle(root?.items || [], true).then(() => {
-        updateDataSourceSchema(root?.items || [], true);
-      });
+      if (needRecollectDep) {
+        if (Array.isArray(root?.items)) {
+          depService.clearIdleTasks();
+          removeDataSourceTarget(config.id);
+          initDataSourceDepTarget(config);
+          collectIdle(root.items, true).then(() => {
+            updateDataSourceSchema(root?.items || [], true);
+          });
+        }
+      } else if (root?.dataSources) {
+        getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+      }
     };
     const removeDataSourceTarget = (id) => {
       depService.removeTarget(id, core.DepTargetType.DATA_SOURCE);
@@ -12478,6 +12741,7 @@
     vue.onBeforeUnmount(() => {
       depService.off("add-target", targetAddHandler);
       depService.off("remove-target", targetRemoveHandler);
+      depService.off("collected", depCollectedHandler);
       editorService.off("history-change", historyChangeHandler);
       editorService.off("root-change", rootChangeHandler);
       editorService.off("add", nodeAddHandler);
@@ -12846,6 +13110,7 @@
   exports.getRelativeStyle = getRelativeStyle;
   exports.historyService = historyService;
   exports.info = info;
+  exports.isIncludeDataSource = isIncludeDataSource;
   exports.log = log;
   exports.moveItemsInContainer = moveItemsInContainer;
   exports.numberOptions = numberOptions;
@@ -12861,7 +13126,6 @@
   exports.uiService = uiService;
   exports.updateStatus = updateStatus;
   exports.useCodeBlockEdit = useCodeBlockEdit;
-  exports.useDataSourceMethod = useDataSourceMethod;
   exports.useEditorContentHeight = useEditorContentHeight;
   exports.useFilter = useFilter;
   exports.useFloatBox = useFloatBox;