更新

tansci-boot-ui/src/components/layout/Index.vue

@@ -10,6 +10,7 @@
         headerHeight: '52px',
         asideWidth: '260px',
         defaultHeight: null,
+        isCollapse: false,
         routers: [],
     })
 
@@ -40,6 +41,16 @@
         state.defaultHeight = window.innerHeight
     }
 
+    function onCollapse(val:Boolean){
+        if(val){
+            state.isCollapse = false
+            state.asideWidth = "260px"
+        } else {
+            state.isCollapse = true
+            state.asideWidth = "110px"
+        }
+    }
+
 </script>
 <template>
   <div class="layout-container">
@@ -49,11 +60,13 @@
                 :logo="logo" 
                 :shadow="proxy.$global.cardShadow" 
                 :title="proxy.$global.title" 
-                :height="state.defaultHeight-105"/>
+                :height="state.defaultHeight-105"
+                :isCollapse="state.isCollapse"
+                @onCollapse="onCollapse"/>
         </el-aside>
         <el-container>
             <el-header :height="state.headerHeight">
-                <TbHeader :height="state.headerHeight"/>
+                <TbHeader :height="state.headerHeight" :isCollapse="state.isCollapse"/>
             </el-header>
             <el-main>
                 <el-card :shadow="proxy.$global.cardShadow">
@@ -75,6 +88,7 @@
             padding: 0.4rem;
             overflow-x: auto;
             overflow-y: hidden;
+            transition: all .5s;
         }
         .el-header{
             padding: 0 0.6rem 0 0;

tansci-boot-ui/src/components/layout/component/TbMenu.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
     import {defineProps} from 'vue'
+    import {useRouter} from 'vue-router'
     import TbSubmenu from "./TbSubmenu.vue"
 
 	const props = defineProps({
@@ -7,18 +8,26 @@
         height: Number,
         logo: Object,
         shadow: String,
-        title: String
+        title: String,
+        isCollapse: Boolean
 	})
 
+    const emit = defineEmits(['onCollapse'])
+    const router = useRouter()
+
+    function toHome(){
+        router.push({path: '/index'});
+    }
+
 </script>
 <template>
-    <el-card :shadow="shadow" :body-style="{padding: '1rem'}">
+    <el-card :shadow="shadow" :body-style="{padding: '1rem 0.8rem', position: 'relative'}">
-        <div class="logo">
+        <div @click="toHome" class="logo">
-            <el-image :src="logo" fit="fit" style="width: 20%; height:00%"></el-image>
+            <el-image :src="logo" fit="fit" :style="{width: isCollapse?'60%':'20%', height: '100%'}"></el-image>
-            <span class="title">{{title}}</span>
+            <span v-show="!isCollapse" class="title">{{title}}</span>
         </div>
         <el-scrollbar :height="height">
-            <el-menu router :default-active="$route.path">
+            <el-menu router :default-active="$route.path" :collapse="isCollapse">
                 <template v-for="item in routers" :key="item">
                     <el-menu-item v-if="!item.children || item.children.length <= 1" :index="item.path">
                         <el-icon v-if="item.icon" style="vertical-align: middle;">
@@ -30,6 +39,7 @@
                 </template>
             </el-menu>
         </el-scrollbar>
+        <el-button @click="$emit('onCollapse', isCollapse)" :icon="isCollapse ? 'ArrowRightBold':'ArrowLeftBold'" circle size="small" class="collapse"></el-button>
     </el-card>
 </template>
 <style lang="scss" scoped>
@@ -62,4 +72,9 @@
             background: transparent;
         }
     }
+    .collapse{
+        position: absolute;
+        right: -10px;
+        top: 25%;
+    }
 </style>