feat(admin-web): surface generation error message and speed up active polling

Hoists hasActiveGenerationStatus into the shared display helper so all
views agree on what counts as in-flight generation, shows the backend
generation_error_message inline on the imitation list and detail drawer
when status is failed, and drops the workspace/templates/imitation poll
interval from 10s to 3s (with a 5s fallback when streaming is enabled)
plus explicit query-cache invalidation so failed/completed states show
up promptly.
This commit is contained in:
2026-05-11 11:11:40 +08:00
parent cbbed4b42c
commit f34c6f2ceb
6 changed files with 57 additions and 30 deletions
@@ -20,6 +20,7 @@ import {
getGenerateStatusMeta,
getPublishStatusMeta,
getSourceTypeLabel,
hasActiveGenerationStatus,
} from '@/lib/display'
const props = defineProps<{
@@ -124,6 +125,7 @@ const displayMarkdown = computed(() => streamMarkdown.value || detail.value?.mar
const generateMeta = computed(() =>
getGenerateStatusMeta(streamStatus.value || detail.value?.generate_status),
)
const displayGenerateStatus = computed(() => streamStatus.value || detail.value?.generate_status)
const sourceArticleTitle = computed(() => detail.value?.source_title?.trim() || '')
const sourceArticleURL = computed(() => detail.value?.source_url?.trim() || '')
@@ -170,13 +172,13 @@ watch(
watch(
[() => props.open, () => props.articleId, () => detail.value?.generate_status],
([open, articleId, generateStatus], _prev, onCleanup) => {
if (!open || !articleId || streamFeatureEnabled || generateStatus !== 'generating') {
if (!open || !articleId || !hasActiveGenerationStatus(generateStatus)) {
return
}
const timer = window.setInterval(() => {
void refreshArticleData()
}, 2000)
}, streamFeatureEnabled ? 5000 : 2000)
onCleanup(() => {
window.clearInterval(timer)
@@ -326,6 +328,14 @@ async function copyPublishLink(record: PublishRecord): Promise<void> {
</a-descriptions>
</section>
<a-alert
v-if="displayGenerateStatus === 'failed' && detail.generation_error_message"
class="article-drawer__alert"
type="error"
show-icon
:message="detail.generation_error_message"
/>
<a-tabs v-model:activeKey="activeTab" class="article-drawer__tabs">
<a-tab-pane key="content" :tab="t('article.preview')">
<div v-if="displayMarkdown" class="article-drawer__content">
@@ -2,16 +2,14 @@
import { LoadingOutlined } from '@ant-design/icons-vue'
import { computed } from 'vue'
import { getGenerateStatusMeta } from '@/lib/display'
import { getGenerateStatusMeta, hasActiveGenerationStatus } from '@/lib/display'
const props = defineProps<{
status?: string | null
}>()
const statusMeta = computed(() => getGenerateStatusMeta(props.status))
const isLoading = computed(
() => props.status === 'queued' || props.status === 'generating' || props.status === 'running',
)
const isLoading = computed(() => hasActiveGenerationStatus(props.status))
</script>
<template>
+4
View File
@@ -62,6 +62,10 @@ export function getGenerateStatusMeta(status?: string | null): { label: string;
: { label: status, color: 'default' }
}
export function hasActiveGenerationStatus(status?: string | null): boolean {
return status === 'queued' || status === 'pending' || status === 'generating' || status === 'running'
}
export function getPublishStatusMeta(status?: string | null): { label: string; color: string } {
if (!status) {
return { label: '--', color: 'default' }
+31 -9
View File
@@ -18,7 +18,7 @@ import PublishArticleModal from '@/components/PublishArticleModal.vue'
import { articlesApi } from '@/lib/api'
import { buildArticleClipboardContent, resolveArticleActionState } from '@/lib/article-list-actions'
import { useArticleRegenerateAction } from '@/lib/article-regenerate-action'
import { getGenerateStatusMeta, getPublishStatusMeta } from '@/lib/display'
import { getGenerateStatusMeta, getPublishStatusMeta, hasActiveGenerationStatus } from '@/lib/display'
import { formatError } from '@/lib/errors'
const queryClient = useQueryClient()
@@ -169,12 +169,8 @@ function resolveImitationSourceURL(article: ArticleListItem): string {
watch(
() => articleListQuery.data.value?.items || [],
(items: ArticleListItem[]) => {
const hasGeneratingArticles = items.some(
(item) =>
item.generate_status === 'queued' ||
item.generate_status === 'pending' ||
item.generate_status === 'generating' ||
item.generate_status === 'running',
const hasGeneratingArticles = items.some((item) =>
hasActiveGenerationStatus(item.generate_status),
)
if (hasGeneratingArticles) {
@@ -237,8 +233,9 @@ function startArticlePolling(): void {
}
articlePollingTimer = window.setInterval(() => {
void queryClient.invalidateQueries({ queryKey: ['articles'] })
void articleListQuery.refetch()
}, 10000)
}, 3000)
}
function stopArticlePolling(): void {
@@ -425,7 +422,13 @@ async function copyArticle(articleId: number): Promise<void> {
</template>
<template v-else-if="column.key === 'generate_status'">
<ArticleGenerateStatus :status="record.generate_status" />
<div class="imitation-view__status-cell">
<ArticleGenerateStatus :status="record.generate_status" />
<a-tooltip v-if="record.generate_status === 'failed' && record.generation_error_message">
<template #title>{{ record.generation_error_message }}</template>
<span class="imitation-view__error-text">{{ record.generation_error_message }}</span>
</a-tooltip>
</div>
</template>
<template v-else-if="column.key === 'publish_status'">
@@ -629,6 +632,25 @@ async function copyArticle(articleId: number): Promise<void> {
line-height: 18px;
}
.imitation-view__status-cell {
display: flex;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.imitation-view__error-text {
display: block;
max-width: 118px;
overflow: hidden;
color: #cf1322;
font-size: 12px;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 1200px) {
.imitation-view__filter-item :deep(.ant-picker) {
width: 280px;
+4 -7
View File
@@ -39,6 +39,7 @@ import {
formatDateTime,
getGenerateStatusMeta,
getPublishStatusMeta,
hasActiveGenerationStatus,
getTemplateMeta,
} from '@/lib/display'
import { formatError } from '@/lib/errors'
@@ -197,12 +198,6 @@ const displayedArticleTotal = computed(() =>
let articlePollingTimer: number | null = null
function hasActiveGenerationStatus(status?: string | null): boolean {
return (
status === 'queued' || status === 'pending' || status === 'generating' || status === 'running'
)
}
const deleteMutation = useMutation({
mutationFn: (articleId: number) => articlesApi.remove(articleId),
onSuccess: async () => {
@@ -413,8 +408,10 @@ function startArticlePolling(): void {
}
articlePollingTimer = window.setInterval(() => {
void queryClient.invalidateQueries({ queryKey: ['articles'] })
void queryClient.invalidateQueries({ queryKey: ['workspace', 'recent-articles'] })
void Promise.all([articleListQuery.refetch(), recentArticlesQuery.refetch()])
}, 10000)
}, 3000)
}
function stopArticlePolling(): void {
+4 -8
View File
@@ -29,7 +29,7 @@ import PublishArticleModal from '@/components/PublishArticleModal.vue'
import { articlesApi, tenantAccountsApi, workspaceApi } from '@/lib/api'
import { buildArticleClipboardContent, resolveArticleActionState } from '@/lib/article-list-actions'
import { useArticleRegenerateAction } from '@/lib/article-regenerate-action'
import { formatDateTime, getTemplateMeta } from '@/lib/display'
import { formatDateTime, getTemplateMeta, hasActiveGenerationStatus } from '@/lib/display'
import { formatError } from '@/lib/errors'
import { isMediaPublishAccount } from '@/lib/publish-platforms'
@@ -63,12 +63,6 @@ const kolCardsQuery = useQuery({
queryFn: () => workspaceApi.kolCards(),
})
function hasActiveGenerationStatus(status?: string | null): boolean {
return (
status === 'queued' || status === 'pending' || status === 'generating' || status === 'running'
)
}
function toTimeValue(value?: string | null): number {
const parsed = Date.parse(value ?? '')
return Number.isNaN(parsed) ? 0 : parsed
@@ -290,8 +284,10 @@ function startRecentArticlesPolling(): void {
}
recentArticlesPollingTimer = window.setInterval(() => {
void queryClient.invalidateQueries({ queryKey: ['workspace', 'recent-articles'] })
void queryClient.invalidateQueries({ queryKey: ['articles'] })
void recentArticlesQuery.refetch()
}, 10000)
}, 3000)
}
function stopRecentArticlesPolling(): void {