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