mirror of
https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git
synced 2025-08-12 15:19:02 +08:00
### What problem does this PR solve? Feat: Add AdvancedSettingForm #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
GitHub
parent
bedc09f69c
commit
163c2a70fc
163
web/src/pages/dataset/setting/advanced-setting-form.tsx
Normal file
163
web/src/pages/dataset/setting/advanced-setting-form.tsx
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@/components/ui/form';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { FormSlider } from '@/components/ui/slider';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
username: z.number().min(2, {
|
||||||
|
message: 'Username must be at least 2 characters.',
|
||||||
|
}),
|
||||||
|
a: z.number().min(2, {
|
||||||
|
message: 'Username must be at least 2 characters.',
|
||||||
|
}),
|
||||||
|
b: z.string().min(2, {
|
||||||
|
message: 'Username must be at least 2 characters.',
|
||||||
|
}),
|
||||||
|
c: z.number().min(2, {
|
||||||
|
message: 'Username must be at least 2 characters.',
|
||||||
|
}),
|
||||||
|
d: z.string().min(2, {
|
||||||
|
message: 'Username must be at least 2 characters.',
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function AdvancedSettingForm() {
|
||||||
|
const form = useForm<z.infer<typeof formSchema>>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
username: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function onSubmit(values: z.infer<typeof formSchema>) {
|
||||||
|
console.log(values);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="username"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Username</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<FormSlider {...field}></FormSlider>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
This is your public display name.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="a"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Username</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<FormSlider {...field}></FormSlider>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
This is your public display name.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="b"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Username</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="bg-colors-background-inverse-weak">
|
||||||
|
<SelectValue placeholder="Select a verified email to display" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="m@example.com">m@example.com</SelectItem>
|
||||||
|
<SelectItem value="m@google.com">m@google.com</SelectItem>
|
||||||
|
<SelectItem value="m@support.com">m@support.com</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription>
|
||||||
|
This is your public display name.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="c"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Username</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<FormSlider {...field}></FormSlider>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
This is your public display name.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="d"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Username</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Textarea
|
||||||
|
{...field}
|
||||||
|
className="bg-colors-background-inverse-weak"
|
||||||
|
></Textarea>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
This is your public display name.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant={'tertiary'}
|
||||||
|
size={'sm'}
|
||||||
|
type="submit"
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
Test
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}
|
||||||
163
web/src/pages/dataset/setting/basic-setting-form.tsx
Normal file
163
web/src/pages/dataset/setting/basic-setting-form.tsx
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@/components/ui/form';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { FormSlider } from '@/components/ui/slider';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
username: z.number().min(2, {
|
||||||
|
message: 'Username must be at least 2 characters.',
|
||||||
|
}),
|
||||||
|
a: z.number().min(2, {
|
||||||
|
message: 'Username must be at least 2 characters.',
|
||||||
|
}),
|
||||||
|
b: z.string().min(2, {
|
||||||
|
message: 'Username must be at least 2 characters.',
|
||||||
|
}),
|
||||||
|
c: z.number().min(2, {
|
||||||
|
message: 'Username must be at least 2 characters.',
|
||||||
|
}),
|
||||||
|
d: z.string().min(2, {
|
||||||
|
message: 'Username must be at least 2 characters.',
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function BasicSettingForm() {
|
||||||
|
const form = useForm<z.infer<typeof formSchema>>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
username: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function onSubmit(values: z.infer<typeof formSchema>) {
|
||||||
|
console.log(values);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="username"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Username</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<FormSlider {...field}></FormSlider>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
This is your public display name.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="a"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Username</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<FormSlider {...field}></FormSlider>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
This is your public display name.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="b"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Username</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger className="bg-colors-background-inverse-weak">
|
||||||
|
<SelectValue placeholder="Select a verified email to display" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="m@example.com">m@example.com</SelectItem>
|
||||||
|
<SelectItem value="m@google.com">m@google.com</SelectItem>
|
||||||
|
<SelectItem value="m@support.com">m@support.com</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription>
|
||||||
|
This is your public display name.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="c"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Username</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<FormSlider {...field}></FormSlider>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
This is your public display name.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="d"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Username</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Textarea
|
||||||
|
{...field}
|
||||||
|
className="bg-colors-background-inverse-weak"
|
||||||
|
></Textarea>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
This is your public display name.
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant={'tertiary'}
|
||||||
|
size={'sm'}
|
||||||
|
type="submit"
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
Test
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
web/src/pages/dataset/setting/index.tsx
Normal file
23
web/src/pages/dataset/setting/index.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
import AdvancedSettingForm from './advanced-setting-form';
|
||||||
|
import BasicSettingForm from './basic-setting-form';
|
||||||
|
|
||||||
|
export default function DatasetSettings() {
|
||||||
|
return (
|
||||||
|
<section className="flex flex-col p-8 overflow-auto h-[80vh]">
|
||||||
|
<div className="text-3xl font-bold mb-6">Basic settings</div>
|
||||||
|
<Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak">
|
||||||
|
<div className="w-2/5">
|
||||||
|
<BasicSettingForm></BasicSettingForm>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="text-3xl font-bold mb-6">Advanced settings</div>
|
||||||
|
<Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak">
|
||||||
|
<div className="w-2/5">
|
||||||
|
<AdvancedSettingForm></AdvancedSettingForm>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,8 +0,0 @@
|
|||||||
export default function DatasetSettings() {
|
|
||||||
return (
|
|
||||||
<section>
|
|
||||||
<span className="text-3xl font-bold ">Basic settings</span>
|
|
||||||
<span className="text-3xl font-bold ">Advanced settings</span>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import { DatasetBaseKey, KnowledgeRouteKey } from '@/constants/knowledge';
|
import { Routes } from '@/routes';
|
||||||
import { useCallback } from 'react';
|
import { useCallback } from 'react';
|
||||||
import { useNavigate } from 'umi';
|
import { useNavigate } from 'umi';
|
||||||
|
|
||||||
@ -6,8 +6,8 @@ export const useHandleMenuClick = () => {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const handleMenuClick = useCallback(
|
const handleMenuClick = useCallback(
|
||||||
(key: KnowledgeRouteKey) => () => {
|
(key: Routes) => () => {
|
||||||
navigate(`/${DatasetBaseKey}/${key}`);
|
navigate(`${Routes.DatasetBase}${key}`);
|
||||||
},
|
},
|
||||||
[navigate],
|
[navigate],
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,18 +1,18 @@
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { KnowledgeRouteKey } from '@/constants/knowledge';
|
|
||||||
import { useSecondPathName } from '@/hooks/route-hook';
|
import { useSecondPathName } from '@/hooks/route-hook';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Routes } from '@/routes';
|
||||||
import { Banknote, LayoutGrid, Trash2, User } from 'lucide-react';
|
import { Banknote, LayoutGrid, Trash2, User } from 'lucide-react';
|
||||||
import { useHandleMenuClick } from './hooks';
|
import { useHandleMenuClick } from './hooks';
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{ icon: User, label: 'Dataset', key: KnowledgeRouteKey.Dataset },
|
{ icon: User, label: 'Dataset', key: Routes.DatasetBase },
|
||||||
{
|
{
|
||||||
icon: LayoutGrid,
|
icon: LayoutGrid,
|
||||||
label: 'Retrieval testing',
|
label: 'Retrieval testing',
|
||||||
key: KnowledgeRouteKey.Testing,
|
key: Routes.DatasetTesting,
|
||||||
},
|
},
|
||||||
{ icon: Banknote, label: 'Settings', key: KnowledgeRouteKey.Configuration },
|
{ icon: Banknote, label: 'Settings', key: Routes.DatasetSetting },
|
||||||
];
|
];
|
||||||
|
|
||||||
const dataset = {
|
const dataset = {
|
||||||
@ -29,7 +29,7 @@ export function SideBar() {
|
|||||||
const { handleMenuClick } = useHandleMenuClick();
|
const { handleMenuClick } = useHandleMenuClick();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className="w-[303px] relative">
|
<aside className="w-[303px] relative border-r ">
|
||||||
<div className="p-6 space-y-2 border-b">
|
<div className="p-6 space-y-2 border-b">
|
||||||
<div
|
<div
|
||||||
className="w-[70px] h-[70px] rounded-xl bg-cover"
|
className="w-[70px] h-[70px] rounded-xl bg-cover"
|
||||||
@ -44,7 +44,7 @@ export function SideBar() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
{items.map((item, itemIdx) => {
|
{items.map((item, itemIdx) => {
|
||||||
const active = pathName === item.key;
|
const active = '/' + pathName === item.key;
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
key={itemIdx}
|
key={itemIdx}
|
||||||
|
|||||||
@ -8,7 +8,7 @@ const list = new Array(15).fill({
|
|||||||
|
|
||||||
export default function RetrievalTesting() {
|
export default function RetrievalTesting() {
|
||||||
return (
|
return (
|
||||||
<section className="flex divide-x border-l h-full">
|
<section className="flex divide-x h-full">
|
||||||
<div className="p-4">
|
<div className="p-4">
|
||||||
<TestingForm></TestingForm>
|
<TestingForm></TestingForm>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -8,6 +8,8 @@ export enum Routes {
|
|||||||
Search = '/next-search',
|
Search = '/next-search',
|
||||||
Chat = '/next-chat',
|
Chat = '/next-chat',
|
||||||
ProfileSetting = '/profile-setting',
|
ProfileSetting = '/profile-setting',
|
||||||
|
DatasetTesting = '/testing',
|
||||||
|
DatasetSetting = '/setting',
|
||||||
}
|
}
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
@ -207,12 +209,12 @@ const routes = [
|
|||||||
component: `@/pages${Routes.Dataset}`,
|
component: `@/pages${Routes.Dataset}`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: `${Routes.DatasetBase}/configuration`,
|
path: `${Routes.DatasetBase}${Routes.DatasetSetting}`,
|
||||||
component: `@/pages${Routes.DatasetBase}/settings`,
|
component: `@/pages${Routes.DatasetBase}${Routes.DatasetSetting}`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: `${Routes.DatasetBase}/testing`,
|
path: `${Routes.DatasetBase}${Routes.DatasetTesting}`,
|
||||||
component: `@/pages${Routes.DatasetBase}/testing`,
|
component: `@/pages${Routes.DatasetBase}${Routes.DatasetTesting}`,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user