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,11 +83,11 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
           </div>
 
           <div className="xx-form-field">
-            <label>从标题库选择</label>
-            <Select
-              placeholder="请选择标题…"
+            <label>标题</label>
+            <AutoComplete
+              placeholder="输入或从标题库选择…"
               allowClear
-              showSearch
+              maxLength={50}
               style={{ width: "100%" }}
               value={t.titleSettings.title || undefined}
               onChange={(val) => t.updateTitle(val || "")}
@@ -99,9 +95,10 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
                 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>
         </>
       )}