loan-pricing/doc/2026-04-15-前端缓存监控页适配内存缓存实施计划.md

# 前端缓存监控页适配内存缓存实施计划

> **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 "补充前端实施记录"
```