Merge branch 'develop' into refactor/products-api

将 174 行的 products.ts 拆分为目录化结构：
- types.ts: 类型定义（ProductItem/VideoItem/ReviewStatus 等）
- utils.ts: 数据转换函数（mapVideoToProductItem）
- products.ts: 全部 7 个 API 函数
- index.ts: 统一入口 re-export，保持 @/api/products 路径向后兼容

主入口从 174 行减少到约 40 行，按职责清晰分层。

apps/web/src/api/products.ts

@@ -1,174 +0,0 @@
-/**
- * 成品 / 视频相关 API
- * 后端实际接口：/videos
- */
-import apiClient from "./client"
-
-/** 复核状态 */
-export type ReviewStatus = "pending_review" | "approved" | "rejected"
-
-/** 成品条目 */
-export interface ProductItem {
-  id: string
-  title: string
-  video_url?: string
-  thumbnail_url?: string
-  duration_seconds?: number
-  file_size?: number
-  resolution?: string
-  status: "processing" | "completed" | "failed"
-  /** 复核状态 */
-  review_status?: ReviewStatus
-  /** 所属项目 ID */
-  project_id?: string
-  /** 所属项目名称 */
-  project_name?: string
-  /** 查重率（百分比） */
-  duplicate_rate?: number
-  created_at?: string
-  updated_at?: string
-}
-
-/** 列表查询参数 */
-export interface ProductListParams {
-  page?: number
-  page_size?: number
-  project_id?: string
-  review_status?: ReviewStatus | "all"
-}
-
-/** 分页响应 */
-export interface ProductListResponse {
-  items: ProductItem[]
-  total: number
-  page: number
-  page_size: number
-}
-
-/** 批量下载任务状态 */
-export interface BatchDownloadStatus {
-  job_id: string
-  status: "processing" | "completed" | "failed"
-  /** 完成后返回的下载 URL */
-  download_url?: string
-  /** 进度百分比 */
-  progress?: number
-}
-
-/** 后端 /videos 接口返回的原始视频条目 */
-interface VideoItem {
-  id: string
-  project_id: string
-  generation_task_id: string
-  name: string
-  file_url: string
-  file_size: number
-  duration: number
-  thumbnail_url: string | null
-  width: number
-  height: number
-  fps: number
-  status: string
-  review_status: ReviewStatus
-  generation_params: Record<string, unknown>
-  download_url: string
-  generated_at: string
-}
-
-/**
- * 将后端 VideoItem 映射为 ProductItem 格式
- */
-function mapVideoToProductItem(video: VideoItem): ProductItem {
-  return {
-    id: video.id,
-    title: video.name || "未命名视频",
-    // 优先用 download_url（带签名）播放，file_url 无签名无法访问
-    video_url: video.download_url || video.file_url,
-    thumbnail_url: video.thumbnail_url || undefined,
-    duration_seconds: video.duration,
-    file_size: video.file_size,
-    resolution: video.width && video.height ? `${video.width}x${video.height}` : undefined,
-    status:
-      video.status === "completed"
-        ? "completed"
-        : video.status === "failed"
-          ? "failed"
-          : "processing",
-    review_status: video.review_status,
-    project_id: video.project_id,
-    // 后端 /videos 接口暂无 project_name 字段
-    project_name: undefined,
-    // 后端字段名为 generated_at，映射为 created_at 供前端统一使用
-    created_at: video.generated_at,
-    updated_at: video.generated_at,
-    // 后端 /videos 接口暂无 duplicate_rate 字段
-    duplicate_rate: undefined,
-  }
-}
-
-/** 获取成品列表（支持分页和筛选） */
-export const getProducts = async (params?: ProductListParams): Promise<ProductItem[]> => {
-  const response = await apiClient.get("/videos", { params })
-  const data = response.data
-  const videos: VideoItem[] = Array.isArray(data?.items)
-    ? data.items
-    : Array.isArray(data)
-      ? data
-      : []
-  return videos.map(mapVideoToProductItem)
-}
-
-/** 获取单个成品详情 */
-export const getProduct = async (productId: string): Promise<ProductItem> => {
-  const response = await apiClient.get(`/videos/${productId}`)
-  return mapVideoToProductItem(response.data as VideoItem)
-}
-
-/**
- * 删除成品
- * 注意：后端暂未实现 /videos DELETE 接口，调用会返回 405
- * 待后端实现后自动生效
- */
-export const deleteProduct = async (productId: string): Promise<void> => {
-  await apiClient.delete(`/videos/${productId}`)
-}
-
-/**
- * 获取成品下载链接
- * 直接使用列表返回的 download_url（带OSS签名）
- */
-export const getProductDownloadUrl = async (
-  productId: string,
-): Promise<{ url: string; expires_at: string }> => {
-  // 优先从列表缓存取；如果没有则调详情接口
-  const product = await getProduct(productId)
-  if (!product.video_url) throw new Error("下载链接不可用")
-  return { url: product.video_url, expires_at: "" }
-}
-
-/** 更新复核状态 — TODO: 后端暂无对应端点，暂存本地状态 */
-export const updateReviewStatus = async (
-  productId: string,
-  status: ReviewStatus,
-): Promise<ProductItem> => {
-  // 后端暂无 /videos/{id}/review 端点
-  // 暂时返回当前状态，后续可扩展
-  const product = await getProduct(productId)
-  return { ...product, review_status: status }
-}
-
-/** 发起批量下载 — TODO: 后端暂无对应端点 */
-export const batchDownload = async (videoIds: string[]): Promise<{ job_id: string }> => {
-  // 后端暂无 /videos/batch-download 端点
-  // 暂时返回模拟 job_id，后续可扩展
-  console.warn("[batchDownload] 后端暂无批量下载端点", videoIds)
-  return { job_id: `mock-${Date.now()}` }
-}
-
-/** 查询批量下载状态 — TODO: 后端暂无对应端点 */
-export const getBatchDownloadStatus = async (jobId: string): Promise<BatchDownloadStatus> => {
-  // 后端暂无 /videos/batch-download/{jobId} 端点
-  // 暂时返回模拟状态，后续可扩展
-  console.warn("[getBatchDownloadStatus] 后端暂无批量下载状态端点", jobId)
-  return { job_id: jobId, status: "processing", progress: 0 }
-}

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

