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

chore(amis-editor): 编辑器配置面板支持异步加载

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

@@ -0,0 +1,45 @@
+/**
+ * @file AsyncLayer.tsx
+ * @desc 异步加载层
+ */
+import React from 'react';
+import {Spinner} from 'amis';
+
+export interface asyncLayerOptions {
+  fallback?: React.ReactNode;
+}
+
+export const makeAsyncLayer = (
+  schemaBuilderFn: () => Promise<any>,
+  options?: asyncLayerOptions
+) => {
+  const {fallback} = options || {};
+  const LazyComponent = React.lazy(async () => {
+    const schemaFormRender = await schemaBuilderFn();
+
+    return {
+      default: (...props: any[]) => <>{schemaFormRender(...props)}</>
+    };
+  });
+
+  return (props: any) => (
+    <React.Suspense
+      fallback={
+        fallback && React.isValidElement(fallback) ? (
+          fallback
+        ) : (
+          <Spinner
+            show
+            overlay
+            size="sm"
+            tip="配置面板加载中"
+            tipPlacement="bottom"
+            className="flex"
+          />
+        )
+      }
+    >
+      <LazyComponent {...props} />
+    </React.Suspense>
+  );
+};

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

@@ -1,7 +1,10 @@
 /**
  * @file 定义插件的 interface，以及提供一个 BasePlugin 基类，把一些通用的方法放在这。
  */
+
+import omit from 'lodash/omit';
 import {RegionWrapperProps} from './component/RegionWrapper';
+import {makeAsyncLayer} from './component/AsyncLayer';
 import {EditorManager} from './manager';
 import {EditorStoreType} from './store/editor';
 import {EditorNodeType} from './store/node';
@@ -13,6 +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';
 
 /**
  * 区域的定义，容器渲染器都需要定义区域信息。
@@ -799,6 +803,11 @@ export interface PluginInterface
    */
   panelJustify?: boolean;
 
+  /**
+   * 配置面板内容区是否开启异步加载
+   */
+  async?: {enable: boolean} & asyncLayerOptions;
+
   /**
    * 有数据域的容器，可以为子组件提供读取的字段绑定页面
    */
@@ -1044,17 +1053,34 @@ export abstract class BasePlugin implements PluginInterface {
         icon: plugin.panelIcon || plugin.icon || 'fa fa-cog',
         pluginIcon: plugin.pluginIcon,
         title: plugin.panelTitle || '设置',
-        render: this.manager.makeSchemaFormRender({
-          definitions: plugin.panelDefinitions,
-          submitOnChange: plugin.panelSubmitOnChange,
-          api: plugin.panelApi,
-          body: body,
-          controls: plugin.panelControlsCreator
-            ? plugin.panelControlsCreator(context)
-            : plugin.panelControls!,
-          justify: plugin.panelJustify,
-          panelById: store.activeId
-        })
+        render:
+          typeof plugin.async === 'object' && plugin.async?.enable === true
+            ? makeAsyncLayer(async () => {
+                const panelBody = await body;
+
+                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({
+                definitions: plugin.panelDefinitions,
+                submitOnChange: plugin.panelSubmitOnChange,
+                api: plugin.panelApi,
+                body: body,
+                controls: plugin.panelControlsCreator
+                  ? plugin.panelControlsCreator(context)
+                  : plugin.panelControls!,
+                justify: plugin.panelJustify,
+                panelById: store.activeId
+              })
       });
     } else if (
       context.info.plugin === this &&