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

feat(title): 标题模板 v3 重构 - 图片背景大卡片+独立编辑器 #2017

Merged
xiaoxia merged 1 commits from feat/title-template-v3-rebuild into develop 2026-09-23 13:55:54 +08:00
Conversation 2 Commits 1 Files Changed 8
+1023 -1132
xiaoxia commented 2026-09-23 13:07:20 +08:00
Owner
Copy Link
Copy Source

背景

PR #2014/#2016 的方案不符合最终视觉要求。按 sketch v3 重新实现：主面板只显示模板大卡片网格（图片背景+真实标题叠字），参数编辑独立到 Modal 编辑器。

核心改动

1. 主面板（模板模式）重构

  • 顶部标题栏「标题模板」+ 右上角紫色「+ 新建模板」按钮
  • 只展示「我的模板」「系统模板」两个分组的大卡片网格
  • 移除所有参数 Tab/控件（字体/字号/颜色/描边/阴影/背景/排版 全部从主面板消失）
  • 「我的模板」为空显示空状态
  • 网格响应式：minmax(180px,1fr) 自适应列数

2. 卡片 v3（对齐 IP 智能体字幕模板风格）

  • 3:4 竖版大卡片，圆角 14px
  • 预览区：真实人物/场景图片（3 张轮换）+ 暗色渐变遮罩（顶15%黑/中透明/底45%黑）+ 透明 Canvas 真实渲染字体/颜色/描边/阴影
  • 左上角彩色小标签（系统=紫 / 我的=绿），右上角紫色勾选圆圈
  • 选中：紫边(#6c5ce7)+紫影；hover：上浮+阴影
  • 底栏：emoji+名称+徽章 + 始终可见 4 等宽操作按钮（编辑紫色高亮，系统模板编辑/删除置灰）

3. 编辑器弹窗

  • 860px Modal 两栏
  • 左 300px：200×356(9:16)图片预览 + 图标/名称输入
  • 右：参数 Tab（基础/描边/阴影/背景/排版），复用 TitleStylePanel paramsOnly 模式
  • 底：取消/保存模板
  • 新建模板带入当前选中样式

4. 组件

  • TitleMiniPreview：新增 transparent/portrait props
  • TitleStylePanel：三态（默认/模板网格/paramsOnly），新增 FillPreview 自适配透明 Canvas
  • TitleTemplateEditor：重写左预览右参数布局
  • 删除 TitleTemplateSelector.tsx（旧弹窗选择器）
  • 新增 3 张示例图到 public/title-templates/

校验

  • tsc --noEmit 零新增错误
  • Prettier 格式化
  • 两入口（智能剪辑 Step4 + AI 数字人 PanelTitleConfig）props 兼容

文件

8 files changed, +1342 -1451

## 背景 PR #2014/#2016 的方案不符合最终视觉要求。按 sketch v3 重新实现：主面板只显示模板大卡片网格（图片背景+真实标题叠字），参数编辑独立到 Modal 编辑器。 ## 核心改动 ### 1. 主面板（模板模式）重构 - 顶部标题栏「标题模板」+ 右上角紫色「+ 新建模板」按钮 - 只展示「我的模板」「系统模板」两个分组的大卡片网格 - 移除所有参数 Tab/控件（字体/字号/颜色/描边/阴影/背景/排版 全部从主面板消失） - 「我的模板」为空显示空状态 - 网格响应式：minmax(180px,1fr) 自适应列数 ### 2. 卡片 v3（对齐 IP 智能体字幕模板风格） - 3:4 竖版大卡片，圆角 14px - 预览区：真实人物/场景图片（3 张轮换）+ 暗色渐变遮罩（顶15%黑/中透明/底45%黑）+ 透明 Canvas 真实渲染字体/颜色/描边/阴影 - 左上角彩色小标签（系统=紫 / 我的=绿），右上角紫色勾选圆圈 - 选中：紫边(#6c5ce7)+紫影；hover：上浮+阴影 - 底栏：emoji+名称+徽章 + 始终可见 4 等宽操作按钮（编辑紫色高亮，系统模板编辑/删除置灰） ### 3. 编辑器弹窗 - 860px Modal 两栏 - 左 300px：200×356(9:16)图片预览 + 图标/名称输入 - 右：参数 Tab（基础/描边/阴影/背景/排版），复用 TitleStylePanel paramsOnly 模式 - 底：取消/保存模板 - 新建模板带入当前选中样式 ### 4. 组件 - TitleMiniPreview：新增 transparent/portrait props - TitleStylePanel：三态（默认/模板网格/paramsOnly），新增 FillPreview 自适配透明 Canvas - TitleTemplateEditor：重写左预览右参数布局 - 删除 TitleTemplateSelector.tsx（旧弹窗选择器） - 新增 3 张示例图到 public/title-templates/ ## 校验 - tsc --noEmit 零新增错误 - Prettier 格式化 - 两入口（智能剪辑 Step4 + AI 数字人 PanelTitleConfig）props 兼容 ## 文件 8 files changed, +1342 -1451
xiaoxia added 1 commit 2026-09-23 13:07:20 +08:00
feat(title): 标题模板 v3 重构 - 图片背景大卡片+独立编辑器
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 / Check if frontend-only change (pull_request) Successful in 1s
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 / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker 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 / Frontend Lint (pull_request) Failing after 51s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m0s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m30s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m39s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m38s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 2m41s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 5m25s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m30s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 9m51s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Failing after 1s
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 9m8s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 5m24s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 5m59s
Details
43bdb7dd02 
按 sketch v3 重写标题模板交互：
- 主面板(enableTemplates=true)只展示大卡片网格（3:4竖版，minmax(180px,1fr)自适应）
- 卡片：图片背景(3张轮换) + 暗色渐变遮罩 + 透明Canvas真实字体渲染
- 左上角系统/我的彩色标签，右上角紫色勾选圆圈
- 底部始终可见 编辑/复制/导出/删除 4 按钮（编辑紫色高亮，系统模板编辑/删除置灰）
- 选中卡片：紫色边框(#6c5ce7)+紫色阴影；hover 轻微上浮+阴影
- 编辑器弹窗(860px)：左300px(9:16预览+名称输入) / 右参数Tab(基础/描边/阴影/背景/排版)
- 新建模板以当前选中模板样式为起点
- TitleMiniPreview 新增 transparent/portrait props 支持透明背景+竖屏比例
- TitleStylePanel 新增 paramsOnly 模式（仅渲染参数Tab，供编辑器右侧复用）
- 删除废弃 TitleTemplateSelector.tsx（PR#2014弹窗选择器）
- 公共组件两入口（智能剪辑Step4 + AI数字人PanelTitleConfig）无需额外改动
gitea-actions bot commented 2026-09-23 13:08:59 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2017 | | 预览链接 | [https://pr-2017.preview.xiaoxiajianji.com](https://pr-2017.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
xiaoxia merged commit 2b4bcefc57 into develop 2026-09-23 13:55:54 +08:00
gitea-actions bot commented 2026-09-23 14:01:53 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

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

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2017
Delete Branch "feat/title-template-v3-rebuild"

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?