需先定位QueryHistoryPanel时间轴真实渲染结构及封装方式（如antd、CSS-in-JS或自研），再通过className传入、styled封装、数据分组（注意时区统一）、hover事件代理、移动端响应式（min-height:44px、text-overflow等）系统定制。
怎么改 QueryHistoryPanel 的时间轴 CSS 类名
默认情况下，queryhistorypanel（比如在 apache superset 或某些 bi 工具的前端组件中）会用内置 css 类渲染时间轴，但不暴露直接覆盖的入口。你得先确认它是否基于 react-virtualized、ant-design 的 timeline，还是自研组件——不同来源，定制路径完全不同。
常见错误是直接在全局 CSS 里写 .ant-timeline-item 或 .query-history-time-item，结果没生效，因为组件用了 CSS-in-JS 或 Shadow DOM 封装。
- 先用浏览器 DevTools 定位真实渲染出的时间轴节点，看 class 名和父级 scope 属性（比如
data-reactroot或superset-12345） - 如果用的是 antd
Timeline，必须通过classNameprop 传入自定义类，并配合:global或!important（仅限非 CSP 环境） - 如果是 emotion/styled-components 封装的，得用
styled(QueryHistoryPanel)重写，不能靠外部样式表
useQueryHistory 返回的数据结构影响时间轴粒度
时间轴样式不只是视觉问题，还卡在数据组织方式上。比如 useQueryHistory 默认返回扁平数组，但时间轴需要按天/小时分组才能画出合理分段——如果你发现时间轴挤成一团或空白，大概率是数据没归组。
典型错误：直接把原始 queries 数组丢给 Timeline 组件，但它的 items prop 要求每个 item 带 label 和 dot 配置，而原始 query 对象只有 sql、start_time、duration_ms。
- 必须在调用
useQueryHistory后做一次 transform：groupByDay(queries)或用dayjs(query.start_time).format('YYYY-MM-DD')提取日期键 - 注意时区：后端返回的
start_time是 UTC，但用户看到的“今天”是本地时区，分组前务必统一时区，否则同一天的查询可能被拆到两天 - 性能敏感：如果历史记录超 200 条，别用
map + filter每次重算分组，缓存分组结果或用Map一次遍历完成
时间轴 hover 效果失效？检查事件代理和 z-index
加了 :hover { background: #f0f9ff; } 却没反应，不是 CSS 写错，而是时间轴项被包裹在 overflow: hidden 的容器里，或者 z-index 被其他浮层（比如 tooltip、dropdown）压住。
另一个高频坑：时间轴用了虚拟滚动（如 FixedSizeList），hover 状态依赖 item 的 key 稳定性。如果每次 render 都生成新对象作为 item，React 会销毁重建 DOM 节点，hover 状态无法保持。
- 确保每个时间轴项的
key是稳定 ID（比如query.id），而不是index或Math.random() - 检查父容器是否有
pointer-events: none或contain: paint，这两者会拦截鼠标事件 - 用
getBoundingClientRect()测下实际可交互区域，有时 padding/margin 导致视觉区域和可点击区域错位
移动端时间轴文字截断与点击热区太小
桌面端看着正常的时间轴，在手机上点不动、文字糊成一团，核心原因是没处理响应式断点和 touch target 最小尺寸（iOS/Android 要求 ≥44px）。
错误做法是只加 @media (max-width: 768px) 改 font-size，但没调高行高和 padding，导致文字重叠、点击误触相邻项。
- 时间轴项高度至少设为
min-height: 44px，内边距用padding-block: 8px替代padding-top/bottom保证垂直居中 - SQL 片段这类长文本必须加
text-overflow: ellipsis，但要配合white-space: nowrap和固定宽度容器，否则无效 - 避免在时间轴项里放
button或icon小于 24×24px，iOS Safari 会自动放大整个元素造成布局抖动
真正难的不是写几行 CSS，而是搞清这个时间轴到底属于谁的生态——是框架强制接管样式，还是你有完整控制权。没看清这点，所有样式补丁都是临时止血。
