优化详情页

src/components/ProjectMaterialsCenter.tsx

@@ -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 => 
+    setSelectedModelIds(prev => {
-      prev.includes(modelId) 
+      // 如果当前模特已选中，则取消选择
-        ? prev.filter(id => id !== modelId)
+      if (prev.includes(modelId)) {
-        : [...prev, 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}"标签的视频素材`
               }