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

refactor(editing-planner): Phase 2 - 重构 9 个面板组件（三阶段模式） #928

Closed
xiaoxia wants to merge 2 commits from refactor/editing-planner-round2 into develop
pull from: refactor/editing-planner-round2
merge into: xiaoxia:develop
Conversation 1 Commits 2 Files Changed 44
+3106 -2379
xiaoxia commented 2026-07-26 15:05:35 +08:00
Owner
Copy Link
Copy Source

概述

EditingPlanner 模块 9 个面板组件全面重构，采用三阶段标准模式（Phase 1 抽类型/常量/工具函数 → Phase 2 抽 UI 组件 → Phase 3 抽业务 Hook）。

重构详情

ClipPropertiesPanel (634→174行, -73%)

  • 抽 types/clipProperties.ts
  • 抽 constants/clipProperties.ts (POSITION_OPTIONS, FONT_OPTIONS, ANIMATION_OPTIONS, CLIP_TYPE_ICONS/LABELS)
  • 抽 utils/clipProperties.ts (getGenderLabel, formatModeLabel)
  • 抽 4 个 UI 子组件: SubtitleSettingsSection / BgmSettingsSection / ClipDetailSection / StatsSection
  • 抽 useVoicePreview Hook

PipConfigPanel (547→91行, -83%)

  • 抽 constants/pipConfig.ts (GRID_POSITION_MAP, GRID_POSITIONS, ANIM_OPTIONS, SLIDE_DIR_OPTIONS, LAYER_COLORS)
  • 抽 2 个 UI 子组件: LayerList / LayerConfig
  • 抽 usePipLayers Hook

StickerPanel (516→93行, -82%)

  • 抽 constants/sticker.ts (EMOJI_LIST, STICKER_TYPE_TABS, TEXT_PRESET_STYLES)
  • 抽 3 个 UI 子组件: StickerLibrary / StickerList / StickerPropsEditor
  • 抽 useStickerItems Hook

WatermarkPanel (391→123行, -69%)

  • 抽 constants/watermark.ts
  • 抽 5 个 UI 子组件: WatermarkTypeTabs / ImageWatermarkSection / TextWatermarkSection / ScrollWatermarkSection / WatermarkCommonSection
  • 抽 useWatermarkConfig Hook

TtsPanel (332→177行, -47%)

  • 抽 constants/tts.ts
  • 抽 2 个 UI 子组件: VoiceSelector / TtsSlider
  • 抽 useTtsPanel Hook

IntroOutroPanel (291→94行, -68%)

  • 抽 constants/introOutro.ts
  • 抽 IntroOutroBlock 通用组件（片头片尾对称复用）

FilterPanel (224→109行, -51%)

  • 抽 constants/filter.ts
  • 抽 2 个 UI 子组件: FilterPresetGrid / FilterManualAdjust

SubtitleStylePanel (223→180行, -19%)

  • 抽 constants/subtitleStyle.ts
  • 抽 SubtitlePreview 组件

验证

  • ✅ Prettier 格式化通过
  • ✅ smoke.test.tsx 新增所有子模块 import
  • ⏳ 等待 CI 验证 TSC / ESLint
