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

web/src/components/icon-font.tsx

@@ -22,7 +22,7 @@ export function FileIcon({
   return (
     <span className={cn('size-4', className)}>
       <IconFont
-        name={isFolder ? 'file' : FileIconMap[getExtension(name)]}
+        name={isFolder ? 'file-sub' : FileIconMap[getExtension(name)]}
       ></IconFont>
     </span>
   );

web/src/components/new-document-link.tsx

@@ -11,6 +11,7 @@ interface IProps extends React.PropsWithChildren {
   documentName: string;
   documentId?: string;
   prefix?: string;
+  className?: string;
 }
 
 const NewDocumentLink = ({
@@ -21,6 +22,7 @@ const NewDocumentLink = ({
   documentId,
   documentName,
   prefix = 'file',
+  className,
 }: IProps) => {
   let nextLink = link;
   const extension = getExtension(documentName);
@@ -38,7 +40,8 @@ const NewDocumentLink = ({
       }
       href={nextLink}
       rel="noreferrer"
-      style={{ color, wordBreak: 'break-all' }}
+      style={{ color: className ? '' : color, wordBreak: 'break-all' }}
+      className={className}
     >
       {children}
     </a>

web/src/components/ui/badge.tsx

@@ -11,7 +11,7 @@ const badgeVariants = cva(
         default:
           'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
         secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          'border-transparent bg-background-card text-text-sub-title-invert hover:bg-secondary/80 rounded-md',
         destructive:
           'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
         outline: 'text-foreground',

web/src/components/ui/table.tsx

@@ -4,9 +4,14 @@ import { cn } from '@/lib/utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto rounded-2xl bg-background-card">
+  React.HTMLAttributes<HTMLTableElement> & { rootClassName?: string }
+>(({ className, rootClassName, ...props }, ref) => (
+  <div
+    className={cn(
+      'relative w-full overflow-auto rounded-2xl bg-background-card',
+      rootClassName,
+    )}
+  >
     <table
       ref={ref}
       className={cn('w-full caption-bottom text-sm ', className)}
@@ -20,7 +25,11 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn('[&_tr]:border-b top-0 sticky', className)}
+    {...props}
+  />
 ));
 TableHeader.displayName = 'TableHeader';