Merge branch 'optimize/ui/some' into 'main'

优化一些UI

See merge request mycard/Neos!317

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.tsx → 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 { 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);
 
@@ -34,8 +34,8 @@ export const CheckCounterModal = () => {
   const options = snapCheckCounterModal.options;
   const counterName = fetchStrings(
     Region.Counter,
-    `0x${snapCheckCounterModal.counterType!}`,
-  ); // FIXME: 这里转十六进制的逻辑有问题
+    `0x${snapCheckCounterModal.counterType?.toString(16)}`,
+  );
 
   const [selected, setSelected] = useState(new Array(options.length));
   const sum = selected.reduce((sum, current) => sum + current, 0);
@@ -60,21 +60,13 @@ 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`}
-                  />
-                }
-              >
+            <div key={idx}>
+              <YgoCard code={option.code} className={styles.card} />
               <InputNumber
+                className={styles["input-number"]}
                 min={0}
                 max={option.max}
                 defaultValue={0}
@@ -86,11 +78,10 @@ export const CheckCounterModal = () => {
                   });
                 }}
               />
-              </Card>
-            </Col>
+            </div>
           );
         })}
-      </Row>
+      </div>
     </NeosModal>
   );
 };