fs-admin/src/components/core/GlobalAside.vue

<script lang="ts" setup>
import { useMenuStore } from '@/stores/menu'
import { useThemeStore } from '@/stores/theme'
import config from '@/config/defaultSetting'
import router from '@/router'

const handleLogoClick = () => {
  router.push({ name: config.homeRouteName })
}

const menuStore = useMenuStore()
const collapse = computed(() => menuStore.collapse)

const themeStore = useThemeStore()
const themeStyle = computed(() => themeStore.themeStyle)
const logoStyle = computed(() => {
  if (themeStyle.value.name === 'nav-light') {
    return {
      color: themeStyle.value.textColor,
      backgroundColor: themeStyle.value.bgColor
    }
  }
  return {
    color: '#fff',
    backgroundColor: themeStyle.value.bgColor
  }
})
</script>

<template>
  <div
    class="logo flex items-center justify-center cursor-pointer px-10px"
    :class="{ collapse: collapse }"
    :style="logoStyle"
    @click="handleLogoClick"
  >
    <img src="/logo.png" class="h-36px" />
    <div class="ml-2 line2" :class="{ hidden: collapse }">{{ config.title }}</div>
  </div>
  <global-menu />
</template>

<style lang="scss" scoped>
.logo {
  width: var(--menu-width);
  height: var(--el-header-height);
}
.collapse {
  width: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2);
}
</style>