布局修改

src/components/table/header/index.vue

@@ -1,42 +1,42 @@
 <template>
-    <div ref="tableHeader" class="cn-table-header">
+    <div ref='tableHeader' class='cn-table-header'>
         <!-- 通用搜索 -->
-        <transition name="el-zoom-in-bottom" mode="out-in">
+        <transition name='el-zoom-in-bottom' mode='out-in'>
-            <div id="table-com-search1" class="table-com-search" v-show="showSelect">
+            <div id='table-com-search1' class='table-com-search' v-show='showSelect'>
             </div>
         </transition>
-        <div class="table-header ba-scroll-style">
+        <div class='table-header ba-scroll-style'>
-            <div id="table-com-search2" style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px">
+            <div id='table-com-search2' style='flex: 1; height: 32px; overflow: hidden; margin-right: 20px'>
                 <el-form
-                    id="header-form"
+                    id='header-form'
-                    @submit.prevent=""
+                    @submit.prevent=''
-                    @keyup.enter="onComSearch"
+                    @keyup.enter='onComSearch'
-                    label-position="left"
+                    label-position='left'
-                    :inline="true"
+                    :inline='true'
-                    class="table-com-search-form"
+                    class='table-com-search-form'
-                    :label-width="90"
+                    :label-width='90'
                 >
-                    <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
+                    <el-form-item label='日期' v-if='datePicker' style='grid-column: span 2; max-width: unset'>
-                        <DatePicker ref="Picker"></DatePicker>
+                        <DatePicker ref='Picker'></DatePicker>
                     </el-form-item>
-                    <slot name="select"></slot>
+                    <slot name='select'></slot>
                 </el-form>
             </div>
-            <template v-if="$slots.select">
+            <template v-if='$slots.select'>
-                <el-button @click="onComSearch" type="primary">查询</el-button>
+                <el-button @click='onComSearch' type='primary'>查询</el-button>
-                <el-button @click="onResetForm">重置</el-button>
+                <el-button @click='onResetForm'>重置</el-button>
-                <div class="table-search-button-group" v-if="showUnfoldButton">
+                <div class='table-search-button-group' v-if='showUnfoldButton'>
-                    <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelectChange">
+                    <el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
-                        <Icon size="14" name="el-icon-Search" />
+                        <Icon size='14' name='el-icon-Search' />
                     </el-button>
                 </div>
             </template>
-            <slot name="operation"></slot>
+            <slot name='operation'></slot>
         </div>
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue'
 import type TableStore from '@/utils/tableStore'
 import DatePicker from '@/components/form/datePicker/index.vue'
