LokiStack

0 Fork 0

Files

T

opsx 53c7d64b35 feat(logs): 结果表虚拟滚动（@tanstack/react-virtual），>300 条时只渲染可视区

=== 一、为什么 ===
结果表原来是 entries.map 全量渲染真实 DOM。实测每条日志约 671B：
  1000 条页面 → 1000 个 DOM 节点，且大量消息带 whitespace-pre-wrap
  自动换行（Java 堆栈尤其长），浏览器需要排版全部行 → 滚动卡顿。
这是当前"每页条数"的真正瓶颈，比传 655KB 响应更影响体验。

=== 二、实现要点 ===
1. 新增 components/VirtualLogList.tsx
   - useVirtualizer（**独立滚动容器**，非 window 滚动）
     原因：window 虚拟滚动要把列表相对文档顶部偏移 scrollMargin 算准，
     上方工具条高度一变（快捷模板/域过滤条出现隐藏）就错位；
     独立容器内虚拟项位置只跟容器滚动量有关，不依赖页面布局。
   - 行高不一（消息会换行）→ 用 measureElement 实测每行高度
   - 容器 max-h-70vh，overscan 10
2. 抽公共行组件 LogRow，普通渲染与虚拟滚动**共用同一份 DOM 结构**，
   levelBadgeClass 逐字沿用原实现（含 info/warn/debug 配色），保证外观不变
3. 安全阀：VIRTUAL_THRESHOLD = 300
   - 默认每页 200 条仍走原来的普通渲染（行为已验证，零风险）
   - 用户主动把每页调到 500/1000 才启用虚拟滚动
4. 依赖：@tanstack/react-virtual ^3.14.23（package.json + lock 已更新，
   Docker 内 npm ci 可复现）

=== 三、验证 ===
- 本地 npx tsc -b --force 全量类型检查通过（rc=0）
- 产物 bundle 含 getVirtualItems / measureElement / getTotalSize
- 页面与主 JS 资源均 HTTP 200
- 平台健康 ok；hub latest 与 Pod digest 一致

镜像：lghost/lokistack:latest + v0.1 = sha256:25002cebc77c

2026-10-28 16:28:53 +00:00