1585 lines
69 KiB
TypeScript
1585 lines
69 KiB
TypeScript
'use client'
|
||
|
||
import { useEffect, useState } from 'react'
|
||
import { useSession } from 'next-auth/react'
|
||
import { useRouter } from 'next/navigation'
|
||
import Image from 'next/image'
|
||
import { format } from 'date-fns'
|
||
import UploadModal from '@/components/UploadModal'
|
||
import Header from '@/components/Header'
|
||
import RankingPanel from '@/components/RankingPanel'
|
||
import AIChatWidget from '@/components/AIChatWidget'
|
||
import ChangePasswordModal from '@/components/ChangePasswordModal'
|
||
|
||
interface Material {
|
||
id: string
|
||
userId: string
|
||
previewUrl: string
|
||
productModel: string
|
||
brandName?: string | null
|
||
seriesName?: string | null
|
||
skuCode?: string | null
|
||
materialTexture?: string | null
|
||
categoryName: string
|
||
sceneName: string
|
||
materialType: string
|
||
renderer: string
|
||
renderTime?: string | null
|
||
imageResolution?: string | null
|
||
colorMode?: string | null
|
||
authorName: string
|
||
zipFileName: string
|
||
zipFileSize: string | number
|
||
downloadCount: number
|
||
likeCount: number
|
||
isLiked: boolean
|
||
createdAt: string
|
||
user: {
|
||
username: string
|
||
}
|
||
}
|
||
|
||
export default function Home() {
|
||
const { data: session, status } = useSession()
|
||
const router = useRouter()
|
||
const [materials, setMaterials] = useState<Material[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [showUploadModal, setShowUploadModal] = useState(false)
|
||
const [searchKeyword, setSearchKeyword] = useState('')
|
||
const [selectedCategory, setSelectedCategory] = useState('')
|
||
const [selectedScene, setSelectedScene] = useState('')
|
||
const [selectedMaterialType, setSelectedMaterialType] = useState('') // 素材类型筛选
|
||
const [selectedPlatform, setSelectedPlatform] = useState('') // 平台分类筛选
|
||
const [categories, setCategories] = useState<Array<{ id: string; name: string; count: number }>>([])
|
||
const [scenes, setScenes] = useState<Array<{ id: string; name: string; count: number }>>([])
|
||
const [platforms, setPlatforms] = useState<Array<{ id: string; name: string; count: number }>>([])
|
||
const [materialTypes] = useState([
|
||
{ value: '3DMAX', label: '3DMAX' },
|
||
{ value: 'PSD', label: 'PSD' },
|
||
{ value: 'AI', label: 'AI' },
|
||
{ value: 'CAD', label: 'CAD' },
|
||
{ value: 'C4D', label: 'C4D' },
|
||
{ value: '视频', label: '视频' },
|
||
{ value: '材质', label: '材质' },
|
||
{ value: '模特', label: '模特' },
|
||
{ value: '标准饰品', label: '标准饰品' },
|
||
{ value: '其他', label: '其他' }
|
||
])
|
||
const [downloadingId, setDownloadingId] = useState<string | null>(null)
|
||
const [downloadProgress, setDownloadProgress] = useState(0)
|
||
const [selectedMonth, setSelectedMonth] = useState('')
|
||
const [months, setMonths] = useState<Array<{ value: string; label: string; count: number }>>([])
|
||
const [sortBy, setSortBy] = useState('createdAt') // createdAt | downloadCount
|
||
const [previewImage, setPreviewImage] = useState<{ url: string; title: string } | null>(null)
|
||
const [totalMaterialsCount, setTotalMaterialsCount] = useState(0)
|
||
const [currentPage, setCurrentPage] = useState(1)
|
||
const [totalPages, setTotalPages] = useState(1)
|
||
const [shareUrl, setShareUrl] = useState<string | null>(null)
|
||
const [showShareModal, setShowShareModal] = useState(false)
|
||
const [showShareNotification, setShowShareNotification] = useState(false)
|
||
const [jumpPage, setJumpPage] = useState('')
|
||
const [themeColor, setThemeColor] = useState('#1f2937') // 主题颜色
|
||
const [showIntranetTip, setShowIntranetTip] = useState(false) // 内网切换提示
|
||
const [showFilterModal, setShowFilterModal] = useState(false) // 筛选弹窗
|
||
const [showChangePasswordModal, setShowChangePasswordModal] = useState(false) // 修改密码弹窗
|
||
const [isDefaultPassword, setIsDefaultPassword] = useState(false) // 是否使用默认密码
|
||
const pageSize = 20
|
||
|
||
useEffect(() => {
|
||
if (status === 'unauthenticated') {
|
||
router.push('/login')
|
||
}
|
||
}, [status, router])
|
||
|
||
// 系统初始化检查和默认密码检查
|
||
useEffect(() => {
|
||
const checkSystemInit = async () => {
|
||
if (status !== 'authenticated') return
|
||
|
||
try {
|
||
// 1. 检查系统是否已初始化
|
||
const initResponse = await fetch('/api/system/init')
|
||
const initData = await initResponse.json()
|
||
|
||
if (!initData.initialized) {
|
||
// 系统未初始化，执行初始化
|
||
const initResult = await fetch('/api/system/init', {
|
||
method: 'POST'
|
||
})
|
||
const initResultData = await initResult.json()
|
||
|
||
if (initResultData.success) {
|
||
console.log('系统初始化成功')
|
||
// 如果是管理员且使用默认密码，显示修改密码弹窗
|
||
if ((session?.user as any)?.role === 'ADMIN') {
|
||
const passwordCheck = await fetch('/api/user/check-default-password')
|
||
const passwordData = await passwordCheck.json()
|
||
if (passwordData.isDefaultPassword) {
|
||
setIsDefaultPassword(true)
|
||
setShowChangePasswordModal(true)
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
// 系统已初始化，检查是否使用默认密码
|
||
const passwordCheck = await fetch('/api/user/check-default-password')
|
||
const passwordData = await passwordCheck.json()
|
||
if (passwordData.isDefaultPassword) {
|
||
setIsDefaultPassword(true)
|
||
setShowChangePasswordModal(true)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('系统初始化检查失败:', error)
|
||
}
|
||
}
|
||
|
||
checkSystemInit()
|
||
}, [status, session])
|
||
|
||
// 检查是否有未完成的上传（断点续传）
|
||
useEffect(() => {
|
||
if (status !== 'authenticated') return
|
||
|
||
const checkUnfinishedUpload = () => {
|
||
try {
|
||
const savedState = localStorage.getItem('uploadState')
|
||
if (savedState) {
|
||
const data = JSON.parse(savedState)
|
||
// 检查是否在24小时内（避免过期数据）
|
||
const oneDayAgo = Date.now() - 24 * 60 * 60 * 1000
|
||
if (data.timestamp && data.timestamp > oneDayAgo) {
|
||
// 如果有未完成的上传，自动打开上传模态框
|
||
// UploadModal 组件内部会检查并显示恢复对话框
|
||
setShowUploadModal(true)
|
||
} else {
|
||
// 超过24小时，清除过期数据
|
||
localStorage.removeItem('uploadState')
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('Failed to check unfinished upload:', e)
|
||
localStorage.removeItem('uploadState')
|
||
}
|
||
}
|
||
|
||
checkUnfinishedUpload()
|
||
}, [status])
|
||
|
||
// 检查是否需要显示内网切换提示（使用后端判断）
|
||
useEffect(() => {
|
||
const checkNetworkStatus = async () => {
|
||
if (status !== 'authenticated') return
|
||
|
||
const tipDismissed = sessionStorage.getItem('intranet_tip_dismissed')
|
||
if (tipDismissed === 'true') return
|
||
|
||
try {
|
||
// 调用后端API获取准确的网络状态
|
||
const response = await fetch('/api/network-status')
|
||
const data = await response.json()
|
||
|
||
if (data.success) {
|
||
console.log(`[Network Status] isIntranet: ${data.isIntranet}, isPublicDomain: ${data.isPublicDomain}`)
|
||
|
||
// 如果用户在内网但访问的是公网域名，显示切换提示
|
||
if (data.isIntranet && data.isPublicDomain) {
|
||
console.log('💡 后端检测到用户在内网访问公网，显示切换提示')
|
||
setShowIntranetTip(true)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('网络状态检测失败:', error)
|
||
}
|
||
}
|
||
|
||
checkNetworkStatus()
|
||
}, [status])
|
||
|
||
const handleDismissIntranetTip = () => {
|
||
sessionStorage.setItem('intranet_tip_dismissed', 'true')
|
||
setShowIntranetTip(false)
|
||
}
|
||
|
||
const handleSwitchToIntranet = () => {
|
||
const url = process.env.NEXT_PUBLIC_INTRANET_URL
|
||
if (url) {
|
||
window.location.href = url
|
||
} else {
|
||
alert('未配置内网地址，请联系管理员设置 NEXT_PUBLIC_INTRANET_URL')
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
fetchMaterials()
|
||
fetchCategories()
|
||
fetchScenes()
|
||
fetchPlatforms()
|
||
fetchThemeColor()
|
||
}, [])
|
||
|
||
// 获取主题颜色
|
||
const fetchThemeColor = async () => {
|
||
try {
|
||
const response = await fetch('/api/system-settings')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setThemeColor(data.headerBgColor || '#1f2937')
|
||
}
|
||
} catch (error) {
|
||
console.error('获取主题颜色失败:', error)
|
||
}
|
||
}
|
||
|
||
// 当选择店铺变化时，重新获取场景数量（父子关系联动）
|
||
useEffect(() => {
|
||
fetchScenes(selectedCategory || undefined)
|
||
}, [selectedCategory])
|
||
|
||
useEffect(() => {
|
||
setCurrentPage(1) // 重置到第一页
|
||
}, [searchKeyword, selectedCategory, selectedScene, selectedMaterialType, selectedPlatform, selectedMonth, sortBy])
|
||
|
||
useEffect(() => {
|
||
if (status === 'authenticated') {
|
||
fetchMaterials()
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [currentPage, searchKeyword, selectedCategory, selectedScene, selectedMaterialType, selectedPlatform, selectedMonth, sortBy])
|
||
|
||
const fetchCategories = async () => {
|
||
try {
|
||
const response = await fetch('/api/categories')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setCategories(data)
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching categories:', error)
|
||
}
|
||
}
|
||
|
||
const fetchScenes = async (categoryName?: string) => {
|
||
try {
|
||
const url = categoryName
|
||
? `/api/scenes?category=${encodeURIComponent(categoryName)}`
|
||
: '/api/scenes'
|
||
const response = await fetch(url)
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setScenes(data)
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching scenes:', error)
|
||
}
|
||
}
|
||
|
||
const fetchPlatforms = async () => {
|
||
try {
|
||
const response = await fetch('/api/platforms')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setPlatforms(data)
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching platforms:', error)
|
||
}
|
||
}
|
||
|
||
const fetchMaterials = async () => {
|
||
try {
|
||
const params = new URLSearchParams()
|
||
if (searchKeyword) params.append('search', searchKeyword)
|
||
if (selectedCategory) params.append('category', selectedCategory)
|
||
if (selectedScene) params.append('scene', selectedScene)
|
||
if (selectedMaterialType) params.append('materialType', selectedMaterialType)
|
||
if (selectedPlatform) params.append('platform', selectedPlatform)
|
||
if (selectedMonth) params.append('month', selectedMonth)
|
||
if (sortBy) params.append('sortBy', sortBy)
|
||
params.append('page', currentPage.toString())
|
||
params.append('pageSize', pageSize.toString())
|
||
|
||
const url = `/api/materials${params.toString() ? '?' + params.toString() : ''}`
|
||
const response = await fetch(url)
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setMaterials(data.materials || data)
|
||
setTotalPages(data.totalPages || 1)
|
||
|
||
// 获取月份统计和总数
|
||
fetchMonthsAndTotal()
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching materials:', error)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const fetchMonthsAndTotal = async () => {
|
||
try {
|
||
const response = await fetch('/api/materials/stats')
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setMonths(data.months || [])
|
||
setTotalMaterialsCount(data.total || 0)
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching months:', error)
|
||
}
|
||
}
|
||
|
||
// 格式化文件大小
|
||
const formatFileSize = (bytes: string | number): string => {
|
||
const size = typeof bytes === 'string' ? parseInt(bytes) : bytes
|
||
if (size === 0) return '未知'
|
||
const units = ['B', 'KB', 'MB', 'GB']
|
||
const i = Math.floor(Math.log(size) / Math.log(1024))
|
||
return `${(size / Math.pow(1024, i)).toFixed(2)} ${units[i]}`
|
||
}
|
||
|
||
// 分享功能
|
||
const handleShare = async (materialId: string) => {
|
||
const base = process.env.NEXT_PUBLIC_PORTAL_BASE_URL || window.location.origin
|
||
const url = `${base}/share/${materialId}`
|
||
setShareUrl(url)
|
||
try {
|
||
await navigator.clipboard.writeText(url)
|
||
setShowShareNotification(true)
|
||
setTimeout(() => setShowShareNotification(false), 2000)
|
||
} catch (error) {
|
||
setShowShareModal(true)
|
||
}
|
||
}
|
||
|
||
const copyShareUrl = async () => {
|
||
if (shareUrl) {
|
||
try {
|
||
await navigator.clipboard.writeText(shareUrl)
|
||
alert('复制成功！')
|
||
setShowShareModal(false)
|
||
} catch (error) {
|
||
alert('复制失败，请手动复制')
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleDownload = (id: string) => {
|
||
setDownloadingId(id)
|
||
setDownloadProgress(0)
|
||
|
||
const xhr = new XMLHttpRequest()
|
||
|
||
// 监听下载进度
|
||
xhr.addEventListener('progress', (e) => {
|
||
if (e.lengthComputable) {
|
||
const percentComplete = Math.round((e.loaded / e.total) * 100)
|
||
setDownloadProgress(percentComplete)
|
||
}
|
||
})
|
||
|
||
xhr.addEventListener('load', () => {
|
||
if (xhr.status === 200) {
|
||
try {
|
||
const blob = new Blob([xhr.response], { type: 'application/zip' })
|
||
|
||
// 从响应头获取文件名
|
||
const contentDisposition = xhr.getResponseHeader('Content-Disposition')
|
||
let filename = 'material.zip'
|
||
if (contentDisposition) {
|
||
const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)
|
||
if (filenameMatch && filenameMatch[1]) {
|
||
filename = decodeURIComponent(filenameMatch[1].replace(/['"]/g, ''))
|
||
}
|
||
}
|
||
|
||
const url = window.URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = filename
|
||
document.body.appendChild(a)
|
||
a.click()
|
||
a.remove()
|
||
window.URL.revokeObjectURL(url)
|
||
|
||
// 刷新列表以更新下载次数
|
||
fetchMaterials()
|
||
} catch (error) {
|
||
console.error('下载处理失败:', error)
|
||
alert('下载失败，请稍后重试')
|
||
}
|
||
} else {
|
||
try {
|
||
const errorText = xhr.responseText
|
||
const error = JSON.parse(errorText)
|
||
alert(error.error || '下载失败')
|
||
} catch {
|
||
alert('下载失败')
|
||
}
|
||
}
|
||
setDownloadingId(null)
|
||
setDownloadProgress(0)
|
||
})
|
||
|
||
xhr.addEventListener('error', () => {
|
||
alert('下载失败，请稍后重试')
|
||
setDownloadingId(null)
|
||
setDownloadProgress(0)
|
||
})
|
||
|
||
xhr.open('GET', `/api/materials/download?id=${id}`)
|
||
xhr.responseType = 'arraybuffer'
|
||
xhr.send()
|
||
}
|
||
|
||
const handleLike = async (id: string) => {
|
||
try {
|
||
const response = await fetch('/api/materials/like', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ materialId: id }),
|
||
})
|
||
|
||
if (response.ok) {
|
||
// 刷新列表以更新点赞状态
|
||
fetchMaterials()
|
||
} else {
|
||
const error = await response.json()
|
||
alert(error.error || '操作失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('Like error:', error)
|
||
alert('操作失败，请稍后重试')
|
||
}
|
||
}
|
||
|
||
// 编辑素材
|
||
const handleEdit = (material: Material) => {
|
||
router.push(`/edit/${material.id}`)
|
||
}
|
||
|
||
if (status === 'loading' || loading) {
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center dark:bg-gray-900">
|
||
<div className="text-xl text-gray-600 dark:text-gray-400">加载中...</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (!session) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||
<Header session={session} />
|
||
|
||
{/* 内网切换提示 */}
|
||
{showIntranetTip && (
|
||
<div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg">
|
||
<div className="container mx-auto px-4 py-3 max-w-7xl">
|
||
<div className="flex items-center justify-between gap-4">
|
||
<div className="flex items-center gap-3 flex-1">
|
||
<svg className="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
<div className="flex-1">
|
||
<p className="font-medium text-sm sm:text-base">
|
||
🚀 检测到您正在内网环境访问公网！
|
||
</p>
|
||
<p className="text-xs sm:text-sm opacity-90 mt-0.5">
|
||
切换到内网地址 ({(process.env.NEXT_PUBLIC_INTRANET_URL || '').replace(/^https?:\/\//, '')}) 可获得 <strong>10倍以上</strong> 的速度提升，上传下载更快
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2 flex-shrink-0">
|
||
<button
|
||
onClick={handleSwitchToIntranet}
|
||
className="px-4 py-2 bg-white text-blue-600 rounded-lg hover:bg-blue-50 transition-colors font-medium text-sm whitespace-nowrap"
|
||
>
|
||
立即切换
|
||
</button>
|
||
<button
|
||
onClick={handleDismissIntranetTip}
|
||
className="px-3 py-2 hover:bg-blue-700 rounded-lg transition-colors"
|
||
title="关闭提示"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<RankingPanel />
|
||
|
||
<main className="container mx-auto px-4 py-8 max-w-7xl">
|
||
{/* Header Section */}
|
||
<div className="mb-8">
|
||
<div className="flex justify-end items-center mb-6">
|
||
<button
|
||
onClick={() => setShowUploadModal(true)}
|
||
className="px-6 py-3 rounded-apple text-white font-medium transition-all hover:opacity-90 shadow-apple"
|
||
style={{ backgroundColor: themeColor }}
|
||
>
|
||
<span className="mr-2">+</span>
|
||
上传素材
|
||
</button>
|
||
</div>
|
||
|
||
{/* Search Bar and Filter Button */}
|
||
<div className="mb-6 flex gap-3">
|
||
<div className="relative flex-1">
|
||
<input
|
||
type="text"
|
||
value={searchKeyword}
|
||
onChange={(e) => setSearchKeyword(e.target.value)}
|
||
placeholder="搜索SPU、店铺、场景类别、作者..."
|
||
className="w-full pl-12 pr-4 py-3 rounded-apple border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white focus:border-gray-900 dark:focus:border-gray-400 focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-600 outline-none transition-all"
|
||
/>
|
||
<svg
|
||
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||
/>
|
||
</svg>
|
||
{searchKeyword && (
|
||
<button
|
||
onClick={() => setSearchKeyword('')}
|
||
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
)}
|
||
</div>
|
||
{/* 筛选按钮 */}
|
||
<button
|
||
onClick={() => setShowFilterModal(true)}
|
||
className="px-6 py-3 rounded-apple border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2 relative"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||
</svg>
|
||
筛选
|
||
{/* 显示已选筛选数量 */}
|
||
{(selectedCategory || selectedScene || selectedMaterialType || selectedPlatform || selectedMonth) && (
|
||
<span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
|
||
{[selectedCategory, selectedScene, selectedMaterialType, selectedPlatform, selectedMonth].filter(Boolean).length}
|
||
</span>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
{/* 筛选选项已整合到筛选按钮中，这里隐藏 */}
|
||
{false && (
|
||
<>
|
||
<div className="mb-4">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-sm font-medium text-gray-700 dark:text-gray-300">类型分页</h2>
|
||
{selectedMaterialType && (
|
||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||
{materials.length} 个素材
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => setSelectedMaterialType('')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedMaterialType === ''
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={selectedMaterialType === '' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
全部
|
||
</button>
|
||
{materialTypes.map((type) => (
|
||
<button
|
||
key={type.value}
|
||
onClick={() => setSelectedMaterialType(type.value === selectedMaterialType ? '' : type.value)}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedMaterialType === type.value
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={selectedMaterialType === type.value ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
{type.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Category Filter (使用店铺) */}
|
||
<div className="mb-4">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-sm font-medium text-gray-700 dark:text-gray-300">使用店铺</h2>
|
||
{selectedCategory && (
|
||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||
{materials.length} 个素材
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => setSelectedCategory('')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedCategory === ''
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={selectedCategory === '' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
全部
|
||
<span className={`ml-1.5 text-xs ${
|
||
selectedCategory === ''
|
||
? 'text-gray-300'
|
||
: 'text-gray-500 dark:text-gray-400'
|
||
}`}>
|
||
({totalMaterialsCount})
|
||
</span>
|
||
</button>
|
||
{categories.map((category) => (
|
||
<button
|
||
key={category.id}
|
||
onClick={() => setSelectedCategory(category.name === selectedCategory ? '' : category.name)}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedCategory === category.name
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={selectedCategory === category.name ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
{category.name}
|
||
<span className={`ml-1.5 text-xs ${
|
||
selectedCategory === category.name
|
||
? 'text-gray-300'
|
||
: 'text-gray-500 dark:text-gray-400'
|
||
}`}>
|
||
({category.count || 0})
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scene Filter (场景类别) */}
|
||
<div className="mb-4">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-sm font-medium text-gray-700 dark:text-gray-300">场景类别</h2>
|
||
{selectedScene && (
|
||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||
{materials.length} 个素材
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => setSelectedScene('')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedScene === ''
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={selectedScene === '' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
全部
|
||
<span className={`ml-1.5 text-xs ${
|
||
selectedScene === ''
|
||
? 'text-gray-300'
|
||
: 'text-gray-500 dark:text-gray-400'
|
||
}`}>
|
||
({totalMaterialsCount})
|
||
</span>
|
||
</button>
|
||
{scenes.map((scene) => (
|
||
<button
|
||
key={scene.id}
|
||
onClick={() => setSelectedScene(scene.name === selectedScene ? '' : scene.name)}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedScene === scene.name
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={selectedScene === scene.name ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
{scene.name}
|
||
<span className={`ml-1.5 text-xs ${
|
||
selectedScene === scene.name
|
||
? 'text-gray-300'
|
||
: 'text-gray-500 dark:text-gray-400'
|
||
}`}>
|
||
({scene.count || 0})
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Platform Filter (平台分类) - 条件显示，仅在有平台时显示 */}
|
||
{platforms.length > 0 && (
|
||
<div className="mb-4">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-sm font-medium text-gray-700 dark:text-gray-300">平台分类</h2>
|
||
{selectedPlatform && (
|
||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||
{materials.length} 个素材
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => setSelectedPlatform('')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedPlatform === ''
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={selectedPlatform === '' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
全部
|
||
<span className={`ml-1.5 text-xs ${
|
||
selectedPlatform === ''
|
||
? 'text-gray-300'
|
||
: 'text-gray-500 dark:text-gray-400'
|
||
}`}>
|
||
({totalMaterialsCount})
|
||
</span>
|
||
</button>
|
||
{platforms.map((platform) => (
|
||
<button
|
||
key={platform.id}
|
||
onClick={() => setSelectedPlatform(platform.name === selectedPlatform ? '' : platform.name)}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedPlatform === platform.name
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={selectedPlatform === platform.name ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
{platform.name}
|
||
<span className={`ml-1.5 text-xs ${
|
||
selectedPlatform === platform.name
|
||
? 'text-gray-300'
|
||
: 'text-gray-500 dark:text-gray-400'
|
||
}`}>
|
||
({platform.count || 0})
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Month Filter (上传月份) */}
|
||
<div className="mb-4">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-sm font-medium text-gray-700 dark:text-gray-300">上传月份</h2>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => setSelectedMonth('')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedMonth === ''
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={selectedMonth === '' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
全部
|
||
<span className={`ml-1.5 text-xs ${
|
||
selectedMonth === ''
|
||
? 'text-gray-300'
|
||
: 'text-gray-500 dark:text-gray-400'
|
||
}`}>
|
||
({totalMaterialsCount})
|
||
</span>
|
||
</button>
|
||
{months.map((month) => (
|
||
<button
|
||
key={month.value}
|
||
onClick={() => setSelectedMonth(month.value === selectedMonth ? '' : month.value)}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedMonth === month.value
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={selectedMonth === month.value ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
{month.label}
|
||
<span className={`ml-1.5 text-xs ${
|
||
selectedMonth === month.value
|
||
? 'text-gray-300'
|
||
: 'text-gray-500 dark:text-gray-400'
|
||
}`}>
|
||
({month.count})
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
</>
|
||
)}
|
||
|
||
{/* Sort Options (排序方式) - 保留排序选项 */}
|
||
<div className="mb-4">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 className="text-sm font-medium text-gray-700 dark:text-gray-300">排序方式</h2>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => setSortBy('createdAt')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
sortBy === 'createdAt'
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={sortBy === 'createdAt' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
最新上传
|
||
</button>
|
||
<button
|
||
onClick={() => setSortBy('downloadCount')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
sortBy === 'downloadCount'
|
||
? 'text-white'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={sortBy === 'downloadCount' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
下载最多
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Active Filters Display */}
|
||
{(searchKeyword || selectedCategory || selectedScene || selectedMaterialType || selectedPlatform || selectedMonth) && (
|
||
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-apple p-3 mb-4">
|
||
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 flex-wrap">
|
||
<span className="font-medium text-blue-600 dark:text-blue-400">当前筛选：</span>
|
||
{searchKeyword && (
|
||
<span className="inline-flex items-center gap-1 px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded-full">
|
||
搜索: {searchKeyword}
|
||
<button
|
||
onClick={() => setSearchKeyword('')}
|
||
className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
{selectedCategory && (
|
||
<span className="inline-flex items-center gap-1 px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded-full">
|
||
店铺: {selectedCategory}
|
||
<button
|
||
onClick={() => setSelectedCategory('')}
|
||
className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
{selectedScene && (
|
||
<span className="inline-flex items-center gap-1 px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded-full">
|
||
场景类别: {selectedScene}
|
||
<button
|
||
onClick={() => setSelectedScene('')}
|
||
className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
{selectedMaterialType && (
|
||
<span className="inline-flex items-center gap-1 px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded-full">
|
||
素材类型: {selectedMaterialType}
|
||
<button
|
||
onClick={() => setSelectedMaterialType('')}
|
||
className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
{selectedPlatform && (
|
||
<span className="inline-flex items-center gap-1 px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded-full">
|
||
平台分类: {selectedPlatform}
|
||
<button
|
||
onClick={() => setSelectedPlatform('')}
|
||
className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
{selectedMonth && (
|
||
<span className="inline-flex items-center gap-1 px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded-full">
|
||
月份: {months.find(m => m.value === selectedMonth)?.label || selectedMonth}
|
||
<button
|
||
onClick={() => setSelectedMonth('')}
|
||
className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
)}
|
||
<button
|
||
onClick={() => {
|
||
setSearchKeyword('')
|
||
setSelectedCategory('')
|
||
setSelectedScene('')
|
||
setSelectedMaterialType('')
|
||
setSelectedPlatform('')
|
||
setSelectedMonth('')
|
||
}}
|
||
className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline ml-2 font-medium"
|
||
>
|
||
清除所有筛选
|
||
</button>
|
||
</div>
|
||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||
💡 提示：可以组合使用多个筛选条件，找到更精确的素材
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Materials Grid */}
|
||
{loading ? (
|
||
<div className="text-center py-16">
|
||
<p className="text-gray-500 dark:text-gray-400 text-lg">加载中...</p>
|
||
</div>
|
||
) : materials.length === 0 ? (
|
||
<div className="text-center py-16">
|
||
<p className="text-gray-500 dark:text-gray-400 text-lg">
|
||
{searchKeyword || selectedCategory || selectedScene || selectedMaterialType || selectedPlatform ? '没有找到匹配的素材' : '还没有素材，快来上传第一个吧！'}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||
{materials.map((material) => (
|
||
<div key={material.id} className="card-apple overflow-hidden dark:bg-gray-800 dark:border-gray-700">
|
||
{/* Preview Image */}
|
||
<div
|
||
className="relative w-full h-[400px] bg-gray-200 dark:bg-gray-700 cursor-pointer group overflow-hidden"
|
||
onClick={() => {
|
||
// PSD、模特和视频类型直接跳转到详情页，其他类型打开预览弹窗
|
||
if (material.materialType === 'PSD' || material.materialType === '模特' || material.materialType === '视频') {
|
||
router.push(`/share/${material.id}`)
|
||
} else {
|
||
setPreviewImage({ url: material.previewUrl, title: material.productModel })
|
||
}
|
||
}}
|
||
>
|
||
<Image
|
||
src={material.previewUrl}
|
||
alt={material.sceneName}
|
||
fill
|
||
unoptimized
|
||
className="object-cover transition-transform group-hover:scale-105"
|
||
sizes="(max-width: 768px) 100vw, 300px"
|
||
/>
|
||
{/* SPU标签 */}
|
||
<div className="absolute top-2 left-2 bg-black/70 text-white px-2 py-1 rounded text-xs font-medium">
|
||
{material.productModel}
|
||
</div>
|
||
{/* 放大提示 */}
|
||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all flex items-center justify-center">
|
||
<svg className="w-12 h-12 text-white opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Info */}
|
||
<div className="p-4">
|
||
{/* 店铺、场景、素材类型和渲染器 */}
|
||
<div className="flex items-center gap-2 mb-3 flex-wrap">
|
||
<span className="inline-flex items-center px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded text-xs font-medium">
|
||
{material.categoryName}
|
||
</span>
|
||
<span className="inline-flex items-center px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded text-xs font-medium">
|
||
{material.sceneName}
|
||
</span>
|
||
<span className="inline-flex items-center px-2 py-1 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded text-xs font-medium">
|
||
{material.materialType}
|
||
</span>
|
||
{material.materialType === '3DMAX' && (
|
||
<span className="inline-flex items-center px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded text-xs font-medium">
|
||
{material.renderer}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* 作者和时间 */}
|
||
<div className="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||
<p className="truncate">
|
||
<span className="font-medium">作者：</span>
|
||
{material.authorName}
|
||
</p>
|
||
<p className="truncate text-xs">
|
||
<span className="font-medium">文件：</span>
|
||
{material.zipFileName}
|
||
</p>
|
||
<p className="text-xs">
|
||
<span className="font-medium">大小：</span>
|
||
<span className="text-blue-600 dark:text-blue-400">{formatFileSize(material.zipFileSize)}</span>
|
||
</p>
|
||
<p className="text-xs text-gray-500 dark:text-gray-500">
|
||
{format(new Date(material.createdAt), 'yyyy-MM-dd HH:mm')}
|
||
</p>
|
||
</div>
|
||
|
||
{/* 统计数据 */}
|
||
<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-3 pb-3 border-b border-gray-200 dark:border-gray-700">
|
||
<div className="flex items-center gap-3">
|
||
<span className="flex items-center gap-1">
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||
</svg>
|
||
{material.downloadCount}
|
||
</span>
|
||
<span className="flex items-center gap-1">
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||
</svg>
|
||
{material.likeCount}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Action Buttons */}
|
||
<div className="flex gap-2">
|
||
{/* 编辑按钮：仅素材上传者和管理员可见 */}
|
||
{session?.user && (
|
||
material.userId === (session.user as any).id || (session.user as any).role === 'ADMIN'
|
||
) && (
|
||
<button
|
||
onClick={() => handleEdit(material)}
|
||
className="flex-none px-4 py-2 rounded-apple font-medium text-sm transition-all bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800"
|
||
title="编辑"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||
</svg>
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => handleShare(material.id)}
|
||
className="flex-none px-4 py-2 rounded-apple font-medium text-sm transition-all bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
|
||
title="分享"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
onClick={() => handleDownload(material.id)}
|
||
disabled={downloadingId === material.id}
|
||
className="flex-1 btn-primary text-sm flex items-center justify-center gap-2 relative overflow-hidden disabled:opacity-75"
|
||
title="下载"
|
||
>
|
||
{downloadingId === material.id ? (
|
||
<>
|
||
{/* 进度条背景 */}
|
||
<div
|
||
className="absolute left-0 top-0 bottom-0 bg-blue-600 transition-all duration-300"
|
||
style={{ width: `${downloadProgress}%` }}
|
||
/>
|
||
<span className="relative z-10 flex items-center gap-2">
|
||
<svg className="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||
</svg>
|
||
{downloadProgress}%
|
||
</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||
</svg>
|
||
下载
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 分页组件 */}
|
||
{totalPages > 1 && (
|
||
<div className="mt-8 flex flex-col items-center gap-4">
|
||
<div className="flex items-center justify-center gap-2">
|
||
{/* 首页 */}
|
||
<button
|
||
onClick={() => {
|
||
setCurrentPage(1)
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}}
|
||
disabled={currentPage === 1}
|
||
className="px-4 py-2 rounded-lg bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
||
>
|
||
首页
|
||
</button>
|
||
|
||
{/* 上一页 */}
|
||
<button
|
||
onClick={() => {
|
||
setCurrentPage(prev => Math.max(1, prev - 1))
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}}
|
||
disabled={currentPage === 1}
|
||
className="px-4 py-2 rounded-lg bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||
</svg>
|
||
</button>
|
||
|
||
{/* 页码 */}
|
||
<div className="flex items-center gap-1">
|
||
{Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
|
||
let pageNum
|
||
if (totalPages <= 7) {
|
||
pageNum = i + 1
|
||
} else if (currentPage <= 4) {
|
||
pageNum = i + 1
|
||
} else if (currentPage >= totalPages - 3) {
|
||
pageNum = totalPages - 6 + i
|
||
} else {
|
||
pageNum = currentPage - 3 + i
|
||
}
|
||
|
||
return (
|
||
<button
|
||
key={pageNum}
|
||
onClick={() => {
|
||
setCurrentPage(pageNum)
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}}
|
||
className={`px-4 py-2 rounded-lg transition-all ${
|
||
currentPage === pageNum
|
||
? 'text-white font-medium'
|
||
: 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
|
||
}`}
|
||
style={currentPage === pageNum ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
{pageNum}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* 下一页 */}
|
||
<button
|
||
onClick={() => {
|
||
setCurrentPage(prev => Math.min(totalPages, prev + 1))
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}}
|
||
disabled={currentPage === totalPages}
|
||
className="px-4 py-2 rounded-lg bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</button>
|
||
|
||
{/* 末页 */}
|
||
<button
|
||
onClick={() => {
|
||
setCurrentPage(totalPages)
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}}
|
||
disabled={currentPage === totalPages}
|
||
className="px-4 py-2 rounded-lg bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
||
>
|
||
末页
|
||
</button>
|
||
</div>
|
||
|
||
{/* 页码跳转和信息 */}
|
||
<div className="flex items-center gap-4">
|
||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||
第 {currentPage} / {totalPages} 页，共 {totalMaterialsCount} 条
|
||
</span>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-sm text-gray-600 dark:text-gray-400">跳至</span>
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max={totalPages}
|
||
value={jumpPage}
|
||
onChange={(e) => setJumpPage(e.target.value)}
|
||
onKeyPress={(e) => {
|
||
if (e.key === 'Enter') {
|
||
const page = parseInt(jumpPage)
|
||
if (page >= 1 && page <= totalPages) {
|
||
setCurrentPage(page)
|
||
setJumpPage('')
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}
|
||
}
|
||
}}
|
||
className="w-16 px-2 py-1 text-center rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
|
||
placeholder=""
|
||
/>
|
||
<span className="text-sm text-gray-600 dark:text-gray-400">页</span>
|
||
<button
|
||
onClick={() => {
|
||
const page = parseInt(jumpPage)
|
||
if (page >= 1 && page <= totalPages) {
|
||
setCurrentPage(page)
|
||
setJumpPage('')
|
||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||
}
|
||
}}
|
||
className="px-3 py-1 text-sm rounded text-white hover:opacity-90 transition-all"
|
||
style={{ backgroundColor: themeColor }}
|
||
>
|
||
跳转
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</main>
|
||
|
||
{/* Upload Modal */}
|
||
{showUploadModal && (
|
||
<UploadModal
|
||
onClose={() => setShowUploadModal(false)}
|
||
onSuccess={() => {
|
||
setShowUploadModal(false)
|
||
fetchMaterials()
|
||
fetchCategories()
|
||
fetchScenes()
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{/* Image Preview Modal */}
|
||
{previewImage && (
|
||
<div
|
||
className="fixed inset-0 z-[100] bg-black/90 flex items-center justify-center p-4"
|
||
onClick={() => setPreviewImage(null)}
|
||
>
|
||
<div className="relative max-w-7xl max-h-[90vh] w-full h-full flex items-center justify-center">
|
||
<button
|
||
onClick={() => setPreviewImage(null)}
|
||
className="absolute top-4 right-4 z-10 bg-white/10 hover:bg-white/20 text-white rounded-full p-2 transition-all"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
<div className="text-center">
|
||
<img
|
||
src={previewImage.url}
|
||
alt={previewImage.title}
|
||
className="max-w-full max-h-[80vh] object-contain mx-auto"
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
<p className="text-white mt-4 text-lg font-medium">{previewImage.title}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Share Notification */}
|
||
{showShareNotification && (
|
||
<div className="fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-[200] flex items-center gap-2 animate-fade-in">
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
<span>分享链接已复制到剪贴板！</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 筛选弹窗 */}
|
||
{showFilterModal && (
|
||
<div
|
||
className="fixed inset-0 bg-black/50 flex items-center justify-center z-[200] p-4"
|
||
onClick={() => setShowFilterModal(false)}
|
||
>
|
||
<div
|
||
className="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto shadow-2xl"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">筛选选项</h3>
|
||
<button
|
||
onClick={() => setShowFilterModal(false)}
|
||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
{/* 类型分页 */}
|
||
<div>
|
||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">类型分页</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => setSelectedMaterialType('')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedMaterialType === ''
|
||
? 'text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
style={selectedMaterialType === '' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
全部
|
||
</button>
|
||
{materialTypes.map((type) => (
|
||
<button
|
||
key={type.value}
|
||
onClick={() => setSelectedMaterialType(type.value === selectedMaterialType ? '' : type.value)}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedMaterialType === type.value
|
||
? 'text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
style={selectedMaterialType === type.value ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
{type.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 使用店铺 */}
|
||
<div>
|
||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">使用店铺</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => setSelectedCategory('')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedCategory === ''
|
||
? 'text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
style={selectedCategory === '' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
全部 ({totalMaterialsCount})
|
||
</button>
|
||
{categories.map((category) => (
|
||
<button
|
||
key={category.id}
|
||
onClick={() => setSelectedCategory(category.name === selectedCategory ? '' : category.name)}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedCategory === category.name
|
||
? 'text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
style={selectedCategory === category.name ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
{category.name} ({category.count || 0})
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 场景类别 */}
|
||
<div>
|
||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">场景类别</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => setSelectedScene('')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedScene === ''
|
||
? 'text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
style={selectedScene === '' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
全部 ({totalMaterialsCount})
|
||
</button>
|
||
{scenes.map((scene) => (
|
||
<button
|
||
key={scene.id}
|
||
onClick={() => setSelectedScene(scene.name === selectedScene ? '' : scene.name)}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedScene === scene.name
|
||
? 'text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
style={selectedScene === scene.name ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
{scene.name} ({scene.count || 0})
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 平台分类 */}
|
||
{platforms.length > 0 && (
|
||
<div>
|
||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">平台分类</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => setSelectedPlatform('')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedPlatform === ''
|
||
? 'text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
style={selectedPlatform === '' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
全部 ({totalMaterialsCount})
|
||
</button>
|
||
{platforms.map((platform) => (
|
||
<button
|
||
key={platform.id}
|
||
onClick={() => setSelectedPlatform(platform.name === selectedPlatform ? '' : platform.name)}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedPlatform === platform.name
|
||
? 'text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
style={selectedPlatform === platform.name ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
{platform.name} ({platform.count || 0})
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 上传月份 */}
|
||
<div>
|
||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">上传月份</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => setSelectedMonth('')}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedMonth === ''
|
||
? 'text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
style={selectedMonth === '' ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
全部 ({totalMaterialsCount})
|
||
</button>
|
||
{months.map((month) => (
|
||
<button
|
||
key={month.value}
|
||
onClick={() => setSelectedMonth(month.value === selectedMonth ? '' : month.value)}
|
||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
|
||
selectedMonth === month.value
|
||
? 'text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
style={selectedMonth === month.value ? { backgroundColor: themeColor } : {}}
|
||
>
|
||
{month.label} ({month.count})
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-6 flex gap-3 justify-end">
|
||
<button
|
||
onClick={() => {
|
||
setSelectedCategory('')
|
||
setSelectedScene('')
|
||
setSelectedMaterialType('')
|
||
setSelectedPlatform('')
|
||
setSelectedMonth('')
|
||
}}
|
||
className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||
>
|
||
清除全部
|
||
</button>
|
||
<button
|
||
onClick={() => setShowFilterModal(false)}
|
||
className="px-4 py-2 text-white rounded-lg transition-all hover:opacity-90"
|
||
style={{ backgroundColor: themeColor }}
|
||
>
|
||
确定
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Share Modal */}
|
||
{showShareModal && shareUrl && (
|
||
<div
|
||
className="fixed inset-0 bg-black/50 flex items-center justify-center z-[200]"
|
||
onClick={() => setShowShareModal(false)}
|
||
>
|
||
<div
|
||
className="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-lg w-full mx-4 shadow-2xl"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">分享链接</h3>
|
||
<div className="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg mb-4 break-all text-sm text-gray-800 dark:text-gray-200">
|
||
{shareUrl}
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={copyShareUrl}
|
||
className="flex-1 text-white px-4 py-2 rounded-lg transition-all hover:opacity-90"
|
||
style={{ backgroundColor: themeColor }}
|
||
>
|
||
复制链接
|
||
</button>
|
||
<button
|
||
onClick={() => setShowShareModal(false)}
|
||
className="flex-1 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-800 dark:text-white px-4 py-2 rounded-lg transition-colors"
|
||
>
|
||
关闭
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* AI聊天助手 */}
|
||
<AIChatWidget />
|
||
|
||
{/* 修改密码弹窗 */}
|
||
<ChangePasswordModal
|
||
isOpen={showChangePasswordModal}
|
||
onClose={() => {
|
||
if (!isDefaultPassword) {
|
||
setShowChangePasswordModal(false)
|
||
}
|
||
}}
|
||
isRequired={isDefaultPassword}
|
||
onSuccess={() => {
|
||
setIsDefaultPassword(false)
|
||
setShowChangePasswordModal(false)
|
||
// 刷新页面以更新session
|
||
window.location.reload()
|
||
}}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|