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

refactor(editing-planner): 拆分 BgmSelector 组件，抽离 Hook + 子组件 #1009

Closed
xiaoxia wants to merge 4 commits from refactor/bgm-selector-split into develop
pull from: refactor/bgm-selector-split
merge into: xiaoxia:develop
Conversation 5 Commits 4 Files Changed 5
+368 -271
xiaoxia commented 2026-07-27 07:33:56 +08:00
Owner
Copy Link
Copy Source

变更说明

拆分 BgmSelector 组件（273 行），按职责拆分为目录结构：

  • useBgmSelector - 列表加载、搜索、分类、试听播放逻辑
  • BgmItem - 单个 BGM 列表项组件
  • BgmMixConfig - 混音配置面板
  • index - 组合入口 + Drawer 布局

主文件 273 → 120 行（-56%）

导入路径保持不变，向后兼容。

## 变更说明 拆分 BgmSelector 组件（273 行），按职责拆分为目录结构： - **useBgmSelector** - 列表加载、搜索、分类、试听播放逻辑 - **BgmItem** - 单个 BGM 列表项组件 - **BgmMixConfig** - 混音配置面板 - **index** - 组合入口 + Drawer 布局 主文件 273 → 120 行（-56%） 导入路径保持不变，向后兼容。
xiaoxia added 1 commit 2026-07-27 07:33:56 +08:00
refactor(editing-planner): 拆分 BgmSelector 组件，抽离 Hook + 子组件
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 26s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m8s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 1m53s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 38s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 16s
Details
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 1m3s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m3s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m15s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 42s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m25s
Details
AI Code Review / AI Code Review (pull_request) Successful in 2m10s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 6m53s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Failing after 37s
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 / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
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
192947b884 
主文件 273→120 行（-56%），拆分为：
- useBgmSelector: 列表加载、搜索、分类、试听逻辑
- BgmItem: 单个 BGM 列表项
- BgmMixConfig: 混音配置面板
- index: 组合入口 + Drawer 布局

