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

'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