ADD: 菜单折叠

src/layouts/components/FHeader.vue

@@ -7,8 +7,9 @@
             GameAdmin
         </span>
 
-        <el-icon class="icon-btn">
-            <Fold />
+        <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
+            <Fold v-if="$store.state.asideWidth == '250px'" />
+            <Expand v-else />
         </el-icon>
         <el-tooltip effect="dark" content="刷新" placement="bottom">
             <el-icon class="icon-btn" @click="handleRefresh">

src/layouts/components/FMenu.vue

 <template>
-    <div class="f-menu">
-        <el-menu default-active="2" class="border-0" @select="handelSelect">
+    <div class="f-menu" :style="{ width:$store.state.asideWidth }" >
+        <el-menu 
+        default-active="2" 
+        class="border-0" 
+        @select="handelSelect"
+        :collapse="iscollapse"
+        :collapse-transition="false"
+        >
             <template v-for="(item, index) in asideMenus" :key="index">
                 <el-sub-menu v-if="item.child && item.child.length > 0" :index="item.name">
                     <template #title>
@@ -29,9 +35,21 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import {useRouter} from 'vue-router'
+import { useStore } from 'vuex'
 
 const router = useRouter()
+const store = useStore()
+
+
+
+
+
+// 是否折叠
+
+const iscollapse = computed(()=> !(store.state.asideWidth == '250px'))
+
 
 const asideMenus = [{
     "name": "后台面板",
@@ -61,11 +79,12 @@ const handelSelect =(e)=>{
 
 <style>
 .f-menu {
-    width: 250px;
+    transition: all 0.2s;
     top: 64px;
     bottom: 0;
     left: 0;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
     @apply shadow-md fixed bg-light-50;
 
 }

src/store/index.js

@@ -9,7 +9,10 @@ const store = createStore({
     state() {
         return {
             // 用户信息
-            user: {}
+            user: {},
+
+            // 侧边宽度
+            asideWidth:"250px"
 
         }
     },
@@ -17,7 +20,14 @@ const store = createStore({
         // 记录用户信息
         SET_USERINFO(state, user) {
             state.user = user
+        },
+
+        // 展开/收起侧边
+        handleAsideWidth(state){
+            state.asideWidth = state.asideWidth == "250px"? "64px" : "250px"
+
         }
+
     },
     actions: {
         // 登录