From dda8fac0b5bc7e374fc637dec2313c9d623bbf0d Mon Sep 17 00:00:00 2001
From: Wu Clan <jianhengwu0407@gmail.com>
Date: Sun, 20 Apr 2025 00:12:20 +0800
Subject: [PATCH 1/2] feat: add the server monitor view

---
 apps/web-antd/src/adapter/vxe-table.ts        |   2 +-
 .../src/views/monitor/redis/index.vue         |  10 +-
 .../src/views/monitor/server/index.vue        | 196 +++++++++++++++++-
 3 files changed, 200 insertions(+), 8 deletions(-)

diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts
index 0604cfbf4..d82acec20 100644
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@@ -21,7 +21,7 @@ setupVbenVxeTable({
         columnConfig: {
           resizable: true,
         },
-        minHeight: 320,
+        minHeight: 180,
         formConfig: {
           // 全局禁用vxe-table的表单配置，使用formOptions
           enabled: false,
diff --git a/apps/web-antd/src/views/monitor/redis/index.vue b/apps/web-antd/src/views/monitor/redis/index.vue
index c91c10d74..7696196fd 100644
--- a/apps/web-antd/src/views/monitor/redis/index.vue
+++ b/apps/web-antd/src/views/monitor/redis/index.vue
@@ -105,8 +105,8 @@ watch(redisInfo, (val) => {
 </script>
 
 <template>
-  <div class="container mx-auto p-4">
-    <div class="mb-2 rounded-lg p-2 shadow-md">
+  <div class="flex flex-col items-center px-4">
+    <div class="mt-4 w-full">
       <a-card :title="$t('page.monitor.redis.desc.title')" :loading="loading">
         <a-descriptions>
           <a-descriptions-item
@@ -119,8 +119,8 @@ watch(redisInfo, (val) => {
         </a-descriptions>
       </a-card>
     </div>
-    <div class="flex flex-col gap-2 md:flex-row">
-      <div class="rounded-lg p-2 shadow-md md:w-1/2">
+    <div class="mt-4 flex w-full space-x-4">
+      <div class="flex-1">
         <a-card
           :title="$t('page.monitor.redis.cards.commands.title')"
           :loading="loading"
@@ -128,7 +128,7 @@ watch(redisInfo, (val) => {
           <CommandsSeries :stats="redisStats" />
         </a-card>
       </div>
-      <div class="rounded-lg p-2 shadow-md md:w-1/2">
+      <div class="flex-1">
         <a-card
           :title="$t('page.monitor.redis.cards.memory.title')"
           :loading="loading"
diff --git a/apps/web-antd/src/views/monitor/server/index.vue b/apps/web-antd/src/views/monitor/server/index.vue
index 0102cc38c..a42cb3cad 100644
--- a/apps/web-antd/src/views/monitor/server/index.vue
+++ b/apps/web-antd/src/views/monitor/server/index.vue
@@ -1,5 +1,197 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getServerMonitor } from '#/api';
+
+const loading = ref<boolean>(false);
+
+const setServerData = ref<Record<string, any>>({});
+
+const diskData = ref<any[]>([]);
+
+const cpuData = computed(() => {
+  return {
+    usage: setServerData.value.cpu?.usage,
+    current_freq: setServerData.value.cpu?.current_freq,
+    max_freq: setServerData.value.cpu?.max_freq,
+    min_freq: setServerData.value.cpu?.min_freq,
+    logical_num: setServerData.value.cpu?.logical_num,
+    physical_num: setServerData.value.cpu?.physical_num,
+  };
+});
+
+const memData = computed(() => {
+  return {
+    total: setServerData.value.memory?.total,
+    used: setServerData.value.memory?.used,
+    free: setServerData.value.memory?.free,
+    usage: setServerData.value.memory?.usage,
+  };
+});
+
+const serviceData = computed(() => {
+  const data: any[] = [];
+  if (setServerData.value.service) {
+    Object.keys(setServerData.value.service).forEach((key) => {
+      data.push({
+        label: key,
+        value: setServerData.value.service[key],
+      });
+    });
+  }
+  return data;
+});
+
+const osData = computed(() => {
+  const data: any[] = [];
+  if (setServerData.value.system) {
+    Object.keys(setServerData.value.system).forEach((key) => {
+      data.push({
+        label: key,
+        value: setServerData.value.system[key],
+      });
+    });
+  }
+  return data;
+});
+
+const usageStyle = (type: string) => {
+  let num = 0;
+  if (type === 'cpu') {
+    num = cpuData.value.usage;
+  } else if (type === 'memory') {
+    num = memData.value.usage;
+  }
+  if (num < 50) {
+    return { color: '#32CD32' };
+  }
+  if (num < 80) {
+    return { color: '#FFD700' };
+  }
+  return { color: '#DC143C' };
+};
+
+const fetchServerData = async () => {
+  loading.value = true;
+  try {
+    const res = await getServerMonitor();
+    setServerData.value.cpu = res.cpu;
+    setServerData.value.memory = res.mem;
+    setServerData.value.system = res.sys;
+    setServerData.value.service = res.service;
+    diskData.value = res.disk;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { field: 'dir', title: '路径' },
+      { field: 'type', title: '类型' },
+      { field: 'device', title: '设备' },
+      { field: 'total', title: '总计' },
+      { field: 'free', title: '空闲' },
+      { field: 'used', title: '已使用' },
+      { field: 'usage', title: '使用率' },
+    ],
+    stripe: true,
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+onMounted(async () => {
+  await fetchServerData();
+  gridApi.setGridOptions({ data: diskData.value });
+});
+</script>
+
 <template>
-  <div>
-    <h1>home page</h1>
+  <div class="flex flex-col items-center px-6">
+    <div class="mt-6 flex w-full space-x-6">
+      <div class="flex-1">
+        <a-card :loading="loading" title="CPU">
+          <div class="mt-6 flex w-full space-x-6 px-6">
+            <div class="flex-1">
+              <a-statistic
+                title="使用率"
+                :value="cpuData.usage"
+                :value-style="usageStyle('cpu')"
+                suffix=" %"
+              />
+            </div>
+            <div class="flex-1">
+              <a-statistic
+                title="当前频率"
+                :value="cpuData.current_freq"
+                suffix=" MHz"
+              />
+            </div>
+            <div class="flex-1">
+              <a-statistic title="逻辑核心数" :value="cpuData.logical_num" />
+            </div>
+            <div class="flex-1">
+              <a-statistic title="物理核心数" :value="cpuData.physical_num" />
+            </div>
+          </div>
+        </a-card>
+      </div>
+      <div class="flex-1">
+        <a-card :loading="loading" title="内存">
+          <div class="mt-6 flex w-full space-x-6 px-6">
+            <div class="flex-1">
+              <a-statistic title="总量" :value="memData.total" suffix=" GB" />
+            </div>
+            <div class="flex-1">
+              <a-statistic title="已使用" :value="memData.used" suffix=" GB" />
+            </div>
+            <div class="flex-1">
+              <a-statistic title="空闲" :value="memData.free" suffix=" GB" />
+            </div>
+            <div class="flex-1">
+              <a-statistic
+                title="使用率"
+                :value="memData.usage"
+                :value-style="usageStyle('memory')"
+                suffix=" %"
+              />
+            </div>
+          </div>
+        </a-card>
+      </div>
+    </div>
+    <div class="mt-6 w-full space-y-6">
+      <a-card :loading="loading" title="服务">
+        <a-descriptions>
+          <a-descriptions-item
+            v-for="item in serviceData"
+            :label="item.label"
+            :key="item.label"
+          >
+            {{ item.value }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-card>
+      <a-card :loading="loading" title="系统">
+        <a-descriptions size="middle" :column="4">
+          <a-descriptions-item
+            v-for="item in osData"
+            :label="item.label"
+            :key="item.label"
+          >
+            {{ item.value }}
+          </a-descriptions-item>
+        </a-descriptions>
+      </a-card>
+      <a-card :loading="loading" title="磁盘">
+        <Grid />
+      </a-card>
+    </div>
   </div>
 </template>

From af288a5359250a583cffcbc1afcde49333acf26a Mon Sep 17 00:00:00 2001
From: Wu Clan <jianhengwu0407@gmail.com>
Date: Sun, 20 Apr 2025 01:16:32 +0800
Subject: [PATCH 2/2] chore: add i18n

---
 .../src/locales/langs/en-US/page.json         | 73 +++++++++++++------
 .../src/locales/langs/zh-CN/page.json         | 73 +++++++++++++------
 .../src/views/monitor/server/index.vue        | 61 +++++++++++-----
 3 files changed, 142 insertions(+), 65 deletions(-)

diff --git a/apps/web-antd/src/locales/langs/en-US/page.json b/apps/web-antd/src/locales/langs/en-US/page.json
index b423e3ecd..986d05f43 100644
--- a/apps/web-antd/src/locales/langs/en-US/page.json
+++ b/apps/web-antd/src/locales/langs/en-US/page.json
@@ -35,18 +35,8 @@
     "sysRole": "System Role",
     "sysUser": "System User"
   },
-  "table": {
-    "created_time": "Create Time",
-    "id": "ID",
-    "mark": "Mark",
-    "operation": "Operation",
-    "updated_time": "Update time"
-  },
   "monitor": {
     "redis": {
-      "desc": {
-        "title": "Basic Information"
-      },
       "cards": {
         "commands": {
           "title": "Command Statistics"
@@ -55,29 +45,66 @@
           "title": "Memory Status"
         }
       },
-      "stats": {
-        "title": {
-          "used_memory": "Used Memory"
-        }
+      "desc": {
+        "title": "Basic Information"
       },
       "info": {
-        "title": "Basic Info",
-        "version": "Version",
-        "mode": "Mode",
-        "os": "OS",
         "arch": "Arch",
-        "uptime": "Uptime",
         "clients": "Connections",
-        "memory_human": "Allocated Memory",
-        "connections_received": "Connections Received",
         "commands_processed": "Commands Processed",
-        "rejected_connections": "Rejected Connections",
+        "connections_received": "Connections Received",
         "keys_command_stats": "Keys Stats",
+        "keys_num": "Keys Num",
+        "memory_human": "Allocated Memory",
+        "mode": "Mode",
+        "os": "OS",
+        "rejected_connections": "Rejected Connections",
         "role": "Role",
+        "title": "Basic Info",
+        "uptime": "Uptime",
         "used_cpu": "Used CPU",
         "used_cpu_children": "Used CPU Children",
-        "keys_num": "Keys Num"
+        "version": "Version"
+      },
+      "stats": {
+        "title": {
+          "used_memory": "Used Memory"
+        }
       }
+    },
+    "server": {
+      "cpu": {
+        "current_freq": "Current Freq",
+        "logical_num": "Logical Num",
+        "physical_num": "Physical Num",
+        "usage": "Usage"
+      },
+      "disk": {
+        "device": "Device",
+        "dir": "Dir",
+        "free": "Free",
+        "title": "Disk",
+        "total": "Total",
+        "type": "Type",
+        "usage": "Usage",
+        "used": "Used"
+      },
+      "memory": {
+        "free": "Free",
+        "title": "Memory",
+        "total": "Total",
+        "usage": "Usage",
+        "used": "Used"
+      },
+      "service": "Service",
+      "system": "System"
     }
+  },
+  "table": {
+    "created_time": "Created Time",
+    "id": "ID",
+    "mark": "Mark",
+    "operation": "Operation",
+    "updated_time": "Updated time"
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN/page.json b/apps/web-antd/src/locales/langs/zh-CN/page.json
index 1ebcb019a..648d594c8 100644
--- a/apps/web-antd/src/locales/langs/zh-CN/page.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/page.json
@@ -35,18 +35,8 @@
     "sysRole": "系统角色",
     "sysUser": "系统角色"
   },
-  "table": {
-    "created_time": "创建时间",
-    "id": "序号",
-    "mark": "备注",
-    "operation": "操作",
-    "updated_time": "更新时间"
-  },
   "monitor": {
     "redis": {
-      "desc": {
-        "title": "基本信息"
-      },
       "cards": {
         "commands": {
           "title": "命令统计"
@@ -55,29 +45,66 @@
           "title": "内存情况"
         }
       },
-      "stats": {
-        "title": {
-          "used_memory": "已使用内存"
-        }
+      "desc": {
+        "title": "基本信息"
       },
       "info": {
-        "title": "基础信息",
-        "version": "版本",
-        "mode": "模式",
-        "os": "操作系统",
         "arch": "架构",
-        "uptime": "运行时间",
         "clients": "连接数",
-        "memory_human": "已分配内存",
-        "connections_received": "可接受连接数",
         "commands_processed": "已执行命令",
-        "rejected_connections": "已拒绝连接",
+        "connections_received": "可接受连接数",
         "keys_command_stats": "查询次数",
+        "keys_num": "Keys 数量",
+        "memory_human": "已分配内存",
+        "mode": "模式",
+        "os": "操作系统",
+        "rejected_connections": "已拒绝连接",
         "role": "角色",
+        "title": "基础信息",
+        "uptime": "运行时间",
         "used_cpu": "CPU 消耗",
         "used_cpu_children": "后台 CPU 占用",
-        "keys_num": "Keys 数量"
+        "version": "版本"
+      },
+      "stats": {
+        "title": {
+          "used_memory": "已使用内存"
+        }
       }
+    },
+    "server": {
+      "cpu": {
+        "current_freq": "当前频率",
+        "logical_num": "逻辑核心数",
+        "physical_num": "物理核心数",
+        "usage": "使用率"
+      },
+      "disk": {
+        "device": "设备",
+        "dir": "路径",
+        "free": "空闲",
+        "title": "磁盘",
+        "total": "总计",
+        "type": "类型",
+        "usage": "使用率",
+        "used": "已使用"
+      },
+      "memory": {
+        "free": "空闲",
+        "title": "内存",
+        "total": "总量",
+        "usage": "使用率",
+        "used": "已使用"
+      },
+      "service": "服务",
+      "system": "系统"
     }
+  },
+  "table": {
+    "created_time": "创建时间",
+    "id": "序号",
+    "mark": "备注",
+    "operation": "操作",
+    "updated_time": "更新时间"
   }
 }
diff --git a/apps/web-antd/src/views/monitor/server/index.vue b/apps/web-antd/src/views/monitor/server/index.vue
index a42cb3cad..7f4aa0b4b 100644
--- a/apps/web-antd/src/views/monitor/server/index.vue
+++ b/apps/web-antd/src/views/monitor/server/index.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue';
 
+import { $t } from '@vben/locales';
+
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getServerMonitor } from '#/api';
 
@@ -91,13 +93,13 @@ const fetchServerData = async () => {
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: [
-      { field: 'dir', title: '路径' },
-      { field: 'type', title: '类型' },
-      { field: 'device', title: '设备' },
-      { field: 'total', title: '总计' },
-      { field: 'free', title: '空闲' },
-      { field: 'used', title: '已使用' },
-      { field: 'usage', title: '使用率' },
+      { field: 'dir', title: $t('page.monitor.server.disk.dir') },
+      { field: 'type', title: $t('page.monitor.server.disk.type') },
+      { field: 'device', title: $t('page.monitor.server.disk.device') },
+      { field: 'total', title: $t('page.monitor.server.disk.total') },
+      { field: 'free', title: $t('page.monitor.server.disk.free') },
+      { field: 'used', title: $t('page.monitor.server.disk.used') },
+      { field: 'usage', title: $t('page.monitor.server.disk.usage') },
     ],
     stripe: true,
     pagerConfig: {
@@ -120,7 +122,7 @@ onMounted(async () => {
           <div class="mt-6 flex w-full space-x-6 px-6">
             <div class="flex-1">
               <a-statistic
-                title="使用率"
+                :title="$t('page.monitor.server.cpu.usage')"
                 :value="cpuData.usage"
                 :value-style="usageStyle('cpu')"
                 suffix=" %"
@@ -128,35 +130,56 @@ onMounted(async () => {
             </div>
             <div class="flex-1">
               <a-statistic
-                title="当前频率"
+                :title="$t('page.monitor.server.cpu.current_freq')"
                 :value="cpuData.current_freq"
                 suffix=" MHz"
               />
             </div>
             <div class="flex-1">
-              <a-statistic title="逻辑核心数" :value="cpuData.logical_num" />
+              <a-statistic
+                :title="$t('page.monitor.server.cpu.logical_num')"
+                :value="cpuData.logical_num"
+              />
             </div>
             <div class="flex-1">
-              <a-statistic title="物理核心数" :value="cpuData.physical_num" />
+              <a-statistic
+                :title="$t('page.monitor.server.cpu.physical_num')"
+                :value="cpuData.physical_num"
+              />
             </div>
           </div>
         </a-card>
       </div>
       <div class="flex-1">
-        <a-card :loading="loading" title="内存">
+        <a-card
+          :loading="loading"
+          :title="$t('page.monitor.server.memory.title')"
+        >
           <div class="mt-6 flex w-full space-x-6 px-6">
             <div class="flex-1">
-              <a-statistic title="总量" :value="memData.total" suffix=" GB" />
+              <a-statistic
+                :title="$t('page.monitor.server.memory.total')"
+                :value="memData.total"
+                suffix=" GB"
+              />
             </div>
             <div class="flex-1">
-              <a-statistic title="已使用" :value="memData.used" suffix=" GB" />
+              <a-statistic
+                :title="$t('page.monitor.server.memory.used')"
+                :value="memData.used"
+                suffix=" GB"
+              />
             </div>
             <div class="flex-1">
-              <a-statistic title="空闲" :value="memData.free" suffix=" GB" />
+              <a-statistic
+                :title="$t('page.monitor.server.memory.free')"
+                :value="memData.free"
+                suffix=" GB"
+              />
             </div>
             <div class="flex-1">
               <a-statistic
-                title="使用率"
+                :title="$t('page.monitor.server.memory.usage')"
                 :value="memData.usage"
                 :value-style="usageStyle('memory')"
                 suffix=" %"
@@ -167,7 +190,7 @@ onMounted(async () => {
       </div>
     </div>
     <div class="mt-6 w-full space-y-6">
-      <a-card :loading="loading" title="服务">
+      <a-card :loading="loading" :title="$t('page.monitor.server.service')">
         <a-descriptions>
           <a-descriptions-item
             v-for="item in serviceData"
@@ -178,7 +201,7 @@ onMounted(async () => {
           </a-descriptions-item>
         </a-descriptions>
       </a-card>
-      <a-card :loading="loading" title="系统">
+      <a-card :loading="loading" :title="$t('page.monitor.server.system')">
         <a-descriptions size="middle" :column="4">
           <a-descriptions-item
             v-for="item in osData"
@@ -189,7 +212,7 @@ onMounted(async () => {
           </a-descriptions-item>
         </a-descriptions>
       </a-card>
-      <a-card :loading="loading" title="磁盘">
+      <a-card :loading="loading" :title="$t('page.monitor.server.disk.title')">
         <Grid />
       </a-card>
     </div>