fix(viral-video) P0: 修复GET /models响应包装导致页面白屏,数组操作加防御 #2163

Merged
xiaoxia merged 1 commits from fix/viral-video-p0-models-api-wrapper into develop 2026-10-03 20:42:11 +08:00
Owner

P0 白屏根因

后端 GET /api/v1/viral-video/models 返回 {"models": [...]} 包装对象,前端 getViralVideoModels() 声明返回 ViralVideoModel[] 直接把 r.data 当数组使用,useEffect 里 list.some(...) 在对象上调用抛 TypeError: s.some is not a function,页面在初始化阶段崩溃。

修复

  1. 新增 ViralVideoModelsResponse 类型,getViralVideoModels() 泛型改为该类型,解析时兼容数组/包装两种返回(.then 里做 Array.isArray 判断,兜底空数组)
  2. 模型加载 useEffect:对 list、def.supported_resolutions 加 Array.isArray 防御
  3. 模型选择器 onChange:m.supported_resolutions 加防御兜底 ["480p","720p","1080p"];m.max_duration 加 typeof number 守卫
  4. 清晰度 Select:curM?.supported_resolutions 加 Array.isArray 守卫
  5. options 渲染:filter 掉非对象空项,label fallback 到 m.key

验证

  • tsc --noEmit: 0 errors
  • vite build: success (ViralVideoPage-BVgeScOq.js)
  • staging 实测 /api/v1/viral-video/models 返回 {models:[...]} 格式,本修复已按此解析

紧急 P0,请求尽快 review + 合入。

## P0 白屏根因 后端 GET /api/v1/viral-video/models 返回 {"models": [...]} 包装对象,前端 getViralVideoModels() 声明返回 ViralVideoModel[] 直接把 r.data 当数组使用,useEffect 里 list.some(...) 在对象上调用抛 TypeError: s.some is not a function,页面在初始化阶段崩溃。 ## 修复 1. 新增 ViralVideoModelsResponse 类型,getViralVideoModels() 泛型改为该类型,解析时兼容数组/包装两种返回(.then 里做 Array.isArray 判断,兜底空数组) 2. 模型加载 useEffect:对 list、def.supported_resolutions 加 Array.isArray 防御 3. 模型选择器 onChange:m.supported_resolutions 加防御兜底 ["480p","720p","1080p"];m.max_duration 加 typeof number 守卫 4. 清晰度 Select:curM?.supported_resolutions 加 Array.isArray 守卫 5. options 渲染:filter 掉非对象空项,label fallback 到 m.key ## 验证 - tsc --noEmit: 0 errors - vite build: success (ViralVideoPage-BVgeScOq.js) - staging 实测 /api/v1/viral-video/models 返回 {models:[...]} 格式,本修复已按此解析 紧急 P0,请求尽快 review + 合入。
xiaoxia added 1 commit 2026-10-03 19:35:27 +08:00
fix(viral-video) P0: 修复GET /models响应包装导致页面白屏,数组操作加防御
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 1s
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 1s
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m25s
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m32s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m43s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m30s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 3m9s
AI Code Review / AI Code Review (pull_request) Successful in 7m10s
CI/CD Pipeline / Validate - Style (pull_request) Successful in 11m56s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 10m42s
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 14m20s
CI/CD Pipeline / Validate - Security (pull_request) Successful in 33m4s
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / CI Gate (pull_request) Successful in 1s
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 2m22s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 5m21s
e5cdb93c78
根因:后端 GET /api/v1/viral-video/models 返回 {"models": [...]} 包装对象,
前端 getViralVideoModels() 声明返回 ViralVideoModel[] 并在 .then 直接对 r.data 调 .some(),
实际 r.data 是对象而非数组,导致 TypeError: s.some is not a function 白屏。

修复:
- 新增 ViralVideoModelsResponse 类型
- getViralVideoModels() 改为泛型 ViralVideoModelsResponse,解析时兼容数组/包装两种返回
- 模型加载 useEffect:list/supported_resolutions 加 Array.isArray 防御
- 模型切换 onChange:m.supported_resolutions 加防御兜底 [480p,720p,1080p]
- 清晰度 Select 过滤池:curM?.supported_resolutions 加 Array.isArray 守卫
- options 渲染:filter 掉非对象空项,label fallback 到 key
- max_duration 加 typeof === 'number' 防御
auto-approve-bot approved these changes 2026-10-03 19:37:11 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。
auto-approve-bot approved these changes 2026-10-03 19:37:11 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。

🚀 预览环境已部署

项目 详情
PR号 #2163
预览链接 https://pr-2163.preview.xiaoxiajianji.com
API环境 staging

💡 预览环境使用 staging API 数据,请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后,预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2163 | | 预览链接 | [https://pr-2163.preview.xiaoxiajianji.com](https://pr-2163.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据,请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后,预览环境会自动清理。
xiaoxia merged commit f0d46b44d7 into develop 2026-10-03 20:42:11 +08:00

🗑️ 预览环境已清理

PR #2163 已关闭或合并,对应的预览环境已被清理。

如有需要,可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #2163 已关闭或合并,对应的预览环境已被清理。 > 如有需要,可以重新打开 PR 来重新生成预览环境。
Sign in to join this conversation.