feat: add redis memory and command statistics components (#16)

* feat: add Redis memory and command statistics components

* fix: label display

* refactor: improve chart rendering logic and color handling

* feat: integrate Ant Design Vue for improved UI components

* refactor: replace Ant Design components with their Vue counterparts for consistency

* feat: add Redis monitoring titles and descriptions for better clarity

Author: huyuwei1996

apps/web-antd/src/bootstrap.ts

@@ -9,13 +9,16 @@ import '@vben/styles';
 import '@vben/styles/antd';
 
 import { useTitle } from '@vueuse/core';
+import Antd from 'ant-design-vue';
 
 import { $t, setupI18n } from '#/locales';
 
 import { initComponentAdapter } from './adapter/component';
 import App from './app.vue';
 import { router } from './router';
 
+import 'ant-design-vue/dist/reset.css';
+
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
   await initComponentAdapter();
@@ -49,6 +52,9 @@ async function bootstrap(namespace: string) {
   // 初始化 tippy
   initTippy(app);
 
+  // 全局加载 antdv
+  app.use(Antd);
+
   // 配置路由及路由守卫
   app.use(router);
 

apps/web-antd/src/locales/langs/en-US/page.json

@@ -41,5 +41,25 @@
     "mark": "Mark",
     "operation": "Operation",
     "updated_time": "Update time"
+  },
+  "monitor": {
+    "redis": {
+      "desc": {
+        "title": "Basic Information"
+      },
+      "cards": {
+        "commands": {
+          "title": "Command Statistics"
+        },
+        "memory": {
+          "title": "Memory Status"
+        }
+      },
+      "stats": {
+        "title": {
+          "used_memory": "Used Memory"
+        }
+      }
+    }
   }
 }

apps/web-antd/src/locales/langs/zh-CN/page.json

@@ -41,5 +41,25 @@
     "mark": "备注",
     "operation": "操作",
     "updated_time": "更新时间"
+  },
+  "monitor": {
+    "redis": {
+      "desc": {
+        "title": "基本信息"
+      },
+      "cards": {
+        "commands": {
+          "title": "命令统计"
+        },
+        "memory": {
+          "title": "内存情况"
+        }
+      },
+      "stats": {
+        "title": {
+          "used_memory": "已使用内存"
+        }
+      }
+    }
   }
 }

apps/web-antd/src/views/monitor/redis/components/active-series.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const props = defineProps({
+  memory: {
+    type: Array as PropType<Record<string, any>[]>,
+    required: true,
+    default: () => [] as Record<string, any>[],
+  },
+});
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    progress: {
+      show: true,
+    },
+    series: [
+      {
+        type: 'gauge',
+        data: props.memory,
+        axisLine: {
+          lineStyle: {
+            width: 30,
+            color: [
+              [0.3, '#67e0e3'],
+              [0.7, '#37a2da'],
+              [1, '#fd666d'],
+            ],
+          },
+        },
+        pointer: {
+          itemStyle: {
+            color: 'auto',
+          },
+        },
+      },
+    ],
+    detail: {
+      valueAnimation: true,
+      formatter: '{value} M',
+      color: 'auto',
+    },
+    tooltip: {
+      formatter: '{a} <br/>{b} : {c} M',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" height="350px" />
+</template>

apps/web-antd/src/views/monitor/redis/components/commands-series.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { usePreferences } from '@vben/preferences';
+
+const props = defineProps({
+  stats: {
+    type: Array as PropType<Record<string, any>[]>,
+    required: true,
+    default: () => [] as Record<string, any>[],
+  },
+});
+
+const { isDark } = usePreferences();
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+const labelColor = computed(() =>
+  isDark.value ? 'rgba(255, 255, 255, 0.7)' : '#1F2329',
+);
+
+const renderChart = () => {
+  renderEcharts({
+    series: [
+      {
+        type: 'pie',
+        data: props.stats,
+        label: {
+          formatter: '{b}: {d}%',
+          fontSize: 14,
+          color: labelColor.value,
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)',
+    },
+  });
+};
+
+onMounted(() => {
+  renderChart();
+});
+
+watch(
+  [isDark, () => props.stats],
+  () => {
+    renderChart();
+  },
+  { deep: false },
+);
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" height="350px" />
+</template>

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

@@ -1,18 +1,19 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 
+import { $t } from '@vben/locales';
+
 import { getRedisMonitor } from '#/api';
 import ActiveSeries from '#/views/monitor/redis/components/active-series.vue';
 import CommandsSeries from '#/views/monitor/redis/components/commands-series.vue';
 
 const loading = ref<boolean>(false);
 const redisInfo = ref<Record<string, any>>({});
 const redisStats = ref<Record<string, any>[]>([]);
-
 const usedMemory = ref<number>(0);
 const redisUsedMemory = computed(() => [
   {
-    name: '已使用内存',
+    name: $t('page.monitor.redis.stats.title.used_memory'),
     value: usedMemory.value,
   },
 ]);
@@ -23,8 +24,8 @@ const fetchRedisData = async () => {
     const res = await getRedisMonitor();
     redisInfo.value = res.info;
     redisStats.value = res.stats;
-  } catch {
-    // console.error(err);
+  } catch (error) {
+    console.error(error);
   } finally {
     loading.value = false;
   }
@@ -39,22 +40,36 @@ watch(redisInfo, (val) => {
 </script>
 
 <template>
-  <a-card title="基本信息" :loading="loading" class="info-card">
-    <a-descriptions>
-      <a-descriptions-item label="Test">123</a-descriptions-item>
-    </a-descriptions>
-  </a-card>
-  <a-space style="padding-top: 22px" />
-  <a-row :gutter="20">
-    <a-col :span="12">
-      <a-card title="命令统计" :loading="loading" class="info-card">
-        <CommandsSeries :stats="redisStats" />
-      </a-card>
-    </a-col>
-    <a-col :span="12">
-      <a-card title="已使用内存" :loading="loading" class="info-card">
-        <ActiveSeries :memory="redisUsedMemory" />
-      </a-card>
-    </a-col>
-  </a-row>
+  <div>
+    <a-card
+      :title="$t('page.monitor.redis.desc.title')"
+      :loading="loading"
+      class="info-card"
+    >
+      <a-descriptions>
+        <a-descriptions-item label="Test">123</a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+    <a-space style="padding-top: 22px" />
+    <a-row :gutter="20">
+      <a-col :span="12">
+        <a-card
+          :title="$t('page.monitor.redis.cards.commands.title')"
+          :loading="loading"
+          class="info-card"
+        >
+          <CommandsSeries :stats="redisStats" />
+        </a-card>
+      </a-col>
+      <a-col :span="12">
+        <a-card
+          :title="$t('page.monitor.redis.cards.memory.title')"
+          :loading="loading"
+          class="info-card"
+        >
+          <ActiveSeries :memory="redisUsedMemory" />
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
 </template>

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

@@ -12,7 +12,13 @@ import type {
 } from 'echarts/components';
 import type { ComposeOption } from 'echarts/core';
 
-import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import {
+  BarChart,
+  GaugeChart,
+  LineChart,
+  PieChart,
+  RadarChart,
+} from 'echarts/charts';
 import {
   // 数据集组件
   DatasetComponent,
@@ -54,6 +60,7 @@ echarts.use([
   CanvasRenderer,
   LegendComponent,
   ToolboxComponent,
+  GaugeChart,
 ]);
 
 export default echarts;