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

package/dist/tmagic-editor.js

@@ -7,15 +7,15 @@ 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 { 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, createSlots, markRaw, getCurrentInstance, withDirectives, vShow, Transition, resolveDirective, mergeDefaults } from 'vue';
 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 { throttle, isEmpty, isObject, cloneDeep, mergeWith, 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, 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';
+import { isPage, isPageFragment, isPop, getNodePath, isNumber, getElById, calcValueByFontsize, isValueIncludeDataSource, 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';
@@ -23,6 +23,7 @@ export * from '@tmagic/stage';
 export { default as StageCore } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import Gesto from 'gesto';
+import { detailedDiff } from 'deep-object-diff';
 import Sortable from 'sortablejs';
 import KeyController from 'keycon';
 
@@ -290,9 +291,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   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) => {
@@ -442,11 +441,13 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 { value: HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
               ],
               defaultValue: "code",
-              onChange: (mForm, v, { model }) => {
+              onChange: (mForm, v, { model, prop, changeRecords }) => {
                 if (v === 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;
               }
@@ -485,9 +486,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
-    const changeHandler = async () => {
-      emit("change", props.model[props.name]);
-    };
+    const changeHandler = (v, eventData) => emit("change", v, eventData);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["m-fields-code-select", _ctx.config.className])
@@ -569,7 +568,7 @@ const styleTabConfig = {
               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",
@@ -590,7 +589,7 @@ const styleTabConfig = {
               fieldConfig: {
                 type: "text"
               },
-              disabled: (vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
+              disabled: (_vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
             }
           ]
         },
@@ -839,7 +838,7 @@ const advancedTabConfig = {
 };
 const displayTabConfig = {
   title: "显示条件",
-  display: (vm, { model }) => model.type !== "page",
+  display: (_vm, { model }) => model.type !== "page",
   items: [
     {
       type: "display-conds",
@@ -1163,6 +1162,55 @@ const moveItemsInContainer = (sourceIndices, parent, targetIndex) => {
     }
   }
 };
+const isIncludeDataSourceByDiffAddResult = (diffResult) => {
+  for (const value of Object.values(diffResult)) {
+    const result = isValueIncludeDataSource(value);
+    if (result) {
+      return true;
+    }
+    if (isObject(value)) {
+      return isIncludeDataSourceByDiffAddResult(value);
+    }
+  }
+  return false;
+};
+const isIncludeDataSourceByDiffUpdatedResult = (diffResult, oldNode) => {
+  for (const [key, value] of Object.entries(diffResult)) {
+    if (isValueIncludeDataSource(value)) {
+      return true;
+    }
+    if (isValueIncludeDataSource(oldNode[key])) {
+      return true;
+    }
+    if (isObject(value)) {
+      return isIncludeDataSourceByDiffUpdatedResult(value, oldNode[key]);
+    }
+  }
+  return false;
+};
+const isIncludeDataSource = (node, oldNode) => {
+  const diffResult = detailedDiff(oldNode, node);
+  let isIncludeDataSource2 = false;
+  if (diffResult.updated) {
+    if (diffResult.updated[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[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 必须是一个数组!");
@@ -2115,13 +2163,13 @@ class Editor extends BaseService {
     }
     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 = cloneDeep(toRaw(info.node));
+    const node = toRaw(info.node);
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key) => {
       if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
@@ -2137,7 +2185,11 @@ class Editor extends BaseService {
     if (!newConfig.type) throw new Error("配置缺少type值");
     if (newConfig.type === NodeType.ROOT) {
       this.set("root", newConfig);
-      return newConfig;
+      return {
+        oldNode: node,
+        newNode: newConfig,
+        changeRecords
+      };
     }
     const { parent } = info;
     if (!parent) throw new Error("获取不到父级节点");
@@ -2158,21 +2210,25 @@ class Editor extends BaseService {
       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 !== NodeType.ROOT) {
+    const updateData = await Promise.all(nodes.map((node) => this.doUpdate(node, data)));
+    if (updateData[0].oldNode?.type !== 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]
@@ -2366,7 +2422,7 @@ class Editor extends BaseService {
       parent.items?.splice(index, 1);
       await stage.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
       const layout = await this.getLayout(target);
-      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
+      const newConfig = mergeWith(cloneDeep(node), config, (_objValue, srcValue) => {
         if (Array.isArray(srcValue)) {
           return srcValue;
         }
@@ -2732,6 +2788,7 @@ const HttpFormConfig = [
         name: "params",
         type: "key-value",
         defaultValue: {},
+        advanced: true,
         text: "参数"
       },
       {
@@ -2745,6 +2802,7 @@ const HttpFormConfig = [
         name: "headers",
         type: "key-value",
         defaultValue: {},
+        advanced: true,
         text: "请求头"
       }
     ]
@@ -2799,7 +2857,7 @@ const fillConfig = (config) => [
       },
       {
         title: "请求参数裁剪",
-        display: (formState, { model }) => model.type === "http",
+        display: (_formState, { model }) => model.type === "http",
         items: [
           {
             name: "beforeRequest",
@@ -2811,7 +2869,7 @@ const fillConfig = (config) => [
       },
       {
         title: "响应数据裁剪",
-        display: (formState, { model }) => model.type === "http",
+        display: (_formState, { model }) => model.type === "http",
         items: [
           {
             name: "afterResponse",
@@ -2978,6 +3036,10 @@ globalThis.requestIdleCallback = globalThis.requestIdleCallback || function(cb)
 class IdleTask extends EventEmitter {
   taskList = [];
   taskHandle = null;
+  constructor() {
+    super();
+    this.setMaxListeners(1e3);
+  }
   enqueueTask(taskHandler, taskData) {
     this.taskList.push({
       handler: taskHandler,
@@ -2987,6 +3049,9 @@ class IdleTask extends EventEmitter {
       this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 1e4 });
     }
   }
+  clearTasks() {
+    this.taskList = [];
+  }
   on(eventName, listener) {
     return super.on(eventName, listener);
   }
@@ -2997,9 +3062,27 @@ class IdleTask extends EventEmitter {
     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 });
@@ -3184,10 +3267,10 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
         }))
       )
     );
-    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);
       }
@@ -3280,9 +3363,26 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         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);
@@ -3295,7 +3395,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
             config: selectConfig,
             model: _ctx.model,
             size: _ctx.size,
-            onChange: onParamsChangeHandler
+            onChange: onCodeIdChangeHandler
           }, null, 8, ["model", "size"]),
           _ctx.model[_ctx.name] && hasCodeBlockSidePanel.value ? (openBlock(), createBlock(unref(TMagicButton), {
             key: 0,
@@ -3594,7 +3694,7 @@ const useCodeBlockEdit = (codeBlockService) => {
     }
     codeConfig.value = {
       name: "",
-      content: `({app, params}) => {
+      content: `({app, params, flowState}) => {
   // place your code here
 }`,
       params: []
@@ -3640,78 +3740,6 @@ const useCodeBlockEdit = (codeBlockService) => {
   };
 };
 
-const useDataSourceMethod = () => {
-  const codeConfig = ref();
-  const codeBlockEditor = ref();
-  const dataSource = ref();
-  const dataSourceMethod = ref("");
-  return {
-    codeConfig,
-    codeBlockEditor,
-    createCode: async (model) => {
-      codeConfig.value = {
-        name: "",
-        content: `({ params, dataSource, app }) => {
-  // place your code here
-}`,
-        params: []
-      };
-      await nextTick();
-      dataSource.value = model;
-      dataSourceMethod.value = "";
-      codeBlockEditor.value?.show();
-    },
-    editCode: async (model, methodName) => {
-      const method = model.methods?.find((method2) => method2.name === methodName);
-      if (!method) {
-        tMagicMessage.error("获取数据源方法失败");
-        return;
-      }
-      let codeContent = method.content || `({ params, dataSource, app }) => {
-  // place your code here
-}`;
-      if (typeof codeContent !== "string") {
-        codeContent = codeContent.toString();
-      }
-      codeConfig.value = {
-        ...cloneDeep(method),
-        content: codeContent
-      };
-      await 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 = reactive({
   uiSelectMode: false,
   showSrc: false,
@@ -4198,14 +4226,28 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       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 = [
       {
@@ -4399,9 +4441,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     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) {
         tMagicMessage.error(e.message);
       }
@@ -5185,9 +5226,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         }
       }
     ]);
-    const submitForm = (values) => {
+    const submitForm = (values, data) => {
       changedValue.value = void 0;
-      emit("submit", values);
+      emit("submit", values, data);
     };
     const errorHandler = (error) => {
       tMagicMessage.error(error.message);
@@ -5208,7 +5249,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         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");
@@ -5372,7 +5413,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
+    const codeConfig = ref();
+    const codeBlockEditor = ref();
+    let editIndex = -1;
     const methodColumns = [
       {
         label: "名称",
@@ -5397,16 +5440,29 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         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 = {
+                ...cloneDeep(method),
+                content: codeContent
+              };
+              editIndex = index;
+              nextTick(() => {
+                codeBlockEditor.value?.show();
+              });
             }
           },
           {
             text: "删除",
             buttonType: "danger",
-            handler: (row) => {
-              deleteCode(props.model, row.name);
+            handler: async (row, index) => {
+              await tMagicMessageBox.confirm(`确定删除${row.name}?`, "提示");
+              props.model[props.name].splice(index, 1);
               emit("change", props.model[props.name]);
             }
           }
@@ -5414,12 +5470,48 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       }
     ];
     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;
+      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 openBlock(), createElementBlock("div", _hoisted_1$p, [
@@ -5441,12 +5533,12 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$L, {
+        codeConfig.value ? (openBlock(), createBlock(_sfc_main$L, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
           disabled: _ctx.disabled,
-          content: unref(codeConfig),
+          content: codeConfig.value,
           "is-data-source": true,
           "data-source-type": _ctx.model.type,
           onSubmit: submitCodeHandler
@@ -6044,8 +6136,11 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         }
       ]
     }));
-    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 openBlock(), createBlock(unref(MGroupList), {
@@ -6329,17 +6424,19 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       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 = resolveComponent("m-form-table");
       return openBlock(), createElementBlock("div", _hoisted_1$l, [
@@ -6370,6 +6467,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
               key: index,
               disabled: _ctx.disabled,
               size: _ctx.size,
+              prop: `${_ctx.prop}.${index}`,
               config: actionsConfig.value,
               model: cardItem,
               "label-width": _ctx.config.labelWidth || "100px",
@@ -6382,8 +6480,9 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                   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"]),
                 createVNode(unref(TMagicButton), {
                   style: { "color": "#f56c6c" },
                   link: "",
@@ -6394,7 +6493,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["icon", "disabled", "size", "onClick"])
               ]),
               _: 2
-            }, 1032, ["disabled", "size", "config", "model", "label-width"]);
+            }, 1032, ["disabled", "size", "prop", "config", "model", "label-width"]);
           }), 128))
         ]))
       ]);
@@ -6447,14 +6546,18 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     const records = ref([]);
     const showCode = ref(false);
     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 = {};
@@ -6536,7 +6639,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
           key: 1,
           height: "200px",
           "init-values": _ctx.model[_ctx.name],
-          language: "json",
+          language: "javascript",
           options: {
             readOnly: _ctx.disabled
           },
@@ -7204,7 +7307,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     pageBarSortOptions: {},
     length: {}
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
     const editorService = services?.editorService;
@@ -7234,23 +7337,28 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     });
     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)`;
     };
     watch(
@@ -7258,11 +7366,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       (length = 0, preLength = 0) => {
         setTimeout(() => {
           setCanScroll();
-          if (length < preLength) {
-            scroll("start");
-          } else {
-            scroll("end");
-          }
+          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 = [];
@@ -7299,6 +7409,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
+    __expose({
+      itemsContainerWidth,
+      scroll,
+      scrollTo,
+      getTranslateLeft() {
+        return translateLeft;
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "m-editor-page-bar",
@@ -7306,25 +7424,24 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         ref: pageBar
       }, [
         renderSlot(_ctx.$slots, "prepend"),
-        canScroll.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-          onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
-        }, [
-          createVNode(_sfc_main$Y, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
-        ])) : createCommentVNode("", true),
         _ctx.length ? (openBlock(), createElementBlock("div", {
-          key: 1,
+          key: 0,
           class: "m-editor-page-bar-items",
           ref_key: "itemsContainer",
-          ref: itemsContainer,
-          style: normalizeStyle(`width: ${itemsContainerWidth.value}px`)
+          ref: itemsContainer
         }, [
           renderSlot(_ctx.$slots, "default")
-        ], 4)) : createCommentVNode("", true),
+        ], 512)) : createCommentVNode("", true),
+        canScroll.value ? (openBlock(), 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"))
+        }, [
+          createVNode(_sfc_main$Y, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+        ])) : createCommentVNode("", true),
         canScroll.value ? (openBlock(), 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"))
         }, [
           createVNode(_sfc_main$Y, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
@@ -7352,8 +7469,9 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     const uiService = services?.uiService;
     const editorService = services?.editorService;
     const showPageListButton = computed(() => uiService?.get("showPageListButton"));
-    const switchPage = (id) => {
-      editorService?.select(id);
+    const page = computed(() => editorService?.get("page"));
+    const switchPage = async (id) => {
+      await editorService?.select(id);
     };
     return (_ctx, _cache) => {
       return showPageListButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
@@ -7380,6 +7498,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
                     data: {
                       type: "button",
                       text: item.devconfig?.tabName || item.name || item.id,
+                      className: item.id === page.value?.id ? "active" : "",
                       handler: () => switchPage(item.id)
                     },
                     key: index
@@ -7460,7 +7579,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
 });
 
 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__ */ defineComponent({
@@ -7511,9 +7630,38 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     const remove = (node) => {
       editorService?.remove(node);
     };
+    const pageBarScrollContainer = ref();
+    const pageBarItems = ref();
+    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 openBlock(), createElementBlock("div", _hoisted_1$c, [
         createVNode(_sfc_main$w, {
+          ref_key: "pageBarScrollContainer",
+          ref: pageBarScrollContainer,
           "page-bar-sort-options": _ctx.pageBarSortOptions,
           length: list.value.length
         }, {
@@ -7536,8 +7684,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item) => {
               return openBlock(), createElementBlock("div", {
                 class: 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)
               }, [
                 createElementVNode("div", _hoisted_3$2, [
@@ -7669,7 +7820,6 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const root = computed(() => editorService?.get("root"));
     const page = computed(() => editorService?.get("page"));
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
-    const stageLoading = computed(() => editorService?.get("stageLoading") || false);
     const showSrc = 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;
@@ -7720,7 +7870,6 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      const _directive_loading = resolveDirective("loading");
       return openBlock(), createElementBlock("div", {
         class: "m-editor",
         ref_key: "content",
@@ -7737,9 +7886,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : withDirectives((openBlock(), createBlock(_sfc_main$z, {
+        ]) : (openBlock(), createBlock(_sfc_main$z, {
           key: 1,
-          "element-loading-text": "Runtime 加载中...",
           ref_key: "splitView",
           ref: splitView,
           class: "m-editor-content",
@@ -7799,9 +7947,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["left", "right", "width"])), [
-          [_directive_loading, stageLoading.value]
-        ]),
+        ]), 1032, ["left", "right", "width"])),
         renderSlot(_ctx.$slots, "content-after"),
         renderSlot(_ctx.$slots, "footer")
       ], 512);
@@ -8050,10 +8196,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         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);
       }
@@ -8355,6 +8501,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const services = inject("services");
     const { codeBlockService, depService, editorService } = services || {};
+    const collecting = computed(() => depService?.get("collecting"));
     const codeList = computed(
       () => Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
         const target = depService?.getTarget(codeId, DepTargetType.CODE_BLOCK);
@@ -8454,8 +8601,19 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           }, toDisplayString(data.name) + " " + toDisplayString(data.key ? `(${data.key})` : ""), 3)
         ]),
         "tree-node-tool": withCtx(({ data }) => [
-          data.type === "code" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+          collecting.value && data.type === "code" ? (openBlock(), createBlock(unref(TMagicTag), {
             key: 0,
+            type: "info",
+            size: "small",
+            style: { "margin-right": "5px" }
+          }, {
+            default: withCtx(() => _cache[0] || (_cache[0] = [
+              createTextVNode("依赖收集中")
+            ])),
+            _: 1
+          })) : createCommentVNode("", true),
+          data.type === "code" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 1,
             effect: "dark",
             content: editable.value ? "编辑" : "查看",
             placement: "bottom"
@@ -8470,7 +8628,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1032, ["content"])) : createCommentVNode("", true),
           data.type === "code" && editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
-            key: 1,
+            key: 2,
             effect: "dark",
             content: "删除",
             placement: "bottom"
@@ -8586,9 +8744,9 @@ const useDataSourceEdit = (dataSourceService) => {
     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);
     }
@@ -8635,8 +8793,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       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) => {
       tMagicMessage.error(error.message);
@@ -8692,6 +8850,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
     const { depService, editorService, dataSourceService } = inject("services") || {};
+    const collecting = computed(() => depService?.get("collecting"));
     const editable = computed(() => dataSourceService?.get("editable") ?? true);
     const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
     const dsDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) || {});
@@ -8797,8 +8956,19 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           }, toDisplayString(data.name) + " " + toDisplayString(data.key ? `(${data.key})` : ""), 3)
         ]),
         "tree-node-tool": withCtx(({ data }) => [
-          data.type === "ds" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+          collecting.value && data.type === "ds" ? (openBlock(), createBlock(unref(TMagicTag), {
             key: 0,
+            type: "info",
+            size: "small",
+            style: { "margin-right": "5px" }
+          }, {
+            default: withCtx(() => _cache[0] || (_cache[0] = [
+              createTextVNode("依赖收集中")
+            ])),
+            _: 1
+          })) : createCommentVNode("", true),
+          data.type === "ds" ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 1,
             effect: "dark",
             content: editable.value ? "编辑" : "查看",
             placement: "bottom"
@@ -8813,7 +8983,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1032, ["content"])) : createCommentVNode("", true),
           data.type === "ds" && editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
-            key: 1,
+            key: 2,
             effect: "dark",
             content: "删除",
             placement: "bottom"
@@ -10079,6 +10249,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
+    const collecting = computed(() => services?.depService.get("collecting"));
     const columnLeftWidth = computed(() => services?.uiService.get("columnWidth")[ColumnLayout.LEFT] || 0);
     const { height: editorContentHeight } = useEditorContentHeight();
     const columnLeftHeight = ref(0);
@@ -10221,7 +10392,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           ]),
           (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
             return withDirectives((openBlock(), createElementBlock("div", {
-              class: "m-editor-sidebar-content",
+              class: normalizeClass(["m-editor-sidebar-content", { "m-editor-dep-collecting": collecting.value }]),
               key: config.$key ?? index
             }, [
               config?.component && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
@@ -10347,7 +10518,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   key: "11"
                 } : void 0
               ]), 1040)) : createCommentVNode("", true)
-            ])), [
+            ], 2)), [
               [vShow, [config.text, config.$key, `${index}`].includes(activeTabName.value)]
             ]);
           }), 128))
