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

Merged

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

Conversation 1 Commits 1 Files Changed 5

+1722 -3150

xiaoxia commented 2026-09-23 15:44:56 +08:00

Owner

Copy Link

Copy Source

修复内容

全面审计标题模板系统整条数据流，定位并修复以下 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 全面审计修复——解决选模板预览不变/新建保存变白等问题 ... 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

gitea-actions bot commented 2026-09-23 15:54:26 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

xiaoxia referenced this issue from a commit 2026-09-23 16:50:48 +08:00

fix(web): 同步 package-lock.json——classnames/dayjs 显式依赖导致 npm ci EUSAGE (#2020 后续)

xiaoxia referenced this pull request 2026-09-23 16:51:12 +08:00

fix(web): 同步 package-lock.json ——修复 CI Staging Web 镜像构建失败 (npm ci EUSAGE) #2021

Sign in to join this conversation.

Reviewers

No Reviewers

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

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2020