feat: some btns and style in card build

src/ui/BuildDeck/DeckSelect.module.scss

+.deck-select {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  .item {
+    height: 40px;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    .hover,
+    .selected {
+      position: absolute;
+      width: auto;
+      height: auto;
+      top: 0;
+      bottom: 0;
+      --padding-x: 5px;
+      left: var(--padding-x);
+      right: var(--padding-x);
+      border-radius: 4px;
+      transition: 0.2s;
+    }
+    .hover {
+      background-color: rgba(255, 255, 255, 0.15);
+      opacity: 0;
+    }
+    .selected {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+    .btns {
+      transition: 0.2s;
+      opacity: 0;
+    }
+    &:hover {
+      .hover,
+      .btns {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.btn-add {
+  position: fixed;
+  bottom: 40px;
+  left: calc(300px / 2); // 暂时没想到太好的办法，只能先设为sider的一半
+  transform: translate(-50%);
+  background-color: rgb(59, 0, 169);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+  &:hover {
+    background-color: rgb(78, 0, 223) !important;
+    transform: translate(-50%) scale(1.3);
+  }
+}

src/ui/BuildDeck/DeckSelect.tsx

+import styles from "./DeckSelect.module.scss";
+import { Button } from "antd";
+import {
+  DeleteOutlined,
+  DownloadOutlined,
+  PlusOutlined,
+} from "@ant-design/icons";
+
+export const DeckSelect: React.FC<{
+  decks: { name: string; id: number }[];
+  selected: number;
+  onSelect: (id: number) => void;
+  onDelete: (id: number) => void;
+  onDownload: (id: number) => void;
+  onAdd: () => void;
+}> = ({ decks, selected, onSelect, onDelete, onDownload, onAdd }) => {
+  return (
+    <>
+      <div className={styles["deck-select"]}>
+        {decks.map(({ name, id }) => (
+          <div key={id} className={styles.item} onClick={() => onSelect(id)}>
+            <div className={styles.hover} />
+            {selected === id && <div className={styles.selected} />}
+            <span>{name}</span>
+            <div className={styles.btns}>
+              <Button
+                icon={<DeleteOutlined />}
+                type="text"
+                shape="circle"
+                onClick={cancelBubble(() => onDelete(id))}
+              />
+              <Button
+                icon={<DownloadOutlined />}
+                type="text"
+                shape="circle"
+                onClick={cancelBubble(() => onDownload(id))}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+      <Button
+        className={styles["btn-add"]}
+        icon={<PlusOutlined />}
+        shape="circle"
+        type="text"
+        onClick={onAdd}
+      />
+    </>
+  );
+};
+
+/** 阻止事件冒泡 */
+const cancelBubble =
+  <T,>(fn: (e: React.SyntheticEvent) => T) =>
+  (e: React.SyntheticEvent) => {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+    return fn(e);
+  };

src/ui/BuildDeck/index.module.scss

@@ -13,21 +13,11 @@
   overflow-x: hidden;
   overflow-y: overlay;
   background: transparent !important;
+  position: relative;
   @include utils.scrollbar;
+  // 去掉menu
   .menu {
-    min-height: 100%;
-  }
-  .btn-add {
-    position: absolute;
-    bottom: 40px;
-    left: 50%;
-    transform: translate(-50%);
-    background-color: rgb(59, 0, 169);
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
-    &:hover {
-      background-color: rgb(78, 0, 223);
-      transform: translate(-50%) scale(1.3);
-    }
+    // min-height: 100%;
   }
 }
 
@@ -36,7 +26,7 @@
   padding-bottom: 0;
   padding-right: 1rem;
   .deck {
-    width: 620px;
+    width: 660px;
   }
   .select {
     flex: 1;
@@ -74,9 +64,7 @@
   .main {
     flex: 3;
   }
-  .extra {
-    flex: 1;
-  }
+  .extra,
   .side {
     flex: 1;
   }

src/ui/BuildDeck/index.tsx

@@ -3,7 +3,6 @@ import {
   DeleteOutlined,
   EditOutlined,
   FilterOutlined,
-  PlusOutlined,
   SearchOutlined,
   SortAscendingOutlined,
   UndoOutlined,
@@ -13,8 +12,6 @@ import {
   ConfigProvider,
   Input,
   Layout,
-  Menu,
-  type MenuProps,
   Space,
   type ThemeConfig,
 } from "antd";
@@ -22,40 +19,12 @@ import {
 import { Background } from "../Shared";
 import styles from "./index.module.scss";
 
-const { Content, Sider } = Layout;
-
-type MenuItem = Required<MenuProps>["items"][number];
+import { DeckSelect } from "./DeckSelect";
 
-// 生成伪菜单栏
-function getItem(
-  label: React.ReactNode,
-  key: React.Key,
-  icon?: React.ReactNode,
-  children?: MenuItem[],
-  type?: "group"
-): MenuItem {
-  return {
-    key,
-    icon,
-    children,
-    label,
-    type,
-  } as MenuItem;
-}
-const items: MenuProps["items"] = Array.from({ length: 15 }).map((_, i) =>
-  getItem(`卡组 ${i}`, i.toString())
-);
+const { Content, Sider } = Layout;
 
 const theme: ThemeConfig = {
   components: {
-    Menu: {
-      colorItemBg: "#ffffff00",
-      colorItemBgSelected: "#ffffff33",
-      colorItemTextSelected: "#ffffff",
-      colorActiveBarBorderSize: 0,
-      fontSize: 12,
-      fontSizeLG: 12,
-    },
     Layout: {
       colorBgBody: "transparent",
     },
@@ -67,23 +36,22 @@ export const Component: React.FC = () => {
     <ConfigProvider theme={theme}>
       <Background />
       <Layout className={styles.layout} style={{ width: "100%" }}>
-        <Sider width={220} className={styles.sider}>
-          <Menu
-            className={styles.menu}
-            defaultSelectedKeys={["1"]}
-            defaultOpenKeys={["sub1"]}
-            items={items}
+        <Sider width={300} className={styles.sider}>
+          <DeckSelect
+            decks={Array.from({ length: 17 }).map((_, i) => ({
+              name: `卡组 ${i}`,
+              id: i,
+            }))}
+            selected={4}
+            onSelect={(id) => console.log(id)}
+            onDelete={(id) => console.log(id)}
+            onDownload={(id) => console.log(id)}
+            onAdd={() => console.log("add")}
           />
-          <Button
-            className={styles["btn-add"]}
-            icon={<PlusOutlined />}
-            shape="circle"
-            type="text"
-          ></Button>
         </Sider>
         <Content className={styles.content}>
           <Deck />
-          <Select />
+          <CardSelect />
         </Content>
       </Layout>
     </ConfigProvider>
@@ -144,7 +112,7 @@ const Deck: React.FC = () => {
   );
 };
 
-const Select: React.FC = () => {
+const CardSelect: React.FC = () => {
   return (
     <div className={styles.select}>
       <div className={styles.container}>