optimize CheckCounterModal

src/ui/Duel/Message/CheckCounterModal/index.module.scss

+.container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+
+  .card {
+    width: 100px;
+  }
+
+  .input-number {
+    width: 100px;
+  }
+}

src/ui/Duel/Message/CheckCounterModal/index.tsx

 // 指示器选择弹窗
 import { Omit } from "@react-spring/web";
-import { Button, Card, Col, InputNumber, Row } from "antd";
+import { Button, InputNumber } from "antd";
 import React, { useEffect, useState } from "react";
 import { proxy, useSnapshot } from "valtio";
 
 import { fetchStrings, Region, sendSelectCounterResponse } from "@/api";
-import { useConfig } from "@/config";
+import { YgoCard } from "@/ui/Shared";
 
 import { NeosModal } from "../NeosModal";
+import styles from "./index.module.scss";
 
 interface CheckCounterModalProps {
   isOpen: boolean;
@@ -25,7 +26,6 @@ const defaultProps = {
 
 const localStore = proxy<CheckCounterModalProps>(defaultProps);
 
-const NeosConfig = useConfig();
 export const CheckCounterModal = () => {
   const snapCheckCounterModal = useSnapshot(localStore);
 
@@ -35,7 +35,7 @@ export const CheckCounterModal = () => {
   const counterName = fetchStrings(
     Region.Counter,
     `0x${snapCheckCounterModal.counterType?.toString(16)}`,
-  ); // FIXME: 这里转十六进制的逻辑有问题
+  );
 
   const [selected, setSelected] = useState(new Array(options.length));
   const sum = selected.reduce((sum, current) => sum + current, 0);
@@ -60,37 +60,28 @@ export const CheckCounterModal = () => {
         </Button>
       }
     >
-      <Row>
+      <div className={styles.container}>
         {options.map((option, idx) => {
           return (
-            <Col span={4} key={idx}>
-              <Card
-                hoverable
-                style={{ width: 120 }}
-                cover={
-                  <img
-                    alt={option.code.toString()}
-                    src={`${NeosConfig.cardImgUrl}/${option.code}.jpg`}
-                  />
-                }
-              >
-                <InputNumber
-                  min={0}
-                  max={option.max}
-                  defaultValue={0}
-                  onChange={(value) => {
-                    setSelected((prevSelected) => {
-                      let newSelected = [...prevSelected];
-                      newSelected[idx] = value ?? 0;
-                      return newSelected;
-                    });
-                  }}
-                />
-              </Card>
-            </Col>
+            <div key={idx}>
+              <YgoCard code={option.code} className={styles.card} />
+              <InputNumber
+                className={styles["input-number"]}
+                min={0}
+                max={option.max}
+                defaultValue={0}
+                onChange={(value) => {
+                  setSelected((prevSelected) => {
+                    let newSelected = [...prevSelected];
+                    newSelected[idx] = value ?? 0;
+                    return newSelected;
+                  });
+                }}
+              />
+            </div>
           );
         })}
-      </Row>
+      </div>
     </NeosModal>
   );
 };