fix: Enhance Kol Variable Rendering and Management
- Updated the regex for placeholder matching to support more flexible key formats. - Refactored variable storage to allow both ID and key lookups in rendering. - Improved schema validation to check for duplicate keys and enforce non-empty keys. - Added new utility functions for variable value lookup and display name generation. - Enhanced tests to cover new key-based variable scenarios. - Refactored KolPrompt repository to simplify prompt storage and management, including the removal of obsolete revision handling. - Introduced new API endpoints for saving, activating, and archiving prompts. - Added new utility functions for handling Kol placeholders and platform options in the admin web. - Implemented database migrations to simplify prompt storage structure and ensure data integrity.
This commit is contained in:
@@ -1,22 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { computed, nextTick, reactive, ref, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
|
||||
import { message } from "ant-design-vue";
|
||||
import { SaveOutlined, SendOutlined, EyeOutlined } from "@ant-design/icons-vue";
|
||||
import { LeftOutlined, SaveOutlined, SendOutlined, EyeOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import KolVariablePanel from "./KolVariablePanel.vue";
|
||||
import KolVariableConfig from "./KolVariableConfig.vue";
|
||||
import KolPromptEditArea from "./KolPromptEditArea.vue";
|
||||
import KolDynamicForm from "./KolDynamicForm.vue";
|
||||
import { kolManageApi } from "@/lib/api";
|
||||
import type { KolVariableDefinition, KolSchemaJson } from "@geo/shared-types";
|
||||
import type { KolVariableDefinition } from "@geo/shared-types";
|
||||
import { formatError } from "@/lib/errors";
|
||||
import { buildKolPlatformOptions } from "@/lib/kol-platform-options";
|
||||
import { syncKolVariablesWithContent } from "@/lib/kol-placeholders";
|
||||
|
||||
const props = defineProps<{
|
||||
promptId: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
back: [];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
@@ -25,16 +31,32 @@ const variables = ref<KolVariableDefinition[]>([]);
|
||||
const previewOpen = ref(false);
|
||||
const previewValues = ref<Record<string, any>>({});
|
||||
const aiTaskId = ref<string | null>(null);
|
||||
const variableConfigRef = ref<{ focusVariable: (key: string) => void } | null>(null);
|
||||
const metadataForm = reactive({
|
||||
name: "",
|
||||
platform_hint: "通用",
|
||||
});
|
||||
|
||||
const { data: promptDetail, isPending } = useQuery({
|
||||
const { data: promptDetail } = useQuery({
|
||||
queryKey: computed(() => ["kol", "prompt", props.promptId]),
|
||||
queryFn: () => kolManageApi.getPrompt(props.promptId),
|
||||
});
|
||||
|
||||
const platformOptions = computed(() => {
|
||||
const options = buildKolPlatformOptions(t("kol.manage.platformHintDefault"));
|
||||
const currentValue = metadataForm.platform_hint.trim();
|
||||
if (currentValue && !options.some((option) => option.value === currentValue)) {
|
||||
return [{ label: currentValue, value: currentValue }, ...options];
|
||||
}
|
||||
return options;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => promptDetail.value,
|
||||
(detail) => {
|
||||
if (detail) {
|
||||
metadataForm.name = detail.name;
|
||||
metadataForm.platform_hint = detail.platform_hint || "通用";
|
||||
content.value = detail.latest_prompt_content ?? "";
|
||||
variables.value = detail.latest_schema_json?.variables ?? [];
|
||||
}
|
||||
@@ -42,27 +64,24 @@ watch(
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const saveDraftMutation = useMutation({
|
||||
mutationFn: (data: { content: string; variables: KolVariableDefinition[] }) =>
|
||||
kolManageApi.saveDraft(props.promptId, {
|
||||
content: data.content,
|
||||
schema: { variables: data.variables },
|
||||
card_config: {},
|
||||
}),
|
||||
const publishMutation = useMutation({
|
||||
mutationFn: (payload: ReturnType<typeof buildPromptPayload>) =>
|
||||
kolManageApi.publishPrompt(props.promptId, payload),
|
||||
onSuccess: () => {
|
||||
message.success(t("common.save") + "成功");
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "prompt", props.promptId] });
|
||||
message.success(t("kol.manage.editor.publish") + "成功");
|
||||
invalidatePromptQueries();
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error));
|
||||
},
|
||||
});
|
||||
|
||||
const publishMutation = useMutation({
|
||||
mutationFn: () => kolManageApi.publishPrompt(props.promptId),
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: (payload: ReturnType<typeof buildPromptPayload>) =>
|
||||
kolManageApi.savePrompt(props.promptId, payload),
|
||||
onSuccess: () => {
|
||||
message.success(t("kol.manage.editor.publish") + "成功");
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "prompt", props.promptId] });
|
||||
message.success(t("common.save") + "成功");
|
||||
invalidatePromptQueries();
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error));
|
||||
@@ -84,7 +103,7 @@ watch(
|
||||
(task) => {
|
||||
if (task?.status === "completed" && task.result) {
|
||||
content.value = task.result.content;
|
||||
variables.value = task.result.schema.variables;
|
||||
variables.value = syncKolVariablesWithContent(task.result.content, task.result.schema.variables);
|
||||
aiTaskId.value = null;
|
||||
message.success("AI 处理完成");
|
||||
} else if (task?.status === "failed") {
|
||||
@@ -109,10 +128,11 @@ async function handleAiGenerate(description: string) {
|
||||
|
||||
async function handleAiOptimize() {
|
||||
try {
|
||||
const syncedVariables = syncVariablesFromContent();
|
||||
const res = await kolManageApi.submitAssist({
|
||||
mode: "optimize",
|
||||
current_content: content.value,
|
||||
schema: { variables: variables.value },
|
||||
schema: { variables: syncedVariables },
|
||||
prompt_id: props.promptId,
|
||||
});
|
||||
aiTaskId.value = res.task_id;
|
||||
@@ -121,34 +141,126 @@ async function handleAiOptimize() {
|
||||
}
|
||||
}
|
||||
|
||||
function buildPromptPayload(nextVariables: KolVariableDefinition[] = variables.value) {
|
||||
return {
|
||||
name: metadataForm.name.trim(),
|
||||
platform_hint: metadataForm.platform_hint,
|
||||
sort_order: promptDetail.value?.sort_order,
|
||||
content: content.value,
|
||||
schema: { variables: nextVariables },
|
||||
card_config: {},
|
||||
};
|
||||
}
|
||||
|
||||
function syncVariablesFromContent(): KolVariableDefinition[] {
|
||||
const syncedVariables = syncKolVariablesWithContent(content.value, variables.value);
|
||||
variables.value = syncedVariables;
|
||||
return syncedVariables;
|
||||
}
|
||||
|
||||
function buildPreviewValues(nextVariables: KolVariableDefinition[]): Record<string, any> {
|
||||
const nextValues: Record<string, any> = {};
|
||||
|
||||
nextVariables.forEach((variable) => {
|
||||
const fieldKey = variable.key?.trim() || variable.id;
|
||||
nextValues[fieldKey] = variable.type === "checkbox" ? [] : undefined;
|
||||
});
|
||||
|
||||
return nextValues;
|
||||
}
|
||||
|
||||
function invalidatePromptQueries() {
|
||||
void queryClient.invalidateQueries({ queryKey: ["kol", "prompt", props.promptId] });
|
||||
void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
|
||||
void queryClient.invalidateQueries({
|
||||
queryKey: ["kol", "packages", promptDetail.value?.package_id, "prompts"],
|
||||
});
|
||||
}
|
||||
|
||||
function validateBeforeSubmit(): boolean {
|
||||
if (!metadataForm.name.trim()) {
|
||||
message.warning(t("common.inputPlease") + t("common.title"));
|
||||
return false;
|
||||
}
|
||||
if (!content.value.trim()) {
|
||||
message.warning("请输入提示词内容");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
saveDraftMutation.mutate({ content: content.value, variables: variables.value });
|
||||
const syncedVariables = syncVariablesFromContent();
|
||||
if (!validateBeforeSubmit()) {
|
||||
return;
|
||||
}
|
||||
saveMutation.mutate(buildPromptPayload(syncedVariables));
|
||||
}
|
||||
|
||||
function handlePublish() {
|
||||
publishMutation.mutate();
|
||||
const syncedVariables = syncVariablesFromContent();
|
||||
if (!validateBeforeSubmit()) {
|
||||
return;
|
||||
}
|
||||
publishMutation.mutate(buildPromptPayload(syncedVariables));
|
||||
}
|
||||
|
||||
function handlePreview() {
|
||||
previewValues.value = {};
|
||||
const syncedVariables = syncVariablesFromContent();
|
||||
previewValues.value = buildPreviewValues(syncedVariables);
|
||||
previewOpen.value = true;
|
||||
}
|
||||
|
||||
async function handleFocusVariable(key: string) {
|
||||
syncVariablesFromContent();
|
||||
await nextTick();
|
||||
variableConfigRef.value?.focusVariable(key);
|
||||
}
|
||||
|
||||
function getSelectPopupContainer(triggerNode: HTMLElement) {
|
||||
return triggerNode.parentElement ?? triggerNode;
|
||||
}
|
||||
|
||||
function statusTagColor(status?: string): string {
|
||||
if (status === "active") return "green";
|
||||
if (status === "archived") return "orange";
|
||||
return "default";
|
||||
}
|
||||
|
||||
function statusLabel(status?: string): string {
|
||||
if (status === "active") return t("kol.manage.status.active");
|
||||
if (status === "archived") return t("kol.manage.status.archived");
|
||||
return t("kol.manage.status.draft");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kol-prompt-editor">
|
||||
<div class="editor-topbar">
|
||||
<button class="back-btn" type="button" @click="emit('back')">
|
||||
<LeftOutlined />
|
||||
<span>{{ t("common.back") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="editor-header">
|
||||
<div class="header-title">
|
||||
<span class="prompt-name">{{ promptDetail?.name || 'Loading...' }}</span>
|
||||
<div class="title-row">
|
||||
<span class="prompt-name">{{ metadataForm.name || promptDetail?.name || t("common.loading") }}</span>
|
||||
<a-tag v-if="promptDetail" :color="statusTagColor(promptDetail.status)">
|
||||
{{ statusLabel(promptDetail.status) }}
|
||||
</a-tag>
|
||||
</div>
|
||||
<span class="prompt-subtitle">{{ t("kol.manage.editor.basicInfo") }}</span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a-button @click="handlePreview">
|
||||
<template #icon><EyeOutlined /></template>
|
||||
{{ t('kol.manage.editor.preview') }}
|
||||
</a-button>
|
||||
<a-button :loading="saveDraftMutation.isPending.value" @click="handleSave">
|
||||
<a-button :loading="saveMutation.isPending.value" @click="handleSave">
|
||||
<template #icon><SaveOutlined /></template>
|
||||
{{ t('kol.manage.editor.saveDraft') }}
|
||||
{{ t('common.save') }}
|
||||
</a-button>
|
||||
<a-button type="primary" :loading="publishMutation.isPending.value" @click="handlePublish">
|
||||
<template #icon><SendOutlined /></template>
|
||||
@@ -157,6 +269,28 @@ function handlePreview() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-meta-card">
|
||||
<div class="editor-section-title">{{ t("kol.manage.editor.basicInfo") }}</div>
|
||||
<a-form layout="vertical" class="editor-meta-form">
|
||||
<a-form-item :label="t('common.title')" required>
|
||||
<a-input
|
||||
v-model:value="metadataForm.name"
|
||||
:placeholder="t('common.inputPlease') + t('common.title')"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('kol.manage.platformHint')">
|
||||
<a-select
|
||||
v-model:value="metadataForm.platform_hint"
|
||||
:options="platformOptions"
|
||||
option-filter-prop="label"
|
||||
show-search
|
||||
:get-popup-container="getSelectPopupContainer"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="editor-body">
|
||||
<KolVariablePanel />
|
||||
<KolPromptEditArea
|
||||
@@ -165,8 +299,12 @@ function handlePreview() {
|
||||
:ai-task-id="aiTaskId"
|
||||
@ai-generate="handleAiGenerate"
|
||||
@ai-optimize="handleAiOptimize"
|
||||
@focus-variable="handleFocusVariable"
|
||||
/>
|
||||
<KolVariableConfig
|
||||
ref="variableConfigRef"
|
||||
v-model:variables="variables"
|
||||
/>
|
||||
<KolVariableConfig v-model:variables="variables" />
|
||||
</div>
|
||||
|
||||
<a-modal
|
||||
@@ -190,30 +328,133 @@ function handlePreview() {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-topbar {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #111827;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.back-btn :deep(.anticon) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border: 1px solid rgba(144, 157, 181, 0.24);
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
margin: 0 16px;
|
||||
padding: 16px 20px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.prompt-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.prompt-subtitle {
|
||||
font-size: 13px;
|
||||
color: #667085;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.editor-meta-card {
|
||||
margin: 12px 16px 0;
|
||||
padding: 16px 20px 4px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.editor-section-title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.editor-meta-form {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 1.4fr) minmax(200px, 1fr);
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.editor-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin: 12px 16px 16px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 16px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.editor-meta-form {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.editor-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.editor-meta-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.editor-body {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user