@@ -0,0 +1,28 @@
+/**
+ * 成品 / 视频相关 API — 目录化入口
+ * 保持与原 products.ts 相同导出，向后兼容
+ */
+
+// 类型
+export type {
+  ReviewStatus,
+  ProductItem,
+  ProductListParams,
+  ProductListResponse,
+  BatchDownloadStatus,
+  VideoItem,
+} from "./types"
+
+// 工具函数
+export { mapVideoToProductItem } from "./utils"
+
+// API 函数
+export {
+  getProducts,
+  getProduct,
+  deleteProduct,
+  getProductDownloadUrl,
+  updateReviewStatus,
+  batchDownload,
+  getBatchDownloadStatus,
+} from "./products"

apps/web/src/api/products/products.ts

@@ -0,0 +1,80 @@
+/**
+ * 成品 / 视频相关 API 函数
+ * 后端实际接口：/videos
+ */
+import apiClient from "../client"
+import type {
+  BatchDownloadStatus,
+  ProductItem,
+  ProductListParams,
+  VideoItem,
+  ReviewStatus,
+} from "./types"
+import { mapVideoToProductItem } from "./utils"
+
+/** 获取成品列表（支持分页和筛选） */
+export const getProducts = async (params?: ProductListParams): Promise<ProductItem[]> => {
+  const response = await apiClient.get("/videos", { params })
+  const data = response.data
+  const videos: VideoItem[] = Array.isArray(data?.items)
+    ? data.items
+    : Array.isArray(data)
+      ? data
+      : []
+  return videos.map(mapVideoToProductItem)
+}
+
+/** 获取单个成品详情 */
+export const getProduct = async (productId: string): Promise<ProductItem> => {
+  const response = await apiClient.get(`/videos/${productId}`)
+  return mapVideoToProductItem(response.data as VideoItem)
+}
+
+/**
+ * 删除成品
+ * 注意：后端暂未实现 /videos DELETE 接口，调用会返回 405
+ * 待后端实现后自动生效
+ */
+export const deleteProduct = async (productId: string): Promise<void> => {
+  await apiClient.delete(`/videos/${productId}`)
+}
+
+/**
+ * 获取成品下载链接
+ * 直接使用列表返回的 download_url（带OSS签名）
+ */
+export const getProductDownloadUrl = async (
+  productId: string,
+): Promise<{ url: string; expires_at: string }> => {
+  // 优先从列表缓存取；如果没有则调详情接口
+  const product = await getProduct(productId)
+  if (!product.video_url) throw new Error("下载链接不可用")
+  return { url: product.video_url, expires_at: "" }
+}
+
+/** 更新复核状态 — TODO: 后端暂无对应端点，暂存本地状态 */
+export const updateReviewStatus = async (
+  productId: string,
+  status: ReviewStatus,
+): Promise<ProductItem> => {
+  // 后端暂无 /videos/{id}/review 端点
+  // 暂时返回当前状态，后续可扩展
+  const product = await getProduct(productId)
+  return { ...product, review_status: status }
+}
+
+/** 发起批量下载 — TODO: 后端暂无对应端点 */
+export const batchDownload = async (videoIds: string[]): Promise<{ job_id: string }> => {
+  // 后端暂无 /videos/batch-download 端点
+  // 暂时返回模拟 job_id，后续可扩展
+  console.warn("[batchDownload] 后端暂无批量下载端点", videoIds)
+  return { job_id: `mock-${Date.now()}` }
+}
+
+/** 查询批量下载状态 — TODO: 后端暂无对应端点 */
+export const getBatchDownloadStatus = async (jobId: string): Promise<BatchDownloadStatus> => {
+  // 后端暂无 /videos/batch-download/{jobId} 端点
+  // 暂时返回模拟状态，后续可扩展
+  console.warn("[getBatchDownloadStatus] 后端暂无批量下载状态端点", jobId)
+  return { job_id: jobId, status: "processing", progress: 0 }
+}

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

@@ -0,0 +1,74 @@
+/**
+ * 成品 / 视频相关类型定义
+ */
+
+/** 复核状态 */
+export type ReviewStatus = "pending_review" | "approved" | "rejected"
+
+/** 成品条目 */
+export interface ProductItem {
+  id: string
+  title: string
+  video_url?: string
+  thumbnail_url?: string
+  duration_seconds?: number
+  file_size?: number
+  resolution?: string
+  status: "processing" | "completed" | "failed"
+  /** 复核状态 */
+  review_status?: ReviewStatus
+  /** 所属项目 ID */
+  project_id?: string
+  /** 所属项目名称 */
+  project_name?: string
+  /** 查重率（百分比） */
+  duplicate_rate?: number
+  created_at?: string
+  updated_at?: string
+}
+
+/** 列表查询参数 */
+export interface ProductListParams {
+  page?: number
+  page_size?: number
+  project_id?: string
+  review_status?: ReviewStatus | "all"
+}
+
+/** 分页响应 */
+export interface ProductListResponse {
+  items: ProductItem[]
+  total: number
+  page: number
+  page_size: number
+}
+
+/** 批量下载任务状态 */
+export interface BatchDownloadStatus {
+  job_id: string
+  status: "processing" | "completed" | "failed"
+  /** 完成后返回的下载 URL */
+  download_url?: string
+  /** 进度百分比 */
+  progress?: number
+}
+
+/** 后端 /videos 接口返回的原始视频条目 */
+export interface VideoItem {
+  id: string
+  project_id: string
+  generation_task_id: string
+  name: string
+  file_url: string
+  file_size: number
+  duration: number
+  thumbnail_url: string | null
+  width: number
+  height: number
+  fps: number
+  status: string
+  review_status: ReviewStatus
+  generation_params: Record<string, unknown>
+  download_url: string
+  generated_at: string
+}

apps/web/src/api/products/utils.ts

