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

<script setup lang="ts">
import { FileTextOutlined, RightOutlined } from '@ant-design/icons-vue'
import type { GeneratedArticleLink } from '@geo/shared-types'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'

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

const props = defineProps<{
  open: boolean
  articles: GeneratedArticleLink[]
}>()

const emit = defineEmits<{
  'update:open': [value: boolean]
}>()

const { t } = useI18n()
const route = useRoute()
const router = useRouter()

const drawerOpen = computed({
  get: () => props.open,
  set: (value: boolean) => emit('update:open', value),
})

function canOpenArticle(article: GeneratedArticleLink): boolean {
  return article.generate_status === 'completed'
}

function articleTitle(article: GeneratedArticleLink, index: number): string {
  return article.title || `${t('article.untitled')} ${index + 1}`
}

function openArticle(article: GeneratedArticleLink): void {
  if (!canOpenArticle(article)) {
    return
  }
  emit('update:open', false)
  const returnTo = router.resolve({
    name: route.name ?? undefined,
    params: route.params,
    query: route.query,
  })
  void router.push({
    name: 'article-editor',
    params: { id: String(article.article_id) },
    query: { return_to: returnTo.fullPath },
  })
}
</script>

<template>
  <a-drawer
    v-model:open="drawerOpen"
    :title="t('custom.instant.generatedArticles')"
    width="560px"
    placement="right"
    :body-style="{ padding: '16px 24px', background: '#f7f8fa' }"
  >
    <div class="generated-article-links">
      <template v-if="articles.length > 0">
        <div
          v-for="(item, index) in articles"
          :key="item.article_id || index"
          class="generated-article-links__item"
          :class="{ 'generated-article-links__item--clickable': canOpenArticle(item) }"
          @click="openArticle(item)"
        >
          <div
            class="generated-article-links__icon"
            :class="`generated-article-links__icon--${item.generate_status}`"
          >
            <FileTextOutlined />
          </div>
          <div class="generated-article-links__content">
            <div class="generated-article-links__header">
              <a-tooltip :title="articleTitle(item, index)">
                <div class="generated-article-links__title">
                  {{ articleTitle(item, index) }}
                </div>
              </a-tooltip>
              <a-tag
                class="generated-article-links__status"
                :color="getGenerateStatusMeta(item.generate_status).color"
                :bordered="false"
              >
                {{ getGenerateStatusMeta(item.generate_status).label }}
              </a-tag>
            </div>
            <div class="generated-article-links__meta">
              {{ formatDateTime(item.created_at) }}
            </div>
          </div>
          <div v-if="canOpenArticle(item)" class="generated-article-links__action">
            <a-button type="link" size="small" @click.stop="openArticle(item)">
              {{ t('custom.instant.openArticle') }}
              <RightOutlined />
            </a-button>
          </div>
        </div>
      </template>
      <a-empty
        v-else
        :description="t('custom.instant.articleLinksEmpty')"
        class="generated-article-links__empty"
      />
    </div>
  </a-drawer>
</template>

<style scoped>
.generated-article-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.generated-article-links__item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 74px;
  padding: 16px;
  background-color: #ffffff;
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

.generated-article-links__item--clickable {
  cursor: pointer;
}

.generated-article-links__item--clickable:hover {
  border-color: #1677ff;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.08);
  transform: translateY(-1px);
}

.generated-article-links__icon {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #1677ff;
  font-size: 20px;
  background-color: #f0f5ff;
  border-radius: 8px;
}

.generated-article-links__icon--failed {
  color: #ff4d4f;
  background-color: #fff1f0;
}

.generated-article-links__icon--completed {
  color: #52c41a;
  background-color: #f6ffed;
}

.generated-article-links__icon--running,
.generated-article-links__icon--generating,
.generated-article-links__icon--queued {
  color: #1677ff;
  background-color: #e6f4ff;
}

.generated-article-links__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.generated-article-links__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.generated-article-links__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #1d2129;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.generated-article-links__item--clickable .generated-article-links__title {
  transition: color 0.2s;
}

.generated-article-links__item--clickable:hover .generated-article-links__title {
  color: #1677ff;
}

.generated-article-links__status {
  margin-inline-end: 0;
  border-radius: 4px;
}

.generated-article-links__meta {
  color: #86909c;
  font-size: 13px;
}

.generated-article-links__action {
  flex-shrink: 0;
}

.generated-article-links__action :deep(.ant-btn) {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 0;
  font-size: 13px;
}

.generated-article-links__empty {
  margin-top: 60px;
}
</style>