这个效果是怎么做出来的
专注分段图的视觉是一排高低不一、颜色不同的竖条并排站在一起（flex 布局加 align-items: flex-end 底对齐），每一段代表一个时间区间，高度映射专注强度，颜色区分阶段类型——专注一段色、休息一段色、深度专注又是另一段色，扫一眼就能看出一天的状态起伏。
交互核心是滑动跟随：pointermove 时把触点横坐标换算成落在第几段，指示线用 transform: translateX 跟过去，顶部文字同步显示该段起始时刻和阶段名。这里有两个手感细节：换段时数字要有一个 150 毫秒的淡入切换而不是直接替换，指示线加一点弹簧过渡，拖起来才有「滑过刻度」的愉悦感而不是查表。手指按住时记得 setPointerCapture，滑出组件边界也继续跟手。
怎么用这条提示词
适合时间追踪类应用：专注记录、睡眠分期、会议日程回放。发给 AI 时给出你的分段数据结构（开始、结束、类型三个字段就够），它会生成高度和颜色的映射。想加图例的话补一句「顶部右侧放类型图例」。
想效果更好？试试这些
段与段之间留 2px 细缝，分界比连成一片清晰得多。颜色别超过四种，休息时段用最淡的一档，让专注段成为主角。滑动换段时如果相邻文字切换太快看不清，可以在同一段内只更新时刻、跨段才更新阶段名。时间轴下方加一排整点刻度，定位感立刻出来。移动端把换算用 e.clientX 减容器左边缘来做，别用 offsetX——兼容性差异会坑你一次。