feat(N4): virtual scrolling for Set/Zset/List editors

- Create VirtualScrollList.vue component using @tanstack/vue-virtual
  - Props: items, itemHeight, overscan, height
  - Events: scrollEnd (for infinite loading)
  - Slots: default (item rendering), empty
- SetEditor: replace v-for with VirtualScrollList, handles 100k+ members
- ZsetEditor: replace v-for with VirtualScrollList, preserves filter/sort
- ListEditor: replace pagination with virtual scroll + infinite loading
  - Initial load 100 items, auto-loads 100 more on scrollEnd
  - Shows loaded/total count + loading indicator
- HashEditor: kept as-is (HSCAN limits to 100 items, el-table handles fine)
- docs: mark N4 complete, update problem E priority to medium
This commit is contained in:
2026-07-12 15:04:08 +08:00
parent afe2894c35
commit ad21900a6f
5 changed files with 182 additions and 67 deletions
+2 -4
View File
@@ -131,18 +131,16 @@ async function safeInvoke<T>(fn: () => Promise<T>, errorMsg?: string): Promise<T
- SCAN 空模式规范化为 `'*'`
**仍存在的系统性问题**:
- 所有编辑器无虚拟滚动,数万条记录一次性渲染 DOM
- KeyList 树视图大数据量时渲染卡顿
- 无 SCAN 结果缓存,频繁切换 DB 重复扫描
- `scanKeys` 全量加载到前端,无分页/懒加载
**架构级方案**:
- 编辑器引入 `el-table-v2`(Element Plus 虚拟滚动表格)或自定义虚拟列表
- KeyList 树视图使用 `el-tree-v2`(虚拟滚动树)
- SCAN 结果分页:前端维护 cursor,滚动到底部加载下一页
- 连接级别的 SCAN 结果缓存(LRU)
优先级:**** -- 生产环境(百万级 key)下当前实现会卡死,这是用户最直接感知的性能问题。
优先级:**** -- 编辑器虚拟滚动已解决,剩余 KeyList 树视图和 SCAN 分页问题。
---
@@ -159,12 +157,12 @@ async function safeInvoke<T>(fn: () => Promise<T>, errorMsg?: string): Promise<T
| N16 | 主题完整适配 | P2#19 修复:ReJsonEditor `:theme="monacoTheme"` |
| N17 | i18n 补全 | P3#37 修复:KeyDetail/TitleBar/Sidebar 硬编码替换 |
| N25 | TypeScript 严格化(部分) | P3#36/42 修复:preload d.ts 15+ 处 any 消除 |
| N4 | 虚拟滚动 | 创建 `VirtualScrollList.vue`(@tanstack/vue-virtual);Set/Zset/List 编辑器改造完成 |
### 高优先级需求
| # | 需求 | 用户价值 | 复杂度 | 实现思路 |
|---|------|---------|--------|---------|
| N4 | **虚拟滚动** | 数万字段/成员不卡顿,生产环境刚需 | 中 | Hash/List/Set/ZsetEditor 用 `el-table-v2`;KeyList 用 `el-tree-v2` |
| N5 | **Stream Consumer Group 完整化** | ACK 已实现但未用,消费组可视化不全 | 中 | StreamEditor 接入 `redis:streamAck`;加 pending entries 列表、XPEL CLAIM 功能 |
| N3 | **CLI 事务体验优化** | 当前 MULTI/EXEC 功能正确但 UX 不佳(未显示 QUEUED 状态) | 低 | 事务模式下检查返回值是否为 "QUEUED",非 QUEUED 时警告用户 |