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

feat(generate): 封面编辑器完整实现 — 7个面板全部控件 + 右侧画布实时预览 #2025

Merged
xiaoxia merged 1 commits from feat/cover-editor-full into develop 2026-09-24 11:28:37 +08:00
Conversation 4 Commits 1 Files Changed 4
+1477 -80
xiaoxia commented 2026-09-24 11:24:25 +08:00
Owner
Copy Link
Copy Source

封面编辑器完整实现

对照参考截图（原型/cover-editor-ref/ 11 张），staging 上只有空壳「暂无配置项」，本次把所有 7 个面板的控件全部做出来，右侧画布实时渲染。

0. 顶部

  • Modal 标题「自定义封面编辑器」
  • 模板名称输入框（placeholder「输入模板名称」）
  • 取消（ghost）+ 保存模板（紫色 primary）按钮

1. 基础设置（默认展开）

  • 背景模糊：Switch + 模糊度滑块（0-20，默认10）
  • 人物描边：Switch + 实线/虚线按钮组 + 颜色选择器（默认 #FFFFFF）+ 描边粗细滑块（0-20px，默认 8）
  • 文字自动拆分：Switch + 主标题最大字数滑块（1-15，默认4）+ 副标题最大字数滑块（1-20，默认10）

2. 人像设置（默认折叠）

  • 标题 +「已开启」+ Switch
  • 大小：Slider（0-100%，默认 80%）
  • 位置：X/Y InputNumber（支持小数，默认 50%）

3. 背景设置（默认折叠）

  • 标题 +「已开启」+ Switch
  • 大小：Slider（0-100%，默认 90%）
  • 位置：X/Y InputNumber

4. 主标题（默认展开）

  • 文字内容：只读浅蓝背景 div（非 input），下方灰色提示
  • 字体：Select（35种字体，预置字体绿●/系统字体蓝●），含类型说明文字
  • 字号：Slider（20-200px，默认 120）
  • 字重：Slider（100-1000，marks 100/500/700/900/1000，默认 700）
  • 文字方向：Radio 横排/竖排
  • 每行字数：Slider（1-20，默认 10）
  • 字符间距：Slider（-10-50px，默认 24）
  • 行间距：Slider（0-200px，默认 144）
  • 颜色/描边颜色/描边粗细：ColorPicker + Slider（默认 3px）
  • 多层阴影：紫色「+ 添加阴影层」+ 白色「预设效果」+ 「传统阴影」Switch
  • 位置：X/Y InputNumber（支持小数，默认 50/30）
  • 旋转角度：Slider（0-360°，默认 0）
  • 文字背景：Switch + 颜色选择器 + 透明度 + 形状下拉（矩形/自定义多边形，多边形有提示文字）+ 大小宽高 + 位置偏移 + 旋转

5. 副标题（默认展开）

结构与主标题完全一致，默认值不同（字号82/字重500/每行字数17/颜色白色/描边1px/位置50,70/文字背景黑色70%透明度矩形等）

6. 蒙版（默认折叠）

  • Switch + 「蒙版图片」+ 选择按钮 + 大小 + X/Y + 颜色 + 透明度 + 形状下拉

右侧画布实时预览

  • 9:16 竖版画布（225×400px）居中于浅灰背景
  • 人像区域：蓝色方块 + 8 个蓝色手柄（四角+四边中点）
  • 主/副标题：按字体/字号/字重/颜色/描边/阴影/位置/旋转实时渲染
  • 文字背景形状：矩形 div / 自定义多边形占位
  • 背景色块 + 蒙版遮罩
  • 3 个红色圆点装饰锚点

类型定义扩展

  • types/cover.ts 新增 TextDirection、TextBgShape、StrokeStyle、ShadowLayer、TextPosition、TextBackground、TextStyleConfig、CoverEditorConfig 等完整类型
  • 导出 PRESET_FONTS（3种预置）+ SYSTEM_FONTS（32种系统）= 35 种字体
  • 导出 DEFAULT_TITLE_CONFIG / DEFAULT_SUBTITLE_CONFIG / DEFAULT_EDITOR_CONFIG 默认配置常量
  • api/cover-templates.ts 将 config 类型从内联改为 CoverEditorConfig

修改文件

  • types/cover.ts：+275 行（类型定义）
  • CoverEditorModal.tsx：+919 行（完整重写）
  • api/cover-templates.ts：+46 行（config 类型更新）
  • generate.css：+200 行（xx-ce-* 样式）

验证

  • tsc --noEmit：零错误
  • eslint：零 warning
  • prettier：已格式化
  • vite build：成功
