xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 16 Pull Requests 12 Actions 34.2k Packages Projects Releases 7 Wiki Activity

refactor(shared): 抽取封面选择为公共组件CoverSelector，智能剪辑/AI数字人复用 #2070

Open
xiaoxia wants to merge 1 commits from refactor/extract-cover-shared-20260927 into refactor/extract-title-template-shared-20260927
pull from: refactor/extract-cover-shared-20260927
merge into: xiaoxia:refactor/extract-title-template-shared-20260927
Conversation 3 Commits 1 Files Changed 20
+2528 -2379
xiaoxia commented 2026-09-27 21:40:11 +08:00
Owner
Copy Link
Copy Source

背景

继 #2067 抽离标题模板为公共组件后，按相同思路把封面选择/配置功能抽离到公共目录 src/components/cover/，智能剪辑 Step6 与 AI数字人共用同一套封面选择组件，消除两处重复实现。

改动

新增/完善公共目录 src/components/cover/

在已有 useSharedCover hook + cover.css 基础上补全 UI 组件：

  • CoverSelector.tsx（315行）：公共主组件，支持两种模式
    • mode="inline"：内联模式，用于智能剪辑 Step6（按钮行+预览+自动生成/模板/上传弹窗）
    • mode="modal"：弹窗模式，用于 AI数字人 ModalCoverSelect（左预览右按钮，560px弹窗）
    • Props通用化：value/templateId/onChange/onTemplateChange/onAutoGenerate/canGenerate/disabledHint/showAutoGenerate/showTemplate/showUpload/aspectRatio/hint/previewWidth
  • CoverSettingsModal.tsx：封面模板选择弹窗（800px，卡片网格+系统徽章+编辑/删除）
  • CoverEditorModal.tsx（1166行）：封面模板自定义编辑器（7面板：基础/人像/背景/主标题/副标题/蒙版）
  • CoverModeSelector/FrameCoverPicker/UploadCoverPicker：子组件
  • types.ts：公共类型，从 pages/generate/types/cover.ts 迁移 CoverTemplate/CoverEditorConfig/TextStyleConfig/PRESET_FONTS/SYSTEM_FONTS/ALL_FONTS/DEFAULT_TITLE_CONFIG/DEFAULT_SUBTITLE_CONFIG/DEFAULT_EDITOR_CONFIG 等，并新增共享的 CoverMode/CoverConfig/DEFAULT_COVER_CONFIG
  • uploadCover.ts：OSS 直传公共工具（uploadCoverToOSS/uploadCoverWithPreview，blob即时预览+异步上传两阶段）
  • cover.css：追加 cs-* 前缀样式，保证公共组件自含样式不依赖页面 CSS
  • index.ts：barrel 统一导出

调用方

  • 智能剪辑 Step6CoverSettings：
    • 单视频场景改用公共 CoverSelector（inline模式），自动生成/模板/上传/预览统一
    • 批量场景保留 useBatchCovers + 卡片网格逻辑（N张封面逐个生成/上传），模板选择通过嵌入仅开 showTemplate 的 CoverSelector 实现
  • AI数字人 ModalCoverSelect（350行→80行）：
    • 删除内联布局/按钮/预览/loading，改为直接使用公共 CoverSelector(modal模式)
    • 保持 AiAvatarCoverConfig 回调签名不变

