优化详情页
This commit is contained in:
root
parent
0b2dcecc70
commit
bea1b85a00
|
|
@ -21,6 +21,7 @@ const ProjectMaterialsCenter: React.FC<ProjectMaterialsCenterProps> = ({
|
|||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [selectedModelIds, setSelectedModelIds] = useState<string[]>([])
|
||||
const [filterType, setFilterType] = useState<'all' | 'original' | 'segmented'>('all')
|
||||
const [usageFilter, setUsageFilter] = useState<'all' | 'used' | 'unused'>('all')
|
||||
const [selectedMaterial, setSelectedMaterial] = useState<VideoSegment | null>(null)
|
||||
const [showVideoPlayer, setShowVideoPlayer] = useState(false)
|
||||
|
||||
|
|
@ -29,14 +30,14 @@ const ProjectMaterialsCenter: React.FC<ProjectMaterialsCenterProps> = ({
|
|||
// 搜索过滤
|
||||
const matchesSearch = material.filename.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(material.tags || []).some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
|
||||
|
||||
// 模特过滤（如果选择了模特）
|
||||
const matchesModel = selectedModelIds.length === 0 ||
|
||||
const matchesModel = selectedModelIds.length === 0 ||
|
||||
selectedModelIds.some(modelId => {
|
||||
const model = models.find(m => m.id === modelId)
|
||||
return model && (material.tags || []).includes(model.model_number)
|
||||
})
|
||||
|
||||
|
||||
// 类型过滤
|
||||
let matchesType = true
|
||||
if (filterType === 'original') {
|
||||
|
|
@ -44,16 +45,27 @@ const ProjectMaterialsCenter: React.FC<ProjectMaterialsCenterProps> = ({
|
|||
} else if (filterType === 'segmented') {
|
||||
matchesType = material.segment_index > 0
|
||||
}
|
||||
|
||||
return matchesSearch && matchesModel && matchesType
|
||||
|
||||
// 使用状态过滤
|
||||
let matchesUsage = true
|
||||
if (usageFilter === 'used') {
|
||||
matchesUsage = material.use_count > 0
|
||||
} else if (usageFilter === 'unused') {
|
||||
matchesUsage = material.use_count === 0
|
||||
}
|
||||
|
||||
return matchesSearch && matchesModel && matchesType && matchesUsage
|
||||
})
|
||||
|
||||
const handleModelToggle = (modelId: string) => {
|
||||
setSelectedModelIds(prev =>
|
||||
prev.includes(modelId)
|
||||
? prev.filter(id => id !== modelId)
|
||||
: [...prev, modelId]
|
||||
)
|
||||
setSelectedModelIds(prev => {
|
||||
// 如果当前模特已选中，则取消选择
|
||||
if (prev.includes(modelId)) {
|
||||
return prev.filter(id => id !== modelId)
|
||||
}
|
||||
// 如果当前模特未选中，则添加到选择列表
|
||||
return [...prev, modelId]
|
||||
})
|
||||
}
|
||||
|
||||
const handleUseMaterial = async (material: VideoSegment) => {
|
||||
|
|
@ -113,6 +125,33 @@ const ProjectMaterialsCenter: React.FC<ProjectMaterialsCenterProps> = ({
|
|||
|
||||
{/* 筛选器 - 紧凑布局 */}
|
||||
<div className="space-y-3">
|
||||
{/* 使用状态筛选 */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex items-center">
|
||||
<Tag size={14} className="text-gray-400 mr-1" />
|
||||
<span className="text-xs font-medium text-gray-700">使用状态:</span>
|
||||
</div>
|
||||
<div className="flex space-x-1.5">
|
||||
{[
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 'unused', label: '未使用' },
|
||||
{ value: 'used', label: '已使用' }
|
||||
].map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => setUsageFilter(option.value as any)}
|
||||
className={`px-2 py-1 text-xs rounded transition-colors ${
|
||||
usageFilter === option.value
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 模特筛选 */}
|
||||
{models.length > 0 && (
|
||||
<div>
|
||||
|
|
@ -121,6 +160,16 @@ const ProjectMaterialsCenter: React.FC<ProjectMaterialsCenterProps> = ({
|
|||
<span className="text-xs font-medium text-gray-700">模特:</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<button
|
||||
onClick={() => setSelectedModelIds([])}
|
||||
className={`px-2 py-1 text-xs rounded-full border transition-colors ${
|
||||
selectedModelIds.length === 0
|
||||
? 'bg-blue-600 text-white border-blue-600'
|
||||
: 'bg-white text-gray-700 border-gray-300 hover:border-blue-400'
|
||||
}`}
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
{models.map((model) => (
|
||||
<button
|
||||
key={model.id}
|
||||
|
|
@ -134,14 +183,6 @@ const ProjectMaterialsCenter: React.FC<ProjectMaterialsCenterProps> = ({
|
|||
{model.model_number}
|
||||
</button>
|
||||
))}
|
||||
{selectedModelIds.length > 0 && (
|
||||
<button
|
||||
onClick={() => setSelectedModelIds([])}
|
||||
className="px-2 py-1 text-xs bg-red-100 text-red-700 rounded-full hover:bg-red-200 transition-colors"
|
||||
>
|
||||
清除
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -181,13 +222,13 @@ const ProjectMaterialsCenter: React.FC<ProjectMaterialsCenterProps> = ({
|
|||
<div className="text-center py-8">
|
||||
<Video className="mx-auto text-gray-400 mb-3" size={48} />
|
||||
<h3 className="text-base font-medium text-gray-900 mb-1">
|
||||
{searchTerm || selectedModelIds.length > 0 || filterType !== 'all'
|
||||
{searchTerm || selectedModelIds.length > 0 || filterType !== 'all' || usageFilter !== 'all'
|
||||
? '没有找到匹配的素材'
|
||||
: '暂无项目素材'
|
||||
}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
{searchTerm || selectedModelIds.length > 0 || filterType !== 'all'
|
||||
{searchTerm || selectedModelIds.length > 0 || filterType !== 'all' || usageFilter !== 'all'
|
||||
? '尝试调整搜索条件或筛选器'
|
||||
: `上传包含"${project.product_name}"标签的视频素材`
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue