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

<template>
    <div class="nav-bar">
        <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>
        <span class="nav-bar-title">{{ getTheme.name }} <span style="font-size: 14px;" v-if="Version?.versionName">
                ({{ Version?.versionName }})
            </span></span>
        <NavMenus />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useConfig } from '@/stores/config'
import NavTabs from '@/layouts/admin/components/navBar/tabs.vue'
import NavMenus from '../navMenus.vue'
import { showShade } from '@/utils/pageShade'
import { onMounted } from 'vue'
import { getLastData } from '@/api/systerm'
const config = useConfig()
const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
const Version: any = ref({})
const onMenuCollapse = () => {
    showShade('ba-aside-menu-shade', () => {
        config.setLayout('menuCollapse', true)
    })
    config.setLayout('menuCollapse', false)
}
onMounted(() => {
    getLastData({ versionType: 'WEB' }).then(res => {
        Version.value = res.data

    })
    document.title = getTheme.name
})
</script>

<style scoped lang="scss">
.nav-bar {
    display: flex;
    align-items: center;
    height: 60px;
    width: 100%;
    background-color: v-bind('config.getColorVal("headerBarBackground")');

    .nav-bar-title {
        color: v-bind('config.getColorVal("headerBarTabColor")');
        font-size: 24px;
        margin-left: 10px;
        font-weight: 700;
    }

    :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;
            color: v-bind('config.getColorVal("headerBarTabColor")');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;

            .close-icon {
                padding: 2px;
                margin: 2px 0 0 4px;
                color: v-bind('config.getColorVal("headerBarTabColor")') !important;
            }

            &.active {
                color: v-bind('config.getColorVal("headerBarTabActiveColor")');

                .close-icon {
                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
                }
            }

            &:hover {
                color: v-bind('config.getColorVal("headerBarTabActiveColor")');
                background-color: v-bind('config.getColorVal("headerBarHoverBackground")');

                .close-icon {
                    color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
                }
            }
        }

        .nav-tabs-active-box {
            position: absolute;
            height: 50px;
            background-color: v-bind('config.getColorVal("headerBarTabActiveBackground")');
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }
    }
}

.unfold {
    align-self: center;
    padding-left: var(--ba-main-space);
}
</style>