Fix：Add a component of calendar (#8923)

### What problem does this PR solve?

fix：Add a component of calendar
[#3221](https://github.com/infiniflow/ragflow/issues/3221)

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/package.json

@@ -85,6 +85,7 @@
     "rc-tween-one": "^3.0.6",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
+    "react-day-picker": "^9.8.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.3.5",
     "react-error-boundary": "^4.0.13",

web/src/components/originui/calendar/index.less

@@ -0,0 +1,19 @@
+.rdp-selected {
+  background-color: #f5f5f529;
+}
+.range-start {
+  background-color: #f5f5f5;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  button {
+    color: rgba(0, 0, 0, 0.8);
+  }
+}
+.range-end {
+  background-color: #f5f5f5;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  button {
+    color: rgba(0, 0, 0, 0.8);
+  }
+}

web/src/components/originui/calendar/index.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+import { buttonVariants } from '../../ui/button';
+import './index.less';
+type DateRange = {
+  from: Date;
+  to?: Date;
+};
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  components: userComponents,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  const defaultClassNames = {
+    months: 'relative flex flex-col sm:flex-row gap-4',
+    month: 'w-full',
+    month_caption:
+      'relative mx-10 mb-1 flex h-9 items-center justify-center z-20',
+    caption_label: 'text-sm font-medium',
+    nav: 'absolute top-0 flex w-full justify-between z-10',
+    button_previous: cn(
+      buttonVariants({ variant: 'ghost' }),
+      'size-9 text-muted-foreground/80 hover:text-foreground p-0',
+    ),
+    button_next: cn(
+      buttonVariants({ variant: 'ghost' }),
+      'size-9 text-muted-foreground/80 hover:text-foreground p-0',
+    ),
+    weekday: 'size-9 p-0 text-xs font-medium text-muted-foreground/80',
+    day_button:
+      'relative flex size-9 items-center justify-center whitespace-nowrap rounded-md p-0 text-foreground group-[[data-selected]:not(.range-middle)]:[transition-property:color,background-color,border-radius,box-shadow] group-[[data-selected]:not(.range-middle)]:duration-150 group-data-disabled:pointer-events-none focus-visible:z-10 hover:not-in-data-selected:bg-accent group-data-selected:bg-primary hover:not-in-data-selected:text-foreground group-data-selected:text-primary-foreground group-data-disabled:text-foreground/30 group-data-disabled:line-through group-data-outside:text-foreground/30 group-data-selected:group-data-outside:text-primary-foreground outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] group-[.range-start:not(.range-end)]:rounded-e-none group-[.range-end:not(.range-start)]:rounded-s-none group-[.range-middle]:rounded-none group-[.range-middle]:group-data-selected:bg-accent group-[.range-middle]:group-data-selected:text-foreground',
+    day: 'group size-9 px-0 py-px text-sm',
+    range_start: 'range-start',
+    range_end: 'range-end',
+    range_middle: 'range-middle',
+    today:
+      '*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-10 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors',
+    outside:
+      'text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground',
+    hidden: 'invisible',
+    week_number: 'size-9 p-0 text-xs font-medium text-muted-foreground/80',
+  };
+
+  const mergedClassNames: typeof defaultClassNames = Object.keys(
+    defaultClassNames,
+  ).reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: classNames?.[key as keyof typeof classNames]
+        ? cn(
+            defaultClassNames[key as keyof typeof defaultClassNames],
+            classNames[key as keyof typeof classNames],
+          )
+        : defaultClassNames[key as keyof typeof defaultClassNames],
+    }),
+    {} as typeof defaultClassNames,
+  );
+
+  const defaultComponents = {
+    Chevron: (props: {
+      className?: string;
+      size?: number;
+      disabled?: boolean;
+      orientation?: 'left' | 'right' | 'up' | 'down';
+    }) => {
+      if (props.orientation === 'left') {
+        return <ChevronLeftIcon size={16} {...props} aria-hidden="true" />;
+      }
+      return <ChevronRightIcon size={16} {...props} aria-hidden="true" />;
+    },
+  };
+
+  const mergedComponents = {
+    ...defaultComponents,
+    ...userComponents,
+  };
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('w-fit', className)}
+      classNames={mergedClassNames}
+      components={mergedComponents}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, DateRange };

web/src/components/ui/modal.tsx

@@ -10,6 +10,7 @@ interface ModalProps {
   title?: ReactNode;
   children: ReactNode;
   footer?: ReactNode;
+  showfooter?: boolean;
   className?: string;
   size?: 'small' | 'default' | 'large';
   closable?: boolean;
@@ -30,6 +31,7 @@ export const Modal: FC<ModalProps> = ({
   title,
   children,
   footer,
+  showfooter = true,
   className = '',
   size = 'default',
   closable = true,
@@ -80,6 +82,9 @@ export const Modal: FC<ModalProps> = ({
     }
   };
   const footEl = useMemo(() => {
+    if (showfooter === false) {
+      return <></>;
+    }
     let footerTemp;
     if (footer) {
       footerTemp = footer;
@@ -112,7 +117,16 @@ export const Modal: FC<ModalProps> = ({
         {footerTemp}
       </div>
     );
-  }, [footer, cancelText, t, confirmLoading, okText, handleCancel, handleOk]);
+  }, [
+    footer,
+    cancelText,
+    t,
+    confirmLoading,
+    okText,
+    handleCancel,
+    handleOk,
+    showfooter,
+  ]);
   return (
     <DialogPrimitive.Root open={open} onOpenChange={handleChange}>
       <DialogPrimitive.Portal>
@@ -121,7 +135,7 @@ export const Modal: FC<ModalProps> = ({
           onClick={() => maskClosable && onOpenChange?.(false)}
         >
           <DialogPrimitive.Content
-            className={`relative w-[700px] ${full ? 'max-w-full' : sizeClasses[size]} ${className} bg-colors-background-neutral-standard rounded-lg shadow-lg transition-all`}
+            className={`relative w-[700px] ${full ? 'max-w-full' : sizeClasses[size]} ${className} bg-colors-background-neutral-standard rounded-lg shadow-lg transition-all focus-visible:!outline-none`}
             onClick={(e) => e.stopPropagation()}
           >
             {/* title */}
@@ -142,9 +156,13 @@ export const Modal: FC<ModalProps> = ({
                 )}
               </div>
             )}
+            {/* title */}
+            {!title && (
+              <DialogPrimitive.Title className="text-lg font-medium text-foreground"></DialogPrimitive.Title>
+            )}
 
             {/* content */}
-            <div className="p-6 overflow-y-auto max-h-[80vh]">
+            <div className="p-6 overflow-y-auto max-h-[80vh] focus-visible:!outline-none">
               {destroyOnClose && !open ? null : children}
             </div>