@tmagic/editor 1.5.16 → 1.5.17

package/src/fields/Code.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { FieldProps, FormItem } from '@tmagic/form';
+import type { CodeConfig, FieldProps } from '@tmagic/form';
 
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
@@ -25,23 +25,9 @@ const emit = defineEmits<{
   change: [value: string | any];
 }>();
 
-withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        language?: string;
-        options?: {
-          [key: string]: any;
-        };
-        height?: string;
-        parse?: boolean;
-      } & FormItem
-    >
-  >(),
-  {
-    disabled: false,
-  },
-);
+withDefaults(defineProps<FieldProps<CodeConfig>>(), {
+  disabled: false,
+});
 
 const save = (v: string | any) => {
   emit('change', v);

package/src/fields/CodeLink.vue

@@ -6,7 +6,7 @@
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
-import type { FieldProps, FormItem } from '@tmagic/form';
+import type { CodeLinkConfig, FieldProps } from '@tmagic/form';
 
 import { getEditorConfig } from '@editor/utils/config';
 
@@ -14,15 +14,7 @@ defineOptions({
   name: 'MFieldsCodeLink',
 });
 
-const props = defineProps<
-  FieldProps<
-    {
-      type: 'code-link';
-      formTitle?: string;
-      codeOptions?: Object;
-    } & FormItem
-  >
->();
+const props = defineProps<FieldProps<CodeLinkConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/CodeSelect.vue

@@ -21,7 +21,7 @@ import { isEmpty } from 'lodash-es';
 
 import { HookCodeType, HookType } from '@tmagic/core';
 import { TMagicCard } from '@tmagic/design';
-import type { ContainerChangeEventData, FieldProps, FormItem, GroupListConfig } from '@tmagic/form';
+import type { CodeSelectConfig, ContainerChangeEventData, FieldProps, GroupListConfig } from '@tmagic/form';
 import { MContainer } from '@tmagic/form';
 
 import { useServices } from '@editor/hooks/use-services';
@@ -36,16 +36,7 @@ const emit = defineEmits<{
 
 const { dataSourceService, codeBlockService } = useServices();
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        className?: string;
-      } & FormItem
-    >
-  >(),
-  {},
-);
+const props = withDefaults(defineProps<FieldProps<CodeSelectConfig>>(), {});
 
 const codeConfig = computed<GroupListConfig>(() => ({
   type: 'group-list',

package/src/fields/CodeSelectCol.vue

@@ -42,6 +42,7 @@ import { isEmpty, map } from 'lodash-es';
 import type { Id } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import {
+  type CodeSelectColConfig,
   type ContainerChangeEventData,
   createValues,
   type FieldProps,
@@ -53,7 +54,7 @@ import {
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { CodeParamStatement, CodeSelectColConfig, EventBus } from '@editor/type';
+import type { CodeParamStatement, EventBus } from '@editor/type';
 import { SideItemKey } from '@editor/type';
 
 defineOptions({

package/src/fields/CondOpSelect.vue

@@ -30,10 +30,9 @@
 import { computed } from 'vue';
 
 import { getDesignConfig, TMagicSelect } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { CondOpSelectConfig, FieldProps } from '@tmagic/form';
 
 import { useServices } from '@editor/hooks/use-services';
-import type { CondOpSelectConfig } from '@editor/type';
 import { arrayOptions, eqOptions, numberOptions } from '@editor/utils';
 
 defineOptions({

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -44,12 +44,11 @@ import { Coin } from '@element-plus/icons-vue';
 
 import { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
-import type { ContainerChangeEventData, FieldProps, FormState } from '@tmagic/form';
+import type { ContainerChangeEventData, DataSourceFieldSelectConfig, FieldProps, FormState } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { DataSourceFieldSelectConfig } from '@editor/type';
 import { removeDataSourceFieldPrefix } from '@editor/utils';
 
 import FieldSelect from './FieldSelect.vue';

package/src/fields/DataSourceFields.vue

@@ -53,6 +53,7 @@ import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import {
   type ContainerChangeEventData,
+  type DataSourceFieldsConfig,
   type FieldProps,
   type FormConfig,
   type FormState,
@@ -71,16 +72,9 @@ defineOptions({
   name: 'MFieldsDataSourceFields',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-fields';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceFieldsConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits<{
   change: [v: any, eventData?: ContainerChangeEventData];

package/src/fields/DataSourceInput.vue

@@ -53,7 +53,7 @@ import { Coin } from '@element-plus/icons-vue';
 
 import type { DataSchema, DataSourceSchema } from '@tmagic/core';
 import { getDesignConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
+import type { DataSourceInputConfig, FieldProps } from '@tmagic/form';
 import { getKeysArray, isNumber } from '@tmagic/utils';
 
 import Icon from '@editor/components/Icon.vue';
@@ -64,18 +64,9 @@ defineOptions({
   name: 'MFieldsDataSourceInput',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        type: 'data-source-input';
-      } & FormItem
-    >
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceInputConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits<{
   change: [value: string];

package/src/fields/DataSourceMethodSelect.vue

@@ -39,6 +39,7 @@ import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import {
   createValues,
+  type DataSourceMethodSelectConfig,
   type FieldProps,
   filterFunction,
   type FormState,
@@ -49,7 +50,7 @@ import {
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { CodeParamStatement, DataSourceMethodSelectConfig, EventBus } from '@editor/type';
+import type { CodeParamStatement, EventBus } from '@editor/type';
 import { SideItemKey } from '@editor/type';
 
 defineOptions({

package/src/fields/DataSourceMethods.vue

@@ -26,7 +26,7 @@ import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import type { ContainerChangeEventData, FieldProps } from '@tmagic/form';
+import type { ContainerChangeEventData, DataSourceMethodsConfig, FieldProps } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -37,16 +37,9 @@ defineOptions({
   name: 'MFieldsDataSourceMethods',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-methods';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceMethodsConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits(['change']);
 

package/src/fields/DataSourceMocks.vue

@@ -32,7 +32,7 @@ import { inject, Ref, ref } from 'vue';
 
 import type { MockSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
+import { type DataSourceMocksConfig, type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
@@ -47,16 +47,9 @@ defineOptions({
   name: 'MFieldsDataSourceMocks',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-mocks';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceMocksConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits(['change']);
 

package/src/fields/DataSourceSelect.vue

@@ -24,11 +24,18 @@ import { computed, inject } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
+import {
+  type DataSourceSelect,
+  type FieldProps,
+  filterFunction,
+  type FormState,
+  MSelect,
+  type SelectConfig,
+} from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { DataSourceSelect, EventBus } from '@editor/type';
+import type { EventBus } from '@editor/type';
 import { SideItemKey } from '@editor/type';
 
 defineOptions({

package/src/fields/DisplayConds.vue

@@ -18,8 +18,8 @@ import { computed, inject } from 'vue';
 import type { DisplayCond } from '@tmagic/core';
 import {
   type ContainerChangeEventData,
+  type DisplayCondsConfig,
   type FieldProps,
-  type FilterFunction,
   filterFunction,
   type FormState,
   type GroupListConfig,
@@ -37,17 +37,9 @@ const emit = defineEmits<{
   change: [value: DisplayCond[], eventData?: ContainerChangeEventData];
 }>();
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      titlePrefix?: string;
-      parentFields?: string[] | FilterFunction<string[]>;
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DisplayCondsConfig>>(), {
+  disabled: false,
+});
 
 const { dataSourceService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');

package/src/fields/EventSelect.vue

@@ -60,7 +60,10 @@ import { TMagicButton } from '@tmagic/design';
 import type {
   CascaderOption,
   ChildConfig,
+  CodeSelectColConfig,
   ContainerChangeEventData,
+  DataSourceMethodSelectConfig,
+  EventSelectConfig,
   FieldProps,
   FormState,
   OnChangeHandlerData,
@@ -70,7 +73,6 @@ import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
-import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig } from '@editor/type';
 import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({

package/src/fields/KeyValue.vue

@@ -63,7 +63,7 @@ import { ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
+import type { FieldProps, KeyValueConfig } from '@tmagic/form';
 
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
@@ -72,19 +72,9 @@ defineOptions({
   name: 'MFieldsKeyValue',
 });
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        type: 'key-value';
-        advanced?: boolean;
-      } & FormItem
-    >
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<KeyValueConfig>>(), {
+  disabled: false,
+});
 
 const emit = defineEmits<{
   change: [value: Record<string, any>];

package/src/fields/PageFragmentSelect.vue

@@ -20,11 +20,10 @@ import { computed } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
 import { Id, NodeType } from '@tmagic/core';
-import { FieldProps } from '@tmagic/form';
+import { FieldProps, type PageFragmentSelectConfig } from '@tmagic/form';
 
 import Icon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import type { PageFragmentSelectConfig } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsPageFragmentSelect',

package/src/fields/UISelect.vue

@@ -47,7 +47,7 @@ import { throttle } from 'lodash-es';
 
 import type { Id, MNode } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import type { FieldProps, FormItem, FormState } from '@tmagic/form';
+import type { FieldProps, FormState, UISelectConfig } from '@tmagic/form';
 import { getIdFromEl } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
@@ -57,7 +57,7 @@ defineOptions({
   name: 'MFieldsUISelect',
 });
 
-const props = defineProps<FieldProps<{ type: 'ui-select' } & FormItem>>();
+const props = defineProps<FieldProps<UISelectConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/initService.ts

@@ -278,20 +278,21 @@ export const initServiceEvents = (
     });
   };
 
+  const getPageIdByNode = (node: MComponent) => {
+    let pageId: Id | undefined;
+
+    if (isPage(node)) {
+      pageId = node.id;
+    } else {
+      const info = editorService.getNodeInfo(node.id);
+      pageId = info.page?.id;
+    }
+
+    return pageId;
+  };
+
   const collectIdle = (nodes: MComponent[], deep: boolean, type?: DepTargetType) =>
-    Promise.all(
-      nodes.map((node) => {
-        let pageId: Id | undefined;
-
-        if (isPage(node)) {
-          pageId = node.id;
-        } else {
-          const info = editorService.getNodeInfo(node.id);
-          pageId = info.page?.id;
-        }
-        return depService.collectIdle([node], { pageId }, deep, type);
-      }),
-    );
+    Promise.all(nodes.map((node) => depService.collectIdle([node], { pageId: getPageIdByNode(node) }, deep, type)));
 
   watch(
     () => editorService.get('stage'),
@@ -338,7 +339,8 @@ export const initServiceEvents = (
 
     if (Array.isArray(value.items)) {
       depService.clearIdleTasks();
-      collectIdle(value.items, true).then(() => {
+
+      (typeof Worker === 'undefined' ? collectIdle(value.items, true) : depService.collectByWorker(value)).then(() => {
         updateStageNodes(value.items);
       });
     } else {
@@ -629,16 +631,12 @@ export const initServiceEvents = (
         root.dataSourceDeps = {};
       }
       root.dataSourceDeps[target.id] = target.deps;
-    }
-
-    if (target.type === DepTargetType.DATA_SOURCE_COND) {
+    } else if (target.type === DepTargetType.DATA_SOURCE_COND) {
       if (!root.dataSourceCondDeps) {
         root.dataSourceCondDeps = {};
       }
       root.dataSourceCondDeps[target.id] = target.deps;
-    }
-
-    if (target.type === DepTargetType.DATA_SOURCE_METHOD) {
+    } else if (target.type === DepTargetType.DATA_SOURCE_METHOD) {
       if (!root.dataSourceMethodDeps) {
         root.dataSourceMethodDeps = {};
       }

package/src/services/dep.ts

@@ -17,12 +17,14 @@
  */
 import { reactive, shallowReactive } from 'vue';
 import { throttle } from 'lodash-es';
+import serialize from 'serialize-javascript';
 
-import type { DepExtendedData, Id, MNode, Target, TargetNode } from '@tmagic/core';
-import { DepTargetType, Watcher } from '@tmagic/core';
+import type { DepData, DepExtendedData, Id, MApp, MNode, Target, TargetNode } from '@tmagic/core';
+import { DepTargetType, traverseTarget, Watcher } from '@tmagic/core';
 import { isPage } from '@tmagic/utils';
 
-import { IdleTask } from '@editor/utils/idle-task';
+import { IdleTask } from '@editor/utils/dep/idle-task';
+import Work from '@editor/utils/dep/worker.ts?worker&inline';
 
 import BaseService from './BaseService';
 
@@ -50,6 +52,8 @@ class Dep extends BaseService {
 
   private watcher = new Watcher({ initialTargets: reactive({}) });
 
+  private waitingWorker?: Promise<void>;
+
   constructor() {
     super();
 
@@ -114,7 +118,11 @@ class Dep extends BaseService {
     this.emit('ds-collected', nodes, deep);
   }
 
-  public collectIdle(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+  public async collectIdle(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+    if (this.waitingWorker) {
+      await this.waitingWorker;
+    }
+
     this.set('collecting', true);
     let startTask = false;
     this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
@@ -141,6 +149,48 @@ class Dep extends BaseService {
     });
   }
 
+  public collectByWorker(dsl: MApp) {
+    this.set('collecting', true);
+
+    const { promise, resolve: waitingResolve } = Promise.withResolvers<void>();
+
+    this.waitingWorker = promise;
+
+    return new Promise<Record<string, Record<string, DepData>>>((resolve) => {
+      const worker = new Work();
+      worker.postMessage({
+        dsl: serialize(dsl),
+      });
+      worker.onmessage = (e) => {
+        resolve(e.data);
+      };
+      worker.onerror = () => {
+        resolve({});
+      };
+    }).then((depsData) => {
+      traverseTarget(this.watcher.getTargetsList(), (target) => {
+        if (depsData[target.type]?.[target.id]) {
+          target.deps = reactive(depsData[target.type][target.id]);
+
+          if (target.type === DepTargetType.DATA_SOURCE && dsl.dataSourceDeps) {
+            dsl.dataSourceDeps[target.id] = target.deps;
+          } else if (target.type === DepTargetType.DATA_SOURCE_COND && dsl.dataSourceCondDeps) {
+            dsl.dataSourceCondDeps[target.id] = target.deps;
+          } else if (target.type === DepTargetType.DATA_SOURCE_METHOD) {
+            dsl.dataSourceMethodDeps[target.id] = target.deps;
+          }
+        }
+      });
+
+      this.set('collecting', false);
+      this.emit('collected', dsl.items, true);
+      this.emit('ds-collected', dsl.items, true);
+      waitingResolve();
+
+      return depsData;
+    });
+  }
+
   public collectNode(node: MNode, target: Target, depExtendedData: DepExtendedData = {}, deep = false) {
     // 先删除原有依赖，重新收集
     if (isPage(node)) {