geo/apps/admin-web/src/components/kol/KolPackageCard.vue

<script setup lang="ts">
import { TagOutlined, TeamOutlined, ThunderboltOutlined, UserOutlined } from '@ant-design/icons-vue'
import type { KolPackageSummary } from '@geo/shared-types'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import { resolveApiURL } from '@/lib/api'

const props = defineProps<{
  package: KolPackageSummary
}>()

const emit = defineEmits<{
  (e: 'click', id: number): void
}>()

const { t } = useI18n()
const coverUrl = computed(() => resolveApiURL(props.package.cover_url))

function handleClick() {
  emit('click', props.package.id)
}
</script>

<template>
  <a-card hoverable class="kol-package-card" @click="handleClick">
    <template #cover>
      <div
        v-if="coverUrl"
        class="card-cover-image"
        :style="{ backgroundImage: `url(${coverUrl})` }"
      >
        <img alt="cover" :src="coverUrl" />
      </div>
      <div v-else class="card-cover-fallback">
        <ThunderboltOutlined class="fallback-icon" />
      </div>
    </template>
    <a-card-meta>
      <template #title>
        <div class="card-title">
          {{ props.package.name }}
        </div>
      </template>
      <template #description>
        <div class="card-description">
          <div class="kol-info">
            <a-avatar :src="props.package.kol_avatar_url" size="small">
              <template #icon><UserOutlined /></template>
            </a-avatar>
            <span class="kol-name">{{ props.package.kol_display_name }}</span>
          </div>
          <div v-if="props.package.industry" class="industry-badge">
            <a-tag color="blue">
              <template #icon><TagOutlined /></template>
              {{ props.package.industry }}
            </a-tag>
          </div>
          <div class="stats">
            <span class="stat-item">
              <ThunderboltOutlined />
              {{ t('kol.marketplace.prompts', { count: props.package.prompt_count }) }}
            </span>
            <span class="stat-item">
              <TeamOutlined />
              {{ t('kol.marketplace.subscribers', { count: props.package.subscriber_count }) }}
            </span>
          </div>
        </div>
      </template>
    </a-card-meta>
  </a-card>
</template>

<style scoped>
.kol-package-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
}

.kol-package-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-cover-image {
  aspect-ratio: 16 / 9;
  background-color: #eef2f6;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.card-cover-image::before {
  content: '';
  position: absolute;
  inset: -16px;
  z-index: 0;
  background: inherit;
  filter: blur(18px);
  opacity: 0.6;
  transform: scale(1.08);
}

.card-cover-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(248, 250, 252, 0.34);
}

.card-cover-image img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-cover-fallback {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fallback-icon {
  font-size: 48px;
  color: #bae0ff;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-description {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kol-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kol-name {
  font-size: 14px;
  color: #595959;
}

.industry-badge {
  margin-top: 4px;
}

.stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 4px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

:deep(.ant-card-body) {
  padding: 16px;
}

:deep(.ant-card-meta-title) {
  margin-bottom: 0;
}
</style>