From abed4177e25b47c32bfaa8d91ea501c19d51460c Mon Sep 17 00:00:00 2001
From: mushan0x0 <mushan0x0@gmail.com>
Date: Thu, 25 Jan 2024 00:15:29 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20fix=20=20default=20plug?=
 =?UTF-8?q?ins=20height=20unstabled=20when=20scrolling=20(#1142)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ⚡️ perf: Add cache to render default plugins

* 🐛 fix: The debug panel cannot be closed
---
 src/features/Conversation/Plugins/Inspector/index.tsx    | 2 +-
 .../Plugins/Render/DefaultType/SystemJsRender/index.tsx  | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/features/Conversation/Plugins/Inspector/index.tsx b/src/features/Conversation/Plugins/Inspector/index.tsx
index 5875f02998cd..2e274dc53fe8 100644
--- a/src/features/Conversation/Plugins/Inspector/index.tsx
+++ b/src/features/Conversation/Plugins/Inspector/index.tsx
@@ -118,7 +118,7 @@ const Inspector = memo<InspectorProps>(
                 label: t('debug.response'),
               },
             ]}
-            style={{ maxWidth: 800 }}
+            style={{ display: 'grid', maxWidth: 800 }}
           />
         )}
       </Flexbox>
diff --git a/src/features/Conversation/Plugins/Render/DefaultType/SystemJsRender/index.tsx b/src/features/Conversation/Plugins/Render/DefaultType/SystemJsRender/index.tsx
index 5d91df0c5d1f..c374dd3886d9 100644
--- a/src/features/Conversation/Plugins/Render/DefaultType/SystemJsRender/index.tsx
+++ b/src/features/Conversation/Plugins/Render/DefaultType/SystemJsRender/index.tsx
@@ -8,18 +8,23 @@ interface SystemJsRenderProps extends PluginRenderProps {
   url: string;
 }
 
+const RenderCache: {
+  [url: string]: PluginRender;
+} = {};
+
 const SystemJsRender = memo<SystemJsRenderProps>(({ url, ...props }) => {
-  const [component, setComp] = useState<PluginRender | null>(null);
+  const [component, setComp] = useState<PluginRender | undefined>(RenderCache[url]);
 
   useEffect(() => {
     system
       .import(url)
       .then((module1) => {
         setComp(module1.default);
+        RenderCache[url] = module1.default;
         // 使用module1模块
       })
       .catch((error) => {
-        setComp(null);
+        setComp(undefined);
         console.error(error);
       });
   }, [url]);