style: black格式化test_api_settings.py格式修复

.gitea/workflows/acr-cleanup.yml

@@ -1,162 +0,0 @@
-name: ACR Cleanup
-
-on:
-  schedule:
-    - cron: '0 19 * * *'  # UTC 19:00 = 北京时间凌晨3:00
-  workflow_dispatch:
-    inputs:
-      pr_sha:
-        description: "PR commit SHA（仅清理指定PR镜像，留空则全量清理）"
-        required: false
-        default: ""
-      dry_run:
-        description: "预览模式（dry-run），不实际删除"
-        required: false
-        default: "true"
-  pull_request_target:
-    types: [closed]
-    branches: [develop, main]
-
-concurrency:
-  group: acr-cleanup-${{ gitea.ref }}
-  cancel-in-progress: false
-
-jobs:
-  cleanup:
-    name: ACR Image Cleanup
-    runs-on: ci-l2
-    timeout-minutes: 20
-    permissions:
-      contents: read
-    env:
-      ACR_REGISTRY: xiaoxia-registry.cn-hangzhou.cr.aliyuncs.com
-      ACR_NAMESPACE: xiaoxiakeji
-      ACR_SERVICE: registry.aliyuncs.com:cn-hangzhou:china:cri-fvec8o9q4mmxrkaa
-      GITEA_URL: https://git.xiaoxiajianji.com
-      GITEA_REPO: xiaoxia/xiaoxia-saas
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: '3.12'
-
-      # ====== Cron模式：获取staging运行中镜像作为白名单 ======
-      - name: Get staging running images (whitelist)
-        id: protected_images
-        if: gitea.event_name != 'pull_request_target' && !gitea.event.inputs.pr_sha
-        env:
-          STAGING_SSH_KEY: ${{ secrets.PREVIEW_SSH_KEY }}
-        run: |
-          set +e
-          echo "获取staging服务器运行中镜像作为白名单..."
-          mkdir -p ~/.ssh
-          echo "$STAGING_SSH_KEY" > ~/.ssh/id_rsa
-          chmod 600 ~/.ssh/id_rsa
-
-          staging_host="${STAGING_SSH_HOST:-47.98.113.167}"
-          staging_port="${STAGING_SSH_PORT:-22222}"
-
-          ssh-keyscan -p "$staging_port" -H "$staging_host" >> ~/.ssh/known_hosts 2>/dev/null
-
-          # 获取所有运行容器的镜像，提取tag部分
-          IMAGES=$(ssh -p "$staging_port" -i ~/.ssh/id_rsa -o StrictHostKeyChecking=no \
-            "root@$staging_host" "docker ps --format '{{.Image}}' 2>/dev/null" 2>/dev/null | grep -v "^$" | sort -u)
-
-          PROTECTED_TAGS=""
-          if [ -n "$IMAGES" ]; then
-            while IFS= read -r img; do
-              # 从完整镜像名中提取tag（最后一个冒号后）
-              tag=$(echo "$img" | rev | cut -d: -f1 | rev)
-              if [ -n "$tag" ] && [ "$tag" != "latest" ] && [ ${#tag} -gt 5 ]; then
-                if [ -z "$PROTECTED_TAGS" ]; then
-                  PROTECTED_TAGS="$tag"
-                else
-                  PROTECTED_TAGS="$PROTECTED_TAGS,$tag"
-                fi
-              fi
-            done <<< "$IMAGES"
-          fi
-
-          echo "staging运行中镜像tag: ${PROTECTED_TAGS:-（无）}"
-          echo "protected_tags=$PROTECTED_TAGS" >> $GITEA_OUTPUT
-
-      # ====== Docker登录 ======
-      - name: Docker login to ACR
-        env:
-          ACR_USERNAME: ${{ secrets.ACR_USERNAME }}
-          ACR_PASSWORD: ${{ secrets.ACR_PASSWORD }}
-        run: |
-          printf '%s' "$ACR_PASSWORD" | docker login "$ACR_REGISTRY" -u "$ACR_USERNAME" --password-stdin
-
-      # ====== 模式1：PR关闭时清理 ======
-      - name: Cleanup PR images (PR closed)
-        if: gitea.event_name == 'pull_request_target'
-        env:
-          ACR_USERNAME: ${{ secrets.ACR_USERNAME }}
-          ACR_PASSWORD: ${{ secrets.ACR_PASSWORD }}
-          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
-          PR_SHA: ${{ gitea.event.pull_request.head.sha }}
-          PR_NUMBER: ${{ gitea.event.pull_request.number }}
-        run: |
-          echo "============================================"
-          echo "  PR #$PR_NUMBER 已关闭，清理对应镜像"
-          echo "  Head SHA: ${PR_SHA::12}"
-          echo "============================================"
-          echo ""
-          python3 scripts/ci/acr_cleanup.py \
-            --pr-sha "$PR_SHA" \
-            --execute
-
-      # ====== 模式2：Cron全量清理 ======
-      - name: Full cleanup (cron / manual)
-        if: gitea.event_name != 'pull_request_target' && !gitea.event.inputs.pr_sha
-        env:
-          ACR_USERNAME: ${{ secrets.ACR_USERNAME }}
-          ACR_PASSWORD: ${{ secrets.ACR_PASSWORD }}
-          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
-          PROTECTED_TAGS: ${{ steps.protected_images.outputs.protected_tags }}
-          DRY_RUN_INPUT: ${{ gitea.event.inputs.dry_run }}
-        run: |
-          echo "============================================"
-          echo "  ACR 全量清理（${{ gitea.event_name }}）"
-          echo "============================================"
-          echo ""
-
-          # 决定是否dry-run
-          DRY_RUN_FLAG=""
-          if [ "$DRY_RUN_INPUT" = "true" ]; then
-            DRY_RUN_FLAG="--dry-run"
-            echo "模式: 预览模式 (dry-run)"
-          else
-            echo "模式: 执行模式"
-          fi
-          echo ""
-
-          python3 scripts/ci/acr_cleanup.py \
-            --keep 20 \
-            --protected-tags "$PROTECTED_TAGS" \
-            $DRY_RUN_FLAG
-
-      # ====== 模式3：手动指定PR SHA清理 ======
-      - name: Cleanup specific PR image (manual)
-        if: gitea.event_name == 'workflow_dispatch' && gitea.event.inputs.pr_sha
-        env:
-          ACR_USERNAME: ${{ secrets.ACR_USERNAME }}
-          ACR_PASSWORD: ${{ secrets.ACR_PASSWORD }}
-          PR_SHA: ${{ gitea.event.inputs.pr_sha }}
-          DRY_RUN_INPUT: ${{ gitea.event.inputs.dry_run }}
-        run: |
-          echo "手动清理PR镜像: ${PR_SHA::12}"
-          echo ""
-
-          DRY_RUN_FLAG=""
-          if [ "$DRY_RUN_INPUT" = "true" ]; then
-            DRY_RUN_FLAG="--dry-run"
-          fi
-
-          python3 scripts/ci/acr_cleanup.py \
-            --pr-sha "$PR_SHA" \
-            $DRY_RUN_FLAG

.gitea/workflows/ci-pipeline.yml

@@ -26,7 +26,7 @@ concurrency:
   cancel-in-progress: ${{ gitea.event_name == 'pull_request' }}
 env:
   CI_PG_HOST: host.docker.internal
-  CI_LOCAL_PG_PORT: "5432"
+  CI_PG_PORT: "5432"
   CI_PG_USER: postgres
   CI_PG_PASSWORD: postgres
   CI_PG_DB: xiaoxia_saas
@@ -262,7 +262,7 @@ jobs:
     permissions:
       contents: read
     env:
-      DATABASE_URL: postgresql+psycopg://${{ env.CI_PG_USER }}:${{ env.CI_PG_PASSWORD }}@${{ env.CI_PG_HOST }}:${{ env.CI_LOCAL_PG_PORT }}/${{ env.CI_PG_DB }}
+      DATABASE_URL: postgresql+psycopg://${{ env.CI_PG_USER }}:${{ env.CI_PG_PASSWORD }}@${{ env.CI_PG_HOST }}:${{ env.CI_PG_PORT }}/${{ env.CI_PG_DB }}
       USE_IN_MEMORY_DB: 'false'
       CI_USE_SHARED_PG: 'true'
     steps:
@@ -411,7 +411,7 @@ jobs:
       - validate-type-check
       - validate-migration
     env:
-      DATABASE_URL: postgresql+psycopg://${{ env.CI_PG_USER }}:${{ env.CI_PG_PASSWORD }}@${{ env.CI_PG_HOST }}:${{ env.CI_LOCAL_PG_PORT }}/${{ env.CI_PG_DB }}
+      DATABASE_URL: postgresql+psycopg://${{ env.CI_PG_USER }}:${{ env.CI_PG_PASSWORD }}@${{ env.CI_PG_HOST }}:${{ env.CI_PG_PORT }}/${{ env.CI_PG_DB }}
       USE_IN_MEMORY_DB: 'false'
       CI_USE_SHARED_PG: 'true'
       OSS_ACCESS_KEY_ID: placeholder
@@ -1230,7 +1230,7 @@ jobs:
     runs-on: runtime-builder
     timeout-minutes: ${{ matrix.timeout }}
     needs:
-    if: startsWith(github.ref, 'refs/tags/v') || (github.event_name == 'push' && github.ref_name == 'main')
+    if: startsWith(github.ref, 'refs/tags/v')
     strategy:
       fail-fast: false
       matrix:
@@ -1307,16 +1307,10 @@ jobs:
       run: |
         set -eu
         REGISTRY="xiaoxia-registry.cn-hangzhou.cr.aliyuncs.com/xiaoxiakeji"
-        # 根据ref类型设置镜像标签：tag用版本号，分支用分支名+sha
-        if [[ "$GITHUB_REF" == refs/tags/* ]]; then
-          TAG_NAME="${GITHUB_REF_NAME}"
-        else
-          TAG_NAME="${GITHUB_REF_NAME}-${GITHUB_SHA::8}"
-        fi
-        IMAGE_TAG="${REGISTRY}/${{ matrix.image_name }}:${TAG_NAME}"
+        IMAGE_TAG="${REGISTRY}/${{ matrix.image_name }}:${GITHUB_REF_NAME}"
         CACHE_REF="${REGISTRY}/${{ matrix.cache_name }}:main"
 
-        EXTRA_BUILD_ARGS="APP_VERSION=\"${TAG_NAME}\""
+        EXTRA_BUILD_ARGS="APP_VERSION=\"${GITHUB_REF_NAME}\""
         if [ "${{ matrix.service }}" = "web" ]; then
           EXTRA_BUILD_ARGS="$EXTRA_BUILD_ARGS NGINX_CONF=infra/docker/nginx-production.conf"
         fi
@@ -1614,89 +1608,4 @@ jobs:
         [ ${{ job.status }} = "success" ] || STATUS="error"
         START_TIME=""
         [ -f /tmp/ci_job_start_time ] && START_TIME=$(cat /tmp/ci_job_start_time)
-        python3 scripts/ci/ci_trace_report.py --service xiaoxia-saas-ci --status $STATUS --start-time "$START_TIME" || true
-
-  canary-release:
-    name: Canary Release to Production
-    runs-on: runtime-builder
-    timeout-minutes: 120
-    concurrency:
-      group: canary-release-production
-      cancel-in-progress: false
-    if: github.event_name == 'push' && github.ref_name == 'main'
-    needs:
-    - build-production
-    - staging-api-tests
-    steps:
-    - name: Checkout code
-      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: Record job start time
-      shell: sh
-      run: bash scripts/ci/step_timer_start.sh
-    - name: Notify canary release start
-      continue-on-error: true
-      shell: sh
-      env:
-        CI_NOTIFY_WEBHOOK: ${{ secrets.CI_NOTIFY_WEBHOOK }}
-      run: |
-        set +e
-        NOTIFY_MODE=start JOB_NAME="Canary Release" python3 scripts/ci_notify.py
-    - name: Install SSH client
-      shell: sh
-      run: |
-        set -eu
-        apt-get update -qq && apt-get install -y -qq openssh-client curl >/dev/null 2>&1
-        echo "openssh-client installed"
-    - name: Run canary release
-      shell: bash
-      env:
-        PRODUCTION_SSH_HOST: ${{ secrets.PRODUCTION_SSH_HOST }}
-        PRODUCTION_SSH_USER: ${{ secrets.PRODUCTION_SSH_USER }}
-        PRODUCTION_SSH_PORT: ${{ secrets.PRODUCTION_SSH_PORT }}
-        PRODUCTION_SSH_KEY: ${{ secrets.PRODUCTION_SSH_KEY }}
-        ACR_USERNAME: ${{ secrets.ACR_USERNAME }}
-        ACR_PASSWORD: ${{ secrets.ACR_PASSWORD }}
-        CI_NOTIFY_WEBHOOK: ${{ secrets.CI_NOTIFY_WEBHOOK }}
-      run: |
-        set -eu
-        IMAGE_TAG="main-${GITHUB_SHA::8}"
-        export IMAGE_TAG
-        echo "Canary release version: $IMAGE_TAG"
-        bash scripts/ci/canary_release.sh
-    - name: Job duration summary
-      if: always()
-      shell: sh
-      run: bash scripts/ci/step_timer_end.sh
-    - name: Notify on success
-      continue-on-error: true
-      if: success()
-      shell: sh
-      env:
-        CI_NOTIFY_WEBHOOK: ${{ secrets.CI_NOTIFY_WEBHOOK }}
-      run: |
-        set +e
-        NOTIFY_MODE=success JOB_NAME="Canary Release" python3 scripts/ci_notify.py
-    - name: Notify on failure
-      continue-on-error: true
-      if: failure()
-      shell: sh
-      env:
-        CI_NOTIFY_WEBHOOK: ${{ secrets.CI_NOTIFY_WEBHOOK }}
-      run: |
-        set +e
-        NOTIFY_MODE=failure JOB_NAME="Canary Release" python3 scripts/ci_notify.py
-    - name: Report CI trace
-      if: always()
-      shell: sh
-      env:
-        AGENTLOOP_LICENSE_KEY: ${{ secrets.AGENTLOOP_LICENSE_KEY }}
-      run: |
-        STATUS="ok"
-        [ ${{ job.status }} = "success" ] || STATUS="error"
-        START_TIME=""
-        [ -f /tmp/ci_job_start_time ] && START_TIME=$(cat /tmp/ci_job_start_time)
-        python3 scripts/ci/ci_trace_report.py --service xiaoxia-saas-ci --status $STATUS --start-time "$START_TIME" || true
+        python3 scripts/ci/ci_trace_report.py --service xiaoxia-saas-ci --status $STATUS --start-time "$START_TIME" || true

.gitea/workflows/preview-deploy.yml

@@ -115,11 +115,11 @@ jobs:
             fi
             if [ "$CACHE_VALID" = "false" ]; then
               echo "Cache miss or invalid: running npm ci..."
-              if ! npm ci; then
+              if ! npm ci --include=dev; then
                 echo "npm ci failed, cleaning node_modules and retrying..."
                 rm -rf node_modules
                 mkdir -p node_modules
-                npm ci
+                npm ci --include=dev
               fi
               echo "$PACKAGE_LOCK_HASH" > "$CACHE_HASH_FILE"
               echo "Dependencies installed, cache updated"

alembic/versions/052_generation_task_bgm_config.py

@@ -1,64 +0,0 @@
-"""#642 - 生成任务新增 bgm_config 字段
-
-Revision ID: 052_generation_task_bgm_config
-Revises: 051_generation_task_resolution
-Create Date: 2026-07-25
-
-Changes:
-1. generation_tasks 表新增 bgm_config 字段（JSON类型），存储用户自定义BGM配置
-2. 为空时使用默认空字典
-
-背景：
-#642 一键生成支持自定义BGM 功能在 SQLAlchemy 模型中加了 bgm_config 字段，
-但遗漏了 alembic migration，导致 staging 环境数据库没有该列，
-创建生成任务时直接 500。
-"""
-
-import sqlalchemy as sa
-
-from alembic import context, op
-
-revision = "052_generation_task_bgm_config"
-down_revision = "051_generation_task_resolution"
-branch_labels = None
-depends_on = None
-
-
-def upgrade() -> None:
-    conn = op.get_bind()
-    if context.get_context().dialect.name == "postgresql":
-        # 检查列是否已存在（幂等）
-        result = conn.execute(
-            sa.text(
-                "SELECT column_name FROM information_schema.columns "
-                "WHERE table_name = 'generation_tasks' AND column_name = 'bgm_config'"
-            )
-        )
-        if result.scalar() is not None:
-            return
-
-    op.add_column(
-        "generation_tasks",
-        sa.Column(
-            "bgm_config",
-            sa.JSON,
-            nullable=False,
-            server_default=sa.text("'{}'::json"),
-        ),
-    )
-
-
-def downgrade() -> None:
-    conn = op.get_bind()
-    if context.get_context().dialect.name == "postgresql":
-        # 检查列是否存在（幂等）
-        result = conn.execute(
-            sa.text(
-                "SELECT column_name FROM information_schema.columns "
-                "WHERE table_name = 'generation_tasks' AND column_name = 'bgm_config'"
-            )
-        )
-        if result.scalar() is None:
-            return
-
-    op.drop_column("generation_tasks", "bgm_config")

apps/web/src/pages/assets/components/AssetCard.tsx

@@ -1,128 +0,0 @@
-import React from "react"
-import {
-  PlayCircleOutlined,
-  CheckOutlined,
-  DeleteOutlined,
-  ExperimentOutlined,
-  LoadingOutlined,
-  CloseCircleOutlined,
-} from "@ant-design/icons"
-import { Popconfirm } from "antd"
-import type { AssetItem } from "@/pages/assets/types"
-import { thumbGradient } from "@/pages/assets/utils/asset"
-import { kindIcon } from "@/pages/assets/utils/kindIcon"
-import { StatusPill } from "./AssetSkeleton"
-
-/* ============================================================
- * AssetCard — 素材卡片（网格视图）
- * ============================================================ */
-export interface AssetCardProps {
-  asset: AssetItem
-  selected: boolean
-  diagnosing?: boolean
-  onToggle: () => void
-  onDiagnose: () => void
-  onPlay: () => void
-  onDelete: () => void
-}
-
-const AssetCard: React.FC<AssetCardProps> = ({
-  asset,
-  selected,
-  diagnosing,
-  onToggle,
-  onDiagnose,
-  onPlay,
-  onDelete,
-}) => (
-  <div className={`xx-asset-card${selected ? " xx-asset-card-selected" : ""}`} onClick={onToggle}>
-    {/* 缩略图区 */}
-    <div className="xx-asset-thumb" style={{ background: thumbGradient(asset.kind) }}>
-      {asset.thumbUrl ? (
-        <img src={asset.thumbUrl} alt={asset.name} />
-      ) : (
-        <span className="xx-asset-thumb-placeholder">
-          {asset.loading ? <LoadingOutlined /> : kindIcon(asset.kind)}
-        </span>
-      )}
-
-      {/* 处理中遮罩 */}
-      {asset.loading && (
-        <div className="xx-asset-thumb-overlay xx-asset-thumb-processing">
-          <LoadingOutlined />
-          <span>处理中</span>
-        </div>
-      )}
-
-      {/* 失败状态标识 */}
-      {asset.status === "bad" && asset.statusLabel === "处理失败" && (
-        <div className="xx-asset-thumb-overlay xx-asset-thumb-failed">
-          <CloseCircleOutlined />
-          <span>处理失败</span>
-        </div>
-      )}
-
-      {/* 视频/配音类显示播放按钮（处理中/失败不显示） */}
-      {asset.kind === "video" && !asset.loading && asset.status !== "bad" && (
-        <span
-          className="xx-asset-play"
-          onClick={(e) => {
-            e.stopPropagation()
-            onPlay()
-          }}
-        >
-          <PlayCircleOutlined />
-        </span>
-      )}
-
-      {/* 删除按钮 */}
-      <Popconfirm
-        title="确认删除"
-        description="删除后不可恢复，确定要删除这个素材吗？"
-        onConfirm={(e) => {
-          e?.stopPropagation()
-          onDelete()
-        }}
-        onCancel={(e) => e?.stopPropagation()}
-        okText="删除"
-        cancelText="取消"
-        okButtonProps={{ danger: true }}
-      >
-        <span className="xx-asset-delete" onClick={(e) => e.stopPropagation()}>
-          <DeleteOutlined />
-        </span>
-      </Popconfirm>
-
-      {/* 选中态勾选 */}
-      {selected && (
-        <span className="xx-asset-check">
-          <CheckOutlined />
-        </span>
-      )}
-    </div>
-
-    {/* 信息区 */}
-    <div className="xx-asset-info">
-      <p className="xx-asset-name" title={asset.name}>
-        {asset.name}
-      </p>
-      <div className="xx-asset-meta">
-        <StatusPill status={asset.status} label={asset.statusLabel} />
-        {asset.duration && <span>{asset.duration}</span>}
-      </div>
-      <button
-        className={`xx-asset-diagnose-btn${diagnosing ? " xx-asset-diagnose-btn-loading" : ""}`}
-        disabled={diagnosing || asset.loading || asset.status === "bad"}
-        onClick={(e) => {
-          e.stopPropagation()
-          onDiagnose()
-        }}
-      >
-        {diagnosing ? <LoadingOutlined /> : <ExperimentOutlined />}
-        {diagnosing ? "诊断中..." : "诊断"}
-      </button>
-    </div>
-  </div>
-)
-
-export default AssetCard

apps/web/src/pages/assets/components/AssetFilterBar.tsx

@@ -1,62 +0,0 @@
-import React from "react"
-import { SearchOutlined } from "@ant-design/icons"
-import { Button, Input, Select } from "@/components/ui"
-import { TYPE_FILTER_OPTIONS, TIME_FILTER_OPTIONS } from "@/pages/assets/constants"
-
-/* ============================================================
- * AssetFilterBar — 筛选栏（搜索/类型/时间 + 全选/计数）
- * ============================================================ */
-export interface AssetFilterBarProps {
-  searchText: string
-  onSearchChange: (value: string) => void
-  filterType: string
-  onFilterTypeChange: (value: string) => void
-  filterTime: string
-  onFilterTimeChange: (value: string) => void
-  onSelectAll: () => void
-  totalCount: number
-}
-
-const AssetFilterBar: React.FC<AssetFilterBarProps> = ({
-  searchText,
-  onSearchChange,
-  filterType,
-  onFilterTypeChange,
-  filterTime,
-  onFilterTimeChange,
-  onSelectAll,
-  totalCount,
-}) => (
-  <div className="xx-assets-filters">
-    <div className="xx-assets-filters-left">
-      <Input
-        placeholder="搜索素材名称..."
-        prefix={<SearchOutlined />}
-        value={searchText}
-        onChange={(e) => onSearchChange(e.target.value)}
-        allowClear
-        style={{ width: 220 }}
-      />
-      <Select
-        value={filterType}
-        onChange={onFilterTypeChange}
-        style={{ width: 120 }}
-        options={TYPE_FILTER_OPTIONS}
-      />
-      <Select
-        value={filterTime}
-        onChange={onFilterTimeChange}
-        style={{ width: 120 }}
-        options={TIME_FILTER_OPTIONS}
-      />
-    </div>
-    <div className="xx-assets-filters-right">
-      <Button buttonType="ghost" buttonSize="sm" onClick={onSelectAll}>
-        全选
-      </Button>
-      <span className="xx-assets-filter-count">共 {totalCount} 个素材</span>
-    </div>
-  </div>
-)
-
-export default AssetFilterBar

apps/web/src/pages/assets/components/AssetSkeleton.tsx

@@ -1,36 +0,0 @@
-import React from "react"
-import type { StatusType } from "@/pages/assets/types"
-
-/* ============================================================
- * StatusPill — 状态标签
- * ============================================================ */
-export interface StatusPillProps {
-  status: StatusType
-  label: string
-}
-
-export const StatusPill: React.FC<StatusPillProps> = ({ status, label }) => (
-  <span className={`xx-status-pill xx-status-pill-${status}`}>{label}</span>
-)
-
-/* ============================================================
- * SkeletonCard — 骨架屏卡片（素材列表加载时占位）
- * ============================================================ */
-export const SkeletonCard: React.FC = () => (
-  <div className="xx-asset-card xx-asset-skeleton">
-    <div className="xx-asset-thumb xx-skeleton-pulse" />
-    <div className="xx-asset-info">
-      <div className="xx-skeleton-line xx-skeleton-pulse" style={{ width: "70%" }} />
-      <div className="xx-skeleton-line xx-skeleton-pulse" style={{ width: "40%", marginTop: 8 }} />
-      <div
-        className="xx-skeleton-line xx-skeleton-pulse"
-        style={{
-          width: "100%",
-          height: 28,
-          marginTop: 8,
-          borderRadius: "var(--radius-xs)",
-        }}
-      />
-    </div>
-  </div>
-)

apps/web/src/pages/assets/components/BatchClassifyModal.tsx

@@ -1,49 +0,0 @@
-import React from "react"
-import { Modal as AntModal, Select as AntSelect } from "antd"
-import { CATEGORY_OPTIONS } from "@/pages/assets/constants"
-
-/* ============================================================
- * BatchClassifyModal — 批量改分类弹窗
- * ============================================================ */
-export interface BatchClassifyModalProps {
-  open: boolean
-  selectedCount: number
-  onCancel: () => void
-  onOk: () => void
-  category: string
-  onCategoryChange: (value: string) => void
-  confirmLoading?: boolean
-}
-
-const BatchClassifyModal: React.FC<BatchClassifyModalProps> = ({
-  open,
-  selectedCount,
-  onCancel,
-  onOk,
-  category,
-  onCategoryChange,
-  confirmLoading,
-}) => (
-  <AntModal
-    title={`批量改分类（${selectedCount} 个素材）`}
-    open={open}
-    onCancel={onCancel}
-    onOk={onOk}
-    confirmLoading={confirmLoading}
-    okText="确认修改"
-    cancelText="取消"
-  >
-    <div className="xx-batch-classify-modal">
-      <p className="xx-batch-classify-hint">将选中的 {selectedCount} 个素材统一修改为以下分类：</p>
-      <AntSelect
-        value={category || undefined}
-        onChange={(v) => onCategoryChange(v)}
-        placeholder="请选择分类"
-        style={{ width: "100%" }}
-        options={CATEGORY_OPTIONS}
-      />
-    </div>
-  </AntModal>
-)
-
-export default BatchClassifyModal

apps/web/src/pages/assets/components/BatchMarkModal.tsx

@@ -1,67 +0,0 @@
-import React from "react"
-import { Modal as AntModal, Tag, Radio } from "antd"
-
-/* ============================================================
- * BatchMarkModal — 批量智能标记弹窗
- * ============================================================ */
-export type SmartViewType = "recommended" | "caution" | "high_risk"
-
-export interface BatchMarkModalProps {
-  open: boolean
-  selectedCount: number
-  onCancel: () => void
-  onOk: () => void
-  smartView: SmartViewType
-  onSmartViewChange: (value: SmartViewType) => void
-  confirmLoading?: boolean
-}
-
-const BatchMarkModal: React.FC<BatchMarkModalProps> = ({
-  open,
-  selectedCount,
-  onCancel,
-  onOk,
-  smartView,
-  onSmartViewChange,
-  confirmLoading,
-}) => (
-  <AntModal
-    title={`批量智能标记（${selectedCount} 个素材）`}
-    open={open}
-    onCancel={onCancel}
-    onOk={onOk}
-    confirmLoading={confirmLoading}
-    okText="确认标记"
-    cancelText="取消"
-  >
-    <div className="xx-batch-mark-modal">
-      <p className="xx-batch-mark-hint">将选中的 {selectedCount} 个素材标记为：</p>
-      <Radio.Group
-        value={smartView}
-        onChange={(e) => onSmartViewChange(e.target.value)}
-        className="xx-batch-mark-options"
-      >
-        <div className="xx-batch-mark-option">
-          <Radio value="recommended">
-            <Tag color="success">推荐</Tag>
-            <span className="xx-batch-mark-desc">质量优良，可直接用于生产</span>
-          </Radio>
-        </div>
-        <div className="xx-batch-mark-option">
-          <Radio value="caution">
-            <Tag color="warning">慎用</Tag>
-            <span className="xx-batch-mark-desc">存在一定问题，需人工审核后再使用</span>
-          </Radio>
-        </div>
-        <div className="xx-batch-mark-option">
-          <Radio value="high_risk">
-            <Tag color="error">高风险</Tag>
-            <span className="xx-batch-mark-desc">存在严重问题，不建议使用</span>
-          </Radio>
-        </div>
-      </Radio.Group>
-    </div>
-  </AntModal>
-)
-
-export default BatchMarkModal

apps/web/src/pages/assets/components/BatchOperationBar.tsx

@@ -1,58 +0,0 @@
-import React from "react"
-import {
-  TagsOutlined,
-  FolderOutlined,
-  ThunderboltOutlined,
-  DeleteOutlined,
-} from "@ant-design/icons"
-import { Popconfirm } from "antd"
-import { Button } from "@/components/ui"
-
-/* ============================================================
- * BatchOperationBar — 批量操作栏
- * ============================================================ */
-export interface BatchOperationBarProps {
-  selectedCount: number
-  onDeselectAll: () => void
-  onTagClick: () => void
-  onClassifyClick: () => void
-  onMarkClick: () => void
-  onBatchDelete: () => void
-}
-
-const BatchOperationBar: React.FC<BatchOperationBarProps> = ({
-  selectedCount,
-  onDeselectAll,
-  onTagClick,
-  onClassifyClick,
-  onMarkClick,
-  onBatchDelete,
-}) => (
-  <div className="xx-assets-batch-bar">
-    <span className="xx-assets-batch-count">已选 {selectedCount} 项</span>
-    <Button buttonType="ghost" buttonSize="sm" onClick={onDeselectAll}>
-      取消选择
-    </Button>
-    <Button buttonType="ghost" buttonSize="sm" icon={<TagsOutlined />} onClick={onTagClick}>
-      打标签
-    </Button>
-    <Button buttonType="ghost" buttonSize="sm" icon={<FolderOutlined />} onClick={onClassifyClick}>
-      改分类
-    </Button>
-    <Button buttonType="ghost" buttonSize="sm" icon={<ThunderboltOutlined />} onClick={onMarkClick}>
-      智能标记
-    </Button>
-    <Popconfirm
-      title={`确定删除 ${selectedCount} 个素材？`}
-      onConfirm={onBatchDelete}
-      okText="删除"
-      cancelText="取消"
-    >
-      <Button buttonType="danger" buttonSize="sm" icon={<DeleteOutlined />}>
-        批量删除
-      </Button>
-    </Popconfirm>
-  </div>
-)
-
-export default BatchOperationBar

apps/web/src/pages/assets/components/BatchTagModal.tsx

@@ -1,81 +0,0 @@
-import React from "react"
-import { Modal as AntModal, Tag, Radio, Input as AntInput } from "antd"
-import { ExclamationCircleOutlined } from "@ant-design/icons"
-
-/* ============================================================
- * BatchTagModal — 批量打标签弹窗
- * ============================================================ */
-export interface BatchTagModalProps {
-  open: boolean
-  selectedCount: number
-  onCancel: () => void
-  onOk: () => void
-  tags: string[]
-  onTagInputChange: (value: string) => void
-  onTagInputKeyDown: (e: React.KeyboardEvent) => void
-  onRemoveTag: (tag: string) => void
-  tagInput: string
-  tagMode: "add" | "replace"
-  onTagModeChange: (mode: "add" | "replace") => void
-  confirmLoading?: boolean
-}
-
-const BatchTagModal: React.FC<BatchTagModalProps> = ({
-  open,
-  selectedCount,
-  onCancel,
-  onOk,
-  tags,
-  onTagInputChange,
-  onTagInputKeyDown,
-  onRemoveTag,
-  tagInput,
-  tagMode,
-  onTagModeChange,
-  confirmLoading,
-}) => (
-  <AntModal
-    title={`批量打标签（${selectedCount} 个素材）`}
-    open={open}
-    onCancel={onCancel}
-    onOk={onOk}
-    confirmLoading={confirmLoading}
-    okText="确认打标签"
-    cancelText="取消"
-  >
-    <div className="xx-batch-tag-modal">
-      <div className="xx-batch-tag-mode">
-        <span className="xx-batch-tag-mode-label">模式：</span>
-        <Radio.Group value={tagMode} onChange={(e) => onTagModeChange(e.target.value)}>
-          <Radio value="add">追加标签</Radio>
-          <Radio value="replace">替换全部标签</Radio>
-        </Radio.Group>
-      </div>
-      <div className="xx-batch-tag-input-row">
-        <AntInput
-          placeholder="输入标签后按 Enter 添加"
-          value={tagInput}
-          onChange={(e) => onTagInputChange(e.target.value)}
-          onKeyDown={onTagInputKeyDown}
-          style={{ flex: 1 }}
-        />
-      </div>
-      {tags.length > 0 && (
-        <div className="xx-batch-tag-list">
-          {tags.map((tag) => (
-            <Tag key={tag} closable onClose={() => onRemoveTag(tag)} color="blue">
-              {tag}
-            </Tag>
-          ))}
-        </div>
-      )}
-      {tagMode === "replace" && tags.length > 0 && (
-        <div className="xx-batch-tag-warning">
-          <ExclamationCircleOutlined /> 替换模式将清除素材原有全部标签
-        </div>
-      )}
-    </div>
-  </AntModal>
-)
-
-export default BatchTagModal

apps/web/src/pages/assets/components/CreateLibraryModal.tsx

@@ -1,64 +0,0 @@
-import React from "react"
-import { Modal as AntModal } from "antd"
-import { Input, Select } from "@/components/ui"
-import type { AssetKind } from "@/pages/assets/types"
-import { LIBRARY_KIND_OPTIONS } from "@/pages/assets/constants"
-
-/* ============================================================
- * CreateLibraryModal — 新建视频库弹窗
- * ============================================================ */
-export interface CreateLibraryModalProps {
-  open: boolean
-  onCancel: () => void
-  onOk: () => void
-  name: string
-  onNameChange: (value: string) => void
-  kind: AssetKind
-  onKindChange: (value: AssetKind) => void
-  confirmLoading?: boolean
-}
-
-const CreateLibraryModal: React.FC<CreateLibraryModalProps> = ({
-  open,
-  onCancel,
-  onOk,
-  name,
-  onNameChange,
-  kind,
-  onKindChange,
-  confirmLoading,
-}) => (
-  <AntModal
-    title="新建视频库"
-    open={open}
-    onCancel={onCancel}
-    onOk={onOk}
-    okText="创建"
-    cancelText="取消"
-    destroyOnClose
-    confirmLoading={confirmLoading}
-  >
-    <div className="xx-asset-form-body">
-      <div>
-        <div className="xx-asset-form-label">名称</div>
-        <Input
-          placeholder="请输入视频库名称"
-          value={name}
-          onChange={(e) => onNameChange(e.target.value)}
-          maxLength={50}
-        />
-      </div>
-      <div>
-        <div className="xx-asset-form-label">类型</div>
-        <Select
-          value={kind}
-          onChange={(v) => onKindChange(v)}
-          style={{ width: "100%" }}
-          options={LIBRARY_KIND_OPTIONS}
-        />
-      </div>
-    </div>
-  </AntModal>
-)
-
-export default CreateLibraryModal

apps/web/src/pages/assets/components/LibrarySidebar.tsx

@@ -1,70 +0,0 @@
-import React from "react"
-import { PlusOutlined, DeleteOutlined } from "@ant-design/icons"
-import { Popconfirm } from "antd"
-import type { LibraryItem } from "@/pages/assets/types"
-import { kindLabel } from "@/pages/assets/utils/asset"
-import { kindIcon } from "@/pages/assets/utils/kindIcon"
-
-/* ============================================================
- * LibrarySidebar — 左侧素材库列表
- * ============================================================ */
-export interface LibrarySidebarProps {
-  libraries: LibraryItem[]
-  activeLibId: string
-  onSelect: (id: string) => void
-  onDelete: (id: string) => void
-  onCreateClick: () => void
-}
-
-const LibrarySidebar: React.FC<LibrarySidebarProps> = ({
-  libraries,
-  activeLibId,
-  onSelect,
-  onDelete,
-  onCreateClick,
-}) => (
-  <div className="xx-asset-library-list">
-    {libraries.map((lib) => (
-      <div
-        key={lib.id}
-        className={`xx-asset-library-item${lib.id === activeLibId ? " active" : ""}`}
-        onClick={() => onSelect(lib.id)}
-      >
-        <div className="xx-asset-library-header">
-          <h4>
-            {kindIcon(lib.kind)} {lib.name}
-          </h4>
-          <Popconfirm
-            title={`确定删除视频库 "${lib.name}"？`}
-            onConfirm={(e) => {
-              e?.stopPropagation()
-              onDelete(lib.id)
-            }}
-            onCancel={(e) => e?.stopPropagation()}
-            okText="删除"
-            cancelText="取消"
-          >
-            <button
-              className="xx-asset-library-delete"
-              onClick={(e) => e.stopPropagation()}
-              title="删除视频库"
-            >
-              <DeleteOutlined />
-            </button>
-          </Popconfirm>
-        </div>
-        <span>
-          {kindLabel(lib.kind)} · {lib.count} 个素材
-        </span>
-      </div>
-    ))}
-
-    {/* 新建视频库 */}
-    <div className="xx-asset-library-add" onClick={onCreateClick}>
-      <PlusOutlined />
-      新建视频库
-    </div>
-  </div>
-)
-
-export default LibrarySidebar

apps/web/src/pages/assets/components/PlayModal.tsx

@@ -1,34 +0,0 @@
-import React from "react"
-import { Modal as AntModal } from "antd"
-import type { AssetItem } from "@/pages/assets/types"
-
-/* ============================================================
- * PlayModal — 视频/音频播放弹窗
- * ============================================================ */
-export interface PlayModalProps {
-  open: boolean
-  asset: AssetItem | null
-  onClose: () => void
-}
-
-const PlayModal: React.FC<PlayModalProps> = ({ open, asset, onClose }) => (
-  <AntModal
-    title={asset?.name ?? "播放"}
-    open={open}
-    onCancel={onClose}
-    footer={null}
-    width={640}
-    destroyOnClose
-  >
-    {asset?.fileUrl ? (
-      <video src={asset.fileUrl} controls autoPlay className="xx-asset-video-player" />
-    ) : (
-      <div className="xx-asset-empty-fallback">
-        <p>暂无可播放的文件地址</p>
-        <p className="xx-asset-empty-fallback-id">素材 ID: {asset?.id}</p>
-      </div>
-    )}
-  </AntModal>
-)
-
-export default PlayModal

apps/web/src/pages/assets/components/ResultDrawer.tsx

@@ -1,70 +0,0 @@
-import React from "react"
-import { Drawer } from "antd"
-import { CheckCircleOutlined, CloseCircleOutlined } from "@ant-design/icons"
-import type { BatchOperationResult } from "@/api/assets"
-
-/* ============================================================
- * ResultDrawer — 操作结果抽屉
- * ============================================================ */
-export interface ResultDrawerProps {
-  open: boolean
-  title: string
-  result: BatchOperationResult | null
-  onClose: () => void
-}
-
-const ResultDrawer: React.FC<ResultDrawerProps> = ({ open, title, result, onClose }) => (
-  <Drawer title={`${title} — 操作结果`} open={open} onClose={onClose} width={420}>
-    {result && (
-      <div className="xx-batch-result">
-        <div className="xx-batch-result-summary">
-          <div className="xx-batch-result-stat">
-            <span className="xx-batch-result-total">总计 {result.total} 个</span>
-          </div>
-          <div className="xx-batch-result-stat success">
-            <CheckCircleOutlined />
-            <span>成功 {result.success_count} 个</span>
-          </div>
-          {result.failure_count > 0 && (
-            <div className="xx-batch-result-stat fail">
-              <CloseCircleOutlined />
-              <span>失败 {result.failure_count} 个</span>
-            </div>
-          )}
-        </div>
-
-        {(result?.succeeded?.length ?? 0) > 0 && (
-          <div className="xx-batch-result-section">
-            <h4 className="xx-batch-result-section-title success">
-              <CheckCircleOutlined /> 成功列表
-            </h4>
-            <div className="xx-batch-result-ids">
-              {result?.succeeded?.map((id) => (
-                <div key={id} className="xx-batch-result-id">
-                  {id}
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {(result?.failed?.length ?? 0) > 0 && (
-          <div className="xx-batch-result-section">
-            <h4 className="xx-batch-result-section-title fail">
-              <CloseCircleOutlined /> 失败列表
-            </h4>
-            <div className="xx-batch-result-ids">
-              {result?.failed?.map((id) => (
-                <div key={id} className="xx-batch-result-id fail">
-                  {id}
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    )}
-  </Drawer>
-)
-
-export default ResultDrawer

apps/web/src/pages/assets/components/UploadProgressModal.tsx

@@ -1,56 +0,0 @@
-import React from "react"
-import { Modal as AntModal } from "antd"
-
-/* ============================================================
- * UploadProgressModal — 上传进度弹窗（圆形动画 + 百分比）
- * ============================================================ */
-export interface UploadProgressModalProps {
-  open: boolean
-  progress: number
-}
-
-const UploadProgressModal: React.FC<UploadProgressModalProps> = ({ open, progress }) => (
-  <AntModal
-    open={open}
-    footer={null}
-    closable={false}
-    centered
-    width={260}
-    maskClosable={false}
-    className="xx-upload-progress-modal"
-  >
-    <div className="xx-upload-progress-body">
-      <svg className="xx-upload-progress-ring" viewBox="0 0 120 120" width={120} height={120}>
-        {/* 背景圆环 */}
-        <circle
-          cx="60"
-          cy="60"
-          r="52"
-          fill="none"
-          stroke="var(--border-primary, #e5e7eb)"
-          strokeWidth="8"
-        />
-        {/* 进度圆弧 */}
-        <circle
-          cx="60"
-          cy="60"
-          r="52"
-          fill="none"
-          stroke="var(--primary-color, #6366f1)"
-          strokeWidth="8"
-          strokeLinecap="round"
-          strokeDasharray={`${2 * Math.PI * 52}`}
-          strokeDashoffset={`${2 * Math.PI * 52 * (1 - progress / 100)}`}
-          transform="rotate(-90 60 60)"
-          style={{ transition: "stroke-dashoffset 0.3s ease" }}
-        />
-      </svg>
-      <div className="xx-upload-progress-text">
-        <span className="xx-upload-progress-pct">{progress}%</span>
-        <span className="xx-upload-progress-label">上传中…</span>
-      </div>
-    </div>
-  </AntModal>
-)
-
-export default UploadProgressModal

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

@@ -1,66 +0,0 @@
-/**
- * 素材库常量
- */
-import type { AssetKind } from "./types"
-
-/** 文件大小限制 */
-export const MAX_FILE_SIZE = 2048 * 1024 * 1024
-export const LARGE_FILE_THRESHOLD = 100 * 1024 * 1024
-
-/** 素材类型标签 */
-export const KIND_LABELS: Record<AssetKind, string> = {
-  video: "视频",
-  image: "图片",
-  voice: "配音",
-}
-
-/** 类型筛选选项 */
-export const TYPE_FILTER_OPTIONS: { value: string; label: string }[] = [
-  { value: "all", label: "全部类型" },
-  { value: "video", label: "视频" },
-  { value: "image", label: "图片" },
-]
-
-/** 时间筛选选项 */
-export const TIME_FILTER_OPTIONS: { value: string; label: string }[] = [
-  { value: "all", label: "全部时间" },
-  { value: "today", label: "今天" },
-  { value: "week", label: "近一周" },
-  { value: "month", label: "近一月" },
-]
-
-/** 新建库类型选项（当前仅支持视频和图片） */
-export const LIBRARY_KIND_OPTIONS: { value: AssetKind; label: string }[] = [
-  { value: "video", label: "视频" },
-  { value: "image", label: "图片" },
-]
-
-/** 分类选项 */
-export const CATEGORY_OPTIONS: { value: string; label: string }[] = [
-  { value: "person", label: "人物" },
-  { value: "scenic", label: "风景" },
-  { value: "product", label: "产品" },
-  { value: "food", label: "美食" },
-  { value: "animal", label: "动物" },
-  { value: "architecture", label: "建筑" },
-  { value: "other", label: "其他" },
-]
-
-/** 智能标记视图 */
-export const SMART_VIEW_OPTIONS: {
-  value: "recommended" | "caution" | "high_risk"
-  label: string
-  color: string
-}[] = [
-  { value: "recommended", label: "推荐", color: "success" },
-  { value: "caution", label: "慎用", color: "warning" },
-  { value: "high_risk", label: "高风险", color: "error" },
-]
-
-/** 状态配置 */
-export const STATUS_CONFIG: Record<string, { label: string; className: string }> = {
-  ok: { label: "合格", className: "xx-status-pill xx-status-pill-ok" },
-  warn: { label: "待优化", className: "xx-status-pill xx-status-pill-warn" },
-  bad: { label: "不合格", className: "xx-status-pill xx-status-pill-bad" },
-  info: { label: "待诊断", className: "xx-status-pill xx-status-pill-info" },
-}

apps/web/src/pages/assets/hooks/useAssetOperations.ts

@@ -1,301 +0,0 @@
-import { useState, useCallback } from "react"
-import { useQueryClient } from "@tanstack/react-query"
-import { message } from "antd"
-import {
-  deleteAsset,
-  getAssetDiagnosis,
-  batchDeleteAssets,
-  batchTagAssets,
-  batchClassifyAssets,
-  batchMarkAssets,
-  type BatchOperationResult,
-} from "@/api/assets"
-import type { AssetItem } from "../types"
-import type { SmartViewType } from "../components/BatchMarkModal"
-
-/**
- * 素材操作 Hook
- * 封装素材的诊断、删除、批量打标签、批量改分类、批量智能标记等操作，
- * 以及相关弹窗和结果展示的状态管理
- */
-interface UseAssetOperationsProps {
-  selectedIds: Set<string>
-  setSelectedIds: (ids: Set<string>) => void
-}
-
-export function useAssetOperations({ selectedIds, setSelectedIds }: UseAssetOperationsProps) {
-  const queryClient = useQueryClient()
-
-  /* ── 诊断状态 ── */
-  const [diagnosingId, setDiagnosingId] = useState<string | null>(null)
-
-  /* ── 批量操作弹窗状态 ── */
-  const [tagModalOpen, setTagModalOpen] = useState(false)
-  const [classifyModalOpen, setClassifyModalOpen] = useState(false)
-  const [markModalOpen, setMarkModalOpen] = useState(false)
-  const [resultDrawerOpen, setResultDrawerOpen] = useState(false)
-
-  /* ── 批量打标签表单 ── */
-  const [batchTagInput, setBatchTagInput] = useState("")
-  const [batchTags, setBatchTags] = useState<string[]>([])
-  const [tagMode, setTagMode] = useState<"add" | "replace">("add")
-
-  /* ── 批量改分类表单 ── */
-  const [batchCategory, setBatchCategory] = useState("")
-
-  /* ── 批量智能标记表单 ── */
-  const [batchSmartView, setBatchSmartView] = useState<SmartViewType>("recommended")
-
-  /* ── 操作结果 ── */
-  const [operationResult, setOperationResult] = useState<BatchOperationResult | null>(null)
-  const [operationTitle, setOperationTitle] = useState("")
-
-  /* ── 批量操作 loading ── */
-  const [batchLoading, setBatchLoading] = useState(false)
-
-  /* ── 刷新数据辅助函数 ── */
-  const invalidateAssets = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: ["assets"] })
-    queryClient.invalidateQueries({ queryKey: ["asset-libraries"] })
-  }, [queryClient])
-
-  /* ── 诊断 ── */
-  const handleDiagnose = useCallback(
-    async (asset: AssetItem) => {
-      setDiagnosingId(asset.id)
-      try {
-        const result = await getAssetDiagnosis(asset.id)
-        const score = result.readiness_score ?? "-"
-        message.success(`"${asset.name}" 诊断完成，就绪分：${score}`)
-        queryClient.invalidateQueries({ queryKey: ["assets"] })
-      } catch {
-        message.error(`"${asset.name}" 诊断失败`)
-      } finally {
-        setDiagnosingId(null)
-      }
-    },
-    [queryClient],
-  )
-
-  /* ── 单个素材删除 ── */
-  const handleSingleDelete = useCallback(
-    async (assetId: string) => {
-      try {
-        await deleteAsset(assetId)
-        invalidateAssets()
-        // 从选中集合中移除
-        setSelectedIds(
-          (() => {
-            const next = new Set(selectedIds)
-            next.delete(assetId)
-            return next
-          })(),
-        )
-        message.success("素材已删除")
-      } catch {
-        message.error("删除失败，请重试")
-      }
-    },
-    [invalidateAssets, selectedIds, setSelectedIds],
-  )
-
-  /* ── 显示操作结果 ── */
-  const showOperationResult = useCallback(
-    (result: BatchOperationResult, title: string, clearSelection = true) => {
-      setOperationResult(result)
-      setOperationTitle(title)
-      setResultDrawerOpen(true)
-      if (clearSelection) setSelectedIds(new Set())
-    },
-    [setSelectedIds],
-  )
-
-  /* ── 批量删除 ── */
-  const handleBatchDelete = useCallback(async () => {
-    const ids = Array.from(selectedIds)
-    setBatchLoading(true)
-    try {
-      const result = await batchDeleteAssets(ids)
-      invalidateAssets()
-      showOperationResult(result, "批量删除")
-      if (result.failure_count === 0) {
-        message.success(`成功删除 ${result.success_count} 个素材`)
-      } else {
-        message.warning(
-          `删除完成：成功 ${result.success_count} 个，失败 ${result.failure_count} 个`,
-        )
-      }
-    } catch {
-      message.error("批量删除失败，请重试")
-    } finally {
-      setBatchLoading(false)
-    }
-  }, [selectedIds, invalidateAssets, showOperationResult])
-
-  /* ── 批量打标签 ── */
-  const handleBatchTag = useCallback(async () => {
-    if (batchTags.length === 0) {
-      message.warning("请至少输入一个标签")
-      return
-    }
-    const ids = Array.from(selectedIds)
-    setBatchLoading(true)
-    try {
-      const result = await batchTagAssets({
-        asset_ids: ids,
-        tags: batchTags,
-        mode: tagMode,
-      })
-      queryClient.invalidateQueries({ queryKey: ["assets"] })
-      showOperationResult(result, "批量打标签")
-      setTagModalOpen(false)
-      setBatchTags([])
-      setBatchTagInput("")
-      setTagMode("add")
-      if (result.failure_count === 0) {
-        message.success(`成功为 ${result.success_count} 个素材打标签`)
-      } else {
-        message.warning(
-          `打标签完成：成功 ${result.success_count} 个，失败 ${result.failure_count} 个`,
-        )
-      }
-    } catch {
-      message.error("批量打标签失败，请重试")
-    } finally {
-      setBatchLoading(false)
-    }
-  }, [batchTags, selectedIds, tagMode, queryClient, showOperationResult])
-
-  /* ── 标签输入处理 ── */
-  const handleTagInputKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "Enter" && batchTagInput.trim()) {
-        e.preventDefault()
-        const tag = batchTagInput.trim()
-        if (!batchTags.includes(tag)) {
-          setBatchTags([...batchTags, tag])
-        }
-        setBatchTagInput("")
-      }
-    },
-    [batchTagInput, batchTags],
-  )
-
-  const removeBatchTag = useCallback(
-    (tag: string) => {
-      setBatchTags(batchTags.filter((t) => t !== tag))
-    },
-    [batchTags],
-  )
-
-  /* ── 批量改分类 ── */
-  const handleBatchClassify = useCallback(async () => {
-    if (!batchCategory) {
-      message.warning("请选择分类")
-      return
-    }
-    const ids = Array.from(selectedIds)
-    setBatchLoading(true)
-    try {
-      const result = await batchClassifyAssets({
-        asset_ids: ids,
-        category: batchCategory,
-      })
-      queryClient.invalidateQueries({ queryKey: ["assets"] })
-      showOperationResult(result, "批量改分类")
-      setClassifyModalOpen(false)
-      setBatchCategory("")
-      if (result.failure_count === 0) {
-        message.success(`成功将 ${result.success_count} 个素材改为「${batchCategory}」`)
-      } else {
-        message.warning(
-          `改分类完成：成功 ${result.success_count} 个，失败 ${result.failure_count} 个`,
-        )
-      }
-    } catch {
-      message.error("批量改分类失败，请重试")
-    } finally {
-      setBatchLoading(false)
-    }
-  }, [batchCategory, selectedIds, queryClient, showOperationResult])
-
-  /* ── 批量智能标记 ── */
-  const handleBatchMark = useCallback(async () => {
-    const ids = Array.from(selectedIds)
-    setBatchLoading(true)
-    try {
-      const result = await batchMarkAssets({
-        asset_ids: ids,
-        smart_view: batchSmartView,
-      })
-      queryClient.invalidateQueries({ queryKey: ["assets"] })
-      showOperationResult(result, "批量智能标记")
-      setMarkModalOpen(false)
-      const labelMap: Record<SmartViewType, string> = {
-        recommended: "推荐",
-        caution: "慎用",
-        high_risk: "高风险",
-      }
-      if (result.failure_count === 0) {
-        message.success(
-          `成功将 ${result.success_count} 个素材标记为「${labelMap[batchSmartView]}」`,
-        )
-      } else {
-        message.warning(
-          `智能标记完成：成功 ${result.success_count} 个，失败 ${result.failure_count} 个`,
-        )
-      }
-    } catch {
-      message.error("批量智能标记失败，请重试")
-    } finally {
-      setBatchLoading(false)
-    }
-  }, [batchSmartView, selectedIds, queryClient, showOperationResult])
-
-  /* ── 关闭结果 Drawer ── */
-  const handleResultDrawerClose = useCallback(() => {
-    setResultDrawerOpen(false)
-    setOperationResult(null)
-  }, [])
-
-  return {
-    // 诊断
-    diagnosingId,
-    handleDiagnose,
-    // 单个操作
-    handleSingleDelete,
-    // 批量操作 loading
-    batchLoading,
-    // 批量打标签
-    tagModalOpen,
-    setTagModalOpen,
-    batchTagInput,
-    setBatchTagInput,
-    batchTags,
-    setBatchTags,
-    tagMode,
-    setTagMode,
-    handleBatchTag,
-    handleTagInputKeyDown,
-    removeBatchTag,
-    // 批量改分类
-    classifyModalOpen,
-    setClassifyModalOpen,
-    batchCategory,
-    setBatchCategory,
-    handleBatchClassify,
-    // 批量智能标记
-    markModalOpen,
-    setMarkModalOpen,
-    batchSmartView,
-    setBatchSmartView,
-    handleBatchMark,
-    // 批量删除
-    handleBatchDelete,
-    // 操作结果
-    resultDrawerOpen,
-    operationResult,
-    operationTitle,
-    handleResultDrawerClose,
-  }
-}

apps/web/src/pages/assets/hooks/useAssetSelection.ts

@@ -1,40 +0,0 @@
-import { useState, useCallback } from "react"
-import type { AssetItem } from "../types"
-
-/**
- * 素材选中态管理 Hook
- * 封装单选、全选、取消全选等选中逻辑
- */
-interface UseAssetSelectionProps {
-  filteredAssets: AssetItem[]
-}
-
-export function useAssetSelection({ filteredAssets }: UseAssetSelectionProps) {
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
-
-  const toggleSelect = useCallback((id: string) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }, [])
-
-  const selectAll = useCallback(() => {
-    setSelectedIds(new Set(filteredAssets.map((a) => a.id)))
-  }, [filteredAssets])
-
-  const deselectAll = useCallback(() => {
-    setSelectedIds(new Set())
-  }, [])
-
-  return {
-    selectedIds,
-    setSelectedIds,
-    toggleSelect,
-    selectAll,
-    deselectAll,
-    selectedCount: selectedIds.size,
-  }
-}

apps/web/src/pages/assets/hooks/useAssetUpload.ts

@@ -1,65 +0,0 @@
-import { useState, useCallback } from "react"
-import { useQueryClient } from "@tanstack/react-query"
-import { message } from "antd"
-import { uploadAssetDirect } from "@/api/assets"
-import { MAX_FILE_SIZE, LARGE_FILE_THRESHOLD } from "../constants"
-
-/**
- * 素材上传 Hook
- * 封装上传状态、进度管理和上传逻辑
- */
-interface UseAssetUploadProps {
-  effectiveLibId: string
-}
-
-export function useAssetUpload({ effectiveLibId }: UseAssetUploadProps) {
-  const queryClient = useQueryClient()
-
-  const [uploading, setUploading] = useState(false)
-  const [uploadProgress, setUploadProgress] = useState(0)
-
-  const handleUpload = useCallback(
-    async (file: File) => {
-      if (file.size > MAX_FILE_SIZE) {
-        message.error(`文件 "${file.name}" 超过 2GB 限制`)
-        return
-      }
-      if (!effectiveLibId) {
-        message.warning("请先选择或创建一个视频库")
-        return
-      }
-
-      setUploading(true)
-      setUploadProgress(0)
-      try {
-        if (file.size > LARGE_FILE_THRESHOLD) {
-          message.info(`大文件 "${file.name}" 将使用直传上传`)
-        }
-        await uploadAssetDirect({
-          file,
-          library_id: effectiveLibId,
-          onProgress: (pct) => setUploadProgress(pct),
-        })
-        message.success(`"${file.name}" 上传成功`)
-        queryClient.invalidateQueries({ queryKey: ["assets"] })
-        queryClient.invalidateQueries({ queryKey: ["asset-libraries"] })
-      } catch (err: unknown) {
-        const detail = err instanceof Error ? err.message : ""
-        console.error("[handleUpload] 上传失败:", err)
-        message.error(`"${file.name}" 上传失败${detail ? `：${detail}` : ""}`)
-        // 错误时延迟关闭弹窗，让用户能看到错误提示
-        await new Promise((r) => setTimeout(r, 1500))
-      } finally {
-        setUploading(false)
-        setUploadProgress(0)
-      }
-    },
-    [effectiveLibId, queryClient],
-  )
-
-  return {
-    uploading,
-    uploadProgress,
-    handleUpload,
-  }
-}

apps/web/src/pages/assets/hooks/useAssetsData.ts

@@ -1,118 +0,0 @@
-import { useState, useMemo } from "react"
-import { useQuery } from "@tanstack/react-query"
-import {
-  getAssetLibraries,
-  getAssets,
-  type AssetLibraryItem,
-  type AssetItem as ApiAssetItem,
-} from "@/api/assets"
-import { mapLibrary, mapAsset, type AssetItem, type LibraryItem } from "../types"
-
-/**
- * 素材库数据 Hook
- * 封装视频库列表、素材列表的数据查询，以及筛选、搜索状态管理
- */
-export function useAssetsData() {
-  /* ── 视频库列表查询 ── */
-  const { data: apiLibraries = [], isLoading: libLoading } = useQuery<AssetLibraryItem[], Error>({
-    queryKey: ["asset-libraries"],
-    queryFn: getAssetLibraries,
-    staleTime: 60_000,
-  })
-
-  const libraries: LibraryItem[] = useMemo(
-    () =>
-      (Array.isArray(apiLibraries) ? apiLibraries : [])
-        .map(mapLibrary)
-        .filter((lib) => lib.kind === "video"),
-    [apiLibraries],
-  )
-
-  /* ── 当前选中的视频库 ── */
-  const [activeLibId, setActiveLibId] = useState<string>("")
-
-  // 当库列表加载完成后，自动选中第一个
-  const effectiveLibId = activeLibId || libraries[0]?.id || ""
-
-  /* ── 当前库的素材列表查询 ── */
-  const {
-    data: apiAssets = { items: [], total: 0 },
-    isLoading: assetsLoading,
-    isError: assetsError,
-    error: assetsErrorObj,
-    refetch: refetchAssets,
-  } = useQuery<{ items: ApiAssetItem[]; total: number }, Error>({
-    queryKey: ["assets", effectiveLibId],
-    queryFn: () =>
-      getAssets(effectiveLibId, {
-        // 拉取所有非删除状态的素材，让用户上传后立刻能看到"处理中"的素材
-        status: "ready,uploading,ingesting,processing,pending,error,failed",
-      }),
-    enabled: !!effectiveLibId,
-    staleTime: 30_000,
-  })
-
-  const assets: AssetItem[] = useMemo(
-    () => (Array.isArray(apiAssets?.items) ? apiAssets.items : []).map(mapAsset),
-    [apiAssets],
-  )
-
-  /* ── 筛选状态 ── */
-  const [searchText, setSearchText] = useState("")
-  const [filterType, setFilterType] = useState<string>("all")
-  const [filterTime, setFilterTime] = useState<string>("all")
-
-  /* ── 筛选后的素材列表 ── */
-  const filteredAssets = useMemo(() => {
-    let list = assets
-
-    /* 按素材类型过滤 */
-    if (filterType !== "all") {
-      list = list.filter((a) => a.kind === filterType)
-    }
-
-    /* 按时间筛选 */
-    if (filterTime !== "all") {
-      const now = new Date()
-      list = list.filter((a) => {
-        const d = new Date(a.createdAt)
-        const diffDays = (now.getTime() - d.getTime()) / (1000 * 60 * 60 * 24)
-        if (filterTime === "today") return diffDays < 1
-        if (filterTime === "week") return diffDays < 7
-        if (filterTime === "month") return diffDays < 30
-        return true
-      })
-    }
-
-    /* 搜索 */
-    if (searchText.trim()) {
-      const q = searchText.trim().toLowerCase()
-      list = list.filter((a) => a.name.toLowerCase().includes(q))
-    }
-
-    return list
-  }, [assets, filterType, filterTime, searchText])
-
-  return {
-    // 视频库
-    libraries,
-    libLoading,
-    activeLibId,
-    setActiveLibId,
-    effectiveLibId,
-    // 素材列表
-    assets,
-    assetsLoading,
-    assetsError,
-    assetsErrorObj,
-    refetchAssets,
-    // 筛选
-    searchText,
-    setSearchText,
-    filterType,
-    setFilterType,
-    filterTime,
-    setFilterTime,
-    filteredAssets,
-  }
-}

apps/web/src/pages/assets/hooks/useLibraryManagement.ts

@@ -1,106 +0,0 @@
-import { useState, useCallback } from "react"
-import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { message } from "antd"
-import { createAssetLibrary, deleteAssetLibrary } from "@/api/assets"
-import type { AssetKind, LibraryItem } from "../types"
-
-/**
- * 视频库管理 Hook
- * 封装视频库的创建、删除操作，以及新建弹窗的表单状态
- */
-interface UseLibraryManagementProps {
-  libraries: LibraryItem[]
-  activeLibId: string
-  setActiveLibId: (id: string) => void
-  effectiveLibId: string
-}
-
-export function useLibraryManagement({
-  libraries,
-  setActiveLibId,
-  effectiveLibId,
-}: UseLibraryManagementProps) {
-  const queryClient = useQueryClient()
-
-  /* ── 状态 ── */
-  const [createModalOpen, setCreateModalOpen] = useState(false)
-  const [newLibName, setNewLibName] = useState("")
-  const [newLibKind, setNewLibKind] = useState<AssetKind>("video")
-
-  /* ── Mutations ── */
-  const createLibMutation = useMutation({
-    mutationFn: createAssetLibrary,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["asset-libraries"] })
-      message.success("视频库创建成功")
-    },
-    onError: () => {
-      message.error("创建视频库失败")
-    },
-  })
-
-  const deleteLibMutation = useMutation({
-    mutationFn: deleteAssetLibrary,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["asset-libraries"] })
-      message.success("视频库已删除")
-    },
-    onError: () => {
-      message.error("删除视频库失败")
-    },
-  })
-
-  /* ── 新建视频库 ── */
-  const handleCreateLibrary = useCallback(async () => {
-    if (!newLibName.trim()) {
-      message.warning("请输入视频库名称")
-      return
-    }
-    try {
-      const newLib = await createLibMutation.mutateAsync({
-        name: newLibName.trim(),
-        kind: newLibKind,
-      })
-      setActiveLibId(newLib.id)
-      setCreateModalOpen(false)
-      setNewLibName("")
-      setNewLibKind("video")
-    } catch {
-      // error handled in mutation
-    }
-  }, [newLibName, newLibKind, createLibMutation, setActiveLibId])
-
-  /* ── 删除视频库 ── */
-  const handleDeleteLibrary = useCallback(
-    async (id: string) => {
-      try {
-        await deleteLibMutation.mutateAsync(id)
-        if (effectiveLibId === id) {
-          const remaining = libraries.filter((l) => l.id !== id)
-          if (remaining.length > 0) setActiveLibId(remaining[0].id)
-          else setActiveLibId("")
-        }
-      } catch {
-        // error handled in mutation
-      }
-    },
-    [deleteLibMutation, effectiveLibId, libraries, setActiveLibId],
-  )
-
-  return {
-    // 弹窗状态
-    createModalOpen,
-    setCreateModalOpen,
-    // 表单状态
-    newLibName,
-    setNewLibName,
-    newLibKind,
-    setNewLibKind,
-    // Mutations
-    isCreating: createLibMutation.isPending,
-    isDeleting: deleteLibMutation.isPending,
-    // Handlers
-    handleCreateLibrary,
-    handleDeleteLibrary,
-  }
-}

apps/web/src/pages/assets/types.ts

@@ -1,115 +0,0 @@
-/**
- * 素材库类型定义
- */
-import type { AssetLibraryItem, AssetItem as ApiAssetItem } from "@/api/assets"
-import { formatDuration } from "./utils/format"
-
-export type AssetKind = "video" | "image" | "voice"
-export type StatusType = "ok" | "warn" | "bad" | "info"
-
-export interface LibraryItem {
-  id: string
-  name: string
-  kind: AssetKind
-  count: number
-}
-
-export interface AssetItem {
-  id: string
-  name: string
-  kind: AssetKind
-  thumbUrl?: string
-  fileUrl?: string
-  status: StatusType
-  statusLabel: string
-  /** 是否处于处理中状态（上传中/入库中/诊断中） */
-  loading?: boolean
-  duration?: string
-  size: number
-  createdAt: string
-}
-
-/** 根据 mime_type 推断前端 AssetKind */
-export const inferKind = (mimeType: string): AssetKind => {
-  if (mimeType.startsWith("video/")) return "video"
-  if (mimeType.startsWith("audio/")) return "voice"
-  return "image"
-}
-
-/** 根据 quality_score / classification_status / asset status 推断前端状态 */
-export const inferStatus = (
-  score?: number,
-  classificationStatus?: string,
-  assetStatus?: string,
-): { status: StatusType; label: string; loading?: boolean } => {
-  // 已删除素材（正常情况列表已过滤，这里是防御性处理）
-  if (assetStatus === "deleted") {
-    return { status: "bad", label: "已删除" }
-  }
-  // 处理中状态：上传中 / 入库中 / 处理中
-  if (
-    assetStatus === "uploading" ||
-    assetStatus === "ingesting" ||
-    assetStatus === "processing" ||
-    assetStatus === "pending"
-  ) {
-    return { status: "info", label: "处理中", loading: true }
-  }
-  // 失败状态
-  if (assetStatus === "error" || assetStatus === "failed") {
-    return { status: "bad", label: "处理失败" }
-  }
-  // 素材已就绪（status=ready）时，不应因 classification 未执行而显示"处理中"
-  if (assetStatus === "ready") {
-    if (score == null) return { status: "info", label: "待诊断" }
-    if (score >= 70) return { status: "ok", label: "合格" }
-    if (score >= 40) return { status: "warn", label: "待优化" }
-    return { status: "bad", label: "不合格" }
-  }
-  // 素材未就绪：classification 正在处理中
-  if (classificationStatus === "processing" || classificationStatus === "pending") {
-    return { status: "info", label: "处理中", loading: true }
-  }
-  if (score == null) return { status: "info", label: "待诊断" }
-  if (score >= 70) return { status: "ok", label: "合格" }
-  if (score >= 40) return { status: "warn", label: "待优化" }
-  return { status: "bad", label: "不合格" }
-}
-
-/** 将后端 AssetLibraryItem 映射为前端 LibraryItem */
-export const mapLibrary = (item: AssetLibraryItem): LibraryItem => ({
-  id: item.id,
-  name: item.name,
-  kind: item.kind || inferKind("video"),
-  count: item.asset_count ?? 0,
-})
-
-/** 将后端 ApiAssetItem 映射为前端 AssetItem */
-export const mapAsset = (item: ApiAssetItem): AssetItem => {
-  const { status, label, loading } = inferStatus(
-    item.quality_score ?? undefined,
-    item.classification_status ?? undefined,
-    item.status ?? undefined,
-  )
-  const metadata = item.metadata || {}
-  const kind = inferKind(item.mime_type || "")
-  return {
-    id: item.id,
-    name: item.name,
-    kind,
-    // 视频类型不能用 file_url 做缩略图（是视频文件，<img> 无法渲染）
-    // 处理中的素材没有缩略图，显示占位符
-    thumbUrl: loading
-      ? undefined
-      : (item.thumbnail_url as string | undefined) ||
-        (metadata.thumbnail_url as string | undefined) ||
-        (kind !== "video" ? (item.file_url as string | undefined) : undefined),
-    fileUrl: (item.file_url as string | undefined) || (metadata.file_url as string | undefined),
-    status,
-    statusLabel: label,
-    loading,
-    duration: metadata.duration != null ? formatDuration(metadata.duration as number) : undefined,
-    size: item.file_size ? +(item.file_size / (1024 * 1024)).toFixed(1) : 0,
-    createdAt: item.created_at ? new Date(item.created_at).toISOString().slice(0, 10) : "—",
-  }
-}

apps/web/src/pages/assets/utils/asset.ts

@@ -1,19 +0,0 @@
-/**
- * 素材相关工具函数
- */
-import type { AssetKind } from "../types"
-import { KIND_LABELS } from "../constants"
-
-export const kindLabel = (kind: AssetKind): string => KIND_LABELS[kind] ?? kind
-
-/** 根据素材类型返回渐变背景 */
-export const thumbGradient = (kind: AssetKind): string => {
-  switch (kind) {
-    case "video":
-      return "linear-gradient(135deg, #312e81 0%, #4f46e5 50%, #6366f1 100%)"
-    case "image":
-      return "linear-gradient(135deg, #78350f 0%, #d97706 50%, #f59e0b 100%)"
-    case "voice":
-      return "linear-gradient(135deg, #064e3b 0%, #059669 50%, #10b981 100%)"
-  }
-}

apps/web/src/pages/assets/utils/format.ts

@@ -1,22 +0,0 @@
-/**
- * 格式化工具函数
- */
-
-export const formatDuration = (seconds: number): string => {
-  const m = Math.floor(seconds / 60)
-  const s = Math.floor(seconds % 60)
-  return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`
-}
-
-export const formatFileSize = (bytes: number): string => {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
-export const formatDate = (iso: string): string =>
-  new Date(iso).toLocaleDateString("zh-CN", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-  })

apps/web/src/pages/assets/utils/kindIcon.tsx

@@ -1,15 +0,0 @@
-import React from "react"
-import { VideoCameraOutlined, PictureOutlined, AudioOutlined } from "@ant-design/icons"
-import type { AssetKind } from "../types"
-
-/** 根据素材类型返回对应图标 */
-export const kindIcon = (kind: AssetKind): React.ReactNode => {
-  switch (kind) {
-    case "video":
-      return <VideoCameraOutlined />
-    case "image":
-      return <PictureOutlined />
-    case "voice":
-      return <AudioOutlined />
-  }
-}

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

@@ -1,304 +0,0 @@
-/**
- * 所有弹窗和 Drawer 组件的集合
- * 纯渲染层，业务逻辑和 state 留在父组件
- */
-import React from "react"
-import type { TemplateCategory } from "@/api/editing-planner"
-import type {
-  ClipData,
-  TransitionConfig,
-  SpeedConfig,
-  TtsConfig,
-  WatermarkConfig,
-  IntroOutroConfig,
-  PipConfig,
-  FilterConfig,
-  ChromaKeyConfig,
-  StickerConfig,
-} from "../types"
-import { DEFAULT_TRANSITION, DEFAULT_SPEED, DEFAULT_TTS_CONFIG } from "../types"
-import type { SubtitleStyleConfig } from "../types/subtitle"
-import type { BgmMixConfig } from "@/api/bgm"
-import SaveModal from "./SaveModal"
-import BgmSelector from "./BgmSelector"
-import SubtitleStylePanel from "./SubtitleStylePanel"
-import TransitionSelector from "./TransitionSelector"
-import SpeedPanel from "./SpeedPanel"
-import TtsPanel from "./TtsPanel"
-import WatermarkPanel from "./WatermarkPanel"
-import IntroOutroPanel from "./IntroOutroPanel"
-import PipConfigPanel from "./PipConfigPanel"
-import FilterPanel from "./FilterPanel"
-import GreenScreenPanel from "./GreenScreenPanel"
-import StickerPanel from "./StickerPanel"
-
-interface EditingDrawersProps {
-  /* 保存弹窗 */
-  saveModalOpen: boolean
-  saveLoading: boolean
-  isUpdate: boolean
-  draftName: string
-  draftCategory: string
-  draftTags: string
-  categories: TemplateCategory[]
-  estimatedDuration: number
-  onNameChange: (name: string) => void
-  onCategoryChange: (cat: string) => void
-  onTagsChange: (tags: string) => void
-  onSave: () => Promise<void>
-  onCancelSave: () => void
-  /* BGM */
-  bgmDrawerOpen: boolean
-  bgmSettings: BgmMixConfig
-  onCloseBgmDrawer: () => void
-  onChangeBgmSettings: (config: BgmMixConfig) => void
-  /* 字幕 */
-  subtitleDrawerOpen: boolean
-  subtitleSettings: SubtitleStyleConfig
-  onCloseSubtitleDrawer: () => void
-  onChangeSubtitleSettings: (config: SubtitleStyleConfig) => void
-  /* 转场 */
-  transitionDrawerOpen: boolean
-  transitionTargetClipId: string | null
-  onCloseTransitionDrawer: () => void
-  onTransitionChange: (config: TransitionConfig) => void
-  /* 调速 */
-  speedDrawerOpen: boolean
-  speedTargetClipId: string | null
-  onCloseSpeedDrawer: () => void
-  onSpeedChange: (config: SpeedConfig) => void
-  onApplySpeedAll: (config: SpeedConfig) => void
-  /* TTS 配音 */
-  ttsDrawerOpen: boolean
-  ttsTargetClipId: string | null
-  onCloseTtsDrawer: () => void
-  onTtsChange: (config: TtsConfig) => void
-  /* 水印 */
-  watermarkDrawerOpen: boolean
-  watermarkSettings: WatermarkConfig
-  onCloseWatermarkDrawer: () => void
-  onWatermarkChange: (config: WatermarkConfig) => void
-  /* 片头片尾 */
-  introOutroDrawerOpen: boolean
-  introOutroSettings: IntroOutroConfig
-  onCloseIntroOutroDrawer: () => void
-  onIntroOutroChange: (config: IntroOutroConfig) => void
-  /* 混剪 */
-  pipDrawerOpen: boolean
-  pipSettings: PipConfig
-  onClosePipDrawer: () => void
-  onPipChange: (config: PipConfig) => void
-  /* 滤镜调色 */
-  filterDrawerOpen: boolean
-  filterSettings: FilterConfig
-  onCloseFilterDrawer: () => void
-  onFilterChange: (config: FilterConfig) => void
-  /* 绿幕抠像 */
-  chromaKeyDrawerOpen: boolean
-  chromaKeySettings: ChromaKeyConfig
-  onCloseChromaKeyDrawer: () => void
-  onChromaKeyChange: (config: ChromaKeyConfig) => void
-  /* 贴纸 */
-  stickerDrawerOpen: boolean
-  stickerSettings: StickerConfig
-  onCloseStickerDrawer: () => void
-  onStickerChange: (config: StickerConfig) => void
-  /* 共享数据 */
-  clips: ClipData[]
-  totalDuration: number
-}
-
-const EditingDrawers: React.FC<EditingDrawersProps> = ({
-  saveModalOpen,
-  saveLoading,
-  isUpdate,
-  draftName,
-  draftCategory,
-  draftTags,
-  categories,
-  estimatedDuration,
-  onNameChange,
-  onCategoryChange,
-  onTagsChange,
-  onSave,
-  onCancelSave,
-  bgmDrawerOpen,
-  bgmSettings,
-  onCloseBgmDrawer,
-  onChangeBgmSettings,
-  subtitleDrawerOpen,
-  subtitleSettings,
-  onCloseSubtitleDrawer,
-  onChangeSubtitleSettings,
-  transitionDrawerOpen,
-  transitionTargetClipId,
-  onCloseTransitionDrawer,
-  onTransitionChange,
-  speedDrawerOpen,
-  speedTargetClipId,
-  onCloseSpeedDrawer,
-  onSpeedChange,
-  onApplySpeedAll,
-  ttsDrawerOpen,
-  ttsTargetClipId,
-  onCloseTtsDrawer,
-  onTtsChange,
-  watermarkDrawerOpen,
-  watermarkSettings,
-  onCloseWatermarkDrawer,
-  onWatermarkChange,
-  introOutroDrawerOpen,
-  introOutroSettings,
-  onCloseIntroOutroDrawer,
-  onIntroOutroChange,
-  pipDrawerOpen,
-  pipSettings,
-  onClosePipDrawer,
-  onPipChange,
-  filterDrawerOpen,
-  filterSettings,
-  onCloseFilterDrawer,
-  onFilterChange,
-  chromaKeyDrawerOpen,
-  chromaKeySettings,
-  onCloseChromaKeyDrawer,
-  onChromaKeyChange,
-  stickerDrawerOpen,
-  stickerSettings,
-  onCloseStickerDrawer,
-  onStickerChange,
-  clips,
-  totalDuration,
-}) => {
-  const transitionConfig = transitionTargetClipId
-    ? (clips.find((c) => c.id === transitionTargetClipId)?.transition ?? DEFAULT_TRANSITION)
-    : DEFAULT_TRANSITION
-  const transitionTitle = transitionTargetClipId ? "片段转场设置" : "全局默认转场"
-
-  const speedConfig = speedTargetClipId
-    ? (clips.find((c) => c.id === speedTargetClipId)?.speed ?? DEFAULT_SPEED)
-    : DEFAULT_SPEED
-
-  const ttsConfig = ttsTargetClipId
-    ? (clips.find((c) => c.id === ttsTargetClipId)?.tts_config ?? DEFAULT_TTS_CONFIG)
-    : DEFAULT_TTS_CONFIG
-
-  return (
-    <>
-      {/* ═══ 保存弹窗 ═══ */}
-      <SaveModal
-        open={saveModalOpen}
-        loading={saveLoading}
-        isUpdate={isUpdate}
-        draftName={draftName}
-        draftCategory={draftCategory}
-        draftTags={draftTags}
-        categories={categories}
-        estimatedDuration={estimatedDuration}
-        onNameChange={onNameChange}
-        onCategoryChange={onCategoryChange}
-        onTagsChange={onTagsChange}
-        onSave={onSave}
-        onCancel={onCancelSave}
-      />
-
-      {/* ═══ BGM 选择器 Drawer ═══ */}
-      <BgmSelector
-        open={bgmDrawerOpen}
-        onClose={onCloseBgmDrawer}
-        config={bgmSettings}
-        onChange={onChangeBgmSettings}
-      />
-
-      {/* ═══ 字幕样式配置 Drawer ═══ */}
-      <SubtitleStylePanel
-        open={subtitleDrawerOpen}
-        onClose={onCloseSubtitleDrawer}
-        config={subtitleSettings}
-        onChange={onChangeSubtitleSettings}
-      />
-
-      {/* ═══ 转场特效选择器 Drawer ═══ */}
-      <TransitionSelector
-        open={transitionDrawerOpen}
-        onClose={onCloseTransitionDrawer}
-        config={transitionConfig}
-        onChange={onTransitionChange}
-        title={transitionTitle}
-      />
-
-      {/* ═══ 片段调速面板 Drawer ═══ */}
-      {speedTargetClipId && (
-        <SpeedPanel
-          open={speedDrawerOpen}
-          onClose={onCloseSpeedDrawer}
-          config={speedConfig}
-          onChange={onSpeedChange}
-          onApplyAll={onApplySpeedAll}
-        />
-      )}
-
-      {/* ═══ TTS 配音面板 Drawer ═══ */}
-      {ttsTargetClipId && (
-        <TtsPanel
-          open={ttsDrawerOpen}
-          onClose={onCloseTtsDrawer}
-          config={ttsConfig}
-          onChange={onTtsChange}
-        />
-      )}
-
-      {/* ═══ 水印配置面板 ═══ */}
-      <WatermarkPanel
-        open={watermarkDrawerOpen}
-        onClose={onCloseWatermarkDrawer}
-        config={watermarkSettings}
-        onChange={onWatermarkChange}
-      />
-
-      {/* ═══ 片头片尾配置面板 ═══ */}
-      <IntroOutroPanel
-        open={introOutroDrawerOpen}
-        onClose={onCloseIntroOutroDrawer}
-        config={introOutroSettings}
-        onChange={onIntroOutroChange}
-      />
-
-      {/* ═══ 混剪配置面板 ═══ */}
-      <PipConfigPanel
-        open={pipDrawerOpen}
-        onClose={onClosePipDrawer}
-        config={pipSettings}
-        onChange={onPipChange}
-        totalDuration={totalDuration}
-      />
-
-      {/* ═══ 滤镜调色面板 ═══ */}
-      <FilterPanel
-        open={filterDrawerOpen}
-        onClose={onCloseFilterDrawer}
-        config={filterSettings}
-        onChange={onFilterChange}
-      />
-
-      {/* ═══ 绿幕抠像面板 ═══ */}
-      <GreenScreenPanel
-        open={chromaKeyDrawerOpen}
-        onClose={onCloseChromaKeyDrawer}
-        config={chromaKeySettings}
-        onChange={onChromaKeyChange}
-      />
-
-      {/* ═══ 贴纸面板 ═══ */}
-      <StickerPanel
-        open={stickerDrawerOpen}
-        onClose={onCloseStickerDrawer}
-        config={stickerSettings}
-        onChange={onStickerChange}
-        totalDuration={totalDuration}
-      />
-    </>
-  )
-}
-
-export default EditingDrawers

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

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

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

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

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

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

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

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

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

@@ -8,20 +8,9 @@
  * - 拖动时实时显示裁剪预览（入点/出点/时长）
  * - 右键片段弹出菜单：分割 / 恢复原始长度 / 删除
  */
-import React, { useState, useRef, useCallback, useEffect } from "react"
+import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo } from "react"
 import type { ClipData, ClipType, TrimConfig } from "../types"
-import {
-  DEFAULT_PIXELS_PER_SECOND,
-} from "../constants/timeline"
-import { formatTime } from "../utils/timeline"
-import { useClipDrag } from "../hooks/useClipDrag"
-import { useTrimDrag } from "../hooks/useTrimDrag"
-import { useTimelineMenus } from "../hooks/useTimelineMenus"
-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"
+import { TRANSITION_OPTIONS } from "@/api/template-editor"
 
 interface TimelinePanelProps {
   clips: ClipData[]
@@ -49,6 +38,37 @@ 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"
+
+/** 裁剪拖拽状态 */
+interface TrimDragState {
+  clipId: string
+  direction: TrimDirection
+  startX: number
+  originalTrim: TrimConfig
+  originalDuration: number
+}
+
+/** 右键菜单状态 */
+interface ContextMenuState {
+  x: number
+  y: number
+  clipId: string
+}
+
 const TimelinePanel: React.FC<TimelinePanelProps> = ({
   clips,
   selectedClipId,
@@ -66,51 +86,147 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
   onSeek,
   totalDuration: totalDurationProp,
 }) => {
-  /* ── 缩放 & 时长 ── */
-  const pps = pixelsPerSecond ?? DEFAULT_PIXELS_PER_SECOND
-  const totalDuration = totalDurationProp ?? clips.reduce((s, c) => s + c.duration, 0)
+  const [dragIdx, setDragIdx] = useState<number | null>(null)
+  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null)
+  const dragRef = useRef<number | null>(null)
+  const [showAddPicker, setShowAddPicker] = useState(false)
+  const pickerRef = useRef<HTMLDivElement>(null)
+  const addCardRef = useRef<HTMLDivElement>(null)
+  const [pickerPos, setPickerPos] = useState<{ top: number; right: number }>({
+    top: 0,
+    right: 0,
+  })
 
-  /* ── 裁剪拖拽 ── */
-  const { trimDrag, trimPreview, handleTrimHandleMouseDown } = useTrimDrag(clips, pps, onClipTrim)
+  /* ── 裁剪拖拽状态 ── */
+  const [trimDrag, setTrimDrag] = useState<TrimDragState | null>(null)
+  const [trimPreview, setTrimPreview] = useState<{
+    clipId: string
+    startTime: number
+    endTime: number
+    duration: number
+    x: number
+    y: number
+  } | null>(null)
 
-  /* ── 片段拖拽排序 ── */
-  const {
-    dragIdx,
-    dragOverIdx,
-    handleDragStart,
-    handleDragOver,
-    handleDragEnd,
-    handleDrop,
-    handleEmptyDragOver,
-  } = useClipDrag(onClipReorder, !!trimDrag)
+  /* ── 右键菜单 ── */
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null)
+  const contextMenuRef = useRef<HTMLDivElement>(null)
 
-  /* ── 菜单 & 面板 ── */
-  const {
-    contextMenu,
-    contextMenuRef,
-    handleContextMenu,
-    handleContextSplit,
-    handleContextResetTrim,
-    handleContextDelete,
-    showAddPicker,
-    pickerRef,
-    addCardRef,
-    pickerPos,
-    availableTypes,
-    addType,
-    addDuration,
-    setAddType,
-    setAddDuration,
-    handleTogglePicker,
-    handleConfirmAdd,
-    hoveredClipId,
-    setHoveredClipId,
-  } = useTimelineMenus(clips, currentMode, onAddClip, onClipSplit, onClipResetTrim, onClipRemove)
+  /* ── 悬停的片段 ID（显示裁剪手柄） ── */
+  const [hoveredClipId, setHoveredClipId] = useState<string | null>(null)
 
   /* ── 播放头拖拽状态 ── */
   const [playheadDragging, setPlayheadDragging] = useState(false)
   const trackRef = useRef<HTMLDivElement>(null)
 
+  /* ── 根据模式决定可选类型 ── */
+  const availableTypes: ClipType[] = useMemo(
+    () =>
+      currentMode === "voice_over" ? ["voice"] : currentMode === "pip" ? ["pip"] : ["voice", "pip"], // voice_pip / one_take / 默认
+    [currentMode],
+  )
+
+  /* ── 默认添加类型：跟随模式 ── */
+  const defaultAddType: ClipType = useMemo(() => {
+    if (currentMode === "voice_over") return "voice"
+    if (currentMode === "pip") return "pip"
+    return "voice"
+  }, [currentMode])
+
+  /* ── "+" 卡片：类型+时长选择状态 ── */
+  const [addType, setAddType] = useState<ClipType>(defaultAddType)
+  const [addDuration, setAddDuration] = useState<number>(5)
+
+  /* ── 模式切换时自动同步默认添加类型 ── */
+  useEffect(() => {
+    if (!availableTypes.includes(addType)) {
+      setAddType(defaultAddType)
+    }
+  }, [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
+    if (top < 8) top = 8
+    let right = vw - rect.right
+    if (rect.right - PICKER_W < 8) {
+      right = vw - PICKER_W - 8
+    }
+    setPickerPos({ top, right })
+  }, [])
+
+  const handleTogglePicker = () => {
+    if (!showAddPicker) {
+      const defaultType =
+        currentMode === "pip" ? "pip" : currentMode === "voice_over" ? "voice" : "voice"
+      setAddType(defaultType)
+      updatePickerPosition()
+    }
+    setShowAddPicker((v) => !v)
+  }
+
+  /* ── 渲染后精确边界校正 ── */
+  useLayoutEffect(() => {
+    if (!showAddPicker || !pickerRef.current || !addCardRef.current) return
+    const pickerEl = pickerRef.current
+    const addRect = addCardRef.current.getBoundingClientRect()
+    const pickerH = pickerEl.offsetHeight
+    const vh = window.innerHeight
+    const vw = window.innerWidth
+    let top = addRect.top - GAP - pickerH
+    if (top < 8) {
+      top = addRect.bottom + GAP
+      if (top + pickerH > vh - 8) {
+        top = vh - 8 - pickerH
+        if (top < 8) top = 8
+      }
+    }
+    let right = vw - addRect.right
+    const pickerRect = pickerEl.getBoundingClientRect()
+    if (pickerRect.left < 8) {
+      right = vw - PICKER_W - 8
+    }
+    setPickerPos({ top, right })
+  }, [showAddPicker])
+
+  /* ── 点击外部关闭添加面板 ── */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) {
+        setShowAddPicker(false)
+      }
+    }
+    if (showAddPicker) {
+      document.addEventListener("mousedown", handleClickOutside)
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [showAddPicker])
+
+  /* ── 点击外部关闭右键菜单 ── */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+        setContextMenu(null)
+      }
+    }
+    if (contextMenu) {
+      document.addEventListener("mousedown", handleClickOutside)
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [contextMenu])
+
+  /* ── 缩放 & 时长 ── */
+  const pps = pixelsPerSecond ?? 40
+  const totalDuration = totalDurationProp ?? clips.reduce((s, c) => s + c.duration, 0)
+
   /* ── 播放头拖拽全局 mousemove/mouseup ── */
   useEffect(() => {
     if (!playheadDragging) return
@@ -154,7 +270,182 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
     setPlayheadDragging(true)
   }, [])
 
+  /* ── 确认添加片段 ── */
+  const handleConfirmAdd = () => {
+    onAddClip(addType, addDuration)
+    setShowAddPicker(false)
+  }
+
+  /* ── 片段拖拽排序 ── */
+  const handleDragStart = (e: React.DragEvent, idx: number) => {
+    // 如果正在裁剪拖拽，不允许排序拖拽
+    if (trimDrag) return
+    dragRef.current = idx
+    setDragIdx(idx)
+    e.dataTransfer.setData("application/x-clip-drag", String(idx))
+    e.dataTransfer.effectAllowed = "move"
+  }
+
+  const handleDragOver = (e: React.DragEvent, idx: number) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "move"
+    setDragOverIdx(idx)
+  }
+
+  const handleDragEnd = () => {
+    dragRef.current = null
+    setDragIdx(null)
+    setDragOverIdx(null)
+  }
+
+  const handleDrop = (e: React.DragEvent, toIdx: number) => {
+    e.preventDefault()
+    setDragOverIdx(null)
+    const fromStr = e.dataTransfer.getData("application/x-clip-drag")
+    if (fromStr !== "") {
+      const fromIdx = Number(fromStr)
+      if (fromIdx !== toIdx) {
+        onClipReorder(fromIdx, toIdx)
+      }
+    }
+  }
+
+  /* ── 空轨道区域不接受素材拖入 ── */
+  const handleEmptyDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+  }
+
+  /* ── 裁剪手柄拖拽 ── */
+  const handleTrimHandleMouseDown = useCallback(
+    (e: React.MouseEvent, clipId: string, direction: TrimDirection) => {
+      e.preventDefault()
+      e.stopPropagation()
+      const clip = clips.find((c) => c.id === clipId)
+      if (!clip) return
+
+      const trim: TrimConfig = clip.trim_config ?? {
+        start_time: 0,
+        end_time: clip.duration,
+        original_duration: clip.duration,
+      }
+
+      setTrimDrag({
+        clipId,
+        direction,
+        startX: e.clientX,
+        originalTrim: { ...trim },
+        originalDuration: clip.duration,
+      })
+    },
+    [clips],
+  )
+
+  /* ── 裁剪拖拽全局 mousemove/mouseup ── */
+  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 clip = clips.find((c) => c.id === trimDrag.clipId)
+      if (!clip) return
+
+      const origTrim = trimDrag.originalTrim
+      const origDur = origTrim.original_duration ?? trimDrag.originalDuration
+      let newStart = origTrim.start_time
+      let newEnd = origTrim.end_time
+
+      if (trimDrag.direction === "left") {
+        // 左手柄：调整入点
+        newStart = Math.max(0, Math.min(origTrim.start_time + dtSec, newEnd - 1))
+      } else {
+        // 右手柄：调整出点
+        newEnd = Math.max(origTrim.start_time + 1, Math.min(origTrim.end_time + dtSec, origDur))
+      }
+
+      const newDuration = Math.round((newEnd - newStart) * 10) / 10
+
+      setTrimPreview({
+        clipId: trimDrag.clipId,
+        startTime: Math.round(newStart * 10) / 10,
+        endTime: Math.round(newEnd * 10) / 10,
+        duration: newDuration,
+        x: e.clientX,
+        y: e.clientY,
+      })
+    }
+
+    const handleMouseUp = () => {
+      if (trimPreview && trimPreview.clipId === trimDrag.clipId && onClipTrim) {
+        const newTrim: TrimConfig = {
+          start_time: trimPreview.startTime,
+          end_time: trimPreview.endTime,
+          original_duration: trimDrag.originalTrim.original_duration ?? trimDrag.originalDuration,
+        }
+        onClipTrim(trimDrag.clipId, newTrim, trimPreview.duration)
+      }
+      setTrimDrag(null)
+      setTrimPreview(null)
+    }
+
+    document.addEventListener("mousemove", handleMouseMove)
+    document.addEventListener("mouseup", handleMouseUp)
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove)
+      document.removeEventListener("mouseup", handleMouseUp)
+    }
+  }, [trimDrag, trimPreview, clips, onClipTrim, pixelsPerSecond])
+
+  /* ── 右键菜单 ── */
+  const handleContextMenu = useCallback((e: React.MouseEvent, clipId: string) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setContextMenu({ x: e.clientX, y: e.clientY, clipId })
+  }, [])
+
+  /* ── 右键菜单操作 ── */
+  const handleContextSplit = useCallback(() => {
+    if (!contextMenu) return
+    if (onClipSplit) {
+      onClipSplit(contextMenu.clipId, 0.5) // 在中间分割
+    }
+    setContextMenu(null)
+  }, [contextMenu, onClipSplit])
+
+  const handleContextResetTrim = useCallback(() => {
+    if (!contextMenu) return
+    if (onClipResetTrim) {
+      onClipResetTrim(contextMenu.clipId)
+    }
+    setContextMenu(null)
+  }, [contextMenu, onClipResetTrim])
+
+  const handleContextDelete = useCallback(() => {
+    if (!contextMenu) return
+    onClipRemove(contextMenu.clipId)
+    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">
@@ -215,7 +506,15 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
 
       {/* 时间标尺 */}
       {currentMode !== "one_take" && (
-        <TimeRuler totalDuration={totalDuration} pps={pps} onClick={handleRulerClick} />
+        <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>
       )}
 
       {/* 水平片段轨道 */}
@@ -237,30 +536,115 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
               <div className="ep-track-empty-text">点击右侧 + 添加片段</div>
             </div>
           ) : (
-            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}
-              />
-            ))
+            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>
+              )
+            })
           )}
 
           {/* ── 轨道末尾 "+" 添加卡片 ── */}
@@ -279,40 +663,109 @@ const TimelinePanel: React.FC<TimelinePanelProps> = ({
 
       {/* 裁剪预览 tooltip */}
       {trimPreview && (
-        <TrimPreview
-          startTime={trimPreview.startTime}
-          endTime={trimPreview.endTime}
-          duration={trimPreview.duration}
-          x={trimPreview.x}
-          y={trimPreview.y}
-        />
+        <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>
       )}
 
       {/* 右键菜单 */}
       {contextMenu && (
-        <ContextMenu
-          x={contextMenu.x}
-          y={contextMenu.y}
-          menuRef={contextMenuRef}
-          hasTrim={!!clips.find((c) => c.id === contextMenu.clipId)?.trim_config}
-          onSplit={handleContextSplit}
-          onResetTrim={handleContextResetTrim}
-          onDelete={handleContextDelete}
-        />
+        <div
+          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>
       )}
 
       {/* 类型+时长选择面板 */}
       {showAddPicker && (
-        <AddClipPicker
-          pickerRef={pickerRef}
-          position={pickerPos}
-          availableTypes={availableTypes}
-          addType={addType}
-          addDuration={addDuration}
-          onTypeChange={setAddType}
-          onDurationChange={setAddDuration}
-          onConfirm={handleConfirmAdd}
-        />
+        <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>
       )}
     </div>
   )

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

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

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

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

@@ -1,155 +0,0 @@
-import React from "react"
-import type { ClipData, TrimConfig } 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

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

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

@@ -1,36 +0,0 @@
-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/constants.ts

@@ -1,12 +0,0 @@
-import type { TemplateMode } from "@/api/editing-planner"
-
-/* ──────────── 常量 ──────────── */
-
-export const MODE_LIST: { key: TemplateMode; label: string; icon: string }[] = [
-  { key: "pip", label: "混剪", icon: "🖼️" },
-  { key: "voice_over", label: "人物口播", icon: "🎙️" },
-  { key: "one_take", label: "一镜到底", icon: "🎥" },
-  { key: "voice_pip", label: "口播+混剪", icon: "🎭" },
-]
-
-export const FILTER_CATEGORIES = ["全部", "种草", "知识", "日常", "推荐"]

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

@@ -1,56 +0,0 @@
-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/hooks/useClipDrag.ts

@@ -1,64 +0,0 @@
-import { useState, useCallback } from "react"
-
-/**
- * 片段拖拽排序 Hook
- * 支持 HTML5 原生拖拽，实时高亮拖拽位置
- */
-export const useClipDrag = (
-  onClipReorder: (fromIdx: number, toIdx: number) => void,
-  disabled?: boolean,
-) => {
-  const [dragIdx, setDragIdx] = useState<number | null>(null)
-  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null)
-
-  const handleDragStart = useCallback(
-    (e: React.DragEvent, idx: number) => {
-      if (disabled) return
-      setDragIdx(idx)
-      e.dataTransfer.setData("application/x-clip-drag", String(idx))
-      e.dataTransfer.effectAllowed = "move"
-    },
-    [disabled],
-  )
-
-  const handleDragOver = useCallback((e: React.DragEvent, idx: number) => {
-    e.preventDefault()
-    e.dataTransfer.dropEffect = "move"
-    setDragOverIdx(idx)
-  }, [])
-
-  const handleDragEnd = useCallback(() => {
-    setDragIdx(null)
-    setDragOverIdx(null)
-  }, [])
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent, toIdx: number) => {
-      e.preventDefault()
-      setDragOverIdx(null)
-      const fromStr = e.dataTransfer.getData("application/x-clip-drag")
-      if (fromStr !== "") {
-        const fromIdx = Number(fromStr)
-        if (fromIdx !== toIdx) {
-          onClipReorder(fromIdx, toIdx)
-        }
-      }
-      setDragIdx(null)
-    },
-    [onClipReorder],
-  )
-
-  const handleEmptyDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-  }, [])
-
-  return {
-    dragIdx,
-    dragOverIdx,
-    handleDragStart,
-    handleDragOver,
-    handleDragEnd,
-    handleDrop,
-    handleEmptyDragOver,
-  }
-}

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

@@ -1,238 +0,0 @@
-import { useState, useCallback, useMemo } from "react"
-import { Modal, message } from "antd"
-import type {
-  ClipData,
-  ClipType,
-  TransitionConfig,
-  SpeedConfig,
-  TtsConfig,
-  TrimConfig,
-} from "../types"
-import type { AssetItem } from "@/api/assets"
-
-interface UseClipOperationsParams {
-  clips: ClipData[]
-  setClips: (updater: (prev: ClipData[]) => ClipData[]) => void
-}
-
-/**
- * 片段操作 Hook
- * 片段增删改查、排序、裁剪、分割、转场、调速、TTS、配音选择
- */
-export const useClipOperations = ({ clips, setClips }: UseClipOperationsParams) => {
-  const [selectedClipId, setSelectedClipId] = useState<string | null>(null)
-
-  const selectedClip = useMemo(
-    () => clips.find((c) => c.id === selectedClipId) || null,
-    [clips, selectedClipId],
-  )
-
-  /* ── 选中 / 重排 / 删除 ── */
-
-  const handleClipSelect = useCallback((clipId: string) => {
-    setSelectedClipId(clipId)
-  }, [])
-
-  const handleClipReorder = useCallback(
-    (fromIdx: number, toIdx: number) => {
-      setClips((prev) => {
-        const updated = [...prev]
-        const [moved] = updated.splice(fromIdx, 1)
-        updated.splice(toIdx, 0, moved)
-        return updated.map((c, i) => ({ ...c, order: i }))
-      })
-    },
-    [setClips],
-  )
-
-  const handleClipRemove = useCallback(
-    (clipId: string) => {
-      Modal.confirm({
-        title: "删除片段",
-        content: "确定要删除这个片段吗？此操作可通过撤销恢复。",
-        okText: "删除",
-        okType: "danger",
-        cancelText: "取消",
-        onOk: () => {
-          setClips((prev) => prev.filter((c) => c.id !== clipId))
-          if (selectedClipId === clipId) setSelectedClipId(null)
-        },
-      })
-    },
-    [setClips, selectedClipId],
-  )
-
-  const handleClipUpdate = useCallback(
-    (clipId: string, data: Partial<ClipData>) => {
-      setClips((prev) => prev.map((c) => (c.id === clipId ? { ...c, ...data } : c)))
-    },
-    [setClips],
-  )
-
-  /**
-   * 添加片段（不绑定任何素材）
-   * 片段 = 时间规划 + 类型标记
-   */
-  const handleAddClip = useCallback(
-    (type: ClipType, duration: number) => {
-      const newClip: ClipData = {
-        id: `clip-${Date.now()}`,
-        type,
-        duration,
-        startOffset: 0,
-        order: clips.length,
-      }
-      setClips((prev) => [...prev, newClip])
-    },
-    [clips.length, setClips],
-  )
-
-  /* ── 裁剪 / 分割 / 重置 ── */
-
-  const handleClipTrim = useCallback(
-    (clipId: string, trimConfig: TrimConfig, newDuration: number) => {
-      setClips((prev) =>
-        prev.map((c) =>
-          c.id === clipId ? { ...c, trim_config: trimConfig, duration: newDuration } : c,
-        ),
-      )
-    },
-    [setClips],
-  )
-
-  const handleClipSplit = useCallback(
-    (clipId: string, splitRatio: number) => {
-      setClips((prev) => {
-        const idx = prev.findIndex((c) => c.id === clipId)
-        if (idx === -1) return prev
-        const clip = prev[idx]
-        const splitPoint = Math.round(clip.duration * splitRatio * 10) / 10
-        if (splitPoint < 0.5 || splitPoint >= clip.duration - 0.5) return prev
-
-        // 前半段
-        const firstHalf: ClipData = {
-          ...clip,
-          duration: splitPoint,
-          trim_config: clip.trim_config
-            ? {
-                ...clip.trim_config,
-                end_time: clip.trim_config.start_time + splitPoint,
-              }
-            : undefined,
-        }
-
-        // 后半段
-        const secondHalf: ClipData = {
-          ...clip,
-          id: `clip-${Date.now()}`,
-          duration: clip.duration - splitPoint,
-          startOffset: clip.startOffset + splitPoint,
-          trim_config: clip.trim_config
-            ? {
-                ...clip.trim_config,
-                start_time: clip.trim_config.start_time + splitPoint,
-              }
-            : undefined,
-          order: (clip.order ?? idx) + 1,
-        }
-
-        const updated = [...prev]
-        updated[idx] = firstHalf
-        updated.splice(idx + 1, 0, secondHalf)
-        return updated.map((c, i) => ({ ...c, order: i }))
-      })
-    },
-    [setClips],
-  )
-
-  const handleClipResetTrim = useCallback(
-    (clipId: string) => {
-      setClips((prev) =>
-        prev.map((c) => {
-          if (c.id !== clipId || !c.trim_config) return c
-          const originalDuration = c.trim_config.original_duration ?? c.duration
-          return {
-            ...c,
-            duration: originalDuration,
-            trim_config: undefined,
-          }
-        }),
-      )
-    },
-    [setClips],
-  )
-
-  /* ── 转场 / 调速 / TTS ── */
-
-  const handleTransitionChange = useCallback(
-    (targetClipId: string | null, config: TransitionConfig) => {
-      if (targetClipId) {
-        handleClipUpdate(targetClipId, { transition: config })
-      }
-      // 同时更新全局默认转场（供新片段使用）—— 暂未实现全局默认
-    },
-    [handleClipUpdate],
-  )
-
-  const handleSpeedChange = useCallback(
-    (targetClipId: string | null, config: SpeedConfig) => {
-      if (targetClipId) {
-        handleClipUpdate(targetClipId, { speed: config })
-      }
-    },
-    [handleClipUpdate],
-  )
-
-  const handleApplySpeedAll = useCallback(
-    (config: SpeedConfig) => {
-      setClips((prev) => prev.map((c) => ({ ...c, speed: { ...config } })))
-      message.success("已应用到所有片段")
-    },
-    [setClips],
-  )
-
-  const handleTtsChange = useCallback(
-    (targetClipId: string | null, ttsConfig: TtsConfig) => {
-      if (!targetClipId) return
-      handleClipUpdate(targetClipId, { tts_config: ttsConfig })
-    },
-    [handleClipUpdate],
-  )
-
-  /** 为片段选择配音素材 */
-  const handleClipVoiceSelect = useCallback(
-    (clipId: string, asset: AssetItem | null) => {
-      setClips((prev) =>
-        prev.map((c) =>
-          c.id === clipId
-            ? {
-                ...c,
-                voice_asset_id: asset?.id ?? undefined,
-                voice_file_url: asset?.file_url ?? undefined,
-              }
-            : c,
-        ),
-      )
-    },
-    [setClips],
-  )
-
-  return {
-    selectedClipId,
-    setSelectedClipId,
-    selectedClip,
-    handleClipSelect,
-    handleClipReorder,
-    handleClipRemove,
-    handleClipUpdate,
-    handleAddClip,
-    handleClipTrim,
-    handleClipSplit,
-    handleClipResetTrim,
-    handleTransitionChange,
-    handleSpeedChange,
-    handleApplySpeedAll,
-    handleTtsChange,
-    handleClipVoiceSelect,
-  }
-}

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

@@ -1,78 +0,0 @@
-import { useState, useCallback } from "react"
-
-/**
- * 编辑器 Drawer 开关管理
- * 集中管理 11 个抽屉的开关状态 + 3 个目标片段 ID + 快捷打开方法
- */
-export const useEditorDrawers = () => {
-  /* ── 抽屉开关 ── */
-  const [bgmDrawerOpen, setBgmDrawerOpen] = useState(false)
-  const [subtitleDrawerOpen, setSubtitleDrawerOpen] = useState(false)
-  const [transitionDrawerOpen, setTransitionDrawerOpen] = useState(false)
-  const [speedDrawerOpen, setSpeedDrawerOpen] = useState(false)
-  const [ttsDrawerOpen, setTtsDrawerOpen] = useState(false)
-  const [watermarkDrawerOpen, setWatermarkDrawerOpen] = useState(false)
-  const [introOutroDrawerOpen, setIntroOutroDrawerOpen] = useState(false)
-  const [pipDrawerOpen, setPipDrawerOpen] = useState(false)
-  const [filterDrawerOpen, setFilterDrawerOpen] = useState(false)
-  const [chromaKeyDrawerOpen, setChromaKeyDrawerOpen] = useState(false)
-  const [stickerDrawerOpen, setStickerDrawerOpen] = useState(false)
-
-  /* ── 目标片段 ID ── */
-  /** 当前正在编辑转场的片段 ID（null = 全局默认转场） */
-  const [transitionTargetClipId, setTransitionTargetClipId] = useState<string | null>(null)
-  /** 当前正在调速的片段 ID */
-  const [speedTargetClipId, setSpeedTargetClipId] = useState<string | null>(null)
-  /** 当前正在配置 TTS 的片段 ID */
-  const [ttsTargetClipId, setTtsTargetClipId] = useState<string | null>(null)
-
-  /* ── 快捷打开 ── */
-  const openTransitionDrawer = useCallback((clipId?: string) => {
-    setTransitionTargetClipId(clipId ?? null)
-    setTransitionDrawerOpen(true)
-  }, [])
-
-  const openSpeedDrawer = useCallback((clipId: string) => {
-    setSpeedTargetClipId(clipId)
-    setSpeedDrawerOpen(true)
-  }, [])
-
-  const openTtsDrawer = useCallback((clipId: string) => {
-    setTtsTargetClipId(clipId)
-    setTtsDrawerOpen(true)
-  }, [])
-
-  return {
-    // 开关 state
-    bgmDrawerOpen,
-    setBgmDrawerOpen,
-    subtitleDrawerOpen,
-    setSubtitleDrawerOpen,
-    transitionDrawerOpen,
-    setTransitionDrawerOpen,
-    speedDrawerOpen,
-    setSpeedDrawerOpen,
-    ttsDrawerOpen,
-    setTtsDrawerOpen,
-    watermarkDrawerOpen,
-    setWatermarkDrawerOpen,
-    introOutroDrawerOpen,
-    setIntroOutroDrawerOpen,
-    pipDrawerOpen,
-    setPipDrawerOpen,
-    filterDrawerOpen,
-    setFilterDrawerOpen,
-    chromaKeyDrawerOpen,
-    setChromaKeyDrawerOpen,
-    stickerDrawerOpen,
-    setStickerDrawerOpen,
-    // 目标 ID
-    transitionTargetClipId,
-    speedTargetClipId,
-    ttsTargetClipId,
-    // 快捷方法
-    openTransitionDrawer,
-    openSpeedDrawer,
-    openTtsDrawer,
-  }
-}

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

@@ -1,56 +0,0 @@
-import { useState, useCallback, useEffect, useRef } from "react"
-
-/**
- * 播放控制 Hook
- * 播放/暂停、rAF 帧推进、时间线缩放、seek
- */
-export const usePlaybackControl = (totalDuration: number) => {
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [currentTime, setCurrentTime] = useState(0)
-  const [pixelsPerSecond, setPixelsPerSecond] = useState(40)
-  const prevFrameTimeRef = useRef<number | null>(null)
-
-  /** 播放头跳转 */
-  const handleSeek = useCallback((time: number) => {
-    setCurrentTime(Math.max(0, time))
-  }, [])
-
-  /** 轨道缩放 */
-  const handleZoomChange = useCallback((pps: number) => {
-    setPixelsPerSecond(pps)
-  }, [])
-
-  /** rAF 帧推进 — 播放时平滑更新播放头位置 */
-  useEffect(() => {
-    if (!isPlaying) {
-      prevFrameTimeRef.current = null
-      return
-    }
-    let rafId: number
-    const tick = (timestamp: number) => {
-      if (prevFrameTimeRef.current !== null) {
-        const delta = (timestamp - prevFrameTimeRef.current) / 1000
-        setCurrentTime((prev) => {
-          const next = prev + delta
-          return next >= totalDuration ? totalDuration : next
-        })
-      }
-      prevFrameTimeRef.current = timestamp
-      rafId = requestAnimationFrame(tick)
-    }
-    rafId = requestAnimationFrame(tick)
-    return () => {
-      cancelAnimationFrame(rafId)
-      prevFrameTimeRef.current = null
-    }
-  }, [isPlaying, totalDuration])
-
-  return {
-    isPlaying,
-    setIsPlaying,
-    currentTime,
-    pixelsPerSecond,
-    handleSeek,
-    handleZoomChange,
-  }
-}

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

@@ -1,466 +0,0 @@
-import { useState, useCallback, useEffect, type Dispatch, type SetStateAction } from "react"
-import { FILTER_CATEGORIES } from "../constants"
-import { message } from "antd"
-import type {
-  EditingTemplate,
-  TemplateCategory,
-  TemplateMode,
-  SaveTemplatePayload,
-} from "@/api/editing-planner"
-import {
-  getEditingTemplates,
-  getEditingTemplate,
-  createEditingTemplate,
-  updateEditingTemplate,
-  getTemplateCategories,
-} from "@/api/editing-planner"
-import type { MediaAsset, TitleConfig, TransitionEffect } from "@/api/template-editor"
-import { getMediaAssets, getEditPlan, getEditPlanClips } from "@/api/template-editor"
-import type {
-  ClipData,
-  ClipType,
-  TtsConfig,
-  TtsMode,
-  TrimConfig,
-  WatermarkConfig,
-  IntroOutroConfig,
-  PipConfig,
-  FilterConfig,
-  ChromaKeyConfig,
-  StickerConfig,
-  CoverConfig,
-} from "../types"
-import type { SubtitleStyleConfig } from "../types/subtitle"
-import type { BgmMixConfig } from "@/api/bgm"
-
-interface UseTemplateManagementParams {
-  urlTemplateId: string
-  urlPlanId: string
-  resetClips: (clips: ClipData[]) => void
-  setClips: (updater: (prev: ClipData[]) => ClipData[]) => void
-  setSelectedClipId: (id: string | null) => void
-  setMediaAssets: (assets: MediaAsset[]) => void
-  setTitleConfig: Dispatch<SetStateAction<TitleConfig>>
-  setSubtitleSettings: Dispatch<SetStateAction<SubtitleStyleConfig>>
-  setBgmSettings: Dispatch<SetStateAction<BgmMixConfig>>
-  setCoverConfig: Dispatch<SetStateAction<CoverConfig>>
-  // 保存时需要的配置
-  clips: ClipData[]
-  totalDuration: number
-  titleConfig: TitleConfig
-  subtitleSettings: SubtitleStyleConfig
-  bgmSettings: BgmMixConfig
-  watermarkSettings: WatermarkConfig
-  introOutroSettings: IntroOutroConfig
-  pipSettings: PipConfig
-  filterSettings: FilterConfig
-  chromaKeySettings: ChromaKeyConfig
-  stickerSettings: StickerConfig
-  coverConfig: CoverConfig
-}
-
-/**
- * 模板管理 Hook
- * 模板列表/分类/加载/保存/模式切换/筛选搜索 + 3 个 useEffect
- */
-export const useTemplateManagement = (params: UseTemplateManagementParams) => {
-  const {
-    urlTemplateId,
-    urlPlanId,
-    resetClips,
-    setClips,
-    setSelectedClipId,
-    setMediaAssets,
-    setTitleConfig,
-    setSubtitleSettings,
-    setBgmSettings,
-    setCoverConfig,
-    clips,
-    totalDuration,
-    titleConfig,
-    subtitleSettings,
-    bgmSettings,
-    watermarkSettings,
-    introOutroSettings,
-    pipSettings,
-    filterSettings,
-    chromaKeySettings,
-    stickerSettings,
-    coverConfig,
-  } = params
-
-  /* ── 模板列表 ── */
-  const [templates, setTemplates] = useState<EditingTemplate[]>([])
-  const [categories, setCategories] = useState<TemplateCategory[]>([])
-  const [loadingTemplates, setLoadingTemplates] = useState(false)
-  const [loadedTemplateId, setLoadedTemplateId] = useState<string | null>(urlTemplateId || null)
-  const [currentMode, setCurrentMode] = useState<TemplateMode>("pip")
-
-  /* ── 左栏筛选 ── */
-  const [currentFilter, setCurrentFilter] = useState("全部")
-  const [searchQuery, setSearchQuery] = useState("")
-
-  /* ── 保存弹窗 ── */
-  const [saveModalOpen, setSaveModalOpen] = useState(false)
-  const [draftName, setDraftName] = useState("")
-  const [draftCategory, setDraftCategory] = useState("")
-  const [draftTags, setDraftTags] = useState("")
-  const [saveLoading, setSaveLoading] = useState(false)
-
-  /* ── 计划 ID（从 URL 传入，不变） ── */
-  const [loadedPlanId] = useState<string | null>(urlPlanId || null)
-
-  /* ── 计算 ── */
-  const filteredTemplates = templates.filter((t) => {
-    if (currentFilter !== "全部" && t.category !== currentFilter) return false
-    if (searchQuery && !t.name.toLowerCase().includes(searchQuery.toLowerCase())) return false
-    return true
-  })
-
-  const currentTemplate = templates.find((t) => t.id === loadedTemplateId) || null
-
-  /* ──────────── 加载 ──────────── */
-
-  /**
-   * 并行加载模板列表、分类、素材库
-   * 首次挂载时调用，三个接口无依赖关系，用 Promise.all 并发
-   */
-  const loadTemplates = useCallback(async () => {
-    setLoadingTemplates(true)
-    try {
-      const [tpls, cats, assets] = await Promise.all([
-        getEditingTemplates(),
-        getTemplateCategories(),
-        getMediaAssets(),
-      ])
-      setTemplates(tpls)
-      setCategories(cats)
-      setMediaAssets(assets)
-    } catch {
-      message.error("加载模板失败")
-    } finally {
-      setLoadingTemplates(false)
-    }
-  }, [setMediaAssets])
-
-  useEffect(() => {
-    loadTemplates()
-  }, [loadTemplates])
-
-  /**
-   * 加载模板详情并初始化片段列表
-   * 将后端 segments 映射为前端 ClipData，取 duration_min/max 均值作为默认时长
-   * 同时还原标题/字幕/BGM 配置
-   */
-  useEffect(() => {
-    if (!loadedTemplateId) return
-    getEditingTemplate(loadedTemplateId)
-      .then((tpl) => {
-        if (!tpl) return
-        setCurrentMode(tpl.mode)
-        const mapped: ClipData[] = tpl.segments.map((seg, idx) => ({
-          id: seg.id || `seg-${idx}`,
-          template_segment_id: seg.id || `seg-${idx}`,
-          type: (seg.material_type === "voiceover" ? "voice" : "pip") as ClipType,
-          duration: (seg.duration_min + seg.duration_max) / 2,
-          startOffset: 0,
-          script_text: "",
-          order: seg.segment_order,
-        }))
-        resetClips(mapped)
-
-        setTitleConfig({
-          ai_auto_select: tpl.title_config.ai_auto_select,
-          content: tpl.title_config.content,
-          position: tpl.title_config.position,
-          font_preset: tpl.title_config.font_preset,
-          font_size: tpl.title_config.font_size,
-          font_color: tpl.title_config.font_color || "#ffffff",
-        })
-        setSubtitleSettings((prev) => ({
-          ...prev,
-          enabled: tpl.subtitle_config.enabled,
-          position: (tpl.subtitle_config.position || "bottom") as SubtitleStyleConfig["position"],
-          font: tpl.subtitle_config.font,
-          fontSize: tpl.subtitle_config.size,
-          fontColor: tpl.subtitle_config.color || "#ffffff",
-          animation: tpl.subtitle_config.animation,
-        }))
-        setBgmSettings((prev) => ({
-          ...prev,
-          enabled: tpl.bgm_config.enabled,
-          music_id: tpl.bgm_config.music_id || "",
-        }))
-        setDraftName(tpl.name)
-        setDraftCategory(tpl.category)
-        setDraftTags(tpl.tags.join(", "))
-      })
-      .catch(() => message.error("加载模板详情失败"))
-  }, [loadedTemplateId, resetClips, setTitleConfig, setSubtitleSettings, setBgmSettings])
-
-  /**
-   * 加载已有模板草稿数据到编辑器
-   * 从列表页"编辑"按钮进入时，URL 带 planId，需要还原计划配置
-   */
-  useEffect(() => {
-    if (!loadedPlanId) return
-
-    // 并行加载计划基本信息 + 片段列表
-    Promise.all([
-      getEditPlan(loadedPlanId),
-      getEditPlanClips(loadedPlanId, { limit: 500 }).catch(() => ({
-        items: [],
-        total: 0,
-      })),
-    ])
-      .then(([plan, clipsRes]) => {
-        // 设置关联的模板（触发模板加载 effect）
-        setLoadedTemplateId(plan.template_id)
-
-        // 还原基本信息
-        setDraftName(plan.name)
-
-        // 还原 config 中的编辑器状态
-        const cfg = plan.config
-        if (cfg.title_config) {
-          setTitleConfig({
-            ai_auto_select: cfg.title_config!.ai_auto_select,
-            content: cfg.title_config!.content,
-            position: cfg.title_config!.position,
-            font_preset: cfg.title_config!.font_preset,
-            font_size: cfg.title_config!.font_size,
-            font_color: cfg.title_config!.font_color || "#ffffff",
-          })
-        }
-        if (cfg.subtitle_config) {
-          setSubtitleSettings((prev) => ({
-            ...prev,
-            enabled: cfg.subtitle_config!.enabled,
-            position: (cfg.subtitle_config!.position ||
-              "bottom") as SubtitleStyleConfig["position"],
-            font: cfg.subtitle_config!.font,
-            fontSize: cfg.subtitle_config!.size,
-            fontColor: cfg.subtitle_config!.color || "#ffffff",
-            animation: cfg.subtitle_config!.animation,
-          }))
-        }
-        if (cfg.bgm_config) {
-          setBgmSettings((prev) => ({
-            ...prev,
-            enabled: cfg.bgm_config!.enabled,
-            music_id: cfg.bgm_config!.music_id || "",
-          }))
-        }
-        // 还原封面配置
-        if (cfg.cover_config) {
-          setCoverConfig((prev) => ({
-            ...prev,
-            enabled: cfg.cover_config!.enabled ?? prev.enabled,
-            mode: (cfg.cover_config!.mode as CoverConfig["mode"]) || prev.mode,
-            frame_time: cfg.cover_config!.frame_time ?? prev.frame_time,
-            upload_url: cfg.cover_config!.upload_url || prev.upload_url,
-            thumbnail_url: cfg.cover_config!.thumbnail_url || prev.thumbnail_url,
-            ai_suggested_time: cfg.cover_config!.ai_suggested_time ?? prev.ai_suggested_time,
-          }))
-        }
-
-        // 还原片段：优先从后端 clips 表，其次从 config.segments 兜底
-        const backendClips = clipsRes?.items || []
-        if (backendClips.length > 0) {
-          // 从后端 clips 表还原
-          const sorted = [...backendClips].sort((a, b) => a.order - b.order)
-          const mapped: ClipData[] = sorted.map((clip) => ({
-            id: clip.id,
-            template_segment_id: (clip.config?.template_segment_id as string) || "",
-            type: (clip.clip_type === "voiceover" ? "voice" : "pip") as ClipType,
-            duration: clip.duration || 3,
-            startOffset: 0,
-            script_text: clip.text_content || "",
-            order: clip.order,
-            media_asset_id: clip.asset_id || undefined,
-            transition:
-              clip.transition_effect && clip.transition_effect !== "none"
-                ? {
-                    type: clip.transition_effect as TransitionEffect["type"],
-                    duration: clip.transition_duration || 0.3,
-                  }
-                : undefined,
-            speed: clip.playback_speed
-              ? { rate: clip.playback_speed, pitchCorrection: true }
-              : undefined,
-            tts_config: (clip.config?.tts_config as TtsConfig) || undefined,
-            trim_config: (clip.config?.trim_config as TrimConfig) || undefined,
-          }))
-          setTimeout(() => resetClips(mapped), 100)
-        } else if (cfg.segments && cfg.segments.length > 0) {
-          // 兜底：从 config.segments 还原（老数据兼容）
-          const mapped: ClipData[] = cfg.segments.map((seg, idx) => ({
-            id: `seg-${idx}`,
-            template_segment_id: `seg-${idx}`,
-            type: (seg.material_type === "voiceover" ? "voice" : "pip") as ClipType,
-            duration: (seg.duration_min + seg.duration_max) / 2,
-            startOffset: 0,
-            script_text: "",
-            order: seg.segment_order,
-            transition: seg.transition
-              ? {
-                  type: seg.transition.type as TransitionEffect["type"],
-                  duration: seg.transition.duration,
-                }
-              : undefined,
-            speed: seg.playback_speed
-              ? { rate: seg.playback_speed, pitchCorrection: true }
-              : undefined,
-            tts_config: seg.tts_config
-              ? { ...seg.tts_config, mode: seg.tts_config.mode as TtsMode }
-              : undefined,
-            trim_config: seg.trim_config || undefined,
-          }))
-          setTimeout(() => resetClips(mapped), 100)
-        }
-      })
-      .catch(() => message.error("加载模板草稿失败"))
-  }, [
-    loadedPlanId,
-    resetClips,
-    setTitleConfig,
-    setSubtitleSettings,
-    setBgmSettings,
-    setCoverConfig,
-  ])
-
-  /* ──────────── 事件 ──────────── */
-
-  const handleLoadTemplate = (templateId: string) => {
-    setLoadedTemplateId(templateId)
-    setSelectedClipId(null)
-  }
-
-  const handleModeChange = (mode: TemplateMode) => {
-    setCurrentMode(mode)
-    // 切换纯单类型模式时，自动转换所有已有片段的类型
-    if (mode === "voice_over") {
-      setClips((prev) => prev.map((c) => ({ ...c, type: "voice" as const })))
-    } else if (mode === "pip") {
-      setClips((prev) => prev.map((c) => ({ ...c, type: "pip" as const })))
-    }
-    // 混合模式(voice_pip)和一镜到底(one_take)不自动转换，保留原有类型
-  }
-
-  const handleOpenSaveModal = () => {
-    setSaveModalOpen(true)
-  }
-
-  const handleSave = async () => {
-    if (!draftName.trim()) {
-      message.warning("请输入模板名称")
-      return
-    }
-    setSaveLoading(true)
-    try {
-      const payload: SaveTemplatePayload = {
-        name: draftName,
-        mode: currentMode,
-        category: draftCategory,
-        tags: draftTags
-          .split(",")
-          .map((t) => t.trim())
-          .filter(Boolean),
-        title_config: titleConfig,
-        subtitle_config: {
-          enabled: subtitleSettings.enabled,
-          position: subtitleSettings.position,
-          font: subtitleSettings.font,
-          color: subtitleSettings.fontColor,
-          size: subtitleSettings.fontSize,
-          animation: subtitleSettings.animation,
-        },
-        bgm_config: {
-          enabled: bgmSettings.enabled,
-          music_id: bgmSettings.music_id,
-        },
-        estimated_duration: totalDuration,
-        segments: clips.map((c, i) => ({
-          segment_order: i,
-          duration_min: Math.max(1, c.duration - 2),
-          duration_max: c.duration + 2,
-          material_type: c.type === "voice" ? "voiceover" : "video",
-          transition: c.transition
-            ? { type: c.transition.type, duration: c.transition.duration }
-            : undefined,
-          playback_speed: c.speed ? c.speed.rate : undefined,
-          tts_config: c.tts_config
-            ? {
-                mode: c.tts_config.mode,
-                text: c.tts_config.text,
-                voice_id: c.tts_config.voice_id,
-                speed: c.tts_config.speed,
-                pitch: c.tts_config.pitch,
-                volume: c.tts_config.volume,
-                subtitle_sync: c.tts_config.subtitle_sync,
-              }
-            : undefined,
-          trim_config: c.trim_config
-            ? {
-                start_time: c.trim_config.start_time,
-                end_time: c.trim_config.end_time,
-              }
-            : undefined,
-        })),
-        watermark_config: { ...watermarkSettings },
-        intro_outro_config: { ...introOutroSettings },
-        pip_config: { ...pipSettings },
-        filter_config: { ...filterSettings },
-        green_screen_config: { ...chromaKeySettings },
-        sticker_config: { ...stickerSettings },
-        cover_config: { ...coverConfig },
-      }
-      if (loadedTemplateId) {
-        await updateEditingTemplate(loadedTemplateId, payload)
-      } else {
-        await createEditingTemplate(payload)
-      }
-      message.success(loadedTemplateId ? "模板保存成功" : "模板创建成功")
-      setSaveModalOpen(false)
-      loadTemplates()
-    } catch {
-      message.error("保存失败")
-    } finally {
-      setSaveLoading(false)
-    }
-  }
-
-  return {
-    // state
-    templates,
-    categories,
-    loadingTemplates,
-    loadedTemplateId,
-    setLoadedTemplateId,
-    currentMode,
-    setCurrentMode,
-    currentFilter,
-    setCurrentFilter,
-    searchQuery,
-    setSearchQuery,
-    saveModalOpen,
-    setSaveModalOpen,
-    draftName,
-    setDraftName,
-    draftCategory,
-    setDraftCategory,
-    draftTags,
-    setDraftTags,
-    saveLoading,
-    filteredTemplates,
-    currentTemplate,
-    // methods
-    loadTemplates,
-    handleLoadTemplate,
-    handleModeChange,
-    handleOpenSaveModal,
-    handleSave,
-  }
-}
-
-export { FILTER_CATEGORIES }

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

@@ -1,202 +0,0 @@
-import { useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect } from "react"
-import type { ClipData, ClipType, TrimConfig } from "../types"
-import {
-  DEFAULT_ADD_DURATION,
-  MIN_ADD_DURATION,
-  MAX_ADD_DURATION,
-  ADD_PICKER_WIDTH,
-  TRACK_GAP,
-} from "../constants/timeline"
-
-interface ContextMenuState {
-  x: number
-  y: number
-  clipId: string
-}
-
-/**
- * 时间线菜单 Hook
- * 管理右键菜单和添加片段面板的状态与交互
- */
-export const useTimelineMenus = (
-  clips: ClipData[],
-  currentMode: string,
-  onAddClip: (type: ClipType, duration: number) => void,
-  onClipSplit?: (clipId: string, splitRatio: number) => void,
-  onClipResetTrim?: (clipId: string) => void,
-  onClipRemove?: (clipId: string) => void,
-) => {
-  /* ── 右键菜单 ── */
-  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null)
-  const contextMenuRef = useRef<HTMLDivElement>(null)
-
-  /* ── 添加片段面板 ── */
-  const [showAddPicker, setShowAddPicker] = useState(false)
-  const pickerRef = useRef<HTMLDivElement>(null)
-  const addCardRef = useRef<HTMLDivElement>(null)
-  const [pickerPos, setPickerPos] = useState<{ top: number; right: number }>({ top: 0, right: 0 })
-
-  /* ── 悬停的片段 ID（显示裁剪手柄） ── */
-  const [hoveredClipId, setHoveredClipId] = useState<string | null>(null)
-
-  /* ── 根据模式决定可选类型 ── */
-  const availableTypes: ClipType[] = useMemo(
-    () =>
-      currentMode === "voice_over"
-        ? ["voice"]
-        : currentMode === "pip"
-          ? ["pip"]
-          : ["voice", "pip"],
-    [currentMode],
-  )
-
-  /* ── 默认添加类型：跟随模式 ── */
-  const defaultAddType: ClipType = useMemo(() => {
-    if (currentMode === "voice_over") return "voice"
-    if (currentMode === "pip") return "pip"
-    return "voice"
-  }, [currentMode])
-
-  /* ── "+" 卡片：类型+时长选择状态 ── */
-  const [addType, setAddType] = useState<ClipType>(defaultAddType)
-  const [addDuration, setAddDuration] = useState<number>(DEFAULT_ADD_DURATION)
-
-  /* ── 模式切换时自动同步默认添加类型 ── */
-  useEffect(() => {
-    if (!availableTypes.includes(addType)) {
-      setAddType(defaultAddType)
-    }
-  }, [currentMode, addType, availableTypes, defaultAddType])
-
-  /* ── 计算 picker 初始位置 ── */
-  const updatePickerPosition = useCallback(() => {
-    if (!addCardRef.current) return
-    const rect = addCardRef.current.getBoundingClientRect()
-    const vw = window.innerWidth
-    const roughHeight = 180
-    let top = rect.top - TRACK_GAP - roughHeight
-    if (top < 8) top = 8
-    let right = vw - rect.right
-    if (rect.right - ADD_PICKER_WIDTH < 8) {
-      right = vw - ADD_PICKER_WIDTH - 8
-    }
-    setPickerPos({ top, right })
-  }, [])
-
-  const handleTogglePicker = useCallback(() => {
-    if (!showAddPicker) {
-      setAddType(defaultAddType)
-      updatePickerPosition()
-    }
-    setShowAddPicker((v) => !v)
-  }, [showAddPicker, defaultAddType, updatePickerPosition])
-
-  /* ── 渲染后精确边界校正 ── */
-  useLayoutEffect(() => {
-    if (!showAddPicker || !pickerRef.current || !addCardRef.current) return
-    const pickerEl = pickerRef.current
-    const addRect = addCardRef.current.getBoundingClientRect()
-    const pickerH = pickerEl.offsetHeight
-    const vh = window.innerHeight
-    const vw = window.innerWidth
-
-    let top = addRect.top - TRACK_GAP - pickerH
-    if (top < 8) {
-      top = addRect.bottom + TRACK_GAP
-      if (top + pickerH > vh - 8) {
-        top = vh - 8 - pickerH
-        if (top < 8) top = 8
-      }
-    }
-
-    let right = vw - addRect.right
-    const pickerRect = pickerEl.getBoundingClientRect()
-    if (pickerRect.left < 8) {
-      right = vw - ADD_PICKER_WIDTH - 8
-    }
-
-    setPickerPos({ top, right })
-  }, [showAddPicker])
-
-  /* ── 点击外部关闭添加面板 ── */
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) {
-        setShowAddPicker(false)
-      }
-    }
-    if (showAddPicker) {
-      document.addEventListener("mousedown", handleClickOutside)
-    }
-    return () => document.removeEventListener("mousedown", handleClickOutside)
-  }, [showAddPicker])
-
-  /* ── 点击外部关闭右键菜单 ── */
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
-        setContextMenu(null)
-      }
-    }
-    if (contextMenu) {
-      document.addEventListener("mousedown", handleClickOutside)
-    }
-    return () => document.removeEventListener("mousedown", handleClickOutside)
-  }, [contextMenu])
-
-  /* ── 确认添加片段 ── */
-  const handleConfirmAdd = useCallback(() => {
-    onAddClip(addType, addDuration)
-    setShowAddPicker(false)
-  }, [onAddClip, addType, addDuration])
-
-  /* ── 右键菜单操作 ── */
-  const handleContextMenu = useCallback((e: React.MouseEvent, clipId: string) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setContextMenu({ x: e.clientX, y: e.clientY, clipId })
-  }, [])
-
-  const handleContextSplit = useCallback(() => {
-    if (!contextMenu) return
-    onClipSplit?.(contextMenu.clipId, 0.5)
-    setContextMenu(null)
-  }, [contextMenu, onClipSplit])
-
-  const handleContextResetTrim = useCallback(() => {
-    if (!contextMenu) return
-    onClipResetTrim?.(contextMenu.clipId)
-    setContextMenu(null)
-  }, [contextMenu, onClipResetTrim])
-
-  const handleContextDelete = useCallback(() => {
-    if (!contextMenu) return
-    onClipRemove?.(contextMenu.clipId)
-    setContextMenu(null)
-  }, [contextMenu, onClipRemove])
-
-  return {
-    // 右键菜单
-    contextMenu,
-    contextMenuRef,
-    handleContextMenu,
-    handleContextSplit,
-    handleContextResetTrim,
-    handleContextDelete,
-    // 添加面板
-    showAddPicker,
-    pickerRef,
-    addCardRef,
-    pickerPos,
-    availableTypes,
-    addType,
-    addDuration,
-    setAddType,
-    setAddDuration,
-    handleTogglePicker,
-    handleConfirmAdd,
-    // 悬停状态
-    hoveredClipId,
-    setHoveredClipId,
-  }
-}

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

@@ -1,118 +0,0 @@
-import { useState, useCallback, useEffect } from "react"
-import type { ClipData, TrimConfig } from "../types"
-
-interface TrimDragState {
-  clipId: string
-  direction: "left" | "right"
-  startX: number
-  originalTrim: TrimConfig
-  originalDuration: number
-}
-
-interface TrimPreviewState {
-  clipId: string
-  startTime: number
-  endTime: number
-  duration: number
-  x: number
-  y: number
-}
-
-const MIN_TRIM_DURATION = 1
-
-/**
- * 裁剪拖拽 Hook
- * 拖拽片段两端手柄调整入点/出点，实时显示预览
- */
-export const useTrimDrag = (
-  clips: ClipData[],
-  pps: number,
-  onClipTrim?: (clipId: string, trimConfig: TrimConfig, newDuration: number) => void,
-) => {
-  const [trimDrag, setTrimDrag] = useState<TrimDragState | null>(null)
-  const [trimPreview, setTrimPreview] = useState<TrimPreviewState | null>(null)
-
-  const handleTrimHandleMouseDown = useCallback(
-    (e: React.MouseEvent, clipId: string, direction: "left" | "right") => {
-      e.preventDefault()
-      e.stopPropagation()
-      const clip = clips.find((c) => c.id === clipId)
-      if (!clip) return
-
-      const trim: TrimConfig = clip.trim_config ?? {
-        start_time: 0,
-        end_time: clip.duration,
-        original_duration: clip.duration,
-      }
-
-      setTrimDrag({
-        clipId,
-        direction,
-        startX: e.clientX,
-        originalTrim: { ...trim },
-        originalDuration: clip.duration,
-      })
-    },
-    [clips],
-  )
-
-  /* ── 裁剪拖拽全局 mousemove/mouseup ── */
-  useEffect(() => {
-    if (!trimDrag) return
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const dx = e.clientX - trimDrag.startX
-      const dtSec = dx / pps
-      const clip = clips.find((c) => c.id === trimDrag.clipId)
-      if (!clip) return
-
-      const origTrim = trimDrag.originalTrim
-      const origDur = origTrim.original_duration ?? trimDrag.originalDuration
-      let newStart = origTrim.start_time
-      let newEnd = origTrim.end_time
-
-      if (trimDrag.direction === "left") {
-        newStart = Math.max(0, Math.min(origTrim.start_time + dtSec, newEnd - MIN_TRIM_DURATION))
-      } else {
-        newEnd = Math.max(origTrim.start_time + MIN_TRIM_DURATION, Math.min(origTrim.end_time + dtSec, origDur))
-      }
-
-      const newDuration = Math.round((newEnd - newStart) * 10) / 10
-
-      setTrimPreview({
-        clipId: trimDrag.clipId,
-        startTime: Math.round(newStart * 10) / 10,
-        endTime: Math.round(newEnd * 10) / 10,
-        duration: newDuration,
-        x: e.clientX,
-        y: e.clientY,
-      })
-    }
-
-    const handleMouseUp = () => {
-      if (trimPreview && trimPreview.clipId === trimDrag.clipId && onClipTrim) {
-        const newTrim: TrimConfig = {
-          start_time: trimPreview.startTime,
-          end_time: trimPreview.endTime,
-          original_duration: trimDrag.originalTrim.original_duration ?? trimDrag.originalDuration,
-        }
-        onClipTrim(trimDrag.clipId, newTrim, trimPreview.duration)
-      }
-      setTrimDrag(null)
-      setTrimPreview(null)
-    }
-
-    document.addEventListener("mousemove", handleMouseMove)
-    document.addEventListener("mouseup", handleMouseUp)
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove)
-      document.removeEventListener("mouseup", handleMouseUp)
-    }
-  }, [trimDrag, trimPreview, clips, pps, onClipTrim])
-
-  return {
-    trimDrag,
-    trimPreview,
-    handleTrimHandleMouseDown,
-  }
-}

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

@@ -1,41 +0,0 @@
-import type { EditingTemplate } from "@/api/editing-planner"
-import type { ClipData } from "../types"
-
-/**
- * 计算所有片段的总时长
- */
-export function calculateTotalDuration(clips: ClipData[]): number {
-  return clips.reduce((sum, c) => sum + c.duration, 0)
-}
-
-/**
- * 获取当前选中的模板
- */
-export function getCurrentTemplate(
-  templates: EditingTemplate[],
-  loadedTemplateId: string | null,
-): EditingTemplate | undefined {
-  return templates.find((t) => t.id === loadedTemplateId)
-}
-
-/**
- * 根据分类和搜索词筛选模板
- */
-export function getFilteredTemplates(
-  templates: EditingTemplate[],
-  currentFilter: string,
-  searchQuery: string,
-): EditingTemplate[] {
-  return templates.filter((t) => {
-    if (currentFilter !== "全部" && t.category !== currentFilter) return false
-    if (searchQuery && !t.name.toLowerCase().includes(searchQuery.toLowerCase())) return false
-    return true
-  })
-}
-
-/**
- * 获取当前选中的片段
- */
-export function getSelectedClip(clips: ClipData[], selectedClipId: string | null): ClipData | null {
-  return clips.find((c) => c.id === selectedClipId) || null
-}

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

@@ -1,20 +0,0 @@
-/** 格式化时间为 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/generate/components/Step1TemplateSelect.tsx

@@ -1,86 +0,0 @@
-/**
- * Step 1 模板选择组件
- */
-import React from "react"
-import type { EditingTemplate } from "@/api/editing-planner"
-import { MODE_GRADIENTS } from "../constants"
-import { useStep1Template } from "../hooks/useStep1Template"
-
-interface Step1TemplateSelectProps {
-  templates: EditingTemplate[]
-  selectedTemplate: string
-  onSelectTemplate: (id: string) => void
-}
-
-const Step1TemplateSelect: React.FC<Step1TemplateSelectProps> = (props) => {
-  const { templates, selectedTemplate, handleSelect, handleKeySelect } = useStep1Template(props)
-
-  return (
-    <div className="xx-form-section">
-      <h3>🎨 选择模板</h3>
-      {templates.length === 0 ? (
-        <div className="xx-empty-state">
-          <p>暂无可用模板</p>
-          <p style={{ fontSize: 13, color: "var(--text-tertiary)" }}>
-            请先在「模板编辑器」中创建模板
-          </p>
-        </div>
-      ) : (
-        <div className="xx-choice-list">
-          {templates.map((tpl) => (
-            <div
-              key={tpl.id}
-              className={`xx-choice-item ${selectedTemplate === tpl.id ? "selected" : ""}`}
-              onClick={() => handleSelect(tpl.id)}
-              role="button"
-              tabIndex={0}
-              aria-pressed={selectedTemplate === tpl.id}
-              onKeyDown={(e) => handleKeySelect(e, tpl.id)}
-            >
-              <span className="xx-choice-check">✓</span>
-              <div
-                className="xx-choice-thumb"
-                style={{
-                  background: MODE_GRADIENTS[tpl.mode] || MODE_GRADIENTS.pip,
-                }}
-              >
-                🎬
-              </div>
-              <h4>{tpl.name}</h4>
-              <p>
-                {tpl.estimated_duration}s · {tpl.segments.length}片段
-              </p>
-              {tpl.tags.length > 0 && (
-                <div
-                  style={{
-                    display: "flex",
-                    gap: 4,
-                    flexWrap: "wrap",
-                    marginTop: 4,
-                  }}
-                >
-                  {tpl.tags.map((tag) => (
-                    <span
-                      key={tag}
-                      style={{
-                        fontSize: 11,
-                        padding: "1px 6px",
-                        borderRadius: 6,
-                        background: "var(--bg-secondary)",
-                        color: "var(--text-secondary)",
-                      }}
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default Step1TemplateSelect

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

@@ -1,95 +0,0 @@
-/**
- * Step 2 素材选择组件
- */
-import React from "react"
-import { useStep2Materials } from "../hooks/useStep2Materials"
-import MaterialModeTabs from "./material/MaterialModeTabs"
-import ManualMaterialList from "./material/ManualMaterialList"
-import SmartMatchInput from "./material/SmartMatchInput"
-import SmartMatchResults from "./material/SmartMatchResults"
-
-interface Step2MaterialSelectProps {
-  materialMode: "manual" | "auto"
-  onMaterialModeChange: (mode: "manual" | "auto") => void
-  selectedMaterials: string[]
-  onSelectedMaterialsChange: (ids: string[]) => void
-  smartSelectedIds: string[]
-  onSmartSelectedIdsChange: (ids: string[]) => void
-}
-
-const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
-  const m = useStep2Materials(props)
-
-  return (
-    <div className="xx-form-section">
-      <h3>📦 选择素材</h3>
-
-      <MaterialModeTabs mode={m.materialMode} onModeChange={m.onMaterialModeChange} />
-
-      <div className="xx-form-field" style={{ marginTop: 12 }}>
-        <label>选择视频库</label>
-        <select
-          value={m.selectedLibraryId}
-          onChange={(e) => m.setSelectedLibraryId(e.target.value)}
-        >
-          {m.libraries.map((lib) => (
-            <option key={lib.id} value={lib.id}>
-              {lib.name}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      {m.materialMode === "manual" && (
-        <>
-          <div
-            style={{
-              marginTop: 14,
-              display: "flex",
-              alignItems: "center",
-              gap: 10,
-            }}
-          >
-            <span className="xx-pill xx-pill-ok">已选 {m.selectedMaterials.length} 个素材</span>
-          </div>
-
-          <ManualMaterialList
-            materials={m.materials}
-            materialsLoading={m.materialsLoading}
-            selectedMaterials={m.selectedMaterials}
-            onToggle={m.handleToggleMaterial}
-          />
-        </>
-      )}
-
-      {m.materialMode === "auto" && (
-        <div className="xx-smart-match-section">
-          <SmartMatchInput
-            inputValue={m.smartMatchInput}
-            onInputChange={m.setSmartMatchInput}
-            matching={m.smartMatching}
-            onMatch={m.handleSmartMatch}
-            hasMatched={m.hasMatched}
-            onRefresh={m.handleRefreshMatch}
-            materialsCount={m.materials.items.length}
-            loading={m.materialsLoading}
-          />
-
-          <SmartMatchResults
-            results={m.smartMatchedResults}
-            selectedIds={m.smartSelectedIds}
-            matching={m.smartMatching}
-            hasMatched={m.hasMatched}
-            onToggle={m.handleToggleSmartSelect}
-            onSelectAll={m.handleSelectAllMatched}
-            onClear={m.handleClearSmartSelect}
-            formatDuration={m.formatDuration}
-            selectedTotalDuration={m.smartSelectedTotalDuration}
-          />
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default Step2MaterialSelect

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

@@ -1,57 +0,0 @@
-/**
- * Step 3 生成预览组件
- */
-import React from "react"
-import { CheckCircleFilled } from "@ant-design/icons"
-import type { EditingTemplate } from "@/api/editing-planner"
-import { useStep3Preview } from "../hooks/useStep3Preview"
-
-interface Step3GeneratePreviewProps {
-  templates: EditingTemplate[]
-  selectedTemplate: string
-  materialMode: "manual" | "auto"
-  selectedMaterials: string[]
-  smartSelectedIds: string[]
-  duration: number
-  videoRatio: string
-}
-
-const Step3GeneratePreview: React.FC<Step3GeneratePreviewProps> = (props) => {
-  const { templateName, materialCount, duration, videoRatio } = useStep3Preview(props)
-
-  return (
-    <div className="xx-form-section">
-      <h3>🎬 生成预览</h3>
-      <div className="xx-preview-tip">
-        <CheckCircleFilled style={{ color: "#52c41a", marginRight: 8 }} />
-        <span>素材已选好，AI 将为您智能匹配剪辑方案</span>
-      </div>
-      <div className="xx-preview-plan-card">
-        <div className="xx-preview-plan-title">模板草稿预览</div>
-        <div className="xx-preview-plan-info">
-          <div className="xx-preview-plan-row">
-            <span className="xx-preview-plan-label">模板</span>
-            <span className="xx-preview-plan-value">{templateName}</span>
-          </div>
-          <div className="xx-preview-plan-row">
-            <span className="xx-preview-plan-label">素材数量</span>
-            <span className="xx-preview-plan-value">{materialCount}</span>
-          </div>
-          <div className="xx-preview-plan-row">
-            <span className="xx-preview-plan-label">预计时长</span>
-            <span className="xx-preview-plan-value">{duration} 秒</span>
-          </div>
-          <div className="xx-preview-plan-row">
-            <span className="xx-preview-plan-label">视频比例</span>
-            <span className="xx-preview-plan-value">{videoRatio}</span>
-          </div>
-        </div>
-        <div className="xx-preview-plan-hint">
-          💡 点击「下一步」进入标题设置，AI 将根据素材内容为您推荐标题
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Step3GeneratePreview

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

@@ -1,108 +0,0 @@
-/**
- * Step 4 标题设置组件
- */
-import React from "react"
-import { Select } from "antd"
-import { POSITION_OPTIONS, FONT_OPTIONS } from "../constants"
-import type { TitleSettings } from "../types"
-import { useStep4Title } from "../hooks/useStep4Title"
-import AiTitleGenerator from "./title/AiTitleGenerator"
-import TitleStylePanel from "./title/TitleStylePanel"
-
-interface Step4TitleSettingsProps {
-  titleSettings: TitleSettings
-  onTitleSettingsChange: (settings: TitleSettings) => void
-}
-
-const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
-  const t = useStep4Title(props)
-
-  return (
-    <div className="xx-form-section">
-      <h3>📝 选择标题</h3>
-
-      <AiTitleGenerator
-        inputValue={t.aiTitleInput}
-        onInputChange={t.setAiTitleInput}
-        generating={t.aiTitleGenerating}
-        onGenerate={t.handleGenerateAiTitles}
-        results={t.aiTitleResults}
-        hasGenerated={t.hasGeneratedTitles}
-        onSelect={t.handleSelectAiTitle}
-        selectedTitle={t.titleSettings.title}
-        onRefresh={t.handleRefreshAiTitles}
-      />
-
-      <div className="xx-divider">
-        <span>或手动选择</span>
-      </div>
-
-      <div className="xx-title-ai-toggle">
-        <span className="xx-toggle-label">AI 自动选择标题</span>
-        <div
-          className={`xx-switch ${t.titleSettings.aiAutoSelect ? "active" : ""}`}
-          onClick={t.toggleAiAutoSelect}
-        >
-          <div className="xx-switch-knob" />
-        </div>
-      </div>
-
-      {!t.titleSettings.aiAutoSelect && (
-        <>
-          <div className="xx-form-field">
-            <label>从标题库选择</label>
-            <Select
-              placeholder="请选择标题…"
-              allowClear
-              showSearch
-              style={{ width: "100%" }}
-              value={t.titleSettings.title || undefined}
-              onChange={(val) => t.updateTitle(val || "")}
-              options={t.userTitles.map((ut) => ({
-                label: ut.content,
-                value: ut.content,
-              }))}
-              filterOption={(input, option) =>
-                ((option?.label as string) || "").toLowerCase().includes(input.toLowerCase())
-              }
-              notFoundContent={
-                t.userTitles.length === 0 ? (
-                  <span style={{ color: "var(--text-tertiary)", fontSize: 13 }}>
-                    标题库为空，请前往「标题管理」添加
-                  </span>
-                ) : null
-              }
-            />
-          </div>
-          <div className="xx-form-field" style={{ marginTop: 14 }}>
-            <label>或手动输入</label>
-            <input
-              placeholder="输入自定义标题…"
-              value={t.titleSettings.title}
-              onChange={(e) => t.updateTitle(e.target.value)}
-              maxLength={50}
-            />
-          </div>
-
-          <TitleStylePanel
-            settings={t.titleSettings}
-            onUpdatePosition={t.updatePosition}
-            onUpdateFont={t.updateFont}
-            onUpdateSize={t.updateSize}
-            onToggleBold={t.toggleBold}
-            onToggleItalic={t.toggleItalic}
-            onToggleStroke={t.toggleStroke}
-            onToggleShadow={t.toggleShadow}
-            onApplyPreset={t.applyPreset}
-            activePreset={t.activePreset}
-            titlePresets={t.titlePresets}
-            POSITION_OPTIONS={POSITION_OPTIONS}
-            FONT_OPTIONS={FONT_OPTIONS}
-          />
-        </>
-      )}
-    </div>
-  )
-}
-
-export default Step4TitleSettings

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

@@ -1,137 +0,0 @@
-/**
- * Step 5 配音选择组件
- */
-import React from "react"
-import type { VoiceClone } from "@/api/voice-clone"
-import { useStep5Voice } from "../hooks/useStep5Voice"
-import VoiceRecommendSection from "./voice/VoiceRecommendSection"
-import VoiceChoiceCard from "./voice/VoiceChoiceCard"
-import PresetVoiceDetail from "./voice/PresetVoiceDetail"
-import CustomVoicePanel from "./voice/CustomVoicePanel"
-import SaveVoiceModal from "./voice/SaveVoiceModal"
-import CloneVoiceSection from "./voice/CloneVoiceSection"
-
-interface Step5VoiceSelectProps {
-  selectedVoice: string
-  onSelectedVoiceChange: (voiceId: string) => void
-  voiceMode: "preset" | "custom" | "clone"
-  onVoiceModeChange: (mode: "preset" | "custom" | "clone") => void
-  selectedClonedVoice: string
-  onSelectedClonedVoiceChange: (voiceId: string) => void
-  clonedVoices: VoiceClone[]
-  addClone: (voice: VoiceClone) => void
-  hasProcessing: boolean
-  cloneModalOpen: boolean
-  onCloneModalOpenChange: (open: boolean) => void
-  titleText: string
-}
-
-const Step5VoiceSelect: React.FC<Step5VoiceSelectProps> = (props) => {
-  const v = useStep5Voice(props)
-
-  return (
-    <div className="xx-form-section">
-      <h3>🎙️ 选择配音</h3>
-
-      <VoiceRecommendSection
-        presetVoices={v.presetVoices}
-        voiceRecommendLoading={v.voiceRecommendLoading}
-        voiceRecommendations={v.voiceRecommendations}
-        hasVoiceRecommend={v.hasVoiceRecommend}
-        onRecommend={v.handleVoiceRecommend}
-        onSelectVoice={v.handleSelectRecommendedVoice}
-        selectedVoiceId={v.selectedVoice}
-        voiceMode={v.voiceMode}
-        VOICE_GENDER_ICON={v.VOICE_GENDER_ICON}
-      />
-
-      <div className="xx-divider">
-        <span>全部音色</span>
-      </div>
-
-      <div className="xx-voice-choice-list" style={{ marginBottom: 16 }}>
-        {v.presetVoices.slice(0, 3).map((pv) => (
-          <VoiceChoiceCard
-            key={pv.voice_id}
-            selected={v.voiceMode === "preset" && v.selectedVoice === pv.voice_id}
-            onClick={() => v.handleSelectPresetVoice(pv.voice_id)}
-            avatar={v.VOICE_GENDER_ICON[pv.gender] ?? "✨"}
-            title={pv.name}
-            description={pv.description}
-          />
-        ))}
-        {v.presetVoicesLoading && (
-          <VoiceChoiceCard
-            selected={false}
-            onClick={() => {}}
-            avatar="⏳"
-            title="加载中…"
-            loading
-          />
-        )}
-        <VoiceChoiceCard
-          selected={v.voiceMode === "clone"}
-          onClick={v.handleSelectCloneVoice}
-          avatar="🎤"
-          title="克隆我的声音"
-          description="上传语音样本克隆"
-          avatarStyle={{ background: "linear-gradient(135deg, #10b981, #059669)" }}
-        />
-      </div>
-
-      {v.voiceMode === "preset" && (
-        <PresetVoiceDetail
-          presetVoices={v.presetVoices}
-          selectedVoice={v.selectedVoice}
-          onSelect={v.handleSelectPresetVoice}
-          playingVoice={v.playingVoice}
-          onTogglePlay={v.toggleVoicePlay}
-          presetVoicesLoading={v.presetVoicesLoading}
-        />
-      )}
-
-      {v.voiceMode === "custom" && (
-        <>
-          <CustomVoicePanel
-            customVoiceText={v.customVoiceText}
-            onTextChange={v.setCustomVoiceText}
-            synthesizePending={v.synthesizeMutation.isPending}
-            onSynthesize={v.handleSynthesizeVoice}
-            ttsError={v.ttsError}
-            customAudioUrl={v.customAudioUrl}
-            completedTtsJobId={v.completedTtsJobId}
-            onOpenSaveModal={v.handleOpenSaveModal}
-          />
-          <SaveVoiceModal
-            open={v.saveModalOpen}
-            onClose={() => v.setSaveModalOpen(false)}
-            saveName={v.saveName}
-            onNameChange={v.setSaveName}
-            saveTagIds={v.saveTagIds}
-            onTagIdsChange={v.setSaveTagIds}
-            saveNewTag={v.saveNewTag}
-            onNewTagChange={v.setSaveNewTag}
-            onAddTag={v.handleAddTagInModal}
-            allTags={v.allTags}
-            savePending={v.saveToLibraryMutation.isPending}
-            onConfirm={v.handleConfirmSave}
-          />
-        </>
-      )}
-
-      {v.voiceMode === "clone" && (
-        <CloneVoiceSection
-          clonedVoices={v.clonedVoices}
-          hasProcessing={v.hasProcessing}
-          selectedClonedVoice={v.selectedClonedVoice}
-          onSelect={v.handleSelectClonedVoice}
-          onOpenCloneModal={v.handleOpenCloneModal}
-          CLONE_STATUS_CONFIG={v.CLONE_STATUS_CONFIG}
-          formatDuration={v.formatDuration}
-        />
-      )}
-    </div>
-  )
-}
-
-export default Step5VoiceSelect

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

@@ -1,187 +0,0 @@
-/**
- * Step 6 封面设置组件
- */
-import React from "react"
-import type { CoverConfig } from "../../editing-planner/types"
-import { useStep6Cover } from "../hooks/useStep6Cover"
-
-interface Step6CoverSettingsProps {
-  coverSettings: CoverConfig
-  onCoverSettingsChange: (settings: CoverConfig) => void
-  duration: number
-}
-
-const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
-  const {
-    coverSettings,
-    formatTime,
-    toggleEnabled,
-    setMode,
-    setFrameTime,
-    handleUpload,
-    totalDuration,
-    COVER_MODE_LABELS,
-    COVER_MODE_ICONS,
-  } = useStep6Cover(props)
-
-  return (
-    <div className="xx-form-section">
-      <h3>🖼️ 选择封面</h3>
-
-      {/* 启用开关 */}
-      <div className="xx-cover-header">
-        <span className="xx-cover-header-label">启用自定义封面</span>
-        <label className="xx-switch">
-          <input
-            type="checkbox"
-            checked={coverSettings.enabled}
-            onChange={(e) => toggleEnabled(e.target.checked)}
-          />
-          <span className="xx-switch-slider" />
-        </label>
-      </div>
-
-      {coverSettings.enabled && (
-        <>
-          {/* 模式选择 */}
-          <div className="xx-section-title">封面来源</div>
-          <div className="xx-cover-mode-tabs">
-            {(["auto", "frame", "upload"] as const).map((m) => (
-              <button
-                key={m}
-                className={`xx-cover-mode-tab${coverSettings.mode === m ? " active" : ""}`}
-                onClick={() => setMode(m)}
-              >
-                <span className="xx-cover-mode-icon">{COVER_MODE_ICONS[m]}</span>
-                <span className="xx-cover-mode-label">{COVER_MODE_LABELS[m]}</span>
-              </button>
-            ))}
-          </div>
-
-          {/* 智能封面 */}
-          {coverSettings.mode === "auto" && (
-            <div className="xx-cover-auto">
-              <div className="xx-cover-auto-desc">
-                AI 将分析视频内容，自动选择最具吸引力的画面作为封面。
-              </div>
-              <div className="xx-cover-auto-badge">
-                <span style={{ fontSize: 24 }}>🤖</span>
-                <span>AI 智能选帧</span>
-              </div>
-            </div>
-          )}
-
-          {/* 抽帧选封面 */}
-          {coverSettings.mode === "frame" && (
-            <div className="xx-cover-frame">
-              <div className="xx-cover-frame-preview">
-                <div className="xx-cover-frame-placeholder">
-                  <span className="xx-cover-frame-icon">🎞️</span>
-                  <span className="xx-cover-frame-time">
-                    {formatTime(coverSettings.frame_time)}
-                  </span>
-                </div>
-              </div>
-              <div className="xx-cover-frame-slider">
-                <div className="xx-cover-frame-slider-header">
-                  <span>拖动选择封面帧</span>
-                  <span className="xx-cover-frame-value">
-                    {formatTime(coverSettings.frame_time)}
-                  </span>
-                </div>
-                <input
-                  type="range"
-                  min={0}
-                  max={Math.max(totalDuration, 1)}
-                  step={0.1}
-                  value={coverSettings.frame_time}
-                  onChange={(e) => setFrameTime(Number(e.target.value))}
-                  className="xx-cover-range"
-                />
-                <div className="xx-cover-frame-range">
-                  <span>00:00</span>
-                  <span>{formatTime(totalDuration)}</span>
-                </div>
-              </div>
-              <div className="xx-cover-frame-quick">
-                <span className="xx-cover-quick-label">快捷选帧：</span>
-                {[0, 0.25, 0.5, 0.75].map((ratio) => {
-                  const t = totalDuration * ratio
-                  return (
-                    <button
-                      key={ratio}
-                      className="xx-cover-quick-btn"
-                      onClick={() => setFrameTime(t)}
-                    >
-                      {formatTime(t)}
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-
-          {/* 上传封面 */}
-          {coverSettings.mode === "upload" && (
-            <div className="xx-cover-upload">
-              <div
-                className="xx-cover-upload-area"
-                onClick={() => {
-                  const input = document.getElementById("cover-upload-input")
-                  input?.click()
-                }}
-              >
-                {coverSettings.upload_url ? (
-                  <div className="xx-cover-upload-preview">
-                    <img src={coverSettings.upload_url} alt="封面预览" />
-                    <div className="xx-cover-upload-overlay">点击更换</div>
-                  </div>
-                ) : (
-                  <div className="xx-cover-upload-placeholder">
-                    <span style={{ fontSize: 32 }}>📤</span>
-                    <span className="xx-cover-upload-text">点击上传封面图片</span>
-                    <span className="xx-cover-upload-hint">支持 JPG / PNG，建议 16:9 比例</span>
-                  </div>
-                )}
-                <input
-                  id="cover-upload-input"
-                  type="file"
-                  accept="image/*"
-                  style={{ display: "none" }}
-                  onChange={(e) => {
-                    const file = e.target.files?.[0]
-                    if (file) {
-                      handleUpload(file)
-                    }
-                  }}
-                />
-              </div>
-            </div>
-          )}
-
-          {/* 封面预览 */}
-          <div className="xx-section-title">封面预览</div>
-          <div className="xx-cover-preview-box">
-            {coverSettings.upload_url ? (
-              <img src={coverSettings.upload_url} alt="封面预览" className="xx-cover-preview-img" />
-            ) : (
-              <div className="xx-cover-preview-placeholder">
-                <span style={{ fontSize: 28 }}>🖼️</span>
-                <span>
-                  {coverSettings.mode === "auto"
-                    ? "AI 智能选择"
-                    : coverSettings.mode === "frame"
-                      ? `帧 ${formatTime(coverSettings.frame_time)}`
-                      : "未上传封面"}
-                </span>
-              </div>
-            )}
-            <div className="xx-cover-preview-ratio">16:9</div>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}
-
-export default Step6CoverSettings

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

@@ -1,194 +0,0 @@
-/**
- * Step 7 确认生成组件
- */
-import React from "react"
-import {
-  LoadingOutlined,
-  CheckCircleFilled,
-  CloseCircleOutlined,
-  MinusOutlined,
-  PlusOutlined,
-} from "@ant-design/icons"
-import type { EditingTemplate } from "@/api/editing-planner"
-import type { GeneratedVideo } from "@/api/template-editor"
-import type { CoverConfig } from "../../editing-planner/types"
-import type { VoiceClone } from "@/api/voice-clone"
-import type { PresetVoiceItem } from "@/api/voices"
-import { useStep7Generate } from "../hooks/useStep7Generate"
-
-interface Step7ConfirmGenerateProps {
-  templates: EditingTemplate[]
-  selectedTemplate: string
-  materialMode: "manual" | "auto"
-  selectedMaterials: string[]
-  smartSelectedIds: string[]
-  title: string
-  voiceMode: "preset" | "custom" | "clone"
-  selectedVoice: string
-  selectedClonedVoice: string
-  presetVoices: PresetVoiceItem[]
-  clonedVoices: VoiceClone[]
-  coverSettings: CoverConfig
-  generateCount: number
-  onGenerateCountChange: (count: number) => void
-  generating: boolean
-  generated: boolean
-  generateError: string | null
-  progress: number
-  generatedVideos: GeneratedVideo[]
-  onRetry: () => void
-  onDismissError: () => void
-}
-
-const Step7ConfirmGenerate: React.FC<Step7ConfirmGenerateProps> = (props) => {
-  const {
-    templateName,
-    materialSummary,
-    title,
-    voiceName,
-    coverSummary,
-    generateCount,
-    handleDecrement,
-    handleIncrement,
-    generating,
-    generated,
-    generateError,
-    progress,
-    generatedVideos,
-    getGenerationPhase,
-    handleScrollToPreview,
-  } = useStep7Generate(props)
-
-  const { onRetry, onDismissError } = props
-
-  return (
-    <div className="xx-form-section">
-      <h3>✨ 确认生成</h3>
-      <div className="xx-summary-card">
-        <div className="xx-summary-row">
-          <span className="xx-summary-label">模板</span>
-          <span className="xx-summary-value">{templateName}</span>
-        </div>
-        <div className="xx-summary-row">
-          <span className="xx-summary-label">素材</span>
-          <span className="xx-summary-value">{materialSummary}</span>
-        </div>
-        <div className="xx-summary-row">
-          <span className="xx-summary-label">标题</span>
-          <span className="xx-summary-value">{title || "未选择"}</span>
-        </div>
-        <div className="xx-summary-row">
-          <span className="xx-summary-label">配音</span>
-          <span className="xx-summary-value">{voiceName}</span>
-        </div>
-        <div className="xx-summary-row">
-          <span className="xx-summary-label">封面</span>
-          <span className="xx-summary-value">{coverSummary}</span>
-        </div>
-        <div className="xx-summary-row">
-          <span className="xx-summary-label">生成数量</span>
-          <span className="xx-summary-value">
-            <div className="xx-count-stepper">
-              <button
-                className="xx-count-stepper-btn"
-                disabled={generateCount <= 1 || generating}
-                onClick={handleDecrement}
-              >
-                <MinusOutlined />
-              </button>
-              <span className="xx-count-stepper-value">{generateCount}</span>
-              <button
-                className="xx-count-stepper-btn"
-                disabled={generateCount >= 10 || generating}
-                onClick={handleIncrement}
-              >
-                <PlusOutlined />
-              </button>
-              <span className="xx-count-stepper-hint">条视频</span>
-            </div>
-          </span>
-        </div>
-      </div>
-
-      {/* 生成进度 / 结果反馈 */}
-      {(generating || generated || generateError) && (
-        <div style={{ marginTop: 16 }}>
-          {generating && (
-            <div className="xx-gen-progress-card">
-              <div className="xx-gen-progress-header">
-                <div className="xx-gen-progress-icon">
-                  <LoadingOutlined />
-                </div>
-                <div className="xx-gen-progress-info">
-                  <div className="xx-gen-progress-phase">
-                    {getGenerationPhase(progress).icon} {getGenerationPhase(progress).label}
-                  </div>
-                  <div className="xx-gen-progress-sub">预计还需 1-2 分钟，请稍候…</div>
-                </div>
-                <div className="xx-gen-progress-percent">{Math.round(progress)}%</div>
-              </div>
-              <div className="xx-gen-progress-bar">
-                <div
-                  className="xx-gen-progress-bar-fill"
-                  style={{ width: `${Math.min(Math.round(progress), 100)}%` }}
-                />
-              </div>
-              <div className="xx-gen-progress-tip">
-                💡 生成过程中可以切换到其他页面操作，完成后会自动通知
-              </div>
-            </div>
-          )}
-          {generated && !generating && (
-            <div className="xx-gen-success-card">
-              <div className="xx-gen-success-icon">
-                <CheckCircleFilled style={{ fontSize: 32, color: "#52c41a" }} />
-              </div>
-              <div className="xx-gen-success-info">
-                <div className="xx-gen-success-title">视频生成完成！</div>
-                <div className="xx-gen-success-sub">
-                  共生成 {generatedVideos.length} 条视频，可在右侧预览或前往成片库查看
-                </div>
-              </div>
-              <button
-                type="button"
-                className="xx-btn xx-btn-primary xx-btn-sm"
-                onClick={handleScrollToPreview}
-              >
-                查看结果
-              </button>
-            </div>
-          )}
-          {generateError && !generating && (
-            <div className="xx-gen-error-card">
-              <div className="xx-gen-error-icon">
-                <CloseCircleOutlined style={{ fontSize: 28, color: "#ef4444" }} />
-              </div>
-              <div className="xx-gen-error-info">
-                <div className="xx-gen-error-title">生成失败</div>
-                <div className="xx-gen-error-msg">
-                  {typeof generateError === "string"
-                    ? generateError
-                    : JSON.stringify(generateError)}
-                </div>
-              </div>
-              <div style={{ display: "flex", gap: 8 }}>
-                <button type="button" className="xx-btn xx-btn-primary xx-btn-sm" onClick={onRetry}>
-                  🔄 重试
-                </button>
-                <button
-                  type="button"
-                  className="xx-btn xx-btn-ghost xx-btn-sm"
-                  onClick={onDismissError}
-                >
-                  知道了
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default Step7ConfirmGenerate

apps/web/src/pages/generate/components/material/ManualMaterialList.tsx

@@ -1,84 +0,0 @@
-/**
- * 手动选择素材列表
- */
-import React from "react"
-import { Typography } from "antd"
-import type { AssetItem } from "@/api/assets"
-
-const { Text } = Typography
-
-interface ManualMaterialListProps {
-  materials: { items: AssetItem[]; total: number }
-  materialsLoading: boolean
-  selectedMaterials: string[]
-  onToggle: (materialId: string) => void
-}
-
-const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
-  materials,
-  materialsLoading,
-  selectedMaterials,
-  onToggle,
-}) => {
-  return (
-    <div style={{ marginTop: 14 }}>
-      {materialsLoading ? (
-        <Text style={{ color: "var(--text-secondary)", padding: "16px 0" }}>加载素材中…</Text>
-      ) : materials.items.length === 0 ? (
-        <Text style={{ color: "var(--text-secondary)", padding: "16px 0" }}>
-          暂无素材，请先在视频库中上传
-        </Text>
-      ) : (
-        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          {materials.items.map((m) => {
-            const checked = selectedMaterials.includes(m.id)
-            return (
-              <label
-                key={m.id}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 10,
-                  padding: "8px 12px",
-                  background: checked ? "var(--primary-soft, #eef2ff)" : "#f8fafc",
-                  borderRadius: 10,
-                  cursor: "pointer",
-                  border: checked
-                    ? "1px solid var(--primary-color, #4f46e5)"
-                    : "1px solid transparent",
-                  transition: "all 0.15s ease",
-                }}
-              >
-                <input
-                  type="checkbox"
-                  checked={checked}
-                  onChange={() => onToggle(m.id)}
-                  style={{ accentColor: "var(--primary-color, #4f46e5)" }}
-                />
-                <span
-                  style={{
-                    fontSize: 13,
-                    color: "var(--text-primary)",
-                    flex: 1,
-                  }}
-                >
-                  {m.name}
-                </span>
-                <span
-                  style={{
-                    fontSize: 11,
-                    color: "var(--text-tertiary, #94a3b8)",
-                  }}
-                >
-                  {m.mime_type.split("/")[1].toUpperCase()}
-                </span>
-              </label>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default ManualMaterialList

apps/web/src/pages/generate/components/material/MaterialModeTabs.tsx

@@ -1,32 +0,0 @@
-/**
- * 素材模式切换 Tab
- */
-import React from "react"
-
-interface MaterialModeTabsProps {
-  mode: "manual" | "auto"
-  onModeChange: (mode: "manual" | "auto") => void
-}
-
-const MaterialModeTabs: React.FC<MaterialModeTabsProps> = ({ mode, onModeChange }) => {
-  return (
-    <div className="xx-material-mode-tabs">
-      <button
-        className={`xx-material-mode-tab ${mode === "manual" ? "active" : ""}`}
-        onClick={() => onModeChange("manual")}
-        type="button"
-      >
-        手动选择素材
-      </button>
-      <button
-        className={`xx-material-mode-tab ${mode === "auto" ? "active" : ""}`}
-        onClick={() => onModeChange("auto")}
-        type="button"
-      >
-        选择视频库自动匹配
-      </button>
-    </div>
-  )
-}
-
-export default MaterialModeTabs

apps/web/src/pages/generate/components/material/SmartMatchCard.tsx

@@ -1,60 +0,0 @@
-/**
- * 单个智能匹配卡片
- */
-import React from "react"
-import { PlayCircleOutlined, CheckCircleFilled } from "@ant-design/icons"
-import type { AssetItem } from "@/api/assets"
-
-interface SmartMatchResultItem {
-  asset: AssetItem
-  matchScore: number
-  matchReason: string
-}
-
-interface SmartMatchCardProps {
-  result: SmartMatchResultItem
-  selected: boolean
-  onClick: () => void
-  formatDuration: (seconds: number) => string
-}
-
-const SmartMatchCard: React.FC<SmartMatchCardProps> = ({
-  result,
-  selected,
-  onClick,
-  formatDuration,
-}) => {
-  const { asset, matchScore, matchReason } = result
-  return (
-    <div className={`xx-smart-match-card ${selected ? "selected" : ""}`} onClick={onClick}>
-      {/* 缩略图 */}
-      <div className="xx-smart-match-thumb">
-        {asset.thumbnail_url ? (
-          <img src={asset.thumbnail_url} alt={asset.name} />
-        ) : (
-          <div className="xx-smart-match-thumb-placeholder">
-            <PlayCircleOutlined style={{ fontSize: 32, opacity: 0.5 }} />
-          </div>
-        )}
-        <div className="xx-smart-match-score">{matchScore}%</div>
-        {selected && (
-          <div className="xx-smart-match-check">
-            <CheckCircleFilled style={{ fontSize: 20, color: "#fff" }} />
-          </div>
-        )}
-        {asset.duration && (
-          <div className="xx-smart-match-duration">{formatDuration(asset.duration)}</div>
-        )}
-      </div>
-      {/* 信息区 */}
-      <div className="xx-smart-match-info">
-        <div className="xx-smart-match-name" title={asset.name}>
-          {asset.name}
-        </div>
-        <div className="xx-smart-match-reason">🎯 {matchReason}</div>
-      </div>
-    </div>
-  )
-}
-
-export default SmartMatchCard

apps/web/src/pages/generate/components/material/SmartMatchInput.tsx

@@ -1,80 +0,0 @@
-/**
- * 智能匹配输入区
- * textarea + 提示 + 按钮组
- */
-import React from "react"
-import { LoadingOutlined } from "@ant-design/icons"
-
-interface SmartMatchInputProps {
-  inputValue: string
-  onInputChange: (value: string) => void
-  matching: boolean
-  onMatch: () => void
-  hasMatched: boolean
-  onRefresh: () => void
-  materialsCount: number
-  loading: boolean
-}
-
-const SmartMatchInput: React.FC<SmartMatchInputProps> = ({
-  inputValue,
-  onInputChange,
-  matching,
-  onMatch,
-  hasMatched,
-  onRefresh,
-  materialsCount,
-  loading,
-}) => {
-  return (
-    <div className="xx-smart-match-input-area">
-      <label className="xx-smart-match-label">🤖 描述你想要的视频内容</label>
-      <textarea
-        className="xx-smart-match-input"
-        placeholder="例如：一个科技感十足的产品宣传视频，画面要有现代办公场景、团队协作、数据分析图表…"
-        value={inputValue}
-        onChange={(e) => onInputChange(e.target.value)}
-        rows={3}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-            onMatch()
-          }
-        }}
-      />
-      <div className="xx-smart-match-input-footer">
-        <span className="xx-smart-match-tip">
-          {loading ? "扫描视频库中…" : `当前视频库共 ${materialsCount} 个素材可供匹配`}
-        </span>
-        <div style={{ display: "flex", gap: 8 }}>
-          {hasMatched && (
-            <button
-              type="button"
-              className="xx-btn xx-btn-ghost xx-btn-sm"
-              onClick={onRefresh}
-              disabled={matching || loading}
-            >
-              🔄 换一批
-            </button>
-          )}
-          <button
-            type="button"
-            className="xx-btn xx-btn-primary xx-btn-sm"
-            onClick={onMatch}
-            disabled={matching || loading || !inputValue.trim()}
-          >
-            {matching ? (
-              <>
-                <LoadingOutlined style={{ marginRight: 6 }} />
-                匹配中…
-              </>
-            ) : (
-              "✨ 智能匹配"
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default SmartMatchInput

apps/web/src/pages/generate/components/material/SmartMatchResults.tsx

@@ -1,114 +0,0 @@
-/**
- * 智能匹配结果区（含加载/空状态/已选汇总）
- */
-import React from "react"
-import { LoadingOutlined } from "@ant-design/icons"
-import type { AssetItem } from "@/api/assets"
-import SmartMatchCard from "./SmartMatchCard"
-
-interface SmartMatchResultItem {
-  asset: AssetItem
-  matchScore: number
-  matchReason: string
-}
-
-interface SmartMatchResultsProps {
-  results: SmartMatchResultItem[]
-  selectedIds: string[]
-  matching: boolean
-  hasMatched: boolean
-  onToggle: (assetId: string) => void
-  onSelectAll: () => void
-  onClear: () => void
-  formatDuration: (seconds: number) => string
-  selectedTotalDuration: number
-}
-
-const SmartMatchResults: React.FC<SmartMatchResultsProps> = ({
-  results,
-  selectedIds,
-  matching,
-  hasMatched,
-  onToggle,
-  onSelectAll,
-  onClear,
-  formatDuration,
-  selectedTotalDuration,
-}) => {
-  // 匹配中状态
-  if (matching) {
-    return (
-      <div className="xx-smart-match-loading">
-        <LoadingOutlined
-          style={{ fontSize: 32, color: "var(--primary-color)", marginBottom: 12 }}
-        />
-        <div style={{ color: "var(--text-primary)", fontSize: 14 }}>AI 正在分析素材…</div>
-        <div style={{ color: "var(--text-tertiary)", fontSize: 12, marginTop: 4 }}>
-          正在根据描述从视频库中匹配最合适的素材
-        </div>
-      </div>
-    )
-  }
-
-  // 未匹配状态提示
-  if (!hasMatched) {
-    return (
-      <div className="xx-smart-match-empty">
-        <div style={{ fontSize: 36, marginBottom: 8 }}>💡</div>
-        <div style={{ color: "var(--text-secondary)", fontSize: 13 }}>
-          输入视频内容描述，点击「智能匹配」让 AI 帮你选素材
-        </div>
-      </div>
-    )
-  }
-
-  // 无结果
-  if (results.length === 0) return null
-
-  return (
-    <>
-      <div className="xx-smart-match-results">
-        <div className="xx-smart-match-results-header">
-          <span className="xx-smart-match-results-title">推荐素材 ({results.length}个)</span>
-          <div className="xx-smart-match-results-actions">
-            <button type="button" className="xx-link-btn" onClick={onSelectAll}>
-              全选
-            </button>
-            <span style={{ color: "var(--border-color)" }}>|</span>
-            <button type="button" className="xx-link-btn" onClick={onClear}>
-              清空
-            </button>
-          </div>
-        </div>
-        <div className="xx-smart-match-grid">
-          {results.map((result) => {
-            const isSelected = selectedIds.includes(result.asset.id)
-            return (
-              <SmartMatchCard
-                key={result.asset.id}
-                result={result}
-                selected={isSelected}
-                onClick={() => onToggle(result.asset.id)}
-                formatDuration={formatDuration}
-              />
-            )
-          })}
-        </div>
-      </div>
-
-      {/* 已选素材汇总 */}
-      {selectedIds.length > 0 && (
-        <div className="xx-smart-match-summary">
-          <div className="xx-smart-match-summary-header">
-            <span className="xx-pill xx-pill-ok">已选 {selectedIds.length} 个素材</span>
-            <span style={{ color: "var(--text-tertiary)", fontSize: 12 }}>
-              预计总时长约 {selectedTotalDuration.toFixed(0)} 秒
-            </span>
-          </div>
-        </div>
-      )}
-    </>
-  )
-}
-
-export default SmartMatchResults

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

@@ -1,35 +0,0 @@
-/**
- * 单个 AI 标题卡片
- */
-import React from "react"
-import { CheckCircleFilled } from "@ant-design/icons"
-
-interface AiTitleCardProps {
-  title: string
-  highlight: string
-  style: "catchy" | "emotional" | "informative"
-  selected: boolean
-  onClick: () => void
-}
-
-const AiTitleCard: React.FC<AiTitleCardProps> = ({
-  title,
-  highlight,
-  style,
-  selected,
-  onClick,
-}) => {
-  return (
-    <div className={`xx-ai-title-card ${selected ? "selected" : ""} ${style}`} onClick={onClick}>
-      <div className="xx-ai-title-card-text">{title}</div>
-      <div className="xx-ai-title-card-tag">{highlight}</div>
-      {selected && (
-        <div className="xx-ai-title-card-check">
-          <CheckCircleFilled style={{ color: "#fff", fontSize: 14 }} />
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default AiTitleCard

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

@@ -1,105 +0,0 @@
-/**
- * AI 智能生成标题
- * 输入框 + 生成按钮 + 结果列表 + 加载状态
- */
-import React from "react"
-import { LoadingOutlined } from "@ant-design/icons"
-import AiTitleCard from "./AiTitleCard"
-
-interface AiTitleItem {
-  title: string
-  highlight: string
-  style: "catchy" | "emotional" | "informative"
-}
-
-interface AiTitleGeneratorProps {
-  inputValue: string
-  onInputChange: (value: string) => void
-  generating: boolean
-  onGenerate: () => void
-  results: AiTitleItem[]
-  hasGenerated: boolean
-  onSelect: (title: string) => void
-  selectedTitle: string
-  onRefresh: () => void
-}
-
-const AiTitleGenerator: React.FC<AiTitleGeneratorProps> = ({
-  inputValue,
-  onInputChange,
-  generating,
-  onGenerate,
-  results,
-  hasGenerated,
-  onSelect,
-  selectedTitle,
-  onRefresh,
-}) => {
-  return (
-    <div className="xx-ai-title-section">
-      <div className="xx-ai-title-header">
-        <span className="xx-ai-title-label">✨ AI 智能生成标题</span>
-      </div>
-      <div className="xx-ai-title-input-row">
-        <input
-          className="xx-ai-title-input"
-          placeholder="输入视频内容描述或关键词，如：职场成长、副业赚钱…"
-          value={inputValue}
-          onChange={(e) => onInputChange(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") onGenerate()
-          }}
-        />
-        <button
-          type="button"
-          className="xx-btn xx-btn-primary"
-          onClick={onGenerate}
-          disabled={generating || !inputValue.trim()}
-        >
-          {generating ? (
-            <>
-              <LoadingOutlined style={{ marginRight: 6 }} />
-              生成中
-            </>
-          ) : (
-            "生成标题"
-          )}
-        </button>
-      </div>
-
-      {/* 生成结果 */}
-      {hasGenerated && !generating && results.length > 0 && (
-        <div className="xx-ai-title-results">
-          <div className="xx-ai-title-results-header">
-            <span className="xx-ai-title-results-count">为你生成 {results.length} 个标题</span>
-            <button type="button" className="xx-link-btn" onClick={onRefresh} disabled={generating}>
-              🔄 换一批
-            </button>
-          </div>
-          <div className="xx-ai-title-list">
-            {results.map((item, idx) => (
-              <AiTitleCard
-                key={idx}
-                title={item.title}
-                highlight={item.highlight}
-                style={item.style}
-                selected={selectedTitle === item.title}
-                onClick={() => onSelect(item.title)}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* 生成中 */}
-      {generating && (
-        <div className="xx-ai-title-loading">
-          <LoadingOutlined style={{ color: "var(--primary-color)", marginRight: 8 }} />
-          AI 正在为你创作标题…
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default AiTitleGenerator

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

@@ -1,41 +0,0 @@
-/**
- * 标题预设样式网格
- */
-import React from "react"
-
-interface TitlePresetItem {
-  key: string
-  label: string
-  previewStyle: React.CSSProperties
-}
-
-interface TitlePresetsGridProps {
-  presets: TitlePresetItem[]
-  activePreset: string | null
-  onApply: (presetKey: string) => void
-}
-
-const TitlePresetsGrid: React.FC<TitlePresetsGridProps> = ({ presets, activePreset, onApply }) => {
-  return (
-    <div className="xx-title-presets-grid">
-      {presets.map((p) => {
-        const isActive = activePreset === p.key
-        return (
-          <button
-            key={p.key}
-            className={`xx-title-preset-card${isActive ? " active" : ""}`}
-            onClick={() => onApply(p.key)}
-            title={p.label}
-          >
-            <span className="xx-title-preset-preview-text" style={p.previewStyle}>
-              标题
-            </span>
-            <span className="xx-title-preset-card-label">{p.label}</span>
-          </button>
-        )
-      })}
-    </div>
-  )
-}
-
-export default TitlePresetsGrid

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

@@ -1,151 +0,0 @@
-/**
- * 标题样式设置区
- * 位置/字体/字号/样式按钮/预设
- */
-import React from "react"
-import type { TitleSettings } from "../../types"
-import TitlePresetsGrid from "./TitlePresetsGrid"
-
-interface PositionOption {
-  value: string
-  label: string
-}
-
-interface TitlePresetItem {
-  key: string
-  label: string
-  previewStyle: React.CSSProperties
-}
-
-interface TitleStylePanelProps {
-  settings: TitleSettings
-  onUpdatePosition: (position: string) => void
-  onUpdateFont: (font: string) => void
-  onUpdateSize: (size: number) => void
-  onToggleBold: () => void
-  onToggleItalic: () => void
-  onToggleStroke: () => void
-  onToggleShadow: () => void
-  onApplyPreset: (presetKey: string) => void
-  activePreset: string | null
-  titlePresets: TitlePresetItem[]
-  POSITION_OPTIONS: PositionOption[]
-  FONT_OPTIONS: string[]
-}
-
-const TitleStylePanel: React.FC<TitleStylePanelProps> = ({
-  settings,
-  onUpdatePosition,
-  onUpdateFont,
-  onUpdateSize,
-  onToggleBold,
-  onToggleItalic,
-  onToggleStroke,
-  onToggleShadow,
-  onApplyPreset,
-  activePreset,
-  titlePresets,
-  POSITION_OPTIONS,
-  FONT_OPTIONS,
-}) => {
-  return (
-    <div className="xx-title-style-section">
-      <h4 className="xx-section-subtitle">标题样式</h4>
-
-      {/* 位置 + 字体 一行 */}
-      <div className="xx-title-style-row">
-        <div className="xx-form-field xx-half-field">
-          <label>位置</label>
-          <select
-            className="xx-form-select"
-            value={settings.position}
-            onChange={(e) => onUpdatePosition(e.target.value)}
-          >
-            {POSITION_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div className="xx-form-field xx-half-field">
-          <label>字体</label>
-          <select
-            className="xx-form-select"
-            value={settings.font}
-            onChange={(e) => onUpdateFont(e.target.value)}
-          >
-            {FONT_OPTIONS.map((f) => (
-              <option key={f} value={f}>
-                {f}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-
-      {/* 字号滑块 */}
-      <div className="xx-form-field">
-        <div className="xx-field-label-row">
-          <label>字号</label>
-          <span className="xx-field-value">{settings.size}px</span>
-        </div>
-        <input
-          className="xx-slider"
-          type="range"
-          min={12}
-          max={48}
-          value={settings.size}
-          onChange={(e) => onUpdateSize(Number(e.target.value))}
-        />
-      </div>
-
-      {/* 预设样式 */}
-      <div className="xx-form-field">
-        <label>预设样式</label>
-        <TitlePresetsGrid
-          presets={titlePresets}
-          activePreset={activePreset}
-          onApply={onApplyPreset}
-        />
-      </div>
-
-      {/* 样式按钮：粗体/斜体/描边/阴影 */}
-      <div className="xx-form-field">
-        <label>样式</label>
-        <div className="xx-style-btns">
-          <button
-            className={`xx-style-btn ${settings.bold ? "active" : ""}`}
-            onClick={onToggleBold}
-            title="粗体"
-          >
-            <b>B</b>
-          </button>
-          <button
-            className={`xx-style-btn ${settings.italic ? "active" : ""}`}
-            onClick={onToggleItalic}
-            title="斜体"
-          >
-            <i>I</i>
-          </button>
-          <button
-            className={`xx-style-btn ${settings.stroke ? "active" : ""}`}
-            onClick={onToggleStroke}
-            title="描边"
-          >
-            S
-          </button>
-          <button
-            className={`xx-style-btn ${settings.shadow ? "active" : ""}`}
-            onClick={onToggleShadow}
-            title="阴影"
-          >
-            ☁
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default TitleStylePanel

apps/web/src/pages/generate/components/voice/CloneVoiceSection.tsx

@@ -1,132 +0,0 @@
-/**
- * 克隆声音展开区域
- * 克隆按钮、轮询提示、已克隆列表、空状态
- */
-import React from "react"
-import { Typography } from "antd"
-import { ThunderboltOutlined, AudioOutlined, CheckCircleFilled } from "@ant-design/icons"
-import type { VoiceClone } from "@/api/voice-clone"
-
-const { Text } = Typography
-
-interface CloneVoiceSectionProps {
-  clonedVoices: VoiceClone[]
-  hasProcessing: boolean
-  selectedClonedVoice: string
-  onSelect: (voiceId: string) => void
-  onOpenCloneModal: () => void
-  CLONE_STATUS_CONFIG: Record<string, { label: string; color: string }>
-  formatDuration: (seconds: number) => string
-}
-
-const CloneVoiceSection: React.FC<CloneVoiceSectionProps> = ({
-  clonedVoices,
-  hasProcessing,
-  selectedClonedVoice,
-  onSelect,
-  onOpenCloneModal,
-  CLONE_STATUS_CONFIG,
-  formatDuration,
-}) => {
-  return (
-    <div className="xx-clone-section">
-      <p className="xx-clone-section-title">克隆我的声音</p>
-      <Text style={{ fontSize: 12, color: "var(--text-tertiary, #94a3b8)" }}>
-        上传一段您的语音样本，AI 将克隆您的声音用于视频配音
-      </Text>
-
-      <div style={{ marginTop: 12 }}>
-        <button
-          className="xx-btn xx-btn-primary"
-          style={{ height: 36, fontSize: 13 }}
-          onClick={onOpenCloneModal}
-        >
-          <ThunderboltOutlined /> 克隆新声音
-        </button>
-      </div>
-
-      {/* 轮询提示 */}
-      {hasProcessing && (
-        <div className="xx-clone-polling-hint" style={{ marginTop: 10 }}>
-          <span className="xx-clone-polling-dot" />
-          正在同步克隆进度...
-        </div>
-      )}
-
-      {/* 已克隆声音列表 */}
-      {clonedVoices.length > 0 && (
-        <div className="xx-clone-voices-list">
-          {clonedVoices.map((cv) => {
-            const statusCfg = CLONE_STATUS_CONFIG[cv.status]
-            const isReady = cv.status === "ready"
-            const selected = selectedClonedVoice === cv.id
-            return (
-              <div
-                key={cv.id}
-                className={`xx-clone-voice-row ${selected ? "selected" : ""} ${
-                  !isReady ? "disabled" : ""
-                }`}
-                onClick={() => {
-                  if (isReady) onSelect(cv.id)
-                }}
-                role="button"
-                tabIndex={isReady ? 0 : -1}
-                aria-pressed={selected}
-              >
-                <div className={`xx-clone-avatar ${cv.status}`}>
-                  <AudioOutlined />
-                </div>
-                <div className="xx-clone-info">
-                  <div className="xx-clone-name">{cv.name}</div>
-                  <div className="xx-clone-status">
-                    <span className="xx-clone-status-dot" style={{ background: statusCfg.color }} />
-                    <span style={{ color: statusCfg.color }}>{statusCfg.label}</span>
-                    {isReady && (
-                      <span
-                        style={{
-                          color: "var(--text-secondary)",
-                          marginLeft: 8,
-                        }}
-                      >
-                        {formatDuration(cv.duration_seconds)}
-                      </span>
-                    )}
-                  </div>
-                </div>
-                {selected && isReady && (
-                  <CheckCircleFilled style={{ color: "var(--primary-color, #4f46e5)" }} />
-                )}
-              </div>
-            )
-          })}
-        </div>
-      )}
-
-      {clonedVoices.length === 0 && (
-        <Text
-          style={{
-            color: "var(--text-secondary)",
-            display: "block",
-            textAlign: "center",
-            padding: "16px 0",
-          }}
-        >
-          暂无克隆音色，点击「克隆新声音」开始
-        </Text>
-      )}
-
-      <Text
-        style={{
-          fontSize: 12,
-          color: "var(--text-tertiary, #94a3b8)",
-          marginTop: 10,
-          display: "block",
-        }}
-      >
-        💡 提示：录音环境越安静，克隆效果越好。
-      </Text>
-    </div>
-  )
-}
-
-export default CloneVoiceSection

apps/web/src/pages/generate/components/voice/CustomVoicePanel.tsx

@@ -1,93 +0,0 @@
-/**
- * 自定义录制面板
- * textarea + 合成按钮 + 结果区 + 存为素材按钮
- */
-import React from "react"
-import { Typography } from "antd"
-import { AudioOutlined, SaveOutlined } from "@ant-design/icons"
-
-const { Text } = Typography
-
-interface CustomVoicePanelProps {
-  customVoiceText: string
-  onTextChange: (text: string) => void
-  synthesizePending: boolean
-  onSynthesize: () => void
-  ttsError: string | null
-  customAudioUrl: string | null
-  completedTtsJobId: string | null
-  onOpenSaveModal: () => void
-}
-
-const CustomVoicePanel: React.FC<CustomVoicePanelProps> = ({
-  customVoiceText,
-  onTextChange,
-  synthesizePending,
-  onSynthesize,
-  ttsError,
-  customAudioUrl,
-  completedTtsJobId,
-  onOpenSaveModal,
-}) => {
-  return (
-    <div>
-      <textarea
-        placeholder="输入配音文案，点击合成按钮生成语音…"
-        value={customVoiceText}
-        onChange={(e) => onTextChange(e.target.value)}
-        maxLength={500}
-        style={{
-          width: "100%",
-          minHeight: 100,
-          border: "1px solid var(--border-color, #e2e8f0)",
-          borderRadius: "var(--radius-sm, 10px)",
-          padding: 12,
-          fontSize: 14,
-          resize: "vertical",
-          outline: "none",
-        }}
-      />
-      <div style={{ marginTop: 12, display: "flex", gap: 8 }}>
-        <button
-          className="xx-btn xx-btn-ghost"
-          disabled={!customVoiceText.trim() || synthesizePending}
-          onClick={onSynthesize}
-        >
-          <AudioOutlined /> {synthesizePending ? "合成中…" : "合成语音"}
-        </button>
-      </div>
-      {ttsError && (
-        <Text
-          style={{
-            color: "var(--error, #ef4444)",
-            marginTop: 8,
-            display: "block",
-          }}
-        >
-          {ttsError}
-        </Text>
-      )}
-      {customAudioUrl && completedTtsJobId && (
-        <div
-          style={{
-            marginTop: 8,
-            display: "flex",
-            alignItems: "center",
-            gap: 12,
-          }}
-        >
-          <Text style={{ color: "var(--success, #10b981)" }}>✓ 语音合成完成</Text>
-          <button
-            className="xx-btn xx-btn-primary"
-            style={{ height: 30, padding: "0 14px", fontSize: 12 }}
-            onClick={onOpenSaveModal}
-          >
-            <SaveOutlined /> 存为素材
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default CustomVoicePanel

apps/web/src/pages/generate/components/voice/PresetVoiceDetail.tsx

@@ -1,77 +0,0 @@
-/**
- * 预设音色下拉选择 + 试听按钮
- * voiceMode === "preset" 时显示的详情区
- */
-import React from "react"
-import { PlayCircleOutlined, PauseCircleOutlined } from "@ant-design/icons"
-import type { PresetVoiceItem } from "@/api/voices"
-
-interface PresetVoiceDetailProps {
-  presetVoices: PresetVoiceItem[]
-  selectedVoice: string
-  onSelect: (voiceId: string) => void
-  playingVoice: string | null
-  onTogglePlay: (voiceId: string, previewUrl: string | null) => void
-  presetVoicesLoading: boolean
-}
-
-const PresetVoiceDetail: React.FC<PresetVoiceDetailProps> = ({
-  presetVoices,
-  selectedVoice,
-  onSelect,
-  playingVoice,
-  onTogglePlay,
-  presetVoicesLoading,
-}) => {
-  return (
-    <div>
-      <div className="xx-form-field">
-        <label>从配音库选择</label>
-        <select value={selectedVoice} onChange={(e) => onSelect(e.target.value)}>
-          <option value="">请选择配音…</option>
-          {presetVoicesLoading ? (
-            <option disabled>加载中…</option>
-          ) : (
-            presetVoices.map((v) => (
-              <option key={v.voice_id} value={v.voice_id}>
-                {v.name} — {v.description}
-              </option>
-            ))
-          )}
-        </select>
-      </div>
-      {/* 试听按钮 */}
-      {presetVoices.length > 0 && (
-        <div
-          style={{
-            display: "flex",
-            gap: 8,
-            flexWrap: "wrap",
-            marginTop: 8,
-          }}
-        >
-          {presetVoices.slice(0, 4).map((v) => (
-            <button
-              key={v.voice_id}
-              className="xx-btn xx-btn-ghost"
-              style={{ height: 32, padding: "0 12px", fontSize: 12 }}
-              onClick={() => onTogglePlay(v.voice_id, v.preview_url)}
-            >
-              {playingVoice === v.voice_id ? (
-                <>
-                  <PauseCircleOutlined /> 停止
-                </>
-              ) : (
-                <>
-                  <PlayCircleOutlined /> {v.name}
-                </>
-              )}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default PresetVoiceDetail

apps/web/src/pages/generate/components/voice/SaveVoiceModal.tsx

@@ -1,125 +0,0 @@
-/**
- * 保存到配音库弹窗
- */
-import React from "react"
-import { CloseOutlined, PlusOutlined } from "@ant-design/icons"
-import type { TagItem } from "@/api/tags"
-
-interface SaveVoiceModalProps {
-  open: boolean
-  onClose: () => void
-  saveName: string
-  onNameChange: (name: string) => void
-  saveTagIds: string[]
-  onTagIdsChange: (tags: string[] | ((prev: string[]) => string[])) => void
-  saveNewTag: string
-  onNewTagChange: (tag: string) => void
-  onAddTag: (tagName: string) => void
-  allTags: TagItem[]
-  savePending: boolean
-  onConfirm: () => void
-}
-
-const SaveVoiceModal: React.FC<SaveVoiceModalProps> = ({
-  open,
-  onClose,
-  saveName,
-  onNameChange,
-  saveTagIds,
-  onTagIdsChange,
-  saveNewTag,
-  onNewTagChange,
-  onAddTag,
-  allTags,
-  savePending,
-  onConfirm,
-}) => {
-  if (!open) return null
-
-  return (
-    <div className="xx-save-modal-overlay" onClick={onClose}>
-      <div className="xx-save-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="xx-save-modal-header">
-          <span>保存到配音库</span>
-          <button className="xx-save-modal-close" onClick={onClose}>
-            <CloseOutlined />
-          </button>
-        </div>
-        <div className="xx-save-modal-body">
-          <label className="xx-save-modal-label">素材名称</label>
-          <input
-            className="xx-save-modal-input"
-            placeholder="留空则自动生成名称"
-            value={saveName}
-            onChange={(e) => onNameChange(e.target.value)}
-            maxLength={50}
-          />
-          <label className="xx-save-modal-label">
-            标签
-            <span
-              style={{
-                fontWeight: 400,
-                color: "var(--text-tertiary, #94a3b8)",
-              }}
-            >
-              （可选）
-            </span>
-          </label>
-          <div className="xx-save-modal-tags">
-            {saveTagIds.map((id) => {
-              const tag = allTags.find((t) => t.id === id)
-              return tag ? (
-                <span key={id} className="xx-save-modal-tag active">
-                  {tag.name}
-                  <CloseOutlined
-                    className="xx-save-modal-tag-remove"
-                    onClick={() => onTagIdsChange((prev: string[]) => prev.filter((x) => x !== id))}
-                  />
-                </span>
-              ) : null
-            })}
-            <input
-              className="xx-save-modal-tag-input"
-              placeholder="输入标签名回车添加"
-              value={saveNewTag}
-              onChange={(e) => onNewTagChange(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault()
-                  onAddTag(saveNewTag)
-                }
-              }}
-            />
-          </div>
-          {allTags.length > 0 && (
-            <div className="xx-save-modal-tag-presets">
-              {allTags
-                .filter((t) => !saveTagIds.includes(t.id))
-                .slice(0, 12)
-                .map((t) => (
-                  <button
-                    key={t.id}
-                    className="xx-save-modal-tag-preset"
-                    onClick={() => onTagIdsChange((prev: string[]) => [...prev, t.id])}
-                  >
-                    {t.name}
-                    <PlusOutlined style={{ fontSize: 10, marginLeft: 4 }} />
-                  </button>
-                ))}
-            </div>
-          )}
-        </div>
-        <div className="xx-save-modal-footer">
-          <button className="xx-btn xx-btn-ghost" onClick={onClose}>
-            取消
-          </button>
-          <button className="xx-btn xx-btn-primary" disabled={savePending} onClick={onConfirm}>
-            {savePending ? "保存中…" : "保存"}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default SaveVoiceModal

apps/web/src/pages/generate/components/voice/VoiceChoiceCard.tsx

@@ -1,53 +0,0 @@
-/**
- * 音色选择卡片
- * 用于顶部预设音色卡片和克隆入口卡片
- */
-import React from "react"
-
-interface VoiceChoiceCardProps {
-  selected: boolean
-  onClick: () => void
-  avatar: React.ReactNode
-  title: string
-  description?: string
-  avatarStyle?: React.CSSProperties
-  loading?: boolean
-}
-
-const VoiceChoiceCard: React.FC<VoiceChoiceCardProps> = ({
-  selected,
-  onClick,
-  avatar,
-  title,
-  description,
-  avatarStyle,
-  loading = false,
-}) => {
-  return (
-    <div
-      className={`xx-voice-choice-item ${selected ? "selected" : ""}`}
-      onClick={onClick}
-      role="button"
-      tabIndex={0}
-      aria-pressed={selected}
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault()
-          onClick()
-        }
-      }}
-      style={loading ? { opacity: 0.5 } : undefined}
-    >
-      <span className="xx-voice-choice-check">✓</span>
-      <div className="xx-voice-choice-avatar" style={avatarStyle}>
-        {avatar}
-      </div>
-      <div className="xx-voice-choice-info">
-        <h4>{title}</h4>
-        {description && <p>{description}</p>}
-      </div>
-    </div>
-  )
-}
-
-export default VoiceChoiceCard

apps/web/src/pages/generate/components/voice/VoiceRecommendSection.tsx

@@ -1,100 +0,0 @@
-/**
- * AI 智能推荐配音区域
- */
-import React from "react"
-import { LoadingOutlined, CheckCircleFilled } from "@ant-design/icons"
-import type { PresetVoiceItem } from "@/api/voices"
-
-interface VoiceRecommendSectionProps {
-  presetVoices: PresetVoiceItem[]
-  voiceRecommendLoading: boolean
-  voiceRecommendations: string[]
-  hasVoiceRecommend: boolean
-  onRecommend: () => void
-  onSelectVoice: (voiceId: string) => void
-  selectedVoiceId: string
-  voiceMode: "preset" | "custom" | "clone"
-  VOICE_GENDER_ICON: Record<string, string>
-}
-
-const VoiceRecommendSection: React.FC<VoiceRecommendSectionProps> = ({
-  presetVoices,
-  voiceRecommendLoading,
-  voiceRecommendations,
-  hasVoiceRecommend,
-  onRecommend,
-  onSelectVoice,
-  selectedVoiceId,
-  voiceMode,
-  VOICE_GENDER_ICON,
-}) => {
-  return (
-    <div className="xx-voice-recommend-section">
-      <div className="xx-voice-recommend-header">
-        <span className="xx-voice-recommend-label">✨ AI 智能推荐</span>
-        <button
-          type="button"
-          className="xx-btn xx-btn-primary xx-btn-sm"
-          onClick={onRecommend}
-          disabled={voiceRecommendLoading}
-        >
-          {voiceRecommendLoading ? (
-            <>
-              <LoadingOutlined style={{ marginRight: 6 }} />
-              推荐中
-            </>
-          ) : hasVoiceRecommend ? (
-            "换一批"
-          ) : (
-            "智能推荐"
-          )}
-        </button>
-      </div>
-
-      {voiceRecommendLoading && (
-        <div className="xx-voice-recommend-loading">
-          <LoadingOutlined style={{ color: "var(--primary-color)", marginRight: 8 }} />
-          根据视频内容为你匹配最合适的音色…
-        </div>
-      )}
-
-      {!voiceRecommendLoading && hasVoiceRecommend && voiceRecommendations.length > 0 && (
-        <div className="xx-voice-recommend-list">
-          {voiceRecommendations.map((voiceId) => {
-            const v = presetVoices.find((pv) => pv.voice_id === voiceId)
-            if (!v) return null
-            const isSelected = voiceMode === "preset" && selectedVoiceId === v.voice_id
-            return (
-              <div
-                key={v.voice_id}
-                className={`xx-voice-recommend-card ${isSelected ? "selected" : ""}`}
-                onClick={() => onSelectVoice(v.voice_id)}
-              >
-                <div className="xx-voice-recommend-avatar">
-                  {VOICE_GENDER_ICON[v.gender] ?? "✨"}
-                </div>
-                <div className="xx-voice-recommend-info">
-                  <div className="xx-voice-recommend-name">{v.name}</div>
-                  <div className="xx-voice-recommend-desc">{v.description}</div>
-                </div>
-                {isSelected && (
-                  <div className="xx-voice-recommend-check">
-                    <CheckCircleFilled style={{ color: "#fff", fontSize: 16 }} />
-                  </div>
-                )}
-              </div>
-            )
-          })}
-        </div>
-      )}
-
-      {!voiceRecommendLoading && !hasVoiceRecommend && (
-        <div className="xx-voice-recommend-empty">
-          <span>点击「智能推荐」，AI 根据视频内容匹配音色</span>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default VoiceRecommendSection

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

@@ -1,370 +0,0 @@
-/**
- * 视频生成 Hook
- * 封装视频生成的核心逻辑、状态管理、轮询等
- */
-import { useState, useRef, useCallback } from "react"
-import { message } from "antd"
-import type { GeneratedVideo, EditPlanConfig } from "@/api/template-editor"
-import {
-  generateEditPlan,
-  updateEditPlan,
-  getGenerationTaskResults,
-  getGenerationStatus,
-  getEditPlan,
-} from "@/api/template-editor"
-import type { CoverConfig } from "../../editing-planner/types"
-import type { TitleSettings } from "../types"
-
-interface UseGenerateVideoProps {
-  titleSettings: TitleSettings
-  selectedTemplate: string
-  selectedMaterials: string[]
-  materialMode: "manual" | "auto"
-  smartSelectedIds: string[]
-  voiceMode: "preset" | "custom" | "clone"
-  selectedVoice: string
-  selectedClonedVoice: string
-  coverSettings: CoverConfig
-  videoRatio: string
-  style: string
-  duration: number
-  autoSubtitles: boolean
-  bgm: boolean
-  generateCount: number
-}
-
-export function useGenerateVideo({
-  titleSettings,
-  selectedTemplate,
-  selectedMaterials,
-  materialMode,
-  smartSelectedIds,
-  voiceMode,
-  selectedVoice,
-  selectedClonedVoice,
-  coverSettings,
-  videoRatio,
-  style,
-  duration,
-  autoSubtitles,
-  bgm,
-  generateCount,
-}: UseGenerateVideoProps) {
-  /* ── 生成状态 ── */
-  const [generating, setGenerating] = useState(false)
-  const [progress, setProgress] = useState(0)
-  const [generated, setGenerated] = useState(false)
-  const [generateError, setGenerateError] = useState<string | null>(null)
-  const [generatedVideos, setGeneratedVideos] = useState<GeneratedVideo[]>([])
-
-  const progressTimer = useRef<ReturnType<typeof setInterval>>(undefined)
-
-  /* ── 生成阶段映射 ── */
-  const getGenerationPhase = (p: number) => {
-    if (p < 20) return { label: "分析素材与配置", icon: "🔍" }
-    if (p < 50) return { label: "智能剪辑合成", icon: "🎬" }
-    if (p < 80) return { label: "渲染视频中", icon: "⚡" }
-    return { label: "即将完成", icon: "✨" }
-  }
-
-  /* ── 生成视频 ── */
-  const generate = useCallback(async () => {
-    console.log("[handleGenerate] 开始生成, 参数:", {
-      titleSettings,
-      selectedTemplate,
-      selectedMaterials,
-      voiceMode,
-    })
-    if (!titleSettings.title.trim()) {
-      message.warning("请先选择或输入标题")
-      return
-    }
-    if (materialMode === "manual" && selectedMaterials.length === 0) {
-      message.warning("请至少选择一个素材")
-      return
-    }
-
-    if (voiceMode === "clone" && !selectedClonedVoice) {
-      message.warning("请先选择一个克隆音色")
-      return
-    }
-
-    setGenerating(true)
-    setProgress(0)
-    setGenerated(false)
-    setGenerateError(null)
-
-    try {
-      const voiceConfig: Pick<
-        EditPlanConfig,
-        "voice_id" | "voice_clone_profile_id" | "custom_audio_url" | "custom_text"
-      > = {}
-      if (voiceMode === "preset") {
-        voiceConfig.voice_id = selectedVoice || undefined
-      } else if (voiceMode === "clone") {
-        voiceConfig.voice_clone_profile_id = selectedClonedVoice || undefined
-      } else if (voiceMode === "custom") {
-        voiceConfig.voice_id = selectedVoice || undefined
-        // 注意：customAudioUrl / customVoiceText 在 step5 hook 中，
-        // 自定义配音模式需从 step5 组件传回
-      }
-
-      // 获取或创建草稿
-      await getEditPlan(selectedTemplate)
-
-      // 更新草稿内容 + 切换到 editing 状态
-      await updateEditPlan(selectedTemplate, {
-        name: titleSettings.title.trim(),
-        config: {
-          asset_ids: materialMode === "auto" ? smartSelectedIds : selectedMaterials,
-          title_config: {
-            ai_auto_select: titleSettings.aiAutoSelect,
-            content: titleSettings.title,
-            position: titleSettings.position,
-            font_preset: titleSettings.font,
-            font_color: titleSettings.color,
-            font_size: titleSettings.size,
-          },
-          cover_config: coverSettings,
-          ...voiceConfig,
-          ratio: videoRatio,
-          style,
-          duration,
-          auto_subtitles: autoSubtitles,
-          bgm,
-          generate_count: generateCount,
-          material_mode: materialMode,
-        },
-        total_duration: duration,
-        status: "editing",
-      })
-
-      await generateEditPlan(selectedTemplate)
-
-      const poll = async () => {
-        try {
-          const data = await getGenerationStatus(selectedTemplate)
-
-          if (data.plan_status === "completed") {
-            setProgress(100)
-            setGenerating(false)
-            setGenerated(true)
-
-            // 获取生成的视频结果
-            if (data.generation_task_id) {
-              try {
-                const videos = await getGenerationTaskResults(data.generation_task_id)
-                setGeneratedVideos(videos)
-              } catch (err) {
-                console.error("[获取生成结果失败]", err)
-              }
-            }
-
-            message.success("视频生成完成！")
-            return
-          }
-          if (data.plan_status === "failed") {
-            setGenerating(false)
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- 防御性错误提取
-            const dataAny = data as Record<string, any>
-            const rawMsg =
-              dataAny.error_message ||
-              dataAny.error ||
-              dataAny.message ||
-              (data.clips || []).find((c: { status: string }) => c.status === "failed")
-                ?.error_message ||
-              "视频生成失败，请联系管理员或重试"
-            const safeExtract = (val: unknown): string => {
-              if (typeof val === "string") return val
-              if (typeof val === "object" && val !== null) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- 防御性错误提取
-                const obj = val as Record<string, any>
-                if (typeof obj.message === "string") return obj.message
-                if (typeof obj.msg === "string") return obj.msg
-                if (typeof obj.detail === "string") return obj.detail
-                if (obj.message && typeof obj.message === "object") return safeExtract(obj.message)
-                return JSON.stringify(val)
-              }
-              return String(val ?? "")
-            }
-            const errorMsg = safeExtract(rawMsg)
-            console.error("[生成失败] templateId:", selectedTemplate, "响应:", data)
-            setGenerateError(errorMsg)
-            message.error(errorMsg)
-            return
-          }
-
-          const clips = data.clips || []
-          const total = clips.length || 1
-          const done = clips.filter((c: { status: string }) => c.status === "completed").length
-          setProgress(Math.round((done / total) * 100))
-
-          progressTimer.current = setTimeout(poll, 2000) as unknown as ReturnType<
-            typeof setInterval
-          >
-        } catch (pollErr) {
-          console.error("[轮询出错] templateId:", selectedTemplate, pollErr)
-          progressTimer.current = setTimeout(poll, 3000) as unknown as ReturnType<
-            typeof setInterval
-          >
-        }
-      }
-
-      progressTimer.current = setTimeout(poll, 2000) as unknown as ReturnType<typeof setInterval>
-    } catch (err: unknown) {
-      console.error("[handleGenerate] 生成失败:", err)
-      setGenerating(false)
-      const axiosErr = err as {
-        response?: {
-          data?: {
-            message?: string | object
-            error?: string | object
-            detail?: string | object
-            msg?: string | object
-          }
-        }
-        message?: string
-      }
-      const extractString = (val: unknown): string => {
-        if (typeof val === "string") return val
-        if (typeof val === "object" && val !== null) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- 防御性错误提取
-          const obj = val as Record<string, any>
-          if (typeof obj.message === "string") return obj.message
-          if (typeof obj.msg === "string") return obj.msg
-          if (typeof obj.detail === "string") return obj.detail
-          if (typeof obj.message === "object" && obj.message !== null)
-            return extractString(obj.message)
-          if (typeof obj.msg === "object" && obj.msg !== null) return extractString(obj.msg)
-          return JSON.stringify(val)
-        }
-        return ""
-      }
-      const backendMsg =
-        extractString(axiosErr.response?.data?.message) ||
-        extractString(axiosErr.response?.data?.error) ||
-        extractString(axiosErr.response?.data?.detail) ||
-        extractString(axiosErr.response?.data?.msg) ||
-        axiosErr.message ||
-        ""
-      console.error("[handleGenerate] 错误信息:", backendMsg, "完整错误:", axiosErr)
-      const safeExtractErr = (val: unknown): string => {
-        if (typeof val === "string") return val
-        if (typeof val === "object" && val !== null) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- 防御性错误提取
-          const obj = val as Record<string, any>
-          if (typeof obj.message === "string") return obj.message
-          if (typeof obj.msg === "string") return obj.msg
-          if (typeof obj.detail === "string") return obj.detail
-          if (typeof obj.message === "object") return safeExtractErr(obj.message)
-          return JSON.stringify(val)
-        }
-        return String(val ?? "")
-      }
-      const rawError = safeExtractErr(backendMsg)
-      const translateError = (msg: string): string => {
-        if (!msg) return "生成失败，请检查网络后重试或联系管理员"
-        if (msg.includes("editing") || msg.includes("draft") || msg.includes("状态")) {
-          return "正在准备生成，请稍候再试"
-        }
-        if (msg.includes("template_id") || msg.includes("not found") || msg.includes("不存在")) {
-          return "所选模板或素材不可用，请重新选择"
-        }
-        if (msg.includes("asset") && (msg.includes("not found") || msg.includes("missing"))) {
-          return "素材数据异常，请返回视频库重新检查"
-        }
-        if (msg.includes("timeout") || msg.includes("network") || msg.includes("ECONN")) {
-          return "网络连接超时，请检查网络后重试"
-        }
-        if (msg.includes("quota") || msg.includes("limit") || msg.includes("exceed")) {
-          return "已达到生成次数上限，请稍后再试或联系客服"
-        }
-        if (msg.length > 0 && msg.length < 100 && !msg.includes("{")) return msg
-        return "生成失败，请稍后重试或联系管理员"
-      }
-      const finalMsg = translateError(rawError)
-      setGenerateError(finalMsg)
-      message.error(finalMsg)
-    }
-  }, [
-    titleSettings,
-    selectedMaterials,
-    selectedVoice,
-    voiceMode,
-    selectedClonedVoice,
-    videoRatio,
-    style,
-    duration,
-    autoSubtitles,
-    bgm,
-    selectedTemplate,
-    generateCount,
-    materialMode,
-    coverSettings,
-    smartSelectedIds,
-  ])
-
-  /* 重新生成（失败后重试） */
-  const retry = useCallback(() => {
-    setGenerateError(null)
-    generate()
-  }, [generate])
-
-  /* 清除错误 */
-  const dismissError = useCallback(() => {
-    setGenerateError(null)
-  }, [])
-
-  /* ── 下载视频 ── */
-  const download = useCallback(async () => {
-    if (!generatedVideos.length) return
-    const video = generatedVideos[0]
-    try {
-      const url = video.download_url || video.file_url
-      if (url) {
-        const a = document.createElement("a")
-        a.href = url
-        a.download = video.name || "generated-video.mp4"
-        a.target = "_blank"
-        document.body.appendChild(a)
-        a.click()
-        document.body.removeChild(a)
-      }
-    } catch (err) {
-      console.error("[下载失败]", err)
-      message.error("下载失败，请重试")
-    }
-  }, [generatedVideos])
-
-  /* ── 分享视频 ── */
-  const share = useCallback(async () => {
-    if (!generatedVideos.length) return
-    const video = generatedVideos[0]
-    const shareUrl = video.file_url || window.location.href
-    try {
-      await navigator.clipboard.writeText(shareUrl)
-      message.success("视频链接已复制到剪贴板")
-    } catch {
-      message.info(`视频链接: ${shareUrl}`)
-    }
-  }, [generatedVideos])
-
-  return {
-    // 状态
-    generating,
-    progress,
-    generated,
-    generateError,
-    generatedVideos,
-    // 操作
-    generate,
-    retry,
-    dismissError,
-    download,
-    share,
-    // 工具
-    getGenerationPhase,
-  }
-}
-
-export default useGenerateVideo

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

@@ -1,44 +0,0 @@
-/**
- * Step 1 模板选择 Hook
- * 封装模板选择的交互逻辑
- */
-import { useCallback } from "react"
-import type { EditingTemplate } from "@/api/editing-planner"
-
-interface UseStep1TemplateProps {
-  templates: EditingTemplate[]
-  selectedTemplate: string
-  onSelectTemplate: (id: string) => void
-}
-
-export function useStep1Template({
-  templates,
-  selectedTemplate,
-  onSelectTemplate,
-}: UseStep1TemplateProps) {
-  const handleSelect = useCallback(
-    (id: string) => {
-      onSelectTemplate(id)
-    },
-    [onSelectTemplate],
-  )
-
-  const handleKeySelect = useCallback(
-    (e: React.KeyboardEvent, id: string) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault()
-        onSelectTemplate(id)
-      }
-    },
-    [onSelectTemplate],
-  )
-
-  return {
-    templates,
-    selectedTemplate,
-    handleSelect,
-    handleKeySelect,
-  }
-}
-
-export default useStep1Template

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

@@ -1,205 +0,0 @@
-/**
- * Step 2 素材选择 Hook
- * 封装素材库加载、手动选择、智能匹配等逻辑
- */
-import { useState, useCallback, useEffect, useMemo } from "react"
-import { message } from "antd"
-import { useQuery } from "@tanstack/react-query"
-import { getAssets, getAssetLibraries } from "@/api/assets"
-import type { AssetItem } from "@/api/assets"
-import { formatDuration } from "../utils/formatDuration"
-import { SMART_MATCH_REASONS } from "../constants"
-
-interface SmartMatchedResult {
-  asset: AssetItem
-  matchScore: number
-  matchReason: string
-}
-
-interface UseStep2MaterialsProps {
-  materialMode: "manual" | "auto"
-  onMaterialModeChange: (mode: "manual" | "auto") => void
-  selectedMaterials: string[]
-  onSelectedMaterialsChange: (ids: string[]) => void
-  smartSelectedIds: string[]
-  onSmartSelectedIdsChange: (ids: string[]) => void
-}
-
-export function useStep2Materials({
-  materialMode,
-  onMaterialModeChange,
-  selectedMaterials,
-  onSelectedMaterialsChange,
-  smartSelectedIds,
-  onSmartSelectedIdsChange,
-}: UseStep2MaterialsProps) {
-  /* ── 素材库数据 API ── */
-  const { data: libraries = [] } = useQuery({
-    queryKey: ["asset-libraries"],
-    queryFn: getAssetLibraries,
-  })
-  const [selectedLibraryId, setSelectedLibraryId] = useState<string>("")
-
-  // 自动选中第一个视频库
-  useEffect(() => {
-    if (libraries.length > 0 && !selectedLibraryId) {
-      setSelectedLibraryId(libraries[0].id)
-    }
-  }, [libraries, selectedLibraryId])
-
-  const { data: materials = { items: [], total: 0 }, isLoading: materialsLoading } = useQuery<{
-    items: AssetItem[]
-    total: number
-  }>({
-    queryKey: ["generate-assets", selectedLibraryId],
-    queryFn: () => getAssets(selectedLibraryId),
-    enabled: !!selectedLibraryId,
-  })
-
-  /* ── 智能素材匹配状态 ── */
-  const [smartMatchInput, setSmartMatchInput] = useState("")
-  const [smartMatching, setSmartMatching] = useState(false)
-  const [smartMatchedResults, setSmartMatchedResults] = useState<SmartMatchedResult[]>([])
-  const [hasMatched, setHasMatched] = useState(false)
-
-  /* ── 手动选择素材 ── */
-  const handleToggleMaterial = useCallback(
-    (materialId: string) => {
-      onSelectedMaterialsChange(
-        selectedMaterials.includes(materialId)
-          ? selectedMaterials.filter((id) => id !== materialId)
-          : [...selectedMaterials, materialId],
-      )
-    },
-    [selectedMaterials, onSelectedMaterialsChange],
-  )
-
-  /* ── 智能素材匹配 ── */
-  const handleSmartMatch = useCallback(async () => {
-    if (!smartMatchInput.trim()) {
-      message.warning("请先输入视频内容描述")
-      return
-    }
-    if (materials.items.length === 0) {
-      message.warning("当前视频库暂无素材")
-      return
-    }
-
-    setSmartMatching(true)
-    setHasMatched(true)
-
-    // 模拟 AI 匹配延迟
-    await new Promise((resolve) => setTimeout(resolve, 1500))
-
-    // 从素材库中随机选取 5-8 个作为推荐结果
-    const shuffled = [...materials.items].sort(() => Math.random() - 0.5)
-    const count = Math.min(shuffled.length, 5 + Math.floor(Math.random() * 4))
-    const picked = shuffled.slice(0, count)
-
-    const results = picked.map((asset, idx) => ({
-      asset,
-      matchScore: Math.round(85 + Math.random() * 14), // 85-99 分
-      matchReason:
-        SMART_MATCH_REASONS[idx % SMART_MATCH_REASONS.length] +
-        (Math.random() > 0.5 ? "，画面质感优秀" : ""),
-    }))
-
-    // 按匹配度从高到低排序
-    results.sort((a, b) => b.matchScore - a.matchScore)
-
-    setSmartMatchedResults(results)
-    // 默认选中匹配度 >= 90 的素材
-    const defaultSelected = results.filter((r) => r.matchScore >= 90).map((r) => r.asset.id)
-    onSmartSelectedIdsChange(
-      defaultSelected.length > 0 ? defaultSelected : results.slice(0, 3).map((r) => r.asset.id),
-    )
-    setSmartMatching(false)
-  }, [smartMatchInput, materials.items, onSmartSelectedIdsChange])
-
-  const handleToggleSmartSelect = useCallback(
-    (assetId: string) => {
-      onSmartSelectedIdsChange(
-        smartSelectedIds.includes(assetId)
-          ? smartSelectedIds.filter((id) => id !== assetId)
-          : [...smartSelectedIds, assetId],
-      )
-    },
-    [smartSelectedIds, onSmartSelectedIdsChange],
-  )
-
-  const handleRefreshMatch = useCallback(async () => {
-    if (materials.items.length <= 5) {
-      message.info("视频库素材较少，无法换一批")
-      return
-    }
-    setSmartMatching(true)
-    await new Promise((resolve) => setTimeout(resolve, 800))
-
-    const remaining = materials.items.filter(
-      (m) => !smartMatchedResults.some((r) => r.asset.id === m.id),
-    )
-    const shuffled = [...remaining].sort(() => Math.random() - 0.5)
-    const count = Math.min(shuffled.length, 5 + Math.floor(Math.random() * 3))
-    const picked = shuffled.slice(0, count)
-
-    const results = picked.map((asset, idx) => ({
-      asset,
-      matchScore: Math.round(80 + Math.random() * 19),
-      matchReason:
-        SMART_MATCH_REASONS[(idx + 2) % SMART_MATCH_REASONS.length] +
-        (Math.random() > 0.5 ? "，节奏明快" : ""),
-    }))
-    results.sort((a, b) => b.matchScore - a.matchScore)
-
-    setSmartMatchedResults(results)
-    onSmartSelectedIdsChange([])
-    setSmartMatching(false)
-  }, [materials.items, smartMatchedResults, onSmartSelectedIdsChange])
-
-  const handleSelectAllMatched = useCallback(() => {
-    onSmartSelectedIdsChange(smartMatchedResults.map((r) => r.asset.id))
-  }, [smartMatchedResults, onSmartSelectedIdsChange])
-
-  const handleClearSmartSelect = useCallback(() => {
-    onSmartSelectedIdsChange([])
-  }, [onSmartSelectedIdsChange])
-
-  /* ── 计算已选智能匹配素材的总时长 ── */
-  const smartSelectedTotalDuration = useMemo(() => {
-    return smartMatchedResults
-      .filter((r) => smartSelectedIds.includes(r.asset.id))
-      .reduce((sum, r) => sum + (r.asset.duration || 0), 0)
-  }, [smartMatchedResults, smartSelectedIds])
-
-  return {
-    // 素材库
-    libraries,
-    selectedLibraryId,
-    setSelectedLibraryId,
-    materials,
-    materialsLoading,
-    // 模式
-    materialMode,
-    onMaterialModeChange,
-    // 手动选择
-    selectedMaterials,
-    handleToggleMaterial,
-    // 智能匹配
-    smartMatchInput,
-    setSmartMatchInput,
-    smartMatching,
-    smartMatchedResults,
-    hasMatched,
-    smartSelectedIds,
-    handleSmartMatch,
-    handleToggleSmartSelect,
-    handleRefreshMatch,
-    handleSelectAllMatched,
-    handleClearSmartSelect,
-    smartSelectedTotalDuration,
-    // utils
-    formatDuration,
-  }
-}
-
-export default useStep2Materials

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

@@ -1,47 +0,0 @@
-/**
- * Step 3 生成预览 Hook
- * 封装预览信息的计算逻辑
- */
-import { useMemo } from "react"
-import type { EditingTemplate } from "@/api/editing-planner"
-
-interface UseStep3PreviewProps {
-  templates: EditingTemplate[]
-  selectedTemplate: string
-  materialMode: "manual" | "auto"
-  selectedMaterials: string[]
-  smartSelectedIds: string[]
-  duration: number
-  videoRatio: string
-}
-
-export function useStep3Preview({
-  templates,
-  selectedTemplate,
-  materialMode,
-  selectedMaterials,
-  smartSelectedIds,
-  duration,
-  videoRatio,
-}: UseStep3PreviewProps) {
-  const templateName = useMemo(
-    () => templates.find((t) => t.id === selectedTemplate)?.name ?? "未选择",
-    [templates, selectedTemplate],
-  )
-
-  const materialCount = useMemo(() => {
-    if (materialMode === "auto") {
-      return `${smartSelectedIds.length} 个素材（智能匹配）`
-    }
-    return `${selectedMaterials.length} 个素材`
-  }, [materialMode, selectedMaterials.length, smartSelectedIds.length])
-
-  return {
-    templateName,
-    materialCount,
-    duration,
-    videoRatio,
-  }
-}
-
-export default useStep3Preview

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

@@ -1,251 +0,0 @@
-/**
- * Step 4 标题设置 Hook
- * 封装 AI 标题生成、标题样式设置等逻辑
- */
-import { useState, useCallback, useMemo } from "react"
-import { message } from "antd"
-import { useQuery } from "@tanstack/react-query"
-import { getTitles } from "@/api/titles"
-import { TITLE_PRESETS, AI_TITLE_TEMPLATES } from "../constants"
-import type { TitleSettings } from "../types"
-
-interface UseStep4TitleProps {
-  titleSettings: TitleSettings
-  onTitleSettingsChange: (settings: TitleSettings) => void
-}
-
-interface AiTitleItem {
-  title: string
-  highlight: string
-  style: "catchy" | "emotional" | "informative"
-}
-
-export function useStep4Title({ titleSettings, onTitleSettingsChange }: UseStep4TitleProps) {
-  /* ── 标题库 API ── */
-  const { data: userTitles = [] } = useQuery({
-    queryKey: ["titles"],
-    queryFn: () => getTitles(),
-    staleTime: 30_000,
-  })
-
-  /* ── AI 标题生成状态 ── */
-  const [aiTitleInput, setAiTitleInput] = useState("")
-  const [aiTitleGenerating, setAiTitleGenerating] = useState(false)
-  const [aiTitleResults, setAiTitleResults] = useState<AiTitleItem[]>([])
-  const [hasGeneratedTitles, setHasGeneratedTitles] = useState(false)
-
-  /* ── 辅助函数 ── */
-  const extractTopic = (text: string): string => {
-    const keywords = text
-      .replace(/[，。！？、,.!?]/g, " ")
-      .split(/\s+/)
-      .filter(Boolean)
-    if (keywords.length === 0) return "这个话题"
-    // 取前3个关键词组合
-    return keywords.slice(0, 3).join("")
-  }
-
-  const getActivePreset = (settings: TitleSettings): string | null => {
-    for (const p of TITLE_PRESETS) {
-      if (
-        settings.size === p.style.size &&
-        settings.color === p.style.color &&
-        settings.bold === p.style.bold &&
-        settings.italic === p.style.italic &&
-        settings.stroke === p.style.stroke &&
-        settings.shadow === p.style.shadow
-      ) {
-        return p.key
-      }
-    }
-    return null
-  }
-
-  const activePreset = useMemo(() => getActivePreset(titleSettings), [titleSettings])
-
-  /* ── AI 标题生成 ── */
-  const handleGenerateAiTitles = useCallback(async () => {
-    if (!aiTitleInput.trim()) {
-      message.warning("请先输入视频描述或关键词")
-      return
-    }
-    setAiTitleGenerating(true)
-    setHasGeneratedTitles(true)
-
-    // 模拟 AI 生成延迟
-    await new Promise((resolve) => setTimeout(resolve, 1200))
-
-    const topic = extractTopic(aiTitleInput)
-    const results: AiTitleItem[] = []
-
-    const styles: Array<"catchy" | "emotional" | "informative"> = [
-      "catchy",
-      "emotional",
-      "informative",
-    ]
-    styles.forEach((style) => {
-      const templates = AI_TITLE_TEMPLATES[style]
-      // 每种风格随机选2个
-      const shuffled = [...templates].sort(() => Math.random() - 0.5).slice(0, 2)
-      shuffled.forEach((tpl) => {
-        const title = tpl.replace(/\{topic\}/g, topic)
-        const highlights = {
-          catchy: "吸睛标题",
-          emotional: "情感共鸣",
-          informative: "知识干货",
-        }
-        results.push({
-          title,
-          highlight: highlights[style],
-          style,
-        })
-      })
-    })
-
-    // 打乱顺序
-    results.sort(() => Math.random() - 0.5)
-    setAiTitleResults(results)
-    setAiTitleGenerating(false)
-  }, [aiTitleInput])
-
-  const handleSelectAiTitle = useCallback(
-    (title: string) => {
-      onTitleSettingsChange({ ...titleSettings, title, aiAutoSelect: false })
-      message.success("已选用此标题")
-    },
-    [titleSettings, onTitleSettingsChange],
-  )
-
-  const handleRefreshAiTitles = useCallback(async () => {
-    if (!aiTitleInput.trim()) return
-    setAiTitleGenerating(true)
-    await new Promise((resolve) => setTimeout(resolve, 800))
-    // 重新生成一批
-    const topic = extractTopic(aiTitleInput)
-    const results: AiTitleItem[] = []
-    const styles: Array<"catchy" | "emotional" | "informative"> = [
-      "catchy",
-      "emotional",
-      "informative",
-    ]
-    const highlights = { catchy: "吸睛标题", emotional: "情感共鸣", informative: "知识干货" }
-    styles.forEach((style) => {
-      const templates = AI_TITLE_TEMPLATES[style]
-      const shuffled = [...templates].sort(() => Math.random() - 0.5).slice(0, 2)
-      shuffled.forEach((tpl) => {
-        results.push({
-          title: tpl.replace(/\{topic\}/g, topic),
-          highlight: highlights[style],
-          style,
-        })
-      })
-    })
-    results.sort(() => Math.random() - 0.5)
-    setAiTitleResults(results)
-    setAiTitleGenerating(false)
-  }, [aiTitleInput])
-
-  /* ── 标题设置更新 ── */
-  const updateTitle = useCallback(
-    (title: string) => {
-      onTitleSettingsChange({ ...titleSettings, title })
-    },
-    [titleSettings, onTitleSettingsChange],
-  )
-
-  const toggleAiAutoSelect = useCallback(() => {
-    onTitleSettingsChange({ ...titleSettings, aiAutoSelect: !titleSettings.aiAutoSelect })
-  }, [titleSettings, onTitleSettingsChange])
-
-  const updatePosition = useCallback(
-    (position: string) => {
-      onTitleSettingsChange({ ...titleSettings, position })
-    },
-    [titleSettings, onTitleSettingsChange],
-  )
-
-  const updateFont = useCallback(
-    (font: string) => {
-      onTitleSettingsChange({ ...titleSettings, font })
-    },
-    [titleSettings, onTitleSettingsChange],
-  )
-
-  const updateSize = useCallback(
-    (size: number) => {
-      onTitleSettingsChange({ ...titleSettings, size })
-    },
-    [titleSettings, onTitleSettingsChange],
-  )
-
-  const updateColor = useCallback(
-    (color: string) => {
-      onTitleSettingsChange({ ...titleSettings, color })
-    },
-    [titleSettings, onTitleSettingsChange],
-  )
-
-  const toggleBold = useCallback(() => {
-    onTitleSettingsChange({ ...titleSettings, bold: !titleSettings.bold })
-  }, [titleSettings, onTitleSettingsChange])
-
-  const toggleItalic = useCallback(() => {
-    onTitleSettingsChange({ ...titleSettings, italic: !titleSettings.italic })
-  }, [titleSettings, onTitleSettingsChange])
-
-  const toggleStroke = useCallback(() => {
-    onTitleSettingsChange({ ...titleSettings, stroke: !titleSettings.stroke })
-  }, [titleSettings, onTitleSettingsChange])
-
-  const toggleShadow = useCallback(() => {
-    onTitleSettingsChange({ ...titleSettings, shadow: !titleSettings.shadow })
-  }, [titleSettings, onTitleSettingsChange])
-
-  const applyPreset = useCallback(
-    (presetKey: string) => {
-      const preset = TITLE_PRESETS.find((p) => p.key === presetKey)
-      if (!preset) return
-      onTitleSettingsChange({
-        ...titleSettings,
-        size: preset.style.size,
-        color: preset.style.color,
-        bold: preset.style.bold,
-        italic: preset.style.italic,
-        stroke: preset.style.stroke,
-        shadow: preset.style.shadow,
-      })
-    },
-    [titleSettings, onTitleSettingsChange],
-  )
-
-  return {
-    // 数据
-    userTitles,
-    titleSettings,
-    aiTitleInput,
-    setAiTitleInput,
-    aiTitleGenerating,
-    aiTitleResults,
-    hasGeneratedTitles,
-    activePreset,
-    titlePresets: TITLE_PRESETS,
-    // AI 标题操作
-    handleGenerateAiTitles,
-    handleSelectAiTitle,
-    handleRefreshAiTitles,
-    // 标题设置操作
-    updateTitle,
-    toggleAiAutoSelect,
-    updatePosition,
-    updateFont,
-    updateSize,
-    updateColor,
-    toggleBold,
-    toggleItalic,
-    toggleStroke,
-    toggleShadow,
-    applyPreset,
-  }
-}
-
-export default useStep4Title

apps/web/src/pages/generate/hooks/useStep5Voice.tsx

@@ -1,397 +0,0 @@
-/**
- * Step 5 配音选择 Hook
- * 封装 AI 推荐、预设音色试听、TTS 自定义合成、存为素材等逻辑
- */
-import { useState, useRef, useCallback, useEffect, useMemo } from "react"
-import { useNavigate } from "react-router-dom"
-import { message } from "antd"
-import { useQuery, useMutation } from "@tanstack/react-query"
-import type { PresetVoiceItem } from "@/api/voices"
-import { fetchPresetVoices } from "@/api/voices"
-import { synthesizeSpeech, getTTSJobStatus, saveTtsToLibrary } from "@/api/tts"
-import { getTags, createTag } from "@/api/tags"
-import { formatDuration } from "../utils/formatDuration"
-import type { VoiceClone } from "@/api/voice-clone"
-import { VOICE_GENDER_ICON, CLONE_STATUS_CONFIG } from "../constants"
-
-interface UseStep5VoiceProps {
-  selectedVoice: string
-  onSelectedVoiceChange: (voiceId: string) => void
-  voiceMode: "preset" | "custom" | "clone"
-  onVoiceModeChange: (mode: "preset" | "custom" | "clone") => void
-  selectedClonedVoice: string
-  onSelectedClonedVoiceChange: (voiceId: string) => void
-  clonedVoices: VoiceClone[]
-  addClone: (voice: VoiceClone) => void
-  hasProcessing: boolean
-  cloneModalOpen: boolean
-  onCloneModalOpenChange: (open: boolean) => void
-  titleText: string
-}
-
-export function useStep5Voice({
-  selectedVoice,
-  onSelectedVoiceChange,
-  voiceMode,
-  onVoiceModeChange,
-  selectedClonedVoice,
-  onSelectedClonedVoiceChange,
-  clonedVoices,
-  addClone,
-  hasProcessing,
-  cloneModalOpen,
-  onCloneModalOpenChange,
-  titleText,
-}: UseStep5VoiceProps) {
-  const navigate = useNavigate()
-  /* ── 预置音色 API ── */
-  const { data: presetVoicesData, isLoading: presetVoicesLoading } = useQuery({
-    queryKey: ["preset-voices"],
-    queryFn: fetchPresetVoices,
-  })
-  const presetVoices: PresetVoiceItem[] = useMemo(
-    () => presetVoicesData?.items ?? [],
-    [presetVoicesData],
-  )
-
-  /* ── 音频播放 ── */
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-  const [playingVoice, setPlayingVoice] = useState<string | null>(null)
-
-  const toggleVoicePlay = useCallback(
-    (voiceId: string, previewUrl: string | null) => {
-      if (playingVoice === voiceId) {
-        audioRef.current?.pause()
-        audioRef.current = null
-        setPlayingVoice(null)
-        return
-      }
-      audioRef.current?.pause()
-      if (!previewUrl) {
-        message.warning("该音色暂无试听音频")
-        return
-      }
-      const audio = new Audio(previewUrl)
-      audioRef.current = audio
-      audio.play().catch(() => {
-        message.error("播放失败，请检查网络")
-      })
-      audio.onended = () => {
-        setPlayingVoice(null)
-        audioRef.current = null
-      }
-      setPlayingVoice(voiceId)
-    },
-    [playingVoice],
-  )
-
-  /* ── 智能配音推荐 ── */
-  const [voiceRecommendLoading, setVoiceRecommendLoading] = useState(false)
-  const [voiceRecommendations, setVoiceRecommendations] = useState<string[]>([])
-  const [hasVoiceRecommend, setHasVoiceRecommend] = useState(false)
-
-  const handleVoiceRecommend = useCallback(async () => {
-    if (presetVoices.length === 0) return
-    setVoiceRecommendLoading(true)
-    setHasVoiceRecommend(true)
-
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-
-    // 根据标题内容风格模拟推荐：情感类→温柔女声，知识类→沉稳男声，活力类→阳光少年
-    const title = titleText.toLowerCase()
-    let recommended: string[] = []
-
-    const femaleVoices = presetVoices.filter((v) => v.gender === "female").map((v) => v.voice_id)
-    const maleVoices = presetVoices.filter((v) => v.gender === "male").map((v) => v.voice_id)
-    const childVoices = presetVoices.filter((v) => v.gender === "child").map((v) => v.voice_id)
-
-    if (/情感|感人|温暖|治愈|故事|回忆/.test(title)) {
-      recommended = femaleVoices.slice(0, 3)
-    } else if (/教程|知识|科普|干货|讲解|分析/.test(title)) {
-      recommended = maleVoices.slice(0, 2).concat(femaleVoices.slice(0, 1))
-    } else if (/活力|热血|运动|搞笑|有趣/.test(title)) {
-      recommended = childVoices.slice(0, 1).concat(maleVoices.slice(0, 1), femaleVoices.slice(0, 1))
-    } else {
-      // 默认推荐前3个
-      recommended = presetVoices.slice(0, 3).map((v) => v.voice_id)
-    }
-
-    // 不足3个时补足
-    if (recommended.length < 3) {
-      const others = presetVoices
-        .filter((v) => !recommended.includes(v.voice_id))
-        .map((v) => v.voice_id)
-      recommended = recommended.concat(others.slice(0, 3 - recommended.length))
-    }
-
-    setVoiceRecommendations(recommended)
-    setVoiceRecommendLoading(false)
-  }, [presetVoices, titleText])
-
-  const handleSelectRecommendedVoice = useCallback(
-    (voiceId: string) => {
-      onVoiceModeChange("preset")
-      onSelectedVoiceChange(voiceId)
-    },
-    [onVoiceModeChange, onSelectedVoiceChange],
-  )
-
-  /* ── TTS 自定义合成状态 ── */
-  const [customVoiceText, setCustomVoiceText] = useState("")
-  const [customAudioUrl, setCustomAudioUrl] = useState<string | null>(null)
-  const [ttsError, setTtsError] = useState<string | null>(null)
-  const [ttsJobId, setTtsJobId] = useState<string | null>(null)
-  /** 合成完成后保留的 job ID，用于"存为素材" */
-  const [completedTtsJobId, setCompletedTtsJobId] = useState<string | null>(null)
-
-  /* ── TTS mutation ── */
-  const synthesizeMutation = useMutation({
-    mutationFn: synthesizeSpeech,
-    onSuccess: (data) => {
-      setTtsJobId(data.job_id)
-      message.info("语音合成已提交，等待处理…")
-    },
-    onError: () => {
-      setTtsError("语音合成请求失败，请重试")
-    },
-  })
-
-  /** 轮询 TTS 任务状态 */
-  useEffect(() => {
-    if (!ttsJobId) return
-    let cancelled = false
-    let timer: ReturnType<typeof setTimeout>
-
-    const poll = async () => {
-      try {
-        const status = await getTTSJobStatus(ttsJobId)
-        if (cancelled) return
-        if (status.status === "completed") {
-          setCustomAudioUrl(status.output_audio_url)
-          setCompletedTtsJobId(ttsJobId)
-          setTtsJobId(null)
-          setTtsError(null)
-          message.success("语音合成完成！")
-          return
-        }
-        if (status.status === "failed" || status.status === "cancelled") {
-          setTtsError(status.error_message || "语音合成失败")
-          setTtsJobId(null)
-          return
-        }
-        timer = setTimeout(poll, 2000)
-      } catch {
-        if (!cancelled) {
-          setTtsError("查询合成状态失败")
-          setTtsJobId(null)
-        }
-      }
-    }
-
-    timer = setTimeout(poll, 2000)
-    return () => {
-      cancelled = true
-      clearTimeout(timer)
-    }
-  }, [ttsJobId])
-
-  /** 触发自定义文本 TTS 合成 */
-  const handleSynthesizeVoice = useCallback(() => {
-    if (!customVoiceText.trim()) {
-      message.warning("请先输入配音文案")
-      return
-    }
-    setTtsError(null)
-    setCustomAudioUrl(null)
-    synthesizeMutation.mutate({
-      text: customVoiceText.trim(),
-      voice_id: selectedVoice || undefined,
-      language: "zh-CN",
-    })
-  }, [customVoiceText, selectedVoice, synthesizeMutation])
-
-  /* ── 存为素材弹窗状态 ── */
-  const [saveModalOpen, setSaveModalOpen] = useState(false)
-  const [saveName, setSaveName] = useState("")
-  const [saveTagIds, setSaveTagIds] = useState<string[]>([])
-  const [saveNewTag, setSaveNewTag] = useState("")
-
-  /* ── 标签列表（用于存为素材弹窗） ── */
-  const { data: allTags = [] } = useQuery({
-    queryKey: ["generate-save-tags"],
-    queryFn: getTags,
-    staleTime: 30_000,
-  })
-
-  /* ── 存为素材 mutation ── */
-  const saveToLibraryMutation = useMutation({
-    mutationFn: (params: { name?: string; tag_ids?: string[] }) =>
-      saveTtsToLibrary(completedTtsJobId!, params),
-    onSuccess: () => {
-      message.success({
-        content: (
-          <span>
-            已保存到配音库！{" "}
-            <a
-              onClick={handleGoToLibrary}
-              style={{
-                color: "var(--primary-500, #6366f1)",
-                cursor: "pointer",
-              }}
-            >
-              去视频库查看
-            </a>
-          </span>
-        ),
-        duration: 5,
-      })
-      setSaveModalOpen(false)
-      setSaveName("")
-      setSaveTagIds([])
-      setSaveNewTag("")
-      setCompletedTtsJobId(null)
-      setCustomAudioUrl(null)
-    },
-    onError: (err: Error) => {
-      message.error(`保存失败：${err.message || "请重试"}`)
-    },
-  })
-
-  /** 打开存为素材弹窗 */
-  const handleOpenSaveModal = useCallback(() => {
-    setSaveName("")
-    setSaveTagIds([])
-    setSaveNewTag("")
-    setSaveModalOpen(true)
-  }, [])
-
-  /** 确认保存 */
-  const handleConfirmSave = useCallback(() => {
-    if (!completedTtsJobId) return
-    saveToLibraryMutation.mutate({
-      name: saveName.trim() || undefined,
-      tag_ids: saveTagIds.length > 0 ? saveTagIds : undefined,
-    })
-  }, [completedTtsJobId, saveName, saveTagIds, saveToLibraryMutation])
-
-  /** 在弹窗中新增标签（先创建再选中） */
-  const handleAddTagInModal = useCallback(
-    async (tagName: string) => {
-      const trimmed = tagName.trim()
-      if (!trimmed) return
-      /* 已在选中列表则跳过 */
-      const existing = allTags.find((t) => t.name === trimmed)
-      if (existing) {
-        if (!saveTagIds.includes(existing.id)) {
-          setSaveTagIds((prev) => [...prev, existing.id])
-        }
-        return
-      }
-      try {
-        const created = await createTag(trimmed)
-        setSaveTagIds((prev) => [...prev, created.id])
-        setSaveNewTag("")
-      } catch {
-        message.error(`创建标签"${trimmed}"失败`)
-      }
-    },
-    [allTags, saveTagIds],
-  )
-
-  /** 保存成功后跳转到视频库 */
-  const handleGoToLibrary = useCallback(() => {
-    navigate("/app/voice-materials")
-  }, [navigate])
-
-  /* ── 克隆成功回调 ── */
-  const handleCloneSuccess = useCallback(
-    (voice: VoiceClone) => {
-      addClone(voice)
-      onCloneModalOpenChange(false)
-      message.success("音色克隆成功！")
-    },
-    [addClone, onCloneModalOpenChange],
-  )
-
-  /* ── 预设音色选择操作 ── */
-  const handleSelectPresetVoice = useCallback(
-    (voiceId: string) => {
-      onVoiceModeChange("preset")
-      onSelectedVoiceChange(voiceId)
-    },
-    [onVoiceModeChange, onSelectedVoiceChange],
-  )
-
-  const handleSelectCloneVoice = useCallback(() => {
-    onVoiceModeChange("clone")
-  }, [onVoiceModeChange])
-
-  const handleSelectClonedVoice = useCallback(
-    (voiceId: string) => {
-      onSelectedClonedVoiceChange(voiceId)
-    },
-    [onSelectedClonedVoiceChange],
-  )
-
-  const handleOpenCloneModal = useCallback(() => {
-    onCloneModalOpenChange(true)
-  }, [onCloneModalOpenChange])
-
-  return {
-    // 数据
-    presetVoices,
-    presetVoicesLoading,
-    clonedVoices,
-    hasProcessing,
-    // 模式 & 选择
-    voiceMode,
-    selectedVoice,
-    selectedClonedVoice,
-    // AI 推荐
-    voiceRecommendLoading,
-    voiceRecommendations,
-    hasVoiceRecommend,
-    handleVoiceRecommend,
-    handleSelectRecommendedVoice,
-    // 音频播放
-    playingVoice,
-    toggleVoicePlay,
-    // 预设音色操作
-    handleSelectPresetVoice,
-    handleSelectCloneVoice,
-    // 自定义 TTS
-    customVoiceText,
-    setCustomVoiceText,
-    customAudioUrl,
-    ttsError,
-    ttsJobId,
-    completedTtsJobId,
-    synthesizeMutation,
-    handleSynthesizeVoice,
-    // 存为素材
-    saveModalOpen,
-    setSaveModalOpen,
-    saveName,
-    setSaveName,
-    saveTagIds,
-    setSaveTagIds,
-    saveNewTag,
-    setSaveNewTag,
-    allTags,
-    saveToLibraryMutation,
-    handleOpenSaveModal,
-    handleConfirmSave,
-    handleAddTagInModal,
-    // 克隆
-    cloneModalOpen,
-    handleOpenCloneModal,
-    handleCloneSuccess,
-    handleSelectClonedVoice,
-    // utils
-    VOICE_GENDER_ICON,
-    CLONE_STATUS_CONFIG,
-    formatDuration,
-  }
-}
-
-export default useStep5Voice

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

@@ -1,81 +0,0 @@
-/**
- * Step 6 封面设置 Hook
- * 封装封面设置的交互逻辑
- */
-import { useCallback } from "react"
-import type { CoverConfig } from "../../editing-planner/types"
-import { COVER_MODE_LABELS, COVER_MODE_ICONS, DEFAULT_COVER_SETTINGS } from "../constants"
-
-interface UseStep6CoverProps {
-  coverSettings: CoverConfig
-  onCoverSettingsChange: (settings: CoverConfig) => void
-  duration: number
-}
-
-export function useStep6Cover({
-  coverSettings,
-  onCoverSettingsChange,
-  duration,
-}: UseStep6CoverProps) {
-  const formatTime = useCallback((seconds: number) => {
-    const m = Math.floor(seconds / 60)
-    const s = Math.floor(seconds % 60)
-    const ms = Math.floor((seconds % 1) * 10)
-    return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}.${ms}`
-  }, [])
-
-  const toggleEnabled = useCallback(
-    (enabled: boolean) => {
-      onCoverSettingsChange({ ...coverSettings, enabled })
-    },
-    [coverSettings, onCoverSettingsChange],
-  )
-
-  const setMode = useCallback(
-    (mode: CoverConfig["mode"]) => {
-      onCoverSettingsChange({ ...coverSettings, mode })
-    },
-    [coverSettings, onCoverSettingsChange],
-  )
-
-  const setFrameTime = useCallback(
-    (frameTime: number) => {
-      onCoverSettingsChange({ ...coverSettings, frame_time: frameTime })
-    },
-    [coverSettings, onCoverSettingsChange],
-  )
-
-  const handleUpload = useCallback(
-    (file: File) => {
-      const reader = new FileReader()
-      reader.onload = (ev) => {
-        const url = ev.target?.result as string
-        onCoverSettingsChange({
-          ...coverSettings,
-          upload_url: url,
-          thumbnail_url: url,
-          mode: "upload",
-        })
-      }
-      reader.readAsDataURL(file)
-    },
-    [coverSettings, onCoverSettingsChange],
-  )
-
-  const totalDuration = duration || 30
-
-  return {
-    coverSettings,
-    formatTime,
-    toggleEnabled,
-    setMode,
-    setFrameTime,
-    handleUpload,
-    totalDuration,
-    COVER_MODE_LABELS,
-    COVER_MODE_ICONS,
-    DEFAULT_COVER_SETTINGS,
-  }
-}
-
-export default useStep6Cover

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

@@ -1,121 +0,0 @@
-/**
- * Step 7 确认生成 Hook
- * 封装生成确认页的展示逻辑
- */
-import { useMemo } from "react"
-import type { EditingTemplate } from "@/api/editing-planner"
-import type { GeneratedVideo } from "@/api/template-editor"
-import type { CoverConfig } from "../../editing-planner/types"
-import type { VoiceClone } from "@/api/voice-clone"
-import type { PresetVoiceItem } from "@/api/voices"
-import { COVER_MODE_LABELS } from "../constants"
-
-interface UseStep7GenerateProps {
-  templates: EditingTemplate[]
-  selectedTemplate: string
-  materialMode: "manual" | "auto"
-  selectedMaterials: string[]
-  smartSelectedIds: string[]
-  title: string
-  voiceMode: "preset" | "custom" | "clone"
-  selectedVoice: string
-  selectedClonedVoice: string
-  presetVoices: PresetVoiceItem[]
-  clonedVoices: VoiceClone[]
-  coverSettings: CoverConfig
-  generateCount: number
-  onGenerateCountChange: (count: number) => void
-  generating: boolean
-  generated: boolean
-  generateError: string | null
-  progress: number
-  generatedVideos: GeneratedVideo[]
-}
-
-export function useStep7Generate({
-  templates,
-  selectedTemplate,
-  materialMode,
-  selectedMaterials,
-  smartSelectedIds,
-  title,
-  voiceMode,
-  selectedVoice,
-  selectedClonedVoice,
-  presetVoices,
-  clonedVoices,
-  coverSettings,
-  generateCount,
-  onGenerateCountChange,
-  generating,
-  generated,
-  generateError,
-  progress,
-  generatedVideos,
-}: UseStep7GenerateProps) {
-  const templateName = useMemo(
-    () => templates.find((t) => t.id === selectedTemplate)?.name ?? "未选择",
-    [templates, selectedTemplate],
-  )
-
-  const materialSummary = useMemo(() => {
-    if (materialMode === "auto") {
-      return `${smartSelectedIds.length} 个素材（智能匹配）`
-    }
-    return `${selectedMaterials.length} 个素材`
-  }, [materialMode, selectedMaterials.length, smartSelectedIds.length])
-
-  const voiceName = useMemo(() => {
-    if (voiceMode === "clone") {
-      const cv = clonedVoices.find((v) => v.id === selectedClonedVoice)
-      return cv ? cv.name : "未选择"
-    }
-    const pv = presetVoices.find((v) => v.voice_id === selectedVoice)
-    return pv ? pv.name : "未选择"
-  }, [voiceMode, selectedVoice, selectedClonedVoice, presetVoices, clonedVoices])
-
-  const coverSummary = useMemo(() => {
-    if (!coverSettings.enabled) return "不使用"
-    return COVER_MODE_LABELS[coverSettings.mode] || "智能封面"
-  }, [coverSettings])
-
-  const getGenerationPhase = (p: number) => {
-    if (p < 20) return { label: "分析素材与配置", icon: "🔍" }
-    if (p < 50) return { label: "智能剪辑合成", icon: "🎬" }
-    if (p < 80) return { label: "渲染视频中", icon: "⚡" }
-    return { label: "即将完成", icon: "✨" }
-  }
-
-  const handleDecrement = () => {
-    onGenerateCountChange(Math.max(1, generateCount - 1))
-  }
-
-  const handleIncrement = () => {
-    onGenerateCountChange(Math.min(10, generateCount + 1))
-  }
-
-  const handleScrollToPreview = () => {
-    const el = document.querySelector(".xx-preview-section")
-    el?.scrollIntoView({ behavior: "smooth", block: "start" })
-  }
-
-  return {
-    templateName,
-    materialSummary,
-    title,
-    voiceName,
-    coverSummary,
-    generateCount,
-    handleDecrement,
-    handleIncrement,
-    generating,
-    generated,
-    generateError,
-    progress,
-    generatedVideos,
-    getGenerationPhase,
-    handleScrollToPreview,
-  }
-}
-
-export default useStep7Generate

apps/web/src/pages/generate/utils/formatDuration.ts

@@ -1,9 +0,0 @@
-/**
- * 时长格式化工具
- * 秒数转分秒格式，如 65 -> "1:05"
- */
-export const formatDuration = (seconds: number): string => {
-  const m = Math.floor(seconds / 60)
-  const s = seconds % 60
-  return `${m}:${String(s).padStart(2, "0")}`
-}

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

@@ -2,87 +2,832 @@
  * 成片库页面 — V21 设计系统
  * 卡片网格布局，支持视频播放/下载/分享、批量操作、筛选
  * 使用 useQuery 对接后端真实 API（api/products.ts）
- *
- * 代码结构（三阶段重构后）：
- * - types.ts: 类型定义
- * - constants.ts: 常量配置
- * - utils/index.ts: 工具函数
- * - components/ProductCard.tsx: 产品卡片组件
- * - components/VideoPlayer.tsx: 视频播放器组件
- * - hooks/useProductList.ts: 列表查询与筛选
- * - hooks/useProductActions.ts: 单个/批量操作
  */
-import React, { useState } from "react"
-import { Popconfirm, message } from "antd"
+import React, { useMemo, useState, useRef, useEffect, useCallback } from "react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { useNavigate } from "react-router-dom"
+import { message, Popconfirm } from "antd"
 import {
   SearchOutlined,
   VideoCameraOutlined,
   DownloadOutlined,
+  ShareAltOutlined,
   DeleteOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  CloseOutlined,
   CheckOutlined,
   CloudUploadOutlined,
+  EyeOutlined,
 } from "@ant-design/icons"
 import { Button, Input, Select } from "@/components/ui"
-import type { ProductItem } from "./types"
-import { ProductCard } from "./components/ProductCard"
-import { VideoPlayer } from "./components/VideoPlayer"
-import { useProductList } from "./hooks/useProductList"
-import { useProductActions } from "./hooks/useProductActions"
+import {
+  getProducts,
+  deleteProduct,
+  getProductDownloadUrl,
+  updateReviewStatus,
+  batchDownload,
+  getBatchDownloadStatus,
+  type ProductItem as ApiProductItem,
+  type ReviewStatus,
+} from "@/api/products"
 import "./products.css"
 
+/* ============================================================
+ * 类型 & 常量
+ * ============================================================ */
+type ProductStatus = "completed" | "processing" | "review" | "failed"
+
+interface ProductItem {
+  id: string
+  name: string
+  status: ProductStatus
+  duration: number // 秒
+  date: string
+  gradient: string
+  duplicateRate: number // 查重率百分比
+  isPublished: boolean
+  resolution: string
+  fileSize: number // MB
+  videoUrl?: string
+  thumbnailUrl?: string
+  /** 复核状态 */
+  reviewStatus?: ReviewStatus
+  /** 所属项目 ID */
+  projectId?: string
+  /** 所属项目名称 */
+  projectName?: string
+}
+
+/** 将后端 status 映射为前端 ProductStatus */
+const normalizeStatus = (s: string): ProductStatus => {
+  const map: Record<string, ProductStatus> = {
+    completed: "completed",
+    succeeded: "completed",
+    processing: "processing",
+    running: "processing",
+    review: "review",
+    failed: "failed",
+    error: "failed",
+  }
+  return map[s] ?? "processing"
+}
+
+/** 渐变色列表（按 id hash 选取） */
+const GRADIENTS = [
+  "linear-gradient(135deg, #1e1b4b 0%, #4f46e5 50%, #818cf8 100%)",
+  "linear-gradient(135deg, #831843 0%, #db2777 50%, #f472b6 100%)",
+  "linear-gradient(135deg, #064e3b 0%, #059669 50%, #34d399 100%)",
+  "linear-gradient(135deg, #78350f 0%, #d97706 50%, #fbbf24 100%)",
+  "linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #60a5fa 100%)",
+  "linear-gradient(135deg, #581c87 0%, #9333ea 50%, #c084fc 100%)",
+  "linear-gradient(135deg, #7f1d1d 0%, #dc2626 50%, #f87171 100%)",
+  "linear-gradient(135deg, #134e4a 0%, #0d9488 50%, #5eead4 100%)",
+  "linear-gradient(135deg, #1e1b4b 0%, #6366f1 50%, #a5b4fc 100%)",
+  "linear-gradient(135deg, #3b0764 0%, #7c3aed 50%, #a78bfa 100%)",
+  "linear-gradient(135deg, #052e16 0%, #16a34a 50%, #86efac 100%)",
+  "linear-gradient(135deg, #450a0e 0%, #e11d48 50%, #fb7185 100%)",
+]
+
+/** 根据 id 生成稳定的渐变色 */
+const gradientForId = (id: string): string => {
+  let hash = 0
+  for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) | 0
+  return GRADIENTS[Math.abs(hash) % GRADIENTS.length]
+}
+
+/** 将后端 ProductItem 映射为前端 ProductItem */
+const mapApiProduct = (item: ApiProductItem): ProductItem => ({
+  id: item.id,
+  name: item.title,
+  status: normalizeStatus(item.status),
+  duration: item.duration_seconds ?? 0,
+  date: item.created_at ? formatDateTime(item.created_at) : "—",
+  gradient: gradientForId(item.id),
+  duplicateRate: item.duplicate_rate ?? 0,
+  isPublished: false, // TODO: 后端发布状态字段待补齐
+  resolution: item.resolution ?? "1080×1920",
+  fileSize: item.file_size ? +(item.file_size / (1024 * 1024)).toFixed(1) : 0,
+  videoUrl: item.video_url,
+  thumbnailUrl: item.thumbnail_url,
+  reviewStatus: item.review_status,
+  projectId: item.project_id,
+  projectName: item.project_name,
+})
+
+/* ============================================================
+ * 工具函数
+ * ============================================================ */
+const statusConfig: Record<ProductStatus, { text: string; className: string }> = {
+  completed: { text: "已完成", className: "completed" },
+  processing: { text: "处理中", className: "processing" },
+  review: { text: "待复核", className: "review" },
+  failed: { text: "失败", className: "failed" },
+}
+
+/** 格式化时间 mm:ss */
+const formatTime = (seconds: number): string => {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
+}
+
+/** 格式化文件大小 */
+const formatSize = (mb: number): string => {
+  if (mb <= 0) return "-"
+  if (mb < 1) return `${(mb * 1024).toFixed(0)} KB`
+  return `${mb.toFixed(1)} MB`
+}
+
+/** 格式化日期时间（MM-DD HH:mm） */
+const formatDateTime = (isoString: string): string => {
+  const d = new Date(isoString)
+  const month = (d.getMonth() + 1).toString().padStart(2, "0")
+  const day = d.getDate().toString().padStart(2, "0")
+  const hour = d.getHours().toString().padStart(2, "0")
+  const minute = d.getMinutes().toString().padStart(2, "0")
+  return `${month}-${day} ${hour}:${minute}`
+}
+
+/** 复核状态配置 */
+const reviewStatusConfig: Record<ReviewStatus, { text: string; className: string }> = {
+  pending_review: { text: "待复核", className: "review-pending" },
+  approved: { text: "已通过", className: "review-approved" },
+  rejected: { text: "需修改", className: "review-rejected" },
+}
+
+/** 复核状态循环顺序 */
+const REVIEW_STATUS_CYCLE: ReviewStatus[] = ["pending_review", "approved", "rejected"]
+
+/** 获取下一个复核状态 */
+const getNextReviewStatus = (current?: ReviewStatus): ReviewStatus => {
+  if (!current) return "approved"
+  const idx = REVIEW_STATUS_CYCLE.indexOf(current)
+  return REVIEW_STATUS_CYCLE[(idx + 1) % REVIEW_STATUS_CYCLE.length]
+}
+
+/* ============================================================
+ * ProductCard 组件
+ * ============================================================ */
+const ProductCard: React.FC<{
+  product: ProductItem
+  isSelected: boolean
+  batchMode: boolean
+  onToggleSelect: (id: string) => void
+  onPlay: (product: ProductItem) => void
+  onDownload: (product: ProductItem) => void
+  onShare: (product: ProductItem) => void
+  onDelete: (id: string) => void
+  onPublish: (product: ProductItem) => void
+  onReviewStatusChange: (id: string) => void
+}> = ({
+  product,
+  isSelected,
+  batchMode,
+  onToggleSelect,
+  onPlay,
+  onDownload,
+  onShare,
+  onDelete,
+  onPublish,
+  onReviewStatusChange,
+}) => {
+  const st = statusConfig[product.status]
+
+  /** 查重率样式 */
+  const dupClass =
+    product.duplicateRate <= 5 ? "good" : product.duplicateRate <= 15 ? "warn" : "bad"
+
+  /** 点击卡片 */
+  const handleCardClick = () => {
+    if (batchMode) {
+      onToggleSelect(product.id)
+    } else {
+      onPlay(product)
+    }
+  }
+
+  /** 点击复选框 */
+  const handleCheckboxClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onToggleSelect(product.id)
+  }
+
+  return (
+    <div
+      className={`xx-product-card${isSelected ? " selected" : ""}${product.isPublished ? " published" : ""}`}
+      onClick={handleCardClick}
+    >
+      {/* 复选框（左上角） */}
+      <div
+        className={`xx-product-card-checkbox${isSelected ? " checked" : ""}`}
+        onClick={handleCheckboxClick}
+        title={isSelected ? "取消选择" : "选择"}
+      >
+        {isSelected && <CheckOutlined />}
+      </div>
+
+      {/* 已发布徽章（右上角） */}
+      {product.isPublished && <div className="xx-product-badge">✅ 已发布</div>}
+
+      {/* 复核状态标签（右上角） */}
+      {product.reviewStatus && (
+        <div
+          className={`xx-product-review-tag ${reviewStatusConfig[product.reviewStatus].className}`}
+          onClick={(e) => {
+            e.stopPropagation()
+            onReviewStatusChange(product.id)
+          }}
+          title={`点击切换复核状态（当前：${reviewStatusConfig[product.reviewStatus].text}）`}
+        >
+          {reviewStatusConfig[product.reviewStatus].text}
+        </div>
+      )}
+      {/* 无复核状态时显示"待复核"入口 */}
+      {!product.reviewStatus && (
+        <div
+          className="xx-product-review-tag review-pending"
+          onClick={(e) => {
+            e.stopPropagation()
+            onReviewStatusChange(product.id)
+          }}
+          title="点击设置复核状态"
+        >
+          待复核
+        </div>
+      )}
+
+      {/* 缩略图 */}
+      <div className="xx-product-thumb">
+        {product.thumbnailUrl ? (
+          <img
+            className="xx-product-thumb-bg"
+            src={product.thumbnailUrl}
+            alt={product.name}
+            style={{ width: "100%", height: "100%", objectFit: "cover" }}
+          />
+        ) : (
+          <div className="xx-product-thumb-bg" style={{ background: product.gradient }} />
+        )}
+        <div className="xx-product-play">
+          <PlayCircleOutlined />
+        </div>
+        {product.duration > 0 && (
+          <span className="xx-product-duration">{formatTime(product.duration)}</span>
+        )}
+      </div>
+
+      {/* 信息区 */}
+      <div className="xx-product-info">
+        <h4 className="xx-product-title" title={product.name}>
+          {product.name}
+        </h4>
+        <div className="xx-product-meta">
+          <span className={`xx-product-status ${st.className}`}>{st.text}</span>
+          <span className="xx-product-date">{product.date}</span>
+        </div>
+        {product.duplicateRate > 0 && (
+          <span className={`xx-product-dup-rate ${dupClass}`}>
+            查重率：{product.duplicateRate.toFixed(1)}%
+          </span>
+        )}
+      </div>
+
+      {/* 操作按钮 */}
+      <div className="xx-product-actions" onClick={(e) => e.stopPropagation()}>
+        <button
+          className="xx-product-action-btn"
+          onClick={() => onDownload(product)}
+          disabled={product.status !== "completed"}
+          title="下载"
+        >
+          <DownloadOutlined /> 下载
+        </button>
+        <button
+          className="xx-product-action-btn"
+          onClick={() => onShare(product)}
+          disabled={product.status !== "completed"}
+          title="分享"
+        >
+          <ShareAltOutlined /> 分享
+        </button>
+        {product.isPublished ? (
+          <span className="xx-product-action-btn success" style={{ cursor: "default" }}>
+            ✅ 已发布
+          </span>
+        ) : (
+          <button
+            className="xx-product-action-btn primary"
+            onClick={() => onPublish(product)}
+            disabled={product.status !== "completed"}
+            title="发布"
+          >
+            <CloudUploadOutlined /> 发布
+          </button>
+        )}
+      </div>
+
+      {/* 删除按钮（不在批量模式下显示） */}
+      {!batchMode && (
+        <div style={{ padding: "0 14px 14px" }} onClick={(e) => e.stopPropagation()}>
+          <Popconfirm
+            title={`确定删除"${product.name}"？`}
+            onConfirm={() => onDelete(product.id)}
+            okText="删除"
+            cancelText="取消"
+          >
+            <button
+              className="xx-product-action-btn"
+              style={{ width: "100%", color: "#dc2626" }}
+              title="删除"
+            >
+              <DeleteOutlined /> 删除
+            </button>
+          </Popconfirm>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/* ============================================================
+ * VideoPlayer 弹窗组件
+ * ============================================================ */
+const VideoPlayer: React.FC<{
+  product: ProductItem
+  onClose: () => void
+  onDownload: (product: ProductItem) => void
+  onShare: (product: ProductItem) => void
+  onViewDetail: (product: ProductItem) => void
+}> = ({ product, onClose, onDownload, onShare, onViewDetail }) => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const progressRef = useRef<HTMLDivElement>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(product.duration)
+
+  const hasVideo = !!product.videoUrl
+
+  /** 播放/暂停 */
+  const handlePlayPause = useCallback(() => {
+    const video = videoRef.current
+    if (!video) return
+    if (isPlaying) {
+      video.pause()
+    } else {
+      video.play().catch(() => {})
+    }
+    setIsPlaying(!isPlaying)
+  }, [isPlaying])
+
+  /** 视频事件监听 */
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+    const onTime = () => setCurrentTime(video.currentTime)
+    const onDur = () => setDuration(video.duration || product.duration)
+    const onEnd = () => setIsPlaying(false)
+    video.addEventListener("timeupdate", onTime)
+    video.addEventListener("loadedmetadata", onDur)
+    video.addEventListener("ended", onEnd)
+    return () => {
+      video.removeEventListener("timeupdate", onTime)
+      video.removeEventListener("loadedmetadata", onDur)
+      video.removeEventListener("ended", onEnd)
+    }
+  }, [product.duration])
+
+  /** 进度条点击 */
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!progressRef.current) return
+    const rect = progressRef.current.getBoundingClientRect()
+    const percent = (e.clientX - rect.left) / rect.width
+    const newTime = percent * duration
+    setCurrentTime(newTime)
+    if (videoRef.current) videoRef.current.currentTime = newTime
+  }
+
+  /** ESC 关闭 */
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose()
+    }
+    window.addEventListener("keydown", handleKey)
+    return () => window.removeEventListener("keydown", handleKey)
+  }, [onClose])
+
+  const progress = duration > 0 ? (currentTime / duration) * 100 : 0
+
+  return (
+    <div className="xx-player-overlay" onClick={onClose}>
+      <div className="xx-player-container" onClick={(e) => e.stopPropagation()}>
+        {/* 视频区域 */}
+        <div className="xx-player-video-wrap">
+          {hasVideo ? (
+            <video
+              ref={videoRef}
+              src={product.videoUrl}
+              style={{ width: "100%", height: "100%", objectFit: "contain" }}
+            />
+          ) : (
+            /* 无视频 URL 时用渐变占位 */
+            <div
+              style={{
+                width: "100%",
+                height: "100%",
+                background: product.gradient,
+                display: "grid",
+                placeItems: "center",
+                color: "rgba(255,255,255,0.3)",
+                fontSize: "64px",
+              }}
+            >
+              <VideoCameraOutlined />
+            </div>
+          )}
+
+          {/* 播放/暂停按钮 */}
+          <button className="xx-player-play-btn" onClick={handlePlayPause}>
+            {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
+          </button>
+
+          {/* 关闭按钮 */}
+          <button className="xx-player-close" onClick={onClose}>
+            <CloseOutlined />
+          </button>
+
+          {/* 进度条 */}
+          <div className="xx-player-progress-wrap">
+            <div ref={progressRef} className="xx-player-progress" onClick={handleProgressClick}>
+              <div className="xx-player-progress-bar" style={{ width: `${progress}%` }} />
+            </div>
+            <div className="xx-player-time">
+              <span>{formatTime(currentTime)}</span>
+              <span>{formatTime(duration)}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* 信息区 */}
+        <div className="xx-player-info">
+          <h3 className="xx-player-title">{product.name}</h3>
+          <div className="xx-player-details">
+            <div className="xx-player-detail-item">
+              <span className="xx-player-detail-label">分辨率：</span>
+              <span className="xx-player-detail-value">{product.resolution}</span>
+            </div>
+            <div className="xx-player-detail-item">
+              <span className="xx-player-detail-label">时长：</span>
+              <span className="xx-player-detail-value">{formatTime(product.duration)}</span>
+            </div>
+            <div className="xx-player-detail-item">
+              <span className="xx-player-detail-label">文件大小：</span>
+              <span className="xx-player-detail-value">{formatSize(product.fileSize)}</span>
+            </div>
+            <div className="xx-player-detail-item">
+              <span className="xx-player-detail-label">查重率：</span>
+              <span className="xx-player-detail-value">
+                {product.duplicateRate > 0 ? `${product.duplicateRate.toFixed(1)}%` : "-"}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* 底部操作 */}
+        <div className="xx-player-footer">
+          <Button
+            buttonType="ghost"
+            buttonSize="sm"
+            icon={<DownloadOutlined />}
+            onClick={() => onDownload(product)}
+            disabled={product.status !== "completed"}
+          >
+            下载视频
+          </Button>
+          <Button
+            buttonType="ghost"
+            buttonSize="sm"
+            icon={<ShareAltOutlined />}
+            onClick={() => onShare(product)}
+            disabled={product.status !== "completed"}
+          >
+            分享
+          </Button>
+          <Button
+            buttonType="ghost"
+            buttonSize="sm"
+            icon={<EyeOutlined />}
+            onClick={() => onViewDetail(product)}
+          >
+            查看详情
+          </Button>
+          <div style={{ flex: 1 }} />
+          <Button buttonType="primary" buttonSize="sm" onClick={onClose}>
+            关闭
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 /* ============================================================
  * 主组件
  * ============================================================ */
 const ProductLibrary: React.FC = () => {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+
+  /* ── 获取成品列表 ── */
   const {
-    products,
-    filteredProducts,
+    data: apiProducts = [],
     isLoading,
     isError,
     error,
     refetch,
-    searchText,
-    setSearchText,
-    filterStatus,
-    setFilterStatus,
-    filterTime,
-    setFilterTime,
-    filterDuration,
-    setFilterDuration,
-    filterProject,
-    setFilterProject,
-    filterReviewStatus,
-    setFilterReviewStatus,
-    projectOptions,
-    selectedIds,
-    batchMode,
-    allSelected,
-    handleSelectAll,
-    handleToggleSelect,
-    clearSelection,
-  } = useProductList()
+  } = useQuery<ApiProductItem[], Error>({
+    queryKey: ["products"],
+    queryFn: () => getProducts(),
+    staleTime: 30_000,
+  })
+
+  // 映射为前端类型，按创建时间倒序排列，防御非数组返回
+  const products = useMemo(() => {
+    const list = (Array.isArray(apiProducts) ? apiProducts : []).map(mapApiProduct)
+    // 按创建时间倒序（最新的在最前面），无时间的排最后
+    return list.sort((a, b) => {
+      if (!a.date || a.date === "—") return 1
+      if (!b.date || b.date === "—") return -1
+      return new Date(b.date).getTime() - new Date(a.date).getTime()
+    })
+  }, [apiProducts])
+
+  /* ── 删除 mutation ── */
+  const deleteMutation = useMutation({
+    mutationFn: deleteProduct,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["products"] })
+      message.success("已删除")
+    },
+    onError: () => {
+      message.error("删除失败")
+    },
+  })
+
+  /* ── 复核状态 mutation ── */
+  const reviewMutation = useMutation({
+    mutationFn: ({ id, status }: { id: string; status: ReviewStatus }) =>
+      updateReviewStatus(id, status),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["products"] })
+      message.success("复核状态已更新")
+    },
+    onError: () => {
+      message.error("更新复核状态失败")
+    },
+  })
+
+  /* 筛选 */
+  const [searchText, setSearchText] = useState("")
+  const [filterStatus, setFilterStatus] = useState<string>("all")
+  const [filterTime, setFilterTime] = useState<string>("all")
+  const [filterDuration, setFilterDuration] = useState<string>("all")
+  const [filterProject, setFilterProject] = useState<string>("all")
+  const [filterReviewStatus, setFilterReviewStatus] = useState<string>("all")
+
+  /* 批量操作 */
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
 
   /* 播放器 */
   const [playingProduct, setPlayingProduct] = useState<ProductItem | null>(null)
 
-  const {
-    handleDownload,
-    handleShare,
-    handleViewDetail,
-    handleDelete,
-    handlePublish,
-    handleReviewStatusChange,
-    handleBatchDownload,
-    handleBatchDelete,
-    handleBatchPublish,
-    batchDownloading,
-  } = useProductActions({
-    selectedIds,
-    clearSelection,
-    products,
-    setPlayingProduct,
-  })
+  /* 派生数据 */
+  const batchMode = selectedIds.size > 0
 
+  const filteredProducts = useMemo(() => {
+    let list = products
+
+    /* 状态筛选 */
+    if (filterStatus !== "all") {
+      list = list.filter((p) => p.status === filterStatus)
+    }
+
+    /* 时间筛选 */
+    if (filterTime !== "all") {
+      const now = new Date()
+      list = list.filter((p) => {
+        const d = new Date(p.date)
+        const diff = (now.getTime() - d.getTime()) / (1000 * 60 * 60 * 24)
+        switch (filterTime) {
+          case "today":
+            return diff < 1
+          case "week":
+            return diff <= 7
+          case "month":
+            return diff <= 30
+          default:
+            return true
+        }
+      })
+    }
+
+    /* 时长筛选 */
+    if (filterDuration !== "all") {
+      list = list.filter((p) => {
+        switch (filterDuration) {
+          case "short":
+            return p.duration > 0 && p.duration <= 60
+          case "medium":
+            return p.duration > 60 && p.duration <= 180
+          case "long":
+            return p.duration > 180
+          default:
+            return true
+        }
+      })
+    }
+
+    /* 项目筛选 */
+    if (filterProject !== "all") {
+      list = list.filter((p) => p.projectId === filterProject)
+    }
+
+    /* 复核状态筛选 */
+    if (filterReviewStatus !== "all") {
+      if (filterReviewStatus === "none") {
+        list = list.filter((p) => !p.reviewStatus)
+      } else {
+        list = list.filter((p) => p.reviewStatus === filterReviewStatus)
+      }
+    }
+
+    /* 搜索 */
+    if (searchText.trim()) {
+      const q = searchText.trim().toLowerCase()
+      list = list.filter((p) => p.name.toLowerCase().includes(q))
+    }
+
+    return list
+  }, [
+    products,
+    filterStatus,
+    filterTime,
+    filterDuration,
+    filterProject,
+    filterReviewStatus,
+    searchText,
+  ])
+
+  /* 全选 */
+  const allSelected =
+    filteredProducts.length > 0 && filteredProducts.every((p) => selectedIds.has(p.id))
+
+  const handleSelectAll = () => {
+    if (allSelected) {
+      setSelectedIds(new Set())
+    } else {
+      setSelectedIds(new Set(filteredProducts.map((p) => p.id)))
+    }
+  }
+
+  /* 切换单个选择 */
+  const handleToggleSelect = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  /* 下载 — 调用真实 API 获取下载链接 */
+  const handleDownload = async (product: ProductItem) => {
+    if (product.status !== "completed") return
+    try {
+      const { url } = await getProductDownloadUrl(product.id)
+      // 打开下载链接
+      const a = document.createElement("a")
+      a.href = url
+      a.download = ""
+      a.click()
+      message.success(`正在下载"${product.name}"`)
+    } catch {
+      message.error("获取下载链接失败")
+    }
+  }
+
+  /* 分享 */
+  const handleShare = (product: ProductItem) => {
+    if (product.status !== "completed") return
+    const link = `${window.location.origin}/share/${product.id}`
+    navigator.clipboard?.writeText(link).then(
+      () => message.success(`分享链接已复制：${link}`),
+      () => message.success(`分享链接：${link}（请手动复制）`),
+    )
+  }
+
+  /* 查看详情 — 跳转到产品详情页 */
+  const handleViewDetail = (product: ProductItem) => {
+    setPlayingProduct(null) // 关闭播放器
+    navigate(`/app/products/${product.id}`)
+  }
+
+  /* 删除 */
+  const handleDelete = (id: string) => {
+    deleteMutation.mutate(id)
+    setSelectedIds((prev) => {
+      const next = new Set(prev)
+      next.delete(id)
+      return next
+    })
+  }
+
+  /* 发布 — TODO: 后端发布 API 待实现 */
+  const handlePublish = (_product: ProductItem) => {
+    // TODO: 对接后端发布 API（当前后端未提供发布接口）
+    message.info("发布功能待后端 API 补齐")
+  }
+
+  /* 切换复核状态 */
+  const handleReviewStatusChange = (id: string) => {
+    const current = products.find((p) => p.id === id)?.reviewStatus
+    const nextStatus = getNextReviewStatus(current)
+    reviewMutation.mutate({ id, status: nextStatus })
+  }
+
+  /* 批量下载 — 使用 batch-download API + 轮询 */
+  const [batchDownloading, setBatchDownloading] = useState(false)
+
+  const handleBatchDownload = async () => {
+    const ids = Array.from(selectedIds)
+    if (ids.length === 0) return
+    setBatchDownloading(true)
+    try {
+      // 发起批量下载任务
+      const { job_id } = await batchDownload(ids)
+      message.info(`批量下载任务已创建，正在打包 ${ids.length} 个视频...`)
+
+      // 轮询下载状态（最多 60 次，每次 2 秒）
+      let attempts = 0
+      const maxAttempts = 60
+      const poll = async (): Promise<void> => {
+        if (attempts >= maxAttempts) {
+          message.warning("打包超时，请稍后在消息中心查看")
+          return
+        }
+        attempts++
+        await new Promise((r) => setTimeout(r, 2000))
+        const status = await getBatchDownloadStatus(job_id)
+        if (status.status === "completed" && status.download_url) {
+          const a = document.createElement("a")
+          a.href = status.download_url
+          a.download = ""
+          a.click()
+          message.success(`已打包下载 ${ids.length} 个视频`)
+          setSelectedIds(new Set())
+        } else if (status.status === "failed") {
+          message.error("批量下载失败，请重试")
+        } else {
+          // 继续轮询
+          await poll()
+        }
+      }
+      await poll()
+    } catch {
+      message.error("发起批量下载失败")
+    } finally {
+      setBatchDownloading(false)
+    }
+  }
+
+  /* 批量删除 */
+  const handleBatchDelete = async () => {
+    const ids = Array.from(selectedIds)
+    let successCount = 0
+    for (const id of ids) {
+      try {
+        await deleteProduct(id)
+        successCount++
+      } catch {
+        // 忽略单个失败
+      }
+    }
+    queryClient.invalidateQueries({ queryKey: ["products"] })
+    setSelectedIds(new Set())
+    message.success(`已批量删除 ${successCount}/${ids.length} 个视频`)
+  }
+
+  /* 批量发布 */
+  const handleBatchPublish = () => {
+    // TODO: 对接后端批量发布 API
+    message.info("批量发布功能待后端 API 补齐")
+    setSelectedIds(new Set())
+  }
+
+  // ── Loading 状态 ──
   if (isLoading) {
     return (
       <div className="xx-products-page">
@@ -194,7 +939,7 @@ const ProductLibrary: React.FC = () => {
                 批量删除
               </Button>
             </Popconfirm>
-            <Button buttonType="ghost" buttonSize="sm" onClick={clearSelection}>
+            <Button buttonType="ghost" buttonSize="sm" onClick={() => setSelectedIds(new Set())}>
               取消选择
             </Button>
           </div>
@@ -252,7 +997,16 @@ const ProductLibrary: React.FC = () => {
             style={{ width: 140 }}
             options={[
               { value: "all", label: "全部项目" },
-              ...projectOptions,
+              ...Array.from(
+                new Map(
+                  products
+                    .filter((p) => p.projectId && p.projectName)
+                    .map((p) => [p.projectId!, p.projectName!] as const),
+                ),
+              ).map(([id, name]) => ({
+                value: id as string,
+                label: name as string,
+              })),
             ]}
           />
           <Select

apps/web/src/pages/products/components/ProductCard.tsx

@@ -1,196 +0,0 @@
-import React from "react"
-import { Popconfirm } from "antd"
-import {
-  CheckOutlined,
-  PlayCircleOutlined,
-  DownloadOutlined,
-  ShareAltOutlined,
-  DeleteOutlined,
-  CloudUploadOutlined,
-} from "@ant-design/icons"
-import type { ProductItem } from "../types"
-import { statusConfig, reviewStatusConfig } from "../constants"
-import { formatTime } from "../utils"
-
-interface ProductCardProps {
-  product: ProductItem
-  isSelected: boolean
-  batchMode: boolean
-  onToggleSelect: (id: string) => void
-  onPlay: (product: ProductItem) => void
-  onDownload: (product: ProductItem) => void
-  onShare: (product: ProductItem) => void
-  onDelete: (id: string) => void
-  onPublish: (product: ProductItem) => void
-  onReviewStatusChange: (id: string) => void
-}
-
-export const ProductCard: React.FC<ProductCardProps> = ({
-  product,
-  isSelected,
-  batchMode,
-  onToggleSelect,
-  onPlay,
-  onDownload,
-  onShare,
-  onDelete,
-  onPublish,
-  onReviewStatusChange,
-}) => {
-  const st = statusConfig[product.status]
-
-  /** 查重率样式 */
-  const dupClass =
-    product.duplicateRate <= 5 ? "good" : product.duplicateRate <= 15 ? "warn" : "bad"
-
-  /** 点击卡片 */
-  const handleCardClick = () => {
-    if (batchMode) {
-      onToggleSelect(product.id)
-    } else {
-      onPlay(product)
-    }
-  }
-
-  /** 点击复选框 */
-  const handleCheckboxClick = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    onToggleSelect(product.id)
-  }
-
-  return (
-    <div
-      className={`xx-product-card${isSelected ? " selected" : ""}${product.isPublished ? " published" : ""}`}
-      onClick={handleCardClick}
-    >
-      {/* 复选框（左上角） */}
-      <div
-        className={`xx-product-card-checkbox${isSelected ? " checked" : ""}`}
-        onClick={handleCheckboxClick}
-        title={isSelected ? "取消选择" : "选择"}
-      >
-        {isSelected && <CheckOutlined />}
-      </div>
-
-      {/* 已发布徽章（右上角） */}
-      {product.isPublished && <div className="xx-product-badge">✅ 已发布</div>}
-
-      {/* 复核状态标签（右上角） */}
-      {product.reviewStatus && (
-        <div
-          className={`xx-product-review-tag ${reviewStatusConfig[product.reviewStatus].className}`}
-          onClick={(e) => {
-            e.stopPropagation()
-            onReviewStatusChange(product.id)
-          }}
-          title={`点击切换复核状态（当前：${reviewStatusConfig[product.reviewStatus].text}）`}
-        >
-          {reviewStatusConfig[product.reviewStatus].text}
-        </div>
-      )}
-      {/* 无复核状态时显示"待复核"入口 */}
-      {!product.reviewStatus && (
-        <div
-          className="xx-product-review-tag review-pending"
-          onClick={(e) => {
-            e.stopPropagation()
-            onReviewStatusChange(product.id)
-          }}
-          title="点击设置复核状态"
-        >
-          待复核
-        </div>
-      )}
-
-      {/* 缩略图 */}
-      <div className="xx-product-thumb">
-        {product.thumbnailUrl ? (
-          <img
-            className="xx-product-thumb-bg"
-            src={product.thumbnailUrl}
-            alt={product.name}
-            style={{ width: "100%", height: "100%", objectFit: "cover" }}
-          />
-        ) : (
-          <div className="xx-product-thumb-bg" style={{ background: product.gradient }} />
-        )}
-        <div className="xx-product-play">
-          <PlayCircleOutlined />
-        </div>
-        {product.duration > 0 && (
-          <span className="xx-product-duration">{formatTime(product.duration)}</span>
-        )}
-      </div>
-
-      {/* 信息区 */}
-      <div className="xx-product-info">
-        <h4 className="xx-product-title" title={product.name}>
-          {product.name}
-        </h4>
-        <div className="xx-product-meta">
-          <span className={`xx-product-status ${st.className}`}>{st.text}</span>
-          <span className="xx-product-date">{product.date}</span>
-        </div>
-        {product.duplicateRate > 0 && (
-          <span className={`xx-product-dup-rate ${dupClass}`}>
-            查重率：{product.duplicateRate.toFixed(1)}%
-          </span>
-        )}
-      </div>
-
-      {/* 操作按钮 */}
-      <div className="xx-product-actions" onClick={(e) => e.stopPropagation()}>
-        <button
-          className="xx-product-action-btn"
-          onClick={() => onDownload(product)}
-          disabled={product.status !== "completed"}
-          title="下载"
-        >
-          <DownloadOutlined /> 下载
-        </button>
-        <button
-          className="xx-product-action-btn"
-          onClick={() => onShare(product)}
-          disabled={product.status !== "completed"}
-          title="分享"
-        >
-          <ShareAltOutlined /> 分享
-        </button>
-        {product.isPublished ? (
-          <span className="xx-product-action-btn success" style={{ cursor: "default" }}>
-            ✅ 已发布
-          </span>
-        ) : (
-          <button
-            className="xx-product-action-btn primary"
-            onClick={() => onPublish(product)}
-            disabled={product.status !== "completed"}
-            title="发布"
-          >
-            <CloudUploadOutlined /> 发布
-          </button>
-        )}
-      </div>
-
-      {/* 删除按钮（不在批量模式下显示） */}
-      {!batchMode && (
-        <div style={{ padding: "0 14px 14px" }} onClick={(e) => e.stopPropagation()}>
-          <Popconfirm
-            title={`确定删除"${product.name}"？`}
-            onConfirm={() => onDelete(product.id)}
-            okText="删除"
-            cancelText="取消"
-          >
-            <button
-              className="xx-product-action-btn"
-              style={{ width: "100%", color: "#dc2626" }}
-              title="删除"
-            >
-              <DeleteOutlined /> 删除
-            </button>
-          </Popconfirm>
-        </div>
-      )}
-    </div>
-  )
-}

apps/web/src/pages/products/components/VideoPlayer.tsx

@@ -1,199 +0,0 @@
-import React, { useRef, useState, useEffect, useCallback } from "react"
-import {
-  VideoCameraOutlined,
-  PlayCircleOutlined,
-  PauseCircleOutlined,
-  CloseOutlined,
-  DownloadOutlined,
-  ShareAltOutlined,
-  EyeOutlined,
-} from "@ant-design/icons"
-import { Button } from "@/components/ui"
-import type { ProductItem } from "../types"
-import { formatTime, formatSize } from "../utils"
-
-interface VideoPlayerProps {
-  product: ProductItem
-  onClose: () => void
-  onDownload: (product: ProductItem) => void
-  onShare: (product: ProductItem) => void
-  onViewDetail: (product: ProductItem) => void
-}
-
-export const VideoPlayer: React.FC<VideoPlayerProps> = ({
-  product,
-  onClose,
-  onDownload,
-  onShare,
-  onViewDetail,
-}) => {
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const progressRef = useRef<HTMLDivElement>(null)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [currentTime, setCurrentTime] = useState(0)
-  const [duration, setDuration] = useState(product.duration)
-
-  const hasVideo = !!product.videoUrl
-
-  /** 播放/暂停 */
-  const handlePlayPause = useCallback(() => {
-    const video = videoRef.current
-    if (!video) return
-    if (isPlaying) {
-      video.pause()
-    } else {
-      video.play().catch(() => {})
-    }
-    setIsPlaying(!isPlaying)
-  }, [isPlaying])
-
-  /** 视频事件监听 */
-  useEffect(() => {
-    const video = videoRef.current
-    if (!video) return
-    const onTime = () => setCurrentTime(video.currentTime)
-    const onDur = () => setDuration(video.duration || product.duration)
-    const onEnd = () => setIsPlaying(false)
-    video.addEventListener("timeupdate", onTime)
-    video.addEventListener("loadedmetadata", onDur)
-    video.addEventListener("ended", onEnd)
-    return () => {
-      video.removeEventListener("timeupdate", onTime)
-      video.removeEventListener("loadedmetadata", onDur)
-      video.removeEventListener("ended", onEnd)
-    }
-  }, [product.duration])
-
-  /** 进度条点击 */
-  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!progressRef.current) return
-    const rect = progressRef.current.getBoundingClientRect()
-    const percent = (e.clientX - rect.left) / rect.width
-    const newTime = percent * duration
-    setCurrentTime(newTime)
-    if (videoRef.current) videoRef.current.currentTime = newTime
-  }
-
-  /** ESC 关闭 */
-  useEffect(() => {
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose()
-    }
-    window.addEventListener("keydown", handleKey)
-    return () => window.removeEventListener("keydown", handleKey)
-  }, [onClose])
-
-  const progress = duration > 0 ? (currentTime / duration) * 100 : 0
-
-  return (
-    <div className="xx-player-overlay" onClick={onClose}>
-      <div className="xx-player-container" onClick={(e) => e.stopPropagation()}>
-        {/* 视频区域 */}
-        <div className="xx-player-video-wrap">
-          {hasVideo ? (
-            <video
-              ref={videoRef}
-              src={product.videoUrl}
-              style={{ width: "100%", height: "100%", objectFit: "contain" }}
-            />
-          ) : (
-            /* 无视频 URL 时用渐变占位 */
-            <div
-              style={{
-                width: "100%",
-                height: "100%",
-                background: product.gradient,
-                display: "grid",
-                placeItems: "center",
-                color: "rgba(255,255,255,0.3)",
-                fontSize: "64px",
-              }}
-            >
-              <VideoCameraOutlined />
-            </div>
-          )}
-
-          {/* 播放/暂停按钮 */}
-          <button className="xx-player-play-btn" onClick={handlePlayPause}>
-            {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
-          </button>
-
-          {/* 关闭按钮 */}
-          <button className="xx-player-close" onClick={onClose}>
-            <CloseOutlined />
-          </button>
-
-          {/* 进度条 */}
-          <div className="xx-player-progress-wrap">
-            <div ref={progressRef} className="xx-player-progress" onClick={handleProgressClick}>
-              <div className="xx-player-progress-bar" style={{ width: `${progress}%` }} />
-            </div>
-            <div className="xx-player-time">
-              <span>{formatTime(currentTime)}</span>
-              <span>{formatTime(duration)}</span>
-            </div>
-          </div>
-        </div>
-
-        {/* 信息区 */}
-        <div className="xx-player-info">
-          <h3 className="xx-player-title">{product.name}</h3>
-          <div className="xx-player-details">
-            <div className="xx-player-detail-item">
-              <span className="xx-player-detail-label">分辨率：</span>
-              <span className="xx-player-detail-value">{product.resolution}</span>
-            </div>
-            <div className="xx-player-detail-item">
-              <span className="xx-player-detail-label">时长：</span>
-              <span className="xx-player-detail-value">{formatTime(product.duration)}</span>
-            </div>
-            <div className="xx-player-detail-item">
-              <span className="xx-player-detail-label">文件大小：</span>
-              <span className="xx-player-detail-value">{formatSize(product.fileSize)}</span>
-            </div>
-            <div className="xx-player-detail-item">
-              <span className="xx-player-detail-label">查重率：</span>
-              <span className="xx-player-detail-value">
-                {product.duplicateRate > 0 ? `${product.duplicateRate.toFixed(1)}%` : "-"}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        {/* 底部操作 */}
-        <div className="xx-player-footer">
-          <Button
-            buttonType="ghost"
-            buttonSize="sm"
-            icon={<DownloadOutlined />}
-            onClick={() => onDownload(product)}
-            disabled={product.status !== "completed"}
-          >
-            下载视频
-          </Button>
-          <Button
-            buttonType="ghost"
-            buttonSize="sm"
-            icon={<ShareAltOutlined />}
-            onClick={() => onShare(product)}
-            disabled={product.status !== "completed"}
-          >
-            分享
-          </Button>
-          <Button
-            buttonType="ghost"
-            buttonSize="sm"
-            icon={<EyeOutlined />}
-            onClick={() => onViewDetail(product)}
-          >
-            查看详情
-          </Button>
-          <div style={{ flex: 1 }} />
-          <Button buttonType="primary" buttonSize="sm" onClick={onClose}>
-            关闭
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,34 +0,0 @@
-import type { ReviewStatus } from "@/api/products"
-import type { ProductStatus } from "./types"
-
-/** 渐变色列表（按 id hash 选取） */
-export const GRADIENTS = [
-  "linear-gradient(135deg, #1e1b4b 0%, #4f46e5 50%, #818cf8 100%)",
-  "linear-gradient(135deg, #831843 0%, #db2777 50%, #f472b6 100%)",
-  "linear-gradient(135deg, #064e3b 0%, #059669 50%, #34d399 100%)",
-  "linear-gradient(135deg, #78350f 0%, #d97706 50%, #fbbf24 100%)",
-  "linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #60a5fa 100%)",
-  "linear-gradient(135deg, #581c87 0%, #9333ea 50%, #c084fc 100%)",
-  "linear-gradient(135deg, #7f1d1d 0%, #dc2626 50%, #f87171 100%)",
-  "linear-gradient(135deg, #134e4a 0%, #0d9488 50%, #5eead4 100%)",
-  "linear-gradient(135deg, #1e1b4b 0%, #6366f1 50%, #a5b4fc 100%)",
-  "linear-gradient(135deg, #3b0764 0%, #7c3aed 50%, #a78bfa 100%)",
-  "linear-gradient(135deg, #052e16 0%, #16a34a 50%, #86efac 100%)",
-  "linear-gradient(135deg, #450a0e 0%, #e11d48 50%, #fb7185 100%)",
-]
-
-export const statusConfig: Record<ProductStatus, { text: string; className: string }> = {
-  completed: { text: "已完成", className: "completed" },
-  processing: { text: "处理中", className: "processing" },
-  review: { text: "待复核", className: "review" },
-  failed: { text: "失败", className: "failed" },
-}
-
-export const reviewStatusConfig: Record<ReviewStatus, { text: string; className: string }> = {
-  pending_review: { text: "待复核", className: "review-pending" },
-  approved: { text: "已通过", className: "review-approved" },
-  rejected: { text: "需修改", className: "review-rejected" },
-}
-
-/** 复核状态循环顺序 */
-export const REVIEW_STATUS_CYCLE: ReviewStatus[] = ["pending_review", "approved", "rejected"]

apps/web/src/pages/products/hooks/useProductActions.ts

@@ -1,187 +0,0 @@
-import { useState } from "react"
-import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { useNavigate } from "react-router-dom"
-import { message } from "antd"
-import {
-  deleteProduct,
-  getProductDownloadUrl,
-  updateReviewStatus,
-  batchDownload,
-  getBatchDownloadStatus,
-  type ReviewStatus,
-} from "@/api/products"
-import type { ProductItem } from "../types"
-import { getNextReviewStatus } from "../utils"
-
-interface UseProductActionsOptions {
-  selectedIds: Set<string>
-  clearSelection: () => void
-  products: ProductItem[]
-  setPlayingProduct: (product: ProductItem | null) => void
-}
-
-export const useProductActions = ({
-  selectedIds,
-  clearSelection,
-  products,
-  setPlayingProduct,
-}: UseProductActionsOptions) => {
-  const queryClient = useQueryClient()
-  const navigate = useNavigate()
-
-  /* ── 删除 mutation ── */
-  const deleteMutation = useMutation({
-    mutationFn: deleteProduct,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["products"] })
-      message.success("已删除")
-    },
-    onError: () => {
-      message.error("删除失败")
-    },
-  })
-
-  /* ── 复核状态 mutation ── */
-  const reviewMutation = useMutation({
-    mutationFn: ({ id, status }: { id: string; status: ReviewStatus }) =>
-      updateReviewStatus(id, status),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["products"] })
-      message.success("复核状态已更新")
-    },
-    onError: () => {
-      message.error("更新复核状态失败")
-    },
-  })
-
-  /* 下载 — 调用真实 API 获取下载链接 */
-  const handleDownload = async (product: ProductItem) => {
-    if (product.status !== "completed") return
-    try {
-      const { url } = await getProductDownloadUrl(product.id)
-      const a = document.createElement("a")
-      a.href = url
-      a.download = ""
-      a.click()
-      message.success(`正在下载"${product.name}"`)
-    } catch {
-      message.error("获取下载链接失败")
-    }
-  }
-
-  /* 分享 */
-  const handleShare = (product: ProductItem) => {
-    if (product.status !== "completed") return
-    const link = `${window.location.origin}/share/${product.id}`
-    navigator.clipboard?.writeText(link).then(
-      () => message.success(`分享链接已复制：${link}`),
-      () => message.success(`分享链接：${link}（请手动复制）`),
-    )
-  }
-
-  /* 查看详情 — 跳转到产品详情页 */
-  const handleViewDetail = (product: ProductItem) => {
-    setPlayingProduct(null)
-    navigate(`/app/products/${product.id}`)
-  }
-
-  /* 删除 */
-  const handleDelete = (id: string) => {
-    deleteMutation.mutate(id)
-  }
-
-  /* 发布 — TODO: 后端发布 API 待实现 */
-  const handlePublish = (_product: ProductItem) => {
-    message.info("发布功能待后端 API 补齐")
-  }
-
-  /* 切换复核状态 */
-  const handleReviewStatusChange = (id: string) => {
-    const current = products.find((p) => p.id === id)?.reviewStatus
-    const nextStatus = getNextReviewStatus(current)
-    reviewMutation.mutate({ id, status: nextStatus })
-  }
-
-  /* 批量下载 */
-  const [batchDownloading, setBatchDownloading] = useState(false)
-
-  const handleBatchDownload = async () => {
-    const ids = Array.from(selectedIds)
-    if (ids.length === 0) return
-    setBatchDownloading(true)
-    try {
-      const { job_id } = await batchDownload(ids)
-      message.info(`批量下载任务已创建，正在打包 ${ids.length} 个视频...`)
-
-      let attempts = 0
-      const maxAttempts = 60
-      const poll = async (): Promise<void> => {
-        if (attempts >= maxAttempts) {
-          message.warning("打包超时，请稍后在消息中心查看")
-          return
-        }
-        attempts++
-        await new Promise((r) => setTimeout(r, 2000))
-        const status = await getBatchDownloadStatus(job_id)
-        if (status.status === "completed" && status.download_url) {
-          const a = document.createElement("a")
-          a.href = status.download_url
-          a.download = ""
-          a.click()
-          message.success(`已打包下载 ${ids.length} 个视频`)
-          clearSelection()
-        } else if (status.status === "failed") {
-          message.error("批量下载失败，请重试")
-        } else {
-          await poll()
-        }
-      }
-      await poll()
-    } catch {
-      message.error("发起批量下载失败")
-    } finally {
-      setBatchDownloading(false)
-    }
-  }
-
-  /* 批量删除 */
-  const handleBatchDelete = async () => {
-    const ids = Array.from(selectedIds)
-    let successCount = 0
-    for (const id of ids) {
-      try {
-        await deleteProduct(id)
-        successCount++
-      } catch {
-        // 忽略单个失败
-      }
-    }
-    queryClient.invalidateQueries({ queryKey: ["products"] })
-    clearSelection()
-    message.success(`已批量删除 ${successCount}/${ids.length} 个视频`)
-  }
-
-  /* 批量发布 */
-  const handleBatchPublish = () => {
-    message.info("批量发布功能待后端 API 补齐")
-    clearSelection()
-  }
-
-  return {
-    // 单个操作
-    handleDownload,
-    handleShare,
-    handleViewDetail,
-    handleDelete,
-    handlePublish,
-    handleReviewStatusChange,
-    // 批量操作
-    handleBatchDownload,
-    handleBatchDelete,
-    handleBatchPublish,
-    batchDownloading,
-    // mutation 状态
-    isDeleting: deleteMutation.isPending,
-    isUpdatingReview: reviewMutation.isPending,
-  }
-}

apps/web/src/pages/products/hooks/useProductList.ts

@@ -1,202 +0,0 @@
-import { useMemo, useState } from "react"
-import { useQuery } from "@tanstack/react-query"
-import { getProducts, type ProductItem as ApiProductItem } from "@/api/products"
-import type { ProductItem } from "../types"
-import { mapApiProduct } from "../utils"
-
-/** 筛选选项类型 */
-export interface Filters {
-  searchText: string
-  filterStatus: string
-  filterTime: string
-  filterDuration: string
-  filterProject: string
-  filterReviewStatus: string
-}
-
-/** 项目选项列表 */
-const getProjectOptions = (products: ProductItem[]) =>
-  Array.from(
-    new Map(
-      products
-        .filter((p) => p.projectId && p.projectName)
-        .map((p) => [p.projectId!, p.projectName!] as const),
-    ),
-  ).map(([id, name]) => ({
-    value: id as string,
-    label: name as string,
-  }))
-
-export const useProductList = () => {
-  /* ── 获取成品列表 ── */
-  const {
-    data: apiProducts = [],
-    isLoading,
-    isError,
-    error,
-    refetch,
-  } = useQuery<ApiProductItem[], Error>({
-    queryKey: ["products"],
-    queryFn: () => getProducts(),
-    staleTime: 30_000,
-  })
-
-  // 映射为前端类型，按创建时间倒序排列，防御非数组返回
-  const products = useMemo(() => {
-    const list = (Array.isArray(apiProducts) ? apiProducts : []).map(mapApiProduct)
-    // 按创建时间倒序（最新的在最前面），无时间的排最后
-    return list.sort((a, b) => {
-      if (!a.date || a.date === "—") return 1
-      if (!b.date || b.date === "—") return -1
-      return new Date(b.date).getTime() - new Date(a.date).getTime()
-    })
-  }, [apiProducts])
-
-  /* 筛选 */
-  const [searchText, setSearchText] = useState("")
-  const [filterStatus, setFilterStatus] = useState<string>("all")
-  const [filterTime, setFilterTime] = useState<string>("all")
-  const [filterDuration, setFilterDuration] = useState<string>("all")
-  const [filterProject, setFilterProject] = useState<string>("all")
-  const [filterReviewStatus, setFilterReviewStatus] = useState<string>("all")
-
-  /* 批量选择 */
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
-
-  /* 派生数据 */
-  const batchMode = selectedIds.size > 0
-
-  const filteredProducts = useMemo(() => {
-    let list = products
-
-    /* 状态筛选 */
-    if (filterStatus !== "all") {
-      list = list.filter((p) => p.status === filterStatus)
-    }
-
-    /* 时间筛选 */
-    if (filterTime !== "all") {
-      const now = new Date()
-      list = list.filter((p) => {
-        const d = new Date(p.date)
-        const diff = (now.getTime() - d.getTime()) / (1000 * 60 * 60 * 24)
-        switch (filterTime) {
-          case "today":
-            return diff < 1
-          case "week":
-            return diff <= 7
-          case "month":
-            return diff <= 30
-          default:
-            return true
-        }
-      })
-    }
-
-    /* 时长筛选 */
-    if (filterDuration !== "all") {
-      list = list.filter((p) => {
-        switch (filterDuration) {
-          case "short":
-            return p.duration > 0 && p.duration <= 60
-          case "medium":
-            return p.duration > 60 && p.duration <= 180
-          case "long":
-            return p.duration > 180
-          default:
-            return true
-        }
-      })
-    }
-
-    /* 项目筛选 */
-    if (filterProject !== "all") {
-      list = list.filter((p) => p.projectId === filterProject)
-    }
-
-    /* 复核状态筛选 */
-    if (filterReviewStatus !== "all") {
-      if (filterReviewStatus === "none") {
-        list = list.filter((p) => !p.reviewStatus)
-      } else {
-        list = list.filter((p) => p.reviewStatus === filterReviewStatus)
-      }
-    }
-
-    /* 搜索 */
-    if (searchText.trim()) {
-      const q = searchText.trim().toLowerCase()
-      list = list.filter((p) => p.name.toLowerCase().includes(q))
-    }
-
-    return list
-  }, [
-    products,
-    filterStatus,
-    filterTime,
-    filterDuration,
-    filterProject,
-    filterReviewStatus,
-    searchText,
-  ])
-
-  const projectOptions = useMemo(() => getProjectOptions(products), [products])
-
-  /* 全选 */
-  const allSelected =
-    filteredProducts.length > 0 && filteredProducts.every((p) => selectedIds.has(p.id))
-
-  const handleSelectAll = () => {
-    if (allSelected) {
-      setSelectedIds(new Set())
-    } else {
-      setSelectedIds(new Set(filteredProducts.map((p) => p.id)))
-    }
-  }
-
-  /* 切换单个选择 */
-  const handleToggleSelect = (id: string) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) {
-        next.delete(id)
-      } else {
-        next.add(id)
-      }
-      return next
-    })
-  }
-
-  const clearSelection = () => setSelectedIds(new Set())
-
-  return {
-    // 数据
-    products,
-    filteredProducts,
-    isLoading,
-    isError,
-    error,
-    refetch,
-    // 筛选
-    searchText,
-    setSearchText,
-    filterStatus,
-    setFilterStatus,
-    filterTime,
-    setFilterTime,
-    filterDuration,
-    setFilterDuration,
-    filterProject,
-    setFilterProject,
-    filterReviewStatus,
-    setFilterReviewStatus,
-    projectOptions,
-    // 批量选择
-    selectedIds,
-    batchMode,
-    allSelected,
-    handleSelectAll,
-    handleToggleSelect,
-    clearSelection,
-  }
-}

apps/web/src/pages/products/types.ts

@@ -1,24 +0,0 @@
-import type { ReviewStatus } from "@/api/products"
-
-export type ProductStatus = "completed" | "processing" | "review" | "failed"
-
-export interface ProductItem {
-  id: string
-  name: string
-  status: ProductStatus
-  duration: number // 秒
-  date: string
-  gradient: string
-  duplicateRate: number // 查重率百分比
-  isPublished: boolean
-  resolution: string
-  fileSize: number // MB
-  videoUrl?: string
-  thumbnailUrl?: string
-  /** 复核状态 */
-  reviewStatus?: ReviewStatus
-  /** 所属项目 ID */
-  projectId?: string
-  /** 所属项目名称 */
-  projectName?: string
-}

apps/web/src/pages/products/utils/index.ts

@@ -1,75 +0,0 @@
-import type { ProductItem as ApiProductItem } from "@/api/products"
-import type { ProductItem, ProductStatus } from "../types"
-import { GRADIENTS, REVIEW_STATUS_CYCLE } from "../constants"
-import type { ReviewStatus } from "@/api/products"
-
-/** 格式化时间 mm:ss */
-export const formatTime = (seconds: number): string => {
-  const mins = Math.floor(seconds / 60)
-  const secs = Math.floor(seconds % 60)
-  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
-}
-
-/** 格式化文件大小 */
-export const formatSize = (mb: number): string => {
-  if (mb <= 0) return "-"
-  if (mb < 1) return `${(mb * 1024).toFixed(0)} KB`
-  return `${mb.toFixed(1)} MB`
-}
-
-/** 格式化日期时间（MM-DD HH:mm） */
-export const formatDateTime = (isoString: string): string => {
-  const d = new Date(isoString)
-  const month = (d.getMonth() + 1).toString().padStart(2, "0")
-  const day = d.getDate().toString().padStart(2, "0")
-  const hour = d.getHours().toString().padStart(2, "0")
-  const minute = d.getMinutes().toString().padStart(2, "0")
-  return `${month}-${day} ${hour}:${minute}`
-}
-
-/** 将后端 status 映射为前端 ProductStatus */
-export const normalizeStatus = (s: string): ProductStatus => {
-  const map: Record<string, ProductStatus> = {
-    completed: "completed",
-    succeeded: "completed",
-    processing: "processing",
-    running: "processing",
-    review: "review",
-    failed: "failed",
-    error: "failed",
-  }
-  return map[s] ?? "processing"
-}
-
-/** 根据 id 生成稳定的渐变色 */
-export const gradientForId = (id: string): string => {
-  let hash = 0
-  for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) | 0
-  return GRADIENTS[Math.abs(hash) % GRADIENTS.length]
-}
-
-/** 将后端 ProductItem 映射为前端 ProductItem */
-export const mapApiProduct = (item: ApiProductItem): ProductItem => ({
-  id: item.id,
-  name: item.title,
-  status: normalizeStatus(item.status),
-  duration: item.duration_seconds ?? 0,
-  date: item.created_at ? formatDateTime(item.created_at) : "—",
-  gradient: gradientForId(item.id),
-  duplicateRate: item.duplicate_rate ?? 0,
-  isPublished: false, // TODO: 后端发布状态字段待补齐
-  resolution: item.resolution ?? "1080×1920",
-  fileSize: item.file_size ? +(item.file_size / (1024 * 1024)).toFixed(1) : 0,
-  videoUrl: item.video_url,
-  thumbnailUrl: item.thumbnail_url,
-  reviewStatus: item.review_status,
-  projectId: item.project_id,
-  projectName: item.project_name,
-})
-
-/** 获取下一个复核状态 */
-export const getNextReviewStatus = (current?: ReviewStatus): ReviewStatus => {
-  if (!current) return "approved"
-  const idx = REVIEW_STATUS_CYCLE.indexOf(current)
-  return REVIEW_STATUS_CYCLE[(idx + 1) % REVIEW_STATUS_CYCLE.length]
-}

apps/web/src/pages/voice-materials/components/MaterialForm.tsx

@@ -1,186 +0,0 @@
-import React, { useState, useRef } from "react"
-import { UploadOutlined, SoundOutlined, CloseOutlined } from "@ant-design/icons"
-import { Button, Input } from "@/components/ui"
-import { type TagItem } from "@/api/tags"
-import { type VoiceGender, type VoiceMaterial } from "../types"
-import { GENDER_OPTIONS } from "../constants"
-import { genderClass, formatFileSize } from "../utils/format"
-import TagSelector from "./TagSelector"
-
-export interface MaterialFormProps {
-  initial?: VoiceMaterial
-  onSubmit: (data: Omit<VoiceMaterial, "id" | "createdAt"> & { file?: File }) => void
-  onCancel: () => void
-  loading?: boolean
-  uploadProgress?: number | null
-  tags?: TagItem[]
-  tagMap?: Map<string, TagItem>
-  onCreateTag?: (name: string) => Promise<TagItem>
-}
-
-const MaterialForm: React.FC<MaterialFormProps> = ({
-  initial,
-  onSubmit,
-  onCancel,
-  loading,
-  uploadProgress,
-  tags = [],
-  tagMap = new Map(),
-  onCreateTag,
-}) => {
-  const [name, setName] = useState(initial?.name ?? "")
-  const [description, setDescription] = useState(initial?.description ?? "")
-  const [gender, setGender] = useState<VoiceGender>(initial?.gender ?? "female")
-  const [selectedTagIds, setSelectedTagIds] = useState<string[]>(initial?.tagIds ?? [])
-  const [file, setFile] = useState<File | undefined>(undefined)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  const handleSubmit = () => {
-    if (!name.trim()) return
-    if (!initial && !file) return
-    onSubmit({
-      name: name.trim(),
-      description: description.trim(),
-      gender,
-      tagIds: selectedTagIds,
-      fileName: file?.name ?? initial?.fileName ?? "",
-      fileSize: file?.size ?? initial?.fileSize ?? 0,
-      duration: initial?.duration ?? 0,
-      mimeType: file?.type ?? initial?.mimeType ?? "audio/mpeg",
-      file,
-    })
-  }
-
-  return (
-    <div className="vmat-form">
-      {/* 音频文件上传（编辑模式不显示） */}
-      {!initial && (
-        <div className="vmat-form-field">
-          <label className="vmat-form-label">音频文件 *</label>
-          <div
-            className="vmat-upload-zone"
-            onClick={() => fileInputRef.current?.click()}
-            onDragOver={(e) => e.preventDefault()}
-            onDrop={(e) => {
-              e.preventDefault()
-              const f = e.dataTransfer.files[0]
-              if (f?.type.startsWith("audio/")) setFile(f)
-            }}
-          >
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept="audio/*"
-              style={{ display: "none" }}
-              onChange={(e) => {
-                const f = e.target.files?.[0]
-                if (f) setFile(f)
-              }}
-            />
-            {file ? (
-              <div className="vmat-upload-selected">
-                <SoundOutlined className="vmat-upload-icon" />
-                <span className="vmat-upload-filename">{file.name}</span>
-                <span className="vmat-upload-filesize">{formatFileSize(file.size)}</span>
-                <button
-                  type="button"
-                  className="vmat-upload-clear"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    setFile(undefined)
-                  }}
-                >
-                  <CloseOutlined />
-                </button>
-              </div>
-            ) : (
-              <div className="vmat-upload-placeholder">
-                <UploadOutlined className="vmat-upload-icon" />
-                <p>点击或拖拽音频文件到此处</p>
-                <span>支持 MP3、WAV、AAC、FLAC 等格式</span>
-              </div>
-            )}
-          </div>
-          {/* 上传进度条 */}
-          {uploadProgress !== null && uploadProgress !== undefined && (
-            <div className="vmat-upload-progress">
-              <div className="vmat-upload-progress-bar" style={{ width: `${uploadProgress}%` }} />
-              <span className="vmat-upload-progress-text">{uploadProgress}%</span>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* 名称 */}
-      <div className="vmat-form-field">
-        <label className="vmat-form-label">名称 *</label>
-        <Input
-          placeholder="输入配音素材名称"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          maxLength={50}
-        />
-      </div>
-
-      {/* 音色描述 */}
-      <div className="vmat-form-field">
-        <label className="vmat-form-label">音色描述</label>
-        <Input.TextArea
-          placeholder="描述音色特点，如：适合产品宣传的男声配音..."
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          rows={3}
-          maxLength={200}
-        />
-      </div>
-
-      {/* 性别 */}
-      <div className="vmat-form-field">
-        <label className="vmat-form-label">性别</label>
-        <div className="vmat-gender-group">
-          {GENDER_OPTIONS.map((opt) => (
-            <button
-              key={opt.value}
-              type="button"
-              className={`vmat-gender-btn${gender === opt.value ? " active" : ""} ${genderClass(opt.value)}`}
-              onClick={() => setGender(opt.value)}
-            >
-              {opt.icon}
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* 风格标签 */}
-      <div className="vmat-form-field">
-        <label className="vmat-form-label">风格标签</label>
-        <TagSelector
-          value={selectedTagIds}
-          onChange={setSelectedTagIds}
-          tags={tags}
-          tagMap={tagMap}
-          onCreateTag={onCreateTag ?? (async () => ({ id: "", name: "" }))}
-        />
-      </div>
-
-      {/* 操作按钮 */}
-      <div className="vmat-form-actions">
-        <Button buttonType="ghost" buttonSize="md" onClick={onCancel}>
-          取消
-        </Button>
-        <Button
-          buttonType="primary"
-          buttonSize="md"
-          onClick={handleSubmit}
-          loading={loading}
-          disabled={!name.trim() || (!initial && !file)}
-        >
-          {initial ? "保存修改" : "上传"}
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-export default MaterialForm

apps/web/src/pages/voice-materials/components/TagSelector.tsx

@@ -1,163 +0,0 @@
-import React, { useState, useRef, useCallback, useMemo } from "react"
-import { CheckOutlined } from "@ant-design/icons"
-import { Tag } from "@/components/ui"
-import { type TagItem } from "@/api/tags"
-
-export interface TagSelectorProps {
-  /** 已选标签 ID 列表 */
-  value: string[]
-  onChange: (tagIds: string[]) => void
-  /** 所有可用标签（来自 API） */
-  tags: TagItem[]
-  /** 标签 ID → TagItem 映射 */
-  tagMap: Map<string, TagItem>
-  /** 创建新标签，返回带 ID 的 TagItem */
-  onCreateTag: (name: string) => Promise<TagItem>
-  placeholder?: string
-}
-
-const TagSelector: React.FC<TagSelectorProps> = ({
-  value,
-  onChange,
-  tags,
-  tagMap,
-  onCreateTag,
-  placeholder = "输入标签后回车添加",
-}) => {
-  const [inputVal, setInputVal] = useState("")
-  const [showSuggestions, setShowSuggestions] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  /** 按名称查找已有标签（大小写不敏感） */
-  const findTagByName = useCallback(
-    (name: string) => tags.find((t) => t.name.toLowerCase() === name.toLowerCase()),
-    [tags],
-  )
-
-  /** 去重添加标签（按 ID） */
-  const addTagId = useCallback(
-    (tagId: string) => {
-      if (value.includes(tagId)) return
-      onChange([...value, tagId])
-      setInputVal("")
-      setShowSuggestions(false)
-    },
-    [value, onChange],
-  )
-
-  /** 输入自定义标签名：若已存在则直接选，否则创建新标签 */
-  const addTagByName = useCallback(
-    async (name: string) => {
-      const trimmed = name.trim()
-      if (!trimmed) return
-      const existing = findTagByName(trimmed)
-      if (existing) {
-        addTagId(existing.id)
-      } else {
-        try {
-          const created = await onCreateTag(trimmed)
-          addTagId(created.id)
-        } catch {
-          /* 创建失败静默忽略 */
-        }
-      }
-    },
-    [findTagByName, addTagId, onCreateTag],
-  )
-
-  const removeTagId = useCallback(
-    (tagId: string) => {
-      onChange(value.filter((t) => t !== tagId))
-    },
-    [value, onChange],
-  )
-
-  /** 输入补全建议（排除已选） */
-  const suggestions = useMemo(() => {
-    if (!inputVal.trim()) return []
-    const lower = inputVal.toLowerCase()
-    return tags.filter((t) => t.name.toLowerCase().includes(lower) && !value.includes(t.id))
-  }, [inputVal, tags, value])
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      e.preventDefault()
-      if (suggestions.length > 0) {
-        addTagId(suggestions[0].id)
-      } else {
-        addTagByName(inputVal)
-      }
-    } else if (e.key === "Backspace" && !inputVal && value.length > 0) {
-      removeTagId(value[value.length - 1])
-    }
-  }
-
-  return (
-    <div className="vmat-tag-selector-wrapper">
-      <div className="vmat-tag-selector" onClick={() => inputRef.current?.focus()}>
-        {value.map((tagId) => (
-          <Tag key={tagId} variant="info" closable onClose={() => removeTagId(tagId)}>
-            {tagMap.get(tagId)?.name ?? tagId}
-          </Tag>
-        ))}
-        <input
-          ref={inputRef}
-          className="vmat-tag-selector-input"
-          value={inputVal}
-          onChange={(e) => {
-            setInputVal(e.target.value)
-            setShowSuggestions(true)
-          }}
-          onFocus={() => setShowSuggestions(true)}
-          onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
-          onKeyDown={handleKeyDown}
-          placeholder={value.length === 0 ? placeholder : ""}
-        />
-      </div>
-
-      {/* 自动补全下拉 */}
-      {showSuggestions && suggestions.length > 0 && (
-        <div className="vmat-tag-suggestions">
-          {suggestions.slice(0, 6).map((tag) => (
-            <button
-              key={tag.id}
-              type="button"
-              className="vmat-tag-suggestion-item"
-              onMouseDown={(e) => {
-                e.preventDefault()
-                addTagId(tag.id)
-              }}
-            >
-              {tag.name}
-            </button>
-          ))}
-        </div>
-      )}
-
-      {/* 已有标签快捷选择 */}
-      {tags.length > 0 && (
-        <div className="vmat-tag-selector-presets">
-          {tags.map((tag) => {
-            const isSelected = value.includes(tag.id)
-            return (
-              <button
-                key={tag.id}
-                type="button"
-                className={`vmat-tag-selector-preset${isSelected ? " selected" : ""}`}
-                onClick={() => {
-                  if (isSelected) removeTagId(tag.id)
-                  else addTagId(tag.id)
-                }}
-              >
-                {isSelected && <CheckOutlined style={{ fontSize: 10, marginRight: 2 }} />}
-                {tag.name}
-              </button>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default TagSelector

apps/web/src/pages/voice-materials/components/VoiceMaterialCard.tsx

@@ -1,245 +0,0 @@
-import React, { useRef } from "react"
-import {
-  AudioOutlined,
-  PlayCircleOutlined,
-  PauseCircleOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  CheckOutlined,
-  SoundOutlined,
-  MutedOutlined,
-} from "@ant-design/icons"
-import { Tooltip } from "antd"
-import { Tag } from "@/components/ui"
-import { type TagItem } from "@/api/tags"
-import { type VoiceMaterial } from "../types"
-import { MAX_CARD_TAGS, TAG_VARIANTS } from "../constants"
-import {
-  genderClass,
-  genderIcon,
-  genderLabel,
-  formatDuration,
-  formatFileSize,
-  formatDate,
-} from "../utils/format"
-
-export interface VoiceCardProps {
-  material: VoiceMaterial
-  isPlaying: boolean
-  currentTime: number
-  isSelected: boolean
-  batchMode: boolean
-  volume: number
-  tagMap: Map<string, TagItem>
-  onPlay: () => void
-  onPause: () => void
-  onSeek: (time: number) => void
-  onEdit: () => void
-  onDelete: () => void
-  onToggleSelect: (id: string) => void
-  onVolumeChange: (e: React.ChangeEvent<HTMLInputElement>) => void
-  onToggleMute: () => void
-}
-
-const VoiceMaterialCard: React.FC<VoiceCardProps> = ({
-  material,
-  isPlaying,
-  currentTime,
-  isSelected,
-  batchMode,
-  volume,
-  tagMap,
-  onPlay,
-  onPause,
-  onSeek,
-  onEdit,
-  onDelete,
-  onToggleSelect,
-  onVolumeChange,
-  onToggleMute,
-}) => {
-  const progressRef = useRef<HTMLDivElement>(null)
-
-  const handleProgressMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!progressRef.current) return
-    e.preventDefault()
-    const doSeek = (ev: MouseEvent) => {
-      if (!progressRef.current) return
-      const rect = progressRef.current.getBoundingClientRect()
-      const percent = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width))
-      onSeek(percent * material.duration)
-    }
-    doSeek(e.nativeEvent)
-    const handleMove = (ev: MouseEvent) => doSeek(ev)
-    const handleUp = () => {
-      document.removeEventListener("mousemove", handleMove)
-      document.removeEventListener("mouseup", handleUp)
-    }
-    document.addEventListener("mousemove", handleMove)
-    document.addEventListener("mouseup", handleUp)
-  }
-
-  const progress = material.duration > 0 ? (currentTime / material.duration) * 100 : 0
-
-  const handleCardClick = () => {
-    if (batchMode) {
-      onToggleSelect(material.id)
-    }
-  }
-
-  return (
-    <div
-      className={`vmat-card ${genderClass(material.gender)}${isPlaying ? " playing" : ""}${isSelected ? " selected" : ""}${batchMode ? " batch-mode" : ""}`}
-      onClick={handleCardClick}
-    >
-      {/* 批量选择 checkbox */}
-      {(batchMode || isSelected) && (
-        <div
-          className={`vmat-card-checkbox vmat-checkbox${isSelected ? " checked" : ""}`}
-          onClick={(e) => {
-            e.stopPropagation()
-            onToggleSelect(material.id)
-          }}
-        >
-          {isSelected && <CheckOutlined />}
-        </div>
-      )}
-
-      {/* 操作按钮 */}
-      <div className="vmat-card-actions">
-        <button
-          type="button"
-          className="vmat-card-action-btn"
-          onClick={(e) => {
-            e.stopPropagation()
-            onEdit()
-          }}
-          title="编辑"
-        >
-          <EditOutlined />
-        </button>
-        <button
-          type="button"
-          className="vmat-card-action-btn vmat-card-action-btn--danger"
-          onClick={(e) => {
-            e.stopPropagation()
-            onDelete()
-          }}
-          title="删除"
-        >
-          <DeleteOutlined />
-        </button>
-      </div>
-
-      {/* 头部：图标 + 名称 + 性别 */}
-      <div className="vmat-card-header">
-        <div className="vmat-card-avatar">
-          <AudioOutlined />
-        </div>
-        <div className="vmat-card-title-area">
-          <h4 className="vmat-card-name" title={material.name}>
-            {material.name}
-          </h4>
-          <span className={`vmat-card-gender ${genderClass(material.gender)}`}>
-            {genderIcon(material.gender)}
-            {genderLabel(material.gender)}
-          </span>
-        </div>
-      </div>
-
-      {/* 描述 */}
-      {material.description && <p className="vmat-card-desc">{material.description}</p>}
-
-      {/* 标签 */}
-      <div className="vmat-card-tags">
-        {material.tagIds.length === 0 ? (
-          <span
-            className="vmat-tag-empty"
-            onClick={(e) => {
-              e.stopPropagation()
-              onEdit()
-            }}
-          >
-            添加标签
-          </span>
-        ) : (
-          <>
-            {material.tagIds.slice(0, MAX_CARD_TAGS).map((tagId, i) => (
-              <Tag key={tagId} variant={TAG_VARIANTS[i % TAG_VARIANTS.length]}>
-                {tagMap.get(tagId)?.name ?? tagId}
-              </Tag>
-            ))}
-            {material.tagIds.length > MAX_CARD_TAGS && (
-              <Tooltip
-                title={material.tagIds
-                  .slice(MAX_CARD_TAGS)
-                  .map((id) => tagMap.get(id)?.name ?? id)
-                  .join("、")}
-              >
-                <Tag className="vmat-tag-overflow">+{material.tagIds.length - MAX_CARD_TAGS}</Tag>
-              </Tooltip>
-            )}
-          </>
-        )}
-      </div>
-
-      {/* 元信息 */}
-      <div className="vmat-card-meta">
-        <span>{formatDuration(material.duration)}</span>
-        <span>{formatFileSize(material.fileSize)}</span>
-        <span>{formatDate(material.createdAt)}</span>
-      </div>
-
-      {/* 播放控制 */}
-      <div className="vmat-card-player">
-        <button
-          type="button"
-          className="vmat-play-btn"
-          onClick={(e) => {
-            e.stopPropagation()
-            isPlaying ? onPause() : onPlay()
-          }}
-          disabled={!material.fileUrl}
-        >
-          {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
-        </button>
-        <div ref={progressRef} className="vmat-progress" onMouseDown={handleProgressMouseDown}>
-          <div className="vmat-progress-bar" style={{ width: `${progress}%` }} />
-          {isPlaying && <div className="vmat-progress-thumb" style={{ left: `${progress}%` }} />}
-        </div>
-        <span className="vmat-time">
-          {isPlaying ? formatDuration(currentTime) : formatDuration(material.duration)}
-        </span>
-        {/* 音量控制 */}
-        <div className="vmat-volume">
-          <button
-            type="button"
-            className="vmat-volume-btn"
-            onClick={(e) => {
-              e.stopPropagation()
-              onToggleMute()
-            }}
-            title={volume === 0 ? "取消静音" : "静音"}
-          >
-            {volume === 0 ? <MutedOutlined /> : <SoundOutlined />}
-          </button>
-          <input
-            type="range"
-            className="vmat-volume-slider"
-            min={0}
-            max={1}
-            step={0.05}
-            value={volume}
-            onChange={(e) => {
-              e.stopPropagation()
-              onVolumeChange(e)
-            }}
-            onClick={(e) => e.stopPropagation()}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default VoiceMaterialCard

apps/web/src/pages/voice-materials/components/VoiceMaterialRow.tsx

@@ -1,186 +0,0 @@
-import React, { useRef } from "react"
-import {
-  PlayCircleOutlined,
-  PauseCircleOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  CheckOutlined,
-} from "@ant-design/icons"
-import { Tooltip } from "antd"
-import { Tag } from "@/components/ui"
-import { type TagItem } from "@/api/tags"
-import { type VoiceMaterial } from "../types"
-import { MAX_ROW_TAGS, TAG_VARIANTS } from "../constants"
-import {
-  genderClass,
-  genderIcon,
-  genderLabel,
-  formatDuration,
-  formatFileSize,
-} from "../utils/format"
-
-export interface VoiceRowProps {
-  material: VoiceMaterial
-  isPlaying: boolean
-  currentTime: number
-  isSelected: boolean
-  batchMode: boolean
-  tagMap: Map<string, TagItem>
-  onPlay: () => void
-  onPause: () => void
-  onSeek: (time: number) => void
-  onEdit: () => void
-  onDelete: () => void
-  onToggleSelect: (id: string) => void
-}
-
-const VoiceMaterialRow: React.FC<VoiceRowProps> = ({
-  material,
-  isPlaying,
-  currentTime,
-  isSelected,
-  batchMode,
-  tagMap,
-  onPlay,
-  onPause,
-  onSeek,
-  onEdit,
-  onDelete,
-  onToggleSelect,
-}) => {
-  const progressRef = useRef<HTMLDivElement>(null)
-
-  const handleProgressMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!progressRef.current) return
-    e.preventDefault()
-    const doSeek = (ev: MouseEvent) => {
-      if (!progressRef.current) return
-      const rect = progressRef.current.getBoundingClientRect()
-      const percent = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width))
-      onSeek(percent * material.duration)
-    }
-    doSeek(e.nativeEvent)
-    const handleMove = (ev: MouseEvent) => doSeek(ev)
-    const handleUp = () => {
-      document.removeEventListener("mousemove", handleMove)
-      document.removeEventListener("mouseup", handleUp)
-    }
-    document.addEventListener("mousemove", handleMove)
-    document.addEventListener("mouseup", handleUp)
-  }
-
-  const progress = material.duration > 0 ? (currentTime / material.duration) * 100 : 0
-
-  return (
-    <div
-      className={`vmat-row ${genderClass(material.gender)}${isPlaying ? " playing" : ""}${isSelected ? " selected" : ""}${batchMode ? " batch-mode" : ""}`}
-    >
-      {/* 批量选择 checkbox */}
-      {(batchMode || isSelected) && (
-        <div
-          className={`vmat-row-checkbox vmat-checkbox${isSelected ? " checked" : ""}`}
-          onClick={(e) => {
-            e.stopPropagation()
-            onToggleSelect(material.id)
-          }}
-        >
-          {isSelected && <CheckOutlined />}
-        </div>
-      )}
-
-      {/* 播放按钮 */}
-      <button
-        type="button"
-        className="vmat-row-play"
-        onClick={(e) => {
-          e.stopPropagation()
-          isPlaying ? onPause() : onPlay()
-        }}
-        disabled={!material.fileUrl}
-      >
-        {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
-      </button>
-
-      {/* 名称 + 描述 */}
-      <div className="vmat-row-info">
-        <h4 className="vmat-row-name">{material.name}</h4>
-        {material.description && <p className="vmat-row-desc">{material.description}</p>}
-      </div>
-
-      {/* 性别 */}
-      <span className={`vmat-row-gender ${genderClass(material.gender)}`}>
-        {genderIcon(material.gender)}
-        {genderLabel(material.gender)}
-      </span>
-
-      {/* 标签 */}
-      <div className="vmat-row-tags">
-        {material.tagIds.length === 0 ? (
-          <span className="vmat-tag-empty" onClick={() => onEdit()}>
-            添加标签
-          </span>
-        ) : (
-          <>
-            {material.tagIds.slice(0, MAX_ROW_TAGS).map((tagId, i) => (
-              <Tag key={tagId} variant={TAG_VARIANTS[i % TAG_VARIANTS.length]}>
-                {tagMap.get(tagId)?.name ?? tagId}
-              </Tag>
-            ))}
-            {material.tagIds.length > MAX_ROW_TAGS && (
-              <Tooltip
-                title={material.tagIds
-                  .slice(MAX_ROW_TAGS)
-                  .map((id) => tagMap.get(id)?.name ?? id)
-                  .join("、")}
-              >
-                <Tag className="vmat-tag-overflow">+{material.tagIds.length - MAX_ROW_TAGS}</Tag>
-              </Tooltip>
-            )}
-          </>
-        )}
-      </div>
-
-      {/* 进度条（可拖拽） */}
-      <div ref={progressRef} className="vmat-row-progress" onMouseDown={handleProgressMouseDown}>
-        <div className="vmat-row-progress-bar" style={{ width: `${progress}%` }} />
-        {isPlaying && <div className="vmat-progress-thumb" style={{ left: `${progress}%` }} />}
-      </div>
-
-      {/* 时长 */}
-      <span className="vmat-row-time">
-        {isPlaying ? formatDuration(currentTime) : formatDuration(material.duration)}
-      </span>
-
-      {/* 文件大小 */}
-      <span className="vmat-row-size">{formatFileSize(material.fileSize)}</span>
-
-      {/* 操作 */}
-      <div className="vmat-row-actions">
-        <button
-          type="button"
-          className="vmat-row-action-btn"
-          onClick={(e) => {
-            e.stopPropagation()
-            onEdit()
-          }}
-          title="编辑"
-        >
-          <EditOutlined />
-        </button>
-        <button
-          type="button"
-          className="vmat-row-action-btn vmat-row-action-btn--danger"
-          onClick={(e) => {
-            e.stopPropagation()
-            onDelete()
-          }}
-          title="删除"
-        >
-          <DeleteOutlined />
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default VoiceMaterialRow

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

@@ -1,24 +0,0 @@
-/**
- * 配音素材库常量
- */
-/* eslint-disable react-refresh/only-export-components */
-import React from "react"
-import { ManOutlined, WomanOutlined, UserOutlined, SoundOutlined } from "@ant-design/icons"
-import type { VoiceGender } from "./types"
-
-/** 标签溢出限制 */
-export const MAX_CARD_TAGS = 3
-export const MAX_ROW_TAGS = 2
-export const TAG_VARIANTS = ["info", "primary", "success", "warning", "error"] as const
-
-/** 性别选项 */
-export const GENDER_OPTIONS: {
-  value: VoiceGender
-  label: string
-  icon: React.ReactNode
-}[] = [
-  { value: "male", label: "男声", icon: <ManOutlined /> },
-  { value: "female", label: "女声", icon: <WomanOutlined /> },
-  { value: "child", label: "童声", icon: <UserOutlined /> },
-  { value: "neutral", label: "中性", icon: <SoundOutlined /> },
-]

apps/web/src/pages/voice-materials/hooks/useAudioPlayer.ts

@@ -1,142 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from "react"
-import type { VoiceMaterial } from "../types"
-
-/**
- * 音频播放控制 Hook
- * 封装当前播放音频状态、播放/暂停、进度控制、音量控制
- */
-export function useAudioPlayer() {
-  const [playingId, setPlayingId] = useState<string | null>(null)
-  const [currentTime, setCurrentTime] = useState(0)
-  const [volume, setVolume] = useState(0.7)
-  const [pausedMaterial, setPausedMaterial] = useState<VoiceMaterial | null>(null)
-  const audioRef = useRef<HTMLAudioElement | null>(null)
-
-  /** 停止当前播放并重置状态 */
-  const stopPlayback = useCallback(() => {
-    if (audioRef.current) {
-      audioRef.current.pause()
-      audioRef.current = null
-    }
-    setPlayingId(null)
-    setCurrentTime(0)
-    setPausedMaterial(null)
-  }, [])
-
-  /** 从头开始播放指定素材 */
-  const startPlayback = useCallback(
-    (material: VoiceMaterial) => {
-      if (!material.fileUrl) return
-      stopPlayback()
-
-      const audio = new Audio(material.fileUrl)
-      audio.volume = volume
-      audioRef.current = audio
-
-      audio.addEventListener("timeupdate", () => {
-        setCurrentTime(audio.currentTime)
-      })
-
-      audio.addEventListener("ended", () => {
-        setPlayingId(null)
-        setCurrentTime(0)
-        audioRef.current = null
-        setPausedMaterial(null)
-      })
-
-      audio.play().catch(() => {
-        audioRef.current = null
-        setPlayingId(null)
-      })
-
-      setPlayingId(material.id)
-      setCurrentTime(0)
-      setPausedMaterial(null)
-    },
-    [stopPlayback, volume],
-  )
-
-  /** 播放素材（若为暂停状态则恢复） */
-  const handlePlay = useCallback(
-    (material: VoiceMaterial) => {
-      if (playingId === material.id) return
-      // 恢复暂停
-      if (pausedMaterial?.id === material.id && audioRef.current && audioRef.current.paused) {
-        audioRef.current.play().catch(() => {})
-        setPlayingId(material.id)
-        setPausedMaterial(null)
-        return
-      }
-      startPlayback(material)
-    },
-    [playingId, pausedMaterial, startPlayback],
-  )
-
-  /** 暂停播放 */
-  const handlePause = useCallback((material?: VoiceMaterial) => {
-    if (audioRef.current) {
-      audioRef.current.pause()
-    }
-    setPlayingId(null)
-    if (material) setPausedMaterial(material)
-  }, [])
-
-  /** 跳转到指定播放时间 */
-  const handleSeek = useCallback(
-    (material: VoiceMaterial, time: number) => {
-      if (audioRef.current) {
-        audioRef.current.currentTime = time
-        setCurrentTime(time)
-      } else {
-        startPlayback(material)
-        setTimeout(() => {
-          if (audioRef.current) {
-            audioRef.current.currentTime = time
-          }
-        }, 100)
-      }
-    },
-    [startPlayback],
-  )
-
-  /** 音量调节 */
-  const handleVolumeChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const v = parseFloat(e.target.value)
-    setVolume(v)
-    if (audioRef.current) audioRef.current.volume = v
-  }, [])
-
-  /** 静音/取消静音切换 */
-  const toggleMute = useCallback(() => {
-    if (volume > 0) {
-      setVolume(0)
-      if (audioRef.current) audioRef.current.volume = 0
-    } else {
-      setVolume(0.7)
-      if (audioRef.current) audioRef.current.volume = 0.7
-    }
-  }, [volume])
-
-  // 组件卸载时清理 audio
-  useEffect(() => {
-    return () => {
-      if (audioRef.current) {
-        audioRef.current.pause()
-        audioRef.current = null
-      }
-    }
-  }, [])
-
-  return {
-    playingId,
-    currentTime,
-    volume,
-    pausedMaterial,
-    stopPlayback,
-    handlePlay,
-    handlePause,
-    handleSeek,
-    handleVolumeChange,
-    toggleMute,
-  }
-}

apps/web/src/pages/voice-materials/hooks/useBatchOperations.ts

@@ -1,132 +0,0 @@
-import { useState, useCallback, useMemo } from "react"
-import { useQueryClient } from "@tanstack/react-query"
-import { message } from "antd"
-import { deleteAsset } from "@/api/assets"
-import { type TagItem, createTag, tagAsset } from "@/api/tags"
-import type { VoiceMaterial } from "../types"
-
-/**
- * 批量操作 Hook
- * 封装批量选择、批量删除、批量打标签等逻辑
- */
-interface UseBatchOperationsProps {
-  /** 当前筛选后的素材列表 */
-  filtered: VoiceMaterial[]
-  /** 标签 ID → TagItem 映射 */
-  tagMap: Map<string, TagItem>
-  /** 所有可用标签 */
-  tags: TagItem[]
-  /** 当前播放中的素材 ID */
-  playingId: string | null
-  /** 停止播放回调 */
-  stopPlayback: () => void
-}
-
-export function useBatchOperations({
-  filtered,
-  tagMap,
-  tags,
-  playingId,
-  stopPlayback,
-}: UseBatchOperationsProps) {
-  const queryClient = useQueryClient()
-
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
-  const [batchCustomTag, setBatchCustomTag] = useState("")
-
-  const batchMode = useMemo(() => selectedIds.size > 0, [selectedIds])
-  const allSelected = useMemo(
-    () => filtered.length > 0 && filtered.every((m) => selectedIds.has(m.id)),
-    [filtered, selectedIds],
-  )
-
-  /** 切换单个素材的选中状态 */
-  const handleToggleSelect = useCallback((id: string) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }, [])
-
-  /** 全选 / 取消全选 */
-  const handleSelectAll = useCallback(() => {
-    if (allSelected) setSelectedIds(new Set())
-    else setSelectedIds(new Set(filtered.map((m) => m.id)))
-  }, [allSelected, filtered])
-
-  /** 批量删除 */
-  const handleBatchDelete = useCallback(async () => {
-    const ids = Array.from(selectedIds)
-    let successCount = 0
-    for (const id of ids) {
-      try {
-        await deleteAsset(id)
-        successCount++
-      } catch {
-        /* ignore individual failures */
-      }
-      if (playingId === id) stopPlayback()
-    }
-    queryClient.invalidateQueries({ queryKey: ["assets", "voice"] })
-    setSelectedIds(new Set())
-    message.success(`已批量删除 ${successCount}/${ids.length} 个素材`)
-  }, [selectedIds, playingId, stopPlayback, queryClient])
-
-  /** 批量打标签（已有标签） */
-  const handleBatchTag = useCallback(
-    async (tagId: string) => {
-      const ids = Array.from(selectedIds)
-      let successCount = 0
-      for (const id of ids) {
-        try {
-          await tagAsset(id, [tagId])
-          successCount++
-        } catch {
-          /* ignore individual failures */
-        }
-      }
-      queryClient.invalidateQueries({ queryKey: ["assets", "voice"] })
-      setSelectedIds(new Set())
-      const tagName = tagMap.get(tagId)?.name ?? tagId
-      if (successCount === 0) {
-        message.error(`批量打标签失败，请重试`)
-      } else {
-        message.success(`已为 ${successCount}/${ids.length} 个素材添加标签「${tagName}」`)
-      }
-    },
-    [selectedIds, queryClient, tagMap],
-  )
-
-  /** 批量打标签（自定义输入：按名称查找或创建标签，再批量打标） */
-  const handleBatchCustomTag = useCallback(
-    async (name: string) => {
-      // 先查找同名标签（不区分大小写）
-      let existing = tags.find((t) => t.name.toLowerCase() === name.toLowerCase())
-      if (!existing) {
-        try {
-          existing = await createTag(name)
-        } catch {
-          message.error(`创建标签「${name}」失败`)
-          return
-        }
-      }
-      await handleBatchTag(existing.id)
-    },
-    [tags, handleBatchTag],
-  )
-
-  return {
-    selectedIds,
-    batchMode,
-    allSelected,
-    batchCustomTag,
-    setBatchCustomTag,
-    handleToggleSelect,
-    handleSelectAll,
-    handleBatchDelete,
-    handleBatchTag,
-    handleBatchCustomTag,
-  }
-}