Merge pull request #7404 from lurunze1226/chore-editor-panel-async

chore(amis-editor): 调整配置面板异步加载开关，增加panelBodyAsyncCreator方法

packages/amis-editor-core/src/component/AsyncLayer.tsx

@@ -5,13 +5,13 @@
 import React from 'react';
 import {Spinner} from 'amis';
 
-export interface asyncLayerOptions {
+export interface AsyncLayerOptions {
   fallback?: React.ReactNode;
 }
 
 export const makeAsyncLayer = (
   schemaBuilderFn: () => Promise<any>,
-  options?: asyncLayerOptions
+  options?: AsyncLayerOptions
 ) => {
   const {fallback} = options || {};
   const LazyComponent = React.lazy(async () => {

packages/amis-editor-core/src/plugin.ts

@@ -16,7 +16,7 @@ import find from 'lodash/find';
 import type {RendererConfig} from 'amis-core';
 import type {MenuDivider, MenuItem} from 'amis-ui/lib/components/ContextMenu';
 import type {BaseSchema, SchemaCollection} from 'amis';
-import type {asyncLayerOptions} from './component/AsyncLayer';
+import type {AsyncLayerOptions} from './component/AsyncLayer';
 
 /**
  * 区域的定义，容器渲染器都需要定义区域信息。
@@ -804,9 +804,9 @@ export interface PluginInterface
   panelJustify?: boolean;
 
   /**
-   * 配置面板内容区是否开启异步加载
+   * panelBodyAsyncCreator设置后异步加载层的配置项
    */
-  async?: {enable: boolean} & asyncLayerOptions;
+  async?: AsyncLayerOptions;
 
   /**
    * 有数据域的容器，可以为子组件提供读取的字段绑定页面
@@ -825,6 +825,12 @@ export interface PluginInterface
    */
   panelControlsCreator?: (context: BaseEventContext) => Array<any>;
   panelBodyCreator?: (context: BaseEventContext) => SchemaCollection;
+  /**
+   * 配置面板内容区的异步加载方法，设置后优先级大于panelBodyCreator
+   */
+  panelBodyAsyncCreator?: (
+    context: BaseEventContext
+  ) => Promise<SchemaCollection>;
 
   // 好像没用，先注释了
   // /**
@@ -1035,10 +1041,17 @@ export abstract class BasePlugin implements PluginInterface {
       (plugin.panelControls ||
         plugin.panelControlsCreator ||
         plugin.panelBody ||
-        plugin.panelBodyCreator) &&
+        plugin.panelBodyCreator ||
+        plugin.panelBodyAsyncCreator) &&
       context.info.plugin === this
     ) {
-      const body = plugin.panelBodyCreator
+      const enableAsync = !!(
+        plugin.panelBodyAsyncCreator &&
+        typeof plugin.panelBodyAsyncCreator === 'function'
+      );
+      const body = plugin.panelBodyAsyncCreator
+        ? plugin.panelBodyAsyncCreator(context)
+        : plugin.panelBodyCreator
         ? plugin.panelBodyCreator(context)
         : plugin.panelBody!;
 
@@ -1053,34 +1066,33 @@ export abstract class BasePlugin implements PluginInterface {
         icon: plugin.panelIcon || plugin.icon || 'fa fa-cog',
         pluginIcon: plugin.pluginIcon,
         title: plugin.panelTitle || '设置',
-        render:
-          typeof plugin.async === 'object' && plugin.async?.enable === true
-            ? makeAsyncLayer(async () => {
-                const panelBody = await body;
+        render: enableAsync
+          ? makeAsyncLayer(async () => {
+              const panelBody = await (body as Promise<SchemaCollection>);
 
-                return this.manager.makeSchemaFormRender({
-                  definitions: plugin.panelDefinitions,
-                  submitOnChange: plugin.panelSubmitOnChange,
-                  api: plugin.panelApi,
-                  body: panelBody,
-                  controls: plugin.panelControlsCreator
-                    ? plugin.panelControlsCreator(context)
-                    : plugin.panelControls!,
-                  justify: plugin.panelJustify,
-                  panelById: store.activeId
-                });
-              }, omit(plugin.async, 'enable'))
-            : this.manager.makeSchemaFormRender({
+              return this.manager.makeSchemaFormRender({
                 definitions: plugin.panelDefinitions,
                 submitOnChange: plugin.panelSubmitOnChange,
                 api: plugin.panelApi,
-                body: body,
+                body: panelBody,
                 controls: plugin.panelControlsCreator
                   ? plugin.panelControlsCreator(context)
                   : plugin.panelControls!,
                 justify: plugin.panelJustify,
                 panelById: store.activeId
-              })
+              });
+            }, omit(plugin.async, 'enable'))
+          : this.manager.makeSchemaFormRender({
+              definitions: plugin.panelDefinitions,
+              submitOnChange: plugin.panelSubmitOnChange,
+              api: plugin.panelApi,
+              body: body as SchemaCollection,
+              controls: plugin.panelControlsCreator
+                ? plugin.panelControlsCreator(context)
+                : plugin.panelControls!,
+              justify: plugin.panelJustify,
+              panelById: store.activeId
+            })
       });
     } else if (
       context.info.plugin === this &&