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:
1 parent
6364a70215
commit
53c7d64b35
4 files changed
+164
-20
No files matched your search
Generated
+28
@@ -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,
|
||||
|
||||
Reference in new issue
Block a user