feat: 增加创建游客账户的界面

shared/index.tsx

@@ -109,6 +109,7 @@ export {
   loginWithEmail,
   loginWithToken,
   registerWithEmail,
+  createTemporaryUser,
   searchUserWithUniqueName,
   checkTokenValid,
   modifyUserField,

shared/model/user.ts

@@ -68,6 +68,20 @@ export async function registerWithEmail(
   return data;
 }
 
+/**
+ * 创建访客账号
+ * @param nickname 访客昵称
+ */
+export async function createTemporaryUser(
+  nickname: string
+): Promise<UserLoginInfo> {
+  const { data } = await request.post('/api/user/createTemporaryUser', {
+    nickname,
+  });
+
+  return data;
+}
+
 /**
  * 使用唯一标识名搜索用户
  * @param uniqueName 唯一标识用户昵称: 用户昵称#0000

web/src/routes/Entry/GuestView.tsx

@@ -0,0 +1,75 @@
+import { Spinner } from '@/components/Spinner';
+import { useSearchParam } from '@/hooks/useSearchParam';
+import { setUserJWT } from '@/utils/jwt-helper';
+import { setGlobalUserLoginInfo } from '@/utils/user-helper';
+import { Icon } from '@iconify/react';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router';
+import {
+  createTemporaryUser,
+  isValidStr,
+  t,
+  useAsyncRequest,
+} from 'tailchat-shared';
+import { string } from 'yup';
+import { useNavToView } from './utils';
+
+export const GuestView: React.FC = React.memo(() => {
+  const history = useHistory();
+  const navToView = useNavToView();
+  const navRedirect = useSearchParam('redirect');
+  const [nickname, setNickname] = useState('');
+
+  const [{ loading }, handleCreateTemporaryUser] = useAsyncRequest(async () => {
+    await string().required(t('昵称不能为空')).validate(nickname);
+
+    const data = await createTemporaryUser(nickname);
+
+    setGlobalUserLoginInfo(data);
+    await setUserJWT(data.token);
+
+    if (isValidStr(navRedirect)) {
+      history.push(decodeURIComponent(navRedirect));
+    } else {
+      history.push('/main');
+    }
+  }, [nickname, history, navRedirect]);
+
+  return (
+    <div className="w-96 text-white">
+      <div className="mb-4 text-2xl">{t('创建访客')}</div>
+
+      <div>
+        <div className="mb-4">
+          <div className="mb-2">{t('昵称')}</div>
+          <input
+            className="appearance-none rounded-md relative block w-full px-4 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 text-base sm:text-sm"
+            placeholder={t('想要让大家如何称呼你')}
+            type="text"
+            value={nickname}
+            onChange={(e) => setNickname(e.target.value)}
+          />
+        </div>
+
+        <button
+          className="w-full py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+          disabled={loading}
+          onClick={handleCreateTemporaryUser}
+        >
+          {loading && <Spinner />}
+          {t('立即进入')}
+        </button>
+
+        <button
+          className="w-full py-2 px-4 border border-transparent text-sm text-left font-medium text-white disabled:opacity-50"
+          disabled={loading}
+          onClick={() => navToView('/entry/login')}
+        >
+          <Icon icon="mdi:arrow-left" className="mr-1 inline" />
+          {t('返回登录')}
+        </button>
+      </div>
+    </div>
+  );
+});
+GuestView.displayName = 'GuestView';

web/src/routes/Entry/LoginView.tsx

@@ -1,13 +1,15 @@
 import { Icon } from '@iconify/react';
 import { Divider } from 'antd';
 import { isValidStr, loginWithEmail, t, useAsyncFn } from 'tailchat-shared';
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { Spinner } from '../../components/Spinner';
 import { string } from 'yup';
 import { useHistory } from 'react-router';
 import { setUserJWT } from '../../utils/jwt-helper';
 import { setGlobalUserLoginInfo } from '../../utils/user-helper';
 import { useSearchParam } from '@/hooks/useSearchParam';
+import { DevContainer } from '@/components/DevContainer';
+import { useNavToView } from './utils';
 
 /**
  * TODO:
@@ -58,13 +60,7 @@ export const LoginView: React.FC = React.memo(() => {
     }
   }, [email, password, history, navRedirect]);
 
-  const toRegisterView = useCallback(() => {
-    // 携带上下文切换路由
-    history.push({
-      ...history.location,
-      pathname: '/entry/register',
-    });
-  }, [history]);
+  const navToView = useNavToView();
 
   return (
     <div className="w-96 text-white">
@@ -109,11 +105,22 @@ export const LoginView: React.FC = React.memo(() => {
         <button
           className="w-full py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white focus:outline-none disabled:opacity-50"
           disabled={loading}
-          onClick={toRegisterView}
+          onClick={() => navToView('/entry/register')}
         >
           {t('注册账号')}
           <Icon icon="mdi:arrow-right" className="ml-1 inline" />
         </button>
+
+        <DevContainer>
+          <button
+            className="w-full py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white focus:outline-none disabled:opacity-50"
+            disabled={loading}
+            onClick={() => navToView('/entry/guest')}
+          >
+            {t('游客访问')}
+            <Icon icon="mdi:arrow-right" className="ml-1 inline" />
+          </button>
+        </DevContainer>
       </form>
     </div>
   );

web/src/routes/Entry/RegisterView.tsx

@@ -1,5 +1,5 @@
 import { isValidStr, registerWithEmail, t, useAsyncFn } from 'tailchat-shared';
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { Spinner } from '../../components/Spinner';
 import { string } from 'yup';
 import { Icon } from '@iconify/react';
@@ -7,6 +7,7 @@ import { useHistory } from 'react-router';
 import { setUserJWT } from '../../utils/jwt-helper';
 import { setGlobalUserLoginInfo } from '../../utils/user-helper';
 import { useSearchParam } from '@/hooks/useSearchParam';
+import { useNavToView } from './utils';
 
 /**
  * 注册视图
@@ -40,13 +41,7 @@ export const RegisterView: React.FC = React.memo(() => {
     }
   }, [email, password, navRedirect]);
 
-  const toLoginView = useCallback(() => {
-    // 携带上下文切换路由
-    history.push({
-      ...history.location,
-      pathname: '/entry/login',
-    });
-  }, [history]);
+  const navToView = useNavToView();
 
   return (
     <div className="w-96 text-white">
@@ -90,7 +85,7 @@ export const RegisterView: React.FC = React.memo(() => {
         <button
           className="w-full py-2 px-4 border border-transparent text-sm text-left font-medium text-white disabled:opacity-50"
           disabled={loading}
-          onClick={toLoginView}
+          onClick={() => navToView('/entry/login')}
         >
           <Icon icon="mdi:arrow-left" className="mr-1 inline" />
           {t('返回登录')}

web/src/routes/Entry/index.tsx

@@ -6,6 +6,7 @@ import styles from './index.module.less';
 import loginPatternUrl from '@assets/images/login-pattern.svg';
 import { RegisterView } from './RegisterView';
 import { useRecordMeasure } from '@/utils/measure-helper';
+import { GuestView } from './GuestView';
 
 const EntryRoute = React.memo(() => {
   useRecordMeasure('AppEntryRenderStart');
@@ -22,6 +23,7 @@ const EntryRoute = React.memo(() => {
         <Switch>
           <Route path="/entry/login" component={LoginView} />
           <Route path="/entry/register" component={RegisterView} />
+          <Route path="/entry/guest" component={GuestView} />
           <Redirect to="/entry/login" />
         </Switch>
       </div>

web/src/routes/Entry/utils.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { useHistory } from 'react-router';
+
+/**
+ * 导航到特定视图
+ */
+export function useNavToView() {
+  const history = useHistory();
+
+  const navToView = useCallback(
+    (pathname: string) => {
+      // 携带上下文切换路由
+      history.push({
+        ...history.location,
+        pathname,
+      });
+    },
+    [history]
+  );
+
+  return navToView;
+}