handle create new deck

src/ui/BuildDeck/DeckSelect.tsx

@@ -5,7 +5,15 @@ import {
   PlusOutlined,
   UploadOutlined,
 } from "@ant-design/icons";
-import { App, Button, Dropdown, MenuProps, Upload, UploadProps } from "antd";
+import {
+  App,
+  Button,
+  Dropdown,
+  Input,
+  MenuProps,
+  Upload,
+  UploadProps,
+} from "antd";
 import React, { useRef, useState } from "react";
 import YGOProDeck from "ygopro-deck-encode";
 
@@ -22,13 +30,38 @@ export const DeckSelect: React.FC<{
   onAdd: () => void;
 }> = ({ decks, selected, onSelect, onDelete, onDownload, onAdd }) => {
   const newDeck = useRef<IDeck | null>(null);
+  const newDeckName = useRef<string | null>(null);
   const { modal } = App.useApp();
+  const modalProps = { width: 500, centered: true, icon: null };
+  const showCreateModal = () => {
+    const { destroy } = modal.info({
+      ...modalProps,
+      title: "请输入新卡组名称",
+      content: (
+        <Input
+          onChange={(e) => {
+            newDeckName.current = e.target.value;
+          }}
+        />
+      ),
+      okText: "新建",
+      onCancel: () => destroy(),
+      onOk: async () => {
+        if (newDeckName.current && newDeckName.current !== "") {
+          await deckStore.add({
+            deckName: newDeckName.current,
+            main: [],
+            extra: [],
+            side: [],
+          });
+        }
+      },
+    });
+  };
   const showUploadModal = () => {
     const { destroy } = modal.info({
-      width: 500,
-      centered: true,
+      ...modalProps,
       title: "请上传YDK文件",
-      icon: null,
       content: (
         <DeckUploader
           onLoaded={(deck) => {
@@ -51,7 +84,7 @@ export const DeckSelect: React.FC<{
       key: "1",
       label: "新建卡组",
       icon: <PlusOutlined />,
-      onClick: () => {},
+      onClick: showCreateModal,
     },
     {
       key: "2",