geo/apps/admin-web/src/components/ArticleSourceMeta.vue

<script setup lang="ts">
import {
  AppstoreOutlined,
  CalendarOutlined,
  ClockCircleOutlined,
  CopyOutlined,
  EditOutlined,
  TeamOutlined,
  ThunderboltOutlined,
} from '@ant-design/icons-vue'
import { computed, type Component } from 'vue'

import { formatDateTime, getSourceTypeLabel } from '@/lib/display'

const props = defineProps<{
  sourceType?: string | null
  generationMode?: string | null
  createdAt?: string | null
}>()

const sourceLabel = computed(() => getSourceTypeLabel(props.sourceType, props.generationMode))

const createdAtLabel = computed(() => formatDateTime(props.createdAt))

const sourceVariant = computed<
  'template' | 'custom' | 'instant' | 'schedule' | 'free-create' | 'imitation' | 'kol' | 'default'
>(() => {
  if (props.sourceType === 'template') {
    return 'template'
  }
  if (props.sourceType === 'free_create') {
    return 'free-create'
  }
  if (props.sourceType === 'imitation') {
    return 'imitation'
  }
  if (props.sourceType === 'kol') {
    return 'kol'
  }
  if (props.sourceType === 'custom_generation') {
    if (props.generationMode === 'schedule') {
      return 'schedule'
    }
    if (props.generationMode === 'instant') {
      return 'instant'
    }
    return 'custom'
  }
  return 'default'
})

const badgeIcon = computed<Component>(() => {
  switch (sourceVariant.value) {
    case 'template':
      return AppstoreOutlined
    case 'instant':
      return ThunderboltOutlined
    case 'schedule':
      return CalendarOutlined
    case 'custom':
      return ThunderboltOutlined
    case 'free-create':
      return EditOutlined
    case 'imitation':
      return CopyOutlined
    case 'kol':
      return TeamOutlined
    default:
      return AppstoreOutlined
  }
})
</script>

<template>
  <div class="article-source-meta">
    <span
      class="article-source-meta__badge"
      :class="`article-source-meta__badge--${sourceVariant}`"
    >
      <component :is="badgeIcon" />
      <span>{{ sourceLabel }}</span>
    </span>
    <span class="article-source-meta__time">
      <ClockCircleOutlined />
      <span>{{ createdAtLabel }}</span>
    </span>
  </div>
</template>

<style scoped>
.article-source-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.article-source-meta__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.article-source-meta__badge--template {
  border: 1px solid #d9e5ff;
  background: linear-gradient(180deg, #fbfcff 0%, #f3f7ff 100%);
  color: #225fd1;
}

.article-source-meta__badge--custom {
  border: 1px solid #d9ccff;
  background: linear-gradient(180deg, #f7f4ff 0%, #efe9ff 100%);
  color: #6941c6;
}

.article-source-meta__badge--instant {
  border: 1px solid #f3c796;
  background: linear-gradient(180deg, #fff5e9 0%, #ffe9d2 100%);
  color: #b54708;
}

.article-source-meta__badge--schedule {
  border: 1px solid #a7ddd3;
  background: linear-gradient(180deg, #eefaf7 0%, #def3ee 100%);
  color: #0b6b61;
}

.article-source-meta__badge--free-create {
  border: 1px solid #d4ead8;
  background: linear-gradient(180deg, #f7fcf8 0%, #eef8f1 100%);
  color: #18794e;
}

.article-source-meta__badge--imitation {
  border: 1px solid #bfdbfe;
  background: linear-gradient(180deg, #f8fbff 0%, #e6f0ff 100%);
  color: #1d4ed8;
}

.article-source-meta__badge--kol {
  border: 1px solid #d6e4ff;
  background: linear-gradient(180deg, #f5f8ff 0%, #eaf1ff 100%);
  color: #1d4ed8;
}

.article-source-meta__badge--default {
  border: 1px solid #dde3ea;
  background: linear-gradient(180deg, #fbfcfd 0%, #f4f6f8 100%);
  color: #44546a;
}

.article-source-meta__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #667085;
  font-size: 12px;
  line-height: 1;
}

.article-source-meta :deep(.anticon) {
  font-size: 12px;
}
</style>