refactor: GeneratePage Phase 3 - Step内部子组件拆分 #816

Merged

xiaoxia merged 2 commits from refactor/generate-page-phase3 into develop 2026-07-24 20:18:32 +08:00

Conversation 4 Commits 2 Files Changed 22

+1497 -968

xiaoxia commented 2026-07-24 11:09:16 +08:00

Owner

Copy Link

Copy Source

GeneratePage 巨无霸拆分 Phase 3

在 Phase 2 的基础上，对 3 个较大的 Step 组件继续拆分子组件，保持功能完全不变，纯结构优化。

新增文件（16个）

voice/ 目录 (6个)

• VoiceRecommendSection.tsx - AI智能推荐配音区域
• VoiceChoiceCard.tsx - 音色选择卡片（预设+克隆共用）
• PresetVoiceDetail.tsx - 预设音色下拉+试听
• CustomVoicePanel.tsx - 自定义录制面板
• SaveVoiceModal.tsx - 保存到配音库弹窗
• CloneVoiceSection.tsx - 克隆声音展开区域

material/ 目录 (5个)

• MaterialModeTabs.tsx - 模式切换Tab
• ManualMaterialList.tsx - 手动选择素材列表
• SmartMatchInput.tsx - 智能匹配输入区
• SmartMatchResults.tsx - 智能匹配结果区
• SmartMatchCard.tsx - 单个匹配卡片

title/ 目录 (4个)

• AiTitleGenerator.tsx - AI智能生成标题
• AiTitleCard.tsx - 单个AI标题卡片
• TitleStylePanel.tsx - 标题样式设置区
• TitlePresetsGrid.tsx - 预设样式网格

utils/ 目录 (1个)

• formatDuration.ts - 秒数转分秒格式工具函数

精简效果

组件	拆分前	拆分后	精简率
Step5VoiceSelect	529 行	137 行	74% ↓
Step2MaterialSelect	310 行	95 行	69% ↓
Step4TitleSettings	298 行	108 行	64% ↓

验证

• ✅ ESLint 全绿
• ✅ TypeScript 全绿
• ✅ Prettier 已格式化
• ✅ Hook 核心逻辑未改动

## GeneratePage 巨无霸拆分 Phase 3 在 Phase 2 的基础上，对 3 个较大的 Step 组件继续拆分子组件，保持功能完全不变，纯结构优化。 ## 新增文件（16个） ### voice/ 目录 (6个) - VoiceRecommendSection.tsx - AI智能推荐配音区域 - VoiceChoiceCard.tsx - 音色选择卡片（预设+克隆共用） - PresetVoiceDetail.tsx - 预设音色下拉+试听 - CustomVoicePanel.tsx - 自定义录制面板 - SaveVoiceModal.tsx - 保存到配音库弹窗 - CloneVoiceSection.tsx - 克隆声音展开区域 ### material/ 目录 (5个) - MaterialModeTabs.tsx - 模式切换Tab - ManualMaterialList.tsx - 手动选择素材列表 - SmartMatchInput.tsx - 智能匹配输入区 - SmartMatchResults.tsx - 智能匹配结果区 - SmartMatchCard.tsx - 单个匹配卡片 ### title/ 目录 (4个) - AiTitleGenerator.tsx - AI智能生成标题 - AiTitleCard.tsx - 单个AI标题卡片 - TitleStylePanel.tsx - 标题样式设置区 - TitlePresetsGrid.tsx - 预设样式网格 ### utils/ 目录 (1个) - formatDuration.ts - 秒数转分秒格式工具函数 ## 精简效果 | 组件 | 拆分前 | 拆分后 | 精简率 | |------|--------|--------|--------| | Step5VoiceSelect | 529 行 | 137 行 | 74% ↓ | | Step2MaterialSelect | 310 行 | 95 行 | 69% ↓ | | Step4TitleSettings | 298 行 | 108 行 | 64% ↓ | ## 验证 - ✅ ESLint 全绿 - ✅ TypeScript 全绿 - ✅ Prettier 已格式化 - ✅ Hook 核心逻辑未改动

xiaoxia added 1 commit 2026-07-24 18:05:54 +08:00

refactor: GeneratePage Phase 3 - split Step sub-components 92bae4ce1c

xiaoxia force-pushed refactor/generate-page-phase3 from 9327bd9512 to 92bae4ce1c 2026-07-24 18:05:54 +08:00 Compare

auto-approve-bot approved these changes 2026-07-24 18:10:12 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-07-24 18:10:12 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia added 1 commit 2026-07-24 19:00:15 +08:00

test: add generate module smoke test for vitest related coverage 45e954d1a8

auto-approve-bot commented 2026-07-24 19:09:58 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #816

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

💡 建议（1个可选）

1. 变量命名可读性：在 Step2MaterialSelect.tsx 和 Step4TitleSettings.tsx 中，Hook 的返回值分别被简写为 m 和 t。虽然逻辑上没有问题，但在包含较多业务逻辑的组件中，建议使用更具语义化的命名（如 materialState、titleState），以便于后续维护和理解。

---

✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好

---

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

## 代码审查结果 - PR #816 ### ⚠️ 问题（0个需要修改） ### 💡 建议（1个可选） 1. **变量命名可读性**：在 `Step2MaterialSelect.tsx` 和 `Step4TitleSettings.tsx` 中，Hook 的返回值分别被简写为 `m` 和 `t`。虽然逻辑上没有问题，但在包含较多业务逻辑的组件中，建议使用更具语义化的命名（如 `materialState`、`titleState`），以便于后续维护和理解。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-24 11:09:58 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia merged commit cf544881fd into develop 2026-07-24 20:18:32 +08:00

xiaoxia deleted branch refactor/generate-page-phase3 2026-07-24 20:18:32 +08:00

gitea-actions bot commented 2026-07-24 20:19:05 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #816 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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#816