feat:优化Redis缓存监控页面数据显示

src/views/system/monitor/cache/index.vue

@@ -90,14 +90,14 @@
               <span>客户端信息</span>
             </div>
           </template>
-          <table cellspacing="0" style=";width: 100%">
+          <table cellspacing="0" style="width: 100%">
             <tbody v-if="sysInfo.clients">
               <tr>
                 <td>
                   <div class="cell-card">当前客户端连接数: </div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.clients.connected_clients }}</div>
+                  <div class="cell-card value">{{ sysInfo.clients.connected_clients }}</div>
                 </td>
               </tr>
               <tr>
@@ -105,7 +105,7 @@
                   <div class="cell-card">输出缓冲区中队列对象个数的最大值: </div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.clients.client_recent_max_output_buffer }}</div>
+                  <div class="cell-card value">{{ sysInfo.clients.client_recent_max_output_buffer }}</div>
                 </td>
               </tr>
 
@@ -114,7 +114,7 @@
                   <div class="cell-card">输入缓冲区中占用的最大容量:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ memorySizeFormat(sysInfo.clients.client_recent_max_input_buffer) }}</div>
+                  <div class="cell-card value">{{ memorySizeFormat(sysInfo.clients.client_recent_max_input_buffer) }}</div>
                 </td>
               </tr>
               <tr>
@@ -122,7 +122,7 @@
                   <div class="cell-card">等待阻塞命令的客户端数量:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.clients.blocked_clients }}</div>
+                  <div class="cell-card value">{{ sysInfo.clients.blocked_clients }}</div>
                 </td>
               </tr>
             </tbody>
@@ -143,7 +143,7 @@
                   <div class="cell-card" title="Redis主进程在内核态所占用的CPU时钟总和">主进程内核态占用CPU时钟: </div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ lengthToFixed2(sysInfo.cpu.used_cpu_sys) }}</div>
+                  <div class="cell-card value">{{ lengthToFixed2(sysInfo.cpu.used_cpu_sys) }}</div>
                 </td>
               </tr>
               <tr>
@@ -151,7 +151,7 @@
                   <div class="cell-card" title="Redis主进程在用户态所占用的CPU时钟总和">主进程用户态占用CPU时钟: </div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ lengthToFixed2(sysInfo.cpu.used_cpu_user) }}</div>
+                  <div class="cell-card value">{{ lengthToFixed2(sysInfo.cpu.used_cpu_user) }}</div>
                 </td>
               </tr>
 
@@ -160,7 +160,7 @@
                   <div class="cell-card" title="Redis子进程在内核态所占用的CPU时钟总和">子进程内核态占用CPU时钟:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ lengthToFixed2(sysInfo.cpu.used_cpu_sys_children) }}</div>
+                  <div class="cell-card value">{{ lengthToFixed2(sysInfo.cpu.used_cpu_sys_children) }}</div>
                 </td>
               </tr>
               <tr>
@@ -168,7 +168,7 @@
                   <div class="cell-card" title="Redis子进程在用户态所占用的CPU时钟总和">子进程用户态占用CPU时钟:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ lengthToFixed2(sysInfo.cpu.used_cpu_user_children) }}</div>
+                  <div class="cell-card value">{{ lengthToFixed2(sysInfo.cpu.used_cpu_user_children) }}</div>
                 </td>
               </tr>
             </tbody>
@@ -191,7 +191,7 @@
                   <div class="cell-card">Redis服务版本: </div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.server.redis_version }}</div>
+                  <div class="cell-card value">{{ sysInfo.server.redis_version }}</div>
                 </td>
               </tr>
               <tr>
@@ -199,7 +199,7 @@
                   <div class="cell-card">运行模式: </div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.server.redis_mode }}</div>
+                  <div class="cell-card value">{{ sysInfo.server.redis_mode }}</div>
                 </td>
               </tr>
 
@@ -208,7 +208,7 @@
                   <div class="cell-card">Redis所在机器的操作系统:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.server.os }}</div>
+                  <div class="cell-card value">{{ sysInfo.server.os }}</div>
                 </td>
               </tr>
               <tr>
@@ -216,7 +216,7 @@
                   <div class="cell-card">架构:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.server.arch_bits }}</div>
+                  <div class="cell-card value">{{ sysInfo.server.arch_bits }}</div>
                 </td>
               </tr>
               <tr>
@@ -224,7 +224,7 @@
                   <div class="cell-card">Redis所使用的事件处理机制:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.server.multiplexing_api }}</div>
+                  <div class="cell-card value">{{ sysInfo.server.multiplexing_api }}</div>
                 </td>
               </tr>
               <tr>
@@ -232,7 +232,7 @@
                   <div class="cell-card">自Redis服务启动以来，运行的秒数:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.server.uptime_in_seconds }}</div>
+                  <div class="cell-card value">{{ sysInfo.server.uptime_in_seconds }}</div>
                 </td>
               </tr>
               <tr>
@@ -240,7 +240,7 @@
                   <div class="cell-card">自Redis服务启动以来，运行的天数:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.server.uptime_in_days }}</div>
+                  <div class="cell-card value">{{ sysInfo.server.uptime_in_days }}</div>
                 </td>
               </tr>
               <tr>
@@ -248,7 +248,7 @@
                   <div class="cell-card">serverCron每秒运行次数:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.server.hz }}</div>
+                  <div class="cell-card value">{{ sysInfo.server.hz }}</div>
                 </td>
               </tr>
             </tbody>
@@ -280,7 +280,7 @@
                   <div class="cell-card">以可读的格式返回used_memory: </div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ memorySizeFormat(sysInfo.memory.used_memory_human) }}</div>
+                  <div class="cell-card value">{{ memorySizeFormat(sysInfo.memory.used_memory_human) }}</div>
                 </td>
               </tr>
 
@@ -289,7 +289,7 @@
                   <div class="cell-card">从操作系统的角度，Redis进程占用的物理内存总量:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ memorySizeFormat(sysInfo.memory.used_memory_rss) }}</div>
+                  <div class="cell-card value">{{ memorySizeFormat(sysInfo.memory.used_memory_rss) }}</div>
                 </td>
               </tr>
               <tr>
@@ -297,7 +297,7 @@
                   <div class="cell-card">内存使用的最大值:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ memorySizeFormat(sysInfo.memory.used_memory_peak) }}</div>
+                  <div class="cell-card value">{{ memorySizeFormat(sysInfo.memory.used_memory_peak) }}</div>
                 </td>
               </tr>
               <tr>
@@ -305,7 +305,7 @@
                   <div class="cell-card">以可读的格式返回used_memory_peak:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ memorySizeFormat(sysInfo.memory.used_memory_peak_human) }}</div>
+                  <div class="cell-card value">{{ memorySizeFormat(sysInfo.memory.used_memory_peak_human) }}</div>
                 </td>
               </tr>
               <tr>
@@ -313,7 +313,7 @@
                   <div class="cell-card">Lua引擎所消耗的内存大小:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ memorySizeFormat(sysInfo.memory.used_memory_lua) }}</div>
+                  <div class="cell-card value">{{ memorySizeFormat(sysInfo.memory.used_memory_lua) }}</div>
                 </td>
               </tr>
               <tr>
@@ -321,7 +321,7 @@
                   <div class="cell-card">内存碎片率:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.memory.mem_fragmentation_ratio }}</div>
+                  <div class="cell-card value">{{ sysInfo.memory.mem_fragmentation_ratio }}</div>
                 </td>
               </tr>
               <tr>
@@ -329,7 +329,7 @@
                   <div class="cell-card">Redis所使用的内存分配器:</div>
                 </td>
                 <td>
-                  <div class="cell-card">{{ sysInfo.memory.mem_allocator }}</div>
+                  <div class="cell-card value">{{ sysInfo.memory.mem_allocator }}</div>
                 </td>
               </tr>
 
@@ -1094,6 +1094,11 @@ export default defineComponent({
     line-height: 1.2;
     margin: 10px 0;
   }
+  .cell-card.value {
+    width: 200px;
+    white-space: nowrap;
+    text-align: right;
+  }
 
   table {
     width: 100%;
@@ -1102,11 +1107,13 @@ export default defineComponent({
     td {
       padding: 8px;
       &:first-child {
-        width: 40%;
+        width: 65%;
         color: var(--el-text-color-regular, #606266);
       }
       &:last-child {
+        width: 35%;
         font-weight: 500;
+        text-align: right;
       }
     }