feat(kol): dynamic-form generation view

apps/admin-web/src/i18n/messages/en-US.ts

@@ -180,7 +180,7 @@ const enUS = {
     generate: {
       title: "Generate Article",
       submit: "Generate",
-      fillVariables: "Please fill in all required variables",
+      fillVariables: "Please fill in the following variables and click generate",
     },
     manage: {
       title: "KOL Prompt Management",

apps/admin-web/src/i18n/messages/zh-CN.ts

@@ -180,7 +180,7 @@ const zhCN = {
     generate: {
       title: "生成文章",
       submit: "生成",
-      fillVariables: "请填写所有必填变量",
+      fillVariables: "填写以下变量后点击生成",
     },
     manage: {
       title: "KOL 提示词管理",

apps/admin-web/src/lib/api.ts

@@ -39,6 +39,9 @@ import type {
   KolPromptDetail,
   KolPromptRevision,
   KolSaveDraftRequest,
+  KolSubscriptionPromptSchema,
+  KolGenerateRequest,
+  KolGenerateResponse,
   Keyword,
   KeywordRequest,
   LoginRequest,
@@ -359,6 +362,18 @@ export const kolMarketplaceApi = {
   },
 };
 
+export const kolGenerateApi = {
+  schema(id: number | string) {
+    return apiClient.get<KolSubscriptionPromptSchema>(`/api/tenant/kol/subscription-prompts/${id}/schema`);
+  },
+  submit(id: number | string, body: KolGenerateRequest) {
+    return apiClient.post<KolGenerateResponse, KolGenerateRequest>(
+      `/api/tenant/kol/subscription-prompts/${id}/generate`,
+      body,
+    );
+  },
+};
+
 export const articlesApi = {
   list(params: ArticleListParams) {
     return apiClient.get<ArticleListResponse>("/api/tenant/articles", { params });

apps/admin-web/src/router/future-kol-views.d.ts

@@ -4,10 +4,3 @@ declare module "@/views/KolDashboardView.vue" {
   const component: DefineComponent<Record<string, never>, Record<string, never>, any>;
   export default component;
 }
-
-declare module "@/views/KolGenerateView.vue" {
-  import type { DefineComponent } from "vue";
-
-  const component: DefineComponent<Record<string, never>, Record<string, never>, any>;
-  export default component;
-}

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

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useMutation, useQuery } from "@tanstack/vue-query";
+import { message } from "ant-design-vue";
+import { ArrowLeftOutlined, ThunderboltOutlined } from "@ant-design/icons-vue";
+import { kolGenerateApi } from "@/lib/api";
+import KolDynamicForm from "@/components/kol/KolDynamicForm.vue";
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+const subscriptionPromptId = computed(() => String(route.params.subscriptionPromptId));
+
+const schemaQuery = useQuery({
+  queryKey: ["kol", "subscription-prompt", "schema", subscriptionPromptId],
+  queryFn: () => kolGenerateApi.schema(subscriptionPromptId.value),
+  enabled: computed(() => !!subscriptionPromptId.value),
+});
+
+const values = ref<Record<string, any>>({});
+
+// Initialize values from schema
+watch(
+  () => schemaQuery.data.value,
+  (schema) => {
+    if (schema?.schema_json?.variables) {
+      const newValues: Record<string, any> = {};
+      schema.schema_json.variables.forEach((v) => {
+        newValues[v.key] = v.type === "checkbox" ? [] : undefined;
+      });
+      values.value = newValues;
+    }
+  },
+  { immediate: true }
+);
+
+const generateMutation = useMutation({
+  mutationFn: (variables: Record<string, any>) =>
+    kolGenerateApi.submit(subscriptionPromptId.value, { variables }),
+  onSuccess: (data) => {
+    message.success(t("common.copySuccess")); // Or a generic success message
+    void router.push({ name: "article-editor", params: { id: String(data.article_id) } });
+  },
+  onError: (error: any) => {
+    message.error(error.message || t("common.noData"));
+  },
+});
+
+function handleBack() {
+  router.back();
+}
+
+function handleSubmit() {
+  const schema = schemaQuery.data.value;
+  if (!schema?.schema_json?.variables) return;
+
+  const missingLabels: string[] = [];
+  schema.schema_json.variables.forEach((v) => {
+    if (v.required && !values.value[v.key]) {
+      missingLabels.push(v.label);
+    }
+  });
+
+  if (missingLabels.length > 0) {
+    message.warning(`${t("kol.generate.fillVariables")}: ${missingLabels.join(", ")}`);
+    return;
+  }
+
+  generateMutation.mutate(values.value);
+}
+
+const schema = computed(() => schemaQuery.data.value);
+</script>
+
+<template>
+  <div class="kol-generate-view">
+    <div class="view-header">
+      <a-button type="link" @click="handleBack" class="back-btn">
+        <template #icon><ArrowLeftOutlined /></template>
+        {{ t("common.back") }}
+      </a-button>
+    </div>
+
+    <div v-if="schemaQuery.isPending.value" class="loading-state">
+      <a-spin size="large" />
+    </div>
+
+    <div v-else-if="schema" class="view-content">
+      <a-row :gutter="24" justify="center">
+        <a-col :xs="24" :lg="16" :xl="12">
+          <a-card class="generate-card">
+            <template #title>
+              <div class="card-header">
+                <span class="package-name">{{ schema.package_name }}</span>
+                <span class="divider">/</span>
+                <span class="prompt-name">{{ schema.prompt_name }}</span>
+                <a-tag v-if="schema.platform_hint" color="cyan" class="platform-badge">
+                  {{ schema.platform_hint }}
+                </a-tag>
+              </div>
+            </template>
+
+            <div class="hint-text">
+              <ThunderboltOutlined class="hint-icon" />
+              {{ t("kol.generate.fillVariables") }}
+            </div>
+
+            <KolDynamicForm
+              v-model="values"
+              :variables="schema.schema_json.variables"
+              class="form-body"
+            />
+
+            <div class="form-actions">
+              <a-button
+                type="primary"
+                size="large"
+                block
+                :loading="generateMutation.isPending.value"
+                @click="handleSubmit"
+              >
+                {{ t("kol.generate.submit") }}
+              </a-button>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.kol-generate-view {
+  padding: 0;
+}
+
+.view-header {
+  margin-bottom: 16px;
+}
+
+.back-btn {
+  padding: 0;
+  color: #595959;
+}
+
+.loading-state {
+  display: flex;
+  justify-content: center;
+  padding: 100px;
+}
+
+.generate-card {
+  border-radius: 12px;
+  border: 1px solid #e6edf5;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.package-name {
+  color: #8c8c8c;
+  font-weight: 400;
+}
+
+.divider {
+  color: #d9d9d9;
+}
+
+.prompt-name {
+  color: #1a1a1a;
+  font-weight: 600;
+}
+
+.platform-badge {
+  margin-left: 4px;
+}
+
+.hint-text {
+  margin-bottom: 24px;
+  padding: 12px 16px;
+  background: #f0f7ff;
+  border-radius: 8px;
+  color: #003a8c;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.hint-icon {
+  color: #1890ff;
+}
+
+.form-body {
+  margin-bottom: 24px;
+}
+
+.form-actions {
+  margin-top: 32px;
+}
+</style>