feat(web): 标题模板内嵌面板——移除弹窗、卡片放大 #2016

Merged

xiaoxia merged 1 commits from feat/title-template-inline into develop 2026-09-23 10:31:51 +08:00

Conversation 4 Commits 1 Files Changed 7

+523 -151

xiaoxia commented 2026-09-23 09:50:24 +08:00

Owner

Copy Link

Copy Source

改动说明

staging 反馈：不要弹窗选模板，模板直接内嵌在 TitleStylePanel 预览下方，卡片做大做直观。

主要改动

1. TitleStylePanel 内嵌模板网格（核心）：

   • 移除「选择模板」按钮 + TitleTemplateSelector 弹窗入口
   • 模板卡片网格直接平铺在「预览标题文字」下方，始终可见可选
   • 分组「我的模板」/「系统模板」，右上角「+ 新建模板」紫色按钮
   • 新建模板时自动带入当前样式作为编辑起点

2. 卡片样式放大：

   • 上半 90px 深色 Canvas 预览区（大字「预览标题文字」，真实还原字体/颜色/描边/阴影/背景）
   • 下半 emoji + 模板名称
   • 左上系统/我的彩色标签，右上选中紫色单选圆点
   • hover 显示编辑/复制/导出/删除操作按钮（系统模板无编辑/删除）
   • 选中卡片紫色边框+浅紫底
   • 响应式列数：窄侧栏 2 列 / ≥1200px 3 列 / ≥1600px 4 列

3. 新建/编辑模板：保留 Modal 编辑器（左 320×180 预览 + 右侧 TitleStylePanel 参数调节），保存后自动应用

4. 两个入口同步改造：

   • 智能剪辑 Step4（GeneratePage → GenerateStepContent → Step4TitleSettings → TitleStylePanel）
   • AI 数字人 PanelTitleConfig（移除弹窗代码，直接走 onApplyTemplate camel→snake 回调）

5. 代码清理：移除 GeneratePage/PanelTitleConfig 中的 TitleTemplateSelector 弹窗 state+JSX，props 简化为 selectedTemplateId/onApplyTemplate

验证

• tsc --noEmit 本次改动文件零错误
• prettier 格式化通过
• 未改动业务逻辑、localStorage 模板持久化复用（key 仍是 xiaoxia.title.templates.v1，用户已有自定义模板不丢）

## 改动说明 staging 反馈：不要弹窗选模板，模板直接内嵌在 TitleStylePanel 预览下方，卡片做大做直观。 ## 主要改动 1. **TitleStylePanel 内嵌模板网格**（核心）： - 移除「选择模板」按钮 + TitleTemplateSelector 弹窗入口 - 模板卡片网格直接平铺在「预览标题文字」下方，始终可见可选 - 分组「我的模板」/「系统模板」，右上角「+ 新建模板」紫色按钮 - 新建模板时自动带入当前样式作为编辑起点 2. **卡片样式放大**： - 上半 90px 深色 Canvas 预览区（大字「预览标题文字」，真实还原字体/颜色/描边/阴影/背景） - 下半 emoji + 模板名称 - 左上系统/我的彩色标签，右上选中紫色单选圆点 - hover 显示编辑/复制/导出/删除操作按钮（系统模板无编辑/删除） - 选中卡片紫色边框+浅紫底 - 响应式列数：窄侧栏 2 列 / ≥1200px 3 列 / ≥1600px 4 列 3. **新建/编辑模板**：保留 Modal 编辑器（左 320×180 预览 + 右侧 TitleStylePanel 参数调节），保存后自动应用 4. **两个入口同步改造**： - 智能剪辑 Step4（GeneratePage → GenerateStepContent → Step4TitleSettings → TitleStylePanel） - AI 数字人 PanelTitleConfig（移除弹窗代码，直接走 onApplyTemplate camel→snake 回调） 5. **代码清理**：移除 GeneratePage/PanelTitleConfig 中的 TitleTemplateSelector 弹窗 state+JSX，props 简化为 selectedTemplateId/onApplyTemplate ## 验证 - tsc --noEmit 本次改动文件零错误 - prettier 格式化通过 - 未改动业务逻辑、localStorage 模板持久化复用（key 仍是 `xiaoxia.title.templates.v1`，用户已有自定义模板不丢）

xiaoxia added 1 commit 2026-09-23 09:50:24 +08:00

feat(web): 标题模板内嵌面板——移除弹窗选择，模板卡片网格平铺在预览下方（#2003 follow-up） ... 7e123de28b

- TitleStylePanel: 移除「选择模板」按钮+弹窗入口，模板卡片网格直接内嵌在预览下方始终可见
- 模板卡片放大（上半90px深色Canvas预览+下半emoji+name），hover显示编辑/复制/导出/删除，选中紫色高亮边框+单选圆点
- 「新建模板」按钮放在「我的模板」分组右上角，点击用 Modal 编辑器（左预览+右参数）
- 新建模板时自动带入当前样式作为起点
- GeneratePage/Step4/PanelTitleConfig: 移除 TitleTemplateSelector 弹窗逻辑，改走 onApplyTemplate 回调
- 面板宽度自适应：窄侧栏2列、宽面板1200px+3列、1600px+4列
- 系统模板（sys:）不可删除编辑，自定义模板（usr:）支持CRUD+导入导出（localStorage持久化）
- 修复activePreset/activeTemplate状态不同步问题

auto-approve-bot approved these changes 2026-09-23 09:51:57 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-09-23 09:51:57 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

gitea-actions bot commented 2026-09-23 09:52:29 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2016 | | 预览链接 | [https://pr-2016.preview.xiaoxiajianji.com](https://pr-2016.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

xiaoxia merged commit 6097dacbd3 into develop 2026-09-23 10:31:51 +08:00

gitea-actions bot commented 2026-09-23 10:32:35 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2016 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2016