add delete deck function

src/ui/BuildDeck/DeckDatabase/DeckResults/index.tsx

-import { App, message, Pagination } from "antd";
+import { App, Dropdown, message, Pagination } from "antd";
+import { MessageInstance } from "antd/es/message/interface";
 import React, { memo, useEffect } from "react";
 import { type INTERNAL_Snapshot as Snapshot, proxy, useSnapshot } from "valtio";
 import YGOProDeck from "ygopro-deck-encode";
 
-import { getPersonalList, mgetDeck, pullDecks } from "@/api";
+import { deleteDeck, getPersonalList, mgetDeck, pullDecks } from "@/api";
 import { MdproDeckLike } from "@/api/mdproDeck/schema";
 import { useConfig } from "@/config";
 import { accountStore } from "@/stores";
@@ -44,47 +45,7 @@ export const DeckResults: React.FC = memo(() => {
     if (snap.onlyMine) {
       // show only decks uploaded by myself
 
-      const update = async () => {
-        const user = accountStore.user;
-        if (user) {
-          const resp = await getPersonalList({
-            userID: user.id,
-            token: user.token,
-          });
-
-          if (resp) {
-            if (resp.code !== 0 || resp.data === undefined) {
-              message.error(resp.message);
-            } else {
-              const decks = resp.data;
-
-              const total = decks.length;
-              store.total = total;
-              if (total === 0) {
-                store.page = 1;
-                store.decks = [];
-              } else {
-                if (total <= (store.page - 1) * PAGE_SIZE)
-                  store.page = Math.floor((total - 1) / PAGE_SIZE) + 1;
-                store.decks = decks.slice(
-                  (store.page - 1) * PAGE_SIZE,
-                  store.page * PAGE_SIZE,
-                );
-              }
-            }
-          } else {
-            message.error("获取个人卡组列表失败，请检查自己的网络状况。");
-          }
-        } else {
-          message.error("需要先登录萌卡账号才能查看自己的在线卡组");
-          // set to default
-          store.page = 1;
-          store.decks = [];
-          store.total = 0;
-        }
-      };
-
-      update();
+      updatePersonalList(message);
     } else {
       const update = async () => {
         const resp = await pullDecks({
@@ -133,7 +94,11 @@ export const DeckResults: React.FC = memo(() => {
         <div className={styles.container}>
           <div className={styles["search-decks"]}>
             {snap.decks.map((deck) => (
-              <MdproDeckBlock key={deck.deckId} {...deck} />
+              <MdproDeckBlock
+                key={deck.deckId}
+                deck={deck}
+                onlyMine={snap.onlyMine}
+              />
             ))}
           </div>
           <div style={{ textAlign: "center", padding: "0.625rem 0 1.25rem" }}>
@@ -157,22 +122,103 @@ export const DeckResults: React.FC = memo(() => {
   );
 });
 
-const MdproDeckBlock: React.FC<Snapshot<MdproDeckLike>> = (deck) => (
-  <div
-    className={styles["mdpro-deck"]}
-    onClick={async () => await copyMdproDeckToEditing(deck)}
-  >
-    <img
-      src={`${assetsPath}/deck-cases/DeckCase${deck.deckCase
-        .toString()
-        .slice(-4)}_L.png`}
-    />
-    <div className={styles.text}>
-      <div>{truncateString(deck.deckName, 8)}</div>
-      <div>{`By ${truncateString(deck.deckContributor, 6)}`}</div>
-    </div>
-  </div>
-);
+const MdproDeckBlock: React.FC<{
+  deck: Snapshot<MdproDeckLike>;
+  onlyMine: boolean;
+}> = ({ deck, onlyMine }) => {
+  const { message } = App.useApp();
+  const user = accountStore.user;
+
+  const onDelete = async () => {
+    if (user) {
+      const resp = await deleteDeck(user.id, user.token, deck.deckId);
+
+      if (resp?.code === 0 && resp.data === true) {
+        message.success(
+          "删除卡组成功，由于缓存的原因请稍等片刻后重新刷新页面。",
+        );
+
+        // fresh when deletion succeed
+        await updatePersonalList(message);
+      } else if (resp !== undefined && resp.message !== "") {
+        message.error(resp.message);
+      } else {
+        message.error("删除卡组失败，请检查自己的网络状况。");
+      }
+    } else {
+      message.error("需要先登录萌卡才能删除卡组。");
+    }
+  };
+
+  const items = [];
+  if (onlyMine) {
+    items.push({ key: 0, label: "删除", danger: true, onClick: onDelete });
+  }
+
+  return (
+    <Dropdown
+      menu={{
+        items,
+      }}
+      trigger={["contextMenu"]}
+    >
+      <div
+        className={styles["mdpro-deck"]}
+        onClick={async () => await copyMdproDeckToEditing(deck)}
+      >
+        <img
+          src={`${assetsPath}/deck-cases/DeckCase${deck.deckCase
+            .toString()
+            .slice(-4)}_L.png`}
+        />
+        <div className={styles.text}>
+          <div>{truncateString(deck.deckName, 8)}</div>
+          <div>{`By ${truncateString(deck.deckContributor, 6)}`}</div>
+        </div>
+      </div>
+    </Dropdown>
+  );
+};
+
+const updatePersonalList = async (message: MessageInstance) => {
+  const user = accountStore.user;
+  if (user) {
+    const resp = await getPersonalList({
+      userID: user.id,
+      token: user.token,
+    });
+
+    if (resp) {
+      if (resp.code !== 0 || resp.data === undefined) {
+        message.error(resp.message);
+      } else {
+        const decks = resp.data;
+
+        const total = decks.length;
+        store.total = total;
+        if (total === 0) {
+          store.page = 1;
+          store.decks = [];
+        } else {
+          if (total <= (store.page - 1) * PAGE_SIZE)
+            store.page = Math.floor((total - 1) / PAGE_SIZE) + 1;
+          store.decks = decks.slice(
+            (store.page - 1) * PAGE_SIZE,
+            store.page * PAGE_SIZE,
+          );
+        }
+      }
+    } else {
+      message.error("获取个人卡组列表失败，请检查自己的网络状况。");
+    }
+  } else {
+    message.error("需要先登录萌卡账号才能查看自己的在线卡组");
+    // set to default
+    store.page = 1;
+    store.decks = [];
+    store.total = 0;
+  }
+};
 
 const copyMdproDeckToEditing = async (mdproDeck: MdproDeckLike) => {
   // currently the content of the deck, which we named `Ydk`,