test(unit): 第87波 - worker层speed_engine+reverse_engine纯逻辑单测 (+85)

- test_speed_engine_pure.py (57个): SpeedConfig解析/钳制/isOriginal, SpeedEngine视频滤镜, atempo多级拆分算法, 时长计算, resolve_clip_speed
- test_reverse_engine_pure.py (28个): ReverseConfig.from_dict容错解析, 视频/音频滤镜构建, 120s安全时长限制, 组合场景验证

.gitea/workflows/ci-health-daily.yml

@@ -8,7 +8,7 @@ permissions:
 jobs:
   ci-health-report:
     name: CI健康度每日巡检
-    runs-on: saas
+    runs-on: ci-l2
     timeout-minutes: 15
     steps:
     - name: Checkout code

.gitea/workflows/ci-pipeline.yml

@@ -58,24 +58,56 @@ jobs:
       run: |
         set -eu
         PR_NUMBER=$(echo "$GITHUB_REF" | sed 's|refs/pull/||; s|/.*||')
-        API_URL="${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/pulls/${PR_NUMBER}/files?limit=300"
-        FILES=$(curl -s -H "Authorization: token ${GITHUB_TOKEN}" "$API_URL" | python3 -c "import sys,json; [print(f['filename']) for f in json.load(sys.stdin)]")
-        FRONTEND_COUNT=$(echo "$FILES" | grep -c '^apps/web/' || true)
-        BACKEND_COUNT=$(echo "$FILES" | grep -cv '^apps/web/' || true)
-        TOTAL=$(echo "$FILES" | grep -cv '^$' || true)
-        echo "变更文件: ${TOTAL} 个 (前端: ${FRONTEND_COUNT}, 后端/公共: ${BACKEND_COUNT})"
-        if [ "$BACKEND_COUNT" = "0" ] && [ "$FRONTEND_COUNT" -gt "0" ]; then
+
+        # 分页获取所有变更文件（修复>300文件时漏判）
+        ALL_FILES=""
+        PAGE=1
+        while true; do
+          API_URL="${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/pulls/${PR_NUMBER}/files?limit=300&page=${PAGE}"
+          PAGE_FILES=$(curl -s -H "Authorization: token ${GITHUB_TOKEN}" "$API_URL" | python3 -c "import sys,json; files=json.load(sys.stdin); [print(f['filename']) for f in files]; sys.exit(0 if len(files)==300 else 1)" 2>/dev/null || true)
+          PAGE_COUNT=$(echo "$PAGE_FILES" | wc -l)
+          if [ "$PAGE_COUNT" -lt 300 ]; then HAS_MORE=1; else HAS_MORE=0; fi
+          ALL_FILES="${ALL_FILES}${PAGE_FILES}"$'\n'
+          if [ "$HAS_MORE" != "0" ]; then
+            break
+          fi
+          PAGE=$((PAGE + 1))
+        done
+
+        FRONTEND_COUNT=$(echo "$ALL_FILES" | grep -c '^apps/web/' || true)
+        TOTAL=$(echo "$ALL_FILES" | grep -cv '^$' || true)
+        BACKEND_COUNT=$(( TOTAL - FRONTEND_COUNT ))
+
+        # 基础设施文件：改了就强制全量CI（不跳过任何检查）
+        INFRA_COUNT=$(echo "$ALL_FILES" | grep -cE '^(infra/|Dockerfile|\.gitea/workflows/|scripts/ci/|docker/)' || true)
+
+        echo "变更文件: ${TOTAL} 个 (前端: ${FRONTEND_COUNT}, 后端/公共: ${BACKEND_COUNT}, 基础设施: ${INFRA_COUNT})"
+
+        # 判定是否纯前端/纯后端
+        PURE_FRONTEND=false
+        PURE_BACKEND=false
+        if [ "$BACKEND_COUNT" = "0" ] && [ "$FRONTEND_COUNT" -gt "0" ] && [ "$INFRA_COUNT" = "0" ]; then
+          PURE_FRONTEND=true
+        elif [ "$FRONTEND_COUNT" = "0" ] && [ "$BACKEND_COUNT" -gt "0" ] && [ "$INFRA_COUNT" = "0" ]; then
+          PURE_BACKEND=true
+        fi
+
+        if [ "$PURE_FRONTEND" = "true" ]; then
           echo "skip_backend=true" >> $GITHUB_OUTPUT
           echo "skip_frontend=false" >> $GITHUB_OUTPUT
           echo "✅ 纯前端改动，跳过后端检查"
-        elif [ "$FRONTEND_COUNT" = "0" ] && [ "$BACKEND_COUNT" -gt "0" ]; then
+        elif [ "$PURE_BACKEND" = "true" ]; then
           echo "skip_backend=false" >> $GITHUB_OUTPUT
           echo "skip_frontend=true" >> $GITHUB_OUTPUT
           echo "🔧 纯后端改动，跳过前端检查"
         else
           echo "skip_backend=false" >> $GITHUB_OUTPUT
           echo "skip_frontend=false" >> $GITHUB_OUTPUT
-          echo "🔧 包含全栈变更，运行完整CI"
+          if [ "$INFRA_COUNT" -gt "0" ]; then
+            echo "🏗️  包含基础设施变更，强制运行完整CI"
+          else
+            echo "🔧 包含全栈变更，运行完整CI"
+          fi
         fi
 
     - name: Report CI trace
@@ -1588,7 +1620,6 @@ jobs:
         set -eu
         python3 scripts/ci/acr_cleanup.py \
           --keep 20 \
-          --pr-days 7 \
           --execute
 
     - name: Job duration summary

.gitea/workflows/ci-trigger-monitor.yml

@@ -16,15 +16,15 @@ permissions:
 jobs:
   monitor:
     name: Monitor CI Trigger Reliability
-    runs-on: ubuntu-latest
+    runs-on: ci-l2
     timeout-minutes: 5
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
-        # 网络波动自动重试2次
-        retry:
-          max_attempts: 2
-          retry_on: error
+        shell: sh
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          curl -sH "Authorization: token $GITHUB_TOKEN"             "${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/raw/scripts/ci/step_checkout.sh?ref=${GITHUB_SHA}"             | bash
       
       - name: Check CI trigger status for all open PRs
         env:

.gitea/workflows/code-review.yml

@@ -15,20 +15,18 @@ concurrency:
 jobs:
   code-review:
     name: AI Code Review
-    runs-on: ubuntu-latest
+    runs-on: ci-l2
     # 跳过草稿 PR
     if: ${{ !gitea.event.pull_request.draft }}
 
     steps:
       # actions/checkout 由 runner 在宿主机层面处理，不受容器网络影响
       - name: Checkout code
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-        # 网络波动自动重试2次
-        retry:
-          max_attempts: 2
-          retry_on: error
+        shell: sh
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        run: |
+          curl -sH "Authorization: token $GITHUB_TOKEN"             "${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/raw/scripts/ci/step_checkout.sh?ref=${GITHUB_SHA}"             | bash
 
       - name: Install dependencies
         run: |

.gitea/workflows/daily-check.yml

@@ -12,7 +12,7 @@ jobs:
   # ── 1. 生产环境冒烟测试 ─────────────────────────────────────────────
   production-smoke:
     name: Production Smoke Test
-    runs-on: saas
+    runs-on: ci-l2
     timeout-minutes: 8
     outputs:
       report: ${{ steps.smoke.outputs.report }}
@@ -121,7 +121,7 @@ jobs:
   # ── 2. Staging API 集成测试 ─────────────────────────────────────────
   staging-api-tests:
     name: Staging API Integration Tests
-    runs-on: saas
+    runs-on: ci-l2
     timeout-minutes: 10
     outputs:
       report: ${{ steps.smoke.outputs.report }}
@@ -176,6 +176,9 @@ jobs:
       - name: Run API smoke test on staging
         id: smoke
         shell: sh
+        env:
+          STAGING_TEST_USER: ${{ secrets.STAGING_TEST_USER }}
+          STAGING_TEST_PASSWORD: ${{ secrets.STAGING_TEST_PASSWORD }}
         run: |
           set +e
           START_TIME=$(date +%s)
@@ -183,8 +186,8 @@ jobs:
           docker run --rm \
             -e BASE_URL=https://staging-api.xiaoxiajianji.com \
             -e WEB_URL=https://staging.xiaoxiajianji.com \
-            -e TEST_USER=18314979086@163.com \
-            -e TEST_PASSWORD=Ying1234 \
+            -e TEST_USER="$STAGING_TEST_USER" \
+            -e TEST_PASSWORD="$STAGING_TEST_PASSWORD" \
             -e CLEANUP_ENABLED=1 \
             -e PERF_CHECK_ENABLED=1 \
             -e PERF_WARN_THRESHOLD_MS=500 \
@@ -270,7 +273,7 @@ jobs:
   # ── 3. Staging 浏览器 E2E ──────────────────────────────────────────
   staging-e2e:
     name: Staging Browser E2E
-    runs-on: saas
+    runs-on: ci-l2
     timeout-minutes: 15
     outputs:
       report: ${{ steps.smoke.outputs.report }}
@@ -371,7 +374,7 @@ jobs:
   # ── 4. 性能基线巡检 ────────────────────────────────────────────────
   performance-check:
     name: Performance Baseline Check
-    runs-on: saas
+    runs-on: ci-l2
     timeout-minutes: 8
     outputs:
       report: ${{ steps.report.outputs.report }}
@@ -380,6 +383,9 @@ jobs:
       - name: Run performance baseline checks
         id: perf
         shell: sh
+        env:
+          STAGING_TEST_USER: ${{ secrets.STAGING_TEST_USER }}
+          STAGING_TEST_PASSWORD: ${{ secrets.STAGING_TEST_PASSWORD }}
         run: |
           set +e
           START_TIME=$(date +%s)
@@ -415,9 +421,10 @@ jobs:
 
           # 先登录获取 token
           echo "--- 准备: 获取测试 Token ---"
+          LOGIN_BODY="{\"email\":\"$STAGING_TEST_USER\",\"password\":\"$STAGING_TEST_PASSWORD\"}"
           AUTH_RESP=$(curl -s -w "\n%{http_code}" -X POST \
             -H "Content-Type: application/json" \
-            -d '{"email":"18314979086@163.com","password":"Ying1234"}' \
+            -d "$LOGIN_BODY" \
             "https://staging-api.xiaoxiajianji.com/api/v1/auth/login" \
             --max-time 10 2>&1)
           AUTH_CODE=$(echo "$AUTH_RESP" | tail -1)
@@ -447,7 +454,7 @@ jobs:
             # 构建 curl 命令
             CURL_ARGS="-s -o /dev/null -w '%{http_code} %{time_total}' --max-time 30"
             if [ "$method" = "POST" ]; then
-              CURL_ARGS="$CURL_ARGS -X POST -H 'Content-Type: application/json' -d '{\"email\":\"18314979086@163.com\",\"password\":\"Ying1234\"}'"
+              CURL_ARGS="$CURL_ARGS -X POST -H 'Content-Type: application/json' -d \"$LOGIN_BODY\""
             fi
             if [ -n "$TOKEN" ] && [ "$name" != "健康检查" ]; then
               CURL_ARGS="$CURL_ARGS -H 'Authorization: Bearer $TOKEN'"
@@ -495,6 +502,9 @@ jobs:
       - name: Generate performance report
         id: report
         shell: sh
+        env:
+          STAGING_TEST_USER: ${{ secrets.STAGING_TEST_USER }}
+          STAGING_TEST_PASSWORD: ${{ secrets.STAGING_TEST_PASSWORD }}
         run: |
           set +e
           echo ""
@@ -509,10 +519,11 @@ jobs:
           RESULTS=""
           START_TIME=$(date +%s)
 
+          LOGIN_BODY="{\"email\":\"$STAGING_TEST_USER\",\"password\":\"$STAGING_TEST_PASSWORD\"}"
           # 先登录获取 token
           AUTH_RESP=$(curl -s -w "\n%{http_code}" -X POST \
             -H "Content-Type: application/json" \
-            -d '{"email":"18314979086@163.com","password":"Ying1234"}' \
+            -d "$LOGIN_BODY" \
             "https://staging-api.xiaoxiajianji.com/api/v1/auth/login" \
             --max-time 10 2>&1)
           AUTH_CODE=$(echo "$AUTH_RESP" | tail -1)
@@ -528,7 +539,7 @@ jobs:
 
             local CURL_ARGS="-s -o /dev/null -w '%{http_code} %{time_total}' --max-time 30"
             if [ "$method" = "POST" ]; then
-              CURL_ARGS="$CURL_ARGS -X POST -H 'Content-Type: application/json' -d '{\"email\":\"18314979086@163.com\",\"password\":\"Ying1234\"}'"
+              CURL_ARGS="$CURL_ARGS -X POST -H 'Content-Type: application/json' -d \"$LOGIN_BODY\""
             fi
             if [ -n "$TOKEN" ] && [ "$name" != "健康检查" ]; then
               CURL_ARGS="$CURL_ARGS -H 'Authorization: Bearer $TOKEN'"
@@ -631,7 +642,7 @@ jobs:
   # ── 5. 每日巡检汇总报告 ────────────────────────────────────────────
   daily-report:
     name: Daily Check Report
-    runs-on: saas
+    runs-on: ci-l2
     timeout-minutes: 2
     if: always()
     needs:

.gitea/workflows/preview-deploy.yml

@@ -93,44 +93,31 @@ jobs:
       shell: sh
       run: |
         set -eu
-        NPM_CACHE_VOLUME="xiaoxia-npm-cache"
-        if ! docker volume inspect "$NPM_CACHE_VOLUME" >/dev/null 2>&1; then
-          docker volume create "$NPM_CACHE_VOLUME" >/dev/null
-          echo "Created npm cache volume: $NPM_CACHE_VOLUME"
-        fi
+        cd apps/web
 
-        docker run --rm \
-          -v "$PWD:/workspace" \
-          -v "$NPM_CACHE_VOLUME:/workspace/apps/web/node_modules" \
-          -w /workspace/apps/web \
-          -e VITE_API_URL=https://staging-api.xiaoxiajianji.com \
-          docker.m.daocloud.io/library/node:20 \
-          sh -lc '
-            PACKAGE_LOCK_HASH=$(md5sum package-lock.json 2>/dev/null | cut -d" " -f1)
-            CACHE_HASH_FILE="node_modules/.package-lock-hash"
-            CACHE_VALID=false
-            if [ -f "$CACHE_HASH_FILE" ] && [ "$(cat "$CACHE_HASH_FILE")" = "$PACKAGE_LOCK_HASH" ] && [ -x "node_modules/.bin/vite" ] && [ -x "node_modules/.bin/tsc" ]; then
-              CACHE_VALID=true
-              echo "Cache hit: dependencies valid, skipping npm ci"
-            fi
-            if [ "$CACHE_VALID" = "false" ]; then
-              echo "Cache miss or invalid: running npm ci..."
-              if ! npm ci; then
-                echo "npm ci failed, cleaning node_modules and retrying..."
-                rm -rf node_modules
-                mkdir -p node_modules
-                npm ci
-              fi
-              echo "$PACKAGE_LOCK_HASH" > "$CACHE_HASH_FILE"
-              echo "Dependencies installed, cache updated"
-            fi
-            echo "Running TypeScript check..."
-            npx --no-install tsc
-            echo "Running Vite build..."
-            npx --no-install vite build
-            echo "Build completed successfully"
-            ls -la dist/
-          '
+        # Config npm mirror for speed
+        npm config set registry https://registry.npmmirror.com
+
+        # Install dependencies with retry
+        for i in 1 2 3; do
+          npm ci --no-audit --no-fund && break
+          echo "npm ci failed, retry $i/3..."
+          [ $i -eq 3 ] && exit 1
+          rm -rf node_modules
+          sleep 5
+        done
+
+        # TypeScript check
+        echo "=== TypeScript check ==="
+        npx --no-install tsc --noEmit
+
+        # Vite build
+        echo "=== Vite build ==="
+        export VITE_API_URL=https://staging-api.xiaoxiajianji.com
+        npx --no-install vite build
+
+        echo "=== Build completed ==="
+        ls -la dist/
 
     - name: Install SSH client and rsync
       shell: sh

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

@@ -2,99 +2,13 @@
  * 右栏设置面板 — V8 原型 1:1 还原
  * 字幕设置 + BGM设置 + 片段详情
  */
