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

feat: 封面设置区域 UI 改造 - 两按钮方案 + 模板网格 + 编辑器 #1322

Closed
xiaoxia wants to merge 3 commits from feat/cover-settings-redesign into develop
pull from: feat/cover-settings-redesign
merge into: xiaoxia:develop
Conversation 6 Commits 3 Files Changed 8
+551 -155
xiaoxia commented 2026-08-09 16:15:11 +08:00
Owner
Copy Link
Copy Source

改动内容

替换 Step6 封面选择区域的三 tab 方案（智能封面/抽帧选封面/上传封面）为两按钮方案：

主要变更

  • 自动生成封面 按钮（紫色填充）- 点击后 AI 自动匹配封面
  • 封面设置 按钮（白色描边+齿轮图标）- 打开封面设置弹窗
  • 按钮下方显示已选模板名称
  • 封面预览区域保留

新增组件

  • CoverSettingsModal - 封面设置弹窗（4列模板网格卡片 + 选中高亮）
  • CoverEditorModal - 自定义封面编辑器弹窗（左侧折叠面板 + 右侧 9:16 画布预览）

技术细节

  • 后端封面模板 CRUD API 尚未就绪，前端使用 MOCK_COVER_TEMPLATES 提供 8 个示例模板
  • 两个弹窗均使用 V21 Modal + centered
  • 新增 CoverTemplate 类型接口
  • 追加约 170 行 CSS 样式（不影响旧 xx-cover-* 样式）

涉及文件

  • apps/web/src/pages/generate/components/Step6CoverSettings.tsx - 重写
  • apps/web/src/pages/generate/components/cover-settings/CoverSettingsModal.tsx - 新建
  • apps/web/src/pages/generate/components/cover-settings/CoverEditorModal.tsx - 新建
  • apps/web/src/pages/generate/hooks/useStep6Cover.ts - 更新
  • apps/web/src/pages/generate/constants.ts - 新增 mock 数据
  • apps/web/src/pages/editing-planner/types/cover.ts - 新增 CoverTemplate
  • apps/web/src/pages/generate/generate.css - 追加样式
