fix: 后台侧栏折叠时宽度跟随菜单收缩

src/layout/AdminLayout.vue

@@ -3,6 +3,7 @@ import {useLoginUserStore} from "../store";
 import {computed, type ComputedRef, ref} from "vue";
 import type {RouteRecordRaw} from "vue-router";
 import router, {adminRoutes} from "../router";
+import {Expand, Fold} from "@element-plus/icons-vue";
 
 const title = ref<string>("分布式OJ系统");
 const loginUserStore = useLoginUserStore()
@@ -22,12 +23,6 @@ const menus:ComputedRef<RouteRecordRaw[] | undefined> = computed(()=>{
   });
 })
 const isCollapse = ref(false)
-const handleOpen = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-const handleClose = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
 </script>
 
 <template>
@@ -58,17 +53,20 @@ const handleClose = (key: string, keyPath: string[]) => {
     </el-header>
 
     <el-container class="main-container">
-      <el-aside class="menu">
-        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;display: flex;justify-content: center">
-          <el-radio-button :value="false">expand</el-radio-button>
-          <el-radio-button :value="true">collapse</el-radio-button>
-        </el-radio-group>
+      <el-aside class="menu" :width="isCollapse ? '64px' : '200px'">
+        <el-button
+            class="collapse-btn"
+            text
+            :title="isCollapse ? '展开' : '收起'"
+            @click="isCollapse = !isCollapse"
+        >
+          <el-icon><component :is="isCollapse ? Expand : Fold"/></el-icon>
+          <span v-if="!isCollapse">收起</span>
+        </el-button>
         <el-menu
             router
             class="el-menu-vertical"
             :collapse="isCollapse"
-            @open="handleOpen"
-            @close="handleClose"
         >
           <el-menu-item :index="menu.path" v-for="menu in menus" :key="menu.path">
             <el-icon><Component :is="menu.meta?.icon"/></el-icon>
@@ -116,13 +114,22 @@ const handleClose = (key: string, keyPath: string[]) => {
 }
 
 .menu{
-  width: 200px;
+  transition: width 0.3s;
+  overflow: hidden;
+}
+.collapse-btn{
+  width: 100%;
+  margin-bottom: 10px;
+  justify-content: center;
 }
 .main-container {
   flex: 1;
 }
-.el-menu-vertical-demo:not(.el-menu--collapse) {
-  width: 200px;
+.el-menu-vertical{
+  border-right: none;
+}
+.el-menu-vertical:not(.el-menu--collapse) {
+  width: 100%;
   min-height: 400px;
 }
 </style>