fix: MappedTask.template 改为可选类型

- Phase 1: 抽 constants（TaskStatus/TABS/PAGE_SIZE）+ utils（normalizeStatus/formatDate）
- Phase 2: 抽 2 个 UI 组件（TaskList含HistoryTabs/TaskItem/Pagination + States含4种状态组件）
- Phase 3: 抽 useTaskHistory 业务 Hook（查询/筛选/分页/重试）
- 主文件 302→90 行，职责分离清晰

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/history/TaskHistory.tsx

@@ -1,300 +1,88 @@
 /**
  * 任务历史页面 — V21 设计系统
  * 页面头部 + 圆角胶囊 Tab 筛选（含计数）+ 卡片式任务列表 + 分页 + 空状态
- * 使用 useQuery 对接后端真实 API（api/tasks.ts）
  */
-import React, { useState } from "react"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { Button } from "@/components/ui"
-import { getUserTasks, retryTask, type TaskItem } from "@/api/tasks"
+import React from "react"
+import { PageHeader, LoadingState, ErrorState, EmptyState } from "./components/States"
+import { HistoryTabs, TaskItem, Pagination } from "./components/TaskList"
+import { useTaskHistory } from "./hooks/useTaskHistory"
 import "./history.css"
 
-/* ============================================================
- * 类型 & 常量
- * ============================================================ */
-type TaskStatus = "completed" | "processing" | "pending" | "failed"
-
-const statusLabel: Record<TaskStatus, string> = {
-  completed: "已完成",
-  processing: "进行中",
-  pending: "排队中",
-  failed: "失败",
-}
-
-/** 将后端 status 字符串映射为前端 TaskStatus */
-const normalizeStatus = (s: string): TaskStatus => {
-  const map: Record<string, TaskStatus> = {
-    completed: "completed",
-    succeeded: "completed",
-    success: "completed",
-    processing: "processing",
-    running: "processing",
-    pending: "pending",
-    queued: "pending",
-    failed: "failed",
-    error: "failed",
-  }
-  return map[s] ?? "pending"
-}
-
-/** 格式化日期 */
-const formatDate = (iso?: string | null): string => {
-  if (!iso) return "—"
-  const d = new Date(iso)
-  if (isNaN(d.getTime())) return "—"
-  const pad = (n: number) => String(n).padStart(2, "0")
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
-}
-
-/* ============================================================
- * Tab 配置
- * ============================================================ */
-interface TabConfig {
-  key: string
-  label: string
-  statusFilter?: TaskStatus
-}
-
-const tabs: TabConfig[] = [
-  { key: "all", label: "全部" },
-  { key: "processing", label: "进行中", statusFilter: "processing" },
-  { key: "completed", label: "已完成", statusFilter: "completed" },
-  { key: "failed", label: "失败", statusFilter: "failed" },
-]
-
-/* ============================================================
- * 分页配置
- * ============================================================ */
-const PAGE_SIZE = 10
-
-/* ============================================================
- * 组件
- * ============================================================ */
 const TaskHistory: React.FC = () => {
-  const [activeTab, setActiveTab] = useState("all")
-  const [currentPage, setCurrentPage] = useState(1)
-  const queryClient = useQueryClient()
-
-  // ── 获取任务列表 ──
   const {
-    data: tasks = [],
+    activeTab,
+    currentPage,
+    totalPages,
+    tabs,
+    tabCounts,
+    paginatedTasks,
     isLoading,
     isError,
     error,
+    retryLoading,
+    setCurrentPage,
+    handleTabChange,
+    handleRetry,
+    handleView,
     refetch,
-  } = useQuery<TaskItem[], Error>({
-    queryKey: ["tasks"],
-    queryFn: getUserTasks,
-    staleTime: 30_000,
-  })
+  } = useTaskHistory()
 
