feat: add generation_mode to RecentArticle and related components
- Updated RecentArticle interface to include generation_mode. - Modified workspace_service to map generation_mode from database. - Adjusted domain model for RecentArticle to accommodate generation_mode. - Enhanced SQL queries to retrieve generation_mode from generation_tasks. - Created ArticleActionGroup component for article action buttons. - Implemented ArticleGenerateStatus component to display generation status. - Developed ArticlePublishStatus component to show publish status and related platforms. - Introduced ArticleSourceMeta component to display article source information. - Added utility functions for article actions and clipboard content generation.
This commit is contained in:
@@ -1,12 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
LoadingOutlined,
|
||||
AppstoreOutlined,
|
||||
ClockCircleOutlined,
|
||||
SendOutlined,
|
||||
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";
|
||||
@@ -15,14 +7,17 @@ import { computed, onBeforeUnmount, reactive, ref, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import ArticleActionGroup from "@/components/ArticleActionGroup.vue";
|
||||
import ArticleGenerateStatus from "@/components/ArticleGenerateStatus.vue";
|
||||
import ArticlePublishStatus from "@/components/ArticlePublishStatus.vue";
|
||||
import ArticleSourceMeta from "@/components/ArticleSourceMeta.vue";
|
||||
import ArticleDetailDrawer from "@/components/ArticleDetailDrawer.vue";
|
||||
import PublishArticleModal from "@/components/PublishArticleModal.vue";
|
||||
import { articlesApi, promptRulesApi } from "@/lib/api";
|
||||
import { buildArticleClipboardContent, resolveArticleActionState } from "@/lib/article-list-actions";
|
||||
import {
|
||||
formatDateTime,
|
||||
getGenerateStatusMeta,
|
||||
getPublishStatusMeta,
|
||||
getSourceTypeLabel,
|
||||
} from "@/lib/display";
|
||||
import { formatError } from "@/lib/errors";
|
||||
import { formatPublishPlatformList } from "@/lib/publish-platforms";
|
||||
@@ -111,7 +106,10 @@ const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => articlesApi.remove(id),
|
||||
onSuccess: async () => {
|
||||
message.success(t("templates.list.deleteSuccess"));
|
||||
await queryClient.invalidateQueries({ queryKey: ["articles"] });
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["articles"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["workspace"] }),
|
||||
]);
|
||||
},
|
||||
onError: (error) => message.error(formatError(error)),
|
||||
});
|
||||
@@ -159,14 +157,6 @@ function openPublish(article: ArticleListItem): void {
|
||||
publishModalOpen.value = true;
|
||||
}
|
||||
|
||||
function canEditArticle(status: string): boolean {
|
||||
return status === "completed" || status === "draft";
|
||||
}
|
||||
|
||||
function canPublishArticle(status: string): boolean {
|
||||
return status === "completed";
|
||||
}
|
||||
|
||||
function getDisplayTitle(article: ArticleListItem): string {
|
||||
if ((article.generate_status === "generating" || article.generate_status === "running") && !article.title) {
|
||||
return t("custom.article.titleGenerating");
|
||||
@@ -192,6 +182,23 @@ function stopPolling(): void {
|
||||
pollingTimer = null;
|
||||
}
|
||||
|
||||
async function copyArticle(articleId: number): Promise<void> {
|
||||
try {
|
||||
const detail = await articlesApi.detail(articleId);
|
||||
const content = buildArticleClipboardContent(detail);
|
||||
|
||||
if (!content) {
|
||||
message.warning(t("common.noData"));
|
||||
return;
|
||||
}
|
||||
|
||||
await navigator.clipboard.writeText(content);
|
||||
message.success(t("common.copySuccess"));
|
||||
} catch (error) {
|
||||
message.error(formatError(error) || t("common.noData"));
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => listQuery.data.value?.items ?? [],
|
||||
(items) => {
|
||||
@@ -303,16 +310,11 @@ onBeforeUnmount(() => {
|
||||
<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>
|
||||
<ArticleSourceMeta
|
||||
:source-type="record.source_type"
|
||||
:generation-mode="record.generation_mode"
|
||||
:created-at="record.created_at"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'prompt_rule_name'">
|
||||
@@ -322,69 +324,28 @@ onBeforeUnmount(() => {
|
||||
{{ 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>
|
||||
<ArticleGenerateStatus :status="record.generate_status" />
|
||||
</template>
|
||||
<template v-else-if="column.key === 'publish_status'">
|
||||
<a-tag :color="getPublishStatusMeta(record.publish_status).color">
|
||||
{{ getPublishStatusMeta(record.publish_status).label }}
|
||||
</a-tag>
|
||||
<ArticlePublishStatus
|
||||
:status="record.publish_status"
|
||||
:article-id="record.id"
|
||||
/>
|
||||
</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="canPublishArticle(record.generate_status) ? t('media.publish.title') : t('templates.list.publishDisabled')">
|
||||
<span>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
class="action-btn action-publish"
|
||||
:disabled="!canPublishArticle(record.generate_status)"
|
||||
@click="openPublish(record)"
|
||||
>
|
||||
<SendOutlined />
|
||||
</a-button>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
<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>
|
||||
<ArticleActionGroup
|
||||
v-bind="resolveArticleActionState(record.generate_status)"
|
||||
:delete-confirm-title="t('templates.list.deleteConfirm')"
|
||||
:delete-loading="deleteMutation.isPending.value"
|
||||
@publish="openPublish(record)"
|
||||
@edit="openEditor(record)"
|
||||
@preview="openDetail(record)"
|
||||
@copy="copyArticle(record.id)"
|
||||
@delete="deleteMutation.mutate(record.id)"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
@@ -451,36 +412,8 @@ onBeforeUnmount(() => {
|
||||
.custom-article-tab__title-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user