1

app/components/header/database-nav/index.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+// 引入React的useCallback钩子
+import { useCallback } from 'react'
+// 引入react-i18next的useTranslation钩子
+import { useTranslation } from 'react-i18next'
+// 引入next/navigation的useParams和useRouter钩子
+import { useParams, useRouter } from 'next/navigation'
+// 引入@remixicon/react的RiBook2Fill和RiBook2Line图标
+import {
+  RiDatabase2Fill,
+  RiDatabase2Line,
+} from '@remixicon/react'
+// 引入swr和swr/infinite
+import useSWR from 'swr'
+import useSWRInfinite from 'swr/infinite'
+// 引入lodash-es的flatten函数
+import { flatten } from 'lodash-es'
+// 引入Nav组件
+import Nav from '../nav'
+// 引入NavItem类型
+import type { NavItem } from '../nav/nav-selector'
+// 引入fetchDatasetDetail和fetchDatasets函数
+import { fetchDatasetDetail, fetchDatasets } from '@/service/datasets'
+// 引入DataSetListResponse类型
+import type { DataSetListResponse } from '@/models/datasets'
+
+// 定义getKey函数，用于获取分页数据
+const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
+  // 如果pageIndex不存在或者previousPageData的has_more属性为true，则返回url和params
+  if (!pageIndex || previousPageData.has_more)
+    return { url: 'datasets', params: { page: pageIndex + 1, limit: 30 } }
+  // 否则返回null
+  return null
+}
+
+// 定义DatabaseNav组件
+const DatabaseNav = () => {
+  // 使用useTranslation钩子获取t函数
+  const { t } = useTranslation()
+  // 使用useRouter钩子获取router对象
+  const router = useRouter()
+  // 使用useParams钩子获取datasetId参数
+  const { datasetId } = useParams()
+  // 使用useSWR钩子获取当前数据集
+  const { data: currentDataset } = useSWR(
+    datasetId
+      ? {
+        url: 'fetchDatasetDetail',
+        datasetId,
+      }
+      : null,
+    apiParams => fetchDatasetDetail(apiParams.datasetId as string))
+  // 使用useSWRInfinite钩子获取数据集数据
+  const { data: datasetsData, setSize } = useSWRInfinite(datasetId ? getKey : () => null, fetchDatasets, { revalidateFirstPage: false, revalidateAll: true })
+  // 使用flatten函数将数据集数据扁平化
+  const datasetItems = flatten(datasetsData?.map(datasetData => datasetData.data))
+
+  // 定义handleLoadmore函数，用于加载更多数据
+  const handleLoadmore = useCallback(() => {
+    // 调用setSize函数，将size加1
+    setSize(size => size + 1)
+  }, [setSize])
+
+  // 返回Nav组件
+  return (
+    // 数据库导航nav
+    <Nav
+      // 设置icon和activeIcon
+      icon={<RiDatabase2Fill className='w-4 h-4' />}
+      activeIcon={<RiDatabase2Line className='w-4 h-4' />}
+      // 设置text
+      text={t('common.menus.database')}
+      // 设置activeSegment
+      activeSegment='database'
+      // 设置link
+      link='/database'
+      // 设置curNav
+      curNav={currentDataset as Omit<NavItem, 'link'>}
+      // 设置navs
+      navs={datasetItems.map(dataset => ({
+        id: dataset.id,
+        name: dataset.name,
+        link: dataset.provider === 'external' ? `/database/${dataset.id}/hitTesting` : `/database/${dataset.id}/documents`,
+        icon: dataset.icon,
+        icon_background: dataset.icon_background,
+      })) as NavItem[]}
+      // 设置createText
+      createText={t('common.menus.newDataset')}
+      // 设置onCreate
+      onCreate={() => router.push('/database/create')}
+      // 设置onLoadmore
+      onLoadmore={handleLoadmore}
+    />
+  )
+}
+
+// 导出DatabaseNav组件
+export default DatabaseNav