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:
@@ -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 时警告用户 |
|
||||
|
||||
|
||||
Reference in New Issue
Block a user