refactor(editing-planner): 拆分 SubtitleStylePanel 为子组件（190→146行, -23%） #1139

Merged

auto-approve-bot merged 3 commits from refactor/subtitle-style-panel into develop 2026-07-29 17:30:42 +08:00

Conversation 4 Commits 3 Files Changed 6

+102 -59

xiaoxia commented 2026-07-29 17:09:29 +08:00

Owner

Copy Link

Copy Source

拆分说明

按三阶段模式拆分 SubtitleStylePanel 组件：

拆分内容

• SubtitlePreview - 字幕预览组件 (37行)
• SubtitleModeSwitch - 字幕模式切换 (25行)
• SubtitlePositionSelector - 字幕位置选择器 (27行)
• SubtitleEffectButtons - 字幕效果按钮组 (32行)

瘦身效果

• 主文件: 190 → 146 行 (-23%)

向后兼容

• 原组件路径 SubtitleStylePanel 保持不变
• 新增 subtitle-style/ 子目录存放子组件
• 无破坏性改动

## 拆分说明 按三阶段模式拆分 SubtitleStylePanel 组件： ### 拆分内容 - **SubtitlePreview** - 字幕预览组件 (37行) - **SubtitleModeSwitch** - 字幕模式切换 (25行) - **SubtitlePositionSelector** - 字幕位置选择器 (27行) - **SubtitleEffectButtons** - 字幕效果按钮组 (32行) ### 瘦身效果 - 主文件: 190 → 146 行 **(-23%)** ### 向后兼容 - 原组件路径 `SubtitleStylePanel` 保持不变 - 新增 `subtitle-style/` 子目录存放子组件 - 无破坏性改动

xiaoxia added 1 commit 2026-07-29 17:09:29 +08:00

refactor: extract SubtitleModeSwitch/PositionSelector/EffectButtons from SubtitleStylePanel ... cc554b25fd

Extract button group components from the subtitle style panel.
Main file reduces from 190 to 149 lines (-22%).

- SubtitleModeSwitch: manual/ASR mode toggle
- SubtitlePositionSelector: 9-position button grid
- SubtitleEffectButtons: stroke/shadow toggles

xiaoxia added 1 commit 2026-07-29 17:14:28 +08:00

fix: 修复 useVoiceMaterialActions types 路径错误 b7fcb4835c

gitea-actions bot commented 2026-07-29 17:17:46 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1139 | | 预览链接 | [https://pr-1139.preview.xiaoxiajianji.com](https://pr-1139.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

xiaoxia added 1 commit 2026-07-29 17:23:46 +08:00

test: 补充subtitle-style子组件smoke测试引用 e3ee13b46b

auto-approve-bot commented 2026-07-29 17:28:43 +08:00

Collaborator

Copy Link

Copy Source

Auto merge skipped after multiple 405 errors: PR may have conflicts or unresolved checks. Please review manually. This is not a CI failure.

Auto merge skipped after multiple 405 errors: PR may have conflicts or unresolved checks. Please review manually. This is not a CI failure.

auto-approve-bot commented 2026-07-29 17:29:21 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1139

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

无

💡 建议（1个可选）

1. 新增组件文件 (SubtitleModeSwitch, SubtitlePositionSelector, SubtitleEffectButtons)：建议为所有 <button> 元素显式添加 type="button" 属性。虽然当前组件在 Drawer 中使用不太可能触发表单提交，但作为通用组件，若未来被置于 <form> 标签内，默认的 type="submit" 可能会导致意外的页面刷新或提交行为。

---

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

【阻塞级判定】

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

📊 审查概览

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

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

无

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

1. [新增组件文件] 按钮类型属性缺失
   • 具体内容：在 SubtitleModeSwitch.tsx、SubtitlePositionSelector.tsx 和 SubtitleEffectButtons.tsx 中，所有的 <button> 标签建议显式添加 type="button"。这是防御性编程的最佳实践，防止组件在表单上下文中被误用导致默认提交行为。

✅ 良好实践

• 组件拆分合理：将 SubtitleStylePanel 中的复杂 UI 逻辑拆分为独立的子组件（SubtitleModeSwitch、SubtitlePositionSelector、SubtitleEffectButtons），提高了代码的可维护性和复用性。
• Props 类型定义清晰：新增组件均定义了明确的 TypeScript 接口，类型安全。
• 逻辑保持一致：重构后的代码逻辑与原代码完全等价，未引入功能变更。
• Import 路径修复：useVoiceMaterialActions.ts 中修复了相对路径引用错误（从 ../../../types 修正为 ../../types），确保模块引用正确。

---

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

## 代码审查结果 - PR #1139 ### ⚠️ 问题（0个需要修改） 无 ### 💡 建议（1个可选） 1. **新增组件文件 (SubtitleModeSwitch, SubtitlePositionSelector, SubtitleEffectButtons)**：建议为所有 `<button>` 元素显式添加 `type="button"` 属性。虽然当前组件在 `Drawer` 中使用不太可能触发表单提交，但作为通用组件，若未来被置于 `<form>` 标签内，默认的 `type="submit"` 可能会导致意外的页面刷新或提交行为。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 ### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[新增组件文件] 按钮类型属性缺失** - 具体内容：在 `SubtitleModeSwitch.tsx`、`SubtitlePositionSelector.tsx` 和 `SubtitleEffectButtons.tsx` 中，所有的 `<button>` 标签建议显式添加 `type="button"`。这是防御性编程的最佳实践，防止组件在表单上下文中被误用导致默认提交行为。 ### ✅ 良好实践 - **组件拆分合理**：将 `SubtitleStylePanel` 中的复杂 UI 逻辑拆分为独立的子组件（`SubtitleModeSwitch`、`SubtitlePositionSelector`、`SubtitleEffectButtons`），提高了代码的可维护性和复用性。 - **Props 类型定义清晰**：新增组件均定义了明确的 TypeScript 接口，类型安全。 - **逻辑保持一致**：重构后的代码逻辑与原代码完全等价，未引入功能变更。 - **Import 路径修复**：`useVoiceMaterialActions.ts` 中修复了相对路径引用错误（从 `../../../types` 修正为 `../../types`），确保模块引用正确。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-29 09:29:21 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot merged commit faeed6f014 into develop 2026-07-29 17:30:42 +08:00

auto-approve-bot deleted branch refactor/subtitle-style-panel 2026-07-29 17:30:43 +08:00

gitea-actions bot commented 2026-07-29 17:31:35 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1139