fix(generate): Step5「完成」按钮补上 finalize 调用——confirm 后再 finalize 才真正入库成品库

Co-authored-by: xiaoxia <dev@xiaoxiajianji.com>
Co-committed-by: xiaoxia <dev@xiaoxiajianji.com>

.env.example

@@ -198,10 +198,13 @@ DOUBAO_TIMEOUT=30
 DOUBAO_MAX_RETRIES=2
 
 # ==================== 积分/会员系统 (#1895) ====================
-# 积分扣点总开关：默认 false（对现有用户零影响）。
-# P2 阶段各业务路由逐个接入 @points_gate 时，用
-#   `if settings.points_enabled: ...`
-# 包裹扣点逻辑；所有路由接入完成并验证通过后再在 staging/prod 打开。
+# 积分系统总开关：默认 false（暂停积分系统）。
+# - false：生成视频/口型同步/数字人/AI标题/TTS/克隆音色等所有功能对登录
+#   用户免费放行，不扣积分、不做余额拦截；积分余额/流水/会员状态查询接口
+#   保留可用，但数据不再变动。积分相关的表、代码、接口均保留不删除。
+# - 恢复积分：设置 ENABLE_CREDIT_SYSTEM=true 即可，无需改代码。
+ENABLE_CREDIT_SYSTEM=false
+# 旧开关名（兼容别名）：与 ENABLE_CREDIT_SYSTEM 任一为 true 即启用。
 POINTS_ENABLED=false
 
 # ==================== 抖音解析多源轮询 (#1963) ====================
@@ -217,6 +220,16 @@ APIZERO_API_KEY=
 # GPU Worker 长期鉴权 Token，Worker 端 .env 的 GPU_WORKER_TOKEN 必须与此一致
 # 留空时 development 环境允许匿名访问（仅本地调试），staging/production 必须配置
 GPU_WORKER_TOKEN=
-# 单任务超时（秒），超过则回退 pending 或标记 failed
-GPU_TASK_TIMEOUT_SECONDS=300
+# 单任务超时（秒），processing 超过此时长无任务心跳才回退 pending 或标记 failed
+# #1970：RTX2060 6G 推理 720p 长视频需 5 分钟以上，默认 900
+GPU_TASK_TIMEOUT_SECONDS=900
+# 是否启用 GPU 口型同步（开关）。开启后需同时有 Worker 在心跳窗口内（5分钟）才会走 GPU 路径；
+# 开关关闭 / 无可用 Worker / GPU 任务失败或超时 → 自动回退现有 MediaKit 云端 lipsync
+USE_GPU_LIPSYNC=false
+# 业务侧轮询 GPU 任务结果的间隔（秒）
+GPU_LIPSYNC_POLL_INTERVAL=5
+# 业务侧等待 GPU 任务总超时（秒）；超时回退 MediaKit
+GPU_LIPSYNC_WAIT_TIMEOUT=1200
+# Worker 心跳新鲜度窗口（秒），last_heartbeat_at 在此窗口内视为在线
+GPU_WORKER_STALE_SECONDS=300
 

.gitea/workflows/ci-pipeline.yml

@@ -1186,6 +1186,7 @@ jobs:
         DOUBAO_API_KEY: "${{ secrets.DOUBAO_API_KEY }}"
         DOUBAO_MODEL: "${{ secrets.DOUBAO_MODEL }}"
         DOUBAO_BASE_URL: "${{ secrets.DOUBAO_BASE_URL }}"
+        DOUBAO_VISION_MODEL: "${{ secrets.DOUBAO_VISION_MODEL }}"
         WECHAT_APP_ID: "${{ secrets.WECHAT_APP_ID }}"
         WECHAT_APP_SECRET: "${{ secrets.WECHAT_APP_SECRET }}"
         TIKHUB_API_KEY: "${{ secrets.TIKHUB_API_KEY }}"
@@ -1641,6 +1642,7 @@ jobs:
         DOUBAO_API_KEY: "${{ secrets.DOUBAO_API_KEY }}"
         DOUBAO_MODEL: "${{ secrets.DOUBAO_MODEL }}"
         DOUBAO_BASE_URL: "${{ secrets.DOUBAO_BASE_URL }}"
+        DOUBAO_VISION_MODEL: "${{ secrets.DOUBAO_VISION_MODEL }}"
         WECHAT_APP_ID: "${{ secrets.WECHAT_APP_ID }}"
         WECHAT_APP_SECRET: "${{ secrets.WECHAT_APP_SECRET }}"
         TIKHUB_API_KEY: "${{ secrets.TIKHUB_API_KEY }}"

alembic/versions/082_atom_clip_ai_tags.py

@@ -1,7 +1,7 @@
 """add ai_tags to asset_atom_clips for #1970 fragment-level AI tagging
 
-Revision ID: 081_atom_clip_ai_tags
-Revises: 080_edit_plan_clips_atom_clip_id
+Revision ID: 082_atom_clip_ai_tags
+Revises: 081_add_gpu_lipsync
 Create Date: 2026-09-18
 """
 
@@ -9,8 +9,8 @@ import sqlalchemy as sa
 
 from alembic import op
 
-revision = "081_atom_clip_ai_tags"
-down_revision = "080_edit_plan_clips_atom_clip_id"
+revision = "082_atom_clip_ai_tags"
+down_revision = "081_add_gpu_lipsync"
 branch_labels = None
 depends_on = None
 

alembic/versions/083_cover_title_config.py

@@ -0,0 +1,26 @@
+"""#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

@@ -0,0 +1,26 @@
+"""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,6 +63,7 @@ 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/generation_preview.py

