[feat] better hw info (still no gpu)

src/app/(main)/gear/page.tsx

@@ -7,11 +7,12 @@ import {
   CardTool,
 } from "@/components/window/Card"
 import { ToolButton } from "@/components/window/ToolButton"
-import { Chip } from "@heroui/react"
+import { Chip, Skeleton } from "@heroui/react"
 import { Refresh, SettingConfig } from "@icon-park/react"
 // import { version } from "@tauri-apps/plugin-os"
 import { useEffect, useState } from "react"
 import { type AllSystemInfo, allSysInfo } from "tauri-plugin-system-info-api"
+import { invoke } from "@tauri-apps/api/core"
 
 export default function Page() {
   return (
@@ -27,14 +28,12 @@ export default function Page() {
                 <UploadOne />
                 云同步
               </ToolButton> */}
-              <ToolButton>
-                <Refresh /> 刷新
-              </ToolButton>
+              <HardwareInfo />
             </CardTool>
           </CardHeader>
 
           <CardBody>
-            <HardwareInfo />
+            <HardwareInfoContent />
           </CardBody>
         </Card>
       </div>
@@ -43,39 +42,336 @@ export default function Page() {
 }
 
 function HardwareInfo() {
-  const [allSysData, setAllSysData] = useState<AllSystemInfo>()
-  // const [memInfo, setMemInfo] = useState("")
-  // const [staticData, setStaticData] = useState("")
-  // const [cpuData, setCpuData] = useState("")
-  // const [batteryData, setBatteryData] = useState("")
+  return (
+    <ToolButton onClick={() => {
+      // 触发刷新事件
+      window.dispatchEvent(new CustomEvent('refresh-hardware-info'))
+    }}>
+      <Refresh /> 刷新
+    </ToolButton>
+  )
+}
 
+interface ComputerInfo {
+  OsName?: string
+  OSDisplayVersion?: string
+  BiosSMBIOSBIOSVersion?: string
+  CsManufacturer?: string
+  CsName?: string
+}
+
+function HardwareInfoContent() {
+  const [allSysData, setAllSysData] = useState<AllSystemInfo>()
+  const [computerInfo, setComputerInfo] = useState<ComputerInfo>({})
+  const [loading, setLoading] = useState(false)
+
+  const fetchData = async () => {
+    setLoading(true)
+    try {
+      // 并行获取系统信息和 PowerShell 信息
+      const [sys, computerInfoData] = await Promise.all([
+        allSysInfo(),
+        invoke<ComputerInfo>("get_computer_info").catch((error) => {
+          console.error("获取 PowerShell 信息失败:", error)
+          return {} as ComputerInfo
+        })
+      ])
+      
+      console.log("系统信息:", sys)
+      console.log("PowerShell 信息:", computerInfoData)
+      
+      if (sys?.cpus) {
+        console.log("CPU数据:", sys.cpus)
+        console.log("第一个CPU:", sys.cpus[0])
+        if (sys.cpus[0]) {
+          console.log("CPU字段:", Object.keys(sys.cpus[0]))
+        }
+      }
+      setAllSysData(sys)
+      setComputerInfo(computerInfoData)
+    } catch (error) {
+      console.error("获取系统信息失败:", error)
+    } finally {
+      setLoading(false)
+    }
+  }
 
   useEffect(() => {
-    const fetchData = async () => {
-      const sys = await allSysInfo()
-      console.log(sys)
-      setAllSysData(sys)
-      // console.log(await memoryInfo())
-      // console.log(await staticInfo())
-      // console.log(await cpuInfo())
-      // console.log(await batteries())
-    }
-
     void fetchData()
+
+    // 监听刷新事件
+    const handleRefresh = () => {
+      void fetchData()
+    }
+    window.addEventListener('refresh-hardware-info', handleRefresh)
+    return () => {
+      window.removeEventListener('refresh-hardware-info', handleRefresh)
+    }
   }, [])
 
+  const formatBytes = (bytes?: number) => {
+    if (!bytes) return "未知"
+    const gb = bytes / 1024 / 1024 / 1024
+    if (gb >= 1) {
+      return `${gb.toFixed(2)}GB`
+    }
+    const mb = bytes / 1024 / 1024
+    return `${mb.toFixed(2)}MB`
+  }
+
+  // 如果 PowerShell 提供了 OSDisplayVersion，直接使用；否则尝试从 kernel_version 推断
+  const windowsVersionCode = computerInfo.OSDisplayVersion || null
+  const memoryUsagePercent = allSysData?.total_memory && allSysData?.used_memory !== undefined
+    ? Math.round((allSysData.used_memory / allSysData.total_memory) * 100)
+    : null
+  
+  // 计算所有CPU核心的平均频率（统一转换为GHz）
+  const averageCpuFrequency = allSysData?.cpus && allSysData.cpus.length > 0
+    ? (() => {
+        // 尝试多个可能的频率字段名
+        const frequencies = allSysData.cpus
+          .map(cpu => {
+            // 尝试不同的字段名
+            const freq = (cpu as any).frequency ?? (cpu as any).freq ?? (cpu as any).clock_speed
+            return freq
+          })
+          .filter((freq): freq is number => {
+            // 确保是有效的数字且大于0
+            return typeof freq === 'number' && !isNaN(freq) && freq > 0
+          })
+        
+        if (frequencies.length === 0) {
+          console.log("未找到有效的CPU频率数据，CPU对象:", allSysData.cpus[0])
+          return null
+        }
+        
+        const sum = frequencies.reduce((acc, freq) => acc + freq, 0)
+        const avg = sum / frequencies.length
+        
+        // 判断单位并统一转换为GHz
+        // 如果值在2-10范围，可能是GHz
+        // 如果值在2000-10000范围，可能是MHz（需要除以1000）
+        // 如果值在百万级别（2000000+），可能是Hz（需要除以1,000,000）
+        let freqInGhz: number
+        if (avg >= 1_000_000) {
+          // Hz单位，转换为GHz
+          freqInGhz = avg / 1_000_000
+        } else if (avg >= 1000) {
+          // MHz单位，转换为GHz
+          freqInGhz = avg / 1000
+        } else {
+          // 已经是GHz单位
+          freqInGhz = avg
+        }
+        
+        console.log("CPU频率数据:", frequencies, "原始平均值:", avg, "转换为GHz:", freqInGhz)
+        
+        return freqInGhz
+      })()
+    : null
+
+  // 如果正在加载，显示 Skeleton 骨架屏
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-4">
+        {/* 系统信息 Skeleton */}
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-5 w-24 rounded" />
+          <div className="flex flex-wrap gap-2">
+            <Skeleton className="h-8 w-48 rounded-full" />
+            <Skeleton className="h-8 w-32 rounded-full" />
+          </div>
+        </div>
+
+        {/* 主板信息 Skeleton */}
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-5 w-16 rounded" />
+          <div className="flex flex-wrap gap-2">
+            <Skeleton className="h-8 w-40 rounded-full" />
+            <Skeleton className="h-8 w-36 rounded-full" />
+          </div>
+        </div>
+
+        {/* CPU 信息 Skeleton */}
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-5 w-20 rounded" />
+          <div className="flex flex-wrap gap-2">
+            <Skeleton className="h-8 w-56 rounded-full" />
+            <Skeleton className="h-8 w-32 rounded-full" />
+            <Skeleton className="h-8 w-28 rounded-full" />
+          </div>
+        </div>
+
+        {/* 内存信息 Skeleton */}
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-5 w-16 rounded" />
+          <div className="flex flex-wrap gap-2">
+            <Skeleton className="h-8 w-36 rounded-full" />
+            <Skeleton className="h-8 w-40 rounded-full" />
+            <Skeleton className="h-8 w-36 rounded-full" />
+          </div>
+        </div>
+
+        {/* GPU 信息 Skeleton */}
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-5 w-16 rounded" />
+          <div className="flex flex-wrap gap-2">
+            <Skeleton className="h-8 w-52 rounded-full" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
-    <div className="flex flex-col gap-1.5">
-      <Chip>CPU型号： {allSysData?.cpus[0]?.brand}</Chip>
-      <Chip>线程数： {allSysData?.cpu_count}</Chip>
-      <Chip>
-        系统： {allSysData?.name} {allSysData?.os_version}
-      </Chip>
-      <Chip>
-        内存：
-        {allSysData?.total_memory &&
-          `${(allSysData.total_memory / 1024 / 1024 / 1024).toFixed(0)}GB`}
-      </Chip>
+    <div className="flex flex-col gap-4">
+      {/* 系统信息 */}
+      <div className="flex flex-col gap-2">
+        <div className="text-sm font-medium text-foreground-600">系统信息</div>
+        <div className="flex flex-wrap gap-2">
+          {computerInfo.OsName && (
+            <Chip>
+              <span className="font-medium">系统：</span> {computerInfo.OsName}
+              {windowsVersionCode && (
+                <span className="ml-1 text-primary">({windowsVersionCode})</span>
+              )}
+            </Chip>
+          )}
+          {!computerInfo.OsName && (
+            <Chip>
+              <span className="font-medium">系统：</span> {allSysData?.name || "未知"} {allSysData?.os_version || ""}
+              {allSysData?.kernel_version && (
+                <>
+                  {" "}{allSysData.kernel_version}
+                  {windowsVersionCode && (
+                    <span className="ml-1 text-primary">({windowsVersionCode})</span>
+                  )}
+                </>
+              )}
+            </Chip>
+          )}
+          {computerInfo.CsName && (
+            <Chip>
+              <span className="font-medium">主机名：</span> {computerInfo.CsName}
+            </Chip>
+          )}
+          {!computerInfo.CsName && allSysData?.hostname && (
+            <Chip>
+              <span className="font-medium">主机名：</span> {allSysData.hostname}
+            </Chip>
+          )}
+        </div>
+      </div>
+
+      {/* 主板信息 */}
+      {(computerInfo.CsManufacturer || computerInfo.BiosSMBIOSBIOSVersion) && (
+        <div className="flex flex-col gap-2">
+          <div className="text-sm font-medium text-foreground-600">主板</div>
+          <div className="flex flex-wrap gap-2">
+            {computerInfo.CsManufacturer && (
+              <Chip>
+                <span className="font-medium">制造商：</span> {computerInfo.CsManufacturer}
+              </Chip>
+            )}
+            {computerInfo.BiosSMBIOSBIOSVersion && (
+              <Chip>
+                <span className="font-medium">BIOS版本：</span> {computerInfo.BiosSMBIOSBIOSVersion}
+              </Chip>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* CPU 信息 */}
+      <div className="flex flex-col gap-2">
+        <div className="text-sm font-medium text-foreground-600">处理器</div>
+        <div className="flex flex-wrap gap-2">
+          <Chip>
+            <span className="font-medium">型号：</span> {allSysData?.cpus?.[0]?.brand || "未知"}
+          </Chip>
+          {averageCpuFrequency !== null && (
+            <Chip>
+              <span className="font-medium">频率：</span> {averageCpuFrequency.toFixed(2)} GHz
+            </Chip>
+          )}
+          <Chip>
+            <span className="font-medium">核心数：</span> {allSysData?.cpu_count || "未知"}
+          </Chip>
+        </div>
+      </div>
+
+      {/* 内存信息 */}
+      {allSysData?.total_memory && (
+        <div className="flex flex-col gap-2">
+          <div className="text-sm font-medium text-foreground-600">内存</div>
+          <div className="flex flex-wrap gap-2">
+            <Chip>
+              <span className="font-medium">总容量：</span> {formatBytes(allSysData.total_memory)}
+            </Chip>
+            {allSysData.used_memory !== undefined && (
+              <Chip>
+                <span className="font-medium">已用：</span> {formatBytes(allSysData.used_memory)}
+                {memoryUsagePercent !== null && (
+                  <span className="ml-1">({memoryUsagePercent}%)</span>
+                )}
+              </Chip>
+            )}
+            {allSysData.total_memory !== undefined && allSysData.used_memory !== undefined && (
+              <Chip>
+                <span className="font-medium">可用：</span> {formatBytes(allSysData.total_memory - allSysData.used_memory)}
+              </Chip>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* GPU 信息 */}
+      {allSysData?.components && allSysData.components.length > 0 && (
+        (() => {
+          const gpuComponents = allSysData.components.filter((comp) => 
+            comp.label?.toLowerCase().includes('gpu') || 
+            comp.label?.toLowerCase().includes('graphics') ||
+            comp.label?.toLowerCase().includes('显卡')
+          )
+          
+          if (gpuComponents.length === 0) return null
+          
+          return (
+            <div className="flex flex-col gap-2">
+              <div className="text-sm font-medium text-foreground-600">显卡</div>
+              <div className="flex flex-wrap gap-2">
+                {gpuComponents.map((gpu, index) => (
+                  <Chip key={index}>
+                    <span className="font-medium">GPU{index > 0 ? ` ${index + 1}` : ""}：</span> {gpu.label || "未知"}
+                    {gpu.temperature !== undefined && (
+                      <span className="ml-1">({gpu.temperature}°C{gpu.max !== undefined ? ` / ${gpu.max}°C` : ""})</span>
+                    )}
+                  </Chip>
+                ))}
+              </div>
+            </div>
+          )
+        })()
+      )}
+
+      {/* 电池信息 */}
+      {allSysData?.batteries && allSysData.batteries.length > 0 && (
+        <div className="flex flex-col gap-2">
+          <div className="text-sm font-medium text-foreground-600">电池</div>
+          <div className="flex flex-wrap gap-2">
+            {allSysData.batteries.map((battery, index) => (
+              <Chip key={index}>
+                <span className="font-medium">电池{index > 0 ? ` ${index + 1}` : ""}：</span>
+                {battery.state && `${battery.state} `}
+                {battery.state_of_charge !== undefined && `${battery.state_of_charge}% `}
+                {battery.energy_full !== undefined && battery.energy !== undefined && (
+                  <span>({formatBytes(battery.energy)} / {formatBytes(battery.energy_full)})</span>
+                )}
+              </Chip>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   )
 }