lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align workflow timeline labels inline
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-03-28 17:15:47 +08:00
parent 2b2b2bd228
commit d393b5f138
1 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
components/agents/AgentWorkflowPanelDarkV2.tsx
View File

@ -728,7 +728,7 @@ export function AgentWorkflowPanelDarkV2({
return ( return (
<Fragment key={step.key}> <Fragment key={step.key}>
<div className="group relative flex min-w-0 flex-col items-start pr-2 text-left"> <div className="group relative flex min-w-0 items-center pr-2 text-left">
<button <button
type="button" type="button"
onClick={() => { onClick={() => {
@ -737,52 +737,53 @@ export function AgentWorkflowPanelDarkV2({
setActiveEmbeddedStepKey(step.key); setActiveEmbeddedStepKey(step.key);
setActiveEmbeddedOptionDepth(1); setActiveEmbeddedOptionDepth(1);
}} }}
className="flex w-full flex-col items-start text-left transition-transform duration-200 hover:-translate-y-[1px]" className="flex min-w-0 shrink-0 items-center gap-3 text-left transition-transform duration-200 hover:-translate-y-[1px]"
> >
<div className="flex w-full items-center gap-3"> <span
<span className={cn(
className={cn( "flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-[11px] font-semibold transition-colors",
"flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-[11px] font-semibold transition-colors", active
active ? "border-emerald-300 bg-emerald-300 text-black shadow-[0_0_18px_rgba(52,211,153,0.28)]"
? "border-emerald-300 bg-emerald-300 text-black shadow-[0_0_18px_rgba(52,211,153,0.28)]" : completed
: completed ? "border-white/30 bg-white text-black"
? "border-white/30 bg-white text-black" : "border-white/12 bg-white/[0.04] text-white/62 group-hover:border-white/24 group-hover:text-white/82"
: "border-white/12 bg-white/[0.04] text-white/62 group-hover:border-white/24 group-hover:text-white/82" )}
)} >
> {stepIndex + 1}
{stepIndex + 1} </span>
<span
className={cn(
"truncate text-[13px] font-semibold transition-colors",
active
? "text-white"
: completed
? "text-white/82"
: "text-white/52 group-hover:text-white/76"
)}
>
{step.title}
</span>
{active ? (
<span className="shrink-0 rounded-full border border-emerald-300/30 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-medium text-emerald-200">
当前步骤
</span> </span>
<span ) : null}
className={cn( </button>
"truncate text-[13px] font-semibold transition-colors", <div className="ml-3 flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
active
? "text-white"
: completed
? "text-white/82"
: "text-white/52 group-hover:text-white/76"
)}
>
{step.title}
</span>
{active ? (
<span className="rounded-full border border-emerald-300/30 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-medium text-emerald-200">
当前步骤
</span>
) : null}
</div>
{activeStepChildLabel ? ( {activeStepChildLabel ? (
<span <span
className={cn( className={cn(
"mt-1.5 pl-10 text-[10px] leading-4", "shrink-0 rounded-full border px-2 py-0.5 text-[10px] leading-none",
active ? "text-emerald-100/78" : "text-white/28" active
? "border-emerald-300/24 bg-emerald-400/10 text-emerald-100/82"
: "border-white/10 bg-white/[0.04] text-white/38"
)} )}
> >
{activeStepChildLabel} {activeStepChildLabel}
</span> </span>
) : null} ) : null}
</button> {stepSelectedPath.length > 0 ? (
{stepSelectedPath.length > 0 ? ( <div className="agent-dark-scrollbar flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto pb-1">
<div className="mt-2 flex flex-wrap gap-1.5 pl-10">
{stepSelectedPath.map((option, optionIndex) => { {stepSelectedPath.map((option, optionIndex) => {
const optionDepth = optionIndex + 1; const optionDepth = optionIndex + 1;
const optionLevelActive = const optionLevelActive =
@ -818,12 +819,13 @@ export function AgentWorkflowPanelDarkV2({
</button> </button>
); );
})} })}
</div> </div>
) : ( ) : (
<span className="mt-1.5 pl-10 text-[10px] leading-4 text-white/32"> <span className="truncate text-[10px] leading-4 text-white/32">
待选择 待选择
</span> </span>
)} )}
</div>
{stepIndex < flattenedResolvedSteps.length - 1 ? ( {stepIndex < flattenedResolvedSteps.length - 1 ? (
<div <div
className={cn( className={cn(