admin-govern/src/layouts/admin/components/logo.vue

<template>
    <div class="layout-logo">
        <img v-if="!config.layout.menuCollapse" class="logo-img" :src="getTheme.logoUrl" />
        <!--        <div-->
        <!--            v-if="!config.layout.menuCollapse"-->
        <!--            :style="{ color: config.getColorVal('menuActiveColor') }"-->
        <!--            class="website-name"-->
        <!--        >-->
        <!--            灿能-->
        <!--        </div>-->
        <Icon
            v-if="config.layout.layoutMode != 'Streamline'"
            @click="onMenuCollapse"
            :name="config.layout.menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
            :class="config.layout.menuCollapse ? 'unfold' : ''"
            :color="config.getColorVal('menuActiveColor')"
            style="margin: 15px;"
            size="18"
            class="fold"
        />
    </div>
</template>

<script setup lang="ts">
import { useConfig } from '@/stores/config'
import { closeShade } from '@/utils/pageShade'
import { Session } from '@/utils/storage'
import { setNavTabsWidth } from '@/utils/layout'

const config = useConfig()
const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
const onMenuCollapse = function () {
    if (config.layout.shrink && !config.layout.menuCollapse) {
        closeShade()
    }

    config.setLayout('menuCollapse', !config.layout.menuCollapse)

    // 等待侧边栏动画结束后重新计算导航栏宽度
    setTimeout(() => {
        setNavTabsWidth()
    }, 350)
}
</script>

<style scoped lang="scss">
.layout-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 5px 10px;
    background: v-bind(
        'config.layout.layoutMode != "Streamline" ?  config.getColorVal("menuTopBarBackground"):"transparent"'
    );
}
.logo-img {
    height: 50px;
    object-fit: cover;
    margin: auto;
}
.website-name {
    display: block;
    width: 180px;
    padding-left: 4px;
    font-size: var(--el-font-size-extra-large);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fold {
    margin-left: auto;
}
.unfold {
    margin: 0 auto;
}
</style>