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,8 +24,11 @@ export const loader: LoaderFunction = () => {
 
 export const Component = () => {
   // TODO 根据是否登录，显示内容
+  const { pathname } = useLocation();
+  const pathnamesHideHeader = ["/waitroom"];
   return (
     <>
+      {!pathnamesHideHeader.includes(pathname) && (
         <nav className={styles.navbar}>
           <div className={styles["logo-container"]}>
             <img
@@ -43,6 +51,7 @@ export const Component = () => {
             <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,6 +87,22 @@ export const Component: React.FC = () => {
             <LoadingOutlined />
             对方正在选择先后
           </div> */}
+          <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)}
+            />
+          </div>
+
+          <div className={styles.wrap}>
             <Controller
               onDeckChange={(deckName: string) => {
                 const deck = deckStore.get(deckName);
@@ -122,11 +141,12 @@ export const Component: React.FC = () => {
               <PlayerZone who={Who.Op} player={room.getOpPlayer()} />
             </div>
 
-          <SpecialButton className={styles["btn-action"]}>
+            <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<{