## 概述 EditingPlanner 模块 9 个面板组件全面重构，采用三阶段标准模式（Phase 1 抽类型/常量/工具函数 → Phase 2 抽 UI 组件 → Phase 3 抽业务 Hook）。 ## 重构详情 ### ClipPropertiesPanel (634→174行, -73%) - 抽 `types/clipProperties.ts` - 抽 `constants/clipProperties.ts` (POSITION_OPTIONS, FONT_OPTIONS, ANIMATION_OPTIONS, CLIP_TYPE_ICONS/LABELS) - 抽 `utils/clipProperties.ts` (getGenderLabel, formatModeLabel) - 抽 4 个 UI 子组件: SubtitleSettingsSection / BgmSettingsSection / ClipDetailSection / StatsSection - 抽 `useVoicePreview` Hook ### PipConfigPanel (547→91行, -83%) - 抽 `constants/pipConfig.ts` (GRID_POSITION_MAP, GRID_POSITIONS, ANIM_OPTIONS, SLIDE_DIR_OPTIONS, LAYER_COLORS) - 抽 2 个 UI 子组件: LayerList / LayerConfig - 抽 `usePipLayers` Hook ### StickerPanel (516→93行, -82%) - 抽 `constants/sticker.ts` (EMOJI_LIST, STICKER_TYPE_TABS, TEXT_PRESET_STYLES) - 抽 3 个 UI 子组件: StickerLibrary / StickerList / StickerPropsEditor - 抽 `useStickerItems` Hook ### WatermarkPanel (391→123行, -69%) - 抽 `constants/watermark.ts` - 抽 5 个 UI 子组件: WatermarkTypeTabs / ImageWatermarkSection / TextWatermarkSection / ScrollWatermarkSection / WatermarkCommonSection - 抽 `useWatermarkConfig` Hook ### TtsPanel (332→177行, -47%) - 抽 `constants/tts.ts` - 抽 2 个 UI 子组件: VoiceSelector / TtsSlider - 抽 `useTtsPanel` Hook ### IntroOutroPanel (291→94行, -68%) - 抽 `constants/introOutro.ts` - 抽 `IntroOutroBlock` 通用组件（片头片尾对称复用） ### FilterPanel (224→109行, -51%) - 抽 `constants/filter.ts` - 抽 2 个 UI 子组件: FilterPresetGrid / FilterManualAdjust ### SubtitleStylePanel (223→180行, -19%) - 抽 `constants/subtitleStyle.ts` - 抽 `SubtitlePreview` 组件 ## 验证 - ✅ Prettier 格式化通过 - ✅ smoke.test.tsx 新增所有子模块 import - ⏳ 等待 CI 验证 TSC / ESLint
xiaoxia added 1 commit 2026-07-26 15:05:35 +08:00
refactor(editing-planner): Phase 2 - refactor 9 panel components with 3-phase pattern
AI Code Review / AI Code Review (pull_request) Failing after 0s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 18s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 22s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m15s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m17s
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 32s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m6s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m7s
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
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 58s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 2m17s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 54s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 4m21s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 3m46s
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 / Integration Tests (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 / Production Browser E2E (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
f9d245bb5e 
ClipPropertiesPanel: 634→174行 (-73%)
  - 抽 types/clipProperties, constants/clipProperties, utils/clipProperties
  - 抽 4 个 UI 子组件: SubtitleSettingsSection/BgmSettingsSection/ClipDetailSection/StatsSection
  - 抽 useVoicePreview Hook

PipConfigPanel: 547→91行 (-83%)
  - 抽 constants/pipConfig
  - 抽 2 个 UI 子组件: LayerList/LayerConfig
  - 抽 usePipLayers Hook

StickerPanel: 516→93行 (-82%)
  - 抽 constants/sticker
  - 抽 3 个 UI 子组件: StickerLibrary/StickerList/StickerPropsEditor
  - 抽 useStickerItems Hook

WatermarkPanel: 391→123行 (-69%)
  - 抽 constants/watermark
  - 抽 5 个 UI 子组件
  - 抽 useWatermarkConfig Hook

TtsPanel: 332→177行 (-47%)
  - 抽 constants/tts
  - 抽 2 个 UI 子组件: VoiceSelector/TtsSlider
  - 抽 useTtsPanel Hook

IntroOutroPanel: 291→94行 (-68%)
  - 抽 constants/introOutro
  - 抽 IntroOutroBlock 通用组件（片头片尾对称复用）

FilterPanel: 224→109行 (-51%)
  - 抽 constants/filter
  - 抽 2 个 UI 子组件: FilterPresetGrid/FilterManualAdjust

SubtitleStylePanel: 223→180行 (-19%)
  - 抽 constants/subtitleStyle
  - 抽 SubtitlePreview 组件

smoke.test.tsx: 新增所有子模块 import
xiaoxia added 1 commit 2026-07-26 15:19:27 +08:00
refactor(editing-planner): replace 5 main panel files with refactored versions
AI Code Review / AI Code Review (pull_request) Failing after 0s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 21s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m46s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m46s
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 18s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 2m31s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 48s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 2m42s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m23s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 42s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 21s
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 / Validate - Code Quality (pull_request) Successful in 5m40s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m46s
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 / Integration Tests (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 / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 21s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Failing after 22s
Details
9aea90342e 
Replace original large panel files with their refactored versions that
delegate to extracted sub-components and hooks:

- WatermarkPanel: 391→122行 (-69%)
- TtsPanel: 332→174行 (-48%)
- IntroOutroPanel: 291→100行 (-66%)
- FilterPanel: 224→105行 (-53%)
- SubtitleStylePanel: 223→190行 (-15%)

All constants and sub-components were already created in previous commits.
xiaoxia closed this pull request 2026-07-26 15:38:28 +08:00
gitea-actions bot commented 2026-07-26 15:38:48 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #928 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
AI Code Review / AI Code Review (pull_request) Failing after 0s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 21s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m46s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m46s
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 18s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 2m31s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 48s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 2m42s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m23s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 42s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 21s
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 / Validate - Code Quality (pull_request) Successful in 5m40s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m46s
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 / Integration Tests (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 / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 21s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Failing after 22s
Details

Pull request closed

Please reopen this pull request to perform a merge.
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
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#928
Delete Branch "refactor/editing-planner-round2"

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?