660 lines
29 KiB
TypeScript
660 lines
29 KiB
TypeScript
/**
|
||
* 素材管理组件
|
||
* 提取自 app/admin/page.tsx 的素材管理功能
|
||
*
|
||
* 搜索逻辑：复用前台 SearchBar 组件，支持 IME 中文输入
|
||
* 使用 useDeferredValue 替代手动防抖，避免闭包问题
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { useRef, useEffect, useCallback, useDeferredValue, useState } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
import { useConfirmActionDialog, type ConfirmActionOptions } from '@/components/ConfirmActionDialog'
|
||
import { useMaterialPurgeJobs } from '@/components/admin/MaterialPurgeStatus'
|
||
import { format } from 'date-fns'
|
||
import type { Material } from '@/hooks/useAdminState'
|
||
import { parseFetchError, handleError } from '@/lib/error-handler'
|
||
import SearchBar from '@/components/home/SearchBar'
|
||
import { isVideoMaterialType } from '@/lib/video-material-types'
|
||
|
||
// 搜索分页配置
|
||
const SEARCH_PAGE_SIZE = 50
|
||
|
||
interface MaterialManagementProps {
|
||
isLoadingMaterials?: boolean
|
||
materials: Material[]
|
||
setMaterials: React.Dispatch<React.SetStateAction<Material[]>>
|
||
selectedMaterials: Set<string>
|
||
setSelectedMaterials: React.Dispatch<React.SetStateAction<Set<string>>>
|
||
showRecycleBin: boolean
|
||
setShowRecycleBin: React.Dispatch<React.SetStateAction<boolean>>
|
||
materialSearchTerm: string
|
||
setMaterialSearchTerm: React.Dispatch<React.SetStateAction<string>>
|
||
displayedMaterialsCount: number
|
||
setDisplayedMaterialsCount: React.Dispatch<React.SetStateAction<number>>
|
||
hasMoreMaterials: boolean
|
||
setHasMoreMaterials: React.Dispatch<React.SetStateAction<boolean>>
|
||
isLoadingMoreMaterials: boolean
|
||
showToast: (message: string, type?: 'success' | 'error') => void
|
||
loadMoreMaterials: () => Promise<void>
|
||
fetchData: () => Promise<void>
|
||
materialsPageSize: number
|
||
totalMaterialsCount?: number // 素材总数（用于显示）
|
||
}
|
||
|
||
export default function MaterialManagement({
|
||
isLoadingMaterials = false,
|
||
materials,
|
||
setMaterials,
|
||
selectedMaterials,
|
||
setSelectedMaterials,
|
||
showRecycleBin,
|
||
setShowRecycleBin,
|
||
materialSearchTerm,
|
||
setMaterialSearchTerm,
|
||
displayedMaterialsCount,
|
||
setDisplayedMaterialsCount,
|
||
hasMoreMaterials,
|
||
setHasMoreMaterials,
|
||
isLoadingMoreMaterials,
|
||
showToast,
|
||
loadMoreMaterials,
|
||
fetchData,
|
||
materialsPageSize,
|
||
totalMaterialsCount,
|
||
}: MaterialManagementProps) {
|
||
const router = useRouter()
|
||
const loadMoreRef = useRef<HTMLDivElement>(null)
|
||
|
||
// 搜索分页状态（组件内部管理）
|
||
const [searchPage, setSearchPage] = useState(1)
|
||
const [hasMoreSearchResults, setHasMoreSearchResults] = useState(false)
|
||
const [isLoadingMoreSearch, setIsLoadingMoreSearch] = useState(false)
|
||
const [totalSearchCount, setTotalSearchCount] = useState(0)
|
||
|
||
// 批量操作加载状态
|
||
const [actionProcessing, setIsBatchProcessing] = useState(false)
|
||
const isBatchProcessing = actionProcessing || isLoadingMaterials
|
||
const { confirmAction, confirmActionDialog } = useConfirmActionDialog()
|
||
const { track: trackPurgeJobs, status: purgeStatus } = useMaterialPurgeJobs()
|
||
const actionOpen = useRef(false)
|
||
|
||
const confirmMaterialAction = async (options: ConfirmActionOptions) => {
|
||
if (actionOpen.current) return
|
||
actionOpen.current = true
|
||
try {
|
||
await confirmAction({ ...options, action: async reason => {
|
||
setIsBatchProcessing(true)
|
||
try { await options.action?.(reason) }
|
||
catch (error) { throw new Error(handleError(error).message) }
|
||
finally { setIsBatchProcessing(false) }
|
||
} })
|
||
} finally { actionOpen.current = false }
|
||
}
|
||
|
||
const removeRows = (ids: string[]) => {
|
||
setMaterials(previous => previous.filter(material => !ids.includes(material.id)))
|
||
setSelectedMaterials(previous => new Set(Array.from(previous).filter(id => !ids.includes(id))))
|
||
void fetchData()
|
||
}
|
||
|
||
const requireSuccess = async (response: Response) => {
|
||
if (!response.ok) throw new Error((await parseFetchError(response)).message)
|
||
return response.json()
|
||
}
|
||
|
||
// 使用 useDeferredValue 替代手动防抖，与前台保持一致
|
||
const deferredSearchKeyword = useDeferredValue(materialSearchTerm)
|
||
const isSearching = materialSearchTerm !== deferredSearchKeyword
|
||
|
||
// 判断是否处于搜索模式
|
||
const isInSearchMode = deferredSearchKeyword.trim().length > 0
|
||
|
||
// 搜索处理函数 - 直接更新状态，搜索由 useDeferredValue 控制
|
||
const handleSearchChange = useCallback((value: string) => {
|
||
setMaterialSearchTerm(value)
|
||
}, [setMaterialSearchTerm])
|
||
|
||
// 实时搜索：当 deferredSearchKeyword 变化时触发搜索
|
||
// 注意：showRecycleBin 的变化由父组件 fetchData 处理，这里只处理搜索词变化
|
||
// 搜索模式使用分页加载，每页 50 条
|
||
const prevSearchKeywordRef = useRef<string | null>(null)
|
||
useEffect(() => {
|
||
// 首次渲染时，记录初始值但不触发搜索（由 fetchData 处理）
|
||
if (prevSearchKeywordRef.current === null) {
|
||
prevSearchKeywordRef.current = deferredSearchKeyword
|
||
return
|
||
}
|
||
|
||
// 只有搜索词真的变化了才触发搜索
|
||
if (deferredSearchKeyword === prevSearchKeywordRef.current) {
|
||
return
|
||
}
|
||
prevSearchKeywordRef.current = deferredSearchKeyword
|
||
|
||
// 重置搜索分页状态
|
||
setSearchPage(1)
|
||
setHasMoreSearchResults(false)
|
||
setTotalSearchCount(0)
|
||
|
||
// 直接发送搜索请求（避免闭包问题）
|
||
const performSearch = async () => {
|
||
try {
|
||
const hasSearch = deferredSearchKeyword.trim().length > 0
|
||
const params = new URLSearchParams()
|
||
params.append('page', '1')
|
||
// 搜索时使用分页（50条/页），非搜索时使用默认分页
|
||
params.append('pageSize', String(hasSearch ? SEARCH_PAGE_SIZE : materialsPageSize))
|
||
if (showRecycleBin) params.append('deleted', 'true')
|
||
if (hasSearch) params.append('search', deferredSearchKeyword.trim())
|
||
|
||
const url = `/api/materials?${params.toString()}`
|
||
const response = await fetch(url)
|
||
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
const materialsData = data.materials || data
|
||
const total = data.total || materialsData.length
|
||
|
||
setMaterials(materialsData)
|
||
setDisplayedMaterialsCount(materialsData.length)
|
||
|
||
if (hasSearch) {
|
||
// 搜索模式：检查是否还有更多结果
|
||
setTotalSearchCount(total)
|
||
setHasMoreSearchResults(materialsData.length >= SEARCH_PAGE_SIZE)
|
||
setHasMoreMaterials(false) // 搜索模式下禁用普通分页
|
||
} else {
|
||
// 非搜索模式：恢复普通分页
|
||
setHasMoreMaterials(materialsData.length >= materialsPageSize)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('搜索素材失败:', error)
|
||
}
|
||
}
|
||
|
||
performSearch()
|
||
// 注意：不要把 showRecycleBin 放在这个 useEffect 的依赖里，回收站切换由父组件处理
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [deferredSearchKeyword, materialsPageSize, setMaterials, setDisplayedMaterialsCount, setHasMoreMaterials])
|
||
|
||
// 加载更多搜索结果
|
||
const loadMoreSearchResults = useCallback(async () => {
|
||
if (isLoadingMoreSearch || !hasMoreSearchResults || !isInSearchMode) return
|
||
|
||
setIsLoadingMoreSearch(true)
|
||
try {
|
||
const nextPage = searchPage + 1
|
||
const params = new URLSearchParams()
|
||
params.append('page', String(nextPage))
|
||
params.append('pageSize', String(SEARCH_PAGE_SIZE))
|
||
if (showRecycleBin) params.append('deleted', 'true')
|
||
params.append('search', deferredSearchKeyword.trim())
|
||
|
||
const url = `/api/materials?${params.toString()}`
|
||
const response = await fetch(url)
|
||
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
const newMaterials = data.materials || data
|
||
|
||
if (newMaterials.length > 0) {
|
||
// 去重：过滤掉已经存在的素材
|
||
setMaterials(prev => {
|
||
const existingIds = new Set(prev.map(m => m.id))
|
||
const uniqueNewMaterials = newMaterials.filter((m: any) => !existingIds.has(m.id))
|
||
return [...prev, ...uniqueNewMaterials]
|
||
})
|
||
setDisplayedMaterialsCount(prev => prev + newMaterials.length)
|
||
setSearchPage(nextPage)
|
||
setHasMoreSearchResults(newMaterials.length >= SEARCH_PAGE_SIZE)
|
||
} else {
|
||
setHasMoreSearchResults(false)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('加载更多搜索结果失败:', error)
|
||
} finally {
|
||
setIsLoadingMoreSearch(false)
|
||
}
|
||
}, [isLoadingMoreSearch, hasMoreSearchResults, isInSearchMode, searchPage, showRecycleBin, deferredSearchKeyword, setMaterials, setDisplayedMaterialsCount])
|
||
|
||
// 删除操作在共享确认框内执行，失败保留上下文和选择。
|
||
const handleDeleteMaterial = async (id: string) => {
|
||
await confirmMaterialAction({ title: '移入回收站？', description: '素材之后可以恢复。', confirmLabel: '移入回收站', tone: 'danger', action: async () => {
|
||
await requireSuccess(await fetch(`/api/materials?id=${id}`, { method: 'DELETE' }))
|
||
removeRows([id])
|
||
showToast('已移入回收站')
|
||
} })
|
||
}
|
||
|
||
const handleBatchDeleteMaterials = async () => {
|
||
const selectedIds = Array.from(selectedMaterials)
|
||
if (!selectedIds.length) return
|
||
const permanent = showRecycleBin
|
||
await confirmMaterialAction({
|
||
title: permanent ? `彻底删除 ${selectedIds.length} 条素材？` : `将 ${selectedIds.length} 条素材移入回收站？`,
|
||
description: permanent ? '删除后无法恢复，关联文件将一并清理。' : '素材之后可以恢复。',
|
||
confirmLabel: permanent ? '彻底删除' : '移入回收站', loadingLabel: '正在提交…', tone: 'danger',
|
||
action: async () => {
|
||
const result = await requireSuccess(await fetch('/api/admin/materials/batch-delete', {
|
||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ ids: selectedIds, permanent }),
|
||
}))
|
||
if (permanent) trackPurgeJobs(result.jobs)
|
||
removeRows(selectedIds)
|
||
if (!permanent) showToast(`已将 ${selectedIds.length} 条素材移入回收站`)
|
||
},
|
||
})
|
||
}
|
||
|
||
// 切换素材选择状态
|
||
const toggleMaterialSelection = (id: string) => {
|
||
setSelectedMaterials(prev => {
|
||
const newSet = new Set(prev)
|
||
if (newSet.has(id)) {
|
||
newSet.delete(id)
|
||
} else {
|
||
newSet.add(id)
|
||
}
|
||
return newSet
|
||
})
|
||
}
|
||
|
||
// 全选/取消全选 - 只选择当前显示的素材
|
||
const toggleSelectAll = () => {
|
||
// 获取当前显示的素材列表
|
||
const displayedMaterials = materials.slice(0, displayedMaterialsCount)
|
||
|
||
if (displayedMaterials.length === 0) return
|
||
|
||
// 检查当前显示的素材是否全部被选中
|
||
const allDisplayedSelected = displayedMaterials.every(m => selectedMaterials.has(m.id))
|
||
|
||
if (allDisplayedSelected) {
|
||
// 取消全选：清空所有选中
|
||
setSelectedMaterials(new Set())
|
||
} else {
|
||
// 全选：只选择当前显示的素材
|
||
setSelectedMaterials(new Set(displayedMaterials.map(m => m.id)))
|
||
}
|
||
}
|
||
|
||
const handleRestoreMaterial = async (id: string) => {
|
||
await confirmMaterialAction({ title: '恢复素材？', confirmLabel: '恢复', action: async () => {
|
||
await requireSuccess(await fetch('/api/materials/restore', {
|
||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id }),
|
||
}))
|
||
removeRows([id])
|
||
showToast('已恢复素材')
|
||
} })
|
||
}
|
||
|
||
const handlePermanentDelete = async (id: string) => {
|
||
await confirmMaterialAction({ title: '彻底删除这条素材？', description: '删除后无法恢复，关联文件将一并清理。',
|
||
confirmLabel: '彻底删除', loadingLabel: '正在提交…', tone: 'danger', action: async () => {
|
||
const result = await requireSuccess(await fetch(`/api/materials?id=${id}&permanent=true`, { method: 'DELETE' }))
|
||
trackPurgeJobs(result.jobs)
|
||
removeRows([id])
|
||
},
|
||
})
|
||
}
|
||
|
||
const handleBatchRestore = async () => {
|
||
let remaining = Array.from(selectedMaterials)
|
||
const originalCount = remaining.length
|
||
await confirmMaterialAction({ title: `恢复 ${originalCount} 条素材？`, confirmLabel: '恢复', action: async () => {
|
||
const restored: string[] = []
|
||
let message = '请稍后重试'
|
||
for (const id of remaining) {
|
||
try {
|
||
await requireSuccess(await fetch('/api/materials/restore', {
|
||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id }),
|
||
}))
|
||
restored.push(id)
|
||
} catch (error) { message = handleError(error).message }
|
||
}
|
||
remaining = remaining.filter(id => !restored.includes(id))
|
||
removeRows(restored)
|
||
if (remaining.length) throw new Error(`已恢复 ${originalCount - remaining.length} 条，${remaining.length} 条未恢复：${message}`)
|
||
showToast(`已恢复 ${originalCount} 条素材`)
|
||
} })
|
||
}
|
||
|
||
// 获取素材类型角标颜色
|
||
const getBadgeColor = (type: string) => {
|
||
switch (type) {
|
||
case '3DMAX':
|
||
case '3D场景':
|
||
return 'bg-blue-600/80'
|
||
case '详情页':
|
||
case '详情模板':
|
||
return 'bg-green-600/80'
|
||
case 'AI':
|
||
case '矢量文件':
|
||
return 'bg-amber-600/80'
|
||
case 'C4D':
|
||
case 'C4D模型':
|
||
return 'bg-purple-600/80'
|
||
case '淘系-主图视频':
|
||
case '主图视频':
|
||
case '安装视频':
|
||
case '淘系-逛逛视频':
|
||
case '种草视频':
|
||
case '抖音-千川素材':
|
||
case '抖音-账号维护':
|
||
return 'bg-red-600/80'
|
||
default:
|
||
return 'bg-black/60'
|
||
}
|
||
}
|
||
|
||
// 监听滚动，实现懒加载（搜索模式和非搜索模式分别处理）
|
||
useEffect(() => {
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
if (!entries[0].isIntersecting) return
|
||
|
||
if (isInSearchMode) {
|
||
// 搜索模式：加载更多搜索结果
|
||
if (hasMoreSearchResults && !isLoadingMoreSearch) {
|
||
loadMoreSearchResults()
|
||
}
|
||
} else {
|
||
// 非搜索模式：使用父组件的加载更多
|
||
if (hasMoreMaterials && !isLoadingMoreMaterials) {
|
||
loadMoreMaterials()
|
||
}
|
||
}
|
||
},
|
||
{ threshold: 0.1 }
|
||
)
|
||
|
||
if (loadMoreRef.current) {
|
||
observer.observe(loadMoreRef.current)
|
||
}
|
||
|
||
return () => observer.disconnect()
|
||
}, [isInSearchMode, hasMoreSearchResults, isLoadingMoreSearch, loadMoreSearchResults, hasMoreMaterials, isLoadingMoreMaterials, loadMoreMaterials])
|
||
|
||
return (
|
||
<div className="card-apple overflow-hidden" aria-busy={isBatchProcessing}>
|
||
{/* 顶部工具栏：状态切换 + 操作 + 搜索框 */}
|
||
<div className="flex flex-col md:flex-row items-stretch md:items-center justify-between gap-4 px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm sticky top-0 z-20">
|
||
|
||
{/* 左侧：Tab 切换 + 分隔线 + 常用操作 */}
|
||
<div className="flex items-center gap-4 flex-wrap">
|
||
{/* 状态切换 (Segmented Control) */}
|
||
<div className="bg-gray-100 dark:bg-gray-900/50 p-1 rounded-lg flex items-center shadow-inner border border-gray-200 dark:border-gray-700/50">
|
||
<button
|
||
onClick={() => setShowRecycleBin(false)}
|
||
disabled={actionProcessing}
|
||
className={`min-h-11 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${
|
||
!showRecycleBin
|
||
? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
|
||
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
|
||
}`}
|
||
>
|
||
全部
|
||
</button>
|
||
<button
|
||
onClick={() => setShowRecycleBin(true)}
|
||
disabled={actionProcessing}
|
||
className={`min-h-11 px-3 py-1.5 rounded-md text-xs font-bold transition-all flex items-center gap-1.5 ${
|
||
showRecycleBin
|
||
? 'bg-white dark:bg-gray-700 text-red-600 dark:text-red-400 shadow-sm'
|
||
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
|
||
}`}
|
||
>
|
||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||
</svg>
|
||
回收站
|
||
{showRecycleBin && totalMaterialsCount !== undefined && totalMaterialsCount > 0 && (
|
||
<span className="ml-1 px-1.5 py-0.5 bg-red-100 dark:bg-red-900/50 text-red-600 dark:text-red-400 text-[10px] font-bold rounded-full">
|
||
{totalMaterialsCount}
|
||
</span>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="w-px h-6 bg-gray-200 dark:bg-gray-700 hidden sm:block"></div>
|
||
|
||
{/* 批量操作按钮组 */}
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={toggleSelectAll}
|
||
disabled={isBatchProcessing || materials.length === 0}
|
||
className={`text-xs font-bold min-h-11 px-3 py-1.5 rounded-lg transition-colors border ${
|
||
materials.length > 0 && materials.slice(0, displayedMaterialsCount).every(m => selectedMaterials.has(m.id))
|
||
? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 border-indigo-200 dark:border-indigo-800'
|
||
: 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
} ${isBatchProcessing || materials.length === 0 ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||
>
|
||
{materials.length > 0 && materials.slice(0, displayedMaterialsCount).every(m => selectedMaterials.has(m.id))
|
||
? '取消'
|
||
: '全选'}
|
||
</button>
|
||
|
||
{selectedMaterials.size > 0 && (
|
||
<>
|
||
<div className="hidden sm:flex items-center px-2 text-xs font-medium text-gray-500">
|
||
已选 {selectedMaterials.size}
|
||
</div>
|
||
<button
|
||
onClick={handleBatchDeleteMaterials}
|
||
disabled={isBatchProcessing}
|
||
className={`min-h-11 px-3 py-1.5 text-white text-xs font-bold rounded-lg transition-all flex items-center gap-1.5 shadow-sm active:scale-95 ${
|
||
isBatchProcessing
|
||
? 'bg-red-400 cursor-not-allowed'
|
||
: showRecycleBin
|
||
? 'bg-red-600 hover:bg-red-700'
|
||
: 'bg-red-500 hover:bg-red-600'
|
||
}`}
|
||
>
|
||
{isBatchProcessing && (
|
||
<svg className="animate-spin h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
</svg>
|
||
)}
|
||
{showRecycleBin ? '彻底删除' : '删除'}
|
||
</button>
|
||
|
||
{showRecycleBin && !isBatchProcessing && (
|
||
<button
|
||
onClick={handleBatchRestore}
|
||
className="min-h-11 px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white text-xs font-bold rounded-lg transition-all shadow-sm active:scale-95"
|
||
>
|
||
恢复
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 右侧：搜索框 */}
|
||
<div className="w-full md:w-80 lg:w-96 flex-shrink-0">
|
||
<SearchBar
|
||
value={materialSearchTerm}
|
||
onChange={handleSearchChange}
|
||
placeholder="搜索素材..."
|
||
isSearching={isSearching}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{purgeStatus}
|
||
{confirmActionDialog}
|
||
|
||
{/* 卡片网格布局 */}
|
||
<div className="p-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-6">
|
||
{materials.slice(0, displayedMaterialsCount).map((material) => {
|
||
const isVideo = isVideoMaterialType(material.materialType)
|
||
const posterUrl = material.videoCoverUrl || material.previewUrl
|
||
const videoUrl = material.videoPreviewClipUrl || material.videoPreview540Url
|
||
const isSelected = selectedMaterials.has(material.id)
|
||
|
||
return (
|
||
<div
|
||
key={material.id}
|
||
onClick={() => {
|
||
if (!isBatchProcessing) {
|
||
toggleMaterialSelection(material.id)
|
||
}
|
||
}}
|
||
className={`group relative aspect-[3/4] rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-800 border transition-all duration-300 cursor-pointer ${
|
||
isSelected
|
||
? 'border-indigo-500 ring-2 ring-indigo-500 dark:ring-indigo-400 shadow-lg scale-[0.98]'
|
||
: 'border-transparent hover:border-gray-200 dark:hover:border-gray-600 hover:shadow-lg hover:-translate-y-1'
|
||
}`}
|
||
>
|
||
{/* 选择指示器 (更像原生选择) */}
|
||
<button type="button" aria-label={`选择 ${material.productModel}`} aria-pressed={isSelected} disabled={isBatchProcessing}
|
||
onClick={event => { event.stopPropagation(); toggleMaterialSelection(material.id) }}
|
||
className={`absolute z-20 top-1 right-1 min-w-11 min-h-11 rounded-full flex items-center justify-center transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 ${
|
||
isSelected
|
||
? 'bg-blue-500 text-white shadow-md scale-100'
|
||
: 'bg-black/20 hover:bg-black/40 border border-white/30 backdrop-blur-sm'
|
||
}`}>
|
||
{isSelected && (
|
||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
)}
|
||
</button>
|
||
|
||
{/* 预览图/视频 */}
|
||
<div className="relative w-full h-full">
|
||
{isVideo && videoUrl ? (
|
||
<video
|
||
src={videoUrl}
|
||
poster={posterUrl || undefined}
|
||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||
muted
|
||
loop
|
||
playsInline
|
||
preload="metadata"
|
||
/>
|
||
) : (
|
||
<img
|
||
src={material.previewUrl}
|
||
alt={material.productModel}
|
||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||
loading="lazy"
|
||
/>
|
||
)}
|
||
|
||
{/* 渐变遮罩 (底部信息) */}
|
||
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-90" />
|
||
|
||
{/* 顶部左侧信息 (型号) */}
|
||
<div className="absolute top-3 left-3 right-10 overflow-hidden">
|
||
<span className="inline-block bg-black/40 backdrop-blur-md text-white/90 text-[10px] font-semibold px-2 py-0.5 rounded shadow-sm truncate max-w-full border border-white/10">
|
||
{material.productModel}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 底部信息栏 */}
|
||
<div className="absolute bottom-0 left-0 right-0 p-3 transform transition-transform duration-300 group-hover:-translate-y-1">
|
||
<p className="text-xs font-bold text-white truncate mb-1 text-shadow-sm">
|
||
{material.sceneName || '无场景名称'}
|
||
</p>
|
||
<div className="flex items-center justify-between text-[10px] text-gray-300 font-medium">
|
||
<span className="truncate max-w-[60%] flex items-center gap-1">
|
||
{material.authorName}
|
||
</span>
|
||
<span className="flex-shrink-0 opacity-80 bg-white/10 px-1.5 py-0.5 rounded">
|
||
{format(new Date(material.createdAt), 'MM-dd')}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 操作按钮浮层 */}
|
||
<div className="absolute inset-0 bg-black/40 backdrop-blur-[2px] opacity-100 md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100 transition-all duration-300 flex flex-col items-center justify-center gap-2 p-4">
|
||
{showRecycleBin ? (
|
||
<>
|
||
<button
|
||
disabled={isBatchProcessing}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleRestoreMaterial(material.id)
|
||
}}
|
||
className="w-full min-h-11 py-2 bg-green-500 hover:bg-green-600 text-white text-xs font-bold rounded-lg shadow-lg transform hover:scale-105 transition-all"
|
||
>
|
||
恢复
|
||
</button>
|
||
<button
|
||
disabled={isBatchProcessing}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handlePermanentDelete(material.id)
|
||
}}
|
||
className="w-full min-h-11 py-2 bg-white/20 hover:bg-red-500/80 border border-white/30 text-white text-xs font-bold rounded-lg backdrop-blur-md shadow-lg transform hover:scale-105 transition-all"
|
||
>
|
||
彻底删除
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<button
|
||
disabled={isBatchProcessing}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
router.push(`/edit/${material.id}`)
|
||
}}
|
||
className="w-full min-h-11 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-lg shadow-lg transform hover:scale-105 transition-all"
|
||
>
|
||
编辑
|
||
</button>
|
||
<button
|
||
disabled={isBatchProcessing}
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleDeleteMaterial(material.id)
|
||
}}
|
||
className="w-full min-h-11 py-2 bg-white/20 hover:bg-red-500/80 border border-white/30 text-white text-xs font-bold rounded-lg backdrop-blur-md shadow-lg transform hover:scale-105 transition-all"
|
||
>
|
||
移入回收站
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* 加载更多触发器 */}
|
||
{(isInSearchMode ? hasMoreSearchResults : (displayedMaterialsCount < materials.length || hasMoreMaterials)) && (
|
||
<div ref={loadMoreRef} className="py-8 text-center">
|
||
<div className="inline-flex items-center gap-2 text-gray-500 dark:text-gray-400">
|
||
{(isInSearchMode ? isLoadingMoreSearch : isLoadingMoreMaterials) ? (
|
||
<>
|
||
<svg className="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
</svg>
|
||
<span>加载中...</span>
|
||
</>
|
||
) : (
|
||
<span>滚动加载更多...</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{isLoadingMaterials && <div role="status" className="py-8 text-center text-gray-600">加载中…</div>}
|
||
{!isLoadingMaterials && materials.length === 0 && (
|
||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||
暂无素材
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|