feat：增加 redis 监控

apps/web-antd/src/api/infra/redis/index.ts

@@ -0,0 +1,188 @@
+import { requestClient } from '#/api/request';
+
+export namespace InfraRedisApi {
+  /** Redis 监控信息 */
+  export interface InfraRedisMonitorInfo {
+    info: InfraRedisInfo;
+    dbSize: number;
+    commandStats: InfraRedisCommandStats[];
+  }
+
+  /** Redis 信息 */
+  export interface InfraRedisInfo {
+    io_threaded_reads_processed: string;
+    tracking_clients: string;
+    uptime_in_seconds: string;
+    cluster_connections: string;
+    current_cow_size: string;
+    maxmemory_human: string;
+    aof_last_cow_size: string;
+    master_replid2: string;
+    mem_replication_backlog: string;
+    aof_rewrite_scheduled: string;
+    total_net_input_bytes: string;
+    rss_overhead_ratio: string;
+    hz: string;
+    current_cow_size_age: string;
+    redis_build_id: string;
+    errorstat_BUSYGROUP: string;
+    aof_last_bgrewrite_status: string;
+    multiplexing_api: string;
+    client_recent_max_output_buffer: string;
+    allocator_resident: string;
+    mem_fragmentation_bytes: string;
+    aof_current_size: string;
+    repl_backlog_first_byte_offset: string;
+    tracking_total_prefixes: string;
+    redis_mode: string;
+    redis_git_dirty: string;
+    aof_delayed_fsync: string;
+    allocator_rss_bytes: string;
+    repl_backlog_histlen: string;
+    io_threads_active: string;
+    rss_overhead_bytes: string;
+    total_system_memory: string;
+    loading: string;
+    evicted_keys: string;
+    maxclients: string;
+    cluster_enabled: string;
+    redis_version: string;
+    repl_backlog_active: string;
+    mem_aof_buffer: string;
+    allocator_frag_bytes: string;
+    io_threaded_writes_processed: string;
+    instantaneous_ops_per_sec: string;
+    used_memory_human: string;
+    total_error_replies: string;
+    role: string;
+    maxmemory: string;
+    used_memory_lua: string;
+    rdb_current_bgsave_time_sec: string;
+    used_memory_startup: string;
+    used_cpu_sys_main_thread: string;
+    lazyfree_pending_objects: string;
+    aof_pending_bio_fsync: string;
+    used_memory_dataset_perc: string;
+    allocator_frag_ratio: string;
+    arch_bits: string;
+    used_cpu_user_main_thread: string;
+    mem_clients_normal: string;
+    expired_time_cap_reached_count: string;
+    unexpected_error_replies: string;
+    mem_fragmentation_ratio: string;
+    aof_last_rewrite_time_sec: string;
+    master_replid: string;
+    aof_rewrite_in_progress: string;
+    lru_clock: string;
+    maxmemory_policy: string;
+    run_id: string;
+    latest_fork_usec: string;
+    tracking_total_items: string;
+    total_commands_processed: string;
+    expired_keys: string;
+    errorstat_ERR: string;
+    used_memory: string;
+    module_fork_in_progress: string;
+    errorstat_WRONGPASS: string;
+    aof_buffer_length: string;
+    dump_payload_sanitizations: string;
+    mem_clients_slaves: string;
+    keyspace_misses: string;
+    server_time_usec: string;
+    executable: string;
+    lazyfreed_objects: string;
+    db0: string;
+    used_memory_peak_human: string;
+    keyspace_hits: string;
+    rdb_last_cow_size: string;
+    aof_pending_rewrite: string;
+    used_memory_overhead: string;
+    active_defrag_hits: string;
+    tcp_port: string;
+    uptime_in_days: string;
+    used_memory_peak_perc: string;
+    current_save_keys_processed: string;
+    blocked_clients: string;
+    total_reads_processed: string;
+    expire_cycle_cpu_milliseconds: string;
+    sync_partial_err: string;
+    used_memory_scripts_human: string;
+    aof_current_rewrite_time_sec: string;
+    aof_enabled: string;
+    process_supervised: string;
+    master_repl_offset: string;
+    used_memory_dataset: string;
+    used_cpu_user: string;
+    rdb_last_bgsave_status: string;
+    tracking_total_keys: string;
+    atomicvar_api: string;
+    allocator_rss_ratio: string;
+    client_recent_max_input_buffer: string;
+    clients_in_timeout_table: string;
+    aof_last_write_status: string;
+    mem_allocator: string;
+    used_memory_scripts: string;
+    used_memory_peak: string;
+    process_id: string;
+    master_failover_state: string;
+    errorstat_NOAUTH: string;
+    used_cpu_sys: string;
+    repl_backlog_size: string;
+    connected_slaves: string;
+    current_save_keys_total: string;
+    gcc_version: string;
+    total_system_memory_human: string;
+    sync_full: string;
+    connected_clients: string;
+    module_fork_last_cow_size: string;
+    total_writes_processed: string;
+    allocator_active: string;
+    total_net_output_bytes: string;
+    pubsub_channels: string;
+    current_fork_perc: string;
+    active_defrag_key_hits: string;
+    rdb_changes_since_last_save: string;
+    instantaneous_input_kbps: string;
+    used_memory_rss_human: string;
+    configured_hz: string;
+    expired_stale_perc: string;
+    active_defrag_misses: string;
+    used_cpu_sys_children: string;
+    number_of_cached_scripts: string;
+    sync_partial_ok: string;
+    used_memory_lua_human: string;
+    rdb_last_save_time: string;
+    pubsub_patterns: string;
+    slave_expires_tracked_keys: string;
+    redis_git_sha1: string;
+    used_memory_rss: string;
+    rdb_last_bgsave_time_sec: string;
+    os: string;
+    mem_not_counted_for_evict: string;
+    active_defrag_running: string;
+    rejected_connections: string;
+    aof_rewrite_buffer_length: string;
+    total_forks: string;
+    active_defrag_key_misses: string;
+    allocator_allocated: string;
+    aof_base_size: string;
+    instantaneous_output_kbps: string;
+    second_repl_offset: string;
+    rdb_bgsave_in_progress: string;
+    used_cpu_user_children: string;
+    total_connections_received: string;
+    migrate_cached_sockets: string;
+  }
+
+  /** Redis 命令统计 */
+  export interface InfraRedisCommandStats {
+    command: string;
+    calls: number;
+    usec: number;
+  }
+}
+
+/** 获取 Redis 监控信息 */
+export function getRedisMonitorInfo() {
+  return requestClient.get<InfraRedisApi.InfraRedisMonitorInfo>('/infra/redis/get-monitor-info');
+}

