@nocobase/flow-engine 2.1.0-beta.22 → 2.1.0-beta.24

package/src/data-source/index.ts

@@ -8,7 +8,6 @@
  */
 
 import { observable } from '@formily/reactive';
-import { CascaderProps } from 'antd';
 import _ from 'lodash';
 import { FlowEngine } from '../flowEngine';
 import { jioToJoiSchema } from './jioToJoiSchema';
@@ -20,9 +19,31 @@ export interface DataSourceOptions extends Record<string, any> {
   [key: string]: any;
 }
 
+export type DataSourceRequester = (options: Record<string, any>) => Promise<any>;
+
+export interface DataSourceLoadResult {
+  collections?: CollectionOptions[];
+  dataSources?: Array<DataSourceOptions & { collections?: CollectionOptions[] }>;
+}
+
+export type DataSourceLoader = (context: { key: string; manager: DataSourceManager }) => Promise<DataSourceLoadResult>;
+
 export class DataSourceManager {
   dataSources: Map<string, DataSource>;
   flowEngine: FlowEngine;
+  requester?: DataSourceRequester;
+  collectionFieldInterfaceManager?: {
+    addFieldInterfaces?: (fieldInterfaceClasses?: any[]) => void;
+    addFieldInterfaceGroups?: (groups: Record<string, { label: string; order?: number }>) => void;
+    addFieldInterfaceComponentOption?: (name: string, option: any) => void;
+    addFieldInterfaceOperator?: (name: string, operator: any) => void;
+    getFieldInterface?: (name: string) => any;
+  };
+  loaders = new Map<string, DataSourceLoader>();
+  loadedKeys = new Set<string>();
+  loadingKeys = new Set<string>();
+  loadErrors = new Map<string, Error | null>();
+  loadingPromise: Promise<void> | null = null;
 
   constructor() {
     this.dataSources = observable.shallow<Map<string, DataSource>>(new Map());
@@ -32,6 +53,38 @@ export class DataSourceManager {
     this.flowEngine = flowEngine;
   }
 
+  setRequester(requester?: DataSourceRequester) {
+    this.requester = requester;
+  }
+
+  setCollectionFieldInterfaceManager(manager: DataSourceManager['collectionFieldInterfaceManager']) {
+    this.collectionFieldInterfaceManager = manager;
+  }
+
+  addFieldInterfaces(fieldInterfaceClasses: any[] = []) {
+    this.collectionFieldInterfaceManager?.addFieldInterfaces?.(fieldInterfaceClasses);
+  }
+
+  addFieldInterfaceGroups(groups: Record<string, { label: string; order?: number }>) {
+    this.collectionFieldInterfaceManager?.addFieldInterfaceGroups?.(groups);
+  }
+
+  addFieldInterfaceComponentOption(name: string, option: any) {
+    this.collectionFieldInterfaceManager?.addFieldInterfaceComponentOption?.(name, option);
+  }
+
+  addFieldInterfaceOperator(name: string, operator: any) {
+    this.collectionFieldInterfaceManager?.addFieldInterfaceOperator?.(name, operator);
+  }
+
+  registerLoader(key: string, loader: DataSourceLoader) {
+    this.loaders.set(key, loader);
+  }
+
+  removeLoader(key: string) {
+    this.loaders.delete(key);
+  }
+
   addDataSource(ds: DataSource | DataSourceOptions) {
     if (this.dataSources.has(ds.key)) {
       throw new Error(`DataSource with name ${ds.key} already exists`);
@@ -48,7 +101,7 @@ export class DataSourceManager {
 
   upsertDataSource(ds: DataSource | DataSourceOptions) {
     if (this.dataSources.has(ds.key)) {
-      this.dataSources.get(ds.key)?.setOptions(ds);
+      this.dataSources.get(ds.key)?.patchOptions(ds);
     } else {
       this.addDataSource(ds);
     }
@@ -82,6 +135,164 @@ export class DataSourceManager {
     if (!ds) return undefined;
     return ds.getCollectionField(otherKeys.join('.'));
   }
+
+  async ensureLoaded(options: { force?: boolean; keys?: string[] } = {}) {
+    const { force = false } = options;
+    const keys = this.resolveLoadKeys(options.keys);
+    const pendingKeys = force ? keys : keys.filter((key) => !this.loadedKeys.has(key));
+    if (!pendingKeys.length) {
+      return;
+    }
+    if (this.loadingPromise) {
+      return this.loadingPromise;
+    }
+
+    this.loadingPromise = (async () => {
+      try {
+        for (const key of pendingKeys) {
+          await this.loadKey(key, { initial: !this.loadedKeys.has(key), force });
+        }
+      } finally {
+        this.loadingPromise = null;
+      }
+    })();
+
+    return this.loadingPromise;
+  }
+
+  async reload(options: { keys?: string[] } = {}) {
+    const keys = this.resolveLoadKeys(options.keys);
+    if (!keys.length) {
+      return;
+    }
+    if (this.loadingPromise) {
+      return this.loadingPromise;
+    }
+
+    this.loadingPromise = (async () => {
+      try {
+        for (const key of keys) {
+          await this.loadKey(key, { initial: false, force: true });
+        }
+      } finally {
+        this.loadingPromise = null;
+      }
+    })();
+
+    return this.loadingPromise;
+  }
+
+  async reloadDataSource(key: string) {
+    if (this.loadingKeys.has(key) && this.loadingPromise) {
+      return this.loadingPromise;
+    }
+    if (!this.loaders.has(key) && this.loaders.has('*')) {
+      return this.reload({ keys: ['*'] });
+    }
+    return this.reload({ keys: [key] });
+  }
+
+  protected resolveLoadKeys(requestedKeys?: string[]) {
+    const normalizedKeys = requestedKeys?.length ? requestedKeys : ['main'];
+    const explicitKeys = normalizedKeys.filter((key) => this.loaders.has(key));
+    if (this.loaders.has('*')) {
+      return _.uniq(['*', ...explicitKeys]);
+    }
+    return explicitKeys.length ? explicitKeys : normalizedKeys;
+  }
+
+  protected getApp() {
+    return this.flowEngine?.context?.app as { eventBus?: EventTarget } | undefined;
+  }
+
+  protected dispatchDataSourceEvent(
+    type: 'dataSource:loaded' | 'dataSource:loadFailed',
+    detail: { dataSourceKey: string; initial: boolean; error?: Error },
+  ) {
+    this.getApp()?.eventBus?.dispatchEvent(new CustomEvent(type, { detail }));
+  }
+
+  protected setDataSourceState(
+    key: string,
+    options: Partial<Pick<DataSourceOptions, 'status' | 'errorMessage'>> & Record<string, any>,
+  ) {
+    const dataSource = this.getDataSource(key);
+    if (!dataSource) {
+      return;
+    }
+    dataSource.patchOptions(options);
+  }
+
+  protected applyDataSourceLoadResult(key: string, result: DataSourceLoadResult) {
+    if (key === '*') {
+      const dataSources = result?.dataSources || [];
+      dataSources.forEach((dataSourceOptions) => {
+        const { collections, ...dataSource } = dataSourceOptions;
+        this.upsertDataSource(dataSource);
+        if (collections) {
+          this.getDataSource(dataSource.key)?.setCollections(collections, { clearFields: true });
+        }
+      });
+      return;
+    }
+
+    const dataSource = this.getDataSource(key);
+    if (!dataSource) {
+      return;
+    }
+    dataSource.setCollections(result?.collections || [], { clearFields: true });
+  }
+
+  protected async loadKey(key: string, options: { initial: boolean; force: boolean }) {
+    const loader = this.loaders.get(key);
+    if (!loader) {
+      return;
+    }
+
+    if (!this.getDataSource(key) && key !== '*') {
+      this.addDataSource({ key });
+    }
+
+    const { initial } = options;
+    this.loadingKeys.add(key);
+    if (key !== '*') {
+      this.setDataSourceState(key, {
+        status: initial ? 'loading' : 'reloading',
+        errorMessage: undefined,
+      });
+    }
+    this.loadErrors.set(key, null);
+
+    try {
+      const result = (await loader({ key, manager: this })) || {};
+      this.applyDataSourceLoadResult(key, result);
+      this.loadedKeys.add(key);
+      if (key !== '*') {
+        this.setDataSourceState(key, {
+          status: 'loaded',
+          errorMessage: undefined,
+        });
+      }
+      this.dispatchDataSourceEvent('dataSource:loaded', { dataSourceKey: key, initial });
+    } catch (error) {
+      const normalizedError = error instanceof Error ? error : new Error(String(error));
+      this.loadErrors.set(key, normalizedError);
+      if (key !== '*') {
+        this.setDataSourceState(key, {
+          status: initial ? 'loading-failed' : 'reloading-failed',
+          errorMessage: normalizedError.message,
+        });
+      }
+      this.dispatchDataSourceEvent('dataSource:loadFailed', {
+        dataSourceKey: key,
+        initial,
+        error: normalizedError,
+      });
+      throw normalizedError;
+    } finally {
+      this.loadingKeys.delete(key);
+    }
+  }
 }
 
 export class DataSource {
@@ -110,6 +321,14 @@ export class DataSource {
     return this.options.key;
   }
 
+  get status() {
+    return this.options.status;
+  }
+
+  get errorMessage() {
+    return this.options.errorMessage;
+  }
+
   setDataSourceManager(dataSourceManager: DataSourceManager) {
     this.dataSourceManager = dataSourceManager;
   }
@@ -149,6 +368,10 @@ export class DataSource {
     return this.collectionManager.upsertCollections(collections, options);
   }
 
+  setCollections(collections: CollectionOptions[], options: { clearFields?: boolean } = {}) {
+    return this.collectionManager.setCollections(collections, options);
+  }
+
   removeCollection(name: string) {
     return this.collectionManager.removeCollection(name);
   }
@@ -162,6 +385,14 @@ export class DataSource {
     Object.assign(this.options, newOptions);
   }
 
+  patchOptions(newOptions: any = {}) {
+    Object.assign(this.options, newOptions);
+  }
+
+  reload() {
+    return this.dataSourceManager.reloadDataSource(this.key);
+  }
+
   getCollectionField(fieldPath: string) {
     const [collectionName, ...otherKeys] = fieldPath.split('.');
     const fieldName = otherKeys.join('.');
@@ -194,6 +425,11 @@ export class CollectionManager {
     this.collections = observable.shallow<Map<string, Collection>>(new Map());
   }
 
+  protected resetCaches() {
+    this.childrenCollectionsName = {};
+    this.allCollectionsInheritChain = undefined;
+  }
+
   get flowEngine() {
     return this.dataSource.flowEngine;
   }
@@ -208,10 +444,12 @@ export class CollectionManager {
     col.setDataSource(this.dataSource);
     col.initInherits();
     this.collections.set(col.name, col);
+    this.resetCaches();
   }
 
   removeCollection(name: string) {
     this.collections.delete(name);
+    this.resetCaches();
   }
 
   updateCollection(newOptions: CollectionOptions, options: { clearFields?: boolean } = {}) {
@@ -220,6 +458,7 @@ export class CollectionManager {
       throw new Error(`Collection ${newOptions.name} not found`);
     }
     collection.setOptions(newOptions, options);
+    this.resetCaches();
   }
 
   upsertCollection(options: CollectionOptions) {
@@ -239,6 +478,12 @@ export class CollectionManager {
         this.addCollection(collection);
       }
     }
+    this.resetCaches();
+  }
+
+  setCollections(collections: CollectionOptions[], options: { clearFields?: boolean } = {}) {
+    this.clearCollections();
+    this.upsertCollections(collections, options);
   }
 
   sortCollectionsByInherits(collections: CollectionOptions[]): CollectionOptions[] {
@@ -315,6 +560,7 @@ export class CollectionManager {
 
   clearCollections() {
     this.collections.clear();
+    this.resetCaches();
   }
 
   getAssociation(associationName: string): CollectionField | undefined {
@@ -537,6 +783,10 @@ export class Collection {
     this.upsertFields(this.options.fields || []);
   }
 
+  setOption(key: string, value: any) {
+    this.options[key] = value;
+  }
+
   getFields(): CollectionField[] {
     // 合并自身 fields 和所有 inherits 的 fields，后者优先被覆盖
     const fieldMap = new Map<string, CollectionField>();

package/src/flowContext.ts

@@ -3006,8 +3006,10 @@ export class FlowContext {
 }
 
 class BaseFlowEngineContext extends FlowContext {
+  declare t: (key: any, options?: any) => string;
   declare router: Router;
   declare dataSourceManager: DataSourceManager;
+  declare isDarkTheme: boolean;
   declare requireAsync: (url: string) => Promise<any>;
   declare importAsync: (url: string) => Promise<any>;
   declare createJSRunner: (options?: JSRunnerOptions) => Promise<JSRunner>;

package/src/flowI18n.ts

@@ -52,7 +52,8 @@ export class FlowI18n {
    */
   private translateKey(key: string, options?: any): string {
     if (this.context?.i18n?.t) {
-      return this.context.i18n.t(key, options);
+      const translated = this.context.i18n.t(key, options);
+      return translated == null || translated === '' ? key : translated;
     }
     // 如果没有翻译函数，返回原始键值
     return key;

package/src/models/DisplayItemModel.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { DefaultStructure } from '@nocobase/flow-engine';
+import type { DefaultStructure } from '../types';
 import { CollectionFieldModel } from './CollectionFieldModel';
 
 export class DisplayItemModel<T extends DefaultStructure = DefaultStructure> extends CollectionFieldModel<T> {}

package/src/models/EditableItemModel.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { DefaultStructure } from '@nocobase/flow-engine';
+import type { DefaultStructure } from '../types';
 import { CollectionFieldModel } from './CollectionFieldModel';
 
 export class EditableItemModel<T extends DefaultStructure = DefaultStructure> extends CollectionFieldModel<T> {}

package/src/models/FilterableItemModel.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { DefaultStructure } from '@nocobase/flow-engine';
+import type { DefaultStructure } from '../types';
 import { CollectionFieldModel } from './CollectionFieldModel';
 
 export class FilterableItemModel<T extends DefaultStructure = DefaultStructure> extends CollectionFieldModel<T> {}

package/src/models/flowModel.tsx

@@ -60,16 +60,22 @@ const modelMetas = new WeakMap<typeof FlowModel, FlowModelMeta>();
 const modelGlobalRegistries = new WeakMap<typeof FlowModel, GlobalFlowRegistry>();
 
 type BaseMenuItem = NonNullable<MenuProps['items']>[number];
-type MenuLeafItem = Exclude<BaseMenuItem, { children: MenuProps['items'] }>;
+type MenuBaseItem = Omit<Exclude<BaseMenuItem, null>, 'key' | 'children'>;
 
-export type FlowModelExtraMenuItem = Omit<MenuLeafItem, 'key'> & {
+export type FlowModelExtraMenuItem = MenuBaseItem & {
   key: React.Key;
   group?: string;
   sort?: number;
+  label?: React.ReactNode;
+  disabled?: boolean;
   onClick?: () => void;
+  children?: FlowModelExtraMenuItem[];
 };
 
-type FlowModelExtraMenuItemInput = Omit<FlowModelExtraMenuItem, 'key'> & { key?: React.Key };
+type FlowModelExtraMenuItemInput = Omit<FlowModelExtraMenuItem, 'key' | 'children'> & {
+  key?: React.Key;
+  children?: FlowModelExtraMenuItemInput[];
+};
 
 type ExtraMenuItemEntry = {
   group?: string;
@@ -86,6 +92,56 @@ type ExtraMenuItemEntry = {
 
 const classMenuExtensions = new WeakMap<typeof FlowModel, Set<ExtraMenuItemEntry>>();
 
+const sortExtraMenuItems = (items: FlowModelExtraMenuItem[]) => {
+  return [...items].sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
+};
+
+const isFlowModelExtraMenuItem = (item: FlowModelExtraMenuItem | null): item is FlowModelExtraMenuItem => {
+  return item !== null;
+};
+
+const normalizeExtraMenuItem = (
+  item: FlowModelExtraMenuItemInput,
+  {
+    group,
+    sort,
+    prefix,
+    path,
+  }: {
+    group: string;
+    sort: number;
+    prefix: string;
+    path: string;
+  },
+): FlowModelExtraMenuItem | null => {
+  if (!item) {
+    return null;
+  }
+
+  const normalizedGroup = item.group || group;
+  const normalizedSort = typeof item.sort === 'number' ? item.sort : sort;
+  const normalizedChildren = sortExtraMenuItems(
+    (item.children || [])
+      .map((child, index) =>
+        normalizeExtraMenuItem(child, {
+          group: normalizedGroup,
+          sort: normalizedSort,
+          prefix,
+          path: `${path}-${index}`,
+        }),
+      )
+      .filter(isFlowModelExtraMenuItem),
+  );
+
+  return {
+    ...item,
+    key: item.key ?? `${prefix}-${normalizedGroup}-${path}`,
+    group: normalizedGroup,
+    sort: normalizedSort,
+    children: normalizedChildren.length ? normalizedChildren : undefined,
+  };
+};
+
 async function loadOpenStepSettingsDialog() {
   const mod = await import('../components/settings/wrappers/contextual/StepSettingsDialog');
   return mod.openStepSettingsDialog;
@@ -1194,17 +1250,17 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     return model;
   }
 
-  filterSubModels<K extends keyof Structure['subModels'], R>(
+  filterSubModels<K extends keyof NonNullable<Structure['subModels']>, R>(
     subKey: K,
-    callback: (model: ArrayElementType<Structure['subModels'][K]>, index: number) => boolean,
-  ): ArrayElementType<Structure['subModels'][K]>[] {
+    callback: (model: ArrayElementType<NonNullable<Structure['subModels']>[K]>, index: number) => boolean,
+  ): ArrayElementType<NonNullable<Structure['subModels']>[K]>[] {
     const model = (this.subModels as any)[subKey as string];
 
     if (!model) {
       return [];
     }
 
-    const results: ArrayElementType<Structure['subModels'][K]>[] = [];
+    const results: ArrayElementType<NonNullable<Structure['subModels']>[K]>[] = [];
 
     _.castArray(model)
       .sort((a, b) => (a.sortIndex || 0) - (b.sortIndex || 0))
@@ -1218,9 +1274,9 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     return results;
   }
 
-  mapSubModels<K extends keyof Structure['subModels'], R>(
+  mapSubModels<K extends keyof NonNullable<Structure['subModels']>, R>(
     subKey: K,
-    callback: (model: ArrayElementType<Structure['subModels'][K]>, index: number) => R,
+    callback: (model: ArrayElementType<NonNullable<Structure['subModels']>[K]>, index: number) => R,
   ): R[] {
     const model = (this.subModels as any)[subKey as string];
 
@@ -1240,7 +1296,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     return results;
   }
 
-  hasSubModel<K extends keyof Structure['subModels']>(subKey: K) {
+  hasSubModel<K extends keyof NonNullable<Structure['subModels']>>(subKey: K) {
     const subModel = (this.subModels as any)[subKey as string];
     if (!subModel) {
       return false;
@@ -1248,10 +1304,10 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     return _.castArray(subModel).length > 0;
   }
 
-  findSubModel<K extends keyof Structure['subModels'], R>(
+  findSubModel<K extends keyof NonNullable<Structure['subModels']>, R>(
     subKey: K,
-    callback: (model: ArrayElementType<Structure['subModels'][K]>) => R,
-  ): ArrayElementType<Structure['subModels'][K]> | null {
+    callback: (model: ArrayElementType<NonNullable<Structure['subModels']>[K]>) => R,
+  ): ArrayElementType<NonNullable<Structure['subModels']>[K]> | null {
     const model = (this.subModels as any)[subKey as string];
 
     if (!model) {
@@ -1261,7 +1317,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     return (
       (_.castArray(model).find((item) => {
         return (callback as (model: any) => R)(item);
-      }) as ArrayElementType<Structure['subModels'][K]> | undefined) || null
+      }) as ArrayElementType<NonNullable<Structure['subModels']>[K]> | undefined) || null
     );
   }
 
@@ -1607,6 +1663,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
       seen.add(Cls);
       const reg = classMenuExtensions.get(Cls);
       if (reg) {
+        let entryIndex = 0;
         for (const entry of reg) {
           if (entry.matcher && !entry.matcher(model)) continue;
           const items =
@@ -1614,16 +1671,21 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
           const group = entry.group || 'common-actions';
           const sort = entry.sort ?? 0;
           const prefix = entry.keyPrefix || Cls.name || 'extra';
-          (items || []).forEach((it, idx: number) => {
-            if (!it) return;
-            const key = it.key ?? `${prefix}-${group}-${idx}-${Math.random().toString(36).slice(2, 6)}`;
-            collected.push({
-              ...it,
-              key,
-              group: it.group || group,
-              sort: typeof it.sort === 'number' ? it.sort : sort,
-            });
+          sortExtraMenuItems(
+            (items || [])
+              .map((it, idx: number) =>
+                normalizeExtraMenuItem(it, {
+                  group,
+                  sort,
+                  prefix,
+                  path: `${entryIndex}-${idx}`,
+                }),
+              )
+              .filter(isFlowModelExtraMenuItem),
+          ).forEach((it) => {
+            collected.push(it);
           });
+          entryIndex += 1;
         }
       }
       const ParentClass = Object.getPrototypeOf(Cls) as typeof FlowModel;

package/src/provider.tsx

@@ -45,34 +45,50 @@ export const FlowEngineGlobalsContextProvider: React.FC<{ children: React.ReactN
   const engine = useFlowEngine();
   const config = useContext(ConfigProvider.ConfigContext);
   const { token } = theme.useToken();
+  const isDarkTheme = React.useMemo(() => {
+    const algorithm = config?.theme?.algorithm;
+    if (Array.isArray(algorithm)) {
+      return algorithm.includes(theme.darkAlgorithm);
+    }
+    return algorithm === theme.darkAlgorithm;
+  }, [config]);
 
-  useEffect(() => {
-    const context = {
-      antdConfig: config,
-      // themeToken 改为可观察的 getter，在下方单独 define
-      modal,
-      message,
-      notification,
-    };
-    engine.context.defineProperty('viewer', {
-      cache: false,
-      get: (ctx) => new FlowViewer(ctx, { drawer, embed, popover, dialog }),
-    });
-    for (const item of Object.entries(context)) {
-      const [key, value] = item;
-      if (value) {
-        engine.context.defineProperty(key, { value });
-      }
+  // 这些全局能力需要在 children 首次渲染前就可读，不能等到 effect 后再挂到上下文。
+  engine.context.defineProperty('viewer', {
+    cache: false,
+    get: (ctx) => new FlowViewer(ctx, { drawer, embed, popover, dialog }),
+  });
+  for (const item of Object.entries({
+    antdConfig: config,
+    modal,
+    message,
+    notification,
+  })) {
+    const [key, value] = item;
+    if (value) {
+      engine.context.defineProperty(key, { value });
     }
-    // 将 themeToken 定义为 observable, 使组件能够响应主题的变更
-    // NOTE: 必须在 antdConfig 写入后再更新 themeToken；否则会读取到旧 antdConfig 的值。
-    engine.context.defineProperty('themeToken', {
-      get: () => token,
-      observable: true,
-      cache: true,
-    });
+  }
+  // 将 themeToken 定义为 observable, 使组件能够响应主题的变更。
+  engine.context.defineProperty('themeToken', {
+    get: () => token,
+    observable: true,
+    cache: true,
+  });
+  // 统一把暗色模式暴露到 Flow 上下文，避免 flow 侧继续依赖 global-theme。
+  engine.context.defineProperty('isDarkTheme', {
+    get: () => isDarkTheme,
+    observable: true,
+    cache: true,
+    info: {
+      description: 'Whether current theme algorithm is dark mode.',
+      detail: 'boolean',
+    },
+  });
+
+  useEffect(() => {
     engine.reactView.refresh();
-  }, [engine, drawer, modal, message, notification, config, popover, token, dialog, embed]);
+  }, [engine, drawer, modal, message, notification, config, popover, token, dialog, embed, isDarkTheme]);
 
   return (
     <ConfigProvider {...config} locale={engine.context.locales?.antd} popupMatchSelectWidth={false}>