geo/apps/admin-web/src/components/kol/KolPromptEditor.vue

<script setup lang="ts">
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 { 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 } 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();

const content = ref("");
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 } = 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 ?? [];
    }
  },
  { immediate: true }
);

const publishMutation = useMutation({
  mutationFn: (payload: ReturnType<typeof buildPromptPayload>) =>
    kolManageApi.publishPrompt(props.promptId, payload),
  onSuccess: () => {
    message.success(t("kol.manage.editor.publish") + "成功");
    invalidatePromptQueries();
  },
  onError: (error) => {
    message.error(formatError(error));
  },
});

const saveMutation = useMutation({
  mutationFn: (payload: ReturnType<typeof buildPromptPayload>) =>
    kolManageApi.savePrompt(props.promptId, payload),
  onSuccess: () => {
    message.success(t("common.save") + "成功");
    invalidatePromptQueries();
  },
  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 = syncKolVariablesWithContent(task.result.content, 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 syncedVariables = syncVariablesFromContent();
    const res = await kolManageApi.submitAssist({
      mode: "optimize",
      current_content: content.value,
      schema: { variables: syncedVariables },
      prompt_id: props.promptId,
    });
    aiTaskId.value = res.task_id;
  } catch (error) {
    message.error(formatError(error));
  }
}

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() {
  const syncedVariables = syncVariablesFromContent();
  if (!validateBeforeSubmit()) {
    return;
  }
  saveMutation.mutate(buildPromptPayload(syncedVariables));
}

function handlePublish() {
  const syncedVariables = syncVariablesFromContent();
  if (!validateBeforeSubmit()) {
    return;
  }
  publishMutation.mutate(buildPromptPayload(syncedVariables));
}

function handlePreview() {
  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">
        <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="saveMutation.isPending.value" @click="handleSave">
          <template #icon><SaveOutlined /></template>
          {{ t('common.save') }}
        </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-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
        v-model:content="content"
        v-model:variables="variables"
        :ai-task-id="aiTaskId"
        @ai-generate="handleAiGenerate"
        @ai-optimize="handleAiOptimize"
        @focus-variable="handleFocusVariable"
      />
      <KolVariableConfig
        ref="variableConfigRef"
        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-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 {
  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: 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>