-  // ── 重试任务 mutation ──
-  const retryMutation = useMutation({
-    mutationFn: retryTask,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["tasks"] })
-    },
-  })
-
-  // 将后端数据映射为页面展示用的结构
-  const mappedTasks = tasks.map((t) => ({
-    id: t.id,
-    name: t.user_message || t.task_type,
-    type: t.task_type,
-    template: t.template_id,
-    status: normalizeStatus(t.status),
-    date: formatDate(t.created_at),
-    duration: undefined as string | undefined,
-    progress: t.progress,
-    retryable: t.retryable,
-    errorMessage: t.error_message,
-  }))
-
-  // 获取当前 Tab 的筛选状态
-  const currentTab = tabs.find((t) => t.key === activeTab)
-  const statusFilter = currentTab?.statusFilter
-
-  // 过滤任务
-  const filteredTasks = statusFilter
-    ? mappedTasks.filter((t) => t.status === statusFilter)
-    : mappedTasks
-
-  // 计算各 Tab 的数量
-  const tabCounts: Record<string, number> = {
-    all: mappedTasks.length,
-    processing: mappedTasks.filter((t) => t.status === "processing").length,
-    completed: mappedTasks.filter((t) => t.status === "completed").length,
-    failed: mappedTasks.filter((t) => t.status === "failed").length,
-  }
-
-  // 分页
-  const totalPages = Math.ceil(filteredTasks.length / PAGE_SIZE)
-  const paginatedTasks = filteredTasks.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
-
-  // 切换 Tab 时重置页码
-  const handleTabChange = (key: string) => {
-    setActiveTab(key)
-    setCurrentPage(1)
-  }
-
-  // 重试任务
-  const handleRetry = (taskId: string) => {
-    retryMutation.mutate(taskId)
-  }
-
-  // 查看任务详情
-  const handleView = (taskId: string) => {
-    // TODO: 跳转到任务详情页（待路由实现）
-    console.log("查看任务:", taskId)
-  }
-
-  // ── Loading 状态 ──
+  // Loading 状态
   if (isLoading) {
     return (
       <div className="xx-history-page">
-        <div className="xx-history-header">
-          <h2>任务历史</h2>
-          <p>查看和管理所有生成任务</p>
-        </div>
-        <div className="xx-history-empty">
-          <div className="xx-history-empty-icon">⏳</div>
-          <h3>加载中...</h3>
-        </div>
+        <PageHeader />
+        <LoadingState />
       </div>
     )
   }
 
-  // ── Error 状态 ──
+  // Error 状态
   if (isError) {
     return (
       <div className="xx-history-page">
-        <div className="xx-history-header">
-          <h2>任务历史</h2>
-          <p>查看和管理所有生成任务</p>
-        </div>
-        <div className="xx-history-empty">
-          <div className="xx-history-empty-icon">❌</div>
-          <h3>加载失败</h3>
-          <p>{error?.message || "网络异常，请稍后重试"}</p>
-          <Button buttonType="primary" buttonSize="md" onClick={() => refetch()}>
-            重新加载
-          </Button>
-        </div>
+        <PageHeader />
+        <ErrorState message={error?.message} onRetry={() => refetch()} />
       </div>
     )
   }
 
