datahub/frontend/src/components/Brand.vue

<script setup lang="ts">
import logoImg from '@/assets/logo.png'

type Size = 'small' | 'medium' | 'large'

withDefaults(defineProps<{
  size?: Size
  showAppName?: boolean
  showSlogan?: boolean
}>(), {
  size: 'medium',
  showAppName: false,
  showSlogan: false,
})

const sizeClasses: Record<Size, string> = {
  small: 'h-8',
  medium: 'h-12',
  large: 'h-16',
}

const textSizeClasses: Record<Size, string> = {
  small: 'text-xl',
  medium: 'text-2xl',
  large: 'text-3xl',
}

const sloganSizeClasses: Record<Size, string> = {
  small: 'text-xs',
  medium: 'text-sm',
  large: 'text-base',
}
</script>

<template>
  <div class="flex items-center gap-3">
    <img :src="logoImg" alt="DataHub Logo" :class="['object-contain', sizeClasses[size]]" />

    <div v-if="showAppName || showSlogan" class="flex flex-col">
      <span
        v-if="showAppName"
        class="text-[#4da30d] font-bold leading-tight"
        :class="textSizeClasses[size]"
      >
        DataHub
      </span>
      <span
        v-if="showSlogan"
        class="text-gray-600 leading-tight"
        :class="sloganSizeClasses[size]"
      >
        数据管理平台
      </span>
    </div>
  </div>
</template>