新增缓存列表菜单功能

src/api/monitor/cache.js

@@ -6,4 +6,52 @@ export function getCache() {
     url: '/monitor/cache',
     method: 'get'
   })
-}
+}
+
+// 查询缓存名称列表
+export function listCacheName() {
+  return request({
+    url: '/monitor/cache/getNames',
+    method: 'get'
+  })
+}
+
+// 查询缓存键名列表
+export function listCacheKey(cacheName) {
+  return request({
+    url: '/monitor/cache/getKeys/' + cacheName,
+    method: 'get'
+  })
+}
+
+// 查询缓存内容
+export function getCacheValue(cacheName, cacheKey) {
+  return request({
+    url: '/monitor/cache/getValue/' + cacheName + '/' + cacheKey,
+    method: 'get'
+  })
+}
+
+// 清理指定名称缓存
+export function clearCacheName(cacheName) {
+  return request({
+    url: '/monitor/cache/clearCacheName/' + cacheName,
+    method: 'delete'
+  })
+}
+
+// 清理指定键名缓存
+export function clearCacheKey(cacheKey) {
+  return request({
+    url: '/monitor/cache/clearCacheKey/' + cacheKey,
+    method: 'delete'
+  })
+}
+
+// 清理全部缓存
+export function clearCacheAll() {
+  return request({
+    url: '/monitor/cache/clearCacheAll',
+    method: 'delete'
+  })
+}

src/assets/icons/svg/redis-list.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656035183065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3395" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M958.88 730.06H65.12c-18.28 0-33.12-14.82-33.12-33.12V68.91c0-18.29 14.83-33.12 33.12-33.12h893.77c18.28 0 33.12 14.82 33.12 33.12v628.03c-0.01 18.3-14.84 33.12-33.13 33.12zM98.23 663.83h827.53v-561.8H98.23v561.8z" p-id="3396"></path><path d="M512 954.55c-18.28 0-33.12-14.82-33.12-33.12V733.92c0-18.29 14.83-33.12 33.12-33.12s33.12 14.82 33.12 33.12v187.51c0 18.3-14.84 33.12-33.12 33.12z" p-id="3397"></path><path d="M762.01 988.21H261.99c-18.28 0-33.12-14.82-33.12-33.12 0-18.29 14.83-33.12 33.12-33.12h500.03c18.28 0 33.12 14.82 33.12 33.12-0.01 18.29-14.84 33.12-33.13 33.12zM514.74 578.55c-21.63 0-43.31-3.87-64.21-11.65-45.95-17.13-82.49-51.13-102.86-95.74-5.07-11.08-0.19-24.19 10.89-29.26 11.08-5.09 24.19-0.18 29.26 10.91 15.5 33.88 43.25 59.7 78.14 72.71 34.93 12.99 72.79 11.64 106.66-3.85 33.22-15.17 58.8-42.26 72.03-76.3 4.42-11.37 17.21-17.01 28.57-12.58 11.36 4.42 16.99 17.22 12.57 28.58-17.42 44.82-51.1 80.5-94.82 100.47-24.34 11.12-50.25 16.71-76.23 16.71z" p-id="3398"></path><path d="M325.27 528.78c-1.66 0-3.34-0.18-5.02-0.57-11.88-2.77-19.28-14.63-16.49-26.51l18.84-81c1.34-5.82 5-10.84 10.13-13.92 5.09-3.09 11.3-3.96 17.03-2.41l80.51 21.43c11.79 3.14 18.8 15.23 15.67 27.02-3.15 11.79-15.42 18.75-27.02 15.65l-58.49-15.57-13.69 58.81c-2.37 10.2-11.45 17.07-21.47 17.07zM360.8 351.01c-2.65 0-5.37-0.49-8-1.51-11.36-4.41-16.99-17.21-12.59-28.57 17.4-44.79 51.06-80.47 94.8-100.48 92.15-42.06 201.25-1.39 243.31 90.68 5.07 11.08 0.19 24.19-10.89 29.26-11.13 5.07-24.19 0.17-29.26-10.91-31.97-69.91-114.9-100.82-184.79-68.86-33.22 15.19-58.8 42.28-71.99 76.29-3.41 8.74-11.75 14.1-20.59 14.1z" p-id="3399"></path><path d="M684.68 376.74c-1.47 0-2.95-0.15-4.42-0.44l-81.61-16.68c-11.94-2.45-19.64-14.11-17.21-26.06 2.44-11.96 14.1-19.64 26.04-17.22l59.29 12.12 10.23-59.5c2.05-12 13.52-20.19 25.48-18.01 12.03 2.06 20.09 13.48 18.02 25.5l-14.08 81.96a22.089 22.089 0 0 1-9.29 14.49c-3.7 2.51-8.03 3.84-12.45 3.84z" p-id="3400"></path></svg>

src/views/monitor/cache/index.vue

@@ -66,7 +66,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup name="Cache">
 import { getCache } from '@/api/monitor/cache';
 import * as echarts from 'echarts';
 
@@ -98,7 +98,7 @@ function getList() {
           animationEasing: "cubicInOut",
           animationDuration: 1000
         }
-      ],
+      ]
     });
 
     const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
@@ -122,7 +122,7 @@ function getList() {
             }
           ]
         }
-      ],
+      ]
     })
   })
 }

