Merge branch 'develop' into refactor/task-center

- Phase 1: 抽 constants(STATUS_CONFIG/TYPE_LABELS等) + utils(formatDuration/formatTime)
- Phase 2: 抽 3 个 UI 组件（TaskFilterBar/TaskTable/TaskErrorDetail）
- Phase 3: 抽 useTaskList 业务 Hook（筛选+查询+重试）
- 主文件 423→76 行，职责清晰，表格列定义独立维护

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

@@ -0,0 +1,238 @@
+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/useClipOperations/index.ts

@@ -1,38 +0,0 @@
-import type { ClipData } from "../../types"
-import { useClipBasicOps } from "./useClipBasicOps"
-import { useClipTrim } from "./useClipTrim"
-import { useClipEffects } from "./useClipEffects"
-
-interface UseClipOperationsParams {
-  clips: ClipData[]
-  setClips: (updater: (prev: ClipData[]) => ClipData[]) => void
-}
-
-/**
- * 片段操作 Hook
- * 片段增删改查、排序、裁剪、分割、转场、调速、TTS、配音选择
- */
-export const useClipOperations = ({ clips, setClips }: UseClipOperationsParams) => {
-  const basicOps = useClipBasicOps({ clips, setClips })
-  const trimOps = useClipTrim({ setClips })
-  const effectOps = useClipEffects({ setClips, handleClipUpdate: basicOps.handleClipUpdate })
-
-  return {
-    selectedClipId: basicOps.selectedClipId,
-    setSelectedClipId: basicOps.setSelectedClipId,
-    selectedClip: basicOps.selectedClip,
-    handleClipSelect: basicOps.handleClipSelect,
-    handleClipReorder: basicOps.handleClipReorder,
-    handleClipRemove: basicOps.handleClipRemove,
-    handleClipUpdate: basicOps.handleClipUpdate,
-    handleAddClip: basicOps.handleAddClip,
-    handleClipTrim: trimOps.handleClipTrim,
-    handleClipSplit: trimOps.handleClipSplit,
-    handleClipResetTrim: trimOps.handleClipResetTrim,
-    handleTransitionChange: effectOps.handleTransitionChange,
-    handleSpeedChange: effectOps.handleSpeedChange,
-    handleApplySpeedAll: effectOps.handleApplySpeedAll,
-    handleTtsChange: effectOps.handleTtsChange,
-    handleClipVoiceSelect: effectOps.handleClipVoiceSelect,
-  }
-}

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

@@ -1,86 +0,0 @@
-import { useState, useMemo, useCallback } from "react"
-import { Modal } from "antd"
-import type { ClipData, ClipType } from "../../types"
-
-interface UseClipBasicOpsParams {
-  clips: ClipData[]
-  setClips: (updater: (prev: ClipData[]) => ClipData[]) => void
-}
-
-/**
- * 片段基础操作 Hook
- * 选中状态、增删改查、重排
- */
-export function useClipBasicOps({ clips, setClips }: UseClipBasicOpsParams) {
-  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],
-  )
-
-  return {
-    selectedClipId,
-    setSelectedClipId,
-    selectedClip,
-    handleClipSelect,
-    handleClipReorder,
-    handleClipRemove,
-    handleClipUpdate,
-    handleAddClip,
-  }
-}

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

@@ -1,74 +0,0 @@
-import { useCallback } from "react"
-import { message } from "antd"
-import type { ClipData, TransitionConfig, SpeedConfig, TtsConfig } from "../../types"
-import type { AssetItem } from "@/api/assets"
-
-interface UseClipEffectsParams {
-  setClips: (updater: (prev: ClipData[]) => ClipData[]) => void
-  handleClipUpdate: (clipId: string, data: Partial<ClipData>) => void
-}
-
-/**
- * 片段效果操作 Hook
- * 转场、调速、TTS、配音选择
- */
-export function useClipEffects({ setClips, handleClipUpdate }: UseClipEffectsParams) {
-  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 {
-    handleTransitionChange,
-    handleSpeedChange,
-    handleApplySpeedAll,
-    handleTtsChange,
-    handleClipVoiceSelect,
-  }
-}

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

