root/geo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor brand service and related components

Browse Source 
- Removed ListQuestionVersions method and associated types from BrandService and Queries.
- Updated PromptRuleGenerationService to change task naming and handling.
- Enhanced ScheduleTaskService to support filtering by created date range and keyword.
- Introduced InstantTaskService for managing instant tasks with appropriate filtering and response structures.
- Added InstantTaskHandler for handling API requests related to instant tasks.
- Created InstantTaskTab component for the admin web interface to display and manage instant tasks.
- Updated database migrations to rename source types for articles and generation tasks.
- Adjusted models and repository queries to reflect the removal of question version handling.
This commit is contained in:
liangxu
2026-04-02 21:16:12 +08:00
parent 111498a65f
commit 8958cb44c0
36 changed files with 1378 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/src/components/ArticleDetailDrawer.vue
+1 -1
View File
@@ -209,7 +209,7 @@ async function refreshArticleData(): Promise<void> {
<p class="eyebrow">{{ t("article.preview") }}</p>
<h2>{{ displayTitle }}</h2>
<p>
{{ getSourceTypeLabel(detail.source_type) }} ·
{{ getSourceTypeLabel(detail.source_type, detail.generation_mode) }} ·
{{ formatDateTime(detail.created_at) }}
</p>
</div>
apps/admin-web/src/components/CustomArticleTab.vue
+91 -25
View File
@@ -1,6 +1,10 @@
<script setup lang="ts">
import {
LoadingOutlined,
AppstoreOutlined,
ClockCircleOutlined,
EditOutlined,
DeleteOutlined,
} from "@ant-design/icons-vue";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import { message, type TableColumnsType } from "ant-design-vue";
@@ -16,6 +20,7 @@ import {
formatDateTime,
getGenerateStatusMeta,
getPublishStatusMeta,
getSourceTypeLabel,
} from "@/lib/display";
import { formatError } from "@/lib/errors";
import { formatPublishPlatformList } from "@/lib/publish-platforms";
@@ -78,7 +83,7 @@ const articleParams = computed<ArticleListParams>(() => {
const params: ArticleListParams = {
page: page.value,
page_size: pageSize.value,
source_type: "prompt_rule",
source_type: "custom_generation",
};
if (appliedFilters.prompt_rule_id) params.prompt_rule_id = appliedFilters.prompt_rule_id;
if (appliedFilters.publish_status) params.publish_status = appliedFilters.publish_status;
@@ -90,7 +95,7 @@ const articleParams = computed<ArticleListParams>(() => {
});
const listQuery = useQuery({
queryKey: computed(() => ["articles", "list", "prompt_rule", articleParams.value]),
queryKey: computed(() => ["articles", "list", "custom_generation", articleParams.value]),
queryFn: () => articlesApi.list(articleParams.value),
});
@@ -106,14 +111,13 @@ const deleteMutation = useMutation({
});
const columns = computed<TableColumnsType<ArticleListItem>>(() => [
{ title: t("common.title"), dataIndex: "title", key: "title" },
{ title: t("custom.article.titleColumn"), dataIndex: "title", key: "title", width: 340 },
{ 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" },
{ title: t("common.actions"), key: "actions", width: 120, fixed: "right", align: "right" },
]);
function applyFilters(): void {
@@ -148,6 +152,13 @@ function canEditArticle(status: string): boolean {
return status === "completed" || status === "draft";
}
function getDisplayTitle(article: ArticleListItem): string {
if ((article.generate_status === "generating" || article.generate_status === "running") && !article.title) {
return t("custom.article.titleGenerating");
}
return article.title || t("article.untitled");
}
function handleTableChange(nextPage: number, nextPageSize: number): void {
page.value = nextPage;
pageSize.value = nextPageSize;
@@ -273,9 +284,21 @@ onBeforeUnmount(() => {
>
<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>
<div class="custom-article-tab__title-cell">
<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>
</div>
</template>
<template v-else-if="column.key === 'prompt_rule_name'">
{{ record.prompt_rule_name || "--" }}
@@ -302,28 +325,37 @@ onBeforeUnmount(() => {
<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>
<div class="table-actions-row">
<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="link" size="small" danger>
{{ t("common.delete") }}
<a-button
type="text"
shape="circle"
size="small"
class="action-btn action-delete"
:title="t('common.delete')"
>
<DeleteOutlined />
</a-button>
</a-popconfirm>
</a-space>
</div>
</template>
</template>
</a-table>
@@ -370,12 +402,46 @@ onBeforeUnmount(() => {
}
.custom-article-tab__title-link {
color: #1677ff;
display: inline-block;
color: #434343;
cursor: pointer;
font-size: 15px;
font-weight: 600;
line-height: 1.6;
}
.custom-article-tab__title-link:hover {
text-decoration: underline;
color: #1677ff;
}
.custom-article-tab__title-cell {
display: flex;
flex-direction: column;
gap: 10px;
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 {
apps/admin-web/src/components/GenerateTaskDrawer.vue
+5 -1
View File
@@ -126,6 +126,7 @@ const instantGenerateMutation = useMutation({
target_platform: serializeTargetPlatforms(form.platformIds),
extra_params: {
task_name: form.name.trim(),
generation_mode: "instant",
enable_web_search: form.enableWebSearch,
generate_count: form.generateCount,
target_platforms: form.platformIds,
@@ -135,7 +136,10 @@ const instantGenerateMutation = useMutation({
onSuccess: async () => {
message.success(t("custom.messages.generateSubmitted"));
emit("update:open", false);
await queryClient.invalidateQueries({ queryKey: ["articles"] });
await Promise.all([
queryClient.invalidateQueries({ queryKey: ["articles"] }),
queryClient.invalidateQueries({ queryKey: ["instantTasks"] }),
]);
},
onError: (error) => message.error(formatError(error)),
});
apps/admin-web/src/components/InstantTaskTab.vue
+328
View File
@@ -0,0 +1,328 @@
<script setup lang="ts">
import { LoadingOutlined, EyeOutlined } from "@ant-design/icons-vue";
import { useQuery } from "@tanstack/vue-query";
import { type TableColumnsType } from "ant-design-vue";
import type { InstantTaskItem, InstantTaskListParams } from "@geo/shared-types";
import type { Dayjs } from "dayjs";
import { computed, onBeforeUnmount, reactive, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import ArticleDetailDrawer from "@/components/ArticleDetailDrawer.vue";
import { instantTasksApi, promptRulesApi } from "@/lib/api";
import { formatDateTime, getGenerateStatusMeta } from "@/lib/display";
import { formatPublishPlatformList } from "@/lib/publish-platforms";
const { t } = useI18n();
const page = ref(1);
const pageSize = ref(20);
const createdRange = ref<[Dayjs, Dayjs] | null>(null);
const detailOpen = ref(false);
const selectedArticleId = ref<number | null>(null);
const draftFilters = reactive<{
prompt_rule_id?: number;
status?: string;
keyword?: string;
}>({
keyword: "",
});
const appliedFilters = reactive<{
prompt_rule_id?: number;
status?: string;
keyword?: string;
created_from?: string;
created_to?: string;
}>({
keyword: "",
});
const rulesQuery = useQuery({
queryKey: ["promptRules", "simple"],
queryFn: () => promptRulesApi.listSimple(),
});
const promptOptions = computed(() =>
(rulesQuery.data.value ?? []).map((rule) => ({
label: rule.name,
value: rule.id,
})),
);
const statusOptions = computed(() => [
{ label: getGenerateStatusMeta("queued").label, value: "queued" },
{ label: getGenerateStatusMeta("running").label, value: "running" },
{ label: getGenerateStatusMeta("completed").label, value: "completed" },
{ label: getGenerateStatusMeta("failed").label, value: "failed" },
]);
const listParams = computed<InstantTaskListParams>(() => {
const params: InstantTaskListParams = {
page: page.value,
page_size: pageSize.value,
};
if (appliedFilters.prompt_rule_id) params.prompt_rule_id = appliedFilters.prompt_rule_id;
if (appliedFilters.status) params.status = appliedFilters.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(() => ["instantTasks", "list", listParams.value]),
queryFn: () => instantTasksApi.list(listParams.value),
});
const columns = computed<TableColumnsType<InstantTaskItem>>(() => [
{ title: t("custom.instant.name"), dataIndex: "name", key: "name", width: 220 },
{ title: t("custom.schedule.rule"), dataIndex: "prompt_rule_name", key: "prompt_rule_name", width: 180 },
{ title: t("custom.instant.executionStatus"), dataIndex: "status", key: "status", width: 140 },
{ title: t("custom.instant.executionTime"), dataIndex: "execution_time", key: "execution_time", width: 170 },
{ title: t("custom.schedule.platform"), dataIndex: "platforms", key: "platforms", width: 220 },
{ title: t("custom.task.generateCount"), dataIndex: "generate_count", key: "generate_count", width: 120 },
{ title: t("custom.instant.createdTime"), dataIndex: "created_at", key: "created_at", width: 170 },
{ title: t("common.actions"), key: "actions", width: 88, fixed: "right", align: "right" },
]);
let pollingTimer: number | null = null;
function applyFilters(): void {
page.value = 1;
appliedFilters.prompt_rule_id = draftFilters.prompt_rule_id;
appliedFilters.status = draftFilters.status;
appliedFilters.keyword = draftFilters.keyword?.trim() || "";
appliedFilters.created_from = createdRange.value?.[0]?.startOf("day").toISOString();
appliedFilters.created_to = createdRange.value?.[1]?.endOf("day").toISOString();
}
function resetFilters(): void {
draftFilters.prompt_rule_id = undefined;
draftFilters.status = undefined;
draftFilters.keyword = "";
createdRange.value = null;
applyFilters();
}
function handleTableChange(nextPage: number, nextPageSize: number): void {
page.value = nextPage;
pageSize.value = nextPageSize;
}
function openArticle(task: InstantTaskItem): void {
if (!task.article_id) {
return;
}
selectedArticleId.value = task.article_id;
detailOpen.value = true;
}
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.status === "queued" || item.status === "running");
if (hasActive) {
startPolling();
} else {
stopPolling();
}
},
{ immediate: true },
);
onBeforeUnmount(() => {
stopPolling();
});
</script>
<template>
<div class="task-tab">
<div class="task-tab__filters">
<div class="task-tab__filter">
<label>{{ t("custom.filters.promptRule") }}:</label>
<a-select
v-model:value="draftFilters.prompt_rule_id"
allow-clear
size="large"
:options="promptOptions"
:placeholder="t('custom.task.promptPlaceholder')"
:loading="rulesQuery.isPending.value"
@change="applyFilters"
/>
</div>
<div class="task-tab__filter">
<label>{{ t("custom.filters.status") }}:</label>
<a-select
v-model:value="draftFilters.status"
allow-clear
size="large"
:options="statusOptions"
:placeholder="t('common.selectPlease')"
@change="applyFilters"
/>
</div>
<div class="task-tab__filter task-tab__filter--range">
<label>{{ t("custom.filters.createdTime") }}:</label>
<a-range-picker
v-model:value="createdRange"
allow-clear
size="large"
format="YYYY-MM-DD"
@change="applyFilters"
/>
</div>
<div class="task-tab__filter task-tab__filter--keyword">
<label>{{ t("custom.filters.name") }}:</label>
<a-input-search
v-model:value="draftFilters.keyword"
size="large"
:placeholder="t('custom.filters.namePlaceholder')"
@search="applyFilters"
@pressEnter="applyFilters"
/>
</div>
<div class="task-tab__filter task-tab__filter--action">
<a-button size="large" @click="resetFilters">{{ t("common.reset") }}</a-button>
</div>
</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"
:scroll="{ x: 1280 }"
@change="(p: any) => handleTableChange(p.current, p.pageSize)"
>
<template #emptyText>{{ t("custom.instant.empty") }}</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'prompt_rule_name'">
{{ record.prompt_rule_name || "--" }}
</template>
<template v-else-if="column.key === 'status'">
<a-tag :color="getGenerateStatusMeta(record.status).color">
<span class="task-tab__status">
<LoadingOutlined v-if="record.status === 'queued' || record.status === 'running'" spin />
<span>{{ getGenerateStatusMeta(record.status).label }}</span>
</span>
</a-tag>
</template>
<template v-else-if="column.key === 'execution_time'">
{{ formatDateTime(record.execution_time) }}
</template>
<template v-else-if="column.key === 'platforms'">
{{ formatPublishPlatformList(record.platforms) }}
</template>
<template v-else-if="column.key === 'generate_count'">
{{ record.generate_count || 1 }}
</template>
<template v-else-if="column.key === 'created_at'">
{{ formatDateTime(record.created_at) }}
</template>
<template v-else-if="column.key === 'actions'">
<div class="table-actions-row">
<a-tooltip :title="t('common.preview')">
<span>
<a-button
type="text"
shape="circle"
size="small"
class="action-btn action-eye"
:disabled="!record.article_id"
@click="openArticle(record)"
>
<EyeOutlined />
</a-button>
</span>
</a-tooltip>
</div>
</template>
</template>
</a-table>
<ArticleDetailDrawer
:open="detailOpen"
:article-id="selectedArticleId"
@close="detailOpen = false"
/>
</div>
</template>
<style scoped>
.task-tab__filters {
display: grid;
grid-template-columns: minmax(180px, 240px) minmax(180px, 240px) minmax(240px, 320px) minmax(240px, 1fr) auto;
gap: 16px;
margin-bottom: 18px;
}
.task-tab__filter {
display: flex;
align-items: center;
gap: 12px;
}
.task-tab__filter label {
flex-shrink: 0;
color: #434343;
font-size: 14px;
white-space: nowrap;
}
.task-tab__filter :deep(.ant-select),
.task-tab__filter :deep(.ant-picker),
.task-tab__filter :deep(.ant-input-search) {
width: 100%;
}
.task-tab__filter--action {
justify-content: flex-end;
}
.task-tab__status {
display: inline-flex;
align-items: center;
gap: 4px;
}
@media (max-width: 1400px) {
.task-tab__filters {
grid-template-columns: repeat(2, minmax(260px, 1fr));
}
.task-tab__filter--action {
justify-content: flex-start;
}
}
@media (max-width: 900px) {
.task-tab__filters {
grid-template-columns: 1fr;
}
}
</style>
apps/admin-web/src/components/PromptRuleTab.vue
+43 -17
View File
@@ -2,6 +2,8 @@
import {
DeleteOutlined,
EditOutlined,
PauseCircleOutlined,
PlayCircleOutlined,
PlusOutlined,
} from "@ant-design/icons-vue";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
@@ -59,7 +61,7 @@ const columns = computed<TableColumnsType<PromptRule>>(() => [
{ title: t("custom.promptRule.articleCount"), dataIndex: "article_count", key: "article_count", width: 100 },
{ title: t("custom.promptRule.status"), dataIndex: "status", key: "status", width: 100 },
{ title: t("common.createdAt"), dataIndex: "created_at", key: "created_at", width: 168 },
{ title: t("common.actions"), key: "actions", width: 140, fixed: "right" },
{ title: t("common.actions"), key: "actions", width: 140, fixed: "right", align: "right" },
]);
const groupMutations = {
@@ -252,29 +254,53 @@ watch(selectedGroupId, () => {
{{ formatDateTime(record.created_at) }}
</template>
<template v-else-if="column.key === 'actions'">
<a-space :size="4">
<a-button type="link" size="small" @click="openRuleModal(record)">
{{ t("common.edit") }}
</a-button>
<a-button
type="link"
size="small"
@click="ruleMutations.toggleStatus.mutate({
id: record.id,
status: record.status === 'enabled' ? 'disabled' : 'enabled',
})"
<div class="table-actions-row">
<a-tooltip :title="t('common.edit')">
<a-button
type="text"
shape="circle"
size="small"
class="action-btn action-edit"
@click="openRuleModal(record)"
>
<EditOutlined />
</a-button>
</a-tooltip>
<a-tooltip
:title="record.status === 'enabled' ? t('custom.promptRule.disabled') : t('custom.promptRule.enabled')"
>
{{ record.status === "enabled" ? t("custom.promptRule.disabled") : t("custom.promptRule.enabled") }}
</a-button>
<a-button
type="text"
shape="circle"
size="small"
:class="[
'action-btn',
record.status === 'enabled' ? 'action-disable' : 'action-enable',
]"
@click="ruleMutations.toggleStatus.mutate({
id: record.id,
status: record.status === 'enabled' ? 'disabled' : 'enabled',
})"
>
<PauseCircleOutlined v-if="record.status === 'enabled'" />
<PlayCircleOutlined v-else />
</a-button>
</a-tooltip>
<a-popconfirm
:title="t('custom.promptRule.deleteConfirm')"
@confirm="ruleMutations.remove.mutate(record.id)"
>
<a-button type="link" size="small" danger>
{{ t("common.delete") }}
<a-button
type="text"
shape="circle"
size="small"
class="action-btn action-delete"
:title="t('common.delete')"
>
<DeleteOutlined />
</a-button>
</a-popconfirm>
</a-space>
</div>
</template>
</template>
</a-table>
apps/admin-web/src/components/ScheduleTaskTab.vue
+228 -62
View File
@@ -1,14 +1,20 @@
<script setup lang="ts">
import { PlusOutlined } from "@ant-design/icons-vue";
import {
DeleteOutlined,
EditOutlined,
PauseCircleOutlined,
PlayCircleOutlined,
} from "@ant-design/icons-vue";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import { message, type TableColumnsType } from "ant-design-vue";
import type { ScheduleTask } from "@geo/shared-types";
import { computed, ref } from "vue";
import type { ScheduleTask, ScheduleTaskListParams } from "@geo/shared-types";
import type { Dayjs } from "dayjs";
import { computed, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";
import ScheduleTaskModal from "@/components/ScheduleTaskModal.vue";
import { schedulesApi } from "@/lib/api";
import { formatDateTime } from "@/lib/display";
import { promptRulesApi, schedulesApi } from "@/lib/api";
import { formatCronExecutionTime, formatDateTime } from "@/lib/display";
import { formatError } from "@/lib/errors";
import { formatPublishPlatformSummary } from "@/lib/publish-platforms";
@@ -19,11 +25,55 @@ const modalOpen = ref(false);
const editingTask = ref<ScheduleTask | null>(null);
const page = ref(1);
const pageSize = ref(20);
const createdRange = ref<[Dayjs, Dayjs] | null>(null);
const listParams = computed(() => ({
page: page.value,
page_size: pageSize.value,
}));
const draftFilters = reactive<{
prompt_rule_id?: number;
status?: string;
keyword?: string;
}>({
keyword: "",
});
const appliedFilters = reactive<{
prompt_rule_id?: number;
status?: string;
keyword?: string;
created_from?: string;
created_to?: string;
}>({
keyword: "",
});
const rulesQuery = useQuery({
queryKey: ["promptRules", "simple"],
queryFn: () => promptRulesApi.listSimple(),
});
const promptOptions = computed(() =>
(rulesQuery.data.value ?? []).map((rule) => ({
label: rule.name,
value: rule.id,
})),
);
const statusOptions = computed(() => [
{ label: t("custom.schedule.enabled"), value: "enabled" },
{ label: t("custom.schedule.disabled"), value: "disabled" },
]);
const listParams = computed<ScheduleTaskListParams>(() => {
const params: ScheduleTaskListParams = {
page: page.value,
page_size: pageSize.value,
};
if (appliedFilters.prompt_rule_id) params.prompt_rule_id = appliedFilters.prompt_rule_id;
if (appliedFilters.status) params.status = appliedFilters.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(() => ["schedules", "list", listParams.value]),
@@ -31,15 +81,14 @@ const listQuery = useQuery({
});
const columns = computed<TableColumnsType<ScheduleTask>>(() => [
{ title: t("custom.schedule.name"), dataIndex: "name", key: "name", width: 160 },
{ title: t("custom.schedule.rule"), dataIndex: "prompt_rule_name", key: "prompt_rule_name", width: 140 },
{ title: t("custom.schedule.cron"), dataIndex: "cron_expr", key: "cron_expr", width: 140 },
{ title: t("custom.schedule.platform"), dataIndex: "target_platform", key: "target_platform", width: 120 },
{ title: t("custom.schedule.brand"), dataIndex: "brand_name", key: "brand_name", width: 120 },
{ title: t("custom.schedule.nextRun"), dataIndex: "next_run_at", key: "next_run_at", width: 168 },
{ title: t("custom.promptRule.status"), dataIndex: "status", key: "status", width: 100 },
{ title: t("common.createdAt"), dataIndex: "created_at", key: "created_at", width: 168 },
{ title: t("common.actions"), key: "actions", width: 160, fixed: "right" },
{ title: t("custom.schedule.name"), dataIndex: "name", key: "name", width: 220 },
{ title: t("custom.schedule.rule"), dataIndex: "prompt_rule_name", key: "prompt_rule_name", width: 180 },
{ title: t("custom.instant.executionStatus"), dataIndex: "status", key: "status", width: 140 },
{ title: t("custom.instant.executionTime"), dataIndex: "cron_expr", key: "cron_expr", width: 170 },
{ title: t("custom.schedule.platform"), dataIndex: "target_platform", key: "target_platform", width: 220 },
{ title: t("custom.task.generateCount"), dataIndex: "generate_count", key: "generate_count", width: 120 },
{ title: t("custom.instant.createdTime"), dataIndex: "created_at", key: "created_at", width: 170 },
{ title: t("common.actions"), key: "actions", width: 140, fixed: "right", align: "right" },
]);
const removeMutation = useMutation({
@@ -65,6 +114,23 @@ const toggleStatusMutation = useMutation({
onError: (error) => message.error(formatError(error)),
});
function applyFilters(): void {
page.value = 1;
appliedFilters.prompt_rule_id = draftFilters.prompt_rule_id;
appliedFilters.status = draftFilters.status;
appliedFilters.keyword = draftFilters.keyword?.trim() || "";
appliedFilters.created_from = createdRange.value?.[0]?.startOf("day").toISOString();
appliedFilters.created_to = createdRange.value?.[1]?.endOf("day").toISOString();
}
function resetFilters(): void {
draftFilters.prompt_rule_id = undefined;
draftFilters.status = undefined;
draftFilters.keyword = "";
createdRange.value = null;
applyFilters();
}
function openModal(task?: ScheduleTask): void {
editingTask.value = task ?? null;
modalOpen.value = true;
@@ -77,15 +143,58 @@ function handleTableChange(nextPage: number, nextPageSize: number): void {
</script>
<template>
<div class="schedule-task-tab">
<div class="schedule-task-tab__head">
<span class="schedule-task-tab__count">
{{ t("templates.list.count", { count: listQuery.data.value?.total ?? 0 }) }}
</span>
<a-button type="primary" @click="openModal()">
<template #icon><PlusOutlined /></template>
{{ t("common.create") }}
</a-button>
<div class="task-tab">
<div class="task-tab__filters">
<div class="task-tab__filter">
<label>{{ t("custom.filters.promptRule") }}:</label>
<a-select
v-model:value="draftFilters.prompt_rule_id"
allow-clear
size="large"
:options="promptOptions"
:placeholder="t('custom.task.promptPlaceholder')"
:loading="rulesQuery.isPending.value"
@change="applyFilters"
/>
</div>
<div class="task-tab__filter">
<label>{{ t("custom.filters.status") }}:</label>
<a-select
v-model:value="draftFilters.status"
allow-clear
size="large"
:options="statusOptions"
:placeholder="t('common.selectPlease')"
@change="applyFilters"
/>
</div>
<div class="task-tab__filter task-tab__filter--range">
<label>{{ t("custom.filters.createdTime") }}:</label>
<a-range-picker
v-model:value="createdRange"
allow-clear
size="large"
format="YYYY-MM-DD"
@change="applyFilters"
/>
</div>
<div class="task-tab__filter task-tab__filter--keyword">
<label>{{ t("custom.filters.name") }}:</label>
<a-input-search
v-model:value="draftFilters.keyword"
size="large"
:placeholder="t('custom.filters.namePlaceholder')"
@search="applyFilters"
@pressEnter="applyFilters"
/>
</div>
<div class="task-tab__filter task-tab__filter--action">
<a-button size="large" @click="resetFilters">{{ t("common.reset") }}</a-button>
</div>
</div>
<a-table
@@ -99,55 +208,78 @@ function handleTableChange(nextPage: number, nextPageSize: number): void {
showSizeChanger: true,
}"
row-key="id"
size="small"
:scroll="{ x: 1200 }"
:scroll="{ x: 1360 }"
@change="(p: any) => handleTableChange(p.current, p.pageSize)"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'prompt_rule_name'">
{{ record.prompt_rule_name || "--" }}
</template>
<template v-else-if="column.key === 'target_platform'">
{{ formatPublishPlatformSummary(record.target_platform) }}
</template>
<template v-else-if="column.key === 'brand_name'">
{{ record.brand_name || "--" }}
</template>
<template v-else-if="column.key === 'next_run_at'">
{{ record.next_run_at ? formatDateTime(record.next_run_at) : "--" }}
</template>
<template v-else-if="column.key === 'status'">
<a-tag :color="record.status === 'enabled' ? 'green' : 'default'">
{{ record.status === "enabled" ? t("custom.schedule.enabled") : t("custom.schedule.disabled") }}
</a-tag>
</template>
<template v-else-if="column.key === 'cron_expr'">
{{ formatCronExecutionTime(record.cron_expr) }}
</template>
<template v-else-if="column.key === 'target_platform'">
{{ formatPublishPlatformSummary(record.target_platform) }}
</template>
<template v-else-if="column.key === 'generate_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" @click="openModal(record)">
{{ t("common.edit") }}
</a-button>
<a-button
type="link"
size="small"
@click="toggleStatusMutation.mutate({
id: record.id,
status: record.status === 'enabled' ? 'disabled' : 'enabled',
})"
<div class="table-actions-row">
<a-tooltip :title="t('common.edit')">
<a-button
type="text"
shape="circle"
size="small"
class="action-btn action-edit"
@click="openModal(record)"
>
<EditOutlined />
</a-button>
</a-tooltip>
<a-tooltip
:title="record.status === 'enabled' ? t('custom.schedule.disabled') : t('custom.schedule.enabled')"
>
{{ record.status === "enabled" ? t("custom.schedule.disabled") : t("custom.schedule.enabled") }}
</a-button>
<a-button
type="text"
shape="circle"
size="small"
:class="[
'action-btn',
record.status === 'enabled' ? 'action-disable' : 'action-enable',
]"
@click="toggleStatusMutation.mutate({
id: record.id,
status: record.status === 'enabled' ? 'disabled' : 'enabled',
})"
>
<PauseCircleOutlined v-if="record.status === 'enabled'" />
<PlayCircleOutlined v-else />
</a-button>
</a-tooltip>
<a-popconfirm
:title="t('custom.schedule.deleteConfirm')"
@confirm="removeMutation.mutate(record.id)"
>
<a-button type="link" size="small" danger>
{{ t("common.delete") }}
<a-button
type="text"
shape="circle"
size="small"
class="action-btn action-delete"
:title="t('common.delete')"
>
<DeleteOutlined />
</a-button>
</a-popconfirm>
</a-space>
</div>
</template>
</template>
</a-table>
@@ -157,15 +289,49 @@ function handleTableChange(nextPage: number, nextPageSize: number): void {
</template>
<style scoped>
.schedule-task-tab__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
.task-tab__filters {
display: grid;
grid-template-columns: minmax(180px, 240px) minmax(180px, 240px) minmax(240px, 320px) minmax(240px, 1fr) auto;
gap: 16px;
margin-bottom: 18px;
}
.schedule-task-tab__count {
font-size: 13px;
color: #8c8c8c;
.task-tab__filter {
display: flex;
align-items: center;
gap: 12px;
}
.task-tab__filter label {
flex-shrink: 0;
color: #434343;
font-size: 14px;
white-space: nowrap;
}
.task-tab__filter :deep(.ant-select),
.task-tab__filter :deep(.ant-picker),
.task-tab__filter :deep(.ant-input-search) {
width: 100%;
}
.task-tab__filter--action {
justify-content: flex-end;
}
@media (max-width: 1400px) {
.task-tab__filters {
grid-template-columns: repeat(2, minmax(260px, 1fr));
}
.task-tab__filter--action {
justify-content: flex-start;
}
}
@media (max-width: 900px) {
.task-tab__filters {
grid-template-columns: 1fr;
}
}
</style>