tjdify/web/app/components/skill/corpus/index.tsx

'use client'

import List from './list'
import React, { useEffect, useState } from 'react'
import Input from '@/app/components/base/input'
import cn from '@/utils/classnames'
import { RiAddLine, RiRefreshLine, RiSearchLine } from '@remixicon/react'
import Button from '@/app/components/base/button'
import useSWR from 'swr'
import { fetchCorpus, fetchIntentName, fetchIntentType } from '@/service/common'
import { SimpleSelect } from '@/app/components/base/select'
import DetailModal from './detail-modal'

const CorpusIndex = () => {
  const [page, setPage] = React.useState<number>(0)
  const [limit, setLimit] = useState<number>(10)
  const [question, setQuestion] = useState<string>('') // the input value
  const [intentType, setIntentType] = useState<string>('') // the input value
  const { data: dataOptionsIntentType }: any = useSWR(
    {
      url: '/xxx',
      params: {
        page: 1,
        limit: 1000,
      },
    },
    fetchIntentType,
  )
  const optionsIntentType: any = dataOptionsIntentType?.data.map((v: any) => ({ name: v.name, value: v.id })) || []
  const [intentName, setIntentName] = useState<string>('') // the input value
  const { data: dataOptionsIntentName }: any = useSWR(
    {
      url: '/xxx',
      params: {
        page: 1,
        limit: 1000,
        intentType,
      },
    },
    fetchIntentName,
  )
  const optionsIntentName: any = dataOptionsIntentName?.data.map((v: any) => ({ name: v.name, value: v.id })) || []
  const [query, setQuery] = useState<any>({})
  const { data, mutate }: any = useSWR(
    {
      url: '/xxx',
      params: {
        page: page + 1,
        limit,
        ...query,
      },
    },
    fetchCorpus,
  )
  const list: any = data?.data || []
  const total = data?.total || 0
  const handleSearch = (reset = false) => {
    if (reset) {
      setQuestion('')
      setIntentName('')
      setIntentType('')
    }
    const params: any = {}
    if (question)
      params.question = question
    if (intentType)
      params.intentType = intentType
    if (intentName)
      params.intentName = intentName
    setQuery(params)
    setPage(0)
  }
  useEffect(() => {
    mutate()
  }, [page, limit])

  const [detailModalVisible, setDetailModalVisible] = useState(false)
  const [transfer, setTransfer] = useState<any>({
    mode: 'add',
    row: {},
  })
  return (
    <>
      <div className='flex h-full w-full flex-col bg-background-default-subtle p-6'>
        <div className="flex items-center gap-2">
          <div className="flex shrink-0 items-center text-gray-500">
            标准问题
            <Input
              className="ml-2"
              showClearIcon
              wrapperClassName='!w-[200px]'
              value={question}
              onChange={e => setQuestion(e.target.value)}
              onClear={() => setQuestion('')}
            />
          </div>
          <div className="flex shrink-0 items-center text-gray-500">
            意图名称
            <div className="ml-2 flex h-[32px]">
              <SimpleSelect
                className="h-[32px] w-[200px]"
                defaultValue={intentType}
                onSelect={(i: any) => {
                  setIntentType(i.value)
                  setIntentName('')
                }}
                items={optionsIntentType}
                allowSearch={false}
                placeholder="请选择意图类型"
              />
              <SimpleSelect
                className="h-[32px] w-[200px]"
                defaultValue={intentName}
                onSelect={(i: any) => {
                  setIntentName(i.value)
                }}
                items={optionsIntentName}
                allowSearch={false}
                placeholder="请选择意图名称"
                disabled={!intentType}
              />
            </div>
          </div>
          <Button variant='primary' className={cn('ml-auto shrink-0')} onClick={() => {
            handleSearch(false)
          }}>
            <RiSearchLine className='mr-1 h-4 w-4' />
            搜索
          </Button>
          <Button variant='primary' className={cn('shrink-0')} onClick={() => {
            handleSearch(true)
          }}>
            <RiRefreshLine className='mr-1 h-4 w-4' />
            重置
          </Button>
        </div>
        <div className="mt-2">
          <Button variant='primary' className={cn('shrink-0')}
            onClick={() => {
              setTransfer({ mode: 'add', row: null })
              setDetailModalVisible(true)
            }}>
            <RiAddLine className='mr-1 h-4 w-4' />
            新增
          </Button>
        </div>
        <div className="flex-1">
          <List
            list={list || []}
            onUpdate={mutate}
            pagination={{
              total,
              limit,
              onLimitChange: setLimit,
              current: page,
              onChange: setPage,
            }}
          />
        </div>
      </div>
      {
        detailModalVisible && (
          <DetailModal
            transfer={transfer}
            onCancel={() => setDetailModalVisible(false)}
            onSend={() => {
              setDetailModalVisible(false)
              mutate()
            }}
          />
        )
      }
    </>
  )
}
export default CorpusIndex