root
490c6c759d
Replace the freeform `platforms` field on articles/tasks (parsed out of wizard_state/input_params JSON) with `auto_publish_platforms`, resolved by joining schedule publish accounts to platform_accounts. The migration strips the legacy keys from existing rows so the new field is the single source of truth. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
344 lines
11 KiB
Vue
344 lines
11 KiB
Vue
<script setup lang="ts">
|
|
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, 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 { promptRulesApi, schedulesApi } from "@/lib/api";
|
|
import { formatCronExecutionTime, formatDateTime } from "@/lib/display";
|
|
import { formatError } from "@/lib/errors";
|
|
import { formatPublishPlatformList } from "@/lib/publish-platforms";
|
|
|
|
const queryClient = useQueryClient();
|
|
const { t } = useI18n();
|
|
|
|
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 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]),
|
|
queryFn: () => schedulesApi.list(listParams.value),
|
|
});
|
|
|
|
const columns = computed<TableColumnsType<ScheduleTask>>(() => [
|
|
{ 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.autoPublishPlatforms"), dataIndex: "auto_publish_platforms", key: "auto_publish_platforms", width: 200 },
|
|
{ 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({
|
|
mutationFn: (id: number) => schedulesApi.remove(id),
|
|
onSuccess: async () => {
|
|
message.success(t("custom.messages.scheduleDeleted"));
|
|
await queryClient.invalidateQueries({ queryKey: ["schedules"] });
|
|
},
|
|
onError: (error) => message.error(formatError(error)),
|
|
});
|
|
|
|
const toggleStatusMutation = useMutation({
|
|
mutationFn: ({ id, status }: { id: number; status: "enabled" | "disabled" }) =>
|
|
schedulesApi.toggleStatus(id, { status }),
|
|
onSuccess: async (_data, variables) => {
|
|
message.success(
|
|
variables.status === "enabled"
|
|
? t("custom.messages.scheduleEnabled")
|
|
: t("custom.messages.scheduleDisabled"),
|
|
);
|
|
await queryClient.invalidateQueries({ queryKey: ["schedules"] });
|
|
},
|
|
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;
|
|
}
|
|
|
|
function handleTableChange(nextPage: number, nextPageSize: number): void {
|
|
page.value = nextPage;
|
|
pageSize.value = nextPageSize;
|
|
}
|
|
</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: 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 === '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 === 'auto_publish_platforms'">
|
|
<a-tag :color="record.auto_publish ? 'blue' : 'default'">
|
|
{{
|
|
record.auto_publish
|
|
? formatPublishPlatformList(record.auto_publish_platforms)
|
|
: t("custom.schedule.manualPublish")
|
|
}}
|
|
</a-tag>
|
|
</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.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')"
|
|
>
|
|
<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="text"
|
|
shape="circle"
|
|
size="small"
|
|
class="action-btn action-delete"
|
|
:title="t('common.delete')"
|
|
>
|
|
<DeleteOutlined />
|
|
</a-button>
|
|
</a-popconfirm>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
|
|
<ScheduleTaskModal v-model:open="modalOpen" :task="editingTask" />
|
|
</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;
|
|
}
|
|
|
|
@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>
|