feat(ai-avatar): 封面预览实时显示标题叠加效果 + getRenderJob 60s 超时 #1860

Merged

auto-approve-bot merged 4 commits from feat/ai-avatar-cover-title-preview-v3 into develop 2026-09-11 15:00:23 +08:00

Conversation 4 Commits 4 Files Changed 4

+106 -7

xiaoxia commented 2026-09-11 14:50:40 +08:00

Owner

Copy Link

Copy Source

问题

1. 封面预览不显示标题文字效果

"封面&生成"面板智能封面/上传封面后只显示原始图片，标题配置（文字、字体、字号、颜色、粗斜体、描边、阴影、位置）效果无法在封面上看到。最终视频封面标题由后端 ffmpeg drawtext 叠加，前端需提供实时视觉预览。

2. getRenderJob 轮询 10s 超时

对口型+渲染链路耗时较长，getRenderJob 未显式设置 timeout 走 axios 默认 10s，控制台报 timeout of 10000ms exceeded 误报任务失败。（getLipsyncJob 之前已修 60s，getRenderJob 漏了）

修改（4 个文件，仅前端 ai-avatar 页面）

PanelCoverAndGenerate.tsx（核心）

• 新增 titleConfig prop
• 封面容器 position: relative；img aspect-ratio: 9/16; object-fit: cover; width: 100%; border-radius: 12px
• <img> 后新增绝对定位标题叠加层 <div>，根据 titleConfig 实时渲染：
  • 字体映射：思源黑体→Noto Sans SC、思源宋体→Noto Serif SC、楷体→KaiTi
  • 字号 size px、颜色 color、加粗 bold、斜体 italic
  • 位置：top 距顶 40px、center 居中 translate(-50%,-50%)、bottom 距底 40px、custom 用 pos_x/pos_y 百分比
  • 描边 stroke=true 用 -webkit-text-stroke（与阴影互斥）
  • 阴影 shadow=true 加 0 2px 8px 阴影；默认给轻微阴影保证白字在亮背景可读
  • wordBreak/whiteSpace 保证长文换行
• 智能选帧加载中显示半透明遮罩"⏳ 智能选帧中…"，标题层隐藏
• 无图/无文字/加载中不显示标题层；coverUrl 优先级 smart_cover_url > thumbnail_url > upload_url

api/aiAvatar.ts

• getRenderJob 加 { timeout: 60000 }（与 generateSmartCover 一致）

AiAvatarPage.tsx

• PanelCoverAndGenerate 调用处传入 titleConfig={state.titleConfig}

AiAvatar.css

• .aa-cover-preview border-radius 8→12px
• .aa-cover-preview img 增加 aspect-ratio:9/16 和 border-radius:12px
• 新增 .aa-cover-preview__loading 遮罩样式

不改动

• 其他页面/功能/后端
• 标题配置面板（PanelTitleConfig）本身交互
• 最终渲染后端逻辑（前端仅做视觉预览参考）

验收

1. ✅ 封面预览实时显示标题叠加，修改 titleConfig 即时反映
2. ✅ 竖屏 9:16 比例正确，border-radius 12px
3. ✅ 字体/字号/颜色/粗斜体/描边/阴影/位置与配置一致
4. ✅ getRenderJob timeout 60000，轮询不再 10s 超时
5. ✅ 仅改 ai-avatar 前端 4 个文件
6. CI 全绿

## 问题 ### 1. 封面预览不显示标题文字效果 "封面&生成"面板智能封面/上传封面后只显示原始图片，标题配置（文字、字体、字号、颜色、粗斜体、描边、阴影、位置）效果无法在封面上看到。最终视频封面标题由后端 ffmpeg drawtext 叠加，前端需提供实时视觉预览。 ### 2. getRenderJob 轮询 10s 超时 对口型+渲染链路耗时较长，getRenderJob 未显式设置 timeout 走 axios 默认 10s，控制台报 `timeout of 10000ms exceeded` 误报任务失败。（getLipsyncJob 之前已修 60s，getRenderJob 漏了） ## 修改（4 个文件，仅前端 ai-avatar 页面） ### PanelCoverAndGenerate.tsx（核心） - 新增 `titleConfig` prop - 封面容器 `position: relative`；img `aspect-ratio: 9/16; object-fit: cover; width: 100%; border-radius: 12px` - `<img>` 后新增绝对定位标题叠加层 `<div>`，根据 titleConfig 实时渲染： - 字体映射：思源黑体→Noto Sans SC、思源宋体→Noto Serif SC、楷体→KaiTi - 字号 size px、颜色 color、加粗 bold、斜体 italic - 位置：top 距顶 40px、center 居中 translate(-50%,-50%)、bottom 距底 40px、custom 用 pos_x/pos_y 百分比 - 描边 stroke=true 用 `-webkit-text-stroke`（与阴影互斥） - 阴影 shadow=true 加 0 2px 8px 阴影；默认给轻微阴影保证白字在亮背景可读 - wordBreak/whiteSpace 保证长文换行 - 智能选帧加载中显示半透明遮罩"⏳ 智能选帧中…"，标题层隐藏 - 无图/无文字/加载中不显示标题层；coverUrl 优先级 smart_cover_url > thumbnail_url > upload_url ### api/aiAvatar.ts - `getRenderJob` 加 `{ timeout: 60000 }`（与 generateSmartCover 一致） ### AiAvatarPage.tsx - PanelCoverAndGenerate 调用处传入 `titleConfig={state.titleConfig}` ### AiAvatar.css - `.aa-cover-preview` border-radius 8→12px - `.aa-cover-preview img` 增加 aspect-ratio:9/16 和 border-radius:12px - 新增 `.aa-cover-preview__loading` 遮罩样式 ## 不改动 - 其他页面/功能/后端 - 标题配置面板（PanelTitleConfig）本身交互 - 最终渲染后端逻辑（前端仅做视觉预览参考） ## 验收 1. ✅ 封面预览实时显示标题叠加，修改 titleConfig 即时反映 2. ✅ 竖屏 9:16 比例正确，border-radius 12px 3. ✅ 字体/字号/颜色/粗斜体/描边/阴影/位置与配置一致 4. ✅ getRenderJob timeout 60000，轮询不再 10s 超时 5. ✅ 仅改 ai-avatar 前端 4 个文件 6. CI 全绿

xiaoxia added 4 commits 2026-09-11 14:50:40 +08:00

feat(ai-avatar): 封面预览实时标题叠加 + getRenderJob 60s 超时 97bda32097

feat(ai-avatar): 封面预览实时标题叠加 + getRenderJob 60s 超时 f5a25c1a8d

feat(ai-avatar): 封面预览实时标题叠加 + getRenderJob 60s 超时 920d3c0344

feat(ai-avatar): 封面预览实时标题叠加 + getRenderJob 60s 超时 4e383850c8

gitea-actions bot commented 2026-09-11 14:52:59 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-09-11 14:53:00 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-09-11 14:53:00 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot merged commit 3cd8910f73 into develop 2026-09-11 15:00:23 +08:00

auto-approve-bot deleted branch feat/ai-avatar-cover-title-preview-v3 2026-09-11 15:00:23 +08:00

gitea-actions bot commented 2026-09-11 15:01:06 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

xiaoxia referenced this issue from a commit 2026-09-11 18:16:15 +08:00

fix: 补传 titleConfig prop（与 #1860 的 PanelCoverAndGenerateProps 对齐）

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#1860