Feat: Modify the style of the dataset page #3221 (#7446)

### What problem does this PR solve?

Feat:  Modify the style of the dataset page #3221

### Type of change


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

web/src/components/icon-font.tsx

@@ -1,4 +1,6 @@
+import { FileIconMap } from '@/constants/file';
 import { cn } from '@/lib/utils';
+import { getExtension } from '@/utils/document-util';
 
 type IconFontType = {
   name: string;
@@ -10,3 +12,18 @@ export const IconFont = ({ name, className }: IconFontType) => (
     <use xlinkHref={`#icon-${name}`} />
   </svg>
 );
+
+export function FileIcon({
+  name,
+  className,
+  type,
+}: IconFontType & { type?: string }) {
+  const isFolder = type === 'folder';
+  return (
+    <span className={cn('size-4', className)}>
+      <IconFont
+        name={isFolder ? 'file' : FileIconMap[getExtension(name)]}
+      ></IconFont>
+    </span>
+  );
+}

web/src/components/ragflow-avatar.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { random } from 'lodash';
 import { forwardRef } from 'react';
@@ -15,16 +16,24 @@ export const RAGFlowAvatar = forwardRef<
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
     name?: string;
     avatar?: string;
+    isPerson?: boolean;
   }
->(({ name, avatar, ...props }, ref) => {
+>(({ name, avatar, isPerson = false, className, ...props }, ref) => {
   const index = random(0, 3);
   console.log('🚀 ~ index:', index);
   const value = Colors[index];
   return (
-    <Avatar ref={ref} {...props}>
+    <Avatar
+      ref={ref}
+      {...props}
+      className={cn(className, { 'rounded-md': !isPerson })}
+    >
       <AvatarImage src={avatar} />
       <AvatarFallback
-        className={`bg-gradient-to-b from-[${value.from}] to-[${value.to}]`}
+        className={cn(
+          `bg-gradient-to-b from-[${value.from}] to-[${value.to}]`,
+          { 'rounded-md': !isPerson },
+        )}
       >
         {name?.slice(0, 1)}
       </AvatarFallback>

web/src/components/ui/switch.tsx

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-colors-background-core-standard data-[state=unchecked]:bg-colors-background-inverse-standard',
+      'peer inline-flex h-3.5 w-6 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background-checked data-[state=unchecked]:bg-text-sub-title',
       className,
     )}
     {...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-5 w-5 rounded-full bg-colors-text-neutral-strong shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        'pointer-events-none block size-3 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-2 data-[state=unchecked]:translate-x-0',
       )}
     />
   </SwitchPrimitives.Root>

web/src/components/ui/table.tsx

@@ -6,10 +6,10 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  <div className="relative w-full overflow-auto rounded-2xl bg-background-card">
     <table
       ref={ref}
-      className={cn('w-full caption-bottom text-sm', className)}
+      className={cn('w-full caption-bottom text-sm ', className)}
       {...props}
     />
   </div>
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      'h-12 px-4 text-left align-middle font-normal text-text-sub-title [&:has([role=checkbox])]:pr-0',
       className,
     )}
     {...props}
@@ -87,7 +87,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    className={cn(
+      'p-4 align-middle [&:has([role=checkbox])]:pr-0 text-text-title font-normal',
+      className,
+    )}
     {...props}
   />
 ));