support search

src/ui/Match/WatchContent.tsx

@@ -47,6 +47,7 @@ export const WatchContent: React.FC = () => {
   const [rooms, setRooms] = useState<Room[]>([]);
   const { message } = App.useApp();
   const { watchID } = useSnapshot(watchStore);
+  const [query, setQuery] = useState("");
   // 暂时只支持竞技匹配的观战，TODO：后面需要加上娱乐匹配的支持
   const url = new URL(athleticWatchUrl);
   url.searchParams.set("filter", "started");
@@ -103,16 +104,24 @@ export const WatchContent: React.FC = () => {
       <div className={styles.search}>
         <Input
           className={styles.input}
-          placeholder="搜索房间"
+          placeholder="通过玩家用户名搜索房间"
           bordered={false}
           suffix={<Button type="text" icon={<SearchOutlined />} />}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
         />
       </div>
       <ScrollableArea maxHeight="50vh">
         {readyState === ReadyState.CONNECTING || rooms.length === 0 ? (
           <Empty />
         ) : (
-          rooms.map((room) => (
+          rooms
+            .filter(
+              (room) =>
+                room.users?.at(0)?.username.includes(query) ||
+                room.users?.at(1)?.username.includes(query),
+            )
+            .map((room) => (
               <div key={room.id}>
                 <div
                   className={classNames(styles.item, {