Feat: Adjust the operation cell of the table on the file management page and dataset page #3221. (#7526)

### What problem does this PR solve?

Feat: Adjust the operation cell of the table on the file management page
and dataset page #3221.
### Type of change


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

web/src/components/bulk-operate-bar.tsx

@@ -1,8 +1,10 @@
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
+import { BrushCleaning } from 'lucide-react';
 import { ReactNode, useCallback } from 'react';
 import { ConfirmDeleteDialog } from './confirm-delete-dialog';
+import { Separator } from './ui/separator';
 
 export type BulkOperateItemType = {
   id: string;
@@ -11,16 +13,21 @@ export type BulkOperateItemType = {
   onClick(): void;
 };
 
-type BulkOperateBarProps = { list: BulkOperateItemType[] };
+type BulkOperateBarProps = { list: BulkOperateItemType[]; count: number };
 
-export function BulkOperateBar({ list }: BulkOperateBarProps) {
+export function BulkOperateBar({ list, count }: BulkOperateBarProps) {
   const isDeleteItem = useCallback((id: string) => {
     return id === 'delete';
   }, []);
 
   return (
     <Card className="mb-4">
-      <CardContent className="p-1">
+      <CardContent className="p-1 pl-5 flex items-center gap-6">
+        <section className="text-text-sub-title-invert flex items-center gap-2">
+          <span>Selected: {count} Files</span>
+          <BrushCleaning className="size-3" />
+        </section>
+        <Separator orientation={'vertical'} className="h-3"></Separator>
         <ul className="flex gap-2">
           {list.map((x) => (
             <li