@tmagic/editor 1.5.13 → 1.5.14

package/src/fields/CodeSelectCol.vue

@@ -121,24 +121,28 @@ const selectConfig = {
     }
     return [];
   },
-  onChange: (formState: any, codeId: Id, { model }: any) => {
+  onChange: (formState: any, codeId: Id, { setModel, model }: any) => {
     // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
     paramsConfig.value = getParamItemsConfig(codeId);
 
     if (paramsConfig.value.length) {
-      model.params = createValues(formState, paramsConfig.value, {}, model.params);
+      setModel('params', createValues(formState, paramsConfig.value, {}, model.params));
     } else {
-      model.params = {};
+      setModel('params', {});
     }
 
     return codeId;
   },
 };
 
-const onCodeIdChangeHandler = (value: any) => {
+const onCodeIdChangeHandler = (value: any, eventData: ContainerChangeEventData) => {
   props.model.params = value.params;
+
   emit('change', props.model, {
-    changeRecords: [
+    changeRecords: eventData.changeRecords?.map((item) => ({
+      prop: `${props.prop.replace(props.name, '')}${item.propPath}`,
+      value: item.value,
+    })) || [
       {
         propPath: props.prop,
         value: value[props.name],

package/src/fields/DataSourceFields.vue

@@ -65,6 +65,7 @@ import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks';
 import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
 import { useServices } from '@editor/hooks/use-services';
+import { error } from '@editor/utils/logger';
 
 defineOptions({
   name: 'MFieldsDataSourceFields',
@@ -144,6 +145,7 @@ const fieldColumns: ColumnConfig[] = [
       try {
         return JSON.stringify(row.defaultValue);
       } catch (e) {
+        error(e);
         return row.defaultValue;
       }
     },
@@ -193,9 +195,9 @@ const dataSourceFieldsConfig: FormConfig = [
       { text: 'null', value: 'null' },
       { text: 'any', value: 'any' },
     ],
-    onChange: (formState, v: string, { model }) => {
+    onChange: (_formState, v: string, { setModel }) => {
       if (!['any', 'array', 'object'].includes(v)) {
-        model.fields = [];
+        setModel('fields', []);
       }
       return v;
     },

package/src/fields/DataSourceInput.vue

@@ -179,7 +179,11 @@ const curCharIsDot = (dotIndex: number) => dotIndex > -1 && dotIndex === getSele
  * @param leftCurlyBracketIndex 左大括号字符索引
  * @param cb 建议的方法
  */
-const dsQuerySearch = (queryString: string, leftCurlyBracketIndex: number, cb: (data: { value: string }[]) => void) => {
+const dsQuerySearch = (
+  queryString: string,
+  leftCurlyBracketIndex: number,
+  cb: (_data: { value: string }[]) => void,
+) => {
   let result: DataSourceSchema[] = [];
 
   if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
@@ -211,7 +215,7 @@ const fieldQuerySearch = (
   queryString: string,
   leftAngleIndex: number,
   dotIndex: number,
-  cb: (data: { value: string }[]) => void,
+  cb: (_data: { value: string }[]) => void,
 ) => {
   let result: DataSchema[] = [];
 
@@ -272,7 +276,7 @@ const fieldQuerySearch = (
  * @param queryString 当前输入框内的字符串
  * @param cb 建议回调
  */
-const querySearch = (queryString: string, cb: (data: { value: string }[]) => void) => {
+const querySearch = (queryString: string, cb: (_data: { value: string }[]) => void) => {
   inputText = queryString;
 
   const selectionStart = getSelectionStart();

package/src/fields/DataSourceMethodSelect.vue

@@ -37,7 +37,14 @@ import { Edit, View } from '@element-plus/icons-vue';
 
 import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
+import {
+  createValues,
+  type FieldProps,
+  filterFunction,
+  type FormState,
+  MContainer,
+  type OnChangeHandlerData,
+} from '@tmagic/form';
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
@@ -92,14 +99,18 @@ const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']
 
 const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[props.name || 'dataSourceMethod']));
 
-const setParamsConfig = (dataSourceMethod: [Id, string], formState: any = {}) => {
+const setParamsConfig = (
+  dataSourceMethod: [Id, string],
+  formState: any = {},
+  setModel: OnChangeHandlerData['setModel'],
+) => {
   // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
   paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
 
   if (paramsConfig.value.length) {
-    props.model.params = createValues(formState, paramsConfig.value, {}, props.model.params);
+    setModel('params', createValues(formState, paramsConfig.value, {}, props.model.params));
   } else {
-    props.model.params = {};
+    setModel('params', {});
   }
 };
 
@@ -125,8 +136,8 @@ const cascaderConfig = computed(() => ({
   name: props.name,
   options: methodsOptions.value,
   disable: props.disabled,
-  onChange: (formState: any, dataSourceMethod: [Id, string]) => {
-    setParamsConfig(dataSourceMethod, formState);
+  onChange: (formState: any, dataSourceMethod: [Id, string], { setModel }: OnChangeHandlerData) => {
+    setParamsConfig(dataSourceMethod, formState, setModel);
 
     return dataSourceMethod;
   },

package/src/fields/DataSourceMethods.vue

@@ -80,7 +80,7 @@ const methodColumns: ColumnConfig[] = [
       {
         text: '编辑',
         handler: (method: CodeBlockContent, index: number) => {
-          let codeContent = method.content || `({ params, dataSource, app }) => {\n  // place your code here\n}`;
+          let codeContent = method.content || '({ params, dataSource, app }) => {\n  // place your code here\n}';
 
           if (typeof codeContent !== 'string') {
             codeContent = codeContent.toString();
@@ -114,7 +114,7 @@ const methodColumns: ColumnConfig[] = [
 const createCodeHandler = () => {
   codeConfig.value = {
     name: '',
-    content: `({ params, dataSource, app, flowState }) => {\n  // place your code here\n}`,
+    content: '({ params, dataSource, app, flowState }) => {\n  // place your code here\n}',
     params: [],
   };
 
@@ -130,7 +130,7 @@ const submitCodeHandler = (value: CodeBlockContent, data: ContainerChangeEventDa
     // 在保存的时候转换代码内容
     const parseDSL = getEditorConfig('parseDSL');
     if (typeof value.content === 'string') {
-      value.content = parseDSL<(...args: any[]) => any>(value.content);
+      value.content = parseDSL<(..._args: any[]) => any>(value.content);
     }
   }
   if (editIndex > -1) {

package/src/fields/EventSelect.vue

@@ -63,6 +63,7 @@ import type {
   ContainerChangeEventData,
   FieldProps,
   FormState,
+  OnChangeHandlerData,
   PanelConfig,
 } from '@tmagic/form';
 import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
@@ -202,8 +203,8 @@ const targetCompConfig = computed(() => {
     text: '联动组件',
     type: 'ui-select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
-    onChange: (MForm: FormState, v: string, { model }: any) => {
-      model.method = '';
+    onChange: (MForm: FormState, v: string, { setModel }: OnChangeHandlerData) => {
+      setModel('method', '');
       return v;
     },
   };

package/src/fields/UISelect.vue

@@ -70,7 +70,7 @@ const uiSelectMode = ref(false);
 const cancelHandler = () => {
   uiService.set('uiSelectMode', false);
   uiSelectMode.value = false;
-  globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
+  globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as any);
 };
 
 const clickHandler = ({ detail }: Event & { detail: HTMLElement | MNode }) => {
@@ -97,7 +97,7 @@ const toName = computed(() => {
 const startSelect = () => {
   uiService.set('uiSelectMode', true);
   uiSelectMode.value = true;
-  globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
+  globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as any);
 };
 
 const deleteHandler = () => {

package/src/hooks/use-code-block-edit.ts

@@ -16,7 +16,7 @@ export const useCodeBlockEdit = (codeBlockService: Services['codeBlockService'])
   const createCodeBlock = async () => {
     codeConfig.value = {
       name: '',
-      content: `({app, params, flowState}) => {\n  // place your code here\n}`,
+      content: '({app, params, flowState}) => {\n  // place your code here\n}',
       params: [],
     };
 

package/src/index.ts

@@ -122,7 +122,6 @@ export default {
     app.use(formPlugin, opt || {});
     app.use(tablePlugin);
 
-    // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setEditorConfig(option);
 

package/src/initService.ts

@@ -269,13 +269,13 @@ export const initServiceEvents = (
     }
   };
 
-  const dsDepCollectedHandler = async () => {
+  const dsDepCollectedHandler = () => {
     const root = editorService.get('root');
-    const app = await getTMagicApp();
-
-    if (root && app?.dsl) {
-      app.dsl.dataSourceDeps = root.dataSourceDeps;
-    }
+    getTMagicApp()?.then((app?: TMagicCore) => {
+      if (root && app?.dsl) {
+        app.dsl.dataSourceDeps = root.dataSourceDeps;
+      }
+    });
   };
 
   const collectIdle = (nodes: MComponent[], deep: boolean, type?: DepTargetType) =>
@@ -317,7 +317,7 @@ export const initServiceEvents = (
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
 
-  const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {
+  const rootChangeHandler = (value: MApp | null, preValue?: MApp | null) => {
     if (!value) return;
 
     value.codeBlocks = value.codeBlocks || {};
@@ -347,39 +347,40 @@ export const initServiceEvents = (
       delete value.dataSourceCondDeps;
     }
 
-    const nodeId = editorService.get('node')?.id || props.defaultSelected;
-    let node;
-    if (nodeId) {
-      node = editorService.getNodeById(nodeId);
-    }
+    const handler = async () => {
+      const nodeId = editorService.get('node')?.id || props.defaultSelected;
+      let node;
+      if (nodeId) {
+        node = editorService.getNodeById(nodeId);
+      }
+      if (node && node !== value) {
+        await editorService.select(node.id);
+      } else if (value.items?.length) {
+        await editorService.select(value.items[0]);
+      } else if (value.id) {
+        editorService.set('nodes', [value]);
+        editorService.set('parent', null);
+        editorService.set('page', null);
+      }
 
-    if (node && node !== value) {
-      await editorService.select(node.id);
-    } else if (value.items?.length) {
-      await editorService.select(value.items[0]);
-    } else if (value.id) {
-      editorService.set('nodes', [value]);
-      editorService.set('parent', null);
-      editorService.set('page', null);
-    }
+      if (toRaw(value) !== toRaw(preValue)) {
+        emit('update:modelValue', value);
+      }
+    };
 
-    if (toRaw(value) !== toRaw(preValue)) {
-      emit('update:modelValue', value);
-    }
+    handler();
   };
 
   // 新增节点，收集依赖
-  const nodeAddHandler = async (nodes: MComponent[]) => {
-    await collectIdle(nodes, true);
-
-    updateStageNodes(nodes);
+  const nodeAddHandler = (nodes: MComponent[]) => {
+    collectIdle(nodes, true).then(() => {
+      updateStageNodes(nodes);
+    });
   };
 
   // 节点更新，收集依赖
   // 仅当修改到数据源相关的才收集
-  const nodeUpdateHandler = async (
-    data: { newNode: MComponent; oldNode: MComponent; changeRecords?: ChangeRecord[] }[],
-  ) => {
+  const nodeUpdateHandler = (data: { newNode: MComponent; oldNode: MComponent; changeRecords?: ChangeRecord[] }[]) => {
     const needRecollectNodes: MComponent[] = [];
     const normalNodes: MComponent[] = [];
     for (const { newNode, oldNode, changeRecords } of data) {
@@ -424,9 +425,12 @@ export const initServiceEvents = (
 
     if (needRecollectNodes.length) {
       // 有数据源依赖，需要等依赖重新收集完才更新stage
-      await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE);
-      await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND);
-      updateStageNodes(needRecollectNodes);
+      const handler = async () => {
+        await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE);
+        await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND);
+        updateStageNodes(needRecollectNodes);
+      };
+      handler();
     } else {
       updateStageNodes(normalNodes);
       // 在上面判断是否需要收集数据源依赖中已经更新stage
@@ -443,9 +447,10 @@ export const initServiceEvents = (
   };
 
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
-  const historyChangeHandler = async (page: MPage | MPageFragment) => {
-    await collectIdle([page], true);
-    updateStageNode(page);
+  const historyChangeHandler = (page: MPage | MPageFragment) => {
+    collectIdle([page], true).then(() => {
+      updateStageNode(page);
+    });
   };
 
   editorService.on('history-change', historyChangeHandler);
@@ -454,27 +459,28 @@ export const initServiceEvents = (
   editorService.on('remove', nodeRemoveHandler);
   editorService.on('update', nodeUpdateHandler);
 
-  const dataSourceAddHandler = async (config: DataSourceSchema) => {
-    initDataSourceDepTarget(config);
-    const app = await getTMagicApp();
+  const dataSourceAddHandler = (config: DataSourceSchema) => {
+    const handler = async () => {
+      initDataSourceDepTarget(config);
+      const app = await getTMagicApp();
 
-    if (!app?.dataSourceManager) {
-      return;
-    }
+      if (!app?.dataSourceManager) {
+        return;
+      }
 
-    app.dataSourceManager.addDataSource(config);
+      app.dataSourceManager.addDataSource(config);
 
-    const newDs = app.dataSourceManager.get(config.id);
+      const newDs = app.dataSourceManager.get(config.id);
 
-    if (newDs) {
-      app.dataSourceManager.init(newDs);
-    }
+      if (newDs) {
+        app.dataSourceManager.init(newDs);
+      }
+    };
+
+    handler();
   };
 
-  const dataSourceUpdateHandler = async (
-    config: DataSourceSchema,
-    { changeRecords }: { changeRecords: ChangeRecord[] },
-  ) => {
+  const dataSourceUpdateHandler = (config: DataSourceSchema, { changeRecords }: { changeRecords: ChangeRecord[] }) => {
     const updateDsData = async () => {
       const app = await getTMagicApp();
 
@@ -565,29 +571,33 @@ export const initServiceEvents = (
     depService.removeTarget(id, DepTargetType.DATA_SOURCE_METHOD);
   };
 
-  const dataSourceRemoveHandler = async (id: string) => {
+  const dataSourceRemoveHandler = (id: string) => {
     const root = editorService.get('root');
 
     if (!root) {
       return;
     }
 
-    const nodeIds = Object.keys(root.dataSourceDeps?.[id] || {});
-    const nodes = getNodes(nodeIds, root.items);
+    const handler = async () => {
+      const nodeIds = Object.keys(root.dataSourceDeps?.[id] || {});
+      const nodes = getNodes(nodeIds, root.items);
 
-    await Promise.all([
-      collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
-      collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
-      collectIdle(nodes, false, DepTargetType.DATA_SOURCE_METHOD),
-    ]);
+      await Promise.all([
+        collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
+        collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
+        collectIdle(nodes, false, DepTargetType.DATA_SOURCE_METHOD),
+      ]);
 
-    updateDataSourceSchema();
+      updateDataSourceSchema();
 
-    const app = await getTMagicApp();
-    app?.dataSourceManager?.removeDataSource(id);
+      const app = await getTMagicApp();
+      app?.dataSourceManager?.removeDataSource(id);
+
+      updateStageNodes(nodes);
+      removeDataSourceTarget(id);
+    };
 
-    updateStageNodes(nodes);
-    removeDataSourceTarget(id);
+    handler();
   };
 
   dataSourceService.on('add', dataSourceAddHandler);

package/src/layouts/Framework.vue

@@ -91,7 +91,7 @@ defineOptions({
 defineProps<{
   disabledPageFragment: boolean;
   pageBarSortOptions?: PageBarSortOptions;
-  pageFilterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
+  pageFilterFunction?: (_page: MPage | MPageFragment, _keyword: string) => boolean;
 }>();
 
 const codeOptions = inject('codeOptions', {});

package/src/layouts/NavMenu.vue

@@ -69,7 +69,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
         type: 'button',
         className: 'delete',
         icon: markRaw(Delete),
-        tooltip: `刪除(Delete)`,
+        tooltip: '刪除(Delete)',
         disabled: () => editorService.get('node')?.type === NodeType.PAGE,
         handler: () => {
           const node = editorService.get('node');

package/src/layouts/page-bar/PageBar.vue

@@ -91,7 +91,7 @@ const props = withDefaults(
   defineProps<{
     disabledPageFragment: boolean;
     pageBarSortOptions?: PageBarSortOptions;
-    filterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
+    filterFunction?: (_page: MPage | MPageFragment, _keyword: string) => boolean;
   }>(),
   {
     filterFunction: (page, keyword) => page.name?.includes(keyword) || `${page.id}`.includes(keyword),

package/src/layouts/props-panel/FormPanel.vue

@@ -56,7 +56,7 @@ import { useServices } from '@editor/hooks/use-services';
 import CodeEditor from '../CodeEditor.vue';
 
 defineSlots<{
-  'props-form-panel-header'(props: {}): any;
+  'props-form-panel-header'(_props: {}): any;
 }>();
 
 defineOptions({
@@ -70,7 +70,7 @@ const props = defineProps<{
   labelWidth?: string;
   codeValueKey?: string;
   labelPosition?: string;
-  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
 const emit = defineEmits<{

package/src/layouts/props-panel/PropsPanel.vue

@@ -82,7 +82,7 @@ defineOptions({
 
 defineProps<{
   disabledShowSrc?: boolean;
-  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
 const emit = defineEmits<{

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -80,7 +80,7 @@ const collapseValue = computed(() =>
     .map((x, i) => `${i}`),
 );
 
-let timeout: NodeJS.Timeout | undefined;
+let timeout: ReturnType<typeof setTimeout> | undefined;
 let clientX: number;
 let clientY: number;
 

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -55,7 +55,7 @@ defineOptions({
 const props = defineProps<{
   indent?: number;
   nextLevelIndentIncrement?: number;
-  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+  customError?: (_id: Id, _errorType: CodeDeleteErrorType) => any;
 }>();
 
 const emit = defineEmits<{

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -33,7 +33,6 @@
     :content="codeConfig"
     @submit="submitCodeBlockHandler"
     @close="editDialogCloseHandler"
-    @open="editDialogOpenHandler"
   ></CodeBlockEditor>
 
   <Teleport to="body">
@@ -48,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useTemplateRef } from 'vue';
+import { computed, inject, useTemplateRef, watch } from 'vue';
 
 import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
@@ -79,7 +78,7 @@ defineOptions({
 const props = defineProps<{
   indent?: number;
   nextLevelIndentIncrement?: number;
-  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+  customError?: (_id: Id, _errorType: CodeDeleteErrorType) => any;
   customContentMenu: CustomContentMenuFunction;
 }>();
 
@@ -102,13 +101,13 @@ eventBus?.on('edit-code', (id: string) => {
   editCode(id);
 });
 
-const editDialogOpenHandler = () => {
+watch(codeId, () => {
   if (codeBlockListRef.value) {
     for (const [statusId, status] of codeBlockListRef.value.nodeStatusMap.entries()) {
       status.selected = statusId === codeId.value;
     }
   }
-};
+});
 
 const editDialogCloseHandler = () => {
   if (codeBlockListRef.value) {

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -46,7 +46,6 @@
     :title="dialogTitle"
     @submit="submitDataSourceHandler"
     @close="editDialogCloseHandler"
-    @open="editDialogOpenHandler"
   ></DataSourceConfigPanel>
 
   <Teleport to="body">
@@ -61,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, useTemplateRef, watch } from 'vue';
 import { mergeWith } from 'lodash-es';
 
 import { TMagicButton, tMagicMessageBox, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
@@ -95,21 +94,21 @@ const { dataSourceService } = useServices();
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
   useDataSourceEdit(dataSourceService);
 
-const editDialogOpenHandler = (id: string) => {
-  if (dataSourceList.value) {
-    for (const [statusId, status] of dataSourceList.value.nodeStatusMap.entries()) {
-      status.selected = statusId === id;
+const editDialogCloseHandler = () => {
+  if (dataSourceListRef.value) {
+    for (const [, status] of dataSourceListRef.value.nodeStatusMap.entries()) {
+      status.selected = false;
     }
   }
 };
 
-const editDialogCloseHandler = () => {
-  if (dataSourceList.value) {
-    for (const [, status] of dataSourceList.value.nodeStatusMap.entries()) {
-      status.selected = false;
+watch(dataSourceValues, (dataSourceValues) => {
+  if (dataSourceListRef.value && dataSourceValues.id) {
+    for (const [statusId, status] of dataSourceListRef.value.nodeStatusMap.entries()) {
+      status.selected = statusId === dataSourceValues.id;
     }
   }
-};
+});
 
 const datasourceTypeList = computed(() =>
   [
@@ -148,10 +147,10 @@ const removeHandler = async (id: string) => {
   dataSourceService.remove(id);
 };
 
-const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
+const dataSourceListRef = useTemplateRef<InstanceType<typeof DataSourceList>>('dataSourceList');
 
 const filterTextChangeHandler = (val: string) => {
-  dataSourceList.value?.filter(val);
+  dataSourceListRef.value?.filter(val);
 };
 
 eventBus?.on('edit-data-source', (id: string) => {

package/src/layouts/workspace/viewer/Stage.vue

@@ -149,7 +149,7 @@ watch(zoom, (zoom) => {
   stage.setZoom(zoom);
 });
 
-let timeoutId: NodeJS.Timeout | null = null;
+let timeoutId: ReturnType<typeof setTimeout> | null = null;
 watch(page, (page) => {
   if (runtime && page) {
     editorService.set('stageLoading', true);

package/src/services/BaseService.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *

package/src/services/editor.ts

@@ -1088,10 +1088,11 @@ class Editor extends BaseService {
     this.isHistoryStateChange = true;
     await this.update(value.data);
     this.set('modifiedNodeIds', value.modifiedNodeIds);
-    setTimeout(async () => {
+    setTimeout(() => {
       if (!value.nodeId) return;
-      await this.select(value.nodeId);
-      this.get('stage')?.select(value.nodeId);
+      this.select(value.nodeId).then(() => {
+        this.get('stage')?.select(value.nodeId);
+      });
     }, 0);
     this.emit('history-change', value.data);
   }