+  const totalCount = tabCounts[activeTab] ?? paginatedTasks.length
+
   return (
     <div className="xx-history-page">
-      {/* ── 页面头部 ──────────────────────────────────────────── */}
-      <div className="xx-history-header">
-        <h2>任务历史</h2>
-        <p>查看和管理所有生成任务</p>
-      </div>
+      <PageHeader />
 
-      {/* ── Tab 切换 ──────────────────────────────────────────── */}
-      <div className="xx-history-tabs">
-        {tabs.map((tab) => (
-          <button
-            key={tab.key}
-            className={`xx-history-tab${activeTab === tab.key ? " active" : ""}`}
-            onClick={() => handleTabChange(tab.key)}
-          >
-            {tab.label}
-            <span className="xx-history-tab-count">{tabCounts[tab.key]}</span>
-          </button>
-        ))}
-      </div>
+      <HistoryTabs
+        tabs={tabs}
+        activeTab={activeTab}
+        tabCounts={tabCounts}
+        onChange={handleTabChange}
+      />
 
-      {/* ── 任务列表 ──────────────────────────────────────────── */}
+      {/* 任务列表 */}
       {paginatedTasks.length === 0 ? (
-        <div className="xx-history-empty">
-          <div className="xx-history-empty-icon">📭</div>
-          <h3>暂无任务记录</h3>
-          <p>{activeTab === "all" ? "点击上方按钮开始创建任务" : "当前分类下没有任务"}</p>
-        </div>
+        <EmptyState activeTab={activeTab} />
       ) : (
         <div className="xx-history-task-list">
           {paginatedTasks.map((task) => (
-            <div key={task.id} className="xx-history-task-item">
-              {/* 任务信息 */}
-              <div className="xx-history-task-info">
-                <h4>{task.name}</h4>
-                <span>
-                  {task.type} · 模板：{task.template}
-                </span>
-              </div>
-
-              {/* 状态标签 */}
-              <span className={`xx-history-status xx-history-status--${task.status}`}>
-                {statusLabel[task.status]}
-              </span>
-
-              {/* 时间区 */}
-              <div className="xx-history-task-time">
-                <span>{task.date}</span>
-                {task.status === "completed" ? (
-                  <span>完成</span>
-                ) : task.status === "processing" ? (
-                  <span>进度 {task.progress}%</span>
-                ) : task.status === "failed" ? (
-                  <span>{task.errorMessage || "请重试"}</span>
-                ) : (
-                  <span>等待中</span>
-                )}
-              </div>
-
-              {/* 操作按钮 */}
-              <div className="xx-history-task-action">
-                {task.status === "failed" && task.retryable ? (
-                  <Button
-                    buttonType="ghost"
-                    buttonSize="sm"
-                    onClick={() => handleRetry(task.id)}
-                    disabled={retryMutation.isPending}
-                  >
-                    {retryMutation.isPending ? "重试中..." : "重试"}
-                  </Button>
-                ) : (
-                  <Button buttonType="ghost" buttonSize="sm" onClick={() => handleView(task.id)}>
-                    查看
-                  </Button>
-                )}
-              </div>
-            </div>
+            <TaskItem
+              key={task.id}
+              task={task}
+              onRetry={handleRetry}
+              onView={handleView}
+              retryLoading={retryLoading}
+            />
           ))}
         </div>
       )}
 
-      {/* ── 分页 ──────────────────────────────────────────────── */}
-      {totalPages > 1 && (
-        <div className="xx-history-pagination">
-          <button
-            className="xx-history-page-btn"
-            disabled={currentPage === 1}
-            onClick={() => setCurrentPage(currentPage - 1)}
-          >
-            ‹
-          </button>
-          {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-            <button
-              key={page}
-              className={`xx-history-page-btn${currentPage === page ? " active" : ""}`}
-              onClick={() => setCurrentPage(page)}
-            >
-              {page}
-            </button>
-          ))}
-          <button
-            className="xx-history-page-btn"
-            disabled={currentPage === totalPages}
-            onClick={() => setCurrentPage(currentPage + 1)}
-          >
-            ›
-          </button>
-          <span className="xx-history-page-info">共 {filteredTasks.length} 条</span>
-        </div>
-      )}
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        total={totalCount}
+        onChange={setCurrentPage}
+      />
     </div>
   )
 }

apps/web/src/pages/history/components/States.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import { Button } from "@/components/ui"
+
+interface LoadingStateProps {
+  title?: string
+}
+
+/** 加载状态 */
+export const LoadingState: React.FC<LoadingStateProps> = ({ title = "加载中..." }) => (
+  <div className="xx-history-empty">
+    <div className="xx-history-empty-icon">⏳</div>
+    <h3>{title}</h3>
+  </div>
+)
+
+interface ErrorStateProps {
+  message?: string
+  onRetry: () => void
+}
+
+/** 错误状态 */
+export const ErrorState: React.FC<ErrorStateProps> = ({ message, onRetry }) => (
+  <div className="xx-history-empty">
+    <div className="xx-history-empty-icon">❌</div>
+    <h3>加载失败</h3>
+    <p>{message || "网络异常，请稍后重试"}</p>
+    <Button buttonType="primary" buttonSize="md" onClick={onRetry}>
+      重新加载
+    </Button>
+  </div>
+)
+
+interface EmptyStateProps {
+  activeTab?: string
+}
+
+/** 空状态 */
+export const EmptyState: React.FC<EmptyStateProps> = ({ activeTab = "all" }) => (
+  <div className="xx-history-empty">
+    <div className="xx-history-empty-icon">📭</div>
+    <h3>暂无任务记录</h3>
+    <p>{activeTab === "all" ? "点击上方按钮开始创建任务" : "当前分类下没有任务"}</p>
+  </div>
+)
+
+/** 页面头部 */
+export const PageHeader: React.FC = () => (
+  <div className="xx-history-header">
+    <h2>任务历史</h2>
+    <p>查看和管理所有生成任务</p>
+  </div>
+)

apps/web/src/pages/history/components/TaskList.tsx

@@ -0,0 +1,142 @@
+import React from "react"
+import { Button } from "@/components/ui"
+import type { TabConfig } from "../constants"
+import type { MappedTask } from "../hooks/useTaskHistory"
+import { statusLabel } from "../constants"
+
+interface HistoryTabsProps {
+  tabs: TabConfig[]
+  activeTab: string
+  tabCounts: Record<string, number>
+  onChange: (key: string) => void
+}
+
+/** Tab 切换栏 */
+export const HistoryTabs: React.FC<HistoryTabsProps> = ({
+  tabs,
+  activeTab,
+  tabCounts,
+  onChange,
+}) => (
+  <div className="xx-history-tabs">
+    {tabs.map((tab) => (
+      <button
+        key={tab.key}
+        className={`xx-history-tab${activeTab === tab.key ? " active" : ""}`}
+        onClick={() => onChange(tab.key)}
+      >
+        {tab.label}
+        <span className="xx-history-tab-count">{tabCounts[tab.key]}</span>
+      </button>
+    ))}
+  </div>
+)
+
+interface TaskItemProps {
+  task: MappedTask
+  onRetry: (id: string) => void
+  onView: (id: string) => void
+  retryLoading?: boolean
+}
+
+/** 单个任务卡片 */
+export const TaskItem: React.FC<TaskItemProps> = ({ task, onRetry, onView, retryLoading }) => {
+  const getSubText = () => {
+    switch (task.status) {
+      case "completed":
+        return "完成"
+      case "processing":
+        return `进度 ${task.progress}%`
+      case "failed":
+        return task.errorMessage || "请重试"
+      default:
+        return "等待中"
+    }
+  }
+
+  return (
+    <div className="xx-history-task-item">
+      {/* 任务信息 */}
+      <div className="xx-history-task-info">
+        <h4>{task.name}</h4>
+        <span>
+          {task.type} · 模板：{task.template}
+        </span>
+      </div>
+
+      {/* 状态标签 */}
+      <span className={`xx-history-status xx-history-status--${task.status}`}>
+        {statusLabel[task.status]}
+      </span>
+
+      {/* 时间区 */}
+      <div className="xx-history-task-time">
+        <span>{task.date}</span>
+        <span>{getSubText()}</span>
+      </div>
+
+      {/* 操作按钮 */}
+      <div className="xx-history-task-action">
+        {task.status === "failed" && task.retryable ? (
+          <Button
+            buttonType="ghost"
+            buttonSize="sm"
+            onClick={() => onRetry(task.id)}
+            disabled={retryLoading}
+          >
+            {retryLoading ? "重试中..." : "重试"}
+          </Button>
+        ) : (
+          <Button buttonType="ghost" buttonSize="sm" onClick={() => onView(task.id)}>
+            查看
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  total: number
+  onChange: (page: number) => void
+}
+
+/** 分页组件 */
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  total,
+  onChange,
+}) => {
+  if (totalPages <= 1) return null
+  return (
+    <div className="xx-history-pagination">
+      <button
+        className="xx-history-page-btn"
+        disabled={currentPage === 1}
+        onClick={() => onChange(currentPage - 1)}
+      >
+        ‹
+      </button>
+      {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+        <button
+          key={page}
+          className={`xx-history-page-btn${currentPage === page ? " active" : ""}`}
+          onClick={() => onChange(page)}
+        >
+          {page}
+        </button>
+      ))}
+      <button
+        className="xx-history-page-btn"
+        disabled={currentPage === totalPages}
+        onClick={() => onChange(currentPage + 1)}
+      >
+        ›
+      </button>
+      <span className="xx-history-page-info">共 {total} 条</span>
+    </div>
+  )
+}

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

@@ -0,0 +1,28 @@
+/** 任务状态 */
+export type TaskStatus = "completed" | "processing" | "pending" | "failed"
+
+/** 状态标签 */
+export const statusLabel: Record<TaskStatus, string> = {
+  completed: "已完成",
+  processing: "进行中",
+  pending: "排队中",
+  failed: "失败",
+}
+
+/** Tab 配置 */
+export interface TabConfig {
+  key: string
+  label: string
+  statusFilter?: TaskStatus
+}
+
+/** 默认 Tab 列表 */
+export const TABS: TabConfig[] = [
+  { key: "all", label: "全部" },
+  { key: "processing", label: "进行中", statusFilter: "processing" },
+  { key: "completed", label: "已完成", statusFilter: "completed" },
+  { key: "failed", label: "失败", statusFilter: "failed" },
+]
+
+/** 每页数量 */
+export const PAGE_SIZE = 10

apps/web/src/pages/history/hooks/useTaskHistory.ts

