datahub/frontend/src/components/Brand.vue

<script setup>
import logoImg from '@/assets/logo.png'

const props = defineProps({
  size: {
    type: String,
    default: 'medium', // small, medium, large
  },
  showAppName: {
    type: Boolean,
    default: false,
  },
  showSlogan: {
    type: Boolean,
    default: false,
  },
})

const sizeClasses = {
  small: 'h-8',
  medium: 'h-12',
  large: 'h-16',
}

const textSizeClasses = {
  small: 'text-xl',
  medium: 'text-2xl',
  large: 'text-3xl',
}

const sloganSizeClasses = {
  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>