@@ -1,89 +0,0 @@
-import { useCallback } from "react"
-import type { ClipData, TrimConfig } from "../../types"
-
-interface UseClipTrimParams {
-  setClips: (updater: (prev: ClipData[]) => ClipData[]) => void
-}
-
-/**
- * 片段裁剪分割 Hook
- * 裁剪、分割、重置裁剪
- */
-export function useClipTrim({ setClips }: UseClipTrimParams) {
-  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],
-  )
-
-  return {
-    handleClipTrim,
-    handleClipSplit,
-    handleClipResetTrim,
-  }
-}

apps/web/src/pages/tasks/TaskCenter.tsx

@@ -2,333 +2,32 @@
  * 任务中心页面
  * 展示用户的所有任务（生成任务、素材导入等），支持状态筛选、类型筛选、分页、重试
  */
-import { useState } from "react"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { Table, Tabs, Select, Tag, Button, message, Popconfirm, Tooltip } from "antd"
-import {
-  CheckCircleOutlined,
-  ClockCircleOutlined,
-  SyncOutlined,
-  CloseCircleOutlined,
-  ExclamationCircleOutlined,
-  MinusCircleOutlined,
-  RedoOutlined,
-  InfoCircleOutlined,
-} from "@ant-design/icons"
-import type { ColumnsType } from "antd/es/table"
-import {
-  getTasks,
-  retryTask,
-  type TaskItem,
-  type TaskStatus,
-  type TaskListParams,
-} from "@/api/tasks"
+import { Button } from "antd"
+import { CloseCircleOutlined } from "@ant-design/icons"
+import { TaskFilterBar } from "./components/TaskFilterBar"
+import { TaskTable } from "./components/TaskTable"
+import { useTaskList } from "./hooks/useTaskList"
 import "./tasks.css"
 
