236 lines
5.6 KiB
Markdown
236 lines
5.6 KiB
Markdown
# 前端缓存监控页适配内存缓存实施计划
|
||
|
||
> **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.vue`
|
||
- `ruoyi-ui/src/views/monitor/cache/list.vue`
|
||
- `ruoyi-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: 先根据后端新结构补充页面默认数据模型**
|
||
|
||
将默认字段统一为：
|
||
|
||
```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版本` -> `缓存类型`
|
||
- `运行模式` -> `运行模式`
|
||
- `数据库大小` -> `总键数`
|
||
- `命令统计` -> `缓存统计`
|
||
|
||
- [ ] **Step 3: 实现数据格式化方法**
|
||
|
||
补齐：
|
||
|
||
- `formatCacheType`
|
||
- `formatCacheMode`
|
||
- `normalizeCacheData`
|
||
- `normalizeCommandStats`
|
||
- `formatSampleTime`
|
||
- `toNumber`
|
||
|
||
- [ ] **Step 4: 增加命中率计算和采样时间显示**
|
||
|
||
```js
|
||
hitRateText() {
|
||
const total = hitCount + missCount
|
||
return total ? ((hitCount / total) * 100).toFixed(2) + "%" : "0.00%"
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 5: 提交这一小步**
|
||
|
||
```bash
|
||
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: 提交这一小步**
|
||
|
||
```bash
|
||
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: 提交这一小步**
|
||
|
||
```bash
|
||
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:
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
source ~/.nvm/nvm.sh
|
||
nvm use
|
||
npm install
|
||
```
|
||
|
||
Expected: 依赖安装成功，Node 版本符合项目要求
|
||
|
||
- [ ] **Step 2: 运行前端生产构建**
|
||
|
||
Run:
|
||
|
||
```bash
|
||
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: 提交这一小步**
|
||
|
||
```bash
|
||
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: 提交文档**
|
||
|
||
```bash
|
||
git add doc/2026-04-15-前端缓存监控页适配内存缓存实施计划.md doc/2026-04-15-前端缓存监控页适配内存缓存实施记录.md
|
||
git commit -m "补充前端实施记录"
|
||
```
|