src/views/monitor/cache/list.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <el-card style="height: calc(100vh - 125px)">
+          <template #header>
+            <span>缓存列表</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              icon="Refresh"
+              @click="refreshCacheNames()"
+            ></el-button>
+          </template>
+          <el-table
+            v-loading="loading"
+            :data="cacheNames"
+            :height="tableHeight"
+            highlight-current-row
+            @row-click="getCacheKeys"
+            style="width: 100%"
+          >
+            <el-table-column
+              label="序号"
+              width="60"
+              type="index"
+            ></el-table-column>
+
+            <el-table-column
+              label="缓存名称"
+              align="center"
+              prop="cacheName"
+              :show-overflow-tooltip="true"
+              :formatter="nameFormatter"
+            ></el-table-column>
+
+            <el-table-column
+              label="备注"
+              align="center"
+              prop="remark"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="操作"
+              width="60"
+              align="center"
+              class-name="small-padding fixed-width"
+            >
+              <template #default="scope">
+                <el-button
+                  type="text"
+                  icon="Delete"
+                  @click="handleClearCacheName(scope.row)"
+                ></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+
+      <el-col :span="8">
+        <el-card style="height: calc(100vh - 125px)">
+          <template #header>
+            <span>键名列表</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              icon="Refresh"
+              @click="refreshCacheKeys()"
+            ></el-button>
+          </template>
+          <el-table
+            v-loading="subLoading"
+            :data="cacheKeys"
+            :height="tableHeight"
+            highlight-current-row
+            @row-click="handleCacheValue"
+            style="width: 100%"
+          >
+            <el-table-column
+              label="序号"
+              width="60"
+              type="index"
+            ></el-table-column>
+            <el-table-column
+              label="缓存键名"
+              align="center"
+              :show-overflow-tooltip="true"
+              :formatter="keyFormatter"
+            >
+            </el-table-column>
+            <el-table-column
+              label="操作"
+              width="60"
+              align="center"
+              class-name="small-padding fixed-width"
+            >
+              <template #default="scope">
+                <el-button
+                  type="text"
+                  icon="Delete"
+                  @click="handleClearCacheKey(scope.row)"
+                ></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+
+      <el-col :span="8">
+        <el-card :bordered="false" style="height: calc(100vh - 125px)">
+          <template #header>
+            <span>缓存内容</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              icon="Refresh"
+              @click="handleClearCacheAll()"
+              >清理全部</el-button
+            >
+          </template>
+          <el-form :model="form">
+            <el-row :gutter="32">
+              <el-col :offset="1" :span="22">
+                <el-form-item label="缓存名称:" prop="cacheName">
+                  <el-input v-model="cacheForm.cacheName" :readOnly="true" />
+                </el-form-item>
+              </el-col>
+              <el-col :offset="1" :span="22">
+                <el-form-item label="缓存键名:" prop="cacheKey">
+                  <el-input v-model="cacheForm.cacheKey" :readOnly="true" />
+                </el-form-item>
+              </el-col>
+              <el-col :offset="1" :span="22">
+                <el-form-item label="缓存内容:" prop="cacheValue">
+                  <el-input
+                    v-model="cacheForm.cacheValue"
+                    type="textarea"
+                    :rows="8"
+                    :readOnly="true"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup name="CacheList">
+import { listCacheName, listCacheKey, getCacheValue, clearCacheName, clearCacheKey, clearCacheAll } from "@/api/monitor/cache";
+
+const { proxy } = getCurrentInstance();
+
+const cacheNames = ref([]);
+const cacheKeys = ref([]);
+const cacheForm = ref({});
+const loading = ref(true);
+const subLoading = ref(false);
+const nowCacheName = ref("");
+const tableHeight = ref(window.innerHeight - 200);
+
+/** 查询缓存名称列表 */
+function getCacheNames() {
+  loading.value = true;
+  listCacheName().then(response => {
+    cacheNames.value = response.data;
+    loading.value = false;
+  });
+}
+
+/** 刷新缓存名称列表 */
+function refreshCacheNames() {
+  getCacheNames();
+  proxy.$modal.msgSuccess("刷新缓存列表成功");
+}
+
+/** 清理指定名称缓存 */
+function handleClearCacheName(row) {
+  clearCacheName(row.cacheName).then(response => {
+    proxy.$modal.msgSuccess("清理缓存名称[" + nowCacheName.value + "]成功");
+    getCacheKeys();
+  });
+}
+
+/** 查询缓存键名列表 */
+function getCacheKeys(row) {
+  const cacheName = row !== undefined ? row.cacheName : nowCacheName.value;
+  if (cacheName === "") {
+    return;
+  }
+  subLoading.value = true;
+  listCacheKey(cacheName).then(response => {
+    cacheKeys.value = response.data;
+    subLoading.value = false;
+    nowCacheName.value = cacheName;
+  });
+}
+
+/** 刷新缓存键名列表 */
+function refreshCacheKeys() {
+  getCacheKeys();
+  proxy.$modal.msgSuccess("刷新键名列表成功");
+}
+
+/** 清理指定键名缓存 */
+function handleClearCacheKey(cacheKey) {
+  clearCacheKey(cacheKey).then(response => {
+    proxy.$modal.msgSuccess("清理缓存键名[" + cacheKey + "]成功");
+    getCacheKeys();
+  });
+}
+
+/** 列表前缀去除 */
+function nameFormatter(row) {
+  return row.cacheName.replace(":", "");
+}
+
+/** 键名前缀去除 */
+function keyFormatter(cacheKey) {
+  return cacheKey.replace(nowCacheName.value, "");
+}
+
+/** 查询缓存内容详细 */
+function handleCacheValue(cacheKey) {
+  getCacheValue(nowCacheName.value, cacheKey).then(response => {
+    cacheForm.value = response.data;
+  });
+}
+
+/** 清理全部缓存 */
+function handleClearCacheAll() {
+  clearCacheAll().then(response => {
+    proxy.$modal.msgSuccess("清理全部缓存成功");
+  });
+}
+
+getCacheNames();
+</script>