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 (
|
return (
|
||||||
<div className="flex h-full flex-col">
|
<div className="space-y-3 px-3 pb-3">
|
||||||
{showHeader ? (
|
{showHeader ? (
|
||||||
<div className="border-b px-4 py-3">
|
<div className="border-b px-4 py-3">
|
||||||
<div className="flex items-start justify-between gap-2">
|
<div className="flex items-start justify-between gap-2">
|
||||||
@@ -129,7 +129,7 @@ export function NodeConfigPanel({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : 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 ? (
|
{inputSchema.length > 0 ? (
|
||||||
<ConfigCard title="输入" meta={`${inputSchema.length} 项`}>
|
<ConfigCard title="输入" meta={`${inputSchema.length} 项`}>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
@@ -217,7 +217,7 @@ export function ConditionBranchConfigPanel({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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 ? "默认" : "条件"}>
|
<ConfigCard title="分支目标" meta={branch.default ? "默认" : "条件"}>
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="space-y-1.5">
|
<div className="space-y-1.5">
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { XIcon } from "lucide-react"
|
|||||||
|
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
import { Input } from "@/components/ui/input"
|
import { Input } from "@/components/ui/input"
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||||
import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
|
import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
|
||||||
|
|
||||||
import type { SelectedWorkflowBranch } from "./workflow-branch-selection"
|
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" />
|
<span className="h-12 w-1 rounded-full bg-slate-300/80 transition-colors group-hover:bg-blue-400" />
|
||||||
</div>
|
</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">
|
<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">
|
<ScrollArea className="min-h-0 flex-1">
|
||||||
<div className="overflow-hidden rounded-md border border-slate-200 bg-white">
|
<div className="py-3">
|
||||||
<div className="px-3 py-3">
|
<div className="px-3 pb-2">
|
||||||
<div className="flex items-center justify-between gap-3">
|
<div className="overflow-hidden rounded-md border border-slate-200 bg-white">
|
||||||
<div className="flex min-w-0 flex-1 items-center gap-2.5">
|
<div className="px-3 py-3">
|
||||||
<WorkflowNodeIcon
|
<div className="flex items-center justify-between gap-3">
|
||||||
icon={panelIcon}
|
<div className="flex min-w-0 flex-1 items-center gap-2.5">
|
||||||
size="sm"
|
<WorkflowNodeIcon
|
||||||
className="rounded-md shadow-none"
|
icon={panelIcon}
|
||||||
/>
|
size="sm"
|
||||||
<div className="min-w-0 flex-1">
|
className="rounded-md shadow-none"
|
||||||
<Input
|
/>
|
||||||
value={panelTitle}
|
<div className="min-w-0 flex-1">
|
||||||
placeholder={selectedBranchItem ? selectedBranchItem.id : selectedNodeSpec?.title || selectedNode.type}
|
<Input
|
||||||
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"
|
value={panelTitle}
|
||||||
onChange={(event) => updatePanelTitle(event.target.value)}
|
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>
|
</div>
|
||||||
|
{panelDescription ? (
|
||||||
|
<div className="mt-2 line-clamp-2 text-xs leading-5 text-slate-500">
|
||||||
|
{panelDescription}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<Button
|
{panelMeta ? (
|
||||||
type="button"
|
<div className="border-t border-slate-100 px-3 py-2">
|
||||||
variant="ghost"
|
<div className="flex flex-wrap gap-1.5">
|
||||||
size="icon"
|
<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">
|
||||||
className="size-7 shrink-0 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700"
|
{panelMeta}
|
||||||
aria-label="关闭属性面板"
|
</span>
|
||||||
onClick={onClose}
|
</div>
|
||||||
>
|
</div>
|
||||||
<XIcon className="size-4" />
|
) : null}
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
{panelDescription ? (
|
|
||||||
<div className="mt-2 line-clamp-2 text-xs leading-5 text-slate-500">
|
|
||||||
{panelDescription}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
{panelMeta ? (
|
{selectedBranchItem && selectedBranch ? (
|
||||||
<div className="border-t border-slate-100 px-3 py-2">
|
<ConditionBranchConfigPanel
|
||||||
<div className="flex flex-wrap gap-1.5">
|
node={selectedNode}
|
||||||
<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">
|
nodes={definition.nodes}
|
||||||
{panelMeta}
|
branchId={selectedBranch.branchId}
|
||||||
</span>
|
variables={availableVariables}
|
||||||
</div>
|
onChange={onChangeNodeData}
|
||||||
</div>
|
onDelete={deleteSelectedBranch}
|
||||||
) : null}
|
/>
|
||||||
|
) : (
|
||||||
|
<NodeConfigPanel
|
||||||
|
node={selectedNode}
|
||||||
|
nodeSpec={selectedNodeSpec}
|
||||||
|
nodes={definition.nodes}
|
||||||
|
availableVariables={availableVariables}
|
||||||
|
showHeader={false}
|
||||||
|
showConditionBranches={selectedNode.type !== "condition"}
|
||||||
|
onChange={onChangeNodeData}
|
||||||
|
onDelete={onDeleteNode}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ScrollArea>
|
||||||
<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>
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user