为什么我从零重写我的邮件编辑器：从块到原子重写
Source: Dev.to
Introduction
嗨，大家好！
六年前，我推出了 MySigMail Card 作为商业产品。说实话，它并没有像我预期的那样起飞。我很难吸引足够的用户来维持其可持续性。最终，我失去了动力，放弃了它，转而专注于我的另一个开源项目 massCode。
多年来，这个项目一直积灰。但除了营销上的困难，它的核心架构里还埋着一个 定时炸弹——它完全基于 预设（Presets） 构建。
The Problem: The “Preset Trap”
在最初的版本中，如果用户想要一个标题，他们会拖拽一个 “Header Block”。如果想要推荐语，则拖拽一个 “Testimonial Block”。在底层，这些都是硬编码的 HTML 片段，结构非常僵硬。
这导致了多种 开发噩梦：
- 变体爆炸：想把图片放在右侧？我必须写一个新块。想要三列而不是两列？再写一个块。
- 维护上限：我成了瓶颈。用户请求的每一个 “小改动” 都需要我推送代码更新。
- 刚性数据结构：JSON 与视觉表现耦合，迁移时头疼不已。
The Solution: Embracing Atomic Design
我意识到，要让编辑器真正强大，必须把 布局（Layout） 与 内容（Content） 解耦。于是我抛弃了旧引擎，使用递归的层级系统重新构建：
- Block（根节点）：顶层区块包装器，负责全宽背景和垂直间距。
- Row（网格）：定义水平结构，管理列间距和移动端折叠逻辑。
- Cell（灵活容器）：控制对齐、尺寸，且 可以包含嵌套的 Row，从而实现复杂的多层网格结构。
- Atom（内容）：实际的元素：Text、Image、Button、Menu、Divider。
这种递归结构 (Block → Row → Cell → Row …) 意味着你不再局限于简单的列布局。你可以构建诸如 “侧边栏 + 主内容” 或复杂的产品网格，而无需写一行代码。
The Tech Stack
我希望这个版本现代、快速且对开发者友好：
- Vue 3（Composition API）：响应式、模块化的 UI。
- TypeScript：强大的数据模式，对复杂的邮件结构至关重要。
- Tailwind CSS：使用最新的 v4，提供极速的样式。
- Shadcn Vue：可访问的 UI 组件。
- Clean Email Output：生成可在 Outlook 中真正工作的生产级表格 HTML。
Why Open Source?
我正在以开源项目的形式公开构建（AGPL‑3.0）。
为什么？首先，我相信世界需要一个强大、可嵌入的邮件构建器，而不是被 每月 500 美元的 SaaS 订阅 锁住。
还有更深层的原因。我们正处在供应商锁定和中心化控制日益加剧的时代。由于地缘政治原因，整个地区可能被切断服务，导致开发者和用户陷入困境。软件应当跨越国界，保持可访问和可靠。
出于对开源的热情，我想提供一个真正独立的替代方案，让每个人都能使用强大且自托管的邮件编辑器。
Get Involved
如果你曾为僵硬的邮件模板苦恼，或想了解我们在 Vue 3 中如何处理复杂的拖拽功能，欢迎查看仓库：
我正在积极寻找对架构的反馈，欢迎任何人贡献代码！