@@ -650,11 +650,26 @@ def get_preview_generation_task(
     if not getattr(task, "is_preview", False):
         raise HTTPException(status_code=404, detail=f"预览任务 {task_id} 不存在")
 
-    # 查询生成的视频（取第一个）
+    # 查询生成的视频（取第一个）。
+    # #2024: 渲染完成后先进入 awaiting_cover（未入成品库），此时预览也应可见，
+    # 从 extra_meta["rendered_output"] 读取视频 URL。
     generated_videos = []
     status_val = task.status.value if hasattr(task.status, "value") else str(task.status)
     if status_val == "completed":
         list_use_case = ListGeneratedVideosByTaskUseCase(generated_video_repository)
         generated_videos = list_use_case.execute(task_id)
+    elif status_val == "awaiting_cover":
+        # 用 extra_meta 中的渲染信息组装一个轻量视频对象给前端预览播放
+        _meta = getattr(task, "extra_meta", {}) or {}
+        _ro = _meta.get("rendered_output") or {}
+        if _ro.get("file_url"):
+
+            class _PreviewVideo:
+                def __init__(self, ro):
+                    self.file_url = ro.get("file_url", "")
+                    self.duration = float(ro.get("duration") or 0.0)
+                    self.file_size = int(ro.get("file_size") or 0)
+
+            generated_videos = [_PreviewVideo(_ro)]
 
     return _to_preview_response(task, generated_videos=generated_videos)

apps/api/app/api/routes/generation_tasks.py

@@ -31,6 +31,8 @@ from app.schemas.generation_task import (
     BatchGenerationTaskResponse,
     ConfirmGenerationRequest,
     CreateGenerationTaskRequest,
+    FinalizeGenerationRequest,
+    FinalizeGenerationResponse,
     GenerationTaskResponse,
     ListGenerationTasksResponse,
 )
@@ -891,8 +893,14 @@ def confirm_generation(
     if source_task.project_id:
         check_project_access(source_task.project_id, authenticated_user.user.id, project_repository)
 
-    # 3. 如果预览任务已完成，检查分辨率一致性后复用产物（秒出）
-    if source_task.is_completed and getattr(source_task, "is_preview", False):
+    # 3. 如果预览任务已完成渲染（completed 或 awaiting_cover），检查分辨率一致性后复用产物（秒出）。
+    # #2024: 渲染完成先进入 awaiting_cover（等 Step5 finalize 入库），
+    # confirm 时不再直接 finalize——仍创建 is_preview=False 的正式任务，复用预览渲染产物。
+    _preview_done = getattr(source_task, "is_preview", False) and source_task.status.value in (
+        "completed",
+        "awaiting_cover",
+    )
+    if _preview_done:
         # 校验请求的分辨率是否与预览实际渲染的分辨率一致
         req_w = request.output_width or 0
         req_h = request.output_height or 0
@@ -907,13 +915,25 @@ def confirm_generation(
                 confirmed_title_config = dict(getattr(source_task, "title_config", {}) or {})
                 confirmed_title_config["text"] = request.custom_title.strip()
 
+            # #2024: mark_confirmed 会把 is_preview 翻转为 False、同步标题/分辨率/封面，
+            # 但不再自动 mark_completed——任务停留在 awaiting_cover，等待用户 Step5 选封面后调 finalize。
             source_task.mark_confirmed(
                 cover_url=request.cover_url,
                 output_width=request.output_width,
                 output_height=request.output_height,
                 title_config=confirmed_title_config,
             )
+            # 若预览任务此时是 completed（历史数据/旧 worker），回退到 awaiting_cover 统一流程
+            if source_task.status.value == "completed":
+                try:
+                    from packages.domain.generation_task import GenerationTaskStatus
+
+                    source_task.status = GenerationTaskStatus.AWAITING_COVER
+                    source_task.completed_at = None
+                except Exception:
+                    pass
             generation_task_repository.update(source_task)
+            db.commit()
 
             # 同步标题到 EditPlan.config
             # #1970：确认生成复用预览计划，dedup_enabled 沿用计划已有值，不在此覆盖
@@ -926,7 +946,7 @@ def confirm_generation(
                 )
 
             logger.info(
-                "[确认生成] 复用预览产物: task_id=%s, user_id=%s",
+                "[确认生成] 复用预览产物（等待 finalize）: task_id=%s, user_id=%s",
                 task_id,
                 authenticated_user.user.id,
             )
@@ -995,6 +1015,55 @@ def confirm_generation(
     )
 
 
+@router.post("/tasks/{task_id}/finalize", response_model=FinalizeGenerationResponse)
+def finalize_generation_task(
+    task_id: str,
+    request: FinalizeGenerationRequest,
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    generation_task_repository: Any = Depends(get_generation_task_repository),
+    generated_video_repository: Any = Depends(get_generated_video_repository),
+    project_repository: Any = Depends(get_project_repository),
+    storage_service: OSSStorageService = Depends(get_storage_service),
+    db: Session = Depends(get_db_session),
+) -> FinalizeGenerationResponse:
+    """#2024: Step5 点「完成」时调用——将 awaiting_cover 状态的任务正式入库+绑定封面。
+
+    - 任务必须处于 awaiting_cover 状态（渲染+上传已完成、封面候选已就绪）。
+    - cover_url 为空则使用任务自动截帧/智能封面；非空则绑定为最终封面。
+    - 幂等：已 finalize 的任务直接返回已有视频记录。
+    - 成功后任务推进到 completed，返回成品视频 ID + 可播放 URL。
+    """
+    from app.services.generation_finalize_service import (
+        GenerationFinalizeError,
+        GenerationFinalizeService,
+    )
+
+    task = generation_task_repository.get(task_id)
+    if task is None:
+        raise HTTPException(status_code=404, detail=f"GenerationTask {task_id} not found")
+    if task.project_id:
+        check_project_access(task.project_id, authenticated_user.user.id, project_repository)
+
+    service = GenerationFinalizeService(db)
+    try:
+        video = service.finalize_task(
+            task_id=task_id,
+            user_id=authenticated_user.user.id,
+            cover_url=request.cover_url or None,
+        )
+    except GenerationFinalizeError as e:
+        raise HTTPException(status_code=e.status_code, detail=str(e)) from e
+
+    download_url = storage_service.get_download_url(video.file_url, expires_seconds=86400)
+    return FinalizeGenerationResponse(
+        video_id=video.id,
+        cover_url=video.thumbnail_url or "",
+        file_url=download_url,
+        status="success",
+        is_duplicate=bool(video.is_duplicate),
+    )
+
+
 @router.get("/tasks", response_model=ListGenerationTasksResponse)
 def list_generation_tasks(
     authenticated_user: AuthenticatedUser = Depends(get_current_user),

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

@@ -93,14 +93,15 @@ def register_worker(
     svc: GpuLipsyncService = Depends(_get_svc),
     _token: str = Depends(_verify_gpu_token),
 ):
-    svc.register_worker(
+    worker, cancel_task = svc.register_worker(
         worker_id=body.worker_id,
         hostname=body.hostname,
         gpu_name=body.gpu_name,
         free_vram_mb=body.free_vram_mb,
         capabilities=body.capabilities,
+        task_id=body.task_id,
     )
-    return GpuWorkerRegisterResponse(ok=True, server_time=datetime.now(UTC), message="ok")
+    return GpuWorkerRegisterResponse(ok=True, server_time=datetime.now(UTC), message="ok", cancel_task=cancel_task)
 
 
 # ── GET /lipsync/poll — Worker 轮询拉任务 ─────────────────────────
@@ -184,13 +185,16 @@ async def report_result(
         pass
     # 其他情况：success=true 且无文件 → Worker 已自行 PUT 到预签名 URL，直接标记完成
 
-    task = svc.report_result(
-        task_id=task_id,
-        worker_id=worker_id,
-        success=success,
-        duration_seconds=duration_seconds,
-        error_msg=error_msg,
-    )
+    try:
+        task = svc.report_result(
+            task_id=task_id,
+            worker_id=worker_id,
+            success=success,
+            duration_seconds=duration_seconds,
+            error_msg=error_msg,
+        )
+    except KeyError as exc:
+        raise HTTPException(status_code=404, detail=str(exc)) from exc
     return GpuLipsyncResultResponse(
         ok=True,
         task_id=task.id,

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

@@ -111,6 +111,8 @@ 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,
@@ -211,6 +213,8 @@ 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:
@@ -342,13 +346,13 @@ def cancel_lipsync_job(
     current_user: AuthenticatedUser = Depends(get_current_user),
     svc: LipsyncService = Depends(_get_service),
 ):
-    """取消对口型任务（仅 pending/tts_processing/submitted 状态可取消）."""
+    """取消对口型任务（仅 pending/tts_processing/submitted/processing 状态可取消）."""
     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 可取消",
+            detail=f"任务状态 {job.status} 不可取消，仅 pending/tts_processing/submitted/processing 可取消",
         )
     return job

apps/api/app/api/routes/points.py

@@ -12,6 +12,7 @@ from datetime import datetime, timedelta, timezone
 from typing import Optional
 
 from app.auth import AuthenticatedUser, get_current_user
+from app.config import settings
 from app.dependencies import get_db_session
 from app.schemas.points import (
     DailyUsageResponse,
@@ -44,6 +45,12 @@ from packages.domain.points_service import PointsService
 
 logger = logging.getLogger(__name__)
 
+
+def _credits_enabled() -> bool:
+    """积分系统总开关（ENABLE_CREDIT_SYSTEM），关闭时全部功能免费放行。"""
+    return bool(getattr(settings, "points_enabled", False))
+
+
 # ── 两个 router ──
 points_router = APIRouter()
 usage_router = APIRouter()
@@ -172,6 +179,19 @@ def check_points(
                 "valid_scenes": sorted(POINTS_SCENES.keys()),
             },
         )
+
+    # 积分系统暂停（ENABLE_CREDIT_SYSTEM=false）：所有场景直接放行，需 0 积分
+    if not _credits_enabled():
+        svc = _get_service()
+        account = svc.get_or_create_account(current_user.user.id, db)
+        return PointsCheckResponse(
+            allowed=True,
+            required_points=0,
+            current_balance=account["balance"],
+            remaining_after=account["balance"],
+            is_free_quota=False,
+        )
+
     is_mem = _is_member(current_user)
     mt = _member_type(current_user)
 
@@ -209,8 +229,19 @@ def deduct_points(
     current_user: AuthenticatedUser = Depends(get_current_user),
     db: Session = Depends(get_db_session),
 ):
-    """积分扣减（内部服务调用）。"""
+    """积分扣减（内部服务调用）。
+
+    积分系统暂停（ENABLE_CREDIT_SYSTEM=false）时为 no-op：不扣分、余额不变，
+    直接返回成功，保证内部调用方拿到 success=True 继续业务流程。
+    """
     svc = _get_service()
+    if not _credits_enabled():
+        account = svc.get_or_create_account(current_user.user.id, db)
+        return SimpleMessageResponse(
+            success=True,
+            message="积分系统已暂停，未扣减积分",
+            data={"transaction_id": "", "balance": account["balance"]},
+        )
     result = svc.deduct_points(
         user_id=current_user.user.id,
         amount=body.amount,
@@ -243,11 +274,7 @@ def refund_points(
     """积分退还（内部服务调用）。"""
     from packages.adapters.sqlalchemy_impl.models import PointsTransactionModel
 
-    txn = (
-        db.query(PointsTransactionModel)
-        .filter(PointsTransactionModel.id == body.transaction_id)
-        .first()
-    )
+    txn = db.query(PointsTransactionModel).filter(PointsTransactionModel.id == body.transaction_id).first()
     if txn is None:
         raise HTTPException(status_code=404, detail="交易记录不存在")
     if txn.user_id != current_user.user.id:

apps/api/app/api/routes/task_center.py

@@ -63,6 +63,8 @@ def _generation_step(task) -> str:
         return "等待 Worker 执行"
     if s == "running":
         return "正在生成成片"
+    if s == "awaiting_cover":
+        return "等待确认封面"
     if s == "completed":
         return "生成完成"
     if s == "failed":
@@ -129,7 +131,7 @@ def _validate_status(status: str | None) -> str | None:
     """校验状态值合法性。"""
     if status is None:
         return None
-    valid = {"pending", "running", "completed", "failed", "cancelled"}
+    valid = {"pending", "running", "awaiting_cover", "completed", "failed", "cancelled"}
     if status not in valid:
         raise HTTPException(
             status_code=400,
@@ -151,7 +153,9 @@ def _clamp_page_size(page_size: int) -> int:
 
 @router.get("/tasks", response_model=ListTasksResponse)
 def list_user_tasks(
-    status: str | None = Query(None, description="按状态筛选：pending/running/completed/failed/cancelled"),
+    status: str | None = Query(
+        None, description="按状态筛选：pending/running/awaiting_cover/completed/failed/cancelled"
+    ),
     task_type: str | None = Query(None, description="按任务类型筛选：generation/ingest"),
     page: int = Query(1, ge=1, description="页码，从1开始"),
     page_size: int = Query(DEFAULT_PAGE_SIZE, ge=1, le=MAX_PAGE_SIZE, description="每页数量"),
@@ -248,7 +252,9 @@ def retry_task_by_id(
 @router.get("/projects/{project_id}/tasks", response_model=ListProjectTasksResponse)
 def list_project_tasks(
     project_id: str,
-    status: str | None = Query(None, description="按状态筛选：pending/running/completed/failed/cancelled"),
+    status: str | None = Query(
+        None, description="按状态筛选：pending/running/awaiting_cover/completed/failed/cancelled"
+    ),
     task_type: str | None = Query(None, description="按任务类型筛选：generation/ingest"),
     page: int = Query(1, ge=1, description="页码，从1开始"),
     page_size: int = Query(DEFAULT_PAGE_SIZE, ge=1, le=MAX_PAGE_SIZE, description="每页数量"),

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

@@ -207,6 +207,9 @@ 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_:
@@ -654,6 +657,9 @@ 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,9 +53,14 @@ 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）"
+        default_factory=dict,
+        description="标题配置（可含 title_image_dataurl：前端 Canvas 渲染的标题 PNG dataURL；含 line_overrides 逐行样式）",
     )
     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")
@@ -83,6 +88,7 @@ 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/generation_task.py

@@ -13,6 +13,24 @@ class ConfirmGenerationRequest(BaseModel):
     custom_title: str = Field(default="", description="用户自定义标题文本，非空时同步到任务和编辑计划")
 
 
+class FinalizeGenerationRequest(BaseModel):
+    """Step5 点「完成」请求体：用户选定封面后，正式将视频入成品库。"""
+
+    cover_url: str = Field(
+        default="", description="用户选定的封面图片 URL；为空则使用任务默认 cover_url（自动截帧/智能封面）"
+    )
+
+
+class FinalizeGenerationResponse(BaseModel):
+    """finalize 响应：返回新创建的成品库视频信息。"""
+
+    video_id: str = Field(description="新创建的成品视频 ID")
+    cover_url: str = Field(default="", description="最终绑定的封面 URL")
+    file_url: str = Field(default="", description="成品视频 OSS URL")
+    status: str = Field(default="success", description="success=新建成功；already_finalized=幂等返回已有记录")
+    is_duplicate: bool = Field(default=False, description="是否被判定为与历史成片重复")
+
+
 class CreateGenerationTaskRequest(BaseModel):
     """创建生成任务请求。
 

apps/api/app/schemas/gpu_lipsync.py

@@ -22,12 +22,21 @@ class GpuWorkerRegisterRequest(BaseModel):
     gpu_name: str = Field("", max_length=200, description="GPU 型号，如 'NVIDIA GeForce RTX 2060'")
     free_vram_mb: int = Field(0, ge=0, description="当前空闲显存（MB）")
     capabilities: str = Field("musetalk", max_length=500, description="能力列表，逗号分隔，如 'musetalk'")
+    task_id: Optional[str] = Field(
+        None,
+        max_length=64,
+        description=(
+            "当前正在处理的任务 ID。Worker 推理期间定期心跳时携带，"
+            "服务端同步刷新该任务 last_heartbeat_at，防止长推理被误判超时；空闲时不传"
+        ),
+    )
 
 
 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,6 +29,7 @@ class LipsyncJobResponse(BaseModel):
     voice_id: str = ""
     script_text: str = ""
     speed: float = 1.0
+    style: str = ""
     emotion: str = ""
     mediakit_task_id: str
     status: str
@@ -67,9 +68,14 @@ 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="情绪（英文枚举 neutral/happy/sad/angry/surprised/fearful/disgusted，或中文 中立/开心/难过/生气/惊讶/恐惧/厌恶；空为默认自然）",
+        description="[deprecated] 旧情绪参数，内部映射为 style",
     )
 
     enable_video_loop: bool = Field(
@@ -123,10 +129,15 @@ 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="情绪（英文枚举 neutral/happy/sad/angry/surprised/fearful/disgusted，或中文 中立/开心/难过/生气/惊讶/恐惧/厌恶；默认 neutral）",
+        description="[deprecated] 旧情绪参数，内部映射为 style；默认 neutral",
     )
 
 

apps/api/app/schemas/tts.py

@@ -16,9 +16,15 @@ 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="情绪（中文/英文：自然/兴奋/沉稳/亲切/开心/悲伤/愤怒/惊讶/恐惧/厌恶 等；通过 instruction 自然语言指令控制）",
+        description="[deprecated] 旧情绪参数，内部映射为 style；新接入请使用 style",
     )
     voice_model: str = Field("", description="语音模型名称")
     voice_clone_profile_id: str = Field("", description="关联的音色克隆档案 ID")
@@ -113,9 +119,14 @@ 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="语速")
-    emotion: str = Field("", 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")
     language: str = Field("zh-CN", description="语言（zh-CN/en-US 等）")
-    pitch: float = Field(1.0, ge=0.5, le=2.0, description="音调（预留，当前未使用）")
+    pitch: float = Field(1.0, ge=0.5, le=2.0, description="音调（0.5-2.0），默认 1.0")
 
 
 class TTSPreviewResponse(BaseModel):

apps/api/app/services/ai_avatar_render_service.py

@@ -61,6 +61,7 @@ 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:
         """创建渲染任务.
@@ -112,6 +113,7 @@ 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/generation_finalize_service.py

@@ -0,0 +1,119 @@
+"""视频生成任务 finalize 服务（#2024）。
+
+Worker 渲染+上传完成后不再自动入库，标记为 awaiting_cover；用户在 Step5 选好封面
+点「完成」时由 API 调用本服务：创建 GeneratedVideo 成品库记录（复用 worker 预计算
+的查重结果）、绑定封面、推进任务到 completed。
+
+与 AI 数字人 ``ai_avatar_render_service.finalize_job`` 模式一致，
+只是走 GenerationTask 而非 AiAvatarRenderJob。
+"""
+
+from __future__ import annotations
+
+import logging
+from datetime import UTC, datetime
+from typing import Optional
+
+from sqlalchemy.orm import Session
+
+logger = logging.getLogger(__name__)
+
+
+class GenerationFinalizeError(Exception):
+    """finalize 业务错误，code 供 API 层映射 HTTP 状态码。"""
+
+    def __init__(self, message: str, code: str = "FinalizeError", status_code: int = 400):
+        super().__init__(message)
+        self.code = code
+        self.status_code = status_code
+
+
+class GenerationFinalizeService:
+    def __init__(self, db: Session):
+        self.db = db
+
+    def finalize_task(self, task_id: str, user_id: str, cover_url: Optional[str] = None):
+        """执行 finalize：状态校验 → 幂等 → 绑定封面 → 入库 → 推进 completed。
+
+        Returns:
+            GeneratedVideo 领域对象
+        """
+        from packages.adapters.sqlalchemy_impl.generated_video_repository import (
+            SQLAlchemyGeneratedVideoRepository,
+        )
+        from packages.adapters.sqlalchemy_impl.generation_task_repository import (
+            SQLAlchemyGenerationTaskRepository,
+        )
+        from packages.adapters.sqlalchemy_impl.models import GeneratedVideoModel
+        from packages.application.generated_video_finalize import finalize_generated_video
+
+        task_repo = SQLAlchemyGenerationTaskRepository(self.db)
+        video_repo = SQLAlchemyGeneratedVideoRepository(self.db)
+
+        task = task_repo.get(task_id)
+        if task is None:
+            raise GenerationFinalizeError(f"任务 {task_id} 不存在", "TaskNotFound", 404)
+
+        # ── 幂等：已入库直接返回 ─────────────────────────────────
+        existing = self.db.query(GeneratedVideoModel).filter(GeneratedVideoModel.generation_task_id == task_id).first()
+        if existing is not None:
+            logger.info("[finalize] 幂等命中 task=%s video=%s", task_id, existing.id)
+            if cover_url and cover_url.strip() and existing.thumbnail_url != cover_url.strip():
+                existing.thumbnail_url = cover_url.strip()
+                task.cover_url = cover_url.strip()
+                self.db.commit()
+            if task.status.value != "completed":
+                try:
+                    task.mark_completed(result_count=1)
+                    if cover_url and cover_url.strip():
+                        task.cover_url = cover_url.strip()
+                    task_repo.update(task)
+                    self.db.commit()
+                except Exception as e:
+                    logger.warning("[finalize] 幂等补 mark_completed 失败: %s", e)
+                    self.db.rollback()
+            return video_repo.get(existing.id)
+
+        # ── 状态校验 ─────────────────────────────────────────────
+        if task.status.value != "awaiting_cover":
+            raise GenerationFinalizeError(
+                f"任务当前状态 {task.status.value}，无法 finalize（需 awaiting_cover）",
+                "InvalidTaskStatus",
+                400,
+            )
+
+        # ── 封面 ─────────────────────────────────────────────────
+        effective_cover = (cover_url or "").strip() if cover_url else (task.cover_url or "").strip()
+
+        # ── 入库+查重（复用 worker 预计算结果） ──────────────────
+        try:
+            result = finalize_generated_video(
+                task=task,
+                session=self.db,
+                effective_cover_url=effective_cover,
+            )
+        except ValueError as e:
+            raise GenerationFinalizeError(str(e), "RenderedOutputMissing", 400) from e
+
+        video_id = result["video_id"]
+
+        # ── 推进任务 ─────────────────────────────────────────────
+        task.mark_completed(result_count=1)
+        task.cover_url = effective_cover
+        # 清理 rendered_output（体积较大，入库后不再需要）
+        meta = dict(task.extra_meta or {})
+        meta.pop("rendered_output", None)
+        task.extra_meta = meta
+        task.updated_at = datetime.now(UTC)
+        task_repo.update(task)
+        self.db.commit()
+
+        video = video_repo.get(video_id)
+        logger.info(
+            "[finalize] task=%s finalized -> video=%s cover=%s dup=%s",
+            task_id,
+            video_id,
+            bool(effective_cover),
+            result.get("is_duplicate", False),
+        )
+        return video

apps/api/app/services/gpu_lipsync_service.py

@@ -49,7 +49,18 @@ class GpuLipsyncService:
         gpu_name: str = "",
         free_vram_mb: int = 0,
         capabilities: str = "musetalk",
-    ) -> GpuWorkerModel:
+        task_id: Optional[str] = None,
+    ) -> tuple[GpuWorkerModel, bool]:
+        """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()
         if worker is None:
@@ -69,8 +80,11 @@ 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.db.commit()
-        return worker
+        return worker, cancel_task
 
     # ── 轮询拉任务（Worker 调用） ──────────────────────────────────
 
@@ -78,8 +92,10 @@ class GpuLipsyncService:
         """原子地认领一条最早的 pending 任务，返回给 worker；无任务返回 None.
 
         同时会：
-        - 把 processing 状态且超时（超过 gpu_task_timeout_seconds 无心跳）的任务
-          回退为 pending（attempt++，超过 MAX_ATTEMPTS 置 failed），让其它 worker 认领。
+        - 把 processing 状态且真正超时（任务心跳停滞超过
+          gpu_task_timeout_seconds；Worker 推理期会通过 register(task_id=...)
+          续心跳，长推理不会误判）的任务回退为 pending（attempt++，超过
+          MAX_ATTEMPTS 置 failed），让其它 worker 认领。
         - 刷新 worker 心跳。
         """
         now = datetime.now(UTC)
@@ -154,6 +170,11 @@ 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:
@@ -238,6 +259,35 @@ 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:
+        """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
+        if task.status != "processing" or task.worker_id != worker_id:
+            logger.info(
+                "忽略过期任务心跳 task=%s worker=%s（status=%s owner=%s）",
+                task_id,
+                worker_id,
+                task.status,
+                task.worker_id,
+            )
+            return False
+        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:
             return
@@ -260,7 +310,13 @@ class GpuLipsyncService:
             self.db.flush()
 
     def _recover_timed_out_tasks(self, now: datetime) -> None:
-        """扫描 processing 状态且超时（无心跳）的任务，回退 pending 或失败."""
+        """扫描 processing 状态且真正超时的任务，回退 pending 或失败。
+
+        判定只看任务自身 last_heartbeat_at：claim 时写入，Worker 推理期间通过
+        /gpu/register(task_id=...) 每 30s 续期。因此仅在 Worker 崩溃/断网
+        （任务心跳停滞超过 gpu_task_timeout_seconds）时才回收，
+        不会因 Worker 主循环忙于推理而误回退。
+        """
         timeout = self.settings.gpu_task_timeout_seconds
         cutoff = now - timedelta(seconds=timeout)
         stuck_tasks = (
@@ -285,3 +341,56 @@ class GpuLipsyncService:
             t.updated_at = now
         if stuck_tasks:
             self.db.flush()
+
+    # ── 业务侧辅助 ──────────────────────────────────────────────────
+
+    def has_available_worker(self) -> bool:
+        """判断是否有 Worker 在心跳新鲜窗口内可用."""
+        stale_cutoff = datetime.now(UTC) - timedelta(seconds=self.settings.gpu_worker_stale_seconds)
+        return (
+            self.db.query(GpuWorkerModel).filter(GpuWorkerModel.last_heartbeat_at >= stale_cutoff).first() is not None
+        )
+
+    def wait_for_result(
+        self,
+        task_id: str,
+        timeout_seconds: Optional[int] = None,
+        poll_interval: Optional[float] = None,
+    ) -> Optional[GpuLipsyncTaskModel]:
+        """同步轮询等待 GPU 任务完成。
+
+        Args:
+            task_id: 任务 ID（由 create_task 返回）
+            timeout_seconds: 总超时，默认取 settings.gpu_lipsync_wait_timeout
+            poll_interval: 轮询间隔秒，默认取 settings.gpu_lipsync_poll_interval
+
+        Returns:
+            终态 task（status=done/failed）；超时返回 None（此时调用方应回退 MediaKit）。
+            等待期间会自动调用 _recover_timed_out_tasks 做超时回收。
+        """
+        import time
+
+        timeout = timeout_seconds if timeout_seconds is not None else self.settings.gpu_lipsync_wait_timeout
+        interval = poll_interval if poll_interval is not None else self.settings.gpu_lipsync_poll_interval
+        deadline = time.monotonic() + timeout
+
+        while True:
+            now = datetime.now(UTC)
+            # 顺手回收超时任务
+            try:
+                self._recover_timed_out_tasks(now)
+                self.db.commit()
+            except Exception as exc:  # noqa: BLE001 - 回收失败不阻塞主流程
+                logger.warning("wait_for_result 回收超时任务异常: %s", exc)
+                self.db.rollback()
+
+            task = self.db.get(GpuLipsyncTaskModel, task_id)
+            if task is None:
+                return None
+            if task.status in ("done", "failed", "cancelled"):
+                return task
+            # pending/processing 继续等
+            if time.monotonic() >= deadline:
+                logger.warning("GPU 任务 %s 等待超时（%ds），回退 MediaKit", task_id, timeout)
+                return None
+            time.sleep(interval)

apps/api/app/services/lipsync_service.py

@@ -29,6 +29,7 @@ from app.services.mediakit_client import (
     MediaKitError,
     get_mediakit_client,
 )
+from app.tasks.lipsync_gpu import lipsync_gpu_process_async
 
 # Celery 异步任务：TTS 合成 + MediaKit 提交（降级路径）
 from app.tasks.lipsync_tts import tts_synthesize_and_submit
@@ -36,6 +37,7 @@ from sqlalchemy.orm import Session
 
 from packages.adapters.sqlalchemy_impl.models import LipsyncJobModel
 from packages.application.cosyvoice_service import CosyVoiceError
+from packages.config import get_api_settings
 from packages.domain.sentence_timings import (
     compute_sentence_timings,
     probe_audio_duration,
@@ -63,6 +65,7 @@ class LipsyncService:
         self.client = client or get_mediakit_client()
         self._cosyvoice = cosyvoice_service
         self._voice_clone_repo = voice_clone_repo
+        self.settings = get_api_settings()
 
     def _get_cosyvoice(self):
         """延迟获取 CosyVoiceService（与 tts 路由一致，含 OSS 预签名配置）."""
@@ -108,6 +111,8 @@ class LipsyncService:
         script_text: str,
         speed: float,
         emotion: str,
+        style: str = "",
+        volume: int = 50,
     ) -> str:
         """TTS 直生：调 CosyVoice 合成音频并转存 OSS，返回可公网访问的音频 URL.
 
@@ -121,7 +126,9 @@ class LipsyncService:
                 text=script_text,
                 voice_id=actual_voice_id,
                 speed=speed,
-                emotion=emotion,  # normalize 在 CosyVoiceService 内部完成
+                style=style,
+                volume=volume,
+                emotion=emotion,
                 language="zh",
             )
         except CosyVoiceError as exc:
@@ -215,7 +222,57 @@ class LipsyncService:
         if timings:
             job.sentence_timings = timings
 
-        # 4. 签名 URL 并提交 MediaKit
+        # 4. 检查是否走 GPU 路径：开关打开 + 有可用 Worker
+        use_gpu = False
+        if self.settings.use_gpu_lipsync:
+            try:
+                from app.services.gpu_lipsync_service import GpuLipsyncService
+
+                gpu_svc = GpuLipsyncService(self.db)
+                if gpu_svc.has_available_worker():
+                    use_gpu = True
+                    logger.info("[lipsync] 检测到可用 GPU Worker，优先走 MuseTalk 本地推理: job_id=%s", job.id)
+                else:
+                    logger.info("[lipsync] GPU 开关已开但无可用 Worker（心跳过期），回退 MediaKit: job_id=%s", job.id)
+            except Exception as exc:
+                logger.warning("[lipsync] GPU 服务初始化失败，回退 MediaKit: job_id=%s err=%s", job.id, exc)
+
+        if use_gpu:
+            try:
+                gpu_task = self._submit_to_gpu_create(job=job, gpu_svc=gpu_svc)
+                if gpu_task is not None:
+                    # GPU 任务已创建，设为 processing 并异步等待结果
+                    job.mediakit_task_id = f"gpu:{gpu_task.id}"
+                    job.status = "processing"
+                    job.updated_at = datetime.now(UTC)
+                    self.db.commit()
+                    # 派发 Celery 异步任务处理 GPU 等待+结果回写
+                    try:
+                        lipsync_gpu_process_async.apply_async(args=(job.id, job.user_id, gpu_task.id))
+                        logger.info(
+                            "[lipsync] GPU 任务已异步派发: job_id=%s gpu_task=%s",
+                            job.id,
+                            gpu_task.id,
+                        )
+                    except Exception as celery_exc:
+                        logger.warning(
+                            "[lipsync] Celery 派发失败，降级同步等待: job_id=%s err=%s",
+                            job.id,
+                            celery_exc,
+                        )
+                        self._submit_to_gpu_wait(job=job, gpu_svc=gpu_svc, gpu_task=gpu_task)
+                    return
+                # create 失败 → 回退 MediaKit
+                logger.warning("[lipsync] GPU 任务创建失败，回退 MediaKit: job_id=%s", job.id)
+                self.db.rollback()
+            except Exception as exc:
+                logger.exception("[lipsync] GPU 路径异常，回退 MediaKit: job_id=%s err=%s", job.id, exc)
+                try:
+                    self.db.rollback()
+                except Exception:
+                    pass
+
+        # 5. 签名 URL 并提交 MediaKit（兜底路径）
         video_url = self._sign_media_url(job.video_url)
         signed_audio_url = self._sign_media_url(job.audio_url)
         job.audio_url = signed_audio_url
@@ -244,6 +301,120 @@ class LipsyncService:
             self.db.commit()
             raise
 
+    # ── GPU MuseTalk 路径 ────────────────────────────────────────────────
+
+    def _is_own_oss_url(self, url: str, storage) -> bool:
+        """判断 URL / 存储 key 是否属于自家 OSS。
+
+        - 裸存储 key（无 scheme）：自家对象
+        - host 与 storage.public_url host 一致：自家对象
+        - 其余 http(s) 公网链接（如 dashscope-result 临时地址）：外部对象
+        """
+        if not url:
+            return False
+        parsed = urlparse(url)
+        if not parsed.scheme:
+            return True  # 裸存储 key
+        public_base = getattr(storage, "public_url", "")
+        own_host = urlparse(public_base).netloc.lower() if public_base else ""
+        return bool(own_host) and parsed.netloc.lower() == own_host
+
+    def _persist_external_audio_for_gpu(self, *, job, storage) -> Optional[str]:
+        """GPU 任务创建前，把外部域名的预合成 TTS 音频转存到自家 OSS。
+
+        Worker 部署在用户家庭网络，dashscope-result 等第三方临时 OSS 地址
+        可能无法访问；转存后 gpu_svc 在 poll 时会签自家预签名 URL 给 Worker。
+        已是自家 OSS 对象（含裸 key）直接返回 None（无需转存）；
+        转存失败返回 None，调用方回退使用原始 URL（最坏情况是 Worker 拉取失败，
+        服务端重试耗尽后回退 MediaKit，不阻断业务）。
+        """
+        if self._is_own_oss_url(job.audio_url, storage):
+            return None
+        try:
+            audio_data = safe_download_bytes(
+                job.audio_url,
+                purpose="lipsync_gpu_tts_audio",
+                allowed_mime_types=ALLOWED_AUDIO_MIME_TYPES,
+                timeout=60.0,
+            )
+            storage_key = f"lipsync-tts/{job.user_id}/{job.id}.mp3"
+            permanent_url = storage.upload_file(io.BytesIO(audio_data), storage_key, content_type="audio/mpeg")
+            logger.info(
+                "[lipsync] GPU 任务外部音频已转存自家 OSS: job_id=%s key=%s",
+                job.id,
+                storage_key,
+            )
+            return permanent_url
+        except Exception as exc:
+            logger.warning(
+                "[lipsync] GPU 任务外部音频转存 OSS 失败，回退原始 URL: job_id=%s err=%s",
+                job.id,
+                exc,
+            )
+            return None
+
+    def _submit_to_gpu_create(self, *, job, gpu_svc) -> Optional[object]:
+        """创建 GPU 任务并立即返回（异步模式）。
+
+        成功返回 gpu_task 对象；创建失败返回 None。
+        不再同步等待结果，结果由 Celery 异步任务 lipsync_gpu_process_async 回写。
+        """
+        storage = get_shared_storage_service()
+        persisted_audio_url = self._persist_external_audio_for_gpu(job=job, storage=storage)
+        audio_url_for_task = persisted_audio_url or job.audio_url
+        gpu_task = gpu_svc.create_task(
+            video_url=job.video_url,
+            audio_url=audio_url_for_task,
+            lipsync_job_id=job.id,
+            user_id=job.user_id,
+            project_id=job.project_id,
+        )
+        logger.info(
+            "[lipsync] 已创建 GPU 任务（异步）: job_id=%s gpu_task=%s",
+            job.id,
+            gpu_task.id,
+        )
+        return gpu_task
+
+    def _submit_to_gpu_wait(self, *, job, gpu_svc, gpu_task) -> None:
+        """同步等待 GPU 结果（Celery 派发失败时的降级路径）。"""
+        final_task = gpu_svc.wait_for_result(gpu_task.id)
+        if final_task is None:
+            logger.warning("[lipsync] GPU 同步等待超时，回退 MediaKit: gpu_task=%s", gpu_task.id)
+            return
+        if final_task.status != "done":
+            logger.warning(
+                "[lipsync] GPU 同步等待失败: gpu_task=%s status=%s",
+                gpu_task.id,
+                final_task.status,
+            )
+            return
+        try:
+            storage = get_shared_storage_service()
+            signed_result_url = storage.get_download_url(
+                final_task.result_url, expires_seconds=MEDIAKIT_URL_TTL_SECONDS
+            )
+            if signed_result_url:
+                final_task.result_url = signed_result_url
+        except Exception as exc:
+            logger.warning(
+                "[lipsync] GPU 结果签名失败: gpu_task=%s err=%s",
+                gpu_task.id,
+                exc,
+            )
+        job.mediakit_task_id = ""
+        job.status = STATUS_COMPLETED
+        job.output_video_url = final_task.result_url
+        job.output_duration = final_task.result_duration or 0.0
+        job.completed_at = datetime.now(UTC)
+        job.updated_at = datetime.now(UTC)
+        self.db.commit()
+        logger.info(
+            "[lipsync] GPU 同步等待完成: job_id=%s duration=%.2f",
+            job.id,
+            job.output_duration,
+        )
+
     # ── 创建任务 ──────────────────────────────────────────────────────────
 
     def create_job(
@@ -257,6 +428,8 @@ 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 = "",
@@ -305,6 +478,7 @@ 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",
@@ -326,6 +500,8 @@ class LipsyncService:
                         voice_id,
                         script_text,
                         speed,
+                        style or "",
+                        volume,
                         emotion or "",
                     )
                 )
@@ -360,6 +536,8 @@ class LipsyncService:
         voice_id: str,
         script_text: str,
         speed: float = 1.0,
+        style: str = "",
+        volume: int = 50,
         emotion: str = "neutral",
     ) -> dict:
         """同步做 TTS 合成 + 下载 + ffprobe + 句子时间戳计算.
@@ -478,6 +656,29 @@ class LipsyncService:
         if job.status in (STATUS_COMPLETED, "failed"):
             return job
 
+        # GPU 异步路径：mediakit_task_id 以 "gpu:" 开头，由 Celery 任务异步更新
+        # 不做 MediaKit 轮询，只检查是否卡住太久（>30 分钟）则标失败
+        if job.mediakit_task_id and job.mediakit_task_id.startswith("gpu:"):
+            if job.status in ("processing", "gpu_processing"):
+                _now = datetime.now(UTC)
+                _upd = job.updated_at
+                if _upd is not None and _upd.tzinfo is None:
+                    _upd = _upd.replace(tzinfo=UTC)
+                stale_minutes = 30
+                if _upd and (_now - _upd).total_seconds() > stale_minutes * 60:
+                    logger.warning(
+                        "GPU 异步任务超时（>%d 分钟），标记失败: job_id=%s",
+                        stale_minutes,
+                        job_id,
+                    )
+                    job.status = "failed"
+                    job.error_message = f"GPU 处理超时（>{stale_minutes} 分钟）"
+                    job.error_code = "GpuTimeout"
+                    job.completed_at = _now
+                    job.updated_at = _now
+                    self.db.commit()
+            return job
+
         # 未提交的任务不轮询
         if not job.mediakit_task_id:
             return job
@@ -582,12 +783,32 @@ class LipsyncService:
     # ── 取消任务 ──────────────────────────────────────────────────────────
 
     def cancel_job(self, job_id: str, user_id: str) -> Optional[LipsyncJobModel]:
-        """取消任务（仅 pending/tts_processing/submitted 状态可取消）."""
+        """取消任务（pending/tts_processing/submitted/processing 状态可取消）.
+
+        当 job 走 GPU 路径（mediakit_task_id 以 "gpu:" 开头）且状态为 processing 时，
+        同步将关联的 GpuLipsyncTask 标记为 cancelled，以便 Worker 心跳时检测到取消信号。
+        """
         job = self.get_job(job_id, user_id)
         if job is None:
             return None
 
-        if job.status in ("pending", "tts_processing", "submitted"):
+        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)
+
             job.status = "cancelled"
             job.updated_at = datetime.now(UTC)
             self.db.commit()

apps/api/app/tasks/lipsync_gpu.py

@@ -0,0 +1,198 @@
+"""GPU MuseTalk 异步推理任务 — 将 GPU 推理等待从 HTTP 请求移至 Celery 后台执行.
+
+优化目标：将 POST /lipsync/jobs 的 API 响应时间从 >200s 降到 <1s。
+任务流程：
+1. 加载 LipsyncJob，获取 gpu_task_id
+2. 调用 GpuLipsyncService.wait_for_result 轮询等待 GPU 完成
+3. 签名结果 URL（7 天），更新 job 为 completed
+4. 失败/超时时：尝试 MediaKit 兜底，若仍失败则标记 job 为 failed
+
+使用 @shared_task 确保被 Worker 侧 celery_app 正确注册。
+"""
+
+import logging
+from datetime import UTC, datetime
+
+from celery import shared_task
+from sqlalchemy.orm import Session
+
+from packages.adapters.sqlalchemy_impl.models import LipsyncJobModel
+from packages.shared.storage import get_shared_storage_service
+
+logger = logging.getLogger(__name__)
+
+# 与 LipsyncService 保持一致
+_MEDIAKIT_URL_TTL_SECONDS = 7 * 24 * 3600
+
+
+def _get_db_session() -> Session:
+    """获取 DB session（兼容 API 和 Worker 两种运行时）."""
+    try:
+        from worker_app.db import SessionLocal  # type: ignore
+    except ImportError:
+        from app.db import SessionLocal  # type: ignore
+    return SessionLocal()
+
+
+def _sign_media_url(url: str) -> str:
+    """对自家 OSS URL 签 7 天预签名。"""
+    if not url:
+        return url
+    try:
+        from urllib.parse import urlparse
+
+        storage = get_shared_storage_service()
+        public_base = getattr(storage, "public_url", "")
+        if not isinstance(public_base, str) or not public_base:
+            return url
+        own_host = urlparse(public_base).netloc.lower()
+        host = urlparse(url).netloc.lower()
+        if not own_host or host != own_host:
+            return url
+        return storage.get_download_url(url, expires_seconds=_MEDIAKIT_URL_TTL_SECONDS)
+    except Exception:
+        return url
+
+
+@shared_task(
+    name="lipsync_gpu_process_async",
+    bind=True,
+    max_retries=0,
+    acks_late=True,
+)
+def lipsync_gpu_process_async(self, job_id: str, user_id: str, gpu_task_id: str) -> None:
+    """异步处理 GPU MuseTalk 推理。
+
+    Args:
+        job_id: LipsyncJob 的 ID
+        user_id: 用户 ID
+        gpu_task_id: GpuLipsyncTask 的 ID
+    """
+    db: Session = _get_db_session()
+    try:
+        job = db.query(LipsyncJobModel).filter_by(id=job_id, user_id=user_id).first()
+        if job is None:
+            logger.error("[lipsync_gpu_async] job 不存在: job_id=%s", job_id)
+            return
+
+        # 确保状态为 processing
+        if job.status not in ("processing", "gpu_processing"):
+            logger.warning(
+                "[lipsync_gpu_async] job 状态异常，跳过: job_id=%s status=%s",
+                job_id,
+                job.status,
+            )
+            return
+
+        from app.services.gpu_lipsync_service import GpuLipsyncService
+
+        gpu_svc = GpuLipsyncService(db)
+        final_task = gpu_svc.wait_for_result(gpu_task_id)
+
+        if final_task is None:
+            logger.warning(
+                "[lipsync_gpu_async] GPU 超时，回退 MediaKit: job_id=%s gpu_task=%s",
+                job_id,
+                gpu_task_id,
+            )
+            _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",
+                job_id,
+                gpu_task_id,
+                final_task.status,
+            )
+            _fallback_to_mediakit(db, job)
+            return
+
+        # 签名结果 URL
+        result_url = final_task.result_url or ""
+        try:
+            storage = get_shared_storage_service()
+            signed = storage.get_download_url(result_url, expires_seconds=_MEDIAKIT_URL_TTL_SECONDS)
+            if signed:
+                result_url = signed
+        except Exception as exc:
+            logger.warning(
+                "[lipsync_gpu_async] 签名失败，用原 URL: job_id=%s err=%s",
+                job_id,
+                exc,
+            )
+
+        job.status = "completed"
+        job.output_video_url = result_url
+        job.output_duration = final_task.result_duration or 0.0
+        job.completed_at = datetime.now(UTC)
+        job.updated_at = datetime.now(UTC)
+        db.commit()
+        logger.info(
+            "[lipsync_gpu_async] GPU 完成: job_id=%s duration=%.2f",
+            job_id,
+            job.output_duration,
+        )
+    except Exception as exc:
+        logger.exception("[lipsync_gpu_async] 异常: job_id=%s err=%s", job_id, exc)
+        try:
+            job = db.query(LipsyncJobModel).filter_by(id=job_id).first()
+            if job:
+                job.status = "failed"
+                job.error_message = f"GPU 异步处理异常: {exc}"
+                job.error_code = "GpuAsyncError"
+                job.updated_at = datetime.now(UTC)
+                db.commit()
+        except Exception:
+            pass
+    finally:
+        db.close()
+
+
+def _fallback_to_mediakit(db: Session, job: LipsyncJobModel) -> None:
+    """GPU 失败时回退到 MediaKit 云端渲染。"""
+    try:
+        from app.services.mediakit_client import MediaKitError, get_mediakit_client
+
+        client = get_mediakit_client()
+        video_url = _sign_media_url(job.video_url)
+        audio_url = _sign_media_url(job.audio_url)
+
+        result = client.submit_lipsync(
+            video_url=video_url,
+            audio_url=audio_url,
+            enable_video_loop=job.enable_video_loop,
+            client_token=job.id,
+        )
+        job.mediakit_task_id = result["task_id"]
+        job.status = "submitted"
+        job.submitted_at = datetime.now(UTC)
+        job.updated_at = datetime.now(UTC)
+        db.commit()
+        logger.info(
+            "[lipsync_gpu_async] 已回退 MediaKit: job_id=%s task_id=%s",
+            job.id,
+            result["task_id"],
+        )
+    except MediaKitError as exc:
+        job.status = "failed"
+        job.error_message = str(exc)
+        job.error_code = exc.code
+        job.updated_at = datetime.now(UTC)
+        db.commit()
+        logger.error("[lipsync_gpu_async] MediaKit 也失败: job_id=%s err=%s", job.id, exc)
+    except Exception as exc:
+        job.status = "failed"
+        job.error_message = f"GPU+MediaKit 均失败: {exc}"
+        job.error_code = "FallbackFailed"
+        job.updated_at = datetime.now(UTC)
+        db.commit()
+        logger.error("[lipsync_gpu_async] 兜底异常: job_id=%s err=%s", job.id, exc)

apps/api/app/tasks/lipsync_tts.py

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

apps/web/e2e/core-douyin-extract.spec.ts

@@ -0,0 +1,117 @@
+import { expect, test, type APIRequestContext, type Page } from "@playwright/test"
+
+const PASSWORD = "SmokePass123!"
+const apiBase = process.env.E2E_API_BASE || "/api/v1"
+const apiOrigin = apiBase.endsWith("/api/v1") ? apiBase.slice(0, -"/api/v1".length) : ""
+
+async function routeBrowserApiToTestApi(page: Page) {
+  if (!apiOrigin) return
+  await page.route("**/api/v1/**", async (route) => {
+    const sourceUrl = new URL(route.request().url())
+    const response = await route.fetch({
+      url: `${apiOrigin}${sourceUrl.pathname}${sourceUrl.search}`,
+    })
+    await route.fulfill({ response })
+  })
+}
+
+async function loginWithRetry(request: APIRequestContext, email: string, password: string) {
+  for (let i = 0; i <= 2; i++) {
+    const r = await request.post(`${apiBase}/auth/login`, { data: { email, password } })
+    if (r.status() !== 429) {
+      expect(r.ok(), `login: ${await r.text()}`).toBeTruthy()
+      return (await r.json()).access_token as string
+    }
+    console.log(`[douyin] 429 retry ${i + 1}/2`)
+    await new Promise((res) => setTimeout(res, 65000))
+  }
+  throw new Error("Login retries exhausted")
+}
+
+/**
+ * #1972 抖音文案提取冒烟
+ *
+ * 路径：文案库页面 → 点「🎬 从抖音提取」→ 粘贴分享文案 → 点「开始提取」
+ * → mock /api/v1/scripts/extract-from-douyin 返回稳定文案 → 断言「新建文案」弹窗中预填了非空文案
+ */
+test.describe("Douyin Script Extraction (#1972)", () => {
+  test("extract flow: open modal, paste link, text prefilled in create modal", async ({
+    page,
+    request,
+  }) => {
+    test.setTimeout(180_000)
+    await page.setViewportSize({ width: 1440, height: 900 })
+
+    const suffix = Math.random().toString(36).slice(2, 8)
+    const email = `e2e-douyin-${suffix}@example.com`
+    await request.post(`${apiBase}/auth/register`, {
+      data: { email, password: PASSWORD, username: `e2e_dy_${suffix}` },
+    })
+    const token = await loginWithRetry(request, email, PASSWORD)
+    const authHeader = { Authorization: `Bearer ${token}` }
+
+    const proj = await request.post(`${apiBase}/projects`, {
+      headers: authHeader,
+      data: { name: `Smoke Douyin ${suffix}` },
+    })
+    const projectId = (await proj.json()).id ?? (await proj.json()).project_id
+    await request.post(`${apiBase}/asset-libraries`, {
+      headers: authHeader,
+      data: { project_id: projectId, name: "Smoke", kind: "video" },
+    })
+
+    await page.addInitScript((t: string) => {
+      window.localStorage.setItem("access_token", t)
+      window.localStorage.setItem(
+        "auth-storage",
+        JSON.stringify({ state: { token: t, user: null } }),
+      )
+    }, token)
+    await routeBrowserApiToTestApi(page)
+
+    // Mock 抖音提取接口返回稳定文案
+    const extractedText = "大家好，今天给大家推荐一款超好用的产品，性价比非常高，快来看看吧！"
+    await page.route("**/api/v1/scripts/extract-from-douyin", (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({ text: extractedText, duration_seconds: 15 }),
+      }),
+    )
+    // 文案列表空态
+    await page.route(
+      (url) => url.pathname.endsWith("/scripts") && !url.pathname.includes("extract-from-douyin"),
+      (route) =>
+        route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({ items: [], total: 0, page: 1, page_size: 20 }),
+        }),
+    )
+
+    await page.goto("/app/scripts")
+    // 文案库页面加载
+    await expect(page.getByText(/文案库|文案/).first()).toBeVisible({ timeout: 30000 })
+
+    // 点「🎬 从抖音提取」按钮
+    await page.getByRole("button", { name: /从抖音提取/ }).click()
+    await expect(page.getByText("从抖音视频提取文案")).toBeVisible({ timeout: 5000 })
+
+    // 在 TextArea 粘贴"抖音分享文案"
+    const textarea = page.locator(".ant-modal textarea").first()
+    await expect(textarea).toBeVisible()
+    await textarea.fill("8.88 复制打开抖音，看看【推荐视频】https://v.douyin.com/abcDEF/")
+
+    // 点「开始提取」
+    await page.getByRole("button", { name: "开始提取" }).click()
+    await expect(page.getByText(/提取中/)).toBeVisible({ timeout: 3000 })
+
+    // 等待抖音弹窗关闭，「新建文案」弹窗打开并预填提取文案
+    await expect(page.getByText("从抖音视频提取文案")).not.toBeVisible({ timeout: 15000 })
+    await expect(page.getByText("新建文案")).toBeVisible({ timeout: 5000 })
+    const createTextarea = page.locator(".ant-modal textarea").first()
+    await expect(createTextarea).toBeVisible()
+    await expect(createTextarea).toHaveValue(new RegExp(extractedText.slice(0, 10)))
+    console.log("[douyin] Extraction flow completed ✓, text length:", extractedText.length)
+  })
+})

apps/web/e2e/core-generation.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test, type APIRequestContext } from "@playwright/test"
+import { expect, test, type APIRequestContext, type Page } from "@playwright/test"
 import * as fs from "node:fs"
 import * as path from "node:path"
 import { fileURLToPath } from "node:url"
@@ -8,7 +8,8 @@ const PASSWORD = "SmokePass123!"
 const apiBase = process.env.E2E_API_BASE || "/api/v1"
 const apiOrigin = apiBase.endsWith("/api/v1") ? apiBase.slice(0, -"/api/v1".length) : ""
 
-const routeBrowserApiToTestApi = async (page: import("@playwright/test").Page) => {
+/** 将浏览器侧 /api/v1 请求路由到 Playwright request 源（支持跨域） */
+async function routeBrowserApiToTestApi(page: Page) {
   if (!apiOrigin) return
   await page.route("**/api/v1/**", async (route) => {
     const sourceUrl = new URL(route.request().url())
@@ -24,276 +25,358 @@ async function loginWithRetry(
   email: string,
   password: string,
   maxRetries = 2,
-) {
+): Promise<string> {
   for (let i = 0; i <= maxRetries; i++) {
-    const response = await request.post(`${apiBase}/auth/login`, {
-      data: { email, password },
-    })
-    if (response.status() !== 429) return response
-    console.log(`[login] 触发限流，等待 65s 后重试 (${i + 1}/${maxRetries})`)
+    const resp = await request.post(`${apiBase}/auth/login`, { data: { email, password } })
+    if (resp.status() !== 429) {
+      expect(resp.ok(), `Login should succeed: ${await resp.text()}`).toBeTruthy()
+      const data = await resp.json()
+      return data.access_token
+    }
+    console.log(`[login] 429 rate limited, retry ${i + 1}/${maxRetries} after 65s`)
     await new Promise((r) => setTimeout(r, 65000))
   }
-  return request.post(`${apiBase}/auth/login`, {
-    data: { email, password },
+  throw new Error("Login failed after retries")
+}
+
+/**
+ * 注册新用户 + 建项目/视频库/上传 sample.mp4，等素材 ready。返回 { token, projectId, libraryId, assetId }。
+ */
+async function setupFreshUser(
+  request: APIRequestContext,
+  label: string,
+): Promise<{ token: string; libraryId: string; assetId: string; suffix: string }> {
+  const suffix = Math.random().toString(36).slice(2, 8)
+  const email = `e2e-${label}-${suffix}@example.com`
+  await request.post(`${apiBase}/auth/register`, {
+    data: { email, password: PASSWORD, username: `e2e_${label}_${suffix}` },
   })
-}
+  const token = await loginWithRetry(request, email, PASSWORD)
+  const auth = { Authorization: `Bearer ${token}` }
 
-type ProjectResponse = { id: string }
-type LibraryResponse = { id: string }
-type AssetListResponse = {
-  items: Array<{
-    id: string
-    name: string
-    status: string
-  }>
-}
+  const proj = await request.post(`${apiBase}/projects`, {
+    headers: auth,
+    data: { name: `Smoke ${label} ${suffix}` },
+  })
+  expect(proj.ok(), `create project: ${await proj.text()}`).toBeTruthy()
+  const projectId = (await proj.json()).id ?? (await proj.json()).project_id
 
-test.describe("Core generation flow", () => {
-  test.describe.configure({ timeout: 360_000 })
+  const lib = await request.post(`${apiBase}/asset-libraries`, {
+    headers: auth,
+    data: { project_id: projectId, name: "Smoke", kind: "video" },
+  })
+  expect(lib.ok(), `create library: ${await lib.text()}`).toBeTruthy()
+  const libraryId = (await lib.json()).id
 
-  test("walks through wizard with count modal and starts generation", async ({ page, request }) => {
-    test.setTimeout(360_000)
-
-    await routeBrowserApiToTestApi(page)
-    const suffix = Date.now().toString(36)
-    const email = `e2e-gen-${suffix}@example.com`
-    const username = `e2e_gen_${suffix}`
-    const libraryName = `E2E Gen Lib ${suffix}`
-
-    // Register
-    const register = await request.post(`${apiBase}/auth/register`, {
-      data: { email, username, password: PASSWORD, display_name: username },
-    })
-    expect(register.status()).toBe(201)
-    const registerData = (await register.json()) as { user_id: string }
-
-    // Login
-    const login = await loginWithRetry(request, email, PASSWORD)
-    expect(login.status()).toBe(200)
-    const loginData = (await login.json()) as { access_token: string }
-    const headers = { Authorization: `Bearer ${loginData.access_token}` }
-
-    // Create project
-    const project = await request.post(`${apiBase}/projects`, {
-      headers,
-      data: { name: `E2E Gen Proj ${suffix}` },
-    })
-    expect(project.status()).toBe(200)
-    const projectData = (await project.json()) as ProjectResponse
-
-    // Create asset library
-    const library = await request.post(`${apiBase}/asset-libraries`, {
-      headers,
-      data: { project_id: projectData.id, name: libraryName, kind: "video" },
-    })
-    expect(library.status()).toBe(200)
-    const libraryData = (await library.json()) as LibraryResponse
-
-    // Upload source video
-    const sourceFileName = "e2e-gen-source.mp4"
-    const sampleVideoPath = path.join(__dirname, "fixtures", "sample.mp4")
-    const sampleVideoBuffer = fs.readFileSync(sampleVideoPath)
-    const upload = await request.post(`${apiBase}/upload`, {
-      headers,
-      multipart: {
-        project_id: projectData.id,
-        library_id: libraryData.id,
-        file: {
-          name: sourceFileName,
-          mimeType: "video/mp4",
-          buffer: sampleVideoBuffer,
-        },
+  const samplePath = path.join(__dirname, "fixtures", "sample.mp4")
+  const sampleBuf = fs.readFileSync(samplePath)
+  const up = await request.post(`${apiBase}/upload`, {
+    headers: auth,
+    multipart: {
+      project_id: projectId,
+      library_id: libraryId,
+      file: {
+        name: "sample.mp4",
+        mimeType: "video/mp4",
+        buffer: sampleBuf,
       },
-    })
-    expect(upload.status()).toBe(200)
+    },
+  })
+  expect(up.ok(), `upload sample: ${await up.text()}`).toBeTruthy()
+  const assetId = (await up.json()).asset_id
+  await expect
+    .poll(
+      async () => {
+        const r = await request.get(`${apiBase}/assets/${assetId}`, { headers: auth })
+        return r.ok() ? (await r.json()).status : "pending"
+      },
+      { timeout: 90_000, intervals: [3000, 3000, 5000] },
+    )
+    .toBe("ready")
+  return { token, libraryId, assetId, suffix }
+}
 
-    // Wait for asset to be ready
-    await expect
-      .poll(
-        async () => {
-          const assets = await request.get(`${apiBase}/assets`, {
-            headers,
-            params: { library_id: libraryData.id },
-          })
-          if (!assets.ok()) return `http_${assets.status()}`
-          const data = (await assets.json()) as AssetListResponse
-          const asset = data.items.find((a) => a.name === sourceFileName)
-          if (!asset) return "missing"
-          return asset.status
-        },
-        { timeout: 30_000, intervals: [1_000, 2_000, 3_000] },
+/**
+ * #1970 智能剪辑核心冒烟（新 5 步向导）
+ *
+ * 新流程：选择模式 → 选择素材 → 选择标题 → 确认生成 → 选择封面
+ *
+ * 两条路径：
+ *   1) 随机混剪（默认）→ Step1 下一步 → 配音选择弹窗 → Step2 选素材 → 数量弹窗
+ *      → Step3 标题 → Step4 确认生成 → 断言任务创建
+ *   2) 叙事剪辑 → Step1 切模式 → 下一步 → 文案选择弹窗 → TTS 弹窗选音色（mock 合成）
+ *      → Step2 AI 提示卡可见 + 选素材 → 数量弹窗 → Step3 标题 → Step4 确认生成
+ *      → 断言任务创建
+ */
+test.describe("Core Smart-Edit Flow (#1970)", () => {
+  test("random mode: 5-step wizard creates generation task", async ({ page, request }) => {
+    test.setTimeout(600_000)
+    await page.setViewportSize({ width: 1440, height: 1000 })
+    const { token, suffix } = await setupFreshUser(request, "random")
+    const authHeader = { Authorization: `Bearer ${token}` }
+
+    // 确保默认模板存在（智能剪辑页依赖模板）
+    const tmpls = await request.get(`${apiBase}/templates`, { headers: authHeader })
+    const tmplsJson = await tmpls.json()
+    const templates = Array.isArray(tmplsJson)
+      ? tmplsJson
+      : Array.isArray(tmplsJson.items)
+        ? tmplsJson.items
+        : []
+    expect(templates.length).toBeGreaterThan(0)
+
+    // 注入登录态 + 路由 API
+    await page.addInitScript((t: string) => {
+      window.localStorage.setItem("access_token", t)
+      window.localStorage.setItem(
+        "auth-storage",
+        JSON.stringify({ state: { token: t, user: null } }),
       )
-      .toBe("ready")
+    }, token)
+    await routeBrowserApiToTestApi(page)
 
-    // GET /templates auto-creates a default template for new users
-    const templatesResp = await request.get(`${apiBase}/templates`, { headers })
-    expect(templatesResp.status(), await templatesResp.text()).toBe(200)
-    const templatesData = (await templatesResp.json()) as {
-      items: Array<{ id: string }>
-    }
-    expect(Array.isArray(templatesData.items)).toBe(true)
-    expect(templatesData.items.length).toBeGreaterThan(0)
-    const templateId = templatesData.items[0].id
-    expect(templateId).toBeTruthy()
-
-    // Set auth in localStorage
-    await page.addInitScript(
-      ({ token, user }) => {
-        localStorage.setItem("access_token", token)
-        localStorage.setItem(
-          "auth-storage",
-          JSON.stringify({
-            state: { user, isAuthenticated: true },
-            version: 0,
+    // ── 提前 mock 配音列表（VoiceSelectModal 查询 /assets?kind=voice） ──
+    await page.route(
+      (url) => url.pathname.endsWith("/assets") && url.searchParams.get("kind") === "voice",
+      (route) =>
+        route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({
+            items: [
+              {
+                id: `asset-voice-${suffix}`,
+                name: "测试配音.mp3",
+                file_url: "data:audio/mpeg;base64,",
+                duration: 10,
+                file_size: 1024,
+                kind: "voice",
+                status: "ready",
+              },
+            ],
+            total: 1,
           }),
-        )
-      },
-      {
-        token: loginData.access_token,
-        user: {
-          id: registerData.user_id,
-          user_id: registerData.user_id,
-          email,
-          username,
-          display_name: username,
-          is_email_verified: true,
-          email_verified: true,
-        },
-      },
+        }),
     )
 
-    // Navigate to generate page
     await page.goto("/app/generate")
     await expect(page.getByRole("heading", { name: "智能剪辑" })).toBeVisible({
-      timeout: 20_000,
+      timeout: 30000,
     })
 
-    // 5步向导：素材(1)→配音(2)→标题(3)→确认生成(4)→封面(5)
+    // ── Step 1：默认随机混剪选中，点下一步 ──────────────────────────
+    await expect(page.getByText("选择模式", { exact: true })).toBeVisible()
+    await expect(page.getByText("随机混剪")).toBeVisible()
+    await page.getByRole("button", { name: /下一步/ }).click()
 
-    // ── Step 1: 素材选择 ──
-    await expect(page.getByRole("heading", { name: /选择素材/ })).toBeVisible()
-    const librarySelect = page.locator("select").first()
-    await librarySelect.selectOption({ label: libraryName })
-    const materialCard = page.getByTestId("material-card").filter({ hasText: sourceFileName })
-    await expect(materialCard).toBeVisible({ timeout: 10_000 })
-    await materialCard.click({ position: { x: 15, y: 15 } })
-    await expect(materialCard.getByTestId("material-card-check")).toBeVisible({ timeout: 5_000 })
-    await page.getByRole("button", { name: "下一步" }).click()
+    // ── 配音选择弹窗：选第一个配音 → 确认 ─────────────────────────
+    await expect(page.getByText("🎙️ 选择配音")).toBeVisible({ timeout: 5000 })
+    await page.getByText("测试配音.mp3").first().click()
+    await page.getByRole("button", { name: "确认选择" }).click()
+    await expect(page.getByText("🎙️ 选择配音")).not.toBeVisible()
 
-    // ── 数量弹窗（PreviewCountModal） ──
-    await expect(page.getByRole("heading", { name: "要生成几个视频？" })).toBeVisible({
-      timeout: 5_000,
-    })
+    // ── Step 2：选择素材 ──────────────────────────────────────────
+    await expect(page.getByText("选择素材", { exact: true })).toBeVisible({ timeout: 10000 })
+    await page.getByTestId("material-card").first().click()
+    await page.getByRole("button", { name: /下一步/ }).click()
+
+    // ── 数量弹窗：默认 1 个 → 确认 ───────────────────────────────
+    await expect(page.getByText("要生成几个视频？")).toBeVisible({ timeout: 5000 })
     await page.getByRole("button", { name: "生成 1 个视频" }).click()
 
-    // ── Step 2: 配音（新注册用户无配音素材，跳过） ──
-    await expect(page.getByRole("heading", { name: /选择配音/ })).toBeVisible({ timeout: 15000 })
-    await page.getByRole("button", { name: "下一步" }).click()
-
-    // ── Step 3: 标题设置 ──
-    await expect(page.getByRole("heading", { name: /选择标题/ })).toBeVisible({ timeout: 15000 })
-    await page.waitForTimeout(2000)
-
-    const titleInput = page.locator(".ant-select-auto-complete input")
+    // ── Step 3：填写标题 ──────────────────────────────────────────
+    await expect(page.getByText("选择标题", { exact: true })).toBeVisible({ timeout: 10000 })
+    const titleInput = page.getByPlaceholder("输入或从标题库选择")
     await expect(titleInput).toBeVisible({ timeout: 5000 })
-    await titleInput.fill(`E2E Test ${suffix}`)
+    await titleInput.fill(`测试随机剪辑 ${suffix}`)
+    await page.getByRole("button", { name: /下一步/ }).click()
 
-    // Step 3 底部是「下一步 →」，点击进入 Step 4（确认生成）
-    await page.getByRole("button", { name: "下一步" }).click()
+    // ── Step 4：确认生成 ──────────────────────────────────────────
+    await expect(page.getByText("📋 生成配置")).toBeVisible({ timeout: 10000 })
+    await expect(page.getByText("随机混剪")).toBeVisible()
+    const confirmBtn = page.getByRole("button", { name: /确认生成视频/ })
+    await expect(confirmBtn).toBeEnabled({ timeout: 5000 })
 
-    // ── Step 4: 确认生成 ──
-    // 等待实时预览就绪（占位消失）
-    await page
-      .getByText("准备预览素材")
-      .waitFor({ state: "detached", timeout: 30_000 })
-      .catch(() => {})
+    const createTask = page.waitForResponse(
+      (r) => r.url().includes("/generation/tasks") && r.request().method() === "POST",
+      { timeout: 30000 },
+    )
+    await confirmBtn.click()
+    const taskResp = await createTask
+    expect(taskResp.ok(), `Create task: ${await taskResp.text()}`).toBeTruthy()
+    const taskId = (await taskResp.json()).id ?? (await taskResp.json()).task_id
+    console.log("[random] Generation task created:", taskId)
+    await expect(page.getByText(/正在生成|提交/)).toBeVisible({ timeout: 15000 })
+    console.log("[random] Wizard flow completed ✓")
+  })
 
-    // Step 4 底部是「✨ 确认生成视频」
-    const confirmBtn = page.locator(".xx-step-actions .xx-btn-primary").first()
-    await expect(confirmBtn).toBeVisible({ timeout: 15_000 })
+  test("narrative mode: select script + mock TTS, create generation task", async ({
+    page,
+    request,
+  }) => {
+    test.setTimeout(600_000)
+    await page.setViewportSize({ width: 1440, height: 1000 })
+    const { token, suffix } = await setupFreshUser(request, "narrative")
 
-    // 先挂 API 监听再点击
-    const generatePromise = page.waitForResponse(
-      (response) => {
-        const url = response.url()
-        const path = new URL(url).pathname
-        return response.request().method() === "POST" && path.endsWith("/generation/tasks")
-      },
-      { timeout: 30_000 },
+    await page.addInitScript((t: string) => {
+      window.localStorage.setItem("access_token", t)
+      window.localStorage.setItem(
+        "auth-storage",
+        JSON.stringify({ state: { token: t, user: null } }),
+      )
+    }, token)
+    await routeBrowserApiToTestApi(page)
+
+    // ── Mock 文案列表、音色、TTS 合成（避免真实合成） ──────────────
+    const mockScriptId = `script-mock-${suffix}`
+    const mockVoiceId = `preset-voice-${suffix}`
+    const mockJobId = `tts-job-${suffix}`
+
+    // 文案列表（ScriptSelectModal 查询 /scripts）
+    await page.route("**/api/v1/scripts**", (route) => {
+      const url = new URL(route.request().url())
+      if (url.pathname.includes("/extract-from-douyin")) {
+        route.continue()
+        return
+      }
+      route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          items: [
+            {
+              id: mockScriptId,
+              title: "测试带货文案",
+              content: "这是一段测试用的带货文案内容，用于 E2E 冒烟测试。",
+              tags: ["带货"],
+              title_category: "daihuo",
+              created_at: new Date().toISOString(),
+              updated_at: new Date().toISOString(),
+            },
+          ],
+          total: 1,
+          page: 1,
+          page_size: 200,
+        }),
+      })
+    })
+
+    // 预设音色（TtsVoiceModal 查询 GET /voices/presets）
+    await page.route("**/api/v1/voices/presets**", (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          items: [
+            {
+              voice_id: mockVoiceId,
+              name: "晓晓（女声）",
+              description: "温柔女声",
+              gender: "female",
+              language: "zh-CN",
+              preview_url: null,
+              tags: ["温柔"],
+            },
+          ],
+          total: 1,
+        }),
+      }),
     )
 
-    await confirmBtn.click()
+    // 克隆音色：空列表
+    await page.route(
+      (url) => url.pathname.endsWith("/voice-clones"),
+      (route) =>
+        route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({ items: [] }),
+        }),
+    )
 
-    // 验证生成 API 被调用
-    const genResp = await generatePromise.catch(() => null)
-    if (!genResp) {
-      // staging 预览未就绪导致按钮校验拦截，未触发 API — 向导导航仍通过
-      console.log(
-        "[E2E] Generation API not triggered (preview not ready) — wizard navigation verified",
-      )
-    } else if (genResp.ok()) {
-      const genData = (await genResp.json()) as {
-        items: Array<{ id: string; status: string }>
-        total: number
-      }
-      expect(genData.items.length).toBeGreaterThan(0)
+    // TTS 合成：直接返回 completed 任务
+    await page.route("**/api/v1/tts/synthesize", (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({ job_id: mockJobId, status: "queued" }),
+      }),
+    )
+    await page.route(`**/api/v1/tts/jobs/${mockJobId}/status`, (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          job_id: mockJobId,
+          status: "completed",
+          progress: 100,
+          audio_url: "data:audio/mpeg;base64,",
+          duration: 5,
+        }),
+      }),
+    )
+    await page.route(`**/api/v1/tts/jobs/${mockJobId}/save-to-library`, (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({ id: `tts-asset-${suffix}`, name: "AI合成配音" }),
+      }),
+    )
 
-      // race：渲染完成 vs 生成失败/超时
-      const downloadReady = page
-        .getByText("视频生成完成")
-        .isVisible({ timeout: 180_000 })
-        .then((v) => (v ? "completed" : null))
-      const generationFailed = page
-        .getByText(/生成失败|重新生成/)
-        .isVisible({ timeout: 180_000 })
-        .then((v) => (v ? "failed" : null))
-
-      const outcome = await Promise.any([downloadReady, generationFailed]).catch(() => "timeout")
-
-      if (outcome === "completed") {
-        await page.getByRole("button", { name: /下一步：选择封面/ }).click()
-        await expect(page.getByRole("heading", { name: /选择封面/ })).toBeVisible({
-          timeout: 30_000,
-        })
-      } else {
-        console.log(`[E2E] Video rendering ${outcome} on staging — wizard flow verified`)
-      }
-    } else {
-      console.log(`[E2E] Generate API returned ${genResp.status()}, wizard flow test still passes`)
-    }
-
-    // 验证成品库页面加载
-    await page.goto("/app/products")
-    await expect(page).toHaveURL(/\/app\/products/)
-    await expect(page.locator(".xx-products-page")).toBeVisible({ timeout: 15_000 })
-
-    await page.unrouteAll({ behavior: "ignoreErrors" })
-  })
-
-  test("generation task API creates and lists tasks", async ({ request }) => {
-    const suffix = Date.now().toString(36)
-    const email = `e2e-gen-api-${suffix}@example.com`
-    const username = `e2e_gen_api_${suffix}`
-
-    const register = await request.post(`${apiBase}/auth/register`, {
-      data: { email, username, password: PASSWORD, display_name: username },
+    await page.goto("/app/generate")
+    await expect(page.getByRole("heading", { name: "智能剪辑" })).toBeVisible({
+      timeout: 30000,
     })
-    expect(register.status()).toBe(201)
 
-    const login = await loginWithRetry(request, email, PASSWORD)
-    expect(login.status()).toBe(200)
-    const loginData = (await login.json()) as { access_token: string }
-    const headers = { Authorization: `Bearer ${loginData.access_token}` }
+    // ── Step 1：切到叙事剪辑 → 下一步 ────────────────────────────
+    await expect(page.getByText("选择模式", { exact: true })).toBeVisible()
+    await page.getByText("叙事剪辑").click()
+    await page.getByRole("button", { name: /下一步/ }).click()
 
-    const project = await request.post(`${apiBase}/projects`, {
-      headers,
-      data: { name: `E2E API Proj ${suffix}` },
-    })
-    expect(project.status()).toBe(200)
+    // ── 文案选择弹窗：选第一条 → 确认 ─────────────────────────────
+    await expect(page.getByText("📝 选择文案")).toBeVisible({ timeout: 5000 })
+    await page.getByText("测试带货文案").first().click()
+    await page.getByRole("button", { name: "确认选择" }).click()
+    await expect(page.getByText("📝 选择文案")).not.toBeVisible()
 
-    const tasks = await request.get(`${apiBase}/tasks`, { headers })
-    expect(tasks.status()).toBe(200)
-    const tasksData = await tasks.json()
-    expect(Array.isArray(tasksData.items)).toBe(true)
+    // ── TTS 音色弹窗：选系统音色 → 合成 ─────────────────────────
+    await expect(page.getByText("🎙️ 合成配音")).toBeVisible({ timeout: 5000 })
+    await page.getByText("晓晓（女声）").first().click()
+    await page.getByRole("button", { name: "🎧 合成配音" }).click()
+    await expect(page.getByText("🎙️ 合成配音")).not.toBeVisible({ timeout: 30000 })
+
+    // ── Step 2：AI 匹配提示卡可见 + 选素材 ────────────────────────
+    await expect(page.getByText("选择素材", { exact: true })).toBeVisible({ timeout: 10000 })
+    await expect(page.getByText(/AI智能匹配/)).toBeVisible()
+    await page.getByTestId("material-card").first().click()
+    await page.getByRole("button", { name: /下一步/ }).click()
+
+    // ── 数量弹窗 ─────────────────────────────────────────────────
+    await expect(page.getByText("要生成几个视频？")).toBeVisible({ timeout: 5000 })
+    await page.getByRole("button", { name: "生成 1 个视频" }).click()
+
+    // ── Step 3：填写标题（handleScriptModalConfirm 已预填 script.title，但我们再覆盖一次） ─
+    await expect(page.getByText("选择标题", { exact: true })).toBeVisible({ timeout: 10000 })
+    const titleInput2 = page.getByPlaceholder("输入或从标题库选择")
+    await expect(titleInput2).toBeVisible({ timeout: 5000 })
+    await titleInput2.fill(`测试叙事剪辑 ${suffix}`)
+    await page.getByRole("button", { name: /下一步/ }).click()
+
+    // ── Step 4：确认生成 ──────────────────────────────────────────
+    await expect(page.getByText("📋 生成配置")).toBeVisible({ timeout: 10000 })
+    await expect(page.getByText("叙事剪辑")).toBeVisible()
+    const confirmBtn2 = page.getByRole("button", { name: /确认生成视频/ })
+    await expect(confirmBtn2).toBeEnabled({ timeout: 5000 })
+
+    const createTask2 = page.waitForResponse(
+      (r) => r.url().includes("/generation/tasks") && r.request().method() === "POST",
+      { timeout: 30000 },
+    )
+    await confirmBtn2.click()
+    const taskResp2 = await createTask2
+    expect(taskResp2.ok(), `Create task: ${await taskResp2.text()}`).toBeTruthy()
+    console.log("[narrative] Generation task created:", (await taskResp2.json()).id)
+    await expect(page.getByText(/正在生成|提交/)).toBeVisible({ timeout: 15000 })
+    console.log("[narrative] Wizard flow completed ✓")
   })
 })

apps/web/e2e/core-navigation.spec.ts

@@ -0,0 +1,105 @@
+import { expect, test, type APIRequestContext, type Page } from "@playwright/test"
+
+const PASSWORD = "SmokePass123!"
+const apiBase = process.env.E2E_API_BASE || "/api/v1"
+const apiOrigin = apiBase.endsWith("/api/v1") ? apiBase.slice(0, -"/api/v1".length) : ""
+
+async function routeBrowserApiToTestApi(page: Page) {
+  if (!apiOrigin) return
+  await page.route("**/api/v1/**", async (route) => {
+    const sourceUrl = new URL(route.request().url())
+    const response = await route.fetch({
+      url: `${apiOrigin}${sourceUrl.pathname}${sourceUrl.search}`,
+    })
+    await route.fulfill({ response })
+  })
+}
+
+async function loginWithRetry(request: APIRequestContext, email: string, password: string) {
+  for (let i = 0; i <= 2; i++) {
+    const r = await request.post(`${apiBase}/auth/login`, { data: { email, password } })
+    if (r.status() !== 429) {
+      expect(r.ok(), `login: ${await r.text()}`).toBeTruthy()
+      return (await r.json()).access_token as string
+    }
+    console.log(`[nav] 429 retry ${i + 1}/2`)
+    await new Promise((res) => setTimeout(res, 65000))
+  }
+  throw new Error("Login retries exhausted")
+}
+
+/**
+ * 核心页面导航冒烟：侧边栏主要入口能访问、文案库/配音库页面能正常加载（不出白屏/无致命 js error）
+ */
+test.describe("Core Navigation", () => {
+  let authToken: string
+
+  test.beforeAll(async ({ request }) => {
+    const suffix = Math.random().toString(36).slice(2, 8)
+    const email = `e2e-nav-${suffix}@example.com`
+    await request.post(`${apiBase}/auth/register`, {
+      data: { email, password: PASSWORD, username: `e2e_nav_${suffix}` },
+    })
+    authToken = await loginWithRetry(request, email, PASSWORD)
+    const authHeader = { Authorization: `Bearer ${authToken}` }
+    const proj = await request.post(`${apiBase}/projects`, {
+      headers: authHeader,
+      data: { name: `Smoke Nav ${suffix}` },
+    })
+    if (proj.ok()) {
+      const projectId = (await proj.json()).id ?? (await proj.json()).project_id
+      await request.post(`${apiBase}/asset-libraries`, {
+        headers: authHeader,
+        data: { project_id: projectId, name: "Nav Lib", kind: "video" },
+      })
+    }
+  })
+
+  test.beforeEach(async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 900 })
+    await page.addInitScript((t: string) => {
+      window.localStorage.setItem("access_token", t)
+      window.localStorage.setItem(
+        "auth-storage",
+        JSON.stringify({ state: { token: t, user: null } }),
+      )
+    }, authToken)
+    await routeBrowserApiToTestApi(page)
+  })
+
+  const navCases = [
+    { path: "/app/dashboard", marker: /概览|工作台|最近/i, name: "概览" },
+    { path: "/app/generate", marker: /智能剪辑|剪辑/, name: "智能剪辑" },
+    { path: "/app/assets", marker: /视频库|素材/, name: "视频库" },
+    { path: "/app/scripts", marker: /文案/, name: "文案库" },
+    { path: "/app/voices", marker: /配音|我的音色|配音库/, name: "配音库" },
+    { path: "/app/products", marker: /成品|作品/, name: "成品库" },
+    { path: "/app/history", marker: /历史|任务/, name: "任务历史" },
+    { path: "/app/tasks", marker: /任务中心|任务列表/, name: "任务中心" },
+    { path: "/app/points", marker: /积分|我的积分/, name: "积分中心" },
+  ]
+
+  for (const c of navCases) {
+    test(`visit ${c.name} (${c.path}) loads without fatal pageerror`, async ({ page }) => {
+      const errors: Error[] = []
+      page.on("pageerror", (e) => errors.push(e))
+      await page.goto(c.path)
+      await expect(page.locator("body")).not.toBeEmpty({ timeout: 20000 })
+      // 过滤掉常见第三方/非致命错误
+      const fatal = errors.filter(
+        (e) =>
+          !/ResizeObserver|Loading chunk|network error|Failed to fetch|chunkLoadError/i.test(
+            e.message,
+          ),
+      )
+      expect(fatal, `${c.name} pageerrors: ${fatal.map((e) => e.message).join("; ")}`).toHaveLength(
+        0,
+      )
+      await expect(
+        page.getByText(c.marker).first(),
+        `${c.name} should show relevant text`,
+      ).toBeVisible({ timeout: 15000 })
+      console.log(`[nav] ${c.name} loaded ✓`)
+    })
+  }
+})

apps/web/package-lock.json

@@ -12,6 +12,8 @@
         "@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",
@@ -3005,9 +3007,9 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.21",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
-      "integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
+      "version": "1.11.23",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.23.tgz",
+      "integrity": "sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==",
       "license": "MIT"
     },
     "node_modules/debug": {

apps/web/package.json

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

apps/web/src/api/cover-templates.ts

@@ -3,7 +3,7 @@
  * 后端路由: /api/v1/cover-templates
  */
 import apiClient from "./client"
-import type { CoverTemplate } from "@/pages/generate/types/cover"
+import type { CoverTemplate, CoverEditorConfig } from "@/pages/generate/types/cover"
 
 export interface CoverTemplateListResponse {
   items: CoverTemplate[]
@@ -12,14 +12,7 @@ export interface CoverTemplateListResponse {
 
 export interface CoverTemplateCreateRequest {
   name: string
-  config?: {
-    background_enabled?: boolean
-    background_color?: string
-    portrait_enabled?: boolean
-    title_text?: string
-    subtitle_text?: string
-    mask_enabled?: boolean
-  }
+  config?: CoverEditorConfig
 }
 
 export type CoverTemplateUpdateRequest = Partial<CoverTemplateCreateRequest>

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

@@ -7,8 +7,19 @@ export interface GenerateCoverTitleConfig {
   font_color?: string
   position?: string
   bold?: boolean
-  stroke?: boolean
-  shadow?: 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
 }
 
 export interface GenerateCoverRequest {

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

@@ -0,0 +1,26 @@
+import apiClient from "../client"
+
+/** #2024 Step5 「完成」入库 —— 将 awaiting_cover 任务正式写入成品库 */
+export interface FinalizeGenerationRequest {
+  /** 用户选定的封面图片 URL；为空则使用任务默认封面（自动截帧/智能封面） */
+  cover_url?: string
+}
+
+export interface FinalizeGenerationResponse {
+  video_id: string
+  cover_url: string
+  file_url: string
+  /** success=新建成功；already_finalized=幂等返回已有记录 */
+  status: string
+}
+
+export const finalizeGeneration = async (
+  taskId: string,
+  params: FinalizeGenerationRequest = {},
+): Promise<FinalizeGenerationResponse> => {
+  const response = await apiClient.post<FinalizeGenerationResponse>(
+    `/generation/tasks/${taskId}/finalize`,
+    params,
+  )
+  return response.data
+}

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,8 +89,34 @@ export interface CreateGenerationTaskRequest {
     font_color?: string
     position?: string
     bold?: boolean
-    stroke?: boolean
-    shadow?: 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
   }
   /** 关联的草稿 ID（编辑流程数据链路用） */
   source_edit_plan_id?: string

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

@@ -54,6 +54,8 @@ 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,6 +18,9 @@ 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

@@ -0,0 +1,71 @@
+/**
+ * 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,6 +17,8 @@ export interface TTSSynthesizeRequest {
   output_name?: string
   language?: string
   emotion?: string
+  /** 配音风格预设（自然亲切/激动兴奋/沉稳专业/温柔甜美/新闻播报/直播带货），不传默认 natural */
+  style?: string
   speed?: number
   voice_model?: string
   voice_clone_profile_id?: string
@@ -106,6 +108,8 @@ 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/common/PointsBadge/index.tsx

@@ -17,6 +17,7 @@ import {
 } from "@ant-design/icons"
 import { useNavigate } from "react-router-dom"
 import { usePointsStore } from "@/store/pointsStore"
+import { ENABLE_CREDIT_SYSTEM } from "@/config/features"
 import "./PointsBadge.css"
 
 const { Text, Paragraph } = Typography
@@ -32,9 +33,13 @@ const PointsBadge: React.FC = () => {
   const { balance, membership, subscription, dailyUsage, init, loading } = usePointsStore()
 
   useEffect(() => {
+    if (!ENABLE_CREDIT_SYSTEM) return
     if (!balance) init()
   }, [balance, init])
 
+  // 功能开关：积分系统关闭时直接隐藏徽章
+  if (!ENABLE_CREDIT_SYSTEM) return null
+
   // 余额：优先用 membership.points_balance（冗余字段），降级 balance.balance
   const bal = membership?.points_balance ?? balance?.balance ?? 0
   const lowBalance = bal > 0 && bal < 10

apps/web/src/components/common/PointsCost/index.tsx

@@ -15,6 +15,7 @@ import React, { useMemo } from "react"
 import { Tooltip } from "antd"
 import { WarningOutlined } from "@ant-design/icons"
 import { usePointsStore } from "@/store/pointsStore"
+import { ENABLE_CREDIT_SYSTEM } from "@/config/features"
 import type { PointsSource } from "@/api/points/types"
 import "./PointsCost.css"
 
@@ -53,7 +54,7 @@ const PointsCost: React.FC<Props> = ({
   compact = false,
   showRechargeHint = true,
   className = "",
-}) => {
+}: Props) => {
   const { balance, dailyUsage, rules, membership } = usePointsStore()
   const qty = quantity ?? units ?? 1
 
@@ -118,6 +119,9 @@ const PointsCost: React.FC<Props> = ({
     }
   }, [rules, balance, dailyUsage, membership, scene, qty, durationMinutes])
 
+  // 积分系统关闭时不展示消耗提示（组件保留，hooks 必须在 return 前调用）
+  if (!ENABLE_CREDIT_SYSTEM) return null
+
   if (!rule || !balance) {
     return <span className={`xx-points-cost ${className}`} />
   }

apps/web/src/components/layout/Header.tsx

@@ -21,6 +21,7 @@ import { useLogout } from "@/hooks/useAuth"
 import type { MenuProps } from "antd"
 import { NAV_ITEMS } from "@/config/navigation"
 import PointsBadge from "@/components/common/PointsBadge"
+import { ENABLE_CREDIT_SYSTEM } from "@/config/features"
 import { usePointsStore } from "@/store/pointsStore"
 import "./Header.css"
 
@@ -57,30 +58,36 @@ const Header: React.FC = () => {
       label: "订阅管理",
       onClick: () => navigate("/app/subscription"),
     },
-    // v2: 我的积分入口
-    {
-      key: "points-center",
-      icon: <ThunderboltOutlined />,
-      label: (
-        <Space>
-          我的积分
-          {balance && <span style={{ color: "#8b5cf6", fontWeight: 700 }}>{balance.balance}</span>}
-        </Space>
-      ),
-      onClick: () => navigate("/app/points"),
-    },
-    {
-      key: "points-history",
-      icon: <HistoryOutlined />,
-      label: "积分明细",
-      onClick: () => navigate("/app/points/transactions"),
-    },
-    {
-      key: "recharge",
-      icon: <WalletOutlined />,
-      label: "充值积分",
-      onClick: () => navigate("/app/points/recharge"),
-    },
+    // 积分系统开关关闭时隐藏积分相关菜单项（代码保留不删除）
+    ...(ENABLE_CREDIT_SYSTEM
+      ? [
+          {
+            key: "points-center",
+            icon: <ThunderboltOutlined />,
+            label: (
+              <Space>
+                我的积分
+                {balance && (
+                  <span style={{ color: "#8b5cf6", fontWeight: 700 }}>{balance.balance}</span>
+                )}
+              </Space>
+            ),
+            onClick: () => navigate("/app/points"),
+          },
+          {
+            key: "points-history",
+            icon: <HistoryOutlined />,
+            label: "积分明细",
+            onClick: () => navigate("/app/points/transactions"),
+          },
+          {
+            key: "recharge",
+            icon: <WalletOutlined />,
+            label: "充值积分",
+            onClick: () => navigate("/app/points/recharge"),
+          },
+        ]
+      : []),
     { type: "divider" },
     {
       key: "logout",
@@ -130,7 +137,13 @@ const Header: React.FC = () => {
 
           {/* v2: 升级会员入口（仅免费用户显示） */}
           {!isMember && (
-            <Tooltip title="升级会员解锁无限混剪、批量导出，积分 8 折起">
+            <Tooltip
+              title={
+                ENABLE_CREDIT_SYSTEM
+                  ? "升级会员解锁无限混剪、批量导出，积分 8 折起"
+                  : "升级会员解锁无限混剪、批量导出"
+              }
+            >
               <Button
                 type="primary"
                 size="small"

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

@@ -0,0 +1,391 @@
+/* ============================================================
+   标题模板系统 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

@@ -0,0 +1,174 @@
+/**
+ * 标题模板编辑器（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

@@ -0,0 +1,362 @@
+/**
+ * 标题样式相关常量（#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

@@ -0,0 +1,28 @@
+/**
+ * 标题模板系统类型（#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

@@ -0,0 +1,118 @@
+/**
+ * 共享标题样式配置类型（#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

@@ -0,0 +1,213 @@
+/**
+ * 标题模板 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

@@ -0,0 +1,125 @@
+/**
+ * 标题样式工具（#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

@@ -0,0 +1,151 @@
+/**
+ * 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/config/features.ts

@@ -0,0 +1,13 @@
+/**
+ * 功能开关配置
+ * 集中管理前端特性的启用/隐藏，便于灰度与回滚。
+ * 注意：仅控制 UI 展示与前端校验，后端扣减逻辑由后端对应开关控制。
+ */
+
+/**
+ * 积分系统 UI 开关（默认 false = 隐藏）
+ * - false：隐藏所有积分相关入口/余额/消耗提示/不足弹窗/充值入口；会员标识保留；
+ *   功能流程不做积分预校验，直接走生成。
+ * - true：展示完整积分系统 UI。
+ */
+export const ENABLE_CREDIT_SYSTEM = false

apps/web/src/config/navigation.ts

@@ -3,6 +3,7 @@
  * Header.tsx 和 Sidebar.tsx 共享此数据源，避免路由配置重复
  */
 import React from "react"
+import { ENABLE_CREDIT_SYSTEM } from "./features"
 import {
   DashboardOutlined,
   FileOutlined,
@@ -105,12 +106,17 @@ export const NAV_ITEMS: NavItem[] = [
     path: "/app/subscription",
     icon: React.createElement(CrownOutlined),
   },
-  {
-    key: "points",
-    label: "积分中心",
-    path: "/app/points",
-    icon: React.createElement(ThunderboltOutlined),
-  },
+  // 积分系统开关关闭时隐藏积分中心入口（代码保留不删除）
+  ...(ENABLE_CREDIT_SYSTEM
+    ? [
+        {
+          key: "points",
+          label: "积分中心",
+          path: "/app/points",
+          icon: React.createElement(ThunderboltOutlined),
+        },
+      ]
+    : []),
 ]
 
 /** 侧边栏导航分组（Sidebar 分组列表使用） */
@@ -200,12 +206,17 @@ export const NAV_GROUPS: NavGroup[] = [
         path: "/app/subscription",
         icon: React.createElement(CrownOutlined),
       },
-      {
-        key: "points",
-        label: "积分中心",
-        path: "/app/points",
-        icon: React.createElement(ThunderboltOutlined),
-      },
+      // 积分系统开关关闭时隐藏积分中心入口（代码保留不删除）
+      ...(ENABLE_CREDIT_SYSTEM
+        ? [
+            {
+              key: "points",
+              label: "积分中心",
+              path: "/app/points",
+              icon: React.createElement(ThunderboltOutlined),
+            },
+          ]
+        : []),
     ],
   },
 ]

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

@@ -30,11 +30,7 @@ import {
 } from "./api/aiAvatar"
 import { getOrCreateDefaultProject } from "@/api/projects"
 import type { RenderJob, SentenceTiming } from "./types"
-import {
-  normalizeEmotion,
-  buildTitleConfigPayload,
-  buildCoverConfigPayload,
-} from "./utils/contract"
+import { buildTitleConfigPayload, buildCoverConfigPayload } from "./utils/contract"
 import { renderTitleToPngDataUrl, getVideoResolution } from "./utils/titleCanvas"
 
 /** 面板折叠状态 */
@@ -65,6 +61,10 @@ const AiAvatarPage: React.FC = () => {
     "generating",
   )
   const [lipsyncErrorMessage, setLipsyncErrorMessage] = useState("")
+  /* ── 对口型耗时计时（秒） ── */
+  const [lipsyncElapsed, setLipsyncElapsed] = useState(0)
+  const lipsyncStartAtRef = useRef<number>(0)
+  const lipsyncTickRef = useRef<ReturnType<typeof setInterval> | null>(null)
   /* ── 渲染进度弹窗 ── */
   const [showRenderModal, setShowRenderModal] = useState(false)
   const [renderStatus, setRenderStatus] = useState<"generating" | "completed" | "failed">(
@@ -94,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.emotion])
+  }, [state.scriptText, state.selectedVoice?.voice_id, state.speed, state.style])
 
   const _clearTtsProgressTimer = useCallback(() => {
     if (ttsProgressTimerRef.current) {
@@ -148,7 +148,7 @@ const AiAvatarPage: React.FC = () => {
         voice_id: state.selectedVoice!.voice_id,
         script_text: state.scriptText,
         speed: state.speed,
-        emotion: normalizeEmotion(state.emotion),
+        style: state.style,
       })
       _clearTtsProgressTimer()
       setTtsProgress(100)
@@ -175,7 +175,7 @@ const AiAvatarPage: React.FC = () => {
       })
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.selectedVideo, state.selectedVoice, state.scriptText, state.speed, state.emotion])
+  }, [state.selectedVideo, state.selectedVoice, state.scriptText, state.speed, state.style])
 
   const handleRetryTts = useCallback(() => {
     handleGenerateTts()
@@ -226,6 +226,13 @@ const AiAvatarPage: React.FC = () => {
       setShowLipsyncModal(true)
       setLipsyncStatus("generating")
       setLipsyncErrorMessage("")
+      // 启动计时器
+      lipsyncStartAtRef.current = Date.now()
+      setLipsyncElapsed(0)
+      if (lipsyncTickRef.current) clearInterval(lipsyncTickRef.current)
+      lipsyncTickRef.current = setInterval(() => {
+        setLipsyncElapsed(Math.floor((Date.now() - lipsyncStartAtRef.current) / 1000))
+      }, 1000)
 
       const asset = await getAssetById(video.id)
       const videoUrl = asset?.file_url
@@ -254,7 +261,7 @@ const AiAvatarPage: React.FC = () => {
           script_text: state.scriptText,
           video_url: videoUrl,
           speed: state.speed,
-          emotion: normalizeEmotion(state.emotion),
+          style: state.style,
         }
       }
       const job = await createLipsyncJob(payload)
@@ -269,6 +276,11 @@ const AiAvatarPage: React.FC = () => {
           state.setLipsyncJob(updated)
           if (updated.status === "completed") {
             if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
+            if (lipsyncTickRef.current) {
+              clearInterval(lipsyncTickRef.current)
+              lipsyncTickRef.current = null
+            }
+            setLipsyncElapsed(Math.floor((Date.now() - lipsyncStartAtRef.current) / 1000))
             setLipsyncStatus("completed")
             setTimeout(() => {
               setShowLipsyncModal(false)
@@ -276,6 +288,10 @@ const AiAvatarPage: React.FC = () => {
             }, 1000)
           } else if (updated.status === "failed") {
             if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
+            if (lipsyncTickRef.current) {
+              clearInterval(lipsyncTickRef.current)
+              lipsyncTickRef.current = null
+            }
             setLipsyncStatus("failed")
             setLipsyncErrorMessage(updated.error_message || "对口型生成失败")
           }
@@ -289,6 +305,10 @@ const AiAvatarPage: React.FC = () => {
         data: (err as { response?: { data?: unknown } })?.response?.data,
         message: err instanceof Error ? err.message : String(err),
       })
+      if (lipsyncTickRef.current) {
+        clearInterval(lipsyncTickRef.current)
+        lipsyncTickRef.current = null
+      }
       setShowLipsyncModal(false)
       message.error(err instanceof Error ? err.message : "对口型任务提交失败，请重试")
     }
@@ -298,7 +318,8 @@ const AiAvatarPage: React.FC = () => {
     state.selectedVoice,
     state.scriptText,
     state.speed,
-    state.emotion,
+
+    state.style,
     state.ttsPreview,
   ])
 
@@ -308,15 +329,21 @@ const AiAvatarPage: React.FC = () => {
       clearInterval(lipsyncTimerRef.current)
       lipsyncTimerRef.current = null
     }
+    if (lipsyncTickRef.current) {
+      clearInterval(lipsyncTickRef.current)
+      lipsyncTickRef.current = null
+    }
     setShowLipsyncModal(false)
     setLipsyncStatus("generating")
     setLipsyncErrorMessage("")
+    setLipsyncElapsed(0)
   }, [])
 
   // 清理轮询
   useEffect(() => {
     return () => {
       if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
+      if (lipsyncTickRef.current) clearInterval(lipsyncTickRef.current)
       if (renderTimerRef.current) clearInterval(renderTimerRef.current)
     }
   }, [])
