Feat: Display AvatarUpload and RAGFlowAvatar in Storybook #9914 (#9920)

### What problem does this PR solve?

Feat: Display AvatarUpload and RAGFlowAvatar in Storybook #9914

### Type of change


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

web/src/stories/ragflow-form.stories.tsx

@@ -0,0 +1,231 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { Form } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+
+// Define form schema
+const FormSchema = z.object({
+  username: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+  email: z.string().email({
+    message: 'Please enter a valid email address.',
+  }),
+  description: z.string().optional(),
+});
+
+// Create a wrapper component to demonstrate RAGFlowFormItem
+function FormExample({
+  horizontal = false,
+  fieldName = 'username',
+  label = 'Username',
+  tooltip = 'Please enter your username',
+  placeholder = 'Enter username',
+}: {
+  horizontal?: boolean;
+  fieldName?: string;
+  label?: string;
+  tooltip?: string;
+  placeholder?: string;
+}) {
+  const form = useForm({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      username: '',
+      email: '',
+      description: '',
+    },
+  });
+
+  return (
+    <div className="w-full p-4 border rounded-lg">
+      <Form {...form}>
+        <form className="space-y-4">
+          <RAGFlowFormItem
+            name={fieldName}
+            label={label}
+            tooltip={tooltip}
+            horizontal={horizontal}
+          >
+            <Input placeholder={placeholder} />
+          </RAGFlowFormItem>
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/RAGFlowForm',
+  component: FormExample,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## RAGFlowFormItem Component
+
+RAGFlowFormItem is a wrapper component built on top of shadcn/ui Form components, providing unified form item styling and layout.
+
+### Import Path
+\`\`\`typescript
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { Form } from '@/components/ui/form';
+\`\`\`
+
+### Basic Usage
+\`\`\`tsx
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const FormSchema = z.object({
+  username: z.string(),
+});
+
+function MyForm() {
+  const form = useForm({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { username: '' },
+  });
+
+  return (
+    <Form {...form}>
+      <form>
+        <RAGFlowFormItem
+          name="username"
+          label="Username"
+          tooltip="Please enter your username"
+        >
+          <Input placeholder="Enter username" />
+        </RAGFlowFormItem>
+      </form>
+    </Form>
+  );
+}
+\`\`\`
+
+### Features
+- Built-in FormField, FormItem, FormLabel, FormControl and FormMessage
+- Supports both horizontal and vertical layouts
+- Supports tooltip hints
+- Fully compatible with react-hook-form
+        `,
+      },
+    },
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    horizontal: {
+      description: 'Whether to display the form item horizontally',
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+    },
+    fieldName: {
+      description: 'The name of the form field',
+      control: { type: 'text' },
+      type: { name: 'string', required: true },
+    },
+    label: {
+      description: 'The label of the form field',
+      control: { type: 'text' },
+      type: { name: 'string', required: false },
+    },
+    tooltip: {
+      description: 'The tooltip text for the form field',
+      control: { type: 'text' },
+      type: { name: 'string', required: false },
+    },
+    placeholder: {
+      description: 'The placeholder text for the input',
+      control: { type: 'text' },
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    horizontal: false,
+    fieldName: 'username',
+    label: 'Username',
+    tooltip: 'Please enter your username',
+    placeholder: 'Enter username',
+  },
+} satisfies Meta<typeof FormExample>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const VerticalLayout: Story = {
+  args: {
+    horizontal: false,
+    fieldName: 'username',
+    label: 'Username',
+    tooltip: 'Please enter your username',
+    placeholder: 'Enter username',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+### Vertical Layout Example
+
+Default vertical layout with label above the input field.
+
+\`\`\`tsx
+<RAGFlowFormItem
+  name="username"
+  label="Username"
+  tooltip="Please enter your username"
+  horizontal={false}
+>
+  <Input placeholder="Enter username" />
+</RAGFlowFormItem>
+\`\`\`
+        `,
+      },
+    },
+  },
+  // tags: ['!dev'],
+};
+
+export const HorizontalLayout: Story = {
+  args: {
+    horizontal: true,
+    fieldName: 'email',
+    label: 'Email Address',
+    tooltip: 'Please enter a valid email address',
+    placeholder: 'Enter email',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+### Horizontal Layout Example
+
+Horizontal layout with label and input field on the same row.
+
+\`\`\`tsx
+<RAGFlowFormItem
+  name="email"
+  label="Email Address"
+  tooltip="Please enter a valid email address"
+  horizontal={true}
+>
+  <Input type="email" placeholder="Enter email" />
+</RAGFlowFormItem>
+\`\`\`
+        `,
+      },
+    },
+  },
+  // tags: ['!dev'],
+};