From 1a562dc057b8a41f203f0e570ab68036bc864cce Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 13 Feb 2022 23:04:28 +0800
Subject: [PATCH] fix: fix standalone route portal problem

---
 .../com.msgbyte.openapi/src/MainPanel/index.tsx        |  2 +-
 web/src/App.tsx                                        | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/plugins/com.msgbyte.openapi/src/MainPanel/index.tsx b/web/plugins/com.msgbyte.openapi/src/MainPanel/index.tsx
index 5900642d..f176dd01 100644
--- a/web/plugins/com.msgbyte.openapi/src/MainPanel/index.tsx
+++ b/web/plugins/com.msgbyte.openapi/src/MainPanel/index.tsx
@@ -72,7 +72,7 @@ const OpenApiMainPanel: React.FC = React.memo(() => {
         ) : (
           <>
             <Button
-              style={{ marginBottom: 4 }}
+              style={{ marginBottom: 10 }}
               type="primary"
               onClick={handleCreateOpenApp}
             >
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 995c9106..2b598861 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -9,6 +9,7 @@ import { useRecordMeasure } from './utils/measure-helper';
 import { getPopupContainer, preventDefault } from './utils/dom-helper';
 import { LoadingSpinner } from './components/LoadingSpinner';
 import { pluginRootRouter } from './plugin/common';
+import { PortalHost as FallbackPortalHost } from './components/Portal';
 
 const MainRoute = Loadable(() => import('./routes/Main'));
 
@@ -77,9 +78,12 @@ export const App: React.FC = React.memo(() => {
           <Route path="/main" component={MainRoute} />
           <Route path="/panel" component={PanelRoute} />
           <Route path="/invite/:inviteCode" component={InviteRoute} />
-          {pluginRootRouter.map((r) => (
-            <Route key={r.name} path={r.path} component={r.component} />
-          ))}
+          <FallbackPortalHost>
+            {/* 这个host用于处理独立页面的modal */}
+            {pluginRootRouter.map((r) => (
+              <Route key={r.name} path={r.path} component={r.component} />
+            ))}
+          </FallbackPortalHost>
           <Redirect to="/entry" />
         </Switch>
       </AppContainer>