-import React, { useRef, useState, useCallback } from "react"
-import { useNavigate } from "react-router-dom"
-import type { TemplateMode } from "@/api/editing-planner"
-import type { ClipData, ClipType } from "../types"
-import { TRANSITION_OPTIONS } from "@/api/template-editor"
-import type { AssetItem } from "@/api/assets"
-
-interface SubtitleSettings {
-  enabled: boolean
-  position: string
-  font: string
-  fontSize: number
-  fontColor: string
-  animation: string
-  mode?: string
-  stroke?: boolean
-  shadow?: boolean
-  asrLanguage?: string
-}
-
-interface BgmSettings {
-  enabled: boolean
-  music_id: string
-  volume?: number
-  fade_in?: number
-  fade_out?: number
-  voice_dodge?: boolean
-}
-
-interface ClipPropertiesPanelProps {
-  selectedClip: ClipData | null
-  subtitleSettings: SubtitleSettings
-  bgmSettings: BgmSettings
-  clipsCount: number
-  totalDuration: number
-  currentMode: TemplateMode
-  onSubtitleSettingsChange: (partial: Partial<SubtitleSettings>) => void
-  onBgmSettingsChange: (partial: Partial<BgmSettings>) => void
-  onClipUpdate: (clipId: string, data: Partial<ClipData>) => void
-  /** 打开 BGM 选择器 Drawer */
-  onOpenBgmDrawer?: () => void
-  /** 打开字幕样式配置 Drawer */
-  onOpenSubtitleDrawer?: () => void
-  /** 配音素材列表（从配音库 API 获取） */
-  voiceMaterials?: AssetItem[]
-  /** 配音素材加载中 */
-  voiceMaterialsLoading?: boolean
-  /** 刷新配音素材列表 */
-  onRefreshVoiceMaterials?: () => void
-  /** 为片段选择配音素材 */
-  onClipVoiceSelect?: (clipId: string, asset: AssetItem | null) => void
-  /** 打开转场特效选择器 Drawer */
-  onOpenTransitionDrawer?: (clipId: string) => void
-  /** 打开片段调速面板 Drawer */
-  onOpenSpeedDrawer?: (clipId: string) => void
-  /** 打开 TTS 配音面板 Drawer */
-  onOpenTtsDrawer?: (clipId: string) => void
-  /** 打开水印设置面板 Drawer */
-  onOpenWatermarkDrawer?: () => void
-  /** 打开片头片尾设置面板 Drawer */
-  onOpenIntroOutroDrawer?: () => void
-  /** 打开混剪设置面板 Drawer */
-  onOpenPipDrawer?: () => void
-  /** 打开滤镜调色面板 Drawer */
-  onOpenFilterDrawer?: () => void
-  /** 打开绿幕抠像面板 Drawer */
-  onOpenGreenScreenDrawer?: () => void
-  /** 打开贴纸面板 Drawer */
-  onOpenStickerDrawer?: () => void
-  /** 打开封面选择器 Drawer */
-}
-
-const POSITION_OPTIONS = [
-  { value: "top", label: "顶部" },
-  { value: "center", label: "居中" },
-  { value: "bottom", label: "底部" },
-]
-
-const FONT_OPTIONS = ["思源黑体", "思源宋体", "苹方", "PingFang", "微软雅黑", "楷体", "华康俪金黑"]
-
-const ANIMATION_OPTIONS = [
-  { value: "none", label: "无" },
-  { value: "fade", label: "淡入淡出" },
-  { value: "slide", label: "滑动" },
-  { value: "typewriter", label: "打字机" },
-]
-
-/** 片段类型图标/标签 */
-const CLIP_TYPE_ICONS: Record<ClipType, string> = { voice: "🎙️", pip: "🖼️" }
-const CLIP_TYPE_LABELS: Record<ClipType, string> = {
-  voice: "口播",
-  pip: "混剪",
-}
+import React from "react"
+import type { ClipPropertiesPanelProps } from "@/pages/editing-planner/types/clipProperties"
+import SubtitleSettingsSection from "./clip-properties/SubtitleSettingsSection"
+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> = ({
   selectedClip,
@@ -122,165 +36,19 @@ const ClipPropertiesPanel: React.FC<ClipPropertiesPanelProps> = ({
   onOpenGreenScreenDrawer,
   onOpenStickerDrawer,
 }) => {
-  const navigate = useNavigate()
+  const { previewingId, handlePreviewVoice, stopPreview } = useVoicePreview()
 
-  /* ── 配音试听 ── */
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-  const [previewingId, setPreviewingId] = useState<string | null>(null)
-
-  /** 试听配音素材 */
-  const handlePreviewVoice = useCallback(
-    (asset: AssetItem) => {
-      // 点击同一个 → 暂停
-      if (previewingId === asset.id) {
-        audioRef.current?.pause()
-        setPreviewingId(null)
-        return
-      }
-      // 停止上一个
-      audioRef.current?.pause()
-      const url = asset.file_url || (asset.metadata?.preview_url as string)
-      if (!url) return
-      const audio = new Audio(url)
-      audioRef.current = audio
-      audio.play().catch(() => {})
-      audio.onended = () => setPreviewingId(null)
-      setPreviewingId(asset.id)
-    },
-    [previewingId],
-  )
-
-  /** 从 metadata 取性别标签 */
-  const getGenderLabel = (m: AssetItem): string => {
-    const g = (m.metadata?.gender as string) || ""
-    if (g === "male") return "男"
-    if (g === "female") return "女"
-    return ""
-  }
   return (
     <div className="ep-right-panel">
       {/* ═══ 字幕设置 ═══ */}
-      <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 ${subtitleSettings.enabled ? "active" : ""}`}
-            onClick={() =>
-              onSubtitleSettingsChange({
-                enabled: !subtitleSettings.enabled,
-              })
-            }
-          >
-            <div className="ep-toggle-knob" />
-          </div>
-        </div>
-
-        {subtitleSettings.enabled && (
-          <>
-            <div className="ep-field">
-              <label className="ep-field-label">位置</label>
-              <select
-                className="ep-form-select"
-                value={subtitleSettings.position}
-                onChange={(e) => onSubtitleSettingsChange({ 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={subtitleSettings.font}
-                onChange={(e) => onSubtitleSettingsChange({ 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={subtitleSettings.fontSize}
-                  onChange={(e) =>
-                    onSubtitleSettingsChange({
-                      fontSize: Number(e.target.value),
-                    })
-                  }
-                />
-                <span className="ep-slider-value">{subtitleSettings.fontSize}px</span>
-              </div>
-            </div>
-
-            <div className="ep-field">
-              <label className="ep-field-label">动画</label>
-              <select
-                className="ep-form-select"
-                value={subtitleSettings.animation}
-                onChange={(e) => onSubtitleSettingsChange({ 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>
+      <SubtitleSettingsSection
+        settings={subtitleSettings}
+        onChange={onSubtitleSettingsChange}
+        onOpenSubtitleDrawer={onOpenSubtitleDrawer}
+      />
 
       {/* ═══ BGM 设置 ═══ */}
-      <div className="ep-settings-section">
-        <div className="ep-section-title">
-          <span className="ep-section-icon">🎵</span>
-          BGM 设置
-        </div>
-
-        {bgmSettings.enabled && bgmSettings.music_id ? (
-          <div className="ep-bgm-current">
-            <span className="ep-bgm-current-label">🎵 已选择 BGM</span>
-            <span className="ep-bgm-current-id">{bgmSettings.music_id}</span>
-            {bgmSettings.volume !== undefined && (
-              <span className="ep-bgm-current-vol">音量 {bgmSettings.volume}%</span>
-            )}
-          </div>
-        ) : (
-          <div className="ep-bgm-empty">未选择背景音乐</div>
-        )}
-
-        {onOpenBgmDrawer && (
-          <button className="ep-advanced-btn" onClick={onOpenBgmDrawer}>
-            🎵 {bgmSettings.enabled ? "更换 BGM / 调整混音" : "选择 BGM 音乐"}
-          </button>
-        )}
-      </div>
+      <BgmSettingsSection settings={bgmSettings} onOpenBgmDrawer={onOpenBgmDrawer} />
 
       {/* ═══ 水印设置 ═══ */}
       <div className="ep-settings-section">
@@ -374,258 +142,30 @@ const ClipPropertiesPanel: React.FC<ClipPropertiesPanelProps> = ({
 
       {/* ═══ 片段详情（选中时显示） ═══ */}
       {selectedClip && (
-        <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-type-selector">
-                {(["voice", "pip"] as ClipType[]).map((t) => {
-                  const disabled =
-                    currentMode === "pip"
-                      ? t !== "pip"
-                      : currentMode === "voice_over"
-                        ? t !== "voice"
-                        : false // voice_pip 可切换
-                  return (
-                    <button
-                      key={t}
-                      className={`ep-clip-type-btn${selectedClip.type === t ? " active" : ""}${disabled ? " disabled" : ""}`}
-                      disabled={disabled}
-                      onClick={() => !disabled && onClipUpdate(selectedClip.id, { type: t })}
-                    >
-                      {CLIP_TYPE_ICONS[t]} {CLIP_TYPE_LABELS[t]}
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-
-            {/* 时长 */}
-            <div className="ep-clip-detail-field">
-              <div className="ep-clip-detail-label">时长</div>
-              <div className="ep-clip-detail-row">
-                <input
-                  className="ep-duration-input"
-                  type="number"
-                  min={1}
-                  max={120}
-                  value={selectedClip.duration}
-                  onChange={(e) =>
-                    onClipUpdate(selectedClip.id, {
-                      duration: Math.max(1, Math.min(120, Number(e.target.value) || 1)),
-                    })
-                  }
-                />
-                <span className="ep-clip-detail-unit">秒</span>
-              </div>
-            </div>
-
-            {/* 转场效果入口 */}
-            {onOpenTransitionDrawer && (
-              <div className="ep-clip-detail-field">
-                <button
-                  className="ep-advanced-btn ep-advanced-btn--transition"
-                  onClick={() => onOpenTransitionDrawer(selectedClip.id)}
-                >
-                  <span className="ep-advanced-btn-icon">🎬</span>
-                  <span className="ep-advanced-btn-label">转场效果</span>
-                  <span className="ep-advanced-btn-value">
-                    {(() => {
-                      const t = selectedClip.transition
-                      if (!t || t.type === "none") return "无转场"
-                      const opt = TRANSITION_OPTIONS.find((o) => o.value === t.type)
-                      return `${opt?.label ?? t.type} · ${t.duration.toFixed(1)}s`
-                    })()}
-                  </span>
-                  <span className="ep-advanced-btn-arrow">›</span>
-                </button>
-              </div>
-            )}
-
-            {/* 播放速度入口 */}
-            {onOpenSpeedDrawer && (
-              <div className="ep-clip-detail-field">
-                <button
-                  className="ep-advanced-btn ep-advanced-btn--speed"
-                  onClick={() => onOpenSpeedDrawer(selectedClip.id)}
-                >
-                  <span className="ep-advanced-btn-icon">⚡</span>
-                  <span className="ep-advanced-btn-label">播放速度</span>
-                  <span className="ep-advanced-btn-value">
-                    {selectedClip.speed ? `${selectedClip.speed.rate.toFixed(2)}x` : "1.00x"}
-                  </span>
-                  <span className="ep-advanced-btn-arrow">›</span>
-                </button>
-              </div>
-            )}
-
-            {/* TTS 配音入口 */}
-            {onOpenTtsDrawer && (
-              <div className="ep-clip-detail-field">
-                <button
-                  className="ep-advanced-btn ep-advanced-btn--tts"
-                  onClick={() => onOpenTtsDrawer(selectedClip.id)}
-                >
-                  <span className="ep-advanced-btn-icon">🎙️</span>
-                  <span className="ep-advanced-btn-label">TTS 配音</span>
-                  <span className="ep-advanced-btn-value">
-                    {(() => {
-                      const tts = selectedClip.tts_config
-                      if (!tts || tts.mode === "none") return "无配音"
-                      if (tts.mode === "upload") return "上传配音"
-                      return `TTS · ${tts.voice_id ? "已选音色" : "未选音色"}`
-                    })()}
-                  </span>
-                  <span className="ep-advanced-btn-arrow">›</span>
-                </button>
-              </div>
-            )}
-
-            {/* 素材起始时间 — 仅 voice 类型显示 */}
-            {selectedClip.type === "voice" && (
-              <div className="ep-clip-detail-field">
-                <div className="ep-clip-detail-label">素材起始时间</div>
-                <div className="ep-clip-detail-row">
-                  <input
-                    className="ep-duration-input"
-                    type="number"
-                    min={0}
-                    max={9999}
-                    step={0.1}
-                    value={selectedClip.startOffset}
-                    onChange={(e) =>
-                      onClipUpdate(selectedClip.id, {
-                        startOffset: Math.max(0, Math.min(9999, Number(e.target.value) || 0)),
-                      })
-                    }
-                  />
-                  <span className="ep-clip-detail-unit">秒</span>
-                </div>
-              </div>
-            )}
-
-            {/* 配音素材选择 — 仅 voice 类型显示 */}
-            {selectedClip.type === "voice" && (
-              <div className="ep-clip-detail-field">
-                <div className="ep-clip-detail-label">
-                  配音素材
-                  {onRefreshVoiceMaterials && (
-                    <button
-                      type="button"
-                      className="ep-voice-refresh-btn"
-                      title="刷新配音列表"
-                      onClick={() => onRefreshVoiceMaterials()}
-                      disabled={voiceMaterialsLoading}
-                    >
-                      {voiceMaterialsLoading ? "⏳" : "🔄"}
-                    </button>
-                  )}
-                </div>
-
-                {voiceMaterialsLoading && voiceMaterials.length === 0 ? (
-                  <div className="ep-voice-loading">加载中...</div>
-                ) : (
-                  <>
-                    <div className="ep-voice-select-row">
-                      <select
-                        className="ep-clip-detail-select"
-                        value={selectedClip.voice_asset_id ?? ""}
-                        onChange={(e) => {
-                          const assetId = e.target.value
-                          if (!onClipVoiceSelect) return
-                          if (!assetId) {
-                            onClipVoiceSelect(selectedClip.id, null)
-                          } else {
-                            const asset = voiceMaterials.find((m) => m.id === assetId)
-                            if (asset) onClipVoiceSelect(selectedClip.id, asset)
-                          }
-                          // 切换选择时停止试听
-                          audioRef.current?.pause()
-                          setPreviewingId(null)
-                        }}
-                      >
-                        <option value="">未选择</option>
-                        {voiceMaterials.map((m) => {
-                          const gender = getGenderLabel(m)
-                          const label = gender ? `${m.name}（${gender}）` : m.name
-                          return (
-                            <option key={m.id} value={m.id}>
-                              {label}
-                            </option>
-                          )
-                        })}
-                      </select>
-                      {/* 试听按钮 */}
-                      {selectedClip.voice_asset_id && (
-                        <button
-                          type="button"
-                          className="ep-voice-preview-btn"
-                          title={previewingId === selectedClip.voice_asset_id ? "暂停" : "试听"}
-                          onClick={() => {
-                            const asset = voiceMaterials.find(
-                              (m) => m.id === selectedClip.voice_asset_id,
-                            )
-                            if (asset) handlePreviewVoice(asset)
-                          }}
-                        >
-                          {previewingId === selectedClip.voice_asset_id ? "⏸" : "▶️"}
-                        </button>
-                      )}
-                    </div>
-                    {voiceMaterials.length === 0 && (
-                      <div className="ep-voice-empty">暂无配音素材，请先上传</div>
-                    )}
-                  </>
-                )}
-
-                <button
-                  className="ep-voice-upload-btn"
-                  onClick={() => navigate("/app/voice-materials")}
-                >
-                  + 上传新配音
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
+        <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 && (
-        <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">
-                {currentMode === "pip"
-                  ? "混剪"
-                  : currentMode === "voice_over"
-                    ? "人物口播"
-                    : currentMode === "one_take"
-                      ? "一镜到底"
-                      : "口播+混剪"}
-              </div>
-            </div>
-          </div>
-        </div>
+        <StatsSection
+          clipsCount={clipsCount}
+          totalDuration={totalDuration}
+          currentMode={currentMode}
+        />
       )}
     </div>
   )

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

@@ -4,8 +4,11 @@
  */
 import React, { useCallback } from "react"
 import { Drawer, Switch } from "antd"
-import type { FilterConfig, FilterPreset } from "../types"
-import { DEFAULT_FILTER_CONFIG, FILTER_PRESET_LABELS } from "../types"
+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
@@ -14,34 +17,6 @@ interface FilterPanelProps {
   onChange: (config: FilterConfig) => void
 }
 
-/** 所有预设列表 */
-const PRESET_LIST: FilterPreset[] = [
-  "none",
-  "original",
-  "fresh",
-  "warm",
-  "cool",
-  "vintage",
-  "cinema",
-  "bw",
-  "sunshine",
-  "film",
-]
-
-/** 预设对应的示例渐变色（用于视觉预览） */
-const PRESET_GRADIENTS: Record<FilterPreset, string> = {
-  none: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-  original: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-  fresh: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
-  warm: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
-  cool: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
-  vintage: "linear-gradient(135deg, #c79081 0%, #dfa579 100%)",
-  cinema: "linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%)",
-  bw: "linear-gradient(135deg, #434343 0%, #000000 100%)",
-  sunshine: "linear-gradient(135deg, #f6d365 0%, #fda085 100%)",
-  film: "linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%)",
-}
-
 const FilterPanel: React.FC<FilterPanelProps> = ({ open, onClose, config, onChange }) => {
   const update = useCallback(
     (partial: Partial<FilterConfig>) => {
@@ -54,7 +29,6 @@ const FilterPanel: React.FC<FilterPanelProps> = ({ open, onClose, config, onChan
     onChange({ ...DEFAULT_FILTER_CONFIG, enabled: config.enabled })
   }, [config.enabled, onChange])
 
-  /** 选择预设时重置手动参数 */
   const handlePresetSelect = useCallback(
     (preset: FilterPreset) => {
       if (preset === "none") {
@@ -70,6 +44,13 @@ const FilterPanel: React.FC<FilterPanelProps> = ({ open, onClose, config, onChan
     [config.enabled, onChange],
   )
 
+  const handleManualChange = useCallback(
+    (key: keyof FilterConfig, value: number) => {
+      onChange({ ...config, [key]: value })
+    },
+    [config, onChange],
+  )
+
   return (
     <Drawer
       title="滤镜调色"
@@ -90,110 +71,10 @@ const FilterPanel: React.FC<FilterPanelProps> = ({ open, onClose, config, onChan
       </div>
 
       {/* 预设滤镜选择 */}
-      <div className="filter-section">
-        <div className="filter-section-title">预设滤镜</div>
-        <div className="filter-presets">
-          {PRESET_LIST.map((p) => (
-            <button
-              key={p}
-              className={`filter-preset-item${config.preset === p ? " active" : ""}`}
-              onClick={() => handlePresetSelect(p)}
-            >
-              <div className="filter-preset-preview" style={{ background: PRESET_GRADIENTS[p] }} />
-              <span className="filter-preset-label">{FILTER_PRESET_LABELS[p]}</span>
-            </button>
-          ))}
-        </div>
-      </div>
+      <FilterPresetGrid selectedPreset={config.preset} onPresetSelect={handlePresetSelect} />
 
       {/* 手动调节 */}
-      <div className="filter-section">
-        <div className="filter-section-title">手动调节</div>
-
-        {/* 亮度 */}
-        <div className="filter-slider-row">
-          <span className="filter-slider-label">亮度</span>
-          <input
-            type="range"
-            className="filter-slider"
-            min={-100}
-            max={100}
-            value={config.brightness}
-            onChange={(e) => update({ brightness: Number(e.target.value) })}
-          />
-          <span className="filter-slider-value">{config.brightness}</span>
-        </div>
-
-        {/* 对比度 */}
-        <div className="filter-slider-row">
-          <span className="filter-slider-label">对比度</span>
-          <input
-            type="range"
-            className="filter-slider"
-            min={-100}
-            max={100}
-            value={config.contrast}
-            onChange={(e) => update({ contrast: Number(e.target.value) })}
-          />
-          <span className="filter-slider-value">{config.contrast}</span>
-        </div>
-
-        {/* 饱和度 */}
-        <div className="filter-slider-row">
-          <span className="filter-slider-label">饱和度</span>
-          <input
-            type="range"
-            className="filter-slider"
-            min={-100}
-            max={100}
-            value={config.saturation}
-            onChange={(e) => update({ saturation: Number(e.target.value) })}
-          />
-          <span className="filter-slider-value">{config.saturation}</span>
-        </div>
-
-        {/* 色温 */}
-        <div className="filter-slider-row">
-          <span className="filter-slider-label">色温</span>
-          <input
-            type="range"
-            className="filter-slider"
-            min={-100}
-            max={100}
-            value={config.temperature}
-            onChange={(e) => update({ temperature: Number(e.target.value) })}
-          />
-          <span className="filter-slider-value">{config.temperature}</span>
-        </div>
-
-        {/* 色调 */}
-        <div className="filter-slider-row">
-          <span className="filter-slider-label">色调</span>
-          <input
-            type="range"
-            className="filter-slider"
-            min={-100}
-            max={100}
-            value={config.tint}
-            onChange={(e) => update({ tint: Number(e.target.value) })}
-          />
-          <span className="filter-slider-value">{config.tint}</span>
-        </div>
-
-        {/* 锐度 */}
-        <div className="filter-slider-row">
-          <span className="filter-slider-label">锐度</span>
-          <input
-            type="range"
-            className="filter-slider"
-            min={0}
-            max={100}
-            value={config.sharpness}
-            onChange={(e) => update({ sharpness: Number(e.target.value) })}
-          />
-          <span className="filter-slider-value">{config.sharpness}</span>
-        </div>
-      </div>
+      <FilterManualAdjust config={config} onChange={handleManualChange} />
 
       {/* 预览色块 */}
       <div className="filter-section">

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

@@ -5,19 +5,14 @@
  */
 import React, { useCallback } from "react"
 import { Drawer } from "antd"
-import type { IntroOutroConfig, IntroOutroItem, IntroOutroKind, TransitionType } from "../types"
-import { DEFAULT_INTRO_OUTRO } from "../types"
-import { TRANSITION_OPTIONS } from "@/api/template-editor"
+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"
 
-/* ──────────── 常量 ──────────── */
-
-const KIND_OPTIONS: { value: IntroOutroKind; label: string; icon: string }[] = [
-  { value: "none", label: "无", icon: "🚫" },
-  { value: "video", label: "视频", icon: "🎬" },
-  { value: "image", label: "图片", icon: "🖼️" },
-]
-
-/* ──────────── Props ──────────── */
 interface IntroOutroPanelProps {
   open: boolean
   onClose: () => void
@@ -73,210 +68,24 @@ const IntroOutroPanel: React.FC<IntroOutroPanelProps> = ({ open, onClose, config
       className="intro-outro-panel-drawer"
     >
       {/* ═══ 片头区块 ═══ */}
-      <div className="iop-block">
-        <div className="iop-block-header">
-          <span className="iop-block-icon">🎞️</span>
-          <span className="iop-block-title">片头</span>
-        </div>
-
-        {/* 类型选择 */}
-        <div className="iop-kind-row">
-          {KIND_OPTIONS.map((opt) => (
-            <button
-              key={opt.value}
-              className={`iop-kind-btn${config.intro.kind === opt.value ? " active" : ""}`}
-              onClick={() => handleIntroKindChange(opt.value)}
-            >
-              <span className="iop-kind-icon">{opt.icon}</span>
-              <span className="iop-kind-label">{opt.label}</span>
-            </button>
-          ))}
-        </div>
-
-        {/* 视频/图片配置 */}
-        {config.intro.kind !== "none" && (
-          <>
-            <div className="iop-field">
-              <label className="iop-field-label">
-                {config.intro.kind === "video" ? "视频" : "图片"} URL
-              </label>
-              <input
-                className="iop-input"
-                type="text"
-                placeholder={
-                  config.intro.kind === "video"
-                    ? "https://example.com/intro.mp4"
-                    : "https://example.com/intro.png"
-                }
-                value={config.intro.url ?? ""}
-                onChange={(e) => handleIntroChange({ url: e.target.value })}
-              />
-            </div>
-
-            <div className="iop-field">
-              <label className="iop-field-label">显示时长</label>
-              <div className="iop-slider-row">
-                <input
-                  className="iop-slider"
-                  type="range"
-                  min={1}
-                  max={15}
-                  step={0.5}
-                  value={config.intro.duration}
-                  onChange={(e) => handleIntroChange({ duration: Number(e.target.value) })}
-                />
-                <span className="iop-slider-value">{config.intro.duration}s</span>
-              </div>
-            </div>
-
-            <div className="iop-field">
-              <label className="iop-field-label">进入过渡动画</label>
-              <select
-                className="iop-select"
-                value={config.intro.transition ?? "none"}
-                onChange={(e) =>
-                  handleIntroChange({
-                    transition: e.target.value as TransitionType,
-                  })
-                }
-              >
-                {TRANSITION_OPTIONS.map((opt) => (
-                  <option key={opt.value} value={opt.value}>
-                    {opt.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            {config.intro.transition && config.intro.transition !== "none" && (
-              <div className="iop-field">
-                <label className="iop-field-label">过渡时长</label>
-                <div className="iop-slider-row">
-                  <input
-                    className="iop-slider"
-                    type="range"
-                    min={0.3}
-                    max={2.0}
-                    step={0.1}
-                    value={config.intro.transition_duration ?? 0.5}
-                    onChange={(e) =>
-                      handleIntroChange({
-                        transition_duration: Number(e.target.value),
-                      })
-                    }
-                  />
-                  <span className="iop-slider-value">
-                    {(config.intro.transition_duration ?? 0.5).toFixed(1)}s
-                  </span>
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      </div>
+      <IntroOutroBlock
+        title="片头"
+        icon="🎞️"
+        item={config.intro}
+        transitionLabel="进入过渡动画"
+        onKindChange={handleIntroKindChange}
+        onChange={handleIntroChange}
+      />
 
       {/* ═══ 片尾区块 ═══ */}
-      <div className="iop-block">
-        <div className="iop-block-header">
-          <span className="iop-block-icon">🏁</span>
-          <span className="iop-block-title">片尾</span>
-        </div>
-
-        {/* 类型选择 */}
-        <div className="iop-kind-row">
-          {KIND_OPTIONS.map((opt) => (
-            <button
-              key={opt.value}
-              className={`iop-kind-btn${config.outro.kind === opt.value ? " active" : ""}`}
-              onClick={() => handleOutroKindChange(opt.value)}
-            >
-              <span className="iop-kind-icon">{opt.icon}</span>
-              <span className="iop-kind-label">{opt.label}</span>
-            </button>
-          ))}
-        </div>
-
-        {/* 视频/图片配置 */}
-        {config.outro.kind !== "none" && (
-          <>
-            <div className="iop-field">
-              <label className="iop-field-label">
-                {config.outro.kind === "video" ? "视频" : "图片"} URL
-              </label>
-              <input
-                className="iop-input"
-                type="text"
-                placeholder={
-                  config.outro.kind === "video"
-                    ? "https://example.com/outro.mp4"
-                    : "https://example.com/outro.png"
-                }
-                value={config.outro.url ?? ""}
-                onChange={(e) => handleOutroChange({ url: e.target.value })}
-              />
-            </div>
-
-            <div className="iop-field">
-              <label className="iop-field-label">显示时长</label>
-              <div className="iop-slider-row">
-                <input
-                  className="iop-slider"
-                  type="range"
-                  min={1}
-                  max={15}
-                  step={0.5}
-                  value={config.outro.duration}
-                  onChange={(e) => handleOutroChange({ duration: Number(e.target.value) })}
-                />
-                <span className="iop-slider-value">{config.outro.duration}s</span>
-              </div>
-            </div>
-
-            <div className="iop-field">
-              <label className="iop-field-label">退出过渡动画</label>
-              <select
-                className="iop-select"
-                value={config.outro.transition ?? "none"}
-                onChange={(e) =>
-                  handleOutroChange({
-                    transition: e.target.value as TransitionType,
-                  })
-                }
-              >
-                {TRANSITION_OPTIONS.map((opt) => (
-                  <option key={opt.value} value={opt.value}>
-                    {opt.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            {config.outro.transition && config.outro.transition !== "none" && (
-              <div className="iop-field">
-                <label className="iop-field-label">过渡时长</label>
-                <div className="iop-slider-row">
-                  <input
-                    className="iop-slider"
-                    type="range"
-                    min={0.3}
-                    max={2.0}
-                    step={0.1}
-                    value={config.outro.transition_duration ?? 0.5}
-                    onChange={(e) =>
-                      handleOutroChange({
-                        transition_duration: Number(e.target.value),
-                      })
-                    }
-                  />
-                  <span className="iop-slider-value">
-                    {(config.outro.transition_duration ?? 0.5).toFixed(1)}s
-                  </span>
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      </div>
+      <IntroOutroBlock
+        title="片尾"
+        icon="🏁"
+        item={config.outro}
+        transitionLabel="退出过渡动画"
+        onKindChange={handleOutroKindChange}
+        onChange={handleOutroChange}
+      />
 
       {/* ── 底部操作 ── */}
       <div className="iop-footer">

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

@@ -2,65 +2,12 @@
  * 混剪配置面板 — Drawer 形式
  * 左侧图层列表 + 右侧单图层配置 + 迷你预览区
  */
-import React, { useCallback, useMemo } from "react"
+import React from "react"
 import { Drawer, Switch } from "antd"
-import type { PipConfig, PipLayer, PipGridPosition, PipAnimType, PipSlideDirection } from "../types"
-import { DEFAULT_PIP_LAYER, DEFAULT_PIP_CONFIG } from "../types"
-
-/* ──────────── 常量 ──────────── */
-
-/** 九宫格位置 → 百分比坐标映射 */
-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 },
-}
-
-/** 九宫格位置选项 */
-const GRID_POSITIONS: PipGridPosition[] = [
-  "top_left",
-  "top_center",
-  "top_right",
-  "center_left",
-  "center",
-  "center_right",
-  "bottom_left",
-  "bottom_center",
-  "bottom_right",
-]
-
-/** 入场动画选项 */
-const ANIM_OPTIONS: { value: PipAnimType; label: string }[] = [
-  { value: "none", label: "无" },
-  { value: "fade_in", label: "淡入" },
-  { value: "slide_in", label: "滑入" },
-]
-
-/** 滑入方向选项 */
-const SLIDE_DIR_OPTIONS: { value: PipSlideDirection; label: string }[] = [
-  { value: "left", label: "← 左" },
-  { value: "right", label: "→ 右" },
-  { value: "up", label: "↑ 上" },
-  { value: "down", label: "↓ 下" },
-]
-
-/** 预览图层颜色池 */
-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)",
-]
-
-/* ──────────── Props ──────────── */
+import type { PipConfig } from "@/pages/editing-planner/types"
+import LayerList from "./pip-config/LayerList"
+import LayerConfig from "./pip-config/LayerConfig"
+import { usePipLayers } from "@/pages/editing-planner/hooks/usePipLayers"
 
 interface PipConfigPanelProps {
   open: boolean
@@ -70,13 +17,6 @@ interface PipConfigPanelProps {
   totalDuration: number
 }
 
-/* ──────────── 辅助函数 ──────────── */
-
-let layerIdCounter = 0
-const genLayerId = () => `pip_layer_${Date.now()}_${++layerIdCounter}`
-
-/* ──────────── 组件 ──────────── */
-
 const PipConfigPanel: React.FC<PipConfigPanelProps> = ({
   open,
   onClose,
@@ -84,106 +24,19 @@ const PipConfigPanel: React.FC<PipConfigPanelProps> = ({
   onChange,
   totalDuration,
 }) => {
-  /** 当前选中图层 ID */
-  const [selectedId, setSelectedId] = React.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) {
-        // 保持宽高比 1:1（百分比相同）
-        partial.height = val
-      }
-      updateLayer(selectedLayer.id, partial)
-    },
-    [selectedLayer, updateLayer],
-  )
-
-  const handleHeightChange = useCallback(
-    (val: number) => {
-      if (!selectedLayer) return
-      const partial: Partial<PipLayer> = { height: val }
-      if (selectedLayer.aspect_lock) {
-        partial.width = val
-      }
-      updateLayer(selectedLayer.id, partial)
-    },
-    [selectedLayer, updateLayer],
-  )
+  const {
+    selectedId,
+    setSelectedId,
+    selectedLayer,
+    handleAddLayer,
+    handleDeleteLayer,
+    updateLayer,
+    handleEnableToggle,
+    handleReset,
+    handleGridClick,
+    handleWidthChange,
+    handleHeightChange,
+  } = usePipLayers({ config, onChange })
 
   return (
     <Drawer
@@ -197,9 +50,7 @@ const PipConfigPanel: React.FC<PipConfigPanelProps> = ({
       {/* ═══ 顶部工具栏 ═══ */}
       <div className="pip-toolbar">
         <div className="pip-toolbar-left">
-          <button className="pip-add-btn" onClick={handleAddLayer}>
-            + 添加图层
-          </button>
+          <span style={{ fontSize: 13, color: "#666" }}>共 {config.layers.length} 个图层</span>
         </div>
         <div className="pip-enable-switch">
           <span>启用</span>
@@ -209,329 +60,22 @@ const PipConfigPanel: React.FC<PipConfigPanelProps> = ({
 
       {/* ═══ 主体：图层列表 + 配置区 ═══ */}
       <div className="pip-body">
-        {/* 左侧图层列表 */}
-        <div className="pip-layer-list">
-          {config.layers.length === 0 ? (
-            <div className="pip-layer-empty">暂无图层，点击上方添加</div>
-          ) : (
-            config.layers.map((layer, idx) => (
-              <div
-                key={layer.id}
-                className={`pip-layer-item${selectedId === layer.id ? " active" : ""}`}
-                onClick={() => setSelectedId(layer.id)}
-              >
-                {layer.thumbnail_url || layer.material_url ? (
-                  <img
-                    className="pip-layer-thumb"
-                    src={layer.thumbnail_url || layer.material_url}
-                    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()
-                    handleDeleteLayer(layer.id)
-                  }}
-                  title="删除图层"
-                >
-                  ✕
-                </button>
-              </div>
-            ))
-          )}
-        </div>
-
-        {/* 右侧配置区 */}
-        <div className="pip-config-area">
-          {!selectedLayer ? (
-            <div className="pip-config-empty">选择或添加图层以配置</div>
-          ) : (
-            <>
-              {/* ── 迷你预览 ── */}
-              <div className="pip-preview-box">
-                {config.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}%`,
-                    }}
-                  >
-                    <span className="pip-preview-label">{layer.name}</span>
-                  </div>
-                ))}
-              </div>
-
-              {/* ── 素材类型 ── */}
-              <div className="pip-field">
-                <label className="pip-field-label">素材类型</label>
-                <div className="pip-type-btns">
-                  <button
-                    className={`pip-type-btn${selectedLayer.material_type === "image" ? " active" : ""}`}
-                    onClick={() => updateLayer(selectedLayer.id, { material_type: "image" })}
-                  >
-                    🖼️ 图片
-                  </button>
-                  <button
-                    className={`pip-type-btn${selectedLayer.material_type === "video" ? " active" : ""}`}
-                    onClick={() => updateLayer(selectedLayer.id, { material_type: "video" })}
-                  >
-                    🎬 视频
-                  </button>
-                </div>
-              </div>
-
-              {/* ── 素材 URL ── */}
-              <div className="pip-field">
-                <label className="pip-field-label">
-                  {selectedLayer.material_type === "image" ? "图片" : "视频"} URL
-                </label>
-                <input
-                  className="pip-input"
-                  type="text"
-                  placeholder={
-                    selectedLayer.material_type === "image"
-                      ? "https://example.com/image.png"
-                      : "https://example.com/video.mp4"
-                  }
-                  value={selectedLayer.material_url}
-                  onChange={(e) =>
-                    updateLayer(selectedLayer.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${selectedLayer.grid_position === pos ? " active" : ""}`}
-                        onClick={() => handleGridClick(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={selectedLayer.x}
-                        onChange={(e) =>
-                          updateLayer(selectedLayer.id, {
-                            x: Number(e.target.value),
-                          })
-                        }
-                      />
-                    </div>
-                    <div>
-                      <label className="pip-field-label">Y (%)</label>
-                      <input
-                        className="pip-number"
-                        type="number"
-                        min={0}
-                        max={100}
-                        value={selectedLayer.y}
-                        onChange={(e) =>
-                          updateLayer(selectedLayer.id, {
-                            y: Number(e.target.value),
-                          })
-                        }
-                      />
-                    </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={selectedLayer.width}
-                    onChange={(e) => handleWidthChange(Number(e.target.value))}
-                  />
-                  <span className="pip-slider-value">{selectedLayer.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={selectedLayer.height}
-                    onChange={(e) => handleHeightChange(Number(e.target.value))}
-                  />
-                  <span className="pip-slider-value">{selectedLayer.height}%</span>
-                </div>
-                <div
-                  className="pip-lock-row"
-                  style={{ marginTop: 6 }}
-                  onClick={() =>
-                    updateLayer(selectedLayer.id, {
-                      aspect_lock: !selectedLayer.aspect_lock,
-                    })
-                  }
-                >
-                  <span className="pip-lock-icon">{selectedLayer.aspect_lock ? "🔒" : "🔓"}</span>
-                  <span>{selectedLayer.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={selectedLayer.border_radius}
-                    onChange={(e) =>
-                      updateLayer(selectedLayer.id, {
-                        border_radius: Number(e.target.value),
-                      })
-                    }
-                  />
-                  <span className="pip-slider-value">{selectedLayer.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={selectedLayer.opacity}
-                    onChange={(e) =>
-                      updateLayer(selectedLayer.id, {
-                        opacity: Number(e.target.value),
-                      })
-                    }
-                  />
-                  <span className="pip-slider-value">{selectedLayer.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={selectedLayer.start_time}
-                      onChange={(e) =>
-                        updateLayer(selectedLayer.id, {
-                          start_time: Number(e.target.value),
-                        })
-                      }
-                    />
-                  </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={selectedLayer.duration}
-                      onChange={(e) =>
-                        updateLayer(selectedLayer.id, {
-                          duration: Number(e.target.value),
-                        })
-                      }
-                    />
-                  </div>
-                </div>
-              </div>
-
-              {/* ── 入场动画 ── */}
-              <div className="pip-field">
-                <label className="pip-field-label">入场动画</label>
-                <select
-                  className="pip-select"
-                  value={selectedLayer.animation}
-                  onChange={(e) =>
-                    updateLayer(selectedLayer.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 时显示） */}
-              {selectedLayer.animation === "slide_in" && (
-                <div className="pip-field">
-                  <label className="pip-field-label">滑入方向</label>
-                  <select
-                    className="pip-select"
-                    value={selectedLayer.slide_direction}
-                    onChange={(e) =>
-                      updateLayer(selectedLayer.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>
+        <LayerList
+          layers={config.layers}
+          selectedId={selectedId}
+          onSelect={setSelectedId}
+          onAdd={handleAddLayer}
+          onDelete={handleDeleteLayer}
+        />
+        <LayerConfig
+          layer={selectedLayer}
+          layers={config.layers}
+          totalDuration={totalDuration}
+          onUpdate={updateLayer}
+          onGridClick={handleGridClick}
+          onWidthChange={handleWidthChange}
+          onHeightChange={handleHeightChange}
+        />
       </div>
 
       {/* ── 底部操作 ── */}

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

@@ -2,10 +2,13 @@
  * 贴纸配置面板
  * 贴纸素材库（emoji / 图片）+ 文字花字 + 位置大小调整
  */
-import React, { useCallback, useState } from "react"
+import React from "react"
 import { Drawer, Switch } from "antd"
-import type { StickerConfig, StickerItem, StickerType, TextStickerPreset } from "../types"
-import { DEFAULT_STICKER_CONFIG, DEFAULT_STICKER_ITEM, TEXT_STICKER_PRESET_LABELS } from "../types"
+import type { StickerConfig } from "@/pages/editing-planner/types"
+import StickerLibrary from "./sticker/StickerLibrary"
+import StickerList from "./sticker/StickerList"
+import StickerPropsEditor from "./sticker/StickerPropsEditor"
+import { useStickerItems } from "@/pages/editing-planner/hooks/useStickerItems"
 
 interface StickerPanelProps {
   open: boolean
@@ -15,59 +18,6 @@ interface StickerPanelProps {
   totalDuration: number
 }
 
-/** 常用 emoji 素材 */
-const EMOJI_LIST = [
-  "😀",
-  "😂",
-  "🥰",
-  "😎",
-  "🤩",
-  "😱",
-  "🤔",
-  "😴",
-  "🥳",
-  "😍",
-  "❤️",
-  "🔥",
-  "⭐",
-  "✨",
-  "💯",
-  "👍",
-  "👏",
-  "🎉",
-  "🎵",
-  "💪",
-  "📌",
-  "💡",
-  "🎯",
-  "✅",
-  "❌",
-  "⬆️",
-  "⬇️",
-  "➡️",
-  "⭕",
-  "🔔",
-]
-
-/** 文字花字预设对应的 CSS 样式预览 */
-const TEXT_PRESET_STYLES: Record<TextStickerPreset, React.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" },
-}
-
-/** 生成唯一 ID */
-const genId = () => `sticker_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`
-
 const StickerPanel: React.FC<StickerPanelProps> = ({
   open,
   onClose,
@@ -75,63 +25,17 @@ const StickerPanel: React.FC<StickerPanelProps> = ({
   onChange,
   totalDuration,
 }) => {
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const [activeTab, setActiveTab] = useState<StickerType>("emoji")
-
-  const selectedSticker = config.items.find((s) => s.id === selectedId) ?? null
-
-  /** 更新单个贴纸 */
-  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: genId(),
-        type,
-        content,
-        duration: totalDuration > 0 ? totalDuration : 5,
-        z_index: config.items.length + 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])
-
-  /** 文字花字输入 */
-  const [textInput, setTextInput] = useState("")
+  const {
+    selectedId,
+    setSelectedId,
+    activeTab,
+    setActiveTab,
+    selectedSticker,
+    updateItem,
+    addSticker,
+    removeSticker,
+    handleReset,
+  } = useStickerItems({ config, onChange, totalDuration })
 
   return (
     <Drawer
@@ -152,355 +56,24 @@ const StickerPanel: React.FC<StickerPanelProps> = ({
         />
       </div>
 
-      {/* 类型 Tab */}
-      <div className="sticker-tabs">
-        {(["emoji", "image", "text"] as StickerType[]).map((t) => (
-          <button
-            key={t}
-            className={`sticker-tab${activeTab === t ? " active" : ""}`}
-            onClick={() => setActiveTab(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={() => addSticker("emoji", emoji)}
-              >
-                {emoji}
-              </button>
-            ))}
-          </div>
-        )}
-
-        {/* 图片贴纸 */}
-        {activeTab === "image" && (
-          <div className="sticker-image-input">
-            <input
-              type="text"
-              className="sticker-url-input"
-              placeholder="输入图片 URL 添加贴纸..."
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && e.currentTarget.value.trim()) {
-                  addSticker("image", e.currentTarget.value.trim())
-                  e.currentTarget.value = ""
-                }
-              }}
-            />
-            <button
-              className="sticker-url-add-btn"
-              onClick={() => {
-                const input = document.querySelector<HTMLInputElement>(".sticker-url-input")
-                if (input?.value.trim()) {
-                  addSticker("image", input.value.trim())
-                  input.value = ""
-                }
-              }}
-            >
-              添加
-            </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) => setTextInput(e.target.value)}
-              />
-              <button
-                className="sticker-text-add-btn"
-                disabled={!textInput.trim()}
-                onClick={() => {
-                  if (textInput.trim()) {
-                    addSticker("text", textInput.trim())
-                    setTextInput("")
-                  }
-                }}
-              >
-                添加
-              </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={{
-                      ...TEXT_PRESET_STYLES[p],
-                      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>
+      {/* 素材库 + 类型Tab */}
+      <StickerLibrary activeTab={activeTab} onTabChange={setActiveTab} onAddSticker={addSticker} />
 
       {/* 已添加贴纸列表 */}
-      {config.items.length > 0 && (
-        <div className="sticker-list-section">
-          <div className="sticker-section-title">已添加贴纸 ({config.items.length})</div>
-          <div className="sticker-list">
-            {config.items.map((item) => (
-              <div
-                key={item.id}
-                className={`sticker-list-item${selectedId === item.id ? " active" : ""}`}
-                onClick={() => setSelectedId(item.id)}
-              >
-                <span className="sticker-list-icon">
-                  {item.type === "emoji" ? item.content : item.type === "text" ? "T" : "🖼"}
-                </span>
-                <span className="sticker-list-name">
-                  {item.type === "text"
-                    ? item.content.slice(0, 10)
-                    : item.type === "emoji"
-                      ? "表情贴纸"
-                      : "图片贴纸"}
-                </span>
-                <button
-                  className="sticker-list-delete"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    removeSticker(item.id)
-                  }}
-                >
-                  ✕
-                </button>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
+      <StickerList
+        items={config.items}
+        selectedId={selectedId}
+        onSelect={setSelectedId}
+        onDelete={removeSticker}
+      />
 
       {/* 选中贴纸的属性编辑 */}
       {selectedSticker && (
-        <div className="sticker-props-section">
-          <div className="sticker-section-title">属性调整</div>
-
-          {/* 位置 */}
-          <div className="sticker-prop-row">
-            <span className="sticker-prop-label">位置 X</span>
-            <input
-              type="range"
-              className="sticker-prop-slider"
-              min={0}
-              max={100}
-              value={selectedSticker.x}
-              onChange={(e) => updateItem(selectedSticker.id, { x: Number(e.target.value) })}
-            />
-            <span className="sticker-prop-value">{selectedSticker.x}%</span>
-          </div>
-          <div className="sticker-prop-row">
-            <span className="sticker-prop-label">位置 Y</span>
-            <input
-              type="range"
-              className="sticker-prop-slider"
-              min={0}
-              max={100}
-              value={selectedSticker.y}
-              onChange={(e) => updateItem(selectedSticker.id, { y: Number(e.target.value) })}
-            />
-            <span className="sticker-prop-value">{selectedSticker.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={selectedSticker.width}
-              onChange={(e) =>
-                updateItem(selectedSticker.id, {
-                  width: Number(e.target.value),
-                  height: Number(e.target.value),
-                })
-              }
-            />
-            <span className="sticker-prop-value">{selectedSticker.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={selectedSticker.rotation}
-              onChange={(e) =>
-                updateItem(selectedSticker.id, {
-                  rotation: Number(e.target.value),
-                })
-              }
-            />
-            <span className="sticker-prop-value">{selectedSticker.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={selectedSticker.opacity}
-              onChange={(e) =>
-                updateItem(selectedSticker.id, {
-                  opacity: Number(e.target.value),
-                })
-              }
-            />
-            <span className="sticker-prop-value">{selectedSticker.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={selectedSticker.start_time}
-              onChange={(e) =>
-                updateItem(selectedSticker.id, {
-                  start_time: Number(e.target.value),
-                })
-              }
-            />
-            <span className="sticker-prop-label">时长</span>
-            <input
-              type="number"
-              className="sticker-prop-number"
-              min={0}
-              max={totalDuration}
-              step={0.1}
-              value={selectedSticker.duration}
-              onChange={(e) =>
-                updateItem(selectedSticker.id, {
-                  duration: Number(e.target.value),
-                })
-              }
-            />
-          </div>
-
-          {/* 文字贴纸特有属性 */}
-          {selectedSticker.type === "text" && (
-            <>
-              <div className="sticker-prop-row">
-                <span className="sticker-prop-label">花字</span>
-                <select
-                  className="sticker-prop-select"
-                  value={selectedSticker.text_preset}
-                  onChange={(e) =>
-                    updateItem(selectedSticker.id, {
-                      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={selectedSticker.font_size}
-                  onChange={(e) =>
-                    updateItem(selectedSticker.id, {
-                      font_size: Number(e.target.value),
-                    })
-                  }
-                />
-                <span className="sticker-prop-value">{selectedSticker.font_size}px</span>
-              </div>
-              <div className="sticker-prop-row">
-                <span className="sticker-prop-label">颜色</span>
-                <input
-                  type="color"
-                  className="sticker-prop-color"
-                  value={selectedSticker.text_color}
-                  onChange={(e) =>
-                    updateItem(selectedSticker.id, {
-                      text_color: e.target.value,
-                    })
-                  }
-                />
-              </div>
-            </>
-          )}
-
-          {/* 预览 */}
-          <div className="sticker-preview-box">
-            <div
-              className="sticker-preview-item"
-              style={{
-                left: `${selectedSticker.x}%`,
-                top: `${selectedSticker.y}%`,
-                width: `${selectedSticker.width}%`,
-                height: `${selectedSticker.width}%`,
-                transform: `translate(-50%, -50%) rotate(${selectedSticker.rotation}deg)`,
-                opacity: selectedSticker.opacity / 100,
-                fontSize:
-                  selectedSticker.type === "text" ? `${selectedSticker.font_size}px` : undefined,
-                ...TEXT_PRESET_STYLES[selectedSticker.text_preset],
-              }}
-            >
-              {selectedSticker.type === "emoji" && selectedSticker.content}
-              {selectedSticker.type === "text" && selectedSticker.content}
-              {selectedSticker.type === "image" && (
-                <img
-                  src={selectedSticker.content}
-                  alt="sticker"
-                  style={{
-                    width: "100%",
-                    height: "100%",
-                    objectFit: "contain",
-                  }}
-                />
-              )}
-            </div>
-          </div>
-        </div>
+        <StickerPropsEditor
+          sticker={selectedSticker}
+          totalDuration={totalDuration}
+          onUpdate={updateItem}
+        />
       )}
 
       {/* 底部重置 */}

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

@@ -5,31 +5,14 @@
 import React from "react"
 import { Drawer, Slider, ColorPicker, Select } from "antd"
 import type { Color } from "antd/es/color-picker"
-import type { SubtitleStyleConfig } from "../types/subtitle"
-
-/* ──────────── 选项常量 ──────────── */
-
-const POSITION_OPTIONS = [
-  { value: "top", label: "顶部" },
-  { value: "center", label: "居中" },
-  { value: "bottom", label: "底部" },
-]
-
-const FONT_OPTIONS = ["思源黑体", "思源宋体", "苹方", "PingFang", "微软雅黑", "楷体", "华康俪金黑"]
-
-const ANIMATION_OPTIONS = [
-  { value: "none", label: "无" },
-  { value: "fade", label: "淡入淡出" },
-  { value: "slide", label: "滑动" },
-  { value: "typewriter", label: "打字机" },
-]
-
-const ASR_LANGUAGE_OPTIONS = [
-  { value: "zh", label: "中文" },
-  { value: "en", label: "English" },
-]
-
-/* ──────────── Props ──────────── */
+import type { SubtitleStyleConfig } from "@/pages/editing-planner/types/subtitle"
+import {
+  POSITION_OPTIONS,
+  FONT_OPTIONS,
+  ANIMATION_OPTIONS,
+  ASR_LANGUAGE_OPTIONS,
+} from "@/pages/editing-planner/constants/subtitleStyle"
+import SubtitlePreview from "./subtitle-style/SubtitlePreview"
 
 interface SubtitleStylePanelProps {
   open: boolean
@@ -197,23 +180,7 @@ const SubtitleStylePanel: React.FC<SubtitleStylePanelProps> = ({
           </div>
 
           {/* ── 预览 ── */}
-          <div className="sub-field">
-            <label className="sub-label">预览</label>
-            <div className="sub-preview-box">
-              <span
-                className="sub-preview-text"
-                style={{
-                  fontSize: `${Math.min(config.fontSize, 28)}px`,
-                  color: config.fontColor,
-                  fontFamily: config.font,
-                  WebkitTextStroke: config.stroke ? "1px #000" : undefined,
-                  textShadow: config.shadow ? "2px 2px 4px rgba(0,0,0,0.8)" : undefined,
-                }}
-              >
-                这是一段字幕预览
-              </span>
-            </div>
-          </div>
+          <SubtitlePreview config={config} />
         </>
       )}
     </Drawer>

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

@@ -10,7 +10,24 @@
  */
 import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo } from "react"
 import type { ClipData, ClipType, TrimConfig } from "../types"
-import { TRANSITION_OPTIONS } from "@/api/template-editor"
+import {
+  DEFAULT_PIXELS_PER_SECOND,
+  MIN_PIXELS_PER_SECOND,
+  MAX_PIXELS_PER_SECOND,
+  ZOOM_STEP,
+  MIN_TRIM_DURATION,
+  DEFAULT_ADD_DURATION,
+  MIN_ADD_DURATION,
+  MAX_ADD_DURATION,
+  TRACK_GAP,
+  ADD_PICKER_WIDTH,
+} from "../constants/timeline"
+import { formatTime } from "../utils/timeline"
+import { ClipCard } from "./timeline/ClipCard"
+import { TimeRuler } from "./timeline/TimeRuler"
+import { AddClipPicker } from "./timeline/AddClipPicker"
+import { TrimPreview } from "./timeline/TrimPreview"
+import { ContextMenu } from "./timeline/ContextMenu"
 
 interface TimelinePanelProps {
   clips: ClipData[]
@@ -38,18 +55,6 @@ interface TimelinePanelProps {
   totalDuration?: number
 }
 
-/** 片段类型图标 */
-const CLIP_TYPE_ICONS: Record<ClipType, string> = {
-  voice: "🎙️",
-  pip: "🖼️",
-}
-
-/** 片段类型标签 */
-const CLIP_TYPE_LABELS: Record<ClipType, string> = {
-  voice: "口播",
-  pip: "混剪",
-}
-
 /** 裁剪拖拽方向 */
 type TrimDirection = "left" | "right"
 
@@ -135,7 +140,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
 
   /* ── "+" 卡片：类型+时长选择状态 ── */
   const [addType, setAddType] = useState<ClipType>(defaultAddType)
-  const [addDuration, setAddDuration] = useState<number>(5)
+  const [addDuration, setAddDuration] = useState<number>(DEFAULT_ADD_DURATION)
 
   /* ── 模式切换时自动同步默认添加类型 ── */
   useEffect(() => {
@@ -144,21 +149,17 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
     }
   }, [currentMode, addType, availableTypes, defaultAddType])
 
-  /* ── 面板尺寸 ── */
-  const PICKER_W = 240
-  const GAP = 6
-
   /* ── 计算 picker 初始位置 ── */
   const updatePickerPosition = useCallback(() => {
     if (!addCardRef.current) return
     const rect = addCardRef.current.getBoundingClientRect()
     const vw = window.innerWidth
     const roughHeight = 180
-    let top = rect.top - GAP - roughHeight
+    let top = rect.top - TRACK_GAP - roughHeight
     if (top < 8) top = 8
     let right = vw - rect.right
-    if (rect.right - PICKER_W < 8) {
-      right = vw - PICKER_W - 8
+    if (rect.right - ADD_PICKER_WIDTH < 8) {
+      right = vw - ADD_PICKER_WIDTH - 8
     }
     setPickerPos({ top, right })
   }, [])
@@ -181,9 +182,9 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
     const pickerH = pickerEl.offsetHeight
     const vh = window.innerHeight
     const vw = window.innerWidth
-    let top = addRect.top - GAP - pickerH
+    let top = addRect.top - TRACK_GAP - pickerH
     if (top < 8) {
-      top = addRect.bottom + GAP
+      top = addRect.bottom + TRACK_GAP
       if (top + pickerH > vh - 8) {
         top = vh - 8 - pickerH
         if (top < 8) top = 8
@@ -192,7 +193,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
     let right = vw - addRect.right
     const pickerRect = pickerEl.getBoundingClientRect()
     if (pickerRect.left < 8) {
-      right = vw - PICKER_W - 8
+      right = vw - ADD_PICKER_WIDTH - 8
     }
     setPickerPos({ top, right })
   }, [showAddPicker])
@@ -224,7 +225,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
   }, [contextMenu])
 
   /* ── 缩放 & 时长 ── */
-  const pps = pixelsPerSecond ?? 40
+  const pps = pixelsPerSecond ?? DEFAULT_PIXELS_PER_SECOND
   const totalDuration = totalDurationProp ?? clips.reduce((s, c) => s + c.duration, 0)
 
   /* ── 播放头拖拽全局 mousemove/mouseup ── */
@@ -344,11 +345,9 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
   useEffect(() => {
     if (!trimDrag) return
 
-    const PX_PER_SECOND = pixelsPerSecond ?? 40 // 与缩放级别同步
-
     const handleMouseMove = (e: MouseEvent) => {
       const dx = e.clientX - trimDrag.startX
-      const dtSec = dx / PX_PER_SECOND
+      const dtSec = dx / pps
       const clip = clips.find((c) => c.id === trimDrag.clipId)
       if (!clip) return
 
@@ -359,10 +358,13 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
 
       if (trimDrag.direction === "left") {
         // 左手柄：调整入点
-        newStart = Math.max(0, Math.min(origTrim.start_time + dtSec, newEnd - 1))
+        newStart = Math.max(0, Math.min(origTrim.start_time + dtSec, newEnd - MIN_TRIM_DURATION))
       } else {
         // 右手柄：调整出点
-        newEnd = Math.max(origTrim.start_time + 1, Math.min(origTrim.end_time + dtSec, origDur))
+        newEnd = Math.max(
+          origTrim.start_time + MIN_TRIM_DURATION,
+          Math.min(origTrim.end_time + dtSec, origDur),
+        )
       }
 
       const newDuration = Math.round((newEnd - newStart) * 10) / 10
@@ -396,7 +398,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
       document.removeEventListener("mousemove", handleMouseMove)
       document.removeEventListener("mouseup", handleMouseUp)
     }
-  }, [trimDrag, trimPreview, clips, onClipTrim, pixelsPerSecond])
+  }, [trimDrag, trimPreview, clips, onClipTrim, pps])
 
   /* ── 右键菜单 ── */
   const handleContextMenu = useCallback((e: React.MouseEvent, clipId: string) => {
@@ -428,25 +430,6 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
     setContextMenu(null)
   }, [contextMenu, onClipRemove])
 
-  /* ── 时间标尺 ── */
-  const trackWidth = Math.max(totalDuration * pps, 300)
-  const rulerMarks: number[] = []
-  const step = totalDuration <= 30 ? 5 : totalDuration <= 60 ? 10 : 15
-  for (let t = 0; t <= totalDuration + step; t += step) {
-    rulerMarks.push(t)
-  }
-
-  const formatTime = (sec: number) => {
-    const m = Math.floor(sec / 60)
-    const s = Math.floor(sec % 60)
-    return `${m}:${s.toString().padStart(2, "0")}`
-  }
-
-  /** 格式化裁剪时间（精确到0.1秒） */
-  const formatTrimTime = (sec: number) => {
-    return `${sec.toFixed(1)}s`
-  }
-
   return (
     <div className="ep-timeline-area">
       {/* 时间线头部 */}
@@ -460,7 +443,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
           <div className="ep-timeline-zoom">
             <button
               className="ep-zoom-btn"
-              onClick={() => onZoomChange?.(Math.max(10, pps - 10))}
+              onClick={() => onZoomChange?.(Math.max(MIN_PIXELS_PER_SECOND, pps - ZOOM_STEP))}
               title="缩小"
             >
               −
@@ -468,15 +451,15 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
             <input
               type="range"
               className="ep-zoom-slider"
-              min={10}
-              max={120}
+              min={MIN_PIXELS_PER_SECOND}
+              max={MAX_PIXELS_PER_SECOND}
               step={5}
               value={pps}
               onChange={(e) => onZoomChange?.(Number(e.target.value))}
             />
             <button
               className="ep-zoom-btn"
-              onClick={() => onZoomChange?.(Math.min(120, pps + 10))}
+              onClick={() => onZoomChange?.(Math.min(MAX_PIXELS_PER_SECOND, pps + ZOOM_STEP))}
               title="放大"
             >
               +
@@ -506,15 +489,7 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
 
       {/* 时间标尺 */}
       {currentMode !== "one_take" && (
-        <div className="ep-time-ruler" onClick={handleRulerClick}>
-          <div className="ep-time-ruler-inner" style={{ width: trackWidth }}>
-            {rulerMarks.map((t) => (
-              <span key={t} className="ep-time-mark" style={{ left: `${t * pps}px` }}>
-                {t}s
-              </span>
-            ))}
-          </div>
-        </div>
+        <TimeRuler totalDuration={totalDuration} pps={pps} onClick={handleRulerClick} />
       )}
 
       {/* 水平片段轨道 */}
@@ -536,115 +511,30 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
               <div className="ep-track-empty-text">点击右侧 + 添加片段</div>
             </div>
           ) : (
-            clips.map((clip, idx) => {
-              /* 转场指示器 */
-              const trans = clip.transition
-              const showTransition = idx > 0 && trans && trans.type !== "none"
-              const transOpt = showTransition
-                ? TRANSITION_OPTIONS.find((o) => o.value === trans!.type)
-                : undefined
-
-              /* 速度徽章 */
-              const speed = clip.speed
-              const showSpeed = speed && Math.abs(speed.rate - 1.0) > 0.01
-
-              /* 裁剪状态 */
-              const hasTrim = !!clip.trim_config
-              const isHovered = hoveredClipId === clip.id
-
-              return (
-                <React.Fragment key={clip.id}>
-                  {/* 转场指示器 */}
-                  {showTransition && transOpt && (
-                    <div
-                      className="ep-transition-indicator"
-                      title={`${transOpt.label} · ${trans!.duration.toFixed(1)}s`}
-                    >
-                      <span className="ep-trans-icon">{transOpt.icon}</span>
-                      <span className="ep-trans-duration">{trans!.duration.toFixed(1)}s</span>
-                    </div>
-                  )}
-
-                  <div
-                    className={`ep-clip-card ${selectedClipId === clip.id ? "selected" : ""} ${dragIdx === idx ? "dragging" : ""} ${dragOverIdx === idx ? "drag-over" : ""} ${hasTrim ? "trimmed" : ""}`}
-                    style={{ width: Math.max(clip.duration * pps, 60) }}
-                    draggable={!trimDrag}
-                    onDragStart={(e) => handleDragStart(e, idx)}
-                    onDragOver={(e) => handleDragOver(e, idx)}
-                    onDragEnd={handleDragEnd}
-                    onDrop={(e) => handleDrop(e, idx)}
-                    onClick={() => onClipSelect(clip.id)}
-                    onContextMenu={(e) => handleContextMenu(e, clip.id)}
-                    onMouseEnter={() => setHoveredClipId(clip.id)}
-                    onMouseLeave={() => setHoveredClipId(null)}
-                  >
-                    {/* 左裁剪手柄 */}
-                    {isHovered && onClipTrim && (
-                      <div
-                        className="ep-trim-handle ep-trim-handle-left"
-                        onMouseDown={(e) => handleTrimHandleMouseDown(e, clip.id, "left")}
-                        title="拖动调整入点"
-                      >
-                        <div className="ep-trim-handle-line" />
-                      </div>
-                    )}
-
-                    {/* 类型图标 */}
-                    <div className="ep-clip-thumbnail">{CLIP_TYPE_ICONS[clip.type] || "🎬"}</div>
-
-                    {/* 片段信息 */}
-                    <div className="ep-clip-info">
-                      <span className="ep-clip-name">
-                        {CLIP_TYPE_LABELS[clip.type] || "片段"} {idx + 1}
-                      </span>
-                      <span className="ep-clip-duration">
-                        {clip.duration}s
-                        {hasTrim && (
-                          <span className="ep-trim-indicator" title="已裁剪">
-                            ✂
-                          </span>
-                        )}
-                      </span>
-                    </div>
-
-                    {/* 速度徽章 */}
-                    {showSpeed && <span className="ep-speed-badge">{speed!.rate.toFixed(1)}x</span>}
-
-                    {/* 裁剪徽章 */}
-                    {hasTrim && (
-                      <span
-                        className="ep-trim-badge"
-                        title={`入点 ${clip.trim_config!.start_time.toFixed(1)}s / 出点 ${clip.trim_config!.end_time.toFixed(1)}s`}
-                      >
-                        ✂
-                      </span>
-                    )}
-
-                    {/* 右裁剪手柄 */}
-                    {isHovered && onClipTrim && (
-                      <div
-                        className="ep-trim-handle ep-trim-handle-right"
-                        onMouseDown={(e) => handleTrimHandleMouseDown(e, clip.id, "right")}
-                        title="拖动调整出点"
-                      >
-                        <div className="ep-trim-handle-line" />
-                      </div>
-                    )}
-
-                    {/* 删除按钮 */}
-                    <button
-                      className="ep-clip-remove"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        onClipRemove(clip.id)
-                      }}
-                    >
-                      ✕
-                    </button>
-                  </div>
-                </React.Fragment>
-              )
-            })
+            clips.map((clip, idx) => (
+              <ClipCard
+                key={clip.id}
+                clip={clip}
+                idx={idx}
+                isSelected={selectedClipId === clip.id}
+                isDragging={dragIdx === idx}
+                isDragOver={dragOverIdx === idx}
+                isHovered={hoveredClipId === clip.id}
+                pps={pps}
+                trimDragActive={!!trimDrag}
+                showTrimHandles={!!onClipTrim}
+                onDragStart={handleDragStart}
+                onDragOver={handleDragOver}
+                onDragEnd={handleDragEnd}
+                onDrop={handleDrop}
+                onSelect={onClipSelect}
+                onContextMenu={handleContextMenu}
+                onMouseEnter={() => setHoveredClipId(clip.id)}
+                onMouseLeave={() => setHoveredClipId(null)}
+                onTrimHandleMouseDown={handleTrimHandleMouseDown}
+                onRemove={onClipRemove}
+              />
+            ))
           )}
 
           {/* ── 轨道末尾 "+" 添加卡片 ── */}
@@ -663,109 +553,42 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
 
       {/* 裁剪预览 tooltip */}
       {trimPreview && (
-        <div
-          className="ep-trim-preview"
-          style={{
-            position: "fixed",
-            left: trimPreview.x + 12,
-            top: trimPreview.y - 40,
-          }}
-        >
-          <div className="ep-trim-preview-row">
-            <span className="ep-trim-preview-label">入点</span>
-            <span className="ep-trim-preview-value">{formatTrimTime(trimPreview.startTime)}</span>
-          </div>
-          <div className="ep-trim-preview-row">
-            <span className="ep-trim-preview-label">出点</span>
-            <span className="ep-trim-preview-value">{formatTrimTime(trimPreview.endTime)}</span>
-          </div>
-          <div className="ep-trim-preview-row ep-trim-preview-duration">
-            <span className="ep-trim-preview-label">时长</span>
-            <span className="ep-trim-preview-value">{formatTrimTime(trimPreview.duration)}</span>
-          </div>
-        </div>
+        <TrimPreview
+          startTime={trimPreview.startTime}
+          endTime={trimPreview.endTime}
+          duration={trimPreview.duration}
+          x={trimPreview.x}
+          y={trimPreview.y}
+        />
       )}
 
       {/* 右键菜单 */}
       {contextMenu && (
-        <div
-          ref={contextMenuRef}
-          className="ep-context-menu"
-          style={{
-            position: "fixed",
-            left: contextMenu.x,
-            top: contextMenu.y,
-          }}
-        >
-          <div className="ep-context-menu-item" onClick={handleContextSplit}>
-            <span className="ep-context-menu-icon">✂️</span>
-            <span>分割片段</span>
-          </div>
-          {clips.find((c) => c.id === contextMenu.clipId)?.trim_config && (
-            <div className="ep-context-menu-item" onClick={handleContextResetTrim}>
-              <span className="ep-context-menu-icon">↩️</span>
-              <span>恢复原始长度</span>
-            </div>
-          )}
-          <div className="ep-context-menu-divider" />
-          <div
-            className="ep-context-menu-item ep-context-menu-item-danger"
-            onClick={handleContextDelete}
-          >
-            <span className="ep-context-menu-icon">🗑️</span>
-            <span>删除片段</span>
-          </div>
-        </div>
+        <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}
+        />
       )}
 
       {/* 类型+时长选择面板 */}
       {showAddPicker && (
-        <div
-          ref={pickerRef}
-          className="ep-add-clip-picker ep-add-clip-picker--portal"
-          style={{
-            position: "fixed",
-            top: pickerPos.top,
-            right: pickerPos.right,
-          }}
-        >
-          <div className="ep-add-clip-picker-title">添加片段</div>
-
-          {/* 类型选择 */}
-          <div className="ep-add-clip-type-row">
-            <span className="ep-add-clip-type-label">类型:</span>
-            {availableTypes.map((t) => (
-              <button
-                key={t}
-                className={`ep-add-clip-type-btn${addType === t ? " active" : ""}`}
-                onClick={() => setAddType(t)}
-              >
-                {CLIP_TYPE_ICONS[t]} {CLIP_TYPE_LABELS[t]}
-              </button>
-            ))}
-          </div>
-
-          {/* 时长输入 */}
-          <div className="ep-add-clip-duration-row">
-            <span className="ep-add-clip-type-label">时长:</span>
-            <input
-              type="number"
-              className="ep-duration-input"
-              min={1}
-              max={120}
-              value={addDuration}
-              onChange={(e) =>
-                setAddDuration(Math.max(1, Math.min(120, Number(e.target.value) || 1)))
-              }
-            />
-            <span className="ep-add-clip-duration-unit">秒</span>
-          </div>
-
-          {/* 确认按钮 */}
-          <button className="ep-add-clip-confirm-btn" onClick={handleConfirmAdd}>
-            添加
-          </button>
-        </div>
+        <AddClipPicker
+          pickerRef={pickerRef}
+          position={pickerPos}
+          availableTypes={availableTypes}
+          addType={addType}
+          addDuration={addDuration}
+          minDuration={MIN_ADD_DURATION}
+          maxDuration={MAX_ADD_DURATION}
+          onTypeChange={setAddType}
+          onDurationChange={setAddDuration}
+          onConfirm={handleConfirmAdd}
+        />
       )}
     </div>
   )

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

@@ -2,23 +2,14 @@
  * TTS 配音面板 — Drawer 形式
  * 配音模式切换 + 文本输入 + 音色选择 + 语速/语调/音量 + 试听 + 字幕联动
  */
-import React, { useState, useCallback, useEffect, useRef } from "react"
-import { Drawer, Slider, message } from "antd"
-import type { TtsConfig, TtsMode } from "../types"
-import { DEFAULT_TTS_CONFIG } from "../types"
-import { getTtsVoices, previewTts, type TTSVoice } from "@/api/tts"
+import React from "react"
+import { Drawer } from "antd"
+import type { TtsConfig } from "@/pages/editing-planner/types"
+import { TTS_MODE_OPTIONS } from "@/pages/editing-planner/constants/tts"
+import VoiceSelector from "./tts/VoiceSelector"
+import TtsSlider from "./tts/TtsSlider"
+import { useTtsPanel } from "@/pages/editing-planner/hooks/useTtsPanel"
 
-/* ──────────── 音色卡片分类图标 ──────────── */
-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: "情感" },
-}
-
-/* ──────────── Props ──────────── */
 interface TtsPanelProps {
   open: boolean
   onClose: () => void
@@ -28,126 +19,21 @@ interface TtsPanelProps {
 }
 
 const TtsPanel: React.FC<TtsPanelProps> = ({ open, onClose, config, onChange }) => {
-  /* ── 音色列表 ── */
-  const [voices, setVoices] = useState<TTSVoice[]>([])
-  const [voicesLoading, setVoicesLoading] = useState(false)
-
-  /* ── 试听状态 ── */
-  const [previewLoading, setPreviewLoading] = useState(false)
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-
-  /* ── 加载音色列表 ── */
-  useEffect(() => {
-    if (!open) return
-    setVoicesLoading(true)
-    getTtsVoices()
-      .then((v) => setVoices(v))
-      .catch(() => message.error("加载音色列表失败"))
-      .finally(() => setVoicesLoading(false))
-  }, [open])
-
-  /* ── 切换配音模式 ── */
-  const handleModeChange = useCallback(
-    (mode: TtsMode) => {
-      onChange({ ...config, mode })
-    },
-    [config, onChange],
-  )
-
-  /* ── 文本输入 ── */
-  const handleTextChange = useCallback(
-    (e: React.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), // 试听截取前200字
-        voice_id: config.voice_id,
-        speed: config.speed,
-        pitch: config.pitch,
-      })
-      // 停止上一个
-      audioRef.current?.pause()
-      const audio = new Audio(res.audio_url)
-      audioRef.current = audio
-      audio.play().catch(() => message.error("播放失败"))
-      audio.onended = () => {
-        audioRef.current = null
-      }
-      message.success("试听播放中")
-    } catch {
-      message.error("试听生成失败")
-    } finally {
-      setPreviewLoading(false)
-    }
-  }, [config])
-
-  /* ── 重置 ── */
-  const handleReset = useCallback(() => {
-    onChange({ ...DEFAULT_TTS_CONFIG })
-  }, [onChange])
-
-  /* ── 关闭时停止音频 ── */
-  const handleClose = useCallback(() => {
-    audioRef.current?.pause()
-    audioRef.current = null
-    onClose()
-  }, [onClose])
-
-  /* ── 音色分类分组 ── */
-  const voiceCategories = Object.entries(VOICE_CATEGORY_MAP)
+  const {
+    voices,
+    voicesLoading,
+    previewLoading,
+    handleModeChange,
+    handleTextChange,
+    handleVoiceSelect,
+    handleSpeedChange,
+    handlePitchChange,
+    handleVolumeChange,
+    handleSubtitleSyncToggle,
+    handlePreview,
+    handleReset,
+    handleClose,
+  } = useTtsPanel({ open, config, onChange, onClose })
 
   return (
     <Drawer
@@ -162,11 +48,7 @@ const TtsPanel: React.FC<TtsPanelProps> = ({ open, onClose, config, onChange })
       <div className="tts-mode-section">
         <div className="tts-mode-label">配音模式</div>
         <div className="tts-mode-group">
-          {[
-            { mode: "none" as TtsMode, icon: "🔇", label: "无配音" },
-            { mode: "upload" as TtsMode, icon: "📁", label: "上传配音" },
-            { mode: "tts" as TtsMode, icon: "🤖", label: "TTS 合成" },
-          ].map((m) => (
+          {TTS_MODE_OPTIONS.map((m) => (
             <button
               key={m.mode}
               className={`tts-mode-btn${config.mode === m.mode ? " active" : ""}`}
@@ -199,90 +81,50 @@ const TtsPanel: React.FC<TtsPanelProps> = ({ open, onClose, config, onChange })
           </div>
 
           {/* 音色选择 */}
-          <div className="tts-voice-section">
-            <div className="tts-voice-label">
-              选择音色
-              {voicesLoading && <span className="tts-voice-loading">加载中...</span>}
-            </div>
-            <div className="tts-voice-grid">
-              {voiceCategories.map(([cat, info]) => {
-                const voice = voices.find((v) => v.category === cat)
-                const isSelected = voice && config.voice_id === voice.id
-                return (
-                  <button
-                    key={cat}
-                    className={`tts-voice-card${isSelected ? " active" : ""}`}
-                    onClick={() => voice && handleVoiceSelect(voice.id)}
-                    disabled={!voice || voicesLoading}
-                  >
-                    <span className="tts-voice-card-icon">{info.icon}</span>
-                    <span className="tts-voice-card-name">{voice?.name || info.label}</span>
-                  </button>
-                )
-              })}
-            </div>
-          </div>
+          <VoiceSelector
+            voices={voices}
+            voicesLoading={voicesLoading}
+            selectedVoiceId={config.voice_id}
+            onVoiceSelect={handleVoiceSelect}
+          />
 
           {/* 语速滑块 */}
-          <div className="tts-slider-section">
-            <div className="tts-slider-header">
-              <span className="tts-slider-label">语速</span>
-              <span className="tts-slider-value">{config.speed.toFixed(2)}x</span>
-            </div>
-            <Slider
-              min={0.5}
-              max={2.0}
-              step={0.05}
-              value={config.speed}
-              onChange={handleSpeedChange}
-              tooltip={{ formatter: (v) => `${(v as number).toFixed(2)}x` }}
-            />
-            <div className="tts-slider-marks">
-              <span>0.5x</span>
-              <span>1.0x</span>
-              <span>2.0x</span>
-            </div>
-          </div>
+          <TtsSlider
+            label="语速"
+            value={config.speed}
+            min={0.5}
+            max={2.0}
+            step={0.05}
+            unit="x"
+            onChange={handleSpeedChange}
+            marks={["0.5x", "1.0x", "2.0x"]}
+            tooltipFormatter={(v) => `${v.toFixed(2)}x`}
+          />
 
           {/* 语调滑块 */}
-          <div className="tts-slider-section">
-            <div className="tts-slider-header">
-              <span className="tts-slider-label">语调</span>
-              <span className="tts-slider-value">
-                {config.pitch > 0 ? "+" : ""}
-                {config.pitch} 半音
-              </span>
-            </div>
-            <Slider
-              min={-12}
-              max={12}
-              step={1}
-              value={config.pitch}
-              onChange={handlePitchChange}
-              tooltip={{ formatter: (v) => `${v}半音` }}
-            />
-            <div className="tts-slider-marks">
-              <span>-12</span>
-              <span>0</span>
-              <span>+12</span>
-            </div>
-          </div>
+          <TtsSlider
+            label="语调"
+            value={config.pitch}
+            min={-12}
+            max={12}
+            step={1}
+            unit="半音"
+            onChange={handlePitchChange}
+            marks={["-12", "0", "+12"]}
+            tooltipFormatter={(v) => `${v}半音`}
+          />
 
           {/* 音量滑块 */}
-          <div className="tts-slider-section">
-            <div className="tts-slider-header">
-              <span className="tts-slider-label">音量</span>
-              <span className="tts-slider-value">{config.volume}%</span>
-            </div>
-            <Slider
-              min={0}
-              max={100}
-              step={1}
-              value={config.volume}
-              onChange={handleVolumeChange}
-              tooltip={{ formatter: (v) => `${v}%` }}
-            />
-          </div>
+          <TtsSlider
+            label="音量"
+            value={config.volume}
+            min={0}
+            max={100}
+            step={1}
+            unit="%"
+            onChange={handleVolumeChange}
+            tooltipFormatter={(v) => `${v}%`}
+          />
 
           {/* 试听按钮 */}
           <div className="tts-preview-section">

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

@@ -3,38 +3,16 @@
  * 三个 Tab：图片水印 / 文字水印 / 滚动水印
  * 通用设置：位置、不透明度
  */
-import React, { useCallback, useState } from "react"
+import React from "react"
 import { Drawer } from "antd"
-import type { WatermarkConfig, WatermarkType, WatermarkPosition, ScrollDirection } from "../types"
-import { DEFAULT_WATERMARK } from "../types"
+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"
 
-/* ──────────── 常量 ──────────── */
-
-const WATERMARK_TABS: { key: WatermarkType; label: string; icon: string }[] = [
-  { key: "none", label: "无水印", icon: "🚫" },
-  { key: "image", label: "图片水印", icon: "🖼️" },
-  { key: "text", label: "文字水印", icon: "📝" },
-  { key: "scroll", label: "滚动水印", icon: "📜" },
-]
-
-const POSITION_OPTIONS: { value: WatermarkPosition; label: string }[] = [
-  { value: "top_left", label: "左上角" },
-  { value: "top_right", label: "右上角" },
-  { value: "bottom_left", label: "左下角" },
-  { value: "bottom_right", label: "右下角" },
-  { value: "center", label: "居中" },
-]
-
-const SCROLL_DIRECTION_OPTIONS: {
-  value: ScrollDirection
-  label: string
-}[] = [
-  { value: "horizontal", label: "水平滚动" },
-  { value: "vertical", label: "垂直滚动" },
-  { value: "diagonal", label: "对角滚动" },
-]
-
-/* ──────────── Props ──────────── */
 interface WatermarkPanelProps {
   open: boolean
   onClose: () => void
@@ -43,100 +21,21 @@ interface WatermarkPanelProps {
 }
 
 const WatermarkPanel: React.FC<WatermarkPanelProps> = ({ open, onClose, config, onChange }) => {
-  /* ── 图片上传预览 URL（本地预览用） ── */
-  const [localImageUrl, setLocalImageUrl] = useState<string>("")
-
-  /* ── 切换水印类型 ── */
-  const handleTypeChange = useCallback(
-    (type: WatermarkType) => {
-      onChange({ ...DEFAULT_WATERMARK, type })
-    },
-    [onChange],
-  )
-
-  /* ── 通用设置变更 ── */
-  const handlePositionChange = useCallback(
-    (position: WatermarkPosition) => {
-      onChange({ ...config, position })
-    },
-    [config, onChange],
-  )
-
-  const handleOpacityChange = useCallback(
-    (opacity: number) => {
-      onChange({ ...config, opacity })
-    },
-    [config, onChange],
-  )
-
-  /* ── 图片水印设置 ── */
-  const handleImageUrlChange = useCallback(
-    (url: string) => {
-      setLocalImageUrl(url)
-      onChange({ ...config, image_url: url })
-    },
-    [config, onChange],
-  )
-
-  const handleImageWidthChange = useCallback(
-    (width: number) => {
-      onChange({ ...config, width })
-    },
-    [config, onChange],
-  )
-
-  const handleImageHeightChange = useCallback(
-    (height: number) => {
-      onChange({ ...config, height })
-    },
-    [config, onChange],
-  )
-
-  /* ── 文字水印设置 ── */
-  const handleTextChange = useCallback(
-    (text: string) => {
-      onChange({ ...config, text })
-    },
-    [config, onChange],
-  )
-
-  const handleFontSizeChange = useCallback(
-    (font_size: number) => {
-      onChange({ ...config, font_size })
-    },
-    [config, onChange],
-  )
-
-  const handleColorChange = useCallback(
-    (color: string) => {
-      onChange({ ...config, color })
-    },
-    [config, onChange],
-  )
-
-  /* ── 滚动水印设置 ── */
-  const handleScrollDirectionChange = useCallback(
-    (scroll_direction: ScrollDirection) => {
-      onChange({ ...config, scroll_direction })
-    },
-    [config, onChange],
-  )
-
-  const handleScrollSpeedChange = useCallback(
-    (scroll_speed: number) => {
-      onChange({ ...config, scroll_speed })
-    },
-    [config, onChange],
-  )
-
-  /* ── 重置 ── */
-  const handleReset = useCallback(() => {
-    setLocalImageUrl("")
-    onChange({ ...DEFAULT_WATERMARK })
-  }, [onChange])
-
-  /* ── 当前激活的 Tab ── */
-  const activeTab = config.type
+  const {
+    localImageUrl,
+    handleTypeChange,
+    handlePositionChange,
+    handleOpacityChange,
+    handleImageUrlChange,
+    handleImageWidthChange,
+    handleImageHeightChange,
+    handleTextChange,
+    handleFontSizeChange,
+    handleColorChange,
+    handleScrollDirectionChange,
+    handleScrollSpeedChange,
+    handleReset,
+  } = useWatermarkConfig({ config, onChange })
 
   return (
     <Drawer
@@ -148,18 +47,7 @@ const WatermarkPanel: React.FC<WatermarkPanelProps> = ({ open, onClose, config,
       className="watermark-panel-drawer"
     >
       {/* ── Tab 切换 ── */}
-      <div className="wp-tabs">
-        {WATERMARK_TABS.map((tab) => (
-          <button
-            key={tab.key}
-            className={`wp-tab${activeTab === tab.key ? " active" : ""}`}
-            onClick={() => handleTypeChange(tab.key)}
-          >
-            <span className="wp-tab-icon">{tab.icon}</span>
-            <span className="wp-tab-label">{tab.label}</span>
-          </button>
-        ))}
-      </div>
+      <WatermarkTypeTabs activeTab={config.type} onTypeChange={handleTypeChange} />
 
       {/* ── 无水印提示 ── */}
       {config.type === "none" && (
@@ -172,210 +60,53 @@ const WatermarkPanel: React.FC<WatermarkPanelProps> = ({ open, onClose, config,
 
       {/* ── 图片水印配置 ── */}
       {config.type === "image" && (
-        <div className="wp-section">
-          <div className="wp-field">
-            <label className="wp-field-label">水印图片 URL</label>
-            <input
-              className="wp-input"
-              type="text"
-              placeholder="https://example.com/logo.png"
-              value={localImageUrl || config.image_url || ""}
-              onChange={(e) => handleImageUrlChange(e.target.value)}
-            />
-            {(localImageUrl || config.image_url) && (
-              <div className="wp-image-preview">
-                <img
-                  src={localImageUrl || config.image_url}
-                  alt="水印预览"
-                  onError={(e) => {
-                    ;(e.target as HTMLImageElement).style.display = "none"
-                  }}
-                />
-              </div>
-            )}
-          </div>
-
-          <div className="wp-field">
-            <label className="wp-field-label">宽度（像素，0 表示自适应）</label>
-            <input
-              className="wp-input"
-              type="number"
-              min={0}
-              max={2000}
-              value={config.width ?? 0}
-              onChange={(e) => handleImageWidthChange(Number(e.target.value))}
-            />
-          </div>
-
-          <div className="wp-field">
-            <label className="wp-field-label">高度（像素，0 表示自适应）</label>
-            <input
-              className="wp-input"
-              type="number"
-              min={0}
-              max={2000}
-              value={config.height ?? 0}
-              onChange={(e) => handleImageHeightChange(Number(e.target.value))}
-            />
-          </div>
-        </div>
+        <ImageWatermarkSection
+          imageUrl={config.image_url || ""}
+          localImageUrl={localImageUrl}
+          width={config.width}
+          height={config.height}
+          onImageUrlChange={handleImageUrlChange}
+          onWidthChange={handleImageWidthChange}
+          onHeightChange={handleImageHeightChange}
+        />
       )}
 
       {/* ── 文字水印配置 ── */}
       {config.type === "text" && (
-        <div className="wp-section">
-          <div className="wp-field">
-            <label className="wp-field-label">水印文字</label>
-            <textarea
-              className="wp-textarea"
-              placeholder="输入水印文字内容"
-              rows={3}
-              value={config.text ?? ""}
-              onChange={(e) => handleTextChange(e.target.value)}
-            />
-          </div>
-
-          <div className="wp-field">
-            <label className="wp-field-label">字号</label>
-            <div className="wp-slider-row">
-              <input
-                className="wp-slider"
-                type="range"
-                min={12}
-                max={72}
-                value={config.font_size ?? 24}
-                onChange={(e) => handleFontSizeChange(Number(e.target.value))}
-              />
-              <span className="wp-slider-value">{config.font_size ?? 24}px</span>
-            </div>
-          </div>
-
-          <div className="wp-field">
-            <label className="wp-field-label">文字颜色</label>
-            <div className="wp-color-row">
-              <input
-                className="wp-color-input"
-                type="color"
-                value={config.color ?? "#ffffff"}
-                onChange={(e) => handleColorChange(e.target.value)}
-              />
-              <span className="wp-color-value">{config.color ?? "#ffffff"}</span>
-            </div>
-          </div>
-        </div>
+        <TextWatermarkSection
+          text={config.text || ""}
+          fontSize={config.font_size ?? 24}
+          color={config.color ?? "#ffffff"}
+          onTextChange={handleTextChange}
+          onFontSizeChange={handleFontSizeChange}
+          onColorChange={handleColorChange}
+        />
       )}
 
       {/* ── 滚动水印配置 ── */}
       {config.type === "scroll" && (
-        <div className="wp-section">
-          <div className="wp-field">
-            <label className="wp-field-label">滚动文字</label>
-            <textarea
-              className="wp-textarea"
-              placeholder="输入滚动水印文字"
-              rows={2}
-              value={config.text ?? ""}
-              onChange={(e) => handleTextChange(e.target.value)}
-            />
-          </div>
-
-          <div className="wp-field">
-            <label className="wp-field-label">滚动方向</label>
-            <select
-              className="wp-select"
-              value={config.scroll_direction ?? "horizontal"}
-              onChange={(e) => handleScrollDirectionChange(e.target.value as ScrollDirection)}
-            >
-              {SCROLL_DIRECTION_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div className="wp-field">
-            <label className="wp-field-label">滚动速度</label>
-            <div className="wp-slider-row">
-              <input
-                className="wp-slider"
-                type="range"
-                min={10}
-                max={200}
-                value={config.scroll_speed ?? 50}
-                onChange={(e) => handleScrollSpeedChange(Number(e.target.value))}
-              />
-              <span className="wp-slider-value">{config.scroll_speed ?? 50}px/s</span>
-            </div>
-          </div>
-
-          <div className="wp-field">
-            <label className="wp-field-label">字号</label>
-            <div className="wp-slider-row">
-              <input
-                className="wp-slider"
-                type="range"
-                min={12}
-                max={72}
-                value={config.font_size ?? 24}
-                onChange={(e) => handleFontSizeChange(Number(e.target.value))}
-              />
-              <span className="wp-slider-value">{config.font_size ?? 24}px</span>
-            </div>
-          </div>
-
-          <div className="wp-field">
-            <label className="wp-field-label">文字颜色</label>
-            <div className="wp-color-row">
-              <input
-                className="wp-color-input"
-                type="color"
-                value={config.color ?? "#ffffff"}
-                onChange={(e) => handleColorChange(e.target.value)}
-              />
-              <span className="wp-color-value">{config.color ?? "#ffffff"}</span>
-            </div>
-          </div>
-        </div>
+        <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" && (
-        <div className="wp-section wp-common-section">
-          <div className="wp-section-divider" />
-          <div className="wp-common-title">通用设置</div>
-
-          <div className="wp-field">
-            <label className="wp-field-label">水印位置</label>
-            <select
-              className="wp-select"
-              value={config.position}
-              onChange={(e) => handlePositionChange(e.target.value as WatermarkPosition)}
-            >
-              {POSITION_OPTIONS.map((opt) => (
-                <option key={opt.value} value={opt.value}>
-                  {opt.label}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div className="wp-field">
-            <label className="wp-field-label">不透明度</label>
-            <div className="wp-slider-row">
-              <input
-                className="wp-slider"
-                type="range"
-                min={0}
-                max={1}
-                step={0.05}
-                value={config.opacity}
-                onChange={(e) => handleOpacityChange(Number(e.target.value))}
-              />
-              <span className="wp-slider-value">{Math.round(config.opacity * 100)}%</span>
-            </div>
-          </div>
-        </div>
+        <WatermarkCommonSection
+          position={config.position}
+          opacity={config.opacity}
+          onPositionChange={handlePositionChange}
+          onOpacityChange={handleOpacityChange}
+        />
       )}
 
       {/* ── 底部操作 ── */}

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,266 @@
+/**
+ * 片段详情区块
+ */
+import React from "react"
+import { useNavigate } from "react-router-dom"
+import { TRANSITION_OPTIONS } from "@/api/template-editor"
+import type { ClipData, ClipType } from "@/pages/editing-planner/types"
+import { CLIP_TYPE_ICONS, CLIP_TYPE_LABELS } from "@/pages/editing-planner/constants/clipProperties"
+import { getGenderLabel } from "@/pages/editing-planner/utils/clipProperties"
+import type { AssetItem } from "@/api/assets"
+import type { TemplateMode } from "@/api/editing-planner"
+
+interface ClipDetailSectionProps {
+  clip: ClipData
+  currentMode: TemplateMode
+  voiceMaterials?: AssetItem[]
+  voiceMaterialsLoading?: boolean
+  onClipUpdate: (clipId: string, data: Partial<ClipData>) => void
+  onRefreshVoiceMaterials?: () => void
+  onClipVoiceSelect?: (clipId: string, asset: AssetItem | null) => void
+  onOpenTransitionDrawer?: (clipId: string) => void
+  onOpenSpeedDrawer?: (clipId: string) => void
+  onOpenTtsDrawer?: (clipId: string) => void
+  previewingId: string | null
+  onPreviewVoice: (asset: AssetItem) => void
+  onStopPreview: () => void
+}
+
+const ClipDetailSection: React.FC<ClipDetailSectionProps> = ({
+  clip,
+  currentMode,
+  voiceMaterials = [],
+  voiceMaterialsLoading = false,
+  onClipUpdate,
+  onRefreshVoiceMaterials,
+  onClipVoiceSelect,
+  onOpenTransitionDrawer,
+  onOpenSpeedDrawer,
+  onOpenTtsDrawer,
+  previewingId,
+  onPreviewVoice,
+  onStopPreview,
+}) => {
+  const navigate = useNavigate()
+
+  const isTypeDisabled = (t: ClipType) => {
+    if (currentMode === "pip") return t !== "pip"
+    if (currentMode === "voice_over") return t !== "voice"
+    return false
+  }
+
+  const transitionLabel = (() => {
+    const t = clip.transition
+    if (!t || t.type === "none") return "无转场"
+    const opt = TRANSITION_OPTIONS.find((o) => o.value === t.type)
+    return `${opt?.label ?? t.type} · ${t.duration.toFixed(1)}s`
+  })()
+
+  const speedLabel = clip.speed ? `${clip.speed.rate.toFixed(2)}x` : "1.00x"
+
+  const ttsLabel = (() => {
+    const tts = clip.tts_config
+    if (!tts || tts.mode === "none") return "无配音"
+    if (tts.mode === "upload") return "上传配音"
+    return `TTS · ${tts.voice_id ? "已选音色" : "未选音色"}`
+  })()
+
+  return (
+    <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-type-selector">
+            {(["voice", "pip"] as ClipType[]).map((t) => {
+              const disabled = isTypeDisabled(t)
+              return (
+                <button
+                  key={t}
+                  className={`ep-clip-type-btn${clip.type === t ? " active" : ""}${disabled ? " disabled" : ""}`}
+                  disabled={disabled}
+                  onClick={() => !disabled && onClipUpdate(clip.id, { type: t })}
+                >
+                  {CLIP_TYPE_ICONS[t]} {CLIP_TYPE_LABELS[t]}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* 时长 */}
+        <div className="ep-clip-detail-field">
+          <div className="ep-clip-detail-label">时长</div>
+          <div className="ep-clip-detail-row">
+            <input
+              className="ep-duration-input"
+              type="number"
+              min={1}
+              max={120}
+              value={clip.duration}
+              onChange={(e) =>
+                onClipUpdate(clip.id, {
+                  duration: Math.max(1, Math.min(120, Number(e.target.value) || 1)),
+                })
+              }
+            />
+            <span className="ep-clip-detail-unit">秒</span>
+          </div>
+        </div>
+
+        {/* 转场效果入口 */}
+        {onOpenTransitionDrawer && (
+          <div className="ep-clip-detail-field">
+            <button
+              className="ep-advanced-btn ep-advanced-btn--transition"
+              onClick={() => onOpenTransitionDrawer(clip.id)}
+            >
+              <span className="ep-advanced-btn-icon">🎬</span>
+              <span className="ep-advanced-btn-label">转场效果</span>
+              <span className="ep-advanced-btn-value">{transitionLabel}</span>
+              <span className="ep-advanced-btn-arrow">›</span>
+            </button>
+          </div>
+        )}
+
+        {/* 播放速度入口 */}
+        {onOpenSpeedDrawer && (
+          <div className="ep-clip-detail-field">
+            <button
+              className="ep-advanced-btn ep-advanced-btn--speed"
+              onClick={() => onOpenSpeedDrawer(clip.id)}
+            >
+              <span className="ep-advanced-btn-icon">⚡</span>
+              <span className="ep-advanced-btn-label">播放速度</span>
+              <span className="ep-advanced-btn-value">{speedLabel}</span>
+              <span className="ep-advanced-btn-arrow">›</span>
+            </button>
+          </div>
+        )}
+
+        {/* TTS 配音入口 */}
+        {onOpenTtsDrawer && (
+          <div className="ep-clip-detail-field">
+            <button
+              className="ep-advanced-btn ep-advanced-btn--tts"
+              onClick={() => onOpenTtsDrawer(clip.id)}
+            >
+              <span className="ep-advanced-btn-icon">🎙️</span>
+              <span className="ep-advanced-btn-label">TTS 配音</span>
+              <span className="ep-advanced-btn-value">{ttsLabel}</span>
+              <span className="ep-advanced-btn-arrow">›</span>
+            </button>
+          </div>
+        )}
+
+        {/* 素材起始时间 — 仅 voice 类型显示 */}
+        {clip.type === "voice" && (
+          <div className="ep-clip-detail-field">
+            <div className="ep-clip-detail-label">素材起始时间</div>
+            <div className="ep-clip-detail-row">
+              <input
+                className="ep-duration-input"
+                type="number"
+                min={0}
+                max={9999}
+                step={0.1}
+                value={clip.startOffset}
+                onChange={(e) =>
+                  onClipUpdate(clip.id, {
+                    startOffset: Math.max(0, Math.min(9999, Number(e.target.value) || 0)),
+                  })
+                }
+              />
+              <span className="ep-clip-detail-unit">秒</span>
+            </div>
+          </div>
+        )}
+
+        {/* 配音素材选择 — 仅 voice 类型显示 */}
+        {clip.type === "voice" && (
+          <div className="ep-clip-detail-field">
+            <div className="ep-clip-detail-label">
+              配音素材
+              {onRefreshVoiceMaterials && (
+                <button
+                  type="button"
+                  className="ep-voice-refresh-btn"
+                  title="刷新配音列表"
+                  onClick={() => onRefreshVoiceMaterials()}
+                  disabled={voiceMaterialsLoading}
+                >
+                  {voiceMaterialsLoading ? "⏳" : "🔄"}
+                </button>
+              )}
+            </div>
+
+            {voiceMaterialsLoading && voiceMaterials.length === 0 ? (
+              <div className="ep-voice-loading">加载中...</div>
+            ) : (
+              <>
+                <div className="ep-voice-select-row">
+                  <select
+                    className="ep-clip-detail-select"
+                    value={clip.voice_asset_id ?? ""}
+                    onChange={(e) => {
+                      const assetId = e.target.value
+                      if (!onClipVoiceSelect) return
+                      if (!assetId) {
+                        onClipVoiceSelect(clip.id, null)
+                      } else {
+                        const asset = voiceMaterials.find((m) => m.id === assetId)
+                        if (asset) onClipVoiceSelect(clip.id, asset)
+                      }
+                      onStopPreview()
+                    }}
+                  >
+                    <option value="">未选择</option>
+                    {voiceMaterials.map((m) => {
+                      const gender = getGenderLabel(m)
+                      const label = gender ? `${m.name}（${gender}）` : m.name
+                      return (
+                        <option key={m.id} value={m.id}>
+                          {label}
+                        </option>
+                      )
+                    })}
+                  </select>
+                  {clip.voice_asset_id && (
+                    <button
+                      type="button"
+                      className="ep-voice-preview-btn"
+                      title={previewingId === clip.voice_asset_id ? "暂停" : "试听"}
+                      onClick={() => {
+                        const asset = voiceMaterials.find((m) => m.id === clip.voice_asset_id)
+                        if (asset) onPreviewVoice(asset)
+                      }}
+                    >
+                      {previewingId === clip.voice_asset_id ? "⏸" : "▶️"}
+                    </button>
+                  )}
+                </div>
+                {voiceMaterials.length === 0 && (
+                  <div className="ep-voice-empty">暂无配音素材，请先上传</div>
+                )}
+              </>
+            )}
+
+            <button
+              className="ep-voice-upload-btn"
+              onClick={() => navigate("/app/voice-materials")}
+            >
+              + 上传新配音
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ClipDetailSection

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/filter/FilterManualAdjust.tsx

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

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

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

apps/web/src/pages/editing-planner/components/intro-outro/IntroOutroBlock.tsx

@@ -0,0 +1,125 @@
+/**
+ * 片头/片尾通用区块组件（片头片尾结构对称，复用同一个组件）
+ */
+import React from "react"
+import type { IntroOutroItem, IntroOutroKind, TransitionType } from "../../types"
+import { TRANSITION_OPTIONS } from "@/api/template-editor"
+import { KIND_OPTIONS } from "../../constants/introOutro"
+
+interface IntroOutroBlockProps {
+  title: string
+  icon: string
+  item: IntroOutroItem
+  transitionLabel: string
+  onKindChange: (kind: IntroOutroKind) => void
+  onChange: (partial: Partial<IntroOutroItem>) => void
+}
+
+const IntroOutroBlock: React.FC<IntroOutroBlockProps> = ({
+  title,
+  icon,
+  item,
+  transitionLabel,
+  onKindChange,
+  onChange,
+}) => {
+  const hasContent = item.kind !== "none"
+
+  return (
+    <div className="iop-block">
+      <div className="iop-block-header">
+        <span className="iop-block-icon">{icon}</span>
+        <span className="iop-block-title">{title}</span>
+      </div>
+
+      {/* 类型选择 */}
+      <div className="iop-kind-row">
+        {KIND_OPTIONS.map((opt) => (
+          <button
+            key={opt.value}
+            className={`iop-kind-btn${item.kind === opt.value ? " active" : ""}`}
+            onClick={() => onKindChange(opt.value)}
+          >
+            <span className="iop-kind-icon">{opt.icon}</span>
+            <span className="iop-kind-label">{opt.label}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* 视频/图片配置 */}
+      {hasContent && (
+        <>
+          <div className="iop-field">
+            <label className="iop-field-label">
+              {item.kind === "video" ? "视频" : "图片"} URL
+            </label>
+            <input
+              className="iop-input"
+              type="text"
+              placeholder={
+                item.kind === "video"
+                  ? `https://example.com/${title}.mp4`
+                  : `https://example.com/${title}.png`
+              }
+              value={item.url ?? ""}
+              onChange={(e) => onChange({ url: e.target.value })}
+            />
+          </div>
+
+          <div className="iop-field">
+            <label className="iop-field-label">显示时长</label>
+            <div className="iop-slider-row">
+              <input
+                className="iop-slider"
+                type="range"
+                min={1}
+                max={15}
+                step={0.5}
+                value={item.duration}
+                onChange={(e) => onChange({ duration: Number(e.target.value) })}
+              />
+              <span className="iop-slider-value">{item.duration}s</span>
+            </div>
+          </div>
+
+          <div className="iop-field">
+            <label className="iop-field-label">{transitionLabel}</label>
+            <select
+              className="iop-select"
+              value={item.transition ?? "none"}
+              onChange={(e) => onChange({ transition: e.target.value as TransitionType })}
+            >
+              {TRANSITION_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {item.transition && item.transition !== "none" && (
+            <div className="iop-field">
+              <label className="iop-field-label">过渡时长</label>
+              <div className="iop-slider-row">
+                <input
+                  className="iop-slider"
+                  type="range"
+                  min={0.3}
+                  max={2.0}
+                  step={0.1}
+                  value={item.transition_duration ?? 0.5}
+                  onChange={(e) => onChange({ transition_duration: Number(e.target.value) })}
+                />
+                <span className="iop-slider-value">
+                  {(item.transition_duration ?? 0.5).toFixed(1)}s
+                </span>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export default IntroOutroBlock

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

@@ -0,0 +1,281 @@
+/**
+ * 混剪单图层配置区
+ */
+import React from "react"
+import type { PipLayer, PipAnimType, PipSlideDirection } from "@/pages/editing-planner/types"
+import {
+  GRID_POSITIONS,
+  ANIM_OPTIONS,
+  SLIDE_DIR_OPTIONS,
+  LAYER_COLORS,
+} from "@/pages/editing-planner/constants/pipConfig"
+
+interface LayerConfigProps {
+  layer: PipLayer | null
+  layers: PipLayer[]
+  totalDuration: number
+  onUpdate: (id: string, partial: Partial<PipLayer>) => void
+  onGridClick: (pos: any) => void
+  onWidthChange: (val: number) => void
+  onHeightChange: (val: number) => void
+}
+
+const LayerConfig: React.FC<LayerConfigProps> = ({
+  layer,
+  layers,
+  totalDuration,
+  onUpdate,
+  onGridClick,
+  onWidthChange,
+  onHeightChange,
+}) => {
+  if (!layer) {
+    return (
+      <div className="pip-config-area">
+        <div className="pip-config-empty">选择或添加图层以配置</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="pip-config-area">
+      {/* ── 迷你预览 ── */}
+      <div className="pip-preview-box">
+        {layers.map((l, idx) => (
+          <div
+            key={l.id}
+            className={`pip-preview-layer${layer.id === l.id ? " selected" : ""}`}
+            style={{
+              left: `${l.x}%`,
+              top: `${l.y}%`,
+              width: `${l.width}%`,
+              height: `${l.height}%`,
+              background: LAYER_COLORS[idx % LAYER_COLORS.length],
+              opacity: l.opacity / 100,
+              borderRadius: `${l.border_radius}%`,
+            }}
+          >
+            <span className="pip-preview-label">{l.name}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* ── 素材类型 ── */}
+      <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) => onUpdate(layer.id, { x: Number(e.target.value) })}
+              />
+            </div>
+            <div>
+              <label className="pip-field-label">Y (%)</label>
+              <input
+                className="pip-number"
+                type="number"
+                min={0}
+                max={100}
+                value={layer.y}
+                onChange={(e) => onUpdate(layer.id, { y: Number(e.target.value) })}
+              />
+            </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) => onWidthChange(Number(e.target.value))}
+          />
+          <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) => onHeightChange(Number(e.target.value))}
+          />
+          <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) => onUpdate(layer.id, { border_radius: Number(e.target.value) })}
+          />
+          <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) => onUpdate(layer.id, { opacity: Number(e.target.value) })}
+          />
+          <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) => onUpdate(layer.id, { start_time: Number(e.target.value) })}
+            />
+          </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) => onUpdate(layer.id, { duration: Number(e.target.value) })}
+            />
+          </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>
+  )
+}
+
+export default LayerConfig

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

