From c06c095b748b28fbf413d0c00ef0e4cac955e16a Mon Sep 17 00:00:00 2001
From: CI Bot <ci@xiaoxiajianji.com>
Date: Wed, 9 Sep 2026 18:26:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20PanelTitleConfig=20?=
 =?UTF-8?q?=E6=9C=AA=E4=BD=BF=E7=94=A8=E5=AF=BC=E5=85=A5=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E7=9A=84=20TS6133=20=E7=BC=96=E8=AF=91=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=8C=E6=95=B4=E5=AE=9E=E7=8E=B0=20TextArea=20+=20?=
 =?UTF-8?q?TitleLibraryAutoComplete?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai-avatar/components/PanelTitleConfig.tsx | 68 ++++++++-----------
 1 file changed, 27 insertions(+), 41 deletions(-)

diff --git a/apps/web/src/pages/ai-avatar/components/PanelTitleConfig.tsx b/apps/web/src/pages/ai-avatar/components/PanelTitleConfig.tsx
index 5411d7efa..d7e48410c 100644
--- a/apps/web/src/pages/ai-avatar/components/PanelTitleConfig.tsx
+++ b/apps/web/src/pages/ai-avatar/components/PanelTitleConfig.tsx
@@ -33,6 +33,14 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
   /** TitleStylePanel 内部高亮的预设 key（面板本地状态） */
   const [activePreset, setActivePreset] = useState<string | null>(null)
 
+  /** 标题库选项（复用智能剪辑的标题库） */
+  const [titleOptions, setTitleOptions] = useState<TitleOption[]>([])
+  useEffect(() => {
+    getTitles()
+      .then((items) => setTitleOptions(items.map((t) => ({ label: t.content, value: t.content }))))
+      .catch(() => setTitleOptions([]))
+  }, [])
+
   /** AiAvatarTitleConfig → TitleSettings（补齐 aiAutoSelect / 自由坐标字段） */
   const titleSettings: TitleSettings = useMemo(
     () => ({
@@ -66,52 +74,32 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
     })
   }
 
-  const [showTitleLibrary, setShowTitleLibrary] = useState(false)
-
   return (
     <div className="aa-title-config">
-      {/* 主标题输入 */}
+      {/* 主标题输入 — TextArea 多行 + 标题库选择 */}
       <div className="aa-form-field">
         <label className="aa-label">主标题</label>
-        <div style={{ display: "flex", gap: 8 }}>
-          <input
-            className="aa-input aa-title-input"
+        <TextArea
+          className="aa-title-input"
+          placeholder="输入视频标题（支持 / 分行）"
+          value={titleConfig.title}
+          autoSize={{ minRows: 2, maxRows: 4 }}
+          maxLength={200}
+          onChange={(e) => onUpdate({ title: e.target.value })}
+          style={{ fontSize: 15 }}
+        />
+        <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 8 }}>
+          <span style={{ fontSize: 12, color: "#8c8ca1", whiteSpace: "nowrap" }}>📚 标题库</span>
+          <TitleLibraryAutoComplete
+            key={titleConfig.title}
+            placeholder="选择标题填入上方"
+            value=""
+            onChange={(val) => { if (val) onUpdate({ title: val }) }}
+            options={titleOptions}
+            maxLength={200}
             style={{ flex: 1 }}
-            type="text"
-            placeholder="输入视频标题（留空则不显示标题）"
-            value={titleConfig.title}
-            maxLength={30}
-            onChange={(e) => onUpdate({ title: e.target.value })}
           />
-          <button
-            type="button"
-            className="aa-btn aa-btn--ghost"
-            style={{ whiteSpace: "nowrap" }}
-            onClick={() => setShowTitleLibrary(true)}
-          >
-            📚 从标题库选择
-          </button>
         </div>
-        {titleConfig.title && (
-          <div
-            style={{
-              fontSize: 13,
-              padding: "6px 8px",
-              background: "#f8f8fc",
-              borderRadius: 6,
-              fontFamily: getFontFamily(titleConfig.font),
-              fontWeight: titleConfig.bold ? 700 : 400,
-              fontStyle: titleConfig.italic ? "italic" : "normal",
-              color: titleConfig.color,
-              textShadow: titleConfig.shadow ? "1px 1px 3px rgba(0,0,0,0.6)" : undefined,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            }}
-          >
-            {titleConfig.title}
-          </div>
-        )}
       </div>
 
       {/* 标题样式：直接复用智能剪辑 TitleStylePanel（位置/字体/字号/样式/预设） */}
@@ -142,8 +130,6 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
           自动生成字幕
         </label>
       </div>
-
-
     </div>
   )
 }