feat(ux): U1 虚拟滚动 — Pod/事件/审计/命令列表大数据量渲染优化
- 安装 @tanstack/react-virtual@3.14.4 - 新增 hooks/useVirtualRows.ts 可复用虚拟滚动 Hook - PodsTab: 全量渲染→虚拟滚动, 支持 1000+ Pod + 动态行高(展开行) - EventTable: 移除 maxRows=200 截断, 万级事件流畅渲染 - AuditOperationsTab: shadcn Table→虚拟滚动 CSS Grid 布局 - SessionCommandsPanel: 虚拟滚动, page_size 200→500 - npm run build ✅, tsc --noEmit ✅, 17/17 集成测试通过
This commit is contained in:
1 parent
e4f1018ca1
commit
f2069fe3f0
11 files changed
+673
-330
No files matched your search
+21
-4
@@ -219,9 +219,26 @@ services/api.ts (1324L)
|
||||
|
||||
## P3 — 用户体验提升
|
||||
|
||||
### U1: 虚拟滚动 [pending]
|
||||
- Pod 列表(1000+ Pod 场景)使用 `@tanstack/react-virtual`
|
||||
- 事件列表、审计日志列表
|
||||
### U1: 虚拟滚动 [done]
|
||||
|
||||
**问题**: Pod 列表(1000+ Pod)、事件列表(maxRows=200 截断)、审计日志列表在大数据量场景下渲染卡顿
|
||||
|
||||
**已完成 (2026-06-27)**:
|
||||
- ✅ 安装 `@tanstack/react-virtual@3.14.4`,新增 `hooks/useVirtualRows.ts` 可复用虚拟滚动 Hook
|
||||
- ✅ **PodsTab** (deployment-view): 从 `.map()` 全量渲染 → `useVirtualizer` + `measureElement` 动态行高,支持展开行,自动统计总数
|
||||
- ✅ **EventTable**: 移除 `maxRows=200` 截断限制 → 虚拟滚动渲染万级事件,CSS Grid 布局对齐表头
|
||||
- ✅ **AuditOperationsTab**: 从 shadcn `<Table>` 全量渲染 → 虚拟滚动 CSS Grid 布局,保留所有筛选/导出/详情功能
|
||||
- ✅ **SessionCommandsPanel**: 从 shadcn `<Table>` 全量渲染 → 虚拟滚动,page_size 从 200 提升至 500
|
||||
|
||||
**验收标准**:
|
||||
- [x] `@tanstack/react-virtual` 已安装并集成
|
||||
- [x] Pod 列表支持 1000+ Pod 虚拟滚动渲染(只渲染可见行 + overscan)
|
||||
- [x] 事件列表移除 maxRows 限制,万级事件流畅渲染
|
||||
- [x] 审计日志列表虚拟滚动(时间/用户/模块/操作/资源/IP/结果/详情)
|
||||
- [x] 会话命令列表虚拟滚动
|
||||
- [x] `npm run build` 零错误,`tsc --noEmit` 零错误
|
||||
- [x] 17/17 集成测试通过
|
||||
- [x] Docker 部署 healthy
|
||||
|
||||
### U2: 统一 DataTable 组件 [pending]
|
||||
- 封装排序/筛选/分页/导出/列自定义的通用表格
|
||||
@@ -250,7 +267,7 @@ services/api.ts (1324L)
|
||||
| A1 | K8s 路由统一 | P2 | **done** |
|
||||
| A2 | 告警引擎分布式 | P2 | **done** |
|
||||
| A3 | WebSocket 管理 | P2 | **done** |
|
||||
| U1 | 虚拟滚动 | P3 | pending |
|
||||
| U1 | 虚拟滚动 | P3 | **done** |
|
||||
| U2 | 统一 DataTable | P3 | pending |
|
||||
| U3 | 国际化 | P3 | pending |
|
||||
| U4 | 镜像优化 | P3 | pending |
|
||||
|
||||
Reference in new issue
Block a user