feat(migrations): Harden task audit tracking and optimize article templates
- Added migration to harden task audit tracking by modifying audit_logs and related tables. - Introduced operator_id to several tables for better tracking of actions. - Updated article_templates with new prompt templates for various article types, enhancing content generation. - Created prompt_rules and schedule_tasks tables to manage content generation rules and scheduling. - Added foreign key constraints to articles for better data integrity.
This commit is contained in:
@@ -0,0 +1,386 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
LoadingOutlined,
|
||||
} 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,
|
||||
} 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: "prompt_rule",
|
||||
};
|
||||
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", "prompt_rule", 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("common.title"), dataIndex: "title", key: "title" },
|
||||
{ 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.createdAt"), dataIndex: "created_at", key: "created_at", width: 168 },
|
||||
{ title: t("common.actions"), key: "actions", width: 140, fixed: "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 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'">
|
||||
<a class="custom-article-tab__title-link" @click="openDetail(record)">
|
||||
{{ record.title || t("article.untitled") }}
|
||||
</a>
|
||||
</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 === 'created_at'">
|
||||
{{ formatDateTime(record.created_at) }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'actions'">
|
||||
<a-space :size="4">
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
:disabled="!canEditArticle(record.generate_status)"
|
||||
@click="openEditor(record)"
|
||||
>
|
||||
{{ t("common.edit") }}
|
||||
</a-button>
|
||||
<a-popconfirm
|
||||
:title="t('templates.list.deleteConfirm')"
|
||||
@confirm="deleteMutation.mutate(record.id)"
|
||||
>
|
||||
<a-button type="link" size="small" danger>
|
||||
{{ t("common.delete") }}
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</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 {
|
||||
color: #1677ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-article-tab__title-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.custom-article-tab__status-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user