ViGent2/Docs/DevLogs/Day27.md

Remotion 描边修复 + 字体样式扩展 + TypeScript 修复 (Day 27)

概述

修复标题/字幕描边渲染问题（描边过粗 + 副标题重影），扩展字体样式选项（标题 4→12、字幕 4→8），修复 Remotion 项目 TypeScript 类型错误。

---

✅ 改动内容

1. 描边渲染修复（标题 + 字幕）

• 问题: 标题黑色描边过粗，副标题出现重影/鬼影
• 根因: buildTextShadow 用 4 方向 textShadow 模拟描边 — 对角线叠加导致描边视觉上比实际 stroke_size 更粗；4 角方向在中间有间隙和叠加，造成重影
• 修复: 改用 CSS 原生描边 -webkit-text-stroke + paint-order: stroke fill（Remotion 用 Chromium 渲染，完美支持）
• 旧方案:

  textShadow: `-8px -8px 0 #000, 8px -8px 0 #000, -8px 8px 0 #000, 8px 8px 0 #000, 0 0 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3)`
  

• 新方案:

  WebkitTextStroke: `5px #000000`,
  paintOrder: 'stroke fill',
  textShadow: `0 2px 4px rgba(0,0,0,0.3)`,
  

• 同时将所有预设样式的 stroke_size 从 8 降到 5，配合原生描边视觉更干净

2. 字体样式扩展

标题样式: 4 个 → 12 个（+8）

ID	样式名	字体	配色
title_pangmen	庞门正道	庞门正道标题体3.0	白字黑描
title_round	优设标题圆	优设标题圆	白字紫描
title_alibaba	阿里数黑体	阿里巴巴数黑体	白字黑描
title_chaohei	文道潮黑	文道潮黑	青蓝字深蓝描
title_wujie	无界黑	标小智无界黑	白字深灰描
title_houdi	厚底黑	Aa厚底黑	红字深黑描
title_banyuan	寒蝉半圆体	寒蝉半圆体	白字黑描
title_jixiang	欣意吉祥宋	字体圈欣意吉祥宋	金字棕描

字幕样式: 4 个 → 8 个（+4）

ID	样式名	字体	高亮色
subtitle_pink	少女粉	DingTalk JinBuTi	粉色 #FF69B4
subtitle_lime	清新绿	DingTalk Sans	荧光绿 #76FF03
subtitle_gold	金色隶书	阿里妈妈刀隶体	金色 #FDE68A
subtitle_kai	楷体红字	SimKai	红色 #FF4444

3. TypeScript 类型错误修复

• Root.tsx: Composition 泛型类型与 calculateMetadata 参数类型不匹配 — 内联 calculateMetadata 并显式标注参数类型，defaultProps 使用 satisfies VideoProps 约束
• Video.tsx: VideoProps 接口添加 [key: string]: unknown 索引签名，兼容 Remotion 要求的 Record<string, unknown> 约束
• VideoLayer.tsx: OffthreadVideo 组件不支持 loop prop — 移除（该 prop 原本就被忽略）

4. 进度条文案还原

• 问题: 进度条显示后端推送的详细阶段消息（如"正在合成唇型"），用户希望只显示"正在AI生成中..."
• 修复: HomePage.tsx 进度条文案从 {currentTask.message || "正在AI生成中..."} 改为固定 正在AI生成中...

---

📁 修改文件清单

文件	改动
remotion/src/components/Title.tsx	buildTextShadow → buildStrokeStyle（CSS 原生描边），标题+副标题同时生效
remotion/src/components/Subtitles.tsx	buildTextShadow → buildStrokeStyle（CSS 原生描边）
remotion/src/Root.tsx	修复 Composition 泛型类型、calculateMetadata 参数类型
remotion/src/Video.tsx	VideoProps 添加索引签名
remotion/src/components/VideoLayer.tsx	移除 OffthreadVideo 不支持的 loop prop
backend/assets/styles/title.json	标题样式从 4 个扩展到 12 个，stroke_size 8→5
backend/assets/styles/subtitle.json	字幕样式从 4 个扩展到 8 个
frontend/.../HomePage.tsx	进度条文案还原为固定"正在AI生成中..."

---

🔍 验证

• npx tsc --noEmit — 零错误
• npm run build:render — 渲染脚本编译成功
• npm run build（前端）— 零报错
• 描边：标题/副标题/字幕使用 CSS 原生描边，无重影、无虚胖
• 样式选择：前端下拉可加载全部 12 个标题 + 8 个字幕样式