@@ -10928,15 +11099,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   },
   __name: "Stage",
   props: {
+    stageOptions: {},
     stageContentMenu: {},
     disabledStageOverlay: { type: Boolean, default: false },
     customContentMenu: {}
   },
   setup(__props) {
+    const props = __props;
     let stage = null;
     let runtime = null;
     const services = inject("services");
-    const stageOptions = inject("stageOptions");
+    const stageLoading = computed(() => services?.editorService.get("stageLoading") || false);
     const stageWrap = ref();
     const stageContainer = ref();
     const menu = ref();
@@ -10951,8 +11124,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     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();
       });
@@ -10972,6 +11145,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     });
     onBeforeUnmount(() => {
       stage?.destroy();
+      services?.editorService.set("stage", null);
     });
     watch(zoom, (zoom2) => {
       if (!stage || !zoom2) return;
@@ -11039,7 +11213,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       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 = getIdFromEl()(parentEl);
       if (parentId) {
@@ -11078,11 +11254,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$8, {
+      const _directive_loading = resolveDirective("loading");
+      return withDirectives((openBlock(), 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,
@@ -11119,7 +11297,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           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]
+      ]);
     };
   }
 });
@@ -11181,18 +11361,20 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     customContentMenu: {}
   },
   setup(__props) {
+    const stageOptions = inject("stageOptions");
     const services = inject("services");
     const page = computed(() => services?.editorService.get("page"));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(_sfc_main$2),
         renderSlot(_ctx.$slots, "stage", {}, () => [
-          page.value ? (openBlock(), createBlock(_sfc_main$3, {
+          page.value && (unref(stageOptions)?.render || unref(stageOptions)?.runtimeUrl) ? (openBlock(), createBlock(_sfc_main$3, {
             key: 0,
+            "stage-options": 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"])) : createCommentVNode("", true)
+          }, null, 8, ["stage-options", "disabled-stage-overlay", "stage-content-menu", "custom-content-menu"])) : createCommentVNode("", true)
         ]),
         renderSlot(_ctx.$slots, "workspace-content")
       ]);
@@ -11542,12 +11724,17 @@ class DataSource extends BaseService {
     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] = cloneDeep(config);
-    this.emit("update", config);
-    return config;
+    const oldConfig = dataSources[index];
+    const newConfig = cloneDeep(config);
+    dataSources[index] = newConfig;
+    this.emit("update", newConfig, {
+      oldConfig,
+      changeRecords
+    });
+    return newConfig;
   }
   remove(id) {
     const dataSources = this.get("dataSources");
@@ -11623,7 +11810,16 @@ const dataSourceService = new DataSource();
 
 const idleTask = new IdleTask();
 class Dep extends BaseService {
+  state = reactive({
+    collecting: false
+  });
   watcher = new Watcher({ initialTargets: reactive({}) });
+  set(name, value) {
+    this.state[name] = value;
+  }
+  get(name) {
+    return this.state[name];
+  }
   removeTargets(type = DepTargetType.DEFAULT) {
     this.watcher.removeTargets(type);
     const targets = this.watcher.getTargets(type);
@@ -11650,34 +11846,30 @@ class Dep extends BaseService {
     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();
       });
     });
@@ -11706,6 +11898,9 @@ class Dep extends BaseService {
   hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {
     return this.watcher.hasSpecifiedTypeTarget(type);
   }
+  clearIdleTasks() {
+    idleTask.clearTasks();
+  }
   on(eventName, listener) {
     return super.on(eventName, listener);
   }
@@ -11715,6 +11910,23 @@ class Dep extends BaseService {
   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();
 
@@ -12288,6 +12500,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       initDataSourceDepTarget(ds);
     });
     if (Array.isArray(value.items)) {
+      depService.clearIdleTasks();
       collectIdle(value.items, true);
     } else {
       depService.clear();
@@ -12312,10 +12525,20 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       emit("update:modelValue", value);
     }
   };
