feat: new waitroom ui

src/ui/Layout/index.tsx

 import { Avatar } from "antd";
-import { type LoaderFunction, NavLink, Outlet } from "react-router-dom";
+import {
+  type LoaderFunction,
+  NavLink,
+  Outlet,
+  useLocation,
+} from "react-router-dom";
 import { useSnapshot } from "valtio";
 
 import { CookieKeys, getCookie } from "@/api";
@@ -19,30 +24,34 @@ export const loader: LoaderFunction = () => {
 
 export const Component = () => {
   // TODO 根据是否登录，显示内容
+  const { pathname } = useLocation();
+  const pathnamesHideHeader = ["/waitroom"];
   return (
     <>
-      <nav className={styles.navbar}>
-        <div className={styles["logo-container"]}>
-          <img
-            className={styles.logo}
-            src={`${NeosConfig.assetsPath}/neos-logo.svg`}
-            alt="NEOS"
-          />
-        </div>
-        {/* <img
+      {!pathnamesHideHeader.includes(pathname) && (
+        <nav className={styles.navbar}>
+          <div className={styles["logo-container"]}>
+            <img
+              className={styles.logo}
+              src={`${NeosConfig.assetsPath}/neos-logo.svg`}
+              alt="NEOS"
+            />
+          </div>
+          {/* <img
           className={styles.logo}
           src={`${NeosConfig.assetsPath}/neos-logo.svg`}
           alt="NEOS"
         /> */}
-        <NavLink to="/">主页</NavLink>
-        <NavLink to="/match">匹配</NavLink>
-        <NavLink to="/build">组卡</NavLink>
-        <span style={{ flexGrow: 1 }} />
-        <span className={styles.profile}>
-          <NeosAvatar />
-          <NavLink to="/profile">个人中心</NavLink>
-        </span>
-      </nav>
+          <NavLink to="/">主页</NavLink>
+          <NavLink to="/match">匹配</NavLink>
+          <NavLink to="/build">组卡</NavLink>
+          <span style={{ flexGrow: 1 }} />
+          <span className={styles.profile}>
+            <NeosAvatar />
+            <NavLink to="/profile">个人中心</NavLink>
+          </span>
+        </nav>
+      )}
       <main className={styles.main}>
         <Outlet />
       </main>

src/ui/NewWaitRoom/index.module.scss

@@ -6,15 +6,21 @@
   --border-radius: 10px;
   --sider-width: 300px;
   .content {
-    height: 500px; // TODO: 修正这里的高度，或者说修正全局的高度设置。高度不应该超过100%
+    height: 100%;
     position: relative;
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    // padding-bottom: 5%;
     transition: transform 0.3s;
+    .wrap {
+      height: 500px; // TODO: 修正这里的高度，或者说修正全局的高度设置。高度不应该超过100%
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
   }
   .sider {
     position: relative;
@@ -99,26 +105,27 @@
   padding-left: 8px;
 }
 
-.btn-sider {
-  --length: 30px;
-  width: var(--length);
-  height: var(--length);
-  background: hsla(0, 0%, 100%, 0.1);
+.btns-side {
   position: absolute;
-  right: calc(-1 * var(--length) - 10px);
+  left: 10px;
   bottom: 10px;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  transition: 0.2s;
+  flex-direction: column;
+  gap: 10px;
+  transition: 0.3s;
+  .btn {
+    background: hsla(0, 0%, 100%, 0.1);
+  }
 }
 
 .collapsed {
   .sider {
     transform: translateX(calc(-1 * var(--sider-width)));
   }
-  .main {
+  .content {
+    transform: translateX(calc(-1 * var(--sider-width) / 2));
+  }
+  .btns-side {
     transform: translateX(calc(-1 * var(--sider-width) / 2));
   }
 }
@@ -163,6 +170,6 @@
   overflow: hidden;
 }
 
-.btn-action {
+.btns-action {
   margin-top: auto;
 }

src/ui/NewWaitRoom/index.tsx

-import { CheckCircleFilled } from "@ant-design/icons";
+import { CheckCircleFilled, LogoutOutlined } from "@ant-design/icons";
 
 import {
   sendHsNotReady,
@@ -12,7 +12,15 @@ import {
 import socketMiddleWare, { socketCmd } from "@/middleware/socket";
 import PlayerState = ygopro.StocHsPlayerChange.State;
 import SelfType = ygopro.StocTypeChange.SelfType;
-import { Avatar, Button, ConfigProvider, Popover, Skeleton, Space } from "antd";
+import {
+  Avatar,
+  Button,
+  ConfigProvider,
+  Popover,
+  Skeleton,
+  Space,
+  Tooltip,
+} from "antd";
 import classNames from "classnames";
 import {
   forwardRef,
@@ -72,11 +80,6 @@ export const Component: React.FC = () => {
       >
         <Background />
         <div className={styles.sider}>
-          <Button
-            className={styles["btn-sider"]}
-            icon={<IconFont type="icon-side-bar-fill" size={16} />}
-            onClick={() => setCollapsed(!collapsed)}
-          />
           <Chat />
         </div>
         <div className={styles.content}>
@@ -84,47 +87,64 @@ export const Component: React.FC = () => {
             <LoadingOutlined />
             对方正在选择先后
           </div> */}
-          <Controller
-            onDeckChange={(deckName: string) => {
-              const deck = deckStore.get(deckName);
-              // 同步后端
-              if (deck) {
-                setDeck(deck);
-              } else {
-                alert(`Deck ${deckName} not found`);
-              }
-            }}
-          />
-          <div className={styles["both-side-container"]}>
-            <PlayerZone
-              who={Who.Me}
-              player={room.getMePlayer()}
-              avatar={user?.avatar_url}
-              btn={
-                <>
-                  <Button
-                    size="large"
-                    className={styles["btn-join"]}
-                    onClick={() => {
-                      room.getMePlayer()?.state === PlayerState.NO_READY
-                        ? sendHsReady()
-                        : sendHsNotReady();
-                    }}
-                  >
-                    {room.getMePlayer()?.state === PlayerState.NO_READY
-                      ? "决斗准备"
-                      : "取消准备"}
-                  </Button>
-                  {/* <MoraButton ref={ref} /> */}
-                </>
-              }
+          <div className={styles["btns-side"]}>
+            <Tooltip title="退出房间" placement="right">
+              <Button
+                className={styles["btn"]}
+                danger
+                icon={<IconFont type="icon-exit" size={16} />}
+              />
+            </Tooltip>
+            <Button
+              className={styles["btn"]}
+              icon={<IconFont type="icon-side-bar-fill" size={16} />}
+              onClick={() => setCollapsed(!collapsed)}
             />
-            <PlayerZone who={Who.Op} player={room.getOpPlayer()} />
           </div>
 
-          <SpecialButton className={styles["btn-action"]}>
-            开始游戏
-          </SpecialButton>
+          <div className={styles.wrap}>
+            <Controller
+              onDeckChange={(deckName: string) => {
+                const deck = deckStore.get(deckName);
+                // 同步后端
+                if (deck) {
+                  setDeck(deck);
+                } else {
+                  alert(`Deck ${deckName} not found`);
+                }
+              }}
+            />
+            <div className={styles["both-side-container"]}>
+              <PlayerZone
+                who={Who.Me}
+                player={room.getMePlayer()}
+                avatar={user?.avatar_url}
+                btn={
+                  <>
+                    <Button
+                      size="large"
+                      className={styles["btn-join"]}
+                      onClick={() => {
+                        room.getMePlayer()?.state === PlayerState.NO_READY
+                          ? sendHsReady()
+                          : sendHsNotReady();
+                      }}
+                    >
+                      {room.getMePlayer()?.state === PlayerState.NO_READY
+                        ? "决斗准备"
+                        : "取消准备"}
+                    </Button>
+                    {/* <MoraButton ref={ref} /> */}
+                  </>
+                }
+              />
+              <PlayerZone who={Who.Op} player={room.getOpPlayer()} />
+            </div>
+
+            <SpecialButton className={styles["btns-action"]}>
+              开始游戏
+            </SpecialButton>
+          </div>
         </div>
       </div>
     </ConfigProvider>
@@ -320,15 +340,15 @@ const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
           ))}
         </Avatar.Group>
       </Button>
-      <Button
+      {/* <Button
         size="large"
         icon={<IconFont type="icon-play" size={12} />}
         disabled={!snapRoom.isHost}
         onClick={() => sendHsStart()}
       >
         开始游戏
-      </Button>
-      <Button
+      </Button> */}
+      {/* <Button
         size="large"
         danger
         onClick={() => {
@@ -339,9 +359,6 @@ const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
         }}
       >
         退出房间
-      </Button>
-      {/* <Button size="large" icon={<IconFont type="icon-play" size={12} />}>
-        开始游戏
       </Button> */}
     </Space>
   );

src/ui/Shared/IconFont/index.tsx

 import { createFromIconfontCN } from "@ant-design/icons";
 
 const _IconFont = createFromIconfontCN({
-  scriptUrl: ["//at.alicdn.com/t/c/font_4188978_6q59nqrc9ix.js"],
+  scriptUrl: ["//at.alicdn.com/t/c/font_4188978_kvwn9bcpnx.js"],
 });
 
 export const IconFont: React.FC<{