xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 11 Pull Requests 5 Actions 34.2k Packages Projects Releases 7 Wiki Activity

feat(web): 标题样式模板化 + 修复3个爆款预设bug #2014

Merged
auto-approve-bot merged 1 commits from feat/title-template-system into develop 2026-09-22 22:53:56 +08:00
Conversation 4 Commits 1 Files Changed 13
+1170 -17
xiaoxia commented 2026-09-22 22:40:59 +08:00
Owner
Copy Link
Copy Source

背景

参考「IP智能体设置→字幕设置→字幕模板」交互，把标题样式从固定10个预设升级为模板系统，同时修复3个线上bug。

Bug 修复

  1. 选预设后改字体/描边/阴影不生效（根因）：useTitleStyleUpdaters.applyPreset 把 snake_case 的 preset.style（stroke_width/shadow_offset_x/bg_enabled 等）直接 spread 到 camelCase 的 TitleSettings，导致细粒度字段实际没写到 state。新增 titleStyleConfigToCamel 做显式键名转换。
  2. 预设卡片"标题"两字大小不一/看不清：PresetGrid 按 preset 自身 size(44~80px) 渲染，视觉差异大。新增 buildPresetPreviewSettings 归一化到固定56号 + 描边/阴影/背景按比例缩放，canvas 宽度改为 120px。
  3. 选预设后描边宽度滑块调不动：与 bug1 同根因（snake→camel 没转，strokeWidth 一直是 preset 的大值）；同时修了 toggleStroke 开启时若 strokeWidth<2 自动给默认值4，确保滑块可见可调。

模板系统

  • 类型：@/components/title/template-types.ts TitleTemplate（id: sys:<key>/usr:<uuid>、name/description/emoji/isBuiltin/style/createdAt/updatedAt）
  • 持久化 hook：useTitleTemplates — localStorage xiaoxia.title.templates.v1，内置10个系统预设 + 自定义CRUD（新建/复制/更新/删除/导出JSON/导入JSON），跨 tab 同步
  • 选择器 TitleTemplateSelector：4列卡片网格，卡片含 Canvas 预览+系统/我的标签+选中勾+hover 显示编辑/复制/导出/删除；右上角「+ 新建模板」按钮
  • 编辑器 TitleTemplateEditor：左侧 320×180 实时预览 + 右侧复用 TitleStylePanel 细粒度调节（基础/描边/阴影/背景/排版/封面Tab全支持），顶部内联表单填 emoji/名称(必填)/描述(可选)
  • 入口接入：
    • 智能剪辑 GeneratePage → GenerateStepContent → Step4TitleSettings → TitleStylePanel（enableTemplates=true）
    • AI数字人 PanelTitleConfig → TitleStylePanel（enableTemplates=true）
    • 新增 applyTemplate 方法覆盖样式字段，保留 title/aiAutoSelect/coverTitle 不被清掉

截图要点

  • 弹窗选模板（卡片hover操作）
  • 编辑器左预览右参数
  • 保存时名称必填校验
  • 系统模板点「编辑」走"复制为我的"流程

不涉及

  • 后端API/数据库（首期模板存 localStorage，后续要云端同步再开接口）
  • TitlePresetsGrid.tsx 旧的"T"字符网格组件保留不删（已不被引用，留给以后做单字预览再用）

验证

  • tsc --noEmit 本次改动相关文件零错误
  • prettier 格式化
  • 浏览器手测（需要你本地跑起来看效果）
