From 6eb663bd6e2c450ffd55a3cb10e1ede4c03e5f2c Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Fri, 17 Apr 2026 14:08:34 +0800
Subject: [PATCH] feat(kol): three-pane prompt editor + KolManageView UI

---
 .../src/components/kol/KolDynamicForm.vue     |  90 +++++
 .../components/kol/KolPackageFormModal.vue    |  87 ++++
 .../src/components/kol/KolPromptEditArea.vue  | 211 ++++++++++
 .../src/components/kol/KolPromptEditor.vue    | 219 ++++++++++
 .../src/components/kol/KolPromptFormModal.vue |  72 ++++
 .../src/components/kol/KolVariableConfig.vue  | 177 ++++++++
 .../src/components/kol/KolVariablePanel.vue   |  85 ++++
 .../src/router/future-kol-views.d.ts          |   7 -
 apps/admin-web/src/views/KolManageView.vue    | 378 ++++++++++++++++++
 9 files changed, 1319 insertions(+), 7 deletions(-)
 create mode 100644 apps/admin-web/src/components/kol/KolDynamicForm.vue
 create mode 100644 apps/admin-web/src/components/kol/KolPackageFormModal.vue
 create mode 100644 apps/admin-web/src/components/kol/KolPromptEditArea.vue
 create mode 100644 apps/admin-web/src/components/kol/KolPromptEditor.vue
 create mode 100644 apps/admin-web/src/components/kol/KolPromptFormModal.vue
 create mode 100644 apps/admin-web/src/components/kol/KolVariableConfig.vue
 create mode 100644 apps/admin-web/src/components/kol/KolVariablePanel.vue
 create mode 100644 apps/admin-web/src/views/KolManageView.vue

diff --git a/apps/admin-web/src/components/kol/KolDynamicForm.vue b/apps/admin-web/src/components/kol/KolDynamicForm.vue
new file mode 100644
index 0000000..a3b9a0e
--- /dev/null
+++ b/apps/admin-web/src/components/kol/KolDynamicForm.vue
@@ -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>
diff --git a/apps/admin-web/src/components/kol/KolPackageFormModal.vue b/apps/admin-web/src/components/kol/KolPackageFormModal.vue
new file mode 100644
index 0000000..7ce4b81
--- /dev/null
+++ b/apps/admin-web/src/components/kol/KolPackageFormModal.vue
@@ -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>
diff --git a/apps/admin-web/src/components/kol/KolPromptEditArea.vue b/apps/admin-web/src/components/kol/KolPromptEditArea.vue
new file mode 100644
index 0000000..051d132
--- /dev/null
+++ b/apps/admin-web/src/components/kol/KolPromptEditArea.vue
@@ -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>
diff --git a/apps/admin-web/src/components/kol/KolPromptEditor.vue b/apps/admin-web/src/components/kol/KolPromptEditor.vue
new file mode 100644
index 0000000..be5396c
--- /dev/null
+++ b/apps/admin-web/src/components/kol/KolPromptEditor.vue
@@ -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>
diff --git a/apps/admin-web/src/components/kol/KolPromptFormModal.vue b/apps/admin-web/src/components/kol/KolPromptFormModal.vue
new file mode 100644
index 0000000..37f072f
--- /dev/null
+++ b/apps/admin-web/src/components/kol/KolPromptFormModal.vue
@@ -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>
diff --git a/apps/admin-web/src/components/kol/KolVariableConfig.vue b/apps/admin-web/src/components/kol/KolVariableConfig.vue
new file mode 100644
index 0000000..9d1f319
--- /dev/null
+++ b/apps/admin-web/src/components/kol/KolVariableConfig.vue
@@ -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>
diff --git a/apps/admin-web/src/components/kol/KolVariablePanel.vue b/apps/admin-web/src/components/kol/KolVariablePanel.vue
new file mode 100644
index 0000000..b24fc17
--- /dev/null
+++ b/apps/admin-web/src/components/kol/KolVariablePanel.vue
@@ -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>
diff --git a/apps/admin-web/src/router/future-kol-views.d.ts b/apps/admin-web/src/router/future-kol-views.d.ts
index b03ebf3..8cbe11f 100644
--- a/apps/admin-web/src/router/future-kol-views.d.ts
+++ b/apps/admin-web/src/router/future-kol-views.d.ts
@@ -1,10 +1,3 @@
-declare module "@/views/KolManageView.vue" {
-  import type { DefineComponent } from "vue";
-
-  const component: DefineComponent<Record<string, never>, Record<string, never>, any>;
-  export default component;
-}
-
 declare module "@/views/KolDashboardView.vue" {
   import type { DefineComponent } from "vue";
 
diff --git a/apps/admin-web/src/views/KolManageView.vue b/apps/admin-web/src/views/KolManageView.vue
new file mode 100644
index 0000000..7b55a39
--- /dev/null
+++ b/apps/admin-web/src/views/KolManageView.vue
@@ -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>