decouple DeckCard

src/ui/BuildDeck/index.tsx

@@ -438,10 +438,14 @@ const DeckZone: React.FC<{
     >
       <div className={styles["card-continer"]}>
         {cards.map((card, i) => (
-          <Card
+          <DeckCard
             value={card}
             key={card.id + i + type}
             source={type}
+            onClick={() => {
+              selectedCard.id = card.id;
+              selectedCard.open = true;
+            }}
             onRightClick={() => editDeckStore.remove(type, card)}
           />
         ))}
@@ -473,7 +477,15 @@ const SearchResults: React.FC<{
     <>
       <div className={styles["search-cards"]}>
         {currentData.map((card) => (
-          <Card value={card} key={card.id} source="search" />
+          <DeckCard
+            value={card}
+            key={card.id}
+            source="search"
+            onClick={() => {
+              selectedCard.id = card.id;
+              selectedCard.open = true;
+            }}
+          />
         ))}
       </div>
       {results.length > itemsPerPage && (
@@ -497,11 +509,12 @@ const SearchResults: React.FC<{
 });
 
 /** 本组件内使用的单张卡片，增加了文字在图片下方 */
-const Card: React.FC<{
+export const DeckCard: React.FC<{
   value: CardMeta;
   source: Type | "search";
   onRightClick?: () => void;
-}> = memo(({ value, source, onRightClick }) => {
+  onClick?: () => void;
+}> = memo(({ value, source, onRightClick, onClick }) => {
   const ref = useRef<HTMLDivElement>(null);
   const [{ isDragging }, drag] = useDrag({
     type: "Card",
@@ -518,10 +531,7 @@ const Card: React.FC<{
       className={styles.card}
       ref={ref}
       style={{ opacity: isDragging && source !== "search" ? 0 : 1 }}
-      onClick={() => {
-        selectedCard.id = value.id;
-        selectedCard.open = true;
-      }}
+      onClick={onClick}
       onContextMenu={(e) => {
         e.preventDefault();
         onRightClick?.();