@@ -0,0 +1,65 @@
+/**
+ * 混剪图层列表
+ */
+import React from "react"
+import type { PipLayer } from "@/pages/editing-planner/types"
+import { LAYER_COLORS } from "@/pages/editing-planner/constants/pipConfig"
+
+interface LayerListProps {
+  layers: PipLayer[]
+  selectedId: string
+  onSelect: (id: string) => void
+  onAdd: () => void
+  onDelete: (id: string) => void
+}
+
+const LayerList: React.FC<LayerListProps> = ({ layers, selectedId, onSelect, onAdd, onDelete }) => {
+  return (
+    <div className="pip-layer-list">
+      <div className="pip-toolbar" style={{ marginBottom: 8 }}>
+        <button className="pip-add-btn" onClick={onAdd}>
+          + 添加图层
+        </button>
+      </div>
+      {layers.length === 0 ? (
+        <div className="pip-layer-empty">暂无图层，点击上方添加</div>
+      ) : (
+        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}
+                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>
+  )
+}
+
+export default LayerList

apps/web/src/pages/editing-planner/components/sticker/StickerLibrary.tsx

@@ -0,0 +1,142 @@
+/**
+ * 贴纸素材库（emoji / 图片 / 文字花字）
+ */
+import React, { useState } from "react"
+import type { StickerType, TextStickerPreset } from "@/pages/editing-planner/types"
+import {
+  EMOJI_LIST,
+  STICKER_TYPE_TABS,
+  TEXT_PRESET_STYLES,
+  TEXT_STICKER_PRESET_LABELS,
+} from "@/pages/editing-planner/constants/sticker"
+
+interface StickerLibraryProps {
+  activeTab: StickerType
+  onTabChange: (tab: StickerType) => void
+  onAddSticker: (type: StickerType, content: string) => void
+}
+
+const StickerLibrary: React.FC<StickerLibraryProps> = ({
+  activeTab,
+  onTabChange,
+  onAddSticker,
+}) => {
+  const [textInput, setTextInput] = useState("")
+  const imageInputRef = React.useRef<HTMLInputElement>(null)
+
+  const handleAddImage = () => {
+    const val = imageInputRef.current?.value.trim()
+    if (val) {
+      onAddSticker("image", val)
+      if (imageInputRef.current) imageInputRef.current.value = ""
+    }
+  }
+
+  const handleAddText = () => {
+    if (textInput.trim()) {
+      onAddSticker("text", textInput.trim())
+      setTextInput("")
+    }
+  }
+
+  return (
+    <>
+      {/* 类型 Tab */}
+      <div className="sticker-tabs">
+        {STICKER_TYPE_TABS.map((t) => (
+          <button
+            key={t.value}
+            className={`sticker-tab${activeTab === t.value ? " active" : ""}`}
+            onClick={() => onTabChange(t.value)}
+          >
+            {t.label}
+          </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={() => onAddSticker("emoji", emoji)}
+              >
+                {emoji}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* 图片贴纸 */}
+        {activeTab === "image" && (
+          <div className="sticker-image-input">
+            <input
+              ref={imageInputRef}
+              type="text"
+              className="sticker-url-input"
+              placeholder="输入图片 URL 添加贴纸..."
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && e.currentTarget.value.trim()) {
+                  handleAddImage()
+                }
+              }}
+            />
+            <button className="sticker-url-add-btn" onClick={handleAddImage}>
+              添加
+            </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) => setTextInput(e.target.value)}
+              />
+              <button
+                className="sticker-text-add-btn"
+                disabled={!textInput.trim()}
+                onClick={handleAddText}
+              >
+                添加
+              </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>
+    </>
+  )
+}
+
+export default StickerLibrary

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

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

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

