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

<script setup lang="ts">
import {
  LoadingOutlined,
  AppstoreOutlined,
  ClockCircleOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import { message, type TableColumnsType } from "ant-design-vue";
import type { ArticleListItem, ArticleListParams } from "@geo/shared-types";
import type { Dayjs } from "dayjs";
import { computed, onBeforeUnmount, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

import ArticleDetailDrawer from "@/components/ArticleDetailDrawer.vue";
import { articlesApi, promptRulesApi } from "@/lib/api";
import {
  formatDateTime,
  getGenerateStatusMeta,
  getPublishStatusMeta,
  getSourceTypeLabel,
} from "@/lib/display";
import { formatError } from "@/lib/errors";
import { formatPublishPlatformList } from "@/lib/publish-platforms";

const queryClient = useQueryClient();
const router = useRouter();
const { t } = useI18n();

const page = ref(1);
const pageSize = ref(20);
const draftGenerationRange = ref<[Dayjs, Dayjs] | null>(null);

const draftFilters = reactive<{
  prompt_rule_id?: number;
  publish_status?: string;
  generate_status?: string;
  keyword?: string;
}>({
  keyword: "",
});

const appliedFilters = reactive<{
  prompt_rule_id?: number;
  publish_status?: string;
  generate_status?: string;
  keyword?: string;
  created_from?: string;
  created_to?: string;
}>({
  keyword: "",
});

const articleDrawerOpen = ref(false);
const selectedArticleId = ref<number | null>(null);

const rulesQuery = useQuery({
  queryKey: ["promptRules", "simple"],
  queryFn: () => promptRulesApi.listSimple(),
});

const ruleOptions = computed(() =>
  (rulesQuery.data.value ?? []).map((r) => ({ label: r.name, value: r.id })),
);

const generateStatusOptions = computed(() => [
  { label: getGenerateStatusMeta("draft").label, value: "draft" },
  { label: getGenerateStatusMeta("generating").label, value: "generating" },
  { label: getGenerateStatusMeta("completed").label, value: "completed" },
  { label: getGenerateStatusMeta("failed").label, value: "failed" },
]);

const publishStatusOptions = computed(() => [
  { label: getPublishStatusMeta("unpublished").label, value: "unpublished" },
  { label: getPublishStatusMeta("publishing").label, value: "publishing" },
  { label: getPublishStatusMeta("published").label, value: "published" },
  { label: getPublishStatusMeta("publish_failed").label, value: "publish_failed" },
]);

const articleParams = computed<ArticleListParams>(() => {
  const params: ArticleListParams = {
    page: page.value,
    page_size: pageSize.value,
    source_type: "custom_generation",
  };
  if (appliedFilters.prompt_rule_id) params.prompt_rule_id = appliedFilters.prompt_rule_id;
  if (appliedFilters.publish_status) params.publish_status = appliedFilters.publish_status;
  if (appliedFilters.generate_status) params.generate_status = appliedFilters.generate_status;
  if (appliedFilters.keyword?.trim()) params.keyword = appliedFilters.keyword.trim();
  if (appliedFilters.created_from) params.created_from = appliedFilters.created_from;
  if (appliedFilters.created_to) params.created_to = appliedFilters.created_to;
  return params;
});

const listQuery = useQuery({
  queryKey: computed(() => ["articles", "list", "custom_generation", articleParams.value]),
  queryFn: () => articlesApi.list(articleParams.value),
});

let pollingTimer: number | null = null;

const deleteMutation = useMutation({
  mutationFn: (id: number) => articlesApi.remove(id),
  onSuccess: async () => {
    message.success(t("templates.list.deleteSuccess"));
    await queryClient.invalidateQueries({ queryKey: ["articles"] });
  },
  onError: (error) => message.error(formatError(error)),
});

const columns = computed<TableColumnsType<ArticleListItem>>(() => [
  { title: t("custom.article.titleColumn"), dataIndex: "title", key: "title", width: 340 },
  { title: t("custom.filters.promptRule"), dataIndex: "prompt_rule_name", key: "prompt_rule_name", width: 160 },
  { title: t("custom.schedule.platform"), dataIndex: "platforms", key: "platforms", width: 180 },
  { title: t("common.generateStatus"), dataIndex: "generate_status", key: "generate_status", width: 128 },
  { title: t("common.publishStatus"), dataIndex: "publish_status", key: "publish_status", width: 128 },
  { title: t("common.wordCount"), dataIndex: "word_count", key: "word_count", width: 100 },
  { title: t("common.actions"), key: "actions", width: 120, fixed: "right", align: "right" },
]);

function applyFilters(): void {
  page.value = 1;
  appliedFilters.prompt_rule_id = draftFilters.prompt_rule_id;
  appliedFilters.publish_status = draftFilters.publish_status;
  appliedFilters.generate_status = draftFilters.generate_status;
  appliedFilters.keyword = draftFilters.keyword?.trim() || "";
  appliedFilters.created_from = draftGenerationRange.value?.[0]?.toISOString();
  appliedFilters.created_to = draftGenerationRange.value?.[1]?.toISOString();
}

function resetFilters(): void {
  draftFilters.prompt_rule_id = undefined;
  draftFilters.publish_status = undefined;
  draftFilters.generate_status = undefined;
  draftFilters.keyword = "";
  draftGenerationRange.value = null;
  applyFilters();
}

function openDetail(article: ArticleListItem): void {
  selectedArticleId.value = article.id;
  articleDrawerOpen.value = true;
}

function openEditor(article: ArticleListItem): void {
  void router.push({ name: "article-editor", params: { id: String(article.id) } });
}

function canEditArticle(status: string): boolean {
  return status === "completed" || status === "draft";
}

function getDisplayTitle(article: ArticleListItem): string {
  if ((article.generate_status === "generating" || article.generate_status === "running") && !article.title) {
    return t("custom.article.titleGenerating");
  }
  return article.title || t("article.untitled");
}

function handleTableChange(nextPage: number, nextPageSize: number): void {
  page.value = nextPage;
  pageSize.value = nextPageSize;
}

function startPolling(): void {
  if (pollingTimer !== null) return;
  pollingTimer = window.setInterval(() => {
    void listQuery.refetch();
  }, 3000);
}

function stopPolling(): void {
  if (pollingTimer === null) return;
  window.clearInterval(pollingTimer);
  pollingTimer = null;
}

watch(
  () => listQuery.data.value?.items ?? [],
  (items) => {
    const hasActive = items.some(
      (item) => item.generate_status === "generating" || item.generate_status === "running",
    );
    if (hasActive) {
      startPolling();
    } else {
      stopPolling();
    }
  },
  { immediate: true },
);

onBeforeUnmount(() => {
  stopPolling();
});
</script>

<template>
  <div class="custom-article-tab">
    <div class="custom-article-tab__filters">
      <div class="custom-article-tab__filter-item">
        <label>{{ t("custom.filters.promptRule") }}:</label>
        <a-select
          v-model:value="draftFilters.prompt_rule_id"
          allow-clear
          :options="ruleOptions"
          :placeholder="t('common.selectPlease')"
          :loading="rulesQuery.isPending.value"
          @change="applyFilters"
        />
      </div>

      <div class="custom-article-tab__filter-item">
        <label>{{ t("custom.filters.publishStatus") }}:</label>
        <a-select
          v-model:value="draftFilters.publish_status"
          allow-clear
          :options="publishStatusOptions"
          :placeholder="t('common.selectPlease')"
          @change="applyFilters"
        />
      </div>

      <div class="custom-article-tab__filter-item">
        <label>{{ t("custom.filters.generateStatus") }}:</label>
        <a-select
          v-model:value="draftFilters.generate_status"
          allow-clear
          :options="generateStatusOptions"
          :placeholder="t('common.selectPlease')"
          @change="applyFilters"
        />
      </div>

      <div class="custom-article-tab__filter-item">
        <label>{{ t("custom.filters.generateTime") }}:</label>
        <a-range-picker
          v-model:value="draftGenerationRange"
          allow-clear
          show-time
          format="YYYY-MM-DD HH:mm"
          @change="applyFilters"
        />
      </div>

      <div class="custom-article-tab__filter-item">
        <label>{{ t("custom.filters.title") }}:</label>
        <a-input-search
          v-model:value="draftFilters.keyword"
          :placeholder="t('templates.filters.keywordPlaceholder')"
          @search="applyFilters"
          @pressEnter="applyFilters"
        />
      </div>

      <a-button @click="resetFilters">{{ t("common.reset") }}</a-button>
    </div>

    <div class="custom-article-tab__head">
      <span class="custom-article-tab__count">
        {{ t("templates.list.count", { count: listQuery.data.value?.total ?? 0 }) }}
      </span>
      <a-button type="link" @click="listQuery.refetch()">
        {{ t("common.refresh") }}
      </a-button>
    </div>

    <a-table
      :columns="columns"
      :data-source="listQuery.data.value?.items ?? []"
      :loading="listQuery.isPending.value"
      :pagination="{
        current: page,
        pageSize,
        total: listQuery.data.value?.total ?? 0,
        showSizeChanger: true,
      }"
      row-key="id"
      size="small"
      :scroll="{ x: 1000 }"
      @change="(p: any) => handleTableChange(p.current, p.pageSize)"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'title'">
          <div class="custom-article-tab__title-cell">
            <a class="custom-article-tab__title-link" @click="openDetail(record)">
              {{ getDisplayTitle(record) }}
            </a>
            <div class="custom-article-tab__title-meta">
              <span class="custom-article-tab__title-badge">
                <AppstoreOutlined />
                <span>{{ getSourceTypeLabel(record.source_type, record.generation_mode) }}</span>
              </span>
              <span class="custom-article-tab__title-time">
                <ClockCircleOutlined />
                <span>{{ formatDateTime(record.created_at) }}</span>
              </span>
            </div>
          </div>
        </template>
        <template v-else-if="column.key === 'prompt_rule_name'">
          {{ record.prompt_rule_name || "--" }}
        </template>
        <template v-else-if="column.key === 'platforms'">
          {{ formatPublishPlatformList(record.platforms) }}
        </template>
        <template v-else-if="column.key === 'generate_status'">
          <a-tag :color="getGenerateStatusMeta(record.generate_status).color">
            <span class="custom-article-tab__status-tag">
              <LoadingOutlined
                v-if="record.generate_status === 'generating' || record.generate_status === 'running'"
                spin
              />
              <span>{{ getGenerateStatusMeta(record.generate_status).label }}</span>
            </span>
          </a-tag>
        </template>
        <template v-else-if="column.key === 'publish_status'">
          <a-tag :color="getPublishStatusMeta(record.publish_status).color">
            {{ getPublishStatusMeta(record.publish_status).label }}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'word_count'">
          {{ record.word_count || "--" }}
        </template>
        <template v-else-if="column.key === 'actions'">
          <div class="table-actions-row">
            <a-tooltip :title="t('common.edit')">
              <span>
                <a-button
                  type="text"
                  shape="circle"
                  size="small"
                  class="action-btn action-edit"
                  :disabled="!canEditArticle(record.generate_status)"
                  @click="openEditor(record)"
                >
                  <EditOutlined />
                </a-button>
              </span>
            </a-tooltip>
            <a-popconfirm
              :title="t('templates.list.deleteConfirm')"
              @confirm="deleteMutation.mutate(record.id)"
            >
              <a-button
                type="text"
                shape="circle"
                size="small"
                class="action-btn action-delete"
                :title="t('common.delete')"
              >
                <DeleteOutlined />
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>

    <ArticleDetailDrawer
      :open="articleDrawerOpen"
      :article-id="selectedArticleId"
      @close="articleDrawerOpen = false"
    />
  </div>
</template>

<style scoped>
.custom-article-tab__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.custom-article-tab__filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.custom-article-tab__filter-item label {
  font-size: 12px;
  color: #8c8c8c;
}

.custom-article-tab__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.custom-article-tab__count {
  font-size: 13px;
  color: #8c8c8c;
}

.custom-article-tab__title-link {
  display: inline-block;
  color: #434343;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.custom-article-tab__title-link:hover {
  color: #1677ff;
}

.custom-article-tab__title-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.custom-article-tab__title-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}

.custom-article-tab__title-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b45f06;
  font-weight: 600;
}

.custom-article-tab__title-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a3a3a3;
}

.custom-article-tab__status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
</style>