Feat: Modify the background color of the agent canvas #3221 (#9020)

### What problem does this PR solve?

Feat: Modify the background color of the agent canvas #3221
### Type of change


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

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

@@ -18,12 +18,16 @@ import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { NodeWrapper } from '../node-wrapper';
 import { ResizeIcon, controlStyle } from '../resize-icon';
-import { useChangeName, useWatchFormChange } from './use-watch-change';
+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();
 
@@ -32,10 +36,15 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
     defaultValues: data.form,
   });
 
-  const { handleChangeName } = useChangeName(id);
+  const nameForm = useForm<z.infer<typeof NameFormSchema>>({
+    resolver: zodResolver(NameFormSchema),
+    defaultValues: { name: data.name },
+  });
 
   useWatchFormChange(id, form);
 
+  useWatchNameFormChange(id, nameForm);
+
   return (
     <NodeWrapper
       className="p-0  w-full h-full flex flex-col rounded-md "
@@ -46,14 +55,29 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
       </NodeResizeControl>
       <section className="px-1 py-2 flex gap-2 bg-background-highlight items-center note-drag-handle rounded-s-md">
         <NotebookPen className="size-4" />
-        <Input
-          type="text"
-          defaultValue={data.name}
-          onChange={handleChangeName}
-        ></Input>
+        <Form {...nameForm}>
+          <form>
+            <FormField
+              control={nameForm.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="h-full">
+                  <FormControl>
+                    <Input
+                      placeholder={t('flow.notePlaceholder')}
+                      {...field}
+                      type="text"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
       </section>
       <Form {...form}>
-        <form className="flex-1">
+        <form className="flex-1 p-1">
           <FormField
             control={form.control}
             name="text"
@@ -62,7 +86,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-background-header-bar"
+                    className="resize-none rounded-none p-1 h-full overflow-auto bg-background-header-bar focus-visible:ring-0 border-none"
                     {...field}
                   />
                 </FormControl>