优化顶部菜单导航

src/global/components/hc-tabs-simple/index.vue

@@ -1,7 +1,6 @@
 <template>
-    <div :class="menuBarShow?'is-menu-bar':''" class="hc-sb-table">
-        <svg class="svg-tabs" height="45px" width="40px" xmlns="http://www.w3.org/2000/svg"
-             xmlns:xlink="http://www.w3.org/1999/xlink">
+    <div class="hc-sb-table">
+        <svg class="svg-tabs" height="45px" width="40px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
             <clipPath id="tabs">
                 <path d="M40,45C15,36,33,0,0,0v45H40z" fill-rule="evenodd"/>
             </clipPath>
@@ -22,9 +21,6 @@
 <script setup>
 import {nextTick, ref, watch} from "vue";
 import {getIndex} from "vue-utils-plus"
-import {useAppStore} from "~src/store";
-
-const useAppState = useAppStore()
 
 const props = defineProps({
     datas: {
@@ -40,17 +36,14 @@ const props = defineProps({
 //初始变量
 const curKey = ref(props.cur)
 const curIndex = ref(0)
-const menuBarShow = ref(useAppState.menuBarShow)
 
 //监听
 watch(() => [
     props.cur,
-    props.datas,
-    useAppState.menuBarShow
-], ([cur, datas, menuShow]) => {
+    props.datas
+], ([cur, datas]) => {
     curKey.value = cur
     getCurIndex(datas, cur)
-    menuBarShow.value = menuShow
 })
 
 //挂载完成
@@ -175,7 +168,7 @@ const tabClick = (key) => {
         padding: 0;
         background: #f1f5f8;
         border-radius: 0 10px 10px 10px;
-        height: calc(100vh - 170px);
+        height: calc(100vh - 140px);
         .el-tab-pane {
             position: relative;
             height: 100%;
@@ -187,7 +180,4 @@ const tabClick = (key) => {
         }
     }
 }
-.hc-sb-table.is-menu-bar .el-tabs .el-tabs__content {
-    height: calc(100vh - 210px);
-}
 </style>

src/layout/index.vue

@@ -31,19 +31,20 @@
                 <div id="hc-header-page-name" class="hc-header-page-name">
                     {{ RoutesTitle }}
                 </div>
+                <div class="hc-header-top-menu-bar">
+                    <TopMenuBar/>
+                </div>
                 <div class="hc-header-content">
                     <div class="hc-header-cascader-box">
                         <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 v-show="menuBarShow"/>
             <el-main id="hc-main-box" class="hc-main-box">
                 <router-view v-if="reloadRouter" v-slot="{ Component }">
                     <transition name="fade-transform">
@@ -66,7 +67,6 @@ 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";
@@ -94,7 +94,6 @@ 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({});
@@ -113,7 +112,6 @@ onMounted(() => {
     initProjectContract()
     const info = useAppState.getProjectContract || []
     projectContractData(info);
-    setIsCollapse(RoutesName.value)
     useAppState.barMenuName = BarMenuTitle
     setInitSocket()
 })
@@ -127,8 +125,7 @@ watch(() => [
     useRoutes?.name,
     useRoutes?.meta?.title,
     useAppState.getCollapse,
-    useAppState.menuBarShow,
-], ([projectContractArr, userMenus, theme, ColorVal, RouteName, RouteTitle, collapse, barMenuShow]) => {
+], ([projectContractArr, userMenus, theme, ColorVal, RouteName, RouteTitle, collapse]) => {
     MenuBarData.value = userMenus
     HomeTheme.value = theme
     AppColor.value = ColorVal
@@ -136,25 +133,10 @@ watch(() => [
     MenuBarKey.value = RouteName ?? 'home-index'
     RoutesTitle.value = RouteTitle ?? ''
     isCollapse.value = collapse
-    setIsCollapse(RoutesName.value)
     projectContractData(projectContractArr || []);
     useAppState.barMenuName = RouteTitle ?? ''
-    menuBarShow.value = barMenuShow
 })
 
-//设置折叠
-const setIsCollapse = (key) => {
-    if (key === 'home-index') {
-        useAppState.setMenuBarShow(false)
-    } else {
-        useAppState.setMenuBarShow(true)
-    }
-    if (key === 'data-fill-wbs') {
-        isCollapse.value = true
-        useAppState.setCollapse(true)
-    }
-}
-
 //是否折叠
 const collapseChange = (bool) => {
     isCollapse.value = bool
@@ -239,7 +221,6 @@ const projectContractChange = (val) => {
 //菜单被点击
 const MenuBarChange = (item) => {
     MenuBarKey.value = item?.code;
-    setIsCollapse(item?.code)
     router.push({name: item?.code});
 }
 

src/layout/layout.scss

@@ -21,7 +21,7 @@
         color: #838791;
         background: #f1f5f8;
         transition: 0.2s;
-        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
         border-radius: 0 60px 0 0;
         z-index: 1;
         .hc-aside-logo-box {
@@ -66,7 +66,7 @@
                 top: 0;
                 width: 100%;
                 height: 1px;
-                background-image: linear-gradient(90deg, rgba(102,102,102,0.00) 11%, #dbe8f3 35%, #dbe8f3 64%, rgba(102,102,102,0.00) 86%);
+                background-image: linear-gradient(90deg, rgba(102, 102, 102, 0.00) 11%, #dbe8f3 35%, #dbe8f3 64%, rgba(102, 102, 102, 0.00) 86%);
             }
             div {
                 position: relative;
@@ -89,7 +89,7 @@
                         color: var(--el-color-primary);
                     }
                 }
-                &+div{
+                & + div {
                     margin-left: 26px;
                 }
             }
@@ -102,10 +102,10 @@
         }
         &.home-index {
             color: white;
-            background: rgba( 255, 255, 255, 0.35 );
-            box-shadow: 0 2px 10px 0 rgba(32,37,50,0.03);
-            backdrop-filter: blur( 20px );
-            -webkit-backdrop-filter: blur( 20px );
+            background: rgba(255, 255, 255, 0.35);
+            box-shadow: 0 2px 10px 0 rgba(32, 37, 50, 0.03);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
             .hc-aside-menu-box .hc-aside-menu.el-menu {
                 --el-menu-text-color: white;
             }
@@ -119,7 +119,7 @@
             display: flex;
             align-items: center;
             --el-header-padding: 0 24px;
-            --el-header-height: 100px;
+            --el-header-height: 66px;
             .hc-header-page-name {
                 position: relative;
                 color: #cccccc;
@@ -127,8 +127,14 @@
                 display: flex;
                 align-items: center;
             }
-            .hc-header-content {
+            .hc-header-top-menu-bar {
                 flex: auto;
+                position: relative;
+                display: flex;
+                align-items: center;
+                padding: 0 30px;
+            }
+            .hc-header-content {
                 position: relative;
                 text-align: right;
                 display: flex;
@@ -152,7 +158,7 @@
             overflow: hidden;
             height: 100%;
             --el-main-padding: 24px;
-            margin-top: -24px;
+            margin-top: -18px;
         }
         &.home {
             color: #ffffff;

src/layout/modules/MenuStretchBar.vue

@@ -1,52 +0,0 @@
-<template>
-    <el-tooltip content="显示/隐藏 菜单记录" placement="top">
-        <div class="header-icon-bar" @click="toMenuBarShowClick">
-            <HcIcon :class="menuBarShow?'text-main':''" :fill="menuBarShow" class="header-icon" name="apps"/>
-        </div>
-    </el-tooltip>
-</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

@@ -92,7 +92,6 @@ const handleMenuSelect = ({key}) => {
     } else if (key === 'all') {
         barMenuData.value = []
         setStoreData('bar-menu-datas', [])
-        useAppState.menuBarShow = false;
         router.push({name: 'home-index'});
     } else if (key === 'other') {
         const {key} = barRoutes.value
@@ -116,7 +115,6 @@ 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
@@ -132,8 +130,6 @@ const barMenuCloseClick = (item, index) => {
 <style lang="scss">
 .hc-top-menu-bar {
     position: relative;
-    padding: 0 24px 20px;
-    margin-top: -8px;
     .bar-menu-content {
         display: flex;
         position: relative;

src/store/index.js

@@ -31,7 +31,6 @@ export const useAppStore = defineStore('main', {
         shotWebRtc: getStoreData('shotWebRtc') || 0, //WebRtc截图方式: 0关闭，1开启
         fullScreen: getStoreData('fullScreen') || 0, //全屏截图：0关闭，1开启
         isCollapse: getStoreData('isCollapse') || false, //菜单折叠
-        menuBarShow: false, //顶部菜单是否显示 getStoreData('menuBarShow') ||
         isScreenShort: false,
         barMenuName: '',
     }),
@@ -62,7 +61,6 @@ export const useAppStore = defineStore('main', {
         getShotWebRtc: state => state.shotWebRtc,
         getFullScreen: state => state.fullScreen,
         getCollapse: state => state.isCollapse,
-        getMenuBarShow: state => state.menuBarShow
     },
     actions: {
         //主题信息
@@ -158,10 +156,6 @@ export const useAppStore = defineStore('main', {
             this.isCollapse = value
             setStoreData('isCollapse', value)
         },
-        setMenuBarShow(value) {
-            this.menuBarShow = value
-            setStoreData('menuBarShow', value)
-        },
         //清除缓存和token
         clearStoreData() {
             //清除状态