166 lines
4.7 KiB
Markdown
166 lines
4.7 KiB
Markdown
# 项目素材关联问题修复指南
|
||
|
||
## 🐛 问题描述
|
||
|
||
用户反馈：导入素材成功，但在项目详情页面的素材列表中看不到导入的素材，素材没有与当前项目正确关联。
|
||
|
||
## 🔍 问题分析
|
||
|
||
### 原始问题
|
||
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. **数据库状态**: 确保数据库连接正常，素材数据正确保存
|
||
|
||
---
|
||
|
||
通过这些修复，项目素材关联问题应该得到解决，用户可以正常看到导入的素材！
|