refactor(product-detail): 三阶段重构 ProductDetail(450→80行, -82%) #963

Closed
xiaoxia wants to merge 6 commits from refactor/product-detail into develop
Owner

变更说明

ProductDetail 页面三阶段重构,主文件 450→80 行(-82%)

Phase 1: 类型/常量/工具

  • constants.ts: 新增 STATUS_MAP 状态映射
  • utils.ts: 抽离 formatDuration / formatFileSize / formatDate

Phase 2: UI 组件

  • components/DetailHeader.tsx: 顶部导航栏(返回/下载/分享/删除)
  • components/DetailVideoPlayer.tsx: 自定义视频播放器(播放/进度/音量/全屏)
  • components/ProductInfoPanel.tsx: 产品信息元数据面板

Phase 3: 业务 Hook

  • hooks/useProductDetail.ts: 产品详情数据获取 + 下载/分享/删除操作
  • hooks/useVideoPlayer.ts: 视频播放器完整状态逻辑(150+行独立封装)

说明

  • 注意:组件命名为 DetailVideoPlayer,避免与 ProductLibrary 的 VideoPlayer 重名
  • 所有导入路径保持向后兼容
  • 视频播放器逻辑可复用于其他详情页面
## 变更说明 ProductDetail 页面三阶段重构,主文件 450→80 行(-82%) ### Phase 1: 类型/常量/工具 - `constants.ts`: 新增 STATUS_MAP 状态映射 - `utils.ts`: 抽离 formatDuration / formatFileSize / formatDate ### Phase 2: UI 组件 - `components/DetailHeader.tsx`: 顶部导航栏(返回/下载/分享/删除) - `components/DetailVideoPlayer.tsx`: 自定义视频播放器(播放/进度/音量/全屏) - `components/ProductInfoPanel.tsx`: 产品信息元数据面板 ### Phase 3: 业务 Hook - `hooks/useProductDetail.ts`: 产品详情数据获取 + 下载/分享/删除操作 - `hooks/useVideoPlayer.ts`: 视频播放器完整状态逻辑(150+行独立封装) ### 说明 - 注意:组件命名为 DetailVideoPlayer,避免与 ProductLibrary 的 VideoPlayer 重名 - 所有导入路径保持向后兼容 - 视频播放器逻辑可复用于其他详情页面
xiaoxia added 1 commit 2026-07-26 17:45:16 +08:00
refactor(product-detail): 三阶段重构 ProductDetail(450→80行, -82%)
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 21s
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m6s
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m7s
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 31s
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 1m49s
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 / PR Build Worker Image (pull_request) Successful in 23s
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m14s
AI Code Review / AI Code Review (pull_request) Successful in 1m38s
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 43s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 58s
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m36s
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 6m37s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
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 / Frontend Unit Tests (pull_request) Failing after 29s
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
eb999016c8
- Phase 1: 抽 constants(STATUS_MAP) + utils(formatDuration/formatFileSize/formatDate)
- Phase 2: 抽 3 个 UI 组件(DetailHeader/DetailVideoPlayer/ProductInfoPanel)
- Phase 3: 抽 2 个业务 Hook(useProductDetail/useVideoPlayer)
- 主文件 450→80 行,职责清晰,视频播放器逻辑可复用
xiaoxia added 1 commit 2026-07-27 12:34:50 +08:00
Merge branch 'develop' into refactor/product-detail
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 8s
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m22s
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 44s
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m30s
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 / PR Build Worker Image (pull_request) Successful in 19s
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m55s
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 2m9s
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m4s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m3s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m7s
AI Code Review / AI Code Review (pull_request) Successful in 1m37s
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 31s
CI/CD Pipeline / Unit Tests (pull_request) Has been cancelled
CI/CD Pipeline / Integration Tests (pull_request) Has been cancelled
CI/CD Pipeline / Frontend Unit Tests (pull_request) Has been cancelled
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been cancelled
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been cancelled
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been cancelled
CI/CD Pipeline / Build Production API Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Production Web Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been cancelled
CI/CD Pipeline / Deploy Production (pull_request) Has been cancelled
CI/CD Pipeline / Production Browser E2E (pull_request) Has been cancelled
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been cancelled
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
078c56ef62
xiaoxia added 1 commit 2026-07-27 15:29:19 +08:00
xiaoxia added 1 commit 2026-07-27 15:29:20 +08:00
xiaoxia added 1 commit 2026-07-27 15:29:22 +08:00
fix: 更新 formatDuration 导入路径为 detailUtils
CI/CD Pipeline / Check if frontend-only change (pull_request) Has been cancelled
CI/CD Pipeline / Validate - Code Quality (pull_request) Has been cancelled
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Has been cancelled
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Has been cancelled
CI/CD Pipeline / Unit Tests (pull_request) Has been cancelled
CI/CD Pipeline / Integration Tests (pull_request) Has been cancelled
CI/CD Pipeline / Frontend Lint (pull_request) Has been cancelled
CI/CD Pipeline / Frontend Unit Tests (pull_request) Has been cancelled
CI/CD Pipeline / PR Build API Image (pull_request) Has been cancelled
CI/CD Pipeline / PR Build Web Image (pull_request) Has been cancelled
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Staging API Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been cancelled
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been cancelled
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been cancelled
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been cancelled
CI/CD Pipeline / Build Production API Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Production Web Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been cancelled
CI/CD Pipeline / Deploy Production (pull_request) Has been cancelled
CI/CD Pipeline / Production Browser E2E (pull_request) Has been cancelled
CI/CD Pipeline / ACR Image Cleanup (pull_request) Blocked by required conditions
CI/CD Pipeline / Canary Release to Production (pull_request) Blocked by required conditions
AI Code Review / AI Code Review (pull_request) Has been cancelled
Preview Deploy / Deploy Preview Environment (pull_request) Has been cancelled
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 46m14s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m22s
2248e9e377
xiaoxia added 1 commit 2026-07-27 15:29:22 +08:00
fix: 更新工具函数导入路径为 detailUtils
CI/CD Pipeline / CI Gate (pull_request) CI运行中 [frontend-only]
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 19s
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m33s
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m34s
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 / Frontend Lint (pull_request) Successful in 1m7s
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 30s
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 3m7s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m53s
AI Code Review / AI Code Review (pull_request) Successful in 1m38s
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 3m29s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m43s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 47m22s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m5s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
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 / Frontend Unit Tests (pull_request) Failing after 16s
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 22s
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
a16ba5f93e
auto-approve-bot approved these changes 2026-07-27 17:07:40 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。
auto-approve-bot approved these changes 2026-07-27 17:07:40 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。
Collaborator

