前端：增加侧边栏折叠显示功能

www/src/components/HeaderContent.vue

@@ -1,5 +1,16 @@
 <template>
-  <el-row justify="end">
+  <el-row justify="space-between" align="middle">
+    <el-col :span="1">
+      <el-button text style="padding: 0" @click="handleCollapse">
+        <el-icon v-if="!collapseStore.collapse" :size="30">
+          <Expand/>
+        </el-icon>
+        <el-icon v-else :size="30">
+          <Fold/>
+        </el-icon>
+      </el-button>
+
+    </el-col>
     <el-col :span="2" style="text-align: right">
       <el-dropdown @command="handleCommand">
         <el-avatar shape="square" :size="50">{{ userName }}</el-avatar>
@@ -19,11 +30,19 @@
   import {useRouter} from 'vue-router'
   import {useStore} from '@/stores'
   import {computed} from 'vue'
+  import {Expand, Fold} from '@element-plus/icons-vue'
+  import {useCollapseStore} from '@/stores/collapse.js'
 
+  const collapseStore = useCollapseStore()
   const store = useStore()
   const userName = computed(() => store.name)
   const router = useRouter()
 
+  function handleCollapse() {
+    console.log(collapseStore.collapse)
+    collapseStore.collapse = !collapseStore.collapse
+  }
+
   function handleCommand(command) {
     if (command === 'logout') {
       logOut()

www/src/components/MenuList.vue

@@ -3,9 +3,14 @@
       class="el-menu-vertical-demo"
       style="--el-menu-bg-color: #1c1919;--el-menu-text-color: #ffffff;--el-menu-active-color: #3885d4;--el-menu-hover-bg-color:#3885d4 "
       router
+      :collapse="collapseStore.collapse"
       unique-opened
       @open="handleOpen"
       @close="handleClose">
+    <div style="height: 50px;background-color: #1c1919;">
+      <!--      菜单折叠只显示图标-->
+      <div class="header-font" v-if="!collapseStore.collapse">FastAdmin管理平台1212121</div>
+    </div>
     <el-menu-item index="/dashboard">首页</el-menu-item>
     <template v-for="item in menuList" :key="item.name">
       <!-- 有子菜单时处理逻辑 -->
@@ -39,8 +44,10 @@
 
 <script setup>
   import {useStore} from '@/stores'
-  import {computed} from 'vue'
+  import {computed, ref} from 'vue'
+  import {useCollapseStore} from '@/stores/collapse.js'
 
+  const collapseStore = useCollapseStore()
   const userStore = useStore()
 
   const menuList = computed(() => {
@@ -58,8 +65,22 @@
 </script>
 
 <style>
+.header-font {
+  font-size: large;
+  background-color: #1c1919;
+  color: #ffffff;
+  text-align: center;
+  padding: 10px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.el-menu-vertical-demo {
+  min-height: 100%;
+}
+
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
-  min-height: 100%;
 }
 </style>

www/src/stores/collapse.js

@@ -0,0 +1,7 @@
+import {defineStore} from 'pinia'
+import {ref} from 'vue'
+
+export const useCollapseStore = defineStore('collapse', () => {
+  const collapse = ref(false)
+  return {collapse}
+})

www/src/views/Layout.vue

@@ -1,13 +1,13 @@
 <template>
   <div style="height: 100%">
     <el-container style="height: 100%">
-      <el-header height="50px">
-        <header-content></header-content>
-      </el-header>
+      <el-aside class="aside-menu" width="auto">
+        <menu-list></menu-list>
+      </el-aside>
       <el-container style="height: 100%">
-        <el-aside class="aside-menu" width="200px">
-          <menu-list></menu-list>
-        </el-aside>
+        <el-header style="--el-header-padding: 0 10px" height="50px">
+          <header-content></header-content>
+        </el-header>
         <el-main style="padding: 0px">
           <el-tabs style="border-bottom: 0" v-model="currentTab" type="border-card" closable @tab-click="tabClick"
                    @tab-remove="tabRemove">
@@ -46,12 +46,7 @@
   })
 </script>
 
-<style scoped>
-.aside-menu {
-  color: aliceblue;
-  background-color: #1c1919;
-}
-
+<style>
 .main_style {
   margin-top: 10px;
   margin-left: 5px;