语料列表

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

@@ -1,77 +1,90 @@
 'use client'
 
 import List from './list'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, 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, fetchIntent, fetchIntentType } from '@/service/common'
-import { SimpleSelect } from '@/app/components/base/select'
+import { fetchCorpus, fetchIntent } from '@/service/common'
 import DetailModal from './detail-modal'
+import { Cascader as AntdCascader } from 'antd'
 
 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: 99999,
-      },
-    },
-    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',
+  const [intentCascader, setIntentCascader] = useState<any>([])
+  useEffect(() => {
+    fetchIntent({
+      url: '/intentions',
       params: {
         page: 1,
         limit: 99999,
-        intentType,
       },
-    },
-    fetchIntent,
-  )
-  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
+    }).then((res: any) => {
+      const map = new Map()
+      res.data.forEach((v: any) => {
+        if (map.has(v.type_id)) {
+          const parent = map.get(v.type_id)
+          parent.children.push(v)
+          map.set(v.type_id, parent)
+        }
+        else {
+          map.set(v.type_id, {
+            id: v.type_id,
+            name: v.type_name,
+            children: [v],
+          })
+        }
+      })
+      setIntentCascader(Array.from(map.values()))
+    })
+  }, [])
+  const [page, setPage] = useState<number>(0)
+  const [limit, setLimit] = useState<number>(10)
+  const [question, setQuestion] = useState<string>('')
+  const [intentName, setIntentName] = useState<string>('')
+  const [intentValue, setIntentValue] = useState<any>([])
+  const query = useRef<any>({})
+  const [list, setList] = useState<any>([])
+  const [total, setTotal] = useState(0)
+  const handlePage = () => {
+    console.log(intentName)
+    const params: any = {
+      page: page + 1,
+      limit,
+    }
+    if (query.current.question)
+      params.question_search = query.current.question
+    if (query.current.intentName)
+      params.intention_id = query.current.intentName
+    fetchCorpus({
+      url: '/intentions/corpus',
+      params,
+    }).then((res: any) => {
+      setList(res.data)
+      setTotal(res.total)
+    })
+  }
+  const [refresh, setRefresh] = useState<boolean>(false)
   const handleSearch = (reset = false) => {
+    setRefresh(true)
+    setPage(0)
     if (reset) {
       setQuestion('')
       setIntentName('')
-      setIntentType('')
+      setIntentValue([])
+      query.current = {}
     }
-    const params: any = {}
-    if (question)
-      params.question = question
-    if (intentType)
-      params.intentType = intentType
-    if (intentName)
-      params.intentName = intentName
-    setQuery(params)
-    setPage(0)
+    else {
+      query.current = {
+        question, intentName,
+      }
+    }
+    handlePage()
+    setRefresh(false)
   }
   useEffect(() => {
-    mutate()
+    if (!refresh)
+      handlePage()
   }, [page, limit])
 
   const [detailModalVisible, setDetailModalVisible] = useState(false)