@@ -0,0 +1,35 @@
+/**
+ * 成品数据转换工具函数
+ */
+import type { ProductItem, VideoItem } from "./types"
+
+/**
+ * 将后端 VideoItem 映射为 ProductItem 格式
+ */
+export function mapVideoToProductItem(video: VideoItem): ProductItem {
+  return {
+    id: video.id,
+    title: video.name || "未命名视频",
+    // 优先用 download_url（带签名）播放，file_url 无签名无法访问
+    video_url: video.download_url || video.file_url,
+    thumbnail_url: video.thumbnail_url || undefined,
+    duration_seconds: video.duration,
+    file_size: video.file_size,
+    resolution: video.width && video.height ? `${video.width}x${video.height}` : undefined,
+    status:
+      video.status === "completed"
+        ? "completed"
+        : video.status === "failed"
+          ? "failed"
+          : "processing",
+    review_status: video.review_status,
+    project_id: video.project_id,
+    // 后端 /videos 接口暂无 project_name 字段
+    project_name: undefined,
+    // 后端字段名为 generated_at，映射为 created_at 供前端统一使用
+    created_at: video.generated_at,
+    updated_at: video.generated_at,
+    // 后端 /videos 接口暂无 duplicate_rate 字段
+    duplicate_rate: undefined,
+  }
+}

apps/web/src/pages/duplication/DuplicationResults.tsx

@@ -2,27 +2,130 @@
  * 查重结果列表页面 — V21 设计系统
  * 胶囊筛选 + 卡片列表，零 antd 依赖
  */
-import React from "react"
-import { Button } from "@/components/ui"
-import PageHead from "@/components/layout/PageHead"
+import React, { useState, useMemo } from "react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { Button, Tag, Tooltip } from "@/components/ui"
+import { useNavigate } from "react-router-dom"
+import {
+  getDuplicationRecords,
+  deleteDuplicationRecord,
+  retryDuplication,
+  type DuplicationStatus,
+} from "@/api/duplication"
 import "./duplication.css"
