Feat/dataset support api service (#1240)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: crazywoola <427733928@qq.com>

web/app/(commonLayout)/datasets/Container.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+import Datasets from './Datasets'
+import DatasetFooter from './DatasetFooter'
+import ApiServer from './ApiServer'
+import Doc from './Doc'
+import TabSlider from '@/app/components/base/tab-slider'
+import { fetchDatasetApiBaseUrl } from '@/service/datasets'
+
+const Container = () => {
+  const { t } = useTranslation()
+  const options = [
+    {
+      value: 'dataset',
+      text: t('dataset.datasets'),
+    },
+    {
+      value: 'api',
+      text: t('dataset.datasetsApi'),
+    },
+  ]
+  const [activeTab, setActiveTab] = useState('dataset')
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { data } = useSWR(activeTab === 'dataset' ? null : '/datasets/api-base-info', fetchDatasetApiBaseUrl)
+
+  return (
+    <div ref={containerRef} className='grow relative flex flex-col bg-gray-100 overflow-y-auto'>
+      <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 h-14 bg-gray-100 z-10'>
+        <TabSlider
+          value={activeTab}
+          onChange={newActiveTab => setActiveTab(newActiveTab)}
+          options={options}
+        />
+        {
+          activeTab === 'api' && (
+            <ApiServer apiBaseUrl={data?.api_base_url || ''} />
+          )
+        }
+      </div>
+      {
+        activeTab === 'dataset' && (
+          <div className=''>
+            <Datasets containerRef={containerRef}/>
+            <DatasetFooter />
+          </div>
+        )
+      }
+      {
+        activeTab === 'api' && (
+          <Doc apiBaseUrl={data?.api_base_url || ''} />
+        )
+      }
+    </div>
+  )
+}
+
+export default Container