wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance WorkflowConfigPanel layout with improved button positioning and spacing

Browse Source
This commit is contained in:
mlogclub
2026-06-29 14:48:01 +08:00
parent 7d33916ea5
commit fc64b8becf
1 changed files with 24 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
+24 -26
View File
@@ -127,38 +127,36 @@ 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">
<section className="pointer-events-auto relative 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">
<Button
type="button"
variant="ghost"
size="icon"
className="absolute right-2 top-2 z-10 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>
<ScrollArea className="min-h-0 flex-1">
<div className="py-3">
<div className="pb-3 pt-11">
<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="flex min-w-0 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 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">