refactor: 5%

src/ui/Duel/Message/SelectCardsModal/index.scss → src/ui/Duel/Message/SelectCardsModal/index.module.scss

 .checkcard-container {
   position: relative;
-  // padding-left: 10px;
-  // &::after {
-  //   position: absolute;
-  //   width: 3px;
-  //   height: 100%;
-  //   content: "";
-  //   z-index: 1;
-  //   left: 0;
-  //   top: 0;
-  //   background-color: rgb(0, 54, 189);
-  // }
   .btns {
     width: 100%;
     top: 50%;
@@ -43,3 +32,25 @@
     }
   }
 }
+
+.check-group {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.check-card {
+  width: 100px;
+  aspect-ratio: var(--card-ratio);
+  margin-inline-end: 0;
+  margin-block-end: 0;
+  flex-shrink: 0;
+}
+
+.card {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}

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

-import "./index.scss";
-
 import { CheckCard } from "@ant-design/pro-components";
 import { Button, Card, Segmented, Space, Tooltip } from "antd";
-import { CSSProperties, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio";
 
 import type { CardMeta, ygopro } from "@/api";
@@ -13,26 +11,7 @@ import { YgoCard } from "@/ui/Shared";
 import { groupBy } from "../../utils";
 import { showCardModal } from "../CardModal";
 import { NeosModal } from "../NeosModal";
-
-const YgoCardStyle = {
-  width: "100%",
-  height: "100%",
-  position: "absolute",
-  left: 0,
-  top: 0,
-};
-const CheckCardStyle = {
-  width: 100,
-  aspectRatio: 5.9 / 8.6,
-  marginInlineEnd: 0,
-  marginBlockEnd: 0,
-  flexShrink: 0,
-};
-const CheckGroupStyle = {
-  display: "grid",
-  gridTemplateColumns: "repeat(5, 1fr)",
-  gap: 10,
-};
+import styles from "./index.module.scss";
 
 export interface SelectCardsModalProps {
   isOpen: boolean;
@@ -148,11 +127,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
         </>
       }
     >
-      <div className="check-container">
-        <Space
-          direction="vertical"
-          style={{ width: "100%", overflow: "hidden" }}
-        >
+      <Space direction="vertical" style={{ width: "100%", overflow: "hidden" }}>
         <Selector
           zoneOptions={zoneOptions}
           selectedZone={selectedZone}
@@ -161,31 +136,27 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
         {grouped.map(
           (options, i) =>
             options[0] === selectedZone && (
-                <div className="checkcard-container" key={i}>
+              <div className={styles["checkcard-container"]} key={i}>
                 <CheckCard.Group
                   onChange={(res) => {
                     setResult((isMultiple ? res : [res]) as any);
                   }}
                   // TODO 考虑如何设置默认值，比如只有一个的，就直接选中
                   multiple={isMultiple}
-                    style={CheckGroupStyle}
+                  className={styles["check-group"]}
                 >
                   {options[1].map((card, j) => (
-                      <Tooltip
-                        title={card.effectDesc}
-                        placement="bottom"
-                        key={j}
-                      >
+                    <Tooltip title={card.effectDesc} placement="bottom" key={j}>
                       {/* 这儿必须有一个div，不然tooltip不生效 */}
                       <div>
                         <CheckCard
                           cover={
                             <YgoCard
                               code={card.meta.id}
-                                style={YgoCardStyle as CSSProperties}
+                              className={styles.card}
                             />
                           }
-                            style={CheckCardStyle}
+                          className={styles["check-card"]}
                           value={card}
                           onClick={() => {
                             showCardModal(card);
@@ -204,7 +175,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
             {selecteds.length > 0 ? fetchStrings("!system", 212) : ""}
           </span>
         </p>
-          <div style={CheckGroupStyle}>
+        <div className={styles["check-group"]}>
           {selecteds.map((card, i) => (
             <Tooltip
               title={card.effectDesc}
@@ -214,12 +185,9 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
               <div>
                 <Card
                   cover={
-                      <YgoCard
-                        code={card.meta.id}
-                        style={YgoCardStyle as CSSProperties}
-                      />
+                    <YgoCard code={card.meta.id} className={styles.card} />
                   }
-                    style={CheckCardStyle}
+                  className={styles["check-card"]}
                   onClick={() => {
                     showCardModal(card);
                   }}
@@ -229,7 +197,6 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
           ))}
         </div>
       </Space>
-      </div>
     </NeosModal>
   );
 };

src/ui/Shared/YgoCard/index.tsx

@@ -19,7 +19,7 @@ export const YgoCard: React.FC<Props> = (props) => {
     className,
     code = 0,
     isBack = false,
-    width = 80,
+    width,
     style,
     onClick = () => {},
   } = props;