fix(cover): 修复封面编辑器多项bug；加长草稿保存/全局timeout #2032

Merged

auto-approve-bot merged 1 commits from fix/cover-editor-bugs-20260925 into develop 2026-09-25 01:02:15 +08:00

Conversation 4 Commits 1 Files Changed 6

+557 -479

xiaoxia commented 2026-09-25 00:50:06 +08:00

Owner

Copy Link

Copy Source

修复清单

Bug 6：封面模板无确认按钮 + 自动生成按钮不可点

• 根因：CoverSettingsModal 没有 footer 确认按钮，用户选完模板后只能点 X 关闭，体验上像"没选上"；「自动生成封面」按钮 disabled 条件是 !finalVideo，只有视频生成完成(finalVideo 存在)才可点，进入 Step5 时视频状态已就绪，按钮本身不会 disabled——问题出在用户卡在模板弹窗里没出来。
• 修复：
  1. 给 CoverSettingsModal 加底部『取消 / 确认应用』按钮；
  2. 选中模板时在缩略图右上角加紫色✓角标；
  3. 底部加一行紫色提示文案："点击卡片选中模板后，点确认应用即可使用"；
  4. 删掉原来的『选择素材文件/导出全部/导出』三个占位空按钮（没有 onClick 是死按钮）。

Bug 7：自定义封面编辑器主副标题输入不了 + 预览大黑框

