114 lines
3.2 KiB
Markdown
114 lines
3.2 KiB
Markdown
# 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. **删除功能** - 素材和视频均支持删除
|
|
|
|
---
|
|
|
|
## 📊 测试清单
|
|
|
|
- [x] 上传视频后检查素材列表显示原始文件名
|
|
- [x] 刷新页面后检查历史视频列表持久化
|
|
- [x] 测试删除素材功能
|
|
- [x] 测试删除生成视频功能
|
|
- [x] 测试历史视频列表点击切换播放
|
|
|
|
---
|
|
|
|
## 🔧 发布功能修复 (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}` | 注销平台登录 |
|
|
|