add WatchModal

src/ui/Match/WatchModal.tsx

+import { Modal } from "antd";
+import React from "react";
+import { proxy, useSnapshot } from "valtio";
+
+const localStore = proxy({
+  open: false,
+});
+
+export const WatchModal: React.FC = () => {
+  const { open } = useSnapshot(localStore);
+  return (
+    <Modal
+      title="观看回放"
+      open={open}
+      centered
+      footer={<></>}
+      onCancel={() => (localStore.open = false)}
+    ></Modal>
+  );
+};
+
+export const watchOpen = () => (localStore.open = true);

src/ui/Match/index.tsx

@@ -18,6 +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";
 
 const NeosConfig = useConfig();
 
@@ -77,9 +78,6 @@ export const Component: React.FC = () => {
   // 自定义房间
   const onCustomRoom = () => (matchStore.open = true);
 
-  // 观战列表
-  const onWatchList = () => message.error("开发中，敬请期待");
-
   useEffect(() => {
     if (joined) {
       setSingleLoading(false);
@@ -145,7 +143,7 @@ export const Component: React.FC = () => {
               title="MC观战列表"
               desc="观看萌卡MyCard上正在进行的决斗。"
               icon={<PlayCircleFilled />}
-              onClick={onWatchList}
+              onClick={watchOpen}
             />
             <Mode
               title="单人模式"
@@ -176,6 +174,7 @@ export const Component: React.FC = () => {
       </div>
       <MatchModal />
       <ReplayModal />
+      <WatchModal />
     </>
   );
 };