add NewSide

src/ui/Layout/index.tsx

@@ -64,7 +64,7 @@ export const Component = () => {
   const logined = Boolean(useSnapshot(accountStore).user);
 
   const { pathname } = routerLocation;
-  const pathnamesHideHeader = ["/waitroom", "/duel"];
+  const pathnamesHideHeader = ["/waitroom", "/duel", "/side"];
 
   const callbackUrl = `${location.origin}/match/`;
   const onLogin = () => location.replace(getSSOSignInUrl(callbackUrl));

src/ui/NeosRouter.tsx

@@ -28,6 +28,10 @@ const router = createBrowserRouter([
         path: "/duel",
         lazy: () => import("./Duel/Main"),
       },
+      {
+        path: "/side",
+        lazy: () => import("./NewSide"),
+      },
     ],
   },
 ]);

src/ui/NewSide/index.module.scss

+.container {
+  display: flex;
+  height: 100%;
+}
+
+.sider {
+  width: var(--sider-width);
+  flex: 0 0 var(--sider-width);
+  background-color: hsla(0, 0%, 100%, 0.05);
+  position: relative;
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+}
+
+.content {
+  flex: 1;
+  padding-bottom: 0;
+  padding: 1rem;
+  width: 660px;
+}
+
+.deck-container {
+  width: -webkit-fill-available;
+  height: calc(100% - 20px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 10px;
+  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;
+    justify-content: space-between;
+  }
+  background-color: hsla(0, 0%, 100%, 0.05);
+  backdrop-filter: blur(5px);
+}
+
+.detail-container {
+  --detail-width: 300px;
+  width: var(--detail-width);
+  flex: 0 0 var(--detail-width);
+  position: relative;
+}

src/ui/NewSide/index.tsx

+import { CheckOutlined, UndoOutlined } from "@ant-design/icons";
+import { Button, Space } from "antd";
+import React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+import { CardDetail } from "../BuildDeck/CardDetail";
+import { Background } from "../Shared";
+import { Chat } from "../WaitRoom/Chat";
+import styles from "./index.module.scss";
+
+export const Component: React.FC = () => {
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <Background />
+      <div className={styles.container}>
+        <div className={styles.sider}>
+          <Chat />
+        </div>
+        <div className={styles.content}>
+          <div className={styles["deck-container"]}>
+            <Space className={styles.title}>
+              <Space style={{ marginRight: 6 }}>
+                <Button type="text" size="small" icon={<UndoOutlined />}>
+                  重置
+                </Button>
+                <Button type="primary" size="small" icon={<CheckOutlined />}>
+                  确定
+                </Button>
+              </Space>
+            </Space>
+          </div>
+        </div>
+        <div className={styles["detail-container"]}>
+          <CardDetail code={10000} open={true} onClose={() => {}} />
+        </div>
+      </div>
+    </DndProvider>
+  );
+};