diff --git a/web/src/App.tsx b/web/src/App.tsx index 72342454..80244fda 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -13,6 +13,10 @@ const EntryRoute = Loadable(() => import('./routes/Entry').then((module) => module.EntryRoute) ); +const InviteRoute = Loadable(() => + import('./routes/Invite').then((module) => module.InviteRoute) +); + const AppProvider: React.FC = React.memo((props) => { const getPopupContainer = useCallback( (triggerNode: HTMLElement): HTMLElement => { @@ -52,6 +56,7 @@ export const App: React.FC = React.memo(() => { + diff --git a/web/src/routes/Invite/index.tsx b/web/src/routes/Invite/index.tsx new file mode 100644 index 00000000..aa7c6a73 --- /dev/null +++ b/web/src/routes/Invite/index.tsx @@ -0,0 +1,43 @@ +import { Button, Divider } from 'antd'; +import React, { useCallback } from 'react'; +import { useHistory, useParams } from 'react-router'; + +/** + * 邀请界面路由 + */ +export const InviteRoute: React.FC = React.memo(() => { + const history = useHistory(); + const { inviteCode } = useParams<{ inviteCode: string }>(); + const isLogin = true; + + const handleRegister = useCallback(() => { + history.push( + `/entry/register?redirect=${encodeURIComponent(location.pathname)}` + ); + }, []); + + const handleJoinGroup = useCallback(() => { + // TODO + console.log('TODO'); + }, []); + + return ( +
+
+
{inviteCode}
+
xxx 邀请您加入
+
[群组名]
+
成员数:
+ + + + {isLogin ? ( + + ) : ( + + )} +
+
+ ); +}); +InviteRoute.displayName = 'InviteRoute';