## 封面编辑器完整实现 对照参考截图（原型/cover-editor-ref/ 11 张），staging 上只有空壳「暂无配置项」，本次把所有 7 个面板的控件全部做出来，右侧画布实时渲染。 ### 0. 顶部 - Modal 标题「自定义封面编辑器」 - 模板名称输入框（placeholder「输入模板名称」） - 取消（ghost）+ 保存模板（紫色 primary）按钮 ### 1. 基础设置（默认展开） - **背景模糊**：Switch + 模糊度滑块（0-20，默认10） - **人物描边**：Switch + 实线/虚线按钮组 + 颜色选择器（默认 #FFFFFF）+ 描边粗细滑块（0-20px，默认 8） - **文字自动拆分**：Switch + 主标题最大字数滑块（1-15，默认4）+ 副标题最大字数滑块（1-20，默认10） ### 2. 人像设置（默认折叠） - 标题 +「已开启」+ Switch - 大小：Slider（0-100%，默认 80%） - 位置：X/Y InputNumber（支持小数，默认 50%） ### 3. 背景设置（默认折叠） - 标题 +「已开启」+ Switch - 大小：Slider（0-100%，默认 90%） - 位置：X/Y InputNumber ### 4. 主标题（默认展开） - **文字内容**：只读浅蓝背景 div（非 input），下方灰色提示 - **字体**：Select（35种字体，预置字体绿●/系统字体蓝●），含类型说明文字 - **字号**：Slider（20-200px，默认 120） - **字重**：Slider（100-1000，marks 100/500/700/900/1000，默认 700） - **文字方向**：Radio 横排/竖排 - **每行字数**：Slider（1-20，默认 10） - **字符间距**：Slider（-10-50px，默认 24） - **行间距**：Slider（0-200px，默认 144） - **颜色/描边颜色/描边粗细**：ColorPicker + Slider（默认 3px） - **多层阴影**：紫色「+ 添加阴影层」+ 白色「预设效果」+ 「传统阴影」Switch - **位置**：X/Y InputNumber（支持小数，默认 50/30） - **旋转角度**：Slider（0-360°，默认 0） - **文字背景**：Switch + 颜色选择器 + 透明度 + 形状下拉（矩形/自定义多边形，多边形有提示文字）+ 大小宽高 + 位置偏移 + 旋转 ### 5. 副标题（默认展开） 结构与主标题完全一致，默认值不同（字号82/字重500/每行字数17/颜色白色/描边1px/位置50,70/文字背景黑色70%透明度矩形等） ### 6. 蒙版（默认折叠） - Switch + 「蒙版图片」+ 选择按钮 + 大小 + X/Y + 颜色 + 透明度 + 形状下拉 ### 右侧画布实时预览 - 9:16 竖版画布（225×400px）居中于浅灰背景 - 人像区域：蓝色方块 + 8 个蓝色手柄（四角+四边中点） - 主/副标题：按字体/字号/字重/颜色/描边/阴影/位置/旋转实时渲染 - 文字背景形状：矩形 div / 自定义多边形占位 - 背景色块 + 蒙版遮罩 - 3 个红色圆点装饰锚点 ### 类型定义扩展 - `types/cover.ts` 新增 `TextDirection`、`TextBgShape`、`StrokeStyle`、`ShadowLayer`、`TextPosition`、`TextBackground`、`TextStyleConfig`、`CoverEditorConfig` 等完整类型 - 导出 `PRESET_FONTS`（3种预置）+ `SYSTEM_FONTS`（32种系统）= 35 种字体 - 导出 `DEFAULT_TITLE_CONFIG` / `DEFAULT_SUBTITLE_CONFIG` / `DEFAULT_EDITOR_CONFIG` 默认配置常量 - `api/cover-templates.ts` 将 `config` 类型从内联改为 `CoverEditorConfig` ### 修改文件 - `types/cover.ts`：+275 行（类型定义） - `CoverEditorModal.tsx`：+919 行（完整重写） - `api/cover-templates.ts`：+46 行（config 类型更新） - `generate.css`：+200 行（xx-ce-* 样式） ### 验证 - tsc --noEmit：零错误 - eslint：零 warning - prettier：已格式化 - vite build：成功
xiaoxia added 1 commit 2026-09-24 11:24:25 +08:00
feat(generate): 封面编辑器完整实现 — 7个面板全部控件 + 右侧画布实时预览
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
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 Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (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 / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (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 / Unit Tests (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 / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m43s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m46s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m44s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m1s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m14s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 2m12s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 4m31s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 5m9s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m5s
Details
AI Code Review / AI Code Review (pull_request) Successful in 7m0s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 4m26s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 11m18s
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
2ce07fa7bf 
- 基础设置：背景模糊/人物描边/文字自动拆分，各带开关+子控件（滑块/颜色选择器/按钮组）
- 人像设置：大小滑块 + X/Y 位置精确输入
- 背景设置：开关 + 大小 + 位置
- 主标题/副标题：文字内容只读框、字体下拉（35种字体，绿色=预置/蓝色=系统）、字号/字重滑块、文字方向、每行字数、字符间距、行间距、颜色/描边颜色/描边粗细、多层阴影（+添加阴影层+预设效果+传统阴影）、X/Y位置（精确小数）、旋转角度、文字背景（颜色/透明度/形状下拉含自定义多边形+大小+位置偏移+旋转）
- 蒙版：开关 + 蒙版图片选择 + 大小 + 位置 + 颜色 + 透明度 + 形状
- 右侧 9:16 画布实时渲染：人像占位（8蓝色手柄）、主/副标题（按所有样式属性）、背景、蒙版
- types/cover.ts 新增 CoverEditorConfig 及全部子类型（TextDirection/TextBgShape/StrokeStyle/ShadowLayer/TextStyleConfig 等）
- api/cover-templates.ts 更新 config 类型为 CoverEditorConfig
- tsc/eslint/prettier 全零错误零警告，vite build 成功
auto-approve-bot approved these changes 2026-09-24 11:26:26 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
gitea-actions bot commented 2026-09-24 11:26:40 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

🗑️ 预览环境已清理

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

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

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

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?