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:
@@ -5,11 +5,6 @@ import {
|
||||
NodeIndexOutlined,
|
||||
RocketOutlined,
|
||||
TrophyOutlined,
|
||||
SendOutlined,
|
||||
EditOutlined,
|
||||
EyeOutlined,
|
||||
CopyOutlined,
|
||||
DeleteOutlined,
|
||||
FileDoneOutlined,
|
||||
CloudUploadOutlined,
|
||||
BlockOutlined,
|
||||
@@ -17,26 +12,32 @@ import {
|
||||
ArrowRightOutlined,
|
||||
PlaySquareOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||
import type { RecentArticle, TemplateCard } from "@geo/shared-types";
|
||||
import { message } from "ant-design-vue";
|
||||
import type { TableColumnsType } from "ant-design-vue";
|
||||
import { computed, ref } 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 { workspaceApi } from "@/lib/api";
|
||||
import {
|
||||
formatDateTime,
|
||||
getGenerateStatusMeta,
|
||||
getPublishStatusMeta,
|
||||
getTemplateMeta,
|
||||
} from "@/lib/display";
|
||||
import PublishArticleModal from "@/components/PublishArticleModal.vue";
|
||||
import { articlesApi, workspaceApi } from "@/lib/api";
|
||||
import { getTemplateMeta } from "@/lib/display";
|
||||
import { buildArticleClipboardContent, resolveArticleActionState } from "@/lib/article-list-actions";
|
||||
import { formatError } from "@/lib/errors";
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const selectedArticleId = ref<number | null>(null);
|
||||
const articleDrawerOpen = ref(false);
|
||||
const selectedPublishArticleId = ref<number | null>(null);
|
||||
const publishModalOpen = ref(false);
|
||||
|
||||
const overviewQuery = useQuery({
|
||||
queryKey: ["workspace", "overview"],
|
||||
@@ -74,23 +75,17 @@ const articleColumns = computed<TableColumnsType<RecentArticle>>(() => [
|
||||
dataIndex: "title",
|
||||
key: "title",
|
||||
},
|
||||
{
|
||||
title: t("common.templateType"),
|
||||
dataIndex: "template_name",
|
||||
key: "template_name",
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: t("common.generateStatus"),
|
||||
dataIndex: "generate_status",
|
||||
key: "generate_status",
|
||||
width: 140,
|
||||
width: 128,
|
||||
},
|
||||
{
|
||||
title: t("common.publishStatus"),
|
||||
dataIndex: "publish_status",
|
||||
key: "publish_status",
|
||||
width: 140,
|
||||
width: 148,
|
||||
},
|
||||
{
|
||||
title: t("common.wordCount"),
|
||||
@@ -101,11 +96,25 @@ const articleColumns = computed<TableColumnsType<RecentArticle>>(() => [
|
||||
{
|
||||
title: t("common.actions"),
|
||||
key: "actions",
|
||||
width: 200,
|
||||
align: 'right',
|
||||
width: 188,
|
||||
align: "right",
|
||||
},
|
||||
]);
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (articleId: number) => articlesApi.remove(articleId),
|
||||
onSuccess: async () => {
|
||||
message.success(t("templates.list.deleteSuccess"));
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ["workspace"] }),
|
||||
queryClient.invalidateQueries({ queryKey: ["articles"] }),
|
||||
]);
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error) || t("templates.list.deleteError"));
|
||||
},
|
||||
});
|
||||
|
||||
// Helper for the gradient classes based on index/type
|
||||
function getTemplateCardClass(idx: number): string {
|
||||
const classes = ["card-yellow", "card-blue-light", "card-blue-deep", "card-grey"];
|
||||
@@ -140,8 +149,51 @@ function openArticle(articleId: number): void {
|
||||
articleDrawerOpen.value = true;
|
||||
}
|
||||
|
||||
function confirmDelete(articleId: number): void {
|
||||
// Mock delete function
|
||||
function openPublish(articleId: number): void {
|
||||
selectedPublishArticleId.value = articleId;
|
||||
publishModalOpen.value = true;
|
||||
}
|
||||
|
||||
async function openEditor(article: RecentArticle): Promise<void> {
|
||||
try {
|
||||
const detail = await articlesApi.detail(article.id);
|
||||
|
||||
if (detail.generate_status !== "completed" && detail.source_type === "template" && detail.template_id) {
|
||||
await router.push({
|
||||
name: "article-wizard",
|
||||
query: {
|
||||
template_id: String(detail.template_id),
|
||||
article_id: String(detail.id),
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
await router.push({ name: "article-editor", params: { id: String(detail.id) } });
|
||||
} catch (error) {
|
||||
message.error(formatError(error) || t("common.noData"));
|
||||
}
|
||||
}
|
||||
|
||||
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"));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(articleId: number): Promise<void> {
|
||||
await deleteMutation.mutateAsync(articleId);
|
||||
}
|
||||
|
||||
function refreshDashboard(): void {
|
||||
@@ -230,48 +282,40 @@ function refreshDashboard(): void {
|
||||
<template v-if="column.key === 'title'">
|
||||
<div class="table-title-col">
|
||||
<strong>{{ record.title || t("article.untitled") }}</strong>
|
||||
<div class="table-title-sub">
|
||||
<span style="color: #1f5cff; font-weight: 500; font-size: 11px;">自定义生成</span>
|
||||
<span class="muted-dot">•</span>
|
||||
<span class="muted">{{ record.source_label || formatDateTime(record.created_at) }}</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 === 'template_name'">
|
||||
<span style="color: #595959;">-</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'generate_status'">
|
||||
<!-- Custom dot badge -->
|
||||
<div class="status-badge" :class="[record.generate_status === 'completed' ? 'badge-green' : 'badge-grey']">
|
||||
<span class="dot"></span>
|
||||
<span>已完成</span>
|
||||
</div>
|
||||
<ArticleGenerateStatus :status="record.generate_status" />
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'publish_status'">
|
||||
<div
|
||||
class="status-badge"
|
||||
:class="[getPublishStatusMeta(record.publish_status).color === 'success' ? 'badge-green-filled' : 'badge-grey']"
|
||||
>
|
||||
<span class="dot" v-if="getPublishStatusMeta(record.publish_status).color !== 'success'"></span>
|
||||
<span>{{ getPublishStatusMeta(record.publish_status).label }}</span>
|
||||
</div>
|
||||
<ArticlePublishStatus
|
||||
:status="record.publish_status"
|
||||
:article-id="record.id"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'word_count'">
|
||||
<span style="color: #595959;">{{ record.word_count || "-" }}</span>
|
||||
{{ record.word_count || "--" }}
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'actions'">
|
||||
<div class="table-actions-row">
|
||||
<a-button type="text" shape="circle" size="small" class="action-btn action-send"><SendOutlined /></a-button>
|
||||
<a-button type="text" shape="circle" size="small" class="action-btn action-edit"><EditOutlined /></a-button>
|
||||
<a-button type="text" shape="circle" size="small" class="action-btn action-eye" @click="openArticle(record.id)"><EyeOutlined /></a-button>
|
||||
<a-button type="text" shape="circle" size="small" class="action-btn action-copy"><CopyOutlined /></a-button>
|
||||
<a-button type="text" shape="circle" size="small" class="action-btn action-delete danger" @click="confirmDelete(record.id)"><DeleteOutlined /></a-button>
|
||||
</div>
|
||||
<ArticleActionGroup
|
||||
v-bind="resolveArticleActionState(record.generate_status)"
|
||||
:delete-confirm-title="t('templates.list.deleteConfirm')"
|
||||
:delete-loading="deleteMutation.isPending.value"
|
||||
@publish="openPublish(record.id)"
|
||||
@edit="openEditor(record)"
|
||||
@preview="openArticle(record.id)"
|
||||
@copy="copyArticle(record.id)"
|
||||
@delete="handleDelete(record.id)"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
@@ -282,6 +326,11 @@ function refreshDashboard(): void {
|
||||
:article-id="selectedArticleId"
|
||||
@close="articleDrawerOpen = false"
|
||||
/>
|
||||
|
||||
<PublishArticleModal
|
||||
v-model:open="publishModalOpen"
|
||||
:article-id="selectedPublishArticleId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -490,67 +539,12 @@ function refreshDashboard(): void {
|
||||
.table-title-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
}
|
||||
.table-title-col strong {
|
||||
font-size: 14px;
|
||||
color: #141414;
|
||||
}
|
||||
.table-title-sub {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.muted { color: #737373; font-size: 11px; }
|
||||
.muted-dot { color: #d9d9d9; font-size: 10px; }
|
||||
|
||||
/* Status Badges */
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.badge-green {
|
||||
background: transparent;
|
||||
color: #52c41a;
|
||||
}
|
||||
.badge-green .dot { background: #52c41a; }
|
||||
|
||||
.badge-green-filled {
|
||||
background: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
color: #52c41a;
|
||||
}
|
||||
.badge-grey {
|
||||
background: #f5f5f5;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
.badge-grey .dot { background: #d9d9d9; }
|
||||
|
||||
/* Actions */
|
||||
.table-actions-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
.action-btn {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
}
|
||||
.action-send:hover { color: #1677ff; background: #e6f4ff; }
|
||||
.action-edit:hover { color: #52c41a; background: #f6ffed; }
|
||||
.action-eye:hover { color: #13c2c2; background: #e6fffb; }
|
||||
.action-copy:hover { color: #1677ff; background: #e6f4ff; }
|
||||
.action-delete:hover { color: #ff4d4f; background: #fff2f0; }
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.workspace-header-grid {
|
||||
|
||||
Reference in New Issue
Block a user