refactor: styles

src/styles/utils.scss

@@ -18,3 +18,17 @@
     background: rgba(136, 136, 136, 0.8);
   }
 }
+
+@mixin noise-bg($opacity: 0.3) {
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    max-height: 100%;
+    width: 100%;
+    background-image: url("/neos-assets/noise-light.webp");
+    opacity: $opacity;
+  }
+}

src/ui/BuildDeck/CardDetail.module.scss

+@use "/src/styles/utils.scss";
+
 .detail {
   z-index: 10;
   position: absolute;
@@ -6,7 +8,7 @@
   width: 100%;
   height: 100%;
   padding: 0 10px 20px 10px;
-  transition: 0.2s;
+  // transition: 0.2s;
 }
 
 .detail.open {
@@ -15,10 +17,10 @@
 
 .container {
   height: 100%;
-  background-color: rgba(141, 133, 166, 0.245);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: hsla(0, 0%, 100%, 0.1);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 30px 0 #ffffff54;
   backdrop-filter: blur(20px);
-  border-radius: 4px;
+  @include utils.noise-bg;
 }
 
 .btn-close {

src/ui/BuildDeck/DeckSelect.module.scss

@@ -58,6 +58,7 @@
     &:hover {
       background-color: rgba(0, 168, 202, 0.451) !important;
       transform: scale(1.1);
+      filter: brightness(1.2);
     }
   }
 }

src/ui/BuildDeck/index.module.scss

@@ -50,6 +50,7 @@
   .title {
     height: 44px;
     flex: 0 0 44px;
+    justify-content: space-between;
   }
   .deck-zone {
     @include utils.scrollbar;

src/ui/BuildDeck/index.tsx

@@ -7,7 +7,14 @@ import {
   SortAscendingOutlined,
   UndoOutlined,
 } from "@ant-design/icons";
-import { Button, ConfigProvider, Input, Space, type ThemeConfig } from "antd";
+import {
+  Button,
+  ConfigProvider,
+  Input,
+  Space,
+  type ThemeConfig,
+  Badge,
+} from "antd";
 
 import { Background } from "../Shared";
 import { CardDetail } from "./CardDetail";
@@ -53,14 +60,12 @@ export const Component: React.FC = () => {
 };
 Component.displayName = "Build";
 
+/** 正在编辑的卡组 */
 const Deck: React.FC = () => {
   return (
     <div className={styles.deck}>
       <div className={styles.container}>
-        <Space
-          className={styles.title}
-          style={{ justifyContent: "space-between" }}
-        >
+        <Space className={styles.title}>
           <Input
             placeholder="我的卡组"
             bordered={false}
@@ -107,6 +112,7 @@ const Deck: React.FC = () => {
   );
 };
 
+/** 卡片库，选择卡片加入正在编辑的卡组 */
 const CardSelect: React.FC = () => {
   return (
     <div className={styles.select}>
@@ -121,9 +127,12 @@ const CardSelect: React.FC = () => {
         <div className={styles["select-btns"]}>
           <Button block type="text" icon={<FilterOutlined />}>
             筛选
+            {/* TODO: 下面这个Badge应根据有无筛选规则而显示 */}
+            {false && <Badge dot offset={[5, -5]} />}
           </Button>
           <Button block type="text" icon={<SortAscendingOutlined />}>
             排列
+            {false && <Badge dot offset={[5, -5]} />}
           </Button>
           <Button block type="text" icon={<DeleteOutlined />}>
             重置

src/ui/NewMatch/index.module.scss

@@ -54,7 +54,7 @@
     transition: 0.2s;
     cursor: pointer;
     &:hover {
-      box-shadow: 0 0 0 4px #2a5560;
+      box-shadow: 0 0 0 4px #226170;
       // background: hsla(0, 0%, 100%, 0.07);
       filter: brightness(1.2);
     }

src/ui/NewMatch/index.tsx

@@ -15,6 +15,7 @@ export const loader: LoaderFunction = () => {
   if (user) {
     accountStore.login(user);
     setCookie(CookieKeys.USER, JSON.stringify(user));
+    // TODO: toast显示登录成功
   }
   return null;
 };

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

+@use "/src/styles/utils.scss";
+
 .background {
   position: fixed;
   left: 0;
@@ -10,18 +12,7 @@
   z-index: -1;
   display: flex;
   justify-content: center;
-  // align-items: center;
-  &::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    max-height: 100%;
-    width: 100%;
-    background-image: url("/neos-assets/noise-light.webp");
-    opacity: 0.3;
-  }
+  @include utils.noise-bg;
 }
 
 .inner {