## 背景 参考「IP智能体设置→字幕设置→字幕模板」交互，把标题样式从固定10个预设升级为模板系统，同时修复3个线上bug。 ## Bug 修复 1. **选预设后改字体/描边/阴影不生效（根因）**：`useTitleStyleUpdaters.applyPreset` 把 snake_case 的 `preset.style`（stroke_width/shadow_offset_x/bg_enabled 等）直接 spread 到 camelCase 的 `TitleSettings`，导致细粒度字段实际没写到 state。新增 `titleStyleConfigToCamel` 做显式键名转换。 2. **预设卡片"标题"两字大小不一/看不清**：PresetGrid 按 preset 自身 size(44~80px) 渲染，视觉差异大。新增 `buildPresetPreviewSettings` 归一化到固定56号 + 描边/阴影/背景按比例缩放，canvas 宽度改为 120px。 3. **选预设后描边宽度滑块调不动**：与 bug1 同根因（snake→camel 没转，strokeWidth 一直是 preset 的大值）；同时修了 `toggleStroke` 开启时若 strokeWidth<2 自动给默认值4，确保滑块可见可调。 ## 模板系统 - **类型**：`@/components/title/template-types.ts` TitleTemplate（id: `sys:<key>`/`usr:<uuid>`、name/description/emoji/isBuiltin/style/createdAt/updatedAt） - **持久化 hook**：`useTitleTemplates` — localStorage `xiaoxia.title.templates.v1`，内置10个系统预设 + 自定义CRUD（新建/复制/更新/删除/导出JSON/导入JSON），跨 tab 同步 - **选择器 TitleTemplateSelector**：4列卡片网格，卡片含 Canvas 预览+系统/我的标签+选中勾+hover 显示编辑/复制/导出/删除；右上角「+ 新建模板」按钮 - **编辑器 TitleTemplateEditor**：左侧 320×180 实时预览 + 右侧复用 TitleStylePanel 细粒度调节（基础/描边/阴影/背景/排版/封面Tab全支持），顶部内联表单填 emoji/名称(必填)/描述(可选) - **入口接入**： - 智能剪辑 GeneratePage → GenerateStepContent → Step4TitleSettings → TitleStylePanel（enableTemplates=true） - AI数字人 PanelTitleConfig → TitleStylePanel（enableTemplates=true） - 新增 applyTemplate 方法覆盖样式字段，保留 title/aiAutoSelect/coverTitle 不被清掉 ## 截图要点 - 弹窗选模板（卡片hover操作） - 编辑器左预览右参数 - 保存时名称必填校验 - 系统模板点「编辑」走"复制为我的"流程 ## 不涉及 - 后端API/数据库（首期模板存 localStorage，后续要云端同步再开接口） - TitlePresetsGrid.tsx 旧的"T"字符网格组件保留不删（已不被引用，留给以后做单字预览再用） ## 验证 - [x] tsc --noEmit 本次改动相关文件零错误 - [x] prettier 格式化 - [ ] 浏览器手测（需要你本地跑起来看效果）
xiaoxia added 1 commit 2026-09-22 22:40:59 +08:00
feat(web): 标题模板系统 + 修复3个预设bug (#2003)
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 2s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2s
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m23s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m37s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m42s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m52s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m57s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 4m36s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 5m8s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m35s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 12m13s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 1s
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 11m3s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Failing after 35s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m6s
Details
566a728dda 
Bug 修复：
- useTitleStyleUpdaters.applyPreset：snake_case preset.style 错误 spread 到 camelCase
  TitleSettings 导致选预设后改字体/描边/阴影/背景等细粒度参数不生效，改用
  @/components/title/utils 的 titleStyleConfigToCamel 做显式键名转换
- toggleStroke：开启描边时若 strokeWidth<2 自动给默认值4，修滑块不可调
- PresetGrid 预览：原 width=100 按 preset 自身 size(44~80) 渲染，导致卡片中
  "标题"两字视觉大小不一、小的看不清。新增 buildPresetPreviewSettings 归一化
  到固定56号+描边/阴影/背景按比例缩放，canvas宽度改为120

标题模板系统（参考字幕模板交互）：
- 新建 @/components/title/template-types.ts TitleTemplate 类型（sys:/usr:双结构）
- 新建 useTitleTemplates hook：localStorage 持久化 + 内置10个预设系统模板 +
  自定义模板 CRUD（新建/复制/更新/删除/导出JSON/导入JSON）
- 新建 TitleTemplateSelector 弹窗：4列卡片网格，卡片含Canvas预览+系统/我的标签+
  选中勾+hover显示编辑/复制/导出/删除图标；顶部+新建模板按钮
- 新建 TitleTemplateEditor 编辑器：左侧320×180实时预览，右侧复用 TitleStylePanel
  细粒度调节，内联表单填emoji/名称(必填)/描述(可选)，保存自动写localStorage
- TitleStylePanel 新增 enableTemplates/onOpenTemplates/activeTemplateLabel 三个
  props，开启时旧PresetGrid隐藏，改为"标题模板"标签行+"选择模板"按钮
- generate 页入口：GeneratePage 增加 titleTemplateModalOpen 状态+TitleTemplateSelector，
  通过 GenerateStepContent/Step4TitleSettings 透传到 TitleStylePanel，选择模板后
  用新增的 applyTemplate 方法覆盖样式字段（保留title/aiAutoSelect/coverTitle）
- ai-avatar 入口：PanelTitleConfig 同样接入模板弹窗，选中后把 camelCase settings
  转回 snake_case 调 onUpdate

共 13 文件：6 新建 + 7 修改。TitleStylePanel 作为公共组件改完后，智能剪辑
和 AI数字人两个页面的字体/标题配置都通过弹窗选模板。
auto-approve-bot approved these changes 2026-09-22 22:42:52 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-09-22 22:42:52 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-09-22 22:42:58 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2014 | | 预览链接 | [https://pr-2014.preview.xiaoxiajianji.com](https://pr-2014.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
auto-approve-bot merged commit 90e1460a1b into develop 2026-09-22 22:53:56 +08:00
auto-approve-bot deleted branch feat/title-template-system 2026-09-22 22:53:58 +08:00
gitea-actions bot commented 2026-09-22 22:54:51 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2014 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
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
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2014
Delete Branch "feat/title-template-system"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?