Browse Source

feat:增加缓存清理管理页面

microrain 5 months ago
parent
commit
22996d9c09
2 changed files with 175 additions and 1 deletions
  1. 9 1
      src/api/system/index.ts
  2. 166 0
      src/views/system/maintenance/cache.vue

+ 9 - 1
src/api/system/index.ts

@@ -211,5 +211,13 @@ export default {
     sync: () => post('/cascade/subplatform/sync'),
     statistic: () => get('/cascade/subplatform/statistic'),
   },
-  getInfoByKey: (ConfigKey: string) => get('/common/config/getInfoByKey', { ConfigKey })
+  getInfoByKey: (ConfigKey: string) => get('/common/config/getInfoByKey', { ConfigKey }),
+
+  // 系统维护相关接口
+  maintenance: {
+    // 获取所有缓存处理项
+    getAllCache: () => get('/system/maintenance/GetAllCache'),
+    // 清理指定处理项的缓存
+    clearCache: (data: object) => post('/system/maintenance/ClearCache', data),
+  },
 }

+ 166 - 0
src/views/system/maintenance/cache.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="cache-container">
+    <div class="header">
+      <h2>系统缓存管理</h2>
+      <p>清理系统缓存可以释放内存空间,提高系统运行效率</p>
+    </div>
+
+    <el-card shadow="hover" class="cache-card">
+      <el-table
+        v-loading="loading"
+        :data="cacheList"
+        style="width: 100%"
+        border
+      >
+        <el-table-column prop="title" label="管理内容" min-width="160" />
+        <el-table-column prop="desc" label="说明" min-width="300" show-overflow-tooltip />
+        <el-table-column label="操作" width="120" fixed="right" align="center">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              link
+              @click="handleClearCache(scope.row)"
+              :loading="scope.row.clearing"
+            >
+              清理
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 当数据加载失败时显示提示 -->
+      <el-empty v-if="!loading && cacheList.length === 0" description="暂无缓存数据" />
+    </el-card>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import system from '/@/api/system'
+
+// 从system中导出缓存相关函数
+const { getAllCache, clearCache } = system.maintenance
+
+// 缓存列表
+const cacheList = ref([])
+// 加载状态
+const loading = ref(false)
+
+// 获取所有缓存项
+const fetchAllCache = async () => {
+  loading.value = true
+  cacheList.value = []
+
+  try {
+    const result = await getAllCache()
+
+    // 处理不同的返回数据格式
+    if (Array.isArray(result)) {
+      // 直接是数组情况
+      cacheList.value = result.map(item => ({
+        ...item,
+        clearing: false
+      }))
+    } else if (result && result.data && Array.isArray(result.data)) {
+      // { data: [...] } 格式
+      cacheList.value = result.data.map(item => ({
+        ...item,
+        clearing: false
+      }))
+    } else if (result && result.Data && Array.isArray(result.Data)) {
+      // { Data: [...] } 格式
+      cacheList.value = result.Data.map(item => ({
+        ...item,
+        clearing: false
+      }))
+    } else {
+      // 未找到有效数据
+      ElMessage.warning('没有可用的缓存项')
+    }
+  } catch (error) {
+    // 错误已被捕获并显示给用户
+    ElMessage.error('获取缓存列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 处理清理缓存
+const handleClearCache = (row) => {
+  if (!row) return
+
+  // 使用MessageBox进行轻量确认
+  ElMessageBox.confirm(
+    `确定要清理「${row.title || row.key}」缓存吗?`,
+    '系统提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+      draggable: true,
+      center: true,
+      closeOnClickModal: false,
+      closeOnPressEscape: false,
+      roundButton: true
+    }
+  )
+    .then(async () => {
+      // 设置当前行的loading状态
+      const index = cacheList.value.findIndex(item => item.key === row.key)
+      if (index !== -1) {
+        cacheList.value[index].clearing = true
+      }
+
+      try {
+        await clearCache({ key: row.key })
+        ElMessage.success(`清理${row.title || row.key}缓存成功`)
+        // 清理成功后重新加载列表
+        fetchAllCache()
+      } catch (error) {
+        // 错误已被捕获并显示给用户
+        ElMessage.error('清理缓存失败')
+        // 重置当前行的loading状态
+        if (index !== -1 && cacheList.value[index]) {
+          cacheList.value[index].clearing = false
+        }
+      }
+    })
+    .catch(() => {
+      // 用户取消,不做任何操作
+    })
+}
+
+onMounted(() => {
+  fetchAllCache()
+})
+</script>
+
+<style lang="scss" scoped>
+.cache-container {
+  padding: 16px;
+
+  .header {
+    margin-bottom: 16px;
+
+    h2 {
+      font-size: 18px;
+      margin: 0 0 8px;
+      color: #303133;
+    }
+
+    p {
+      margin: 0;
+      color: #909399;
+      font-size: 14px;
+    }
+  }
+
+  .cache-card {
+    margin-bottom: 16px;
+  }
+
+
+}
+</style>