fix: 恢复 ClipDetailSection.tsx 主入口，re-export 子目录保持路径兼容

主文件 266→70 行（-74%），拆分为：
- ClipTypeAndDuration: 类型选择 + 时长设置
- AdvancedEntries: 转场/调速/TTS 高级入口按钮
- VoiceMaterialSection: 配音素材选择 + 起始时间（仅 voice 类型）
- index: 组合入口

导入路径保持向后兼容

apps/web/src/api/tts.ts

@@ -0,0 +1,188 @@
+/**
+ * TTS 语音合成 API
+ * 对接后端 /api/v1/tts/* 端点
+ *
+ * 任务 3.14 新增
+ */
+import apiClient from "./client"
+
+/* ── 类型定义 ──────────────────────────────────── */
+
+/** TTS 元数据（合成时附带的扩展信息） */
+export interface TTSMetadata {
+  /** 语音时长（秒） */
+  duration?: number
+  /** 采样率（Hz） */
+  sample_rate?: number
+  /** 语言 */
+  language?: string
+  /** 其他扩展字段 */
+  [key: string]: unknown
+}
+
+/** TTS 合成请求参数 */
+export interface TTSSynthesizeRequest {
+  text: string
+  voice_id?: string
+  output_name?: string
+  language?: string
+  speed?: number
+  voice_model?: string
+  voice_clone_profile_id?: string
+  format?: string
+  metadata?: TTSMetadata
+}
+
+/** TTS 合成创建响应 */
+export interface TTSSynthesizeResponse {
+  job_id: string
+  status: string
+  message: string
+}
+
+/** TTS 任务详情 */
+export interface TTSJob {
+  id: string
+  user_id: string
+  project_id: string | null
+  text: string
+  voice_id: string | null
+  voice_model: string | null
+  voice_clone_profile_id: string | null
+  language: string
+  speed: number
+  output_name: string | null
+  output_audio_url: string | null
+  output_format: string
+  duration_seconds: number | null
+  file_size_bytes: number | null
+  sample_rate: number | null
+  status: string
+  error_message: string | null
+  retry_count: number
+  max_retries: number
+  metadata_: TTSMetadata | null
+  created_at: string
+  updated_at: string
+}
+
+/** TTS 任务状态（轻量轮询用） */
+export interface TTSJobStatus {
+  id: string
+  status: string
+  output_audio_url: string | null
+  error_message: string | null
+  duration_seconds: number | null
+  retry_count: number
+}
+
+/** TTS 任务列表响应 */
+export interface TTSJobListResponse {
+  items: TTSJob[]
+  total: number
+  skip: number
+  limit: number
+}
+
+/** TTS 任务列表查询参数 */
+export interface TTSJobListParams {
+  status?: string
+  skip?: number
+  limit?: number
+}
+
+/* ── API 函数 ──────────────────────────────────── */
+
+/** 创建 TTS 合成任务 */
+export const synthesizeSpeech = async (
+  data: TTSSynthesizeRequest,
+): Promise<TTSSynthesizeResponse> => {
+  const response = await apiClient.post<TTSSynthesizeResponse>("/tts/synthesize", data)
+  return response.data
+}
+
+/** 获取 TTS 任务详情 */
+export const getTTSJob = async (jobId: string): Promise<TTSJob> => {
+  const response = await apiClient.get<TTSJob>(`/tts/jobs/${jobId}`)
+  return response.data
+}
+
+/** 获取 TTS 任务状态（轻量轮询） */
+export const getTTSJobStatus = async (jobId: string): Promise<TTSJobStatus> => {
+  const response = await apiClient.get<TTSJobStatus>(`/tts/jobs/${jobId}/status`)
+  return response.data
+}
+
+/** 获取 TTS 任务列表 */
+export const getTTSJobs = async (params?: TTSJobListParams): Promise<TTSJobListResponse> => {
+  const searchParams = new URLSearchParams()
+  if (params?.status) searchParams.set("status", params.status)
+  if (params?.skip !== undefined) searchParams.set("skip", String(params.skip))
+  if (params?.limit !== undefined) searchParams.set("limit", String(params.limit))
+  const qs = searchParams.toString()
+  const response = await apiClient.get<TTSJobListResponse>(`/tts/jobs${qs ? `?${qs}` : ""}`)
+  return response.data
+}
+
+/** 存为素材请求参数 */
+export interface SaveTtsToLibraryRequest {
+  name?: string
+  tag_ids?: string[]
+}
+
+/** 将 TTS 合成结果保存到配音库 */
+export const saveTtsToLibrary = async (
+  jobId: string,
+  data?: SaveTtsToLibraryRequest,
+): Promise<void> => {
+  await apiClient.post(`/tts/jobs/${jobId}/save-to-library`, data ?? {})
+}
+
+/** 删除 TTS 任务 */
+export const deleteTTSJob = async (jobId: string): Promise<void> => {
+  await apiClient.delete(`/tts/jobs/${jobId}`)
+}
+
+/* ── 音色列表 ──────────────────────────────────── */
+
+/** TTS 音色 */
+export interface TTSVoice {
+  id: string
+  name: string
+  /** 音色分类标签：male/female/young/service/news/emotion */
+  category?: string
+  /** 语言 */
+  language?: string
+  /** 试听 URL */
+  preview_url?: string
+  /** 描述 */
+  description?: string
+}
+
+/** 获取 TTS 音色列表 */
+export const getTtsVoices = async (): Promise<TTSVoice[]> => {
+  const response = await apiClient.get<TTSVoice[]>("/tts/voices")
+  return response.data
+}
+
+/* ── TTS 试听 ──────────────────────────────────── */
+
+/** TTS 试听请求参数 */
+export interface TTSPreviewRequest {
+  text: string
+  voice_id: string
+  speed?: number
+  pitch?: number
+}
+
+/** TTS 试听响应 */
+export interface TTSPreviewResponse {
+  audio_url: string
+  duration?: number
+}
+
+/** TTS 试听 */
+export const previewTts = async (data: TTSPreviewRequest): Promise<TTSPreviewResponse> => {
+  const response = await apiClient.post<TTSPreviewResponse>("/tts/preview", data)
+  return response.data
+}

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