apps/web-antd/src/views/infra/job/index.vue

@@ -12,12 +12,11 @@ import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { useRouter } from 'vue-router';
-import {InfraApiErrorLogProcessStatusEnum, InfraJobStatusEnum} from '#/utils/constants';
+import { InfraJobStatusEnum} from '#/utils/constants';
 import { deleteJob, exportJob, getJobPage, runJob, updateJobStatus } from '#/api/infra/job';
 import { downloadByData } from '#/utils/download';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import {updateApiErrorLogStatus} from '#/api/infra/api-error-log';
 
 const { push } = useRouter();
 

apps/web-antd/src/views/infra/redis/index.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { Card } from 'ant-design-vue';
+import { Page } from '@vben/common-ui';
+import Memory from './modules/memory.vue';
+import Commands from './modules/commands.vue';
+import Info from './modules/info.vue';
+import { DocAlert } from '#/components/doc-alert';
+
+import { onMounted, ref } from 'vue';
+import { getRedisMonitorInfo } from '#/api/infra/redis';
+
+const redisData = ref<InfraRedisApi.InfraRedisMonitorInfo>();
+
+/** 统一加载 Redis 数据 */
+const loadRedisData = async () => {
+  try {
+    redisData.value = await getRedisMonitorInfo();
+  } catch (error) {
+    console.error('加载 Redis 数据失败', error);
+  }
+};
+
+onMounted(() => {
+  loadRedisData();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DocAlert title="Redis 缓存" url="https://doc.iocoder.cn/redis-cache/" />
+    <DocAlert title="本地缓存" url="https://doc.iocoder.cn/local-cache/" />
+
+    <Card class="mt-5" title="Redis 概览">
+      <Info :redis-data="redisData" />
+    </Card>
+
+    <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-4">
+      <Card title="内存使用">
+        <Memory :redis-data="redisData" />
+      </Card>
+
+      <Card title="命令统计">
+        <Commands :redis-data="redisData" />
+      </Card>
+    </div>
+  </Page>
+</template>

apps/web-antd/src/views/infra/redis/modules/commands.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { onMounted, ref, watch } from 'vue';
+
+const props = defineProps<{
+  redisData?: InfraRedisApi.InfraRedisMonitorInfo;
+}>();
+
+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>

apps/web-antd/src/views/infra/redis/modules/info.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { type InfraRedisApi } from '#/api/infra/redis';
+
+import { Descriptions } from 'ant-design-vue';
+
+defineProps<{
+  redisData?: InfraRedisApi.InfraRedisMonitorInfo;
+}>();
+</script>
+
+<template>
+  <Descriptions :column="6" bordered size="middle" :label-style="{ width: '138px' }">
+    <Descriptions.Item label="Redis 版本">
+      {{ redisData?.info?.redis_version }}
+    </Descriptions.Item>
+    <Descriptions.Item label="运行模式">
+      {{ redisData?.info?.redis_mode == 'standalone' ? '单机' : '集群' }}
+    </Descriptions.Item>
+    <Descriptions.Item label="端口">
+      {{ redisData?.info?.tcp_port }}
+    </Descriptions.Item>
+    <Descriptions.Item label="客户端数">
+      {{ redisData?.info?.connected_clients }}
+    </Descriptions.Item>
+    <Descriptions.Item label="运行时间(天)">
+      {{ redisData?.info?.uptime_in_days }}
+    </Descriptions.Item>
+    <Descriptions.Item label="使用内存">
+      {{ redisData?.info?.used_memory_human }}
+    </Descriptions.Item>
+    <Descriptions.Item label="使用 CPU">
+      {{ redisData?.info ? parseFloat(redisData?.info?.used_cpu_user_children).toFixed(2) : '' }}
+    </Descriptions.Item>
+    <Descriptions.Item label="内存配置">
+      {{ redisData?.info?.maxmemory_human }}
+    </Descriptions.Item>
+    <Descriptions.Item label="AOF 是否开启">
+      {{ redisData?.info?.aof_enabled == '0' ? '否' : '是' }}
+    </Descriptions.Item>
+    <Descriptions.Item label="RDB 是否成功">
+      {{ redisData?.info?.rdb_last_bgsave_status }}
+    </Descriptions.Item>
+    <Descriptions.Item label="Key 数量">
+      {{ redisData?.dbSize }}
+    </Descriptions.Item>
+    <Descriptions.Item label="网络入口/出口">
+      {{ redisData?.info?.instantaneous_input_kbps }}kps /
+      {{ redisData?.info?.instantaneous_output_kbps }}kps
+    </Descriptions.Item>
+  </Descriptions>
+</template>

apps/web-antd/src/views/infra/redis/modules/memory.vue

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { onMounted, ref, watch } from 'vue';
+
+const props = defineProps<{
+  redisData?: InfraRedisApi.InfraRedisMonitorInfo;
+}>();
+
+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 ? parseFloat(match[1] as string) : 0;
+  } catch (e) {
+    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>

apps/web-antd/src/views/infra/server/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Page } from '@vben/common-ui'
-import { DocAlert } from '#/components/doc-alert'
 import { IFrame } from '#/components/iframe'
+import { DocAlert } from '#/components/doc-alert'
 
 import { ref, onMounted } from 'vue'
 import { getConfigKey } from '#/api/infra/config'

packages/effects/plugins/src/echarts/echarts.ts

@@ -2,6 +2,7 @@ import type {
   // 系列类型的定义后缀都为 SeriesOption
   BarSeriesOption,
   LineSeriesOption,
+  GaugeSeriesOption,
 } from 'echarts/charts';
 import type {
   DatasetComponentOption,
@@ -12,7 +13,7 @@ import type {
 } from 'echarts/components';
 import type { ComposeOption } from 'echarts/core';
 
-import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import { BarChart, LineChart, PieChart, RadarChart, GaugeChart } from 'echarts/charts';
 import {
   // 数据集组件
   DatasetComponent,
@@ -34,6 +35,7 @@ export type ECOption = ComposeOption<
   | DatasetComponentOption
   | GridComponentOption
   | LineSeriesOption
+  | GaugeSeriesOption
   | TitleComponentOption
   | TooltipComponentOption
 >;
@@ -49,6 +51,7 @@ echarts.use([
   TransformComponent,
   BarChart,
   LineChart,
+  GaugeChart,
   LabelLayout,
   UniversalTransition,
   CanvasRenderer,