Files

2026-03-28 10:40:43 +08:00

4.9 KiB

Raw Blame History

前端移除 Redis 监控适配 Implementation Plan

For agentic workers: REQUIRED: Use superpowers:executing-plans to implement this plan. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 在不改变前端路由与主要交互的前提下，将缓存监控页面从 Redis 专属视图调整为本地缓存监控视图，并保持缓存列表、键名列表、缓存内容与清理操作可用。

Architecture: 前端继续复用现有 /monitor/cache API 路径，不引入新的页面或状态管理。调整 monitor/cache/index.vue 的展示结构与文案，使其消费后端返回的本地缓存统计字段；list.vue 仅保留必要文案和联调适配，避免额外重构。

Tech Stack: Vue 2, Element UI, Axios, ECharts, Vue CLI

文件结构

需要修改

ruoyi-ui/src/views/monitor/cache/index.vue
ruoyi-ui/src/views/monitor/cache/list.vue
ruoyi-ui/src/api/monitor/cache.js

原则

不新增前端路由
不改接口地址
不引入新的前端测试框架
文案准确，但保持页面结构尽量稳定

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版本 -> 缓存类型
运行模式 保留
端口 -> 总键数
客户端数 -> 写入次数
运行时间(天) -> 命中次数
使用内存 -> 未命中次数
使用CPU -> 过期清理次数
内存配置 -> 监控采样时间 或 统计说明
Step 3: 调整 ECharts 数据绑定

this.commandstats.setOption({
  series: [{ data: response.data.commandStats }]
})

同时将第二张图从 “内存信息” 调整为更适合本地缓存统计的图表，比如“命中/未命中/过期”仪表或柱状图，但不要新增页面复杂度。

Step 4: 保证空数据也能渲染

要求：

commandStats 为空时页面不报错
cache.info 缺字段时不触发 parseFloat(undefined)
Step 5: 运行生产构建

Run: npm --prefix ruoyi-ui run build:prod

Expected: Build complete.

Step 6: 提交本任务

git add ruoyi-ui/src/views/monitor/cache/index.vue
git commit -m "调整前端缓存概览展示"

Task 2: 复核缓存列表页与接口适配

Files:

Modify: ruoyi-ui/src/views/monitor/cache/list.vue
Modify: ruoyi-ui/src/api/monitor/cache.js
Step 1: 确认接口层无需改路径，只做必要注释和兼容梳理

保持以下 API 不变：

getCache()
listCacheName()
listCacheKey(cacheName)
getCacheValue(cacheName, cacheKey)
clearCacheName(cacheName)
clearCacheKey(cacheKey)
clearCacheAll()

Step 2: 检查 list.vue 是否依赖 Redis 专属文案

重点确认：

成功提示文案仍然准确
nameFormatter、keyFormatter 继续适配缓存前缀
清理全部后是否需要主动清空右侧表单和中间列表
Step 3: 补最小交互修正

如果后端改为本地缓存后返回空列表，需要补以下保护：

this.cacheKeys = response.data || []
this.cacheForm = {}

避免清理后页面残留旧值。

Step 4: 重新运行生产构建

Run: npm --prefix ruoyi-ui run build:prod

Expected: Build complete.

Step 5: 提交本任务

git add ruoyi-ui/src/views/monitor/cache/list.vue ruoyi-ui/src/api/monitor/cache.js
git commit -m "完成前端缓存列表适配"

Task 3: 联调验证与测试进程收尾

Files:

Modify: ruoyi-ui/src/views/monitor/cache/index.vue
Modify: ruoyi-ui/src/views/monitor/cache/list.vue
Step 1: 启动前端开发服务联调缓存监控页

Run: npm --prefix ruoyi-ui run dev

Expected: 本地前端启动成功，可访问缓存监控页面。

Step 2: 联调验证页面

验证点：

缓存概览页可打开
图表能展示本地缓存统计
缓存列表能加载
点击缓存名称能加载键名
点击键名能查看内容
单项清理、按分类清理、全部清理都能成功提示
Step 3: 如需文案微调，仅做最小改动

禁止扩展：

不新增入口页面
不改路由结构
不改全局 store
不引入测试框架
Step 4: 停止前端测试进程

要求：联调完成后结束本任务启动的 Node 前端进程，不保留后台测试服务。

Step 5: 提交本任务

git add ruoyi-ui/src/views/monitor/cache/index.vue ruoyi-ui/src/views/monitor/cache/list.vue
git commit -m "完成前端缓存监控联调"

4.9 KiB Raw Blame History

前端移除 Redis 监控适配 Implementation Plan

文件结构

需要修改

原则

Task 1: 调整缓存概览页消费本地缓存字段

Task 2: 复核缓存列表页与接口适配

Task 3: 联调验证与测试进程收尾

4.9 KiB

Raw Blame History