feat: update NodeConfigPanel and WorkflowConfigPanel for improved layout and scrolling functionality
This commit is contained in:
mlogclub
@@ -104,7 +104,7 @@ export function NodeConfigPanel({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="space-y-3 px-3 pb-3">
|
||||
{showHeader ? (
|
||||
<div className="border-b px-4 py-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
@@ -129,7 +129,7 @@ export function NodeConfigPanel({
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3">
|
||||
<div className="space-y-3">
|
||||
{inputSchema.length > 0 ? (
|
||||
<ConfigCard title="输入" meta={`${inputSchema.length} 项`}>
|
||||
<div className="space-y-3">
|
||||
@@ -217,7 +217,7 @@ export function ConditionBranchConfigPanel({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3">
|
||||
<div className="space-y-3 px-3 pb-3">
|
||||
<ConfigCard title="分支目标" meta={branch.default ? "默认" : "条件"}>
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1.5">
|
||||
|
||||
@@ -5,6 +5,7 @@ import { XIcon } from "lucide-react"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
|
||||
|
||||
import type { SelectedWorkflowBranch } from "./workflow-branch-selection"
|
||||
@@ -127,76 +128,78 @@ export function WorkflowConfigPanel({
|
||||
<span className="h-12 w-1 rounded-full bg-slate-300/80 transition-colors group-hover:bg-blue-400" />
|
||||
</div>
|
||||
<section className="pointer-events-auto flex min-h-0 w-full flex-col overflow-hidden rounded-lg bg-white shadow-[0_18px_45px_rgba(15,23,42,0.18)] backdrop-blur">
|
||||
<div className="shrink-0 p-3 pb-2">
|
||||
<div className="overflow-hidden rounded-md border border-slate-200 bg-white">
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2.5">
|
||||
<WorkflowNodeIcon
|
||||
icon={panelIcon}
|
||||
size="sm"
|
||||
className="rounded-md shadow-none"
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<Input
|
||||
value={panelTitle}
|
||||
placeholder={selectedBranchItem ? selectedBranchItem.id : selectedNodeSpec?.title || selectedNode.type}
|
||||
className="h-7 w-full rounded-md border-slate-200 bg-slate-50 px-2 text-sm font-semibold leading-5 text-slate-900 shadow-none transition-colors hover:border-slate-300 hover:bg-white focus-visible:border-blue-300 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-blue-100"
|
||||
onChange={(event) => updatePanelTitle(event.target.value)}
|
||||
/>
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div className="py-3">
|
||||
<div className="px-3 pb-2">
|
||||
<div className="overflow-hidden rounded-md border border-slate-200 bg-white">
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2.5">
|
||||
<WorkflowNodeIcon
|
||||
icon={panelIcon}
|
||||
size="sm"
|
||||
className="rounded-md shadow-none"
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<Input
|
||||
value={panelTitle}
|
||||
placeholder={selectedBranchItem ? selectedBranchItem.id : selectedNodeSpec?.title || selectedNode.type}
|
||||
className="h-7 w-full rounded-md border-slate-200 bg-slate-50 px-2 text-sm font-semibold leading-5 text-slate-900 shadow-none transition-colors hover:border-slate-300 hover:bg-white focus-visible:border-blue-300 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-blue-100"
|
||||
onChange={(event) => updatePanelTitle(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7 shrink-0 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700"
|
||||
aria-label="关闭属性面板"
|
||||
onClick={onClose}
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{panelDescription ? (
|
||||
<div className="mt-2 line-clamp-2 text-xs leading-5 text-slate-500">
|
||||
{panelDescription}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7 shrink-0 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700"
|
||||
aria-label="关闭属性面板"
|
||||
onClick={onClose}
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
</Button>
|
||||
{panelMeta ? (
|
||||
<div className="border-t border-slate-100 px-3 py-2">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<span className="inline-flex h-6 items-center rounded-full border border-slate-200 bg-slate-50 px-2 font-mono text-[11px] text-slate-600">
|
||||
{panelMeta}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{panelDescription ? (
|
||||
<div className="mt-2 line-clamp-2 text-xs leading-5 text-slate-500">
|
||||
{panelDescription}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{panelMeta ? (
|
||||
<div className="border-t border-slate-100 px-3 py-2">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<span className="inline-flex h-6 items-center rounded-full border border-slate-200 bg-slate-50 px-2 font-mono text-[11px] text-slate-600">
|
||||
{panelMeta}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{selectedBranchItem && selectedBranch ? (
|
||||
<ConditionBranchConfigPanel
|
||||
node={selectedNode}
|
||||
nodes={definition.nodes}
|
||||
branchId={selectedBranch.branchId}
|
||||
variables={availableVariables}
|
||||
onChange={onChangeNodeData}
|
||||
onDelete={deleteSelectedBranch}
|
||||
/>
|
||||
) : (
|
||||
<NodeConfigPanel
|
||||
node={selectedNode}
|
||||
nodeSpec={selectedNodeSpec}
|
||||
nodes={definition.nodes}
|
||||
availableVariables={availableVariables}
|
||||
showHeader={false}
|
||||
showConditionBranches={selectedNode.type !== "condition"}
|
||||
onChange={onChangeNodeData}
|
||||
onDelete={onDeleteNode}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1">
|
||||
{selectedBranchItem && selectedBranch ? (
|
||||
<ConditionBranchConfigPanel
|
||||
node={selectedNode}
|
||||
nodes={definition.nodes}
|
||||
branchId={selectedBranch.branchId}
|
||||
variables={availableVariables}
|
||||
onChange={onChangeNodeData}
|
||||
onDelete={deleteSelectedBranch}
|
||||
/>
|
||||
) : (
|
||||
<NodeConfigPanel
|
||||
node={selectedNode}
|
||||
nodeSpec={selectedNodeSpec}
|
||||
nodes={definition.nodes}
|
||||
availableVariables={availableVariables}
|
||||
showHeader={false}
|
||||
showConditionBranches={selectedNode.type !== "condition"}
|
||||
onChange={onChangeNodeData}
|
||||
onDelete={onDeleteNode}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user