更新

Docs/BACKEND_DEV.md

@@ -86,7 +86,7 @@ backend/
 - `custom_assignments` 每项使用 `material_path/start/end/source_start/source_end?`，并以时间轴可见段为准。
 - `output_aspect_ratio` 仅允许 `9:16` / `16:9`，默认 `9:16`。
 - 标题显示模式参数：
-  - `title_display_mode`: `short` / `persistent`（默认 `short`）
+  - `title_display_mode`: `short` / `persistent`（默认 `short`，对主标题与副标题统一生效）
   - `title_duration`: 默认 `4.0`（秒），仅 `short` 模式生效
 - 片头副标题参数：
   - `secondary_title`: 副标题文字（可选，限 20 字），仅在视频画面中显示，不参与发布标题

Docs/BACKEND_README.md

@@ -156,7 +156,7 @@ backend/
   - `advanced`: 强制 LatentSync
 - `language`: TTS 语言区域（默认 `zh-CN`；会映射为 Whisper 的 `zh/en/...` 与 CosyVoice 的 `Chinese/English/Auto`）
 - `title`: 片头标题文字
-- `title_display_mode`: 标题显示模式（`short` / `persistent`，默认 `short`）
+- `title_display_mode`: 标题显示模式（`short` / `persistent`，默认 `short`；该模式对主标题与副标题统一生效）
 - `title_duration`: 标题显示时长（秒，默认 `4.0`；`short` 模式生效）
 - `subtitle_style_id`: 字幕样式 ID
 - `title_style_id`: 标题样式 ID

Docs/DevLogs/Day31.md

