admin-ui/src/views/system/maintenance/cache.vue

<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>