fix(title): 标题模板v3全面审计修复——选模板预览不变/新建保存变白 #2020

Merged
xiaoxia merged 1 commits from fix/template-v3-audit into develop 2026-09-23 15:53:26 +08:00
Owner

修复内容

全面审计标题模板系统整条数据流,定位并修复以下 bug:

BUG-A(致命)新建模板保存后卡片显示白色

  • 根因:TitleTemplateEditor 组件内独立调用 useTitleTemplates(),与 TitleStylePanel 内的 hook 实例形成双实例状态孤岛;保存时只更新 editor 实例的 state+localStorage,同 tab 下 storage 事件不触发,TitleStylePanel 的 templates state 保持陈旧,导致卡片预览显示旧样式(初始白色而非保存后的黄色/编辑后的新颜色)
  • 修复:移除 TitleTemplateEditor 中独立的 useTitleTemplates() 调用,改为 onSave(data) 回调 props;所有 CRUD(createTemplate/updateTemplate)统一由 TitleStylePanel 的 hook 实例完成,彻底解决双实例不同步

BUG-B 选预设后位置被默认值覆盖

  • 根因:TITLE_PRESETS 的 BASE 对象缺 position 字段,选预设时 spread DEFAULT_TITLE_SETTINGS_FULL 后 position 变成 "top",与默认位置 "bottom" 不一致
  • 修复:BASE 增加 position: "bottom"

BUG-D 自定义颜色选择器无法点击

  • 根因:原生 <input type="color"> 始终 width:0/height:0,即使点「+」展开自定义也无法点击
  • 修复:展开时设为 28x28 可点击,选色后自动收起

其他修复

  • handleRequestCreate 改为构造草稿(空 id,不立即写入 localStorage),保存时再 createTemplate,避免打开编辑器就产生脏数据
  • 补充 package.json 中被代码引用但未显式声明的 classnames/dayjs 依赖
  • 新建模板草稿的编辑器标题显示「新建模板」

验证

  • tsc --noEmit 零错误
  • eslint 零警告
  • prettier 格式化

待 staging 验证场景

  • 选抖音爆款黄 → 视频标题显示黄字+黑描边
  • 选经典白字 → 显示白字+粗黑描边
  • 点+新建模板选黄色保存 → 卡片+预览都是黄色
  • 编辑已有自定义模板改颜色 → 卡片+预览立即更新
  • 刷新后自定义模板保留、样式正确
  • 黑金/霓虹/黑底白字/黄底黑字/温柔粉等所有系统预设样式正确
## 修复内容 全面审计标题模板系统整条数据流,定位并修复以下 bug: ### BUG-A(致命)新建模板保存后卡片显示白色 - **根因**:TitleTemplateEditor 组件内独立调用 useTitleTemplates(),与 TitleStylePanel 内的 hook 实例形成双实例状态孤岛;保存时只更新 editor 实例的 state+localStorage,同 tab 下 storage 事件不触发,TitleStylePanel 的 templates state 保持陈旧,导致卡片预览显示旧样式(初始白色而非保存后的黄色/编辑后的新颜色) - **修复**:移除 TitleTemplateEditor 中独立的 useTitleTemplates() 调用,改为 onSave(data) 回调 props;所有 CRUD(createTemplate/updateTemplate)统一由 TitleStylePanel 的 hook 实例完成,彻底解决双实例不同步 ### BUG-B 选预设后位置被默认值覆盖 - **根因**:TITLE_PRESETS 的 BASE 对象缺 position 字段,选预设时 spread DEFAULT_TITLE_SETTINGS_FULL 后 position 变成 "top",与默认位置 "bottom" 不一致 - **修复**:BASE 增加 position: "bottom" ### BUG-D 自定义颜色选择器无法点击 - **根因**:原生 `<input type="color">` 始终 width:0/height:0,即使点「+」展开自定义也无法点击 - **修复**:展开时设为 28x28 可点击,选色后自动收起 ### 其他修复 - handleRequestCreate 改为构造草稿(空 id,不立即写入 localStorage),保存时再 createTemplate,避免打开编辑器就产生脏数据 - 补充 package.json 中被代码引用但未显式声明的 classnames/dayjs 依赖 - 新建模板草稿的编辑器标题显示「新建模板」 ## 验证 - tsc --noEmit 零错误 - eslint 零警告 - prettier 格式化 ## 待 staging 验证场景 - [ ] 选抖音爆款黄 → 视频标题显示黄字+黑描边 - [ ] 选经典白字 → 显示白字+粗黑描边 - [ ] 点+新建模板选黄色保存 → 卡片+预览都是黄色 - [ ] 编辑已有自定义模板改颜色 → 卡片+预览立即更新 - [ ] 刷新后自定义模板保留、样式正确 - [ ] 黑金/霓虹/黑底白字/黄底黑字/温柔粉等所有系统预设样式正确
xiaoxia added 1 commit 2026-09-23 15:44:56 +08:00
fix(title): 标题模板 v3 全面审计修复——解决选模板预览不变/新建保存变白等问题
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 / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
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 / Retag skipped Staging API 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 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
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 45s
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 40s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 54s
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 58s
CI/CD Pipeline / Frontend Unit Tests (pull_request) Failing after 1m1s
CI/CD Pipeline / Validate - Style (pull_request) Successful in 5m0s
AI Code Review / AI Code Review (pull_request) Successful in 6m41s
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 7m10s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 7m36s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 32s
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 59s
CI/CD Pipeline / Validate - Security (pull_request) Successful in 16m12s
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / CI Gate (pull_request) Failing after 1s
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
577f0c58c5
核心问题:
1. TitleTemplateEditor 独立调用 useTitleTemplates(),与 TitleStylePanel 内的 hook 实例形成双实例状态孤岛——保存时只更新 editor 实例的 state 和 localStorage,同 tab 下 storage 事件不触发,导致 TitleStylePanel 的 templates state 陈旧,卡片显示旧样式(新建模板选黄色保存后卡片变白)
2. TITLE_PRESETS 的 BASE 对象缺 position 字段,选预设后 position 被 DEFAULT_TITLE_SETTINGS_FULL.position="top" 覆盖,与预期默认位置 bottom 不一致
3. ColorPicker 的原生 color input 始终 width:0/height:0,即使展开自定义颜色也无法点击

修复内容:
- 移除 TitleTemplateEditor 中的 useTitleTemplates 调用,改为 onSave(data) 回调 props;所有 CRUD 统一由 TitleStylePanel 的 hook 实例完成,彻底解决双实例不同步
- handleRequestCreate 改为只构造草稿(空 id,不写入 localStorage),保存时再 createTemplate,避免打开编辑器即产生脏数据
- TITLE_PRESETS BASE 加 position: "bottom",预设默认位置一致
- ColorPicker 展开自定义时原生 input 设为 28x28 可点击,选色后自动收起
- 补充 package.json 中缺失的 classnames/dayjs 显式依赖(被代码引用但未声明)

验证:
- tsc --noEmit 零错误
- eslint 零警告
- prettier 格式化
xiaoxia merged commit 445267a3b2 into develop 2026-09-23 15:53:26 +08:00

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2020 已关闭或合并,对应的预览环境已被清理。 > 如有需要,可以重新打开 PR 来重新生成预览环境。
Sign in to join this conversation.