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/collapse.tsx

@@ -5,7 +5,12 @@ import {
 } from '@/components/ui/collapsible';
 import { cn } from '@/lib/utils';
 import { CollapsibleProps } from '@radix-ui/react-collapsible';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import {
+  ChevronDown,
+  ChevronUp,
+  ListChevronsDownUp,
+  ListChevronsUpDown,
+} from 'lucide-react';
 import * as React from 'react';
 import {
   PropsWithChildren,
@@ -14,7 +19,6 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { IconFontFill } from './icon-font';
 
 type CollapseProps = Omit<CollapsibleProps, 'title'> & {
   title?: ReactNode;
@@ -54,12 +58,11 @@ export function Collapse({
       <CollapsibleTrigger className={'w-full'}>
         <section className="flex justify-between items-center">
           <div className="flex items-center gap-1">
-            <IconFontFill
-              name={`more`}
-              className={cn('size-4', {
-                'rotate-90': !currentOpen,
-              })}
-            ></IconFontFill>
+            {currentOpen ? (
+              <ListChevronsUpDown className="size-4" />
+            ) : (
+              <ListChevronsDownUp className="size-4 text-text-secondary" />
+            )}
             <div
               className={cn('text-text-secondary', {
                 'text-text-primary': open,

web/src/components/llm-select/llm-label.tsx

@@ -13,7 +13,7 @@ const LLMLabel = ({ value }: IProps) => {
   const { llmName, fId } = getLlmNameAndFIdByLlmId(value);
 
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-1 text-xs text-text-secondary">
       <LlmIcon
         name={getLLMIconName(fId, llmName)}
         width={20}

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;

web/src/components/xyflow/base-node.tsx

@@ -12,7 +12,6 @@ export const BaseNode = forwardRef<
       'relative rounded bg-card text-card-foreground',
       className,
       selected ? 'border-muted-foreground shadow-lg' : '',
-      'hover:ring-1',
     )}
     tabIndex={0}
     {...props}