mirror of
https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git
synced 2025-08-12 02:29:03 +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 { useNavigate } from 'umi';
|
||||
|
||||
@ -6,8 +6,8 @@ export const useHandleMenuClick = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleMenuClick = useCallback(
|
||||
(key: KnowledgeRouteKey) => () => {
|
||||
navigate(`/${DatasetBaseKey}/${key}`);
|
||||
(key: Routes) => () => {
|
||||
navigate(`${Routes.DatasetBase}${key}`);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { KnowledgeRouteKey } from '@/constants/knowledge';
|
||||
import { useSecondPathName } from '@/hooks/route-hook';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Routes } from '@/routes';
|
||||
import { Banknote, LayoutGrid, Trash2, User } from 'lucide-react';
|
||||
import { useHandleMenuClick } from './hooks';
|
||||
|
||||
const items = [
|
||||
{ icon: User, label: 'Dataset', key: KnowledgeRouteKey.Dataset },
|
||||
{ icon: User, label: 'Dataset', key: Routes.DatasetBase },
|
||||
{
|
||||
icon: LayoutGrid,
|
||||
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 = {
|
||||
@ -29,7 +29,7 @@ export function SideBar() {
|
||||
const { handleMenuClick } = useHandleMenuClick();
|
||||
|
||||
return (
|
||||
<aside className="w-[303px] relative">
|
||||
<aside className="w-[303px] relative border-r ">
|
||||
<div className="p-6 space-y-2 border-b">
|
||||
<div
|
||||
className="w-[70px] h-[70px] rounded-xl bg-cover"
|
||||
@ -44,7 +44,7 @@ export function SideBar() {
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
{items.map((item, itemIdx) => {
|
||||
const active = pathName === item.key;
|
||||
const active = '/' + pathName === item.key;
|
||||
return (
|
||||
<Button
|
||||
key={itemIdx}
|
||||
|
||||
@ -8,7 +8,7 @@ const list = new Array(15).fill({
|
||||
|
||||
export default function RetrievalTesting() {
|
||||
return (
|
||||
<section className="flex divide-x border-l h-full">
|
||||
<section className="flex divide-x h-full">
|
||||
<div className="p-4">
|
||||
<TestingForm></TestingForm>
|
||||
</div>
|
||||
|
||||
@ -8,6 +8,8 @@ export enum Routes {
|
||||
Search = '/next-search',
|
||||
Chat = '/next-chat',
|
||||
ProfileSetting = '/profile-setting',
|
||||
DatasetTesting = '/testing',
|
||||
DatasetSetting = '/setting',
|
||||
}
|
||||
|
||||
const routes = [
|
||||
@ -207,12 +209,12 @@ const routes = [
|
||||
component: `@/pages${Routes.Dataset}`,
|
||||
},
|
||||
{
|
||||
path: `${Routes.DatasetBase}/configuration`,
|
||||
component: `@/pages${Routes.DatasetBase}/settings`,
|
||||
path: `${Routes.DatasetBase}${Routes.DatasetSetting}`,
|
||||
component: `@/pages${Routes.DatasetBase}${Routes.DatasetSetting}`,
|
||||
},
|
||||
{
|
||||
path: `${Routes.DatasetBase}/testing`,
|
||||
component: `@/pages${Routes.DatasetBase}/testing`,
|
||||
path: `${Routes.DatasetBase}${Routes.DatasetTesting}`,
|
||||
component: `@/pages${Routes.DatasetBase}${Routes.DatasetTesting}`,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user