@@ -94,30 +107,20 @@ const CorpusIndex = () => {
               onClear={() => setQuestion('')}
             />
           </div>
-          <div className="flex shrink-0 items-center text-gray-500">
+          <div className="ml-2 flex shrink-0 items-center text-gray-500">
             意图名称
             <div className="ml-2 flex h-[32px]">
-              <SimpleSelect
+              <AntdCascader
+                value={intentValue}
                 className="h-[32px] w-[200px]"
-                defaultValue={intentType}
-                onSelect={(i: any) => {
-                  setIntentType(i.value)
-                  setIntentName('')
+                options={intentCascader}
+                onChange={(val: any) => {
+                  setIntentValue(val)
+                  setIntentName(val?.[val.length - 1] || '')
                 }}
-                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}
+                placeholder="请选择"
+                fieldNames={{ label: 'name', value: 'id' }}
+                showSearch={true}
               />
             </div>
           </div>
@@ -147,7 +150,7 @@ const CorpusIndex = () => {
         <div className="flex-1">
           <List
             list={list || []}
-            onUpdate={mutate}
+            onUpdate={() => handleSearch(false)}
             pagination={{
               total,
               limit,
@@ -162,10 +165,19 @@ const CorpusIndex = () => {
         detailModalVisible && (
           <DetailModal
             transfer={transfer}
-            onCancel={() => setDetailModalVisible(false)}
+            onCancel={() => {
+              setDetailModalVisible(false)
+              handleSearch()
+            }}
             onSend={() => {
               setDetailModalVisible(false)
-              mutate()
+              handleSearch()
+            }}
+            onRefresh={(id: string) => {
+              setTransfer({
+                mode: 'edit',
+                row: { id },
+              })
             }}
           />
         )

web/app/components/skill/corpus/list.tsx

@@ -7,6 +7,8 @@ import cn from '@/utils/classnames'
 import { delCorpus } from '@/service/common'
 import Confirm from '@/app/components/base/confirm'
 import DetailModal from './detail-modal'
+import { useTranslation } from 'react-i18next'
+import useTimestamp from '@/hooks/use-timestamp'
 
 type PageListProps = {
   list: []
@@ -19,6 +21,8 @@ const CorpusPageList: FC<PageListProps> = ({
   pagination,
   onUpdate,
 }) => {
+  const { t } = useTranslation()
+  const { formatTime } = useTimestamp()
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
   const [row, setRow] = useState<any>({})
   const handleDel = async () => {
@@ -59,11 +63,11 @@ const CorpusPageList: FC<PageListProps> = ({
                   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>{item.question}</td>
+                  <td>{item.similarity_questions.length}</td>
+                  <td>{item.intention.type_name}</td>
+                  <td>{item.intention.name}</td>
+                  <td>{formatTime(item.created_at, t('datasetHitTesting.dateTimeFormat') as string)}</td>
                   <td className="flex justify-center gap-2">
                     <Button variant='ghost-accent' size='small' className={cn('shrink-0')} onClick={() => {
                       setTransfer({

web/app/layout.tsx

@@ -7,6 +7,7 @@ import { TanstackQueryIniter } from '@/context/query-client'
 import { ThemeProvider } from 'next-themes'
 import './styles/globals.css'
 import './styles/markdown.scss'
+import './styles/cus.scss'
 import Fix from '@/utils/fix'
 import { ConfigProvider } from 'antd'
 
@@ -67,11 +68,11 @@ const LocaleLayout = async ({
               >
                 <ConfigProvider theme={{
                   components: {
-                    Select: {
-                      colorBgBase: '#c8ceda40',
-                      colorBorder: '#c8ceda40',
-                      algorithm: true, // 启用算法
-                    },
+                    // Select: {
+                    //   colorBgBase: '#c8ceda40',
+                    //   colorBorder: '#c8ceda40',
+                    //   algorithm: true, // 启用算法
+                    // },
                   },
                 }}>
                   <I18nServer>

web/app/styles/cus.scss

@@ -0,0 +1,4 @@
+.ant-select-selector {
+  background-color: var(--color-components-input-bg-normal) !important;
+  border-color: transparent !important;
+}

web/app/styles/globals.css

@@ -697,4 +697,4 @@ button:focus-within {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
-}
+}

web/service/common.ts

@@ -530,26 +530,7 @@ export const delBatchIntentKeyword = ({ url, body }: any) => {
 }
 export const fetchCorpus = ({ url, params }: any) => {
   console.log('查询训练语料列表', url, params)
-  // return get(url, { params })
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const arr: any = []
-      for (let i = 1; i < 10; i++) {
-        arr.push({
-          id: i,
-          name: `语料_${i}`,
-          relation: i % 2,
-        })
-      }
-      resolve({
-        data: arr,
-        has_more: false,
-        limit: 10,
-        total: 100,
-        page: 1,
-      })
-    }, 1000)
-  })
+  return get(url, { params })
 }
 
 export const addCorpus = ({ url, body }: any) => {