test: remove deleted module imports from smoke.test.tsx

fix(frontend): #1896 删除侵权华康字体修复PreviewPlayer字体映射

问题：
1. "华康俪金黑"@font-face字体文件缺失（404）且有版权风险
2. PreviewPlayer直接用中文font_preset/font作为fontFamily，浏览器不识别

修改：
- 删除"华康俪金黑"字体选项（FONT_OPTIONS+FONT_FAMILY_MAP）和@font-face声明
- 统一 editing-planner/constants/clipProperties.ts 和 subtitleStyle.ts 从 generate/constants 重新导出 FONT_OPTIONS，避免多处维护
- PreviewPlayer.tsx 标题/字幕 fontFamily 通过 getFontFamily() 映射为浏览器可识别字体栈
- FrontendPreviewPlayer.tsx 标题 fontFamily 同样通过 getFontFamily() 映射
- TitleStylePanel/PanelTitleConfig/SubtitleStylePanel 等组件因复用统一常量自动生效
- 最终保留5个字体：思源黑体、思源宋体、苹方、微软雅黑、楷体
- PingFang 别名保留在 FONT_FAMILY_MAP 中以兼容旧数据，但不在 UI 选项中显示

Refs #1896

.gitea/workflows/ci-pipeline.yml

@@ -1022,12 +1022,22 @@ jobs:
         BRANCH_TAG="${IMAGE_FULL}:${GITHUB_REF_NAME}"
         CACHE_REF="${REGISTRY}/${{ matrix.cache_name }}:${GITHUB_REF_NAME}"
 
+        # develop 分支额外推送 :dev tag（Watchtower 监听的滚动更新 tag）
+        if [ "${GITHUB_REF_NAME}" = "develop" ]; then
+          DEV_TAG="${IMAGE_FULL}:dev"
+          EXTRA_TAGS="$BRANCH_TAG $DEV_TAG"
+          PUSHED_TAGS_SUMMARY="${BRANCH_TAG} + ${DEV_TAG}"
+        else
+          EXTRA_TAGS="$BRANCH_TAG"
+          PUSHED_TAGS_SUMMARY="${BRANCH_TAG}"
+        fi
+
         EXTRA_BUILD_ARGS="APP_VERSION=\"${GITHUB_SHA}\""
 
         NO_CACHE_FLAG=""
         for i in 1 2 3; do
           echo "=== Docker build 尝试 $i/3 (${{ matrix.service_display }}) ==="
-          if EXTRA_TAGS="$BRANCH_TAG" bash scripts/ci/docker_build_push.sh $NO_CACHE_FLAG ${{ matrix.dockerfile }} "${IMAGE_TAG}" "${CACHE_REF}" $EXTRA_BUILD_ARGS; then
+          if EXTRA_TAGS="$EXTRA_TAGS" bash scripts/ci/docker_build_push.sh $NO_CACHE_FLAG ${{ matrix.dockerfile }} "${IMAGE_TAG}" "${CACHE_REF}" $EXTRA_BUILD_ARGS; then
             echo "✅ Docker build 成功"
             break
           fi
@@ -1040,7 +1050,7 @@ jobs:
           fi
         done
 
-        echo "${{ matrix.service_display }} image pushed: ${IMAGE_TAG} (+ ${BRANCH_TAG})"
+        echo "${{ matrix.service_display }} image pushed: ${IMAGE_TAG} (+ ${PUSHED_TAGS_SUMMARY})"
 
     - name: Job duration summary
       if: always()
@@ -1244,9 +1254,11 @@ jobs:
         ACR_PASSWORD: ${{ secrets.ACR_PASSWORD }}
       run: |
         set -eux
-        staging_host="${STAGING_SSH_HOST:-47.98.113.167}"
+        # CI runner (act_runner) 部署在 116 staging 本机（116.62.226.203 公网 22 未开放），
+        # 默认走 127.0.0.1:22 本机 SSH，避免跨机网络依赖；可通过 secrets 覆盖。
+        staging_host="${STAGING_SSH_HOST:-127.0.0.1}"
         staging_user="${STAGING_SSH_USER:-root}"
-        staging_port="${STAGING_SSH_PORT:-22222}"
+        staging_port="${STAGING_SSH_PORT:-22}"
         echo "Host: $staging_host"
         echo "Port: $staging_port"
 
@@ -1470,7 +1482,6 @@ jobs:
       - validate-security
       - validate-python
       - unit-tests
-      - frontend-lint
       - frontend-unit-test
     if: github.event_name == 'push' && github.ref_name == 'main' && !failure() && !cancelled()
     strategy:
@@ -2124,3 +2135,4 @@ jobs:
           START_TIME=""
           [ -f /tmp/ci_job_start_time ] && START_TIME=$(cat /tmp/ci_job_start_time)
           curl -sfH "Authorization: token ${GITHUB_TOKEN:-$GITEA_TOKEN}" -o /tmp/_ci_trace.py "${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/raw/scripts/ci/ci_trace_report.py?ref=${GITHUB_SHA}" 2>/dev/null && python3 /tmp/_ci_trace.py --service xiaoxia-saas-ci --status $STATUS --start-time "$START_TIME" || true
+# CI retry trigger

EMPTY_COMMIT.txt

@@ -0,0 +1 @@
+retrigger3

README.md

@@ -263,3 +263,4 @@ pytest --cov=packages --cov-report=html
 ---
 
 **License**: MIT
+<!-- CI trigger: 1788229339 -->

alembic/versions/075_add_sentence_timings.py

@@ -0,0 +1,27 @@
+"""add sentence_timings to lipsync_jobs
+
+Revision ID: 075_add_sentence_timings
+Revises: 074_ai_avatar_render_script_id_optional
+Create Date: 2026-09-12
+"""
+
+import sqlalchemy as sa
+
+from alembic import op
+
+revision = "075_add_sentence_timings"
+down_revision = "074_render_script_id_optional"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    with op.batch_alter_table("lipsync_jobs") as batch:
+        batch.add_column(
+            sa.Column("sentence_timings", sa.JSON(), nullable=True),
+        )
+
+
+def downgrade() -> None:
+    with op.batch_alter_table("lipsync_jobs") as batch:
+        batch.drop_column("sentence_timings")

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

@@ -11,13 +11,14 @@
 from __future__ import annotations
 
 import logging
+from datetime import datetime, timezone
 
 from app.auth import AuthenticatedUser, get_current_user
 from app.dependencies import get_db_session
 from app.schemas.ai_avatar_render import (
     AiAvatarRenderJobResponse,
     CreateAiAvatarRenderRequest,
-    SmartCoverRequest,
+    FinalizeRenderResponse,
     SmartCoverResponse,
 )
 from app.services.ai_avatar_cover_service import generate_smart_cover
@@ -77,10 +78,16 @@ def create_render_job(
         from app.tasks.ai_avatar_render import execute_ai_avatar_render
 
         execute_ai_avatar_render.delay(job.id)
-    except Exception:
-        logger.warning("Celery 任务提交失败，渲染任务已创建但未触发执行: %s", job.id)
+    except Exception as exc:
+        logger.exception("Celery 任务投递失败（创建）: job_id=%s err=%s", job.id, exc)
+        job.status = "failed"
+        job.error_message = f"任务提交失败：{exc}"
+        job.updated_at = datetime.now(timezone.utc)
+        svc.db.commit()
+        svc.db.refresh(job)
+        return AiAvatarRenderJobResponse.model_validate(job)
 
-    return job
+    return AiAvatarRenderJobResponse.model_validate(job)
 
 
 # ── GET /jobs — 任务列表 ─────────────────────────────────────────────────
@@ -172,38 +179,54 @@ def retry_render_job(
         from app.tasks.ai_avatar_render import execute_ai_avatar_render
 
         execute_ai_avatar_render.delay(job.id)
-    except Exception:
-        logger.warning("Celery 任务提交失败，重试任务已重置但未触发执行: %s", job.id)
+    except Exception as exc:
+        logger.exception("Celery 任务投递失败（重试）: job_id=%s err=%s", job.id, exc)
+        job.status = "failed"
+        job.error_message = f"任务提交失败：{exc}"
+        job.updated_at = datetime.now(timezone.utc)
+        svc.db.commit()
+        svc.db.refresh(job)
+        return AiAvatarRenderJobResponse.model_validate(job)
 
-    return job
+    return AiAvatarRenderJobResponse.model_validate(job)
 
 
-
-# ── POST /smart-cover — 智能获取封面（MediaKit 抽帧 + 评分选帧）────────
+# ── POST /{job_id}/smart-cover — 从最终成片智能抽封面（步骤②）────────
 
 
-@router.post("/smart-cover", response_model=SmartCoverResponse)
-def generate_avatar_smart_cover(
-    body: SmartCoverRequest,
+@router.post("/{job_id}/smart-cover", response_model=SmartCoverResponse)
+def generate_render_smart_cover(
+    job_id: str,
     current_user: AuthenticatedUser = Depends(get_current_user),
-) -> SmartCoverResponse:
-    """智能获取数字人视频封面.
+    db: Session = Depends(get_db_session),
+):
+    """从最终渲染成片智能抽帧生成封面（MediaKit 抽帧 + 评分选最佳帧 + 转存 OSS）.
 
-    复用智能剪辑的 MediaKit 抽帧 + 质量评分选最佳帧逻辑（非 FFmpeg 简单截帧），
-    并将选中帧转存到自家 OSS，返回非临时的封面公网 URL。
-
-    前端「智能获取封面」按钮可直接调用本接口；不依赖渲染任务完成。
+    - 必须等渲染任务 completed 后才可调用（否则返回 400）
+    - 生成成功后自动更新 render_job 的 cover_config 与 output_cover_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")
+    from app.services.ai_avatar_render_service import AiAvatarRenderService
+
+    svc = AiAvatarRenderService(db)
+    job = svc.get_render_job(job_id, current_user.user.id)
+    if job is None:
+        raise HTTPException(status_code=404, detail="渲染任务不存在")
+    if job.status != "completed":
+        raise HTTPException(status_code=400, detail="请先完成视频生成")
+    video_url = (job.output_video_url or "").strip()
+    if not video_url:
+        raise HTTPException(status_code=400, detail="渲染成片视频 URL 为空")
 
     try:
-        cover_url = generate_smart_cover(video_url, max_frames=body.max_frames)
+        # 从最终成片抽帧，帧本身已含标题/B-roll，直接转存 OSS
+        cover_url = generate_smart_cover(video_url, job_id=job_id, max_frames=5)
     except Exception as exc:
         logger.error(
-            "智能封面生成异常: user=%s video_url=%s err=%s",
-            current_user.user.id, video_url[:80], exc,
+            "渲染成片智能封面生成异常: user=%s render_id=%s video_url=%s err=%s",
+            current_user.user.id,
+            job_id,
+            video_url[:80],
+            exc,
             exc_info=True,
         )
         cover_url = ""
@@ -214,5 +237,88 @@ def generate_avatar_smart_cover(
             status="fallback_failed",
             message="智能抽帧失败（MediaKit 不可用或抽帧异常），请稍后重试",
         )
-    logger.info("智能封面生成成功: user=%s cover_url=%s", current_user.user.id, cover_url[:120])
+
+    # 更新 render_job 的封面字段（异步写入 DB；失败不影响返回）
+    try:
+        job.cover_config = {
+            **(job.cover_config if isinstance(job.cover_config, dict) else {}),
+            "mode": "auto_frame",
+            "url": cover_url,
+        }
+        job.output_cover_url = cover_url
+        job.updated_at = datetime.now(timezone.utc)
+        db.commit()
+    except Exception as exc:
+        logger.warning("更新 render_job 封面字段失败（不影响返回）: job_id=%s err=%s", job_id, exc)
+
+    logger.info(
+        "渲染成片智能封面生成成功: user=%s render_id=%s cover_url=%s",
+        current_user.user.id,
+        job_id,
+        cover_url[:120],
+    )
     return SmartCoverResponse(cover_url=cover_url, status="completed")
+
+# ── POST /{job_id}/finalize — 封面选定后正式入库成片库 ────────────────────
+
+
+@router.post("/{job_id}/finalize", response_model=FinalizeRenderResponse)
+def finalize_render_job(
+    job_id: str,
+    current_user: AuthenticatedUser = Depends(get_current_user),
+    db: Session = Depends(get_db_session),
+):
+    """用户完成封面选择后，将视频正式保存到成片库.
+
+    - 必须等渲染任务 completed 后才可调用
+    - 如果已通过 smart-cover/custom-cover 设置了封面，会自动带上
+    - 返回成片库视频ID
+    - 幂等：已 finalize 的任务重复调用会返回 existing 记录
+    """
+    from app.services.ai_avatar_render_service import AiAvatarRenderError, AiAvatarRenderService
+
+    svc = AiAvatarRenderService(db)
+    job = svc.get_render_job(job_id, current_user.user.id)
+    if job is None:
+        raise HTTPException(status_code=404, detail="渲染任务不存在")
+    if job.status != "completed":
+        raise HTTPException(status_code=400, detail="请先完成视频生成")
+
+    # 幂等检查（通过 generation_task_id=job_id 识别，finalize_job 内部也做了一次，这里提前返回简化）
+    from packages.adapters.sqlalchemy_impl.models import GeneratedVideoModel
+
+    existing = (
+        db.query(GeneratedVideoModel)
+        .filter(
+            GeneratedVideoModel.user_id == current_user.user.id,
+            GeneratedVideoModel.generation_task_id == job_id,
+        )
+        .first()
+    )
+    if existing is not None:
+        return FinalizeRenderResponse(
+            video_id=existing.id,
+            cover_url=existing.thumbnail_url or "",
+            status="already_finalized",
+        )
+
+    try:
+        video = svc.finalize_job(job_id, current_user.user.id)
+        return FinalizeRenderResponse(
+            video_id=video.id,
+            cover_url=video.thumbnail_url or job.output_cover_url or "",
+            status="success",
+        )
+    except AiAvatarRenderError as exc:
+        status_map = {
+            "RenderJobNotFound": 404,
+            "RenderNotCompleted": 400,
+            "OutputVideoMissing": 400,
+        }
+        raise HTTPException(
+            status_code=status_map.get(exc.code, 400),
+            detail=str(exc),
+        ) from exc
+    except Exception as exc:
+        logger.error("渲染任务finalize失败: job_id=%s err=%s", job_id, exc, exc_info=True)
+        raise HTTPException(status_code=500, detail=f"保存到成片库失败: {str(exc)}") from exc

apps/api/app/api/routes/generation_cover.py

@@ -766,7 +766,12 @@ def generate_cover(
             storage_svc = get_shared_storage_service()
             mk_client = get_mediakit_client()
             # 从 plan.config 读取完整标题样式，E2 从源素材抽帧时叠加（源素材本身无标题）
+            # #1901 统一读 "title"，兼容老数据 "title_config"
             _e2_title_cfg = (plan.config or {}).get("title", {}) or {}
+            if not isinstance(_e2_title_cfg, dict) or not (_e2_title_cfg.get("text") or "").strip():
+                _alt = (plan.config or {}).get("title_config", {}) or {}
+                if isinstance(_alt, dict):
+                    _e2_title_cfg = _alt
             if not isinstance(_e2_title_cfg, dict):
                 _e2_title_cfg = {}
             _e2_title_text = (_e2_title_cfg.get("text", "") or "").strip() if _e2_title_cfg.get("enabled", True) else ""

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

@@ -58,27 +58,10 @@ def _variant_value(values: list[str], index: int, fallback: str = "") -> str:
 
 
 def _query_voice_durations(db: Session, voice_ids: list[str]) -> list[float]:
-    """批量查询配音素材时长（秒），#1749 配音时长分配用。
+    """[已下沉] 路由层兼容别名 → app.services.generation_common.query_voice_durations。"""
+    from app.services.generation_common import query_voice_durations
 
-    逐项 try/float 硬化：MagicMock/异常/缺失 → 0.0（无配音不分配，不阻断）。
-    """
-    ids = [v for v in dict.fromkeys(voice_ids or []) if v]
-    if not ids:
-        return []
-    try:
-        from packages.adapters.sqlalchemy_impl.models import AssetModel
-
-        rows = db.query(AssetModel.id, AssetModel.duration).filter(AssetModel.id.in_(ids)).all()
-        dur_map: dict[str, float] = {}
-        for row in rows:
-            try:
-                dur_map[row[0]] = float(row[1] or 0.0)
-            except (TypeError, ValueError):
-                dur_map[row[0]] = 0.0
-        return [dur_map.get(v, 0.0) for v in ids]
-    except Exception:
-        logger.warning("[生成任务] 配音时长查询失败（按无配音处理，不阻断）", exc_info=True)
-        return [0.0 for _ in ids]
+    return query_voice_durations(db, voice_ids)
 
 
 def _to_generation_task_response(task) -> GenerationTaskResponse:
@@ -184,61 +167,10 @@ def _writeback_edit_plan_config(
     title_config: dict | None,
     db: Session,
 ) -> None:
-    """任务入队成功后，回写 EditPlan.config：generation_task_id + title_config。
+    """[已下沉] 路由层兼容别名 → app.services.generation_common.writeback_edit_plan_config。"""
+    from app.services.generation_common import writeback_edit_plan_config
 
-    用 merge 方式更新，不整体覆盖 config，避免丢失其他字段。
-    失败只记日志，不影响任务创建。
-    """
-    if not plan_id:
-        return
-    try:
-        from packages.adapters.sqlalchemy_impl.models import EditPlanModel
-
-        plan_model = db.query(EditPlanModel).filter(EditPlanModel.id == plan_id).first()
-        if plan_model is None:
-            logger.warning("[生成任务] 回写plan.config失败: plan不存在 plan_id=%s", plan_id)
-            return
-
-        current_config = plan_model.config if isinstance(plan_model.config, dict) else {}
-        merged = dict(current_config)
-        merged["generation_task_id"] = task_id
-
-        # 检查标题是否发生变化，如果变化则清除 cover 字段强制重新生成封面
-        if title_config:
-            old_title_config = merged.get("title_config", {}) or {}
-            old_title_text = (old_title_config.get("text") or "").strip()
-            new_title_text = (title_config.get("text") or "").strip()
-            if old_title_text != new_title_text:
-                # 标题变化，清除旧封面
-                if "cover" in merged:
-                    del merged["cover"]
-                    logger.info(
-                        "[生成任务] 标题变化，清除旧封面: plan_id=%s old_title=%s new_title=%s",
-                        plan_id,
-                        old_title_text,
-                        new_title_text,
-                    )
-            merged["title_config"] = title_config
-
-        plan_model.config = merged
-        db.commit()
-        logger.info(
-            "[生成任务] 回写plan.config成功: plan_id=%s task_id=%s keys=%s",
-            plan_id,
-            task_id,
-            list(merged.keys()),
-        )
-    except Exception as e:
-        logger.warning(
-            "[生成任务] 回写plan.config异常（不影响任务创建）: plan_id=%s error=%s",
-            plan_id,
-            e,
-            exc_info=True,
-        )
-        try:
-            db.rollback()
-        except Exception:
-            pass
+    return writeback_edit_plan_config(plan_id, task_id, title_config, db)
 
 
 def _resolve_project_and_library(
@@ -489,25 +421,14 @@ def create_generation_task(
         # 各变体配音时长（查询硬化：异常 → 0.0 不阻断）
         voice_durations = _query_voice_durations(db, variant_voices)
 
-        # 解析批量源 plan：优先前端传入；否则按 template_id + user 查最新（与单任务兜底同源）
-        batch_source_plan_id = request.source_edit_plan_id
-        if not batch_source_plan_id and request.template_id:
-            try:
-                from packages.adapters.sqlalchemy_impl.models import EditPlanModel
+        # 解析批量源 plan：优先前端传入；否则按 template_id + user 查最新（公共函数）
+        from app.services.generation_common import resolve_latest_plan_by_template
 
-                _latest = (
-                    db.query(EditPlanModel)
-                    .filter(
-                        EditPlanModel.template_id == request.template_id,
-                        EditPlanModel.created_by_user_id == user_id,
-                    )
-                    .order_by(EditPlanModel.created_at.desc())
-                    .first()
-                )
-                if _latest:
-                    batch_source_plan_id = _latest.id
-            except Exception:
-                logger.warning("[生成任务] 批量源 plan 解析失败", exc_info=True)
+        batch_source_plan_id = (
+            request.source_edit_plan_id
+            or resolve_latest_plan_by_template(db, template_id=request.template_id, user_id=user_id)
+            or ""
+        )
 
         if not batch_source_plan_id and not request.variant_plan_ids:
             # 无任何可用源 plan：批量变体无从选片，明确报错，严禁静默共用/同源
@@ -552,7 +473,12 @@ def create_generation_task(
                 ) from clone_err
             variant_plan_ids.append(_plan0.id)
 
-            # 变体 1..N-1 独立选片
+            # #1855 P0：批次区间避让表，从变体0实际clips构建初始值（公共函数）
+            from app.services.generation_common import collect_plan_segments as _collect_segments
+
+            _batch_segments = _collect_segments(_plan0.id, _plan_svc._clip_repo)
+
+            # 变体 1..N-1 独立选片（传入累积batch_segments做素材区间避让）
             for task_index in range(1, count):
                 variant = None
                 last_err: Exception | None = None
@@ -564,6 +490,7 @@ def create_generation_task(
                             created_by_user_id=user_id,
                             name_suffix=f"批量{task_index + 1}",
                             voice_duration=voice_durations[task_index] if task_index < len(voice_durations) else 0.0,
+                            batch_segments=_batch_segments,
                         )
                         break
                     except ValueError as ve:
@@ -595,7 +522,16 @@ def create_generation_task(
                     ) from last_err
                 variant_plan_ids.append(variant.id)
 
-        # ③ 配音时长分配（回传 plan / clone 变体0 均需幂等分配；reselect 已在选片时分配）
+                # #1855 P0：把新变体的clips区间追加到batch_segments，供下一变体避让
+                try:
+                    _new_segs = _collect_segments(variant.id, _plan_svc._clip_repo)
+                    for _aid, _ivs in _new_segs.items():
+                        _batch_segments.setdefault(_aid, []).extend(_ivs)
+                except Exception:
+                    logger.exception("[生成任务] 变体%d 区间收集失败（不阻断）", task_index)
+
+        # ③ 配音时长分配（回传 plan / clone 变体0 均需幂等分配；reselect 已在选片时分配，
+        #    #1855：apply_voice_duration_to_plan 已内置幂等判断，重复调用安全）
         for _vi, _pid in enumerate(variant_plan_ids):
             _vd = voice_durations[_vi] if _vi < len(voice_durations) else 0.0
             if _vd > 0:
@@ -616,24 +552,13 @@ def create_generation_task(
             )
             _single_vd: list[float] = _query_voice_durations(db, _voices)
             _single_dur = _single_vd[0] if _single_vd else 0.0
-            _single_plan = request.source_edit_plan_id
-            if not _single_plan and request.template_id:
-                try:
-                    from packages.adapters.sqlalchemy_impl.models import EditPlanModel
+            from app.services.generation_common import resolve_latest_plan_by_template
 
-                    _latest = (
-                        db.query(EditPlanModel)
-                        .filter(
-                            EditPlanModel.template_id == request.template_id,
-                            EditPlanModel.created_by_user_id == user_id,
-                        )
-                        .order_by(EditPlanModel.created_at.desc())
-                        .first()
-                    )
-                    if _latest:
-                        _single_plan = _latest.id
-                except Exception:
-                    logger.warning("[生成任务] 单任务源 plan 解析失败", exc_info=True)
+            _single_plan = (
+                request.source_edit_plan_id
+                or resolve_latest_plan_by_template(db, template_id=request.template_id, user_id=user_id)
+                or ""
+            )
             if _single_dur > 0 and _single_plan:
                 from app.services.edit_plan_service import EditPlanService
 

apps/api/app/api/routes/generation_variant_plans.py

@@ -90,25 +90,12 @@ def create_variant_plans(
     except VariantVoiceError as exc:
         raise HTTPException(status_code=400, detail=str(exc)) from exc
 
-    # 解析源 plan：显式传入优先；否则按 template_id + user 查最新
+    # 解析源 plan：显式传入优先；否则按 template_id + user 查最新（公共函数）
+    from app.services.generation_common import resolve_latest_plan_by_template
+
     source_plan_id = request.source_edit_plan_id.strip()
     if not source_plan_id and request.template_id.strip():
-        try:
-            from packages.adapters.sqlalchemy_impl.models import EditPlanModel
-
-            _latest = (
-                db.query(EditPlanModel)
-                .filter(
-                    EditPlanModel.template_id == request.template_id.strip(),
-                    EditPlanModel.created_by_user_id == user_id,
-                )
-                .order_by(EditPlanModel.created_at.desc())
-                .first()
-            )
-            if _latest:
-                source_plan_id = _latest.id
-        except Exception:
-            logger.exception("[variant-plans] 源 plan 解析失败")
+        source_plan_id = resolve_latest_plan_by_template(db, template_id=request.template_id, user_id=user_id) or ""
 
     if not source_plan_id:
         raise HTTPException(

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

@@ -1,11 +1,12 @@
-"""对口型 API 路由 — #1796 MediaKit 对口型, #1809 参数调整.
+"""对口型 API 路由 — #1796 MediaKit 对口型, #1809 参数调整, #1845 配音前置.
 
 接口：
-  POST   /api/v1/lipsync/jobs          提交对口型任务
+  POST   /api/v1/lipsync/jobs          提交对口型任务（支持 TTS/直传/预合成 三种模式）
   GET    /api/v1/lipsync/jobs          任务列表
   GET    /api/v1/lipsync/jobs/{id}     任务详情
   POST   /api/v1/lipsync/jobs/{id}/refresh  刷新任务状态
   POST   /api/v1/lipsync/jobs/{id}/cancel   取消任务
+  POST   /api/v1/lipsync/tts-preview   #1845 步骤1 TTS 预合成（同步 HTTP，~2-3s）
 """
 
 from __future__ import annotations
@@ -17,7 +18,12 @@ from app.dependencies import (
     get_db_session,
     get_voice_clone_profile_repository,
 )
-from app.schemas.lipsync import CreateLipsyncJobRequest, LipsyncJobResponse
+from app.schemas.lipsync import (
+    AiAvatarTtsPreviewRequest,
+    AiAvatarTtsPreviewResponse,
+    CreateLipsyncJobRequest,
+    LipsyncJobResponse,
+)
 from app.services.lipsync_service import LipsyncService
 from app.services.mediakit_client import MediaKitError
 from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException, Query
@@ -33,7 +39,6 @@ def _get_service(
     voice_clone_repo=Depends(get_voice_clone_profile_repository),
 ) -> LipsyncService:
     # voice_clone_repo 用于克隆音色 profile 解析
-    # TTS 合成已移至 Celery 异步任务，无需同步注入 cosyvoice_service
     return LipsyncService(
         db,
         voice_clone_repo=voice_clone_repo,
@@ -51,15 +56,20 @@ def create_lipsync_job(
 ):
     """提交对口型任务.
 
-    #1809/#1822: 前端传 {video_url, voice_id, script_text, speed?, emotion?}，
-    后端创建任务记录（状态 tts_processing），dispatch Celery 异步任务执行 TTS 合成 + MediaKit 提交；
-    也支持直接传 {video_url, audio_url}（同步提交 MediaKit）。
+    三种模式：
+    - TTS 直生（旧版/降级）：传 {video_url, voice_id, script_text, speed?, emotion?}，
+      后端 dispatch Celery 异步任务。
+    - 直接音频：传 {video_url, audio_url}，后端同步下载+算timings+提交MediaKit。
+    - 预合成音频（#1845 新主路径）：传 {video_url, audio_url, audio_duration, sentence_timings}，
+      后端同步ffprobe+写入timings+直接提交MediaKit（~2-3s）。
     """
     try:
         job = svc.create_job(
             user_id=current_user.user.id,
             video_url=body.video_url,
             audio_url=body.audio_url,
+            audio_duration=body.audio_duration,
+            sentence_timings=body.sentence_timings,
             voice_id=body.voice_id,
             script_text=body.script_text,
             speed=body.speed,
@@ -68,10 +78,8 @@ def create_lipsync_job(
             project_id=body.project_id,
         )
     except ValueError as exc:
-        # 参数无效（如 voice_id 格式不对、文本过长等）
         raise HTTPException(status_code=400, detail=str(exc)) from exc
     except MediaKitError as exc:
-        # 音色无权访问 → 403；参数无效 → 400；MediaKit 提交失败 → 502
         status_code = 502
         if exc.code in ("VoiceForbidden",):
             status_code = 403
@@ -86,7 +94,6 @@ def create_lipsync_job(
             },
         ) from exc
     except Exception as exc:
-        # 兜底：任何未预期的错误返回 400 而非 500
         logger.error("创建对口型任务异常: %s", exc, exc_info=True)
         raise HTTPException(
             status_code=400,
@@ -96,6 +103,52 @@ def create_lipsync_job(
     return job
 
 
+# ── POST /tts-preview — #1845 步骤1 TTS 预合成 ──────────────────────────
+
+
+@router.post("/tts-preview", response_model=AiAvatarTtsPreviewResponse)
+def preview_tts(
+    body: AiAvatarTtsPreviewRequest,
+    current_user: AuthenticatedUser = Depends(get_current_user),
+    svc: LipsyncService = Depends(_get_service),
+):
+    """步骤1「生成配音」同步 TTS 预合成.
+
+    同步执行 TTS 合成 → 下载音频 → ffprobe 时长 → 句子时间戳计算，
+    不创建 LipsyncJob、不转存 OSS，直接返回 CosyVoice 临时 URL（~24h 有效）。
+    耗时约 2-3 秒。
+    """
+    try:
+        result = svc.preview_tts(
+            user_id=current_user.user.id,
+            voice_id=body.voice_id,
+            script_text=body.script_text,
+            speed=body.speed,
+            emotion=body.emotion,
+        )
+    except MediaKitError as exc:
+        status_code = 400
+        if exc.code in ("VoiceForbidden",):
+            status_code = 403
+        elif exc.code in ("TTSNoAudio",):
+            status_code = 502
+        raise HTTPException(
+            status_code=status_code,
+            detail={
+                "code": exc.code,
+                "message": str(exc),
+            },
+        ) from exc
+    except Exception as exc:
+        logger.error("TTS 预合成异常: %s", exc, exc_info=True)
+        raise HTTPException(
+            status_code=400,
+            detail=f"TTS 合成失败: {exc}",
+        ) from exc
+
+    return result
+
+
 # ── GET /jobs — 任务列表 ─────────────────────────────────────────────────
 
 
@@ -134,11 +187,7 @@ def get_lipsync_job(
     current_user: AuthenticatedUser = Depends(get_current_user),
     svc: LipsyncService = Depends(_get_service),
 ):
-    """获取对口型任务详情.
-
-    非终态任务：先返回 DB 缓存，挂后台刷新（下次轮询拿到新状态），
-    避免 MediaKit 慢响应阻塞前端轮询。
-    """
+    """获取对口型任务详情."""
     job = svc.get_job(job_id, current_user.user.id)
     if job is None:
         raise HTTPException(status_code=404, detail="任务不存在")

apps/api/app/api/routes/voice_clones.py

@@ -287,10 +287,15 @@ def retry_voice_clone(
     return _to_response(profile)
 
 
+_ALLOWED_PREVIEW_EMOTIONS = {"", "natural", "excited", "calm", "friendly"}
+
+
 @router.get("/{clone_id}/preview", response_model=VoiceClonePreviewResponse)
 def get_voice_clone_preview(
     clone_id: str,
     text: str = Query("", description="自定义试听文本，为空则使用默认示例"),
+    speed: float = Query(1.0, ge=0.5, le=2.0, description="语速，0.5-2.0，默认 1.0"),
+    emotion: str = Query("", description="情绪：natural/excited/calm/friendly，空字符串为默认自然"),
     authenticated_user: AuthenticatedUser = Depends(get_current_user),
     repository: SQLAlchemyVoiceCloneProfileRepository = Depends(get_voice_clone_profile_repository),
     cosyvoice: CosyVoiceService = Depends(get_cosyvoice_service),
@@ -298,11 +303,17 @@ def get_voice_clone_preview(
     """获取克隆音色试听音频（实时 TTS 合成）。
 
     - 克隆音色必须处于 ready 状态
-    - 使用默认试听文本时，结果缓存 7 天
-    - 可传入自定义 text 参数试听不同文本
+    - 使用默认试听文本时，结果缓存 7 天（仅默认 text+speed=1.0+emotion=空 组合缓存）
+    - 可传入自定义 text/speed/emotion 试听不同效果
     """
     import time
 
+    if emotion not in _ALLOWED_PREVIEW_EMOTIONS:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=f"不支持的 emotion 值: {emotion}，可选: natural/excited/calm/friendly 或留空",
+        )
+
     use_case = GetVoiceCloneUseCase(repository)
     try:
         profile = use_case.execute(clone_id, authenticated_user.user.id)
@@ -315,8 +326,8 @@ def get_voice_clone_preview(
             detail=f"Voice clone is not ready (current status: {profile.status})",
         )
 
-    # 有自定义文本时不缓存
-    use_cache = not text.strip()
+    # 仅默认试听文本 + 默认 speed + 默认 emotion 时使用缓存
+    use_cache = (not text.strip()) and abs(speed - 1.0) < 1e-6 and (not emotion)
 
     if use_cache and clone_id in _clone_preview_cache:
         audio_url, duration, file_size, cached_text, cached_at = _clone_preview_cache[clone_id]
@@ -337,12 +348,15 @@ def get_voice_clone_preview(
             text=preview_text,
             voice_id=profile.voice_id,
             format="mp3",
-            speed=1.0,
+            speed=speed,
+            emotion=emotion,
         )
     except CosyVoiceError as e:
         raise HTTPException(status_code=502, detail=f"TTS 合成失败: {e}") from e
+    except ValueError as e:
+        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail=str(e)) from e
 
-    # 缓存（仅默认试听文本）
+    # 缓存（仅默认参数组合）
     if use_cache:
         _clone_preview_cache[clone_id] = (
             result.audio_url,

apps/api/app/schemas/ai_avatar_render.py

@@ -52,7 +52,9 @@ class CreateAiAvatarRenderRequest(BaseModel):
     lipsync_job_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="标题配置")
+    title_config: dict[str, Any] = Field(
+        default_factory=dict, description="标题配置（可含 title_image_dataurl：前端 Canvas 渲染的标题 PNG dataURL）"
+    )
     cover_config: dict[str, Any] = Field(default_factory=dict, description="封面配置")
     project_id: str = Field("", description="项目 ID")
 
@@ -67,7 +69,6 @@ class CreateAiAvatarRenderRequest(BaseModel):
     @field_validator("script_id")
     @classmethod
     def validate_script_id(cls, v: str) -> str:
-        # script_id 可选：手动输入文案（TTS 直生）场景不关联文案库条目
         return (v or "").strip()
 
 
@@ -109,16 +110,17 @@ class AiAvatarRenderProgressResponse(BaseModel):
     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="失败原因（如有）")
+
+
+class FinalizeRenderResponse(BaseModel):
+    """封面选好后点「完成」，正式入库成片库的响应."""
+
+    video_id: str = Field(..., description="成片库视频ID")
+    cover_url: str = Field("", description="封面URL")
+    status: str = Field("success", description="success/already_finalized")

apps/api/app/schemas/lipsync.py

@@ -1,9 +1,12 @@
-"""对口型 API Schema 定义 — #1796 / #1809 / #1822.
+"""对口型 API Schema 定义 — #1796 / #1809 / #1822 / #1845（配音前置）.
 
-支持两种输入模式（二选一）：
-1. TTS 直生模式（推荐）：传 voice_id + script_text（+ speed/emotion），
-   后端内部先调 CosyVoice 合成音频，再提交 MediaKit 对口型。
+支持三种输入模式：
+1. TTS 直生模式（兼容旧版前端）：传 voice_id + script_text（+ speed/emotion），
+   后端 Celery 异步做 TTS 合成 + MediaKit 提交。
 2. 直接音频模式：传 video_url + audio_url（音频已由调用方准备好）。
+3. 预合成音频模式（#1845 配音前置新主路径）：前端先调 POST /lipsync/tts-preview
+   拿到 audio_url + sentence_timings，再在 create_job 时传 audio_url + audio_duration
+   + sentence_timings，后端跳过 TTS 和时间戳计算，直接 ffprobe 校验后提交 MediaKit。
 """
 
 from __future__ import annotations
@@ -33,6 +36,7 @@ class LipsyncJobResponse(BaseModel):
     output_duration: float
     error_message: str
     error_code: str
+    sentence_timings: Optional[list] = None
     submitted_at: Optional[datetime] = None
     completed_at: Optional[datetime] = None
     created_at: datetime
@@ -45,15 +49,19 @@ class LipsyncJobResponse(BaseModel):
 class CreateLipsyncJobRequest(BaseModel):
     """创建对口型任务请求.
 
-    两种模式（二选一）：
-    - TTS 直生：voice_id + script_text 必填（+ 可选 speed/emotion）；audio_url 留空。
+    三种模式（三选一）：
+    - TTS 直生（旧版/降级）：voice_id + script_text 必填；audio_url 留空。
     - 直接音频：video_url + audio_url 必填。
+    - 预合成音频（#1845 新主路径）：audio_url 必填 + 可选 audio_duration/sentence_timings；
+      后端同步 ffprobe 校验时长、写入 timings，直接提交 MediaKit。
     """
 
     video_url: str = Field(..., description="人物视频 URL（MP4，≤30min，单人真人）")
 
-    # 模式 2：直接音频
+    # 模式 2/3：直接/预合成音频
     audio_url: str = Field("", description="驱动音频 URL（mp3/aac/wav/m4a/flac）；直生模式留空")
+    audio_duration: Optional[float] = Field(None, ge=0, description="预合成音频时长（秒），可选；后端会 ffprobe 校验")
+    sentence_timings: Optional[list] = Field(None, description="预合成接口返回的句子时间戳，可选；若传入则直接写入 job")
 
     # 模式 1：TTS 直生
     voice_id: str = Field("", description="音色 ID（预置音色或克隆音色 profile UUID）")
@@ -61,7 +69,9 @@ class CreateLipsyncJobRequest(BaseModel):
     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="音频长于视频时是否循环画面")
+    enable_video_loop: bool = Field(
+        True, description="音频长于视频时是否循环画面（AI数字人默认开启，防止音频长于视频被截断）"
+    )
     project_id: str = Field("", description="项目 ID（可选）")
 
     @model_validator(mode="after")
@@ -72,15 +82,16 @@ class CreateLipsyncJobRequest(BaseModel):
         if not video.startswith(("http://", "https://")):
             raise ValueError("video_url 必须是 HTTP/HTTPS URL")
         lower = video.lower().split("?")[0]
-        if not lower.endswith(".mp4"):
-            raise ValueError("video_url 仅支持 MP4 格式")
+        allowed_video_exts = (".mp4", ".mov", ".m4v", ".webm", ".avi", ".mkv", ".3gp")
+        if not any(lower.endswith(ext) for ext in allowed_video_exts):
+            raise ValueError("video_url 格式不支持，仅支持: " + ", ".join(allowed_video_exts))
 
         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（直接音频模式），"
+                "必须提供驱动音频：要么传 audio_url（直接/预合成音频模式），"
                 "要么同时传 voice_id + script_text（TTS 直生模式）"
             )
 
@@ -98,3 +109,23 @@ class CreateLipsyncJobRequest(BaseModel):
             self.audio_url = au
 
         return self
+
+
+# ── #1845 TTS 预合成接口 ────────────────────────────────────────────────
+
+
+class AiAvatarTtsPreviewRequest(BaseModel):
+    """步骤1「生成配音」预合成请求（同步 HTTP，~2-3s）."""
+
+    voice_id: str = Field(..., min_length=1, max_length=128, description="音色 ID")
+    script_text: str = Field(..., min_length=1, max_length=5000, description="要合成的文案")
+    speed: float = Field(1.0, ge=0.5, le=2.0, description="语速（0.5-2.0），默认 1.0")
+    emotion: str = Field("natural", max_length=32, description="情绪")
+
+
+class AiAvatarTtsPreviewResponse(BaseModel):
+    """TTS 预合成响应（临时 URL，24h 内有效，足够当前会话使用）."""
+
+    audio_url: str = Field(..., description="CosyVoice 临时音频 URL")
+    duration: float = Field(..., ge=0, description="音频总时长（秒），ffprobe 测得")
+    sentence_timings: list[dict] = Field(..., description="句子级精确时间戳")

apps/api/app/services/ai_avatar_cover_service.py

@@ -1,10 +1,13 @@
-"""AI 数字人封面服务 — 复用智能剪辑的 MediaKit 抽帧 + 质量评分选最佳帧.
+"""AI 数字人封面服务 — MediaKit 抽帧 + 质量评分选最佳帧 + 转存 OSS.
 
 与 generation_cover.py 的智能选帧能力对齐（不再用 FFmpeg 简单截帧）：
 1. MediaKit extract_frames 抽取多帧（默认 5 帧，SpecifiedFrames 策略）
 2. cover_frame_scorer.score_frames 按清晰度/亮度/色彩评分选最佳
 3. 下载最佳帧并转存 OSS，返回公网封面 URL
 
+设计原则：封面一律从最终成片（已叠加标题/B-roll）抽帧，帧本身已含标题，
+本服务**不再叠加标题**。对口型阶段的裸视频封面入口已删除（废弃）。
+
 降级：MediaKit 不可用或抽帧失败时返回空字符串，由调用方决定回退策略。
 """
 
@@ -19,9 +22,9 @@ from urllib.parse import urlparse
 
 logger = logging.getLogger(__name__)
 
-# MediaKit 抽帧轮询参数（与 MediaKit API timeout=60s 对齐）
-COVER_POLL_INTERVAL = 3.0
-COVER_MAX_POLL_ATTEMPTS = 20  # 最多等 60 秒
+# MediaKit 抽帧轮询参数：poll_interval=2s × max_poll=30 → 最长 60s（与 mediakit_client 默认值/lipsync 轮询保持一致，防止合成视频下载+抽帧超时）
+COVER_POLL_INTERVAL = 2.0
+COVER_MAX_POLL_ATTEMPTS = 30
 
 # 帧图片下载超时（秒）
 FRAME_DOWNLOAD_TIMEOUT = 20
@@ -49,7 +52,6 @@ def _sign_video_url_for_mediakit(video_url: str) -> str:
         own_host = urlparse(public_base).netloc.lower()
         url_host = urlparse(video_url).netloc.lower()
         if own_host and url_host == own_host:
-            # 是自家 OSS URL，重签 7 天有效期供 MediaKit 拉取
             signed = storage.get_download_url(video_url, expires_seconds=MEDIAKIT_URL_TTL_SECONDS)
             if signed:
                 logger.info("[数字人封面] video_url 已重签（自家 OSS 私有桶）")
@@ -60,19 +62,10 @@ def _sign_video_url_for_mediakit(video_url: str) -> str:
 
 
 def select_best_cover_frame(video_url: str, *, max_frames: int = 5) -> str:
-    """从视频抽取多帧并评分选最佳帧，返回最佳帧的临时 URL.
-
-    Args:
-        video_url: 可公网访问的视频 URL
-        max_frames: 抽帧数量
-
-    Returns:
-        最佳帧图片 URL；失败返回空字符串
-    """
+    """从视频抽取多帧并评分选最佳帧，返回最佳帧的临时 URL."""
     if not video_url:
         return ""
 
-    # 确保 MediaKit 能访问 video_url（自家 OSS 私有桶需重签）
     video_url = _sign_video_url_for_mediakit(video_url)
 
     try:
@@ -85,11 +78,9 @@ def select_best_cover_frame(video_url: str, *, max_frames: int = 5) -> str:
             return ""
 
         logger.info(
-            "[数字人封面] 开始抽帧: video_url=%s max_frames=%d poll_interval=%.1f max_poll=%d",
+            "[数字人封面] 开始抽帧: video_url=%s max_frames=%d",
             video_url[:80],
             max_frames,
-            COVER_POLL_INTERVAL,
-            COVER_MAX_POLL_ATTEMPTS,
         )
 
         snapshots = mk.extract_frames(
@@ -107,7 +98,6 @@ def select_best_cover_frame(video_url: str, *, max_frames: int = 5) -> str:
         if len(snapshots) == 1:
             return snapshots[0].get("image_url") or snapshots[0].get("url") or ""
 
-        # 使用连接池下载各帧（复用 TCP 连接，减少延迟）
         import httpx
 
         candidates = []
@@ -135,7 +125,6 @@ def select_best_cover_frame(video_url: str, *, max_frames: int = 5) -> str:
         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:
@@ -156,16 +145,15 @@ def select_best_cover_frame(video_url: str, *, max_frames: int = 5) -> str:
         return ""
 
 
-def persist_cover_to_oss(frame_url: str, *, job_id: str = "", prefix: str = "ai-avatar/covers") -> str:
-    """下载帧图并转存到 OSS，返回公网封面 URL.
+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 ""
@@ -189,13 +177,13 @@ def persist_cover_to_oss(frame_url: str, *, job_id: str = "", prefix: str = "ai-
         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)
-        # 私有桶：返回预签名 URL（前端才能加载）
         if public_url:
             signed = storage.get_download_url(cover_key, expires_seconds=86400)
             return signed
@@ -211,10 +199,15 @@ def persist_cover_to_oss(frame_url: str, *, job_id: str = "", prefix: str = "ai-
                 pass
 
 
-def generate_smart_cover(video_url: str, *, job_id: str = "", max_frames: int = 5) -> str:
-    """一站式：MediaKit 智能抽帧选最佳 → 转存 OSS，返回封面公网 URL.
+def generate_smart_cover(
+    video_url: str,
+    *,
+    job_id: str = "",
+    max_frames: int = 5,
+) -> str:
+    """一站式：MediaKit 智能抽帧选最佳 → 转存 OSS。失败返回空字符串。
 
-    供独立封面接口与渲染管线复用。失败返回空字符串。
+    封面从最终成片抽帧，不再叠加任何标题（帧本身已含）。
     """
     best_frame = select_best_cover_frame(video_url, max_frames=max_frames)
     if not best_frame:

apps/api/app/services/ai_avatar_render_service.py

@@ -9,8 +9,11 @@
 
 from __future__ import annotations
 
+import base64
+import binascii
 import logging
 import os
+import subprocess
 import tempfile
 import uuid
 from datetime import datetime, timezone
@@ -24,8 +27,9 @@ from packages.adapters.sqlalchemy_impl.models import (
     ScriptModel,
 )
 from packages.domain.video_filter_builder import (
-    build_cover_extract_command,
+    build_broll_overlay_filter,
     build_title_drawtext_filter,
+    build_title_overlay_filter,
 )
 from packages.shared.storage import get_shared_storage_service
 
@@ -196,9 +200,8 @@ class AiAvatarRenderService:
         1. 下载对口型输出视频 (20%)
         2. 构建 FFmpeg 滤镜链 (40%)
         3. 执行 FFmpeg 渲染 (80%)
-        4. 提取封面 (90%)
-        5. 上传到 OSS (95%)
-        6. 更新任务状态 (100%)
+        4. 上传到 OSS (95%) — 封面不再自动生成，改由前端主动抽帧
+        5. 更新任务状态 (100%)
         """
         job = self.db.query(AiAvatarRenderJob).filter(AiAvatarRenderJob.id == job_id).first()
         if job is None:
@@ -228,27 +231,32 @@ class AiAvatarRenderService:
             self.db.commit()
 
             # 2. 构建 FFmpeg 滤镜链 (40%)
-            from packages.domain.video_filter_builder import build_broll_overlay_filter
+            # 用 ffprobe 探测输入视频分辨率，确保 B-roll 缩放与标题位置与实际输出一致。
+            # AI 数字人对口型输出为 9:16 竖屏，默认兜底 720x1280；探测失败时使用默认值不阻断渲染。
+            output_width, output_height = self._probe_video_resolution(input_video_path)
+            if output_width <= 0 or output_height <= 0:
+                output_width, output_height = 720, 1280
+                logger.info(
+                    "[数字人渲染] ffprobe 探测分辨率失败或无效，使用默认竖屏尺寸 %sx%s",
+                    output_width,
+                    output_height,
+                )
+            else:
+                logger.info("[数字人渲染] 探测输入视频分辨率: %sx%s", output_width, output_height)
 
-            filter_complex = build_broll_overlay_filter(
+            broll_filter, broll_label = build_broll_overlay_filter(
                 b_roll_segments=job.b_roll_segments,
                 video_duration=lipsync_job.output_duration,
+                output_width=output_width,
+                output_height=output_height,
             )
 
-            # 标题叠加
-            title_filter = build_title_drawtext_filter(job.title_config)
-            if title_filter:
-                if filter_complex:
-                    filter_complex += f"[vout]{title_filter}[vout_titled];"
-                else:
-                    filter_complex = f"[0:v]{title_filter}[vout_titled];"
-
-            # 清理末尾分号
-            if filter_complex.endswith(";"):
-                filter_complex = filter_complex[:-1]
-
-            # 最终输出标签
-            final_label = "vout_titled" if title_filter else ("vout" if filter_complex else None)
+            # 标题叠加路径：优先前端 Canvas 渲染的 PNG 图层（所见即所得），
+            # 无 title_image_dataurl 时降级到 drawtext 重画文字。
+            title_cfg = job.title_config if isinstance(job.title_config, dict) else {}
+            title_dataurl = (title_cfg or {}).get("title_image_dataurl") if title_cfg else None
+            use_title_png = isinstance(title_dataurl, str) and title_dataurl.startswith("data:image/")
+            title_input_index = 1 + len(job.b_roll_segments or []) if use_title_png else None
 
             job.progress = 40
             self.db.commit()
@@ -257,57 +265,126 @@ class AiAvatarRenderService:
             with tempfile.TemporaryDirectory() as tmpdir:
                 output_video_path = os.path.join(tmpdir, "output.mp4")
 
-                cmd = self._build_ffmpeg_command(
+                # 在临时目录里解码保存标题 PNG（with 退出自动清理）
+                title_png_path: Optional[str] = None
+                extra_inputs: list[str] = []
+                title_filter = None
+                if use_title_png:
+                    try:
+                        title_png_path = os.path.join(tmpdir, f"title_{job.id}.png")
+                        self._save_title_dataurl_to_file(title_dataurl, dst_path=title_png_path)
+                        extra_inputs.append(title_png_path)
+                        logger.info(
+                            "[数字人渲染] 标题 PNG 已保存: %s (input index %d)", title_png_path, title_input_index
+                        )
+                    except Exception as exc:
+                        logger.warning("[数字人渲染] 标题 PNG 解码/保存失败，降级 drawtext: %s", exc)
+                        title_png_path = None
+                        extra_inputs = []
+
+                # 构建标题滤镜
+                final_label = None
+                if title_png_path and title_input_index is not None:
+                    title_input_label = f"[{title_input_index}:v]"
+                    base_label = f"[{broll_label}]" if broll_label else "[0:v]"
+                    title_filter = build_title_overlay_filter(
+                        title_cfg,
+                        output_width=output_width,
+                        output_height=output_height,
+                        title_png_path=title_png_path,
+                        title_input_label=title_input_label,
+                        base_label=base_label,
+                        output_label="vout_titled",
+                    )
+                    if not title_filter:
+                        # build 返回 None → 文件不存在（极端并发情况），降级 drawtext
+                        title_png_path = None
+                        extra_inputs = []
+
+                if title_png_path:
+                    # overlay 路径
+                    if broll_filter and title_filter:
+                        filter_complex = broll_filter + f";{title_filter}"
+                    elif broll_filter:
+                        filter_complex = broll_filter
+                        final_label = broll_label
+                    elif title_filter:
+                        filter_complex = title_filter
+                    else:
+                        filter_complex = ""
+                    if title_filter:
+                        final_label = "vout_titled"
+                    elif not final_label:
+                        final_label = None
+                else:
+                    # 降级：drawtext 重画文字
+                    title_filter = build_title_drawtext_filter(
+                        title_cfg,
+                        output_width=output_width,
+                        output_height=output_height,
+                    )
+                    if broll_filter and title_filter:
+                        filter_complex = broll_filter + f";[{broll_label}]{title_filter}[vout_titled]"
+                        final_label = "vout_titled"
+                    elif broll_filter:
+                        filter_complex = broll_filter
+                        final_label = broll_label
+                    elif title_filter:
+                        filter_complex = f"[0:v]{title_filter}[vout_titled]"
+                        final_label = "vout_titled"
+                    else:
+                        filter_complex = ""
+                        final_label = None
+
+                cmd_list = self._build_ffmpeg_command(
                     input_video=input_video_path,
                     b_roll_segments=job.b_roll_segments,
+                    extra_inputs=extra_inputs,
                     filter_complex=filter_complex,
                     final_label=final_label,
                     output_path=output_video_path,
                 )
 
-                exit_code = os.system(cmd)
-                if exit_code != 0:
-                    raise AiAvatarRenderError(f"FFmpeg 渲染失败，退出码: {exit_code}", code="FFmpegFailed")
+                try:
+                    render_result = subprocess.run(
+                        cmd_list,
+                        capture_output=True,
+                        text=True,
+                        timeout=600,
+                    )
+                except subprocess.TimeoutExpired as exc:
+                    raise AiAvatarRenderError(
+                        "FFmpeg 渲染超时（600s）",
+                        code="FFmpegTimeout",
+                    ) from exc
+
+                if render_result.returncode != 0:
+                    stderr_tail = (render_result.stderr or "").strip()[-800:]
+                    raise AiAvatarRenderError(
+                        f"FFmpeg 渲染失败，退出码: {render_result.returncode}, stderr: {stderr_tail}",
+                        code="FFmpegFailed",
+                    )
 
                 job.progress = 80
                 self.db.commit()
 
-                # 4. 提取封面 (90%)
-                cover_path = ""
-                if job.cover_config:
-                    cover_path = os.path.join(tmpdir, "cover.jpg")
-                    cover_cmd = build_cover_extract_command(job.cover_config, cover_path)
-                    cover_cmd = cover_cmd.replace("INPUT_VIDEO", output_video_path)
-                    cover_exit = os.system(cover_cmd)
-                    if cover_exit != 0:
-                        logger.warning("封面提取失败，跳过: %s", cover_cmd)
-                        cover_path = ""
-
-                job.progress = 90
-                self.db.commit()
-
-                # 5. 上传到 OSS (95%)
+                # 4/5. 上传成片到 OSS (95%) —— 已砍掉自动抽封面逻辑（步骤⑤）；
+                # 封面由前端在渲染完成后通过 /smart-cover 接口主动从成片抽帧，不阻塞渲染链路。
                 output_video_url = self._upload_to_oss(output_video_path, f"ai-avatar/{job_id}/output.mp4")
                 job.output_video_url = output_video_url
 
-                # 封面：优先复用智能剪辑的 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
+                # 封面透传：如果用户已在 cover_config 中选定封面 URL（mode=upload 的自定义上传 或
+                # mode=auto_frame 已有的智能封面结果），直接透传到 output_cover_url，不再重新截帧。
+                if isinstance(job.cover_config, dict):
+                    _pre_cover_url = (
+                        job.cover_config.get("url")
+                        or job.cover_config.get("imageUrl")
+                        or job.cover_config.get("cover_url")
+                        or ""
+                    )
+                    if _pre_cover_url:
+                        job.output_cover_url = _pre_cover_url
+                        logger.info("[数字人渲染] 使用用户已选定封面 URL: job_id=%s", job_id)
 
                 # 获取输出视频时长
                 job.output_duration = lipsync_job.output_duration
@@ -322,37 +399,9 @@ class AiAvatarRenderService:
             self.db.commit()
             logger.info("渲染任务完成: %s", job_id)
 
-            # 7. 自动保存成片记录到成片库
-            if job.output_video_url:
-                try:
-                    from packages.adapters.sqlalchemy_impl.generated_video_repository import (
-                        SQLAlchemyGeneratedVideoRepository,
-                    )
-                    from packages.domain.generated_video import GeneratedVideo
-
-                    clip_name = f"AI数字人_{job_id[:8]}"
-                    clip = GeneratedVideo.create(
-                        project_id=job.project_id,
-                        generation_task_id=job.lipsync_job_id,
-                        name=clip_name,
-                        file_url=job.output_video_url,
-                        user_id=job.user_id,
-                        duration=job.output_duration or 0.0,
-                        thumbnail_url=job.output_cover_url or None,
-                        generation_params={
-                            "source": "ai_avatar_render",
-                            "render_job_id": job.id,
-                        },
-                    )
-                    video_repo = SQLAlchemyGeneratedVideoRepository(self.db)
-                    video_repo.create(clip)
-                    logger.info("成片记录已保存到成片库: clip_id=%s, render_job=%s", clip.id, job_id)
-                except Exception as clip_err:
-                    logger.warning(
-                        "自动保存成片记录失败（不影响渲染任务状态）: render_job=%s, error=%s",
-                        job_id,
-                        clip_err,
-                    )
+            # 7. 渲染完成，停留在「待选封面」状态：不自动入库。
+            #    用户在前端选好封面、点「完成」后，由 /{job_id}/finalize 接口显式入库。
+            logger.info("渲染任务完成，等待用户选择封面后入库: job_id=%s", job_id)
 
         except AiAvatarRenderError as exc:
             job.status = "failed"
@@ -360,12 +409,95 @@ class AiAvatarRenderService:
             job.updated_at = datetime.now(timezone.utc)
             self.db.commit()
             logger.error("渲染任务失败 [%s]: %s", job_id, exc)
+            raise
         except Exception as exc:
             job.status = "failed"
             job.error_message = f"渲染异常: {str(exc)}"
             job.updated_at = datetime.now(timezone.utc)
             self.db.commit()
             logger.exception("渲染任务异常 [%s]", job_id)
+            raise
+
+    def _persist_to_library(self, job: AiAvatarRenderJob, cover_url: Optional[str] = None):
+        """将渲染结果写入成片库，返回 GeneratedVideo 领域对象.
+
+        Args:
+            job: 渲染任务（必须 status=completed 且 output_video_url 非空）
+            cover_url: 可选的封面 URL 覆盖（finalize 时传入即优先使用，否则取 job.output_cover_url）
+        """
+        from packages.adapters.sqlalchemy_impl.generated_video_repository import (
+            SQLAlchemyGeneratedVideoRepository,
+        )
+        from packages.domain.generated_video import GeneratedVideo
+
+        clip_name = f"AI数字人_{job.id[:8]}"
+        # AI数字人入口是独立页面，前端可能不传 project_id（无项目概念），
+        # 兜底为 "ai_avatar" 避免 DB 非空约束/查询问题；generation_task_id 用 render_job_id 便于反查。
+        clip_project_id = (job.project_id or "").strip() or "ai_avatar"
+        clip_generation_task_id = job.id
+        effective_cover = (cover_url or "").strip() if cover_url else (job.output_cover_url or "").strip()
+        clip = GeneratedVideo.create(
+            project_id=clip_project_id,
+            generation_task_id=clip_generation_task_id,
+            name=clip_name,
+            file_url=job.output_video_url,
+            user_id=job.user_id,
+            duration=job.output_duration or 0.0,
+            thumbnail_url=effective_cover or None,
+            generation_params={
+                "source": "ai_avatar_render",
+                "render_job_id": job.id,
+            },
+        )
+        video_repo = SQLAlchemyGeneratedVideoRepository(self.db)
+        video_repo.create(clip)
+        logger.info("[数字人渲染] 成片已入库: clip_id=%s render_job=%s", clip.id, job.id)
+        return clip
+
+    def finalize_job(self, job_id: str, user_id: str, cover_url: Optional[str] = None):
+        """用户在前端点「完成」后调用：将已 completed 的渲染任务正式入库到成片库.
+
+        - 必须 status=completed 才可调用
+        - cover_url 若传入则优先使用并回写 job.output_cover_url；否则使用 job.output_cover_url（smart-cover/custom-cover 已写入）
+        - 幂等：已入库则返回已存在的 GeneratedVideo
+        """
+        from packages.adapters.sqlalchemy_impl.generated_video_repository import (
+            SQLAlchemyGeneratedVideoRepository,
+        )
+        from packages.adapters.sqlalchemy_impl.models import GeneratedVideoModel
+
+        job = self.get_render_job(job_id, user_id)
+        if job is None:
+            raise AiAvatarRenderError("渲染任务不存在", code="RenderJobNotFound")
+        if job.status != "completed":
+            raise AiAvatarRenderError(f"渲染任务未完成（当前状态: {job.status}），无法入库", code="RenderNotCompleted")
+        if not (job.output_video_url or "").strip():
+            raise AiAvatarRenderError("渲染成片视频 URL 为空，无法入库", code="OutputVideoMissing")
+
+        # 幂等检查：已入库直接返回现有记录（通过 generation_task_id=job_id 识别，
+        # 因为入库时 generation_task_id 被设置为 render_job_id 自身）
+        existing = (
+            self.db.query(GeneratedVideoModel)
+            .filter(
+                GeneratedVideoModel.user_id == user_id,
+                GeneratedVideoModel.generation_task_id == job_id,
+            )
+            .first()
+        )
+        if existing is not None:
+            logger.info("[数字人渲染] finalize 幂等命中，返回已存在记录: clip_id=%s job_id=%s", existing.id, job_id)
+            return SQLAlchemyGeneratedVideoRepository(self.db).get(existing.id)
+
+        # 传入 cover_url 时回写到 job
+        if cover_url and cover_url.strip():
+            job.output_cover_url = cover_url.strip()
+            # 同步更新 cover_config，保持 smart-cover 路径一致
+            if isinstance(job.cover_config, dict):
+                job.cover_config = {**job.cover_config, "mode": "auto_frame", "url": cover_url.strip()}
+            job.updated_at = datetime.now(timezone.utc)
+            self.db.commit()
+
+        return self._persist_to_library(job, cover_url=cover_url)
 
     def _download_video(self, url: str) -> str:
         """下载视频到临时文件."""
@@ -383,32 +515,132 @@ class AiAvatarRenderService:
                 os.unlink(tmp.name)
             raise
 
+    @staticmethod
+    def _save_title_dataurl_to_file(dataurl: str, *, dst_path: str | None = None, job_id: str = "") -> str:
+        """解码前端传来的 data:image/png;base64,... 并保存为本地 PNG 文件。
+
+        Args:
+            dataurl: 完整 dataURL 字符串
+            dst_path: 指定输出路径；为 None 时创建临时文件并返回路径
+            job_id: 仅在 dst_path 为空时用于临时文件命名
+
+        Returns:
+            保存后的本地文件路径
+        """
+        if not isinstance(dataurl, str) or not dataurl.startswith("data:image/"):
+            raise ValueError("title_image_dataurl 不是合法的 data:image URL")
+        # 拆分 data:image/png;base64,<payload>
+        try:
+            header, b64 = dataurl.split(",", 1)
+        except ValueError as exc:
+            raise ValueError("title_image_dataurl 缺少 base64 payload") from exc
+        if "base64" not in header:
+            raise ValueError("title_image_dataurl 不是 base64 编码")
+        try:
+            png_bytes = base64.b64decode(b64, validate=True)
+        except (binascii.Error, ValueError) as exc:
+            raise ValueError(f"title_image_dataurl base64 解码失败: {exc}") from exc
+        if not png_bytes:
+            raise ValueError("title_image_dataurl 解码后为空")
+
+        if dst_path:
+            out_path = dst_path
+            with open(out_path, "wb") as f:
+                f.write(png_bytes)
+            return out_path
+        suffix = f"_title_{job_id}.png" if job_id else "_title.png"
+        with tempfile.NamedTemporaryFile(suffix=suffix, delete=False) as tmp:
+            tmp.write(png_bytes)
+            return tmp.name
+
+    @staticmethod
+    def _probe_video_resolution(video_path: str) -> tuple[int, int]:
+        """用 ffprobe 探测视频分辨率，返回 (width, height)；失败返回 (0, 0)。"""
+        try:
+            result = subprocess.run(
+                [
+                    "ffprobe",
+                    "-v",
+                    "error",
+                    "-select_streams",
+                    "v:0",
+                    "-show_entries",
+                    "stream=width,height",
+                    "-of",
+                    "csv=p=0:s=x",
+                    video_path,
+                ],
+                capture_output=True,
+                text=True,
+                timeout=15,
+            )
+            if result.returncode == 0 and result.stdout.strip():
+                parts = result.stdout.strip().split("x")
+                if len(parts) == 2:
+                    w, h = int(parts[0]), int(parts[1])
+                    if w > 0 and h > 0:
+                        return w, h
+        except Exception as exc:
+            logger.warning("[数字人渲染] ffprobe 探测分辨率失败: %s", exc)
+        return 0, 0
+
     def _build_ffmpeg_command(
         self,
         *,
         input_video: str,
         b_roll_segments: list[dict[str, Any]],
+        extra_inputs: list[str] | None = None,
         filter_complex: str,
         final_label: Optional[str],
         output_path: str,
-    ) -> str:
-        """构建 FFmpeg 命令."""
-        # 输入文件
-        inputs = f"-i {input_video}"
+    ) -> list[str]:
+        """构建 FFmpeg 命令（list 形式，shell=False）.
+
+        根因修复 #1798 P0：OSS 预签名 URL 含 `&Expires=...&Signature=...` 特殊字符，
+        os.system(shell=True) 会把 `&` 解释为后台命令分隔符，导致 -filter_complex 被
+        当成独立命令报 sh: -filter_complex: not found（exit 127 → Python 32512）。
+        list + shell=False 彻底规避 shell 转义问题。
+        """
+        cmd: list[str] = ["ffmpeg", "-i", input_video]
         for seg in b_roll_segments:
             asset_url = seg.get("asset_url", "")
             if asset_url:
-                inputs += f" -i {asset_url}"
+                cmd.extend(["-i", asset_url])
+        # 额外输入（例如前端 Canvas 渲染的标题 PNG）
+        for extra in extra_inputs or []:
+            cmd.extend(["-i", extra])
 
-        # 滤镜
         if filter_complex and final_label:
-            filter_arg = f'-filter_complex "{filter_complex}" -map "[{final_label}]"'
+            cmd.extend(
+                [
+                    "-filter_complex",
+                    filter_complex,
+                    "-map",
+                    f"[{final_label}]",
+                    "-map",
+                    "0:a?",
+                ]
+            )
         elif filter_complex:
-            filter_arg = f'-filter_complex "{filter_complex}"'
-        else:
-            filter_arg = ""
+            cmd.extend(["-filter_complex", filter_complex])
 
-        return f"ffmpeg {inputs} {filter_arg} -c:v libx264 -preset veryfast -crf 23 -y {output_path}"
+        cmd.extend(
+            [
+                "-c:v",
+                "libx264",
+                "-preset",
+                "veryfast",
+                "-crf",
+                "23",
+                "-c:a",
+                "aac",
+                "-b:a",
+                "128k",
+                "-y",
+                output_path,
+            ]
+        )
+        return cmd
 
     def _upload_to_oss(self, local_path: str, oss_key: str) -> str:
         """上传文件到 OSS，返回 URL.

apps/api/app/services/edit_plan_service.py

@@ -473,6 +473,7 @@ class EditPlanService:
         name_suffix: str = "变体",
         voice_duration: float = 0.0,
         rng=None,
+        batch_segments: dict[str, list[tuple[float, float]]] | None = None,
     ) -> EditPlan:
         """为批量变体生成独立 plan：完整重跑单视频选片流程（#1743）。
 
@@ -489,6 +490,8 @@ class EditPlanService:
             created_by_user_id: 新 plan 归属用户。
             name_suffix: plan 名后缀。
             rng: 可选随机数（测试注入种子）。
+            batch_segments: 可选，外部传入的批次内已使用素材区间（前序变体避让用）。
+                传入时作为初始避让对象；未传则保持原逻辑从源 plan clips 自建（向后兼容）。
 
         Raises:
             ValueError: 源 plan 不存在/无片段、素材池为空或时长全未知。
@@ -537,16 +540,26 @@ class EditPlanService:
             voice = float(voice_duration or 0.0)
         except (TypeError, ValueError):
             voice = 0.0
+        rhythm_template_for_reselect = None
+        if source.config:
+            rhythm_template_for_reselect = source.config.get("rhythm_template")
+
         if voice > 0 and source_clips_data:
             from packages.domain.voice_duration_planner import plan_clip_durations
 
             _effects: list[str | None] = [c.get("transition_effect") for c in source_clips_data]
             _tdurs: list[float] = [float(c.get("transition_duration") or 0.0) for c in source_clips_data]
+            # #1855 P0：先占位durations为空dict，真正查durations在后面pool_ids确定后执行；
+            # plan_clip_durations 的 asset_durations 参数在该函数中仅作最大段长钳制，
+            # 这里先不依赖它（durations 还没查），传 None 让planner用默认策略；
+            # 真正的asset_durations会在后面 clips_data 生成时传入 reselect_clips_for_variant
             target_durations = plan_clip_durations(
                 len(source_clips_data),
                 voice,
                 transition_effects=_effects,
                 transition_durations=_tdurs,
+                rhythm_template=rhythm_template_for_reselect,
+                asset_durations=None,
             )
             if target_durations:
                 for _c, _d in zip(source_clips_data, target_durations, strict=False):
@@ -582,12 +595,18 @@ class EditPlanService:
             created_by_user_id=created_by_user_id or (source.created_by_user_id or ""),
         )
 
-        # 批次内区间：以源 plan（变体 0）片段为初始避让对象
-        batch_segments: dict[str, list[tuple[float, float]]] = {}
-        for c in clips:
-            if c.asset_id and float(c.duration or 0) > 0:
-                st = float(c.start_time or 0.0)
-                batch_segments.setdefault(c.asset_id, []).append((st, st + float(c.duration)))
+        # 批次内区间：外部传入时使用外部传入（含前序变体已用区间）；
+        # 否则保持原逻辑从源 plan clips 自建（向后兼容）
+        if batch_segments is not None:
+            batch_segments_resolved: dict[str, list[tuple[float, float]]] = {
+                k: list(v) for k, v in batch_segments.items()
+            }
+        else:
+            batch_segments_resolved = {}
+            for c in clips:
+                if c.asset_id and float(c.duration or 0) > 0:
+                    st = float(c.start_time or 0.0)
+                    batch_segments_resolved.setdefault(c.asset_id, []).append((st, st + float(c.duration)))
 
         clips_data = reselect_clips_for_variant(
             source_clips_data,
@@ -595,7 +614,7 @@ class EditPlanService:
             asset_durations=durations,
             asset_scene_points=scene_points,
             historical_used_segments=historical,
-            batch_segments=batch_segments,
+            batch_segments=batch_segments_resolved,
             target_durations=target_durations,
             rng=rng,
         )
@@ -767,6 +786,17 @@ class EditPlanService:
         if plan is None:
             return None
 
+        # #1855 P0：幂等判断——如果已成功分配过且当前 total_duration 已接近 voice_duration，直接返回
+        try:
+            existing_mark = None
+            if plan.config:
+                existing_mark = plan.config.get("voice_duration_applied")
+            cur_total = float(plan.total_duration or 0.0)
+            if existing_mark is not None and abs(existing_mark - voice) < 1e-6 and abs(cur_total - voice) < 0.5:
+                return plan
+        except Exception:
+            pass
+
         clips: List[EditPlanClip] = []
         skip, page = 0, 500
         while True:
@@ -838,6 +868,10 @@ class EditPlanService:
         )
         try:
             plan.total_duration = net
+            # #1855 P0：写入幂等标记，避免二次调用时只重分配 duration 不重算 start_time
+            new_cfg = dict(plan.config or {})
+            new_cfg["voice_duration_applied"] = voice
+            plan.config = new_cfg
             db = self._clip_repo.session
             db.commit()
         except Exception:
@@ -878,6 +912,69 @@ class EditPlanService:
         rng = rng or _random.Random()
         plan_ids: list[str] = []
 
+        # #1855 P0：先确定片段数 clip_count（用于节奏模板生成长度匹配）
+        from packages.domain.bgm_pool import allocate_bgm_pool_for_variants
+        from packages.domain.variant_plan_selector import (
+            generate_pixel_perturbation,
+            generate_visual_perturbation,
+        )
+        from packages.domain.voice_duration_planner import RHYTHM_TEMPLATES, adapt_template_length
+
+        clip_count = 0
+        # 从源 plan 获取片段数（分页读，避免关系加载问题）
+        _sclips: list = []
+        _sk, _pg = 0, 500
+        while True:
+            _b = self._clip_repo.list_by_plan(source_plan_id, skip=_sk, limit=_pg)
+            if not _b:
+                break
+            _sclips.extend(_b)
+            if len(_b) < _pg:
+                break
+            _sk += _pg
+        clip_count = len(_sclips)
+
+        # 预先生成所有 N 个变体的节奏模板/BGM/扰动参数（时机提前到选片前写入config）
+        rhythm_templates_for_variants: list = []
+        for _idx in range(count):
+            if clip_count > 0:
+                variant_seed = rng.randint(0, 999999)
+                _tpl = adapt_template_length(RHYTHM_TEMPLATES[variant_seed % len(RHYTHM_TEMPLATES)], clip_count)
+                rhythm_templates_for_variants.append(_tpl)
+            else:
+                rhythm_templates_for_variants.append(None)
+
+        source_bgm_config: dict = {}
+        source_plan = self.get_plan(source_plan_id)
+        if source_plan and source_plan.config:
+            source_bgm_config = source_plan.config.get("bgm", {}) or {}
+        variant_seeds_for_bgm = [rng.randint(0, 999999) for _ in range(count)]
+        bgm_pool_assignments = allocate_bgm_pool_for_variants(source_bgm_config, variant_seeds_for_bgm)
+
+        def _build_variant_config_update(idx: int) -> dict:
+            """构建单个变体的 config 更新（节奏模板/BGM/视觉/像素扰动）。"""
+            upd: dict = {}
+            try:
+                perturbation = generate_visual_perturbation(rng)
+                if idx == 0:
+                    perturbation["hflip"] = False
+                upd["visual_perturbation"] = perturbation
+            except Exception:
+                logger.exception("变体 %d 视觉扰动生成失败（不阻断）", idx)
+            try:
+                pixel_pert = generate_pixel_perturbation(rng)
+                upd["pixel_perturbation"] = pixel_pert
+            except Exception:
+                logger.exception("变体 %d 像素扰动生成失败（不阻断）", idx)
+            rt = rhythm_templates_for_variants[idx] if idx < len(rhythm_templates_for_variants) else None
+            if rt is not None:
+                upd["rhythm_template"] = rt
+            if idx < len(bgm_pool_assignments):
+                existing_bgm = dict((source_plan.config or {}).get("bgm", {}) or {})
+                existing_bgm.update(bgm_pool_assignments[idx])
+                upd["bgm"] = existing_bgm
+            return upd
+
         # 变体 0：clone（片段结构同源 plan，起点重算），不污染源 plan
         plan0 = self.clone_plan_for_variant(
             source_plan_id,
@@ -890,6 +987,15 @@ class EditPlanService:
                 v0_voice = float(voice_durations[0] or 0.0)
             except (TypeError, ValueError):
                 v0_voice = 0.0
+
+        # #1855 P0：在配音分配前先写入变体0的节奏模板/扰动/BGM，确保 apply_voice_duration_to_plan 能读到 rhythm_template
+        try:
+            _cfg0 = _build_variant_config_update(0)
+            if _cfg0:
+                self.update_plan_config(plan0.id, _cfg0)
+        except Exception:
+            logger.exception("变体0 配置写入失败（不阻断）: plan=%s", plan0.id)
+
         if v0_voice > 0:
             try:
                 self.apply_voice_duration_to_plan(plan0.id, v0_voice)
@@ -897,7 +1003,12 @@ class EditPlanService:
                 logger.exception("变体0 配音分配失败（不阻断）: plan=%s", plan0.id)
         plan_ids.append(plan0.id)
 
-        # 变体 1..N-1：独立选片
+        # #1855 P0：批次内素材区间避让表——从变体0实际落库的clips构建初始值（公共函数）
+        from app.services.generation_common import collect_plan_segments as _collect_plan_segments
+
+        batch_segments_acc: dict[str, list[tuple[float, float]]] = _collect_plan_segments(plan0.id, self._clip_repo)
+
+        # 变体 1..N-1：独立选片（传入累积的 batch_segments 做区间避让）
         for i in range(1, count):
             voice = 0.0
             if voice_durations and i < len(voice_durations):
@@ -905,6 +1016,14 @@ class EditPlanService:
                     voice = float(voice_durations[i] or 0.0)
                 except (TypeError, ValueError):
                     voice = 0.0
+
+            # #1855 P0：在reselect前先为"变体i"准备配置更新——但reselect内部复制的是source.config，
+            # 所以每个变体独立的节奏模板需要在reselect后单独写入config；
+            # 但 plan_clip_durations 用的是 source.config.rhythm_template（即源plan的节奏模板），
+            # 为了让每个变体在选片阶段就使用自己的节奏模板分配段长，这里采用：
+            #   - reselect 仍使用源 plan 的 rhythm_template（保持片段骨架一致）
+            #   - 选片完成后立即写入该变体自己的 rhythm_template/扰动/BGM 到config，
+            #     后续不再二次 apply_voice_duration_to_plan（由幂等标记跳过）
             variant = self.reselect_plan_for_variant(
                 source_plan_id,
                 candidate_asset_ids,
@@ -912,73 +1031,26 @@ class EditPlanService:
                 name_suffix=f"变体{i + 1}",
                 voice_duration=voice,
                 rng=rng,
+                batch_segments=batch_segments_acc,
             )
+
+            # 选片完成后写入该变体的独立配置（节奏模板/扰动/BGM）
+            try:
+                _cfgi = _build_variant_config_update(i)
+                if _cfgi:
+                    self.update_plan_config(variant.id, _cfgi)
+            except Exception:
+                logger.exception("变体 %d 配置写入失败（不阻断）: plan=%s", i, variant.id)
+
             plan_ids.append(variant.id)
 
-        # #1764：为每个变体生成独立节奏模板（让批量视频片段时长分布不同）
-        from packages.domain.voice_duration_planner import RHYTHM_TEMPLATES, adapt_template_length
-
-        clip_count = 0
-        if voice_durations and len(voice_durations) > 0:
-            # 从源 plan 获取片段数
-            source_plan = self.get_plan(source_plan_id)
-            if source_plan and hasattr(source_plan, "clips"):
-                clip_count = len(list(source_plan.clips)) if source_plan.clips else 0
-
-        rhythm_templates_for_variants = []
-        if clip_count > 0:
-            for idx in range(len(plan_ids)):
-                # 每个变体用不同的 seed 选择节奏模板
-                variant_seed = rng.randint(0, 999999)
-                template = adapt_template_length(RHYTHM_TEMPLATES[variant_seed % len(RHYTHM_TEMPLATES)], clip_count)
-                rhythm_templates_for_variants.append(template)
-                logger.info("变体 %d 节奏模板: plan=%s template=%s", idx, plan_ids[idx], template)
-
-        # #1767：BGM 池差异化分配（让批量变体使用不同 BGM / 段落 / 音量）
-        from packages.domain.bgm_pool import allocate_bgm_pool_for_variants
-
-        source_bgm_config = {}
-        source_plan = self.get_plan(source_plan_id)
-        if source_plan and source_plan.config:
-            source_bgm_config = source_plan.config.get("bgm", {}) or {}
-
-        variant_seeds_for_bgm = [rng.randint(0, 999999) for _ in plan_ids]
-        bgm_pool_assignments = allocate_bgm_pool_for_variants(source_bgm_config, variant_seeds_for_bgm)
-
-        # 为每个变体生成独立视觉扰动参数（让批量视频画面本身更不同）
-        from packages.domain.variant_plan_selector import generate_visual_perturbation
-
-        for idx, pid in enumerate(plan_ids):
+            # #1855 P0：把当前新变体的 clips 区间追加到 batch_segments，供下一变体避让
             try:
-                perturbation = generate_visual_perturbation(rng)
-                # 变体 0 不做 hflip（保持预览 plan 原始画面方向）
-                if idx == 0:
-                    perturbation["hflip"] = False
-                config_update = {"visual_perturbation": perturbation}
-                # #1764：写入节奏模板
-                if idx < len(rhythm_templates_for_variants):
-                    config_update["rhythm_template"] = rhythm_templates_for_variants[idx]
-                # #1765：写入像素级扰动滤镜
-                from packages.domain.variant_plan_selector import generate_pixel_perturbation
-
-                pixel_pert = generate_pixel_perturbation(rng)
-                config_update["pixel_perturbation"] = pixel_pert
-                # #1767：写入 BGM 池分配（覆盖 bgm 配置中的 preset_id / audio_offset / volume_adjust_db）
-                if idx < len(bgm_pool_assignments):
-                    existing_bgm = dict((source_plan.config or {}).get("bgm", {}) or {})
-                    existing_bgm.update(bgm_pool_assignments[idx])
-                    config_update["bgm"] = existing_bgm
-                self.update_plan_config(pid, config_update)
-                logger.info(
-                    "变体 %d 视觉扰动+像素扰动+BGM池: plan=%s vis=%s pix=%s bgm=%s",
-                    idx,
-                    pid,
-                    perturbation,
-                    pixel_pert,
-                    bgm_pool_assignments[idx] if idx < len(bgm_pool_assignments) else None,
-                )
+                _new_segs = _collect_plan_segments(variant.id, self._clip_repo)
+                for _aid, _ivs in _new_segs.items():
+                    batch_segments_acc.setdefault(_aid, []).extend(_ivs)
             except Exception:
-                logger.exception("变体 %d 视觉扰动生成失败（不阻断）: plan=%s", idx, pid)
+                logger.exception("变体 %d 区间收集失败（不阻断）: plan=%s", i, variant.id)
 
         # 标记所有变体 plan 的 clips 为 ready（已分配素材+起点，语义上就是 ready）
         for pid in plan_ids:

apps/api/app/services/generation_common.py

@@ -0,0 +1,189 @@
+"""智能剪辑公共服务辅助函数（从 route 层下沉）。
+
+集中管理：
+- query_voice_durations：批量查询配音素材时长
+- writeback_edit_plan_config：任务入队后回写 EditPlan.config
+- collect_plan_segments：分页读取 plan clips 构建素材区间表（变体避让用）
+- resolve_latest_plan_by_template：按 template_id + user_id 查最新 EditPlan
+
+设计原则：
+- 无副作用的纯查询 / 幂等写回；失败一律不阻断主流程（记日志 + 返回安全默认值）
+- 不依赖 FastAPI / HTTPException，便于 service 层和 worker 复用
+"""
+
+from __future__ import annotations
+
+import logging
+from typing import Any, Optional
+
+from sqlalchemy.orm import Session
+
+logger = logging.getLogger(__name__)
+
+
+def query_voice_durations(db: Session, voice_ids: list[str]) -> list[float]:
+    """批量查询配音素材时长（秒），#1749 配音时长分配用。
+
+    逐项 try/float 硬化：MagicMock/异常/缺失 → 0.0（无配音不分配，不阻断）。
+
+    #1855 P0修复：不再对 voice_ids 去重，保持与调用方传入顺序/长度一致，
+    允许同配音id多次出现时返回相同时长（支持"同配音N变体"的时长对齐）。
+    """
+    raw_ids = list(voice_ids or [])
+    if not raw_ids:
+        return []
+    unique_ids: list[str] = []
+    _seen: set[str] = set()
+    for v in raw_ids:
+        if v and v not in _seen:
+            _seen.add(v)
+            unique_ids.append(v)
+    if not unique_ids:
+        return [0.0 for _ in raw_ids]
+    try:
+        from packages.adapters.sqlalchemy_impl.models import AssetModel
+
+        rows = db.query(AssetModel.id, AssetModel.duration).filter(AssetModel.id.in_(unique_ids)).all()
+        dur_map: dict[str, float] = {}
+        for row in rows:
+            try:
+                dur_map[row[0]] = float(row[1] or 0.0)
+            except (TypeError, ValueError):
+                dur_map[row[0]] = 0.0
+        return [dur_map.get(v, 0.0) if v else 0.0 for v in raw_ids]
+    except Exception:
+        logger.warning("[generation_common] 配音时长查询失败（按无配音处理，不阻断）", exc_info=True)
+        return [0.0 for _ in raw_ids]
+
+
+def writeback_edit_plan_config(
+    plan_id: str,
+    task_id: str,
+    title_config: dict | None,
+    db: Session,
+) -> None:
+    """任务入队成功后，回写 EditPlan.config：generation_task_id + title_config。
+
+    用 merge 方式更新，不整体覆盖 config，避免丢失其他字段。
+    失败只记日志，不影响任务创建。
+    """
+    if not plan_id:
+        return
+    try:
+        from packages.adapters.sqlalchemy_impl.models import EditPlanModel
+
+        plan_model = db.query(EditPlanModel).filter(EditPlanModel.id == plan_id).first()
+        if plan_model is None:
+            logger.warning("[generation_common] 回写plan.config失败: plan不存在 plan_id=%s", plan_id)
+            return
+
+        current_config = plan_model.config if isinstance(plan_model.config, dict) else {}
+        merged = dict(current_config)
+        merged["generation_task_id"] = task_id
+
+        if title_config:
+            # #1901 统一字段名为 "title"（worker sync_configs_to_plan 写的是 "title"）
+            # 先读取新旧两个 key，判断标题文字是否变化
+            old_title_cfg = merged.get("title", {}) or {}
+            if not isinstance(old_title_cfg, dict) or not (old_title_cfg.get("text") or "").strip():
+                old_title_cfg = merged.get("title_config", {}) or {}
+            old_title_text = (old_title_cfg.get("text") or "").strip() if isinstance(old_title_cfg, dict) else ""
+            new_title_text = (title_config.get("text") or "").strip()
+            if old_title_text != new_title_text:
+                if "cover" in merged:
+                    del merged["cover"]
+                    logger.info(
+                        "[generation_common] 标题变化，清除旧封面: plan_id=%s old_title=%s new_title=%s",
+                        plan_id,
+                        old_title_text,
+                        new_title_text,
+                    )
+            # 字段名归一化（font_size→size, font_preset→font, font_color→color），与 worker sync_configs_to_plan 保持一致
+            normalized = dict(title_config)
+            if "font_size" in normalized and "size" not in normalized:
+                normalized["size"] = normalized["font_size"]
+            if "font_preset" in normalized and "font" not in normalized:
+                normalized["font"] = normalized["font_preset"]
+            if "font_color" in normalized and "color" not in normalized:
+                normalized["color"] = normalized["font_color"]
+            merged["title"] = normalized
+            # 清掉旧 key，避免双字段并存
+            merged.pop("title_config", None)
+
+        plan_model.config = merged
+        db.commit()
+        logger.info(
+            "[generation_common] 回写plan.config成功: plan_id=%s task_id=%s keys=%s",
+            plan_id,
+            task_id,
+            list(merged.keys()),
+        )
+    except Exception as e:
+        logger.warning(
+            "[generation_common] 回写plan.config异常（不影响任务创建）: plan_id=%s error=%s",
+            plan_id,
+            e,
+            exc_info=True,
+        )
+        try:
+            db.rollback()
+        except Exception:
+            pass
+
+
+def collect_plan_segments(
+    plan_id: str,
+    clip_repo: Any,
+    *,
+    page_size: int = 500,
+) -> dict[str, list[tuple[float, float]]]:
+    """分页读取 plan 所有 clips，构建 {asset_id: [(start, end), ...]} 素材区间表。
+
+    用于 #1855 P0 批次内素材区间避让（变体间素材片段重叠控制）。
+    """
+    segs: dict[str, list[tuple[float, float]]] = {}
+    sk, pg = 0, page_size
+    while True:
+        batch = clip_repo.list_by_plan(plan_id, skip=sk, limit=pg)
+        if not batch:
+            break
+        for c in batch:
+            if c.asset_id and float(c.duration or 0) > 0:
+                st = float(c.start_time or 0.0)
+                segs.setdefault(c.asset_id, []).append((st, st + float(c.duration)))
+        if len(batch) < pg:
+            break
+        sk += pg
+    return segs
+
+
+def resolve_latest_plan_by_template(
+    db: Session,
+    *,
+    template_id: str,
+    user_id: str,
+) -> Optional[str]:
+    """按 template_id + user_id 查找最新的 EditPlan.id（模板兜底用）。找不到返回 None。"""
+    if not (template_id or "").strip():
+        return None
+    try:
+        from packages.adapters.sqlalchemy_impl.models import EditPlanModel
+
+        latest = (
+            db.query(EditPlanModel)
+            .filter(
+                EditPlanModel.template_id == template_id.strip(),
+                EditPlanModel.created_by_user_id == user_id,
+            )
+            .order_by(EditPlanModel.created_at.desc())
+            .first()
+        )
+        return latest.id if latest else None
+    except Exception:
+        logger.warning(
+            "[generation_common] 按template查找最新plan失败: template=%s user=%s",
+            template_id,
+            user_id,
+            exc_info=True,
+        )
+        return None

apps/api/app/services/lipsync_service.py

@@ -1,8 +1,12 @@
-"""对口型 Service — #1796 MediaKit 对口型业务逻辑, #1809 参数调整.
+"""对口型 Service — #1796 MediaKit 对口型业务逻辑, #1809 参数调整, #1845 配音前置.
 
 职责：
 - 创建/查询对口型任务
-- 双输入模式：TTS 直生（voice_id + script_text，内部先合成音频转存 OSS）或直接音频（audio_url）
+- 三输入模式：
+  1. TTS 直生（voice_id + script_text）→ 走 Celery 异步（降级路径）
+  2. 直接音频（audio_url，前端未传 timings）→ 同步下载 + 算 timings + 提交 MediaKit
+  3. 预合成音频（audio_url + sentence_timings，#1845 新主路径）→ 同步 ffprobe 校验时长 +
+     写入前端传来的 timings → 直接提交 MediaKit（~2-3s）
 - 调用 MediaKit 客户端提交异步任务
 - 轮询更新任务状态（中间状态同步 DB，成片转存自家 OSS）
 - 用户隔离（每个用户只能操作自己的任务）
@@ -26,19 +30,22 @@ from app.services.mediakit_client import (
     get_mediakit_client,
 )
 
-# Celery 异步任务：TTS 合成 + MediaKit 提交（#lipsync-speed-optimization）
+# Celery 异步任务：TTS 合成 + MediaKit 提交（降级路径）
 from app.tasks.lipsync_tts import tts_synthesize_and_submit
 from sqlalchemy.orm import Session
 
 from packages.adapters.sqlalchemy_impl.models import LipsyncJobModel
 from packages.application.cosyvoice_service import CosyVoiceError, normalize_emotion
+from packages.domain.sentence_timings import (
+    compute_sentence_timings,
+    probe_audio_duration,
+)
 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__)
 
 # 传给 MediaKit GPU worker / 回给前端播放的 OSS 预签名有效期：7 天。
-# MediaKit 排队 + 拉取可能延迟，私有桶裸 URL 或 1 小时短预签名都会 403，故统一重签长有效期。
 MEDIAKIT_URL_TTL_SECONDS = 7 * 24 * 3600
 
 
@@ -142,6 +149,100 @@ class LipsyncService:
             logger.warning("TTS 音频转存 OSS 失败，回退临时 URL: job_id=%s err=%s", job_id, exc)
             return temp_url
 
+    def _submit_audio_direct(
+        self,
+        *,
+        job: LipsyncJobModel,
+        supplied_timings: Optional[list] = None,
+        supplied_duration: Optional[float] = None,
+    ) -> None:
+        """音频直传模式（包含 #1845 预合成路径）：同步下载 → ffprobe → timings → 提交 MediaKit.
+
+        直接在 HTTP 请求内完成，不走 Celery。job.status 成功后置为 submitted。
+        失败时把 job 标成 failed 并 commit，然后抛 MediaKitError。
+
+        Args:
+            job: 已 commit 的 LipsyncJobModel（audio_url / video_url 已写入）
+            supplied_timings: 前端传来的预合成 timings（可选，可信时直接用）
+            supplied_duration: 前端传来的预合成时长（可选，用于优先避免重复探测）
+        """
+        # 1. 下载音频
+        audio_data: bytes | None = None
+        try:
+            audio_data = safe_download_bytes(
+                job.audio_url,
+                purpose="lipsync_direct_audio",
+                allowed_mime_types=ALLOWED_AUDIO_MIME_TYPES,
+                timeout=60.0,
+            )
+            logger.info(
+                "[lipsync] 直传音频下载完成: job_id=%s size=%d",
+                job.id,
+                len(audio_data) if audio_data else 0,
+            )
+        except Exception as exc:
+            logger.warning("[lipsync] 直传音频下载失败，跳过 timings 计算: job_id=%s err=%s", job.id, exc)
+
+        # 2. ffprobe 探测时长（优先用前端传入的预合成时长，但以 ffprobe 为准做兜底校验）
+        audio_duration = 0.0
+        if audio_data:
+            audio_duration = probe_audio_duration(audio_data)
+        if audio_duration <= 0 and supplied_duration and supplied_duration > 0:
+            audio_duration = supplied_duration
+            logger.info(
+                "[lipsync] ffprobe 失败，使用前端传入的预合成时长: job_id=%s duration=%.2f", job.id, audio_duration
+            )
+
+        # 3. 句子时间戳：优先用前端预合成传入的 timings（后端预合成接口已经算过，可信）；
+        #    否则若音频下载成功则重算；否则不设置（不阻塞主流程）
+        timings: Optional[list] = None
+        if supplied_timings:
+            timings = supplied_timings
+            logger.info("[lipsync] 使用前端预合成句子时间戳: job_id=%s sentences=%d", job.id, len(timings))
+        elif audio_data and audio_duration > 0 and job.script_text:
+            try:
+                timings = compute_sentence_timings(audio_data, job.script_text, audio_duration)
+                logger.info(
+                    "[lipsync] 后端重算句子时间戳: job_id=%s sentences=%d duration=%.2f",
+                    job.id,
+                    len(timings) if timings else 0,
+                    audio_duration,
+                )
+            except Exception as exc:
+                logger.warning("[lipsync] 句子时间戳计算失败（不阻塞）: job_id=%s err=%s", job.id, exc)
+
+        if timings:
+            job.sentence_timings = timings
+
+        # 4. 签名 URL 并提交 MediaKit
+        video_url = self._sign_media_url(job.video_url)
+        signed_audio_url = self._sign_media_url(job.audio_url)
+        job.audio_url = signed_audio_url
+
+        try:
+            result = self.client.submit_lipsync(
+                video_url=video_url,
+                audio_url=signed_audio_url,
+                enable_video_loop=job.enable_video_loop,
+                client_token=job.id,
+            )
+            job.mediakit_task_id = result["task_id"]
+            job.status = "submitted"
+            job.submitted_at = datetime.now(timezone.utc)
+            self.db.commit()
+            logger.info(
+                "[lipsync] 直传音频已提交 MediaKit: job_id=%s task_id=%s",
+                job.id,
+                result["task_id"],
+            )
+        except MediaKitError as exc:
+            job.status = "failed"
+            job.error_message = str(exc)
+            job.error_code = exc.code
+            logger.error("[lipsync] 直传音频提交 MediaKit 失败: job_id=%s err=%s", job.id, exc)
+            self.db.commit()
+            raise
+
     # ── 创建任务 ──────────────────────────────────────────────────────────
 
     def create_job(
@@ -150,27 +251,35 @@ class LipsyncService:
         user_id: str,
         video_url: str,
         audio_url: str = "",
+        audio_duration: Optional[float] = None,
+        sentence_timings: Optional[list] = None,
         voice_id: str = "",
         script_text: str = "",
         speed: float = 1.0,
         emotion: str = "",
-        enable_video_loop: bool = False,
+        enable_video_loop: bool = True,
         project_id: str = "",
     ) -> LipsyncJobModel:
         """创建对口型任务.
 
-        两种输入模式：
+        三种输入模式：
         - TTS 直生：voice_id + script_text（audio_url 留空）
-          → 先创建 DB 记录（状态 tts_processing），再 dispatch Celery 异步任务
-            执行 TTS 合成 + MediaKit 提交。API 响应 <1s。
-        - 直接音频：提供 audio_url
-          → 同步提交 MediaKit，状态直接设为 submitted。
+          → 创建 DB 记录（状态 tts_processing），dispatch Celery 异步任务（降级路径）。
+          API 响应 <1s。
+        - 直接音频：audio_url 非空 + 无 sentence_timings
+          → 同步下载音频 + 重算 timings + 提交 MediaKit（几秒完成）。
+        - 预合成音频（#1845 新主路径）：audio_url 非空 + 传 sentence_timings
+          → 同步 ffprobe 校验时长 + 写入 timings + 提交 MediaKit（~2-3s）。
 
         Raises:
-            MediaKitError: 参数校验失败或 MediaKit 提交失败（仅直接音频模式）
+            MediaKitError: 参数校验失败或 MediaKit 提交失败
         """
         # 0. 输入校验
-        if not audio_url:
+        is_pre_synth = bool(audio_url) and bool(sentence_timings)
+        bool(audio_url) and not is_pre_synth
+        is_tts_mode = not bool(audio_url)
+
+        if is_tts_mode:
             if not (voice_id and script_text):
                 raise MediaKitError(
                     "必须提供 audio_url 或 voice_id+script_text",
@@ -178,10 +287,13 @@ class LipsyncService:
                 )
             # TTS 模式：在 HTTP 请求中同步校验音色归属，快速失败
             self._resolve_voice_id(voice_id, user_id)
+        elif is_pre_synth:
+            # 预合成模式：script_text 可空（因为 timings 已自带句子文本），但仍建议传
+            if not isinstance(sentence_timings, list) or len(sentence_timings) == 0:
+                raise MediaKitError("预合成模式 sentence_timings 不能为空", code="InvalidInput")
 
         # 1. 创建数据库记录
         job_id = str(uuid.uuid4())
-        is_tts_mode = not bool(audio_url)
         job = LipsyncJobModel(
             id=job_id,
             user_id=user_id,
@@ -192,14 +304,19 @@ class LipsyncService:
             voice_id=voice_id or "",
             script_text=script_text or "",
             speed=speed,
-            emotion=normalize_emotion(emotion),
+            emotion=normalize_emotion(emotion) if is_tts_mode else (emotion or ""),
+            # 音频直传（含预合成）直接进入 pending（后续同步改为 submitted）；TTS 模式进入 tts_processing
             status="tts_processing" if is_tts_mode else "pending",
         )
         self.db.add(job)
         self.db.flush()
 
+        # ⚠️ 必须先 commit 再发 Celery 任务 / 后续同步操作，避免事务竞态
+        self.db.commit()
+        self.db.refresh(job)
+
         if is_tts_mode:
-            # 2a. TTS 模式：dispatch Celery 异步任务处理 TTS 合成 + MediaKit 提交
+            # 2a. TTS 模式：dispatch Celery 异步任务处理 TTS 合成 + MediaKit 提交（降级路径）
             try:
                 tts_synthesize_and_submit.apply_async(
                     args=(
@@ -212,8 +329,6 @@ class LipsyncService:
                     )
                 )
             except Exception as exc:
-                # 投递失败时立即把 job 标成 failed 并写入 error_message，
-                # 前端轮询时能直接看到失败原因，不会无限卡在 tts_processing。
                 logger.exception(
                     "Celery 任务提交失败，TTS 任务已创建但未触发执行: job_id=%s err=%s",
                     job_id,
@@ -223,34 +338,102 @@ class LipsyncService:
                 job.error_message = f"Celery 任务投递失败: {exc}"
                 job.error_code = "AsyncDispatchFailed"
                 job.updated_at = datetime.now(timezone.utc)
+                self.db.commit()
         else:
-            # 2b. 直接音频模式：同步签名并提交 MediaKit
-            video_url = self._sign_media_url(video_url)
-            if audio_url:
-                audio_url = self._sign_media_url(audio_url)
-                job.audio_url = audio_url
+            # 2b/2c. 直接音频 / 预合成音频：同步路径
+            self._submit_audio_direct(
+                job=job,
+                supplied_timings=sentence_timings,
+                supplied_duration=audio_duration,
+            )
+            self.db.refresh(job)
 
-            try:
-                result = self.client.submit_lipsync(
-                    video_url=video_url,
-                    audio_url=audio_url,
-                    enable_video_loop=enable_video_loop,
-                    client_token=job_id,
-                )
-                job.mediakit_task_id = result["task_id"]
-                job.status = "submitted"
-                job.submitted_at = datetime.now(timezone.utc)
-            except MediaKitError as exc:
-                job.status = "failed"
-                job.error_message = str(exc)
-                job.error_code = exc.code
-                logger.error("提交对口型任务失败: %s", exc)
-                raise
-
-        self.db.commit()
-        self.db.refresh(job)
         return job
 
+    # ── TTS 预合成（#1845 步骤1「生成配音」同步接口使用） ──────────────────
+
+    def preview_tts(
+        self,
+        *,
+        user_id: str,
+        voice_id: str,
+        script_text: str,
+        speed: float = 1.0,
+        emotion: str = "natural",
+    ) -> dict:
+        """同步做 TTS 合成 + 下载 + ffprobe + 句子时间戳计算.
+
+        不创建 LipsyncJob、不转存 OSS，直接返回 CosyVoice 临时 URL（~24h 有效期）。
+        耗时约 2-3 秒，由前端在步骤1点「生成配音」时同步等待。
+
+        Returns:
+            {"audio_url": str, "duration": float, "sentence_timings": list[dict]}
+
+        Raises:
+            MediaKitError: TTS 合成失败 / 下载失败 / ffprobe 失败
+        """
+        # 1. 音色解析（校验克隆音色归属）
+        actual_voice_id = self._resolve_voice_id(voice_id, user_id)
+        cosyvoice = self._get_cosyvoice()
+
+        # 2. TTS 合成（同步，~2-3s）
+        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")
+
+        # 3. 下载音频到内存（用于 ffprobe + 静音检测）
+        try:
+            audio_data = safe_download_bytes(
+                temp_url,
+                purpose="tts_preview_audio",
+                allowed_mime_types=ALLOWED_AUDIO_MIME_TYPES,
+                timeout=60.0,
+            )
+        except Exception as exc:
+            logger.warning("[tts-preview] TTS 音频下载失败，仍返回 audio_url: user_id=%s err=%s", user_id, exc)
+            return {
+                "audio_url": temp_url,
+                "duration": 0.0,
+                "sentence_timings": [],
+            }
+
+        # 4. ffprobe 时长
+        duration = probe_audio_duration(audio_data)
+        if duration <= 0:
+            logger.warning("[tts-preview] ffprobe 未返回有效时长，timings 留空: user_id=%s", user_id)
+            return {
+                "audio_url": temp_url,
+                "duration": 0.0,
+                "sentence_timings": [],
+            }
+
+        # 5. 句子时间戳
+        timings = compute_sentence_timings(audio_data, script_text, duration)
+
+        logger.info(
+            "[tts-preview] TTS 预合成完成: user_id=%s duration=%.2f sentences=%d",
+            user_id,
+            duration,
+            len(timings),
+        )
+        return {
+            "audio_url": temp_url,
+            "duration": round(duration, 2),
+            "sentence_timings": timings,
+        }
+
     # ── 查询任务 ──────────────────────────────────────────────────────────
 
     def get_job(self, job_id: str, user_id: str) -> Optional[LipsyncJobModel]:
@@ -284,11 +467,7 @@ class LipsyncService:
     # ── 更新任务状态（轮询） ──────────────────────────────────────────────
 
     def refresh_job_status(self, job_id: str, user_id: str) -> Optional[LipsyncJobModel]:
-        """从 MediaKit 拉取最新状态并更新本地记录.
-
-        Returns:
-            更新后的 Job，或 None（任务不存在/不属于该用户）
-        """
+        """从 MediaKit 拉取最新状态并更新本地记录."""
         job = self.get_job(job_id, user_id)
         if job is None:
             return None
@@ -313,11 +492,25 @@ class LipsyncService:
         if mk_status == STATUS_COMPLETED:
             result = status_data.get("result", {})
             job.status = STATUS_COMPLETED
-            output_url = result.get("video_url", "")
-            # MediaKit 输出为临时 URL，转存自家 OSS 防止过期（失败则回退临时 URL）
-            job.output_video_url = self._persist_output_video(output_url, job_id, user_id)
+            temp_url = result.get("video_url", "")
+            job.output_video_url = temp_url
             job.output_duration = result.get("duration", 0.0)
             job.completed_at = datetime.now(timezone.utc)
+            job.updated_at = datetime.now(timezone.utc)
+            self.db.commit()
+            # 异步转存自家 OSS
+            try:
+                from app.tasks.lipsync_tts import persist_output_video_task
+
+                persist_output_video_task.apply_async(args=(job_id, user_id, temp_url))
+            except Exception as exc:
+                logger.warning(
+                    "提交输出视频异步转存任务失败，保留临时 URL: job_id=%s err=%s",
+                    job_id,
+                    exc,
+                )
+            self.db.refresh(job)
+            return job
         elif mk_status == STATUS_FAILED:
             error = status_data.get("error", {})
             job.status = "failed"
@@ -325,7 +518,6 @@ class LipsyncService:
             job.error_code = error.get("code", "TaskFailed")
             job.completed_at = datetime.now(timezone.utc)
         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)
@@ -334,10 +526,7 @@ class LipsyncService:
         return job
 
     def _persist_output_video(self, temp_url: str, job_id: str, user_id: str) -> str:
-        """将 MediaKit 输出的临时视频 URL 转存到自家 OSS.
-
-        失败时回退返回原始临时 URL，不影响任务完成。
-        """
+        """将 MediaKit 输出的临时视频 URL 转存到自家 OSS. 失败时回退返回原始临时 URL."""
         if not temp_url:
             return ""
         try:
@@ -357,27 +546,21 @@ class LipsyncService:
             return temp_url
 
     def _sign_media_url(self, url: str) -> str:
-        """对自家 OSS 私有桶 URL 重签长有效期预签名，供 MediaKit 拉取 / 前端播放。
-
-        - 裸 public_url（upload_file 返回，不带签名）→ 私有桶匿名访问 403，重签。
-        - 已带签名但即将过期的 URL（如前端 1h 预签名）→ 抽 storage_key 后重签。
-        - 外部 URL（CosyVoice/MediaKit 临时链接，非本桶 host）→ 原样透传。
-        - 任何异常都降级原样返回，不阻断主流程。
-        """
+        """对自家 OSS 私有桶 URL 重签长有效期预签名."""
         if not url:
             return url
         try:
             storage = get_shared_storage_service()
             public_base = getattr(storage, "public_url", "")
             if not isinstance(public_base, str) or not public_base:
-                return url  # 无法判定归属，保守透传
+                return url
             own_host = urlparse(public_base).netloc.lower()
             host = urlparse(url).netloc.lower()
             if not own_host or host != own_host:
-                return url  # 非自家 OSS（外部临时链接），不处理
+                return url  # 外部临时链接原样透传
             signed = storage.get_download_url(url, expires_seconds=MEDIAKIT_URL_TTL_SECONDS)
             return signed or url
-        except Exception as exc:  # noqa: BLE001 - 签名失败不阻断，降级原 URL
+        except Exception as exc:
             logger.warning("对口型 URL 重签失败，原样返回: url_prefix=%s err=%s", url[:80], exc)
             return url
 

apps/api/app/services/mediakit_client.py

@@ -75,7 +75,7 @@ class MediaKitClient:
         *,
         video_url: str,
         audio_url: str,
-        enable_video_loop: bool = False,
+        enable_video_loop: bool = True,
         callback_url: Optional[str] = None,
         callback_args: Optional[str] = None,
         client_token: Optional[str] = None,
@@ -103,8 +103,7 @@ class MediaKitClient:
             "video_url": video_url,
             "audio_url": audio_url,
         }
-        if enable_video_loop:
-            payload["enable_video_loop"] = True
+        payload["enable_video_loop"] = bool(enable_video_loop)
         if callback_url:
             payload["callback_url"] = callback_url
         if callback_args:

apps/api/app/tasks/lipsync_tts.py

@@ -12,6 +12,10 @@
 
 注意：使用 @shared_task 而非绑定到某个 celery_app 实例，
 确保任务能被 Worker 侧 celery_app 正确注册，同时 API 侧 send_task/apply_async 仍可正常调用。
+
+#1845：句子时间戳计算已提取至 packages/domain/sentence_timings.py，本模块保留
+_ 开头别名兼容历史导入，但 _compute_sentence_timings/_split_script_into_sentences/
+_estimate_sentence_timings_by_chars 等内部函数已复用共享实现，避免重复代码。
 """
 
 import io
@@ -21,6 +25,12 @@ from urllib.parse import urlparse
 
 from celery import shared_task
 
+# 复用共享的句子时间戳工具（#1845 配音前置）
+from packages.domain.sentence_timings import compute_sentence_timings as _compute_sentence_timings
+from packages.domain.sentence_timings import (
+    probe_audio_duration,
+)
+
 logger = logging.getLogger(__name__)
 
 # MediaKit 预签名 URL 有效期（7天，秒），与 LipsyncService._sign_media_url 保持一致
@@ -57,8 +67,13 @@ def _sign_media_url(url: str) -> str:
 @shared_task(
     bind=True,
     name="lipsync_tts.synthesize_and_submit",
-    max_retries=2,
+    max_retries=5,  # 事务竞态重试3次（job not found）+ TTS偶发错误2次
     default_retry_delay=30,
+    autoretry_for=(OSError, ConnectionError),  # 网络/连接错误自动重试
+    retry_backoff=True,
+    retry_backoff_max=30,
+    soft_time_limit=180,
+    time_limit=200,
 )
 def tts_synthesize_and_submit(
     self,
@@ -71,7 +86,8 @@ def tts_synthesize_and_submit(
 ):
     """异步执行 TTS 合成 + OSS 转存 + MediaKit 提交.
 
-    在 Celery worker 中运行，不阻塞 HTTP 请求。
+    在 Celery worker 中运行，不阻塞 HTTP 请求。保留作为降级路径
+    （预合成失败 / 旧版前端未传 audio_url 时走此路径）。
     """
     from app.services.mediakit_client import MediaKitError, get_mediakit_client
     from sqlalchemy.orm import Session as DBSession
@@ -103,7 +119,25 @@ def tts_synthesize_and_submit(
         )
 
         if job is None:
-            logger.error("[lipsync_tts] Job not found: job_id=%s", job_id)
+            # 事务竞态防御：API 在 commit 前投递了任务，worker 消费时事务尚未提交。
+            retries = getattr(self.request, "retries", 0)
+            max_retries = 3
+            if retries < max_retries:
+                backoff = (2**retries) + (retries * 1)  # 1s, 3s, 7s
+                logger.warning(
+                    "[lipsync_tts] Job not found yet (retry %d/%d, backoff %ds): job_id=%s",
+                    retries + 1,
+                    max_retries,
+                    backoff,
+                    job_id,
+                )
+                self.db.close()
+                raise self.retry(countdown=backoff, max_retries=max_retries)
+            logger.error(
+                "[lipsync_tts] Job not found after %d retries, giving up: job_id=%s",
+                max_retries,
+                job_id,
+            )
             return
 
         # 已取消的任务不再处理
@@ -112,6 +146,13 @@ def tts_synthesize_and_submit(
             return
 
         # 1. TTS 合成
+        logger.info(
+            "[lipsync_tts] 开始 TTS 合成: job_id=%s voice_id=%s text_len=%d speed=%.2f",
+            job_id,
+            voice_id,
+            len(script_text),
+            speed,
+        )
         try:
             cosyvoice = CosyVoiceService()
             result = cosyvoice.submit_synthesize_task(
@@ -147,37 +188,74 @@ def tts_synthesize_and_submit(
             db.commit()
             return
 
-        # 2. 下载并转存到自家 OSS
+        # 2. 下载 TTS 音频到内存（用于 2.5 静音检测；不转存自家 OSS，直接使用 CosyVoice 临时 URL）
+        audio_data: bytes | None = None
         try:
             audio_data = safe_download_bytes(
                 temp_url,
                 purpose="lipsync_tts_audio",
-                allowed_mime_types=(
+                allowed_mime_types={
                     "audio/mpeg",
                     "audio/mp3",
                     "audio/wav",
+                    "audio/x-wav",  # CosyVoice 部分接口返回 audio/x-wav
                     "audio/mp4",
                     "audio/x-m4a",
-                ),
+                },
                 timeout=60.0,
             )
-            from packages.shared.storage import get_shared_storage_service
-
-            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("[lipsync_tts] TTS 音频已转存 OSS: job_id=%s key=%s", job_id, storage_key)
-            job.audio_url = permanent_url
+            logger.info(
+                "[lipsync_tts] TTS 音频已下载到内存: job_id=%s size=%d",
+                job_id,
+                len(audio_data) if audio_data else 0,
+            )
         except Exception as exc:
             logger.warning(
-                "[lipsync_tts] TTS 音频转存 OSS 失败，回退临时 URL: job_id=%s err=%s",
+                "[lipsync_tts] TTS 音频下载失败，跳过静音检测，直接使用临时 URL 提交: job_id=%s err=%s",
                 job_id,
                 exc,
             )
-            job.audio_url = temp_url
+        # TTS 音频使用 CosyVoice 临时 URL，跳过自家 OSS 转存（加速，步骤⑥）
+        job.audio_url = temp_url
+        logger.info("[lipsync_tts] TTS 音频使用 CosyVoice 临时 URL（跳过 OSS 转存）: job_id=%s", job_id)
 
         db.commit()
 
+        # 2.5 计算精确句子时间戳（基于 TTS 音频静音检测）—— 复用共享工具
+        try:
+            if not audio_data:
+                logger.warning("[lipsync_tts] 无音频数据，跳过句子时间戳计算: job_id=%s", job_id)
+            else:
+                _audio_duration = probe_audio_duration(audio_data)
+                logger.info(
+                    "[lipsync_tts] 音频时长探测: job_id=%s duration=%.2f",
+                    job_id,
+                    _audio_duration,
+                )
+
+                if _audio_duration > 0:
+                    _timings = _compute_sentence_timings(audio_data, script_text, _audio_duration)
+                    if _timings:
+                        job.sentence_timings = _timings
+                        logger.info(
+                            "[lipsync_tts] 句子时间戳已计算: job_id=%s sentences=%d duration=%.1f",
+                            job_id,
+                            len(_timings),
+                            _audio_duration,
+                        )
+                    else:
+                        logger.warning("[lipsync_tts] 句子时间戳计算返回空结果: job_id=%s", job_id)
+                else:
+                    logger.warning(
+                        "[lipsync_tts] ffprobe 未获取到有效时长，跳过句子时间戳: job_id=%s",
+                        job_id,
+                    )
+                db.commit()
+        except Exception as _st_err:
+            logger.warning(
+                "[lipsync_tts] 句子时间戳计算失败（不影响主流程）: job_id=%s err=%s", job_id, _st_err, exc_info=True
+            )
+
         # 3. 签名 URL 并提交到 MediaKit（复用模块内 _sign_media_url，避免对 LipsyncService 的耦合）
         audio_url = _sign_media_url(job.audio_url)
         video_url = _sign_media_url(job.video_url)
@@ -220,3 +298,58 @@ def tts_synthesize_and_submit(
             logger.exception("[lipsync_tts] 回写失败状态时异常: job_id=%s", job_id)
     finally:
         db.close()
+
+
+@shared_task(
+    name="lipsync_tts.persist_output_video",
+    max_retries=2,
+    default_retry_delay=30,
+)
+def persist_output_video_task(job_id: str, user_id: str, temp_url: str):
+    """异步转存对口型输出视频到自家 OSS（步骤⑦ — 将同步阻塞挪到后台，加速前端响应）."""
+
+    try:
+        from worker_app.db import SessionLocal  # type: ignore
+    except Exception:  # noqa: BLE001
+        from app.db import SessionLocal  # type: ignore
+
+    from packages.adapters.sqlalchemy_impl.models import LipsyncJobModel
+    from packages.shared.storage import get_shared_storage_service
+
+    db = SessionLocal()
+    try:
+        job = db.query(LipsyncJobModel).filter(LipsyncJobModel.id == job_id, LipsyncJobModel.user_id == user_id).first()
+        if job is None:
+            logger.error("[lipsync_tts.persist] Job not found: job_id=%s", job_id)
+            return
+
+        if not temp_url:
+            logger.warning("[lipsync_tts.persist] temp_url 为空，跳过转存: job_id=%s", job_id)
+            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")
+            final_url = _sign_media_url(permanent_url) if permanent_url else temp_url
+            job.output_video_url = final_url
+            job.updated_at = datetime.now(timezone.utc)
+            db.commit()
+            logger.info("[lipsync_tts.persist] 输出视频已转存 OSS: job_id=%s key=%s", job_id, storage_key)
+        except Exception as exc:
+            logger.warning(
+                "[lipsync_tts.persist] 输出视频转存失败，保留临时 URL: job_id=%s err=%s",
+                job_id,
+                exc,
+            )
+    except Exception:
+        logger.exception("[lipsync_tts.persist] 未预期异常: job_id=%s", job_id)
+    finally:
+        db.close()

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

@@ -26,6 +26,10 @@ export interface BatchVariantPlansRequest {
   count: number
   /** 源剪辑计划 ID：优先取预览/草稿关联的 plan；不传由后端按 template_id+user 兜底最新 plan */
   source_edit_plan_id?: string
+  /** 统一配音 ID（共用配音模式）；独立配音模式不传，改传 voice_library_ids */
+  voice_library_id?: string
+  /** 独立配音 ID 列表（长度=count，按变体序号一一对应）；共用配音模式不传 */
+  voice_library_ids?: string[]
 }
 
 /** 单个变体的计划片段 */
@@ -36,6 +40,8 @@ export interface VariantPlan {
   plan_id: string
   /** 该变体的真实片段（顺序/素材/起点与正式成片一致） */
   clips: EditPlanClip[]
+  /** 该变体实际配音时长（秒），用于前端预览按配音时长对齐音画；后端暂未返回时缺省 */
+  voice_duration?: number
 }
 
 /** 批量变体计划响应 */

apps/web/src/api/products/products.ts

@@ -1,6 +1,6 @@
 /**
  * 成品 / 视频相关 API 函数
- * 后端实际接口：/videos
+ * 后端实际接口：/videos（分页：page/page_size，返回 {items, total, page, page_size}）
  */
 import apiClient from "../client"
 import type {
@@ -12,16 +12,39 @@ import type {
 } from "./types"
 import { mapVideoToProductItem } from "./utils"
 
-/** 获取成品列表（支持分页和筛选） */
-export const getProducts = async (params?: ProductListParams): Promise<ProductItem[]> => {
-  const response = await apiClient.get("/videos", { params })
-  const data = response.data
-  const videos: VideoItem[] = Array.isArray(data?.items)
-    ? data.items
-    : Array.isArray(data)
-      ? data
-      : []
-  return videos.map(mapVideoToProductItem)
+/** 分页列表响应（前端消费用） */
+export interface ProductListResult {
+  items: ProductItem[]
+  total: number
+  page: number
+  page_size: number
+}
+
+/**
+ * 获取成品列表（分页）
+ * @param params 分页与筛选参数：page 默认 1，page_size 默认 20
+ */
+export const getProducts = async (params?: ProductListParams): Promise<ProductListResult> => {
+  const response = await apiClient.get("/videos", {
+    params: {
+      page: 1,
+      page_size: 20,
+      ...params,
+    },
+  })
+  const data = response.data as {
+    items?: VideoItem[]
+    total?: number
+    page?: number
+    page_size?: number
+  }
+  const items: VideoItem[] = Array.isArray(data?.items) ? data.items : []
+  return {
+    items: items.map(mapVideoToProductItem),
+    total: data.total ?? items.length,
+    page: data.page ?? params?.page ?? 1,
+    page_size: data.page_size ?? params?.page_size ?? 20,
+  }
 }
 
 /** 获取单个成品详情 */

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

@@ -16,6 +16,7 @@ export interface TTSSynthesizeRequest {
   voice_id?: string
   output_name?: string
   language?: string
+  emotion?: string
   speed?: number
   voice_model?: string
   voice_clone_profile_id?: string
@@ -103,6 +104,7 @@ export interface TTSPreviewRequest {
   voice_id: string
   speed?: number
   pitch?: number
+  language?: string
   emotion?: string // 情绪参数：natural/excited/calm/friendly
 }
 

apps/web/src/api/voice-clone/clones.ts

@@ -96,9 +96,12 @@ export const retryVoiceClone = async (id: string): Promise<VoiceCloneProfile> =>
 export const getVoiceClonePreview = async (
   cloneId: string,
   text?: string,
+  options?: { speed?: number; emotion?: string },
 ): Promise<VoiceClonePreviewResponse> => {
   const searchParams = new URLSearchParams()
   if (text) searchParams.set("text", text)
+  if (options?.speed !== undefined) searchParams.set("speed", String(options.speed))
+  if (options?.emotion) searchParams.set("emotion", options.emotion)
   const qs = searchParams.toString()
   const response = await apiClient.get<VoiceClonePreviewResponse>(
     `/voice-clones/${cloneId}/preview${qs ? `?${qs}` : ""}`,

apps/web/src/config/navigation.ts

@@ -8,9 +8,7 @@ import {
   FileOutlined,
   FileTextOutlined,
   AudioOutlined,
-  AppstoreOutlined,
   EditOutlined,
-  FolderOutlined,
   VideoCameraOutlined,
   HistoryOutlined,
   TrophyOutlined,
@@ -70,24 +68,6 @@ export const NAV_ITEMS: NavItem[] = [
     path: "/app/voices",
     icon: React.createElement(AudioOutlined),
   },
-  {
-    key: "templates",
-    label: "模板库",
-    path: "/app/templates",
-    icon: React.createElement(AppstoreOutlined),
-  },
-  {
-    key: "editing-planner",
-    label: "剪辑模板",
-    path: "/app/editing-planner",
-    icon: React.createElement(EditOutlined),
-  },
-  {
-    key: "my-templates",
-    label: "我的模板",
-    path: "/app/my-templates",
-    icon: React.createElement(FolderOutlined),
-  },
 
   {
     key: "generate",
@@ -150,12 +130,6 @@ export const NAV_GROUPS: NavGroup[] = [
         path: "/app/ai-avatar",
         icon: React.createElement(UserOutlined),
       },
-      {
-        key: "editing-planner",
-        label: "剪辑模板",
-        path: "/app/editing-planner",
-        icon: React.createElement(EditOutlined),
-      },
     ],
   },
   {
@@ -191,18 +165,6 @@ export const NAV_GROUPS: NavGroup[] = [
         path: "/app/products",
         icon: React.createElement(TrophyOutlined),
       },
-      {
-        key: "templates",
-        label: "模板库",
-        path: "/app/templates",
-        icon: React.createElement(AppstoreOutlined),
-      },
-      {
-        key: "my-templates",
-        label: "我的模板",
-        path: "/app/my-templates",
-        icon: React.createElement(FolderOutlined),
-      },
     ],
   },
   {

apps/web/src/index.css

@@ -25,15 +25,6 @@ body {
   background-color: var(--bg-secondary);
 }
 
-/* ── 自定义字体 ── */
-@font-face {
-  font-family: "华康俪金黑";
-  src: url("/fonts/DFLiJinHei-W8.ttf") format("truetype");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
 /* 滚动条 - V21 样式 */
 ::-webkit-scrollbar {
   width: 8px;

apps/web/src/pages/ai-avatar/AiAvatar.css

@@ -552,7 +552,7 @@
   max-width: 240px;
   aspect-ratio: 9/16;
   background: #f0f0f5;
-  border-radius: 8px;
+  border-radius: 12px;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -564,8 +564,10 @@
 .aa-cover-preview img {
   width: 100%;
   height: 100%;
+  aspect-ratio: 9/16;
   object-fit: cover;
   display: block;
+  border-radius: 12px;
 }
 
 .aa-cover-preview__placeholder {
@@ -573,6 +575,19 @@
   color: #8c8ca1;
 }
 
+.aa-cover-preview__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+  color: #fff;
+  font-size: 13px;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
 .aa-cover-actions {
   display: flex;
   gap: 8px;
@@ -1250,3 +1265,20 @@
   width: auto;
   min-width: 300px;
 }
+
+/* 渲染完成后的封面确认区 */
+.aa-finalize-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0 8px;
+}
+
+.aa-finalize-cover {
+  width: 100%;
+  max-width: 240px;
+  aspect-ratio: 9/16;
+  border-radius: 12px;
+  overflow: hidden;
+  position: relative;
+}

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

@@ -1,7 +1,7 @@
 /**
- * AI数字人 — 主页面（v3 两步骤版）
- * 步骤1：出镜视频 / 配音库 / 文案
- * 步骤2：对口型预览（含插入画面）/ 标题配置 / 封面&生成
+ * AI数字人 — 主页面（v3 两步骤版 + #1845 配音前置）
+ * 步骤1：出镜视频 / 配音库 / 文案 → 点击「🎵 生成配音」做 TTS 预合成（同步，~2-3s）
+ * 步骤2：对口型预览（音频已就绪、B-roll 句子时间戳立即可用）/ 标题配置 / 封面&生成
  */
 import React, { useState, useCallback, useEffect, useRef } from "react"
 import { message } from "antd"
@@ -16,20 +16,26 @@ import PanelTitleConfig from "./components/PanelTitleConfig"
 import PanelCoverAndGenerate from "./components/PanelCoverAndGenerate"
 import { ModalAssetPicker } from "./components/ModalAssetPicker"
 import ModalBRollEditor from "./components/ModalBRollEditor"
+import ModalCoverSelect from "./components/ModalCoverSelect"
 import {
   getScripts,
   getAssetById,
   createLipsyncJob,
   getLipsyncJob,
+  previewTts,
   submitRender,
   getRenderJob,
-  generateSmartCover,
+  generateRenderSmartCover,
+  finalizeRenderJob,
 } from "./api/aiAvatar"
+import { getOrCreateDefaultProject } from "@/api/projects"
+import type { RenderJob, SentenceTiming } from "./types"
 import {
   normalizeEmotion,
   buildTitleConfigPayload,
   buildCoverConfigPayload,
 } from "./utils/contract"
+import { renderTitleToPngDataUrl, getVideoResolution } from "./utils/titleCanvas"
 
 /** 面板折叠状态 */
 type PanelKey = "video" | "voice" | "script" | "lipsync" | "title" | "cover"
@@ -47,14 +53,18 @@ const AiAvatarPage: React.FC = () => {
     cover: false,
   })
 
+  /* ── #1845 TTS 预合成弹窗 ── */
+  const [showTtsModal, setShowTtsModal] = useState(false)
+  const [ttsProgress, setTtsProgress] = useState(0)
+  const [ttsErrorMessage, setTtsErrorMessage] = useState("")
+  const ttsProgressTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
   /* ── 对口型生成弹窗 ── */
   const [showLipsyncModal, setShowLipsyncModal] = useState(false)
   const [lipsyncStatus, setLipsyncStatus] = useState<"generating" | "completed" | "failed">(
     "generating",
   )
   const [lipsyncErrorMessage, setLipsyncErrorMessage] = useState("")
-  /* ── 智能封面加载态 ── */
-  const [smartCoverLoading, setSmartCoverLoading] = useState(false)
   /* ── 渲染进度弹窗 ── */
   const [showRenderModal, setShowRenderModal] = useState(false)
   const [renderStatus, setRenderStatus] = useState<"generating" | "completed" | "failed">(
@@ -62,6 +72,12 @@ const AiAvatarPage: React.FC = () => {
   )
   const [renderProgress, setRenderProgress] = useState(0)
   const [renderErrorMessage, setRenderErrorMessage] = useState("")
+  /* ── 当前渲染任务对象 ── */
+  const [currentRenderJob, setCurrentRenderJob] = useState<RenderJob | null>(null)
+  /* ── 封面选择弹窗 ── */
+  const [showCoverModal, setShowCoverModal] = useState(false)
+  const [selectedCoverUrl, setSelectedCoverUrl] = useState("")
+  const [finalizeLoading, setFinalizeLoading] = useState(false)
 
   /* ── 对口型轮询 ── */
   const lipsyncTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
@@ -72,8 +88,29 @@ const AiAvatarPage: React.FC = () => {
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }))
   }, [])
 
-  /* ── 步骤切换 ── */
-  const handleNextStep = useCallback(() => {
+  /* ── #1845 文案/音色/语速变更时重置 TTS 预合成状态，避免音频与文案不一致 ── */
+  useEffect(() => {
+    if (state.ttsPreview.status !== "idle") {
+      state.resetTtsPreview()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.scriptText, state.selectedVoice?.voice_id, state.speed, state.emotion])
+
+  const _clearTtsProgressTimer = useCallback(() => {
+    if (ttsProgressTimerRef.current) {
+      clearInterval(ttsProgressTimerRef.current)
+      ttsProgressTimerRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      _clearTtsProgressTimer()
+    }
+  }, [_clearTtsProgressTimer])
+
+  /* ── #1845 步骤1：点击「🎵 生成配音」→ 同步 TTS 预合成 ── */
+  const handleGenerateTts = useCallback(async () => {
     const missing: string[] = []
     if (!state.selectedVideo) missing.push("出镜视频")
     if (!state.selectedVoice) missing.push("配音")
@@ -82,45 +119,115 @@ const AiAvatarPage: React.FC = () => {
       message.warning(`请先完成${missing.join("、")}`)
       return
     }
-    setCurrentStep(2)
-  }, [state.selectedVideo, state.selectedVoice, state.scriptText])
 
+    // 打开弹窗 & 启动模拟进度条
+    setShowTtsModal(true)
+    setTtsProgress(0)
+    setTtsErrorMessage("")
+    state.setTtsPreview({
+      audioUrl: null,
+      duration: 0,
+      sentenceTimings: [],
+      status: "generating",
+      error: null,
+    })
+
+    // 模拟进度：每 300ms +10%，到 90% 停住，真完成后瞬间到 100%
+    _clearTtsProgressTimer()
+    let fake = 0
+    ttsProgressTimerRef.current = setInterval(() => {
+      fake = Math.min(fake + 10, 90)
+      setTtsProgress(fake)
+      if (fake >= 90) {
+        _clearTtsProgressTimer()
+      }
+    }, 300)
+
+    try {
+      const res = await previewTts({
+        voice_id: state.selectedVoice!.voice_id,
+        script_text: state.scriptText,
+        speed: state.speed,
+        emotion: normalizeEmotion(state.emotion),
+      })
+      _clearTtsProgressTimer()
+      setTtsProgress(100)
+      state.setTtsPreview({
+        audioUrl: res.audio_url,
+        duration: res.duration,
+        sentenceTimings: res.sentence_timings as SentenceTiming[],
+        status: "done",
+        error: null,
+      })
+      message.success("配音合成完成")
+    } catch (err) {
+      _clearTtsProgressTimer()
+      const errMsg =
+        (err as { response?: { data?: { message?: string; detail?: unknown } } })?.response?.data
+          ?.message || (err instanceof Error ? err.message : "配音合成失败，请重试")
+      setTtsErrorMessage(typeof errMsg === "string" ? errMsg : "配音合成失败，请重试")
+      state.setTtsPreview({
+        audioUrl: null,
+        duration: 0,
+        sentenceTimings: [],
+        status: "failed",
+        error: typeof errMsg === "string" ? errMsg : "配音合成失败",
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.selectedVideo, state.selectedVoice, state.scriptText, state.speed, state.emotion])
+
+  const handleRetryTts = useCallback(() => {
+    handleGenerateTts()
+  }, [handleGenerateTts])
+
+  const handleTtsNext = useCallback(() => {
+    setShowTtsModal(false)
+    setTtsProgress(0)
+    setCurrentStep(2)
+  }, [])
+
+  const handleCancelTts = useCallback(() => {
+    _clearTtsProgressTimer()
+    setShowTtsModal(false)
+    setTtsProgress(0)
+    setTtsErrorMessage("")
+    // 若用户在生成中途关闭，把状态重置回 idle，允许重新点击
+    if (state.ttsPreview.status === "generating") {
+      state.resetTtsPreview()
+    }
+  }, [_clearTtsProgressTimer, state])
+
+  /* ── 上一步（返回步骤1，不会丢失 TTS 预合成结果） ── */
   const handlePrevStep = useCallback(() => {
     setCurrentStep(1)
   }, [])
 
   /* ── 对口型 ── */
   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) {
+    if (missing.length > 0 || !video) {
       message.warning(`请先选择${missing.join("、")}`)
       return
     }
+
+    // #1845：预合成模式下必须要有 audioUrl（理论上到了步骤2肯定有，兜底防御）
+    const isPreSynth = state.ttsPreview.status === "done" && !!state.ttsPreview.audioUrl
+    if (!isPreSynth && !state.selectedVoice) {
+      message.warning("请先选择音色或完成配音合成")
+      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)
@@ -128,29 +235,38 @@ const AiAvatarPage: React.FC = () => {
         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
+
+      type LipsyncPayload = Parameters<typeof createLipsyncJob>[0]
+      let payload: LipsyncPayload
+      if (isPreSynth) {
+        // 预合成模式：传 audio_url + audio_duration + sentence_timings（后端直接提交 MediaKit，~2-3s）
+        payload = {
+          video_url: videoUrl,
+          audio_url: state.ttsPreview.audioUrl!,
+          audio_duration: state.ttsPreview.duration,
+          sentence_timings: state.ttsPreview.sentenceTimings,
+          enable_video_loop: true,
+        }
+      } else {
+        // 降级：TTS 直生（旧路径，前端未预合成时）
+        payload = {
+          voice_id: state.selectedVoice!.voice_id,
+          script_text: state.scriptText,
+          video_url: videoUrl,
+          speed: state.speed,
+          emotion: normalizeEmotion(state.emotion),
+        }
       }
-      console.log("[对口型] createLipsyncJob 请求:", payload)
       const job = await createLipsyncJob(payload)
-      console.log("[对口型] createLipsyncJob 响应:", { id: job.id, status: job.status })
       state.setLipsyncJob(job)
-      // 开始轮询
+
+      // 如果是预合成模式，后端会同步把状态置为 submitted（甚至可能已返回 running），
+      // 但仍需轮询等 completed
       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")
@@ -177,7 +293,14 @@ const AiAvatarPage: React.FC = () => {
       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])
+  }, [
+    state.selectedVideo,
+    state.selectedVoice,
+    state.scriptText,
+    state.speed,
+    state.emotion,
+    state.ttsPreview,
+  ])
 
   // 取消对口型生成
   const handleCancelLipsync = useCallback(() => {
@@ -198,6 +321,14 @@ const AiAvatarPage: React.FC = () => {
     }
   }, [])
 
+  /* ── B-roll 弹窗可用的句子时间戳：优先 lipsyncJob.sentence_timings，否则用 ttsPreview.sentenceTimings ── */
+  const bRollSentenceTimings: SentenceTiming[] | undefined =
+    (state.lipsyncJob?.sentence_timings as SentenceTiming[] | undefined) ??
+    (state.ttsPreview.status === "done" ? state.ttsPreview.sentenceTimings : undefined)
+
+  /* ── B-roll 可用的总时长：优先 lipsyncJob.output_duration，否则用 ttsPreview.duration ── */
+  const bRollDuration = state.lipsyncJob?.output_duration || state.ttsPreview.duration || 0
+
   /* ── 生成视频（含实时进度轮询） ── */
   const handleGenerate = useCallback(async () => {
     if (!state.lipsyncJob || state.lipsyncJob.status !== "completed") {
@@ -206,9 +337,28 @@ const AiAvatarPage: React.FC = () => {
     }
     state.setIsGenerating(true)
     try {
+      const defaultProject = await getOrCreateDefaultProject()
+
+      // 用 Canvas 预渲染标题为 PNG dataURL
+      let titleImageDataUrl: string | null = null
+      if (state.titleConfig.title?.trim()) {
+        try {
+          const res = await getVideoResolution(state.lipsyncJob.output_video_url || "")
+          titleImageDataUrl = renderTitleToPngDataUrl({
+            titleConfig: state.titleConfig,
+            videoWidth: res.width,
+            videoHeight: res.height,
+          })
+        } catch (canvasErr) {
+          console.warn("[渲染] 标题 Canvas 渲染失败，降级 drawtext:", canvasErr)
+          titleImageDataUrl = null
+        }
+      }
+
       const job = await submitRender({
         lipsync_job_id: state.lipsyncJob.id,
         script_id: state.script?.id,
+        project_id: defaultProject.id,
         b_roll_segments: state.bRollSegments.map((seg) => ({
           script_segment_index: seg.script_segment_index,
           asset_url: seg.asset.file_url || "",
@@ -218,26 +368,45 @@ const AiAvatarPage: React.FC = () => {
           pip_position: seg.pip_position,
           pip_scale: seg.pip_scale,
         })) as never,
-        title_config: buildTitleConfigPayload(state.titleConfig),
-        cover_config: buildCoverConfigPayload(state.coverConfig, state.coverConfig.smart_cover_url),
+        title_config: buildTitleConfigPayload(state.titleConfig, titleImageDataUrl),
+        cover_config:
+          state.coverConfig.smart_cover_url ||
+          (state.coverConfig.upload_url && !state.coverConfig.upload_url.startsWith("blob:"))
+            ? buildCoverConfigPayload(state.coverConfig, state.coverConfig.smart_cover_url)
+            : {},
       })
 
-      // 打开渲染进度弹窗，启动轮询
       setShowRenderModal(true)
       setRenderStatus("generating")
       setRenderProgress(job.progress ?? 0)
       setRenderErrorMessage("")
+      setCurrentRenderJob(job as RenderJob)
+      // 每次新渲染重置封面状态
+      setSelectedCoverUrl("")
+      setShowCoverModal(false)
 
       if (renderTimerRef.current) clearInterval(renderTimerRef.current)
       renderTimerRef.current = setInterval(async () => {
         try {
           const updated = await getRenderJob(job.id)
           setRenderProgress(updated.progress ?? 0)
+          setCurrentRenderJob(updated)
           if (updated.status === "completed") {
             if (renderTimerRef.current) clearInterval(renderTimerRef.current)
             renderTimerRef.current = null
             setRenderStatus("completed")
-            message.success("视频已生成并保存到成片库")
+            // 不再自动入库/自动跳转：渲染完成后停留在主页面，等用户选封面、点「完成」才入库
+            // 如果后端在透传时已经带了封面（旧逻辑兜底），同步本地状态
+            if (updated.output_cover_url) {
+              state.setCoverConfig((prev) => ({
+                ...prev,
+                mode: "auto_frame",
+                smart_cover_url: updated.output_cover_url,
+                thumbnail_url: updated.output_cover_url,
+              }))
+              setSelectedCoverUrl(updated.output_cover_url)
+            }
+            message.success("视频生成完成，请选择封面")
           } else if (updated.status === "failed") {
             if (renderTimerRef.current) clearInterval(renderTimerRef.current)
             renderTimerRef.current = null
@@ -269,38 +438,109 @@ const AiAvatarPage: React.FC = () => {
     setRenderErrorMessage("")
   }, [])
 
-  /* ── 智能封面：调后端 MediaKit 选帧接口（#1822） ── */
-  const handleSmartCover = useCallback(async () => {
-    // 基于对口型成片抽帧，必须先完成对口型
-    const videoUrl = state.lipsyncJob?.output_video_url
-    if (state.lipsyncJob?.status !== "completed" || !videoUrl) {
-      message.warning("请先生成对口型视频，完成后再智能获取封面")
+  /* ── 智能封面 ── */
+  const handleGenerateRenderSmartCover = useCallback(
+    async (renderId: string): Promise<{ cover_url: string; message?: string }> => {
+      try {
+        const res = await generateRenderSmartCover(renderId)
+        if (res.cover_url) {
+          state.setCoverConfig((prev) => ({
+            ...prev,
+            mode: "auto_frame",
+            smart_cover_url: res.cover_url,
+            thumbnail_url: res.cover_url,
+          }))
+          message.success("智能封面已生成")
+          return { cover_url: res.cover_url }
+        }
+        const errMsg = res.message || "智能封面生成失败，请稍后重试"
+        message.error(errMsg)
+        return { cover_url: "", message: errMsg }
+      } catch (err) {
+        console.error("智能封面生成失败:", err)
+        const errMsg = err instanceof Error ? err.message : "智能封面生成失败，请重试"
+        message.error(errMsg)
+        return { cover_url: "", message: errMsg }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  )
+
+  /* ── 封面弹窗回调 ── */
+  const handleCoverSelected = useCallback((coverUrl: string) => {
+    setSelectedCoverUrl(coverUrl || "")
+  }, [])
+
+  const handleOpenCoverModal = useCallback(() => {
+    if (currentRenderJob?.status !== "completed") {
+      message.warning("请先完成视频生成")
       return
     }
-    setSmartCoverLoading(true)
+    setShowCoverModal(true)
+  }, [currentRenderJob])
+
+  const handleCloseCoverModal = useCallback(() => {
+    setShowCoverModal(false)
+  }, [])
+
+  /* ── 自定义上传封面（本地预览，不单独上传；点完成时一起入库） ── */
+  const handleUploadCover = useCallback(
+    (file: File) => {
+      const url = URL.createObjectURL(file)
+      state.setCoverConfig((prev) => ({
+        ...prev,
+        mode: "upload",
+        upload_url: url,
+        thumbnail_url: url,
+      }))
+      setSelectedCoverUrl(url)
+    },
+    [state],
+  )
+
+  /* ── 点「完成」：调用 finalize 入库成片库，成功后跳转到成片库 ── */
+  const handleFinalize = useCallback(async () => {
+    if (!currentRenderJob?.id) {
+      message.error("渲染任务不存在")
+      return
+    }
+    if (currentRenderJob.status !== "completed") {
+      message.warning("请先完成视频生成")
+      return
+    }
+    setFinalizeLoading(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("智能封面已生成")
+      const res = await finalizeRenderJob(currentRenderJob.id)
+      if (res.data?.status === "success" || res.data?.status === "already_finalized") {
+        message.success("已保存到成片库")
+        navigate("/app/products")
       } else {
-        message.error(res.message || "智能封面生成失败，请稍后重试")
+        message.error("保存失败，请重试")
       }
     } catch (err) {
-      console.error("智能封面生成失败:", err)
-      message.error(err instanceof Error ? err.message : "智能封面生成失败，请重试")
+      console.error("finalize 失败:", err)
+      const errMsg =
+        (err as { response?: { data?: { detail?: unknown } } })?.response?.data?.detail ||
+        (err instanceof Error ? err.message : "保存到成片库失败")
+      message.error(typeof errMsg === "string" ? errMsg : "保存到成片库失败")
     } finally {
-      setSmartCoverLoading(false)
+      setFinalizeLoading(false)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.lipsyncJob])
+  }, [currentRenderJob, navigate])
 
   /* ── 配置汇总 ── */
+  const coverStatus: "not_ready" | "pending" | "selected" = (() => {
+    if (
+      state.coverConfig.smart_cover_url ||
+      state.coverConfig.thumbnail_url ||
+      (state.coverConfig.upload_url && !state.coverConfig.upload_url.startsWith("blob:"))
+    ) {
+      return "selected"
+    }
+    if (currentRenderJob?.status === "completed") return "pending"
+    return "not_ready"
+  })()
   const summary = {
     videoName: state.selectedVideo?.name || null,
     voiceName: state.selectedVoice?.name || null,
@@ -308,7 +548,7 @@ const AiAvatarPage: React.FC = () => {
     lipsyncStatus: state.lipsyncJob?.status || null,
     brollCount: state.bRollSegments.length,
     hasTitle: state.titleConfig.title.length > 0,
-    hasCover: state.coverConfig.enabled,
+    coverStatus,
   }
 
   return (
@@ -342,7 +582,6 @@ const AiAvatarPage: React.FC = () => {
                   selectedVideo={state.selectedVideo}
                   onSelectVideo={() => state.setShowAssetPicker(true)}
                   onRemoveVideo={state.removeVideo}
-                  titleConfig={state.titleConfig}
                 />
               </div>
             </div>
@@ -382,19 +621,33 @@ const AiAvatarPage: React.FC = () => {
                   onOpenScriptModal={() => state.setShowScriptModal(true)}
                 />
                 <div className="aa-step-btn-row">
-                  <button type="button" className="aa-btn aa-btn--primary" onClick={handleNextStep}>
-                    下一步 →
+                  <button
+                    type="button"
+                    className="aa-btn aa-btn--primary"
+                    onClick={handleGenerateTts}
+                    disabled={state.ttsPreview.status === "generating"}
+                  >
+                    {state.ttsPreview.status === "done" ? "🎵 重新生成配音" : "🎵 生成配音"}
                   </button>
+                  {state.ttsPreview.status === "done" && (
+                    <button
+                      type="button"
+                      className="aa-btn aa-btn--primary"
+                      onClick={() => setCurrentStep(2)}
+                      style={{ marginLeft: 12 }}
+                    >
+                      下一步 →
+                    </button>
+                  )}
                 </div>
               </div>
             </div>
           </>
         )}
 
-        {/* ════ 步骤 2：对口型预览（含插入画面）/ 标题配置 / 封面&生成 ════ */}
+        {/* ════ 步骤 2：对口型预览 / 标题配置 / 封面&生成 ════ */}
         {currentStep === 2 && (
           <>
-            {/* 面板：对口型预览 + 插入画面 */}
             <div className={`aa-panel aa-panel--s2-wide${collapsed.lipsync ? " collapsed" : ""}`}>
               <div className="aa-panel__header" onClick={() => togglePanel("lipsync")}>
                 <span className="aa-panel__title">对口型预览</span>
@@ -432,27 +685,98 @@ const AiAvatarPage: React.FC = () => {
               </div>
             </div>
 
-            {/* 面板5：封面 & 生成 */}
+            {/* 面板5：封面 & 生成
+                - 渲染未完成：显示分辨率/配置摘要/「开始生成」按钮（PanelCoverAndGenerate setup 变体，无封面区）
+                - 渲染完成：显示封面预览 + 「🎬 选择封面」/「✅ 完成」按钮，封面选择在弹窗中完成 */}
             <div className={`aa-panel aa-panel--s2${collapsed.cover ? " collapsed" : ""}`}>
               <div className="aa-panel__header" onClick={() => togglePanel("cover")}>
-                <span className="aa-panel__title">封面 & 生成</span>
+                <span className="aa-panel__title">
+                  {currentRenderJob?.status === "completed" ? "视频已生成" : "封面 & 生成"}
+                </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}
-                />
+                {currentRenderJob?.status !== "completed" ? (
+                  <PanelCoverAndGenerate
+                    variant="setup"
+                    coverConfig={state.coverConfig}
+                    onCoverConfigChange={(partial) =>
+                      state.setCoverConfig((prev) => ({ ...prev, ...partial }))
+                    }
+                    renderJob={currentRenderJob}
+                    onGenerateRenderSmartCover={handleGenerateRenderSmartCover}
+                    resolution={state.resolution}
+                    onResolutionChange={state.setResolution}
+                    isGenerating={state.isGenerating}
+                    onGenerate={handleGenerate}
+                    summary={summary}
+                  />
+                ) : (
+                  <div className="aa-finalize-section">
+                    <div
+                      style={{ marginBottom: 8, fontSize: 13, color: "#1a1a2e", fontWeight: 500 }}
+                    >
+                      ✅ 视频生成完成，请选择封面后点「完成」入库
+                    </div>
+                    <div className="aa-finalize-cover">
+                      {selectedCoverUrl ? (
+                        <img
+                          src={selectedCoverUrl}
+                          alt="封面预览"
+                          draggable={false}
+                          style={{
+                            width: "100%",
+                            height: "100%",
+                            objectFit: "cover",
+                            borderRadius: 8,
+                          }}
+                        />
+                      ) : (
+                        <div
+                          style={{
+                            width: "100%",
+                            height: "100%",
+                            border: "2px dashed #d9d9d9",
+                            borderRadius: 8,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: "#8c8ca1",
+                            fontSize: 12,
+                            flexDirection: "column",
+                            gap: 4,
+                          }}
+                        >
+                          <span style={{ fontSize: 24 }}>🎬</span>
+                          <span>尚未选择封面</span>
+                        </div>
+                      )}
+                    </div>
+                    <div
+                      style={{
+                        display: "flex",
+                        gap: 10,
+                        marginTop: 12,
+                      }}
+                    >
+                      <button
+                        type="button"
+                        className="aa-btn aa-btn--ghost"
+                        onClick={handleOpenCoverModal}
+                      >
+                        🎬 选择封面
+                      </button>
+                      <button
+                        type="button"
+                        className="aa-btn aa-btn--primary"
+                        onClick={handleFinalize}
+                        disabled={finalizeLoading}
+                      >
+                        {finalizeLoading ? "⏳ 保存中..." : "✅ 完成"}
+                      </button>
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
           </>
@@ -478,19 +802,144 @@ const AiAvatarPage: React.FC = () => {
         />
       )}
 
-      {/* B-roll 编辑器弹窗 */}
+      {/* B-roll 编辑器弹窗 — #1845：timings 在对口型完成前就可用（来自 TTS 预合成） */}
       {state.showBRollModal && (
         <ModalBRollEditor
           open={state.showBRollModal}
           onClose={() => state.setShowBRollModal(false)}
           existingSegments={state.bRollSegments}
-          scriptText={state.scriptText}
-          outputDuration={state.lipsyncJob?.output_duration ?? 0}
+          scriptText={state.lipsyncJob?.script_text || state.scriptText}
+          outputDuration={bRollDuration}
+          sentenceTimings={bRollSentenceTimings}
           onConfirm={state.addBRollSegment}
           onRemove={state.removeBRollSegment}
         />
       )}
 
+      {/* #1845 TTS 预合成弹窗 */}
+      {showTtsModal && (
+        <div className="aa-modal-overlay">
+          <div className="aa-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="aa-modal__header">
+              <span className="aa-modal__title">配音合成中</span>
+              {state.ttsPreview.status !== "generating" && (
+                <button className="aa-modal__close" onClick={handleCancelTts}>
+                  ✕
+                </button>
+              )}
+            </div>
+            <div
+              className="aa-modal__body"
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                padding: "40px 20px",
+              }}
+            >
+              {state.ttsPreview.status === "generating" && (
+                <>
+                  <div className="aa-lipsync-spinner" />
+                  <div style={{ marginTop: 20, fontSize: 15, color: "#1a1a2e" }}>
+                    正在合成配音，请稍候…
+                  </div>
+                  <div
+                    style={{
+                      marginTop: 20,
+                      fontSize: 32,
+                      fontWeight: 700,
+                      color: "#1890ff",
+                    }}
+                  >
+                    {ttsProgress}%
+                  </div>
+                  <div
+                    style={{
+                      marginTop: 12,
+                      width: "80%",
+                      height: 8,
+                      backgroundColor: "#f0f0f0",
+                      borderRadius: 4,
+                      overflow: "hidden",
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: `${ttsProgress}%`,
+                        height: "100%",
+                        backgroundColor: "#1890ff",
+                        borderRadius: 4,
+                        transition: "width 0.3s ease",
+                      }}
+                    />
+                  </div>
+                  <div style={{ marginTop: 12, fontSize: 13, color: "#8c8ca1" }}>
+                    请勿关闭页面，完成后将自动提示
+                  </div>
+                </>
+              )}
+              {state.ttsPreview.status === "done" && (
+                <>
+                  <div style={{ fontSize: 48 }}>✅</div>
+                  <div style={{ marginTop: 16, fontSize: 15, color: "#1a1a2e" }}>
+                    配音合成完成，点击下一步继续
+                  </div>
+                  <div style={{ marginTop: 8, fontSize: 13, color: "#8c8ca1" }}>
+                    音频时长 {state.ttsPreview.duration.toFixed(1)}s，共{" "}
+                    {state.ttsPreview.sentenceTimings.length} 句
+                  </div>
+                </>
+              )}
+              {state.ttsPreview.status === "failed" && (
+                <>
+                  <div style={{ fontSize: 48 }}>❌</div>
+                  <div style={{ marginTop: 16, fontSize: 15, color: "#1a1a2e" }}>配音合成失败</div>
+                  {ttsErrorMessage && (
+                    <div
+                      style={{
+                        marginTop: 8,
+                        fontSize: 13,
+                        color: "#ff4d4f",
+                        textAlign: "center",
+                        padding: "0 20px",
+                      }}
+                    >
+                      {ttsErrorMessage}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+            <div className="aa-modal__footer">
+              {state.ttsPreview.status === "generating" && (
+                <button className="aa-btn aa-btn--danger" onClick={handleCancelTts}>
+                  取消
+                </button>
+              )}
+              {state.ttsPreview.status === "done" && (
+                <button className="aa-btn aa-btn--primary" onClick={handleTtsNext}>
+                  下一步 →
+                </button>
+              )}
+              {state.ttsPreview.status === "failed" && (
+                <>
+                  <button className="aa-btn" onClick={handleCancelTts}>
+                    关闭
+                  </button>
+                  <button
+                    className="aa-btn aa-btn--primary"
+                    onClick={handleRetryTts}
+                    style={{ marginLeft: 12 }}
+                  >
+                    重试
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* 对口型生成弹窗 */}
       {showLipsyncModal && (
         <div className="aa-modal-overlay">
@@ -623,17 +1072,21 @@ const AiAvatarPage: React.FC = () => {
                 <>
                   <div style={{ fontSize: 48 }}>✅</div>
                   <div style={{ marginTop: 16, fontSize: 15, color: "#1a1a2e" }}>
-                    视频已保存到成片库
+                    视频生成完成，请选择封面
+                  </div>
+                  <div
+                    style={{ marginTop: 8, fontSize: 13, color: "#8c8ca1", textAlign: "center" }}
+                  >
+                    关闭此窗口后可在下方选择封面并保存到成片库
                   </div>
                   <button
-                    className="aa-btn"
+                    className="aa-btn aa-btn--primary"
                     style={{ marginTop: 16 }}
                     onClick={() => {
                       setShowRenderModal(false)
-                      navigate("/app/products")
                     }}
                   >
-                    📁 查看成片
+                    🎬 选择封面
                   </button>
                 </>
               )}
@@ -664,6 +1117,18 @@ const AiAvatarPage: React.FC = () => {
           </div>
         </div>
       )}
+
+      {/* 封面选择弹窗 */}
+      <ModalCoverSelect
+        open={showCoverModal}
+        onClose={handleCloseCoverModal}
+        renderJob={currentRenderJob}
+        coverConfig={state.coverConfig}
+        onCoverConfigChange={(partial) => state.setCoverConfig((prev) => ({ ...prev, ...partial }))}
+        onGenerateRenderSmartCover={handleGenerateRenderSmartCover}
+        onUploadCover={handleUploadCover}
+        onCoverSelected={handleCoverSelected}
+      />
     </div>
   )
 }

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

@@ -2,7 +2,7 @@
  * AI数字人 — API 封装（#1822 契约对齐）
  */
 import apiClient from "@/api/client"
-import type { Script, LipsyncJob, RenderJob, BRollSegment } from "../types"
+import type { Script, LipsyncJob, RenderJob, BRollSegment, SentenceTiming } from "../types"
 
 /* ── 文案库 ── */
 export const getScripts = async (): Promise<Script[]> => {
@@ -34,17 +34,28 @@ export const getAssetById = async (id: string): Promise<{ file_url?: string; id:
   return response.data
 }
 
-/* ── 对口型（模式A：TTS 直生，后端内部合成音频；不要先调 TTS 拿 audio_url） ── */
+/* ── 对口型（支持三种模式） ──
+ * 1. TTS 直生（降级/旧版）：传 voice_id + script_text（+speed/emotion），后端 Celery 异步合成
+ * 2. 直接音频：传 video_url + audio_url，后端同步下载+算timings+提交MediaKit
+ * 3. 预合成音频（#1845 新主路径）：先调 previewTts 拿 audio_url+sentence_timings，
+ *    再把 audio_url + audio_duration + sentence_timings 一起传过来，后端直接提交 MediaKit
+ */
 export const createLipsyncJob = async (data: {
-  /** 人物视频 URL（MP4）；由素材 id 经 getAssetById 拿 file_url，禁止传 video_asset_id */
+  /** 人物视频 URL（MP4）；由素材 id 经 getAssetById 拿 file_url */
   video_url: string
-  /** 音色 ID（预置音色 或 克隆音色 profile UUID，后端会解析） */
-  voice_id: string
-  /** 要合成的文案（手动输入或文案库内容） */
-  script_text: string
-  /** 语速 0.5~2.0，默认 1.0 */
+  /** 预合成/直接音频模式：音频 URL（#1845 步骤1 预合成的 CosyVoice 临时 URL，或外部音频 URL） */
+  audio_url?: string
+  /** 预合成音频时长（秒），由 previewTts 返回 */
+  audio_duration?: number
+  /** 预合成接口返回的句子时间戳（精确），后端直接写入 job */
+  sentence_timings?: SentenceTiming[]
+  /** 音色 ID（TTS 直生模式用） */
+  voice_id?: string
+  /** 要合成的文案（TTS 直生模式用） */
+  script_text?: string
+  /** 语速 0.5~2.0，默认 1.0（TTS 直生模式用） */
   speed?: number
-  /** 情绪英文枚举：natural/excited/calm/friendly */
+  /** 情绪英文枚举：natural/excited/calm/friendly（TTS 直生模式用） */
   emotion?: string
   enable_video_loop?: boolean
   project_id?: string
@@ -53,21 +64,27 @@ export const createLipsyncJob = async (data: {
   return response.data
 }
 
-export const getLipsyncJob = async (id: string): Promise<LipsyncJob> => {
-  const response = await apiClient.get<LipsyncJob>(`/lipsync/jobs/${id}`, { timeout: 60000 })
+/* ── #1845 TTS 预合成（步骤1「生成配音」同步接口，~2-3s） ── */
+export const previewTts = async (data: {
+  voice_id: string
+  script_text: string
+  speed?: number
+  emotion?: string
+}): Promise<{
+  audio_url: string
+  duration: number
+  sentence_timings: SentenceTiming[]
+}> => {
+  const response = await apiClient.post<{
+    audio_url: string
+    duration: number
+    sentence_timings: SentenceTiming[]
+  }>("/lipsync/tts-preview", data, { timeout: 30000 })
   return response.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 },
-    { timeout: 60000 },
-  )
+export const getLipsyncJob = async (id: string): Promise<LipsyncJob> => {
+  const response = await apiClient.get<LipsyncJob>(`/lipsync/jobs/${id}`, { timeout: 60000 })
   return response.data
 }
 
@@ -80,15 +97,35 @@ export const submitRender = async (data: {
   cover_config?: Record<string, unknown>
   project_id?: string
 }): Promise<RenderJob> => {
+  // title_config 内可含 title_image_dataurl（前端 Canvas 渲染的 PNG dataURL）
   const response = await apiClient.post<RenderJob>("/ai-avatar/render", data)
   return response.data
 }
 
 export const getRenderJob = async (jobId: string): Promise<RenderJob> => {
-  const response = await apiClient.get<RenderJob>(`/ai-avatar/render/${jobId}`)
+  const response = await apiClient.get<RenderJob>(`/ai-avatar/render/${jobId}`, { timeout: 60000 })
   return response.data
 }
 
 export const cancelRenderJob = async (jobId: string): Promise<void> => {
   await apiClient.post(`/ai-avatar/render/${jobId}/cancel`)
 }
+
+/* ── 从最终渲染成片智能抽封面（POST /ai-avatar/renders/{job_id}/smart-cover） ── */
+export const generateRenderSmartCover = async (
+  jobId: string,
+): Promise<{ cover_url: string; status: string; message: string }> => {
+  const response = await apiClient.post<{ cover_url: string; status: string; message: string }>(
+    `/ai-avatar/render/${jobId}/smart-cover`,
+    {},
+    // 抽帧+评分+转存 OSS 链路较长，120s 超时
+    { timeout: 120000 },
+  )
+  return response.data
+}
+
+/* ── 封面选定后点「完成」正式入库（POST /ai-avatar/render/{job_id}/finalize） ── */
+export const finalizeRenderJob = (renderId: string) =>
+  apiClient.post<{ video_id: string; cover_url: string; status: string }>(
+    `/ai-avatar/render/${renderId}/finalize`,
+  )

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

@@ -5,12 +5,12 @@
  * - 左侧：先选素材库（video 库）→ 再选该库视频素材（已被其他 segment 使用的素材
  *   标灰 + "已选择" 遮罩，pointer-events:none 防重复选择）
  * - 右侧：文案句子列表（点选对应段落，替代原数字索引框）/ 全屏 or 画中画 / 四角位置+大小
- *   （开始/结束时间已删除，按句子字数占比 × 口播总时长自动估算）
+ *   （开始/结束时间来自后端精确句子时间戳，基于 TTS 音频静音检测）
  * - 底部：已配置的画面插入列表（可删除）
  */
 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 type { BRollSegment, BRollInsertMode, PipPosition, SentenceTiming } from "../types"
 import { splitScriptIntoSentences, type ScriptSentence } from "../utils/sentences"
 
 interface ModalBRollEditorProps {
@@ -18,10 +18,12 @@ interface ModalBRollEditorProps {
   onClose: () => void
   /** 当前已有的 B-roll segments（用于标灰已选素材） */
   existingSegments: BRollSegment[]
-  /** 当前文案全文（用于分句） */
+  /** 文案全文（优先使用对口型时锁定的 scriptText） */
   scriptText: string
-  /** 对口型成片总时长（秒），用于时间自动估算 */
+  /** 对口型成片总时长（秒） */
   outputDuration: number
+  /** 后端精确句子时间戳（来自 lipsyncJob.sentence_timings） */
+  sentenceTimings?: SentenceTiming[] | null
   onConfirm: (segment: BRollSegment) => void
   onRemove: (id: string) => void
 }
@@ -43,7 +45,8 @@ const ModalBRollEditor: React.FC<ModalBRollEditorProps> = ({
   onClose,
   existingSegments,
   scriptText,
-  outputDuration,
+  outputDuration: _outputDuration,
+  sentenceTimings,
   onConfirm,
   onRemove,
 }) => {
@@ -62,10 +65,10 @@ const ModalBRollEditor: React.FC<ModalBRollEditorProps> = ({
   const [pipPosition, setPipPosition] = useState<PipPosition>("top-right")
   const [pipScale, setPipScale] = useState(0.3)
 
-  /** 文案分句（⑤） */
+  /** 文案分句（优先使用后端精确时间戳，降级为字数比例估算） */
   const sentences = useMemo(
-    () => splitScriptIntoSentences(scriptText, outputDuration),
-    [scriptText, outputDuration],
+    () => splitScriptIntoSentences(scriptText, sentenceTimings, _outputDuration),
+    [scriptText, sentenceTimings, _outputDuration],
   )
 
   /** 已被现有 segments 占用的素材 id 集合（标灰、禁止重复选择） */
@@ -142,7 +145,7 @@ const ModalBRollEditor: React.FC<ModalBRollEditorProps> = ({
     setSelectedAsset(asset)
   }
 
-  /** 确认添加一段 B-roll（⑥ 时间取所选句子的估算起止） */
+  /** 确认添加一段 B-roll（⑥ 时间取所选句子的精确起止，后端静音检测 / 前端字数比例降级） */
   const handleConfirm = () => {
     if (!selectedAsset || !selectedSentence) return
     const startTime = selectedSentence.startTime
@@ -264,11 +267,9 @@ const ModalBRollEditor: React.FC<ModalBRollEditorProps> = ({
                           >
                             <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>
-                            )}
+                            <span className="aa-sentence-item__time">
+                              {sent.startTime.toFixed(1)}-{sent.endTime.toFixed(1)}s
+                            </span>
                           </button>
                         )
                       })}
@@ -349,7 +350,7 @@ const ModalBRollEditor: React.FC<ModalBRollEditorProps> = ({
                           selectedSentence.endTime,
                           selectedSentence.startTime + 0.5,
                         ).toFixed(1)}
-                        s （按字数自动估算）
+                        s
                       </div>
                     </>
                   ) : (

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

@@ -0,0 +1,59 @@
+/**
+ * AI数字人 — 封面选择弹窗
+ * 渲染完成后由主页面唤起，内部用 PanelCoverAndGenerate（select-cover 变体）提供
+ * 智能抽帧 + 自定义上传 + 预览 + 确定按钮。
+ */
+import React from "react"
+import type { AiAvatarCoverConfig, RenderJob } from "../types"
+import PanelCoverAndGenerate from "./PanelCoverAndGenerate"
+
+interface ModalCoverSelectProps {
+  open: boolean
+  onClose: () => void
+  renderJob: RenderJob | null
+  coverConfig: AiAvatarCoverConfig
+  onCoverConfigChange: (partial: Partial<AiAvatarCoverConfig>) => void
+  onGenerateRenderSmartCover: (renderId: string) => Promise<{ cover_url: string; message?: string }>
+  onUploadCover?: (file: File) => void
+  onCoverSelected: (coverUrl: string) => void
+}
+
+const ModalCoverSelect: React.FC<ModalCoverSelectProps> = ({
+  open,
+  onClose,
+  renderJob,
+  coverConfig,
+  onCoverConfigChange,
+  onGenerateRenderSmartCover,
+  onUploadCover,
+  onCoverSelected,
+}) => {
+  if (!open) return null
+
+  return (
+    <div className="aa-modal-overlay" onClick={onClose}>
+      <div className="aa-modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 480 }}>
+        <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" style={{ padding: 20 }}>
+          <PanelCoverAndGenerate
+            variant="select-cover"
+            coverConfig={coverConfig}
+            onCoverConfigChange={onCoverConfigChange}
+            renderJob={renderJob}
+            onGenerateRenderSmartCover={onGenerateRenderSmartCover}
+            onUploadCover={onUploadCover}
+            onClose={onClose}
+            onCoverSelected={onCoverSelected}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ModalCoverSelect

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

@@ -1,35 +1,45 @@
 /**
- * AI数字人 — 面板5：封面 & 生成
- * - 竖屏 9:16 封面预览（从视频截取 / 自定义上传）
- * - 分辨率选择（720p / 1080p / 4K）
- * - 配置汇总卡片（出镜视频/音色/文案/对口型/B-roll/标题/封面）
- * - 渐变紫色生成按钮
+ * AI数字人 — 面板5 / 封面选择弹窗内容：
+ * - variant="setup"（默认）：分辨率 / 配置摘要 / 「开始生成视频」按钮，用于主页面步骤2配置阶段；
+ *   渲染完成后仍内嵌封面预览与按钮，方便不打开弹窗直接操作。
+ * - variant="select-cover"：只渲染封面选择区（智能获取封面 + 自定义上传 + 预览），
+ *   用于 ModalCoverSelect 弹窗中；传 onClose 时底部显示「确定」按钮。
  *
- * 注意：v3 已删除"画面插入模式"，本面板不包含该选项。
+ * 封面一律从最终成片（已叠加标题/B-roll）抽帧，本面板不再叠加标题。
  */
-import React, { useRef } from "react"
-import type { AiAvatarCoverConfig } from "../types"
+import React, { useRef, useState } from "react"
+import type { AiAvatarCoverConfig, RenderJob } from "../types"
+
+type PanelVariant = "setup" | "select-cover"
 
 interface PanelCoverAndGenerateProps {
+  variant?: PanelVariant
   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: {
+  resolution?: string
+  onResolutionChange?: (r: string) => void
+  isGenerating?: boolean
+  onGenerate?: () => void
+  /** 当前渲染任务（渲染完成后才有 output_video_url，才能抽封面） */
+  renderJob: RenderJob | null
+  /** 从最终成片智能抽帧（参数 renderId），返回 { cover_url } */
+  onGenerateRenderSmartCover: (renderId: string) => Promise<{ cover_url: string; message?: string }>
+  /** 自定义上传封面（选择本地文件后由父组件处理实际上传） */
+  onUploadCover?: (file: File) => void
+  /** 弹窗关闭回调（传入则表示在弹窗中使用，底部显示「确定」按钮） */
+  onClose?: () => void
+  /** 封面选好（智能抽帧/自定义上传成功）后通知父组件，参数为封面 URL */
+  onCoverSelected?: (coverUrl: string) => void
+  /** 配置汇总信息（仅 variant="setup" 使用） */
+  summary?: {
     videoName: string | null
     voiceName: string | null
     scriptLength: number
     lipsyncStatus: string | null
     brollCount: number
     hasTitle: boolean
-    hasCover: boolean
+    /** 封面状态：'not_ready'(视频未生成) / 'pending'(视频生成了但未选) / 'selected'(已选) */
+    coverStatus: "not_ready" | "pending" | "selected"
   }
 }
 
@@ -48,53 +58,116 @@ const LIPSYNC_STATUS_LABEL: Record<string, { text: string; cls: string }> = {
 }
 
 const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
+  variant = "setup",
   coverConfig,
   onCoverConfigChange,
-  resolution,
+  resolution = "720p",
   onResolutionChange,
-  isGenerating,
+  isGenerating = false,
   onGenerate,
-  onSmartCover,
-  smartCoverLoading,
-  canSmartCover,
+  renderJob,
+  onGenerateRenderSmartCover,
+  onUploadCover,
+  onClose,
+  onCoverSelected,
   summary,
 }) => {
   const uploadInputRef = useRef<HTMLInputElement>(null)
+  // 内部维护智能封面加载态（修复点 2 次 bug：不依赖外层异步 setState 顺序）
+  const [smartCoverLoading, setSmartCoverLoading] = useState(false)
 
   /** 自定义上传封面 */
   const handleUploadClick = () => {
     uploadInputRef.current?.click()
   }
 
+  const _applyCoverUrl = (url: string, mode: "upload" | "auto_frame") => {
+    const partial: Partial<AiAvatarCoverConfig> = {
+      mode,
+      thumbnail_url: url,
+    }
+    if (mode === "auto_frame") {
+      partial.smart_cover_url = url
+    } else {
+      partial.upload_url = url
+    }
+    onCoverConfigChange(partial)
+    onCoverSelected?.(url)
+  }
+
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
-    // 本地预览：生成 object URL（实际上传由父级/后端链路处理）
+    if (onUploadCover) {
+      onUploadCover(file)
+      e.target.value = ""
+      return
+    }
+    // 本地预览兜底（实际上传由父级处理；blob URL 仅作本地展示）
     const url = URL.createObjectURL(file)
-    onCoverConfigChange({ mode: "upload", upload_url: url, thumbnail_url: url })
-    // 允许重复选择同一文件
+    _applyCoverUrl(url, "upload")
     e.target.value = ""
   }
 
-  /** 智能获取封面（调后端 MediaKit 抽帧评分选最佳帧，#1822） */
-  const handleSmartCover = () => {
-    onCoverConfigChange({ mode: "auto_frame" })
-    onSmartCover()
+  /** 智能获取封面（从最终成片抽帧；必须等 render 完成） */
+  const handleSmartCover = async () => {
+    if (!renderJob || renderJob.status !== "completed" || !renderJob.id) return
+    setSmartCoverLoading(true)
+    try {
+      const res = await onGenerateRenderSmartCover(renderJob.id)
+      if (res.cover_url) {
+        _applyCoverUrl(res.cover_url, "auto_frame")
+      } else {
+        // 失败由父组件 message 提示，这里不重复弹窗
+        console.warn("[智能封面] 返回空 cover_url:", res.message)
+      }
+    } catch (err) {
+      console.error("[智能封面] 调用失败:", err)
+    } finally {
+      setSmartCoverLoading(false)
+    }
   }
 
-  const lipsync = summary.lipsyncStatus ? LIPSYNC_STATUS_LABEL[summary.lipsyncStatus] : null
+  const lipsync = summary?.lipsyncStatus ? LIPSYNC_STATUS_LABEL[summary.lipsyncStatus] : null
+  const canGenerate = summary?.lipsyncStatus === "completed" && !isGenerating
+  // 渲染已完成 → 封面区可用
+  const isRenderCompleted = renderJob?.status === "completed"
+  const canSmartCover = isRenderCompleted && !smartCoverLoading
 
-  const canGenerate = summary.lipsyncStatus === "completed" && !isGenerating
+  /** 封面图实际展示的 url：智能封面 > 自定义上传 > 空 */
+  const coverUrl =
+    coverConfig.smart_cover_url || coverConfig.thumbnail_url || coverConfig.upload_url
+  const hasCoverImage = Boolean(coverUrl)
 
-  return (
-    <div className="aa-cover-generate">
-      {/* 封面预览（竖屏 9:16） */}
-      <div className="aa-cover-preview">
-        {coverConfig.thumbnail_url ? (
-          <img src={coverConfig.thumbnail_url} alt="封面预览" />
+  /** 封面区占位文字 */
+  const coverPlaceholder = isRenderCompleted ? "暂无封面" : "视频生成后可选择封面"
+
+  /** 配置摘要中的封面状态标签 */
+  const coverSummaryNode = (() => {
+    if (!summary) return null
+    if (summary.coverStatus === "selected") {
+      return <span className="aa-config-summary__value">已选择</span>
+    }
+    if (summary.coverStatus === "pending") {
+      return <span className="aa-config-summary__value">待选择</span>
+    }
+    return <span className="aa-config-summary__empty">生成视频后可选</span>
+  })()
+
+  // ── 封面选择区（两种 variant 共用） ─────────────────────────────────
+  const coverSection = (
+    <div className="aa-cover-section" style={{ marginTop: variant === "select-cover" ? 0 : 16 }}>
+      <div className="aa-label" style={{ marginBottom: 8 }}>
+        {variant === "select-cover" ? "选择封面" : "封面"}
+      </div>
+      {/* 封面预览（竖屏 9:16）——成片帧已经通过 Canvas PNG overlay 带有标题，直接展示原图即可 */}
+      <div className="aa-cover-preview" style={{ opacity: isRenderCompleted ? 1 : 0.5 }}>
+        {hasCoverImage ? (
+          <img src={coverUrl!} alt="封面预览" draggable={false} />
         ) : (
-          <span className="aa-cover-preview__placeholder">暂无封面</span>
+          <span className="aa-cover-preview__placeholder">{coverPlaceholder}</span>
         )}
+        {smartCoverLoading && <div className="aa-cover-preview__loading">⏳ 智能选帧中…</div>}
       </div>
 
       <div className="aa-cover-actions">
@@ -102,8 +175,8 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
           type="button"
           className={`aa-btn aa-btn--ghost${coverConfig.mode === "auto_frame" ? " active" : ""}`}
           onClick={handleSmartCover}
-          disabled={smartCoverLoading || !canSmartCover}
-          title={canSmartCover ? "基于对口型成片智能选帧" : "请先完成对口型生成"}
+          disabled={!canSmartCover}
+          title={isRenderCompleted ? "从成片智能选帧" : "请先生成视频"}
         >
           {smartCoverLoading ? "⏳ 智能选帧中…" : "🎬 智能获取封面"}
         </button>
@@ -111,6 +184,8 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
           type="button"
           className={`aa-btn aa-btn--ghost${coverConfig.mode === "upload" ? " active" : ""}`}
           onClick={handleUploadClick}
+          disabled={!isRenderCompleted || smartCoverLoading}
+          title={isRenderCompleted ? "自定义上传封面" : "请先生成视频"}
         >
           📷 自定义上传
         </button>
@@ -122,14 +197,36 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
           onChange={handleFileChange}
         />
       </div>
+    </div>
+  )
 
+  // ── select-cover 变体：只渲染封面区 + 弹窗确定按钮 ──
+  if (variant === "select-cover") {
+    return (
+      <div className="aa-cover-generate">
+        {coverSection}
+        {onClose && (
+          <div style={{ marginTop: 16, display: "flex", justifyContent: "flex-end" }}>
+            <button type="button" className="aa-btn aa-btn--primary" onClick={onClose}>
+              确定
+            </button>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // ── setup 变体：分辨率 / 配置摘要 / 生成按钮（渲染完成后内嵌封面区） ──
+  return (
+    <div className="aa-cover-generate">
       {/* 分辨率选择 */}
       <div className="aa-form-field">
         <label className="aa-label">分辨率</label>
         <select
           className="aa-select"
           value={resolution}
-          onChange={(e) => onResolutionChange(e.target.value)}
+          onChange={(e) => onResolutionChange?.(e.target.value)}
+          disabled={isGenerating}
         >
           {RESOLUTION_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>
@@ -144,7 +241,7 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
         <div className="aa-config-summary">
           <div className="aa-config-summary__row">
             <span>出镜视频</span>
-            {summary.videoName ? (
+            {summary?.videoName ? (
               <span className="aa-config-summary__value">{summary.videoName}</span>
             ) : (
               <span className="aa-config-summary__empty">未配置</span>
@@ -152,7 +249,7 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
           </div>
           <div className="aa-config-summary__row">
             <span>音色</span>
-            {summary.voiceName ? (
+            {summary?.voiceName ? (
               <span className="aa-config-summary__value">{summary.voiceName}</span>
             ) : (
               <span className="aa-config-summary__empty">未配置</span>
@@ -160,7 +257,7 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
           </div>
           <div className="aa-config-summary__row">
             <span>文案</span>
-            {summary.scriptLength > 0 ? (
+            {summary && summary.scriptLength > 0 ? (
               <span className="aa-config-summary__value">{summary.scriptLength} 字</span>
             ) : (
               <span className="aa-config-summary__empty">未配置</span>
@@ -177,12 +274,12 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
           <div className="aa-config-summary__row">
             <span>B-roll 画面插入</span>
             <span className="aa-config-summary__value">
-              {summary.brollCount > 0 ? `${summary.brollCount} 段` : "无"}
+              {summary && summary.brollCount > 0 ? `${summary.brollCount} 段` : "无"}
             </span>
           </div>
           <div className="aa-config-summary__row">
             <span>标题</span>
-            {summary.hasTitle ? (
+            {summary?.hasTitle ? (
               <span className="aa-config-summary__value">已设置</span>
             ) : (
               <span className="aa-config-summary__empty">未配置</span>
@@ -190,11 +287,7 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
           </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>
-            )}
+            {coverSummaryNode}
           </div>
         </div>
 
@@ -207,11 +300,16 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
         >
           {isGenerating ? "⏳ 生成中..." : "🚀 开始生成视频"}
         </button>
-        {summary.lipsyncStatus !== "completed" && !isGenerating && (
+        {summary?.lipsyncStatus !== "completed" && !isGenerating && (
           <div style={{ marginTop: 8, fontSize: 11, color: "#8c8ca1", textAlign: "center" }}>
             请先完成对口型生成
           </div>
         )}
+        {isGenerating && (
+          <div style={{ marginTop: 8, fontSize: 11, color: "#8c8ca1", textAlign: "center" }}>
+            视频生成中，请稍候…
+          </div>
+        )}
       </div>
     </div>
   )

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

@@ -1,9 +1,9 @@
 /**
  * AI数字人 — 对口型预览面板（步骤2用）
  * B-roll 画面插入 + 对口型视频预览 + 生成/重新生成按钮
- * v3.1: 预览容器按 1/2 缩放、标题实时叠加预览
+ * v3.1: 标题字号按预览容器实际宽度动态计算 previewScale（基准 720p），与成片一致
  */
-import React, { useRef } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import type { LipsyncJob, BRollSegment, AiAvatarTitleConfig } from "../types"
 
 interface PanelLipsyncPreviewProps {
@@ -14,8 +14,8 @@ interface PanelLipsyncPreviewProps {
   onRemoveBRoll: (id: string) => void
   /** 标题配置（实时叠加预览用） */
   titleConfig?: AiAvatarTitleConfig
-  /** 标题位置变更回调（拖拽结束时调用） */
-  onTitlePositionChange?: (pos: { pos_x: number; pos_y: number }) => void
+  /** 标题位置变更回调（拖拽结束时调用，发送百分比坐标 + position:"custom"） */
+  onTitlePositionChange?: (pos: { pos_x: number; pos_y: number; position: string }) => void
 }
 
 const BROLL_MODE_LABEL: Record<BRollSegment["mode"], string> = {
@@ -29,6 +29,16 @@ function formatTime(seconds: number): string {
   return `${m}:${s.toString().padStart(2, "0")}`
 }
 
+/** 字体名 → CSS font-family 映射（与 titleCanvas 字体链对齐） */
+const FONT_FAMILY_MAP: Record<string, string> = {
+  思源黑体:
+    "'Noto Sans CJK SC', 'Source Han Sans CN', 'PingFang SC', 'Microsoft YaHei', sans-serif",
+  思源宋体: "'Noto Serif SC', 'Source Han Serif SC', 'SimSun', serif",
+  楷体: "KaiTi, 'STKaiti', serif",
+  黑体: "'Heiti SC', 'SimHei', 'Microsoft YaHei', sans-serif",
+}
+const getFontFamily = (font: string): string => FONT_FAMILY_MAP[font] || FONT_FAMILY_MAP["思源黑体"]
+
 export function PanelLipsyncPreview({
   lipsyncJob,
   onGenerateLipsync,
@@ -41,6 +51,8 @@ export function PanelLipsyncPreview({
   const titleDragRef = useRef<HTMLDivElement>(null)
   const draggingTitleRef = useRef(false)
   const previewContainerRef = useRef<HTMLDivElement>(null)
+  // 预览容器实际宽度（通过 ResizeObserver 监听），用于动态计算 previewScale
+  const [containerWidth, setContainerWidth] = useState(0)
   const isGenerating = lipsyncJob?.status === "pending" || lipsyncJob?.status === "processing"
   const isDone = lipsyncJob?.status === "completed"
   const isFailed = lipsyncJob?.status === "failed"
@@ -52,29 +64,84 @@ export function PanelLipsyncPreview({
         ? "排队中…"
         : "对口型生成中…"
 
-  /** 标题叠加样式 */
-  const titleOverlayStyle: React.CSSProperties | null = titleConfig?.title
-    ? {
-        position: "absolute",
-        left: "50%",
-        transform: "translateX(-50%)",
-        color: titleConfig.color || "#ffffff",
-        fontFamily: titleConfig.font || "思源黑体",
-        fontSize: `${(titleConfig.size || 36) * 0.55}px`, // 预览等比缩
-        fontWeight: titleConfig.bold ? 700 : 400,
-        fontStyle: titleConfig.italic ? "italic" : "normal",
-        textAlign: "center",
-        width: "90%",
-        padding: "4px 8px",
-        textShadow: titleConfig.shadow ? "0 2px 4px rgba(0,0,0,0.8)" : undefined,
-        WebkitTextStroke: titleConfig.stroke ? "1.5px #000" : undefined,
-        ...(titleConfig.position === "top"
-          ? { top: 8 }
-          : titleConfig.position === "bottom"
-            ? { bottom: 8 }
-            : { top: "50%", transform: "translateX(-50%) translateY(-50%)" }),
-      }
-    : null
+  // 监听预览容器尺寸变化，动态测量宽度以计算 previewScale（基准 720p）
+  useEffect(() => {
+    const el = previewContainerRef.current
+    if (!el) return
+    const update = () => setContainerWidth(el.clientWidth || 0)
+    update()
+    if (typeof ResizeObserver !== "undefined") {
+      const ro = new ResizeObserver(update)
+      ro.observe(el)
+      return () => ro.disconnect()
+    }
+    window.addEventListener("resize", update)
+    return () => window.removeEventListener("resize", update)
+  }, [])
+
+  // 预览缩放比：预览宽度 / 720（基准宽度）
+  const previewScale = containerWidth > 0 ? containerWidth / 720 : 0.35
+  const ps = useCallback((v: number) => Math.round(v * previewScale * 100) / 100, [previewScale])
+
+  /** 标题叠加样式（字号/padding/描边/阴影均按 previewScale 缩放，保持与成片视觉一致） */
+  const titleOverlayStyle: React.CSSProperties | null =
+    titleConfig?.title && containerWidth > 0
+      ? (() => {
+          const baseSize = titleConfig.size || 48
+          const fontSize = ps(baseSize)
+          // 描边宽度基准 ≈ size * 0.06，最小 1.5px @720p
+          const strokeW = Math.max(ps(1.5), +(baseSize * 0.06 * previewScale).toFixed(2))
+          // 阴影按比例缩放
+          const shadowBlur = ps(4)
+          const shadowOffsetY = ps(2)
+          // padding / top 边距按比例（基准 8px 对应预览小窗，成片基准 16px，这里 8px 对应约 0.33 缩放）
+          const padV = ps(16) * 0.5 // ≈ 8px in ~240px container
+          const padH = ps(24) * 0.5
+
+          const style: React.CSSProperties = {
+            position: "absolute",
+            color: titleConfig.color || "#ffffff",
+            fontFamily: getFontFamily(titleConfig.font || "思源黑体"),
+            fontSize: `${fontSize}px`,
+            fontWeight: titleConfig.bold ? 700 : 400,
+            fontStyle: titleConfig.italic ? "italic" : "normal",
+            textAlign: "center",
+            width: "90%",
+            lineHeight: 1.2,
+            padding: `${ps(4)}px ${padH}px`,
+            textShadow: titleConfig.shadow
+              ? `0 ${shadowOffsetY}px ${shadowBlur}px rgba(0,0,0,0.8), 0 0 ${ps(2)}px rgba(0,0,0,0.5)`
+              : undefined,
+            WebkitTextStroke: titleConfig.stroke ? `${strokeW}px #000` : undefined,
+            boxSizing: "border-box",
+            wordBreak: "break-word",
+            whiteSpace: "pre-wrap",
+          }
+
+          if (
+            titleConfig.position === "custom" &&
+            titleConfig.pos_x != null &&
+            titleConfig.pos_y != null
+          ) {
+            style.left = `${titleConfig.pos_x}%`
+            style.top = `${titleConfig.pos_y}%`
+            style.transform = "translateX(-50%) translateY(-50%)"
+          } else if (titleConfig.position === "top") {
+            style.left = "50%"
+            style.top = padV
+            style.transform = "translateX(-50%)"
+          } else if (titleConfig.position === "bottom") {
+            style.left = "50%"
+            style.bottom = padV
+            style.transform = "translateX(-50%)"
+          } else {
+            style.left = "50%"
+            style.top = "50%"
+            style.transform = "translateX(-50%) translateY(-50%)"
+          }
+          return style
+        })()
+      : null
 
   const handleTitlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
     if (!onTitlePositionChange || !previewContainerRef.current) return
@@ -105,7 +172,10 @@ export function PanelLipsyncPreview({
       const rect = previewContainerRef.current.getBoundingClientRect()
       const relX = Math.max(0, Math.min(rect.width, e.clientX - rect.left))
       const relY = Math.max(0, Math.min(rect.height, e.clientY - rect.top))
-      onTitlePositionChange({ pos_x: relX, pos_y: relY })
+      // 发送百分比坐标（0-100），与后端 drawtext 百分比表达式对齐
+      const xpct = Math.round((relX / rect.width) * 1000) / 10
+      const ypct = Math.round((relY / rect.height) * 1000) / 10
+      onTitlePositionChange({ pos_x: xpct, pos_y: ypct, position: "custom" })
     }
     ;(e.currentTarget as HTMLDivElement).style.cursor = "grab"
   }
@@ -174,7 +244,7 @@ export function PanelLipsyncPreview({
         )}
       </div>
 
-      {/* ── 对口型预览（v3.1: 缩放1/2 + 标题叠加） ─ */}
+      {/* ── 对口型预览（标题字号按 previewScale 动态缩放） ─ */}
       <div className="aa-lipsync-section">
         <div className="aa-lipsync-section__title">对口型预览</div>
 

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

@@ -2,17 +2,16 @@
  * 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） */
@@ -27,7 +26,6 @@ export function PanelVideoSelector({
   selectedVideo,
   onSelectVideo,
   onRemoveVideo,
-  titleConfig,
 }: PanelVideoSelectorProps) {
   /* 未选视频：虚线上传区，点击打开素材库弹窗 */
   if (!selectedVideo) {
@@ -57,42 +55,13 @@ export function PanelVideoSelector({
 
   return (
     <div>
-      {/* 竖屏 9:16 视频预览播放器 + 标题实时预览 */}
-      <div className="aa-video-preview" style={{ position: "relative" }}>
+      {/* 竖屏 9:16 视频预览播放器（纯素材预览，不叠加标题） */}
+      <div className="aa-video-preview">
         {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>
 
       {/* 视频信息卡片：文件名 / 时长 / 分辨率 */}

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

@@ -139,13 +139,6 @@ export function PanelVoiceSelector({
       }
       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({
@@ -154,10 +147,6 @@ export function PanelVoiceSelector({
           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("合成试听失败：未返回音频")

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

@@ -1,5 +1,5 @@
 /**
- * AI数字人 — 页面全局状态管理 hook（v3）
+ * AI数字人 — 页面全局状态管理 hook（v3 + #1845 配音前置）
  */
 import { useState, useCallback } from "react"
 import type { AssetItem } from "@/api/assets"
@@ -13,10 +13,19 @@ import {
   type BRollSegment,
   type AiAvatarTitleConfig,
   type AiAvatarCoverConfig,
+  type TtsPreviewResult,
   DEFAULT_TITLE_CONFIG,
   DEFAULT_COVER_CONFIG,
 } from "../types"
 
+const DEFAULT_TTS_PREVIEW: TtsPreviewResult = {
+  audioUrl: null,
+  duration: 0,
+  sentenceTimings: [],
+  status: "idle",
+  error: null,
+}
+
 export function useAiAvatar() {
   /* ── 面板1：出镜视频 ── */
   const [selectedVideo, setSelectedVideo] = useState<AssetItem | null>(null)
@@ -36,6 +45,9 @@ export function useAiAvatar() {
   const [showScriptModal, setShowScriptModal] = useState(false)
   const [showBRollModal, setShowBRollModal] = useState(false)
 
+  /* ── #1845 TTS 预合成（步骤1「生成配音」） ── */
+  const [ttsPreview, setTtsPreview] = useState<TtsPreviewResult>(DEFAULT_TTS_PREVIEW)
+
   /* ── 面板3.5：B-roll ── */
   const [bRollSegments, setBRollSegments] = useState<BRollSegment[]>([])
 
@@ -81,6 +93,7 @@ export function useAiAvatar() {
     setScript(null)
     setScriptText("")
     setLipsyncJob(null)
+    setTtsPreview(DEFAULT_TTS_PREVIEW)
     setBRollSegments([])
     setTitleConfig(DEFAULT_TITLE_CONFIG)
     setCoverConfig(DEFAULT_COVER_CONFIG)
@@ -118,6 +131,10 @@ export function useAiAvatar() {
     showBRollModal,
     setShowBRollModal,
     selectScript,
+    // #1845 TTS 预合成
+    ttsPreview,
+    setTtsPreview,
+    resetTtsPreview: useCallback(() => setTtsPreview(DEFAULT_TTS_PREVIEW), []),
     // B-roll
     bRollSegments,
     addBRollSegment,

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

@@ -28,6 +28,17 @@ export const VOICE_LANGUAGE_OPTIONS: { value: VoiceLanguage; label: string }[] =
 /* ── 对口型任务状态 ── */
 export type LipsyncStatus = "idle" | "pending" | "processing" | "completed" | "failed"
 
+/* ── TTS 预合成（#1845 配音前置：步骤1「生成配音」状态） ── */
+export type TtsPreviewStatus = "idle" | "generating" | "done" | "failed"
+
+export interface TtsPreviewResult {
+  audioUrl: string | null
+  duration: number
+  sentenceTimings: SentenceTiming[]
+  status: TtsPreviewStatus
+  error: string | null
+}
+
 /* ── 文案 ── */
 export interface Script {
   id: string
@@ -44,12 +55,23 @@ export interface LipsyncJob {
   status: LipsyncStatus
   progress: number
   output_video_url: string | null
-  /** 对口型成片总时长（秒），后端返回；用于 B-roll 时间自动估算（#1809 ⑥） */
+  /** 对口型成片总时长（秒），后端返回 */
+  script_text: string
   output_duration?: number
+  /** 精确句子时间戳（后端基于 TTS 音频静音检测计算） */
+  sentence_timings?: SentenceTiming[] | null
   error_message: string | null
   created_at: string
 }
 
+/* ── 句子时间戳（后端精确计算） ── */
+export interface SentenceTiming {
+  index: number
+  text: string
+  start_time: number
+  end_time: number
+}
+
 /* ── B-roll 画面插入 ── */
 export type BRollInsertMode = "fullscreen" | "pip"
 export type PipPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right"
@@ -77,7 +99,7 @@ export interface AiAvatarTitleConfig {
   shadow: boolean
   color: string
   auto_subtitle: boolean
-  /** 自定义位置坐标（position=custom 时生效，像素） */
+  /** 自定义位置坐标（position=custom 时生效，百分比 0-100） */
   pos_x?: number
   pos_y?: number
 }
@@ -101,6 +123,7 @@ export interface RenderJob {
   status: RenderStatus
   progress: number
   output_video_url: string | null
+  output_cover_url: string | null
   error_message: string | null
   created_at: string
 }
@@ -110,7 +133,7 @@ export const DEFAULT_TITLE_CONFIG: AiAvatarTitleConfig = {
   title: "",
   position: "bottom",
   font: "思源黑体",
-  size: 28,
+  size: 48,
   bold: true,
   italic: false,
   stroke: false,

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

@@ -28,10 +28,13 @@ export function normalizeEmotion(raw: string | undefined | null): VoiceEmotion {
  * 后端真实字段：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 时)。
+ * pos_x/pos_y(custom 时)、title_image_dataurl（前端 Canvas 渲染的 PNG dataURL，WYSIWYG 路径优先）。
  * 口播标题默认 position=bottom（不传后端会默认 top 跑到画面顶部）。
  */
-export function buildTitleConfigPayload(cfg: AiAvatarTitleConfig): Record<string, unknown> {
+export function buildTitleConfigPayload(
+  cfg: AiAvatarTitleConfig,
+  titleImageDataUrl?: string | null,
+): Record<string, unknown> {
   const text = (cfg.title || "").trim()
   if (!text) return {}
   const position = cfg.position || "bottom"
@@ -39,7 +42,7 @@ export function buildTitleConfigPayload(cfg: AiAvatarTitleConfig): Record<string
     text,
     enabled: true,
     font: cfg.font || "思源黑体",
-    font_size: Math.round(cfg.size) || 36,
+    font_size: Math.round(cfg.size) || 48,
     font_color: cfg.color || "#ffffff",
     position,
     bold: !!cfg.bold,
@@ -53,6 +56,10 @@ export function buildTitleConfigPayload(cfg: AiAvatarTitleConfig): Record<string
     payload.pos_x = cfg.pos_x
     payload.pos_y = cfg.pos_y
   }
+  // 前端 Canvas 渲染好的 PNG dataURL（所见即所得，后端优先 overlay 此图片图层）
+  if (titleImageDataUrl) {
+    payload.title_image_dataurl = titleImageDataUrl
+  }
   return payload
 }
 
@@ -67,9 +74,14 @@ export function buildCoverConfigPayload(
     // build_cover_extract_command 读取 timestamp（截帧秒数）
     timestamp: cfg.frame_time || 0,
   }
-  if (smartCoverUrl) payload.cover_url = smartCoverUrl
+  // 智能封面 URL（后端字段名为 url/imageUrl/cover_url 都兼容，优先 url）
+  if (smartCoverUrl) {
+    payload.url = smartCoverUrl
+    payload.cover_url = smartCoverUrl
+  }
   // 自定义上传：blob: 本地预览地址无法给后端，仅 OSS URL 可用
   if (cfg.mode === "upload" && cfg.upload_url && !cfg.upload_url.startsWith("blob:")) {
+    payload.url = cfg.upload_url
     payload.upload_url = cfg.upload_url
   }
   return payload

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

@@ -1,5 +1,10 @@
 /**
- * AI数字人 — 文案分句 & B-roll 时间自动估算（#1809 ⑤⑥）
+ * AI数字人 — 文案分句 & B-roll 时间计算
+ *
+ * 数据来源优先级：
+ *   1. 后端 sentence_timings（基于 TTS 音频静音检测，精确到句子边界）—— 直接使用，不重新分句
+ *   2. 后端 output_duration（最终渲染视频时长） + 本地分句 —— 按字数比例估算
+ *   3. 两者都没有（对口型还在生成中）—— 返回分句文本但 startTime/endTime 全部 0，等数据到位重算
  */
 
 export interface ScriptSentence {
@@ -11,25 +16,67 @@ export interface ScriptSentence {
   charCount: number
   /** 累计起始字数（用于时间估算） */
   startChar: number
-  /** 估算的对口型视频内起始时间（秒） */
+  /** 对口型视频内起始时间（秒）——后端精确值或前端估算 */
   startTime: number
-  /** 估算的对口型视频内结束时间（秒） */
+  /** 对口型视频内结束时间（秒）——后端精确值或前端估算 */
   endTime: number
 }
 
+/** 句子分隔符：中英文句号/问号/感叹号/分号/换行（按句断，不在逗号处切；保持与后端一致） */
+const SENTENCE_SPLIT_RE = /[。！？!?？！;；\n\r]+/
+
 /**
- * 按句号/问号/感叹号/分号/换行分句（兼容中英文标点）。
- * 空文案返回空数组。时间按「该句字数 ÷ 全文总字数 × 口播总时长」线性估算。
+ * 分句并计算每句的起止时间。
+ *
+ * @param sentenceTimings 后端返回的精确句子时间戳（来自 lipsync_job.sentence_timings）。
+ *   非空时直接按后端返回的句子列表渲染，不再本地分句（避免前后端分句不一致导致时间错位）。
+ * @param outputDuration  最终视频时长（秒）。对口型预览阶段可能为 0，此时降级估算只能给 0。
  */
 export function splitScriptIntoSentences(
   scriptText: string,
-  outputDuration: number,
+  sentenceTimings?:
+    { index?: number; text?: string; start_time: number; end_time: number }[] | null,
+  outputDuration: number = 0,
 ): ScriptSentence[] {
   const text = (scriptText || "").trim()
   if (!text) return []
 
+  // 1. 后端返回了 sentence_timings：校验通过就直接用，跳过本地分句
+  //    校验条件放宽：只要是数组、至少1条、每条 start_time/end_time 是数字即可
+  //    （不再强制要求条数相等——后端静音检测可能按停顿切出更多/更少边界，
+  //    比如文案用逗号连写时本地只分1句、后端按停顿切4句，后端的切法才是对的）
+  if (Array.isArray(sentenceTimings) && sentenceTimings.length > 0) {
+    const valid = sentenceTimings.every(
+      (t) =>
+        t &&
+        typeof t.start_time === "number" &&
+        typeof t.end_time === "number" &&
+        isFinite(t.start_time) &&
+        isFinite(t.end_time) &&
+        t.end_time >= t.start_time,
+    )
+    if (valid) {
+      let accChar = 0
+      return sentenceTimings.map((t, i) => {
+        const sentenceText = (t.text || "").trim() || `句子${i + 1}`
+        const charCount = sentenceText.replace(/\s/g, "").length
+        const sentence: ScriptSentence = {
+          index: typeof t.index === "number" ? t.index : i,
+          text: sentenceText,
+          charCount,
+          startChar: accChar,
+          startTime: round1(t.start_time),
+          endTime: round1(t.end_time),
+        }
+        accChar += charCount
+        return sentence
+      })
+    }
+  }
+
+  // 2. 本地分句 + 按字数比例估算（降级路径）
   const rawParts = text
-    .split(/[。！？!?；;\n\r]+/)
+    .split(SENTENCE_SPLIT_RE)
     .map((part) => part.trim())
     .filter((part) => part.length > 0)
 

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

@@ -0,0 +1,179 @@
+/**
+ * AI数字人 — 标题 Canvas 渲染工具
+ *
+ * 把标题按前端预览的 HTML/CSS 效果画到透明背景 PNG 上（与视频同分辨率），
+ * 以 dataURL 形式传给后端，后端用 FFmpeg overlay 直接叠加图层，
+ * 彻底解决前端 HTML/CSS 预览 ≠ FFmpeg drawtext 成片的 WYSIWYG 问题。
+ *
+ * 约定：titleConfig.size 的语义是"720p 基准宽度下的字号（px）"，
+ *       按 videoWidth / 720 得到 scale，所有长度类参数乘以 scale，
+ *       保证 1080p / 4K 成片里标题视觉大小与预览一致。
+ */
+import type { AiAvatarTitleConfig } from "../types"
+
+export interface RenderTitlePngOptions {
+  /** 标题配置 */
+  titleConfig: AiAvatarTitleConfig
+  /** 视频宽度（像素），默认 720 */
+  videoWidth?: number
+  /** 视频高度（像素），默认 1280 */
+  videoHeight?: number
+}
+
+/**
+ * 将标题渲染为透明背景 PNG 的 dataURL（data:image/png;base64,...）
+ * Canvas 尺寸与视频一致，保证叠加时 1:1 像素对齐。
+ *
+ * 标题为空时返回 null。
+ */
+export function renderTitleToPngDataUrl(opts: RenderTitlePngOptions): string | null {
+  const { titleConfig, videoWidth = 720, videoHeight = 1280 } = opts
+  if (!titleConfig) return null
+  const rawTitle = (titleConfig.title || "").trim()
+  if (!rawTitle) return null
+
+  // 按 / 或 ／ 分割为多行
+  const lines = rawTitle
+    .split(/[/／]/)
+    .map((l) => l.trim())
+    .filter((l) => l.length > 0)
+  if (lines.length === 0) return null
+
+  // 分辨率缩放系数：基准 720p，所有长度类参数乘以 scale
+  const scale = videoWidth / 720
+  const r = (v: number) => Math.round(v * scale)
+
+  const canvas = document.createElement("canvas")
+  canvas.width = videoWidth
+  canvas.height = videoHeight
+  const ctx = canvas.getContext("2d")
+  if (!ctx) return null
+
+  const baseSize = Math.max(12, Math.round(titleConfig.size || 48))
+  const size = r(baseSize)
+  const bold = !!titleConfig.bold
+  const italic = !!titleConfig.italic
+  const color = titleConfig.color || "#ffffff"
+  const stroke = !!titleConfig.stroke
+  const shadow = !!titleConfig.shadow
+
+  // 字体族 fallback 链：优先中文字体
+  const fontFamily =
+    '"Noto Sans CJK SC","Source Han Sans CN","PingFang SC","Microsoft YaHei",sans-serif'
+  const fontParts: string[] = []
+  if (italic) fontParts.push("italic")
+  if (bold) fontParts.push("bold")
+  fontParts.push(`${size}px`, fontFamily)
+  ctx.font = fontParts.join(" ")
+  ctx.fillStyle = color
+  ctx.textAlign = "center"
+  ctx.textBaseline = "middle"
+
+  // 阴影（shadow=true 时开启）——按 scale 缩放
+  if (shadow) {
+    ctx.shadowColor = "rgba(0,0,0,0.8)"
+    ctx.shadowBlur = r(4)
+    ctx.shadowOffsetX = 0
+    ctx.shadowOffsetY = r(2)
+  }
+
+  // 位置计算：与 PanelLipsyncPreview 的 CSS 对齐（按 scale 缩放 PAD）
+  const PAD = r(16)
+  let centerX = videoWidth / 2
+  const position = titleConfig.position || "bottom"
+  const lineGap = size * 1.2
+  const totalTextH = lines.length * lineGap - (lineGap - size) // 所有行的总高度
+  // 文本块顶部 y（textBaseline=middle 时首行基线）
+  let firstLineY: number
+  if (
+    position === "custom" &&
+    typeof titleConfig.pos_x === "number" &&
+    typeof titleConfig.pos_y === "number"
+  ) {
+    centerX = (Math.max(0, Math.min(100, titleConfig.pos_x)) / 100) * videoWidth
+    const centerY = (Math.max(0, Math.min(100, titleConfig.pos_y)) / 100) * videoHeight
+    firstLineY = centerY - totalTextH / 2 + size / 2
+  } else if (position === "top") {
+    // 顶部：y = size/2 + PAD
+    firstLineY = size / 2 + PAD
+  } else if (position === "center") {
+    firstLineY = videoHeight / 2 - totalTextH / 2 + size / 2
+  } else {
+    // bottom（默认）
+    firstLineY = videoHeight - totalTextH - PAD + size / 2
+  }
+
+  // 描边参数：描边 lineWidth 按 scale 缩放（基准 size * 0.06，最小 2px @720p）
+  const doStroke = stroke
+  const strokeWidth = Math.max(r(2), Math.round(size * 0.06))
+  // 逐行绘制
+  lines.forEach((line, idx) => {
+    const y = firstLineY + idx * lineGap
+    if (doStroke) {
+      const prevShadowColor = ctx.shadowColor
+      const prevShadowBlur = ctx.shadowBlur
+      // 描边不要带阴影（避免黑色描边发虚）
+      ctx.shadowColor = "rgba(0,0,0,0)"
+      ctx.shadowBlur = 0
+      ctx.lineWidth = strokeWidth
+      ctx.strokeStyle = "#000000"
+      ctx.lineJoin = "round"
+      ctx.strokeText(line, centerX, y)
+      // 恢复阴影
+      if (shadow) {
+        ctx.shadowColor = "rgba(0,0,0,0.8)"
+        ctx.shadowBlur = r(4)
+      } else {
+        ctx.shadowColor = prevShadowColor
+        ctx.shadowBlur = prevShadowBlur
+      }
+    }
+    ctx.fillText(line, centerX, y)
+  })
+
+  try {
+    return canvas.toDataURL("image/png")
+  } catch {
+    return null
+  }
+}
+
+/**
+ * 获取视频真实分辨率（HTMLVideoElement + loadedmetadata，超时 3 秒兜底 720×1280）。
+ */
+export function getVideoResolution(
+  videoUrl: string,
+  timeoutMs = 3000,
+): Promise<{ width: number; height: number }> {
+  return new Promise((resolve) => {
+    if (!videoUrl) {
+      resolve({ width: 720, height: 1280 })
+      return
+    }
+    const video = document.createElement("video")
+    video.preload = "metadata"
+    video.muted = true
+    video.playsInline = true
+    video.crossOrigin = "anonymous"
+    let settled = false
+    const done = (w: number, h: number) => {
+      if (settled) return
+      settled = true
+      video.removeAttribute("src")
+      video.load()
+      resolve({ width: w, height: h })
+    }
+    const timer = window.setTimeout(() => done(720, 1280), timeoutMs)
+    video.onloadedmetadata = () => {
+      window.clearTimeout(timer)
+      const w = video.videoWidth || 720
+      const h = video.videoHeight || 1280
+      done(w, h)
+    }
+    video.onerror = () => {
+      window.clearTimeout(timer)
+      done(720, 1280)
+    }
+    video.src = videoUrl
+  })
+}

apps/web/src/pages/editing-planner/EditingPlanner.tsx

@@ -1,326 +0,0 @@
-/**
- * 模板编辑器 — 制作/编辑剪辑模板
- * 四行布局：顶栏(42px) → 模式栏(48px) → 三栏主体 → 底栏(40px)
- *
- * 主组件仅保留 Hook 组装与整体布局
- * 全局配置 → hooks/useGlobalSettings
- * 配音素材 → hooks/useVoiceMaterials
- * 撤销重做 → hooks/useUndoRedo
- * 抽屉管理 → hooks/useEditorDrawers
- * 播放控制 → hooks/usePlaybackControl
- * 片段操作 → hooks/useClipOperations
- * 模板管理 → hooks/useTemplateManagement
- */
-import React, { useState } from "react"
-import { useSearchParams } from "react-router-dom"
-import { MODE_LABELS } from "@/api/editing-planner"
-import { MODE_LIST } from "./constants"
-import MediaPanel from "./components/MediaPanel"
-import PreviewPlayer from "./components/PreviewPlayer"
-import TimelinePanel from "./components/TimelinePanel"
-import TopBar from "./components/TopBar"
-import ModeBar from "./components/ModeBar"
-import RightPanel from "./components/RightPanel"
-import StatusBar from "./components/StatusBar"
-import EditorDrawers from "./components/EditorDrawers"
-import SaveModal from "./components/SaveModal"
-
-import { useUndoRedo } from "./hooks/useUndoRedo"
-import { useEditorDrawers } from "./hooks/useEditorDrawers"
-import { usePlaybackControl } from "./hooks/usePlaybackControl"
-import { useClipOperations } from "./hooks/useClipOperations"
-import { useTemplateManagement, FILTER_CATEGORIES } from "./hooks/useTemplateManagement"
-import { useGlobalSettings } from "./hooks/useGlobalSettings"
-import { useVoiceMaterials } from "./hooks/useVoiceMaterials"
-
-import type { ClipData } from "./types"
-import "./EditingPlanner.css"
-
-const EditingPlanner: React.FC = () => {
-  const [searchParams] = useSearchParams()
-  const urlTemplateId = searchParams.get("templateId") || ""
-  const urlPlanId = searchParams.get("planId") || ""
-
-  /* ── 片段（撤销/重做） ── */
-  const {
-    state: clips,
-    set: setClips,
-    undo,
-    redo,
-    canUndo,
-    canRedo,
-    reset: resetClips,
-  } = useUndoRedo<ClipData[]>([])
-
-  /* ── 全局配置 ── */
-  const {
-    titleConfig,
-    setTitleConfig,
-    subtitleSettings,
-    setSubtitleSettings,
-    bgmSettings,
-    setBgmSettings,
-    watermarkSettings,
-    setWatermarkSettings,
-    introOutroSettings,
-    setIntroOutroSettings,
-    pipSettings,
-    setPipSettings,
-    filterSettings,
-    setFilterSettings,
-    chromaKeySettings,
-    setChromaKeySettings,
-    stickerSettings,
-    setStickerSettings,
-  } = useGlobalSettings()
-
-  /* ── 右侧栏 Tab ── */
-  const [rightTab, setRightTab] = useState<"properties" | "clips">("properties")
-
-  /* ── 配音素材 ── */
-  const {
-    voiceMaterials,
-    loading: voiceMaterialsLoading,
-    refetch: refetchVoiceMaterials,
-  } = useVoiceMaterials()
-
-  /* ── 派生计算 ── */
-  const totalDuration = clips.reduce((sum, c) => sum + c.duration, 0)
-
-  /* ── Hook: 抽屉管理 ── */
-  const drawers = useEditorDrawers()
-
-  /* ── Hook: 播放控制 ── */
-  const playback = usePlaybackControl(totalDuration)
-
-  /* ── Hook: 片段操作 ── */
-  const clipOps = useClipOperations({ clips, setClips })
-
-  /* ── Hook: 模板管理 ── */
-  const tpl = useTemplateManagement({
-    urlTemplateId,
-    urlPlanId,
-    resetClips,
-    setClips,
-    setSelectedClipId: clipOps.setSelectedClipId,
-    setTitleConfig,
-    setSubtitleSettings,
-    setBgmSettings,
-    clips,
-    totalDuration,
-    titleConfig,
-    subtitleSettings,
-    bgmSettings,
-    watermarkSettings,
-    introOutroSettings,
-    pipSettings,
-    filterSettings,
-    chromaKeySettings,
-    stickerSettings,
-  })
-
-  /* ──────────── 渲染 ──────────── */
-
-  return (
-    <div className="ep-v8-root">
-      {/* ═══ 第1行：顶栏 42px ═══ */}
-      <TopBar
-        currentTemplate={tpl.currentTemplate}
-        canUndo={canUndo}
-        canRedo={canRedo}
-        onUndo={undo}
-        onRedo={redo}
-        onOpenSaveModal={tpl.handleOpenSaveModal}
-      />
-
-      {/* ═══ 第2行：模式栏 56px ═══ */}
-      <ModeBar
-        modeList={MODE_LIST}
-        currentMode={tpl.currentMode}
-        onModeChange={tpl.handleModeChange}
-      />
-
-      {/* ═══ 第3行：三栏主体 ═══ */}
-      <div className="ep-main-body">
-        {/* 左栏 220px：模板列表 */}
-        <MediaPanel
-          templates={tpl.filteredTemplates}
-          loading={tpl.loadingTemplates}
-          searchQuery={tpl.searchQuery}
-          currentFilter={tpl.currentFilter}
-          filterCategories={FILTER_CATEGORIES}
-          loadedTemplateId={tpl.loadedTemplateId}
-          onLoadTemplate={tpl.handleLoadTemplate}
-          onSearchChange={tpl.setSearchQuery}
-          onFilterChange={tpl.setCurrentFilter}
-        />
-
-        {/* 中栏 flex-1 */}
-        <div className="ep-center-col">
-          {/* 上半部：视频预览 + 封面预览 */}
-          <PreviewPlayer
-            clips={clips}
-            selectedClipId={clipOps.selectedClipId}
-            isPlaying={playback.isPlaying}
-            titleConfig={titleConfig}
-            subtitleSettings={{
-              enabled: subtitleSettings.enabled,
-              position: subtitleSettings.position,
-              font: subtitleSettings.font,
-              size: subtitleSettings.fontSize,
-              animation: subtitleSettings.animation,
-            }}
-            onClipSelect={clipOps.handleClipSelect}
-            onPlayPause={() => playback.setIsPlaying(!playback.isPlaying)}
-          />
-
-          {/* 下半部：水平时间线 */}
-          <TimelinePanel
-            clips={clips}
-            selectedClipId={clipOps.selectedClipId}
-            currentMode={tpl.currentMode}
-            onClipSelect={clipOps.handleClipSelect}
-            onClipReorder={clipOps.handleClipReorder}
-            onClipRemove={clipOps.handleClipRemove}
-            onAddClip={clipOps.handleAddClip}
-            onClipTrim={clipOps.handleClipTrim}
-            onClipSplit={clipOps.handleClipSplit}
-            onClipResetTrim={clipOps.handleClipResetTrim}
-            currentTime={playback.currentTime}
-            pixelsPerSecond={playback.pixelsPerSecond}
-            onZoomChange={playback.handleZoomChange}
-            onSeek={playback.handleSeek}
-            totalDuration={totalDuration}
-          />
-        </div>
-
-        {/* 右栏 260px：设置面板 */}
-        <RightPanel
-          titleConfig={titleConfig}
-          onTitleConfigChange={setTitleConfig}
-          rightTab={rightTab}
-          onTabChange={setRightTab}
-          selectedClip={clipOps.selectedClip}
-          subtitleSettings={subtitleSettings}
-          bgmSettings={bgmSettings}
-          clipsCount={clips.length}
-          totalDuration={totalDuration}
-          currentMode={tpl.currentMode}
-          onSubtitleSettingsChange={(partial) =>
-            setSubtitleSettings((prev) => ({ ...prev, ...partial }))
-          }
-          onBgmSettingsChange={(partial) => setBgmSettings((prev) => ({ ...prev, ...partial }))}
-          onClipUpdate={clipOps.handleClipUpdate}
-          onOpenBgmDrawer={() => drawers.setBgmDrawerOpen(true)}
-          onOpenSubtitleDrawer={() => drawers.setSubtitleDrawerOpen(true)}
-          voiceMaterials={voiceMaterials}
-          voiceMaterialsLoading={voiceMaterialsLoading}
-          onRefreshVoiceMaterials={refetchVoiceMaterials}
-          onClipVoiceSelect={clipOps.handleClipVoiceSelect}
-          onOpenTransitionDrawer={drawers.openTransitionDrawer}
-          onOpenSpeedDrawer={drawers.openSpeedDrawer}
-          onOpenTtsDrawer={drawers.openTtsDrawer}
-          onOpenWatermarkDrawer={() => drawers.setWatermarkDrawerOpen(true)}
-          onOpenIntroOutroDrawer={() => drawers.setIntroOutroDrawerOpen(true)}
-          onOpenPipDrawer={() => drawers.setPipDrawerOpen(true)}
-          onOpenFilterDrawer={() => drawers.setFilterDrawerOpen(true)}
-          onOpenGreenScreenDrawer={() => drawers.setChromaKeyDrawerOpen(true)}
-          onOpenStickerDrawer={() => drawers.setStickerDrawerOpen(true)}
-          clips={clips}
-          selectedClipId={clipOps.selectedClipId}
-          onClipSelect={clipOps.handleClipSelect}
-          onClipMoveUp={(clipId) => {
-            const idx = clips.findIndex((c) => c.id === clipId)
-            if (idx > 0) clipOps.handleClipReorder(idx, idx - 1)
-          }}
-          onClipMoveDown={(clipId) => {
-            const idx = clips.findIndex((c) => c.id === clipId)
-            if (idx < clips.length - 1) clipOps.handleClipReorder(idx, idx + 1)
-          }}
-          onClipRemove={clipOps.handleClipRemove}
-          onClipAdd={() => clipOps.handleAddClip("pip", 3)}
-        />
-      </div>
-
-      {/* ═══ 第4行：底栏 40px ═══ */}
-      <StatusBar
-        clipsCount={clips.length}
-        totalDuration={totalDuration}
-        currentModeLabel={MODE_LABELS[tpl.currentMode]}
-        templateSegments={tpl.currentTemplate?.segments.length || 0}
-      />
-
-      {/* ═══ 弹窗 ═══ */}
-      <SaveModal
-        open={tpl.saveModalOpen}
-        loading={tpl.saveLoading}
-        isUpdate={!!tpl.loadedTemplateId}
-        draftName={tpl.draftName}
-        draftCategory={tpl.draftCategory}
-        draftTags={tpl.draftTags}
-        categories={tpl.categories}
-        estimatedDuration={totalDuration}
-        onNameChange={tpl.setDraftName}
-        onCategoryChange={tpl.setDraftCategory}
-        onTagsChange={tpl.setDraftTags}
-        onSave={tpl.handleSave}
-        onCancel={() => tpl.setSaveModalOpen(false)}
-      />
-
-      {/* ═══ Drawer 集合 ═══ */}
-      <EditorDrawers
-        bgmDrawerOpen={drawers.bgmDrawerOpen}
-        bgmSettings={bgmSettings}
-        onBgmSettingsChange={setBgmSettings}
-        onCloseBgmDrawer={() => drawers.setBgmDrawerOpen(false)}
-        subtitleDrawerOpen={drawers.subtitleDrawerOpen}
-        subtitleSettings={subtitleSettings}
-        onSubtitleSettingsChange={setSubtitleSettings}
-        onCloseSubtitleDrawer={() => drawers.setSubtitleDrawerOpen(false)}
-        transitionDrawerOpen={drawers.transitionDrawerOpen}
-        transitionTargetClipId={drawers.transitionTargetClipId}
-        clips={clips}
-        onTransitionChange={(config) =>
-          clipOps.handleTransitionChange(drawers.transitionTargetClipId, config)
-        }
-        onCloseTransitionDrawer={() => drawers.setTransitionDrawerOpen(false)}
-        speedDrawerOpen={drawers.speedDrawerOpen}
-        speedTargetClipId={drawers.speedTargetClipId}
-        onSpeedChange={(config) => clipOps.handleSpeedChange(drawers.speedTargetClipId, config)}
-        onApplySpeedAll={clipOps.handleApplySpeedAll}
-        onCloseSpeedDrawer={() => drawers.setSpeedDrawerOpen(false)}
-        ttsDrawerOpen={drawers.ttsDrawerOpen}
-        ttsTargetClipId={drawers.ttsTargetClipId}
-        onTtsChange={(config) => clipOps.handleTtsChange(drawers.ttsTargetClipId, config)}
-        onCloseTtsDrawer={() => drawers.setTtsDrawerOpen(false)}
-        watermarkDrawerOpen={drawers.watermarkDrawerOpen}
-        watermarkSettings={watermarkSettings}
-        onWatermarkChange={setWatermarkSettings}
-        onCloseWatermarkDrawer={() => drawers.setWatermarkDrawerOpen(false)}
-        introOutroDrawerOpen={drawers.introOutroDrawerOpen}
-        introOutroSettings={introOutroSettings}
-        onIntroOutroChange={setIntroOutroSettings}
-        onCloseIntroOutroDrawer={() => drawers.setIntroOutroDrawerOpen(false)}
-        pipDrawerOpen={drawers.pipDrawerOpen}
-        pipSettings={pipSettings}
-        totalDuration={totalDuration}
-        onPipChange={setPipSettings}
-        onClosePipDrawer={() => drawers.setPipDrawerOpen(false)}
-        filterDrawerOpen={drawers.filterDrawerOpen}
-        filterSettings={filterSettings}
-        onFilterChange={setFilterSettings}
-        onCloseFilterDrawer={() => drawers.setFilterDrawerOpen(false)}
-        chromaKeyDrawerOpen={drawers.chromaKeyDrawerOpen}
-        chromaKeySettings={chromaKeySettings}
-        onChromaKeyChange={setChromaKeySettings}
-        onCloseChromaKeyDrawer={() => drawers.setChromaKeyDrawerOpen(false)}
-        stickerDrawerOpen={drawers.stickerDrawerOpen}
-        stickerSettings={stickerSettings}
-        onStickerChange={setStickerSettings}
-        onCloseStickerDrawer={() => drawers.setStickerDrawerOpen(false)}
-      />
-    </div>
-  )
-}
-
-export default EditingPlanner

apps/web/src/pages/editing-planner/components/BgmSelector.tsx

@@ -1,5 +0,0 @@
-/**
- * BGM 选择器入口（向后兼容）
- * 实际实现位于 ./bgm-selector/ 目录
- */
-export { default } from "./bgm-selector"

apps/web/src/pages/editing-planner/components/ClipPropertiesPanel.tsx

@@ -1,182 +0,0 @@
-/**
- * 右栏设置面板 — V8 原型 1:1 还原
- * 字幕设置 + BGM设置 + 片段详情
- */
-import React from "react"
-import type { ClipPropertiesPanelProps } from "@/pages/editing-planner/types/clipProperties"
-import SubtitleSettingsSection from "./clip-properties/SubtitleSettingsSection"
-import TitleSettingsSection from "./clip-properties/TitleSettingsSection"
-import BgmSettingsSection from "./clip-properties/BgmSettingsSection"
-import ClipDetailSection from "./clip-properties/ClipDetailSection"
-import StatsSection from "./clip-properties/StatsSection"
-import { useVoicePreview } from "@/pages/editing-planner/hooks/useVoicePreview"
-
-const ClipPropertiesPanel: React.FC<ClipPropertiesPanelProps> = ({
-  titleConfig,
-  onTitleConfigChange,
-  selectedClip,
-  subtitleSettings,
-  bgmSettings,
-  clipsCount,
-  totalDuration,
-  currentMode,
-  onSubtitleSettingsChange,
-  onBgmSettingsChange: _onBgmSettingsChange,
-  onClipUpdate,
-  onOpenBgmDrawer,
-  onOpenSubtitleDrawer,
-  voiceMaterials = [],
-  voiceMaterialsLoading = false,
-  onRefreshVoiceMaterials,
-  onClipVoiceSelect,
-  onOpenTransitionDrawer,
-  onOpenSpeedDrawer,
-  onOpenTtsDrawer,
-  onOpenWatermarkDrawer,
-  onOpenIntroOutroDrawer,
-  onOpenPipDrawer,
-  onOpenFilterDrawer,
-  onOpenGreenScreenDrawer,
-  onOpenStickerDrawer,
-}) => {
-  const { previewingId, handlePreviewVoice, stopPreview } = useVoicePreview()
-
-  return (
-    <div className="ep-right-panel">
-      {/* ═══ 标题设置 — #1789 ═══ */}
-      {titleConfig && onTitleConfigChange && (
-        <TitleSettingsSection config={titleConfig} onChange={onTitleConfigChange} />
-      )}
-
-      {/* ═══ 字幕设置 ═══ */}
-      <SubtitleSettingsSection
-        settings={subtitleSettings}
-        onChange={onSubtitleSettingsChange}
-        onOpenSubtitleDrawer={onOpenSubtitleDrawer}
-      />
-
-      {/* ═══ BGM 设置 ═══ */}
-      <BgmSettingsSection settings={bgmSettings} onOpenBgmDrawer={onOpenBgmDrawer} />
-
-      {/* ═══ 水印设置 ═══ */}
-      <div className="ep-settings-section">
-        <div className="ep-section-title">
-          <span className="ep-section-icon">🔖</span>
-          水印设置
-        </div>
-        {onOpenWatermarkDrawer && (
-          <button className="ep-advanced-btn" onClick={onOpenWatermarkDrawer}>
-            <span className="ep-advanced-btn-icon">🔖</span>
-            <span className="ep-advanced-btn-label">水印配置</span>
-            <span className="ep-advanced-btn-arrow">›</span>
-          </button>
-        )}
-      </div>
-
-      {/* ═══ 片头片尾设置 ═══ */}
-      <div className="ep-settings-section">
-        <div className="ep-section-title">
-          <span className="ep-section-icon">🎬</span>
-          片头片尾
-        </div>
-        {onOpenIntroOutroDrawer && (
-          <button className="ep-advanced-btn" onClick={onOpenIntroOutroDrawer}>
-            <span className="ep-advanced-btn-icon">🎬</span>
-            <span className="ep-advanced-btn-label">片头片尾配置</span>
-            <span className="ep-advanced-btn-arrow">›</span>
-          </button>
-        )}
-      </div>
-
-      {/* ═══ 混剪 ═══ */}
-      <div className="ep-settings-section">
-        <div className="ep-section-title">
-          <span className="ep-section-icon">🖼️</span>
-          混剪
-        </div>
-        {onOpenPipDrawer && (
-          <button className="ep-advanced-btn" onClick={onOpenPipDrawer}>
-            <span className="ep-advanced-btn-icon">🖼️</span>
-            <span className="ep-advanced-btn-label">配置混剪图层</span>
-            <span className="ep-advanced-btn-arrow">›</span>
-          </button>
-        )}
-      </div>
-
-      {/* ═══ 滤镜调色 ═══ */}
-      <div className="ep-settings-section">
-        <div className="ep-section-title">
-          <span className="ep-section-icon">🎨</span>
-          滤镜调色
-        </div>
-        {onOpenFilterDrawer && (
-          <button className="ep-advanced-btn" onClick={onOpenFilterDrawer}>
-            <span className="ep-advanced-btn-icon">🎨</span>
-            <span className="ep-advanced-btn-label">配置滤镜调色</span>
-            <span className="ep-advanced-btn-arrow">›</span>
-          </button>
-        )}
-      </div>
-
-      {/* ═══ 绿幕抠像 ═══ */}
-      <div className="ep-settings-section">
-        <div className="ep-section-title">
-          <span className="ep-section-icon">🟩</span>
-          绿幕抠像
-        </div>
-        {onOpenGreenScreenDrawer && (
-          <button className="ep-advanced-btn" onClick={onOpenGreenScreenDrawer}>
-            <span className="ep-advanced-btn-icon">🟩</span>
-            <span className="ep-advanced-btn-label">配置绿幕抠像</span>
-            <span className="ep-advanced-btn-arrow">›</span>
-          </button>
-        )}
-      </div>
-
-      {/* ═══ 贴纸 ═══ */}
-      <div className="ep-settings-section">
-        <div className="ep-section-title">
-          <span className="ep-section-icon">🏷️</span>
-          贴纸
-        </div>
-        {onOpenStickerDrawer && (
-          <button className="ep-advanced-btn" onClick={onOpenStickerDrawer}>
-            <span className="ep-advanced-btn-icon">🏷️</span>
-            <span className="ep-advanced-btn-label">配置贴纸花字</span>
-            <span className="ep-advanced-btn-arrow">›</span>
-          </button>
-        )}
-      </div>
-
-      {/* ═══ 片段详情（选中时显示） ═══ */}
-      {selectedClip && (
-        <ClipDetailSection
-          clip={selectedClip}
-          currentMode={currentMode}
-          voiceMaterials={voiceMaterials}
-          voiceMaterialsLoading={voiceMaterialsLoading}
-          onClipUpdate={onClipUpdate}
-          onRefreshVoiceMaterials={onRefreshVoiceMaterials}
-          onClipVoiceSelect={onClipVoiceSelect}
-          onOpenTransitionDrawer={onOpenTransitionDrawer}
-          onOpenSpeedDrawer={onOpenSpeedDrawer}
-          onOpenTtsDrawer={onOpenTtsDrawer}
-          previewingId={previewingId}
-          onPreviewVoice={handlePreviewVoice}
-          onStopPreview={stopPreview}
-        />
-      )}
-
-      {/* ═══ 统计信息（未选中时显示） ═══ */}
-      {!selectedClip && (
-        <StatsSection
-          clipsCount={clipsCount}
-          totalDuration={totalDuration}
-          currentMode={currentMode}
-        />
-      )}
-    </div>
-  )
-}
-
-export default ClipPropertiesPanel

apps/web/src/pages/editing-planner/components/EditingDrawers.tsx

@@ -1,106 +0,0 @@
-/**
- * 所有弹窗和 Drawer 组件的集合
- * 纯渲染层，业务逻辑和 state 留在父组件
- */
-import React from "react"
-import SaveModal from "./SaveModal"
-import { ClipLevelDrawers } from "./editing-drawers/ClipLevelDrawers"
-import { GlobalDrawers } from "./editing-drawers/GlobalDrawers"
-import type { EditingDrawersProps } from "./editing-drawers/types"
-
-const EditingDrawers: React.FC<EditingDrawersProps> = (props) => {
-  const {
-    saveModalOpen,
-    saveLoading,
-    isUpdate,
-    draftName,
-    draftCategory,
-    draftTags,
-    categories,
-    estimatedDuration,
-    onNameChange,
-    onCategoryChange,
-    onTagsChange,
-    onSave,
-    onCancelSave,
-    clips,
-  } = props
-
-  return (
-    <>
-      {/* 保存弹窗 */}
-      <SaveModal
-        open={saveModalOpen}
-        loading={saveLoading}
-        isUpdate={isUpdate}
-        draftName={draftName}
-        draftCategory={draftCategory}
-        draftTags={draftTags}
-        categories={categories}
-        estimatedDuration={estimatedDuration}
-        onNameChange={onNameChange}
-        onCategoryChange={onCategoryChange}
-        onTagsChange={onTagsChange}
-        onSave={onSave}
-        onCancel={onCancelSave}
-      />
-
-      {/* 片段级抽屉（转场/调速/TTS） */}
-      <ClipLevelDrawers
-        clips={clips}
-        transitionDrawerOpen={props.transitionDrawerOpen}
-        transitionTargetClipId={props.transitionTargetClipId}
-        onCloseTransitionDrawer={props.onCloseTransitionDrawer}
-        onTransitionChange={props.onTransitionChange}
-        speedDrawerOpen={props.speedDrawerOpen}
-        speedTargetClipId={props.speedTargetClipId}
-        onCloseSpeedDrawer={props.onCloseSpeedDrawer}
-        onSpeedChange={props.onSpeedChange}
-        onApplySpeedAll={props.onApplySpeedAll}
-        ttsDrawerOpen={props.ttsDrawerOpen}
-        ttsTargetClipId={props.ttsTargetClipId}
-        onCloseTtsDrawer={props.onCloseTtsDrawer}
-        onTtsChange={props.onTtsChange}
-      />
-
-      {/* 全局设置抽屉（BGM/字幕/水印/片头片尾/混剪/滤镜/绿幕/贴纸） */}
-      <GlobalDrawers
-        bgmDrawerOpen={props.bgmDrawerOpen}
-        bgmSettings={props.bgmSettings}
-        onCloseBgmDrawer={props.onCloseBgmDrawer}
-        onChangeBgmSettings={props.onChangeBgmSettings}
-        subtitleDrawerOpen={props.subtitleDrawerOpen}
-        subtitleSettings={props.subtitleSettings}
-        onCloseSubtitleDrawer={props.onCloseSubtitleDrawer}
-        onChangeSubtitleSettings={props.onChangeSubtitleSettings}
-        totalDuration={props.totalDuration}
-        watermarkDrawerOpen={props.watermarkDrawerOpen}
-        watermarkSettings={props.watermarkSettings}
-        onCloseWatermarkDrawer={props.onCloseWatermarkDrawer}
-        onWatermarkChange={props.onWatermarkChange}
-        introOutroDrawerOpen={props.introOutroDrawerOpen}
-        introOutroSettings={props.introOutroSettings}
-        onCloseIntroOutroDrawer={props.onCloseIntroOutroDrawer}
-        onIntroOutroChange={props.onIntroOutroChange}
-        pipDrawerOpen={props.pipDrawerOpen}
-        pipSettings={props.pipSettings}
-        onClosePipDrawer={props.onClosePipDrawer}
-        onPipChange={props.onPipChange}
-        filterDrawerOpen={props.filterDrawerOpen}
-        filterSettings={props.filterSettings}
-        onCloseFilterDrawer={props.onCloseFilterDrawer}
-        onFilterChange={props.onFilterChange}
-        chromaKeyDrawerOpen={props.chromaKeyDrawerOpen}
-        chromaKeySettings={props.chromaKeySettings}
-        onCloseChromaKeyDrawer={props.onCloseChromaKeyDrawer}
-        onChromaKeyChange={props.onChromaKeyChange}
-        stickerDrawerOpen={props.stickerDrawerOpen}
-        stickerSettings={props.stickerSettings}
-        onCloseStickerDrawer={props.onCloseStickerDrawer}
-        onStickerChange={props.onStickerChange}
-      />
-    </>
-  )
-}
-
-export default EditingDrawers

apps/web/src/pages/editing-planner/components/EditorClipList.tsx

@@ -1,148 +0,0 @@
-/**
- * 编辑器右侧栏 — 片段列表 Tab
- * 紧凑版片段管理：选中、上下移动、删除、添加
- */
-import React from "react"
-import { Button, Tooltip, Empty } from "antd"
-import {
-  UpOutlined,
-  DownOutlined,
-  DeleteOutlined,
-  PlusOutlined,
-  ScissorOutlined,
-  SoundOutlined,
-  PictureOutlined,
-  VideoCameraOutlined,
-} from "@ant-design/icons"
-import type { ClipData, ClipType } from "../types"
-
-interface EditorClipListProps {
-  clips: ClipData[]
-  selectedClipId: string | null
-  onSelect: (clipId: string) => void
-  onMoveUp: (clipId: string) => void
-  onMoveDown: (clipId: string) => void
-  onRemove: (clipId: string) => void
-  onAdd: () => void
-}
-
-const clipTypeIcon: Record<ClipType | string, React.ReactNode> = {
-  video: <VideoCameraOutlined />,
-  image: <PictureOutlined />,
-  voice: <SoundOutlined />,
-  pip: <ScissorOutlined />,
-}
-
-const clipTypeLabel: Record<ClipType | string, string> = {
-  video: "视频",
-  image: "图片",
-  voice: "配音",
-  pip: "混剪",
-}
-
-const EditorClipList: React.FC<EditorClipListProps> = ({
-  clips,
-  selectedClipId,
-  onSelect,
-  onMoveUp,
-  onMoveDown,
-  onRemove,
-  onAdd,
-}) => {
-  if (clips.length === 0) {
-    return (
-      <div className="ep-clip-list-empty">
-        <Empty
-          description="暂无片段"
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-          style={{ margin: "40px 0" }}
-        />
-        <Button type="primary" icon={<PlusOutlined />} block onClick={onAdd}>
-          添加片段
-        </Button>
-      </div>
-    )
-  }
-
-  return (
-    <div className="ep-clip-list">
-      {/* 顶部工具栏 */}
-      <div className="ep-clip-list-toolbar">
-        <span className="ep-clip-list-count">
-          共 <b>{clips.length}</b> 个片段
-        </span>
-        <Tooltip title="添加片段">
-          <Button type="primary" size="small" icon={<PlusOutlined />} onClick={onAdd}>
-            添加
-          </Button>
-        </Tooltip>
-      </div>
-
-      {/* 片段列表 */}
-      <div className="ep-clip-list-scroll">
-        {clips.map((clip, index) => (
-          <div
-            key={clip.id}
-            className={`ep-clip-list-item${selectedClipId === clip.id ? " selected" : ""}`}
-            onClick={() => onSelect(clip.id)}
-          >
-            {/* 序号 + 类型图标 */}
-            <div className="ep-clip-item-head">
-              <span className="ep-clip-item-index">{index + 1}</span>
-              <span className="ep-clip-item-type">
-                {clipTypeIcon[clip.type] || <ScissorOutlined />}
-                <span className="ep-clip-item-type-label">
-                  {clipTypeLabel[clip.type] || "片段"}
-                </span>
-              </span>
-            </div>
-
-            {/* 文案预览 */}
-            {clip.script_text && (
-              <div className="ep-clip-item-text">
-                {clip.script_text.slice(0, 40)}
-                {clip.script_text.length > 40 ? "..." : ""}
-              </div>
-            )}
-
-            {/* 操作按钮 */}
-            <div className="ep-clip-item-actions" onClick={(e) => e.stopPropagation()}>
-              <Tooltip title="上移">
-                <Button
-                  type="text"
-                  size="small"
-                  icon={<UpOutlined />}
-                  disabled={index === 0}
-                  onClick={() => onMoveUp(clip.id)}
-                  className="ep-clip-item-btn"
-                />
-              </Tooltip>
-              <Tooltip title="下移">
-                <Button
-                  type="text"
-                  size="small"
-                  icon={<DownOutlined />}
-                  disabled={index === clips.length - 1}
-                  onClick={() => onMoveDown(clip.id)}
-                  className="ep-clip-item-btn"
-                />
-              </Tooltip>
-              <Tooltip title="删除">
-                <Button
-                  type="text"
-                  size="small"
-                  danger
-                  icon={<DeleteOutlined />}
-                  onClick={() => onRemove(clip.id)}
-                  className="ep-clip-item-btn"
-                />
-              </Tooltip>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default EditorClipList

apps/web/src/pages/editing-planner/components/EditorDrawers.tsx

@@ -1,246 +0,0 @@
-import React from "react"
-import BgmSelector from "./BgmSelector"
-import SubtitleStylePanel from "./SubtitleStylePanel"
-import TransitionSelector from "./TransitionSelector"
-import SpeedPanel from "./SpeedPanel"
-import TtsPanel from "./TtsPanel"
-import WatermarkPanel from "./WatermarkPanel"
-import IntroOutroPanel from "./IntroOutroPanel"
-import PipConfigPanel from "./PipConfigPanel"
-import FilterPanel from "./FilterPanel"
-import GreenScreenPanel from "./GreenScreenPanel"
-import StickerPanel from "./StickerPanel"
-import type {
-  ClipData,
-  TransitionConfig,
-  SpeedConfig,
-  TtsConfig,
-  WatermarkConfig,
-  IntroOutroConfig,
-  PipConfig,
-  FilterConfig,
-  ChromaKeyConfig,
-  StickerConfig,
-} from "../types"
-import type { SubtitleStyleConfig } from "../types/subtitle"
-import type { BgmMixConfig } from "@/api/bgm"
-import { DEFAULT_TRANSITION, DEFAULT_SPEED, DEFAULT_TTS_CONFIG } from "../types"
-
-interface EditorDrawersProps {
-  // BGM
-  bgmDrawerOpen: boolean
-  bgmSettings: BgmMixConfig
-  onBgmSettingsChange: (config: BgmMixConfig) => void
-  onCloseBgmDrawer: () => void
-  // 字幕
-  subtitleDrawerOpen: boolean
-  subtitleSettings: SubtitleStyleConfig
-  onSubtitleSettingsChange: (config: SubtitleStyleConfig) => void
-  onCloseSubtitleDrawer: () => void
-  // 转场
-  transitionDrawerOpen: boolean
-  transitionTargetClipId: string | null
-  clips: ClipData[]
-  onTransitionChange: (config: TransitionConfig) => void
-  onCloseTransitionDrawer: () => void
-  // 调速
-  speedDrawerOpen: boolean
-  speedTargetClipId: string | null
-  onSpeedChange: (config: SpeedConfig) => void
-  onApplySpeedAll: (config: SpeedConfig) => void
-  onCloseSpeedDrawer: () => void
-  // TTS
-  ttsDrawerOpen: boolean
-  ttsTargetClipId: string | null
-  onTtsChange: (config: TtsConfig) => void
-  onCloseTtsDrawer: () => void
-  // 水印
-  watermarkDrawerOpen: boolean
-  watermarkSettings: WatermarkConfig
-  onWatermarkChange: (config: WatermarkConfig) => void
-  onCloseWatermarkDrawer: () => void
-  // 片头片尾
-  introOutroDrawerOpen: boolean
-  introOutroSettings: IntroOutroConfig
-  onIntroOutroChange: (config: IntroOutroConfig) => void
-  onCloseIntroOutroDrawer: () => void
-  // 混剪
-  pipDrawerOpen: boolean
-  pipSettings: PipConfig
-  totalDuration: number
-  onPipChange: (config: PipConfig) => void
-  onClosePipDrawer: () => void
-  // 滤镜
-  filterDrawerOpen: boolean
-  filterSettings: FilterConfig
-  onFilterChange: (config: FilterConfig) => void
-  onCloseFilterDrawer: () => void
-  // 绿幕
-  chromaKeyDrawerOpen: boolean
-  chromaKeySettings: ChromaKeyConfig
-  onChromaKeyChange: (config: ChromaKeyConfig) => void
-  onCloseChromaKeyDrawer: () => void
-  // 贴纸
-  stickerDrawerOpen: boolean
-  stickerSettings: StickerConfig
-  onStickerChange: (config: StickerConfig) => void
-  onCloseStickerDrawer: () => void
-}
-
-const EditorDrawers: React.FC<EditorDrawersProps> = ({
-  bgmDrawerOpen,
-  bgmSettings,
-  onBgmSettingsChange,
-  onCloseBgmDrawer,
-  subtitleDrawerOpen,
-  subtitleSettings,
-  onSubtitleSettingsChange,
-  onCloseSubtitleDrawer,
-  transitionDrawerOpen,
-  transitionTargetClipId,
-  clips,
-  onTransitionChange,
-  onCloseTransitionDrawer,
-  speedDrawerOpen,
-  speedTargetClipId,
-  onSpeedChange,
-  onApplySpeedAll,
-  onCloseSpeedDrawer,
-  ttsDrawerOpen,
-  ttsTargetClipId,
-  onTtsChange,
-  onCloseTtsDrawer,
-  watermarkDrawerOpen,
-  watermarkSettings,
-  onWatermarkChange,
-  onCloseWatermarkDrawer,
-  introOutroDrawerOpen,
-  introOutroSettings,
-  onIntroOutroChange,
-  onCloseIntroOutroDrawer,
-  pipDrawerOpen,
-  pipSettings,
-  totalDuration,
-  onPipChange,
-  onClosePipDrawer,
-  filterDrawerOpen,
-  filterSettings,
-  onFilterChange,
-  onCloseFilterDrawer,
-  chromaKeyDrawerOpen,
-  chromaKeySettings,
-  onChromaKeyChange,
-  onCloseChromaKeyDrawer,
-  stickerDrawerOpen,
-  stickerSettings,
-  onStickerChange,
-  onCloseStickerDrawer,
-}) => {
-  const transitionConfig = transitionTargetClipId
-    ? (clips.find((c) => c.id === transitionTargetClipId)?.transition ?? DEFAULT_TRANSITION)
-    : DEFAULT_TRANSITION
-
-  const transitionTitle = transitionTargetClipId ? "片段转场设置" : "全局默认转场"
-
-  return (
-    <>
-      {/* BGM 选择器 Drawer */}
-      <BgmSelector
-        open={bgmDrawerOpen}
-        onClose={onCloseBgmDrawer}
-        config={bgmSettings}
-        onChange={onBgmSettingsChange}
-      />
-
-      {/* 字幕样式配置 Drawer */}
-      <SubtitleStylePanel
-        open={subtitleDrawerOpen}
-        onClose={onCloseSubtitleDrawer}
-        config={subtitleSettings}
-        onChange={onSubtitleSettingsChange}
-      />
-
-      {/* 转场特效选择器 Drawer */}
-      <TransitionSelector
-        open={transitionDrawerOpen}
-        onClose={onCloseTransitionDrawer}
-        config={transitionConfig}
-        onChange={onTransitionChange}
-        title={transitionTitle}
-      />
-
-      {/* 片段调速面板 Drawer */}
-      {speedTargetClipId && (
-        <SpeedPanel
-          open={speedDrawerOpen}
-          onClose={onCloseSpeedDrawer}
-          config={clips.find((c) => c.id === speedTargetClipId)?.speed ?? DEFAULT_SPEED}
-          onChange={onSpeedChange}
-          onApplyAll={onApplySpeedAll}
-        />
-      )}
-
-      {/* TTS 配音面板 Drawer */}
-      {ttsTargetClipId && (
-        <TtsPanel
-          open={ttsDrawerOpen}
-          onClose={onCloseTtsDrawer}
-          config={clips.find((c) => c.id === ttsTargetClipId)?.tts_config ?? DEFAULT_TTS_CONFIG}
-          onChange={onTtsChange}
-        />
-      )}
-
-      {/* 水印配置面板 */}
-      <WatermarkPanel
-        open={watermarkDrawerOpen}
-        onClose={onCloseWatermarkDrawer}
-        config={watermarkSettings}
-        onChange={onWatermarkChange}
-      />
-
-      {/* 片头片尾配置面板 */}
-      <IntroOutroPanel
-        open={introOutroDrawerOpen}
-        onClose={onCloseIntroOutroDrawer}
-        config={introOutroSettings}
-        onChange={onIntroOutroChange}
-      />
-
-      {/* 混剪配置面板 */}
-      <PipConfigPanel
-        open={pipDrawerOpen}
-        onClose={onClosePipDrawer}
-        config={pipSettings}
-        onChange={onPipChange}
-        totalDuration={totalDuration}
-      />
-
-      {/* 滤镜调色面板 */}
-      <FilterPanel
-        open={filterDrawerOpen}
-        onClose={onCloseFilterDrawer}
-        config={filterSettings}
-        onChange={onFilterChange}
-      />
-
-      {/* 绿幕抠像面板 */}
-      <GreenScreenPanel
-        open={chromaKeyDrawerOpen}
-        onClose={onCloseChromaKeyDrawer}
-        config={chromaKeySettings}
-        onChange={onChromaKeyChange}
-      />
-
-      {/* 贴纸面板 */}
-      <StickerPanel
-        open={stickerDrawerOpen}
-        onClose={onCloseStickerDrawer}
-        config={stickerSettings}
-        onChange={onStickerChange}
-        totalDuration={totalDuration}
-      />
-    </>
-  )
-}
-
-export default EditorDrawers

apps/web/src/pages/editing-planner/components/FilterPanel.tsx

@@ -1,106 +0,0 @@
-/**
- * 滤镜调色配置面板
- * 预设滤镜 + 手动调节（亮度/对比度/饱和度/色温/色调/锐度）
- */
-import React, { useCallback } from "react"
-import { Drawer, Switch } from "antd"
-import type { FilterConfig, FilterPreset } from "@/pages/editing-planner/types"
-import { DEFAULT_FILTER_CONFIG } from "@/pages/editing-planner/types"
-import { PRESET_GRADIENTS } from "@/pages/editing-planner/constants/filter"
-import FilterPresetGrid from "./filter/FilterPresetGrid"
-import FilterManualAdjust from "./filter/FilterManualAdjust"
-
-interface FilterPanelProps {
-  open: boolean
-  onClose: () => void
-  config: FilterConfig
-  onChange: (config: FilterConfig) => void
-}
-
-const FilterPanel: React.FC<FilterPanelProps> = ({ open, onClose, config, onChange }) => {
-  const update = useCallback(
-    (partial: Partial<FilterConfig>) => {
-      onChange({ ...config, ...partial })
-    },
-    [config, onChange],
-  )
-
-  const handleReset = useCallback(() => {
-    onChange({ ...DEFAULT_FILTER_CONFIG, enabled: config.enabled })
-  }, [config.enabled, onChange])
-
-  const handlePresetSelect = useCallback(
-    (preset: FilterPreset) => {
-      if (preset === "none") {
-        onChange({ ...DEFAULT_FILTER_CONFIG, enabled: config.enabled })
-      } else {
-        onChange({
-          ...DEFAULT_FILTER_CONFIG,
-          enabled: config.enabled,
-          preset,
-        })
-      }
-    },
-    [config.enabled, onChange],
-  )
-
-  const handleManualChange = useCallback(
-    (key: keyof FilterConfig, value: number) => {
-      onChange({ ...config, [key]: value })
-    },
-    [config, onChange],
-  )
-
-  return (
-    <Drawer
-      title="滤镜调色"
-      placement="right"
-      width={420}
-      styles={{ wrapper: { maxWidth: "100vw" } }}
-      open={open}
-      onClose={onClose}
-      className="filter-panel-drawer"
-    >
-      {/* 顶部开关 */}
-      <div className="filter-header">
-        <span className="filter-header-label">启用滤镜</span>
-        <Switch
-          size="small"
-          checked={config.enabled}
-          onChange={(checked) => update({ enabled: checked })}
-        />
-      </div>
-
-      {/* 预设滤镜选择 */}
-      <FilterPresetGrid selectedPreset={config.preset} onPresetSelect={handlePresetSelect} />
-
-      {/* 手动调节 */}
-      <FilterManualAdjust config={config} onChange={handleManualChange} />
-
-      {/* 预览色块 */}
-      <div className="filter-section">
-        <div className="filter-section-title">效果预览</div>
-        <div
-          className="filter-preview-block"
-          style={{
-            background: PRESET_GRADIENTS[config.preset],
-            filter: [
-              `brightness(${100 + config.brightness}%)`,
-              `contrast(${100 + config.contrast}%)`,
-              `saturate(${100 + config.saturation}%)`,
-            ].join(" "),
-          }}
-        />
-      </div>
-
-      {/* 底部重置 */}
-      <div className="filter-footer">
-        <button className="filter-reset-btn" onClick={handleReset}>
-          重置参数
-        </button>
-      </div>
-    </Drawer>
-  )
-}
-
-export default FilterPanel

apps/web/src/pages/editing-planner/components/GreenScreenPanel.tsx

@@ -1,92 +0,0 @@
-import React, { useCallback } from "react"
-import { Drawer, Switch } from "antd"
-import type { ChromaKeyConfig, ChromaKeyColorPreset } from "../types"
-import { DEFAULT_CHROMA_KEY_CONFIG, CHROMA_KEY_PRESET_COLORS } from "../types"
-import { GreenScreenPresets } from "./green-screen/GreenScreenPresets"
-import { GreenScreenCustomColor } from "./green-screen/GreenScreenCustomColor"
-import { GreenScreenSliders } from "./green-screen/GreenScreenSliders"
-import { GreenScreenPreview } from "./green-screen/GreenScreenPreview"
-
-interface GreenScreenPanelProps {
-  open: boolean
-  onClose: () => void
-  config: ChromaKeyConfig
-  onChange: (config: ChromaKeyConfig) => void
-}
-
-const GreenScreenPanel: React.FC<GreenScreenPanelProps> = ({ open, onClose, config, onChange }) => {
-  const update = useCallback(
-    (partial: Partial<ChromaKeyConfig>) => {
-      onChange({ ...config, ...partial })
-    },
-    [config, onChange],
-  )
-
-  const handleReset = useCallback(() => {
-    onChange({ ...DEFAULT_CHROMA_KEY_CONFIG, enabled: config.enabled })
-  }, [config.enabled, onChange])
-
-  const handlePresetSelect = useCallback(
-    (preset: ChromaKeyColorPreset) => {
-      update({
-        color_preset: preset,
-        color: CHROMA_KEY_PRESET_COLORS[preset],
-      })
-    },
-    [update],
-  )
-
-  const handleColorChange = useCallback(
-    (color: string) => {
-      update({ color })
-    },
-    [update],
-  )
-
-  return (
-    <Drawer
-      title="绿幕抠像"
-      placement="right"
-      width={420}
-      styles={{ wrapper: { maxWidth: "100vw" } }}
-      open={open}
-      onClose={onClose}
-      className="green-screen-panel-drawer"
-    >
-      <div className="green-header">
-        <span className="green-header-label">启用绿幕抠像</span>
-        <Switch
-          size="small"
-          checked={config.enabled}
-          onChange={(checked) => update({ enabled: checked })}
-        />
-      </div>
-
-      <GreenScreenPresets
-        selectedPreset={config.color_preset}
-        onPresetSelect={handlePresetSelect}
-      />
-
-      <GreenScreenCustomColor color={config.color} onColorChange={handleColorChange} />
-
-      <GreenScreenSliders
-        similarity={config.similarity}
-        blend={config.blend}
-        spill={config.spill}
-        onSimilarityChange={(v) => update({ similarity: v })}
-        onBlendChange={(v) => update({ blend: v })}
-        onSpillChange={(v) => update({ spill: v })}
-      />
-
-      <GreenScreenPreview color={config.color} blend={config.blend} />
-
-      <div className="green-footer">
-        <button className="green-reset-btn" onClick={handleReset}>
-          重置参数
-        </button>
-      </div>
-    </Drawer>
-  )
-}
-
-export default GreenScreenPanel

apps/web/src/pages/editing-planner/components/IntroOutroPanel.tsx

@@ -1,101 +0,0 @@
-/**
- * 片头片尾配置面板 — Drawer 形式
- * 两个区块：片头（Intro）/ 片尾（Outro）
- * 每个区块支持：类型选择（无/视频/图片）、素材 URL、时长、过渡动画
- */
-import React, { useCallback } from "react"
-import { Drawer } from "antd"
-import type {
-  IntroOutroConfig,
-  IntroOutroItem,
-  IntroOutroKind,
-} from "@/pages/editing-planner/types"
-import { DEFAULT_INTRO_OUTRO } from "@/pages/editing-planner/types"
-import IntroOutroBlock from "./intro-outro/IntroOutroBlock"
-
-interface IntroOutroPanelProps {
-  open: boolean
-  onClose: () => void
-  config: IntroOutroConfig
-  onChange: (config: IntroOutroConfig) => void
-}
-
-const IntroOutroPanel: React.FC<IntroOutroPanelProps> = ({ open, onClose, config, onChange }) => {
-  /* ── 更新片头 ── */
-  const handleIntroChange = useCallback(
-    (partial: Partial<IntroOutroItem>) => {
-      onChange({ ...config, intro: { ...config.intro, ...partial } })
-    },
-    [config, onChange],
-  )
-
-  /* ── 更新片尾 ── */
-  const handleOutroChange = useCallback(
-    (partial: Partial<IntroOutroItem>) => {
-      onChange({ ...config, outro: { ...config.outro, ...partial } })
-    },
-    [config, onChange],
-  )
-
-  /* ── 切换片头类型 ── */
-  const handleIntroKindChange = useCallback(
-    (kind: IntroOutroKind) => {
-      handleIntroChange({ kind, url: kind === "none" ? undefined : "" })
-    },
-    [handleIntroChange],
-  )
-
-  /* ── 切换片尾类型 ── */
-  const handleOutroKindChange = useCallback(
-    (kind: IntroOutroKind) => {
-      handleOutroChange({ kind, url: kind === "none" ? undefined : "" })
-    },
-    [handleOutroChange],
-  )
-
-  /* ── 重置 ── */
-  const handleReset = useCallback(() => {
-    onChange({ ...DEFAULT_INTRO_OUTRO })
-  }, [onChange])
-
-  return (
-    <Drawer
-      title="🎬 片头片尾设置"
-      placement="right"
-      width={420}
-      styles={{ wrapper: { maxWidth: "100vw" } }}
-      open={open}
-      onClose={onClose}
-      className="intro-outro-panel-drawer"
-    >
-      {/* ═══ 片头区块 ═══ */}
-      <IntroOutroBlock
-        title="片头"
-        icon="🎞️"
-        item={config.intro}
-        transitionLabel="进入过渡动画"
-        onKindChange={handleIntroKindChange}
-        onChange={handleIntroChange}
-      />
-
-      {/* ═══ 片尾区块 ═══ */}
-      <IntroOutroBlock
-        title="片尾"
-        icon="🏁"
-        item={config.outro}
-        transitionLabel="退出过渡动画"
-        onKindChange={handleOutroKindChange}
-        onChange={handleOutroChange}
-      />
-
-      {/* ── 底部操作 ── */}
-      <div className="iop-footer">
-        <button className="iop-reset-btn" onClick={handleReset}>
-          重置
-        </button>
-      </div>
-    </Drawer>
-  )
-}
-
-export default IntroOutroPanel

apps/web/src/pages/editing-planner/components/MediaPanel.tsx

@@ -1,102 +0,0 @@
-/**
- * 左侧面板 — 模板列表
- * 模板编辑器只负责定义模板规则（片段数量、时长范围），不承载素材管理。
- */
-import React from "react"
-import type { EditingTemplate } from "@/api/editing-planner"
-import { MODE_LABELS } from "@/api/editing-planner"
-
-interface MediaPanelProps {
-  templates: EditingTemplate[]
-  loading: boolean
-  searchQuery: string
-  currentFilter: string
-  filterCategories: string[]
-  loadedTemplateId: string | null
-  onLoadTemplate: (id: string) => void
-  onSearchChange: (q: string) => void
-  onFilterChange: (f: string) => void
-}
-
-const MediaPanel: React.FC<MediaPanelProps> = ({
-  templates,
-  loading,
-  searchQuery,
-  currentFilter,
-  filterCategories,
-  loadedTemplateId,
-  onLoadTemplate,
-  onSearchChange,
-  onFilterChange,
-}) => {
-  return (
-    <div className="ep-left-panel">
-      {/* 搜索 */}
-      <div className="ep-search-wrap ep-media-panel-inner">
-        <span className="ep-search-icon">🔍</span>
-        <input
-          className="ep-search-input"
-          placeholder="搜索模板..."
-          value={searchQuery}
-          onChange={(e) => onSearchChange(e.target.value)}
-        />
-      </div>
-
-      {/* Chip 分类筛选 */}
-      <div className="ep-filter-chips">
-        {filterCategories.map((cat) => (
-          <button
-            key={cat}
-            className={`ep-filter-chip ${currentFilter === cat ? "active" : ""}`}
-            onClick={() => onFilterChange(cat)}
-          >
-            {cat}
-          </button>
-        ))}
-      </div>
-
-      {/* 模板列表 */}
-      <div className="ep-template-list">
-        {loading ? (
-          <div className="ep-loading">
-            <span>⏳</span>
-            <span>加载中...</span>
-          </div>
-        ) : templates.length === 0 ? (
-          <div className="ep-empty">
-            <span>📭</span>
-            <span>暂无模板</span>
-          </div>
-        ) : (
-          templates.map((tpl) => (
-            <div
-              key={tpl.id}
-              className={`ep-template-card ${loadedTemplateId === tpl.id ? "active" : ""}`}
-              onClick={() => onLoadTemplate(tpl.id)}
-            >
-              <div className="ep-template-card-header">
-                <span className="ep-template-card-name">{tpl.name}</span>
-                <span className="ep-template-card-mode">{MODE_LABELS[tpl.mode]}</span>
-              </div>
-              <div className="ep-template-card-meta">
-                <span>⏱️ {tpl.estimated_duration}s</span>
-                <span>📐 {tpl.segments.length}片段</span>
-              </div>
-              {tpl.tags.length > 0 && (
-                <div className="ep-template-card-tags">
-                  {tpl.tags.map((tag) => (
-                    <span key={tag} className="ep-template-tag">
-                      {tag}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default MediaPanel

apps/web/src/pages/editing-planner/components/ModeBar.tsx

@@ -1,28 +0,0 @@
-import React from "react"
-import type { TemplateMode } from "@/api/editing-planner"
-
-interface ModeBarProps {
-  modeList: { key: TemplateMode; label: string; icon: string }[]
-  currentMode: TemplateMode
-  onModeChange: (mode: TemplateMode) => void
-}
-
-const ModeBar: React.FC<ModeBarProps> = ({ modeList, currentMode, onModeChange }) => {
-  return (
-    <div className="ep-mode-bar">
-      <span className="ep-mode-bar-label">剪辑模式：</span>
-      {modeList.map((m) => (
-        <button
-          key={m.key}
-          className={`ep-mode-btn ${currentMode === m.key ? "active" : ""}`}
-          onClick={() => onModeChange(m.key)}
-        >
-          <span className="ep-mode-icon">{m.icon}</span>
-          <span className="ep-mode-label">{m.label}</span>
-        </button>
-      ))}
-    </div>
-  )
-}
-
-export default ModeBar

apps/web/src/pages/editing-planner/components/PipConfigPanel/components/LayerConfig.tsx

@@ -1,268 +0,0 @@
-import React from "react"
-import type { PipLayer, PipGridPosition, PipAnimType, PipSlideDirection } from "../../../types"
-import { GRID_POSITIONS, ANIM_OPTIONS, SLIDE_DIR_OPTIONS } from "../constants"
-
-export interface LayerConfigProps {
-  layer: PipLayer
-  totalDuration: number
-  onUpdate: (id: string, partial: Partial<PipLayer>) => void
-  onGridClick: (pos: PipGridPosition) => void
-  onWidthChange: (val: number) => void
-  onHeightChange: (val: number) => void
-}
-
-export const LayerConfig: React.FC<LayerConfigProps> = ({
-  layer,
-  totalDuration,
-  onUpdate,
-  onGridClick,
-  onWidthChange,
-  onHeightChange,
-}) => {
-  return (
-    <div className="pip-config-area">
-      {/* ── 素材类型 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">素材类型</label>
-        <div className="pip-type-btns">
-          <button
-            className={`pip-type-btn${layer.material_type === "image" ? " active" : ""}`}
-            onClick={() => onUpdate(layer.id, { material_type: "image" })}
-          >
-            🖼️ 图片
-          </button>
-          <button
-            className={`pip-type-btn${layer.material_type === "video" ? " active" : ""}`}
-            onClick={() => onUpdate(layer.id, { material_type: "video" })}
-          >
-            🎬 视频
-          </button>
-        </div>
-      </div>
-
-      {/* ── 素材 URL ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">
-          {layer.material_type === "image" ? "图片" : "视频"} URL
-        </label>
-        <input
-          className="pip-input"
-          type="text"
-          placeholder={
-            layer.material_type === "image"
-              ? "https://example.com/image.png"
-              : "https://example.com/video.mp4"
-          }
-          value={layer.material_url}
-          onChange={(e) => onUpdate(layer.id, { material_url: e.target.value })}
-        />
-      </div>
-
-      {/* ── 位置：九宫格 + 坐标 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">位置</label>
-        <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
-          <div className="pip-grid">
-            {GRID_POSITIONS.map((pos) => (
-              <button
-                key={pos}
-                className={`pip-grid-btn${layer.grid_position === pos ? " active" : ""}`}
-                onClick={() => onGridClick(pos)}
-              >
-                <span className="pip-grid-dot" />
-              </button>
-            ))}
-          </div>
-          <div className="pip-field-row" style={{ flex: 1 }}>
-            <div>
-              <label className="pip-field-label">X (%)</label>
-              <input
-                className="pip-number"
-                type="number"
-                min={0}
-                max={100}
-                value={layer.x}
-                onChange={(e) => {
-                  const val = Number(e.target.value)
-                  if (!isNaN(val) && val >= 0 && val <= 100) onUpdate(layer.id, { x: val })
-                }}
-              />
-            </div>
-            <div>
-              <label className="pip-field-label">Y (%)</label>
-              <input
-                className="pip-number"
-                type="number"
-                min={0}
-                max={100}
-                value={layer.y}
-                onChange={(e) => {
-                  const val = Number(e.target.value)
-                  if (!isNaN(val) && val >= 0 && val <= 100) onUpdate(layer.id, { y: val })
-                }}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* ── 尺寸 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">尺寸</label>
-        <div className="pip-slider-row">
-          <span style={{ fontSize: 12, color: "#999", width: 20 }}>宽</span>
-          <input
-            className="pip-slider"
-            type="range"
-            min={10}
-            max={80}
-            value={layer.width}
-            onChange={(e) => {
-              const val = Number(e.target.value)
-              if (!isNaN(val)) onWidthChange(val)
-            }}
-          />
-          <span className="pip-slider-value">{layer.width}%</span>
-        </div>
-        <div className="pip-slider-row" style={{ marginTop: 6 }}>
-          <span style={{ fontSize: 12, color: "#999", width: 20 }}>高</span>
-          <input
-            className="pip-slider"
-            type="range"
-            min={10}
-            max={80}
-            value={layer.height}
-            onChange={(e) => {
-              const val = Number(e.target.value)
-              if (!isNaN(val)) onHeightChange(val)
-            }}
-          />
-          <span className="pip-slider-value">{layer.height}%</span>
-        </div>
-        <div
-          className="pip-lock-row"
-          style={{ marginTop: 6 }}
-          onClick={() => onUpdate(layer.id, { aspect_lock: !layer.aspect_lock })}
-        >
-          <span className="pip-lock-icon">{layer.aspect_lock ? "🔒" : "🔓"}</span>
-          <span>{layer.aspect_lock ? "已锁定比例" : "锁定宽高比"}</span>
-        </div>
-      </div>
-
-      {/* ── 圆角 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">圆角</label>
-        <div className="pip-slider-row">
-          <input
-            className="pip-slider"
-            type="range"
-            min={0}
-            max={50}
-            value={layer.border_radius}
-            onChange={(e) => {
-              const val = Number(e.target.value)
-              if (!isNaN(val)) onUpdate(layer.id, { border_radius: val })
-            }}
-          />
-          <span className="pip-slider-value">{layer.border_radius}%</span>
-        </div>
-      </div>
-
-      {/* ── 透明度 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">透明度</label>
-        <div className="pip-slider-row">
-          <input
-            className="pip-slider"
-            type="range"
-            min={0}
-            max={100}
-            value={layer.opacity}
-            onChange={(e) => {
-              const val = Number(e.target.value)
-              if (!isNaN(val)) onUpdate(layer.id, { opacity: val })
-            }}
-          />
-          <span className="pip-slider-value">{layer.opacity}%</span>
-        </div>
-      </div>
-
-      {/* ── 时间 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">时间</label>
-        <div className="pip-field-row">
-          <div>
-            <label className="pip-field-label">开始 (s)</label>
-            <input
-              className="pip-number"
-              type="number"
-              min={0}
-              max={totalDuration || 999}
-              step={0.1}
-              value={layer.start_time}
-              onChange={(e) => {
-                const val = Number(e.target.value)
-                if (!isNaN(val) && val >= 0 && val <= totalDuration)
-                  onUpdate(layer.id, { start_time: val })
-              }}
-            />
-          </div>
-          <div>
-            <label className="pip-field-label">持续 (s)</label>
-            <input
-              className="pip-number"
-              type="number"
-              min={0.1}
-              max={totalDuration || 999}
-              step={0.1}
-              value={layer.duration}
-              onChange={(e) => {
-                const val = Number(e.target.value)
-                if (!isNaN(val) && val > 0 && val <= totalDuration)
-                  onUpdate(layer.id, { duration: val })
-              }}
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* ── 入场动画 ── */}
-      <div className="pip-field">
-        <label className="pip-field-label">入场动画</label>
-        <select
-          className="pip-select"
-          value={layer.animation}
-          onChange={(e) => onUpdate(layer.id, { animation: e.target.value as PipAnimType })}
-        >
-          {ANIM_OPTIONS.map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {/* 滑入方向（仅 slide_in 时显示） */}
-      {layer.animation === "slide_in" && (
-        <div className="pip-field">
-          <label className="pip-field-label">滑入方向</label>
-          <select
-            className="pip-select"
-            value={layer.slide_direction}
-            onChange={(e) =>
-              onUpdate(layer.id, {
-                slide_direction: e.target.value as PipSlideDirection,
-              })
-            }
-          >
-            {SLIDE_DIR_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
-        </div>
-      )}
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/PipConfigPanel/components/LayerList.tsx

@@ -1,58 +0,0 @@
-import React from "react"
-import type { PipLayer } from "../../../types"
-import { LAYER_COLORS } from "../constants"
-
-export interface LayerListProps {
-  layers: PipLayer[]
-  selectedId: string
-  onSelect: (id: string) => void
-  onDelete: (id: string) => void
-}
-
-export const LayerList: React.FC<LayerListProps> = ({ layers, selectedId, onSelect, onDelete }) => {
-  if (layers.length === 0) {
-    return (
-      <div className="pip-layer-list">
-        <div className="pip-layer-empty">暂无图层，点击上方添加</div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="pip-layer-list">
-      {layers.map((layer, idx) => (
-        <div
-          key={layer.id}
-          className={`pip-layer-item${selectedId === layer.id ? " active" : ""}`}
-          onClick={() => onSelect(layer.id)}
-        >
-          {layer.thumbnail_url || layer.material_url ? (
-            <img
-              className="pip-layer-thumb"
-              src={layer.thumbnail_url || layer.material_url || undefined}
-              alt={layer.name}
-            />
-          ) : (
-            <div
-              className="pip-layer-thumb"
-              style={{
-                background: LAYER_COLORS[idx % LAYER_COLORS.length],
-              }}
-            />
-          )}
-          <span className="pip-layer-name">{layer.name}</span>
-          <button
-            className="pip-layer-delete"
-            onClick={(e) => {
-              e.stopPropagation()
-              onDelete(layer.id)
-            }}
-            title="删除图层"
-          >
-            ✕
-          </button>
-        </div>
-      ))}
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/PipConfigPanel/components/PipPreview.tsx

@@ -1,33 +0,0 @@
-import React from "react"
-import type { PipLayer } from "../../../types"
-import { LAYER_COLORS } from "../constants"
-
-export interface PipPreviewProps {
-  layers: PipLayer[]
-  selectedId: string
-}
-
-export const PipPreview: React.FC<PipPreviewProps> = ({ layers, selectedId }) => {
-  return (
-    <div className="pip-preview-box">
-      {layers.map((layer, idx) => (
-        <div
-          key={layer.id}
-          className={`pip-preview-layer${selectedId === layer.id ? " selected" : ""}`}
-          style={{
-            left: `${layer.x}%`,
-            top: `${layer.y}%`,
-            width: `${layer.width}%`,
-            height: `${layer.height}%`,
-            background: LAYER_COLORS[idx % LAYER_COLORS.length],
-            opacity: layer.opacity / 100,
-            borderRadius: `${layer.border_radius}%`,
-            zIndex: layer.z_index,
-          }}
-        >
-          <span className="pip-preview-label">{layer.name}</span>
-        </div>
-      ))}
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/PipConfigPanel/constants.ts

@@ -1,55 +0,0 @@
-import type { PipGridPosition, PipAnimType, PipSlideDirection } from "../../types"
-
-/** 九宫格位置 → 百分比坐标映射 */
-export const GRID_POSITION_MAP: Record<PipGridPosition, { x: number; y: number }> = {
-  top_left: { x: 5, y: 5 },
-  top_center: { x: 37.5, y: 5 },
-  top_right: { x: 70, y: 5 },
-  center_left: { x: 5, y: 37.5 },
-  center: { x: 37.5, y: 37.5 },
-  center_right: { x: 70, y: 37.5 },
-  bottom_left: { x: 5, y: 70 },
-  bottom_center: { x: 37.5, y: 70 },
-  bottom_right: { x: 70, y: 70 },
-}
-
-/** 九宫格位置选项 */
-export const GRID_POSITIONS: PipGridPosition[] = [
-  "top_left",
-  "top_center",
-  "top_right",
-  "center_left",
-  "center",
-  "center_right",
-  "bottom_left",
-  "bottom_center",
-  "bottom_right",
-]
-
-/** 入场动画选项 */
-export const ANIM_OPTIONS: { value: PipAnimType; label: string }[] = [
-  { value: "none", label: "无" },
-  { value: "fade_in", label: "淡入" },
-  { value: "slide_in", label: "滑入" },
-]
-
-/** 滑入方向选项 */
-export const SLIDE_DIR_OPTIONS: { value: PipSlideDirection; label: string }[] = [
-  { value: "left", label: "← 左" },
-  { value: "right", label: "→ 右" },
-  { value: "up", label: "↑ 上" },
-  { value: "down", label: "↓ 下" },
-]
-
-/** 预览图层颜色池 */
-export const LAYER_COLORS = [
-  "rgba(22,119,255,0.5)",
-  "rgba(82,196,26,0.5)",
-  "rgba(250,173,20,0.5)",
-  "rgba(255,77,79,0.5)",
-  "rgba(114,46,209,0.5)",
-  "rgba(19,194,194,0.5)",
-]
-
-let layerIdCounter = 0
-export const genLayerId = () => `pip_layer_${Date.now()}_${++layerIdCounter}`

apps/web/src/pages/editing-planner/components/PipConfigPanel/hooks/usePipConfigPanel.ts

@@ -1,130 +0,0 @@
-import { useState, useCallback, useMemo } from "react"
-import type { PipConfig, PipLayer, PipGridPosition } from "../../../types"
-import { DEFAULT_PIP_LAYER, DEFAULT_PIP_CONFIG } from "../../../types"
-import { GRID_POSITION_MAP, genLayerId } from "../constants"
-
-const MIN_DIMENSION = 10
-const MAX_DIMENSION = 80
-
-interface UsePipConfigPanelOptions {
-  config: PipConfig
-  onChange: (config: PipConfig) => void
-}
-
-export const usePipConfigPanel = ({ config, onChange }: UsePipConfigPanelOptions) => {
-  const [selectedId, setSelectedId] = useState<string>("")
-
-  const selectedLayer = useMemo(
-    () => config.layers.find((l) => l.id === selectedId) ?? null,
-    [config.layers, selectedId],
-  )
-
-  /* ── 添加图层 ── */
-  const handleAddLayer = useCallback(() => {
-    const newLayer: PipLayer = {
-      ...DEFAULT_PIP_LAYER,
-      id: genLayerId(),
-      name: `图层 ${config.layers.length + 1}`,
-      z_index: config.layers.length + 1,
-    }
-    onChange({
-      ...config,
-      layers: [...config.layers, newLayer],
-    })
-    setSelectedId(newLayer.id)
-  }, [config, onChange])
-
-  /* ── 删除图层 ── */
-  const handleDeleteLayer = useCallback(
-    (id: string) => {
-      const newLayers = config.layers.filter((l) => l.id !== id)
-      onChange({ ...config, layers: newLayers })
-      if (selectedId === id) {
-        setSelectedId(newLayers.length > 0 ? newLayers[0].id : "")
-      }
-    },
-    [config, onChange, selectedId],
-  )
-
-  /* ── 更新图层 ── */
-  const updateLayer = useCallback(
-    (id: string, partial: Partial<PipLayer>) => {
-      onChange({
-        ...config,
-        layers: config.layers.map((l) => (l.id === id ? { ...l, ...partial } : l)),
-      })
-    },
-    [config, onChange],
-  )
-
-  /* ── 切换启用 ── */
-  const handleEnableToggle = useCallback(
-    (checked: boolean) => {
-      onChange({ ...config, enabled: checked })
-    },
-    [config, onChange],
-  )
-
-  /* ── 重置 ── */
-  const handleReset = useCallback(() => {
-    onChange({ ...DEFAULT_PIP_CONFIG })
-    setSelectedId("")
-  }, [onChange])
-
-  /* ── 九宫格点击 ── */
-  const handleGridClick = useCallback(
-    (pos: PipGridPosition) => {
-      if (!selectedLayer) return
-      const coords = GRID_POSITION_MAP[pos]
-      updateLayer(selectedLayer.id, {
-        grid_position: pos,
-        x: coords.x,
-        y: coords.y,
-      })
-    },
-    [selectedLayer, updateLayer],
-  )
-
-  /* ── 宽高变化 ── */
-  const handleWidthChange = useCallback(
-    (val: number) => {
-      if (!selectedLayer) return
-      const partial: Partial<PipLayer> = { width: val }
-      if (selectedLayer.aspect_lock && selectedLayer.height > 0) {
-        const ratio = selectedLayer.width / selectedLayer.height
-        const newHeight = Math.round(val / ratio)
-        partial.height = Math.max(MIN_DIMENSION, Math.min(MAX_DIMENSION, newHeight))
-      }
-      updateLayer(selectedLayer.id, partial)
-    },
-    [selectedLayer, updateLayer],
-  )
-
-  const handleHeightChange = useCallback(
-    (val: number) => {
-      if (!selectedLayer) return
-      const partial: Partial<PipLayer> = { height: val }
-      if (selectedLayer.aspect_lock && selectedLayer.width > 0 && selectedLayer.height > 0) {
-        const ratio = selectedLayer.width / selectedLayer.height
-        const newWidth = Math.round(val * ratio)
-        partial.width = Math.max(MIN_DIMENSION, Math.min(MAX_DIMENSION, newWidth))
-      }
-      updateLayer(selectedLayer.id, partial)
-    },
-    [selectedLayer, updateLayer],
-  )
-
-  return {
-    selectedId,
-    setSelectedId,
-    selectedLayer,
-    handleAddLayer,
-    handleDeleteLayer,
-    updateLayer,
-    handleEnableToggle,
-    handleReset,
-    handleGridClick,
-    handleWidthChange,
-    handleHeightChange,
-  }
-}

apps/web/src/pages/editing-planner/components/PipConfigPanel/index.tsx

@@ -1,105 +0,0 @@
-/**
- * 混剪配置面板 — Drawer 形式
- * 左侧图层列表 + 右侧单图层配置 + 迷你预览区
- */
-import React from "react"
-import { Drawer, Switch } from "antd"
-import type { PipConfig } from "../../types"
-
-import { usePipConfigPanel } from "./hooks/usePipConfigPanel"
-import { LayerList } from "./components/LayerList"
-import { PipPreview } from "./components/PipPreview"
-import { LayerConfig } from "./components/LayerConfig"
-
-export interface PipConfigPanelProps {
-  open: boolean
-  onClose: () => void
-  config: PipConfig
-  onChange: (config: PipConfig) => void
-  totalDuration: number
-}
-
-const PipConfigPanel: React.FC<PipConfigPanelProps> = ({
-  open,
-  onClose,
-  config,
-  onChange,
-  totalDuration,
-}) => {
-  const {
-    selectedId,
-    setSelectedId,
-    selectedLayer,
-    handleAddLayer,
-    handleDeleteLayer,
-    updateLayer,
-    handleEnableToggle,
-    handleReset,
-    handleGridClick,
-    handleWidthChange,
-    handleHeightChange,
-  } = usePipConfigPanel({ config, onChange })
-
-  return (
-    <Drawer
-      title="🖼️ 混剪设置"
-      placement="right"
-      width={520}
-      open={open}
-      onClose={onClose}
-      className="pip-config-panel-drawer"
-    >
-      {/* ═══ 顶部工具栏 ═══ */}
-      <div className="pip-toolbar">
-        <div className="pip-toolbar-left">
-          <button className="pip-add-btn" onClick={handleAddLayer}>
-            + 添加图层
-          </button>
-        </div>
-        <div className="pip-enable-switch">
-          <span>启用</span>
-          <Switch size="small" checked={config.enabled} onChange={handleEnableToggle} />
-        </div>
-      </div>
-
-      {/* ═══ 主体：图层列表 + 配置区 ═══ */}
-      <div className="pip-body">
-        {/* 左侧图层列表 */}
-        <LayerList
-          layers={config.layers}
-          selectedId={selectedId}
-          onSelect={setSelectedId}
-          onDelete={handleDeleteLayer}
-        />
-
-        {/* 右侧配置区 */}
-        {!selectedLayer ? (
-          <div className="pip-config-area">
-            <div className="pip-config-empty">选择或添加图层以配置</div>
-          </div>
-        ) : (
-          <>
-            <PipPreview layers={config.layers} selectedId={selectedId} />
-            <LayerConfig
-              layer={selectedLayer}
-              totalDuration={totalDuration}
-              onUpdate={updateLayer}
-              onGridClick={handleGridClick}
-              onWidthChange={handleWidthChange}
-              onHeightChange={handleHeightChange}
-            />
-          </>
-        )}
-      </div>
-
-      {/* ── 底部操作 ── */}
-      <div className="pip-footer">
-        <button className="pip-reset-btn" onClick={handleReset}>
-          重置
-        </button>
-      </div>
-    </Drawer>
-  )
-}
-
-export default PipConfigPanel

apps/web/src/pages/editing-planner/components/PreviewPlayer.css

@@ -1,431 +0,0 @@
-/**
- * 预览播放器样式 — V21 设计系统
- * 任务 2.16
- */
-
-/* ============================================================
-   预览播放器容器
-   ============================================================ */
-.ep-preview {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-primary);
-}
-
-/* ── 预览画面 ── */
-.ep-preview-screen {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  max-height: 280px;
-  overflow: hidden;
-  background: #0f0f14;
-  border-radius: 0;
-}
-
-.ep-preview-visual {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-md);
-  transition: background 0.4s ease;
-}
-
-/* 片段类型大图标 */
-.ep-preview-type-icon {
-  font-size: 56px;
-  opacity: 0.7;
-  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
-  animation: ep-preview-float 3s ease-in-out infinite;
-}
-
-@keyframes ep-preview-float {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-6px);
-  }
-}
-
-/* 文案字幕 */
-.ep-preview-subtitle {
-  max-width: 80%;
-  padding: 8px 20px;
-  background: rgba(0, 0, 0, 0.55);
-  backdrop-filter: blur(8px);
-  border-radius: var(--radius-md);
-  color: #fff;
-  font-size: 14px;
-  line-height: 1.6;
-  text-align: center;
-  letter-spacing: 0.02em;
-}
-
-/* 片段序号角标 */
-.ep-preview-clip-badge {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  padding: 3px 10px;
-  border-radius: var(--radius-sm);
-  color: #fff;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-}
-
-/* 素材类型标签 */
-.ep-preview-material-tag {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  padding: 3px 10px;
-  border-radius: var(--radius-sm);
-  background: rgba(0, 0, 0, 0.45);
-  backdrop-filter: blur(6px);
-  color: rgba(255, 255, 255, 0.85);
-  font-size: 11px;
-  text-transform: capitalize;
-}
-
-/* 空状态 */
-.ep-preview-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: rgba(255, 255, 255, 0.4);
-}
-
-.ep-preview-empty-icon {
-  font-size: 48px;
-  margin-bottom: var(--space-sm);
-  opacity: 0.5;
-}
-
-.ep-preview-empty p {
-  margin: 0;
-  font-size: var(--font-size-sm);
-}
-
-/* ============================================================
-   控制栏
-   ============================================================ */
-.ep-preview-controls {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: 8px var(--space-lg);
-  border-top: 1px solid rgba(255, 255, 255, 0.06);
-  background: #16161e;
-}
-
-/* 时间显示 */
-.ep-preview-time {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  min-width: 90px;
-}
-
-.ep-preview-time-current {
-  color: #fff;
-  font-weight: 600;
-}
-
-.ep-preview-time-sep {
-  color: rgba(255, 255, 255, 0.3);
-}
-
-.ep-preview-time-total {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-/* 播放按钮组 */
-.ep-preview-buttons {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex: 1;
-  justify-content: center;
-}
-
-.ep-preview-btn {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 14px;
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: var(--transition-all);
-}
-
-.ep-preview-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
-}
-
-.ep-preview-btn-play {
-  width: 40px;
-  height: 40px;
-  background: var(--primary-color);
-  color: #fff;
-  font-size: 16px;
-  border-radius: 50%;
-  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
-}
-
-.ep-preview-btn-play:hover {
-  background: var(--primary-hover);
-  transform: scale(1.05);
-  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.5);
-}
-
-/* 片段信息 */
-.ep-preview-clip-info {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  font-size: 12px;
-  min-width: 90px;
-  justify-content: flex-end;
-}
-
-.ep-preview-clip-idx {
-  color: rgba(255, 255, 255, 0.6);
-}
-
-.ep-preview-clip-dur {
-  color: var(--primary-color);
-  font-weight: 600;
-  background: rgba(79, 70, 229, 0.15);
-  padding: 1px 8px;
-  border-radius: 999px;
-}
-
-/* ============================================================
-   进度条（可拖拽）
-   ============================================================ */
-.ep-preview-progress {
-  position: relative;
-  height: 20px;
-  padding: 7px var(--space-lg);
-  cursor: pointer;
-  user-select: none;
-  background: #16161e;
-}
-
-.ep-preview-progress-track {
-  position: relative;
-  height: 6px;
-  display: flex;
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.ep-preview-progress-segment {
-  height: 100%;
-  transition: opacity 0.2s ease;
-}
-
-.ep-preview-progress-fill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.25);
-  border-radius: 3px;
-  pointer-events: none;
-}
-
-.ep-preview-progress-handle {
-  position: absolute;
-  top: 50%;
-  width: 14px;
-  height: 14px;
-  background: #fff;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-  transition: transform 0.1s ease;
-  pointer-events: none;
-  z-index: 2;
-}
-
-.ep-preview-progress:hover .ep-preview-progress-handle {
-  transform: translate(-50%, -50%) scale(1.2);
-}
-
-/* ============================================================
-   迷你时间线
-   ============================================================ */
-.ep-preview-timeline {
-  position: relative;
-  display: flex;
-  height: 28px;
-  gap: 2px;
-  padding: 0 var(--space-lg);
-  background: #12121a;
-  overflow: hidden;
-}
-
-.ep-preview-timeline-seg {
-  height: 100%;
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: var(--transition-all);
-  min-width: 8px;
-  position: relative;
-}
-
-.ep-preview-timeline-seg:hover {
-  opacity: 0.85;
-  transform: scaleY(1.08);
-}
-
-.ep-preview-timeline-seg.active {
-  opacity: 1;
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
-}
-
-.ep-preview-timeline-seg.selected {
-  box-shadow: 0 0 0 2px var(--primary-color);
-}
-
-.ep-preview-timeline-seg-label {
-  font-size: 10px;
-  opacity: 0.8;
-  pointer-events: none;
-}
-
-/* 播放头 */
-.ep-preview-playhead {
-  position: absolute;
-  top: 0;
-  width: 2px;
-  height: 100%;
-  background: #fff;
-  transform: translateX(-50%);
-  pointer-events: none;
-  z-index: 3;
-  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
-}
-
-/* ============================================================
-   片段内进度条
-   ============================================================ */
-.ep-preview-clip-progress {
-  height: 3px;
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.ep-preview-clip-progress-fill {
-  height: 100%;
-  transition: width 0.1s linear;
-  border-radius: 0 2px 2px 0;
-}
-
-/* ============================================================
-   响应式
-   ============================================================ */
-@media (max-width: 1200px) {
-  .ep-preview-screen {
-    max-height: 240px;
-  }
-}
-
-@media (max-width: 900px) {
-  .ep-preview-screen {
-    max-height: 200px;
-  }
-
-  .ep-preview-type-icon {
-    font-size: 40px;
-  }
-
-  .ep-preview-subtitle {
-    font-size: 13px;
-    padding: 6px 14px;
-  }
-
-  .ep-preview-time {
-    min-width: 70px;
-    font-size: 11px;
-  }
-
-  .ep-preview-clip-info {
-    min-width: 70px;
-    font-size: 11px;
-  }
-}
-
-@media (max-width: 768px) {
-  .ep-preview-screen {
-    max-height: 180px;
-  }
-
-  .ep-preview-controls {
-    padding: 6px var(--space-md);
-    gap: var(--space-sm);
-  }
-
-  .ep-preview-btn-play {
-    width: 36px;
-    height: 36px;
-    font-size: 14px;
-  }
-
-  .ep-preview-timeline {
-    height: 22px;
-    padding: 0 var(--space-md);
-  }
-}
-
-@media (max-width: 480px) {
-  .ep-preview-screen {
-    max-height: 140px;
-  }
-
-  .ep-preview-type-icon {
-    font-size: 32px;
-  }
-
-  .ep-preview-subtitle {
-    font-size: 12px;
-    max-width: 90%;
-  }
-
-  .ep-preview-clip-badge,
-  .ep-preview-material-tag {
-    font-size: 10px;
-    padding: 2px 6px;
-  }
-
-  .ep-preview-clip-info {
-    display: none;
-  }
-
-  .ep-preview-time {
-    min-width: auto;
-  }
-}

apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx

@@ -1,129 +0,0 @@
-/**
- * 预览区 — V8 原型 1:1 还原
- * 手机模型预览
- */
-import React from "react"
-import type { ClipData, ClipType } from "../types"
-import type { TitleConfig } from "@/api/template-editor"
-
-interface SubtitleSettings {
-  enabled: boolean
-  position: string
-  font: string
-  size: number
-  animation: string
-}
-
-interface PreviewPlayerProps {
-  clips: ClipData[]
-  selectedClipId: string | null
-  isPlaying: boolean
-  titleConfig?: TitleConfig
-  subtitleSettings?: SubtitleSettings
-  onClipSelect: (clipId: string) => void
-  onPlayPause: () => void
-}
-
-const CLIP_TYPE_ICONS: Record<ClipType, string> = {
-  voice: "🎙️",
-  pip: "🖼️",
-}
-
-const CLIP_TYPE_LABELS: Record<ClipType, string> = {
-  voice: "口播",
-  pip: "混剪",
-}
-
-const PreviewPlayer: React.FC<PreviewPlayerProps> = ({
-  clips,
-  selectedClipId,
-  isPlaying,
-  titleConfig,
-  subtitleSettings,
-  onPlayPause,
-}) => {
-  const selectedClip = clips.find((c) => c.id === selectedClipId)
-  const displayClip = selectedClip || clips[0]
-
-  return (
-    <div className="ep-preview-area">
-      {/* 手机模型预览 */}
-      <div className="ep-phone-preview">
-        <div className="ep-phone-status-bar">
-          <span>9:41</span>
-          <span>📶 🔋</span>
-        </div>
-        <div className="ep-phone-content">
-          {displayClip ? (
-            <>
-              <button className="ep-phone-play-btn" onClick={onPlayPause}>
-                {isPlaying ? "⏸" : "▶"}
-              </button>
-              <div className="ep-phone-progress">
-                <div
-                  className="ep-phone-progress-fill"
-                  style={{ width: isPlaying ? "45%" : "0%" }}
-                />
-              </div>
-              <div className="ep-phone-clip-label">
-                {CLIP_TYPE_ICONS[displayClip.type] || "🎬"}{" "}
-                {CLIP_TYPE_LABELS[displayClip.type] || "片段"}
-              </div>
-            </>
-          ) : (
-            <span className="ep-phone-empty-hint">暂无片段</span>
-          )}
-
-          {/* 标题实时预览 */}
-          {titleConfig && !titleConfig.ai_auto_select && titleConfig.content && (
-            <div
-              className="ep-preview-title"
-              style={{
-                fontSize: `${Math.min(titleConfig.font_size, 20)}px`,
-                fontFamily: titleConfig.font_preset,
-                fontWeight: "bold",
-                fontStyle: "normal",
-                textShadow: "2px 2px 4px rgba(0,0,0,0.5)",
-                WebkitTextStroke: "1px rgba(0,0,0,0.6)",
-                top:
-                  titleConfig.position === "top"
-                    ? "6.25%"
-                    : titleConfig.position === "center"
-                      ? "50%"
-                      : "auto",
-                bottom: titleConfig.position === "bottom" ? "30px" : "auto",
-                transform: titleConfig.position === "center" ? "translateY(-50%)" : "none",
-                color: titleConfig.font_color,
-              }}
-            >
-              {titleConfig.content}
-            </div>
-          )}
-
-          {/* 字幕实时预览 */}
-          {subtitleSettings?.enabled && (
-            <div
-              className="ep-preview-subtitle"
-              style={{
-                fontSize: `${Math.min(subtitleSettings.size, 14)}px`,
-                fontFamily: subtitleSettings.font,
-                top:
-                  subtitleSettings.position === "top"
-                    ? "8px"
-                    : subtitleSettings.position === "center"
-                      ? "50%"
-                      : "auto",
-                bottom: subtitleSettings.position === "bottom" ? "8px" : "auto",
-                transform: subtitleSettings.position === "center" ? "translateY(-50%)" : "none",
-              }}
-            >
-              字幕预览文字
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default PreviewPlayer

apps/web/src/pages/editing-planner/components/RightPanel.tsx

@@ -1,176 +0,0 @@
-import React from "react"
-import ClipPropertiesPanel from "./ClipPropertiesPanel"
-import EditorClipList from "./EditorClipList"
-import type { ClipData } from "../types"
-import type { SubtitleStyleConfig } from "../types/subtitle"
-import type { BgmMixConfig } from "@/api/bgm"
-import type { TemplateMode } from "@/api/editing-planner"
-import type { TitleConfig } from "@/api/template-editor"
-import type { AssetItem } from "@/api/assets"
-
-interface RightPanelProps {
-  titleConfig?: TitleConfig
-  onTitleConfigChange?: (config: TitleConfig | ((prev: TitleConfig) => TitleConfig)) => void
-  rightTab: "properties" | "clips"
-  onTabChange: (tab: "properties" | "clips") => void
-  // 属性 tab
-  selectedClip: ClipData | null
-  subtitleSettings: SubtitleStyleConfig
-  bgmSettings: BgmMixConfig
-  clipsCount: number
-  totalDuration: number
-  currentMode: TemplateMode
-  onSubtitleSettingsChange: (partial: Partial<SubtitleStyleConfig>) => void
-  onBgmSettingsChange: (partial: Partial<BgmMixConfig>) => void
-  onClipUpdate: (clipId: string, updates: Partial<ClipData>) => void
-  onOpenBgmDrawer: () => void
-  onOpenSubtitleDrawer: () => void
-  voiceMaterials: AssetItem[]
-  voiceMaterialsLoading: boolean
-  onRefreshVoiceMaterials: () => void
-  onClipVoiceSelect: (clipId: string, asset: AssetItem | null) => void
-  onOpenTransitionDrawer: (clipId?: string) => void
-  onOpenSpeedDrawer: (clipId: string) => void
-  onOpenTtsDrawer: (clipId: string) => void
-  onOpenWatermarkDrawer: () => void
-  onOpenIntroOutroDrawer: () => void
-  onOpenPipDrawer: () => void
-  onOpenFilterDrawer: () => void
-  onOpenGreenScreenDrawer: () => void
-  onOpenStickerDrawer: () => void
-  // 片段 tab
-  clips: ClipData[]
-  selectedClipId: string | null
-  onClipSelect: (clipId: string) => void
-  onClipMoveUp: (clipId: string) => void
-  onClipMoveDown: (clipId: string) => void
-  onClipRemove: (clipId: string) => void
-  onClipAdd: () => void
-}
-
-const RightPanel: React.FC<RightPanelProps> = ({
-  titleConfig,
-  onTitleConfigChange,
-  rightTab,
-  onTabChange,
-  selectedClip,
-  subtitleSettings,
-  bgmSettings,
-  clipsCount,
-  totalDuration,
-  currentMode,
-  onSubtitleSettingsChange,
-  onBgmSettingsChange,
-  onClipUpdate,
-  onOpenBgmDrawer,
-  onOpenSubtitleDrawer,
-  voiceMaterials,
-  voiceMaterialsLoading,
-  onRefreshVoiceMaterials,
-  onClipVoiceSelect,
-  onOpenTransitionDrawer,
-  onOpenSpeedDrawer,
-  onOpenTtsDrawer,
-  onOpenWatermarkDrawer,
-  onOpenIntroOutroDrawer,
-  onOpenPipDrawer,
-  onOpenFilterDrawer,
-  onOpenGreenScreenDrawer,
-  onOpenStickerDrawer,
-  clips,
-  selectedClipId,
-  onClipSelect,
-  onClipMoveUp,
-  onClipMoveDown,
-  onClipRemove,
-  onClipAdd,
-}) => {
-  return (
-    <div className="ep-right-panel">
-      {/* Tab 切换 */}
-      <div className="ep-right-tabs">
-        <button
-          className={`ep-right-tab${rightTab === "properties" ? " active" : ""}`}
-          onClick={() => onTabChange("properties")}
-        >
-          属性
-        </button>
-        <button
-          className={`ep-right-tab${rightTab === "clips" ? " active" : ""}`}
-          onClick={() => onTabChange("clips")}
-        >
-          片段
-        </button>
-      </div>
-
-      {/* 属性 Tab */}
-      {rightTab === "properties" && (
-        <div className="ep-right-tab-content">
-          {(() => {
-            // ClipPropertiesPanel 内部类型与主文件类型结构一致但字段细节不同
-            // 使用 unknown 作为中间类型避免 any 警告
-            const sub = subtitleSettings as unknown as React.ComponentProps<
-              typeof ClipPropertiesPanel
-            >["subtitleSettings"]
-            const bgm = bgmSettings as unknown as React.ComponentProps<
-              typeof ClipPropertiesPanel
-            >["bgmSettings"]
-            const onSubChange = onSubtitleSettingsChange as unknown as React.ComponentProps<
-              typeof ClipPropertiesPanel
-            >["onSubtitleSettingsChange"]
-            const onBgmChange = onBgmSettingsChange as unknown as React.ComponentProps<
-              typeof ClipPropertiesPanel
-            >["onBgmSettingsChange"]
-            return (
-              <ClipPropertiesPanel
-                titleConfig={titleConfig}
-                onTitleConfigChange={onTitleConfigChange}
-                selectedClip={selectedClip}
-                subtitleSettings={sub}
-                bgmSettings={bgm}
-                clipsCount={clipsCount}
-                totalDuration={totalDuration}
-                currentMode={currentMode}
-                onSubtitleSettingsChange={onSubChange}
-                onBgmSettingsChange={onBgmChange}
-                onClipUpdate={onClipUpdate}
-                onOpenBgmDrawer={onOpenBgmDrawer}
-                onOpenSubtitleDrawer={onOpenSubtitleDrawer}
-                voiceMaterials={voiceMaterials}
-                voiceMaterialsLoading={voiceMaterialsLoading}
-                onRefreshVoiceMaterials={onRefreshVoiceMaterials}
-                onClipVoiceSelect={onClipVoiceSelect}
-                onOpenTransitionDrawer={onOpenTransitionDrawer}
-                onOpenSpeedDrawer={onOpenSpeedDrawer}
-                onOpenTtsDrawer={onOpenTtsDrawer}
-                onOpenWatermarkDrawer={onOpenWatermarkDrawer}
-                onOpenIntroOutroDrawer={onOpenIntroOutroDrawer}
-                onOpenPipDrawer={onOpenPipDrawer}
-                onOpenFilterDrawer={onOpenFilterDrawer}
-                onOpenGreenScreenDrawer={onOpenGreenScreenDrawer}
-                onOpenStickerDrawer={onOpenStickerDrawer}
-              />
-            )
-          })()}
-        </div>
-      )}
-
-      {/* 片段 Tab */}
-      {rightTab === "clips" && (
-        <div className="ep-right-tab-content">
-          <EditorClipList
-            clips={clips}
-            selectedClipId={selectedClipId}
-            onSelect={onClipSelect}
-            onMoveUp={onClipMoveUp}
-            onMoveDown={onClipMoveDown}
-            onRemove={onClipRemove}
-            onAdd={onClipAdd}
-          />
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default RightPanel

apps/web/src/pages/editing-planner/components/SaveModal.tsx

@@ -1,86 +0,0 @@
-/**
- * 保存/更新模板弹窗 — V21 设计系统
- * 分类使用 Select 关联后端分类 API（P1-5）
- */
-import React from "react"
-import { Modal, Input, Select } from "@/components/ui"
-import type { TemplateCategory } from "@/api/editing-planner"
-
-interface SaveModalProps {
-  open: boolean
-  loading: boolean
-  isUpdate: boolean
-  draftName: string
-  draftCategory: string
-  draftTags: string
-  categories: TemplateCategory[]
-  estimatedDuration: number
-  onNameChange: (v: string) => void
-  onCategoryChange: (v: string) => void
-  onTagsChange: (v: string) => void
-  onSave: () => void
-  onCancel: () => void
-}
-
-const SaveModal: React.FC<SaveModalProps> = ({
-  open,
-  loading,
-  isUpdate,
-  draftName,
-  draftCategory,
-  draftTags,
-  categories,
-  estimatedDuration,
-  onNameChange,
-  onCategoryChange,
-  onTagsChange,
-  onSave,
-  onCancel,
-}) => {
-  return (
-    <Modal
-      title={isUpdate ? "更新模板" : "保存模板"}
-      open={open}
-      onCancel={onCancel}
-      onOk={onSave}
-      confirmLoading={loading}
-      okText="保存"
-    >
-      <div className="ep-modal-field">
-        <label>模板名称 *</label>
-        <Input
-          placeholder="输入模板名称"
-          value={draftName}
-          onChange={(e) => onNameChange(e.target.value)}
-        />
-      </div>
-
-      <div className="ep-modal-field">
-        <label>分类</label>
-        <Select
-          placeholder="选择分类"
-          value={draftCategory || undefined}
-          onChange={(v: string) => onCategoryChange(v || "")}
-          allowClear
-          showSearch
-          options={categories.map((c) => ({ value: c.name, label: c.name }))}
-        />
-      </div>
-
-      <div className="ep-modal-field">
-        <label>标签（逗号分隔）</label>
-        <Input
-          placeholder="例如：vlog, 日常"
-          value={draftTags}
-          onChange={(e) => onTagsChange(e.target.value)}
-        />
-      </div>
-
-      <div className="ep-modal-info">
-        ⏱️ 预估时长：<strong>~{estimatedDuration}s</strong>
-      </div>
-    </Modal>
-  )
-}
-
-export default SaveModal

apps/web/src/pages/editing-planner/components/SpeedPanel.tsx

@@ -1,152 +0,0 @@
-/**
- * 片段调速面板 — Drawer 形式
- * 速度滑块（0.25x ~ 4x）+ 预设快捷按钮 + 音调修正开关
- * 支持应用到当前片段 / 所有片段
- */
-import React, { useCallback } from "react"
-import { Drawer, Slider } from "antd"
-import type { SpeedConfig } from "../types"
-import { DEFAULT_SPEED } from "../types"
-
-/* ──────────── 预设速度 ──────────── */
-const SPEED_PRESETS: { rate: number; label: string }[] = [
-  { rate: 0.5, label: "0.5x" },
-  { rate: 1.0, label: "1x" },
-  { rate: 1.5, label: "1.5x" },
-  { rate: 2.0, label: "2x" },
-]
-
-/* ──────────── Props ──────────── */
-interface SpeedPanelProps {
-  open: boolean
-  onClose: () => void
-  /** 当前片段调速配置 */
-  config: SpeedConfig
-  onChange: (config: SpeedConfig) => void
-  /** 应用到所有片段 */
-  onApplyAll?: (config: SpeedConfig) => void
-}
-
-const SpeedPanel: React.FC<SpeedPanelProps> = ({ open, onClose, config, onChange, onApplyAll }) => {
-  /* ── 修改速度 ── */
-  const handleChangeRate = useCallback(
-    (rate: number) => {
-      onChange({ ...config, rate })
-    },
-    [config, onChange],
-  )
-
-  /* ── 切换音调修正 ── */
-  const handleTogglePitch = useCallback(() => {
-    onChange({ ...config, pitchCorrection: !config.pitchCorrection })
-  }, [config, onChange])
-
-  /* ── 选择预设 ── */
-  const handlePreset = useCallback(
-    (rate: number) => {
-      onChange({ ...config, rate })
-    },
-    [config, onChange],
-  )
-
-  /* ── 应用到所有片段 ── */
-  const handleApplyAll = useCallback(() => {
-    onApplyAll?.(config)
-  }, [config, onApplyAll])
-
-  /* ── 重置 ── */
-  const handleReset = useCallback(() => {
-    onChange({ ...DEFAULT_SPEED })
-  }, [onChange])
-
-  /* ── 速度描述文字 ── */
-  const speedLabel =
-    config.rate < 1
-      ? "慢速（慢动作）"
-      : config.rate === 1
-        ? "原速"
-        : config.rate < 2
-          ? "快速"
-          : "极速"
-
-  return (
-    <Drawer
-      title="⚡ 片段调速"
-      placement="right"
-      width={380}
-      styles={{ wrapper: { maxWidth: "100vw" } }}
-      open={open}
-      onClose={onClose}
-      className="speed-panel-drawer"
-    >
-      {/* ── 速度滑块 ── */}
-      <div className="sp-speed-section">
-        <div className="sp-speed-header">
-          <span className="sp-speed-label">播放速度</span>
-          <span className="sp-speed-value">{config.rate.toFixed(2)}x</span>
-        </div>
-        <Slider
-          min={0.25}
-          max={4.0}
-          step={0.05}
-          value={config.rate}
-          onChange={handleChangeRate}
-          tooltip={{ formatter: (v) => `${(v as number).toFixed(2)}x` }}
-        />
-        <div className="sp-speed-marks">
-          <span>0.25x</span>
-          <span>1x</span>
-          <span>2x</span>
-          <span>4x</span>
-        </div>
-        <div className="sp-speed-desc">{speedLabel}</div>
-      </div>
-
-      {/* ── 预设快捷按钮 ── */}
-      <div className="sp-presets">
-        <div className="sp-presets-label">快捷预设</div>
-        <div className="sp-presets-row">
-          {SPEED_PRESETS.map((p) => (
-            <button
-              key={p.rate}
-              className={`sp-preset-btn${Math.abs(config.rate - p.rate) < 0.01 ? " active" : ""}`}
-              onClick={() => handlePreset(p.rate)}
-            >
-              {p.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* ── 音调修正开关 ── */}
-      <div className="sp-pitch-section">
-        <div className="sp-pitch-info">
-          <span className="sp-pitch-label">音调修正</span>
-          <span className="sp-pitch-desc">
-            {config.pitchCorrection ? "变速不变调（推荐）" : "变速同时变调"}
-          </span>
-        </div>
-        <div
-          className={`ep-toggle${config.pitchCorrection ? " active" : ""}`}
-          onClick={handleTogglePitch}
-        >
-          <div className="ep-toggle-knob" />
-        </div>
-      </div>
-
-      {/* ── 底部操作 ── */}
-      <div className="sp-footer">
-        <button className="sp-reset-btn" onClick={handleReset}>
-          重置原速
-        </button>
-        {onApplyAll && (
-          <button className="sp-apply-all-btn" onClick={handleApplyAll}>
-            应用到所有片段
-          </button>
-        )}
-      </div>
-    </Drawer>
-  )
-}
-
-export default SpeedPanel

apps/web/src/pages/editing-planner/components/StatusBar.tsx

@@ -1,32 +0,0 @@
-import React from "react"
-
-interface StatusBarProps {
-  clipsCount: number
-  totalDuration: number
-  currentModeLabel: string
-  templateSegments: number
-}
-
-const StatusBar: React.FC<StatusBarProps> = ({
-  clipsCount,
-  totalDuration,
-  currentModeLabel,
-  templateSegments,
-}) => {
-  return (
-    <div className="ep-status-bar">
-      <div className="ep-status-left">
-        <span>📋 片段: {clipsCount}</span>
-        <span className="ep-status-sep">|</span>
-        <span>⏱️ 总时长: {totalDuration.toFixed(1)}s</span>
-      </div>
-      <div className="ep-status-right">
-        <span>🎬 {currentModeLabel}</span>
-        <span className="ep-status-sep">|</span>
-        <span>📐 模板片段: {templateSegments}</span>
-      </div>
-    </div>
-  )
-}
-
-export default StatusBar

apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerList.tsx

@@ -1,57 +0,0 @@
-import React from "react"
-import type { StickerItem } from "../../../types"
-
-export interface StickerListProps {
-  items: StickerItem[]
-  selectedId: string | null
-  onSelect: (id: string) => void
-  onRemove: (id: string) => void
-}
-
-export const StickerList: React.FC<StickerListProps> = ({
-  items,
-  selectedId,
-  onSelect,
-  onRemove,
-}) => {
-  if (items.length === 0) return null
-
-  const getStickerDisplay = (item: StickerItem) => {
-    if (item.type === "emoji") return item.content
-    if (item.type === "text") return item.content.slice(0, 10)
-    return "🖼"
-  }
-
-  const getStickerName = (item: StickerItem) => {
-    if (item.type === "text") return item.content.slice(0, 10)
-    if (item.type === "emoji") return "表情贴纸"
-    return "图片贴纸"
-  }
-
-  return (
-    <div className="sticker-list-section">
-      <div className="sticker-section-title">已添加贴纸 ({items.length})</div>
-      <div className="sticker-list">
-        {items.map((item) => (
-          <div
-            key={item.id}
-            className={`sticker-list-item${selectedId === item.id ? " active" : ""}`}
-            onClick={() => onSelect(item.id)}
-          >
-            <span className="sticker-list-icon">{getStickerDisplay(item)}</span>
-            <span className="sticker-list-name">{getStickerName(item)}</span>
-            <button
-              className="sticker-list-delete"
-              onClick={(e) => {
-                e.stopPropagation()
-                onRemove(item.id)
-              }}
-            >
-              ✕
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerPropsEditor.tsx

@@ -1,203 +0,0 @@
-import React from "react"
-import type { StickerItem, TextStickerPreset } from "../../../types"
-import { TEXT_STICKER_PRESET_LABELS } from "../../../types"
-import { TEXT_PRESET_STYLES } from "../constants"
-
-export interface StickerPropsEditorProps {
-  sticker: StickerItem
-  totalDuration: number
-  onChange: (id: string, partial: Partial<StickerItem>) => void
-}
-
-export const StickerPropsEditor: React.FC<StickerPropsEditorProps> = ({
-  sticker,
-  totalDuration,
-  onChange,
-}) => {
-  const update = (partial: Partial<StickerItem>) => {
-    onChange(sticker.id, partial)
-  }
-
-  return (
-    <div className="sticker-props-section">
-      <div className="sticker-section-title">属性调整</div>
-
-      {/* 位置 X */}
-      <div className="sticker-prop-row">
-        <span className="sticker-prop-label">位置 X</span>
-        <input
-          type="range"
-          className="sticker-prop-slider"
-          min={0}
-          max={100}
-          value={sticker.x}
-          onChange={(e) => update({ x: Number(e.target.value) })}
-        />
-        <span className="sticker-prop-value">{sticker.x}%</span>
-      </div>
-
-      {/* 位置 Y */}
-      <div className="sticker-prop-row">
-        <span className="sticker-prop-label">位置 Y</span>
-        <input
-          type="range"
-          className="sticker-prop-slider"
-          min={0}
-          max={100}
-          value={sticker.y}
-          onChange={(e) => update({ y: Number(e.target.value) })}
-        />
-        <span className="sticker-prop-value">{sticker.y}%</span>
-      </div>
-
-      {/* 尺寸 */}
-      <div className="sticker-prop-row">
-        <span className="sticker-prop-label">大小</span>
-        <input
-          type="range"
-          className="sticker-prop-slider"
-          min={5}
-          max={50}
-          value={sticker.width}
-          onChange={(e) =>
-            update({
-              width: Number(e.target.value),
-              height: Number(e.target.value),
-            })
-          }
-        />
-        <span className="sticker-prop-value">{sticker.width}%</span>
-      </div>
-
-      {/* 旋转 */}
-      <div className="sticker-prop-row">
-        <span className="sticker-prop-label">旋转</span>
-        <input
-          type="range"
-          className="sticker-prop-slider"
-          min={-180}
-          max={180}
-          value={sticker.rotation}
-          onChange={(e) => update({ rotation: Number(e.target.value) })}
-        />
-        <span className="sticker-prop-value">{sticker.rotation}°</span>
-      </div>
-
-      {/* 透明度 */}
-      <div className="sticker-prop-row">
-        <span className="sticker-prop-label">透明度</span>
-        <input
-          type="range"
-          className="sticker-prop-slider"
-          min={0}
-          max={100}
-          value={sticker.opacity}
-          onChange={(e) => update({ opacity: Number(e.target.value) })}
-        />
-        <span className="sticker-prop-value">{sticker.opacity}%</span>
-      </div>
-
-      {/* 时间 */}
-      <div className="sticker-prop-row">
-        <span className="sticker-prop-label">开始</span>
-        <input
-          type="number"
-          className="sticker-prop-number"
-          min={0}
-          max={totalDuration}
-          step={0.1}
-          value={sticker.start_time}
-          onChange={(e) => {
-            const val = Number(e.target.value)
-            if (!isNaN(val) && val >= 0 && val <= totalDuration) update({ start_time: val })
-          }}
-        />
-        <span className="sticker-prop-label">时长</span>
-        <input
-          type="number"
-          className="sticker-prop-number"
-          min={0}
-          max={totalDuration}
-          step={0.1}
-          value={sticker.duration}
-          onChange={(e) => {
-            const val = Number(e.target.value)
-            if (!isNaN(val) && val > 0 && val <= totalDuration) update({ duration: val })
-          }}
-        />
-      </div>
-
-      {/* 文字贴纸特有属性 */}
-      {sticker.type === "text" && (
-        <>
-          <div className="sticker-prop-row">
-            <span className="sticker-prop-label">花字</span>
-            <select
-              className="sticker-prop-select"
-              value={sticker.text_preset}
-              onChange={(e) => update({ text_preset: e.target.value as TextStickerPreset })}
-            >
-              {(Object.keys(TEXT_STICKER_PRESET_LABELS) as TextStickerPreset[]).map((p) => (
-                <option key={p} value={p}>
-                  {TEXT_STICKER_PRESET_LABELS[p]}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="sticker-prop-row">
-            <span className="sticker-prop-label">字号</span>
-            <input
-              type="range"
-              className="sticker-prop-slider"
-              min={12}
-              max={72}
-              value={sticker.font_size}
-              onChange={(e) => update({ font_size: Number(e.target.value) })}
-            />
-            <span className="sticker-prop-value">{sticker.font_size}px</span>
-          </div>
-          <div className="sticker-prop-row">
-            <span className="sticker-prop-label">颜色</span>
-            <input
-              type="color"
-              className="sticker-prop-color"
-              value={sticker.text_color}
-              onChange={(e) => update({ text_color: e.target.value })}
-            />
-          </div>
-        </>
-      )}
-
-      {/* 预览 */}
-      <div className="sticker-preview-box">
-        <div
-          className="sticker-preview-item"
-          style={{
-            left: `${sticker.x}%`,
-            top: `${sticker.y}%`,
-            width: `${sticker.width}%`,
-            height: `${sticker.width}%`,
-            transform: `translate(-50%, -50%) rotate(${sticker.rotation}deg)`,
-            opacity: sticker.opacity / 100,
-            fontSize: sticker.type === "text" ? `${sticker.font_size}px` : undefined,
-            ...TEXT_PRESET_STYLES[sticker.text_preset],
-          }}
-        >
-          {sticker.type === "emoji" && sticker.content}
-          {sticker.type === "text" && sticker.content}
-          {sticker.type === "image" && (
-            <img
-              src={sticker.content}
-              alt="sticker"
-              style={{
-                width: "100%",
-                height: "100%",
-                objectFit: "contain",
-              }}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/StickerPanel/components/StickerTabs.tsx

@@ -1,136 +0,0 @@
-import React, { useState } from "react"
-import type { StickerType, TextStickerPreset } from "../../../types"
-import { TEXT_STICKER_PRESET_LABELS } from "../../../types"
-import { EMOJI_LIST, TEXT_PRESET_STYLES } from "../constants"
-
-export interface StickerTabsProps {
-  activeTab: StickerType
-  onTabChange: (tab: StickerType) => void
-  textInput: string
-  onTextInputChange: (val: string) => void
-  onAddEmoji: (emoji: string) => void
-  onAddImage: (url: string) => void
-  onAddText: (text: string) => void
-}
-
-export const StickerTabs: React.FC<StickerTabsProps> = ({
-  activeTab,
-  onTabChange,
-  textInput,
-  onTextInputChange,
-  onAddEmoji,
-  onAddImage,
-  onAddText,
-}) => {
-  const [imageUrl, setImageUrl] = useState("")
-
-  const handleImageAdd = () => {
-    if (imageUrl.trim()) {
-      onAddImage(imageUrl.trim())
-      setImageUrl("")
-    }
-  }
-
-  const handleTextAdd = () => {
-    if (textInput.trim()) {
-      onAddText(textInput.trim())
-    }
-  }
-
-  return (
-    <>
-      {/* 类型 Tab */}
-      <div className="sticker-tabs">
-        {(["emoji", "image", "text"] as StickerType[]).map((t) => (
-          <button
-            key={t}
-            className={`sticker-tab${activeTab === t ? " active" : ""}`}
-            onClick={() => onTabChange(t)}
-          >
-            {t === "emoji" ? "表情贴纸" : t === "image" ? "图片贴纸" : "文字花字"}
-          </button>
-        ))}
-      </div>
-
-      {/* Tab 内容区 */}
-      <div className="sticker-tab-content">
-        {/* Emoji 素材库 */}
-        {activeTab === "emoji" && (
-          <div className="sticker-emoji-grid">
-            {EMOJI_LIST.map((emoji) => (
-              <button key={emoji} className="sticker-emoji-btn" onClick={() => onAddEmoji(emoji)}>
-                {emoji}
-              </button>
-            ))}
-          </div>
-        )}
-
-        {/* 图片贴纸 */}
-        {activeTab === "image" && (
-          <div className="sticker-image-input">
-            <input
-              type="text"
-              className="sticker-url-input"
-              placeholder="输入图片 URL 添加贴纸..."
-              value={imageUrl}
-              onChange={(e) => setImageUrl(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && imageUrl.trim()) {
-                  onAddImage(imageUrl.trim())
-                  setImageUrl("")
-                }
-              }}
-            />
-            <button className="sticker-url-add-btn" onClick={handleImageAdd}>
-              添加
-            </button>
-          </div>
-        )}
-
-        {/* 文字花字 */}
-        {activeTab === "text" && (
-          <div className="sticker-text-section">
-            <div className="sticker-text-input-row">
-              <input
-                type="text"
-                className="sticker-text-input"
-                placeholder="输入文字内容..."
-                value={textInput}
-                onChange={(e) => onTextInputChange(e.target.value)}
-              />
-              <button
-                className="sticker-text-add-btn"
-                disabled={!textInput.trim()}
-                onClick={handleTextAdd}
-              >
-                添加
-              </button>
-            </div>
-            <div className="sticker-text-presets">
-              <div className="sticker-preset-title">花字预设预览</div>
-              <div className="sticker-preset-grid">
-                {(Object.keys(TEXT_STICKER_PRESET_LABELS) as TextStickerPreset[]).map((p) => (
-                  <div
-                    key={p}
-                    className="sticker-preset-preview"
-                    style={{
-                      background:
-                        p === "bubble"
-                          ? "rgba(0,0,0,0.5)"
-                          : p === "gradient"
-                            ? "linear-gradient(90deg,#f093fb,#f5576c)"
-                            : "#1a1a2e",
-                    }}
-                  >
-                    <span style={TEXT_PRESET_STYLES[p]}>示例</span>
-                    <div className="sticker-preset-name">{TEXT_STICKER_PRESET_LABELS[p]}</div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </>
-  )
-}

apps/web/src/pages/editing-planner/components/StickerPanel/constants.ts

@@ -1,54 +0,0 @@
-import type { CSSProperties } from "react"
-import type { TextStickerPreset } from "../../types"
-
-/** 常用 emoji 素材 */
-export const EMOJI_LIST = [
-  "😀",
-  "😂",
-  "🥰",
-  "😎",
-  "🤩",
-  "😱",
-  "🤔",
-  "😴",
-  "🥳",
-  "😍",
-  "❤️",
-  "🔥",
-  "⭐",
-  "✨",
-  "💯",
-  "👍",
-  "👏",
-  "🎉",
-  "🎵",
-  "💪",
-  "📌",
-  "💡",
-  "🎯",
-  "✅",
-  "❌",
-  "⬆️",
-  "⬇️",
-  "➡️",
-  "⭕",
-  "🔔",
-]
-
-/** 文字花字预设对应的 CSS 样式预览 */
-export const TEXT_PRESET_STYLES: Record<TextStickerPreset, CSSProperties> = {
-  normal: { color: "#fff", textShadow: "none" },
-  highlight: { color: "#FFD700", textShadow: "0 0 8px rgba(255,215,0,0.6)" },
-  bubble: { color: "#fff", background: "rgba(0,0,0,0.5)", borderRadius: 8 },
-  neon: { color: "#0ff", textShadow: "0 0 6px #0ff, 0 0 12px #0ff" },
-  shadow: { color: "#fff", textShadow: "2px 2px 4px rgba(0,0,0,0.8)" },
-  outline: { color: "#fff", WebkitTextStroke: "1px #000" },
-  gradient: {
-    color: "transparent",
-    background: "linear-gradient(90deg,#f093fb,#f5576c)",
-    WebkitBackgroundClip: "text",
-  },
-  handwrite: { color: "#333", fontStyle: "italic", fontFamily: "cursive" },
-}
-
-export const genStickerId = () => `sticker_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`

apps/web/src/pages/editing-planner/components/StickerPanel/hooks/useStickerPanel.ts

@@ -1,85 +0,0 @@
-import { useState, useCallback, useMemo } from "react"
-import type { StickerConfig, StickerItem, StickerType } from "../../../types"
-import { DEFAULT_STICKER_CONFIG, DEFAULT_STICKER_ITEM } from "../../../types"
-import { genStickerId } from "../constants"
-
-interface UseStickerPanelOptions {
-  config: StickerConfig
-  onChange: (config: StickerConfig) => void
-  totalDuration: number
-}
-
-export const useStickerPanel = ({ config, onChange, totalDuration }: UseStickerPanelOptions) => {
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const [activeTab, setActiveTab] = useState<StickerType>("emoji")
-  const [textInput, setTextInput] = useState("")
-
-  const selectedSticker = useMemo(
-    () => config.items.find((s) => s.id === selectedId) ?? null,
-    [config.items, selectedId],
-  )
-
-  /** 更新单个贴纸 */
-  const updateItem = useCallback(
-    (id: string, partial: Partial<StickerItem>) => {
-      onChange({
-        ...config,
-        items: config.items.map((s) => (s.id === id ? { ...s, ...partial } : s)),
-      })
-    },
-    [config, onChange],
-  )
-
-  /** 添加贴纸 */
-  const addSticker = useCallback(
-    (type: StickerType, content: string) => {
-      const newItem: StickerItem = {
-        ...DEFAULT_STICKER_ITEM,
-        id: genStickerId(),
-        type,
-        content,
-        duration: totalDuration > 0 ? totalDuration : 5,
-        z_index: config.items.length > 0 ? Math.max(...config.items.map((i) => i.z_index)) + 1 : 1,
-      }
-      onChange({
-        ...config,
-        enabled: true,
-        items: [...config.items, newItem],
-      })
-      setSelectedId(newItem.id)
-    },
-    [config, onChange, totalDuration],
-  )
-
-  /** 删除贴纸 */
-  const removeSticker = useCallback(
-    (id: string) => {
-      onChange({
-        ...config,
-        items: config.items.filter((s) => s.id !== id),
-      })
-      if (selectedId === id) setSelectedId(null)
-    },
-    [config, onChange, selectedId],
-  )
-
-  /** 重置所有 */
-  const handleReset = useCallback(() => {
-    onChange({ ...DEFAULT_STICKER_CONFIG, enabled: config.enabled })
-    setSelectedId(null)
-  }, [config.enabled, onChange])
-
-  return {
-    selectedId,
-    setSelectedId,
-    selectedSticker,
-    activeTab,
-    setActiveTab,
-    textInput,
-    setTextInput,
-    updateItem,
-    addSticker,
-    removeSticker,
-    handleReset,
-  }
-}

apps/web/src/pages/editing-planner/components/StickerPanel/index.tsx

@@ -1,101 +0,0 @@
-import React from "react"
-import { Drawer, Switch } from "antd"
-import type { StickerConfig } from "../../types"
-
-import { useStickerPanel } from "./hooks/useStickerPanel"
-import { StickerTabs } from "./components/StickerTabs"
-import { StickerList } from "./components/StickerList"
-import { StickerPropsEditor } from "./components/StickerPropsEditor"
-
-export interface StickerPanelProps {
-  open: boolean
-  onClose: () => void
-  config: StickerConfig
-  onChange: (config: StickerConfig) => void
-  totalDuration: number
-}
-
-const StickerPanel: React.FC<StickerPanelProps> = ({
-  open,
-  onClose,
-  config,
-  onChange,
-  totalDuration,
-}) => {
-  const {
-    selectedId,
-    setSelectedId,
-    selectedSticker,
-    activeTab,
-    setActiveTab,
-    textInput,
-    setTextInput,
-    updateItem,
-    addSticker,
-    removeSticker,
-  } = useStickerPanel({ config, onChange, totalDuration })
-
-  const handleEmojiAdd = (emoji: string) => {
-    addSticker("emoji", emoji)
-  }
-
-  const handleImageAdd = (url: string) => {
-    addSticker("image", url)
-  }
-
-  const handleTextAdd = (text: string) => {
-    addSticker("text", text)
-    setTextInput("")
-  }
-
-  return (
-    <Drawer
-      title="贴纸"
-      placement="right"
-      width={460}
-      open={open}
-      onClose={onClose}
-      className="sticker-panel-drawer"
-    >
-      {/* 顶部开关 */}
-      <div className="sticker-header">
-        <span className="sticker-header-label">启用贴纸</span>
-        <Switch
-          size="small"
-          checked={config.enabled}
-          onChange={(checked) => onChange({ ...config, enabled: checked })}
-        />
-      </div>
-
-      {/* Tab 选择器 + 内容 */}
-      <StickerTabs
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-        textInput={textInput}
-        onTextInputChange={setTextInput}
-        onAddEmoji={handleEmojiAdd}
-        onAddImage={handleImageAdd}
-        onAddText={handleTextAdd}
-      />
-
-      {/* 已添加贴纸列表 */}
-      <StickerList
-        items={config.items}
-        selectedId={selectedId}
-        onSelect={setSelectedId}
-        onRemove={removeSticker}
-      />
-
-      {/* 选中贴纸的属性编辑 */}
-      {selectedSticker && (
-        <StickerPropsEditor
-          sticker={selectedSticker}
-          totalDuration={totalDuration}
-          onChange={updateItem}
-        />
-      )}
-    </Drawer>
-  )
-}
-
-export default StickerPanel

apps/web/src/pages/editing-planner/components/SubtitleStylePanel.tsx

@@ -1,147 +0,0 @@
-import React from "react"
-import { Drawer, Slider, ColorPicker, Select } from "antd"
-import type { Color } from "antd/es/color-picker"
-import type { SubtitleStyleConfig } from "@/pages/editing-planner/types/subtitle"
-import {
-  FONT_OPTIONS,
-  ANIMATION_OPTIONS,
-  ASR_LANGUAGE_OPTIONS,
-} from "@/pages/editing-planner/constants/subtitleStyle"
-import SubtitlePreview from "./subtitle-style/SubtitlePreview"
-import { SubtitleModeSwitch } from "./subtitle-style/SubtitleModeSwitch"
-import { SubtitlePositionSelector } from "./subtitle-style/SubtitlePositionSelector"
-import { SubtitleEffectButtons } from "./subtitle-style/SubtitleEffectButtons"
-
-interface SubtitleStylePanelProps {
-  open: boolean
-  onClose: () => void
-  config: SubtitleStyleConfig
-  onChange: (config: SubtitleStyleConfig) => void
-}
-
-const SubtitleStylePanel: React.FC<SubtitleStylePanelProps> = ({
-  open,
-  onClose,
-  config,
-  onChange,
-}) => {
-  const update = (partial: Partial<SubtitleStyleConfig>) => {
-    onChange({ ...config, ...partial })
-  }
-
-  return (
-    <Drawer
-      title="💬 字幕样式配置"
-      placement="right"
-      width={380}
-      styles={{ wrapper: { maxWidth: "100vw" } }}
-      open={open}
-      onClose={onClose}
-      className="subtitle-style-drawer"
-    >
-      <div className="sub-field">
-        <div className="sub-toggle-row">
-          <span className="sub-label">启用字幕</span>
-          <div
-            className={`ep-toggle${config.enabled ? " active" : ""}`}
-            onClick={() => update({ enabled: !config.enabled })}
-          >
-            <div className="ep-toggle-knob" />
-          </div>
-        </div>
-      </div>
-
-      {config.enabled && (
-        <>
-          <div className="sub-field">
-            <label className="sub-label">字幕来源</label>
-            <SubtitleModeSwitch mode={config.mode} onModeChange={(mode) => update({ mode })} />
-          </div>
-
-          {config.mode === "asr" && (
-            <div className="sub-field">
-              <label className="sub-label">识别语言</label>
-              <Select
-                className="sub-select"
-                value={config.asrLanguage}
-                onChange={(v) => update({ asrLanguage: v })}
-                options={ASR_LANGUAGE_OPTIONS}
-                popupMatchSelectWidth={false}
-              />
-            </div>
-          )}
-
-          <div className="sub-field">
-            <label className="sub-label">
-              字体大小 <span className="sub-value">{config.fontSize}px</span>
-            </label>
-            <Slider
-              min={12}
-              max={48}
-              value={config.fontSize}
-              onChange={(v) => update({ fontSize: v })}
-            />
-          </div>
-
-          <div className="sub-field">
-            <label className="sub-label">字体颜色</label>
-            <div className="sub-color-row">
-              <ColorPicker
-                value={config.fontColor}
-                onChange={(_color: Color, hex: string) => update({ fontColor: hex })}
-                showText
-              />
-            </div>
-          </div>
-
-          <div className="sub-field">
-            <label className="sub-label">字体</label>
-            <Select
-              className="sub-select"
-              value={config.font}
-              onChange={(v) => update({ font: v })}
-              options={FONT_OPTIONS.map((f) => ({ value: f, label: f }))}
-              popupMatchSelectWidth={false}
-            />
-          </div>
-
-          <div className="sub-field">
-            <label className="sub-label">位置</label>
-            <SubtitlePositionSelector
-              position={config.position}
-              onPositionChange={(position) => update({ position })}
-            />
-          </div>
-
-          <div className="sub-field">
-            <label className="sub-label">效果</label>
-            <SubtitleEffectButtons
-              stroke={config.stroke}
-              shadow={config.shadow}
-              onStrokeChange={(stroke) => update({ stroke })}
-              onShadowChange={(shadow) => update({ shadow })}
-            />
-          </div>
-
-          <div className="sub-field">
-            <label className="sub-label">动画效果</label>
-            <Select
-              className="sub-select"
-              value={config.animation}
-              onChange={(v) => update({ animation: v })}
-              options={ANIMATION_OPTIONS.map((o) => ({
-                value: o.value,
-                label: o.label,
-              }))}
-              popupMatchSelectWidth={false}
-            />
-          </div>
-
-          <SubtitlePreview config={config} />
-        </>
-      )}
-    </Drawer>
-  )
-}
-
-export default SubtitleStylePanel

apps/web/src/pages/editing-planner/components/TimelinePanel.tsx

@@ -1,200 +0,0 @@
-/**
- * 水平轨道时间线 — 支持裁剪手柄、分割、右键菜单
- * 时间标尺 + 片段轨道 + HTML5拖拽排序
- *
- * 子组件（timeline/）：
- * - TimeRuler - 时间标尺
- * - ClipCard - 片段卡片
- * - ClipTrack - 片段轨道（播放头+片段列表+添加卡片）
- * - TimelineHeader - 时间线头部（标题+缩放+操作按钮）
- * - TrimPreview - 裁剪预览 tooltip
- * - ContextMenu - 右键菜单
- *
- * Hooks：
- * - useClipDrag - 片段拖拽排序
- * - useTrimDrag - 裁剪拖拽
- * - useTimelineMenus - 菜单 & 面板
- * - usePlayheadDrag - 播放头拖拽
- */
-import React from "react"
-import type { ClipData, ClipType, TrimConfig } from "../types"
-import { DEFAULT_PIXELS_PER_SECOND } from "../constants/timeline"
-import { useClipDrag } from "../hooks/useClipDrag"
-import { useTrimDrag } from "../hooks/useTrimDrag"
-import { useTimelineMenus } from "../hooks/useTimelineMenus"
-import { usePlayheadDrag } from "./timeline/hooks/usePlayheadDrag"
-import { TimeRuler } from "./timeline/TimeRuler"
-import { ClipTrack } from "./timeline/ClipTrack"
-import { TimelineHeader } from "./timeline/TimelineHeader"
-import { TrimPreview } from "./timeline/TrimPreview"
-import { ContextMenu } from "./timeline/ContextMenu"
-
-interface TimelinePanelProps {
-  clips: ClipData[]
-  selectedClipId: string | null
-  currentMode: string
-  onClipSelect: (clipId: string) => void
-  onClipReorder: (fromIdx: number, toIdx: number) => void
-  onClipRemove: (clipId: string) => void
-  onAddClip: (type: ClipType, duration: number) => void
-  /** 裁剪更新：调整片段的 trim_config 和 duration */
-  onClipTrim?: (clipId: string, trimConfig: TrimConfig, newDuration: number) => void
-  /** 在指定位置分割片段 */
-  onClipSplit?: (clipId: string, splitRatio: number) => void
-  /** 恢复片段原始长度 */
-  onClipResetTrim?: (clipId: string) => void
-  /** 当前播放时间（秒） */
-  currentTime?: number
-  /** 缩放：每秒像素数 */
-  pixelsPerSecond?: number
-  /** 缩放变更回调 */
-  onZoomChange?: (pps: number) => void
-  /** 播放头跳转回调 */
-  onSeek?: (time: number) => void
-  /** 总时长（秒），可选（默认由 clips 计算） */
-  totalDuration?: number
-}
-
-const TimelinePanel: React.FC<TimelinePanelProps> = ({
-  clips,
-  selectedClipId,
-  currentMode,
-  onClipSelect,
-  onClipReorder,
-  onClipRemove,
-  onAddClip,
-  onClipTrim,
-  onClipSplit,
-  onClipResetTrim,
-  currentTime = 0,
-  pixelsPerSecond = 40,
-  onZoomChange,
-  onSeek,
-  totalDuration: totalDurationProp,
-}) => {
-  /* ── 缩放 & 时长 ── */
-  const pps = pixelsPerSecond ?? DEFAULT_PIXELS_PER_SECOND
-  const totalDuration = totalDurationProp ?? clips.reduce((s, c) => s + c.duration, 0)
-
-  /* ── 裁剪拖拽 ── */
-  const { trimDrag, trimPreview, handleTrimHandleMouseDown } = useTrimDrag(clips, pps, onClipTrim)
-
-  /* ── 片段拖拽排序 ── */
-  const {
-    dragIdx,
-    dragOverIdx,
-    handleDragStart,
-    handleDragOver,
-    handleDragEnd,
-    handleDrop,
-    handleEmptyDragOver,
-  } = useClipDrag(onClipReorder, !!trimDrag)
-
-  /* ── 菜单 & 面板 ── */
-  const {
-    contextMenu,
-    contextMenuRef,
-    handleContextMenu,
-    handleContextSplit,
-    handleContextResetTrim,
-    handleContextDelete,
-    addCardRef,
-    handleConfirmAdd,
-    hoveredClipId,
-    setHoveredClipId,
-  } = useTimelineMenus(clips, currentMode, onAddClip, onClipSplit, onClipResetTrim, onClipRemove)
-
-  /* ── 播放头拖拽 ── */
-  const { trackRef, handlePlayheadMouseDown, handleRulerClick } = usePlayheadDrag({
-    currentTime,
-    pps,
-    totalDuration,
-    onSeek,
-  })
-
-  /* ── 撤销最后一个片段 ── */
-  const handleUndoClip = () => {
-    if (clips.length > 1) {
-      const last = clips[clips.length - 1]
-      onClipRemove(last.id)
-    }
-  }
-
-  return (
-    <div className="ep-timeline-area">
-      {/* 时间线头部 */}
-      <TimelineHeader
-        totalDuration={totalDuration}
-        pps={pps}
-        onZoomChange={onZoomChange}
-        onUndoClip={handleUndoClip}
-        clipsCount={clips.length}
-      />
-
-      {/* 一镜到底提示 */}
-      {currentMode === "one_take" && <div className="ep-one-take-hint">🎥 一镜到底模式无片段</div>}
-
-      {/* 时间标尺 */}
-      {currentMode !== "one_take" && (
-        <TimeRuler totalDuration={totalDuration} pps={pps} onClick={handleRulerClick} />
-      )}
-
-      {/* 水平片段轨道 */}
-      {currentMode !== "one_take" && (
-        <ClipTrack
-          clips={clips}
-          selectedClipId={selectedClipId}
-          pps={pps}
-          currentTime={currentTime}
-          totalDuration={totalDuration}
-          dragIdx={dragIdx}
-          dragOverIdx={dragOverIdx}
-          hoveredClipId={hoveredClipId}
-          trimDragActive={!!trimDrag}
-          showTrimHandles={!!onClipTrim}
-          trackRef={trackRef}
-          addCardRef={addCardRef}
-          onPlayheadMouseDown={handlePlayheadMouseDown}
-          onClipSelect={onClipSelect}
-          onDragStart={handleDragStart}
-          onDragOver={handleDragOver}
-          onDragEnd={handleDragEnd}
-          onDrop={handleDrop}
-          onEmptyDragOver={handleEmptyDragOver}
-          onContextMenu={handleContextMenu}
-          onClipMouseEnter={setHoveredClipId}
-          onClipMouseLeave={() => setHoveredClipId(null)}
-          onTrimHandleMouseDown={handleTrimHandleMouseDown}
-          onClipRemove={onClipRemove}
-          onTogglePicker={handleConfirmAdd}
-        />
-      )}
-
-      {/* 裁剪预览 tooltip */}
-      {trimPreview && (
-        <TrimPreview
-          startTime={trimPreview.startTime}
-          endTime={trimPreview.endTime}
-          duration={trimPreview.duration}
-          x={trimPreview.x}
-          y={trimPreview.y}
-        />
-      )}
-
-      {/* 右键菜单 */}
-      {contextMenu && (
-        <ContextMenu
-          x={contextMenu.x}
-          y={contextMenu.y}
-          menuRef={contextMenuRef}
-          hasTrim={!!clips.find((c) => c.id === contextMenu.clipId)?.trim_config}
-          onSplit={handleContextSplit}
-          onResetTrim={handleContextResetTrim}
-          onDelete={handleContextDelete}
-        />
-      )}
-    </div>
-  )
-}
-
-export default TimelinePanel

apps/web/src/pages/editing-planner/components/TopBar.tsx

@@ -1,54 +0,0 @@
-import React from "react"
-import type { EditingTemplate } from "@/api/editing-planner"
-
-interface TopBarProps {
-  currentTemplate: EditingTemplate | null
-  canUndo: boolean
-  canRedo: boolean
-  onUndo: () => void
-  onRedo: () => void
-  onOpenSaveModal: () => void
-}
-
-const TopBar: React.FC<TopBarProps> = ({
-  currentTemplate,
-  canUndo,
-  canRedo,
-  onUndo,
-  onRedo,
-  onOpenSaveModal,
-}) => {
-  return (
-    <div className="ep-top-bar">
-      <div className="ep-top-bar-left">
-        <span className="ep-logo">✂️</span>
-        <span className="ep-app-title">模板制作</span>
-        <span className="ep-divider">|</span>
-        <span className="ep-template-name">{currentTemplate?.name || "未选择模板"}</span>
-      </div>
-      <div className="ep-top-bar-right">
-        <button
-          className="ep-btn ep-btn-secondary"
-          onClick={onUndo}
-          disabled={!canUndo}
-          title="撤销 (Ctrl+Z)"
-        >
-          ⬅️ 撤销
-        </button>
-        <button
-          className="ep-btn ep-btn-secondary"
-          onClick={onRedo}
-          disabled={!canRedo}
-          title="重做 (Ctrl+Shift+Z)"
-        >
-          ➡️ 重做
-        </button>
-        <button className="ep-btn ep-btn-secondary" onClick={onOpenSaveModal}>
-          💾 保存模板
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default TopBar

apps/web/src/pages/editing-planner/components/TransitionSelector.tsx

@@ -1,116 +0,0 @@
-/**
- * 转场特效选择器 — Drawer 形式
- * 14 种转场预设卡片网格 + 转场时长滑块
- * 支持全局默认转场 + 单个片段间独立设置
- */
-import React, { useCallback } from "react"
-import { Drawer, Slider } from "antd"
-import { TRANSITION_OPTIONS } from "@/api/template-editor"
-import type { TransitionConfig, TransitionType } from "../types"
-import { DEFAULT_TRANSITION } from "../types"
-
-/* ──────────── Props ──────────── */
-interface TransitionSelectorProps {
-  open: boolean
-  onClose: () => void
-  /** 当前转场配置 */
-  config: TransitionConfig
-  onChange: (config: TransitionConfig) => void
-  /** 标题提示（区分全局 / 片段间） */
-  title?: string
-}
-
-const TransitionSelector: React.FC<TransitionSelectorProps> = ({
-  open,
-  onClose,
-  config,
-  onChange,
-  title = "转场特效",
-}) => {
-  /* ── 选择转场类型 ── */
-  const handleSelectType = useCallback(
-    (type: TransitionType) => {
-      onChange({ ...config, type })
-    },
-    [config, onChange],
-  )
-
-  /* ── 修改时长 ── */
-  const handleChangeDuration = useCallback(
-    (duration: number) => {
-      onChange({ ...config, duration })
-    },
-    [config, onChange],
-  )
-
-  /* ── 重置为无转场 ── */
-  const handleReset = useCallback(() => {
-    onChange({ ...DEFAULT_TRANSITION })
-  }, [onChange])
-
-  return (
-    <Drawer
-      title={`🎬 ${title}`}
-      placement="right"
-      width={480}
-      styles={{ wrapper: { maxWidth: "100vw" } }}
-      open={open}
-      onClose={onClose}
-      className="transition-selector-drawer"
-    >
-      {/* ── 时长滑块 ── */}
-      <div className="ts-duration-section">
-        <div className="ts-duration-header">
-          <span className="ts-duration-label">转场时长</span>
-          <span className="ts-duration-value">{config.duration.toFixed(1)}s</span>
-        </div>
-        <Slider
-          min={0.3}
-          max={2.0}
-          step={0.1}
-          value={config.duration}
-          onChange={handleChangeDuration}
-          tooltip={{ formatter: (v) => `${(v as number).toFixed(1)}s` }}
-        />
-        <div className="ts-duration-marks">
-          <span>0.3s</span>
-          <span>1.0s</span>
-          <span>2.0s</span>
-        </div>
-      </div>
-
-      {/* ── 转场类型卡片网格 ── */}
-      <div className="ts-grid">
-        {TRANSITION_OPTIONS.map((opt) => {
-          const isActive = config.type === opt.value
-          return (
-            <div
-              key={opt.value}
-              className={`ts-card${isActive ? " active" : ""}`}
-              onClick={() => handleSelectType(opt.value)}
-            >
-              <div className="ts-card-icon">{opt.icon}</div>
-              <div className="ts-card-name">{opt.label}</div>
-              {isActive && <span className="ts-card-check">✓</span>}
-            </div>
-          )
-        })}
-      </div>
-
-      {/* ── 底部操作 ── */}
-      <div className="ts-footer">
-        <button className="ts-reset-btn" onClick={handleReset}>
-          重置为无转场
-        </button>
-        <div className="ts-current">
-          当前：
-          {TRANSITION_OPTIONS.find((o) => o.value === config.type)?.label ?? "无转场"}
-          {" · "}
-          {config.duration.toFixed(1)}s
-        </div>
-      </div>
-    </Drawer>
-  )
-}
-
-export default TransitionSelector

apps/web/src/pages/editing-planner/components/TtsPanel/components/TtsSlider.tsx

@@ -1,48 +0,0 @@
-import React from "react"
-import { Slider } from "antd"
-
-export interface TtsSliderProps {
-  label: string
-  value: number
-  min: number
-  max: number
-  step: number
-  onChange: (val: number) => void
-  formatter: (val: number) => string
-  marks?: string[]
-}
-
-export const TtsSlider: React.FC<TtsSliderProps> = ({
-  label,
-  value,
-  min,
-  max,
-  step,
-  onChange,
-  formatter,
-  marks,
-}) => {
-  return (
-    <div className="tts-slider-section">
-      <div className="tts-slider-header">
-        <span className="tts-slider-label">{label}</span>
-        <span className="tts-slider-value">{formatter(value)}</span>
-      </div>
-      <Slider
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        onChange={onChange}
-        tooltip={{ formatter: (v) => (v != null ? formatter(v as number) : "") }}
-      />
-      {marks && (
-        <div className="tts-slider-marks">
-          {marks.map((m, i) => (
-            <span key={i}>{m}</span>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/TtsPanel/components/VoiceSelector.tsx

@@ -1,107 +0,0 @@
-import React, { useState } from "react"
-import type { UnifiedVoiceItem } from "@/api/voices"
-import { LoadingOutlined } from "@ant-design/icons"
-
-export interface VoiceSelectorProps {
-  presetVoices: UnifiedVoiceItem[]
-  cloneVoices: UnifiedVoiceItem[]
-  selectedVoiceId: string
-  loading: boolean
-  playingVoiceId: string | null
-  loadingSampleVoiceId: string | null
-  onSelect: (voiceId: string) => void
-  onPlaySample: (voice: UnifiedVoiceItem) => void
-}
-
-type VoiceTab = "preset" | "clone"
-
-const GENDER_ICON: Record<string, string> = {
-  male: "👨",
-  female: "👩",
-  young: "🧑",
-}
-
-export const VoiceSelector: React.FC<VoiceSelectorProps> = ({
-  presetVoices,
-  cloneVoices,
-  selectedVoiceId,
-  loading,
-  playingVoiceId,
-  loadingSampleVoiceId,
-  onSelect,
-  onPlaySample,
-}) => {
-  const [activeTab, setActiveTab] = useState<VoiceTab>("preset")
-
-  const currentList = activeTab === "preset" ? presetVoices : cloneVoices
-
-  return (
-    <div className="tts-voice-section">
-      <div className="tts-voice-label">
-        选择音色
-        {loading && <span className="tts-voice-loading">加载中...</span>}
-      </div>
-
-      {/* Tab 切换 */}
-      <div className="tts-voice-tabs">
-        <button
-          className={`tts-voice-tab${activeTab === "preset" ? " active" : ""}`}
-          onClick={() => setActiveTab("preset")}
-        >
-          预设音色
-        </button>
-        <button
-          className={`tts-voice-tab${activeTab === "clone" ? " active" : ""}`}
-          onClick={() => setActiveTab("clone")}
-        >
-          我的克隆
-          {cloneVoices.length > 0 && (
-            <span className="tts-voice-tab-count">{cloneVoices.length}</span>
-          )}
-        </button>
-      </div>
-
-      {/* 音色列表 */}
-      {loading ? (
-        <div className="tts-voice-empty">⏳ 加载中...</div>
-      ) : currentList.length === 0 ? (
-        <div className="tts-voice-empty">
-          {activeTab === "preset" ? "暂无预设音色" : "暂无克隆音色，快去克隆一个吧"}
-        </div>
-      ) : (
-        <div className="tts-voice-list">
-          {currentList.map((voice) => {
-            const isSelected = selectedVoiceId === voice.voice_id
-            const isPlaying = playingVoiceId === voice.voice_id
-            const isLoadingSample = loadingSampleVoiceId === voice.voice_id
-            const icon = GENDER_ICON[voice.gender] ?? "✨"
-            return (
-              <div
-                key={voice.voice_id}
-                className={`tts-voice-item${isSelected ? " selected" : ""}`}
-                onClick={() => onSelect(voice.voice_id)}
-              >
-                <div className="tts-voice-item-icon">{icon}</div>
-                <div className="tts-voice-item-info">
-                  <div className="tts-voice-item-name">{voice.name}</div>
-                  <div className="tts-voice-item-desc">{voice.description || voice.language}</div>
-                </div>
-                <button
-                  className="tts-voice-item-play"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    onPlaySample(voice)
-                  }}
-                  disabled={isLoadingSample}
-                  title={isPlaying ? "暂停" : isLoadingSample ? "合成中" : "试听"}
-                >
-                  {isLoadingSample ? <LoadingOutlined /> : isPlaying ? "⏸" : "▶"}
-                </button>
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/TtsPanel/constants.ts

@@ -1,18 +0,0 @@
-import type { TtsMode } from "../../types"
-
-/** 音色卡片分类图标 */
-export const VOICE_CATEGORY_MAP: Record<string, { icon: string; label: string }> = {
-  male: { icon: "👨", label: "男声" },
-  female: { icon: "👩", label: "女声" },
-  young: { icon: "🧑", label: "少年" },
-  service: { icon: "🎧", label: "客服" },
-  news: { icon: "📰", label: "新闻" },
-  emotion: { icon: "🎭", label: "情感" },
-}
-
-/** 配音模式选项 */
-export const TTS_MODE_OPTIONS: { mode: TtsMode; icon: string; label: string }[] = [
-  { mode: "none", icon: "🔇", label: "无配音" },
-  { mode: "upload", icon: "📁", label: "上传配音" },
-  { mode: "tts", icon: "🤖", label: "TTS 合成" },
-]

apps/web/src/pages/editing-planner/components/TtsPanel/hooks/useTtsPanel.ts

@@ -1,271 +0,0 @@
-import { useState, useCallback, useEffect, useRef, type ChangeEvent } from "react"
-import { message } from "antd"
-import type { TtsConfig, TtsMode } from "../../../types"
-import { DEFAULT_TTS_CONFIG } from "../../../types"
-import { previewTts } from "@/api/tts"
-import { getVoiceClonePreview } from "@/api/voice-clone"
-import { fetchVoices, type UnifiedVoiceItem } from "@/api/voices"
-
-interface UseTtsPanelOptions {
-  open: boolean
-  config: TtsConfig
-  onChange: (config: TtsConfig) => void
-  onClose: () => void
-}
-
-export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOptions) => {
-  /* ── 音色列表（统一音色：预设 + 克隆） ── */
-  const [presetVoices, setPresetVoices] = useState<UnifiedVoiceItem[]>([])
-  const [cloneVoices, setCloneVoices] = useState<UnifiedVoiceItem[]>([])
-  const [voicesLoading, setVoicesLoading] = useState(false)
-
-  // 用 ref 保存最新 config 和 onChange，避免 useEffect 闭包陷阱
-  const configRef = useRef(config)
-  const onChangeRef = useRef(onChange)
-  configRef.current = config
-  onChangeRef.current = onChange
-
-  /* ── 试听状态 ── */
-  const [previewLoading, setPreviewLoading] = useState(false)
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-  const mountedRef = useRef(true)
-
-  /* ── 加载音色列表 + 重置挂载状态 ── */
-  useEffect(() => {
-    if (!open) return
-    mountedRef.current = true
-    let active = true
-    setVoicesLoading(true)
-    fetchVoices({ status: "ready", limit: 100 })
-      .then((res) => {
-        if (!active) return
-        const presets = res.items.filter((v) => v.type === "preset")
-        const clones = res.items.filter((v) => v.type === "clone")
-        setPresetVoices(presets)
-        setCloneVoices(clones)
-        // 如果当前没有选中音色，默认选第一个预设（用 ref 读最新值，避免闭包旧值覆盖用户选择）
-        if (!configRef.current.voice_id && presets.length > 0) {
-          onChangeRef.current({
-            ...configRef.current,
-            voice_id: presets[0].voice_id,
-          })
-        }
-      })
-      .catch(() => {
-        if (active) message.error("加载音色列表失败")
-      })
-      .finally(() => {
-        if (active) setVoicesLoading(false)
-      })
-    return () => {
-      active = false
-    }
-  }, [open])
-
-  /* ── 组件卸载时清理音频资源 ── */
-  useEffect(() => {
-    return () => {
-      audioRef.current?.pause()
-      audioRef.current = null
-      mountedRef.current = false
-    }
-  }, [])
-
-  /* ── 切换配音模式 ── */
-  const handleModeChange = useCallback(
-    (mode: TtsMode) => {
-      onChange({ ...config, mode })
-    },
-    [config, onChange],
-  )
-
-  /* ── 文本输入 ── */
-  const handleTextChange = useCallback(
-    (e: ChangeEvent<HTMLTextAreaElement>) => {
-      const text = e.target.value.slice(0, 5000)
-      onChange({ ...config, text })
-    },
-    [config, onChange],
-  )
-
-  /* ── 选择音色 ── */
-  const handleVoiceSelect = useCallback(
-    (voiceId: string) => {
-      onChange({ ...config, voice_id: voiceId })
-    },
-    [config, onChange],
-  )
-
-  /* ── 语速 ── */
-  const handleSpeedChange = useCallback(
-    (speed: number) => {
-      onChange({ ...config, speed })
-    },
-    [config, onChange],
-  )
-
-  /* ── 语调 ── */
-  const handlePitchChange = useCallback(
-    (pitch: number) => {
-      onChange({ ...config, pitch })
-    },
-    [config, onChange],
-  )
-
-  /* ── 音量 ── */
-  const handleVolumeChange = useCallback(
-    (volume: number) => {
-      onChange({ ...config, volume })
-    },
-    [config, onChange],
-  )
-
-  /* ── 字幕联动 ── */
-  const handleSubtitleSyncToggle = useCallback(() => {
-    onChange({ ...config, subtitle_sync: !config.subtitle_sync })
-  }, [config, onChange])
-
-  /* ── 试听 ── */
-  const handlePreview = useCallback(async () => {
-    if (!config.text.trim()) {
-      message.warning("请先输入合成文本")
-      return
-    }
-    if (!config.voice_id) {
-      message.warning("请先选择音色")
-      return
-    }
-    setPreviewLoading(true)
-    try {
-      const res = await previewTts({
-        text: config.text.slice(0, 200),
-        voice_id: config.voice_id,
-        speed: config.speed,
-        pitch: config.pitch,
-      })
-      if (!mountedRef.current) return
-      audioRef.current?.pause()
-      const audio = new Audio(res.audio_url)
-      audioRef.current = audio
-      audio
-        .play()
-        .then(() => {
-          if (mountedRef.current) message.success("试听播放中")
-        })
-        .catch(() => {
-          if (mountedRef.current) message.error("播放失败")
-        })
-      audio.onended = () => {
-        if (mountedRef.current) audioRef.current = null
-      }
-    } catch {
-      if (mountedRef.current) message.error("试听生成失败")
-    } finally {
-      if (mountedRef.current) setPreviewLoading(false)
-    }
-  }, [config])
-
-  /* ── 单音色示例试听 ── */
-  const [playingVoiceId, setPlayingVoiceId] = useState<string | null>(null)
-  const [loadingSampleVoiceId, setLoadingSampleVoiceId] = useState<string | null>(null)
-  const handlePlayVoiceSample = useCallback(
-    async (voice: UnifiedVoiceItem) => {
-      const voiceId = voice.voice_id
-      if (playingVoiceId === voiceId) {
-        audioRef.current?.pause()
-        audioRef.current = null
-        setPlayingVoiceId(null)
-        return
-      }
-      // 暂停上一个音频并清除事件监听，避免竞态
-      if (audioRef.current) {
-        audioRef.current.onended = null
-        audioRef.current.pause()
-      }
-
-      let audioUrl: string | null = voice.preview_url ?? voice.audio_url
-
-      // 克隆音色：调用试听接口实时合成
-      if (voice.type === "clone" && voice.voice_clone_profile_id) {
-        setLoadingSampleVoiceId(voiceId)
-        try {
-          const preview = await getVoiceClonePreview(voice.voice_clone_profile_id)
-          audioUrl = preview.audio_url
-        } catch {
-          if (mountedRef.current) {
-            message.error("试听音频生成失败，请重试")
-          }
-          setLoadingSampleVoiceId(null)
-          return
-        } finally {
-          if (mountedRef.current) {
-            setLoadingSampleVoiceId(null)
-          }
-        }
-      }
-
-      if (!audioUrl) {
-        message.warning("该音色暂无示例音频")
-        return
-      }
-
-      const audio = new Audio(audioUrl)
-      audioRef.current = audio
-      audio
-        .play()
-        .then(() => {
-          // 只有当前活跃的音频实例才能更新状态，防止快速切换竞态
-          if (mountedRef.current && audioRef.current === audio) {
-            setPlayingVoiceId(voiceId)
-          }
-        })
-        .catch(() => {
-          if (mountedRef.current && audioRef.current === audio) {
-            message.error("播放失败")
-            audioRef.current = null
-          }
-        })
-      audio.onended = () => {
-        if (mountedRef.current && audioRef.current === audio) {
-          setPlayingVoiceId(null)
-          audioRef.current = null
-        }
-      }
-    },
-    [playingVoiceId],
-  )
-
-  /* ── 重置 ── */
-  const handleReset = useCallback(() => {
-    onChange({ ...DEFAULT_TTS_CONFIG })
-  }, [onChange])
-
-  /* ── 关闭时停止音频 ── */
-  const handleClose = useCallback(() => {
-    mountedRef.current = false
-    audioRef.current?.pause()
-    audioRef.current = null
-    setPlayingVoiceId(null)
-    onClose()
-  }, [onClose])
-
-  return {
-    presetVoices,
-    cloneVoices,
-    voicesLoading,
-    previewLoading,
-    playingVoiceId,
-    loadingSampleVoiceId,
-    handleModeChange,
-    handleTextChange,
-    handleVoiceSelect,
-    handlePlayVoiceSample,
-    handleSpeedChange,
-    handlePitchChange,
-    handleVolumeChange,
-    handleSubtitleSyncToggle,
-    handlePreview,
-    handleReset,
-    handleClose,
-  }
-}

apps/web/src/pages/editing-planner/components/TtsPanel/index.tsx

@@ -1,180 +0,0 @@
-/**
- * TTS 配音面板 — Drawer 形式
- * 配音模式切换 + 文本输入 + 音色选择（预设+克隆） + 语速/语调/音量 + 试听 + 字幕联动
- */
-import React from "react"
-import { Drawer } from "antd"
-import type { TtsConfig } from "../../types"
-
-import { useTtsPanel } from "./hooks/useTtsPanel"
-import { VoiceSelector } from "./components/VoiceSelector"
-import { TtsSlider } from "./components/TtsSlider"
-import { TTS_MODE_OPTIONS } from "./constants"
-
-export interface TtsPanelProps {
-  open: boolean
-  onClose: () => void
-  /** 当前片段 TTS 配置 */
-  config: TtsConfig
-  onChange: (config: TtsConfig) => void
-}
-
-const TtsPanel: React.FC<TtsPanelProps> = ({ open, onClose, config, onChange }) => {
-  const {
-    presetVoices,
-    cloneVoices,
-    voicesLoading,
-    previewLoading,
-    playingVoiceId,
-    loadingSampleVoiceId,
-    handleModeChange,
-    handleTextChange,
-    handleVoiceSelect,
-    handlePlayVoiceSample,
-    handleSpeedChange,
-    handlePitchChange,
-    handleVolumeChange,
-    handleSubtitleSyncToggle,
-    handlePreview,
-    handleReset,
-    handleClose,
-  } = useTtsPanel({ open, config, onChange, onClose })
-
-  return (
-    <Drawer
-      title="🎙️ TTS 配音"
-      placement="right"
-      width={400}
-      open={open}
-      onClose={handleClose}
-      className="tts-panel-drawer"
-    >
-      {/* ── 配音模式切换 ── */}
-      <div className="tts-mode-section">
-        <div className="tts-mode-label">配音模式</div>
-        <div className="tts-mode-group">
-          {TTS_MODE_OPTIONS.map((m) => (
-            <button
-              key={m.mode}
-              className={`tts-mode-btn${config.mode === m.mode ? " active" : ""}`}
-              onClick={() => handleModeChange(m.mode)}
-            >
-              <span className="tts-mode-icon">{m.icon}</span>
-              <span className="tts-mode-text">{m.label}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* ── TTS 配置（仅 tts 模式显示） ── */}
-      {config.mode === "tts" && (
-        <>
-          {/* 文本输入 */}
-          <div className="tts-text-section">
-            <div className="tts-text-header">
-              <span className="tts-text-label">合成文本</span>
-              <span className="tts-text-count">{config.text.length}/5000</span>
-            </div>
-            <textarea
-              className="tts-text-input"
-              placeholder="请输入需要合成的文本内容..."
-              value={config.text}
-              onChange={handleTextChange}
-              maxLength={5000}
-              rows={5}
-            />
-          </div>
-
-          {/* 音色选择 */}
-          <VoiceSelector
-            presetVoices={presetVoices}
-            cloneVoices={cloneVoices}
-            selectedVoiceId={config.voice_id}
-            loading={voicesLoading}
-            playingVoiceId={playingVoiceId}
-            loadingSampleVoiceId={loadingSampleVoiceId}
-            onSelect={handleVoiceSelect}
-            onPlaySample={handlePlayVoiceSample}
-          />
-
-          {/* 语速 */}
-          <TtsSlider
-            label="语速"
-            value={config.speed}
-            min={0.5}
-            max={2.0}
-            step={0.05}
-            onChange={handleSpeedChange}
-            formatter={(v) => `${v.toFixed(2)}x`}
-            marks={["0.5x", "1.0x", "2.0x"]}
-          />
-
-          {/* 语调 */}
-          <TtsSlider
-            label="语调"
-            value={config.pitch}
-            min={-12}
-            max={12}
-            step={1}
-            onChange={handlePitchChange}
-            formatter={(v) => `${v > 0 ? "+" : ""}${v} 半音`}
-            marks={["-12", "0", "+12"]}
-          />
-
-          {/* 音量 */}
-          <TtsSlider
-            label="音量"
-            value={config.volume}
-            min={0}
-            max={100}
-            step={1}
-            onChange={handleVolumeChange}
-            formatter={(v) => `${v}%`}
-          />
-
-          {/* 试听按钮 */}
-          <div className="tts-preview-section">
-            <button className="tts-preview-btn" onClick={handlePreview} disabled={previewLoading}>
-              {previewLoading ? "⏳ 生成中..." : "🔊 试听"}
-            </button>
-          </div>
-
-          {/* 字幕联动 */}
-          <div className="tts-subtitle-section">
-            <div className="tts-subtitle-info">
-              <span className="tts-subtitle-label">字幕联动</span>
-              <span className="tts-subtitle-desc">
-                {config.subtitle_sync ? "TTS 文本自动同步到字幕" : "字幕需手动编辑"}
-              </span>
-            </div>
-            <div
-              className={`ep-toggle${config.subtitle_sync ? " active" : ""}`}
-              onClick={handleSubtitleSyncToggle}
-            >
-              <div className="ep-toggle-knob" />
-            </div>
-          </div>
-        </>
-      )}
-
-      {/* ── 上传配音模式提示 ── */}
-      {config.mode === "upload" && (
-        <div className="tts-upload-hint">
-          <p>请在右侧面板的「配音素材」中选择已上传的配音文件。</p>
-          <p>如需上传新配音，请前往配音库页面。</p>
-        </div>
-      )}
-
-      {/* ── 底部操作 ── */}
-      {config.mode === "tts" && (
-        <div className="tts-footer">
-          <button className="tts-reset-btn" onClick={handleReset}>
-            重置默认
-          </button>
-        </div>
-      )}
-    </Drawer>
-  )
-}
-
-export default TtsPanel

apps/web/src/pages/editing-planner/components/WatermarkPanel.tsx

@@ -1,123 +0,0 @@
-/**
- * 水印配置面板 — Drawer 形式
- * 三个 Tab：图片水印 / 文字水印 / 滚动水印
- * 通用设置：位置、不透明度
- */
-import React from "react"
-import { Drawer } from "antd"
-import type { WatermarkConfig } from "@/pages/editing-planner/types"
-import WatermarkTypeTabs from "./watermark/WatermarkTypeTabs"
-import ImageWatermarkSection from "./watermark/ImageWatermarkSection"
-import TextWatermarkSection from "./watermark/TextWatermarkSection"
-import ScrollWatermarkSection from "./watermark/ScrollWatermarkSection"
-import WatermarkCommonSection from "./watermark/WatermarkCommonSection"
-import { useWatermarkConfig } from "@/pages/editing-planner/hooks/useWatermarkConfig"
-
-interface WatermarkPanelProps {
-  open: boolean
-  onClose: () => void
-  config: WatermarkConfig
-  onChange: (config: WatermarkConfig) => void
-}
-
-const WatermarkPanel: React.FC<WatermarkPanelProps> = ({ open, onClose, config, onChange }) => {
-  const {
-    localImageUrl,
-    handleTypeChange,
-    handlePositionChange,
-    handleOpacityChange,
-    handleImageUrlChange,
-    handleImageWidthChange,
-    handleImageHeightChange,
-    handleTextChange,
-    handleFontSizeChange,
-    handleColorChange,
-    handleScrollDirectionChange,
-    handleScrollSpeedChange,
-    handleReset,
-  } = useWatermarkConfig({ config, onChange })
-
-  return (
-    <Drawer
-      title="🔖 水印设置"
-      placement="right"
-      width={400}
-      styles={{ wrapper: { maxWidth: "100vw" } }}
-      open={open}
-      onClose={onClose}
-      className="watermark-panel-drawer"
-    >
-      {/* ── Tab 切换 ── */}
-      <WatermarkTypeTabs activeTab={config.type} onTypeChange={handleTypeChange} />
-
-      {/* ── 无水印提示 ── */}
-      {config.type === "none" && (
-        <div className="wp-empty-hint">
-          <span className="wp-empty-icon">🚫</span>
-          <p>当前未启用水印</p>
-          <p className="wp-empty-desc">选择上方标签启用水印功能</p>
-        </div>
-      )}
-
-      {/* ── 图片水印配置 ── */}
-      {config.type === "image" && (
-        <ImageWatermarkSection
-          imageUrl={config.image_url || ""}
-          localImageUrl={localImageUrl}
-          width={config.width}
-          height={config.height}
-          onImageUrlChange={handleImageUrlChange}
-          onWidthChange={handleImageWidthChange}
-          onHeightChange={handleImageHeightChange}
-        />
-      )}
-
-      {/* ── 文字水印配置 ── */}
-      {config.type === "text" && (
-        <TextWatermarkSection
-          text={config.text || ""}
-          fontSize={config.font_size ?? 24}
-          color={config.color ?? "#ffffff"}
-          onTextChange={handleTextChange}
-          onFontSizeChange={handleFontSizeChange}
-          onColorChange={handleColorChange}
-        />
-      )}
-
-      {/* ── 滚动水印配置 ── */}
-      {config.type === "scroll" && (
-        <ScrollWatermarkSection
-          text={config.text || ""}
-          scrollDirection={config.scroll_direction ?? "horizontal"}
-          scrollSpeed={config.scroll_speed ?? 50}
-          fontSize={config.font_size ?? 24}
-          color={config.color ?? "#ffffff"}
-          onTextChange={handleTextChange}
-          onScrollDirectionChange={handleScrollDirectionChange}
-          onScrollSpeedChange={handleScrollSpeedChange}
-          onFontSizeChange={handleFontSizeChange}
-          onColorChange={handleColorChange}
-        />
-      )}
-
-      {/* ── 通用设置（非 none 时显示） ── */}
-      {config.type !== "none" && (
-        <WatermarkCommonSection
-          position={config.position}
-          opacity={config.opacity}
-          onPositionChange={handlePositionChange}
-          onOpacityChange={handleOpacityChange}
-        />
-      )}
-
-      {/* ── 底部操作 ── */}
-      <div className="wp-footer">
-        <button className="wp-reset-btn" onClick={handleReset}>
-          重置
-        </button>
-      </div>
-    </Drawer>
-  )
-}
-
-export default WatermarkPanel

apps/web/src/pages/editing-planner/components/bgm-selector/BgmItem.tsx

@@ -1,66 +0,0 @@
-import React from "react"
-import type { BgmPreset } from "@/api/bgm"
-
-interface BgmItemProps {
-  bgm: BgmPreset
-  isSelected: boolean
-  isPlaying: boolean
-  onSelect: () => void
-  onPreview: () => void
-}
-
-/**
- * 单个 BGM 列表项组件
- */
-export const BgmItem: React.FC<BgmItemProps> = ({
-  bgm,
-  isSelected,
-  isPlaying,
-  onSelect,
-  onPreview,
-}) => {
-  const formatDuration = (seconds: number) => {
-    const mins = Math.floor(seconds / 60)
-    const secs = String(Math.floor(seconds % 60)).padStart(2, "0")
-    return `${mins}:${secs}`
-  }
-
-  return (
-    <div className={`bgm-item${isSelected ? " selected" : ""}`} onClick={onSelect}>
-      <div className="bgm-item-cover">
-        {bgm.cover_url ? (
-          <img src={bgm.cover_url} alt={bgm.name} />
-        ) : (
-          <span className="bgm-item-cover-icon">🎵</span>
-        )}
-      </div>
-      <div className="bgm-item-info">
-        <div className="bgm-item-name">{bgm.name}</div>
-        <div className="bgm-item-meta">
-          <span className="bgm-item-category">{bgm.category}</span>
-          <span className="bgm-item-duration">{formatDuration(bgm.duration)}</span>
-        </div>
-        {bgm.tags.length > 0 && (
-          <div className="bgm-item-tags">
-            {bgm.tags.slice(0, 3).map((t) => (
-              <span key={t} className="bgm-item-tag">
-                {t}
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-      <button
-        className={`bgm-item-preview-btn${isPlaying ? " playing" : ""}`}
-        onClick={(e) => {
-          e.stopPropagation()
-          onPreview()
-        }}
-        title={isPlaying ? "暂停" : "试听"}
-      >
-        {isPlaying ? "⏸" : "▶️"}
-      </button>
-      {isSelected && <span className="bgm-item-check">✓</span>}
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/bgm-selector/BgmMixConfig.tsx

@@ -1,88 +0,0 @@
-import React from "react"
-import { Slider } from "antd"
-import type { BgmMixConfig as BgmMixConfigType, BgmPreset } from "@/api/bgm"
-
-interface BgmMixConfigProps {
-  config: BgmMixConfigType
-  selectedBgm: BgmPreset | undefined
-  onChange: (config: BgmMixConfigType) => void
-  onClear: () => void
-}
-
-/**
- * BGM 混音配置面板
- * 音量、淡入淡出、人声闪避等设置
- */
-export const BgmMixConfig: React.FC<BgmMixConfigProps> = ({
-  config,
-  selectedBgm,
-  onChange,
-  onClear,
-}) => {
-  return (
-    <div className="bgm-mix-config">
-      <div className="bgm-mix-header">
-        <span>混音配置</span>
-        <button className="bgm-mix-clear" onClick={onClear}>
-          移除 BGM
-        </button>
-      </div>
-
-      <div className="bgm-mix-selected">
-        {selectedBgm ? `当前：${selectedBgm.name}` : `当前：${config.music_id}`}
-      </div>
-
-      {/* 音量 */}
-      <div className="bgm-mix-field">
-        <label className="bgm-mix-label">
-          音量 <span className="bgm-mix-value">{config.volume}%</span>
-        </label>
-        <Slider
-          min={0}
-          max={100}
-          value={config.volume}
-          onChange={(v) => onChange({ ...config, volume: v })}
-        />
-      </div>
-
-      {/* 淡入 */}
-      <div className="bgm-mix-field">
-        <label className="bgm-mix-label">
-          淡入 <span className="bgm-mix-value">{config.fade_in.toFixed(1)}s</span>
-        </label>
-        <Slider
-          min={0}
-          max={3}
-          step={0.1}
-          value={config.fade_in}
-          onChange={(v) => onChange({ ...config, fade_in: v })}
-        />
-      </div>
-
-      {/* 淡出 */}
-      <div className="bgm-mix-field">
-        <label className="bgm-mix-label">
-          淡出 <span className="bgm-mix-value">{config.fade_out.toFixed(1)}s</span>
-        </label>
-        <Slider
-          min={0}
-          max={3}
-          step={0.1}
-          value={config.fade_out}
-          onChange={(v) => onChange({ ...config, fade_out: v })}
-        />
-      </div>
-
-      {/* 人声闪避 */}
-      <div className="bgm-mix-field bgm-mix-toggle-row">
-        <label className="bgm-mix-label">人声闪避（sidechain）</label>
-        <div
-          className={`ep-toggle${config.voice_dodge ? " active" : ""}`}
-          onClick={() => onChange({ ...config, voice_dodge: !config.voice_dodge })}
-        >
-          <div className="ep-toggle-knob" />
-        </div>
-      </div>
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/bgm-selector/index.tsx

@@ -1,132 +0,0 @@
-/**
- * BGM 选择器 — Drawer 形式
- * 预设 BGM 列表（按风格分类）、搜索、试听、音量/淡入淡出/人声闪避配置
- */
-import React, { useCallback } from "react"
-import { Drawer, Input, Tag } from "antd"
-import { type BgmMixConfig, DEFAULT_BGM_MIX_CONFIG } from "@/api/bgm"
-import { useBgmSelector, CATEGORY_LIST } from "./useBgmSelector"
-import { BgmItem } from "./BgmItem"
-import { BgmMixConfig as BgmMixConfigPanel } from "./BgmMixConfig"
-
-const { Search } = Input
-
-interface BgmSelectorProps {
-  open: boolean
-  onClose: () => void
-  config: BgmMixConfig
-  onChange: (config: BgmMixConfig) => void
-  /** 模板/草稿 ID，用于请求 BGM 预设 */
-  templateId?: string
-}
-
-const BgmSelector: React.FC<BgmSelectorProps> = ({
-  open,
-  onClose,
-  config,
-  onChange,
-  templateId,
-}) => {
-  const {
-    presets,
-    loading,
-    activeCategory,
-    setActiveCategory,
-    keyword,
-    setKeyword,
-    previewingId,
-    loadPresets,
-    handlePreview,
-    stopPreview,
-  } = useBgmSelector(open, templateId)
-
-  /* ── 选中 BGM ── */
-  const handleSelect = useCallback(
-    (bgmId: string) => {
-      onChange({
-        ...config,
-        enabled: true,
-        music_id: bgmId,
-      })
-    },
-    [config, onChange],
-  )
-
-  /* ── 关闭时停止播放 ── */
-  const handleClose = useCallback(() => {
-    stopPreview()
-    onClose()
-  }, [stopPreview, onClose])
-
-  /* ── 移除 BGM ── */
-  const handleClear = useCallback(() => {
-    stopPreview()
-    onChange({ ...DEFAULT_BGM_MIX_CONFIG })
-  }, [stopPreview, onChange])
-
-  /* ── 当前选中的 BGM ── */
-  const selectedBgm = presets.find((p) => p.id === config.music_id)
-
-  return (
-    <Drawer
-      title="🎵 BGM 音乐选择"
-      placement="right"
-      width={420}
-      open={open}
-      onClose={handleClose}
-      className="bgm-selector-drawer"
-    >
-      {/* 搜索框 */}
-      <div className="bgm-search-row">
-        <Search
-          placeholder="搜索 BGM 名称..."
-          allowClear
-          value={keyword}
-          onChange={(e) => setKeyword(e.target.value)}
-          onSearch={() => loadPresets()}
-        />
-      </div>
-
-      {/* 分类标签 */}
-      <div className="bgm-category-bar">
-        {CATEGORY_LIST.map((cat) => (
-          <Tag
-            key={cat.key}
-            className={`bgm-category-tag${activeCategory === cat.key ? " active" : ""}`}
-            onClick={() => setActiveCategory(cat.key)}
-          >
-            {cat.icon} {cat.label}
-          </Tag>
-        ))}
-      </div>
-
-      {/* BGM 列表 */}
-      <div className="bgm-list">
-        {loading && <div className="bgm-loading">加载中...</div>}
-        {!loading && presets.length === 0 && <div className="bgm-empty">暂无 BGM 数据</div>}
-        {presets.map((bgm) => (
-          <BgmItem
-            key={bgm.id}
-            bgm={bgm}
-            isSelected={config.music_id === bgm.id}
-            isPlaying={previewingId === bgm.id}
-            onSelect={() => handleSelect(bgm.id)}
-            onPreview={() => handlePreview(bgm)}
-          />
-        ))}
-      </div>
-
-      {/* 混音配置 */}
-      {config.enabled && config.music_id && (
-        <BgmMixConfigPanel
-          config={config}
-          selectedBgm={selectedBgm}
-          onChange={onChange}
-          onClear={handleClear}
-        />
-      )}
-    </Drawer>
-  )
-}
-
-export default BgmSelector

apps/web/src/pages/editing-planner/components/bgm-selector/useBgmSelector.ts

@@ -1,91 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from "react"
-import { message } from "antd"
-import { getBgmPresets, type BgmPreset, type BgmCategory } from "@/api/bgm"
-
-/* ──────────── 分类标签 ──────────── */
-export const CATEGORY_LIST: {
-  key: BgmCategory | "all"
-  label: string
-  icon: string
-}[] = [
-  { key: "all", label: "全部", icon: "🎶" },
-  { key: "轻快", label: "轻快", icon: "🎉" },
-  { key: "治愈", label: "治愈", icon: "🌿" },
-  { key: "科技", label: "科技", icon: "🔬" },
-  { key: "电商", label: "电商", icon: "🛒" },
-]
-
-/**
- * BGM 选择器数据与交互 Hook
- * 封装列表加载、搜索、分类筛选、试听播放逻辑
- */
-export function useBgmSelector(open: boolean, templateId?: string) {
-  const [presets, setPresets] = useState<BgmPreset[]>([])
-  const [loading, setLoading] = useState(false)
-  const [activeCategory, setActiveCategory] = useState<BgmCategory | "all">("all")
-  const [keyword, setKeyword] = useState("")
-  const [previewingId, setPreviewingId] = useState<string | null>(null)
-
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-
-  /* ── 加载 BGM 列表 ── */
-  const loadPresets = useCallback(async () => {
-    if (!templateId) {
-      setPresets([])
-      return
-    }
-    setLoading(true)
-    try {
-      const params: { category?: string; keyword?: string } = {}
-      if (activeCategory !== "all") params.category = activeCategory
-      if (keyword.trim()) params.keyword = keyword.trim()
-      const data = await getBgmPresets(templateId, params)
-      setPresets(data)
-    } catch {
-      message.error("加载 BGM 列表失败")
-    } finally {
-      setLoading(false)
-    }
-  }, [activeCategory, keyword, templateId])
-
-  useEffect(() => {
-    if (open) loadPresets()
-  }, [open, loadPresets])
-
-  /* ── 试听 ── */
-  const handlePreview = useCallback(
-    (bgm: BgmPreset) => {
-      if (previewingId === bgm.id) {
-        audioRef.current?.pause()
-        setPreviewingId(null)
-        return
-      }
-      audioRef.current?.pause()
-      const audio = new Audio(bgm.url)
-      audioRef.current = audio
-      audio.play().catch(() => {})
-      audio.onended = () => setPreviewingId(null)
-      setPreviewingId(bgm.id)
-    },
-    [previewingId],
-  )
-
-  /* ── 停止播放（关闭/移除时调用） ── */
-  const stopPreview = useCallback(() => {
-    audioRef.current?.pause()
-    setPreviewingId(null)
-  }, [])
-
-  return {
-    presets,
-    loading,
-    activeCategory,
-    setActiveCategory,
-    keyword,
-    setKeyword,
-    previewingId,
-    loadPresets,
-    handlePreview,
-    stopPreview,
-  }
-}

apps/web/src/pages/editing-planner/components/clip-properties/BgmSettingsSection.tsx

@@ -1,41 +0,0 @@
-/**
- * BGM 设置区块
- */
-import React from "react"
-import type { BgmSettings } from "@/pages/editing-planner/types/clipProperties"
-
-interface BgmSettingsSectionProps {
-  settings: BgmSettings
-  onOpenBgmDrawer?: () => void
-}
-
-const BgmSettingsSection: React.FC<BgmSettingsSectionProps> = ({ settings, onOpenBgmDrawer }) => {
-  return (
-    <div className="ep-settings-section">
-      <div className="ep-section-title">
-        <span className="ep-section-icon">🎵</span>
-        BGM 设置
-      </div>
-
-      {settings.enabled && settings.music_id ? (
-        <div className="ep-bgm-current">
-          <span className="ep-bgm-current-label">🎵 已选择 BGM</span>
-          <span className="ep-bgm-current-id">{settings.music_id}</span>
-          {settings.volume !== undefined && (
-            <span className="ep-bgm-current-vol">音量 {settings.volume}%</span>
-          )}
-        </div>
-      ) : (
-        <div className="ep-bgm-empty">未选择背景音乐</div>
-      )}
-
-      {onOpenBgmDrawer && (
-        <button className="ep-advanced-btn" onClick={onOpenBgmDrawer}>
-          🎵 {settings.enabled ? "更换 BGM / 调整混音" : "选择 BGM 音乐"}
-        </button>
-      )}
-    </div>
-  )
-}
-
-export default BgmSettingsSection

apps/web/src/pages/editing-planner/components/clip-properties/ClipDetailSection.tsx

@@ -1,5 +0,0 @@
-/**
- * ClipDetailSection 入口（向后兼容）
- * 实际实现位于 ./clip-detail-section/ 目录
- */
-export { default } from "./clip-detail-section"

apps/web/src/pages/editing-planner/components/clip-properties/StatsSection.tsx

@@ -1,39 +0,0 @@
-/**
- * 编辑统计区块
- */
-import React from "react"
-import { formatModeLabel } from "@/pages/editing-planner/utils/clipProperties"
-import type { TemplateMode } from "@/api/editing-planner"
-
-interface StatsSectionProps {
-  clipsCount: number
-  totalDuration: number
-  currentMode: TemplateMode
-}
-
-const StatsSection: React.FC<StatsSectionProps> = ({ clipsCount, totalDuration, currentMode }) => {
-  return (
-    <div className="ep-settings-section">
-      <div className="ep-section-title">
-        <span className="ep-section-icon">📊</span>
-        编辑统计
-      </div>
-      <div className="ep-clip-detail">
-        <div className="ep-clip-detail-field">
-          <div className="ep-clip-detail-label">片段数</div>
-          <div className="ep-clip-detail-value">{clipsCount}</div>
-        </div>
-        <div className="ep-clip-detail-field">
-          <div className="ep-clip-detail-label">总时长</div>
-          <div className="ep-clip-detail-value">{totalDuration.toFixed(1)}s</div>
-        </div>
-        <div className="ep-clip-detail-field">
-          <div className="ep-clip-detail-label">当前模式</div>
-          <div className="ep-clip-detail-value">{formatModeLabel(currentMode)}</div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default StatsSection

apps/web/src/pages/editing-planner/components/clip-properties/SubtitleSettingsSection.tsx

@@ -1,113 +0,0 @@
-/**
- * 字幕设置区块
- */
-import React from "react"
-import {
-  POSITION_OPTIONS,
-  FONT_OPTIONS,
-  ANIMATION_OPTIONS,
-} from "@/pages/editing-planner/constants/clipProperties"
-import type { SubtitleSettings } from "@/pages/editing-planner/types/clipProperties"
-
-interface SubtitleSettingsSectionProps {
-  settings: SubtitleSettings
-  onChange: (partial: Partial<SubtitleSettings>) => void
-  onOpenSubtitleDrawer?: () => void
-}
-
-const SubtitleSettingsSection: React.FC<SubtitleSettingsSectionProps> = ({
-  settings,
-  onChange,
-  onOpenSubtitleDrawer,
-}) => {
-  return (
-    <div className="ep-settings-section">
-      <div className="ep-section-title">
-        <span className="ep-section-icon">💬</span>
-        字幕设置
-      </div>
-
-      <div className="ep-toggle-row">
-        <span className="ep-toggle-label">启用字幕</span>
-        <div
-          className={`ep-toggle ${settings.enabled ? "active" : ""}`}
-          onClick={() => onChange({ enabled: !settings.enabled })}
-        >
-          <div className="ep-toggle-knob" />
-        </div>
-      </div>
-
-      {settings.enabled && (
-        <>
-          <div className="ep-field">
-            <label className="ep-field-label">位置</label>
-            <select
-              className="ep-form-select"
-              value={settings.position}
-              onChange={(e) => onChange({ position: e.target.value })}
-            >
-              {POSITION_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div className="ep-field">
-            <label className="ep-field-label">字体</label>
-            <select
-              className="ep-form-select"
-              value={settings.font}
-              onChange={(e) => onChange({ font: e.target.value })}
-            >
-              {FONT_OPTIONS.map((f) => (
-                <option key={f} value={f}>
-                  {f}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div className="ep-field">
-            <label className="ep-field-label">大小</label>
-            <div className="ep-slider-row">
-              <input
-                className="ep-slider"
-                type="range"
-                min={12}
-                max={48}
-                value={settings.fontSize}
-                onChange={(e) => onChange({ fontSize: Number(e.target.value) })}
-              />
-              <span className="ep-slider-value">{settings.fontSize}px</span>
-            </div>
-          </div>
-
-          <div className="ep-field">
-            <label className="ep-field-label">动画</label>
-            <select
-              className="ep-form-select"
-              value={settings.animation}
-              onChange={(e) => onChange({ animation: e.target.value })}
-            >
-              {ANIMATION_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          {onOpenSubtitleDrawer && (
-            <button className="ep-advanced-btn" onClick={onOpenSubtitleDrawer}>
-              🎨 高级字幕样式配置
-            </button>
-          )}
-        </>
-      )}
-    </div>
-  )
-}
-
-export default SubtitleSettingsSection

apps/web/src/pages/editing-planner/components/clip-properties/TitleSettingsSection.tsx

@@ -1,136 +0,0 @@
-/**
- * 标题设置区块 — #1789
- * 提供字号滑块、字体预设、位置、颜色等控制入口
- */
-import React from "react"
-import type { TitleConfig } from "@/api/template-editor"
-import { POSITION_OPTIONS, FONT_OPTIONS } from "@/pages/editing-planner/constants/clipProperties"
-
-interface TitleSettingsSectionProps {
-  config: TitleConfig
-  onChange: (config: TitleConfig | ((prev: TitleConfig) => TitleConfig)) => void
-}
-
-const TITLE_COLOR_PRESETS = [
-  "#ffffff",
-  "#000000",
-  "#ff4444",
-  "#ffaa00",
-  "#44ff44",
-  "#4488ff",
-  "#ff44ff",
-  "#ffff44",
-]
-
-const TitleSettingsSection: React.FC<TitleSettingsSectionProps> = ({ config, onChange }) => {
-  const update = (partial: Partial<TitleConfig>) => {
-    onChange((prev: TitleConfig) => ({ ...prev, ...partial }))
-  }
-
-  return (
-    <div className="ep-settings-section">
-      <div className="ep-section-title">
-        <span className="ep-section-icon">📝</span>
-        标题设置
-      </div>
-
-      {/* AI 自动选择开关 */}
-      <div className="ep-toggle-row">
-        <span className="ep-toggle-label">AI 自动选择</span>
-        <div
-          className={`ep-toggle ${config.ai_auto_select ? "active" : ""}`}
-          onClick={() => update({ ai_auto_select: !config.ai_auto_select })}
-        >
-          <div className="ep-toggle-knob" />
-        </div>
-      </div>
-
-      {!config.ai_auto_select && (
-        <>
-          {/* 标题文本 */}
-          <div className="ep-field">
-            <label className="ep-field-label">标题文本</label>
-            <input
-              className="ep-form-select"
-              type="text"
-              placeholder="输入标题内容"
-              value={config.content}
-              onChange={(e) => update({ content: e.target.value })}
-            />
-          </div>
-
-          {/* 位置 */}
-          <div className="ep-field">
-            <label className="ep-field-label">位置</label>
-            <select
-              className="ep-form-select"
-              value={config.position}
-              onChange={(e) => update({ position: e.target.value })}
-            >
-              {POSITION_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          {/* 字体预设 */}
-          <div className="ep-field">
-            <label className="ep-field-label">字体</label>
-            <select
-              className="ep-form-select"
-              value={config.font_preset}
-              onChange={(e) => update({ font_preset: e.target.value })}
-            >
-              {FONT_OPTIONS.map((f) => (
-                <option key={f} value={f}>
-                  {f}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          {/* 字号滑块 */}
-          <div className="ep-field">
-            <label className="ep-field-label">字号</label>
-            <div className="ep-slider-row">
-              <input
-                className="ep-slider"
-                type="range"
-                min={12}
-                max={72}
-                value={config.font_size}
-                onChange={(e) => update({ font_size: Number(e.target.value) })}
-              />
-              <span className="ep-slider-value">{config.font_size}px</span>
-            </div>
-          </div>
-
-          {/* 颜色 */}
-          <div className="ep-field">
-            <label className="ep-field-label">颜色</label>
-            <div className="ep-color-presets">
-              {TITLE_COLOR_PRESETS.map((color) => (
-                <div
-                  key={color}
-                  className={`ep-color-swatch${config.font_color === color ? " active" : ""}`}
-                  style={{ backgroundColor: color }}
-                  onClick={() => update({ font_color: color })}
-                />
-              ))}
-              <input
-                type="color"
-                className="ep-color-picker"
-                value={config.font_color}
-                onChange={(e) => update({ font_color: e.target.value })}
-              />
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}
-
-export default TitleSettingsSection

apps/web/src/pages/editing-planner/components/clip-properties/clip-detail-section/AdvancedEntries.tsx

@@ -1,85 +0,0 @@
-import React from "react"
-import { TRANSITION_OPTIONS } from "@/api/template-editor"
-import type { ClipData } from "@/pages/editing-planner/types"
-
-interface AdvancedEntriesProps {
-  clip: ClipData
-  onOpenTransitionDrawer?: (clipId: string) => void
-  onOpenSpeedDrawer?: (clipId: string) => void
-  onOpenTtsDrawer?: (clipId: string) => void
-}
-
-/**
- * 高级功能入口按钮（转场/调速/TTS）
- */
-export const AdvancedEntries: React.FC<AdvancedEntriesProps> = ({
-  clip,
-  onOpenTransitionDrawer,
-  onOpenSpeedDrawer,
-  onOpenTtsDrawer,
-}) => {
-  const transitionLabel = (() => {
-    const t = clip.transition
-    if (!t || t.type === "none") return "无转场"
-    const opt = TRANSITION_OPTIONS.find((o) => o.value === t.type)
-    return `${opt?.label ?? t.type} · ${t.duration.toFixed(1)}s`
-  })()
-
-  const speedLabel = clip.speed ? `${clip.speed.rate.toFixed(2)}x` : "1.00x"
-
-  const ttsLabel = (() => {
-    const tts = clip.tts_config
-    if (!tts || tts.mode === "none") return "无配音"
-    if (tts.mode === "upload") return "上传配音"
-    return `TTS · ${tts.voice_id ? "已选音色" : "未选音色"}`
-  })()
-
-  return (
-    <>
-      {/* 转场效果入口 */}
-      {onOpenTransitionDrawer && (
-        <div className="ep-clip-detail-field">
-          <button
-            className="ep-advanced-btn ep-advanced-btn--transition"
-            onClick={() => onOpenTransitionDrawer(clip.id)}
-          >
-            <span className="ep-advanced-btn-icon">🎬</span>
-            <span className="ep-advanced-btn-label">转场效果</span>
-            <span className="ep-advanced-btn-value">{transitionLabel}</span>
-            <span className="ep-advanced-btn-arrow">›</span>
-          </button>
-        </div>
-      )}
-
-      {/* 播放速度入口 */}
-      {onOpenSpeedDrawer && (
-        <div className="ep-clip-detail-field">
-          <button
-            className="ep-advanced-btn ep-advanced-btn--speed"
-            onClick={() => onOpenSpeedDrawer(clip.id)}
-          >
-            <span className="ep-advanced-btn-icon">⚡</span>
-            <span className="ep-advanced-btn-label">播放速度</span>
-            <span className="ep-advanced-btn-value">{speedLabel}</span>
-            <span className="ep-advanced-btn-arrow">›</span>
-          </button>
-        </div>
-      )}
-
-      {/* TTS 配音入口 */}
-      {onOpenTtsDrawer && (
-        <div className="ep-clip-detail-field">
-          <button
-            className="ep-advanced-btn ep-advanced-btn--tts"
-            onClick={() => onOpenTtsDrawer(clip.id)}
-          >
-            <span className="ep-advanced-btn-icon">🎙️</span>
-            <span className="ep-advanced-btn-label">TTS 配音</span>
-            <span className="ep-advanced-btn-value">{ttsLabel}</span>
-            <span className="ep-advanced-btn-arrow">›</span>
-          </button>
-        </div>
-      )}
-    </>
-  )
-}

apps/web/src/pages/editing-planner/components/clip-properties/clip-detail-section/ClipTypeAndDuration.tsx

@@ -1,69 +0,0 @@
-import React from "react"
-import type { ClipData, ClipType } from "@/pages/editing-planner/types"
-import { CLIP_TYPE_ICONS, CLIP_TYPE_LABELS } from "@/pages/editing-planner/constants/clipProperties"
-import type { TemplateMode } from "@/api/editing-planner"
-
-interface ClipTypeAndDurationProps {
-  clip: ClipData
-  currentMode: TemplateMode
-  onClipUpdate: (clipId: string, data: Partial<ClipData>) => void
-}
-
-/**
- * 片段类型选择 + 时长设置
- */
-export const ClipTypeAndDuration: React.FC<ClipTypeAndDurationProps> = ({
-  clip,
-  currentMode,
-  onClipUpdate,
-}) => {
-  const isTypeDisabled = (t: ClipType) => {
-    if (currentMode === "pip") return t !== "pip"
-    if (currentMode === "voice_over") return t !== "voice"
-    return false
-  }
-
-  return (
-    <>
-      {/* 类型选择器 */}
-      <div className="ep-clip-detail-field">
-        <div className="ep-clip-detail-label">类型</div>
-        <div className="ep-clip-type-selector">
-          {(["voice", "pip"] as ClipType[]).map((t) => {
-            const disabled = isTypeDisabled(t)
-            return (
-              <button
-                key={t}
-                className={`ep-clip-type-btn${clip.type === t ? " active" : ""}${disabled ? " disabled" : ""}`}
-                disabled={disabled}
-                onClick={() => !disabled && onClipUpdate(clip.id, { type: t })}
-              >
-                {CLIP_TYPE_ICONS[t]} {CLIP_TYPE_LABELS[t]}
-              </button>
-            )
-          })}
-        </div>
-      </div>
-
-      {/* 时长 */}
-      <div className="ep-clip-detail-field">
-        <div className="ep-clip-detail-label">时长</div>
-        <div className="ep-clip-detail-row">
-          <input
-            className="ep-duration-input"
-            type="number"
-            min={1}
-            max={120}
-            value={clip.duration}
-            onChange={(e) =>
-              onClipUpdate(clip.id, {
-                duration: Math.max(1, Math.min(120, Number(e.target.value) || 1)),
-              })
-            }
-          />
-          <span className="ep-clip-detail-unit">秒</span>
-        </div>
-      </div>
-    </>
-  )
-}

apps/web/src/pages/editing-planner/components/clip-properties/clip-detail-section/VoiceMaterialSection.tsx

@@ -1,132 +0,0 @@
-import React from "react"
-import { useNavigate } from "react-router-dom"
-import type { ClipData } from "@/pages/editing-planner/types"
-import { getGenderLabel } from "@/pages/editing-planner/utils/clipProperties"
-import type { AssetItem } from "@/api/assets"
-
-interface VoiceMaterialSectionProps {
-  clip: ClipData
-  voiceMaterials: AssetItem[]
-  voiceMaterialsLoading: boolean
-  onClipUpdate: (clipId: string, data: Partial<ClipData>) => void
-  onRefreshVoiceMaterials?: () => void
-  onClipVoiceSelect?: (clipId: string, asset: AssetItem | null) => void
-  previewingId: string | null
-  onPreviewVoice: (asset: AssetItem) => void
-  onStopPreview: () => void
-}
-
-/**
- * 配音素材选择区（仅 voice 类型显示）
- */
-export const VoiceMaterialSection: React.FC<VoiceMaterialSectionProps> = ({
-  clip,
-  voiceMaterials,
-  voiceMaterialsLoading,
-  onClipUpdate,
-  onRefreshVoiceMaterials,
-  onClipVoiceSelect,
-  previewingId,
-  onPreviewVoice,
-  onStopPreview,
-}) => {
-  const navigate = useNavigate()
-
-  return (
-    <>
-      {/* 素材起始时间 */}
-      <div className="ep-clip-detail-field">
-        <div className="ep-clip-detail-label">素材起始时间</div>
-        <div className="ep-clip-detail-row">
-          <input
-            className="ep-duration-input"
-            type="number"
-            min={0}
-            max={9999}
-            step={0.1}
-            value={clip.startOffset}
-            onChange={(e) =>
-              onClipUpdate(clip.id, {
-                startOffset: Math.max(0, Math.min(9999, Number(e.target.value) || 0)),
-              })
-            }
-          />
-          <span className="ep-clip-detail-unit">秒</span>
-        </div>
-      </div>
-
-      {/* 配音素材选择 */}
-      <div className="ep-clip-detail-field">
-        <div className="ep-clip-detail-label">
-          配音素材
-          {onRefreshVoiceMaterials && (
-            <button
-              type="button"
-              className="ep-voice-refresh-btn"
-              title="刷新配音列表"
-              onClick={() => onRefreshVoiceMaterials()}
-              disabled={voiceMaterialsLoading}
-            >
-              {voiceMaterialsLoading ? "⏳" : "🔄"}
-            </button>
-          )}
-        </div>
-
-        {voiceMaterialsLoading && voiceMaterials.length === 0 ? (
-          <div className="ep-voice-loading">加载中...</div>
-        ) : (
-          <>
-            <div className="ep-voice-select-row">
-              <select
-                className="ep-clip-detail-select"
-                value={clip.voice_asset_id ?? ""}
-                onChange={(e) => {
-                  const assetId = e.target.value
-                  if (!onClipVoiceSelect) return
-                  if (!assetId) {
-                    onClipVoiceSelect(clip.id, null)
-                  } else {
-                    const asset = voiceMaterials.find((m) => m.id === assetId)
-                    if (asset) onClipVoiceSelect(clip.id, asset)
-                  }
-                  onStopPreview()
-                }}
-              >
-                <option value="">未选择</option>
-                {voiceMaterials.map((m) => {
-                  const gender = getGenderLabel(m)
-                  const label = gender ? `${m.name}（${gender}）` : m.name
-                  return (
-                    <option key={m.id} value={m.id}>
-                      {label}
-                    </option>
-                  )
-                })}
-              </select>
-              {clip.voice_asset_id && (
-                <button
-                  type="button"
-                  className="ep-voice-preview-btn"
-                  title={previewingId === clip.voice_asset_id ? "暂停" : "试听"}
-                  onClick={() => {
-                    const asset = voiceMaterials.find((m) => m.id === clip.voice_asset_id)
-                    if (asset) onPreviewVoice(asset)
-                  }}
-                >
-                  {previewingId === clip.voice_asset_id ? "⏸" : "▶️"}
-                </button>
-              )}
-            </div>
-            {voiceMaterials.length === 0 && (
-              <div className="ep-voice-empty">暂无配音素材，请先上传</div>
-            )}
-          </>
-        )}
-
-        <button className="ep-voice-upload-btn" onClick={() => navigate("/app/voice-materials")}>
-          + 上传新配音
-        </button>
-      </div>
-    </>
-  )
-}

apps/web/src/pages/editing-planner/components/clip-properties/clip-detail-section/index.tsx

@@ -1,78 +0,0 @@
-/**
- * 片段详情区块
- */
-import React from "react"
-import type { ClipData } from "@/pages/editing-planner/types"
-import type { AssetItem } from "@/api/assets"
-import type { TemplateMode } from "@/api/editing-planner"
-import { ClipTypeAndDuration } from "./ClipTypeAndDuration"
-import { AdvancedEntries } from "./AdvancedEntries"
-import { VoiceMaterialSection } from "./VoiceMaterialSection"
-
-interface ClipDetailSectionProps {
-  clip: ClipData
-  currentMode: TemplateMode
-  voiceMaterials?: AssetItem[]
-  voiceMaterialsLoading?: boolean
-  onClipUpdate: (clipId: string, data: Partial<ClipData>) => void
-  onRefreshVoiceMaterials?: () => void
-  onClipVoiceSelect?: (clipId: string, asset: AssetItem | null) => void
-  onOpenTransitionDrawer?: (clipId: string) => void
-  onOpenSpeedDrawer?: (clipId: string) => void
-  onOpenTtsDrawer?: (clipId: string) => void
-  previewingId: string | null
-  onPreviewVoice: (asset: AssetItem) => void
-  onStopPreview: () => void
-}
-
-const ClipDetailSection: React.FC<ClipDetailSectionProps> = ({
-  clip,
-  currentMode,
-  voiceMaterials = [],
-  voiceMaterialsLoading = false,
-  onClipUpdate,
-  onRefreshVoiceMaterials,
-  onClipVoiceSelect,
-  onOpenTransitionDrawer,
-  onOpenSpeedDrawer,
-  onOpenTtsDrawer,
-  previewingId,
-  onPreviewVoice,
-  onStopPreview,
-}) => {
-  return (
-    <div className="ep-settings-section">
-      <div className="ep-section-title">
-        <span className="ep-section-icon">🎞️</span>
-        片段详情
-      </div>
-
-      <div className="ep-clip-detail">
-        <ClipTypeAndDuration clip={clip} currentMode={currentMode} onClipUpdate={onClipUpdate} />
-
-        <AdvancedEntries
-          clip={clip}
-          onOpenTransitionDrawer={onOpenTransitionDrawer}
-          onOpenSpeedDrawer={onOpenSpeedDrawer}
-          onOpenTtsDrawer={onOpenTtsDrawer}
-        />
-
-        {clip.type === "voice" && (
-          <VoiceMaterialSection
-            clip={clip}
-            voiceMaterials={voiceMaterials}
-            voiceMaterialsLoading={voiceMaterialsLoading}
-            onClipUpdate={onClipUpdate}
-            onRefreshVoiceMaterials={onRefreshVoiceMaterials}
-            onClipVoiceSelect={onClipVoiceSelect}
-            previewingId={previewingId}
-            onPreviewVoice={onPreviewVoice}
-            onStopPreview={onStopPreview}
-          />
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default ClipDetailSection

apps/web/src/pages/editing-planner/components/editing-drawers/ClipLevelDrawers.tsx

@@ -1,74 +0,0 @@
-import React from "react"
-import { DEFAULT_TRANSITION, DEFAULT_SPEED, DEFAULT_TTS_CONFIG } from "../../types"
-import TransitionSelector from "../TransitionSelector"
-import SpeedPanel from "../SpeedPanel"
-import TtsPanel from "../TtsPanel"
-import type { ClipLevelDrawersProps } from "./types"
-
-/**
- * 片段级抽屉（转场/调速/TTS）
- * 这些抽屉针对特定片段，需要 targetClipId 来定位和读取当前配置
- */
-export const ClipLevelDrawers: React.FC<ClipLevelDrawersProps> = ({
-  clips,
-  transitionDrawerOpen,
-  transitionTargetClipId,
-  onCloseTransitionDrawer,
-  onTransitionChange,
-  speedDrawerOpen,
-  speedTargetClipId,
-  onCloseSpeedDrawer,
-  onSpeedChange,
-  onApplySpeedAll,
-  ttsDrawerOpen,
-  ttsTargetClipId,
-  onCloseTtsDrawer,
-  onTtsChange,
-}) => {
-  const transitionConfig = transitionTargetClipId
-    ? (clips.find((c) => c.id === transitionTargetClipId)?.transition ?? DEFAULT_TRANSITION)
-    : DEFAULT_TRANSITION
-  const transitionTitle = transitionTargetClipId ? "片段转场设置" : "全局默认转场"
-
-  const speedConfig = speedTargetClipId
-    ? (clips.find((c) => c.id === speedTargetClipId)?.speed ?? DEFAULT_SPEED)
-    : DEFAULT_SPEED
-
-  const ttsConfig = ttsTargetClipId
-    ? (clips.find((c) => c.id === ttsTargetClipId)?.tts_config ?? DEFAULT_TTS_CONFIG)
-    : DEFAULT_TTS_CONFIG
-
-  return (
-    <>
-      {/* 转场特效选择器 */}
-      <TransitionSelector
-        open={transitionDrawerOpen}
-        onClose={onCloseTransitionDrawer}
-        config={transitionConfig}
-        onChange={onTransitionChange}
-        title={transitionTitle}
-      />
-
-      {/* 片段调速面板 */}
-      {speedTargetClipId && (
-        <SpeedPanel
-          open={speedDrawerOpen}
-          onClose={onCloseSpeedDrawer}
-          config={speedConfig}
-          onChange={onSpeedChange}
-          onApplyAll={onApplySpeedAll}
-        />
-      )}
-
-      {/* TTS 配音面板 */}
-      {ttsTargetClipId && (
-        <TtsPanel
-          open={ttsDrawerOpen}
-          onClose={onCloseTtsDrawer}
-          config={ttsConfig}
-          onChange={onTtsChange}
-        />
-      )}
-    </>
-  )
-}

apps/web/src/pages/editing-planner/components/editing-drawers/GlobalDrawers.tsx

@@ -1,119 +0,0 @@
-import React from "react"
-import BgmSelector from "../BgmSelector"
-import SubtitleStylePanel from "../SubtitleStylePanel"
-import WatermarkPanel from "../WatermarkPanel"
-import IntroOutroPanel from "../IntroOutroPanel"
-import PipConfigPanel from "../PipConfigPanel"
-import FilterPanel from "../FilterPanel"
-import GreenScreenPanel from "../GreenScreenPanel"
-import StickerPanel from "../StickerPanel"
-import type { GlobalDrawersProps, BgmDrawerProps, SubtitleDrawerProps } from "./types"
-
-/**
- * 全局设置抽屉（BGM/字幕/水印/片头片尾/混剪/滤镜/绿幕/贴纸）
- */
-export const GlobalDrawers: React.FC<BgmDrawerProps & SubtitleDrawerProps & GlobalDrawersProps> = ({
-  bgmDrawerOpen,
-  bgmSettings,
-  onCloseBgmDrawer,
-  onChangeBgmSettings,
-  subtitleDrawerOpen,
-  subtitleSettings,
-  onCloseSubtitleDrawer,
-  onChangeSubtitleSettings,
-  totalDuration,
-  watermarkDrawerOpen,
-  watermarkSettings,
-  onCloseWatermarkDrawer,
-  onWatermarkChange,
-  introOutroDrawerOpen,
-  introOutroSettings,
-  onCloseIntroOutroDrawer,
-  onIntroOutroChange,
-  pipDrawerOpen,
-  pipSettings,
-  onClosePipDrawer,
-  onPipChange,
-  filterDrawerOpen,
-  filterSettings,
-  onCloseFilterDrawer,
-  onFilterChange,
-  chromaKeyDrawerOpen,
-  chromaKeySettings,
-  onCloseChromaKeyDrawer,
-  onChromaKeyChange,
-  stickerDrawerOpen,
-  stickerSettings,
-  onCloseStickerDrawer,
-  onStickerChange,
-}) => {
-  return (
-    <>
-      {/* BGM 选择器 */}
-      <BgmSelector
-        open={bgmDrawerOpen}
-        onClose={onCloseBgmDrawer}
-        config={bgmSettings}
-        onChange={onChangeBgmSettings}
-      />
-
-      {/* 字幕样式配置 */}
-      <SubtitleStylePanel
-        open={subtitleDrawerOpen}
-        onClose={onCloseSubtitleDrawer}
-        config={subtitleSettings}
-        onChange={onChangeSubtitleSettings}
-      />
-
-      {/* 水印配置面板 */}
-      <WatermarkPanel
-        open={watermarkDrawerOpen}
-        onClose={onCloseWatermarkDrawer}
-        config={watermarkSettings}
-        onChange={onWatermarkChange}
-      />
-
-      {/* 片头片尾配置面板 */}
-      <IntroOutroPanel
-        open={introOutroDrawerOpen}
-        onClose={onCloseIntroOutroDrawer}
-        config={introOutroSettings}
-        onChange={onIntroOutroChange}
-      />
-
-      {/* 混剪配置面板 */}
-      <PipConfigPanel
-        open={pipDrawerOpen}
-        onClose={onClosePipDrawer}
-        config={pipSettings}
-        onChange={onPipChange}
-        totalDuration={totalDuration}
-      />
-
-      {/* 滤镜调色面板 */}
-      <FilterPanel
-        open={filterDrawerOpen}
-        onClose={onCloseFilterDrawer}
-        config={filterSettings}
-        onChange={onFilterChange}
-      />
-
-      {/* 绿幕抠像面板 */}
-      <GreenScreenPanel
-        open={chromaKeyDrawerOpen}
-        onClose={onCloseChromaKeyDrawer}
-        config={chromaKeySettings}
-        onChange={onChromaKeyChange}
-      />
-
-      {/* 贴纸面板 */}
-      <StickerPanel
-        open={stickerDrawerOpen}
-        onClose={onCloseStickerDrawer}
-        config={stickerSettings}
-        onChange={onStickerChange}
-        totalDuration={totalDuration}
-      />
-    </>
-  )
-}

apps/web/src/pages/editing-planner/components/editing-drawers/types.ts

@@ -1,101 +0,0 @@
-import type { TemplateCategory } from "@/api/editing-planner"
-import type {
-  ClipData,
-  TransitionConfig,
-  SpeedConfig,
-  TtsConfig,
-  WatermarkConfig,
-  IntroOutroConfig,
-  PipConfig,
-  FilterConfig,
-  ChromaKeyConfig,
-  StickerConfig,
-} from "../../types"
-import type { SubtitleStyleConfig } from "../../types/subtitle"
-import type { BgmMixConfig } from "@/api/bgm"
-
-/** 保存弹窗 Props */
-export interface SaveModalDrawerProps {
-  saveModalOpen: boolean
-  saveLoading: boolean
-  isUpdate: boolean
-  draftName: string
-  draftCategory: string
-  draftTags: string
-  categories: TemplateCategory[]
-  estimatedDuration: number
-  onNameChange: (name: string) => void
-  onCategoryChange: (cat: string) => void
-  onTagsChange: (tags: string) => void
-  onSave: () => Promise<void>
-  onCancelSave: () => void
-}
-
-/** BGM 抽屉 Props */
-export interface BgmDrawerProps {
-  bgmDrawerOpen: boolean
-  bgmSettings: BgmMixConfig
-  onCloseBgmDrawer: () => void
-  onChangeBgmSettings: (config: BgmMixConfig) => void
-}
-
-/** 字幕抽屉 Props */
-export interface SubtitleDrawerProps {
-  subtitleDrawerOpen: boolean
-  subtitleSettings: SubtitleStyleConfig
-  onCloseSubtitleDrawer: () => void
-  onChangeSubtitleSettings: (config: SubtitleStyleConfig) => void
-}
-
-/** 单个片段级抽屉通用 Props */
-export interface ClipLevelDrawersProps {
-  clips: ClipData[]
-  transitionDrawerOpen: boolean
-  transitionTargetClipId: string | null
-  onCloseTransitionDrawer: () => void
-  onTransitionChange: (config: TransitionConfig) => void
-  speedDrawerOpen: boolean
-  speedTargetClipId: string | null
-  onCloseSpeedDrawer: () => void
-  onSpeedChange: (config: SpeedConfig) => void
-  onApplySpeedAll: (config: SpeedConfig) => void
-  ttsDrawerOpen: boolean
-  ttsTargetClipId: string | null
-  onCloseTtsDrawer: () => void
-  onTtsChange: (config: TtsConfig) => void
-}
-
-/** 全局设置抽屉 Props */
-export interface GlobalDrawersProps {
-  totalDuration: number
-  watermarkDrawerOpen: boolean
-  watermarkSettings: WatermarkConfig
-  onCloseWatermarkDrawer: () => void
-  onWatermarkChange: (config: WatermarkConfig) => void
-  introOutroDrawerOpen: boolean
-  introOutroSettings: IntroOutroConfig
-  onCloseIntroOutroDrawer: () => void
-  onIntroOutroChange: (config: IntroOutroConfig) => void
-  pipDrawerOpen: boolean
-  pipSettings: PipConfig
-  onClosePipDrawer: () => void
-  onPipChange: (config: PipConfig) => void
-  filterDrawerOpen: boolean
-  filterSettings: FilterConfig
-  onCloseFilterDrawer: () => void
-  onFilterChange: (config: FilterConfig) => void
-  chromaKeyDrawerOpen: boolean
-  chromaKeySettings: ChromaKeyConfig
-  onCloseChromaKeyDrawer: () => void
-  onChromaKeyChange: (config: ChromaKeyConfig) => void
-  stickerDrawerOpen: boolean
-  stickerSettings: StickerConfig
-  onCloseStickerDrawer: () => void
-  onStickerChange: (config: StickerConfig) => void
-}
-
-export type EditingDrawersProps = SaveModalDrawerProps &
-  BgmDrawerProps &
-  SubtitleDrawerProps &
-  ClipLevelDrawersProps &
-  GlobalDrawersProps

apps/web/src/pages/editing-planner/components/filter/FilterManualAdjust.tsx

@@ -1,40 +0,0 @@
-/**
- * 滤镜手动调节组件
- */
-import React from "react"
-import type { FilterConfig } from "../../types"
-import { MANUAL_ADJUST_ITEMS } from "../../constants/filter"
-
-type FilterKey = keyof Pick<
-  FilterConfig,
-  "brightness" | "contrast" | "saturation" | "temperature" | "tint" | "sharpness"
->
-
-interface FilterManualAdjustProps {
-  config: FilterConfig
-  onChange: (key: FilterKey, value: number) => void
-}
-
-const FilterManualAdjust: React.FC<FilterManualAdjustProps> = ({ config, onChange }) => {
-  return (
-    <div className="filter-section">
-      <div className="filter-section-title">手动调节</div>
-      {MANUAL_ADJUST_ITEMS.map((item) => (
-        <div key={item.key} className="filter-slider-row">
-          <span className="filter-slider-label">{item.label}</span>
-          <input
-            type="range"
-            className="filter-slider"
-            min={item.min}
-            max={item.max}
-            value={config[item.key as FilterKey]}
-            onChange={(e) => onChange(item.key as FilterKey, Number(e.target.value))}
-          />
-          <span className="filter-slider-value">{config[item.key as FilterKey]}</span>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default FilterManualAdjust

apps/web/src/pages/editing-planner/components/filter/FilterPresetGrid.tsx

@@ -1,34 +0,0 @@
-/**
- * 滤镜预设选择组件
- */
-import React from "react"
-import type { FilterPreset } from "../../types"
-import { FILTER_PRESET_LABELS } from "../../types"
-import { PRESET_LIST, PRESET_GRADIENTS } from "../../constants/filter"
-
-interface FilterPresetGridProps {
-  selectedPreset: FilterPreset
-  onPresetSelect: (preset: FilterPreset) => void
-}
-
-const FilterPresetGrid: React.FC<FilterPresetGridProps> = ({ selectedPreset, onPresetSelect }) => {
-  return (
-    <div className="filter-section">
-      <div className="filter-section-title">预设滤镜</div>
-      <div className="filter-presets">
-        {PRESET_LIST.map((p) => (
-          <button
-            key={p}
-            className={`filter-preset-item${selectedPreset === p ? " active" : ""}`}
-            onClick={() => onPresetSelect(p)}
-          >
-            <div className="filter-preset-preview" style={{ background: PRESET_GRADIENTS[p] }} />
-            <span className="filter-preset-label">{FILTER_PRESET_LABELS[p]}</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default FilterPresetGrid

apps/web/src/pages/editing-planner/components/green-screen/GreenScreenCustomColor.tsx

@@ -1,37 +0,0 @@
-import React from "react"
-
-interface GreenScreenCustomColorProps {
-  color: string
-  onColorChange: (color: string) => void
-}
-
-export const GreenScreenCustomColor: React.FC<GreenScreenCustomColorProps> = ({
-  color,
-  onColorChange,
-}) => {
-  const handleColorInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onColorChange(e.target.value)
-  }
-
-  return (
-    <div className="green-section">
-      <div className="green-section-title">自定义颜色</div>
-      <div className="green-color-row">
-        <input
-          type="color"
-          className="green-color-picker"
-          value={color}
-          onChange={handleColorInput}
-        />
-        <input
-          type="text"
-          className="green-color-hex"
-          value={color}
-          onChange={handleColorInput}
-          placeholder="#00FF00"
-        />
-        <div className="green-color-swatch" style={{ background: color }} />
-      </div>
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/green-screen/GreenScreenPresets.tsx

@@ -1,36 +0,0 @@
-import React from "react"
-import type { ChromaKeyColorPreset } from "../../types"
-import { CHROMA_KEY_PRESET_LABELS, CHROMA_KEY_PRESET_COLORS } from "../../types"
-
-interface GreenScreenPresetsProps {
-  selectedPreset: ChromaKeyColorPreset | null
-  onPresetSelect: (preset: ChromaKeyColorPreset) => void
-}
-
-const PRESET_LIST: ChromaKeyColorPreset[] = ["green", "blue", "red", "pure_green", "soft_green"]
-
-export const GreenScreenPresets: React.FC<GreenScreenPresetsProps> = ({
-  selectedPreset,
-  onPresetSelect,
-}) => {
-  return (
-    <div className="green-section">
-      <div className="green-section-title">颜色预设</div>
-      <div className="green-presets">
-        {PRESET_LIST.map((p) => (
-          <button
-            key={p}
-            className={`green-preset-btn${selectedPreset === p ? " active" : ""}`}
-            onClick={() => onPresetSelect(p)}
-          >
-            <span
-              className="green-preset-dot"
-              style={{ background: CHROMA_KEY_PRESET_COLORS[p] }}
-            />
-            <span className="green-preset-label">{CHROMA_KEY_PRESET_LABELS[p]}</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}

apps/web/src/pages/editing-planner/components/green-screen/GreenScreenPreview.tsx

@@ -1,28 +0,0 @@
-import React from "react"
-
-interface GreenScreenPreviewProps {
-  color: string
-  blend: number
-}
-
-export const GreenScreenPreview: React.FC<GreenScreenPreviewProps> = ({ color, blend }) => {
-  return (
-    <div className="green-section">
-      <div className="green-section-title">效果预览</div>
-      <div className="green-preview-box">
-        <div className="green-preview-bg" style={{ background: color, opacity: 0.3 }} />
-        <div className="green-preview-subject">
-          <div className="green-preview-circle" />
-          <div className="green-preview-text">主体</div>
-        </div>
-        <div
-          className="green-preview-edge"
-          style={{
-            borderColor: color,
-            filter: `blur(${blend / 10}px)`,
-          }}
-        />
-      </div>
-    </div>
-  )
-}