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

前端缓存监控页适配内存缓存实施记录

1. 实际改动内容

1.1 调整缓存监控首页

修改文件：

• ruoyi-ui/src/views/monitor/cache/index.vue

改动内容：

• 页面展示从 Redis 服务器指标改为内存缓存统计
• 增加默认数据结构：
  • cache_type
  • cache_mode
  • key_size
  • hit_count
  • miss_count
  • expired_count
  • write_count
• 新增格式化与归一化方法：
  • normalizeCacheData
  • normalizeCommandStats
  • formatCacheType
  • formatCacheMode
  • formatSampleTime
  • toNumber
• 基本信息区改为展示：
  • 缓存类型
  • 运行模式
  • 总键数
  • 写入次数
  • 命中次数
  • 未命中次数
  • 过期清理次数
  • 命中率
• 图表改为展示内存缓存统计分布与条形概览

1.2 调整缓存列表页清理全部后的状态

修改文件：

• ruoyi-ui/src/views/monitor/cache/list.vue

改动内容：

• 清理全部缓存后主动清空：
  • cacheKeys
  • cacheForm
  • nowCacheName
• 重新加载缓存分类列表，避免页面残留旧数据显示

1.3 API 文件

文件：

• ruoyi-ui/src/api/monitor/cache.js

结论：

• 接口路径与交互方式保持不变
• 本次未对 API 文件做额外改动

2. 验证结果

2.1 Node 版本

项目中未提供 .nvmrc，因此未能直接执行 nvm use 自动切换。

本机 nvm 已安装版本：

• v14.21.3
• v25.9.0

实际使用版本：

• nvm use 14.21.3

原因：

• Vue CLI 4 + Vue 2 对较新的 Node 版本存在潜在兼容风险，优先使用更稳妥的 v14.21.3

2.2 构建命令

已执行：

• cd ruoyi-ui && source ~/.nvm/nvm.sh && nvm use 14.21.3 && npm run build:prod

结果：

• 构建成功
• 输出 DONE Build complete. The dist directory is ready to be deployed.

2.3 构建告警

存在 webpack 资源体积告警：

• asset size limit
• entrypoint size limit

说明：

• 这些是现有项目静态资源体积告警，不影响本次缓存监控页适配结果
• 本次未对该类历史体积问题做额外处理

3. 与计划差异

• 计划中预期通过 nvm use 自动切换版本，但项目没有 .nvmrc，因此改为显式执行 nvm use 14.21.3
• 除此之外，前端实施路径与计划一致

4. 当前结论

• 缓存监控首页已适配后端内存缓存统计结构
• 缓存列表页与现有接口保持兼容
• 前端生产构建已通过