fix: 前端交互全面审计 — 上传422修复 + 进度反馈 + 防重复提交 #99

2026-06-29T10:49:11+08:00

xiaoxia commented

2026-06-29 10:49:11 +08:00

修改内容

🔴 P0 Bug

AssetLibrary: handleUpload 构建 FormData 时补充 project_id，调用 getOrCreateDefaultProject() 获取，修复上传 422 错误

🟡 P0 交互

AssetLibrary: 上传时 Dragger 区域显示 Spin + 禁用拖拽 + 文案切换为「正在上传，请稍候...」
client.ts: 全局拦截器新增 413（文件过大）、415（格式不支持）、503（服务不可用）专属提示

🔵 全面交互排查

页面	修复项
GeneratePage	生成进行中禁用「上一步/下一步」按钮，防止误操作
Billing	自动续费 Switch 添加 `loading` 状态，防止连点
TemplateLibrary	收藏按钮在 mutation 进行中 `disabled`，防止重复点击
TitleLibrary	空状态增加「新建标题」和「批量导入」引导按钮

修改文件清单

apps/web/src/api/client.ts — 413/415/503 状态码处理
apps/web/src/pages/assets/AssetLibrary.tsx — 上传 project_id + 进度反馈
apps/web/src/pages/generate/GeneratePage.tsx — 生成中禁用步骤导航
apps/web/src/pages/subscription/Billing.tsx — 续费开关 loading
apps/web/src/pages/templates/TemplateLibrary.tsx — 收藏按钮防重复
apps/web/src/pages/titles/TitleLibrary.tsx — 空状态引导

## 修改内容 ### 🔴 P0 Bug - **AssetLibrary**: `handleUpload` 构建 FormData 时补充 `project_id`，调用 `getOrCreateDefaultProject()` 获取，修复上传 422 错误 ### 🟡 P0 交互 - **AssetLibrary**: 上传时 Dragger 区域显示 Spin + 禁用拖拽 + 文案切换为「正在上传，请稍候...」 - **client.ts**: 全局拦截器新增 413（文件过大）、415（格式不支持）、503（服务不可用）专属提示 ### 🔵 全面交互排查 | 页面 | 修复项 | |------|--------| | GeneratePage | 生成进行中禁用「上一步/下一步」按钮，防止误操作 | | Billing | 自动续费 Switch 添加 `loading` 状态，防止连点 | | TemplateLibrary | 收藏按钮在 mutation 进行中 `disabled`，防止重复点击 | | TitleLibrary | 空状态增加「新建标题」和「批量导入」引导按钮 | ### 修改文件清单 - `apps/web/src/api/client.ts` — 413/415/503 状态码处理 - `apps/web/src/pages/assets/AssetLibrary.tsx` — 上传 project_id + 进度反馈 - `apps/web/src/pages/generate/GeneratePage.tsx` — 生成中禁用步骤导航 - `apps/web/src/pages/subscription/Billing.tsx` — 续费开关 loading - `apps/web/src/pages/templates/TemplateLibrary.tsx` — 收藏按钮防重复 - `apps/web/src/pages/titles/TitleLibrary.tsx` — 空状态引导

xiaoxia added 1 commit 2026-06-29 10:49:11 +08:00

fix: 前端交互全面审计 — 上传422修复 + 进度反馈 + 防重复提交

CI/CD Pipeline / Validate Code Quality And Tests (pull_request) Has been cancelled

Details

CI/CD Pipeline / Frontend Lint (pull_request) Has been cancelled

Details

53910e5f20

🔴 P0 Bug:
- AssetLibrary: handleUpload 补充 project_id，调用 getOrCreateDefaultProject() 解决 422

🟡 P0 交互:
- AssetLibrary: 上传时显示 Spin + 禁用 Dragger + 文案提示「正在上传」
- client.ts: 新增 413/415/503 状态码专属提示

🔵 全面交互排查:
- GeneratePage: 生成中禁用步骤导航按钮防误操作
- Billing: 自动续费 Switch 添加 loading 状态防连点
- TemplateLibrary: 收藏按钮 mutation 进行中 disabled 防重复
- TitleLibrary: 空状态增加「新建标题」和「批量导入」引导按钮

xiaoxia commented

2026-06-29 11:10:51 +08:00

代码审查结果 — PR #99 ✅ 通过

审查范围: 6 文件，+54/-11

变更确认

client.ts（全局拦截器增强）: 新增 413/415/503/5xx 兜底错误提示 + __msgShown 防重复标记
AssetLibrary.tsx: onError 使用 __msgShown 检查，上传区域添加 disabled 状态和 loading 文案
GeneratePage.tsx: onError __msgShown 检查 + useQuery isError 错误展示
Billing.tsx / TemplateLibrary.tsx / TitleLibrary.tsx: onError 统一使用 __msgShown 防重复 toast

审查意见

✅ 无 P0/P1 问题

P2（建议优化，不阻塞合并）:

缺少客户端文件大小校验: 上传前未在前端限制文件大小（如 500MB），超大文件会直接发送到后端才返回 413。建议在 handleUpload 中添加 file.size > MAX_SIZE 的前置检查，减少无效传输
422 无兜底: 拦截器对 422（验证错误）没有专门处理。虽然当前后端 422 都返回 detail 字段会被 serverMsg 捕获，但如果未来有后端返回非标准 422 响应，用户看不到任何提示。建议为 422 加一个兜底：message.error('请求参数有误，请检查后重试')

结论

✅ 通过，可以合并。 全局错误处理模式统一、__msgShown 防重复机制设计合理。

## 代码审查结果 — PR #99 ✅ 通过 **审查范围**: 6 文件，+54/-11 ### 变更确认 1. **client.ts（全局拦截器增强）**: 新增 413/415/503/5xx 兜底错误提示 + `__msgShown` 防重复标记 2. **AssetLibrary.tsx**: onError 使用 `__msgShown` 检查，上传区域添加 disabled 状态和 loading 文案 3. **GeneratePage.tsx**: onError `__msgShown` 检查 + useQuery isError 错误展示 4. **Billing.tsx / TemplateLibrary.tsx / TitleLibrary.tsx**: onError 统一使用 `__msgShown` 防重复 toast ### 审查意见 **✅ 无 P0/P1 问题** **P2（建议优化，不阻塞合并）**: 1. **缺少客户端文件大小校验**: 上传前未在前端限制文件大小（如 500MB），超大文件会直接发送到后端才返回 413。建议在 `handleUpload` 中添加 `file.size > MAX_SIZE` 的前置检查，减少无效传输 2. **422 无兜底**: 拦截器对 422（验证错误）没有专门处理。虽然当前后端 422 都返回 detail 字段会被 `serverMsg` 捕获，但如果未来有后端返回非标准 422 响应，用户看不到任何提示。建议为 422 加一个兜底：`message.error('请求参数有误，请检查后重试')` ### 结论 ✅ **通过，可以合并。** 全局错误处理模式统一、`__msgShown` 防重复机制设计合理。

xiaoxia merged commit 47d77ea29c into develop

2026-06-29 12:32:27 +08:00

xiaoxia referenced this issue from a commit

2026-06-29 12:32:28 +08:00

Merge pull request 'fix: 前端交互全面审计 — 上传422修复 + 进度反馈 + 防重复提交' (#99) from fix/frontend-interaction-audit into develop

xiaoxia referenced this pull request

2026-06-29 14:40:37 +08:00

feat: 剪辑计划编辑器前端实现 #106

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#99