兼容层

  • 旧路径 pages/generate/components/cover-settings/*（CoverSettingsModal/CoverEditorModal/CoverModeSelector/FrameCoverPicker/UploadCoverPicker）改为一行 re-export wrapper，保持向后兼容
  • pages/generate/types/cover.ts 的 CoverMode/CoverConfig/DEFAULT_COVER_CONFIG 保留定义（页面对齐旧 import），其余类型重导出自公共层
  • api/cover-templates.ts、useSharedCover.ts 改为从公共层 import 类型，消除 pages 反向依赖

验证

  • tsc --noEmit / eslint / prettier --check / vite build 全部通过
  • Vite 自动 code-split：CoverSelector 独立打包为 72KB 懒加载 chunk（不占用主 chunk）
  • 净代码：+2519/-2370 ≈ +149 行（主要是 CoverEditorModal 移动到公共目录时的文件复制+新增公共组件；原位置转为 re-export）

未改动

  • UI 视觉与交互保持现有效果完全不变
  • 封面模板数据仍通过 /api/v1/cover-templates 后端接口 CRUD，不改变 API 契约
  • 批量封面的 generateAll/串行回写/函数式 updater 等逻辑完全保留

依赖

基于 #2067（标题模板公共组件）之上，CI 全绿后按序合入。

## 背景 继 #2067 抽离标题模板为公共组件后，按相同思路把封面选择/配置功能抽离到公共目录 `src/components/cover/`，智能剪辑 Step6 与 AI数字人共用同一套封面选择组件，消除两处重复实现。 ## 改动 ### 新增/完善公共目录 src/components/cover/ 在已有 useSharedCover hook + cover.css 基础上补全 UI 组件： - **CoverSelector.tsx**（315行）：公共主组件，支持两种模式 - `mode="inline"`：内联模式，用于智能剪辑 Step6（按钮行+预览+自动生成/模板/上传弹窗） - `mode="modal"`：弹窗模式，用于 AI数字人 ModalCoverSelect（左预览右按钮，560px弹窗） - Props通用化：value/templateId/onChange/onTemplateChange/onAutoGenerate/canGenerate/disabledHint/showAutoGenerate/showTemplate/showUpload/aspectRatio/hint/previewWidth - **CoverSettingsModal.tsx**：封面模板选择弹窗（800px，卡片网格+系统徽章+编辑/删除） - **CoverEditorModal.tsx**（1166行）：封面模板自定义编辑器（7面板：基础/人像/背景/主标题/副标题/蒙版） - **CoverModeSelector/FrameCoverPicker/UploadCoverPicker**：子组件 - **types.ts**：公共类型，从 pages/generate/types/cover.ts 迁移 CoverTemplate/CoverEditorConfig/TextStyleConfig/PRESET_FONTS/SYSTEM_FONTS/ALL_FONTS/DEFAULT_TITLE_CONFIG/DEFAULT_SUBTITLE_CONFIG/DEFAULT_EDITOR_CONFIG 等，并新增共享的 CoverMode/CoverConfig/DEFAULT_COVER_CONFIG - **uploadCover.ts**：OSS 直传公共工具（uploadCoverToOSS/uploadCoverWithPreview，blob即时预览+异步上传两阶段） - **cover.css**：追加 cs-* 前缀样式，保证公共组件自含样式不依赖页面 CSS - **index.ts**：barrel 统一导出 ### 调用方 - **智能剪辑 Step6CoverSettings**： - 单视频场景改用公共 CoverSelector（inline模式），自动生成/模板/上传/预览统一 - 批量场景保留 useBatchCovers + 卡片网格逻辑（N张封面逐个生成/上传），模板选择通过嵌入仅开 showTemplate 的 CoverSelector 实现 - **AI数字人 ModalCoverSelect**（350行→80行）： - 删除内联布局/按钮/预览/loading，改为直接使用公共 CoverSelector(modal模式) - 保持 AiAvatarCoverConfig 回调签名不变 ### 兼容层 - 旧路径 pages/generate/components/cover-settings/*（CoverSettingsModal/CoverEditorModal/CoverModeSelector/FrameCoverPicker/UploadCoverPicker）改为一行 re-export wrapper，保持向后兼容 - pages/generate/types/cover.ts 的 CoverMode/CoverConfig/DEFAULT_COVER_CONFIG 保留定义（页面对齐旧 import），其余类型重导出自公共层 - api/cover-templates.ts、useSharedCover.ts 改为从公共层 import 类型，消除 pages 反向依赖 ## 验证 - `tsc --noEmit` / `eslint` / `prettier --check` / `vite build` 全部通过 - Vite 自动 code-split：CoverSelector 独立打包为 72KB 懒加载 chunk（不占用主 chunk） - 净代码：+2519/-2370 ≈ +149 行（主要是 CoverEditorModal 移动到公共目录时的文件复制+新增公共组件；原位置转为 re-export） ## 未改动 - UI 视觉与交互保持现有效果完全不变 - 封面模板数据仍通过 /api/v1/cover-templates 后端接口 CRUD，不改变 API 契约 - 批量封面的 generateAll/串行回写/函数式 updater 等逻辑完全保留 ## 依赖 基于 #2067（标题模板公共组件）之上，CI 全绿后按序合入。
xiaoxia changed target branch from develop to refactor/extract-title-template-shared-20260927 2026-09-27 21:42:02 +08:00
xiaoxia added 1 commit 2026-09-27 21:42:02 +08:00
refactor(shared): 抽取封面选择为公共组件CoverSelector，智能剪辑/AI数字人复用
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 1s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging 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 / 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 / Frontend Lint (pull_request) Successful in 1m43s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m56s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m2s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m3s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 3m27s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 4m7s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Failing after 4m50s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m58s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 10m20s
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 / CI Gate (pull_request) Failing after 1s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 8m35s
Details
f741a0e76e 
- 新增公共目录 src/components/cover/（在原 useSharedCover/cover.css 基础上补全）：
  - CoverSelector.tsx：公共主组件，支持inline/modal两种模式、props(showAutoGenerate/showTemplate/showUpload/canGenerate/aspectRatio/hint/onChange/onAutoGenerate/onTemplateChange等)，自管理loading/上传状态
  - CoverSettingsModal.tsx：封面模板选择弹窗（卡片网格+系统标签+编辑/删除）
  - CoverEditorModal.tsx：封面模板自定义编辑器（7面板：基础/人像/背景/主副标题/蒙版）
  - CoverModeSelector/FrameCoverPicker/UploadCoverPicker：子组件
  - types.ts：CoverTemplate/CoverEditorConfig/TextStyleConfig/ALL_FONTS等公共类型+默认值（从pages/generate/types/cover迁移）
  - uploadCover.ts：OSS直传公共工具(uploadCoverToOSS/uploadCoverWithPreview)，blob预览→OSS上传两阶段
  - cover.css：新增cs-*前缀样式，保证公共组件自带样式不依赖页面CSS
  - index.ts：barrel统一导出
- 智能剪辑 Step6CoverSettings：
  - 单视频场景改为使用公共CoverSelector（inline模式），自动生成/模板/上传/预览统一
  - 批量场景保留useBatchCovers+卡片网格逻辑，模板选择通过嵌入一个只开showTemplate的CoverSelector实现
  - props解构消除hooks exhaustive-deps警告
- AI数字人 ModalCoverSelect：
  - 由原来自行拼接布局+内联按钮+弹窗改为使用公共CoverSelector(modal模式)
  - 保持AiAvatarCoverConfig回调签名不变
- 旧路径（pages/generate/components/cover-settings/*、pages/generate/types/cover.ts）改为re-export wrapper，保持向后兼容
- api/cover-templates.ts 和 useSharedCover.ts 改为从公共层import类型，消除pages反向依赖
- tsc/eslint/prettier/vite build全通过，CoverSelector独立打包为72KB懒加载chunk
auto-approve-bot approved these changes 2026-09-27 21:42:07 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-09-27 21:42:08 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-09-27 21:42:15 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2070 | | 预览链接 | [https://pr-2070.preview.xiaoxiajianji.com](https://pr-2070.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
Some checks are pending
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 1s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging 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 / 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 / Frontend Lint (pull_request) Successful in 1m43s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m56s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m2s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m3s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 3m27s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 4m7s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Failing after 4m50s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m58s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 10m20s
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 / CI Gate (pull_request) Failing after 1s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 8m35s
Details
This pull request can be merged automatically.
You are not authorized to merge this pull request.
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin refactor/extract-cover-shared-20260927:refactor/extract-cover-shared-20260927
git checkout refactor/extract-cover-shared-20260927
Sign in to join this conversation.
Reviewers
No Reviewers
auto-approve-bot
Labels
Clear labels
architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot frontend-dev xiaoxia
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2070
Delete Branch "refactor/extract-cover-shared-20260927"

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?