@@ -598,8 +625,8 @@ const AiAvatarPage: React.FC = () => {
                   onVoiceSourceChange={state.setVoiceSource}
                   selectedVoice={state.selectedVoice}
                   onSelectVoice={state.setSelectedVoice}
-                  emotion={state.emotion}
-                  onEmotionChange={state.setEmotion}
+                  style={state.style}
+                  onStyleChange={state.setStyle}
                   speed={state.speed}
                   onSpeedChange={state.setSpeed}
                   language={state.language}
@@ -966,6 +993,19 @@ const AiAvatarPage: React.FC = () => {
                   <div style={{ marginTop: 20, fontSize: 15, color: "#1a1a2e" }}>
                     对口型视频生成中…
                   </div>
+                  <div
+                    style={{
+                      marginTop: 12,
+                      fontSize: 28,
+                      fontWeight: 700,
+                      fontVariantNumeric: "tabular-nums",
+                      color: "#7c3aed",
+                    }}
+                  >
+                    {`${Math.floor(lipsyncElapsed / 60)
+                      .toString()
+                      .padStart(2, "0")}:${(lipsyncElapsed % 60).toString().padStart(2, "0")}`}
+                  </div>
                   <div style={{ marginTop: 8, fontSize: 13, color: "#8c8ca1" }}>
                     请勿关闭页面，完成后将自动提示
                   </div>
@@ -977,6 +1017,20 @@ const AiAvatarPage: React.FC = () => {
                   <div style={{ marginTop: 16, fontSize: 15, color: "#1a1a2e" }}>
                     对口型视频生成完成
                   </div>
+                  <div
+                    style={{
+                      marginTop: 8,
+                      fontSize: 13,
+                      color: "#10b981",
+                      fontVariantNumeric: "tabular-nums",
+                    }}
+                  >
+                    总耗时{" "}
+                    {Math.floor(lipsyncElapsed / 60)
+                      .toString()
+                      .padStart(2, "0")}
+                    :{(lipsyncElapsed % 60).toString().padStart(2, "0")}
+                  </div>
                 </>
               )}
               {lipsyncStatus === "failed" && (

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

@@ -41,10 +41,13 @@ 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> => {
-  const response = await apiClient.post<LipsyncJob>("/lipsync/jobs", data)
+  // GPU 口型同步推理约 20s，留足余量到 120s 防止 10s 默认超时
+  const response = await apiClient.post<LipsyncJob>("/lipsync/jobs", data, { timeout: 120_000 })
   return response.data
 }
 
@@ -54,6 +57,7 @@ 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,15 +29,7 @@ function formatTime(seconds: number): string {
   return `${m}:${s.toString().padStart(2, "0")}`
 }
 
-/** 字体名 → 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["思源黑体"]
+import { getFontFamily as getFontFamilyByKey } from "@/components/title/constants"
 
 export function PanelLipsyncPreview({
   lipsyncJob,
@@ -83,63 +75,105 @@ export function PanelLipsyncPreview({
   const previewScale = containerWidth > 0 ? containerWidth / 720 : 0.35
   const ps = useCallback((v: number) => Math.round(v * previewScale * 100) / 100, [previewScale])
 
-  /** 标题叠加样式（字号/padding/描边/阴影均按 previewScale 缩放，保持与成片视觉一致） */
-  const titleOverlayStyle: React.CSSProperties | null =
+  /** 标题叠加样式（新字段全支持：描边宽色/阴影参数化/背景块/行距/顶部边距/自动换行） */
+  const titleOverlayData =
     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)
-          // 描边宽度基准 ≈ 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 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
           const style: React.CSSProperties = {
             position: "absolute",
             color: titleConfig.color || "#ffffff",
-            fontFamily: getFontFamily(titleConfig.font || "思源黑体"),
+            fontFamily: getFontFamilyByKey(titleConfig.font || "source_sans_sc"),
             fontSize: `${fontSize}px`,
             fontWeight: titleConfig.bold ? 700 : 400,
             fontStyle: titleConfig.italic ? "italic" : "normal",
             textAlign: "center",
-            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",
-            wordBreak: "break-word",
+            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,
+            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",
           }
-
           if (
             titleConfig.position === "custom" &&
             titleConfig.pos_x != null &&
             titleConfig.pos_y != null
           ) {
-            style.left = `${titleConfig.pos_x}%`
-            style.top = `${titleConfig.pos_y}%`
-            style.transform = "translateX(-50%) translateY(-50%)"
+            wrap.left = `${titleConfig.pos_x}%`
+            wrap.top = `${titleConfig.pos_y}%`
+            wrap.transform = "translate(-50%, -50%)"
           } else if (titleConfig.position === "top") {
-            style.left = "50%"
-            style.top = padV
-            style.transform = "translateX(-50%)"
+            wrap.top = `${padV + mTop}px`
+            wrap.transform = "translateX(-50%)"
           } else if (titleConfig.position === "bottom") {
-            style.left = "50%"
-            style.bottom = padV
-            style.transform = "translateX(-50%)"
+            wrap.bottom = `${padV}px`
+            wrap.transform = "translateX(-50%)"
           } else {
-            style.left = "50%"
-            style.top = "50%"
-            style.transform = "translateX(-50%) translateY(-50%)"
+            wrap.top = "50%"
+            wrap.transform = "translate(-50%, -50%)"
           }
-          return style
+          return { style, wrap, lines }
         })()
       : null
 
