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,46 +104,54 @@ 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) => (
-            <div key={room.id}>
-              <div
-                className={classNames(styles.item, {
-                  [styles["item-selected"]]: watchID && watchID === room.id,
-                })}
-                onClick={() => (watchStore.watchID = room.id)}
-              >
-                <div className={styles.avatar}>
-                  <Avatar
-                    src={avatarApi.replace(
-                      "{username}",
-                      room.users?.at(0)?.username ?? "?",
-                    )}
-                  />
-                  <Avatar
-                    src={avatarApi.replace(
-                      "{username}",
-                      room.users?.at(1)?.username ?? "?",
-                    )}
-                  />
+          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, {
+                    [styles["item-selected"]]: watchID && watchID === room.id,
+                  })}
+                  onClick={() => (watchStore.watchID = room.id)}
+                >
+                  <div className={styles.avatar}>
+                    <Avatar
+                      src={avatarApi.replace(
+                        "{username}",
+                        room.users?.at(0)?.username ?? "?",
+                      )}
+                    />
+                    <Avatar
+                      src={avatarApi.replace(
+                        "{username}",
+                        room.users?.at(1)?.username ?? "?",
+                      )}
+                    />
+                  </div>
+                  <div className={styles.title}>
+                    {`${room.users?.at(0)?.username} 与 ${room.users?.at(1)
+                      ?.username} 的决斗`}
+                  </div>
+                  <div className={styles.mode}>竞技匹配</div>
                 </div>
-                <div className={styles.title}>
-                  {`${room.users?.at(0)?.username} 与 ${room.users?.at(1)
-                    ?.username} 的决斗`}
-                </div>
-                <div className={styles.mode}>竞技匹配</div>
+                <Divider className={styles.divider} />
               </div>
-              <Divider className={styles.divider} />
-            </div>
-          ))
+            ))
         )}
       </ScrollableArea>
     </div>