fix(1978): fix xiaoxia-gpu-worker.service bad unit file & log path permissions

- User=%i -> User=ying (%%i is template-only specifier, not valid here)
- After=musetalk.service -> After=musetalk-worker.service (match actual service name)
- Log path from /tmp/ to $HOME/ to avoid permission issues for ying user

alembic/versions/083_cover_title_config.py

@@ -1,26 +0,0 @@
-"""#2001 爆款标题样式面板升级: ai_avatar_render_jobs 新增 cover_title_config
-
-Revision ID: 083_cover_title_config
-Revises: 082_atom_clip_ai_tags
-Create Date: 2026-09-20
-"""
-
-import sqlalchemy as sa
-
-from alembic import op
-
-revision = "083_cover_title_config"
-down_revision = "082_atom_clip_ai_tags"
-branch_labels = None
-depends_on = None
-
-
-def upgrade() -> None:
-    op.add_column(
-        "ai_avatar_render_jobs",
-        sa.Column("cover_title_config", sa.JSON(), nullable=False, server_default=sa.text("'{}'")),
-    )
-
-
-def downgrade() -> None:
-    op.drop_column("ai_avatar_render_jobs", "cover_title_config")

alembic/versions/084_lipsync_jobs_style.py

@@ -1,26 +0,0 @@
-"""lipsync_jobs 新增 style 字段（TTS 语气风格）
-
-Revision ID: 084_lipsync_jobs_style
-Revises: 083_cover_title_config
-Create Date: 2026-09-21
-"""
-
-import sqlalchemy as sa
-
-from alembic import op
-
-revision = "084_lipsync_jobs_style"
-down_revision = "083_cover_title_config"
-branch_labels = None
-depends_on = None
-
-
-def upgrade() -> None:
-    op.add_column(
-        "lipsync_jobs",
-        sa.Column("style", sa.String(length=32), nullable=False, server_default=""),
-    )
-
-
-def downgrade() -> None:
-    op.drop_column("lipsync_jobs", "style")

apps/api/app/api/routes/ai_avatar_render.py

@@ -63,7 +63,6 @@ def create_render_job(
             b_roll_segments=[s.model_dump() for s in body.b_roll_segments],
             title_config=body.title_config,
             cover_config=body.cover_config,
-            cover_title_config=body.cover_title_config,
             project_id=body.project_id,
         )
     except AiAvatarRenderError as exc:

apps/api/app/api/routes/gpu_lipsync.py

@@ -93,7 +93,7 @@ def register_worker(
     svc: GpuLipsyncService = Depends(_get_svc),
     _token: str = Depends(_verify_gpu_token),
 ):
-    worker, cancel_task = svc.register_worker(
+    svc.register_worker(
         worker_id=body.worker_id,
         hostname=body.hostname,
         gpu_name=body.gpu_name,
@@ -101,7 +101,7 @@ def register_worker(
         capabilities=body.capabilities,
         task_id=body.task_id,
     )
-    return GpuWorkerRegisterResponse(ok=True, server_time=datetime.now(UTC), message="ok", cancel_task=cancel_task)
+    return GpuWorkerRegisterResponse(ok=True, server_time=datetime.now(UTC), message="ok")
 
 
 # ── GET /lipsync/poll — Worker 轮询拉任务 ─────────────────────────

apps/api/app/api/routes/lipsync.py

@@ -111,8 +111,6 @@ def create_lipsync_job(
             voice_id=body.voice_id,
             script_text=body.script_text,
             speed=body.speed,
-            style=body.style or "",
-            volume=body.volume if body.volume is not None else 50,
             emotion=body.emotion,
             enable_video_loop=body.enable_video_loop,
             project_id=body.project_id,
@@ -213,8 +211,6 @@ def preview_tts(
             voice_id=body.voice_id,
             script_text=body.script_text,
             speed=body.speed,
-            style=body.style or "",
-            volume=body.volume if body.volume is not None else 50,
             emotion=body.emotion,
         )
     except MediaKitError as exc:
@@ -346,13 +342,13 @@ def cancel_lipsync_job(
     current_user: AuthenticatedUser = Depends(get_current_user),
     svc: LipsyncService = Depends(_get_service),
 ):
-    """取消对口型任务（仅 pending/tts_processing/submitted/processing 状态可取消）."""
+    """取消对口型任务（仅 pending/tts_processing/submitted 状态可取消）."""
     job = svc.cancel_job(job_id, current_user.user.id)
     if job is None:
         raise HTTPException(status_code=404, detail="任务不存在")
     if job.status != "cancelled":
         raise HTTPException(
             status_code=400,
-            detail=f"任务状态 {job.status} 不可取消，仅 pending/tts_processing/submitted/processing 可取消",
+            detail=f"任务状态 {job.status} 不可取消，仅 pending/tts_processing/submitted 可取消",
         )
     return job

apps/api/app/api/routes/tts.py

@@ -207,9 +207,6 @@ def synthesize(
     synthesis_meta = {
         "speed": request.speed,
         "emotion": request.emotion or "",
-        "style": request.style or "",
-        "volume": request.volume if request.volume is not None else 50,
-        "pitch": request.pitch if request.pitch is not None else 1.0,
         "language": request.language or "zh-CN",
     }
     if request.metadata_:
@@ -657,9 +654,6 @@ def preview_tts(
             text=request.text,
             voice_id=actual_voice_id,
             speed=request.speed,
-            style=request.style or "",
-            volume=request.volume if request.volume is not None else 50,
-            pitch=request.pitch,
             emotion=request.emotion,
             language=getattr(request, "language", "zh-CN"),
         )

apps/api/app/schemas/ai_avatar_render.py

@@ -53,14 +53,9 @@ class CreateAiAvatarRenderRequest(BaseModel):
     script_id: str = Field("", description="文案 ID（选自文案库时传；手动输入文案直生场景可留空）")
     b_roll_segments: list[BRollSegment] = Field(default_factory=list, description="B-roll 片段列表")
     title_config: dict[str, Any] = Field(
-        default_factory=dict,
-        description="标题配置（可含 title_image_dataurl：前端 Canvas 渲染的标题 PNG dataURL；含 line_overrides 逐行样式）",
+        default_factory=dict, description="标题配置（可含 title_image_dataurl：前端 Canvas 渲染的标题 PNG dataURL）"
     )
     cover_config: dict[str, Any] = Field(default_factory=dict, description="封面配置")
-    cover_title_config: dict[str, Any] = Field(
-        default_factory=dict,
-        description="封面独立标题配置（#2001），结构同 title_config；为空时封面不叠标题",
-    )
     project_id: str = Field("", description="项目 ID")
 
     @field_validator("lipsync_job_id")
@@ -88,7 +83,6 @@ class AiAvatarRenderJobResponse(BaseModel):
     b_roll_segments: list[dict[str, Any]]
     title_config: dict[str, Any]
     cover_config: dict[str, Any]
-    cover_title_config: dict[str, Any] = Field(default_factory=dict, description="封面独立标题配置")
     status: str
     progress: int
     output_video_url: str

apps/api/app/schemas/gpu_lipsync.py

@@ -36,7 +36,6 @@ class GpuWorkerRegisterResponse(BaseModel):
     ok: bool = True
     server_time: datetime
     message: str = "ok"
-    cancel_task: bool = Field(False, description="当前心跳任务是否已被用户取消；为 true 时 Worker 应终止推理")
 
 
 # ── 轮询任务 ────────────────────────────────────────────────────

apps/api/app/schemas/lipsync.py

@@ -29,7 +29,6 @@ class LipsyncJobResponse(BaseModel):
     voice_id: str = ""
     script_text: str = ""
     speed: float = 1.0
-    style: str = ""
     emotion: str = ""
     mediakit_task_id: str
     status: str
@@ -68,14 +67,9 @@ class CreateLipsyncJobRequest(BaseModel):
     voice_id: str = Field("", description="音色 ID（预置音色或克隆音色 profile UUID）")
     script_text: str = Field("", description="要合成的文案（直生模式必填，最长 5000 字符）")
     speed: float = Field(1.0, ge=0.5, le=2.0, description="语速（0.5-2.0），默认 1.0")
-    style: Optional[str] = Field(
-        None,
-        description="语气风格（natural/sweet/excited/professional/news/livestream），可选；优先级高于 emotion",
-    )
-    volume: Optional[int] = Field(None, ge=0, le=100, description="音量（0-100），默认 50")
     emotion: str = Field(
         "",
-        description="[deprecated] 旧情绪参数，内部映射为 style",
+        description="情绪（英文枚举 neutral/happy/sad/angry/surprised/fearful/disgusted，或中文 中立/开心/难过/生气/惊讶/恐惧/厌恶；空为默认自然）",
     )
 
     enable_video_loop: bool = Field(
@@ -129,15 +123,10 @@ class AiAvatarTtsPreviewRequest(BaseModel):
     voice_id: str = Field(..., min_length=1, max_length=128, description="音色 ID")
     script_text: str = Field(..., min_length=1, max_length=5000, description="要合成的文案")
     speed: float = Field(1.0, ge=0.5, le=2.0, description="语速（0.5-2.0），默认 1.0")
-    style: Optional[str] = Field(
-        None,
-        description="语气风格（natural/sweet/excited/professional/news/livestream），可选；优先级高于 emotion",
-    )
-    volume: Optional[int] = Field(None, ge=0, le=100, description="音量（0-100），默认 50")
     emotion: str = Field(
         "neutral",
         max_length=32,
-        description="[deprecated] 旧情绪参数，内部映射为 style；默认 neutral",
+        description="情绪（英文枚举 neutral/happy/sad/angry/surprised/fearful/disgusted，或中文 中立/开心/难过/生气/惊讶/恐惧/厌恶；默认 neutral）",
     )
 
 

apps/api/app/schemas/tts.py

@@ -16,15 +16,9 @@ class TTSSynthesizeRequest(BaseModel):
     output_name: str = Field("", description="输出文件名")
     language: str = Field("zh-CN", description="语言")
     speed: float = Field(1.0, ge=0.5, le=2.0, description="语速")
-    style: Optional[str] = Field(
-        None,
-        description="语气风格（natural/sweet/excited/professional/news/livestream），可选；优先级高于 emotion",
-    )
-    volume: Optional[int] = Field(None, ge=0, le=100, description="音量（0-100），默认 50")
-    pitch: Optional[float] = Field(None, ge=0.5, le=2.0, description="音调（0.5-2.0），默认 1.0")
     emotion: str = Field(
         "",
-        description="[deprecated] 旧情绪参数，内部映射为 style；新接入请使用 style",
+        description="情绪（中文/英文：自然/兴奋/沉稳/亲切/开心/悲伤/愤怒/惊讶/恐惧/厌恶 等；通过 instruction 自然语言指令控制）",
     )
     voice_model: str = Field("", description="语音模型名称")
     voice_clone_profile_id: str = Field("", description="关联的音色克隆档案 ID")
@@ -119,14 +113,9 @@ class TTSPreviewRequest(BaseModel):
     text: str = Field(..., min_length=1, max_length=200, description="合成文本，限制 200 字")
     voice_id: str = Field(..., min_length=1, description="音色 ID")
     speed: float = Field(1.0, ge=0.5, le=2.0, description="语速")
-    style: Optional[str] = Field(
-        None,
-        description="语气风格（natural/sweet/excited/professional/news/livestream），可选；优先级高于 emotion",
-    )
-    volume: Optional[int] = Field(None, ge=0, le=100, description="音量（0-100），默认 50")
-    emotion: str = Field("", description="[deprecated] 旧情绪参数，内部映射为 style")
+    emotion: str = Field("", description="情绪（中文/英文：自然/兴奋/沉稳/亲切/开心/悲伤/愤怒/惊讶/恐惧/厌恶 等）")
     language: str = Field("zh-CN", description="语言（zh-CN/en-US 等）")
-    pitch: float = Field(1.0, ge=0.5, le=2.0, description="音调（0.5-2.0），默认 1.0")
+    pitch: float = Field(1.0, ge=0.5, le=2.0, description="音调（预留，当前未使用）")
 
 
 class TTSPreviewResponse(BaseModel):

apps/api/app/services/ai_avatar_render_service.py

@@ -61,7 +61,6 @@ class AiAvatarRenderService:
         b_roll_segments: list[dict[str, Any]] | None = None,
         title_config: dict[str, Any],
         cover_config: dict[str, Any],
-        cover_title_config: dict[str, Any] | None = None,
         project_id: str = "",
     ) -> AiAvatarRenderJob:
         """创建渲染任务.
@@ -113,7 +112,6 @@ class AiAvatarRenderService:
             b_roll_segments=[s if isinstance(s, dict) else s.model_dump() for s in (b_roll_segments or [])],
             title_config=title_config,
             cover_config=cover_config,
-            cover_title_config=cover_title_config or {},
             status="pending",
         )
         self.db.add(job)

apps/api/app/services/gpu_lipsync_service.py

@@ -50,16 +50,13 @@ class GpuLipsyncService:
         free_vram_mb: int = 0,
         capabilities: str = "musetalk",
         task_id: Optional[str] = None,
-    ) -> tuple[GpuWorkerModel, bool]:
+    ) -> GpuWorkerModel:
         """Worker 注册/心跳。
 
         task_id 非空时（Worker 推理期间的任务级心跳），同步把对应 processing
         任务的 last_heartbeat_at 续到当前时间，使长推理不会被
         ``_recover_timed_out_tasks`` 误回退。任务已结束 / 不属于该 worker
         （如已被超时回收重新派发）时忽略，不报错。
-
-        返回 ``(worker, cancel_task)``：当心跳任务已被用户取消时
-        ``cancel_task=True``，Worker 应尽快终止推理并释放 GPU。
         """
         now = datetime.now(UTC)
         worker = self.db.query(GpuWorkerModel).filter(GpuWorkerModel.worker_id == worker_id).one_or_none()
@@ -80,11 +77,10 @@ class GpuLipsyncService:
             worker.free_vram_mb = free_vram_mb
             worker.capabilities = capabilities or worker.capabilities
             worker.last_heartbeat_at = now
-        cancel_task = False
         if task_id:
-            cancel_task = self._touch_task_heartbeat(task_id, worker_id, now)
+            self._touch_task_heartbeat(task_id, worker_id, now)
         self.db.commit()
-        return worker, cancel_task
+        return worker
 
     # ── 轮询拉任务（Worker 调用） ──────────────────────────────────
 
@@ -170,11 +166,6 @@ class GpuLipsyncService:
             task.result_duration = duration_seconds or 0.0
             task.error_msg = ""
             task.finished_at = now
-        elif task.status == "cancelled":
-            # 用户已取消的任务，Worker 终止后上报失败，保持 cancelled 状态不回退
-            task.finished_at = now
-            task.error_msg = (error_msg or "用户取消")[:2000]
-            logger.info("GPU 任务 %s 已被用户取消，保持 cancelled 状态", task_id)
         else:
             # 失败：若仍可重试（已尝试次数 < MAX_ATTEMPTS）→ 回退 pending；否则 → failed
             if task.attempt < MAX_ATTEMPTS:
@@ -259,21 +250,15 @@ class GpuLipsyncService:
     def _result_key(self, task_id: str) -> str:
         return f"{self.RESULT_PREFIX}{task_id}.mp4"
 
-    def _touch_task_heartbeat(self, task_id: str, worker_id: str, now: datetime) -> bool:
+    def _touch_task_heartbeat(self, task_id: str, worker_id: str, now: datetime) -> None:
         """Worker 推理期间的任务级心跳：只刷新属于该 worker 且仍在 processing 的任务。
 
         任务不存在 / 已被超时回收重新派发 / 已完成 → 静默忽略（此时旧 worker 的
         结果上报会被结果接口按最终态处理）。
-
-        返回 ``cancel_task``：任务已被用户取消时为 True，Worker 应终止推理。
         """
         task = self.db.get(GpuLipsyncTaskModel, task_id)
         if task is None:
-            return False
-        # 任务已被用户取消 → 通知 Worker 终止推理
-        if task.status == "cancelled":
-            logger.info("任务心跳检测到已取消 task=%s worker=%s，通知 Worker 终止", task_id, worker_id)
-            return True
+            return
         if task.status != "processing" or task.worker_id != worker_id:
             logger.info(
                 "忽略过期任务心跳 task=%s worker=%s（status=%s owner=%s）",
@@ -282,11 +267,10 @@ class GpuLipsyncService:
                 task.status,
                 task.worker_id,
             )
-            return False
+            return
         task.last_heartbeat_at = now
         task.updated_at = now
         self.db.flush()
-        return False
 
     def _touch_worker(self, worker_id: str, now: datetime) -> None:
         if not worker_id:
@@ -387,7 +371,9 @@ class GpuLipsyncService:
             task = self.db.get(GpuLipsyncTaskModel, task_id)
             if task is None:
                 return None
-            if task.status in ("done", "failed", "cancelled"):
+            if task.status == "done":
+                return task
+            if task.status == "failed":
                 return task
             # pending/processing 继续等
             if time.monotonic() >= deadline:

apps/api/app/services/lipsync_service.py

@@ -111,8 +111,6 @@ class LipsyncService:
         script_text: str,
         speed: float,
         emotion: str,
-        style: str = "",
-        volume: int = 50,
     ) -> str:
         """TTS 直生：调 CosyVoice 合成音频并转存 OSS，返回可公网访问的音频 URL.
 
@@ -126,9 +124,7 @@ class LipsyncService:
                 text=script_text,
                 voice_id=actual_voice_id,
                 speed=speed,
-                style=style,
-                volume=volume,
-                emotion=emotion,
+                emotion=emotion,  # normalize 在 CosyVoiceService 内部完成
                 language="zh",
             )
         except CosyVoiceError as exc:
@@ -428,8 +424,6 @@ class LipsyncService:
         voice_id: str = "",
         script_text: str = "",
         speed: float = 1.0,
-        style: str = "",
-        volume: int = 50,
         emotion: str = "",
         enable_video_loop: bool = True,
         project_id: str = "",
@@ -478,7 +472,6 @@ class LipsyncService:
             voice_id=voice_id or "",
             script_text=script_text or "",
             speed=speed,
-            style=style or "",
             emotion=emotion or "",
             # 音频直传（含预合成）直接进入 pending（后续同步改为 submitted）；TTS 模式进入 tts_processing
             status="tts_processing" if is_tts_mode else "pending",
@@ -500,8 +493,6 @@ class LipsyncService:
                         voice_id,
                         script_text,
                         speed,
-                        style or "",
-                        volume,
                         emotion or "",
                     )
                 )
@@ -536,8 +527,6 @@ class LipsyncService:
         voice_id: str,
         script_text: str,
         speed: float = 1.0,
-        style: str = "",
-        volume: int = 50,
         emotion: str = "neutral",
     ) -> dict:
         """同步做 TTS 合成 + 下载 + ffprobe + 句子时间戳计算.
@@ -783,32 +772,12 @@ class LipsyncService:
     # ── 取消任务 ──────────────────────────────────────────────────────────
 
     def cancel_job(self, job_id: str, user_id: str) -> Optional[LipsyncJobModel]:
-        """取消任务（pending/tts_processing/submitted/processing 状态可取消）.
-
-        当 job 走 GPU 路径（mediakit_task_id 以 "gpu:" 开头）且状态为 processing 时，
-        同步将关联的 GpuLipsyncTask 标记为 cancelled，以便 Worker 心跳时检测到取消信号。
-        """
+        """取消任务（仅 pending/tts_processing/submitted 状态可取消）."""
         job = self.get_job(job_id, user_id)
         if job is None:
             return None
 
-        if job.status in ("pending", "tts_processing", "submitted", "processing"):
-            # GPU 路径：同步标记关联的 GPU 任务为 cancelled
-            if job.status == "processing" and job.mediakit_task_id and job.mediakit_task_id.startswith("gpu:"):
-                gpu_task_id = job.mediakit_task_id[4:]  # 去掉 "gpu:" 前缀
-                try:
-                    from packages.adapters.sqlalchemy_impl.models import GpuLipsyncTaskModel
-
-                    gpu_task = self.db.get(GpuLipsyncTaskModel, gpu_task_id)
-                    if gpu_task and gpu_task.status == "processing":
-                        gpu_task.status = "cancelled"
-                        gpu_task.error_msg = "用户取消"
-                        gpu_task.updated_at = datetime.now(UTC)
-                        gpu_task.finished_at = datetime.now(UTC)
-                        logger.info("GPU 任务 %s 已被用户取消（通过 job_id=%s）", gpu_task_id, job_id)
-                except Exception as exc:
-                    logger.warning("标记 GPU 任务取消失败（不影响 job 取消）: %s", exc)
-
+        if job.status in ("pending", "tts_processing", "submitted"):
             job.status = "cancelled"
             job.updated_at = datetime.now(UTC)
             self.db.commit()

apps/api/app/tasks/lipsync_gpu.py

@@ -98,14 +98,6 @@ def lipsync_gpu_process_async(self, job_id: str, user_id: str, gpu_task_id: str)
             _fallback_to_mediakit(db, job)
             return
 
-        if final_task.status == "cancelled":
-            # 用户已取消任务，不回退 MediaKit，直接标记 job 为 cancelled
-            job.status = "cancelled"
-            job.updated_at = datetime.now(UTC)
-            db.commit()
-            logger.info("[lipsync_gpu_async] GPU 任务已被用户取消: job_id=%s", job_id)
-            return
-
         if final_task.status != "done":
             logger.warning(
                 "[lipsync_gpu_async] GPU 失败，回退 MediaKit: job_id=%s gpu_task=%s status=%s",

apps/api/app/tasks/lipsync_tts.py

@@ -82,9 +82,7 @@ def tts_synthesize_and_submit(
     voice_id: str,
     script_text: str,
     speed: float,
-    style: str = "",
-    volume: int = 50,
-    emotion: str = "",
+    emotion: str,
 ):
     """异步执行 TTS 合成 + OSS 转存 + MediaKit 提交.
 
@@ -161,8 +159,6 @@ def tts_synthesize_and_submit(
                 text=script_text,
                 voice_id=voice_id,
                 speed=speed,
-                style=style,
-                volume=volume,
                 emotion=emotion,
                 language="zh",
             )

apps/web/package-lock.json

@@ -12,8 +12,6 @@
         "@tanstack/react-query": "^5.45.0",
         "antd": "^5.18.0",
         "axios": "^1.7.2",
-        "classnames": "^2.5.1",
-        "dayjs": "^1.11.23",
         "mp4box": "^2.4.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -3007,9 +3005,9 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.23",
-      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.23.tgz",
-      "integrity": "sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==",
+      "version": "1.11.21",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
+      "integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
       "license": "MIT"
     },
     "node_modules/debug": {

apps/web/package.json

@@ -23,8 +23,6 @@
     "@tanstack/react-query": "^5.45.0",
     "antd": "^5.18.0",
     "axios": "^1.7.2",
-    "classnames": "^2.5.1",
-    "dayjs": "^1.11.23",
     "mp4box": "^2.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

apps/web/pnpm-lock.yaml

@@ -18,16 +18,7 @@ importers:
         version: 5.29.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       axios:
         specifier: ^1.7.2
-        version: 1.18.1(debug@4.4.3(supports-color@7.2.0))(supports-color@7.2.0)
-      classnames:
-        specifier: ^2.5.1
-        version: 2.5.1
-      dayjs:
-        specifier: ^1.11.23
-        version: 1.11.23
-      mp4box:
-        specifier: ^2.4.1
-        version: 2.4.1
+        version: 1.18.1
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -52,7 +43,7 @@ importers:
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       "@testing-library/user-event":
         specifier: ^14.5.2
-        version: 14.6.7(@testing-library/dom@10.4.1)
+        version: 14.6.1(@testing-library/dom@10.4.1)
       "@types/node":
         specifier: ^20.14.9
         version: 20.19.43
@@ -64,34 +55,34 @@ importers:
         version: 18.3.7(@types/react@18.3.31)
       "@typescript-eslint/eslint-plugin":
         specifier: ^7.13.1
-        version: 7.13.1(@typescript-eslint/parser@7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3))(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
+        version: 7.13.1(@typescript-eslint/parser@7.13.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0)(typescript@5.5.3)
       "@typescript-eslint/parser":
         specifier: ^7.13.1
-        version: 7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
+        version: 7.13.1(eslint@8.57.0)(typescript@5.5.3)
       "@vitejs/plugin-react":
         specifier: ^4.3.1
-        version: 4.3.1(supports-color@7.2.0)(vite@5.3.1(@types/node@20.19.43))
+        version: 4.3.1(vite@5.3.1(@types/node@20.19.43))
       "@vitest/coverage-v8":
         specifier: ^1.6.1
-        version: 1.6.1(supports-color@7.2.0)(vitest@1.6.0)
+        version: 1.6.1(vitest@1.6.0)
       "@vitest/ui":
         specifier: ^1.6.0
         version: 1.6.0(vitest@1.6.0)
       eslint:
         specifier: ^8.57.0
-        version: 8.57.0(supports-color@7.2.0)
+        version: 8.57.0
       eslint-config-prettier:
         specifier: ^9.1.2
-        version: 9.1.2(eslint@8.57.0(supports-color@7.2.0))
+        version: 9.1.2(eslint@8.57.0)
       eslint-plugin-react-hooks:
         specifier: ^4.6.2
-        version: 4.6.2(eslint@8.57.0(supports-color@7.2.0))
+        version: 4.6.2(eslint@8.57.0)
       eslint-plugin-react-refresh:
         specifier: ^0.4.7
-        version: 0.4.26(eslint@8.57.0(supports-color@7.2.0))
+        version: 0.4.26(eslint@8.57.0)
       jsdom:
         specifier: ^24.1.0
-        version: 24.1.0(supports-color@7.2.0)
+        version: 24.1.0
       prettier:
         specifier: ^3.9.5
         version: 3.9.5
@@ -103,7 +94,7 @@ importers:
         version: 5.3.1(@types/node@20.19.43)
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0(supports-color@7.2.0))(supports-color@7.2.0)
+        version: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0)
 
 packages:
   "@adobe/css-tools@4.5.0":
@@ -1136,10 +1127,10 @@ packages:
       "@types/react-dom":
         optional: true
 
-  "@testing-library/user-event@14.6.7":
+  "@testing-library/user-event@14.6.1":
     resolution:
       {
-        integrity: sha512-MPCpX8bxe8zS+JmmTwLp8jd0dy1rAm60Te/SL8JrQM3qvQJcBOs1d7IefJMyZzqM3EWBrDn/LWDt1BCGu4ASfg==,
+        integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==,
       }
     engines: { node: ">=12", npm: ">=6" }
     peerDependencies:
@@ -1681,10 +1672,10 @@ packages:
       }
     engines: { node: ">=18" }
 
-  dayjs@1.11.23:
+  dayjs@1.11.21:
     resolution:
       {
-        integrity: sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==,
+        integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==,
       }
 
   debug@4.4.3:
@@ -2555,13 +2546,6 @@ packages:
         integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==,
       }
 
-  mp4box@2.4.1:
-    resolution:
-      {
-        integrity: sha512-0HGX7nXoDIX6FKLVl4a3wtYjBlwqsN3xuQC3GXzNtKp98FXUOhDSq623azsz8DG5ptd9ZXcXodDkgbdMZOjWvw==,
-      }
-    engines: { node: ">=20.8.1" }
-
   mrmime@2.0.1:
     resolution:
       {
@@ -3877,20 +3861,20 @@ snapshots:
 
   "@babel/compat-data@7.29.7": {}
 
-  "@babel/core@7.29.7(supports-color@7.2.0)":
+  "@babel/core@7.29.7":
     dependencies:
       "@babel/code-frame": 7.29.7
       "@babel/generator": 7.29.7
       "@babel/helper-compilation-targets": 7.29.7
-      "@babel/helper-module-transforms": 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
+      "@babel/helper-module-transforms": 7.29.7(@babel/core@7.29.7)
       "@babel/helpers": 7.29.7
       "@babel/parser": 7.29.7
       "@babel/template": 7.29.7
-      "@babel/traverse": 7.29.7(supports-color@7.2.0)
+      "@babel/traverse": 7.29.7
       "@babel/types": 7.29.7
       "@jridgewell/remapping": 2.3.5
       convert-source-map: 2.0.0
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -3915,19 +3899,19 @@ snapshots:
 
   "@babel/helper-globals@7.29.7": {}
 
-  "@babel/helper-module-imports@7.29.7(supports-color@7.2.0)":
+  "@babel/helper-module-imports@7.29.7":
     dependencies:
-      "@babel/traverse": 7.29.7(supports-color@7.2.0)
+      "@babel/traverse": 7.29.7
       "@babel/types": 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  "@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)":
+  "@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)":
     dependencies:
-      "@babel/core": 7.29.7(supports-color@7.2.0)
-      "@babel/helper-module-imports": 7.29.7(supports-color@7.2.0)
+      "@babel/core": 7.29.7
+      "@babel/helper-module-imports": 7.29.7
       "@babel/helper-validator-identifier": 7.29.7
-      "@babel/traverse": 7.29.7(supports-color@7.2.0)
+      "@babel/traverse": 7.29.7
     transitivePeerDependencies:
       - supports-color
 
@@ -3948,14 +3932,14 @@ snapshots:
     dependencies:
       "@babel/types": 7.29.7
 
-  "@babel/plugin-transform-react-jsx-self@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))":
+  "@babel/plugin-transform-react-jsx-self@7.29.7(@babel/core@7.29.7)":
     dependencies:
-      "@babel/core": 7.29.7(supports-color@7.2.0)
+      "@babel/core": 7.29.7
       "@babel/helper-plugin-utils": 7.29.7
 
-  "@babel/plugin-transform-react-jsx-source@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))":
+  "@babel/plugin-transform-react-jsx-source@7.29.7(@babel/core@7.29.7)":
     dependencies:
-      "@babel/core": 7.29.7(supports-color@7.2.0)
+      "@babel/core": 7.29.7
       "@babel/helper-plugin-utils": 7.29.7
 
   "@babel/runtime@7.29.7": {}
@@ -3966,7 +3950,7 @@ snapshots:
       "@babel/parser": 7.29.7
       "@babel/types": 7.29.7
 
-  "@babel/traverse@7.29.7(supports-color@7.2.0)":
+  "@babel/traverse@7.29.7":
     dependencies:
       "@babel/code-frame": 7.29.7
       "@babel/generator": 7.29.7
@@ -3974,7 +3958,7 @@ snapshots:
       "@babel/parser": 7.29.7
       "@babel/template": 7.29.7
       "@babel/types": 7.29.7
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
@@ -4060,17 +4044,17 @@ snapshots:
   "@esbuild/win32-x64@0.21.3":
     optional: true
 
-  "@eslint-community/eslint-utils@4.9.1(eslint@8.57.0(supports-color@7.2.0))":
+  "@eslint-community/eslint-utils@4.9.1(eslint@8.57.0)":
     dependencies:
-      eslint: 8.57.0(supports-color@7.2.0)
+      eslint: 8.57.0
       eslint-visitor-keys: 3.4.3
 
   "@eslint-community/regexpp@4.12.2": {}
 
-  "@eslint/eslintrc@2.1.4(supports-color@7.2.0)":
+  "@eslint/eslintrc@2.1.4":
     dependencies:
       ajv: 6.15.0
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
       espree: 9.6.1
       globals: 13.19.0
       ignore: 5.2.0
@@ -4083,10 +4067,10 @@ snapshots:
 
   "@eslint/js@8.57.0": {}
 
-  "@humanwhocodes/config-array@0.11.14(supports-color@7.2.0)":
+  "@humanwhocodes/config-array@0.11.14":
     dependencies:
       "@humanwhocodes/object-schema": 2.0.3
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
       minimatch: 3.1.5
     transitivePeerDependencies:
       - supports-color
@@ -4376,7 +4360,7 @@ snapshots:
       "@types/react": 18.3.31
       "@types/react-dom": 18.3.7(@types/react@18.3.31)
 
-  "@testing-library/user-event@14.6.7(@testing-library/dom@10.4.1)":
+  "@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)":
     dependencies:
       "@testing-library/dom": 10.4.1
 
@@ -4436,15 +4420,15 @@ snapshots:
     dependencies:
       "@types/yargs-parser": 21.0.3
 
-  "@typescript-eslint/eslint-plugin@7.13.1(@typescript-eslint/parser@7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3))(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)":
+  "@typescript-eslint/eslint-plugin@7.13.1(@typescript-eslint/parser@7.13.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0)(typescript@5.5.3)":
     dependencies:
       "@eslint-community/regexpp": 4.12.2
-      "@typescript-eslint/parser": 7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
+      "@typescript-eslint/parser": 7.13.1(eslint@8.57.0)(typescript@5.5.3)
       "@typescript-eslint/scope-manager": 7.13.1
-      "@typescript-eslint/type-utils": 7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
-      "@typescript-eslint/utils": 7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
+      "@typescript-eslint/type-utils": 7.13.1(eslint@8.57.0)(typescript@5.5.3)
+      "@typescript-eslint/utils": 7.13.1(eslint@8.57.0)(typescript@5.5.3)
       "@typescript-eslint/visitor-keys": 7.13.1
-      eslint: 8.57.0(supports-color@7.2.0)
+      eslint: 8.57.0
       graphemer: 1.4.0
       ignore: 5.3.1
       natural-compare: 1.4.0
@@ -4454,14 +4438,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  "@typescript-eslint/parser@7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)":
+  "@typescript-eslint/parser@7.13.1(eslint@8.57.0)(typescript@5.5.3)":
     dependencies:
       "@typescript-eslint/scope-manager": 7.13.1
       "@typescript-eslint/types": 7.13.1
-      "@typescript-eslint/typescript-estree": 7.13.1(supports-color@7.2.0)(typescript@5.5.3)
+      "@typescript-eslint/typescript-estree": 7.13.1(typescript@5.5.3)
       "@typescript-eslint/visitor-keys": 7.13.1
-      debug: 4.4.3(supports-color@7.2.0)
-      eslint: 8.57.0(supports-color@7.2.0)
+      debug: 4.4.3
+      eslint: 8.57.0
     optionalDependencies:
       typescript: 5.5.3
     transitivePeerDependencies:
@@ -4472,12 +4456,12 @@ snapshots:
       "@typescript-eslint/types": 7.13.1
       "@typescript-eslint/visitor-keys": 7.13.1
 
-  "@typescript-eslint/type-utils@7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)":
+  "@typescript-eslint/type-utils@7.13.1(eslint@8.57.0)(typescript@5.5.3)":
     dependencies:
-      "@typescript-eslint/typescript-estree": 7.13.1(supports-color@7.2.0)(typescript@5.5.3)
-      "@typescript-eslint/utils": 7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
-      debug: 4.4.3(supports-color@7.2.0)
-      eslint: 8.57.0(supports-color@7.2.0)
+      "@typescript-eslint/typescript-estree": 7.13.1(typescript@5.5.3)
+      "@typescript-eslint/utils": 7.13.1(eslint@8.57.0)(typescript@5.5.3)
+      debug: 4.4.3
+      eslint: 8.57.0
       ts-api-utils: 1.3.0(typescript@5.5.3)
     optionalDependencies:
       typescript: 5.5.3
@@ -4486,11 +4470,11 @@ snapshots:
 
   "@typescript-eslint/types@7.13.1": {}
 
-  "@typescript-eslint/typescript-estree@7.13.1(supports-color@7.2.0)(typescript@5.5.3)":
+  "@typescript-eslint/typescript-estree@7.13.1(typescript@5.5.3)":
     dependencies:
       "@typescript-eslint/types": 7.13.1
       "@typescript-eslint/visitor-keys": 7.13.1
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.9
@@ -4501,13 +4485,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  "@typescript-eslint/utils@7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)":
+  "@typescript-eslint/utils@7.13.1(eslint@8.57.0)(typescript@5.5.3)":
     dependencies:
-      "@eslint-community/eslint-utils": 4.9.1(eslint@8.57.0(supports-color@7.2.0))
+      "@eslint-community/eslint-utils": 4.9.1(eslint@8.57.0)
       "@typescript-eslint/scope-manager": 7.13.1
       "@typescript-eslint/types": 7.13.1
-      "@typescript-eslint/typescript-estree": 7.13.1(supports-color@7.2.0)(typescript@5.5.3)
-      eslint: 8.57.0(supports-color@7.2.0)
+      "@typescript-eslint/typescript-estree": 7.13.1(typescript@5.5.3)
+      eslint: 8.57.0
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -4519,25 +4503,25 @@ snapshots:
 
   "@ungap/structured-clone@1.3.3": {}
 
-  "@vitejs/plugin-react@4.3.1(supports-color@7.2.0)(vite@5.3.1(@types/node@20.19.43))":
+  "@vitejs/plugin-react@4.3.1(vite@5.3.1(@types/node@20.19.43))":
     dependencies:
-      "@babel/core": 7.29.7(supports-color@7.2.0)
-      "@babel/plugin-transform-react-jsx-self": 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
-      "@babel/plugin-transform-react-jsx-source": 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
+      "@babel/core": 7.29.7
+      "@babel/plugin-transform-react-jsx-self": 7.29.7(@babel/core@7.29.7)
+      "@babel/plugin-transform-react-jsx-source": 7.29.7(@babel/core@7.29.7)
       "@types/babel__core": 7.20.5
       react-refresh: 0.14.2
       vite: 5.3.1(@types/node@20.19.43)
     transitivePeerDependencies:
       - supports-color
 
-  "@vitest/coverage-v8@1.6.1(supports-color@7.2.0)(vitest@1.6.0)":
+  "@vitest/coverage-v8@1.6.1(vitest@1.6.0)":
     dependencies:
       "@ampproject/remapping": 2.3.0
       "@bcoe/v8-coverage": 0.2.3
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
-      istanbul-lib-source-maps: 5.0.6(supports-color@7.2.0)
+      istanbul-lib-source-maps: 5.0.6
       istanbul-reports: 3.2.0
       magic-string: 0.30.5
       magicast: 0.3.3
@@ -4545,7 +4529,7 @@ snapshots:
       std-env: 3.5.0
       strip-literal: 2.1.1
       test-exclude: 6.0.0
-      vitest: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0(supports-color@7.2.0))(supports-color@7.2.0)
+      vitest: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -4580,7 +4564,7 @@ snapshots:
       pathe: 1.1.2
       picocolors: 1.1.1
       sirv: 2.0.4
-      vitest: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0(supports-color@7.2.0))(supports-color@7.2.0)
+      vitest: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0)
 
   "@vitest/utils@1.6.0":
     dependencies:
@@ -4599,21 +4583,21 @@ snapshots:
 
   acorn@8.17.0: {}
 
-  agent-base@6.0.0(supports-color@7.2.0):
+  agent-base@6.0.0:
     dependencies:
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
-  agent-base@7.0.2(supports-color@7.2.0):
+  agent-base@7.0.2:
     dependencies:
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
-  agent-base@7.1.0(supports-color@7.2.0):
+  agent-base@7.1.0:
     dependencies:
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
@@ -4648,7 +4632,7 @@ snapshots:
       "@rc-component/trigger": 2.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       classnames: 2.5.1
       copy-to-clipboard: 3.3.3
-      dayjs: 1.11.23
+      dayjs: 1.11.21
       rc-cascader: 3.34.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rc-checkbox: 3.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rc-collapse: 3.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -4664,7 +4648,7 @@ snapshots:
       rc-motion: 2.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rc-notification: 5.6.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rc-pagination: 5.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      rc-picker: 4.11.3(dayjs@1.11.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      rc-picker: 4.11.3(dayjs@1.11.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rc-progress: 4.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rc-rate: 2.13.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rc-resize-observer: 1.4.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -4704,11 +4688,11 @@ snapshots:
 
   asynckit@0.4.0: {}
 
-  axios@1.18.1(debug@4.4.3(supports-color@7.2.0))(supports-color@7.2.0):
+  axios@1.18.1:
     dependencies:
-      follow-redirects: 1.16.0(debug@4.4.3(supports-color@7.2.0))
+      follow-redirects: 1.16.0
       form-data: 4.0.6
-      https-proxy-agent: 5.0.1(supports-color@7.2.0)
+      https-proxy-agent: 5.0.1
       proxy-from-env: 2.1.0
     transitivePeerDependencies:
       - debug
@@ -4812,13 +4796,11 @@ snapshots:
       whatwg-mimetype: 4.0.0
       whatwg-url: 14.0.0
 
-  dayjs@1.11.23: {}
+  dayjs@1.11.21: {}
 
-  debug@4.4.3(supports-color@7.2.0):
+  debug@4.4.3:
     dependencies:
       ms: 2.1.3
-    optionalDependencies:
-      supports-color: 7.2.0
 
   decimal.js@10.6.0: {}
 
@@ -4901,17 +4883,17 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-config-prettier@9.1.2(eslint@8.57.0(supports-color@7.2.0)):
+  eslint-config-prettier@9.1.2(eslint@8.57.0):
     dependencies:
-      eslint: 8.57.0(supports-color@7.2.0)
+      eslint: 8.57.0
 
-  eslint-plugin-react-hooks@4.6.2(eslint@8.57.0(supports-color@7.2.0)):
+  eslint-plugin-react-hooks@4.6.2(eslint@8.57.0):
     dependencies:
-      eslint: 8.57.0(supports-color@7.2.0)
+      eslint: 8.57.0
 
-  eslint-plugin-react-refresh@0.4.26(eslint@8.57.0(supports-color@7.2.0)):
+  eslint-plugin-react-refresh@0.4.26(eslint@8.57.0):
     dependencies:
-      eslint: 8.57.0(supports-color@7.2.0)
+      eslint: 8.57.0
 
   eslint-scope@7.2.2:
     dependencies:
@@ -4920,20 +4902,20 @@ snapshots:
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint@8.57.0(supports-color@7.2.0):
+  eslint@8.57.0:
     dependencies:
-      "@eslint-community/eslint-utils": 4.9.1(eslint@8.57.0(supports-color@7.2.0))
+      "@eslint-community/eslint-utils": 4.9.1(eslint@8.57.0)
       "@eslint-community/regexpp": 4.12.2
-      "@eslint/eslintrc": 2.1.4(supports-color@7.2.0)
+      "@eslint/eslintrc": 2.1.4
       "@eslint/js": 8.57.0
-      "@humanwhocodes/config-array": 0.11.14(supports-color@7.2.0)
+      "@humanwhocodes/config-array": 0.11.14
       "@humanwhocodes/module-importer": 1.0.1
       "@nodelib/fs.walk": 1.2.8
       "@ungap/structured-clone": 1.3.3
       ajv: 6.15.0
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -5037,9 +5019,7 @@ snapshots:
 
   flatted@3.4.2: {}
 
-  follow-redirects@1.16.0(debug@4.4.3(supports-color@7.2.0)):
-    optionalDependencies:
-      debug: 4.4.3(supports-color@7.2.0)
+  follow-redirects@1.16.0: {}
 
   form-data@4.0.6:
     dependencies:
@@ -5135,24 +5115,24 @@ snapshots:
 
   html-escaper@2.0.2: {}
 
-  http-proxy-agent@7.0.2(supports-color@7.2.0):
+  http-proxy-agent@7.0.2:
     dependencies:
-      agent-base: 7.1.0(supports-color@7.2.0)
-      debug: 4.4.3(supports-color@7.2.0)
+      agent-base: 7.1.0
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
-  https-proxy-agent@5.0.1(supports-color@7.2.0):
+  https-proxy-agent@5.0.1:
     dependencies:
-      agent-base: 6.0.0(supports-color@7.2.0)
-      debug: 4.4.3(supports-color@7.2.0)
+      agent-base: 6.0.0
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
-  https-proxy-agent@7.0.4(supports-color@7.2.0):
+  https-proxy-agent@7.0.4:
     dependencies:
-      agent-base: 7.0.2(supports-color@7.2.0)
-      debug: 4.4.3(supports-color@7.2.0)
+      agent-base: 7.0.2
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
@@ -5206,10 +5186,10 @@ snapshots:
       make-dir: 4.0.0
       supports-color: 7.2.0
 
-  istanbul-lib-source-maps@5.0.6(supports-color@7.2.0):
+  istanbul-lib-source-maps@5.0.6:
     dependencies:
       "@jridgewell/trace-mapping": 0.3.31
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
       istanbul-lib-coverage: 3.2.2
     transitivePeerDependencies:
       - supports-color
@@ -5229,15 +5209,15 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsdom@24.1.0(supports-color@7.2.0):
+  jsdom@24.1.0:
     dependencies:
       cssstyle: 4.0.1
       data-urls: 5.0.0
       decimal.js: 10.6.0
       form-data: 4.0.6
       html-encoding-sniffer: 4.0.0
-      http-proxy-agent: 7.0.2(supports-color@7.2.0)
-      https-proxy-agent: 7.0.4(supports-color@7.2.0)
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.4
       is-potential-custom-element-name: 1.0.1
       nwsapi: 2.2.24
       parse5: 7.1.2
@@ -5351,8 +5331,6 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.6.4
 
-  mp4box@2.4.1: {}
-
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
@@ -5633,7 +5611,7 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  rc-picker@4.11.3(dayjs@1.11.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  rc-picker@4.11.3(dayjs@1.11.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       "@babel/runtime": 7.29.7
       "@rc-component/trigger": 2.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -5644,7 +5622,7 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      dayjs: 1.11.23
+      dayjs: 1.11.21
 
   rc-progress@4.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
@@ -6030,10 +6008,10 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  vite-node@1.6.0(@types/node@20.19.43)(supports-color@7.2.0):
+  vite-node@1.6.0(@types/node@20.19.43):
     dependencies:
       cac: 6.7.14
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
       pathe: 1.1.2
       picocolors: 1.1.1
       vite: 5.3.1(@types/node@20.19.43)
@@ -6056,7 +6034,7 @@ snapshots:
       "@types/node": 20.19.43
       fsevents: 2.3.3
 
-  vitest@1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0(supports-color@7.2.0))(supports-color@7.2.0):
+  vitest@1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0):
     dependencies:
       "@vitest/expect": 1.6.0
       "@vitest/runner": 1.6.0
@@ -6065,7 +6043,7 @@ snapshots:
       "@vitest/utils": 1.6.0
       acorn-walk: 8.3.5
       chai: 4.3.10
-      debug: 4.4.3(supports-color@7.2.0)
+      debug: 4.4.3
       execa: 8.0.1
       local-pkg: 0.5.0
       magic-string: 0.30.5
@@ -6076,12 +6054,12 @@ snapshots:
       tinybench: 2.5.1
       tinypool: 0.8.3
       vite: 5.3.1(@types/node@20.19.43)
-      vite-node: 1.6.0(@types/node@20.19.43)(supports-color@7.2.0)
+      vite-node: 1.6.0(@types/node@20.19.43)
       why-is-node-running: 2.3.0
     optionalDependencies:
       "@types/node": 20.19.43
       "@vitest/ui": 1.6.0(vitest@1.6.0)
-      jsdom: 24.1.0(supports-color@7.2.0)
+      jsdom: 24.1.0
     transitivePeerDependencies:
       - less
       - lightningcss

apps/web/src/api/generation/cover.ts

@@ -7,19 +7,8 @@ export interface GenerateCoverTitleConfig {
   font_color?: string
   position?: string
   bold?: boolean
-  italic?: boolean
-  stroke?: boolean | { enabled?: boolean; width?: number; color?: string }
-  shadow?:
-    | boolean
-    | { enabled?: boolean; offset_x?: number; offset_y?: number; blur?: number; color?: string }
-  line_height?: number
-  margin_top?: number
-  max_chars_per_line?: number
-  background?: { enabled?: boolean; color?: string; padding?: number; radius?: number }
-  line_overrides?: Array<Record<string, unknown>>
-  cover_title_config?: Record<string, unknown>
-  pos_x?: number
-  pos_y?: number
+  stroke?: boolean
+  shadow?: boolean
 }
 
 export interface GenerateCoverRequest {

apps/web/src/api/tasks/types.ts

@@ -81,7 +81,7 @@ export interface CreateGenerationTaskRequest {
   tts_voice_source?: "preset" | "clone"
   /** #1970：智能降重开关（默认 true） */
   dedup_enabled?: boolean
-  /** 标题烧录配置（#2001 扩展：描边/阴影参数/行距/自动换行/背景/逐行/封面） */
+  /** 标题烧录配置 */
   title_config?: {
     text?: string
     font?: string
@@ -89,34 +89,8 @@ export interface CreateGenerationTaskRequest {
     font_color?: string
     position?: string
     bold?: boolean
-    italic?: boolean
-    stroke?: boolean | { enabled?: boolean; width?: number; color?: string }
-    shadow?:
-      | boolean
-      | {
-          enabled?: boolean
-          offset_x?: number
-          offset_y?: number
-          blur?: number
-          color?: string
-        }
-    line_height?: number
-    margin_top?: number
-    max_chars_per_line?: number
-    background?: { enabled?: boolean; color?: string; padding?: number; radius?: number }
-    line_overrides?: Array<{
-      line_index: number
-      text?: string
-      size?: number
-      color?: string
-      bold?: boolean
-      italic?: boolean
-      stroke?: boolean
-      highlights?: Array<{ word: string; color?: string; bold?: boolean; scale?: number }>
-    }>
-    cover_title_config?: Record<string, unknown>
-    pos_x?: number
-    pos_y?: number
+    stroke?: boolean
+    shadow?: boolean
   }
   /** 关联的草稿 ID（编辑流程数据链路用） */
   source_edit_plan_id?: string

apps/web/src/api/template-editor/types.ts

@@ -54,8 +54,6 @@ export interface SegmentTtsConfig {
   pitch: number
   volume: number
   subtitle_sync: boolean
-  /** 配音风格预设（natural/excited/professional/sweet/news/livestream） */
-  style?: string
 }
 
 /** 片段裁剪配置 */

apps/web/src/api/tts/index.ts

@@ -18,9 +18,6 @@ export type {
   TTSPreviewResponse,
 } from "./types"
 
-export type { TtsStyle, TtsStyleOption } from "./styles"
-export { TTS_STYLE_OPTIONS, DEFAULT_TTS_STYLE, getTtsStyle } from "./styles"
-
 // API 函数
 export {
   synthesizeSpeech,

apps/web/src/api/tts/styles.ts

@@ -1,71 +0,0 @@
-/**
- * TTS 配音风格预设（情感/语气风格）
- * - key：传给后端的 style 标识，便于后端按策略合成
- * - 未传 style 时后端默认自然亲切
- *
- * 注：与原 emotion（CosyVoice 7 种基础情绪枚举）解耦；
- *     style 是更高层的"说话风格预设"，后端可能映射到 emotion + speed + prompt 组合。
- */
-
-export interface TtsStyleOption {
-  /** 传给后端的风格标识 */
-  value: string
-  /** 展示名 */
-  label: string
-  /** emoji 图标 */
-  emoji: string
-  /** 给用户/后端的风格描述（prompt 风格） */
-  description: string
-}
-
-export const TTS_STYLE_OPTIONS: readonly TtsStyleOption[] = [
-  {
-    value: "natural",
-    label: "自然亲切",
-    emoji: "😊",
-    description: "亲切自然，像朋友聊天",
-  },
-  {
-    value: "excited",
-    label: "激动兴奋",
-    emoji: "🤩",
-    description: "激动兴奋，语速稍快，充满活力",
-  },
-  {
-    value: "professional",
-    label: "沉稳专业",
-    emoji: "🧑‍💼",
-    description: "沉稳专业，语速适中，正式可靠",
-  },
-  {
-    value: "sweet",
-    label: "温柔甜美",
-    emoji: "🌸",
-    description: "温柔甜美，语速轻柔",
-  },
-  {
-    value: "news",
-    label: "新闻播报",
-    emoji: "📰",
-    description: "字正腔圆，严肃正式",
-  },
-  {
-    value: "livestream",
-    label: "直播带货",
-    emoji: "🎤",
-    description: "热情有感染力，有节奏感",
-  },
-] as const
-
-export type TtsStyle = (typeof TTS_STYLE_OPTIONS)[number]["value"]
-
-/** 默认风格：自然亲切 */
-export const DEFAULT_TTS_STYLE: TtsStyle = "natural"
-
-/** 根据 value 查找风格选项（容错：找不到回退 natural） */
-export function getTtsStyle(value: string | null | undefined): TtsStyleOption {
-  return (
-    (TTS_STYLE_OPTIONS as readonly TtsStyleOption[]).find((o) => o.value === value) ??
-    (TTS_STYLE_OPTIONS as readonly TtsStyleOption[])[0]
-  )
-}

apps/web/src/api/tts/types.ts

@@ -17,8 +17,6 @@ export interface TTSSynthesizeRequest {
   output_name?: string
   language?: string
   emotion?: string
-  /** 配音风格预设（自然亲切/激动兴奋/沉稳专业/温柔甜美/新闻播报/直播带货），不传默认 natural */
-  style?: string
   speed?: number
   voice_model?: string
   voice_clone_profile_id?: string
@@ -108,8 +106,6 @@ export interface TTSPreviewRequest {
   pitch?: number
   language?: string
   emotion?: string // 情绪参数：neutral/happy/sad/angry/surprised/fearful/disgusted（后端 normalize_emotion() 兼容旧 natural/excited/calm/friendly 与中文标签）
-  /** 配音风格预设 */
-  style?: string
 }
 
 /** TTS 试听响应 */

apps/web/src/components/title/TitleTemplate.css

@@ -1,391 +0,0 @@
-/* ============================================================
-   标题模板系统 v3（按 sketch 重构）
-   - 大卡片网格（图片背景 + 透明 Canvas 叠字 + 始终可见操作按钮）
-   - 编辑器弹窗（左竖屏预览 + 右参数 Tab）
-   ============================================================ */
-
-/* ── 面板容器（模板模式） ── */
-.ttv3-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-.ttv3-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.ttv3-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-primary, #1f2937);
-}
-.ttv3-new-btn.ant-btn {
-  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
-  border: none;
-  border-radius: 20px;
-  font-size: 12px;
-  height: 28px;
-  padding: 0 14px;
-  font-weight: 500;
-  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25);
-}
-.ttv3-new-btn.ant-btn:hover {
-  background: linear-gradient(135deg, #5b4cdb, #8c83f5) !important;
-  color: #fff !important;
-}
-.ttv3-section-label {
-  font-size: 12px;
-  color: #888;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-.ttv3-section {
-  margin-bottom: 6px;
-}
-
-/* ── 空状态 ── */
-.ttv3-empty {
-  background: #f8f8fc;
-  border-radius: 12px;
-  padding: 28px 16px;
-  text-align: center;
-  color: #aaa;
-}
-.ttv3-empty-icon {
-  font-size: 28px;
-  margin-bottom: 6px;
-}
-.ttv3-empty-text {
-  font-size: 12px;
-}
-
-/* ── 卡片网格：minmax(180px,1fr) 自适应 ── */
-.ttv3-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 12px;
-}
-
-/* ── 卡片：3:4 竖版，圆角 14px ── */
-.ttv3-card {
-  background: #fff;
-  border-radius: 14px;
-  border: 3px solid #e8e8ed;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  overflow: hidden;
-  padding: 0;
-  font-family: inherit;
-  text-align: left;
-}
-.ttv3-card:hover {
-  border-color: #c5c0f0;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
-}
-.ttv3-card.selected {
-  border-color: #6c5ce7;
-  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25);
-}
-
-/* ── 卡片预览区（3:4） ── */
-.ttv3-preview {
-  width: 100%;
-  aspect-ratio: 3/4;
-  position: relative;
-  overflow: hidden;
-  border-radius: 11px 11px 0 0;
-}
-.ttv3-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-/* 暗色渐变遮罩：顶部15%半透明黑 + 中部透明 + 底部45%黑 */
-.ttv3-vignette {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0.45) 0%,
-    rgba(0, 0, 0, 0.15) 15%,
-    transparent 30%,
-    transparent 55%,
-    rgba(0, 0, 0, 0.6) 100%
-  );
-  z-index: 1;
-  pointer-events: none;
-}
-/* 透明 Canvas 标题填充整个预览区 */
-.ttv3-preview .tt-fill-canvas-wrap {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-}
-.ttv3-preview .tt-fill-canvas-wrap canvas {
-  width: 100% !important;
-  height: 100% !important;
-  border-radius: 0;
-  display: block;
-}
-
-/* ── 左上角角标（系统/我的） ── */
-.ttv3-badge {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  font-size: 10px;
-  padding: 2px 8px;
-  border-radius: 8px;
-  font-weight: 500;
-  color: #fff;
-  z-index: 3;
-  backdrop-filter: blur(4px);
-}
-.ttv3-badge--sys {
-  background: rgba(108, 92, 231, 0.88);
-}
-.ttv3-badge--mine {
-  background: rgba(0, 184, 148, 0.88);
-}
-
-/* ── 右上角勾选圆圈 ── */
-.ttv3-check {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.3);
-  border: 2px solid rgba(255, 255, 255, 0.7);
-  z-index: 3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: transparent;
-  transition: all 0.15s;
-}
-.ttv3-check.on {
-  background: #6c5ce7;
-  border-color: #fff;
-  color: #fff;
-}
-
-/* ── 卡片底栏（名称 + 操作按钮） ── */
-.ttv3-footer {
-  padding: 10px 10px 12px;
-}
-.ttv3-name-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  color: #1f2937;
-}
-.ttv3-emoji {
-  font-size: 14px;
-  flex-shrink: 0;
-}
-.ttv3-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  min-width: 0;
-}
-.ttv3-tag {
-  font-size: 10px;
-  padding: 1px 6px;
-  border-radius: 6px;
-  font-weight: 500;
-  flex-shrink: 0;
-}
-.ttv3-tag--sys {
-  background: #f0ecff;
-  color: #6c5ce7;
-}
-.ttv3-tag--mine {
-  background: #e6f9f4;
-  color: #00b894;
-}
-
-/* ── 操作按钮：始终可见，等宽排列 ── */
-.ttv3-actions {
-  display: flex;
-  gap: 5px;
-}
-.ttv3-act {
-  flex: 1;
-  padding: 5px 0;
-  border: 1px solid #e8e8ed;
-  background: #fff;
-  border-radius: 7px;
-  font-size: 11px;
-  cursor: pointer;
-  color: #666;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 3px;
-  transition: all 0.15s;
-  font-family: inherit;
-}
-.ttv3-act:hover:not(:disabled) {
-  background: #f5f5fa;
-  border-color: #d5d3e8;
-}
-.ttv3-act--primary {
-  background: #6c5ce7;
-  color: #fff;
-  border-color: #6c5ce7;
-}
-.ttv3-act--primary:hover:not(:disabled) {
-  background: #5b4cdb;
-  border-color: #5b4cdb;
-}
-.ttv3-act--danger {
-  color: #e74c3c;
-}
-.ttv3-act--danger:hover:not(:disabled) {
-  background: #fef2f2;
-}
-.ttv3-act:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
-/* ── FillPreview 公共容器 ── */
-.tt-fill-canvas-wrap {
-  position: relative;
-}
-
-/* ── params-only（编辑器右侧）去掉多余 margin ── */
-.ttv3-params-only {
-  padding: 0;
-}
-.ttv3-params-only .ant-tabs {
-  margin: 0;
-}
-
-/* ============================================================
-   编辑器 Modal（v3）
-   ============================================================ */
-.ttv3-modal .ant-modal-content {
-  border-radius: 16px;
-  overflow: hidden;
-  padding: 0;
-}
-.ttv3-modal .ant-modal-header {
-  padding: 16px 20px;
-  margin: 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-.ttv3-modal .ant-modal-body {
-  padding: 0;
-  max-height: 75vh;
-}
-.ttv3-modal .ant-modal-footer {
-  padding: 14px 20px;
-  margin: 0;
-  border-top: 1px solid #f0f0f0;
-}
-
-/* 编辑器两栏布局 */
-.ttv3-editor {
-  display: flex;
-  min-height: 500px;
-}
-.ttv3-editor-left {
-  width: 300px;
-  padding: 20px;
-  background: #f8f8fc;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  border-right: 1px solid #f0f0f0;
-}
-.ttv3-editor-canvas {
-  width: 200px;
-  aspect-ratio: 9/16;
-  border-radius: 12px;
-  overflow: hidden;
-  position: relative;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  flex-shrink: 0;
-}
-.ttv3-editor-bg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.ttv3-editor-canvas-inner {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-}
-.ttv3-editor-canvas-inner canvas {
-  width: 100% !important;
-  height: 100% !important;
-  border-radius: 0;
-  display: block;
-}
-.ttv3-editor-form {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.ttv3-form-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.ttv3-form-row label {
-  font-size: 12px;
-  font-weight: 600;
-  color: #333;
-  white-space: nowrap;
-  min-width: 44px;
-}
-.ttv3-form-row--grow {
-  flex: 1;
-}
-.ttv3-form-row--grow .ant-input {
-  flex: 1;
-}
-
-.ttv3-editor-right {
-  flex: 1;
-  padding: 16px 20px;
-  overflow-y: auto;
-  min-width: 0;
-}
-
-/* 侧栏较窄时（380px 侧栏）：强制 2 列，卡片稍微紧凑 */
-@media (max-width: 540px) {
-  .ttv3-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 10px;
-  }
-  .ttv3-act {
-    font-size: 10px;
-    padding: 4px 0;
-  }
-  .ttv3-act .anticon {
-    display: none;
-  }
-}

apps/web/src/components/title/TitleTemplateEditor.tsx

@@ -1,174 +0,0 @@
-/**
- * 标题模板编辑器（v3 重构）
- *
- * - Modal 弹窗 860px 宽
- * - 左侧：300px 竖屏预览区（图片背景+暗色渐变遮罩+透明 Canvas 叠字）+ 模板名称输入框
- * - 右侧：参数 Tab 面板（基础/描边/阴影/背景/排版），复用 TitleStylePanel 的 paramsOnly 模式
- * - 底部：取消 / 保存模板 按钮
- * - 内置模板编辑时保存会创建副本（带"副本"逻辑由 handleSave 处理）
- */
-import React, { useEffect, useMemo, useState } from "react"
-import { Modal, Button, Input, message } from "antd"
-import TitleStylePanel from "../../pages/generate/components/title/TitleStylePanel"
-import TitleMiniPreview from "../../pages/generate/components/title/TitleMiniPreview"
-import { POSITION_OPTIONS } from "../../pages/generate/constants"
-import { FONT_OPTIONS } from "./constants"
-import type { TitleSettings } from "../../pages/generate/types"
-import { DEFAULT_TITLE_SETTINGS_FULL } from "../../pages/generate/types"
-import { titleStyleConfigToCamel, camelToTitleStyleConfig } from "./utils"
-import type { TitleTemplate } from "./template-types"
-import type { TitleStyleConfig } from "./types"
-
-interface Props {
-  open: boolean
-  template: TitleTemplate
-  onClose: () => void
-  /** 用户点击保存：将编辑结果回调给父组件（父组件统一做 CRUD，避免双 hook 实例不同步） */
-  onSave: (data: { name: string; emoji: string; style: Partial<TitleStyleConfig> }) => void
-}
-
-/** 编辑器预览用的背景图（复用卡片池第一张） */
-const EDITOR_BG = "/title-templates/portrait1.jpg"
-
-const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSave }) => {
-  const [settings, setSettings] = useState<TitleSettings>(() => ({
-    ...DEFAULT_TITLE_SETTINGS_FULL,
-    ...titleStyleConfigToCamel(template.style || {}),
-    title: "预览标题文字",
-  }))
-  const [formName, setFormName] = useState(template.name || "")
-  const [formEmoji, setFormEmoji] = useState(template.emoji || "✨")
-  const [saving, setSaving] = useState(false)
-
-  useEffect(() => {
-    if (open) {
-      setSettings({
-        ...DEFAULT_TITLE_SETTINGS_FULL,
-        ...titleStyleConfigToCamel(template.style || {}),
-        title: "预览标题文字",
-      })
-      setFormName(template.name || "")
-      setFormEmoji(template.emoji || "✨")
-    }
-  }, [open, template])
-
-  const upd = (patch: Partial<TitleSettings>) => setSettings((s) => ({ ...s, ...patch }))
-
-  const handleSave = () => {
-    const name = formName.trim()
-    if (!name) {
-      message.warning("请填写模板名称")
-      return
-    }
-    setSaving(true)
-    try {
-      const snake = camelToTitleStyleConfig(settings)
-      onSave({ name, emoji: formEmoji, style: snake })
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  // 编辑器内的预览用 settings：字号适配竖屏
-  const previewSettings = useMemo<TitleSettings>(() => {
-    // 竖屏宽度 200px，按比例缩放字号，让预览看起来协调
-    return { ...settings, size: Math.round(settings.size * 0.55) }
-  }, [settings])
-
-  return (
-    <Modal
-      title={
-        !template.id
-          ? "新建模板"
-          : template.isBuiltin
-            ? `基于「${template.name}」创建模板`
-            : `编辑模板：${template.name}`
-      }
-      open={open}
-      onCancel={onClose}
-      width={860}
-      footer={
-        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
-          <Button onClick={onClose}>取消</Button>
-          <Button type="primary" loading={saving} onClick={handleSave}>
-            保存模板
-          </Button>
-        </div>
-      }
-      destroyOnClose
-      className="ttv3-modal"
-      styles={{ body: { padding: 0 } }}
-    >
-      <div className="ttv3-editor">
-        {/* 左侧：竖屏预览 + 名称 */}
-        <div className="ttv3-editor-left">
-          <div className="ttv3-editor-canvas">
-            <img className="ttv3-editor-bg" src={EDITOR_BG} alt="" />
-            <div className="ttv3-vignette" />
-            <div className="ttv3-editor-canvas-inner">
-              <TitleMiniPreview
-                settings={previewSettings}
-                width={200}
-                sampleText="预览标题文字"
-                transparent
-                portrait
-              />
-            </div>
-          </div>
-          <div className="ttv3-editor-form">
-            <div className="ttv3-form-row">
-              <label>图标</label>
-              <Input
-                value={formEmoji}
-                maxLength={2}
-                style={{ textAlign: "center", width: 64 }}
-                onChange={(e) => setFormEmoji(e.target.value)}
-              />
-            </div>
-            <div className="ttv3-form-row ttv3-form-row--grow">
-              <label>
-                模板名称<span style={{ color: "#ef4444" }}>*</span>
-              </label>
-              <Input
-                placeholder="给模板起个名字"
-                value={formName}
-                maxLength={20}
-                onChange={(e) => setFormName(e.target.value)}
-              />
-            </div>
-          </div>
-        </div>
-        {/* 右侧：参数 Tab */}
-        <div className="ttv3-editor-right">
-          <TitleStylePanel
-            settings={settings}
-            onUpdatePosition={(p) => upd({ position: p, posX: null, posY: null })}
-            onUpdateFont={(f) => upd({ font: f })}
-            onUpdateSize={(v) => upd({ size: v })}
-            onToggleBold={() => upd({ bold: !settings.bold })}
-            onToggleItalic={() => upd({ italic: !settings.italic })}
-            onToggleStroke={() =>
-              upd({
-                stroke: !settings.stroke,
-                strokeWidth:
-                  !settings.stroke && (settings.strokeWidth ?? 0) < 2 ? 4 : settings.strokeWidth,
-              })
-            }
-            onToggleShadow={() => upd({ shadow: !settings.shadow })}
-            onApplyPreset={() => {
-              /* 编辑器内不使用系统预设快捷键 */
-            }}
-            onUpdateStyle={(patch) => upd(patch)}
-            activePreset={null}
-            titlePresets={[]}
-            POSITION_OPTIONS={POSITION_OPTIONS}
-            FONT_OPTIONS={FONT_OPTIONS}
-            paramsOnly
-          />
-        </div>
-      </div>
-    </Modal>
-  )
-}
-
-export default TitleTemplateEditor

apps/web/src/components/title/constants.ts

@@ -1,362 +0,0 @@
-/**
- * 标题样式相关常量（#2001）
- * - 字体列表（新增4款爆款字体）
- * - 色板（常用标题字色/描边色/背景色）
- * - 预设样式方案（10 个，含抖音爆款黄）
- */
-import type { TitleStyleConfig } from "./types"
-
-/* ── 字体选项（#2001：新增优设标题黑/阿里普惠体Bold/抖音美好体/思源黑体Heavy） ── */
-export interface FontOption {
-  value: string
-  label: string
-  /** CSS font-family 栈 */
-  family: string
-  /** 爆款/常用标签 */
-  tag?: "hot" | "new"
-}
-
-export const FONT_OPTIONS: FontOption[] = [
-  {
-    value: "优设标题黑",
-    label: "优设标题黑",
-    family:
-      '"YouShe Title Black","YouSheBiaoTiHei","Source Han Sans SC Heavy","Noto Sans SC","PingFang SC",sans-serif',
-    tag: "hot",
-  },
-  {
-    value: "阿里普惠体Bold",
-    label: "阿里普惠体Bold",
-    family:
-      '"Alibaba PuHuiTi Bold","Alibaba PuHuiTi","Source Han Sans SC","PingFang SC",sans-serif',
-    tag: "hot",
-  },
-  {
-    value: "抖音美好体",
-    label: "抖音美好体",
-    family: '"Douyin Sans","DouyinSans","Source Han Sans SC","PingFang SC",sans-serif',
-    tag: "hot",
-  },
-  {
-    value: "思源黑体Heavy",
-    label: "思源黑体Heavy",
-    family:
-      '"Source Han Sans SC Heavy","Noto Sans SC","Source Han Sans CN Heavy","PingFang SC",sans-serif',
-    tag: "new",
-  },
-  {
-    value: "思源黑体",
-    label: "思源黑体",
-    family: '"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif',
-  },
-  {
-    value: "思源宋体",
-    label: "思源宋体",
-    family: '"Source Han Serif SC","Noto Serif SC","Songti SC","SimSun",serif',
-  },
-  {
-    value: "苹方",
-    label: "苹方",
-    family: '"PingFang SC",-apple-system,"Helvetica Neue",sans-serif',
-  },
-  {
-    value: "微软雅黑",
-    label: "微软雅黑",
-    family: '"Microsoft YaHei","PingFang SC",sans-serif',
-  },
-  {
-    value: "楷体",
-    label: "楷体",
-    family: '"KaiTi","STKaiti","DFKai-SB",serif',
-  },
-]
-
-/** 根据中文名取 font-family 栈（找不到回退思源黑体） */
-export function getFontFamily(font: string): string {
-  const f = FONT_OPTIONS.find((x) => x.value === font)
-  if (f) return f.family
-  return FONT_OPTIONS[4].family // 思源黑体
-}
-
-/* ── 色板 ── */
-/** 标题字色（常用爆款色） */
-export const TITLE_COLOR_PALETTE: string[] = [
-  "#ffffff",
-  "#000000",
-  "#ffd700", // 抖音黄
-  "#ff2d55", // 抖音红
-  "#ff4081",
-  "#00e5ff",
-  "#d4a843",
-  "#ffa500",
-  "#52c41a",
-  "#1890ff",
-  "#7c3aed",
-  "#ff6b35",
-]
-
-/** 描边色（黑/白/灰为主） */
-export const STROKE_COLOR_PALETTE: string[] = [
-  "#000000",
-  "#ffffff",
-  "#333333",
-  "#555555",
-  "#8b0000",
-  "#001f3f",
-]
-
-/** 背景色（带透明度） */
-export const BG_COLOR_PALETTE: string[] = [
-  "rgba(0,0,0,0.5)",
-  "rgba(0,0,0,0.7)",
-  "rgba(0,0,0,0.3)",
-  "rgba(255,215,0,0.9)",
-  "rgba(255,45,85,0.85)",
-  "rgba(124,58,237,0.85)",
-  "rgba(24,144,255,0.85)",
-  "rgba(82,196,26,0.85)",
-]
-
-/* ── 预设样式方案（10 个，含抖音爆款黄） ── */
-export interface TitlePreset {
-  key: string
-  label: string
-  emoji: string
-  /** 应用时覆盖到 TitleStyleConfig 的字段（其他字段保持当前值） */
-  style: Partial<TitleStyleConfig>
-}
-
-const BASE: Partial<TitleStyleConfig> = {
-  position: "bottom",
-  line_overrides: [],
-  cover_title_config: null,
-}
-
-export const TITLE_PRESETS: TitlePreset[] = [
-  {
-    key: "douyin_hot",
-    label: "抖音爆款黄",
-    emoji: "🔥",
-    style: {
-      ...BASE,
-      font: "优设标题黑",
-      size: 80,
-      color: "#ffd700",
-      bold: true,
-      italic: false,
-      stroke: true,
-      stroke_width: 8,
-      stroke_color: "#000000",
-      shadow: true,
-      shadow_offset_x: 3,
-      shadow_offset_y: 3,
-      shadow_blur: 6,
-      shadow_color: "rgba(0,0,0,0.6)",
-      bg_enabled: false,
-      line_height: 1.25,
-      max_chars_per_line: 8,
-    },
-  },
-  {
-    key: "classic_white",
-    label: "经典白字黑描边",
-    emoji: "⚪",
-    style: {
-      ...BASE,
-      font: "思源黑体Heavy",
-      size: 56,
-      color: "#ffffff",
-      bold: true,
-      italic: false,
-      stroke: true,
-      stroke_width: 5,
-      stroke_color: "#000000",
-      shadow: false,
-      bg_enabled: false,
-      line_height: 1.2,
-      max_chars_per_line: 10,
-    },
-  },
-  {
-    key: "red_bold",
-    label: "醒目红字",
-    emoji: "🔴",
-    style: {
-      ...BASE,
-      font: "优设标题黑",
-      size: 72,
-      color: "#ff2d55",
-      bold: true,
-      italic: false,
-      stroke: true,
-      stroke_width: 6,
-      stroke_color: "#ffffff",
-      shadow: true,
-      shadow_offset_x: 2,
-      shadow_offset_y: 2,
-      shadow_blur: 5,
-      shadow_color: "rgba(0,0,0,0.5)",
-      bg_enabled: false,
-      line_height: 1.2,
-      max_chars_per_line: 9,
-    },
-  },
-  {
-    key: "black_gold",
-    label: "黑金质感",
-    emoji: "🟡",
-    style: {
-      ...BASE,
-      font: "思源宋体",
-      size: 52,
-      color: "#d4a843",
-      bold: true,
-      italic: false,
-      stroke: false,
-      shadow: true,
-      shadow_offset_x: 2,
-      shadow_offset_y: 2,
-      shadow_blur: 8,
-      shadow_color: "rgba(0,0,0,0.8)",
-      bg_enabled: false,
-      line_height: 1.25,
-      max_chars_per_line: 10,
-    },
-  },
-  {
-    key: "neon_blue",
-    label: "霓虹发光",
-    emoji: "💙",
-    style: {
-      ...BASE,
-      font: "阿里普惠体Bold",
-      size: 60,
-      color: "#00e5ff",
-      bold: true,
-      italic: false,
-      stroke: false,
-      shadow: true,
-      shadow_offset_x: 0,
-      shadow_offset_y: 0,
-      shadow_blur: 16,
-      shadow_color: "#00e5ff",
-      bg_enabled: false,
-      line_height: 1.2,
-      max_chars_per_line: 10,
-    },
-  },
-  {
-    key: "bg_black",
-    label: "黑底白字",
-    emoji: "⬛",
-    style: {
-      ...BASE,
-      font: "思源黑体Heavy",
-      size: 52,
-      color: "#ffffff",
-      bold: true,
-      italic: false,
-      stroke: false,
-      shadow: false,
-      bg_enabled: true,
-      bg_color: "rgba(0,0,0,0.7)",
-      bg_padding: 16,
-      bg_radius: 8,
-      line_height: 1.3,
-      max_chars_per_line: 10,
-    },
-  },
-  {
-    key: "bg_yellow",
-    label: "黄底黑字",
-    emoji: "🟨",
-    style: {
-      ...BASE,
-      font: "抖音美好体",
-      size: 56,
-      color: "#000000",
-      bold: true,
-      italic: false,
-      stroke: false,
-      shadow: false,
-      bg_enabled: true,
-      bg_color: "rgba(255,215,0,0.95)",
-      bg_padding: 14,
-      bg_radius: 6,
-      line_height: 1.2,
-      max_chars_per_line: 9,
-    },
-  },
-  {
-    key: "sweet_pink",
-    label: "温柔甜美粉",
-    emoji: "🌸",
-    style: {
-      ...BASE,
-      font: "阿里普惠体Bold",
-      size: 50,
-      color: "#ff4081",
-      bold: false,
-      italic: false,
-      stroke: true,
-      stroke_width: 4,
-      stroke_color: "#ffffff",
-      shadow: true,
-      shadow_offset_x: 2,
-      shadow_offset_y: 2,
-      shadow_blur: 4,
-      shadow_color: "rgba(255,64,129,0.4)",
-      bg_enabled: false,
-      line_height: 1.3,
-      max_chars_per_line: 11,
-    },
-  },
-  {
-    key: "business_dark",
-    label: "商务深色",
-    emoji: "💼",
-    style: {
-      ...BASE,
-      font: "思源黑体",
-      size: 44,
-      color: "#ffffff",
-      bold: false,
-      italic: false,
-      stroke: false,
-      shadow: true,
-      shadow_offset_x: 1,
-      shadow_offset_y: 1,
-      shadow_blur: 3,
-      shadow_color: "rgba(0,0,0,0.8)",
-      bg_enabled: true,
-      bg_color: "rgba(24,144,255,0.85)",
-      bg_padding: 12,
-      bg_radius: 4,
-      line_height: 1.3,
-      max_chars_per_line: 12,
-    },
-  },
-  {
-    key: "minimal_clean",
-    label: "极简无描边",
-    emoji: "✨",
-    style: {
-      ...BASE,
-      font: "苹方",
-      size: 48,
-      color: "#ffffff",
-      bold: true,
-      italic: false,
-      stroke: false,
-      shadow: false,
-      bg_enabled: false,
-      line_height: 1.3,
-      max_chars_per_line: 10,
-    },
-  },
-]
-
-/** 根据 key 获取预设 */
-export function getTitlePreset(key: string): TitlePreset | undefined {
-  return TITLE_PRESETS.find((p) => p.key === key)
-}

apps/web/src/components/title/template-types.ts

@@ -1,28 +0,0 @@
-/**
- * 标题模板系统类型（#2003）
- *
- * 设计：
- * - 内置系统模板（从 TITLE_PRESETS 自动派生，不可编辑/删除，可"复制为我的"）
- * - 用户自定义模板（保存在 localStorage，可编辑/复制/导出/删除）
- * - 模板存完整 TitleStyleConfig（snake_case），与后端契约一致
- */
-import type { TitleStyleConfig } from "./types"
-
-export interface TitleTemplate {
-  /** 唯一 ID：系统模板 `sys:<presetKey>`，用户模板 `usr:<uuid>` */
-  id: string
-  /** 模板名称（必填，保存时校验） */
-  name: string
-  /** 模板描述（可选） */
-  description?: string
-  /** 是否为系统内置（不可删除/编辑源） */
-  isBuiltin: boolean
-  /** emoji（展示用，可选） */
-  emoji?: string
-  /** 创建时间（ISO 字符串，系统模板=固定值） */
-  createdAt: string
-  /** 更新时间 */
-  updatedAt: string
-  /** 完整样式配置（snake_case，与后端 title_config 对齐） */
-  style: Partial<TitleStyleConfig>
-}

apps/web/src/components/title/types.ts

@@ -1,118 +0,0 @@
-/**
- * 共享标题样式配置类型（#2001 爆款标题样式配置面板升级）
- *
- * 设计原则：
- * 1. 向后兼容：保留旧的 bold/stroke/shadow 布尔字段，新增细粒度字段
- *    （stroke_width/stroke_color/shadow_offset_x-y-blur-color/bg_enabled-color-padding-radius/line_height/margin_top/max_chars_per_line）。
- * 2. 后端契约：字段名使用 snake_case，与 title_config dict 直接对齐。
- * 3. line_overrides 支持逐行覆盖（选中某行单独设置颜色/字号/关键词高亮/加粗/斜体）。
- * 4. cover_title_config 为封面独立标题样式，null 表示封面沿用主标题样式。
- */
-
-/** 关键词高亮配置 */
-export interface TitleKeywordHighlight {
-  /** 要高亮的词 */
-  word: string
-  /** 高亮颜色（可选，默认主色反转） */
-  color?: string
-  /** 是否加粗（默认 true） */
-  bold?: boolean
-  /** 额外字号放大倍数（1.0=不变，1.3=放大 30%） */
-  scale?: number
-}
-
-/** 单行覆盖配置 */
-export interface TitleLineOverride {
-  /** 行索引（0-based，按 / 或自动换行后的行序） */
-  line_index: number
-  /** 覆盖后的文字（可选，默认沿用原行） */
-  text?: string
-  /** 覆盖字号（可选） */
-  size?: number
-  /** 覆盖字色（可选） */
-  color?: string
-  /** 覆盖加粗（可选） */
-  bold?: boolean
-  /** 覆盖斜体（可选） */
-  italic?: boolean
-  /** 覆盖描边开关（可选） */
-  stroke?: boolean
-  /** 关键词高亮列表 */
-  highlights?: TitleKeywordHighlight[]
-}
-
-/**
- * 标题样式配置（不含 title 文字本身，不含 auto_subtitle）。
- *
- * cover_title_config 使用 Partial<Omit<...,"cover_title_config">> 递归避免无限类型。
- */
-export interface TitleStyleConfig {
-  /* ── 基础 ── */
-  font: string
-  size: number
-  color: string
-  bold: boolean
-  italic: boolean
-  position: "top" | "center" | "bottom" | "custom"
-  pos_x?: number
-  pos_y?: number
-
-  /* ── 排版（P0） ── */
-  /** 行距倍数（默认 1.2） */
-  line_height: number
-  /** 顶部边距（position=top 时距画面顶部距离，px @720p，默认 24） */
-  margin_top: number
-  /** 每行最大字符数（4-20，超出自动换行；0=不自动换行，使用 / 手动分行） */
-  max_chars_per_line: number
-
-  /* ── 描边参数化（P0） ── */
-  stroke: boolean
-  stroke_width: number
-  stroke_color: string
-
-  /* ── 阴影参数化（P1） ── */
-  shadow: boolean
-  shadow_offset_x: number
-  shadow_offset_y: number
-  shadow_blur: number
-  shadow_color: string
-
-  /* ── 背景色块（P1） ── */
-  bg_enabled: boolean
-  bg_color: string
-  bg_padding: number
-  bg_radius: number
-
-  /* ── 逐行独立样式（P1） ── */
-  line_overrides: TitleLineOverride[]
-
-  /* ── 封面独立标题配置（P1）：null=沿用主标题样式 ── */
-  cover_title_config: null | Partial<Omit<TitleStyleConfig, "cover_title_config">>
-}
-
-/** 默认样式（经典白字黑描边，保持老版本观感） */
-export const DEFAULT_TITLE_STYLE: TitleStyleConfig = {
-  font: "思源黑体",
-  size: 48,
-  color: "#ffffff",
-  bold: true,
-  italic: false,
-  position: "bottom",
-  line_height: 1.2,
-  margin_top: 24,
-  max_chars_per_line: 0,
-  stroke: true,
-  stroke_width: 4,
-  stroke_color: "#000000",
-  shadow: false,
-  shadow_offset_x: 2,
-  shadow_offset_y: 2,
-  shadow_blur: 4,
-  shadow_color: "rgba(0,0,0,0.8)",
-  bg_enabled: false,
-  bg_color: "rgba(0,0,0,0.5)",
-  bg_padding: 12,
-  bg_radius: 8,
-  line_overrides: [],
-  cover_title_config: null,
-}

apps/web/src/components/title/useTitleTemplates.ts

@@ -1,213 +0,0 @@
-/**
- * 标题模板 CRUD Hook（#2003）
- *
- * - 内存态 + localStorage 持久化
- * - 系统模板（来自 TITLE_PRESETS）始终前置、不可删除/编辑源
- * - 用户模板 CRUD：新增/复制/更新/删除/导出/导入
- */
-import { useCallback, useEffect, useMemo, useState } from "react"
-import { TITLE_PRESETS } from "./constants"
-import type { TitleStyleConfig } from "./types"
-import type { TitleTemplate } from "./template-types"
-
-const STORAGE_KEY = "xiaoxia.title.templates.v1"
-
-function uid(): string {
-  return "usr:" + Math.random().toString(36).slice(2, 10) + Date.now().toString(36)
-}
-
-/** 把 TITLE_PRESETS 转为内置 TitleTemplate 列表 */
-function buildBuiltinTemplates(): TitleTemplate[] {
-  const now = "2026-09-22T00:00:00+08:00"
-  return TITLE_PRESETS.map((p) => ({
-    id: `sys:${p.key}`,
-    name: p.label,
-    description: "系统内置模板",
-    isBuiltin: true,
-    emoji: p.emoji,
-    createdAt: now,
-    updatedAt: now,
-    style: { ...p.style },
-  }))
-}
-
-function loadUserTemplates(): TitleTemplate[] {
-  if (typeof window === "undefined") return []
-  try {
-    const raw = window.localStorage.getItem(STORAGE_KEY)
-    if (!raw) return []
-    const parsed = JSON.parse(raw)
-    if (!Array.isArray(parsed)) return []
-    return parsed.filter((t) => t && !t.isBuiltin && t.id.startsWith("usr:"))
-  } catch {
-    return []
-  }
-}
-
-function saveUserTemplates(list: TitleTemplate[]) {
-  if (typeof window === "undefined") return
-  try {
-    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(list))
-  } catch {
-    /* ignore quota */
-  }
-}
-
-export interface UseTitleTemplatesResult {
-  templates: TitleTemplate[]
-  builtin: TitleTemplate[]
-  custom: TitleTemplate[]
-  /** 新建自定义模板：传入样式（snake_case），返回新建模板 id */
-  createTemplate: (input: {
-    name: string
-    description?: string
-    emoji?: string
-    style: Partial<TitleStyleConfig>
-  }) => TitleTemplate
-  /** 复制模板（内置模板也可复制，自动加"副本"后缀） */
-  duplicateTemplate: (id: string) => TitleTemplate | null
-  /** 更新自定义模板（系统模板不可改） */
-  updateTemplate: (id: string, patch: Partial<Omit<TitleTemplate, "id" | "isBuiltin">>) => void
-  /** 删除自定义模板 */
-  deleteTemplate: (id: string) => void
-  /** 导出单个模板为 JSON 字符串 */
-  exportTemplate: (id: string) => string | null
-  /** 导入 JSON 字符串作为新模板，返回新建模板 */
-  importTemplate: (json: string) => TitleTemplate | null
-  /** 根据 id 查询模板 */
-  getById: (id: string) => TitleTemplate | undefined
-}
-
-export function useTitleTemplates(): UseTitleTemplatesResult {
-  const [custom, setCustom] = useState<TitleTemplate[]>(() => loadUserTemplates())
-
-  // 跨 tab 同步
-  useEffect(() => {
-    const onStorage = (e: StorageEvent) => {
-      if (e.key === STORAGE_KEY) setCustom(loadUserTemplates())
-    }
-    window.addEventListener("storage", onStorage)
-    return () => window.removeEventListener("storage", onStorage)
-  }, [])
-
-  const builtin = useMemo(() => buildBuiltinTemplates(), [])
-  const templates = useMemo(() => [...builtin, ...custom], [builtin, custom])
-
-  const persist = useCallback((next: TitleTemplate[]) => {
-    setCustom(next)
-    saveUserTemplates(next)
-  }, [])
-
-  const getById = useCallback((id: string) => templates.find((t) => t.id === id), [templates])
-
-  const createTemplate = useCallback<UseTitleTemplatesResult["createTemplate"]>(
-    ({ name, description, emoji, style }) => {
-      const now = new Date().toISOString()
-      const t: TitleTemplate = {
-        id: uid(),
-        name: name.trim() || "未命名模板",
-        description: description?.trim() || undefined,
-        emoji: emoji || "✨",
-        isBuiltin: false,
-        createdAt: now,
-        updatedAt: now,
-        style: { ...style },
-      }
-      persist([...custom, t])
-      return t
-    },
-    [custom, persist],
-  )
-
-  const duplicateTemplate = useCallback<UseTitleTemplatesResult["duplicateTemplate"]>(
-    (id) => {
-      const src = templates.find((t) => t.id === id)
-      if (!src) return null
-      const now = new Date().toISOString()
-      const t: TitleTemplate = {
-        id: uid(),
-        name: `${src.name} 副本`,
-        description: src.description,
-        emoji: src.emoji,
-        isBuiltin: false,
-        createdAt: now,
-        updatedAt: now,
-        style: { ...src.style },
-      }
-      persist([...custom, t])
-      return t
-    },
-    [templates, custom, persist],
-  )
-
-  const updateTemplate = useCallback<UseTitleTemplatesResult["updateTemplate"]>(
-    (id, patch) => {
-      if (id.startsWith("sys:")) return
-      const next = custom.map((t) =>
-        t.id === id
-          ? { ...t, ...patch, id: t.id, isBuiltin: false, updatedAt: new Date().toISOString() }
-          : t,
-      )
-      persist(next)
-    },
-    [custom, persist],
-  )
-
-  const deleteTemplate = useCallback<UseTitleTemplatesResult["deleteTemplate"]>(
-    (id) => {
-      if (id.startsWith("sys:")) return
-      persist(custom.filter((t) => t.id !== id))
-    },
-    [custom, persist],
-  )
-
-  const exportTemplate = useCallback<UseTitleTemplatesResult["exportTemplate"]>(
-    (id) => {
-      const t = templates.find((x) => x.id === id)
-      if (!t) return null
-      return JSON.stringify(
-        {
-          name: t.name,
-          description: t.description,
-          emoji: t.emoji,
-          style: t.style,
-          exportedAt: new Date().toISOString(),
-        },
-        null,
-        2,
-      )
-    },
-    [templates],
-  )
-
-  const importTemplate = useCallback<UseTitleTemplatesResult["importTemplate"]>(
-    (json) => {
-      try {
-        const data = JSON.parse(json)
-        if (!data || typeof data !== "object" || !data.style) return null
-        return createTemplate({
-          name: data.name || "导入模板",
-          description: data.description,
-          emoji: data.emoji || "✨",
-          style: data.style,
-        })
-      } catch {
-        return null
-      }
-    },
-    [createTemplate],
-  )
-
-  return {
-    templates,
-    builtin,
-    custom,
-    createTemplate,
-    duplicateTemplate,
-    updateTemplate,
-    deleteTemplate,
-    exportTemplate,
-    importTemplate,
-    getById,
-  }
-}

apps/web/src/components/title/utils.ts

@@ -1,125 +0,0 @@
-/**
- * 标题样式工具（#2001 / 模板系统 #2003）
- *
- * - snake_case TitleStyleConfig ↔ camelCase TitleSettings 互转
- * - preset 归一化预览（修复"标题"两字大小不一）
- */
-import type { TitleStyleConfig } from "./types"
-import type { TitleSettings } from "../../pages/generate/types"
-import { TITLE_PRESETS } from "./constants"
-import { DEFAULT_TITLE_SETTINGS_FULL } from "../../pages/generate/types"
-import type { TitleTemplate } from "./template-types"
-
-/** snake_case TitleStyleConfig → camelCase TitleSettings（仅覆盖已知字段） */
-export function titleStyleConfigToCamel(s: Partial<TitleStyleConfig>): Partial<TitleSettings> {
-  const out: Partial<TitleSettings> = {}
-  if (s.font != null) out.font = s.font
-  if (s.size != null) out.size = s.size
-  if (s.color != null) out.color = s.color
-  if (s.bold != null) out.bold = s.bold
-  if (s.italic != null) out.italic = s.italic
-  if (s.position != null) out.position = s.position as TitleSettings["position"]
-  if (s.pos_x != null) out.posX = s.pos_x
-  if (s.pos_y != null) out.posY = s.pos_y
-  if (s.line_height != null) out.lineHeight = s.line_height
-  if (s.margin_top != null) out.marginTop = s.margin_top
-  if (s.max_chars_per_line != null) out.maxCharsPerLine = s.max_chars_per_line
-  if (s.stroke != null) out.stroke = s.stroke
-  if (s.stroke_width != null) out.strokeWidth = s.stroke_width
-  if (s.stroke_color != null) out.strokeColor = s.stroke_color
-  if (s.shadow != null) out.shadow = s.shadow
-  if (s.shadow_offset_x != null) out.shadowOffsetX = s.shadow_offset_x
-  if (s.shadow_offset_y != null) out.shadowOffsetY = s.shadow_offset_y
-  if (s.shadow_blur != null) out.shadowBlur = s.shadow_blur
-  if (s.shadow_color != null) out.shadowColor = s.shadow_color
-  if (s.bg_enabled != null) out.bgEnabled = s.bg_enabled
-  if (s.bg_color != null) out.bgColor = s.bg_color
-  if (s.bg_padding != null) out.bgPadding = s.bg_padding
-  if (s.bg_radius != null) out.bgRadius = s.bg_radius
-  if (s.line_overrides != null) out.lineOverrides = s.line_overrides
-  return out
-}
-
-/** camelCase TitleSettings patch → snake_case TitleStyleConfig patch */
-export function camelToTitleStyleConfig(p: Partial<TitleSettings>): Partial<TitleStyleConfig> {
-  const out: Partial<TitleStyleConfig> = {}
-  if (p.font != null) out.font = p.font
-  if (p.size != null) out.size = p.size
-  if (p.color != null) out.color = p.color
-  if (p.bold != null) out.bold = p.bold
-  if (p.italic != null) out.italic = p.italic
-  if (p.position != null) out.position = p.position as TitleStyleConfig["position"]
-  if (p.posX != null) out.pos_x = p.posX
-  if (p.posY != null) out.pos_y = p.posY
-  if (p.lineHeight != null) out.line_height = p.lineHeight
-  if (p.marginTop != null) out.margin_top = p.marginTop
-  if (p.maxCharsPerLine != null) out.max_chars_per_line = p.maxCharsPerLine
-  if (p.stroke != null) out.stroke = p.stroke
-  if (p.strokeWidth != null) out.stroke_width = p.strokeWidth
-  if (p.strokeColor != null) out.stroke_color = p.strokeColor
-  if (p.shadow != null) out.shadow = p.shadow
-  if (p.shadowOffsetX != null) out.shadow_offset_x = p.shadowOffsetX
-  if (p.shadowOffsetY != null) out.shadow_offset_y = p.shadowOffsetY
-  if (p.shadowBlur != null) out.shadow_blur = p.shadowBlur
-  if (p.shadowColor != null) out.shadow_color = p.shadowColor
-  if (p.bgEnabled != null) out.bg_enabled = p.bgEnabled
-  if (p.bgColor != null) out.bg_color = p.bgColor
-  if (p.bgPadding != null) out.bg_padding = p.bgPadding
-  if (p.bgRadius != null) out.bg_radius = p.bgRadius
-  if (p.lineOverrides != null) out.line_overrides = p.lineOverrides
-  return out
-}
-
-/**
- * 把 preset style（snake_case）归一化为固定字号的 TitleSettings，
- * 用于"预设卡片"缩略预览——所有卡片视觉上"标题"两字大小一致，便于辨识。
- * 描边/阴影/背景padding 按 fixedSize / 原始 size 比例缩放，避免粗描边爆框。
- */
-export function buildPresetPreviewSettings(
-  base: TitleSettings,
-  presetKey: string,
-  fixedSize = 56,
-): TitleSettings {
-  const preset = TITLE_PRESETS.find((p) => p.key === presetKey)
-  if (!preset) return base
-  const origSize = preset.style.size ?? fixedSize
-  const ratio = fixedSize / origSize
-  const scale = (v: number | undefined, fallback: number): number =>
-    v != null ? Math.round(v * ratio) : fallback
-  return {
-    ...base,
-    ...titleStyleConfigToCamel(preset.style),
-    size: fixedSize,
-    strokeWidth: scale(preset.style.stroke_width, base.strokeWidth) ?? base.strokeWidth,
-    shadowOffsetX: scale(preset.style.shadow_offset_x, base.shadowOffsetX) ?? base.shadowOffsetX,
-    shadowOffsetY: scale(preset.style.shadow_offset_y, base.shadowOffsetY) ?? base.shadowOffsetY,
-    shadowBlur: scale(preset.style.shadow_blur, base.shadowBlur) ?? base.shadowBlur,
-    bgPadding: scale(preset.style.bg_padding, base.bgPadding) ?? base.bgPadding,
-    lineOverrides: [],
-  }
-}
-
-/**
- * 把 TitleTemplate 渲染为完整 TitleSettings（带默认值），用于卡片预览。
- * 与模板选择器中保持一致，抽出共用。
- */
-export function templateToPreviewSettings(t: TitleTemplate, fixedSize = 48): TitleSettings {
-  const base: TitleSettings = {
-    ...DEFAULT_TITLE_SETTINGS_FULL,
-    ...titleStyleConfigToCamel(t.style),
-  }
-  // 预览时用固定字号保证所有卡片字大小一致；描边/阴影/padding按比例缩放
-  const origSize = t.style.size ?? base.size
-  if (origSize && origSize !== fixedSize) {
-    const ratio = fixedSize / origSize
-    base.size = fixedSize
-    if (base.strokeWidth != null)
-      base.strokeWidth = Math.max(1, Math.round(base.strokeWidth * ratio))
-    if (base.shadowOffsetX != null) base.shadowOffsetX = Math.round(base.shadowOffsetX * ratio)
-    if (base.shadowOffsetY != null) base.shadowOffsetY = Math.round(base.shadowOffsetY * ratio)
-    if (base.shadowBlur != null) base.shadowBlur = Math.round(base.shadowBlur * ratio)
-    if (base.bgPadding != null) base.bgPadding = Math.round(base.bgPadding * ratio)
-  }
-  base.lineOverrides = []
-  return base
-}

apps/web/src/components/voice/TtsStyleSelector/index.tsx

@@ -1,151 +0,0 @@
-/**
- * TTS 配音风格选择器
- * - 6 种预设风格卡片（自然亲切 / 激动兴奋 / 沉稳专业 / 温柔甜美 / 新闻播报 / 直播带货）
- * - 卡片单选，选中高亮紫色
- * - 默认 natural
- *
- * 复用方式：
- *   <TtsStyleSelector value={style} onChange={setStyle} />
- *   <TtsStyleSelector value={style} onChange={setStyle} compact />  // 紧凑模式（小尺寸）
- */
-import React from "react"
-import { TTS_STYLE_OPTIONS, DEFAULT_TTS_STYLE, type TtsStyle } from "@/api/tts/styles"
-
-export interface TtsStyleSelectorProps {
-  value?: TtsStyle | string
-  onChange: (style: TtsStyle) => void
-  /** 紧凑模式（小卡片），适合与其他参数并排 */
-  compact?: boolean
-  /** 是否显示"配音风格"标签 */
-  showLabel?: boolean
-}
-
-const TtsStyleSelector: React.FC<TtsStyleSelectorProps> = ({
-  value,
-  onChange,
-  compact = false,
-  showLabel = true,
-}) => {
-  const current = value || DEFAULT_TTS_STYLE
-
-  if (compact) {
-    return (
-      <div>
-        {showLabel && (
-          <div
-            style={{
-              fontSize: 13,
-              color: "var(--text-secondary, #6b7280)",
-              marginBottom: 6,
-            }}
-          >
-            配音风格
-          </div>
-        )}
-        <div
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(3, 1fr)",
-            gap: 6,
-          }}
-        >
-          {TTS_STYLE_OPTIONS.map((opt) => {
-            const selected = current === opt.value
-            return (
-              <button
-                type="button"
-                key={opt.value}
-                onClick={() => onChange(opt.value as TtsStyle)}
-                title={opt.description}
-                style={{
-                  padding: "6px 4px",
-                  borderRadius: 6,
-                  border: selected ? "2px solid #7c3aed" : "1px solid #e5e7eb",
-                  background: selected ? "#faf5ff" : "#fff",
-                  color: selected ? "#6d28d9" : "#374151",
-                  cursor: "pointer",
-                  fontSize: 12,
-                  fontWeight: selected ? 600 : 400,
-                  textAlign: "center",
-                  transition: "all 0.15s",
-                  lineHeight: 1.3,
-                }}
-              >
-                <span style={{ marginRight: 3 }}>{opt.emoji}</span>
-                {opt.label}
-              </button>
-            )
-          })}
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div>
-      {showLabel && (
-        <div
-          style={{
-            fontSize: 13,
-            color: "var(--text-secondary, #6b7280)",
-            marginBottom: 8,
-            fontWeight: 500,
-          }}
-        >
-          配音风格
-        </div>
-      )}
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(3, 1fr)",
-          gap: 8,
-        }}
-      >
-        {TTS_STYLE_OPTIONS.map((opt) => {
-          const selected = current === opt.value
-          return (
-            <button
-              type="button"
-              key={opt.value}
-              onClick={() => onChange(opt.value as TtsStyle)}
-              title={opt.description}
-              style={{
-                padding: "10px 8px",
-                borderRadius: 8,
-                border: selected ? "2px solid #7c3aed" : "1px solid #e5e7eb",
-                background: selected ? "#faf5ff" : "#fff",
-                color: selected ? "#6d28d9" : "#111",
-                cursor: "pointer",
-                textAlign: "center",
-                transition: "all 0.15s",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: 4,
-              }}
-            >
-              <span style={{ fontSize: 22, lineHeight: 1 }}>{opt.emoji}</span>
-              <span style={{ fontSize: 13, fontWeight: selected ? 600 : 500 }}>{opt.label}</span>
-              <span
-                style={{
-                  fontSize: 10,
-                  color: "#9ca3af",
-                  lineHeight: 1.2,
-                  maxWidth: "100%",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                }}
-              >
-                {opt.description}
-              </span>
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-export default TtsStyleSelector

apps/web/src/pages/ai-avatar/AiAvatarPage.tsx

@@ -30,7 +30,11 @@ import {
 } from "./api/aiAvatar"
 import { getOrCreateDefaultProject } from "@/api/projects"
 import type { RenderJob, SentenceTiming } from "./types"
-import { buildTitleConfigPayload, buildCoverConfigPayload } from "./utils/contract"
+import {
+  normalizeEmotion,
+  buildTitleConfigPayload,
+  buildCoverConfigPayload,
+} from "./utils/contract"
 import { renderTitleToPngDataUrl, getVideoResolution } from "./utils/titleCanvas"
 
 /** 面板折叠状态 */
@@ -61,9 +65,6 @@ const AiAvatarPage: React.FC = () => {
     "generating",
   )
   const [lipsyncErrorMessage, setLipsyncErrorMessage] = useState("")
-  const [lipsyncElapsed, setLipsyncElapsed] = useState(0)
-  /* ── 对口型计时器 ── */
-  const lipsyncElapsedTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
   /* ── 渲染进度弹窗 ── */
   const [showRenderModal, setShowRenderModal] = useState(false)
   const [renderStatus, setRenderStatus] = useState<"generating" | "completed" | "failed">(
@@ -83,30 +84,6 @@ const AiAvatarPage: React.FC = () => {
   /* ── 渲染进度轮询 ── */
   const renderTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
-  /* ── 对口型计时器工具 ── */
-  const _formatElapsed = useCallback((seconds: number) => {
-    const m = Math.floor(seconds / 60)
-    const s = seconds % 60
-    return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`
-  }, [])
-
-  const _startLipsyncElapsedTimer = useCallback(() => {
-    if (lipsyncElapsedTimerRef.current) {
-      clearInterval(lipsyncElapsedTimerRef.current)
-    }
-    setLipsyncElapsed(0)
-    lipsyncElapsedTimerRef.current = setInterval(() => {
-      setLipsyncElapsed((prev) => prev + 1)
-    }, 1000)
-  }, [])
-
-  const _stopLipsyncElapsedTimer = useCallback(() => {
-    if (lipsyncElapsedTimerRef.current) {
-      clearInterval(lipsyncElapsedTimerRef.current)
-      lipsyncElapsedTimerRef.current = null
-    }
-  }, [])
-
   const togglePanel = useCallback((key: PanelKey) => {
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }))
   }, [])
@@ -117,7 +94,7 @@ const AiAvatarPage: React.FC = () => {
       state.resetTtsPreview()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.scriptText, state.selectedVoice?.voice_id, state.speed, state.style])
+  }, [state.scriptText, state.selectedVoice?.voice_id, state.speed, state.emotion])
 
   const _clearTtsProgressTimer = useCallback(() => {
     if (ttsProgressTimerRef.current) {
@@ -171,7 +148,7 @@ const AiAvatarPage: React.FC = () => {
         voice_id: state.selectedVoice!.voice_id,
         script_text: state.scriptText,
         speed: state.speed,
-        style: state.style,
+        emotion: normalizeEmotion(state.emotion),
       })
       _clearTtsProgressTimer()
       setTtsProgress(100)
@@ -198,7 +175,7 @@ const AiAvatarPage: React.FC = () => {
       })
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.selectedVideo, state.selectedVoice, state.scriptText, state.speed, state.style])
+  }, [state.selectedVideo, state.selectedVoice, state.scriptText, state.speed, state.emotion])
 
   const handleRetryTts = useCallback(() => {
     handleGenerateTts()
@@ -249,7 +226,6 @@ const AiAvatarPage: React.FC = () => {
       setShowLipsyncModal(true)
       setLipsyncStatus("generating")
       setLipsyncErrorMessage("")
-      _startLipsyncElapsedTimer()
 
       const asset = await getAssetById(video.id)
       const videoUrl = asset?.file_url
@@ -278,7 +254,7 @@ const AiAvatarPage: React.FC = () => {
           script_text: state.scriptText,
           video_url: videoUrl,
           speed: state.speed,
-          style: state.style,
+          emotion: normalizeEmotion(state.emotion),
         }
       }
       const job = await createLipsyncJob(payload)
@@ -293,7 +269,6 @@ const AiAvatarPage: React.FC = () => {
           state.setLipsyncJob(updated)
           if (updated.status === "completed") {
             if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
-            _stopLipsyncElapsedTimer()
             setLipsyncStatus("completed")
             setTimeout(() => {
               setShowLipsyncModal(false)
@@ -301,7 +276,6 @@ const AiAvatarPage: React.FC = () => {
             }, 1000)
           } else if (updated.status === "failed") {
             if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
-            _stopLipsyncElapsedTimer()
             setLipsyncStatus("failed")
             setLipsyncErrorMessage(updated.error_message || "对口型生成失败")
           }
@@ -315,8 +289,6 @@ const AiAvatarPage: React.FC = () => {
         data: (err as { response?: { data?: unknown } })?.response?.data,
         message: err instanceof Error ? err.message : String(err),
       })
-      _stopLipsyncElapsedTimer()
-      setLipsyncElapsed(0)
       setShowLipsyncModal(false)
       message.error(err instanceof Error ? err.message : "对口型任务提交失败，请重试")
     }
@@ -326,11 +298,8 @@ const AiAvatarPage: React.FC = () => {
     state.selectedVoice,
     state.scriptText,
     state.speed,
-
-    state.style,
+    state.emotion,
     state.ttsPreview,
-    _startLipsyncElapsedTimer,
-    _stopLipsyncElapsedTimer,
   ])
 
   // 取消对口型生成
@@ -339,19 +308,16 @@ const AiAvatarPage: React.FC = () => {
       clearInterval(lipsyncTimerRef.current)
       lipsyncTimerRef.current = null
     }
-    _stopLipsyncElapsedTimer()
-    setLipsyncElapsed(0)
     setShowLipsyncModal(false)
     setLipsyncStatus("generating")
     setLipsyncErrorMessage("")
-  }, [_stopLipsyncElapsedTimer])
+  }, [])
 
   // 清理轮询
   useEffect(() => {
     return () => {
       if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
       if (renderTimerRef.current) clearInterval(renderTimerRef.current)
-      if (lipsyncElapsedTimerRef.current) clearInterval(lipsyncElapsedTimerRef.current)
     }
   }, [])
 
@@ -632,8 +598,8 @@ const AiAvatarPage: React.FC = () => {
                   onVoiceSourceChange={state.setVoiceSource}
                   selectedVoice={state.selectedVoice}
                   onSelectVoice={state.setSelectedVoice}
-                  style={state.style}
-                  onStyleChange={state.setStyle}
+                  emotion={state.emotion}
+                  onEmotionChange={state.setEmotion}
                   speed={state.speed}
                   onSpeedChange={state.setSpeed}
                   language={state.language}
@@ -1001,9 +967,6 @@ const AiAvatarPage: React.FC = () => {
                     对口型视频生成中…
                   </div>
                   <div style={{ marginTop: 8, fontSize: 13, color: "#8c8ca1" }}>
-                    已用时：{_formatElapsed(lipsyncElapsed)}
-                  </div>
-                  <div style={{ marginTop: 4, fontSize: 13, color: "#8c8ca1" }}>
                     请勿关闭页面，完成后将自动提示
                   </div>
                 </>

apps/web/src/pages/ai-avatar/api/aiAvatar.ts

@@ -41,8 +41,6 @@ export const createLipsyncJob = async (data: {
   speed?: number
   /** 情绪英文枚举：neutral/happy/sad/angry/surprised/fearful/disgusted（TTS 直生模式用；前端经 normalizeEmotion 归一化） */
   emotion?: string
-  /** 配音风格预设（natural/excited/professional/sweet/news/livestream） */
-  style?: string
   enable_video_loop?: boolean
   project_id?: string
 }): Promise<LipsyncJob> => {
@@ -57,7 +55,6 @@ export const previewTts = async (data: {
   script_text: string
   speed?: number
   emotion?: string
-  style?: string
 }): Promise<{
   audio_url: string
   duration: number

apps/web/src/pages/ai-avatar/components/PanelLipsyncPreview.tsx

@@ -29,7 +29,15 @@ function formatTime(seconds: number): string {
   return `${m}:${s.toString().padStart(2, "0")}`
 }
 
-import { getFontFamily as getFontFamilyByKey } from "@/components/title/constants"
+/** 字体名 → CSS font-family 映射（与 titleCanvas 字体链对齐） */
+const FONT_FAMILY_MAP: Record<string, string> = {
+  思源黑体:
+    "'Noto Sans CJK SC', 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', sans-serif",
+  思源宋体: "'Noto Serif SC', 'Source Han Serif SC', 'SimSun', serif",
+  楷体: "KaiTi, 'STKaiti', serif",
+  黑体: "'Heiti SC', 'SimHei', 'Microsoft YaHei', sans-serif",
+}
+const getFontFamily = (font: string): string => FONT_FAMILY_MAP[font] || FONT_FAMILY_MAP["思源黑体"]
 
 export function PanelLipsyncPreview({
   lipsyncJob,
@@ -75,105 +83,63 @@ export function PanelLipsyncPreview({
   const previewScale = containerWidth > 0 ? containerWidth / 720 : 0.35
   const ps = useCallback((v: number) => Math.round(v * previewScale * 100) / 100, [previewScale])
 
-  /** 标题叠加样式（新字段全支持：描边宽色/阴影参数化/背景块/行距/顶部边距/自动换行） */
-  const titleOverlayData =
+  /** 标题叠加样式（字号/padding/描边/阴影均按 previewScale 缩放，保持与成片视觉一致） */
+  const titleOverlayStyle: React.CSSProperties | null =
     titleConfig?.title && containerWidth > 0
       ? (() => {
-          const c = titleConfig as AiAvatarTitleConfig & {
-            stroke_width?: number
-            stroke_color?: string
-            shadow_offset_x?: number
-            shadow_offset_y?: number
-            shadow_blur?: number
-            shadow_color?: string
-            line_height?: number
-            margin_top?: number
-            max_chars_per_line?: number
-            bg_enabled?: boolean
-            bg_color?: string
-            bg_padding?: number
-            bg_radius?: number
-            cover_title_config?: Record<string, unknown> | null
-            line_overrides?: unknown[]
-          }
           const baseSize = titleConfig.size || 48
           const fontSize = ps(baseSize)
-          const strokeW = c.stroke ? ps(c.stroke_width ?? 4) : 0
-          const strokeC = c.stroke_color || "#000000"
-          const shBlur = ps(c.shadow_blur ?? 4)
-          const shOffX = ps(c.shadow_offset_x ?? 2)
-          const shOffY = ps(c.shadow_offset_y ?? 2)
-          const shColor = c.shadow_color || "rgba(0,0,0,0.8)"
-          const lh = c.line_height ?? 1.2
-          const mTop = ps(c.margin_top ?? 24)
-          const bgPad = ps(c.bg_padding ?? 12)
-          const bgR = ps(c.bg_radius ?? 8)
-          const maxChars = c.max_chars_per_line ?? 0
-          const rawText = titleConfig.title || ""
-          const lines = (() => {
-            const manual = rawText
-              .split(/[/／]/)
-              .map((l) => l.trim())
-              .filter(Boolean)
-            if (!maxChars || maxChars <= 0) return manual
-            const out: string[] = []
-            manual.forEach((seg) => {
-              for (let i = 0; i < seg.length; i += maxChars) out.push(seg.slice(i, i + maxChars))
-            })
-            return out
-          })()
-          const padV = ps(16) * 0.5
-          const textShadow = titleConfig.shadow
-            ? `${shOffX}px ${shOffY}px ${shBlur}px ${shColor}`
-            : undefined
+          // 描边宽度基准 ≈ size * 0.06，最小 1.5px @720p
+          const strokeW = Math.max(ps(1.5), +(baseSize * 0.06 * previewScale).toFixed(2))
+          // 阴影按比例缩放
+          const shadowBlur = ps(4)
+          const shadowOffsetY = ps(2)
+          // padding / top 边距按比例（基准 8px 对应预览小窗，成片基准 16px，这里 8px 对应约 0.33 缩放）
+          const padV = ps(16) * 0.5 // ≈ 8px in ~240px container
+          const padH = ps(24) * 0.5
+
           const style: React.CSSProperties = {
             position: "absolute",
             color: titleConfig.color || "#ffffff",
-            fontFamily: getFontFamilyByKey(titleConfig.font || "source_sans_sc"),
+            fontFamily: getFontFamily(titleConfig.font || "思源黑体"),
             fontSize: `${fontSize}px`,
             fontWeight: titleConfig.bold ? 700 : 400,
             fontStyle: titleConfig.italic ? "italic" : "normal",
             textAlign: "center",
-            lineHeight: lh,
-            WebkitTextStroke:
-              titleConfig.stroke && strokeW > 0 ? `${strokeW}px ${strokeC}` : undefined,
-            paintOrder: "stroke fill",
-            textShadow,
-            whiteSpace: "pre-wrap",
-            padding: c.bg_enabled ? `${bgPad}px ${bgPad}px` : 0,
-            background: c.bg_enabled ? c.bg_color || "rgba(0,0,0,0.5)" : "transparent",
-            borderRadius: c.bg_enabled ? `${bgR}px` : 0,
+            width: "90%",
+            lineHeight: 1.2,
+            padding: `${ps(4)}px ${padH}px`,
+            textShadow: titleConfig.shadow
+              ? `0 ${shadowOffsetY}px ${shadowBlur}px rgba(0,0,0,0.8), 0 0 ${ps(2)}px rgba(0,0,0,0.5)`
+              : undefined,
+            WebkitTextStroke: titleConfig.stroke ? `${strokeW}px #000` : undefined,
             boxSizing: "border-box",
-            display: "inline-block",
-            maxWidth: "94%",
-          }
-          const wrap: React.CSSProperties = {
-            position: "absolute",
-            left: "50%",
-            width: "100%",
-            display: "flex",
-            justifyContent: "center",
-            pointerEvents: onTitlePositionChange ? "auto" : "none",
+            wordBreak: "break-word",
+            whiteSpace: "pre-wrap",
           }
+
           if (
             titleConfig.position === "custom" &&
             titleConfig.pos_x != null &&
             titleConfig.pos_y != null
           ) {
-            wrap.left = `${titleConfig.pos_x}%`
-            wrap.top = `${titleConfig.pos_y}%`
-            wrap.transform = "translate(-50%, -50%)"
+            style.left = `${titleConfig.pos_x}%`
+            style.top = `${titleConfig.pos_y}%`
+            style.transform = "translateX(-50%) translateY(-50%)"
           } else if (titleConfig.position === "top") {
-            wrap.top = `${padV + mTop}px`
-            wrap.transform = "translateX(-50%)"
+            style.left = "50%"
+            style.top = padV
+            style.transform = "translateX(-50%)"
           } else if (titleConfig.position === "bottom") {
-            wrap.bottom = `${padV}px`
-            wrap.transform = "translateX(-50%)"
+            style.left = "50%"
+            style.bottom = padV
+            style.transform = "translateX(-50%)"
           } else {
-            wrap.top = "50%"
-            wrap.transform = "translate(-50%, -50%)"
+            style.left = "50%"
+            style.top = "50%"
+            style.transform = "translateX(-50%) translateY(-50%)"
           }
-          return { style, wrap, lines }
+          return style
         })()
       : null
 
@@ -286,23 +252,25 @@ export function PanelLipsyncPreview({
           {isDone && lipsyncJob?.output_video_url ? (
             <div style={{ position: "relative", width: "100%", height: "100%" }}>
               <video src={lipsyncJob.output_video_url} controls />
-              {titleOverlayData && (
+              {titleOverlayStyle && (
                 <div
                   ref={titleDragRef}
                   style={{
-                    ...titleOverlayData.wrap,
+                    ...titleOverlayStyle,
                     cursor: onTitlePositionChange ? "grab" : "default",
+                    pointerEvents: onTitlePositionChange ? "auto" : "none",
                   }}
                   onPointerDown={handleTitlePointerDown}
                   onPointerMove={handleTitlePointerMove}
                   onPointerUp={handleTitlePointerUp}
                   onPointerCancel={handleTitlePointerUp}
                 >
-                  <div style={titleOverlayData.style}>
-                    {titleOverlayData.lines.map((part: string, i: number) => (
-                      <div key={i}>{part}</div>
-                    ))}
-                  </div>
+                  {titleConfig!.title.split(/[/／]/).map((part, i) => (
+                    <span key={i}>
+                      {i > 0 && <br />}
+                      {part}
+                    </span>
+                  ))}
                 </div>
               )}
             </div>

apps/web/src/pages/ai-avatar/components/PanelTitleConfig.tsx

@@ -10,13 +10,10 @@
 import React, { useMemo, useState, useEffect } from "react"
 import { Input } from "antd"
 import TitleStylePanel from "@/pages/generate/components/title/TitleStylePanel"
-import type { TitleTemplate } from "@/components/title/template-types"
-
 import TitleLibraryAutoComplete from "@/pages/generate/components/title/TitleLibraryAutoComplete"
 import type { TitleOption } from "@/pages/generate/components/title/TitleLibraryAutoComplete"
 import type { TitleSettings } from "@/pages/generate/types"
-import { POSITION_OPTIONS } from "@/pages/generate/constants"
-import { FONT_OPTIONS, TITLE_PRESETS } from "@/components/title/constants"
+import { POSITION_OPTIONS, FONT_OPTIONS, TITLE_PRESETS } from "@/pages/generate/constants"
 import type { AiAvatarTitleConfig } from "../types"
 // #1894: 标题数据源切换到文案库，取 script.title 作为候选
 import { getScripts } from "@/api/scripts"
@@ -31,7 +28,6 @@ interface PanelTitleConfigProps {
 const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpdate }) => {
   /** TitleStylePanel 内部高亮的预设 key（面板本地状态） */
   const [activePreset, setActivePreset] = useState<string | null>(null)
-  const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null)
 
   /** 标题库选项（#1894：从文案库 scripts[].title 取候选） */
   const [titleOptions, setTitleOptions] = useState<TitleOption[]>([])
@@ -53,60 +49,9 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
       .catch(() => setTitleOptions([]))
   }, [])
 
-  /** AiAvatarTitleConfig (snake_case) → TitleSettings (camelCase) */
-  const titleSettings: TitleSettings = useMemo(() => {
-    const c = titleConfig as AiAvatarTitleConfig & {
-      stroke_width?: number
-      stroke_color?: string
-      shadow_offset_x?: number
-      shadow_offset_y?: number
-      shadow_blur?: number
-      shadow_color?: string
-      line_height?: number
-      margin_top?: number
-      max_chars_per_line?: number
-      bg_enabled?: boolean
-      bg_color?: string
-      bg_padding?: number
-      bg_radius?: number
-      cover_title_config?: {
-        title?: string
-        font?: string
-        size?: number
-        font_size?: number
-        color?: string
-        font_color?: string
-        bold?: boolean
-        italic?: boolean
-        position?: string
-        stroke?: { enabled: boolean; width?: number; color?: string } | boolean
-        stroke_width?: number
-        stroke_color?: string
-        shadow?:
-          | {
-              enabled: boolean
-              offset_x?: number
-              offset_y?: number
-              blur?: number
-              color?: string
-            }
-          | boolean
-        shadow_offset_x?: number
-        shadow_offset_y?: number
-        shadow_blur?: number
-        shadow_color?: string
-        background?: { enabled: boolean; color?: string; padding?: number; radius?: number }
-        bg_enabled?: boolean
-        bg_color?: string
-        bg_padding?: number
-        bg_radius?: number
-        line_height?: number
-        margin_top?: number
-        max_chars_per_line?: number
-      } | null
-      line_overrides?: unknown[]
-    }
-    return {
+  /** AiAvatarTitleConfig → TitleSettings（补齐 aiAutoSelect / 自由坐标字段） */
+  const titleSettings: TitleSettings = useMemo(
+    () => ({
       aiAutoSelect: false,
       title: titleConfig.title,
       position: titleConfig.position,
@@ -119,250 +64,21 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
       color: titleConfig.color,
       posX: null,
       posY: null,
-      lineHeight: c.line_height ?? 1.2,
-      marginTop: c.margin_top ?? 24,
-      maxCharsPerLine: c.max_chars_per_line ?? 0,
-      strokeWidth: c.stroke_width ?? 4,
-      strokeColor: c.stroke_color ?? "#000000",
-      shadowOffsetX: c.shadow_offset_x ?? 2,
-      shadowOffsetY: c.shadow_offset_y ?? 2,
-      shadowBlur: c.shadow_blur ?? 4,
-      shadowColor: c.shadow_color ?? "rgba(0,0,0,0.8)",
-      bgEnabled: !!c.bg_enabled,
-      bgColor: c.bg_color ?? "rgba(0,0,0,0.5)",
-      bgPadding: c.bg_padding ?? 12,
-      bgRadius: c.bg_radius ?? 8,
-      lineOverrides: Array.isArray(c.line_overrides) ? c.line_overrides : [],
-      coverTitle: (() => {
-        const ct = c.cover_title_config as
-          | null
-          | (AiAvatarTitleConfig & {
-              font_size?: number
-              font_color?: string
-              stroke?: { enabled?: boolean; width?: number; color?: string } | boolean
-              stroke_width?: number
-              stroke_color?: string
-              shadow?:
-                | {
-                    enabled?: boolean
-                    offset_x?: number
-                    offset_y?: number
-                    blur?: number
-                    color?: string
-                  }
-                | boolean
-              shadow_offset_x?: number
-              shadow_offset_y?: number
-              shadow_blur?: number
-              shadow_color?: string
-              background?: { enabled?: boolean; color?: string; padding?: number; radius?: number }
-              bg_enabled?: boolean
-              bg_color?: string
-              bg_padding?: number
-              bg_radius?: number
-            })
-        if (!ct) return null
-        const ctStroke = ct.stroke as
-          { enabled?: boolean; width?: number; color?: string } | boolean | undefined
-        const ctShadow = ct.shadow as
-          | {
-              enabled?: boolean
-              offset_x?: number
-              offset_y?: number
-              blur?: number
-              color?: string
-            }
-          | boolean
-          | undefined
-        const ctBg = ct.background as
-          { enabled?: boolean; color?: string; padding?: number; radius?: number } | undefined
-        return {
-          title: ct.title,
-          font: ct.font,
-          size: ct.font_size ?? ct.size,
-          color: ct.font_color ?? ct.color,
-          bold: ct.bold,
-          italic: ct.italic,
-          position: ct.position,
-          stroke:
-            typeof ctStroke === "object" && ctStroke ? ctStroke.enabled !== false : !!ctStroke,
-          strokeWidth:
-            (typeof ctStroke === "object" && ctStroke ? ctStroke.width : undefined) ??
-            ct.stroke_width ??
-            4,
-          strokeColor:
-            (typeof ctStroke === "object" && ctStroke ? ctStroke.color : undefined) ??
-            ct.stroke_color ??
-            "#000000",
-          shadow:
-            typeof ctShadow === "object" && ctShadow ? ctShadow.enabled !== false : !!ctShadow,
-          shadowOffsetX:
-            (typeof ctShadow === "object" && ctShadow ? ctShadow.offset_x : undefined) ??
-            ct.shadow_offset_x ??
-            2,
-          shadowOffsetY:
-            (typeof ctShadow === "object" && ctShadow ? ctShadow.offset_y : undefined) ??
-            ct.shadow_offset_y ??
-            2,
-          shadowBlur:
-            (typeof ctShadow === "object" && ctShadow ? ctShadow.blur : undefined) ??
-            ct.shadow_blur ??
-            4,
-          shadowColor:
-            (typeof ctShadow === "object" && ctShadow ? ctShadow.color : undefined) ??
-            ct.shadow_color ??
-            "rgba(0,0,0,0.8)",
-          bgEnabled: ctBg?.enabled ?? !!ct.bg_enabled,
-          bgColor: ctBg?.color ?? ct.bg_color ?? "rgba(0,0,0,0.5)",
-          bgPadding: ctBg?.padding ?? ct.bg_padding ?? 12,
-          bgRadius: ctBg?.radius ?? ct.bg_radius ?? 8,
-        }
-      })(),
-    }
-  }, [titleConfig])
+    }),
+    [titleConfig],
+  )
 
-  /** 应用预设：覆盖新细粒度字段（颜色/描边/阴影/字号/字体等） */
+  /** 应用预设：与智能剪辑一致，只覆盖 color/bold/italic/stroke/shadow，不改变字号 */
   const handleApplyPreset = (presetKey: string) => {
     const preset = TITLE_PRESETS.find((p) => p.key === presetKey)
     if (!preset) return
     setActivePreset(presetKey)
-    const st = preset.style || {}
     onUpdate({
-      font: st.font,
-      size: st.size,
-      color: st.color,
-      bold: st.bold,
-      italic: st.italic,
-      stroke: st.stroke,
-      stroke_width: st.stroke_width,
-      stroke_color: st.stroke_color,
-      shadow: st.shadow,
-      shadow_offset_x: st.shadow_offset_x,
-      shadow_offset_y: st.shadow_offset_y,
-      shadow_blur: st.shadow_blur,
-      shadow_color: st.shadow_color,
-      bg_enabled: st.bg_enabled,
-      bg_color: st.bg_color,
-      bg_padding: st.bg_padding,
-      bg_radius: st.bg_radius,
-      line_overrides: [],
-      cover_title_config: null,
-    })
-  }
-
-  /** 字段 patch 透传：TitleStylePanel 的 onUpdateStyle（camelCase → snake_case） */
-  const handleUpdateStyle = (patch: Partial<TitleSettings>) => {
-    const snake: Record<string, unknown> = {}
-    const map: Record<string, string> = {
-      lineHeight: "line_height",
-      marginTop: "margin_top",
-      maxCharsPerLine: "max_chars_per_line",
-      strokeWidth: "stroke_width",
-      strokeColor: "stroke_color",
-      shadowOffsetX: "shadow_offset_x",
-      shadowOffsetY: "shadow_offset_y",
-      shadowBlur: "shadow_blur",
-      shadowColor: "shadow_color",
-      bgEnabled: "bg_enabled",
-      bgColor: "bg_color",
-      bgPadding: "bg_padding",
-      bgRadius: "bg_radius",
-      lineOverrides: "line_overrides",
-      coverTitle: "cover_title_config",
-    }
-    Object.entries(patch).forEach(([k, v]) => {
-      if (k === "coverTitle" && v && typeof v === "object") {
-        const ct = v as {
-          title?: string
-          font?: string
-          size?: number
-          color?: string
-          bold?: boolean
-          italic?: boolean
-          position?: string
-          stroke?: boolean
-          strokeWidth?: number
-          strokeColor?: string
-          shadow?: boolean
-          shadowOffsetX?: number
-          shadowOffsetY?: number
-          shadowBlur?: number
-          shadowColor?: string
-          bgEnabled?: boolean
-          bgColor?: string
-          bgPadding?: number
-          bgRadius?: number
-          lineHeight?: number
-          marginTop?: number
-          maxCharsPerLine?: number
-        }
-        snake.cover_title_config = {
-          title: ct.title,
-          font: ct.font,
-          font_size: ct.size,
-          font_color: ct.color,
-          bold: ct.bold,
-          italic: ct.italic,
-          position: ct.position,
-          stroke: ct.stroke
-            ? { enabled: true, width: ct.strokeWidth ?? 4, color: ct.strokeColor ?? "#000" }
-            : { enabled: false },
-          shadow: ct.shadow
-            ? {
-                enabled: true,
-                offset_x: ct.shadowOffsetX ?? 2,
-                offset_y: ct.shadowOffsetY ?? 2,
-                blur: ct.shadowBlur ?? 4,
-                color: ct.shadowColor ?? "rgba(0,0,0,0.8)",
-              }
-            : { enabled: false },
-          background: ct.bgEnabled
-            ? { enabled: true, color: ct.bgColor, padding: ct.bgPadding, radius: ct.bgRadius }
-            : { enabled: false },
-          line_height: ct.lineHeight,
-          margin_top: ct.marginTop,
-          max_chars_per_line: ct.maxCharsPerLine,
-        }
-      } else if (map[k]) {
-        snake[map[k]] = v
-      } else {
-        snake[k] = v
-      }
-    })
-    onUpdate(snake)
-  }
-
-  /** 应用模板（来自内联网格 onApplyTemplate）：camelCase TitleSettings → snake_case AiAvatarTitleConfig */
-  const handleApplyTemplate = (settings: TitleSettings, tpl: TitleTemplate) => {
-    setActivePreset(null)
-    setSelectedTemplateId(tpl.id)
-    onUpdate({
-      title: titleConfig.title,
-      font: settings.font,
-      size: settings.size,
-      color: settings.color,
-      bold: settings.bold,
-      italic: settings.italic,
-      position: settings.position,
-      stroke: settings.stroke,
-      stroke_width: settings.strokeWidth,
-      stroke_color: settings.strokeColor,
-      shadow: settings.shadow,
-      shadow_offset_x: settings.shadowOffsetX,
-      shadow_offset_y: settings.shadowOffsetY,
-      shadow_blur: settings.shadowBlur,
-      shadow_color: settings.shadowColor,
-      bg_enabled: settings.bgEnabled,
-      bg_color: settings.bgColor,
-      bg_padding: settings.bgPadding,
-      bg_radius: settings.bgRadius,
-      line_height: settings.lineHeight,
-      margin_top: settings.marginTop,
-      max_chars_per_line: settings.maxCharsPerLine,
-      line_overrides: [],
-      pos_x: settings.posX ?? undefined,
-      pos_y: settings.posY ?? undefined,
-      cover_title_config: null,
+      color: preset.style.color,
+      bold: preset.style.bold,
+      italic: preset.style.italic,
+      stroke: preset.style.stroke,
+      shadow: preset.style.shadow,
     })
   }
 
@@ -409,16 +125,8 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
         onToggleStroke={() => onUpdate({ stroke: !titleConfig.stroke })}
         onToggleShadow={() => onUpdate({ shadow: !titleConfig.shadow })}
         onApplyPreset={handleApplyPreset}
-        onUpdateStyle={handleUpdateStyle}
-        showCoverToggle
-        previewWidth={280}
-        enableTemplates
-        selectedTemplateId={selectedTemplateId}
-        onApplyTemplate={handleApplyTemplate}
         activePreset={activePreset}
-        titlePresets={
-          TITLE_PRESETS as unknown as React.ComponentProps<typeof TitleStylePanel>["titlePresets"]
-        }
+        titlePresets={TITLE_PRESETS}
         POSITION_OPTIONS={POSITION_OPTIONS}
         FONT_OPTIONS={FONT_OPTIONS}
       />

apps/web/src/pages/ai-avatar/components/PanelVoiceSelector.tsx

@@ -1,17 +1,18 @@
 /**
  * AI数字人 — 配音库面板（面板3）
- * 音色来源切换（系统预设 / 我的音色）、音色选择与试听、风格/语速/语言参数
+ * 音色来源切换（系统预设 / 我的音色）、音色选择与试听、情绪/语速/语言参数
  */
 import { useEffect, useRef, useState } from "react"
 import { message } from "antd"
 import { fetchVoices } from "@/api/voices/voices"
 import { previewTts } from "@/api/tts"
-import TtsStyleSelector from "@/components/voice/TtsStyleSelector"
-import type { TtsStyle } from "@/api/tts/styles"
+import { normalizeEmotion } from "../utils/contract"
 import type { UnifiedVoiceItem } from "@/api/voices/types"
 import {
   type VoiceSource,
+  type VoiceEmotion,
   type VoiceLanguage,
+  VOICE_EMOTION_OPTIONS,
   PRESET_VOICE_LANGUAGE_OPTIONS,
   CLONE_VOICE_LANGUAGE_OPTIONS,
 } from "../types"
@@ -21,8 +22,8 @@ interface PanelVoiceSelectorProps {
   onVoiceSourceChange: (source: VoiceSource) => void
   selectedVoice: UnifiedVoiceItem | null
   onSelectVoice: (voice: UnifiedVoiceItem) => void
-  style: TtsStyle
-  onStyleChange: (s: TtsStyle) => void
+  emotion: VoiceEmotion
+  onEmotionChange: (e: VoiceEmotion) => void
   speed: number
   onSpeedChange: (s: number) => void
   language: VoiceLanguage
@@ -34,8 +35,8 @@ export function PanelVoiceSelector({
   onVoiceSourceChange,
   selectedVoice,
   onSelectVoice,
-  style,
-  onStyleChange,
+  emotion,
+  onEmotionChange,
   speed,
   onSpeedChange,
   language,
@@ -138,30 +139,31 @@ export function PanelVoiceSelector({
     /* 克隆音色：preview_url/audio_url 通常为空，需走 POST /tts/preview
      * 现合成示例文案再播放，对齐配音库 useAudioPlayer 行为 */
     if (voice.type === "clone") {
-      const cacheKey = `${voice.voice_clone_profile_id || voice.id}::${style}`
-      const cached = previewCacheRef.current.get(cacheKey)
+      const cached = previewCacheRef.current.get(voice.voice_clone_profile_id || voice.id)
       if (cached) {
         playAudioUrl(voice.id, cached)
         return
       }
       const targetId = voice.voice_clone_profile_id || voice.id
+      // DEBUG: 打印请求参数，帮助定位 /tts/preview 失败原因
       setPreviewingId(voice.id)
       try {
         const res = await previewTts({
           text: VOICE_PREVIEW_TEXT,
           voice_id: targetId,
           speed: speed, // 透传用户选择的语速（#1822）
-          style,
+          emotion: normalizeEmotion(emotion), // 情绪中文→英文枚举
         })
         if (!res.audio_url) {
           setPreviewingId(null)
           message.error("合成试听失败：未返回音频")
           return
         }
-        previewCacheRef.current.set(cacheKey, res.audio_url)
+        previewCacheRef.current.set(targetId, res.audio_url)
         playAudioUrl(voice.id, res.audio_url)
       } catch (err) {
         setPreviewingId(null)
+        // DEBUG: 打印详细错误信息
         console.error("[AI数字人-克隆试听] previewTts 失败:", {
           status: (err as { response?: { status?: number } })?.response?.status,
           data: (err as { response?: { data?: unknown } })?.response?.data,
@@ -270,6 +272,23 @@ export function PanelVoiceSelector({
       {/* 配音参数 */}
       <div className="aa-voice-params">
         <div className="aa-voice-params__row">
+          <div className="aa-voice-params__field">
+            <label className="aa-label" htmlFor="aa-voice-emotion">
+              情绪
+            </label>
+            <select
+              id="aa-voice-emotion"
+              className="aa-select"
+              value={emotion}
+              onChange={(e) => onEmotionChange(e.target.value as VoiceEmotion)}
+            >
+              {VOICE_EMOTION_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
           <div className="aa-voice-params__field">
             <label className="aa-label" htmlFor="aa-voice-language">
               语言
@@ -305,9 +324,6 @@ export function PanelVoiceSelector({
             onChange={(e) => handleSpeedChange(e.target.value)}
           />
         </div>
-        <div className="aa-voice-params__field">
-          <TtsStyleSelector value={style} onChange={onStyleChange} compact />
-        </div>
       </div>
     </div>
   )

apps/web/src/pages/ai-avatar/hooks/useAiAvatar.ts

@@ -6,6 +6,7 @@ import type { AssetItem } from "@/api/assets"
 import type { UnifiedVoiceItem } from "@/api/voices/types"
 import {
   type VoiceSource,
+  type VoiceEmotion,
   type VoiceLanguage,
   type Script,
   type LipsyncJob,
@@ -16,7 +17,6 @@ import {
   DEFAULT_TITLE_CONFIG,
   DEFAULT_COVER_CONFIG,
 } from "../types"
-import { DEFAULT_TTS_STYLE, type TtsStyle } from "@/api/tts/styles"
 
 const DEFAULT_TTS_PREVIEW: TtsPreviewResult = {
   audioUrl: null,
@@ -34,7 +34,7 @@ export function useAiAvatar() {
   /* ── 面板2：配音库 ── */
   const [voiceSource, setVoiceSource] = useState<VoiceSource>("preset")
   const [selectedVoice, setSelectedVoice] = useState<UnifiedVoiceItem | null>(null)
-  const [style, setStyle] = useState<TtsStyle>(DEFAULT_TTS_STYLE)
+  const [emotion, setEmotion] = useState<VoiceEmotion>("neutral")
   const [speed, setSpeed] = useState(1.0)
   const [language, setLanguage] = useState<VoiceLanguage>("zh")
 
@@ -113,8 +113,8 @@ export function useAiAvatar() {
     setVoiceSource,
     selectedVoice,
     setSelectedVoice,
-    style,
-    setStyle,
+    emotion,
+    setEmotion,
     speed,
     setSpeed,
     language,

apps/web/src/pages/ai-avatar/types.ts

@@ -100,7 +100,7 @@ export interface BRollSegment {
   pip_scale: number
 }
 
-/* ── 标题配置（#2001 升级：细粒度描边/阴影/背景/排版/逐行/封面独立标题） ── */
+/* ── 标题配置 ── */
 export interface AiAvatarTitleConfig {
   title: string
   position: string
@@ -115,42 +115,6 @@ export interface AiAvatarTitleConfig {
   /** 自定义位置坐标（position=custom 时生效，百分比 0-100） */
   pos_x?: number
   pos_y?: number
-
-  /* ── 排版 ── */
-  line_height: number
-  margin_top: number
-  max_chars_per_line: number
-
-  /* ── 描边参数化 ── */
-  stroke_width: number
-  stroke_color: string
-
-  /* ── 阴影参数化 ── */
-  shadow_offset_x: number
-  shadow_offset_y: number
-  shadow_blur: number
-  shadow_color: string
-
-  /* ── 背景色块 ── */
-  bg_enabled: boolean
-  bg_color: string
-  bg_padding: number
-  bg_radius: number
-
-  /* ── 逐行覆盖 ── */
-  line_overrides: Array<{
-    line_index: number
-    text?: string
-    size?: number
-    color?: string
-    bold?: boolean
-    italic?: boolean
-    stroke?: boolean
-    highlights?: Array<{ word: string; color?: string; bold?: boolean; scale?: number }>
-  }>
-
-  /* ── 封面独立标题（null=沿用主标题） ── */
-  cover_title_config: null | Partial<AiAvatarTitleConfig>
 }
 
 /* ── 封面配置 ── */
@@ -185,27 +149,12 @@ export const DEFAULT_TITLE_CONFIG: AiAvatarTitleConfig = {
   size: 48,
   bold: true,
   italic: false,
-  stroke: true,
+  stroke: false,
   shadow: false,
   color: "#ffffff",
   auto_subtitle: true,
   pos_x: undefined,
   pos_y: undefined,
-  line_height: 1.2,
-  margin_top: 24,
-  max_chars_per_line: 0,
-  stroke_width: 4,
-  stroke_color: "#000000",
-  shadow_offset_x: 2,
-  shadow_offset_y: 2,
-  shadow_blur: 4,
-  shadow_color: "rgba(0,0,0,0.8)",
-  bg_enabled: false,
-  bg_color: "rgba(0,0,0,0.5)",
-  bg_padding: 12,
-  bg_radius: 8,
-  line_overrides: [],
-  cover_title_config: null,
 }
 
 export const DEFAULT_COVER_CONFIG: AiAvatarCoverConfig = {

apps/web/src/pages/ai-avatar/utils/contract.ts

@@ -67,37 +67,6 @@ export function buildTitleConfigPayload(
   const text = (cfg.title || "").trim()
   if (!text) return {}
   const position = cfg.position || "bottom"
-  const anyCfg = cfg as AiAvatarTitleConfig & {
-    stroke_width?: number
-    stroke_color?: string
-    shadow_offset_x?: number
-    shadow_offset_y?: number
-    shadow_blur?: number
-    shadow_color?: string
-    line_height?: number
-    margin_top?: number
-    max_chars_per_line?: number
-    bg_enabled?: boolean
-    bg_color?: string
-    bg_padding?: number
-    bg_radius?: number
-    line_overrides?: unknown[]
-    cover_title_config?: Record<string, unknown> | null
-  }
-  const strokeWidth = anyCfg.stroke_width != null ? anyCfg.stroke_width : 4
-  const strokeColor = anyCfg.stroke_color || "#000000"
-  const shadowOffsetX = anyCfg.shadow_offset_x != null ? anyCfg.shadow_offset_x : 2
-  const shadowOffsetY = anyCfg.shadow_offset_y != null ? anyCfg.shadow_offset_y : 2
-  const shadowBlur = anyCfg.shadow_blur != null ? anyCfg.shadow_blur : 4
-  const shadowColor = anyCfg.shadow_color || "rgba(0,0,0,0.8)"
-  const lineHeight = anyCfg.line_height != null ? anyCfg.line_height : 1.2
-  const marginTop = anyCfg.margin_top != null ? anyCfg.margin_top : 24
-  const maxCharsPerLine = anyCfg.max_chars_per_line ?? 0
-  const bgEnabled = !!anyCfg.bg_enabled
-  const bgColor = anyCfg.bg_color || "rgba(0,0,0,0.5)"
-  const bgPadding = anyCfg.bg_padding != null ? anyCfg.bg_padding : 12
-  const bgRadius = anyCfg.bg_radius != null ? anyCfg.bg_radius : 8
-
   const payload: Record<string, unknown> = {
     text,
     enabled: true,
@@ -106,68 +75,16 @@ export function buildTitleConfigPayload(
     font_color: cfg.color || "#ffffff",
     position,
     bold: !!cfg.bold,
-    italic: !!cfg.italic,
-    stroke: cfg.stroke
-      ? { enabled: true, width: strokeWidth, color: strokeColor }
-      : { enabled: false },
+    stroke: cfg.stroke ? { enabled: true, width: 2, color: "#000000" } : { enabled: false },
     shadow: cfg.shadow
-      ? {
-          enabled: true,
-          color: shadowColor,
-          offset_x: shadowOffsetX,
-          offset_y: shadowOffsetY,
-          blur: shadowBlur,
-        }
+      ? { enabled: true, color: "#000000", offset_x: 2, offset_y: 2 }
       : { enabled: false },
-    line_height: lineHeight,
-    margin_top: marginTop,
-    max_chars_per_line: maxCharsPerLine,
-    background: bgEnabled
-      ? { enabled: true, color: bgColor, padding: bgPadding, radius: bgRadius }
-      : { enabled: false },
-    line_overrides: Array.isArray(anyCfg.line_overrides) ? anyCfg.line_overrides : [],
   }
   // 自定义坐标（custom 位置）
   if (position === "custom" && typeof cfg.pos_x === "number" && typeof cfg.pos_y === "number") {
     payload.pos_x = cfg.pos_x
     payload.pos_y = cfg.pos_y
   }
-  // 封面独立标题配置
-  if (anyCfg.cover_title_config) {
-    const ctc = anyCfg.cover_title_config
-    payload.cover_title_config = {
-      title: ctc.title,
-      font: ctc.font,
-      font_size: ctc.size,
-      font_color: ctc.color,
-      position: ctc.position,
-      bold: ctc.bold,
-      italic: ctc.italic,
-      stroke: ctc.stroke
-        ? { enabled: true, width: ctc.stroke_width ?? 4, color: ctc.stroke_color ?? "#000000" }
-        : { enabled: false },
-      shadow: ctc.shadow
-        ? {
-            enabled: true,
-            color: ctc.shadow_color ?? shadowColor,
-            offset_x: ctc.shadow_offset_x ?? 2,
-            offset_y: ctc.shadow_offset_y ?? 2,
-            blur: ctc.shadow_blur ?? 4,
-          }
-        : { enabled: false },
-      line_height: ctc.line_height ?? lineHeight,
-      margin_top: ctc.margin_top ?? marginTop,
-      max_chars_per_line: ctc.max_chars_per_line ?? maxCharsPerLine,
-      background: ctc.bg_enabled
-        ? {
-            enabled: true,
-            color: ctc.bg_color ?? bgColor,
-            padding: ctc.bg_padding ?? bgPadding,
-            radius: ctc.bg_radius ?? bgRadius,
-          }
-        : { enabled: false },
-    }
-  }
   // 前端 Canvas 渲染好的 PNG dataURL（所见即所得，后端优先 overlay 此图片图层）
   if (titleImageDataUrl) {
     payload.title_image_dataurl = titleImageDataUrl

apps/web/src/pages/ai-avatar/utils/titleCanvas.ts

@@ -9,78 +9,37 @@
  *       按 videoWidth / 720 得到 scale，所有长度类参数乘以 scale，
  *       保证 1080p / 4K 成片里标题视觉大小与预览一致。
  */
-import { getFontFamily } from "@/components/title/constants"
 import type { AiAvatarTitleConfig } from "../types"
 
 export interface RenderTitlePngOptions {
+  /** 标题配置 */
   titleConfig: AiAvatarTitleConfig
+  /** 视频宽度（像素），默认 720 */
   videoWidth?: number
+  /** 视频高度（像素），默认 1280 */
   videoHeight?: number
-  useCoverTitle?: boolean
 }
 
-function autoWrapLines(rawTitle: string, maxCharsPerLine: number): string[] {
-  const manual = rawTitle
+/**
+ * 将标题渲染为透明背景 PNG 的 dataURL（data:image/png;base64,...）
+ * Canvas 尺寸与视频一致，保证叠加时 1:1 像素对齐。
+ *
+ * 标题为空时返回 null。
+ */
+export function renderTitleToPngDataUrl(opts: RenderTitlePngOptions): string | null {
+  const { titleConfig, videoWidth = 720, videoHeight = 1280 } = opts
+  if (!titleConfig) return null
+  const rawTitle = (titleConfig.title || "").trim()
+  if (!rawTitle) return null
+
+  // 按 / 或 ／ 分割为多行
+  const lines = rawTitle
     .split(/[/／]/)
     .map((l) => l.trim())
     .filter((l) => l.length > 0)
-  if (!maxCharsPerLine || maxCharsPerLine <= 0) return manual
-  const out: string[] = []
-  manual.forEach((seg) => {
-    for (let i = 0; i < seg.length; i += maxCharsPerLine) {
-      out.push(seg.slice(i, i + maxCharsPerLine))
-    }
-  })
-  return out
-}
-
-export function renderTitleToPngDataUrl(opts: RenderTitlePngOptions): string | null {
-  const { titleConfig, videoWidth = 720, videoHeight = 1280, useCoverTitle } = opts
-  if (!titleConfig) return null
-
-  type TitleCfgExt = AiAvatarTitleConfig & {
-    stroke_width?: number
-    stroke_color?: string
-    shadow_offset_x?: number
-    shadow_offset_y?: number
-    shadow_blur?: number
-    shadow_color?: string
-    line_height?: number
-    margin_top?: number
-    max_chars_per_line?: number
-    bg_enabled?: boolean
-    bg_color?: string
-    bg_padding?: number
-    bg_radius?: number
-    line_overrides?: Array<{
-      line_index: number
-      text?: string
-      size?: number
-      color?: string
-      bold?: boolean
-      italic?: boolean
-      stroke?: boolean
-      highlights?: Array<{ word: string; color?: string; bold?: boolean; scale?: number }>
-    }>
-    cover_title_config?: Partial<AiAvatarTitleConfig> | null
-    pos_x?: number
-    pos_y?: number
-  }
-  const cfg: TitleCfgExt =
-    useCoverTitle && titleConfig.cover_title_config
-      ? ({
-          ...(titleConfig as TitleCfgExt),
-          ...(titleConfig.cover_title_config as object),
-        } as TitleCfgExt)
-      : (titleConfig as TitleCfgExt)
-
-  const rawTitle = (cfg.title || "").trim()
-  if (!rawTitle) return null
-
-  const maxCharsPerLine = cfg.max_chars_per_line ?? 0
-  const lines = autoWrapLines(rawTitle, maxCharsPerLine)
   if (lines.length === 0) return null
 
+  // 分辨率缩放系数：基准 720p，所有长度类参数乘以 scale
   const scale = videoWidth / 720
   const r = (v: number) => Math.round(v * scale)
 
@@ -90,183 +49,86 @@ export function renderTitleToPngDataUrl(opts: RenderTitlePngOptions): string | n
   const ctx = canvas.getContext("2d")
   if (!ctx) return null
 
-  const baseSize = Math.max(12, Math.round(cfg.size || 48))
+  const baseSize = Math.max(12, Math.round(titleConfig.size || 48))
   const size = r(baseSize)
-  const bold = !!cfg.bold
-  const italic = !!cfg.italic
-  const color = cfg.color || "#ffffff"
-  const stroke = !!cfg.stroke
-  const shadow = !!cfg.shadow
+  const bold = !!titleConfig.bold
+  const italic = !!titleConfig.italic
+  const color = titleConfig.color || "#ffffff"
+  const stroke = !!titleConfig.stroke
+  const shadow = !!titleConfig.shadow
 
-  const strokeWidthBase = cfg.stroke_width != null ? cfg.stroke_width : 4
-  const strokeColor = cfg.stroke_color || "#000000"
-  const shadowOffsetXBase = cfg.shadow_offset_x != null ? cfg.shadow_offset_x : 2
-  const shadowOffsetYBase = cfg.shadow_offset_y != null ? cfg.shadow_offset_y : 2
-  const shadowBlurBase = cfg.shadow_blur != null ? cfg.shadow_blur : 4
-  const shadowColor = cfg.shadow_color || "rgba(0,0,0,0.8)"
-  const lineHeightScale = cfg.line_height != null ? cfg.line_height : 1.2
-  const marginTopBase = cfg.margin_top != null ? cfg.margin_top : 24
-  const bgEnabled = !!cfg.bg_enabled
-  const bgColor = cfg.bg_color || "rgba(0,0,0,0.5)"
-  const bgPaddingBase = cfg.bg_padding != null ? cfg.bg_padding : 12
-  const bgRadiusBase = cfg.bg_radius != null ? cfg.bg_radius : 8
-
-  const fontKey = cfg.font || "思源黑体"
-  const fontFamily = getFontFamily(fontKey)
-  const setFont = (sz: number, bd: boolean, it: boolean) => {
-    const parts: string[] = []
-    if (it) parts.push("italic")
-    if (bd) parts.push("bold")
-    parts.push(`${sz}px`, fontFamily)
-    ctx.font = parts.join(" ")
-  }
-  setFont(size, bold, italic)
+  // 字体族 fallback 链：优先中文字体
+  const fontFamily =
+    '"Noto Sans CJK SC","Source Han Sans CN","PingFang SC","Microsoft YaHei",sans-serif'
+  const fontParts: string[] = []
+  if (italic) fontParts.push("italic")
+  if (bold) fontParts.push("bold")
+  fontParts.push(`${size}px`, fontFamily)
+  ctx.font = fontParts.join(" ")
   ctx.fillStyle = color
   ctx.textAlign = "center"
   ctx.textBaseline = "middle"
 
-  const lineGap = size * lineHeightScale
-  const totalTextH = lines.length * lineGap - (lineGap - size)
-  let maxLineW = 0
-  lines.forEach((l: string) => {
-    const m = ctx.measureText(l).width
-    if (m > maxLineW) maxLineW = m
-  })
+  // 阴影（shadow=true 时开启）——按 scale 缩放
+  if (shadow) {
+    ctx.shadowColor = "rgba(0,0,0,0.8)"
+    ctx.shadowBlur = r(4)
+    ctx.shadowOffsetX = 0
+    ctx.shadowOffsetY = r(2)
+  }
 
+  // 位置计算：与 PanelLipsyncPreview 的 CSS 对齐（按 scale 缩放 PAD）
   const PAD = r(16)
   let centerX = videoWidth / 2
-  const position = cfg.position || "bottom"
+  const position = titleConfig.position || "bottom"
+  const lineGap = size * 1.2
+  const totalTextH = lines.length * lineGap - (lineGap - size) // 所有行的总高度
+  // 文本块顶部 y（textBaseline=middle 时首行基线）
   let firstLineY: number
-  if (position === "custom" && typeof cfg.pos_x === "number" && typeof cfg.pos_y === "number") {
-    centerX = (Math.max(0, Math.min(100, cfg.pos_x)) / 100) * videoWidth
-    const centerY = (Math.max(0, Math.min(100, cfg.pos_y)) / 100) * videoHeight
+  if (
+    position === "custom" &&
+    typeof titleConfig.pos_x === "number" &&
+    typeof titleConfig.pos_y === "number"
+  ) {
+    centerX = (Math.max(0, Math.min(100, titleConfig.pos_x)) / 100) * videoWidth
+    const centerY = (Math.max(0, Math.min(100, titleConfig.pos_y)) / 100) * videoHeight
     firstLineY = centerY - totalTextH / 2 + size / 2
   } else if (position === "top") {
-    firstLineY = size / 2 + PAD + r(marginTopBase)
+    // 顶部：y = size/2 + PAD
+    firstLineY = size / 2 + PAD
   } else if (position === "center") {
     firstLineY = videoHeight / 2 - totalTextH / 2 + size / 2
   } else {
+    // bottom（默认）
     firstLineY = videoHeight - totalTextH - PAD + size / 2
   }
 
-  if (shadow) {
-    ctx.shadowColor = shadowColor
-    ctx.shadowBlur = r(shadowBlurBase)
-    ctx.shadowOffsetX = r(shadowOffsetXBase)
-    ctx.shadowOffsetY = r(shadowOffsetYBase)
-  } else {
-    ctx.shadowColor = "rgba(0,0,0,0)"
-    ctx.shadowBlur = 0
-    ctx.shadowOffsetX = 0
-    ctx.shadowOffsetY = 0
-  }
-
-  const bgPad = r(bgPaddingBase)
-  const bgR = r(bgRadiusBase)
-  const bgW = maxLineW + bgPad * 2
-  const bgH = totalTextH + bgPad * 2
-  const bgX = centerX - bgW / 2
-  const bgY = firstLineY - size / 2 - bgPad
-
-  if (bgEnabled) {
-    ctx.save()
-    ctx.shadowColor = "rgba(0,0,0,0)"
-    ctx.shadowBlur = 0
-    ctx.shadowOffsetX = 0
-    ctx.shadowOffsetY = 0
-    ctx.fillStyle = bgColor
-    if (
-      bgR > 0 &&
-      (
-        ctx as CanvasRenderingContext2D & {
-          roundRect?: (x: number, y: number, w: number, h: number, r: number) => void
-        }
-      ).roundRect
-    ) {
-      ;(
-        ctx as CanvasRenderingContext2D & {
-          roundRect?: (x: number, y: number, w: number, h: number, r: number) => void
-        }
-      ).roundRect(bgX, bgY, bgW, bgH, bgR)
-      ctx.fill()
-    } else {
-      ctx.fillRect(bgX, bgY, bgW, bgH)
-    }
-    ctx.restore()
-  }
-
-  const sw = stroke ? Math.max(r(1), r(strokeWidthBase)) : 0
-  const lineOverrides = cfg.line_overrides || []
-  lines.forEach((line: string, idx: number) => {
+  // 描边参数：描边 lineWidth 按 scale 缩放（基准 size * 0.06，最小 2px @720p）
+  const doStroke = stroke
+  const strokeWidth = Math.max(r(2), Math.round(size * 0.06))
+  // 逐行绘制
+  lines.forEach((line, idx) => {
     const y = firstLineY + idx * lineGap
-    const override = lineOverrides.find((lo) => lo.line_index === idx)
-    const lineSize = override?.size ? r(Math.max(12, Math.round(override.size))) : size
-    const lineColor = override?.color || color
-    const lineBold = override?.bold != null ? !!override.bold : bold
-    const lineItalic = override?.italic != null ? !!override.italic : italic
-    const lineStroke = override?.stroke != null ? !!override.stroke : stroke
-
-    setFont(lineSize, lineBold, lineItalic)
-    ctx.fillStyle = lineColor
-
-    if (shadow) {
-      ctx.shadowColor = shadowColor
-      ctx.shadowBlur = r(shadowBlurBase)
-      ctx.shadowOffsetX = r(shadowOffsetXBase)
-      ctx.shadowOffsetY = r(shadowOffsetYBase)
-    } else {
+    if (doStroke) {
+      const prevShadowColor = ctx.shadowColor
+      const prevShadowBlur = ctx.shadowBlur
+      // 描边不要带阴影（避免黑色描边发虚）
       ctx.shadowColor = "rgba(0,0,0,0)"
       ctx.shadowBlur = 0
-      ctx.shadowOffsetX = 0
-      ctx.shadowOffsetY = 0
-    }
-
-    const lineSw = override?.size
-      ? Math.max(r(1), Math.round(lineSize * (strokeWidthBase / baseSize)))
-      : sw
-
-    if (lineStroke && lineSw > 0) {
-      ctx.save()
-      ctx.shadowColor = "rgba(0,0,0,0)"
-      ctx.shadowBlur = 0
-      ctx.shadowOffsetX = 0
-      ctx.shadowOffsetY = 0
-      ctx.lineWidth = lineSw
-      ctx.strokeStyle = strokeColor
+      ctx.lineWidth = strokeWidth
+      ctx.strokeStyle = "#000000"
       ctx.lineJoin = "round"
       ctx.strokeText(line, centerX, y)
-      ctx.restore()
+      // 恢复阴影
+      if (shadow) {
+        ctx.shadowColor = "rgba(0,0,0,0.8)"
+        ctx.shadowBlur = r(4)
+      } else {
+        ctx.shadowColor = prevShadowColor
+        ctx.shadowBlur = prevShadowBlur
+      }
     }
-
     ctx.fillText(line, centerX, y)
-
-    if (override?.highlights?.length) {
-      const fullW = ctx.measureText(line).width
-      const charW = line.length > 0 ? fullW / line.length : lineSize
-      override.highlights.forEach((hl) => {
-        if (!hl.word) return
-        const pos = line.indexOf(hl.word)
-        if (pos < 0) return
-        const hlX = centerX - fullW / 2 + pos * charW + (charW * hl.word.length) / 2
-        const hlColor = hl.color || "#ffd700"
-        const hlScale = hl.scale || 1
-        const hlSize = lineSize * hlScale
-        const hlBold = hl.bold != null ? !!hl.bold : true
-        ctx.save()
-        ctx.shadowColor = "rgba(0,0,0,0)"
-        ctx.shadowBlur = 0
-        setFont(hlSize, hlBold, lineItalic)
-        ctx.fillStyle = hlColor
-        if (lineStroke && lineSw > 0) {
-          ctx.lineWidth = Math.max(r(1), Math.round(hlSize * (strokeWidthBase / baseSize)))
-          ctx.strokeStyle = strokeColor
-          ctx.lineJoin = "round"
-          ctx.strokeText(hl.word, hlX, y)
-        }
-        ctx.fillText(hl.word, hlX, y)
-        ctx.restore()
-      })
-    }
   })
 
   try {
@@ -276,6 +138,9 @@ export function renderTitleToPngDataUrl(opts: RenderTitlePngOptions): string | n
   }
 }
 
+/**
+ * 获取视频真实分辨率（HTMLVideoElement + loadedmetadata，超时 3 秒兜底 720×1280）。
+ */
 export function getVideoResolution(
   videoUrl: string,
   timeoutMs = 3000,

apps/web/src/pages/generate/GeneratePage.tsx

@@ -8,12 +8,15 @@ import React, { useMemo, useState, useEffect, useRef, useCallback } from "react"
 import { message } from "antd"
 import { useNavigate } from "react-router-dom"
 import type { VoiceClone } from "@/api/voice-clone"
+import { useQuery } from "@tanstack/react-query"
 import { useCloneProgress } from "@/hooks/useCloneProgress"
 import CloneModal from "@/components/voice/CloneModal"
 import VoiceSelectModal from "./components/VoiceSelectModal"
 import ScriptSelectModal from "./components/ScriptSelectModal"
 import TtsVoiceModal from "./components/TtsVoiceModal"
 import GenerateHeader from "./components/GenerateHeader"
+import FrontendPreviewPlayer from "./components/FrontendPreviewPlayer"
+import CanvasPreviewGrid from "./components/CanvasPreviewGrid"
 import PreviewCountModal from "./components/PreviewCountModal"
 import GenerateStepsBar from "./components/GenerateStepsBar"
 import GenerateStepContent from "./components/GenerateStepContent"
@@ -21,10 +24,13 @@ import GenerateStepActions from "./components/GenerateStepActions"
 import { useGenerateFormState } from "./hooks/useGenerateFormState"
 import { useStepNavigation } from "./hooks/useStepNavigation"
 import { useGenerateVideo } from "./hooks/useGenerateVideo"
-import { confirmGeneration } from "@/api/generation/confirm"
 
+import { usePreviewAssets } from "./hooks/usePreviewAssets"
 import { useBatchVariantPlans } from "./hooks/useBatchVariantPlans"
+import { useVariantVoicePreview } from "./hooks/useVariantVoicePreview"
 import { useTitleStyleUpdaters } from "./hooks/useStep4Title/useTitleStyleUpdaters"
+import { getAssetsByKind } from "@/api/assets"
+import { previewTts } from "@/api/tts"
 import { usePointsStore } from "@/store/pointsStore"
 import { hasEnoughPoints } from "./hooks/pointsCost"
 import { ENABLE_CREDIT_SYSTEM } from "@/config/features"
@@ -36,9 +42,6 @@ const GeneratePage: React.FC = () => {
 
   /* ── 表单状态 ── */
   const formState = useGenerateFormState()
-  /* ── 标题模板（#2003）当前选中模板 id ── */
-  const [selectedTitleTemplateId, setSelectedTitleTemplateId] = useState<string | null>(null)
-
   /* ── 积分状态 ── */
   const { balance, dailyUsage, rules, init: initPoints } = usePointsStore()
   useEffect(() => {
@@ -74,8 +77,6 @@ const GeneratePage: React.FC = () => {
     setTtsVoiceId,
     ttsVoiceSource,
     setTtsVoiceSource,
-    ttsStyle,
-    setTtsStyle,
     ttsVoiceAssetId,
     setTtsVoiceAssetId,
     dedupEnabled,
@@ -95,6 +96,8 @@ const GeneratePage: React.FC = () => {
     setPreviewTaskId,
     storedSourceEditPlanId,
     setStoredSourceEditPlanId,
+    serverClips,
+    setServerClips,
     previewCount,
     setPreviewCount,
     previewTitles,
@@ -140,9 +143,6 @@ const GeneratePage: React.FC = () => {
   /* ── 数量选择弹窗 ── */
   const [countModalOpen, setCountModalOpen] = useState(false)
 
-  /* ── Step5 保存中状态 ── */
-  const [finishing, setFinishing] = useState(false)
-
   /* ── #1970 流程重构：分支弹窗 ── */
   const [voiceModalOpen, setVoiceModalOpen] = useState(false)
   const [scriptModalOpen, setScriptModalOpen] = useState(false)
@@ -154,6 +154,62 @@ const GeneratePage: React.FC = () => {
     onTitleSettingsChange: setTitleSettings,
   })
 
+  /* ── 配音素材库（TTS 试听）── */
+  const { data: voiceMaterials = [] } = useQuery({
+    queryKey: ["assets", "voice"],
+    queryFn: () => getAssetsByKind("voice", { limit: 50 }),
+  })
+
+  const [previewVoiceAudioUrl, setPreviewVoiceAudioUrl] = useState<string | null>(null)
+  const ttsAbortRef = useRef<AbortController | null>(null)
+  const variant0Title = isBatch ? previewTitles?.[0] || "" : ""
+
+  useEffect(() => {
+    if (isBatch) return
+    const voiceAsset = voiceMaterials.find((m) => m.id === selectedVoice)
+    if (voiceAsset?.file_url) {
+      setPreviewVoiceAudioUrl(voiceAsset.file_url)
+      return
+    }
+
+    const ttsTitle = titleSettings.title
+    const voiceId = selectedClonedVoice || selectedVoice
+    if (!voiceId || !ttsTitle) {
+      setPreviewVoiceAudioUrl(null)
+      return
+    }
+
+    ttsAbortRef.current?.abort()
+    const controller = new AbortController()
+    ttsAbortRef.current = controller
+    let cancelled = false
+
+    previewTts({ text: ttsTitle, voice_id: voiceId })
+      .then((res) => {
+        if (!cancelled && res.audio_url) {
+          setPreviewVoiceAudioUrl(res.audio_url)
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          console.warn("[预览配音生成失败]", err)
+          setPreviewVoiceAudioUrl(null)
+        }
+      })
+
+    return () => {
+      cancelled = true
+      controller.abort()
+    }
+  }, [
+    selectedVoice,
+    selectedClonedVoice,
+    titleSettings.title,
+    variant0Title,
+    isBatch,
+    voiceMaterials,
+  ])
+
   /* ── 克隆声音 ── */
   const { addClone } = useCloneProgress()
 
@@ -178,11 +234,30 @@ const GeneratePage: React.FC = () => {
     [bgm],
   )
 
+  /* ── 加载素材详情 ── */
+  const previewAssetsEnabled = previewAssetIds.length > 0
+  const {
+    assets: previewAssets,
+    ready: previewAssetsReady,
+    ensureAssets,
+  } = usePreviewAssets(previewAssetIds, previewAssetsEnabled)
+
+  /* ── 预览就绪 ── */
+  // #1899: 不再依赖 currentTemplate，素材加载完即可预览
+  const previewReady = previewAssetsReady
+
   /* ── 批量变体真实片段（#1744） ── */
   const batchVoiceLibraryId =
     voiceMode === "clone" ? selectedClonedVoice || selectedVoice || "" : selectedVoice || ""
-  const { planIdsByVariant: variantPlanIds } = useBatchVariantPlans({
-    enabled: isBatch && currentStep === 3,
+  const {
+    clipsByVariant: variantClips,
+    planIdsByVariant: variantPlanIds,
+    voiceDurationsByVariant: variantVoiceDurations,
+    loading: variantClipsLoading,
+    error: variantClipsError,
+    retry: retryVariantClips,
+  } = useBatchVariantPlans({
+    enabled: isBatch && currentStep === 3 && previewAssetsReady,
     count: previewCount,
     templateId: selectedTemplate || "",
     assetIds: previewAssetIds,
@@ -192,6 +267,39 @@ const GeneratePage: React.FC = () => {
     voiceModePerVideo,
   })
 
+  /* ── 批量变体配音预览 URL ── */
+  const variantVoiceAudioUrls = useVariantVoicePreview({
+    enabled: isBatch,
+    count: previewCount,
+    perVideo: voiceModePerVideo,
+    sharedVoiceId: selectedVoice || "",
+    clonedVoiceId: selectedClonedVoice || "",
+    variantVoiceIds: voiceLibraryIds || [],
+    titles: previewTitles || [],
+  })
+
+  /* ── 变体 clips 引用素材补拉 ── */
+  const clipAssetIds = useMemo(() => {
+    if (!isBatch || !variantClips?.length) return []
+    const ids = new Set<string>()
+    variantClips.forEach((list) => list.forEach((c) => c.asset_id && ids.add(c.asset_id)))
+    return Array.from(ids)
+  }, [isBatch, variantClips])
+  useEffect(() => {
+    if (clipAssetIds.length > 0) void ensureAssets(clipAssetIds)
+  }, [clipAssetIds, ensureAssets])
+
+  /* ── 勾选变体 ── */
+  const toggleVariantSelect = useCallback(
+    (index: number) => {
+      setSelectedVariantIds((prev) => {
+        const list = prev || []
+        return list.includes(index) ? list.filter((i) => i !== index) : [...list, index].sort()
+      })
+    },
+    [setSelectedVariantIds],
+  )
+
   /* ── 视频生成核心逻辑 ── */
   const {
     generating,
@@ -221,7 +329,6 @@ const GeneratePage: React.FC = () => {
     selectedScript,
     ttsVoiceId,
     ttsVoiceSource,
-    ttsStyle,
     ttsVoiceAssetId,
     dedupEnabled,
     style,
@@ -303,15 +410,9 @@ const GeneratePage: React.FC = () => {
   )
 
   const handleTtsSynthesized = useCallback(
-    (payload: {
-      voiceAssetId: string
-      ttsVoiceId: string
-      ttsVoiceSource: "preset" | "clone"
-      ttsStyle?: string
-    }) => {
+    (payload: { voiceAssetId: string; ttsVoiceId: string; ttsVoiceSource: "preset" | "clone" }) => {
       setTtsVoiceId(payload.ttsVoiceId)
       setTtsVoiceSource(payload.ttsVoiceSource)
-      if (payload.ttsStyle) setTtsStyle(payload.ttsStyle)
       setTtsVoiceAssetId(payload.voiceAssetId)
       if (payload.ttsVoiceSource === "clone") {
         setSelectedClonedVoice(payload.ttsVoiceId)
@@ -327,7 +428,6 @@ const GeneratePage: React.FC = () => {
     [
       setTtsVoiceId,
       setTtsVoiceSource,
-      setTtsStyle,
       setTtsVoiceAssetId,
       setSelectedVoice,
       setSelectedClonedVoice,
@@ -371,6 +471,10 @@ const GeneratePage: React.FC = () => {
         return
       }
     }
+    if (!previewReady) {
+      message.warning("预览素材正在加载，请稍候")
+      return
+    }
     const ok = await handleGenerate()
     if (ok) {
       setCurrentStep(4)
@@ -381,6 +485,7 @@ const GeneratePage: React.FC = () => {
     previewTitles,
     titleSettings.aiAutoSelect,
     titleSettings.title,
+    previewReady,
     handleGenerate,
     setCurrentStep,
     balance,
@@ -408,83 +513,14 @@ const GeneratePage: React.FC = () => {
     },
   })
 
-  /* ── 最终成片（单视频） ── */
+  /* ── 最终成片 ── */
   const finalVideo = generatedVideos[0]
 
-  /* ── Step5 完成：调用 confirm 入库 + 跳转 ── */
-  const handleFinish = useCallback(async () => {
-    if (finishing) return
-    // 校验：单视频必须已生成；批量必须所有已选视频有封面或确认跳过
-    if (isBatch) {
-      if (generatedVideos.length === 0) {
-        message.warning("请等待视频生成完成")
-        return
-      }
-    } else {
-      if (!finalVideo) {
-        message.warning("请等待视频生成完成")
-        return
-      }
-    }
-    setFinishing(true)
-    const hide = message.loading("正在保存到视频库...", 0)
-    try {
-      const taskIds =
-        batchTasks && batchTasks.length > 0
-          ? batchTasks.map((t) => t.taskId).filter(Boolean)
-          : finalVideo?.generation_task_id
-            ? [finalVideo.generation_task_id]
-            : []
-
-      // 单视频/批量：为每个任务调用 confirm（传入封面）
-      if (isBatch && previewCovers.length > 0) {
-        await Promise.all(
-          taskIds.map(async (taskId, idx) => {
-            const coverUrl = previewCovers[idx] || ""
-            return confirmGeneration(taskId, {
-              cover_url: coverUrl || undefined,
-              custom_title: previewTitles[idx] || titleSettings.title || "",
-            })
-          }),
-        )
-      } else if (finalVideo?.generation_task_id) {
-        const coverUrl = coverSettings.thumbnail_url || coverSettings.upload_url || ""
-        await confirmGeneration(finalVideo.generation_task_id, {
-          cover_url: coverUrl || undefined,
-          custom_title: titleSettings.title || "",
-        })
-      }
-      hide()
-      message.success("已保存到视频库")
-      navigate("/app/products")
-    } catch (err) {
-      hide()
-      console.error("[保存失败]", err)
-      const detail =
-        (err as { response?: { data?: { detail?: string; message?: string } } })?.response?.data
-          ?.detail ||
-        (err as { response?: { data?: { detail?: string; message?: string } } })?.response?.data
-          ?.message ||
-        "保存失败，请稍后在任务历史查看"
-      message.error(detail)
-    } finally {
-      setFinishing(false)
-    }
-  }, [
-    finishing,
-    isBatch,
-    finalVideo,
-    generatedVideos,
-    batchTasks,
-    previewCovers,
-    previewTitles,
-    titleSettings.title,
-    coverSettings,
-    navigate,
-  ])
-
   /* ── 布局 class ── */
-  const layoutClassName = "xx-generate-layout full-width"
+  const layoutClassName = useMemo(() => {
+    if (currentStep === 3) return "xx-generate-layout step4-layout"
+    return "xx-generate-layout full-width"
+  }, [currentStep])
 
   /* ── 积分消耗估算（步骤3确认生成展示用） ── */
   const unitsForCost = isBatch ? Math.max(selectedVariantIds.length, 1) : 1
@@ -512,7 +548,66 @@ const GeneratePage: React.FC = () => {
       <GenerateStepsBar currentStep={currentStep} onStepClick={setCurrentStep} />
 
       <div className={layoutClassName}>
-        {/* ════ 步骤1~2 表单 / 步骤3 标题设置 / 步骤4 确认生成进度 / 步骤5 封面 ════ */}
+        {/* ════ 步骤3：左侧预览大区域 ════ */}
+        {currentStep === 3 && (
+          <div className="xx-generate-preview-col">
+            {!isBatch ? (
+              <FrontendPreviewPlayer
+                assets={previewAssets}
+                videoRatio={videoRatio as "9:16" | "16:9"}
+                ready={previewAssets.length > 0}
+                serverClips={serverClips}
+                voiceAudioUrl={previewVoiceAudioUrl || undefined}
+                titleSettings={{
+                  title: titleSettings.title,
+                  size: titleSettings.size,
+                  font: titleSettings.font,
+                  color: titleSettings.color,
+                  position: titleSettings.position as "top" | "center" | "bottom" | "custom",
+                  bold: titleSettings.bold,
+                  italic: titleSettings.italic,
+                  stroke: titleSettings.stroke,
+                  shadow: titleSettings.shadow,
+                  posX: titleSettings.posX,
+                  posY: titleSettings.posY,
+                }}
+                onTitlePositionChange={styleUpdaters.updateTitlePosition}
+              />
+            ) : (
+              <div className="xx-form-section">
+                <div className="xx-preview-header">
+                  <h3>🎬 {previewCount} 个视频预览</h3>
+                  <span
+                    style={{
+                      fontSize: 13,
+                      color: "var(--text-secondary, #666)",
+                    }}
+                  >
+                    实时预览，勾选要生成的视频
+                  </span>
+                </div>
+                <CanvasPreviewGrid
+                  count={previewCount}
+                  assets={previewAssets}
+                  videoRatio={videoRatio as "9:16" | "16:9"}
+                  titles={previewTitles}
+                  titleSettings={titleSettings}
+                  voiceAudioUrls={variantVoiceAudioUrls}
+                  voiceDurations={variantVoiceDurations}
+                  variantClips={variantClips}
+                  clipsLoading={variantClipsLoading}
+                  clipsError={variantClipsError}
+                  onRetryClips={retryVariantClips}
+                  selectedIds={selectedVariantIds}
+                  onToggleSelect={toggleVariantSelect}
+                  selectable={!generating}
+                />
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ════ 右侧：步骤1~2 表单 / 步骤3 标题边栏 / 步骤4 确认生成进度 / 步骤5 封面 ════ */}
         <div className="xx-generate-form">
           <GenerateStepContent
             currentStep={currentStep}
@@ -535,15 +630,8 @@ const GeneratePage: React.FC = () => {
             onToggleStroke={styleUpdaters.toggleStroke}
             onToggleShadow={styleUpdaters.toggleShadow}
             onApplyPreset={styleUpdaters.applyPreset}
-            onUpdateStyle={styleUpdaters.updateStyle}
             activePreset={styleUpdaters.activePreset}
             titlePresets={styleUpdaters.titlePresets}
-            enableTemplates
-            selectedTemplateId={selectedTitleTemplateId}
-            onApplyTemplate={(settings, tpl) => {
-              styleUpdaters.applyTemplate(settings)
-              setSelectedTitleTemplateId(tpl.id)
-            }}
             bgm={bgm}
             bgmConfig={bgmConfig}
             coverSettings={coverSettings}
@@ -556,7 +644,11 @@ const GeneratePage: React.FC = () => {
             onPreviewCountChange={setPreviewCount}
             videoRatio={videoRatio as "9:16" | "16:9"}
             onVideoRatioChange={(r) => setVideoRatio(r)}
+            selectedScript={selectedScript}
+            ttsVoiceId={ttsVoiceId}
+            ttsVoiceSource={ttsVoiceSource}
             onSelectedVoiceChange={setSelectedVoice}
+            onServerClipsChange={setServerClips}
             generating={generating}
             generated={generated}
             generateError={generateError}
@@ -638,6 +730,12 @@ const GeneratePage: React.FC = () => {
                   <button className="xx-btn xx-btn-ghost xx-btn-sm" onClick={handleShare}>
                     🔗 分享
                   </button>
+                  <button
+                    className="xx-btn xx-btn-ghost xx-btn-sm"
+                    onClick={() => navigate("/app/products")}
+                  >
+                    📁 前往成片库
+                  </button>
                 </div>
               </div>
             </div>
@@ -657,8 +755,6 @@ const GeneratePage: React.FC = () => {
             pointsInsufficient={insufficientPoints}
             insufficientReason={pointsEstimate.reason}
             onRecharge={() => navigate("/app/points/recharge")}
-            onFinish={handleFinish}
-            finishing={finishing}
           />
         </div>
       </div>
@@ -695,8 +791,6 @@ const GeneratePage: React.FC = () => {
         open={ttsModalOpen}
         scriptText={selectedScript?.content ?? ""}
         scriptTitle={selectedScript?.title ?? ""}
-        style={ttsStyle}
-        onStyleChange={setTtsStyle}
         onCancel={() => setTtsModalOpen(false)}
         onSynthesized={handleTtsSynthesized}
       />

apps/web/src/pages/generate/components/CanvasPreviewGrid.tsx

@@ -0,0 +1,156 @@
+/**
+ * 批量前端 Canvas 实时预览网格（Issue #1677 起，#1750 对齐基线：只播放后端真实计划）
+ *
+ * N 个 FrontendPreviewPlayer 网格排列：
+ * - 纯前端 Canvas + video 元素实时播放素材片段，不调任何后端渲染接口；
+ * - #1744/#1750：片段只来自后端变体计划接口（POST /generation/variant-plans）的真实
+ *   clips，与正式批量生成同源自 reselect_plan_for_variant，预览即成片；
+ *   接口失败/数据不完整 → 整网格显示错误态+重试（严禁本地假数据冒充预览）；
+ *   加载中 → 9:16 占位防塌陷；
+ * - 各自叠加独立标题浮层（variantTitle），标题样式全局共用；
+ * - 勾选框决定提交时生成哪些变体；
+ * - 每个变体挂载各自配音 URL（独立模式 #1750）或共用同一条；播放互斥：
+ *   点击某卡片播放时其他卡片自动暂停，同一时刻只有一路声音（#1741）。
+ */
+import React, { useState } from "react"
+import type { AssetItem } from "@/api/assets"
+import type { EditPlanClip } from "@/api/template-editor"
+import { LoadingOutlined, ReloadOutlined } from "@ant-design/icons"
+import { Button } from "antd"
+import type { TitleSettings } from "../types"
+import FrontendPreviewPlayer from "./FrontendPreviewPlayer"
+
+interface CanvasPreviewGridProps {
+  count: number
+  assets: AssetItem[]
+  videoRatio: string
+  titles: string[]
+  titleSettings: TitleSettings
+  /**
+   * 各变体配音预览音频 URL（#1750：独立配音模式每变体一条；共用模式全为同一条；
+   * 元素为 null 表示该变体暂无音频（AI 音色 TTS 合成中））
+   */
+  voiceAudioUrls?: (string | null)[]
+  /**
+   * 各变体配音时长（秒）：后端返回 voice_duration 优先；未返回则为 undefined，
+   * 由 FrontendPreviewPlayer 在 audio loadedmetadata 时自测兜底。
+   * 长度=count，undefined 项表示该变体未提供后端时长。
+   */
+  voiceDurations?: (number | undefined)[]
+  /**
+   * 各变体的后端真实片段（#1744/#1750）：长度=count。
+   * 仅 clipsLoading=false 且 clipsError=false 时才会传给播放器。
+   */
+  variantClips?: EditPlanClip[][]
+  /** 是否正在向后端申请变体计划 */
+  clipsLoading?: boolean
+  /** 申请变体计划失败（端点未上线/网络错误/数据不完整）：显示错误态，严禁假数据 */
+  clipsError?: boolean
+  /** 用户点击错误态「重试」 */
+  onRetryClips?: () => void
+  /** 勾选的变体序号 */
+  selectedIds: number[]
+  onToggleSelect: (index: number) => void
+  /** 生成中禁止勾选 */
+  selectable?: boolean
+}
+
+const CanvasPreviewGrid: React.FC<CanvasPreviewGridProps> = ({
+  count,
+  assets,
+  videoRatio,
+  titles,
+  titleSettings,
+  voiceAudioUrls,
+  voiceDurations,
+  variantClips,
+  clipsLoading = false,
+  clipsError = false,
+  onRetryClips,
+  selectedIds,
+  onToggleSelect,
+  selectable = true,
+}) => {
+  // ── 播放互斥（#1741）：同一时刻只有一个卡片持有播放权（token = 变体序号，0 起，#1750） ──
+  const [activePlayToken, setActivePlayToken] = useState<number | null>(null)
+
+  // count 上限已在源头 PreviewCountModal 的数量选择（1~MAX_PREVIEW_COUNT=10）clamp，
+  // 这里完整渲染所有变体，保证每个变体都有勾选/预览入口，UI 与数据不脱节
+  return (
+    <div className="xx-canvas-grid">
+      {Array.from({ length: count }, (_, i) => {
+        const checked = selectedIds.includes(i)
+        return (
+          <div
+            key={i}
+            className={`xx-canvas-grid-card${checked ? " selected" : ""}`}
+            data-variant={i}
+          >
+            <div className="xx-canvas-grid-card-bar">
+              <label className="xx-canvas-grid-check">
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  disabled={!selectable}
+                  onChange={() => onToggleSelect(i)}
+                />
+                <span>视频 {i + 1}</span>
+              </label>
+            </div>
+            {clipsError ? (
+              // ── 错误态（#1750）：9:16 占位防塌陷，不渲染任何播放器（严禁假数据） ──
+              <div className="xx-variant-clips-status" role="alert">
+                <span className="xx-variant-clips-error-text">预览加载失败，请重试</span>
+                {i === 0 && onRetryClips ? (
+                  <Button
+                    size="small"
+                    icon={<ReloadOutlined />}
+                    onClick={onRetryClips}
+                    style={{ marginTop: 12 }}
+                  >
+                    重试
+                  </Button>
+                ) : null}
+              </div>
+            ) : clipsLoading || !variantClips?.[i]?.length ? (
+              // ── 加载态：9:16 占位防塌陷 ──
+              <div className="xx-variant-clips-status" aria-label={`变体${i + 1}片段加载中`}>
+                <LoadingOutlined />
+                <span style={{ marginTop: 8 }}>独立选片中…</span>
+              </div>
+            ) : (
+              <FrontendPreviewPlayer
+                assets={assets}
+                videoRatio={videoRatio}
+                ready={assets.length > 0}
+                playToken={i}
+                serverClips={variantClips[i]}
+                variantTitle={titles[i] || ""}
+                voiceAudioUrl={voiceAudioUrls?.[i] || undefined}
+                voiceDurationHint={voiceDurations?.[i]}
+                activePlayToken={activePlayToken}
+                onPlayTokenChange={setActivePlayToken}
+                compact
+                titleSettings={{
+                  title: titles[i] || "",
+                  size: titleSettings.size,
+                  font: titleSettings.font,
+                  color: titleSettings.color,
+                  position: titleSettings.position as "top" | "center" | "bottom" | "custom",
+                  bold: titleSettings.bold,
+                  italic: titleSettings.italic,
+                  stroke: titleSettings.stroke,
+                  shadow: titleSettings.shadow,
+                  posX: titleSettings.posX,
+                  posY: titleSettings.posY,
+                }}
+              />
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default CanvasPreviewGrid

apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx

@@ -0,0 +1,602 @@
+/**
+ * 前端预览播放器 — 原生 Video 元素方案（浏览器硬件解码，独立线程，不阻塞 UI）
+ *
+ * 架构：
+ * - 默认走原生 video 元素多片段切换播放（useSegmentScheduler 调度），
+ *   叠加标题 CSS 浮层、配音音轨（usePreviewAudio）、尾段冻结看门狗、批量播放互斥 token。
+ *   UI 拆分为 PreviewControls（控制条/按钮） + PreviewProgressBar（进度条）两个子组件。
+ * - WebCodecs 路径已废弃（原 useWebCodecs 常量恒为 false，相关死代码已移除），
+ *   保留 useCanvasPlayer hook 文件供未来兜底（不影响当前打包体积）。
+ *
+ * 对外 API 完全不变：assets / videoRatio / ready / voiceAudioUrl / serverClips 等。
+ */
+import React, { useMemo, useCallback, useState, useRef, useEffect } from "react"
+import { PlayCircleOutlined, SoundOutlined } from "@ant-design/icons"
+import type { AssetItem } from "@/api/assets"
+import type { EditPlanClip } from "@/api/template-editor"
+import { useSegmentScheduler, type PlaybackSegment } from "../hooks/useSegmentScheduler"
+import { usePreviewAudio } from "../hooks/usePreviewAudio"
+import { PreviewControls } from "./PreviewControls"
+import { getFontFamily } from "../constants"
+
+interface FrontendPreviewPlayerProps {
+  assets: AssetItem[]
+  videoRatio: string
+  ready: boolean
+  /** 服务端变体计划真实片段（#1750：必填，无 fallback；批量网格传入各变体自己的 clips） */
+  serverClips?: EditPlanClip[]
+  voiceAudioUrl?: string
+  titleSettings?: {
+    title: string
+    size: number
+    font: string
+    color: string
+    position: "top" | "center" | "bottom" | "custom"
+    bold?: boolean
+    italic?: boolean
+    stroke?: boolean
+    shadow?: boolean
+    posX?: number | null
+    posY?: number | null
+  }
+  onTitlePositionChange?: (posX: number, posY: number) => void
+  /**
+   * 播放互斥 token（#1750）：批量网格中为变体序号（0 起），单视频不传。
+   * 持有播放权的实例播放，其余自动暂停。
+   */
+  playToken?: number
+  /** 变体标题文字（批量时每个预览独立标题，叠加在画面上）；不传用 titleSettings.title */
+  variantTitle?: string
+  /** 紧凑模式（批量网格中使用，缩小内边距/标题尺寸） */
+  compact?: boolean
+  /**
+   * 批量网格播放互斥（#1741/#1750）：当前持有播放权的实例 token（变体序号）。
+   * 持有权变化且不等于自身时，本实例自动暂停（视频+配音）。单视频模式不传。
+   */
+  activePlayToken?: number | null
+  /** 播放权变化回调：本实例请求播放时传自身 playToken，暂停时传 null */
+  onPlayTokenChange?: (token: number | null) => void
+  /**
+   * 后端返回的配音时长（秒）P0 对齐：优先以该值作为音画时长锚点；
+   * 未提供则在 audio loadedmetadata 后自测兜底。
+   */
+  voiceDurationHint?: number
+}
+
+/**
+ * 将后端变体计划 clips 映射为播放片段（#1750：唯一数据来源，无本地模拟 fallback）
+ *
+ * 预览不渲染：浏览器按后端真实计划即时播放素材原片，预览即成片。
+ * 模板片段数固定、成片时长=配音时长（后端等比分配），前端不再有任何时长假设。
+ */
+function buildPlaybackSegments(
+  assets: AssetItem[],
+  serverClips?: EditPlanClip[],
+  /** #1754 前端兜底：配音时长≠clips 总时长时，按比例缩放每段播放时长并调速 */
+  speedFactor = 1,
+): PlaybackSegment[] {
+  if (!assets.length || !serverClips || serverClips.length === 0) return []
+
+  const assetMap = new Map(assets.map((a) => [a.id, a]))
+  const segments: PlaybackSegment[] = []
+  // speedFactor > 1 表示 clips 偏短需加速；< 1 表示 clips 偏长需减速
+  const invSpeed = speedFactor > 0 && Math.abs(speedFactor - 1) > 0.01 ? 1 / speedFactor : 1
+  for (const clip of serverClips) {
+    const asset = assetMap.get(clip.asset_id)
+    if (!asset) continue
+    const assetDuration = asset.duration || asset.metadata?.duration || 0
+    const startTime = clip.start_time || 0
+    // 片段时长以后端计划为准（配音时长等比分配）；素材时长仅用于兜底钳制边界
+    const rawClipDuration = clip.duration || 0
+    // #1754：按 speedFactor 缩放片段时长，使总时长匹配配音
+    const clipDuration = invSpeed !== 1 ? rawClipDuration * invSpeed : rawClipDuration
+    const endTime =
+      assetDuration > 0
+        ? Math.min(startTime + clipDuration, assetDuration)
+        : startTime + clipDuration
+    const videoUrl = asset.file_url || asset.storage_key
+    segments.push({
+      assetId: asset.id,
+      videoUrl,
+      startTime,
+      endTime,
+      order: clip.order,
+      playbackRate: invSpeed !== 1 ? speedFactor : undefined,
+    })
+  }
+  return segments.sort((a, b) => a.order - b.order)
+}
+
+const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
+  assets,
+  videoRatio,
+  ready,
+  serverClips,
+  voiceAudioUrl,
+  voiceDurationHint,
+  titleSettings,
+  onTitlePositionChange,
+  playToken,
+  variantTitle,
+  compact = false,
+  activePlayToken = null,
+  onPlayTokenChange,
+}) => {
+  // #1754→P0：配音时长作为音画时长锚点。
+  // 优先使用后端返回的 voiceDurationHint；音频 loadedmetadata 后再以自测值覆盖（更精确）。
+  const [voiceDuration, setVoiceDuration] = useState<number>(() =>
+    voiceDurationHint && voiceDurationHint > 0 ? voiceDurationHint : 0,
+  )
+
+  // #1756：clips 原始总时长 + 转场时长（后端等比分配配音时包含转场占位）
+  const rawClipsDuration = useMemo(() => {
+    if (!serverClips?.length) return 0
+    return serverClips.reduce((sum, c) => sum + (c.duration || 0) + (c.transition_duration || 0), 0)
+  }, [serverClips])
+
+  // #1754→#1756：配音时长可用且与 clips+转场 总时长偏差 > 5% 时，按比例调速
+  const speedFactor = useMemo(() => {
+    if (!voiceDuration || voiceDuration <= 0 || rawClipsDuration <= 0) return 1
+    const ratio = rawClipsDuration / voiceDuration
+    return Math.abs(ratio - 1) > 0.05 ? ratio : 1
+  }, [voiceDuration, rawClipsDuration])
+
+  const segments = useMemo(
+    () => buildPlaybackSegments(assets, serverClips, speedFactor),
+    [assets, serverClips, speedFactor],
+  )
+  // 批量变体：标题文字取 variantTitle，样式仍由全局 titleSettings 控制
+  const effectiveTitle = variantTitle ?? titleSettings?.title
+
+  // ── ASS 坐标系参数（与后端 ass_subtitle_builder.py 一致） ──
+  const TITLE_MARGIN_TOP = 180
+  const TITLE_MARGIN_BOTTOM = 100
+  const TITLE_MARGIN_SIDE = 40
+  const playRes = (() => {
+    switch (videoRatio) {
+      case "16:9":
+        return { width: 1920, height: 1080 }
+      case "1:1":
+        return { width: 1080, height: 1080 }
+      case "9:16":
+      default:
+        return { width: 1080, height: 1920 }
+    }
+  })()
+  const customTitleXPct =
+    titleSettings?.posX != null && playRes.width > 0
+      ? (titleSettings.posX / playRes.width) * 100
+      : null
+  const customTitleYPct =
+    titleSettings?.posY != null && playRes.height > 0
+      ? (titleSettings.posY / playRes.height) * 100
+      : null
+
+  // ── 标题拖拽（用 ref 避免每帧触发 React 重渲染）──
+  const draggingTitleRef = useRef(false)
+  const titleDragRef = useRef<HTMLDivElement>(null)
+  const playerContainerRef = useRef<HTMLDivElement>(null)
+  const handleTitlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!onTitlePositionChange || !playerContainerRef.current) return
+      e.preventDefault()
+      e.stopPropagation()
+      ;(e.target as Element).setPointerCapture(e.pointerId)
+      draggingTitleRef.current = true
+      ;(e.currentTarget as HTMLDivElement).style.cursor = "grabbing"
+    },
+    [onTitlePositionChange],
+  )
+  const handleTitlePointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
+    if (!draggingTitleRef.current || !playerContainerRef.current) return
+    e.preventDefault()
+    e.stopPropagation()
+    if (titleDragRef.current) {
+      const rect = playerContainerRef.current.getBoundingClientRect()
+      const relX = Math.max(0, Math.min(rect.width, e.clientX - rect.left))
+      const relY = Math.max(0, Math.min(rect.height, e.clientY - rect.top))
+      const xpct = (relX / rect.width) * 100
+      const ypct = (relY / rect.height) * 100
+      titleDragRef.current.style.left = `${xpct}%`
+      titleDragRef.current.style.top = `${ypct}%`
+    }
+  }, [])
+  const handleTitlePointerUp = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!draggingTitleRef.current) return
+      draggingTitleRef.current = false
+      if (onTitlePositionChange && playerContainerRef.current) {
+        const rect = playerContainerRef.current.getBoundingClientRect()
+        const relX = Math.max(0, Math.min(rect.width, e.clientX - rect.left))
+        const relY = Math.max(0, Math.min(rect.height, e.clientY - rect.top))
+        const posX = Math.round((relX / rect.width) * playRes.width)
+        const posY = Math.round((relY / rect.height) * playRes.height)
+        onTitlePositionChange(posX, posY)
+      }
+      ;(e.currentTarget as HTMLDivElement).style.cursor = "grab"
+      try {
+        if ((e.currentTarget as Element).hasPointerCapture(e.pointerId)) {
+          ;(e.currentTarget as Element).releasePointerCapture(e.pointerId)
+        }
+      } catch {
+        /* ignore */
+      }
+    },
+    [onTitlePositionChange, playRes.width, playRes.height],
+  )
+
+  const [containerHeight, setContainerHeight] = useState(0)
+  useEffect(() => {
+    const el = playerContainerRef.current
+    if (!el) return
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const h = entry.contentRect.height
+        if (h > 0) setContainerHeight(h)
+      }
+    })
+    ro.observe(el)
+    const rect = el.getBoundingClientRect()
+    if (rect.height > 0) setContainerHeight(rect.height)
+    return () => ro.disconnect()
+  }, [])
+
+  // 标题字号按容器高度与 PlayResY 的比例缩放
+  const titleFontSizePx =
+    containerHeight > 0
+      ? ((titleSettings?.size ?? 36) / playRes.height) * containerHeight
+      : (titleSettings?.size ?? 36)
+  const titleSidePct = (TITLE_MARGIN_SIDE / playRes.width) * 100
+  const titleTopPct = (TITLE_MARGIN_TOP / playRes.height) * 100
+  const titleBottomPct = (TITLE_MARGIN_BOTTOM / playRes.height) * 100
+  const titleScale = containerHeight > 0 ? containerHeight / playRes.height : 1
+  const titleStrokeWidth = Math.max(1, 2 * titleScale)
+  const titleShadowBlur = 4 * titleScale
+  const titleShadowOffset = 2 * titleScale
+
+  // ── Video 播放器（默认路径，浏览器原生硬件解码） ──
+  const {
+    isPlaying,
+    currentTime,
+    totalDuration,
+    currentSegmentIndex,
+    canPlay,
+    togglePlayPause,
+    seekTo,
+    pause,
+    videoRefs,
+  } = useSegmentScheduler(segments)
+
+  // P0 fix：以配音时长为音画同步锚点。
+  // 有配音时总时长 = 配音时长（短则末帧冻结，长则硬停）；无配音时沿用视频总时长（素材原声兜底）。
+  const effectiveTotalDuration =
+    !!voiceAudioUrl && voiceDuration > 0 ? voiceDuration : totalDuration
+
+  // 本卡片静音开关（#1741）：默认有声，用户可点喇叭单独静音某张卡片
+  const [muted, setMuted] = useState(false)
+  // 有配音时 video 素材保持静音（避免原声与配音混音）；无配音时取消静音，素材原声兜底
+  const hasVoice = !!voiceAudioUrl
+
+  // 音频 ended：兜底触发暂停与释放播放权
+  const handleAudioEnded = useCallback(() => {
+    if (!isPlaying) return
+    pause()
+    if (playToken != null) onPlayTokenChange?.(null)
+  }, [isPlaying, pause, playToken, onPlayTokenChange])
+
+  const {
+    seekTo: audioSeekTo,
+    ensurePlayingAt: audioEnsurePlayingAt,
+    pause: audioPause,
+  } = usePreviewAudio({
+    voiceAudioUrl,
+    voiceDurationHint,
+    muted,
+    isPlaying,
+    currentTime,
+    onVoiceDurationChange: setVoiceDuration,
+    onEnded: handleAudioEnded,
+  })
+
+  // 片段切换时同步音频时间（video fallback）
+  useEffect(() => {
+    if (!isPlaying) return
+    audioSeekTo(currentTime)
+    // 注意：不要把 currentTime 放进依赖数组，否则每200ms会重置音频位置导致卡顿
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentSegmentIndex, isPlaying])
+
+  // P0 fix：视频比配音短时的「末帧冻结+音频续播」模式。
+  // 视频调度器播完最后一段自动 pause，此时若配音仍在播，用 rAF 虚拟时钟推进 currentTime 直到配音结束。
+  const [tailCurrentTime, setTailCurrentTime] = useState<number | null>(null)
+  const tailStartRef = useRef<number>(0)
+  const tailBaseRef = useRef<number>(0)
+  const tailAudioRef = useRef({ ensurePlayingAt: audioEnsurePlayingAt, pause: audioPause })
+  tailAudioRef.current = { ensurePlayingAt: audioEnsurePlayingAt, pause: audioPause }
+
+  useEffect(() => {
+    const needTail =
+      !!voiceAudioUrl &&
+      voiceDuration > 0 &&
+      !isPlaying &&
+      typeof currentTime === "number" &&
+      currentTime >= totalDuration - 0.1 &&
+      currentTime < voiceDuration - 0.1
+    if (needTail && tailCurrentTime === null) {
+      tailBaseRef.current = currentTime
+      tailStartRef.current = performance.now()
+      setTailCurrentTime(currentTime)
+      tailAudioRef.current.ensurePlayingAt(currentTime)
+      return
+    }
+    if (!needTail && tailCurrentTime !== null) {
+      setTailCurrentTime(null)
+    }
+  }, [isPlaying, currentTime, totalDuration, voiceDuration, voiceAudioUrl, tailCurrentTime])
+
+  useEffect(() => {
+    if (tailCurrentTime === null) return
+    let raf = 0
+    const tick = () => {
+      const elapsed = (performance.now() - tailStartRef.current) / 1000
+      const t = Math.min(tailBaseRef.current + elapsed, voiceDuration || tailBaseRef.current)
+      setTailCurrentTime(t)
+      tailAudioRef.current.ensurePlayingAt(t)
+      if (t >= (voiceDuration || 0) - 0.05) {
+        tailAudioRef.current.pause()
+        if (playToken != null) onPlayTokenChange?.(null)
+        setTailCurrentTime(null)
+        return
+      }
+      raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [tailCurrentTime, voiceDuration, playToken, onPlayTokenChange])
+
+  // 呈现给 UI/进度条的「当前时间」：尾段用虚拟时间，否则用视频时间
+  const displayCurrentTime = tailCurrentTime !== null ? tailCurrentTime : currentTime
+
+  const handleSeekTo = useCallback(
+    (time: number) => {
+      setTailCurrentTime(null)
+      seekTo(time)
+      audioSeekTo(time)
+    },
+    [seekTo, audioSeekTo],
+  )
+
+  // ── 批量网格播放互斥（#1741）：播放权属于其他实例时，本实例自动暂停 ──
+  useEffect(() => {
+    if (activePlayToken == null || playToken == null || activePlayToken === playToken) return
+    if (isPlaying) {
+      pause()
+    }
+    // isPlaying 不放依赖：只在 token 变化时执行一次暂停
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activePlayToken, playToken])
+
+  const handleTogglePlay = useCallback(() => {
+    if (playToken != null) onPlayTokenChange?.(isPlaying ? null : playToken)
+    togglePlayPause()
+  }, [togglePlayPause, isPlaying, playToken, onPlayTokenChange])
+
+  // P0 fix：音画同步看门狗——有配音时播放时间达到配音时长立即暂停视频+音频（末帧冻结）
+  useEffect(() => {
+    if (!isPlaying) return
+    if (!voiceAudioUrl || voiceDuration <= 0) return
+    if (displayCurrentTime < voiceDuration - 0.08) return
+    pause()
+    audioPause()
+    if (playToken != null) onPlayTokenChange?.(null)
+  }, [
+    isPlaying,
+    displayCurrentTime,
+    voiceAudioUrl,
+    voiceDuration,
+    pause,
+    audioPause,
+    playToken,
+    onPlayTokenChange,
+  ])
+
+  // ── 未就绪 ──
+  if (!ready || !assets.length) {
+    return (
+      <div
+        style={{
+          position: "relative",
+          width: "100%",
+          maxWidth: 280,
+          aspectRatio: "9 / 16",
+          background: "#0a0a0a",
+          borderRadius: 24,
+          overflow: "hidden",
+          boxShadow:
+            "0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <SoundOutlined style={{ fontSize: 40, color: "rgba(255,255,255,0.3)", marginBottom: 12 }} />
+        <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, margin: "0 0 4px" }}>
+          准备预览素材...
+        </p>
+        <p style={{ color: "rgba(255,255,255,0.35)", fontSize: 12, margin: 0 }}>
+          加载素材后即可预览播放
+        </p>
+      </div>
+    )
+  }
+
+  // ── 无播放片段 ──
+  if (!canPlay) {
+    return (
+      <div
+        style={{
+          position: "relative",
+          width: "100%",
+          maxWidth: 280,
+          aspectRatio: "9 / 16",
+          background: "#0a0a0a",
+          borderRadius: 24,
+          overflow: "hidden",
+          boxShadow:
+            "0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 24,
+        }}
+      >
+        <PlayCircleOutlined
+          style={{ fontSize: 40, color: "rgba(255,255,255,0.3)", marginBottom: 12 }}
+        />
+        <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, margin: "0 0 4px" }}>
+          暂无可播放素材
+        </p>
+        <p style={{ color: "rgba(255,255,255,0.35)", fontSize: 12, margin: 0 }}>
+          请先在左侧选择素材
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={playerContainerRef}
+      style={{
+        position: "relative",
+        width: "100%",
+        maxWidth: compact ? "100%" : 280,
+        margin: compact ? 0 : "0 auto",
+        aspectRatio: "9 / 16",
+        background: compact ? "transparent" : "#0a0a0a",
+        borderRadius: compact ? 10 : 24,
+        overflow: "hidden",
+        boxShadow: compact
+          ? "inset 0 0 0 1px rgba(255,255,255,0.06)"
+          : "0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
+      }}
+    >
+      {/* ── Video 渲染层（默认路径，浏览器原生硬件解码） ── */}
+      {segments.map((seg, i) => (
+        <video
+          key={seg.assetId}
+          ref={(el) => {
+            videoRefs.current[i] = el
+          }}
+          preload="auto"
+          src={seg.videoUrl}
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            background: "#000",
+            zIndex: 1,
+            opacity: i === currentSegmentIndex ? 1 : 0,
+            pointerEvents: i === currentSegmentIndex ? "auto" : "none",
+          }}
+          muted={hasVoice || muted}
+          playsInline
+        />
+      ))}
+
+      {/* 标题CSS叠加层 — 与后端 ASS 烧录坐标系 1:1 对齐 */}
+      {titleSettings?.title && (
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            zIndex: 5,
+            pointerEvents: "none",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              width: `${100 - 2 * titleSidePct}%`,
+              maxWidth: `${100 - 2 * titleSidePct}%`,
+              ...(customTitleXPct != null && customTitleYPct != null
+                ? {
+                    left: `${customTitleXPct}%`,
+                    top: `${customTitleYPct}%`,
+                    transform: "translate(-50%, -50%)",
+                    textAlign: "center" as const,
+                  }
+                : {
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    textAlign: "center" as const,
+                    ...(titleSettings.position === "top"
+                      ? { top: `${titleTopPct}%` }
+                      : titleSettings.position === "center"
+                        ? { top: "50%", transform: "translate(-50%, -50%)" }
+                        : { bottom: `${titleBottomPct}%` }),
+                  }),
+              pointerEvents: onTitlePositionChange && playToken == null ? "auto" : "none",
+              cursor: onTitlePositionChange && playToken == null ? "grab" : "default",
+              touchAction: "none",
+              userSelect: "none",
+              WebkitUserSelect: "none",
+              padding: "8px 12px",
+              boxShadow: "inset 0 0 0 16px transparent",
+            }}
+            ref={titleDragRef}
+            onPointerDown={handleTitlePointerDown}
+            onPointerMove={handleTitlePointerMove}
+            onPointerUp={handleTitlePointerUp}
+            onPointerCancel={handleTitlePointerUp}
+          >
+            <span
+              style={{
+                fontSize: `${titleFontSizePx}px`,
+                fontFamily: getFontFamily(titleSettings.font || "思源黑体"),
+                color: titleSettings.color || "#ffffff",
+                fontWeight: titleSettings.bold ? 700 : 400,
+                fontStyle: titleSettings.italic ? "italic" : "normal",
+                lineHeight: 1.05,
+                wordBreak: "break-word",
+                WebkitTextStroke: titleSettings.stroke
+                  ? `${titleStrokeWidth}px #000000`
+                  : undefined,
+                textShadow: titleSettings.shadow
+                  ? `${titleShadowOffset}px ${titleShadowOffset}px ${titleShadowBlur}px rgba(0,0,0,0.8)`
+                  : undefined,
+              }}
+            >
+              {(effectiveTitle || "").split(/[/／]/).map((part, i) => (
+                <span key={i}>
+                  {i > 0 && <br />}
+                  {part}
+                </span>
+              ))}
+            </span>
+          </div>
+        </div>
+      )}
+
+      <PreviewControls
+        isPlaying={isPlaying}
+        onTogglePlay={handleTogglePlay}
+        muted={muted}
+        onToggleMute={() => setMuted((m) => !m)}
+        hasSegments={segments.length > 0}
+        segmentIndex={currentSegmentIndex}
+        segmentCount={segments.length}
+        currentTime={displayCurrentTime}
+        totalDuration={effectiveTotalDuration}
+        onSeek={handleSeekTo}
+        compact={compact}
+      />
+    </div>
+  )
+}
+
+export default FrontendPreviewPlayer

apps/web/src/pages/generate/components/GenerateStepActions.tsx

@@ -5,7 +5,7 @@
  * 步骤 1~3：上一步 / 下一步
  * 步骤 4（确认生成/进度）：未开始 →「✨ 确认生成视频」；生成中 →「⏳ 视频渲染中…」；
  *                       失败 →「🔄 重新生成」；全部完成 →「下一步：选择封面 →」
- * 步骤 5（选择封面）：上一步 + 完成按钮
+ * 步骤 5（选择封面）：仅上一步，无主按钮
  */
 import React from "react"
 import { Tooltip } from "antd"
@@ -32,10 +32,6 @@ export interface GenerateStepActionsProps {
   freeClipsUsedThisTime?: number
   /** 前往充值 */
   onRecharge?: () => void
-  /** Step5 点击完成（保存入库并跳转） */
-  onFinish?: () => void | Promise<void>
-  /** Step5 保存中 */
-  finishing?: boolean
 }
 
 const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
@@ -52,8 +48,6 @@ const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
   insufficientReason,
   freeClipsUsedThisTime,
   onRecharge,
-  onFinish,
-  finishing,
 }) => {
   const renderPrimaryButton = () => {
     /* 步骤 1~3：上一步 / 下一步 */
@@ -132,18 +126,8 @@ const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
       )
     }
 
-    /* 步骤 5（封面，最后一步）：完成按钮 */
-    return (
-      <button
-        className="xx-btn xx-btn-primary"
-        onClick={() => {
-          if (onFinish && !finishing) void onFinish()
-        }}
-        disabled={finishing}
-      >
-        {finishing ? "⏳ 保存中…" : "✅ 完成"}
-      </button>
-    )
+    /* 步骤 5（封面，最后一步）：无主按钮 */
+    return null
   }
 
   return (

apps/web/src/pages/generate/components/GenerateStepContent.tsx

@@ -4,8 +4,10 @@
  * 原步骤"选择配音"已从主流程移除，改为 Step1 下一步分支弹窗（VoiceSelectModal / ScriptSelectModal → TtsVoiceModal）。
  */
 import React from "react"
+import type { EditPlanClip } from "@/api/template-editor"
 import type { CoverConfig } from "../types/cover"
 import type { TitleSettings } from "../types"
+import type { ScriptItem } from "@/api/scripts"
 import Step1EditMode from "./Step1EditMode"
 import type { EditMode } from "./Step1EditMode"
 import Step2MaterialSelect from "../components/Step2MaterialSelect"
@@ -14,7 +16,6 @@ import Step6CoverSettings from "../components/Step6CoverSettings"
 import BatchGenerationGrid from "./BatchGenerationGrid"
 import type { BatchTaskState } from "../hooks/generate-video/useGenerationPolling"
 import type { GeneratedVideo } from "@/api/template-editor"
-import type { TitleTemplate } from "@/components/title/template-types"
 
 export interface GenerateStepContentProps {
   currentStep: number
@@ -50,23 +51,15 @@ export interface GenerateStepContentProps {
   onToggleStroke: () => void
   onToggleShadow: () => void
   onApplyPreset: (presetKey: string) => void
-  onUpdateStyle?: (patch: Partial<TitleSettings>) => void
   activePreset: string | null
-  titlePresets: Array<{
-    key: string
-    label: string
-    emoji?: string
-    style: Record<string, unknown>
-  }>
-  enableTemplates?: boolean
-  selectedTemplateId?: string | null
-  onApplyTemplate?: (settings: import("../types").TitleSettings, template: TitleTemplate) => void
+  titlePresets: { key: string; label: string; previewStyle: React.CSSProperties }[]
   /* ── 封面 ── */
   coverSettings: CoverConfig
   onCoverSettingsChange: (settings: CoverConfig) => void
   /* ── 配音 ── */
   selectedVoice: string
   onSelectedVoiceChange: (id: string) => void
+  onServerClipsChange: (clips: EditPlanClip[]) => void
   /* ── 生成 ── */
   generating: boolean
   generated: boolean
@@ -89,6 +82,10 @@ export interface GenerateStepContentProps {
   previewCovers: string[]
   onPreviewCoversChange: (urls: string[]) => void
   selectedVariantIds?: number[]
+  /* ── 摘要信息（#1970 Step4 展示用） ── */
+  selectedScript: ScriptItem | null
+  ttsVoiceId: string
+  ttsVoiceSource: "preset" | "clone"
 }
 
 export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) => {
@@ -122,14 +119,11 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
     onToggleStroke,
     onToggleShadow,
     onApplyPreset,
-    onUpdateStyle,
-    enableTemplates,
-    selectedTemplateId,
-    onApplyTemplate,
     activePreset,
     titlePresets,
     coverSettings,
     onCoverSettingsChange,
+    onServerClipsChange,
     generating,
     generateError,
     progress,
@@ -142,8 +136,18 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
     previewCovers,
     onPreviewCoversChange,
     selectedVariantIds,
+    selectedScript,
+    ttsVoiceId,
+    ttsVoiceSource,
   } = props
 
+  const handleClipsChange = React.useCallback(
+    (clips: EditPlanClip[], _templateId?: string) => {
+      onServerClipsChange(clips)
+    },
+    [onServerClipsChange],
+  )
+
   switch (currentStep) {
     case 1:
       return (
@@ -171,6 +175,7 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
           clipCount={clipCount}
           onClipCountChange={onClipCountChange}
           selectedTemplate={selectedTemplate}
+          onServerClipsChange={handleClipsChange}
         />
       )
     case 3:
@@ -186,12 +191,8 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
           onToggleStroke={onToggleStroke}
           onToggleShadow={onToggleShadow}
           onApplyPreset={onApplyPreset}
-          onUpdateStyle={onUpdateStyle}
           activePreset={activePreset}
           titlePresets={titlePresets}
-          enableTemplates={enableTemplates}
-          selectedTemplateId={selectedTemplateId}
-          onApplyTemplate={onApplyTemplate}
           previewCount={previewCount}
           previewTitles={previewTitles}
           onPreviewTitlesChange={onPreviewTitlesChange}
@@ -200,6 +201,40 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
     case 4:
       return (
         <div className="xx-form-section">
+          {/* 配置摘要（#1970） */}
+          <div
+            style={{
+              padding: 14,
+              background: "#f9fafb",
+              borderRadius: 8,
+              marginBottom: 16,
+              fontSize: 13,
+              lineHeight: 1.8,
+              color: "#374151",
+            }}
+          >
+            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 6, color: "#111" }}>
+              📋 生成配置
+            </div>
+            <div>🎬 剪辑模式：{editMode === "random" ? "🎲 随机混剪" : "📖 叙事剪辑"}</div>
+            {editMode === "random" ? (
+              <div>🎙️ 配音来源：配音库音频</div>
+            ) : (
+              <>
+                <div>📝 文案：{selectedScript?.title ?? "未选择"}</div>
+                <div>
+                  🎙️ 合成配音音色：
+                  {ttsVoiceId
+                    ? `${ttsVoiceSource === "clone" ? "克隆音色" : "系统音色"}（${ttsVoiceId.slice(0, 8)}...）`
+                    : "未选择"}
+                </div>
+              </>
+            )}
+            <div>📱 视频比例：{videoRatio}</div>
+            <div>🎯 智能降重：{dedupEnabled ? "已开启" : "已关闭"}</div>
+            {previewCount > 1 && <div>📦 生成数量：{previewCount} 个</div>}
+          </div>
+
           {previewCount > 1 ? (
             <BatchGenerationGrid
               tasks={batchTasks}

apps/web/src/pages/generate/components/PreviewControls.tsx

@@ -0,0 +1,195 @@
+import React from "react"
+import {
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  AudioOutlined,
+  AudioMutedOutlined,
+} from "@ant-design/icons"
+import { PreviewProgressBar } from "./PreviewProgressBar"
+
+interface PreviewControlsProps {
+  isPlaying: boolean
+  onTogglePlay: () => void
+  muted: boolean
+  onToggleMute: () => void
+  hasSegments: boolean
+  segmentIndex: number
+  segmentCount: number
+  currentTime: number
+  totalDuration: number
+  onSeek: (time: number) => void
+  compact?: boolean
+}
+
+/**
+ * 播放控制 UI 组件（静音按钮 / 片段指示器 / 中央播放按钮 / 底部毛玻璃控制条）
+ */
+export const PreviewControls: React.FC<PreviewControlsProps> = ({
+  isPlaying,
+  onTogglePlay,
+  muted,
+  onToggleMute,
+  hasSegments,
+  segmentIndex,
+  segmentCount,
+  currentTime,
+  totalDuration,
+  onSeek,
+  compact = false,
+}) => {
+  return (
+    <>
+      {/* 静音/有声切换（#1741）：左上角 */}
+      {hasSegments && (
+        <button
+          type="button"
+          aria-label={muted ? "取消静音" : "静音"}
+          title={muted ? "取消静音" : "静音"}
+          onClick={onToggleMute}
+          style={{
+            position: "absolute",
+            top: 8,
+            left: 8,
+            width: compact ? 26 : 30,
+            height: compact ? 26 : 30,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "rgba(0,0,0,0.45)",
+            backdropFilter: "blur(8px)",
+            WebkitBackdropFilter: "blur(8px)",
+            border: "1px solid rgba(255,255,255,0.1)",
+            borderRadius: "50%",
+            color: muted ? "rgba(255,255,255,0.45)" : "rgba(255,255,255,0.92)",
+            fontSize: compact ? 13 : 15,
+            cursor: "pointer",
+            zIndex: 10,
+            padding: 0,
+            transition: "background 0.15s, color 0.15s",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = "rgba(0,0,0,0.65)"
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = "rgba(0,0,0,0.45)"
+          }}
+        >
+          {muted ? <AudioMutedOutlined /> : <AudioOutlined />}
+        </button>
+      )}
+
+      {/* 片段指示器 — 右上角胶囊 */}
+      <div
+        style={{
+          position: "absolute",
+          top: 8,
+          right: 8,
+          background: "rgba(0,0,0,0.45)",
+          backdropFilter: "blur(8px)",
+          WebkitBackdropFilter: "blur(8px)",
+          color: "rgba(255,255,255,0.9)",
+          fontSize: compact ? 9 : 10,
+          fontWeight: 500,
+          padding: compact ? "1px 6px" : "2px 8px",
+          borderRadius: 999,
+          zIndex: 10,
+          border: "1px solid rgba(255,255,255,0.1)",
+          letterSpacing: 0.3,
+        }}
+      >
+        {`${segmentIndex + 1} / ${segmentCount}`}
+      </div>
+
+      {/* 中央播放按钮 */}
+      {!isPlaying && (
+        <button
+          onClick={onTogglePlay}
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            background: "rgba(0,0,0,0.45)",
+            backdropFilter: "blur(12px)",
+            WebkitBackdropFilter: "blur(12px)",
+            border: "1px solid rgba(255,255,255,0.15)",
+            borderRadius: "50%",
+            width: 52,
+            height: 52,
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#fff",
+            fontSize: 26,
+            zIndex: 10,
+            transition: "transform 0.2s ease, background 0.2s ease",
+            boxShadow: "0 4px 20px rgba(0,0,0,0.4)",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1.08)"
+            e.currentTarget.style.background = "rgba(0,0,0,0.6)"
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = "translate(-50%, -50%) scale(1)"
+            e.currentTarget.style.background = "rgba(0,0,0,0.45)"
+          }}
+        >
+          <PlayCircleOutlined />
+        </button>
+      )}
+
+      {/* 控制条 — 手机风格毛玻璃 */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          display: "flex",
+          alignItems: "center",
+          gap: compact ? 6 : 10,
+          padding: compact ? "8px 10px 10px" : "12px 16px 16px",
+          background: "linear-gradient(transparent, rgba(0,0,0,0.7))",
+          backdropFilter: "blur(4px)",
+          WebkitBackdropFilter: "blur(4px)",
+          zIndex: 10,
+        }}
+      >
+        <button
+          onClick={onTogglePlay}
+          style={{
+            background: "rgba(255,255,255,0.15)",
+            border: "none",
+            color: "#fff",
+            fontSize: compact ? 14 : 16,
+            cursor: "pointer",
+            width: compact ? 26 : 32,
+            height: compact ? 26 : 32,
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            transition: "background 0.15s",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = "rgba(255,255,255,0.25)"
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = "rgba(255,255,255,0.15)"
+          }}
+        >
+          {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
+        </button>
+
+        <PreviewProgressBar
+          currentTime={currentTime}
+          totalDuration={totalDuration}
+          onSeek={onSeek}
+          compact={compact}
+        />
+      </div>
+    </>
+  )
+}

apps/web/src/pages/generate/components/PreviewProgressBar.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useRef, useState } from "react"
+import { formatDuration } from "../utils/formatDuration"
+
+interface PreviewProgressBarProps {
+  currentTime: number
+  totalDuration: number
+  onSeek: (time: number) => void
+  compact?: boolean
+}
+
+/**
+ * 进度条组件：点击/拖拽 seek
+ */
+export const PreviewProgressBar: React.FC<PreviewProgressBarProps> = ({
+  currentTime,
+  totalDuration,
+  onSeek,
+  compact = false,
+}) => {
+  const progressRef = useRef<HTMLDivElement>(null)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const seekByClientX = useCallback(
+    (clientX: number) => {
+      if (!progressRef.current || totalDuration <= 0) return
+      const rect = progressRef.current.getBoundingClientRect()
+      const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
+      onSeek(ratio * totalDuration)
+    },
+    [totalDuration, onSeek],
+  )
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      setIsDragging(true)
+      seekByClientX(e.clientX)
+    },
+    [seekByClientX],
+  )
+
+  useEffect(() => {
+    if (!isDragging) return
+    const handleMouseMove = (e: MouseEvent) => seekByClientX(e.clientX)
+    const handleMouseUp = () => setIsDragging(false)
+    window.addEventListener("mousemove", handleMouseMove)
+    window.addEventListener("mouseup", handleMouseUp)
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove)
+      window.removeEventListener("mouseup", handleMouseUp)
+    }
+  }, [isDragging, seekByClientX])
+
+  const progressPercent = totalDuration > 0 ? (currentTime / totalDuration) * 100 : 0
+
+  return (
+    <>
+      <span
+        style={{
+          fontSize: compact ? 10 : 11,
+          color: "rgba(255,255,255,0.85)",
+          minWidth: compact ? 58 : 72,
+          fontVariantNumeric: "tabular-nums",
+          letterSpacing: 0.2,
+        }}
+      >
+        {formatDuration(currentTime)} / {formatDuration(totalDuration)}
+      </span>
+
+      <div
+        ref={progressRef}
+        onMouseDown={handleMouseDown}
+        style={{
+          flex: 1,
+          height: 3,
+          background: "rgba(255,255,255,0.2)",
+          borderRadius: 2,
+          cursor: "pointer",
+          position: "relative",
+        }}
+      >
+        <div
+          style={{
+            height: "100%",
+            width: `${progressPercent}%`,
+            background: "#fff",
+            borderRadius: 2,
+            transition: isDragging ? "none" : "width 0.1s linear",
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: `${progressPercent}%`,
+            transform: "translate(-50%, -50%)",
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            background: "#fff",
+            boxShadow: "0 0 6px rgba(255,255,255,0.5)",
+            opacity: isDragging ? 1 : 0,
+            transition: "opacity 0.15s",
+          }}
+        />
+      </div>
+    </>
+  )
+}

apps/web/src/pages/generate/components/Step4TitleSettings.tsx

@@ -1,19 +1,23 @@
 /**
  * Step 4 选择标题（Issue #1677 批量生成）
  *
- * 布局：全宽区域，标题输入 + 标题模板卡片网格。
- * - 单视频：TitleLibraryAutoComplete 标题库输入
- * - 批量：N 个独立标题输入框（AutoComplete 支持标题库选择）
+ * 布局（由 GeneratePage 编排）：左侧大区域实时预览（单=大播放器，批量=Canvas 网格），
+ * 右侧边栏标题设置。本组件渲染在右侧边栏：
+ * - 单视频：AI 标题生成器 + AutoComplete 标题库（与旧版完全一致，零回归）
+ * - 批量：N 个独立标题输入框（AutoComplete 支持标题库选择）+ 批量 AI 生成
+ *   （一次生成 N 个标题，分别填入各变体，可单独换一个）
  * - 标题样式（字体/颜色/位置/大小/粗斜描边/预设）：全局统一
  */
-import React, { useMemo } from "react"
+import React, { useMemo, useState } from "react"
+import { Input, message } from "antd"
+import { LoadingOutlined } from "@ant-design/icons"
 import type { TitleSettings } from "../types"
-import { POSITION_OPTIONS } from "../constants"
-import { FONT_OPTIONS } from "@/components/title/constants"
+import { POSITION_OPTIONS, FONT_OPTIONS } from "../constants"
 import { useStep4Title } from "../hooks/useStep4Title"
+import AiTitleGenerator from "./title/AiTitleGenerator"
 import TitleLibraryAutoComplete from "./title/TitleLibraryAutoComplete"
 import TitleStylePanel from "./title/TitleStylePanel"
-import type { TitleTemplate } from "@/components/title/template-types"
+import { AI_TITLE_TEMPLATES } from "../constants"
 
 interface Step4TitleSettingsProps {
   titleSettings: TitleSettings
@@ -29,24 +33,44 @@ interface Step4TitleSettingsProps {
   onToggleStroke: () => void
   onToggleShadow: () => void
   onApplyPreset: (presetKey: string) => void
-  onUpdateStyle?: (patch: Partial<TitleSettings>) => void
   activePreset: string | null
-  titlePresets: Array<{
-    key: string
-    label: string
-    emoji?: string
-    style?: Record<string, unknown>
-    previewStyle?: React.CSSProperties
-  }>
+  titlePresets: { key: string; label: string; previewStyle: React.CSSProperties }[]
   /* ── 批量生成（#1677）── */
   /** 生成数量 */
   previewCount?: number
   /** 每个变体的标题文字（长度=previewCount） */
   previewTitles?: string[]
   onPreviewTitlesChange?: (titles: string[]) => void
-  enableTemplates?: boolean
-  selectedTemplateId?: string | null
-  onApplyTemplate?: (settings: TitleSettings, template: TitleTemplate) => void
+}
+
+/** 从本地 AI 标题模板池按主题词生成 N 个不同标题（与单视频 AI 生成同源） */
+function buildBatchAiTitles(topic: string, count: number): string[] {
+  const styles: Array<"catchy" | "emotional" | "informative"> = [
+    "catchy",
+    "emotional",
+    "informative",
+  ]
+  const pool: string[] = []
+  styles.forEach((style) => {
+    const templates = AI_TITLE_TEMPLATES[style] || []
+    templates.forEach((tpl) => pool.push(tpl.replace(/\{topic\}/g, topic)))
+  })
+  // 洗牌后取前 count 个；不足则轮转补齐
+  const shuffled = [...pool].sort(() => Math.random() - 0.5)
+  const out: string[] = []
+  for (let i = 0; i < count; i++) {
+    out.push(shuffled[i % shuffled.length] || "")
+  }
+  return out
+}
+
+function extractTopic(text: string): string {
+  const keywords = text
+    .replace(/[，。！？、,.!?]/g, " ")
+    .split(/\s+/)
+    .filter(Boolean)
+  if (keywords.length === 0) return "这个话题"
+  return keywords.slice(0, 3).join("")
 }
 
 const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
@@ -60,18 +84,16 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
     onToggleStroke,
     onToggleShadow,
     onApplyPreset,
-    onUpdateStyle,
     activePreset,
     titlePresets,
     previewCount = 1,
     previewTitles,
     onPreviewTitlesChange,
-    enableTemplates,
-    selectedTemplateId,
-    onApplyTemplate,
   } = props
 
   const isBatch = previewCount > 1
+  const [batchAiLoading, setBatchAiLoading] = useState(false)
+  const [batchAiTopic, setBatchAiTopic] = useState("")
 
   /** 更新单个变体标题；变体0同步写回 titleSettings.title（全局样式面板/草稿/TTS 链路依赖） */
   const updateVariantTitle = (index: number, val: string) => {
@@ -84,31 +106,117 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
     }
   }
 
+  /** 批量 AI 生成：按主题词生成标题，分别填入 N 个变体 */
+  const handleBatchAiGenerate = async (onlyEmpty = false) => {
+    if (!onPreviewTitlesChange || !previewTitles) return
+    const topic = (batchAiTopic || t.aiTitleInput || "").trim()
+    if (!topic) {
+      message.warning("请先输入主题词，例如：萌宠日常、旅行vlog")
+      return
+    }
+    setBatchAiLoading(true)
+    try {
+      // 与单视频一致：本地模板模拟 AI 生成（1200ms 体验延迟）
+      await new Promise((resolve) => setTimeout(resolve, 800))
+      const picked = buildBatchAiTitles(extractTopic(topic), previewCount)
+      const next = [...previewTitles]
+      for (let i = 0; i < previewCount; i++) {
+        if (onlyEmpty && next[i]?.trim()) continue
+        if (picked[i]) next[i] = picked[i]
+      }
+      onPreviewTitlesChange(next)
+      if (next[0]) t.updateTitle(next[0])
+      message.success(`已为 ${previewCount} 个视频生成标题，可单独修改`)
+    } finally {
+      setBatchAiLoading(false)
+    }
+  }
+
   const titleOptions = useMemo(
     () => t.userTitles.map((ut) => ({ label: ut.content, value: ut.content })),
     [t.userTitles],
   )
 
   return (
-    <div className="xx-form-section">
+    <div className="xx-form-section xx-title-sidebar">
       <h3>📝 选择标题</h3>
 
       {!isBatch ? (
-        /* ── 单视频：标题输入框 ── */
-        <div className="xx-form-field" style={{ maxWidth: 640 }}>
-          <label>标题</label>
-          <TitleLibraryAutoComplete
-            placeholder="输入或从标题库选择"
-            value={previewTitles?.[0] ?? t.titleSettings.title}
-            onChange={(val) => {
-              t.updateTitle(val || "")
-              onPreviewTitlesChange?.([val || ""])
-            }}
-            options={titleOptions}
-          />
-        </div>
+        /* ── 单视频：原有 AI 标题 + 输入框（保持不变，零回归） ── */
+        <>
+          {t.titleSettings.aiAutoSelect ? (
+            <>
+              <div className="xx-title-ai-toggle">
+                <span className="xx-toggle-label">AI 自动选择标题</span>
+                <div className="xx-switch active" onClick={t.toggleAiAutoSelect}>
+                  <div className="xx-switch-knob" />
+                </div>
+              </div>
+              <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 }}>
+                    {(previewTitles?.[0] ?? 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>
+            </>
+          ) : (
+            <>
+              <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-title-ai-toggle">
+                <span className="xx-toggle-label">AI 自动选择标题</span>
+                <div className="xx-switch" onClick={t.toggleAiAutoSelect}>
+                  <div className="xx-switch-knob" />
+                </div>
+              </div>
+              <div className="xx-form-field">
+                <label>标题</label>
+                <TitleLibraryAutoComplete
+                  placeholder="输入或从标题库选择"
+                  value={previewTitles?.[0] ?? t.titleSettings.title}
+                  onChange={(val) => {
+                    t.updateTitle(val || "")
+                    onPreviewTitlesChange?.([val || ""])
+                  }}
+                  options={titleOptions}
+                />
+              </div>
+            </>
+          )}
+        </>
       ) : (
-        /* ── 批量：N 个独立标题输入框 ── */
+        /* ── 批量：AI 批量生成 + N 个独立标题输入框（AutoComplete 支持标题库） ── */
         <div className="xx-batch-titles">
           <div
             style={{
@@ -118,11 +226,42 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
               lineHeight: 1.6,
             }}
           >
-            为每个视频输入独立标题。标题样式（字体/颜色/位置）全局统一。
+            为每个视频输入独立标题，修改会实时叠加到左侧对应视频上。标题样式（字体/颜色/位置）全局统一。
+          </div>
+
+          {/* 批量 AI 标题 */}
+          <div className="xx-batch-ai-row">
+            <Input
+              placeholder="主题词，如：萌宠日常、旅行vlog"
+              value={batchAiTopic || t.aiTitleInput}
+              onChange={(e) => {
+                setBatchAiTopic(e.target.value)
+                t.setAiTitleInput(e.target.value)
+              }}
+              maxLength={30}
+              size="small"
+              style={{ flex: 1 }}
+            />
+            <button
+              type="button"
+              className="xx-btn xx-btn-primary xx-btn-sm"
+              disabled={batchAiLoading}
+              onClick={() => handleBatchAiGenerate(false)}
+            >
+              {batchAiLoading ? <LoadingOutlined /> : "✨"} 一键生成 {previewCount} 个标题
+            </button>
+            <button
+              type="button"
+              className="xx-btn xx-btn-ghost xx-btn-sm"
+              disabled={batchAiLoading}
+              onClick={() => handleBatchAiGenerate(true)}
+            >
+              补填空标题
+            </button>
           </div>
 
           {Array.from({ length: previewCount }, (_, i) => (
-            <div className="xx-form-field" key={i} style={{ maxWidth: 640 }}>
+            <div className="xx-form-field" key={i}>
               <label>视频 {i + 1} 标题</label>
               <TitleLibraryAutoComplete
                 placeholder={`输入或选择视频 ${i + 1} 的标题`}
@@ -146,15 +285,10 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
         onToggleStroke={onToggleStroke}
         onToggleShadow={onToggleShadow}
         onApplyPreset={onApplyPreset}
-        onUpdateStyle={onUpdateStyle}
-        showCoverToggle
         activePreset={activePreset}
         titlePresets={titlePresets}
         POSITION_OPTIONS={POSITION_OPTIONS}
         FONT_OPTIONS={FONT_OPTIONS}
-        enableTemplates={enableTemplates}
-        selectedTemplateId={selectedTemplateId}
-        onApplyTemplate={onApplyTemplate}
       />
     </div>
   )

apps/web/src/pages/generate/components/TtsVoiceModal.tsx

@@ -19,8 +19,6 @@ import { synthesizeSpeech, getTTSJobStatus, saveTtsToLibrary } from "@/api/tts"
 import type { PresetVoiceItem } from "@/api/voices"
 import type { VoiceClone } from "@/api/voice-clone"
 import { VOICE_GENDER_ICON } from "../constants"
-import TtsStyleSelector from "@/components/voice/TtsStyleSelector"
-import { DEFAULT_TTS_STYLE, type TtsStyle } from "@/api/tts/styles"
 
 interface TtsVoiceModalProps {
   open: boolean
@@ -33,11 +31,7 @@ interface TtsVoiceModalProps {
     voiceAssetId: string
     ttsVoiceId: string
     ttsVoiceSource: "preset" | "clone"
-    ttsStyle: TtsStyle
   }) => void
-  /** 当前风格 */
-  style?: TtsStyle
-  onStyleChange?: (s: TtsStyle) => void
 }
 
 type TtsSynthStatus = "idle" | "synthesizing" | "saving" | "done" | "error"
@@ -48,15 +42,7 @@ const TtsVoiceModal: React.FC<TtsVoiceModalProps> = ({
   scriptTitle,
   onCancel,
   onSynthesized,
-  style: externalStyle,
-  onStyleChange,
 }) => {
-  const [internalStyle, setInternalStyle] = useState<TtsStyle>(DEFAULT_TTS_STYLE)
-  const currentStyle: TtsStyle = externalStyle ?? internalStyle
-  const handleStyleChange = (s: TtsStyle) => {
-    setInternalStyle(s)
-    onStyleChange?.(s)
-  }
   const [activeTab, setActiveTab] = useState<"preset" | "clone">("preset")
   const [selectedVoiceId, setSelectedVoiceId] = useState<string>("")
   const [status, setStatus] = useState<TtsSynthStatus>("idle")
@@ -91,7 +77,6 @@ const TtsVoiceModal: React.FC<TtsVoiceModalProps> = ({
       setStatus("idle")
       setError(null)
       setActiveTab("preset")
-      setInternalStyle(externalStyle ?? DEFAULT_TTS_STYLE)
     } else {
       if (timerRef.current) {
         clearInterval(timerRef.current)
@@ -106,7 +91,6 @@ const TtsVoiceModal: React.FC<TtsVoiceModalProps> = ({
     return () => {
       if (timerRef.current) clearInterval(timerRef.current)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
   const handlePreview = useCallback(
@@ -159,7 +143,6 @@ const TtsVoiceModal: React.FC<TtsVoiceModalProps> = ({
         text: textToSynth,
         speed: 1.0,
         language: "zh-CN",
-        style: currentStyle,
       }
       if (isClone) {
         payload.voice_clone_profile_id = selectedVoiceId
@@ -204,14 +187,13 @@ const TtsVoiceModal: React.FC<TtsVoiceModalProps> = ({
         voiceAssetId: jobId,
         ttsVoiceId: selectedVoiceId,
         ttsVoiceSource: isClone ? "clone" : "preset",
-        ttsStyle: currentStyle,
       })
     } catch (err: unknown) {
       setStatus("error")
       const msg = err instanceof Error ? err.message : "合成失败，请稍后重试"
       setError(msg)
     }
-  }, [selectedVoiceId, textToSynth, activeTab, scriptTitle, onSynthesized, currentStyle])
+  }, [selectedVoiceId, textToSynth, activeTab, scriptTitle, onSynthesized])
 
   const renderVoiceCard = (v: {
     id: string
@@ -411,10 +393,6 @@ const TtsVoiceModal: React.FC<TtsVoiceModalProps> = ({
           {textToSynth.length} 字
         </div>
 
-        <div style={{ marginBottom: 12 }}>
-          <TtsStyleSelector value={currentStyle} onChange={handleStyleChange} compact />
-        </div>
-
         <Tabs
           activeKey={activeTab}
           onChange={(k) => {

apps/web/src/pages/generate/components/title/AiTitleCard.tsx

@@ -0,0 +1,35 @@
+/**
+ * 单个 AI 标题卡片
+ */
+import React from "react"
+import { CheckCircleFilled } from "@ant-design/icons"
+
+interface AiTitleCardProps {
+  title: string
+  highlight: string
+  style: "catchy" | "emotional" | "informative"
+  selected: boolean
+  onClick: () => void
+}
+
+const AiTitleCard: React.FC<AiTitleCardProps> = ({
+  title,
+  highlight,
+  style,
+  selected,
+  onClick,
+}) => {
+  return (
+    <div className={`xx-ai-title-card ${selected ? "selected" : ""} ${style}`} onClick={onClick}>
+      <div className="xx-ai-title-card-text">{title}</div>
+      <div className="xx-ai-title-card-tag">{highlight}</div>
+      {selected && (
+        <div className="xx-ai-title-card-check">
+          <CheckCircleFilled style={{ color: "#fff", fontSize: 14 }} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AiTitleCard

apps/web/src/pages/generate/components/title/AiTitleGenerator.tsx

@@ -0,0 +1,105 @@
+/**
+ * AI 智能生成标题
+ * 输入框 + 生成按钮 + 结果列表 + 加载状态
+ */
+import React from "react"
+import { LoadingOutlined } from "@ant-design/icons"
+import AiTitleCard from "./AiTitleCard"
+
+interface AiTitleItem {
+  title: string
+  highlight: string
+  style: "catchy" | "emotional" | "informative"
+}
+
+interface AiTitleGeneratorProps {
+  inputValue: string
+  onInputChange: (value: string) => void
+  generating: boolean
+  onGenerate: () => void
+  results: AiTitleItem[]
+  hasGenerated: boolean
+  onSelect: (title: string) => void
+  selectedTitle: string
+  onRefresh: () => void
+}
+
+const AiTitleGenerator: React.FC<AiTitleGeneratorProps> = ({
+  inputValue,
+  onInputChange,
+  generating,
+  onGenerate,
+  results,
+  hasGenerated,
+  onSelect,
+  selectedTitle,
+  onRefresh,
+}) => {
+  return (
+    <div className="xx-ai-title-section">
+      <div className="xx-ai-title-header">
+        <span className="xx-ai-title-label">✨ AI 智能生成标题</span>
+      </div>
+      <div className="xx-ai-title-input-row">
+        <input
+          className="xx-ai-title-input"
+          placeholder="输入视频内容描述或关键词，如：职场成长、副业赚钱…"
+          value={inputValue}
+          onChange={(e) => onInputChange(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") onGenerate()
+          }}
+        />
+        <button
+          type="button"
+          className="xx-btn xx-btn-primary"
+          onClick={onGenerate}
+          disabled={generating || !inputValue.trim()}
+        >
+          {generating ? (
+            <>
+              <LoadingOutlined style={{ marginRight: 6 }} />
+              生成中
+            </>
+          ) : (
+            "生成标题"
+          )}
+        </button>
+      </div>
+
+      {/* 生成结果 */}
+      {hasGenerated && !generating && results.length > 0 && (
+        <div className="xx-ai-title-results">
+          <div className="xx-ai-title-results-header">
+            <span className="xx-ai-title-results-count">为你生成 {results.length} 个标题</span>
+            <button type="button" className="xx-link-btn" onClick={onRefresh} disabled={generating}>
+              🔄 换一批
+            </button>
+          </div>
+          <div className="xx-ai-title-list">
+            {results.map((item, idx) => (
+              <AiTitleCard
+                key={idx}
+                title={item.title}
+                highlight={item.highlight}
+                style={item.style}
+                selected={selectedTitle === item.title}
+                onClick={() => onSelect(item.title)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 生成中 */}
+      {generating && (
+        <div className="xx-ai-title-loading">
+          <LoadingOutlined style={{ color: "var(--primary-color)", marginRight: 8 }} />
+          AI 正在为你创作标题…
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AiTitleGenerator

apps/web/src/pages/generate/components/title/TitleMiniPreview.tsx

@@ -1,230 +0,0 @@
-/**
- * 标题迷你 Canvas 预览（#2001）
- *
- * 渲染一张指定宽度的小 Canvas 预览标题效果，用于：
- * - 预设卡片缩略图
- * - 样式面板顶部的实时预览
- *
- * 与 titleCanvas.ts 渲染逻辑保持一致，但：
- * - 固定分辨率（width × 宽高比约 2:1）
- * - 不调用 ffmpeg，只做视觉预览
- * - 支持背景色块、描边宽度/颜色、阴影参数化、行距、自动换行
- */
-import React, { useEffect, useRef } from "react"
-import type { TitleSettings } from "../../types"
-import { getFontFamily } from "@/components/title/constants"
-
-interface Props {
-  settings: TitleSettings
-  width?: number
-  sampleText?: string
-  /** 背景（预览用，默认深色渐变模拟视频底），transparent=true 时忽略 */
-  background?: string
-  /** 高度（可选，默认按 portrait 选比例） */
-  height?: number
-  /** 透明背景（卡片/编辑器预览叠加在图片上时使用） */
-  transparent?: boolean
-  /** 纵向竖屏预览（9:16），true 时 aspect=16/9 适配手机视频比例 */
-  portrait?: boolean
-}
-
-/** 按 maxCharsPerLine 自动换行 */
-function wrapLines(text: string, maxChars: number): string[] {
-  const manual = text
-    .split(/[/／\n]/)
-    .map((l) => l.trim())
-    .filter(Boolean)
-  if (!maxChars || maxChars <= 0) return manual
-  const out: string[] = []
-  for (const line of manual) {
-    if (line.length <= maxChars) {
-      out.push(line)
-      continue
-    }
-    let cur = ""
-    for (const ch of line) {
-      cur += ch
-      if (cur.length >= maxChars) {
-        out.push(cur)
-        cur = ""
-      }
-    }
-    if (cur) out.push(cur)
-  }
-  return out
-}
-
-const TitleMiniPreview: React.FC<Props> = ({
-  settings,
-  width = 200,
-  sampleText,
-  background = "linear-gradient(135deg,#1f2937,#111827)",
-  height,
-  transparent = false,
-  portrait = false,
-}) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const h = height ?? Math.round(width * (portrait ? 16 / 9 : 1 / 1.8))
-  const text = (sampleText || settings.title || "预览标题").trim() || "预览标题"
-
-  useEffect(() => {
-    const cvs = canvasRef.current
-    if (!cvs) return
-    const dpr = window.devicePixelRatio || 1
-    cvs.width = width * dpr
-    cvs.height = h * dpr
-    cvs.style.width = `${width}px`
-    cvs.style.height = `${h}px`
-    const ctx = cvs.getContext("2d")
-    if (!ctx) return
-    ctx.scale(dpr, dpr)
-    ctx.clearRect(0, 0, width, h)
-
-    // 背景（transparent 时跳过，用于叠加在图片上）
-    if (!transparent) {
-      ctx.fillStyle = "#111827"
-      ctx.fillRect(0, 0, width, h)
-    }
-
-    // 分辨率缩放：以 360 宽为基准（对应 720p 的一半）
-    const scale = width / 360
-    const r = (v: number) => Math.round(v * scale)
-
-    // 字体
-    const size = r(settings.size)
-    const ff = getFontFamily(settings.font)
-    const parts: string[] = []
-    if (settings.italic) parts.push("italic")
-    if (settings.bold) parts.push("bold")
-    parts.push(`${size}px`, ff)
-    ctx.font = parts.join(" ")
-    ctx.textAlign = "center"
-    ctx.textBaseline = "middle"
-    ctx.fillStyle = settings.color
-    ctx.lineJoin = "round"
-
-    // 阴影
-    const shadowEnabled = !!settings.shadow
-    const prevShadow = {
-      c: ctx.shadowColor,
-      b: ctx.shadowBlur,
-      ox: ctx.shadowOffsetX,
-      oy: ctx.shadowOffsetY,
-    }
-    if (shadowEnabled) {
-      ctx.shadowColor = settings.shadowColor ?? "rgba(0,0,0,0.8)"
-      ctx.shadowBlur = r(settings.shadowBlur ?? 4)
-      ctx.shadowOffsetX = r(settings.shadowOffsetX ?? 2)
-      ctx.shadowOffsetY = r(settings.shadowOffsetY ?? 2)
-    }
-
-    // 换行
-    const lines = wrapLines(text, settings.maxCharsPerLine ?? 0)
-    const lineH = size * (settings.lineHeight ?? 1.2)
-    const totalH = lines.length * lineH
-    let startY: number
-    if (settings.position === "top") {
-      startY = size / 2 + r(settings.marginTop ?? 24)
-    } else if (settings.position === "center") {
-      startY = h / 2 - totalH / 2 + size / 2
-    } else {
-      // bottom
-      const botMargin = portrait ? r(24) : r(16)
-      startY = h - totalH - botMargin + size / 2
-    }
-    let centerX = width / 2
-    if (settings.position === "custom" && settings.posX != null) {
-      centerX = (settings.posX / 100) * width
-    }
-
-    // 背景块
-    if (settings.bgEnabled) {
-      const pad = r(settings.bgPadding ?? 12)
-      const rad = r(settings.bgRadius ?? 8)
-      let maxLineW = 0
-      for (const l of lines) {
-        const m = ctx.measureText(l)
-        if (m.width > maxLineW) maxLineW = m.width
-      }
-      const bw = maxLineW + pad * 2
-      const bh = totalH + pad * 2
-      const bx = centerX - bw / 2
-      const by = startY - size / 2 - pad + (size - lineH) / 2
-      ctx.shadowColor = "rgba(0,0,0,0)"
-      ctx.shadowBlur = 0
-      ctx.fillStyle = settings.bgColor ?? "rgba(0,0,0,0.5)"
-      roundRect(ctx, bx, by, bw, bh, rad)
-      ctx.fill()
-      // 恢复阴影
-      if (shadowEnabled) {
-        ctx.shadowColor = settings.shadowColor ?? "rgba(0,0,0,0.8)"
-        ctx.shadowBlur = r(settings.shadowBlur ?? 4)
-        ctx.shadowOffsetX = r(settings.shadowOffsetX ?? 2)
-        ctx.shadowOffsetY = r(settings.shadowOffsetY ?? 2)
-      }
-    }
-
-    // 描边（先画，再画填充）
-    const strokeEnabled = !!settings.stroke && (settings.strokeWidth ?? 0) > 0
-    lines.forEach((line, i) => {
-      const y = startY + i * lineH
-      if (strokeEnabled) {
-        ctx.shadowColor = "rgba(0,0,0,0)"
-        ctx.shadowBlur = 0
-        ctx.lineWidth = r(settings.strokeWidth ?? 4)
-        ctx.strokeStyle = settings.strokeColor ?? "#000000"
-        ctx.strokeText(line, centerX, y)
-        // 恢复阴影
-        if (shadowEnabled) {
-          ctx.shadowColor = settings.shadowColor ?? "rgba(0,0,0,0.8)"
-          ctx.shadowBlur = r(settings.shadowBlur ?? 4)
-          ctx.shadowOffsetX = r(settings.shadowOffsetX ?? 2)
-          ctx.shadowOffsetY = r(settings.shadowOffsetY ?? 2)
-        }
-      }
-      ctx.fillText(line, centerX, y)
-    })
-
-    // 恢复
-    ctx.shadowColor = prevShadow.c
-    ctx.shadowBlur = prevShadow.b
-    ctx.shadowOffsetX = prevShadow.ox
-    ctx.shadowOffsetY = prevShadow.oy
-  }, [settings, width, h, text, transparent, portrait, background])
-
-  return (
-    <canvas
-      ref={canvasRef}
-      style={{
-        borderRadius: 6,
-        display: "block",
-        maxWidth: "100%",
-        background: transparent ? "transparent" : background,
-      }}
-    />
-  )
-}
-
-function roundRect(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  r: number,
-) {
-  const rr = Math.min(r, w / 2, h / 2)
-  ctx.beginPath()
-  ctx.moveTo(x + rr, y)
-  ctx.lineTo(x + w - rr, y)
-  ctx.quadraticCurveTo(x + w, y, x + w, y + rr)
-  ctx.lineTo(x + w, y + h - rr)
-  ctx.quadraticCurveTo(x + w, y + h, x + w - rr, y + h)
-  ctx.lineTo(x + rr, y + h)
-  ctx.quadraticCurveTo(x, y + h, x, y + h - rr)
-  ctx.lineTo(x, y + rr)
-  ctx.quadraticCurveTo(x, y, x + rr, y)
-  ctx.closePath()
-}
-
-export default TitleMiniPreview

apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx

@@ -4,7 +4,7 @@
  * 避免 -webkit-text-stroke 在 Chromium 中吞掉填充色的问题
  */
 import React from "react"
-import { getFontFamily } from "@/components/title/constants"
+import { getFontFamily } from "../../constants"
 
 interface TitlePresetItem {
   key: string

apps/web/src/pages/generate/components/title/TitleStylePanel.css

@@ -190,269 +190,3 @@
   border-color: var(--primary-color);
   color: #fff;
 }
-
-/* ============================================================
-   #2001 爆款标题样式面板升级 — 新增样式（ts- 前缀）
-   ============================================================ */
-
-.ts-panel {
-  position: relative;
-}
-
-/* 预览 */
-.ts-preview-wrap {
-  margin-bottom: 14px;
-  display: flex;
-  justify-content: center;
-  padding: 10px;
-  background: #0f172a;
-  border-radius: 8px;
-}
-
-/* 表单字段 */
-.ts-form-field {
-  margin-bottom: 12px;
-}
-.ts-form-field label {
-  display: block;
-  font-weight: 600;
-  margin-bottom: 6px;
-  font-size: 12px;
-  color: var(--text-primary, #1f2937);
-}
-.ts-field-label-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 6px;
-}
-.ts-field-value {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--primary-color, #7c3aed);
-}
-.ts-row-2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-}
-.ts-half {
-  margin-bottom: 0;
-}
-
-.ts-select {
-  width: 100%;
-  height: 34px;
-  border: 1px solid var(--border-color, #e5e7eb);
-  border-radius: 6px;
-  background: var(--bg-primary, #fff);
-  padding: 0 10px;
-  font-size: 13px;
-  outline: 0;
-  color: var(--text-primary, #1f2937);
-}
-.ts-select:focus {
-  border-color: var(--primary-color, #7c3aed);
-  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
-}
-.ts-input {
-  width: 100%;
-  height: 34px;
-  border: 1px solid var(--border-color, #e5e7eb);
-  border-radius: 6px;
-  padding: 0 10px;
-  font-size: 13px;
-  outline: 0;
-}
-
-.ts-slider {
-  width: 100%;
-  height: 4px;
-  -webkit-appearance: none;
-  appearance: none;
-  background: #e5e7eb;
-  border-radius: 2px;
-  outline: none;
-}
-.ts-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #7c3aed;
-  cursor: pointer;
-  border: 2px solid #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-.ts-slider::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #7c3aed;
-  cursor: pointer;
-  border: 2px solid #fff;
-}
-
-/* 样式按钮 B/I/S/☁ */
-.ts-style-btns {
-  display: flex;
-  gap: 6px;
-}
-.ts-style-btn {
-  width: 34px;
-  height: 34px;
-  border-radius: 6px;
-  border: 1px solid #e5e7eb;
-  background: #fff;
-  cursor: pointer;
-  font-size: 14px;
-  transition: 0.15s;
-  color: #374151;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.ts-style-btn:hover {
-  border-color: #7c3aed;
-  color: #7c3aed;
-}
-.ts-style-btn.active {
-  background: #faf5ff;
-  color: #6d28d9;
-  border-color: #7c3aed;
-  font-weight: 700;
-}
-
-/* 色板 */
-.ts-color-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-}
-.ts-color-swatch {
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  border: 2px solid #fff;
-  box-shadow: 0 0 0 1px #e5e7eb;
-  cursor: pointer;
-  padding: 0;
-  transition: 0.15s;
-}
-.ts-color-swatch:hover {
-  transform: scale(1.1);
-}
-.ts-color-swatch.active {
-  box-shadow: 0 0 0 2px #7c3aed;
-  transform: scale(1.1);
-}
-.ts-color-custom {
-  background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50%/8px 8px;
-  color: #666;
-  font-size: 14px;
-  line-height: 20px;
-}
-.ts-color-native {
-  width: 0;
-  height: 0;
-  border: 0;
-  padding: 0;
-}
-
-/* 预设网格 10个 - 5列 */
-.ts-presets-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 6px;
-}
-.ts-preset-card {
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  background: #fff;
-  padding: 4px;
-  cursor: pointer;
-  transition: 0.15s;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.ts-preset-card:hover {
-  border-color: #7c3aed;
-}
-.ts-preset-card.active {
-  border-color: #7c3aed;
-  background: #faf5ff;
-  box-shadow: 0 0 0 1px #7c3aed;
-}
-.ts-preset-preview {
-  height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border-radius: 4px;
-  background: #0f172a;
-}
-.ts-preset-preview canvas {
-  max-width: 100%;
-  max-height: 100%;
-}
-.ts-preset-meta {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  font-size: 10px;
-  color: #4b5563;
-  justify-content: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 2px 2px;
-}
-.ts-preset-emoji {
-  font-size: 11px;
-}
-.ts-preset-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ts-toggle-row label {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  margin-bottom: 10px;
-}
-.ts-toggle-row input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  accent-color: #7c3aed;
-}
-
-/* Tabs 紧凑样式 */
-.xx-title-style-section .ant-tabs-nav {
-  margin-bottom: 10px;
-}
-.xx-title-style-section .ant-tabs-tab {
-  font-size: 12px !important;
-  padding: 6px 8px !important;
-}
-
-/* 标题模板入口按钮（#2003） */
-.ts-template-btn {
-  border: none;
-  background: transparent;
-  color: var(--primary-color, #7c3aed);
-  font-size: 12px;
-  cursor: pointer;
-  padding: 2px 0;
-  font-weight: 500;
-}
-.ts-template-btn:hover {
-  text-decoration: underline;
-}

apps/web/src/pages/generate/components/title/TitleStylePanel.tsx

@@ -1,61 +1,23 @@
 /**
- * 标题样式设置面板（v3 重构）
- *
- * 三种模式（mode）：
- * - 「默认」（不传）：顶部实时预览 + 爆款预设网格 + 参数 Tab（基础/描边/阴影/背景/排版/封面）
- * - 「模板网格」（enableTemplates=true, paramsOnly=false）：
- *     仅显示顶部标题栏「标题模板」+ 我的模板/系统模板两个分组的大卡片网格，
- *     卡片用图片背景 + 真实标题渲染（Canvas 叠加透明渲染），底部始终可见
- *     编辑/复制/导出/删除 4 个按钮，选中卡片紫边紫影。
- * - 「仅参数」（paramsOnly=true）：仅渲染参数 Tab（给编辑器右侧用，不显示预览/预设/模板网格）
- *
- * 历史：#2001 6 Tab 参数面板；#2003 初版内联模板网格；v3 按 sketch 重写大卡片 + 图片背景
+ * 标题样式设置区
+ * 位置/字体/字号/样式按钮/预设
  */
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { Tabs, Button, message, Popconfirm } from "antd"
-import {
-  PlusOutlined,
-  EditOutlined,
-  CopyOutlined,
-  DeleteOutlined,
-  ExportOutlined,
-  CheckOutlined,
-} from "@ant-design/icons"
+import React from "react"
 import type { TitleSettings } from "../../types"
-import {
-  FONT_OPTIONS as NEW_FONT_OPTIONS,
-  TITLE_PRESETS,
-  TITLE_COLOR_PALETTE,
-  STROKE_COLOR_PALETTE,
-  BG_COLOR_PALETTE,
-} from "@/components/title/constants"
-import { buildPresetPreviewSettings } from "@/components/title/utils"
-
-import TitleMiniPreview from "./TitleMiniPreview"
-import TitleTemplateEditor from "@/components/title/TitleTemplateEditor"
-import { useTitleTemplates } from "@/components/title/useTitleTemplates"
-import {
-  titleStyleConfigToCamel,
-  templateToPreviewSettings,
-  camelToTitleStyleConfig,
-} from "@/components/title/utils"
-import { DEFAULT_TITLE_SETTINGS_FULL } from "../../types"
-import type { TitleTemplate } from "@/components/title/template-types"
-import type { TitleStyleConfig } from "@/components/title/types"
+import TitlePresetsGrid from "./TitlePresetsGrid"
+// 标题样式面板共用样式（#1809 ⑦）：智能剪辑与 AI数字人复用同一组件，
+// 由组件自带样式，避免 AI数字人页面重复引入整个 generate.css
 import "./TitleStylePanel.css"
-import "@/components/title/TitleTemplate.css"
 
 interface PositionOption {
   value: string
   label: string
 }
 
-interface LegacyPreset {
+interface TitlePresetItem {
   key: string
   label: string
-  emoji?: string
-  style?: Record<string, unknown>
-  previewStyle?: React.CSSProperties
+  previewStyle: React.CSSProperties
 }
 
 interface TitleStylePanelProps {
@@ -69,151 +31,11 @@ interface TitleStylePanelProps {
   onToggleShadow: () => void
   onApplyPreset: (presetKey: string) => void
   activePreset: string | null
-  titlePresets: LegacyPreset[]
+  titlePresets: TitlePresetItem[]
   POSITION_OPTIONS: PositionOption[]
-  FONT_OPTIONS?: Array<{ value: string; label: string; family?: string; tag?: string }>
-  onUpdateStyle?: (patch: Partial<TitleSettings>) => void
-  showCoverToggle?: boolean
-  previewWidth?: number
-  /** 启用「标题模板」模式：显示大卡片网格，隐藏参数 Tab 和旧预览 */
-  enableTemplates?: boolean
-  /** 当前选中模板 id */
-  selectedTemplateId?: string | null
-  /** 应用模板回调（父组件负责合并到 state） */
-  onApplyTemplate?: (settings: TitleSettings, template: TitleTemplate) => void
-  /** 仅渲染参数 Tab（编辑器右侧用，不显示预览/预设/模板网格） */
-  paramsOnly?: boolean
-  /** 编辑器模式下，模板编辑器组件不在这里渲染（由父组件承载） */
-  hideEditor?: boolean
+  FONT_OPTIONS: string[]
 }
 
-/* ── Slider 行 ── */
-const SliderRow: React.FC<{
-  label: string
-  value: number
-  min: number
-  max: number
-  step?: number
-  unit?: string
-  onChange: (v: number) => void
-}> = ({ label, value, min, max, step = 1, unit = "px", onChange }) => (
-  <div className="ts-form-field">
-    <div className="ts-field-label-row">
-      <label>{label}</label>
-      <span className="ts-field-value">
-        {value}
-        {unit}
-      </span>
-    </div>
-    <input
-      type="range"
-      className="ts-slider"
-      min={min}
-      max={max}
-      step={step}
-      value={value}
-      onChange={(e) => onChange(Number(e.target.value))}
-    />
-  </div>
-)
-
-/* ── 色板 ── */
-const ColorPicker: React.FC<{
-  label?: string
-  value: string
-  palette: string[]
-  onChange: (c: string) => void
-}> = ({ label, value, palette, onChange }) => {
-  const [customOpen, setCustomOpen] = useState(false)
-  return (
-    <div className="ts-form-field">
-      {label && <label>{label}</label>}
-      <div className="ts-color-row">
-        {palette.map((c) => (
-          <button
-            key={c}
-            type="button"
-            className={`ts-color-swatch${value.toLowerCase() === c.toLowerCase() ? " active" : ""}`}
-            style={{ background: c }}
-            onClick={() => onChange(c)}
-            title={c}
-          />
-        ))}
-        <button
-          type="button"
-          className="ts-color-swatch ts-color-custom"
-          onClick={() => setCustomOpen((v) => !v)}
-          title="自定义颜色"
-        >
-          +
-        </button>
-        <input
-          type="color"
-          className="ts-color-native"
-          value={value.startsWith("rgba") ? "#000000" : value}
-          onChange={(e) => {
-            onChange(e.target.value)
-            setCustomOpen(false)
-          }}
-          style={{
-            opacity: customOpen ? 1 : 0,
-            position: customOpen ? "static" : "absolute",
-            pointerEvents: customOpen ? "auto" : "none",
-            width: customOpen ? 28 : 0,
-            height: customOpen ? 28 : 0,
-            border: "none",
-            padding: 0,
-            cursor: "pointer",
-            background: "transparent",
-          }}
-        />
-      </div>
-      <div style={{ fontSize: 11, color: "#9ca3af", marginTop: 2 }}>
-        当前：<code style={{ fontSize: 11 }}>{value}</code>
-      </div>
-    </div>
-  )
-}
-
-/* ── 卡片预览：用 ref 测量容器宽度后再渲染透明 Canvas，保证文字清晰 ── */
-const FillPreview: React.FC<{
-  settings: TitleSettings
-  sampleText: string
-  portrait?: boolean
-}> = ({ settings, sampleText, portrait }) => {
-  const wrapRef = useRef<HTMLDivElement>(null)
-  const [w, setW] = useState(0)
-  useEffect(() => {
-    const el = wrapRef.current
-    if (!el) return
-    const update = () => setW(Math.floor(el.clientWidth))
-    update()
-    const ro = new ResizeObserver(update)
-    ro.observe(el)
-    return () => ro.disconnect()
-  }, [])
-  return (
-    <div ref={wrapRef} className="tt-fill-canvas-wrap">
-      {w > 0 && (
-        <TitleMiniPreview
-          settings={settings}
-          width={w}
-          sampleText={sampleText}
-          transparent
-          portrait={portrait}
-        />
-      )}
-    </div>
-  )
-}
-
-/* ── 模板卡片预览背景图池：按 index 轮换 ── */
-const PREVIEW_BG_IMAGES = [
-  "/title-templates/portrait1.jpg",
-  "/title-templates/portrait2.jpg",
-  "/title-templates/scene1.jpg",
-]
-
 const TitleStylePanel: React.FC<TitleStylePanelProps> = ({
   settings,
   onUpdatePosition,
@@ -225,658 +47,107 @@ const TitleStylePanel: React.FC<TitleStylePanelProps> = ({
   onToggleShadow,
   onApplyPreset,
   activePreset,
-  titlePresets: _titlePresets,
+  titlePresets,
   POSITION_OPTIONS,
-  showCoverToggle = false,
-  previewWidth = 220,
-  enableTemplates = false,
-  selectedTemplateId,
-  onApplyTemplate,
-  onUpdateStyle,
-  paramsOnly = false,
-  hideEditor = false,
+  FONT_OPTIONS,
 }) => {
-  const upd = (patch: Partial<TitleSettings>) => {
-    onUpdateStyle?.(patch)
-  }
-
-  const [coverOpen, setCoverOpen] = useState(!!settings.coverTitle)
-
-  /* ── 模板相关 hook + 编辑器 state ── */
-  const {
-    templates,
-    createTemplate,
-    duplicateTemplate,
-    updateTemplate,
-    deleteTemplate,
-    exportTemplate,
-  } = useTitleTemplates()
-  const [editingTemplate, setEditingTemplate] = useState<TitleTemplate | null>(null)
-  const [editorOpen, setEditorOpen] = useState(false)
-
-  const grouped = useMemo(
-    () => ({
-      builtin: templates.filter((t) => t.isBuiltin),
-      custom: templates.filter((t) => !t.isBuiltin),
-    }),
-    [templates],
-  )
-
-  const handleRequestCreate = useCallback(() => {
-    // 新建模板：若已有选中模板，以其样式为起点；否则以当前 settings 为起点
-    // 注意：这里只构造「草稿」对象（不写入 localStorage），保存时再由 handleEditorSave 真正 createTemplate
-    let base: TitleSettings = settings
-    if (selectedTemplateId) {
-      const sel = templates.find((t) => t.id === selectedTemplateId)
-      if (sel) {
-        base = {
-          ...DEFAULT_TITLE_SETTINGS_FULL,
-          ...titleStyleConfigToCamel(sel.style),
-          title: settings.title,
-          aiAutoSelect: settings.aiAutoSelect,
-          coverTitle: settings.coverTitle,
-        }
-      }
-    }
-    const draft: TitleTemplate = {
-      id: "", // 空 id 表示新建草稿
-      name: "我的标题模板",
-      emoji: "✨",
-      isBuiltin: false,
-      style: camelToTitleStyleConfig({
-        ...base,
-        position: base.position === "custom" ? "bottom" : base.position,
-      } as TitleSettings),
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
-    }
-    setEditingTemplate(draft)
-    setEditorOpen(true)
-  }, [settings, selectedTemplateId, templates])
-
-  const handleRequestEdit = useCallback((tpl: TitleTemplate) => {
-    setEditingTemplate(tpl)
-    setEditorOpen(true)
-  }, [])
-
-  const handleDuplicate = useCallback(
-    (t: TitleTemplate) => {
-      const dup = duplicateTemplate(t.id)
-      if (dup) message.success(`已复制：${dup.name}`)
-    },
-    [duplicateTemplate],
-  )
-  const handleDelete = useCallback(
-    (t: TitleTemplate) => {
-      deleteTemplate(t.id)
-      message.success("已删除模板")
-    },
-    [deleteTemplate],
-  )
-  const handleExport = useCallback(
-    (t: TitleTemplate) => {
-      const json = exportTemplate(t.id)
-      if (!json) return
-      const blob = new Blob([json], { type: "application/json" })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement("a")
-      a.href = url
-      a.download = `${t.name}.title-template.json`
-      a.click()
-      URL.revokeObjectURL(url)
-    },
-    [exportTemplate],
-  )
-
-  const handleSelectTemplate = useCallback(
-    (tpl: TitleTemplate) => {
-      const full: TitleSettings = {
-        ...DEFAULT_TITLE_SETTINGS_FULL,
-        ...titleStyleConfigToCamel(tpl.style),
-        title: settings.title,
-        aiAutoSelect: settings.aiAutoSelect,
-        coverTitle: settings.coverTitle,
-      }
-      onApplyTemplate?.(full, tpl)
-    },
-    [onApplyTemplate, settings],
-  )
-
-  const handleEditorSave = useCallback(
-    (data: { name: string; emoji: string; style: Partial<TitleStyleConfig> }) => {
-      if (!editingTemplate) return
-      let saved: TitleTemplate
-      if (editingTemplate.isBuiltin || !editingTemplate.id) {
-        // 系统模板编辑 → 创建副本；新草稿（空 id）→ 新建
-        saved = createTemplate({ name: data.name, emoji: data.emoji, style: data.style })
-      } else {
-        // 已有自定义模板 → 更新
-        updateTemplate(editingTemplate.id, {
-          name: data.name,
-          emoji: data.emoji,
-          style: data.style,
-        })
-        saved = {
-          ...editingTemplate,
-          name: data.name,
-          emoji: data.emoji,
-          style: data.style,
-          updatedAt: new Date().toISOString(),
-        }
-      }
-      setEditorOpen(false)
-      setEditingTemplate(null)
-      message.success(`已保存：${data.name}`)
-      handleSelectTemplate(saved)
-    },
-    [editingTemplate, createTemplate, updateTemplate, handleSelectTemplate],
-  )
-
-  /* ── 渲染模板大卡片（v3：图片背景 + 透明 Canvas 叠字 + 底栏始终可见操作按钮） ── */
-  const renderTemplateCard = (t: TitleTemplate, idx: number, section: "mine" | "sys") => {
-    const isSelected = selectedTemplateId === t.id
-    const bgIdx = idx % PREVIEW_BG_IMAGES.length
-    const bgImg = PREVIEW_BG_IMAGES[bgIdx]
-    // 卡片用的预览 settings：字号按 3:4 竖版比例缩放
-    const preview = templateToPreviewSettings(t, 42)
-    return (
-      <div
-        key={t.id}
-        className={`ttv3-card${isSelected ? " selected" : ""}`}
-        onClick={() => handleSelectTemplate(t)}
-      >
-        <div className="ttv3-preview">
-          <img className="ttv3-bg" src={bgImg} alt="" />
-          <div className="ttv3-vignette" />
-          <FillPreview settings={preview} sampleText="预览标题文字" portrait />
-          <span className={`ttv3-badge ttv3-badge--${section}`}>
-            {section === "sys" ? "系统" : "我的"}
-          </span>
-          <span className={`ttv3-check${isSelected ? " on" : ""}`}>
-            {isSelected && <CheckOutlined />}
-          </span>
-        </div>
-        <div className="ttv3-footer">
-          <div className="ttv3-name-row">
-            <span className="ttv3-emoji">{t.emoji || "✨"}</span>
-            <span className="ttv3-name" title={t.name}>
-              {t.name}
-            </span>
-            <span className={`ttv3-tag ttv3-tag--${section}`}>
-              {section === "sys" ? "系统" : "我的"}
-            </span>
-          </div>
-          <div className="ttv3-actions" onClick={(e) => e.stopPropagation()}>
-            <button
-              type="button"
-              className="ttv3-act ttv3-act--primary"
-              disabled={t.isBuiltin}
-              onClick={() => handleRequestEdit(t)}
-              title={t.isBuiltin ? "系统模板不可编辑，点击复制后可编辑" : "编辑"}
-            >
-              <EditOutlined /> 编辑
-            </button>
-            <button
-              type="button"
-              className="ttv3-act"
-              onClick={() => handleDuplicate(t)}
-              title="复制"
-            >
-              <CopyOutlined /> 复制
-            </button>
-            <button type="button" className="ttv3-act" onClick={() => handleExport(t)} title="导出">
-              <ExportOutlined /> 导出
-            </button>
-            <Popconfirm title="删除该模板？" onConfirm={() => handleDelete(t)}>
-              <button
-                type="button"
-                className="ttv3-act ttv3-act--danger"
-                disabled={t.isBuiltin}
-                title={t.isBuiltin ? "系统模板不可删除" : "删除"}
-              >
-                <DeleteOutlined /> 删除
-              </button>
-            </Popconfirm>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  /* ── 旧爆款预设网格（paramsOnly 或 enableTemplates 时不显示） ── */
-  const renderPresetGrid = () => (
-    <div className="ts-presets-grid">
-      {TITLE_PRESETS.map((p) => {
-        const isActive = activePreset === p.key
-        const previewStyle = buildPresetPreviewSettings(settings, p.key, 56)
-        return (
-          <button
-            key={p.key}
-            type="button"
-            className={`ts-preset-card${isActive ? " active" : ""}`}
-            onClick={() => onApplyPreset(p.key)}
-            title={p.label}
-          >
-            <div className="ts-preset-preview">
-              <TitleMiniPreview settings={previewStyle} width={120} sampleText="标题" />
-            </div>
-            <div className="ts-preset-meta">
-              <span className="ts-preset-emoji">{p.emoji}</span>
-              <span className="ts-preset-label">{p.label}</span>
-            </div>
-          </button>
-        )
-      })}
-    </div>
-  )
-
-  /* ── 参数 Tab 面板（编辑器右侧复用） ── */
-  const renderParamsTabs = () => (
-    <Tabs
-      size="small"
-      defaultActiveKey="basic"
-      items={[
-        {
-          key: "basic",
-          label: "基础",
-          children: (
-            <>
-              <div className="ts-row-2">
-                <div className="ts-form-field ts-half">
-                  <label>位置</label>
-                  <select
-                    className="ts-select"
-                    value={settings.position}
-                    onChange={(e) => onUpdatePosition(e.target.value)}
-                  >
-                    {POSITION_OPTIONS.map((o) => (
-                      <option key={o.value} value={o.value}>
-                        {o.label}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                <div className="ts-form-field ts-half">
-                  <label>字体</label>
-                  <select
-                    className="ts-select"
-                    value={settings.font}
-                    onChange={(e) => onUpdateFont(e.target.value)}
-                  >
-                    {NEW_FONT_OPTIONS.map((f) => (
-                      <option key={f.value} value={f.value}>
-                        {f.tag === "hot" ? "🔥 " : f.tag === "new" ? "🆕 " : ""}
-                        {f.label}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-
-              <SliderRow
-                label="字号"
-                value={settings.size}
-                min={16}
-                max={120}
-                onChange={onUpdateSize}
-              />
-
-              <div className="ts-form-field">
-                <label>样式</label>
-                <div className="ts-style-btns">
-                  <button
-                    type="button"
-                    className={`ts-style-btn${settings.bold ? " active" : ""}`}
-                    onClick={onToggleBold}
-                  >
-                    <b>B</b>
-                  </button>
-                  <button
-                    type="button"
-                    className={`ts-style-btn${settings.italic ? " active" : ""}`}
-                    onClick={onToggleItalic}
-                  >
-                    <i>I</i>
-                  </button>
-                  <button
-                    type="button"
-                    className={`ts-style-btn${settings.stroke ? " active" : ""}`}
-                    onClick={() => {
-                      onToggleStroke()
-                      if (!settings.stroke && (settings.strokeWidth ?? 0) < 2)
-                        upd({ strokeWidth: 4 })
-                    }}
-                    title="描边"
-                  >
-                    S
-                  </button>
-                  <button
-                    type="button"
-                    className={`ts-style-btn${settings.shadow ? " active" : ""}`}
-                    onClick={() => {
-                      onToggleShadow()
-                      if (!settings.shadow) {
-                        upd({
-                          shadowOffsetX: 2,
-                          shadowOffsetY: 2,
-                          shadowBlur: 4,
-                          shadowColor: "rgba(0,0,0,0.8)",
-                        })
-                      }
-                    }}
-                    title="阴影"
-                  >
-                    ☁
-                  </button>
-                </div>
-              </div>
-
-              <ColorPicker
-                label="字色"
-                value={settings.color}
-                palette={TITLE_COLOR_PALETTE}
-                onChange={(c) => upd({ color: c })}
-              />
-            </>
-          ),
-        },
-        {
-          key: "stroke",
-          label: "描边",
-          children: (
-            <>
-              <div className="ts-toggle-row">
-                <label>
-                  <input type="checkbox" checked={settings.stroke} onChange={onToggleStroke} />
-                  启用描边
-                </label>
-              </div>
-              {settings.stroke && (
-                <>
-                  <SliderRow
-                    label="描边宽度"
-                    value={settings.strokeWidth ?? 4}
-                    min={0}
-                    max={20}
-                    onChange={(v) => upd({ strokeWidth: v })}
-                  />
-                  <ColorPicker
-                    label="描边颜色"
-                    value={settings.strokeColor ?? "#000000"}
-                    palette={STROKE_COLOR_PALETTE}
-                    onChange={(c) => upd({ strokeColor: c })}
-                  />
-                </>
-              )}
-            </>
-          ),
-        },
-        {
-          key: "shadow",
-          label: "阴影",
-          children: (
-            <>
-              <div className="ts-toggle-row">
-                <label>
-                  <input type="checkbox" checked={settings.shadow} onChange={onToggleShadow} />
-                  启用阴影
-                </label>
-              </div>
-              {settings.shadow && (
-                <>
-                  <SliderRow
-                    label="X偏移"
-                    value={settings.shadowOffsetX ?? 2}
-                    min={-20}
-                    max={20}
-                    onChange={(v) => upd({ shadowOffsetX: v })}
-                  />
-                  <SliderRow
-                    label="Y偏移"
-                    value={settings.shadowOffsetY ?? 2}
-                    min={-20}
-                    max={20}
-                    onChange={(v) => upd({ shadowOffsetY: v })}
-                  />
-                  <SliderRow
-                    label="模糊半径"
-                    value={settings.shadowBlur ?? 4}
-                    min={0}
-                    max={30}
-                    onChange={(v) => upd({ shadowBlur: v })}
-                  />
-                  <div className="ts-form-field">
-                    <label>阴影颜色</label>
-                    <input
-                      type="text"
-                      className="ts-input"
-                      value={settings.shadowColor ?? "rgba(0,0,0,0.8)"}
-                      onChange={(e) => upd({ shadowColor: e.target.value })}
-                      placeholder="rgba(0,0,0,0.8)"
-                    />
-                  </div>
-                </>
-              )}
-            </>
-          ),
-        },
-        {
-          key: "bg",
-          label: "背景",
-          children: (
-            <>
-              <div className="ts-toggle-row">
-                <label>
-                  <input
-                    type="checkbox"
-                    checked={settings.bgEnabled}
-                    onChange={() => upd({ bgEnabled: !settings.bgEnabled })}
-                  />
-                  启用背景色块
-                </label>
-              </div>
-              {settings.bgEnabled && (
-                <>
-                  <ColorPicker
-                    label="背景颜色（含透明度）"
-                    value={settings.bgColor}
-                    palette={BG_COLOR_PALETTE}
-                    onChange={(c) => upd({ bgColor: c })}
-                  />
-                  <SliderRow
-                    label="内边距"
-                    value={settings.bgPadding}
-                    min={0}
-                    max={40}
-                    onChange={(v) => upd({ bgPadding: v })}
-                  />
-                  <SliderRow
-                    label="圆角"
-                    value={settings.bgRadius}
-                    min={0}
-                    max={30}
-                    onChange={(v) => upd({ bgRadius: v })}
-                  />
-                </>
-              )}
-            </>
-          ),
-        },
-        {
-          key: "layout",
-          label: "排版",
-          children: (
-            <>
-              <SliderRow
-                label="每行最大字符数"
-                value={settings.maxCharsPerLine ?? 0}
-                min={0}
-                max={20}
-                unit=""
-                onChange={(v) => upd({ maxCharsPerLine: v })}
-              />
-              <div
-                className="ts-form-field"
-                style={{ fontSize: 11, color: "#9ca3af", marginTop: -4 }}
-              >
-                0 = 不自动换行（按 / 手动分行）
-              </div>
-              <SliderRow
-                label="行距倍数"
-                value={Math.round((settings.lineHeight ?? 1.2) * 100) / 100}
-                min={1}
-                max={2}
-                step={0.05}
-                unit=""
-                onChange={(v) => upd({ lineHeight: Number(v.toFixed(2)) })}
-              />
-              <SliderRow
-                label="顶部边距"
-                value={settings.marginTop ?? 24}
-                min={0}
-                max={200}
-                onChange={(v) => upd({ marginTop: v })}
-              />
-            </>
-          ),
-        },
-        ...(showCoverToggle
-          ? [
-              {
-                key: "cover",
-                label: "封面",
-                children: (
-                  <>
-                    <div className="ts-toggle-row">
-                      <label>
-                        <input
-                          type="checkbox"
-                          checked={coverOpen}
-                          onChange={(e) => {
-                            setCoverOpen(e.target.checked)
-                            if (!e.target.checked) {
-                              upd({ coverTitle: null })
-                            } else {
-                              upd({
-                                coverTitle: {
-                                  font: settings.font,
-                                  size: Math.round(settings.size * 0.9),
-                                  color: settings.color,
-                                  bold: settings.bold,
-                                },
-                              })
-                            }
-                          }}
-                        />
-                        封面使用独立标题样式
-                      </label>
-                    </div>
-                    {coverOpen && settings.coverTitle && (
-                      <div style={{ fontSize: 12, color: "#6b7280", lineHeight: 1.6 }}>
-                        封面样式已开启。可在「封面设置」面板单独调整封面标题的字体/字号/颜色。
-                      </div>
-                    )}
-                  </>
-                ),
-              },
-            ]
-          : []),
-      ]}
-    />
-  )
-
-  /* ── 模板模式：只显示网格 ── */
-  if (enableTemplates && !paramsOnly) {
-    return (
-      <div className="xx-title-style-section ttv3-panel">
-        <div className="ttv3-header">
-          <span className="ttv3-title">标题模板</span>
-          <Button
-            type="primary"
-            size="small"
-            icon={<PlusOutlined />}
-            onClick={handleRequestCreate}
-            className="ttv3-new-btn"
-          >
-            新建模板
-          </Button>
-        </div>
-
-        <div className="ttv3-section">
-          <div className="ttv3-section-label">我的模板</div>
-          {grouped.custom.length === 0 ? (
-            <div className="ttv3-empty">
-              <div className="ttv3-empty-icon">✨</div>
-              <div className="ttv3-empty-text">还没有自定义模板，点右上角「新建模板」创建</div>
-            </div>
-          ) : (
-            <div className="ttv3-grid">
-              {grouped.custom.map((t, i) => renderTemplateCard(t, i, "mine"))}
-            </div>
-          )}
-        </div>
-
-        <div className="ttv3-section">
-          <div className="ttv3-section-label">系统模板</div>
-          <div className="ttv3-grid">
-            {grouped.builtin.map((t, i) => renderTemplateCard(t, i, "sys"))}
-          </div>
-        </div>
-
-        {!hideEditor && editorOpen && editingTemplate && (
-          <TitleTemplateEditor
-            open={editorOpen}
-            template={editingTemplate}
-            onClose={() => {
-              setEditorOpen(false)
-              setEditingTemplate(null)
-            }}
-            onSave={handleEditorSave}
-          />
-        )}
-      </div>
-    )
-  }
-
-  /* ── paramsOnly：仅参数 Tab ── */
-  if (paramsOnly) {
-    return <div className="xx-title-style-section ttv3-params-only">{renderParamsTabs()}</div>
-  }
-
-  /* ── 默认模式：顶部预览 + 预设 + 参数 Tab ── */
   return (
-    <div className="xx-title-style-section ts-panel">
-      {/* 实时迷你预览 */}
-      <div className="ts-preview-wrap">
-        <TitleMiniPreview
-          settings={settings}
-          width={previewWidth}
-          sampleText={settings.title || "预览标题文字"}
-        />
-      </div>
+    <div className="xx-title-style-section">
+      <h4 className="xx-section-subtitle">标题样式</h4>
 
-      {/* 爆款预设 */}
-      <div className="ts-form-field">
-        <div className="ts-field-label-row">
-          <label>爆款预设</label>
-          {activePreset && <span className="ts-field-value">已选</span>}
+      {/* 位置 + 字体 一行 */}
+      <div className="xx-title-style-row">
+        <div className="xx-form-field xx-half-field">
+          <label>位置</label>
+          <select
+            className="xx-form-select"
+            value={settings.position}
+            onChange={(e) => onUpdatePosition(e.target.value)}
+          >
+            {POSITION_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="xx-form-field xx-half-field">
+          <label>字体</label>
+          <select
+            className="xx-form-select"
+            value={settings.font}
+            onChange={(e) => onUpdateFont(e.target.value)}
+          >
+            {FONT_OPTIONS.map((f) => (
+              <option key={f} value={f}>
+                {f}
+              </option>
+            ))}
+          </select>
         </div>
-        {renderPresetGrid()}
       </div>
 
-      {renderParamsTabs()}
-
-      {!hideEditor && editorOpen && editingTemplate && (
-        <TitleTemplateEditor
-          open={editorOpen}
-          template={editingTemplate}
-          onClose={() => {
-            setEditorOpen(false)
-            setEditingTemplate(null)
-          }}
-          onSave={handleEditorSave}
+      {/* 字号滑块 */}
+      <div className="xx-form-field">
+        <div className="xx-field-label-row">
+          <label>字号</label>
+          <span className="xx-field-value">{settings.size}px</span>
+        </div>
+        <input
+          className="xx-slider"
+          type="range"
+          min={12}
+          max={128}
+          value={settings.size}
+          onChange={(e) => onUpdateSize(Number(e.target.value))}
         />
-      )}
+      </div>
+
+      {/* 预设样式 */}
+      <div className="xx-form-field">
+        <label>预设样式</label>
+        <TitlePresetsGrid
+          presets={titlePresets}
+          activePreset={activePreset}
+          onApply={onApplyPreset}
+          fontFamily={settings.font}
+        />
+      </div>
+
+      {/* 样式按钮：粗体/斜体/描边/阴影 */}
+      <div className="xx-form-field">
+        <label>样式</label>
+        <div className="xx-style-btns">
+          <button
+            className={`xx-style-btn ${settings.bold ? "active" : ""}`}
+            onClick={onToggleBold}
+            title="粗体"
+          >
+            <b>B</b>
+          </button>
+          <button
+            className={`xx-style-btn ${settings.italic ? "active" : ""}`}
+            onClick={onToggleItalic}
+            title="斜体"
+          >
+            <i>I</i>
+          </button>
+          <button
+            className={`xx-style-btn ${settings.stroke ? "active" : ""}`}
+            onClick={onToggleStroke}
+            title="描边"
+          >
+            S
+          </button>
+          <button
+            className={`xx-style-btn ${settings.shadow ? "active" : ""}`}
+            onClick={onToggleShadow}
+            title="阴影"
+          >
+            ☁
+          </button>
+        </div>
+      </div>
     </div>
   )
 }

apps/web/src/pages/generate/constants.ts

@@ -54,8 +54,22 @@ export const POSITION_OPTIONS = [
   { value: "custom", label: "自定义" },
 ]
 
-/* ── 标题字体：统一使用公共层定义（#2001） ── */
-export { getFontFamily } from "@/components/title/constants"
+/* ── 标题字体选项 ── */
+export const FONT_OPTIONS = ["思源黑体", "思源宋体", "苹方", "微软雅黑", "楷体"]
+
+/* ── 标题字体 CSS font-family 映射（中文显示名 → 浏览器可识别的字体栈） ── */
+export const FONT_FAMILY_MAP: Record<string, string> = {
+  思源黑体: '"Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif',
+  思源宋体: '"Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif',
+  苹方: '"PingFang SC", -apple-system, "Helvetica Neue", sans-serif',
+  PingFang: '"PingFang SC", -apple-system, "Helvetica Neue", sans-serif',
+  微软雅黑: '"Microsoft YaHei", "PingFang SC", sans-serif',
+  楷体: '"KaiTi", "STKaiti", "DFKai-SB", serif',
+}
+
+export function getFontFamily(font: string): string {
+  return FONT_FAMILY_MAP[font] || FONT_FAMILY_MAP["思源黑体"]
+}
 
 /* ── 标题样式预设 ── */
 export const TITLE_PRESETS = [
@@ -535,6 +549,31 @@ export const SMART_MATCH_REASONS = [
   "人物表情生动",
 ]
 
+/* ── AI 标题模板 ── */
+export const AI_TITLE_TEMPLATES: Record<string, string[]> = {
+  catchy: [
+    "震惊！{topic}居然还能这样操作",
+    "99%的人都不知道的{topic}秘诀",
+    "{topic}的终极指南，看完直接封神",
+    "别再走弯路了！{topic}看这一篇就够",
+    "一个视频讲透{topic}，建议收藏",
+  ],
+  emotional: [
+    "致每一个在{topic}路上坚持的人",
+    "关于{topic}，我想说句真心话",
+    "{topic}背后的故事，看完沉默了",
+    "为什么我劝你一定要了解{topic}",
+    "这才是{topic}最动人的样子",
+  ],
+  informative: [
+    "{topic}完整科普：从入门到精通",
+    "深度解析{topic}的核心原理",
+    "{topic}行业趋势报告｜2026最新版",
+    "三分钟带你全面了解{topic}",
+    "{topic}常见问题与解决方案汇总",
+  ],
+}
+
 /* ── 默认封面设置 ── */
 export const DEFAULT_COVER_SETTINGS: CoverConfig = {
   enabled: true,

apps/web/src/pages/generate/generate.css

@@ -2880,6 +2880,27 @@
    Issue #1677 多视频批量生成
    ================================================================ */
 
+/* ── Step4 布局对调：左侧预览大区域，右侧标题边栏 ── */
+.xx-generate-layout.step4-layout {
+  grid-template-columns: 1fr 380px;
+  align-items: start;
+}
+
+.xx-generate-preview-col {
+  min-width: 0;
+  position: sticky;
+  top: 16px;
+}
+
+.xx-generate-preview-col .xx-form-section {
+  margin: 0;
+}
+
+.xx-title-sidebar {
+  max-height: calc(100vh - 140px);
+  overflow-y: auto;
+}
+
 /* ── 数量选择弹窗 ── */
 .xx-modal-mask {
   position: fixed;
@@ -3219,6 +3240,135 @@
   border-radius: 4px;
 }
 
+/* ── 响应式：窄屏 Step4 回退单列 ── */
+@media (max-width: 960px) {
+  .xx-generate-layout.step4-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .xx-generate-preview-col {
+    position: static;
+  }
+
+  .xx-title-sidebar {
+    max-height: none;
+  }
+}
+
+/* ============================================================
+   批量前端 Canvas 预览网格（Issue #1677 修正：纯前端实时预览）
+   ============================================================ */
+/* #1741：卡片整体缩小至约 3/5——宽屏排 3 列（卡片限宽 220px 居中），
+   中屏自动回退 2 列，窄屏 1 列（见下方媒体查询）；卡片保持 9:16 比例不变形 */
+.xx-canvas-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
+  justify-content: center;
+  gap: 14px;
+}
+
+/* 窄屏单列时卡片限宽居中，避免 1fr 拉伸导致卡片过高 */
+@media (max-width: 960px) {
+  .xx-canvas-grid {
+    grid-template-columns: minmax(0, 320px);
+  }
+}
+
+.xx-canvas-grid-card {
+  position: relative;
+  border: 2px solid var(--border-primary, #e2e8f0);
+  border-radius: 12px;
+  overflow: hidden;
+  background: transparent;
+  transition: border-color 0.2s ease;
+  min-width: 0;
+}
+
+.xx-canvas-grid-card.selected {
+  border-color: var(--primary-color, #1677ff);
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
+}
+
+.xx-canvas-grid-card-bar {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  padding: 6px 10px;
+  background: var(--bg-surface, #fff);
+  border-bottom: 1px solid var(--border-primary, #e2e8f0);
+}
+
+.xx-canvas-grid-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary, #1a1a1a);
+  cursor: pointer;
+  user-select: none;
+}
+
+.xx-canvas-grid-check input[type="checkbox"] {
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+  accent-color: var(--primary-color, #1677ff);
+}
+
+/* #1750：批量变体片段加载/错误占位（9:16 竖屏比例，与播放器卡片同尺寸防塌陷） */
+.xx-variant-clips-status {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 9 / 16;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.75);
+  background: #0a0a0a;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.3),
+    0 20px 50px -12px rgba(0, 0, 0, 0.5),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+
+.xx-variant-clips-status .anticon {
+  font-size: 22px;
+}
+
+.xx-variant-clips-error-text {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 13px;
+}
+
+/* ============================================================
+   批量标题：AI 一键生成行（Issue #1677）
+   ============================================================ */
+.xx-batch-ai-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  background: var(--bg-secondary, #f7f8fa);
+  border: 1px dashed var(--border-primary, #d9d9d9);
+  border-radius: 10px;
+}
+
+.xx-batch-ai-row .xx-form-field {
+  margin: 0;
+  flex: 1;
+  min-width: 140px;
+}
+
 .xx-batch-titles {
   display: flex;
   flex-direction: column;

apps/web/src/pages/generate/hooks/generate-video/types.ts

@@ -22,8 +22,6 @@ export interface UseGenerateVideoProps {
   ttsVoiceId?: string
   /** TTS 音色来源 */
   ttsVoiceSource?: "preset" | "clone"
-  /** TTS 配音风格 */
-  ttsStyle?: string
   /** 合成后保存到配音库的 asset id / job id（叙事模式） */
   ttsVoiceAssetId?: string
   /** 智能降重开关（默认 true） */

apps/web/src/pages/generate/hooks/useBatchCovers.ts

@@ -30,30 +30,15 @@ interface UseBatchCoversOptions {
     color: string
     position: string
     bold: boolean
-    italic?: boolean
     stroke: boolean
-    strokeWidth?: number
-    strokeColor?: string
     shadow: boolean
-    shadowOffsetX?: number
-    shadowOffsetY?: number
-    shadowBlur?: number
-    shadowColor?: string
-    lineHeight?: number
-    marginTop?: number
-    maxCharsPerLine?: number
-    bgEnabled?: boolean
-    bgColor?: string
-    bgPadding?: number
-    bgRadius?: number
-    lineOverrides?: unknown[]
   }
   covers: string[]
   onCoversChange: CoversChangeFn
 }
 
 export function useBatchCovers({
-  selectedTemplate: _selectedTemplate,
+  selectedTemplate,
   generatedVideos,
   titles,
   titleStyle,
@@ -102,7 +87,7 @@ export function useBatchCovers({
       addBusy(index)
       try {
         const titleText = titles[index] || ""
-        const response = await generateCover("default", {
+        const response = await generateCover(selectedTemplate, {
           generated_video_id: target.id,
           video_url: target.file_url || target.download_url || "",
           cover_type: "ai_frame",
@@ -115,37 +100,8 @@ export function useBatchCovers({
                   font_color: titleStyle.color,
                   position: titleStyle.position,
                   bold: titleStyle.bold,
-                  italic: titleStyle.italic,
-                  stroke: titleStyle.stroke
-                    ? {
-                        enabled: true,
-                        width: titleStyle.strokeWidth ?? 4,
-                        color: titleStyle.strokeColor ?? "#000000",
-                      }
-                    : { enabled: false },
-                  shadow: titleStyle.shadow
-                    ? {
-                        enabled: true,
-                        offset_x: titleStyle.shadowOffsetX ?? 2,
-                        offset_y: titleStyle.shadowOffsetY ?? 2,
-                        blur: titleStyle.shadowBlur ?? 4,
-                        color: titleStyle.shadowColor ?? "rgba(0,0,0,0.8)",
-                      }
-                    : { enabled: false },
-                  line_height: titleStyle.lineHeight ?? 1.2,
-                  margin_top: titleStyle.marginTop ?? 24,
-                  max_chars_per_line: titleStyle.maxCharsPerLine ?? 0,
-                  background: titleStyle.bgEnabled
-                    ? {
-                        enabled: true,
-                        color: titleStyle.bgColor,
-                        padding: titleStyle.bgPadding,
-                        radius: titleStyle.bgRadius,
-                      }
-                    : { enabled: false },
-                  line_overrides: (titleStyle.lineOverrides ?? []) as Array<
-                    Record<string, unknown>
-                  >,
+                  stroke: titleStyle.stroke,
+                  shadow: titleStyle.shadow,
                 },
               }
             : {}),
@@ -166,7 +122,7 @@ export function useBatchCovers({
         removeBusy(index)
       }
     },
-    [generatedVideos, titles, titleStyle, patchCover, addBusy, removeBusy],
+    [generatedVideos, titles, titleStyle, selectedTemplate, patchCover, addBusy, removeBusy],
   )
 
   /** 为第 index 个视频上传自定义封面 */

apps/web/src/pages/generate/hooks/useGenerateFormState/index.ts

@@ -13,7 +13,6 @@ import type { EditPlanClip } from "@/api/template-editor"
 import type { CoverConfig } from "../../types/cover"
 import type { PresetVoiceItem } from "@/api/voices"
 import type { ScriptItem } from "@/api/scripts"
-import { DEFAULT_TTS_STYLE, type TtsStyle } from "@/api/tts/styles"
 import { DEFAULT_COVER_SETTINGS, DEFAULT_CLIP_COUNT } from "../../constants"
 import type { TitleSettings } from "../../types"
 import { usePlanConfigLoader } from "./usePlanConfigLoader"
@@ -34,21 +33,6 @@ const DEFAULT_TITLE_SETTINGS: TitleSettings = {
   color: "#ffffff",
   posX: null,
   posY: null,
-  lineHeight: 1.2,
-  marginTop: 24,
-  maxCharsPerLine: 0,
-  strokeWidth: 4,
-  strokeColor: "#000000",
-  shadowOffsetX: 2,
-  shadowOffsetY: 2,
-  shadowBlur: 4,
-  shadowColor: "rgba(0,0,0,0.8)",
-  bgEnabled: false,
-  bgColor: "rgba(0,0,0,0.5)",
-  bgPadding: 12,
-  bgRadius: 8,
-  lineOverrides: [],
-  coverTitle: null,
 }
 
 export interface GenerateFormState {
@@ -111,9 +95,6 @@ export interface GenerateFormState {
   /** TTS 音色来源：preset 系统 / clone 克隆 */
   ttsVoiceSource: "preset" | "clone"
   setTtsVoiceSource: (src: "preset" | "clone") => void
-  /** TTS 配音风格 */
-  ttsStyle: TtsStyle
-  setTtsStyle: (s: TtsStyle) => void
   /** 合成后配音库 asset id（叙事模式保存到库后获得；随机模式 = selectedVoice） */
   ttsVoiceAssetId: string
   setTtsVoiceAssetId: (id: string) => void
@@ -253,7 +234,6 @@ export const useGenerateFormState = (): GenerateFormState => {
   const [selectedScript, setSelectedScript] = useState<ScriptItem | null>(null)
   const [ttsVoiceId, setTtsVoiceId] = useState<string>("")
   const [ttsVoiceSource, setTtsVoiceSource] = useState<"preset" | "clone">("preset")
-  const [ttsStyle, setTtsStyle] = useState<TtsStyle>(DEFAULT_TTS_STYLE)
   const [ttsVoiceAssetId, setTtsVoiceAssetId] = useState<string>("")
   const [dedupEnabled, setDedupEnabled] = useState<boolean>(true)
 
@@ -331,8 +311,6 @@ export const useGenerateFormState = (): GenerateFormState => {
     setTtsVoiceId,
     ttsVoiceSource,
     setTtsVoiceSource,
-    ttsStyle,
-    setTtsStyle,
     ttsVoiceAssetId,
     setTtsVoiceAssetId,
     dedupEnabled,

apps/web/src/pages/generate/hooks/useGenerateFormState/usePlanConfigLoader.ts

@@ -1,7 +1,6 @@
 import { useEffect } from "react"
 import type { CoverConfig } from "../../types/cover"
 import type { TitleSettings } from "../../types"
-import type { TitleLineOverride } from "@/components/title/types"
 import type { TitleConfig } from "@/api/template-editor"
 import { getEditPlan } from "@/api/template-editor"
 
@@ -13,156 +12,6 @@ interface UsePlanConfigLoaderOptions {
   setSelectedMaterials: (ids: string[]) => void
 }
 
-/** #2001：统一归一化 title_config snake_case -> camelCase TitleSettings */
-function mapTitleCfgToSettings(
-  prev: TitleSettings,
-  tc: TitleConfig & Record<string, unknown>,
-): TitleSettings {
-  const stroke = tc.stroke as
-    boolean | { enabled?: boolean; width?: number; color?: string } | undefined
-  const strokeEnabled: boolean | undefined =
-    typeof stroke === "object" && stroke ? stroke.enabled !== false : !!stroke || undefined
-  const strokeW: number | undefined =
-    typeof stroke === "object" && stroke
-      ? (stroke.width ?? (tc.stroke_width as number | undefined))
-      : (tc.stroke_width as number | undefined)
-  const strokeC: string | undefined =
-    typeof stroke === "object" && stroke
-      ? (stroke.color ?? (tc.stroke_color as string | undefined))
-      : (tc.stroke_color as string | undefined)
-
-  const shadow = tc.shadow as
-    | boolean
-    | { enabled?: boolean; offset_x?: number; offset_y?: number; blur?: number; color?: string }
-    | undefined
-  const shadowEnabled: boolean | undefined =
-    typeof shadow === "object" && shadow ? shadow.enabled !== false : !!shadow || undefined
-  const shOffX: number | undefined =
-    typeof shadow === "object" && shadow
-      ? (shadow.offset_x ?? (tc.shadow_offset_x as number | undefined))
-      : (tc.shadow_offset_x as number | undefined)
-  const shOffY: number | undefined =
-    typeof shadow === "object" && shadow
-      ? (shadow.offset_y ?? (tc.shadow_offset_y as number | undefined))
-      : (tc.shadow_offset_y as number | undefined)
-  const shBlur: number | undefined =
-    typeof shadow === "object" && shadow
-      ? (shadow.blur ?? (tc.shadow_blur as number | undefined))
-      : (tc.shadow_blur as number | undefined)
-  const shColor: string | undefined =
-    typeof shadow === "object" && shadow
-      ? (shadow.color ?? (tc.shadow_color as string | undefined))
-      : (tc.shadow_color as string | undefined)
-
-  const bg = tc.background as
-    { enabled?: boolean; color?: string; padding?: number; radius?: number } | undefined
-  const bgEnabled: boolean | undefined =
-    (bg && typeof bg === "object" ? bg.enabled : undefined) ??
-    (tc.bg_enabled as boolean | undefined)
-  const bgColor: string | undefined =
-    (bg && typeof bg === "object" ? bg.color : undefined) ?? (tc.bg_color as string | undefined)
-  const bgPadding: number | undefined =
-    (bg && typeof bg === "object" ? bg.padding : undefined) ?? (tc.bg_padding as number | undefined)
-  const bgRadius: number | undefined =
-    (bg && typeof bg === "object" ? bg.radius : undefined) ?? (tc.bg_radius as number | undefined)
-
-  const ct = (tc.cover_title_config ?? null) as null | Record<string, unknown>
-  let coverTitle: TitleSettings["coverTitle"] = prev.coverTitle
-  if (ct) {
-    const ctStroke = ct.stroke as
-      boolean | { enabled?: boolean; width?: number; color?: string } | undefined
-    const ctShadow = ct.shadow as
-      | boolean
-      | { enabled?: boolean; offset_x?: number; offset_y?: number; blur?: number; color?: string }
-      | undefined
-    const ctBg = ct.background as
-      { enabled?: boolean; color?: string; padding?: number; radius?: number } | undefined
-    coverTitle = {
-      title: (ct.title as string | undefined) ?? prev.coverTitle?.title ?? "",
-      font: (ct.font as string | undefined) ?? prev.coverTitle?.font,
-      size:
-        (ct.font_size as number | undefined) ??
-        (ct.size as number | undefined) ??
-        prev.coverTitle?.size,
-      color:
-        (ct.font_color as string | undefined) ??
-        (ct.color as string | undefined) ??
-        prev.coverTitle?.color,
-      bold: (ct.bold as boolean | undefined) ?? prev.coverTitle?.bold,
-      italic: (ct.italic as boolean | undefined) ?? prev.coverTitle?.italic,
-      position: (ct.position as string | undefined) ?? prev.coverTitle?.position,
-      stroke:
-        typeof ctStroke === "object" && ctStroke
-          ? ctStroke.enabled !== false
-          : ((ctStroke as boolean | undefined) ?? prev.coverTitle?.stroke),
-      strokeWidth:
-        (typeof ctStroke === "object" && ctStroke ? ctStroke.width : undefined) ??
-        (ct.stroke_width as number | undefined) ??
-        prev.coverTitle?.strokeWidth,
-      strokeColor:
-        (typeof ctStroke === "object" && ctStroke ? ctStroke.color : undefined) ??
-        (ct.stroke_color as string | undefined) ??
-        prev.coverTitle?.strokeColor,
-      shadow:
-        typeof ctShadow === "object" && ctShadow
-          ? ctShadow.enabled !== false
-          : ((ctShadow as boolean | undefined) ?? prev.coverTitle?.shadow),
-      shadowOffsetX:
-        (typeof ctShadow === "object" && ctShadow ? ctShadow.offset_x : undefined) ??
-        (ct.shadow_offset_x as number | undefined) ??
-        prev.coverTitle?.shadowOffsetX,
-      shadowOffsetY:
-        (typeof ctShadow === "object" && ctShadow ? ctShadow.offset_y : undefined) ??
-        (ct.shadow_offset_y as number | undefined) ??
-        prev.coverTitle?.shadowOffsetY,
-      shadowBlur:
-        (typeof ctShadow === "object" && ctShadow ? ctShadow.blur : undefined) ??
-        (ct.shadow_blur as number | undefined) ??
-        prev.coverTitle?.shadowBlur,
-      shadowColor:
-        (typeof ctShadow === "object" && ctShadow ? ctShadow.color : undefined) ??
-        (ct.shadow_color as string | undefined) ??
-        prev.coverTitle?.shadowColor,
-      bgEnabled:
-        ctBg?.enabled ?? (ct.bg_enabled as boolean | undefined) ?? prev.coverTitle?.bgEnabled,
-      bgColor: ctBg?.color ?? (ct.bg_color as string | undefined) ?? prev.coverTitle?.bgColor,
-      bgPadding:
-        ctBg?.padding ?? (ct.bg_padding as number | undefined) ?? prev.coverTitle?.bgPadding,
-      bgRadius: ctBg?.radius ?? (ct.bg_radius as number | undefined) ?? prev.coverTitle?.bgRadius,
-    }
-  }
-
-  const result: TitleSettings = {
-    ...prev,
-    title: (tc.content as string | undefined) || prev.title,
-    aiAutoSelect: (tc.ai_auto_select as boolean | undefined) || false,
-    position: prev.position,
-    font: (tc.font_preset as string | undefined) || prev.font,
-    size: (tc.font_size as number | undefined) || prev.size,
-    color: (tc.font_color as string | undefined) || prev.color,
-    bold: (tc.bold as boolean | undefined) ?? prev.bold,
-    italic: (tc.italic as boolean | undefined) ?? prev.italic,
-    stroke: strokeEnabled ?? prev.stroke,
-    strokeWidth: strokeW ?? prev.strokeWidth,
-    strokeColor: strokeC ?? prev.strokeColor,
-    shadow: shadowEnabled ?? prev.shadow,
-    shadowOffsetX: shOffX ?? prev.shadowOffsetX,
-    shadowOffsetY: shOffY ?? prev.shadowOffsetY,
-    shadowBlur: shBlur ?? prev.shadowBlur,
-    shadowColor: shColor ?? prev.shadowColor,
-    lineHeight: (tc.line_height as number | undefined) ?? prev.lineHeight,
-    marginTop: (tc.margin_top as number | undefined) ?? prev.marginTop,
-    maxCharsPerLine: (tc.max_chars_per_line as number | undefined) ?? prev.maxCharsPerLine,
-    bgEnabled: bgEnabled ?? prev.bgEnabled,
-    bgColor: bgColor ?? prev.bgColor,
-    bgPadding: bgPadding ?? prev.bgPadding,
-    bgRadius: bgRadius ?? prev.bgRadius,
-    lineOverrides: ((tc.line_overrides as unknown[] | undefined) ?? []) as TitleLineOverride[],
-    coverTitle,
-  }
-  return result
-}
-
 /**
  * 从 URL 参数或编辑计划 ID 加载表单配置
  */
@@ -178,7 +27,14 @@ export function usePlanConfigLoader({
     if (!planConfigStr) return
     try {
       const config = JSON.parse(planConfigStr) as {
-        title_config?: Record<string, unknown>
+        title_config?: {
+          content?: string
+          ai_auto_select?: boolean
+          position?: string
+          font_preset?: string
+          font_size?: number
+          font_color?: string
+        }
         subtitle_config?: { enabled?: boolean }
         bgm_config?: { enabled?: boolean; music_id?: string }
         mode?: string
@@ -187,8 +43,16 @@ export function usePlanConfigLoader({
       }
 
       if (config.title_config) {
-        const tc = config.title_config as TitleConfig & Record<string, unknown>
-        setTitleSettings((prev: TitleSettings) => mapTitleCfgToSettings(prev, tc))
+        const tc = config.title_config as TitleConfig
+        setTitleSettings((prev: TitleSettings) => ({
+          ...prev,
+          title: tc.content || "",
+          aiAutoSelect: tc.ai_auto_select || false,
+          position: prev.position, // 强制保留默认/用户选择，不从草稿配置同步位置
+          font: tc.font_preset || prev.font,
+          size: tc.font_size || prev.size,
+          color: tc.font_color || prev.color,
+        }))
       }
       if (config.segments && config.segments.length > 0) {
         const assetIds = config.segments
@@ -212,8 +76,15 @@ export function usePlanConfigLoader({
         if (plan.name) setTitleSettings((prev: TitleSettings) => ({ ...prev, title: plan.name }))
         const cfg = plan.config
         if (cfg?.title_config) {
-          const tc2 = cfg.title_config as unknown as TitleConfig & Record<string, unknown>
-          setTitleSettings((prev: TitleSettings) => mapTitleCfgToSettings(prev, tc2))
+          setTitleSettings((prev: TitleSettings) => ({
+            ...prev,
+            aiAutoSelect: cfg.title_config!.ai_auto_select,
+            title: cfg.title_config!.content || prev.title,
+            position: prev.position, // 强制保留默认/用户选择，不从远程草稿同步位置
+            font: cfg.title_config!.font_preset || prev.font,
+            size: cfg.title_config!.font_size || prev.size,
+            color: cfg.title_config!.font_color || prev.color,
+          }))
         }
         if (cfg?.cover_config) {
           const cc = cfg.cover_config as CoverConfig

apps/web/src/pages/generate/hooks/useGenerateVideo.ts

@@ -208,7 +208,6 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
                 script_id: props.selectedScript.id,
                 tts_voice_id: props.ttsVoiceId || undefined,
                 tts_voice_source: props.ttsVoiceSource || undefined,
-                tts_style: props.ttsStyle || undefined,
               }
             : {}),
           dedup_enabled: dedupEnabled,
@@ -241,91 +240,8 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
                       }
                     : {}),
                   bold: props.titleSettings.bold,
-                  italic: props.titleSettings.italic,
-                  stroke: props.titleSettings.stroke
-                    ? {
-                        enabled: true,
-                        width: props.titleSettings.strokeWidth ?? 4,
-                        color: props.titleSettings.strokeColor ?? "#000000",
-                      }
-                    : { enabled: false },
-                  shadow: props.titleSettings.shadow
-                    ? {
-                        enabled: true,
-                        offset_x: props.titleSettings.shadowOffsetX ?? 2,
-                        offset_y: props.titleSettings.shadowOffsetY ?? 2,
-                        blur: props.titleSettings.shadowBlur ?? 4,
-                        color: props.titleSettings.shadowColor ?? "rgba(0,0,0,0.8)",
-                      }
-                    : { enabled: false },
-                  line_height: props.titleSettings.lineHeight ?? 1.2,
-                  margin_top: props.titleSettings.marginTop ?? 24,
-                  max_chars_per_line: props.titleSettings.maxCharsPerLine ?? 0,
-                  ...(props.titleSettings.bgEnabled
-                    ? {
-                        background: {
-                          enabled: true,
-                          color: props.titleSettings.bgColor,
-                          padding: props.titleSettings.bgPadding,
-                          radius: props.titleSettings.bgRadius,
-                        },
-                      }
-                    : { background: { enabled: false } }),
-                  line_overrides: (props.titleSettings.lineOverrides ?? []).map((lo) => ({
-                    line_index: lo.line_index,
-                    text: lo.text,
-                    size: lo.size,
-                    color: lo.color,
-                    bold: lo.bold,
-                    italic: lo.italic,
-                    stroke: lo.stroke,
-                    highlights: lo.highlights?.map((h) => ({
-                      word: h.word,
-                      color: h.color,
-                      bold: h.bold,
-                      scale: h.scale,
-                    })),
-                  })),
-                  ...(props.titleSettings.coverTitle
-                    ? {
-                        cover_title_config: {
-                          title: props.titleSettings.coverTitle.title,
-                          font: props.titleSettings.coverTitle.font,
-                          font_size: props.titleSettings.coverTitle.size,
-                          font_color: props.titleSettings.coverTitle.color,
-                          bold: props.titleSettings.coverTitle.bold,
-                          italic: props.titleSettings.coverTitle.italic,
-                          position: props.titleSettings.coverTitle.position,
-                          stroke: props.titleSettings.coverTitle.stroke
-                            ? {
-                                enabled: true,
-                                width: props.titleSettings.coverTitle.strokeWidth ?? 4,
-                                color: props.titleSettings.coverTitle.strokeColor ?? "#000000",
-                              }
-                            : { enabled: false },
-                          shadow: props.titleSettings.coverTitle.shadow
-                            ? {
-                                enabled: true,
-                                offset_x: props.titleSettings.coverTitle.shadowOffsetX ?? 2,
-                                offset_y: props.titleSettings.coverTitle.shadowOffsetY ?? 2,
-                                blur: props.titleSettings.coverTitle.shadowBlur ?? 4,
-                                color:
-                                  props.titleSettings.coverTitle.shadowColor ?? "rgba(0,0,0,0.8)",
-                              }
-                            : { enabled: false },
-                          ...(props.titleSettings.coverTitle.bgEnabled
-                            ? {
-                                background: {
-                                  enabled: true,
-                                  color: props.titleSettings.coverTitle.bgColor,
-                                  padding: props.titleSettings.coverTitle.bgPadding,
-                                  radius: props.titleSettings.coverTitle.bgRadius,
-                                },
-                              }
-                            : { background: { enabled: false } }),
-                        },
-                      }
-                    : {}),
+                  stroke: props.titleSettings.stroke,
+                  shadow: props.titleSettings.shadow,
                 },
               }
             : {}),

apps/web/src/pages/generate/hooks/usePreviewAssets.ts

@@ -0,0 +1,155 @@
+/**
+ * 预览素材加载 Hook
+ * 根据选中的素材 ID 列表，逐个获取素材详情（含 file_url、duration 等）
+ * 供前端预览播放器使用
+ *
+ * 注意：后端没有批量接口（/assets/batch 返回 405），
+ * 因此直接使用 Promise.allSettled 并发请求单个 GET /assets/{id}
+ */
+import { useState, useEffect, useCallback, useRef } from "react"
+import type { AssetItem } from "@/api/assets"
+import type { AxiosResponse } from "axios"
+
+/**
+ * 通过 ID 列表逐个获取素材（并发）
+ * 使用 Promise.allSettled 确保单个失败不影响整体
+ */
+async function fetchAssetsByIds(ids: string[]): Promise<AssetItem[]> {
+  // 防御：过滤空值/undefined/非字符串 id，避免发出 /assets/undefined 请求
+  const validIds = ids.filter((id): id is string => typeof id === "string" && id.length > 0)
+  if (!validIds.length) return []
+
+  try {
+    const { default: apiClient } = await import("@/api/client")
+    const results = await Promise.allSettled(
+      validIds.map((id) => apiClient.get<AssetItem>(`/assets/${id}`)),
+    )
+    return results
+      .filter(
+        (r): r is PromiseFulfilledResult<AxiosResponse<AssetItem>> =>
+          r.status === "fulfilled" && !!r.value?.data,
+      )
+      .map((r) => r.value.data)
+  } catch {
+    return []
+  }
+}
+
+interface UsePreviewAssetsReturn {
+  /** 加载后的素材列表 */
+  assets: AssetItem[]
+  /** 是否正在加载 */
+  loading: boolean
+  /** 是否已就绪（加载完成） */
+  ready: boolean
+  /** 手动触发重新加载 */
+  reload: () => void
+  /**
+   * 差集补拉（#1750）：后端变体计划 clips 可能引用不在用户已选列表中的素材
+   * （跨素材库选片/素材池扩展），发现 assets 中缺失的 asset_id 时补拉详情并合并，
+   * 保证预览播放器拿得到素材文件 URL，而不是静默丢片段。
+   */
+  ensureAssets: (ids: string[]) => Promise<void>
+}
+
+/**
+ * usePreviewAssets — 加载选中素材的视频文件信息
+ */
+export function usePreviewAssets(assetIds: string[], enabled: boolean): UsePreviewAssetsReturn {
+  const [assets, setAssets] = useState<AssetItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const [ready, setReady] = useState(false)
+  const requestIdRef = useRef(0)
+
+  // 稳定化 assetIds：只有内容真正变化时才更新引用
+  const stableAssetIds = useStableArray(assetIds)
+
+  const load = useCallback(async () => {
+    const validIds = stableAssetIds.filter(
+      (id): id is string => typeof id === "string" && id.length > 0,
+    )
+    if (!validIds.length || !enabled) {
+      setAssets([])
+      setReady(false)
+      return
+    }
+
+    const thisRequestId = ++requestIdRef.current
+    setLoading(true)
+    setReady(false)
+
+    try {
+      const result = await fetchAssetsByIds(validIds)
+      // 防止竞态：只保留最新请求的结果
+      if (requestIdRef.current === thisRequestId) {
+        setAssets(result)
+        setReady(result.length > 0)
+      }
+    } catch {
+      if (requestIdRef.current === thisRequestId) {
+        setAssets([])
+        setReady(false)
+      }
+    } finally {
+      if (requestIdRef.current === thisRequestId) {
+        setLoading(false)
+      }
+    }
+  }, [stableAssetIds, enabled])
+
+  // 补拉用独立序号：不干扰主 load 的竞态守卫
+  const ensureSeqRef = useRef(0)
+  const assetsRef = useRef<AssetItem[]>([])
+  useEffect(() => {
+    assetsRef.current = assets
+  }, [assets])
+
+  /**
+   * 差集补拉（#1750）：变体计划 clips 引用的 asset_id 不在当前素材列表时，
+   * 补拉素材详情并去重合并（不静默丢片段、不用假数据冒充）。
+   */
+  const ensureAssets = useCallback(async (ids: string[]) => {
+    const validIds = ids.filter((id): id is string => typeof id === "string" && id.length > 0)
+    if (!validIds.length) return
+    const seq = ++ensureSeqRef.current
+    const missing = Array.from(new Set(validIds)).filter(
+      (id) => !assetsRef.current.some((a) => a.id === id),
+    )
+    if (!missing.length) return
+    const fetched = await fetchAssetsByIds(missing)
+    if (seq !== ensureSeqRef.current || !fetched.length) return
+    const existing = new Set(assetsRef.current.map((a) => a.id))
+    const additions = fetched.filter((a) => !existing.has(a.id))
+    if (!additions.length) return
+    const merged = [...assetsRef.current, ...additions]
+    assetsRef.current = merged
+    setAssets(merged)
+    setReady(merged.length > 0)
+  }, [])
+
+  useEffect(() => {
+    load()
+  }, [load])
+
+  return { assets, loading, ready, reload: load, ensureAssets }
+}
+
+/**
+ * useStableArray — 数组内容稳定化 Hook
+ * 只有数组内容真正变化时才返回新的引用，避免父组件 re-render 导致的无效更新
+ */
+function useStableArray<T>(array: T[]): T[] {
+  const ref = useRef<T[]>(array)
+
+  // 比较数组内容是否真正变化
+  const hasChanged =
+    array.length !== ref.current.length || array.some((item, index) => item !== ref.current[index])
+
+  if (hasChanged) {
+    ref.current = array
+  }
+
+  return ref.current
+}
+
+export default usePreviewAssets

apps/web/src/pages/generate/hooks/usePreviewAudio.ts

@@ -0,0 +1,131 @@
+import { useCallback, useEffect, useRef } from "react"
+
+interface UsePreviewAudioOptions {
+  voiceAudioUrl: string | undefined
+  voiceDurationHint: number | undefined
+  muted: boolean
+  isPlaying: boolean
+  currentTime: number
+  onVoiceDurationChange: (d: number) => void
+  onEnded: () => void
+}
+
+interface UsePreviewAudioReturn {
+  seekTo: (time: number) => void
+  ensurePlayingAt: (time: number) => void
+  pause: () => void
+}
+
+/**
+ * 配音音频管理 hook：加载配音、loadedmetadata 自测时长、play/pause 同步、
+ * ended 事件回调、seek 同步、末帧冻结期间续播。
+ */
+export function usePreviewAudio({
+  voiceAudioUrl,
+  voiceDurationHint,
+  muted,
+  isPlaying,
+  currentTime,
+  onVoiceDurationChange,
+  onEnded,
+}: UsePreviewAudioOptions): UsePreviewAudioReturn {
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const prevIsPlayingRef = useRef(false)
+
+  // 外部 hint 初始化（自测值前的兜底）
+  useEffect(() => {
+    if (voiceDurationHint && voiceDurationHint > 0) {
+      onVoiceDurationChange(voiceDurationHint)
+    }
+  }, [voiceDurationHint, onVoiceDurationChange])
+
+  // 创建/替换 audio 元素，加载 metadata 时自测时长并监听 ended
+  useEffect(() => {
+    if (!voiceAudioUrl) {
+      if (audioRef.current) {
+        audioRef.current.pause()
+        audioRef.current.src = ""
+        audioRef.current = null
+      }
+      return
+    }
+    if (!audioRef.current) {
+      audioRef.current = new Audio()
+      audioRef.current.preload = "auto"
+    }
+    if (audioRef.current.src !== voiceAudioUrl) {
+      audioRef.current.src = voiceAudioUrl
+    }
+    audioRef.current.muted = muted
+
+    const audio = audioRef.current
+    const onLoaded = () => {
+      if (audio.duration && isFinite(audio.duration) && audio.duration > 0) {
+        onVoiceDurationChange(audio.duration)
+      }
+    }
+    const onEndedHandler = () => onEnded()
+    audio.addEventListener("loadedmetadata", onLoaded)
+    audio.addEventListener("ended", onEndedHandler)
+    return () => {
+      audio.removeEventListener("loadedmetadata", onLoaded)
+      audio.removeEventListener("ended", onEndedHandler)
+    }
+  }, [voiceAudioUrl, muted, onVoiceDurationChange, onEnded])
+
+  // mute 变化即时同步
+  useEffect(() => {
+    if (audioRef.current) audioRef.current.muted = muted
+  }, [muted])
+
+  // 播放/暂停同步（跟随视频 isPlaying）
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio || !audio.src) return
+    if (isPlaying && !prevIsPlayingRef.current) {
+      if (Math.abs(audio.currentTime - currentTime) > 0.3) {
+        try {
+          audio.currentTime = currentTime
+        } catch {
+          /* ignore */
+        }
+      }
+      audio.play().catch(() => {})
+    } else if (!isPlaying && prevIsPlayingRef.current) {
+      audio.pause()
+    }
+    prevIsPlayingRef.current = isPlaying
+  }, [isPlaying, currentTime])
+
+  const seekTo = useCallback((time: number) => {
+    const audio = audioRef.current
+    if (audio && audio.src) {
+      try {
+        audio.currentTime = time
+      } catch {
+        /* ignore */
+      }
+    }
+  }, [])
+
+  const ensurePlayingAt = useCallback((time: number) => {
+    const audio = audioRef.current
+    if (!audio || !audio.src) return
+    try {
+      if (Math.abs(audio.currentTime - time) > 0.5) audio.currentTime = time
+      if (audio.paused) audio.play().catch(() => {})
+    } catch {
+      /* ignore */
+    }
+  }, [])
+
+  const pause = useCallback(() => {
+    try {
+      audioRef.current?.pause()
+    } catch {
+      /* ignore */
+    }
+  }, [])
+
+  return { seekTo, ensurePlayingAt, pause }
+}

apps/web/src/pages/generate/hooks/useSegmentScheduler.ts

@@ -0,0 +1,384 @@
+/**
+ * 素材片段调度器 Hook（多 video 元素方案 v3）
+ *
+ * v3 修复：
+ * - 所有动态状态存入 ref，tick 为稳定函数，彻底消除 RAF 闭包陷阱
+ * - 片段切换时先启动下一个 video 再切可见性，消除冻屏间隔
+ * - 进度更新 200ms 节流
+ */
+
+import { useState, useRef, useCallback, useEffect, useMemo } from "react"
+
+export interface PlaybackSegment {
+  assetId: string
+  videoUrl: string
+  startTime: number
+  endTime: number
+  order: number
+  /** #1754 兜底：配音时长≠clips 总时长时按比例调速，1.0 = 原速 */
+  playbackRate?: number
+}
+
+export interface SegmentSchedulerState {
+  isPlaying: boolean
+  currentTime: number
+  totalDuration: number
+  currentSegmentIndex: number
+  segmentLocalTime: number
+  isEnded: boolean
+  canPlay: boolean
+  play: () => void
+  pause: () => void
+  togglePlayPause: () => void
+  seekTo: (time: number) => void
+  videoRefs: React.MutableRefObject<(HTMLVideoElement | null)[]>
+}
+
+function findSegmentAtTime(
+  segments: PlaybackSegment[],
+  globalTime: number,
+): { index: number; localTime: number } {
+  let accumulated = 0
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i]
+    const segDuration = seg.endTime - seg.startTime
+    if (globalTime < accumulated + segDuration || i === segments.length - 1) {
+      return { index: i, localTime: seg.startTime + (globalTime - accumulated) }
+    }
+    accumulated += segDuration
+  }
+  return { index: segments.length - 1, localTime: segments[segments.length - 1].endTime }
+}
+
+function buildTimeline(segments: PlaybackSegment[]): number[] {
+  const starts: number[] = []
+  let acc = 0
+  for (const seg of segments) {
+    starts.push(acc)
+    acc += seg.endTime - seg.startTime
+  }
+  return starts
+}
+
+export function useSegmentScheduler(segments: PlaybackSegment[]): SegmentSchedulerState {
+  const videoRefs = useRef<(HTMLVideoElement | null)[]>([])
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [currentSegmentIndex, setCurrentSegmentIndex] = useState(0)
+  const [isEnded, setIsEnded] = useState(false)
+  const rafRef = useRef(0)
+  const isSeekingRef = useRef(false)
+  const lastTimeUpdateRef = useRef(0)
+
+  // 所有动态值存入 ref，tick 始终读取最新值，不依赖闭包
+  const segIdxRef = useRef(0)
+  const segmentsRef = useRef(segments)
+  const timelineStartsData = useMemo(() => buildTimeline(segments), [segments])
+  const totalDurationData = useMemo(
+    () => segments.reduce((sum, seg) => sum + (seg.endTime - seg.startTime), 0),
+    [segments],
+  )
+  const timelineStartsRef = useRef(timelineStartsData)
+  const totalDurationRef = useRef(totalDurationData)
+  const isPlayingRef = useRef(false)
+
+  segmentsRef.current = segments
+  timelineStartsRef.current = timelineStartsData
+  totalDurationRef.current = totalDurationData
+
+  const canPlay = segments.length > 0
+
+  useEffect(() => {
+    segIdxRef.current = currentSegmentIndex
+  }, [currentSegmentIndex])
+
+  useEffect(() => {
+    isPlayingRef.current = isPlaying
+  }, [isPlaying])
+
+  const waitForReady = useCallback((video: HTMLVideoElement, timeout = 3000): Promise<void> => {
+    if (video.readyState >= 3) return Promise.resolve()
+    return new Promise((resolve) => {
+      const onCanPlay = () => {
+        video.removeEventListener("canplay", onCanPlay)
+        clearTimeout(timer)
+        resolve()
+      }
+      const timer = setTimeout(() => {
+        video.removeEventListener("canplay", onCanPlay)
+        resolve()
+      }, timeout)
+      video.addEventListener("canplay", onCanPlay)
+    })
+  }, [])
+
+  const switchToSegment = useCallback(
+    async (index: number, seekToLocalTime?: number) => {
+      const segs = segmentsRef.current
+      const video = videoRefs.current[index]
+      if (!video || index >= segs.length) return
+
+      const seg = segs[index]
+      const localTime = seekToLocalTime ?? seg.startTime
+      const oldIdx = segIdxRef.current
+      const oldVideo = videoRefs.current[oldIdx]
+
+      if (oldVideo && oldVideo !== video) oldVideo.pause()
+
+      if (!video.src && seg.videoUrl) {
+        video.src = seg.videoUrl
+        video.load()
+      }
+
+      if (Math.abs(video.currentTime - localTime) > 0.05) {
+        video.currentTime = localTime
+      }
+      // #1754：按比例调速（配音时长≠clips 总时长时的前端兜底）
+      const rate = seg.playbackRate || 1
+      if (Math.abs(video.playbackRate - rate) > 0.01) {
+        video.playbackRate = rate
+      }
+
+      segIdxRef.current = index
+      setCurrentSegmentIndex(index)
+
+      await waitForReady(video)
+    },
+    [waitForReady],
+  )
+
+  // 稳定的 tick 函数，空依赖，所有值从 ref 读取
+  const tick = useCallback(() => {
+    const segs = segmentsRef.current
+    const idx = segIdxRef.current
+    const video = videoRefs.current[idx]
+
+    if (!video || isSeekingRef.current) {
+      rafRef.current = requestAnimationFrame(tick)
+      return
+    }
+
+    const seg = segs[idx]
+    if (!seg) return
+
+    // 预加载下一个片段
+    const nextIndex = idx + 1
+    if (nextIndex < segs.length) {
+      const nextVideo = videoRefs.current[nextIndex]
+      if (nextVideo) {
+        const timeToEnd = seg.endTime - video.currentTime
+        if (timeToEnd <= 2 && nextVideo.readyState < 3) {
+          const nextSeg = segs[nextIndex]
+          if (Math.abs(nextVideo.currentTime - nextSeg.startTime) > 0.5) {
+            nextVideo.currentTime = nextSeg.startTime
+          }
+        }
+      }
+    }
+
+    // 检测片段边界
+    if (video.currentTime >= seg.endTime - 0.1) {
+      if (nextIndex < segs.length) {
+        const nextVideo = videoRefs.current[nextIndex]
+        const nextSeg = segs[nextIndex]
+        const accumulatedTime =
+          (timelineStartsRef.current[idx] || 0) + (seg.endTime - seg.startTime)
+
+        if (nextVideo) {
+          if (Math.abs(nextVideo.currentTime - nextSeg.startTime) > 0.1) {
+            nextVideo.currentTime = nextSeg.startTime
+          }
+          // 先启动下一个视频（muted，可安全同时播放）
+          nextVideo
+            .play()
+            .catch((e) => console.warn("[useSegmentScheduler] next segment play failed:", e))
+        }
+
+        // 立即切换可见性
+        segIdxRef.current = nextIndex
+        setCurrentSegmentIndex(nextIndex)
+        setCurrentTime(accumulatedTime)
+        lastTimeUpdateRef.current = 0
+        setIsPlaying(true)
+
+        // 下一帧暂停旧视频（让新视频先渲染，避免冻屏）
+        const oldVideo = video
+        requestAnimationFrame(() => {
+          oldVideo.pause()
+        })
+
+        rafRef.current = requestAnimationFrame(tick)
+        return
+      } else {
+        video.pause()
+        setIsPlaying(false)
+        setIsEnded(true)
+        setCurrentTime(totalDurationRef.current)
+        return
+      }
+    }
+
+    const globalTime = (timelineStartsRef.current[idx] || 0) + (video.currentTime - seg.startTime)
+    const now = performance.now()
+    if (now - lastTimeUpdateRef.current >= 200) {
+      lastTimeUpdateRef.current = now
+      setCurrentTime(Math.max(0, Math.min(globalTime, totalDurationRef.current)))
+    }
+
+    rafRef.current = requestAnimationFrame(tick)
+  }, [])
+
+  const play = useCallback(async () => {
+    if (!canPlay) return
+    setIsEnded(false)
+    const idx = segIdxRef.current
+    const video = videoRefs.current[idx]
+    if (!video) return
+
+    if (idx === 0 && video.readyState < 2) {
+      if (!video.src && segmentsRef.current[0]?.videoUrl) {
+        video.src = segmentsRef.current[0].videoUrl
+        video.load()
+      }
+      await waitForReady(video)
+    }
+
+    // 播放前 seek 到片段起始时间，确保 progress 计算正确
+    const seg = segmentsRef.current[idx]
+    if (seg && Math.abs(video.currentTime - seg.startTime) > 0.1) {
+      video.currentTime = seg.startTime
+    }
+
+    // #1754：调速
+    const rate = seg?.playbackRate || 1
+    if (Math.abs(video.playbackRate - rate) > 0.01) {
+      video.playbackRate = rate
+    }
+
+    try {
+      await video.play()
+      setIsPlaying(true)
+      cancelAnimationFrame(rafRef.current)
+      rafRef.current = requestAnimationFrame(tick)
+    } catch (err) {
+      console.warn("[useSegmentScheduler] 播放失败:", err)
+    }
+  }, [canPlay, waitForReady, tick])
+
+  const pause = useCallback(() => {
+    const video = videoRefs.current[segIdxRef.current]
+    if (video) video.pause()
+    setIsPlaying(false)
+    cancelAnimationFrame(rafRef.current)
+  }, [])
+
+  const togglePlayPause = useCallback(() => {
+    if (isPlayingRef.current) {
+      pause()
+    } else {
+      if (isEnded) {
+        setIsEnded(false)
+        lastTimeUpdateRef.current = 0
+        const firstVideo = videoRefs.current[0]
+        if (firstVideo) {
+          videoRefs.current.forEach((v, i) => {
+            if (v && i !== 0) v.pause()
+          })
+          firstVideo.currentTime = segmentsRef.current[0]?.startTime || 0
+          segIdxRef.current = 0
+          setCurrentSegmentIndex(0)
+          setCurrentTime(0)
+          firstVideo
+            .play()
+            .then(() => {
+              setIsPlaying(true)
+              cancelAnimationFrame(rafRef.current)
+              rafRef.current = requestAnimationFrame(tick)
+            })
+            .catch((e) => console.warn("[useSegmentScheduler] restart failed:", e))
+        }
+      } else {
+        play()
+      }
+    }
+  }, [isEnded, pause, play, tick])
+
+  const seekTo = useCallback(
+    async (time: number) => {
+      if (!canPlay) return
+      const clampedTime = Math.max(0, Math.min(time, totalDurationRef.current))
+      const { index, localTime } = findSegmentAtTime(segmentsRef.current, clampedTime)
+
+      isSeekingRef.current = true
+      cancelAnimationFrame(rafRef.current)
+
+      if (index !== segIdxRef.current) {
+        await switchToSegment(index, localTime)
+      } else {
+        const video = videoRefs.current[index]
+        if (video) video.currentTime = localTime
+      }
+
+      setCurrentTime(clampedTime)
+      setIsEnded(false)
+      lastTimeUpdateRef.current = 0
+
+      if (isPlayingRef.current) {
+        const video = videoRefs.current[index]
+        if (video) {
+          video.play().catch(() => {})
+        }
+        rafRef.current = requestAnimationFrame(tick)
+      }
+
+      setTimeout(() => {
+        isSeekingRef.current = false
+      }, 200)
+    },
+    [canPlay, switchToSegment, tick],
+  )
+
+  useEffect(() => {
+    videoRefs.current = videoRefs.current.slice(0, segments.length)
+    while (videoRefs.current.length < segments.length) {
+      videoRefs.current.push(null)
+    }
+  }, [segments])
+
+  useEffect(() => {
+    return () => {
+      cancelAnimationFrame(rafRef.current)
+    }
+  }, [])
+
+  useEffect(() => {
+    cancelAnimationFrame(rafRef.current)
+    segIdxRef.current = 0
+    setIsPlaying(false)
+    setCurrentTime(0)
+    setCurrentSegmentIndex(0)
+    setIsEnded(false)
+  }, [segments])
+
+  const currentSegment = segments[currentSegmentIndex] || null
+  const segmentLocalTime = currentSegment
+    ? currentTime - (timelineStartsRef.current[currentSegmentIndex] || 0) + currentSegment.startTime
+    : 0
+
+  return {
+    isPlaying,
+    currentTime,
+    totalDuration: totalDurationData,
+    currentSegmentIndex,
+    segmentLocalTime,
+    isEnded,
+    canPlay,
+    play,
+    pause,
+    togglePlayPause,
+    seekTo,
+    videoRefs,
+  }
+}
+
+export default useSegmentScheduler

apps/web/src/pages/generate/hooks/useStep4Title/index.ts

@@ -1,8 +1,9 @@
-import { useEffect } from "react"
+import { useEffect, useRef } from "react"
 import { useQuery } from "@tanstack/react-query"
 // #1894: 标题候选从文案库 scripts[].title 获取，不再调用废弃的 /api/titles
 import { getScripts } from "@/api/scripts"
 import type { TitleSettings } from "../../types"
+import { useAiTitleGenerator } from "./useAiTitleGenerator"
 import { useTitleStyleUpdaters } from "./useTitleStyleUpdaters"
 import { useDraftAutoSave } from "../useDraftAutoSave"
 
@@ -15,7 +16,7 @@ interface UseStep4TitleProps {
 
 /**
  * Step 4 标题设置 Hook
- * 封装标题样式设置等逻辑
+ * 封装 AI 标题生成、标题样式设置等逻辑
  */
 export function useStep4Title({
   titleSettings,
@@ -33,9 +34,26 @@ export function useStep4Title({
     staleTime: 30_000,
   })
 
+  // AI 标题生成
+  const {
+    aiTitleInput,
+    setAiTitleInput,
+    aiTitleGenerating,
+    aiTitleResults,
+    hasGeneratedTitles,
+    handleGenerateAiTitles,
+    handleSelectAiTitle,
+    handleRefreshAiTitles,
+    autoGenerateTitle,
+  } = useAiTitleGenerator({ titleSettings, onTitleSettingsChange })
+
   // 样式更新
   const styleUpdaters = useTitleStyleUpdaters({ titleSettings, onTitleSettingsChange })
 
+  // 追踪 AI 自动选择开关的上一次值 & 是否首次挂载
+  const prevAiAutoSelect = useRef(titleSettings.aiAutoSelect)
+  const isFirstMount = useRef(true)
+
   /* ── Step4 标题内容/样式变化后自动保存草稿（防抖 800ms，失败静默） ── */
   const { scheduleSave: scheduleTitleSave } = useDraftAutoSave(selectedTemplate)
   useEffect(() => {
@@ -68,12 +86,40 @@ export function useStep4Title({
     scheduleTitleSave,
   ])
 
+  // 当 AI 自动选择开关打开时，自动生成/选择一个标题填入
+  // 首次挂载时如果开关已经是 true 且无标题，也需要触发
+  useEffect(() => {
+    if (isFirstMount.current) {
+      isFirstMount.current = false
+      if (titleSettings.aiAutoSelect && !titleSettings.title) {
+        autoGenerateTitle()
+      }
+      prevAiAutoSelect.current = titleSettings.aiAutoSelect
+      return
+    }
+    if (titleSettings.aiAutoSelect && !prevAiAutoSelect.current && !titleSettings.title) {
+      autoGenerateTitle()
+    }
+    prevAiAutoSelect.current = titleSettings.aiAutoSelect
+  }, [titleSettings.aiAutoSelect, titleSettings.title, autoGenerateTitle])
+
   return {
     // 数据
     userTitles,
     titleSettings,
+    // AI 标题状态
+    aiTitleInput,
+    setAiTitleInput,
+    aiTitleGenerating,
+    aiTitleResults,
+    hasGeneratedTitles,
     activePreset: styleUpdaters.activePreset,
     titlePresets: styleUpdaters.titlePresets,
+    // AI 标题操作
+    handleGenerateAiTitles,
+    handleSelectAiTitle,
+    handleRefreshAiTitles,
+    autoGenerateTitle,
     // 标题设置操作
     updateTitle: styleUpdaters.updateTitle,
     toggleAiAutoSelect: styleUpdaters.toggleAiAutoSelect,

apps/web/src/pages/generate/hooks/useStep4Title/useAiTitleGenerator.ts

@@ -0,0 +1,124 @@
+import { useState, useCallback } from "react"
+import { message } from "antd"
+import { AI_TITLE_TEMPLATES } from "../../constants"
+import type { TitleSettings } from "../../types"
+
+export interface AiTitleItem {
+  title: string
+  highlight: string
+  style: "catchy" | "emotional" | "informative"
+}
+
+interface UseAiTitleGeneratorOptions {
+  titleSettings: TitleSettings
+  onTitleSettingsChange: (settings: TitleSettings) => void
+}
+
+/**
+ * AI 标题生成 Hook
+ * 封装 AI 标题生成、刷新、选择等逻辑
+ */
+export function useAiTitleGenerator({
+  titleSettings,
+  onTitleSettingsChange,
+}: UseAiTitleGeneratorOptions) {
+  const [aiTitleInput, setAiTitleInput] = useState("")
+  const [aiTitleGenerating, setAiTitleGenerating] = useState(false)
+  const [aiTitleResults, setAiTitleResults] = useState<AiTitleItem[]>([])
+  const [hasGeneratedTitles, setHasGeneratedTitles] = useState(false)
+
+  const extractTopic = (text: string): string => {
+    const keywords = text
+      .replace(/[，。！？、,.!?]/g, " ")
+      .split(/\s+/)
+      .filter(Boolean)
+    if (keywords.length === 0) return "这个话题"
+    return keywords.slice(0, 3).join("")
+  }
+
+  const generateTitlesFromTopic = (topic: string): AiTitleItem[] => {
+    const results: AiTitleItem[] = []
+    const styles: Array<"catchy" | "emotional" | "informative"> = [
+      "catchy",
+      "emotional",
+      "informative",
+    ]
+    const highlights = { catchy: "吸睛标题", emotional: "情感共鸣", informative: "知识干货" }
+    styles.forEach((style) => {
+      const templates = AI_TITLE_TEMPLATES[style]
+      const shuffled = [...templates].sort(() => Math.random() - 0.5).slice(0, 2)
+      shuffled.forEach((tpl) => {
+        results.push({
+          title: tpl.replace(/\{topic\}/g, topic),
+          highlight: highlights[style],
+          style,
+        })
+      })
+    })
+    results.sort(() => Math.random() - 0.5)
+    return results
+  }
+
+  const handleGenerateAiTitles = useCallback(async () => {
+    if (!aiTitleInput.trim()) {
+      message.warning("请先输入视频描述或关键词")
+      return
+    }
+    setAiTitleGenerating(true)
+    setHasGeneratedTitles(true)
+    await new Promise((resolve) => setTimeout(resolve, 1200))
+    const topic = extractTopic(aiTitleInput)
+    setAiTitleResults(generateTitlesFromTopic(topic))
+    setAiTitleGenerating(false)
+  }, [aiTitleInput])
+
+  /**
+   * 自动生成标题（供 AI 自动选择开关使用）
+   * 如果已有生成结果，直接从中选一个；否则用默认关键词生成
+   */
+  const autoGenerateTitle = useCallback((): string => {
+    if (aiTitleResults.length > 0) {
+      const picked = aiTitleResults[Math.floor(Math.random() * aiTitleResults.length)]
+      if (!picked) return ""
+      onTitleSettingsChange({ ...titleSettings, title: picked.title })
+      return picked.title
+    }
+    // 没有已有结果，用默认关键词生成
+    const results = generateTitlesFromTopic("短视频")
+    setAiTitleResults(results)
+    setHasGeneratedTitles(true)
+    const picked = results[Math.floor(Math.random() * results.length)]
+    if (!picked) return ""
+    onTitleSettingsChange({ ...titleSettings, title: picked.title })
+    return picked.title
+  }, [aiTitleResults, titleSettings, onTitleSettingsChange])
+
+  const handleSelectAiTitle = useCallback(
+    (title: string) => {
+      onTitleSettingsChange({ ...titleSettings, title })
+      message.success("已选用此标题")
+    },
+    [titleSettings, onTitleSettingsChange],
+  )
+
+  const handleRefreshAiTitles = useCallback(async () => {
+    if (!aiTitleInput.trim()) return
+    setAiTitleGenerating(true)
+    await new Promise((resolve) => setTimeout(resolve, 800))
+    const topic = extractTopic(aiTitleInput)
+    setAiTitleResults(generateTitlesFromTopic(topic))
+    setAiTitleGenerating(false)
+  }, [aiTitleInput])
+
+  return {
+    aiTitleInput,
+    setAiTitleInput,
+    aiTitleGenerating,
+    aiTitleResults,
+    hasGeneratedTitles,
+    handleGenerateAiTitles,
+    handleSelectAiTitle,
+    handleRefreshAiTitles,
+    autoGenerateTitle,
+  }
+}

apps/web/src/pages/generate/hooks/useStep4Title/useTitleStyleUpdaters.ts

@@ -1,7 +1,5 @@
 import { useCallback, useMemo } from "react"
 import { TITLE_PRESETS } from "../../constants"
-import { TITLE_PRESETS as NEW_TITLE_PRESETS } from "@/components/title/constants"
-import { titleStyleConfigToCamel } from "@/components/title/utils"
 import type { TitleSettings } from "../../types"
 
 interface UseTitleStyleUpdatersOptions {
@@ -17,24 +15,8 @@ export function useTitleStyleUpdaters({
   titleSettings,
   onTitleSettingsChange,
 }: UseTitleStyleUpdatersOptions) {
-  /** 匹配预设：对新预设（snake→camel 后）全字段比；旧预设只比 color/bold/italic/stroke/shadow */
+  /** 匹配预设：只用 color/bold/italic/stroke/shadow，不再匹配 size */
   const getActivePreset = (settings: TitleSettings): string | null => {
-    // 新预设匹配：font/size/color/bold/stroke/shadow/bg 全部对齐才算命中
-    for (const p of NEW_TITLE_PRESETS) {
-      const camel = titleStyleConfigToCamel(p.style)
-      if (
-        (camel.font ?? null) === (settings.font ?? null) &&
-        (camel.color ?? null) === (settings.color ?? null) &&
-        (camel.bold ?? null) === (settings.bold ?? null) &&
-        (camel.italic ?? null) === (settings.italic ?? null) &&
-        (camel.stroke ?? null) === (settings.stroke ?? null) &&
-        (camel.shadow ?? null) === (settings.shadow ?? null) &&
-        (camel.bgEnabled ?? null) === (settings.bgEnabled ?? null)
-      ) {
-        return p.key
-      }
-    }
-    // fallback 旧预设（legacy）
     for (const p of TITLE_PRESETS) {
       if (
         settings.color === p.style.color &&
@@ -108,95 +90,33 @@ export function useTitleStyleUpdaters({
   }, [titleSettings, onTitleSettingsChange])
 
   const toggleStroke = useCallback(() => {
-    onTitleSettingsChange({
-      ...titleSettings,
-      stroke: !titleSettings.stroke,
-      // 开启描边时若宽度过小给个默认值（让滑块可见可调）
-      strokeWidth:
-        !titleSettings.stroke && (titleSettings.strokeWidth ?? 0) < 2
-          ? 4
-          : titleSettings.strokeWidth,
-    })
+    onTitleSettingsChange({ ...titleSettings, stroke: !titleSettings.stroke })
   }, [titleSettings, onTitleSettingsChange])
 
   const toggleShadow = useCallback(() => {
     onTitleSettingsChange({ ...titleSettings, shadow: !titleSettings.shadow })
   }, [titleSettings, onTitleSettingsChange])
 
-  /** 应用预设：正确把 snake_case 的 preset.style 转为 camelCase 再 spread */
+  /** 应用预设：只覆盖 color/bold/italic/stroke/shadow，不改变字号 */
   const applyPreset = useCallback(
     (presetKey: string) => {
-      const newPreset = NEW_TITLE_PRESETS.find((p) => p.key === presetKey)
-      const oldPreset = TITLE_PRESETS.find((p) => p.key === presetKey)
-      if (newPreset) {
-        onTitleSettingsChange({
-          ...titleSettings,
-          ...titleStyleConfigToCamel(newPreset.style),
-          // 封面独立标题保持不变（不清空，避免破坏封面定制）
-          lineOverrides: [],
-        })
-        return
-      }
-      if (!oldPreset) return
+      const preset = TITLE_PRESETS.find((p) => p.key === presetKey)
+      if (!preset) return
       onTitleSettingsChange({
         ...titleSettings,
-        color: oldPreset.style.color as string,
-        bold: oldPreset.style.bold as boolean,
-        italic: oldPreset.style.italic as boolean,
-        stroke: oldPreset.style.stroke as boolean,
-        shadow: oldPreset.style.shadow as boolean,
+        color: preset.style.color,
+        bold: preset.style.bold,
+        italic: preset.style.italic,
+        stroke: preset.style.stroke,
+        shadow: preset.style.shadow,
       })
     },
     [titleSettings, onTitleSettingsChange],
   )
 
-  /** 应用模板：用模板（camelCase TitleSettings）覆盖样式字段，保留 title/aiAutoSelect */
-  const applyTemplate = useCallback(
-    (tpl: TitleSettings) => {
-      onTitleSettingsChange({
-        ...titleSettings,
-        // 覆盖样式字段
-        position: tpl.position,
-        posX: tpl.posX,
-        posY: tpl.posY,
-        font: tpl.font,
-        size: tpl.size,
-        bold: tpl.bold,
-        italic: tpl.italic,
-        stroke: tpl.stroke,
-        shadow: tpl.shadow,
-        color: tpl.color,
-        lineHeight: tpl.lineHeight,
-        marginTop: tpl.marginTop,
-        maxCharsPerLine: tpl.maxCharsPerLine,
-        strokeWidth: tpl.strokeWidth,
-        strokeColor: tpl.strokeColor,
-        shadowOffsetX: tpl.shadowOffsetX,
-        shadowOffsetY: tpl.shadowOffsetY,
-        shadowBlur: tpl.shadowBlur,
-        shadowColor: tpl.shadowColor,
-        bgEnabled: tpl.bgEnabled,
-        bgColor: tpl.bgColor,
-        bgPadding: tpl.bgPadding,
-        bgRadius: tpl.bgRadius,
-        lineOverrides: [],
-        // coverTitle 保留用户当前值，不强制覆盖
-      })
-    },
-    [titleSettings, onTitleSettingsChange],
-  )
-
-  /** 通用字段更新（patch） */
-  const updateStyle = useCallback(
-    (patch: Partial<TitleSettings>) => {
-      onTitleSettingsChange({ ...titleSettings, ...patch })
-    },
-    [titleSettings, onTitleSettingsChange],
-  )
-
   return {
     activePreset,
-    titlePresets: NEW_TITLE_PRESETS,
+    titlePresets: TITLE_PRESETS,
     updateTitle,
     toggleAiAutoSelect,
     updatePosition,
@@ -209,7 +129,5 @@ export function useTitleStyleUpdaters({
     toggleStroke,
     toggleShadow,
     applyPreset,
-    applyTemplate,
-    updateStyle,
   }
 }

apps/web/src/pages/generate/hooks/useStep6Cover.ts

@@ -19,7 +19,7 @@ import {
 interface UseStep6CoverProps {
   coverSettings: CoverConfig
   onCoverSettingsChange: (settings: CoverConfig) => void
-  /** 当前选中的视频模板 ID（封面模板由本地 state 管理） */
+  /** 当前选中的模板 ID */
   selectedTemplate?: string
   /** Step4 标题设置，用于封面叠加标题 */
   titleSettings?: TitleSettings
@@ -30,7 +30,7 @@ interface UseStep6CoverProps {
 export function useStep6Cover({
   coverSettings,
   onCoverSettingsChange,
-  selectedTemplate: _selectedTemplate = "",
+  selectedTemplate = "",
   titleSettings,
   generatedVideos,
 }: UseStep6CoverProps) {
@@ -79,8 +79,7 @@ export function useStep6Cover({
       return
     }
 
-    const activeCoverTemplateId = selectedTemplateId || "default"
-    if (!activeCoverTemplateId) {
+    if (!selectedTemplate) {
       message.error("请先选择模板")
       return
     }
@@ -96,7 +95,7 @@ export function useStep6Cover({
     }, 300000)
 
     try {
-      const response = await generateCover(activeCoverTemplateId, {
+      const response = await generateCover(selectedTemplate, {
         generated_video_id: finalVideo.id,
         video_url: finalVideo.file_url || finalVideo.download_url || "",
         cover_type: "ai_frame",
@@ -157,7 +156,7 @@ export function useStep6Cover({
       setGenerating(false)
     }
   }, [
-    selectedTemplateId,
+    selectedTemplate,
     finalVideo,
     coverSettings,
     onCoverSettingsChange,

apps/web/src/pages/generate/hooks/useVariantVoicePreview.ts

@@ -0,0 +1,165 @@
+/**
+ * 批量变体配音预览音频解析（#1750）
+ *
+ * 独立配音模式下每个变体挂载各自的配音 URL：
+ * - 配音素材（voice 资产，有 file_url）→ 直接用素材文件 URL；
+ * - AI 音色（预置/克隆，无实体文件）→ 按该变体自己的标题调 /tts/preview 合成；
+ * - 共用模式下所有变体解析为同一条（等价于旧 previewVoiceAudioUrl）。
+ *
+ * N=1 不使用本 hook（单视频配音预览逻辑在 GeneratePage 内保持不变，零回归）。
+ */
+import { useEffect, useRef, useState } from "react"
+import { useQuery } from "@tanstack/react-query"
+import { getAssetsByKind } from "@/api/assets"
+import type { AssetItem } from "@/api/assets"
+import { previewTts } from "@/api/tts"
+
+interface UseVariantVoicePreviewOptions {
+  /** 是否批量模式（count>1） */
+  enabled: boolean
+  /** 变体数量 */
+  count: number
+  /** 是否每个视频独立配音 */
+  perVideo: boolean
+  /** 共用配音 ID（独立模式下为变体 0 的配音） */
+  sharedVoiceId: string
+  /** 克隆音色 ID 覆盖（共用模式，与旧逻辑一致：selectedClonedVoice || selectedVoice） */
+  clonedVoiceId?: string
+  /** 各变体独立配音 ID（独立模式）；长度不足时回退共用 */
+  variantVoiceIds: string[]
+  /** 各变体标题（TTS 合成文案源） */
+  titles: string[]
+}
+
+/** 稳定的空数组常量：避免 useQuery 数据未就绪时每次渲染产生新引用导致 effect 无限触发 */
+const EMPTY_VOICE_MATERIALS: AssetItem[] = []
+
+/** 判断配音 ID 是否对应实体素材（有 file_url）；否则视为 AI 音色需 TTS */
+function findMaterialUrl(id: string, materials: AssetItem[]): string | null {
+  if (!id) return null
+  const m = materials.find((x) => x.id === id)
+  return m?.file_url || null
+}
+
+export function useVariantVoicePreview({
+  enabled,
+  count,
+  perVideo,
+  sharedVoiceId,
+  clonedVoiceId = "",
+  variantVoiceIds,
+  titles,
+}: UseVariantVoicePreviewOptions): (string | null)[] {
+  const [urls, setUrls] = useState<(string | null)[]>([])
+  // 配音素材库：组件内部自取，避免调用方传入不稳定数组引用导致 effect 反复触发
+  const { data: voiceMaterialsData } = useQuery({
+    queryKey: ["assets", "voice"],
+    queryFn: () => getAssetsByKind("voice", { limit: 50 }),
+  })
+  const voiceMaterials: AssetItem[] = voiceMaterialsData ?? EMPTY_VOICE_MATERIALS
+  // 已缓存的 TTS 结果：key = `${voiceId}|${title}`，避免重复合成
+  const ttsCacheRef = useRef<Map<string, string>>(new Map())
+  // 在途请求 AbortController
+  const abortRef = useRef<AbortController | null>(null)
+  const seqRef = useRef(0)
+
+  useEffect(() => {
+    if (!enabled || count <= 1) {
+      setUrls((prev) => (prev.length === 0 ? prev : []))
+      return
+    }
+
+    const seq = ++seqRef.current
+    abortRef.current?.abort()
+    const controller = new AbortController()
+    abortRef.current = controller
+
+    // 每个变体实际使用的配音 ID
+    const voiceIds = Array.from({ length: count }, (_, i) =>
+      perVideo ? variantVoiceIds[i] || sharedVoiceId : sharedVoiceId,
+    )
+
+    // 先用素材 URL 同步填充；AI 音色位置先置 null，待 TTS 完成
+    const result: (string | null)[] = voiceIds.map((id, i) => {
+      const materialUrl = findMaterialUrl(id, voiceMaterials)
+      if (materialUrl) return materialUrl
+      // 共用模式下克隆音色 ID 可能与 selectedVoice 不同（与旧 useEffect 逻辑一致）
+      if (!perVideo && i === 0 && clonedVoiceId) {
+        return findMaterialUrl(clonedVoiceId, voiceMaterials)
+      }
+      return null
+    })
+
+    // 收集需要 TTS 的变体：无素材 URL 且有标题且有音色 ID
+    const ttsJobs: { index: number; voiceId: string; title: string }[] = []
+    voiceIds.forEach((id, i) => {
+      if (result[i]) return
+      // 共用模式沿用旧逻辑：voice_id = selectedClonedVoice || selectedVoice
+      const ttsVoiceId = !perVideo && i === 0 ? clonedVoiceId || id : id
+      const title = titles[i] || ""
+      if (!ttsVoiceId || !title) return
+      ttsJobs.push({ index: i, voiceId: ttsVoiceId, title })
+    })
+
+    setUrls((prev) =>
+      prev.length === result.length && prev.every((v, i) => v === result[i]) ? prev : result,
+    )
+
+    if (ttsJobs.length === 0) return
+
+    let cancelled = false
+    void (async () => {
+      // 串行 TTS，避免瞬间 N 个合成请求打爆后端
+      for (const job of ttsJobs) {
+        const cacheKey = `${job.voiceId}|${job.title}`
+        const cached = ttsCacheRef.current.get(cacheKey)
+        if (cached) {
+          if (seq === seqRef.current) {
+            setUrls((prev) => {
+              if (prev[job.index] === cached) return prev
+              const next = [...prev]
+              next[job.index] = cached
+              return next
+            })
+          }
+          continue
+        }
+        try {
+          const res = await previewTts({ text: job.title, voice_id: job.voiceId })
+          if (cancelled || controller.signal.aborted || seq !== seqRef.current) return
+          const audioUrl = res.audio_url || ""
+          if (audioUrl) {
+            ttsCacheRef.current.set(cacheKey, audioUrl)
+            setUrls((prev) => {
+              if (prev[job.index] === audioUrl) return prev
+              const next = [...prev]
+              next[job.index] = audioUrl
+              return next
+            })
+          }
+        } catch (err) {
+          if (cancelled || controller.signal.aborted || seq !== seqRef.current) return
+          console.warn(`[变体${job.index + 1}预览配音生成失败]`, err)
+        }
+      }
+    })()
+
+    return () => {
+      cancelled = true
+      controller.abort()
+    }
+  }, [
+    enabled,
+    count,
+    perVideo,
+    sharedVoiceId,
+    clonedVoiceId,
+    variantVoiceIds,
+    titles,
+    voiceMaterials,
+  ])
+
+  return urls
+}
+
+export default useVariantVoicePreview

apps/web/src/pages/generate/types.ts

@@ -3,9 +3,8 @@
  */
 
 import type { AssetItem } from "@/api/assets"
-import type { TitleLineOverride } from "@/components/title/types"
 
-/* ── 标题设置（#2001 升级：新增描边/阴影/背景/逐行/封面独立样式/排版字段） ── */
+/* ── 标题设置 ── */
 export interface TitleSettings {
   aiAutoSelect: boolean
   title: string
@@ -20,58 +19,6 @@ export interface TitleSettings {
   /** 自由位置坐标（PlayRes 像素），仅当 position="custom" 时有效 */
   posX: number | null
   posY: number | null
-
-  /* ── 排版（P0） ── */
-  /** 行距倍数，默认 1.2 */
-  lineHeight: number
-  /** 顶部边距（position=top，px @720p） */
-  marginTop: number
-  /** 每行最大字符数（4-20），0=不自动换行 */
-  maxCharsPerLine: number
-
-  /* ── 描边参数化（P0） ── */
-  strokeWidth: number
-  strokeColor: string
-
-  /* ── 阴影参数化（P1） ── */
-  shadowOffsetX: number
-  shadowOffsetY: number
-  shadowBlur: number
-  shadowColor: string
-
-  /* ── 背景色块（P1） ── */
-  bgEnabled: boolean
-  bgColor: string
-  bgPadding: number
-  bgRadius: number
-
-  /* ── 逐行独立样式（P1） ── */
-  lineOverrides: TitleLineOverride[]
-
-  /* ── 封面独立标题（P1）：null=沿用主标题 ── */
-  coverTitle: null | {
-    title?: string
-    font?: string
-    size?: number
-    color?: string
-    bold?: boolean
-    italic?: boolean
-    position?: string
-    stroke?: boolean
-    strokeWidth?: number
-    strokeColor?: string
-    shadow?: boolean
-    shadowOffsetX?: number
-    shadowOffsetY?: number
-    shadowBlur?: number
-    shadowColor?: string
-    bgEnabled?: boolean
-    bgColor?: string
-    bgPadding?: number
-    bgRadius?: number
-    lineHeight?: number
-    maxCharsPerLine?: number
-  }
 }
 
 /* ── 智能匹配结果 ── */
@@ -81,6 +28,14 @@ export interface SmartMatchResult {
   reasons: string[]
 }
 
+/* ── AI 标题结果 ── */
+export interface AiTitleResult {
+  title: string
+  style: string
+  styleLabel: string
+  highlights: string[]
+}
+
 /* ── 配音推荐结果 ── */
 export interface VoiceRecommendation {
   voiceId: string
@@ -94,33 +49,28 @@ export interface StepDef {
   label: string
 }
 
-/** 旧版 TitleSettings 的默认值字段（P0/P1 新字段补齐默认值） */
-export const DEFAULT_TITLE_SETTINGS_FULL: TitleSettings = {
-  aiAutoSelect: false,
-  title: "",
-  position: "top",
-  font: "思源黑体",
-  size: 28,
-  bold: true,
-  italic: false,
-  stroke: true,
-  shadow: false,
-  color: "#ffffff",
-  posX: null,
-  posY: null,
-  lineHeight: 1.2,
-  marginTop: 24,
-  maxCharsPerLine: 0,
-  strokeWidth: 4,
-  strokeColor: "#000000",
-  shadowOffsetX: 2,
-  shadowOffsetY: 2,
-  shadowBlur: 4,
-  shadowColor: "rgba(0,0,0,0.8)",
-  bgEnabled: false,
-  bgColor: "rgba(0,0,0,0.5)",
-  bgPadding: 12,
-  bgRadius: 8,
-  lineOverrides: [],
-  coverTitle: null,
+/* ── 标题预设样式 ── */
+export interface TitlePresetStyle {
+  size: number
+  color: string
+  bold: boolean
+  italic: boolean
+  stroke: boolean
+  shadow: boolean
+}
+
+export interface TitlePreset {
+  key: string
+  label: string
+  style: TitlePresetStyle
+  previewStyle: Record<string, string | number>
+}
+
+/* ── 生成结果视频 ── */
+export interface GeneratedVideoResult {
+  id: string
+  url: string
+  thumbnail: string
+  duration: number
+  title: string
 }

apps/web/src/pages/voice-materials/VoiceMaterialLibrary.tsx

@@ -98,7 +98,6 @@ const VoiceMaterialLibrary: React.FC = () => {
     ttsText,
     ttsVoiceId,
     ttsSpeed,
-    ttsStyle,
     ttsStatus,
     ttsAudioUrl,
     ttsError,
@@ -108,7 +107,6 @@ const VoiceMaterialLibrary: React.FC = () => {
     setTtsText,
     setTtsVoiceId,
     setTtsSpeed,
-    setTtsStyle,
     handleTtsSynthesize,
     handleTtsSave,
     handleTtsClose,
@@ -317,7 +315,6 @@ const VoiceMaterialLibrary: React.FC = () => {
           text={ttsText}
           voiceId={ttsVoiceId}
           speed={ttsSpeed}
-          style={ttsStyle}
           status={ttsStatus}
           audioUrl={ttsAudioUrl ?? ""}
           error={ttsError ?? ""}
@@ -327,7 +324,6 @@ const VoiceMaterialLibrary: React.FC = () => {
           onTextChange={setTtsText}
           onVoiceChange={setTtsVoiceId}
           onSpeedChange={setTtsSpeed}
-          onStyleChange={setTtsStyle}
           onSynthesize={handleTtsSynthesize}
           onSave={handleTtsSave}
         />

apps/web/src/pages/voice-materials/components/TtsModal.tsx

@@ -1,8 +1,6 @@
 import React from "react"
 import { RobotOutlined, LoadingOutlined, PlusOutlined } from "@ant-design/icons"
 import { Button } from "@/components/ui"
-import TtsStyleSelector from "@/components/voice/TtsStyleSelector"
-import type { TtsStyle } from "@/api/tts/styles"
 
 export type TtsStatus = "idle" | "synthesizing" | "done" | "error"
 
@@ -22,8 +20,6 @@ interface TtsModalProps {
   text: string
   voiceId: string
   speed: number
-  style: TtsStyle
-  onStyleChange: (style: TtsStyle) => void
   status: TtsStatus
   audioUrl: string
   error: string
@@ -43,8 +39,6 @@ const TtsModal: React.FC<TtsModalProps> = ({
   text,
   voiceId,
   speed,
-  style,
-  onStyleChange,
   status,
   audioUrl,
   error,
@@ -149,9 +143,6 @@ const TtsModal: React.FC<TtsModalProps> = ({
         />
       </div>
 
-      {/* 配音风格 */}
-      <TtsStyleSelector value={style} onChange={onStyleChange} compact />
-
       {/* 合成按钮 */}
       <Button
         buttonType="primary"

apps/web/src/pages/voice-materials/hooks/useTtsSynthesize.ts

@@ -2,7 +2,6 @@ import { useState, useRef, useCallback, useEffect } from "react"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { message } from "antd"
 import { synthesizeSpeech, getTTSJobStatus, saveTtsToLibrary } from "@/api/tts"
-import { DEFAULT_TTS_STYLE, type TtsStyle } from "@/api/tts/styles"
 import { fetchPresetVoices, type PresetVoiceItem } from "@/api/voices"
 import { getVoiceClonesWithTotal, toVoiceClone } from "@/api/voice-clone"
 
@@ -19,7 +18,6 @@ export function useTtsSynthesize() {
   const [ttsText, setTtsText] = useState("")
   const [ttsVoiceId, setTtsVoiceId] = useState<string>("")
   const [ttsSpeed, setTtsSpeed] = useState(1.0)
-  const [ttsStyle, setTtsStyle] = useState<TtsStyle>(DEFAULT_TTS_STYLE)
   const [ttsJobId, setTtsJobId] = useState<string | null>(null)
   const [ttsStatus, setTtsStatus] = useState<TtsStatus>("idle")
   const [ttsAudioUrl, setTtsAudioUrl] = useState<string | null>(null)
@@ -61,7 +59,6 @@ export function useTtsSynthesize() {
         text: ttsText.trim(),
         voice_id: ttsVoiceId || undefined,
         speed: ttsSpeed,
-        style: ttsStyle,
       })
       setTtsJobId(resp.job_id)
 
@@ -92,7 +89,7 @@ export function useTtsSynthesize() {
       setTtsStatus("error")
       setTtsError(msg)
     }
-  }, [ttsText, ttsVoiceId, ttsSpeed, ttsStyle])
+  }, [ttsText, ttsVoiceId, ttsSpeed])
 
   /** 保存 TTS 结果到素材库 */
   const handleTtsSave = useCallback(async () => {
@@ -134,7 +131,6 @@ export function useTtsSynthesize() {
     ttsText,
     ttsVoiceId,
     ttsSpeed,
-    ttsStyle,
     ttsJobId,
     ttsStatus,
     ttsAudioUrl,
@@ -145,7 +141,6 @@ export function useTtsSynthesize() {
     setTtsText,
     setTtsVoiceId,
     setTtsSpeed,
-    setTtsStyle,
     handleTtsSynthesize,
     handleTtsSave,
     handleTtsClose,

apps/web/src/pages/voices/VoiceLibrary.tsx

@@ -133,7 +133,6 @@ const VoiceLibrary: React.FC = () => {
     ttsVoiceId,
     ttsSpeed,
     ttsEmotion,
-    ttsStyle,
     ttsLanguage,
     ttsStatus,
     ttsAudioUrl,
@@ -141,7 +140,6 @@ const VoiceLibrary: React.FC = () => {
     setTtsText,
     setTtsSpeed,
     setTtsEmotion,
-    setTtsStyle,
     setTtsLanguage,
     setTtsOpen,
     handleVoiceChange,
@@ -370,7 +368,6 @@ const VoiceLibrary: React.FC = () => {
         ttsVoiceId={ttsVoiceId}
         ttsSpeed={ttsSpeed}
         ttsEmotion={ttsEmotion}
-        ttsStyle={ttsStyle}
         ttsLanguage={ttsLanguage}
         ttsStatus={ttsStatus}
         ttsAudioUrl={ttsAudioUrl}
@@ -384,7 +381,6 @@ const VoiceLibrary: React.FC = () => {
         onTtsVoiceChange={handleVoiceChange}
         onTtsSpeedChange={setTtsSpeed}
         onTtsEmotionChange={setTtsEmotion}
-        onTtsStyleChange={setTtsStyle}
         onTtsLanguageChange={setTtsLanguage}
         onTtsSynthesize={handleTtsSynthesize}
         onTtsSave={handleTtsSave}

apps/web/src/pages/voices/components/TtsModal.tsx

@@ -9,7 +9,6 @@ import LanguageControl from "./tts-modal/LanguageControl"
 import SynthesizeButton from "./tts-modal/SynthesizeButton"
 import ErrorAlert from "./tts-modal/ErrorAlert"
 import ResultPanel from "./tts-modal/ResultPanel"
-import TtsStyleSelector from "@/components/voice/TtsStyleSelector"
 import { PRESET_TTS_LANGUAGE_OPTIONS, CLONE_TTS_LANGUAGE_OPTIONS } from "./tts-modal/constants"
 
 /** AI 配音弹窗 */
@@ -19,7 +18,6 @@ const TtsModal: React.FC<TtsModalProps> = ({
   ttsVoiceId,
   ttsSpeed,
   ttsEmotion,
-  ttsStyle,
   ttsLanguage,
   ttsStatus,
   ttsAudioUrl,
@@ -31,7 +29,6 @@ const TtsModal: React.FC<TtsModalProps> = ({
   onVoiceChange,
   onSpeedChange,
   onEmotionChange,
-  onStyleChange,
   onLanguageChange,
   onSynthesize,
   onSave,
@@ -75,7 +72,6 @@ const TtsModal: React.FC<TtsModalProps> = ({
           />
         </div>
         <SpeedControl speed={ttsSpeed} onChange={onSpeedChange} />
-        <TtsStyleSelector value={ttsStyle} onChange={onStyleChange} compact />
         <SynthesizeButton status={ttsStatus} text={ttsText} onClick={onSynthesize} />
         {ttsError && <ErrorAlert error={ttsError} />}
         {ttsStatus === "done" && ttsAudioUrl && (

apps/web/src/pages/voices/components/VoiceModals.tsx

@@ -7,7 +7,6 @@ import type { VoiceClone } from "@/api/voice-clone"
 import type { TtsStatus } from "./TtsModal"
 import type { TtsClonedVoiceOption } from "./tts-modal/VoiceSelector"
 import type { TtsEmotion, TtsLanguage } from "./tts-modal/constants"
-import type { TtsStyle } from "@/api/tts/styles"
 import CloneModal from "@/components/voice/CloneModal"
 import CloneDetailModal from "./CloneDetailModal"
 import UploadVoiceModal from "./UploadVoiceModal"
@@ -45,7 +44,6 @@ export interface VoiceModalsProps {
   ttsVoiceId: string
   ttsSpeed: number
   ttsEmotion: TtsEmotion
-  ttsStyle: TtsStyle
   ttsLanguage: TtsLanguage
   ttsStatus: TtsStatus
   ttsAudioUrl: string | null
@@ -58,7 +56,6 @@ export interface VoiceModalsProps {
   onTtsVoiceChange: (id: string) => void
   onTtsSpeedChange: (speed: number) => void
   onTtsEmotionChange: (emotion: TtsEmotion) => void
-  onTtsStyleChange: (style: TtsStyle) => void
   onTtsLanguageChange: (language: TtsLanguage) => void
   onTtsSynthesize: () => void
   onTtsSave: () => void
@@ -89,7 +86,6 @@ export const VoiceModals: React.FC<VoiceModalsProps> = ({
   ttsVoiceId,
   ttsSpeed,
   ttsEmotion,
-  ttsStyle,
   ttsLanguage,
   ttsStatus,
   ttsAudioUrl,
@@ -101,7 +97,6 @@ export const VoiceModals: React.FC<VoiceModalsProps> = ({
   onTtsVoiceChange,
   onTtsSpeedChange,
   onTtsEmotionChange,
-  onTtsStyleChange,
   onTtsLanguageChange,
   onTtsSynthesize,
   onTtsSave,
@@ -144,7 +139,6 @@ export const VoiceModals: React.FC<VoiceModalsProps> = ({
         ttsVoiceId={ttsVoiceId}
         ttsSpeed={ttsSpeed}
         ttsEmotion={ttsEmotion}
-        ttsStyle={ttsStyle}
         ttsLanguage={ttsLanguage}
         ttsStatus={ttsStatus}
         ttsAudioUrl={ttsAudioUrl}
@@ -156,7 +150,6 @@ export const VoiceModals: React.FC<VoiceModalsProps> = ({
         onVoiceChange={onTtsVoiceChange}
         onSpeedChange={onTtsSpeedChange}
         onEmotionChange={onTtsEmotionChange}
-        onStyleChange={onTtsStyleChange}
         onLanguageChange={onTtsLanguageChange}
         onSynthesize={onTtsSynthesize}
         onSave={onTtsSave}

apps/web/src/pages/voices/components/tts-modal/types.ts

@@ -1,7 +1,6 @@
 import { type PresetVoiceDisplay } from "@/pages/voices/types"
 import type { TtsClonedVoiceOption } from "./VoiceSelector"
 import type { TtsEmotion, TtsLanguage } from "./constants"
-import type { TtsStyle } from "@/api/tts/styles"
 
 export type TtsStatus = "idle" | "synthesizing" | "done" | "error"
 
@@ -11,7 +10,6 @@ export interface TtsModalProps {
   ttsVoiceId: string
   ttsSpeed: number
   ttsEmotion: TtsEmotion
-  ttsStyle: TtsStyle
   ttsLanguage: TtsLanguage
   ttsStatus: TtsStatus
   ttsAudioUrl: string | null
@@ -24,7 +22,6 @@ export interface TtsModalProps {
   onVoiceChange: (voiceId: string) => void
   onSpeedChange: (speed: number) => void
   onEmotionChange: (emotion: TtsEmotion) => void
-  onStyleChange: (style: TtsStyle) => void
   onLanguageChange: (language: TtsLanguage) => void
   onSynthesize: () => void
   onSave: () => void

apps/web/src/pages/voices/hooks/useTtsSynthesize.ts

@@ -11,7 +11,6 @@ import {
   type TtsEmotion,
   type TtsLanguage,
 } from "../components/tts-modal/constants"
-import { DEFAULT_TTS_STYLE, type TtsStyle } from "@/api/tts/styles"
 
 export type TtsStatus = "idle" | "synthesizing" | "done" | "error"
 
@@ -43,7 +42,6 @@ export function useTtsSynthesize({
   const [ttsVoiceId, setTtsVoiceId] = useState<string>("")
   const [ttsSpeed, setTtsSpeed] = useState(1.0)
   const [ttsEmotion, setTtsEmotion] = useState<TtsEmotion>(DEFAULT_TTS_EMOTION)
-  const [ttsStyle, setTtsStyle] = useState<TtsStyle>(DEFAULT_TTS_STYLE)
   const [ttsLanguage, setTtsLanguage] = useState<TtsLanguage>(DEFAULT_TTS_LANGUAGE)
   const [ttsJobId, setTtsJobId] = useState<string | null>(null)
   const [ttsStatus, setTtsStatus] = useState<TtsStatus>("idle")
@@ -85,7 +83,6 @@ export function useTtsSynthesize({
         voice_id: ttsVoiceId || undefined,
         speed: ttsSpeed,
         emotion: ttsEmotion,
-        style: ttsStyle,
         language: effectiveLang,
       })
       setTtsJobId(resp.job_id)
@@ -117,7 +114,7 @@ export function useTtsSynthesize({
       setTtsStatus("error")
       setTtsError(msg)
     }
-  }, [ttsText, ttsVoiceId, ttsSpeed, ttsEmotion, ttsStyle, ttsLanguage, clonedVoices])
+  }, [ttsText, ttsVoiceId, ttsSpeed, ttsEmotion, ttsLanguage, clonedVoices])
 
   /** 保存 TTS 结果到素材库 */
   const handleTtsSave = useCallback(async () => {
@@ -140,7 +137,6 @@ export function useTtsSynthesize({
     setTtsVoiceId("")
     setTtsSpeed(1.0)
     setTtsEmotion(DEFAULT_TTS_EMOTION)
-    setTtsStyle(DEFAULT_TTS_STYLE)
     setTtsLanguage(DEFAULT_TTS_LANGUAGE)
     setTtsStatus("idle")
     setTtsAudioUrl(null)
@@ -172,7 +168,6 @@ export function useTtsSynthesize({
     ttsVoiceId,
     ttsSpeed,
     ttsEmotion,
-    ttsStyle,
     ttsLanguage,
     ttsJobId,
     ttsStatus,
@@ -186,7 +181,6 @@ export function useTtsSynthesize({
     setTtsVoiceId,
     setTtsSpeed,
     setTtsEmotion,
-    setTtsStyle,
     setTtsLanguage,
     setTtsOpen,
     // 覆写 onVoiceChange（带语言回退）

apps/web/src/test/pages/generate/CanvasPreviewGrid.audio.test.tsx

@@ -0,0 +1,176 @@
+/**
+ * CanvasPreviewGrid 单测（Issue #1741 / #1750）
+ *
+ * 验证：
+ * - N=3 时每个变体都拿到各自的 voiceAudioUrls[i]（独立配音模式，null=TTS 合成中）
+ * - 每个变体都拿到各自的后端真实片段 variantClips[i]（serverClips），playToken 为 0 基变体序号
+ * - 每个变体都收到 activePlayToken / onPlayTokenChange（播放互斥接线）
+ * - 某个实例上报播放 → 所有实例的 activePlayToken 变为该实例（其他实例收到 token≠自身，自动暂停）
+ * - 实例上报暂停（null）→ 播放权释放
+ * - #1750 变体计划申请失败：渲染 role=alert 错误占位 ×N（严禁假数据/不渲染播放器），
+ *   「重试」按钮仅变体 0 卡片出现且点击触发 onRetryClips
+ * - #1750 加载态：渲染加载占位，不渲染播放器
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest"
+import { render, fireEvent, screen } from "@testing-library/react"
+import type { AssetItem } from "@/api/assets"
+import type { EditPlanClip } from "@/api/template-editor"
+
+const playerCalls = vi.hoisted(() => [] as Array<Record<string, unknown>>)
+
+vi.mock("@/pages/generate/components/FrontendPreviewPlayer", () => ({
+  default: (props: Record<string, unknown>) => {
+    playerCalls.push(props)
+    const token = props.playToken as number
+    const active = props.activePlayToken as number | null
+    const change = props.onPlayTokenChange as (t: number | null) => void
+    return (
+      <div data-testid={`player-${token}`}>
+        <span data-testid={`voice-${token}`}>{props.voiceAudioUrl ? "has-voice" : "no-voice"}</span>
+        <span data-testid={`token-${token}`}>{active == null ? "none" : String(active)}</span>
+        <button type="button" onClick={() => change(token)}>
+          play-{token}
+        </button>
+        <button type="button" onClick={() => change(null)}>
+          pause-{token}
+        </button>
+      </div>
+    )
+  },
+}))
+
+import CanvasPreviewGrid from "@/pages/generate/components/CanvasPreviewGrid"
+
+function makeAsset(id: string): AssetItem {
+  return {
+    id,
+    library_id: "lib-1",
+    name: `${id}.mp4`,
+    storage_key: `media/${id}.mp4`,
+    file_url: `https://cdn.example.com/${id}.mp4`,
+    mime_type: "video/mp4",
+    metadata: { duration: 10 },
+    duration: 10,
+  }
+}
+
+function makeClips(variant: number): EditPlanClip[] {
+  return ["a1", "a2"].map((assetId, order) => ({
+    id: `clip-v${variant}-${assetId}`,
+    plan_id: `plan-${variant}`,
+    clip_type: "main",
+    order,
+    asset_id: assetId,
+    text_content: "",
+    start_time: 0,
+    duration: 5,
+    transition_effect: "none",
+    transition_duration: 0,
+    playback_speed: 1,
+    status: "ready",
+    config: {},
+  }))
+}
+
+const titleSettings = {
+  size: 36,
+  font: "思源黑体",
+  color: "#fff",
+  position: "bottom" as const,
+  bold: false,
+  italic: false,
+  stroke: true,
+  shadow: false,
+  posX: null,
+  posY: null,
+}
+
+const variantClips: EditPlanClip[][] = [makeClips(0), makeClips(1), makeClips(2)]
+
+function renderGrid(overrides: Record<string, unknown> = {}) {
+  playerCalls.length = 0
+  return render(
+    <CanvasPreviewGrid
+      count={3}
+      assets={[makeAsset("a1"), makeAsset("a2"), makeAsset("a3")]}
+      videoRatio="9:16"
+      titles={["标题1", "标题2", "标题3"]}
+      titleSettings={titleSettings}
+      variantClips={variantClips}
+      voiceAudioUrls={["https://cdn.example.com/v0.mp3", null, "https://cdn.example.com/v2.mp3"]}
+      selectedIds={[0, 1, 2]}
+      onToggleSelect={() => {}}
+      {...overrides}
+    />,
+  )
+}
+
+describe("CanvasPreviewGrid 配音、真实片段与播放互斥 (#1741/#1750)", () => {
+  beforeEach(() => {
+    playerCalls.length = 0
+  })
+
+  it("N=3 时每个变体都拿到各自的配音 URL 与后端真实片段，playToken 为 0 基序号", () => {
+    renderGrid()
+    expect(playerCalls).toHaveLength(3)
+    playerCalls.forEach((p, i) => {
+      expect(p.playToken).toBe(i)
+      expect(p.serverClips).toBe(variantClips[i])
+      expect(p.variantTitle).toBe(`标题${i + 1}`)
+    })
+    // 独立配音：变体 0/2 有各自 URL；变体 1 为 null（TTS 合成中）→ 传 undefined
+    expect(playerCalls[0].voiceAudioUrl).toBe("https://cdn.example.com/v0.mp3")
+    expect(playerCalls[1].voiceAudioUrl).toBeUndefined()
+    expect(playerCalls[2].voiceAudioUrl).toBe("https://cdn.example.com/v2.mp3")
+    // 配音状态徽标
+    expect(screen.getByTestId("voice-0").textContent).toBe("has-voice")
+    expect(screen.getByTestId("voice-1").textContent).toBe("no-voice")
+    expect(screen.getByTestId("voice-2").textContent).toBe("has-voice")
+  })
+
+  it("每个变体都接线 activePlayToken / onPlayTokenChange", () => {
+    renderGrid()
+    playerCalls.forEach((p) => {
+      expect(p.activePlayToken).toBeNull()
+      expect(typeof p.onPlayTokenChange).toBe("function")
+    })
+  })
+
+  it("点击变体2播放：所有实例 activePlayToken 变为 1（0 基，其他实例自动暂停）", () => {
+    renderGrid()
+    fireEvent.click(screen.getByTestId("player-1").querySelector("button")!)
+    expect(screen.getByTestId("token-0").textContent).toBe("1")
+    expect(screen.getByTestId("token-1").textContent).toBe("1")
+    expect(screen.getByTestId("token-2").textContent).toBe("1")
+  })
+
+  it("正在播放实例上报暂停后，播放权释放（token 回 null）", () => {
+    renderGrid()
+    fireEvent.click(screen.getByTestId("player-2").querySelector("button")!)
+    expect(screen.getByTestId("token-0").textContent).toBe("2")
+
+    fireEvent.click(screen.getByTestId("player-2").querySelectorAll("button")[1])
+    expect(screen.getByTestId("token-2").textContent).toBe("none")
+  })
+
+  it("clipsError：每张卡片显示错误占位（role=alert）且不渲染任何播放器，重试按钮仅一个并触发回调", () => {
+    const onRetry = vi.fn()
+    renderGrid({ clipsError: true, onRetryClips: onRetry })
+    expect(screen.getAllByRole("alert")).toHaveLength(3)
+    expect(screen.getAllByText("预览加载失败，请重试")).toHaveLength(3)
+    // 严禁假数据：错误态不渲染播放器
+    expect(playerCalls).toHaveLength(0)
+    // 重试按钮仅变体 0 卡片出现
+    const retryButtons = screen.getAllByText("重试")
+    expect(retryButtons).toHaveLength(1)
+    fireEvent.click(retryButtons[0])
+    expect(onRetry).toHaveBeenCalledTimes(1)
+  })
+
+  it("clipsLoading：渲染加载占位，不渲染播放器", () => {
+    renderGrid({ clipsLoading: true })
+    expect(screen.getAllByText("独立选片中…")).toHaveLength(3)
+    expect(screen.queryAllByRole("alert")).toHaveLength(0)
+    expect(playerCalls).toHaveLength(0)
+  })
+})

apps/web/src/test/pages/generate/FrontendPreviewPlayer.audio.test.tsx

@@ -0,0 +1,213 @@
+/**
+ * FrontendPreviewPlayer 音频行为单测（Issue #1741 / #1750）
+ *
+ * useSegmentScheduler 用 mock 控制播放态，专注验证本组件的音频逻辑：
+ * - 有配音时 video 保持 muted（素材原声不与配音混音）
+ * - 无配音时 video 不 muted（素材原声兜底，保证任何情况下播放有声）
+ * - 静音按钮：默认有声；点击后切 muted，aria-label 与图标切换
+ * - 批量播放互斥（#1750 playToken 为 0 基变体序号）：activePlayToken 变为其他实例且本实例在播放时，调用 pause
+ * - 点击播放/暂停时上报播放权（onPlayTokenChange）
+ * - #1750：serverClips 是唯一片段来源，缺失时不渲染任何 video（无本地模拟 fallback）
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+import FrontendPreviewPlayer from "@/pages/generate/components/FrontendPreviewPlayer"
+import type { AssetItem } from "@/api/assets"
+import type { EditPlanClip } from "@/api/template-editor"
+
+const mocks = vi.hoisted(() => ({
+  isPlaying: false,
+  pause: vi.fn(),
+  togglePlayPause: vi.fn(),
+}))
+
+vi.mock("@/pages/generate/hooks/useSegmentScheduler", () => ({
+  // segments 由组件 buildPlaybackSegments 产出（唯一来源 serverClips）；
+  // canPlay 与真实 hook 一致：无片段时不可播放
+  useSegmentScheduler: vi.fn((segments: unknown[]) => ({
+    isPlaying: mocks.isPlaying,
+    currentTime: 0,
+    totalDuration: 20,
+    currentSegmentIndex: 0,
+    canPlay: segments.length > 0,
+    togglePlayPause: mocks.togglePlayPause,
+    seekTo: vi.fn(),
+    pause: mocks.pause,
+    videoRefs: { current: [] as (HTMLVideoElement | null)[] },
+  })),
+}))
+
+vi.mock("@/pages/generate/hooks/useCanvasPlayer", () => ({
+  useCanvasPlayer: () => ({
+    state: {
+      isPlaying: false,
+      isReady: false,
+      isBuffering: false,
+      currentTime: 0,
+      duration: 0,
+      errorMessage: "",
+      hasDecodeError: false,
+    },
+    controls: { play: vi.fn(), pause: vi.fn(), seek: vi.fn() },
+  }),
+}))
+
+beforeEach(() => {
+  mocks.isPlaying = false
+  mocks.pause.mockClear()
+  mocks.togglePlayPause.mockClear()
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  )
+})
+
+function makeAsset(id: string): AssetItem {
+  return {
+    id,
+    library_id: "lib-1",
+    name: `${id}.mp4`,
+    storage_key: `media/${id}.mp4`,
+    file_url: `https://cdn.example.com/${id}.mp4`,
+    mime_type: "video/mp4",
+    metadata: { duration: 10, width: 1080, height: 1920 },
+    duration: 10,
+  }
+}
+
+function makeClip(assetId: string, order: number): EditPlanClip {
+  return {
+    id: `clip-${assetId}`,
+    plan_id: "plan-1",
+    clip_type: "main",
+    order,
+    asset_id: assetId,
+    text_content: "",
+    start_time: 0,
+    duration: 5,
+    transition_effect: "none",
+    transition_duration: 0,
+    playback_speed: 1,
+    status: "ready",
+    config: {},
+  }
+}
+
+const serverClips = [makeClip("a1", 0), makeClip("a2", 1)]
+
+const baseProps = {
+  assets: [makeAsset("a1"), makeAsset("a2")],
+  videoRatio: "9:16",
+  ready: true,
+  serverClips,
+}
+
+function videos(): HTMLVideoElement[] {
+  return Array.from(document.querySelectorAll("video"))
+}
+
+describe("FrontendPreviewPlayer 音频行为 (#1741/#1750)", () => {
+  it("有配音时 video 保持 muted（素材原声不与配音混音）", () => {
+    render(<FrontendPreviewPlayer {...baseProps} voiceAudioUrl="https://cdn.example.com/tts.mp3" />)
+    expect(videos()).toHaveLength(2)
+    videos().forEach((v) => expect(v.muted).toBe(true))
+  })
+
+  it("无配音时 video 不 muted（素材原声兜底）", () => {
+    render(<FrontendPreviewPlayer {...baseProps} />)
+    videos().forEach((v) => expect(v.muted).toBe(false))
+  })
+
+  it("无配音时点静音按钮，video 切换为 muted；再点恢复", () => {
+    render(<FrontendPreviewPlayer {...baseProps} />)
+    const vs = videos()
+    expect(vs[0].muted).toBe(false)
+
+    fireEvent.click(screen.getByRole("button", { name: "静音" }))
+    videos().forEach((v) => expect(v.muted).toBe(true))
+
+    fireEvent.click(screen.getByRole("button", { name: "取消静音" }))
+    videos().forEach((v) => expect(v.muted).toBe(false))
+  })
+
+  it("批量播放互斥：token 变为其他实例且本实例在播放时调用 pause", () => {
+    mocks.isPlaying = true
+    const { rerender } = render(
+      <FrontendPreviewPlayer
+        {...baseProps}
+        playToken={1}
+        activePlayToken={1}
+        onPlayTokenChange={() => {}}
+        compact
+      />,
+    )
+    expect(mocks.pause).not.toHaveBeenCalled()
+
+    // 播放权切给实例 2（0 基 token）
+    rerender(
+      <FrontendPreviewPlayer
+        {...baseProps}
+        playToken={1}
+        activePlayToken={2}
+        onPlayTokenChange={() => {}}
+        compact
+      />,
+    )
+    expect(mocks.pause).toHaveBeenCalledTimes(1)
+
+    // token 切回自己：不重复暂停
+    rerender(
+      <FrontendPreviewPlayer
+        {...baseProps}
+        playToken={1}
+        activePlayToken={1}
+        onPlayTokenChange={() => {}}
+        compact
+      />,
+    )
+    expect(mocks.pause).toHaveBeenCalledTimes(1)
+  })
+
+  it("未播放时 token 变化不触发暂停（effect 仅在本实例播放时生效）", () => {
+    // mocks.isPlaying = false（beforeEach 重置）
+    const { rerender } = render(
+      <FrontendPreviewPlayer {...baseProps} playToken={0} activePlayToken={0} compact />,
+    )
+    rerender(<FrontendPreviewPlayer {...baseProps} playToken={0} activePlayToken={1} compact />)
+    expect(mocks.pause).not.toHaveBeenCalled()
+  })
+
+  it("暂停状态下点击播放按钮：上报播放权为自身 playToken 并触发播放", () => {
+    const onToken = vi.fn()
+    render(
+      <FrontendPreviewPlayer {...baseProps} playToken={2} onPlayTokenChange={onToken} compact />,
+    )
+    // 暂停态有两个图标播放按钮（中央大按钮 + 控制条按钮），均调 handleTogglePlay，点中央那个
+    const playButtons = screen.getAllByRole("button").filter((b) => !b.getAttribute("aria-label"))
+    expect(playButtons.length).toBeGreaterThanOrEqual(1)
+    fireEvent.click(playButtons[0])
+    expect(onToken).toHaveBeenCalledWith(2)
+    expect(mocks.togglePlayPause).toHaveBeenCalledTimes(1)
+  })
+
+  it("每个卡片都渲染独立静音按钮", () => {
+    render(
+      <div>
+        <FrontendPreviewPlayer {...baseProps} playToken={0} compact />
+        <FrontendPreviewPlayer {...baseProps} playToken={1} compact />
+        <FrontendPreviewPlayer {...baseProps} playToken={2} compact />
+      </div>,
+    )
+    expect(screen.getAllByRole("button", { name: "静音" })).toHaveLength(3)
+  })
+
+  it("#1750 serverClips 缺失时不渲染任何 video（无本地模拟 fallback，显示无可播放素材）", () => {
+    render(<FrontendPreviewPlayer {...baseProps} serverClips={undefined} />)
+    expect(videos()).toHaveLength(0)
+    expect(screen.getByText("暂无可播放素材")).toBeInTheDocument()
+  })
+})

apps/web/src/test/pages/generate/smoke.test.tsx

@@ -19,6 +19,7 @@ import "@/pages/generate/components/Step2MaterialSelect"
 import "@/pages/generate/components/Step4TitleSettings"
 import "@/pages/generate/components/Step5VoiceSelect"
 import "@/pages/generate/components/Step3VoiceWithMode"
+import "@/pages/generate/components/CanvasPreviewGrid"
 import "@/pages/generate/components/BatchGenerationGrid"
 import "@/pages/generate/components/PreviewCountModal"
 import "@/pages/generate/components/GenerateStepContent"
@@ -32,6 +33,8 @@ import "@/pages/generate/components/material/MaterialModeTabs"
 import "@/pages/generate/components/material/ManualMaterialList"
 import "@/pages/generate/components/material/SmartMatchInput"
 import "@/pages/generate/components/material/SmartMatchResults"
+import "@/pages/generate/components/title/AiTitleGenerator"
+import "@/pages/generate/components/title/AiTitleCard"
 import "@/pages/generate/components/title/TitleStylePanel"
 import "@/pages/generate/components/title/TitlePresetsGrid"
 import "@/pages/generate/utils/formatDuration"
@@ -45,6 +48,9 @@ describe("GeneratePage module smoke test", () => {
 import "@/pages/generate/hooks/useGenerateVideo"
 import "@/pages/generate/hooks/useBatchCovers"
 import "@/pages/generate/hooks/useBatchVariantPlans"
+import "@/pages/generate/hooks/useVariantVoicePreview"
+import "@/pages/generate/hooks/usePreviewAssets"
+import "@/pages/generate/hooks/useSegmentScheduler"
 import "@/pages/generate/hooks/generate-video/useGenerationPolling"
 import "@/pages/generate/hooks/useGenerateFormState"
 import "@/pages/generate/hooks/useGenerateFormState/useVoiceState"

apps/web/src/test/pages/generate/step5-preview.smoke.test.tsx

@@ -0,0 +1,18 @@
+/**
+ * Step4+5 merged preview smoke test
+ * 确保 vitest related 模式能匹配到第5步预览生成相关文件的改动
+ */
+import { describe, it, expect } from "vitest"
+
+import "@/pages/generate/hooks/usePreviewAssets"
+import "@/pages/generate/hooks/useSegmentScheduler"
+import "@/pages/generate/components/FrontendPreviewPlayer"
+import "@/pages/generate/hooks/useStepNavigation"
+import "@/pages/generate/components/GenerateStepContent"
+import "@/pages/generate/GeneratePage"
+
+describe("Merged Step4+5 preview module smoke test", () => {
+  it("should load all merged step4+5 preview modules", () => {
+    expect(true).toBe(true)
+  })
+})

apps/worker/video_processing/subtitle_generator.py

@@ -16,7 +16,6 @@ from typing import Any
 from packages.domain.ass_subtitle_builder import (
     TITLE_MARGIN_SIDE,
     TITLE_MARGIN_TOP,
-    _scale_len,
     _wrap_title_text,
     build_ass_style,
     escape_ass_text,
@@ -134,23 +133,22 @@ def generate_ass_from_timeline(
         output_path.write_text("", encoding="utf-8")
         return output_path
 
-    # 样式参数（字号/描边/边距按视频宽度缩放，基准 720p，与前端预览一致）
-    _sw = video_width
+    # 样式参数
     font_name = subtitle_config.get("font", "思源黑体")
-    font_size = _scale_len(int(subtitle_config.get("size", 24)), _sw)
+    font_size = int(subtitle_config.get("size", 24))
     color = _hex_to_ass_color(subtitle_config.get("color", "#ffffff"))
     position = subtitle_config.get("position", "bottom")
     alignment = _position_to_ass_alignment(position)
     max_chars_per_line = int(subtitle_config.get("max_chars_per_line", DEFAULT_MAX_CHARS_PER_LINE))
 
-    # 描边（默认黑色描边，保证可读性）—— 720p 基准 1.5
+    # 描边（默认黑色描边，保证可读性）
     outline_color = "&H00000000"
-    outline_width = _scale_len(1.5, _sw)
+    outline_width = 1.5
 
-    # 边距（720p 基准 60/40）
-    margin_v = _scale_len(60 if position == "bottom" else 60, _sw)
-    margin_l = _scale_len(40, _sw)
-    margin_r = _scale_len(40, _sw)
+    # 边距
+    margin_v = 60 if position == "bottom" else 60
+    margin_l = 40
+    margin_r = 40
 
     # 生成样式行
     style_line = (
@@ -205,29 +203,22 @@ def generate_ass_from_timeline(
         if "font_color" in title_cfg and "color" not in title_cfg:
             title_cfg["color"] = title_cfg["font_color"]
 
-        _tsw = video_width
         t_color = hex_to_ass_color(title_cfg.get("color", "#ffffff"))
         t_stroke = title_cfg.get("stroke", {}) or {}
         t_shadow = title_cfg.get("shadow", {}) or {}
         s_color = hex_to_ass_color(t_stroke.get("color", "#000000"))
-        s_width = _scale_len(float(t_stroke.get("width", 2)) if t_stroke.get("enabled", False) else 0.0, _tsw)
-        sh_blur = _scale_len(float(t_shadow.get("blur", 4)) if t_shadow.get("enabled", False) else 0.0, _tsw)
+        s_width = float(t_stroke.get("width", 2)) if t_stroke.get("enabled", False) else 0.0
+        sh_blur = float(t_shadow.get("blur", 4)) if t_shadow.get("enabled", False) else 0.0
         sh_offset = (
-            _scale_len(t_shadow.get("offset_x", 2) if t_shadow.get("enabled", False) else 0, _tsw),
-            _scale_len(t_shadow.get("offset_y", 2) if t_shadow.get("enabled", False) else 0, _tsw),
+            t_shadow.get("offset_x", 2) if t_shadow.get("enabled", False) else 0,
+            t_shadow.get("offset_y", 2) if t_shadow.get("enabled", False) else 0,
         )
         t_alignment = position_to_ass_alignment(title_cfg.get("position", "bottom"))
 
-        # 标题字号/边距按视频宽度缩放（基准 720p），移除旧的 min(...,36) 上限避免 1080p 被钳位过小
-        _base_title_size = int(title_cfg.get("size", 36))
-        t_font_size = _scale_len(_base_title_size, _tsw)
-        _t_margin_top = _scale_len(TITLE_MARGIN_TOP, _tsw)
-        _t_margin_side = _scale_len(TITLE_MARGIN_SIDE, _tsw)
-
         title_style_line = build_ass_style(
             "TitleStyle",
             font_name=title_cfg.get("font", "思源黑体"),
-            font_size=t_font_size,
+            font_size=min(int(title_cfg.get("size", 36)), 36),
             primary_color=t_color,
             outline_color=s_color,
             outline_width=s_width,
@@ -236,15 +227,14 @@ def generate_ass_from_timeline(
             bold=bool(title_cfg.get("bold", True)),
             italic=bool(title_cfg.get("italic", False)),
             alignment=t_alignment,
-            margin_v=_t_margin_top,
-            margin_l=_t_margin_side,
-            margin_r=_t_margin_side,
+            margin_v=TITLE_MARGIN_TOP,
+            margin_l=TITLE_MARGIN_SIDE,
+            margin_r=TITLE_MARGIN_SIDE,
         )
 
+        t_font_size = min(int(title_cfg.get("size", 36)), 36)
         safe_raw = escape_ass_text(title_text.strip())
-        safe_wrapped = _wrap_title_text(
-            safe_raw, video_width, t_font_size, margin_l=_t_margin_side, margin_r=_t_margin_side
-        )
+        safe_wrapped = _wrap_title_text(safe_raw, video_width, t_font_size)
 
         if video_duration > 0:
             t_end_time = format_ass_time(video_duration)

apps/worker/worker_app/celery_app.py

@@ -48,9 +48,6 @@ celery_app.conf.imports = (
     # PYTHONPATH=/app/apps/api 下，app.tasks.lipsync_tts 可直接导入且不触发 apps/api/__init__.py
     # （apps/api/__init__.py 会 from .main import app，级联加载整个 FastAPI 栈，Worker 中不需要且会导致注册失败）
     "app.tasks.lipsync_tts",
-    # #1998 GPU MuseTalk 异步推理：wait_for_result→签名 URL→回写 lipsync_jobs
-    # 必须在 Worker 侧注册，否则 apply_async 消息无人消费，job 永远卡在 processing
-    "app.tasks.lipsync_gpu",
 )
 
 # Celery Beat 定时任务调度

deploy/gpu_worker/gpu_worker.py

@@ -108,23 +108,15 @@ def _check_musetalk_health() -> tuple[bool, dict]:
         return False, {"error": str(exc)}
 
 
-def _register(task_id: Optional[str] = None) -> tuple[bool, bool]:
+def _register(task_id: Optional[str] = None) -> bool:
     """向服务端注册 / 心跳，附带 GPU 信息。
 
     推理期间的心跳线程传 task_id：服务端会同步刷新该 processing 任务的
-    last_heartbeat_at，防止长推理被误判超时回收。同时服务端会检查该任务
-    是否已被用户取消，若是则返回 cancel_task=True。
-
-    返回 (ok, cancel_task)。
+    last_heartbeat_at，防止长推理被误判超时回收。
     """
     ok, info = _check_musetalk_health()
-    if isinstance(info, dict):
-        gpu_info = info.get("gpu", info)
-        free_vram = int(gpu_info.get("free_vram_mb", gpu_info.get("memory_free_mb", 0)) or 0)
-        gpu_name = gpu_info.get("gpu_name", info.get("gpu_name", ""))
-    else:
-        free_vram = 0
-        gpu_name = ""
+    free_vram = int(info.get("free_vram_mb", 0) or 0) if isinstance(info, dict) else 0
+    gpu_name = info.get("gpu_name", "") if isinstance(info, dict) else ""
     if not gpu_name:
         # 尝试在 Windows 上读 nvidia-smi
         gpu_name = _probe_gpu_name()
@@ -145,14 +137,12 @@ def _register(task_id: Optional[str] = None) -> tuple[bool, bool]:
             timeout=15,
         )
         if r.status_code == 200:
-            resp_body = r.json()
-            cancel_task = resp_body.get("cancel_task", False)
-            return True, cancel_task
+            return True
         logger.error("注册/心跳失败: HTTP %d body=%s", r.status_code, r.text[:300])
-        return False, False
+        return False
     except Exception as exc:
         logger.error("注册/心跳异常: %s", exc)
-        return False, False
+        return False
 
 
 def _probe_gpu_name() -> str:
@@ -334,9 +324,6 @@ class TaskHeartbeat(threading.Thread):
     期间无法发送，服务端会因任务 last_heartbeat_at 停滞而误判超时回退 pending。
     本线程每 task_heartbeat_interval 秒（默认 30s）POST /gpu/register 并
     携带当前 task_id，让服务端持续续期任务心跳；任务处理结束 stop()。
-
-    同时检测服务端返回的 cancel_task 信号：若为 True，说明用户已取消任务，
-    立即调用 _cancel_musetalk() 终止本地推理，并设置 cancelled 标志供主流程检查。
     """
 
     def __init__(self, task_id: str, interval: float):
@@ -344,21 +331,13 @@ class TaskHeartbeat(threading.Thread):
         self.task_id = task_id
         self.interval = max(5.0, interval)
         self._stop_event = threading.Event()
-        self.cancelled = False  # 外部可读的取消标志
 
     def run(self) -> None:
         # 先立即发一次，再按间隔循环（首次心跳失败不影响主流程）
         while not self._stop_event.is_set():
             try:
-                ok, cancel_task = _register(self.task_id)
-                if ok:
+                if _register(self.task_id):
                     logger.debug("任务 %s 心跳已发送", self.task_id)
-                if cancel_task:
-                    logger.warning("任务 %s 已被用户取消，正在终止本地推理...", self.task_id)
-                    self.cancelled = True
-                    _cancel_musetalk()
-                    self._stop_event.set()
-                    return
             except Exception as exc:  # noqa: BLE001
                 logger.warning("任务 %s 心跳异常（忽略）: %s", self.task_id, exc)
             self._stop_event.wait(self.interval)
@@ -385,17 +364,9 @@ def _handle_task(task: dict) -> None:
             if not _download(task["video_url"], video_path):
                 _report_result(task_id, False, 0.0, "下载人物视频失败")
                 return
-            if hb.cancelled:
-                logger.info("任务 %s 在下载阶段被用户取消", task_id)
-                _report_result(task_id, False, 0.0, "用户取消任务")
-                return
             if not _download(task["audio_url"], audio_path):
                 _report_result(task_id, False, 0.0, "下载驱动音频失败")
                 return
-            if hb.cancelled:
-                logger.info("任务 %s 在下载阶段被用户取消", task_id)
-                _report_result(task_id, False, 0.0, "用户取消任务")
-                return
 
             # 2. 输入时长前置校验：短视频 MuseTalk 会 division by zero，
             #    直接上报 failed，不浪费 GPU 时间。ffprobe 不可用/读失败（0.0）
@@ -416,20 +387,12 @@ def _handle_task(task: dict) -> None:
             err = ""
             retryable = False
             for attempt in range(Config.task_max_retry + 1):
-                if hb.cancelled:
-                    logger.info("任务 %s 在推理前被用户取消", task_id)
-                    _report_result(task_id, False, 0.0, "用户取消任务")
-                    return
                 if attempt > 0:
                     logger.info("任务 %s 第 %d 次重试（瞬时错误）...", task_id, attempt + 1)
                     time.sleep(2)
                 success, duration, err, retryable = _call_musetalk(video_path, audio_path, out_path)
                 if success or not retryable:
                     break
-            if hb.cancelled:
-                logger.info("任务 %s 被用户取消（推理已终止）", task_id)
-                _report_result(task_id, False, 0.0, "用户取消任务")
-                return
             if not success:
                 logger.error("任务 %s 推理失败: %s", task_id, err)
                 _report_result(task_id, False, 0.0, err)
@@ -499,8 +462,7 @@ def main() -> int:
             # 心跳
             now = time.time()
             if now - last_heartbeat >= Config.heartbeat_interval:
-                ok, _ = _register()
-                if ok:
+                if _register():
                     last_heartbeat = now
 
             # 轮询任务

infra/docker/api-base.Dockerfile

@@ -31,12 +31,6 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 COPY infra/fonts/NotoSansSC-VF.ttf /usr/share/fonts/opentype/noto/NotoSansSC-VF.ttf
 COPY infra/fonts/NotoSerifCJKsc-VF.otf /usr/share/fonts/opentype/noto/NotoSerifCJKsc-VF.otf
 COPY infra/fonts/LXGWWenKai-Regular.ttf /usr/share/fonts/truetype/lxgw/LXGWWenKai-Regular.ttf
-# #2001 爆款标题字体：优设标题黑 / 阿里普惠体 Bold / 抖音美好体 / 思源黑体 Heavy
-RUN mkdir -p /usr/share/fonts/truetype/xiaoxia
-COPY infra/fonts/xiaoxia/YouSheBiaoTiHei.ttf /usr/share/fonts/truetype/xiaoxia/YouSheBiaoTiHei.ttf
-COPY infra/fonts/xiaoxia/AlibabaPuHuiTi-Bold.ttf /usr/share/fonts/truetype/xiaoxia/AlibabaPuHuiTi-Bold.ttf
-COPY infra/fonts/xiaoxia/DouyinSansBold.otf /usr/share/fonts/truetype/xiaoxia/DouyinSansBold.otf
-COPY infra/fonts/xiaoxia/NotoSansSC-Black.otf /usr/share/fonts/truetype/xiaoxia/NotoSansSC-Black.otf
 RUN fc-cache -fv
 
 # 创建虚拟环境

infra/docker/worker-base.Dockerfile

@@ -35,12 +35,6 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 COPY infra/fonts/NotoSansSC-VF.ttf /usr/share/fonts/opentype/noto/NotoSansSC-VF.ttf
 COPY infra/fonts/NotoSerifCJKsc-VF.otf /usr/share/fonts/opentype/noto/NotoSerifCJKsc-VF.otf
 COPY infra/fonts/LXGWWenKai-Regular.ttf /usr/share/fonts/truetype/lxgw/LXGWWenKai-Regular.ttf
-# #2001 爆款标题字体：优设标题黑 / 阿里普惠体 Bold / 抖音美好体 / 思源黑体 Heavy
-RUN mkdir -p /usr/share/fonts/truetype/xiaoxia
-COPY infra/fonts/xiaoxia/YouSheBiaoTiHei.ttf /usr/share/fonts/truetype/xiaoxia/YouSheBiaoTiHei.ttf
-COPY infra/fonts/xiaoxia/AlibabaPuHuiTi-Bold.ttf /usr/share/fonts/truetype/xiaoxia/AlibabaPuHuiTi-Bold.ttf
-COPY infra/fonts/xiaoxia/DouyinSansBold.otf /usr/share/fonts/truetype/xiaoxia/DouyinSansBold.otf
-COPY infra/fonts/xiaoxia/NotoSansSC-Black.otf /usr/share/fonts/truetype/xiaoxia/NotoSansSC-Black.otf
 RUN fc-cache -fv
 
 # 创建虚拟环境

packages/adapters/sqlalchemy_impl/models.py

@@ -711,7 +711,6 @@ class LipsyncJobModel(Base):
     voice_id = Column(String(200), nullable=False, default="")
     script_text = Column(Text, nullable=False, default="")
     speed = Column(Float, nullable=False, default=1.0)
-    style = Column(String(32), nullable=False, default="")
     emotion = Column(String(20), nullable=False, default="")
 
     # MediaKit 任务状态
@@ -751,8 +750,6 @@ class AiAvatarRenderJob(Base):
     # b_roll_segments 格式: [{"script_segment_index": 0, "asset_url": "...", "mode": "fullscreen|pip", "start_time": 5.0, "end_time": 10.0}, ...]
     title_config = Column(JSON, nullable=False, default=dict)
     cover_config = Column(JSON, nullable=False, default=dict)
-    # #2001 封面独立标题配置（结构同 title_config；为空时封面不叠标题）
-    cover_title_config = Column(JSON, nullable=False, default=dict)
 
     # 任务状态
     status = Column(String(20), nullable=False, default="pending", index=True)

packages/adapters/sqlalchemy_impl/session.py

@@ -18,10 +18,6 @@ def build_engine(
     pool_timeout: int = 30,
     pool_recycle: int = 3600,
 ):
-    # SQLite 不支持 QueuePool 的 pool_size/max_overflow/pool_timeout，
-    # 传了会在 create_engine 阶段直接 TypeError，这里只对非 SQLite 传连接池参数。
-    if _is_sqlite(database_url):
-        return create_engine(database_url, pool_recycle=pool_recycle)
     return create_engine(
         database_url,
         pool_size=pool_size,

packages/application/cosyvoice_service.py

@@ -26,43 +26,12 @@ from packages.shared.config import get_shared_settings
 logger = logging.getLogger(__name__)
 
 
-# ── Style（语气风格）→ CosyVoice instruct 自然语言指令 ──
-# 前端 PR#2002 传 6 种 style：natural/sweet/excited/professional/news/livestream。
-# style 是新的统一参数；emotion 为 deprecated 兼容别名，内部映射为 style。
+# CosyVoice v3 情绪通过 input.instruction 中文自然语言指令控制（不再使用枚举 emotion 字段）。
+# 官方文档：instruction 格式严格为 "你说话的情感是<情感值>。"，结尾中文句号不可省略；
+# 情感值必须是 7 种英文枚举之一：neutral/happy/sad/angry/surprised/fearful/disgusted。
 # 参考：https://help.aliyun.com/zh/model-studio/cosyvoice-voice-list
-STYLE_INSTRUCTION_MAP: dict[str, str] = {
-    "natural": "用自然、平和的语气说话。",
-    "sweet": "用温柔甜美、亲切柔和的语气说话。",
-    "excited": "用兴奋、激动的语气说话。",
-    "professional": "用专业、正式的语气说话。",
-    "news": "用新闻播报的语气说话。",
-    "livestream": "用直播解说的语气说话。",
-}
-
-# 有效 style 值集合（供 schema / 校验使用）
-VALID_STYLES: frozenset[str] = frozenset(STYLE_INSTRUCTION_MAP.keys())
-
-# ── 旧 emotion → 新 style 兼容映射（方案 B：统一 style，emotion deprecated）──
-_EMOTION_TO_STYLE: dict[str, str] = {
-    "neutral": "natural",
-    "happy": "excited",
-    "sad": "sweet",
-    "angry": "excited",
-    "surprised": "excited",
-    "fearful": "sweet",
-    "disgusted": "natural",
-}
-
-# 严格格式系统音色：style → emotion 回退（用于无法使用自由文本指令的音色）
-_STYLE_TO_EMOTION: dict[str, str] = {
-    "natural": "neutral",
-    "sweet": "sad",
-    "excited": "happy",
-    "professional": "neutral",
-    # news / livestream 无直接对应 emotion，特殊处理
-}
-
-# ── 旧 emotion 映射表（deprecated，保留以兼容历史数据）──
+# 前端可传英文枚举或中文标签（中立/开心/难过/生气/惊讶/恐惧/厌恶），统一归一化为英文枚举。
+# 映射表 key（不区分大小写）: 英文枚举/旧英文/中文标签 → 7 种标准英文枚举
 EMOTION_MAP: dict[str, str] = {
     # ── 7 种标准英文枚举（CosyVoice v3 官方支持的情感值）──
     "neutral": "neutral",
@@ -153,70 +122,6 @@ def build_emotion_instruction(voice_id: str, emotion_enum: str) -> str:
     return ""
 
 
-def resolve_style(style: str = "", emotion: str = "") -> str:
-    """统一解析 style 参数（方案 B）.
-
-    - style 有值且合法：直接使用（style 优先级最高）。
-    - style 为空但 emotion 有值：将旧 emotion 归一化后映射为 style。
-    - 两者皆空：返回空串（调用方不传 instruction）。
-
-    Args:
-        style: 新的语气风格（natural/sweet/excited/professional/news/livestream）
-        emotion: 旧的情绪参数（deprecated，内部映射为 style）
-
-    Returns:
-        解析后的 style 字符串；无需 instruct 时返回空串
-    """
-    s = (style or "").strip().lower()
-    if s:
-        if s in VALID_STYLES:
-            return s
-        logger.warning("未知的 style 值 %r，忽略 style 参数", style)
-    # 回退：emotion → style
-    norm = normalize_emotion(emotion)
-    if not norm:
-        return ""
-    mapped = _EMOTION_TO_STYLE.get(norm)
-    if not mapped:
-        logger.warning("emotion %r 无法映射到 style，跳过 instruct", norm)
-    return mapped or ""
-
-
-def build_style_instruction(voice_id: str, style: str) -> str:
-    """根据 voice 类型构造 style instruction.
-
-    - natural：返回空串（不额外加 instruct，使用 CosyVoice 默认自然语气）。
-    - 克隆/设计音色：使用中文自然语言指令（DashScope 允许任意自然语言）。
-    - 系统音色中支持 emotion instruct 的白名单音色：
-      若 style 可映射到 emotion，用严格格式 "你说话的情感是<emotion>。"；
-      news/livestream 尝试直接用中文 instruct（部分音色支持自由文本）。
-    - 其他系统音色：返回空串。
-
-    Args:
-        voice_id: CosyVoice voice 参数
-        style: 已通过 resolve_style() 解析的 style 值
-
-    Returns:
-        拼接好的 instruction 字符串；无需 instruct 时返回空串
-    """
-    if not style or style == "natural":
-        return ""
-    # 克隆音色：直接使用中文自然语言指令
-    if _is_cloned_voice(voice_id):
-        return STYLE_INSTRUCTION_MAP.get(style, "")
-    # 系统音色白名单：优先映射到严格 emotion 格式
-    if voice_id in _SYSTEM_VOICES_WITH_EMOTION_INSTRUCT:
-        emotion_val = _STYLE_TO_EMOTION.get(style)
-        if emotion_val:
-            return f"你说话的情感是{emotion_val}。"
-        # news/livestream 无 emotion 对应，尝试自由中文 instruct
-        desc = STYLE_INSTRUCTION_MAP.get(style, "")
-        if desc:
-            logger.info("音色 %s 使用自由文本 style instruct: %s", voice_id, desc)
-            return desc
-    return ""
-
-
 def normalize_emotion(emotion: str) -> str:
     """将前端情绪值归一化为 CosyVoice v3 官方英文枚举，用于拼入 instruction.
 
@@ -668,8 +573,6 @@ class CosyVoiceService:
         volume: int = 50,
         emotion: str = "",
         language: str = "zh",
-        style: str = "",
-        pitch: float = 1.0,
     ) -> dict:
         """提交语音合成任务（同步非流式，直接返回结果）.
 
@@ -683,10 +586,9 @@ class CosyVoiceService:
             format: 输出格式（mp3/wav/pcm），空表示使用配置默认值
             speed: 语速（0.5-2.0），1.0 为正常速度
             volume: 音量（0-100），默认 50
-            style: 语气风格（natural/sweet/excited/professional/news/livestream），
-                   新的统一参数；优先级高于 emotion
-            pitch: 音调（0.5-2.0），1.0 为默认值
-            emotion: 【deprecated】旧情绪参数，内部通过 resolve_style() 映射为 style
+            emotion: 情绪，英文枚举 neutral/happy/sad/angry/surprised/fearful/disgusted
+                     或前端中文标签（中立/开心/难过/生气/惊讶/恐惧/厌恶），兼容旧值
+                     natural/excited/calm/friendly；空串不传，未知值默认 neutral
             language: 语言代码（zh/en 等，默认 zh；系统音色仅 zh/en 传 language_hints）
 
         Returns:
@@ -715,20 +617,11 @@ class CosyVoiceService:
             "rate": speed,
             "volume": volume,
         }
-        # pitch: CosyVoice API 支持 [0.5, 2.0]，非默认值时才传
-        if pitch and pitch != 1.0:
-            input_payload["pitch"] = pitch
-        # style 优先：显式传 style 时走 build_style_instruction()；
-        # 无 style 时回退到旧的 emotion → build_emotion_instruction() 逻辑（向后兼容）
-        s = (style or "").strip().lower()
-        instruction = ""
-        if s:
-            instruction = build_style_instruction(voice_id, s)
-        if not instruction:
-            norm_emotion = normalize_emotion(emotion)
-            instruction = build_emotion_instruction(voice_id, norm_emotion)
-        if instruction:
-            input_payload["instruction"] = instruction
+        # 情绪 → instruction（按 voice 类型选择格式）
+        norm_emotion = normalize_emotion(emotion)
+        emotion_instruction = build_emotion_instruction(voice_id, norm_emotion)
+        if emotion_instruction:
+            input_payload["instruction"] = emotion_instruction
         # 语言 → language_hints 数组（仅取第一个元素生效）；
         # 系统音色（非克隆/非 voice_id 中包含下划线以外的短 ID）仅传 zh/en，其他语言不传避免报错
         norm_lang = normalize_language(language)
@@ -789,8 +682,6 @@ class CosyVoiceService:
         emotion: str = "",
         language: str = "zh",
         timeout: float = 120.0,
-        style: str = "",
-        pitch: float = 1.0,
     ) -> SynthesizeResult:
         """语音合成（同步非流式）.
 
@@ -804,8 +695,6 @@ class CosyVoiceService:
             format: 输出格式（mp3/wav/pcm），空表示使用配置默认值
             speed: 语速（0.5-2.0），1.0 为正常速度
             volume: 音量（0-100），默认 50
-            style: 语气风格（natural/sweet/excited/professional/news/livestream）
-            pitch: 音调（0.5-2.0），1.0 为默认值
             timeout: 超时时间（秒），保留参数兼容
 
         Returns:
@@ -825,8 +714,6 @@ class CosyVoiceService:
             volume=volume,
             emotion=emotion,
             language=language,
-            style=style,
-            pitch=pitch,
         )
 
         return SynthesizeResult(