From e69911e6e01e46a9c6e9cd25f4df298337b47e76 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Tue, 4 Aug 2026 14:41:40 +0800
Subject: [PATCH] feat(title): AI auto-select shows read-only title + swap
 button + style panel

---
 .../components/Step4TitleSettings.tsx         | 111 +++++++++++++-----
 1 file changed, 84 insertions(+), 27 deletions(-)

diff --git a/apps/web/src/pages/generate/components/Step4TitleSettings.tsx b/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
index 1ceb6fc95..5f078d1f0 100644
--- a/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
+++ b/apps/web/src/pages/generate/components/Step4TitleSettings.tsx
@@ -21,34 +21,91 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
     <div className="xx-form-section">
       <h3>📝 选择标题</h3>
 
-      <AiTitleGenerator
-        inputValue={t.aiTitleInput}
-        onInputChange={t.setAiTitleInput}
-        generating={t.aiTitleGenerating}
-        onGenerate={t.handleGenerateAiTitles}
-        results={t.aiTitleResults}
-        hasGenerated={t.hasGeneratedTitles}
-        onSelect={t.handleSelectAiTitle}
-        selectedTitle={t.titleSettings.title}
-        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 ${t.titleSettings.aiAutoSelect ? "active" : ""}`}
-          onClick={t.toggleAiAutoSelect}
-        >
-          <div className="xx-switch-knob" />
-        </div>
-      </div>
-
-      {!t.titleSettings.aiAutoSelect && (
+      {/* AI 自动选择模式 */}
+      {t.titleSettings.aiAutoSelect ? (
         <>
+          <div className="xx-title-ai-toggle">
+            <span className="xx-toggle-label">AI 自动选择标题</span>
+            <div
+              className={`xx-switch ${t.titleSettings.aiAutoSelect ? "active" : ""}`}
+              onClick={t.toggleAiAutoSelect}
+            >
+              <div className="xx-switch-knob" />
+            </div>
+          </div>
+
+          {/* 显示当前 AI 选中的标题（只读）+ 换一个按钮 */}
+          <div className="xx-form-field">
+            <label>当前 AI 选定标题</label>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                padding: "8px 12px",
+                background: "var(--bg-secondary, rgba(0,0,0,0.04))",
+                borderRadius: 8,
+                fontSize: 14,
+                color: "var(--text-primary, #333)",
+              }}
+            >
+              <span style={{ flex: 1 }}>{t.titleSettings.title || "AI 将自动为你选择标题"}</span>
+              <button
+                type="button"
+                className="xx-btn xx-btn-primary"
+                style={{ flexShrink: 0, fontSize: 13, padding: "4px 12px" }}
+                onClick={t.autoGenerateTitle}
+              >
+                🔄 换一个
+              </button>
+            </div>
+          </div>
+
+          {/* 样式面板始终可见 */}
+          <TitleStylePanel
+            settings={t.titleSettings}
+            onUpdatePosition={t.updatePosition}
+            onUpdateFont={t.updateFont}
+            onUpdateSize={t.updateSize}
+            onToggleBold={t.toggleBold}
+            onToggleItalic={t.toggleItalic}
+            onToggleStroke={t.toggleStroke}
+            onToggleShadow={t.toggleShadow}
+            onApplyPreset={t.applyPreset}
+            activePreset={t.activePreset}
+            titlePresets={t.titlePresets}
+            POSITION_OPTIONS={POSITION_OPTIONS}
+            FONT_OPTIONS={FONT_OPTIONS}
+          />
+        </>
+      ) : (
+        <>
+          <AiTitleGenerator
+            inputValue={t.aiTitleInput}
+            onInputChange={t.setAiTitleInput}
+            generating={t.aiTitleGenerating}
+            onGenerate={t.handleGenerateAiTitles}
+            results={t.aiTitleResults}
+            hasGenerated={t.hasGeneratedTitles}
+            onSelect={t.handleSelectAiTitle}
+            selectedTitle={t.titleSettings.title}
+            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 ${t.titleSettings.aiAutoSelect ? "active" : ""}`}
+              onClick={t.toggleAiAutoSelect}
+            >
+              <div className="xx-switch-knob" />
+            </div>
+          </div>
+
           <div className="xx-form-field">
             <label>从标题库选择</label>
             <Select