From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 27 五月 2025 17:52:03 +0800
Subject: [PATCH] 页面样式修改
---
src/views/monitor/cache/list.vue | 246 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 246 insertions(+), 0 deletions(-)
diff --git a/src/views/monitor/cache/list.vue b/src/views/monitor/cache/list.vue
new file mode 100644
index 0000000..6515fcd
--- /dev/null
+++ b/src/views/monitor/cache/list.vue
@@ -0,0 +1,246 @@
+<template>
+ <div class="app-container">
+ <el-row :gutter="10">
+ <el-col :span="8">
+ <el-card style="height: calc(100vh - 125px)">
+ <template #header>
+ <Collection style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">缂撳瓨鍒楄〃</span>
+ <el-button
+ style="float: right; padding: 3px 0"
+ link
+ type="primary"
+ 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
+ link
+ type="primary"
+ 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>
+ <Key style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">閿悕鍒楄〃</span>
+ <el-button
+ style="float: right; padding: 3px 0"
+ link
+ type="primary"
+ 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
+ link
+ type="primary"
+ 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>
+ <Document style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">缂撳瓨鍐呭</span>
+ <el-button
+ style="float: right; padding: 3px 0"
+ link
+ type="primary"
+ icon="Refresh"
+ @click="handleClearCacheAll()"
+ >娓呯悊鍏ㄩ儴</el-button
+ >
+ </template>
+ <el-form :model="cacheForm">
+ <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("娓呯悊缂撳瓨鍚嶇О[" + row.cacheName + "]鎴愬姛")
+ 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>
--
Gitblit v1.9.3