Feat: Modify the dataset list page style #3221 (#7437)

### What problem does this PR solve?

Feat: Modify the dataset list page style #3221

### Type of change


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

web/src/components/ui/button.tsx

@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-colors-outline-sentiment-primary bg-background hover:bg-accent hover:text-accent-foreground',
+          'border border-text-sub-title-invert bg-transparent hover:bg-accent hover:text-accent-foreground',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
@@ -23,8 +23,8 @@ const buttonVariants = cva(
         icon: 'bg-colors-background-inverse-standard text-foreground hover:bg-colors-background-inverse-standard/80',
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
+        default: 'h-8 px-2.5 py-1.5 ',
+        sm: 'h-6 rounded-sm px-2',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
         auto: 'h-full px-1',

web/src/components/ui/input.tsx

@@ -12,7 +12,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-8 w-full rounded-md border border-input bg-colors-background-inverse-weak px-2 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}
@@ -28,7 +28,12 @@ export interface ExpandedInputProps extends Omit<InputProps, 'prefix'> {
   suffix?: React.ReactNode;
 }
 
-const ExpandedInput = ({ suffix, prefix, ...props }: ExpandedInputProps) => {
+const ExpandedInput = ({
+  suffix,
+  prefix,
+  className,
+  ...props
+}: ExpandedInputProps) => {
   return (
     <div className="relative">
       <span
@@ -39,7 +44,7 @@ const ExpandedInput = ({ suffix, prefix, ...props }: ExpandedInputProps) => {
         {prefix}
       </span>
       <Input
-        className={cn({ 'pr-10': suffix, 'pl-10': prefix })}
+        className={cn({ 'pr-8': !!suffix, 'pl-8': !!prefix }, className)}
         {...props}
       ></Input>
       <span
@@ -54,7 +59,12 @@ const ExpandedInput = ({ suffix, prefix, ...props }: ExpandedInputProps) => {
 };
 
 const SearchInput = (props: InputProps) => {
-  return <ExpandedInput suffix={<Search />} {...props}></ExpandedInput>;
+  return (
+    <ExpandedInput
+      prefix={<Search className="size-3.5" />}
+      {...props}
+    ></ExpandedInput>
+  );
 };
 
 export { ExpandedInput, Input, SearchInput };

web/src/components/ui/pagination.tsx

@@ -48,6 +48,7 @@ const PaginationLink = ({
   <a
     aria-current={isActive ? 'page' : undefined}
     className={cn(
+      'size-8',
       buttonVariants({
         variant: isActive ? 'outline' : 'ghost',
         size,
@@ -70,7 +71,6 @@ const PaginationPrevious = ({
     {...props}
   >
     <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
   </PaginationLink>
 );
 PaginationPrevious.displayName = 'PaginationPrevious';
@@ -85,7 +85,6 @@ const PaginationNext = ({
     className={cn('gap-1 pr-2.5', className)}
     {...props}
   >
-    <span>Next</span>
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 );

web/src/components/ui/ragflow-pagination.tsx

@@ -98,7 +98,7 @@ export function RAGFlowPagination({
   }, [pageSize]);
 
   return (
-    <section className="flex items-center justify-end">
+    <section className="flex items-center justify-end text-text-sub-title-invert ">
       <span className="mr-4">Total {total}</span>
       <Pagination className="w-auto mx-0 mr-4">
         <PaginationContent>
@@ -108,9 +108,14 @@ export function RAGFlowPagination({
           {pages.map((x) => (
             <PaginationItem
               key={x}
-              className={cn({ ['bg-accent rounded-md']: currentPage === x })}
+              className={cn({
+                ['bg-background-header-bar rounded-md text-text-title']:
+                  currentPage === x,
+              })}
             >
-              <PaginationLink onClick={handlePageChange(x)}>{x}</PaginationLink>
+              <PaginationLink onClick={handlePageChange(x)} className="size-8">
+                {x}
+              </PaginationLink>
             </PaginationItem>
           ))}
           <PaginationItem>
@@ -126,6 +131,7 @@ export function RAGFlowPagination({
           options={sizeChangerOptions}
           value={currentPageSize}
           onChange={handlePageSizeChange}
+          triggerClassName="bg-background-header-bar"
         ></RAGFlowSelect>
       )}
     </section>

web/src/components/ui/select.tsx

@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-8 w-full items-center justify-between rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className,
     )}
     {...props}
@@ -192,6 +192,7 @@ export type RAGFlowSelectProps = Partial<ControllerRenderProps> & {
   allowClear?: boolean;
   placeholder?: React.ReactNode;
   contentProps?: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>;
+  triggerClassName?: string;
 } & SelectPrimitive.SelectProps;
 
 /**
@@ -223,6 +224,7 @@ export const RAGFlowSelect = forwardRef<
     placeholder,
     contentProps = {},
     defaultValue,
+    triggerClassName,
   },
   ref,
 ) {
@@ -259,11 +261,11 @@ export const RAGFlowSelect = forwardRef<
     <Select onValueChange={handleChange} value={value} key={key}>
       <FormControlWidget>
         <SelectTrigger
-          className="bg-colors-background-inverse-weak"
           value={value}
           onReset={handleReset}
           allowClear={allowClear}
           ref={ref}
+          className={triggerClassName}
         >
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>