feat(kol): three-pane prompt editor + KolManageView UI
This commit is contained in:
@@ -0,0 +1,378 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||
import { message, Modal } from "ant-design-vue";
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
CloudUploadOutlined,
|
||||
InboxOutlined,
|
||||
DeleteOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
|
||||
import PageHero from "@/components/PageHero.vue";
|
||||
import KolPackageFormModal from "@/components/kol/KolPackageFormModal.vue";
|
||||
import KolPromptFormModal from "@/components/kol/KolPromptFormModal.vue";
|
||||
import KolPromptEditor from "@/components/kol/KolPromptEditor.vue";
|
||||
import { kolManageApi } from "@/lib/api";
|
||||
import { formatError } from "@/lib/errors";
|
||||
import type { CreateKolPackageRequest, CreateKolPromptRequest, KolPackageSummary } from "@geo/shared-types";
|
||||
|
||||
const { t } = useI18n();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const selectedPackageId = ref<number | null>(null);
|
||||
const packageModalOpen = ref(false);
|
||||
const editingPackage = ref<KolPackageSummary | null>(null);
|
||||
const promptModalOpen = ref(false);
|
||||
const editorDrawerOpen = ref(false);
|
||||
const editingPromptId = ref<number | null>(null);
|
||||
|
||||
const { data: packages, isPending: packagesPending } = useQuery({
|
||||
queryKey: ["kol", "packages"],
|
||||
queryFn: () => kolManageApi.listPackages(),
|
||||
});
|
||||
|
||||
const { data: prompts, isPending: promptsPending } = useQuery({
|
||||
queryKey: computed(() => ["kol", "packages", selectedPackageId.value, "prompts"]),
|
||||
queryFn: () => kolManageApi.listPrompts(selectedPackageId.value!),
|
||||
enabled: computed(() => !!selectedPackageId.value),
|
||||
});
|
||||
|
||||
const createPackageMutation = useMutation({
|
||||
mutationFn: (body: CreateKolPackageRequest) => kolManageApi.createPackage(body),
|
||||
onSuccess: () => {
|
||||
message.success(t("common.create") + "成功");
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
},
|
||||
onError: (error) => message.error(formatError(error)),
|
||||
});
|
||||
|
||||
const updatePackageMutation = useMutation({
|
||||
mutationFn: (data: { id: number; body: CreateKolPackageRequest }) =>
|
||||
kolManageApi.updatePackage(data.id, data.body),
|
||||
onSuccess: () => {
|
||||
message.success(t("common.edit") + "成功");
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
},
|
||||
onError: (error) => message.error(formatError(error)),
|
||||
});
|
||||
|
||||
const publishPackageMutation = useMutation({
|
||||
mutationFn: (id: number) => kolManageApi.publishPackage(id),
|
||||
onSuccess: () => {
|
||||
message.success(t("kol.manage.publishPackage") + "成功");
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
},
|
||||
});
|
||||
|
||||
const archivePackageMutation = useMutation({
|
||||
mutationFn: (id: number) => kolManageApi.archivePackage(id),
|
||||
onSuccess: () => {
|
||||
message.success(t("kol.manage.archivePackage") + "成功");
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
},
|
||||
});
|
||||
|
||||
const deletePackageMutation = useMutation({
|
||||
mutationFn: (id: number) => kolManageApi.deletePackage(id),
|
||||
onSuccess: () => {
|
||||
message.success(t("common.delete") + "成功");
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
if (selectedPackageId.value === selectedPackageId.value) {
|
||||
selectedPackageId.value = null;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const createPromptMutation = useMutation({
|
||||
mutationFn: (body: CreateKolPromptRequest) =>
|
||||
kolManageApi.createPrompt(selectedPackageId.value!, body),
|
||||
onSuccess: () => {
|
||||
message.success(t("kol.manage.createPrompt") + "成功");
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["kol", "packages", selectedPackageId.value, "prompts"],
|
||||
});
|
||||
},
|
||||
onError: (error) => message.error(formatError(error)),
|
||||
});
|
||||
const packageInitialValue = computed<Partial<CreateKolPackageRequest> | undefined>(() => {
|
||||
if (!editingPackage.value) return undefined;
|
||||
return {
|
||||
name: editingPackage.value.name,
|
||||
description: editingPackage.value.description ?? undefined,
|
||||
industry: editingPackage.value.industry ?? undefined,
|
||||
tags: editingPackage.value.tags,
|
||||
price_note: editingPackage.value.price_note ?? undefined,
|
||||
cover_url: editingPackage.value.cover_url ?? undefined,
|
||||
};
|
||||
});
|
||||
|
||||
function handleCreatePackage() {
|
||||
editingPackage.value = null;
|
||||
packageModalOpen.value = true;
|
||||
}
|
||||
|
||||
function handleEditPackage(pkg: KolPackageSummary) {
|
||||
editingPackage.value = pkg;
|
||||
packageModalOpen.value = true;
|
||||
}
|
||||
|
||||
function handlePackageSubmit(body: CreateKolPackageRequest) {
|
||||
if (editingPackage.value) {
|
||||
updatePackageMutation.mutate({ id: editingPackage.value.id, body });
|
||||
} else {
|
||||
createPackageMutation.mutate(body);
|
||||
}
|
||||
}
|
||||
|
||||
function handleDeletePackage(id: number) {
|
||||
Modal.confirm({
|
||||
title: t("common.delete") + "?",
|
||||
content: "确定要删除这个订阅包吗？",
|
||||
onOk: () => deletePackageMutation.mutate(id),
|
||||
});
|
||||
}
|
||||
|
||||
function handleOpenEditor(promptId: number) {
|
||||
editingPromptId.value = promptId;
|
||||
editorDrawerOpen.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kol-manage-view">
|
||||
<PageHero
|
||||
:title="t('kol.manage.title')"
|
||||
:description="t('route.tracking.description')"
|
||||
/>
|
||||
|
||||
<div class="manage-content">
|
||||
...
|
||||
<KolPackageFormModal
|
||||
v-model:open="packageModalOpen"
|
||||
:initial-value="packageInitialValue"
|
||||
@submit="handlePackageSubmit"
|
||||
/>
|
||||
<a-button type="primary" size="small" @click="handleCreatePackage">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t('kol.manage.createPackage') }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<a-list
|
||||
class="package-list"
|
||||
:loading="packagesPending"
|
||||
:data-source="packages"
|
||||
size="small"
|
||||
>
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item
|
||||
:class="{ 'is-selected': selectedPackageId === item.id }"
|
||||
@click="selectedPackageId = item.id"
|
||||
>
|
||||
<div class="package-item-content">
|
||||
<div class="package-name">{{ item.name }}</div>
|
||||
<div class="package-meta">
|
||||
<a-tag :color="item.status === 'published' ? 'green' : 'orange'" size="small">
|
||||
{{ item.status }}
|
||||
</a-tag>
|
||||
<span>{{ item.prompt_count }} Prompts</span>
|
||||
</div>
|
||||
</div>
|
||||
<template #actions>
|
||||
<a-dropdown>
|
||||
<a class="ant-dropdown-link" @click.prevent>...</a>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="handleEditPackage(item)">
|
||||
<EditOutlined /> {{ t('common.edit') }}
|
||||
</a-menu-item>
|
||||
<a-menu-item
|
||||
v-if="item.status !== 'published'"
|
||||
@click="publishPackageMutation.mutate(item.id)"
|
||||
>
|
||||
<CloudUploadOutlined /> {{ t('kol.manage.publishPackage') }}
|
||||
</a-menu-item>
|
||||
<a-menu-item
|
||||
v-if="item.status === 'published'"
|
||||
@click="archivePackageMutation.mutate(item.id)"
|
||||
>
|
||||
<InboxOutlined /> {{ t('kol.manage.archivePackage') }}
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item danger @click="handleDeletePackage(item.id)">
|
||||
<DeleteOutlined /> {{ t('common.delete') }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Prompts -->
|
||||
<div class="prompt-column">
|
||||
<template v-if="selectedPackageId">
|
||||
<div class="column-header">
|
||||
<h3>Prompts</h3>
|
||||
<a-button type="primary" size="small" @click="promptModalOpen = true">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t('kol.manage.createPrompt') }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
:columns="[
|
||||
{ title: t('common.title'), dataIndex: 'name', key: 'name' },
|
||||
{ title: 'Platform', dataIndex: 'platform_hint', key: 'platform_hint' },
|
||||
{ title: t('common.status'), dataIndex: 'status', key: 'status' },
|
||||
{ title: t('common.actions'), key: 'actions', align: 'right' },
|
||||
]"
|
||||
:data-source="prompts"
|
||||
:loading="promptsPending"
|
||||
size="small"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'platform_hint'">
|
||||
<a-tag color="blue">{{ record.platform_hint || '通用' }}</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 'active' ? 'green' : 'orange'">
|
||||
{{ record.status }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'actions'">
|
||||
<a-button type="link" size="small" @click="handleOpenEditor(record.id)">
|
||||
{{ t('common.edit') }}
|
||||
</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
<div v-else class="empty-prompts">
|
||||
<a-empty description="请选择左侧订阅包以查看 Prompt" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<KolPackageFormModal
|
||||
v-model:open="packageModalOpen"
|
||||
:initial-value="packageInitialValue"
|
||||
@submit="handlePackageSubmit"
|
||||
/>
|
||||
|
||||
<KolPromptFormModal
|
||||
v-model:open="promptModalOpen"
|
||||
:package-id="selectedPackageId || 0"
|
||||
@submit="createPromptMutation.mutate"
|
||||
/>
|
||||
|
||||
<a-drawer
|
||||
v-model:open="editorDrawerOpen"
|
||||
width="90vw"
|
||||
:closable="true"
|
||||
:destroy-on-close="true"
|
||||
class="editor-drawer"
|
||||
>
|
||||
<KolPromptEditor v-if="editingPromptId" :prompt-id="editingPromptId" />
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kol-manage-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.manage-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.package-column {
|
||||
width: 320px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.prompt-column {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.column-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.package-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.package-item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.package-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.package-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.ant-list-item.is-selected {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
.ant-list-item {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.ant-list-item:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.empty-prompts {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.editor-drawer :deep(.ant-drawer-body) {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user