223 lines
10 KiB
Markdown
223 lines
10 KiB
Markdown
*** 项目要求 ***
|
||
一款以手机端为主、电脑端兼容的简易邀请函在线制作工具，无需安装、无需后端，打开浏览器即可使用。用户可上传背景图、添加文字、拖动位置，最终一键生成并保存完整邀请函图片。
|
||
核心功能
|
||
1. 设备适配
|
||
移动端优先设计，手机操作最流畅
|
||
电脑端完全兼容，可正常制作、编辑、保存
|
||
背景图自动适应屏幕大小，不变形、不拉伸
|
||
2. 预览区域规范
|
||
预览区域固定 3:5 比例
|
||
容器在页面居中显示，美观大方
|
||
背景图自适应铺满容器
|
||
3. 背景图上传
|
||
支持本地图片上传
|
||
支持 jpg /png/jpeg 格式
|
||
自动居左显示、自适应保留原有比例
|
||
4. 输入框功能
|
||
页面加载自动在右下角生成 2 个输入框，输入框为透明无边框设计
|
||
双击输入框 → 编辑文字
|
||
点击 / 长按输入框 → 可拖动位置
|
||
两个输入框完全独立，拖动互不影响
|
||
可随意拖拽到预览区域内任意位置
|
||
5. 操作交互优化
|
||
点击空白区域 → 自动取消输入框选中状态
|
||
未选中时无法编辑、无法拖动
|
||
避免误触、避免乱跑、避免重叠操作
|
||
6. 图片保存 / 导出（最重要）
|
||
电脑端：右键预览区域 → 自动合成并保存图片
|
||
手机端：长按预览区域 → 自动合成并保存图片
|
||
合成内容 = 背景图 + 所有输入框文字
|
||
输出一张完整的邀请函图片
|
||
***使用说明（最简流程）***
|
||
打开页面
|
||
上传背景图
|
||
双击输入框填写文字
|
||
单击输入框拖动到合适位置
|
||
电脑：右键保存图片
|
||
手机：长按保存图片
|
||
完成制作
|
||
|
||
## 要求记录
|
||
1. 打开项目即显示 3:5 空白面板，背景图自动覆盖容器、超出部分自动裁剪，不拉伸、不变形
|
||
2. 要求两个独立输入框，可双击编辑、可拖动，文字背景透明无边框，放置在右下角
|
||
3. 要求电脑端：右键预览区域可直接复制图片到剪贴板，移动端：长按预览区域可保存图片，操作简单，一键导出图片（复制 / 保存）
|
||
4. 预览的图片样式和保存的样式不一样，需要改成预览是什么样子，保存出来的图片内容就是什么样子
|
||
5. 要求鼠标右击或手机长按屏幕3：5预览区域时是保存图片的状态，点击其他区域不是保存状态
|
||
6. 要求图片和屏幕尺寸大小不一致时可在预览框中左右滑动图片调整位置，保持图片比例不变，点击空白处不选中任何输入框和图片状态，图片位置调整不影响文字编辑位置调整
|
||
7. 文本字体颜色为黑色，字体为 "微软雅黑"，字体大小为 16px，输入框放置在右下角
|
||
8. 打开项目时预览区域在屏幕居中显示，选择图片后图片在预览区居左显示，将底部请点击上方「添加图片」按钮上传背景图文字移到背景图预览白板提示中
|
||
9. 背景图选择后居左显示，图片原比例保存不变，可以左右滑动调节位置不能小于预览区宽度，预览区与图片合并到同一个图层中，不独立存在，以图片左右为边缘不溢出不拉伸，保持图片比例不变
|
||
10. 输入框与背景图完全隔离：输入框的文字编辑、拖动、内容溢出，仅改变输入框自身的位置/大小，不带动背景图偏移，不撑大预览容器，背景图的滑动调整，不影响输入框的位置、编辑状态，操作互不干扰
|
||
11. 添加图片尺寸不一致时可以左右滑动图片调整位置，并且图片反转拖拽
|
||
12. 电脑端右键保存/复制/预览图片，手机端长按屏幕弹窗保存/复制/预览图片，可预览
|
||
13. 顶部工具栏下方16px的位置，固定放置文本编辑器工具栏，加粗，斜体，字体颜色，字体，字号，可编辑文字样式
|
||
14. 字号逻辑调整，输入框字号只在自身原本字号上增减
|
||
15. 文本输入框添加辅助线，完善辅助线的吸附逻辑更加精准，辅助线颜色为红色
|
||
16. 顶部工具栏新增层叠图，可添加多张层叠图，单击选中状态可缩放删除自由移动位置，置于背景图之上，输入框与层叠图点击只能同时选中一个
|
||
17. 层叠图添加辅助线
|
||
18. 可添加多个文本框，以及文本框删除功能
|
||
19. 添加图片编辑器工具栏，图片编辑器与文本编辑器共用同一位置工具栏，选中对应元素切换对应编辑面板，点击空白处隐藏面板
|
||
20. 当选择文字的时候工具栏对应出现文字编辑器，当选择图片的时候工具栏对应出现图片编辑器，点击其他位置时隐藏工具栏，两个编辑栏的宽高保持和文本编辑器工具栏一致
|
||
21. 调整图文工具栏布局，解决顶部遮挡问题，图片透明度滑块添加百分比
|
||
22. 给背景图添加编辑器，与层叠图编辑器文本编辑器通用一个工具栏，背景图工具栏功能为：背景图可以放大缩小，可以调节透明度，其余功能不受影响，点击层叠图只显示当前编辑器工具栏
|
||
23. 校准画布编辑与图片导出文字垂直位置偏移问题，修改屏幕尺寸为960x1361像素
|
||
24. 添加新输入框，HTML文件里三个文本输入框改为随着添加背景图片后显示，三个输入框的位置分别为left：98px, top: 232.945px；left：98px, top: 275.555px；left：98px, top: 317.548px；
|
||
25. 适配网站子目录部署，项目路由静态资源路径改为 /tool/invitation-maker/
|
||
26. 严格按照输入框功能不变，在这个基础上将三个输入框原本的默认文本，改为占位符，提示语为"请输入"的要求改
|
||
27. 缩小背景图/层叠图/文本按钮宽度，优化手机端保存图片直接存入相册功能
|
||
28. 设置默认背景图，页面打开自动加载，保留原有功能，点击背景图按钮可更换
|
||
29. 将编辑器工具栏颜色，字体，字号间距缩小一些，美观大方
|
||
30. 缩小编辑器工具栏间距，适应小屏幕
|
||
31. 适配微信浏览器优化导出图片质量，优化画布尺寸计算逻辑以保持宽高比
|
||
32. 限制边界不强制吸附，优化移动端编辑交互逻辑，解决ios设备上键盘无法弹出的问题，优化统一桌面和移动端触摸编辑和键盘触发逻辑
|
||
33. 导出高清背景图文本的缩放计算逻辑，优化编辑栏固定与交互，改进字体加载和文本渲染逻辑，支持在选中元素上应用样式
|
||
34. 调整输入框位置，优化字体设置与选择器匹配逻辑，添加输入框字体加粗样式
|
||
35. 添加层叠图片旋转功能，为旋转滑动条添加0度，90度，-90度吸附功能，数值单独占位
|
||
36. 层叠图镜像功能，优化编辑器工具栏按钮样式间距，调整背景图缩放和透明度顺序
|
||
37. 项目添加撤销重做功能，检查修复撤销重做后背景图和文本位置显示异常问题，撤销重做按钮只需要点击一次就能执行操作
|
||
38. 优化撤销功能，优化顶部编辑栏按钮占位，优化撤销/重做按钮与文本按钮和保存/预览按钮的间距，文本按钮 ↔ [4px] ↔ 分隔线 ↔ 撤销按钮 ↔ [3px] ↔ 重做按钮 ↔ 分隔线 ↔ [4px] ↔ 保存按钮
|
||
39. 优化顶部工具栏样式，调整撤销重做按钮分隔栏边距，重构层叠图渲染到最终保存图片上的逻辑
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
## 🎨 UI/UX 优化
|
||
1. 加载状态提示
|
||
|
||
- 添加图片加载时的 loading 动画
|
||
- 保存图片时的进度提示
|
||
2. 空状态优化
|
||
|
||
- 没有背景图时的引导提示可以更丰富
|
||
- 添加示例模板供用户选择
|
||
3. 移动端适配
|
||
|
||
- 底部安全区域适配（iPhone 刘海屏）
|
||
- 横屏模式下的布局适配
|
||
## ⚡ 性能优化
|
||
4. 图片压缩
|
||
|
||
- 上传大图片时自动压缩，减少内存占用
|
||
- 使用 canvas 压缩而非原图保存
|
||
5. 防抖优化
|
||
|
||
- 滑动条调整时进一步减少重绘次数
|
||
- 拖拽时的性能优化
|
||
## 🛠️ 功能增强
|
||
6. 快捷键支持
|
||
|
||
- Delete 键删除选中元素
|
||
- Ctrl+S 保存
|
||
- 方向键微调位置
|
||
7. 图层管理
|
||
|
||
- 显示当前所有元素列表
|
||
- 图层顺序调整（置于顶层/底层）
|
||
8. 历史记录可视化
|
||
|
||
- 显示撤销/重做的操作描述
|
||
- 历史记录列表，可跳转到指定步骤
|
||
9. 导出选项
|
||
|
||
- 支持导出不同格式（JPG/PNG/PDF）
|
||
- 支持导出不同分辨率
|
||
10. 自动保存
|
||
|
||
- 本地存储自动保存编辑状态
|
||
- 刷新页面后恢复之前的工作
|
||
## 🔧 代码优化
|
||
11. 模块化重构
|
||
|
||
- 将功能拆分为独立模块
|
||
- 更好的代码组织和注释
|
||
12. TypeScript 迁移
|
||
|
||
- 添加类型检查，减少运行时错误
|
||
13. 测试覆盖
|
||
|
||
- 添加单元测试和 E2E 测试
|
||
## 🎯 核心功能增强
|
||
1. 模板系统
|
||
|
||
- 预设多种邀请函模板（婚礼、生日、商务等）
|
||
- 模板市场，可下载社区分享的模板
|
||
- 保存自定义模板
|
||
2. 更多元素类型
|
||
|
||
- 二维码生成器（可扫描添加联系方式/地址）
|
||
- 形状工具（圆形、矩形、线条装饰）
|
||
- 贴纸/图标库
|
||
- 日期选择器（自动格式化日期）
|
||
3. 高级编辑功能
|
||
|
||
- 多选元素（框选多个元素一起移动）
|
||
- 元素对齐工具（左对齐、居中、等间距分布）
|
||
- 复制/粘贴元素
|
||
- 元素锁定（防止误操作）
|
||
4. 文字增强
|
||
|
||
- 文字描边效果
|
||
- 文字阴影效果
|
||
- 竖排文字支持
|
||
- 文字弯曲/弧形排列
|
||
## 📱 交互增强
|
||
5. 手势操作
|
||
|
||
- 双指缩放画布
|
||
- 双指旋转元素
|
||
- 摇一摇撤销
|
||
6. 语音输入
|
||
|
||
- 语音转文字填入输入框
|
||
7. 实时协作
|
||
|
||
- 多人同时编辑同一张邀请函
|
||
- 分享编辑链接
|
||
## 💾 数据管理
|
||
8. 项目管理
|
||
|
||
- 保存多个邀请函项目
|
||
- 项目列表管理（重命名、删除、复制）
|
||
- 最近编辑记录
|
||
9. 云端同步
|
||
|
||
- 登录账号后云端保存项目
|
||
- 跨设备同步
|
||
10. 导入导出
|
||
|
||
- 导入 PSD/AI 文件
|
||
- 导出为可编辑格式（下次可继续修改）
|
||
## 🎨 视觉效果
|
||
11. 滤镜效果
|
||
|
||
- 背景图滤镜（黑白、复古、模糊等）
|
||
- 层叠图滤镜
|
||
12. 动画效果
|
||
|
||
- 保存前预览动画效果
|
||
- 元素入场动画
|
||
13. 主题系统
|
||
|
||
- 深色/浅色模式切换
|
||
- 节日主题皮肤
|
||
## 📤 分享功能
|
||
14. 一键分享
|
||
|
||
- 生成分享海报
|
||
- 生成小程序码
|
||
- 直接分享到微信/朋友圈
|
||
15. 统计功能
|
||
|
||
- 查看邀请函被查看次数
|
||
- RSVP RSVP 回复收集
|
||
## 🔒 安全与隐私
|
||
16. 隐私保护
|
||
- 密码保护邀请函
|
||
- 有效期设置
|
||
- 水印功能 |