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

'use client'
import Pagination, { type Props as PaginationProps } from '@/app/components/base/pagination'
import type { FC } from 'react'
import { useState } from 'react'
import Button from '@/app/components/base/button'
import cn from '@/utils/classnames'
import { delCorpus } from '@/service/common'
import Confirm from '@/app/components/base/confirm'
import DetailModal from './detail-modal'

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

const IntentPageList: FC<PageListProps> = ({
  list = [],
  pagination,
  onUpdate,
}) => {
  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
  const [row, setRow] = useState<any>({})
  const handleDel = async () => {
    try {
      await delCorpus({
        url: `/tags/${row.id}`,
        body: {},
      })
      setShowConfirmDelete(false)
      onUpdate()
    }
    catch (e) { }
  }

  const [detailModalVisible, setDetailModalVisible] = useState(false)
  const [transfer, setTransfer] = useState<any>({
    mode: 'add',
    row: {},
  })
  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>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>2025-02-02 22:44:33</td>
                  <td className="flex justify-center gap-2">
                    <Button variant='ghost-accent' size='small' className={cn('shrink-0')} onClick={() => {
                      setTransfer({
                        mode: 'edit',
                        row: JSON.parse(JSON.stringify(item)),
                      })
                      setDetailModalVisible(true)
                    }}>
                      编辑
                    </Button>
                    <Button variant='ghost' size='small' className={cn('shrink-0 text-red-600')} onClick={() => {
                      setRow(item)
                      setShowConfirmDelete(true)
                    }}>
                      刪除
                    </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>
      {showConfirmDelete && (
        <Confirm
          title="删除确认"
          content={`请确认是否删除${row.name}？`}
          isShow={showConfirmDelete}
          onConfirm={handleDel}
          onCancel={() => setShowConfirmDelete(false)}
        />
      )}
      {
        detailModalVisible && (
          <DetailModal
            transfer={transfer}
            onCancel={() => setDetailModalVisible(false)}
            onSend={() => {
              setDetailModalVisible(false)
              onUpdate()
            }}
          />
        )
      }
    </>
  )
}
export default IntentPageList