add Side.tsx

src/ui/BuildDeck/index.tsx

@@ -147,7 +147,7 @@ export const Component: React.FC = () => {
 Component.displayName = "Build";
 
 /** 正在编辑的卡组 */
-const DeckEditor: React.FC<{
+export const DeckEditor: React.FC<{
   deck: IDeck;
   onClear: () => void;
   onReset: () => void;

src/ui/NeosRouter.tsx

@@ -28,6 +28,10 @@ const router = createBrowserRouter([
         path: "/duel",
         lazy: () => import("./Duel/Main"),
       },
+      {
+        path: "/side",
+        lazy: () => import("./Side"),
+      },
     ],
   },
 ]);

src/ui/Side/index.tsx

+import { App, Button, Modal } from "antd";
+import React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+import { deckStore } from "@/stores";
+
+import { DeckEditor } from "../BuildDeck";
+import { editDeckStore } from "../BuildDeck/store";
+import { iDeckToEditingDeck } from "../BuildDeck/utils";
+import { Background } from "../Shared";
+
+export const Component: React.FC = () => {
+  const deck = deckStore.decks[0];
+  const { message } = App.useApp();
+  return (
+    <Modal
+      title="请选择更换副卡组"
+      open={true}
+      width={700}
+      footer={<Button onClick={() => {}}>副卡组更换完毕</Button>}
+    >
+      <DndProvider backend={HTML5Backend}>
+        <Background />
+        <DeckEditor
+          deck={deck}
+          onClear={() => message.info("对局中清空卡组不怕找不回来吗?!")}
+          onSave={() => message.info("点击右下角按钮确认副卡组更换完毕")}
+          onReset={async () => {
+            editDeckStore.set(await iDeckToEditingDeck(deck));
+          }}
+        />
+      </DndProvider>
+    </Modal>
+  );
+};