@@ -96,7 +96,7 @@ const showSelectChange = () => {
     if (showSelect.value) {
         const dom1 = document.getElementById('table-com-search1') as HTMLElement
         dom1.appendChild(dom)
-    }else{
+    } else {
         const dom2 = document.getElementById('table-com-search2') as HTMLElement
         dom2.appendChild(dom)
     }
@@ -117,7 +117,7 @@ const dateChange = () => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .table-header {
     position: relative;
     overflow-x: auto;
@@ -147,16 +147,18 @@ const dateChange = () => {
     padding: 13px 15px 20px 15px;
     font-size: 14px;
 }
-.table-com-search-form,
+
-.table-com-search-form2 {
+.table-com-search-form{
     display: grid;
     grid-gap: 20px;
     grid-template-columns: repeat(5, 1fr);
+
     :deep(.el-select),
     :deep(.el-cascader),
     :deep(.el-input) {
         width: 100%;
     }
+
     :deep(.el-form-item) {
         max-width: 600px;
         margin-right: 0;
@@ -164,23 +166,41 @@ const dateChange = () => {
     }
 }
 
-@media screen and (max-width: 2600px) {
+@media screen and (max-width: 2650px) {
+    .table-com-search-form {
+        grid-template-columns: repeat(6, 1fr);
+    }
+}
+
+@media screen and (max-width: 2300px) {
+    .table-com-search-form {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
+@media screen and (max-width: 1950px) {
     .table-com-search-form {
         grid-template-columns: repeat(4, 1fr);
     }
 }
-@media screen and (max-width: 2000px) {
+
+@media screen and (max-width: 1600px) {
     .table-com-search-form {
         grid-template-columns: repeat(3, 1fr);
     }
 }
-@media screen and (max-width: 1500px) {
+
+@media screen and (max-width: 1300px) {
     .table-com-search-form {
         grid-template-columns: repeat(2, 1fr);
     }
 }
-.table-header .table-com-search-form2 {
+
-    grid-template-columns: repeat(auto-fit, 400px);
+#table-com-search2 {
+    .table-com-search-form {
+        display: flex;
+        flex-wrap: wrap;
+    }
 }
 
 .mlr-12 {

src/layouts/admin/components/config.vue

@@ -181,24 +181,24 @@
                                     :model-value="configStore.getColorVal('headerBarTabColor')"
                                 />
                             </el-form-item>
-                            <el-form-item label="顶栏悬停时背景色">
+<!--                            <el-form-item label="顶栏悬停时背景色">-->
-                                <el-color-picker
+<!--                                <el-color-picker-->
-                                    @change="onCommitColorState($event, 'headerBarHoverBackground')"
+<!--                                    @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
-                                    :model-value="configStore.getColorVal('headerBarHoverBackground')"
+<!--                                    :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
-                                />
+<!--                                />-->
-                            </el-form-item>
+<!--                            </el-form-item>-->
-                            <el-form-item label="顶栏菜单激活项背景色">
+<!--                            <el-form-item label="顶栏菜单激活项背景色">-->
-                                <el-color-picker
+<!--                                <el-color-picker-->
-                                    @change="onCommitColorState($event, 'headerBarTabActiveBackground')"
+<!--                                    @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
-                                    :model-value="configStore.getColorVal('headerBarTabActiveBackground')"
+<!--                                    :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
-                                />
+<!--                                />-->
-                            </el-form-item>
+<!--                            </el-form-item>-->
-                            <el-form-item label="顶栏菜单激活项文字色">
+<!--                            <el-form-item label="顶栏菜单激活项文字色">-->
-                                <el-color-picker
+<!--                                <el-color-picker-->
-                                    @change="onCommitColorState($event, 'headerBarTabActiveColor')"
+<!--                                    @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
-                                    :model-value="configStore.getColorVal('headerBarTabActiveColor')"
+<!--                                    :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
-                                />
+<!--                                />-->
-                            </el-form-item>
+<!--                            </el-form-item>-->
                         </div>
                         <el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗？">
                             <template #reference>

src/layouts/admin/components/nav.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class='nav-bar'>
+        <NavTabs  />
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { useConfig } from '@/stores/config'
+import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
+import NavMenus from './navMenus.vue'
+import { showShade } from '@/utils/pageShade'
+
+const config = useConfig()
+
+const onMenuCollapse = () => {
+    showShade('ba-aside-menu-shade', () => {
+        config.setLayout('menuCollapse', true)
+    })
+    config.setLayout('menuCollapse', false)
+}
+</script>
+
+<style scoped lang='scss'>
+.nav-bar {
+    display: flex;
+    height: 45px;
+    width: 100%;
+    padding: 10px 10px 0;
+    :deep(.nav-tabs) {
+        display: flex;
+        height: 100%;
+        position: relative;
+
+        .ba-nav-tab {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 20px;
+            cursor: pointer;
+            z-index: 1;
+            height: 100%;
+            user-select: none;
+            background: #fff;
+            color:#111;
+            margin-right: 10px;
+            transition: all .2s;
+            .close-icon {
+                padding: 2px;
+                margin: 2px 0 0 4px;
+            }
+
+            &.active {
+                color: #fff;
+                background: var(--el-color-primary);
+                .close-icon {
+                    color: #fff !important;
+                }
+            }
+        }
+
+        .nav-tabs-active-box {
+            position: absolute;
+            height: 50px;
+            //background: var(--el-color-primary);
+            transition: all 0.2s;
+            -webkit-transition: all 0.2s;
+        }
+    }
+}
+
+.unfold {
+    align-self: center;
+    padding-left: var(--ba-main-space);
+}
+</style>

src/layouts/admin/components/navBar/classic.vue

@@ -3,7 +3,7 @@
         <div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
             <Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')" size="18" />
         </div>
-        <NavTabs v-if="!config.layout.shrink" />
+        <span style='color: #FFF;font-size: 24px;margin-left: 10px;font-weight: 700'>电能质量数据监测云平台</span>
         <NavMenus />
     </div>
 </template>
@@ -27,7 +27,8 @@ const onMenuCollapse = () => {
 <style scoped lang="scss">
 .nav-bar {
     display: flex;
-    height: 50px;
+    align-items: center;
+    height: 60px;
     width: 100%;
     background-color: v-bind('config.getColorVal("headerBarBackground")');
     :deep(.nav-tabs) {

src/layouts/admin/components/navBar/tabs.vue

@@ -1,31 +1,31 @@
 <template>
-    <div class="nav-tabs" ref="tabScrollbarRef">
+    <div class='nav-tabs' ref='tabScrollbarRef'>
         <div
-            v-for="(item, idx) in navTabs.state.tabsView"
+            v-for='(item, idx) in navTabs.state.tabsView'
-            @click="onTab(item)"
+            @click='onTab(item)'
-            @contextmenu.prevent="onContextmenu(item, $event)"
+            @contextmenu.prevent='onContextmenu(item, $event)'
-            class="ba-nav-tab"
+            class='ba-nav-tab'
             :class="navTabs.state.activeIndex == idx ? 'active' : ''"
-            :ref="tabsRefs.set"
+            :ref='tabsRefs.set'
-            :key="idx"
+            :key='idx'
         >
             {{ item.meta.title }}
-            <transition @after-leave="selectNavTab(tabsRefs[navTabs.state.activeIndex])" name="el-fade-in">
+            <transition @after-leave='selectNavTab(tabsRefs[navTabs.state.activeIndex])' name='el-fade-in'>
                 <Icon
-                    v-show="navTabs.state.tabsView.length > 1"
+                    v-show='navTabs.state.tabsView.length > 1'
-                    class="close-icon"
+                    class='close-icon'
-                    @click.stop="closeTab(item)"
+                    @click.stop='closeTab(item)'
-                    size="15"
+                    size='15'
-                    name="el-icon-Close"
+                    name='el-icon-Close'
                 />
             </transition>
         </div>
-        <div :style="activeBoxStyle" class="nav-tabs-active-box"></div>
+        <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>
     </div>
-    <Contextmenu ref="contextmenuRef" :items="state.contextmenuItems" @contextmenuItemClick="onContextmenuItem" />
+    <Contextmenu ref='contextmenuRef' :items='state.contextmenuItems' @contextmenuItemClick='onContextmenuItem' />
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter, onBeforeRouteUpdate, type RouteLocationNormalized } from 'vue-router'
 import { useConfig } from '@/stores/config'
@@ -85,7 +85,7 @@ const onContextmenu = (menu: RouteLocationNormalized, el: MouseEvent) => {
 }
 
 // tab 激活状态切换
-const selectNavTab = function (dom: HTMLDivElement) {
+const selectNavTab = function(dom: HTMLDivElement) {
     if (!dom) {
         return false
     }
@@ -169,7 +169,7 @@ const onContextmenuItem = async (item: ContextmenuItemClickEmitArg) => {
     }
 }
 
-const updateTab = function (newRoute: RouteLocationNormalized) {
+const updateTab = function(newRoute: RouteLocationNormalized) {
     // 添加tab
     navTabs.addTab(newRoute)
     // 激活当前tab
@@ -190,41 +190,46 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .dark {
     .close-icon {
         color: v-bind('config.getColorVal("headerBarTabColor")') !important;
     }
+
     .ba-nav-tab.active {
         .close-icon {
             color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
         }
     }
 }
+
 .nav-tabs {
     overflow-x: auto;
     overflow-y: hidden;
     margin-right: var(--ba-main-space);
     scrollbar-width: none;
-
     &::-webkit-scrollbar {
         height: 5px;
     }
+
     &::-webkit-scrollbar-thumb {
         background: #eaeaea;
         border-radius: var(--el-border-radius-base);
         box-shadow: none;
         -webkit-box-shadow: none;
     }
+
     &::-webkit-scrollbar-track {
         background: v-bind('config.layout.layoutMode == "Default" ? "none":config.getColorVal("headerBarBackground")');
     }
+
     &:hover {
         &::-webkit-scrollbar-thumb:hover {
             background: #c8c9cc;
         }
     }
 }
+
 .ba-nav-tab {
     white-space: nowrap;
     height: 40px;

src/layouts/admin/container/classic.vue

@@ -3,6 +3,7 @@
         <Aside />
         <el-container class="content-wrapper">
             <Header />
+            <Nav />
             <Main />
         </el-container>
     </el-container>
@@ -15,6 +16,7 @@ import Header from '@/layouts/admin/components/header.vue'
 import Main from '@/layouts/admin/router-view/main.vue'
 import CloseFullScreen from '@/layouts/admin/components/closeFullScreen.vue'
 import { useNavTabs } from '@/stores/navTabs'
+import Nav from '@/layouts/admin/components/nav.vue'
 const navTabs = useNavTabs()
 </script>
 

src/stores/config.ts

@@ -24,7 +24,7 @@ export const useConfig = defineStore(
             // 侧边菜单文字颜色
             menuColor: ['#FFFFFF', '#CFD3DC'],
             // 侧边菜单激活项背景色
-            menuActiveBackground: ['#1655B3', '#1d1e1f'],
+            menuActiveBackground: ['#002255', '#1d1e1f'],
             // 侧边菜单激活项文字色
             menuActiveColor: ['#409eff', '#3375b9'],
             // 侧边菜单顶栏背景色
@@ -43,7 +43,7 @@ export const useConfig = defineStore(
             /* 顶栏 */
             // 顶栏文字色
             headerBarTabColor: ['#FFFFFF', '#CFD3DC'],
-            // 顶栏激活项背景色
+            // // 顶栏激活项背景色
             headerBarTabActiveBackground: ['#ffffff', '#1d1e1f'],
             // 顶栏激活项文字色
             headerBarTabActiveColor: ['#000000', '#409EFF'],

src/styles/var.scss

@@ -9,7 +9,7 @@ $primary-light: #3f6ad8;
 $bg-color: () !default;
 $bg-color: map.merge(
                 (
-                        '': #f5f5f5,
+                        '': #edf0f3,
                         'overlay': #ffffff,
                 ),
                 $bg-color

src/utils/layout.ts

@@ -11,7 +11,7 @@ export function mainHeight(extra = 0): CSSProperties {
     let height = extra
     const adminLayoutMainExtraHeight: anyObj = {
         Default: 60,
-        Classic: 50,
+        Classic: 102,
         Streamline: 60
     }
     const config = useConfig()
@@ -37,5 +37,5 @@ export function setNavTabsWidth() {
     const navBar = document.querySelector('.nav-bar') as HTMLElement
     const navMenus = document.querySelector('.nav-menus') as HTMLElement
     const minWidth = navBar.offsetWidth - (navMenus.offsetWidth + 20)
-    navTabs.style.width = minWidth.toString() + 'px'
+    // navTabs.style.width = minWidth.toString() + 'px'
 }