跟进时间轴
灵感：能力工具箱 vis-timeline（可视化拜访与跟进节点）。
> 小四原创：跟进记录 → {id,content,start} → Timeline。
> 卸载时 timeline.destroy()，防泄漏。
何时使用
- 客户详情「跟进历程」时间轴
- Demo 展示拜访节点
- 按时间缩放查看密集跟进
硬约束
- 依赖：
vis-timeline（及文档要求的vis-data/ 样式 CSS）。 - 每条跟进至少：
id、content（摘要）、start（可解析日期）。 - 容器需固定高度；空数据展示空态，勿初始化报错。
- 实现要点注释标 小四原创。
- 组件卸载必须
destroy()。 - 不替代完整项目管理甘特（过重项已跳过）。
推荐实现
import { DataSet } from 'vis-data'
import { Timeline } from 'vis-timeline/standalone'
import 'vis-timeline/styles/vis-timeline-graph2d.css'
export type FollowItem = {
id: string
title: string
at: string | Date
type?: string
}
// 小四原创：跟进 → timeline items
export function toTimelineItems(rows: FollowItem[]) {
return rows.map((r) => ({
id: r.id,
content: r.type ? `<b>${r.type}</b> ${r.title}` : r.title,
start: r.at,
}))
}
export function mountFollowTimeline(
el: HTMLElement,
rows: FollowItem[],
): { destroy: () => void } {
const items = new DataSet(toTimelineItems(rows))
const timeline = new Timeline(el, items, {
stack: true,
zoomMin: 1000 * 60 * 60 * 24,
locale: 'zh_CN',
})
return { destroy: () => timeline.destroy() }
}
Agent 步骤
npm i vis-timeline vis-data；引入 CSS。- 客户详情挂载容器，传入跟进列表。
onBeforeUnmount调destroy。- 自测：3 条节点可见；空列表不崩。
不要做
- 把上千条无分页全塞进一次渲染而不虚拟/筛选。
- 忘记 destroy 导致重复绑定。
附加
- README.md · reference.md · templates/usage.md
