[feat] hw info cache

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

@@ -10,9 +10,9 @@ import { ToolButton } from "@/components/window/ToolButton"
 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"
+import useSWR, { useSWRConfig } from "swr"
 
 export default function Page() {
   return (
@@ -42,10 +42,12 @@ export default function Page() {
 }
 
 function HardwareInfo() {
+  const { mutate } = useSWRConfig()
+  
   return (
     <ToolButton onClick={() => {
-      // 触发刷新事件
-      window.dispatchEvent(new CustomEvent('refresh-hardware-info'))
+      // 使用 SWR 的 mutate 来刷新数据
+      mutate("/api/hardware-info")
     }}>
       <Refresh /> 刷新
     </ToolButton>
@@ -60,54 +62,52 @@ interface ComputerInfo {
   CsName?: string
 }
 
-function HardwareInfoContent() {
-  const [allSysData, setAllSysData] = useState<AllSystemInfo>()
-  const [computerInfo, setComputerInfo] = useState<ComputerInfo>({})
-  const [loading, setLoading] = useState(false)
+interface HardwareData {
+  allSysData: AllSystemInfo
+  computerInfo: ComputerInfo
+}
 
-  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)
+// 硬件信息 fetcher
+const hardwareInfoFetcher = async (): Promise<HardwareData> => {
+  // 并行获取系统信息和 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]))
     }
   }
+  
+  return {
+    allSysData: sys,
+    computerInfo: computerInfoData
+  }
+}
 
-  useEffect(() => {
-    void fetchData()
+function HardwareInfoContent() {
+  const { data, isLoading } = useSWR<HardwareData>(
+    "/api/hardware-info",
+    hardwareInfoFetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      dedupingInterval: 5 * 60 * 1000, // 5分钟内相同请求去重
+    }
+  )
 
-    // 监听刷新事件
-    const handleRefresh = () => {
-      void fetchData()
-    }
-    window.addEventListener('refresh-hardware-info', handleRefresh)
-    return () => {
-      window.removeEventListener('refresh-hardware-info', handleRefresh)
-    }
-  }, [])
+  const allSysData = data?.allSysData
+  const computerInfo = data?.computerInfo || {}
 
   const formatBytes = (bytes?: number) => {
     if (!bytes) return "未知"
@@ -171,7 +171,7 @@ function HardwareInfoContent() {
     : null
 
   // 如果正在加载，显示 Skeleton 骨架屏
-  if (loading) {
+  if (isLoading) {
     return (
       <div className="flex flex-col gap-4">
         {/* 系统信息 Skeleton */}