Feat: Adjust the style of the canvas node #10703 (#10795)

### What problem does this PR solve?

Feat: Adjust the style of the canvas node #10703


### Type of change


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

web/src/components/ui/button.tsx

@@ -24,6 +24,7 @@ const buttonVariants = cva(
         icon: 'bg-colors-background-inverse-standard text-foreground hover:bg-colors-background-inverse-standard/80',
         dashed: 'border border-dashed border-input hover:bg-accent',
         transparent: 'bg-transparent hover:bg-accent border',
+        danger: 'bg-transparent border border-state-error text-state-error',
       },
       size: {
         default: 'h-8 px-2.5 py-1.5 ',

web/src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border-border-default border shadow-sm bg-bg-input',
+      'rounded-lg border-border-default border shadow-sm bg-bg-input hover:shadow-md',
       className,
     )}
     {...props}

web/src/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'peer h-3.5 w-3.5 shrink-0 rounded-sm border border-text-secondary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className,
     )}
     {...props}
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn('flex items-center justify-center text-current')}
     >
-      <Check className="h-4 w-4" />
+      <Check className="h-3.5 w-3.5" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

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

@@ -135,7 +135,9 @@ export function RAGFlowPagination({
 
   return (
     <section className="flex items-center justify-end text-text-sub-title-invert">
-      <span className="mr-4">{t('pagination.total', { total: total })}</span>
+      <span className="mr-4 text-text-primary">
+        {t('pagination.total', { total: total })}
+      </span>
       <Pagination className="w-auto mx-0 mr-4">
         <PaginationContent>
           <PaginationItem>
@@ -150,7 +152,7 @@ export function RAGFlowPagination({
             ) : (
               <PaginationItem
                 key={page}
-                className={cn({
+                className={cn('text-text-disabled', {
                   ['bg-bg-card rounded-md text-text-primary']:
                     currentPage === page,
                 })}

web/src/components/ui/tooltip.tsx

@@ -46,6 +46,18 @@ export const FormTooltip = ({ tooltip }: { tooltip: React.ReactNode }) => {
   );
 };
 
+export function RAGFlowTooltip({
+  children,
+  tooltip,
+}: React.PropsWithChildren & { tooltip: React.ReactNode }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger>{children}</TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}
+
 export interface AntToolTipProps {
   title: React.ReactNode;
   children: React.ReactNode;