@@ -1,31 +0,0 @@
-/**
- * TTS 语音合成 API — 目录化入口
- * 保持与原 tts.ts 相同导出，向后兼容
- */
-
-// 类型
-export type {
-  TTSMetadata,
-  TTSSynthesizeRequest,
-  TTSSynthesizeResponse,
-  TTSJob,
-  TTSJobStatus,
-  TTSJobListResponse,
-  TTSJobListParams,
-  SaveTtsToLibraryRequest,
-  TTSVoice,
-  TTSPreviewRequest,
-  TTSPreviewResponse,
-} from "./types"
-
-// API 函数
-export {
-  synthesizeSpeech,
-  getTTSJob,
-  getTTSJobStatus,
-  getTTSJobs,
-  saveTtsToLibrary,
-  deleteTTSJob,
-  getTtsVoices,
-  previewTts,
-} from "./jobs"

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

@@ -1,72 +0,0 @@
-/**
- * TTS 语音合成 API 函数
- */
-import apiClient from "../client"
-import type {
-  TTSSynthesizeRequest,
-  TTSSynthesizeResponse,
-  TTSJob,
-  TTSJobStatus,
-  TTSJobListResponse,
-  TTSJobListParams,
-  SaveTtsToLibraryRequest,
-  TTSVoice,
-  TTSPreviewRequest,
-  TTSPreviewResponse,
-} from "./types"
-
-/** 创建 TTS 合成任务 */
-export const synthesizeSpeech = async (
-  data: TTSSynthesizeRequest,
-): Promise<TTSSynthesizeResponse> => {
-  const response = await apiClient.post<TTSSynthesizeResponse>("/tts/synthesize", data)
-  return response.data
-}
-
-/** 获取 TTS 任务详情 */
-export const getTTSJob = async (jobId: string): Promise<TTSJob> => {
-  const response = await apiClient.get<TTSJob>(`/tts/jobs/${jobId}`)
-  return response.data
-}
-
-/** 获取 TTS 任务状态（轻量轮询） */
-export const getTTSJobStatus = async (jobId: string): Promise<TTSJobStatus> => {
-  const response = await apiClient.get<TTSJobStatus>(`/tts/jobs/${jobId}/status`)
-  return response.data
-}
-
-/** 获取 TTS 任务列表 */
-export const getTTSJobs = async (params?: TTSJobListParams): Promise<TTSJobListResponse> => {
-  const searchParams = new URLSearchParams()
-  if (params?.status) searchParams.set("status", params.status)
-  if (params?.skip !== undefined) searchParams.set("skip", String(params.skip))
-  if (params?.limit !== undefined) searchParams.set("limit", String(params.limit))
-  const qs = searchParams.toString()
-  const response = await apiClient.get<TTSJobListResponse>(`/tts/jobs${qs ? `?${qs}` : ""}`)
-  return response.data
-}
-
-/** 将 TTS 合成结果保存到配音库 */
-export const saveTtsToLibrary = async (
-  jobId: string,
-  data?: SaveTtsToLibraryRequest,
-): Promise<void> => {
-  await apiClient.post(`/tts/jobs/${jobId}/save-to-library`, data ?? {})
-}
-
-/** 删除 TTS 任务 */
-export const deleteTTSJob = async (jobId: string): Promise<void> => {
-  await apiClient.delete(`/tts/jobs/${jobId}`)
-}
-
-/** 获取 TTS 音色列表 */
-export const getTtsVoices = async (): Promise<TTSVoice[]> => {
-  const response = await apiClient.get<TTSVoice[]>("/tts/voices")
-  return response.data
-}
-
-/** TTS 试听 */
-export const previewTts = async (data: TTSPreviewRequest): Promise<TTSPreviewResponse> => {
-  const response = await apiClient.post<TTSPreviewResponse>("/tts/preview", data)
-  return response.data
-}

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

