5.6 KiB
前端缓存监控页适配内存缓存实施计划
For agentic workers: REQUIRED: Use superpowers:executing-plans to implement this plan in this repository. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: 调整前端缓存监控页面，使其不再展示 Redis 专属字段，而是展示后端返回的内存缓存统计信息，并保留缓存列表与清理交互。
Architecture: 保留现有缓存监控路由、API 文件和列表页交互，只更新首页统计面板与图表语义，确保最小改动完成页面适配。前端接口路径不变，主要改造点集中在 monitor/cache/index.vue。
Tech Stack: Vue 2, Element UI, ECharts, Node.js, npm
文件结构
Modify:
ruoyi-ui/src/views/monitor/cache/index.vueruoyi-ui/src/views/monitor/cache/list.vueruoyi-ui/src/api/monitor/cache.js
Verify against:
ruoyi-admin/src/main/java/com/ruoyi/web/controller/monitor/CacheController.java
Task 1: 调整缓存监控首页文案与字段映射
Files:
-
Modify:
ruoyi-ui/src/views/monitor/cache/index.vue -
Step 1: 先根据后端新结构补充页面默认数据模型
将默认字段统一为：
cache: {
info: {
cache_type: "IN_MEMORY",
cache_mode: "single-instance",
key_size: 0,
hit_count: 0,
miss_count: 0,
expired_count: 0,
write_count: 0
},
dbSize: 0,
commandStats: []
}
- Step 2: 将页面文案从 Redis 语义改为内存缓存语义
替换方向：
-
Redis版本->缓存类型 -
运行模式->运行模式 -
数据库大小->总键数 -
命令统计->缓存统计 -
Step 3: 实现数据格式化方法
补齐：
-
formatCacheType -
formatCacheMode -
normalizeCacheData -
normalizeCommandStats -
formatSampleTime -
toNumber -
Step 4: 增加命中率计算和采样时间显示
hitRateText() {
const total = hitCount + missCount
return total ? ((hitCount / total) * 100).toFixed(2) + "%" : "0.00%"
}
- Step 5: 提交这一小步
git add ruoyi-ui/src/views/monitor/cache/index.vue
git commit -m "调整缓存监控页基础信息展示"
Task 2: 调整首页图表为内存缓存统计
Files:
-
Modify:
ruoyi-ui/src/views/monitor/cache/index.vue -
Step 1: 将图表数据源改为后端返回的
commandStats
约定图表项为：
-
hit_count -
miss_count -
expired_count -
write_count -
Step 2: 调整图表标题和标签
改造目标：
-
左侧图表展示“缓存统计分布”
-
右侧图表展示“命中概览”或“读写概览”
-
Step 3: 处理空数据场景
要求：
-
接口失败时页面不报错
-
图表可渲染空数据
-
采样时间回退为
- -
Step 4: 处理窗口 resize 与组件销毁
确保：
-
beforeDestroy中清理 resize 监听 -
销毁 ECharts 实例，避免重复初始化
-
Step 5: 提交这一小步
git add ruoyi-ui/src/views/monitor/cache/index.vue
git commit -m "调整缓存监控图表为内存统计"
Task 3: 验证缓存列表页和 API 保持兼容
Files:
-
Modify:
ruoyi-ui/src/views/monitor/cache/list.vue -
Modify:
ruoyi-ui/src/api/monitor/cache.js -
Step 1: 检查列表页是否依赖 Redis 专属字段
确认页面仅依赖：
-
缓存分类名称
-
key 列表
-
cacheValue 文本
-
Step 2: 如有需要，仅做兼容性最小调整
例如：
-
保证
cacheValue为字符串时可直接展示 -
保证刷新、清理按钮仍使用原接口路径
-
Step 3: 手工检查交互链路
检查：
-
左侧缓存分类加载
-
中间 key 列表加载
-
右侧缓存值展示
-
清理分类 / 清理 key / 清理全部
-
Step 4: 提交这一小步
git add ruoyi-ui/src/views/monitor/cache/list.vue ruoyi-ui/src/api/monitor/cache.js
git commit -m "校准缓存列表页内存缓存兼容性"
Task 4: 运行前端构建与页面冒烟
Files:
-
Modify if needed:
ruoyi-ui/src/views/monitor/cache/index.vue -
Modify if needed:
ruoyi-ui/src/views/monitor/cache/list.vue -
Step 1: 使用
nvm切换 Node 版本并安装依赖
Run:
cd ruoyi-ui
source ~/.nvm/nvm.sh
nvm use
npm install
Expected: 依赖安装成功，Node 版本符合项目要求
- Step 2: 运行前端生产构建
Run:
cd ruoyi-ui
source ~/.nvm/nvm.sh
nvm use
npm run build:prod
Expected: BUILD SUCCESS，无 ESLint / 编译错误
- Step 3: 联调缓存监控页面
配合后端启动后验证：
-
/monitor/cache/index页面可正常打开 -
/monitor/cache/list页面可正常打开 -
统计信息、图表、缓存值和清理操作正常
-
Step 4: 如果启动过前端开发进程，停止测试进程
结束 npm run dev 或其它前端测试进程，避免残留后台服务
- Step 5: 提交这一小步
git add ruoyi-ui/src/views/monitor/cache/index.vue ruoyi-ui/src/views/monitor/cache/list.vue ruoyi-ui/src/api/monitor/cache.js
git commit -m "完成缓存监控页内存缓存适配"
Task 5: 补充实施记录
Files:
-
Modify:
doc/2026-04-15-前端缓存监控页适配内存缓存实施计划.md -
Create or Modify:
doc/2026-04-15-前端缓存监控页适配内存缓存实施记录.md -
Step 1: 记录最终前端变更与验证命令
记录内容至少包括：
-
实际修改文件
-
nvm use结果 -
构建命令
-
页面冒烟结果
-
Step 2: 提交文档
git add doc/2026-04-15-前端缓存监控页适配内存缓存实施计划.md doc/2026-04-15-前端缓存监控页适配内存缓存实施记录.md
git commit -m "补充前端实施记录"