Feat: Deleting files in batches. #3221 (#7234)

### What problem does this PR solve?
Feat: Deleting files in batches. #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/dataset/dataset/index.tsx

@@ -1,8 +1,10 @@
+import { BulkOperateBar } from '@/components/bulk-operate-bar';
 import { FileUploadDialog } from '@/components/file-upload-dialog';
 import ListFilterBar from '@/components/list-filter-bar';
 import { Button } from '@/components/ui/button';
 import { Upload } from 'lucide-react';
 import { DatasetTable } from './dataset-table';
+import { useBulkOperateDataset } from './use-bulk-operate-dataset';
 import { useHandleUploadDocument } from './use-upload-document';
 
 export default function Dataset() {
@@ -13,6 +15,8 @@ export default function Dataset() {
     onDocumentUploadOk,
     documentUploadLoading,
   } = useHandleUploadDocument();
+  const { list } = useBulkOperateDataset();
+
   return (
     <section className="p-8">
       <ListFilterBar title="Files">
@@ -25,8 +29,8 @@ export default function Dataset() {
           Upload file
         </Button>
       </ListFilterBar>
+      <BulkOperateBar list={list}></BulkOperateBar>
       <DatasetTable></DatasetTable>
-
       {documentUploadVisible && (
         <FileUploadDialog
           hideModal={hideDocumentUploadModal}

web/src/pages/dataset/dataset/use-bulk-operate-dataset.tsx

@@ -0,0 +1,41 @@
+import { Ban, CircleCheck, CircleX, Play, Trash2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export function useBulkOperateDataset() {
+  const { t } = useTranslation();
+
+  const list = [
+    {
+      id: 'enabled',
+      label: t('knowledgeDetails.enabled'),
+      icon: <CircleCheck />,
+      onClick: () => {},
+    },
+    {
+      id: 'disabled',
+      label: t('knowledgeDetails.disabled'),
+      icon: <Ban />,
+      onClick: () => {},
+    },
+    {
+      id: 'run',
+      label: t('knowledgeDetails.run'),
+      icon: <Play />,
+      onClick: () => {},
+    },
+    {
+      id: 'cancel',
+      label: t('knowledgeDetails.cancel'),
+      icon: <CircleX />,
+      onClick: () => {},
+    },
+    {
+      id: 'delete',
+      label: t('common.delete'),
+      icon: <Trash2 />,
+      onClick: () => {},
+    },
+  ];
+
+  return { list };
+}