Feat: Adjust the style of the note node #3221 (#9167)

### What problem does this PR solve?

Feat: Adjust the style of the note node #3221

### Type of change


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

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-md w-[200px] text-xs',
+        'bg-text-title-invert p-2.5 rounded-sm w-[200px] text-xs',
         { 'border border-background-checked': selected },
         className,
       )}

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

@@ -47,13 +47,13 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
 
   return (
     <NodeWrapper
-      className="p-0  w-full h-full flex flex-col rounded-md "
+      className="p-0  w-full h-full flex flex-col"
       selected={selected}
     >
       <NodeResizeControl minWidth={190} minHeight={128} style={controlStyle}>
         <ResizeIcon />
       </NodeResizeControl>
-      <section className="px-1 py-2 flex gap-2 bg-background-highlight items-center note-drag-handle rounded-s-md">
+      <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">
@@ -67,6 +67,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"
                     />
                   </FormControl>
                   <FormMessage />
@@ -86,7 +87,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 focus-visible:ring-0 border-none"
+                    className="resize-none rounded-none p-1 h-full overflow-auto bg-transparent focus-visible:ring-0 border-none"
                     {...field}
                   />
                 </FormControl>

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

@@ -2,11 +2,11 @@ export function ResizeIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
+      width="14"
+      height="14"
       viewBox="0 0 24 24"
       strokeWidth="2"
-      stroke="#5025f9"
+      stroke="rgba(76, 164, 231, 1)"
       fill="none"
       strokeLinecap="round"
       strokeLinejoin="round"