@@ -0,0 +1,131 @@
+import { useState, useMemo, useCallback } from "react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { getUserTasks, retryTask, type TaskItem } from "@/api/tasks"
+import { TABS, PAGE_SIZE, type TabConfig } from "../constants"
+import { normalizeStatus, formatDate } from "../utils"
+
+/** 映射后的任务列表项 */
+export interface MappedTask {
+  id: string
+  name: string
+  type: string
+  template?: string
+  status: "completed" | "processing" | "pending" | "failed"
+  date: string
+  progress?: number
+  retryable?: boolean
+  errorMessage?: string
+}
+
+/**
+ * 任务历史业务 Hook
+ */
+export const useTaskHistory = () => {
+  const [activeTab, setActiveTab] = useState("all")
+  const [currentPage, setCurrentPage] = useState(1)
+  const queryClient = useQueryClient()
+
+  // 获取任务列表
+  const {
+    data: tasks = [],
+    isLoading,
+    isError,
+    error,
+    refetch,
+  } = useQuery<TaskItem[], Error>({
+    queryKey: ["tasks"],
+    queryFn: getUserTasks,
+    staleTime: 30_000,
+  })
+
+  // 重试 mutation
+  const retryMutation = useMutation({
+    mutationFn: retryTask,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tasks"] })
+    },
+  })
+
+  // 映射后端数据
+  const mappedTasks: MappedTask[] = useMemo(
+    () =>
+      tasks.map((t) => ({
+        id: t.id,
+        name: t.user_message || t.task_type,
+        type: t.task_type,
+        template: t.template_id,
+        status: normalizeStatus(t.status),
+        date: formatDate(t.created_at),
+        progress: t.progress,
+        retryable: t.retryable,
+        errorMessage: t.error_message,
+      })),
+    [tasks],
+  )
+
+  // 当前 Tab 筛选
+  const currentTabConfig: TabConfig | undefined = TABS.find((t) => t.key === activeTab)
+  const statusFilter = currentTabConfig?.statusFilter
+
+  // 过滤任务
+  const filteredTasks = useMemo(
+    () => (statusFilter ? mappedTasks.filter((t) => t.status === statusFilter) : mappedTasks),
+    [mappedTasks, statusFilter],
+  )
+
+  // 各 Tab 计数
+  const tabCounts: Record<string, number> = useMemo(
+    () => ({
+      all: mappedTasks.length,
+      processing: mappedTasks.filter((t) => t.status === "processing").length,
+      completed: mappedTasks.filter((t) => t.status === "completed").length,
+      failed: mappedTasks.filter((t) => t.status === "failed").length,
+    }),
+    [mappedTasks],
+  )
+
+  // 分页
+  const totalPages = Math.ceil(filteredTasks.length / PAGE_SIZE)
+  const paginatedTasks = filteredTasks.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
+
+  // 切换 Tab
+  const handleTabChange = useCallback((key: string) => {
+    setActiveTab(key)
+    setCurrentPage(1)
+  }, [])
+
+  // 重试
+  const handleRetry = useCallback(
+    (taskId: string) => {
+      retryMutation.mutate(taskId)
+    },
+    [retryMutation],
+  )
+
+  // 查看详情
+  const handleView = useCallback((taskId: string) => {
+    // TODO: 跳转到任务详情页（待路由实现）
+    console.log("查看任务:", taskId)
+  }, [])
+
+  return {
+    // 状态
+    activeTab,
+    currentPage,
+    totalPages,
+    // 数据
+    tabs: TABS,
+    tabCounts,
+    paginatedTasks,
+    isLoading,
+    isError,
+    error,
+    retryLoading: retryMutation.isPending,
+    // 操作
+    setCurrentPage,
+    handleTabChange,
+    handleRetry,
+    handleView,
+    refetch,
+  }
+}

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

@@ -0,0 +1,26 @@
+import type { TaskStatus } from "./constants"
+
+/** 将后端 status 字符串映射为前端 TaskStatus */
+export const normalizeStatus = (s: string): TaskStatus => {
+  const map: Record<string, TaskStatus> = {
+    completed: "completed",
+    succeeded: "completed",
+    success: "completed",
+    processing: "processing",
+    running: "processing",
+    pending: "pending",
+    queued: "pending",
+    failed: "failed",
+    error: "failed",
+  }
+  return map[s] ?? "pending"
+}
+
+/** 格式化日期 */
+export const formatDate = (iso?: string | null): string => {
+  if (!iso) return "—"
+  const d = new Date(iso)
+  if (isNaN(d.getTime())) return "—"
+  const pad = (n: number) => String(n).padStart(2, "0")
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
+}