xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 14 Pull Requests 2 Actions Packages Projects Releases 7 Wiki Activity

refactor(voice-materials): 拆分 VoiceMaterialCard 为子组件（245→72行, -71%） #1054

Closed
xiaoxia wants to merge 2 commits from refactor/voice-material-card into develop
pull from: refactor/voice-material-card
merge into: xiaoxia:develop
Conversation 4 Commits 2 Files Changed 10
+349 -208
xiaoxia commented 2026-07-28 10:06:50 +08:00
Owner
Copy Link
Copy Source
No description provided.
xiaoxia added 1 commit 2026-07-28 10:06:50 +08:00
refactor(voice-materials): 拆分 VoiceMaterialCard 为子组件
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m55s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 2m12s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m24s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m13s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 2m15s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m27s
Details
AI Code Review / AI Code Review (pull_request) Successful in 2m48s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m29s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 8m0s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Has been cancelled
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Has been cancelled
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been cancelled
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been cancelled
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / CI Gate (pull_request) Has been cancelled
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 6m49s
Details
9c2f7b1ae5 
三阶段重构：
- Phase 1: 提取类型到 voice-material-card/types.ts
- Phase 2: 拆分为 6 个 UI 子组件
  - CardHeader: 卡片头部
  - CardTags: 标签展示区
  - CardMeta: 元信息（时长/大小/日期）
  - CardPlayer: 播放控制区（含拖拽seek）
  - CardActions: 操作按钮（编辑/删除）
  - BatchCheckbox: 批量选择
- Phase 3: 主文件 245→72 行（-71%）

保持导入路径向后兼容
gitea-actions bot commented 2026-07-28 10:13:26 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1054 | | 预览链接 | [https://pr-1054.preview.xiaoxiajianji.com](https://pr-1054.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
xiaoxia added 1 commit 2026-07-28 10:18:26 +08:00
fix(voice-material-card): fix prettier formatting
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 44s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m18s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m5s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m14s
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 46s
Details
PR Automation / Auto Approve on CI Green (pull_request) Failing after 1m23s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m23s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 2m24s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m7s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 25s
Details
AI Code Review / AI Code Review (pull_request) Successful in 2m58s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 7m17s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 41s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 47m0s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 5s
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
c72677dd93
xiaoxia closed this pull request 2026-07-28 10:19:24 +08:00
auto-approve-bot reviewed 2026-07-28 10:37:10 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-07-28 10:38:31 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1054 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
auto-approve-bot commented 2026-07-28 10:38:50 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

  • 是否存在阻塞级问题：否
  • 阻塞级问题数量：0 个

📊 审查概览

  • 整体评价：通过
  • 建议级问题数量：2 个

🔴 阻塞级问题（必须修复）

无

💡 改进建议（不阻塞合并）

  1. [所有新增文件] 文件权限设置

    • 具体内容：Diff 显示所有新增文件的模式从 100644 变更为 100755（添加了可执行权限）。通常前端源码文件（.tsx, .ts）不需要可执行权限。这通常是由于开发环境的 git 配置（如 core.fileMode）或误操作导致的。建议将文件权限还原为 100644，以保持仓库整洁。

  2. [voice-material-card/CardPlayer.tsx] 进度条交互状态一致性

    • 具体内容：在 CardPlayer 组件中，播放按钮在 !fileUrl 时被禁用（disabled={!fileUrl}），但进度条（vmat-progress）仍然可以响应 onMouseDown 事件进行拖拽。这会导致在音频文件未加载时，用户仍可以通过拖拽进度条触发 onSeek 回调。建议在 !fileUrl 时，同样禁用进度条的鼠标交互（例如添加 CSS pointer-events: none 或在 handleProgressMouseDown 开头增加 if (!fileUrl) return 判断），以保持交互逻辑的一致性。

✅ 良好实践

  • 组件拆分合理：将 VoiceMaterialCard 拆分为 BatchCheckbox、CardActions、CardHeader、CardTags、CardMeta、CardPlayer 等子组件，职责单一，提高了代码的可维护性和可读性。
  • 事件处理规范：在子组件（如 BatchCheckbox、CardPlayer）的交互事件中正确使用了 e.stopPropagation()，防止事件冒泡触发父组件的卡片点击事件，逻辑处理正确。
  • 空值保护：在 CardTags 中使用了 tagMap.get(tagId)?.name ?? tagId 进行了安全的空值回退处理；在 CardPlayer 中计算进度时对 duration 进行了大于 0 的判断，避免了除以零的错误。
  • 类型导出保持：在 VoiceMaterialCard.tsx 中重新导出了 VoiceCardProps 类型，保持了模块对外 API 的向后兼容性，这是一个很好的重构实践。

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

🤖 由 AI 代码审查机器人自动生成 | 2026-07-28 02:38:50 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[所有新增文件] 文件权限设置** - 具体内容：Diff 显示所有新增文件的模式从 `100644` 变更为 `100755`（添加了可执行权限）。通常前端源码文件（.tsx, .ts）不需要可执行权限。这通常是由于开发环境的 `git` 配置（如 `core.fileMode`）或误操作导致的。建议将文件权限还原为 `100644`，以保持仓库整洁。 2. **[voice-material-card/CardPlayer.tsx] 进度条交互状态一致性** - 具体内容：在 `CardPlayer` 组件中，播放按钮在 `!fileUrl` 时被禁用（`disabled={!fileUrl}`），但进度条（`vmat-progress`）仍然可以响应 `onMouseDown` 事件进行拖拽。这会导致在音频文件未加载时，用户仍可以通过拖拽进度条触发 `onSeek` 回调。建议在 `!fileUrl` 时，同样禁用进度条的鼠标交互（例如添加 CSS `pointer-events: none` 或在 `handleProgressMouseDown` 开头增加 `if (!fileUrl) return` 判断），以保持交互逻辑的一致性。 ### ✅ 良好实践 - **组件拆分合理**：将 `VoiceMaterialCard` 拆分为 `BatchCheckbox`、`CardActions`、`CardHeader`、`CardTags`、`CardMeta`、`CardPlayer` 等子组件，职责单一，提高了代码的可维护性和可读性。 - **事件处理规范**：在子组件（如 `BatchCheckbox`、`CardPlayer`）的交互事件中正确使用了 `e.stopPropagation()`，防止事件冒泡触发父组件的卡片点击事件，逻辑处理正确。 - **空值保护**：在 `CardTags` 中使用了 `tagMap.get(tagId)?.name ?? tagId` 进行了安全的空值回退处理；在 `CardPlayer` 中计算进度时对 `duration` 进行了大于 0 的判断，避免了除以零的错误。 - **类型导出保持**：在 `VoiceMaterialCard.tsx` 中重新导出了 `VoiceCardProps` 类型，保持了模块对外 API 的向后兼容性，这是一个很好的重构实践。 --- ✅ 格式检查通过 | ✅ 逻辑审查需修改 | ✅ 建议关注性能 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-07-28 02:38:50 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
Some checks are pending
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 44s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m18s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m5s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m14s
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 46s
Details
PR Automation / Auto Approve on CI Green (pull_request) Failing after 1m23s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m23s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 2m24s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m7s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 25s
Details
AI Code Review / AI Code Review (pull_request) Successful in 2m58s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 7m17s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 41s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 47m0s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 5s
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1054
Delete Branch "refactor/voice-material-card"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?