Merge branch 'master' of ssh://gitea.bowongai.com:221/bowong/mxivideo
This commit is contained in:
imeepos
commit
713ab605a7
|
|
@ -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. **数据库状态**: 确保数据库连接正常，素材数据正确保存
|
||||
|
||||
---
|
||||
|
||||
通过这些修复，项目素材关联问题应该得到解决，用户可以正常看到导入的素材！
|
||||
|
|
@ -99,20 +99,27 @@ const ImportMaterialModal: React.FC<ImportMaterialModalProps> = ({
|
|||
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) {
|
||||
|
|
|
|||
|
|
@ -13,13 +13,15 @@ interface ProjectMaterialsCenterProps {
|
|||
materials: VideoSegment[]
|
||||
models: Model[]
|
||||
onMaterialsChange: (materials: VideoSegment[]) => void
|
||||
onRefreshMaterials?: () => void
|
||||
}
|
||||
|
||||
const ProjectMaterialsCenter: React.FC<ProjectMaterialsCenterProps> = ({
|
||||
project,
|
||||
materials,
|
||||
models,
|
||||
onMaterialsChange
|
||||
onMaterialsChange,
|
||||
onRefreshMaterials
|
||||
}) => {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [selectedModelIds, setSelectedModelIds] = useState<string[]>([])
|
||||
|
|
@ -157,15 +159,23 @@ const ProjectMaterialsCenter: React.FC<ProjectMaterialsCenterProps> = ({
|
|||
}
|
||||
|
||||
// 处理导入完成
|
||||
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) => {
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue