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

refactor(template-library): 三阶段重构 TemplateLibrary（716→107行, -85%） #931

Closed
xiaoxia wants to merge 2 commits from refactor/template-library into develop
pull from: refactor/template-library
merge into: xiaoxia:develop
Conversation 3 Commits 2 Files Changed -
xiaoxia commented 2026-07-26 15:50:44 +08:00
Owner
Copy Link
Copy Source

重构概览

按标准三阶段模式重构 TemplateLibrary 巨无霸组件：

Phase 1 - 抽类型/常量/工具函数

  • types/templateLibrary.ts: EditTemplateType, DurationRange, ConfigDisplayFields
  • constants/templateLibrary.ts: TEMPLATE_TYPES, DURATION_OPTIONS, MATERIAL_TYPE_LABELS, 渐变色映射
  • utils/templateLibrary.ts: getTypeColor, gradientForCategory, formatDuration, formatConfig, getMaterialTypeLabel, calcTotalSegmentDuration

Phase 2 - 抽 5 个 UI 组件

  • TemplateCard: 模板卡片（缩略图+信息+操作按钮）
  • TemplateDetailModal: 模板详情弹窗（预览+素材规则+样式配置）
  • TemplateHeader: 页面头部（标题+创建按钮）
  • TemplateToolbar: 工具栏（搜索+分类+时长筛选）
  • TemplateGrid: 模板网格 + 空状态 + 分页 + Loading/Error

Phase 3 - 抽 2 个业务 Hook

  • useTemplateLibrary: 数据获取、筛选、分页、收藏/复制 mutations
  • useTemplateDetail: 详情弹窗逻辑（预览加载、收藏乐观更新）

成效

  • 主文件：716 → 107 行（-85%）
  • 新增 10 个文件，职责清晰
  • 所有新模块加入 smoke test
