[feat] basic system info with tauri plugin

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

@@ -1,3 +1,78 @@
+"use client"
+import { Card, CardBody, CardHeader, CardIcon, CardTool } from "@/components/window/Card"
+import { ToolButton } from "@/components/window/ToolButton"
+import { Chip } from "@heroui/react"
+import { SettingConfig, Refresh, UploadOne, HardDisk } from "@icon-park/react"
+import { useState, useEffect } from "react"
+import {
+  allSysInfo,
+  memoryInfo,
+  cpuInfo,
+  AllSystemInfo,
+  StaticInfo,
+  MemoryInfo,
+  CpuInfo,
+  Batteries,
+  batteries,
+  staticInfo,
+} from "tauri-plugin-system-info-api"
 export default function Page() {
-  return <div>Gear</div>
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <CardIcon type="menu">
+          <SettingConfig /> 硬件
+        </CardIcon>
+        <CardTool>
+          {/* <ToolButton>
+            <UploadOne />
+            云同步
+          </ToolButton> */}
+          <ToolButton>
+            <Refresh /> 刷新
+          </ToolButton>
+        </CardTool>
+      </CardHeader>
+
+      <CardBody>
+        <HardwareInfo />
+      </CardBody>
+    </Card>
+  )
+}
+
+function HardwareInfo() {
+  const [allSysData, setAllSysData] = useState<AllSystemInfo>()
+  // const [memInfo, setMemInfo] = useState("")
+  // const [staticData, setStaticData] = useState("")
+  // const [cpuData, setCpuData] = useState("")
+  // const [batteryData, setBatteryData] = useState("")
+
+  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())
+    }
+
+    fetchData()
+  }, [])
+
+  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>
+  )
 }