/docs/前端拖拽排序调试指南.md

前端拖拽排序调试指南

问题确认

通过后端诊断，我们确认了以下几点：

• ✅ 后端API完全正常工作
• ✅ 所有API端点响应正确
• ✅ 数据库数据正确
• ❌ 前端没有发出API请求（后端日志中无记录）

问题定位

问题出现在前端！ 前端的拖拽排序功能没有正确触发API调用。

前端调试步骤

1. 打开浏览器开发者工具

1. 在浏览器中打开项目详情页面
2. 按 F12 或右键 → "检查元素" 打开开发者工具
3. 切换到 Network 标签页
4. 确保记录网络请求（红色录制按钮应该是激活状态）

2. 检查拖拽功能是否触发

1. 尝试拖拽合集中的片段
2. 观察 Network 标签页是否有新的API请求出现
3. 如果没有API请求，说明拖拽事件没有正确处理

3. 检查JavaScript错误

1. 切换到 Console 标签页
2. 尝试拖拽排序操作
3. 查看是否有红色的错误信息
4. 记录错误信息以便进一步诊断

4. 检查组件是否正确渲染

1. 在 Elements 标签页中检查合集组件
2. 确认拖拽相关的事件处理器是否正确绑定
3. 查看组件的props和state是否正确

可能的问题原因

1. 拖拽库问题

症状: 拖拽操作无效果，没有视觉反馈 检查:

• 确认是否使用了拖拽库（如react-dnd, @dnd-kit等）
• 检查拖拽库的版本兼容性
• 查看拖拽库的配置是否正确

2. 事件处理器未绑定

症状: 可以拖拽但没有触发回调 检查:

• 检查 onReorderClips 等回调函数是否正确传递
• 确认组件的props是否正确接收

3. 状态管理问题

症状: 拖拽后状态没有更新 检查:

• 检查store中的 reorderCollectionClips 方法是否被调用
• 在方法开头添加 console.log 确认执行

4. API调用被拦截

症状: 前端代码执行但API请求没发出 检查:

• 检查axios配置
• 查看请求拦截器是否有问题
• 确认网络连接正常

具体调试代码

在CollectionPreviewModal.tsx中添加调试日志

const handleReorderClips = async (newClipIds: string[]) => {
  console.log('🔄 handleReorderClips called with:', newClipIds)
  
  try {
    console.log('📤 Calling onReorderClips...')
    await onReorderClips?.(collection.id, newClipIds)
    console.log('✅ onReorderClips completed successfully')
    
    message.success('合集顺序已更新')
  } catch (error) {
    console.error('❌ onReorderClips failed:', error)
    message.error('更新合集顺序失败')
  }
}

在useProjectStore.ts中添加调试日志

reorderCollectionClips: async (projectId: string, collectionId: string, newClipIds: string[]) => {
  console.log('🎯 reorderCollectionClips called:', { projectId, collectionId, newClipIds })
  
  // ... 现有代码 ...
  
  try {
    console.log('📤 Calling projectApi.reorderCollectionClips...')
    await projectApi.reorderCollectionClips(projectId, collectionId, newClipIds)
    console.log('✅ API call successful')
  } catch (error) {
    console.error('❌ API call failed:', error)
    // ... 错误处理 ...
  }
}

在api.ts中添加调试日志

reorderCollectionClips: (projectId: string, collectionId: string, clipIds: string[]): Promise<Collection> => {
  console.log('🌐 API call: reorderCollectionClips', { projectId, collectionId, clipIds })
  
  const url = `/projects/${projectId}/collections/${collectionId}/reorder`
  console.log('📡 Request URL:', url)
  console.log('📦 Request data:', clipIds)
  
  return api.patch(url, clipIds)
}

快速测试方法

在浏览器控制台中直接测试API调用：

// 1. 测试store方法
window.useProjectStore.getState().reorderCollectionClips(
  '86f9aa12-2f35-4618-b265-74b3d9a4cf2d',
  '5e5dafc8-f29a-4705-8e87-b2bb06f2a5de', 
  ['3d0bb0b6-dd8d-4105-9219-b1bce74c7b4a', '678a8c4b-16ac-4893-a8d9-1b28c3bb4c81']
)

// 2. 直接测试API调用
fetch('http://localhost:8000/api/v1/projects/86f9aa12-2f35-4618-b265-74b3d9a4cf2d/collections/5e5dafc8-f29a-4705-8e87-b2bb06f2a5de/reorder', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(['678a8c4b-16ac-4893-a8d9-1b28c3bb4c81', '3d0bb0b6-dd8d-4105-9219-b1bce74c7b4a'])
}).then(r => r.json()).then(console.log)

预期结果

如果一切正常，你应该看到：

1. Network标签页: 出现对 /projects/.../collections/.../reorder 的PATCH请求
2. Console标签页: 看到相关的调试日志输出
3. Response: 收到 {"message": "Collection clips reordered successfully", "clip_ids": [...]}
4. UI更新: 合集中片段的顺序立即更新

下一步行动

1. 按照上述步骤进行调试
2. 记录发现的错误信息
3. 根据错误信息定位具体问题
4. 修复前端代码中的问题

联系支持

如果按照此指南仍无法解决问题，请提供：

• 浏览器控制台的错误信息
• Network标签页的请求记录截图
• 具体的操作步骤描述