## 重构概览 按标准三阶段模式重构 TemplateLibrary 巨无霸组件： ### Phase 1 - 抽类型/常量/工具函数 - `types/templateLibrary.ts`: EditTemplateType, DurationRange, ConfigDisplayFields - `constants/templateLibrary.ts`: TEMPLATE_TYPES, DURATION_OPTIONS, MATERIAL_TYPE_LABELS, 渐变色映射 - `utils/templateLibrary.ts`: getTypeColor, gradientForCategory, formatDuration, formatConfig, getMaterialTypeLabel, calcTotalSegmentDuration ### Phase 2 - 抽 5 个 UI 组件 - `TemplateCard`: 模板卡片（缩略图+信息+操作按钮） - `TemplateDetailModal`: 模板详情弹窗（预览+素材规则+样式配置） - `TemplateHeader`: 页面头部（标题+创建按钮） - `TemplateToolbar`: 工具栏（搜索+分类+时长筛选） - `TemplateGrid`: 模板网格 + 空状态 + 分页 + Loading/Error ### Phase 3 - 抽 2 个业务 Hook - `useTemplateLibrary`: 数据获取、筛选、分页、收藏/复制 mutations - `useTemplateDetail`: 详情弹窗逻辑（预览加载、收藏乐观更新） ### 成效 - 主文件：716 → 107 行（-85%） - 新增 10 个文件，职责清晰 - 所有新模块加入 smoke test
xiaoxia force-pushed refactor/template-library from 38b52653f7 to bb56094029 2026-07-26 15:56:54 +08:00 Compare
xiaoxia added 1 commit 2026-07-26 18:24:42 +08:00
refactor(template-library): 三阶段重构 TemplateLibrary（716→107行, -85%）
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 38s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m4s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 1m8s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 1m53s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 52s
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 26s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m4s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m0s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m45s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 55s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 4m49s
Details
AI Code Review / AI Code Review (pull_request) Successful in 4m43s
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 / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 37s
Details
CI/CD Pipeline / Deploy Production (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 / Canary Release to Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
8711b5dade 
Phase 1 - 抽类型/常量/工具函数:
- types/templateLibrary.ts: EditTemplateType, DurationRange, ConfigDisplayFields
- constants/templateLibrary.ts: TEMPLATE_TYPES, DURATION_OPTIONS, MATERIAL_TYPE_LABELS, 渐变色映射
- utils/templateLibrary.ts: getTypeColor, gradientForCategory, formatDuration, formatConfig, getMaterialTypeLabel, calcTotalSegmentDuration

Phase 2 - 抽 5 个 UI 组件:
- TemplateCard: 模板卡片（缩略图+信息+操作按钮）
- TemplateDetailModal: 模板详情弹窗（预览+素材规则+样式配置）
- TemplateHeader: 页面头部（标题+创建按钮）
- TemplateToolbar: 工具栏（搜索+分类+时长筛选）
- TemplateGrid: 模板网格 + 空状态 + 分页 + Loading/Error

Phase 3 - 抽 2 个业务 Hook:
- useTemplateLibrary: 数据获取、筛选、分页、收藏/复制 mutations
- useTemplateDetail: 详情弹窗逻辑（预览加载、收藏乐观更新）

主文件 716→107 行，共新增 10 个文件
xiaoxia force-pushed refactor/template-library from bb56094029 to 8711b5dade 2026-07-26 18:24:42 +08:00 Compare
gitea-actions bot commented 2026-07-26 19:02:27 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #931 | | 预览链接 | [https://pr-931.preview.xiaoxiajianji.com](https://pr-931.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
auto-approve-bot commented 2026-07-26 19:05:20 +08:00
Collaborator
Copy Link
Copy Source

代码审查结果 - PR #931

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

  1. apps/web/src/pages/templates/TemplateLibrary.tsx 第27行：传递给 useTemplateDetail 的 onToggleFavorite 回调使用了内联箭头函数 (id) => toggleFavorite(id)，这会在每次父组件渲染时创建新的函数引用。
    • 问题描述：如果 useTemplateDetail 内部将该回调用于 useEffect 或 useCallback 的依赖项，会导致不必要的副作用触发或子组件频繁重渲染。此外，第52行向 TemplateGrid 传递的是原始的 toggleFavorite 引用，两处处理方式不一致。
    • 修改建议：直接传递 toggleFavorite。根据旧代码逻辑，TemplateDetailModal 调用 onToggleFavorite 时并未传递 event 参数，而原始的 toggleFavorite 函数签名通常支持 (id, e?)，因此直接传递引用在功能上是安全的且性能更好。

💡 建议（2个可选）

  1. apps/web/src/pages/templates/components/template-library/TemplateCard.tsx 第10行：建议使用 React.memo 包裹 TemplateCard 组件。

    • 具体内容：TemplateCard 是在列表中渲染的组件。当父组件 TemplateGrid 或 TemplateLibrary 状态更新（如搜索框输入）时，如果不使用 memo，所有卡片都会重新渲染，造成性能浪费。

  2. apps/web/src/pages/templates/hooks/useTemplateLibrary.ts：请确保新 Hook 中保留了旧代码中的关键逻辑。

    • 具体内容：旧代码中在 handleSearchChange、handleCategoryChange 等 handler 中有 setPage(1) 的逻辑（切换筛选条件时重置页码），且 useQuery 配置了 staleTime: 30_000。请确保这些逻辑在新的 Hook 中得到了正确实现，否则会导致分页状态错误或缓存策略失效。

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

🤖 由 AI 代码审查机器人自动生成 | 2026-07-26 11:05:20 | 模型:

## 代码审查结果 - PR #931 ### ⚠️ 问题（1个需要修改） 1. **apps/web/src/pages/templates/TemplateLibrary.tsx 第27行**：传递给 `useTemplateDetail` 的 `onToggleFavorite` 回调使用了内联箭头函数 `(id) => toggleFavorite(id)`，这会在每次父组件渲染时创建新的函数引用。 - **问题描述**：如果 `useTemplateDetail` 内部将该回调用于 `useEffect` 或 `useCallback` 的依赖项，会导致不必要的副作用触发或子组件频繁重渲染。此外，第52行向 `TemplateGrid` 传递的是原始的 `toggleFavorite` 引用，两处处理方式不一致。 - **修改建议**：直接传递 `toggleFavorite`。根据旧代码逻辑，`TemplateDetailModal` 调用 `onToggleFavorite` 时并未传递 `event` 参数，而原始的 `toggleFavorite` 函数签名通常支持 `(id, e?)`，因此直接传递引用在功能上是安全的且性能更好。 ### 💡 建议（2个可选） 1. **apps/web/src/pages/templates/components/template-library/TemplateCard.tsx 第10行**：建议使用 `React.memo` 包裹 `TemplateCard` 组件。 - **具体内容**：`TemplateCard` 是在列表中渲染的组件。当父组件 `TemplateGrid` 或 `TemplateLibrary` 状态更新（如搜索框输入）时，如果不使用 `memo`，所有卡片都会重新渲染，造成性能浪费。 2. **apps/web/src/pages/templates/hooks/useTemplateLibrary.ts**：请确保新 Hook 中保留了旧代码中的关键逻辑。 - **具体内容**：旧代码中在 `handleSearchChange`、`handleCategoryChange` 等 handler 中有 `setPage(1)` 的逻辑（切换筛选条件时重置页码），且 `useQuery` 配置了 `staleTime: 30_000`。请确保这些逻辑在新的 Hook 中得到了正确实现，否则会导致分页状态错误或缓存策略失效。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-07-26 11:05:20 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
xiaoxia added 1 commit 2026-07-27 12:34:36 +08:00
Merge branch 'develop' into refactor/template-library
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 25s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m15s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m2s
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 / Validate - Migration (alembic) (pull_request) Successful in 1m18s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 39s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 45s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m34s
Details
AI Code Review / AI Code Review (pull_request) Successful in 45s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m7s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m24s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 7m32s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 5m10s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 14s
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 / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Successful in 3m49s
Details
CI/CD Pipeline / Unit Tests (pull_request) Successful in 9m41s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 15s
Details
CI/CD Pipeline / Deploy Production (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 / Canary Release to Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
4588f1ac7e
xiaoxia closed this pull request 2026-07-27 15:27:32 +08:00
gitea-actions bot commented 2026-07-27 17:01:16 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #931 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 25s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m15s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m2s
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 / Validate - Migration (alembic) (pull_request) Successful in 1m18s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Successful in 39s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 45s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Failing after 2m34s
Details
AI Code Review / AI Code Review (pull_request) Successful in 45s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m7s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m24s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Successful in 7m32s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 5m10s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 14s
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 / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Successful in 3m49s
Details
CI/CD Pipeline / Unit Tests (pull_request) Successful in 9m41s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 15s
Details
CI/CD Pipeline / Deploy Production (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 / Canary Release to Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
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
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#931
Delete Branch "refactor/template-library"

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?