-import useDuplicationResults from "./hooks/useDuplicationResults"
-import FilterBar from "./components/FilterBar"
-import EmptyState from "./components/EmptyState"
-import ResultCard from "./components/ResultCard"
+import PageHead from "@/components/layout/PageHead"
+
+/** 风险等级分类 */
+type RiskFilter = "all" | "high" | "medium" | "low"
+
+/** 状态配置 */
+const STATUS_CONFIG: Record<
+  DuplicationStatus,
+  {
+    variant: "primary" | "warning" | "success" | "error"
+    text: string
+    icon: string
+  }
+> = {
+  pending: { variant: "primary", text: "等待中", icon: "⏳" },
+  processing: { variant: "warning", text: "查重中", icon: "🔄" },
+  completed: { variant: "success", text: "已完成", icon: "✅" },
+  failed: { variant: "error", text: "失败", icon: "❌" },
+}
+
+/** 根据查重率获取风险等级 */
+const getRiskLevel = (rate?: number): "low" | "medium" | "high" => {
+  if (rate === undefined) return "low"
+  if (rate <= 10) return "low"
+  if (rate <= 30) return "medium"
+  return "high"
+}
+
+/** 风险等级标签 */
+const RISK_LABELS: Record<string, string> = {
+  low: "低风险",
+  medium: "中风险",
+  high: "高风险",
+}
+
+/** 格式化文件大小 */
+const formatSize = (bytes: number) => {
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
+}
+
+/** 格式化时长 */
+const formatDuration = (seconds?: number) => {
+  if (!seconds) return "-"
+  const totalSec = Math.round(seconds)
+  const m = Math.floor(totalSec / 60)
+  const s = totalSec % 60
+  return m > 0 ? `${m}分${s}秒` : `${s}秒`
+}
+
+/** 简易 toast */
+interface ToastState {
+  message: string
+  type: "success" | "error" | "warning"
+}
+
+const FILTER_OPTIONS: { key: RiskFilter; label: string }[] = [
+  { key: "all", label: "全部" },
+  { key: "low", label: "低风险" },
+  { key: "medium", label: "中风险" },
+  { key: "high", label: "高风险" },
+]
 
 const DuplicationResults: React.FC = () => {
-  const {
-    isLoading,
-    filteredRecords,
-    riskFilter,
-    setRiskFilter,
-    toast,
-    handleDelete,
-    handleRetry,
-    handleView,
-    handleUpload,
-  } = useDuplicationResults()
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [riskFilter, setRiskFilter] = useState<RiskFilter>("all")
+  const [toast, setToast] = useState<ToastState | null>(null)
+
+  const showToast = (message: string, type: "success" | "error" | "warning") => {
+    setToast({ message, type })
+    setTimeout(() => setToast(null), 3000)
+  }
+
+  // 获取查重记录
+  const { data: records = [], isLoading } = useQuery({
+    queryKey: ["duplication-records"],
+    queryFn: getDuplicationRecords,
+  })
+
+  // 删除
+  const deleteMutation = useMutation({
+    mutationFn: deleteDuplicationRecord,
+    onSuccess: () => {
+      showToast("已删除", "success")
+      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
+    },
+    onError: () => {
+      showToast("删除失败", "error")
+    },
+  })
+
+  // 重新查重
+  const retryMutation = useMutation({
+    mutationFn: retryDuplication,
+    onSuccess: () => {
+      showToast("已重新提交查重", "success")
+      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
+    },
+    onError: () => {
+      showToast("重新查重失败", "error")
+    },
+  })
+
+  /** 按风险等级筛选 */
+  const filteredRecords = useMemo(() => {
+    if (riskFilter === "all") return records
+    return records.filter((r) => {
+      if (r.status !== "completed") return riskFilter === "low"
+      return getRiskLevel(r.duplicate_rate) === riskFilter
+    })
+  }, [records, riskFilter])
 
   return (
     <div className="dup-page">
@@ -33,31 +136,136 @@ const DuplicationResults: React.FC = () => {
         title="查重记录"
         actions={
           <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
-            <FilterBar value={riskFilter} onChange={setRiskFilter} />
-            <Button buttonType="primary" buttonSize="md" onClick={handleUpload}>
+            {/* 筛选胶囊 */}
+            <div className="dup-filter">
+              {FILTER_OPTIONS.map((opt) => (
+                <button
+                  key={opt.key}
+                  className={`dup-filter-btn ${riskFilter === opt.key ? "active" : ""}`}
+                  onClick={() => setRiskFilter(opt.key)}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+            <Button
+              buttonType="primary"
+              buttonSize="md"
+              onClick={() => navigate("/app/duplication")}
+            >
               📤 上传查重
             </Button>
           </div>
         }
       />
 
-      {/* 加载中 / 空状态 */}
-      {(isLoading || filteredRecords.length === 0) && (
-        <EmptyState isLoading={isLoading} riskFilter={riskFilter} />
+      {/* 加载中 */}
+      {isLoading && (
+        <div className="dup-results-empty">
+          <div className="dup-results-empty-icon">⏳</div>
+          <p>加载中...</p>
+        </div>
+      )}
+
+      {/* 空状态 */}
+      {!isLoading && filteredRecords.length === 0 && (
+        <div className="dup-results-empty">
+          <div className="dup-results-empty-icon">📭</div>
+          <p>
+            {riskFilter === "all"
+              ? "暂无查重记录，上传视频开始查重吧"
+              : `没有${RISK_LABELS[riskFilter]}的记录`}
+          </p>
+        </div>
       )}
 
       {/* 结果卡片列表 */}
       {!isLoading && filteredRecords.length > 0 && (
         <div className="dup-results-list">
-          {filteredRecords.map((record) => (
-            <ResultCard
-              key={record.id}
-              record={record}
-              onView={handleView}
-              onDelete={handleDelete}
-              onRetry={handleRetry}
-            />
-          ))}
+          {filteredRecords.map((record) => {
+            const statusCfg = STATUS_CONFIG[record.status]
+            const riskLevel = getRiskLevel(record.duplicate_rate)
+            const rateValue = record.duplicate_rate
+
+            return (
+              <div
+                key={record.id}
+                className="dup-result-card"
+                onClick={() => {
+                  if (record.status === "completed") {
+                    navigate(`/duplication/${record.id}`)
+                  }
+                }}
+              >
+                {/* 缩略图 */}
+                <div className="dup-result-card-thumb">🎬</div>
+
+                {/* 信息区 */}
+                <div className="dup-result-card-body">
+                  <h4>{record.filename}</h4>
+                  <div className="dup-result-card-meta">
+                    <Tag variant={statusCfg.variant}>
+                      {statusCfg.icon} {statusCfg.text}
+                    </Tag>
+                    <span>{formatSize(record.file_size)}</span>
+                    <span>{formatDuration(record.duration_seconds)}</span>
+                    <span>{new Date(record.created_at).toLocaleDateString("zh-CN")}</span>
+                    {record.status === "completed" && record.duplicate_count !== undefined && (
+                      <span>{record.duplicate_count} 个重复片段</span>
+                    )}
+                  </div>
+                </div>
+
+                {/* 查重率 */}
+                <div className="dup-result-card-score">
+                  {record.status === "completed" && rateValue !== undefined ? (
+                    <>
+                      <div className="dup-score-bar">
+                        <div
+                          className={`dup-score-bar-fill ${riskLevel}`}
+                          style={{ width: `${Math.min(rateValue, 100)}%` }}
+                        />
+                      </div>
+                      <span className={`dup-score-value ${riskLevel}`}>
+                        {rateValue.toFixed(1)}%
+                      </span>
+                    </>
+                  ) : record.status === "failed" ? (
+                    <Tooltip title="重新查重">
+                      <Button
+                        buttonType="ghost"
+                        buttonSize="sm"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          retryMutation.mutate(record.id)
+                        }}
+                      >
+                        🔄 重试
+                      </Button>
+                    </Tooltip>
+                  ) : (
+                    <span style={{ color: "var(--text-secondary)", fontSize: 12 }}>
+                      {record.status === "processing" ? "分析中..." : "—"}
+                    </span>
+                  )}
+                </div>
+
+                {/* 删除按钮 */}
+                <Button
+                  buttonType="ghost"
+                  buttonSize="sm"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (window.confirm("确定删除此记录？")) {
+                      deleteMutation.mutate(record.id)
+                    }
+                  }}
+                >
+                  🗑️
+                </Button>
+              </div>
+            )
+          })}
         </div>
       )}
     </div>

apps/web/src/pages/duplication/components/EmptyState.tsx

@@ -1,32 +0,0 @@
-import React from "react"
-import { RISK_LABELS } from "../constants"
-import type { RiskFilter } from "../types"
-
-interface EmptyStateProps {
-  isLoading: boolean
-  riskFilter: RiskFilter
-}
-
-const EmptyState: React.FC<EmptyStateProps> = ({ isLoading, riskFilter }) => {
-  if (isLoading) {
-    return (
-      <div className="dup-results-empty">
-        <div className="dup-results-empty-icon">⏳</div>
-        <p>加载中...</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="dup-results-empty">
-      <div className="dup-results-empty-icon">📭</div>
-      <p>
-        {riskFilter === "all"
-          ? "暂无查重记录，上传视频开始查重吧"
-          : `没有${RISK_LABELS[riskFilter]}的记录`}
-      </p>
-    </div>
-  )
-}
-
-export default EmptyState

apps/web/src/pages/duplication/components/FilterBar.tsx

@@ -1,26 +0,0 @@
-import React from "react"
-import type { RiskFilter } from "../types"
-import { FILTER_OPTIONS } from "../constants"
-
-interface FilterBarProps {
-  value: RiskFilter
-  onChange: (value: RiskFilter) => void
-}
-
-const FilterBar: React.FC<FilterBarProps> = ({ value, onChange }) => {
-  return (
-    <div className="dup-filter">
-      {FILTER_OPTIONS.map((opt) => (
-        <button
-          key={opt.key}
-          className={`dup-filter-btn ${value === opt.key ? "active" : ""}`}
-          onClick={() => onChange(opt.key)}
-        >
-          {opt.label}
-        </button>
-      ))}
-    </div>
-  )
-}
-
-export default FilterBar

apps/web/src/pages/duplication/components/ResultCard.tsx

@@ -1,95 +0,0 @@
-import React from "react"
-import { Button, Tag, Tooltip } from "@/components/ui"
-import type { DuplicationRecord } from "@/api/duplication"
-import { STATUS_CONFIG } from "../constants"
-import { getRiskLevel, formatSize, formatDuration } from "../utils"
-
-interface ResultCardProps {
-  record: DuplicationRecord
-  onView: (id: string) => void
-  onDelete: (id: string) => void
-  onRetry: (id: string) => void
-}
-
-const ResultCard: React.FC<ResultCardProps> = ({ record, onView, onDelete, onRetry }) => {
-  const statusCfg = STATUS_CONFIG[record.status]
-  const riskLevel = getRiskLevel(record.duplicate_rate)
-  const rateValue = record.duplicate_rate
-
-  const handleClick = () => {
-    if (record.status === "completed") {
-      onView(record.id)
-    }
-  }
-
-  return (
-    <div key={record.id} className="dup-result-card" onClick={handleClick}>
-      {/* 缩略图 */}
-      <div className="dup-result-card-thumb">🎬</div>
-
-      {/* 信息区 */}
-      <div className="dup-result-card-body">
-        <h4>{record.filename}</h4>
-        <div className="dup-result-card-meta">
-          <Tag variant={statusCfg.variant}>
-            {statusCfg.icon} {statusCfg.text}
-          </Tag>
-          <span>{formatSize(record.file_size)}</span>
-          <span>{formatDuration(record.duration_seconds)}</span>
-          <span>{new Date(record.created_at).toLocaleDateString("zh-CN")}</span>
-          {record.status === "completed" && record.duplicate_count !== undefined && (
-            <span>{record.duplicate_count} 个重复片段</span>
-          )}
-        </div>
-      </div>
-
-      {/* 查重率 */}
-      <div className="dup-result-card-score">
-        {record.status === "completed" && rateValue !== undefined ? (
-          <>
-            <div className="dup-score-bar">
-              <div
-                className={`dup-score-bar-fill ${riskLevel}`}
-                style={{ width: `${Math.min(rateValue, 100)}%` }}
-              />
-            </div>
-            <span className={`dup-score-value ${riskLevel}`}>{rateValue.toFixed(1)}%</span>
-          </>
-        ) : record.status === "failed" ? (
-          <Tooltip title="重新查重">
-            <Button
-              buttonType="ghost"
-              buttonSize="sm"
-              onClick={(e) => {
-                e.stopPropagation()
-                onRetry(record.id)
-              }}
-            >
-              🔄 重试
-            </Button>
-          </Tooltip>
-        ) : (
-          <span style={{ color: "var(--text-secondary)", fontSize: 12 }}>
-            {record.status === "processing" ? "分析中..." : "—"}
-          </span>
-        )}
-      </div>
-
-      {/* 删除按钮 */}
-      <Button
-        buttonType="ghost"
-        buttonSize="sm"
-        onClick={(e) => {
-          e.stopPropagation()
-          if (window.confirm("确定删除此记录？")) {
-            onDelete(record.id)
-          }
-        }}
-      >
-        🗑️
-      </Button>
-    </div>
-  )
-}
-
-export default ResultCard

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

@@ -1,31 +0,0 @@
-import type { DuplicationStatus } from "@/api/duplication"
-import type { RiskFilter } from "./types"
-
-/** 状态配置 */
-export const STATUS_CONFIG: Record<
-  DuplicationStatus,
-  {
-    variant: "primary" | "warning" | "success" | "error"
-    text: string
-    icon: string
-  }
-> = {
-  pending: { variant: "primary", text: "等待中", icon: "⏳" },
-  processing: { variant: "warning", text: "查重中", icon: "🔄" },
-  completed: { variant: "success", text: "已完成", icon: "✅" },
-  failed: { variant: "error", text: "失败", icon: "❌" },
-}
-
-/** 风险等级标签 */
-export const RISK_LABELS: Record<string, string> = {
-  low: "低风险",
-  medium: "中风险",
-  high: "高风险",
-}
-
-export const FILTER_OPTIONS: { key: RiskFilter; label: string }[] = [
-  { key: "all", label: "全部" },
-  { key: "low", label: "低风险" },
-  { key: "medium", label: "中风险" },
-  { key: "high", label: "高风险" },
-]

apps/web/src/pages/duplication/hooks/useDuplicationResults.ts

@@ -1,106 +0,0 @@
-import { useState, useMemo } from "react"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { useNavigate } from "react-router-dom"
-import {
-  getDuplicationRecords,
-  deleteDuplicationRecord,
-  retryDuplication,
-  type DuplicationRecord,
-} from "@/api/duplication"
-import type { RiskFilter, ToastState } from "../types"
-import { getRiskLevel } from "../utils"
-
-interface UseDuplicationResultsReturn {
-  records: DuplicationRecord[]
-  isLoading: boolean
-  filteredRecords: DuplicationRecord[]
-  riskFilter: RiskFilter
-  setRiskFilter: (filter: RiskFilter) => void
-  toast: ToastState | null
-  handleDelete: (id: string) => void
-  handleRetry: (id: string) => void
-  handleView: (id: string) => void
-  handleUpload: () => void
-}
-
-const useDuplicationResults = (): UseDuplicationResultsReturn => {
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
-  const [riskFilter, setRiskFilter] = useState<RiskFilter>("all")
-  const [toast, setToast] = useState<ToastState | null>(null)
-
-  const showToast = (message: string, type: "success" | "error" | "warning") => {
-    setToast({ message, type })
-    setTimeout(() => setToast(null), 3000)
-  }
-
-  // 获取查重记录
-  const { data: records = [], isLoading } = useQuery({
-    queryKey: ["duplication-records"],
-    queryFn: getDuplicationRecords,
-  })
-
-  // 删除
-  const deleteMutation = useMutation({
-    mutationFn: deleteDuplicationRecord,
-    onSuccess: () => {
-      showToast("已删除", "success")
-      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
-    },
-    onError: () => {
-      showToast("删除失败", "error")
-    },
-  })
-
-  // 重新查重
-  const retryMutation = useMutation({
-    mutationFn: retryDuplication,
-    onSuccess: () => {
-      showToast("已重新提交查重", "success")
-      queryClient.invalidateQueries({ queryKey: ["duplication-records"] })
-    },
-    onError: () => {
-      showToast("重新查重失败", "error")
-    },
-  })
-
-  /** 按风险等级筛选 */
-  const filteredRecords = useMemo(() => {
-    if (riskFilter === "all") return records
-    return records.filter((r) => {
-      if (r.status !== "completed") return riskFilter === "low"
-      return getRiskLevel(r.duplicate_rate) === riskFilter
-    })
-  }, [records, riskFilter])
-
-  const handleDelete = (id: string) => {
-    deleteMutation.mutate(id)
-  }
-
-  const handleRetry = (id: string) => {
-    retryMutation.mutate(id)
-  }
-
-  const handleView = (id: string) => {
-    navigate(`/duplication/${id}`)
-  }
-
-  const handleUpload = () => {
-    navigate("/app/duplication")
-  }
-
-  return {
-    records,
-    isLoading,
-    filteredRecords,
-    riskFilter,
-    setRiskFilter,
-    toast,
-    handleDelete,
-    handleRetry,
-    handleView,
-    handleUpload,
-  }
-}
-
-export default useDuplicationResults

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

@@ -1,8 +0,0 @@
-/** 风险等级分类 */
-export type RiskFilter = "all" | "high" | "medium" | "low"
-
-/** 简易 toast */
-export interface ToastState {
-  message: string
-  type: "success" | "error" | "warning"
-}

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

@@ -1,23 +0,0 @@
-/** 根据查重率获取风险等级 */
-export const getRiskLevel = (rate?: number): "low" | "medium" | "high" => {
-  if (rate === undefined) return "low"
-  if (rate <= 10) return "low"
-  if (rate <= 30) return "medium"
-  return "high"
-}
-
-/** 格式化文件大小 */
-export const formatSize = (bytes: number) => {
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
-  return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
-}
-
-/** 格式化时长 */
-export const formatDuration = (seconds?: number) => {
-  if (!seconds) return "-"
-  const totalSec = Math.round(seconds)
-  const m = Math.floor(totalSec / 60)
-  const s = totalSec % 60
-  return m > 0 ? `${m}分${s}秒` : `${s}秒`
-}