refactor(editing-planner): split useTemplateManagement into sub-modules #976

Closed
xiaoxia wants to merge 5 commits from refactor/template-management-hook into develop
Owner

变更说明

useTemplateManagement Hook 从 466 行拆分为子目录模块,主 Hook 精简为 210 行(-55%)。

拆分结构

hooks/template-management/
├── useTemplateList.ts    # 模板列表 + 分类 + 筛选搜索
├── useTemplateDetail.ts  # 模板详情加载 + 片段映射
├── usePlanLoading.ts     # 计划草稿加载 + 全量配置还原
└── useTemplateSave.ts    # 保存弹窗 + payload 构造

主要变更

  • useTemplateList: 模板/分类/素材并行加载 + 筛选搜索 + memo 计算
  • useTemplateDetail: 模板详情 → 片段映射 + 标题/字幕/BGM 配置还原
  • usePlanLoading: 计划草稿加载 + clips 表还原 + config.segments 兜底 + 封面/全配置还原
  • useTemplateSave: 保存弹窗状态 + payload 构造 + 创建/更新
  • 主 Hook: 仅保留模式切换 + 事件编排,接口完全兼容

导入路径保持不变。

## 变更说明 将 `useTemplateManagement` Hook 从 466 行拆分为子目录模块,主 Hook 精简为 210 行(-55%)。 ## 拆分结构 ``` hooks/template-management/ ├── useTemplateList.ts # 模板列表 + 分类 + 筛选搜索 ├── useTemplateDetail.ts # 模板详情加载 + 片段映射 ├── usePlanLoading.ts # 计划草稿加载 + 全量配置还原 └── useTemplateSave.ts # 保存弹窗 + payload 构造 ``` ## 主要变更 - **useTemplateList**: 模板/分类/素材并行加载 + 筛选搜索 + memo 计算 - **useTemplateDetail**: 模板详情 → 片段映射 + 标题/字幕/BGM 配置还原 - **usePlanLoading**: 计划草稿加载 + clips 表还原 + config.segments 兜底 + 封面/全配置还原 - **useTemplateSave**: 保存弹窗状态 + payload 构造 + 创建/更新 - **主 Hook**: 仅保留模式切换 + 事件编排,接口完全兼容 导入路径保持不变。
xiaoxia added 1 commit 2026-07-26 18:31:43 +08:00
refactor(editing-planner): split useTemplateManagement into sub-modules
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 38s
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 48s
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m44s
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m42s
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 45s
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m44s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m5s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m2s
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 34s
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m40s
AI Code Review / AI Code Review (pull_request) Successful in 2m49s
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 6m32s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / Frontend Unit Tests (pull_request) Failing after 1m3s
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
bb167c5d81
- Extract template list + filtering to useTemplateList.ts
- Extract template detail loading to useTemplateDetail.ts
- Extract plan/draft loading to usePlanLoading.ts
- Extract save modal + payload to useTemplateSave.ts
- Main hook reduced from 466 to 210 lines (-55%)
- Keep import path @/pages/editing-planner/hooks/useTemplateManagement unchanged
xiaoxia added 1 commit 2026-07-27 08:13:20 +08:00
fix: remove unused imports (EditingTemplate, TransitionEffect, ClipType)
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 26s
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 52s
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m17s
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m27s
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 37s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 59s
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 1m6s
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m46s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m26s
AI Code Review / AI Code Review (pull_request) Successful in 1m47s
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 3m4s
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 6m34s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Frontend Unit Tests (pull_request) Failing after 28s
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
4ec65cd531
xiaoxia added 1 commit 2026-07-27 12:34:24 +08:00
Merge branch 'develop' into refactor/template-management-hook
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 26s
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 52s
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m18s
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m20s
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 38s
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m48s
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 49s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m2s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m3s
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m58s
AI Code Review / AI Code Review (pull_request) Successful in 1m49s
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 8m3s
CI/CD Pipeline / Unit Tests (pull_request) Has been cancelled
CI/CD Pipeline / Integration Tests (pull_request) Has been cancelled
CI/CD Pipeline / Frontend Unit Tests (pull_request) Has been cancelled
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been cancelled
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been cancelled
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been cancelled
CI/CD Pipeline / Build Production API Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Production Web Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been cancelled
CI/CD Pipeline / Deploy Production (pull_request) Has been cancelled
CI/CD Pipeline / Production Browser E2E (pull_request) Has been cancelled
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been cancelled
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
0407f35ac2
xiaoxia added 1 commit 2026-07-27 15:22:34 +08:00
fix: 修复 usePlanLoading CoverConfig导入和prev类型
CI/CD Pipeline / Check if frontend-only change (pull_request) Has been cancelled
CI/CD Pipeline / Validate - Code Quality (pull_request) Has been cancelled
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Has been cancelled
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Has been cancelled
CI/CD Pipeline / Unit Tests (pull_request) Has been cancelled
CI/CD Pipeline / Integration Tests (pull_request) Has been cancelled
CI/CD Pipeline / Frontend Lint (pull_request) Has been cancelled
CI/CD Pipeline / Frontend Unit Tests (pull_request) Has been cancelled
CI/CD Pipeline / PR Build API Image (pull_request) Has been cancelled
CI/CD Pipeline / PR Build Web Image (pull_request) Has been cancelled
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Staging API Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been cancelled
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been cancelled
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been cancelled
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been cancelled
CI/CD Pipeline / Build Production API Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Production Web Image (pull_request) Has been cancelled
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been cancelled
CI/CD Pipeline / Deploy Production (pull_request) Has been cancelled
CI/CD Pipeline / Production Browser E2E (pull_request) Has been cancelled
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been cancelled
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
AI Code Review / AI Code Review (pull_request) Has been cancelled
Preview Deploy / Deploy Preview Environment (pull_request) Has been cancelled
PR Automation / Auto Approve on CI Green (pull_request) Successful in 51s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m2s
83d30190ed
xiaoxia added 1 commit 2026-07-27 15:22:49 +08:00
fix: 修复 useTemplateSave CoverConfig 导入路径
CI/CD Pipeline / CI Gate (pull_request) CI运行中 [frontend-only]
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 26s
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 38s
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 24s
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m58s
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m49s
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m29s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m21s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m55s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 49s
AI Code Review / AI Code Review (pull_request) Successful in 3m45s
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 5m16s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 15m38s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / Frontend Unit Tests (pull_request) Failing after 16s
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 12s
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
7268d44476
auto-approve-bot approved these changes 2026-07-27 16:48:12 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。
auto-approve-bot approved these changes 2026-07-27 16:48:12 +08:00
auto-approve-bot left a comment
Collaborator

CI全绿,自动审批通过。

CI全绿,自动审批通过。

🚀 预览环境已部署

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

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

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

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

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

代码审查结果 - PR #976

⚠️ 问题(4个需要修改)

  1. useTemplateDetail.ts 第58-64行:空指针引用风险

    • 问题描述:代码直接访问 tpl.title_configtpl.subtitle_configtpl.bgm_config 的属性,未判断这些 config 对象是否存在。如果后端返回的数据中这些字段为 nullundefined,会导致前端运行时报错崩溃。
    • 修改建议:参考 usePlanLoading.ts 中的写法,增加 if (tpl.title_config) 等非空判断后再进行属性访问和状态设置。
  2. useTemplateDetail.ts 第86行:空指针引用风险

    • 问题描述:直接调用 tpl.tags.join(", ")。如果 tagsnullundefined,会导致 "Cannot read properties of null" 错误。
    • 修改建议:修改为 (tpl.tags || []).join(", ")
  3. useTemplateList.ts 第68行:空指针引用风险

    • 问题描述:在过滤逻辑中直接调用 t.name.toLowerCase()。如果模板对象的 name 字段为空,会抛出异常。
    • 修改建议:使用可选链或默认值,例如 (t.name || "").toLowerCase().includes(...)
  4. useTemplateSave.ts 第106行:数据计算逻辑隐患

    • 问题描述:计算 duration_minduration_max 时使用了 c.duration。如果 c.durationundefinednull 或非数字类型,计算结果将为 NaN,导致提交给后端的数据格式错误。
    • 修改建议:增加默认值处理,例如 const dur = c.duration || 3,然后再基于 dur 进行计算。

