From a597f80b23084eff7e08beef6d21ecf5b715e567 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 14 May 2025 15:13:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20ele=20infra=20redi?=
 =?UTF-8?q?s=20=E7=9B=91=E6=8E=A7=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-ele/src/views/infra/redis/index.vue  |  54 +++++++
 .../views/infra/redis/modules/commands.vue    | 103 +++++++++++++
 .../src/views/infra/redis/modules/info.vue    |  55 +++++++
 .../src/views/infra/redis/modules/memory.vue  | 137 ++++++++++++++++++
 4 files changed, 349 insertions(+)
 create mode 100644 apps/web-ele/src/views/infra/redis/index.vue
 create mode 100644 apps/web-ele/src/views/infra/redis/modules/commands.vue
 create mode 100644 apps/web-ele/src/views/infra/redis/modules/info.vue
 create mode 100644 apps/web-ele/src/views/infra/redis/modules/memory.vue

diff --git a/apps/web-ele/src/views/infra/redis/index.vue b/apps/web-ele/src/views/infra/redis/index.vue
new file mode 100644
index 00000000..a2347922
--- /dev/null
+++ b/apps/web-ele/src/views/infra/redis/index.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { ElCard } from 'element-plus';
+
+import { getRedisMonitorInfo } from '#/api/infra/redis';
+import { DocAlert } from '#/components/doc-alert';
+
+import Commands from './modules/commands.vue';
+import Info from './modules/info.vue';
+import Memory from './modules/memory.vue';
+
+const redisData = ref<InfraRedisApi.RedisMonitorInfo>();
+
+/** 统一加载 Redis 数据 */
+const loadRedisData = async () => {
+  try {
+    redisData.value = await getRedisMonitorInfo();
+  } catch (error) {
+    console.error('加载 Redis 数据失败', error);
+  }
+};
+
+onMounted(() => {
+  loadRedisData();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="Redis 缓存" url="https://doc.iocoder.cn/redis-cache/" />
+      <DocAlert title="本地缓存" url="https://doc.iocoder.cn/local-cache/" />
+    </template>
+
+    <ElCard class="mt-5" header="Redis 概览">
+      <Info :redis-data="redisData" />
+    </ElCard>
+
+    <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
+      <ElCard header="内存使用">
+        <Memory :redis-data="redisData" />
+      </ElCard>
+
+      <ElCard header="命令统计">
+        <Commands :redis-data="redisData" />
+      </ElCard>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/infra/redis/modules/commands.vue b/apps/web-ele/src/views/infra/redis/modules/commands.vue
new file mode 100644
index 00000000..5c7e375b
--- /dev/null
+++ b/apps/web-ele/src/views/infra/redis/modules/commands.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const props = defineProps<{
+  redisData?: InfraRedisApi.RedisMonitorInfo;
+}>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 渲染命令统计图表 */
+const renderCommandStats = () => {
+  if (!props.redisData?.commandStats) {
+    return;
+  }
+
+  // 处理数据
+  const commandStats = [] as any[];
+  const nameList = [] as string[];
+  props.redisData.commandStats.forEach((row) => {
+    commandStats.push({
+      name: row.command,
+      value: row.calls,
+    });
+    nameList.push(row.command);
+  });
+
+  // 渲染图表
+  renderEcharts({
+    title: {
+      text: '命令统计',
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
+    },
+    legend: {
+      type: 'scroll',
+      orient: 'vertical',
+      right: 30,
+      top: 10,
+      bottom: 20,
+      data: nameList,
+      textStyle: {
+        color: '#a1a1a1',
+      },
+    },
+    series: [
+      {
+        name: '命令',
+        type: 'pie',
+        radius: [20, 120],
+        center: ['40%', '60%'],
+        data: commandStats,
+        roseType: 'radius',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          label: {
+            show: true,
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+  });
+};
+
+/** 监听数据变化，重新渲染图表 */
+watch(
+  () => props.redisData,
+  (newVal) => {
+    if (newVal) {
+      renderCommandStats();
+    }
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  if (props.redisData) {
+    renderCommandStats();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <EchartsUI ref="chartRef" height="420px" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/infra/redis/modules/info.vue b/apps/web-ele/src/views/infra/redis/modules/info.vue
new file mode 100644
index 00000000..5d4f02d8
--- /dev/null
+++ b/apps/web-ele/src/views/infra/redis/modules/info.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
+
+defineProps<{
+  redisData?: InfraRedisApi.RedisMonitorInfo;
+}>();
+</script>
+
+<template>
+  <ElDescriptions :column="6" border size="default" :label-width="138">
+    <ElDescriptionsItem label="Redis 版本">
+      {{ redisData?.info?.redis_version }}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label="运行模式">
+      {{ redisData?.info?.redis_mode === 'standalone' ? '单机' : '集群' }}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label="端口">
+      {{ redisData?.info?.tcp_port }}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label="客户端数">
+      {{ redisData?.info?.connected_clients }}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label="运行时间(天)">
+      {{ redisData?.info?.uptime_in_days }}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label="使用内存">
+      {{ redisData?.info?.used_memory_human }}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label="使用 CPU">
+      {{
+        redisData?.info
+          ? parseFloat(redisData?.info?.used_cpu_user_children).toFixed(2)
+          : ''
+      }}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label="内存配置">
+      {{ redisData?.info?.maxmemory_human }}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label="AOF 是否开启">
+      {{ redisData?.info?.aof_enabled === '0' ? '否' : '是' }}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label="RDB 是否成功">
+      {{ redisData?.info?.rdb_last_bgsave_status }}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label="Key 数量">
+      {{ redisData?.dbSize }}
+    </ElDescriptionsItem>
+    <ElDescriptionsItem label="网络入口/出口">
+      {{ redisData?.info?.instantaneous_input_kbps }}kps /
+      {{ redisData?.info?.instantaneous_output_kbps }}kps
+    </ElDescriptionsItem>
+  </ElDescriptions>
+</template>
diff --git a/apps/web-ele/src/views/infra/redis/modules/memory.vue b/apps/web-ele/src/views/infra/redis/modules/memory.vue
new file mode 100644
index 00000000..04f26756
--- /dev/null
+++ b/apps/web-ele/src/views/infra/redis/modules/memory.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const props = defineProps<{
+  redisData?: InfraRedisApi.RedisMonitorInfo;
+}>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 解析内存值，移除单位，转为数字 */
+const parseMemoryValue = (memStr: string | undefined): number => {
+  if (!memStr) {
+    return 0;
+  }
+  try {
+    // 从字符串中提取数字部分，例如 "1.2M" 中的 1.2
+    const str = String(memStr); // 显式转换为字符串类型
+    const match = str.match(/^([\d.]+)/);
+    return match ? Number.parseFloat(match[1] as string) : 0;
+  } catch {
+    return 0;
+  }
+};
+
+/** 渲染内存使用图表 */
+const renderMemoryChart = () => {
+  if (!props.redisData?.info) {
+    return;
+  }
+
+  // 处理数据
+  const usedMemory = props.redisData.info.used_memory_human || '0';
+  const memoryValue = parseMemoryValue(usedMemory);
+
+  // 渲染图表
+  renderEcharts({
+    title: {
+      text: '内存使用情况',
+      left: 'center',
+    },
+    tooltip: {
+      formatter: `{b} <br/>{a} : ${usedMemory}`,
+    },
+    series: [
+      {
+        name: '峰值',
+        type: 'gauge',
+        min: 0,
+        max: 100,
+        splitNumber: 10,
+        color: '#F5C74E',
+        radius: '85%',
+        center: ['50%', '50%'],
+        startAngle: 225,
+        endAngle: -45,
+        axisLine: {
+          lineStyle: {
+            color: [
+              [0.2, '#7FFF00'],
+              [0.8, '#00FFFF'],
+              [1, '#FF0000'],
+            ],
+            width: 10,
+          },
+        },
+        axisTick: {
+          length: 5,
+          lineStyle: {
+            color: '#76D9D7',
+          },
+        },
+        splitLine: {
+          length: 20,
+          lineStyle: {
+            color: '#76D9D7',
+          },
+        },
+        axisLabel: {
+          color: '#76D9D7',
+          distance: 15,
+          fontSize: 15,
+        },
+        pointer: {
+          width: 7,
+          show: true,
+        },
+        detail: {
+          show: true,
+          offsetCenter: [0, '50%'],
+          color: 'auto',
+          fontSize: 30,
+          formatter: usedMemory,
+        },
+        progress: {
+          show: true,
+        },
+        data: [
+          {
+            value: memoryValue,
+            name: '内存消耗',
+          },
+        ],
+      },
+    ],
+  });
+};
+
+/** 监听数据变化，重新渲染图表 */
+watch(
+  () => props.redisData,
+  (newVal) => {
+    if (newVal) {
+      renderMemoryChart();
+    }
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  if (props.redisData) {
+    renderMemoryChart();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <EchartsUI ref="chartRef" height="420px" />
+  </div>
+</template>