feat: integrate ScrollArea component for improved node menu scrolling

web/app/dashboard/ai-workflows/_components/workflow-port-node-menu.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useRef } from "react"
 
+import { ScrollArea } from "@/components/ui/scroll-area"
 import type { AIWorkflowNodeSpec } from "@/lib/api/admin"
 import { WorkflowNodeIcon } from "./workflow-node-icon"
 
@@ -70,31 +71,33 @@ export function WorkflowPortNodeMenu({
       <div className="border-b border-slate-100 px-3 pb-2 pt-1 text-xs font-medium text-slate-500">
         添加节点
       </div>
-      <div className="max-h-80 overflow-y-auto p-1.5">
+      <ScrollArea className="h-80 max-h-[min(20rem,calc(100vh-8rem))]">
-        {insertableNodeSpecs.map((spec) => (
+        <div className="p-1.5">
-          <button
+          {insertableNodeSpecs.map((spec) => (
-            key={spec.type}
+            <button
-            type="button"
+              key={spec.type}
-            className="flex w-full items-start gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-slate-50"
+              type="button"
-            onClick={(event) => {
+              className="flex w-full items-start gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-slate-50"
-              event.stopPropagation()
+              onClick={(event) => {
-              onSelect(spec)
+                event.stopPropagation()
-            }}
+                onSelect(spec)
-          >
+              }}
-            <WorkflowNodeIcon icon={spec.icon} size="sm" className="mt-0.5" />
+            >
-            <span className="min-w-0">
+              <WorkflowNodeIcon icon={spec.icon} size="sm" className="mt-0.5" />
-              <span className="block truncate font-medium text-slate-900">
+              <span className="min-w-0">
-                {spec.title || spec.type}
+                <span className="block truncate font-medium text-slate-900">
-              </span>
+                  {spec.title || spec.type}
-              {spec.description ? (
-                <span className="line-clamp-2 text-xs text-slate-500">
-                  {spec.description}
                 </span>
-              ) : null}
+                {spec.description ? (
-            </span>
+                  <span className="line-clamp-2 text-xs text-slate-500">
-          </button>
+                    {spec.description}
-        ))}
+                  </span>
-      </div>
+                ) : null}
+              </span>
+            </button>
+          ))}
+        </div>
+      </ScrollArea>
     </div>
   )
 }