@@ -1,112 +0,0 @@
-/**
- * TTS 语音合成类型定义
- */
-
-/** TTS 元数据 */
-export interface TTSMetadata {
-  duration?: number
-  sample_rate?: number
-  language?: string
-  [key: string]: unknown
-}
-
-/** TTS 合成请求参数 */
-export interface TTSSynthesizeRequest {
-  text: string
-  voice_id?: string
-  output_name?: string
-  language?: string
-  speed?: number
-  voice_model?: string
-  voice_clone_profile_id?: string
-  format?: string
-  metadata?: TTSMetadata
-}
-
-/** TTS 合成创建响应 */
-export interface TTSSynthesizeResponse {
-  job_id: string
-  status: string
-  message: string
-}
-
-/** TTS 任务详情 */
-export interface TTSJob {
-  id: string
-  user_id: string
-  project_id: string | null
-  text: string
-  voice_id: string | null
-  voice_model: string | null
-  voice_clone_profile_id: string | null
-  language: string
-  speed: number
-  output_name: string | null
-  output_audio_url: string | null
-  output_format: string
-  duration_seconds: number | null
-  file_size_bytes: number | null
-  sample_rate: number | null
-  status: string
-  error_message: string | null
-  retry_count: number
-  max_retries: number
-  metadata_: TTSMetadata | null
-  created_at: string
-  updated_at: string
-}
-
-/** TTS 任务状态（轻量轮询用） */
-export interface TTSJobStatus {
-  id: string
-  status: string
-  output_audio_url: string | null
-  error_message: string | null
-  duration_seconds: number | null
-  retry_count: number
-}
-
-/** TTS 任务列表响应 */
-export interface TTSJobListResponse {
-  items: TTSJob[]
-  total: number
-  skip: number
-  limit: number
-}
-
-/** TTS 任务列表查询参数 */
-export interface TTSJobListParams {
-  status?: string
-  skip?: number
-  limit?: number
-}
-
-/** 存为素材请求参数 */
-export interface SaveTtsToLibraryRequest {
-  name?: string
-  tag_ids?: string[]
-}
-
-/** TTS 音色 */
-export interface TTSVoice {
-  id: string
-  name: string
-  category?: string
-  language?: string
-  preview_url?: string
-  description?: string
-}
-
-/** TTS 试听请求参数 */
-export interface TTSPreviewRequest {
-  text: string
-  voice_id: string
-  speed?: number
-  pitch?: number
-}
-
-/** TTS 试听响应 */
-export interface TTSPreviewResponse {
-  audio_url: string
-  duration?: number
-}

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

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

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

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

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

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

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

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

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

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