feat: 剪辑规划器完整交互 — 7大配置面板 + 时间轴拖拽/缩放/播放头 + 预览播放器 (#284)

apps/web/src/api/editPlans.ts

@@ -4,6 +4,15 @@
  */
 import apiClient from "./client";
 import type { AssetItem } from "./assets";
+import type {
+  WatermarkConfig,
+  IntroOutroConfig,
+  PipConfig,
+  FilterConfig,
+  ChromaKeyConfig,
+  StickerConfig,
+  CoverConfig,
+} from "@/pages/editing-planner/types";
 
 /* ============================================================
  * 后端 API 类型（严格匹配后端 Schema）
@@ -13,6 +22,83 @@ import type { AssetItem } from "./assets";
 export type EditPlanStatus =
   "draft" | "editing" | "rendering" | "completed" | "failed";
 
+/** 标题配置（对齐后端 title_config） */
+export interface TitleConfig {
+  ai_auto_select: boolean;
+  content: string;
+  font_preset: string;
+  font_color: string;
+  font_size: number;
+  position: string;
+}
+
+/** 字幕配置 */
+export interface SubtitleConfig {
+  enabled: boolean;
+  position: string;
+  font: string;
+  color: string;
+  size: number;
+  animation: string;
+}
+
+/** BGM 配置 */
+export interface BgmConfig {
+  enabled: boolean;
+  music_id: string;
+}
+
+/** 片段 TTS 配置 */
+export interface SegmentTtsConfig {
+  mode: string;
+  text: string;
+  voice_id: string;
+  speed: number;
+  pitch: number;
+  volume: number;
+  subtitle_sync: boolean;
+}
+
+/** 片段裁剪配置 */
+export interface SegmentTrimConfig {
+  start_time: number;
+  end_time: number;
+}
+
+/** 片段转场配置 */
+export interface SegmentTransitionConfig {
+  type: string;
+  duration: number;
+}
+
+/** 剪辑计划中的单个片段（config 内部 segments 项） */
+export interface EditPlanSegment {
+  segment_order: number;
+  duration_min: number;
+  duration_max: number;
+  material_type: string;
+  transition?: SegmentTransitionConfig;
+  playback_speed?: number;
+  tts_config?: SegmentTtsConfig;
+  trim_config?: SegmentTrimConfig;
+}
+
+/** 剪辑计划 config 完整类型（对齐后端 config JSON 结构） */
+export interface EditPlanConfig {
+  title_config?: TitleConfig;
+  subtitle_config?: SubtitleConfig;
+  bgm_config?: BgmConfig;
+  estimated_duration?: number;
+  segments?: EditPlanSegment[];
+  watermark_config?: WatermarkConfig;
+  intro_outro_config?: IntroOutroConfig;
+  pip_config?: PipConfig;
+  filter_config?: FilterConfig;
+  green_screen_config?: ChromaKeyConfig;
+  sticker_config?: StickerConfig;
+  cover_config?: CoverConfig;
+}
+
 /** 剪辑计划（后端响应） */
 export interface EditPlan {
   id: string;
@@ -20,7 +106,7 @@ export interface EditPlan {
   name: string;
   status: EditPlanStatus;
   total_duration: number;
-  config: Record<string, unknown>;
+  config: EditPlanConfig;
   created_at: string;
   updated_at: string;
 }
@@ -29,7 +115,7 @@ export interface EditPlan {
 export interface CreateEditPlanRequest {
   template_id: string;
   name: string;
-  config?: Record<string, unknown>;
+  config?: EditPlanConfig;
   total_duration?: number;
   /** 来源剪辑计划 ID（从剪辑计划跳转到一键生成时关联） */
   source_edit_plan_id?: string;
@@ -38,7 +124,7 @@ export interface CreateEditPlanRequest {
 /** 更新剪辑计划请求 */
 export interface UpdateEditPlanRequest {
   name?: string;
-  config?: Record<string, unknown>;
+  config?: EditPlanConfig;
   total_duration?: number;
   status?: EditPlanStatus;
 }
@@ -80,6 +166,24 @@ export interface GenerationStatusResponse {
   clips: ClipStatusItem[];
 }
 
+/** 生成视频详情（对应后端 GeneratedVideoResponse） */
+export interface GeneratedVideo {
+  id: string;
+  project_id?: string;
+  generation_task_id: string;
+  name: string;
+  file_url: string;
+  file_size?: number;
+  duration?: number;
+  thumbnail_url?: string;
+  width?: number;
+  height?: number;
+  fps?: number;
+  status: string;
+  review_status?: string;
+  download_url?: string;
+}
+
 /* ============================================================
  * AI 推荐 & 封面生成（任务 3.09）
  * ============================================================ */
@@ -100,14 +204,14 @@ export interface AIRecommendClipItem {
   transition_effect: string;
   asset_id: string;
   start_time: number;
-  config: Record<string, unknown>;
+  config: EditPlanConfig;
 }
 
 /** AI 推荐响应 */
 export interface AIRecommendResponse {
   plan_id: string;
   clips: AIRecommendClipItem[];
-  config: Record<string, unknown>;
+  config: EditPlanConfig;
   total_duration: number;
   confidence: number;
 }
@@ -122,7 +226,13 @@ export interface GenerateCoverRequest {
 /** AI 封面生成响应 */
 export interface GenerateCoverResponse {
   plan_id: string;
-  cover: Record<string, unknown>;
+  cover: {
+    scheme?: string;
+    asset_id?: string;
+    frame_time?: number;
+    thumbnail_url?: string;
+    [key: string]: unknown;
+  };
 }
 
 /* ============================================================
@@ -147,10 +257,27 @@ export interface EditPlanClip {
   order: number;
 }
 
-/** 转场效果 */
+/** 转场效果（14 种预设） */
 export interface TransitionEffect {
-  type: "none" | "fade" | "dissolve" | "wipe" | "zoom" | "slide";
+  type:
+    | "none"
+    | "cut"
+    | "fade"
+    | "dissolve"
+    | "zoom"
+    | "slide_left"
+    | "slide_right"
+    | "slide_up"
+    | "slide_down"
+    | "wipe_left"
+    | "wipe_right"
+    | "wipe_up"
+    | "wipe_down"
+    | "circlecrop"
+    | "rectcrop";
   duration: number; // 转场时长（秒）
+  /** 播放速度倍率 */
+  playback_speed?: number;
 }
 
 /** 素材库资产（UI 层类型，映射自后端 AssetResponse） */
@@ -177,15 +304,30 @@ export interface MediaAsset {
  * API 函数 — 严格对接后端
  * ============================================================ */
 
-/** 获取剪辑计划列表 */
-export async function getEditPlans(params?: {
+/** 剪辑计划列表查询参数 */
+export interface EditPlanListParams {
   page?: number;
   page_size?: number;
   template_id?: string;
   status?: string;
-}): Promise<EditPlan[]> {
-  const response = await apiClient.get("/edit-plans", { params });
-  return response.data.items || [];
+}
+
+/** 剪辑计划列表分页响应 */
+export interface EditPlanListResponse {
+  items: EditPlan[];
+  total: number;
+  page: number;
+  page_size: number;
+}
+
+/** 获取剪辑计划列表（支持分页和筛选） */
+export async function getEditPlans(
+  params?: EditPlanListParams,
+): Promise<EditPlanListResponse> {
+  const response = await apiClient.get<EditPlanListResponse>("/edit-plans", {
+    params,
+  });
+  return response.data;
 }
 
 /** 获取单个剪辑计划 */
@@ -266,6 +408,14 @@ export async function getEditPlanGenerations(
   return response.data.items || [];
 }
 
+/** 获取生成任务的视频结果列表 */
+export async function getGenerationTaskResults(
+  taskId: string,
+): Promise<GeneratedVideo[]> {
+  const response = await apiClient.get(`/generation/tasks/${taskId}/results`);
+  return response.data.items || response.data || [];
+}
+
 /**
  * 获取素材库列表 — 调用 GET /api/v1/assets?library_id=xxx
  * 将后端 AssetResponse 映射为前端 MediaAsset 类型
@@ -297,26 +447,22 @@ function inferMediaType(mimeType: string): "video" | "image" | "audio" {
 }
 
 function mapAssetToMediaAsset(asset: AssetItem): MediaAsset {
-  const meta = (asset.metadata || {}) as Record<string, unknown>;
-  const ext = asset as AssetItem & Record<string, unknown>;
+  // 优先取顶层 duration，其次从 metadata 回退
+  const metaDuration =
+    typeof asset.metadata?.duration === "number"
+      ? asset.metadata.duration
+      : undefined;
   return {
     id: asset.id,
     name: asset.name,
     type: inferMediaType(asset.mime_type || ""),
-    thumbnail_url:
-      typeof ext.thumbnail_url === "string" ? ext.thumbnail_url : undefined,
-    duration:
-      typeof ext.duration === "number"
-        ? ext.duration
-        : typeof meta.duration === "number"
-          ? (meta.duration as number)
-          : undefined,
+    thumbnail_url: asset.thumbnail_url,
+    duration: asset.duration ?? metaDuration,
     size: asset.file_size ?? undefined,
     tags: [],
     created_at: asset.created_at ?? "",
     quality_score: asset.quality_score ?? undefined,
-    classification_status: (asset.classification_status ??
-      undefined) as MediaAsset["classification_status"],
+    classification_status: asset.classification_status ?? undefined,
   };
 }
 
@@ -324,17 +470,27 @@ function mapAssetToMediaAsset(asset: AssetItem): MediaAsset {
  * 常量
  * ============================================================ */
 
-/** 转场效果选项 */
+/** 转场效果选项（14 种预设） */
 export const TRANSITION_OPTIONS: {
   value: TransitionEffect["type"];
   label: string;
+  icon: string;
 }[] = [
-  { value: "none", label: "无转场" },
-  { value: "fade", label: "淡入淡出" },
-  { value: "dissolve", label: "溶解" },
-  { value: "wipe", label: "擦除" },
-  { value: "zoom", label: "缩放" },
-  { value: "slide", label: "滑动" },
+  { value: "none", label: "无转场", icon: "⊘" },
+  { value: "cut", label: "硬切", icon: "✂" },
+  { value: "fade", label: "淡入淡出", icon: "◐" },
+  { value: "dissolve", label: "溶解", icon: "◈" },
+  { value: "zoom", label: "缩放", icon: "⊕" },
+  { value: "slide_left", label: "左滑", icon: "←" },
+  { value: "slide_right", label: "右滑", icon: "→" },
+  { value: "slide_up", label: "上滑", icon: "↑" },
+  { value: "slide_down", label: "下滑", icon: "↓" },
+  { value: "wipe_left", label: "左擦除", icon: "▸|" },
+  { value: "wipe_right", label: "右擦除", icon: "|◂" },
+  { value: "wipe_up", label: "上擦除", icon: "▴̄" },
+  { value: "wipe_down", label: "下擦除", icon: "▾̄" },
+  { value: "circlecrop", label: "圆形裁切", icon: "●" },
+  { value: "rectcrop", label: "矩形裁切", icon: "■" },
 ];
 
 /** 素材类型标签 */