tjdify/web/app/components/skill/log/list.tsx

'use client'
import Pagination, { type Props as PaginationProps } from '@/app/components/base/pagination'
import type { FC } from 'react'
import Button from '@/app/components/base/button'
import cn from '@/utils/classnames'
import { useTranslation } from 'react-i18next'
import useTimestamp from '@/hooks/use-timestamp'
import { downloadLogFile } from '@/service/common'

type PageListProps = {
  list: []
  pagination: PaginationProps
  onUpdate: () => void
}

const LogPageList: FC<PageListProps> = ({
  list = [],
  pagination,
  onUpdate,
}) => {
  const { t } = useTranslation()
  const { formatTime } = useTimestamp()
  const statusMap = new Map([
    ['CREATED', '创建'],
    ['TRAINING', '训练中'],
    ['COMPLETED', '完成'],
  ])
  const handleDownload = async (item: any) => {
    await downloadLogFile({
      url: `/intentions/train_tasks/download/${item.id}`,
      fileName: item.name,
    })
  }
  return (
    <div className='relative flex h-full w-full flex-col'>
      <div className='relative grow overflow-x-auto'>
        <table className={'mt-3 w-full min-w-[700px] max-w-full border-collapse border-0 text-sm'}>
          <thead className="h-8 border-b border-divider-subtle text-xs font-medium uppercase leading-8 text-text-tertiary">
            <tr>
              <td>训练任务</td>
              <td>训练状态</td>
              <td>训练语料数据集版本</td>
              <td>训练时间</td>
              <td>训练模型结果版本</td>
              <td className="w-[120px] text-center">操作</td>
            </tr>
          </thead>
          <tbody className="text-text-secondary">
            {list.map((item: any, index) => (
              <tr
                key={item.id}
                className={'h-8 border-b border-divider-subtle hover:bg-background-default-hover'}
              >
                <td>{item.name}</td>
                <td>{statusMap.get(item.status)}</td>
                <td>{item.dataset_info.version}</td>
                <td>{formatTime(item.created_at, t('datasetHitTesting.dateTimeFormat') as string)}</td>
                <td>{item.model_info.version}</td>
                <td className="flex justify-center gap-2">
                  <Button variant='ghost-accent' size='small' className={cn('shrink-0')} onClick={(e) => {
                    e.stopPropagation()
                    handleDownload(item)
                  }}>
                    下载
                  </Button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {/* Show Pagination only if the total is more than the limit */}
      {pagination.total && (
        <Pagination
          {...pagination}
          className='w-full shrink-0 px-0 pb-0'
        />
      )}
    </div>
  )
}
export default LogPageList