feat: Add more memory info

nocpiun · Aug 9, 2024 · de57ae1 · de57ae1
1 parent ac7776c
commit de57ae1
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/app/api/os/route.ts b/app/api/os/route.ts
@@ -65,7 +65,12 @@ export function SOCKET(
             memory: {
                 total: mem.total,
                 usage: (mem.used / mem.total) * 100,
-                amount: memLayout.length
+                amount: memLayout.length,
+                mems: memLayout.map((item) => ({
+                    size: item.size,
+                    type: item.type,
+                    formFactor: item.formFactor
+                }))
             },
             gpu: graphics.controllers.map((gpu) => ({
                 model: gpu.model,

diff --git a/components/dashboard/memory-widget.tsx b/components/dashboard/memory-widget.tsx
@@ -2,9 +2,10 @@ import type { PropsWithCN } from "@/types";
 
 import React, { useState } from "react";
 import { Progress } from "@nextui-org/progress";
+import { Chip } from "@nextui-org/chip";
+import { ScrollShadow } from "@nextui-org/scroll-shadow";
 
 import DashboardWidget from "./dashboard-widget";
-import Info from "./info";
 
 import { type MemoryInfo, useOS } from "@/hooks/useOS";
 import { formatSize } from "@/lib/utils";
@@ -18,13 +19,23 @@ const MemoryWidget: React.FC<PropsWithCN> = (props) => {
 
     return (
         <DashboardWidget
-            name="内存占用"
+            name="内存状态"
             className={props.className}
-            insideClassName="flex flex-col justify-between">
-            <Info name="内存条" content={memoryInfo?.amount ? `${memoryInfo?.amount} 个` : ""}/>
-            <Info name="容量" content={memoryInfo?.total ? formatSize(memoryInfo.total) : ""}/>
+            insideClassName="relative">
+            <ScrollShadow hideScrollBar className="h-20 space-y-1">
+                {
+                    memoryInfo?.mems.map((mem, index) => (
+                        <div className="flex items-center gap-2" key={index}>
+                            <span className="text-default-500">内存条 {index + 1}</span>
+                            <span>{formatSize(mem.size)}</span>
+                            <Chip size="sm">{mem.type}</Chip>
+                            <Chip size="sm">{mem.formFactor}</Chip>
+                        </div>
+                    ))
+                }
+            </ScrollShadow>
 
-            <div className="flex flex-col gap-4">
+            <div className="absolute left-0 right-0 bottom-0 flex flex-col gap-4">
                 <div className="flex justify-end">
                     <span className="text-3xl font-semibold">{memoryInfo?.usage ? `${memoryInfo?.usage.toFixed(2)}%` : "--%"}</span>
                 </div>

diff --git a/hooks/useOS.ts b/hooks/useOS.ts
@@ -17,6 +17,11 @@ export interface MemoryInfo {
     total: number
     usage: number
     amount: number
+    mems: {
+        size: number
+        type: string
+        formFactor: string
+    }[]
 }
 
 export interface GPUInfo {