如何自定义查询历史记录面板的展示风格_时间轴样式设计

需先定位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，必须通过 className prop 传入自定义类，并配合 :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 状态无法保持。 Tellers AI Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。