cstb-next/src/app/(main)/gear/page.tsx

"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 (
    <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>
  )
}