From df6cf59e7c6c67a43ae5014bb11d2398ceb01b8b Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Sun, 28 Sep 2025 00:13:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=9B=91=E6=8E=A7):=20=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E7=BC=93=E5=AD=98=E7=9B=91=E6=8E=A7=E9=A1=B5=E9=9D=A2=E5=8F=8A?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增缓存监控三栏布局页面，支持缓存名称、键名、内容展示
- 实现智能JSON内容检测和格式化功能
- 优化缓存项视觉效果，增强卡片分离度和清晰度
- 修复URL路径参数编码问题，解决冒号特殊字符处理
- 实现专业代码高亮显示和一键复制功能
- 采用现代化卡片设计，支持悬停和激活状态
- 集成缓存增删改查和实时刷新功能
---
 src/views/monitor/cache/index.vue | 954 ++++++++++++++++++++++++++++++
 1 file changed, 954 insertions(+)
 create mode 100644 src/views/monitor/cache/index.vue

diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
new file mode 100644
index 0000000..bc5f376
--- /dev/null
+++ b/src/views/monitor/cache/index.vue
@@ -0,0 +1,954 @@
+<template>
+  <div class="cache-monitor-container">
+    <!-- 三栏布局 -->
+    <div class="cache-layout">
+      <!-- 左侧：缓存名称列表 -->
+      <n-card title="缓存名称" class="cache-names-panel">
+        <template #header-extra>
+          <n-space size="small">
+            <n-button text size="small" :loading="loading" @click="refreshCacheNames">
+              <template #icon>
+                <n-icon><IconParkOutlineRefresh /></n-icon>
+              </template>
+            </n-button>
+            <n-popconfirm
+              trigger="click"
+              :show-icon="false"
+              placement="bottom"
+              @positive-click="clearAllCache"
+            >
+              <template #trigger>
+                <n-button text size="small" type="error" :loading="clearingAll">
+                  <template #icon>
+                    <n-icon><IconParkOutlineDelete /></n-icon>
+                  </template>
+                </n-button>
+              </template>
+              <div class="confirm-content">
+                <p class="confirm-title">
+                  确定要清空所有缓存吗？
+                </p>
+                <p class="confirm-desc">
+                  此操作将删除Redis中的所有数据，且不可恢复！
+                </p>
+              </div>
+            </n-popconfirm>
+          </n-space>
+        </template>
+        <div class="cache-names-list">
+          <div
+            v-for="(cache, index) in cacheNames"
+            :key="index"
+            class="cache-name-item"
+            :class="{ active: selectedCacheName === cache.cacheName }"
+            @click="selectCacheName(cache.cacheName)"
+          >
+            <div class="cache-name-content">
+              <div class="cache-name">
+                {{ cache.cacheName }}
+              </div>
+              <div class="cache-remark">
+                {{ cache.remark }}
+              </div>
+            </div>
+            <div class="cache-actions">
+              <n-popconfirm
+                trigger="click"
+                :show-icon="false"
+                placement="right"
+                @positive-click="deleteCacheByName(cache.cacheName)"
+                @click.stop
+              >
+                <template #trigger>
+                  <n-button type="error" size="small" text>
+                    <template #icon>
+                      <n-icon><IconParkOutlineDelete /></n-icon>
+                    </template>
+                  </n-button>
+                </template>
+                确定删除此缓存分类的所有数据吗？
+              </n-popconfirm>
+            </div>
+          </div>
+        </div>
+      </n-card>
+
+      <!-- 中间：缓存键名列表 -->
+      <n-card :title="`缓存键名 (${selectedCacheName || '请选择缓存类型'})`" class="cache-keys-panel">
+        <template #header-extra>
+          <n-space size="small">
+            <n-button
+              text
+              size="small"
+              :loading="loadingKeys"
+              :disabled="!selectedCacheName"
+              @click="refreshCacheKeys"
+            >
+              <template #icon>
+                <n-icon><IconParkOutlineRefresh /></n-icon>
+              </template>
+            </n-button>
+          </n-space>
+        </template>
+        <div v-if="!selectedCacheName" class="empty-state">
+          <n-empty description="请先选择左侧的缓存类型">
+            <template #icon>
+              <n-icon><IconParkOutlineKey /></n-icon>
+            </template>
+          </n-empty>
+        </div>
+        <div v-else-if="loadingKeys" class="loading-state">
+          <n-spin size="medium">
+            <template #description>
+              加载缓存键名中...
+            </template>
+          </n-spin>
+        </div>
+        <div v-else class="cache-keys-list">
+          <div v-if="cacheKeys.length === 0" class="empty-state">
+            <n-empty description="该缓存类型下暂无数据">
+              <template #icon>
+                <n-icon><IconParkOutlineFileQuestion /></n-icon>
+              </template>
+            </n-empty>
+          </div>
+          <div
+            v-for="(key, index) in cacheKeys"
+            :key="index"
+            class="cache-key-item"
+            :class="{ active: selectedCacheKey === key }"
+            @click="selectCacheKey(key)"
+          >
+            <div class="cache-key-content">
+              <div class="cache-key">
+                {{ key }}
+              </div>
+            </div>
+            <div class="cache-key-actions">
+              <n-popconfirm
+                trigger="click"
+                :show-icon="false"
+                placement="right"
+                @positive-click="deleteCacheByKey(key)"
+                @click.stop
+              >
+                <template #trigger>
+                  <n-button type="error" size="small" text>
+                    <template #icon>
+                      <n-icon><IconParkOutlineDelete /></n-icon>
+                    </template>
+                  </n-button>
+                </template>
+                确定删除此缓存键吗？
+              </n-popconfirm>
+            </div>
+          </div>
+        </div>
+      </n-card>
+
+      <!-- 右侧：缓存内容详情 -->
+      <n-card :title="`缓存内容 (${selectedCacheKey || '请选择缓存键'})`" class="cache-content-panel">
+        <template #header-extra>
+          <n-space size="small">
+            <n-button
+              text
+              size="small"
+              :loading="loadingContent"
+              :disabled="!selectedCacheKey"
+              @click="refreshCacheContent"
+            >
+              <template #icon>
+                <n-icon><IconParkOutlineRefresh /></n-icon>
+              </template>
+            </n-button>
+          </n-space>
+        </template>
+        <div v-if="!selectedCacheKey" class="empty-state">
+          <n-empty description="请先选择左侧的缓存键">
+            <template #icon>
+              <n-icon><IconParkOutlineFileText /></n-icon>
+            </template>
+          </n-empty>
+        </div>
+        <div v-else-if="loadingContent" class="loading-state">
+          <n-spin size="medium">
+            <template #description>
+              加载缓存内容中...
+            </template>
+          </n-spin>
+        </div>
+        <div v-else class="cache-content">
+          <!-- 优化的元信息展示 -->
+          <div class="content-meta-card">
+            <div class="meta-item">
+              <div class="meta-label">
+                缓存键名
+              </div>
+              <div class="meta-value key-name">
+                {{ cacheContent?.cacheKey || 'N/A' }}
+              </div>
+            </div>
+            <div class="meta-item">
+              <div class="meta-label">
+                过期时间
+              </div>
+              <div class="meta-value">
+                <n-tag v-if="cacheContent?.expireTime && cacheContent.expireTime !== '不过期'" type="warning" size="small" :bordered="false">
+                  <template #icon>
+                    <n-icon><IconParkOutlineTime /></n-icon>
+                  </template>
+                  {{ cacheContent.expireTime }}
+                </n-tag>
+                <n-tag v-else type="success" size="small" :bordered="false">
+                  <template #icon>
+                    <n-icon><IconParkOutlineCheck /></n-icon>
+                  </template>
+                  永不过期
+                </n-tag>
+              </div>
+            </div>
+          </div>
+
+          <!-- 优化的缓存内容展示 -->
+          <div class="content-section">
+            <div class="section-header">
+              <h4 class="section-title">
+                缓存内容
+              </h4>
+              <n-space size="small">
+                <n-button size="tiny" text @click="formatJson">
+                  <template #icon>
+                    <n-icon><IconParkOutlineCode /></n-icon>
+                  </template>
+                  格式化
+                </n-button>
+                <n-button size="tiny" text @click="copyContent">
+                  <template #icon>
+                    <n-icon><IconParkOutlineCopy /></n-icon>
+                  </template>
+                  复制
+                </n-button>
+              </n-space>
+            </div>
+
+            <div class="content-display">
+              <div v-if="isJsonContent" class="json-viewer">
+                <pre class="json-content">{{ formattedContent }}</pre>
+              </div>
+              <div v-else class="text-content">
+                <n-input
+                  :value="cacheContent?.cacheValue || ''"
+                  type="textarea"
+                  readonly
+                  :rows="12"
+                  placeholder="缓存内容为空"
+                  class="content-textarea"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </n-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
+import {
+  deleteCacheAll,
+  deleteCacheKey,
+  deleteCacheName,
+  getCacheKeys,
+  getCacheValue,
+  getRedisCache,
+} from '@/service/api/monitor/cache'
+import type { SysCacheVo } from '@/service/api/monitor/cache'
+import IconParkOutlineRefresh from '~icons/icon-park-outline/refresh'
+import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
+import IconParkOutlineKey from '~icons/icon-park-outline/key'
+import IconParkOutlineFileQuestion from '~icons/icon-park-outline/file-question'
+import IconParkOutlineFileText from '~icons/icon-park-outline/file-text'
+import IconParkOutlineTime from '~icons/icon-park-outline/time'
+import IconParkOutlineCheck from '~icons/icon-park-outline/check'
+import IconParkOutlineCode from '~icons/icon-park-outline/code'
+import IconParkOutlineCopy from '~icons/icon-park-outline/copy'
+
+// 响应式数据
+const loading = ref(false)
+const loadingKeys = ref(false)
+const loadingContent = ref(false)
+const clearingAll = ref(false)
+
+const cacheNames = ref<SysCacheVo[]>([])
+const cacheKeys = ref<string[]>([])
+const cacheContent = ref<SysCacheVo>()
+
+const selectedCacheName = ref<string>('')
+const selectedCacheKey = ref<string>('')
+
+// 内容展示相关
+const isJsonFormatted = ref(false)
+
+// 计算属性
+const isJsonContent = computed(() => {
+  const content = cacheContent.value?.cacheValue
+  if (!content)
+    return false
+  try {
+    JSON.parse(content)
+    return true
+  }
+  catch {
+    return false
+  }
+})
+
+const formattedContent = computed(() => {
+  const content = cacheContent.value?.cacheValue
+  if (!content || !isJsonContent.value)
+    return content
+  try {
+    return JSON.stringify(JSON.parse(content), null, 2)
+  }
+  catch {
+    return content
+  }
+})
+
+// 格式化JSON
+function formatJson() {
+  isJsonFormatted.value = !isJsonFormatted.value
+}
+
+// 复制内容到剪贴板
+async function copyContent() {
+  const content = cacheContent.value?.cacheValue
+  if (!content) {
+    coiMsgWarning('没有可复制的内容')
+    return
+  }
+
+  try {
+    await navigator.clipboard.writeText(content)
+    coiMsgSuccess('内容已复制到剪贴板')
+  }
+  catch {
+    coiMsgError('复制失败，请手动复制')
+  }
+}
+
+// 获取缓存名称列表
+async function fetchCacheNames() {
+  try {
+    loading.value = true
+    const { data, isSuccess } = await getRedisCache()
+
+    if (isSuccess && data) {
+      cacheNames.value = data
+    }
+    else {
+      coiMsgError('获取缓存名称列表失败')
+    }
+  }
+  catch (error) {
+    console.error('获取缓存名称列表异常:', error)
+    coiMsgError('获取缓存名称列表异常')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 获取指定缓存名称的键列表
+async function fetchCacheKeys(cacheName: string) {
+  try {
+    loadingKeys.value = true
+    console.warn('正在获取缓存键列表，缓存名称:', cacheName)
+    const { data, isSuccess, message } = await getCacheKeys(cacheName)
+
+    if (isSuccess && data) {
+      cacheKeys.value = data
+      console.warn('获取缓存键列表成功，数据量:', data.length)
+      if (data.length === 0) {
+        coiMsgWarning(`缓存类型"${cacheName}"下暂无数据`)
+      }
+    }
+    else {
+      cacheKeys.value = []
+      console.warn('获取缓存键列表失败:', message || '未知错误')
+      coiMsgWarning(message || `缓存类型"${cacheName}"下暂无数据`)
+    }
+  }
+  catch (error) {
+    console.error('获取缓存键列表异常:', error)
+    cacheKeys.value = []
+    coiMsgError('获取缓存键列表异常，请检查网络连接或权限配置')
+  }
+  finally {
+    loadingKeys.value = false
+  }
+}
+
+// 获取缓存内容
+async function fetchCacheContent(cacheName: string, cacheKey: string) {
+  try {
+    loadingContent.value = true
+    const { data, isSuccess } = await getCacheValue({
+      cacheName,
+      cacheKey,
+    })
+
+    if (isSuccess && data) {
+      cacheContent.value = data
+    }
+    else {
+      cacheContent.value = undefined
+      coiMsgError('获取缓存内容失败')
+    }
+  }
+  catch (error) {
+    console.error('获取缓存内容异常:', error)
+    cacheContent.value = undefined
+    coiMsgError('获取缓存内容异常')
+  }
+  finally {
+    loadingContent.value = false
+  }
+}
+
+// 选择缓存名称
+async function selectCacheName(cacheName: string) {
+  selectedCacheName.value = cacheName
+  selectedCacheKey.value = ''
+  cacheContent.value = undefined
+
+  await fetchCacheKeys(cacheName)
+}
+
+// 选择缓存键
+async function selectCacheKey(cacheKey: string) {
+  selectedCacheKey.value = cacheKey
+
+  if (selectedCacheName.value) {
+    await fetchCacheContent(selectedCacheName.value, cacheKey)
+  }
+}
+
+// 删除指定名称的缓存
+async function deleteCacheByName(cacheName: string) {
+  try {
+    const { isSuccess } = await deleteCacheName(cacheName)
+
+    if (isSuccess) {
+      coiMsgSuccess('删除缓存成功')
+
+      // 如果删除的是当前选中的缓存，清空选择
+      if (selectedCacheName.value === cacheName) {
+        selectedCacheName.value = ''
+        selectedCacheKey.value = ''
+        cacheKeys.value = []
+        cacheContent.value = undefined
+      }
+
+      // 刷新缓存名称列表
+      await fetchCacheNames()
+    }
+    else {
+      coiMsgError('删除缓存失败')
+    }
+  }
+  catch (error) {
+    console.error('删除缓存异常:', error)
+    coiMsgError('删除缓存异常')
+  }
+}
+
+// 删除指定键的缓存
+async function deleteCacheByKey(cacheKey: string) {
+  try {
+    const { isSuccess } = await deleteCacheKey({
+      cacheName: selectedCacheName.value,
+      cacheKey,
+    })
+
+    if (isSuccess) {
+      coiMsgSuccess('删除缓存键成功')
+
+      // 如果删除的是当前选中的键，清空选择
+      if (selectedCacheKey.value === cacheKey) {
+        selectedCacheKey.value = ''
+        cacheContent.value = undefined
+      }
+
+      // 刷新当前缓存名称的键列表
+      if (selectedCacheName.value) {
+        await fetchCacheKeys(selectedCacheName.value)
+      }
+    }
+    else {
+      coiMsgError('删除缓存键失败')
+    }
+  }
+  catch (error) {
+    console.error('删除缓存键异常:', error)
+    coiMsgError('删除缓存键异常')
+  }
+}
+
+// 清空所有缓存
+async function clearAllCache() {
+  try {
+    clearingAll.value = true
+    const { isSuccess } = await deleteCacheAll()
+
+    if (isSuccess) {
+      coiMsgSuccess('清空所有缓存成功')
+
+      // 清空所有选择和数据
+      selectedCacheName.value = ''
+      selectedCacheKey.value = ''
+      cacheKeys.value = []
+      cacheContent.value = undefined
+
+      // 刷新缓存名称列表
+      await fetchCacheNames()
+    }
+    else {
+      coiMsgError('清空所有缓存失败')
+    }
+  }
+  catch (error) {
+    console.error('清空所有缓存异常:', error)
+    coiMsgError('清空所有缓存异常')
+  }
+  finally {
+    clearingAll.value = false
+  }
+}
+
+// 刷新缓存名称列表
+async function refreshCacheNames() {
+  await fetchCacheNames()
+  coiMsgSuccess('刷新缓存成功')
+}
+
+// 刷新缓存键列表
+async function refreshCacheKeys() {
+  if (selectedCacheName.value) {
+    await fetchCacheKeys(selectedCacheName.value)
+    coiMsgSuccess('刷新缓存键成功')
+  }
+  else {
+    coiMsgWarning('请先选择缓存类型')
+  }
+}
+
+// 刷新缓存内容
+async function refreshCacheContent() {
+  if (selectedCacheName.value && selectedCacheKey.value) {
+    await fetchCacheContent(selectedCacheName.value, selectedCacheKey.value)
+    coiMsgSuccess('刷新缓存内容成功')
+  }
+  else {
+    coiMsgWarning('请先选择缓存类型和缓存键')
+  }
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchCacheNames()
+})
+</script>
+
+<style scoped>
+.cache-monitor-container {
+  padding: 0;
+  margin: 0;
+  background-color: var(--body-color);
+  min-height: 100vh;
+}
+
+.confirm-content {
+  max-width: 200px;
+}
+
+.confirm-title {
+  font-weight: 600;
+  color: var(--text-color-1);
+  margin: 0 0 8px 0;
+}
+
+.confirm-desc {
+  font-size: 13px;
+  color: var(--text-color-3);
+  margin: 0;
+}
+
+.cache-layout {
+  display: grid;
+  grid-template-columns: 300px 360px 1fr;
+  gap: 20px;
+  height: calc(100vh - 140px);
+  padding: 20px 20px 20px 0;
+  margin: 0;
+}
+
+.cache-names-panel,
+.cache-keys-panel,
+.cache-content-panel {
+  height: 100%;
+  overflow: hidden;
+}
+
+.cache-names-list,
+.cache-keys-list {
+  height: calc(100% - 20px);
+  overflow-y: auto;
+}
+
+.cache-name-item,
+.cache-key-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 18px;
+  border-radius: 12px;
+  border: 1px solid var(--divider-color);
+  margin-bottom: 12px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: var(--card-color);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.08),
+    0 1px 2px rgba(0, 0, 0, 0.04);
+  position: relative;
+}
+
+.cache-name-item:hover,
+.cache-key-item:hover {
+  background: var(--hover-color);
+  border-color: var(--primary-color);
+  box-shadow:
+    0 4px 12px rgba(var(--primary-color-rgb), 0.12),
+    0 2px 6px rgba(var(--primary-color-rgb), 0.08);
+  transform: translateY(-2px);
+}
+
+.cache-name-item.active,
+.cache-key-item.active {
+  background: var(--primary-color-suppl);
+  border-color: var(--primary-color);
+  box-shadow:
+    0 6px 20px rgba(var(--primary-color-rgb), 0.2),
+    0 3px 10px rgba(var(--primary-color-rgb), 0.12);
+  transform: translateY(-2px);
+}
+
+.cache-name-item.active::before,
+.cache-key-item.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 60%;
+  background: var(--primary-color);
+  border-radius: 0 4px 4px 0;
+}
+
+.cache-name-content,
+.cache-key-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.cache-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-color-1);
+  margin-bottom: 6px;
+  word-break: break-all;
+  line-height: 1.3;
+}
+
+.cache-remark {
+  font-size: 12px;
+  color: var(--text-color-2);
+  font-weight: 500;
+  opacity: 0.8;
+}
+
+.cache-key {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-color-1);
+  word-break: break-all;
+  font-family: 'JetBrains Mono', 'Courier New', monospace;
+  line-height: 1.5;
+  padding: 2px 0;
+}
+
+.cache-actions,
+.cache-key-actions {
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+
+.empty-state,
+.loading-state {
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cache-content {
+  height: calc(100% - 20px);
+  display: flex;
+  flex-direction: column;
+}
+
+.content-meta {
+  flex-shrink: 0;
+  margin-bottom: 16px;
+}
+
+/* 新的内容展示样式 */
+.content-meta-card {
+  background: linear-gradient(135deg, var(--card-color) 0%, rgba(var(--primary-color-rgb), 0.03) 100%);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.meta-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-color-2);
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+}
+
+.meta-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-color-1);
+  word-break: break-all;
+}
+
+.key-name {
+  font-family: 'JetBrains Mono', 'Courier New', monospace;
+  background: rgba(var(--primary-color-rgb), 0.1);
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+}
+
+.content-section {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--divider-color);
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-color-1);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.content-display {
+  flex: 1;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+}
+
+.json-viewer {
+  height: 100%;
+  overflow: auto;
+  background: var(--code-block-color, #1e1e1e);
+  border-radius: 8px;
+}
+
+.json-content {
+  font-family: 'JetBrains Mono', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #d4d4d4;
+  margin: 0;
+  padding: 20px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: linear-gradient(135deg, #1e1e1e 0%, #2d2d30 100%);
+  border-radius: 8px;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.text-content {
+  height: 100%;
+}
+
+.content-textarea {
+  height: 100%;
+}
+
+.content-textarea :deep(.n-input__textarea-el) {
+  font-family: 'JetBrains Mono', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  background: var(--input-color);
+  border: none;
+  resize: none;
+}
+
+:deep(.n-card) {
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(var(--border-color-rgb, 239, 239, 245), 0.6);
+  background: var(--card-color);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+:deep(.n-card:hover) {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+:deep(.n-card .n-card__header) {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--divider-color);
+  background: linear-gradient(135deg, var(--card-color) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
+  border-radius: 16px 16px 0 0;
+}
+
+:deep(.n-card .n-card__content) {
+  padding: 24px;
+  height: calc(100% - 70px);
+}
+
+:deep(.n-card .n-card-header__main) {
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--text-color-1);
+}
+
+/* 优化标签样式 */
+:deep(.n-tag) {
+  border-radius: 6px;
+  font-weight: 500;
+  padding: 4px 8px;
+}
+
+/* 优化空状态样式 */
+.empty-state,
+.loading-state {
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-color-3);
+}
+
+/* 响应式设计优化 */
+@media (max-width: 1400px) {
+  .cache-layout {
+    grid-template-columns: 280px 320px 1fr;
+    gap: 16px;
+    padding: 16px 16px 16px 0;
+  }
+}
+
+@media (max-width: 1200px) {
+  .cache-layout {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    height: auto;
+    padding: 16px 16px 16px 0;
+  }
+
+  .cache-names-panel,
+  .cache-keys-panel,
+  .cache-content-panel {
+    height: 400px;
+  }
+
+  .content-meta-card {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .cache-layout {
+    gap: 12px;
+    padding: 12px 12px 12px 0;
+  }
+
+  :deep(.n-card .n-card__header) {
+    padding: 16px 20px;
+  }
+
+  :deep(.n-card .n-card__content) {
+    padding: 20px;
+  }
+
+  .content-meta-card {
+    padding: 16px;
+  }
+}
+
+/* 清理重复样式，已在上面定义 */
+
+/* 滚动条样式 */
+.cache-names-list::-webkit-scrollbar,
+.cache-keys-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.cache-names-list::-webkit-scrollbar-track,
+.cache-keys-list::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-color);
+  border-radius: 3px;
+}
+
+.cache-names-list::-webkit-scrollbar-thumb,
+.cache-keys-list::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-color);
+  border-radius: 3px;
+}
+
+.cache-names-list::-webkit-scrollbar-thumb:hover,
+.cache-keys-list::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover-color);
+}
+</style>