NapCatQQ/napcat.webui/src/components/system_status_display.tsx

import { Card, CardBody } from '@heroui/card'
import { Image } from '@heroui/image'
import clsx from 'clsx'
import { BiSolidMemoryCard } from 'react-icons/bi'
import { GiCpu } from 'react-icons/gi'

import bkg from '@/assets/images/bg/1AD934174C0107F14BAD8776D29C5F90.png'

import UsagePie from './usage_pie'

export interface SystemStatusItemProps {
  title: string
  value?: string | number
  size?: 'md' | 'lg'
  unit?: string
}

const SystemStatusItem: React.FC<SystemStatusItemProps> = ({
  title,
  value = '-',
  size = 'md',
  unit
}) => {
  return (
    <div
      className={clsx(
        'shadow-sm shadow-primary-100 p-2 rounded-md text-sm bg-content1 bg-opacity-30',
        size === 'lg' ? 'col-span-2' : 'col-span-1 flex justify-between'
      )}
    >
      <div className="w-24">{title}</div>
      <div className="text-default-400">
        {value}
        {unit}
      </div>
    </div>
  )
}

export interface SystemStatusDisplayProps {
  data?: SystemStatus
}

const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
  const memoryUsage = {
    system: 0,
    qq: 0
  }
  if (data) {
    const system = Number(data.memory.total) || 1
    const systemUsage = Number(data.memory.usage.system)
    const qqUsage = Number(data.memory.usage.qq)
    memoryUsage.system = (systemUsage / system) * 100
    memoryUsage.qq = (qqUsage / system) * 100
  }

  return (
    <Card className="bg-opacity-60 shadow-sm shadow-primary-100 col-span-1 lg:col-span-2 relative overflow-hidden">
      <div className="absolute h-full right-0 top-0">
        <Image
          src={bkg}
          alt="background"
          className="select-none pointer-events-none !opacity-30 w-full h-full"
          classNames={{
            wrapper: 'w-full h-full',
            img: 'object-contain w-full h-full'
          }}
        />
      </div>
      <CardBody className="overflow-visible md:flex-row gap-4 items-center justify-stretch z-10">
        <div className="flex-1 w-full md:max-w-96">
          <h2 className="text-lg font-semibold flex items-center gap-1 text-primary-400">
            <GiCpu className="text-xl" />
            <span>CPU</span>
          </h2>
          <div className="grid grid-cols-2 gap-2">
            <SystemStatusItem title="型号" value={data?.cpu.model} size="lg" />
            <SystemStatusItem title="内核数" value={data?.cpu.core} />
            <SystemStatusItem title="主频" value={data?.cpu.speed} unit="GHz" />
            <SystemStatusItem
              title="使用率"
              value={data?.cpu.usage.system}
              unit="%"
            />
            <SystemStatusItem
              title="QQ主线程"
              value={data?.cpu.usage.qq}
              unit="%"
            />
          </div>
          <h2 className="text-lg font-semibold flex items-center gap-1 text-primary-400 mt-2">
            <BiSolidMemoryCard className="text-xl" />
            <span>内存</span>
          </h2>
          <div className="grid grid-cols-2 gap-2">
            <SystemStatusItem
              title="总量"
              value={data?.memory.total}
              size="lg"
              unit="MB"
            />
            <SystemStatusItem
              title="使用量"
              value={data?.memory.usage.system}
              unit="MB"
            />
            <SystemStatusItem
              title="QQ主线程"
              value={data?.memory.usage.qq}
              unit="MB"
            />
          </div>
        </div>
        <div className="flex flex-row md:flex-col gap-2 flex-shrink-0 w-full justify-center md:w-40 min-h-40 mt-4 md:mt-0 md:mx-auto">
          <UsagePie
            systemUsage={Number(data?.cpu.usage.system) || 0}
            processUsage={Number(data?.cpu.usage.qq) || 0}
            title="CPU占用"
          />
          <UsagePie
            systemUsage={memoryUsage.system}
            processUsage={memoryUsage.qq}
            title="内存占用"
          />
        </div>
      </CardBody>
    </Card>
  )
}
export default SystemStatusDisplay