Feature: Added data source functionality #10703 (#11046)

### What problem does this PR solve?

Feature: Added data source functionality

### Type of change

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

web/src/components/back-button/index.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils';
+import { ArrowBigLeft } from 'lucide-react';
+import React from 'react';
+import { useNavigate } from 'umi';
+import { Button } from '../ui/button';
+
+interface BackButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  to?: string;
+}
+
+const BackButton: React.FC<BackButtonProps> = ({
+  to,
+  className,
+  children,
+  ...props
+}) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    if (to) {
+      navigate(to);
+    } else {
+      navigate(-1);
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      className={cn('gap-2 bg-bg-card border border-border-default', className)}
+      onClick={handleClick}
+      {...props}
+    >
+      <ArrowBigLeft className="h-4 w-4" />
+      {children || 'Back'}
+    </Button>
+  );
+};
+
+export default BackButton;

web/src/components/file-status-badge.tsx

@@ -8,9 +8,10 @@ interface StatusBadgeProps {
   // status: 'Success' | 'Failed' | 'Running' | 'Pending';
   status: RunningStatus;
   name?: string;
+  className?: string;
 }
 
-const FileStatusBadge: FC<StatusBadgeProps> = ({ status, name }) => {
+const FileStatusBadge: FC<StatusBadgeProps> = ({ status, name, className }) => {
   const getStatusColor = () => {
     // #3ba05c  → rgb(59, 160, 92)   // state-success
     // #d8494b  → rgb(216, 73, 75)   // state-error
@@ -51,7 +52,7 @@ const FileStatusBadge: FC<StatusBadgeProps> = ({ status, name }) => {
 
   return (
     <span
-      className={`inline-flex items-center w-[75px] px-2 py-1 rounded-full text-xs font-medium ${getStatusColor()}`}
+      className={`inline-flex items-center w-[75px] px-2 py-1 rounded-full text-xs font-medium ${getStatusColor()} ${className}`}
     >
       <div className={`w-1 h-1 mr-1 rounded-full ${getBgStatusColor()}`}></div>
       {name || ''}

web/src/components/ragflow-form.tsx

@@ -39,7 +39,7 @@ export function RAGFlowFormItem({
         <FormItem
           className={cn(
             {
-              'flex items-center': horizontal,
+              'flex items-center w-full': horizontal,
             },
             className,
           )}