• 根因 1（文字输入不了）：TextStylePanel 里主副标题显示的是 .xx-ce-readonly-text 只读 div，压根没有 input，用户完全无法修改文字。
• 根因 2（预览大黑框）：DEFAULT_EDITOR_CONFIG 默认 maskEnabled: true, maskColor: #000, maskOpacity: 100，一进编辑器黑色蒙版铺满整个画布；portraitEnabled 默认 true 也显示浅蓝矩形占位；.xx-ce-canvas 背景是 #ddd 灰色。整体看起来就是一个大黑框。
• 修复：
  1. 主副标题改用 antd Input.TextArea，可输入可计数（50字上限）；
  2. DEFAULT_EDITOR_CONFIG 调整：maskEnabled 默认 false（开启时 opacity 默认 40%）、portraitEnabled 默认 false、canvas 默认背景改深蓝渐变(#1a1a2e→#0f3460)；
  3. 重组左侧面板分组顺序为：基础设置 → 背景设置(默认展开) → 主标题(默认展开) → 副标题 → 人像 → 蒙版；
  4. 背景/人像支持上传图片预览；
  5. 预览文字按 charsPerLine 自动换行渲染；
  6. 打开弹窗时 useEffect 重置 state，防止编辑旧模板污染新模板状态；
  7. 补充 backgroundColor/backgroundImage/portraitImage 类型字段。

Bug 8：自动保存草稿 + 智能选片 10s 超时

• 根因：api/client.ts 全局 axios timeout 默认 10s，updateEditPlan/getEditPlan 走全局超时，素材/配置多时写入超过 10s 就被中断。智能选片 from-assets 之前已单独设 60s，无需改动。
• 修复：
  1. 全局 timeout 10s → 30s；
  2. updateEditPlan(草稿保存) 单独 60s；
  3. getEditPlan 单独 30s；
  4. 智能选片 from-assets 已是 60s、封面生成已是 300s，保持不变。

测试

• tsc --noEmit 通过
• eslint 无警告
• prettier --write 格式化

影响范围

apps/web/src/api/client.ts
apps/web/src/api/template-editor/editPlans.ts
apps/web/src/pages/generate/components/cover-settings/CoverEditorModal.tsx
apps/web/src/pages/generate/components/cover-settings/CoverSettingsModal.tsx
apps/web/src/pages/generate/generate.css
apps/web/src/pages/generate/types/cover.ts

## 修复清单 ### Bug 6：封面模板无确认按钮 + 自动生成按钮不可点 - **根因**：CoverSettingsModal 没有 footer 确认按钮，用户选完模板后只能点 X 关闭，体验上像"没选上"；「自动生成封面」按钮 disabled 条件是 `!finalVideo`，只有视频生成完成(finalVideo 存在)才可点，进入 Step5 时视频状态已就绪，按钮本身不会 disabled——问题出在用户卡在模板弹窗里没出来。 - **修复**： 1. 给 CoverSettingsModal 加底部『取消 / 确认应用』按钮； 2. 选中模板时在缩略图右上角加紫色✓角标； 3. 底部加一行紫色提示文案："点击卡片选中模板后，点确认应用即可使用"； 4. 删掉原来的『选择素材文件/导出全部/导出』三个占位空按钮（没有 onClick 是死按钮）。 ### Bug 7：自定义封面编辑器主副标题输入不了 + 预览大黑框 - **根因 1（文字输入不了）**：TextStylePanel 里主副标题显示的是 `.xx-ce-readonly-text` 只读 div，压根没有 input，用户完全无法修改文字。 - **根因 2（预览大黑框）**：DEFAULT_EDITOR_CONFIG 默认 `maskEnabled: true, maskColor: #000, maskOpacity: 100`，一进编辑器黑色蒙版铺满整个画布；portraitEnabled 默认 true 也显示浅蓝矩形占位；`.xx-ce-canvas` 背景是 #ddd 灰色。整体看起来就是一个大黑框。 - **修复**： 1. 主副标题改用 antd Input.TextArea，可输入可计数（50字上限）； 2. DEFAULT_EDITOR_CONFIG 调整：maskEnabled 默认 false（开启时 opacity 默认 40%）、portraitEnabled 默认 false、canvas 默认背景改深蓝渐变(#1a1a2e→#0f3460)； 3. 重组左侧面板分组顺序为：基础设置 → 背景设置(默认展开) → 主标题(默认展开) → 副标题 → 人像 → 蒙版； 4. 背景/人像支持上传图片预览； 5. 预览文字按 charsPerLine 自动换行渲染； 6. 打开弹窗时 useEffect 重置 state，防止编辑旧模板污染新模板状态； 7. 补充 backgroundColor/backgroundImage/portraitImage 类型字段。 ### Bug 8：自动保存草稿 + 智能选片 10s 超时 - **根因**：api/client.ts 全局 axios timeout 默认 10s，updateEditPlan/getEditPlan 走全局超时，素材/配置多时写入超过 10s 就被中断。智能选片 from-assets 之前已单独设 60s，无需改动。 - **修复**： 1. 全局 timeout 10s → 30s； 2. updateEditPlan(草稿保存) 单独 60s； 3. getEditPlan 单独 30s； 4. 智能选片 from-assets 已是 60s、封面生成已是 300s，保持不变。 ## 测试 - [x] tsc --noEmit 通过 - [x] eslint 无警告 - [x] prettier --write 格式化 ## 影响范围 apps/web/src/api/client.ts apps/web/src/api/template-editor/editPlans.ts apps/web/src/pages/generate/components/cover-settings/CoverEditorModal.tsx apps/web/src/pages/generate/components/cover-settings/CoverSettingsModal.tsx apps/web/src/pages/generate/generate.css apps/web/src/pages/generate/types/cover.ts

xiaoxia added 1 commit 2026-09-25 00:50:06 +08:00

fix(cover): 修复封面编辑器多项问题；加长草稿保存/全局timeout (#2033) ... 28a3353f7c

1. 封面设置弹窗(CoverSettingsModal):
   - 补充底部『取消/确认应用』按钮，解决选模板后无确认入口问题
   - 选中模板加紫色✓角标，空状态提示
   - 删除无效的『选择素材文件/导出全部』占位按钮

2. 自定义封面编辑器(CoverEditorModal):
   - 主/副标题文字改为可输入的TextArea(此前是只读div，完全无法输入)
   - 预览canvas修复：默认背景改为深蓝渐变而非大黑框；蒙版默认关闭且opacity=40%；
     人像默认关闭且占位用浅蓝；支持上传背景图/人像图
   - 面板分组按『基础/背景/主标题/副标题/人像/蒙版』重组，默认展开基础+背景+主标题
   - 新增backgroundColor/backgroundImage/portraitImage类型字段
   - 文字按charsPerLine自动换行渲染到预览
   - 打开弹窗时重置state，避免编辑旧模板污染新模板

3. API 超时调整:
   - 全局axios timeout 10s → 30s（解决智能选片/草稿保存偶发10s超时）
   - updateEditPlan(草稿保存) 单独60s
   - 智能选片from-assets已是60s、封面生成已是300s，保持不变

4. 类型/样式同步更新

auto-approve-bot approved these changes 2026-09-25 00:51:43 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-09-25 00:51:43 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

gitea-actions bot commented 2026-09-25 00:52:07 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot merged commit 54368c24ff into develop 2026-09-25 01:02:15 +08:00

auto-approve-bot deleted branch fix/cover-editor-bugs-20260925 2026-09-25 01:02:17 +08:00

gitea-actions bot commented 2026-09-25 01:03:09 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2032 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2032