Timeline
时间线
WebMobileDesktop上手难度: 中等
按时间顺序排列的一条线，最新的在最上面。
Live Demo
真的可以点完成清理 128 张重复照片
14:20
导出 2024 年度归档
10:05
开启 iCloud 同步
09:12
导入 342 张新照片
21:40
创建相簿「2024 旅行」
16:22
你刚才看到的这个：微信朋友圈、订单的物流轨迹、GitHub 的提交记录、系统更新的变更日志。
它到底是什么
Timeline 是「带时间的列表」。它比普通 List 多了两件事：明确的时间戳，以及视觉上的连续性（一条竖线串起来）。它表达的是「发生过一串事」。
时间线timeline时间轴动态活动记录feed
Anatomy · 它由什么组成
Time Group时间分组
「今天」「昨天」
Item条目
头像 + 内容
Rail时间轴
左侧竖线，贯穿全部
Dot节点
轴上的小圆点
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 事件有明确的时间顺序 | 用 |
| 需要体现过程和进展（物流、状态变化） | 用 |
| 内容是「发生过的」而非「当前的」 | 用 |
| 需要展示未来计划（时间倒计时） | 视情况 |
| 内容没有时间属性 | 不用 |
内容量大时，竖线会让页面很碎——考虑用 List 加时间戳。
时间相同的多个事件要合并，不要出现两个相同时间点。
Similar Patterns
别搞混一句话区分：按时间顺序排列的一条线，最新的在最上面。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
做一个时间线：按「今天 / 昨天 / 更早」分组，左侧一条竖线加节点，每条显示头像、内容和时间，新内容插在最上面。
不要只对 AI 说
Bad → Better不要这样对 AI 说
按时间顺序显示记录。
改成这样说
做 Timeline：按「今天/昨天/更早」分组、左侧竖线加节点圆点、sticky 日期分组标题、新条目插入时做高亮淡出动画、time 元素用 <time datetime> 便于语义。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。