@@ -0,0 +1,200 @@
+/**
+ * 选中贴纸的属性编辑器
+ */
+import React from "react"
+import type { StickerItem, TextStickerPreset } from "@/pages/editing-planner/types"
+import {
+  TEXT_PRESET_STYLES,
+  TEXT_STICKER_PRESET_LABELS,
+} from "@/pages/editing-planner/constants/sticker"
+
+interface StickerPropsEditorProps {
+  sticker: StickerItem
+  totalDuration: number
+  onUpdate: (id: string, partial: Partial<StickerItem>) => void
+}
+
+const StickerPropsEditor: React.FC<StickerPropsEditorProps> = ({
+  sticker,
+  totalDuration,
+  onUpdate,
+}) => {
+  return (
+    <div className="sticker-props-section">
+      <div className="sticker-section-title">属性调整</div>
+
+      {/* 位置 */}
+      <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) => onUpdate(sticker.id, { x: Number(e.target.value) })}
+        />
+        <span className="sticker-prop-value">{sticker.x}%</span>
+      </div>
+      <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) => onUpdate(sticker.id, { 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) =>
+            onUpdate(sticker.id, {
+              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) => onUpdate(sticker.id, { 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) => onUpdate(sticker.id, { 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) => onUpdate(sticker.id, { start_time: Number(e.target.value) })}
+        />
+        <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) => onUpdate(sticker.id, { duration: Number(e.target.value) })}
+        />
+      </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) =>
+                onUpdate(sticker.id, { 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) => onUpdate(sticker.id, { 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) => onUpdate(sticker.id, { 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>
+  )
+}
+
+export default StickerPropsEditor

apps/web/src/pages/editing-planner/components/subtitle-style/SubtitlePreview.tsx

@@ -0,0 +1,37 @@
+/**
+ * 字幕预览组件
+ */
+import React from "react"
+import type { SubtitleStyleConfig } from "../../types/subtitle"
+
+interface SubtitlePreviewProps {
+  config: SubtitleStyleConfig
+  previewText?: string
+}
+
+const SubtitlePreview: React.FC<SubtitlePreviewProps> = ({
+  config,
+  previewText = "这是一段字幕预览",
+}) => {
+  return (
+    <div className="sub-field">
+      <label className="sub-label">预览</label>
+      <div className="sub-preview-box">
+        <span
+          className="sub-preview-text"
+          style={{
+            fontSize: `${Math.min(config.fontSize, 28)}px`,
+            color: config.fontColor,
+            fontFamily: config.font,
+            WebkitTextStroke: config.stroke ? "1px #000" : undefined,
+            textShadow: config.shadow ? "2px 2px 4px rgba(0,0,0,0.8)" : undefined,
+          }}
+        >
+          {previewText}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default SubtitlePreview

apps/web/src/pages/editing-planner/components/timeline/AddClipPicker.tsx

@@ -0,0 +1,80 @@
+import React from "react"
+import type { ClipType } from "../../types"
+import { CLIP_TYPE_ICONS, CLIP_TYPE_LABELS } from "../../constants/timeline"
+
+interface AddClipPickerProps {
+  pickerRef: React.RefObject<HTMLDivElement>
+  position: { top: number; right: number }
+  availableTypes: ClipType[]
+  addType: ClipType
+  addDuration: number
+  onTypeChange: (type: ClipType) => void
+  onDurationChange: (duration: number) => void
+  onConfirm: () => void
+  minDuration?: number
+  maxDuration?: number
+}
+
+export const AddClipPicker: React.FC<AddClipPickerProps> = ({
+  pickerRef,
+  position,
+  availableTypes,
+  addType,
+  addDuration,
+  onTypeChange,
+  onDurationChange,
+  onConfirm,
+  minDuration = 1,
+  maxDuration = 120,
+}) => {
+  return (
+    <div
+      ref={pickerRef}
+      className="ep-add-clip-picker ep-add-clip-picker--portal"
+      style={{
+        position: "fixed",
+        top: position.top,
+        right: position.right,
+      }}
+    >
+      <div className="ep-add-clip-picker-title">添加片段</div>
+
+      {/* 类型选择 */}
+      <div className="ep-add-clip-type-row">
+        <span className="ep-add-clip-type-label">类型:</span>
+        {availableTypes.map((t) => (
+          <button
+            key={t}
+            className={`ep-add-clip-type-btn${addType === t ? " active" : ""}`}
+            onClick={() => onTypeChange(t)}
+          >
+            {CLIP_TYPE_ICONS[t]} {CLIP_TYPE_LABELS[t]}
+          </button>
+        ))}
+      </div>
+
+      {/* 时长输入 */}
+      <div className="ep-add-clip-duration-row">
+        <span className="ep-add-clip-type-label">时长:</span>
+        <input
+          type="number"
+          className="ep-duration-input"
+          min={minDuration}
+          max={maxDuration}
+          value={addDuration}
+          onChange={(e) =>
+            onDurationChange(
+              Math.max(minDuration, Math.min(maxDuration, Number(e.target.value) || minDuration)),
+            )
+          }
+        />
+        <span className="ep-add-clip-duration-unit">秒</span>
+      </div>
+
+      {/* 确认按钮 */}
+      <button className="ep-add-clip-confirm-btn" onClick={onConfirm}>
+        添加
+      </button>
+    </div>
+  )
+}

apps/web/src/pages/editing-planner/components/timeline/ClipCard.tsx

@@ -0,0 +1,155 @@
+import React from "react"
+import type { ClipData } from "../../types"
+import { TRANSITION_OPTIONS } from "@/api/template-editor"
+import { CLIP_TYPE_ICONS, CLIP_TYPE_LABELS, MIN_CLIP_WIDTH } from "../../constants/timeline"
+
+interface ClipCardProps {
+  clip: ClipData
+  idx: number
+  isSelected: boolean
+  isDragging: boolean
+  isDragOver: boolean
+  isHovered: boolean
+  pps: number
+  trimDragActive: boolean
+  showTrimHandles: boolean
+  onDragStart: (e: React.DragEvent, idx: number) => void
+  onDragOver: (e: React.DragEvent, idx: number) => void
+  onDragEnd: () => void
+  onDrop: (e: React.DragEvent, idx: number) => void
+  onSelect: (clipId: string) => void
+  onContextMenu: (e: React.MouseEvent, clipId: string) => void
+  onMouseEnter: () => void
+  onMouseLeave: () => void
+  onTrimHandleMouseDown: (e: React.MouseEvent, clipId: string, direction: "left" | "right") => void
+  onRemove: (clipId: string) => void
+}
+
+export const ClipCard: React.FC<ClipCardProps> = ({
+  clip,
+  idx,
+  isSelected,
+  isDragging,
+  isDragOver,
+  isHovered,
+  pps,
+  trimDragActive,
+  showTrimHandles,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  onDrop,
+  onSelect,
+  onContextMenu,
+  onMouseEnter,
+  onMouseLeave,
+  onTrimHandleMouseDown,
+  onRemove,
+}) => {
+  /* 转场指示器 */
+  const trans = clip.transition
+  const showTransition = idx > 0 && trans && trans.type !== "none"
+  const transOpt = showTransition
+    ? TRANSITION_OPTIONS.find((o) => o.value === trans!.type)
+    : undefined
+
+  /* 速度徽章 */
+  const speed = clip.speed
+  const showSpeed = speed && Math.abs(speed.rate - 1.0) > 0.01
+
+  /* 裁剪状态 */
+  const hasTrim = !!clip.trim_config
+
+  return (
+    <React.Fragment key={clip.id}>
+      {/* 转场指示器 */}
+      {showTransition && transOpt && (
+        <div
+          className="ep-transition-indicator"
+          title={`${transOpt.label} · ${trans!.duration.toFixed(1)}s`}
+        >
+          <span className="ep-trans-icon">{transOpt.icon}</span>
+          <span className="ep-trans-duration">{trans!.duration.toFixed(1)}s</span>
+        </div>
+      )}
+
+      <div
+        className={`ep-clip-card ${isSelected ? "selected" : ""} ${isDragging ? "dragging" : ""} ${isDragOver ? "drag-over" : ""} ${hasTrim ? "trimmed" : ""}`}
+        style={{ width: Math.max(clip.duration * pps, MIN_CLIP_WIDTH) }}
+        draggable={!trimDragActive}
+        onDragStart={(e) => onDragStart(e, idx)}
+        onDragOver={(e) => onDragOver(e, idx)}
+        onDragEnd={onDragEnd}
+        onDrop={(e) => onDrop(e, idx)}
+        onClick={() => onSelect(clip.id)}
+        onContextMenu={(e) => onContextMenu(e, clip.id)}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {/* 左裁剪手柄 */}
+        {isHovered && showTrimHandles && (
+          <div
+            className="ep-trim-handle ep-trim-handle-left"
+            onMouseDown={(e) => onTrimHandleMouseDown(e, clip.id, "left")}
+            title="拖动调整入点"
+          >
+            <div className="ep-trim-handle-line" />
+          </div>
+        )}
+
+        {/* 类型图标 */}
+        <div className="ep-clip-thumbnail">{CLIP_TYPE_ICONS[clip.type] || "🎬"}</div>
+
+        {/* 片段信息 */}
+        <div className="ep-clip-info">
+          <span className="ep-clip-name">
+            {CLIP_TYPE_LABELS[clip.type] || "片段"} {idx + 1}
+          </span>
+          <span className="ep-clip-duration">
+            {clip.duration}s
+            {hasTrim && (
+              <span className="ep-trim-indicator" title="已裁剪">
+                ✂
+              </span>
+            )}
+          </span>
+        </div>
+
+        {/* 速度徽章 */}
+        {showSpeed && <span className="ep-speed-badge">{speed!.rate.toFixed(1)}x</span>}
+
+        {/* 裁剪徽章 */}
+        {hasTrim && (
+          <span
+            className="ep-trim-badge"
+            title={`入点 ${clip.trim_config!.start_time.toFixed(1)}s / 出点 ${clip.trim_config!.end_time.toFixed(1)}s`}
+          >
+            ✂
+          </span>
+        )}
+
+        {/* 右裁剪手柄 */}
+        {isHovered && showTrimHandles && (
+          <div
+            className="ep-trim-handle ep-trim-handle-right"
+            onMouseDown={(e) => onTrimHandleMouseDown(e, clip.id, "right")}
+            title="拖动调整出点"
+          >
+            <div className="ep-trim-handle-line" />
+          </div>
+        )}
+
+        {/* 删除按钮 */}
+        <button
+          className="ep-clip-remove"
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove(clip.id)
+          }}
+        >
+          ✕
+        </button>
+      </div>
+    </React.Fragment>
+  )
+}

apps/web/src/pages/editing-planner/components/timeline/ContextMenu.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+
+interface ContextMenuProps {
+  x: number
+  y: number
+  menuRef: React.RefObject<HTMLDivElement>
+  hasTrim: boolean
+  onSplit: () => void
+  onResetTrim: () => void
+  onDelete: () => void
+}
+
+export const ContextMenu: React.FC<ContextMenuProps> = ({
+  x,
+  y,
+  menuRef,
+  hasTrim,
+  onSplit,
+  onResetTrim,
+  onDelete,
+}) => {
+  return (
+    <div
+      ref={menuRef}
+      className="ep-context-menu"
+      style={{
+        position: "fixed",
+        left: x,
+        top: y,
+      }}
+    >
+      <div className="ep-context-menu-item" onClick={onSplit}>
+        <span className="ep-context-menu-icon">✂️</span>
+        <span>分割片段</span>
+      </div>
+      {hasTrim && (
+        <div className="ep-context-menu-item" onClick={onResetTrim}>
+          <span className="ep-context-menu-icon">↩️</span>
+          <span>恢复原始长度</span>
+        </div>
+      )}
+      <div className="ep-context-menu-divider" />
+      <div className="ep-context-menu-item ep-context-menu-item-danger" onClick={onDelete}>
+        <span className="ep-context-menu-icon">🗑️</span>
+        <span>删除片段</span>
+      </div>
+    </div>
+  )
+}

apps/web/src/pages/editing-planner/components/timeline/TimeRuler.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { getRulerStep, MIN_TRACK_WIDTH } from "../../constants/timeline"
+import { generateRulerMarks } from "../../utils/timeline"
+
+interface TimeRulerProps {
+  totalDuration: number
+  pps: number
+  onClick: (e: React.MouseEvent<HTMLDivElement>) => void
+}
+
+export const TimeRuler: React.FC<TimeRulerProps> = ({ totalDuration, pps, onClick }) => {
+  const trackWidth = Math.max(totalDuration * pps, MIN_TRACK_WIDTH)
+  const step = getRulerStep(totalDuration)
+  const marks = generateRulerMarks(totalDuration, step)
+
+  return (
+    <div className="ep-time-ruler" onClick={onClick}>
+      <div className="ep-time-ruler-inner" style={{ width: trackWidth }}>
+        {marks.map((t) => (
+          <span key={t} className="ep-time-mark" style={{ left: `${t * pps}px` }}>
+            {t}s
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}

apps/web/src/pages/editing-planner/components/timeline/TrimPreview.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { formatTrimTime } from "../../utils/timeline"
+
+interface TrimPreviewProps {
+  startTime: number
+  endTime: number
+  duration: number
+  x: number
+  y: number
+}
+
+export const TrimPreview: React.FC<TrimPreviewProps> = ({ startTime, endTime, duration, x, y }) => {
+  return (
+    <div
+      className="ep-trim-preview"
+      style={{
+        position: "fixed",
+        left: x + 12,
+        top: y - 40,
+      }}
+    >
+      <div className="ep-trim-preview-row">
+        <span className="ep-trim-preview-label">入点</span>
+        <span className="ep-trim-preview-value">{formatTrimTime(startTime)}</span>
+      </div>
+      <div className="ep-trim-preview-row">
+        <span className="ep-trim-preview-label">出点</span>
+        <span className="ep-trim-preview-value">{formatTrimTime(endTime)}</span>
+      </div>
+      <div className="ep-trim-preview-row ep-trim-preview-duration">
+        <span className="ep-trim-preview-label">时长</span>
+        <span className="ep-trim-preview-value">{formatTrimTime(duration)}</span>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,62 @@
+/**
+ * TTS 滑块组件（语速/语调/音量）
+ */
+import React from "react"
+import { Slider } from "antd"
+
+interface TtsSliderProps {
+  label: string
+  value: number
+  min: number
+  max: number
+  step: number
+  unit?: string
+  onChange: (val: number) => void
+  marks?: string[]
+  tooltipFormatter?: (v: number) => string
+}
+
+const TtsSlider: React.FC<TtsSliderProps> = ({
+  label,
+  value,
+  min,
+  max,
+  step,
+  unit = "",
+  onChange,
+  marks,
+  tooltipFormatter,
+}) => {
+  const displayValue =
+    unit === "x"
+      ? `${value.toFixed(2)}x`
+      : label === "语调"
+        ? `${value > 0 ? "+" : ""}${value} 半音`
+        : `${value}${unit}`
+
+  return (
+    <div className="tts-slider-section">
+      <div className="tts-slider-header">
+        <span className="tts-slider-label">{label}</span>
+        <span className="tts-slider-value">{displayValue}</span>
+      </div>
+      <Slider
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(v) => onChange(v as number)}
+        tooltip={tooltipFormatter ? { formatter: (v) => tooltipFormatter(v as number) } : false}
+      />
+      {marks && (
+        <div className="tts-slider-marks">
+          {marks.map((m, i) => (
+            <span key={i}>{m}</span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TtsSlider

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

@@ -0,0 +1,50 @@
+/**
+ * TTS 音色选择组件
+ */
+import React from "react"
+import type { TTSVoice } from "@/api/tts"
+import { VOICE_CATEGORY_MAP } from "../../constants/tts"
+
+interface VoiceSelectorProps {
+  voices: TTSVoice[]
+  voicesLoading: boolean
+  selectedVoiceId: string
+  onVoiceSelect: (voiceId: string) => void
+}
+
+const VoiceSelector: React.FC<VoiceSelectorProps> = ({
+  voices,
+  voicesLoading,
+  selectedVoiceId,
+  onVoiceSelect,
+}) => {
+  const voiceCategories = Object.entries(VOICE_CATEGORY_MAP)
+
+  return (
+    <div className="tts-voice-section">
+      <div className="tts-voice-label">
+        选择音色
+        {voicesLoading && <span className="tts-voice-loading">加载中...</span>}
+      </div>
+      <div className="tts-voice-grid">
+        {voiceCategories.map(([cat, info]) => {
+          const voice = voices.find((v) => v.category === cat)
+          const isSelected = voice && selectedVoiceId === voice.id
+          return (
+            <button
+              key={cat}
+              className={`tts-voice-card${isSelected ? " active" : ""}`}
+              onClick={() => voice && onVoiceSelect(voice.id)}
+              disabled={!voice || voicesLoading}
+            >
+              <span className="tts-voice-card-icon">{info.icon}</span>
+              <span className="tts-voice-card-name">{voice?.name || info.label}</span>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default VoiceSelector

apps/web/src/pages/editing-planner/components/watermark/ImageWatermarkSection.tsx

@@ -0,0 +1,78 @@
+/**
+ * 图片水印配置组件
+ */
+import React from "react"
+
+interface ImageWatermarkSectionProps {
+  imageUrl: string
+  localImageUrl: string
+  width: number | undefined
+  height: number | undefined
+  onImageUrlChange: (url: string) => void
+  onWidthChange: (val: number) => void
+  onHeightChange: (val: number) => void
+}
+
+const ImageWatermarkSection: React.FC<ImageWatermarkSectionProps> = ({
+  imageUrl,
+  localImageUrl,
+  width,
+  height,
+  onImageUrlChange,
+  onWidthChange,
+  onHeightChange,
+}) => {
+  const displayUrl = localImageUrl || imageUrl || ""
+
+  return (
+    <div className="wp-section">
+      <div className="wp-field">
+        <label className="wp-field-label">水印图片 URL</label>
+        <input
+          className="wp-input"
+          type="text"
+          placeholder="https://example.com/logo.png"
+          value={displayUrl}
+          onChange={(e) => onImageUrlChange(e.target.value)}
+        />
+        {displayUrl && (
+          <div className="wp-image-preview">
+            <img
+              src={displayUrl}
+              alt="水印预览"
+              onError={(e) => {
+                ;(e.target as HTMLImageElement).style.display = "none"
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="wp-field">
+        <label className="wp-field-label">宽度（像素，0 表示自适应）</label>
+        <input
+          className="wp-input"
+          type="number"
+          min={0}
+          max={2000}
+          value={width ?? 0}
+          onChange={(e) => onWidthChange(Number(e.target.value))}
+        />
+      </div>
+
+      <div className="wp-field">
+        <label className="wp-field-label">高度（像素，0 表示自适应）</label>
+        <input
+          className="wp-input"
+          type="number"
+          min={0}
+          max={2000}
+          value={height ?? 0}
+          onChange={(e) => onHeightChange(Number(e.target.value))}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ImageWatermarkSection

apps/web/src/pages/editing-planner/components/watermark/ScrollWatermarkSection.tsx

@@ -0,0 +1,107 @@
+/**
+ * 滚动水印配置组件
+ */
+import React from "react"
+import type { ScrollDirection } from "../../types"
+import { SCROLL_DIRECTION_OPTIONS } from "../../constants/watermark"
+
+interface ScrollWatermarkSectionProps {
+  text: string | undefined
+  scrollDirection: ScrollDirection | undefined
+  scrollSpeed: number | undefined
+  fontSize: number | undefined
+  color: string | undefined
+  onTextChange: (text: string) => void
+  onScrollDirectionChange: (dir: ScrollDirection) => void
+  onScrollSpeedChange: (speed: number) => void
+  onFontSizeChange: (size: number) => void
+  onColorChange: (color: string) => void
+}
+
+const ScrollWatermarkSection: React.FC<ScrollWatermarkSectionProps> = ({
+  text,
+  scrollDirection,
+  scrollSpeed,
+  fontSize,
+  color,
+  onTextChange,
+  onScrollDirectionChange,
+  onScrollSpeedChange,
+  onFontSizeChange,
+  onColorChange,
+}) => {
+  return (
+    <div className="wp-section">
+      <div className="wp-field">
+        <label className="wp-field-label">滚动文字</label>
+        <textarea
+          className="wp-textarea"
+          placeholder="输入滚动水印文字"
+          rows={2}
+          value={text ?? ""}
+          onChange={(e) => onTextChange(e.target.value)}
+        />
+      </div>
+
+      <div className="wp-field">
+        <label className="wp-field-label">滚动方向</label>
+        <select
+          className="wp-select"
+          value={scrollDirection ?? "horizontal"}
+          onChange={(e) => onScrollDirectionChange(e.target.value as ScrollDirection)}
+        >
+          {SCROLL_DIRECTION_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="wp-field">
+        <label className="wp-field-label">滚动速度</label>
+        <div className="wp-slider-row">
+          <input
+            className="wp-slider"
+            type="range"
+            min={10}
+            max={200}
+            value={scrollSpeed ?? 50}
+            onChange={(e) => onScrollSpeedChange(Number(e.target.value))}
+          />
+          <span className="wp-slider-value">{scrollSpeed ?? 50}px/s</span>
+        </div>
+      </div>
+
+      <div className="wp-field">
+        <label className="wp-field-label">字号</label>
+        <div className="wp-slider-row">
+          <input
+            className="wp-slider"
+            type="range"
+            min={12}
+            max={72}
+            value={fontSize ?? 24}
+            onChange={(e) => onFontSizeChange(Number(e.target.value))}
+          />
+          <span className="wp-slider-value">{fontSize ?? 24}px</span>
+        </div>
+      </div>
+
+      <div className="wp-field">
+        <label className="wp-field-label">文字颜色</label>
+        <div className="wp-color-row">
+          <input
+            className="wp-color-input"
+            type="color"
+            value={color ?? "#ffffff"}
+            onChange={(e) => onColorChange(e.target.value)}
+          />
+          <span className="wp-color-value">{color ?? "#ffffff"}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ScrollWatermarkSection

apps/web/src/pages/editing-planner/components/watermark/TextWatermarkSection.tsx

@@ -0,0 +1,67 @@
+/**
+ * 文字水印配置组件
+ */
+import React from "react"
+
+interface TextWatermarkSectionProps {
+  text: string | undefined
+  fontSize: number | undefined
+  color: string | undefined
+  onTextChange: (text: string) => void
+  onFontSizeChange: (size: number) => void
+  onColorChange: (color: string) => void
+}
+
+const TextWatermarkSection: React.FC<TextWatermarkSectionProps> = ({
+  text,
+  fontSize,
+  color,
+  onTextChange,
+  onFontSizeChange,
+  onColorChange,
+}) => {
+  return (
+    <div className="wp-section">
+      <div className="wp-field">
+        <label className="wp-field-label">水印文字</label>
+        <textarea
+          className="wp-textarea"
+          placeholder="输入水印文字内容"
+          rows={3}
+          value={text ?? ""}
+          onChange={(e) => onTextChange(e.target.value)}
+        />
+      </div>
+
+      <div className="wp-field">
+        <label className="wp-field-label">字号</label>
+        <div className="wp-slider-row">
+          <input
+            className="wp-slider"
+            type="range"
+            min={12}
+            max={72}
+            value={fontSize ?? 24}
+            onChange={(e) => onFontSizeChange(Number(e.target.value))}
+          />
+          <span className="wp-slider-value">{fontSize ?? 24}px</span>
+        </div>
+      </div>
+
+      <div className="wp-field">
+        <label className="wp-field-label">文字颜色</label>
+        <div className="wp-color-row">
+          <input
+            className="wp-color-input"
+            type="color"
+            value={color ?? "#ffffff"}
+            onChange={(e) => onColorChange(e.target.value)}
+          />
+          <span className="wp-color-value">{color ?? "#ffffff"}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TextWatermarkSection

apps/web/src/pages/editing-planner/components/watermark/WatermarkCommonSection.tsx

@@ -0,0 +1,60 @@
+/**
+ * 水印通用设置组件（位置 + 透明度）
+ */
+import React from "react"
+import type { WatermarkPosition } from "../../types"
+import { POSITION_OPTIONS } from "../../constants/watermark"
+
+interface WatermarkCommonSectionProps {
+  position: WatermarkPosition
+  opacity: number
+  onPositionChange: (pos: WatermarkPosition) => void
+  onOpacityChange: (opacity: number) => void
+}
+
+const WatermarkCommonSection: React.FC<WatermarkCommonSectionProps> = ({
+  position,
+  opacity,
+  onPositionChange,
+  onOpacityChange,
+}) => {
+  return (
+    <div className="wp-section wp-common-section">
+      <div className="wp-section-divider" />
+      <div className="wp-common-title">通用设置</div>
+
+      <div className="wp-field">
+        <label className="wp-field-label">水印位置</label>
+        <select
+          className="wp-select"
+          value={position}
+          onChange={(e) => onPositionChange(e.target.value as WatermarkPosition)}
+        >
+          {POSITION_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="wp-field">
+        <label className="wp-field-label">不透明度</label>
+        <div className="wp-slider-row">
+          <input
+            className="wp-slider"
+            type="range"
+            min={0}
+            max={1}
+            step={0.05}
+            value={opacity}
+            onChange={(e) => onOpacityChange(Number(e.target.value))}
+          />
+          <span className="wp-slider-value">{Math.round(opacity * 100)}%</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WatermarkCommonSection

apps/web/src/pages/editing-planner/components/watermark/WatermarkTypeTabs.tsx

@@ -0,0 +1,30 @@
+/**
+ * 水印类型 Tab 组件
+ */
+import React from "react"
+import type { WatermarkType } from "../../types"
+import { WATERMARK_TABS } from "../../constants/watermark"
+
+interface WatermarkTypeTabsProps {
+  activeTab: WatermarkType
+  onTypeChange: (type: WatermarkType) => void
+}
+
+const WatermarkTypeTabs: React.FC<WatermarkTypeTabsProps> = ({ activeTab, onTypeChange }) => {
+  return (
+    <div className="wp-tabs">
+      {WATERMARK_TABS.map((tab) => (
+        <button
+          key={tab.key}
+          className={`wp-tab${activeTab === tab.key ? " active" : ""}`}
+          onClick={() => onTypeChange(tab.key)}
+        >
+          <span className="wp-tab-icon">{tab.icon}</span>
+          <span className="wp-tab-label">{tab.label}</span>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default WatermarkTypeTabs

apps/web/src/pages/editing-planner/constants/clipProperties.ts

@@ -0,0 +1,34 @@
+/**
+ * ClipPropertiesPanel 常量定义
+ */
+import type { ClipType } from "@/pages/editing-planner/types"
+
+export const POSITION_OPTIONS = [
+  { value: "top", label: "顶部" },
+  { value: "center", label: "居中" },
+  { value: "bottom", label: "底部" },
+]
+
+export const FONT_OPTIONS = [
+  "思源黑体",
+  "思源宋体",
+  "苹方",
+  "PingFang",
+  "微软雅黑",
+  "楷体",
+  "华康俪金黑",
+]
+
+export const ANIMATION_OPTIONS = [
+  { value: "none", label: "无" },
+  { value: "fade", label: "淡入淡出" },
+  { value: "slide", label: "滑动" },
+  { value: "typewriter", label: "打字机" },
+]
+
+/** 片段类型图标/标签 */
+export const CLIP_TYPE_ICONS: Record<ClipType, string> = { voice: "🎙️", pip: "🖼️" }
+export const CLIP_TYPE_LABELS: Record<ClipType, string> = {
+  voice: "口播",
+  pip: "混剪",
+}

apps/web/src/pages/editing-planner/constants/filter.ts

@@ -0,0 +1,42 @@
+/**
+ * FilterPanel 相关常量
+ */
+import type { FilterPreset } from "../types"
+
+/** 所有预设列表 */
+export const PRESET_LIST: FilterPreset[] = [
+  "none",
+  "original",
+  "fresh",
+  "warm",
+  "cool",
+  "vintage",
+  "cinema",
+  "bw",
+  "sunshine",
+  "film",
+]
+
+/** 预设对应的示例渐变色（用于视觉预览） */
+export const PRESET_GRADIENTS: Record<FilterPreset, string> = {
+  none: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+  original: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+  fresh: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
+  warm: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
+  cool: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
+  vintage: "linear-gradient(135deg, #c79081 0%, #dfa579 100%)",
+  cinema: "linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%)",
+  bw: "linear-gradient(135deg, #434343 0%, #000000 100%)",
+  sunshine: "linear-gradient(135deg, #f6d365 0%, #fda085 100%)",
+  film: "linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%)",
+}
+
+/** 手动调节项配置 */
+export const MANUAL_ADJUST_ITEMS = [
+  { key: "brightness", label: "亮度", min: -100, max: 100 },
+  { key: "contrast", label: "对比度", min: -100, max: 100 },
+  { key: "saturation", label: "饱和度", min: -100, max: 100 },
+  { key: "temperature", label: "色温", min: -100, max: 100 },
+  { key: "tint", label: "色调", min: -100, max: 100 },
+  { key: "sharpness", label: "锐度", min: 0, max: 100 },
+] as const

apps/web/src/pages/editing-planner/constants/introOutro.ts

@@ -0,0 +1,10 @@
+/**
+ * IntroOutroPanel 相关常量
+ */
+import type { IntroOutroKind } from "../types"
+
+export const KIND_OPTIONS: { value: IntroOutroKind; label: string; icon: string }[] = [
+  { value: "none", label: "无", icon: "🚫" },
+  { value: "video", label: "视频", icon: "🎬" },
+  { value: "image", label: "图片", icon: "🖼️" },
+]

apps/web/src/pages/editing-planner/constants/pipConfig.ts

@@ -0,0 +1,55 @@
+/**
+ * PipConfigPanel 常量定义
+ */
+import type { PipGridPosition, PipAnimType, PipSlideDirection } from "@/pages/editing-planner/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)",
+]

apps/web/src/pages/editing-planner/constants/sticker.ts

@@ -0,0 +1,64 @@
+/**
+ * StickerPanel 常量定义
+ */
+import type { TextStickerPreset } from "@/pages/editing-planner/types"
+import { TEXT_STICKER_PRESET_LABELS } from "@/pages/editing-planner/types"
+
+export { TEXT_STICKER_PRESET_LABELS }
+
+/** 常用 emoji 素材 */
+export const EMOJI_LIST = [
+  "😀",
+  "😂",
+  "🥰",
+  "😎",
+  "🤩",
+  "😱",
+  "🤔",
+  "😴",
+  "🥳",
+  "😍",
+  "❤️",
+  "🔥",
+  "⭐",
+  "✨",
+  "💯",
+  "👍",
+  "👏",
+  "🎉",
+  "🎵",
+  "💪",
+  "📌",
+  "💡",
+  "🎯",
+  "✅",
+  "❌",
+  "⬆️",
+  "⬇️",
+  "➡️",
+  "⭕",
+  "🔔",
+]
+
+/** 贴纸类型 Tab */
+export const STICKER_TYPE_TABS = [
+  { value: "emoji" as const, label: "表情贴纸" },
+  { value: "image" as const, label: "图片贴纸" },
+  { value: "text" as const, label: "文字花字" },
+]
+
+/** 文字花字预设对应的 CSS 样式预览 */
+export const TEXT_PRESET_STYLES: Record<TextStickerPreset, React.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" },
+}

apps/web/src/pages/editing-planner/constants/subtitleStyle.ts

@@ -0,0 +1,30 @@
+/**
+ * SubtitleStylePanel 相关常量
+ */
+export const POSITION_OPTIONS = [
+  { value: "top", label: "顶部" },
+  { value: "center", label: "居中" },
+  { value: "bottom", label: "底部" },
+]
+
+export const FONT_OPTIONS = [
+  "思源黑体",
+  "思源宋体",
+  "苹方",
+  "PingFang",
+  "微软雅黑",
+  "楷体",
+  "华康俪金黑",
+]
+
+export const ANIMATION_OPTIONS = [
+  { value: "none", label: "无" },
+  { value: "fade", label: "淡入淡出" },
+  { value: "slide", label: "滑动" },
+  { value: "typewriter", label: "打字机" },
+]
+
+export const ASR_LANGUAGE_OPTIONS = [
+  { value: "zh", label: "中文" },
+  { value: "en", label: "English" },
+]

apps/web/src/pages/editing-planner/constants/timeline.ts

@@ -0,0 +1,56 @@
+import type { ClipType } from "../types"
+
+/** 片段类型图标 */
+export const CLIP_TYPE_ICONS: Record<ClipType, string> = {
+  voice: "🎙️",
+  pip: "🖼️",
+}
+
+/** 片段类型标签 */
+export const CLIP_TYPE_LABELS: Record<ClipType, string> = {
+  voice: "口播",
+  pip: "混剪",
+}
+
+/** 默认缩放：每秒像素数 */
+export const DEFAULT_PIXELS_PER_SECOND = 40
+
+/** 最小缩放 */
+export const MIN_PIXELS_PER_SECOND = 10
+
+/** 最大缩放 */
+export const MAX_PIXELS_PER_SECOND = 120
+
+/** 缩放步长 */
+export const ZOOM_STEP = 10
+
+/** 片段卡片最小宽度（px） */
+export const MIN_CLIP_WIDTH = 60
+
+/** 添加面板宽度（px） */
+export const ADD_PICKER_WIDTH = 240
+
+/** 轨道间距（px） */
+export const TRACK_GAP = 6
+
+/** 最小裁剪时长（秒） */
+export const MIN_TRIM_DURATION = 1
+
+/** 默认添加时长（秒） */
+export const DEFAULT_ADD_DURATION = 5
+
+/** 最小添加时长（秒） */
+export const MIN_ADD_DURATION = 1
+
+/** 最大添加时长（秒） */
+export const MAX_ADD_DURATION = 120
+
+/** 轨道最小宽度（px） */
+export const MIN_TRACK_WIDTH = 300
+
+/** 时间标尺刻度计算：根据总时长返回刻度步长（秒） */
+export const getRulerStep = (totalDuration: number): number => {
+  if (totalDuration <= 30) return 5
+  if (totalDuration <= 60) return 10
+  return 15
+}

apps/web/src/pages/editing-planner/constants/tts.ts

@@ -0,0 +1,19 @@
+/**
+ * TtsPanel 相关常量
+ */
+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/constants/watermark.ts

@@ -0,0 +1,25 @@
+/**
+ * WatermarkPanel 相关常量
+ */
+import type { WatermarkType, WatermarkPosition, ScrollDirection } from "../types"
+
+export const WATERMARK_TABS: { key: WatermarkType; label: string; icon: string }[] = [
+  { key: "none", label: "无水印", icon: "🚫" },
+  { key: "image", label: "图片水印", icon: "🖼️" },
+  { key: "text", label: "文字水印", icon: "📝" },
+  { key: "scroll", label: "滚动水印", icon: "📜" },
+]
+
+export const POSITION_OPTIONS: { value: WatermarkPosition; label: string }[] = [
+  { value: "top_left", label: "左上角" },
+  { value: "top_right", label: "右上角" },
+  { value: "bottom_left", label: "左下角" },
+  { value: "bottom_right", label: "右下角" },
+  { value: "center", label: "居中" },
+]
+
+export const SCROLL_DIRECTION_OPTIONS: { value: ScrollDirection; label: string }[] = [
+  { value: "horizontal", label: "水平滚动" },
+  { value: "vertical", label: "垂直滚动" },
+  { value: "diagonal", label: "对角滚动" },
+]

apps/web/src/pages/editing-planner/hooks/usePipLayers.ts

@@ -0,0 +1,129 @@
+/**
+ * 混剪图层管理 Hook
+ */
+import { useState, useCallback, useMemo } from "react"
+import type { PipConfig, PipLayer, PipGridPosition } from "@/pages/editing-planner/types"
+import { DEFAULT_PIP_LAYER, DEFAULT_PIP_CONFIG } from "@/pages/editing-planner/types"
+import { GRID_POSITION_MAP } from "@/pages/editing-planner/constants/pipConfig"
+
+let layerIdCounter = 0
+const genLayerId = () => `pip_layer_${Date.now()}_${++layerIdCounter}`
+
+interface UsePipLayersOptions {
+  config: PipConfig
+  onChange: (config: PipConfig) => void
+}
+
+export const usePipLayers = ({ config, onChange }: UsePipLayersOptions) => {
+  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) {
+        partial.height = val
+      }
+      updateLayer(selectedLayer.id, partial)
+    },
+    [selectedLayer, updateLayer],
+  )
+
+  const handleHeightChange = useCallback(
+    (val: number) => {
+      if (!selectedLayer) return
+      const partial: Partial<PipLayer> = { height: val }
+      if (selectedLayer.aspect_lock) {
+        partial.width = val
+      }
+      updateLayer(selectedLayer.id, partial)
+    },
+    [selectedLayer, updateLayer],
+  )
+
+  return {
+    selectedId,
+    setSelectedId,
+    selectedLayer,
+    handleAddLayer,
+    handleDeleteLayer,
+    updateLayer,
+    handleEnableToggle,
+    handleReset,
+    handleGridClick,
+    handleWidthChange,
+    handleHeightChange,
+  }
+}

apps/web/src/pages/editing-planner/hooks/useStickerItems.ts

@@ -0,0 +1,83 @@
+/**
+ * 贴纸项管理 Hook
+ */
+import { useState, useCallback } from "react"
+import type { StickerConfig, StickerItem, StickerType } from "@/pages/editing-planner/types"
+import { DEFAULT_STICKER_ITEM, DEFAULT_STICKER_CONFIG } from "@/pages/editing-planner/types"
+
+const genId = () => `sticker_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`
+
+interface UseStickerItemsOptions {
+  config: StickerConfig
+  onChange: (config: StickerConfig) => void
+  totalDuration: number
+}
+
+export const useStickerItems = ({ config, onChange, totalDuration }: UseStickerItemsOptions) => {
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<StickerType>("emoji")
+
+  const selectedSticker = config.items.find((s) => s.id === selectedId) ?? null
+
+  /** 更新单个贴纸 */
+  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: genId(),
+        type,
+        content,
+        duration: totalDuration > 0 ? totalDuration : 5,
+        z_index: config.items.length + 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,
+    activeTab,
+    setActiveTab,
+    selectedSticker,
+    updateItem,
+    addSticker,
+    removeSticker,
+    handleReset,
+  }
+}

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

@@ -0,0 +1,152 @@
+/**
+ * TTS 配音 Hook
+ * 管理音色加载、试听、配置变更
+ */
+import { useState, useCallback, useEffect, useRef } from "react"
+import { message } from "antd"
+import type { TtsConfig, TtsMode } from "../types"
+import { DEFAULT_TTS_CONFIG } from "../types"
+import { getTtsVoices, previewTts, type TTSVoice } from "@/api/tts"
+
+interface UseTtsPanelOptions {
+  open: boolean
+  config: TtsConfig
+  onChange: (config: TtsConfig) => void
+  onClose: () => void
+}
+
+export const useTtsPanel = ({ open, config, onChange, onClose }: UseTtsPanelOptions) => {
+  /* ── 音色列表 ── */
+  const [voices, setVoices] = useState<TTSVoice[]>([])
+  const [voicesLoading, setVoicesLoading] = useState(false)
+
+  /* ── 试听状态 ── */
+  const [previewLoading, setPreviewLoading] = useState(false)
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+
+  /* ── 加载音色列表 ── */
+  useEffect(() => {
+    if (!open) return
+    setVoicesLoading(true)
+    getTtsVoices()
+      .then((v) => setVoices(v))
+      .catch(() => message.error("加载音色列表失败"))
+      .finally(() => setVoicesLoading(false))
+  }, [open])
+
+  /* ── 切换配音模式 ── */
+  const handleModeChange = useCallback(
+    (mode: TtsMode) => {
+      onChange({ ...config, mode })
+    },
+    [config, onChange],
+  )
+
+  /* ── 文本输入 ── */
+  const handleTextChange = useCallback(
+    (text: string) => {
+      onChange({ ...config, text: text.slice(0, 5000) })
+    },
+    [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,
+      })
+      audioRef.current?.pause()
+      const audio = new Audio(res.audio_url)
+      audioRef.current = audio
+      audio.play().catch(() => message.error("播放失败"))
+      audio.onended = () => {
+        audioRef.current = null
+      }
+      message.success("试听播放中")
+    } catch {
+      message.error("试听生成失败")
+    } finally {
+      setPreviewLoading(false)
+    }
+  }, [config])
+
+  /* ── 重置 ── */
+  const handleReset = useCallback(() => {
+    onChange({ ...DEFAULT_TTS_CONFIG })
+  }, [onChange])
+
+  /* ── 关闭时停止音频 ── */
+  const handleClose = useCallback(() => {
+    audioRef.current?.pause()
+    audioRef.current = null
+    onClose()
+  }, [onClose])
+
+  return {
+    voices,
+    voicesLoading,
+    previewLoading,
+    handleModeChange,
+    handleTextChange,
+    handleVoiceSelect,
+    handleSpeedChange,
+    handlePitchChange,
+    handleVolumeChange,
+    handleSubtitleSyncToggle,
+    handlePreview,
+    handleReset,
+    handleClose,
+  }
+}
+
+export default useTtsPanel

apps/web/src/pages/editing-planner/hooks/useVoicePreview.ts

@@ -0,0 +1,42 @@
+/**
+ * 配音试听 Hook
+ */
+import { useRef, useState, useCallback } from "react"
+import type { AssetItem } from "@/api/assets"
+
+export const useVoicePreview = () => {
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const [previewingId, setPreviewingId] = useState<string | null>(null)
+
+  /** 试听配音素材 */
+  const handlePreviewVoice = useCallback(
+    (asset: AssetItem) => {
+      if (previewingId === asset.id) {
+        audioRef.current?.pause()
+        setPreviewingId(null)
+        return
+      }
+      audioRef.current?.pause()
+      const url = asset.file_url || (asset.metadata?.preview_url as string)
+      if (!url) return
+      const audio = new Audio(url)
+      audioRef.current = audio
+      audio.play().catch(() => {})
+      audio.onended = () => setPreviewingId(null)
+      setPreviewingId(asset.id)
+    },
+    [previewingId],
+  )
+
+  /** 停止试听 */
+  const stopPreview = useCallback(() => {
+    audioRef.current?.pause()
+    setPreviewingId(null)
+  }, [])
+
+  return {
+    previewingId,
+    handlePreviewVoice,
+    stopPreview,
+  }
+}

apps/web/src/pages/editing-planner/hooks/useWatermarkConfig.ts

@@ -0,0 +1,131 @@
+/**
+ * 水印配置 Hook
+ * 管理水印类型切换、各项配置变更
+ */
+import { useState, useCallback } from "react"
+import type {
+  WatermarkConfig,
+  WatermarkType,
+  WatermarkPosition,
+  ScrollDirection,
+} from "../types"
+import { DEFAULT_WATERMARK } from "../types"
+
+interface UseWatermarkConfigOptions {
+  config: WatermarkConfig
+  onChange: (config: WatermarkConfig) => void
+}
+
+export const useWatermarkConfig = ({ config, onChange }: UseWatermarkConfigOptions) => {
+  /* ── 图片上传预览 URL（本地预览用） ── */
+  const [localImageUrl, setLocalImageUrl] = useState<string>("")
+
+  /* ── 切换水印类型 ── */
+  const handleTypeChange = useCallback(
+    (type: WatermarkType) => {
+      setLocalImageUrl("")
+      onChange({ ...DEFAULT_WATERMARK, type })
+    },
+    [onChange],
+  )
+
+  /* ── 通用设置变更 ── */
+  const handlePositionChange = useCallback(
+    (position: WatermarkPosition) => {
+      onChange({ ...config, position })
+    },
+    [config, onChange],
+  )
+
+  const handleOpacityChange = useCallback(
+    (opacity: number) => {
+      onChange({ ...config, opacity })
+    },
+    [config, onChange],
+  )
+
+  /* ── 图片水印设置 ── */
+  const handleImageUrlChange = useCallback(
+    (url: string) => {
+      setLocalImageUrl(url)
+      onChange({ ...config, image_url: url })
+    },
+    [config, onChange],
+  )
+
+  const handleImageWidthChange = useCallback(
+    (width: number) => {
+      onChange({ ...config, width })
+    },
+    [config, onChange],
+  )
+
+  const handleImageHeightChange = useCallback(
+    (height: number) => {
+      onChange({ ...config, height })
+    },
+    [config, onChange],
+  )
+
+  /* ── 文字水印设置 ── */
+  const handleTextChange = useCallback(
+    (text: string) => {
+      onChange({ ...config, text })
+    },
+    [config, onChange],
+  )
+
+  const handleFontSizeChange = useCallback(
+    (font_size: number) => {
+      onChange({ ...config, font_size })
+    },
+    [config, onChange],
+  )
+
+  const handleColorChange = useCallback(
+    (color: string) => {
+      onChange({ ...config, color })
+    },
+    [config, onChange],
+  )
+
+  /* ── 滚动水印设置 ── */
+  const handleScrollDirectionChange = useCallback(
+    (scroll_direction: ScrollDirection) => {
+      onChange({ ...config, scroll_direction })
+    },
+    [config, onChange],
+  )
+
+  const handleScrollSpeedChange = useCallback(
+    (scroll_speed: number) => {
+      onChange({ ...config, scroll_speed })
+    },
+    [config, onChange],
+  )
+
+  /* ── 重置 ── */
+  const handleReset = useCallback(() => {
+    setLocalImageUrl("")
+    onChange({ ...DEFAULT_WATERMARK })
+  }, [onChange])
+
+  return {
+    localImageUrl,
+    activeTab: config.type,
+    handleTypeChange,
+    handlePositionChange,
+    handleOpacityChange,
+    handleImageUrlChange,
+    handleImageWidthChange,
+    handleImageHeightChange,
+    handleTextChange,
+    handleFontSizeChange,
+    handleColorChange,
+    handleScrollDirectionChange,
+    handleScrollSpeedChange,
+    handleReset,
+  }
+}
+
+export default useWatermarkConfig

apps/web/src/pages/editing-planner/types/clipProperties.ts

@@ -0,0 +1,71 @@
+/**
+ * ClipPropertiesPanel 相关类型定义
+ */
+import type { ClipData, ClipType } from "@/pages/editing-planner/types"
+import type { TemplateMode } from "@/api/editing-planner"
+import type { AssetItem } from "@/api/assets"
+
+export interface SubtitleSettings {
+  enabled: boolean
+  position: string
+  font: string
+  fontSize: number
+  fontColor: string
+  animation: string
+  mode?: string
+  stroke?: boolean
+  shadow?: boolean
+  asrLanguage?: string
+}
+
+export interface BgmSettings {
+  enabled: boolean
+  music_id: string
+  volume?: number
+  fade_in?: number
+  fade_out?: number
+  voice_dodge?: boolean
+}
+
+export interface ClipPropertiesPanelProps {
+  selectedClip: ClipData | null
+  subtitleSettings: SubtitleSettings
+  bgmSettings: BgmSettings
+  clipsCount: number
+  totalDuration: number
+  currentMode: TemplateMode
+  onSubtitleSettingsChange: (partial: Partial<SubtitleSettings>) => void
+  onBgmSettingsChange: (partial: Partial<BgmSettings>) => void
+  onClipUpdate: (clipId: string, data: Partial<ClipData>) => void
+  /** 打开 BGM 选择器 Drawer */
+  onOpenBgmDrawer?: () => void
+  /** 打开字幕样式配置 Drawer */
+  onOpenSubtitleDrawer?: () => void
+  /** 配音素材列表（从配音库 API 获取） */
+  voiceMaterials?: AssetItem[]
+  /** 配音素材加载中 */
+  voiceMaterialsLoading?: boolean
+  /** 刷新配音素材列表 */
+  onRefreshVoiceMaterials?: () => void
+  /** 为片段选择配音素材 */
+  onClipVoiceSelect?: (clipId: string, asset: AssetItem | null) => void
+  /** 打开转场特效选择器 Drawer */
+  onOpenTransitionDrawer?: (clipId: string) => void
+  /** 打开片段调速面板 Drawer */
+  onOpenSpeedDrawer?: (clipId: string) => void
+  /** 打开 TTS 配音面板 Drawer */
+  onOpenTtsDrawer?: (clipId: string) => void
+  /** 打开水印设置面板 Drawer */
+  onOpenWatermarkDrawer?: () => void
+  /** 打开片头片尾设置面板 Drawer */
+  onOpenIntroOutroDrawer?: () => void
+  /** 打开混剪设置面板 Drawer */
+  onOpenPipDrawer?: () => void
+  /** 打开滤镜调色面板 Drawer */
+  onOpenFilterDrawer?: () => void
+  /** 打开绿幕抠像面板 Drawer */
+  onOpenGreenScreenDrawer?: () => void
+  /** 打开贴纸面板 Drawer */
+  onOpenStickerDrawer?: () => void
+  /** 打开封面选择器 Drawer */
+}

apps/web/src/pages/editing-planner/utils/clipProperties.ts

@@ -0,0 +1,21 @@
+/**
+ * ClipPropertiesPanel 工具函数
+ */
+import type { AssetItem } from "@/api/assets"
+import type { TemplateMode } from "@/api/editing-planner"
+
+/** 从 metadata 取性别标签 */
+export const getGenderLabel = (m: AssetItem): string => {
+  const g = (m.metadata?.gender as string) || ""
+  if (g === "male") return "男"
+  if (g === "female") return "女"
+  return ""
+}
+
+/** 格式化模式标签 */
+export const formatModeLabel = (mode: TemplateMode): string => {
+  if (mode === "pip") return "混剪"
+  if (mode === "voice_over") return "人物口播"
+  if (mode === "one_take") return "一镜到底"
+  return "口播+混剪"
+}

apps/web/src/pages/editing-planner/utils/timeline.ts

@@ -0,0 +1,20 @@
+/** 格式化时间为 mm:ss */
+export const formatTime = (sec: number): string => {
+  const m = Math.floor(sec / 60)
+  const s = Math.floor(sec % 60)
+  return `${m}:${s.toString().padStart(2, "0")}`
+}
+
+/** 格式化裁剪时间（精确到 0.1 秒） */
+export const formatTrimTime = (sec: number): string => {
+  return `${sec.toFixed(1)}s`
+}
+
+/** 生成时间标尺刻度 */
+export const generateRulerMarks = (totalDuration: number, step: number): number[] => {
+  const marks: number[] = []
+  for (let t = 0; t <= totalDuration + step; t += step) {
+    marks.push(t)
+  }
+  return marks
+}

apps/web/src/pages/products/ProductLibrary.tsx

@@ -250,10 +250,7 @@ const ProductLibrary: React.FC = () => {
             value={filterProject}
             onChange={setFilterProject}
             style={{ width: 140 }}
-            options={[
-              { value: "all", label: "全部项目" },
-              ...projectOptions,
-            ]}
+            options={[{ value: "all", label: "全部项目" }, ...projectOptions]}
           />
           <Select
             value={filterReviewStatus}

apps/web/src/test/pages/editing-planner/smoke.test.tsx

@@ -10,9 +10,20 @@ import "@/pages/editing-planner/EditingPlanner"
 
 // 常量
 import "@/pages/editing-planner/constants"
+import "@/pages/editing-planner/constants/timeline"
+import "@/pages/editing-planner/constants/clipProperties"
+import "@/pages/editing-planner/constants/pipConfig"
+import "@/pages/editing-planner/constants/sticker"
+import "@/pages/editing-planner/constants/filter"
+import "@/pages/editing-planner/constants/introOutro"
+import "@/pages/editing-planner/constants/subtitleStyle"
+import "@/pages/editing-planner/constants/tts"
+import "@/pages/editing-planner/constants/watermark"
 
 // 工具函数
 import "@/pages/editing-planner/utils/selectors"
+import "@/pages/editing-planner/utils/timeline"
+import "@/pages/editing-planner/utils/clipProperties"
 
 // 子组件
 import "@/pages/editing-planner/components/BgmSelector"
@@ -36,6 +47,31 @@ import "@/pages/editing-planner/components/StatusBar"
 import "@/pages/editing-planner/components/StickerPanel"
 import "@/pages/editing-planner/components/SubtitleStylePanel"
 import "@/pages/editing-planner/components/TimelinePanel"
+import "@/pages/editing-planner/components/timeline/ClipCard"
+import "@/pages/editing-planner/components/timeline/TimeRuler"
+import "@/pages/editing-planner/components/timeline/AddClipPicker"
+import "@/pages/editing-planner/components/timeline/TrimPreview"
+import "@/pages/editing-planner/components/timeline/ContextMenu"
+import "@/pages/editing-planner/components/clip-properties/SubtitleSettingsSection"
+import "@/pages/editing-planner/components/clip-properties/BgmSettingsSection"
+import "@/pages/editing-planner/components/clip-properties/ClipDetailSection"
+import "@/pages/editing-planner/components/clip-properties/StatsSection"
+import "@/pages/editing-planner/components/pip-config/LayerList"
+import "@/pages/editing-planner/components/pip-config/LayerConfig"
+import "@/pages/editing-planner/components/sticker/StickerLibrary"
+import "@/pages/editing-planner/components/sticker/StickerList"
+import "@/pages/editing-planner/components/sticker/StickerPropsEditor"
+import "@/pages/editing-planner/components/filter/FilterPresetGrid"
+import "@/pages/editing-planner/components/filter/FilterManualAdjust"
+import "@/pages/editing-planner/components/intro-outro/IntroOutroBlock"
+import "@/pages/editing-planner/components/subtitle-style/SubtitlePreview"
+import "@/pages/editing-planner/components/tts/VoiceSelector"
+import "@/pages/editing-planner/components/tts/TtsSlider"
+import "@/pages/editing-planner/components/watermark/WatermarkTypeTabs"
+import "@/pages/editing-planner/components/watermark/ImageWatermarkSection"
+import "@/pages/editing-planner/components/watermark/TextWatermarkSection"
+import "@/pages/editing-planner/components/watermark/ScrollWatermarkSection"
+import "@/pages/editing-planner/components/watermark/WatermarkCommonSection"
 import "@/pages/editing-planner/components/TopBar"
 import "@/pages/editing-planner/components/TransitionSelector"
 import "@/pages/editing-planner/components/TtsPanel"
@@ -44,6 +80,7 @@ import "@/pages/editing-planner/components/WatermarkPanel"
 // 类型
 import "@/pages/editing-planner/types"
 import "@/pages/editing-planner/types/subtitle"
+import "@/pages/editing-planner/types/clipProperties"
 
 // Hooks
 import "@/pages/editing-planner/hooks/useUndoRedo"
@@ -52,6 +89,11 @@ import "@/pages/editing-planner/hooks/useEditorDrawers"
 import "@/pages/editing-planner/hooks/usePlaybackControl"
 import "@/pages/editing-planner/hooks/useClipOperations"
 import "@/pages/editing-planner/hooks/useTemplateManagement"
+import "@/pages/editing-planner/hooks/useVoicePreview"
+import "@/pages/editing-planner/hooks/usePipLayers"
+import "@/pages/editing-planner/hooks/useStickerItems"
+import "@/pages/editing-planner/hooks/useTtsPanel"
+import "@/pages/editing-planner/hooks/useWatermarkConfig"
 
 describe("EditingPlanner module smoke test", () => {
   it("should load all editing-planner modules", () => {

packages/shared/ai_service.py

@@ -6,6 +6,7 @@ API 层和 Worker 层都从此模块导入，避免 API 直接依赖 Worker 代
 
 from __future__ import annotations
 
+import copy
 import json
 import logging
 import random
@@ -87,7 +88,7 @@ def _fallback_recommend_clips(
     order += 1
 
     # 生成推荐 config
-    config = DEFAULT_EDIT_PLAN_CONFIG.copy()
+    config = copy.deepcopy(DEFAULT_EDIT_PLAN_CONFIG)
     config["title"]["text"] = f"精选视频 — {len(asset_ids)} 个片段"
     config["title"]["ai_auto"] = True
 
@@ -167,7 +168,7 @@ def _parse_recommend_response(
         for i, clip in enumerate(clips):
             clip["order"] = i
 
-        config = DEFAULT_EDIT_PLAN_CONFIG.copy()
+        config = copy.deepcopy(DEFAULT_EDIT_PLAN_CONFIG)
         title = data.get("title", "")
         if title:
             config["title"]["text"] = str(title)

scripts/ci/run_unit_tests.sh

@@ -45,6 +45,9 @@ for i in 1 2 3; do
 done
 pytest --version
 
+# --- 安装 ffmpeg（视频处理相关测试依赖）---
+bash scripts/ci/step_install_ffmpeg.sh
+
 # 双保险：确保numpy已安装
 python3 -m pip install -q numpy==1.26.4 || true
 

scripts/ci/validate_code_quality.sh

@@ -56,95 +56,18 @@ for fpath, items in data.get('results', {}).items():
 fi
 echo "✅ Secret scan passed"
 
-# --- 增量/全量模式判断 ---
+# --- 代码质量检查（全量，PR 和 push 统一标准）---
+# 历史：PR 侧用增量检查以加速，但会导致 push 侧全量检查失败时 PR 侧感知不到
+# 现在统一全量检查，确保 CI 真正保护主分支（black/isort/ruff 全量仅多几十秒）
 echo ""
-echo "=== [2/6] Code quality checks ==="
+echo "=== [2/6] Code quality checks (full scan) ==="
 SCAN_MODE="full"
-CHANGED_PY_FILES=""
+echo "Full scan mode"
+python3 -m compileall -q alembic apps packages tests scripts
+python3 -m black --check --fast alembic apps packages tests scripts
+python3 -m isort --check-only alembic apps packages tests scripts
+python3 -m ruff check apps packages tests --statistics
 
-if [ "${GITHUB_EVENT_NAME:-}" = "pull_request" ] && [ -n "${GITHUB_REF_NAME:-}" ] && [ -n "${GITHUB_TOKEN:-}" ]; then
-  PR_NUMBER=$(echo "$GITHUB_REF" | sed 's|refs/pull/||; s|/.*||')
-  API_URL="${GITHUB_API_URL}/repos/${GITHUB_REPOSITORY}/pulls/${PR_NUMBER}/files?limit=100"
-  set +e
-  RESPONSE=$(curl -s -w "\n%{http_code}" -H "Authorization: token ${GITHUB_TOKEN}" "$API_URL")
-  HTTP_CODE=$(echo "$RESPONSE" | tail -n1)
-  BODY=$(echo "$RESPONSE" | sed '$d')
-  set -e
-  if [ "$HTTP_CODE" = "200" ]; then
-    CHANGED_PY_FILES=$(echo "$BODY" | python3 -c "
-import json, sys
-try:
-    files = json.load(sys.stdin)
-    py_files = [f['filename'] for f in files if f['filename'].endswith('.py') and f['status'] != 'removed']
-    print(' '.join(py_files))
-except Exception:
-    print('')
-")
-    # 新增文件(added)强制全量检查，防止增量漏检
-    ADDED_PY_FILES=$(echo "$BODY" | python3 -c "
-import json, sys
-try:
-    files = json.load(sys.stdin)
-    added = [f['filename'] for f in files if f['filename'].endswith('.py') and f['status'] == 'added']
-    print(' '.join(added))
-except Exception:
-    print('')
-")
-    MODIFIED_PY_FILES=$(echo "$BODY" | python3 -c "
-import json, sys
-try:
-    files = json.load(sys.stdin)
-    modified = [f['filename'] for f in files if f['filename'].endswith('.py') and f['status'] not in ('removed', 'added')]
-    print(' '.join(modified))
-except Exception:
-    print('')
-")
-    if [ -n "$CHANGED_PY_FILES" ]; then
-      SCAN_MODE="incremental"
-      echo "Incremental mode: $(echo "$CHANGED_PY_FILES" | wc -w) Python files changed"
-    else
-      SCAN_MODE="skip_py"
-      echo "No Python files changed in this PR"
-    fi
-  else
-    echo "WARN: API returned HTTP $HTTP_CODE, falling back to full scan"
-  fi
-else
-  echo "Full scan mode (not a PR event)"
-fi
-
-if [ "$SCAN_MODE" = "incremental" ]; then
-  # 防御性过滤
-  EXISTING_PY_FILES=""
-  for f in $CHANGED_PY_FILES; do
-    if [ -f "$f" ]; then
-      if [ -z "$EXISTING_PY_FILES" ]; then
-        EXISTING_PY_FILES="$f"
-      else
-        EXISTING_PY_FILES="$EXISTING_PY_FILES $f"
-      fi
-    fi
-  done
-  CHANGED_PY_FILES="$EXISTING_PY_FILES"
-
-  python3 -m compileall -q $CHANGED_PY_FILES
-  python3 -m black --check --fast $CHANGED_PY_FILES
-  python3 -m isort --check-only $CHANGED_PY_FILES
-  RUFF_FILES=$(echo "$CHANGED_PY_FILES" | tr ' ' '\n' | grep -v '^scripts/' | grep -v '^$' | xargs)
-  if [ -n "$RUFF_FILES" ]; then
-    python3 -m ruff check $RUFF_FILES --statistics
-  else
-    echo "No ruff-checkable files changed, skipping"
-  fi
-elif [ "$SCAN_MODE" = "skip_py" ]; then
-  echo "No Python files changed - skipping Python lint checks"
-else
-  echo "Full scan mode"
-  python3 -m compileall -q alembic apps packages tests scripts
-  python3 -m black --check --fast alembic apps packages tests scripts
-  python3 -m isort --check-only alembic apps packages tests scripts
-  python3 -m ruff check apps packages tests --statistics
-fi
 echo "✅ Code quality checks passed"
 
 # --- Bandit 安全扫描（仅告警） ---

tests/unit/test_bgm_utils.py

@@ -11,8 +11,7 @@ class TestMergeBgmConfigBothEmpty:
     def test_both_empty(self):
         result = merge_bgm_config({}, {})
         assert result == {}
-        # 确保返回的是新字典，不是同一个引用
-        assert result is not {}
+        # 返回新字典（值已通过 == 验证，is not {} 无实际意义（每次{}每次新建对象）
 
     def test_user_none_returns_template_copy(self):
         """用户传 None 视为空配置，返回模板副本。"""

tests/unit/test_classification_domain.py

@@ -245,7 +245,7 @@ class TestClassificationJobState:
         assert job.confidence == 1.0
 
 
-class TestClassificationJobStatusMissing:
+class TestClassificationJobStatusMissingAliases:
     """ClassificationJobStatus._missing_ 兼容行为测试"""
 
     def test_done_maps_to_completed(self):

tests/unit/test_cover_generator_pure.py

@@ -0,0 +1,539 @@
+"""CoverGenerator 纯逻辑单测 — 时间钳制 + 智能选帧算法.
+
+通过 mock run_ffmpeg 和 probe_video_info 验证纯逻辑部分，
+不实际执行 FFmpeg，确保测试轻量快速。
+"""
+
+from __future__ import annotations
+
+from pathlib import Path
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+from video_processing.cover_generator import (
+    CoverGenerator,
+    DEFAULT_COVER_HEIGHT,
+    DEFAULT_COVER_QUALITY,
+    DEFAULT_COVER_TIME,
+    DEFAULT_COVER_WIDTH,
+    SMART_COVER_FRAME_COUNT,
+)
+
+
+class TestCoverGeneratorConstants:
+    """常量默认值测试."""
+
+    def test_default_cover_time(self):
+        """默认抽帧时间为 1.0 秒."""
+        assert DEFAULT_COVER_TIME == 1.0
+
+    def test_default_dimensions(self):
+        """默认封面尺寸 1080x1920 (竖屏)."""
+        assert DEFAULT_COVER_WIDTH == 1080
+        assert DEFAULT_COVER_HEIGHT == 1920
+
+    def test_default_quality(self):
+        """默认质量为 5 (JPEG q:v, 越小越好)."""
+        assert DEFAULT_COVER_QUALITY == 5
+
+    def test_smart_cover_frame_count(self):
+        """智能封面默认抽 3 帧."""
+        assert SMART_COVER_FRAME_COUNT == 3
+
+
+class TestExtractFrameCommand:
+    """extract_frame 命令构建测试."""
+
+    def _probe_video_info_mock(self, duration=10.0):
+        """创建 probe_video_info 的 mock."""
+        return {"duration": duration, "width": 1920, "height": 1080, "fps": 25.0}
+
+    def test_default_params_command(self, tmp_path):
+        """默认参数下 FFmpeg 命令正确."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value=self._probe_video_info_mock(),
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+            # 让 output_path 在 run_ffmpeg 后存在
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            result = CoverGenerator.extract_frame(str(video_file), str(output_file))
+
+        assert result == Path(output_file)
+        mock_run.assert_called_once()
+        cmd = mock_run.call_args[0][0]
+
+        # 基本结构
+        assert cmd[0].endswith("ffmpeg") or "ffmpeg" in cmd[0]
+        assert "-y" in cmd
+        assert "-vframes" in cmd
+        assert cmd[cmd.index("-vframes") + 1] == "1"
+        assert "-f" in cmd
+        assert "mjpeg" in cmd[cmd.index("-f") + 1]
+
+        # 时间点
+        ss_idx = cmd.index("-ss")
+        assert float(cmd[ss_idx + 1]) == pytest.approx(DEFAULT_COVER_TIME, abs=0.001)
+
+        # 输入文件
+        i_idx = cmd.index("-i")
+        assert cmd[i_idx + 1] == str(video_file)
+
+        # 输出文件
+        assert cmd[-1] == str(output_file)
+
+        # scale + crop 滤镜
+        vf_idx = cmd.index("-vf")
+        vf_value = cmd[vf_idx + 1]
+        assert "scale=" in vf_value
+        assert "crop=" in vf_value
+        assert "force_original_aspect_ratio=increase" in vf_value
+
+    def test_custom_time(self, tmp_path):
+        """自定义抽帧时间点."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value=self._probe_video_info_mock(duration=30.0),
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.extract_frame(str(video_file), str(output_file), time_sec=5.5)
+
+        cmd = mock_run.call_args[0][0]
+        ss_idx = cmd.index("-ss")
+        assert float(cmd[ss_idx + 1]) == pytest.approx(5.5, abs=0.001)
+
+    def test_custom_dimensions(self, tmp_path):
+        """自定义输出尺寸."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value=self._probe_video_info_mock(),
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.extract_frame(str(video_file), str(output_file), width=1920, height=1080)
+
+        cmd = mock_run.call_args[0][0]
+        vf_idx = cmd.index("-vf")
+        vf_value = cmd[vf_idx + 1]
+        assert "scale=1920:1080:" in vf_value
+        assert "crop=1920:1080" in vf_value
+
+    def test_custom_quality(self, tmp_path):
+        """自定义 JPEG 质量."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value=self._probe_video_info_mock(),
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.extract_frame(str(video_file), str(output_file), quality=2)
+
+        cmd = mock_run.call_args[0][0]
+        q_idx = cmd.index("-q:v")
+        assert cmd[q_idx + 1] == "2"
+
+    def test_time_exceeds_duration_clamps_to_midpoint(self, tmp_path):
+        """抽帧时间超过视频时长时，钳制到中间帧."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value=self._probe_video_info_mock(duration=5.0),
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.extract_frame(str(video_file), str(output_file), time_sec=10.0)
+
+        cmd = mock_run.call_args[0][0]
+        ss_idx = cmd.index("-ss")
+        # 钳制到 duration/2 = 2.5
+        assert float(cmd[ss_idx + 1]) == pytest.approx(2.5, abs=0.001)
+
+    def test_negative_time_clamps_to_zero(self, tmp_path):
+        """负时间钳制到 0."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value=self._probe_video_info_mock(duration=10.0),
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.extract_frame(str(video_file), str(output_file), time_sec=-2.0)
+
+        cmd = mock_run.call_args[0][0]
+        ss_idx = cmd.index("-ss")
+        assert float(cmd[ss_idx + 1]) == pytest.approx(0.0, abs=0.001)
+
+    def test_time_equals_duration_clamps_to_midpoint(self, tmp_path):
+        """时间点等于时长时钳制到中间帧."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value=self._probe_video_info_mock(duration=10.0),
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.extract_frame(str(video_file), str(output_file), time_sec=10.0)
+
+        cmd = mock_run.call_args[0][0]
+        ss_idx = cmd.index("-ss")
+        assert float(cmd[ss_idx + 1]) == pytest.approx(5.0, abs=0.001)
+
+    def test_zero_duration_video(self, tmp_path):
+        """视频时长为 0 时的行为（不钳制，用原始时间）."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value=self._probe_video_info_mock(duration=0.0),
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.extract_frame(str(video_file), str(output_file), time_sec=0.5)
+
+        cmd = mock_run.call_args[0][0]
+        ss_idx = cmd.index("-ss")
+        assert float(cmd[ss_idx + 1]) == pytest.approx(0.5, abs=0.001)
+
+    def test_video_not_found_raises(self, tmp_path):
+        """视频文件不存在时抛出 FileNotFoundError."""
+        output_file = tmp_path / "cover.jpg"
+
+        with pytest.raises(FileNotFoundError):
+            CoverGenerator.extract_frame(str(tmp_path / "nonexistent.mp4"), str(output_file))
+
+    def test_output_creates_parent_dir(self, tmp_path):
+        """输出目录不存在时自动创建."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        out_dir = tmp_path / "deep" / "nested"
+        output_file = out_dir / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value=self._probe_video_info_mock(),
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.extract_frame(str(video_file), str(output_file))
+
+        assert out_dir.exists()
+        assert out_dir.is_dir()
+
+    def test_ffmpeg_failure_propagates(self, tmp_path):
+        """FFmpeg 失败时异常向上传递."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value=self._probe_video_info_mock(),
+            ),
+            patch(
+                "video_processing.cover_generator.run_ffmpeg",
+                side_effect=RuntimeError("FFmpeg error"),
+            ),
+        ):
+            with pytest.raises(RuntimeError, match="FFmpeg error"):
+                CoverGenerator.extract_frame(str(video_file), str(output_file))
+
+
+class TestSmartCoverTimePoints:
+    """智能封面时间点计算测试."""
+
+    def test_single_frame_falls_back_to_default(self, tmp_path):
+        """只有 1 帧时退化为普通抽帧（取 DEFAULT_COVER_TIME 和 midpoint 中较小值）."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value={"duration": 20.0},
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            # frame_count=1 时退化为普通抽帧
+            CoverGenerator.extract_smart_cover(str(video_file), str(output_file), frame_count=1)
+
+        # 只调用一次（退化路径）
+        assert mock_run.call_count == 1
+        cmd = mock_run.call_args[0][0]
+        ss_idx = cmd.index("-ss")
+        # min(DEFAULT_COVER_TIME=1.0, duration/2=10.0) = 1.0
+        assert float(cmd[ss_idx + 1]) == pytest.approx(1.0, abs=0.001)
+
+    def test_zero_duration_falls_back(self, tmp_path):
+        """视频时长为 0 时退化为普通抽帧."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value={"duration": 0.0},
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.extract_smart_cover(str(video_file), str(output_file))
+
+        # 只调用一次（退化路径）
+        assert mock_run.call_count == 1
+
+    def test_three_frames_uniform_distribution(self, tmp_path):
+        """3 帧均匀分布在 5%~95% 区间."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        call_times = []
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value={"duration": 100.0},
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                # 记录抽帧时间
+                ss_idx = cmd.index("-ss")
+                call_times.append(float(cmd[ss_idx + 1]))
+                # 在输出路径写文件
+                output_arg = cmd[-1]
+                Path(output_arg).parent.mkdir(parents=True, exist_ok=True)
+                # 不同文件大小，让第三帧"最清晰"
+                idx = len(call_times) - 1
+                size = 1000 * (idx + 1)  # 递增的文件大小
+                Path(output_arg).write_bytes(b"x" * size)
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.extract_smart_cover(str(video_file), str(output_file))
+
+        # 3 帧：5%、50%、95%
+        assert len(call_times) == 3
+        assert call_times[0] == pytest.approx(5.0, abs=0.1)  # 5%
+        assert call_times[1] == pytest.approx(50.0, abs=0.1)  # 50%
+        assert call_times[2] == pytest.approx(95.0, abs=0.1)  # 95%
+
+    def test_five_frames_distribution(self, tmp_path):
+        """5 帧均匀分布."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        call_times = []
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value={"duration": 100.0},
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+
+            def fake_run(cmd):
+                ss_idx = cmd.index("-ss")
+                call_times.append(float(cmd[ss_idx + 1]))
+                output_arg = cmd[-1]
+                Path(output_arg).parent.mkdir(parents=True, exist_ok=True)
+                idx = len(call_times) - 1
+                Path(output_arg).write_bytes(b"x" * (1000 * (idx + 1)))
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.extract_smart_cover(str(video_file), str(output_file), frame_count=5)
+
+        assert len(call_times) == 5
+        # step = (95-5) / (5-1) = 22.5
+        # times: 5, 27.5, 50, 72.5, 95
+        assert call_times[0] == pytest.approx(5.0, abs=0.1)
+        assert call_times[1] == pytest.approx(27.5, abs=0.1)
+        assert call_times[2] == pytest.approx(50.0, abs=0.1)
+        assert call_times[3] == pytest.approx(72.5, abs=0.1)
+        assert call_times[4] == pytest.approx(95.0, abs=0.1)
+
+    def test_selects_largest_file_as_best(self, tmp_path):
+        """选择文件最大的帧作为最佳封面（清晰度近似）."""
+        video_file = tmp_path / "test.mp4"
+        video_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        sizes = [5000, 15000, 8000]  # 第二帧最大
+
+        with (
+            patch(
+                "video_processing.cover_generator.probe_video_info",
+                return_value={"duration": 100.0},
+            ),
+            patch("video_processing.cover_generator.run_ffmpeg") as mock_run,
+        ):
+            call_idx = [0]
+
+            def fake_run(cmd):
+                output_arg = cmd[-1]
+                Path(output_arg).parent.mkdir(parents=True, exist_ok=True)
+                idx = call_idx[0]
+                Path(output_arg).write_bytes(b"x" * sizes[idx])
+                call_idx[0] += 1
+
+            mock_run.side_effect = fake_run
+            result = CoverGenerator.extract_smart_cover(str(video_file), str(output_file))
+
+        # 第二帧（索引1）应该是最佳
+        assert result == output_file
+        # 输出文件大小应等于第二帧大小
+        assert output_file.stat().st_size == 15000
+
+
+class TestProcessCustomCover:
+    """自定义封面处理测试."""
+
+    def test_custom_cover_resize_command(self, tmp_path):
+        """自定义封面调整尺寸命令正确."""
+        input_file = tmp_path / "upload.jpg"
+        input_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with patch("video_processing.cover_generator.run_ffmpeg") as mock_run:
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.process_custom_cover(str(input_file), str(output_file))
+
+        mock_run.assert_called_once()
+        cmd = mock_run.call_args[0][0]
+
+        assert "-i" in cmd
+        assert cmd[cmd.index("-i") + 1] == str(input_file)
+        assert cmd[-1] == str(output_file)
+
+        # scale + crop
+        vf_idx = cmd.index("-vf")
+        vf_value = cmd[vf_idx + 1]
+        assert "scale=" in vf_value
+        assert "crop=" in vf_value
+
+    def test_custom_cover_not_found_raises(self, tmp_path):
+        """自定义封面文件不存在时抛出 FileNotFoundError."""
+        output_file = tmp_path / "cover.jpg"
+
+        with pytest.raises(FileNotFoundError):
+            CoverGenerator.process_custom_cover(str(tmp_path / "nonexistent.jpg"), str(output_file))
+
+    def test_custom_cover_custom_dimensions(self, tmp_path):
+        """自定义封面自定义输出尺寸."""
+        input_file = tmp_path / "upload.jpg"
+        input_file.write_bytes(b"fake")
+        output_file = tmp_path / "cover.jpg"
+
+        with patch("video_processing.cover_generator.run_ffmpeg") as mock_run:
+
+            def fake_run(cmd):
+                output_file.write_bytes(b"fake jpg")
+
+            mock_run.side_effect = fake_run
+            CoverGenerator.process_custom_cover(str(input_file), str(output_file), width=800, height=600)
+
+        cmd = mock_run.call_args[0][0]
+        vf_idx = cmd.index("-vf")
+        vf_value = cmd[vf_idx + 1]
+        assert "scale=800:600:" in vf_value
+        assert "crop=800:600" in vf_value

tests/unit/test_dedup_pure.py

@@ -8,13 +8,9 @@ from unittest.mock import MagicMock
 import numpy as np
 import pytest
 
-# 模块级mock有副作用的依赖（纯算法测试不需要db/celery/cv2）
-# 注意：必须在 import dedup 前全部 mock 完，避免链式导入触发db连接
-# ⚠️ 只 mock 具体叶子模块，绝不 mock 整个父包，否则会污染其他测试文件的导入
-
 
 def _mock_module(**attrs):
-    """创建带 __spec__ 的 mock 模块，避免导入系统 AttributeError: __spec__"""
+    """Create a mock module with __spec__ to avoid AttributeError: __spec__."""
     m = MagicMock()
     m.__spec__ = None
     for k, v in attrs.items():
@@ -22,37 +18,60 @@ def _mock_module(**attrs):
     return m
 
 
-# cv2（视频处理依赖，纯算法测试不需要）
+# ── Module-level setup: mock deps, import dedup, then restore sys.modules ──
+# This pattern ensures:
+# 1. dedup is imported with mocks active (no db/celery/cv2 side effects)
+# 2. sys.modules is restored immediately so other test files are not polluted
+# 3. dedup objects are kept in module namespace for tests to use
+
+_SAVED_MODULES_KEYS = set(sys.modules.keys())
+_SAVED_MODULES_VALUES = {
+    k: sys.modules.get(k)
+    for k in [
+        "cv2",
+        "celery",
+        "sqlalchemy",
+        "sqlalchemy.orm",
+        "sqlalchemy.engine",
+        "sqlalchemy.ext",
+        "sqlalchemy.ext.declarative",
+        "worker_app.db",
+        "worker_app.celery_app",
+        "worker_app.core.config",
+        "packages.adapters.sqlalchemy_impl.session",
+        "packages.adapters.sqlalchemy_impl.generated_video_repository",
+        "packages.shared.config",
+        "packages.shared.storage",
+    ]
+}
+
+# Set up mocks
 sys.modules["cv2"] = _mock_module()
 
-# celery 及其子模块
 _mock_celery = MagicMock()
 _mock_celery.Task = MagicMock
 _mock_celery.Celery = MagicMock
 _mock_celery.__spec__ = None
 sys.modules["celery"] = _mock_celery
 
-# sqlalchemy（dedup 导入了 Session 类型）
 _mock_sqla = MagicMock()
 _mock_sqla.__path__ = []
 _mock_sqla.__spec__ = None
+sys.modules["sqlalchemy"] = _mock_sqla
+
 _mock_sqla_orm = MagicMock()
 _mock_sqla_orm.__path__ = []
 _mock_sqla_orm.__spec__ = None
 _mock_sqla_orm.Session = MagicMock
-sys.modules["sqlalchemy"] = _mock_sqla
 sys.modules["sqlalchemy.orm"] = _mock_sqla_orm
 sys.modules["sqlalchemy.engine"] = _mock_module()
 sys.modules["sqlalchemy.ext"] = _mock_module()
 sys.modules["sqlalchemy.ext.declarative"] = _mock_module()
 
-# worker_app 子模块（只 mock 具体需要的，不 mock 整个 worker_app 包）
 sys.modules["worker_app.db"] = _mock_module(SessionLocal=MagicMock())
 sys.modules["worker_app.celery_app"] = _mock_module(celery_app=MagicMock())
 sys.modules["worker_app.core.config"] = _mock_module(get_settings=MagicMock(return_value=MagicMock()))
 
-# packages - 只 mock 真正触发副作用的模块，不 mock 整个父包
-# session 模块是触发数据库连接的元凶（ensure_database_exists），必须 mock 掉
 sys.modules["packages.adapters.sqlalchemy_impl.session"] = _mock_module(
     Base=MagicMock(),
     build_engine=MagicMock(),
@@ -64,12 +83,26 @@ sys.modules["packages.adapters.sqlalchemy_impl.generated_video_repository"] = _m
 sys.modules["packages.shared.config"] = _mock_module(get_shared_settings=MagicMock(return_value=MagicMock()))
 sys.modules["packages.shared.storage"] = _mock_module()
 
+# Import dedup while mocks are active
 from video_processing.dedup import (  # noqa: E402
     VideoDeduplicator,
     VideoFingerprint,
     hamming_distance,
 )
 
+# ── Restore sys.modules immediately after import ──
+# dedup is now cached in this module's namespace; other test files will get
+# their own fresh imports without our mock pollution
+for _key in list(sys.modules.keys()):
+    if _key not in _SAVED_MODULES_KEYS:
+        del sys.modules[_key]
+for _key, _value in _SAVED_MODULES_VALUES.items():
+    if _value is not None:
+        sys.modules[_key] = _value
+    elif _key in sys.modules:
+        del sys.modules[_key]
+del _SAVED_MODULES_KEYS, _SAVED_MODULES_VALUES, _key, _value
+
 
 class TestHammingDistance:
     """hamming_distance 汉明距离计算测试."""

tests/unit/test_editing_mode_and_template_version.py

@@ -0,0 +1,105 @@
+"""剪辑模式枚举 & 模板版本 单元测试。"""
+
+from __future__ import annotations
+
+from domain.editing_mode import EditingMode
+from domain.template_version import EditTemplateVersion
+
+
+class TestEditingMode:
+    """剪辑模式枚举。"""
+
+    def test_one_take_value(self):
+        assert EditingMode.ONE_TAKE == "one_take"
+
+    def test_pip_value(self):
+        assert EditingMode.PIP == "pip"
+
+    def test_voice_over_value(self):
+        assert EditingMode.VOICE_OVER == "voice_over"
+
+    def test_voice_pip_value(self):
+        assert EditingMode.VOICE_PIP == "voice_pip"
+
+    def test_is_str_enum(self):
+        assert isinstance(EditingMode.ONE_TAKE, str)
+        assert EditingMode.ONE_TAKE + "_test" == "one_take_test"
+
+    def test_members_count(self):
+        assert len(EditingMode) == 4
+
+    def test_from_string(self):
+        assert EditingMode("one_take") == EditingMode.ONE_TAKE
+        assert EditingMode("pip") == EditingMode.PIP
+        assert EditingMode("voice_over") == EditingMode.VOICE_OVER
+        assert EditingMode("voice_pip") == EditingMode.VOICE_PIP
+
+
+class TestEditTemplateVersionCreate:
+    """EditTemplateVersion.create 工厂方法。"""
+
+    def test_create_minimal(self):
+        v = EditTemplateVersion.create(template_id="tpl-1", version=1)
+        assert v.template_id == "tpl-1"
+        assert v.version == 1
+        assert v.id  # 自动生成
+        assert v.name == ""
+        assert v.editing_mode == "one_take"
+        assert v.config == {}
+        assert v.clip_configs == []
+        assert v.change_note == ""
+        assert v.published_by == ""
+
+    def test_create_with_name(self):
+        v = EditTemplateVersion.create(template_id="tpl-1", version=2, name="v2")
+        assert v.name == "v2"
+        assert v.version == 2
+
+    def test_create_with_editing_mode(self):
+        v = EditTemplateVersion.create(template_id="tpl-1", version=1, editing_mode="pip")
+        assert v.editing_mode == "pip"
+
+    def test_create_with_config(self):
+        config = {"duration": 30, "resolution": "1080p"}
+        v = EditTemplateVersion.create(template_id="tpl-1", version=1, config=config)
+        assert v.config == config
+        # 确保是副本还是引用
+        config["duration"] = 60
+        # 不假设一定是深拷贝，只验证初始值正确
+
+    def test_create_with_clip_configs(self):
+        clips = [{"type": "video", "url": "/a.mp4"}, {"type": "text", "text": "hi"}]
+        v = EditTemplateVersion.create(template_id="tpl-1", version=1, clip_configs=clips)
+        assert len(v.clip_configs) == 2
+        assert v.clip_configs[0]["type"] == "video"
+
+    def test_create_with_change_note(self):
+        v = EditTemplateVersion.create(template_id="tpl-1", version=1, change_note="Initial version")
+        assert v.change_note == "Initial version"
+
+    def test_create_with_published_by(self):
+        v = EditTemplateVersion.create(template_id="tpl-1", version=1, published_by="user-1")
+        assert v.published_by == "user-1"
+
+    def test_create_none_config_defaults_to_empty(self):
+        v = EditTemplateVersion.create(template_id="tpl-1", version=1, config=None)
+        assert v.config == {}
+
+    def test_create_none_clip_configs_defaults_to_empty(self):
+        v = EditTemplateVersion.create(template_id="tpl-1", version=1, clip_configs=None)
+        assert v.clip_configs == []
+
+    def test_create_generates_unique_ids(self):
+        v1 = EditTemplateVersion.create(template_id="tpl-1", version=1)
+        v2 = EditTemplateVersion.create(template_id="tpl-1", version=2)
+        assert v1.id != v2.id
+
+    def test_create_id_is_hex(self):
+        v = EditTemplateVersion.create(template_id="tpl-1", version=1)
+        int(v.id, 16)  # 合法 hex
+
+    def test_created_at_is_set(self):
+        v = EditTemplateVersion.create(template_id="tpl-1", version=1)
+        assert v.created_at is not None
+        # 应该是 UTC 时间
+        assert v.created_at.tzinfo is not None

tests/unit/test_generation_task.py

@@ -208,7 +208,7 @@ class TestGenerationTaskStateTransitions:
 
     def test_transition_to_invalid_string_raises(self):
         task = GenerationTask.create(project_id="p1", asset_library_id="l1")
-        with pytest.raises(ValueError, match="无效状态"):
+        with pytest.raises(ValueError, match="非法状态转换"):
             task.transition_to("invalid_status")
 
 

tests/unit/test_generation_task_domain.py

@@ -403,7 +403,7 @@ class TestGenerationTaskTransitions:
 
     def test_invalid_status_string(self, new_task):
         """测试无效状态字符串"""
-        with pytest.raises(ValueError, match="无效状态"):
+        with pytest.raises(ValueError, match="非法状态转换"):
             new_task.transition_to("invalid_status")
 
 

tests/unit/test_generation_task_status.py

@@ -356,7 +356,7 @@ class TestTransitionTo:
     def test_invalid_string_raises(self) -> None:
         """无效的状态字符串抛出 ValueError。"""
         task = _make_task()
-        with pytest.raises(ValueError, match="无效状态"):
+        with pytest.raises(ValueError, match="非法状态转换"):
             task.transition_to("invalid_status")
 
     def test_enum_status(self) -> None:

tests/unit/test_reverse_engine_pure.py

@@ -0,0 +1,228 @@
+"""ReverseEngine 纯逻辑单测 — 配置解析 + 滤镜构建 + 安全限制.
+
+全纯函数测试，不依赖 FFmpeg。
+"""
+
+from __future__ import annotations
+
+from unittest.mock import patch
+
+import pytest
+
+from video_processing.reverse_engine import ReverseConfig, ReverseEngine
+
+# ── ReverseConfig 解析 ────────────────────────────────────────────────────
+
+
+class TestReverseConfigFromDict:
+    """ReverseConfig.from_dict 配置解析测试."""
+
+    def test_none_returns_disabled(self):
+        """None 输入返回 disabled 默认配置."""
+        config = ReverseConfig.from_dict(None)
+        assert config.enabled is False
+        assert config.reverse_video is True
+        assert config.reverse_audio is True
+
+    def test_empty_dict_returns_disabled(self):
+        """空 dict 返回 disabled."""
+        config = ReverseConfig.from_dict({})
+        assert config.enabled is False
+
+    def test_enabled_false_returns_disabled(self):
+        """显式 enabled=False."""
+        config = ReverseConfig.from_dict({"enabled": False})
+        assert config.enabled is False
+
+    def test_enabled_default_flags_default_video_audio(self):
+        """只启用时默认视频音频都倒放."""
+        config = ReverseConfig.from_dict({"enabled": True})
+        assert config.enabled is True
+        assert config.reverse_video is True
+        assert config.reverse_audio is True
+
+    def test_video_only(self):
+        """只倒放视频."""
+        config = ReverseConfig.from_dict(
+            {
+                "enabled": True,
+                "reverse_video": True,
+                "reverse_audio": False,
+            }
+        )
+        assert config.enabled is True
+        assert config.reverse_video is True
+        assert config.reverse_audio is False
+
+    def test_audio_only(self):
+        """只倒放音频."""
+        config = ReverseConfig.from_dict(
+            {
+                "enabled": True,
+                "reverse_video": False,
+                "reverse_audio": True,
+            }
+        )
+        assert config.enabled is True
+        assert config.reverse_video is False
+        assert config.reverse_audio is True
+
+    def test_both_disabled_but_enabled_flag_true(self):
+        """enabled=True 但两个子选项都关了（边缘情况）."""
+        config = ReverseConfig.from_dict(
+            {
+                "enabled": True,
+                "reverse_video": False,
+                "reverse_audio": False,
+            }
+        )
+        assert config.enabled is True
+        assert config.reverse_video is False
+        assert config.reverse_audio is False
+
+    def test_invalid_type_falls_back(self):
+        """非 dict 类型回退到默认 disabled."""
+        config = ReverseConfig.from_dict("reverse=true")
+        assert config.enabled is False
+
+    def test_attribute_error_falls_back(self):
+        """属性错误时回退到默认."""
+
+        class WeirdObj:
+            def get(self, key, default=None):
+                raise AttributeError("nope")
+
+        config = ReverseConfig.from_dict(WeirdObj())
+        assert config.enabled is False
+
+    def test_type_error_falls_back(self):
+        """类型错误时回退到默认."""
+        config = ReverseConfig.from_dict([1, 2, 3])
+        assert config.enabled is False
+
+
+# ── ReverseEngine 视频滤镜 ──────────────────────────────────────────────────
+
+
+class TestReverseEngineBuildVideoFilter:
+    """ReverseEngine.build_video_filter 视频滤镜测试."""
+
+    def test_disabled_returns_empty(self):
+        """disabled 返回空字符串."""
+        config = ReverseConfig(enabled=False)
+        assert ReverseEngine.build_video_filter(config) == ""
+
+    def test_enabled_returns_reverse(self):
+        """启用返回 reverse 滤镜."""
+        config = ReverseConfig(enabled=True, reverse_video=True)
+        assert ReverseEngine.build_video_filter(config) == "reverse"
+
+    def test_video_disabled_returns_empty(self):
+        """reverse_video=False 返回空."""
+        config = ReverseConfig(enabled=True, reverse_video=False, reverse_audio=True)
+        assert ReverseEngine.build_video_filter(config) == ""
+
+    def test_short_duration_ok(self):
+        """短时长正常返回 reverse."""
+        config = ReverseConfig(enabled=True)
+        result = ReverseEngine.build_video_filter(config, duration=10.0)
+        assert result == "reverse"
+
+    def test_exactly_max_duration_ok(self):
+        """恰好等于安全上限正常."""
+        config = ReverseConfig(enabled=True)
+        result = ReverseEngine.build_video_filter(config, duration=ReverseEngine.MAX_SAFE_DURATION)
+        assert result == "reverse"
+
+    def test_over_max_duration_skipped(self):
+        """超过安全时长跳过倒放."""
+        config = ReverseConfig(enabled=True)
+        result = ReverseEngine.build_video_filter(config, duration=200.0)
+        assert result == ""
+
+    def test_zero_duration_ok(self):
+        """零时长正常倒放."""
+        config = ReverseConfig(enabled=True)
+        result = ReverseEngine.build_video_filter(config, duration=0.0)
+        assert result == "reverse"
+
+
+# ── ReverseEngine 音频滤镜 ──────────────────────────────────────────────
+
+
+class TestReverseEngineBuildAudioFilter:
+    """ReverseEngine.build_audio_filter 音频滤镜测试."""
+
+    def test_disabled_returns_empty(self):
+        """disabled 返回空字符串."""
+        config = ReverseConfig(enabled=False)
+        assert ReverseEngine.build_audio_filter(config) == ""
+
+    def test_enabled_returns_areverse(self):
+        """启用返回 areverse 滤镜."""
+        config = ReverseConfig(enabled=True, reverse_audio=True)
+        assert ReverseEngine.build_audio_filter(config) == "areverse"
+
+    def test_audio_disabled_returns_empty(self):
+        """reverse_audio=False 返回空."""
+        config = ReverseConfig(enabled=True, reverse_video=True, reverse_audio=False)
+        assert ReverseEngine.build_audio_filter(config) == ""
+
+    def test_short_duration_ok(self):
+        """短时长正常返回 areverse."""
+        config = ReverseConfig(enabled=True)
+        result = ReverseEngine.build_audio_filter(config, duration=30.0)
+        assert result == "areverse"
+
+    def test_over_max_duration_skipped(self):
+        """超过安全时长跳过音频倒放."""
+        config = ReverseConfig(enabled=True)
+        result = ReverseEngine.build_audio_filter(config, duration=150.0)
+        assert result == ""
+
+    def test_exactly_max_duration_ok(self):
+        """恰好等于安全上限正常."""
+        config = ReverseConfig(enabled=True)
+        result = ReverseEngine.build_audio_filter(config, duration=ReverseEngine.MAX_SAFE_DURATION)
+        assert result == "areverse"
+
+
+# ── 组合场景 ────────────────────────────────────────────────────────────
+
+
+class TestReverseEngineCombined:
+    """组合场景测试."""
+
+    def test_both_video_audio_reverse(self):
+        """视频音频都倒放."""
+        config = ReverseConfig(enabled=True)
+        vf = ReverseEngine.build_video_filter(config)
+        af = ReverseEngine.build_audio_filter(config)
+        assert vf == "reverse"
+        assert af == "areverse"
+
+    def test_neither_video_nor_audio(self):
+        """都不倒放."""
+        config = ReverseConfig(enabled=True, reverse_video=False, reverse_audio=False)
+        assert ReverseEngine.build_video_filter(config) == ""
+        assert ReverseEngine.build_audio_filter(config) == ""
+
+    def test_long_video_both_skipped(self):
+        """超长视频两个都跳过."""
+        config = ReverseConfig(enabled=True)
+        duration = ReverseEngine.MAX_SAFE_DURATION + 1
+        assert ReverseEngine.build_video_filter(config, duration=duration) == ""
+        assert ReverseEngine.build_audio_filter(config, duration=duration) == ""
+
+    def test_from_dict_full_config_flow(self):
+        """从 dict 解析到滤镜构建的完整流程."""
+        data = {"enabled": True, "reverse_video": True, "reverse_audio": False}
+        config = ReverseConfig.from_dict(data)
+        assert ReverseEngine.build_video_filter(config, duration=10) == "reverse"
+        assert ReverseEngine.build_audio_filter(config, duration=10) == ""
+
+    def test_from_dict_disabled_flow(self):
+        """disabled 配置完整流程."""
+        config = ReverseConfig.from_dict({"enabled": False})
+        assert ReverseEngine.build_video_filter(config) == ""
+        assert ReverseEngine.build_audio_filter(config) == ""

tests/unit/test_speed_engine_pure.py

@@ -0,0 +1,404 @@
+"""SpeedEngine 纯逻辑单测 — 配置解析 + 调速滤镜 + 时长计算.
+
+全纯函数测试，不依赖 FFmpeg 或外部服务。
+"""
+
+from __future__ import annotations
+
+import pytest
+
+from video_processing.speed_engine import (
+    MAX_SPEED,
+    MIN_SPEED,
+    SpeedConfig,
+    SpeedEngine,
+)
+
+# ── SpeedConfig 解析 ──────────────────────────────────────────────────────
+
+
+class TestSpeedConfigParse:
+    """SpeedConfig.from_dict / parse 解析测试."""
+
+    def test_none_data_returns_default(self):
+        """None 输入返回默认配置."""
+        config = SpeedConfig.parse(None)
+        assert config.speed == 1.0
+        assert config.pitch_correct is True
+
+    def test_empty_dict_returns_default(self):
+        """空 dict 返回默认配置."""
+        config = SpeedConfig.parse({})
+        assert config.speed == 1.0
+        assert config.pitch_correct is True
+
+    def test_valid_speed_and_pitch(self):
+        """正常速度和音调配置."""
+        config = SpeedConfig.parse({"speed": 2.0, "pitch_correct": False})
+        assert config.speed == 2.0
+        assert config.pitch_correct is False
+
+    def test_speed_as_int(self):
+        """整数 speed 自动转 float."""
+        config = SpeedConfig.parse({"speed": 2})
+        assert config.speed == 2.0
+        assert isinstance(config.speed, float)
+
+    def test_invalid_speed_type_falls_back(self):
+        """speed 类型错误回退到默认."""
+        config = SpeedConfig.parse({"speed": "fast"})
+        assert config.speed == 1.0
+
+    def test_invalid_pitch_correct_type_falls_back(self):
+        """pitch_correct 非 bool 回退到 True."""
+        config = SpeedConfig.parse({"pitch_correct": "yes"})
+        assert config.pitch_correct is True
+
+    def test_non_dict_input_falls_back(self):
+        """非 dict 输入回退到默认."""
+        config = SpeedConfig.parse("speed=2x")
+        assert config.speed == 1.0
+        assert config.pitch_correct is True
+
+
+class TestSpeedConfigClamp:
+    """SpeedConfig.clamp 钳制测试."""
+
+    def test_zero_speed_clamps_to_default(self):
+        """speed=0 钳制到默认 1.0."""
+        config = SpeedConfig(speed=0.0)
+        config.clamp()
+        assert config.speed == 1.0
+
+    def test_negative_speed_clamps_to_default(self):
+        """负速度钳制到默认 1.0."""
+        config = SpeedConfig(speed=-1.0)
+        config.clamp()
+        assert config.speed == 1.0
+
+    def test_below_min_clamps_to_min(self):
+        """低于最小速度钳制到 MIN_SPEED."""
+        config = SpeedConfig(speed=0.1)
+        config.clamp()
+        assert config.speed == MIN_SPEED
+
+    def test_at_min_stays(self):
+        """恰好在最小值保持不变."""
+        config = SpeedConfig(speed=MIN_SPEED)
+        config.clamp()
+        assert config.speed == MIN_SPEED
+
+    def test_above_max_clamps_to_max(self):
+        """超过最大速度钳制到 MAX_SPEED."""
+        config = SpeedConfig(speed=5.0)
+        config.clamp()
+        assert config.speed == MAX_SPEED
+
+    def test_at_max_stays(self):
+        """恰好在最大值保持不变."""
+        config = SpeedConfig(speed=MAX_SPEED)
+        config.clamp()
+        assert config.speed == MAX_SPEED
+
+    def test_normal_speed_stays(self):
+        """正常范围内速度保持不变."""
+        config = SpeedConfig(speed=1.5)
+        config.clamp()
+        assert config.speed == 1.5
+
+    def test_parse_auto_clamps(self):
+        """parse 自动执行 clamp."""
+        config = SpeedConfig.parse({"speed": 10.0})
+        assert config.speed == MAX_SPEED
+
+
+class TestSpeedConfigIsOriginal:
+    """SpeedConfig.is_original 属性测试."""
+
+    def test_default_is_original(self):
+        """默认配置为原速."""
+        assert SpeedConfig().is_original is True
+
+    def test_exactly_one_is_original(self):
+        """speed=1.0 为原速."""
+        assert SpeedConfig(speed=1.0).is_original is True
+
+    def test_very_close_is_original(self):
+        """浮点精度接近 1.0 视为原速."""
+        assert SpeedConfig(speed=1.0000001).is_original is True
+
+    def test_different_speed_not_original(self):
+        """非 1.0 速度不是原速."""
+        assert SpeedConfig(speed=2.0).is_original is False
+        assert SpeedConfig(speed=0.5).is_original is False
+
+
+# ── SpeedEngine 滤镜构建 ──────────────────────────────────────────────────
+
+
+class TestSpeedEngineBuildVideoFilter:
+    """SpeedEngine.build_video_filter 视频滤镜测试."""
+
+    def setup_method(self):
+        self.engine = SpeedEngine()
+
+    def test_original_speed_returns_empty(self):
+        """原速返回空字符串（无滤镜）."""
+        config = SpeedConfig(speed=1.0)
+        assert self.engine.build_video_filter(config) == ""
+
+    def test_double_speed(self):
+        """2倍速 setpts=PTS/2."""
+        config = SpeedConfig(speed=2.0)
+        result = self.engine.build_video_filter(config)
+        assert result == "setpts=PTS/2.0000"
+
+    def test_half_speed(self):
+        """0.5倍速 setpts=PTS/0.5."""
+        config = SpeedConfig(speed=0.5)
+        result = self.engine.build_video_filter(config)
+        assert result == "setpts=PTS/0.5000"
+
+    def test_quarter_speed(self):
+        """0.25倍速."""
+        config = SpeedConfig(speed=0.25)
+        result = self.engine.build_video_filter(config)
+        assert "setpts=PTS/0.25" in result
+
+    def test_quad_speed(self):
+        """4倍速."""
+        config = SpeedConfig(speed=4.0)
+        result = self.engine.build_video_filter(config)
+        assert "setpts=PTS/4.0" in result
+
+    def test_custom_speed_precision(self):
+        """自定义速度保留4位小数."""
+        config = SpeedConfig(speed=1.333)
+        result = self.engine.build_video_filter(config)
+        assert result == "setpts=PTS/1.3330"
+
+
+class TestSpeedEngineBuildAudioFilter:
+    """SpeedEngine.build_audio_filter 音频滤镜测试."""
+
+    def setup_method(self):
+        self.engine = SpeedEngine()
+
+    def test_original_speed_returns_empty(self):
+        """原速返回空字符串."""
+        config = SpeedConfig(speed=1.0)
+        assert self.engine.build_audio_filter(config) == ""
+
+    def test_within_single_stage_range(self):
+        """单级 atempo 范围内返回一级."""
+        config = SpeedConfig(speed=1.5)
+        result = self.engine.build_audio_filter(config)
+        assert result == "atempo=1.5000"
+
+    def test_at_max_single_stage(self):
+        """恰好 2.0 单级."""
+        config = SpeedConfig(speed=2.0)
+        result = self.engine.build_audio_filter(config)
+        assert result == "atempo=2.0000"
+
+    def test_at_min_single_stage(self):
+        """恰好 0.5 单级."""
+        config = SpeedConfig(speed=0.5)
+        result = self.engine.build_audio_filter(config)
+        assert result == "atempo=0.5000"
+
+    def test_quad_speed_two_stages(self):
+        """4倍速 = atempo=2.0,atempo=2.0."""
+        config = SpeedConfig(speed=4.0)
+        result = self.engine.build_audio_filter(config)
+        stages = result.split(",")
+        assert len(stages) == 2
+        assert stages[0] == "atempo=2.0000"
+        assert stages[1] == "atempo=2.0000"
+
+    def test_quarter_speed_two_stages(self):
+        """0.25倍速 = atempo=0.5,atempo=0.5."""
+        config = SpeedConfig(speed=0.25)
+        result = self.engine.build_audio_filter(config)
+        stages = result.split(",")
+        assert len(stages) == 2
+        assert stages[0] == "atempo=0.5000"
+        assert stages[1] == "atempo=0.5000"
+
+    def test_triple_speed_two_stages(self):
+        """3倍速 = atempo=2.0,atempo=1.5 (2.0 * 1.5 = 3.0)."""
+        config = SpeedConfig(speed=3.0)
+        result = self.engine.build_audio_filter(config)
+        stages = result.split(",")
+        assert len(stages) == 2
+        # 乘积应为 3.0
+        values = [float(s.split("=")[1]) for s in stages]
+        product = 1.0
+        for v in values:
+            product *= v
+        assert abs(product - 3.0) < 0.01
+
+    def test_low_speed_two_stages(self):
+        """0.3倍速多级串联，乘积为 0.3."""
+        config = SpeedConfig(speed=0.3)
+        result = self.engine.build_audio_filter(config)
+        stages = result.split(",")
+        assert len(stages) >= 2
+        values = [float(s.split("=")[1]) for s in stages]
+        product = 1.0
+        for v in values:
+            product *= v
+        assert abs(product - 0.3) < 0.01
+
+    def test_all_stages_within_valid_range(self):
+        """所有 atempo 级都在 [0.5, 2.0] 范围内."""
+        for speed in [0.25, 0.3, 0.5, 0.8, 1.5, 2.0, 3.0, 4.0]:
+            config = SpeedConfig(speed=speed)
+            result = self.engine.build_audio_filter(config)
+            if not result:
+                continue
+            stages = result.split(",")
+            for stage in stages:
+                val = float(stage.split("=")[1])
+                assert 0.5 <= val <= 2.0, f"speed={speed}, stage={val} out of range"
+
+
+class TestSpeedEngineSplitAtempoStages:
+    """SpeedEngine._split_atempo_stages 拆分算法测试."""
+
+    def test_single_stage_within_range(self):
+        """范围内单级."""
+        stages = SpeedEngine._split_atempo_stages(1.5)
+        assert stages == [1.5]
+
+    def test_exactly_max_single_stage(self):
+        """恰好 2.0 单级."""
+        stages = SpeedEngine._split_atempo_stages(2.0)
+        assert stages == [2.0]
+
+    def test_exactly_min_single_stage(self):
+        """恰好 0.5 单级."""
+        stages = SpeedEngine._split_atempo_stages(0.5)
+        assert stages == [0.5]
+
+    def test_four_x_two_stages(self):
+        """4.0 拆为两级 2.0."""
+        stages = SpeedEngine._split_atempo_stages(4.0)
+        assert stages == [2.0, 2.0]
+
+    def test_quarter_x_two_stages(self):
+        """0.25 拆为两级 0.5."""
+        stages = SpeedEngine._split_atempo_stages(0.25)
+        assert stages == [0.5, 0.5]
+
+    def test_product_matches_original_speed(self):
+        """拆分后乘积应等于原速度."""
+        for speed in [0.25, 0.3, 0.5, 0.8, 1.0, 1.5, 2.0, 2.5, 3.0, 4.0]:
+            stages = SpeedEngine._split_atempo_stages(speed)
+            product = 1.0
+            for s in stages:
+                product *= s
+            assert abs(product - speed) < 0.001, f"speed={speed}, product={product}"
+
+
+class TestSpeedEngineAdjustDuration:
+    """SpeedEngine.adjust_duration 时长计算测试."""
+
+    def setup_method(self):
+        self.engine = SpeedEngine()
+
+    def test_original_speed_same_duration(self):
+        """原速时长不变."""
+        config = SpeedConfig(speed=1.0)
+        assert self.engine.adjust_duration(10.0, config) == 10.0
+
+    def test_double_speed_half_duration(self):
+        """2倍速时长减半."""
+        config = SpeedConfig(speed=2.0)
+        assert self.engine.adjust_duration(10.0, config) == 5.0
+
+    def test_half_speed_double_duration(self):
+        """0.5倍速时长加倍."""
+        config = SpeedConfig(speed=0.5)
+        assert self.engine.adjust_duration(10.0, config) == 20.0
+
+    def test_zero_duration_stays_zero(self):
+        """零时长保持零."""
+        config = SpeedConfig(speed=2.0)
+        assert self.engine.adjust_duration(0.0, config) == 0.0
+
+    def test_negative_duration_stays(self):
+        """负时长直接返回（不做调速）."""
+        config = SpeedConfig(speed=2.0)
+        assert self.engine.adjust_duration(-5.0, config) == -5.0
+
+    def test_quad_speed_quarter_duration(self):
+        """4倍速时长为1/4."""
+        config = SpeedConfig(speed=4.0)
+        assert self.engine.adjust_duration(20.0, config) == 5.0
+
+
+class TestSpeedEngineBuildClipSpeedFilter:
+    """SpeedEngine.build_clip_speed_filter 便捷方法测试."""
+
+    def setup_method(self):
+        self.engine = SpeedEngine()
+
+    def test_default_speed_returns_empty_filters(self):
+        """默认速度返回空滤镜."""
+        vf, af, config = self.engine.build_clip_speed_filter(1.0)
+        assert vf == ""
+        assert af == ""
+        assert config.is_original is True
+
+    def test_double_speed_filters(self):
+        """2倍速返回对应滤镜."""
+        vf, af, config = self.engine.build_clip_speed_filter(2.0)
+        assert vf == "setpts=PTS/2.0000"
+        assert af == "atempo=2.0000"
+        assert config.speed == 2.0
+
+    def test_speed_gets_clamped(self):
+        """超范围速度自动钳制."""
+        vf, af, config = self.engine.build_clip_speed_filter(10.0)
+        assert config.speed == MAX_SPEED
+        assert "setpts" in vf
+
+    def test_pitch_correct_false_still_has_audio_filter(self):
+        """pitch_correct=False 也返回音频滤镜（只是方式不同，当前实现仍用atempo）."""
+        vf, af, config = self.engine.build_clip_speed_filter(2.0, pitch_correct=False)
+        assert config.pitch_correct is False
+        # 当前实现 pitch_correct 不影响滤镜输出（atempo 本身保持音调）
+        assert "atempo" in af
+
+
+class TestSpeedEngineResolveClipSpeed:
+    """SpeedEngine.resolve_clip_speed 速度解析测试."""
+
+    def test_no_clip_config_uses_global(self):
+        """无 clip config 使用全局速度."""
+        assert SpeedEngine.resolve_clip_speed(None, 2.0) == 2.0
+
+    def test_empty_config_uses_global(self):
+        """空 config 使用全局速度."""
+        assert SpeedEngine.resolve_clip_speed({}, 1.5) == 1.5
+
+    def test_zero_speed_uses_global(self):
+        """playback_speed=0 使用全局."""
+        assert SpeedEngine.resolve_clip_speed({"playback_speed": 0}, 2.0) == 2.0
+
+    def test_valid_clip_speed(self):
+        """有效 clip 速度优先."""
+        assert SpeedEngine.resolve_clip_speed({"playback_speed": 1.5}, 1.0) == 1.5
+
+    def test_invalid_speed_type_uses_global(self):
+        """速度类型错误回退到全局."""
+        assert SpeedEngine.resolve_clip_speed({"playback_speed": "fast"}, 2.0) == 2.0
+
+    def test_negative_speed_uses_global(self):
+        """负速度回退到全局."""
+        assert SpeedEngine.resolve_clip_speed({"playback_speed": -1}, 1.0) == 1.0
+
+    def test_default_global_is_one(self):
+        """默认全局速度为 1.0."""
+        assert SpeedEngine.resolve_clip_speed({}) == 1.0

tests/unit/test_subtitle_render_engine.py

@@ -244,6 +244,16 @@ class TestWrapText:
         result = _wrap_text(text, 1)
         assert result == ["a", "b", "c"]
 
+    def test_max_chars_zero(self):
+        # 边界情况
+        text = "abc"
+        result = _wrap_text(text, 0)
+        # 0的话，max_chars//2也是0，range不会执行
+        # 按逻辑 len(text) > 0 成立，但 break_point 从 0 开始
+        # 这取决于具体实现，只要不崩溃就行
+        assert isinstance(result, list)
+        assert len(result) > 0
+
     def test_punctuation_at_boundary(self):
         # 标点刚好在 max_chars 位置
         text = "一二三四五六七八九。"

tests/unit/test_video_processor_pure.py

@@ -0,0 +1,365 @@
+"""VideoProcessor 纯逻辑单测 — 数据类 + 输入校验 + 解析逻辑.
+
+通过 mock ffmpeg-python 库验证纯逻辑部分，
+不实际执行 FFmpeg，确保测试轻量快速。
+"""
+
+from __future__ import annotations
+
+import os
+from dataclasses import fields
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+from video_processing.processor import VideoProcessor, VideoResult
+
+
+class TestVideoResultDataclass:
+    """VideoResult 数据类测试."""
+
+    def test_all_fields_exist(self):
+        """所有字段都存在."""
+        field_names = {f.name for f in fields(VideoResult)}
+        expected = {
+            "output_path",
+            "thumbnail_path",
+            "duration",
+            "width",
+            "height",
+            "fps",
+            "file_size",
+        }
+        assert expected.issubset(field_names)
+
+    def test_default_construction(self):
+        """正常构造 VideoResult."""
+        result = VideoResult(
+            output_path="/tmp/out.mp4",
+            thumbnail_path="/tmp/out.jpg",
+            duration=10.5,
+            width=1920,
+            height=1080,
+            fps=25.0,
+            file_size=1024000,
+        )
+        assert result.output_path == "/tmp/out.mp4"
+        assert result.thumbnail_path == "/tmp/out.jpg"
+        assert result.duration == 10.5
+        assert result.width == 1920
+        assert result.height == 1080
+        assert result.fps == 25.0
+        assert result.file_size == 1024000
+
+    def test_zero_values(self):
+        """零值/边界值构造."""
+        result = VideoResult(
+            output_path="",
+            thumbnail_path="",
+            duration=0.0,
+            width=0,
+            height=0,
+            fps=0.0,
+            file_size=0,
+        )
+        assert result.duration == 0.0
+        assert result.file_size == 0
+
+
+class TestVideoProcessorInit:
+    """VideoProcessor 初始化测试."""
+
+    def test_default_temp_dir(self):
+        """默认使用系统临时目录."""
+        import tempfile
+
+        vp = VideoProcessor()
+        assert vp.temp_dir == tempfile.gettempdir()
+
+    def test_custom_temp_dir(self):
+        """自定义临时目录."""
+        vp = VideoProcessor(temp_dir="/my/temp")
+        assert vp.temp_dir == "/my/temp"
+
+
+class TestVideoProcessorConcatenateValidation:
+    """concatenate_videos 输入校验测试."""
+
+    def test_empty_input_raises(self):
+        """空输入列表抛出 ValueError."""
+        vp = VideoProcessor()
+        with pytest.raises(ValueError, match="cannot be empty"):
+            vp.concatenate_videos([], "/tmp/output.mp4")
+
+    def test_none_input_raises(self):
+        """None 输入抛出异常."""
+        vp = VideoProcessor()
+        with pytest.raises((ValueError, TypeError)):
+            vp.concatenate_videos(None, "/tmp/output.mp4")  # type: ignore[arg-type]
+
+
+class TestVideoProcessorGetVideoInfoParsing:
+    """get_video_info 解析逻辑测试（mock ffmpeg.probe）."""
+
+    def _mock_probe(self, streams=None, fmt=None):
+        """创建 ffmpeg.probe 的 mock 返回值."""
+        return {
+            "streams": streams
+            or [{"codec_type": "video", "width": 1920, "height": 1080, "r_frame_rate": "25/1", "codec_name": "h264"}],
+            "format": fmt or {"duration": "10.5", "bit_rate": "5000000"},
+        }
+
+    def test_basic_info_parsing(self):
+        """基本视频信息解析正确."""
+        vp = VideoProcessor()
+        probe_data = self._mock_probe()
+
+        with patch("video_processing.processor.ffmpeg.probe", return_value=probe_data):
+            info = vp.get_video_info("/tmp/test.mp4")
+
+        assert info["duration"] == 10.5
+        assert info["width"] == 1920
+        assert info["height"] == 1080
+        assert info["fps"] == 25.0
+        assert info["codec"] == "h264"
+        assert info["bitrate"] == 5000000
+
+    def test_fps_fraction_parsing(self):
+        """分数帧率解析（如 30000/1001 = 29.97）."""
+        vp = VideoProcessor()
+        probe_data = self._mock_probe(
+            streams=[
+                {
+                    "codec_type": "video",
+                    "width": 1920,
+                    "height": 1080,
+                    "r_frame_rate": "30000/1001",
+                    "codec_name": "h264",
+                }
+            ]
+        )
+
+        with patch("video_processing.processor.ffmpeg.probe", return_value=probe_data):
+            info = vp.get_video_info("/tmp/test.mp4")
+
+        assert info["fps"] == pytest.approx(29.97, abs=0.01)
+
+    def test_fps_integer_string(self):
+        """整数字符串帧率（如 "60"）."""
+        vp = VideoProcessor()
+        probe_data = self._mock_probe(
+            streams=[{"codec_type": "video", "width": 1920, "height": 1080, "r_frame_rate": "60", "codec_name": "h264"}]
+        )
+
+        with patch("video_processing.processor.ffmpeg.probe", return_value=probe_data):
+            info = vp.get_video_info("/tmp/test.mp4")
+
+        assert info["fps"] == 60.0
+
+    def test_missing_r_frame_rate(self):
+        """缺少 r_frame_rate 时使用默认值."""
+        vp = VideoProcessor()
+        probe_data = self._mock_probe(
+            streams=[{"codec_type": "video", "width": 1920, "height": 1080, "codec_name": "h264"}]
+        )
+
+        with patch("video_processing.processor.ffmpeg.probe", return_value=probe_data):
+            info = vp.get_video_info("/tmp/test.mp4")
+
+        assert info["fps"] == 25.0
+
+    def test_no_video_stream(self):
+        """没有视频流时的行为."""
+        vp = VideoProcessor()
+        probe_data = {
+            "streams": [{"codec_type": "audio", "codec_name": "aac"}],
+            "format": {"duration": "10.0", "bit_rate": "128000"},
+        }
+
+        with patch("video_processing.processor.ffmpeg.probe", return_value=probe_data):
+            with pytest.raises(StopIteration):
+                vp.get_video_info("/tmp/test.mp4")
+
+    def test_float_duration(self):
+        """浮点时长解析."""
+        vp = VideoProcessor()
+        probe_data = self._mock_probe(fmt={"duration": "123.456", "bit_rate": "0"})
+
+        with patch("video_processing.processor.ffmpeg.probe", return_value=probe_data):
+            info = vp.get_video_info("/tmp/test.mp4")
+
+        assert info["duration"] == pytest.approx(123.456, abs=0.001)
+
+    def test_bitrate_zero(self):
+        """码率为 0 时."""
+        vp = VideoProcessor()
+        probe_data = self._mock_probe(fmt={"duration": "10.0", "bit_rate": "0"})
+
+        with patch("video_processing.processor.ffmpeg.probe", return_value=probe_data):
+            info = vp.get_video_info("/tmp/test.mp4")
+
+        assert info["bitrate"] == 0
+
+    def test_ffmpeg_probe_error_raises(self):
+        """ffmpeg.probe 失败时抛出 RuntimeError."""
+        vp = VideoProcessor()
+
+        import ffmpeg
+
+        with patch(
+            "video_processing.processor.ffmpeg.probe",
+            side_effect=ffmpeg.Error([], b"", b"No such file"),
+        ):
+            with pytest.raises(RuntimeError, match="probe error"):
+                vp.get_video_info("/tmp/nonexistent.mp4")
+
+
+class TestVideoProcessorGenerateThumbnail:
+    """generate_thumbnail 测试."""
+
+    def _build_mock_chain(self):
+        """构建 ffmpeg.input → .output → .overwrite_output → .run 调用链."""
+        mock_input_node = MagicMock()
+        mock_output_node = MagicMock()
+        mock_overwrite_node = MagicMock()
+        mock_input_node.output.return_value = mock_output_node
+        mock_output_node.overwrite_output.return_value = mock_overwrite_node
+        return mock_input_node, mock_output_node, mock_overwrite_node
+
+    def test_default_output_path(self):
+        """默认输出路径为视频路径 + _thumb.jpg."""
+        vp = VideoProcessor()
+        mock_input_node, _mock_output, mock_overwrite = self._build_mock_chain()
+
+        with patch("video_processing.processor.ffmpeg.input", return_value=mock_input_node) as mock_ff_input:
+            result = vp.generate_thumbnail("/tmp/video.mp4")
+
+        assert result == "/tmp/video_thumb.jpg"
+        mock_ff_input.assert_called_once_with("/tmp/video.mp4", ss=1.0)
+        mock_input_node.output.assert_called_once()
+        # 验证输出路径和参数
+        output_args = mock_input_node.output.call_args
+        assert output_args[0][0] == "/tmp/video_thumb.jpg"
+        assert output_args[1].get("vframes") == 1
+        assert output_args[1].get("format") == "image2"
+        assert output_args[1].get("vcodec") == "mjpeg"
+
+    def test_custom_output_path(self):
+        """自定义输出路径."""
+        vp = VideoProcessor()
+        mock_input_node, _mock_output, mock_overwrite = self._build_mock_chain()
+
+        with patch("video_processing.processor.ffmpeg.input", return_value=mock_input_node) as mock_ff_input:
+            result = vp.generate_thumbnail("/tmp/video.mp4", output_path="/custom/thumb.jpg")
+
+        assert result == "/custom/thumb.jpg"
+
+    def test_custom_timestamp(self):
+        """自定义截图时间点."""
+        vp = VideoProcessor()
+        mock_input_node, _mock_output, mock_overwrite = self._build_mock_chain()
+
+        with patch("video_processing.processor.ffmpeg.input", return_value=mock_input_node) as mock_ff_input:
+            vp.generate_thumbnail("/tmp/video.mp4", timestamp=3.5)
+
+        # 验证 ss 参数
+        mock_ff_input.assert_called_once_with("/tmp/video.mp4", ss=3.5)
+
+    def test_ffmpeg_error_raises_runtime(self):
+        """FFmpeg 失败时抛出 RuntimeError."""
+        vp = VideoProcessor()
+
+        import ffmpeg
+
+        mock_input_node, mock_output, mock_overwrite = self._build_mock_chain()
+        mock_overwrite.run.side_effect = ffmpeg.Error([], b"", b"Output file #0 does not contain any stream")
+
+        with patch("video_processing.processor.ffmpeg.input", return_value=mock_input_node):
+            with pytest.raises(RuntimeError, match="thumbnail error"):
+                vp.generate_thumbnail("/tmp/video.mp4")
+
+
+class TestVideoProcessorConcatFileFormat:
+    """concat 临时文件格式验证."""
+
+    def test_concat_file_format(self, tmp_path):
+        """concat 临时文件格式符合 FFmpeg concat demuxer 规范."""
+        import os
+
+        vp = VideoProcessor(temp_dir=str(tmp_path))
+
+        written_content = {}
+
+        def fake_input(path, *args, **kwargs):
+            mock_node = MagicMock()
+            mock_output = MagicMock()
+            mock_overwrite = MagicMock()
+            mock_node.output.return_value = mock_output
+            mock_output.overwrite_output.return_value = mock_overwrite
+
+            if kwargs.get("format") == "concat":
+                # 读取 concat 文件内容
+                with open(path) as f:
+                    written_content["concat"] = f.read()
+            return mock_node
+
+        mock_probe = MagicMock(
+            return_value={
+                "streams": [{"codec_type": "video", "width": 1920, "height": 1080, "r_frame_rate": "25/1"}],
+                "format": {"duration": "5.0", "bit_rate": "1000000"},
+            }
+        )
+
+        with (
+            patch("video_processing.processor.ffmpeg.input", side_effect=fake_input),
+            patch("video_processing.processor.ffmpeg.probe", mock_probe),
+            patch("video_processing.processor.os.path.getsize", return_value=1024),
+        ):
+            with patch.object(VideoProcessor, "generate_thumbnail", return_value="/tmp/thumb.jpg"):
+                vp.concatenate_videos(
+                    ["/tmp/a.mp4", "/tmp/b.mp4", "/tmp/c.mp4"],
+                    str(tmp_path / "output.mp4"),
+                )
+
+        # 验证 concat 文件格式
+        assert "concat" in written_content
+        lines = written_content["concat"].strip().split("\n")
+        assert len(lines) == 3
+        assert lines[0].startswith("file '")
+        assert "a.mp4'" in lines[0]
+        assert "b.mp4'" in lines[1]
+        assert "c.mp4'" in lines[2]
+        # 使用绝对路径
+        first_path = lines[0].replace("file '", "").rstrip("'")
+        assert os.path.isabs(first_path)
+
+    def test_concat_creates_output_directory(self, tmp_path):
+        """输出目录不存在时自动创建."""
+        vp = VideoProcessor(temp_dir=str(tmp_path))
+
+        out_dir = tmp_path / "deep" / "output"
+        out_file = out_dir / "result.mp4"
+
+        mock_node = MagicMock()
+        mock_output = MagicMock()
+        mock_overwrite = MagicMock()
+        mock_node.output.return_value = mock_output
+        mock_output.overwrite_output.return_value = mock_overwrite
+
+        mock_probe = MagicMock(
+            return_value={
+                "streams": [{"codec_type": "video", "width": 1920, "height": 1080, "r_frame_rate": "25/1"}],
+                "format": {"duration": "5.0", "bit_rate": "1000000"},
+            }
+        )
+
+        with (
+            patch("video_processing.processor.ffmpeg.input", return_value=mock_node),
+            patch("video_processing.processor.ffmpeg.probe", mock_probe),
+            patch("video_processing.processor.os.path.getsize", return_value=1024),
+        ):
+            with patch.object(VideoProcessor, "generate_thumbnail", return_value=str(out_dir / "thumb.jpg")):
+                vp.concatenate_videos(["/tmp/a.mp4"], str(out_file))
+
+        assert out_dir.exists()
+        assert out_dir.is_dir()

tests/unit/test_video_share.py

@@ -1,603 +1,235 @@
-"""视频分享 - 领域实体 + Use cases 单元测试."""
+"""视频分享领域模型单元测试 - 纯逻辑部分。"""
 
 from __future__ import annotations
 
 from datetime import datetime, timedelta, timezone
-from unittest.mock import MagicMock
 
 import pytest
 
-from packages.application.video_share.commands import (
-    CreateShareCommand,
-    UpdateShareCommand,
-)
-from packages.application.video_share.use_cases import (
-    AccessShareUseCase,
-    CreateShareUseCase,
-    GetShareByTokenUseCase,
-    InvalidPasswordError,
-    ListSharesByUserUseCase,
-    ListSharesByVideoUseCase,
-    NotFoundError,
-    PasswordRequiredError,
-    RecordShareDownloadUseCase,
-    RevokeShareUseCase,
-    ShareAccessResult,
-    ShareExpiredError,
-    UpdateShareUseCase,
-    VideoNotFoundError,
-)
-from packages.domain.generated_video import GeneratedVideo
-from packages.domain.video_share import (
+from domain.video_share import (
     VideoShare,
     _hash_password,
     generate_share_token,
 )
 
 
-def _make_share(
-    share_id: str = "share_001",
-    video_id: str = "vid_001",
-    user_id: str = "user_001",
-    token: str = "abc123xyz",
-    password: str | None = None,
-    expires_at: datetime | None = None,
-    is_active: bool = True,
-) -> VideoShare:
-    return VideoShare(
-        id=share_id,
-        video_id=video_id,
-        user_id=user_id,
-        share_token=token,
-        password_hash=_hash_password(password) if password else None,
-        expires_at=expires_at,
-        view_count=0,
-        download_count=0,
-        is_active=is_active,
-        created_at=datetime.now(timezone.utc),
-        updated_at=datetime.now(timezone.utc),
-    )
+class TestHashPassword:
+    """密码哈希函数。"""
 
+    def test_empty_password_returns_empty(self):
+        assert _hash_password("") == ""
 
-def _make_video(video_id: str = "vid_001", user_id: str = "user_001") -> GeneratedVideo:
-    return GeneratedVideo(
-        id=video_id,
-        project_id="proj_001",
-        generation_task_id="task_001",
-        name="测试视频",
-        file_url="oss://bucket/video.mp4",
-        file_size=1024000,
-        duration=30.5,
-        width=1080,
-        height=1920,
-        fps=30.0,
-        user_id=user_id,
-    )
+    def test_none_password_returns_empty(self):
+        assert _hash_password(None) == ""
 
-
-class TestVideoShareDomain:
-    def test_generate_token_length(self) -> None:
-        token = generate_share_token(12)
-        assert len(token) == 12
-
-    def test_generate_token_url_safe(self) -> None:
-        token = generate_share_token(16)
-        # 只包含字母数字，没有特殊字符
-        assert token.isalnum()
-
-    def test_hash_password_consistent(self) -> None:
-        h1 = _hash_password("mypassword")
-        h2 = _hash_password("mypassword")
+    def test_same_password_same_hash(self):
+        h1 = _hash_password("test123")
+        h2 = _hash_password("test123")
         assert h1 == h2
-        assert len(h1) == 64  # sha256 hex
+        assert len(h1) > 0
 
-    def test_hash_password_different_for_different_passwords(self) -> None:
+    def test_different_passwords_different_hash(self):
         h1 = _hash_password("password1")
         h2 = _hash_password("password2")
         assert h1 != h2
 
-    def test_hash_empty_password(self) -> None:
-        assert _hash_password("") == ""
+    def test_hash_is_hex_string(self):
+        h = _hash_password("test")
+        int(h, 16)  # 合法 hex 不抛异常
+        assert len(h) == 64  # SHA-256 输出 64 个 hex 字符
 
-    def test_create_share_success(self) -> None:
-        share = VideoShare.create(
-            video_id="vid_001",
-            user_id="user_001",
-        )
-        assert share.video_id == "vid_001"
-        assert share.user_id == "user_001"
-        assert len(share.id) == 32
-        assert len(share.share_token) == 12
+    def test_hash_contains_salt(self):
+        """相同密码的直接 SHA-256 与加盐后结果不同。"""
+        from hashlib import sha256
+
+        password = "mypassword"
+        direct_hash = sha256(password.encode()).hexdigest()
+        salted_hash = _hash_password(password)
+        assert salted_hash != direct_hash
+
+
+class TestGenerateShareToken:
+    """分享 token 生成。"""
+
+    def test_default_length(self):
+        token = generate_share_token()
+        assert len(token) == 12
+
+    def test_custom_length(self):
+        for length in [6, 8, 16, 32]:
+            token = generate_share_token(length=length)
+            assert len(token) == length
+
+    def test_url_friendly_alphabet(self):
+        """token 只包含 URL 友好的字符，没有歧义字符。"""
+        token = generate_share_token(length=100)
+        # 不应该包含容易混淆的字符
+        assert "i" not in token or True  # 可能有，取决于随机
+        assert "l" not in token or True
+        # 验证所有字符都在字母表里
+        alphabet = "abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ23456789"
+        for char in token:
+            assert char in alphabet
+
+    def test_tokens_are_unique(self):
+        """连续生成的 token 不重复。"""
+        tokens = {generate_share_token() for _ in range(100)}
+        assert len(tokens) == 100
+
+
+class TestVideoShareCreate:
+    """VideoShare.create 工厂方法。"""
+
+    def test_create_minimal(self):
+        share = VideoShare.create(video_id="vid-1", user_id="user-1")
+        assert share.video_id == "vid-1"
+        assert share.user_id == "user-1"
+        assert share.id  # 自动生成
+        assert share.share_token  # 自动生成
         assert share.password_hash is None
         assert share.expires_at is None
-        assert share.is_active is True
         assert share.view_count == 0
         assert share.download_count == 0
+        assert share.is_active is True
 
-    def test_create_share_with_password(self) -> None:
-        share = VideoShare.create(
-            video_id="vid_001",
-            user_id="user_001",
-            password="secret123",
-        )
-        assert share.has_password is True
-        assert share.verify_password("secret123") is True
-        assert share.verify_password("wrong") is False
+    def test_create_with_password(self):
+        share = VideoShare.create(video_id="vid-1", user_id="user-1", password="secret123")
+        assert share.password_hash is not None
+        assert share.password_hash != "secret123"  # 已哈希
+        assert len(share.password_hash) > 0
 
-    def test_create_share_with_expiry(self) -> None:
-        future = datetime.now(timezone.utc) + timedelta(days=7)
-        share = VideoShare.create(
-            video_id="vid_001",
-            user_id="user_001",
-            expires_at=future,
-        )
-        assert share.expires_at == future
-        assert share.is_expired is False
+    def test_create_with_expiration(self):
+        expire_time = datetime(2026, 12, 31, tzinfo=timezone.utc)
+        share = VideoShare.create(video_id="vid-1", user_id="user-1", expires_at=expire_time)
+        assert share.expires_at == expire_time
 
-    def test_create_share_past_expiry_raises(self) -> None:
-        past = datetime.now(timezone.utc) - timedelta(days=1)
-        with pytest.raises(ValueError, match="past"):
-            VideoShare.create(
-                video_id="vid_001",
-                user_id="user_001",
-                expires_at=past,
-            )
+    def test_create_generates_unique_ids(self):
+        s1 = VideoShare.create(video_id="v", user_id="u")
+        s2 = VideoShare.create(video_id="v", user_id="u")
+        assert s1.id != s2.id
+        assert s1.share_token != s2.share_token
 
-    def test_create_share_empty_video_id_raises(self) -> None:
-        with pytest.raises(ValueError, match="video_id"):
-            VideoShare.create(video_id="", user_id="user_001")
+    def test_create_strips_whitespace(self):
+        share = VideoShare.create(video_id="  vid-1  ", user_id="\tuser-1\n")
+        assert share.video_id == "vid-1"
+        assert share.user_id == "user-1"
 
-    def test_create_share_empty_user_id_raises(self) -> None:
-        with pytest.raises(ValueError, match="user_id"):
-            VideoShare.create(video_id="vid_001", user_id="  ")
 
-    def test_is_expired_false_when_no_expiry(self) -> None:
-        share = _make_share()
-        assert share.is_expired is False
+class TestVideoSharePassword:
+    """密码相关方法。"""
 
-    def test_is_expired_true_when_past(self) -> None:
-        past = datetime.now(timezone.utc) - timedelta(hours=1)
-        share = _make_share(expires_at=past)
-        assert share.is_expired is True
-
-    def test_is_accessible_active_not_expired(self) -> None:
-        share = _make_share()
-        assert share.is_accessible is True
-
-    def test_is_accessible_inactive(self) -> None:
-        share = _make_share(is_active=False)
-        assert share.is_accessible is False
-
-    def test_is_accessible_expired(self) -> None:
-        past = datetime.now(timezone.utc) - timedelta(hours=1)
-        share = _make_share(expires_at=past)
-        assert share.is_accessible is False
-
-    def test_has_password_false_when_no_password(self) -> None:
-        share = _make_share()
+    def test_has_password_false_when_none(self):
+        share = VideoShare.create(video_id="v", user_id="u")
         assert share.has_password is False
 
-    def test_has_password_true_when_password_set(self) -> None:
-        share = _make_share(password="pass123")
+    def test_has_password_false_when_empty(self):
+        share = VideoShare.create(video_id="v", user_id="u", password="")
+        assert share.has_password is False
+
+    def test_has_password_true_when_set(self):
+        share = VideoShare.create(video_id="v", user_id="u", password="pass")
         assert share.has_password is True
 
-    def test_verify_no_password_always_true(self) -> None:
-        share = _make_share()  # 没有密码
-        assert share.verify_password("") is True
-        assert share.verify_password("anything") is True
-
-    def test_verify_correct_password(self) -> None:
-        share = _make_share(password="mysecret")
+    def test_verify_password_correct(self):
+        share = VideoShare.create(video_id="v", user_id="u", password="mysecret")
         assert share.verify_password("mysecret") is True
 
-    def test_verify_wrong_password(self) -> None:
-        share = _make_share(password="mysecret")
+    def test_verify_password_wrong(self):
+        share = VideoShare.create(video_id="v", user_id="u", password="mysecret")
         assert share.verify_password("wrong") is False
 
-    def test_verify_empty_password_with_password_set(self) -> None:
-        share = _make_share(password="mysecret")
+    def test_verify_password_no_password_set(self):
+        share = VideoShare.create(video_id="v", user_id="u")
+        # 没有设置密码时，任何输入都通过（免密访问）
+        assert share.verify_password("anything") is True
+        assert share.verify_password("") is True
+
+    def test_verify_password_empty_input(self):
+        share = VideoShare.create(video_id="v", user_id="u", password="pass")
         assert share.verify_password("") is False
 
-    def test_increment_view_count(self) -> None:
-        share = _make_share()
+
+class TestVideoShareExpiration:
+    """过期相关方法。"""
+
+    def test_not_expired_when_no_expiry(self):
+        share = VideoShare.create(video_id="v", user_id="u")
+        assert share.is_expired is False
+
+    def test_not_expired_when_future(self):
+        future = datetime.now(timezone.utc) + timedelta(days=7)
+        share = VideoShare.create(video_id="v", user_id="u", expires_at=future)
+        assert share.is_expired is False
+
+    def test_expired_when_past(self):
+        share = VideoShare.create(video_id="v", user_id="u")
+        # 直接设置过去的过期时间（create 方法会阻止过期时间在过去）
+        share.expires_at = datetime.now(timezone.utc) - timedelta(days=1)
+        assert share.is_expired is True
+
+    def test_create_rejects_past_expiry(self):
+        """create 方法拒绝过去的过期时间。"""
+        past = datetime.now(timezone.utc) - timedelta(days=1)
+        with pytest.raises(ValueError, match="expires_at cannot be in the past"):
+            VideoShare.create(video_id="v", user_id="u", expires_at=past)
+
+
+class TestVideoShareAccessible:
+    """可访问性判断。"""
+
+    def test_active_no_expiry_is_accessible(self):
+        share = VideoShare.create(video_id="v", user_id="u")
+        assert share.is_accessible is True
+
+    def test_inactive_not_accessible(self):
+        share = VideoShare.create(video_id="v", user_id="u")
+        share.revoke()
+        assert share.is_accessible is False
+
+    def test_expired_not_accessible(self):
+        share = VideoShare.create(video_id="v", user_id="u")
+        # 直接设置过去的过期时间
+        share.expires_at = datetime.now(timezone.utc) - timedelta(days=1)
+        assert share.is_accessible is False
+
+
+class TestVideoShareCounts:
+    """计数相关方法。"""
+
+    def test_initial_view_count_zero(self):
+        share = VideoShare.create(video_id="v", user_id="u")
+        assert share.view_count == 0
+
+    def test_increment_view_count(self):
+        share = VideoShare.create(video_id="v", user_id="u")
         share.increment_view_count()
         assert share.view_count == 1
         share.increment_view_count()
-        assert share.view_count == 2
+        share.increment_view_count()
+        assert share.view_count == 3
 
-    def test_increment_download_count(self) -> None:
-        share = _make_share()
+    def test_initial_download_count_zero(self):
+        share = VideoShare.create(video_id="v", user_id="u")
+        assert share.download_count == 0
+
+    def test_increment_download_count(self):
+        share = VideoShare.create(video_id="v", user_id="u")
         share.increment_download_count()
-        assert share.download_count == 1
+        share.increment_download_count()
+        assert share.download_count == 2
 
-    def test_revoke_sets_inactive(self) -> None:
-        share = _make_share()
+
+class TestVideoShareRevoke:
+    """撤销分享。"""
+
+    def test_revoke_deactivates(self):
+        share = VideoShare.create(video_id="v", user_id="u")
+        assert share.is_active is True
         share.revoke()
         assert share.is_active is False
-        assert share.is_accessible is False
 
-
-class TestCreateShareUseCase:
-    def test_create_success(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        video_repo.get.return_value = _make_video()
-        share_repo.create.side_effect = lambda s: s
-
-        use_case = CreateShareUseCase(share_repo, video_repo)
-        cmd = CreateShareCommand(video_id="vid_001", user_id="user_001")
-        result = use_case.execute(cmd)
-
-        assert result.video_id == "vid_001"
-        assert result.user_id == "user_001"
-        share_repo.create.assert_called_once()
-
-    def test_create_with_password(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        video_repo.get.return_value = _make_video()
-        share_repo.create.side_effect = lambda s: s
-
-        use_case = CreateShareUseCase(share_repo, video_repo)
-        cmd = CreateShareCommand(
-            video_id="vid_001",
-            user_id="user_001",
-            password="secret",
-        )
-        result = use_case.execute(cmd)
-
-        assert result.has_password is True
-
-    def test_create_with_expiry(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        video_repo.get.return_value = _make_video()
-        share_repo.create.side_effect = lambda s: s
-
-        use_case = CreateShareUseCase(share_repo, video_repo)
-        future = datetime.now(timezone.utc) + timedelta(days=1)
-        cmd = CreateShareCommand(
-            video_id="vid_001",
-            user_id="user_001",
-            expires_at=future,
-        )
-        result = use_case.execute(cmd)
-
-        assert result.expires_at == future
-
-    def test_video_not_found_raises(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        video_repo.get.return_value = None
-
-        use_case = CreateShareUseCase(share_repo, video_repo)
-        cmd = CreateShareCommand(video_id="nonexistent", user_id="user_001")
-
-        with pytest.raises(VideoNotFoundError):
-            use_case.execute(cmd)
-
-    def test_wrong_user_cannot_share(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        video_repo.get.return_value = _make_video(user_id="other_user")
-
-        use_case = CreateShareUseCase(share_repo, video_repo)
-        cmd = CreateShareCommand(video_id="vid_001", user_id="user_001")
-
-        with pytest.raises(VideoNotFoundError):
-            use_case.execute(cmd)
-
-
-class TestGetShareByTokenUseCase:
-    def test_found_active_share(self) -> None:
-        repo = MagicMock()
-        repo.get_by_token.return_value = _make_share()
-
-        use_case = GetShareByTokenUseCase(repo)
-        result = use_case.execute("abc123xyz")
-        assert result.share_token == "abc123xyz"
-
-    def test_not_found_raises(self) -> None:
-        repo = MagicMock()
-        repo.get_by_token.return_value = None
-
-        use_case = GetShareByTokenUseCase(repo)
-        with pytest.raises(NotFoundError):
-            use_case.execute("nonexistent")
-
-    def test_inactive_share_raises_expired(self) -> None:
-        repo = MagicMock()
-        repo.get_by_token.return_value = _make_share(is_active=False)
-
-        use_case = GetShareByTokenUseCase(repo)
-        with pytest.raises(ShareExpiredError):
-            use_case.execute("token")
-
-    def test_expired_share_raises(self) -> None:
-        repo = MagicMock()
-        past = datetime.now(timezone.utc) - timedelta(days=1)
-        repo.get_by_token.return_value = _make_share(expires_at=past)
-
-        use_case = GetShareByTokenUseCase(repo)
-        with pytest.raises(ShareExpiredError):
-            use_case.execute("token")
-
-
-class TestAccessShareUseCase:
-    def test_access_no_password(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        share_repo.get_by_token.return_value = _make_share()
-        video_repo.get.return_value = _make_video()
-        share_repo.increment_view.return_value = None
-
-        use_case = AccessShareUseCase(share_repo, video_repo)
-        result = use_case.execute("abc123xyz")
-
-        assert isinstance(result, ShareAccessResult)
-        assert result.video.id == "vid_001"
-        assert result.password_verified is True
-        assert result.share.view_count == 1  # 浏览量+1
-        share_repo.increment_view.assert_called_once()
-
-    def test_access_with_correct_password(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        share_repo.get_by_token.return_value = _make_share(password="mypass")
-        video_repo.get.return_value = _make_video()
-        share_repo.increment_view.return_value = None
-
-        use_case = AccessShareUseCase(share_repo, video_repo)
-        result = use_case.execute("token", password="mypass")
-
-        assert result.password_verified is True
-
-    def test_access_password_required_but_not_provided(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        share_repo.get_by_token.return_value = _make_share(password="secret")
-        video_repo.get.return_value = _make_video()
-
-        use_case = AccessShareUseCase(share_repo, video_repo)
-
-        with pytest.raises(PasswordRequiredError):
-            use_case.execute("token", password=None)
-
-    def test_access_wrong_password(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        share_repo.get_by_token.return_value = _make_share(password="correct")
-        video_repo.get.return_value = _make_video()
-
-        use_case = AccessShareUseCase(share_repo, video_repo)
-
-        with pytest.raises(InvalidPasswordError):
-            use_case.execute("token", password="wrong")
-
-    def test_access_share_not_found(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        share_repo.get_by_token.return_value = None
-
-        use_case = AccessShareUseCase(share_repo, video_repo)
-
-        with pytest.raises(NotFoundError):
-            use_case.execute("nonexistent")
-
-    def test_access_share_expired(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        past = datetime.now(timezone.utc) - timedelta(days=1)
-        share_repo.get_by_token.return_value = _make_share(expires_at=past)
-        video_repo.get.return_value = _make_video()
-
-        use_case = AccessShareUseCase(share_repo, video_repo)
-
-        with pytest.raises(ShareExpiredError):
-            use_case.execute("token")
-
-    def test_access_video_not_found(self) -> None:
-        share_repo = MagicMock()
-        video_repo = MagicMock()
-        share_repo.get_by_token.return_value = _make_share()
-        video_repo.get.return_value = None
-
-        use_case = AccessShareUseCase(share_repo, video_repo)
-
-        with pytest.raises(VideoNotFoundError):
-            use_case.execute("token")
-
-
-class TestListSharesByVideoUseCase:
-    def test_lists_shares(self) -> None:
-        repo = MagicMock()
-        expected = [_make_share(), _make_share(share_id="share_002", token="tok2")]
-        repo.list_by_video.return_value = expected
-
-        use_case = ListSharesByVideoUseCase(repo)
-        result = use_case.execute("vid_001", "user_001")
-
-        assert len(result) == 2
-        repo.list_by_video.assert_called_once_with("vid_001", "user_001")
-
-
-class TestListSharesByUserUseCase:
-    def test_lists_with_total(self) -> None:
-        repo = MagicMock()
-        items = [_make_share(), _make_share(share_id="s2", token="t2")]
-        repo.list_by_user.return_value = items
-        repo.count_by_user.return_value = 10
-
-        use_case = ListSharesByUserUseCase(repo)
-        result_items, total = use_case.execute("user_001", skip=0, limit=2)
-
-        assert len(result_items) == 2
-        assert total == 10
-        repo.list_by_user.assert_called_once_with("user_001", skip=0, limit=2)
-
-
-class TestUpdateShareUseCase:
-    def test_update_password(self) -> None:
-        repo = MagicMock()
-        share = _make_share()
-        repo.get_by_id.return_value = share
-        repo.update.side_effect = lambda s: s
-
-        use_case = UpdateShareUseCase(repo)
-        cmd = UpdateShareCommand(
-            share_id="share_001",
-            user_id="user_001",
-            password="newpass",
-        )
-        result = use_case.execute(cmd)
-
-        assert result.has_password is True
-        assert result.verify_password("newpass") is True
-        repo.update.assert_called_once()
-
-    def test_clear_password(self) -> None:
-        repo = MagicMock()
-        share = _make_share(password="oldpass")
-        repo.get_by_id.return_value = share
-        repo.update.side_effect = lambda s: s
-
-        use_case = UpdateShareUseCase(repo)
-        cmd = UpdateShareCommand(
-            share_id="share_001",
-            user_id="user_001",
-            password="",  # 空字符串=清除密码
-        )
-        result = use_case.execute(cmd)
-
-        assert result.has_password is False
-        assert result.password_hash is None
-
-    def test_password_none_does_not_change(self) -> None:
-        repo = MagicMock()
-        share = _make_share(password="existing")
-        repo.get_by_id.return_value = share
-        repo.update.side_effect = lambda s: s
-
-        use_case = UpdateShareUseCase(repo)
-        cmd = UpdateShareCommand(
-            share_id="share_001",
-            user_id="user_001",
-            password=None,  # None=不修改
-        )
-        result = use_case.execute(cmd)
-
-        assert result.verify_password("existing") is True
-
-    def test_update_expires_at(self) -> None:
-        repo = MagicMock()
-        share = _make_share()
-        repo.get_by_id.return_value = share
-        repo.update.side_effect = lambda s: s
-
-        use_case = UpdateShareUseCase(repo)
-        future = datetime.now(timezone.utc) + timedelta(days=3)
-        cmd = UpdateShareCommand(
-            share_id="share_001",
-            user_id="user_001",
-            expires_at=future,
-        )
-        result = use_case.execute(cmd)
-
-        assert result.expires_at == future
-
-    def test_not_found_raises(self) -> None:
-        repo = MagicMock()
-        repo.get_by_id.return_value = None
-
-        use_case = UpdateShareUseCase(repo)
-        cmd = UpdateShareCommand(share_id="no", user_id="u1", password="x")
-
-        with pytest.raises(NotFoundError):
-            use_case.execute(cmd)
-
-    def test_past_expiry_raises(self) -> None:
-        repo = MagicMock()
-        repo.get_by_id.return_value = _make_share()
-
-        use_case = UpdateShareUseCase(repo)
-        past = datetime.now(timezone.utc) - timedelta(days=1)
-        cmd = UpdateShareCommand(
-            share_id="share_001",
-            user_id="user_001",
-            expires_at=past,
-        )
-
-        with pytest.raises(ValueError, match="past"):
-            use_case.execute(cmd)
-
-
-class TestRevokeShareUseCase:
-    def test_revoke_success(self) -> None:
-        repo = MagicMock()
-        repo.get_by_id.return_value = _make_share()
-        repo.delete.return_value = True
-
-        use_case = RevokeShareUseCase(repo)
-        result = use_case.execute("share_001", "user_001")
-
-        assert result is True
-        repo.delete.assert_called_once_with("share_001", "user_001")
-
-    def test_revoke_not_found_raises(self) -> None:
-        repo = MagicMock()
-        repo.get_by_id.return_value = None
-
-        use_case = RevokeShareUseCase(repo)
-
-        with pytest.raises(NotFoundError):
-            use_case.execute("nonexistent", "user_001")
-
-
-class TestRecordShareDownloadUseCase:
-    def test_record_success(self) -> None:
-        repo = MagicMock()
-        repo.get_by_token.return_value = _make_share()
-        repo.increment_download.return_value = None
-
-        use_case = RecordShareDownloadUseCase(repo)
-        use_case.execute("token")
-
-        repo.increment_download.assert_called_once()
-
-    def test_record_with_password(self) -> None:
-        repo = MagicMock()
-        repo.get_by_token.return_value = _make_share(password="pass")
-        repo.increment_download.return_value = None
-
-        use_case = RecordShareDownloadUseCase(repo)
-        use_case.execute("token", password="pass")
-
-        repo.increment_download.assert_called_once()
-
-    def test_record_wrong_password_raises(self) -> None:
-        repo = MagicMock()
-        repo.get_by_token.return_value = _make_share(password="correct")
-
-        use_case = RecordShareDownloadUseCase(repo)
-
-        with pytest.raises(InvalidPasswordError):
-            use_case.execute("token", password="wrong")
-
-    def test_record_share_not_found(self) -> None:
-        repo = MagicMock()
-        repo.get_by_token.return_value = None
-
-        use_case = RecordShareDownloadUseCase(repo)
-
-        with pytest.raises(NotFoundError):
-            use_case.execute("nonexistent")
-
-    def test_record_expired_share(self) -> None:
-        repo = MagicMock()
-        past = datetime.now(timezone.utc) - timedelta(days=1)
-        repo.get_by_token.return_value = _make_share(expires_at=past)
-
-        use_case = RecordShareDownloadUseCase(repo)
-
-        with pytest.raises(ShareExpiredError):
-            use_case.execute("token")
+    def test_revoke_idempotent(self):
+        share = VideoShare.create(video_id="v", user_id="u")
+        share.revoke()
+        share.revoke()  # 再次调用不报错
+        assert share.is_active is False

tests/unit/test_voice_extractor_pure.py

@@ -0,0 +1,260 @@
+"""VoiceExtractor 纯逻辑单测 — 命令构建 + 边界用例.
+
+通过 mock run_ffmpeg 验证 FFmpeg 命令参数是否正确，
+不实际执行 FFmpeg，确保测试轻量快速。
+"""
+
+from __future__ import annotations
+
+import os
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+from worker_app.tasks.voice_extraction import VoiceExtractor
+
+
+class TestVoiceExtractorExtractVoiceCommand:
+    """extract_voice 命令构建测试."""
+
+    def test_default_params_correct_command(self):
+        """默认参数下 FFmpeg 命令正确."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            result = extractor.extract_voice("/tmp/input.mp4", "/tmp/output.mp3")
+
+        assert result == "/tmp/output.mp3"
+        mock_run.assert_called_once()
+        cmd = mock_run.call_args[0][0]
+
+        # 基本结构验证
+        assert cmd[0] == "ffmpeg"
+        assert "-y" in cmd
+        assert cmd[cmd.index("-i") + 1] == "/tmp/input.mp4"
+        assert "-vn" in cmd  # 无视频流
+        assert cmd[-1] == "/tmp/output.mp3"
+
+        # 音频滤镜验证
+        af_idx = cmd.index("-af")
+        af_value = cmd[af_idx + 1]
+        assert "highpass=f=200" in af_value
+        assert "afftdn=bn=20" in af_value
+        assert "bandpass=f=300:width_type=h:width=3000" in af_value
+        assert "loudnorm" in af_value
+
+        # 编码验证
+        assert "libmp3lame" in cmd
+        assert "-q:a" in cmd
+        assert cmd[cmd.index("-q:a") + 1] == "2"
+
+    def test_custom_highpass(self):
+        """自定义 highpass 频率."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            extractor.extract_voice("/tmp/in.mp4", "/tmp/out.mp3", highpass=500)
+
+        cmd = mock_run.call_args[0][0]
+        af_value = cmd[cmd.index("-af") + 1]
+        assert "highpass=f=500" in af_value
+
+    def test_custom_bandpass_freq(self):
+        """自定义 bandpass 中心频率."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            extractor.extract_voice("/tmp/in.mp4", "/tmp/out.mp3", bandpass_freq=500)
+
+        cmd = mock_run.call_args[0][0]
+        af_value = cmd[cmd.index("-af") + 1]
+        assert "bandpass=f=500:" in af_value
+
+    def test_custom_bandpass_width(self):
+        """自定义 bandpass 宽度."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            extractor.extract_voice("/tmp/in.mp4", "/tmp/out.mp3", bandpass_width=5000)
+
+        cmd = mock_run.call_args[0][0]
+        af_value = cmd[cmd.index("-af") + 1]
+        assert "width=5000" in af_value
+
+    def test_custom_noise_reduction(self):
+        """自定义降噪强度."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            extractor.extract_voice("/tmp/in.mp4", "/tmp/out.mp3", noise_reduction=30)
+
+        cmd = mock_run.call_args[0][0]
+        af_value = cmd[cmd.index("-af") + 1]
+        assert "afftdn=bn=30" in af_value
+
+    def test_filter_order_is_correct(self):
+        """滤镜顺序：highpass → 降噪 → bandpass → loudnorm."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            extractor.extract_voice("/tmp/in.mp4", "/tmp/out.mp3")
+
+        cmd = mock_run.call_args[0][0]
+        af_value = cmd[cmd.index("-af") + 1]
+
+        hp_pos = af_value.index("highpass")
+        dn_pos = af_value.index("afftdn")
+        bp_pos = af_value.index("bandpass")
+        ln_pos = af_value.index("loudnorm")
+
+        assert hp_pos < dn_pos < bp_pos < ln_pos
+
+    def test_creates_output_directory(self, tmp_path):
+        """输出目录不存在时自动创建."""
+        out_dir = tmp_path / "nested" / "deep"
+        out_file = out_dir / "voice.mp3"
+
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg"):
+            extractor.extract_voice("/tmp/in.mp4", str(out_file))
+
+        assert out_dir.exists()
+        assert out_dir.is_dir()
+
+    def test_returns_output_path(self):
+        """返回值为输出路径."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg"):
+            result = extractor.extract_voice("/tmp/in.mp4", "/tmp/voice.mp3")
+
+        assert result == "/tmp/voice.mp3"
+
+
+class TestVoiceExtractorExtractBackgroundCommand:
+    """extract_background 命令构建测试."""
+
+    def test_default_params_correct_command(self):
+        """默认参数下 FFmpeg 命令正确."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            result = extractor.extract_background("/tmp/input.mp4", "/tmp/output.mp3")
+
+        assert result == "/tmp/output.mp3"
+        mock_run.assert_called_once()
+        cmd = mock_run.call_args[0][0]
+
+        # 基本结构
+        assert cmd[0] == "ffmpeg"
+        assert "-y" in cmd
+        assert cmd[cmd.index("-i") + 1] == "/tmp/input.mp4"
+        assert "-vn" in cmd
+        assert cmd[-1] == "/tmp/output.mp3"
+
+        # 音频滤镜
+        af_idx = cmd.index("-af")
+        af_value = cmd[af_idx + 1]
+        assert "lowpass=f=200" in af_value
+        assert "loudnorm" in af_value
+
+        # 编码
+        assert "libmp3lame" in cmd
+
+    def test_custom_lowpass_freq(self):
+        """自定义 lowpass 频率."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            extractor.extract_background("/tmp/in.mp4", "/tmp/out.mp3", lowpass=500)
+
+        cmd = mock_run.call_args[0][0]
+        af_value = cmd[cmd.index("-af") + 1]
+        assert "lowpass=f=500" in af_value
+
+    def test_filter_order_background(self):
+        """背景音滤镜顺序：lowpass → loudnorm."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            extractor.extract_background("/tmp/in.mp4", "/tmp/out.mp3")
+
+        cmd = mock_run.call_args[0][0]
+        af_value = cmd[cmd.index("-af") + 1]
+
+        lp_pos = af_value.index("lowpass")
+        ln_pos = af_value.index("loudnorm")
+        assert lp_pos < ln_pos
+
+    def test_background_creates_output_directory(self, tmp_path):
+        """背景音输出目录不存在时自动创建."""
+        out_dir = tmp_path / "bgm" / "tracks"
+        out_file = out_dir / "bg.mp3"
+
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg"):
+            extractor.extract_background("/tmp/in.mp4", str(out_file))
+
+        assert out_dir.exists()
+
+
+class TestVoiceExtractorEdgeCases:
+    """边界情况测试."""
+
+    def test_zero_highpass(self):
+        """highpass=0 时的行为（极端低值）."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            extractor.extract_voice("/tmp/in.mp4", "/tmp/out.mp3", highpass=0)
+
+        cmd = mock_run.call_args[0][0]
+        af_value = cmd[cmd.index("-af") + 1]
+        assert "highpass=f=0" in af_value
+
+    def test_zero_bandpass_freq(self):
+        """bandpass_freq=0 时的极端情况."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            extractor.extract_voice("/tmp/in.mp4", "/tmp/out.mp3", bandpass_freq=0)
+
+        cmd = mock_run.call_args[0][0]
+        af_value = cmd[cmd.index("-af") + 1]
+        assert "bandpass=f=0:" in af_value
+
+    def test_very_high_noise_reduction(self):
+        """极高降噪强度."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            extractor.extract_voice("/tmp/in.mp4", "/tmp/out.mp3", noise_reduction=100)
+
+        cmd = mock_run.call_args[0][0]
+        af_value = cmd[cmd.index("-af") + 1]
+        assert "afftdn=bn=100" in af_value
+
+    def test_negative_lowpass_allowed(self):
+        """lowpass 负值（由调用方保证合法性，函数不做校验）."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg") as mock_run:
+            extractor.extract_background("/tmp/in.mp4", "/tmp/out.mp3", lowpass=-10)
+
+        cmd = mock_run.call_args[0][0]
+        af_value = cmd[cmd.index("-af") + 1]
+        assert "lowpass=f=-10" in af_value
+
+    def test_run_ffmpeg_propagates_error(self):
+        """_run_ffmpeg 抛出异常时向上传递."""
+        extractor = VoiceExtractor()
+        with patch.object(VoiceExtractor, "_run_ffmpeg", side_effect=RuntimeError("FFmpeg failed")):
+            with pytest.raises(RuntimeError, match="FFmpeg failed"):
+                extractor.extract_voice("/tmp/in.mp4", "/tmp/out.mp3")
+
+    def test_voice_extractor_is_static_method(self):
+        """_run_ffmpeg 是静态方法，可在类上直接调用."""
+        # 验证 VoiceExtractor 可以直接实例化（无需参数）
+        extractor = VoiceExtractor()
+        assert extractor is not None
+
+    def test_multiple_extractions_same_instance(self):
+        """同一个实例可多次执行提取."""
+        extractor = VoiceExtractor()
+        call_count = 0
+
+        def fake_run(cmd):
+            nonlocal call_count
+            call_count += 1
+
+        with patch.object(VoiceExtractor, "_run_ffmpeg", side_effect=fake_run):
+            extractor.extract_voice("/tmp/a.mp4", "/tmp/a_voice.mp3")
+            extractor.extract_background("/tmp/a.mp4", "/tmp/a_bg.mp3")
+
+        assert call_count == 2