refactor: VoiceMaterialLibrary Phase 2 - 抽离4个子组件 #858

Merged

xiaoxia merged 8 commits from refactor/voice-material-library-phase2 into develop 2026-07-25 08:13:23 +08:00

Conversation 4 Commits 8 Files Changed 7

+882 -749

xiaoxia commented 2026-07-25 00:09:14 +08:00

Owner

Copy Link

Copy Source

VoiceMaterialLibrary Phase 2 重构

基于Phase 1，继续抽离4个内联子组件到独立文件。

抽离的组件

组件	行数	位置
TagSelector	163行	components/TagSelector.tsx
MaterialForm	190行	components/MaterialForm.tsx
VoiceMaterialCard	244行	components/VoiceMaterialCard.tsx
VoiceMaterialRow	185行	components/VoiceMaterialRow.tsx

效果

• 主文件 VoiceMaterialLibrary.tsx：1852 → 1117 行（-735行，-39.7%）
• 4个组件各自职责清晰，便于后续单独优化和测试
• 播放状态、选中状态等均提升到主组件管理，子组件纯展示

依赖

• 依赖 #846 (Phase 1)，请先合Phase 1

## VoiceMaterialLibrary Phase 2 重构 基于Phase 1，继续抽离4个内联子组件到独立文件。 ### 抽离的组件 | 组件 | 行数 | 位置 | |------|------|------| | TagSelector | 163行 | components/TagSelector.tsx | | MaterialForm | 190行 | components/MaterialForm.tsx | | VoiceMaterialCard | 244行 | components/VoiceMaterialCard.tsx | | VoiceMaterialRow | 185行 | components/VoiceMaterialRow.tsx | ### 效果 - 主文件 VoiceMaterialLibrary.tsx：1852 → 1117 行（-735行，-39.7%） - 4个组件各自职责清晰，便于后续单独优化和测试 - 播放状态、选中状态等均提升到主组件管理，子组件纯展示 ### 依赖 - 依赖 #846 (Phase 1)，请先合Phase 1

auto-approve-bot approved these changes 2026-07-25 01:43:34 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-07-25 01:43:34 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia added 4 commits 2026-07-25 03:09:18 +08:00

refactor: VoiceMaterialLibrary Phase 2 - 抽离4个子组件到components/ ... 754c3c3f7d

- TagSelector: 标签选择器（163行）
- MaterialForm: 上传/编辑表单（190行）
- VoiceMaterialCard: 卡片视图组件（244行）
- VoiceMaterialRow: 列表行组件（185行）

主文件从1852→1117行（-39.7%）

fix: remove unused imports from VoiceMaterialLibrary 4bc287dab1

fix: 修复Tag组件导入路径错误（从antd改为@/components/ui） e194f29f44

fix: prettier formatting for MaterialForm.tsx 4b2bbc7d58

xiaoxia force-pushed refactor/voice-material-library-phase2 from e2032eeb98 to 4b2bbc7d58 2026-07-25 03:09:18 +08:00 Compare

xiaoxia referenced this pull request 2026-07-25 03:29:08 +08:00

refactor(voice-materials): phase 3 extract hooks #866

xiaoxia added 1 commit 2026-07-25 04:14:15 +08:00

test: 添加 TagSelector 组件单测，建立 voice-materials 目录依赖链 19c6e20f08

xiaoxia added 1 commit 2026-07-25 04:19:22 +08:00

style: 修复 TagSelector.test.tsx 的 Prettier 格式问题 fc8c612311

xiaoxia added 1 commit 2026-07-25 04:24:01 +08:00

test: 修复 TagSelector 测试中 getByText 多元素匹配问题 599b4a58ca

xiaoxia added 1 commit 2026-07-25 04:27:46 +08:00

test: add voice-materials smoke test for vitest related mode eaa6d5fb5c

auto-approve-bot commented 2026-07-25 04:32:45 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #858

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

1. VoiceMaterialCard.tsx / VoiceMaterialRow.tsx (原VoiceMaterialLibrary.tsx 第135-150行)：事件监听器内存泄漏风险，handleProgressMouseDown 函数在 document 上绑定了 mousemove 和 mouseup 事件，但仅在 mouseup 触发时移除。若用户在拖拽进度条时组件卸载（如快速切换页面），监听器将无法移除，导致内存泄漏和潜在的运行时错误。
2. MaterialForm.tsx (原VoiceMaterialLibrary.tsx 第282行)：空值处理逻辑错误，onCreateTag 的默认回退函数 async () => ({ id: "", name: "" }) 会返回一个空 ID 的对象。当父组件未传入 onCreateTag 时，用户尝试创建标签会成功添加一个 ID 为空字符串的无效标签，导致 UI 显示异常或数据污染。

💡 建议（1个可选）

1. TagSelector.tsx (原VoiceMaterialLibrary.tsx 第88行)：错误反馈缺失，addTagByName 函数中 catch 块为空，静默忽略创建失败。建议增加 message.error 提示用户标签创建失败，提升用户体验。

---

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

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-07-24 20:32:45 | 模型:}

## 代码审查结果 - PR #858 ### ⚠️ 问题（2个需要修改） 1. **VoiceMaterialCard.tsx / VoiceMaterialRow.tsx (原VoiceMaterialLibrary.tsx 第135-150行)**：事件监听器内存泄漏风险，`handleProgressMouseDown` 函数在 `document` 上绑定了 `mousemove` 和 `mouseup` 事件，但仅在 `mouseup` 触发时移除。若用户在拖拽进度条时组件卸载（如快速切换页面），监听器将无法移除，导致内存泄漏和潜在的运行时错误。 2. **MaterialForm.tsx (原VoiceMaterialLibrary.tsx 第282行)**：空值处理逻辑错误，`onCreateTag` 的默认回退函数 `async () => ({ id: "", name: "" })` 会返回一个空 ID 的对象。当父组件未传入 `onCreateTag` 时，用户尝试创建标签会成功添加一个 ID 为空字符串的无效标签，导致 UI 显示异常或数据污染。 ### 💡 建议（1个可选） 1. **TagSelector.tsx (原VoiceMaterialLibrary.tsx 第88行)**：错误反馈缺失，`addTagByName` 函数中 catch 块为空，静默忽略创建失败。建议增加 `message.error` 提示用户标签创建失败，提升用户体验。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-24 20:32:45 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia merged commit b82b303d6a into develop 2026-07-25 08:13:23 +08:00

xiaoxia deleted branch refactor/voice-material-library-phase2 2026-07-25 08:13:24 +08:00

gitea-actions bot commented 2026-07-25 08:16:47 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #858 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#858