@@ -312,6 +312,51 @@ async def preview_voice_get(voice: str, current_user: dict = Depends(get_current
 
 ---
 
+## ✅ 11) 首页「AI生成标题标签」按钮位置优化（迁移到四、标题与字幕）
+
+### 设计结论
+
+- 将 `AI生成标题标签` 从「一、文案提取与编辑」迁移到「四、标题与字幕」
+- 标题区改为两行：
+  - 第一行：`四、标题与字幕` 标题 + 右侧 `AI生成标题标签`
+  - 第二行：右对齐放置 `标题短暂显示/常驻显示` + `预览样式`
+- 显示语义补充：`标题短暂显示/常驻显示` 对主标题与副标题统一生效（常驻=主/副标题都常驻）
+- 不额外增加提示文案，保持界面简洁
+- `AI生成标题标签` 外观对齐 `在线录音` 按钮的圆角与尺寸（`rounded-lg` + 同级按钮尺寸），颜色保留原蓝色渐变
+
+### 结果
+
+- 标题相关动作集中到同一板块，避免用户在「一」和「四」之间来回跳转
+- 行内层级更明确：AI 动作在标题同层，配置项与预览在下一行
+- AI 按钮圆角与尺寸更柔和，配色仍保持原蓝色渐变，视觉更统一
+
+### 验证
+
+- `npm run build`（frontend）✅
+- `pm2 restart vigent2-frontend` ✅
+
+---
+
+## ✅ 12) 文案编辑框右下角扩展角标（弹出大编辑器）
+
+### 设计与实现
+
+- 在「一、文案提取与编辑」主输入框右下角新增角标按钮（点击后打开扩展编辑器）
+- 扩展编辑器使用 `AppModal`，提供更大编辑空间（高约 `66vh`）
+- 主输入框与弹窗内输入框共享同一份 `text` 状态，双向实时同步
+- 为避免角标遮挡正文，主输入框增加右下内边距（`pr-9 pb-8`）
+- 角标样式进一步极简化：仅保留双箭头图标，去掉外框容器并贴近输入框边缘
+- 角标位置微调为更协调的“上移+右移”：`right-0.5 bottom-2`，并固定点击区域 `h-5 w-5`
+- 修复扩展编辑输入焦点丢失：`AppModal` 改为使用 `onCloseRef` 处理 ESC，避免父组件重渲染时 effect 误清理导致 textarea 失焦
+- 移除扩展编辑输入框紫色聚焦边框，改为中性边框高亮（`focus:border-white/25`）
+
+### 验证
+
+- `npm run build`（frontend）✅
+- `pm2 restart vigent2-frontend` ✅
+
+---
+
 ## 📁 今日主要修改文件
 
 | 文件 | 改动 |
@@ -320,9 +365,10 @@ async def preview_voice_get(voice: str, current_user: dict = Depends(get_current
 | `backend/app/modules/videos/schemas.py` | 新增 `VoicePreviewRequest` |
 | `frontend/src/features/home/ui/VoiceSelector.tsx` | 音色下拉增加试听按钮，改为 GET 音频流播放 |
 | `frontend/src/features/home/model/useHomeController.ts` | 录音状态重置、`discardRecording` |
-| `frontend/src/features/home/ui/HomePage.tsx` | 透传录音弃用动作 |
+| `frontend/src/features/home/ui/HomePage.tsx` | 透传录音弃用动作；将 `AI生成标题标签` 事件改为传入 `TitleSubtitlePanel` |
 | `frontend/src/features/home/ui/RefAudioPanel.tsx` | 上传/录音入口重排；录音改弹窗；使用/弃用流程 |
-| `frontend/src/features/home/ui/ScriptEditor.tsx` | 文案编辑区按钮视觉统一（含 AI智能改写/保存文案） |
+| `frontend/src/features/home/ui/ScriptEditor.tsx` | 文案编辑区按钮视觉统一；移除 `AI生成标题标签`（职责回归标题板块）；新增输入框右下角扩展角标与大编辑弹窗；角标改为双箭头极简贴边样式并微调到 `right-0.5 bottom-2`；输入框去除紫色聚焦边框 |
+| `frontend/src/features/home/ui/TitleSubtitlePanel.tsx` | 标题区改为“首行标题+AI、次行右对齐设置+预览”；AI按钮外观对齐在线录音按钮（软圆角） |
 | `frontend/src/features/home/ui/RefAudioPanel.tsx` | 录音完成试听条改为自定义深色播放器（替换原生白色控制条） |
 | `frontend/src/features/home/ui/RefAudioPanel.tsx` | 使用录音后弹窗立即关闭，上传识别后台进行（提升交互流畅度） |
 | `frontend/src/features/publish/model/usePublishController.ts` | 发布改为受限并发（并发度=2），缩短多平台发布总耗时 |
@@ -331,17 +377,17 @@ async def preview_voice_get(voice: str, current_user: dict = Depends(get_current
 | `backend/app/services/publish_service.py` | `save_cookie_string` 非 bilibili 统一存储为 Playwright `storage_state`；小红书 uploader 透传 `user_id` |
 | `backend/app/services/qr_login_service.py` | 抖音导航超时容错 + 微信二维码提取增强 + 小红书登录自动切换到扫码模式并提取二维码 |
 | `backend/app/services/uploader/weixin_uploader.py` | `file_input empty` 告警策略优化：先检测上传信号，非最后一次重试降级为 info |
-| `frontend/src/shared/ui/AppModal.tsx` | 统一弹窗组件 + 无障碍语义 + 焦点管理 + 多弹窗滚动锁计数 |
+| `frontend/src/shared/ui/AppModal.tsx` | 统一弹窗组件 + 无障碍语义 + 焦点管理 + 多弹窗滚动锁计数；新增 `onCloseRef` 避免回调引用变化引发的意外失焦 |
 | `frontend/src/components/VideoPreviewModal.tsx` | 迁移到 `AppModal` |
 | `frontend/src/features/home/ui/ScriptExtractionModal.tsx` | 迁移到 `AppModal` |
 | `frontend/src/features/home/ui/RewriteModal.tsx` | 迁移到 `AppModal` |
 | `frontend/src/features/home/ui/ClipTrimmer.tsx` | 迁移到 `AppModal` |
 | `frontend/src/components/AccountSettingsDropdown.tsx` | 修改密码弹窗迁移到 `AppModal` |
 | `frontend/src/features/publish/ui/PublishPage.tsx` | 扫码登录（QR）弹窗迁移到 `AppModal` + 二维码白底留白容器优化（避免边缘观感被裁） |
-| `Docs/FRONTEND_DEV.md` | 新增统一弹窗规范（AppModal）和录音交互规范 |
-| `Docs/FRONTEND_README.md` | 增补录音入口与弹窗交互说明 |
-| `Docs/BACKEND_README.md` | 增补 `voice-preview` 接口说明；更新发布 API 路径（`/login/{platform}` 等）并链接发布专项文档 |
-| `Docs/BACKEND_DEV.md` | 更新后端规范中的发布器覆盖范围与小红书配置项；补充发布专项文档指引 |
+| `Docs/FRONTEND_DEV.md` | 新增统一弹窗规范（AppModal）和录音交互规范；补充文案扩展编辑也统一走 AppModal |
+| `Docs/FRONTEND_README.md` | 增补录音入口与弹窗交互说明；明确“标题常驻显示”对主/副标题同时生效；补充文案输入框扩展编辑器说明 |
+| `Docs/BACKEND_README.md` | 增补 `voice-preview` 接口说明；更新发布 API 路径（`/login/{platform}` 等）并链接发布专项文档；补充 `title_display_mode` 对主/副标题统一生效说明 |
+| `Docs/BACKEND_DEV.md` | 更新后端规范中的发布器覆盖范围与小红书配置项；补充发布专项文档指引；补充 `title_display_mode` 主/副标题统一生效约定 |
 | `Docs/PUBLISH_DEPLOY.md` | 新增多平台发布专项文档（登录实现、自动化发布流程、部署要点与排障） |
 | `Docs/DEPLOY_MANUAL.md` | 部署参数与扫码说明补充小红书要点；新增发布专项文档入口 |
 | `README.md` | 文档中心新增 `PUBLISH_DEPLOY.md` 入口；发布结果可视化描述补齐小红书 |
@@ -398,6 +444,9 @@ async def preview_voice_get(voice: str, current_user: dict = Depends(get_current
 - 回写 `README.md`，补充发布专项文档入口与小红书发布成功截图能力描述
 - 回写 `Docs/TASK_COMPLETE.md`，补齐 Day31 任务完成记录
 - 回写 `Docs/DOC_RULES.md`，同步文档更新规则到当前文档结构与工具链
+- 首页「AI生成标题标签」按钮迁移到「四、标题与字幕」并固定标题同层最右；显示方式与预览下沉到下一行右侧
+- 文案输入框右下角新增扩展角标，支持弹出大编辑器进行长文案编辑
+- 文档补充：`标题短暂显示/常驻显示` 对主标题与副标题统一生效（常驻=主/副标题全程显示）
 - 非 bilibili 平台 cookie 保存为 `storage_state` 格式
 - 小红书登录二维码自动切换（短信登录 -> 扫码登录）与提取修复
 - 对应构建/重启/冒烟验证记录

Docs/FRONTEND_DEV.md

@@ -212,7 +212,7 @@ body {
 
 ## 统一弹窗规范 (AppModal)
 
-所有居中弹窗（如视频预览、文案提取、AI 改写、录音、密码修改）统一使用 `@/shared/ui/AppModal` + `AppModalHeader`：
+所有居中弹窗（如视频预览、文案提取、AI 改写、文案扩展编辑、录音、密码修改）统一使用 `@/shared/ui/AppModal` + `AppModalHeader`：
 
 - 统一遮罩与层级：`fixed inset-0` + `bg-black/80` + `backdrop-blur-sm` + 明确 `z-index`
 - 统一挂载位置：通过 Portal 挂载到 `document.body`，避免局部容器/层叠上下文影响，确保是全页面弹窗

Docs/FRONTEND_README.md

@@ -11,7 +11,7 @@ ViGent2 的前端界面，采用 Next.js 16 + TailwindCSS 构建。
 ## ✨ 核心功能
 
 ### 1. 视频生成 (`/`)
-- **一、文案提取与编辑**: 文案输入/提取/翻译/保存。
+- **一、文案提取与编辑**: 文案输入/提取/翻译/保存；输入框右下角支持一键扩展到大编辑器。
 - **二、配音**: 配音方式（EdgeTTS/声音克隆）+ 配音列表（生成/试听/管理）合并为一个板块。
 - **三、素材编辑**: 视频素材（上传/选择/管理）+ 时间轴编辑（波形/色块/拖拽排序）合并为一个板块。
 - **四、标题与字幕**: 片头标题/副标题/字幕样式配置；短暂显示/常驻显示；样式预览使用视频片头帧作为真实背景。
@@ -60,7 +60,7 @@ ViGent2 的前端界面，采用 Next.js 16 + TailwindCSS 构建。
 - **画面比例控制**: 时间轴顶部支持 `9:16 / 16:9` 输出比例选择，设置持久化并透传后端。
 
 ### 5. 字幕与标题
-- **片头标题**: 可选输入，限制 15 字；支持”短暂显示 / 常驻显示”，默认短暂显示（4 秒），对标题和副标题同时生效。
+- **片头标题**: 可选输入，限制 15 字；支持”短暂显示 / 常驻显示”，默认短暂显示（4 秒）；`常驻显示` 时主标题与副标题都会全程显示。
 - **片头副标题**: 可选输入，限制 20 字；显示在主标题下方，用于补充说明或悬念引导；独立样式配置（字体/字号/颜色/间距），可由 AI 同时生成；与标题共享显示模式设定；仅在视频画面中显示，不参与发布标题。
 - **标题同步**: 首页片头标题修改会同步到发布信息标题。
 - **逐字高亮字幕**: 卡拉OK效果，默认开启。

Docs/task_complete.md

@@ -26,6 +26,8 @@
 - [x] **实测闭环**: 小红书 `POST /api/publish` 实测成功（45.77s）并可访问成功截图接口。
 - [x] **文档补齐**: 新增 `Docs/PUBLISH_DEPLOY.md`，并回写 `README.md`、`BACKEND_README.md`、`BACKEND_DEV.md`、`DEPLOY_MANUAL.md`。
 - [x] **文档规则对齐**: 更新 `Docs/DOC_RULES.md`，补充发布相关“三检”与敏感信息处理规范，加入 `PUBLISH_DEPLOY.md` 检查项，工具规范改为 `Read/Grep/apply_patch`，并对齐 TASK_COMPLETE 检查清单。
+- [x] **首页交互微调**: `AI生成标题标签` 按钮迁移到“四、标题与字幕”标题同层最右；`标题显示方式 + 预览样式` 下沉到下一行右侧；AI按钮圆角/尺寸对齐“在线录音”，配色保留原蓝色渐变；文档明确 `title_display_mode` 对主/副标题统一生效。
+- [x] **文案编辑扩展**: 在文案输入框右下角新增扩展角标，点击后弹出大编辑器，主框与弹窗内文案实时同步；角标样式改为双箭头极简贴边并微调到 `right-0.5 bottom-2`；修复扩展输入框打字后失焦问题，移除紫色聚焦边框。
 
 ### Day 30: Remotion 缓存修复 + 编码流水线质量优化 + 唇形同步容错 + 统一下拉交互
 - [x] **Remotion 缓存 404 修复**: bundle 缓存命中时，新生成的视频/字体文件不在旧缓存 `public/` 目录 → 404 → 回退 FFmpeg（无标题字幕）。改为硬链接（`fs.linkSync`）当前渲染所需文件到缓存目录。

frontend/src/features/home/ui/HomePage.tsx

@@ -223,8 +223,6 @@ export function HomePage() {
               onChangeText={setText}
               onOpenExtractModal={() => setExtractModalOpen(true)}
               onOpenRewriteModal={() => setRewriteModalOpen(true)}
-              onGenerateMeta={handleGenerateMeta}
-              isGeneratingMeta={isGeneratingMeta}
               onTranslate={handleTranslate}
               isTranslating={isTranslating}
               hasOriginalText={originalText !== null}
@@ -362,6 +360,9 @@ export function HomePage() {
             <TitleSubtitlePanel
               showStylePreview={showStylePreview}
               onTogglePreview={() => setShowStylePreview((prev) => !prev)}
+              onGenerateMeta={handleGenerateMeta}
+              isGeneratingMeta={isGeneratingMeta}
+              canGenerateMeta={!!text.trim()}
               videoTitle={videoTitle}
               onTitleChange={titleInput.handleChange}
               onTitleCompositionStart={titleInput.handleCompositionStart}

frontend/src/features/home/ui/ScriptEditor.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState } from "react";
-import { FileText, History, Languages, Loader2, RotateCcw, Save, Sparkles, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FileText, History, Languages, Loader2, Maximize2, RotateCcw, Save, Sparkles, Trash2 } from "lucide-react";
 import type { SavedScript } from "@/features/home/model/useSavedScripts";
+import { AppModal, AppModalHeader } from "@/shared/ui/AppModal";
 
 const LANGUAGES = [
   { code: "English", label: "英语 English" },
@@ -19,8 +20,6 @@ interface ScriptEditorProps {
   onChangeText: (value: string) => void;
   onOpenExtractModal: () => void;
   onOpenRewriteModal: () => void;
-  onGenerateMeta: () => void;
-  isGeneratingMeta: boolean;
   onTranslate: (targetLang: string) => void;
   isTranslating: boolean;
   hasOriginalText: boolean;
@@ -36,8 +35,6 @@ export function ScriptEditor({
   onChangeText,
   onOpenExtractModal,
   onOpenRewriteModal,
-  onGenerateMeta,
-  isGeneratingMeta,
   onTranslate,
   isTranslating,
   hasOriginalText,
@@ -54,6 +51,10 @@ export function ScriptEditor({
   const langMenuRef = useRef<HTMLDivElement>(null);
   const [showHistoryMenu, setShowHistoryMenu] = useState(false);
   const historyMenuRef = useRef<HTMLDivElement>(null);
+  const [isExpandedEditorOpen, setIsExpandedEditorOpen] = useState(false);
+  const handleCloseExpandedEditor = useCallback(() => {
+    setIsExpandedEditorOpen(false);
+  }, []);
 
   useEffect(() => {
     if (!showLangMenu) return;
@@ -193,34 +194,25 @@ export function ScriptEditor({
               </div>
             )}
           </div>
-          <button
-            onClick={onGenerateMeta}
-            disabled={isGeneratingMeta || !text.trim()}
-            className={`${actionBtnBase} ${isGeneratingMeta || !text.trim()
-              ? actionBtnDisabled
-              : "bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white"
-              }`}
-          >
-            {isGeneratingMeta ? (
-              <>
-                <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                生成中...
-              </>
-            ) : (
-              <>
-                <Sparkles className="h-3.5 w-3.5" />
-                AI生成标题标签
-              </>
-            )}
-          </button>
         </div>
       </div>
-      <textarea
-        value={text}
-        onChange={(e) => onChangeText(e.target.value)}
-        placeholder="请输入你想说的话..."
-        className="w-full h-40 bg-black/30 border border-white/10 rounded-xl p-4 text-white placeholder-gray-500 resize-none focus:outline-none focus:border-purple-500 transition-colors hide-scrollbar"
-      />
+      <div className="relative">
+        <textarea
+          value={text}
+          onChange={(e) => onChangeText(e.target.value)}
+          placeholder="请输入你想说的话..."
+          className="w-full h-40 bg-black/30 border border-white/10 rounded-xl p-4 pr-6 pb-6 text-white placeholder-gray-500 resize-none focus:outline-none focus:border-white/25 transition-colors hide-scrollbar"
+        />
+        <button
+          type="button"
+          onClick={() => setIsExpandedEditorOpen(true)}
+          className="absolute right-0.5 bottom-2 h-5 w-5 text-gray-400/85 hover:text-white focus:outline-none transition-colors inline-flex items-center justify-center"
+          aria-label="扩展文案编辑器"
+          title="扩展编辑"
+        >
+          <Maximize2 className="h-4 w-4" />
+        </button>
+      </div>
       <div className="flex items-center justify-between mt-2 text-sm text-gray-400">
         <span>{text.length} 字</span>
         <div className="flex items-center gap-2">
@@ -250,6 +242,27 @@ export function ScriptEditor({
           </button>
         </div>
       </div>
+
+      <AppModal
+        isOpen={isExpandedEditorOpen}
+        onClose={handleCloseExpandedEditor}
+        panelClassName="w-full max-w-5xl max-h-[92vh] rounded-2xl border border-white/10 bg-[#171821]/95 shadow-[0_24px_80px_rgba(0,0,0,0.55)] overflow-hidden flex flex-col"
+      >
+        <AppModalHeader
+          title="扩展文案编辑"
+          subtitle="在更大空间里编写与调整文案"
+          onClose={handleCloseExpandedEditor}
+          actions={<span className="text-xs text-gray-400 tabular-nums">{text.length} 字</span>}
+        />
+        <div className="flex-1 p-4 sm:p-5">
+          <textarea
+            value={text}
+            onChange={(e) => onChangeText(e.target.value)}
+            placeholder="请输入你想说的话..."
+            className="w-full h-[66vh] min-h-[320px] bg-black/30 border border-white/10 rounded-xl p-4 text-white placeholder-gray-500 resize-none focus:outline-none focus:border-white/25 transition-colors hide-scrollbar"
+          />
+        </div>
+      </AppModal>
     </div>
   );
 }

frontend/src/features/home/ui/TitleSubtitlePanel.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, Eye, Check } from "lucide-react";
+import { ChevronDown, Eye, Check, Loader2, Sparkles } from "lucide-react";
 import { FloatingStylePreview } from "@/features/home/ui/FloatingStylePreview";
 import { SelectPopover } from "@/shared/ui/SelectPopover";
 
@@ -35,6 +35,9 @@ interface TitleStyleOption {
 interface TitleSubtitlePanelProps {
   showStylePreview: boolean;
   onTogglePreview: () => void;
+  onGenerateMeta: () => void;
+  isGeneratingMeta: boolean;
+  canGenerateMeta: boolean;
   videoTitle: string;
   onTitleChange: (value: string) => void;
   onTitleCompositionStart?: () => void;
@@ -76,6 +79,9 @@ interface TitleSubtitlePanelProps {
 export function TitleSubtitlePanel({
   showStylePreview,
   onTogglePreview,
+  onGenerateMeta,
+  isGeneratingMeta,
+  canGenerateMeta,
   videoTitle,
   onTitleChange,
   onTitleCompositionStart,
@@ -125,63 +131,88 @@ export function TitleSubtitlePanel({
 
   return (
     <div className="bg-white/5 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm">
-      <div className="flex items-center justify-between mb-4 gap-2">
-        <h2 className="text-base sm:text-lg font-semibold text-white flex items-center gap-2">
-          四、标题与字幕
-        </h2>
-        <div className="flex items-center gap-1.5">
-          <div className="shrink-0">
-            <SelectPopover
-              sheetTitle="标题显示方式"
-              trigger={({ open, toggle }) => (
-                <button
-                  type="button"
-                  onClick={toggle}
-                  className="min-w-[146px] rounded-lg border border-white/10 bg-black/25 px-2.5 py-1.5 text-left text-xs text-gray-200 transition-colors hover:border-white/30"
-                  aria-label="标题显示方式"
-                >
-                  <span className="flex items-center justify-between gap-2">
-                    <span className="whitespace-nowrap">{currentTitleDisplay.label}</span>
-                    <ChevronDown className={`h-3.5 w-3.5 text-gray-400 transition-transform ${open ? "rotate-180" : ""}`} />
-                  </span>
-                </button>
-              )}
-            >
-              {({ close }) => (
-                <div className="space-y-1">
-                  {titleDisplayOptions.map((opt) => {
-                    const isSelected = opt.value === titleDisplayMode;
-                    return (
-                      <button
-                        key={opt.value}
-                        type="button"
-                        data-popover-selected={isSelected ? "true" : undefined}
-                        onClick={() => {
-                          onTitleDisplayModeChange(opt.value);
-                          close();
-                        }}
-                        className={`flex w-full items-center justify-between rounded-lg border px-3 py-2 text-left transition-colors ${isSelected
-                          ? "border-purple-500 bg-purple-500/20"
-                          : "border-white/10 bg-white/5 hover:border-white/30"
-                          }`}
-                      >
-                        <span className="text-xs text-white whitespace-nowrap">{opt.label}</span>
-                        {isSelected && <Check className="h-3.5 w-3.5 text-purple-300" />}
-                      </button>
-                    );
-                  })}
-                </div>
-              )}
-            </SelectPopover>
-          </div>
+      <div className="mb-4 space-y-2">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <h2 className="text-base sm:text-lg font-semibold text-white flex items-center gap-2">
+            四、标题与字幕
+          </h2>
           <button
-            onClick={onTogglePreview}
-            className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300 flex items-center gap-1"
+            onClick={onGenerateMeta}
+            disabled={isGeneratingMeta || !canGenerateMeta}
+            className={`px-3 py-1.5 text-xs rounded-lg transition-colors inline-flex items-center gap-1.5 ${
+              isGeneratingMeta || !canGenerateMeta
+                ? "bg-gray-600 cursor-not-allowed text-gray-400"
+                : "bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white"
+            }`}
           >
-            <Eye className="h-3.5 w-3.5" />
-            {showStylePreview ? "收起预览" : "预览样式"}
+            {isGeneratingMeta ? (
+              <>
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                生成中...
+              </>
+            ) : (
+              <>
+                <Sparkles className="h-3.5 w-3.5" />
+                AI生成标题标签
+              </>
+            )}
           </button>
         </div>
+        <div className="flex justify-end">
+          <div className="flex flex-wrap items-center justify-end gap-1.5">
+            <div className="shrink-0">
+              <SelectPopover
+                sheetTitle="标题显示方式"
+                trigger={({ open, toggle }) => (
+                  <button
+                    type="button"
+                    onClick={toggle}
+                    className="min-w-[146px] rounded-lg border border-white/10 bg-black/25 px-2.5 py-1.5 text-left text-xs text-gray-200 transition-colors hover:border-white/30"
+                    aria-label="标题显示方式"
+                  >
+                    <span className="flex items-center justify-between gap-2">
+                      <span className="whitespace-nowrap">{currentTitleDisplay.label}</span>
+                      <ChevronDown className={`h-3.5 w-3.5 text-gray-400 transition-transform ${open ? "rotate-180" : ""}`} />
+                    </span>
+                  </button>
+                )}
+              >
+                {({ close }) => (
+                  <div className="space-y-1">
+                    {titleDisplayOptions.map((opt) => {
+                      const isSelected = opt.value === titleDisplayMode;
+                      return (
+                        <button
+                          key={opt.value}
+                          type="button"
+                          data-popover-selected={isSelected ? "true" : undefined}
+                          onClick={() => {
+                            onTitleDisplayModeChange(opt.value);
+                            close();
+                          }}
+                          className={`flex w-full items-center justify-between rounded-lg border px-3 py-2 text-left transition-colors ${isSelected
+                            ? "border-purple-500 bg-purple-500/20"
+                            : "border-white/10 bg-white/5 hover:border-white/30"
+                            }`}
+                        >
+                          <span className="text-xs text-white whitespace-nowrap">{opt.label}</span>
+                          {isSelected && <Check className="h-3.5 w-3.5 text-purple-300" />}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </SelectPopover>
+            </div>
+            <button
+              onClick={onTogglePreview}
+              className="px-2 py-1 text-xs bg-white/10 hover:bg-white/20 rounded text-gray-300 flex items-center gap-1"
+            >
+              <Eye className="h-3.5 w-3.5" />
+              {showStylePreview ? "收起预览" : "预览样式"}
+            </button>
+          </div>
+        </div>
       </div>
 
       {showStylePreview && (

frontend/src/shared/ui/AppModal.tsx

@@ -24,12 +24,17 @@ export function AppModal({
   lockBodyScroll = true,
 }: AppModalProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const onCloseRef = useRef(onClose);
+
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
 
   useEffect(() => {
     if (!isOpen) return;
 
     const handleEsc = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onClose();
+      if (event.key === "Escape") onCloseRef.current();
     };
 
     const previousActiveElement = document.activeElement as HTMLElement | null;
@@ -64,7 +69,7 @@ export function AppModal({
 
       previousActiveElement?.focus?.();
     };
-  }, [isOpen, lockBodyScroll, onClose]);
+  }, [isOpen, lockBodyScroll]);
 
   if (!isOpen || typeof document === "undefined") return null;