From 065e383f3cb85600ec3c397b50094df3fc1fed7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=B5=E5=BA=94?= <ci-test@xiaoxia.com>
Date: Mon, 6 Jul 2026 13:14:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20P2-1=20=E6=A0=87=E9=A2=98=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E5=8C=B9=E9=85=8D=20=E2=80=94=20=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E7=A1=AC=E7=BC=96=E7=A0=81=E6=A0=87=E9=A2=98=E4=B8=BAAPI?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 GeneratePage 中硬编码的 TITLE_OPTIONS 常量
- 新增 useQuery 调用 getTitles() API 获取用户标题库
- renderStep3 改为从 userTitles 动态渲染下拉选项
- 新增 useEffect：当选中模板开启 ai_auto_select 时自动填入模板预设标题
- 标题库为空时显示引导提示

Closes: 🟢 P2-1 标题自动匹配
---
 apps/web/src/pages/generate/GeneratePage.tsx | 35 +++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/pages/generate/GeneratePage.tsx b/apps/web/src/pages/generate/GeneratePage.tsx
index 61a47477e..ffe3431d4 100644
--- a/apps/web/src/pages/generate/GeneratePage.tsx
+++ b/apps/web/src/pages/generate/GeneratePage.tsx
@@ -21,6 +21,7 @@ import { getAssets, getAssetLibraries } from "@/api/assets";
 import { createEditPlan, generateEditPlan } from "@/api/editPlans";
 import { getEditingTemplates } from "@/api/editingPlanner";
 import { MODE_LABELS, type TemplateMode } from "@/api/editingPlanner";
+import { getTitles } from "@/api/titles";
 import apiClient from "@/api/client";
 import { fetchPresetVoices } from "@/api/voices";
 import type { PresetVoiceItem } from "@/api/voices";
@@ -95,14 +96,7 @@ const STEPS = [
   { key: 5, label: "确认生成" },
 ];
 
-/* ── 标题选项 Mock ── */
-const TITLE_OPTIONS = [
-  "3秒抓住注意力，30秒讲清卖点",
-  "产品种草 | 一分钟了解核心优势",
-  "客户真实反馈，看完你就懂了",
-  "行业干货分享，建议收藏",
-  "新品首发，限时优惠不容错过",
-];
+/* ── 标题选项从 API 加载，不再硬编码 ── */
 
 /* ================================================================
    组件
@@ -131,6 +125,18 @@ const GeneratePage: React.FC = () => {
 
   /* ── 标题 ── */
   const [title, setTitle] = useState("");
+  const { data: userTitles = [] } = useQuery({
+    queryKey: ["generate-titles"],
+    queryFn: () => getTitles(),
+    staleTime: 60_000,
+  });
+  /* 当选中模板开启了「AI自动匹配标题」，自动填入模板预设标题 */
+  useEffect(() => {
+    const tpl = userTemplates.find((t) => t.id === selectedTemplate);
+    if (tpl?.title_config?.ai_auto_select && tpl.title_config.content) {
+      setTitle(tpl.title_config.content);
+    }
+  }, [selectedTemplate, userTemplates]);
 
   /* ── 配音 ── */
   const [selectedVoice, setSelectedVoice] = useState<string>("");
@@ -698,12 +704,12 @@ const GeneratePage: React.FC = () => {
     <div className="xx-form-section">
       <h3>📝 选择标题</h3>
       <div className="xx-form-field">
-        <label>选择标题</label>
+        <label>从标题库选择</label>
         <select value={title} onChange={(e) => setTitle(e.target.value)}>
           <option value="">请选择标题…</option>
-          {TITLE_OPTIONS.map((t) => (
-            <option key={t} value={t}>
-              {t}
+          {userTitles.map((t) => (
+            <option key={t.id} value={t.content}>
+              {t.content}
             </option>
           ))}
         </select>
@@ -717,6 +723,11 @@ const GeneratePage: React.FC = () => {
           maxLength={50}
         />
       </div>
+      {userTitles.length === 0 && (
+        <p style={{ fontSize: 12, color: "var(--text-tertiary)", marginTop: 8 }}>
+          标题库为空，请前往「标题管理」添加标题，或手动输入
+        </p>
+      )}
     </div>
   );