Parabol项目中的Retro卡片提交按钮优化方案

背景介绍

在Parabol项目的Retro功能模块中，团队正在将卡片编辑功能迁移到TipTap富文本编辑器。这一变更带来了一个重要需求：需要重新设计卡片提交交互方式。传统上，按Enter键会直接提交卡片内容，但在富文本编辑场景下，Enter键更常用于换行操作。

用户体验设计

核心交互模式

新的设计方案采用了"显式提交"的交互模式，类似于便签纸的使用体验：用户可以在本地草拟内容，只有当确认完成后才正式提交到看板上。这种设计更符合Retro会议中逐步添加想法的场景需求。

不同阶段的行为差异

1. Reflect和Group阶段：

   • 新增卡片时会显示提交按钮
   • 内容未提交前，草稿会保存在本地存储中
   • 空内容卡片会自动隐藏或移除

2. 编辑已提交卡片：

   • 不显示提交按钮
   • 编辑内容自动保存
   • 失去焦点时自动保存修改

技术实现要点

前端组件设计

1. 提交按钮：

   • 使用向上箭头图标(arrow_upward)
   • 包含"Submit"提示文本
   • 状态管理：无内容时禁用(Slate 200背景)，有内容时启用(Sky 500背景)

2. 取消按钮(可选)：

   • 使用关闭图标(close)
   • 视觉样式：Slate 300背景，Slate 700文字

3. 占位文本：

   • 提示文字："Share your thoughts, press / for commands"

布局规范

• 按钮尺寸：紧凑型24px，图标18px
• 卡片高度动态调整，确保与元数据文本对齐
• 编辑状态下隐藏"查找相似卡片"功能按钮

性能优化考虑

• Reflect阶段需保持输入容器高度稳定，减少布局抖动
• 使用本地存储暂存未提交内容，提升响应速度

技术挑战与解决方案

1. 富文本编辑器集成：

   • 需要重写Enter键默认行为，从提交改为换行
   • 实现TipTap编辑器的自定义扩展

2. 状态管理：

   • 区分"草稿"和"已提交"状态
   • 实现自动保存与显式提交的混合模式

3. 响应式布局：

   • 动态计算卡片容器高度
   • 优化编辑状态下的UI重绘性能

扩展思考

这种显式提交的交互模式不仅适用于Retro功能，也可以扩展到Parabol的其他协作场景中。未来可以考虑：

1. 统一平台内的提交交互规范
2. 增加更多富文本编辑功能
3. 优化移动端适配方案

该方案通过精细的交互设计和稳健的技术实现，在保持产品简洁性的同时，提供了更符合用户心智模型的编辑体验。