diff --git a/apps/desktop/src/components/video-generation/MaterialSelector.tsx b/apps/desktop/src/components/video-generation/MaterialSelector.tsx index 202c491..6693e31 100644 --- a/apps/desktop/src/components/video-generation/MaterialSelector.tsx +++ b/apps/desktop/src/components/video-generation/MaterialSelector.tsx @@ -1,15 +1,14 @@ import React, { useState, useEffect } from 'react'; import { MagnifyingGlassIcon, - PlusIcon, - CheckIcon + PlusIcon } from '@heroicons/react/24/outline'; import { MaterialCategory, MaterialAsset, MaterialSelectorProps } from '../../types/videoGeneration'; -import { MaterialAssetCard } from './MaterialAssetCard'; +import { SimpleMaterialCard } from './SimpleMaterialCard'; /** * 素材选择器组件 @@ -219,60 +218,54 @@ export const MaterialSelector: React.FC = ({ return (
{/* 搜索栏 */} -
+
- + setSearchQuery(e.target.value)} - className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 text-sm" + className="w-full pl-8 pr-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-primary-500 focus:border-transparent transition-all duration-200" />
- + {/* 选择状态 */} {selectedAssets.length > 0 && ( -
- 已选择 {selectedAssets.length} 个素材 +
+ 已选 {selectedAssets.length} 个 {maxSelection && ` / ${maxSelection}`}
)}
{/* 素材列表 */} -
+
{isLoading ? ( -
-
- 加载中... +
+
+ 加载中...
) : filteredAssets.length === 0 ? (
- -

+ +

{searchQuery.trim() ? '未找到匹配的素材' : '暂无素材'}

) : ( -
+
{filteredAssets.map((asset) => ( -
- - - {/* 选择状态指示器 */} - {isAssetSelected(asset) && ( -
- -
- )} -
+ { + console.log('Preview asset:', asset); + // TODO: 实现预览功能 + }} + /> ))}
)} diff --git a/apps/desktop/src/components/video-generation/SimpleMaterialCard.tsx b/apps/desktop/src/components/video-generation/SimpleMaterialCard.tsx new file mode 100644 index 0000000..e150c1d --- /dev/null +++ b/apps/desktop/src/components/video-generation/SimpleMaterialCard.tsx @@ -0,0 +1,140 @@ +import React from 'react'; +import { + PlayIcon, + MusicalNoteIcon, + DocumentTextIcon, + PhotoIcon, + VideoCameraIcon, + CheckIcon +} from '@heroicons/react/24/outline'; +import { + MaterialAsset, + MaterialCategory, + MATERIAL_CATEGORY_CONFIG +} from '../../types/videoGeneration'; + +interface SimpleMaterialCardProps { + asset: MaterialAsset; + isSelected?: boolean; + onSelect?: (asset: MaterialAsset) => void; + onPreview?: (asset: MaterialAsset) => void; +} + +/** + * 简化版素材卡片组件 + * 只显示核心信息：缩略图、名称、类型 + */ +export const SimpleMaterialCard: React.FC = ({ + asset, + isSelected = false, + onSelect, + onPreview +}) => { + const categoryConfig = MATERIAL_CATEGORY_CONFIG[asset.category]; + + // 获取文件类型图标 + const getTypeIcon = () => { + switch (asset.type) { + case 'image': + return ; + case 'video': + return ; + case 'audio': + return ; + case 'text': + return ; + default: + return ; + } + }; + + return ( +
onSelect?.(asset)} + > + {/* 缩略图区域 */} +
+ {asset.thumbnail_path ? ( + {asset.name} + ) : ( +
+
+ {categoryConfig.icon} +
+
+ )} + + {/* 类型标识 */} +
+
+ {getTypeIcon()} +
+
+ + {/* 播放按钮（视频/音频） */} + {(asset.type === 'video' || asset.type === 'audio') && ( +
+ +
+ )} + + {/* 选择状态指示器 */} + {isSelected && ( +
+ +
+ )} +
+ + {/* 内容区域 */} +
+

+ {asset.name} +

+ + {/* 简化的元数据 */} +
+ + {categoryConfig.label} + + + {/* 时长或大小信息 */} + {asset.metadata?.duration && ( + + {Math.floor(asset.metadata.duration / 60)}:{(asset.metadata.duration % 60).toString().padStart(2, '0')} + + )} + {asset.metadata?.size && !asset.metadata?.duration && ( + + {(asset.metadata.size / 1024 / 1024).toFixed(1)}MB + + )} +
+
+ + {/* 悬停效果 */} +
+
+ ); +}; diff --git a/apps/desktop/src/pages/VideoGeneration.tsx b/apps/desktop/src/pages/VideoGeneration.tsx index 4fe8b63..88e8ed5 100644 --- a/apps/desktop/src/pages/VideoGeneration.tsx +++ b/apps/desktop/src/pages/VideoGeneration.tsx @@ -1,8 +1,6 @@ import React, { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { - PlayIcon, - CogIcon, SparklesIcon, ArrowRightIcon } from '@heroicons/react/24/outline'; @@ -280,7 +278,8 @@ const VideoGeneration: React.FC = () => {
{/* 素材分类标签 */}
-
+
{Object.values(MaterialCategory).map((category) => { const config = MATERIAL_CATEGORY_CONFIG[category]; const selectedAssets = project.selected_assets[category] || []; @@ -290,15 +289,15 @@ const VideoGeneration: React.FC = () => {