ViGent2/Docs/DevLogs/Day8.md

Day 8: 用户体验优化

日期: 2026-01-22
目标: 文件名保留 + 视频持久化 + 界面优化

---

📋 任务概览

任务	状态
文件名保留	✅ 完成
视频持久化	✅ 完成
历史视频列表	✅ 完成
删除功能	✅ 完成

---

🎉 实施成果

后端改动

修改文件:

• backend/app/api/materials.py

  • ✅ sanitize_filename() 文件名安全化
  • ✅ 时间戳前缀避免冲突 ({timestamp}_{原始文件名})
  • ✅ list_materials 显示原始文件名
  • ✅ DELETE /api/materials/{id} 删除素材

• backend/app/api/videos.py

  • ✅ GET /api/videos/generated 历史视频列表
  • ✅ DELETE /api/videos/generated/{id} 删除视频

前端改动

修改文件:

• frontend/src/app/page.tsx
  • ✅ GeneratedVideo 类型定义
  • ✅ generatedVideos 状态管理
  • ✅ fetchGeneratedVideos() 获取历史
  • ✅ deleteMaterial() / deleteVideo() 删除功能
  • ✅ 素材卡片添加删除按钮 (hover 显示)
  • ✅ 历史视频列表组件 (右侧预览区下方)
  • ✅ 生成完成后自动刷新历史列表

---

🔧 API 变更

新增端点

方法	路径	说明
GET	/api/videos/generated	获取生成视频列表
DELETE	/api/videos/generated/{id}	删除生成视频
DELETE	/api/materials/{id}	删除素材

文件命名规则

原始: 测试视频.mp4
保存: 1737518400_测试视频.mp4
显示: 测试视频.mp4 (前端自动去除时间戳前缀)

---

✅ 完成总结

1. 文件名保留 - 上传保留原始名称，时间戳前缀避免冲突
2. 视频持久化 - 从文件系统读取，刷新不丢失
3. 历史列表 - 右侧显示历史视频，点击切换播放
4. 删除功能 - 素材和视频均支持删除

---

📊 测试清单

• 上传视频后检查素材列表显示原始文件名
• 刷新页面后检查历史视频列表持久化
• 测试删除素材功能
• 测试删除生成视频功能
• 测试历史视频列表点击切换播放

---

🔧 发布功能修复 (Day 8 下半场)

以下修复在用户体验优化后进行

问题

1. 抖音 QR 登录假成功 - 前端检测到旧 Cookie 文件就显示"登录成功"，实际可能已过期
2. 抖音上传循环卡死 - 发布后检测逻辑不完善，while True 无超时
3. 前端轮询不规范 - 使用 setInterval 手动轮询，不符合 React 最佳实践

修复

后端:

• publish_service.py - 添加 logout() 方法、修复 get_login_session_status() 优先检查活跃会话
• api/publish.py - 新增 POST /api/publish/logout/{platform} 端点
• douyin_uploader.py - 添加 import time，修复发布按钮点击竞态条件

前端:

• publish/page.tsx - 使用 useSWR 替代 setInterval 轮询登录状态
• package.json - 添加 swr 依赖

新增 API

方法	路径	说明
POST	/api/publish/logout/{platform}	注销平台登录