NapCatQQ/napcat.webui/src/components/log_com/history.tsx

import { Button } from '@heroui/button';
import { Card, CardBody, CardHeader } from '@heroui/card';
import { Select, SelectItem } from '@heroui/select';
import type { Selection } from '@react-types/shared';
import { useEffect, useRef, useState } from 'react';

import { colorizeLogLevel } from '@/utils/terminal';

import PageLoading from '../page_loading';
import XTerm from '../xterm';
import type { XTermRef } from '../xterm';
import LogLevelSelect from './log_level_select';

export interface HistoryLogsProps {
  list: string[]
  onSelect: (name: string) => void
  selectedLog?: string
  refreshList: () => void
  refreshLog: () => void
  listLoading?: boolean
  logLoading?: boolean
  listError?: Error
  logContent?: string
}
const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
  const {
    list,
    onSelect,
    selectedLog,
    refreshList,
    refreshLog,
    listLoading,
    logContent,
    listError,
    logLoading,
  } = props;
  const Xterm = useRef<XTermRef>(null);

  const [logLevel, setLogLevel] = useState<Selection>(
    new Set(['info', 'warn', 'error'])
  );

  const logToColored = (log: string) => {
    const logs = log
      .split('\n')
      .map((line) => {
        const colored = colorizeLogLevel(line);
        return colored;
      })
      .filter((log) => {
        if (logLevel === 'all') {
          return true;
        }
        return logLevel.has(log.level);
      })
      .map((log) => log.content)
      .join('\r\n');
    return logs;
  };

  const onDownloadLog = () => {
    if (!logContent) {
      return;
    }
    const blob = new Blob([logContent], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${selectedLog}.log`;
    a.click();
    URL.revokeObjectURL(url);
  };

  useEffect(() => {
    if (!Xterm.current || !logContent) {
      return;
    }
    Xterm.current.clear();
    const _logContent = logToColored(logContent);
    Xterm.current.write(_logContent + '\r\nnapcat@webui:~$ ');
  }, [logContent, logLevel]);

  return (
    <>
      <title>历史日志 - NapCat WebUI</title>
      <Card className='max-w-full h-full bg-opacity-50 backdrop-blur-sm'>
        <CardHeader className='flex-row justify-start gap-3'>
          <Select
            label='选择日志'
            size='sm'
            isLoading={listLoading}
            errorMessage={listError?.message}
            classNames={{
              trigger:
                'hover:!bg-content3 bg-opacity-50 backdrop-blur-sm hover:!bg-opacity-60',
            }}
            placeholder='选择日志'
            onChange={(e) => {
              const value = e.target.value;
              if (!value) {
                return;
              }
              onSelect(value);
            }}
            selectedKeys={[selectedLog || '']}
            items={list.map((name) => ({
              value: name,
              label: name,
            }))}
          >
            {(item) => (
              <SelectItem key={item.value} value={item.value}>
                {item.label}
              </SelectItem>
            )}
          </Select>
          <LogLevelSelect
            selectedKeys={logLevel}
            onSelectionChange={setLogLevel}
          />
          <Button className='flex-shrink-0' onPress={onDownloadLog}>
            下载日志
          </Button>
          <Button onPress={refreshList}>刷新列表</Button>
          <Button onPress={refreshLog}>刷新日志</Button>
        </CardHeader>
        <CardBody className='relative'>
          <PageLoading loading={logLoading} />
          <XTerm className='w-full h-full' ref={Xterm} />
        </CardBody>
      </Card>
    </>
  );
};

export default HistoryLogs;