代码审查结果 - PR #963

⚠️ 问题(2个需要修改)

  1. apps/web/src/pages/products/ProductDetail.tsx 第46行路由参数缺失时的空指针崩溃风险

    • 问题描述:当路由参数 id 缺失时(如用户手动访问 /app/products/),useQueryenabled: !!id 被禁用,导致 isLoadingisError 均为 false。代码会跳过加载和错误状态的判断,直接渲染 DetailVideoPlayerProductInfoPanel。此时 productundefined,在 ProductInfoPanel 中访问 product.status 会导致运行时崩溃。
    • 修改建议:在渲染组件前增加对 product 存在性的检查,或者在 useProductDetail hook 中明确处理 id 缺失的逻辑(例如抛出错误或设置特定的 isError 状态)。
  2. apps/web/src/pages/products/hooks/useProductDetail.ts 第82行分享功能静默失败,缺乏用户反馈

    • 问题描述handleShare 函数中 navigator.clipboard.writeText 的 Promise 回调(.then(() => {}, () => {}))均为空函数。如果剪贴板写入失败(如非 HTTPS 环境或权限被拒),用户将无法感知操作是否成功。
    • 修改建议:应在 then 的 rejection 回调中处理错误,并通过 UI(如 Toast 提示)告知用户复制失败。

