花野猫的plog制作器概要设计

redcanvas 原本的功能主要是制做封面图的，所以主要采用表单填写标题文字+上传图片的方式，生成一些固定版式的设计。但这种方式比较不灵活，不便于扩展。现在要改造为 plog 排版功能。不止于封面，还要能做 plog 。涵盖以下应用场景：

1. 产品宣传：产品介绍海报、每一页是一张产品操作说明等。用于将产品使用过程截图之后，配以文字进行注解
2. 日常记录：如记录风景等。
3. 社交媒体图文。
4. 图文学习笔记，支持渲染公式等。

参考的成品效果：图片素材收集 | 花野猫的数字花园。

其他的产品从来都不是图片编辑与排版相融合的。传统的图片编辑器、PPT 设计工具，在制作 plog 上面的问题是：不默认好看，搭配的变化需要人为做大量调整。本产品解决这个问题的方案是：提供默认好看的元素。围绕图片，采用算法，自动提取配色方案。设计效果由工具从配色等方面确保，不依赖于用户的设计经验。产品要做到让用户不用考虑手动去配色。只需要添加自己想要的元素，位置进行微调，即可完成创作。以图片为切入点。确保文字、背景与图片主色协调。

自动配色功能

1. 现有的配色 Tab，应加上提取后的配色方案的展示。提取出的配色方案应不止一种，可切换应用。现在的背景风格。应该作为背景的元素属性。没错，背景也作为一个元素。
2. 配色方案的选择，要确保既有浅色背景，又有深色背景。
3. 除了提取背景之外，还要预设一些漂亮的配色。参考图片里面的。

背景样式

除了支持渐变背景外，还要支持用全屏绝对定位的半透明颗粒PNG做噪点遮罩，通过mix-blend-mode: overlay叠加在页面所有内容上层，不改动底层色彩，统一给全部画面叠加胶片颗粒质感。提供预设的材质，材质图片素材在 transparenttextures.com 下载

配置元素属性功能

支持添加的元素：

• 背景
• 图片
• 文本框
• 时间戳
• 组件：组件是预设元素的组合，美观且方便批量添加。

1. 各类元素均支持选中、拖拽位置。元素选中后可以调整各种元素属性：图片支持配置圆角、阴影等。文字支持配置字体等。图片的元素属性里面，图片要支持更换（拖放、点击选择等）
2. 文本框支持选中后配置字体、大小等。
3. 背景的风格上，还要能加纹理，例如布纹背景
4. 还要能以照片底图为背景

字体支持

1. 添加小赖字体 https://cdn.jsdelivr.net/npm/@chinese-fonts/xiaolai@3.0.0/dist/Xiaolai/result.min.css

2. 变化维度主要是风格：风格绑定在元素上，例如文本框可以是不同风格，背景也可以是不同风格。但配色都是自动

3. 关于元素属性区域的布局：桌面端在预览区右侧。移动端用抽屉展示

4. 提供图片用作参考，不提供提示词，以免引偏。但是要能自动识别主色，生成精美的背景色等。提取出的配色方案要有多种可选。

5. 画布的宽高比例要能自定义。

6. 灵活性要强，支持拖拽排版，但默认好看。不再严格要求 title 等字段了，改用组合，用户想要什么元素，就直接往上加。模板和默认配置只在于提供样例。元素分为主图片、短文字、长文字（渲染 markdown 富文本）、图形素材（可位图可矢量图）几类。

7. 编辑功能要显得更加专业。

8. 还要考虑文字拖拽到图片上的情况。

9. 元素多了之后，是否要有图层的概念？尽量不要，背景之上，各个元素没必要重叠。如果重叠，文本必是出于最上层的。

10. 现在的明信片模板，应该用背景 + widget 来表达。内容是卡片，卡片配置各种字段（例如可以包含图片、文字等）后，就渲染成现在的结果。通过这种方式来支持特殊模板样式。

11. 图片宽度要支持占满画布，元素属性里面提供一个快捷的按钮吧

导入导出功能

1. 支持导入和导出配置。考虑到会有图片等素材，直接导入导出 zip

控件功能

控件是不能分开的，拖拽的时候也一起拖，每一个控件有字段组，必须保证美观，宁缺毋滥

非功能性需求

1. 项目内组件的可复用性要强。要有一个相对抽象的排版、编辑引擎。

todo

• 导出png 按钮应该放在导入和导出，存档读档的那两个按钮的旁边，另外把存档和读档那几个字去掉。