💡 建议(2个可选)

  1. usePlanLoading.ts 第115行:避免使用 setTimeout 进行状态同步

    • 具体内容:代码中使用 setTimeout(() => resetClips(mapped), 100) 来延迟重置片段。这种硬编码延迟在性能较差的设备上可能不足以等待布局更新,而在高性能设备上则造成不必要的延迟。建议检查是否可以通过 useEffect 的依赖项或 requestAnimationFrame 等更可靠的方式处理,或者确认是否有必要延迟。
  2. useTemplateList.ts 第35行:useCallback 依赖项稳定性

    • 具体内容:loadTemplates 依赖 setMediaAssets。如果父组件传递的 setMediaAssets 不是由 useCallbackuseState 生成的稳定函数引用(例如是内联函数),会导致 loadTemplates 在每次渲染时重新创建,进而触发 useEffect 无限循环调用接口。建议确保父组件传入的函数引用稳定。

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


🤖 由 AI 代码审查机器人自动生成 | 2026-07-27 08:50:27 | 模型:

## 代码审查结果 - PR #976 ### ⚠️ 问题(4个需要修改) 1. **useTemplateDetail.ts 第58-64行**:空指针引用风险 - 问题描述:代码直接访问 `tpl.title_config`、`tpl.subtitle_config` 和 `tpl.bgm_config` 的属性,未判断这些 config 对象是否存在。如果后端返回的数据中这些字段为 `null` 或 `undefined`,会导致前端运行时报错崩溃。 - 修改建议:参考 `usePlanLoading.ts` 中的写法,增加 `if (tpl.title_config)` 等非空判断后再进行属性访问和状态设置。 2. **useTemplateDetail.ts 第86行**:空指针引用风险 - 问题描述:直接调用 `tpl.tags.join(", ")`。如果 `tags` 为 `null` 或 `undefined`,会导致 "Cannot read properties of null" 错误。 - 修改建议:修改为 `(tpl.tags || []).join(", ")`。 3. **useTemplateList.ts 第68行**:空指针引用风险 - 问题描述:在过滤逻辑中直接调用 `t.name.toLowerCase()`。如果模板对象的 `name` 字段为空,会抛出异常。 - 修改建议:使用可选链或默认值,例如 `(t.name || "").toLowerCase().includes(...)`。 4. **useTemplateSave.ts 第106行**:数据计算逻辑隐患 - 问题描述:计算 `duration_min` 和 `duration_max` 时使用了 `c.duration`。如果 `c.duration` 为 `undefined`、`null` 或非数字类型,计算结果将为 `NaN`,导致提交给后端的数据格式错误。 - 修改建议:增加默认值处理,例如 `const dur = c.duration || 3`,然后再基于 `dur` 进行计算。 ### 💡 建议(2个可选) 1. **usePlanLoading.ts 第115行**:避免使用 setTimeout 进行状态同步 - 具体内容:代码中使用 `setTimeout(() => resetClips(mapped), 100)` 来延迟重置片段。这种硬编码延迟在性能较差的设备上可能不足以等待布局更新,而在高性能设备上则造成不必要的延迟。建议检查是否可以通过 `useEffect` 的依赖项或 `requestAnimationFrame` 等更可靠的方式处理,或者确认是否有必要延迟。 2. **useTemplateList.ts 第35行**:useCallback 依赖项稳定性 - 具体内容:`loadTemplates` 依赖 `setMediaAssets`。如果父组件传递的 `setMediaAssets` 不是由 `useCallback` 或 `useState` 生成的稳定函数引用(例如是内联函数),会导致 `loadTemplates` 在每次渲染时重新创建,进而触发 `useEffect` 无限循环调用接口。建议确保父组件传入的函数引用稳定。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-07-27 08:50:27 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
xiaoxia closed this pull request 2026-07-27 17:01:01 +08:00

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #976 已关闭或合并,对应的预览环境已被清理。 > 如有需要,可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / CI Gate (pull_request) CI运行中 [frontend-only]
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 26s
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 38s
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 24s
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m58s
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m49s
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m29s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m21s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m55s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 49s
AI Code Review / AI Code Review (pull_request) Successful in 3m45s
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 5m16s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 15m38s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / Frontend Unit Tests (pull_request) Failing after 16s
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 12s
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped

Pull request closed

Sign in to join this conversation.