优化菜单导航记录

src/layout/index.vue

@@ -33,12 +33,13 @@
                         <div class="project-name-box">{{projectInfo.projectAlias}} / {{contractInfo.name}}</div>
                         <el-cascader ref="ElCascaderRef" v-model="projectValue" :options="projectContract" :props="projectProps" placeholder="请选择项目" @change="projectContractChange"/>
                     </div>
+                    <MenuStretchBar/>
                     <HelpInfoBar></HelpInfoBar>
                     <ConfigBar></ConfigBar>
                     <UserInfoBar></UserInfoBar>
                 </div>
             </el-header>
-            <TopMenuBar/>
+            <TopMenuBar v-show="menuBarShow"/>
             <el-main class="hc-main-box" id="hc-main-box">
                 <router-view v-slot="{ Component }" v-if="reloadRouter">
                     <transition name="fade-transform">
@@ -61,6 +62,7 @@ import HelpInfoBar from "./modules/HelpInfoBar.vue"
 import UserInfoBar from "./modules/UserInfoBar.vue"
 import ConfigBar from "./modules/ConfigBar.vue"
 import TopMenuBar from "./modules/TopMenuBar.vue"
+import MenuStretchBar from "./modules/MenuStretchBar.vue"
 import {initButtons,initProjectContract} from "~sto/app";
 import NameDark from "~src/assets/logo/name-dark.png";
 import NameWhite from "~src/assets/logo/name-white.png";
@@ -88,6 +90,7 @@ const RoutesTitle = ref(BarMenuTitle);
 const MenuBarData = ref(useAppState.getMenus)
 const isCollapse = ref(useAppState.getCollapse)
 const userInfo = ref(useAppState.getUserInfo);
+const menuBarShow = ref(useAppState.menuBarShow);
 
 //项目合同段
 const projectInfo = ref({});
@@ -120,7 +123,8 @@ watch(() => [
     useRoutes?.name,
     useRoutes?.meta?.title,
     useAppState.getCollapse,
-], ([projectContractArr, userMenus, theme, ColorVal, RouteName, RouteTitle, collapse]) => {
+    useAppState.menuBarShow,
+], ([projectContractArr, userMenus, theme, ColorVal, RouteName, RouteTitle, collapse, barMenuShow]) => {
     MenuBarData.value = userMenus
     HomeTheme.value = theme
     AppColor.value = ColorVal
@@ -131,6 +135,7 @@ watch(() => [
     setIsCollapse(RoutesName.value)
     projectContractData(projectContractArr || []);
     useAppState.barMenuName = RouteTitle ?? ''
+    menuBarShow.value = barMenuShow
 })
 
 //设置折叠

src/layout/modules/MenuStretchBar.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="header-icon-bar" @click="toMenuBarShowClick">
+        <HcIcon name="apps" :fill="menuBarShow" class="header-icon"/>
+    </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+import {useAppStore} from "~src/store";
+
+//初始化变量
+const useAppState = useAppStore()
+const menuBarShow = ref(useAppState.menuBarShow)
+
+//监听
+watch(() => [
+    useAppState.menuBarShow,
+], ([show]) => {
+    menuBarShow.value = show
+})
+
+const toMenuBarShowClick = () => {
+    useAppState.menuBarShow = !menuBarShow.value
+}
+</script>
+
+<style lang="scss" scoped>
+.header-icon-bar {
+    position: relative;
+    height: 40px;
+    width: 40px;
+    border-radius: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    margin-right: 30px;
+    font-size: 26px;
+    border: 1px solid #00000000;
+    background: #f1f5f8;
+    color: #202532;
+    box-shadow: var(--hc-shadow);
+}
+.hc-layout-box .hc-container-view.home .hc-header-view .hc-header-content .header-icon-bar {
+    border: 1px solid white;
+    color: inherit;
+    box-shadow: initial;
+    background: initial;
+}
+</style>

src/layout/modules/TopMenuBar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="hc-top-menu-bar">
-        <el-scrollbar>
+        <el-scrollbar always>
             <div class="bar-menu-content">
                 <div v-for="(item, index) in barMenuData" class="bar-menu-btn" :class="item.key === barRoutes.key?'cur':''"
                      @click="barMenuClick(item)" @contextmenu.prevent="barMenuContextMenu($event, item, index)">
@@ -35,7 +35,6 @@ const barRoutes = ref({key: '', path: '', title: ''});
 //渲染完成
 onMounted(() => {
     const {name, path, meta} = useRoutes
-    console.log(barMenuData.value)
     barRoutes.value = {path, key: name, title: meta?.title}
     setBarMenuData()
 })
@@ -92,6 +91,7 @@ const handleMenuSelect = ({key}) => {
     } else if (key === 'all') {
         barMenuData.value = []
         setStoreData('bar-menu-datas', [])
+        useAppState.menuBarShow = false;
         router.push({name: 'home-index'});
     }
 }
@@ -111,6 +111,7 @@ const barMenuCloseClick = (item, index) => {
         }
         if (indexs < 0) {
             setStoreData('bar-menu-datas', barMenuData.value)
+            useAppState.menuBarShow = false;
             router.push({name: 'home-index'});
         } else {
             barRoutes.value = items

src/store/index.js

@@ -33,6 +33,7 @@ export const useAppStore = defineStore('main', {
         isCollapse: getStoreData('isCollapse') || false, //菜单折叠
         isScreenShort: false,
         barMenuName: '',
+        menuBarShow: false, //顶部菜单是否显示
     }),
     getters: {
         //主题信息