From d5ddb47c8f430a09c049c7af57d32d1e1c0f028b Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Fri, 7 Aug 2026 12:24:03 +0800
Subject: [PATCH] feat: merge title library selection and manual input into
 single AutoComplete
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace separate Select (title library) + input (manual) with unified AutoComplete
- Remove '或手动选择' divider line
- AutoComplete supports both typing custom titles and selecting from library
- Maintains filtering, clear, and empty state functionality
- Saves vertical space in Step4 UI
---
 .../components/Step4TitleSettings.tsx         | 30 ++++++-------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/pages/generate/components/Step4TitleSettings.tsx b/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
index aac2df0f2..184a27057 100644
--- a/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
+++ b/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
@@ -2,7 +2,7 @@
  * Step 4 标题设置组件
  */
 import React from "react"
-import { Select } from "antd"
+import { AutoComplete } from "antd"
 import { POSITION_OPTIONS, FONT_OPTIONS } from "../constants"
 import type { TitleSettings } from "../types"
 import { useStep4Title } from "../hooks/useStep4Title"
@@ -75,10 +75,6 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
             onRefresh={t.handleRefreshAiTitles}
           />
 
-          <div className="xx-divider">
-            <span>或手动选择</span>
-          </div>
-
           <div className="xx-title-ai-toggle">
             <span className="xx-toggle-label">AI 自动选择标题</span>
             <div className="xx-switch" onClick={t.toggleAiAutoSelect}>
@@ -87,21 +83,22 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
           </div>
 
           <div className="xx-form-field">
-            <label>从标题库选择</label>
-            <Select
-              placeholder="请选择标题…"
+            <label>标题</label>
+            <AutoComplete
+              placeholder="输入或从标题库选择…"
               allowClear
-              showSearch
               style={{ width: "100%" }}
               value={t.titleSettings.title || undefined}
+              onSelect={(val) => t.updateTitle(val || "")}
               onChange={(val) => t.updateTitle(val || "")}
               options={t.userTitles.map((ut) => ({
                 label: ut.content,
                 value: ut.content,
               }))}
-              filterOption={(input, option) =>
-                ((option?.label as string) || "").toLowerCase().includes(input.toLowerCase())
-              }
+              filterOption={(inputValue, option) => {
+                const title = (option?.label || option?.value || "") as string
+                return title.toLowerCase().includes((inputValue || "").toLowerCase())
+              }}
               notFoundContent={
                 t.userTitles.length === 0 ? (
                   <span style={{ color: "var(--text-tertiary)", fontSize: 13 }}>
@@ -111,15 +108,6 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
               }
             />
           </div>
-          <div className="xx-form-field" style={{ marginTop: 14 }}>
-            <label>或手动输入</label>
-            <input
-              placeholder="输入自定义标题…"
-              value={t.titleSettings.title}
-              onChange={(e) => t.updateTitle(e.target.value)}
-              maxLength={50}
-            />
-          </div>
         </>
       )}