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"