From c25c76edad1aa57325ccb0dee3f3a99296d52c50 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Tue, 2 Apr 2024 20:37:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20aside=E8=A1=A5=E5=85=85-=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E5=AE=BD=E5=BA=A6=E8=B0=83=E6=95=B4=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E5=B7=A6=E4=BE=A7=E5=B8=83=E5=B1=80=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .husky/_/.gitignore                   |  1 -
 src/layout/components/Aside/index.vue | 80 ++++++++++++---------------
 2 files changed, 34 insertions(+), 47 deletions(-)

diff --git a/.husky/_/.gitignore b/.husky/_/.gitignore
index f59ec20..e69de29 100644
--- a/.husky/_/.gitignore
+++ b/.husky/_/.gitignore
@@ -1 +0,0 @@
-*
\ No newline at end of file
diff --git a/src/layout/components/Aside/index.vue b/src/layout/components/Aside/index.vue
index a8b8402..7ac247d 100644
--- a/src/layout/components/Aside/index.vue
+++ b/src/layout/components/Aside/index.vue
@@ -1,66 +1,49 @@
 <template>
-  <a-layout-sider collapsible breakpoint="xl" @collapse="onCollapse">
+  <div class="aside">
     <div class="logo_head">
       <img :src="Logo" class="logo" />
-      <span class="logo_title" v-if="!collapse">dc admin</span>
+      <span class="logo_title" v-if="!collapsed">dc admin</span>
     </div>
-    <a-scrollbar outer-class="aside_scroll">
-      <a-menu :default-open-keys="['0']" :default-selected-keys="['0_2']" breakpoint="xl" :collapsed="collapse">
-        <a-sub-menu key="0">
-          <template #icon><icon-apps></icon-apps></template>
-          <template #title>Navigation 1</template>
-          <a-menu-item key="0_0">Menu 1</a-menu-item>
-          <a-menu-item key="0_1">Menu 2</a-menu-item>
-          <a-menu-item key="0_2">Menu 3</a-menu-item>
-          <a-menu-item key="0_3">Menu 4</a-menu-item>
-        </a-sub-menu>
-        <a-sub-menu key="1">
-          <template #icon><icon-bug></icon-bug></template>
-          <template #title>Navigation 2</template>
-          <a-menu-item key="1_0">Menu 1</a-menu-item>
-          <a-menu-item key="1_1">Menu 2</a-menu-item>
-          <a-menu-item key="1_2">Menu 3</a-menu-item>
-        </a-sub-menu>
-        <a-sub-menu key="2">
-          <template #icon><icon-bulb></icon-bulb></template>
-          <template #title>Navigation 3</template>
-          <a-menu-item key="2_0">Menu 1</a-menu-item>
-          <a-menu-item key="2_1">Menu 2</a-menu-item>
-          <a-sub-menu key="2_2" title="Navigation 4">
-            <a-menu-item key="2_2_0">Menu 1</a-menu-item>
-            <a-menu-item key="2_2_1">Menu 2</a-menu-item>
+    <a-layout-sider :collapsed="collapsed" breakpoint="xl" class="layout_side" :width="220">
+      <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
+        <a-menu show-collapse-button @collapse="onCollapse">
+          <a-menu-item key="0_0_0" data-obj="1">Menu 1</a-menu-item>
+          <a-sub-menu :key="item" v-for="item in 20">
+            <template #icon><icon-apps></icon-apps></template>
+            <template #title>Navigation 1</template>
+            <a-menu-item key="0_0">Menu 1</a-menu-item>
+            <a-menu-item key="0_1">Menu 2</a-menu-item>
+            <a-menu-item key="0_2" disabled>Menu 3</a-menu-item>
           </a-sub-menu>
-        </a-sub-menu>
-      </a-menu>
-    </a-scrollbar>
-  </a-layout-sider>
+        </a-menu>
+      </a-scrollbar>
+    </a-layout-sider>
+  </div>
 </template>
 
 <script setup lang="ts">
 import Logo from "@/assets/img/logo.jpg";
-import { Message } from "@arco-design/web-vue";
 
-const collapse = ref<boolean>(false);
-const onCollapse = (val: boolean, type: string) => {
-  console.log("收缩", val, type);
-  collapse.value = val;
-  const content = type === "responsive" ? "触发响应式收缩" : "点击触发收缩";
-  Message.info({
-    content,
-    duration: 2000
-  });
+const collapsed = ref<boolean>(false);
+const onCollapse = (type: boolean) => {
+  collapsed.value = type;
 };
 </script>
 
 <style lang="scss" scoped>
+.aside {
+  height: 100vh;
+}
+
 .logo_head {
   height: 60px;
-  box-shadow: inset 0 0 0 1px red;
   display: flex;
   justify-content: space-around;
   align-items: center;
+  box-sizing: border-box;
+  border-bottom: $border-1 solid $color-border-1;
   .logo {
-    width: 50px;
+    width: 30px;
   }
   .logo_title {
     font-weight: bold;
@@ -68,9 +51,14 @@ const onCollapse = (val: boolean, type: string) => {
   }
 }
 
-.aside_scroll {
-  width: 100%;
+.layout_side {
   height: calc(100% - 60px);
-  box-shadow: inset 0 0 0 1px black;
+}
+.scrollbar {
+  height: 100%;
+}
+:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
+  width: 4px;
+  margin-left: 8px;
 }
 </style>