feat(kol): three-pane prompt editor + KolManageView UI
This commit is contained in:
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import type { KolVariableDefinition } from "@geo/shared-types";
|
||||
import { computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
variables: KolVariableDefinition[];
|
||||
modelValue: Record<string, any>;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "update:modelValue", value: Record<string, any>): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const formModel = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit("update:modelValue", val),
|
||||
});
|
||||
|
||||
function updateField(key: string, value: any) {
|
||||
const next = { ...props.modelValue, [key]: value };
|
||||
emit("update:modelValue", next);
|
||||
}
|
||||
|
||||
const selectOptions = (variable: KolVariableDefinition) => {
|
||||
return (variable.options || []).map(opt => ({ label: opt, value: opt }));
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-form layout="vertical" class="kol-dynamic-form">
|
||||
<a-form-item
|
||||
v-for="variable in variables"
|
||||
:key="variable.id"
|
||||
:label="variable.label"
|
||||
:required="variable.required"
|
||||
>
|
||||
<template v-if="variable.type === 'input'">
|
||||
<a-input
|
||||
:value="modelValue[variable.key]"
|
||||
:placeholder="variable.placeholder || t('common.inputPlease')"
|
||||
@update:value="(val: string) => updateField(variable.key, val)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else-if="variable.type === 'textarea'">
|
||||
<a-textarea
|
||||
:value="modelValue[variable.key]"
|
||||
:placeholder="variable.placeholder || t('common.inputPlease')"
|
||||
:rows="4"
|
||||
@update:value="(val: string) => updateField(variable.key, val)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else-if="variable.type === 'select'">
|
||||
<a-select
|
||||
:value="modelValue[variable.key]"
|
||||
:placeholder="variable.placeholder || t('common.selectPlease')"
|
||||
:options="selectOptions(variable)"
|
||||
@update:value="(val: string) => updateField(variable.key, val)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else-if="variable.type === 'number'">
|
||||
<a-input-number
|
||||
:value="modelValue[variable.key]"
|
||||
:placeholder="variable.placeholder"
|
||||
style="width: 100%"
|
||||
@update:value="(val: number) => updateField(variable.key, val)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else-if="variable.type === 'checkbox'">
|
||||
<a-checkbox-group
|
||||
:value="modelValue[variable.key] || []"
|
||||
:options="selectOptions(variable)"
|
||||
@update:value="(val: string[]) => updateField(variable.key, val)"
|
||||
/>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kol-dynamic-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { CreateKolPackageRequest } from "@geo/shared-types";
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean;
|
||||
initialValue?: Partial<CreateKolPackageRequest>;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "update:open", value: boolean): void;
|
||||
(e: "submit", value: CreateKolPackageRequest): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const formState = reactive<CreateKolPackageRequest>({
|
||||
name: "",
|
||||
description: "",
|
||||
industry: "",
|
||||
tags: [],
|
||||
price_note: "",
|
||||
cover_url: "",
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(isOpen) => {
|
||||
if (isOpen) {
|
||||
Object.assign(formState, {
|
||||
name: props.initialValue?.name || "",
|
||||
description: props.initialValue?.description || "",
|
||||
industry: props.initialValue?.industry || "",
|
||||
tags: props.initialValue?.tags || [],
|
||||
price_note: props.initialValue?.price_note || "",
|
||||
cover_url: props.initialValue?.cover_url || "",
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function handleOk() {
|
||||
if (!formState.name.trim()) return;
|
||||
emit("submit", { ...formState });
|
||||
emit("update:open", false);
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
emit("update:open", false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-modal
|
||||
:open="open"
|
||||
:title="initialValue ? t('kol.manage.editPackage') : t('kol.manage.createPackage')"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item :label="t('common.title')" required>
|
||||
<a-input v-model:value="formState.name" :placeholder="t('common.inputPlease')" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('common.description')">
|
||||
<a-textarea v-model:value="formState.description" :rows="3" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('kol.marketplace.filter.industry')">
|
||||
<a-input v-model:value="formState.industry" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="Tags">
|
||||
<a-select v-model:value="formState.tags" mode="tags" style="width: 100%" placeholder="Add tags" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="Price Note">
|
||||
<a-input v-model:value="formState.price_note" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="Cover URL">
|
||||
<a-input v-model:value="formState.cover_url" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
@@ -0,0 +1,211 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ExperimentOutlined, ThunderboltOutlined, LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import type { KolVariableDefinition, KolVariableType } from "@geo/shared-types";
|
||||
import { newVariableId } from "@/lib/kol-variable-id";
|
||||
import { Modal } from "ant-design-vue";
|
||||
|
||||
const props = defineProps<{
|
||||
content: string;
|
||||
variables: KolVariableDefinition[];
|
||||
aiTaskId: string | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "update:content", value: string): void;
|
||||
(e: "update:variables", value: KolVariableDefinition[]): void;
|
||||
(e: "ai-generate", description: string): void;
|
||||
(e: "ai-optimize"): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const aiDescription = ref("");
|
||||
const textareaRef = ref<HTMLTextAreaElement | null>(null);
|
||||
|
||||
function onDrop(event: DragEvent) {
|
||||
event.preventDefault();
|
||||
const type = event.dataTransfer?.getData("application/kol-variable-type") as KolVariableType;
|
||||
if (!type) return;
|
||||
|
||||
Modal.confirm({
|
||||
title: t("kol.manage.variable.label"),
|
||||
content: () => {
|
||||
return h("div", { style: { marginTop: "16px" } }, [
|
||||
h("input", {
|
||||
class: "ant-input",
|
||||
placeholder: t("common.inputPlease"),
|
||||
onInput: (e: Event) => {
|
||||
(Modal.confirm as any).labelValue = (e.target as HTMLInputElement).value;
|
||||
},
|
||||
}),
|
||||
]);
|
||||
},
|
||||
onOk: () => {
|
||||
const label = (Modal.confirm as any).labelValue || t(`kol.manage.variable.${type}`);
|
||||
const id = newVariableId();
|
||||
const key = label;
|
||||
|
||||
const newVar: KolVariableDefinition = {
|
||||
id,
|
||||
key,
|
||||
label,
|
||||
type,
|
||||
required: true,
|
||||
};
|
||||
|
||||
emit("update:variables", [...props.variables, newVar]);
|
||||
insertToken(`{{${key}}}`);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Helper to use 'h' since we are in script setup
|
||||
import { h } from "vue";
|
||||
|
||||
function insertToken(token: string) {
|
||||
if (!textareaRef.value) return;
|
||||
|
||||
const el = textareaRef.value;
|
||||
const start = el.selectionStart;
|
||||
const end = el.selectionEnd;
|
||||
const text = props.content;
|
||||
|
||||
const newContent = text.substring(0, start) + token + text.substring(end);
|
||||
emit("update:content", newContent);
|
||||
|
||||
// Set cursor position after update
|
||||
setTimeout(() => {
|
||||
el.focus();
|
||||
el.setSelectionRange(start + token.length, start + token.length);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function handleAiGenerate() {
|
||||
if (!aiDescription.value.trim()) return;
|
||||
emit("ai-generate", aiDescription.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kol-prompt-edit-area" @dragover.prevent @drop="onDrop">
|
||||
<div class="ai-assist-bar">
|
||||
<a-input
|
||||
v-model:value="aiDescription"
|
||||
class="ai-input"
|
||||
:placeholder="t('kol.manage.editor.aiPlaceholder')"
|
||||
:disabled="!!aiTaskId"
|
||||
@press-enter="handleAiGenerate"
|
||||
>
|
||||
<template #prefix>
|
||||
<ExperimentOutlined style="color: #722ed1" />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button
|
||||
type="primary"
|
||||
class="ai-btn"
|
||||
:loading="!!aiTaskId"
|
||||
@click="handleAiGenerate"
|
||||
>
|
||||
<template #icon><ThunderboltOutlined /></template>
|
||||
{{ t('kol.manage.editor.aiGenerate') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
class="ai-btn"
|
||||
:disabled="!content || !!aiTaskId"
|
||||
@click="emit('ai-optimize')"
|
||||
>
|
||||
{{ t('kol.manage.editor.aiOptimize') }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div class="editor-container">
|
||||
<div v-if="aiTaskId" class="ai-loading-overlay">
|
||||
<div class="loading-content">
|
||||
<LoadingOutlined class="loading-icon" />
|
||||
<span>AI 正在思考中...</span>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
class="prompt-textarea"
|
||||
:value="content"
|
||||
@input="e => emit('update:content', (e.target as HTMLTextAreaElement).value)"
|
||||
placeholder="在这里输入提示词内容，可以使用 {{变量名}} 引用左侧定义的变量"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kol-prompt-edit-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ai-assist-bar {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
background: #f9f0ff;
|
||||
}
|
||||
|
||||
.ai-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ai-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.prompt-textarea {
|
||||
flex: 1;
|
||||
border: none;
|
||||
resize: none;
|
||||
padding: 24px;
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
outline: none;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.prompt-textarea::placeholder {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.ai-loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #722ed1;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,219 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, 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 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 { formatError } from "@/lib/errors";
|
||||
|
||||
const props = defineProps<{
|
||||
promptId: number;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const content = ref("");
|
||||
const variables = ref<KolVariableDefinition[]>([]);
|
||||
const previewOpen = ref(false);
|
||||
const previewValues = ref<Record<string, any>>({});
|
||||
const aiTaskId = ref<string | null>(null);
|
||||
|
||||
const { data: promptDetail, isPending } = useQuery({
|
||||
queryKey: computed(() => ["kol", "prompt", props.promptId]),
|
||||
queryFn: () => kolManageApi.getPrompt(props.promptId),
|
||||
});
|
||||
|
||||
watch(
|
||||
() => promptDetail.value,
|
||||
(detail) => {
|
||||
if (detail) {
|
||||
content.value = detail.latest_prompt_content ?? "";
|
||||
variables.value = detail.latest_schema_json?.variables ?? [];
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const saveDraftMutation = useMutation({
|
||||
mutationFn: (data: { content: string; variables: KolVariableDefinition[] }) =>
|
||||
kolManageApi.saveDraft(props.promptId, {
|
||||
content: data.content,
|
||||
schema: { variables: data.variables },
|
||||
card_config: {},
|
||||
}),
|
||||
onSuccess: () => {
|
||||
message.success(t("common.save") + "成功");
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "prompt", props.promptId] });
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error));
|
||||
},
|
||||
});
|
||||
|
||||
const publishMutation = useMutation({
|
||||
mutationFn: () => kolManageApi.publishPrompt(props.promptId),
|
||||
onSuccess: () => {
|
||||
message.success(t("kol.manage.editor.publish") + "成功");
|
||||
queryClient.invalidateQueries({ queryKey: ["kol", "prompt", props.promptId] });
|
||||
},
|
||||
onError: (error) => {
|
||||
message.error(formatError(error));
|
||||
},
|
||||
});
|
||||
|
||||
const { data: assistTask } = useQuery({
|
||||
queryKey: computed(() => ["kol", "assist", aiTaskId.value]),
|
||||
queryFn: () => kolManageApi.getAssist(aiTaskId.value!),
|
||||
enabled: computed(() => !!aiTaskId.value),
|
||||
refetchInterval: (query) => {
|
||||
const status = query.state.data?.status;
|
||||
return status === "completed" || status === "failed" ? false : 2000;
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => assistTask.value,
|
||||
(task) => {
|
||||
if (task?.status === "completed" && task.result) {
|
||||
content.value = task.result.content;
|
||||
variables.value = task.result.schema.variables;
|
||||
aiTaskId.value = null;
|
||||
message.success("AI 处理完成");
|
||||
} else if (task?.status === "failed") {
|
||||
aiTaskId.value = null;
|
||||
message.error(task.error_message || "AI 处理失败");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
async function handleAiGenerate(description: string) {
|
||||
try {
|
||||
const res = await kolManageApi.submitAssist({
|
||||
mode: "generate",
|
||||
description,
|
||||
prompt_id: props.promptId,
|
||||
});
|
||||
aiTaskId.value = res.task_id;
|
||||
} catch (error) {
|
||||
message.error(formatError(error));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAiOptimize() {
|
||||
try {
|
||||
const res = await kolManageApi.submitAssist({
|
||||
mode: "optimize",
|
||||
current_content: content.value,
|
||||
schema: { variables: variables.value },
|
||||
prompt_id: props.promptId,
|
||||
});
|
||||
aiTaskId.value = res.task_id;
|
||||
} catch (error) {
|
||||
message.error(formatError(error));
|
||||
}
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
saveDraftMutation.mutate({ content: content.value, variables: variables.value });
|
||||
}
|
||||
|
||||
function handlePublish() {
|
||||
publishMutation.mutate();
|
||||
}
|
||||
|
||||
function handlePreview() {
|
||||
previewValues.value = {};
|
||||
previewOpen.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kol-prompt-editor">
|
||||
<div class="editor-header">
|
||||
<div class="header-title">
|
||||
<span class="prompt-name">{{ promptDetail?.name || 'Loading...' }}</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">
|
||||
<template #icon><SaveOutlined /></template>
|
||||
{{ t('kol.manage.editor.saveDraft') }}
|
||||
</a-button>
|
||||
<a-button type="primary" :loading="publishMutation.isPending.value" @click="handlePublish">
|
||||
<template #icon><SendOutlined /></template>
|
||||
{{ t('kol.manage.editor.publish') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-body">
|
||||
<KolVariablePanel />
|
||||
<KolPromptEditArea
|
||||
v-model:content="content"
|
||||
v-model:variables="variables"
|
||||
:ai-task-id="aiTaskId"
|
||||
@ai-generate="handleAiGenerate"
|
||||
@ai-optimize="handleAiOptimize"
|
||||
/>
|
||||
<KolVariableConfig v-model:variables="variables" />
|
||||
</div>
|
||||
|
||||
<a-modal
|
||||
v-model:open="previewOpen"
|
||||
:title="t('kol.manage.editor.preview')"
|
||||
:footer="null"
|
||||
width="600px"
|
||||
>
|
||||
<KolDynamicForm
|
||||
:variables="variables"
|
||||
v-model:modelValue="previewValues"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kol-prompt-editor {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.prompt-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.editor-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import type { CreateKolPromptRequest } from "@geo/shared-types";
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean;
|
||||
packageId: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "update:open", value: boolean): void;
|
||||
(e: "submit", value: CreateKolPromptRequest): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const formState = reactive<CreateKolPromptRequest>({
|
||||
name: "",
|
||||
platform_hint: "通用",
|
||||
});
|
||||
|
||||
const platformOptions = [
|
||||
{ label: "通用", value: "通用" },
|
||||
{ label: "豆包", value: "豆包" },
|
||||
{ label: "DeepSeek", value: "DeepSeek" },
|
||||
{ label: "ChatGPT", value: "ChatGPT" },
|
||||
];
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
(isOpen) => {
|
||||
if (isOpen) {
|
||||
formState.name = "";
|
||||
formState.platform_hint = "通用";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function handleOk() {
|
||||
if (!formState.name.trim()) return;
|
||||
emit("submit", { ...formState });
|
||||
emit("update:open", false);
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
emit("update:open", false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-modal
|
||||
:open="open"
|
||||
:title="t('kol.manage.createPrompt')"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item :label="t('common.title')" required>
|
||||
<a-input v-model:value="formState.name" :placeholder="t('common.inputPlease')" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="Platform Hint">
|
||||
<a-select
|
||||
v-model:value="formState.platform_hint"
|
||||
:options="platformOptions"
|
||||
@change="(val: string) => formState.platform_hint = val"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
@@ -0,0 +1,177 @@
|
||||
<script setup lang="ts">
|
||||
import { CloseOutlined } from "@ant-design/icons-vue";
|
||||
import type { KolVariableDefinition } from "@geo/shared-types";
|
||||
import { Tag } from "ant-design-vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
variables: KolVariableDefinition[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "update:variables", value: KolVariableDefinition[]): void;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
function updateVariable(index: number, updates: Partial<KolVariableDefinition>) {
|
||||
const newVariables = [...props.variables];
|
||||
const oldVar = newVariables[index];
|
||||
|
||||
// If label is updated and matches key (default behavior), update key too
|
||||
if (updates.label !== undefined && oldVar.label === oldVar.key) {
|
||||
updates.key = updates.label;
|
||||
}
|
||||
|
||||
newVariables[index] = { ...oldVar, ...updates };
|
||||
emit("update:variables", newVariables);
|
||||
}
|
||||
|
||||
function removeVariable(index: number) {
|
||||
const newVariables = [...props.variables];
|
||||
newVariables.splice(index, 1);
|
||||
emit("update:variables", newVariables);
|
||||
}
|
||||
|
||||
function handleOptionsChange(index: number, value: string) {
|
||||
const options = value.split(",").map(s => s.trim()).filter(Boolean);
|
||||
updateVariable(index, { options });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kol-variable-config">
|
||||
<div v-if="variables.length === 0" class="empty-state">
|
||||
{{ t('common.noData') }}
|
||||
</div>
|
||||
<div v-for="(variable, index) in variables" :key="variable.id" class="variable-card">
|
||||
<div class="card-header">
|
||||
<Tag color="blue">{{ t(`kol.manage.variable.${variable.type}`) }}</Tag>
|
||||
<div class="header-actions">
|
||||
<a-button type="text" size="small" @click="removeVariable(index)">
|
||||
<template #icon><CloseOutlined /></template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="form-item">
|
||||
<label>{{ t('kol.manage.variable.label') }}</label>
|
||||
<a-input
|
||||
:value="variable.label"
|
||||
size="small"
|
||||
@input="(e: Event) => updateVariable(index, { label: (e.target as HTMLInputElement).value })"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-item-row">
|
||||
<label>{{ t('kol.manage.variable.required') }}</label>
|
||||
<a-switch
|
||||
:checked="variable.required"
|
||||
size="small"
|
||||
@update:checked="(val: boolean) => updateVariable(index, { required: val })"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="variable.type !== 'checkbox' && variable.type !== 'select'" class="form-item">
|
||||
<label>{{ t('kol.manage.variable.placeholder') }}</label>
|
||||
<a-input
|
||||
:value="variable.placeholder"
|
||||
size="small"
|
||||
@input="(e: Event) => updateVariable(index, { placeholder: (e.target as HTMLInputElement).value })"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="variable.type === 'select' || variable.type === 'checkbox'" class="form-item">
|
||||
<label>{{ t('kol.manage.variable.options') }}</label>
|
||||
<a-input
|
||||
:value="variable.options?.join(', ')"
|
||||
size="small"
|
||||
@input="(e: Event) => handleOptionsChange(index, (e.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="token-display">
|
||||
<code>{{ `{{${variable.key}}}` }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kol-variable-config {
|
||||
width: 260px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.variable-card {
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.form-item label {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.form-item-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-item-row label {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.token-display {
|
||||
margin-top: 4px;
|
||||
padding: 4px 8px;
|
||||
background: #fff;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.token-display code {
|
||||
font-family: monospace;
|
||||
color: #eb2f96;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
FontSizeOutlined,
|
||||
EditOutlined,
|
||||
OrderedListOutlined,
|
||||
NumberOutlined,
|
||||
CheckSquareOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const componentTypes = [
|
||||
{ type: "input", icon: FontSizeOutlined },
|
||||
{ type: "textarea", icon: EditOutlined },
|
||||
{ type: "select", icon: OrderedListOutlined },
|
||||
{ type: "number", icon: NumberOutlined },
|
||||
{ type: "checkbox", icon: CheckSquareOutlined },
|
||||
] as const;
|
||||
|
||||
function onDragStart(event: DragEvent, type: string) {
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.setData("application/kol-variable-type", type);
|
||||
event.dataTransfer.effectAllowed = "copy";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kol-variable-panel">
|
||||
<div
|
||||
v-for="item in componentTypes"
|
||||
:key="item.type"
|
||||
class="variable-item"
|
||||
draggable="true"
|
||||
@dragstart="onDragStart($event, item.type)"
|
||||
>
|
||||
<component :is="item.icon" class="item-icon" />
|
||||
<span class="item-label">{{ t(`kol.manage.variable.${item.type}`) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kol-variable-panel {
|
||||
width: 200px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.variable-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: #fafafa;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
cursor: grab;
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.variable-item:hover {
|
||||
border-color: #40a9ff;
|
||||
color: #40a9ff;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.variable-item:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user