fix(font): 字体选择全场景修复 — AI数字人/Step3标题/封面编辑器 #2054
Merged
auto-approve-bot
merged 1 commits from 2026-09-26 16:56:22 +08:00
fix/font-selection-20260926 into develop
1 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 xiaoxia
|
2654c2afcc |
fix(font): 字体选择全场景修复 — AI数字人/Step3标题/封面编辑器
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 1s
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 1s
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m37s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m57s
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m59s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m4s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m15s
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 2m28s
CI/CD Pipeline / Validate - Style (pull_request) Successful in 2m53s
AI Code Review / AI Code Review (pull_request) Successful in 6m33s
CI/CD Pipeline / Validate - Security (pull_request) Successful in 6m40s
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / CI Gate (pull_request) Successful in 1s
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 5m21s
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 28s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 31s
根因分析：
1. AI数字人TitleStylePanel 传 enableTemplates=true 导致面板直接进入
「标题模板网格」分支，完全不渲染字体/字号/位置等参数Tab，用户看不到任何字体选择UI
2. 智能剪辑 GeneratePage 直接写了裸 prop `enableTemplates` 但没定义该变量
（TS不报错是因为之前 props 解构顺序导致引用了 formState 之外的全局？
实际效果是传了 undefined，面板落回默认模式但易出错），显式声明为 false
3. 项目零 @font-face/零字体文件，优设标题黑/阿里普惠体/抖音美好体等自定义
字体从未加载，浏览器直接 fallback 到 sans-serif，用户感知「切换字体没反应」
4. CoverEditorModal 的 PRESET_FONTS family 用的是不通用的英文引号/错误名字
（'DouYin MeiHaoTi'/'DouYu ZhuangGuangTi' 实际不存在），且和标题面板字体列表
不同步，两边视觉不一致
5. CSS .xx-ce-canvas>div { pointer-events:none } 把可拖拽的标题文字层也禁了，
封面预览文字无法响应mousedown拖拽（这是「文字拖拽不动」的另一个原因）
6. TitleMiniPreview 用Canvas绘制，Web Font异步加载，首次draw时字体还没就绪
先用sans-serif画完不重绘，视觉上「选了字体没反应」
修复：
- index.html: 引入Google Fonts CDN（Noto Sans SC / Noto Serif SC / ZCOOL
三款 / Ma Shan Zheng / Long Cang / Liu Jian Mao Cao / Zhi Mang Xing）
- components/title/constants.ts: FONT_OPTIONS family栈补全兜底字体链；
新增「站酷小薇体/马善政毛笔/龙藏体/流江毛笔草/志莽行书」5款可加载字体
- pages/generate/types/cover.ts: 重写PRESET_FONTS/SYSTEM_FONTS，复用统一family栈，
新增tag字段区分preset/hand/serif/sans/mono；删去不可用的「斗鱼追光体2.0」
- CoverEditorModal.tsx: 字体下拉合并ALL_FONTS、圆点颜色按tag区分；
文字层显式 pointer-events:auto 保证可拖拽；清理未使用import
- generate.css: 精准选择装饰层禁用pointer-events（不再一刀切xx-ce-canvas>div）；
新增hand/serif/mono三色字体圆点
- GeneratePage.tsx: 显式 const enableTemplates=false，JSX传参改为
enableTemplates={enableTemplates}
- PanelTitleConfig.tsx(AI数字人): enableTemplates 改 false，让AI数字人
标题面板正确渲染「预设+参数Tab」，字体/描边/阴影/排版参数全部可见
- TitleMiniPreview.tsx: useEffect里监听document.fonts.ready，字体加载完成后
重绘一次Canvas，避免首帧fallback sans-serif
|