optimize

src/ui/Side/index.tsx

 import { App, Button, Modal } from "antd";
-import React from "react";
+import React, { useEffect } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useSnapshot } from "valtio";
 
 import { CardMeta, sendUpdateDeck } from "@/api";
-import { deckStore, sideStore } from "@/stores";
+import { chatStore, deckStore, sideStore } from "@/stores";
 
 import { DeckEditor } from "../BuildDeck";
 import { editDeckStore } from "../BuildDeck/store";
@@ -16,7 +16,8 @@ export const SideModal: React.FC = () => {
   const deck = deckStore.decks[0];
   const { message } = App.useApp();
   const { deckName, main, extra, side } = editDeckStore;
-  const { siding } = useSnapshot(sideStore);
+  const { siding, ready } = useSnapshot(sideStore);
+  const { message: chat } = useSnapshot(chatStore);
 
   const cardMeta2Id = (meta: CardMeta) => meta.id;
   const handleSummit = () => {
@@ -30,12 +31,28 @@ export const SideModal: React.FC = () => {
     editDeckStore.edited = false;
   };
 
+  useEffect(() => {
+    if (ready) {
+      message.info("副卡组更换成功，请耐心等待其他玩家更换卡组");
+    }
+  }, [ready]);
+  useEffect(() => {
+    if (chat !== "") {
+      message.info(chat);
+    }
+  }, [chat]);
+
   return (
     <Modal
       title="请选择更换副卡组"
       open={siding}
       width={700}
-      footer={<Button onClick={handleSummit}>副卡组更换完毕</Button>}
+      closable={false}
+      footer={
+        <Button disabled={ready} onClick={handleSummit}>
+          副卡组更换完毕
+        </Button>
+      }
     >
       <DndProvider backend={HTML5Backend}>
         <Background />