optimize

src/ui/Match/WatchModal.tsx

-import { App, List, Modal } from "antd";
+import { App, List } from "antd";
 import React, { useState } from "react";
 import useWebSocket, { ReadyState } from "react-use-websocket";
-import { proxy, useSnapshot } from "valtio";
 
 import { useConfig } from "@/config";
 
@@ -34,21 +33,17 @@ interface Options {
   auto_death: boolean;
 }
 
-const localStore = proxy({
-  open: false,
-});
-
 export const WatchModal: React.FC = () => {
-  const { open } = useSnapshot(localStore);
   const [rooms, setRooms] = useState<Room[]>([]);
   const { message } = App.useApp();
   const url = new URL(athleticWatchUrl);
   url.searchParams.set("filter", "started");
 
   const { readyState } = useWebSocket(url.toString(), {
+    onOpen: () => console.log("watch websocket opened."),
+    onClose: () => console.log("watch websocket closed."),
     onMessage: (event) => {
       const info: Info = JSON.parse(event.data);
-
       switch (info.event) {
         case "init": {
           //@ts-ignore
@@ -92,35 +87,25 @@ export const WatchModal: React.FC = () => {
   });
 
   return (
-    <Modal
-      title="观看回放"
-      open={open}
-      centered
-      footer={<></>}
-      onCancel={() => (localStore.open = false)}
-    >
-      <List
-        itemLayout="vertical"
-        loading={readyState === ReadyState.CONNECTING}
-        size="small"
-        pagination={{
-          position: "bottom",
-          align: "center",
-          pageSize: 5,
-          simple: true,
-        }}
-        dataSource={rooms}
-        renderItem={(room) => (
-          <List.Item key={room.id}>
-            <List.Item.Meta
-              title={`${room.users?.at(0)?.username}与${room.users?.at(1)
-                ?.username}的决斗`}
-            />
-          </List.Item>
-        )}
-      />
-    </Modal>
+    <List
+      itemLayout="vertical"
+      loading={readyState === ReadyState.CONNECTING}
+      size="small"
+      pagination={{
+        position: "bottom",
+        align: "center",
+        pageSize: 5,
+        simple: true,
+      }}
+      dataSource={rooms}
+      renderItem={(room) => (
+        <List.Item key={room.id}>
+          <List.Item.Meta
+            title={`${room.users?.at(0)?.username} 与 ${room.users?.at(1)
+              ?.username} 的决斗`}
+          />
+        </List.Item>
+      )}
+    />
   );
 };
-
-export const watchOpen = () => (localStore.open = true);

src/ui/Match/index.tsx

@@ -18,7 +18,7 @@ import styles from "./index.module.scss";
 import { MatchModal, matchStore } from "./MatchModal";
 import { ReplayModal, replayOpen } from "./ReplayModal";
 import { connectSrvpro } from "./util";
-import { WatchModal, watchOpen } from "./WatchModal";
+import { WatchModal } from "./WatchModal";
 
 const NeosConfig = useConfig();
 
@@ -29,7 +29,7 @@ export const loader: LoaderFunction = () => {
 };
 
 export const Component: React.FC = () => {
-  const { message } = App.useApp();
+  const { message, modal } = App.useApp();
   const serverList = NeosConfig.servers;
   const server = `${serverList[0].ip}:${serverList[0].port}`;
   const { decks } = deckStore;
@@ -143,7 +143,15 @@ export const Component: React.FC = () => {
               title="MC观战列表"
               desc="观看萌卡MyCard上正在进行的决斗。"
               icon={<PlayCircleFilled />}
-              onClick={watchOpen}
+              onClick={() =>
+                modal.info({
+                  icon: null,
+                  footer: <></>,
+                  centered: true,
+                  maskClosable: true,
+                  content: <WatchModal />,
+                })
+              }
             />
             <Mode
               title="单人模式"
@@ -174,7 +182,6 @@ export const Component: React.FC = () => {
       </div>
       <MatchModal />
       <ReplayModal />
-      <WatchModal />
     </>
   );
 };