# 前端移除 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 "完成前端缓存监控联调"
```