Wrap workflow node library in scroll area
This commit is contained in:
@@ -24,6 +24,7 @@ import { AlertCircleIcon, CheckCircle2Icon } from "lucide-react"
|
|||||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
||||||
|
|
||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from "@/components/ui/badge"
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||||
import {
|
import {
|
||||||
Popover,
|
Popover,
|
||||||
PopoverContent,
|
PopoverContent,
|
||||||
@@ -331,36 +332,40 @@ export function WorkflowEditor({
|
|||||||
return (
|
return (
|
||||||
<ResizablePanelGroup orientation="horizontal" className="h-full min-h-0">
|
<ResizablePanelGroup orientation="horizontal" className="h-full min-h-0">
|
||||||
<ResizablePanel defaultSize="18%" minSize="12%" maxSize="34%" className="min-h-0">
|
<ResizablePanel defaultSize="18%" minSize="12%" maxSize="34%" className="min-h-0">
|
||||||
<aside className="h-full min-h-0 overflow-y-auto bg-muted/20 p-3">
|
<aside className="h-full min-h-0 bg-muted/20">
|
||||||
<div className="mb-3 text-sm font-medium">节点库</div>
|
<ScrollArea className="h-full min-h-0">
|
||||||
<div className="space-y-2">
|
<div className="p-3">
|
||||||
{nodeSpecs.map((spec) => (
|
<div className="mb-3 text-sm font-medium">节点库</div>
|
||||||
<button
|
<div className="space-y-2">
|
||||||
key={spec.type}
|
{nodeSpecs.map((spec) => (
|
||||||
type="button"
|
<button
|
||||||
onPointerDown={(event) => onNodePointerDown(event, spec)}
|
key={spec.type}
|
||||||
onClick={() => {
|
type="button"
|
||||||
if (suppressNextClickRef.current) {
|
onPointerDown={(event) => onNodePointerDown(event, spec)}
|
||||||
suppressNextClickRef.current = false
|
onClick={() => {
|
||||||
return
|
if (suppressNextClickRef.current) {
|
||||||
}
|
suppressNextClickRef.current = false
|
||||||
addNode(spec)
|
return
|
||||||
}}
|
}
|
||||||
className="flex w-full cursor-grab rounded-md border bg-background px-3 py-2 text-left text-sm hover:bg-muted active:cursor-grabbing"
|
addNode(spec)
|
||||||
>
|
}}
|
||||||
<span className="min-w-0">
|
className="flex w-full cursor-grab rounded-md border bg-background px-3 py-2 text-left text-sm hover:bg-muted active:cursor-grabbing"
|
||||||
<span className="block truncate font-medium">{spec.title}</span>
|
>
|
||||||
<span className="mt-1 line-clamp-2 text-xs text-muted-foreground">
|
<span className="min-w-0">
|
||||||
{spec.description}
|
<span className="block truncate font-medium">{spec.title}</span>
|
||||||
</span>
|
<span className="mt-1 line-clamp-2 text-xs text-muted-foreground">
|
||||||
<span className="mt-1 flex gap-2 text-[11px] text-muted-foreground">
|
{spec.description}
|
||||||
<span>输入 {spec.inputSchema?.length ?? 0}</span>
|
</span>
|
||||||
<span>输出 {spec.outputSchema?.length ?? 0}</span>
|
<span className="mt-1 flex gap-2 text-[11px] text-muted-foreground">
|
||||||
</span>
|
<span>输入 {spec.inputSchema?.length ?? 0}</span>
|
||||||
</span>
|
<span>输出 {spec.outputSchema?.length ?? 0}</span>
|
||||||
</button>
|
</span>
|
||||||
))}
|
</span>
|
||||||
</div>
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
</aside>
|
</aside>
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
<ResizableHandle withHandle />
|
<ResizableHandle withHandle />
|
||||||
|
|||||||
Reference in New Issue
Block a user