update MdproDeckBlock

src/ui/BuildDeck/DeckDatabase/DeckResults/index.module.scss

@@ -3,18 +3,43 @@
 }
 
 .search-decks {
-  --deck-width: 10rem;
+  --deck-width: 8rem;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--deck-width), 1fr));
   padding: 0.75rem;
-  gap: 0.625rem;
+  gap: 0.5rem;
 }
 
 .mdpro-deck {
+  position: relative;
+  display: flex;
+  width: 8rem;
+  height: 8rem;
+  background-color: black;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  border: 1px solid grey;
+  border-radius: 10% 2%;
+  cursor: pointer;
+
+  &:hover {
+    background-color: grey;
+  }
+
   img {
-      width: 6rem;
+    width: 4rem;
+  }
+
+  .text {
+    text-align: center;
+    font-size: 0.8rem;
   }
+
 }
+.copy-btn {
+    background-color: #4B4B4B;
+  }
 
 .empty {
   gap: 1.25rem;

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

-import { message, Pagination } from "antd";
+import { CopyOutlined } from "@ant-design/icons";
+import { Button, message, Pagination, Popover } from "antd";
 import React, { memo, useEffect } from "react";
 import { type INTERNAL_Snapshot as Snapshot, proxy, useSnapshot } from "valtio";
 
@@ -97,13 +98,39 @@ export const DeckResults: React.FC = memo(() => {
 });
 
 const MdproDeckBlock: React.FC<Snapshot<MdproDeck>> = (deck) => (
-  <div className={styles["mdpro-deck"]}>
-    <img
-      src={`${assetsPath}/deck-cases/DeckCase${deck.deckCase
-        .toString()
-        .slice(-4)}_L.png`}
-    />
-  </div>
+  <Popover
+    placement="topRight"
+    content={
+      <Button className={styles["copy-btn"]} icon={<CopyOutlined />}>
+        复制
+      </Button>
+    }
+  >
+    <div className={styles["mdpro-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>
+  </Popover>
 );
 
+function truncateString(str: string, maxLen: number): string {
+  const length = Array.from(str).length;
+
+  if (length <= maxLen) {
+    return str;
+  }
+
+  const start = Array.from(str).slice(0, 3).join("");
+  const end = Array.from(str).slice(-3).join("");
+
+  return `${start}...${end}`;
+}
+
 export const freshMdrpoDecks = (query: string) => (store.query = query);