From d511bce69e81ebe01dc5ea20313a5e48258ff01d Mon Sep 17 00:00:00 2001
From: lurunze1226 <lurunze1226@foxmail.com>
Date: Thu, 6 Jul 2023 20:59:14 +0800
Subject: [PATCH] =?UTF-8?q?chore(amis-editor):=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E9=85=8D=E7=BD=AE=E9=9D=A2=E6=9D=BF=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=BC=82=E6=AD=A5=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/AsyncLayer.tsx              | 45 +++++++++++++++++
 packages/amis-editor-core/src/plugin.ts       | 48 ++++++++++++++-----
 2 files changed, 82 insertions(+), 11 deletions(-)
 create mode 100644 packages/amis-editor-core/src/component/AsyncLayer.tsx

diff --git a/packages/amis-editor-core/src/component/AsyncLayer.tsx b/packages/amis-editor-core/src/component/AsyncLayer.tsx
new file mode 100644
index 000000000..fd145bf64
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/amis-editor-core/src/plugin.ts b/packages/amis-editor-core/src/plugin.ts
index 6ee2327cf..0afa4a736 100644
--- a/packages/amis-editor-core/src/plugin.ts
+++ b/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 &&