Merge PR #1827: AI数字人v3 完整联调版（TTS直生+smart-cover+前后端冲突解决）(#1827)

4efa71ec 合并时 tests/unit/test_lipsync_routes.py 误取了 develop #1809 版本
（synthesize_speech/route._resolve_voice_id/断言 audio_url 移除），与合并后
v3 #1822 双模式实现不一致，导致 7 个单测失败。改用后端解冲突分支
backend/ai-avatar-merge-1827 (0e994072) 中已适配 v3 的版本：
mock submit_synthesize_task、emotion 兴奋→excited、双模式 audio_url 保留。
本地验证该文件 28 passed、lipsync/avatar/tts 相关 79 passed。

.gitea/workflows/ci-pipeline.yml

@@ -20,6 +20,7 @@ on:
         default: "手动触发 - CI漏触发补跑"
 permissions:
   contents: read
+  pull-requests: read
 concurrency:
   group: ci-pipeline-${{ gitea.ref }}
   cancel-in-progress: true
@@ -88,9 +89,22 @@ jobs:
         GITHUB_TOKEN: ${{ github.token }}
       run: |
         set -eu
+        # 优先用 git diff 判断 PR 改动范围（比 API 稳定）
         PR_NUMBER=$(echo "$GITHUB_REF" | sed 's|refs/pull/||; s|/.*||')
-        API_URL="${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/pulls/${PR_NUMBER}/files?limit=300"
-        FILES=$(curl -s -H "Authorization: token ${GITHUB_TOKEN}" "$API_URL" | python3 -c "import sys,json; [print(f['filename']) for f in json.load(sys.stdin)]")
+        if command -v git >/dev/null 2>&1 && [ -d .git ]; then
+          FILES=$(git diff --name-only origin/develop...HEAD 2>/dev/null || true)
+        fi
+        if [ -z "${FILES:-}" ]; then
+          # fallback 到 API
+          API_URL="${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/pulls/${PR_NUMBER}/files?limit=300"
+          FILES=$(curl -sf -H "Authorization: token ${GITHUB_TOKEN}" "$API_URL" | python3 -c "import sys,json; [print(f['filename']) for f in json.load(sys.stdin)]" 2>/dev/null || true)
+        fi
+        if [ -z "${FILES:-}" ]; then
+          echo "⚠️ 无法获取变更文件列表，保守运行完整 CI"
+          echo "skip_backend=false" >> $GITHUB_OUTPUT
+          echo "skip_frontend=false" >> $GITHUB_OUTPUT
+          exit 0
+        fi
         FRONTEND_COUNT=$(echo "$FILES" | grep -c '^apps/web/' || true)
         BACKEND_COUNT=$(echo "$FILES" | grep -cv '^apps/web/' || true)
         TOTAL=$(echo "$FILES" | grep -cv '^$' || true)

alembic/versions/073_add_lipsync_tts_fields.py

@@ -0,0 +1,45 @@
+"""lipsync_jobs 增加 TTS 直生字段（voice_id/script_text/speed/emotion）
+
+Revision ID: 073_add_lipsync_tts_fields
+Revises: 072_add_ai_avatar_render
+Create Date: 2026-09-09
+"""
+
+import sqlalchemy as sa
+
+from alembic import op
+
+revision = "073_add_lipsync_tts_fields"
+down_revision = "072_add_ai_avatar_render"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # 对口型支持「传音色 + 文案直接生成」：后端内部先 TTS 合成音频再提交对口型
+    op.add_column(
+        "lipsync_jobs",
+        sa.Column("voice_id", sa.String(200), nullable=False, server_default=""),
+    )
+    op.add_column(
+        "lipsync_jobs",
+        sa.Column("script_text", sa.Text(), nullable=False, server_default=""),
+    )
+    op.add_column(
+        "lipsync_jobs",
+        sa.Column("speed", sa.Float(), nullable=False, server_default=sa.text("1.0")),
+    )
+    op.add_column(
+        "lipsync_jobs",
+        sa.Column("emotion", sa.String(20), nullable=False, server_default=""),
+    )
+    # audio_url 改为可空：直生模式下音频由后端 TTS 合成后回填
+    op.alter_column("lipsync_jobs", "audio_url", existing_type=sa.Text(), nullable=True)
+
+
+def downgrade() -> None:
+    op.alter_column("lipsync_jobs", "audio_url", existing_type=sa.Text(), nullable=False)
+    op.drop_column("lipsync_jobs", "emotion")
+    op.drop_column("lipsync_jobs", "speed")
+    op.drop_column("lipsync_jobs", "script_text")
+    op.drop_column("lipsync_jobs", "voice_id")

alembic/versions/074_ai_avatar_render_script_id_optional.py

@@ -0,0 +1,36 @@
+"""ai_avatar_render_jobs.script_id 放宽为可空串（手动文案直生场景不关联文案库）
+
+Revision ID: 074_render_script_id_optional
+Revises: 073_add_lipsync_tts_fields
+Create Date: 2026-09-09
+"""
+
+import sqlalchemy as sa
+
+from alembic import op
+
+revision = "074_render_script_id_optional"
+down_revision = "073_add_lipsync_tts_fields"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # 列保持 NOT NULL（空串占位），仅应用层允许不传；这里显式补 server_default 防止历史约束歧义
+    with op.batch_alter_table("ai_avatar_render_jobs") as batch:
+        batch.alter_column(
+            "script_id",
+            existing_type=sa.String(length=36),
+            nullable=False,
+            server_default="",
+        )
+
+
+def downgrade() -> None:
+    with op.batch_alter_table("ai_avatar_render_jobs") as batch:
+        batch.alter_column(
+            "script_id",
+            existing_type=sa.String(length=36),
+            nullable=False,
+            server_default=None,
+        )

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

@@ -17,7 +17,10 @@ from app.dependencies import get_db_session
 from app.schemas.ai_avatar_render import (
     AiAvatarRenderJobResponse,
     CreateAiAvatarRenderRequest,
+    SmartCoverRequest,
+    SmartCoverResponse,
 )
+from app.services.ai_avatar_cover_service import generate_smart_cover
 from app.services.ai_avatar_render_service import (
     AiAvatarRenderError,
     AiAvatarRenderService,
@@ -49,7 +52,7 @@ def create_render_job(
     """
     try:
         job = svc.create_render_job(
-            user_id=current_user.id,
+            user_id=current_user.user.id,
             lipsync_job_id=body.lipsync_job_id,
             script_id=body.script_id,
             b_roll_segments=[s.model_dump() for s in body.b_roll_segments],
@@ -94,7 +97,7 @@ def list_render_jobs(
 ):
     """获取 AI 数字人渲染任务列表."""
     items, total = svc.list_render_jobs(
-        user_id=current_user.id,
+        user_id=current_user.user.id,
         project_id=project_id,
         status=status,
         offset=offset,
@@ -118,7 +121,7 @@ def get_render_job(
     svc: AiAvatarRenderService = Depends(_get_service),
 ):
     """获取渲染任务详情."""
-    job = svc.get_render_job(job_id, current_user.id)
+    job = svc.get_render_job(job_id, current_user.user.id)
     if job is None:
         raise HTTPException(status_code=404, detail="渲染任务不存在")
     return job
@@ -134,7 +137,7 @@ def cancel_render_job(
     svc: AiAvatarRenderService = Depends(_get_service),
 ):
     """取消渲染任务（仅 pending 状态可取消）."""
-    job = svc.cancel_render_job(job_id, current_user.id)
+    job = svc.cancel_render_job(job_id, current_user.user.id)
     if job is None:
         raise HTTPException(status_code=404, detail="渲染任务不存在")
     if job.status != "cancelled":
@@ -155,7 +158,7 @@ def retry_render_job(
     svc: AiAvatarRenderService = Depends(_get_service),
 ):
     """重试失败的渲染任务."""
-    job = svc.retry_render_job(job_id, current_user.id)
+    job = svc.retry_render_job(job_id, current_user.user.id)
     if job is None:
         raise HTTPException(status_code=404, detail="渲染任务不存在")
     if job.status != "pending":
@@ -173,3 +176,34 @@ def retry_render_job(
         logger.warning("Celery 任务提交失败，重试任务已重置但未触发执行: %s", job.id)
 
     return job
+
+
+
+# ── POST /smart-cover — 智能获取封面（MediaKit 抽帧 + 评分选帧）────────
+
+
+@router.post("/smart-cover", response_model=SmartCoverResponse)
+def generate_avatar_smart_cover(
+    body: SmartCoverRequest,
+    current_user: AuthenticatedUser = Depends(get_current_user),
+) -> SmartCoverResponse:
+    """智能获取数字人视频封面.
+
+    复用智能剪辑的 MediaKit 抽帧 + 质量评分选最佳帧逻辑（非 FFmpeg 简单截帧），
+    并将选中帧转存到自家 OSS，返回非临时的封面公网 URL。
+
+    前端「智能获取封面」按钮可直接调用本接口；不依赖渲染任务完成。
+    """
+    video_url = (body.video_url or "").strip()
+    if not video_url.startswith(("http://", "https://")):
+        raise HTTPException(status_code=400, detail="video_url 必须是合法的 HTTP/HTTPS URL")
+
+    cover_url = generate_smart_cover(video_url, max_frames=body.max_frames)
+    if not cover_url:
+        return SmartCoverResponse(
+            cover_url="",
+            status="fallback_failed",
+            message="智能抽帧失败（MediaKit 不可用或抽帧异常），请稍后重试",
+        )
+    logger.info("智能封面生成成功: user=%s", current_user.user.id)
+    return SmartCoverResponse(cover_url=cover_url, status="completed")

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

@@ -1,4 +1,4 @@
-"""对口型 API 路由 — #1796 MediaKit 对口型.
+"""对口型 API 路由 — #1796 MediaKit 对口型, #1809 参数调整.
 
 接口：
   POST   /api/v1/lipsync/jobs          提交对口型任务
@@ -13,20 +13,36 @@ from __future__ import annotations
 import logging
 
 from app.auth import AuthenticatedUser, get_current_user
-from app.dependencies import get_db_session
+from app.dependencies import (
+    get_cosyvoice_service,
+    get_db_session,
+    get_voice_clone_profile_repository,
+)
 from app.schemas.lipsync import CreateLipsyncJobRequest, LipsyncJobResponse
 from app.services.lipsync_service import LipsyncService
 from app.services.mediakit_client import MediaKitError
-from fastapi import APIRouter, Depends, HTTPException, Query
+from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException, Query
 from sqlalchemy.orm import Session
 
+from packages.application.cosyvoice_service import CosyVoiceError, CosyVoiceService
+
 logger = logging.getLogger(__name__)
 
 router = APIRouter()
 
 
-def _get_service(db: Session = Depends(get_db_session)) -> LipsyncService:
-    return LipsyncService(db)
+def _get_service(
+    db: Session = Depends(get_db_session),
+    voice_clone_repo=Depends(get_voice_clone_profile_repository),
+    cosyvoice_service: CosyVoiceService = Depends(get_cosyvoice_service),
+) -> LipsyncService:
+    # voice_clone_repo 用于克隆音色 profile 解析；cosyvoice_service 用于 TTS 直生
+    # （TTS 合成、音色解析、错误码归一化都在 LipsyncService 内部完成）
+    return LipsyncService(
+        db,
+        cosyvoice_service=cosyvoice_service,
+        voice_clone_repo=voice_clone_repo,
+    )
 
 
 # ── POST /jobs — 提交对口型任务 ───────────────────────────────────────────
@@ -40,26 +56,55 @@ def create_lipsync_job(
 ):
     """提交对口型任务.
 
-    输入人物视频 + 驱动音频，异步生成口型对齐视频。
+    #1809/#1822: 前端传 {video_url, voice_id, script_text, speed?, emotion?}，
+    后端内部解析音色、调 TTS 合成音频、转存 OSS，再提交 MediaKit；
+    也支持直接传 {video_url, audio_url}。
     """
     try:
         job = svc.create_job(
-            user_id=current_user.id,
+            user_id=current_user.user.id,
             video_url=body.video_url,
             audio_url=body.audio_url,
+            voice_id=body.voice_id,
+            script_text=body.script_text,
+            speed=body.speed,
+            emotion=body.emotion,
             enable_video_loop=body.enable_video_loop,
             project_id=body.project_id,
         )
-    except MediaKitError as exc:
-        # 创建失败（job 已记录 error），返回 502
+    except ValueError as exc:
+        # 参数无效（如 voice_id 格式不对、文本过长等）
+        raise HTTPException(status_code=400, detail=str(exc)) from exc
+    except CosyVoiceError as exc:
+        # TTS 合成基础设施失败（API/网络/认证）
         raise HTTPException(
             status_code=502,
+            detail={"code": "TTSSynthesisFailed", "message": str(exc)},
+        ) from exc
+    except MediaKitError as exc:
+        # TTS 合成失败 / 音色无权访问 → 400/403；MediaKit 提交失败 → 502
+        status_code = 502
+        if exc.code in ("VoiceForbidden",):
+            status_code = 403
+        elif exc.code in ("InvalidInput", "TTSInvalidParam", "VoiceNotReady"):
+            status_code = 400
+        elif exc.code == "TTSSynthesisFailed":
+            status_code = 502
+        raise HTTPException(
+            status_code=status_code,
             detail={
                 "code": exc.code,
                 "message": str(exc),
-                "request_id": exc.request_id,
+                "request_id": getattr(exc, "request_id", ""),
             },
         ) from exc
+    except Exception as exc:
+        # 兜底：任何未预期的错误返回 400 而非 500
+        logger.error("创建对口型任务异常: %s", exc, exc_info=True)
+        raise HTTPException(
+            status_code=400,
+            detail=f"创建对口型任务失败: {exc}",
+        ) from exc
 
     return job
 
@@ -78,7 +123,7 @@ def list_lipsync_jobs(
 ):
     """获取对口型任务列表."""
     items, total = svc.list_jobs(
-        user_id=current_user.id,
+        user_id=current_user.user.id,
         project_id=project_id,
         status=status,
         offset=offset,
@@ -98,13 +143,22 @@ def list_lipsync_jobs(
 @router.get("/jobs/{job_id}", response_model=LipsyncJobResponse)
 def get_lipsync_job(
     job_id: str,
+    background: BackgroundTasks,
     current_user: AuthenticatedUser = Depends(get_current_user),
     svc: LipsyncService = Depends(_get_service),
 ):
-    """获取对口型任务详情."""
-    job = svc.get_job(job_id, current_user.id)
+    """获取对口型任务详情.
+
+    非终态任务：先返回 DB 缓存，挂后台刷新（下次轮询拿到新状态），
+    避免 MediaKit 慢响应阻塞前端轮询。
+    """
+    job = svc.get_job(job_id, current_user.user.id)
     if job is None:
         raise HTTPException(status_code=404, detail="任务不存在")
+
+    if job.status not in ("completed", "failed"):
+        background.add_task(svc.refresh_job_status, job_id, current_user.user.id)
+
     return job
 
 
@@ -118,7 +172,7 @@ def refresh_lipsync_job(
     svc: LipsyncService = Depends(_get_service),
 ):
     """从 MediaKit 拉取最新状态并更新."""
-    job = svc.refresh_job_status(job_id, current_user.id)
+    job = svc.refresh_job_status(job_id, current_user.user.id)
     if job is None:
         raise HTTPException(status_code=404, detail="任务不存在")
     return job
@@ -134,7 +188,7 @@ def cancel_lipsync_job(
     svc: LipsyncService = Depends(_get_service),
 ):
     """取消对口型任务（仅 pending/submitted 状态可取消）."""
-    job = svc.cancel_job(job_id, current_user.id)
+    job = svc.cancel_job(job_id, current_user.user.id)
     if job is None:
         raise HTTPException(status_code=404, detail="任务不存在")
     if job.status != "cancelled":

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

@@ -173,6 +173,14 @@ def synthesize(
         # job.voice_id 统一存解析后的 CosyVoice voice_id
         actual_voice_id = resolved_profile.voice_id
 
+    # 语速/情绪等合成参数随 metadata 落库，workflow 提交 CosyVoice 时读取透传
+    synthesis_meta = {
+        "speed": request.speed,
+        "emotion": request.emotion or "",
+    }
+    if request.metadata_:
+        synthesis_meta.update(request.metadata_)
+
     use_case = CreateTTSJobUseCase(repository)
     job = use_case.execute(
         user_id=user_id,
@@ -180,7 +188,7 @@ def synthesize(
         voice_id=actual_voice_id,
         voice_model=request.voice_model,
         voice_clone_profile_id=voice_clone_profile_id,
-        metadata=request.metadata_,
+        metadata=synthesis_meta,
     )
 
     # 提交 CosyVoice 合成任务
@@ -567,6 +575,7 @@ def preview_tts(
             text=request.text,
             voice_id=actual_voice_id,
             speed=request.speed,
+            emotion=request.emotion,
         )
     except CosyVoiceError as e:
         raise HTTPException(

apps/api/app/schemas/ai_avatar_render.py

@@ -50,7 +50,7 @@ class CreateAiAvatarRenderRequest(BaseModel):
     """创建渲染任务请求."""
 
     lipsync_job_id: str = Field(..., description="对口型任务 ID")
-    script_id: str = Field(..., description="文案 ID")
+    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="标题配置")
     cover_config: dict[str, Any] = Field(default_factory=dict, description="封面配置")
@@ -67,10 +67,8 @@ class CreateAiAvatarRenderRequest(BaseModel):
     @field_validator("script_id")
     @classmethod
     def validate_script_id(cls, v: str) -> str:
-        v = v.strip()
-        if not v:
-            raise ValueError("script_id 不能为空")
-        return v
+        # script_id 可选：手动输入文案（TTS 直生）场景不关联文案库条目
+        return (v or "").strip()
 
 
 class AiAvatarRenderJobResponse(BaseModel):
@@ -80,7 +78,7 @@ class AiAvatarRenderJobResponse(BaseModel):
     user_id: str
     project_id: str
     lipsync_job_id: str
-    script_id: str
+    script_id: str = ""
     b_roll_segments: list[dict[str, Any]]
     title_config: dict[str, Any]
     cover_config: dict[str, Any]
@@ -109,3 +107,18 @@ class AiAvatarRenderProgressResponse(BaseModel):
     output_cover_url: str
     output_duration: float
     error_message: str
+
+
+class SmartCoverRequest(BaseModel):
+    """智能封面请求 — MediaKit 抽帧 + 质量评分选最佳帧."""
+
+    video_url: str = Field(..., description="数字人视频 URL（对口型/渲染成片）")
+    max_frames: int = Field(5, ge=1, le=10, description="抽帧数量（默认 5）")
+
+
+class SmartCoverResponse(BaseModel):
+    """智能封面响应."""
+
+    cover_url: str = Field("", description="封面图公网 URL（OSS，非临时）；失败为空")
+    status: str = Field("completed", description="completed / fallback_failed")
+    message: str = Field("", description="失败原因（如有）")

apps/api/app/schemas/lipsync.py

@@ -1,11 +1,17 @@
-"""对口型 API Schema 定义 — #1796."""
+"""对口型 API Schema 定义 — #1796 / #1809 / #1822.
+
+支持两种输入模式（二选一）：
+1. TTS 直生模式（推荐）：传 voice_id + script_text（+ speed/emotion），
+   后端内部先调 CosyVoice 合成音频，再提交 MediaKit 对口型。
+2. 直接音频模式：传 video_url + audio_url（音频已由调用方准备好）。
+"""
 
 from __future__ import annotations
 
 from datetime import datetime
 from typing import Optional
 
-from pydantic import BaseModel, Field, field_validator
+from pydantic import BaseModel, Field, model_validator
 
 
 class LipsyncJobResponse(BaseModel):
@@ -17,6 +23,10 @@ class LipsyncJobResponse(BaseModel):
     video_url: str
     audio_url: str
     enable_video_loop: bool
+    voice_id: str = ""
+    script_text: str = ""
+    speed: float = 1.0
+    emotion: str = ""
     mediakit_task_id: str
     status: str
     output_video_url: str
@@ -33,38 +43,58 @@ class LipsyncJobResponse(BaseModel):
 
 
 class CreateLipsyncJobRequest(BaseModel):
-    """创建对口型任务请求."""
+    """创建对口型任务请求.
+
+    两种模式（二选一）：
+    - TTS 直生：voice_id + script_text 必填（+ 可选 speed/emotion）；audio_url 留空。
+    - 直接音频：video_url + audio_url 必填。
+    """
 
     video_url: str = Field(..., description="人物视频 URL（MP4，≤30min，单人真人）")
-    audio_url: str = Field(..., description="驱动音频 URL（mp3/aac/wav/m4a/flac）")
+
+    # 模式 2：直接音频
+    audio_url: str = Field("", description="驱动音频 URL（mp3/aac/wav/m4a/flac）；直生模式留空")
+
+    # 模式 1：TTS 直生
+    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")
+    emotion: str = Field("", description="情绪（natural/excited/calm/friendly 或中文 自然/兴奋/沉稳/亲切）")
+
     enable_video_loop: bool = Field(False, description="音频长于视频时是否循环画面")
     project_id: str = Field("", description="项目 ID（可选）")
 
-    @field_validator("video_url")
-    @classmethod
-    def validate_video_url(cls, v: str) -> str:
-        v = v.strip()
-        if not v:
+    @model_validator(mode="after")
+    def _validate_input_mode(self) -> "CreateLipsyncJobRequest":
+        video = (self.video_url or "").strip()
+        if not video:
             raise ValueError("video_url 不能为空")
-        if not v.startswith(("http://", "https://")):
+        if not video.startswith(("http://", "https://")):
             raise ValueError("video_url 必须是 HTTP/HTTPS URL")
-        # 仅支持 MP4
-        lower = v.lower().split("?")[0]
+        lower = video.lower().split("?")[0]
         if not lower.endswith(".mp4"):
             raise ValueError("video_url 仅支持 MP4 格式")
-        return v
 
-    @field_validator("audio_url")
-    @classmethod
-    def validate_audio_url(cls, v: str) -> str:
-        v = v.strip()
-        if not v:
-            raise ValueError("audio_url 不能为空")
-        if not v.startswith(("http://", "https://")):
-            raise ValueError("audio_url 必须是 HTTP/HTTPS URL")
-        # 支持的音频格式
-        lower = v.lower().split("?")[0]
-        allowed_exts = (".mp3", ".aac", ".wav", ".m4a", ".flac")
-        if not any(lower.endswith(ext) for ext in allowed_exts):
-            raise ValueError(f"audio_url 格式不支持，仅支持: {', '.join(allowed_exts)}")
-        return v
+        has_audio = bool((self.audio_url or "").strip())
+        has_tts = bool((self.voice_id or "").strip()) and bool((self.script_text or "").strip())
+
+        if not has_audio and not has_tts:
+            raise ValueError(
+                "必须提供驱动音频：要么传 audio_url（直接音频模式），"
+                "要么同时传 voice_id + script_text（TTS 直生模式）"
+            )
+
+        if has_tts and len(self.script_text) > 5000:
+            raise ValueError("script_text 最长 5000 字符")
+
+        if has_audio:
+            au = self.audio_url.strip()
+            if not au.startswith(("http://", "https://")):
+                raise ValueError("audio_url 必须是 HTTP/HTTPS URL")
+            au_lower = au.lower().split("?")[0]
+            allowed = (".mp3", ".aac", ".wav", ".m4a", ".flac")
+            if not any(au_lower.endswith(ext) for ext in allowed):
+                raise ValueError(f"audio_url 格式不支持，仅支持: {', '.join(allowed)}")
+            self.audio_url = au
+
+        return self

apps/api/app/schemas/tts.py

@@ -16,6 +16,7 @@ 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="语速")
+    emotion: str = Field("", description="情绪（natural/excited/calm/friendly，或中文 自然/兴奋/沉稳/亲切）")
     voice_model: str = Field("", description="语音模型名称")
     voice_clone_profile_id: str = Field("", description="关联的音色克隆档案 ID")
     format: str = Field("mp3", description="输出格式（mp3/wav/pcm）")
@@ -109,6 +110,7 @@ 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="情绪（natural/excited/calm/friendly，或中文）")
     pitch: float = Field(1.0, ge=0.5, le=2.0, description="音调（预留，当前未使用）")
 
 

apps/api/app/services/ai_avatar_cover_service.py

@@ -0,0 +1,162 @@
+"""AI 数字人封面服务 — 复用智能剪辑的 MediaKit 抽帧 + 质量评分选最佳帧.
+
+与 generation_cover.py 的智能选帧能力对齐（不再用 FFmpeg 简单截帧）：
+1. MediaKit extract_frames 抽取多帧（默认 5 帧，SpecifiedFrames 策略）
+2. cover_frame_scorer.score_frames 按清晰度/亮度/色彩评分选最佳
+3. 下载最佳帧并转存 OSS，返回公网封面 URL
+
+降级：MediaKit 不可用或抽帧失败时返回空字符串，由调用方决定回退策略。
+"""
+
+from __future__ import annotations
+
+import logging
+import tempfile
+import uuid
+from pathlib import Path
+from typing import Optional
+
+logger = logging.getLogger(__name__)
+
+
+def select_best_cover_frame(video_url: str, *, max_frames: int = 5) -> str:
+    """从视频抽取多帧并评分选最佳帧，返回最佳帧的临时 URL.
+
+    Args:
+        video_url: 可公网访问的视频 URL
+        max_frames: 抽帧数量
+
+    Returns:
+        最佳帧图片 URL；失败返回空字符串
+    """
+    if not video_url:
+        return ""
+    try:
+        from packages.shared.cover_frame_scorer import score_frames
+        from packages.shared.mediakit_client import get_mediakit_client
+
+        mk = get_mediakit_client()
+        if not mk.is_available:
+            logger.warning("[数字人封面] MediaKit 未配置，无法智能抽帧")
+            return ""
+
+        snapshots = mk.extract_frames(
+            video_url=video_url,
+            strategy="SpecifiedFrames",
+            max_frames=max_frames,
+            poll_interval=2.0,
+            max_poll_attempts=5,
+            max_retries=0,
+        )
+        if not snapshots:
+            logger.warning("[数字人封面] MediaKit 未返回帧: %s", video_url[:80])
+            return ""
+
+        if len(snapshots) == 1:
+            return snapshots[0].get("image_url") or snapshots[0].get("url") or ""
+
+        # 下载各帧评分
+        import httpx
+
+        candidates = []
+        for snap in snapshots:
+            url = snap.get("image_url") or snap.get("url") or ""
+            if not url:
+                continue
+            tmp_path: Optional[str] = None
+            try:
+                resp = httpx.get(url, timeout=15, follow_redirects=True)
+                resp.raise_for_status()
+                with tempfile.NamedTemporaryFile(suffix=".jpg", delete=False) as tmp:
+                    tmp.write(resp.content)
+                    tmp_path = tmp.name
+                candidates.append({"image_path": tmp_path, "url": url})
+            except Exception:
+                candidates.append({"image_path": None, "url": url, "score": 0.0})
+
+        if not candidates:
+            return snapshots[0].get("image_url") or snapshots[0].get("url") or ""
+
+        scored = score_frames(candidates)
+        best = scored[0] if scored else None
+        best_url = best.get("url", "") if best else ""
+
+        # 清理临时文件
+        for c in candidates:
+            p = c.get("image_path")
+            if p:
+                try:
+                    Path(p).unlink(missing_ok=True)
+                except Exception:
+                    pass
+
+        logger.info(
+            "[数字人封面] 智能选帧完成: candidates=%d best_score=%s",
+            len(candidates),
+            best.get("score") if best else "n/a",
+        )
+        return best_url
+
+    except Exception:
+        logger.warning("[数字人封面] 智能选帧失败", exc_info=True)
+        return ""
+
+
+def persist_cover_to_oss(frame_url: str, *, job_id: str = "", prefix: str = "ai-avatar/covers") -> str:
+    """下载帧图并转存到 OSS，返回公网封面 URL.
+
+    Args:
+        frame_url: MediaKit 返回的临时帧图 URL
+        job_id: 关联任务 ID（用于 OSS key 命名）
+        prefix: OSS key 前缀
+
+    Returns:
+        OSS 公网 URL；失败回退原始 frame_url
+    """
+    if not frame_url:
+        return ""
+    tmp_path: Optional[str] = None
+    try:
+        import httpx
+
+        resp = httpx.get(frame_url, timeout=30, follow_redirects=True)
+        resp.raise_for_status()
+        if not resp.content:
+            return frame_url
+
+        with tempfile.NamedTemporaryFile(suffix=".jpg", delete=False) as tmp:
+            tmp.write(resp.content)
+            tmp_path = tmp.name
+
+        from packages.shared.storage import get_shared_storage_service
+
+        storage = get_shared_storage_service()
+        token = job_id or uuid.uuid4().hex[:12]
+        cover_key = f"{prefix}/{token}/cover_{uuid.uuid4().hex[:8]}.jpg"
+        public_url = storage.upload_file(
+            file_or_path=tmp_path,
+            storage_key=cover_key,
+            content_type="image/jpeg",
+        )
+        logger.info("[数字人封面] 封面已转存 OSS: key=%s", cover_key)
+        return public_url or frame_url
+    except Exception:
+        logger.warning("[数字人封面] 封面转存 OSS 失败，返回原始 URL", exc_info=True)
+        return frame_url
+    finally:
+        if tmp_path:
+            try:
+                Path(tmp_path).unlink(missing_ok=True)
+            except Exception:
+                pass
+
+
+def generate_smart_cover(video_url: str, *, job_id: str = "", max_frames: int = 5) -> str:
+    """一站式：MediaKit 智能抽帧选最佳 → 转存 OSS，返回封面公网 URL.
+
+    供独立封面接口与渲染管线复用。失败返回空字符串。
+    """
+    best_frame = select_best_cover_frame(video_url, max_frames=max_frames)
+    if not best_frame:
+        return ""
+    return persist_cover_to_oss(best_frame, job_id=job_id)

apps/api/app/services/ai_avatar_render_service.py

@@ -27,6 +27,7 @@ from packages.domain.video_filter_builder import (
     build_cover_extract_command,
     build_title_drawtext_filter,
 )
+from packages.shared.storage import get_shared_storage_service
 
 logger = logging.getLogger(__name__)
 
@@ -52,8 +53,8 @@ class AiAvatarRenderService:
         *,
         user_id: str,
         lipsync_job_id: str,
-        script_id: str,
-        b_roll_segments: list[dict[str, Any]],
+        script_id: str = "",
+        b_roll_segments: list[dict[str, Any]] | None = None,
         title_config: dict[str, Any],
         cover_config: dict[str, Any],
         project_id: str = "",
@@ -82,17 +83,19 @@ class AiAvatarRenderService:
         if not lipsync_job.output_video_url:
             raise AiAvatarRenderError("对口型任务输出视频 URL 为空", code="LipsyncJobNoOutput")
 
-        # 2. 验证文案归属
-        script = (
-            self.db.query(ScriptModel)
-            .filter(
-                ScriptModel.id == script_id,
-                ScriptModel.user_id == user_id,
+        # 2. 验证文案归属（仅当选了文案库条目时；手动输入文案直生场景 script_id 可空）
+        script_id = (script_id or "").strip()
+        if script_id:
+            script = (
+                self.db.query(ScriptModel)
+                .filter(
+                    ScriptModel.id == script_id,
+                    ScriptModel.user_id == user_id,
+                )
+                .first()
             )
-            .first()
-        )
-        if script is None:
-            raise AiAvatarRenderError("文案不存在或无权访问", code="ScriptNotFound")
+            if script is None:
+                raise AiAvatarRenderError("文案不存在或无权访问", code="ScriptNotFound")
 
         # 3. 创建渲染任务
         job_id = str(uuid.uuid4())
@@ -102,7 +105,7 @@ class AiAvatarRenderService:
             project_id=project_id,
             lipsync_job_id=lipsync_job_id,
             script_id=script_id,
-            b_roll_segments=[s if isinstance(s, dict) else s.model_dump() for s in b_roll_segments],
+            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,
             status="pending",
@@ -287,7 +290,22 @@ class AiAvatarRenderService:
                 output_video_url = self._upload_to_oss(output_video_path, f"ai-avatar/{job_id}/output.mp4")
                 job.output_video_url = output_video_url
 
-                if cover_path:
+                # 封面：优先复用智能剪辑的 MediaKit 抽帧 + 质量评分选最佳帧；
+                # MediaKit 不可用时回退到 FFmpeg 已按 cover_config 抽取的 cover_path
+                smart_cover_url = ""
+                if output_video_url:
+                    try:
+                        from app.services.ai_avatar_cover_service import (
+                            generate_smart_cover,
+                        )
+
+                        smart_cover_url = generate_smart_cover(output_video_url, job_id=job_id, max_frames=5)
+                    except Exception:
+                        logger.warning("智能封面(MediaKit)失败，回退 FFmpeg 封面 job_id=%s", job_id, exc_info=True)
+
+                if smart_cover_url:
+                    job.output_cover_url = smart_cover_url
+                elif cover_path:
                     output_cover_url = self._upload_to_oss(cover_path, f"ai-avatar/{job_id}/cover.jpg")
                     job.output_cover_url = output_cover_url
 
@@ -363,8 +381,14 @@ class AiAvatarRenderService:
     def _upload_to_oss(self, local_path: str, oss_key: str) -> str:
         """上传文件到 OSS，返回 URL.
 
-        简化实现，实际应调用 OSS SDK。
+        使用 SharedStorageService 统一存储服务。
         """
-        # TODO: 集成实际 OSS 上传
-        logger.info("上传文件到 OSS: %s -> %s", local_path, oss_key)
-        return f"https://oss.example.com/{oss_key}"
+        storage = get_shared_storage_service()
+        url = storage.upload_file_smart(local_path, oss_key)
+        if url is None:
+            raise AiAvatarRenderError(
+                f"上传文件到 OSS 失败: {oss_key}",
+                code="OSSUploadFailed",
+            )
+        logger.info("上传文件到 OSS 成功: %s -> %s", local_path, url)
+        return url

apps/api/app/services/lipsync_service.py

@@ -1,14 +1,16 @@
-"""对口型 Service — #1796 MediaKit 对口型业务逻辑.
+"""对口型 Service — #1796 MediaKit 对口型业务逻辑, #1809 参数调整.
 
 职责：
-- 创建/查询/取消对口型任务
+- 创建/查询对口型任务
+- 双输入模式：TTS 直生（voice_id + script_text，内部先合成音频转存 OSS）或直接音频（audio_url）
 - 调用 MediaKit 客户端提交异步任务
-- 轮询更新任务状态
+- 轮询更新任务状态（中间状态同步 DB，成片转存自家 OSS）
 - 用户隔离（每个用户只能操作自己的任务）
 """
 
 from __future__ import annotations
 
+import io
 import logging
 import uuid
 from datetime import datetime, timezone
@@ -25,6 +27,9 @@ from app.services.mediakit_client import (
 from sqlalchemy.orm import Session
 
 from packages.adapters.sqlalchemy_impl.models import LipsyncJobModel
+from packages.application.cosyvoice_service import CosyVoiceError, normalize_emotion
+from packages.shared.storage import get_shared_storage_service
+from packages.shared.url_security import ALLOWED_AUDIO_MIME_TYPES, safe_download_bytes
 
 logger = logging.getLogger(__name__)
 
@@ -32,9 +37,102 @@ logger = logging.getLogger(__name__)
 class LipsyncService:
     """对口型任务 Service."""
 
-    def __init__(self, db: Session, client: Optional[MediaKitClient] = None):
+    def __init__(
+        self,
+        db: Session,
+        client: Optional[MediaKitClient] = None,
+        cosyvoice_service=None,
+        voice_clone_repo=None,
+    ):
         self.db = db
         self.client = client or get_mediakit_client()
+        self._cosyvoice = cosyvoice_service
+        self._voice_clone_repo = voice_clone_repo
+
+    def _get_cosyvoice(self):
+        """延迟获取 CosyVoiceService（与 tts 路由一致，含 OSS 预签名配置）."""
+        if self._cosyvoice is None:
+            from app.dependencies import get_cosyvoice_service
+
+            self._cosyvoice = get_cosyvoice_service()
+        return self._cosyvoice
+
+    def _resolve_voice_id(self, voice_id: str, user_id: str) -> str:
+        """将克隆音色 profile UUID 解析为 CosyVoice voice_id。
+
+        与 /tts/synthesize 保持一致：命中 profile → 校验归属 → 返回其 voice_id；
+        未命中（预置音色 ID 或克隆 CosyVoice voice_id）原样返回。
+        """
+        if not voice_id:
+            return ""
+        if self._voice_clone_repo is None:
+            try:
+                from app.dependencies import get_voice_clone_profile_repository
+
+                self._voice_clone_repo = get_voice_clone_profile_repository(self.db)
+            except Exception:
+                return voice_id
+        try:
+            profile = self._voice_clone_repo.get(voice_id)
+        except Exception:
+            return voice_id
+        if profile is None:
+            return voice_id
+        if getattr(profile, "user_id", "") != user_id:
+            raise MediaKitError("无权访问该音色", code="VoiceForbidden")
+        if not getattr(profile, "voice_id", ""):
+            raise MediaKitError("音色克隆尚未完成，请稍后再试", code="VoiceNotReady")
+        return profile.voice_id
+
+    def _synthesize_and_persist_audio(
+        self,
+        *,
+        user_id: str,
+        job_id: str,
+        voice_id: str,
+        script_text: str,
+        speed: float,
+        emotion: str,
+    ) -> str:
+        """TTS 直生：调 CosyVoice 合成音频并转存 OSS，返回可公网访问的音频 URL.
+
+        Raises:
+            MediaKitError: 合成失败
+        """
+        actual_voice_id = self._resolve_voice_id(voice_id, user_id)
+        cosyvoice = self._get_cosyvoice()
+        try:
+            result = cosyvoice.submit_synthesize_task(
+                text=script_text,
+                voice_id=actual_voice_id,
+                speed=speed,
+                emotion=normalize_emotion(emotion),
+            )
+        except CosyVoiceError as exc:
+            raise MediaKitError(f"TTS 合成失败: {exc}", code="TTSSynthesisFailed") from exc
+        except ValueError as exc:
+            raise MediaKitError(f"TTS 参数错误: {exc}", code="TTSInvalidParam") from exc
+
+        temp_url = result.get("audio_url", "")
+        if not temp_url:
+            raise MediaKitError("TTS 未返回音频 URL", code="TTSNoAudio")
+
+        # 转存到自家 OSS，避免临时 URL 过期导致 MediaKit 拉取失败
+        try:
+            audio_data = safe_download_bytes(
+                temp_url,
+                purpose="lipsync_tts_audio",
+                allowed_mime_types=ALLOWED_AUDIO_MIME_TYPES,
+                timeout=60.0,
+            )
+            storage = get_shared_storage_service()
+            storage_key = f"lipsync-tts/{user_id}/{job_id}.mp3"
+            permanent_url = storage.upload_file(io.BytesIO(audio_data), storage_key, content_type="audio/mpeg")
+            logger.info("对口型 TTS 音频已转存 OSS: job_id=%s key=%s", job_id, storage_key)
+            return permanent_url
+        except Exception as exc:
+            logger.warning("TTS 音频转存 OSS 失败，回退临时 URL: job_id=%s err=%s", job_id, exc)
+            return temp_url
 
     # ── 创建任务 ──────────────────────────────────────────────────────────
 
@@ -43,15 +141,41 @@ class LipsyncService:
         *,
         user_id: str,
         video_url: str,
-        audio_url: str,
+        audio_url: str = "",
+        voice_id: str = "",
+        script_text: str = "",
+        speed: float = 1.0,
+        emotion: str = "",
         enable_video_loop: bool = False,
         project_id: str = "",
     ) -> LipsyncJobModel:
         """创建对口型任务并提交到 MediaKit.
 
+        两种输入模式：
+        - TTS 直生：voice_id + script_text（audio_url 留空），后端先合成音频
+        - 直接音频：提供 audio_url
+
         Raises:
-            MediaKitError: API 调用失败
+            MediaKitError: TTS 合成或 MediaKit 提交失败
         """
+        # 0. TTS 直生模式：先合成音频（在创建 DB 记录之前完成，失败直接抛出）
+        if not audio_url:
+            if not (voice_id and script_text):
+                raise MediaKitError(
+                    "必须提供 audio_url 或 voice_id+script_text",
+                    code="InvalidInput",
+                )
+            # 预合成：用临时 job_id 命名 OSS 对象
+            pre_job_id = str(uuid.uuid4())
+            audio_url = self._synthesize_and_persist_audio(
+                user_id=user_id,
+                job_id=pre_job_id,
+                voice_id=voice_id,
+                script_text=script_text,
+                speed=speed,
+                emotion=emotion,
+            )
+
         # 1. 创建数据库记录
         job_id = str(uuid.uuid4())
         job = LipsyncJobModel(
@@ -61,12 +185,16 @@ class LipsyncService:
             video_url=video_url,
             audio_url=audio_url,
             enable_video_loop=enable_video_loop,
+            voice_id=voice_id or "",
+            script_text=script_text or "",
+            speed=speed,
+            emotion=normalize_emotion(emotion),
             status="pending",
         )
         self.db.add(job)
         self.db.flush()
 
-        # 2. 提交到 MediaKit
+        # 3. 提交到 MediaKit
         try:
             result = self.client.submit_lipsync(
                 video_url=video_url,
@@ -145,11 +273,14 @@ class LipsyncService:
             return job
 
         mk_status = status_data.get("status", STATUS_RUNNING)
+        logger.info("MediaKit 对口型状态 [%s]: %s", job_id, mk_status)
 
         if mk_status == STATUS_COMPLETED:
             result = status_data.get("result", {})
             job.status = STATUS_COMPLETED
-            job.output_video_url = result.get("video_url", "")
+            output_url = result.get("video_url", "")
+            # MediaKit 输出为临时 URL，转存自家 OSS 防止过期（失败则回退临时 URL）
+            job.output_video_url = self._persist_output_video(output_url, job_id, user_id)
             job.output_duration = result.get("duration", 0.0)
             job.completed_at = datetime.now(timezone.utc)
         elif mk_status == STATUS_FAILED:
@@ -158,12 +289,38 @@ class LipsyncService:
             job.error_message = error.get("message", "任务执行失败")
             job.error_code = error.get("code", "TaskFailed")
             job.completed_at = datetime.now(timezone.utc)
-        # running 状态只更新时间戳
+        else:
+            # 中间状态（running/processing/queued 等）同步到 DB，避免前端永远卡在 submitted
+            if isinstance(mk_status, str) and mk_status:
+                job.status = mk_status
         job.updated_at = datetime.now(timezone.utc)
         self.db.commit()
         self.db.refresh(job)
         return job
 
+    def _persist_output_video(self, temp_url: str, job_id: str, user_id: str) -> str:
+        """将 MediaKit 输出的临时视频 URL 转存到自家 OSS.
+
+        失败时回退返回原始临时 URL，不影响任务完成。
+        """
+        if not temp_url:
+            return ""
+        try:
+            import httpx
+
+            with httpx.Client(timeout=180.0, follow_redirects=True) as client:
+                resp = client.get(temp_url)
+                resp.raise_for_status()
+                data = resp.content
+            storage = get_shared_storage_service()
+            storage_key = f"lipsync-outputs/{user_id}/{job_id}.mp4"
+            permanent_url = storage.upload_file(io.BytesIO(data), storage_key, content_type="video/mp4")
+            logger.info("对口型输出视频已转存 OSS: job_id=%s key=%s", job_id, storage_key)
+            return permanent_url or temp_url
+        except Exception as exc:
+            logger.warning("对口型输出视频转存 OSS 失败，回退临时 URL: job_id=%s err=%s", job_id, exc)
+            return temp_url
+
     # ── 取消任务 ──────────────────────────────────────────────────────────
 
     def cancel_job(self, job_id: str, user_id: str) -> Optional[LipsyncJobModel]:

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

@@ -0,0 +1,2 @@
+export * from "./scripts"
+export * from "./types"

apps/web/src/api/scripts/scripts.ts

@@ -0,0 +1,37 @@
+/**
+ * 文案库 API
+ * 对接后端 /api/v1/scripts（CRUD + 列表解包）
+ */
+import apiClient from "../client"
+import type {
+  ScriptItem,
+  ScriptListResponse,
+  CreateScriptRequest,
+  UpdateScriptRequest,
+} from "./types"
+
+/** 获取文案列表 — 必须解包 items（后端返回 {items,total}）*/
+export const getScripts = async (): Promise<ScriptItem[]> => {
+  const response = await apiClient.get<ScriptListResponse | ScriptItem[]>("/scripts")
+  const data = response.data as unknown
+  if (Array.isArray(data)) return data
+  const items = (data as { items?: ScriptItem[] })?.items
+  return Array.isArray(items) ? items : []
+}
+
+/** 新建文案 */
+export const createScript = async (data: CreateScriptRequest): Promise<ScriptItem> => {
+  const response = await apiClient.post<ScriptItem>("/scripts", data)
+  return response.data
+}
+
+/** 更新文案 */
+export const updateScript = async (id: string, data: UpdateScriptRequest): Promise<ScriptItem> => {
+  const response = await apiClient.put<ScriptItem>(`/scripts/${id}`, data)
+  return response.data
+}
+
+/** 删除文案 */
+export const deleteScript = async (id: string): Promise<void> => {
+  await apiClient.delete(`/scripts/${id}`)
+}

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

@@ -0,0 +1,24 @@
+/**
+ * 文案库 API — 类型定义
+ * 对接后端 /api/v1/scripts
+ */
+export interface ScriptItem {
+  id: string
+  title: string
+  content: string
+  char_count: number
+  created_at: string
+  updated_at?: string
+}
+
+export interface ScriptListResponse {
+  items: ScriptItem[]
+  total: number
+}
+
+export interface CreateScriptRequest {
+  title: string
+  content: string
+}
+
+export type UpdateScriptRequest = Partial<CreateScriptRequest>

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

@@ -103,6 +103,7 @@ export interface TTSPreviewRequest {
   voice_id: string
   speed?: number
   pitch?: number
+  emotion?: string // 情绪参数：natural/excited/calm/friendly
 }
 
 /** TTS 试听响应 */

apps/web/src/components/layout/MainLayout.css

@@ -5,7 +5,7 @@
      .xx-app-shell          全屏 flex 容器
      ├── header (xx-top-nav) 顶部导航（Header.tsx 管理）
      └── .xx-app-body       水平 flex 行
-         ├── .xx-app-sidebar  左侧侧边栏（240px / 64px 折叠）
+         ├── .xx-app-sidebar  左侧侧边栏（128px / 64px 折叠）
          └── .xx-app-content  主内容区（自适应）
 
    所有尺寸/颜色均使用 global.css 设计系统变量
@@ -31,7 +31,7 @@
 
 /* ── 侧边栏 ───────────────────────────────────────────────── */
 .xx-app-sidebar {
-  width: 240px;
+  width: 128px;
   flex-shrink: 0;
   position: sticky;
   top: 0;
@@ -103,6 +103,12 @@
   padding: var(--space-sm);
 }
 
+/* 展开态（侧边栏 128px）水平 padding 收窄，为菜单文字留出完整一行空间 */
+.xx-app-sidebar:not(.xx-collapsed) .xx-sidebar-content {
+  padding-left: var(--space-xs);
+  padding-right: var(--space-xs);
+}
+
 /* ── 主内容区 ─────────────────────────────────────────────── */
 .xx-app-content {
   flex: 1;
@@ -136,7 +142,7 @@
 
   /* 展开态恢复完整宽度 */
   .xx-app-sidebar:not(.xx-collapsed) {
-    width: 240px;
+    width: 128px;
   }
 
   .xx-app-sidebar:not(.xx-collapsed) .xx-sidebar-toggle {
@@ -159,7 +165,7 @@
     top: 56px; /* 移动端 Header 高度 */
     left: 0;
     bottom: 0;
-    width: 240px;
+    width: 128px;
     transform: translateX(-100%);
     transition: transform var(--transition-slow);
     box-shadow: none;

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

@@ -2,7 +2,7 @@
  * MainLayout - 主布局组件（Task 1.2）
  *
  * 三栏布局：左侧侧边栏 + 顶部导航栏 + 主内容区
- * - 侧边栏：240px 固定宽度，可折叠至 64px 图标栏
+ * - 侧边栏：128px 固定宽度，可折叠至 64px 图标栏
  * - 顶部导航：复用 Header 组件（68px 固定高度）
  * - 主内容区：自适应填充剩余空间
  * - 响应式：移动端（<768px）隐藏侧边栏

apps/web/src/components/layout/Sidebar.css

@@ -30,7 +30,7 @@
 
 /* 分组标题 */
 .xx-sidebar-group-title {
-  padding: var(--space-sm) var(--space-md) var(--space-xs);
+  padding: var(--space-sm) var(--space-sm) var(--space-xs);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   color: var(--text-tertiary);
@@ -56,9 +56,9 @@
 .xx-sidebar-menu-item {
   display: flex;
   align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-md);
-  margin: 0 var(--space-xs);
+  gap: var(--space-xs);
+  padding: var(--space-sm) var(--space-xs);
+  margin: 0 var(--space-xxs);
   border-radius: var(--radius-sm);
   cursor: pointer;
   color: var(--text-secondary);
@@ -97,12 +97,12 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
   background: #f1f5f9;
   color: var(--text-secondary);
-  font-size: 18px;
+  font-size: 16px;
   line-height: 1;
   transition: 0.15s ease;
 }
@@ -119,7 +119,9 @@
 /* ── 菜单项文字 ───────────────────────────────────────────── */
 .xx-sidebar-menu-label {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
 }
 
@@ -133,8 +135,16 @@
 /* 折叠时菜单项居中，仅图标 */
 .xx-sidebar-nav--collapsed .xx-sidebar-menu-item {
   justify-content: center;
-  padding: var(--space-sm);
-  margin: 0 var(--space-xxs);
+  padding: var(--space-xs);
+  margin: 0;
+}
+
+/* 折叠态图标恢复更大尺寸居中 */
+.xx-sidebar-nav--collapsed .xx-sidebar-menu-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  font-size: 16px;
 }
 
 /* 折叠时隐藏分组标题 */

apps/web/src/config/navigation.ts

@@ -58,6 +58,12 @@ export const NAV_ITEMS: NavItem[] = [
     path: "/app/titles",
     icon: React.createElement(FileTextOutlined),
   },
+  {
+    key: "scripts",
+    label: "文案库",
+    path: "/app/scripts",
+    icon: React.createElement(EditOutlined),
+  },
   {
     key: "voices",
     label: "配音库",
@@ -173,6 +179,12 @@ export const NAV_GROUPS: NavGroup[] = [
         path: "/app/titles",
         icon: React.createElement(FileTextOutlined),
       },
+      {
+        key: "scripts",
+        label: "文案库",
+        path: "/app/scripts",
+        icon: React.createElement(EditOutlined),
+      },
       {
         key: "products",
         label: "成品库",

apps/web/src/pages/admin/Admin.css

@@ -11,7 +11,7 @@
 
 .admin-coming-soon-page {
   padding: 32px;
-  max-width: 1400px;
+  max-width: 1680px;
   margin: 0 auto;
 }
 

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

@@ -1,100 +1,520 @@
 /**
- * AI数字人 — 主页面（5列水平面板布局）(#1798)
+ * AI数字人 — 主页面（v3）
+ * 5列水平面板布局
  */
-import React from "react"
-import { useAiAvatarState } from "./hooks/useAiAvatarState"
-import AvatarVideoPanel from "./components/AvatarVideoPanel"
-import VoiceClonePanel from "./components/VoiceClonePanel"
-import ScriptLipsyncPanel from "./components/ScriptLipsyncPanel"
-import TitleConfigPanel from "./components/TitleConfigPanel"
-import CoverGeneratePanel from "./components/CoverGeneratePanel"
-import ScriptSelectModal from "./components/ScriptSelectModal"
-import BRollInsertModal from "./components/BRollInsertModal"
+import React, { useState, useCallback, useEffect, useRef } from "react"
+import { message } from "antd"
 import "./AiAvatar.css"
+import { useAiAvatar } from "./hooks/useAiAvatar"
+import { PanelVideoSelector } from "./components/PanelVideoSelector"
+import PanelVoiceSelector from "./components/PanelVoiceSelector"
+import PanelScriptAndLipsync from "./components/PanelScriptAndLipsync"
+import PanelTitleConfig from "./components/PanelTitleConfig"
+import PanelCoverAndGenerate from "./components/PanelCoverAndGenerate"
+import { ModalAssetPicker } from "./components/ModalAssetPicker"
+import ModalBRollEditor from "./components/ModalBRollEditor"
+import {
+  getScripts,
+  getAssetById,
+  createLipsyncJob,
+  getLipsyncJob,
+  submitRender,
+  generateSmartCover,
+} from "./api/aiAvatar"
+import {
+  normalizeEmotion,
+  buildTitleConfigPayload,
+  buildCoverConfigPayload,
+} from "./utils/contract"
+
+/** 面板折叠状态 */
+type PanelKey = "video" | "voice" | "script" | "title" | "cover"
 
 const AiAvatarPage: React.FC = () => {
-  const state = useAiAvatarState()
+  const state = useAiAvatar()
+  const [collapsed, setCollapsed] = useState<Record<PanelKey, boolean>>({
+    video: false,
+    voice: false,
+    script: false,
+    title: false,
+    cover: false,
+  })
 
-  const handleSubmitGenerate = React.useCallback(() => {
-    // TODO: 调用 submitRender API
+  /* ── 对口型生成弹窗 ── */
+  const [showLipsyncModal, setShowLipsyncModal] = useState(false)
+  const [lipsyncStatus, setLipsyncStatus] = useState<"generating" | "completed" | "failed">(
+    "generating",
+  )
+  const [lipsyncErrorMessage, setLipsyncErrorMessage] = useState("")
+  /* ── 智能封面加载态 ── */
+  const [smartCoverLoading, setSmartCoverLoading] = useState(false)
+
+  /* ── 对口型轮询 ── */
+  const lipsyncTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const togglePanel = useCallback((key: PanelKey) => {
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }))
+  }, [])
+
+  /* ── 对口型 ── */
+  const handleGenerateLipsync = useCallback(async () => {
+    // ② 缺项明确提示（#1809）：不再静默 return
+    const video = state.selectedVideo
+    const voice = state.selectedVoice
+    const text = state.scriptText.trim()
+    const missing: string[] = []
+    if (!video) missing.push("出镜视频")
+    if (!voice) missing.push("音色")
+    if (!text) missing.push("文案")
+    if (missing.length > 0 || !video || !voice) {
+      message.warning(`请先选择${missing.join("、")}`)
+      return
+    }
+    try {
+      // 显示生成弹窗
+      setShowLipsyncModal(true)
+      setLipsyncStatus("generating")
+      setLipsyncErrorMessage("")
+
+      // ① 先按素材 id 拿 file_url（#1809 补充：对齐后端新参数 video_url）
+      console.log("[对口型] 开始生成:", {
+        videoId: video.id,
+        voiceId: voice.voice_id,
+        voiceType: voice.type,
+        textLen: state.scriptText.length,
+      })
+      const asset = await getAssetById(video.id)
+      console.log("[对口型] getAssetById 响应:", {
+        id: asset?.id,
+        file_url: asset?.file_url?.substring(0, 100),
+      })
+      const videoUrl = asset?.file_url
+      if (!videoUrl) {
+        console.error("[对口型] file_url 为空，asset:", asset)
+        setShowLipsyncModal(false)
+        message.error("获取出镜视频播放地址失败，请重新选择素材")
+        return
+      }
+      // ② 模式A TTS直生：video_url + voice_id + script_text，语速/情绪英文枚举透传（#1822）
+      const payload = {
+        voice_id: voice.voice_id,
+        script_text: state.scriptText,
+        video_url: videoUrl,
+        speed: state.speed, // 语速 0.5~2.0
+        emotion: normalizeEmotion(state.emotion), // natural/excited/calm/friendly
+      }
+      console.log("[对口型] createLipsyncJob 请求:", payload)
+      const job = await createLipsyncJob(payload)
+      console.log("[对口型] createLipsyncJob 响应:", { id: job.id, status: job.status })
+      state.setLipsyncJob(job)
+      // 开始轮询
+      if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
+      lipsyncTimerRef.current = setInterval(async () => {
+        try {
+          const updated = await getLipsyncJob(job.id)
+          state.setLipsyncJob(updated)
+          console.log("[对口型] 轮询状态:", {
+            id: updated.id,
+            status: updated.status,
+            error: updated.error_message,
+          })
+          if (updated.status === "completed") {
+            if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
+            setLipsyncStatus("completed")
+            setTimeout(() => {
+              setShowLipsyncModal(false)
+              message.success("对口型视频生成完成")
+            }, 1000)
+          } else if (updated.status === "failed") {
+            if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
+            setLipsyncStatus("failed")
+            setLipsyncErrorMessage(updated.error_message || "对口型生成失败")
+          }
+        } catch (err) {
+          console.error("[对口型] 轮询错误:", err)
+        }
+      }, 3000)
+    } catch (err) {
+      console.error("[对口型] 创建失败:", {
+        status: (err as { response?: { status?: number } })?.response?.status,
+        data: (err as { response?: { data?: unknown } })?.response?.data,
+        message: err instanceof Error ? err.message : String(err),
+      })
+      setShowLipsyncModal(false)
+      message.error(err instanceof Error ? err.message : "对口型任务提交失败，请重试")
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.selectedVideo, state.selectedVoice, state.scriptText, state.speed, state.emotion])
+
+  // 取消对口型生成
+  const handleCancelLipsync = useCallback(() => {
+    if (lipsyncTimerRef.current) {
+      clearInterval(lipsyncTimerRef.current)
+      lipsyncTimerRef.current = null
+    }
+    setShowLipsyncModal(false)
+    setLipsyncStatus("generating")
+    setLipsyncErrorMessage("")
+  }, [])
+
+  // 清理轮询
+  useEffect(() => {
+    return () => {
+      if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
+    }
+  }, [])
+
+  /* ── 生成视频 ── */
+  const handleGenerate = useCallback(async () => {
+    // ② 前置条件提示（#1809）
+    if (!state.lipsyncJob || state.lipsyncJob.status !== "completed") {
+      message.warning("请先生成对口型视频，待对口型完成后再提交渲染")
+      return
+    }
     state.setIsGenerating(true)
-  }, [state])
+    try {
+      await submitRender({
+        lipsync_job_id: state.lipsyncJob.id,
+        script_id: state.script?.id,
+        b_roll_segments: state.bRollSegments as never,
+        // 字段映射：build_title_drawtext_filter 真实口径 text/font_size/font_color/position/...
+        title_config: buildTitleConfigPayload(state.titleConfig),
+        // cover_config：智能封面 cover_url + 截帧 timestamp
+        cover_config: buildCoverConfigPayload(state.coverConfig, state.coverConfig.smart_cover_url),
+        resolution: state.resolution,
+      })
+      message.success("渲染任务已提交，可在视频管理中查看进度")
+    } catch (err) {
+      console.error("渲染任务提交失败:", err)
+      message.error(err instanceof Error ? err.message : "渲染任务提交失败，请重试")
+    } finally {
+      state.setIsGenerating(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    state.lipsyncJob,
+    state.script,
+    state.bRollSegments,
+    state.titleConfig,
+    state.coverConfig,
+    state.resolution,
+  ])
+
+  /* ── 智能封面：调后端 MediaKit 选帧接口（#1822） ── */
+  const handleSmartCover = useCallback(async () => {
+    // 基于对口型成片抽帧，必须先完成对口型
+    const videoUrl = state.lipsyncJob?.output_video_url
+    if (state.lipsyncJob?.status !== "completed" || !videoUrl) {
+      message.warning("请先生成对口型视频，完成后再智能获取封面")
+      return
+    }
+    setSmartCoverLoading(true)
+    try {
+      const res = await generateSmartCover(videoUrl, 5)
+      if (res.cover_url) {
+        state.setCoverConfig((prev) => ({
+          ...prev,
+          mode: "auto_frame",
+          smart_cover_url: res.cover_url,
+          thumbnail_url: res.cover_url,
+        }))
+        message.success("智能封面已生成")
+      } else {
+        message.error(res.message || "智能封面生成失败，请稍后重试")
+      }
+    } catch (err) {
+      console.error("智能封面生成失败:", err)
+      message.error(err instanceof Error ? err.message : "智能封面生成失败，请重试")
+    } finally {
+      setSmartCoverLoading(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.lipsyncJob])
+
+  /* ── 配置汇总 ── */
+  const summary = {
+    videoName: state.selectedVideo?.name || null,
+    voiceName: state.selectedVoice?.name || null,
+    scriptLength: state.scriptText.length,
+    lipsyncStatus: state.lipsyncJob?.status || null,
+    brollCount: state.bRollSegments.length,
+    hasTitle: state.titleConfig.title.length > 0,
+    hasCover: state.coverConfig.enabled,
+  }
 
   return (
-    <div className="ai-avatar-page">
-      {/* 面板1：出镜视频 */}
-      <AvatarVideoPanel
-        video={state.avatarVideo}
-        onVideoChange={state.setAvatarVideo}
-        collapsed={!!state.collapsedPanels["avatar-video"]}
-        onToggleCollapse={() => state.togglePanel("avatar-video")}
-      />
+    <div className="aa-page">
+      <div className="aa-page-header">
+        <h1>AI数字人</h1>
+      </div>
+      <div className="aa-page-body">
+        {/* 面板1：出镜视频 */}
+        <div className={`aa-panel aa-panel--p1${collapsed.video ? " collapsed" : ""}`}>
+          <div className="aa-panel__header" onClick={() => togglePanel("video")}>
+            <span className="aa-panel__title">出镜视频</span>
+            <span className="aa-panel__toggle">▼</span>
+          </div>
+          <div className="aa-panel__body">
+            <PanelVideoSelector
+              selectedVideo={state.selectedVideo}
+              onSelectVideo={() => state.setShowAssetPicker(true)}
+              onRemoveVideo={state.removeVideo}
+              titleConfig={state.titleConfig}
+            />
+          </div>
+        </div>
 
-      {/* 面板2：声音克隆 */}
-      <VoiceClonePanel
-        voiceClone={state.voiceClone}
-        setVoiceClone={state.setVoiceClone}
-        selectedVoiceId={state.selectedVoiceId}
-        setSelectedVoiceId={state.setSelectedVoiceId}
-        collapsed={!!state.collapsedPanels["voice-clone"]}
-        onToggleCollapse={() => state.togglePanel("voice-clone")}
-      />
+        {/* 面板2：配音库 */}
+        <div className={`aa-panel aa-panel--p2${collapsed.voice ? " collapsed" : ""}`}>
+          <div className="aa-panel__header" onClick={() => togglePanel("voice")}>
+            <span className="aa-panel__title">配音库</span>
+            <span className="aa-panel__toggle">▼</span>
+          </div>
+          <div className="aa-panel__body">
+            <PanelVoiceSelector
+              voiceSource={state.voiceSource}
+              onVoiceSourceChange={state.setVoiceSource}
+              selectedVoice={state.selectedVoice}
+              onSelectVoice={state.setSelectedVoice}
+              emotion={state.emotion}
+              onEmotionChange={state.setEmotion}
+              speed={state.speed}
+              onSpeedChange={state.setSpeed}
+              language={state.language}
+              onLanguageChange={state.setLanguage}
+            />
+          </div>
+        </div>
 
-      {/* 面板3：文案 & 对口型 */}
-      <ScriptLipsyncPanel
-        selectedScript={state.selectedScript}
-        setSelectedScript={state.setSelectedScript}
-        scriptContent={state.scriptContent}
-        setScriptContent={state.setScriptContent}
-        lipsyncJob={state.lipsyncJob}
-        setLipsyncJob={state.setLipsyncJob}
-        onOpenScriptModal={() => state.setScriptModalOpen(true)}
-        onOpenBRollModal={() => state.setBrollModalOpen(true)}
-        collapsed={!!state.collapsedPanels["script-lipsync"]}
-        onToggleCollapse={() => state.togglePanel("script-lipsync")}
-      />
+        {/* 面板3：文案 & 对口型 */}
+        <div className={`aa-panel aa-panel--p3${collapsed.script ? " collapsed" : ""}`}>
+          <div className="aa-panel__header" onClick={() => togglePanel("script")}>
+            <span className="aa-panel__title">文案 & 对口型</span>
+            <span className="aa-panel__toggle">▼</span>
+          </div>
+          <div className="aa-panel__body">
+            <PanelScriptAndLipsync
+              scriptText={state.scriptText}
+              onScriptTextChange={state.setScriptText}
+              onOpenScriptModal={() => state.setShowScriptModal(true)}
+              lipsyncJob={state.lipsyncJob}
+              onGenerateLipsync={handleGenerateLipsync}
+              bRollSegments={state.bRollSegments}
+              onOpenBRollModal={() => state.setShowBRollModal(true)}
+              onRemoveBRoll={state.removeBRollSegment}
+            />
+          </div>
+        </div>
 
-      {/* 面板4：标题配置 */}
-      <TitleConfigPanel
-        titleConfig={state.titleConfig}
-        setTitleConfig={state.setTitleConfig}
-        collapsed={!!state.collapsedPanels["title-config"]}
-        onToggleCollapse={() => state.togglePanel("title-config")}
-      />
+        {/* 面板4：标题配置 */}
+        <div className={`aa-panel aa-panel--p4${collapsed.title ? " collapsed" : ""}`}>
+          <div className="aa-panel__header" onClick={() => togglePanel("title")}>
+            <span className="aa-panel__title">标题配置</span>
+            <span className="aa-panel__toggle">▼</span>
+          </div>
+          <div className="aa-panel__body">
+            <PanelTitleConfig titleConfig={state.titleConfig} onUpdate={state.updateTitleConfig} />
+          </div>
+        </div>
 
-      {/* 面板5：封面 & 生成 */}
-      <CoverGeneratePanel
-        coverConfig={state.coverConfig}
-        setCoverConfig={state.setCoverConfig}
-        generateConfig={state.generateConfig}
-        setGenerateConfig={state.setGenerateConfig}
-        isGenerating={state.isGenerating}
-        onSubmitGenerate={handleSubmitGenerate}
-        collapsed={!!state.collapsedPanels["cover-generate"]}
-        onToggleCollapse={() => state.togglePanel("cover-generate")}
-      />
+        {/* 面板5：封面 & 生成 */}
+        <div className={`aa-panel aa-panel--p5${collapsed.cover ? " collapsed" : ""}`}>
+          <div className="aa-panel__header" onClick={() => togglePanel("cover")}>
+            <span className="aa-panel__title">封面 & 生成</span>
+            <span className="aa-panel__toggle">▼</span>
+          </div>
+          <div className="aa-panel__body">
+            <PanelCoverAndGenerate
+              coverConfig={state.coverConfig}
+              onCoverConfigChange={(partial) =>
+                state.setCoverConfig((prev) => ({ ...prev, ...partial }))
+              }
+              onSmartCover={handleSmartCover}
+              smartCoverLoading={smartCoverLoading}
+              canSmartCover={state.lipsyncJob?.status === "completed"}
+              resolution={state.resolution}
+              onResolutionChange={state.setResolution}
+              isGenerating={state.isGenerating}
+              onGenerate={handleGenerate}
+              summary={summary}
+            />
+          </div>
+        </div>
+      </div>
 
-      {/* 弹窗：文案选择 */}
-      <ScriptSelectModal
-        open={state.scriptModalOpen}
-        onClose={() => state.setScriptModalOpen(false)}
-        onSelect={(script) => {
-          state.setSelectedScript(script)
-          state.setScriptContent(script.content)
-          state.setScriptModalOpen(false)
-        }}
-      />
+      {/* 素材库弹窗 */}
+      {state.showAssetPicker && (
+        <ModalAssetPicker
+          open={state.showAssetPicker}
+          onClose={() => state.setShowAssetPicker(false)}
+          onSelect={state.selectVideo}
+          selectedId={state.selectedVideo?.id}
+        />
+      )}
 
-      {/* 弹窗：B-roll 插入 */}
-      <BRollInsertModal
-        open={state.brollModalOpen}
-        onClose={() => state.setBrollModalOpen(false)}
-        onConfirm={(segment) => {
-          state.setBRollSegments((prev) => [...prev, segment])
-          state.setBrollModalOpen(false)
-        }}
-        videoDuration={state.lipsyncJob?.output_duration ?? 0}
-      />
+      {/* 文案选择弹窗 */}
+      {state.showScriptModal && (
+        <ScriptSelectModalLazy
+          open={state.showScriptModal}
+          onClose={() => state.setShowScriptModal(false)}
+          onSelect={state.selectScript}
+        />
+      )}
+
+      {/* B-roll 编辑器弹窗 */}
+      {state.showBRollModal && (
+        <ModalBRollEditor
+          open={state.showBRollModal}
+          onClose={() => state.setShowBRollModal(false)}
+          existingSegments={state.bRollSegments}
+          scriptText={state.scriptText}
+          outputDuration={state.lipsyncJob?.output_duration ?? 0}
+          onConfirm={state.addBRollSegment}
+          onRemove={state.removeBRollSegment}
+        />
+      )}
+
+      {/* 对口型生成弹窗 */}
+      {showLipsyncModal && (
+        <div className="aa-modal-overlay">
+          <div className="aa-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="aa-modal__header">
+              <span className="aa-modal__title">对口型生成</span>
+              <button className="aa-modal__close" onClick={handleCancelLipsync}>
+                ✕
+              </button>
+            </div>
+            <div
+              className="aa-modal__body"
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                padding: "40px 20px",
+              }}
+            >
+              {lipsyncStatus === "generating" && (
+                <>
+                  <div className="aa-lipsync-spinner" />
+                  <div style={{ marginTop: 20, fontSize: 15, color: "#1a1a2e" }}>
+                    对口型视频生成中…
+                  </div>
+                  <div style={{ marginTop: 8, fontSize: 13, color: "#8c8ca1" }}>
+                    请勿关闭页面，完成后将自动提示
+                  </div>
+                </>
+              )}
+              {lipsyncStatus === "completed" && (
+                <>
+                  <div style={{ fontSize: 48 }}>✅</div>
+                  <div style={{ marginTop: 16, fontSize: 15, color: "#1a1a2e" }}>
+                    对口型视频生成完成
+                  </div>
+                </>
+              )}
+              {lipsyncStatus === "failed" && (
+                <>
+                  <div style={{ fontSize: 48 }}>❌</div>
+                  <div style={{ marginTop: 16, fontSize: 15, color: "#1a1a2e" }}>
+                    对口型生成失败
+                  </div>
+                  {lipsyncErrorMessage && (
+                    <div style={{ marginTop: 8, fontSize: 13, color: "#ff4d4f" }}>
+                      {lipsyncErrorMessage}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+            <div className="aa-modal__footer">
+              {lipsyncStatus === "generating" && (
+                <button className="aa-btn aa-btn--danger" onClick={handleCancelLipsync}>
+                  取消生成
+                </button>
+              )}
+              {lipsyncStatus !== "generating" && (
+                <button className="aa-btn" onClick={handleCancelLipsync}>
+                  关闭
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** 文案选择弹窗（内联实现，轻量版） */
+const ScriptSelectModalLazy: React.FC<{
+  open: boolean
+  onClose: () => void
+  onSelect: (script: import("./types").Script) => void
+}> = ({ open, onClose, onSelect }) => {
+  const [scripts, setScripts] = useState<import("./types").Script[]>([])
+  const [search, setSearch] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (!open) return
+    setLoading(true)
+    getScripts()
+      .then((items) => setScripts(Array.isArray(items) ? items : []))
+      .catch(() => setScripts([]))
+      .finally(() => setLoading(false))
+  }, [open])
+
+  const filtered = scripts.filter(
+    (s) => !search || s.title.includes(search) || s.content.includes(search),
+  )
+
+  return (
+    <div className="aa-modal-overlay" onClick={onClose}>
+      <div className="aa-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="aa-modal__header">
+          <span className="aa-modal__title">选择文案</span>
+          <button className="aa-modal__close" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+        <div className="aa-modal__body">
+          <div className="aa-script-list-header">
+            <input
+              className="aa-input"
+              placeholder="搜索文案..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+          {loading ? (
+            <div className="aa-empty">加载中...</div>
+          ) : filtered.length === 0 ? (
+            <div className="aa-empty">
+              <div className="aa-empty__icon">📝</div>
+              暂无文案，请手动输入或新建
+            </div>
+          ) : (
+            <div className="aa-script-list">
+              {filtered.map((s) => (
+                <div key={s.id} className="aa-script-item" onClick={() => onSelect(s)}>
+                  <span className="aa-script-item__icon">📄</span>
+                  <div className="aa-script-item__info">
+                    <div className="aa-script-item__title">{s.title}</div>
+                    <div className="aa-script-item__meta">
+                      {s.char_count}字 · {new Date(s.created_at).toLocaleDateString()}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="aa-modal__footer">
+          <button className="aa-btn" onClick={onClose}>
+            取消
+          </button>
+        </div>
+      </div>
     </div>
   )
 }

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

@@ -1,75 +1,94 @@
 /**
- * AI数字人 API 调用封装 (#1798)
+ * AI数字人 — API 封装（#1822 契约对齐）
  */
 import apiClient from "@/api/client"
-import type {
-  Script,
-  LipsyncJob,
-  AiAvatarRenderRequest,
-  AiAvatarRenderJob,
-} from "../types/aiAvatar"
+import type { Script, LipsyncJob, RenderJob, BRollSegment } from "../types"
 
 /* ── 文案库 ── */
-export async function getScripts(params?: { search?: string; offset?: number; limit?: number }) {
-  const { data } = await apiClient.get<{ items: Script[]; total: number }>("/scripts", { params })
-  return data
+export const getScripts = async (): Promise<Script[]> => {
+  const response = await apiClient.get<{ items?: Script[] } | Script[]>("/scripts")
+  // 后端列表返回 { items, total } 分页对象，做兼容解包 + 数组防御（#1809 白屏修复）
+  const data = response.data as unknown
+  if (Array.isArray(data)) return data
+  const items = (data as { items?: Script[] })?.items
+  return Array.isArray(items) ? items : []
 }
 
-export async function getScript(id: string) {
-  const { data } = await apiClient.get<Script>(`/scripts/${id}`)
-  return data
+export const getScriptById = async (id: string): Promise<Script> => {
+  const response = await apiClient.get<Script>(`/scripts/${id}`)
+  return response.data
 }
 
-export async function createScript(payload: { title: string; content: string; tags?: string[] }) {
-  const { data } = await apiClient.post<Script>("/scripts", payload)
-  return data
+export const createScript = async (data: { title: string; content: string }): Promise<Script> => {
+  const response = await apiClient.post<Script>("/scripts", data)
+  return response.data
 }
 
-export async function deleteScript(id: string) {
+export const deleteScript = async (id: string): Promise<void> => {
   await apiClient.delete(`/scripts/${id}`)
 }
 
-/* ── 对口型 ── */
-export async function createLipsyncJob(payload: {
+/* ── 素材单查（拿到 file_url 作为对口型的 video_url） ── */
+export const getAssetById = async (id: string): Promise<{ file_url?: string; id: string }> => {
+  const response = await apiClient.get<{ file_url?: string; id: string }>(`/assets/${id}`)
+  return response.data
+}
+
+/* ── 对口型（模式A：TTS 直生，后端内部合成音频；不要先调 TTS 拿 audio_url） ── */
+export const createLipsyncJob = async (data: {
+  /** 人物视频 URL（MP4）；由素材 id 经 getAssetById 拿 file_url，禁止传 video_asset_id */
   video_url: string
-  audio_url: string
+  /** 音色 ID（预置音色 或 克隆音色 profile UUID，后端会解析） */
+  voice_id: string
+  /** 要合成的文案（手动输入或文案库内容） */
+  script_text: string
+  /** 语速 0.5~2.0，默认 1.0 */
+  speed?: number
+  /** 情绪英文枚举：natural/excited/calm/friendly */
+  emotion?: string
   enable_video_loop?: boolean
   project_id?: string
-}) {
-  const { data } = await apiClient.post<LipsyncJob>("/lipsync/jobs", payload)
-  return data
+}): Promise<LipsyncJob> => {
+  const response = await apiClient.post<LipsyncJob>("/lipsync/jobs", data)
+  return response.data
 }
 
-export async function getLipsyncJob(id: string) {
-  const { data } = await apiClient.get<LipsyncJob>(`/lipsync/jobs/${id}`)
-  return data
+export const getLipsyncJob = async (id: string): Promise<LipsyncJob> => {
+  const response = await apiClient.get<LipsyncJob>(`/lipsync/jobs/${id}`)
+  return response.data
 }
 
-/* ── 渲染合成 ── */
-export async function submitRender(payload: AiAvatarRenderRequest) {
-  const { data } = await apiClient.post<AiAvatarRenderJob>("/ai-avatar/render", payload)
-  return data
+/* ── 智能封面（MediaKit 抽帧 + 质量评分选最佳帧，独立于渲染任务） ── */
+export const generateSmartCover = async (
+  video_url: string,
+  max_frames = 5,
+): Promise<{ cover_url: string; status: string; message: string }> => {
+  const response = await apiClient.post<{ cover_url: string; status: string; message: string }>(
+    "/ai-avatar/render/smart-cover",
+    { video_url, max_frames },
+  )
+  return response.data
 }
 
-export async function getRenderJobs(params?: { project_id?: string; status?: string }) {
-  const { data } = await apiClient.get<AiAvatarRenderJob[]>("/ai-avatar/render/jobs", { params })
-  return data
+/* ── 渲染 ── */
+export const submitRender = async (data: {
+  lipsync_job_id: string
+  script_id?: string
+  b_roll_segments?: BRollSegment[]
+  title_config?: Record<string, unknown>
+  cover_config?: Record<string, unknown>
+  project_id?: string
+  resolution?: string
+}): Promise<RenderJob> => {
+  const response = await apiClient.post<RenderJob>("/ai-avatar/render", data)
+  return response.data
 }
 
-export async function getRenderJob(jobId: string) {
-  const { data } = await apiClient.get<AiAvatarRenderJob>(`/ai-avatar/render/${jobId}`)
-  return data
+export const getRenderJob = async (jobId: string): Promise<RenderJob> => {
+  const response = await apiClient.get<RenderJob>(`/ai-avatar/render/${jobId}`)
+  return response.data
 }
 
-export async function cancelRenderJob(jobId: string) {
-  const { data } = await apiClient.post<AiAvatarRenderJob>(`/ai-avatar/render/${jobId}/cancel`)
-  return data
+export const cancelRenderJob = async (jobId: string): Promise<void> => {
+  await apiClient.post(`/ai-avatar/render/${jobId}/cancel`)
 }
-
-export async function retryRenderJob(jobId: string) {
-  const { data } = await apiClient.post<AiAvatarRenderJob>(`/ai-avatar/render/${jobId}/retry`)
-  return data
-}
-
-/* ── 素材上传（复用已有 API） ── */
-export { prepareDirectUpload, completeDirectUpload } from "@/api/assets"

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

@@ -1,226 +0,0 @@
-import { useState, useRef, useCallback } from "react"
-import { uploadAssetDirect, ensureDefaultLibrary } from "@/api/assets"
-import { getOrCreateDefaultProject } from "@/api/projects"
-import type { AvatarVideo } from "../types/aiAvatar"
-
-interface AvatarVideoPanelProps {
-  video: AvatarVideo | null
-  onVideoChange: (v: AvatarVideo | null) => void
-  collapsed: boolean
-  onToggleCollapse: () => void
-}
-
-const MAX_VIDEO_SIZE = 500 * 1024 * 1024 // 500MB
-
-/** 格式化秒数为 mm:ss */
-function formatDuration(seconds: number): string {
-  const m = Math.floor(seconds / 60)
-  const s = Math.floor(seconds % 60)
-  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`
-}
-
-/** 获取视频元信息 */
-function getVideoMetadata(
-  file: File,
-): Promise<{ duration: number; width: number; height: number }> {
-  return new Promise((resolve, reject) => {
-    const url = URL.createObjectURL(file)
-    const video = document.createElement("video")
-    video.preload = "metadata"
-    video.onloadedmetadata = () => {
-      resolve({
-        duration: video.duration,
-        width: video.videoWidth,
-        height: video.videoHeight,
-      })
-      URL.revokeObjectURL(url)
-    }
-    video.onerror = () => {
-      URL.revokeObjectURL(url)
-      reject(new Error("无法读取视频信息"))
-    }
-    video.src = url
-  })
-}
-
-const AvatarVideoPanel: React.FC<AvatarVideoPanelProps> = ({
-  video,
-  onVideoChange,
-  collapsed,
-  onToggleCollapse,
-}) => {
-  const [uploading, setUploading] = useState(false)
-  const [uploadProgress, setUploadProgress] = useState(0)
-  const [dragOver, setDragOver] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  const handleUpload = useCallback(
-    async (file: File) => {
-      if (file.size > MAX_VIDEO_SIZE) {
-        alert("视频文件大小不能超过 500MB")
-        return
-      }
-      if (!file.type.startsWith("video/")) {
-        alert("请上传 MP4 格式的视频文件")
-        return
-      }
-
-      try {
-        // 获取视频元信息
-        const metadata = await getVideoMetadata(file)
-
-        setUploading(true)
-        setUploadProgress(0)
-
-        // 获取或创建默认项目
-        const project = await getOrCreateDefaultProject()
-
-        // 获取或创建默认视频库
-        const library = await ensureDefaultLibrary({
-          project_id: project.id,
-          kind: "video",
-        })
-
-        // 上传文件到 OSS
-        await uploadAssetDirect({
-          file,
-          library_id: library.id,
-          onProgress: (p) => setUploadProgress(p),
-        })
-
-        // 构建视频对象（使用本地预览 URL）
-        const previewUrl = URL.createObjectURL(file)
-        onVideoChange({
-          url: previewUrl,
-          name: file.name,
-          duration: metadata.duration,
-          width: metadata.width,
-          height: metadata.height,
-          size: file.size,
-        })
-      } catch (err) {
-        const message = err instanceof Error ? err.message : "上传失败，请重试"
-        alert(message)
-      } finally {
-        setUploading(false)
-        setUploadProgress(0)
-      }
-    },
-    [onVideoChange],
-  )
-
-  const handleFileSelect = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const file = e.target.files?.[0]
-      if (file) {
-        handleUpload(file)
-      }
-      // 清空 input 以支持重复选择同一文件
-      e.target.value = ""
-    },
-    [handleUpload],
-  )
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent<HTMLDivElement>) => {
-      e.preventDefault()
-      setDragOver(false)
-      const file = e.dataTransfer.files[0]
-      if (file) {
-        handleUpload(file)
-      }
-    },
-    [handleUpload],
-  )
-
-  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    setDragOver(true)
-  }, [])
-
-  const handleDragLeave = useCallback(() => {
-    setDragOver(false)
-  }, [])
-
-  const handleRemove = useCallback(() => {
-    onVideoChange(null)
-  }, [onVideoChange])
-
-  return (
-    <div className={`ai-avatar-panel panel-avatar-video ${collapsed ? "collapsed" : ""}`}>
-      <div className="ai-avatar-panel-header" onClick={onToggleCollapse}>
-        <h3>出镜视频</h3>
-        <button className="collapse-btn">◀</button>
-      </div>
-      <div className="ai-avatar-panel-body">
-        {video ? (
-          <div>
-            <div className="ai-avatar-media-preview">
-              <video src={video.url} controls />
-            </div>
-            <div className="ai-avatar-media-info">
-              <span>时长：{formatDuration(video.duration)}</span>
-              <span>
-                分辨率：{video.width}×{video.height}
-              </span>
-            </div>
-            <div className="ai-avatar-media-info">
-              <span>{video.name}</span>
-            </div>
-            <button className="aa-btn aa-btn-sm" onClick={handleRemove} style={{ marginTop: 8 }}>
-              移除视频
-            </button>
-          </div>
-        ) : (
-          <div
-            className={`ai-avatar-upload-zone ${dragOver ? "drag-over" : ""}`}
-            onClick={() => fileInputRef.current?.click()}
-            onDrop={handleDrop}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-          >
-            <span className="upload-icon">🎬</span>
-            {uploading ? (
-              <div>
-                <div>上传中... {uploadProgress}%</div>
-                <div
-                  style={{
-                    width: "100%",
-                    height: 4,
-                    background: "#2a2a2a",
-                    borderRadius: 2,
-                    marginTop: 8,
-                  }}
-                >
-                  <div
-                    style={{
-                      width: `${uploadProgress}%`,
-                      height: "100%",
-                      background: "#3b82f6",
-                      borderRadius: 2,
-                      transition: "width 0.2s",
-                    }}
-                  />
-                </div>
-              </div>
-            ) : (
-              <div>
-                <div>点击或拖拽上传视频</div>
-                <div style={{ marginTop: 4, fontSize: 12 }}>MP4 格式，不超过 500MB</div>
-              </div>
-            )}
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept="video/mp4,video/*"
-              onChange={handleFileSelect}
-              style={{ display: "none" }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default AvatarVideoPanel

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

@@ -1,272 +0,0 @@
-/**
- * B-roll 画面插入弹窗
- * 左右布局：左侧素材缩略图 + 右侧设置
- */
-import React, { useCallback, useState } from "react"
-import type { BRollSegment } from "../types/aiAvatar"
-
-interface BRollInsertModalProps {
-  open: boolean
-  onClose: () => void
-  onConfirm: (segment: BRollSegment) => void
-  videoDuration: number
-}
-
-/** 画中画位置选项 */
-const PIP_POSITIONS = [
-  { value: "top-left", label: "左上" },
-  { value: "top-right", label: "右上" },
-  { value: "bottom-left", label: "左下" },
-  { value: "bottom-right", label: "右下" },
-]
-
-/** 格式化秒数为 mm:ss */
-function formatTime(seconds: number): string {
-  const mins = Math.floor(seconds / 60)
-  const secs = Math.floor(seconds % 60)
-  return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`
-}
-
-const BRollInsertModal: React.FC<BRollInsertModalProps> = ({
-  open,
-  onClose,
-  onConfirm,
-  videoDuration,
-}) => {
-  /* 素材列表（示例数据，实际使用时通过 props 或 API 传入） */
-  const [assets, setAssets] = useState<{ id: string; url: string; name: string }[]>([])
-  const [selectedAssetId, setSelectedAssetId] = useState<string | null>(null)
-
-  /* 设置 */
-  const [insertMode, setInsertMode] = useState<"fullscreen" | "pip">("fullscreen")
-  const [pipPosition, setPipPosition] = useState("top-right")
-  const [startTime, setStartTime] = useState(0)
-  const [endTime, setEndTime] = useState(5)
-  const [scriptIndex, setScriptIndex] = useState(0)
-
-  const handleConfirm = useCallback(() => {
-    const asset = assets.find((a) => a.id === selectedAssetId)
-    if (!asset) return
-
-    const segment: BRollSegment = {
-      script_segment_index: scriptIndex,
-      asset_url: asset.url,
-      mode: insertMode,
-      start_time: startTime,
-      end_time: endTime,
-      pip_position: insertMode === "pip" ? pipPosition : undefined,
-      pip_scale: insertMode === "pip" ? 0.3 : undefined,
-    }
-    onConfirm(segment)
-    onClose()
-  }, [
-    assets,
-    selectedAssetId,
-    scriptIndex,
-    insertMode,
-    pipPosition,
-    startTime,
-    endTime,
-    onConfirm,
-    onClose,
-  ])
-
-  /* 上传新素材占位 */
-  const handleUploadAsset = useCallback(() => {
-    /* 实际项目中触发文件上传逻辑 */
-    const newAsset = {
-      id: `asset-${Date.now()}`,
-      url: "",
-      name: "新素材",
-    }
-    setAssets((prev) => [...prev, newAsset])
-    setSelectedAssetId(newAsset.id)
-  }, [])
-
-  if (!open) return null
-
-  return (
-    <div className="ai-avatar-modal-overlay" onClick={onClose}>
-      <div className="ai-avatar-modal" style={{ width: 800 }} onClick={(e) => e.stopPropagation()}>
-        <div className="ai-avatar-modal-header">
-          <h3>插入 B-roll 画面</h3>
-          <button className="aa-btn aa-btn-sm" onClick={onClose}>
-            ✕
-          </button>
-        </div>
-
-        <div className="ai-avatar-modal-body">
-          <div className="ai-avatar-broll-layout">
-            {/* 左侧：素材缩略图 */}
-            <div className="ai-avatar-broll-timeline">
-              <h4 style={{ fontSize: 13, color: "#999", margin: "0 0 12px", fontWeight: 500 }}>
-                素材列表
-              </h4>
-              <div className="ai-avatar-broll-thumbnails">
-                {assets.map((asset) => (
-                  <div
-                    key={asset.id}
-                    className={`ai-avatar-broll-thumb ${selectedAssetId === asset.id ? "selected" : ""}`}
-                    onClick={() => setSelectedAssetId(asset.id)}
-                    title={asset.name}
-                  >
-                    {asset.url ? (
-                      <img
-                        src={asset.url}
-                        alt={asset.name}
-                        style={{ width: "100%", height: "100%", objectFit: "cover" }}
-                      />
-                    ) : (
-                      <div
-                        style={{
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          height: "100%",
-                          fontSize: 11,
-                          color: "#666",
-                        }}
-                      >
-                        {asset.name}
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-              <button className="aa-btn" onClick={handleUploadAsset}>
-                + 上传新素材
-              </button>
-            </div>
-
-            {/* 右侧：设置 */}
-            <div className="ai-avatar-broll-settings">
-              <h4 style={{ fontSize: 13, color: "#999", margin: "0 0 12px", fontWeight: 500 }}>
-                插入设置
-              </h4>
-
-              {/* 插入位置 */}
-              <div style={{ marginBottom: 12 }}>
-                <label style={{ display: "block", fontSize: 12, color: "#999", marginBottom: 4 }}>
-                  插入位置（文案段落索引）
-                </label>
-                <input
-                  type="number"
-                  min={0}
-                  value={scriptIndex}
-                  onChange={(e) => setScriptIndex(Number(e.target.value))}
-                  style={{
-                    width: "100%",
-                    background: "#222",
-                    border: "1px solid #2a2a2a",
-                    borderRadius: 4,
-                    padding: "6px 8px",
-                    color: "#fff",
-                    fontSize: 13,
-                  }}
-                />
-              </div>
-
-              {/* 开始时间 */}
-              <div style={{ marginBottom: 12 }}>
-                <label style={{ display: "block", fontSize: 12, color: "#999", marginBottom: 4 }}>
-                  开始时间：{formatTime(startTime)}
-                </label>
-                <input
-                  type="range"
-                  min={0}
-                  max={videoDuration}
-                  step={0.1}
-                  value={startTime}
-                  onChange={(e) => setStartTime(Number(e.target.value))}
-                  style={{ width: "100%" }}
-                />
-              </div>
-
-              {/* 持续时间 */}
-              <div style={{ marginBottom: 12 }}>
-                <label style={{ display: "block", fontSize: 12, color: "#999", marginBottom: 4 }}>
-                  结束时间：{formatTime(endTime)}
-                </label>
-                <input
-                  type="range"
-                  min={startTime}
-                  max={videoDuration}
-                  step={0.1}
-                  value={endTime}
-                  onChange={(e) => setEndTime(Number(e.target.value))}
-                  style={{ width: "100%" }}
-                />
-              </div>
-
-              <hr className="aa-divider" />
-
-              {/* 插入模式 */}
-              <div style={{ marginBottom: 12 }}>
-                <label style={{ display: "block", fontSize: 12, color: "#999", marginBottom: 8 }}>
-                  插入模式
-                </label>
-                <div className="aa-radio-group">
-                  <label>
-                    <input
-                      type="radio"
-                      name="brollInsertMode"
-                      value="fullscreen"
-                      checked={insertMode === "fullscreen"}
-                      onChange={() => setInsertMode("fullscreen")}
-                    />
-                    全屏替换
-                  </label>
-                  <label>
-                    <input
-                      type="radio"
-                      name="brollInsertMode"
-                      value="pip"
-                      checked={insertMode === "pip"}
-                      onChange={() => setInsertMode("pip")}
-                    />
-                    画中画
-                  </label>
-                </div>
-              </div>
-
-              {/* 画中画位置选择 */}
-              {insertMode === "pip" && (
-                <div style={{ marginBottom: 12 }}>
-                  <label style={{ display: "block", fontSize: 12, color: "#999", marginBottom: 8 }}>
-                    画中画位置
-                  </label>
-                  <div className="ai-avatar-pip-positions">
-                    {PIP_POSITIONS.map((pos) => (
-                      <button
-                        key={pos.value}
-                        className={pipPosition === pos.value ? "active" : ""}
-                        onClick={() => setPipPosition(pos.value)}
-                      >
-                        {pos.label}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <div className="ai-avatar-modal-footer">
-          <button className="aa-btn" onClick={onClose}>
-            取消
-          </button>
-          <button
-            className="aa-btn aa-btn-primary"
-            disabled={!selectedAssetId}
-            onClick={handleConfirm}
-          >
-            确认插入
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default BRollInsertModal

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

@@ -1,131 +0,0 @@
-/**
- * 面板5：封面 & 生成
- * 封面预览 + 生成设置 + 生成按钮
- */
-import React, { useCallback } from "react"
-import type { AiAvatarCoverConfig, AiAvatarGenerateConfig } from "../types/aiAvatar"
-
-interface CoverGeneratePanelProps {
-  coverConfig: AiAvatarCoverConfig
-  setCoverConfig: (c: AiAvatarCoverConfig) => void
-  generateConfig: AiAvatarGenerateConfig
-  setGenerateConfig: (c: AiAvatarGenerateConfig) => void
-  isGenerating: boolean
-  onSubmitGenerate: () => void
-  collapsed: boolean
-  onToggleCollapse: () => void
-}
-
-const CoverGeneratePanel: React.FC<CoverGeneratePanelProps> = ({
-  coverConfig,
-  setCoverConfig,
-  generateConfig,
-  setGenerateConfig,
-  isGenerating,
-  onSubmitGenerate,
-  collapsed,
-  onToggleCollapse,
-}) => {
-  const handleFrameCapture = useCallback(() => {
-    setCoverConfig({ ...coverConfig, mode: "frame", enabled: true })
-  }, [coverConfig, setCoverConfig])
-
-  const handleCustomUpload = useCallback(() => {
-    setCoverConfig({ ...coverConfig, mode: "upload", enabled: true })
-  }, [coverConfig, setCoverConfig])
-
-  return (
-    <div className={`ai-avatar-panel panel-cover-generate ${collapsed ? "collapsed" : ""}`}>
-      <div className="ai-avatar-panel-header" onClick={onToggleCollapse}>
-        <h3>封面 &amp; 生成</h3>
-        <button className="collapse-btn">◀</button>
-      </div>
-      <div className="ai-avatar-panel-body">
-        {/* 封面预览区 */}
-        <div className="ai-avatar-cover-preview">
-          {coverConfig.thumbnail_url ? (
-            <img src={coverConfig.thumbnail_url} alt="封面预览" />
-          ) : (
-            <span>暂无封面</span>
-          )}
-        </div>
-
-        {/* 封面操作按钮 */}
-        <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
-          <button className="aa-btn" style={{ flex: 1 }} onClick={handleFrameCapture}>
-            从视频截取
-          </button>
-          <button className="aa-btn" style={{ flex: 1 }} onClick={handleCustomUpload}>
-            自定义上传
-          </button>
-        </div>
-
-        {/* 分割线 + 生成设置 */}
-        <hr className="aa-divider" />
-
-        <div className="ai-avatar-generate-section">
-          <h4 style={{ fontSize: 13, color: "#999", margin: "0 0 12px", fontWeight: 500 }}>
-            生成设置
-          </h4>
-
-          {/* 分辨率 */}
-          <div className="field-row">
-            <span>分辨率</span>
-            <select
-              value={generateConfig.resolution}
-              onChange={(e) =>
-                setGenerateConfig({
-                  ...generateConfig,
-                  resolution: e.target.value as "720p" | "1080p",
-                })
-              }
-            >
-              <option value="720p">720p</option>
-              <option value="1080p">1080p</option>
-            </select>
-          </div>
-
-          {/* 画面插入模式 */}
-          <div style={{ marginBottom: 12 }}>
-            <label style={{ display: "block", fontSize: 13, color: "#fff", marginBottom: 8 }}>
-              画面插入模式
-            </label>
-            <div className="aa-radio-group">
-              <label>
-                <input
-                  type="radio"
-                  name="bRollMode"
-                  value="fullscreen"
-                  checked={generateConfig.bRollMode === "fullscreen"}
-                  onChange={() => setGenerateConfig({ ...generateConfig, bRollMode: "fullscreen" })}
-                />
-                全屏切换
-              </label>
-              <label>
-                <input
-                  type="radio"
-                  name="bRollMode"
-                  value="pip"
-                  checked={generateConfig.bRollMode === "pip"}
-                  onChange={() => setGenerateConfig({ ...generateConfig, bRollMode: "pip" })}
-                />
-                画中画
-              </label>
-            </div>
-          </div>
-        </div>
-
-        {/* 生成按钮 */}
-        <button
-          className="ai-avatar-generate-btn"
-          disabled={isGenerating}
-          onClick={onSubmitGenerate}
-        >
-          {isGenerating ? "生成中..." : "🚀 开始生成视频"}
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default CoverGeneratePanel

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

@@ -0,0 +1,209 @@
+/**
+ * AI数字人 — 出镜视频选择弹窗（#1809 ③）
+ * 交互对齐智能剪辑 Step2：先选素材库（video 库）→ 再选该库内视频。
+ * 搜索框 + 素材库下拉 + 竖屏 9:16 视频缩略图网格 + 底部确认选择。
+ */
+import { useEffect, useState } from "react"
+import { getAssets, getAssetLibraries, type AssetItem, type AssetLibraryItem } from "@/api/assets"
+
+export interface ModalAssetPickerProps {
+  open: boolean
+  onClose: () => void
+  onSelect: (asset: AssetItem) => void
+  /** 已选中的素材 ID（用于高亮） */
+  selectedId?: string
+}
+
+export function ModalAssetPicker({ open, onClose, onSelect, selectedId }: ModalAssetPickerProps) {
+  const [keyword, setKeyword] = useState("")
+  const [libraries, setLibraries] = useState<AssetLibraryItem[]>([])
+  const [libraryId, setLibraryId] = useState<string>("")
+  const [assets, setAssets] = useState<AssetItem[]>([])
+  const [pickedId, setPickedId] = useState<string | null>(null)
+  const [loadingLibs, setLoadingLibs] = useState(false)
+  const [loadingAssets, setLoadingAssets] = useState(false)
+  const [error, setError] = useState("")
+
+  /* 弹窗打开：重置状态 */
+  useEffect(() => {
+    if (!open) return
+    setKeyword("")
+    setLibraries([])
+    setLibraryId("")
+    setAssets([])
+    setError("")
+    setPickedId(selectedId ?? null)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
+  /* 第一步：加载视频素材库列表（仅 kind=video，对齐智能剪辑 #1777） */
+  useEffect(() => {
+    if (!open) return
+    let cancelled = false
+    setLoadingLibs(true)
+    getAssetLibraries("video")
+      .then((libs) => {
+        if (cancelled) return
+        const list = Array.isArray(libs) ? libs : []
+        setLibraries(list)
+        // 默认选中第一个视频库
+        if (list.length > 0) setLibraryId((prev) => prev || list[0].id)
+      })
+      .catch(() => {
+        if (!cancelled) setError("素材库加载失败，请重试")
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingLibs(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [open])
+
+  /* 第二步：选中库后拉取该库视频素材（关键字防抖） */
+  useEffect(() => {
+    if (!open || !libraryId) return
+    let cancelled = false
+    setLoadingAssets(true)
+    const load = async () => {
+      try {
+        // getAssets 返回 { items, total }；拉满一页（数字人口播视频库通常不大）
+        const { items } = await getAssets(libraryId, { page_size: 100 })
+        if (cancelled) return
+        let list = Array.isArray(items) ? items : []
+        // 仅保留视频素材（出镜视频要求）
+        list = list.filter((a) => a.mime_type?.includes("video"))
+        const kw = keyword.trim()
+        if (kw) list = list.filter((a) => a.name?.includes(kw))
+        setAssets(list)
+        setError("")
+      } catch {
+        if (!cancelled) {
+          setError("素材加载失败，请重试")
+          setAssets([])
+        }
+      } finally {
+        if (!cancelled) setLoadingAssets(false)
+      }
+    }
+    const timer = window.setTimeout(load, 300)
+    return () => {
+      cancelled = true
+      window.clearTimeout(timer)
+    }
+  }, [open, libraryId, keyword])
+
+  if (!open) return null
+
+  const handleConfirm = () => {
+    if (!pickedId) return
+    const asset = assets.find((a) => a.id === pickedId)
+    if (asset) onSelect(asset)
+    onClose()
+  }
+
+  return (
+    <div className="aa-modal-overlay" onClick={onClose}>
+      <div className="aa-modal" onClick={(e) => e.stopPropagation()}>
+        {/* 头部 */}
+        <div className="aa-modal__header">
+          <span className="aa-modal__title">选择出镜视频</span>
+          <button type="button" className="aa-modal__close" onClick={onClose} aria-label="关闭">
+            ×
+          </button>
+        </div>
+
+        {/* 主体：素材库选择 + 搜索 + 网格 */}
+        <div className="aa-modal__body">
+          {/* 第一步：选素材库 */}
+          <div className="aa-asset-search">
+            <select
+              className="aa-select"
+              style={{ width: 160, flex: "0 0 auto" }}
+              value={libraryId}
+              onChange={(e) => setLibraryId(e.target.value)}
+              disabled={loadingLibs || libraries.length === 0}
+            >
+              {libraries.length === 0 ? (
+                <option value="">{loadingLibs ? "素材库加载中…" : "暂无视频素材库"}</option>
+              ) : (
+                libraries.map((lib) => (
+                  <option key={lib.id} value={lib.id}>
+                    📁 {lib.name}
+                  </option>
+                ))
+              )}
+            </select>
+            <input
+              className="aa-input"
+              type="text"
+              placeholder="搜索素材名称…"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+            />
+          </div>
+
+          {libraries.length === 0 && !loadingLibs ? (
+            <div className="aa-empty">
+              <div className="aa-empty__icon">📁</div>
+              暂无视频素材库，请先在「素材库」中创建视频库并上传视频
+            </div>
+          ) : loadingAssets ? (
+            <div className="aa-empty">
+              <div className="aa-empty__icon">⏳</div>
+              素材加载中…
+            </div>
+          ) : error ? (
+            <div className="aa-empty">
+              <div className="aa-empty__icon">⚠️</div>
+              {error}
+            </div>
+          ) : assets.length === 0 ? (
+            <div className="aa-empty">
+              <div className="aa-empty__icon">🎬</div>
+              该素材库暂无视频素材
+            </div>
+          ) : (
+            <div className="aa-asset-grid">
+              {assets.map((asset) => {
+                const isActive = asset.id === pickedId
+                const thumb = asset.thumbnail_url || asset.file_url
+                const isVideo = asset.mime_type?.includes("video")
+                return (
+                  <div
+                    key={asset.id}
+                    className={`aa-asset-card${isActive ? " selected" : ""}`}
+                    onClick={() => setPickedId(asset.id)}
+                  >
+                    {isVideo && !asset.thumbnail_url ? (
+                      <video src={asset.file_url} muted preload="metadata" />
+                    ) : (
+                      <img src={thumb} alt={asset.name} />
+                    )}
+                    {isActive && <div className="aa-asset-card__check">✓</div>}
+                    <div className="aa-asset-card__name">{asset.name}</div>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* 底部：取消 + 确认选择 */}
+        <div className="aa-modal__footer">
+          <button type="button" className="aa-btn aa-btn--ghost" onClick={onClose}>
+            取消
+          </button>
+          <button
+            type="button"
+            className="aa-btn aa-btn--primary"
+            onClick={handleConfirm}
+            disabled={!pickedId}
+          >
+            确认选择
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,421 @@
+/**
+ * AI数字人 — B-roll 画面插入编辑器弹窗（#1809 ④⑤⑥）
+ *
+ * 布局：
+ * - 左侧：先选素材库（video 库）→ 再选该库视频素材（已被其他 segment 使用的素材
+ *   标灰 + "已选择" 遮罩，pointer-events:none 防重复选择）
+ * - 右侧：文案句子列表（点选对应段落，替代原数字索引框）/ 全屏 or 画中画 / 四角位置+大小
+ *   （开始/结束时间已删除，按句子字数占比 × 口播总时长自动估算）
+ * - 底部：已配置的画面插入列表（可删除）
+ */
+import React, { useEffect, useMemo, useState } from "react"
+import { getAssets, getAssetLibraries, type AssetItem, type AssetLibraryItem } from "@/api/assets"
+import type { BRollSegment, BRollInsertMode, PipPosition } from "../types"
+import { splitScriptIntoSentences, type ScriptSentence } from "../utils/sentences"
+
+interface ModalBRollEditorProps {
+  open: boolean
+  onClose: () => void
+  /** 当前已有的 B-roll segments（用于标灰已选素材） */
+  existingSegments: BRollSegment[]
+  /** 当前文案全文（用于分句） */
+  scriptText: string
+  /** 对口型成片总时长（秒），用于时间自动估算 */
+  outputDuration: number
+  onConfirm: (segment: BRollSegment) => void
+  onRemove: (id: string) => void
+}
+
+const PIP_POSITION_OPTIONS: { value: PipPosition; label: string }[] = [
+  { value: "top-left", label: "左上" },
+  { value: "top-right", label: "右上" },
+  { value: "bottom-left", label: "左下" },
+  { value: "bottom-right", label: "右下" },
+]
+
+const MODE_LABEL: Record<BRollInsertMode, string> = {
+  fullscreen: "全屏切换",
+  pip: "画中画",
+}
+
+const ModalBRollEditor: React.FC<ModalBRollEditorProps> = ({
+  open,
+  onClose,
+  existingSegments,
+  scriptText,
+  outputDuration,
+  onConfirm,
+  onRemove,
+}) => {
+  /* ── 素材库（④ 先选库再选素材） ── */
+  const [libraries, setLibraries] = useState<AssetLibraryItem[]>([])
+  const [libraryId, setLibraryId] = useState<string>("")
+  const [availableAssets, setAvailableAssets] = useState<AssetItem[]>([])
+  const [loadingLibs, setLoadingLibs] = useState(false)
+  const [loadingAssets, setLoadingAssets] = useState(false)
+  const [assetError, setAssetError] = useState("")
+
+  /* ── 右侧设置本地状态 ── */
+  const [selectedAsset, setSelectedAsset] = useState<AssetItem | null>(null)
+  const [selectedSentence, setSelectedSentence] = useState<ScriptSentence | null>(null)
+  const [mode, setMode] = useState<BRollInsertMode>("fullscreen")
+  const [pipPosition, setPipPosition] = useState<PipPosition>("top-right")
+  const [pipScale, setPipScale] = useState(0.3)
+
+  /** 文案分句（⑤） */
+  const sentences = useMemo(
+    () => splitScriptIntoSentences(scriptText, outputDuration),
+    [scriptText, outputDuration],
+  )
+
+  /** 已被现有 segments 占用的素材 id 集合（标灰、禁止重复选择） */
+  const usedAssetIds = useMemo(
+    () => new Set(existingSegments.map((seg) => seg.asset.id)),
+    [existingSegments],
+  )
+
+  /* 弹窗打开：重置选择 + 加载视频库列表 */
+  useEffect(() => {
+    if (!open) return
+    setSelectedAsset(null)
+    setSelectedSentence(null)
+    setMode("fullscreen")
+    setPipPosition("top-right")
+    setPipScale(0.3)
+    setLibraries([])
+    setLibraryId("")
+    setAvailableAssets([])
+    setAssetError("")
+    setLoadingLibs(true)
+    let cancelled = false
+    getAssetLibraries("video")
+      .then((libs) => {
+        if (cancelled) return
+        const list = Array.isArray(libs) ? libs : []
+        setLibraries(list)
+        if (list.length > 0) setLibraryId(list[0].id)
+      })
+      .catch(() => {
+        if (!cancelled) setAssetError("素材库加载失败，请重试")
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingLibs(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [open])
+
+  /* 选中库后拉取该库视频素材 */
+  useEffect(() => {
+    if (!open || !libraryId) return
+    let cancelled = false
+    setLoadingAssets(true)
+    getAssets(libraryId, { page_size: 100 })
+      .then(({ items }) => {
+        if (cancelled) return
+        const list = (Array.isArray(items) ? items : []).filter((a) =>
+          a.mime_type?.includes("video"),
+        )
+        setAvailableAssets(list)
+        setAssetError("")
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setAssetError("素材加载失败，请重试")
+          setAvailableAssets([])
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingAssets(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [open, libraryId])
+
+  if (!open) return null
+
+  /** 选择素材（已选素材因 pointer-events:none 不会触发） */
+  const handleSelectAsset = (asset: AssetItem) => {
+    if (usedAssetIds.has(asset.id)) return
+    setSelectedAsset(asset)
+  }
+
+  /** 确认添加一段 B-roll（⑥ 时间取所选句子的估算起止） */
+  const handleConfirm = () => {
+    if (!selectedAsset || !selectedSentence) return
+    const startTime = selectedSentence.startTime
+    const endTime = Math.max(selectedSentence.endTime, startTime + 0.5)
+    const segment: BRollSegment = {
+      id: crypto.randomUUID(),
+      asset: selectedAsset,
+      script_segment_index: selectedSentence.index,
+      start_time: startTime,
+      end_time: endTime,
+      mode,
+      pip_position: pipPosition,
+      pip_scale: mode === "pip" ? pipScale : 0.3,
+    }
+    onConfirm(segment)
+    // 重置素材/句子选择，保留模式设置便于连续添加
+    setSelectedAsset(null)
+    setSelectedSentence(null)
+  }
+
+  const canConfirm = selectedAsset !== null && selectedSentence !== null
+
+  return (
+    <div className="aa-modal-overlay" onClick={onClose}>
+      <div className="aa-modal aa-modal--wide" onClick={(e) => e.stopPropagation()}>
+        {/* 头部 */}
+        <div className="aa-modal__header">
+          <span className="aa-modal__title">🎞️ 画面插入（B-roll）</span>
+          <button type="button" className="aa-modal__close" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        {/* 主体：左素材 + 右设置 */}
+        <div className="aa-modal__body">
+          <div className="aa-broll-modal-body">
+            {/* 左侧：选库 + 素材网格 */}
+            <div className="aa-broll-left">
+              <div className="aa-broll-lib-row">
+                <select
+                  className="aa-select"
+                  value={libraryId}
+                  onChange={(e) => setLibraryId(e.target.value)}
+                  disabled={loadingLibs || libraries.length === 0}
+                >
+                  {libraries.length === 0 ? (
+                    <option value="">{loadingLibs ? "素材库加载中…" : "暂无视频素材库"}</option>
+                  ) : (
+                    libraries.map((lib) => (
+                      <option key={lib.id} value={lib.id}>
+                        📁 {lib.name}
+                      </option>
+                    ))
+                  )}
+                </select>
+              </div>
+              <div className="aa-broll-asset-grid">
+                {availableAssets.map((asset) => {
+                  const alreadySelected = usedAssetIds.has(asset.id)
+                  const isCurrent = selectedAsset?.id === asset.id
+                  const classNames = [
+                    "aa-broll-asset-thumb",
+                    isCurrent ? "selected" : "",
+                    alreadySelected ? "already-selected" : "",
+                  ]
+                    .filter(Boolean)
+                    .join(" ")
+                  return (
+                    <div
+                      key={asset.id}
+                      className={classNames}
+                      onClick={() => handleSelectAsset(asset)}
+                      title={asset.name}
+                    >
+                      {asset.thumbnail_url ? (
+                        <img src={asset.thumbnail_url} alt={asset.name} />
+                      ) : (
+                        <div className="aa-broll-asset-placeholder">🎬</div>
+                      )}
+                      <span className="aa-asset-card__name">{asset.name}</span>
+                    </div>
+                  )
+                })}
+                {loadingAssets ? (
+                  <div className="aa-empty" style={{ gridColumn: "1 / -1" }}>
+                    <div className="aa-empty__icon">⏳</div>
+                    素材加载中…
+                  </div>
+                ) : availableAssets.length === 0 ? (
+                  <div className="aa-empty" style={{ gridColumn: "1 / -1" }}>
+                    <div className="aa-empty__icon">🎬</div>
+                    {assetError || "该素材库暂无视频素材"}
+                  </div>
+                ) : null}
+              </div>
+            </div>
+
+            {/* 右侧：插入设置 */}
+            <div className="aa-broll-right">
+              <div className="aa-broll-settings">
+                {/* ⑤ 文案句子列表（替代段落索引数字框） */}
+                <div className="aa-form-field">
+                  <label className="aa-label">对应文案句子（点选）</label>
+                  {sentences.length === 0 ? (
+                    <div className="aa-sentence-empty">
+                      请先在「文案 & 对口型」面板填写或选择文案
+                    </div>
+                  ) : (
+                    <div className="aa-sentence-list">
+                      {sentences.map((sent) => {
+                        const active = selectedSentence?.index === sent.index
+                        return (
+                          <button
+                            key={sent.index}
+                            type="button"
+                            className={`aa-sentence-item${active ? " active" : ""}`}
+                            onClick={() => setSelectedSentence(sent)}
+                            title={sent.text}
+                          >
+                            <span className="aa-sentence-item__idx">{sent.index + 1}</span>
+                            <span className="aa-sentence-item__text">{sent.text}</span>
+                            {outputDuration > 0 && (
+                              <span className="aa-sentence-item__time">
+                                {sent.startTime.toFixed(1)}-{sent.endTime.toFixed(1)}s
+                              </span>
+                            )}
+                          </button>
+                        )
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                {/* 插入模式 */}
+                <div className="aa-form-field">
+                  <label className="aa-label">插入模式</label>
+                  <div className="aa-broll-mode-toggle">
+                    <button
+                      type="button"
+                      className={`aa-broll-mode-btn${mode === "fullscreen" ? " active" : ""}`}
+                      onClick={() => setMode("fullscreen")}
+                    >
+                      全屏切换
+                    </button>
+                    <button
+                      type="button"
+                      className={`aa-broll-mode-btn${mode === "pip" ? " active" : ""}`}
+                      onClick={() => setMode("pip")}
+                    >
+                      画中画
+                    </button>
+                  </div>
+                </div>
+
+                {/* 画中画：四角位置 + 大小 */}
+                {mode === "pip" && (
+                  <>
+                    <div className="aa-form-field">
+                      <label className="aa-label">画中画位置</label>
+                      <div className="aa-pip-positions">
+                        {PIP_POSITION_OPTIONS.map((opt) => (
+                          <button
+                            key={opt.value}
+                            type="button"
+                            className={`aa-pip-pos-btn${
+                              pipPosition === opt.value ? " active" : ""
+                            }`}
+                            onClick={() => setPipPosition(opt.value)}
+                          >
+                            {opt.label}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="aa-form-field">
+                      <div className="aa-field-label-row">
+                        <label className="aa-label">画中画大小</label>
+                        <span style={{ fontSize: 12, color: "#8c8ca1" }}>
+                          {Math.round(pipScale * 100)}%
+                        </span>
+                      </div>
+                      <input
+                        type="range"
+                        min={0.1}
+                        max={0.6}
+                        step={0.05}
+                        value={pipScale}
+                        onChange={(e) => setPipScale(Number(e.target.value))}
+                        style={{ width: "100%" }}
+                      />
+                    </div>
+                  </>
+                )}
+
+                {/* 当前选择提示（⑥ 自动估算时间在这里展示） */}
+                <div className="aa-broll-hint">
+                  {selectedAsset && selectedSentence ? (
+                    <>
+                      <div>已选素材：{selectedAsset.name}</div>
+                      <div>
+                        对应第 {selectedSentence.index + 1} 句 · 时间段{" "}
+                        {selectedSentence.startTime.toFixed(1)}s -{" "}
+                        {Math.max(
+                          selectedSentence.endTime,
+                          selectedSentence.startTime + 0.5,
+                        ).toFixed(1)}
+                        s （按字数自动估算）
+                      </div>
+                    </>
+                  ) : (
+                    <div style={{ color: "#8c8ca1" }}>
+                      {!selectedAsset ? "请从左侧选择一段素材" : "请在上方点选对应的文案句子"}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 底部：已配置的画面插入列表 */}
+          <div className="aa-broll-list">
+            <div className="aa-broll-list__title">已配置画面插入（{existingSegments.length}）</div>
+            {existingSegments.length === 0 ? (
+              <div className="aa-empty" style={{ padding: 12 }}>
+                尚未配置画面插入
+              </div>
+            ) : (
+              existingSegments.map((seg) => (
+                <div key={seg.id} className="aa-broll-item">
+                  {seg.asset.thumbnail_url ? (
+                    <img className="aa-broll-item__thumb" src={seg.asset.thumbnail_url} alt="" />
+                  ) : (
+                    <div className="aa-broll-item__thumb" />
+                  )}
+                  <div className="aa-broll-item__info">
+                    <div style={{ fontWeight: 500, color: "#1a1a2e" }}>{seg.asset.name}</div>
+                    <div style={{ color: "#8c8ca1", fontSize: 11 }}>
+                      第 {seg.script_segment_index + 1} 句 · {MODE_LABEL[seg.mode]}
+                      {seg.mode === "pip" ? ` · ${seg.pip_position}` : ""} ·{" "}
+                      {seg.start_time.toFixed(1)}s - {seg.end_time.toFixed(1)}s
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    className="aa-broll-item__remove"
+                    title="删除"
+                    onClick={() => onRemove(seg.id)}
+                  >
+                    🗑
+                  </button>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* 底部按钮 */}
+        <div className="aa-modal__footer">
+          <button type="button" className="aa-btn" onClick={onClose}>
+            关闭
+          </button>
+          <button
+            type="button"
+            className="aa-btn aa-btn--primary"
+            disabled={!canConfirm}
+            onClick={handleConfirm}
+          >
+            ✅ 添加画面插入
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ModalBRollEditor

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

@@ -0,0 +1,220 @@
+/**
+ * AI数字人 — 面板5：封面 & 生成
+ * - 竖屏 9:16 封面预览（从视频截取 / 自定义上传）
+ * - 分辨率选择（720p / 1080p / 4K）
+ * - 配置汇总卡片（出镜视频/音色/文案/对口型/B-roll/标题/封面）
+ * - 渐变紫色生成按钮
+ *
+ * 注意：v3 已删除"画面插入模式"，本面板不包含该选项。
+ */
+import React, { useRef } from "react"
+import type { AiAvatarCoverConfig } from "../types"
+
+interface PanelCoverAndGenerateProps {
+  coverConfig: AiAvatarCoverConfig
+  onCoverConfigChange: (partial: Partial<AiAvatarCoverConfig>) => void
+  resolution: string
+  onResolutionChange: (r: string) => void
+  isGenerating: boolean
+  onGenerate: () => void
+  /** 智能获取封面（MediaKit 选帧） */
+  onSmartCover: () => void
+  smartCoverLoading: boolean
+  canSmartCover: boolean
+  /** 配置汇总信息 */
+  summary: {
+    videoName: string | null
+    voiceName: string | null
+    scriptLength: number
+    lipsyncStatus: string | null
+    brollCount: number
+    hasTitle: boolean
+    hasCover: boolean
+  }
+}
+
+const RESOLUTION_OPTIONS = [
+  { value: "720p", label: "720p（高清）" },
+  { value: "1080p", label: "1080p（全高清）" },
+  { value: "4k", label: "4K（超清）" },
+]
+
+const LIPSYNC_STATUS_LABEL: Record<string, { text: string; cls: string }> = {
+  idle: { text: "未开始", cls: "aa-status-badge--idle" },
+  pending: { text: "排队中", cls: "aa-status-badge--pending" },
+  processing: { text: "生成中", cls: "aa-status-badge--processing" },
+  completed: { text: "已完成", cls: "aa-status-badge--completed" },
+  failed: { text: "失败", cls: "aa-status-badge--failed" },
+}
+
+const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
+  coverConfig,
+  onCoverConfigChange,
+  resolution,
+  onResolutionChange,
+  isGenerating,
+  onGenerate,
+  onSmartCover,
+  smartCoverLoading,
+  canSmartCover,
+  summary,
+}) => {
+  const uploadInputRef = useRef<HTMLInputElement>(null)
+
+  /** 自定义上传封面 */
+  const handleUploadClick = () => {
+    uploadInputRef.current?.click()
+  }
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    // 本地预览：生成 object URL（实际上传由父级/后端链路处理）
+    const url = URL.createObjectURL(file)
+    onCoverConfigChange({ mode: "upload", upload_url: url, thumbnail_url: url })
+    // 允许重复选择同一文件
+    e.target.value = ""
+  }
+
+  /** 智能获取封面（调后端 MediaKit 抽帧评分选最佳帧，#1822） */
+  const handleSmartCover = () => {
+    onCoverConfigChange({ mode: "auto_frame" })
+    onSmartCover()
+  }
+
+  const lipsync = summary.lipsyncStatus ? LIPSYNC_STATUS_LABEL[summary.lipsyncStatus] : null
+
+  const canGenerate = summary.lipsyncStatus === "completed" && !isGenerating
+
+  return (
+    <div className="aa-cover-generate">
+      {/* 封面预览（竖屏 9:16） */}
+      <div className="aa-cover-preview">
+        {coverConfig.thumbnail_url ? (
+          <img src={coverConfig.thumbnail_url} alt="封面预览" />
+        ) : (
+          <span className="aa-cover-preview__placeholder">暂无封面</span>
+        )}
+      </div>
+
+      <div className="aa-cover-actions">
+        <button
+          type="button"
+          className={`aa-btn aa-btn--ghost${coverConfig.mode === "auto_frame" ? " active" : ""}`}
+          onClick={handleSmartCover}
+          disabled={smartCoverLoading || !canSmartCover}
+          title={canSmartCover ? "基于对口型成片智能选帧" : "请先完成对口型生成"}
+        >
+          {smartCoverLoading ? "⏳ 智能选帧中…" : "🎬 智能获取封面"}
+        </button>
+        <button
+          type="button"
+          className={`aa-btn aa-btn--ghost${coverConfig.mode === "upload" ? " active" : ""}`}
+          onClick={handleUploadClick}
+        >
+          📷 自定义上传
+        </button>
+        <input
+          ref={uploadInputRef}
+          type="file"
+          accept="image/*"
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+        />
+      </div>
+
+      {/* 分辨率选择 */}
+      <div className="aa-form-field">
+        <label className="aa-label">分辨率</label>
+        <select
+          className="aa-select"
+          value={resolution}
+          onChange={(e) => onResolutionChange(e.target.value)}
+        >
+          {RESOLUTION_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* 配置汇总 */}
+      <div className="aa-generate-section">
+        <div className="aa-config-summary">
+          <div className="aa-config-summary__row">
+            <span>出镜视频</span>
+            {summary.videoName ? (
+              <span className="aa-config-summary__value">{summary.videoName}</span>
+            ) : (
+              <span className="aa-config-summary__empty">未配置</span>
+            )}
+          </div>
+          <div className="aa-config-summary__row">
+            <span>音色</span>
+            {summary.voiceName ? (
+              <span className="aa-config-summary__value">{summary.voiceName}</span>
+            ) : (
+              <span className="aa-config-summary__empty">未配置</span>
+            )}
+          </div>
+          <div className="aa-config-summary__row">
+            <span>文案</span>
+            {summary.scriptLength > 0 ? (
+              <span className="aa-config-summary__value">{summary.scriptLength} 字</span>
+            ) : (
+              <span className="aa-config-summary__empty">未配置</span>
+            )}
+          </div>
+          <div className="aa-config-summary__row">
+            <span>对口型</span>
+            {lipsync ? (
+              <span className={`aa-status-badge ${lipsync.cls}`}>{lipsync.text}</span>
+            ) : (
+              <span className="aa-config-summary__empty">未配置</span>
+            )}
+          </div>
+          <div className="aa-config-summary__row">
+            <span>B-roll 画面插入</span>
+            <span className="aa-config-summary__value">
+              {summary.brollCount > 0 ? `${summary.brollCount} 段` : "无"}
+            </span>
+          </div>
+          <div className="aa-config-summary__row">
+            <span>标题</span>
+            {summary.hasTitle ? (
+              <span className="aa-config-summary__value">已设置</span>
+            ) : (
+              <span className="aa-config-summary__empty">未配置</span>
+            )}
+          </div>
+          <div className="aa-config-summary__row">
+            <span>封面</span>
+            {summary.hasCover ? (
+              <span className="aa-config-summary__value">已开启</span>
+            ) : (
+              <span className="aa-config-summary__empty">未配置</span>
+            )}
+          </div>
+        </div>
+
+        {/* 生成按钮 */}
+        <button
+          type="button"
+          className="aa-btn aa-btn--generate aa-btn--full"
+          disabled={!canGenerate}
+          onClick={onGenerate}
+        >
+          {isGenerating ? "⏳ 生成中..." : "🚀 开始生成视频"}
+        </button>
+        {summary.lipsyncStatus !== "completed" && !isGenerating && (
+          <div style={{ marginTop: 8, fontSize: 11, color: "#8c8ca1", textAlign: "center" }}>
+            请先完成对口型生成
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default PanelCoverAndGenerate

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

@@ -0,0 +1,222 @@
+/**
+ * AI数字人 — 文案 & 对口型面板（面板4）
+ * 上半区：文案（文案库选择 / 手动输入）；下半区：对口型视频预览（9:16）+ B-roll 画面
+ */
+import { useState } from "react"
+import type { LipsyncJob, BRollSegment } from "../types"
+
+interface PanelScriptAndLipsyncProps {
+  scriptText: string
+  onScriptTextChange: (text: string) => void
+  onOpenScriptModal: () => void
+  lipsyncJob: LipsyncJob | null
+  onGenerateLipsync: () => void
+  bRollSegments: BRollSegment[]
+  onOpenBRollModal: () => void
+  onRemoveBRoll: (id: string) => void
+}
+
+type ScriptTab = "library" | "manual"
+
+const BROLL_MODE_LABEL: Record<BRollSegment["mode"], string> = {
+  fullscreen: "全屏",
+  pip: "画中画",
+}
+
+function formatTime(seconds: number): string {
+  const m = Math.floor(seconds / 60)
+  const s = Math.round(seconds % 60)
+  return `${m}:${s.toString().padStart(2, "0")}`
+}
+
+export function PanelScriptAndLipsync({
+  scriptText,
+  onScriptTextChange,
+  onOpenScriptModal,
+  lipsyncJob,
+  onGenerateLipsync,
+  bRollSegments,
+  onOpenBRollModal,
+  onRemoveBRoll,
+}: PanelScriptAndLipsyncProps) {
+  const [scriptTab, setScriptTab] = useState<ScriptTab>("library")
+
+  /* 对口型状态判断 */
+  const isGenerating = lipsyncJob?.status === "pending" || lipsyncJob?.status === "processing"
+  const isDone = lipsyncJob?.status === "completed"
+  const isFailed = lipsyncJob?.status === "failed"
+
+  const statusText =
+    lipsyncJob?.status === "processing"
+      ? "对口型生成中…"
+      : lipsyncJob?.status === "pending"
+        ? "排队中…"
+        : "对口型生成中…"
+
+  return (
+    <div className="aa-script-lipsync">
+      {/* ── 上半区：文案 ── */}
+      <div className="aa-script-tabs">
+        <button
+          type="button"
+          className={`aa-script-tab${scriptTab === "library" ? " active" : ""}`}
+          onClick={() => setScriptTab("library")}
+        >
+          从文案库选择
+        </button>
+        <button
+          type="button"
+          className={`aa-script-tab${scriptTab === "manual" ? " active" : ""}`}
+          onClick={() => setScriptTab("manual")}
+        >
+          手动输入
+        </button>
+      </div>
+
+      {scriptTab === "library" && (
+        <button
+          type="button"
+          className="aa-btn aa-btn--ghost aa-btn--full"
+          style={{ marginBottom: 8 }}
+          onClick={onOpenScriptModal}
+        >
+          📚 从文案库选择文案
+        </button>
+      )}
+
+      <textarea
+        className="aa-textarea"
+        value={scriptText}
+        readOnly={scriptTab === "library"}
+        placeholder={
+          scriptTab === "library" ? "点击上方按钮，从文案库选择文案…" : "请输入数字人口播文案…"
+        }
+        onChange={(e) => onScriptTextChange(e.target.value)}
+      />
+      <div className="aa-char-count">{scriptText.length} 字</div>
+
+      {/* ── B-roll 画面 ── */}
+      <div className="aa-lipsync-section">
+        <div className="aa-lipsync-section__title">
+          <span style={{ marginRight: 8 }}>🎞️ 插入画面</span>
+          {bRollSegments.length > 0 && (
+            <span className="aa-broll-badge">🎬 {bRollSegments.length} 个画面</span>
+          )}
+        </div>
+        <div className="aa-lipsync-actions">
+          <button
+            type="button"
+            className="aa-btn aa-btn--primary aa-btn--full"
+            onClick={onOpenBRollModal}
+          >
+            🎬 插入画面
+          </button>
+        </div>
+
+        {bRollSegments.length > 0 && (
+          <div className="aa-broll-list">
+            {bRollSegments.map((seg) => (
+              <div key={seg.id} className="aa-broll-item">
+                {seg.asset.thumbnail_url || seg.asset.file_url ? (
+                  <img
+                    className="aa-broll-item__thumb"
+                    src={seg.asset.thumbnail_url || seg.asset.file_url}
+                    alt={seg.asset.name}
+                  />
+                ) : (
+                  <span className="aa-broll-item__thumb" style={{ padding: "6px 4px" }}>
+                    🎬
+                  </span>
+                )}
+                <div className="aa-broll-item__info">
+                  <div
+                    style={{
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {seg.asset.name}
+                  </div>
+                  <div style={{ fontSize: 11, color: "#8c8ca1", marginTop: 2 }}>
+                    {BROLL_MODE_LABEL[seg.mode]} · {formatTime(seg.start_time)}-
+                    {formatTime(seg.end_time)}
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  className="aa-broll-item__remove"
+                  title="删除"
+                  onClick={() => onRemoveBRoll(seg.id)}
+                >
+                  ✕
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* ── 下半区：对口型预览（竖屏 9:16） ── */}
+      <div className="aa-lipsync-section">
+        <div className="aa-lipsync-section__title">对口型预览</div>
+
+        <div className="aa-lipsync-preview">
+          {isDone && lipsyncJob?.output_video_url ? (
+            <video src={lipsyncJob.output_video_url} controls />
+          ) : isGenerating ? (
+            <div style={{ width: "80%", textAlign: "center", color: "#fff" }}>
+              <div style={{ fontSize: 13, marginBottom: 8 }}>
+                {statusText} {Math.round(lipsyncJob?.progress ?? 0)}%
+              </div>
+              <div className="aa-progress">
+                <div
+                  className="aa-progress__bar"
+                  style={{ width: `${lipsyncJob?.progress ?? 0}%` }}
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="aa-video-preview__placeholder">
+              {isFailed ? (
+                <>
+                  <div style={{ fontSize: 28, marginBottom: 8 }}>❌</div>
+                  <div>对口型生成失败</div>
+                  {lipsyncJob?.error_message && (
+                    <div style={{ fontSize: 11, marginTop: 4, color: "#fca5a5" }}>
+                      {lipsyncJob.error_message}
+                    </div>
+                  )}
+                </>
+              ) : (
+                "生成对口型视频后在此预览"
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="aa-lipsync-actions">
+          {isDone ? (
+            <button type="button" className="aa-btn aa-btn--full" onClick={onGenerateLipsync}>
+              🔄 重新生成对口型
+            </button>
+          ) : isGenerating ? (
+            <button type="button" className="aa-btn aa-btn--full" disabled>
+              对口型生成中…
+            </button>
+          ) : (
+            <button
+              type="button"
+              className="aa-btn aa-btn--primary aa-btn--full"
+              onClick={onGenerateLipsync}
+            >
+              🎬 生成对口型视频
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PanelScriptAndLipsync

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

@@ -0,0 +1,134 @@
+/**
+ * AI数字人 — 面板4：标题配置
+ *
+ * 关键：直接复用智能剪辑（generate）模块的 TitleStylePanel 标题样式面板，
+ * 不重新开发标题预设/字体/位置等样式能力。本组件只负责：
+ * - 主标题文字输入
+ * - AiAvatarTitleConfig ↔ TitleSettings 的双向适配
+ * - 自动生成字幕开关
+ */
+import React, { useMemo, useState, useEffect } from "react"
+import { Input } from "antd"
+import TitleStylePanel from "@/pages/generate/components/title/TitleStylePanel"
+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 type { AiAvatarTitleConfig } from "../types"
+import { getTitles } from "@/api/titles"
+
+const { TextArea } = Input
+
+interface PanelTitleConfigProps {
+  titleConfig: AiAvatarTitleConfig
+  onUpdate: (partial: Partial<AiAvatarTitleConfig>) => void
+}
+
+const PanelTitleConfig: React.FC<PanelTitleConfigProps> = ({ titleConfig, onUpdate }) => {
+  /** TitleStylePanel 内部高亮的预设 key（面板本地状态） */
+  const [activePreset, setActivePreset] = useState<string | null>(null)
+
+  /** 标题库选项（复用智能剪辑的标题库） */
+  const [titleOptions, setTitleOptions] = useState<TitleOption[]>([])
+  useEffect(() => {
+    getTitles()
+      .then((items) => setTitleOptions(items.map((t) => ({ label: t.content, value: t.content }))))
+      .catch(() => setTitleOptions([]))
+  }, [])
+
+  /** AiAvatarTitleConfig → TitleSettings（补齐 aiAutoSelect / 自由坐标字段） */
+  const titleSettings: TitleSettings = useMemo(
+    () => ({
+      aiAutoSelect: false,
+      title: titleConfig.title,
+      position: titleConfig.position,
+      font: titleConfig.font,
+      size: titleConfig.size,
+      bold: titleConfig.bold,
+      italic: titleConfig.italic,
+      stroke: titleConfig.stroke,
+      shadow: titleConfig.shadow,
+      color: titleConfig.color,
+      posX: null,
+      posY: null,
+    }),
+    [titleConfig],
+  )
+
+  /** 应用预设：与智能剪辑一致，只覆盖 color/bold/italic/stroke/shadow，不改变字号 */
+  const handleApplyPreset = (presetKey: string) => {
+    const preset = TITLE_PRESETS.find((p) => p.key === presetKey)
+    if (!preset) return
+    setActivePreset(presetKey)
+    onUpdate({
+      color: preset.style.color,
+      bold: preset.style.bold,
+      italic: preset.style.italic,
+      stroke: preset.style.stroke,
+      shadow: preset.style.shadow,
+    })
+  }
+
+  return (
+    <div className="aa-title-config">
+      {/* 主标题输入 — TextArea 多行 + 标题库选择 */}
+      <div className="aa-form-field">
+        <label className="aa-label">主标题</label>
+        <TextArea
+          className="aa-title-input"
+          placeholder="输入视频标题（支持 / 分行）"
+          value={titleConfig.title}
+          autoSize={{ minRows: 2, maxRows: 4 }}
+          maxLength={200}
+          onChange={(e) => onUpdate({ title: e.target.value })}
+          style={{ fontSize: 15 }}
+        />
+        <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 8 }}>
+          <span style={{ fontSize: 12, color: "#8c8ca1", whiteSpace: "nowrap" }}>📚 标题库</span>
+          <TitleLibraryAutoComplete
+            key={titleConfig.title}
+            placeholder="选择标题填入上方"
+            value=""
+            onChange={(val) => {
+              if (val) onUpdate({ title: val })
+            }}
+            options={titleOptions}
+            maxLength={200}
+            style={{ flex: 1 }}
+          />
+        </div>
+      </div>
+
+      {/* 标题样式：直接复用智能剪辑 TitleStylePanel（位置/字体/字号/样式/预设） */}
+      <TitleStylePanel
+        settings={titleSettings}
+        onUpdatePosition={(position) => onUpdate({ position })}
+        onUpdateFont={(font) => onUpdate({ font })}
+        onUpdateSize={(size) => onUpdate({ size: Math.min(128, Math.max(16, size)) })}
+        onToggleBold={() => onUpdate({ bold: !titleConfig.bold })}
+        onToggleItalic={() => onUpdate({ italic: !titleConfig.italic })}
+        onToggleStroke={() => onUpdate({ stroke: !titleConfig.stroke })}
+        onToggleShadow={() => onUpdate({ shadow: !titleConfig.shadow })}
+        onApplyPreset={handleApplyPreset}
+        activePreset={activePreset}
+        titlePresets={TITLE_PRESETS}
+        POSITION_OPTIONS={POSITION_OPTIONS}
+        FONT_OPTIONS={FONT_OPTIONS}
+      />
+
+      {/* 自动生成字幕 */}
+      <div className="aa-subtitle-toggle">
+        <label className="aa-checkbox-row">
+          <input
+            type="checkbox"
+            checked={titleConfig.auto_subtitle}
+            onChange={(e) => onUpdate({ auto_subtitle: e.target.checked })}
+          />
+          自动生成字幕
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export default PanelTitleConfig

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

@@ -0,0 +1,124 @@
+/**
+ * AI数字人 — 出镜视频选择面板
+ * - 未选视频：虚线上传区，点击打开素材库弹窗
+ * - 已选视频：竖屏 9:16 预览播放器 + 视频信息卡片 + 移除按钮
+ */
+import type { AssetItem } from "@/api/assets"
+import type { AiAvatarTitleConfig } from "../types"
+import { getFontFamily } from "@/pages/generate/constants"
+
+export interface PanelVideoSelectorProps {
+  selectedVideo: AssetItem | null
+  /** 触发打开素材库弹窗 */
+  onSelectVideo: () => void
+  onRemoveVideo: () => void
+  titleConfig?: AiAvatarTitleConfig
+}
+
+/** 格式化时长（秒 → mm:ss） */
+function formatDuration(seconds?: number): string {
+  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds <= 0) {
+    return "00:00"
+  }
+  return `${Math.floor(seconds / 60)}:${String(Math.floor(seconds % 60)).padStart(2, "0")}`
+}
+
+export function PanelVideoSelector({
+  selectedVideo,
+  onSelectVideo,
+  onRemoveVideo,
+  titleConfig,
+}: PanelVideoSelectorProps) {
+  /* 未选视频：虚线上传区，点击打开素材库弹窗 */
+  if (!selectedVideo) {
+    return (
+      <div
+        className="aa-upload-zone"
+        role="button"
+        tabIndex={0}
+        onClick={onSelectVideo}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault()
+            onSelectVideo()
+          }
+        }}
+      >
+        <div className="aa-upload-zone__icon">🎬</div>
+        <div className="aa-upload-zone__text">从素材库选择视频</div>
+      </div>
+    )
+  }
+
+  const width = selectedVideo.metadata?.width
+  const height = selectedVideo.metadata?.height
+  const duration = selectedVideo.duration ?? selectedVideo.metadata?.duration
+  const fileUrl = selectedVideo.file_url ?? ""
+
+  return (
+    <div>
+      {/* 竖屏 9:16 视频预览播放器 + 标题实时预览 */}
+      <div className="aa-video-preview" style={{ position: "relative" }}>
+        {fileUrl ? (
+          <video src={fileUrl} poster={selectedVideo.thumbnail_url} controls playsInline />
+        ) : (
+          <div className="aa-video-preview__placeholder">视频暂不可预览</div>
+        )}
+        {titleConfig?.title && (
+          <div
+            style={{
+              position: "absolute",
+              left: "50%",
+              transform: "translateX(-50%)",
+              ...(titleConfig.position === "top"
+                ? { top: "10%" }
+                : titleConfig.position === "bottom"
+                  ? { bottom: "10%" }
+                  : { top: "50%", transform: "translate(-50%, -50%)" }),
+              fontSize: Math.max(titleConfig.size, 32),
+              fontFamily: getFontFamily(titleConfig.font),
+              color: titleConfig.color,
+              fontWeight: titleConfig.bold ? 700 : 400,
+              fontStyle: titleConfig.italic ? "italic" : "normal",
+              textShadow: "0 2px 4px rgba(0,0,0,0.5)",
+              WebkitTextStroke: "2px #000",
+              pointerEvents: "none",
+              zIndex: 10,
+              maxWidth: "90%",
+              textAlign: "center",
+              whiteSpace: "pre-wrap",
+              lineHeight: 1.3,
+            }}
+          >
+            {titleConfig.title}
+          </div>
+        )}
+      </div>
+
+      {/* 视频信息卡片：文件名 / 时长 / 分辨率 */}
+      <div className="aa-video-info">
+        <div className="aa-video-info__row">
+          <span>文件名</span>
+          <span title={selectedVideo.name}>{selectedVideo.name}</span>
+        </div>
+        <div className="aa-video-info__row">
+          <span>时长</span>
+          <span>{formatDuration(duration)}</span>
+        </div>
+        <div className="aa-video-info__row">
+          <span>分辨率</span>
+          <span>{width && height ? `${width}×${height}` : "—"}</span>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        className="aa-btn aa-btn--danger aa-btn--full"
+        style={{ marginTop: 10 }}
+        onClick={onRemoveVideo}
+      >
+        移除视频
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,334 @@
+/**
+ * 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 type { UnifiedVoiceItem } from "@/api/voices/types"
+import {
+  type VoiceSource,
+  type VoiceEmotion,
+  type VoiceLanguage,
+  VOICE_EMOTION_OPTIONS,
+  VOICE_LANGUAGE_OPTIONS,
+} from "../types"
+
+interface PanelVoiceSelectorProps {
+  voiceSource: VoiceSource
+  onVoiceSourceChange: (source: VoiceSource) => void
+  selectedVoice: UnifiedVoiceItem | null
+  onSelectVoice: (voice: UnifiedVoiceItem) => void
+  emotion: VoiceEmotion
+  onEmotionChange: (e: VoiceEmotion) => void
+  speed: number
+  onSpeedChange: (s: number) => void
+  language: VoiceLanguage
+  onLanguageChange: (l: VoiceLanguage) => void
+}
+
+export function PanelVoiceSelector({
+  voiceSource,
+  onVoiceSourceChange,
+  selectedVoice,
+  onSelectVoice,
+  emotion,
+  onEmotionChange,
+  speed,
+  onSpeedChange,
+  language,
+  onLanguageChange,
+}: PanelVoiceSelectorProps) {
+  const [voices, setVoices] = useState<UnifiedVoiceItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [previewingId, setPreviewingId] = useState<string | null>(null)
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  /** 克隆音色试听合成缓存：voiceId -> url，对齐配音库 useAudioPlayer */
+  const previewCacheRef = useRef<Map<string, string>>(new Map())
+  const VOICE_PREVIEW_TEXT = "你好呀，欢迎使用小虾智剪，这是我的配音效果，希望你喜欢。"
+
+  /* 切换来源时重新获取音色列表 */
+  useEffect(() => {
+    let cancelled = false
+    const loadVoices = async () => {
+      setLoading(true)
+      setError(null)
+      try {
+        const res = await fetchVoices({ type: voiceSource })
+        if (!cancelled) setVoices(Array.isArray(res?.items) ? res.items : [])
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : "音色加载失败")
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    loadVoices()
+    return () => {
+      cancelled = true
+    }
+  }, [voiceSource])
+
+  /* 卸载时停止试听 */
+  useEffect(() => {
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause()
+        audioRef.current = null
+      }
+    }
+  }, [])
+
+  const stopPreview = () => {
+    if (audioRef.current) {
+      audioRef.current.pause()
+      audioRef.current = null
+    }
+    setPreviewingId(null)
+  }
+
+  const NO_PREVIEW_TIP = "该音色暂无试听音频，请先用此音色生成一段配音后再试听"
+
+  /** 用指定 URL 真实播放（抽取公共） */
+  const playAudioUrl = (voiceId: string, url: string) => {
+    // 临时兼容：后端 /tts/preview 返回 HTTP URL，staging 是 HTTPS，Mixed Content 会阻止加载
+    // OSS 同时支持 HTTP/HTTPS，直接替换协议即可
+    const safeUrl = url.startsWith("http://") ? url.replace("http://", "https://") : url
+    if (audioRef.current) {
+      audioRef.current.pause()
+      audioRef.current = null
+    }
+    const audio = new Audio(safeUrl)
+    audioRef.current = audio
+    setPreviewingId(voiceId)
+    audio.onended = () => {
+      if (audioRef.current === audio) {
+        audioRef.current = null
+        setPreviewingId(null)
+      }
+    }
+    audio.onerror = () => {
+      if (audioRef.current === audio) {
+        audioRef.current = null
+        setPreviewingId(null)
+        message.error("试听音频加载失败")
+      }
+    }
+    void audio.play().catch(() => {
+      setPreviewingId(null)
+      message.error("试听播放失败")
+    })
+  }
+
+  const handlePreview = async (voice: UnifiedVoiceItem) => {
+    /* 再次点击当前试听音色 → 停止 */
+    if (previewingId === voice.id) {
+      stopPreview()
+      return
+    }
+
+    /* 克隆音色：preview_url/audio_url 通常为空，需走 POST /tts/preview
+     * 现合成示例文案再播放，对齐配音库 useAudioPlayer 行为 */
+    if (voice.type === "clone") {
+      const cached = previewCacheRef.current.get(voice.voice_clone_profile_id || voice.id)
+      if (cached) {
+        playAudioUrl(voice.id, cached)
+        return
+      }
+      const targetId = voice.voice_clone_profile_id || voice.id
+      // DEBUG: 打印请求参数，帮助定位 /tts/preview 失败原因
+      console.log("[AI数字人-克隆试听] previewTts 请求:", {
+        voice_id: targetId,
+        voice_name: voice.name,
+        voice_type: voice.type,
+        voice_clone_profile_id: voice.voice_clone_profile_id,
+        voice_id_field: voice.voice_id,
+      })
+      setPreviewingId(voice.id)
+      try {
+        const res = await previewTts({
+          text: VOICE_PREVIEW_TEXT,
+          voice_id: targetId,
+          speed: speed, // 透传用户选择的语速（#1822）
+          emotion: normalizeEmotion(emotion), // 情绪中文→英文枚举
+        })
+        console.log("[AI数字人-克隆试听] previewTts 响应:", {
+          audio_url: res.audio_url?.substring(0, 80),
+          duration: res.duration,
+        })
+        if (!res.audio_url) {
+          setPreviewingId(null)
+          message.error("合成试听失败：未返回音频")
+          return
+        }
+        previewCacheRef.current.set(targetId, res.audio_url)
+        playAudioUrl(voice.id, res.audio_url)
+      } catch (err) {
+        setPreviewingId(null)
+        // DEBUG: 打印详细错误信息
+        console.error("[AI数字人-克隆试听] previewTts 失败:", {
+          status: (err as { response?: { status?: number } })?.response?.status,
+          data: (err as { response?: { data?: unknown } })?.response?.data,
+          message: err instanceof Error ? err.message : String(err),
+        })
+        // apiClient 拦截器已统一 toast
+      }
+      return
+    }
+
+    /* 系统预设音色：沿用 preview_url/audio_url 直链播放 */
+    const url = voice.preview_url || voice.audio_url
+    if (!url) {
+      message.warning(NO_PREVIEW_TIP)
+      return
+    }
+    playAudioUrl(voice.id, url)
+  }
+
+  const handleSpeedChange = (value: string) => {
+    const parsed = parseFloat(value)
+    if (Number.isNaN(parsed)) return
+    const clamped = Math.min(2.0, Math.max(0.5, parsed))
+    onSpeedChange(clamped)
+  }
+
+  return (
+    <div className="aa-voice-selector">
+      {/* 音色来源切换 */}
+      <div className="aa-voice-source-toggle">
+        <button
+          type="button"
+          className={`aa-voice-source-btn${voiceSource === "preset" ? " active" : ""}`}
+          onClick={() => onVoiceSourceChange("preset")}
+        >
+          系统预设
+        </button>
+        <button
+          type="button"
+          className={`aa-voice-source-btn${voiceSource === "clone" ? " active" : ""}`}
+          onClick={() => onVoiceSourceChange("clone")}
+        >
+          我的音色
+        </button>
+      </div>
+
+      {/* 音色列表 */}
+      {loading ? (
+        <div className="aa-empty">
+          <div className="aa-empty__icon">⏳</div>
+          <div>音色加载中…</div>
+        </div>
+      ) : error ? (
+        <div className="aa-empty">
+          <div className="aa-empty__icon">⚠️</div>
+          <div>{error}</div>
+        </div>
+      ) : voices.length === 0 ? (
+        <div className="aa-empty">
+          <div className="aa-empty__icon">🎙️</div>
+          <div>{voiceSource === "clone" ? "还没有克隆音色" : "暂无预置音色"}</div>
+        </div>
+      ) : (
+        <div className="aa-voice-list">
+          {voices.map((voice) => {
+            const selected = selectedVoice?.id === voice.id
+            const previewUrl = voice.preview_url || voice.audio_url
+            return (
+              <div
+                key={voice.id}
+                className={`aa-voice-card${selected ? " selected" : ""}`}
+                onClick={() => onSelectVoice(voice)}
+              >
+                <span className="aa-voice-card__radio" />
+                <div className="aa-voice-card__info">
+                  <div className="aa-voice-card__name">{voice.name}</div>
+                  {voice.description && (
+                    <div className="aa-voice-card__desc">{voice.description}</div>
+                  )}
+                </div>
+                <button
+                  type="button"
+                  className="aa-voice-card__preview"
+                  title={previewingId === voice.id ? "停止试听" : "试听"}
+                  disabled={voice.type === "preset" && !previewUrl}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handlePreview(voice)
+                  }}
+                >
+                  {previewingId === voice.id ? "⏸" : "▶"}
+                </button>
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {/* 我的音色：克隆入口 */}
+      {voiceSource === "clone" && (
+        <div className="aa-clone-entry">
+          <a href="/app/voice-clone">+ 克隆新音色</a>
+        </div>
+      )}
+
+      {/* 配音参数 */}
+      <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">
+              语言
+            </label>
+            <select
+              id="aa-voice-language"
+              className="aa-select"
+              value={language}
+              onChange={(e) => onLanguageChange(e.target.value as VoiceLanguage)}
+            >
+              {VOICE_LANGUAGE_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div className="aa-voice-params__field">
+          <label className="aa-label" htmlFor="aa-voice-speed">
+            语速（{speed.toFixed(1)}x）
+          </label>
+          <input
+            id="aa-voice-speed"
+            type="number"
+            className="aa-input"
+            min={0.5}
+            max={2.0}
+            step={0.1}
+            value={speed}
+            onChange={(e) => handleSpeedChange(e.target.value)}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PanelVoiceSelector

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

@@ -1,189 +0,0 @@
-import { useState, useCallback } from "react"
-import type { Script, LipsyncJob } from "../types/aiAvatar"
-
-interface ScriptLipsyncPanelProps {
-  selectedScript: Script | null
-  setSelectedScript: (s: Script | null) => void
-  scriptContent: string
-  setScriptContent: (content: string) => void
-  lipsyncJob: LipsyncJob | null
-  setLipsyncJob: (job: LipsyncJob | null) => void
-  onOpenScriptModal: () => void
-  onOpenBRollModal: () => void
-  collapsed: boolean
-  onToggleCollapse: () => void
-}
-
-type ScriptTab = "library" | "manual"
-
-/** 对口型状态标签 */
-const LIPSYNC_STATUS_LABEL: Record<string, string> = {
-  pending: "等待中",
-  processing: "处理中",
-  completed: "已完成",
-  failed: "失败",
-}
-
-const LIPSYNC_STATUS_CLASS: Record<string, string> = {
-  pending: "processing",
-  processing: "processing",
-  completed: "completed",
-  failed: "failed",
-}
-
-const ScriptLipsyncPanel: React.FC<ScriptLipsyncPanelProps> = ({
-  selectedScript,
-  setSelectedScript,
-  scriptContent,
-  setScriptContent,
-  lipsyncJob,
-  setLipsyncJob,
-  onOpenScriptModal,
-  onOpenBRollModal,
-  collapsed,
-  onToggleCollapse,
-}) => {
-  const [activeTab, setActiveTab] = useState<ScriptTab>("manual")
-
-  const handleTabChange = useCallback(
-    (tab: ScriptTab) => {
-      setActiveTab(tab)
-      if (tab === "library") {
-        onOpenScriptModal()
-      }
-    },
-    [onOpenScriptModal],
-  )
-
-  const handleScriptChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setScriptContent(e.target.value)
-      // 清除已选脚本（用户手动输入时）
-      if (selectedScript) {
-        setSelectedScript(null)
-      }
-    },
-    [setScriptContent, selectedScript, setSelectedScript],
-  )
-
-  const handleRegenerateLipsync = useCallback(() => {
-    // TODO: 调用实际的对口型 API
-    if (!scriptContent) {
-      alert("请先输入文案内容")
-      return
-    }
-    // 模拟创建对口型任务
-    const newJob: LipsyncJob = {
-      id: `lipsync-${Date.now()}`,
-      status: "pending",
-      video_url: "",
-      audio_url: "",
-      output_video_url: "",
-      output_duration: 0,
-      error_message: "",
-      submitted_at: new Date().toISOString(),
-    }
-    setLipsyncJob(newJob)
-
-    // 模拟处理流程
-    setTimeout(() => {
-      setLipsyncJob({ ...newJob, status: "processing" })
-    }, 1000)
-
-    setTimeout(() => {
-      setLipsyncJob({
-        ...newJob,
-        status: "completed",
-        output_video_url: "",
-        output_duration: 30,
-        completed_at: new Date().toISOString(),
-      })
-    }, 5000)
-  }, [scriptContent, setLipsyncJob])
-
-  return (
-    <div className={`ai-avatar-panel panel-script-lipsync ${collapsed ? "collapsed" : ""}`}>
-      <div className="ai-avatar-panel-header" onClick={onToggleCollapse}>
-        <h3>文案 & 对口型</h3>
-        <button className="collapse-btn">◀</button>
-      </div>
-      <div className="ai-avatar-panel-body">
-        {/* 上半区：文案编辑 */}
-        <div className="ai-avatar-script-tabs">
-          <button
-            className={activeTab === "library" ? "active" : ""}
-            onClick={() => handleTabChange("library")}
-          >
-            从文案库选择
-          </button>
-          <button
-            className={activeTab === "manual" ? "active" : ""}
-            onClick={() => handleTabChange("manual")}
-          >
-            手动输入
-          </button>
-        </div>
-
-        {selectedScript && activeTab === "library" && (
-          <div style={{ marginBottom: 8, fontSize: 13, color: "#999" }}>
-            已选择：{selectedScript.title}
-          </div>
-        )}
-
-        <textarea
-          className="ai-avatar-script-editor"
-          placeholder="请输入视频文案内容..."
-          value={scriptContent}
-          onChange={handleScriptChange}
-          disabled={activeTab === "library"}
-        />
-        <div className="ai-avatar-script-word-count">{scriptContent.length} 字</div>
-
-        {/* 下半区：对口型预览 */}
-        <div className="ai-avatar-lipsync-section">
-          <h4>对口型预览</h4>
-
-          {/* 视频预览区域 */}
-          {lipsyncJob?.output_video_url && (
-            <div className="ai-avatar-media-preview">
-              <video src={lipsyncJob.output_video_url} controls />
-            </div>
-          )}
-
-          {/* 状态标签 */}
-          {lipsyncJob && (
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                marginTop: 8,
-              }}
-            >
-              <span
-                className={`ai-avatar-status-badge ${LIPSYNC_STATUS_CLASS[lipsyncJob.status] || ""}`}
-              >
-                {LIPSYNC_STATUS_LABEL[lipsyncJob.status] || lipsyncJob.status}
-              </span>
-              {lipsyncJob.error_message && (
-                <span style={{ fontSize: 12, color: "#ef4444" }}>{lipsyncJob.error_message}</span>
-              )}
-            </div>
-          )}
-
-          {/* 操作按钮 */}
-          <div className="ai-avatar-lipsync-actions">
-            <button className="aa-btn aa-btn-sm" onClick={onOpenBRollModal}>
-              🎬 插入画面
-            </button>
-            <button className="aa-btn aa-btn-sm aa-btn-primary" onClick={handleRegenerateLipsync}>
-              重新生成对口型
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ScriptLipsyncPanel

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

@@ -1,122 +0,0 @@
-/**
- * 文案选择弹窗
- * 搜索 + 文案列表 + 选择回调
- */
-import React, { useCallback, useEffect, useState } from "react"
-import type { Script } from "../types/aiAvatar"
-import { getScripts } from "../api/aiAvatar"
-
-interface ScriptSelectModalProps {
-  open: boolean
-  onClose: () => void
-  onSelect: (script: Script) => void
-}
-
-const ScriptSelectModal: React.FC<ScriptSelectModalProps> = ({ open, onClose, onSelect }) => {
-  const [searchText, setSearchText] = useState("")
-  const [scripts, setScripts] = useState<Script[]>([])
-  const [loading, setLoading] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-
-  /* 加载文案列表 */
-  const fetchScripts = useCallback(async () => {
-    setLoading(true)
-    try {
-      const result = await getScripts({ search: searchText || undefined })
-      setScripts(result.items)
-    } catch {
-      setScripts([])
-    } finally {
-      setLoading(false)
-    }
-  }, [searchText])
-
-  useEffect(() => {
-    if (open) {
-      setSearchText("")
-      setSelectedId(null)
-      fetchScripts()
-    }
-  }, [open, fetchScripts])
-
-  /* 搜索防抖 */
-  useEffect(() => {
-    if (!open) return
-    const timer = setTimeout(() => {
-      fetchScripts()
-    }, 300)
-    return () => clearTimeout(timer)
-  }, [searchText, open, fetchScripts])
-
-  const handleSelect = useCallback(
-    (script: Script) => {
-      setSelectedId(script.id)
-      onSelect(script)
-      onClose()
-    },
-    [onSelect, onClose],
-  )
-
-  /* 格式化时间 */
-  const formatDate = (dateStr: string): string => {
-    const date = new Date(dateStr)
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`
-  }
-
-  if (!open) return null
-
-  return (
-    <div className="ai-avatar-modal-overlay" onClick={onClose}>
-      <div className="ai-avatar-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="ai-avatar-modal-header">
-          <h3>选择文案</h3>
-          <button className="aa-btn aa-btn-sm" onClick={onClose}>
-            ✕
-          </button>
-        </div>
-
-        <div className="ai-avatar-modal-body">
-          {/* 搜索栏 + 新建文案 */}
-          <div className="ai-avatar-script-search">
-            <input
-              type="text"
-              placeholder="搜索文案标题..."
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-            />
-            <button className="aa-btn aa-btn-primary">新建文案</button>
-          </div>
-
-          {/* 文案列表 */}
-          {loading ? (
-            <div style={{ textAlign: "center", padding: 32, color: "#999", fontSize: 13 }}>
-              加载中...
-            </div>
-          ) : scripts.length === 0 ? (
-            <div style={{ textAlign: "center", padding: 32, color: "#999", fontSize: 13 }}>
-              暂无文案
-            </div>
-          ) : (
-            scripts.map((script) => (
-              <div
-                key={script.id}
-                className={`ai-avatar-script-item ${selectedId === script.id ? "selected" : ""}`}
-                onClick={() => handleSelect(script)}
-              >
-                <div className="ai-avatar-script-item-info">
-                  <h4>{script.title}</h4>
-                  <span>
-                    {script.content.length}字 · {formatDate(script.created_at)}
-                  </span>
-                </div>
-                <button className="aa-btn aa-btn-sm aa-btn-primary">选择</button>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ScriptSelectModal

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

@@ -1,250 +0,0 @@
-/**
- * 面板4：标题配置
- * 主标题输入 + 复用 TitleStylePanel + 字幕设置
- */
-import React, { useCallback, useMemo, useState } from "react"
-import type { AiAvatarTitleConfig } from "../types/aiAvatar"
-import type { TitleSettings, TitlePreset } from "@/pages/generate/types"
-import TitleStylePanel from "@/pages/generate/components/title/TitleStylePanel"
-
-interface TitleConfigPanelProps {
-  titleConfig: AiAvatarTitleConfig
-  setTitleConfig: (c: AiAvatarTitleConfig) => void
-  collapsed: boolean
-  onToggleCollapse: () => void
-}
-
-/* ── 位置选项 ── */
-const POSITION_OPTIONS = [
-  { value: "top", label: "顶部" },
-  { value: "center", label: "居中" },
-  { value: "bottom", label: "底部" },
-  { value: "top-left", label: "左上" },
-  { value: "top-right", label: "右上" },
-  { value: "bottom-left", label: "左下" },
-  { value: "bottom-right", label: "右下" },
-  { value: "custom", label: "自由位置" },
-]
-
-/* ── 字体选项 ── */
-const FONT_OPTIONS = [
-  "思源黑体",
-  "思源宋体",
-  "阿里巴巴普惠体",
-  "站酷高端黑",
-  "站酷快乐体",
-  "方正兰亭黑",
-  "方正楷体",
-  "汉仪旗黑",
-]
-
-/* ── 标题预设 ── */
-const titlePresets: TitlePreset[] = [
-  {
-    key: "default",
-    label: "默认",
-    style: { size: 36, color: "#ffffff", bold: false, italic: false, stroke: false, shadow: false },
-    previewStyle: { fontSize: 16, color: "#ffffff", fontWeight: 400 },
-  },
-  {
-    key: "bold-white",
-    label: "粗体白",
-    style: { size: 48, color: "#ffffff", bold: true, italic: false, stroke: false, shadow: true },
-    previewStyle: { fontSize: 18, color: "#ffffff", fontWeight: 700 },
-  },
-  {
-    key: "highlight-yellow",
-    label: "高亮黄",
-    style: { size: 44, color: "#FFD700", bold: true, italic: false, stroke: true, shadow: false },
-    previewStyle: { fontSize: 17, color: "#FFD700", fontWeight: 700 },
-  },
-  {
-    key: "elegant-serif",
-    label: "优雅宋体",
-    style: { size: 40, color: "#f0f0f0", bold: false, italic: true, stroke: false, shadow: true },
-    previewStyle: { fontSize: 16, color: "#f0f0f0", fontStyle: "italic", fontFamily: "serif" },
-  },
-  {
-    key: "impact",
-    label: "冲击力",
-    style: { size: 56, color: "#ff4444", bold: true, italic: false, stroke: true, shadow: true },
-    previewStyle: { fontSize: 20, color: "#ff4444", fontWeight: 900 },
-  },
-]
-
-/** 将 AiAvatarTitleConfig 适配为 TitleSettings */
-function toTitleSettings(config: AiAvatarTitleConfig): TitleSettings {
-  return {
-    aiAutoSelect: false,
-    title: config.title,
-    position: config.position,
-    font: config.font,
-    size: config.size,
-    bold: config.bold,
-    italic: config.italic,
-    stroke: config.stroke,
-    shadow: config.shadow,
-    color: config.color,
-    posX: null,
-    posY: null,
-  }
-}
-
-/** 根据 preset key 找到对应的预设 */
-function findPresetByKey(key: string): TitlePreset | undefined {
-  return titlePresets.find((p) => p.key === key)
-}
-
-const TitleConfigPanel: React.FC<TitleConfigPanelProps> = ({
-  titleConfig,
-  setTitleConfig,
-  collapsed,
-  onToggleCollapse,
-}) => {
-  /* 字幕开关 */
-  const [subtitleEnabled, setSubtitleEnabled] = useState(false)
-  const [subtitleFont, setSubtitleFont] = useState("思源黑体")
-  const [subtitleSize, setSubtitleSize] = useState(24)
-
-  const titleSettings = useMemo(() => toTitleSettings(titleConfig), [titleConfig])
-
-  /* 当前激活的预设 */
-  const activePreset = useMemo(() => {
-    const match = titlePresets.find(
-      (p) =>
-        p.style.size === titleConfig.size &&
-        p.style.color === titleConfig.color &&
-        p.style.bold === titleConfig.bold &&
-        p.style.italic === titleConfig.italic &&
-        p.style.stroke === titleConfig.stroke &&
-        p.style.shadow === titleConfig.shadow,
-    )
-    return match ? match.key : null
-  }, [titleConfig])
-
-  /* 将 TitleStylePanel 的预设 key 映射回 titlePresets 项 */
-  const presetItems = useMemo(
-    () =>
-      titlePresets.map((p) => ({
-        key: p.key,
-        label: p.label,
-        previewStyle: p.previewStyle as React.CSSProperties,
-      })),
-    [],
-  )
-
-  const handleTitleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setTitleConfig({ ...titleConfig, title: e.target.value })
-    },
-    [titleConfig, setTitleConfig],
-  )
-
-  const handleApplyPreset = useCallback(
-    (presetKey: string) => {
-      const preset = findPresetByKey(presetKey)
-      if (!preset) return
-      setTitleConfig({
-        ...titleConfig,
-        size: preset.style.size,
-        color: preset.style.color,
-        bold: preset.style.bold,
-        italic: preset.style.italic,
-        stroke: preset.style.stroke,
-        shadow: preset.style.shadow,
-      })
-    },
-    [titleConfig, setTitleConfig],
-  )
-
-  return (
-    <div className={`ai-avatar-panel panel-title-config ${collapsed ? "collapsed" : ""}`}>
-      <div className="ai-avatar-panel-header" onClick={onToggleCollapse}>
-        <h3>标题配置</h3>
-        <button className="collapse-btn">◀</button>
-      </div>
-      <div className="ai-avatar-panel-body">
-        {/* 主标题输入 */}
-        <div style={{ marginBottom: 16 }}>
-          <label style={{ display: "block", fontSize: 13, color: "#999", marginBottom: 6 }}>
-            主标题
-          </label>
-          <input
-            className="ai-avatar-script-editor"
-            style={{ minHeight: "auto", padding: "8px 12px", fontSize: 14 }}
-            type="text"
-            placeholder="请输入视频标题"
-            value={titleConfig.title}
-            onChange={handleTitleChange}
-          />
-        </div>
-
-        {/* 复用标题样式面板 */}
-        <TitleStylePanel
-          settings={titleSettings}
-          onUpdatePosition={(position) => setTitleConfig({ ...titleConfig, position })}
-          onUpdateFont={(font) => setTitleConfig({ ...titleConfig, font })}
-          onUpdateSize={(size) => setTitleConfig({ ...titleConfig, size })}
-          onToggleBold={() => setTitleConfig({ ...titleConfig, bold: !titleConfig.bold })}
-          onToggleItalic={() => setTitleConfig({ ...titleConfig, italic: !titleConfig.italic })}
-          onToggleStroke={() => setTitleConfig({ ...titleConfig, stroke: !titleConfig.stroke })}
-          onToggleShadow={() => setTitleConfig({ ...titleConfig, shadow: !titleConfig.shadow })}
-          onApplyPreset={handleApplyPreset}
-          activePreset={activePreset}
-          titlePresets={presetItems}
-          POSITION_OPTIONS={POSITION_OPTIONS}
-          FONT_OPTIONS={FONT_OPTIONS}
-        />
-
-        {/* 字幕区域 */}
-        <div className="ai-avatar-subtitle-section">
-          <label>
-            <input
-              type="checkbox"
-              checked={subtitleEnabled}
-              onChange={(e) => setSubtitleEnabled(e.target.checked)}
-            />
-            显示字幕
-          </label>
-
-          {subtitleEnabled && (
-            <div style={{ marginTop: 12 }}>
-              <div style={{ marginBottom: 8 }}>
-                <label style={{ display: "block", fontSize: 12, color: "#999", marginBottom: 4 }}>
-                  字幕字体
-                </label>
-                <select
-                  className="ai-avatar-script-editor"
-                  style={{ minHeight: "auto", padding: "6px 10px", fontSize: 13 }}
-                  value={subtitleFont}
-                  onChange={(e) => setSubtitleFont(e.target.value)}
-                >
-                  {FONT_OPTIONS.map((f) => (
-                    <option key={f} value={f}>
-                      {f}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div>
-                <label style={{ display: "block", fontSize: 12, color: "#999", marginBottom: 4 }}>
-                  字幕大小：{subtitleSize}px
-                </label>
-                <input
-                  type="range"
-                  min={12}
-                  max={72}
-                  value={subtitleSize}
-                  onChange={(e) => setSubtitleSize(Number(e.target.value))}
-                  style={{ width: "100%" }}
-                />
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default TitleConfigPanel

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

@@ -0,0 +1,97 @@
+/**
+ * AI数字人 — 标题库选择弹窗
+ * 复用智能剪辑的标题库 API，选择标题后填入输入框
+ */
+import React, { useEffect, useState } from "react"
+import { getTitles } from "@/api/titles"
+import type { TitleItem } from "@/api/titles/types"
+
+interface TitleLibraryModalProps {
+  open: boolean
+  onClose: () => void
+  onSelect: (title: string) => void
+}
+
+const TitleLibraryModal: React.FC<TitleLibraryModalProps> = ({ open, onClose, onSelect }) => {
+  const [titles, setTitles] = useState<TitleItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const [search, setSearch] = useState("")
+
+  useEffect(() => {
+    if (!open) return
+    setLoading(true)
+    getTitles()
+      .then((items) => setTitles(items))
+      .catch(() => setTitles([]))
+      .finally(() => setLoading(false))
+  }, [open])
+
+  const filtered = titles.filter(
+    (t) => !search || t.content.toLowerCase().includes(search.toLowerCase()),
+  )
+
+  if (!open) return null
+
+  return (
+    <div className="aa-modal-overlay" onClick={onClose}>
+      <div className="aa-modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 600 }}>
+        <div className="aa-modal__header">
+          <span className="aa-modal__title">从标题库选择</span>
+          <button className="aa-modal__close" onClick={onClose}></button>
+        </div>
+        <div className="aa-modal__body">
+          <div style={{ marginBottom: 12 }}>
+            <input
+              className="aa-input"
+              placeholder="搜索标题..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+          {loading ? (
+            <div style={{ textAlign: "center", padding: 40, color: "#8c8ca1" }}>加载中...</div>
+          ) : filtered.length === 0 ? (
+            <div style={{ textAlign: "center", padding: 40, color: "#8c8ca1" }}>
+              暂无标题，请先在标题库创建
+            </div>
+          ) : (
+            <div style={{ maxHeight: 400, overflowY: "auto" }}>
+              {filtered.map((t) => (
+                <div
+                  key={t.id}
+                  style={{
+                    padding: "12px 16px",
+                    marginBottom: 8,
+                    background: "#f8f8fc",
+                    borderRadius: 8,
+                    cursor: "pointer",
+                    transition: "background 0.2s",
+                  }}
+                  onMouseEnter={(e) => (e.currentTarget.style.background = "#eef0ff")}
+                  onMouseLeave={(e) => (e.currentTarget.style.background = "#f8f8fc")}
+                  onClick={() => {
+                    onSelect(t.content)
+                    onClose()
+                  }}
+                >
+                  <div style={{ fontSize: 14, color: "#1a1a2e", marginBottom: 4 }}>{t.content}</div>
+                  <div style={{ fontSize: 12, color: "#8c8ca1" }}>
+                    {t.word_count ?? t.content.length}字 ·{" "}
+                    {t.created_at ? new Date(t.created_at).toLocaleDateString() : ""}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="aa-modal__footer">
+          <button className="aa-btn" onClick={onClose}>
+            取消
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TitleLibraryModal

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

@@ -1,256 +0,0 @@
-import { useState, useRef, useCallback } from "react"
-import { uploadAssetDirect, ensureDefaultLibrary } from "@/api/assets"
-import { getOrCreateDefaultProject } from "@/api/projects"
-import type { VoiceCloneState, VoiceTone } from "../types/aiAvatar"
-
-interface VoiceClonePanelProps {
-  voiceClone: VoiceCloneState
-  setVoiceClone: (v: VoiceCloneState) => void
-  selectedVoiceId: string
-  setSelectedVoiceId: (id: string) => void
-  collapsed: boolean
-  onToggleCollapse: () => void
-}
-
-const MAX_AUDIO_SIZE = 50 * 1024 * 1024 // 50MB
-
-/** Mock 音色列表（后续接 API） */
-const MOCK_VOICES: VoiceTone[] = [
-  {
-    id: "voice-1",
-    name: "温柔女声",
-    description: "适合新闻播报和产品介绍",
-    gender: "女",
-    preview_url: "",
-  },
-  {
-    id: "voice-2",
-    name: "沉稳男声",
-    description: "适合企业宣传和培训视频",
-    gender: "男",
-    preview_url: "",
-  },
-  {
-    id: "voice-3",
-    name: "活泼女声",
-    description: "适合短视频和社交媒体内容",
-    gender: "女",
-    preview_url: "",
-  },
-]
-
-/** 状态文案映射 */
-const STATUS_LABEL: Record<VoiceCloneState["status"], string> = {
-  idle: "",
-  uploading: "正在上传音频...",
-  cloning: "正在克隆声音...",
-  completed: "声音克隆完成",
-  failed: "克隆失败，请重试",
-}
-
-const STATUS_CLASS: Record<string, string> = {
-  completed: "success",
-  cloning: "cloning",
-  failed: "failed",
-}
-
-const VoiceClonePanel: React.FC<VoiceClonePanelProps> = ({
-  voiceClone,
-  setVoiceClone,
-  selectedVoiceId,
-  setSelectedVoiceId,
-  collapsed,
-  onToggleCollapse,
-}) => {
-  const [dragOver, setDragOver] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  const handleUpload = useCallback(
-    async (file: File) => {
-      if (file.size > MAX_AUDIO_SIZE) {
-        alert("音频文件大小不能超过 50MB")
-        return
-      }
-      const isAudio = file.type.startsWith("audio/")
-      if (!isAudio) {
-        alert("请上传 WAV 或 MP3 格式的音频文件")
-        return
-      }
-
-      try {
-        setVoiceClone({ ...voiceClone, status: "uploading", progress: 0 })
-
-        // 获取或创建默认项目和配音库
-        const project = await getOrCreateDefaultProject()
-        const library = await ensureDefaultLibrary({
-          project_id: project.id,
-          kind: "voice",
-        })
-
-        // 上传音频
-        const audioUrl = URL.createObjectURL(file)
-        setVoiceClone({
-          ...voiceClone,
-          status: "uploading",
-          audioUrl,
-          audioName: file.name,
-          progress: 0,
-        })
-
-        await uploadAssetDirect({
-          file,
-          library_id: library.id,
-          onProgress: (p) => {
-            setVoiceClone({ ...voiceClone, audioUrl, audioName: file.name, progress: p })
-          },
-        })
-
-        // 开始克隆（模拟）
-        setVoiceClone({
-          ...voiceClone,
-          status: "cloning",
-          audioUrl,
-          audioName: file.name,
-          progress: 100,
-        })
-
-        // TODO: 调用实际的声音克隆 API
-        // 模拟克隆完成
-        setTimeout(() => {
-          setVoiceClone({
-            ...voiceClone,
-            status: "completed",
-            audioUrl,
-            audioName: file.name,
-            cloneJobId: `clone-${Date.now()}`,
-            voiceId: `voice-clone-${Date.now()}`,
-            progress: 100,
-          })
-        }, 3000)
-      } catch (err) {
-        const message = err instanceof Error ? err.message : "上传失败"
-        alert(message)
-        setVoiceClone({ ...voiceClone, status: "failed", progress: 0 })
-      }
-    },
-    [voiceClone, setVoiceClone],
-  )
-
-  const handleFileSelect = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const file = e.target.files?.[0]
-      if (file) {
-        handleUpload(file)
-      }
-      e.target.value = ""
-    },
-    [handleUpload],
-  )
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent<HTMLDivElement>) => {
-      e.preventDefault()
-      setDragOver(false)
-      const file = e.dataTransfer.files[0]
-      if (file) {
-        handleUpload(file)
-      }
-    },
-    [handleUpload],
-  )
-
-  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    setDragOver(true)
-  }, [])
-
-  const handleDragLeave = useCallback(() => {
-    setDragOver(false)
-  }, [])
-
-  const handleVoiceSelect = useCallback(
-    (voiceId: string) => {
-      setSelectedVoiceId(voiceId)
-    },
-    [setSelectedVoiceId],
-  )
-
-  const showStatus = voiceClone.status !== "idle" && voiceClone.status !== "uploading"
-
-  return (
-    <div className={`ai-avatar-panel panel-voice-clone ${collapsed ? "collapsed" : ""}`}>
-      <div className="ai-avatar-panel-header" onClick={onToggleCollapse}>
-        <h3>声音克隆</h3>
-        <button className="collapse-btn">◀</button>
-      </div>
-      <div className="ai-avatar-panel-body">
-        {/* 上传区域 */}
-        {voiceClone.audioUrl ? (
-          <div>
-            <div className="ai-avatar-media-preview">
-              <audio src={voiceClone.audioUrl} controls />
-            </div>
-            <div className="ai-avatar-media-info">
-              <span>{voiceClone.audioName}</span>
-            </div>
-          </div>
-        ) : (
-          <div
-            className={`ai-avatar-upload-zone ${dragOver ? "drag-over" : ""}`}
-            onClick={() => fileInputRef.current?.click()}
-            onDrop={handleDrop}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-          >
-            <span className="upload-icon">🎙️</span>
-            <div>点击或拖拽上传参考音频</div>
-            <div style={{ marginTop: 4, fontSize: 12 }}>WAV / MP3 格式，不超过 50MB</div>
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept="audio/wav,audio/mp3,audio/*"
-              onChange={handleFileSelect}
-              style={{ display: "none" }}
-            />
-          </div>
-        )}
-
-        {/* 克隆状态 */}
-        {showStatus && (
-          <div className={`ai-avatar-clone-status ${STATUS_CLASS[voiceClone.status] || ""}`}>
-            {voiceClone.status === "cloning" && "⏳ "}
-            {voiceClone.status === "completed" && "✅ "}
-            {voiceClone.status === "failed" && "❌ "}
-            {STATUS_LABEL[voiceClone.status]}
-          </div>
-        )}
-
-        {/* 上传中进度 */}
-        {voiceClone.status === "uploading" && (
-          <div style={{ marginTop: 12, fontSize: 13, color: "#999" }}>
-            上传中... {voiceClone.progress}%
-          </div>
-        )}
-
-        {/* 已有音色列表 */}
-        <div className="ai-avatar-voice-list">
-          <h4>已有音色</h4>
-          {MOCK_VOICES.map((voice) => (
-            <div
-              key={voice.id}
-              className={`ai-avatar-voice-item ${selectedVoiceId === voice.id ? "selected" : ""}`}
-              onClick={() => handleVoiceSelect(voice.id)}
-            >
-              <div>
-                <div style={{ fontSize: 13, color: "#fff" }}>{voice.name}</div>
-                <div style={{ fontSize: 12, color: "#999", marginTop: 2 }}>{voice.description}</div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default VoiceClonePanel

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

@@ -0,0 +1,141 @@
+/**
+ * AI数字人 — 页面全局状态管理 hook（v3）
+ */
+import { useState, useCallback } from "react"
+import type { AssetItem } from "@/api/assets"
+import type { UnifiedVoiceItem } from "@/api/voices/types"
+import {
+  type VoiceSource,
+  type VoiceEmotion,
+  type VoiceLanguage,
+  type Script,
+  type LipsyncJob,
+  type BRollSegment,
+  type AiAvatarTitleConfig,
+  type AiAvatarCoverConfig,
+  DEFAULT_TITLE_CONFIG,
+  DEFAULT_COVER_CONFIG,
+} from "../types"
+
+export function useAiAvatar() {
+  /* ── 面板1：出镜视频 ── */
+  const [selectedVideo, setSelectedVideo] = useState<AssetItem | null>(null)
+  const [showAssetPicker, setShowAssetPicker] = useState(false)
+
+  /* ── 面板2：配音库 ── */
+  const [voiceSource, setVoiceSource] = useState<VoiceSource>("preset")
+  const [selectedVoice, setSelectedVoice] = useState<UnifiedVoiceItem | null>(null)
+  const [emotion, setEmotion] = useState<VoiceEmotion>("natural")
+  const [speed, setSpeed] = useState(1.0)
+  const [language, setLanguage] = useState<VoiceLanguage>("mandarin")
+
+  /* ── 面板3：文案 & 对口型 ── */
+  const [script, setScript] = useState<Script | null>(null)
+  const [scriptText, setScriptText] = useState("")
+  const [lipsyncJob, setLipsyncJob] = useState<LipsyncJob | null>(null)
+  const [showScriptModal, setShowScriptModal] = useState(false)
+  const [showBRollModal, setShowBRollModal] = useState(false)
+
+  /* ── 面板3.5：B-roll ── */
+  const [bRollSegments, setBRollSegments] = useState<BRollSegment[]>([])
+
+  /* ── 面板4：标题配置 ── */
+  const [titleConfig, setTitleConfig] = useState<AiAvatarTitleConfig>(DEFAULT_TITLE_CONFIG)
+
+  /* ── 面板5：封面 & 生成 ── */
+  const [coverConfig, setCoverConfig] = useState<AiAvatarCoverConfig>(DEFAULT_COVER_CONFIG)
+  const [resolution, setResolution] = useState("1080p")
+  const [isGenerating, setIsGenerating] = useState(false)
+
+  /* ── Actions ── */
+  const selectVideo = useCallback((asset: AssetItem) => {
+    setSelectedVideo(asset)
+    setShowAssetPicker(false)
+  }, [])
+
+  const removeVideo = useCallback(() => {
+    setSelectedVideo(null)
+  }, [])
+
+  const selectScript = useCallback((s: Script) => {
+    setScript(s)
+    setScriptText(s.content)
+    setShowScriptModal(false)
+  }, [])
+
+  const addBRollSegment = useCallback((segment: BRollSegment) => {
+    setBRollSegments((prev) => [...prev, segment])
+  }, [])
+
+  const removeBRollSegment = useCallback((id: string) => {
+    setBRollSegments((prev) => prev.filter((s) => s.id !== id))
+  }, [])
+
+  const updateTitleConfig = useCallback((partial: Partial<AiAvatarTitleConfig>) => {
+    setTitleConfig((prev) => ({ ...prev, ...partial }))
+  }, [])
+
+  const reset = useCallback(() => {
+    setSelectedVideo(null)
+    setSelectedVoice(null)
+    setScript(null)
+    setScriptText("")
+    setLipsyncJob(null)
+    setBRollSegments([])
+    setTitleConfig(DEFAULT_TITLE_CONFIG)
+    setCoverConfig(DEFAULT_COVER_CONFIG)
+    setResolution("1080p")
+    setIsGenerating(false)
+  }, [])
+
+  return {
+    // 面板1
+    selectedVideo,
+    showAssetPicker,
+    setShowAssetPicker,
+    selectVideo,
+    removeVideo,
+    // 面板2
+    voiceSource,
+    setVoiceSource,
+    selectedVoice,
+    setSelectedVoice,
+    emotion,
+    setEmotion,
+    speed,
+    setSpeed,
+    language,
+    setLanguage,
+    // 面板3
+    script,
+    setScript,
+    scriptText,
+    setScriptText,
+    lipsyncJob,
+    setLipsyncJob,
+    showScriptModal,
+    setShowScriptModal,
+    showBRollModal,
+    setShowBRollModal,
+    selectScript,
+    // B-roll
+    bRollSegments,
+    addBRollSegment,
+    removeBRollSegment,
+    // 面板4
+    titleConfig,
+    updateTitleConfig,
+    setTitleConfig,
+    // 面板5
+    coverConfig,
+    setCoverConfig,
+    resolution,
+    setResolution,
+    isGenerating,
+    setIsGenerating,
+    // 全局
+    reset,
+  }
+}
+
+export type UseAiAvatarReturn = ReturnType<typeof useAiAvatar>

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

@@ -1,132 +0,0 @@
-/**
- * AI数字人页面全局状态管理 (#1798)
- */
-import { useState, useCallback } from "react"
-import type {
-  AvatarVideo,
-  VoiceCloneState,
-  Script,
-  LipsyncJob,
-  BRollSegment,
-  AiAvatarTitleConfig,
-  AiAvatarCoverConfig,
-  AiAvatarGenerateConfig,
-  AiAvatarRenderJob,
-} from "../types/aiAvatar"
-
-const DEFAULT_TITLE_CONFIG: AiAvatarTitleConfig = {
-  title: "",
-  font: "思源黑体",
-  size: 28,
-  color: "#ffffff",
-  position: "bottom",
-  bold: false,
-  italic: false,
-  stroke: false,
-  shadow: false,
-}
-
-const DEFAULT_COVER_CONFIG: AiAvatarCoverConfig = {
-  enabled: false,
-  mode: "auto",
-  frame_time: 0,
-  upload_url: "",
-  thumbnail_url: "",
-}
-
-const DEFAULT_VOICE_CLONE: VoiceCloneState = {
-  status: "idle",
-  audioUrl: "",
-  audioName: "",
-  cloneJobId: "",
-  voiceId: "",
-  progress: 0,
-}
-
-export function useAiAvatarState() {
-  /* ── 面板折叠状态 ── */
-  const [collapsedPanels, setCollapsedPanels] = useState<Record<string, boolean>>({})
-
-  const togglePanel = useCallback((key: string) => {
-    setCollapsedPanels((prev) => ({ ...prev, [key]: !prev[key] }))
-  }, [])
-
-  /* ── 面板1：出镜视频 ── */
-  const [avatarVideo, setAvatarVideo] = useState<AvatarVideo | null>(null)
-
-  /* ── 面板2：声音克隆 ── */
-  const [voiceClone, setVoiceClone] = useState<VoiceCloneState>(DEFAULT_VOICE_CLONE)
-  const [selectedVoiceId, setSelectedVoiceId] = useState<string>("")
-
-  /* ── 面板3：文案 & 对口型 ── */
-  const [selectedScript, setSelectedScript] = useState<Script | null>(null)
-  const [scriptContent, setScriptContent] = useState("")
-  const [lipsyncJob, setLipsyncJob] = useState<LipsyncJob | null>(null)
-  const [bRollSegments, setBRollSegments] = useState<BRollSegment[]>([])
-
-  /* ── 面板4：标题配置 ── */
-  const [titleConfig, setTitleConfig] = useState<AiAvatarTitleConfig>(DEFAULT_TITLE_CONFIG)
-
-  /* ── 面板5：封面 & 生成 ── */
-  const [coverConfig, setCoverConfig] = useState<AiAvatarCoverConfig>(DEFAULT_COVER_CONFIG)
-  const [generateConfig, setGenerateConfig] = useState<AiAvatarGenerateConfig>({
-    resolution: "1080p",
-    bRollMode: "pip",
-  })
-
-  /* ── 渲染任务 ── */
-  const [renderJob, setRenderJob] = useState<AiAvatarRenderJob | null>(null)
-  const [isGenerating, setIsGenerating] = useState(false)
-
-  /* ── 弹窗状态 ── */
-  const [scriptModalOpen, setScriptModalOpen] = useState(false)
-  const [brollModalOpen, setBrollModalOpen] = useState(false)
-
-  return {
-    // 面板折叠
-    collapsedPanels,
-    togglePanel,
-
-    // 面板1
-    avatarVideo,
-    setAvatarVideo,
-
-    // 面板2
-    voiceClone,
-    setVoiceClone,
-    selectedVoiceId,
-    setSelectedVoiceId,
-
-    // 面板3
-    selectedScript,
-    setSelectedScript,
-    scriptContent,
-    setScriptContent,
-    lipsyncJob,
-    setLipsyncJob,
-    bRollSegments,
-    setBRollSegments,
-
-    // 面板4
-    titleConfig,
-    setTitleConfig,
-
-    // 面板5
-    coverConfig,
-    setCoverConfig,
-    generateConfig,
-    setGenerateConfig,
-
-    // 渲染
-    renderJob,
-    setRenderJob,
-    isGenerating,
-    setIsGenerating,
-
-    // 弹窗
-    scriptModalOpen,
-    setScriptModalOpen,
-    brollModalOpen,
-    setBrollModalOpen,
-  }
-}

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

@@ -0,0 +1,131 @@
+/**
+ * AI数字人 — TypeScript 类型定义（v3）
+ */
+import type { AssetItem } from "@/api/assets"
+
+/* ── 音色来源切换 ── */
+export type VoiceSource = "preset" | "clone"
+
+/* ── 情绪 ── */
+export type VoiceEmotion = "natural" | "excited" | "calm" | "friendly"
+
+export const VOICE_EMOTION_OPTIONS: { value: VoiceEmotion; label: string }[] = [
+  { value: "natural", label: "自然" },
+  { value: "excited", label: "兴奋" },
+  { value: "calm", label: "沉稳" },
+  { value: "friendly", label: "亲切" },
+]
+
+/* ── 语言 ── */
+export type VoiceLanguage = "mandarin" | "english" | "cantonese"
+
+export const VOICE_LANGUAGE_OPTIONS: { value: VoiceLanguage; label: string }[] = [
+  { value: "mandarin", label: "普通话" },
+  { value: "english", label: "English" },
+  { value: "cantonese", label: "粤语" },
+]
+
+/* ── 对口型任务状态 ── */
+export type LipsyncStatus = "idle" | "pending" | "processing" | "completed" | "failed"
+
+/* ── 文案 ── */
+export interface Script {
+  id: string
+  title: string
+  content: string
+  char_count: number
+  created_at: string
+  updated_at?: string
+}
+
+/* ── 对口型任务 ── */
+export interface LipsyncJob {
+  id: string
+  status: LipsyncStatus
+  progress: number
+  output_video_url: string | null
+  /** 对口型成片总时长（秒），后端返回；用于 B-roll 时间自动估算（#1809 ⑥） */
+  output_duration?: number
+  error_message: string | null
+  created_at: string
+}
+
+/* ── B-roll 画面插入 ── */
+export type BRollInsertMode = "fullscreen" | "pip"
+export type PipPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right"
+
+export interface BRollSegment {
+  id: string
+  asset: AssetItem
+  script_segment_index: number
+  start_time: number
+  end_time: number
+  mode: BRollInsertMode
+  pip_position: PipPosition
+  pip_scale: number
+}
+
+/* ── 标题配置 ── */
+export interface AiAvatarTitleConfig {
+  title: string
+  position: string
+  font: string
+  size: number
+  bold: boolean
+  italic: boolean
+  stroke: boolean
+  shadow: boolean
+  color: string
+  auto_subtitle: boolean
+  /** 自定义位置坐标（position=custom 时生效，像素） */
+  pos_x?: number
+  pos_y?: number
+}
+
+/* ── 封面配置 ── */
+export interface AiAvatarCoverConfig {
+  enabled: boolean
+  mode: "auto_frame" | "upload"
+  frame_time: number
+  upload_url: string | null
+  thumbnail_url: string | null
+  /** 智能封面（MediaKit 选帧）返回的 OSS 非临时 URL（#1822） */
+  smart_cover_url: string | null
+}
+
+/* ── 渲染任务 ── */
+export type RenderStatus = "pending" | "processing" | "completed" | "failed" | "cancelled"
+
+export interface RenderJob {
+  id: string
+  status: RenderStatus
+  progress: number
+  output_video_url: string | null
+  error_message: string | null
+  created_at: string
+}
+
+/* ── 默认值 ── */
+export const DEFAULT_TITLE_CONFIG: AiAvatarTitleConfig = {
+  title: "",
+  position: "bottom",
+  font: "思源黑体",
+  size: 28,
+  bold: true,
+  italic: false,
+  stroke: false,
+  shadow: false,
+  color: "#ffffff",
+  auto_subtitle: true,
+  pos_x: undefined,
+  pos_y: undefined,
+}
+
+export const DEFAULT_COVER_CONFIG: AiAvatarCoverConfig = {
+  enabled: true,
+  mode: "auto_frame",
+  frame_time: 0,
+  upload_url: null,
+  thumbnail_url: null,
+  smart_cover_url: null,
+}

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

@@ -1,121 +0,0 @@
-/**
- * AI数字人页面 — 类型定义 (#1798)
- */
-
-/* ── 出镜视频 ── */
-export interface AvatarVideo {
-  url: string
-  name: string
-  duration: number // 秒
-  width: number
-  height: number
-  size: number // 字节
-}
-
-/* ── 声音克隆 ── */
-export interface VoiceTone {
-  id: string
-  name: string
-  description: string
-  gender: string
-  preview_url?: string
-}
-
-export interface VoiceCloneState {
-  status: "idle" | "uploading" | "cloning" | "completed" | "failed"
-  audioUrl: string
-  audioName: string
-  cloneJobId: string
-  voiceId: string
-  progress: number
-}
-
-/* ── 文案 ── */
-export interface ScriptSegment {
-  text: string
-  duration?: number
-}
-
-export interface Script {
-  id: string
-  title: string
-  content: string
-  segments: ScriptSegment[]
-  tags: string[]
-  created_at: string
-  updated_at: string
-}
-
-/* ── 对口型 ── */
-export interface LipsyncJob {
-  id: string
-  status: "pending" | "processing" | "completed" | "failed"
-  video_url: string
-  audio_url: string
-  output_video_url: string
-  output_duration: number
-  error_message: string
-  submitted_at?: string
-  completed_at?: string
-}
-
-/* ── B-roll 插入 ── */
-export interface BRollSegment {
-  script_segment_index: number
-  asset_url: string
-  mode: "fullscreen" | "pip"
-  start_time: number
-  end_time: number
-  pip_position?: string
-  pip_scale?: number
-}
-
-/* ── 渲染任务 ── */
-export interface AiAvatarRenderRequest {
-  lipsync_job_id: string
-  script_id: string
-  b_roll_segments: BRollSegment[]
-  title_config: Record<string, unknown>
-  cover_config: Record<string, unknown>
-  project_id?: string
-}
-
-export interface AiAvatarRenderJob {
-  id: string
-  status: "pending" | "processing" | "completed" | "failed"
-  progress: number
-  output_video_url: string
-  output_cover_url: string
-  output_duration: number
-  error_message: string
-  created_at: string
-  updated_at: string
-}
-
-/* ── 封面配置 ── */
-export interface AiAvatarCoverConfig {
-  enabled: boolean
-  mode: "auto" | "frame" | "upload"
-  frame_time: number
-  upload_url: string
-  thumbnail_url: string
-}
-
-/* ── 标题配置（复用 generate 的 TitleSettings 结构） ── */
-export interface AiAvatarTitleConfig {
-  title: string
-  font: string
-  size: number
-  color: string
-  position: string
-  bold: boolean
-  italic: boolean
-  stroke: boolean
-  shadow: boolean
-}
-
-/* ── 生成设置 ── */
-export interface AiAvatarGenerateConfig {
-  resolution: "720p" | "1080p"
-  bRollMode: "fullscreen" | "pip"
-}

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

@@ -0,0 +1,76 @@
+/**
+ * AI数字人 — 前后端接口契约转换工具（#1822）
+ *
+ * 以 packages/domain/video_filter_builder.py 的 build_title_drawtext_filter() 为唯一口径
+ * （契约文档第 5 节的 titles[]/fontSize/frame/start/end 为误写，后端不认，禁止使用）。
+ */
+import type { AiAvatarTitleConfig, AiAvatarCoverConfig, VoiceEmotion } from "../types"
+
+/* ── 情绪：中文 → 英文（防御性映射；state 默认已是英文） ── */
+const EMOTION_ZH_TO_EN: Record<string, VoiceEmotion> = {
+  自然: "natural",
+  兴奋: "excited",
+  沉稳: "calm",
+  亲切: "friendly",
+}
+const VALID_EMOTIONS: VoiceEmotion[] = ["natural", "excited", "calm", "friendly"]
+
+/** 归一化为后端英文枚举 natural/excited/calm/friendly；非法/空值回退 natural。 */
+export function normalizeEmotion(raw: string | undefined | null): VoiceEmotion {
+  if (!raw) return "natural"
+  const v = raw.trim()
+  if ((VALID_EMOTIONS as string[]).includes(v)) return v as VoiceEmotion
+  return EMOTION_ZH_TO_EN[v] ?? "natural"
+}
+
+/* ── 标题：前端 state → 后端 build_title_drawtext_filter 字段（单个 title_config dict） ── */
+/**
+ * 后端真实字段：text(或content)、font(或font_preset)、font_size(或size)、
+ * font_color(或color，可传 #RRGGBB)、position(top/center/bottom/custom)、
+ * enabled、bold、stroke{enabled,width,color}、shadow{enabled,color,offset_x,offset_y}、
+ * pos_x/pos_y(custom 时)。
+ * 口播标题默认 position=bottom（不传后端会默认 top 跑到画面顶部）。
+ */
+export function buildTitleConfigPayload(cfg: AiAvatarTitleConfig): Record<string, unknown> {
+  const text = (cfg.title || "").trim()
+  if (!text) return {}
+  const position = cfg.position || "bottom"
+  const payload: Record<string, unknown> = {
+    text,
+    enabled: true,
+    font: cfg.font || "思源黑体",
+    font_size: Math.round(cfg.size) || 36,
+    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 }
+      : { enabled: false },
+  }
+  // 自定义坐标（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
+  }
+  return payload
+}
+
+/* ── 封面：前端 state → 后端 render cover_config ── */
+export function buildCoverConfigPayload(
+  cfg: AiAvatarCoverConfig,
+  smartCoverUrl: string | null,
+): Record<string, unknown> {
+  const payload: Record<string, unknown> = {
+    enabled: !!cfg.enabled,
+    mode: cfg.mode,
+    // build_cover_extract_command 读取 timestamp（截帧秒数）
+    timestamp: cfg.frame_time || 0,
+  }
+  if (smartCoverUrl) payload.cover_url = smartCoverUrl
+  // 自定义上传：blob: 本地预览地址无法给后端，仅 OSS URL 可用
+  if (cfg.mode === "upload" && cfg.upload_url && !cfg.upload_url.startsWith("blob:")) {
+    payload.upload_url = cfg.upload_url
+  }
+  return payload
+}

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

@@ -0,0 +1,62 @@
+/**
+ * AI数字人 — 文案分句 & B-roll 时间自动估算（#1809 ⑤⑥）
+ */
+
+export interface ScriptSentence {
+  /** 句子序号（从 0 开始，对应提交给后端的 script_segment_index） */
+  index: number
+  /** 句子文本（去掉首尾空白） */
+  text: string
+  /** 句子字数（按中文/字符计，去除空白） */
+  charCount: number
+  /** 累计起始字数（用于时间估算） */
+  startChar: number
+  /** 估算的对口型视频内起始时间（秒） */
+  startTime: number
+  /** 估算的对口型视频内结束时间（秒） */
+  endTime: number
+}
+
+/**
+ * 按句号/问号/感叹号/分号/换行分句（兼容中英文标点）。
+ * 空文案返回空数组。时间按「该句字数 ÷ 全文总字数 × 口播总时长」线性估算。
+ */
+export function splitScriptIntoSentences(
+  scriptText: string,
+  outputDuration: number,
+): ScriptSentence[] {
+  const text = (scriptText || "").trim()
+  if (!text) return []
+
+  const rawParts = text
+    .split(/[。！？!?；;\n\r]+/)
+    .map((part) => part.trim())
+    .filter((part) => part.length > 0)
+
+  const totalChars = rawParts.reduce((sum, part) => sum + part.replace(/\s/g, "").length, 0)
+  const duration = outputDuration > 0 ? outputDuration : 0
+
+  const sentences: ScriptSentence[] = []
+  let accChar = 0
+  rawParts.forEach((part, i) => {
+    const charCount = part.replace(/\s/g, "").length
+    const startTime = duration > 0 && totalChars > 0 ? (accChar / totalChars) * duration : 0
+    const endTime =
+      duration > 0 && totalChars > 0 ? ((accChar + charCount) / totalChars) * duration : 0
+    sentences.push({
+      index: i,
+      text: part,
+      charCount,
+      startChar: accChar,
+      startTime: round1(startTime),
+      endTime: round1(endTime),
+    })
+    accChar += charCount
+  })
+
+  return sentences
+}
+
+function round1(n: number): number {
+  return Math.round(n * 10) / 10
+}

apps/web/src/pages/duplication/duplication.css

@@ -10,7 +10,7 @@
    ============================================================ */
 .dup-page {
   padding: var(--space-2xl) var(--space-lg);
-  max-width: 1100px;
+  max-width: 1400px;
   margin: 0 auto;
 }
 

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

@@ -548,10 +548,21 @@ const GeneratePage: React.FC = () => {
             <div
               style={{
                 display: "flex",
-                justifyContent: "center",
+                flexDirection: "column",
+                alignItems: "center",
                 marginTop: 16,
               }}
             >
+              <h2
+                style={{
+                  textAlign: "center",
+                  marginBottom: 12,
+                  fontSize: "1.5rem",
+                  fontWeight: 600,
+                }}
+              >
+                🎬 确认生成
+              </h2>
               <div
                 style={{
                   display: "flex",

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

@@ -0,0 +1,192 @@
+/* ============================================================
+   TitleStylePanel 标题样式面板 — 独立共用样式（#1809 ⑦）
+
+   从 generate.css 抽取的标题样式区块，供「智能剪辑」与「AI数字人」
+   两个页面共用。AI数字人页面不引入 generate.css，直接由
+   TitleStylePanel.tsx import 本文件，保证 24 个 T 预设格子的网格布局、
+   配色描边、选中态与智能剪辑页面完全一致。
+
+   注意：本文件规则与 generate.css 中同名规则一一对应、取值相同；
+   智能剪辑页面两处同时存在时同优先级同值，不改变其原有呈现。
+   ============================================================ */
+
+/* ── 区块容器 ── */
+.xx-title-style-section {
+  margin-top: 22px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border-light);
+}
+
+.xx-section-subtitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 16px;
+}
+
+.xx-title-style-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
+.xx-half-field {
+  margin-bottom: 0;
+}
+
+.xx-field-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.xx-field-label-row label {
+  margin-bottom: 0;
+}
+
+.xx-field-value {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+/* ── 共用表单字段（位置/字体下拉） ── */
+.xx-title-style-section .xx-form-field {
+  margin-bottom: 14px;
+}
+
+.xx-title-style-section .xx-form-field:last-child {
+  margin-bottom: 0;
+}
+
+.xx-title-style-section .xx-form-field label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 8px;
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.xx-title-style-section .xx-form-field select,
+.xx-title-style-section .xx-form-field input {
+  width: 100%;
+  height: 44px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background: var(--bg-primary);
+  padding: 0 14px;
+  font-size: 14px;
+  outline: 0;
+  transition: 0.15s ease;
+  color: var(--text-primary);
+}
+
+.xx-title-style-section .xx-form-field select:focus,
+.xx-title-style-section .xx-form-field input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+/* ── 字号滑块 ── */
+.xx-slider {
+  width: 100%;
+  height: 6px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--border-color);
+  border-radius: 3px;
+  outline: none;
+  cursor: pointer;
+}
+
+.xx-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  background: var(--primary-color);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
+}
+
+.xx-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  background: var(--primary-color);
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
+}
+
+/* ── 标题预设卡片网格（24 个 T 格子） ── */
+.xx-title-presets-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 52px);
+  gap: 1px;
+}
+
+.xx-title-preset-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  padding: 0;
+  background: #404040;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.xx-title-preset-card:hover {
+  border-color: #666;
+  background: #4d4d4d;
+}
+
+.xx-title-preset-card.active {
+  border-color: #409eff;
+  background: #4d4d4d;
+}
+
+.xx-title-preset-preview-text {
+  font-size: 32px;
+  line-height: 1;
+  user-select: none;
+}
+
+/* ── 样式按钮组（加粗/斜体/描边/阴影） ── */
+.xx-style-btns {
+  display: flex;
+  gap: 8px;
+}
+
+.xx-style-btn {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background: var(--bg-primary);
+  cursor: pointer;
+  font-size: 15px;
+  color: var(--text-secondary);
+  transition: all 0.15s;
+}
+
+.xx-style-btn:hover {
+  border-color: var(--primary-300);
+  color: var(--primary-color);
+}
+
+.xx-style-btn.active {
+  background: var(--primary-color);
+  border-color: var(--primary-color);
+  color: #fff;
+}

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

@@ -5,6 +5,9 @@
 import React from "react"
 import type { TitleSettings } from "../../types"
 import TitlePresetsGrid from "./TitlePresetsGrid"
+// 标题样式面板共用样式（#1809 ⑦）：智能剪辑与 AI数字人复用同一组件，
+// 由组件自带样式，避免 AI数字人页面重复引入整个 generate.css
+import "./TitleStylePanel.css"
 
 interface PositionOption {
   value: string

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

@@ -10,7 +10,7 @@
 .xx-generate-page {
   min-height: 100%;
   padding: var(--space-xl);
-  max-width: 1400px;
+  max-width: 1680px;
   margin: 0 auto;
 }
 

apps/web/src/pages/my-templates/MyTemplates.css

@@ -5,7 +5,7 @@
 
 .mt-page {
   padding: var(--space-xl);
-  max-width: 1400px;
+  max-width: 1680px;
   margin: 0 auto;
 }
 

apps/web/src/pages/scripts/ScriptLibrary.tsx

@@ -0,0 +1,273 @@
+/**
+ * 文案库页面 — Issue #1811
+ * 风格对齐标题库（同类资源管理页面统一风格），单列卡片列表
+ * 功能：列表 / 新建 / 编辑 / 删除 / 按标题搜索 / 空状态
+ * 对接后端 /api/v1/scripts CRUD
+ */
+import React, { useEffect, useMemo, useState } from "react"
+import { Modal, message, Empty, Button, Input, Popconfirm } from "antd"
+import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined } from "@ant-design/icons"
+import {
+  getScripts,
+  createScript,
+  updateScript,
+  deleteScript,
+  type ScriptItem,
+} from "@/api/scripts"
+import "./scripts.css"
+
+const { TextArea } = Input
+
+const ScriptLibrary: React.FC = () => {
+  const [scripts, setScripts] = useState<ScriptItem[]>([])
+  const [loading, setLoading] = useState(false)
+  const [searchText, setSearchText] = useState("")
+
+  // 弹窗状态
+  const [createOpen, setCreateOpen] = useState(false)
+  const [editing, setEditing] = useState<ScriptItem | null>(null)
+  const [formTitle, setFormTitle] = useState("")
+  const [formContent, setFormContent] = useState("")
+  const [submitting, setSubmitting] = useState(false)
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      const items = await getScripts()
+      setScripts(items)
+    } catch (err) {
+      message.error(err instanceof Error ? err.message : "加载文案列表失败")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+  }, [])
+
+  const filtered = useMemo(() => {
+    const kw = searchText.trim().toLowerCase()
+    if (!kw) return scripts
+    return scripts.filter((s) => s.title.toLowerCase().includes(kw))
+  }, [scripts, searchText])
+
+  const openCreate = () => {
+    setFormTitle("")
+    setFormContent("")
+    setCreateOpen(true)
+  }
+
+  const openEdit = (item: ScriptItem) => {
+    setEditing(item)
+    setFormTitle(item.title)
+    setFormContent(item.content)
+  }
+
+  const handleCloseCreate = () => {
+    setCreateOpen(false)
+    setFormTitle("")
+    setFormContent("")
+  }
+
+  const handleCloseEdit = () => {
+    setEditing(null)
+    setFormTitle("")
+    setFormContent("")
+  }
+
+  const handleCreate = async () => {
+    const title = formTitle.trim()
+    const content = formContent.trim()
+    if (!title || !content) {
+      message.warning("请填写标题和正文")
+      return
+    }
+    setSubmitting(true)
+    try {
+      await createScript({ title, content })
+      message.success("文案已创建")
+      handleCloseCreate()
+      await load()
+    } catch (err) {
+      message.error(err instanceof Error ? err.message : "创建文案失败")
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleUpdate = async () => {
+    if (!editing) return
+    const title = formTitle.trim()
+    const content = formContent.trim()
+    if (!title || !content) {
+      message.warning("请填写标题和正文")
+      return
+    }
+    setSubmitting(true)
+    try {
+      await updateScript(editing.id, { title, content })
+      message.success("文案已更新")
+      handleCloseEdit()
+      await load()
+    } catch (err) {
+      message.error(err instanceof Error ? err.message : "更新文案失败")
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteScript(id)
+      message.success("文案已删除")
+      await load()
+    } catch (err) {
+      message.error(err instanceof Error ? err.message : "删除文案失败")
+    }
+  }
+
+  const preview = (content: string) => {
+    const text = content.replace(/\s+/g, " ").trim()
+    return text.length > 120 ? `${text.slice(0, 120)}…` : text || "（空）"
+  }
+
+  const formatTime = (iso: string) => {
+    const d = new Date(iso)
+    if (Number.isNaN(d.getTime())) return iso
+    const pad = (n: number) => String(n).padStart(2, "0")
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(
+      d.getHours(),
+    )}:${pad(d.getMinutes())}`
+  }
+
+  return (
+    <div className="xx-scripts-page">
+      <div className="xx-scripts-layout">
+        {/* 顶部操作栏 */}
+        <div className="xx-scripts-filters">
+          <div className="xx-scripts-filters-left">
+            <Input
+              prefix={<SearchOutlined />}
+              placeholder="按标题搜索"
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              allowClear
+              style={{ width: 260 }}
+            />
+          </div>
+          <div className="xx-scripts-filters-right">
+            <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+              新建文案
+            </Button>
+          </div>
+        </div>
+
+        {/* 列表 / 空状态 */}
+        {loading ? (
+          <div className="xx-scripts-loading">加载中…</div>
+        ) : filtered.length === 0 ? (
+          <Empty
+            description={searchText ? "没有匹配的文案" : "暂无文案，点击右上角「新建文案」开始创作"}
+          />
+        ) : (
+          <div className="xx-scripts-list">
+            {filtered.map((s) => (
+              <div key={s.id} className="xx-script-card">
+                <div className="xx-script-card-header">
+                  <div className="xx-script-title">{s.title}</div>
+                  <div className="xx-script-actions">
+                    <Button
+                      size="small"
+                      type="text"
+                      icon={<EditOutlined />}
+                      onClick={() => openEdit(s)}
+                    >
+                      编辑
+                    </Button>
+                    <Popconfirm
+                      title="确认删除此文案？"
+                      description="删除后不可恢复"
+                      okText="删除"
+                      cancelText="取消"
+                      okButtonProps={{ danger: true }}
+                      onConfirm={() => handleDelete(s.id)}
+                    >
+                      <Button size="small" type="text" danger icon={<DeleteOutlined />}>
+                        删除
+                      </Button>
+                    </Popconfirm>
+                  </div>
+                </div>
+                <div className="xx-script-preview">{preview(s.content)}</div>
+                <div className="xx-script-meta">
+                  <span>{s.char_count ?? s.content.length} 字</span>
+                  <span>·</span>
+                  <span>{formatTime(s.created_at)}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 新建弹窗 */}
+      <Modal
+        title="新建文案"
+        open={createOpen}
+        onCancel={handleCloseCreate}
+        onOk={handleCreate}
+        confirmLoading={submitting}
+        destroyOnClose
+        okText="创建"
+        cancelText="取消"
+      >
+        <div className="xx-script-form">
+          <Input
+            placeholder="标题"
+            value={formTitle}
+            onChange={(e) => setFormTitle(e.target.value)}
+            maxLength={200}
+          />
+          <TextArea
+            placeholder="正文"
+            value={formContent}
+            onChange={(e) => setFormContent(e.target.value)}
+            rows={8}
+            maxLength={5000}
+          />
+        </div>
+      </Modal>
+
+      {/* 编辑弹窗 */}
+      <Modal
+        title="编辑文案"
+        open={!!editing}
+        onCancel={handleCloseEdit}
+        onOk={handleUpdate}
+        confirmLoading={submitting}
+        destroyOnClose
+        okText="保存"
+        cancelText="取消"
+      >
+        <div className="xx-script-form">
+          <Input
+            placeholder="标题"
+            value={formTitle}
+            onChange={(e) => setFormTitle(e.target.value)}
+            maxLength={200}
+          />
+          <TextArea
+            placeholder="正文"
+            value={formContent}
+            onChange={(e) => setFormContent(e.target.value)}
+            rows={8}
+            maxLength={5000}
+          />
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default ScriptLibrary

apps/web/src/pages/scripts/scripts.css

@@ -0,0 +1,137 @@
+/**
+ * 文案库页面 - V21 设计系统样式
+ * 单列卡片列表，风格对齐标题库（xx-titles-page）
+ */
+@import "../../styles/global.css";
+
+/* ============================================================
+   页面容器
+   ============================================================ */
+.xx-scripts-page {
+  min-height: 100%;
+  padding: var(--space-xl);
+}
+
+.xx-scripts-layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+/* ============================================================
+   顶部筛选栏
+   ============================================================ */
+.xx-scripts-filters {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+
+.xx-scripts-filters-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.xx-scripts-filters-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+/* ============================================================
+   列表
+   ============================================================ */
+.xx-scripts-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.xx-scripts-loading {
+  text-align: center;
+  color: var(--text-secondary);
+  padding: var(--space-xl);
+  font-size: var(--font-size-sm);
+}
+
+/* ============================================================
+   文案卡片（对齐标题卡片风格，单列）
+   ============================================================ */
+.xx-script-card {
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+  padding: var(--space-md);
+  transition: var(--transition-all);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.xx-script-card:hover {
+  border-color: var(--primary-color);
+  background: var(--bg-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+.xx-script-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-md);
+}
+
+.xx-script-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  line-height: 1.5;
+  word-break: break-word;
+  flex: 1;
+}
+
+.xx-script-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xxs);
+  flex-shrink: 0;
+  opacity: 0;
+  transition: var(--transition-opacity, opacity 0.2s);
+}
+
+.xx-script-card:hover .xx-script-actions {
+  opacity: 1;
+}
+
+.xx-script-preview {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.xx-script-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: var(--font-size-xs, 12px);
+  color: var(--text-tertiary);
+}
+
+/* ============================================================
+   弹窗表单
+   ============================================================ */
+.xx-script-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.xx-script-form textarea.ant-input {
+  resize: vertical;
+}

apps/web/src/pages/tasks/tasks.css

@@ -2,7 +2,7 @@
 
 .task-center {
   padding: var(--space-lg);
-  max-width: 1400px;
+  max-width: 1680px;
   margin: 0 auto;
 }
 

apps/web/src/router/appRoutes.tsx

@@ -24,6 +24,10 @@ const appChildren: RouteObject[] = [
     path: "titles",
     lazy: lazyRoute(() => import("@/pages/titles/TitleLibrary")),
   },
+  {
+    path: "scripts",
+    lazy: lazyRoute(() => import("@/pages/scripts/ScriptLibrary")),
+  },
   {
     path: "voices",
     lazy: lazyRoute(() => import("@/pages/voices/VoiceLibrary")),

docs/ai-avatar-api-contract-1822.md

@@ -0,0 +1,169 @@
+# AI 数字人前后端接口契约（#1797 / #1822）
+
+> 分支：`fix/ai-avatar-v3-1797`
+> 范围：TTS→对口型链路打通、语速/情绪透传、封面智能选帧、标题字段对齐
+> 本文档为前后端联调的唯一字段口径。
+
+---
+
+## 1. 对口型创建接口 `POST /api/v1/lipsync/jobs`
+
+支持两种输入模式，**二选一**：
+
+### 模式 A（推荐）：TTS 直生 —— 传音色 + 文案，后端内部合成音频
+
+前端无需先调 TTS。后端收到请求后：先调 CosyVoice 合成音频 → 转存 OSS → 再提交 MediaKit 对口型。
+
+```jsonc
+{
+  "video_url": "https://oss.../person.mp4",   // 必填，人物视频（MP4）
+  "voice_id": "cosyvoice-v3-flash-99-xxxx",    // 必填，音色 ID（预置音色 或 克隆 profile UUID）
+  "script_text": "省是浙江省，市是永康市……",     // 必填，要合成的文案
+  "speed": 1.0,                                 // 可选，语速 0.5~2.0，默认 1.0
+  "emotion": "excited",                         // 可选，情绪，见 §3
+  "enable_video_loop": false,                   // 可选，音频长于视频时是否循环画面
+  "project_id": ""                              // 可选
+}
+```
+
+### 模式 B：直接音频 —— 前端已准备好音频
+
+```jsonc
+{
+  "video_url": "https://oss.../person.mp4",     // 必填
+  "audio_url": "https://oss.../voice.mp3",      // 必填，mp3/aac/wav/m4a/flac
+  "enable_video_loop": false
+}
+```
+
+### 校验与错误码
+
+| 场景 | HTTP | detail.code |
+|------|------|-------------|
+| 既无 audio_url 又无 voice_id+script_text | 422 | （schema 校验） |
+| video_url 非 MP4 / audio_url 格式不支持 | 422 | （schema 校验） |
+| 克隆音色不属于当前用户 | 403 | `VoiceForbidden` |
+| 克隆音色尚未合成完成 | 400 | `VoiceNotReady` |
+| TTS 合成失败（如 CosyVoice 欠费） | 502 | `TTSSynthesisFailed` |
+| MediaKit 提交失败 | 502 | `*`（透传 MediaKit code） |
+
+### 轮询
+
+- `GET /api/v1/lipsync/jobs/{id}`：非终态任务先返回 DB 缓存，**后台异步刷新 MediaKit**（不会阻塞轮询）。
+- `status` 流转：`pending` → `submitted` → `running`/`processing`（MediaKit 中间态同步）→ `completed` / `failed`。
+- `completed` 时 `output_video_url` 为**已转存自家 OSS 的非临时 URL**（不会过期）。
+- 前端每 3s 轮询，命中 `completed`/`failed` 即停。
+
+---
+
+## 2. TTS 合成接口语速/情绪透传
+
+- `POST /api/v1/tts/synthesize`（异步任务）与 `POST /api/v1/tts/preview`（即时试听）均新增：
+  - `speed`：float，0.5~2.0，默认 1.0 → 透传 CosyVoice payload 的 `rate`
+  - `emotion`：string，见 §3 映射 → 透传 `emotion`
+- 透传链路：`route → CreateTTSJobUseCase(metadata) → TTSJobWorkflow.start_synthesis / 分段合成 → CosyVoiceService.submit_synthesize_task(rate/emotion)`。
+- 分段合成（长文案）与失败重合成路径同样透传 speed/emotion。
+
+---
+
+## 3. 情绪枚举（前后端统一）
+
+前端把中文选项映射成英文后传后端；后端同时接受中文/英文，非法值忽略（走默认自然）。
+
+| 前端选项 | 传参值 | CosyVoice 枚举 |
+|---------|--------|---------------|
+| 自然 | `natural` | natural |
+| 兴奋 | `excited` | excited |
+| 沉稳 | `calm` | calm |
+| 亲切 | `friendly` | friendly |
+
+后端 `normalize_emotion()` 也接受中文（自然/兴奋/沉稳/亲切）做兜底映射。
+
+---
+
+## 4. 智能封面接口 `POST /api/v1/ai-avatar/render/smart-cover`
+
+独立接口，**不依赖渲染任务**，前端「智能获取封面」按钮直接调用。
+
+**请求**
+```jsonc
+{
+  "video_url": "https://oss.../avatar_output.mp4",  // 必填，数字人视频
+  "max_frames": 5                                    // 可选，抽帧数量 1~10，默认 5
+}
+```
+
+**响应**
+```jsonc
+{
+  "cover_url": "https://oss.../ai-avatar/covers/xxx/cover_yy.jpg", // OSS 非临时 URL
+  "status": "completed",       // completed / fallback_failed
+  "message": ""                // 失败原因
+}
+```
+
+**实现**：复用智能剪辑同款能力 —— MediaKit `extract_frames(SpecifiedFrames)` 抽 5 帧 → `cover_frame_scorer.score_frames`（清晰度+亮度+色彩）评分选最佳 → 转存 OSS。
+**不再使用 FFmpeg 简单首帧**。渲染管线最终封面也优先走该智能选帧，MediaKit 不可用时才回退 FFmpeg。
+
+---
+
+## 5. 渲染接口 `POST /api/v1/ai-avatar/render`
+
+```jsonc
+{
+  "lipsync_job_id": "7c29a3b2-...",     // 必填，已 completed 的对口型任务
+  "script_id": "",                       // 可选！见下方说明
+  "b_roll_segments": [],                 // 可选，B-roll 片段
+  "title_config": { ... },               // 可选，单个标题配置 dict（见 §6）
+  "cover_config": { ... },               // 可选，封面配置（建议改用 smart-cover）
+  "project_id": ""
+}
+```
+
+**`script_id` 是否必填：可选。**
+- 从文案库选了文案时传对应文案 ID（后端做归属校验）。
+- **手动输入文案、走 TTS 直生模式时不传（留空）即可**——渲染管线不依赖文案内容，`script_id` 仅用于归属校验。留空不会卡手动文案用户。
+
+---
+
+## 6. 标题配置 `title_config` 字段清单（以 build_title_drawtext_filter 为准）
+
+渲染请求收的是**单个 `title_config` dict**（不是 `titles[]` 数组），字段与 `packages/domain/video_filter_builder.py` 的 `build_title_drawtext_filter()` 完全对齐：
+
+| 字段 | 别名 | 类型 | 必填 | 默认 | 说明 |
+|------|------|------|------|------|------|
+| `text` | `content` | string | ✅ | — | 标题文字；为空或 `enabled=false` 时不渲染标题 |
+| `enabled` | — | bool | ❌ | `true` | 是否启用标题；false 跳过 |
+| `font` | `font_preset` | string | ❌ | 思源黑体 | 字体名（后端按名字解析字体文件） |
+| `font_size` | `size` | int | ❌ | 36 | 字号（像素） |
+| `font_color` | `color` | string | ❌ | `#ffffff` | 文字颜色，`#RRGGBB`；后端自动去掉 `#`，也可传 `RRGGBB` 或颜色名 |
+| `position` | — | string | ❌ | `top` | 预设位置：`top`(y=50) / `center`(垂直居中) / `bottom`(底部上移50px) / `custom` |
+| `pos_x` | — | int/float | ❌ | — | 自定义 X 坐标（像素），仅 `position=custom` 生效 |
+| `pos_y` | — | int/float | ❌ | — | 自定义 Y 坐标（像素），仅 `position=custom` 生效 |
+| `bold` | — | bool | ❌ | `true` | 粗体（Bold 字体变体，回退 borderw 模拟） |
+| `stroke` | — | bool/object | ❌ | — | 描边。`true`=黑描边宽2；object 见下 |
+| `stroke.enabled` | — | bool | ❌ | true | 是否描边 |
+| `stroke.width` | — | int | ❌ | 2 | 描边宽度 |
+| `stroke.color` | — | string | ❌ | `#000000` | 描边颜色 |
+| `shadow` | — | bool/object | ❌ | — | 阴影。`true`=黑色阴影偏移2px；object 见下 |
+| `shadow.enabled` | — | bool | ❌ | true | 是否阴影 |
+| `shadow.color` | — | string | ❌ | `#000000` | 阴影颜色 |
+| `shadow.offset_x` | — | int | ❌ | 2 | 阴影 X 偏移 |
+| `shadow.offset_y` | — | int | ❌ | 2 | 阴影 Y 偏移 |
+
+**前端注意事项**
+- 标题是**整条成片一个标题**（单个 dict），不是按时间段的标题数组；没有 `start`/`end`/`frame`/`fontSize` 这些字段。
+- 位置用 `position` 四档枚举；自由摆放用 `position="custom"` + `pos_x`/`pos_y`（像素坐标，非比例）。
+- 颜色统一传 `#RRGGBB` 即可，后端会处理 `#`；三档预设位置下标题始终水平居中。
+- `stroke`/`shadow` 传 `true` 用默认样式，或传 object 精细控制颜色/宽度/偏移。
+
+---
+
+## 7. 前端对接清单
+
+1. 对口型：改用**模式 A**（voice_id + script_text + speed + emotion），不要再先调 TTS 拿 audio_url。
+2. 音色 ID：`voice_id` 可直接传克隆音色的 profile UUID，后端会解析为 CosyVoice voice_id（与 /tts 一致）。
+3. 情绪下拉：自然/兴奋/沉稳/亲切 → natural/excited/calm/friendly。
+4. 封面：点「智能获取封面」→ POST `/ai-avatar/render/smart-cover`，用返回的 `cover_url`。
+5. 渲染：手动文案直生场景 `script_id` 留空；标题传**单个** `title_config` dict（字段见 §6）。
+6. 轮询：识别 `running` 等中间态，不要只认 `submitted`。

infra/docker/compose.yml

@@ -128,9 +128,9 @@ services:
       - xiaoxia-net
 
     # 健康检查配置
-    # 注：celery inspect ping 依赖 broker 连接，在容器内不可靠，改用进程检查
+    # 注：容器内无 pgrep/ps，扫描 /proc 所有进程的 cmdline 查找 celery 进程
     healthcheck:
-      test: ["CMD-SHELL", "pgrep -f 'celery.*worker' | head -n1 >/dev/null 2>&1 || grep -q celery /proc/1/cmdline || exit 1"]
+      test: ["CMD-SHELL", "grep -lq celery /proc/[0-9]*/cmdline 2>/dev/null || exit 1"]
       interval: 30s
       timeout: 10s
       retries: 3

infra/docker/deploy-production-registry.sh

@@ -155,7 +155,7 @@ docker run -d \
   --restart unless-stopped \
   --cpus 2 \
   --memory 2g \
-  --health-cmd "sh -c \"pgrep -f 'celery.*worker' >/dev/null 2>&1 || grep -q celery /proc/1/cmdline || exit 1\"" \
+  --health-cmd "sh -c \"grep -lq celery /proc/[0-9]*/cmdline 2>/dev/null || exit 1\"" \
   --health-interval 30s \
   --health-timeout 10s \
   --health-retries 3 \

infra/docker/deploy-staging-registry.sh

@@ -116,7 +116,7 @@ docker run -d \
   -v "$GENERATED_DIR:/app/generated" \
   --restart unless-stopped \
   --label com.centurylinklabs.watchtower.enable=true \
-  --health-cmd "sh -c \"pgrep -f 'celery.*worker' >/dev/null 2>&1 || grep -q celery /proc/1/cmdline || exit 1\"" \
+  --health-cmd "sh -c \"grep -lq celery /proc/[0-9]*/cmdline 2>/dev/null || exit 1\"" \
   --health-interval 30s \
   --health-timeout 10s \
   --health-retries 3 \

infra/docker/worker.Dockerfile

@@ -38,6 +38,10 @@ RUN chmod +x /usr/local/bin/entrypoint-worker.sh
 # 业务代码（变化最频繁，放最后）
 COPY apps/worker/ /app/apps/worker/
 
+# 健康检查：扫描所有进程的 cmdline 查找 celery 进程
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+    CMD grep -lq celery /proc/[0-9]*/cmdline 2>/dev/null || exit 1
+
 USER celery
 WORKDIR /app/apps/worker
 CMD ["/usr/local/bin/entrypoint-worker.sh"]

packages/adapters/sqlalchemy_impl/models.py

@@ -684,9 +684,15 @@ class LipsyncJobModel(Base):
 
     # 输入参数
     video_url = Column(Text, nullable=False)
-    audio_url = Column(Text, nullable=False)
+    audio_url = Column(Text, nullable=True)  # 直生模式（voice_id+script_text）下 TTS 合成后回填
     enable_video_loop = Column(Boolean, nullable=False, default=False)
 
+    # TTS 直生字段：传音色 + 文案，由后端先合成音频再对口型
+    voice_id = Column(String(200), nullable=False, default="")
+    script_text = Column(Text, nullable=False, default="")
+    speed = Column(Float, nullable=False, default=1.0)
+    emotion = Column(String(20), nullable=False, default="")
+
     # MediaKit 任务状态
     mediakit_task_id = Column(String(200), nullable=False, default="", index=True)
     status = Column(
@@ -715,7 +721,8 @@ class AiAvatarRenderJob(Base):
 
     # 输入参数
     lipsync_job_id = Column(String(36), nullable=False)
-    script_id = Column(String(36), nullable=False)
+    # 文案 ID 可选：手动输入文案（TTS 直生）场景不关联文案库条目
+    script_id = Column(String(36), nullable=False, default="")
     b_roll_segments = Column(JSON, nullable=False, default=list)
     # b_roll_segments 格式: [{"script_segment_index": 0, "asset_url": "...", "mode": "fullscreen|pip", "start_time": 5.0, "end_time": 10.0}, ...]
     title_config = Column(JSON, nullable=False, default=dict)

packages/application/cosyvoice_service.py

@@ -25,6 +25,35 @@ from packages.shared.config import get_shared_settings
 logger = logging.getLogger(__name__)
 
 
+# CosyVoice 支持的情绪：中文标签 → API 英文值
+EMOTION_MAP = {
+    "自然": "natural",
+    "兴奋": "excited",
+    "沉稳": "calm",
+    "亲切": "friendly",
+    "natural": "natural",
+    "excited": "excited",
+    "calm": "calm",
+    "friendly": "friendly",
+}
+VALID_EMOTIONS = {"natural", "excited", "calm", "friendly"}
+
+
+def normalize_emotion(emotion: str) -> str:
+    """将前端情绪值归一化为 CosyVoice 英文枚举。
+
+    支持中文（自然/兴奋/沉稳/亲切）和英文；非法值返回空串（不传，走默认）。
+    """
+    if not emotion:
+        return ""
+    key = emotion.strip().lower()
+    mapped = EMOTION_MAP.get(emotion.strip()) or EMOTION_MAP.get(key)
+    if mapped and mapped in VALID_EMOTIONS:
+        return mapped
+    logger.warning("未知的 emotion 值，忽略: %r", emotion)
+    return ""
+
+
 class CosyVoiceError(Exception):
     """CosyVoice API 调用异常。"""
 
@@ -431,6 +460,7 @@ class CosyVoiceService:
         format: str = "",
         speed: float = 1.0,
         volume: int = 50,
+        emotion: str = "",
     ) -> dict:
         """提交语音合成任务（同步非流式，直接返回结果）.
 
@@ -444,6 +474,7 @@ class CosyVoiceService:
             format: 输出格式（mp3/wav/pcm），空表示使用配置默认值
             speed: 语速（0.5-2.0），1.0 为正常速度
             volume: 音量（0-100），默认 50
+            emotion: 情绪（natural/excited/calm/friendly），空串不传
 
         Returns:
             dict: {"audio_url": str, "request_id": str,
@@ -463,17 +494,20 @@ class CosyVoiceService:
 
         settings = get_shared_settings()
 
-        payload = {
-            "model": self._model,
-            "input": {
-                "text": text,
-                "voice": voice_id,
-                "format": format or settings.cosyvoice_format,
-                "sample_rate": sample_rate or settings.cosyvoice_sample_rate,
-                "rate": speed,
-                "volume": volume,
-            },
+        input_payload: dict[str, Any] = {
+            "text": text,
+            "voice": voice_id,
+            "format": format or settings.cosyvoice_format,
+            "sample_rate": sample_rate or settings.cosyvoice_sample_rate,
+            "rate": speed,
+            "volume": volume,
         }
+        # 情绪：归一化（中文→英文）后透传；空/非法则不传，走 CosyVoice 默认
+        norm_emotion = normalize_emotion(emotion)
+        if norm_emotion:
+            input_payload["emotion"] = norm_emotion
+
+        payload = {"model": self._model, "input": input_payload}
 
         response = self._call_api(
             method="POST",
@@ -490,6 +524,10 @@ class CosyVoiceService:
         if not audio_url:
             raise CosyVoiceError(f"CosyVoice API 未返回 audio_url: {response}")
 
+        # DashScope 返回 http://，统一升级为 https://
+        if audio_url.startswith("http://"):
+            audio_url = audio_url.replace("http://", "https://", 1)
+
         return {
             "task_id": "",  # 同步接口无 task_id，兼容旧接口
             "audio_url": audio_url,
@@ -517,6 +555,7 @@ class CosyVoiceService:
         format: str = "",
         speed: float = 1.0,
         volume: int = 50,
+        emotion: str = "",
         timeout: float = 120.0,
     ) -> SynthesizeResult:
         """语音合成（同步非流式）.
@@ -548,6 +587,7 @@ class CosyVoiceService:
             format=format,
             speed=speed,
             volume=volume,
+            emotion=emotion,
         )
 
         return SynthesizeResult(

packages/application/tts_job/workflow.py

@@ -143,11 +143,16 @@ class TTSWorkflowService:
             return self._start_segment_synthesis(job)
 
         try:
+            _meta = dict(job.metadata)
+            _speed = float(_meta.get("speed", 1.0) or 1.0)
+            _emotion = str(_meta.get("emotion", "") or "")
             submit_result = self.cosyvoice_service.submit_synthesize_task(
                 text=job.input_text,
                 voice_id=job.voice_id,
                 sample_rate=job.sample_rate,
                 format=job.format,
+                speed=_speed,
+                emotion=_emotion,
             )
 
             # 保存 task_id / request_id 到 metadata
@@ -283,6 +288,7 @@ class TTSWorkflowService:
             job_metadata = job.metadata or {}
             speed = float(job_metadata.get("speed", 1.0))
             volume = int(job_metadata.get("volume", 50))
+            emotion = str(job_metadata.get("emotion", "") or "")
 
             result = self.cosyvoice_service.submit_synthesize_task(
                 text=job.input_text,
@@ -291,6 +297,7 @@ class TTSWorkflowService:
                 format=job.format,
                 speed=speed,
                 volume=volume,
+                emotion=emotion,
             )
             audio_url = result.get("audio_url", "")
             if not audio_url:
@@ -401,6 +408,9 @@ class TTSWorkflowService:
         """
         max_workers = min(len(segments), _MAX_SEGMENT_WORKERS)
         results: list[dict | None] = [None] * len(segments)
+        _seg_meta = job.metadata or {}
+        _seg_speed = float(_seg_meta.get("speed", 1.0) or 1.0)
+        _seg_emotion = str(_seg_meta.get("emotion", "") or "")
 
         with ThreadPoolExecutor(max_workers=max_workers) as executor:
             future_to_idx = {}
@@ -411,6 +421,8 @@ class TTSWorkflowService:
                     voice_id=job.voice_id,
                     sample_rate=job.sample_rate,
                     format=job.format,
+                    speed=_seg_speed,
+                    emotion=_seg_emotion,
                 )
                 future_to_idx[future] = idx
 
@@ -500,6 +512,7 @@ class TTSWorkflowService:
         job_metadata = job.metadata or {}
         speed = float(job_metadata.get("speed", 1.0))
         volume = int(job_metadata.get("volume", 50))
+        emotion = str(job_metadata.get("emotion", "") or "")
 
         # 分段文本（用于缺失段重新合成）
         segments = split_text(job.input_text, max_chars=_SEGMENT_THRESHOLD)
@@ -534,6 +547,7 @@ class TTSWorkflowService:
                         format=job.format,
                         speed=speed,
                         volume=volume,
+                        emotion=emotion,
                     )
                     future_to_idx[future] = idx
 

scripts/ci_production_deploy.sh

@@ -209,7 +209,7 @@ rollback() {
       --restart unless-stopped \
   --cpus 2 \
   --memory 2g \
-      --health-cmd "sh -c \"grep -q celery /proc/1/cmdline || exit 1\"" \
+      --health-cmd "sh -c \"for pid in /proc/[0-9]*/cmdline; do if grep -ql celery \"$pid\" 2>/dev/null; then exit 0; fi; done; exit 1\"" \
       --health-interval 30s \
       --health-timeout 10s \
       --health-retries 3 \
@@ -408,7 +408,7 @@ docker run -d \
   --restart unless-stopped \
   --cpus 2 \
   --memory 2g \
-  --health-cmd "sh -c \"grep -q celery /proc/1/cmdline || exit 1\"" \
+  --health-cmd "sh -c \"for pid in /proc/[0-9]*/cmdline; do if grep -ql celery \"$pid\" 2>/dev/null; then exit 0; fi; done; exit 1\"" \
   --health-interval 30s \
   --health-timeout 10s \
   --health-retries 3 \

scripts/ci_production_healthcheck.sh

@@ -310,7 +310,7 @@ docker run -d \
   --restart unless-stopped \
   --cpus 2 \
   --memory 2g \
-  --health-cmd "sh -c \"grep -q celery /proc/1/cmdline || exit 1\"" \
+  --health-cmd "sh -c \"for pid in /proc/[0-9]*/cmdline; do if grep -ql celery \"$pid\" 2>/dev/null; then exit 0; fi; done; exit 1\"" \
   --health-interval 30s \
   --health-timeout 10s \
   --health-retries 3 \

scripts/ci_staging_deploy.sh

@@ -192,7 +192,7 @@ rollback() {
       -e PUBLIC_API_BASE_URL=https://staging-api.xiaoxiajianji.com \
       -v "$GENERATED_DIR:/app/generated" \
       --restart unless-stopped \
-      --health-cmd "sh -c \"grep -q celery /proc/1/cmdline || exit 1\"" \
+      --health-cmd "sh -c \"for pid in /proc/[0-9]*/cmdline; do if grep -ql celery \"\$pid\" 2>/dev/null; then exit 0; fi; done; exit 1\"" \
       --health-interval 30s \
       --health-timeout 10s \
       --health-retries 3 \
@@ -501,7 +501,7 @@ docker run -d \
   -e PUBLIC_API_BASE_URL=https://staging-api.xiaoxiajianji.com \
   -v "$GENERATED_DIR:/app/generated" \
   --restart unless-stopped \
-  --health-cmd "sh -c \"grep -q celery /proc/1/cmdline || exit 1\"" \
+  --health-cmd "sh -c \"for pid in /proc/[0-9]*/cmdline; do if grep -ql celery \"\$pid\" 2>/dev/null; then exit 0; fi; done; exit 1\"" \
   --health-interval 30s \
   --health-timeout 10s \
   --health-retries 3 \

scripts/ci_staging_healthcheck.sh

@@ -305,7 +305,7 @@ docker run -d \
   -e PUBLIC_API_BASE_URL=https://staging-api.xiaoxiajianji.com \
   -v "$GENERATED_DIR:/app/generated" \
   --restart unless-stopped \
-  --health-cmd "sh -c \"grep -q celery /proc/1/cmdline || exit 1\"" \
+  --health-cmd "sh -c \"for pid in /proc/[0-9]*/cmdline; do if grep -ql celery \"$pid\" 2>/dev/null; then exit 0; fi; done; exit 1\"" \
   --health-interval 30s \
   --health-timeout 10s \
   --health-retries 3 \

scripts/rollback_production.sh

@@ -201,7 +201,7 @@ docker run -d \
   --restart unless-stopped \
   --cpus 2 \
   --memory 2g \
-  --health-cmd "sh -c \"grep -q celery /proc/1/cmdline || exit 1\"" \
+  --health-cmd "sh -c \"for pid in /proc/[0-9]*/cmdline; do if grep -ql celery \"$pid\" 2>/dev/null; then exit 0; fi; done; exit 1\"" \
   --health-interval 30s \
   --health-timeout 10s \
   --health-retries 3 \

tests/unit/test_ai_avatar_emotion_tts_lipsync.py

@@ -0,0 +1,297 @@
+"""#1822 情绪/语速透传 + 对口型 TTS 直生 + 智能封面 单元测试.
+
+CI 增量映射:
+  cosyvoice_service.normalize_emotion / payload emotion
+  lipsync_service TTS 直生分支（voice_id+script_text）
+  ai_avatar_cover_service 智能选帧
+"""
+
+import os
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+os.environ.setdefault("JWT_SECRET_KEY", "dev-secret-key-for-testing")
+
+
+# ── 情绪归一化 ──────────────────────────────────────────────────────────
+
+
+def test_normalize_emotion_english_values():
+    from packages.application.cosyvoice_service import normalize_emotion
+
+    assert normalize_emotion("natural") == "natural"
+    assert normalize_emotion("excited") == "excited"
+    assert normalize_emotion("calm") == "calm"
+    assert normalize_emotion("friendly") == "friendly"
+    # 大小写 / 空白容错
+    assert normalize_emotion("  Excited  ") == "excited"
+
+
+def test_normalize_emotion_chinese_values():
+    from packages.application.cosyvoice_service import normalize_emotion
+
+    assert normalize_emotion("自然") == "natural"
+    assert normalize_emotion("兴奋") == "excited"
+    assert normalize_emotion("沉稳") == "calm"
+    assert normalize_emotion("亲切") == "friendly"
+
+
+def test_normalize_emotion_invalid_returns_empty():
+    from packages.application.cosyvoice_service import normalize_emotion
+
+    assert normalize_emotion("") == ""
+    assert normalize_emotion("angry") == ""
+    assert normalize_emotion("喜怒哀乐") == ""
+
+
+# ── CosyVoice payload 携带 emotion + rate ──────────────────────────────
+
+
+def _make_service_with_captured_client(captured: dict):
+    """构造 CosyVoiceService，拦截 post 请求体到 captured['json']."""
+    import httpx as _httpx
+
+    from packages.application import cosyvoice_service as mod
+
+    mock_client = MagicMock(spec=_httpx.Client)
+    resp = MagicMock()
+    resp.status_code = 200
+    resp.json.return_value = {
+        "request_id": "req-1",
+        "output": {"audio": {"url": "https://tts/a.mp3", "duration": 1.0}},
+    }
+    resp.raise_for_status = MagicMock()
+
+    def fake_request(method, url, headers, json, timeout):
+        captured["json"] = json
+        return resp
+
+    mock_client.request.side_effect = fake_request
+
+    with patch.object(mod, "get_shared_settings") as settings_patch:
+        s = MagicMock()
+        s.cosyvoice_api_key = "sk-test"
+        s.cosyvoice_base_url = "https://x/api/v1"
+        s.cosyvoice_model = "cosyvoice-v3-flash"
+        s.cosyvoice_clone_model = "voice-enrollment"
+        s.cosyvoice_format = "mp3"
+        s.cosyvoice_sample_rate = 22050
+        s.cosyvoice_voice = "longxiaochun"
+        settings_patch.return_value = s
+        svc = mod.CosyVoiceService(http_client=mock_client)
+    return svc
+
+
+def test_submit_synthesize_payload_includes_emotion_and_rate():
+    captured: dict = {}
+    svc = _make_service_with_captured_client(captured)
+
+    svc.submit_synthesize_task(text="你好", voice_id="v-1", speed=1.5, emotion="兴奋")
+
+    inp = captured["json"]["input"]
+    assert inp["emotion"] == "excited"
+    assert inp["rate"] == 1.5
+
+
+def test_submit_synthesize_payload_omits_emotion_when_empty():
+    captured: dict = {}
+    svc = _make_service_with_captured_client(captured)
+
+    svc.submit_synthesize_task(text="你好", voice_id="v-1")
+
+    assert "emotion" not in captured["json"]["input"]
+
+
+# ── 对口型 TTS 直生分支 ─────────────────────────────────────────────────
+
+
+def _lipsync_service_with_mocks():
+    from app.services.lipsync_service import LipsyncService
+
+    db = MagicMock()
+    client = MagicMock()
+    client.is_available = True
+    client.submit_lipsync.return_value = {
+        "success": True,
+        "task_id": "mk-1",
+        "request_id": "req-1",
+    }
+    cosy = MagicMock()
+    cosy.submit_synthesize_task.return_value = {
+        "audio_url": "https://tts/raw.mp3",
+        "request_id": "tts-req",
+        "audio_duration": 3.0,
+    }
+    svc = LipsyncService(db, client=client, cosyvoice_service=cosy, voice_clone_repo=MagicMock())
+    # _resolve_voice_id 默认原样返回（repo.get 返回 None）
+    svc._voice_clone_repo.get.return_value = None
+    return svc, client, cosy
+
+
+def test_create_job_tts_direct_mode_synthesizes_audio():
+    svc, client, cosy = _lipsync_service_with_mocks()
+
+    with (
+        patch("app.services.lipsync_service.get_shared_storage_service") as storage_patch,
+        patch("app.services.lipsync_service.safe_download_bytes") as dl_patch,
+    ):
+        storage = MagicMock()
+        storage.upload_file.return_value = "https://oss/tts.mp3"
+        storage_patch.return_value = storage
+        dl_patch.return_value = b"FAKEAUDIO"
+
+        job = svc.create_job(
+            user_id="user-1",
+            video_url="https://oss/person.mp4",
+            voice_id="cosy-v1",
+            script_text="你好世界",
+            speed=1.2,
+            emotion="兴奋",
+        )
+
+    # 调了 TTS 合成，带 speed/emotion
+    cosy.submit_synthesize_task.assert_called_once()
+    _, kwargs = cosy.submit_synthesize_task.call_args
+    assert kwargs["speed"] == 1.2
+    assert kwargs["emotion"] == "excited"
+    assert kwargs["voice_id"] == "cosy-v1"
+    # MediaKit 用合成后的 OSS 音频 URL 提交
+    _, submit_kwargs = client.submit_lipsync.call_args
+    assert submit_kwargs["audio_url"] == "https://oss/tts.mp3"
+    assert submit_kwargs["video_url"] == "https://oss/person.mp4"
+    # DB 记录了 TTS 字段
+    assert job.emotion == "excited"
+    assert job.speed == 1.2
+
+
+def test_create_job_direct_audio_mode_skips_tts():
+    svc, client, cosy = _lipsync_service_with_mocks()
+
+    job = svc.create_job(
+        user_id="user-1",
+        video_url="https://oss/person.mp4",
+        audio_url="https://oss/ready.mp3",
+    )
+
+    cosy.submit_synthesize_task.assert_not_called()
+    _, submit_kwargs = client.submit_lipsync.call_args
+    assert submit_kwargs["audio_url"] == "https://oss/ready.mp3"
+
+
+def test_create_job_tts_failure_raises():
+    from app.services.mediakit_client import MediaKitError
+
+    from packages.application.cosyvoice_service import CosyVoiceError
+
+    svc, client, cosy = _lipsync_service_with_mocks()
+    cosy.submit_synthesize_task.side_effect = CosyVoiceError("Arrearage")
+
+    with pytest.raises(MediaKitError) as exc:
+        svc.create_job(
+            user_id="user-1",
+            video_url="https://oss/person.mp4",
+            voice_id="v-1",
+            script_text="文本",
+        )
+    assert exc.value.code == "TTSSynthesisFailed"
+    # TTS 失败不应提交 MediaKit
+    client.submit_lipsync.assert_not_called()
+
+
+# ── refresh 同步中间状态 ────────────────────────────────────────────────
+
+
+def test_refresh_syncs_running_status():
+    from app.services.lipsync_service import LipsyncService
+
+    db = MagicMock()
+    client = MagicMock()
+    client.get_task_status.return_value = {"success": True, "status": "running"}
+    svc = LipsyncService(db, client=client)
+
+    job = MagicMock()
+    job.status = "submitted"
+    job.mediakit_task_id = "mk-1"
+    job.id = "j-1"
+    svc.get_job = MagicMock(return_value=job)
+
+    result = svc.refresh_job_status("j-1", "user-1")
+    assert result.status == "running"
+
+
+# ── 智能封面 ────────────────────────────────────────────────────────────
+
+
+def test_smart_cover_selects_best_frame_and_persists():
+    from app.services import ai_avatar_cover_service as cov
+
+    snapshots = [
+        {"image_url": "https://mk/f0.jpg"},
+        {"image_url": "https://mk/f1.jpg"},
+    ]
+    with (
+        patch("packages.shared.mediakit_client.get_mediakit_client") as mk_patch,
+        patch("packages.shared.cover_frame_scorer.score_frames") as score_patch,
+        patch("httpx.get") as http_get,
+        patch("packages.shared.storage.get_shared_storage_service") as storage_patch,
+    ):
+        mk = MagicMock()
+        mk.is_available = True
+        mk.extract_frames.return_value = snapshots
+        mk_patch.return_value = mk
+        # score_frames 把 f1 选为最佳
+        score_patch.side_effect = lambda cands: [
+            {"url": "https://mk/f1.jpg", "score": 90.0, "image_path": cands[1]["image_path"]},
+            {"url": "https://mk/f0.jpg", "score": 60.0, "image_path": cands[0]["image_path"]},
+        ]
+        resp = MagicMock()
+        resp.content = b"IMGDATA"
+        resp.raise_for_status = MagicMock()
+        http_get.return_value = resp
+        storage = MagicMock()
+        storage.upload_file.return_value = "https://oss/cover.jpg"
+        storage_patch.return_value = storage
+
+        url = cov.generate_smart_cover("https://oss/avatar.mp4", job_id="job-1")
+
+    assert url == "https://oss/cover.jpg"
+    mk.extract_frames.assert_called_once()
+    score_patch.assert_called_once()
+
+
+def test_smart_cover_returns_empty_when_mediakit_unavailable():
+    from app.services import ai_avatar_cover_service as cov
+
+    with patch("packages.shared.mediakit_client.get_mediakit_client") as mk_patch:
+        mk = MagicMock()
+        mk.is_available = False
+        mk_patch.return_value = mk
+        url = cov.generate_smart_cover("https://oss/avatar.mp4")
+    assert url == ""
+
+
+# ── 渲染 script_id 可选（手动文案直生场景）──────────────────────────────
+
+
+def test_render_request_script_id_optional():
+    import os
+    import sys
+
+    sys.path.insert(0, os.path.join(os.path.dirname(__file__), "..", "..", "apps", "api"))
+    from app.schemas.ai_avatar_render import CreateAiAvatarRenderRequest
+
+    # 手动文案直生：不传 script_id 也合法
+    req = CreateAiAvatarRenderRequest(lipsync_job_id="j-1")
+    assert req.script_id == ""
+
+    # 空白被 strip
+    req2 = CreateAiAvatarRenderRequest(lipsync_job_id="j-1", script_id="   ")
+    assert req2.script_id == ""
+
+    # title_config 是单个 dict
+    req3 = CreateAiAvatarRenderRequest(
+        lipsync_job_id="j-1",
+        title_config={"text": "标题", "position": "top", "font_size": 40},
+    )
+    assert req3.title_config["position"] == "top"

tests/unit/test_ai_avatar_render_service.py

@@ -176,13 +176,23 @@ class TestSchemaValidation:
                 script_id="script-1",
             )
 
-    def test_create_request_empty_script_id(self):
+    def test_create_request_empty_script_id_normalized(self):
+        """script_id 改为可选（TTS 直生场景）：空白值应规范化为空串而非抛错。"""
         from app.schemas.ai_avatar_render import CreateAiAvatarRenderRequest
 
-        with pytest.raises(ValueError, match="script_id 不能为空"):
+        req = CreateAiAvatarRenderRequest(
+            lipsync_job_id="lipsync-1",
+            script_id="  ",
+        )
+        assert req.script_id == ""
+
+    def test_create_request_empty_lipsync_job_id_raises(self):
+        from app.schemas.ai_avatar_render import CreateAiAvatarRenderRequest
+
+        with pytest.raises(ValueError, match="lipsync_job_id 不能为空"):
             CreateAiAvatarRenderRequest(
-                lipsync_job_id="lipsync-1",
-                script_id="  ",
+                lipsync_job_id="  ",
+                script_id="script-1",
             )
 
 

tests/unit/test_lipsync_routes.py

@@ -1,4 +1,4 @@
-"""对口型 API 路由 + Service 单元测试 — #1796.
+"""对口型 API 路由 + Service 单元测试 — #1796, #1809 参数调整.
 
 CI 增量映射: lipsync.py (route) + lipsync_service.py → test_lipsync_routes.py
 """
@@ -33,6 +33,19 @@ def mock_mediakit():
     return client
 
 
+@pytest.fixture
+def mock_cosyvoice():
+    """Mock CosyVoice 服务（v3: service 内部走 submit_synthesize_task，返回 dict）."""
+    service = MagicMock()
+    service.submit_synthesize_task.return_value = {
+        "audio_url": "https://oss.example.com/tts-output.mp3",
+        "request_id": "tts-req-789",
+    }
+    # synthesize_speech 保留给直接同步调用场景
+    service.synthesize_speech.return_value = MagicMock(audio_url="https://oss.example.com/tts-output.mp3")
+    return service
+
+
 def _make_mock_job(
     job_id="job-1",
     user_id="user-1",
@@ -48,7 +61,7 @@ def _make_mock_job(
     m.user_id = user_id
     m.project_id = ""
     m.video_url = "https://example.com/video.mp4"
-    m.audio_url = "https://example.com/audio.mp3"
+    m.audio_url = "https://oss.example.com/tts-output.mp3"
     m.enable_video_loop = False
     m.mediakit_task_id = mediakit_task_id
     m.status = status
@@ -64,16 +77,19 @@ def _make_mock_job(
 
 
 class TestSchemaValidation:
-    """Schema 验证测试."""
+    """Schema 验证测试 — #1809 新参数结构."""
 
-    def test_valid_video_url(self):
+    def test_valid_request(self):
         from app.schemas.lipsync import CreateLipsyncJobRequest
 
         req = CreateLipsyncJobRequest(
             video_url="https://example.com/video.mp4",
-            audio_url="https://example.com/audio.mp3",
+            voice_id="longxiaochun_v3",
+            script_text="大家好，欢迎来到直播间",
         )
         assert req.video_url == "https://example.com/video.mp4"
+        assert req.voice_id == "longxiaochun_v3"
+        assert req.script_text == "大家好，欢迎来到直播间"
 
     def test_invalid_video_url_not_mp4(self):
         from app.schemas.lipsync import CreateLipsyncJobRequest
@@ -81,7 +97,8 @@ class TestSchemaValidation:
         with pytest.raises(ValueError, match="MP4"):
             CreateLipsyncJobRequest(
                 video_url="https://example.com/video.mov",
-                audio_url="https://example.com/audio.mp3",
+                voice_id="longxiaochun_v3",
+                script_text="测试文本",
             )
 
     def test_invalid_video_url_empty(self):
@@ -90,7 +107,8 @@ class TestSchemaValidation:
         with pytest.raises(ValueError, match="不能为空"):
             CreateLipsyncJobRequest(
                 video_url="  ",
-                audio_url="https://example.com/audio.mp3",
+                voice_id="longxiaochun_v3",
+                script_text="测试文本",
             )
 
     def test_invalid_video_url_not_http(self):
@@ -99,26 +117,38 @@ class TestSchemaValidation:
         with pytest.raises(ValueError, match="HTTP"):
             CreateLipsyncJobRequest(
                 video_url="ftp://example.com/video.mp4",
-                audio_url="https://example.com/audio.mp3",
+                voice_id="longxiaochun_v3",
+                script_text="测试文本",
             )
 
-    def test_valid_audio_formats(self):
+    def test_empty_voice_id_rejected(self):
         from app.schemas.lipsync import CreateLipsyncJobRequest
 
-        for ext in [".mp3", ".aac", ".wav", ".m4a", ".flac"]:
-            req = CreateLipsyncJobRequest(
-                video_url="https://example.com/video.mp4",
-                audio_url=f"https://example.com/audio{ext}",
-            )
-            assert req.audio_url.endswith(ext)
-
-    def test_invalid_audio_format(self):
-        from app.schemas.lipsync import CreateLipsyncJobRequest
-
-        with pytest.raises(ValueError, match="格式不支持"):
+        with pytest.raises(ValueError, match="voice_id"):
             CreateLipsyncJobRequest(
                 video_url="https://example.com/video.mp4",
-                audio_url="https://example.com/audio.ogg",
+                voice_id="  ",
+                script_text="测试文本",
+            )
+
+    def test_empty_script_text_rejected(self):
+        from app.schemas.lipsync import CreateLipsyncJobRequest
+
+        with pytest.raises(ValueError, match="script_text"):
+            CreateLipsyncJobRequest(
+                video_url="https://example.com/video.mp4",
+                voice_id="longxiaochun_v3",
+                script_text="",
+            )
+
+    def test_script_text_too_long(self):
+        from app.schemas.lipsync import CreateLipsyncJobRequest
+
+        with pytest.raises(ValueError, match="5000"):
+            CreateLipsyncJobRequest(
+                video_url="https://example.com/video.mp4",
+                voice_id="longxiaochun_v3",
+                script_text="x" * 5001,
             )
 
     def test_enable_video_loop_default(self):
@@ -126,7 +156,8 @@ class TestSchemaValidation:
 
         req = CreateLipsyncJobRequest(
             video_url="https://example.com/video.mp4",
-            audio_url="https://example.com/audio.mp3",
+            voice_id="longxiaochun_v3",
+            script_text="测试文本",
         )
         assert req.enable_video_loop is False
 
@@ -136,53 +167,146 @@ class TestSchemaValidation:
 
         req = CreateLipsyncJobRequest(
             video_url="https://example.com/video.mp4?token=abc",
-            audio_url="https://example.com/audio.mp3?sign=xyz",
+            voice_id="longxiaochun_v3",
+            script_text="测试文本",
         )
         assert "?token=" in req.video_url
 
+    def test_dual_mode_fields_present(self):
+        """v3 契约: 双模式——支持直接音频 audio_url，也支持 TTS 直生 voice_id+script_text."""
+        from app.schemas.lipsync import CreateLipsyncJobRequest
 
-class TestLipsyncServiceUnit:
-    """Service 层单元测试（纯 mock，不依赖数据库）."""
+        fields = CreateLipsyncJobRequest.model_fields.keys()
+        # 直接音频模式
+        assert "audio_url" in fields
+        # TTS 直生模式
+        assert "voice_id" in fields
+        assert "script_text" in fields
+        # 语速/情绪透传
+        assert "speed" in fields
+        assert "emotion" in fields
 
-    def test_create_job_success(self, mock_mediakit):
-        from app.services.lipsync_service import LipsyncService
+    def test_direct_audio_mode_accepted(self):
+        """v3 契约: 只传 audio_url（直接音频模式）也合法，无需 voice_id/script_text."""
+        from app.schemas.lipsync import CreateLipsyncJobRequest
 
-        mock_db = MagicMock()
-        svc = LipsyncService(mock_db, client=mock_mediakit)
-
-        # 模拟 db.add + db.flush 不报错
-        mock_db.add = MagicMock()
-        mock_db.flush = MagicMock()
-        mock_db.commit = MagicMock()
-        mock_db.refresh = MagicMock()
-
-        job = svc.create_job(
-            user_id="user-1",
+        req = CreateLipsyncJobRequest(
             video_url="https://example.com/video.mp4",
             audio_url="https://example.com/audio.mp3",
         )
+        assert req.audio_url == "https://example.com/audio.mp3"
+
+    def test_neither_mode_rejected(self):
+        """v3 契约: audio_url 与 voice_id+script_text 都缺时应报错."""
+        from app.schemas.lipsync import CreateLipsyncJobRequest
+
+        with pytest.raises(ValueError):
+            CreateLipsyncJobRequest(video_url="https://example.com/video.mp4")
+
+
+class TestLipsyncServiceUnit:
+    """Service 层单元测试（纯 mock，不依赖数据库）— #1809 更新."""
+
+    def test_create_job_success(self, mock_mediakit, mock_cosyvoice):
+        """v3: TTS 直生——service 内部 submit_synthesize_task 合成后转存 OSS，再提交 MediaKit."""
+        from app.services.lipsync_service import LipsyncService
+
+        mock_db = MagicMock()
+        mock_repo = MagicMock()
+        mock_repo.get.return_value = None  # 预置音色，原样返回 voice_id
+
+        with (
+            patch("app.services.lipsync_service.get_shared_storage_service") as storage_patch,
+            patch("app.services.lipsync_service.safe_download_bytes") as dl_patch,
+        ):
+            storage_patch.return_value.upload_file.return_value = "https://my-oss/tts.mp3"
+            dl_patch.return_value = b"audio-bytes"
+
+            svc = LipsyncService(
+                mock_db,
+                client=mock_mediakit,
+                cosyvoice_service=mock_cosyvoice,
+                voice_clone_repo=mock_repo,
+            )
+
+            job = svc.create_job(
+                user_id="user-1",
+                video_url="https://example.com/video.mp4",
+                voice_id="longxiaochun_v3",
+                script_text="大家好，欢迎来到直播间",
+                speed=1.2,
+                emotion="兴奋",
+            )
 
         assert job.status == "submitted"
         assert job.mediakit_task_id == "mk-task-123"
-        mock_mediakit.submit_lipsync.assert_called_once()
+        # TTS 直生走 submit_synthesize_task，带语速/情绪
+        mock_cosyvoice.submit_synthesize_task.assert_called_once()
+        _, kwargs = mock_cosyvoice.submit_synthesize_task.call_args
+        assert kwargs["text"] == "大家好，欢迎来到直播间"
+        assert kwargs["voice_id"] == "longxiaochun_v3"
+        assert kwargs["speed"] == 1.2
+        assert kwargs["emotion"] == "excited"  # 兴奋→excited
+        # job 记录透传字段
+        assert job.speed == 1.2
+        assert job.emotion == "excited"
+        # MediaKit 用转存后的 OSS audio_url
+        call_kwargs = mock_mediakit.submit_lipsync.call_args
+        assert call_kwargs.kwargs["audio_url"] == "https://my-oss/tts.mp3"
 
-    def test_create_job_api_failure(self, mock_mediakit):
+    def test_create_job_tts_failure(self, mock_mediakit):
+        """v3: TTS 合成失败时，CosyVoiceError 被包装为 MediaKitError(TTSSynthesisFailed)，
+        在建 DB 记录之前抛出，不提交 MediaKit。"""
+        from app.services.lipsync_service import LipsyncService
+        from app.services.mediakit_client import MediaKitError
+
+        from packages.application.cosyvoice_service import CosyVoiceError
+
+        mock_cosyvoice = MagicMock()
+        mock_cosyvoice.submit_synthesize_task.side_effect = CosyVoiceError("Arrearage 欠费")
+
+        mock_db = MagicMock()
+        mock_repo = MagicMock()
+        mock_repo.get.return_value = None
+
+        svc = LipsyncService(
+            mock_db,
+            client=mock_mediakit,
+            cosyvoice_service=mock_cosyvoice,
+            voice_clone_repo=mock_repo,
+        )
+
+        with pytest.raises(MediaKitError) as exc_info:
+            svc.create_job(
+                user_id="user-1",
+                video_url="https://example.com/video.mp4",
+                voice_id="longxiaochun_v3",
+                script_text="测试文本",
+            )
+        assert exc_info.value.code == "TTSSynthesisFailed"
+
+        # 不应提交到 MediaKit
+        mock_mediakit.submit_lipsync.assert_not_called()
+
+    def test_create_job_api_failure(self, mock_mediakit, mock_cosyvoice):
+        """MediaKit 提交失败."""
         from app.services.lipsync_service import LipsyncService
         from app.services.mediakit_client import MediaKitError
 
         mock_mediakit.submit_lipsync.side_effect = MediaKitError("API 调用失败", code="SubmitFailed")
 
         mock_db = MagicMock()
-        svc = LipsyncService(mock_db, client=mock_mediakit)
+        svc = LipsyncService(mock_db, client=mock_mediakit, cosyvoice_service=mock_cosyvoice)
 
         with pytest.raises(MediaKitError, match="API 调用失败"):
             svc.create_job(
                 user_id="user-1",
                 video_url="https://example.com/video.mp4",
-                audio_url="https://example.com/audio.mp3",
+                voice_id="longxiaochun_v3",
+                script_text="测试文本",
             )
 
-    def test_get_job_delegates_to_db(self, mock_mediakit):
+    def test_get_job_delegates_to_db(self, mock_mediakit, mock_cosyvoice):
         from app.services.lipsync_service import LipsyncService
 
         mock_job = _make_mock_job()
@@ -193,13 +317,13 @@ class TestLipsyncServiceUnit:
         mock_query.filter.return_value = mock_filter
         mock_db.query.return_value = mock_query
 
-        svc = LipsyncService(mock_db, client=mock_mediakit)
+        svc = LipsyncService(mock_db, client=mock_mediakit, cosyvoice_service=mock_cosyvoice)
         result = svc.get_job("job-1", "user-1")
 
         assert result is mock_job
         mock_db.query.assert_called_once()
 
-    def test_get_job_not_found(self, mock_mediakit):
+    def test_get_job_not_found(self, mock_mediakit, mock_cosyvoice):
         from app.services.lipsync_service import LipsyncService
 
         mock_db = MagicMock()
@@ -209,11 +333,11 @@ class TestLipsyncServiceUnit:
         mock_query.filter.return_value = mock_filter
         mock_db.query.return_value = mock_query
 
-        svc = LipsyncService(mock_db, client=mock_mediakit)
+        svc = LipsyncService(mock_db, client=mock_mediakit, cosyvoice_service=mock_cosyvoice)
         result = svc.get_job("nonexistent", "user-1")
         assert result is None
 
-    def test_refresh_job_completed(self, mock_mediakit):
+    def test_refresh_job_completed(self, mock_mediakit, mock_cosyvoice):
         from app.services.lipsync_service import LipsyncService
 
         mock_job = _make_mock_job(status="submitted")
@@ -224,14 +348,14 @@ class TestLipsyncServiceUnit:
         mock_query.filter.return_value = mock_filter
         mock_db.query.return_value = mock_query
 
-        svc = LipsyncService(mock_db, client=mock_mediakit)
+        svc = LipsyncService(mock_db, client=mock_mediakit, cosyvoice_service=mock_cosyvoice)
         result = svc.refresh_job_status("job-1", "user-1")
 
         assert result.status == "completed"
         assert result.output_video_url == "https://output.mp4"
         assert result.output_duration == 30.0
 
-    def test_refresh_job_failed(self, mock_mediakit):
+    def test_refresh_job_failed(self, mock_mediakit, mock_cosyvoice):
         from app.services.lipsync_service import LipsyncService
 
         mock_mediakit.get_task_status.return_value = {
@@ -251,13 +375,13 @@ class TestLipsyncServiceUnit:
         mock_query.filter.return_value = mock_filter
         mock_db.query.return_value = mock_query
 
-        svc = LipsyncService(mock_db, client=mock_mediakit)
+        svc = LipsyncService(mock_db, client=mock_mediakit, cosyvoice_service=mock_cosyvoice)
         result = svc.refresh_job_status("job-1", "user-1")
 
         assert result.status == "failed"
         assert result.error_code == "DownloadFailed"
 
-    def test_refresh_job_already_completed(self, mock_mediakit):
+    def test_refresh_job_already_completed(self, mock_mediakit, mock_cosyvoice):
         """已完成的任务不轮询."""
         from app.services.lipsync_service import LipsyncService
 
@@ -269,14 +393,14 @@ class TestLipsyncServiceUnit:
         mock_query.filter.return_value = mock_filter
         mock_db.query.return_value = mock_query
 
-        svc = LipsyncService(mock_db, client=mock_mediakit)
+        svc = LipsyncService(mock_db, client=mock_mediakit, cosyvoice_service=mock_cosyvoice)
         result = svc.refresh_job_status("job-1", "user-1")
 
         # 不应调用 MediaKit
         mock_mediakit.get_task_status.assert_not_called()
         assert result.status == "completed"
 
-    def test_cancel_job_pending(self, mock_mediakit):
+    def test_cancel_job_pending(self, mock_mediakit, mock_cosyvoice):
         from app.services.lipsync_service import LipsyncService
 
         mock_job = _make_mock_job(status="pending")
@@ -287,12 +411,12 @@ class TestLipsyncServiceUnit:
         mock_query.filter.return_value = mock_filter
         mock_db.query.return_value = mock_query
 
-        svc = LipsyncService(mock_db, client=mock_mediakit)
+        svc = LipsyncService(mock_db, client=mock_mediakit, cosyvoice_service=mock_cosyvoice)
         result = svc.cancel_job("job-1", "user-1")
 
         assert result.status == "cancelled"
 
-    def test_cancel_job_completed_not_allowed(self, mock_mediakit):
+    def test_cancel_job_completed_not_allowed(self, mock_mediakit, mock_cosyvoice):
         from app.services.lipsync_service import LipsyncService
 
         mock_job = _make_mock_job(status="completed")
@@ -303,8 +427,172 @@ class TestLipsyncServiceUnit:
         mock_query.filter.return_value = mock_filter
         mock_db.query.return_value = mock_query
 
-        svc = LipsyncService(mock_db, client=mock_mediakit)
+        svc = LipsyncService(mock_db, client=mock_mediakit, cosyvoice_service=mock_cosyvoice)
         result = svc.cancel_job("job-1", "user-1")
 
         # 已完成不可取消
         assert result.status == "completed"
+
+    def test_create_job_stores_tts_audio_url(self, mock_mediakit, mock_cosyvoice):
+        """v3: TTS 直生模式下 job.audio_url 为转存到自家 OSS 的永久地址."""
+        from app.services.lipsync_service import LipsyncService
+
+        mock_db = MagicMock()
+        mock_repo = MagicMock()
+        mock_repo.get.return_value = None
+
+        with (
+            patch("app.services.lipsync_service.get_shared_storage_service") as storage_patch,
+            patch("app.services.lipsync_service.safe_download_bytes") as dl_patch,
+        ):
+            storage_patch.return_value.upload_file.return_value = "https://my-oss/permanent.mp3"
+            dl_patch.return_value = b"audio-bytes"
+
+            svc = LipsyncService(
+                mock_db,
+                client=mock_mediakit,
+                cosyvoice_service=mock_cosyvoice,
+                voice_clone_repo=mock_repo,
+            )
+            job = svc.create_job(
+                user_id="user-1",
+                video_url="https://example.com/video.mp4",
+                voice_id="my-clone-voice",
+                script_text="这是一段测试文本",
+            )
+
+        # job.audio_url 是转存 OSS 后的永久地址
+        assert job.audio_url == "https://my-oss/permanent.mp3"
+
+    def test_create_job_direct_audio_skips_tts(self, mock_mediakit, mock_cosyvoice):
+        """v3: 直接音频模式（传 audio_url）不触发 TTS，原样把 audio_url 提交 MediaKit."""
+        from app.services.lipsync_service import LipsyncService
+
+        mock_db = MagicMock()
+        svc = LipsyncService(
+            mock_db,
+            client=mock_mediakit,
+            cosyvoice_service=mock_cosyvoice,
+            voice_clone_repo=MagicMock(),
+        )
+        job = svc.create_job(
+            user_id="user-1",
+            video_url="https://example.com/video.mp4",
+            audio_url="https://example.com/direct-audio.mp3",
+        )
+
+        mock_cosyvoice.submit_synthesize_task.assert_not_called()
+        call_kwargs = mock_mediakit.submit_lipsync.call_args
+        assert call_kwargs.kwargs["audio_url"] == "https://example.com/direct-audio.mp3"
+        assert job.audio_url == "https://example.com/direct-audio.mp3"
+
+
+class TestErrorHandling:
+    """v3: 音色解析与错误码在 service 层处理，路由层做 HTTP 状态码映射."""
+
+    def test_voice_id_resolve_forbidden(self, mock_mediakit, mock_cosyvoice):
+        """v3: 克隆音色属于他人时 service._resolve_voice_id 抛 VoiceForbidden（路由映射 403）."""
+        from app.services.lipsync_service import LipsyncService
+        from app.services.mediakit_client import MediaKitError
+
+        mock_db = MagicMock()
+        mock_repo = MagicMock()
+        other_profile = MagicMock()
+        other_profile.user_id = "user-other"
+        other_profile.voice_id = "cv-voice-1"
+        mock_repo.get.return_value = other_profile
+
+        svc = LipsyncService(
+            mock_db,
+            client=mock_mediakit,
+            cosyvoice_service=mock_cosyvoice,
+            voice_clone_repo=mock_repo,
+        )
+
+        with pytest.raises(MediaKitError) as exc_info:
+            svc.create_job(
+                user_id="user-1",
+                video_url="https://example.com/video.mp4",
+                voice_id="clone-profile-id",
+                script_text="测试",
+            )
+        assert exc_info.value.code == "VoiceForbidden"
+        mock_mediakit.submit_lipsync.assert_not_called()
+
+    def test_voice_id_resolve_not_ready(self, mock_mediakit, mock_cosyvoice):
+        """v3: 克隆音色尚未生成 voice_id 时抛 VoiceNotReady（路由映射 400）."""
+        from app.services.lipsync_service import LipsyncService
+        from app.services.mediakit_client import MediaKitError
+
+        mock_db = MagicMock()
+        mock_repo = MagicMock()
+        profile = MagicMock()
+        profile.user_id = "user-1"
+        profile.voice_id = ""  # 克隆未完成
+        mock_repo.get.return_value = profile
+
+        svc = LipsyncService(
+            mock_db,
+            client=mock_mediakit,
+            cosyvoice_service=mock_cosyvoice,
+            voice_clone_repo=mock_repo,
+        )
+
+        with pytest.raises(MediaKitError) as exc_info:
+            svc.create_job(
+                user_id="user-1",
+                video_url="https://example.com/video.mp4",
+                voice_id="clone-profile-id",
+                script_text="测试",
+            )
+        assert exc_info.value.code == "VoiceNotReady"
+
+    def test_tts_value_error_mapped_to_invalid_param(self, mock_mediakit):
+        """v3: CosyVoice 抛 ValueError（参数无效）被包装为 TTSInvalidParam（路由映射 400）."""
+        from app.services.lipsync_service import LipsyncService
+        from app.services.mediakit_client import MediaKitError
+
+        mock_cosyvoice = MagicMock()
+        mock_cosyvoice.submit_synthesize_task.side_effect = ValueError("voice_id 为空")
+
+        mock_db = MagicMock()
+        mock_repo = MagicMock()
+        mock_repo.get.return_value = None
+
+        svc = LipsyncService(
+            mock_db,
+            client=mock_mediakit,
+            cosyvoice_service=mock_cosyvoice,
+            voice_clone_repo=mock_repo,
+        )
+
+        with pytest.raises(MediaKitError) as exc_info:
+            svc.create_job(
+                user_id="user-1",
+                video_url="https://example.com/video.mp4",
+                voice_id="some-voice",
+                script_text="test",
+            )
+        assert exc_info.value.code == "TTSInvalidParam"
+
+    def test_missing_both_inputs_raises_invalid_input(self, mock_mediakit, mock_cosyvoice):
+        """v3: 既无 audio_url 又无 voice_id+script_text 时抛 InvalidInput（路由映射 400）."""
+        from app.services.lipsync_service import LipsyncService
+        from app.services.mediakit_client import MediaKitError
+
+        mock_db = MagicMock()
+        svc = LipsyncService(
+            mock_db,
+            client=mock_mediakit,
+            cosyvoice_service=mock_cosyvoice,
+            voice_clone_repo=MagicMock(),
+        )
+
+        with pytest.raises(MediaKitError) as exc_info:
+            svc.create_job(
+                user_id="user-1",
+                video_url="https://example.com/video.mp4",
+            )
+        assert exc_info.value.code == "InvalidInput"
+        mock_cosyvoice.submit_synthesize_task.assert_not_called()
+        mock_mediakit.submit_lipsync.assert_not_called()

tests/unit/test_tts_preview.py

@@ -101,6 +101,7 @@ class TestTTSPreviewEndpoint:
             text="你好世界",
             voice_id="longxiaochun",
             speed=1.0,
+            emotion="",
         )
 
     def test_preview_with_speed(self):
@@ -146,6 +147,7 @@ class TestTTSPreviewEndpoint:
             text="测试",
             voice_id="v1",
             speed=1.5,
+            emotion="",
         )
 
     def test_preview_cosyvoice_error_returns_502(self):
@@ -330,6 +332,7 @@ class TestTTSPreviewEndpoint:
             text="克隆音色测试",
             voice_id="cosyvoice_actual_voice_123",
             speed=1.0,
+            emotion="",
         )
         # Verify repo was queried with the UUID
         mock_clone_repo.get.assert_called_once_with("abc123-uuid-of-profile")
@@ -406,6 +409,7 @@ class TestTTSPreviewEndpoint:
             text="预设音色测试",
             voice_id="longxiaoxia_v3",
             speed=1.0,
+            emotion="",
         )
 
     def test_preview_clone_voice_wrong_user_returns_403(self):