## 改动内容 替换 Step6 封面选择区域的三 tab 方案（智能封面/抽帧选封面/上传封面）为两按钮方案： ### 主要变更 - **自动生成封面** 按钮（紫色填充）- 点击后 AI 自动匹配封面 - **封面设置** 按钮（白色描边+齿轮图标）- 打开封面设置弹窗 - 按钮下方显示已选模板名称 - 封面预览区域保留 ### 新增组件 - `CoverSettingsModal` - 封面设置弹窗（4列模板网格卡片 + 选中高亮） - `CoverEditorModal` - 自定义封面编辑器弹窗（左侧折叠面板 + 右侧 9:16 画布预览） ### 技术细节 - 后端封面模板 CRUD API 尚未就绪，前端使用 MOCK_COVER_TEMPLATES 提供 8 个示例模板 - 两个弹窗均使用 V21 Modal + centered - 新增 CoverTemplate 类型接口 - 追加约 170 行 CSS 样式（不影响旧 xx-cover-* 样式） ### 涉及文件 - `apps/web/src/pages/generate/components/Step6CoverSettings.tsx` - 重写 - `apps/web/src/pages/generate/components/cover-settings/CoverSettingsModal.tsx` - 新建 - `apps/web/src/pages/generate/components/cover-settings/CoverEditorModal.tsx` - 新建 - `apps/web/src/pages/generate/hooks/useStep6Cover.ts` - 更新 - `apps/web/src/pages/generate/constants.ts` - 新增 mock 数据 - `apps/web/src/pages/editing-planner/types/cover.ts` - 新增 CoverTemplate - `apps/web/src/pages/generate/generate.css` - 追加样式
xiaoxia added the frontendfeature labels 2026-08-09 16:15:11 +08:00
xiaoxia added 1 commit 2026-08-09 16:15:11 +08:00
feat: 封面设置区域 UI 改造
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 / 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 / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 43s
Details
CI/CD Pipeline / Unit 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 / Validate - Migration (alembic) (pull_request) Successful in 56s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 56s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 1m11s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 30s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 36s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m25s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m58s
Details
AI Code Review / AI Code Review (pull_request) Failing after 2m1s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m4s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 3m32s
Details
CI/CD Pipeline / Integration 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 / 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
CI/CD Pipeline / CI Gate (pull_request) Failing after 6s
Details
18c503e0af 
- 改造 Step6CoverSettings 顶层区域：删除三tab布局，改为双按钮+模板名+预览
- 新增 CoverSettingsModal 封面设置弹窗（4列网格模板卡片）
- 新增 CoverEditorModal 自定义封面编辑器弹窗（折叠面板+画布预览）
- 新增 CoverTemplate 类型定义及 MOCK_COVER_TEMPLATES 常量
- 更新 useStep6Cover hook 添加弹窗状态和模板操作方法
- 新增封面设置相关 CSS 样式
- TypeScript 编译通过，Prettier 格式化完成
xiaoxia added 1 commit 2026-08-09 16:30:04 +08:00
fix: 清理封面 hook 未使用的变量和导入，修复 Frontend Lint
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 / 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 / Check if frontend-only change (pull_request) Successful in 44s
Details
CI/CD Pipeline / Unit 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 / Validate - Migration (alembic) (pull_request) Successful in 57s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m1s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 1m5s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 45s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m35s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m51s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m12s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m0s
Details
AI Code Review / AI Code Review (pull_request) Failing after 3m44s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 4m33s
Details
CI/CD Pipeline / Integration 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 / 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
CI/CD Pipeline / CI Gate (pull_request) Failing after 5s
Details
b9144f7b97
xiaoxia added 1 commit 2026-08-09 16:50:51 +08:00
fix: 修复 CoverTemplate 导入路径，修复 TS type check 失败
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 / 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 / Validate - Type Check (mypy) (pull_request) Successful in 47s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 48s
Details
CI/CD Pipeline / Unit 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 / Validate - Migration (alembic) (pull_request) Successful in 55s
Details
AI Code Review / AI Code Review (pull_request) Failing after 1m39s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m41s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m48s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m5s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m29s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m51s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m45s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 4m20s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (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 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
CI/CD Pipeline / CI Gate (pull_request) Successful in 5s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 59s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m16s
Details
099134d88b
auto-approve-bot commented 2026-08-09 16:52:32 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

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

📊 审查概览

  • 整体评价：需修改
  • 建议级问题数量：1 个

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

  1. [apps/web/src/pages/generate/hooks/useStep6Cover.ts: 62-64] 模板选择逻辑未生效

    • 问题类型：逻辑bug
    • 问题描述：handleSelectTemplate 函数仅更新了组件内部的 selectedTemplateId 状态，但未调用 onCoverSettingsChange 将选中的模板配置应用到实际的 coverSettings 中。这导致用户在弹窗中选择模板后，封面配置并未更新，功能失效。
    • 修改建议：在 handleSelectTemplate 中查找对应的模板数据，并将其配置（如 background, portrait 等）合并到 coverSettings 中，然后调用 onCoverSettingsChange 更新状态。

  2. [apps/web/src/pages/generate/components/cover-settings/CoverEditorModal.tsx: 86] 编辑器复选框不可交互

    • 问题类型：逻辑bug
    • 问题描述：编辑器中的 "已开启" 复选框使用了 defaultChecked={false} 且没有绑定 state 和 onChange 事件。这意味着该复选框是静态的，用户点击它不会产生任何状态变化，无法保存开关状态。
    • 修改建议：引入 state 管理这些开关状态（例如 backgroundEnabled），并在 input 上添加 checked={state} 和 onChange={(e) => setState(e.target.checked)}。

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

  1. [apps/web/src/pages/generate/components/cover-settings/CoverEditorModal.tsx: 42] 保存逻辑不完整
    • 具体内容：handleSave 函数目前仅保存了模板的 name 字段。如果编辑器内增加了背景色、人像设置等配置项，需要确保这些配置项也被收集并传递给 onSave 回调，否则编辑功能将无法保存实际内容。

✅ 良好实践

  • 类型定义清晰，新增的 CoverTemplate 接口结构合理。
  • 使用 Mock 数据 (MOCK_COVER_TEMPLATES) 便于前端独立开发和调试。
  • CSS 样式组织良好，使用了语义化的类名。

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能无明显问题

🤖 由 AI 代码审查机器人自动生成 | 2026-08-09 08:52:31 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：2 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 1. **[apps/web/src/pages/generate/hooks/useStep6Cover.ts: 62-64] 模板选择逻辑未生效** - 问题类型：逻辑bug - 问题描述：`handleSelectTemplate` 函数仅更新了组件内部的 `selectedTemplateId` 状态，但未调用 `onCoverSettingsChange` 将选中的模板配置应用到实际的 `coverSettings` 中。这导致用户在弹窗中选择模板后，封面配置并未更新，功能失效。 - 修改建议：在 `handleSelectTemplate` 中查找对应的模板数据，并将其配置（如 background, portrait 等）合并到 `coverSettings` 中，然后调用 `onCoverSettingsChange` 更新状态。 2. **[apps/web/src/pages/generate/components/cover-settings/CoverEditorModal.tsx: 86] 编辑器复选框不可交互** - 问题类型：逻辑bug - 问题描述：编辑器中的 "已开启" 复选框使用了 `defaultChecked={false}` 且没有绑定 `state` 和 `onChange` 事件。这意味着该复选框是静态的，用户点击它不会产生任何状态变化，无法保存开关状态。 - 修改建议：引入 state 管理这些开关状态（例如 `backgroundEnabled`），并在 `input` 上添加 `checked={state}` 和 `onChange={(e) => setState(e.target.checked)}`。 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/components/cover-settings/CoverEditorModal.tsx: 42] 保存逻辑不完整** - 具体内容：`handleSave` 函数目前仅保存了模板的 `name` 字段。如果编辑器内增加了背景色、人像设置等配置项，需要确保这些配置项也被收集并传递给 `onSave` 回调，否则编辑功能将无法保存实际内容。 ### ✅ 良好实践 - 类型定义清晰，新增的 `CoverTemplate` 接口结构合理。 - 使用 Mock 数据 (`MOCK_COVER_TEMPLATES`) 便于前端独立开发和调试。 - CSS 样式组织良好，使用了语义化的类名。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能无明显问题 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-09 08:52:31 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
gitea-actions bot commented 2026-08-09 16:52:41 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

