update small

src/ui/NewSide/index.tsx

 import { CheckOutlined, UndoOutlined } from "@ant-design/icons";
-import { Button, Space } from "antd";
+import { App, Button, Space } from "antd";
 import React, { useState } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 
-import { fetchCard } from "@/api";
+import { CardMeta, fetchCard } from "@/api";
+import { isExtraDeckCard } from "@/common";
 import { deckStore, IDeck } from "@/stores";
 
 import { CardDetail } from "../BuildDeck/CardDetail";
-import { Background, DeckZone, ScrollableArea } from "../Shared";
+import { Background, DeckZone, ScrollableArea, Type } from "../Shared";
 import { Chat } from "../WaitRoom/Chat";
 import styles from "./index.module.scss";
 
 export const Component: React.FC = () => {
-  const [deck, setDeck] = useState<IDeck>({ ...deckStore.decks[0] });
+  const { message } = App.useApp();
+  const { decks } = deckStore;
+  const initialDeck = JSON.parse(JSON.stringify(decks[0]));
+  const [deck, setDeck] = useState<IDeck>(initialDeck);
+  const [selectedCard, setSelectedCard] = useState(0);
+  const canAdd = (card: CardMeta, type: Type, _source: Type | "search") => {
+    const cardType = card.data.type ?? 0;
+    if (
+      (type === "extra" && !isExtraDeckCard(cardType)) ||
+      (type === "main" && isExtraDeckCard(cardType))
+    ) {
+      return { result: false, reason: "卡片种类不符合" };
+    } else {
+      return { result: true, reason: "" };
+    }
+  };
+  const onChange = (
+    card: CardMeta,
+    source: Type | "search",
+    destination: Type,
+  ) => {
+    setDeck((prev) => {
+      const deck = { ...prev };
+      if (source !== "search") {
+        const removeIndex = deck[source].findIndex((id) => id === card.id);
+        if (removeIndex !== -1) {
+          deck[source].splice(removeIndex, 1);
+        }
+      }
+      deck[destination].push(card.id);
+
+      return deck;
+    });
+  };
+  const onReset = () => {
+    setDeck(JSON.parse(JSON.stringify(decks[0])));
+    message.info("重置成功");
+  };
+
   return (
     <DndProvider backend={HTML5Backend}>
       <Background />
@@ -26,7 +65,12 @@ export const Component: React.FC = () => {
             <Space className={styles.title}>
               <div>请拖动更换副卡组</div>
               <Space style={{ marginRight: 6 }}>
-                <Button type="text" size="small" icon={<UndoOutlined />}>
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<UndoOutlined />}
+                  onClick={onReset}
+                >
                   重置
                 </Button>
                 <Button type="primary" size="small" icon={<CheckOutlined />}>
@@ -40,18 +84,16 @@ export const Component: React.FC = () => {
                   key={type}
                   type={type}
                   cards={[...deck[type]].map((id) => fetchCard(id))}
-                  canAdd={(card, type, source) => {
-                    return { result: true, reason: "" };
-                  }}
-                  onChange={(card, source, destination) => {}}
-                  onElementClick={(card) => {}}
+                  canAdd={canAdd}
+                  onChange={onChange}
+                  onElementClick={(card) => setSelectedCard(card.id)}
                 />
               ))}
             </ScrollableArea>
           </div>
         </div>
         <div className={styles["detail-container"]}>
-          <CardDetail code={10000} open={true} onClose={() => {}} />
+          <CardDetail code={selectedCard} open={true} onClose={() => {}} />
         </div>
       </div>
     </DndProvider>