💡 建议(3个可选)

  1. apps/web/src/pages/products/hooks/useProductDetail.ts 第73行下载函数存在 DOM 节点泄漏

    • 具体内容handleDownload 中创建的 <a> 标签在触发点击后未被移除。虽然浏览器通常能处理这种情况,但频繁操作会留下冗余的 DOM 节点。建议在 a.click() 后执行 a.remove()
  2. apps/web/src/pages/products/detailUtils.ts 第19行日期格式化函数对非法值处理不够优雅

    • 具体内容formatDate 函数在接收到无效日期字符串时,new Date(dateStr) 会生成 "Invalid Date" 对对象,toLocaleDateString 会返回字符串 "Invalid Date"。建议增加 isNaN(d.getTime()) 检查,遇到非法日期时返回 "-"。
  3. apps/web/src/pages/products/ProductDetail.tsx 第1行源文件权限变更异常

    • 具体内容:Diff 显示文件权限从 100644 变更为 100755(添加了可执行权限)。前端源码文件通常不需要可执行权限,建议在 Git 中恢复为普通文件权限。

格式检查通过 | 逻辑审查需修改 | 建议关注性能


🤖 由 AI 代码审查机器人自动生成 | 2026-07-27 09:09:09 | 模型:

## 代码审查结果 - PR #963 ### ⚠️ 问题(2个需要修改) 1. **apps/web/src/pages/products/ProductDetail.tsx 第46行**:**路由参数缺失时的空指针崩溃风险** - **问题描述**:当路由参数 `id` 缺失时(如用户手动访问 `/app/products/`),`useQuery` 因 `enabled: !!id` 被禁用,导致 `isLoading` 和 `isError` 均为 `false`。代码会跳过加载和错误状态的判断,直接渲染 `DetailVideoPlayer` 和 `ProductInfoPanel`。此时 `product` 为 `undefined`,在 `ProductInfoPanel` 中访问 `product.status` 会导致运行时崩溃。 - **修改建议**:在渲染组件前增加对 `product` 存在性的检查,或者在 `useProductDetail` hook 中明确处理 id 缺失的逻辑(例如抛出错误或设置特定的 isError 状态)。 2. **apps/web/src/pages/products/hooks/useProductDetail.ts 第82行**:**分享功能静默失败,缺乏用户反馈** - **问题描述**:`handleShare` 函数中 `navigator.clipboard.writeText` 的 Promise 回调(`.then(() => {}, () => {})`)均为空函数。如果剪贴板写入失败(如非 HTTPS 环境或权限被拒),用户将无法感知操作是否成功。 - **修改建议**:应在 `then` 的 rejection 回调中处理错误,并通过 UI(如 Toast 提示)告知用户复制失败。 ### 💡 建议(3个可选) 1. **apps/web/src/pages/products/hooks/useProductDetail.ts 第73行**:**下载函数存在 DOM 节点泄漏** - **具体内容**:`handleDownload` 中创建的 `<a>` 标签在触发点击后未被移除。虽然浏览器通常能处理这种情况,但频繁操作会留下冗余的 DOM 节点。建议在 `a.click()` 后执行 `a.remove()`。 2. **apps/web/src/pages/products/detailUtils.ts 第19行**:**日期格式化函数对非法值处理不够优雅** - **具体内容**:`formatDate` 函数在接收到无效日期字符串时,`new Date(dateStr)` 会生成 "Invalid Date" 对对象,`toLocaleDateString` 会返回字符串 "Invalid Date"。建议增加 `isNaN(d.getTime())` 检查,遇到非法日期时返回 "-"。 3. **apps/web/src/pages/products/ProductDetail.tsx 第1行**:**源文件权限变更异常** - **具体内容**:Diff 显示文件权限从 `100644` 变更为 `100755`(添加了可执行权限)。前端源码文件通常不需要可执行权限,建议在 Git 中恢复为普通文件权限。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 建议关注性能 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-07-27 09:09:09 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #963 | | 预览链接 | [https://pr-963.preview.xiaoxiajianji.com](https://pr-963.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据,请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后,预览环境会自动清理。
xiaoxia closed this pull request 2026-07-27 17:29:13 +08:00

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #963 已关闭或合并,对应的预览环境已被清理。 > 如有需要,可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / CI Gate (pull_request) CI运行中 [frontend-only]
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 19s
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m33s
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m34s
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 / Frontend Lint (pull_request) Successful in 1m7s
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 30s
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 3m7s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m53s
AI Code Review / AI Code Review (pull_request) Successful in 1m38s
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 3m29s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m43s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 47m22s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m5s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
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 / Frontend Unit Tests (pull_request) Failing after 16s
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 22s
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped

Pull request closed

Sign in to join this conversation.