CI全绿，自动审批通过。

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
xiaoxia closed this pull request 2026-08-09 16:59:18 +08:00
xiaoxia commented 2026-08-09 16:59:27 +08:00
Author
Owner
Copy Link
Copy Source

✅ 已 squash merge 到 develop（commit 1986a9f8）。

修复了 CoverTemplate 导入路径错误（../../../../editing-planner/types → ../../../editing-planner/types），CI 全绿后合并。

✅ 已 squash merge 到 develop（commit 1986a9f8）。 修复了 CoverTemplate 导入路径错误（`../../../../editing-planner/types` → `../../../editing-planner/types`），CI 全绿后合并。
gitea-actions bot commented 2026-08-09 17:00:33 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1322 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
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 / 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 / Validate - Type Check (mypy) (pull_request) Successful in 47s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 48s
Details
CI/CD Pipeline / Unit 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 / Validate - Migration (alembic) (pull_request) Successful in 55s
Details
AI Code Review / AI Code Review (pull_request) Failing after 1m39s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m41s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m48s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m5s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m29s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m51s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m45s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 4m20s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (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 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
CI/CD Pipeline / CI Gate (pull_request) Successful in 5s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 59s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m16s
Details

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No Reviewers
auto-approve-bot
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 feature frontend
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#1322
Delete Branch "feat/cover-settings-redesign"

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?