feat(*): 左侧菜单栏增加折叠

src/components/Hamburger/index.vue

+<template >
+  <div class="hamburger" @click="toggleClick">
+    <svg
+        :class="{'is-active':isActive}"
+        class="hamburger-icon"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+        width="64"
+        height="64"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+
+<script setup>
+import { ref, defineProps,defineEmits } from 'vue';
+const emit = defineEmits(['toggleClick']);
+
+const props = defineProps({
+  isActive: {
+    type: Boolean,
+    default: false
+  },
+});
+
+const toggleClick = ()=>{
+  emit('toggleClick');
+}
+</script>
+
+<style scoped lang="scss">
+.hamburger {
+  padding: 0 15px;
+  .hamburger-icon {
+    display: inline-block;
+    vertical-align: middle;
+    width: 20px;
+    height: 20px;
+  }
+  .is-active {
+    transform: rotate(180deg);
+  }
+}
+</style>
\ No newline at end of file

src/layout/index.vue

 <template>
   <div class="layout-box">
-    <div class="left">
+    <div class="left" :class="{'colWidth': sidebar}">
       <menuCom></menuCom>
     </div>
-    <div class="right">
+    <div class="right" :class="{'extend': sidebar}">
       <div class="header">
+        <hamburger
+            class="hamburger-container"
+            @toggleClick="toggleSideBar"
+            :is-active="sidebar"
+        />
         <h3>DC-TOM管理平台</h3>
+        <div class="right-block">
+          <el-dropdown class="right-menu-item"
+              trigger="click"
+          >
+            <div  class="user-info">
+              <svg color="red"  data-icon-name="user-circle" data-style="line" icon_origin_id="24289" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="user-circle" class="icon line" width="40" height="40"><path style="fill: none; stroke: rgb(1, 135, 150); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1;" d="M12,21h0a9,9,0,0,1-9-9H3a9,9,0,0,1,9-9h0a9,9,0,0,1,9,9h0A9,9,0,0,1,12,21Zm0-6a5,5,0,0,0-5,4.5,9,9,0,0,0,9.94,0A5,5,0,0,0,12,15Zm0-8a4,4,0,1,0,4,4A4,4,0,0,0,12,7Z" id="primary"></path></svg>
+              <!-- <img
+                src="data:image/png;base64,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"
+                class="user-avatar"
+              /> -->
+              <span class="user-name">{{ userName }}</span>
+            </div>
 
-        <el-dropdown trigger="click">
-          <div  class="user-info">
-            <svg color="red"  data-icon-name="user-circle" data-style="line" icon_origin_id="24289" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="user-circle" class="icon line" width="40" height="40"><path style="fill: none; stroke: rgb(1, 135, 150); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1;" d="M12,21h0a9,9,0,0,1-9-9H3a9,9,0,0,1,9-9h0a9,9,0,0,1,9,9h0A9,9,0,0,1,12,21Zm0-6a5,5,0,0,0-5,4.5,9,9,0,0,0,9.94,0A5,5,0,0,0,12,15Zm0-8a4,4,0,1,0,4,4A4,4,0,0,0,12,7Z" id="primary"></path></svg>
-            <!-- <img
-              src="data:image/png;base64,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"
-              class="user-avatar"
-            /> -->
-          <span class="user-name">{{ userName }}</span>
-          </div>  
-         
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item  @click="logout">退出登录</el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item  @click="logout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
       </div>
       <div class="content">
         <div class="breadcrumb-container">
@@ -44,10 +52,13 @@ import { useRoute, useRouter } from 'vue-router';
 import { watch, ref, onMounted } from 'vue';
 import { getToken } from '@/utils/auth';
 import { useUsersStore } from "@/pinia/user.js";
-
+import { menuStore } from '@/pinia/menu.js';
+import hamburger from "@/components/Hamburger/index.vue";
+import { storeToRefs } from 'pinia';
 export default {
   components: {
     menuCom,
+    hamburger
   },
   setup() {
     const router = useRouter();
@@ -87,6 +98,8 @@ export default {
     
     const userName = getToken('userName')
     const store = useUsersStore();
+    const menu = menuStore();
+    const { sidebar } = storeToRefs(menuStore());
     async function logout() {
       sessionStorage.setItem("permissionData", "");
       sessionStorage.setItem("branchFactoryList", []);
@@ -95,10 +108,15 @@ export default {
       store.istrue = false;
       router.push({ path: '/login' });
     }
+    const toggleSideBar = () => {
+      menu.toggleSideBar();
+    }
     return {
       breadcrumbList,
       userName,
-      logout
+      logout,
+      sidebar,
+      toggleSideBar
     };
   },
   created() {
@@ -111,25 +129,58 @@ export default {
 .layout-box {
   display: flex;
   height: 100vh;
+  width: 100%;
   .left {
     width: 200px;
     height: 100%;
     background: linear-gradient(180deg, #018796, #014155);
   }
+  .colWidth {
+    width: 63px;
+  }
   .right {
-    width: calc(100vw - 200px);
+    min-height: 100%;
+    width: calc(100% - 200px);
     .header {
       width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
       height: 4.0625rem !important;
       background: #ffffff;
       box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
       box-sizing: border-box;
+      position: relative;
+      .hamburger-container {
+        line-height: 4.0625rem;
+        height: 100%;
+        float: left;
+        cursor: pointer;
+        transition: background 0.3s;
+        -webkit-tap-highlight-color: transparent;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+      }
+
       h3 {
-        margin-left: 3.125rem;
         font-size: 1.75rem !important;
+        margin: 0;
+        position: absolute;
+        left: 50px;
+        top: 14px;
+      }
+      .right-block {
+        line-height: 50px;
+        float: right;
+        height: 100%;
+        &:focus {
+          outline: none;
+        }
+        .right-menu-item {
+          display: inline-block;
+          padding: 0 8px;
+          height: 100%;
+          vertical-align: text-bottom;
+        }
       }
       .user-info {
         cursor: pointer;
@@ -138,6 +189,7 @@ export default {
         margin-right: 3.125rem;
         font-size: 1.25rem !important;
         color: #606266;
+        height: 100%;
         .user-avatar {
           width: 1.5rem;
           height: 1.5rem;
@@ -149,6 +201,7 @@ export default {
           line-height: 1.5rem;
         }
       }
+
     }
     .breadcrumb-container {
         flex: 1;
@@ -163,5 +216,8 @@ export default {
       background: #e7eef5;
     }
   }
+  .extend {
+    width: calc(100% - 63px);
+  }
 }
 </style>

src/layout/menuCom.vue

@@ -5,6 +5,8 @@
         class="el-menu-vertical-demo"
         @open="handleOpen"
         @close="handleClose"
+        :collapse="sidebar"
+        :collapse-transition="false"
       >
         <template v-for="(item, index) in routerList" :key="item.path">
           <el-sub-menu
@@ -16,14 +18,22 @@
               <el-icon><location /></el-icon>
               <span>{{getMenuTitle(item)}}</span>
             </template>
-              <el-menu-item v-for="(item_son, index_son) in item.children" :key="item_son.path" :index="index + '_' + index_son"
-              @click="handleClick(item_son.path)">
+              <el-menu-item v-for="(item_son, index_son) in item.children"
+                            :key="item_son.path"
+                            :index="index + '_' + index_son"
+                            @click="handleClick(item_son.path)"
+                            class="submenu-title-noDropdown"
+              >
                 <span>{{getMenuTitle(item_son)}}</span>
-                <!-- <router-link :to="item.path + '/' + item_son.path">{{getMenuTitle(item_son)}}</router-link> -->
               </el-menu-item>
           </el-sub-menu>
-          <el-menu-item v-else :index="index + ''"  class="submenu-box"  @click="handleClick(item.path)">
-            <el-icon><setting /></el-icon>
+          <el-menu-item v-else :index="index + ''"
+                        class="submenu-box"
+                        @click="handleClick(item.path)"
+          >
+            <el-icon>
+              <setting />
+            </el-icon>
             <span>{{getMenuTitle(item)}}</span>
           </el-menu-item>
         </template>
@@ -41,9 +51,10 @@ import {
 } from "@element-plus/icons-vue";
 import {routes} from "../router/index.js";
 import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
+import { menuStore } from '@/pinia/menu.js';
+import { storeToRefs } from 'pinia';
+const router = useRouter();
+const { sidebar } = storeToRefs(menuStore());
 const handleClick = (path) => {
   console.log(path);
   if (path.startsWith('/')) {
@@ -106,4 +117,14 @@ const getMenuTitle = (item) => {
     color: #fff !important;
   }
 }
+
+// menu hover
+.submenu-title-noDropdown,
+.el-submenu__title {
+  background: transparent;
+  color: #FFFFFF !important;
+  &:hover {
+    background-color: #03a1b3 !important;
+  }
+}
 </style>
\ No newline at end of file

src/pinia/index.js

 //创娃store很简单，调用pinia中的definestore函数即可，该函数族收两个参数:
 import {defineStore} from 'pinia'
-import user from './user'
+import user from './user';
+import menu from './menu';
 console.log(user.actions)
 
 //第一个参敬是应用程序中store的唯一id,就是给数据仓库起个名字
@@ -11,3 +12,8 @@ export const useUsersStore = defineStore('user',{
      state: user.state,
      actions: user.actions,
 })
+
+export const menuStore = defineStore('menu',{
+     state: menu.state,
+     actions: menu.actions,
+})

src/pinia/menu.js

+import { defineStore } from 'pinia';
+
+export const menuStore = defineStore('menu',{
+    state: ()=>{
+        return {
+            sidebar: false,
+        }
+    },
+    actions: {
+        toggleSideBar() {
+            this.sidebar = !this.sidebar;
+        },
+    }
+})
\ No newline at end of file