修改布局

src/App.vue

@@ -1,7 +1,7 @@
 <template>
-    <HcAppConfig>
+    <hc-app-config>
         <router-view />
-    </HcAppConfig>
+    </hc-app-config>
 </template>
 
 <script setup>

src/layout/index.vue

@@ -7,7 +7,7 @@
             </div>
             <div class="hc-aside-menu-box">
                 <el-scrollbar>
-                    <MenuBar :collapse="isCollapse" :cur="MenuBarKey" :datas="MenuBarData" :msg-count="msgCount" @change="MenuBarChange"/>
+                    <MenuBar :collapse="isCollapse" :cur="MenuBarKey" :datas="MenuBarData" :msg-count="msgCount" @change="MenuBarChange" />
                 </el-scrollbar>
             </div>
             <div class="hc-aside-bar-box">
@@ -21,26 +21,28 @@
         </el-aside>
         <el-container class="hc-container-view">
             <el-header class="hc-header-view">
-                <div id="hc-header-page-name" class="hc-header-page-name">{{ RoutesTitle }}</div>
+                <div class="hc-header-box">
+                    <div id="hc-header-page-name" class="hc-header-page-name">菜单</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"
+                                :clearable="userInfo?.role_id === '1123598816738675201'"
+                                :filterable="userInfo?.role_id === '1123598816738675201'"
+                                :options="projectContract"
+                                :props="projectProps" placeholder="请选择项目"
+                                @change="projectContractChange"
+                            />
+                        </div>
+                        <HelpInfoBar />
+                        <ConfigBar />
+                        <UserInfoBar />
+                    </div>
+                </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"
-                            :clearable="userInfo?.role_id === '1123598816738675201'"
-                            :filterable="userInfo?.role_id === '1123598816738675201'"
-                            :options="projectContract"
-                            :props="projectProps" placeholder="请选择项目"
-                            @change="projectContractChange"
-                        />
-                    </div>
-                    <HelpInfoBar />
-                    <ConfigBar />
-                    <UserInfoBar />
-                </div>
             </el-header>
             <el-main id="hc-main-box" class="hc-main-box">
                 <router-view v-if="reloadRouter" v-slot="{ Component }">
@@ -75,7 +77,7 @@ const useRoutes = useRoute()
 const useAppState = useAppStore()
 
 //路由参数
-const routerQuery = useRoutes?.query
+
 const reloadRouter = ref(true)
 const BarMenuKey = useRoutes?.name ?? 'home-index'
 const BarMenuTitle = useRoutes?.meta?.title ?? ''
@@ -111,7 +113,6 @@ onMounted(() => {
     const info = useAppState.getProjectContract || []
     projectContractData(info)
     useAppState.barMenuName = BarMenuTitle
-    setIsCollapse(RoutesName.value)
     //setInitSocket()
     setLogoImageColor()
     setLogoNameColor(useAppState.getTheme)

src/layout/layout.scss

@@ -7,9 +7,9 @@
         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);
-        border-radius: 0 60px 0 0;
+        border-radius: 0;
         z-index: 1;
+        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
         .hc-aside-logo-box {
             position: relative;
             display: flex;
@@ -80,11 +80,8 @@
                 }
             }
         }
-        &.is-collapse {
-            border-radius: 0 50px 0 0;
-            .hc-aside-logo-box {
-                left: initial;
-            }
+        &.is-collapse .hc-aside-logo-box {
+            left: initial;
         }
     }
     .hc-container-view {
@@ -92,46 +89,52 @@
         z-index: 1;
         .hc-header-view {
             position: relative;
-            display: flex;
-            align-items: center;
-            flex-direction: row;
-            --el-header-padding: 0 24px;
-            --el-header-height: 66px;
-            .hc-header-page-name {
+            --el-header-padding: 0;
+            --el-header-height: 111px;
+            .hc-header-box {
                 position: relative;
-                color: #cccccc;
-                font-size: 22px;
                 display: flex;
                 align-items: center;
+                flex-direction: row;
+                padding: 12px 20px;
+                .hc-header-page-name {
+                    position: relative;
+                    color: #cccccc;
+                    font-size: 22px;
+                    display: flex;
+                    align-items: center;
+                    flex: 1;
+                }
+                .hc-header-content {
+                    position: relative;
+                    text-align: right;
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                    max-width: 50%;
+                    .hc-header-cascader-box {
+                        position: relative;
+                        margin-right: 30px;
+                        border-radius: 100px;
+                        flex: 1;
+                        .project-name-box {
+                            padding-right: 55px;
+                            position: relative;
+                            visibility: hidden;
+                            z-index: -1;
+                            height: 1px;
+                        }
+                    }
+                }
             }
             .hc-header-top-menu-bar {
-                flex: 1;
                 position: relative;
                 display: flex;
                 align-items: center;
-                padding: 0 30px;
+                padding: 6px 20px;
                 overflow: hidden;
-            }
-            .hc-header-content {
-                position: relative;
-                text-align: right;
-                display: flex;
-                align-items: center;
-                justify-content: flex-end;
-                max-width: 60%;
-                .hc-header-cascader-box {
-                    position: relative;
-                    margin-right: 30px;
-                    border-radius: 100px;
-                    flex: 1;
-                    .project-name-box {
-                        padding-right: 55px;
-                        position: relative;
-                        visibility: hidden;
-                        z-index: -1;
-                        height: 1px;
-                    }
-                }
+                border-top: 1px solid #ebeaea;
+                border-bottom: 1px solid #ebeaea;
             }
         }
         .hc-main-box {
@@ -139,7 +142,6 @@
             overflow: hidden;
             height: 100%;
             --el-main-padding: 24px;
-            margin-top: -18px;
         }
     }
 }

src/layout/modules/TopMenuBar.vue

@@ -22,14 +22,12 @@
 
 <script setup>
 import { onMounted, ref, watch } from 'vue'
-import { useAppStore } from '~src/store'
 import { useRoute, useRouter } from 'vue-router'
 import { getStoreValue, setStoreValue } from '~src/utils/storage'
 
 //初始组合式
 const router = useRouter()
 const useRoutes = useRoute()
-const useAppState = useAppStore()
 
 //初始变量
 const barMenuData = ref(getStoreValue('bar-menu-datas') || [])
@@ -135,8 +133,6 @@ const barMenuCloseClick = (item, index) => {
 .hc-top-menu-bar {
     position: relative;
     width: 100%;
-    padding-bottom: 10px;
-    margin-top: 10px;
     .bar-menu-content {
         display: flex;
         position: relative;