refact(app): FindUserPage

src/App.tsx

@@ -2,20 +2,20 @@ import { useCallback } from "react";
 import { ClubSelector } from "./components/GameSelector";
 import type { IEventInfo } from "./types";
 import { useNavigate } from "react-router";
+import { FloatButton, Typography } from "antd";
+import { SearchOutlined } from "@ant-design/icons";
 import "./index.css";
-import { FindUserButton } from "./components/FindUser";
 
 export function App() {
   const navigate = useNavigate();
   const handleGameClick = useCallback(async (game: IEventInfo) => {
     navigate(`/event/${game.matchId}`);
   }, []);
-
   return (
     <div className="app">
-      <h1>开球网比赛分组预测</h1>
+      <Typography.Title level={1}>开球网比赛分组预测</Typography.Title>
       <ClubSelector onGameClick={handleGameClick} />
-      <FindUserButton />
+      <FloatButton icon={<SearchOutlined />} onClick={() => navigate('/find')} />
     </div>
   );
 }

src/frontend.tsx

@@ -14,6 +14,7 @@ import { createBrowserRouter, RouterProvider, Outlet, useNavigation } from "reac
 import ProfilePage from "./page/ProfilePage";
 import EventPage from "./page/EventPage";
 import type { MatchInfo, XCXMember } from "./types";
+import { FindUserPage } from "./page/FindUserPage";
 
 const elem = document.getElementById("root")!;
 
@@ -58,6 +59,10 @@ const route = createBrowserRouter([
       },
     ],
   },
+  {
+    path: 'find',
+    Component: FindUserPage,
+  }
 ]);
 
 function HydrateFallback() {

src/page/FindUserPage.tsx

@@ -1,32 +1,21 @@
-import { SearchOutlined } from "@ant-design/icons";
 import { useLocalStorageState, useRequest } from "ahooks";
-import { FloatButton, Drawer, Input, Table } from "antd";
-import { useState } from "react";
-import type { XCXFindUser, XCXFindUserResp } from "../../types";
-import User from "../User";
-import { SEX } from "../../utils";
+import { Input, Table, Spin, Typography, Flex, Space } from "antd";
+import type { XCXFindUser, XCXFindUserResp } from "../types";
+import User from "../components/User";
+import { SEX } from "../utils";
 import dayjs from "dayjs";
 
-export function FindUserButton() {
-  const [open, setOpen] = useState(false);
+export function FindUserPage() {
   const [searchKey, setSearchKey] = useLocalStorageState<string>('findUser:searchKey');
   const findUserReq = useRequest(async (page: number = 1) => {
     const findOutUsers: XCXFindUserResp = await (await fetch(`/api/user/find?page=${page}&key=${searchKey}`)).json();
     return findOutUsers;
   }, { manual: true, refreshDeps: [searchKey], cacheKey: 'findUser:result' });
   return (
-    <>
-      <FloatButton
-        icon={<SearchOutlined />}
-        onClick={() => setOpen(true)}
-      />
-      <Drawer
-        placement="bottom"
-        open={open}
-        onClose={() => setOpen(false)}
-        loading={findUserReq.loading}
-        size="80vh"
-      >
+    <div className="app">
+      <Typography.Title level={1}>查找用户</Typography.Title>
+      <Spin spinning={findUserReq.loading}>
+        <Flex vertical gap={48} align="center">
         <Input.Search
           allowClear
           size="large"
@@ -37,6 +26,7 @@ export function FindUserButton() {
         />
         <Table
           size="small"
+          style={{ width: '100%' }}
           rowKey={e => e.uid}
           dataSource={findUserReq.data?.data}
           pagination={{
@@ -64,7 +54,8 @@ export function FindUserButton() {
           <Table.Column align="center" title="性别" dataIndex={'sex'} render={sex => SEX[sex]} />
           <Table.Column align="center" title="年龄" dataIndex={'birthyear'} render={year => year !== '0' ? dayjs().diff(dayjs(year), 'year') : '-'} />
         </Table>
-      </Drawer>
-    </>
+        </Flex>
+      </Spin>
+    </div>
   );
 }

src/services/xcxApi.ts

@@ -52,7 +52,7 @@ export class XCXAPI {
     return (await this.#fetch<{ data: GamesData[] }>(url))?.data;
   }
   async findUser(key: string = '', page: number = 1) {
-    if (!key) return;
+    if (!key) return null;
     const url = `/api/user/lists?page=${page}&key=${key}`;
     return (await this.#fetch<XCXFindUserResp>(url));
   }