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.

apps/admin-web/src/views/ArticleEditorView.vue

@@ -5,7 +5,6 @@ import { message } from "ant-design-vue";
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
-import { MilkdownProvider } from "@milkdown/vue";
 
 import ArticleEditorCanvas from "@/components/ArticleEditorCanvas.vue";
 import CoverPickerModal from "@/components/CoverPickerModal.vue";
@@ -379,16 +378,14 @@ function serializePlatformSelection(platformIds: string[]): string {
       />
       <div class="article-editor-view__layout">
         <section class="article-editor-view__main">
-          <MilkdownProvider>
-            <ArticleEditorCanvas
-              :key="String(articleId)"
-              :article-id="articleId"
-              v-model:title="title"
-              v-model="markdown"
-              :disabled="editorLocked"
-              :upload-image="uploadEditorImage"
-            />
-          </MilkdownProvider>
+          <ArticleEditorCanvas
+            :key="String(articleId)"
+            :article-id="articleId"
+            v-model:title="title"
+            v-model="markdown"
+            :disabled="editorLocked"
+            :upload-image="uploadEditorImage"
+          />
         </section>
 
         <aside class="article-editor-view__rail">

apps/admin-web/src/views/KolGenerateView.vue

@@ -22,6 +22,10 @@ const schemaQuery = useQuery({
 
 const values = ref<Record<string, any>>({});
 
+function fieldKey(key?: string | null, id?: string): string {
+  return key?.trim() || id || "";
+}
+
 // Initialize values from schema
 watch(
   () => schemaQuery.data.value,
@@ -29,7 +33,7 @@ watch(
     if (schema?.schema_json?.variables) {
       const newValues: Record<string, any> = {};
       schema.schema_json.variables.forEach((v) => {
-        newValues[v.key] = v.type === "checkbox" ? [] : undefined;
+        newValues[fieldKey(v.key, v.id)] = v.type === "checkbox" ? [] : undefined;
       });
       values.value = newValues;
     }
@@ -59,7 +63,7 @@ function handleSubmit() {
 
   const missingLabels: string[] = [];
   schema.schema_json.variables.forEach((v) => {
-    if (v.required && !values.value[v.key]) {
+    if (v.required && !values.value[fieldKey(v.key, v.id)]) {
       missingLabels.push(v.label);
     }
   });

apps/admin-web/src/views/KolManageView.vue

@@ -6,12 +6,13 @@ import { message, Modal } from "ant-design-vue";
 import {
   PlusOutlined,
   EditOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
   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";
@@ -26,8 +27,8 @@ 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 togglingPromptId = ref<number | null>(null);
 
 const { data: packages, isPending: packagesPending } = useQuery({
   queryKey: ["kol", "packages"],
@@ -77,11 +78,12 @@ const archivePackageMutation = useMutation({
 
 const deletePackageMutation = useMutation({
   mutationFn: (id: number) => kolManageApi.deletePackage(id),
-  onSuccess: () => {
+  onSuccess: (_, id) => {
     message.success(t("common.delete") + "成功");
     queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
-    if (selectedPackageId.value === selectedPackageId.value) {
+    if (selectedPackageId.value === id) {
       selectedPackageId.value = null;
+      editingPromptId.value = null;
     }
   },
 });
@@ -97,6 +99,31 @@ const createPromptMutation = useMutation({
   },
   onError: (error) => message.error(formatError(error)),
 });
+
+const togglePromptStatusMutation = useMutation({
+  mutationFn: (data: { id: number; nextStatus: "active" | "archived" }) =>
+    data.nextStatus === "active"
+      ? kolManageApi.activatePrompt(data.id)
+      : kolManageApi.archivePrompt(data.id),
+  onMutate: (variables) => {
+    togglingPromptId.value = variables.id;
+  },
+  onSuccess: (_, variables) => {
+    message.success(
+      t(variables.nextStatus === "active" ? "kol.manage.activatePrompt" : "kol.manage.archivePrompt") + "成功"
+    );
+    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    void queryClient.invalidateQueries({
+      queryKey: ["kol", "packages", selectedPackageId.value, "prompts"],
+    });
+    void queryClient.invalidateQueries({ queryKey: ["kol", "prompt", variables.id] });
+  },
+  onError: (error) => message.error(formatError(error)),
+  onSettled: () => {
+    togglingPromptId.value = null;
+  },
+});
+
 const packageInitialValue = computed<Partial<CreateKolPackageRequest> | undefined>(() => {
   if (!editingPackage.value) return undefined;
   return {
@@ -135,130 +162,172 @@ function handleDeletePackage(id: number) {
   });
 }
 
+function handleSelectPackage(packageId: number) {
+  selectedPackageId.value = packageId;
+  editingPromptId.value = null;
+}
+
 function handleOpenEditor(promptId: number) {
   editingPromptId.value = promptId;
-  editorDrawerOpen.value = true;
+}
+
+function handleCloseEditor() {
+  editingPromptId.value = null;
+}
+
+function promptStatusLabel(status: 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-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 v-if="editingPromptId" class="manage-content manage-content--editor">
+      <div class="fullscreen-editor">
+        <KolPromptEditor :prompt-id="editingPromptId" @back="handleCloseEditor" />
       </div>
-
-      <!-- Right Column: Prompts -->
-      <div class="prompt-column">
-        <template v-if="selectedPackageId">
+    </div>
+    <div v-else class="manage-content">
+        <div class="package-column">
           <div class="column-header">
-            <h3>Prompts</h3>
-            <a-button type="primary" size="small" @click="promptModalOpen = true">
+            <h3>订阅包</h3>
+            <a-button type="primary" size="small" @click="handleCreatePackage">
               <template #icon><PlusOutlined /></template>
-              {{ t('kol.manage.createPrompt') }}
+              {{ t('kol.manage.createPackage') }}
             </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"
+          <a-list
+            class="package-list"
+            :loading="packagesPending"
+            :data-source="packages"
             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 #renderItem="{ item }">
+              <a-list-item
+                :class="{ 'is-selected': selectedPackageId === item.id }"
+                @click="handleSelectPackage(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 }} 提示词</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-table>
-        </template>
-        <div v-else class="empty-prompts">
-          <a-empty description="请选择左侧订阅包以查看 Prompt" />
+          </a-list>
+        </div>
+
+        <!-- Right Column: Prompts -->
+        <div class="prompt-column">
+          <template v-if="selectedPackageId">
+            <div class="column-header">
+              <h3>提示词</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: t('tracking.columns.platform'), dataIndex: 'platform_hint', key: 'platform_hint' },
+                { title: t('common.status'), dataIndex: 'status', key: 'status' },
+                { title: t('common.actions'), key: 'actions', align: 'right', width: 112 },
+              ]"
+              :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' : record.status === 'archived' ? 'orange' : 'default'">
+                    {{ promptStatusLabel(record.status) }}
+                  </a-tag>
+                </template>
+                <template v-else-if="column.key === 'actions'">
+                  <div class="table-actions-row">
+                    <a-tooltip :title="t('common.edit')">
+                      <a-button
+                        type="text"
+                        shape="circle"
+                        size="small"
+                        class="action-btn action-edit"
+                        @click="handleOpenEditor(record.id)"
+                      >
+                        <EditOutlined />
+                      </a-button>
+                    </a-tooltip>
+                    <a-tooltip
+                      :title="record.status === 'active' ? t('kol.manage.archivePrompt') : t('kol.manage.activatePrompt')"
+                    >
+                      <a-button
+                        type="text"
+                        shape="circle"
+                        size="small"
+                        :class="[
+                          'action-btn',
+                          record.status === 'active' ? 'action-disable' : 'action-enable',
+                        ]"
+                        :loading="togglePromptStatusMutation.isPending.value && togglingPromptId === record.id"
+                        @click="togglePromptStatusMutation.mutate({
+                          id: record.id,
+                          nextStatus: record.status === 'active' ? 'archived' : 'active',
+                        })"
+                      >
+                        <PauseCircleOutlined v-if="record.status === 'active'" />
+                        <PlayCircleOutlined v-else />
+                      </a-button>
+                    </a-tooltip>
+                  </div>
+                </template>
+              </template>
+            </a-table>
+          </template>
+          <div v-else class="empty-prompts">
+            <a-empty description="请选择左侧订阅包以查看提示词" />
+          </div>
         </div>
       </div>
-    </div>
 
     <KolPackageFormModal
       v-model:open="packageModalOpen"
@@ -271,16 +340,6 @@ function handleOpenEditor(promptId: number) {
       :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>
 
@@ -291,13 +350,23 @@ function handleOpenEditor(promptId: number) {
   height: calc(100vh - 64px);
 }
 
+.fullscreen-editor {
+  flex: 1;
+  min-height: 0;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.manage-content--editor {
+  padding: 16px;
+}
+
 .manage-content {
   flex: 1;
   display: flex;
   overflow: hidden;
   padding: 16px;
   gap: 16px;
-  background: #f5f5f5;
 }
 
 .package-column {
@@ -314,6 +383,7 @@ function handleOpenEditor(promptId: number) {
   border-radius: 8px;
   display: flex;
   flex-direction: column;
+  min-width: 0;
 }
 
 .column-header {
@@ -372,7 +442,29 @@ function handleOpenEditor(promptId: number) {
   justify-content: center;
 }
 
-.editor-drawer :deep(.ant-drawer-body) {
-  padding: 0;
+.prompt-editor-panel {
+  flex: 1;
+  min-height: 0;
+}
+
+.table-actions-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.action-edit.ant-btn:hover:not(:disabled) {
+  color: #52c41a;
+  background: #f6ffed;
+}
+
+.action-enable.ant-btn:hover:not(:disabled) {
+  color: #1677ff;
+  background: #e6f4ff;
+}
+
+.action-disable.ant-btn:hover:not(:disabled) {
+  color: #fa8c16;
+  background: #fff7e6;
 }
 </style>