refactor(generate): 拆分 Step6CoverSettings 为子组件（187→109行, -42%） #1097

Merged

xiaoxia merged 1 commits from refactor/step6-cover-settings into develop 2026-07-28 16:18:41 +08:00

Conversation 3 Commits 1 Files Changed 4

+152 -101

xiaoxia commented 2026-07-28 14:11:44 +08:00

Owner

Copy Link

Copy Source

变更说明

将 Step6CoverSettings 拆分为 3 个子组件，主文件从 187 行精简到 109 行（-42%）。

拆分结构

generate/components/
├── Step6CoverSettings.tsx          (109行, 主入口)
└── cover-settings/
    ├── CoverModeSelector.tsx       (模式选择 Tab)
    ├── FrameCoverPicker.tsx        (抽帧选封面 + 滑块 + 快捷按钮)
    └── UploadCoverPicker.tsx       (上传封面图 + 预览)

三阶段拆分

• Phase 1: 类型常量（已在 editing-planner/types/cover.ts，无需改动）
• Phase 2: 抽离 UI 子组件 — CoverModeSelector / FrameCoverPicker / UploadCoverPicker
• Phase 3: 主文件瘦身，保留整体布局和预览区域

兼容性

• 主入口 Step6CoverSettings.tsx default export 不变，路径不变
• 所有子组件在 cover-settings/ 目录内，外部无需感知

## 变更说明 将 Step6CoverSettings 拆分为 3 个子组件，主文件从 187 行精简到 109 行（-42%）。 ## 拆分结构 ``` generate/components/ ├── Step6CoverSettings.tsx (109行, 主入口) └── cover-settings/ ├── CoverModeSelector.tsx (模式选择 Tab) ├── FrameCoverPicker.tsx (抽帧选封面 + 滑块 + 快捷按钮) └── UploadCoverPicker.tsx (上传封面图 + 预览) ``` ## 三阶段拆分 - Phase 1: 类型常量（已在 editing-planner/types/cover.ts，无需改动） - Phase 2: 抽离 UI 子组件 — CoverModeSelector / FrameCoverPicker / UploadCoverPicker - Phase 3: 主文件瘦身，保留整体布局和预览区域 ## 兼容性 - 主入口 Step6CoverSettings.tsx default export 不变，路径不变 - 所有子组件在 cover-settings/ 目录内，外部无需感知

xiaoxia added 1 commit 2026-07-28 16:06:13 +08:00

refactor: split Step6CoverSettings into cover-settings sub-components ... f4ed07dedd

Extract cover mode selector, frame picker, and upload picker into
separate components. Main file reduces from 187 to 109 lines (-42%).

- CoverModeSelector: tab switcher for auto/frame/upload modes
- FrameCoverPicker: frame slider with quick-select buttons
- UploadCoverPicker: image upload area with preview

xiaoxia force-pushed refactor/step6-cover-settings from 12688cd00e to f4ed07dedd 2026-07-28 16:06:13 +08:00 Compare

xiaoxia merged commit 0638c685b6 into develop 2026-07-28 16:18:41 +08:00

auto-approve-bot reviewed 2026-07-28 16:59:58 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

gitea-actions bot commented 2026-07-28 17:00:40 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot commented 2026-07-28 17:02:41 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

无

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

1. [UploadCoverPicker.tsx: 21] 避免使用全局 ID 获取 DOM 元素

   • 具体内容：当前使用 document.getElementById("cover-upload-input") 触发文件选择。这在组件复用或页面存在多个实例时会导致 ID 冲突（例如同时打开两个编辑窗口）。建议使用 React 的 useRef 来引用 DOM 元素，确保组件封装性。

2. [CoverModeSelector.tsx: 14] 硬编码的模式列表

   • 具体内容：modes 数组是硬编码的 ["auto", "frame", "upload"]。如果 CoverMode 类型定义增加新值（如 "ai"），此处组件不会自动渲染新选项，容易导致 UI 与类型定义不同步。建议考虑从类型或配置中派生此列表。

✅ 良好实践

• 组件拆分合理：将 Step6CoverSettings 中的大段 JSX 拆分为 CoverModeSelector、FrameCoverPicker 和 UploadCoverPicker，显著提升了代码的可读性和可维护性。
• Props 传递清晰：新组件的接口定义明确，数据流向清晰（单向数据流），符合 React 最佳实践。
• 边界处理保留：在 FrameCoverPicker 中保留了 Math.max(totalDuration, 1) 的逻辑，有效防止了除零或无效时长导致的滑块异常。

---

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

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[UploadCoverPicker.tsx: 21] 避免使用全局 ID 获取 DOM 元素** - 具体内容：当前使用 `document.getElementById("cover-upload-input")` 触发文件选择。这在组件复用或页面存在多个实例时会导致 ID 冲突（例如同时打开两个编辑窗口）。建议使用 React 的 `useRef` 来引用 DOM 元素，确保组件封装性。 2. **[CoverModeSelector.tsx: 14] 硬编码的模式列表** - 具体内容：`modes` 数组是硬编码的 `["auto", "frame", "upload"]`。如果 `CoverMode` 类型定义增加新值（如 "ai"），此处组件不会自动渲染新选项，容易导致 UI 与类型定义不同步。建议考虑从类型或配置中派生此列表。 ### ✅ 良好实践 - **组件拆分合理**：将 `Step6CoverSettings` 中的大段 JSX 拆分为 `CoverModeSelector`、`FrameCoverPicker` 和 `UploadCoverPicker`，显著提升了代码的可读性和可维护性。 - **Props 传递清晰**：新组件的接口定义明确，数据流向清晰（单向数据流），符合 React 最佳实践。 - **边界处理保留**：在 `FrameCoverPicker` 中保留了 `Math.max(totalDuration, 1)` 的逻辑，有效防止了除零或无效时长导致的滑块异常。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-28 09:02:41 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

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#1097