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
This commit is contained in:
opsx committed 2026-10-28 16:28:53 +00:00
1 parent 6364a70215
commit 53c7d64b35
4 files changed
+164 -20

No files matched your search

+28
View File
@@ -35,6 +35,7 @@
"@radix-ui/react-toggle": "^1.1.10",
"@radix-ui/react-toggle-group": "^1.1.11",
"@radix-ui/react-tooltip": "^1.2.8",
"@tanstack/react-virtual": "^3.14.23",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
@@ -2916,6 +2917,33 @@
"version": "0.3.0",
"license": "MIT"
},
"node_modules/@tanstack/react-virtual": {
"version": "3.14.23",
"resolved": "https://registry.npmmirror.com/@tanstack/react-virtual/-/react-virtual-3.14.23.tgz",
"integrity": "sha512-Oyy58qQwdaQieA+A4WUDtnh9D1rv5FZvGdw8og9Xeyh88V6HH94vMSyV5i9ATIbYNe9t5Ix0WXRo9NOTpHDkYw==",
"license": "MIT",
"dependencies": {
"@tanstack/virtual-core": "3.19.8"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/@tanstack/virtual-core": {
"version": "3.19.8",
"resolved": "https://registry.npmmirror.com/@tanstack/virtual-core/-/virtual-core-3.19.8.tgz",
"integrity": "sha512-Oz/SYBo/aVPyQkwtOw7Q23myITUgFIof2glQqydYJAPL6mH2SkJDkvDKZTklB+7gv5jGLZQhyTcd7SO1A1EODQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@types/babel__core": {
"version": "7.20.5",
"dev": true,