-  const getApp = () => {
-    const stage = editorService.get("stage");
-    return stage?.renderer?.runtime?.getApp?.();
-  };
+  const stage = computed(() => editorService.get("stage"));
+  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();
@@ -12327,8 +12550,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     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) => {
@@ -12345,7 +12567,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     deps.forEach((dep) => {
       Object.keys(dep).forEach((id) => {
         const node = allNodes.find((node2) => node2.id === id);
-        node && stage.update({
+        node && stage.value?.update({
           config: cloneDeep(node),
           parentId: editorService.getParentById(node.id)?.id,
           root: cloneDeep(root)
@@ -12356,13 +12578,8 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   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: cloneDeep(node),
         parentId: editorService.getParentById(node.id)?.id,
         root: cloneDeep(root)
@@ -12395,8 +12612,17 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       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(createDataSourceTarget(ds, reactive({})));
     depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
@@ -12419,10 +12645,31 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       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(`${NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) || new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) || record.propPath === NODE_CONDS_KEY || 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);
@@ -12453,13 +12700,30 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     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, DepTargetType.DATA_SOURCE);
@@ -12481,6 +12745,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   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);
@@ -12753,4 +13018,4 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$L as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$U as CodeSelect, _sfc_main$S as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$R as CondOpSelect, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$N as DataSourceFieldSelect, _sfc_main$P as DataSourceFields, _sfc_main$M as DataSourceInput, _sfc_main$J as DataSourceMethodSelect, _sfc_main$K as DataSourceMethods, _sfc_main$I as DataSourceMocks, _sfc_main$H as DataSourceSelect, _sfc_main$G as DisplayConds, DragType, _sfc_main$F as EventSelect, Fixed2Other, _sfc_main$Q as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Y as Icon, IdleTask, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$A as Resizer, ScrollViewer, SideItemKey, _sfc_main$z as SplitView, _sfc_main$X as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, _sfc_main$m as Tree, _sfc_main$n as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useDataSourceMethod, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$L as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$U as CodeSelect, _sfc_main$S as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$R as CondOpSelect, _sfc_main$g as ContentMenu, _sfc_main$j as DataSourceConfigPanel, _sfc_main$N as DataSourceFieldSelect, _sfc_main$P as DataSourceFields, _sfc_main$M as DataSourceInput, _sfc_main$J as DataSourceMethodSelect, _sfc_main$K as DataSourceMethods, _sfc_main$I as DataSourceMocks, _sfc_main$H as DataSourceSelect, _sfc_main$G as DisplayConds, DragType, _sfc_main$F as EventSelect, Fixed2Other, _sfc_main$Q as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Y as Icon, IdleTask, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$p as PropsPanel, _sfc_main$A as Resizer, ScrollViewer, SideItemKey, _sfc_main$z as SplitView, _sfc_main$X as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, _sfc_main$m as Tree, _sfc_main$n as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };