debug: e2e v3 - fix model import path

.gitea/workflows/ci-pipeline.yml

@@ -1022,22 +1022,12 @@ 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="$EXTRA_TAGS" bash scripts/ci/docker_build_push.sh $NO_CACHE_FLAG ${{ matrix.dockerfile }} "${IMAGE_TAG}" "${CACHE_REF}" $EXTRA_BUILD_ARGS; then
+          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
             echo "✅ Docker build 成功"
             break
           fi
@@ -1050,7 +1040,7 @@ jobs:
           fi
         done
 
-        echo "${{ matrix.service_display }} image pushed: ${IMAGE_TAG} (+ ${PUSHED_TAGS_SUMMARY})"
+        echo "${{ matrix.service_display }} image pushed: ${IMAGE_TAG} (+ ${BRANCH_TAG})"
 
     - name: Job duration summary
       if: always()
@@ -1254,11 +1244,9 @@ jobs:
         ACR_PASSWORD: ${{ secrets.ACR_PASSWORD }}
       run: |
         set -eux
-        # 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_host="${STAGING_SSH_HOST:-47.98.113.167}"
         staging_user="${STAGING_SSH_USER:-root}"
-        staging_port="${STAGING_SSH_PORT:-22}"
+        staging_port="${STAGING_SSH_PORT:-22222}"
         echo "Host: $staging_host"
         echo "Port: $staging_port"
 
@@ -1482,6 +1470,7 @@ jobs:
       - validate-security
       - validate-python
       - unit-tests
+      - frontend-lint
       - frontend-unit-test
     if: github.event_name == 'push' && github.ref_name == 'main' && !failure() && !cancelled()
     strategy:
@@ -2135,4 +2124,3 @@ 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

.gitea/workflows/e2e-lipsync.yml

@@ -0,0 +1,28 @@
+name: "E2E lipsync verify v3"
+on:
+  push:
+    branches: [debug/e2e-lipsync]
+  workflow_dispatch:
+jobs:
+  e2e:
+    runs-on: runtime-builder
+    timeout-minutes: 10
+    steps:
+      - name: Setup SSH
+        shell: bash
+        env:
+          STAGING_SSH_KEY: ${{ secrets.PREVIEW_SSH_KEY }}
+        run: |
+          set -eux
+          which ssh || (apt-get update -qq && apt-get install -y -qq openssh-client)
+          mkdir -p ~/.ssh && chmod 700 ~/.ssh
+          printf "%s" "$STAGING_SSH_KEY" > ~/.ssh/id_rsa
+          chmod 600 ~/.ssh/id_rsa
+          ssh-keyscan -p 22222 -H 47.98.113.167 >> ~/.ssh/known_hosts 2>/dev/null
+      - name: Run
+        shell: bash
+        run: |
+          set -x
+          echo 'IyEvYmluL2Jhc2gKc2V0IC14CmVjaG8gIj09PSAxLiBSZWNlbnQgbGlwc3luYyBqb2JzIChjb3JyZWN0IG1vZGVsIHBhdGgpID09PSIKZG9ja2VyIGV4ZWMgeGlhb3hpYS1hcGktc3RhZ2luZyBzaCAtYyAiY2QgL2FwcCAmJiBweXRob24gLWMgXCIKZnJvbSBhcHAuZGIgaW1wb3J0IFNlc3Npb25Mb2NhbApmcm9tIHBhY2thZ2VzLmFkYXB0ZXJzLnNxbGFsY2hlbXlfaW1wbC5tb2RlbHMgaW1wb3J0IExpcHN5bmNKb2JNb2RlbCBhcyBMSgpkYiA9IFNlc3Npb25Mb2NhbCgpCnRvdGFsID0gZGIucXVlcnkoTEopLmNvdW50KCkKcHJpbnQoZidUb3RhbCBsaXBzeW5jIGpvYnM6IHt0b3RhbH0nKQpqb2JzID0gZGIucXVlcnkoTEopLm9yZGVyX2J5KExKLmNyZWF0ZWRfYXQuZGVzYygpKS5saW1pdCgxMCkuYWxsKCkKZm9yIGogaW4gam9iczoKICAgIGVyciA9IChqLmVycm9yX21lc3NhZ2Ugb3IgJycpWzoxMDBdCiAgICBwcmludChmJyAgaWQ9e2ouaWR9IHVzZXI9e2oudXNlcl9pZH0gc3RhdHVzPXtqLnN0YXR1c30gZXJyX2NvZGU9e2ouZXJyb3JfY29kZX0gZXJyPXtlcnJ9JykKZGIuY2xvc2UoKQpcIiIgMj4mMSB8IHRhaWwgLTMwCmVjaG8gIiIKZWNobyAiPT09IDIuIFRlc3QgdXNlcnMgPT09Igpkb2NrZXIgZXhlYyB4aWFveGlhLWFwaS1zdGFnaW5nIHNoIC1jICJjZCAvYXBwICYmIHB5dGhvbiAtYyBcIgpmcm9tIGFwcC5kYiBpbXBvcnQgU2Vzc2lvbkxvY2FsCmZyb20gcGFja2FnZXMuYWRhcHRlcnMuc3FsYWxjaGVteV9pbXBsLm1vZGVscyBpbXBvcnQgVXNlck1vZGVsIGFzIFUKZGIgPSBTZXNzaW9uTG9jYWwoKQp1c2VycyA9IGRiLnF1ZXJ5KFUpLm9yZGVyX2J5KFUuY3JlYXRlZF9hdC5kZXNjKCkpLmxpbWl0KDUpLmFsbCgpCmZvciB1IGluIHVzZXJzOgogICAgcHJpbnQoZicgIGlkPXt1LmlkfSBlbWFpbD17dS5lbWFpbH0gcGhvbmU9e2dldGF0dHIodSxcInBob25lX251bWJlclwiLE5vbmUpfSBhY3RpdmU9e2dldGF0dHIodSxcImlzX2FjdGl2ZVwiLE5vbmUpfScpCmRiLmNsb3NlKCkKXCIiIDI+JjEgfCB0YWlsIC0xNQplY2hvICIiCmVjaG8gIj09PSAzLiBBUEkgd29ya2VyIGxvZ3M6IGFueSBsaXBzeW5jIHRhc2sgZXhlY3V0aW9uIGhpc3Rvcnk/ID09PSIKZG9ja2VyIGxvZ3MgeGlhb3hpYS13b3JrZXItc3RhZ2luZyAyPiYxIHwgZ3JlcCAtaUUgImxpcHN5bmNfdHRzfHN5bnRoZXNpemVfYW5kX3N1Ym1pdHxBc3luY0Rpc3BhdGNoRmFpbGVkfHR0c19wcm9jZXNzaW5nfHR0c19wcm94eSIgfCB0YWlsIC0yMAplY2hvICIiCmVjaG8gIj09PSA0LiBQdWJsaWMgR0VUIC9oZWFsdGggd2l0aCBHRVQgbWV0aG9kID09PSIKY3VybCAtc2YgLS1tYXgtdGltZSAxMCBodHRwczovL3N0YWdpbmctYXBpLnhpYW94aWFqaWFuamkuY29tL2hlYWx0aCAyPiYxIHwgaGVhZCAtNQplY2hvICIiCmVjaG8gIj09PSA1LiBQdWJsaWMgd2ViIHJvb3QgPT09IgpjdXJsIC1zZiAtLW1heC10aW1lIDEwIGh0dHBzOi8vc3RhZ2luZy54aWFveGlhamlhbmppLmNvbS8gMj4mMSB8IGhlYWQgLTUK' | base64 -d > /tmp/e2e.sh
+          chmod +x /tmp/e2e.sh
+          ssh -p 22222 -i ~/.ssh/id_rsa -o StrictHostKeyChecking=no root@47.98.113.167 'bash -s' < /tmp/e2e.sh

EMPTY_COMMIT.txt

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

README.md

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

alembic/versions/075_add_sentence_timings.py

@@ -1,27 +0,0 @@
-"""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/router.py

@@ -6,7 +6,6 @@ from app.api.routes.assets import router as assets_router
 from app.api.routes.auth import router as auth_router
 from app.api.routes.chunked_upload import router as chunked_upload_router
 from app.api.routes.classification_jobs import router as classification_jobs_router
-from app.api.routes.clips_standalone import router as clips_standalone_router
 from app.api.routes.cover_templates import router as cover_templates_router
 from app.api.routes.duplication import router as duplication_router
 from app.api.routes.feature_flags import router as feature_flags_router
@@ -157,10 +156,6 @@ api_router.include_router(
     prefix="/templates",
     tags=["Template"],
 )
-api_router.include_router(
-    clips_standalone_router,
-    tags=["Clips"],
-)
 api_router.include_router(
     templates_editor_router,
     prefix="/templates/{template_id}/editor",

apps/api/app/api/routes/_default_template.py

@@ -1,66 +0,0 @@
-"""P0 fix: 共享的默认模板自动兜底逻辑。"""
-
-from __future__ import annotations
-
-import logging
-from typing import Optional
-
-from sqlalchemy.orm import Session
-
-logger = logging.getLogger(__name__)
-
-
-def get_or_create_default_template_id(db: Session, user_id: str) -> Optional[str]:
-    """为用户查找一个有效模板；若不存在则自动创建默认配音模板。"""
-    from packages.adapters.sqlalchemy_impl.models import TemplateClipConfigModel, TemplateModel
-    from packages.adapters.sqlalchemy_impl.template_repository import SQLAlchemyTemplateRepository
-    from packages.application.template.commands import CreateTemplateCommand, SegmentCommand
-    from packages.application.template.use_cases import CreateTemplateUseCase
-
-    existing = (
-        db.query(TemplateModel)
-        .filter(TemplateModel.user_id == user_id, TemplateModel.is_active.is_(True))
-        .order_by(TemplateModel.created_at.asc())
-        .first()
-    )
-    if existing is not None:
-        has_seg = (
-            db.query(TemplateClipConfigModel.id).filter(TemplateClipConfigModel.template_id == existing.id).first()
-        )
-        if has_seg:
-            return existing.id
-
-    try:
-        repo = SQLAlchemyTemplateRepository(db)
-        cmd = CreateTemplateCommand(
-            user_id=user_id,
-            name="默认配音模板",
-            mode="voice_over",
-            category="default",
-            tags=[],
-            title_config={},
-            subtitle_config={},
-            bgm_config={},
-            estimated_duration=0.0,
-            segments=[SegmentCommand(segment_order=0, duration_min=1.0, duration_max=30.0)],
-        )
-        tpl = CreateTemplateUseCase(repo).execute(cmd)
-        db.commit()
-        logger.info("[default-template] 自动创建默认模板: user=%s tpl=%s", user_id, tpl.id)
-        return tpl.id
-    except Exception:
-        db.rollback()
-        existing2 = (
-            db.query(TemplateModel)
-            .filter(TemplateModel.user_id == user_id, TemplateModel.is_active.is_(True))
-            .order_by(TemplateModel.created_at.asc())
-            .first()
-        )
-        if existing2 is not None:
-            has_seg2 = (
-                db.query(TemplateClipConfigModel.id).filter(TemplateClipConfigModel.template_id == existing2.id).first()
-            )
-            if has_seg2:
-                return existing2.id
-        logger.exception("[default-template] 自动创建默认模板失败: user=%s", user_id)
-        return None

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

@@ -11,14 +11,13 @@
 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,
-    FinalizeRenderResponse,
+    SmartCoverRequest,
     SmartCoverResponse,
 )
 from app.services.ai_avatar_cover_service import generate_smart_cover
@@ -78,16 +77,10 @@ def create_render_job(
         from app.tasks.ai_avatar_render import execute_ai_avatar_render
 
         execute_ai_avatar_render.delay(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)
+    except Exception:
+        logger.warning("Celery 任务提交失败，渲染任务已创建但未触发执行: %s", job.id)
 
-    return AiAvatarRenderJobResponse.model_validate(job)
+    return job
 
 
 # ── GET /jobs — 任务列表 ─────────────────────────────────────────────────
@@ -179,54 +172,38 @@ def retry_render_job(
         from app.tasks.ai_avatar_render import execute_ai_avatar_render
 
         execute_ai_avatar_render.delay(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)
+    except Exception:
+        logger.warning("Celery 任务提交失败，重试任务已重置但未触发执行: %s", job.id)
 
-    return AiAvatarRenderJobResponse.model_validate(job)
+    return job
 
 
-# ── POST /{job_id}/smart-cover — 从最终成片智能抽封面（步骤②）────────
+
+# ── POST /smart-cover — 智能获取封面（MediaKit 抽帧 + 评分选帧）────────
 
 
-@router.post("/{job_id}/smart-cover", response_model=SmartCoverResponse)
-def generate_render_smart_cover(
-    job_id: str,
+@router.post("/smart-cover", response_model=SmartCoverResponse)
+def generate_avatar_smart_cover(
+    body: SmartCoverRequest,
     current_user: AuthenticatedUser = Depends(get_current_user),
-    db: Session = Depends(get_db_session),
-):
-    """从最终渲染成片智能抽帧生成封面（MediaKit 抽帧 + 评分选最佳帧 + 转存 OSS）.
+) -> SmartCoverResponse:
+    """智能获取数字人视频封面.
 
-    - 必须等渲染任务 completed 后才可调用（否则返回 400）
-    - 生成成功后自动更新 render_job 的 cover_config 与 output_cover_url
+    复用智能剪辑的 MediaKit 抽帧 + 质量评分选最佳帧逻辑（非 FFmpeg 简单截帧），
+    并将选中帧转存到自家 OSS，返回非临时的封面公网 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 为空")
+    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")
 
     try:
-        # 从最终成片抽帧，帧本身已含标题/B-roll，直接转存 OSS
-        cover_url = generate_smart_cover(video_url, job_id=job_id, max_frames=5)
+        cover_url = generate_smart_cover(video_url, max_frames=body.max_frames)
     except Exception as exc:
         logger.error(
-            "渲染成片智能封面生成异常: user=%s render_id=%s video_url=%s err=%s",
-            current_user.user.id,
-            job_id,
-            video_url[:80],
-            exc,
+            "智能封面生成异常: user=%s video_url=%s err=%s",
+            current_user.user.id, video_url[:80], exc,
             exc_info=True,
         )
         cover_url = ""
@@ -237,88 +214,5 @@ def generate_render_smart_cover(
             status="fallback_failed",
             message="智能抽帧失败（MediaKit 不可用或抽帧异常），请稍后重试",
         )
-
-    # 更新 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],
-    )
+    logger.info("智能封面生成成功: user=%s cover_url=%s", current_user.user.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/clips_standalone.py

@@ -1,93 +0,0 @@
-"""独立的从素材创建片段端点（不依赖template_id路径参数）.
-
-POST /api/v1/clips/from-assets
-- 与 /api/v1/templates/{template_id}/editor/clips/from-assets 功能一致
-- 区别：template_id 从 body 传入（可选），为空时后端自动创建/查找默认模板
-- 解决前端首次加载时 templateId 为空导致双斜杠 404 的问题
-- 内部复用 resolve_draft_plan_id 和 create_clips_from_assets_editor 的核心逻辑
-"""
-
-from __future__ import annotations
-
-import logging
-
-from app.auth import AuthenticatedUser, get_current_user
-from app.dependencies import get_asset_repository, get_db_session
-from app.services.edit_plan_service import EditPlanService
-from app.services.edit_template_service import EditTemplateService
-from fastapi import APIRouter, BackgroundTasks, Depends
-from sqlalchemy.orm import Session
-
-from packages.adapters.sqlalchemy_impl.asset_repository import SQLAlchemyAssetRepository
-
-from ._default_template import get_or_create_default_template_id
-from .templates_editor.clips import create_clips_from_assets_editor
-from .templates_editor.dependencies import resolve_draft_plan_id
-from .templates_editor.schemas import ClipsFromAssetsRequest, ClipsFromAssetsResponse
-
-logger = logging.getLogger(__name__)
-router = APIRouter(tags=["Clips"])
-
-
-class StandaloneClipsRequest(ClipsFromAssetsRequest):
-    """扩展请求：template_id 可选（不传则后端自动兜底默认模板）。"""
-
-    template_id: str | None = None
-
-
-def _get_editor_services_direct(db: Session) -> tuple[EditTemplateService, EditPlanService]:
-    """直接构造服务实例（非 Depends 版本，供独立端点内部调用）。"""
-    return EditTemplateService(db), EditPlanService(db)
-
-
-@router.post("/clips/from-assets", response_model=ClipsFromAssetsResponse)
-def create_clips_from_assets(
-    body: StandaloneClipsRequest,
-    background_tasks: BackgroundTasks,
-    db: Session = Depends(get_db_session),
-    current_user: AuthenticatedUser = Depends(get_current_user),
-    asset_repo: SQLAlchemyAssetRepository = Depends(get_asset_repository),
-) -> ClipsFromAssetsResponse:
-    """从素材批量创建片段（template_id 可选，为空自动兜底）。"""
-    user_id = str(current_user.user.id)
-    services = _get_editor_services_direct(db)
-
-    # 1. 解析/兜底 template_id，拿到 plan_id
-    template_id = (body.template_id or "").strip()
-    if not template_id:
-        template_id = get_or_create_default_template_id(db, user_id)
-        if not template_id:
-            from fastapi import HTTPException
-            from fastapi import status as http_status
-
-            raise HTTPException(
-                status_code=http_status.HTTP_500_INTERNAL_SERVER_ERROR,
-                detail="无法自动创建默认模板，请刷新页面重试",
-            )
-    plan_id = resolve_draft_plan_id(
-        template_id=template_id,
-        services=services,
-        current_user=current_user,
-        db=db,
-        auto_create_default=False,  # 上面已兜底过
-    )
-
-    # 2. 构造标准化请求（去除独立端扩展字段），复用原端点核心逻辑
-    core_body = ClipsFromAssetsRequest(
-        asset_ids=body.asset_ids,
-        clip_type=body.clip_type,
-        clip_count=body.clip_count,
-        required_clips_count=body.required_clips_count,
-    )
-
-    # 3. 直接调用原端点函数（此时所有 Depends 依赖已手动传入）
-    return create_clips_from_assets_editor(
-        template_id=template_id,
-        body=core_body,
-        background_tasks=background_tasks,
-        plan_id=plan_id,
-        services=services,
-        asset_repo=asset_repo,
-        db=db,
-        current_user=current_user,
-    )

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

@@ -766,12 +766,7 @@ 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,10 +58,27 @@ def _variant_value(values: list[str], index: int, fallback: str = "") -> str:
 
 
 def _query_voice_durations(db: Session, voice_ids: list[str]) -> list[float]:
-    """[已下沉] 路由层兼容别名 → app.services.generation_common.query_voice_durations。"""
-    from app.services.generation_common import query_voice_durations
+    """批量查询配音素材时长（秒），#1749 配音时长分配用。
 
-    return query_voice_durations(db, voice_ids)
+    逐项 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]
 
 
 def _to_generation_task_response(task) -> GenerationTaskResponse:
@@ -167,10 +184,61 @@ def _writeback_edit_plan_config(
     title_config: dict | None,
     db: Session,
 ) -> None:
-    """[已下沉] 路由层兼容别名 → app.services.generation_common.writeback_edit_plan_config。"""
-    from app.services.generation_common import writeback_edit_plan_config
+    """任务入队成功后，回写 EditPlan.config：generation_task_id + title_config。
 
-    return writeback_edit_plan_config(plan_id, task_id, title_config, db)
+    用 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
 
 
 def _resolve_project_and_library(
@@ -421,14 +489,25 @@ def create_generation_task(
         # 各变体配音时长（查询硬化：异常 → 0.0 不阻断）
         voice_durations = _query_voice_durations(db, variant_voices)
 
-        # 解析批量源 plan：优先前端传入；否则按 template_id + user 查最新（公共函数）
-        from app.services.generation_common import resolve_latest_plan_by_template
+        # 解析批量源 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
 
-        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 ""
-        )
+                _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)
 
         if not batch_source_plan_id and not request.variant_plan_ids:
             # 无任何可用源 plan：批量变体无从选片，明确报错，严禁静默共用/同源
@@ -473,12 +552,7 @@ def create_generation_task(
                 ) from clone_err
             variant_plan_ids.append(_plan0.id)
 
-            # #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做素材区间避让）
+            # 变体 1..N-1 独立选片
             for task_index in range(1, count):
                 variant = None
                 last_err: Exception | None = None
@@ -490,7 +564,6 @@ 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:
@@ -522,16 +595,7 @@ def create_generation_task(
                     ) from last_err
                 variant_plan_ids.append(variant.id)
 
-                # #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 已内置幂等判断，重复调用安全）
+        # ③ 配音时长分配（回传 plan / clone 变体0 均需幂等分配；reselect 已在选片时分配）
         for _vi, _pid in enumerate(variant_plan_ids):
             _vd = voice_durations[_vi] if _vi < len(voice_durations) else 0.0
             if _vd > 0:
@@ -552,13 +616,24 @@ def create_generation_task(
             )
             _single_vd: list[float] = _query_voice_durations(db, _voices)
             _single_dur = _single_vd[0] if _single_vd else 0.0
-            from app.services.generation_common import resolve_latest_plan_by_template
+            _single_plan = request.source_edit_plan_id
+            if not _single_plan and request.template_id:
+                try:
+                    from packages.adapters.sqlalchemy_impl.models import EditPlanModel
 
-            _single_plan = (
-                request.source_edit_plan_id
-                or resolve_latest_plan_by_template(db, template_id=request.template_id, user_id=user_id)
-                or ""
-            )
+                    _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)
             if _single_dur > 0 and _single_plan:
                 from app.services.edit_plan_service import EditPlanService
 

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

@@ -30,74 +30,6 @@ logger = logging.getLogger(__name__)
 router = APIRouter()
 
 
-def _get_or_create_default_template_id(db: Session, user_id: str) -> str | None:
-    """为用户查找一个有效模板；若不存在则自动创建默认配音模板。
-
-    前端 #1911 删除了模板选择 UI，当调用方未传 template_id/source_edit_plan_id
-    时（如剪辑页首次进入直接选片），后端兜底查找/创建默认模板，避免 400。
-
-    Returns:
-        template_id（字符串）；失败时返回 None。
-    """
-
-    from packages.adapters.sqlalchemy_impl.models import TemplateClipConfigModel, TemplateModel
-    from packages.adapters.sqlalchemy_impl.template_repository import SQLAlchemyTemplateRepository
-    from packages.application.template.commands import CreateTemplateCommand, SegmentCommand
-    from packages.application.template.use_cases import CreateTemplateUseCase
-
-    # 1. 先查已有有效模板（is_active=True 且存在片段配置）
-    existing = (
-        db.query(TemplateModel)
-        .filter(
-            TemplateModel.user_id == user_id,
-            TemplateModel.is_active.is_(True),
-        )
-        .order_by(TemplateModel.created_at.asc())
-        .first()
-    )
-    if existing is not None:
-        # 验证该模板是否有片段配置；若没有继续尝试创建默认
-        has_seg = (
-            db.query(TemplateClipConfigModel.id).filter(TemplateClipConfigModel.template_id == existing.id).first()
-        )
-        if has_seg:
-            return existing.id
-
-    # 2. 无有效模板 → 自动创建默认配音模板
-    try:
-        repo = SQLAlchemyTemplateRepository(db)
-        cmd = CreateTemplateCommand(
-            user_id=user_id,
-            name="默认配音模板",
-            mode="voice_over",
-            category="default",
-            tags=[],
-            title_config={},
-            subtitle_config={},
-            bgm_config={},
-            estimated_duration=0.0,
-            segments=[
-                SegmentCommand(
-                    segment_order=0,
-                    duration_min=1.0,
-                    duration_max=30.0,
-                    material_type=None,
-                ),
-            ],
-        )
-        use_case = CreateTemplateUseCase(repo)
-        tpl = use_case.execute(cmd)
-        logger.info(
-            "[variant-plans] 自动创建默认模板: user=%s tpl=%s",
-            user_id,
-            tpl.id,
-        )
-        return tpl.id
-    except Exception:
-        logger.exception("[variant-plans] 自动创建默认模板失败: user=%s", user_id)
-        return None
-
-
 class VariantPlanRequest(BaseModel):
     """轻量选片请求体（与前端 variantPlans.ts 契约一致）。"""
 
@@ -111,8 +43,8 @@ class VariantPlanRequest(BaseModel):
 
     @model_validator(mode="after")
     def _validate(self) -> "VariantPlanRequest":
-        # 不再强制要求 template_id / source_edit_plan_id：
-        # 后端在路由内会自动查找/创建默认模板兜底（#1911 后前端不再显式选模板）。
+        if not self.template_id.strip() and not self.source_edit_plan_id.strip():
+            raise ValueError("template_id 与 source_edit_plan_id 至少需要提供一个")
         try:
             resolve_variant_voice_ids(
                 count=self.count,
@@ -158,19 +90,25 @@ def create_variant_plans(
     except VariantVoiceError as exc:
         raise HTTPException(status_code=400, detail=str(exc)) from exc
 
-    # 解析源 plan：显式传入优先；否则按 template_id + user 查最新（公共函数）
-    from app.services.generation_common import resolve_latest_plan_by_template
-
+    # 解析源 plan：显式传入优先；否则按 template_id + user 查最新
     source_plan_id = request.source_edit_plan_id.strip()
-    template_id = request.template_id.strip()
+    if not source_plan_id and request.template_id.strip():
+        try:
+            from packages.adapters.sqlalchemy_impl.models import EditPlanModel
 
-    # P0 兜底：前端 #1911 已删除模板选择 UI，调用方可能不传 template_id；
-    # 此时自动为该用户查找/创建默认模板。
-    if not source_plan_id and not template_id:
-        template_id = _get_or_create_default_template_id(db, user_id) or ""
-
-    if not source_plan_id and template_id:
-        source_plan_id = resolve_latest_plan_by_template(db, template_id=template_id, user_id=user_id) or ""
+            _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 解析失败")
 
     if not source_plan_id:
         raise HTTPException(

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

@@ -1,12 +1,11 @@
-"""对口型 API 路由 — #1796 MediaKit 对口型, #1809 参数调整, #1845 配音前置.
+"""对口型 API 路由 — #1796 MediaKit 对口型, #1809 参数调整.
 
 接口：
-  POST   /api/v1/lipsync/jobs          提交对口型任务（支持 TTS/直传/预合成 三种模式）
+  POST   /api/v1/lipsync/jobs          提交对口型任务
   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
@@ -18,12 +17,7 @@ from app.dependencies import (
     get_db_session,
     get_voice_clone_profile_repository,
 )
-from app.schemas.lipsync import (
-    AiAvatarTtsPreviewRequest,
-    AiAvatarTtsPreviewResponse,
-    CreateLipsyncJobRequest,
-    LipsyncJobResponse,
-)
+from app.schemas.lipsync import CreateLipsyncJobRequest, LipsyncJobResponse
 from app.services.lipsync_service import LipsyncService
 from app.services.mediakit_client import MediaKitError
 from fastapi import APIRouter, BackgroundTasks, Depends, HTTPException, Query
@@ -39,6 +33,7 @@ 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,
@@ -56,20 +51,15 @@ def create_lipsync_job(
 ):
     """提交对口型任务.
 
-    三种模式：
-    - 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）。
+    #1809/#1822: 前端传 {video_url, voice_id, script_text, speed?, emotion?}，
+    后端创建任务记录（状态 tts_processing），dispatch Celery 异步任务执行 TTS 合成 + MediaKit 提交；
+    也支持直接传 {video_url, audio_url}（同步提交 MediaKit）。
     """
     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,
@@ -78,8 +68,10 @@ 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
@@ -94,6 +86,7 @@ def create_lipsync_job(
             },
         ) from exc
     except Exception as exc:
+        # 兜底：任何未预期的错误返回 400 而非 500
         logger.error("创建对口型任务异常: %s", exc, exc_info=True)
         raise HTTPException(
             status_code=400,
@@ -103,52 +96,6 @@ 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 — 任务列表 ─────────────────────────────────────────────────
 
 
@@ -187,29 +134,17 @@ 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="任务不存在")
 
     if job.status not in ("completed", "failed"):
-        # 三层防御 ①：如果距上次更新超过 30 秒，同步刷新一次（避免 background task
-        # 静默失败导致前端永远看到 running）；否则挂后台异步刷新（避免阻塞轮询）。
-        from datetime import datetime as _dt
-        from datetime import timezone as _tz
-
-        _now = _dt.now(_tz.utc)
-        _stale = job.updated_at is None or (_now - job.updated_at).total_seconds() > 30
-        if _stale:
-            try:
-                refreshed = svc.refresh_job_status(job_id, current_user.user.id)
-                if refreshed is not None:
-                    job = refreshed
-            except Exception as exc:  # noqa: BLE001
-                logger.error("同步刷新对口型状态失败 job_id=%s err=%s", job_id, exc, exc_info=True)
-                background.add_task(svc.refresh_job_status, job_id, current_user.user.id)
-        else:
-            background.add_task(svc.refresh_job_status, job_id, current_user.user.id)
+        background.add_task(svc.refresh_job_status, job_id, current_user.user.id)
 
     return job
 

apps/api/app/api/routes/templates.py

@@ -1,9 +1,4 @@
-"""Template 列表路由（供生成页自动选模板）.
-
-保留：
-- GET /templates：列表查询（生成页使用）
-- 默认模板自动创建兜底逻辑（复用 _default_template.get_or_create_default_template_id）
-"""
+"""Template CRUD + generate + category routes."""
 
 from __future__ import annotations
 
@@ -11,17 +6,54 @@ import logging
 
 from app.auth import AuthenticatedUser, get_current_user
 from app.dependencies import get_db_session
-from app.schemas.template import ListTemplatesResponse, TemplateResponse
-from fastapi import APIRouter, Depends, Query
+from app.schemas.template import (
+    CategoryResponse,
+    CopyTemplateRequest,
+    CreateCategoryRequest,
+    CreateTemplateRequest,
+    GenerateWarningResponse,
+    ListCategoriesResponse,
+    ListTagsResponse,
+    ListTemplatesResponse,
+    SegmentResponse,
+    TemplateResponse,
+    TemplateUsageResponse,
+    ToggleFavoriteResponse,
+    UpdateTemplateRequest,
+    ValidateTemplateRequest,
+    ValidateTemplateResponse,
+)
+from fastapi import APIRouter, Depends, HTTPException, Query, Response, status
 from sqlalchemy.orm import Session
 
 logger = logging.getLogger(__name__)
 
 from packages.adapters.sqlalchemy_impl.template_repository import SQLAlchemyTemplateRepository
-from packages.application.template.commands import ListTemplatesFilter
-from packages.application.template.use_cases import CountTemplatesUseCase, ListTemplatesUseCase
-
-from ._default_template import get_or_create_default_template_id
+from packages.application.template.commands import (
+    CopyTemplateCommand,
+    CreateCategoryCommand,
+    CreateTemplateCommand,
+    ListTemplatesFilter,
+    SegmentCommand,
+    UpdateTemplateCommand,
+    ValidateTemplateCommand,
+)
+from packages.application.template.use_cases import (
+    CopyTemplateUseCase,
+    CountTemplatesUseCase,
+    CreateCategoryUseCase,
+    CreateTemplateUseCase,
+    DeleteCategoryUseCase,
+    DeleteTemplateUseCase,
+    GetTemplateUseCase,
+    ListCategoriesUseCase,
+    ListTagsUseCase,
+    ListTemplatesUseCase,
+    NotFoundError,
+    UpdateTemplateUseCase,
+    ValidateTemplateUseCase,
+    ValidationError,
+)
 
 router = APIRouter()
 
@@ -30,32 +62,354 @@ def _get_template_repository(session: Session = Depends(get_db_session)) -> SQLA
     return SQLAlchemyTemplateRepository(session)
 
 
-@router.get("", response_model=ListTemplatesResponse, summary="获取模板列表")
+def _segment_to_response(seg) -> SegmentResponse:
+    return SegmentResponse(
+        id=seg.id,
+        template_id=seg.template_id,
+        segment_order=seg.segment_order,
+        duration_min=seg.duration_min,
+        duration_max=seg.duration_max,
+        material_type=seg.material_type,
+        created_at=seg.created_at,
+        updated_at=seg.updated_at,
+    )
+
+
+def _to_response(template, usage_count: int = 0) -> TemplateResponse:
+    return TemplateResponse(
+        id=template.id,
+        user_id=template.user_id,
+        name=template.name,
+        mode=template.mode,
+        category=template.category,
+        tags=template.tags,
+        title_config=template.title_config,
+        subtitle_config=template.subtitle_config,
+        bgm_config=template.bgm_config,
+        estimated_duration=template.estimated_duration,
+        segments=[_segment_to_response(s) for s in getattr(template, "segments", [])],
+        is_active=template.is_active,
+        usage_count=usage_count,
+        created_at=template.created_at,
+        updated_at=template.updated_at,
+    )
+
+
+# ── Template CRUD ──
+
+
+@router.get("", response_model=ListTemplatesResponse)
 def list_templates(
-    mode: str | None = Query(None, description="编辑模式：generic/vlog/storyboard，不传返回全部"),
+    skip: int = Query(0, ge=0),
+    limit: int = Query(50, ge=1, le=200),
     category: str | None = Query(None, description="按分类筛选"),
     tag: str | None = Query(None, description="按标签筛选"),
-    page: int = Query(1, ge=1, description="页码，从 1 开始"),
-    page_size: int = Query(20, ge=1, le=100, description="每页条数，默认 20"),
-    current_user: AuthenticatedUser = Depends(get_current_user),
-    repo: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
-    db: Session = Depends(get_db_session),
-):
-    """获取用户可用的模板列表（仅返回 active 状态）。"""
-    user_id = str(current_user.user.id)
-    # P0 兜底：无有效模板时自动创建默认配音模板
-    get_or_create_default_template_id(db, user_id)
+    keyword: str | None = Query(None, description="按名称关键词搜索"),
+    mode: str | None = Query(None, description="按剪辑模式筛选"),
+    valid_only: bool = Query(
+        False,
+        description="仅返回已配置片段的模板（剪辑页传 true；模板编辑器不传，可查看全部模板含草稿）",
+    ),
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> ListTemplatesResponse:
+    user_id = authenticated_user.user.id
+    try:
+        tpl_filter = ListTemplatesFilter(
+            category=category,
+            tag=tag,
+            keyword=keyword,
+            mode=mode,
+            valid_only=valid_only,
+        )
+        use_case = ListTemplatesUseCase(template_repository)
+        templates = use_case.execute(user_id, skip=skip, limit=limit, filter=tpl_filter)
+        count_use_case = CountTemplatesUseCase(template_repository)
+        total = count_use_case.execute(user_id, filter=tpl_filter)
 
-    list_uc = ListTemplatesUseCase(repo)
-    count_uc = CountTemplatesUseCase(repo)
-    filters = ListTemplatesFilter(
-        category=category,
-        tag=tag,
-        mode=mode,
-        valid_only=True,
+        # 批量查询使用次数
+        items = []
+        for t in templates:
+            usage = template_repository.get_usage_count(t.id)
+            items.append(_to_response(t, usage_count=usage))
+    except Exception:
+        logger.exception("list_templates 查询失败: user_id=%s", user_id)
+        return ListTemplatesResponse(items=[], total=0)
+    return ListTemplatesResponse(
+        items=items,
+        total=total,
     )
-    skip = (page - 1) * page_size
-    templates = list_uc.execute(user_id, skip=skip, limit=page_size, filter=filters)
-    total = count_uc.execute(user_id, filter=filters)
-    items = [TemplateResponse.model_validate(tpl, from_attributes=True) for tpl in templates]
-    return ListTemplatesResponse(items=items, total=total)
+
+
+@router.get("/{template_id}", response_model=TemplateResponse)
+def get_template(
+    template_id: str,
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> TemplateResponse:
+    user_id = authenticated_user.user.id
+    try:
+        use_case = GetTemplateUseCase(template_repository)
+        template = use_case.execute(template_id, user_id)
+        usage = template_repository.get_usage_count(template_id)
+    except Exception as _e:
+        logger.exception("get_template 查询失败: template_id=%s", template_id)
+        raise HTTPException(status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, detail="模板查询失败") from _e
+    if template is None:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Template not found")
+    return _to_response(template, usage_count=usage)
+
+
+@router.post("", response_model=TemplateResponse, status_code=status.HTTP_201_CREATED)
+def create_template(
+    request: CreateTemplateRequest,
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> TemplateResponse:
+    user_id = authenticated_user.user.id
+    command = CreateTemplateCommand(
+        user_id=user_id,
+        name=request.name,
+        mode=request.mode,
+        category=request.category,
+        tags=request.tags,
+        title_config=request.title_config,
+        subtitle_config=request.subtitle_config,
+        bgm_config=request.bgm_config,
+        estimated_duration=request.estimated_duration,
+        segments=[
+            SegmentCommand(
+                segment_order=s.segment_order,
+                duration_min=s.duration_min,
+                duration_max=s.duration_max,
+                material_type=s.material_type,
+            )
+            for s in request.segments
+        ],
+    )
+    use_case = CreateTemplateUseCase(template_repository)
+    try:
+        template = use_case.execute(command)
+    except ValidationError as exc:
+        raise HTTPException(status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, detail=str(exc)) from exc
+    return _to_response(template)
+
+
+@router.patch("/{template_id}", response_model=TemplateResponse)
+def update_template(
+    template_id: str,
+    request: UpdateTemplateRequest,
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> TemplateResponse:
+    user_id = authenticated_user.user.id
+    command = UpdateTemplateCommand(
+        template_id=template_id,
+        user_id=user_id,
+        name=request.name,
+        mode=request.mode,
+        category=request.category,
+        tags=request.tags,
+        title_config=request.title_config,
+        subtitle_config=request.subtitle_config,
+        bgm_config=request.bgm_config,
+        estimated_duration=request.estimated_duration,
+        segments=(
+            [
+                SegmentCommand(
+                    segment_order=s.segment_order,
+                    duration_min=s.duration_min,
+                    duration_max=s.duration_max,
+                    material_type=s.material_type,
+                )
+                for s in request.segments
+            ]
+            if request.segments is not None
+            else None
+        ),
+    )
+    use_case = UpdateTemplateUseCase(template_repository)
+    try:
+        template = use_case.execute(command)
+    except NotFoundError as _e:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Template not found") from _e
+    except ValidationError as exc:
+        raise HTTPException(status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, detail=str(exc)) from exc
+    return _to_response(template)
+
+
+@router.delete("/{template_id}", status_code=status.HTTP_204_NO_CONTENT, response_model=None, response_class=Response)
+def delete_template(
+    template_id: str,
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> Response:
+    user_id = authenticated_user.user.id
+    use_case = DeleteTemplateUseCase(template_repository)
+    deleted = use_case.execute(template_id, user_id)
+    if not deleted:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Template not found")
+    return
+
+
+@router.post("/{template_id}/copy", response_model=TemplateResponse, status_code=status.HTTP_201_CREATED)
+def copy_template(
+    template_id: str,
+    request: CopyTemplateRequest,
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> TemplateResponse:
+    """复制模板（含所有片段配置）"""
+    user_id = authenticated_user.user.id
+    command = CopyTemplateCommand(
+        template_id=template_id,
+        user_id=user_id,
+        new_name=request.new_name,
+    )
+    use_case = CopyTemplateUseCase(template_repository)
+    try:
+        template = use_case.execute(command)
+    except NotFoundError as _e:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Template not found") from _e
+    except ValidationError as exc:
+        raise HTTPException(status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, detail=str(exc)) from exc
+    return _to_response(template)
+
+
+@router.get("/{template_id}/usage", response_model=TemplateUsageResponse)
+def get_template_usage(
+    template_id: str,
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> TemplateUsageResponse:
+    """获取模板使用次数（关联的剪辑计划数量）"""
+    user_id = authenticated_user.user.id
+    # 鉴权：确保模板存在且属于当前用户
+    use_case = GetTemplateUseCase(template_repository)
+    template = use_case.execute(template_id, user_id)
+    if template is None:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Template not found")
+    usage = template_repository.get_usage_count(template_id)
+    return TemplateUsageResponse(template_id=template_id, usage_count=usage)
+
+
+@router.post("/{template_id}/toggle-favorite", response_model=ToggleFavoriteResponse)
+def toggle_favorite(
+    template_id: str,
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> ToggleFavoriteResponse:
+    """切换模板收藏状态（当前为兼容端点，始终返回 false）"""
+    user_id = authenticated_user.user.id
+    use_case = GetTemplateUseCase(template_repository)
+    try:
+        template = use_case.execute(template_id, user_id)
+    except Exception as _e:
+        logger.exception("toggle_favorite 查询失败: template_id=%s", template_id)
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Template not found") from _e
+    if template is None:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Template not found")
+    return ToggleFavoriteResponse(id=template_id, is_favorite=False)
+
+
+# ── Validate template ──
+
+
+@router.post("/{template_id}/validate", response_model=ValidateTemplateResponse)
+def validate_template(
+    template_id: str,
+    request: ValidateTemplateRequest = ValidateTemplateRequest(),
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> ValidateTemplateResponse:
+    user_id = authenticated_user.user.id
+    command = ValidateTemplateCommand(
+        template_id=template_id,
+        user_id=user_id,
+        voiceover_duration=request.voiceover_duration,
+    )
+    use_case = ValidateTemplateUseCase(template_repository)
+    try:
+        result = use_case.execute(command)
+    except NotFoundError as _e:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Template not found") from _e
+    except ValidationError as exc:
+        raise HTTPException(status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, detail=str(exc)) from exc
+
+    return ValidateTemplateResponse(
+        template=_to_response(result.template),
+        warnings=[GenerateWarningResponse(code=w.code, message=w.message, details=w.details) for w in result.warnings],
+    )
+
+
+# ── Category CRUD ──
+
+
+@router.get("/categories/list", response_model=ListCategoriesResponse)
+def list_categories(
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> ListCategoriesResponse:
+    user_id = authenticated_user.user.id
+    try:
+        use_case = ListCategoriesUseCase(template_repository)
+        categories = use_case.execute(user_id)
+    except Exception:
+        logger.exception("list_categories 查询失败: user_id=%s", user_id)
+        return ListCategoriesResponse(items=[])
+    return ListCategoriesResponse(
+        items=[CategoryResponse(id=c.id, user_id=c.user_id, name=c.name, created_at=c.created_at) for c in categories],
+    )
+
+
+@router.post("/categories", response_model=CategoryResponse, status_code=status.HTTP_201_CREATED)
+def create_category(
+    request: CreateCategoryRequest,
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> CategoryResponse:
+    user_id = authenticated_user.user.id
+    command = CreateCategoryCommand(user_id=user_id, name=request.name)
+    use_case = CreateCategoryUseCase(template_repository)
+    category = use_case.execute(command)
+    return CategoryResponse(
+        id=category.id,
+        user_id=category.user_id,
+        name=category.name,
+        created_at=category.created_at,
+    )
+
+
+@router.delete(
+    "/categories/{category_id}", status_code=status.HTTP_204_NO_CONTENT, response_model=None, response_class=Response
+)
+def delete_category(
+    category_id: str,
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> Response:
+    user_id = authenticated_user.user.id
+    use_case = DeleteCategoryUseCase(template_repository)
+    deleted = use_case.execute(category_id, user_id)
+    if not deleted:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Category not found")
+    return Response(status_code=204)
+
+
+# ── Tags ──
+
+
+@router.get("/tags/list", response_model=ListTagsResponse)
+def list_tags(
+    authenticated_user: AuthenticatedUser = Depends(get_current_user),
+    template_repository: SQLAlchemyTemplateRepository = Depends(_get_template_repository),
+) -> ListTagsResponse:
+    """获取用户所有模板标签（去重排序）"""
+    user_id = authenticated_user.user.id
+    try:
+        use_case = ListTagsUseCase(template_repository)
+        tags = use_case.execute(user_id)
+    except Exception:
+        logger.exception("list_tags 查询失败: user_id=%s", user_id)
+        return ListTagsResponse(items=[])
+    return ListTagsResponse(items=tags)

apps/api/app/api/routes/templates_editor/__init__.py

@@ -28,7 +28,7 @@ from .adjustments import router as adjustments_router
 from .ai_features import router as ai_features_router
 from .bgm import router as bgm_router
 from .clips import router as clips_router
-from .dependencies import get_draft_plan_id, get_editor_services, resolve_draft_plan_id  # noqa: F401
+from .dependencies import get_draft_plan_id, get_editor_services  # noqa: F401
 from .draft import router as draft_router
 from .effects import router as effects_router
 from .export import router as export_router

apps/api/app/api/routes/templates_editor/clips.py

@@ -622,10 +622,8 @@ def create_clips_from_assets_editor(
     """从素材批量创建片段（按模板segment配置创建，MediaKit异步更新）.
 
     逻辑：
-    1. 从模板读取 segments，片段数量优先级：显式 clip_count（1-10）→ 旧字段
-       required_clips_count（兼容，超10截断）→ 默认 3（产品默认 3 段）。
-       片段数大于模板 segment 数时按顺序循环复用 segment 配置。
-    2. 每个片段时长在对应 segment 的 duration_min ~ duration_max 之间随机取值（保留一位小数）
+    1. 从模板读取 segments，片段数量 = segment 数量（忽略前端传的 required_clips_count）
+    2. 每个片段时长在 segment 的 duration_min ~ duration_max 之间随机取值（保留一位小数）
     3. 素材按片段顺序轮询分配，素材不够时同一素材切多个片段
     4. 使用 replace_all_clips_transactional 原子性地清空旧片段并创建新的（随机起始时间）
     5. 立即返回响应（目标 <1秒）
@@ -650,22 +648,6 @@ def create_clips_from_assets_editor(
             detail="模板未配置片段",
         )
 
-    # 1.5 归一化片段数量：
-    # 优先级：显式 clip_count → 旧字段 required_clips_count（由 schema 归一化到 clip_count）
-    # → 默认 3（产品默认 3 段）。按 N 循环复用 segment 配置；N <= len(segments) 时截取前 N 个
-    # （保持向后兼容：原模板有 N 个 segment、前端不传 clip_count 且 N<=10 时按模板段数创建；
-    # 默认模板仅有 1 个通用 segment 时按 clip_count=3 循环生成 3 段）。
-    requested_clip_count = getattr(body, "clip_count", None)
-    if requested_clip_count is None:
-        # schema 未显式传 clip_count 且无 legacy：使用模板 segments 数量，若超出 10 则截断
-        requested_clip_count = len(segments) if 1 <= len(segments) <= 10 else 3
-    requested_clip_count = max(1, min(int(requested_clip_count), 10))
-    effective_segments: list[tuple[int, float, float]] = []
-    for i in range(requested_clip_count):
-        src = segments[i % len(segments)]
-        effective_segments.append((i, float(src[1]), float(src[2])))
-    segments = effective_segments
-
     # 防御：schema validator 已过滤 null/空串，这里再归一化一次，
     # 避免异常入参（undefined → null）导致后续 /assets/{id} 404 / 422
     asset_ids = [str(aid).strip() for aid in (body.asset_ids or []) if isinstance(aid, str) and aid.strip()]

apps/api/app/api/routes/templates_editor/dependencies.py

@@ -3,13 +3,11 @@
 核心依赖：
 - get_editor_services: 获取模板+计划服务
 - get_draft_plan_id: 根据 template_id 获取或创建草稿，返回 plan_id
-- resolve_draft_plan_id: 纯函数版本（可在非依赖场景复用）
 """
 
 from __future__ import annotations
 
 import logging
-from typing import Optional
 
 from app.auth import AuthenticatedUser, get_current_user
 from app.dependencies import get_db_session
@@ -22,8 +20,6 @@ from packages.adapters.sqlalchemy_impl.template_repository import (
     SQLAlchemyTemplateRepository,
 )
 
-from .._default_template import get_or_create_default_template_id
-
 logger = logging.getLogger(__name__)
 
 
@@ -34,37 +30,27 @@ def get_editor_services(
     return EditTemplateService(db), EditPlanService(db)
 
 
-def resolve_draft_plan_id(
-    template_id: Optional[str],
-    services: tuple[EditTemplateService, EditPlanService],
-    current_user: AuthenticatedUser,
-    db: Session,
-    auto_create_default: bool = True,
+def get_draft_plan_id(
+    template_id: str,
+    services: tuple[EditTemplateService, EditPlanService] = Depends(get_editor_services),
+    current_user: AuthenticatedUser = Depends(get_current_user),
+    db: Session = Depends(get_db_session),
 ) -> str:
-    """纯函数：根据 template_id 获取或创建草稿 plan_id（可在独立端点复用）。
+    """路径依赖：根据 template_id 获取或创建草稿，返回 plan_id.
 
-    - template_id 为空且 auto_create_default=True 时，自动兜底创建/查找默认模板
-    - 返回有效 plan_id；模板不存在/无权限时抛 404
+    这是模板编辑器路由的核心依赖——所有编辑器端点都先经过这里，
+    确保 template_id → plan_id 的映射始终存在。
+
+    模板读取遵循单一数据源、显式判定（不使用异常降级）：
+    - 用户自建模板在旧表 ``templates``（归属 user_id，is_active=True）；
+    - 全局模板在新表 ``edit_templates``（无 user_id，全局可读）。
+    模板不存在、已删除或不归属于当前用户时，一律返回 404。
     """
     tpl_svc, plan_svc = services
     user_id = str(current_user.user.id)
 
-    # P0 兜底：空 template_id 时自动创建/查找默认模板
-    if not template_id and auto_create_default:
-        template_id = get_or_create_default_template_id(db, user_id)
-        if not template_id:
-            raise HTTPException(
-                status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
-                detail="无法自动创建默认模板，请刷新页面重试",
-            )
-
-    if not template_id:
-        raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail="缺少 template_id 参数",
-        )
-
-    # 0. 门禁：校验模板存在且可访问
+    # 0. 门禁：校验模板存在且可访问（即使草稿已缓存命中也要校验，
+    #    避免模板被删除/无权访问后仍可通过既有草稿 plan 继续操作）。
     old_repo = SQLAlchemyTemplateRepository(db)
     old_template = old_repo.get_active(template_id, user_id)
     is_global_template = tpl_svc.get_template(template_id) is not None
@@ -87,6 +73,7 @@ def resolve_draft_plan_id(
     from packages.domain.edit_template import EditTemplate, EditTemplateStatus
     from packages.domain.template_clip_config import ClipType, TemplateClipConfig
 
+    # 构造伪 EditTemplate 对象（只填 generate_from_template 需要的字段）
     pseudo_template = EditTemplate(
         id=old_template.id,
         name=old_template.name,
@@ -94,6 +81,7 @@ def resolve_draft_plan_id(
         status=EditTemplateStatus.ACTIVE,
     )
 
+    # 将旧模板 segments 转换为 clip_configs
     clip_configs: list[TemplateClipConfig] = []
     for seg in old_template.segments or []:
         clip_configs.append(
@@ -117,6 +105,7 @@ def resolve_draft_plan_id(
     )
     plan = result["plan"]
 
+    # 标记为模板草稿（后续可复用 tpl_svc.get_template_draft 的查找逻辑）
     plan_svc.update_plan_config(plan.id, {"is_template_draft": True})
 
     logger.info(
@@ -126,19 +115,3 @@ def resolve_draft_plan_id(
         user_id,
     )
     return plan.id
-
-
-def get_draft_plan_id(
-    template_id: str,
-    services: tuple[EditTemplateService, EditPlanService] = Depends(get_editor_services),
-    current_user: AuthenticatedUser = Depends(get_current_user),
-    db: Session = Depends(get_db_session),
-) -> str:
-    """FastAPI 依赖：路径参数 {template_id} 下获取/创建草稿 plan_id。"""
-    return resolve_draft_plan_id(
-        template_id=template_id,
-        services=services,
-        current_user=current_user,
-        db=db,
-        auto_create_default=False,  # 路径参数路由不兜底（路径里本就应有值）
-    )

apps/api/app/api/routes/templates_editor/schemas.py

@@ -8,7 +8,7 @@ from __future__ import annotations
 import re as _re
 from typing import Any, List, Optional
 
-from pydantic import BaseModel, Field, model_validator, validator
+from pydantic import BaseModel, Field, validator
 
 _EXPORT_RESOLUTION_PATTERN = _re.compile(r"^\d+x\d+$")
 _EXPORT_VALID_QUALITY_PRESETS = {"ultra_fast", "fast", "balanced", "high", "best"}
@@ -162,26 +162,13 @@ class ClipBatchDeleteResponse(BaseModel):
     message: str = ""
 
 
-# sentinel：区分「前端未传 clip_count」和「显式传 0/None」
-_UNSET = object()
-
-
 class ClipsFromAssetsRequest(BaseModel):
     """从素材批量创建片段请求"""
 
     asset_ids: List[str] = Field(..., min_length=1, max_length=200, description="素材 ID 列表，按顺序追加到时间线末尾")
     clip_type: str = Field(default="main", description="片段类型，默认 main")
-    clip_count: Optional[int] = Field(
-        default=None,
-        ge=1,
-        le=10,
-        description="片段数量（1-10）；不传时使用旧字段 required_clips_count；两者都不传时回退为模板 segments 数量（默认 3 段）。",
-    )
     required_clips_count: Optional[int] = Field(
-        default=None,
-        ge=1,
-        le=200,
-        description="[已废弃] 旧字段，请使用 clip_count；仅作向后兼容——clip_count 未显式传入时才回退本字段（超10截断到10）。",
+        default=None, ge=1, le=200, description="要求创建的片段数量；不传则等于素材数量"
     )
 
     @validator("asset_ids", pre=True)
@@ -193,23 +180,6 @@ class ClipsFromAssetsRequest(BaseModel):
             return v
         return [x for x in v if isinstance(x, str) and x.strip()]
 
-    @model_validator(mode="before")
-    @classmethod
-    def _backfill_clip_count(cls, data: Any) -> Any:
-        """兼容旧字段 required_clips_count：仅当新字段 clip_count 未显式传入时才回退旧字段；
-        两者都没传时保持 clip_count=None，路由层按模板 segments 数量兜底。旧字段超 10 截断到 10。"""
-        if not isinstance(data, dict):
-            return data
-        has_new = "clip_count" in data and data["clip_count"] is not None
-        if not has_new:
-            legacy = data.get("required_clips_count")
-            if legacy is not None:
-                try:
-                    data["clip_count"] = max(1, min(int(legacy), 10))
-                except (TypeError, ValueError):
-                    pass
-        return data
-
 
 class ClipsFromAssetsResponse(BaseModel):
     """从素材批量创建片段响应"""

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

@@ -177,7 +177,6 @@ def synthesize(
     synthesis_meta = {
         "speed": request.speed,
         "emotion": request.emotion or "",
-        "language": request.language or "zh-CN",
     }
     if request.metadata_:
         synthesis_meta.update(request.metadata_)
@@ -463,17 +462,10 @@ def save_tts_job_to_library(
         try:
             proc = subprocess.run(
                 [
-                    "ffprobe",
-                    "-v",
-                    "quiet",
-                    "-print_format",
-                    "json",
-                    "-show_format",
-                    str(tmp_path),
+                    "ffprobe", "-v", "quiet", "-print_format", "json",
+                    "-show_format", str(tmp_path),
                 ],
-                capture_output=True,
-                text=True,
-                timeout=10,
+                capture_output=True, text=True, timeout=10,
             )
             if proc.returncode == 0:
                 fmt = json.loads(proc.stdout).get("format", {})
@@ -584,7 +576,6 @@ def preview_tts(
             voice_id=actual_voice_id,
             speed=request.speed,
             emotion=request.emotion,
-            language=getattr(request, "language", "zh-CN"),
         )
     except CosyVoiceError as e:
         raise HTTPException(

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

@@ -287,15 +287,10 @@ 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),
@@ -303,17 +298,11 @@ def get_voice_clone_preview(
     """获取克隆音色试听音频（实时 TTS 合成）。
 
     - 克隆音色必须处于 ready 状态
-    - 使用默认试听文本时，结果缓存 7 天（仅默认 text+speed=1.0+emotion=空 组合缓存）
-    - 可传入自定义 text/speed/emotion 试听不同效果
+    - 使用默认试听文本时，结果缓存 7 天
+    - 可传入自定义 text 参数试听不同文本
     """
     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)
@@ -326,8 +315,8 @@ def get_voice_clone_preview(
             detail=f"Voice clone is not ready (current status: {profile.status})",
         )
 
-    # 仅默认试听文本 + 默认 speed + 默认 emotion 时使用缓存
-    use_cache = (not text.strip()) and abs(speed - 1.0) < 1e-6 and (not emotion)
+    # 有自定义文本时不缓存
+    use_cache = not text.strip()
 
     if use_cache and clone_id in _clone_preview_cache:
         audio_url, duration, file_size, cached_text, cached_at = _clone_preview_cache[clone_id]
@@ -348,15 +337,12 @@ def get_voice_clone_preview(
             text=preview_text,
             voice_id=profile.voice_id,
             format="mp3",
-            speed=speed,
-            emotion=emotion,
+            speed=1.0,
         )
     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,9 +52,7 @@ 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_image_dataurl：前端 Canvas 渲染的标题 PNG dataURL）"
-    )
+    title_config: dict[str, Any] = Field(default_factory=dict, description="标题配置")
     cover_config: dict[str, Any] = Field(default_factory=dict, description="封面配置")
     project_id: str = Field("", description="项目 ID")
 
@@ -69,6 +67,7 @@ class CreateAiAvatarRenderRequest(BaseModel):
     @field_validator("script_id")
     @classmethod
     def validate_script_id(cls, v: str) -> str:
+        # script_id 可选：手动输入文案（TTS 直生）场景不关联文案库条目
         return (v or "").strip()
 
 
@@ -110,17 +109,16 @@ 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,12 +1,9 @@
-"""对口型 API Schema 定义 — #1796 / #1809 / #1822 / #1845（配音前置）.
+"""对口型 API Schema 定义 — #1796 / #1809 / #1822.
 
-支持三种输入模式：
-1. TTS 直生模式（兼容旧版前端）：传 voice_id + script_text（+ speed/emotion），
-   后端 Celery 异步做 TTS 合成 + MediaKit 提交。
+支持两种输入模式（二选一）：
+1. TTS 直生模式（推荐）：传 voice_id + script_text（+ speed/emotion），
+   后端内部先调 CosyVoice 合成音频，再提交 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
@@ -36,7 +33,6 @@ 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
@@ -49,29 +45,23 @@ class LipsyncJobResponse(BaseModel):
 class CreateLipsyncJobRequest(BaseModel):
     """创建对口型任务请求.
 
-    三种模式（三选一）：
-    - TTS 直生（旧版/降级）：voice_id + script_text 必填；audio_url 留空。
+    两种模式（二选一）：
+    - TTS 直生：voice_id + script_text 必填（+ 可选 speed/emotion）；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/3：直接/预合成音频
+    # 模式 2：直接音频
     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）")
     script_text: str = Field("", description="要合成的文案（直生模式必填，最长 5000 字符）")
     speed: float = Field(1.0, ge=0.5, le=2.0, description="语速（0.5-2.0），默认 1.0")
-    emotion: str = Field("", description="情绪（中文/英文：自然/兴奋/沉稳/亲切/开心/悲伤/愤怒/惊讶/恐惧/厌恶 等）")
+    emotion: str = Field("", description="情绪（natural/excited/calm/friendly 或中文 自然/兴奋/沉稳/亲切）")
 
-    enable_video_loop: bool = Field(
-        True, description="音频长于视频时是否循环画面（AI数字人默认开启，防止音频长于视频被截断）"
-    )
+    enable_video_loop: bool = Field(False, description="音频长于视频时是否循环画面")
     project_id: str = Field("", description="项目 ID（可选）")
 
     @model_validator(mode="after")
@@ -82,16 +72,15 @@ class CreateLipsyncJobRequest(BaseModel):
         if not video.startswith(("http://", "https://")):
             raise ValueError("video_url 必须是 HTTP/HTTPS URL")
         lower = video.lower().split("?")[0]
-        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))
+        if not lower.endswith(".mp4"):
+            raise ValueError("video_url 仅支持 MP4 格式")
 
         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 直生模式）"
             )
 
@@ -109,23 +98,3 @@ 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/schemas/template.py

@@ -1,9 +1,4 @@
-"""Template API schemas（精简版：仅保留列表接口 + 默认模板自动兜底所需字段）.
-
-前端 PR#1911 删除 my-templates / editing-planner / templates 管理页后，
-模板 CRUD / 分类 / 标签 / 收藏 / 复制 / 校验 / 使用统计等端点全部下线，
-对应 Request/Response 模型也一并清理。
-"""
+"""Template API schemas."""
 
 from __future__ import annotations
 
@@ -55,12 +50,17 @@ class TemplateResponse(BaseModel):
     updated_at: datetime
 
 
+class ToggleFavoriteResponse(BaseModel):
+    id: str
+    is_favorite: bool
+
+
 class ListTemplatesResponse(BaseModel):
     items: List[TemplateResponse]
     total: int = 0
 
 
-# ── Template Request（保留给内部 _get_or_create_default_template_id 兜底创建默认模板使用）──
+# ── Template Request ──
 
 
 class CreateTemplateRequest(BaseModel):
@@ -75,9 +75,71 @@ class CreateTemplateRequest(BaseModel):
     segments: List[SegmentRequest] = Field(default_factory=list)
 
 
-class GenerateWarningResponse(BaseModel):
-    """兼容老 import（如校验逻辑内部复用）；模板管理页已下线，可按需进一步清理。"""
+class UpdateTemplateRequest(BaseModel):
+    name: Optional[str] = None
+    mode: Optional[str] = None
+    category: Optional[str] = None
+    tags: Optional[List[str]] = None
+    title_config: Optional[Dict[str, Any]] = None
+    subtitle_config: Optional[Dict[str, Any]] = None
+    bgm_config: Optional[Dict[str, Any]] = None
+    estimated_duration: Optional[float] = None
+    segments: Optional[List[SegmentRequest]] = None
 
+
+# ── Validate ──
+
+
+class ValidateTemplateRequest(BaseModel):
+    voiceover_duration: Optional[float] = None  # 配音实际时长（秒）
+
+
+class GenerateWarningResponse(BaseModel):
     code: str
     message: str
     details: Dict[str, Any] = Field(default_factory=dict)
+
+
+class ValidateTemplateResponse(BaseModel):
+    template: TemplateResponse
+    warnings: List[GenerateWarningResponse] = Field(default_factory=list)
+
+
+# ── Category ──
+
+
+class CategoryResponse(BaseModel):
+    id: str
+    user_id: str
+    name: str
+    created_at: datetime
+
+
+class CreateCategoryRequest(BaseModel):
+    name: str
+
+
+class ListCategoriesResponse(BaseModel):
+    items: List[CategoryResponse]
+
+
+# ── Copy Template ──
+
+
+class CopyTemplateRequest(BaseModel):
+    new_name: str
+
+
+# ── Tags ──
+
+
+class ListTagsResponse(BaseModel):
+    items: List[str]
+
+
+# ── Usage Stats ──
+
+
+class TemplateUsageResponse(BaseModel):
+    template_id: str
+    usage_count: int

apps/api/app/schemas/tts.py

@@ -16,10 +16,7 @@ class TTSSynthesizeRequest(BaseModel):
     output_name: str = Field("", description="输出文件名")
     language: str = Field("zh-CN", description="语言")
     speed: float = Field(1.0, ge=0.5, le=2.0, description="语速")
-    emotion: str = Field(
-        "",
-        description="情绪（中文/英文：自然/兴奋/沉稳/亲切/开心/悲伤/愤怒/惊讶/恐惧/厌恶 等；通过 instruction 自然语言指令控制）",
-    )
+    emotion: str = Field("", description="情绪（natural/excited/calm/friendly，或中文 自然/兴奋/沉稳/亲切）")
     voice_model: str = Field("", description="语音模型名称")
     voice_clone_profile_id: str = Field("", description="关联的音色克隆档案 ID")
     format: str = Field("mp3", description="输出格式（mp3/wav/pcm）")
@@ -113,8 +110,7 @@ class TTSPreviewRequest(BaseModel):
     text: str = Field(..., min_length=1, max_length=200, description="合成文本，限制 200 字")
     voice_id: str = Field(..., min_length=1, description="音色 ID")
     speed: float = Field(1.0, ge=0.5, le=2.0, description="语速")
-    emotion: str = Field("", description="情绪（中文/英文：自然/兴奋/沉稳/亲切/开心/悲伤/愤怒/惊讶/恐惧/厌恶 等）")
-    language: str = Field("zh-CN", description="语言（zh-CN/en-US 等）")
+    emotion: str = Field("", description="情绪（natural/excited/calm/friendly，或中文）")
     pitch: float = Field(1.0, ge=0.5, le=2.0, description="音调（预留，当前未使用）")
 
 

apps/api/app/services/ai_avatar_cover_service.py

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

apps/api/app/services/ai_avatar_render_service.py

@@ -9,11 +9,8 @@
 
 from __future__ import annotations
 
-import base64
-import binascii
 import logging
 import os
-import subprocess
 import tempfile
 import uuid
 from datetime import datetime, timezone
@@ -27,9 +24,8 @@ from packages.adapters.sqlalchemy_impl.models import (
     ScriptModel,
 )
 from packages.domain.video_filter_builder import (
-    build_broll_overlay_filter,
+    build_cover_extract_command,
     build_title_drawtext_filter,
-    build_title_overlay_filter,
 )
 from packages.shared.storage import get_shared_storage_service
 
@@ -200,8 +196,9 @@ class AiAvatarRenderService:
         1. 下载对口型输出视频 (20%)
         2. 构建 FFmpeg 滤镜链 (40%)
         3. 执行 FFmpeg 渲染 (80%)
-        4. 上传到 OSS (95%) — 封面不再自动生成，改由前端主动抽帧
-        5. 更新任务状态 (100%)
+        4. 提取封面 (90%)
+        5. 上传到 OSS (95%)
+        6. 更新任务状态 (100%)
         """
         job = self.db.query(AiAvatarRenderJob).filter(AiAvatarRenderJob.id == job_id).first()
         if job is None:
@@ -231,32 +228,27 @@ class AiAvatarRenderService:
             self.db.commit()
 
             # 2. 构建 FFmpeg 滤镜链 (40%)
-            # 用 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)
+            from packages.domain.video_filter_builder import build_broll_overlay_filter
 
-            broll_filter, broll_label = build_broll_overlay_filter(
+            filter_complex = 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,
             )
 
-            # 标题叠加路径：优先前端 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
+            # 标题叠加
+            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)
 
             job.progress = 40
             self.db.commit()
@@ -265,126 +257,57 @@ class AiAvatarRenderService:
             with tempfile.TemporaryDirectory() as tmpdir:
                 output_video_path = os.path.join(tmpdir, "output.mp4")
 
-                # 在临时目录里解码保存标题 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(
+                cmd = 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,
                 )
 
-                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",
-                    )
+                exit_code = os.system(cmd)
+                if exit_code != 0:
+                    raise AiAvatarRenderError(f"FFmpeg 渲染失败，退出码: {exit_code}", code="FFmpegFailed")
 
                 job.progress = 80
                 self.db.commit()
 
-                # 4/5. 上传成片到 OSS (95%) —— 已砍掉自动抽封面逻辑（步骤⑤）；
-                # 封面由前端在渲染完成后通过 /smart-cover 接口主动从成片抽帧，不阻塞渲染链路。
+                # 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%)
                 output_video_url = self._upload_to_oss(output_video_path, f"ai-avatar/{job_id}/output.mp4")
                 job.output_video_url = output_video_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)
+                # 封面：优先复用智能剪辑的 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
 
                 # 获取输出视频时长
                 job.output_duration = lipsync_job.output_duration
@@ -399,9 +322,37 @@ class AiAvatarRenderService:
             self.db.commit()
             logger.info("渲染任务完成: %s", job_id)
 
-            # 7. 渲染完成，停留在「待选封面」状态：不自动入库。
-            #    用户在前端选好封面、点「完成」后，由 /{job_id}/finalize 接口显式入库。
-            logger.info("渲染任务完成，等待用户选择封面后入库: job_id=%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,
+                    )
 
         except AiAvatarRenderError as exc:
             job.status = "failed"
@@ -409,95 +360,12 @@ 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:
         """下载视频到临时文件."""
@@ -515,132 +383,32 @@ 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,
-    ) -> 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]
+    ) -> str:
+        """构建 FFmpeg 命令."""
+        # 输入文件
+        inputs = f"-i {input_video}"
         for seg in b_roll_segments:
             asset_url = seg.get("asset_url", "")
             if asset_url:
-                cmd.extend(["-i", asset_url])
-        # 额外输入（例如前端 Canvas 渲染的标题 PNG）
-        for extra in extra_inputs or []:
-            cmd.extend(["-i", extra])
+                inputs += f" -i {asset_url}"
 
+        # 滤镜
         if filter_complex and final_label:
-            cmd.extend(
-                [
-                    "-filter_complex",
-                    filter_complex,
-                    "-map",
-                    f"[{final_label}]",
-                    "-map",
-                    "0:a?",
-                ]
-            )
+            filter_arg = f'-filter_complex "{filter_complex}" -map "[{final_label}]"'
         elif filter_complex:
-            cmd.extend(["-filter_complex", filter_complex])
+            filter_arg = f'-filter_complex "{filter_complex}"'
+        else:
+            filter_arg = ""
 
-        cmd.extend(
-            [
-                "-c:v",
-                "libx264",
-                "-preset",
-                "veryfast",
-                "-crf",
-                "23",
-                "-c:a",
-                "aac",
-                "-b:a",
-                "128k",
-                "-y",
-                output_path,
-            ]
-        )
-        return cmd
+        return f"ffmpeg {inputs} {filter_arg} -c:v libx264 -preset veryfast -crf 23 -y {output_path}"
 
     def _upload_to_oss(self, local_path: str, oss_key: str) -> str:
         """上传文件到 OSS，返回 URL.

apps/api/app/services/edit_plan_service.py

@@ -473,7 +473,6 @@ 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）。
 
@@ -490,8 +489,6 @@ class EditPlanService:
             created_by_user_id: 新 plan 归属用户。
             name_suffix: plan 名后缀。
             rng: 可选随机数（测试注入种子）。
-            batch_segments: 可选，外部传入的批次内已使用素材区间（前序变体避让用）。
-                传入时作为初始避让对象；未传则保持原逻辑从源 plan clips 自建（向后兼容）。
 
         Raises:
             ValueError: 源 plan 不存在/无片段、素材池为空或时长全未知。
@@ -540,26 +537,16 @@ 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):
@@ -595,18 +582,12 @@ class EditPlanService:
             created_by_user_id=created_by_user_id or (source.created_by_user_id or ""),
         )
 
-        # 批次内区间：外部传入时使用外部传入（含前序变体已用区间）；
-        # 否则保持原逻辑从源 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)))
+        # 批次内区间：以源 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)))
 
         clips_data = reselect_clips_for_variant(
             source_clips_data,
@@ -614,7 +595,7 @@ class EditPlanService:
             asset_durations=durations,
             asset_scene_points=scene_points,
             historical_used_segments=historical,
-            batch_segments=batch_segments_resolved,
+            batch_segments=batch_segments,
             target_durations=target_durations,
             rng=rng,
         )
@@ -786,17 +767,6 @@ 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:
@@ -868,10 +838,6 @@ 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:
@@ -912,69 +878,6 @@ 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,
@@ -987,15 +890,6 @@ 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)
@@ -1003,12 +897,7 @@ class EditPlanService:
                 logger.exception("变体0 配音分配失败（不阻断）: plan=%s", plan0.id)
         plan_ids.append(plan0.id)
 
-        # #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 做区间避让）
+        # 变体 1..N-1：独立选片
         for i in range(1, count):
             voice = 0.0
             if voice_durations and i < len(voice_durations):
@@ -1016,14 +905,6 @@ 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,
@@ -1031,26 +912,73 @@ 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)
 
-            # #1855 P0：把当前新变体的 clips 区间追加到 batch_segments，供下一变体避让
+        # #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):
             try:
-                _new_segs = _collect_plan_segments(variant.id, self._clip_repo)
-                for _aid, _ivs in _new_segs.items():
-                    batch_segments_acc.setdefault(_aid, []).extend(_ivs)
+                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,
+                )
             except Exception:
-                logger.exception("变体 %d 区间收集失败（不阻断）: plan=%s", i, variant.id)
+                logger.exception("变体 %d 视觉扰动生成失败（不阻断）: plan=%s", idx, pid)
 
         # 标记所有变体 plan 的 clips 为 ready（已分配素材+起点，语义上就是 ready）
         for pid in plan_ids:

apps/api/app/services/generation_common.py

@@ -1,189 +0,0 @@
-"""智能剪辑公共服务辅助函数（从 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,12 +1,8 @@
-"""对口型 Service — #1796 MediaKit 对口型业务逻辑, #1809 参数调整, #1845 配音前置.
+"""对口型 Service — #1796 MediaKit 对口型业务逻辑, #1809 参数调整.
 
 职责：
 - 创建/查询对口型任务
-- 三输入模式：
-  1. TTS 直生（voice_id + script_text）→ 走 Celery 异步（降级路径）
-  2. 直接音频（audio_url，前端未传 timings）→ 同步下载 + 算 timings + 提交 MediaKit
-  3. 预合成音频（audio_url + sentence_timings，#1845 新主路径）→ 同步 ffprobe 校验时长 +
-     写入前端传来的 timings → 直接提交 MediaKit（~2-3s）
+- 双输入模式：TTS 直生（voice_id + script_text，内部先合成音频转存 OSS）或直接音频（audio_url）
 - 调用 MediaKit 客户端提交异步任务
 - 轮询更新任务状态（中间状态同步 DB，成片转存自家 OSS）
 - 用户隔离（每个用户只能操作自己的任务）
@@ -30,22 +26,19 @@ from app.services.mediakit_client import (
     get_mediakit_client,
 )
 
-# Celery 异步任务：TTS 合成 + MediaKit 提交（降级路径）
+# Celery 异步任务：TTS 合成 + MediaKit 提交（#lipsync-speed-optimization）
 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
-from packages.domain.sentence_timings import (
-    compute_sentence_timings,
-    probe_audio_duration,
-)
+from packages.application.cosyvoice_service import CosyVoiceError, normalize_emotion
 from packages.shared.storage import get_shared_storage_service
 from packages.shared.url_security import ALLOWED_AUDIO_MIME_TYPES, safe_download_bytes
 
 logger = logging.getLogger(__name__)
 
 # 传给 MediaKit GPU worker / 回给前端播放的 OSS 预签名有效期：7 天。
+# MediaKit 排队 + 拉取可能延迟，私有桶裸 URL 或 1 小时短预签名都会 403，故统一重签长有效期。
 MEDIAKIT_URL_TTL_SECONDS = 7 * 24 * 3600
 
 
@@ -121,8 +114,7 @@ class LipsyncService:
                 text=script_text,
                 voice_id=actual_voice_id,
                 speed=speed,
-                emotion=emotion,  # normalize 在 CosyVoiceService 内部完成
-                language="zh",
+                emotion=normalize_emotion(emotion),
             )
         except CosyVoiceError as exc:
             raise MediaKitError(f"TTS 合成失败: {exc}", code="TTSSynthesisFailed") from exc
@@ -150,100 +142,6 @@ 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(
@@ -252,35 +150,27 @@ 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 = True,
+        enable_video_loop: bool = False,
         project_id: str = "",
     ) -> LipsyncJobModel:
         """创建对口型任务.
 
-        三种输入模式：
+        两种输入模式：
         - TTS 直生：voice_id + script_text（audio_url 留空）
-          → 创建 DB 记录（状态 tts_processing），dispatch Celery 异步任务（降级路径）。
-          API 响应 <1s。
-        - 直接音频：audio_url 非空 + 无 sentence_timings
-          → 同步下载音频 + 重算 timings + 提交 MediaKit（几秒完成）。
-        - 预合成音频（#1845 新主路径）：audio_url 非空 + 传 sentence_timings
-          → 同步 ffprobe 校验时长 + 写入 timings + 提交 MediaKit（~2-3s）。
+          → 先创建 DB 记录（状态 tts_processing），再 dispatch Celery 异步任务
+            执行 TTS 合成 + MediaKit 提交。API 响应 <1s。
+        - 直接音频：提供 audio_url
+          → 同步提交 MediaKit，状态直接设为 submitted。
 
         Raises:
-            MediaKitError: 参数校验失败或 MediaKit 提交失败
+            MediaKitError: 参数校验失败或 MediaKit 提交失败（仅直接音频模式）
         """
         # 0. 输入校验
-        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 audio_url:
             if not (voice_id and script_text):
                 raise MediaKitError(
                     "必须提供 audio_url 或 voice_id+script_text",
@@ -288,13 +178,10 @@ 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,
@@ -305,19 +192,14 @@ class LipsyncService:
             voice_id=voice_id or "",
             script_text=script_text or "",
             speed=speed,
-            emotion=emotion or "",
-            # 音频直传（含预合成）直接进入 pending（后续同步改为 submitted）；TTS 模式进入 tts_processing
+            emotion=normalize_emotion(emotion),
             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=(
@@ -326,10 +208,12 @@ class LipsyncService:
                         voice_id,
                         script_text,
                         speed,
-                        emotion or "",
+                        normalize_emotion(emotion),
                     )
                 )
             except Exception as exc:
+                # 投递失败时立即把 job 标成 failed 并写入 error_message，
+                # 前端轮询时能直接看到失败原因，不会无限卡在 tts_processing。
                 logger.exception(
                     "Celery 任务提交失败，TTS 任务已创建但未触发执行: job_id=%s err=%s",
                     job_id,
@@ -339,103 +223,34 @@ class LipsyncService:
                 job.error_message = f"Celery 任务投递失败: {exc}"
                 job.error_code = "AsyncDispatchFailed"
                 job.updated_at = datetime.now(timezone.utc)
-                self.db.commit()
         else:
-            # 2b/2c. 直接音频 / 预合成音频：同步路径
-            self._submit_audio_direct(
-                job=job,
-                supplied_timings=sentence_timings,
-                supplied_duration=audio_duration,
-            )
-            self.db.refresh(job)
+            # 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
 
+            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=emotion,  # normalize 在 CosyVoiceService 内部完成
-                language="zh",
-            )
-        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]:
@@ -469,7 +284,11 @@ class LipsyncService:
     # ── 更新任务状态（轮询） ──────────────────────────────────────────────
 
     def refresh_job_status(self, job_id: str, user_id: str) -> Optional[LipsyncJobModel]:
-        """从 MediaKit 拉取最新状态并更新本地记录."""
+        """从 MediaKit 拉取最新状态并更新本地记录.
+
+        Returns:
+            更新后的 Job，或 None（任务不存在/不属于该用户）
+        """
         job = self.get_job(job_id, user_id)
         if job is None:
             return None
@@ -491,57 +310,34 @@ class LipsyncService:
         mk_status = status_data.get("status", STATUS_RUNNING)
         logger.info("MediaKit 对口型状态 [%s]: %s", job_id, mk_status)
 
-        try:
-            if mk_status == STATUS_COMPLETED:
-                result = status_data.get("result", {})
-                job.status = STATUS_COMPLETED
-                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,
-                    )
-            elif mk_status == STATUS_FAILED:
-                error = status_data.get("error", {})
-                job.status = "failed"
-                job.error_message = error.get("message", "任务执行失败")
-                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)
-            self.db.commit()
-        except Exception as exc:  # noqa: BLE001 - DB 提交失败必须记录日志并重试，否则后台任务静默失败
-            logger.error(
-                "refresh_job_status 提交 DB 失败 job_id=%s mk_status=%s err=%s",
-                job_id,
-                mk_status,
-                exc,
-                exc_info=True,
-            )
-            try:
-                self.db.rollback()
-            except Exception:
-                pass
-            # DB commit 失败不 raise，返回当前 job 对象让下次轮询再试
+        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)
+            job.output_duration = result.get("duration", 0.0)
+            job.completed_at = datetime.now(timezone.utc)
+        elif mk_status == STATUS_FAILED:
+            error = status_data.get("error", {})
+            job.status = "failed"
+            job.error_message = error.get("message", "任务执行失败")
+            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)
+        self.db.commit()
         self.db.refresh(job)
         return job
 
     def _persist_output_video(self, temp_url: str, job_id: str, user_id: str) -> str:
-        """将 MediaKit 输出的临时视频 URL 转存到自家 OSS. 失败时回退返回原始临时 URL."""
+        """将 MediaKit 输出的临时视频 URL 转存到自家 OSS.
+
+        失败时回退返回原始临时 URL，不影响任务完成。
+        """
         if not temp_url:
             return ""
         try:
@@ -561,21 +357,27 @@ class LipsyncService:
             return temp_url
 
     def _sign_media_url(self, url: str) -> str:
-        """对自家 OSS 私有桶 URL 重签长有效期预签名."""
+        """对自家 OSS 私有桶 URL 重签长有效期预签名，供 MediaKit 拉取 / 前端播放。
+
+        - 裸 public_url（upload_file 返回，不带签名）→ 私有桶匿名访问 403，重签。
+        - 已带签名但即将过期的 URL（如前端 1h 预签名）→ 抽 storage_key 后重签。
+        - 外部 URL（CosyVoice/MediaKit 临时链接，非本桶 host）→ 原样透传。
+        - 任何异常都降级原样返回，不阻断主流程。
+        """
         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  # 外部临时链接原样透传
+                return url  # 非自家 OSS（外部临时链接），不处理
             signed = storage.get_download_url(url, expires_seconds=MEDIAKIT_URL_TTL_SECONDS)
             return signed or url
-        except Exception as exc:
+        except Exception as exc:  # noqa: BLE001 - 签名失败不阻断，降级原 URL
             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 = True,
+        enable_video_loop: bool = False,
         callback_url: Optional[str] = None,
         callback_args: Optional[str] = None,
         client_token: Optional[str] = None,
@@ -103,7 +103,8 @@ class MediaKitClient:
             "video_url": video_url,
             "audio_url": audio_url,
         }
-        payload["enable_video_loop"] = bool(enable_video_loop)
+        if enable_video_loop:
+            payload["enable_video_loop"] = True
         if callback_url:
             payload["callback_url"] = callback_url
         if callback_args:

apps/api/app/tasks/lipsync_tts.py

@@ -12,10 +12,6 @@
 
 注意：使用 @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
@@ -25,12 +21,6 @@ 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 保持一致
@@ -67,13 +57,8 @@ def _sign_media_url(url: str) -> str:
 @shared_task(
     bind=True,
     name="lipsync_tts.synthesize_and_submit",
-    max_retries=5,  # 事务竞态重试3次（job not found）+ TTS偶发错误2次
+    max_retries=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,
@@ -86,8 +71,7 @@ def tts_synthesize_and_submit(
 ):
     """异步执行 TTS 合成 + OSS 转存 + MediaKit 提交.
 
-    在 Celery worker 中运行，不阻塞 HTTP 请求。保留作为降级路径
-    （预合成失败 / 旧版前端未传 audio_url 时走此路径）。
+    在 Celery worker 中运行，不阻塞 HTTP 请求。
     """
     from app.services.mediakit_client import MediaKitError, get_mediakit_client
     from sqlalchemy.orm import Session as DBSession
@@ -119,25 +103,7 @@ def tts_synthesize_and_submit(
         )
 
         if job is None:
-            # 事务竞态防御：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,
-            )
+            logger.error("[lipsync_tts] Job not found: job_id=%s", job_id)
             return
 
         # 已取消的任务不再处理
@@ -146,13 +112,6 @@ 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(
@@ -160,7 +119,6 @@ def tts_synthesize_and_submit(
                 voice_id=voice_id,
                 speed=speed,
                 emotion=emotion,
-                language="zh",
             )
         except CosyVoiceError as exc:
             logger.error("[lipsync_tts] TTS 合成失败: job_id=%s err=%s", job_id, exc)
@@ -189,74 +147,37 @@ def tts_synthesize_and_submit(
             db.commit()
             return
 
-        # 2. 下载 TTS 音频到内存（用于 2.5 静音检测；不转存自家 OSS，直接使用 CosyVoice 临时 URL）
-        audio_data: bytes | None = None
+        # 2. 下载并转存到自家 OSS
         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,
             )
-            logger.info(
-                "[lipsync_tts] TTS 音频已下载到内存: job_id=%s size=%d",
-                job_id,
-                len(audio_data) if audio_data else 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
         except Exception as exc:
             logger.warning(
-                "[lipsync_tts] TTS 音频下载失败，跳过静音检测，直接使用临时 URL 提交: job_id=%s err=%s",
+                "[lipsync_tts] TTS 音频转存 OSS 失败，回退临时 URL: job_id=%s err=%s",
                 job_id,
                 exc,
             )
-        # TTS 音频使用 CosyVoice 临时 URL，跳过自家 OSS 转存（加速，步骤⑥）
-        job.audio_url = temp_url
-        logger.info("[lipsync_tts] TTS 音频使用 CosyVoice 临时 URL（跳过 OSS 转存）: job_id=%s", job_id)
+            job.audio_url = temp_url
 
         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)
@@ -283,18 +204,6 @@ def tts_synthesize_and_submit(
             job.error_code = exc.code
             logger.error("[lipsync_tts] 提交 MediaKit 失败: job_id=%s err=%s", job_id, exc)
 
-        # 三层防御 ③：链式触发 Celery 兜底轮询——MediaKit 提交成功后由 worker
-        # 主动拉取状态到终态，不依赖前端轮询触发的 FastAPI background task
-        # （background task 可能静默失败导致永久卡 running）。
-        if job.status == "submitted" and job.mediakit_task_id:
-            try:
-                poll_mediakit_status.apply_async(
-                    kwargs={"job_id": job_id, "user_id": user_id},
-                    countdown=10,  # 10 秒后开始轮询，给 MediaKit 一点处理时间
-                )
-            except Exception as exc:  # noqa: BLE001
-                logger.warning("[lipsync_tts] 提交兜底轮询任务失败（不影响主流程）: job_id=%s err=%s", job_id, exc)
-
         db.commit()
 
     except Exception:
@@ -311,151 +220,3 @@ def tts_synthesize_and_submit(
             logger.exception("[lipsync_tts] 回写失败状态时异常: job_id=%s", job_id)
     finally:
         db.close()
-
-
-@shared_task(
-    bind=True,
-    name="lipsync_tts.poll_mediakit_status",
-    max_retries=60,  # 最多轮询 60 次
-    default_retry_delay=10,  # 每次间隔 10 秒（总兜底时长 10 分钟）
-)
-def poll_mediakit_status(self, job_id: str, user_id: str):
-    """Celery 兜底轮询：TTS 提交 MediaKit 后，由 worker 主动拉取状态直到终态。
-
-    不依赖前端轮询，避免 background task 静默失败导致任务永久卡 running/submitted。
-    """
-    from sqlalchemy.orm import Session as DBSession
-
-    from packages.adapters.sqlalchemy_impl.models import LipsyncJobModel
-
-    try:
-        from worker_app.db import SessionLocal  # type: ignore
-    except Exception:  # noqa: BLE001
-        from app.db import SessionLocal  # type: ignore
-
-    db: DBSession = SessionLocal()
-    try:
-        job = db.query(LipsyncJobModel).filter(LipsyncJobModel.id == job_id, LipsyncJobModel.user_id == user_id).first()
-        if job is None:
-            logger.warning("[lipsync_poll] Job not found: job_id=%s", job_id)
-            return
-
-        # 已终态，不需要再轮询
-        if job.status in ("completed", "failed", "cancelled"):
-            return
-
-        if not job.mediakit_task_id:
-            logger.warning("[lipsync_poll] Job has no mediakit_task_id: job_id=%s status=%s", job_id, job.status)
-            return
-
-        from app.services.lipsync_service import STATUS_COMPLETED as _SC
-        from app.services.lipsync_service import STATUS_FAILED as _SF
-        from app.services.lipsync_service import LipsyncService
-        from app.services.mediakit_client import MediaKitError, get_mediakit_client
-
-        client = get_mediakit_client()
-        try:
-            status_data = client.get_task_status(job.mediakit_task_id)
-        except MediaKitError as exc:
-            logger.warning("[lipsync_poll] 拉取 MediaKit 状态失败，将重试: job_id=%s err=%s", job_id, exc)
-            raise self.retry(exc=exc) from exc
-
-        mk_status = status_data.get("status", "running")
-
-        if mk_status in ("succeeded", _SC):
-
-            svc = LipsyncService(db)
-            result = status_data.get("result", {})
-            job.status = "completed"
-            output_url = result.get("video_url", "")
-            try:
-                job.output_video_url = svc._persist_output_video(output_url, job_id, user_id)
-            except Exception as exc:  # noqa: BLE001
-                logger.warning("[lipsync_poll] 转存 OSS 失败，保留临时 URL: job_id=%s err=%s", job_id, exc)
-                job.output_video_url = output_url
-            job.output_duration = result.get("duration", 0.0)
-            job.completed_at = datetime.now(timezone.utc)
-            job.updated_at = datetime.now(timezone.utc)
-            db.commit()
-            logger.info("[lipsync_poll] 任务完成: job_id=%s", job_id)
-        elif mk_status in ("failed", "error", _SF):
-            error = status_data.get("error", {})
-            job.status = "failed"
-            job.error_message = error.get("message", "任务执行失败")
-            job.error_code = error.get("code", "TaskFailed")
-            job.completed_at = datetime.now(timezone.utc)
-            job.updated_at = datetime.now(timezone.utc)
-            db.commit()
-            logger.info("[lipsync_poll] 任务失败: job_id=%s err=%s", job_id, job.error_message)
-        else:
-            # 中间状态，更新时间戳，继续重试
-            job.updated_at = datetime.now(timezone.utc)
-            if isinstance(mk_status, str) and mk_status:
-                job.status = mk_status
-            db.commit()
-            logger.debug("[lipsync_poll] 任务仍在 %s，继续轮询: job_id=%s", mk_status, job_id)
-            raise self.retry()
-    except Exception as exc:
-        logger.exception("[lipsync_poll] 未预期异常: job_id=%s", job_id)
-        try:
-            db.rollback()
-        except Exception:
-            pass
-        raise self.retry(exc=exc) from exc
-    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,10 +26,6 @@ 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[]
 }
 
 /** 单个变体的计划片段 */
@@ -40,8 +36,6 @@ export interface VariantPlan {
   plan_id: string
   /** 该变体的真实片段（顺序/素材/起点与正式成片一致） */
   clips: EditPlanClip[]
-  /** 该变体实际配音时长（秒），用于前端预览按配音时长对齐音画；后端暂未返回时缺省 */
-  voice_duration?: number
 }
 
 /** 批量变体计划响应 */

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

@@ -1,6 +1,6 @@
 /**
  * 成品 / 视频相关 API 函数
- * 后端实际接口：/videos（分页：page/page_size，返回 {items, total, page, page_size}）
+ * 后端实际接口：/videos
  */
 import apiClient from "../client"
 import type {
@@ -12,39 +12,16 @@ import type {
 } from "./types"
 import { mapVideoToProductItem } from "./utils"
 
-/** 分页列表响应（前端消费用） */
-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,
-  }
+/** 获取成品列表（支持分页和筛选） */
+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)
 }
 
 /** 获取单个成品详情 */

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

@@ -16,7 +16,6 @@ export interface TTSSynthesizeRequest {
   voice_id?: string
   output_name?: string
   language?: string
-  emotion?: string
   speed?: number
   voice_model?: string
   voice_clone_profile_id?: string
@@ -104,8 +103,7 @@ export interface TTSPreviewRequest {
   voice_id: string
   speed?: number
   pitch?: number
-  language?: string
-  emotion?: string // 情绪参数：neutral/happy/sad/angry/surprised/fearful/disgusted（后端 normalize_emotion() 兼容旧 natural/excited/calm/friendly 与中文标签）
+  emotion?: string // 情绪参数：natural/excited/calm/friendly
 }
 
 /** TTS 试听响应 */

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

@@ -96,12 +96,9 @@ 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,7 +8,9 @@ import {
   FileOutlined,
   FileTextOutlined,
   AudioOutlined,
+  AppstoreOutlined,
   EditOutlined,
+  FolderOutlined,
   VideoCameraOutlined,
   HistoryOutlined,
   TrophyOutlined,
@@ -68,6 +70,24 @@ 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",
@@ -130,6 +150,12 @@ 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),
+      },
     ],
   },
   {
@@ -165,6 +191,18 @@ 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,6 +25,15 @@ 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: 12px;
+  border-radius: 8px;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -564,10 +564,8 @@
 .aa-cover-preview img {
   width: 100%;
   height: 100%;
-  aspect-ratio: 9/16;
   object-fit: cover;
   display: block;
-  border-radius: 12px;
 }
 
 .aa-cover-preview__placeholder {
@@ -575,19 +573,6 @@
   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;
@@ -1265,20 +1250,3 @@
   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 两步骤版 + #1845 配音前置）
- * 步骤1：出镜视频 / 配音库 / 文案 → 点击「🎵 生成配音」做 TTS 预合成（同步，~2-3s）
- * 步骤2：对口型预览（音频已就绪、B-roll 句子时间戳立即可用）/ 标题配置 / 封面&生成
+ * AI数字人 — 主页面（v3 两步骤版）
+ * 步骤1：出镜视频 / 配音库 / 文案
+ * 步骤2：对口型预览（含插入画面）/ 标题配置 / 封面&生成
  */
 import React, { useState, useCallback, useEffect, useRef } from "react"
 import { message } from "antd"
@@ -16,26 +16,20 @@ 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,
-  generateRenderSmartCover,
-  finalizeRenderJob,
+  generateSmartCover,
 } 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"
@@ -53,18 +47,14 @@ 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">(
@@ -72,12 +62,6 @@ 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)
@@ -88,29 +72,8 @@ const AiAvatarPage: React.FC = () => {
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }))
   }, [])
 
-  /* ── #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 handleNextStep = useCallback(() => {
     const missing: string[] = []
     if (!state.selectedVideo) missing.push("出镜视频")
     if (!state.selectedVoice) missing.push("配音")
@@ -119,115 +82,45 @@ const AiAvatarPage: React.FC = () => {
       message.warning(`请先完成${missing.join("、")}`)
       return
     }
-
-    // 打开弹窗 & 启动模拟进度条
-    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)
-  }, [])
+  }, [state.selectedVideo, state.selectedVoice, state.scriptText])
 
-  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) {
+    if (missing.length > 0 || !video || !voice) {
       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)
@@ -235,38 +128,29 @@ const AiAvatarPage: React.FC = () => {
         message.error("获取出镜视频播放地址失败，请重新选择素材")
         return
       }
-
-      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),
-        }
+      // ② 模式A TTS直生：video_url + voice_id + script_text，语速/情绪英文枚举透传（#1822）
+      const payload = {
+        voice_id: voice.voice_id,
+        script_text: state.scriptText,
+        video_url: videoUrl,
+        speed: state.speed, // 语速 0.5~2.0
+        emotion: normalizeEmotion(state.emotion), // natural/excited/calm/friendly
       }
+      console.log("[对口型] createLipsyncJob 请求:", payload)
       const job = await createLipsyncJob(payload)
+      console.log("[对口型] createLipsyncJob 响应:", { id: job.id, status: job.status })
       state.setLipsyncJob(job)
-
-      // 如果是预合成模式，后端会同步把状态置为 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")
@@ -293,14 +177,7 @@ 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.ttsPreview,
-  ])
+  }, [state.selectedVideo, state.selectedVoice, state.scriptText, state.speed, state.emotion])
 
   // 取消对口型生成
   const handleCancelLipsync = useCallback(() => {
@@ -321,14 +198,6 @@ 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") {
@@ -337,28 +206,9 @@ 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 || "",
@@ -368,45 +218,26 @@ const AiAvatarPage: React.FC = () => {
           pip_position: seg.pip_position,
           pip_scale: seg.pip_scale,
         })) as never,
-        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)
-            : {},
+        title_config: buildTitleConfigPayload(state.titleConfig),
+        cover_config: 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")
-            // 不再自动入库/自动跳转：渲染完成后停留在主页面，等用户选封面、点「完成」才入库
-            // 如果后端在透传时已经带了封面（旧逻辑兜底），同步本地状态
-            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("视频生成完成，请选择封面")
+            message.success("视频已生成并保存到成片库")
           } else if (updated.status === "failed") {
             if (renderTimerRef.current) clearInterval(renderTimerRef.current)
             renderTimerRef.current = null
@@ -438,109 +269,38 @@ const AiAvatarPage: React.FC = () => {
     setRenderErrorMessage("")
   }, [])
 
-  /* ── 智能封面 ── */
-  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("请先完成视频生成")
+  /* ── 智能封面：调后端 MediaKit 选帧接口（#1822） ── */
+  const handleSmartCover = useCallback(async () => {
+    // 基于对口型成片抽帧，必须先完成对口型
+    const videoUrl = state.lipsyncJob?.output_video_url
+    if (state.lipsyncJob?.status !== "completed" || !videoUrl) {
+      message.warning("请先生成对口型视频，完成后再智能获取封面")
       return
     }
-    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)
+    setSmartCoverLoading(true)
     try {
-      const res = await finalizeRenderJob(currentRenderJob.id)
-      if (res.data?.status === "success" || res.data?.status === "already_finalized") {
-        message.success("已保存到成片库")
-        navigate("/app/products")
+      const res = await generateSmartCover(videoUrl, 5)
+      if (res.cover_url) {
+        state.setCoverConfig((prev) => ({
+          ...prev,
+          mode: "auto_frame",
+          smart_cover_url: res.cover_url,
+          thumbnail_url: res.cover_url,
+        }))
+        message.success("智能封面已生成")
       } else {
-        message.error("保存失败，请重试")
+        message.error(res.message || "智能封面生成失败，请稍后重试")
       }
     } catch (err) {
-      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 : "保存到成片库失败")
+      console.error("智能封面生成失败:", err)
+      message.error(err instanceof Error ? err.message : "智能封面生成失败，请重试")
     } finally {
-      setFinalizeLoading(false)
+      setSmartCoverLoading(false)
     }
-  }, [currentRenderJob, navigate])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.lipsyncJob])
 
   /* ── 配置汇总 ── */
-  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,
@@ -548,7 +308,7 @@ const AiAvatarPage: React.FC = () => {
     lipsyncStatus: state.lipsyncJob?.status || null,
     brollCount: state.bRollSegments.length,
     hasTitle: state.titleConfig.title.length > 0,
-    coverStatus,
+    hasCover: state.coverConfig.enabled,
   }
 
   return (
@@ -582,6 +342,7 @@ const AiAvatarPage: React.FC = () => {
                   selectedVideo={state.selectedVideo}
                   onSelectVideo={() => state.setShowAssetPicker(true)}
                   onRemoveVideo={state.removeVideo}
+                  titleConfig={state.titleConfig}
                 />
               </div>
             </div>
@@ -621,33 +382,19 @@ const AiAvatarPage: React.FC = () => {
                   onOpenScriptModal={() => state.setShowScriptModal(true)}
                 />
                 <div className="aa-step-btn-row">
-                  <button
-                    type="button"
-                    className="aa-btn aa-btn--primary"
-                    onClick={handleGenerateTts}
-                    disabled={state.ttsPreview.status === "generating"}
-                  >
-                    {state.ttsPreview.status === "done" ? "🎵 重新生成配音" : "🎵 生成配音"}
+                  <button type="button" className="aa-btn aa-btn--primary" onClick={handleNextStep}>
+                    下一步 →
                   </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>
@@ -685,98 +432,27 @@ const AiAvatarPage: React.FC = () => {
               </div>
             </div>
 
-            {/* 面板5：封面 & 生成
-                - 渲染未完成：显示分辨率/配置摘要/「开始生成」按钮（PanelCoverAndGenerate setup 变体，无封面区）
-                - 渲染完成：显示封面预览 + 「🎬 选择封面」/「✅ 完成」按钮，封面选择在弹窗中完成 */}
+            {/* 面板5：封面 & 生成 */}
             <div className={`aa-panel aa-panel--s2${collapsed.cover ? " collapsed" : ""}`}>
               <div className="aa-panel__header" onClick={() => togglePanel("cover")}>
-                <span className="aa-panel__title">
-                  {currentRenderJob?.status === "completed" ? "视频已生成" : "封面 & 生成"}
-                </span>
+                <span className="aa-panel__title">封面 & 生成</span>
                 <span className="aa-panel__toggle">▼</span>
               </div>
               <div className="aa-panel__body">
-                {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>
-                )}
+                <PanelCoverAndGenerate
+                  coverConfig={state.coverConfig}
+                  onCoverConfigChange={(partial) =>
+                    state.setCoverConfig((prev) => ({ ...prev, ...partial }))
+                  }
+                  onSmartCover={handleSmartCover}
+                  smartCoverLoading={smartCoverLoading}
+                  canSmartCover={state.lipsyncJob?.status === "completed"}
+                  resolution={state.resolution}
+                  onResolutionChange={state.setResolution}
+                  isGenerating={state.isGenerating}
+                  onGenerate={handleGenerate}
+                  summary={summary}
+                />
               </div>
             </div>
           </>
@@ -802,144 +478,19 @@ const AiAvatarPage: React.FC = () => {
         />
       )}
 
-      {/* B-roll 编辑器弹窗 — #1845：timings 在对口型完成前就可用（来自 TTS 预合成） */}
+      {/* B-roll 编辑器弹窗 */}
       {state.showBRollModal && (
         <ModalBRollEditor
           open={state.showBRollModal}
           onClose={() => state.setShowBRollModal(false)}
           existingSegments={state.bRollSegments}
-          scriptText={state.lipsyncJob?.script_text || state.scriptText}
-          outputDuration={bRollDuration}
-          sentenceTimings={bRollSentenceTimings}
+          scriptText={state.scriptText}
+          outputDuration={state.lipsyncJob?.output_duration ?? 0}
           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">
@@ -1072,21 +623,17 @@ 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 aa-btn--primary"
+                    className="aa-btn"
                     style={{ marginTop: 16 }}
                     onClick={() => {
                       setShowRenderModal(false)
+                      navigate("/app/products")
                     }}
                   >
-                    🎬 选择封面
+                    📁 查看成片
                   </button>
                 </>
               )}
@@ -1117,18 +664,6 @@ 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, SentenceTiming } from "../types"
+import type { Script, LipsyncJob, RenderJob, BRollSegment } from "../types"
 
 /* ── 文案库 ── */
 export const getScripts = async (): Promise<Script[]> => {
@@ -34,28 +34,17 @@ export const getAssetById = async (id: string): Promise<{ file_url?: string; id:
   return response.data
 }
 
-/* ── 对口型（支持三种模式） ──
- * 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
- */
+/* ── 对口型（模式A：TTS 直生，后端内部合成音频；不要先调 TTS 拿 audio_url） ── */
 export const createLipsyncJob = async (data: {
-  /** 人物视频 URL（MP4）；由素材 id 经 getAssetById 拿 file_url */
+  /** 人物视频 URL（MP4）；由素材 id 经 getAssetById 拿 file_url，禁止传 video_asset_id */
   video_url: string
-  /** 预合成/直接音频模式：音频 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 直生模式用） */
+  /** 音色 ID（预置音色 或 克隆音色 profile UUID，后端会解析） */
+  voice_id: string
+  /** 要合成的文案（手动输入或文案库内容） */
+  script_text: string
+  /** 语速 0.5~2.0，默认 1.0 */
   speed?: number
-  /** 情绪英文枚举：neutral/happy/sad/angry/surprised/fearful/disgusted（TTS 直生模式用；前端经 normalizeEmotion 归一化） */
+  /** 情绪英文枚举：natural/excited/calm/friendly */
   emotion?: string
   enable_video_loop?: boolean
   project_id?: string
@@ -64,27 +53,21 @@ export const createLipsyncJob = async (data: {
   return response.data
 }
 
-/* ── #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 })
+export const getLipsyncJob = async (id: string): Promise<LipsyncJob> => {
+  const response = await apiClient.get<LipsyncJob>(`/lipsync/jobs/${id}`, { timeout: 60000 })
   return response.data
 }
 
-export const getLipsyncJob = async (id: string): Promise<LipsyncJob> => {
-  const response = await apiClient.get<LipsyncJob>(`/lipsync/jobs/${id}`, { timeout: 60000 })
+/* ── 智能封面（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 },
+  )
   return response.data
 }
 
@@ -97,35 +80,15 @@ 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}`, { timeout: 60000 })
+  const response = await apiClient.get<RenderJob>(`/ai-avatar/render/${jobId}`)
   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, SentenceTiming } from "../types"
+import type { BRollSegment, BRollInsertMode, PipPosition } from "../types"
 import { splitScriptIntoSentences, type ScriptSentence } from "../utils/sentences"
 
 interface ModalBRollEditorProps {
@@ -18,12 +18,10 @@ 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
 }
@@ -45,8 +43,7 @@ const ModalBRollEditor: React.FC<ModalBRollEditorProps> = ({
   onClose,
   existingSegments,
   scriptText,
-  outputDuration: _outputDuration,
-  sentenceTimings,
+  outputDuration,
   onConfirm,
   onRemove,
 }) => {
@@ -65,10 +62,10 @@ const ModalBRollEditor: React.FC<ModalBRollEditorProps> = ({
   const [pipPosition, setPipPosition] = useState<PipPosition>("top-right")
   const [pipScale, setPipScale] = useState(0.3)
 
-  /** 文案分句（优先使用后端精确时间戳，降级为字数比例估算） */
+  /** 文案分句（⑤） */
   const sentences = useMemo(
-    () => splitScriptIntoSentences(scriptText, sentenceTimings, _outputDuration),
-    [scriptText, sentenceTimings, _outputDuration],
+    () => splitScriptIntoSentences(scriptText, outputDuration),
+    [scriptText, outputDuration],
   )
 
   /** 已被现有 segments 占用的素材 id 集合（标灰、禁止重复选择） */
@@ -145,7 +142,7 @@ const ModalBRollEditor: React.FC<ModalBRollEditorProps> = ({
     setSelectedAsset(asset)
   }
 
-  /** 确认添加一段 B-roll（⑥ 时间取所选句子的精确起止，后端静音检测 / 前端字数比例降级） */
+  /** 确认添加一段 B-roll（⑥ 时间取所选句子的估算起止） */
   const handleConfirm = () => {
     if (!selectedAsset || !selectedSentence) return
     const startTime = selectedSentence.startTime
@@ -267,9 +264,11 @@ const ModalBRollEditor: React.FC<ModalBRollEditorProps> = ({
                           >
                             <span className="aa-sentence-item__idx">{sent.index + 1}</span>
                             <span className="aa-sentence-item__text">{sent.text}</span>
-                            <span className="aa-sentence-item__time">
-                              {sent.startTime.toFixed(1)}-{sent.endTime.toFixed(1)}s
-                            </span>
+                            {outputDuration > 0 && (
+                              <span className="aa-sentence-item__time">
+                                {sent.startTime.toFixed(1)}-{sent.endTime.toFixed(1)}s
+                              </span>
+                            )}
                           </button>
                         )
                       })}
@@ -350,7 +349,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

@@ -1,59 +0,0 @@
-/**
- * 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,45 +1,35 @@
 /**
- * AI数字人 — 面板5 / 封面选择弹窗内容：
- * - variant="setup"（默认）：分辨率 / 配置摘要 / 「开始生成视频」按钮，用于主页面步骤2配置阶段；
- *   渲染完成后仍内嵌封面预览与按钮，方便不打开弹窗直接操作。
- * - variant="select-cover"：只渲染封面选择区（智能获取封面 + 自定义上传 + 预览），
- *   用于 ModalCoverSelect 弹窗中；传 onClose 时底部显示「确定」按钮。
+ * AI数字人 — 面板5：封面 & 生成
+ * - 竖屏 9:16 封面预览（从视频截取 / 自定义上传）
+ * - 分辨率选择（720p / 1080p / 4K）
+ * - 配置汇总卡片（出镜视频/音色/文案/对口型/B-roll/标题/封面）
+ * - 渐变紫色生成按钮
  *
- * 封面一律从最终成片（已叠加标题/B-roll）抽帧，本面板不再叠加标题。
+ * 注意：v3 已删除"画面插入模式"，本面板不包含该选项。
  */
-import React, { useRef, useState } from "react"
-import type { AiAvatarCoverConfig, RenderJob } from "../types"
-
-type PanelVariant = "setup" | "select-cover"
+import React, { useRef } from "react"
+import type { AiAvatarCoverConfig } from "../types"
 
 interface PanelCoverAndGenerateProps {
-  variant?: PanelVariant
   coverConfig: AiAvatarCoverConfig
   onCoverConfigChange: (partial: Partial<AiAvatarCoverConfig>) => void
-  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?: {
+  resolution: string
+  onResolutionChange: (r: string) => void
+  isGenerating: boolean
+  onGenerate: () => void
+  /** 智能获取封面（MediaKit 选帧） */
+  onSmartCover: () => void
+  smartCoverLoading: boolean
+  canSmartCover: boolean
+  /** 配置汇总信息 */
+  summary: {
     videoName: string | null
     voiceName: string | null
     scriptLength: number
     lipsyncStatus: string | null
     brollCount: number
     hasTitle: boolean
-    /** 封面状态：'not_ready'(视频未生成) / 'pending'(视频生成了但未选) / 'selected'(已选) */
-    coverStatus: "not_ready" | "pending" | "selected"
+    hasCover: boolean
   }
 }
 
@@ -58,116 +48,53 @@ const LIPSYNC_STATUS_LABEL: Record<string, { text: string; cls: string }> = {
 }
 
 const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
-  variant = "setup",
   coverConfig,
   onCoverConfigChange,
-  resolution = "720p",
+  resolution,
   onResolutionChange,
-  isGenerating = false,
+  isGenerating,
   onGenerate,
-  renderJob,
-  onGenerateRenderSmartCover,
-  onUploadCover,
-  onClose,
-  onCoverSelected,
+  onSmartCover,
+  smartCoverLoading,
+  canSmartCover,
   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
-    if (onUploadCover) {
-      onUploadCover(file)
-      e.target.value = ""
-      return
-    }
-    // 本地预览兜底（实际上传由父级处理；blob URL 仅作本地展示）
+    // 本地预览：生成 object URL（实际上传由父级/后端链路处理）
     const url = URL.createObjectURL(file)
-    _applyCoverUrl(url, "upload")
+    onCoverConfigChange({ mode: "upload", upload_url: url, thumbnail_url: url })
+    // 允许重复选择同一文件
     e.target.value = ""
   }
 
-  /** 智能获取封面（从最终成片抽帧；必须等 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)
-    }
+  /** 智能获取封面（调后端 MediaKit 抽帧评分选最佳帧，#1822） */
+  const handleSmartCover = () => {
+    onCoverConfigChange({ mode: "auto_frame" })
+    onSmartCover()
   }
 
-  const lipsync = summary?.lipsyncStatus ? LIPSYNC_STATUS_LABEL[summary.lipsyncStatus] : null
-  const canGenerate = summary?.lipsyncStatus === "completed" && !isGenerating
-  // 渲染已完成 → 封面区可用
-  const isRenderCompleted = renderJob?.status === "completed"
-  const canSmartCover = isRenderCompleted && !smartCoverLoading
+  const lipsync = summary.lipsyncStatus ? LIPSYNC_STATUS_LABEL[summary.lipsyncStatus] : null
 
-  /** 封面图实际展示的 url：智能封面 > 自定义上传 > 空 */
-  const coverUrl =
-    coverConfig.smart_cover_url || coverConfig.thumbnail_url || coverConfig.upload_url
-  const hasCoverImage = Boolean(coverUrl)
+  const canGenerate = summary.lipsyncStatus === "completed" && !isGenerating
 
-  /** 封面区占位文字 */
-  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} />
+  return (
+    <div className="aa-cover-generate">
+      {/* 封面预览（竖屏 9:16） */}
+      <div className="aa-cover-preview">
+        {coverConfig.thumbnail_url ? (
+          <img src={coverConfig.thumbnail_url} alt="封面预览" />
         ) : (
-          <span className="aa-cover-preview__placeholder">{coverPlaceholder}</span>
+          <span className="aa-cover-preview__placeholder">暂无封面</span>
         )}
-        {smartCoverLoading && <div className="aa-cover-preview__loading">⏳ 智能选帧中…</div>}
       </div>
 
       <div className="aa-cover-actions">
@@ -175,8 +102,8 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
           type="button"
           className={`aa-btn aa-btn--ghost${coverConfig.mode === "auto_frame" ? " active" : ""}`}
           onClick={handleSmartCover}
-          disabled={!canSmartCover}
-          title={isRenderCompleted ? "从成片智能选帧" : "请先生成视频"}
+          disabled={smartCoverLoading || !canSmartCover}
+          title={canSmartCover ? "基于对口型成片智能选帧" : "请先完成对口型生成"}
         >
           {smartCoverLoading ? "⏳ 智能选帧中…" : "🎬 智能获取封面"}
         </button>
@@ -184,8 +111,6 @@ 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>
@@ -197,36 +122,14 @@ 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)}
-          disabled={isGenerating}
+          onChange={(e) => onResolutionChange(e.target.value)}
         >
           {RESOLUTION_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>
@@ -241,7 +144,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>
@@ -249,7 +152,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>
@@ -257,7 +160,7 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
           </div>
           <div className="aa-config-summary__row">
             <span>文案</span>
-            {summary && summary.scriptLength > 0 ? (
+            {summary.scriptLength > 0 ? (
               <span className="aa-config-summary__value">{summary.scriptLength} 字</span>
             ) : (
               <span className="aa-config-summary__empty">未配置</span>
@@ -274,12 +177,12 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
           <div className="aa-config-summary__row">
             <span>B-roll 画面插入</span>
             <span className="aa-config-summary__value">
-              {summary && summary.brollCount > 0 ? `${summary.brollCount} 段` : "无"}
+              {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>
@@ -287,7 +190,11 @@ const PanelCoverAndGenerate: React.FC<PanelCoverAndGenerateProps> = ({
           </div>
           <div className="aa-config-summary__row">
             <span>封面</span>
-            {coverSummaryNode}
+            {summary.hasCover ? (
+              <span className="aa-config-summary__value">已开启</span>
+            ) : (
+              <span className="aa-config-summary__empty">未配置</span>
+            )}
           </div>
         </div>
 
@@ -300,16 +207,11 @@ 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: 标题字号按预览容器实际宽度动态计算 previewScale（基准 720p），与成片一致
+ * v3.1: 预览容器按 1/2 缩放、标题实时叠加预览
  */
-import React, { useCallback, useEffect, useRef, useState } from "react"
+import React, { useRef } from "react"
 import type { LipsyncJob, BRollSegment, AiAvatarTitleConfig } from "../types"
 
 interface PanelLipsyncPreviewProps {
@@ -14,8 +14,8 @@ interface PanelLipsyncPreviewProps {
   onRemoveBRoll: (id: string) => void
   /** 标题配置（实时叠加预览用） */
   titleConfig?: AiAvatarTitleConfig
-  /** 标题位置变更回调（拖拽结束时调用，发送百分比坐标 + position:"custom"） */
-  onTitlePositionChange?: (pos: { pos_x: number; pos_y: number; position: string }) => void
+  /** 标题位置变更回调（拖拽结束时调用） */
+  onTitlePositionChange?: (pos: { pos_x: number; pos_y: number }) => void
 }
 
 const BROLL_MODE_LABEL: Record<BRollSegment["mode"], string> = {
@@ -29,16 +29,6 @@ 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,
@@ -51,8 +41,6 @@ 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"
@@ -64,84 +52,29 @@ export function PanelLipsyncPreview({
         ? "排队中…"
         : "对口型生成中…"
 
-  // 监听预览容器尺寸变化，动态测量宽度以计算 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 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
 
   const handleTitlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
     if (!onTitlePositionChange || !previewContainerRef.current) return
@@ -172,10 +105,7 @@ 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))
-      // 发送百分比坐标（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" })
+      onTitlePositionChange({ pos_x: relX, pos_y: relY })
     }
     ;(e.currentTarget as HTMLDivElement).style.cursor = "grab"
   }
@@ -244,7 +174,7 @@ export function PanelLipsyncPreview({
         )}
       </div>
 
-      {/* ── 对口型预览（标题字号按 previewScale 动态缩放） ─ */}
+      {/* ── 对口型预览（v3.1: 缩放1/2 + 标题叠加） ─ */}
       <div className="aa-lipsync-section">
         <div className="aa-lipsync-section__title">对口型预览</div>
 

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

@@ -2,16 +2,17 @@
  * 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） */
@@ -26,6 +27,7 @@ export function PanelVideoSelector({
   selectedVideo,
   onSelectVideo,
   onRemoveVideo,
+  titleConfig,
 }: PanelVideoSelectorProps) {
   /* 未选视频：虚线上传区，点击打开素材库弹窗 */
   if (!selectedVideo) {
@@ -55,13 +57,42 @@ export function PanelVideoSelector({
 
   return (
     <div>
-      {/* 竖屏 9:16 视频预览播放器（纯素材预览，不叠加标题） */}
-      <div className="aa-video-preview">
+      {/* 竖屏 9:16 视频预览播放器 + 标题实时预览 */}
+      <div className="aa-video-preview" style={{ position: "relative" }}>
         {fileUrl ? (
           <video src={fileUrl} poster={selectedVideo.thumbnail_url} controls playsInline />
         ) : (
           <div className="aa-video-preview__placeholder">视频暂不可预览</div>
         )}
+        {titleConfig?.title && (
+          <div
+            style={{
+              position: "absolute",
+              left: "50%",
+              transform: "translateX(-50%)",
+              ...(titleConfig.position === "top"
+                ? { top: "10%" }
+                : titleConfig.position === "bottom"
+                  ? { bottom: "10%" }
+                  : { top: "50%", transform: "translate(-50%, -50%)" }),
+              fontSize: Math.max(titleConfig.size, 32),
+              fontFamily: getFontFamily(titleConfig.font),
+              color: titleConfig.color,
+              fontWeight: titleConfig.bold ? 700 : 400,
+              fontStyle: titleConfig.italic ? "italic" : "normal",
+              textShadow: "0 2px 4px rgba(0,0,0,0.5)",
+              WebkitTextStroke: "2px #000",
+              pointerEvents: "none",
+              zIndex: 10,
+              maxWidth: "90%",
+              textAlign: "center",
+              whiteSpace: "pre-wrap",
+              lineHeight: 1.3,
+            }}
+          >
+            {titleConfig.title}
+          </div>
+        )}
       </div>
 
       {/* 视频信息卡片：文件名 / 时长 / 分辨率 */}

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

@@ -13,8 +13,7 @@ import {
   type VoiceEmotion,
   type VoiceLanguage,
   VOICE_EMOTION_OPTIONS,
-  PRESET_VOICE_LANGUAGE_OPTIONS,
-  CLONE_VOICE_LANGUAGE_OPTIONS,
+  VOICE_LANGUAGE_OPTIONS,
 } from "../types"
 
 interface PanelVoiceSelectorProps {
@@ -92,12 +91,6 @@ export function PanelVoiceSelector({
 
   const NO_PREVIEW_TIP = "该音色暂无试听音频，请先用此音色生成一段配音后再试听"
 
-  // 系统预置音色仅支持 zh/en；克隆音色支持全语言
-  const languageOptions =
-    voiceSource === "clone" ? CLONE_VOICE_LANGUAGE_OPTIONS : PRESET_VOICE_LANGUAGE_OPTIONS
-  // 当前语言不在可选列表（切回预置时 ja/ko/cantonese/mandarin 失效）→ 自动回退到中文
-  const effectiveLanguage = languageOptions.some((o) => o.value === language) ? language : "zh"
-
   /** 用指定 URL 真实播放（抽取公共） */
   const playAudioUrl = (voiceId: string, url: string) => {
     // 临时兼容：后端 /tts/preview 返回 HTTP URL，staging 是 HTTPS，Mixed Content 会阻止加载
@@ -146,6 +139,13 @@ 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,6 +154,10 @@ 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("合成试听失败：未返回音频")
@@ -296,12 +300,10 @@ export function PanelVoiceSelector({
             <select
               id="aa-voice-language"
               className="aa-select"
-              value={effectiveLanguage}
-              onChange={(e) => {
-                onLanguageChange(e.target.value as VoiceLanguage)
-              }}
+              value={language}
+              onChange={(e) => onLanguageChange(e.target.value as VoiceLanguage)}
             >
-              {languageOptions.map((opt) => (
+              {VOICE_LANGUAGE_OPTIONS.map((opt) => (
                 <option key={opt.value} value={opt.value}>
                   {opt.label}
                 </option>

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

@@ -1,5 +1,5 @@
 /**
- * AI数字人 — 页面全局状态管理 hook（v3 + #1845 配音前置）
+ * AI数字人 — 页面全局状态管理 hook（v3）
  */
 import { useState, useCallback } from "react"
 import type { AssetItem } from "@/api/assets"
@@ -13,19 +13,10 @@ 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)
@@ -34,9 +25,9 @@ export function useAiAvatar() {
   /* ── 面板2：配音库 ── */
   const [voiceSource, setVoiceSource] = useState<VoiceSource>("preset")
   const [selectedVoice, setSelectedVoice] = useState<UnifiedVoiceItem | null>(null)
-  const [emotion, setEmotion] = useState<VoiceEmotion>("neutral")
+  const [emotion, setEmotion] = useState<VoiceEmotion>("natural")
   const [speed, setSpeed] = useState(1.0)
-  const [language, setLanguage] = useState<VoiceLanguage>("zh")
+  const [language, setLanguage] = useState<VoiceLanguage>("mandarin")
 
   /* ── 面板3：文案 & 对口型 ── */
   const [script, setScript] = useState<Script | null>(null)
@@ -45,9 +36,6 @@ 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[]>([])
 
@@ -93,7 +81,6 @@ export function useAiAvatar() {
     setScript(null)
     setScriptText("")
     setLipsyncJob(null)
-    setTtsPreview(DEFAULT_TTS_PREVIEW)
     setBRollSegments([])
     setTitleConfig(DEFAULT_TITLE_CONFIG)
     setCoverConfig(DEFAULT_COVER_CONFIG)
@@ -131,10 +118,6 @@ 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

@@ -6,56 +6,28 @@ import type { AssetItem } from "@/api/assets"
 /* ── 音色来源切换 ── */
 export type VoiceSource = "preset" | "clone"
 
-/* ── 情绪（对齐 CosyVoice 7 种情绪） ── */
-export type VoiceEmotion =
-  "neutral" | "happy" | "sad" | "angry" | "surprised" | "fearful" | "disgusted"
+/* ── 情绪 ── */
+export type VoiceEmotion = "natural" | "excited" | "calm" | "friendly"
 
 export const VOICE_EMOTION_OPTIONS: { value: VoiceEmotion; label: string }[] = [
-  { value: "neutral", label: "自然" },
-  { value: "happy", label: "开心" },
-  { value: "sad", label: "难过" },
-  { value: "angry", label: "生气" },
-  { value: "surprised", label: "惊讶" },
-  { value: "fearful", label: "恐惧" },
-  { value: "disgusted", label: "厌恶" },
+  { value: "natural", label: "自然" },
+  { value: "excited", label: "兴奋" },
+  { value: "calm", label: "沉稳" },
+  { value: "friendly", label: "亲切" },
 ]
 
 /* ── 语言 ── */
-/** 系统预置音色支持的语言（zh/en） */
-export type PresetVoiceLanguage = "zh" | "en"
-/** 克隆音色支持的完整语言列表 */
-export type CloneVoiceLanguage = "zh" | "en" | "ja" | "ko"
-export type VoiceLanguage = PresetVoiceLanguage | CloneVoiceLanguage
+export type VoiceLanguage = "mandarin" | "english" | "cantonese"
 
-export const PRESET_VOICE_LANGUAGE_OPTIONS: { value: PresetVoiceLanguage; label: string }[] = [
-  { value: "zh", label: "中文" },
-  { value: "en", label: "English" },
+export const VOICE_LANGUAGE_OPTIONS: { value: VoiceLanguage; label: string }[] = [
+  { value: "mandarin", label: "普通话" },
+  { value: "english", label: "English" },
+  { value: "cantonese", label: "粤语" },
 ]
 
-export const CLONE_VOICE_LANGUAGE_OPTIONS: { value: CloneVoiceLanguage; label: string }[] = [
-  { value: "zh", label: "中文" },
-  { value: "en", label: "English" },
-  { value: "ja", label: "日本語" },
-  { value: "ko", label: "한국어" },
-]
-
-/** 默认（预置音色）语言选项 */
-export const VOICE_LANGUAGE_OPTIONS = PRESET_VOICE_LANGUAGE_OPTIONS
-
 /* ── 对口型任务状态 ── */
 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
@@ -72,23 +44,12 @@ export interface LipsyncJob {
   status: LipsyncStatus
   progress: number
   output_video_url: string | null
-  /** 对口型成片总时长（秒），后端返回 */
-  script_text: string
+  /** 对口型成片总时长（秒），后端返回；用于 B-roll 时间自动估算（#1809 ⑥） */
   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"
@@ -116,7 +77,7 @@ export interface AiAvatarTitleConfig {
   shadow: boolean
   color: string
   auto_subtitle: boolean
-  /** 自定义位置坐标（position=custom 时生效，百分比 0-100） */
+  /** 自定义位置坐标（position=custom 时生效，像素） */
   pos_x?: number
   pos_y?: number
 }
@@ -140,7 +101,6 @@ export interface RenderJob {
   status: RenderStatus
   progress: number
   output_video_url: string | null
-  output_cover_url: string | null
   error_message: string | null
   created_at: string
 }
@@ -150,7 +110,7 @@ export const DEFAULT_TITLE_CONFIG: AiAvatarTitleConfig = {
   title: "",
   position: "bottom",
   font: "思源黑体",
-  size: 48,
+  size: 28,
   bold: true,
   italic: false,
   stroke: false,

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

@@ -6,50 +6,21 @@
  */
 import type { AiAvatarTitleConfig, AiAvatarCoverConfig, VoiceEmotion } from "../types"
 
-/* ── 情绪：中文/旧枚举 → CosyVoice 7 种英文枚举 ── */
-const EMOTION_ALIAS: Record<string, VoiceEmotion> = {
-  // 新英文枚举
-  neutral: "neutral",
-  happy: "happy",
-  sad: "sad",
-  angry: "angry",
-  surprised: "surprised",
-  fearful: "fearful",
-  disgusted: "disgusted",
-  // 旧英文枚举（4 种，向前兼容）
-  natural: "neutral",
-  excited: "happy",
-  calm: "neutral",
-  friendly: "happy",
-  // 中文
-  自然: "neutral",
-  开心: "happy",
-  难过: "sad",
-  生气: "angry",
-  惊讶: "surprised",
-  恐惧: "fearful",
-  厌恶: "disgusted",
-  // 旧中文
-  兴奋: "happy",
-  沉稳: "neutral",
-  亲切: "happy",
+/* ── 情绪：中文 → 英文（防御性映射；state 默认已是英文） ── */
+const EMOTION_ZH_TO_EN: Record<string, VoiceEmotion> = {
+  自然: "natural",
+  兴奋: "excited",
+  沉稳: "calm",
+  亲切: "friendly",
 }
-const VALID_EMOTIONS: VoiceEmotion[] = [
-  "neutral",
-  "happy",
-  "sad",
-  "angry",
-  "surprised",
-  "fearful",
-  "disgusted",
-]
+const VALID_EMOTIONS: VoiceEmotion[] = ["natural", "excited", "calm", "friendly"]
 
-/** 归一化为后端英文枚举 neutral/happy/sad/angry/surprised/fearful/disgusted；非法/空值回退 neutral。 */
+/** 归一化为后端英文枚举 natural/excited/calm/friendly；非法/空值回退 natural。 */
 export function normalizeEmotion(raw: string | undefined | null): VoiceEmotion {
-  if (!raw) return "neutral"
+  if (!raw) return "natural"
   const v = raw.trim()
   if ((VALID_EMOTIONS as string[]).includes(v)) return v as VoiceEmotion
-  return EMOTION_ALIAS[v] ?? "neutral"
+  return EMOTION_ZH_TO_EN[v] ?? "natural"
 }
 
 /* ── 标题：前端 state → 后端 build_title_drawtext_filter 字段（单个 title_config dict） ── */
@@ -57,13 +28,10 @@ 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 时)、title_image_dataurl（前端 Canvas 渲染的 PNG dataURL，WYSIWYG 路径优先）。
+ * pos_x/pos_y(custom 时)。
  * 口播标题默认 position=bottom（不传后端会默认 top 跑到画面顶部）。
  */
-export function buildTitleConfigPayload(
-  cfg: AiAvatarTitleConfig,
-  titleImageDataUrl?: string | null,
-): Record<string, unknown> {
+export function buildTitleConfigPayload(cfg: AiAvatarTitleConfig): Record<string, unknown> {
   const text = (cfg.title || "").trim()
   if (!text) return {}
   const position = cfg.position || "bottom"
@@ -71,7 +39,7 @@ export function buildTitleConfigPayload(
     text,
     enabled: true,
     font: cfg.font || "思源黑体",
-    font_size: Math.round(cfg.size) || 48,
+    font_size: Math.round(cfg.size) || 36,
     font_color: cfg.color || "#ffffff",
     position,
     bold: !!cfg.bold,
@@ -85,10 +53,6 @@ export function buildTitleConfigPayload(
     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
 }
 
@@ -103,14 +67,9 @@ export function buildCoverConfigPayload(
     // build_cover_extract_command 读取 timestamp（截帧秒数）
     timestamp: cfg.frame_time || 0,
   }
-  // 智能封面 URL（后端字段名为 url/imageUrl/cover_url 都兼容，优先 url）
-  if (smartCoverUrl) {
-    payload.url = smartCoverUrl
-    payload.cover_url = smartCoverUrl
-  }
+  if (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,10 +1,5 @@
 /**
- * AI数字人 — 文案分句 & B-roll 时间计算
- *
- * 数据来源优先级：
- *   1. 后端 sentence_timings（基于 TTS 音频静音检测，精确到句子边界）—— 直接使用，不重新分句
- *   2. 后端 output_duration（最终渲染视频时长） + 本地分句 —— 按字数比例估算
- *   3. 两者都没有（对口型还在生成中）—— 返回分句文本但 startTime/endTime 全部 0，等数据到位重算
+ * AI数字人 — 文案分句 & B-roll 时间自动估算（#1809 ⑤⑥）
  */
 
 export interface ScriptSentence {
@@ -16,67 +11,25 @@ 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,
-  sentenceTimings?:
-    { index?: number; text?: string; start_time: number; end_time: number }[] | null,
-  outputDuration: number = 0,
+  outputDuration: number,
 ): 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(SENTENCE_SPLIT_RE)
+    .split(/[。！？!?；;\n\r]+/)
     .map((part) => part.trim())
     .filter((part) => part.length > 0)
 

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

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

@@ -0,0 +1,326 @@
+/**
+ * 模板编辑器 — 制作/编辑剪辑模板
+ * 四行布局：顶栏(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

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

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

@@ -0,0 +1,182 @@
+/**
+ * 右栏设置面板 — 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

@@ -0,0 +1,106 @@
+/**
+ * 所有弹窗和 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

@@ -0,0 +1,148 @@
+/**
+ * 编辑器右侧栏 — 片段列表 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

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

@@ -0,0 +1,106 @@
+/**
+ * 滤镜调色配置面板
+ * 预设滤镜 + 手动调节（亮度/对比度/饱和度/色温/色调/锐度）
+ */
+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

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

@@ -0,0 +1,101 @@
+/**
+ * 片头片尾配置面板 — 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

@@ -0,0 +1,102 @@
+/**
+ * 左侧面板 — 模板列表
+ * 模板编辑器只负责定义模板规则（片段数量、时长范围），不承载素材管理。
+ */
+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

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

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

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

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

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

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

@@ -0,0 +1,105 @@
+/**
+ * 混剪配置面板 — 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

@@ -0,0 +1,431 @@
+/**
+ * 预览播放器样式 — 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

@@ -0,0 +1,129 @@
+/**
+ * 预览区 — 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

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

@@ -0,0 +1,86 @@
+/**
+ * 保存/更新模板弹窗 — 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

@@ -0,0 +1,152 @@
+/**
+ * 片段调速面板 — 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

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

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

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

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

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

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

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

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

@@ -0,0 +1,200 @@
+/**
+ * 水平轨道时间线 — 支持裁剪手柄、分割、右键菜单
+ * 时间标尺 + 片段轨道 + 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

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

@@ -0,0 +1,116 @@
+/**
+ * 转场特效选择器 — 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

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

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

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

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

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

@@ -0,0 +1,123 @@
+/**
+ * 水印配置面板 — 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

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+/**
+ * 编辑统计区块
+ */
+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

@@ -0,0 +1,113 @@
+/**
+ * 字幕设置区块
+ */
+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

@@ -0,0 +1,136 @@
+/**
+ * 标题设置区块 — #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