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

### 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)

web/src/pages/agent/canvas/node/node-header.tsx

@@ -18,7 +18,7 @@ const InnerNodeHeader = ({
   wrapperClassName,
 }: IProps) => {
   return (
-    <section className={cn(wrapperClassName, 'pb-4')}>
+    <section className={cn(wrapperClassName, 'pb-2')}>
       <div className={cn(className, 'flex gap-2.5')}>
         <OperatorIcon name={label as Operator}></OperatorIcon>
         <span className="truncate text-center font-semibold text-sm">

web/src/pages/agent/canvas/node/node-wrapper.tsx

@@ -7,7 +7,7 @@ export function NodeWrapper({ children, className, selected }: IProps) {
   return (
     <section
       className={cn(
-        'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs group',
+        'bg-text-title-invert p-2.5 rounded-md w-[200px] text-xs group',
         { 'border border-accent-primary': selected },
         className,
       )}

web/src/pages/agent/canvas/node/note-node/index.tsx

@@ -28,7 +28,18 @@ const NameFormSchema = z.object({
   name: z.string(),
 });
 
-function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
+type NoteNodeProps = NodeProps<INoteNode> & {
+  useWatchNoteFormChange?: typeof useWatchFormChange;
+  useWatchNoteNameFormChange?: typeof useWatchNameFormChange;
+};
+
+function NoteNode({
+  data,
+  id,
+  selected,
+  useWatchNoteFormChange,
+  useWatchNoteNameFormChange,
+}: NoteNodeProps) {
   const { t } = useTranslation();
 
   const form = useForm<z.infer<typeof FormSchema>>({
@@ -41,19 +52,19 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
     defaultValues: { name: data.name },
   });
 
-  useWatchFormChange(id, form);
+  (useWatchNoteFormChange || useWatchFormChange)(id, form);
 
-  useWatchNameFormChange(id, nameForm);
+  (useWatchNoteNameFormChange || useWatchNameFormChange)(id, nameForm);
 
   return (
     <NodeWrapper
-      className="p-0  w-full h-full flex flex-col bg-bg-component"
+      className="p-0  w-full h-full flex flex-col bg-bg-component border border-state-warning rounded-lg shadow-md pb-1"
       selected={selected}
     >
       <NodeResizeControl minWidth={190} minHeight={128} style={controlStyle}>
         <ResizeIcon />
       </NodeResizeControl>
-      <section className="p-2 flex gap-2 items-center note-drag-handle rounded-t">
+      <section className="px-2 py-1 flex gap-2 items-center note-drag-handle rounded-t border-t-2 border-state-warning">
         <NotebookPen className="size-4" />
         <Form {...nameForm}>
           <form className="flex-1">
@@ -67,7 +78,7 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
                       placeholder={t('flow.notePlaceholder')}
                       {...field}
                       type="text"
-                      className="bg-transparent border-none focus-visible:outline focus-visible:outline-text-sub-title"
+                      className="bg-transparent border-none focus-visible:outline focus-visible:outline-text-sub-title p-1"
                     />
                   </FormControl>
                   <FormMessage />
@@ -78,7 +89,7 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
         </Form>
       </section>
       <Form {...form}>
-        <form className="flex-1 p-1">
+        <form className="flex-1 px-1 min-h-1">
           <FormField
             control={form.control}
             name="text"
@@ -87,7 +98,7 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
                 <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"
+                    className="resize-none rounded-none p-1 py-0 overflow-auto bg-transparent focus-visible:ring-0 border-none text-text-secondary focus-visible:ring-offset-0 !text-xs"
                     {...field}
                   />
                 </FormControl>

web/src/pages/agent/canvas/node/resize-icon.tsx

@@ -6,7 +6,7 @@ export function ResizeIcon() {
       height="14"
       viewBox="0 0 24 24"
       strokeWidth="2"
-      stroke="rgba(76, 164, 231, 1)"
+      stroke="var(--text-disabled)"
       fill="none"
       strokeLinecap="round"
       strokeLinejoin="round"

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

@@ -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>
   );
 }
 

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

@@ -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';