refactor(product-library): Phase 3 - extract useProductList and useProductActions hooks #918
@@ -2,11 +2,18 @@
|
||||
* 成片库页面 — V21 设计系统
|
||||
* 卡片网格布局，支持视频播放/下载/分享、批量操作、筛选
|
||||
* 使用 useQuery 对接后端真实 API（api/products.ts）
|
||||
*
|
||||
* 代码结构（三阶段重构后）：
|
||||
* - types.ts: 类型定义
|
||||
* - constants.ts: 常量配置
|
||||
* - utils/index.ts: 工具函数
|
||||
* - components/ProductCard.tsx: 产品卡片组件
|
||||
* - components/VideoPlayer.tsx: 视频播放器组件
|
||||
* - hooks/useProductList.ts: 列表查询与筛选
|
||||
* - hooks/useProductActions.ts: 单个/批量操作
|
||||
*/
|
||||
import React, { useMemo, useState } from "react"
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { message, Popconfirm } from "antd"
|
||||
import React, { useState } from "react"
|
||||
import { Popconfirm, message } from "antd"
|
||||
import {
|
||||
SearchOutlined,
|
||||
VideoCameraOutlined,
|
||||
@@ -16,319 +23,66 @@ import {
|
||||
CloudUploadOutlined,
|
||||
} from "@ant-design/icons"
|
||||
import { Button, Input, Select } from "@/components/ui"
|
||||
import {
|
||||
getProducts,
|
||||
deleteProduct,
|
||||
getProductDownloadUrl,
|
||||
updateReviewStatus,
|
||||
batchDownload,
|
||||
getBatchDownloadStatus,
|
||||
type ProductItem as ApiProductItem,
|
||||
type ReviewStatus,
|
||||
} from "@/api/products"
|
||||
import "./products.css"
|
||||
import type { ProductItem } from "./types"
|
||||
import { mapApiProduct, getNextReviewStatus } from "./utils"
|
||||
import { ProductCard } from "./components/ProductCard"
|
||||
import { VideoPlayer } from "./components/VideoPlayer"
|
||||
import { useProductList } from "./hooks/useProductList"
|
||||
import { useProductActions } from "./hooks/useProductActions"
|
||||
import "./products.css"
|
||||
|
||||
/* ============================================================
|
||||
* 主组件
|
||||
* ============================================================ */
|
||||
const ProductLibrary: React.FC = () => {
|
||||
const queryClient = useQueryClient()
|
||||
const navigate = useNavigate()
|
||||
|
||||
/* ── 获取成品列表 ── */
|
||||
const {
|
||||
data: apiProducts = [],
|
||||
products,
|
||||
filteredProducts,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
refetch,
|
||||
} = useQuery<ApiProductItem[], Error>({
|
||||
queryKey: ["products"],
|
||||
queryFn: () => getProducts(),
|
||||
staleTime: 30_000,
|
||||
})
|
||||
|
||||
// 映射为前端类型，按创建时间倒序排列，防御非数组返回
|
||||
const products = useMemo(() => {
|
||||
const list = (Array.isArray(apiProducts) ? apiProducts : []).map(mapApiProduct)
|
||||
// 按创建时间倒序（最新的在最前面），无时间的排最后
|
||||
return list.sort((a, b) => {
|
||||
if (!a.date || a.date === "—") return 1
|
||||
if (!b.date || b.date === "—") return -1
|
||||
return new Date(b.date).getTime() - new Date(a.date).getTime()
|
||||
})
|
||||
}, [apiProducts])
|
||||
|
||||
/* ── 删除 mutation ── */
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: deleteProduct,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["products"] })
|
||||
message.success("已删除")
|
||||
},
|
||||
onError: () => {
|
||||
message.error("删除失败")
|
||||
},
|
||||
})
|
||||
|
||||
/* ── 复核状态 mutation ── */
|
||||
const reviewMutation = useMutation({
|
||||
mutationFn: ({ id, status }: { id: string; status: ReviewStatus }) =>
|
||||
updateReviewStatus(id, status),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["products"] })
|
||||
message.success("复核状态已更新")
|
||||
},
|
||||
onError: () => {
|
||||
message.error("更新复核状态失败")
|
||||
},
|
||||
})
|
||||
|
||||
/* 筛选 */
|
||||
const [searchText, setSearchText] = useState("")
|
||||
const [filterStatus, setFilterStatus] = useState<string>("all")
|
||||
const [filterTime, setFilterTime] = useState<string>("all")
|
||||
const [filterDuration, setFilterDuration] = useState<string>("all")
|
||||
const [filterProject, setFilterProject] = useState<string>("all")
|
||||
const [filterReviewStatus, setFilterReviewStatus] = useState<string>("all")
|
||||
|
||||
/* 批量操作 */
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
|
||||
searchText,
|
||||
setSearchText,
|
||||
filterStatus,
|
||||
setFilterStatus,
|
||||
filterTime,
|
||||
setFilterTime,
|
||||
filterDuration,
|
||||
setFilterDuration,
|
||||
filterProject,
|
||||
setFilterProject,
|
||||
filterReviewStatus,
|
||||
setFilterReviewStatus,
|
||||
projectOptions,
|
||||
selectedIds,
|
||||
batchMode,
|
||||
allSelected,
|
||||
handleSelectAll,
|
||||
handleToggleSelect,
|
||||
clearSelection,
|
||||
} = useProductList()
|
||||
|
||||
/* 播放器 */
|
||||
const [playingProduct, setPlayingProduct] = useState<ProductItem | null>(null)
|
||||
|
||||
/* 派生数据 */
|
||||
const batchMode = selectedIds.size > 0
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
let list = products
|
||||
|
||||
/* 状态筛选 */
|
||||
if (filterStatus !== "all") {
|
||||
list = list.filter((p) => p.status === filterStatus)
|
||||
}
|
||||
|
||||
/* 时间筛选 */
|
||||
if (filterTime !== "all") {
|
||||
const now = new Date()
|
||||
list = list.filter((p) => {
|
||||
const d = new Date(p.date)
|
||||
const diff = (now.getTime() - d.getTime()) / (1000 * 60 * 60 * 24)
|
||||
switch (filterTime) {
|
||||
case "today":
|
||||
return diff < 1
|
||||
case "week":
|
||||
return diff <= 7
|
||||
case "month":
|
||||
return diff <= 30
|
||||
default:
|
||||
return true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* 时长筛选 */
|
||||
if (filterDuration !== "all") {
|
||||
list = list.filter((p) => {
|
||||
switch (filterDuration) {
|
||||
case "short":
|
||||
return p.duration > 0 && p.duration <= 60
|
||||
case "medium":
|
||||
return p.duration > 60 && p.duration <= 180
|
||||
case "long":
|
||||
return p.duration > 180
|
||||
default:
|
||||
return true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* 项目筛选 */
|
||||
if (filterProject !== "all") {
|
||||
list = list.filter((p) => p.projectId === filterProject)
|
||||
}
|
||||
|
||||
/* 复核状态筛选 */
|
||||
if (filterReviewStatus !== "all") {
|
||||
if (filterReviewStatus === "none") {
|
||||
list = list.filter((p) => !p.reviewStatus)
|
||||
} else {
|
||||
list = list.filter((p) => p.reviewStatus === filterReviewStatus)
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索 */
|
||||
if (searchText.trim()) {
|
||||
const q = searchText.trim().toLowerCase()
|
||||
list = list.filter((p) => p.name.toLowerCase().includes(q))
|
||||
}
|
||||
|
||||
return list
|
||||
}, [
|
||||
const {
|
||||
handleDownload,
|
||||
handleShare,
|
||||
handleViewDetail,
|
||||
handleDelete,
|
||||
handlePublish,
|
||||
handleReviewStatusChange,
|
||||
handleBatchDownload,
|
||||
handleBatchDelete,
|
||||
handleBatchPublish,
|
||||
batchDownloading,
|
||||
} = useProductActions({
|
||||
selectedIds,
|
||||
clearSelection,
|
||||
products,
|
||||
filterStatus,
|
||||
filterTime,
|
||||
filterDuration,
|
||||
filterProject,
|
||||
filterReviewStatus,
|
||||
searchText,
|
||||
])
|
||||
setPlayingProduct,
|
||||
})
|
||||
|
||||
/* 全选 */
|
||||
const allSelected =
|
||||
filteredProducts.length > 0 && filteredProducts.every((p) => selectedIds.has(p.id))
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (allSelected) {
|
||||
setSelectedIds(new Set())
|
||||
} else {
|
||||
setSelectedIds(new Set(filteredProducts.map((p) => p.id)))
|
||||
}
|
||||
}
|
||||
|
||||
/* 切换单个选择 */
|
||||
const handleToggleSelect = (id: string) => {
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(id)) {
|
||||
next.delete(id)
|
||||
} else {
|
||||
next.add(id)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
/* 下载 — 调用真实 API 获取下载链接 */
|
||||
const handleDownload = async (product: ProductItem) => {
|
||||
if (product.status !== "completed") return
|
||||
try {
|
||||
const { url } = await getProductDownloadUrl(product.id)
|
||||
// 打开下载链接
|
||||
const a = document.createElement("a")
|
||||
a.href = url
|
||||
a.download = ""
|
||||
a.click()
|
||||
message.success(`正在下载"${product.name}"`)
|
||||
} catch {
|
||||
message.error("获取下载链接失败")
|
||||
}
|
||||
}
|
||||
|
||||
/* 分享 */
|
||||
const handleShare = (product: ProductItem) => {
|
||||
if (product.status !== "completed") return
|
||||
const link = `${window.location.origin}/share/${product.id}`
|
||||
navigator.clipboard?.writeText(link).then(
|
||||
() => message.success(`分享链接已复制：${link}`),
|
||||
() => message.success(`分享链接：${link}（请手动复制）`),
|
||||
)
|
||||
}
|
||||
|
||||
/* 查看详情 — 跳转到产品详情页 */
|
||||
const handleViewDetail = (product: ProductItem) => {
|
||||
setPlayingProduct(null) // 关闭播放器
|
||||
navigate(`/app/products/${product.id}`)
|
||||
}
|
||||
|
||||
/* 删除 */
|
||||
const handleDelete = (id: string) => {
|
||||
deleteMutation.mutate(id)
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
next.delete(id)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
/* 发布 — TODO: 后端发布 API 待实现 */
|
||||
const handlePublish = (_product: ProductItem) => {
|
||||
// TODO: 对接后端发布 API（当前后端未提供发布接口）
|
||||
message.info("发布功能待后端 API 补齐")
|
||||
}
|
||||
|
||||
/* 切换复核状态 */
|
||||
const handleReviewStatusChange = (id: string) => {
|
||||
const current = products.find((p) => p.id === id)?.reviewStatus
|
||||
const nextStatus = getNextReviewStatus(current)
|
||||
reviewMutation.mutate({ id, status: nextStatus })
|
||||
}
|
||||
|
||||
/* 批量下载 — 使用 batch-download API + 轮询 */
|
||||
const [batchDownloading, setBatchDownloading] = useState(false)
|
||||
|
||||
const handleBatchDownload = async () => {
|
||||
const ids = Array.from(selectedIds)
|
||||
if (ids.length === 0) return
|
||||
setBatchDownloading(true)
|
||||
try {
|
||||
// 发起批量下载任务
|
||||
const { job_id } = await batchDownload(ids)
|
||||
message.info(`批量下载任务已创建，正在打包 ${ids.length} 个视频...`)
|
||||
|
||||
// 轮询下载状态（最多 60 次，每次 2 秒）
|
||||
let attempts = 0
|
||||
const maxAttempts = 60
|
||||
const poll = async (): Promise<void> => {
|
||||
if (attempts >= maxAttempts) {
|
||||
message.warning("打包超时，请稍后在消息中心查看")
|
||||
return
|
||||
}
|
||||
attempts++
|
||||
await new Promise((r) => setTimeout(r, 2000))
|
||||
const status = await getBatchDownloadStatus(job_id)
|
||||
if (status.status === "completed" && status.download_url) {
|
||||
const a = document.createElement("a")
|
||||
a.href = status.download_url
|
||||
a.download = ""
|
||||
a.click()
|
||||
message.success(`已打包下载 ${ids.length} 个视频`)
|
||||
setSelectedIds(new Set())
|
||||
} else if (status.status === "failed") {
|
||||
message.error("批量下载失败，请重试")
|
||||
} else {
|
||||
// 继续轮询
|
||||
await poll()
|
||||
}
|
||||
}
|
||||
await poll()
|
||||
} catch {
|
||||
message.error("发起批量下载失败")
|
||||
} finally {
|
||||
setBatchDownloading(false)
|
||||
}
|
||||
}
|
||||
|
||||
/* 批量删除 */
|
||||
const handleBatchDelete = async () => {
|
||||
const ids = Array.from(selectedIds)
|
||||
let successCount = 0
|
||||
for (const id of ids) {
|
||||
try {
|
||||
await deleteProduct(id)
|
||||
successCount++
|
||||
} catch {
|
||||
// 忽略单个失败
|
||||
}
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: ["products"] })
|
||||
setSelectedIds(new Set())
|
||||
message.success(`已批量删除 ${successCount}/${ids.length} 个视频`)
|
||||
}
|
||||
|
||||
/* 批量发布 */
|
||||
const handleBatchPublish = () => {
|
||||
// TODO: 对接后端批量发布 API
|
||||
message.info("批量发布功能待后端 API 补齐")
|
||||
setSelectedIds(new Set())
|
||||
}
|
||||
|
||||
// ── Loading 状态 ──
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="xx-products-page">
|
||||
@@ -440,7 +194,7 @@ const ProductLibrary: React.FC = () => {
|
||||
批量删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
<Button buttonType="ghost" buttonSize="sm" onClick={() => setSelectedIds(new Set())}>
|
||||
<Button buttonType="ghost" buttonSize="sm" onClick={clearSelection}>
|
||||
取消选择
|
||||
</Button>
|
||||
</div>
|
||||
@@ -498,16 +252,7 @@ const ProductLibrary: React.FC = () => {
|
||||
style={{ width: 140 }}
|
||||
options={[
|
||||
{ value: "all", label: "全部项目" },
|
||||
...Array.from(
|
||||
new Map(
|
||||
products
|
||||
.filter((p) => p.projectId && p.projectName)
|
||||
.map((p) => [p.projectId!, p.projectName!] as const),
|
||||
),
|
||||
).map(([id, name]) => ({
|
||||
value: id as string,
|
||||
label: name as string,
|
||||
})),
|
||||
...projectOptions,
|
||||
]}
|
||||
/>
|
||||
<Select
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
import { useState } from "react"
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { message } from "antd"
|
||||
import {
|
||||
deleteProduct,
|
||||
getProductDownloadUrl,
|
||||
updateReviewStatus,
|
||||
batchDownload,
|
||||
getBatchDownloadStatus,
|
||||
type ReviewStatus,
|
||||
} from "@/api/products"
|
||||
import type { ProductItem } from "../types"
|
||||
import { getNextReviewStatus } from "../utils"
|
||||
|
||||
interface UseProductActionsOptions {
|
||||
selectedIds: Set<string>
|
||||
clearSelection: () => void
|
||||
products: ProductItem[]
|
||||
setPlayingProduct: (product: ProductItem | null) => void
|
||||
}
|
||||
|
||||
export const useProductActions = ({
|
||||
selectedIds,
|
||||
clearSelection,
|
||||
products,
|
||||
setPlayingProduct,
|
||||
}: UseProductActionsOptions) => {
|
||||
const queryClient = useQueryClient()
|
||||
const navigate = useNavigate()
|
||||
|
||||
/* ── 删除 mutation ── */
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: deleteProduct,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["products"] })
|
||||
message.success("已删除")
|
||||
},
|
||||
onError: () => {
|
||||
message.error("删除失败")
|
||||
},
|
||||
})
|
||||
|
||||
/* ── 复核状态 mutation ── */
|
||||
const reviewMutation = useMutation({
|
||||
mutationFn: ({ id, status }: { id: string; status: ReviewStatus }) =>
|
||||
updateReviewStatus(id, status),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["products"] })
|
||||
message.success("复核状态已更新")
|
||||
},
|
||||
onError: () => {
|
||||
message.error("更新复核状态失败")
|
||||
},
|
||||
})
|
||||
|
||||
/* 下载 — 调用真实 API 获取下载链接 */
|
||||
const handleDownload = async (product: ProductItem) => {
|
||||
if (product.status !== "completed") return
|
||||
try {
|
||||
const { url } = await getProductDownloadUrl(product.id)
|
||||
const a = document.createElement("a")
|
||||
a.href = url
|
||||
a.download = ""
|
||||
a.click()
|
||||
message.success(`正在下载"${product.name}"`)
|
||||
} catch {
|
||||
message.error("获取下载链接失败")
|
||||
}
|
||||
}
|
||||
|
||||
/* 分享 */
|
||||
const handleShare = (product: ProductItem) => {
|
||||
if (product.status !== "completed") return
|
||||
const link = `${window.location.origin}/share/${product.id}`
|
||||
navigator.clipboard?.writeText(link).then(
|
||||
() => message.success(`分享链接已复制：${link}`),
|
||||
() => message.success(`分享链接：${link}（请手动复制）`),
|
||||
)
|
||||
}
|
||||
|
||||
/* 查看详情 — 跳转到产品详情页 */
|
||||
const handleViewDetail = (product: ProductItem) => {
|
||||
setPlayingProduct(null)
|
||||
navigate(`/app/products/${product.id}`)
|
||||
}
|
||||
|
||||
/* 删除 */
|
||||
const handleDelete = (id: string) => {
|
||||
deleteMutation.mutate(id)
|
||||
}
|
||||
|
||||
/* 发布 — TODO: 后端发布 API 待实现 */
|
||||
const handlePublish = (_product: ProductItem) => {
|
||||
message.info("发布功能待后端 API 补齐")
|
||||
}
|
||||
|
||||
/* 切换复核状态 */
|
||||
const handleReviewStatusChange = (id: string) => {
|
||||
const current = products.find((p) => p.id === id)?.reviewStatus
|
||||
const nextStatus = getNextReviewStatus(current)
|
||||
reviewMutation.mutate({ id, status: nextStatus })
|
||||
}
|
||||
|
||||
/* 批量下载 */
|
||||
const [batchDownloading, setBatchDownloading] = useState(false)
|
||||
|
||||
const handleBatchDownload = async () => {
|
||||
const ids = Array.from(selectedIds)
|
||||
if (ids.length === 0) return
|
||||
setBatchDownloading(true)
|
||||
try {
|
||||
const { job_id } = await batchDownload(ids)
|
||||
message.info(`批量下载任务已创建，正在打包 ${ids.length} 个视频...`)
|
||||
|
||||
let attempts = 0
|
||||
const maxAttempts = 60
|
||||
const poll = async (): Promise<void> => {
|
||||
if (attempts >= maxAttempts) {
|
||||
message.warning("打包超时，请稍后在消息中心查看")
|
||||
return
|
||||
}
|
||||
attempts++
|
||||
await new Promise((r) => setTimeout(r, 2000))
|
||||
const status = await getBatchDownloadStatus(job_id)
|
||||
if (status.status === "completed" && status.download_url) {
|
||||
const a = document.createElement("a")
|
||||
a.href = status.download_url
|
||||
a.download = ""
|
||||
a.click()
|
||||
message.success(`已打包下载 ${ids.length} 个视频`)
|
||||
clearSelection()
|
||||
} else if (status.status === "failed") {
|
||||
message.error("批量下载失败，请重试")
|
||||
} else {
|
||||
await poll()
|
||||
}
|
||||
}
|
||||
await poll()
|
||||
} catch {
|
||||
message.error("发起批量下载失败")
|
||||
} finally {
|
||||
setBatchDownloading(false)
|
||||
}
|
||||
}
|
||||
|
||||
/* 批量删除 */
|
||||
const handleBatchDelete = async () => {
|
||||
const ids = Array.from(selectedIds)
|
||||
let successCount = 0
|
||||
for (const id of ids) {
|
||||
try {
|
||||
await deleteProduct(id)
|
||||
successCount++
|
||||
} catch {
|
||||
// 忽略单个失败
|
||||
}
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: ["products"] })
|
||||
clearSelection()
|
||||
message.success(`已批量删除 ${successCount}/${ids.length} 个视频`)
|
||||
}
|
||||
|
||||
/* 批量发布 */
|
||||
const handleBatchPublish = () => {
|
||||
message.info("批量发布功能待后端 API 补齐")
|
||||
clearSelection()
|
||||
}
|
||||
|
||||
return {
|
||||
// 单个操作
|
||||
handleDownload,
|
||||
handleShare,
|
||||
handleViewDetail,
|
||||
handleDelete,
|
||||
handlePublish,
|
||||
handleReviewStatusChange,
|
||||
// 批量操作
|
||||
handleBatchDownload,
|
||||
handleBatchDelete,
|
||||
handleBatchPublish,
|
||||
batchDownloading,
|
||||
// mutation 状态
|
||||
isDeleting: deleteMutation.isPending,
|
||||
isUpdatingReview: reviewMutation.isPending,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
import { useMemo, useState } from "react"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { getProducts, type ProductItem as ApiProductItem } from "@/api/products"
|
||||
import type { ProductItem } from "../types"
|
||||
import { mapApiProduct } from "../utils"
|
||||
|
||||
/** 筛选选项类型 */
|
||||
export interface Filters {
|
||||
searchText: string
|
||||
filterStatus: string
|
||||
filterTime: string
|
||||
filterDuration: string
|
||||
filterProject: string
|
||||
filterReviewStatus: string
|
||||
}
|
||||
|
||||
/** 项目选项列表 */
|
||||
const getProjectOptions = (products: ProductItem[]) =>
|
||||
Array.from(
|
||||
new Map(
|
||||
products
|
||||
.filter((p) => p.projectId && p.projectName)
|
||||
.map((p) => [p.projectId!, p.projectName!] as const),
|
||||
),
|
||||
).map(([id, name]) => ({
|
||||
value: id as string,
|
||||
label: name as string,
|
||||
}))
|
||||
|
||||
export const useProductList = () => {
|
||||
/* ── 获取成品列表 ── */
|
||||
const {
|
||||
data: apiProducts = [],
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
refetch,
|
||||
} = useQuery<ApiProductItem[], Error>({
|
||||
queryKey: ["products"],
|
||||
queryFn: () => getProducts(),
|
||||
staleTime: 30_000,
|
||||
})
|
||||
|
||||
// 映射为前端类型，按创建时间倒序排列，防御非数组返回
|
||||
const products = useMemo(() => {
|
||||
const list = (Array.isArray(apiProducts) ? apiProducts : []).map(mapApiProduct)
|
||||
// 按创建时间倒序（最新的在最前面），无时间的排最后
|
||||
return list.sort((a, b) => {
|
||||
if (!a.date || a.date === "—") return 1
|
||||
if (!b.date || b.date === "—") return -1
|
||||
return new Date(b.date).getTime() - new Date(a.date).getTime()
|
||||
})
|
||||
}, [apiProducts])
|
||||
|
||||
/* 筛选 */
|
||||
const [searchText, setSearchText] = useState("")
|
||||
const [filterStatus, setFilterStatus] = useState<string>("all")
|
||||
const [filterTime, setFilterTime] = useState<string>("all")
|
||||
const [filterDuration, setFilterDuration] = useState<string>("all")
|
||||
const [filterProject, setFilterProject] = useState<string>("all")
|
||||
const [filterReviewStatus, setFilterReviewStatus] = useState<string>("all")
|
||||
|
||||
/* 批量选择 */
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
|
||||
|
||||
/* 派生数据 */
|
||||
const batchMode = selectedIds.size > 0
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
let list = products
|
||||
|
||||
/* 状态筛选 */
|
||||
if (filterStatus !== "all") {
|
||||
list = list.filter((p) => p.status === filterStatus)
|
||||
}
|
||||
|
||||
/* 时间筛选 */
|
||||
if (filterTime !== "all") {
|
||||
const now = new Date()
|
||||
list = list.filter((p) => {
|
||||
const d = new Date(p.date)
|
||||
const diff = (now.getTime() - d.getTime()) / (1000 * 60 * 60 * 24)
|
||||
switch (filterTime) {
|
||||
case "today":
|
||||
return diff < 1
|
||||
case "week":
|
||||
return diff <= 7
|
||||
case "month":
|
||||
return diff <= 30
|
||||
default:
|
||||
return true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* 时长筛选 */
|
||||
if (filterDuration !== "all") {
|
||||
list = list.filter((p) => {
|
||||
switch (filterDuration) {
|
||||
case "short":
|
||||
return p.duration > 0 && p.duration <= 60
|
||||
case "medium":
|
||||
return p.duration > 60 && p.duration <= 180
|
||||
case "long":
|
||||
return p.duration > 180
|
||||
default:
|
||||
return true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* 项目筛选 */
|
||||
if (filterProject !== "all") {
|
||||
list = list.filter((p) => p.projectId === filterProject)
|
||||
}
|
||||
|
||||
/* 复核状态筛选 */
|
||||
if (filterReviewStatus !== "all") {
|
||||
if (filterReviewStatus === "none") {
|
||||
list = list.filter((p) => !p.reviewStatus)
|
||||
} else {
|
||||
list = list.filter((p) => p.reviewStatus === filterReviewStatus)
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索 */
|
||||
if (searchText.trim()) {
|
||||
const q = searchText.trim().toLowerCase()
|
||||
list = list.filter((p) => p.name.toLowerCase().includes(q))
|
||||
}
|
||||
|
||||
return list
|
||||
}, [
|
||||
products,
|
||||
filterStatus,
|
||||
filterTime,
|
||||
filterDuration,
|
||||
filterProject,
|
||||
filterReviewStatus,
|
||||
searchText,
|
||||
])
|
||||
|
||||
const projectOptions = useMemo(() => getProjectOptions(products), [products])
|
||||
|
||||
/* 全选 */
|
||||
const allSelected =
|
||||
filteredProducts.length > 0 && filteredProducts.every((p) => selectedIds.has(p.id))
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (allSelected) {
|
||||
setSelectedIds(new Set())
|
||||
} else {
|
||||
setSelectedIds(new Set(filteredProducts.map((p) => p.id)))
|
||||
}
|
||||
}
|
||||
|
||||
/* 切换单个选择 */
|
||||
const handleToggleSelect = (id: string) => {
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(id)) {
|
||||
next.delete(id)
|
||||
} else {
|
||||
next.add(id)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const clearSelection = () => setSelectedIds(new Set())
|
||||
|
||||
return {
|
||||
// 数据
|
||||
products,
|
||||
filteredProducts,
|
||||
isLoading,
|
||||
isError,
|
||||
error,
|
||||
refetch,
|
||||
// 筛选
|
||||
searchText,
|
||||
setSearchText,
|
||||
filterStatus,
|
||||
setFilterStatus,
|
||||
filterTime,
|
||||
setFilterTime,
|
||||
filterDuration,
|
||||
setFilterDuration,
|
||||
filterProject,
|
||||
setFilterProject,
|
||||
filterReviewStatus,
|
||||
setFilterReviewStatus,
|
||||
projectOptions,
|
||||
// 批量选择
|
||||
selectedIds,
|
||||
batchMode,
|
||||
allSelected,
|
||||
handleSelectAll,
|
||||
handleToggleSelect,
|
||||
clearSelection,
|
||||
}
|
||||
}
|
||||
@@ -19,6 +19,10 @@ import "@/pages/products/utils/index"
|
||||
import "@/pages/products/components/ProductCard"
|
||||
import "@/pages/products/components/VideoPlayer"
|
||||
|
||||
// Hooks
|
||||
import "@/pages/products/hooks/useProductList"
|
||||
import "@/pages/products/hooks/useProductActions"
|
||||
|
||||
describe("ProductLibrary module smoke test", () => {
|
||||
it("should load all product modules", () => {
|
||||
// 纯模块加载测试，确保所有组件/工具函数能正常 import
|
||||
|
||||
Reference in New Issue
Block a user