UI 实现：Airtable 风格的 Comments & Activity Timeline 渲染组件

[hotlong]

背景

@objectstack/spec 协议层已在 objectstack-ai/spec#731 中完成了所有 Feed/Comment/Chatter 协议的定义，包括：

• ✅ FeedItemSchema / MentionSchema / ReactionSchema / FieldChangeEntrySchema 数据模型 (src/data/feed.zod.ts)
• ✅ RecordSubscriptionSchema 通知订阅协议 (src/data/subscription.zod.ts)
• ✅ RecordActivityProps 增强版（unifiedTimeline, filterMode, commentInput, mentions, reactions, threading, subscriptionToggle）
• ✅ RecordChatterProps 完整定义（替代原来的 EmptyProps）— position/width/collapsible/feed
• ✅ IFeedService 服务契约 + Client SDK feed.* 命名空间
• ✅ Feed CRUD / Reactions / Subscribe API 端点约定
• ✅ 完整测试覆盖（feed.test.ts, subscription.test.ts, client.feed.test.ts, protocol-feed.test.ts）

当前 ObjectUI 缺失的是这些协议的 React 渲染实现。

目标

实现 Airtable/Salesforce 风格的 Activity Feed 侧边面板 UI 组件，消费 @objectstack/spec 中已定义的 Feed/Chatter 协议。

参考截图

对标 Airtable 的右侧 Activity 面板（评论 + 字段变更历史 + @Mentions + 通知订阅铃铛）

开发任务

P0 — 核心组件

• RecordActivityTimeline 组件 — 统一时间线渲染器

  • 根据 FeedItemType 渲染不同样式的 feed item（comment / field_change / task / event / system 等）
  • 支持 unifiedTimeline 模式：评论与字段变更混排（Airtable 风格）
  • 支持 filterMode 切换：all / comments_only / changes_only / tasks_only 下拉过滤
  • 支持分页加载（limit + cursor/hasMore）
  • Actor 头像 + 名称 + 来源 + 时间戳显示

• RecordChatterPanel 组件 — 侧边/行内/抽屉面板

  • 消费 RecordChatterProps 协议（position: sidebar/inline/drawer, width, collapsible, defaultCollapsed）
  • 内嵌 RecordActivityTimeline 作为 feed 子配置
  • 可折叠/展开

• CommentInput 组件 — 评论输入框

  • 底部 "Leave a comment" 富文本输入
  • 调用 client.feed.create() 提交评论
  • 支持 Markdown 基本格式

• FieldChangeItem 组件 — 字段变更历史条目

  • 渲染 FieldChangeEntrySchema：字段名 → 旧值 → 新值
  • 支持 oldDisplayValue / newDisplayValue 人类可读展示

P1 — @Mention & 通知

• MentionAutocomplete 组件 — @提及自动完成

  • 在 CommentInput 中输入 @ 时弹出用户/团队搜索下拉
  • 生成 MentionSchema 数据（type, id, name, offset, length）
  • 渲染已插入的 mention 为高亮链接

• SubscriptionToggle 组件 — 铃铛订阅开关

  • 消费 RecordSubscriptionSchema
  • 调用 client.feed.subscribe() / client.feed.unsubscribe()
  • 铃铛图标 + active/inactive 状态

P2 — Reactions & Threading

• ReactionPicker 组件 — Emoji 反应选择器

  • 显示已有 reactions（emoji + count）
  • 点击添加/移除 reaction
  • 调用 client.feed.addReaction() / client.feed.removeReaction()

• ThreadedReplies 组件 — 评论回复线程

  • 根据 parentId / replyCount 展示回复折叠
  • 点击展开子评论

P3 — 增强

• Comment 编辑/删除 — 已有评论的 edit/delete 操作
• 文件附件 — 评论中附加文件
• 富文本渲染 — Markdown body 渲染为 HTML

技术方案

• 组件放置位置建议：packages/plugin-detail/ 或新建 packages/plugin-feed/
• 使用 Shadcn UI + Tailwind CSS 实现
• 通过 @objectstack/client-react hooks 调用 Feed API
• 消费 @objectstack/spec 中的 Zod Schema 进行类型推导

协议参考

协议文件	位置	说明
FeedItemSchema	@objectstack/spec → src/data/feed.zod.ts	Feed 数据模型
RecordSubscriptionSchema	@objectstack/spec → src/data/subscription.zod.ts	通知订阅
RecordActivityProps	@objectstack/spec → src/ui/component.zod.ts L94-119	Activity 组件配置
RecordChatterProps	@objectstack/spec → src/ui/component.zod.ts L121-134	Chatter 面板配置
IFeedService	@objectstack/spec → contracts	服务契约接口
Client SDK	@objectstack/client → feed.*	API 调用层

关联

• 上游协议 Issue: objectstack-ai/spec#731（✅ 协议已完成）
• 示例集成位置: examples/crm/ — Lead Detail 页面已声明 record:activity 组件

建议开发流程

1. 每个组件完成后运行测试（pnpm test）
2. 完成后更新 roadmap
3. 建议分 PR 提交：P0 核心组件 → P1 Mention & 订阅 → P2 Reactions