add DeckUploder

src/ui/BuildDeck/DeckSelect.tsx

@@ -3,8 +3,13 @@ import {
   DownloadOutlined,
   FileAddOutlined,
   PlusOutlined,
+  UploadOutlined,
 } from "@ant-design/icons";
-import { Button, Dropdown, MenuProps } from "antd";
+import { App, Button, Dropdown, MenuProps, Upload, UploadProps } from "antd";
+import React, { useState } from "react";
+import YGOProDeck from "ygopro-deck-encode";
+
+import { deckStore, IDeck } from "@/stores";
 
 import styles from "./DeckSelect.module.scss";
 
@@ -16,6 +21,32 @@ export const DeckSelect: React.FC<{
   onDownload: (deckName: string) => void;
   onAdd: () => void;
 }> = ({ decks, selected, onSelect, onDelete, onDownload, onAdd }) => {
+  const [newDeck, setNewDeck] = useState<IDeck | undefined>(undefined);
+  const { modal } = App.useApp();
+  const showUploadModal = () => {
+    const { destroy } = modal.info({
+      width: 500,
+      centered: true,
+      title: "请上传YDK文件",
+      icon: null,
+      content: (
+        <DeckUploader
+          onLoaded={(deck) => {
+            // 这里不生效，很奇怪
+            setNewDeck(deck);
+          }}
+        />
+      ),
+      okText: "上传",
+      onCancel: () => destroy(),
+      onOk: async () => {
+        if (newDeck) {
+          await deckStore.add(newDeck);
+        }
+      },
+    });
+  };
+
   const items: MenuProps["items"] = [
     {
       key: "1",
@@ -27,9 +58,10 @@ export const DeckSelect: React.FC<{
       key: "2",
       label: "导入卡组",
       icon: <FileAddOutlined />,
-      onClick: () => {},
+      onClick: showUploadModal,
     },
   ];
+
   return (
     <>
       <div className={styles["deck-select"]}>
@@ -73,6 +105,48 @@ export const DeckSelect: React.FC<{
   );
 };
 
+const DeckUploader: React.FC<{ onLoaded: (deck: IDeck) => void }> = ({
+  onLoaded,
+}) => {
+  const [uploadState, setUploadState] = useState("");
+  const uploadProps: UploadProps = {
+    name: "file",
+    onChange(info) {
+      if (uploadState != "ERROR") {
+        info.file.status = "done";
+      }
+    },
+    beforeUpload(file, _) {
+      const reader = new FileReader();
+      reader.readAsText(file);
+      reader.onload = (e) => {
+        const ydk = e.target?.result as string;
+        const deck = YGOProDeck.fromYdkString(ydk);
+
+        if (
+          !(
+            deck.main.length === 0 &&
+            deck.extra.length === 0 &&
+            deck.side.length === 0
+          )
+        ) {
+          // YDK解析成功
+          onLoaded({ deckName: file.name, ...deck });
+        } else {
+          alert(`${file.name}解析失败，请检查格式是否正确。`);
+          setUploadState("ERROR");
+        }
+      };
+    },
+  };
+
+  return (
+    <Upload {...uploadProps}>
+      <Button icon={<UploadOutlined />}>点击上传</Button>
+    </Upload>
+  );
+};
+
 /** 阻止事件冒泡 */
 const cancelBubble =
   <T,>(fn: (e: React.SyntheticEvent) => T) =>