feat: 登录页增加允许修改服务端地址的方法

web/src/App.tsx

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

web/src/components/modals/ServiceUrlSettings.tsx

@@ -0,0 +1,42 @@
+import { Button, Input } from 'antd';
+import React, { useState } from 'react';
+import { t } from 'tailchat-shared';
+import { ModalWrapper } from '../Modal';
+
+export const ServiceUrlSettings: React.FC = React.memo(() => {
+  const [url, setUrl] = useState(
+    window.localStorage.getItem('serviceUrl') ?? ''
+  );
+
+  return (
+    <ModalWrapper title={t('服务端地址')}>
+      <Input
+        placeholder={t('请输入服务器地址(示例: http://127.0.0.1:11000)')}
+        value={url}
+        onChange={(e) => setUrl(e.target.value)}
+      />
+
+      <div className="space-x-2 text-right mt-8">
+        <Button
+          onClick={() => {
+            window.localStorage.removeItem('serviceUrl');
+            window.location.reload();
+          }}
+        >
+          {t('重置为默认地址')}
+        </Button>
+        <Button
+          type="primary"
+          disabled={!url}
+          onClick={() => {
+            window.localStorage.setItem('serviceUrl', url);
+            window.location.reload();
+          }}
+        >
+          {t('确认修改并刷新页面')}
+        </Button>
+      </div>
+    </ModalWrapper>
+  );
+});
+ServiceUrlSettings.displayName = 'ServiceUrlSettings';

web/src/init.tsx

@@ -33,8 +33,10 @@ setTokenGetter(async () => {
   return await getUserJWT();
 });
 
-if (window.localStorage.getItem('serviceUrl')) {
-  setServiceUrl(() => String(window.localStorage.getItem('serviceUrl')));
+const localStorageServiceUrl = window.localStorage.getItem('serviceUrl');
+
+if (localStorageServiceUrl) {
+  setServiceUrl(() => localStorageServiceUrl);
 } else if (process.env.SERVICE_URL) {
   setServiceUrl(() => String(process.env.SERVICE_URL));
 }
@@ -100,7 +102,8 @@ request
     baseURL: '',
   })
   .then(({ data: config }) => {
-    if (isValidStr(_get(config, 'serviceUrl'))) {
+    if (!localStorageServiceUrl && isValidStr(_get(config, 'serviceUrl'))) {
+      // 配置的优先级低于localStorage的优先级
       setServiceUrl(() => _get(config, 'serviceUrl'));
     }
   })

web/src/routes/Entry/LoginView.tsx

@@ -9,6 +9,9 @@ import { setUserJWT } from '../../utils/jwt-helper';
 import { setGlobalUserLoginInfo, tryAutoLogin } from '../../utils/user-helper';
 import { useSearchParam } from '@/hooks/useSearchParam';
 import { useNavToView } from './utils';
+import { IconBtn } from '@/components/IconBtn';
+import { openModal } from '@/components/Modal';
+import { ServiceUrlSettings } from '@/components/modals/ServiceUrlSettings';
 
 /**
  * TODO:
@@ -70,7 +73,7 @@ export const LoginView: React.FC = React.memo(() => {
   const navToView = useNavToView();
 
   return (
-    <div className="w-96 text-white">
+    <div className="w-96 text-white relative">
       <div className="mb-4 text-2xl">{t('登录 Tailchat')}</div>
 
       <div>
@@ -136,6 +139,14 @@ export const LoginView: React.FC = React.memo(() => {
           <Icon icon="mdi:arrow-right" className="ml-1 inline" />
         </button>
       </div>
+
+      <div className="absolute bottom-4 left-0">
+        <IconBtn
+          icon="mdi:cog"
+          shape="square"
+          onClick={() => openModal(<ServiceUrlSettings />)}
+        />
+      </div>
     </div>
   );
 });