导入路径保持向后兼容
xiaoxia added 1 commit 2026-07-27 12:34:27 +08:00
Merge branch 'develop' into refactor/bgm-selector-split
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 / Validate - Type Check (mypy) (pull_request) Has been cancelled
Details
CI/CD Pipeline / Validate - Migration (alembic) (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 Lint (pull_request) Has been cancelled
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (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 / Build Production API Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Build Production Worker Image (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
AI Code Review / AI Code Review (pull_request) Has been cancelled
Details
Preview Deploy / Deploy Preview Environment (pull_request) Has been cancelled
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 41s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 48s
Details
e4fa8492a5
xiaoxia added 1 commit 2026-07-27 12:40:33 +08:00
fix(bgm-selector): 恢复主入口文件，re-export 子目录保持路径兼容
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 8s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 1m36s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 59s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m7s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 45s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 24s
Details
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 / PR Build API Image (pull_request) Successful in 2m6s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 36s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 38s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 24s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 3m11s
Details
AI Code Review / AI Code Review (pull_request) Successful in 3m26s
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 / Deploy Staging (Watchtower auto-deploy) (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 / Build Production API Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Build Production Worker Image (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
7f3ca7c029
xiaoxia added 1 commit 2026-07-27 15:25:18 +08:00
fix: 重命名BgmMixConfig类型避免与组件名冲突
CI/CD Pipeline / CI Gate (pull_request) CI运行中 [frontend-only]
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 13s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 59s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m25s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m30s
Details
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 / PR Build Worker Image (pull_request) Successful in 23s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m2s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 3m8s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m4s
Details
AI Code Review / AI Code Review (pull_request) Successful in 2m5s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m11s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 6m46s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 7m47s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
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 / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Failing after 15s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 13s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
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
994e14585c
auto-approve-bot approved these changes 2026-07-27 16:54:10 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-07-27 16:54:10 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot commented 2026-07-27 16:55:12 +08:00
Collaborator
Copy Link
Copy Source

代码审查结果 - PR #1009

⚠️ 问题（3个需要修改）

  1. useBgmSelector.ts 第58行：useEffect 依赖 loadPresets 导致搜索时频繁触发 API 请求。

    • 问题描述：loadPresets 的依赖数组包含 activeCategory 和 keyword，而 useEffect 又依赖 loadPresets。这意味着每当 keyword 状态改变（用户输入字符时），loadPresets 引用变化，进而触发 useEffect 执行 API 请求。这会导致搜索框输入时每个字符都发起一次请求，且 index.tsx 中的 Search 组件配置了 onSearch，造成了逻辑冲突和性能浪费。
    • 后果：前端抖动，服务器压力增大，用户体验差。
    • 修改建议：调整依赖逻辑。useEffect 应仅在 open 变化时触发；分类切换和搜索提交时手动调用 loadPresets，或者将 keyword 从 loadPresets 的依赖中移除，改为通过参数传递。

  2. useBgmSelector.ts 第46行：API 请求失败时未清空旧数据，导致 UI 展示错误。

    • 问题描述：在 loadPresets 的 catch 块中仅提示了错误信息，未调用 setPresets([])。如果用户在有数据的情况下切换分类导致请求失败，列表仍会显示上一个分类的数据。
    • 后果：UI 状态与实际数据不符，误导用户。
    • 修改建议：在 catch 块中添加 setPresets([])。

  3. useBgmSelector.ts 第68行：音频资源未彻底释放，存在内存泄漏风险。

    • 问题描述：在 handlePreview 中创建新的 Audio 对象前，仅调用了 audioRef.current?.pause() 并覆盖了引用。旧的 Audio 对象可能仍在进行网络请求（缓冲），且未被销毁。
    • 后果：频繁切换试听可能导致后台占用过多带宽或内存。
    • 修改建议：在创建新 Audio 前，执行 if (audioRef.current) { audioRef.current.pause(); audioRef.current.src = ''; audioRef.current.load(); } 或将旧对象置空。

💡 建议（1个可选）

  1. BgmItem.tsx 第14行：formatDuration 函数定义在组件内部，每次渲染都会重新创建函数。
    • 修改建议：将 formatDuration 提取到组件外部作为纯函数工具，或使用 useCallback 包裹（提取到外部最佳）。

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

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

## 代码审查结果 - PR #1009 ### ⚠️ 问题（3个需要修改） 1. **useBgmSelector.ts 第58行**：`useEffect` 依赖 `loadPresets` 导致搜索时频繁触发 API 请求。 - 问题描述：`loadPresets` 的依赖数组包含 `activeCategory` 和 `keyword`，而 `useEffect` 又依赖 `loadPresets`。这意味着每当 `keyword` 状态改变（用户输入字符时），`loadPresets` 引用变化，进而触发 `useEffect` 执行 API 请求。这会导致搜索框输入时每个字符都发起一次请求，且 `index.tsx` 中的 `Search` 组件配置了 `onSearch`，造成了逻辑冲突和性能浪费。 - 后果：前端抖动，服务器压力增大，用户体验差。 - 修改建议：调整依赖逻辑。`useEffect` 应仅在 `open` 变化时触发；分类切换和搜索提交时手动调用 `loadPresets`，或者将 `keyword` 从 `loadPresets` 的依赖中移除，改为通过参数传递。 2. **useBgmSelector.ts 第46行**：API 请求失败时未清空旧数据，导致 UI 展示错误。 - 问题描述：在 `loadPresets` 的 `catch` 块中仅提示了错误信息，未调用 `setPresets([])`。如果用户在有数据的情况下切换分类导致请求失败，列表仍会显示上一个分类的数据。 - 后果：UI 状态与实际数据不符，误导用户。 - 修改建议：在 `catch` 块中添加 `setPresets([])`。 3. **useBgmSelector.ts 第68行**：音频资源未彻底释放，存在内存泄漏风险。 - 问题描述：在 `handlePreview` 中创建新的 `Audio` 对象前，仅调用了 `audioRef.current?.pause()` 并覆盖了引用。旧的 Audio 对象可能仍在进行网络请求（缓冲），且未被销毁。 - 后果：频繁切换试听可能导致后台占用过多带宽或内存。 - 修改建议：在创建新 Audio 前，执行 `if (audioRef.current) { audioRef.current.pause(); audioRef.current.src = ''; audioRef.current.load(); }` 或将旧对象置空。 ### 💡 建议（1个可选） 1. **BgmItem.tsx 第14行**：`formatDuration` 函数定义在组件内部，每次渲染都会重新创建函数。 - 修改建议：将 `formatDuration` 提取到组件外部作为纯函数工具，或使用 `useCallback` 包裹（提取到外部最佳）。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-07-27 08:55:12 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
gitea-actions bot commented 2026-07-27 16:55:28 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1009 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / CI Gate (pull_request) CI运行中 [frontend-only]
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 13s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 59s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m25s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m30s
Details
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 / PR Build Worker Image (pull_request) Successful in 23s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m2s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 3m8s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m4s
Details
AI Code Review / AI Code Review (pull_request) Successful in 2m5s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m11s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 6m46s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 7m47s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
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 / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Failing after 15s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 13s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
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

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No Reviewers
auto-approve-bot
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#1009
Delete Branch "refactor/bgm-selector-split"

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?