⚗️ RAM显示缓冲区/缓存

model/State/RAM.js

@@ -1,24 +1,34 @@
-import os from "os"
-import { Circle, getFileSize } from "./utils.js"
+import { Circle, getFileSize, si } from "./utils.js"
 
 /** 获取当前内存占用 */
-export default function getMemUsage() {
-  const freeMemory = os.freemem()
-  const totalMemory = os.totalmem()
+export default async function getMemUsage() {
+  const { mem: { total, used, active, buffcache } } = await si.get({
+    mem: "total,used,active,buffcache"
+  })
+  const usedPercentage = (used / total).toFixed(2)
+  const activePercentage = (active / total).toFixed(2)
+  const buffcachePercentage = (buffcache / total).toFixed(2)
 
-  const memoryUsagePercentage = (1 - freeMemory / totalMemory).toFixed(2)
-  const freeMem = getFileSize(freeMemory)
-  const totalMem = getFileSize(totalMemory)
-  const usingMemory = getFileSize(totalMemory - freeMemory)
+  const buffcacheMem = getFileSize(buffcache)
+  const totalMem = getFileSize(total)
+  const activeMem = getFileSize(active)
+
+  const isBuff = buffcache && buffcache != 0
+  const buffcacheInner = isBuff ? `/${Math.round(buffcachePercentage * 100)}` : ""
 
   return {
-    ...Circle(memoryUsagePercentage),
-    inner: `${Math.round(memoryUsagePercentage * 100)}%`,
+    ...Circle(activePercentage),
+    inner: `${Math.round(activePercentage * 100)}${buffcacheInner}%`,
     title: "RAM",
     info: [
         `总共 ${totalMem}`,
-        `已用 ${usingMemory}`,
-        `可用 ${freeMem}`
-    ]
+        `主动使用 ${activeMem}`,
+        `缓冲区/缓存 ${buffcacheMem}`
+    ],
+    buffcache: {
+      ...Circle(usedPercentage),
+      color: "#969696",
+      isBuff
+    }
   }
 }

model/State/utils.js

@@ -86,7 +86,7 @@ export function addData(arr, data, maxLen = 60) {
  */
 export function getFileSize(size, { decimalPlaces = 2, showByte = true, showSuffix = true } = {}) {
   // 检查 size 是否为 null 或 undefined
-  if (size === null || size === undefined) return 0
+  if (size === null || size === undefined) return 0 + "B"
 
   // 检查 decimalPlaces 是否为整数
   if (typeof decimalPlaces !== "number" || !Number.isInteger(decimalPlaces)) {
@@ -106,13 +106,13 @@ export function getFileSize(size, { decimalPlaces = 2, showByte = true, showSuff
   }
 
   // 使用一个函数来构建返回的字符串
-  const buildSizeString = (value, unit) => {
-    const suffix = ` ${unit}${showSuffix ? "B" : ""}`
+  const buildSizeString = (value, unit, _showSuffix = showSuffix) => {
+    const suffix = ` ${unit}${_showSuffix ? "B" : ""}`
     return value.toFixed(decimalPlaces) + suffix
   }
 
   if (showByte && size < num) {
-    return buildSizeString(size, "B")
+    return buildSizeString(size, "B", false)
   }
 
   return buildSizeString(size / precalculated[unitIndex], units[unitIndex])

resources/state/index.html

@@ -44,24 +44,6 @@
                 <span>群 {{$value.groupQuantity}}</span>
                 <span>群员 {{$value.groupMemberQuantity}}</span>
             </p>
-            <!-- <table>
-                <tr>
-                    <td>收</td>
-                    <td class="dyeing">{{$value.recv || 0}}</td>
-                    <td>发</td>
-                    <td class="dyeing">{{$value.sent || 0}}</td>
-                    <td>图片</td>
-                    <td class="dyeing">{{$value.screenshot || 0}}</td>
-                </tr>
-                <tr>
-                    <td>好友</td>
-                    <td class="dyeing">{{$value.friendQuantity}}</td>
-                    <td>群</td>
-                    <td class="dyeing">{{$value.groupQuantity}}</td>
-                    <td>群员</td>
-                    <td class="dyeing">{{$value.groupMemberQuantity}}</td>
-                </tr>
-            </table> -->
         </div>
     </div>
 </div>
@@ -72,7 +54,6 @@
         <li class="li">
             <div class="container-box" data-num="{{group.inner}}" id="box">
                 <div class="circle-outer"></div>
-                <!-- 添加svg -->
                 <svg>
                     <!-- <defs>
                         <radialGradient id="gradient{{i}}" cx="50%" cy="50%" r="60%" fx="50%" fy="50%">
@@ -80,6 +61,9 @@
                             <stop offset="100%" stop-color="var({{group.color}}-light)" />
                         </radialGradient>
                     </defs> -->
+                    {{if group.title == "RAM" && group?.buffcache?.isBuff}}
+                        <circle id="circle" stroke="group.buffcache?.color" style="stroke-dashoffset:{{group.buffcache?.per}}"></circle>
+                    {{/if}}
                     <circle id="circle" stroke="{{group.color}}" style="stroke-dashoffset:{{group.per}}"></circle>
                 </svg>
             </div>