Industrial-image-management-system---web/src/layout/components/Logo.vue

<template>
  <section class="system-logo" :class="{ collapsed: props.collapsed }" @click="toHome">
    <row>
      <img v-if="logo" class="logo" :src="logo" alt="logo" />
      <img v-else class="logo" src="/logo.svg" alt="logo" />
    </row>
    <row>
      <span class="system-name gi_line_1">{{ title }}</span>
    </row>
  </section>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores'

const props = withDefaults(defineProps<Props>(), {
  collapsed: false,
})
const appStore = useAppStore()
// const title = computed(() => appStore.getTitle())
const title = '数智平台'
const logo = '/logo.png'
// computed(() => appStore.getLogo())

interface Props {
  collapsed?: boolean
}
const router = useRouter()
// 跳转首页
const toHome = () => {
  router.push('/')
}
</script>

<style scoped lang="scss">
.system-logo {
  height: 64px; // 增加高度，给上下排列留空间
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;

  &.collapsed {
    height: 56px;
    flex-direction: row;
    padding: 0;
    justify-content: center;

    .system-name {
      display: none;
    }

    .logo {
      margin-bottom: 0;
    }
  }
}

.logo {
  height: 32px;
  width: auto;
  max-width: 140px; // 根据你 logo 实际宽度调整
  object-fit: contain;
  margin-bottom: 4px;
}

.system-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-1);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
</style>