布局修改

2024-01-05 11:35:13 +08:00
parent 8d58dc5c17
commit af0d32720e
9 changed files with 180 additions and 77 deletions
--- a/src/components/table/header/index.vue
+++ b/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">
-            <div id="table-com-search1" class="table-com-search" v-show="showSelect">
+        <transition name='el-zoom-in-bottom' mode='out-in'>
+            <div id='table-com-search1' class='table-com-search' v-show='showSelect'>
            </div>
        </transition>
-        <div class="table-header ba-scroll-style">
-            <div id="table-com-search2" style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px">
+        <div class='table-header ba-scroll-style'>
+            <div id='table-com-search2' style='flex: 1; height: 32px; overflow: hidden; margin-right: 20px'>
                <el-form
-                    id="header-form"
-                    @submit.prevent=""
-                    @keyup.enter="onComSearch"
-                    label-position="left"
-                    :inline="true"
-                    class="table-com-search-form"
-                    :label-width="90"
+                    id='header-form'
+                    @submit.prevent=''
+                    @keyup.enter='onComSearch'
+                    label-position='left'
+                    :inline='true'
+                    class='table-com-search-form'
+                    :label-width='90'
                >
-                    <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
-                        <DatePicker ref="Picker"></DatePicker>
+                    <el-form-item label='日期' v-if='datePicker' style='grid-column: span 2; max-width: unset'>
+                        <DatePicker ref='Picker'></DatePicker>
                    </el-form-item>
-                    <slot name="select"></slot>
+                    <slot name='select'></slot>
                </el-form>
            </div>
-            <template v-if="$slots.select">
-                <el-button @click="onComSearch" type="primary">查询</el-button>
-                <el-button @click="onResetForm">重置</el-button>
-                <div class="table-search-button-group" v-if="showUnfoldButton">
-                    <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelectChange">
-                        <Icon size="14" name="el-icon-Search" />
+            <template v-if='$slots.select'>
+                <el-button @click='onComSearch' type='primary'>查询</el-button>
+                <el-button @click='onResetForm'>重置</el-button>
+                <div class='table-search-button-group' v-if='showUnfoldButton'>
+                    <el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
+                        <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 {
--- a/src/layouts/admin/components/config.vue
+++ b/src/layouts/admin/components/config.vue
@@ -181,24 +181,24 @@
                                    :model-value="configStore.getColorVal('headerBarTabColor')"
                                />
                            </el-form-item>
-                            <el-form-item label="顶栏悬停时背景色">
-                                <el-color-picker
-                                    @change="onCommitColorState($event, 'headerBarHoverBackground')"
-                                    :model-value="configStore.getColorVal('headerBarHoverBackground')"
-                                />
-                            </el-form-item>
-                            <el-form-item label="顶栏菜单激活项背景色">
-                                <el-color-picker
-                                    @change="onCommitColorState($event, 'headerBarTabActiveBackground')"
-                                    :model-value="configStore.getColorVal('headerBarTabActiveBackground')"
-                                />
-                            </el-form-item>
-                            <el-form-item label="顶栏菜单激活项文字色">
-                                <el-color-picker
-                                    @change="onCommitColorState($event, 'headerBarTabActiveColor')"
-                                    :model-value="configStore.getColorVal('headerBarTabActiveColor')"
-                                />
-                            </el-form-item>
+<!--                            <el-form-item label="顶栏悬停时背景色">-->
+<!--                                <el-color-picker-->
+<!--                                    @change="onCommitColorState($event, 'headerBarHoverBackground')"-->
+<!--                                    :model-value="configStore.getColorVal('headerBarHoverBackground')"-->
+<!--                                />-->
+<!--                            </el-form-item>-->
+<!--                            <el-form-item label="顶栏菜单激活项背景色">-->
+<!--                                <el-color-picker-->
+<!--                                    @change="onCommitColorState($event, 'headerBarTabActiveBackground')"-->
+<!--                                    :model-value="configStore.getColorVal('headerBarTabActiveBackground')"-->
+<!--                                />-->
+<!--                            </el-form-item>-->
+<!--                            <el-form-item label="顶栏菜单激活项文字色">-->
+<!--                                <el-color-picker-->
+<!--                                    @change="onCommitColorState($event, 'headerBarTabActiveColor')"-->
+<!--                                    :model-value="configStore.getColorVal('headerBarTabActiveColor')"-->
+<!--                                />-->
+<!--                            </el-form-item>-->
                        </div>
                        <el-popconfirm @confirm="restoreDefault" title="确定要恢复全部配置到默认值吗？">
                            <template #reference>
--- a/src/layouts/admin/components/nav.vue
+++ b/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>
--- a/src/layouts/admin/components/navBar/classic.vue
+++ b/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) {
--- a/src/layouts/admin/components/navBar/tabs.vue
+++ b/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"
-            @click="onTab(item)"
-            @contextmenu.prevent="onContextmenu(item, $event)"
-            class="ba-nav-tab"
+            v-for='(item, idx) in navTabs.state.tabsView'
+            @click='onTab(item)'
+            @contextmenu.prevent='onContextmenu(item, $event)'
+            class='ba-nav-tab'
            :class="navTabs.state.activeIndex == idx ? 'active' : ''"
-            :ref="tabsRefs.set"
-            :key="idx"
+            :ref='tabsRefs.set'
+            :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"
-                    class="close-icon"
-                    @click.stop="closeTab(item)"
-                    size="15"
-                    name="el-icon-Close"
+                    v-show='navTabs.state.tabsView.length > 1'
+                    class='close-icon'
+                    @click.stop='closeTab(item)'
+                    size='15'
+                    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;
--- a/src/layouts/admin/container/classic.vue
+++ b/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>

--- a/src/stores/config.ts
+++ b/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'],
--- a/src/styles/var.scss
+++ b/src/styles/var.scss
@@ -9,7 +9,7 @@ $primary-light: #3f6ad8;
 $bg-color: () !default;
 $bg-color: map.merge(
                (
-                        '': #f5f5f5,
+                        '': #edf0f3,
                        'overlay': #ffffff,
                ),
                $bg-color
--- a/src/utils/layout.ts
+++ b/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'
 }