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

import { Button } from '@heroui/button';
import { Card, CardBody, CardHeader } from '@heroui/card';
import { Chip } from '@heroui/chip';
import { Spinner } from '@heroui/spinner';
import { Tooltip } from '@heroui/tooltip';
import { useRequest } from 'ahooks';
import { useEffect } from 'react';
import { BsStars } from 'react-icons/bs';
import { FaCircleInfo, FaInfo, FaQq } from 'react-icons/fa6';
import { IoLogoChrome, IoLogoOctocat } from 'react-icons/io';
import { RiMacFill } from 'react-icons/ri';

import useDialog from '@/hooks/use-dialog';

import { request } from '@/utils/request';
import { compareVersion } from '@/utils/version';

import WebUIManager from '@/controllers/webui_manager';
import { GithubRelease } from '@/types/github';

import TailwindMarkdown from './tailwind_markdown';

export interface SystemInfoItemProps {
  title: string
  icon?: React.ReactNode
  value?: React.ReactNode
  endContent?: React.ReactNode
}

const SystemInfoItem: React.FC<SystemInfoItemProps> = ({
  title,
  value = '--',
  icon,
  endContent,
}) => {
  return (
    <div className='flex text-sm gap-1 p-2 items-center shadow-sm shadow-primary-100 dark:shadow-primary-100 rounded text-primary-400'>
      {icon}
      <div className='w-24'>{title}</div>
      <div className='text-primary-200'>{value}</div>
      <div className='ml-auto'>{endContent}</div>
    </div>
  );
};

export interface NewVersionTipProps {
  currentVersion?: string
}

const NewVersionTip = (props: NewVersionTipProps) => {
  const { currentVersion } = props;
  const dialog = useDialog();
  const { data: releaseData, error } = useRequest(() =>
    request.get<GithubRelease[]>(
      'https://api.github.com/repos/NapNeko/NapCatQQ/releases'
    )
  );

  if (error) {
    return (
      <Tooltip content='检查新版本失败'>
        <Button
          isIconOnly
          radius='full'
          color='primary'
          variant='shadow'
          className='!w-5 !h-5 !min-w-0 text-small shadow-md'
          onPress={() => {
            dialog.alert({
              title: '检查新版本失败',
              content: error.message,
            });
          }}
        >
          <FaInfo />
        </Button>
      </Tooltip>
    );
  }

  const latestVersion = releaseData?.data?.[0]?.tag_name;

  if (!latestVersion || !currentVersion) {
    return null;
  }

  if (compareVersion(latestVersion, currentVersion) <= 0) {
    return null;
  }

  const middleVersions: GithubRelease[] = [];

  for (let i = 0; i < releaseData.data.length; i++) {
    const versionInfo = releaseData.data[i];
    if (compareVersion(versionInfo.tag_name, currentVersion) > 0) {
      middleVersions.push(versionInfo);
    } else {
      break;
    }
  }

  const AISummaryComponent = () => {
    const {
      data: aiSummaryData,
      loading: aiSummaryLoading,
      error: aiSummaryError,
      run: runAiSummary,
    } = useRequest(
      (version) =>
        request.get<ServerResponse<string | null>>(
          `https://release.nc.152710.xyz/?version=${version}`,
          {
            timeout: 30000,
          }
        ),
      {
        manual: true,
      }
    );

    useEffect(() => {
      runAiSummary(currentVersion);
    }, [currentVersion, runAiSummary]);

    if (aiSummaryLoading) {
      return (
        <div className='flex justify-center py-1'>
          <Spinner size='sm' />
        </div>
      );
    }
    if (aiSummaryError) {
      return <div className='text-center text-primary-500'>AI 摘要获取失败</div>;
    }
    return <span className='text-default-700'>{aiSummaryData?.data.data}</span>;
  };

  return (
    <Tooltip content='有新版本可用'>
      <Button
        isIconOnly
        radius='full'
        color='primary'
        variant='shadow'
        className='!w-5 !h-5 !min-w-0 text-small shadow-md'
        onPress={() => {
          dialog.confirm({
            title: '有新版本可用',
            content: (
              <div className='space-y-2'>
                <div className='text-sm space-x-2'>
                  <span>当前版本</span>
                  <Chip color='primary' variant='flat'>
                    v{currentVersion}
                  </Chip>
                </div>
                <div className='text-sm space-x-2'>
                  <span>最新版本</span>
                  <Chip color='primary'>{latestVersion}</Chip>
                </div>
                <div className='p-2 rounded-md bg-content2 text-sm'>
                  <div className='text-primary-400 font-bold flex items-center gap-1 mb-1'>
                    <BsStars />
                    <span>AI总结</span>
                  </div>
                  <AISummaryComponent />
                </div>
                <div className='text-sm space-y-2 !mt-4'>
                  {middleVersions.map((versionInfo) => (
                    <div
                      key={versionInfo.tag_name}
                      className='p-4 bg-content1 rounded-md shadow-small'
                    >
                      <TailwindMarkdown content={versionInfo.body} />
                    </div>
                  ))}
                </div>
              </div>
            ),
            scrollBehavior: 'inside',
            size: '3xl',
            confirmText: '前往下载',
            onConfirm () {
              window.open(
                'https://github.com/NapNeko/NapCatQQ/releases',
                '_blank',
                'noopener'
              );
            },
          });
        }}
      >
        <FaInfo />
      </Button>
    </Tooltip>
  );
};

const NapCatVersion = () => {
  const {
    data: packageData,
    loading: packageLoading,
    error: packageError,
  } = useRequest(WebUIManager.getPackageInfo);

  const currentVersion = packageData?.version;

  return (
    <SystemInfoItem
      title='NapCat 版本'
      icon={<IoLogoOctocat className='text-xl' />}
      value={
        packageError
          ? (
          `错误：${packageError.message}`
          )
          : packageLoading
            ? (
              <Spinner size='sm' />
            )
            : (
              currentVersion
            )
      }
      endContent={<NewVersionTip currentVersion={currentVersion} />}
    />
  );
};

export interface SystemInfoProps {
  archInfo?: string
}
const SystemInfo: React.FC<SystemInfoProps> = (props) => {
  const { archInfo } = props;
  const {
    data: qqVersionData,
    loading: qqVersionLoading,
    error: qqVersionError,
  } = useRequest(WebUIManager.getQQVersion);
  return (
    <Card className='bg-opacity-60 shadow-sm shadow-primary-100 dark:shadow-primary-100 overflow-visible flex-1'>
      <CardHeader className='pb-0 items-center gap-1 text-primary-500 font-extrabold'>
        <FaCircleInfo className='text-lg' />
        <span>系统信息</span>
      </CardHeader>
      <CardBody className='flex-1'>
        <div className='flex flex-col justify-between h-full'>
          <NapCatVersion />
          <SystemInfoItem
            title='QQ 版本'
            icon={<FaQq className='text-lg' />}
            value={
              qqVersionError
                ? (
                `错误：${qqVersionError.message}`
                )
                : qqVersionLoading
                  ? (
                    <Spinner size='sm' />
                  )
                  : (
                    qqVersionData
                  )
            }
          />
          <SystemInfoItem
            title='WebUI 版本'
            icon={<IoLogoChrome className='text-xl' />}
            value='Next'
          />
          <SystemInfoItem
            title='系统版本'
            icon={<RiMacFill className='text-xl' />}
            value={archInfo}
          />
        </div>
      </CardBody>
    </Card>
  );
};

export default SystemInfo;