183 lines
4.9 KiB
Markdown
183 lines
4.9 KiB
Markdown
# 前端移除 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: 先按新接口结构写静态映射草稿**
|
|
|
|
```js
|
|
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 数据绑定**
|
|
|
|
```js
|
|
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: 提交本任务**
|
|
|
|
```bash
|
|
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 不变：
|
|
|
|
```js
|
|
getCache()
|
|
listCacheName()
|
|
listCacheKey(cacheName)
|
|
getCacheValue(cacheName, cacheKey)
|
|
clearCacheName(cacheName)
|
|
clearCacheKey(cacheKey)
|
|
clearCacheAll()
|
|
```
|
|
|
|
- [ ] **Step 2: 检查 `list.vue` 是否依赖 Redis 专属文案**
|
|
|
|
重点确认：
|
|
- 成功提示文案仍然准确
|
|
- `nameFormatter`、`keyFormatter` 继续适配缓存前缀
|
|
- 清理全部后是否需要主动清空右侧表单和中间列表
|
|
|
|
- [ ] **Step 3: 补最小交互修正**
|
|
|
|
如果后端改为本地缓存后返回空列表，需要补以下保护：
|
|
|
|
```js
|
|
this.cacheKeys = response.data || []
|
|
this.cacheForm = {}
|
|
```
|
|
|
|
避免清理后页面残留旧值。
|
|
|
|
- [ ] **Step 4: 重新运行生产构建**
|
|
|
|
Run: `npm --prefix ruoyi-ui run build:prod`
|
|
|
|
Expected: `Build complete.`
|
|
|
|
- [ ] **Step 5: 提交本任务**
|
|
|
|
```bash
|
|
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: 提交本任务**
|
|
|
|
```bash
|
|
git add ruoyi-ui/src/views/monitor/cache/index.vue ruoyi-ui/src/views/monitor/cache/list.vue
|
|
git commit -m "完成前端缓存监控联调"
|
|
```
|