fix: 修复错误的挂载层级问题

web/src/App.tsx

@@ -83,14 +83,17 @@ export const App: React.FC = React.memo(() => {
     <AppProvider>
       <AppHeader />
       <AppContainer>
-        <FallbackPortalHost>
+        <Switch>
-          {/* 这个host用于处理其他页面(非main)的modal */}
+          <Route path="/entry">
-          <Switch>
+            <FallbackPortalHost>
-            <Route path="/entry" component={EntryRoute} />
+              <EntryRoute />
-            <Route path="/main" component={MainRoute} />
+            </FallbackPortalHost>
-            <Route path="/panel" component={PanelRoute} />
+          </Route>
-            <Route path="/invite/:inviteCode" component={InviteRoute} />
+          <Route path="/main" component={MainRoute} />
-            <Route path="/plugin/*">
+          <Route path="/panel" component={PanelRoute} />
+          <Route path="/invite/:inviteCode" component={InviteRoute} />
+          <Route path="/plugin/*">
+            <FallbackPortalHost>
               {/* NOTICE: Switch里不能出现动态路由 */}
               {pluginRootRoute.map((r, i) => (
                 <Route
@@ -99,10 +102,10 @@ export const App: React.FC = React.memo(() => {
                   component={r.component}
                 />
               ))}
-            </Route>
+            </FallbackPortalHost>
-            <Redirect to="/entry" />
+          </Route>
-          </Switch>
+          <Redirect to="/entry" />
-        </FallbackPortalHost>
+        </Switch>
       </AppContainer>
     </AppProvider>
   );

web/src/components/LanguageSelect.tsx

@@ -0,0 +1,31 @@
+import { Select } from 'antd';
+import React, { useCallback } from 'react';
+import { showToasts, t, useLanguage } from 'tailchat-shared';
+
+/**
+ * 语言切换选择框
+ */
+export const LanguageSelect: React.FC = React.memo(() => {
+  const { language, setLanguage } = useLanguage();
+
+  const handleChangeLanguage = useCallback(
+    (newLang: string) => {
+      showToasts(t('刷新页面后生效'), 'info');
+      setLanguage(newLang);
+    },
+    [setLanguage]
+  );
+
+  return (
+    <Select
+      style={{ width: 280 }}
+      size="large"
+      value={language}
+      onChange={handleChangeLanguage}
+    >
+      <Select.Option value="zh-CN">简体中文</Select.Option>
+      <Select.Option value="en-US">English</Select.Option>
+    </Select>
+  );
+});
+LanguageSelect.displayName = 'LanguageSelect';

web/src/components/modals/SettingsView/System.tsx

@@ -1,17 +1,11 @@
 import { FullModalField } from '@/components/FullModal/Field';
+import { LanguageSelect } from '@/components/LanguageSelect';
 import { pluginColorScheme } from '@/plugin/common';
 import { Select, Switch } from 'antd';
-import React, { useCallback } from 'react';
+import React from 'react';
-import {
+import { t, useColorScheme, useSingleUserSetting } from 'tailchat-shared';
-  showToasts,
-  t,
-  useColorScheme,
-  useSingleUserSetting,
-} from 'tailchat-shared';
-import { useLanguage } from 'tailchat-shared';
 
 export const SettingsSystem: React.FC = React.memo(() => {
-  const { language, setLanguage } = useLanguage();
   const { colorScheme, setColorScheme } = useColorScheme();
   const {
     value: messageListVirtualization,
@@ -19,30 +13,9 @@ export const SettingsSystem: React.FC = React.memo(() => {
     loading,
   } = useSingleUserSetting('messageListVirtualization', false);
 
-  const handleChangeLanguage = useCallback(
-    (newLang: string) => {
-      showToasts(t('刷新页面后生效'), 'info');
-      setLanguage(newLang);
-    },
-    [setLanguage]
-  );
-
   return (
     <div>
-      <FullModalField
+      <FullModalField title={t('系统语言')} content={<LanguageSelect />} />
-        title={t('系统语言')}
-        content={
-          <Select
-            style={{ width: 280 }}
-            size="large"
-            value={language}
-            onChange={handleChangeLanguage}
-          >
-            <Select.Option value="zh-CN">简体中文</Select.Option>
-            <Select.Option value="en-US">English</Select.Option>
-          </Select>
-        }
-      />
 
       <FullModalField
         title={t('配色方案')}

web/src/routes/Main/Provider.tsx

@@ -4,16 +4,14 @@ import {
   setupRedux,
   useAsync,
   userActions,
-  loginWithToken,
   t,
   ReduxProvider,
   UserLoginInfo,
 } from 'tailchat-shared';
 import React from 'react';
 import { LoadingSpinner } from '@/components/LoadingSpinner';
-import { getGlobalUserLoginInfo, tryAutoLogin } from '@/utils/user-helper';
+import { tryAutoLogin } from '@/utils/user-helper';
 import _isNil from 'lodash/isNil';
-import { getUserJWT } from '@/utils/jwt-helper';
 import { useHistory } from 'react-router';
 import { SidebarContextProvider } from './SidebarContext';
 import { PortalHost } from '@/components/Portal';