-/* ──────────── 常量 ──────────── */
-
-/** 状态 Tab 配置 */
-const STATUS_TABS: { key: TaskStatus | "all"; label: string }[] = [
-  { key: "all", label: "全部" },
-  { key: "waiting", label: "等待中" },
-  { key: "running", label: "进行中" },
-  { key: "completed", label: "已完成" },
-  { key: "failed", label: "失败" },
-  { key: "cancelled", label: "已取消" },
-]
-
-/** 类型筛选选项 */
-const TYPE_OPTIONS = [
-  { value: "all", label: "全部类型" },
-  { value: "generation", label: "生成任务" },
-  { value: "ingest", label: "素材导入" },
-]
-
-/** 状态标签配置 */
-const STATUS_CONFIG: Record<TaskStatus, { label: string; color: string; icon: React.ReactNode }> = {
-  pending: {
-    label: "等待中",
-    color: "default",
-    icon: <ClockCircleOutlined />,
-  },
-  waiting: {
-    label: "排队中",
-    color: "processing",
-    icon: <SyncOutlined spin />,
-  },
-  running: {
-    label: "进行中",
-    color: "processing",
-    icon: <SyncOutlined spin />,
-  },
-  completed: {
-    label: "已完成",
-    color: "success",
-    icon: <CheckCircleOutlined />,
-  },
-  failed: {
-    label: "失败",
-    color: "error",
-    icon: <CloseCircleOutlined />,
-  },
-  cancelled: {
-    label: "已取消",
-    color: "default",
-    icon: <MinusCircleOutlined />,
-  },
-}
-
-/** 任务类型标签 */
-const TYPE_LABELS: Record<string, { label: string; color: string }> = {
-  generation: { label: "生成任务", color: "blue" },
-  ingest: { label: "素材导入", color: "green" },
-}
-
-/* ──────────── 工具函数 ──────────── */
-
-/** 格式化耗时 */
-const formatDuration = (seconds?: number): string => {
-  if (!seconds) return "-"
-  if (seconds < 60) return `${Math.round(seconds)}秒`
-  const minutes = Math.floor(seconds / 60)
-  const secs = Math.round(seconds % 60)
-  if (minutes < 60) return `${minutes}分${secs}秒`
-  const hours = Math.floor(minutes / 60)
-  const mins = minutes % 60
-  return `${hours}小时${mins}分`
-}
-
-/** 格式化时间 */
-const formatTime = (dateStr?: string | null): string => {
-  if (!dateStr) return "-"
-  const date = new Date(dateStr)
-  return date.toLocaleString("zh-CN", {
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-  })
-}
-
-/* ──────────── 主组件 ──────────── */
-
 export default function TaskCenter() {
-  const queryClient = useQueryClient()
-
-  // 筛选状态
-  const [statusFilter, setStatusFilter] = useState<TaskStatus | "all">("all")
-  const [typeFilter, setTypeFilter] = useState<string>("all")
-  const [page, setPage] = useState(1)
-  const [pageSize, setPageSize] = useState(20)
-  const [expandedTaskId, setExpandedTaskId] = useState<string | null>(null)
-  const [expandedTaskDetail, setExpandedTaskDetail] = useState<TaskItem | null>(null)
-
-  // 查询参数
-  const queryParams: TaskListParams = {
+  const {
+    statusFilter,
+    typeFilter,
     page,
-    page_size: pageSize,
-    ...(statusFilter !== "all" && { status: statusFilter }),
-    ...(typeFilter !== "all" && { task_type: typeFilter }),
-  }
-
-  // 获取任务列表
-  const { data, isLoading, error } = useQuery({
-    queryKey: ["tasks", queryParams],
-    queryFn: () => getTasks(queryParams),
-    refetchInterval: (query) => {
-      // 有进行中的任务时自动刷新
-      const tasks = query.state.data?.items ?? []
-      const hasRunning = tasks.some((t) => t.status === "running" || t.status === "waiting")
-      return hasRunning ? 5000 : false
-    },
-  })
-
-  // 重试任务
-  const retryMutation = useMutation({
-    mutationFn: retryTask,
-    onSuccess: () => {
-      message.success("任务已重新提交")
-      queryClient.invalidateQueries({ queryKey: ["tasks"] })
-    },
-    onError: () => {
-      message.error("重试失败，请检查任务状态")
-    },
-  })
-
-  // 展开查看详情
-  const handleExpand = async (expanded: boolean, record: TaskItem) => {
-    if (!expanded) {
-      setExpandedTaskId(null)
-      setExpandedTaskDetail(null)
-      return
-    }
-    setExpandedTaskId(record.id)
-    // 如果是失败任务，获取详情（含 error_info）
-    if (record.status === "failed" && record.error_info) {
-      setExpandedTaskDetail(record)
-    }
-  }
-
-  // 表格列定义
-  const columns: ColumnsType<TaskItem> = [
-    {
-      title: "任务ID",
-      dataIndex: "id",
-      key: "id",
-      width: 120,
-      ellipsis: true,
-      render: (id: string) => (
-        <Tooltip title={id}>
-          <span className="task-id">{id.slice(0, 8)}...</span>
-        </Tooltip>
-      ),
-    },
-    {
-      title: "类型",
-      dataIndex: "task_type",
-      key: "task_type",
-      width: 100,
-      render: (type: string) => {
-        const config = TYPE_LABELS[type] || { label: type, color: "default" }
-        return <Tag color={config.color}>{config.label}</Tag>
-      },
-    },
-    {
-      title: "状态",
-      dataIndex: "status",
-      key: "status",
-      width: 120,
-      render: (status: TaskStatus, record: TaskItem) => {
-        const config = STATUS_CONFIG[status] || {
-          label: status,
-          color: "default",
-          icon: null,
-        }
-        return (
-          <Tag color={config.color} icon={config.icon} className="task-status-tag">
-            {config.label}
-            {status === "running" && record.progress > 0 && (
-              <span className="task-progress"> {record.progress}%</span>
-            )}
-          </Tag>
-        )
-      },
-    },
-    {
-      title: "当前步骤",
-      dataIndex: "current_step",
-      key: "current_step",
-      width: 150,
-      ellipsis: true,
-      render: (step: string) => <span className="task-step">{step || "-"}</span>,
-    },
-    {
-      title: "耗时",
-      dataIndex: "duration_seconds",
-      key: "duration_seconds",
-      width: 100,
-      render: (seconds: number) => <span className="task-duration">{formatDuration(seconds)}</span>,
-    },
-    {
-      title: "创建时间",
-      dataIndex: "created_at",
-      key: "created_at",
-      width: 120,
-      render: (time: string) => <span className="task-time">{formatTime(time)}</span>,
-    },
-    {
-      title: "操作",
-      key: "action",
-      width: 100,
-      fixed: "right",
-      render: (_: unknown, record: TaskItem) => {
-        if (record.status === "failed" && record.retryable) {
-          return (
-            <Popconfirm
-              title="确认重试"
-              description="确定要重试这个失败的任务吗？"
-              onConfirm={() => retryMutation.mutate(record.id)}
-              okText="确定"
-              cancelText="取消"
-            >
-              <Button
-                type="link"
-                size="small"
-                icon={<RedoOutlined />}
-                loading={retryMutation.isPending}
-                className="task-retry-btn"
-              >
-                重试
-              </Button>
-            </Popconfirm>
-          )
-        }
-        if (record.status === "failed") {
-          return (
-            <Button
-              type="link"
-              size="small"
-              icon={<InfoCircleOutlined />}
-              onClick={() => {
-                setExpandedTaskId(record.id)
-                setExpandedTaskDetail(record)
-              }}
-            >
-              详情
-            </Button>
-          )
-        }
-        return <span className="task-action-placeholder">-</span>
-      },
-    },
-  ]
-
-  // 展开行渲染（错误详情）
-  const expandedRowRender = (record: TaskItem) => {
-    const detail = expandedTaskDetail || record
-    const errorInfo = detail.error_info
-
-    if (!errorInfo && !detail.error_message) {
-      return <div className="task-expand-empty">暂无错误详情</div>
-    }
-
-    return (
-      <div className="task-error-detail">
-        <div className="task-error-header">
-          <ExclamationCircleOutlined className="task-error-icon" />
-          <span>错误详情</span>
-        </div>
-        <div className="task-error-body">
-          {errorInfo?.error_type && (
-            <div className="task-error-row">
-              <span className="task-error-label">错误类型：</span>
-              <Tag color="error">{errorInfo.error_type}</Tag>
-            </div>
-          )}
-          {(errorInfo?.error_message || detail.error_message) && (
-            <div className="task-error-row">
-              <span className="task-error-label">错误信息：</span>
-              <span className="task-error-message">
-                {errorInfo?.error_message || detail.error_message}
-              </span>
-            </div>
-          )}
-          {errorInfo?.failed_step && (
-            <div className="task-error-row">
-              <span className="task-error-label">失败阶段：</span>
-              <span>{errorInfo.failed_step}</span>
-            </div>
-          )}
-          {errorInfo?.stack_trace && (
-            <div className="task-error-row task-error-stack">
-              <span className="task-error-label">堆栈信息：</span>
-              <pre>{errorInfo.stack_trace}</pre>
-            </div>
-          )}
-        </div>
-      </div>
-    )
-  }
+    pageSize,
+    expandedTaskId,
+    expandedTaskDetail,
+    data,
+    isLoading,
+    error,
+    retryLoading,
+    handleStatusChange,
+    handleTypeChange,
+    handlePageChange,
+    handleExpand,
+    handleViewDetail,
+    handleRetry,
+  } = useTaskList()
 
   // 错误处理
   if (error) {
@@ -351,72 +50,26 @@ export default function TaskCenter() {
         <p className="task-subtitle">查看和管理所有生成任务与素材导入任务</p>
       </div>
 
-      {/* 筛选栏 */}
-      <div className="task-filters">
-        {/* 状态 Tab */}
-        <Tabs
-          activeKey={statusFilter}
-          onChange={(key) => {
-            setStatusFilter(key as TaskStatus | "all")
-            setPage(1)
-          }}
-          items={STATUS_TABS.map((tab) => ({
-            key: tab.key,
-            label: tab.label,
-          }))}
-          className="task-status-tabs"
-        />
+      <TaskFilterBar
+        statusFilter={statusFilter}
+        typeFilter={typeFilter}
+        onStatusChange={handleStatusChange}
+        onTypeChange={handleTypeChange}
+      />
 
-        {/* 类型筛选 */}
-        <div className="task-type-filter">
-          <Select
-            value={typeFilter}
-            onChange={(value) => {
-              setTypeFilter(value)
-              setPage(1)
-            }}
-            options={TYPE_OPTIONS}
-            style={{ width: 140 }}
-            placeholder="选择类型"
-          />
-        </div>
-      </div>
-
-      {/* 任务表格 */}
-      <Table
-        columns={columns}
+      <TaskTable
         dataSource={data?.items || []}
-        rowKey="id"
         loading={isLoading}
-        pagination={{
-          current: page,
-          pageSize,
-          total: data?.total || 0,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          showTotal: (total) => `共 ${total} 条`,
-          onChange: (p, ps) => {
-            setPage(p)
-            setPageSize(ps)
-          },
-        }}
-        expandable={{
-          expandedRowRender,
-          expandedRowKeys: expandedTaskId ? [expandedTaskId] : [],
-          onExpand: handleExpand,
-          rowExpandable: (record) =>
-            record.status === "failed" && (!!record.error_info || !!record.error_message),
-        }}
-        scroll={{ x: 800 }}
-        className="task-table"
-        locale={{
-          emptyText: (
-            <div className="task-empty">
-              <ClockCircleOutlined />
-              <p>暂无任务记录</p>
-            </div>
-          ),
-        }}
+        total={data?.total || 0}
+        page={page}
+        pageSize={pageSize}
+        expandedTaskId={expandedTaskId}
+        expandedTaskDetail={expandedTaskDetail}
+        retryLoading={retryLoading}
+        onPageChange={handlePageChange}
+        onExpand={handleExpand}
+        onRetry={handleRetry}
+        onViewDetail={handleViewDetail}
       />
     </div>
   )

apps/web/src/pages/tasks/components/TaskErrorDetail.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+import { Tag } from "antd"
+import { ExclamationCircleOutlined } from "@ant-design/icons"
+import type { TaskItem } from "@/api/tasks"
+
+interface TaskErrorDetailProps {
+  record: TaskItem
+  detail?: TaskItem | null
+}
+
+/**
+ * 任务错误详情展开行
+ */
+export const TaskErrorDetail: React.FC<TaskErrorDetailProps> = ({ record, detail }) => {
+  const d = detail || record
+  const errorInfo = d.error_info
+
+  if (!errorInfo && !d.error_message) {
+    return <div className="task-expand-empty">暂无错误详情</div>
+  }
+
+  return (
+    <div className="task-error-detail">
+      <div className="task-error-header">
+        <ExclamationCircleOutlined className="task-error-icon" />
+        <span>错误详情</span>
+      </div>
+      <div className="task-error-body">
+        {errorInfo?.error_type && (
+          <div className="task-error-row">
+            <span className="task-error-label">错误类型：</span>
+            <Tag color="error">{errorInfo.error_type}</Tag>
+          </div>
+        )}
+        {(errorInfo?.error_message || d.error_message) && (
+          <div className="task-error-row">
+            <span className="task-error-label">错误信息：</span>
+            <span className="task-error-message">
+              {errorInfo?.error_message || d.error_message}
+            </span>
+          </div>
+        )}
+        {errorInfo?.failed_step && (
+          <div className="task-error-row">
+            <span className="task-error-label">失败阶段：</span>
+            <span>{errorInfo.failed_step}</span>
+          </div>
+        )}
+        {errorInfo?.stack_trace && (
+          <div className="task-error-row task-error-stack">
+            <span className="task-error-label">堆栈信息：</span>
+            <pre>{errorInfo.stack_trace}</pre>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

apps/web/src/pages/tasks/components/TaskFilterBar.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+import { Tabs, Select } from "antd"
+import { STATUS_TABS, TYPE_OPTIONS } from "../constants"
+import type { TaskStatus } from "@/api/tasks"
+
+interface TaskFilterBarProps {
+  statusFilter: TaskStatus | "all"
+  typeFilter: string
+  onStatusChange: (key: string) => void
+  onTypeChange: (value: string) => void
+}
+
+/**
+ * 任务筛选栏
+ * 状态 Tab + 类型下拉筛选
+ */
+export const TaskFilterBar: React.FC<TaskFilterBarProps> = ({
+  statusFilter,
+  typeFilter,
+  onStatusChange,
+  onTypeChange,
+}) => {
+  return (
+    <div className="task-filters">
+      {/* 状态 Tab */}
+      <Tabs
+        activeKey={statusFilter}
+        onChange={onStatusChange}
+        items={STATUS_TABS.map((tab) => ({
+          key: tab.key,
+          label: tab.label,
+        }))}
+        className="task-status-tabs"
+      />
+
+      {/* 类型筛选 */}
+      <div className="task-type-filter">
+        <Select
+          value={typeFilter}
+          onChange={onTypeChange}
+          options={TYPE_OPTIONS}
+          style={{ width: 140 }}
+          placeholder="选择类型"
+        />
+      </div>
+    </div>
+  )
+}

apps/web/src/pages/tasks/components/TaskTable.tsx

@@ -0,0 +1,190 @@
+import React from "react"
+import { Table, Tag, Button, Popconfirm, Tooltip } from "antd"
+import { RedoOutlined, InfoCircleOutlined, ClockCircleOutlined } from "@ant-design/icons"
+import type { ColumnsType } from "antd/es/table"
+import type { TaskItem, TaskStatus } from "@/api/tasks"
+import { STATUS_CONFIG, TYPE_LABELS } from "../constants"
+import { formatDuration, formatTime } from "../utils"
+import { TaskErrorDetail } from "./TaskErrorDetail"
+
+interface TaskTableProps {
+  dataSource: TaskItem[]
+  loading: boolean
+  total: number
+  page: number
+  pageSize: number
+  expandedTaskId: string | null
+  expandedTaskDetail: TaskItem | null
+  retryLoading: boolean
+  onPageChange: (page: number, pageSize: number) => void
+  onExpand: (expanded: boolean, record: TaskItem) => void
+  onRetry: (id: string) => void
+  onViewDetail: (record: TaskItem) => void
+}
+
+/**
+ * 任务列表表格
+ * 含列定义、分页、展开行
+ */
+export const TaskTable: React.FC<TaskTableProps> = ({
+  dataSource,
+  loading,
+  total,
+  page,
+  pageSize,
+  expandedTaskId,
+  expandedTaskDetail,
+  retryLoading,
+  onPageChange,
+  onExpand,
+  onRetry,
+  onViewDetail,
+}) => {
+  // 表格列定义
+  const columns: ColumnsType<TaskItem> = [
+    {
+      title: "任务ID",
+      dataIndex: "id",
+      key: "id",
+      width: 120,
+      ellipsis: true,
+      render: (id: string) => (
+        <Tooltip title={id}>
+          <span className="task-id">{id.slice(0, 8)}...</span>
+        </Tooltip>
+      ),
+    },
+    {
+      title: "类型",
+      dataIndex: "task_type",
+      key: "task_type",
+      width: 100,
+      render: (type: string) => {
+        const config = TYPE_LABELS[type] || { label: type, color: "default" }
+        return <Tag color={config.color}>{config.label}</Tag>
+      },
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
+      width: 120,
+      render: (status: TaskStatus, record: TaskItem) => {
+        const config = STATUS_CONFIG[status] || {
+          label: status,
+          color: "default",
+          icon: null,
+        }
+        return (
+          <Tag color={config.color} icon={config.icon} className="task-status-tag">
+            {config.label}
+            {status === "running" && record.progress > 0 && (
+              <span className="task-progress"> {record.progress}%</span>
+            )}
+          </Tag>
+        )
+      },
+    },
+    {
+      title: "当前步骤",
+      dataIndex: "current_step",
+      key: "current_step",
+      width: 150,
+      ellipsis: true,
+      render: (step: string) => <span className="task-step">{step || "-"}</span>,
+    },
+    {
+      title: "耗时",
+      dataIndex: "duration_seconds",
+      key: "duration_seconds",
+      width: 100,
+      render: (seconds: number) => <span className="task-duration">{formatDuration(seconds)}</span>,
+    },
+    {
+      title: "创建时间",
+      dataIndex: "created_at",
+      key: "created_at",
+      width: 120,
+      render: (time: string) => <span className="task-time">{formatTime(time)}</span>,
+    },
+    {
+      title: "操作",
+      key: "action",
+      width: 100,
+      fixed: "right",
+      render: (_: unknown, record: TaskItem) => {
+        if (record.status === "failed" && record.retryable) {
+          return (
+            <Popconfirm
+              title="确认重试"
+              description="确定要重试这个失败的任务吗？"
+              onConfirm={() => onRetry(record.id)}
+              okText="确定"
+              cancelText="取消"
+            >
+              <Button
+                type="link"
+                size="small"
+                icon={<RedoOutlined />}
+                loading={retryLoading}
+                className="task-retry-btn"
+              >
+                重试
+              </Button>
+            </Popconfirm>
+          )
+        }
+        if (record.status === "failed") {
+          return (
+            <Button
+              type="link"
+              size="small"
+              icon={<InfoCircleOutlined />}
+              onClick={() => onViewDetail(record)}
+            >
+              详情
+            </Button>
+          )
+        }
+        return <span className="task-action-placeholder">-</span>
+      },
+    },
+  ]
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={dataSource}
+      rowKey="id"
+      loading={loading}
+      pagination={{
+        current: page,
+        pageSize,
+        total,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: (t) => `共 ${t} 条`,
+        onChange: onPageChange,
+      }}
+      expandable={{
+        expandedRowRender: (record) => (
+          <TaskErrorDetail record={record} detail={expandedTaskDetail} />
+        ),
+        expandedRowKeys: expandedTaskId ? [expandedTaskId] : [],
+        onExpand,
+        rowExpandable: (record) =>
+          record.status === "failed" && (!!record.error_info || !!record.error_message),
+      }}
+      scroll={{ x: 800 }}
+      className="task-table"
+      locale={{
+        emptyText: (
+          <div className="task-empty">
+            <ClockCircleOutlined />
+            <p>暂无任务记录</p>
+          </div>
+        ),
+      }}
+    />
+  )
+}

apps/web/src/pages/tasks/constants.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+import {
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  SyncOutlined,
+  CloseCircleOutlined,
+  MinusCircleOutlined,
+} from "@ant-design/icons"
+import type { TaskStatus } from "@/api/tasks"
+
+/** 状态 Tab 配置 */
+export const STATUS_TABS: { key: TaskStatus | "all"; label: string }[] = [
+  { key: "all", label: "全部" },
+  { key: "waiting", label: "等待中" },
+  { key: "running", label: "进行中" },
+  { key: "completed", label: "已完成" },
+  { key: "failed", label: "失败" },
+  { key: "cancelled", label: "已取消" },
+]
+
+/** 类型筛选选项 */
+export const TYPE_OPTIONS = [
+  { value: "all", label: "全部类型" },
+  { value: "generation", label: "生成任务" },
+  { value: "ingest", label: "素材导入" },
+]
+
+/** 状态标签配置 */
+export const STATUS_CONFIG: Record<
+  TaskStatus,
+  { label: string; color: string; icon: React.ReactNode }
+> = {
+  pending: {
+    label: "等待中",
+    color: "default",
+    icon: <ClockCircleOutlined />,
+  },
+  waiting: {
+    label: "排队中",
+    color: "processing",
+    icon: <SyncOutlined spin />,
+  },
+  running: {
+    label: "进行中",
+    color: "processing",
+    icon: <SyncOutlined spin />,
+  },
+  completed: {
+    label: "已完成",
+    color: "success",
+    icon: <CheckCircleOutlined />,
+  },
+  failed: {
+    label: "失败",
+    color: "error",
+    icon: <CloseCircleOutlined />,
+  },
+  cancelled: {
+    label: "已取消",
+    color: "default",
+    icon: <MinusCircleOutlined />,
+  },
+}
+
+/** 任务类型标签 */
+export const TYPE_LABELS: Record<string, { label: string; color: string }> = {
+  generation: { label: "生成任务", color: "blue" },
+  ingest: { label: "素材导入", color: "green" },
+}

apps/web/src/pages/tasks/hooks/useTaskList.ts

@@ -0,0 +1,119 @@
+import { useState, useCallback } from "react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { message } from "antd"
+import {
+  getTasks,
+  retryTask,
+  type TaskItem,
+  type TaskStatus,
+  type TaskListParams,
+} from "@/api/tasks"
+
+/**
+ * 任务列表业务 Hook
+ * 封装筛选状态、数据获取、重试操作
+ */
+export const useTaskList = () => {
+  const queryClient = useQueryClient()
+
+  // 筛选状态
+  const [statusFilter, setStatusFilter] = useState<TaskStatus | "all">("all")
+  const [typeFilter, setTypeFilter] = useState<string>("all")
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(20)
+  const [expandedTaskId, setExpandedTaskId] = useState<string | null>(null)
+  const [expandedTaskDetail, setExpandedTaskDetail] = useState<TaskItem | null>(null)
+
+  // 查询参数
+  const queryParams: TaskListParams = {
+    page,
+    page_size: pageSize,
+    ...(statusFilter !== "all" && { status: statusFilter }),
+    ...(typeFilter !== "all" && { task_type: typeFilter }),
+  }
+
+  // 获取任务列表
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["tasks", queryParams],
+    queryFn: () => getTasks(queryParams),
+    refetchInterval: (query) => {
+      // 有进行中的任务时自动刷新
+      const tasks = query.state.data?.items ?? []
+      const hasRunning = tasks.some((t) => t.status === "running" || t.status === "waiting")
+      return hasRunning ? 5000 : false
+    },
+  })
+
+  // 重试任务
+  const retryMutation = useMutation({
+    mutationFn: retryTask,
+    onSuccess: () => {
+      message.success("任务已重新提交")
+      queryClient.invalidateQueries({ queryKey: ["tasks"] })
+    },
+    onError: () => {
+      message.error("重试失败，请检查任务状态")
+    },
+  })
+
+  // 状态筛选变化
+  const handleStatusChange = useCallback((key: string) => {
+    setStatusFilter(key as TaskStatus | "all")
+    setPage(1)
+  }, [])
+
+  // 类型筛选变化
+  const handleTypeChange = useCallback((value: string) => {
+    setTypeFilter(value)
+    setPage(1)
+  }, [])
+
+  // 分页变化
+  const handlePageChange = useCallback((p: number, ps: number) => {
+    setPage(p)
+    setPageSize(ps)
+  }, [])
+
+  // 展开查看详情
+  const handleExpand = useCallback((expanded: boolean, record: TaskItem) => {
+    if (!expanded) {
+      setExpandedTaskId(null)
+      setExpandedTaskDetail(null)
+      return
+    }
+    setExpandedTaskId(record.id)
+    // 如果是失败任务，获取详情（含 error_info）
+    if (record.status === "failed" && record.error_info) {
+      setExpandedTaskDetail(record)
+    }
+  }, [])
+
+  // 查看错误详情
+  const handleViewDetail = useCallback((record: TaskItem) => {
+    setExpandedTaskId(record.id)
+    setExpandedTaskDetail(record)
+  }, [])
+
+  return {
+    // 状态
+    statusFilter,
+    typeFilter,
+    page,
+    pageSize,
+    expandedTaskId,
+    expandedTaskDetail,
+    // 数据
+    data,
+    isLoading,
+    error,
+    // Mutation
+    retryLoading: retryMutation.isPending,
+    // 操作
+    handleStatusChange,
+    handleTypeChange,
+    handlePageChange,
+    handleExpand,
+    handleViewDetail,
+    handleRetry: retryMutation.mutate,
+  }
+}

apps/web/src/pages/tasks/utils.ts

@@ -0,0 +1,23 @@
+/** 格式化耗时 */
+export const formatDuration = (seconds?: number): string => {
+  if (!seconds) return "-"
+  if (seconds < 60) return `${Math.round(seconds)}秒`
+  const minutes = Math.floor(seconds / 60)
+  const secs = Math.round(seconds % 60)
+  if (minutes < 60) return `${minutes}分${secs}秒`
+  const hours = Math.floor(minutes / 60)
+  const mins = minutes % 60
+  return `${hours}小时${mins}分`
+}
+
+/** 格式化时间 */
+export const formatTime = (dateStr?: string | null): string => {
+  if (!dateStr) return "-"
+  const date = new Date(dateStr)
+  return date.toLocaleString("zh-CN", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}