pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 20:42:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Adjust the style of note nodes #9869 (#10547)

Browse Source 
### What problem does this PR solve?

Feat: Adjust the style of note nodes #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-10-14 17:15:26 +08:00
committed by GitHub
parent 578ea34b3e
commit 1f5167f1ca
6 changed files with 31 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
web/src/pages/data-flow/canvas/node/note-node/index.tsx
View File

@ -1,103 +1,16 @@
import { NodeProps, NodeResizeControl } from '@xyflow/react';
import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { INoteNode } from '@/interfaces/database/flow';
import { zodResolver } from '@hookform/resolvers/zod';
import { NotebookPen } from 'lucide-react';
import BaseNoteNode from '@/pages/agent/canvas/node/note-node';
import { NodeProps } from '@xyflow/react';
import { memo } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { z } from 'zod';
import { NodeWrapper } from '../node-wrapper';
import { ResizeIcon, controlStyle } from '../resize-icon';
import { useWatchFormChange, useWatchNameFormChange } from './use-watch-change';
const FormSchema = z.object({
text: z.string(),
});
const NameFormSchema = z.object({
name: z.string(),
});
function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
const { t } = useTranslation();
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: data.form,
});
const nameForm = useForm<z.infer<typeof NameFormSchema>>({
resolver: zodResolver(NameFormSchema),
defaultValues: { name: data.name },
});
useWatchFormChange(id, form);
useWatchNameFormChange(id, nameForm);
function NoteNode({ ...props }: NodeProps<INoteNode>) {
return (
<NodeWrapper
className="p-0 w-full h-full flex flex-col"
selected={selected}
>
<NodeResizeControl minWidth={190} minHeight={128} style={controlStyle}>
<ResizeIcon />
</NodeResizeControl>
<section className="p-2 flex gap-2 bg-background-note items-center note-drag-handle rounded-t">
<NotebookPen className="size-4" />
<Form {...nameForm}>
<form className="flex-1">
<FormField
control={nameForm.control}
name="name"
render={({ field }) => (
<FormItem className="h-full">
<FormControl>
<Input
placeholder={t('flow.notePlaceholder')}
{...field}
type="text"
className="bg-transparent border-none focus-visible:outline focus-visible:outline-text-sub-title"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
</section>
<Form {...form}>
<form className="flex-1 p-1">
<FormField
control={form.control}
name="text"
render={({ field }) => (
<FormItem className="h-full">
<FormControl>
<Textarea
placeholder={t('flow.notePlaceholder')}
className="resize-none rounded-none p-1 h-full overflow-auto bg-transparent focus-visible:ring-0 border-none"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
</NodeWrapper>
<BaseNoteNode
{...props}
useWatchNoteFormChange={useWatchFormChange}
useWatchNoteNameFormChange={useWatchNameFormChange}
></BaseNoteNode>
);
}

2
web/src/pages/data-flow/canvas/node/note-node/use-watch-change.ts
View File

@ -1,4 +1,4 @@
import useGraphStore from '@/pages/agent/store';
import useGraphStore from '@/pages/data-flow/store';
import { useEffect } from 'react';
import { UseFormReturn, useWatch } from 'react-hook-form';