cache.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <div class="cache-container">
  3. <div class="header">
  4. <h2>系统缓存管理</h2>
  5. <p>清理系统缓存可以释放内存空间,提高系统运行效率</p>
  6. </div>
  7. <el-card shadow="hover" class="cache-card">
  8. <el-table
  9. v-loading="loading"
  10. :data="cacheList"
  11. style="width: 100%"
  12. border
  13. >
  14. <el-table-column prop="title" label="管理内容" min-width="160" />
  15. <el-table-column prop="desc" label="说明" min-width="300" show-overflow-tooltip />
  16. <el-table-column label="操作" width="120" fixed="right" align="center">
  17. <template #default="scope">
  18. <el-button
  19. type="primary"
  20. link
  21. @click="handleClearCache(scope.row)"
  22. :loading="scope.row.clearing"
  23. >
  24. 清理
  25. </el-button>
  26. </template>
  27. </el-table-column>
  28. </el-table>
  29. <!-- 当数据加载失败时显示提示 -->
  30. <el-empty v-if="!loading && cacheList.length === 0" description="暂无缓存数据" />
  31. </el-card>
  32. </div>
  33. </template>
  34. <script setup>
  35. import { ref, onMounted } from 'vue'
  36. import { ElMessage, ElMessageBox } from 'element-plus'
  37. import system from '/@/api/system'
  38. // 从system中导出缓存相关函数
  39. const { getAllCache, clearCache } = system.maintenance
  40. // 缓存列表
  41. const cacheList = ref([])
  42. // 加载状态
  43. const loading = ref(false)
  44. // 获取所有缓存项
  45. const fetchAllCache = async () => {
  46. loading.value = true
  47. cacheList.value = []
  48. try {
  49. const result = await getAllCache()
  50. // 处理不同的返回数据格式
  51. if (Array.isArray(result)) {
  52. // 直接是数组情况
  53. cacheList.value = result.map(item => ({
  54. ...item,
  55. clearing: false
  56. }))
  57. } else if (result && result.data && Array.isArray(result.data)) {
  58. // { data: [...] } 格式
  59. cacheList.value = result.data.map(item => ({
  60. ...item,
  61. clearing: false
  62. }))
  63. } else if (result && result.Data && Array.isArray(result.Data)) {
  64. // { Data: [...] } 格式
  65. cacheList.value = result.Data.map(item => ({
  66. ...item,
  67. clearing: false
  68. }))
  69. } else {
  70. // 未找到有效数据
  71. ElMessage.warning('没有可用的缓存项')
  72. }
  73. } catch (error) {
  74. // 错误已被捕获并显示给用户
  75. ElMessage.error('获取缓存列表失败')
  76. } finally {
  77. loading.value = false
  78. }
  79. }
  80. // 处理清理缓存
  81. const handleClearCache = (row) => {
  82. if (!row) return
  83. // 使用MessageBox进行轻量确认
  84. ElMessageBox.confirm(
  85. `确定要清理「${row.title || row.key}」缓存吗?`,
  86. '系统提示',
  87. {
  88. confirmButtonText: '确认',
  89. cancelButtonText: '取消',
  90. type: 'warning',
  91. draggable: true,
  92. center: true,
  93. closeOnClickModal: false,
  94. closeOnPressEscape: false,
  95. roundButton: true
  96. }
  97. )
  98. .then(async () => {
  99. // 设置当前行的loading状态
  100. const index = cacheList.value.findIndex(item => item.key === row.key)
  101. if (index !== -1) {
  102. cacheList.value[index].clearing = true
  103. }
  104. try {
  105. await clearCache({ key: row.key })
  106. ElMessage.success(`清理${row.title || row.key}缓存成功`)
  107. // 清理成功后重新加载列表
  108. fetchAllCache()
  109. } catch (error) {
  110. // 错误已被捕获并显示给用户
  111. ElMessage.error('清理缓存失败')
  112. // 重置当前行的loading状态
  113. if (index !== -1 && cacheList.value[index]) {
  114. cacheList.value[index].clearing = false
  115. }
  116. }
  117. })
  118. .catch(() => {
  119. // 用户取消,不做任何操作
  120. })
  121. }
  122. onMounted(() => {
  123. fetchAllCache()
  124. })
  125. </script>
  126. <style lang="scss" scoped>
  127. .cache-container {
  128. padding: 16px;
  129. .header {
  130. margin-bottom: 16px;
  131. h2 {
  132. font-size: 18px;
  133. margin: 0 0 8px;
  134. color: #303133;
  135. }
  136. p {
  137. margin: 0;
  138. color: #909399;
  139. font-size: 14px;
  140. }
  141. }
  142. .cache-card {
  143. margin-bottom: 16px;
  144. }
  145. }
  146. </style>