PRODUCT LIFECYCLE
动态流Activity Feed
一条竖线串起时间倒序的事件列表，最新一条带脉冲点。用在仪表盘或团队页，证明「这里一直有人在用」。
效果预览
小林 上传了新版本 v2.32 分钟前
系统完成自动部署18 分钟前
你更新了定价页2 小时前
新增 12 位注册用户今天 09:20
适合用在哪
仪表盘「最近动态」、团队协作页的活动记录、项目管理的时间线。
容易踩的坑
- 多个圆点同时做无限脉冲，仪表盘上视觉噪音大且持续触发重绘。
- 只显示「刚刚」「3 小时前」相对时间，不提供 title 绝对时间，排查问题时无从核对。
- 动态条目没有链接到对应对象，用户看到变化却无法一键跳转查看。
设计提示词 · Prompt
动态流（Activity Feed）：容器 position:relative 并留左内边距 17px；用 ::before 画一条宽 1.5px 的浅灰竖线贯穿。每条是一个相对定位项，::before 画 8px 圆点（白底 + 2px 主色描边）压在线与内容的交点。最新一条的圆点填实色并用 box-shadow 扩散的 2s 脉冲动画提示「刚发生」。每条一行 10px 加粗的主语动作 + 一行 8.5px 浅灰时间。条目间距 10-12px，最多显示 6-8 条，底部给「查看全部」。
Activity Feed: the container is position:relative with 17px left padding; a ::before draws a 1.5px-wide light-gray vertical line running through it. Each item is a relatively positioned entry whose ::before draws an 8px dot (white fill + 2px primary border) sitting where the line meets the content. The newest item's dot is solid-filled and uses a 2s box-shadow spread pulse animation to signal "just happened". Each item has one 10px bold line for subject and action + one 8.5px light-gray timestamp line. Space items 10-12px apart, show at most 6-8, and add "View all" at the bottom.
常见搭配
同一页面里经常和「动态流」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="lc-feed">
<div class="lc-feed__i"><b>小林 上传了新版本 v2.3</b><span>2 分钟前</span></div>
<div class="lc-feed__i"><b>系统完成自动部署</b><span>18 分钟前</span></div>
<div class="lc-feed__i"><b>你更新了定价页</b><span>2 小时前</span></div>
<div class="lc-feed__i"><b>新增 12 位注册用户</b><span>今天 09:20</span></div>
</div>
</div>