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,28 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
SendOutlined,
|
||||
PlusOutlined,
|
||||
LoadingOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||
import { message } from "ant-design-vue";
|
||||
import type { ArticleListItem, ArticleListParams } from "@geo/shared-types";
|
||||
import type { TableColumnsType } from "ant-design-vue";
|
||||
import type { Dayjs } from "dayjs";
|
||||
import { computed, onBeforeUnmount, reactive, ref, watch } from "vue";
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import ArticleActionGroup from "@/components/ArticleActionGroup.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 } from "@/lib/api";
|
||||
import { buildArticleClipboardContent, resolveArticleActionState } from "@/lib/article-list-actions";
|
||||
import { formatError } from "@/lib/errors";
|
||||
import {
|
||||
formatDateTime,
|
||||
getGenerateStatusMeta,
|
||||
getPublishStatusMeta,
|
||||
getSourceTypeLabel,
|
||||
} from "@/lib/display";
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
@@ -31,6 +29,8 @@ const { t } = useI18n();
|
||||
|
||||
const publishModalOpen = ref(false);
|
||||
const selectedPublishArticleId = ref<number | null>(null);
|
||||
const articleDrawerOpen = ref(false);
|
||||
const selectedArticleId = ref<number | null>(null);
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const createdRange = ref<[Dayjs, Dayjs] | null>(null);
|
||||
@@ -164,8 +164,9 @@ function openPublish(article: ArticleListItem): void {
|
||||
publishModalOpen.value = true;
|
||||
}
|
||||
|
||||
function canPublishArticle(status: string): boolean {
|
||||
return status === "completed";
|
||||
function openPreview(article: ArticleListItem): void {
|
||||
selectedArticleId.value = article.id;
|
||||
articleDrawerOpen.value = true;
|
||||
}
|
||||
|
||||
function handleTableChange(nextPage: number, nextPageSize: number): void {
|
||||
@@ -180,6 +181,23 @@ async function handleDelete(articleId: number): Promise<void> {
|
||||
function handleCreate(): void {
|
||||
createMutation.mutate();
|
||||
}
|
||||
|
||||
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"));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -274,16 +292,19 @@ function handleCreate(): void {
|
||||
<template v-if="column.key === 'title'">
|
||||
<div class="free-create-view__title-cell">
|
||||
<strong>{{ record.title || t("article.untitled") }}</strong>
|
||||
<span>
|
||||
{{ getSourceTypeLabel(record.source_type) }} · {{ formatDateTime(record.created_at) }}
|
||||
</span>
|
||||
<ArticleSourceMeta
|
||||
:source-type="record.source_type"
|
||||
:generation-mode="record.generation_mode"
|
||||
:created-at="record.created_at"
|
||||
/>
|
||||
</div>
|
||||
</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'">
|
||||
@@ -291,52 +312,16 @@ function handleCreate(): void {
|
||||
</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('freeCreate.list.edit')">
|
||||
<span>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
class="action-btn action-edit"
|
||||
@click="openEditor(record)"
|
||||
>
|
||||
<EditOutlined />
|
||||
</a-button>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
<a-popconfirm
|
||||
:title="t('freeCreate.list.deleteConfirm')"
|
||||
@confirm="handleDelete(record.id)"
|
||||
>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
class="action-btn action-delete"
|
||||
:loading="deleteMutation.isPending.value"
|
||||
:title="t('common.delete')"
|
||||
>
|
||||
<DeleteOutlined />
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<ArticleActionGroup
|
||||
v-bind="resolveArticleActionState(record.generate_status)"
|
||||
:delete-confirm-title="t('freeCreate.list.deleteConfirm')"
|
||||
:delete-loading="deleteMutation.isPending.value"
|
||||
@publish="openPublish(record)"
|
||||
@edit="openEditor(record)"
|
||||
@preview="openPreview(record)"
|
||||
@copy="copyArticle(record.id)"
|
||||
@delete="handleDelete(record.id)"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
@@ -346,6 +331,12 @@ function handleCreate(): void {
|
||||
v-model:open="publishModalOpen"
|
||||
:article-id="selectedPublishArticleId"
|
||||
/>
|
||||
|
||||
<ArticleDetailDrawer
|
||||
:open="articleDrawerOpen"
|
||||
:article-id="selectedArticleId"
|
||||
@close="articleDrawerOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -454,12 +445,7 @@ function handleCreate(): void {
|
||||
.free-create-view__title-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.free-create-view__title-cell span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
Reference in New Issue
Block a user