Gamma复刻之卡片重要交互分析

从2023年开始陆陆续续花了很多业余时间，复刻了Gamma这款产品，给它起来一个新的名字MediaHub。Gamma的伟大之处在于它能够把文档、PPT（简单版）、网页融为一体，让你能够写出漂亮的文档，这样可以把文档也能用来演示，在很多场景就不用专门来做个PPT了。MediaHub整体效果图（功能仅仅简单实现，技术方案跑通而已）：

MediaHub一个非常重要的设计是卡片，把你想表达的内容放到一个卡片中，类似一页PPT，不同之处在于它是无界的，可以像写文档一样写一个交互简单的PPT。

我们今天的重点是理解卡片设计的需求：

卡片的风格:把图片和富文本融合为一体，可以设置图片在不同的位置呈现：

当然也可以不设置任何图片，单纯的与富文本一样的效果。

卡片的大小：可以给卡片设置固定的宽高，这样可以保证演示模式或导出的效果更贴近PPT，写出的文档更美观。当然即使内容超出卡片的宽度也无所谓，因为MediaHub的一大特色就是无界。

样式设置，直接抄Gamma中常用的功能即可：

MediaHub计划支持：

1. 内容宽度(普通宽度或宽内容)

2. 背景色

3. 全出血卡片改为全屏卡片

4. 背景图，叠加效果先不做

5. 圆角设置（独有）

6. 卡片间距（独有）

页面设置，这个我认为比较重要，能够对所有的卡片进行全局设置，比如卡片的大小，背景色等。点击页面设置会以为抽屉的方式从右向左弹出一个菜单进行设计。类似这个：

还有一个重点是如何添加新的卡片，计划支持两种模式，直接添加空白卡片和从模板中添加。当hover到一个卡片上时显示：

至此，卡片的需求大的方向上基本上理解清楚了，当然重要交互细节我没写，这块直接实现即可，这也是做side project 比较自由的地方，不用为了完成PM的需求而做一些无用的逻辑，也不用为了一个小小的样式设计而浪费太多无用的时间，也不用为了照顾团队整体情况而用不想用的技术栈，一切以快速、低成本的方式来推进整体项目的节奏。接下来该通过代码来实现了。

一个人写这个项目非常孤独，可能某一天就坚持不下来了，故决定把整体设计思路与实现方案写出来。记录自己的思考。在技术方案上，基本都会采用开源方案，因为成本更低。