diff --git a/docs/PROJECT_MATERIAL_ASSOCIATION_FIX.md b/docs/PROJECT_MATERIAL_ASSOCIATION_FIX.md new file mode 100644 index 0000000..da2c762 --- /dev/null +++ b/docs/PROJECT_MATERIAL_ASSOCIATION_FIX.md @@ -0,0 +1,165 @@ +# 项目素材关联问题修复指南 + +## 🐛 问题描述 + +用户反馈：导入素材成功，但在项目详情页面的素材列表中看不到导入的素材，素材没有与当前项目正确关联。 + +## 🔍 问题分析 + +### 原始问题 +1. **过滤条件过严**: 原来的逻辑只显示包含项目商品名标签**且未使用**的素材 +2. **标签匹配问题**: 可能导入的素材没有正确添加项目标签 +3. **刷新机制缺失**: 导入完成后没有正确刷新项目素材列表 + +### 根本原因 +```typescript +// 原始的过滤逻辑（有问题） +const filteredMaterials = response.data.filter(segment => + segment.tags.includes(project.product_name) && segment.use_count === 0 // 过于严格 +) +``` + +## ✅ 修复方案 + +### 1. 修复素材过滤逻辑 +**文件**: `src/pages/ProjectDetailPage.tsx` + +**修改前**: +```typescript +// 过滤包含商品名标签且未使用的素材 +const filteredMaterials = response.data.filter(segment => + segment.tags.includes(project.product_name) && segment.use_count === 0 +) +``` + +**修改后**: +```typescript +// 过滤包含商品名标签的素材（包括已使用和未使用的） +const filteredMaterials = response.data.filter(segment => + segment.tags.includes(project.product_name) +) +``` + +### 2. 添加调试信息 +```typescript +console.log(`项目 "${project.name}" 找到 ${filteredMaterials.length} 个相关素材`) +console.log('项目商品名:', project.product_name) +console.log('素材标签示例:', filteredMaterials.slice(0, 3).map(m => ({ filename: m.filename, tags: m.tags }))) +``` + +### 3. 增强导入过程调试 +**文件**: `src/components/ImportMaterialModal.tsx` + +添加详细的标签添加日志： +```typescript +console.log('开始导入素材到项目:', project) +console.log('初始标签:', importTags) +console.log('添加项目标签:', project.product_name) +console.log('最终标签列表:', importTags) +``` + +### 4. 完善刷新机制 +**文件**: `src/components/ProjectMaterialsCenter.tsx` + +- 添加 `onRefreshMaterials` 回调接口 +- 导入完成后自动刷新素材列表 +- 提供降级方案（页面刷新） + +## 🧪 测试步骤 + +### 步骤1: 验证项目信息 +1. 打开浏览器开发者工具（F12） +2. 进入项目详情页面 +3. 查看控制台输出，确认项目信息正确加载 + +### 步骤2: 测试素材导入 +1. 点击"导入素材"按钮 +2. 选择视频文件或文件夹 +3. 查看控制台输出，确认： + - 项目信息正确 + - 标签正确添加 + - 导入过程无错误 + +### 步骤3: 验证素材关联 +1. 导入完成后，查看项目素材列表 +2. 检查控制台输出： + - 找到的素材数量 + - 项目商品名 + - 素材标签示例 + +### 步骤4: 检查标签匹配 +1. 进入素材管理页面 +2. 查看导入的素材标签 +3. 确认包含项目商品名标签 + +## 🔧 故障排除 + +### 问题1: 素材仍然不显示 + +**检查项目商品名**: +```javascript +// 在控制台执行 +console.log('当前项目:', project) +console.log('商品名:', project.product_name) +``` + +**检查素材标签**: +1. 进入素材管理页面 +2. 查看导入的素材 +3. 确认标签中包含项目商品名 + +### 问题2: 导入时标签未添加 + +**检查导入日志**: +```javascript +// 查看控制台输出 +// 应该看到类似信息： +// "开始导入素材到项目: {id: '...', name: '...', product_name: '...'}" +// "添加项目标签: 商品名" +// "最终标签列表: ['标签1', '标签2', '商品名']" +``` + +### 问题3: 项目商品名为空 + +**解决方案**: +1. 进入项目管理页面 +2. 编辑项目信息 +3. 确保填写了商品名称 +4. 保存项目 + +### 问题4: 素材标签不匹配 + +**手动修复**: +1. 进入素材管理页面 +2. 找到相关素材 +3. 手动添加项目商品名作为标签 +4. 返回项目详情页面查看 + +## 📊 验证清单 + +- [ ] 项目信息正确加载（控制台有日志） +- [ ] 导入过程有详细日志输出 +- [ ] 项目标签正确添加到素材 +- [ ] 导入完成后素材列表自动刷新 +- [ ] 项目详情页面显示导入的素材 +- [ ] 素材筛选功能正常工作 + +## 🚀 预期结果 + +修复后的行为： + +1. **导入时**: 自动添加项目商品名标签 +2. **显示时**: 显示所有包含项目标签的素材（不管使用状态） +3. **刷新时**: 导入完成后自动刷新列表 +4. **调试时**: 控制台有详细的调试信息 + +## 📝 注意事项 + +1. **项目商品名必须填写**: 如果项目没有商品名，素材无法关联 +2. **标签大小写敏感**: 确保标签匹配时大小写一致 +3. **浏览器缓存**: 如果问题持续，尝试清除浏览器缓存 +4. **数据库状态**: 确保数据库连接正常，素材数据正确保存 + +--- + +通过这些修复，项目素材关联问题应该得到解决，用户可以正常看到导入的素材！ diff --git a/src/components/ImportMaterialModal.tsx b/src/components/ImportMaterialModal.tsx index f7cb16e..662c85b 100644 --- a/src/components/ImportMaterialModal.tsx +++ b/src/components/ImportMaterialModal.tsx @@ -99,20 +99,27 @@ const ImportMaterialModal: React.FC = ({ try { // 准备导入参数 const importTags = [...tags] - + + console.log('开始导入素材到项目:', project) + console.log('初始标签:', importTags) + // 添加项目标签 if (project.product_name && !importTags.includes(project.product_name)) { importTags.push(project.product_name) + console.log('添加项目标签:', project.product_name) } - + // 添加模特标签 const selectedModels = models.filter(m => selectedModelIds.includes(m.id)) selectedModels.forEach(model => { if (!importTags.includes(model.model_number)) { importTags.push(model.model_number) + console.log('添加模特标签:', model.model_number) } }) + console.log('最终标签列表:', importTags) + let result: BatchUploadResult if (selectedDirectory) { diff --git a/src/components/ProjectMaterialsCenter.tsx b/src/components/ProjectMaterialsCenter.tsx index 0dea7c1..3cd21c8 100644 --- a/src/components/ProjectMaterialsCenter.tsx +++ b/src/components/ProjectMaterialsCenter.tsx @@ -13,13 +13,15 @@ interface ProjectMaterialsCenterProps { materials: VideoSegment[] models: Model[] onMaterialsChange: (materials: VideoSegment[]) => void + onRefreshMaterials?: () => void } const ProjectMaterialsCenter: React.FC = ({ project, materials, models, - onMaterialsChange + onMaterialsChange, + onRefreshMaterials }) => { const [searchTerm, setSearchTerm] = useState('') const [selectedModelIds, setSelectedModelIds] = useState([]) @@ -157,15 +159,23 @@ const ProjectMaterialsCenter: React.FC = ({ } // 处理导入完成 - const handleImportComplete = (result: BatchUploadResult) => { + const handleImportComplete = async (result: BatchUploadResult) => { setShowImportModal(false) - // 刷新素材列表 - onMaterialsChange([...materials]) + console.log('导入完成，结果:', result) + console.log('项目信息:', project) // 显示导入结果 const message = `导入完成！\n成功: ${result.uploaded_files} 个文件\n生成片段: ${result.total_segments} 个` alert(message) + + // 重新加载项目素材 + if (onRefreshMaterials) { + onRefreshMaterials() + } else { + // 如果没有刷新回调，则刷新页面 + window.location.reload() + } } const formatDuration = (seconds: number) => { diff --git a/src/pages/ProjectDetailPage.tsx b/src/pages/ProjectDetailPage.tsx index 2e29e12..40d0ec6 100644 --- a/src/pages/ProjectDetailPage.tsx +++ b/src/pages/ProjectDetailPage.tsx @@ -71,11 +71,15 @@ const ProjectDetailPage: React.FC = () => { // 获取与项目商品名相关的素材 const response = await MediaService.getAllSegments() if (response.status && response.data) { - // 过滤包含商品名标签且未使用的素材 - const filteredMaterials = response.data.filter(segment => - segment.tags.includes(project.product_name) && segment.use_count === 0 + // 过滤包含商品名标签的素材（包括已使用和未使用的） + const filteredMaterials = response.data.filter(segment => + segment.tags.includes(project.product_name) ) setProjectMaterials(filteredMaterials) + + console.log(`项目 "${project.name}" 找到 ${filteredMaterials.length} 个相关素材`) + console.log('项目商品名:', project.product_name) + console.log('素材标签示例:', filteredMaterials.slice(0, 3).map(m => ({ filename: m.filename, tags: m.tags }))) } } catch (error) { console.error('Failed to load project materials:', error) @@ -174,6 +178,7 @@ const ProjectDetailPage: React.FC = () => { materials={projectMaterials} models={projectModels} onMaterialsChange={setProjectMaterials} + onRefreshMaterials={() => loadProjectMaterials(project)} />