[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={() => {
-      // 触发刷新事件
+      // 使用 SWR 的 mutate 来刷新数据
-      window.dispatchEvent(new CustomEvent('refresh-hardware-info'))
+      mutate("/api/hardware-info")
     }}>
       <Refresh /> 刷新
     </ToolButton>
@@ -60,14 +62,13 @@ interface ComputerInfo {
   CsName?: string
 }
 
-function HardwareInfoContent() {
+interface HardwareData {
-  const [allSysData, setAllSysData] = useState<AllSystemInfo>()
+  allSysData: AllSystemInfo
-  const [computerInfo, setComputerInfo] = useState<ComputerInfo>({})
+  computerInfo: ComputerInfo
-  const [loading, setLoading] = useState(false)
+}
 
-  const fetchData = async () => {
+// 硬件信息 fetcher
-    setLoading(true)
+const hardwareInfoFetcher = async (): Promise<HardwareData> => {
-    try {
   // 并行获取系统信息和 PowerShell 信息
   const [sys, computerInfoData] = await Promise.all([
     allSysInfo(),
@@ -87,27 +88,26 @@ function HardwareInfoContent() {
       console.log("CPU字段:", Object.keys(sys.cpus[0]))
     }
   }
-      setAllSysData(sys)
-      setComputerInfo(computerInfoData)
-    } catch (error) {
-      console.error("获取系统信息失败:", error)
-    } finally {
-      setLoading(false)
-    }
-  }
   
-  useEffect(() => {
+  return {
-    void fetchData()
+    allSysData: sys,
+    computerInfo: computerInfoData
+  }
+}
 
-    // 监听刷新事件
+function HardwareInfoContent() {
-    const handleRefresh = () => {
+  const { data, isLoading } = useSWR<HardwareData>(
-      void fetchData()
+    "/api/hardware-info",
+    hardwareInfoFetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      dedupingInterval: 5 * 60 * 1000, // 5分钟内相同请求去重
     }
-    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 */}