From 63b49f1d40f673004f94bd552c4fac6ef5189c89 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Sun, 27 Apr 2025 18:32:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20redis=20=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/langs/en-us.ts        |   3 +-
 src/locales/langs/zh-cn.ts        |   3 +-
 src/router/elegant/imports.ts     |   1 +
 src/router/elegant/routes.ts      |   9 +
 src/router/elegant/transform.ts   |   1 +
 src/service/api/monitor/cache.ts  |   8 +
 src/typings/api/monitor.api.d.ts  |  40 ++
 src/typings/elegant-router.d.ts   |   2 +
 src/views/monitor/cache/index.vue | 697 ++++++++++++++++++++++++++++++
 9 files changed, 762 insertions(+), 2 deletions(-)
 create mode 100644 src/service/api/monitor/cache.ts
 create mode 100644 src/views/monitor/cache/index.vue

diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 719cc82c..f1e1bff2 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -185,7 +185,8 @@ const local: App.I18n.Schema = {
     system_notice: 'Notice Management',
     'social-callback': 'Social Callback',
     system_oss: 'File Management',
-    'system_oss-config': 'OSS Config'
+    'system_oss-config': 'OSS Config',
+    monitor_cache: 'Cache Monitor'
   },
   page: {
     login: {
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index cc687434..ccecff32 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -185,7 +185,8 @@ const local: App.I18n.Schema = {
     system_notice: '通知公告',
     'social-callback': '单点登录回调',
     system_oss: '文件管理',
-    'system_oss-config': 'OSS配置'
+    'system_oss-config': 'OSS配置',
+    monitor_cache: '缓存监控'
   },
   page: {
     login: {
diff --git a/src/router/elegant/imports.ts b/src/router/elegant/imports.ts
index 594cee43..afbf52da 100644
--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@@ -22,6 +22,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   login: () => import("@/views/_builtin/login/index.vue"),
   "social-callback": () => import("@/views/_builtin/social-callback/index.vue"),
   home: () => import("@/views/home/index.vue"),
+  monitor_cache: () => import("@/views/monitor/cache/index.vue"),
   "monitor_login-infor": () => import("@/views/monitor/login-infor/index.vue"),
   "monitor_oper-log": () => import("@/views/monitor/oper-log/index.vue"),
   system_client: () => import("@/views/system/client/index.vue"),
diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
index e089f9fb..d0ffea60 100644
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -84,6 +84,15 @@ export const generatedRoutes: GeneratedRoute[] = [
       i18nKey: 'route.monitor'
     },
     children: [
+      {
+        name: 'monitor_cache',
+        path: '/monitor/cache',
+        component: 'view.monitor_cache',
+        meta: {
+          title: 'monitor_cache',
+          i18nKey: 'route.monitor_cache'
+        }
+      },
       {
         name: 'monitor_login-infor',
         path: '/monitor/login-infor',
diff --git a/src/router/elegant/transform.ts b/src/router/elegant/transform.ts
index 0a388316..f4bbd43c 100644
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -170,6 +170,7 @@ const routeMap: RouteMap = {
   "iframe-page": "/iframe-page/:url",
   "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
   "monitor": "/monitor",
+  "monitor_cache": "/monitor/cache",
   "monitor_login-infor": "/monitor/login-infor",
   "monitor_oper-log": "/monitor/oper-log",
   "social-callback": "/social-callback",
diff --git a/src/service/api/monitor/cache.ts b/src/service/api/monitor/cache.ts
new file mode 100644
index 00000000..18583b40
--- /dev/null
+++ b/src/service/api/monitor/cache.ts
@@ -0,0 +1,8 @@
+import { request } from '@/service/request';
+
+export function fetchGetMonitorCacheInfo() {
+  return request<Api.Monitor.CacheInfo>({
+    url: '/monitor/cache',
+    method: 'get'
+  });
+}
diff --git a/src/typings/api/monitor.api.d.ts b/src/typings/api/monitor.api.d.ts
index 682d4068..ff913823 100644
--- a/src/typings/api/monitor.api.d.ts
+++ b/src/typings/api/monitor.api.d.ts
@@ -94,5 +94,45 @@ declare namespace Api {
 
     /** login infor list */
     type LoginInforList = Api.Common.PaginatingQueryRecord<LoginInfor>;
+
+    /** cache info */
+    type CacheInfo = Common.CommonRecord<{
+      /** info */
+      info: {
+        /** Redis 版本 */
+        redis_version: string;
+        /** 运行模式 */
+        redis_mode: string;
+        /** 端口 */
+        tcp_port: number;
+        /** 客户端数 */
+        connected_clients: number;
+        /** 运行时间(天) */
+        uptime_in_days: number;
+        /** 使用内存 */
+        used_memory_human: string;
+        /** 使用 CPU */
+        used_cpu_user_children: string;
+        /** 内存配置 */
+        maxmemory_human: number;
+        /** AOF 是否开启 */
+        aof_enabled: string;
+        /** RDB 是否成功 */
+        rdb_last_bgsave_status: string;
+        /** Key 数量 */
+        dbSize: number;
+        /** 网络入口 */
+        instantaneous_input_kbps: number;
+        /** 网络出口 */
+        instantaneous_output_kbps: number;
+      };
+      /** db size */
+      dbSize: number;
+      /** command stats */
+      commandStats: {
+        name: string;
+        value: number;
+      }[];
+    }>;
   }
 }
diff --git a/src/typings/elegant-router.d.ts b/src/typings/elegant-router.d.ts
index ce8e761f..2bd7b6b3 100644
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -24,6 +24,7 @@ declare module "@elegant-router/types" {
     "iframe-page": "/iframe-page/:url";
     "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
     "monitor": "/monitor";
+    "monitor_cache": "/monitor/cache";
     "monitor_login-infor": "/monitor/login-infor";
     "monitor_oper-log": "/monitor/oper-log";
     "social-callback": "/social-callback";
@@ -107,6 +108,7 @@ declare module "@elegant-router/types" {
     | "login"
     | "social-callback"
     | "home"
+    | "monitor_cache"
     | "monitor_login-infor"
     | "monitor_oper-log"
     | "system_client"
diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
new file mode 100644
index 00000000..d02b80b7
--- /dev/null
+++ b/src/views/monitor/cache/index.vue
@@ -0,0 +1,697 @@
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { useLoading } from '@sa/hooks';
+import { fetchGetMonitorCacheInfo } from '@/service/api/monitor/cache';
+import { useEcharts } from '@/hooks/common/echarts';
+
+const { loading, startLoading, endLoading } = useLoading();
+const cacheInfo = ref<Api.Monitor.CacheInfo>();
+const fetchError = ref<string | null>(null);
+
+// 自动刷新相关状态
+const autoRefresh = ref(false);
+// 默认30秒刷新一次
+const refreshInterval = ref(30);
+const refreshTimer = ref<NodeJS.Timeout | null>(null);
+
+async function getCacheInfo() {
+  startLoading();
+  fetchError.value = null;
+
+  try {
+    const { error, data } = await fetchGetMonitorCacheInfo();
+    if (!error) {
+      cacheInfo.value = data;
+
+      // 确保在数据更新后调用图表更新
+      nextTick(() => {
+        updateCharts();
+        // 单独调用内存图表更新
+        updateMemoryChart();
+      });
+    } else {
+      fetchError.value = '获取缓存信息失败';
+    }
+  } catch {
+    fetchError.value = '获取缓存信息出错';
+  } finally {
+    endLoading();
+  }
+}
+
+// 处理手动刷新
+function handleRefresh() {
+  return getCacheInfo()
+    .then(() => {
+      // 额外的强制刷新尝试
+      nextTick(() => {
+        forceUpdateCharts();
+      });
+    })
+    .catch(() => {
+      // 即使请求失败，也尝试更新图表，以防有一些缓存数据可用
+      nextTick(() => {
+        if (cacheInfo.value) {
+          forceUpdateCharts();
+        }
+      });
+    });
+}
+
+// 处理自动刷新开关
+function toggleAutoRefresh() {
+  if (autoRefresh.value) {
+    startAutoRefresh();
+  } else {
+    stopAutoRefresh();
+  }
+}
+
+// 启动自动刷新
+function startAutoRefresh() {
+  stopAutoRefresh(); // 先清除可能存在的定时器
+  refreshTimer.value = setInterval(() => {
+    getCacheInfo();
+  }, refreshInterval.value * 1000);
+}
+
+// 停止自动刷新
+function stopAutoRefresh() {
+  if (refreshTimer.value) {
+    clearInterval(refreshTimer.value);
+    refreshTimer.value = null;
+  }
+}
+
+// 更新刷新间隔
+function updateRefreshInterval(value: number | null) {
+  if (value !== null) {
+    refreshInterval.value = value;
+    if (autoRefresh.value) {
+      startAutoRefresh(); // 重新启动定时器使新间隔生效
+    }
+  }
+}
+
+const { domRef: commandChartRef, updateOptions: updateCommandChart } = useEcharts(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    borderColor: '#e6e6e6',
+    borderWidth: 1,
+    textStyle: {
+      color: '#666'
+    },
+    extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);'
+  },
+  legend: {
+    type: 'scroll',
+    orient: 'vertical',
+    right: 10,
+    top: 20,
+    bottom: 20,
+    textStyle: {
+      color: '#666'
+    }
+  },
+  series: [
+    {
+      name: '命令',
+      type: 'pie',
+      roseType: 'radius',
+      radius: [15, 95],
+      center: ['40%', '50%'],
+      data: [] as Array<{ name: string; value: number }>,
+      animationEasing: 'cubicInOut',
+      animationDuration: 1000,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        formatter: '{b}: {d}%',
+        color: '#666'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: '14',
+          fontWeight: 'bold'
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }
+  ]
+}));
+
+const { domRef: memoryGaugeRef, setOptions } = useEcharts(
+  () => ({
+    tooltip: {
+      formatter: '内存使用情况'
+    },
+    series: [
+      {
+        name: '内存',
+        type: 'gauge',
+        min: 0,
+        max: 100,
+        detail: {
+          formatter: '{value}%',
+          fontSize: 16,
+          fontWeight: 'bold',
+          offsetCenter: [0, '70%']
+        },
+        data: [
+          {
+            value: 0,
+            name: '内存使用率'
+          }
+        ],
+        axisLine: {
+          lineStyle: {
+            width: 8,
+            color: [
+              [0.3, '#58d9f9'],
+              [0.7, '#26deca'],
+              [1, '#ff8c6a']
+            ]
+          }
+        },
+        pointer: {
+          itemStyle: {
+            color: 'auto'
+          }
+        },
+        axisTick: {
+          distance: -12,
+          length: 4,
+          lineStyle: {
+            color: '#999',
+            width: 1
+          }
+        },
+        splitLine: {
+          distance: -18,
+          length: 12,
+          lineStyle: {
+            color: '#999',
+            width: 1
+          }
+        },
+        axisLabel: {
+          color: '#666',
+          distance: 25,
+          fontSize: 12
+        },
+        title: {
+          offsetCenter: [0, '90%'],
+          fontSize: 14
+        },
+        animationDuration: 1000
+      }
+    ]
+  }),
+  {
+    // 自定义渲染和更新钩子
+    onRender: chart => {
+      chart.hideLoading();
+    },
+    onUpdated: chart => {
+      chart.hideLoading();
+    }
+  }
+);
+
+// 颜色配置
+const colorPalette = [
+  '#5da8ff',
+  '#8e9dff',
+  '#fedc69',
+  '#26deca',
+  '#ff8c6a',
+  '#58d9f9',
+  '#05c091',
+  '#7367f0',
+  '#9e86ff',
+  '#f8d3a5',
+  '#4a5bcc',
+  '#22bd7c'
+];
+
+// 更新图表数据
+function updateCharts() {
+  // 确保存在缓存信息才进行更新
+  if (!cacheInfo.value) {
+    return;
+  }
+
+  try {
+    // 更新命令统计图表
+    updateCommandChart(opts => {
+      try {
+        const commandStats = cacheInfo.value?.commandStats || [];
+        if (!commandStats.length) {
+          return opts;
+        }
+
+        // 解析命令统计数据 - 适配新的数据格式 {name, value}
+        const data = commandStats
+          .map(item => {
+            try {
+              if (!item || typeof item !== 'object') {
+                return { name: '未知命令', value: 0 };
+              }
+
+              // 检查API返回的数据格式
+              if ('name' in item && 'value' in item) {
+                const name = String(item.name);
+                // 确保将value转换为数字
+                let value = 0;
+                try {
+                  value = Number.parseInt(String(item.value), 10);
+                  if (Number.isNaN(value)) value = 0;
+                } catch {
+                  value = 0;
+                }
+                return { name, value };
+              }
+              // 老的处理逻辑，兼容旧格式
+              const key = Object.keys(item)[0] || '未知命令';
+              let value = 0;
+              try {
+                value = Number.parseInt(String(Object.values(item)[0] || '0'), 10);
+                if (Number.isNaN(value)) value = 0;
+              } catch {
+                value = 0;
+              }
+              return { name: key, value };
+            } catch {
+              return { name: '未知命令', value: 0 };
+            }
+          })
+          .filter(item => item.name !== '未知命令' || item.value > 0);
+
+        if (!data.length) {
+          return opts;
+        }
+
+        // 按值排序，取前10个命令，剩余的归为"其他"类别
+        const sortedData = data.sort((a, b) => b.value - a.value);
+
+        let pieData: Array<{ name: string; value: number }>;
+        if (sortedData.length > 10) {
+          const top10 = sortedData.slice(0, 10);
+          const others = sortedData.slice(10);
+          const othersValue = others.reduce((sum, item) => sum + item.value, 0);
+
+          pieData = [...top10, { name: '其他命令', value: othersValue }];
+        } else {
+          pieData = sortedData;
+        }
+
+        // 设置饼图数据和颜色
+        if (opts.series && Array.isArray(opts.series) && opts.series[0]) {
+          opts.series[0].data = pieData;
+
+          // 设置自定义颜色
+          const newItemStyle = {
+            ...(opts.series[0].itemStyle || {}),
+            color(param: { dataIndex: number }) {
+              const index = param.dataIndex % colorPalette.length;
+              return colorPalette[index >= 0 ? index : 0];
+            }
+          };
+
+          opts.series[0].itemStyle = newItemStyle;
+
+          // 增强tooltip展示
+          opts.tooltip = {
+            ...(opts.tooltip || {}),
+            formatter: function tooltipFormatter(params: any) {
+              if (!params || typeof params !== 'object') return '';
+
+              const name = params.name || '未知命令';
+              const value = typeof params.value === 'number' ? params.value : 0;
+              const percent = typeof params.percent === 'number' ? params.percent : 0;
+
+              return (
+                `<div style="font-weight:bold;margin-bottom:5px;font-size:14px;">${name}</div>` +
+                `<div>执行次数: <span style="font-weight:bold;float:right;">${value.toLocaleString()}</span></div>` +
+                `<div>占比: <span style="font-weight:bold;float:right;">${percent.toFixed(2)}%</span></div>`
+              );
+            } as any
+          };
+        }
+
+        return opts;
+      } catch {
+        return opts;
+      }
+    });
+
+    // 更新内存仪表盘
+    updateMemoryChart();
+  } catch {
+    // 错误已被捕获，无需处理
+  }
+}
+
+// 更新内存仪表盘数据的方法
+function updateMemoryChart() {
+  try {
+    const info = cacheInfo.value?.info;
+    if (!info) {
+      return;
+    }
+
+    // 使用类型断言处理API返回的实际数据结构
+    const infoAny = info as any;
+
+    // 获取内存信息字符串
+    const usedMemoryHuman = String(infoAny.used_memory_human || '0B');
+    const maxMemoryHuman = String(infoAny.maxmemory_human || '0B');
+
+    // 解析内存字符串
+    const usedMem = parseMemoryString(usedMemoryHuman);
+    const maxMem = parseMemoryString(maxMemoryHuman);
+
+    // 计算内存使用率
+    let usagePercent = 0;
+
+    if (maxMem.bytes > 0) {
+      // 如果有最大内存限制，计算使用百分比
+      usagePercent = Math.min(100, Math.round((usedMem.bytes / maxMem.bytes) * 100));
+    } else if (infoAny.total_system_memory) {
+      // 使用系统总内存作为参考
+      try {
+        const totalMemoryBytes = Number(infoAny.total_system_memory);
+        if (totalMemoryBytes > 0) {
+          usagePercent = Math.min(100, Math.round((usedMem.bytes / totalMemoryBytes) * 100));
+        } else {
+          // 无法计算百分比，显示绝对值
+          usagePercent = 50; // 仪表盘显示中间值
+        }
+      } catch {
+        usagePercent = 50;
+      }
+    } else {
+      // 没有最大内存限制，显示绝对值
+      usagePercent = 50; // 仪表盘显示中间值
+    }
+
+    // 完整的仪表盘选项
+    const gaugeOption = {
+      tooltip: {
+        formatter:
+          maxMem.bytes > 0
+            ? `内存使用: ${usedMemoryHuman}<br/>最大内存: ${maxMemoryHuman}<br/>使用率: ${usagePercent}%`
+            : `内存使用: ${usedMemoryHuman}<br/>最大内存: 未设置限制`
+      },
+      series: [
+        {
+          name: '内存',
+          type: 'gauge' as const,
+          min: 0,
+          max: 100,
+          detail: {
+            formatter: maxMem.bytes > 0 ? '{value}%' : usedMemoryHuman,
+            fontSize: 16,
+            fontWeight: 'bold' as const,
+            offsetCenter: [0, '70%']
+          },
+          data: [
+            {
+              value: usagePercent,
+              name: maxMem.bytes > 0 ? '内存使用率' : '内存使用量'
+            }
+          ],
+          axisLine: {
+            lineStyle: {
+              width: 8,
+              color: [
+                [0.3, '#58d9f9'],
+                [0.7, '#26deca'],
+                [1, '#ff8c6a']
+              ]
+            }
+          },
+          pointer: {
+            itemStyle: {
+              color: 'auto'
+            }
+          },
+          axisTick: {
+            distance: -12,
+            length: 4,
+            lineStyle: {
+              color: '#999',
+              width: 1
+            }
+          },
+          splitLine: {
+            distance: -18,
+            length: 12,
+            lineStyle: {
+              color: '#999',
+              width: 1
+            }
+          },
+          axisLabel: {
+            color: '#666',
+            distance: 25,
+            fontSize: 12
+          },
+          title: {
+            offsetCenter: [0, '90%'],
+            fontSize: 14
+          },
+          animationDuration: 1000
+        }
+      ]
+    };
+
+    // 直接设置图表选项
+    if (memoryGaugeRef.value) {
+      // 使用类型断言绕过TypeScript类型检查
+      setOptions(gaugeOption as any);
+    }
+  } catch {
+    // 错误已被捕获，无需处理
+  }
+}
+
+// 解析内存字符串，例如 "3.6MB" -> { value: 3.6, unit: "MB" }
+function parseMemoryString(memoryStr: string): { value: number; unit: string; bytes: number } {
+  if (!memoryStr || typeof memoryStr !== 'string') {
+    return { value: 0, unit: 'B', bytes: 0 };
+  }
+
+  try {
+    // 用正则表达式提取数值和单位
+    const match = memoryStr.match(/^([\d.]+)([KMGTP]?B)?$/i);
+    if (!match) {
+      return { value: 0, unit: 'B', bytes: 0 };
+    }
+
+    const value = Number.parseFloat(match[1]);
+    const unit = (match[2] || 'B').toUpperCase();
+
+    // 计算字节数
+    const unitIndex = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'].indexOf(unit);
+    const bytes = unitIndex >= 0 ? value * 1024 ** unitIndex : value;
+
+    return { value, unit, bytes };
+  } catch {
+    return { value: 0, unit: 'B', bytes: 0 };
+  }
+}
+
+// 命令统计图表强制刷新
+function forceUpdateCharts() {
+  try {
+    if (memoryGaugeRef.value) {
+      updateMemoryChart();
+    }
+
+    if (commandChartRef.value) {
+      // 更新命令统计图表
+      updateCommandChart(opts => {
+        // ... existing code ...
+        return opts;
+      });
+    }
+  } catch {
+    // 错误已被捕获，无需处理
+  }
+}
+
+// 改进组件挂载处理
+onMounted(async () => {
+  try {
+    await getCacheInfo();
+
+    // 确保图表被渲染后，再次尝试强制更新
+    setTimeout(() => {
+      forceUpdateCharts();
+    }, 500);
+  } catch {
+    fetchError.value = '初始化数据失败，请尝试刷新';
+  }
+});
+
+// 确保在组件卸载时清理所有资源
+onUnmounted(() => {
+  stopAutoRefresh();
+  // 清理图表资源
+  try {
+    if (commandChartRef.value) {
+      commandChartRef.value = null;
+    }
+    if (memoryGaugeRef.value) {
+      memoryGaugeRef.value = null;
+    }
+  } catch {
+    // 错误已被捕获，无需处理
+  }
+});
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-y-auto lt-sm:overflow-auto">
+    <NSpace vertical :size="16">
+      <!-- 控制面板 -->
+      <NCard :bordered="false" class="control-panel card-wrapper">
+        <div class="flex flex-wrap items-center justify-between gap-y-12px">
+          <h3 class="m-0 text-16px font-medium">Redis 缓存监控</h3>
+          <div class="flex flex-wrap items-center gap-16px">
+            <div class="flex items-center gap-8px">
+              <span class="whitespace-nowrap">自动刷新：</span>
+              <NSwitch v-model:value="autoRefresh" @update:value="toggleAutoRefresh" />
+            </div>
+            <div v-if="autoRefresh" class="flex items-center gap-8px">
+              <span class="whitespace-nowrap">间隔 (秒)：</span>
+              <NInputNumber
+                v-model:value="refreshInterval"
+                :min="5"
+                :max="300"
+                size="small"
+                @update:value="updateRefreshInterval"
+              />
+            </div>
+            <NButton
+              type="primary"
+              :loading="loading"
+              :disabled="autoRefresh"
+              class="min-w-80px"
+              @click="handleRefresh"
+            >
+              {{ loading ? '刷新中...' : '刷新数据' }}
+            </NButton>
+          </div>
+        </div>
+      </NCard>
+
+      <!-- 错误提示 -->
+      <NAlert v-if="fetchError" type="error" closable>
+        {{ fetchError }}
+      </NAlert>
+
+      <NCard title="Redis 基本信息" :bordered="false" class="info-card card-wrapper">
+        <NSpin :show="loading">
+          <NDescriptions :column="4" bordered label-placement="left" label-class="w-150px">
+            <NDescriptionsItem label="Redis 版本">{{ cacheInfo?.info?.redis_version }}</NDescriptionsItem>
+            <NDescriptionsItem label="运行模式">
+              {{ cacheInfo?.info?.redis_mode === 'standalone' ? '单机' : '集群' }}
+            </NDescriptionsItem>
+            <NDescriptionsItem label="端口">{{ cacheInfo?.info?.tcp_port }}</NDescriptionsItem>
+            <NDescriptionsItem label="客户端数">{{ cacheInfo?.info?.connected_clients }}</NDescriptionsItem>
+            <NDescriptionsItem label="运行时间(天)">{{ cacheInfo?.info?.uptime_in_days }}</NDescriptionsItem>
+            <NDescriptionsItem label="使用内存">{{ cacheInfo?.info?.used_memory_human }}</NDescriptionsItem>
+            <NDescriptionsItem label="使用CPU">
+              {{
+                cacheInfo?.info?.used_cpu_user_children
+                  ? parseFloat(cacheInfo?.info?.used_cpu_user_children).toFixed(2)
+                  : ''
+              }}
+            </NDescriptionsItem>
+            <NDescriptionsItem label="内存配置">{{ cacheInfo?.info?.maxmemory_human }}</NDescriptionsItem>
+            <NDescriptionsItem label="AOF 开启">
+              {{ cacheInfo?.info?.aof_enabled === '0' ? '否' : '是' }}
+            </NDescriptionsItem>
+            <NDescriptionsItem label="RDB 状态">
+              {{ cacheInfo?.info?.rdb_last_bgsave_status }}
+            </NDescriptionsItem>
+            <NDescriptionsItem label="Key 数量">{{ cacheInfo?.dbSize }}</NDescriptionsItem>
+            <NDescriptionsItem label="网络入口/出口">
+              {{ cacheInfo?.info?.instantaneous_input_kbps }}kps/{{ cacheInfo?.info?.instantaneous_output_kbps }}kps
+            </NDescriptionsItem>
+          </NDescriptions>
+        </NSpin>
+      </NCard>
+
+      <NGrid :cols="2" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
+        <NGi span="0:24 1000:12">
+          <NCard title="命令统计" :bordered="false" class="chart-card card-wrapper">
+            <NSpin :show="loading">
+              <div ref="commandChartRef" class="h-360px overflow-hidden"></div>
+            </NSpin>
+          </NCard>
+        </NGi>
+        <NGi span="0:24 1000:12">
+          <NCard title="内存信息" :bordered="false" class="chart-card card-wrapper">
+            <NSpin :show="loading">
+              <div ref="memoryGaugeRef" class="h-360px overflow-hidden"></div>
+            </NSpin>
+          </NCard>
+        </NGi>
+      </NGrid>
+    </NSpace>
+  </div>
+</template>
+
+<style scoped>
+.card-wrapper {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.card-wrapper:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.control-panel {
+  background: linear-gradient(to right, rgba(115, 103, 240, 0.05), rgba(115, 103, 240, 0.01));
+}
+
+.info-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.chart-card {
+  min-height: 420px;
+}
+
+@media (max-width: 768px) {
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .chart-card {
+    min-height: 360px;
+  }
+}
+
+@media (max-width: 480px) {
+  .chart-card {
+    min-height: 300px;
+  }
+}
+</style>