Data Display
活动流
一个按时间顺序排列的活动流，包含图标、参与者头像和操作链接。
作者：mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度beginner
英文提示词
Create an activity feed component showing a chronological list of events. Each item includes an actor avatar, an icon indicating the action type, a description line with clickable user and object names, and a relative timestamp. Use shadcn/ui Avatar and Tailwind CSS. Group items by date headers (Today, Yesterday) and add hover states on interactive parts.
中文提示词
创建一个按时间顺序显示事件列表的活动流组件。每个项目包含参与者头像、表示操作类型的图标、带可点击用户和对象名称的描述行以及相对时间戳。使用 shadcn/ui Avatar 和 Tailwind CSS。按日期分组（Today、Yesterday）并为交互部分添加悬停状态。
## 概述
一个用于仪表盘和社交应用的活动流。显示发生了什么、谁做的以及何时发生。
## 功能特性
- 按时间顺序排列的事件列表
- 参与者头像
- 操作类型图标
- 可点击实体链接
- 相对时间戳
- 日期分组标题
- 悬停状态
## 使用方法
将提示词复制到 v0 或 Cursor 中。将活动流连接到你的活动日志 API。
## 自定义选项
修改提示词以：
- 添加加载更多分页
- 按活动类型筛选
- 每个事件显示内联操作
- 添加实时更新