Merge branch 'optimize/mobile' into 'main'

初步移动端适配

See merge request mycard/Neos!322

src/styles/core.scss

 @charset "utf-8";
 @import url("https://fonts.font.im/css2?family=Electrolize&family=Noto+Serif+SC:wght@700&display=swap");
 
+/* 默认字体大小，适用于PC端 */
+html {
+  font-size: 16px;
+}
+
+/* 在移动端上设置不同的字体大小 */
+/* iPad */
+@media screen and (max-width: 1280px) {
+  html {
+    font-size: 14px;
+  }
+}
+/* Mobile */
+@media screen and (max-width: 1000px) {
+  html {
+    font-size: 10px;
+  }
+}
+
 body {
   color-scheme: dark;
   color: rgba(255, 255, 255, 0.87);
   background: #0f131e;
-  font-size: 14px;
   display: flex;
   margin: 0;
-  min-width: 320px;
+  min-width: 20rem;
   position: fixed;
   top: 0;
   bottom: 0;
@@ -17,7 +35,7 @@ body {
   font-family: var(--theme-font);
   --theme-font: "Electrolize", sans-serif;
   --nato-serif-font: "Noto Serif SC", serif;
-  --header-height: 56px;
+  --header-height: 3.5rem;
   #root {
     height: 100%;
     margin: 0 auto;

src/ui/BuildDeck/CardDetail.module.scss

@@ -7,7 +7,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  padding: 0 10px 20px 10px;
+  padding: 0 0.625rem 1.25rem 0.625rem;
   transition: 0.2s;
 }
 
@@ -25,41 +25,41 @@
   box-shadow:
     -1px 0 0 2px rgba(255, 255, 255, 0.15),
     0 0 30px 0 #ffffff54;
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(1.25rem);
   @include utils.noise-bg;
-  padding: 15px;
+  padding: 1rem;
   display: flex;
   flex-direction: column;
   position: relative;
-  border-radius: 8px;
+  border-radius: 0.5rem;
 }
 
 .btn-close {
   position: absolute;
-  right: 5px;
-  top: 5px;
+  right: 0.3rem;
+  top: 0.3rem;
 }
 
 .card {
-  --width: 160px;
+  --width: 10rem;
   width: var(--width);
   height: calc(var(--width) / var(--card-ratio));
   flex-shrink: 0;
   border: 1px solid #ffffff52;
   overflow: hidden;
-  box-shadow: 0 0 6px 2px #ffffff2b;
+  box-shadow: 0 0 0.375rem 0.125rem #ffffff2b;
   transition: 0.3s;
   cursor: pointer;
   &:hover {
-    --width: 220px;
+    --width: 13.75rem;
     filter: contrast(1.1);
   }
 }
 
 .title {
-  font-size: 20px;
+  font-size: 1.25rem;
   font-family: var(--nato-serif-font);
-  margin: 20px 0 15px;
+  margin: 1.25rem 0 1rem;
   display: flex;
   justify-content: space-between;
   // color: rgba(255, 255, 255, 0.45);

src/ui/BuildDeck/CardDetail.tsx

@@ -117,7 +117,6 @@ export const CardDetail: React.FC<{
         </a>
         <div className={styles.title}>
           <span>{card?.text.name}</span>
-          {/* <Avatar size={22}>光</Avatar> */}
         </div>
         <ScrollableArea>
           <Descriptions layout="vertical" size="small" items={items} />

src/ui/BuildDeck/DeckSelect.module.scss

 .deck-select {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 0.25rem;
   .item {
-    height: 40px;
-    padding: 0 20px;
+    height: 2.5rem;
+    padding: 0 1.25rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -17,10 +17,10 @@
       height: auto;
       top: 0;
       bottom: 0;
-      --padding-x: 5px;
+      --padding-x: 0.3rem;
       left: var(--padding-x);
       right: var(--padding-x);
-      border-radius: 4px;
+      border-radius: 0.25rem;
       transition: 0.2s;
     }
     .hover {
@@ -34,7 +34,7 @@
       transition: 0.2s;
       opacity: 0;
       display: flex;
-      gap: 4px;
+      gap: 0.25rem;
     }
     &:hover {
       .hover,
@@ -47,12 +47,12 @@
 
 .btn-add {
   position: absolute;
-  bottom: 40px;
+  bottom: 2.5rem;
   left: 0;
   right: 0;
   margin: auto;
   background-color: rgba(0, 168, 202, 0.451);
-  box-shadow: 0 0 20px 0 rgba(0, 221, 255, 0.5);
+  box-shadow: 0 0 1.25rem 0 rgba(0, 221, 255, 0.5);
   &:hover {
     background-color: rgba(0, 168, 202, 0.451) !important;
     transform: scale(1.1);

src/ui/BuildDeck/Filter.module.scss

 .title {
   text-align: center;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: bold;
-  margin: 12px 0 32px;
+  margin: 0.75rem 0 2rem;
 }
 
 .item {
@@ -10,9 +10,9 @@
   align-items: center;
   .item-name {
     display: flex;
-    gap: 4px;
+    gap: 0.25rem;
     flex: 1;
-    flex-basis: 80px;
+    flex-basis: 5rem;
     vertical-align: middle;
   }
 }
@@ -20,18 +20,18 @@
 .form {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  padding: 8px;
+  gap: 1.25rem;
+  padding: 0.5rem;
 }
 
 .btns {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 0.625rem;
   align-items: center;
-  padding: 30px 0 10px;
+  padding: 1.875rem 0 0.625rem;
   & > button {
-    width: 220px;
+    width: 13.75rem;
     border-radius: 3px;
   }
 }
@@ -44,8 +44,8 @@
   }
   .divider {
     flex: 0;
-    flex-basis: 32px;
+    flex-basis: 2rem;
     text-align: center;
-    line-height: 30px;
+    line-height: 1.25rem;
   }
 }

src/ui/BuildDeck/Filter.tsx

@@ -173,7 +173,7 @@ const Item: React.FC<
       {title}
       {showTip && (
         <Tooltip title="若要输入 ? 的攻击/守备，请输入 -2">
-          <InfoCircleFilled style={{ fontSize: 10 }} />
+          <InfoCircleFilled style={{ fontSize: "0.625rem" }} />
         </Tooltip>
       )}
     </div>

src/ui/BuildDeck/index.module.scss

@@ -9,7 +9,7 @@
 }
 
 .sider {
-  --sider-width: 300px;
+  --sider-width: 18.75rem;
   width: var(--sider-width);
   flex: 0 0 var(--sider-width);
   background: transparent !important;
@@ -27,21 +27,21 @@
   padding-bottom: 0;
   padding-right: 1rem;
   .deck {
-    width: 660px;
+    width: 41.25rem;
   }
   .select {
     flex: 1;
     .select-btns {
-      padding: 5px 10px;
+      padding: 0.3rem 0.625rem;
       display: flex;
-      gap: 8px;
+      gap: 0.5rem;
     }
   }
 }
 
 .container {
   width: -webkit-fill-available;
-  height: calc(100% - 20px);
+  height: calc(100% - 1.25rem);
   border: 1px solid rgba(255, 255, 255, 0.05);
   display: flex;
   flex-direction: column;
@@ -49,8 +49,8 @@
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
   .title {
-    height: 44px;
-    flex: 0 0 44px;
+    height: 2.75rem;
+    flex: 0 0 2.75rem;
     justify-content: space-between;
   }
   .deck-zone {
@@ -60,7 +60,7 @@
     --card-grid: 10;
   }
   background-color: hsla(0, 0%, 100%, 0.05);
-  backdrop-filter: blur(5px);
+  backdrop-filter: blur(0.3rem);
 }
 
 .deck .container {
@@ -75,20 +75,20 @@
 .search-cards-container {
   height: 100%;
   .search-cards {
-    --card-width: 80px;
+    --card-width: 5rem;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
     padding: 0.75rem;
-    gap: 10px;
+    gap: 0.625rem;
   }
 }
 
 .search-count {
-  font-size: 11px;
+  font-size: 0.7rem;
 }
 
 .empty {
-  gap: 20px;
+  gap: 1.25rem;
   width: 100%;
   height: 100%;
   display: flex;
@@ -103,8 +103,8 @@
   bottom: 0;
   background-color: #212332;
   color: hsla(0, 0%, 100%, 0.3);
-  font-size: 12px;
-  padding: 2px 6px;
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
   font-family: var(--theme-font);
   user-select: none;
 }

src/ui/BuildDeck/index.tsx

@@ -237,11 +237,11 @@ export const DeckEditor: React.FC<{
           placeholder="请输入卡组名字"
           bordered={false}
           prefix={<EditOutlined />}
-          style={{ width: 240 }}
+          style={{ width: "8.8rem" }}
           onChange={(e) => setDeckName(e.target.value)}
           value={deckName}
         />
-        <Space style={{ marginRight: 6 }}>
+        <Space style={{ marginRight: "0.4rem" }} size={5}>
           <Button
             type="text"
             size="small"

src/ui/Duel/Message/CardListModal.tsx

@@ -8,7 +8,8 @@ import { YgoCard } from "@/ui/Shared";
 
 import { showCardModal } from "./CardModal";
 
-const CARD_WIDTH = 100;
+const CARD_WIDTH = "6.25rem";
+const DRAWER_WIDTH = "10rem";
 
 // TODO: 显示的位置还需要细细斟酌
 
@@ -46,7 +47,7 @@ export const CardListModal = () => {
       open={isOpen}
       onClose={handleOkOrCancel}
       // headerStyle={{ display: "none" }}
-      width={CARD_WIDTH + 66}
+      width={DRAWER_WIDTH}
       style={{ maxHeight: "100%" }}
       mask={false}
     >

src/ui/Duel/Message/CardModal/Desc.module.scss

 .desc {
   line-height: 1.6;
-  font-size: 14px;
-  max-height: calc(100% - 237px);
+  font-size: 0.875rem;
+  max-height: calc(100% - 14.8rem);
 
   .maro-item {
     display: flex;
-    gap: 8px;
+    gap: 0.5rem;
   }
 }

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

@@ -5,19 +5,19 @@
 }
 
 .drawer {
-  width: 90% !important;
+  width: 20vw !important;
   left: 10%;
-  --height: 640px;
+  --height: 40rem;
   top: calc((100% - var(--height)) / 2);
   height: var(--height) !important;
   position: relative;
-  border-radius: 6px;
+  border-radius: 0.375rem;
   background: #242424;
   :global(.ant-drawer-header) {
-    padding: 15px 0;
+    padding: 1rem 0;
     :global(.ant-drawer-header-title) {
       flex-direction: row-reverse;
-      padding-left: 24px;
+      padding-left: 1.5rem;
     }
   }
 }
@@ -34,19 +34,19 @@
     font-family: var(--theme-font);
   }
   .number {
-    font-size: 30px;
-    line-height: 36px;
+    font-size: 1.875rem;
+    line-height: 2.25rem;
   }
 }
 
 .attline {
   display: flex;
   flex-wrap: wrap;
-  row-gap: 10px;
+  row-gap: 0.625rem;
 }
 
 .info {
   justify-content: space-between;
   position: relative;
-  height: 230px; // TODO - fix this
+  height: 15rem; // TODO - fix this
 }

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

@@ -16,7 +16,7 @@ import {
 import { Desc } from "./Desc";
 import styles from "./index.module.scss";
 
-const CARD_WIDTH = 140;
+const CARD_WIDTH = "8.75rem";
 
 const defaultStore = {
   isOpen: false,
@@ -86,7 +86,7 @@ export const CardModal = () => {
             {/* TODO: 展示星级/LINK数 */}
           </Space>
         </Space>
-        <Divider style={{ margin: "14px 0" }}></Divider>
+        <Divider style={{ margin: "0.875rem 0" }}></Divider>
         <Desc desc={desc} />
       </div>
     </Drawer>

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

@@ -3,13 +3,13 @@
   text-align: center;
 
   .result {
-    font-size: 30px;
+    font-size: 1.875rem;
     font-family: var(--theme-font);
     color: var(--text-color);
   }
 
   .reason {
-    font-size: 20px;
+    font-size: 1.25rem;
     font-family: var(--theme-font);
   }
 }

src/ui/Duel/Message/OptionModal.tsx

@@ -72,7 +72,7 @@ export const OptionModal = () => {
               style={{
                 display: "grid",
                 gridTemplateColumns: "repeat(2, 1fr)",
-                gap: "10px",
+                gap: "0.625rem",
               }}
               onChange={(values: any) => {
                 const v = selecteds.map((x, i) => (i === page ? values : x));
@@ -83,7 +83,8 @@ export const OptionModal = () => {
                 <CheckCard
                   key={idx}
                   style={{
-                    width: "200px",
+                    width: "12.5rem",
+                    fontSize: "1rem",
                     marginInlineEnd: 0,
                     marginBlockEnd: 0,
                   }}
@@ -108,7 +109,7 @@ const Selector: React.FC<{
     <Segmented
       block
       options={Array.from({ length: maxPage }).map((_, idx) => idx)}
-      style={{ margin: "10px 0" }}
+      style={{ margin: "0.625rem 0" }}
       value={page}
       onChange={onChange as any}
     ></Segmented>

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

@@ -5,7 +5,7 @@
     top: 50%;
     display: flex;
     justify-content: space-between;
-    padding: 0 10px;
+    padding: 0 0.625rem;
     box-sizing: border-box;
     height: 0;
     button {
@@ -13,7 +13,7 @@
     }
   }
   :global(.ant-pro-checkcard) {
-    border-radius: 4px;
+    border-radius: 0.25rem;
     overflow: hidden;
   }
   // 多选卡片的样式
@@ -36,11 +36,11 @@
 .check-group {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  gap: 10px;
+  gap: 0.625rem;
 }
 
 .check-card {
-  width: 100px;
+  width: 6.25rem;
   aspect-ratio: var(--card-ratio);
   margin-inline-end: 0;
   margin-block-end: 0;

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

@@ -110,7 +110,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
           <span>{single ? "每次选择一张" : ""}</span>
         </>
       } // TODO: 这里可以再细化一些
-      width={600}
+      width={"37.5rem"}
       okButtonProps={{
         disabled: !submitable,
       }}

src/ui/Duel/Message/SortCardModal.tsx

@@ -114,7 +114,7 @@ const SortableItem = (props: { id: number; meta: CardMeta }) => {
   return (
     <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
       <Card
-        style={{ width: 100 }}
+        style={{ width: "6.25rem" }}
         cover={
           <img
             alt={props.meta.id.toString()}

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

@@ -25,7 +25,7 @@ export const YesNoModal: React.FC = () => {
     <NeosModal
       title={`${preHintMsg} ${msg}`}
       open={isOpen}
-      width={400}
+      width={"25rem"}
       afterClose={() => (matStore.hint.esHint = undefined)}
       footer={
         <>

src/ui/Duel/PlayMat/Card/springs/moveToHand.ts

@@ -13,6 +13,7 @@ const {
   HAND_MARGIN_TOP,
   HAND_CARD_HEIGHT,
   HAND_CIRCLE_CENTER_OFFSET_Y,
+  HAND_MAT_OFFSET_Y,
 } = matConfig;
 
 const { HAND } = ygopro.CardZone;
@@ -41,7 +42,7 @@ export const moveToHand: MoveFunc = async (props) => {
   const negativeX = Math.sin(angle) * r;
   const negativeY = Math.cos(angle) * r + HAND_CARD_HEIGHT / 2;
   const x = hand_circle_center_x + negativeX * (isMe(controller) ? 1 : -1);
-  const y = hand_circle_center_y - negativeY + 140; // FIXME: 常量 是手动调的 这里肯定有问题 有空来修
+  const y = hand_circle_center_y - negativeY + HAND_MAT_OFFSET_Y;
 
   const _rz = (angle * 180) / Math.PI;
 

src/ui/Duel/PlayMat/Menu/index.module.scss

@@ -2,16 +2,16 @@
   position: fixed;
   display: flex;
   // flex-direction: column;
-  gap: 6px;
-  bottom: 20px;
-  right: 35px;
+  gap: 0.375rem;
+  bottom: 1.25rem;
+  right: 2.2rem;
   z-index: 999;
   background-color: #323232;
-  padding: 8px;
-  border-radius: 6px;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
   overflow: hidden;
 }
 
 :global(.ant-dropdown-menu-item) {
-  gap: 8px;
+  gap: 0.5rem;
 }

src/ui/Match/MatchModal.module.scss

@@ -5,10 +5,10 @@
   justify-content: center;
 
   .input {
-    font-size: 18px;
+    font-size: 1.2rem;
     font-family: var(--theme-font);
     color: #2885fff2;
-    height: 50px;
-    margin: 4px;
+    height: 3rem;
+    margin: 0.25rem;
   }
 }

src/ui/Match/index.module.scss

@@ -10,7 +10,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 60px;
+    gap: 3.75rem;
   }
 }
 
@@ -18,19 +18,19 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(2, 1fr); /* 自动调整行高 */
-  width: 800px;
-  height: 530px;
-  gap: 16px;
+  width: 55rem;
+  // height: 33rem;
+  gap: 1rem;
   .mode {
     height: 100%;
     background: hsla(0, 0%, 100%, 0.1);
     backdrop-filter: blur(10px);
-    padding: 32px;
-    border-radius: 12px;
+    padding: 2rem;
+    border-radius: 0.75rem;
     transition: 0.2s;
     cursor: pointer;
     &:hover {
-      box-shadow: 0 0 0 4px #226170;
+      box-shadow: 0 0 0 0.25rem #226170;
       // background: hsla(0, 0%, 100%, 0.07);
       filter: brightness(1.2);
     }
@@ -38,26 +38,26 @@
       background: linear-gradient(#514f5780, #2a283277);
       overflow: hidden;
       position: relative;
-      --length: 48px;
+      --length: 3rem;
       width: var(--length);
       height: var(--length);
-      border-radius: 12px;
+      border-radius: 0.75rem;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 20px;
+      font-size: 1.25rem;
       color: white;
       transition: 0.2s;
       filter: brightness(1.5);
     }
     .title {
-      margin-top: 24px;
-      margin-bottom: 12px;
-      font-size: 16px;
+      margin-top: 1.5rem;
+      margin-bottom: 0.75rem;
+      font-size: 1rem;
     }
     .desc {
-      font-size: 14px;
-      line-height: 24px;
+      font-size: 0.875rem;
+      line-height: 1.5rem;
       color: hsla(0, 0%, 100%, 0.6);
       white-space: pre-wrap;
     }

src/ui/Shared/CardEffectText/index.module.scss

 .desc {
   line-height: 1.8;
-  font-size: 14px;
-  max-height: calc(100% - 237px);
+  font-size: 0.875rem;
+  max-height: calc(100% - 15rem);
   font-family: var(--theme-font);
   white-space: pre-wrap;
 
   .maro-item {
     display: flex;
-    gap: 8px;
+    gap: 0.5rem;
   }
 }

src/ui/Shared/SpecialButton/index.module.scss

 .special-btn {
   cursor: pointer;
-  width: 200px;
+  width: 12.5rem;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  padding: 12px 0;
+  gap: 0.625rem;
+  padding: 0.75rem 0;
   border: 3px solid hsla(0, 0%, 100%, 0.3);
   border-radius: 8px;
   background-clip: padding-box;
   background-color: hsla(0, 0%, 100%, 0.9);
   color: #0d0d0d;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   letter-spacing: 0.2px;
   transition: 0.3s;

src/ui/Shared/YgoCard/index.tsx

@@ -11,7 +11,7 @@ interface Props {
   code?: number;
   // cardName?: string;
   style?: CSSProperties;
-  width?: number;
+  width?: number | string;
   onClick?: () => void;
   onLoad?: () => void;
 }

src/ui/Shared/css.ts

 // 此文件目的是在js和CSS之间共享一些变量，并且这些变量是0运行时的。
-interface CSSConfig {
-  readonly [key: string]: [number, UNIT];
-}
+type CSSConfig = [string, [number, UNIT]][];
+
+// 以1280长度的viewpoint为基准进行缩放
+const VIEW_POINT_WIDTH_BASE_IPAD = 1280;
+const VIEW_POINT_WIDTH_BASE_MOBILE = 1000;
+
+const ZOOM_RATE_IPAD = 0.7;
+const ZOOM_RATE_MOBILE = 0.5;
 
 /** 转为CSS变量: BOARD_ROTATE_Z -> --board-rotate-z */
 const toCssProperties = (config: CSSConfig) =>
-  Object.entries(config)
+  config
     .map(
       ([k, v]) =>
         [
@@ -18,13 +23,26 @@ const toCssProperties = (config: CSSConfig) =>
     )
     .reduce((acc, cur) => [...acc, cur], [] as [string, string][]);
 
+const pxTransform = (value: number, unit: UNIT) => {
+  if (unit === UNIT.PX && window.innerWidth < VIEW_POINT_WIDTH_BASE_MOBILE) {
+    return [value * ZOOM_RATE_MOBILE, unit];
+  } else if (
+    unit === UNIT.PX &&
+    window.innerWidth < VIEW_POINT_WIDTH_BASE_IPAD
+  ) {
+    return [value * ZOOM_RATE_IPAD, unit];
+  } else {
+    return [value, unit];
+  }
+};
+
 enum UNIT {
   PX = "px",
   DEG = "deg",
   NONE = "",
 }
 
-const matConfigWithUnit = {
+const _matConfigWithUnit: Record<string, [number, UNIT]> = {
   PERSPECTIVE: [1500, UNIT.PX],
   PLANE_ROTATE_X: [0, UNIT.DEG],
   BLOCK_WIDTH: [120, UNIT.PX],
@@ -36,21 +54,26 @@ const matConfigWithUnit = {
   HAND_MARGIN_TOP: [0, UNIT.PX],
   HAND_CIRCLE_CENTER_OFFSET_Y: [2000, UNIT.PX],
   HAND_CARD_HEIGHT: [130, UNIT.PX],
+  HAND_MAT_OFFSET_Y: [140, UNIT.PX], // 手卡离场地的偏移
   DECK_OFFSET_X: [140, UNIT.PX],
   DECK_OFFSET_Y: [80, UNIT.PX],
   DECK_ROTATE_Z: [30, UNIT.DEG],
   DECK_CARD_HEIGHT: [120, UNIT.PX],
   CARD_HEIGHT_O: [100, UNIT.PX], // 场地魔法/墓地/除外的卡片高度
   BLOCK_OUTSIDE_OFFSET_X: [15, UNIT.PX],
-} satisfies CSSConfig;
+};
+
+const matConfigWithUnit = Object.entries(_matConfigWithUnit).map(
+  ([k, [value, unit]]) => [k, pxTransform(value, unit) as [number, UNIT]],
+) satisfies CSSConfig;
 
-export const matConfig = Object.keys(matConfigWithUnit).reduce(
-  (prev, key) => ({
+export const matConfig = matConfigWithUnit.reduce(
+  (prev, [key, value]) => ({
     ...prev,
     // @ts-ignore
-    [key]: matConfigWithUnit[key][0],
+    [key]: value[0],
   }),
-  {} as Record<keyof typeof matConfigWithUnit, number>,
+  {} as Record<keyof typeof _matConfigWithUnit, number>,
 );
 
 toCssProperties(matConfigWithUnit).forEach(([k, v]) => {

src/ui/Side/TpModal.module.scss

@@ -3,10 +3,10 @@
   align-items: center;
   justify-content: center;
   flex-direction: row;
-  gap: 80px;
+  gap: 5rem;
   button {
-    width: 100px;
-    height: 50px;
-    font-size: 16px;
+    width: 6.25rem;
+    height: 3rem;
+    font-size: 1rem;
   }
 }

src/ui/Side/index.module.scss

@@ -17,25 +17,25 @@
   flex: 1;
   padding-bottom: 0;
   padding: 1rem;
-  width: 660px;
+  width: 41.25rem;
 }
 
 .deck-container {
   width: -webkit-fill-available;
   height: calc(100% - 20px);
   border: 1px solid rgba(255, 255, 255, 0.05);
-  border-radius: 10px;
+  border-radius: 0.625rem;
   display: flex;
   flex-direction: column;
   & > *:not(:last-of-type) {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
   .title {
-    height: 44px;
-    flex: 0 0 44px;
+    height: 2.75rem;
+    flex: 0 0 2.75rem;
     justify-content: space-between;
     padding: 1em 2em;
-    font-size: 16px;
+    font-size: 1rem;
   }
   .deck-zone {
     display: flex;
@@ -44,11 +44,11 @@
     --card-grid: 15;
   }
   background-color: hsla(0, 0%, 100%, 0.05);
-  backdrop-filter: blur(5px);
+  backdrop-filter: blur(0.3rem);
 }
 
 .detail-container {
-  --detail-width: 300px;
+  --detail-width: 18.75rem;
   width: var(--detail-width);
   flex: 0 0 var(--detail-width);
   position: relative;

src/ui/Start/index.module.scss

@@ -5,66 +5,68 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 50px;
+  gap: 3rem;
 }
 
 .main {
-  height: 453px;
-  width: 1000px;
+  height: 50vh;
+  width: 60vw;
   max-height: 100%;
   position: relative;
   display: flex;
   justify-content: space-between;
   .left {
     height: 100%;
+    width: 40%;
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 0.4rem;
     .neos-logo {
-      width: 143px;
-      height: 34px;
+      width: 9rem;
+      height: 2rem;
     }
     .title {
-      font-size: 36px;
+      font-size: 2rem;
       font-weight: 500;
       color: rgba(255, 255, 255, 0.86);
     }
     .keywords {
-      font-size: 24px;
+      font-size: 1.5rem;
       font-weight: 500;
       color: rgba(235, 245, 235, 0.8);
     }
     .details {
-      margin-top: 31px;
-      width: 450px;
-      font-size: 14px;
+      margin-top: 2rem;
+      width: 28rem;
+      max-width: 100%;
+      font-size: 1rem;
       font-weight: 500;
-      line-height: 28px;
+      line-height: 1.75rem;
       color: rgba(235, 245, 235, 0.5);
     }
   }
   .right {
-    width: 360px;
     height: 100%;
+    width: 40%;
     position: relative;
     overflow: hidden;
-    border-bottom-right-radius: 180px;
-    border-bottom-left-radius: 180px;
+    border-bottom-right-radius: 11.25rem;
+    border-bottom-left-radius: 11.25rem;
     .neos-main-bg {
       position: absolute;
       bottom: 0;
       width: fit-content;
-      height: 360px;
+      height: fit-content;
       border-radius: 50%;
       filter: brightness(0.7);
     }
     .neos-main {
       position: absolute;
       bottom: 0;
+      width: 80%;
       border-bottom-right-radius: 50%;
       transform: scale(1.25);
       transform-origin: 50% 100%;
-      width: max-content;
       filter: drop-shadow(0px 8px 8px rgba(255, 255, 255, 0.3))
         drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.8));
       transition: 0.2s;

src/ui/WaitRoom/Chat.module.scss

@@ -11,17 +11,17 @@
   width: 100%;
   margin-top: auto;
   background-color: hsla(0, 0%, 100%, 0.07);
-  padding: 8px;
+  padding: 0.5rem;
   display: flex;
 }
 
 .dialogs {
   position: absolute;
-  padding: 8px 0;
+  padding: 0.5rem 0;
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 0.25rem;
   .item {
     vertical-align: baseline;
     .name {
@@ -31,16 +31,16 @@
     .time {
       font-size: 11px;
       opacity: 0.8;
-      margin-left: 8px;
+      margin-left: 0.5rem;
     }
     .content {
       font-size: 13px;
       color: #ccc;
       margin-top: 2px;
     }
-    padding: 8px 8px;
-    margin: 0 10px;
-    border-radius: 8px;
+    padding: 0.5rem 0.5rem;
+    margin: 0 0.625rem;
+    border-radius: 0.5rem;
     transition: 0.2s;
     &:hover {
       background-color: hsla(0, 0%, 100%, 0.07);

src/ui/WaitRoom/Popover.tsx

@@ -94,7 +94,7 @@ export const TpPopover: React.FC<
 
   return (
     <Popover
-      overlayStyle={{ backdropFilter: "blur(10px)" }}
+      overlayStyle={{ backdropFilter: "blur(0.625rem)" }}
       content={
         <Space>
           {[Tp.First, Tp.Second].map((item) => (

src/ui/WaitRoom/index.module.scss

@@ -2,9 +2,9 @@
   height: 100%;
   display: flex;
   align-items: center;
-  --side-box-width: 500px;
-  --border-radius: 10px;
-  --sider-width: 300px;
+  --side-box-width: 30rem;
+  --border-radius: 0.625rem;
+  --sider-width: 18.75rem;
   .content {
     height: 100%;
     position: relative;
@@ -15,7 +15,7 @@
     justify-content: center;
     transition: transform 0.3s;
     .wrap {
-      height: 500px; // TODO: 修正这里的高度，或者说修正全局的高度设置。高度不应该超过100%
+      height: 30rem; // TODO: 修正这里的高度，或者说修正全局的高度设置。高度不应该超过100%
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -25,11 +25,11 @@
   .sider {
     position: relative;
     width: var(--sider-width);
-    flex: 0 0 300px;
+    flex: 0 0 18.75rem;
     height: 100%;
     background-color: hsla(0, 0%, 100%, 0.05);
     transition: transform 0.3s;
-    backdrop-filter: blur(5px);
+    backdrop-filter: blur(0.3rem);
     z-index: 1;
   }
 }
@@ -37,48 +37,48 @@
 .both-side-container {
   display: flex;
   flex-direction: column;
-  gap: 30px;
+  gap: 1.8rem;
   align-items: center;
-  margin-top: 80px;
+  margin-top: 5rem;
   .side-box {
-    height: 100px;
+    height: 6.25rem;
     width: var(--side-box-width);
     border-radius: var(--border-radius);
     background: hsla(0, 0%, 100%, 0.1);
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(0.625rem);
     overflow: hidden;
-    padding: 0 32px;
+    padding: 0 2rem;
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 1rem;
     .inner {
       position: absolute;
       left: 0;
-      width: 150px;
-      height: 70px;
-      filter: blur(120px);
+      width: 9.4rem;
+      height: 4.375rem;
+      filter: blur(7.5rem);
       transition: 0.3s;
     }
     &.ready .inner {
-      width: 250px;
-      height: 100px;
-      filter: blur(100px) brightness(1.2) saturate(1.2);
+      width: 15.6rem;
+      height: 6.25rem;
+      filter: blur(6.25rem) brightness(1.2) saturate(1.2);
     }
     &.me {
-      box-shadow: -5px 0 20px 0 rgba(0, 115, 255, 0.15);
+      box-shadow: -0.3rem 0 1.25rem 0 rgba(0, 115, 255, 0.15);
       .inner {
         background: linear-gradient(to right, blue, rgb(0, 149, 255));
       }
       z-index: 1;
     }
     &.op {
-      box-shadow: 5px 0 20px 0 rgba(255, 0, 81, 0.1);
+      box-shadow: 0.3rem 0 1.25rem 0 rgba(255, 0, 81, 0.1);
       .inner {
         background: linear-gradient(to right, rgb(255, 0, 106), rgb(255, 0, 0));
       }
     }
     .name {
-      font-size: 18px;
+      font-size: 1.2rem;
       color: white;
       z-index: 1;
     }
@@ -108,22 +108,22 @@
 }
 
 .avatars-watch {
-  padding-left: 8px;
+  padding-left: 0.5rem;
 }
 
 .btns-side {
   position: absolute;
-  left: 10px;
-  top: 10px;
+  left: 0.625rem;
+  top: 0.625rem;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 0.625rem;
   transition: 0.3s;
   .btn {
-    width: 32px;
+    width: 2rem;
     background: hsla(0, 0%, 100%, 0.1);
     justify-content: start;
-    padding: 0 8px;
+    padding: 0 0.5rem;
     overflow: hidden;
     .btn-icon {
       display: flex;
@@ -135,7 +135,7 @@
       }
     }
     &:hover {
-      width: 100px;
+      width: 6.25rem;
     }
   }
 }
@@ -153,14 +153,14 @@
 }
 
 .fake-btn-large {
-  min-width: 88px;
-  height: 40px;
+  min-width: 5.5rem;
+  height: 2.5rem;
   background: hsla(0, 0%, 100%, 0.1);
-  border-radius: 6px;
+  border-radius: 0.375rem;
   display: flex;
   align-items: center;
-  padding: 0 16px 0 16px;
-  gap: 8px;
+  padding: 0 1rem 0 1rem;
+  gap: 0.5rem;
   cursor: not-allowed;
   transition: 0.2s;
   position: relative;

src/ui/WaitRoom/index.tsx

@@ -249,7 +249,7 @@ const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
       <Select
         title="卡组"
         showSearch
-        style={{ width: 250 }}
+        style={{ width: "15.6rem" }}
         defaultValue={snapDeck.decks[0].deckName}
         options={snapDeck.decks.map((deck) => ({
           value: deck.deckName,