@@ -252,25 +286,23 @@ export function PanelLipsyncPreview({
           {isDone && lipsyncJob?.output_video_url ? (
             <div style={{ position: "relative", width: "100%", height: "100%" }}>
               <video src={lipsyncJob.output_video_url} controls />
-              {titleOverlayStyle && (
+              {titleOverlayData && (
                 <div
                   ref={titleDragRef}
                   style={{
-                    ...titleOverlayStyle,
+                    ...titleOverlayData.wrap,
                     cursor: onTitlePositionChange ? "grab" : "default",
-                    pointerEvents: onTitlePositionChange ? "auto" : "none",
                   }}
                   onPointerDown={handleTitlePointerDown}
                   onPointerMove={handleTitlePointerMove}
                   onPointerUp={handleTitlePointerUp}
                   onPointerCancel={handleTitlePointerUp}
                 >
-                  {titleConfig!.title.split(/[/／]/).map((part, i) => (
-                    <span key={i}>
-                      {i > 0 && <br />}
-                      {part}
-                    </span>
-                  ))}
+                  <div style={titleOverlayData.style}>
+                    {titleOverlayData.lines.map((part: string, i: number) => (
+                      <div key={i}>{part}</div>
+                    ))}
+                  </div>
                 </div>
               )}
             </div>

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

@@ -10,10 +10,13 @@
 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, FONT_OPTIONS, TITLE_PRESETS } from "@/pages/generate/constants"
+import { POSITION_OPTIONS } from "@/pages/generate/constants"
+import { FONT_OPTIONS, TITLE_PRESETS } from "@/components/title/constants"
 import type { AiAvatarTitleConfig } from "../types"
 // #1894: 标题数据源切换到文案库，取 script.title 作为候选
 import { getScripts } from "@/api/scripts"
@@ -28,6 +31,7 @@ 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[]>([])
@@ -49,9 +53,60 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
       .catch(() => setTitleOptions([]))
   }, [])
 
-  /** AiAvatarTitleConfig → TitleSettings（补齐 aiAutoSelect / 自由坐标字段） */
-  const titleSettings: TitleSettings = useMemo(
-    () => ({
+  /** 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 {
       aiAutoSelect: false,
       title: titleConfig.title,
       position: titleConfig.position,
@@ -64,21 +119,250 @@ const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpda
       color: titleConfig.color,
       posX: null,
       posY: null,
-    }),
-    [titleConfig],
-  )
+      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])
 
-  /** 应用预设：与智能剪辑一致，只覆盖 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({
-      color: preset.style.color,
-      bold: preset.style.bold,
-      italic: preset.style.italic,
-      stroke: preset.style.stroke,
-      shadow: preset.style.shadow,
+      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,
     })
   }
 
@@ -125,8 +409,16 @@ 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}
+        titlePresets={
+          TITLE_PRESETS as unknown as React.ComponentProps<typeof TitleStylePanel>["titlePresets"]
+        }
         POSITION_OPTIONS={POSITION_OPTIONS}
         FONT_OPTIONS={FONT_OPTIONS}
       />

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

@@ -1,18 +1,17 @@
 /**
  * AI数字人 — 配音库面板（面板3）
- * 音色来源切换（系统预设 / 我的音色）、音色选择与试听、情绪/语速/语言参数
+ * 音色来源切换（系统预设 / 我的音色）、音色选择与试听、风格/语速/语言参数
  */
 import { useEffect, useRef, useState } from "react"
 import { message } from "antd"
 import { fetchVoices } from "@/api/voices/voices"
 import { previewTts } from "@/api/tts"
-import { normalizeEmotion } from "../utils/contract"
+import TtsStyleSelector from "@/components/voice/TtsStyleSelector"
+import type { TtsStyle } from "@/api/tts/styles"
 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"
@@ -22,8 +21,8 @@ interface PanelVoiceSelectorProps {
   onVoiceSourceChange: (source: VoiceSource) => void
   selectedVoice: UnifiedVoiceItem | null
   onSelectVoice: (voice: UnifiedVoiceItem) => void
-  emotion: VoiceEmotion
-  onEmotionChange: (e: VoiceEmotion) => void
+  style: TtsStyle
+  onStyleChange: (s: TtsStyle) => void
   speed: number
   onSpeedChange: (s: number) => void
   language: VoiceLanguage
@@ -35,8 +34,8 @@ export function PanelVoiceSelector({
   onVoiceSourceChange,
   selectedVoice,
   onSelectVoice,
-  emotion,
-  onEmotionChange,
+  style,
+  onStyleChange,
   speed,
   onSpeedChange,
   language,
@@ -139,31 +138,30 @@ export function PanelVoiceSelector({
     /* 克隆音色：preview_url/audio_url 通常为空，需走 POST /tts/preview
      * 现合成示例文案再播放，对齐配音库 useAudioPlayer 行为 */
     if (voice.type === "clone") {
-      const cached = previewCacheRef.current.get(voice.voice_clone_profile_id || voice.id)
+      const cacheKey = `${voice.voice_clone_profile_id || voice.id}::${style}`
+      const cached = previewCacheRef.current.get(cacheKey)
       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）
-          emotion: normalizeEmotion(emotion), // 情绪中文→英文枚举
+          style,
         })
         if (!res.audio_url) {
           setPreviewingId(null)
           message.error("合成试听失败：未返回音频")
           return
         }
-        previewCacheRef.current.set(targetId, res.audio_url)
+        previewCacheRef.current.set(cacheKey, 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,
@@ -272,23 +270,6 @@ 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">
               语言
@@ -324,6 +305,9 @@ 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,7 +6,6 @@ import type { AssetItem } from "@/api/assets"
 import type { UnifiedVoiceItem } from "@/api/voices/types"
 import {
   type VoiceSource,
-  type VoiceEmotion,
   type VoiceLanguage,
   type Script,
   type LipsyncJob,
@@ -17,6 +16,7 @@ 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 [emotion, setEmotion] = useState<VoiceEmotion>("neutral")
+  const [style, setStyle] = useState<TtsStyle>(DEFAULT_TTS_STYLE)
   const [speed, setSpeed] = useState(1.0)
   const [language, setLanguage] = useState<VoiceLanguage>("zh")
 
@@ -113,8 +113,8 @@ export function useAiAvatar() {
     setVoiceSource,
     selectedVoice,
     setSelectedVoice,
-    emotion,
-    setEmotion,
+    style,
+    setStyle,
     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,6 +115,42 @@ 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>
 }
 
 /* ── 封面配置 ── */
@@ -149,12 +185,27 @@ export const DEFAULT_TITLE_CONFIG: AiAvatarTitleConfig = {
   size: 48,
   bold: true,
   italic: false,
-  stroke: false,
+  stroke: true,
   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,6 +67,37 @@ 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,
@@ -75,16 +106,68 @@ export function buildTitleConfigPayload(
     font_color: cfg.color || "#ffffff",
     position,
     bold: !!cfg.bold,
-    stroke: cfg.stroke ? { enabled: true, width: 2, color: "#000000" } : { enabled: false },
-    shadow: cfg.shadow
-      ? { enabled: true, color: "#000000", offset_x: 2, offset_y: 2 }
+    italic: !!cfg.italic,
+    stroke: cfg.stroke
+      ? { enabled: true, width: strokeWidth, color: strokeColor }
       : { enabled: false },
+    shadow: cfg.shadow
+      ? {
+          enabled: true,
+          color: shadowColor,
+          offset_x: shadowOffsetX,
+          offset_y: shadowOffsetY,
+          blur: shadowBlur,
+        }
+      : { 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,37 +9,78 @@
  *       按 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
 }
 
-/**
- * 将标题渲染为透明背景 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
+function autoWrapLines(rawTitle: string, maxCharsPerLine: number): string[] {
+  const manual = 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)
 
@@ -49,86 +90,183 @@ export function renderTitleToPngDataUrl(opts: RenderTitlePngOptions): string | n
   const ctx = canvas.getContext("2d")
   if (!ctx) return null
 
-  const baseSize = Math.max(12, Math.round(titleConfig.size || 48))
+  const baseSize = Math.max(12, Math.round(cfg.size || 48))
   const size = r(baseSize)
-  const bold = !!titleConfig.bold
-  const italic = !!titleConfig.italic
-  const color = titleConfig.color || "#ffffff"
-  const stroke = !!titleConfig.stroke
-  const shadow = !!titleConfig.shadow
+  const bold = !!cfg.bold
+  const italic = !!cfg.italic
+  const color = cfg.color || "#ffffff"
+  const stroke = !!cfg.stroke
+  const shadow = !!cfg.shadow
 
-  // 字体族 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(" ")
+  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)
   ctx.fillStyle = color
   ctx.textAlign = "center"
   ctx.textBaseline = "middle"
 
-  // 阴影（shadow=true 时开启）——按 scale 缩放
-  if (shadow) {
-    ctx.shadowColor = "rgba(0,0,0,0.8)"
-    ctx.shadowBlur = r(4)
-    ctx.shadowOffsetX = 0
-    ctx.shadowOffsetY = r(2)
-  }
+  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
+  })
 
-  // 位置计算：与 PanelLipsyncPreview 的 CSS 对齐（按 scale 缩放 PAD）
   const PAD = r(16)
   let centerX = videoWidth / 2
-  const position = titleConfig.position || "bottom"
-  const lineGap = size * 1.2
-  const totalTextH = lines.length * lineGap - (lineGap - size) // 所有行的总高度
-  // 文本块顶部 y（textBaseline=middle 时首行基线）
+  const position = cfg.position || "bottom"
   let firstLineY: number
-  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
+  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
     firstLineY = centerY - totalTextH / 2 + size / 2
   } else if (position === "top") {
-    // 顶部：y = size/2 + PAD
-    firstLineY = size / 2 + PAD
+    firstLineY = size / 2 + PAD + r(marginTopBase)
   } else if (position === "center") {
     firstLineY = videoHeight / 2 - totalTextH / 2 + size / 2
   } else {
-    // bottom（默认）
     firstLineY = videoHeight - totalTextH - PAD + size / 2
   }
 
-  // 描边参数：描边 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) => {
+  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) => {
     const y = firstLineY + idx * lineGap
-    if (doStroke) {
-      const prevShadowColor = ctx.shadowColor
-      const prevShadowBlur = ctx.shadowBlur
-      // 描边不要带阴影（避免黑色描边发虚）
+    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 {
       ctx.shadowColor = "rgba(0,0,0,0)"
       ctx.shadowBlur = 0
-      ctx.lineWidth = strokeWidth
-      ctx.strokeStyle = "#000000"
+      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.lineJoin = "round"
       ctx.strokeText(line, centerX, y)
-      // 恢复阴影
-      if (shadow) {
-        ctx.shadowColor = "rgba(0,0,0,0.8)"
-        ctx.shadowBlur = r(4)
-      } else {
-        ctx.shadowColor = prevShadowColor
-        ctx.shadowBlur = prevShadowBlur
-      }
+      ctx.restore()
     }
+
     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 {
@@ -138,9 +276,6 @@ 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,15 +8,12 @@ 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"
@@ -24,15 +21,14 @@ 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 { finalizeGeneration } from "@/api/generation/finalize"
 
-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"
 import "./generate.css"
 import "./generate-points.css"
 
@@ -41,6 +37,9 @@ const GeneratePage: React.FC = () => {
 
   /* ── 表单状态 ── */
   const formState = useGenerateFormState()
+  /* ── 标题模板（#2003）当前选中模板 id ── */
+  const [selectedTitleTemplateId, setSelectedTitleTemplateId] = useState<string | null>(null)
+
   /* ── 积分状态 ── */
   const { balance, dailyUsage, rules, init: initPoints } = usePointsStore()
   useEffect(() => {
@@ -76,6 +75,8 @@ const GeneratePage: React.FC = () => {
     setTtsVoiceId,
     ttsVoiceSource,
     setTtsVoiceSource,
+    ttsStyle,
+    setTtsStyle,
     ttsVoiceAssetId,
     setTtsVoiceAssetId,
     dedupEnabled,
@@ -95,8 +96,6 @@ const GeneratePage: React.FC = () => {
     setPreviewTaskId,
     storedSourceEditPlanId,
     setStoredSourceEditPlanId,
-    serverClips,
-    setServerClips,
     previewCount,
     setPreviewCount,
     previewTitles,
@@ -142,6 +141,9 @@ 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)
@@ -153,62 +155,6 @@ 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()
 
@@ -233,30 +179,11 @@ 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 {
-    clipsByVariant: variantClips,
-    planIdsByVariant: variantPlanIds,
-    voiceDurationsByVariant: variantVoiceDurations,
-    loading: variantClipsLoading,
-    error: variantClipsError,
-    retry: retryVariantClips,
-  } = useBatchVariantPlans({
-    enabled: isBatch && currentStep === 3 && previewAssetsReady,
+  const { planIdsByVariant: variantPlanIds } = useBatchVariantPlans({
+    enabled: isBatch && currentStep === 3,
     count: previewCount,
     templateId: selectedTemplate || "",
     assetIds: previewAssetIds,
@@ -266,39 +193,6 @@ 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,
@@ -328,6 +222,7 @@ const GeneratePage: React.FC = () => {
     selectedScript,
     ttsVoiceId,
     ttsVoiceSource,
+    ttsStyle,
     ttsVoiceAssetId,
     dedupEnabled,
     style,
@@ -409,9 +304,15 @@ const GeneratePage: React.FC = () => {
   )
 
   const handleTtsSynthesized = useCallback(
-    (payload: { voiceAssetId: string; ttsVoiceId: string; ttsVoiceSource: "preset" | "clone" }) => {
+    (payload: {
+      voiceAssetId: string
+      ttsVoiceId: string
+      ttsVoiceSource: "preset" | "clone"
+      ttsStyle?: string
+    }) => {
       setTtsVoiceId(payload.ttsVoiceId)
       setTtsVoiceSource(payload.ttsVoiceSource)
+      if (payload.ttsStyle) setTtsStyle(payload.ttsStyle)
       setTtsVoiceAssetId(payload.voiceAssetId)
       if (payload.ttsVoiceSource === "clone") {
         setSelectedClonedVoice(payload.ttsVoiceId)
@@ -427,6 +328,7 @@ const GeneratePage: React.FC = () => {
     [
       setTtsVoiceId,
       setTtsVoiceSource,
+      setTtsStyle,
       setTtsVoiceAssetId,
       setSelectedVoice,
       setSelectedClonedVoice,
@@ -437,19 +339,22 @@ const GeneratePage: React.FC = () => {
 
   /* ── 步骤3「确认生成视频」：校验通过 → 创建正式生成任务 → 跳步骤4看实时进展 ── */
   const handleConfirmGenerate = useCallback(async () => {
-    // 积分预检查
-    const units = isBatch ? Math.max(selectedVariantIds.length, 1) : 1
-    const check = hasEnoughPoints(
-      balance ?? null,
-      units,
-      dailyUsage ?? null,
-      [],
-      "free",
-      rules?.free_user_multiplier ?? 1.15,
-    )
-    if (!check.sufficient) {
-      message.error(check.reason ?? "积分不足，请充值")
-      return
+    // 积分预检查（积分系统关闭时跳过，直接走生成流程）
+    let check: ReturnType<typeof hasEnoughPoints> = { sufficient: true, cost: 0 }
+    if (ENABLE_CREDIT_SYSTEM) {
+      const units = isBatch ? Math.max(selectedVariantIds.length, 1) : 1
+      check = hasEnoughPoints(
+        balance ?? null,
+        units,
+        dailyUsage ?? null,
+        [],
+        "free",
+        rules?.free_user_multiplier ?? 1.15,
+      )
+      if (!check.sufficient) {
+        message.error(check.reason ?? "积分不足，请充值")
+        return
+      }
     }
     if (isBatch) {
       if (selectedVariantIds.length === 0) {
@@ -467,10 +372,6 @@ const GeneratePage: React.FC = () => {
         return
       }
     }
-    if (!previewReady) {
-      message.warning("预览素材正在加载，请稍候")
-      return
-    }
     const ok = await handleGenerate()
     if (ok) {
       setCurrentStep(4)
@@ -481,7 +382,6 @@ const GeneratePage: React.FC = () => {
     previewTitles,
     titleSettings.aiAutoSelect,
     titleSettings.title,
-    previewReady,
     handleGenerate,
     setCurrentStep,
     balance,
@@ -509,30 +409,116 @@ const GeneratePage: React.FC = () => {
     },
   })
 
-  /* ── 最终成片 ── */
+  /* ── 最终成片（单视频） ── */
   const finalVideo = generatedVideos[0]
 
+  /* ── Step5 完成：先 confirm（同步标题/封面到任务）再 finalize（正式入库成品库） ── */
+  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（同步封面+标题，把 is_preview 翻 false，任务进入/停留在 awaiting_cover）
+      let confirmedTaskIds: string[] = []
+      if (isBatch && previewCovers.length > 0) {
+        const results = await Promise.all(
+          taskIds.map(async (taskId, idx) => {
+            const coverUrl = previewCovers[idx] || ""
+            const resp = await confirmGeneration(taskId, {
+              cover_url: coverUrl || undefined,
+              custom_title: previewTitles[idx] || titleSettings.title || "",
+            })
+            return resp.items?.[0]?.id || taskId
+          }),
+        )
+        confirmedTaskIds = results
+      } else if (finalVideo?.generation_task_id) {
+        const coverUrl = coverSettings.thumbnail_url || coverSettings.upload_url || ""
+        const resp = await confirmGeneration(finalVideo.generation_task_id, {
+          cover_url: coverUrl || undefined,
+          custom_title: titleSettings.title || "",
+        })
+        confirmedTaskIds = [resp.items?.[0]?.id || finalVideo.generation_task_id]
+      } else {
+        confirmedTaskIds = taskIds
+      }
+
+      // 第二步：finalize（真正入成品库，生成 GeneratedVideo 记录，任务推进到 completed）
+      // 批量每个任务独立 finalize；单视频只 finalize 当前这一个
+      const coverUrlList = isBatch
+        ? confirmedTaskIds.map((_, idx) => previewCovers[idx] || "")
+        : [coverSettings.thumbnail_url || coverSettings.upload_url || ""]
+      await Promise.all(
+        confirmedTaskIds.map((tid, idx) =>
+          finalizeGeneration(tid, { cover_url: coverUrlList[idx] || undefined }),
+        ),
+      )
+
+      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 = useMemo(() => {
-    if (currentStep === 3) return "xx-generate-layout step4-layout"
-    return "xx-generate-layout full-width"
-  }, [currentStep])
+  const layoutClassName = "xx-generate-layout full-width"
 
   /* ── 积分消耗估算（步骤3确认生成展示用） ── */
   const unitsForCost = isBatch ? Math.max(selectedVariantIds.length, 1) : 1
-  const pointsEstimate = useMemo(
-    () =>
-      hasEnoughPoints(
-        balance ?? null,
-        unitsForCost,
-        dailyUsage ?? null,
-        [],
-        "free",
-        rules?.free_user_multiplier ?? 1.15,
-      ),
-    [unitsForCost, balance, dailyUsage, rules],
-  )
-  const insufficientPoints = !pointsEstimate.sufficient
+  const pointsEstimate = useMemo(() => {
+    if (!ENABLE_CREDIT_SYSTEM) return { sufficient: true, cost: 0 }
+    return hasEnoughPoints(
+      balance ?? null,
+      unitsForCost,
+      dailyUsage ?? null,
+      [],
+      "free",
+      rules?.free_user_multiplier ?? 1.15,
+    )
+  }, [unitsForCost, balance, dailyUsage, rules])
+  const insufficientPoints = ENABLE_CREDIT_SYSTEM && !pointsEstimate.sufficient
 
   /* ================================================================
      渲染
@@ -545,66 +531,7 @@ const GeneratePage: React.FC = () => {
       <GenerateStepsBar currentStep={currentStep} onStepClick={setCurrentStep} />
 
       <div className={layoutClassName}>
-        {/* ════ 步骤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 封面 ════ */}
+        {/* ════ 步骤1~2 表单 / 步骤3 标题设置 / 步骤4 确认生成进度 / 步骤5 封面 ════ */}
         <div className="xx-generate-form">
           <GenerateStepContent
             currentStep={currentStep}
@@ -627,8 +554,15 @@ 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}
@@ -641,11 +575,7 @@ 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}
@@ -727,12 +657,6 @@ 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>
@@ -752,6 +676,8 @@ const GeneratePage: React.FC = () => {
             pointsInsufficient={insufficientPoints}
             insufficientReason={pointsEstimate.reason}
             onRecharge={() => navigate("/app/points/recharge")}
+            onFinish={handleFinish}
+            finishing={finishing}
           />
         </div>
       </div>
@@ -788,6 +714,8 @@ 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

@@ -1,156 +0,0 @@
-/**
- * 批量前端 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

@@ -1,602 +0,0 @@
-/**
- * 前端预览播放器 — 原生 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,6 +32,10 @@ export interface GenerateStepActionsProps {
   freeClipsUsedThisTime?: number
   /** 前往充值 */
   onRecharge?: () => void
+  /** Step5 点击完成（保存入库并跳转） */
+  onFinish?: () => void | Promise<void>
+  /** Step5 保存中 */
+  finishing?: boolean
 }
 
 const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
@@ -48,6 +52,8 @@ const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
   insufficientReason,
   freeClipsUsedThisTime,
   onRecharge,
+  onFinish,
+  finishing,
 }) => {
   const renderPrimaryButton = () => {
     /* 步骤 1~3：上一步 / 下一步 */
@@ -126,8 +132,18 @@ const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
       )
     }
 
-    /* 步骤 5（封面，最后一步）：无主按钮 */
-    return null
+    /* 步骤 5（封面，最后一步）：完成按钮 */
+    return (
+      <button
+        className="xx-btn xx-btn-primary"
+        onClick={() => {
+          if (onFinish && !finishing) void onFinish()
+        }}
+        disabled={finishing}
+      >
+        {finishing ? "⏳ 保存中…" : "✅ 完成"}
+      </button>
+    )
   }
 
   return (

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

@@ -4,10 +4,8 @@
  * 原步骤"选择配音"已从主流程移除，改为 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"
@@ -16,6 +14,7 @@ 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
@@ -51,15 +50,23 @@ export interface GenerateStepContentProps {
   onToggleStroke: () => void
   onToggleShadow: () => void
   onApplyPreset: (presetKey: string) => void
+  onUpdateStyle?: (patch: Partial<TitleSettings>) => void
   activePreset: string | null
-  titlePresets: { key: string; label: string; previewStyle: React.CSSProperties }[]
+  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
   /* ── 封面 ── */
   coverSettings: CoverConfig
   onCoverSettingsChange: (settings: CoverConfig) => void
   /* ── 配音 ── */
   selectedVoice: string
   onSelectedVoiceChange: (id: string) => void
-  onServerClipsChange: (clips: EditPlanClip[]) => void
   /* ── 生成 ── */
   generating: boolean
   generated: boolean
@@ -82,10 +89,6 @@ 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) => {
@@ -119,11 +122,14 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
     onToggleStroke,
     onToggleShadow,
     onApplyPreset,
+    onUpdateStyle,
+    enableTemplates,
+    selectedTemplateId,
+    onApplyTemplate,
     activePreset,
     titlePresets,
     coverSettings,
     onCoverSettingsChange,
-    onServerClipsChange,
     generating,
     generateError,
     progress,
@@ -136,18 +142,8 @@ 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 (
@@ -175,7 +171,6 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
           clipCount={clipCount}
           onClipCountChange={onClipCountChange}
           selectedTemplate={selectedTemplate}
-          onServerClipsChange={handleClipsChange}
         />
       )
     case 3:
@@ -191,8 +186,12 @@ 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}
@@ -201,40 +200,6 @@ 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

@@ -1,195 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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,23 +1,19 @@
 /**
  * Step 4 选择标题（Issue #1677 批量生成）
  *
- * 布局（由 GeneratePage 编排）：左侧大区域实时预览（单=大播放器，批量=Canvas 网格），
- * 右侧边栏标题设置。本组件渲染在右侧边栏：
- * - 单视频：AI 标题生成器 + AutoComplete 标题库（与旧版完全一致，零回归）
- * - 批量：N 个独立标题输入框（AutoComplete 支持标题库选择）+ 批量 AI 生成
- *   （一次生成 N 个标题，分别填入各变体，可单独换一个）
+ * 布局：全宽区域，标题输入 + 标题模板卡片网格。
+ * - 单视频：TitleLibraryAutoComplete 标题库输入
+ * - 批量：N 个独立标题输入框（AutoComplete 支持标题库选择）
  * - 标题样式（字体/颜色/位置/大小/粗斜描边/预设）：全局统一
  */
-import React, { useMemo, useState } from "react"
-import { Input, message } from "antd"
-import { LoadingOutlined } from "@ant-design/icons"
+import React, { useMemo } from "react"
 import type { TitleSettings } from "../types"
-import { POSITION_OPTIONS, FONT_OPTIONS } from "../constants"
+import { POSITION_OPTIONS } from "../constants"
+import { FONT_OPTIONS } from "@/components/title/constants"
 import { useStep4Title } from "../hooks/useStep4Title"
-import AiTitleGenerator from "./title/AiTitleGenerator"
 import TitleLibraryAutoComplete from "./title/TitleLibraryAutoComplete"
 import TitleStylePanel from "./title/TitleStylePanel"
-import { AI_TITLE_TEMPLATES } from "../constants"
+import type { TitleTemplate } from "@/components/title/template-types"
 
 interface Step4TitleSettingsProps {
   titleSettings: TitleSettings
@@ -33,44 +29,24 @@ interface Step4TitleSettingsProps {
   onToggleStroke: () => void
   onToggleShadow: () => void
   onApplyPreset: (presetKey: string) => void
+  onUpdateStyle?: (patch: Partial<TitleSettings>) => void
   activePreset: string | null
-  titlePresets: { key: string; label: string; previewStyle: React.CSSProperties }[]
+  titlePresets: Array<{
+    key: string
+    label: string
+    emoji?: string
+    style?: Record<string, unknown>
+    previewStyle?: React.CSSProperties
+  }>
   /* ── 批量生成（#1677）── */
   /** 生成数量 */
   previewCount?: number
   /** 每个变体的标题文字（长度=previewCount） */
   previewTitles?: string[]
   onPreviewTitlesChange?: (titles: string[]) => 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("")
+  enableTemplates?: boolean
+  selectedTemplateId?: string | null
+  onApplyTemplate?: (settings: TitleSettings, template: TitleTemplate) => void
 }
 
 const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
@@ -84,16 +60,18 @@ 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) => {
@@ -106,117 +84,31 @@ 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 xx-title-sidebar">
+    <div className="xx-form-section">
       <h3>📝 选择标题</h3>
 
       {!isBatch ? (
-        /* ── 单视频：原有 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>
-            </>
-          )}
-        </>
+        /* ── 单视频：标题输入框 ── */
+        <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 批量生成 + N 个独立标题输入框（AutoComplete 支持标题库） ── */
+        /* ── 批量：N 个独立标题输入框 ── */
         <div className="xx-batch-titles">
           <div
             style={{
@@ -226,42 +118,11 @@ 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}>
+            <div className="xx-form-field" key={i} style={{ maxWidth: 640 }}>
               <label>视频 {i + 1} 标题</label>
               <TitleLibraryAutoComplete
                 placeholder={`输入或选择视频 ${i + 1} 的标题`}
@@ -285,10 +146,15 @@ 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,6 +19,8 @@ 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
@@ -31,7 +33,11 @@ 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"
@@ -42,7 +48,15 @@ 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")
@@ -77,6 +91,7 @@ const TtsVoiceModal: React.FC<TtsVoiceModalProps> = ({
       setStatus("idle")
       setError(null)
       setActiveTab("preset")
+      setInternalStyle(externalStyle ?? DEFAULT_TTS_STYLE)
     } else {
       if (timerRef.current) {
         clearInterval(timerRef.current)
@@ -91,6 +106,7 @@ const TtsVoiceModal: React.FC<TtsVoiceModalProps> = ({
     return () => {
       if (timerRef.current) clearInterval(timerRef.current)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
   const handlePreview = useCallback(
@@ -143,6 +159,7 @@ const TtsVoiceModal: React.FC<TtsVoiceModalProps> = ({
         text: textToSynth,
         speed: 1.0,
         language: "zh-CN",
+        style: currentStyle,
       }
       if (isClone) {
         payload.voice_clone_profile_id = selectedVoiceId
@@ -187,13 +204,14 @@ 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])
+  }, [selectedVoiceId, textToSynth, activeTab, scriptTitle, onSynthesized, currentStyle])
 
   const renderVoiceCard = (v: {
     id: string
@@ -393,6 +411,10 @@ 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/cover-settings/CoverEditorModal.tsx

@@ -1,8 +1,19 @@
-import React, { useState } from "react"
-import type { CoverTemplate } from "../../types/cover"
+import React, { useState, useCallback, useRef } from "react"
+import { Slider, Switch, Select, InputNumber } from "antd"
+import type {
+  CoverTemplate,
+  CoverEditorConfig,
+  TextStyleConfig,
+  TextBackground,
+  TextDirection,
+  StrokeStyle,
+  TextBgShape,
+} from "../../types/cover"
+import { DEFAULT_EDITOR_CONFIG, PRESET_FONTS, SYSTEM_FONTS, ALL_FONTS } from "../../types/cover"
 import Modal from "@/components/ui/Modal"
 import Button from "@/components/ui/Button"
 
+/* ── Props ── */
 interface CoverEditorModalProps {
   open: boolean
   onClose: () => void
@@ -10,18 +21,375 @@ interface CoverEditorModalProps {
   onSave: (template: CoverTemplate) => void
 }
 
-interface SectionState {
-  basic: boolean
-  portrait: boolean
-  background: boolean
-  title: boolean
-  subtitle: boolean
-  mask: boolean
+/* ── Section expand/collapse keys ── */
+type SectionKey = "basic" | "portrait" | "background" | "title" | "subtitle" | "mask"
+
+/* ── Color picker sub-component ── */
+const ColorPicker: React.FC<{ value: string; onChange: (v: string) => void }> = ({
+  value,
+  onChange,
+}) => (
+  <div className="xx-ce-color-picker">
+    <input type="color" value={value} onChange={(e) => onChange(e.target.value)} />
+    <input
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      maxLength={7}
+      className="xx-ce-color-hex"
+    />
+  </div>
+)
+
+/* ── Position pair sub-component ── */
+const PositionPair: React.FC<{
+  x: number
+  y: number
+  onChange: (pos: { x: number; y: number }) => void
+}> = ({ x, y, onChange }) => (
+  <div className="xx-ce-position">
+    <InputNumber
+      size="small"
+      value={x}
+      step={0.1}
+      suffix="%"
+      controls={false}
+      onChange={(v) => onChange({ x: v ?? 0, y })}
+      style={{ width: "100%" }}
+    />
+    <InputNumber
+      size="small"
+      value={y}
+      step={0.1}
+      suffix="%"
+      controls={false}
+      onChange={(v) => onChange({ x, y: v ?? 0 })}
+      style={{ width: "100%" }}
+    />
+  </div>
+)
+
+/* ── Font Select options ── */
+const fontOptions = [
+  ...PRESET_FONTS.map((f) => ({
+    label: (
+      <span>
+        <span className="xx-ce-font-dot xx-ce-font-dot--preset" />
+        <span style={{ fontFamily: f.family }}>{f.name}</span>
+      </span>
+    ),
+    value: f.name,
+  })),
+  ...SYSTEM_FONTS.map((f) => ({
+    label: (
+      <span>
+        <span className="xx-ce-font-dot xx-ce-font-dot--system" />
+        <span style={{ fontFamily: f.family }}>{f.name}</span>
+      </span>
+    ),
+    value: f.name,
+  })),
+]
+
+/* ── Find font family string from name ── */
+const getFontFamily = (name: string): string => {
+  const found = ALL_FONTS.find((f) => f.name === name)
+  return found ? found.family : "sans-serif"
 }
 
+/* ── Text style panel (shared between title & subtitle) ── */
+const TextStylePanel: React.FC<{
+  config: TextStyleConfig
+  onChange: (c: TextStyleConfig) => void
+  placeholder: string
+}> = ({ config, onChange, placeholder }) => {
+  const upd = <K extends keyof TextStyleConfig>(key: K, val: TextStyleConfig[K]) =>
+    onChange({ ...config, [key]: val })
+  const updBg = <K extends keyof TextBackground>(key: K, val: TextBackground[K]) =>
+    upd("background", { ...config.background, [key]: val })
+
+  return (
+    <div className="xx-ce-text-panel">
+      {/* 文字内容 */}
+      <div className="xx-ce-row">
+        <div className="xx-ce-readonly-text">{config.text || placeholder}</div>
+        <div className="xx-ce-hint">在基本信息中设置文案内容，此处显示拆分结果</div>
+      </div>
+
+      {/* 字体 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">字体</label>
+        <Select
+          value={config.fontFamily}
+          onChange={(v) => upd("fontFamily", v)}
+          options={fontOptions}
+          style={{ width: "100%" }}
+          popupClassName="xx-ce-font-select-dropdown"
+        />
+        <div className="xx-ce-hint">绿色圆点=预置字体 | 蓝色圆点=系统字体（35种可用字体）</div>
+      </div>
+
+      {/* 字号 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">字号: {config.fontSize}px</label>
+        <Slider
+          min={20}
+          max={200}
+          step={1}
+          value={config.fontSize}
+          onChange={(v) => upd("fontSize", v)}
+        />
+      </div>
+
+      {/* 字重 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">字重: {config.fontWeight}</label>
+        <Slider
+          min={100}
+          max={1000}
+          step={100}
+          value={config.fontWeight}
+          onChange={(v) => upd("fontWeight", v)}
+          marks={{ 100: "100", 500: "500", 700: "700", 900: "900", 1000: "1000" }}
+        />
+      </div>
+
+      {/* 文字方向 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">文字方向</label>
+        <div className="xx-ce-radio-group">
+          {(["horizontal", "vertical"] as TextDirection[]).map((d) => (
+            <button
+              key={d}
+              className={`xx-ce-radio-btn ${config.direction === d ? "active" : ""}`}
+              onClick={() => upd("direction", d)}
+            >
+              {d === "horizontal" ? "横排" : "竖排"}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 每行字数 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">每行字数: {config.charsPerLine}</label>
+        <Slider
+          min={1}
+          max={20}
+          step={1}
+          value={config.charsPerLine}
+          onChange={(v) => upd("charsPerLine", v)}
+        />
+      </div>
+
+      {/* 字符间距 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">字符间距: {config.letterSpacing}px</label>
+        <Slider
+          min={-10}
+          max={50}
+          step={1}
+          value={config.letterSpacing}
+          onChange={(v) => upd("letterSpacing", v)}
+        />
+      </div>
+
+      {/* 行间距 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">行间距: {config.lineHeight}px</label>
+        <Slider
+          min={0}
+          max={200}
+          step={1}
+          value={config.lineHeight}
+          onChange={(v) => upd("lineHeight", v)}
+        />
+      </div>
+
+      {/* 颜色 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">颜色</label>
+        <ColorPicker value={config.color} onChange={(v) => upd("color", v)} />
+      </div>
+
+      {/* 描边颜色 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">描边颜色</label>
+        <ColorPicker value={config.strokeColor} onChange={(v) => upd("strokeColor", v)} />
+      </div>
+
+      {/* 描边粗细 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">描边粗细: {config.strokeWidth}px</label>
+        <Slider
+          min={0}
+          max={20}
+          step={1}
+          value={config.strokeWidth}
+          onChange={(v) => upd("strokeWidth", v)}
+        />
+      </div>
+
+      {/* 多层阴影 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">多层阴影</label>
+        <div className="xx-ce-shadow-actions">
+          <button
+            className="xx-ce-add-shadow-btn"
+            onClick={() =>
+              upd("shadows", [
+                ...config.shadows,
+                { color: "#000000", offsetX: 2, offsetY: 2, blur: 4 },
+              ])
+            }
+          >
+            + 添加阴影层
+          </button>
+          <button className="xx-ce-preset-shadow-btn">预设效果</button>
+        </div>
+        <div className="xx-ce-sub-row">
+          <label className="xx-ce-label">传统阴影</label>
+          <Switch
+            size="small"
+            checked={config.traditionalShadow}
+            onChange={(v) => upd("traditionalShadow", v)}
+          />
+        </div>
+      </div>
+
+      {/* 位置 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">位置</label>
+        <PositionPair
+          x={config.position.x}
+          y={config.position.y}
+          onChange={(pos) => upd("position", pos)}
+        />
+      </div>
+
+      {/* 旋转角度 */}
+      <div className="xx-ce-row">
+        <label className="xx-ce-label">旋转角度: {config.rotation}°</label>
+        <Slider
+          min={0}
+          max={360}
+          step={1}
+          value={config.rotation}
+          onChange={(v) => upd("rotation", v)}
+        />
+      </div>
+
+      {/* 文字背景 */}
+      <div className="xx-ce-row">
+        <div className="xx-ce-switch-row">
+          <label className="xx-ce-label">文字背景</label>
+          <Switch
+            size="small"
+            checked={config.background.enabled}
+            onChange={(v) => updBg("enabled", v)}
+          />
+        </div>
+      </div>
+
+      {config.background.enabled && (
+        <div className="xx-ce-text-bg-section">
+          {/* 背景颜色 */}
+          <div className="xx-ce-row">
+            <label className="xx-ce-label">背景颜色</label>
+            <ColorPicker value={config.background.color} onChange={(v) => updBg("color", v)} />
+          </div>
+
+          {/* 透明度 */}
+          <div className="xx-ce-row">
+            <label className="xx-ce-label">透明度: {config.background.opacity}%</label>
+            <Slider
+              min={0}
+              max={100}
+              step={1}
+              value={config.background.opacity}
+              onChange={(v) => updBg("opacity", v)}
+            />
+          </div>
+
+          {/* 形状 */}
+          <div className="xx-ce-row">
+            <label className="xx-ce-label">形状</label>
+            <Select
+              value={config.background.shape}
+              onChange={(v) => updBg("shape", v as TextBgShape)}
+              style={{ width: "100%" }}
+              options={[
+                { label: "矩形", value: "rectangle" },
+                { label: "自定义多边形", value: "polygon" },
+              ]}
+            />
+          </div>
+
+          {config.background.shape === "polygon" && (
+            <div className="xx-ce-hint">提示: 点击背景区域添加顶点，拖拽调整位置，右键删除顶点</div>
+          )}
+
+          {/* 大小 */}
+          <div className="xx-ce-row">
+            <label className="xx-ce-label">大小</label>
+            <div className="xx-ce-position">
+              <InputNumber
+                size="small"
+                value={config.background.width}
+                step={0.1}
+                suffix="%"
+                controls={false}
+                onChange={(v) => updBg("width", v ?? 0)}
+                style={{ width: "100%" }}
+              />
+              <InputNumber
+                size="small"
+                value={config.background.height}
+                step={0.1}
+                suffix="%"
+                controls={false}
+                onChange={(v) => updBg("height", v ?? 0)}
+                style={{ width: "100%" }}
+              />
+            </div>
+          </div>
+
+          {/* 位置偏移 */}
+          <div className="xx-ce-row">
+            <label className="xx-ce-label">位置偏移</label>
+            <PositionPair
+              x={config.background.posX}
+              y={config.background.posY}
+              onChange={(pos) => {
+                updBg("posX", pos.x)
+                updBg("posY", pos.y)
+              }}
+            />
+          </div>
+
+          {/* 旋转角度 */}
+          <div className="xx-ce-row">
+            <label className="xx-ce-label">旋转角度: {config.background.rotation}°</label>
+            <Slider
+              min={0}
+              max={360}
+              step={1}
+              value={config.background.rotation}
+              onChange={(v) => updBg("rotation", v)}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/* ══════════════ Main Component ══════════════ */
 const CoverEditorModal: React.FC<CoverEditorModalProps> = ({ open, onClose, template, onSave }) => {
-  const [name, setName] = useState(template?.name || "")
-  const [sections, setSections] = useState<SectionState>({
+  const initCfg = template?.config ?? DEFAULT_EDITOR_CONFIG
+  const [name, setName] = useState(template?.name ?? "")
+  const [cfg, setCfg] = useState<CoverEditorConfig>({ ...initCfg })
+  const [sections, setSections] = useState<Record<SectionKey, boolean>>({
     basic: true,
     portrait: false,
     background: false,
@@ -29,34 +397,90 @@ const CoverEditorModal: React.FC<CoverEditorModalProps> = ({ open, onClose, temp
     subtitle: true,
     mask: false,
   })
+  const fileRef = useRef<HTMLInputElement>(null)
 
-  const toggleSection = (key: keyof SectionState) => {
-    setSections((prev) => ({ ...prev, [key]: !prev[key] }))
-  }
+  const upd = useCallback(
+    <K extends keyof CoverEditorConfig>(key: K, val: CoverEditorConfig[K]) =>
+      setCfg((prev) => ({ ...prev, [key]: val })),
+    [],
+  )
+
+  const updTitle = useCallback(
+    (c: TextStyleConfig) => setCfg((prev) => ({ ...prev, title: c })),
+    [],
+  )
+  const updSubtitle = useCallback(
+    (c: TextStyleConfig) => setCfg((prev) => ({ ...prev, subtitle: c })),
+    [],
+  )
+
+  const toggle = (key: SectionKey) => setSections((p) => ({ ...p, [key]: !p[key] }))
 
   const handleSave = () => {
-    if (!template) return
-    onSave({ ...template, name })
+    const result: CoverTemplate = template
+      ? { ...template, name, config: cfg }
+      : {
+          id: "",
+          name,
+          is_system: false,
+          thumbnail_url: "",
+          created_at: "",
+          config: cfg,
+        }
+    onSave(result)
     onClose()
   }
 
+  /* ── canvas helpers ── */
+  const scaleFont = (px: number) => Math.round((px / 1200) * 225 * 100) / 100
+
+  const renderTextStyle = (tc: TextStyleConfig): React.CSSProperties => {
+    const style: React.CSSProperties = {
+      position: "absolute",
+      left: `${tc.position.x}%`,
+      top: `${tc.position.y}%`,
+      transform: `translate(-50%, -50%) rotate(${tc.rotation}deg)`,
+      fontFamily: getFontFamily(tc.fontFamily),
+      fontSize: scaleFont(tc.fontSize),
+      fontWeight: tc.fontWeight,
+      color: tc.color,
+      letterSpacing: scaleFont(tc.letterSpacing),
+      lineHeight: scaleFont(tc.lineHeight),
+      WebkitTextStroke:
+        tc.strokeWidth > 0 ? `${scaleFont(tc.strokeWidth)}px ${tc.strokeColor}` : undefined,
+      whiteSpace: tc.direction === "vertical" ? "pre-wrap" : "nowrap",
+      writingMode: tc.direction === "vertical" ? "vertical-rl" : undefined,
+      zIndex: 3,
+    }
+    if (tc.shadows.length > 0) {
+      style.textShadow = tc.shadows
+        .map(
+          (s) =>
+            `${scaleFont(s.offsetX)}px ${scaleFont(s.offsetY)}px ${scaleFont(s.blur)}px ${s.color}`,
+        )
+        .join(", ")
+    }
+    return style
+  }
+
   return (
     <Modal
       open={open}
       onCancel={onClose}
-      width={1000}
+      width={1050}
       title="自定义封面编辑器"
       centered
       footer={null}
     >
-      <div className="xx-cover-editor-header">
+      {/* ── Header ── */}
+      <div className="xx-ce-header">
         <input
-          className="xx-cover-editor-name-input"
+          className="xx-ce-name-input"
           value={name}
           onChange={(e) => setName(e.target.value)}
           placeholder="输入模板名称"
         />
-        <div className="xx-cover-editor-header-actions">
+        <div className="xx-ce-header-actions">
           <Button buttonType="ghost" onClick={onClose}>
             取消
           </Button>
@@ -66,55 +490,425 @@ const CoverEditorModal: React.FC<CoverEditorModalProps> = ({ open, onClose, temp
         </div>
       </div>
 
-      <div className="xx-cover-editor-layout">
-        {/* 左侧折叠面板 */}
-        <div className="xx-cover-editor-left">
-          {[
-            { key: "basic" as const, label: "基础设置" },
-            { key: "portrait" as const, label: "人像设置" },
-            { key: "background" as const, label: "背景设置", toggle: true },
-            { key: "title" as const, label: "主标题" },
-            { key: "subtitle" as const, label: "副标题" },
-            { key: "mask" as const, label: "蒙版", toggle: true },
-          ].map((item) => (
-            <div key={item.key} className="xx-cover-editor-section">
-              <div
-                className="xx-cover-editor-section-header"
-                onClick={() => toggleSection(item.key)}
-              >
-                <span>{item.label}</span>
-                <span>{sections[item.key] ? "▾" : "▸"}</span>
-              </div>
-              {sections[item.key] && (
-                <div className="xx-cover-editor-section-body">
-                  {item.toggle ? (
-                    <label style={{ display: "flex", alignItems: "center", gap: 6 }}>
-                      <input type="checkbox" defaultChecked={false} />
-                      已开启
-                    </label>
-                  ) : (
-                    <span style={{ color: "var(--text-tertiary)" }}>暂无配置项</span>
+      {/* ── Layout ── */}
+      <div className="xx-ce-layout">
+        {/* ── Left Panel ── */}
+        <div className="xx-ce-left">
+          {/* 1. 基础设置 */}
+          <div className="xx-ce-section">
+            <div className="xx-ce-section-header" onClick={() => toggle("basic")}>
+              <span>基础设置</span>
+              <span>{sections.basic ? "▾" : "▸"}</span>
+            </div>
+            {sections.basic && (
+              <div className="xx-ce-section-body">
+                {/* 背景模糊 */}
+                <div className="xx-ce-switch-item">
+                  <div className="xx-ce-switch-row">
+                    <span>背景模糊</span>
+                    <Switch
+                      size="small"
+                      checked={cfg.blurEnabled}
+                      onChange={(v) => upd("blurEnabled", v)}
+                    />
+                  </div>
+                  {cfg.blurEnabled && (
+                    <div className="xx-ce-row">
+                      <label className="xx-ce-label">模糊度: {cfg.blurAmount}</label>
+                      <Slider
+                        min={0}
+                        max={20}
+                        step={1}
+                        value={cfg.blurAmount}
+                        onChange={(v) => upd("blurAmount", v)}
+                      />
+                    </div>
                   )}
                 </div>
-              )}
+
+                {/* 人物描边 */}
+                <div className="xx-ce-switch-item">
+                  <div className="xx-ce-switch-row">
+                    <span>人物描边</span>
+                    <Switch
+                      size="small"
+                      checked={cfg.personStrokeEnabled}
+                      onChange={(v) => upd("personStrokeEnabled", v)}
+                    />
+                  </div>
+                  {cfg.personStrokeEnabled && (
+                    <>
+                      <div className="xx-ce-row">
+                        <div className="xx-ce-radio-group">
+                          {(["solid", "dashed"] as StrokeStyle[]).map((s) => (
+                            <button
+                              key={s}
+                              className={`xx-ce-radio-btn ${cfg.personStrokeStyle === s ? "active" : ""}`}
+                              onClick={() => upd("personStrokeStyle", s)}
+                            >
+                              {s === "solid" ? "实线" : "虚线"}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                      <div className="xx-ce-row">
+                        <label className="xx-ce-label">描边颜色</label>
+                        <ColorPicker
+                          value={cfg.personStrokeColor}
+                          onChange={(v) => upd("personStrokeColor", v)}
+                        />
+                      </div>
+                      <div className="xx-ce-row">
+                        <label className="xx-ce-label">描边粗细: {cfg.personStrokeWidth}px</label>
+                        <Slider
+                          min={0}
+                          max={20}
+                          step={1}
+                          value={cfg.personStrokeWidth}
+                          onChange={(v) => upd("personStrokeWidth", v)}
+                        />
+                      </div>
+                    </>
+                  )}
+                </div>
+
+                {/* 文字自动拆分 */}
+                <div className="xx-ce-switch-item">
+                  <div className="xx-ce-switch-row">
+                    <span>文字自动拆分</span>
+                    <Switch
+                      size="small"
+                      checked={cfg.autoSplitEnabled}
+                      onChange={(v) => upd("autoSplitEnabled", v)}
+                    />
+                  </div>
+                  {cfg.autoSplitEnabled && (
+                    <>
+                      <div className="xx-ce-row">
+                        <label className="xx-ce-label">主标题最大字数: {cfg.titleMaxChars}</label>
+                        <Slider
+                          min={1}
+                          max={15}
+                          step={1}
+                          value={cfg.titleMaxChars}
+                          onChange={(v) => upd("titleMaxChars", v)}
+                        />
+                      </div>
+                      <div className="xx-ce-row">
+                        <label className="xx-ce-label">
+                          副标题最大字数: {cfg.subtitleMaxChars}
+                        </label>
+                        <Slider
+                          min={1}
+                          max={20}
+                          step={1}
+                          value={cfg.subtitleMaxChars}
+                          onChange={(v) => upd("subtitleMaxChars", v)}
+                        />
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* 2. 人像设置 */}
+          <div className="xx-ce-section">
+            <div className="xx-ce-section-header" onClick={() => toggle("portrait")}>
+              <span>人像设置</span>
+              <div className="xx-ce-header-right">
+                <span className="xx-ce-status-text">已开启</span>
+                <Switch
+                  size="small"
+                  checked={cfg.portraitEnabled}
+                  onChange={(v) => upd("portraitEnabled", v)}
+                  onClick={(_, e) => e.stopPropagation()}
+                />
+              </div>
             </div>
-          ))}
+            {sections.portrait && (
+              <div className="xx-ce-section-body">
+                <div className="xx-ce-row">
+                  <label className="xx-ce-label">大小: {cfg.portraitSize}%</label>
+                  <Slider
+                    min={0}
+                    max={100}
+                    step={1}
+                    value={cfg.portraitSize}
+                    onChange={(v) => upd("portraitSize", v)}
+                  />
+                </div>
+                <div className="xx-ce-row">
+                  <label className="xx-ce-label">位置</label>
+                  <PositionPair
+                    x={cfg.portraitPosition.x}
+                    y={cfg.portraitPosition.y}
+                    onChange={(pos) => upd("portraitPosition", pos)}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* 3. 背景设置 */}
+          <div className="xx-ce-section">
+            <div className="xx-ce-section-header" onClick={() => toggle("background")}>
+              <span>背景设置</span>
+              <div className="xx-ce-header-right">
+                <span className="xx-ce-status-text">已开启</span>
+                <Switch
+                  size="small"
+                  checked={cfg.backgroundEnabled}
+                  onChange={(v) => upd("backgroundEnabled", v)}
+                  onClick={(_, e) => e.stopPropagation()}
+                />
+              </div>
+            </div>
+            {sections.background && (
+              <div className="xx-ce-section-body">
+                <div className="xx-ce-row">
+                  <label className="xx-ce-label">大小: {cfg.backgroundSize}%</label>
+                  <Slider
+                    min={0}
+                    max={100}
+                    step={1}
+                    value={cfg.backgroundSize}
+                    onChange={(v) => upd("backgroundSize", v)}
+                  />
+                </div>
+                <div className="xx-ce-row">
+                  <label className="xx-ce-label">位置</label>
+                  <PositionPair
+                    x={cfg.backgroundPosition.x}
+                    y={cfg.backgroundPosition.y}
+                    onChange={(pos) => upd("backgroundPosition", pos)}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* 4. 主标题 */}
+          <div className="xx-ce-section">
+            <div className="xx-ce-section-header" onClick={() => toggle("title")}>
+              <span>主标题</span>
+              <span>{sections.title ? "▾" : "▸"}</span>
+            </div>
+            {sections.title && (
+              <div className="xx-ce-section-body">
+                <TextStylePanel config={cfg.title} onChange={updTitle} placeholder="主标题文字" />
+              </div>
+            )}
+          </div>
+
+          {/* 5. 副标题 */}
+          <div className="xx-ce-section">
+            <div className="xx-ce-section-header" onClick={() => toggle("subtitle")}>
+              <span>副标题</span>
+              <span>{sections.subtitle ? "▾" : "▸"}</span>
+            </div>
+            {sections.subtitle && (
+              <div className="xx-ce-section-body">
+                <TextStylePanel
+                  config={cfg.subtitle}
+                  onChange={updSubtitle}
+                  placeholder="副标题文字"
+                />
+              </div>
+            )}
+          </div>
+
+          {/* 6. 蒙版 */}
+          <div className="xx-ce-section">
+            <div className="xx-ce-section-header" onClick={() => toggle("mask")}>
+              <span>蒙版</span>
+              <div className="xx-ce-header-right">
+                <span className="xx-ce-status-text">已开启</span>
+                <Switch
+                  size="small"
+                  checked={cfg.maskEnabled}
+                  onChange={(v) => upd("maskEnabled", v)}
+                  onClick={(_, e) => e.stopPropagation()}
+                />
+              </div>
+            </div>
+            {sections.mask && (
+              <div className="xx-ce-section-body">
+                <div className="xx-ce-row">
+                  <label className="xx-ce-label">蒙版图片</label>
+                  <div className="xx-ce-file-row">
+                    <input
+                      className="xx-ce-file-name"
+                      readOnly
+                      value={cfg.maskImage || "未选择文件"}
+                    />
+                    <button className="xx-ce-file-btn" onClick={() => fileRef.current?.click()}>
+                      选择
+                    </button>
+                    <input
+                      ref={fileRef}
+                      type="file"
+                      accept="image/*"
+                      style={{ display: "none" }}
+                      onChange={(e) => {
+                        const f = e.target.files?.[0]
+                        if (f) upd("maskImage", f.name)
+                      }}
+                    />
+                  </div>
+                </div>
+                <div className="xx-ce-row">
+                  <label className="xx-ce-label">大小: {cfg.maskSize}%</label>
+                  <Slider
+                    min={0}
+                    max={100}
+                    step={1}
+                    value={cfg.maskSize}
+                    onChange={(v) => upd("maskSize", v)}
+                  />
+                </div>
+                <div className="xx-ce-row">
+                  <label className="xx-ce-label">位置</label>
+                  <PositionPair
+                    x={cfg.maskPosition.x}
+                    y={cfg.maskPosition.y}
+                    onChange={(pos) => upd("maskPosition", pos)}
+                  />
+                </div>
+                <div className="xx-ce-row">
+                  <label className="xx-ce-label">颜色</label>
+                  <ColorPicker value={cfg.maskColor} onChange={(v) => upd("maskColor", v)} />
+                </div>
+                <div className="xx-ce-row">
+                  <label className="xx-ce-label">透明度: {cfg.maskOpacity}%</label>
+                  <Slider
+                    min={0}
+                    max={100}
+                    step={1}
+                    value={cfg.maskOpacity}
+                    onChange={(v) => upd("maskOpacity", v)}
+                  />
+                </div>
+                <div className="xx-ce-row">
+                  <label className="xx-ce-label">形状</label>
+                  <Select
+                    value={cfg.maskShape}
+                    onChange={(v) => upd("maskShape", v)}
+                    style={{ width: "100%" }}
+                    options={[
+                      { label: "矩形", value: "矩形" },
+                      { label: "圆形", value: "圆形" },
+                      { label: "渐变", value: "渐变" },
+                    ]}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
         </div>
 
-        {/* 右侧画布预览 */}
-        <div className="xx-cover-editor-right">
-          <div className="xx-cover-editor-canvas">
-            {/* 人像占位 */}
-            <div className="xx-cover-editor-portrait">
-              {/* 四角拖拽手柄 */}
-              <span className="xx-cover-editor-handle" style={{ top: -4, left: -4 }} />
-              <span className="xx-cover-editor-handle" style={{ top: -4, right: -4 }} />
-              <span className="xx-cover-editor-handle" style={{ bottom: -4, left: -4 }} />
-              <span className="xx-cover-editor-handle" style={{ bottom: -4, right: -4 }} />
+        {/* ── Right Preview ── */}
+        <div className="xx-ce-right">
+          <div className="xx-ce-canvas-wrap">
+            {/* decorative anchor dots */}
+            <span className="xx-ce-anchor-dot" style={{ top: "10%", left: "-12px" }} />
+            <span className="xx-ce-anchor-dot" style={{ top: "50%", right: "-12px" }} />
+            <span className="xx-ce-anchor-dot" style={{ bottom: "10%", left: "-12px" }} />
+
+            <div className="xx-ce-canvas">
+              {/* Background */}
+              {cfg.backgroundEnabled && (
+                <div
+                  className="xx-ce-el-bg"
+                  style={{
+                    width: `${cfg.backgroundSize}%`,
+                    height: `${cfg.backgroundSize}%`,
+                    left: `${cfg.backgroundPosition.x}%`,
+                    top: `${cfg.backgroundPosition.y}%`,
+                    transform: "translate(-50%, -50%)",
+                  }}
+                />
+              )}
+
+              {/* Portrait placeholder */}
+              {cfg.portraitEnabled && (
+                <div
+                  className="xx-ce-el-portrait"
+                  style={{
+                    width: `${cfg.portraitSize}%`,
+                    height: `${cfg.portraitSize * 0.6}%`,
+                    left: `${cfg.portraitPosition.x}%`,
+                    top: `${cfg.portraitPosition.y}%`,
+                    transform: "translate(-50%, -50%)",
+                    borderStyle: cfg.personStrokeEnabled ? cfg.personStrokeStyle : "solid",
+                    borderColor: cfg.personStrokeEnabled ? cfg.personStrokeColor : "#333",
+                    borderWidth: cfg.personStrokeEnabled
+                      ? `${Math.max(1, cfg.personStrokeWidth / 4)}px`
+                      : "2px",
+                    filter: cfg.blurEnabled ? `blur(${cfg.blurAmount / 4}px)` : undefined,
+                  }}
+                >
+                  {/* 8 handles */}
+                  {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
+                    <span key={i} className={`xx-ce-handle xx-ce-handle--${i}`} />
+                  ))}
+                </div>
+              )}
+
+              {/* Title */}
+              <div style={renderTextStyle(cfg.title)}>
+                {cfg.title.background.enabled && (
+                  <div
+                    className="xx-ce-text-bg"
+                    style={{
+                      backgroundColor: cfg.title.background.color,
+                      opacity: cfg.title.background.opacity / 100,
+                      width: `${cfg.title.background.width}%`,
+                      height: `${cfg.title.background.height}%`,
+                      left: `${cfg.title.background.posX}%`,
+                      top: `${cfg.title.background.posY}%`,
+                      transform: `translate(-50%, -50%) rotate(${cfg.title.background.rotation}deg)`,
+                      position: "absolute",
+                      border:
+                        cfg.title.background.shape === "polygon" ? "1px dashed #999" : undefined,
+                    }}
+                  />
+                )}
+                {cfg.title.text || "主标题文字"}
+              </div>
+
+              {/* Subtitle */}
+              <div style={renderTextStyle(cfg.subtitle)}>
+                {cfg.subtitle.background.enabled && (
+                  <div
+                    className="xx-ce-text-bg"
+                    style={{
+                      backgroundColor: cfg.subtitle.background.color,
+                      opacity: cfg.subtitle.background.opacity / 100,
+                      width: `${cfg.subtitle.background.width}%`,
+                      height: `${cfg.subtitle.background.height}%`,
+                      left: `${cfg.subtitle.background.posX}%`,
+                      top: `${cfg.subtitle.background.posY}%`,
+                      transform: `translate(-50%, -50%) rotate(${cfg.subtitle.background.rotation}deg)`,
+                      position: "absolute",
+                    }}
+                  />
+                )}
+                {cfg.subtitle.text || "副标题文字"}
+              </div>
+
+              {/* Mask overlay */}
+              {cfg.maskEnabled && (
+                <div
+                  className="xx-ce-el-mask"
+                  style={{
+                    backgroundColor: cfg.maskColor,
+                    opacity: cfg.maskOpacity / 100,
+                  }}
+                />
+              )}
             </div>
-            {/* 文字占位 */}
-            <div className="xx-cover-editor-title-placeholder">主标题文字</div>
-            <div className="xx-cover-editor-subtitle-placeholder">副标题文字</div>
           </div>
         </div>
       </div>

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

@@ -1,35 +0,0 @@
-/**
- * 单个 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

@@ -1,105 +0,0 @@
-/**
- * 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

@@ -0,0 +1,230 @@
+/**
+ * 标题迷你 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 "../../constants"
+import { getFontFamily } from "@/components/title/constants"
 
 interface TitlePresetItem {
   key: string

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

@@ -190,3 +190,269 @@
   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,23 +1,61 @@
 /**
- * 标题样式设置区
- * 位置/字体/字号/样式按钮/预设
+ * 标题样式设置面板（v3 重构）
+ *
+ * 三种模式（mode）：
+ * - 「默认」（不传）：顶部实时预览 + 爆款预设网格 + 参数 Tab（基础/描边/阴影/背景/排版/封面）
+ * - 「模板网格」（enableTemplates=true, paramsOnly=false）：
+ *     仅显示顶部标题栏「标题模板」+ 我的模板/系统模板两个分组的大卡片网格，
+ *     卡片用图片背景 + 真实标题渲染（Canvas 叠加透明渲染），底部始终可见
+ *     编辑/复制/导出/删除 4 个按钮，选中卡片紫边紫影。
+ * - 「仅参数」（paramsOnly=true）：仅渲染参数 Tab（给编辑器右侧用，不显示预览/预设/模板网格）
+ *
+ * 历史：#2001 6 Tab 参数面板；#2003 初版内联模板网格；v3 按 sketch 重写大卡片 + 图片背景
  */
-import React from "react"
+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 type { TitleSettings } from "../../types"
-import TitlePresetsGrid from "./TitlePresetsGrid"
-// 标题样式面板共用样式（#1809 ⑦）：智能剪辑与 AI数字人复用同一组件，
-// 由组件自带样式，避免 AI数字人页面重复引入整个 generate.css
+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 "./TitleStylePanel.css"
+import "@/components/title/TitleTemplate.css"
 
 interface PositionOption {
   value: string
   label: string
 }
 
-interface TitlePresetItem {
+interface LegacyPreset {
   key: string
   label: string
-  previewStyle: React.CSSProperties
+  emoji?: string
+  style?: Record<string, unknown>
+  previewStyle?: React.CSSProperties
 }
 
 interface TitleStylePanelProps {
@@ -31,11 +69,151 @@ interface TitleStylePanelProps {
   onToggleShadow: () => void
   onApplyPreset: (presetKey: string) => void
   activePreset: string | null
-  titlePresets: TitlePresetItem[]
+  titlePresets: LegacyPreset[]
   POSITION_OPTIONS: PositionOption[]
-  FONT_OPTIONS: string[]
+  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
 }
 
+/* ── 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,
@@ -47,107 +225,658 @@ const TitleStylePanel: React.FC<TitleStylePanelProps> = ({
   onToggleShadow,
   onApplyPreset,
   activePreset,
-  titlePresets,
+  titlePresets: _titlePresets,
   POSITION_OPTIONS,
-  FONT_OPTIONS,
+  showCoverToggle = false,
+  previewWidth = 220,
+  enableTemplates = false,
+  selectedTemplateId,
+  onApplyTemplate,
+  onUpdateStyle,
+  paramsOnly = false,
+  hideEditor = false,
 }) => {
+  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">
-      <h4 className="xx-section-subtitle">标题样式</h4>
-
-      {/* 位置 + 字体 一行 */}
-      <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>
-      </div>
-
-      {/* 字号滑块 */}
-      <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 className="xx-title-style-section ts-panel">
+      {/* 实时迷你预览 */}
+      <div className="ts-preview-wrap">
+        <TitleMiniPreview
+          settings={settings}
+          width={previewWidth}
+          sampleText={settings.title || "预览标题文字"}
         />
       </div>
 
-      {/* 预设样式 */}
-      <div className="xx-form-field">
-        <label>预设样式</label>
-        <TitlePresetsGrid
-          presets={titlePresets}
-          activePreset={activePreset}
-          onApply={onApplyPreset}
-          fontFamily={settings.font}
-        />
+      {/* 爆款预设 */}
+      <div className="ts-form-field">
+        <div className="ts-field-label-row">
+          <label>爆款预设</label>
+          {activePreset && <span className="ts-field-value">已选</span>}
+        </div>
+        {renderPresetGrid()}
       </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>
+      {renderParamsTabs()}
+
+      {!hideEditor && editorOpen && editingTemplate && (
+        <TitleTemplateEditor
+          open={editorOpen}
+          template={editingTemplate}
+          onClose={() => {
+            setEditorOpen(false)
+            setEditingTemplate(null)
+          }}
+          onSave={handleEditorSave}
+        />
+      )}
     </div>
   )
 }

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

@@ -54,22 +54,8 @@ export const POSITION_OPTIONS = [
   { value: "custom", label: "自定义" },
 ]
 
-/* ── 标题字体选项 ── */
-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["思源黑体"]
-}
+/* ── 标题字体：统一使用公共层定义（#2001） ── */
+export { getFontFamily } from "@/components/title/constants"
 
 /* ── 标题样式预设 ── */
 export const TITLE_PRESETS = [
@@ -549,31 +535,6 @@ 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,27 +2880,6 @@
    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;
@@ -3240,135 +3219,6 @@
   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;
@@ -3485,3 +3335,388 @@
     grid-template-columns: minmax(0, 360px);
   }
 }
+
+/* ================================================================
+   自定义封面编辑器 (Cover Editor Modal) — xx-ce-*
+   ================================================================ */
+
+/* Header */
+.xx-ce-header {
+  margin-bottom: 16px;
+}
+.xx-ce-name-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: var(--radius-sm, 6px);
+  font-size: 14px;
+  margin-bottom: 12px;
+  outline: none;
+}
+.xx-ce-name-input:focus {
+  border-color: #7c3aed;
+}
+.xx-ce-header-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* Layout */
+.xx-ce-layout {
+  display: flex;
+  gap: 20px;
+  min-height: 500px;
+}
+.xx-ce-left {
+  width: 300px;
+  flex-shrink: 0;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+.xx-ce-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  border-radius: 8px;
+  min-height: 480px;
+}
+
+/* Section / collapsible panels */
+.xx-ce-section {
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 6px;
+  margin-bottom: 8px;
+}
+.xx-ce-section-header {
+  padding: 10px 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #f0f4ff;
+  user-select: none;
+}
+.xx-ce-section-header:hover {
+  background: #e8edf8;
+}
+.xx-ce-section-body {
+  padding: 12px;
+  font-size: 12px;
+  color: var(--text-secondary, #666);
+}
+.xx-ce-header-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.xx-ce-status-text {
+  font-size: 11px;
+  font-weight: 400;
+  color: #3b82f6;
+}
+
+/* Rows / labels */
+.xx-ce-row {
+  margin: 12px 0;
+}
+.xx-ce-label {
+  display: block;
+  font-size: 12px;
+  color: #374151;
+  margin-bottom: 4px;
+}
+.xx-ce-hint {
+  font-size: 11px;
+  color: #9ca3af;
+  margin-top: 4px;
+}
+.xx-ce-sub-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+}
+.xx-ce-switch-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.xx-ce-switch-item {
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f3f4f6;
+}
+.xx-ce-switch-item:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+/* Color picker */
+.xx-ce-color-picker {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.xx-ce-color-picker input[type="color"] {
+  width: 32px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  cursor: pointer;
+  background: none;
+}
+.xx-ce-color-picker input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 1px;
+}
+.xx-ce-color-picker input[type="color"]::-webkit-color-swatch {
+  border: none;
+  border-radius: 2px;
+}
+.xx-ce-color-hex {
+  width: 70px;
+  padding: 2px 6px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: monospace;
+}
+
+/* Position pair */
+.xx-ce-position {
+  display: flex;
+  gap: 8px;
+}
+.xx-ce-position .ant-input-number {
+  flex: 1;
+}
+
+/* Radio button group */
+.xx-ce-radio-group {
+  display: flex;
+  gap: 0;
+}
+.xx-ce-radio-btn {
+  padding: 4px 14px;
+  font-size: 12px;
+  border: 1px solid #d1d5db;
+  background: #fff;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.xx-ce-radio-btn:first-child {
+  border-radius: 4px 0 0 4px;
+}
+.xx-ce-radio-btn:last-child {
+  border-radius: 0 4px 4px 0;
+}
+.xx-ce-radio-btn + .xx-ce-radio-btn {
+  border-left: none;
+}
+.xx-ce-radio-btn.active {
+  background: #7c3aed;
+  color: #fff;
+  border-color: #7c3aed;
+}
+.xx-ce-radio-btn.active + .xx-ce-radio-btn {
+  border-left: 1px solid #d1d5db;
+}
+
+/* Font select dots */
+.xx-ce-font-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.xx-ce-font-dot--preset {
+  background: #10b981;
+}
+.xx-ce-font-dot--system {
+  background: #3b82f6;
+}
+
+/* Shadow actions */
+.xx-ce-shadow-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+}
+.xx-ce-add-shadow-btn {
+  padding: 4px 10px;
+  font-size: 12px;
+  background: #7c3aed;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.xx-ce-add-shadow-btn:hover {
+  background: #6d28d9;
+}
+.xx-ce-preset-shadow-btn {
+  padding: 4px 10px;
+  font-size: 12px;
+  background: #fff;
+  color: #374151;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Text background sub-section */
+.xx-ce-text-bg-section {
+  margin-top: 8px;
+  padding: 8px;
+  background: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #f0f0f0;
+}
+
+/* Readonly text display */
+.xx-ce-readonly-text {
+  padding: 6px 10px;
+  background: #eff6ff;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #1e40af;
+  margin-bottom: 4px;
+}
+
+/* Mask file row */
+.xx-ce-file-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.xx-ce-file-name {
+  flex: 1;
+  padding: 4px 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 12px;
+  background: #f9fafb;
+  color: #6b7280;
+}
+.xx-ce-file-btn {
+  padding: 4px 10px;
+  font-size: 12px;
+  background: #fff;
+  color: #374151;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.xx-ce-file-btn:hover {
+  border-color: #7c3aed;
+  color: #7c3aed;
+}
+
+/* ── Canvas / Preview ── */
+.xx-ce-canvas-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.xx-ce-canvas {
+  width: 225px;
+  height: 400px;
+  background: #ddd;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.xx-ce-anchor-dot {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #ef4444;
+  border-radius: 50%;
+  z-index: 5;
+}
+
+/* Portrait element */
+.xx-ce-el-portrait {
+  position: absolute;
+  background: #a8d4f0;
+  border: 2px solid #333;
+  z-index: 2;
+}
+
+/* 8 handles: 0=TL 1=T 2=TR 3=R 4=BR 5=B 6=BL 7=L */
+.xx-ce-handle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #3b82f6;
+  border: 1px solid #fff;
+  z-index: 10;
+}
+.xx-ce-handle--0 { top: -4px; left: -4px; }
+.xx-ce-handle--1 { top: -4px; left: 50%; margin-left: -4px; }
+.xx-ce-handle--2 { top: -4px; right: -4px; }
+.xx-ce-handle--3 { top: 50%; right: -4px; margin-top: -4px; }
+.xx-ce-handle--4 { bottom: -4px; right: -4px; }
+.xx-ce-handle--5 { bottom: -4px; left: 50%; margin-left: -4px; }
+.xx-ce-handle--6 { bottom: -4px; left: -4px; }
+.xx-ce-handle--7 { top: 50%; left: -4px; margin-top: -4px; }
+
+/* Background element */
+.xx-ce-el-bg {
+  position: absolute;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  z-index: 1;
+}
+
+/* Mask overlay */
+.xx-ce-el-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  pointer-events: none;
+}
+
+/* Text background shape in canvas */
+.xx-ce-text-bg {
+  position: absolute;
+  z-index: -1;
+}
+
+/* Antd Slider overrides for editor */
+.xx-ce-section-body .ant-slider {
+  margin: 4px 0 8px;
+}
+.xx-ce-section-body .ant-slider-rail {
+  background: #e5e7eb;
+}
+.xx-ce-section-body .ant-slider-track {
+  background: #3b82f6;
+}
+.xx-ce-section-body .ant-slider-handle::after {
+  box-shadow: 0 0 0 2px #3b82f6;
+}
+.xx-ce-section-body .ant-slider-mark-text {
+  font-size: 10px;
+}
+
+/* Antd Select dropdown font dots */
+.xx-ce-font-select-dropdown .ant-select-item-option-content {
+  display: flex;
+  align-items: center;
+}
+
+/* Canvas text elements — ensure proper stacking */
+.xx-ce-canvas > div {
+  pointer-events: none;
+}

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

@@ -22,6 +22,8 @@ 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,15 +30,30 @@ 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,
@@ -87,7 +102,7 @@ export function useBatchCovers({
       addBusy(index)
       try {
         const titleText = titles[index] || ""
-        const response = await generateCover(selectedTemplate, {
+        const response = await generateCover("default", {
           generated_video_id: target.id,
           video_url: target.file_url || target.download_url || "",
           cover_type: "ai_frame",
@@ -100,8 +115,37 @@ export function useBatchCovers({
                   font_color: titleStyle.color,
                   position: titleStyle.position,
                   bold: titleStyle.bold,
-                  stroke: titleStyle.stroke,
-                  shadow: titleStyle.shadow,
+                  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>
+                  >,
                 },
               }
             : {}),
@@ -122,7 +166,7 @@ export function useBatchCovers({
         removeBusy(index)
       }
     },
-    [generatedVideos, titles, titleStyle, selectedTemplate, patchCover, addBusy, removeBusy],
+    [generatedVideos, titles, titleStyle, patchCover, addBusy, removeBusy],
   )
 
   /** 为第 index 个视频上传自定义封面 */

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

@@ -13,6 +13,7 @@ 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"
@@ -33,6 +34,21 @@ 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 {
@@ -95,6 +111,9 @@ 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
@@ -234,6 +253,7 @@ 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)
 
@@ -311,6 +331,8 @@ export const useGenerateFormState = (): GenerateFormState => {
     setTtsVoiceId,
     ttsVoiceSource,
     setTtsVoiceSource,
+    ttsStyle,
+    setTtsStyle,
     ttsVoiceAssetId,
     setTtsVoiceAssetId,
     dedupEnabled,

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

@@ -1,6 +1,7 @@
 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"
 
@@ -12,6 +13,156 @@ 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 加载表单配置
  */
@@ -27,14 +178,7 @@ export function usePlanConfigLoader({
     if (!planConfigStr) return
     try {
       const config = JSON.parse(planConfigStr) as {
-        title_config?: {
-          content?: string
-          ai_auto_select?: boolean
-          position?: string
-          font_preset?: string
-          font_size?: number
-          font_color?: string
-        }
+        title_config?: Record<string, unknown>
         subtitle_config?: { enabled?: boolean }
         bgm_config?: { enabled?: boolean; music_id?: string }
         mode?: string
@@ -43,16 +187,8 @@ export function usePlanConfigLoader({
       }
 
       if (config.title_config) {
-        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,
-        }))
+        const tc = config.title_config as TitleConfig & Record<string, unknown>
+        setTitleSettings((prev: TitleSettings) => mapTitleCfgToSettings(prev, tc))
       }
       if (config.segments && config.segments.length > 0) {
         const assetIds = config.segments
@@ -76,15 +212,8 @@ export function usePlanConfigLoader({
         if (plan.name) setTitleSettings((prev: TitleSettings) => ({ ...prev, title: plan.name }))
         const cfg = plan.config
         if (cfg?.title_config) {
-          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,
-          }))
+          const tc2 = cfg.title_config as unknown as TitleConfig & Record<string, unknown>
+          setTitleSettings((prev: TitleSettings) => mapTitleCfgToSettings(prev, tc2))
         }
         if (cfg?.cover_config) {
           const cc = cfg.cover_config as CoverConfig

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

@@ -208,6 +208,7 @@ 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,
@@ -240,8 +241,91 @@ export function useGenerateVideo(props: UseGenerateVideoProps) {
                       }
                     : {}),
                   bold: props.titleSettings.bold,
-                  stroke: props.titleSettings.stroke,
-                  shadow: props.titleSettings.shadow,
+                  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 } }),
+                        },
+                      }
+                    : {}),
                 },
               }
             : {}),

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

@@ -1,155 +0,0 @@
-/**
- * 预览素材加载 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

@@ -1,131 +0,0 @@
-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

@@ -1,384 +0,0 @@
-/**
- * 素材片段调度器 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,9 +1,8 @@
-import { useEffect, useRef } from "react"
+import { useEffect } 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"
 
@@ -16,7 +15,7 @@ interface UseStep4TitleProps {
 
 /**
  * Step 4 标题设置 Hook
- * 封装 AI 标题生成、标题样式设置等逻辑
+ * 封装标题样式设置等逻辑
  */
 export function useStep4Title({
   titleSettings,
@@ -34,26 +33,9 @@ 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(() => {
@@ -86,40 +68,12 @@ 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

@@ -1,124 +0,0 @@
-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,5 +1,7 @@
 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 {
@@ -15,8 +17,24 @@ export function useTitleStyleUpdaters({
   titleSettings,
   onTitleSettingsChange,
 }: UseTitleStyleUpdatersOptions) {
-  /** 匹配预设：只用 color/bold/italic/stroke/shadow，不再匹配 size */
+  /** 匹配预设：对新预设（snake→camel 后）全字段比；旧预设只比 color/bold/italic/stroke/shadow */
   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 &&
@@ -90,33 +108,95 @@ export function useTitleStyleUpdaters({
   }, [titleSettings, onTitleSettingsChange])
 
   const toggleStroke = useCallback(() => {
-    onTitleSettingsChange({ ...titleSettings, stroke: !titleSettings.stroke })
+    onTitleSettingsChange({
+      ...titleSettings,
+      stroke: !titleSettings.stroke,
+      // 开启描边时若宽度过小给个默认值（让滑块可见可调）
+      strokeWidth:
+        !titleSettings.stroke && (titleSettings.strokeWidth ?? 0) < 2
+          ? 4
+          : titleSettings.strokeWidth,
+    })
   }, [titleSettings, onTitleSettingsChange])
 
   const toggleShadow = useCallback(() => {
     onTitleSettingsChange({ ...titleSettings, shadow: !titleSettings.shadow })
   }, [titleSettings, onTitleSettingsChange])
 
-  /** 应用预设：只覆盖 color/bold/italic/stroke/shadow，不改变字号 */
+  /** 应用预设：正确把 snake_case 的 preset.style 转为 camelCase 再 spread */
   const applyPreset = useCallback(
     (presetKey: string) => {
-      const preset = TITLE_PRESETS.find((p) => p.key === presetKey)
-      if (!preset) return
+      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
       onTitleSettingsChange({
         ...titleSettings,
-        color: preset.style.color,
-        bold: preset.style.bold,
-        italic: preset.style.italic,
-        stroke: preset.style.stroke,
-        shadow: preset.style.shadow,
+        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,
       })
     },
     [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: TITLE_PRESETS,
+    titlePresets: NEW_TITLE_PRESETS,
     updateTitle,
     toggleAiAutoSelect,
     updatePosition,
@@ -129,5 +209,7 @@ 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 */
+  /** 当前选中的视频模板 ID（封面模板由本地 state 管理） */
   selectedTemplate?: string
   /** Step4 标题设置，用于封面叠加标题 */
   titleSettings?: TitleSettings
@@ -30,7 +30,7 @@ interface UseStep6CoverProps {
 export function useStep6Cover({
   coverSettings,
   onCoverSettingsChange,
-  selectedTemplate = "",
+  selectedTemplate: _selectedTemplate = "",
   titleSettings,
   generatedVideos,
 }: UseStep6CoverProps) {
@@ -79,7 +79,8 @@ export function useStep6Cover({
       return
     }
 
-    if (!selectedTemplate) {
+    const activeCoverTemplateId = selectedTemplateId || "default"
+    if (!activeCoverTemplateId) {
       message.error("请先选择模板")
       return
     }
@@ -95,7 +96,7 @@ export function useStep6Cover({
     }, 300000)
 
     try {
-      const response = await generateCover(selectedTemplate, {
+      const response = await generateCover(activeCoverTemplateId, {
         generated_video_id: finalVideo.id,
         video_url: finalVideo.file_url || finalVideo.download_url || "",
         cover_type: "ai_frame",
@@ -156,7 +157,7 @@ export function useStep6Cover({
       setGenerating(false)
     }
   }, [
-    selectedTemplate,
+    selectedTemplateId,
     finalVideo,
     coverSettings,
     onCoverSettingsChange,

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

@@ -1,165 +0,0 @@
-/**
- * 批量变体配音预览音频解析（#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,8 +3,9 @@
  */
 
 import type { AssetItem } from "@/api/assets"
+import type { TitleLineOverride } from "@/components/title/types"
 
-/* ── 标题设置 ── */
+/* ── 标题设置（#2001 升级：新增描边/阴影/背景/逐行/封面独立样式/排版字段） ── */
 export interface TitleSettings {
   aiAutoSelect: boolean
   title: string
@@ -19,6 +20,58 @@ 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
+  }
 }
 
 /* ── 智能匹配结果 ── */
@@ -28,14 +81,6 @@ export interface SmartMatchResult {
   reasons: string[]
 }
 
-/* ── AI 标题结果 ── */
-export interface AiTitleResult {
-  title: string
-  style: string
-  styleLabel: string
-  highlights: string[]
-}
-
 /* ── 配音推荐结果 ── */
 export interface VoiceRecommendation {
   voiceId: string
@@ -49,28 +94,33 @@ export interface StepDef {
   label: string
 }
 
-/* ── 标题预设样式 ── */
-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
+/** 旧版 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,
 }

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

@@ -32,6 +32,238 @@ export const DEFAULT_COVER_CONFIG: CoverConfig = {
   thumbnail_url: "",
 }
 
+/** 文字方向 */
+export type TextDirection = "horizontal" | "vertical"
+
+/** 文字背景形状 */
+export type TextBgShape = "rectangle" | "polygon"
+
+/** 描边样式 */
+export type StrokeStyle = "solid" | "dashed"
+
+/** 阴影层 */
+export interface ShadowLayer {
+  color: string
+  offsetX: number
+  offsetY: number
+  blur: number
+}
+
+/** 文字位置 */
+export interface TextPosition {
+  x: number
+  y: number
+}
+
+/** 文字背景配置 */
+export interface TextBackground {
+  enabled: boolean
+  color: string
+  opacity: number
+  shape: TextBgShape
+  width: number
+  height: number
+  posX: number
+  posY: number
+  rotation: number
+}
+
+/** 文字样式配置（主标题/副标题共用） */
+export interface TextStyleConfig {
+  text: string
+  fontFamily: string
+  fontSize: number
+  fontWeight: number
+  direction: TextDirection
+  charsPerLine: number
+  letterSpacing: number
+  lineHeight: number
+  color: string
+  strokeColor: string
+  strokeWidth: number
+  shadows: ShadowLayer[]
+  traditionalShadow: boolean
+  position: TextPosition
+  rotation: number
+  background: TextBackground
+}
+
+/** 编辑器完整配置 */
+export interface CoverEditorConfig {
+  // 基础设置
+  blurEnabled: boolean
+  blurAmount: number
+  personStrokeEnabled: boolean
+  personStrokeStyle: StrokeStyle
+  personStrokeColor: string
+  personStrokeWidth: number
+  autoSplitEnabled: boolean
+  titleMaxChars: number
+  subtitleMaxChars: number
+
+  // 人像设置
+  portraitEnabled: boolean
+  portraitSize: number
+  portraitPosition: TextPosition
+
+  // 背景设置
+  backgroundEnabled: boolean
+  backgroundSize: number
+  backgroundPosition: TextPosition
+
+  // 主标题
+  title: TextStyleConfig
+
+  // 副标题
+  subtitle: TextStyleConfig
+
+  // 蒙版
+  maskEnabled: boolean
+  maskImage: string
+  maskSize: number
+  maskPosition: TextPosition
+  maskColor: string
+  maskOpacity: number
+  maskShape: string
+}
+
+/** 默认主标题配置 */
+export const DEFAULT_TITLE_CONFIG: TextStyleConfig = {
+  text: "主标题文字",
+  fontFamily: "思源黑体",
+  fontSize: 120,
+  fontWeight: 700,
+  direction: "horizontal",
+  charsPerLine: 10,
+  letterSpacing: 24,
+  lineHeight: 144,
+  color: "#FFD700",
+  strokeColor: "#000000",
+  strokeWidth: 3,
+  shadows: [],
+  traditionalShadow: false,
+  position: { x: 50, y: 30 },
+  rotation: 0,
+  background: {
+    enabled: false,
+    color: "#FFFFFF",
+    opacity: 25,
+    shape: "polygon",
+    width: 30,
+    height: 10,
+    posX: 50,
+    posY: 50,
+    rotation: 0,
+  },
+}
+
+/** 默认副标题配置 */
+export const DEFAULT_SUBTITLE_CONFIG: TextStyleConfig = {
+  text: "副标题文字",
+  fontFamily: "思源黑体",
+  fontSize: 82,
+  fontWeight: 500,
+  direction: "horizontal",
+  charsPerLine: 17,
+  letterSpacing: 23,
+  lineHeight: 72,
+  color: "#FFFFFF",
+  strokeColor: "#000000",
+  strokeWidth: 1,
+  shadows: [],
+  traditionalShadow: false,
+  position: { x: 50, y: 70 },
+  rotation: 0,
+  background: {
+    enabled: true,
+    color: "#000000",
+    opacity: 70,
+    shape: "rectangle",
+    width: 100,
+    height: 20,
+    posX: 50,
+    posY: 80,
+    rotation: 0,
+  },
+}
+
+/** 默认编辑器配置 */
+export const DEFAULT_EDITOR_CONFIG: CoverEditorConfig = {
+  blurEnabled: false,
+  blurAmount: 10,
+  personStrokeEnabled: false,
+  personStrokeStyle: "solid",
+  personStrokeColor: "#FFFFFF",
+  personStrokeWidth: 8,
+  autoSplitEnabled: false,
+  titleMaxChars: 4,
+  subtitleMaxChars: 10,
+
+  portraitEnabled: true,
+  portraitSize: 80,
+  portraitPosition: { x: 50, y: 50 },
+
+  backgroundEnabled: true,
+  backgroundSize: 90,
+  backgroundPosition: { x: 50, y: 50 },
+
+  title: DEFAULT_TITLE_CONFIG,
+  subtitle: DEFAULT_SUBTITLE_CONFIG,
+
+  maskEnabled: true,
+  maskImage: "",
+  maskSize: 100,
+  maskPosition: { x: 50, y: 50 },
+  maskColor: "#000000",
+  maskOpacity: 100,
+  maskShape: "矩形",
+}
+
+/** 预置字体 */
+export const PRESET_FONTS = [
+  { name: "思源黑体", family: "'Noto Sans SC', sans-serif" },
+  { name: "斗鱼追光体2.0", family: "'DouYu ZhuangGuangTi', sans-serif" },
+  { name: "抖音美好体", family: "'DouYin MeiHaoTi', sans-serif" },
+]
+
+/** 系统字体 */
+export const SYSTEM_FONTS = [
+  { name: "Arial", family: "Arial, sans-serif" },
+  { name: "Helvetica", family: "Helvetica, sans-serif" },
+  { name: "Times New Roman", family: "'Times New Roman', serif" },
+  { name: "Georgia", family: "Georgia, serif" },
+  { name: "Verdana", family: "Verdana, sans-serif" },
+  { name: "Tahoma", family: "Tahoma, sans-serif" },
+  { name: "Impact", family: "Impact, sans-serif" },
+  { name: "Comic Sans MS", family: "'Comic Sans MS', cursive" },
+  { name: "Courier New", family: "'Courier New', monospace" },
+  { name: "微软雅黑", family: "'Microsoft YaHei', sans-serif" },
+  { name: "宋体", family: "SimSun, serif" },
+  { name: "黑体", family: "SimHei, sans-serif" },
+  { name: "楷体", family: "KaiTi, serif" },
+  { name: "仿宋", family: "FangSong, serif" },
+  { name: "Trebuchet MS", family: "'Trebuchet MS', sans-serif" },
+  { name: "Lucida Console", family: "'Lucida Console', monospace" },
+  { name: "Palatino", family: "Palatino, serif" },
+  { name: "Garamond", family: "Garamond, serif" },
+  { name: "Bookman", family: "Bookman, serif" },
+  { name: "Avant Garde", family: "'Avant Garde', sans-serif" },
+  { name: "Calibri", family: "Calibri, sans-serif" },
+  { name: "Cambria", family: "Cambria, serif" },
+  { name: "Candara", family: "Candara, sans-serif" },
+  { name: "Consolas", family: "Consolas, monospace" },
+  { name: "Constantia", family: "Constantia, serif" },
+  { name: "Corbel", family: "Corbel, sans-serif" },
+  { name: "Franklin Gothic", family: "'Franklin Gothic', sans-serif" },
+  { name: "Gill Sans", family: "'Gill Sans', sans-serif" },
+  { name: "Optima", family: "Optima, sans-serif" },
+  { name: "Futura", family: "Futura, sans-serif" },
+  { name: "Rockwell", family: "Rockwell, serif" },
+]
+
+/** 所有字体列表 */
+export const ALL_FONTS = [...PRESET_FONTS, ...SYSTEM_FONTS]
+
 /** 封面模板 */
 export interface CoverTemplate {
   id: string
@@ -39,12 +271,5 @@ export interface CoverTemplate {
   thumbnail_url: string
   is_system: boolean
   created_at: string
-  config?: {
-    background_enabled?: boolean
-    background_color?: string
-    portrait_enabled?: boolean
-    title_text?: string
-    subtitle_text?: string
-    mask_enabled?: boolean
-  }
+  config?: CoverEditorConfig
 }

apps/web/src/pages/subscription/Plans.tsx

@@ -39,6 +39,7 @@ import { getDiscountPriceCents } from "@/api/points/types"
 import type { SubscriptionPlan } from "@/api/subscription/types"
 import { PLAN_LABEL, BILLING_CYCLE_LABEL } from "@/api/subscription/types"
 import "./Plans.css"
+import { ENABLE_CREDIT_SYSTEM } from "@/config/features"
 
 const { Title, Text, Paragraph } = Typography
 
@@ -249,17 +250,23 @@ const Plans: React.FC = () => {
   return (
     <div className="xx-plans-page">
       <PageHead
-        title="会员与积分"
-        description="开通会员解锁全部功能，按需充值积分灵活使用 AI 能力"
+        title={ENABLE_CREDIT_SYSTEM ? "会员与积分" : "会员订阅"}
+        description={
+          ENABLE_CREDIT_SYSTEM
+            ? "开通会员解锁全部功能，按需充值积分灵活使用 AI 能力"
+            : "开通会员解锁全部功能"
+        }
         actions={
-          <Space>
-            <Button
-              icon={<ThunderboltOutlined />}
-              onClick={() => navigate("/app/points/transactions")}
-            >
-              积分明细
-            </Button>
-          </Space>
+          ENABLE_CREDIT_SYSTEM ? (
+            <Space>
+              <Button
+                icon={<ThunderboltOutlined />}
+                onClick={() => navigate("/app/points/transactions")}
+              >
+                积分明细
+              </Button>
+            </Space>
+          ) : null
         }
       />
 
@@ -296,13 +303,15 @@ const Plans: React.FC = () => {
                   )}
                 </div>
               </div>
-              <div>
-                <Text type="secondary">可用积分</Text>
-                <div className="xx-current-balance">
-                  <ThunderboltOutlined style={{ color: "#8b5cf6" }} />
-                  <span className="xx-current-balance-val">{bal}</span>
+              {ENABLE_CREDIT_SYSTEM && (
+                <div>
+                  <Text type="secondary">可用积分</Text>
+                  <div className="xx-current-balance">
+                    <ThunderboltOutlined style={{ color: "#8b5cf6" }} />
+                    <span className="xx-current-balance-val">{bal}</span>
+                  </div>
                 </div>
-              </div>
+              )}
               {!isMember && freeLimit > 0 && (
                 <div>
                   <Text type="secondary">今日免费混剪</Text>
@@ -319,18 +328,20 @@ const Plans: React.FC = () => {
               )}
             </Space>
           </Col>
-          <Col>
-            <Button
-              type="primary"
-              icon={<ThunderboltOutlined />}
-              onClick={() => {
-                const el = document.getElementById("points-packages")
-                el?.scrollIntoView({ behavior: "smooth" })
-              }}
-            >
-              充值积分
-            </Button>
-          </Col>
+          {ENABLE_CREDIT_SYSTEM && (
+            <Col>
+              <Button
+                type="primary"
+                icon={<ThunderboltOutlined />}
+                onClick={() => {
+                  const el = document.getElementById("points-packages")
+                  el?.scrollIntoView({ behavior: "smooth" })
+                }}
+              >
+                充值积分
+              </Button>
+            </Col>
+          )}
         </Row>
       </Card>
 
@@ -461,69 +472,71 @@ const Plans: React.FC = () => {
         </Col>
       </Row>
 
-      {/* 积分充值 */}
-      <div id="points-packages">
-        <Title level={4} style={{ marginTop: 40 }}>
-          <ThunderboltOutlined style={{ color: "#8b5cf6", marginRight: 8 }} />
-          积分充值
-          <Tooltip title="积分永久有效，可用于所有 AI 功能；付费会员享折扣">
-            <Text type="secondary" style={{ fontSize: 13, marginLeft: 8, fontWeight: "normal" }}>
-              （永久有效）
-            </Text>
-          </Tooltip>
-        </Title>
+      {/* 积分充值（积分系统关闭时隐藏，代码保留不删除） */}
+      {ENABLE_CREDIT_SYSTEM && (
+        <div id="points-packages">
+          <Title level={4} style={{ marginTop: 40 }}>
+            <ThunderboltOutlined style={{ color: "#8b5cf6", marginRight: 8 }} />
+            积分充值
+            <Tooltip title="积分永久有效，可用于所有 AI 功能；付费会员享折扣">
+              <Text type="secondary" style={{ fontSize: 13, marginLeft: 8, fontWeight: "normal" }}>
+                （永久有效）
+              </Text>
+            </Tooltip>
+          </Title>
 
-        <Row gutter={[16, 16]}>
-          {packages.map((pkg) => {
-            const priceCents = getDiscountPriceCents(pkg, userDiscount)
-            const originalCents = pkg.price_cents
-            const discount =
-              priceCents < originalCents ? Math.round((1 - priceCents / originalCents) * 100) : 0
-            const unit = priceCents / 100 / pkg.points
-            const isHot = pkg.unit_price < 0.1
-            return (
-              <Col xs={24} sm={8} key={pkg.code}>
-                <Card
-                  className={`xx-pkg-card ${discount > 0 ? "has-discount" : ""} ${isHot ? "recommended" : ""}`}
-                  hoverable
-                >
-                  {isHot && <div className="xx-pkg-badge">热门</div>}
-                  {discount > 0 && (
-                    <Tag color="gold" className="xx-pkg-discount">
-                      {Math.round((priceCents / originalCents) * 10) / 1}折
-                    </Tag>
-                  )}
-                  <div className="xx-pkg-name">{pkg.name}</div>
-                  <div className="xx-pkg-points">
-                    <ThunderboltOutlined /> {pkg.points.toLocaleString()} 积分
-                  </div>
-                  <div className="xx-pkg-price">
-                    <span className="currency">¥</span>
-                    <span className="amount">
-                      {(priceCents / 100)
-                        .toFixed(priceCents % 100 === 0 ? 0 : 1)
-                        .replace(/\.0$/, "")}
-                    </span>
-                    {discount > 0 && (
-                      <span className="xx-pkg-origin">¥{(originalCents / 100).toFixed(0)}</span>
-                    )}
-                  </div>
-                  <div className="xx-pkg-unit">≈¥{unit.toFixed(3)}/积分</div>
-                  <Button
-                    block
-                    type={isHot ? "primary" : "default"}
-                    loading={buying === pkg.code}
-                    onClick={() => handleBuyPoints(pkg)}
-                    style={{ marginTop: 12 }}
+          <Row gutter={[16, 16]}>
+            {packages.map((pkg) => {
+              const priceCents = getDiscountPriceCents(pkg, userDiscount)
+              const originalCents = pkg.price_cents
+              const discount =
+                priceCents < originalCents ? Math.round((1 - priceCents / originalCents) * 100) : 0
+              const unit = priceCents / 100 / pkg.points
+              const isHot = pkg.unit_price < 0.1
+              return (
+                <Col xs={24} sm={8} key={pkg.code}>
+                  <Card
+                    className={`xx-pkg-card ${discount > 0 ? "has-discount" : ""} ${isHot ? "recommended" : ""}`}
+                    hoverable
                   >
-                    立即购买
-                  </Button>
-                </Card>
-              </Col>
-            )
-          })}
-        </Row>
-      </div>
+                    {isHot && <div className="xx-pkg-badge">热门</div>}
+                    {discount > 0 && (
+                      <Tag color="gold" className="xx-pkg-discount">
+                        {Math.round((priceCents / originalCents) * 10) / 1}折
+                      </Tag>
+                    )}
+                    <div className="xx-pkg-name">{pkg.name}</div>
+                    <div className="xx-pkg-points">
+                      <ThunderboltOutlined /> {pkg.points.toLocaleString()} 积分
+                    </div>
+                    <div className="xx-pkg-price">
+                      <span className="currency">¥</span>
+                      <span className="amount">
+                        {(priceCents / 100)
+                          .toFixed(priceCents % 100 === 0 ? 0 : 1)
+                          .replace(/\.0$/, "")}
+                      </span>
+                      {discount > 0 && (
+                        <span className="xx-pkg-origin">¥{(originalCents / 100).toFixed(0)}</span>
+                      )}
+                    </div>
+                    <div className="xx-pkg-unit">≈¥{unit.toFixed(3)}/积分</div>
+                    <Button
+                      block
+                      type={isHot ? "primary" : "default"}
+                      loading={buying === pkg.code}
+                      onClick={() => handleBuyPoints(pkg)}
+                      style={{ marginTop: 12 }}
+                    >
+                      立即购买
+                    </Button>
+                  </Card>
+                </Col>
+              )
+            })}
+          </Row>
+        </div>
+      )}
     </div>
   )
 }

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

@@ -98,6 +98,7 @@ const VoiceMaterialLibrary: React.FC = () => {
     ttsText,
     ttsVoiceId,
     ttsSpeed,
+    ttsStyle,
     ttsStatus,
     ttsAudioUrl,
     ttsError,
@@ -107,6 +108,7 @@ const VoiceMaterialLibrary: React.FC = () => {
     setTtsText,
     setTtsVoiceId,
     setTtsSpeed,
+    setTtsStyle,
     handleTtsSynthesize,
     handleTtsSave,
     handleTtsClose,
@@ -315,6 +317,7 @@ const VoiceMaterialLibrary: React.FC = () => {
           text={ttsText}
           voiceId={ttsVoiceId}
           speed={ttsSpeed}
+          style={ttsStyle}
           status={ttsStatus}
           audioUrl={ttsAudioUrl ?? ""}
           error={ttsError ?? ""}
@@ -324,6 +327,7 @@ 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,6 +1,8 @@
 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"
 
@@ -20,6 +22,8 @@ interface TtsModalProps {
   text: string
   voiceId: string
   speed: number
+  style: TtsStyle
+  onStyleChange: (style: TtsStyle) => void
   status: TtsStatus
   audioUrl: string
   error: string
@@ -39,6 +43,8 @@ const TtsModal: React.FC<TtsModalProps> = ({
   text,
   voiceId,
   speed,
+  style,
+  onStyleChange,
   status,
   audioUrl,
   error,
@@ -143,6 +149,9 @@ 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,6 +2,7 @@ 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"
 
@@ -18,6 +19,7 @@ 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)
@@ -59,6 +61,7 @@ export function useTtsSynthesize() {
         text: ttsText.trim(),
         voice_id: ttsVoiceId || undefined,
         speed: ttsSpeed,
+        style: ttsStyle,
       })
       setTtsJobId(resp.job_id)
 
@@ -89,7 +92,7 @@ export function useTtsSynthesize() {
       setTtsStatus("error")
       setTtsError(msg)
     }
-  }, [ttsText, ttsVoiceId, ttsSpeed])
+  }, [ttsText, ttsVoiceId, ttsSpeed, ttsStyle])
 
   /** 保存 TTS 结果到素材库 */
   const handleTtsSave = useCallback(async () => {
@@ -131,6 +134,7 @@ export function useTtsSynthesize() {
     ttsText,
     ttsVoiceId,
     ttsSpeed,
+    ttsStyle,
     ttsJobId,
     ttsStatus,
     ttsAudioUrl,
@@ -141,6 +145,7 @@ export function useTtsSynthesize() {
     setTtsText,
     setTtsVoiceId,
     setTtsSpeed,
+    setTtsStyle,
     handleTtsSynthesize,
     handleTtsSave,
     handleTtsClose,