fix: normalize workflow timeline chip alignment
This commit is contained in:
Your Name
parent
d393b5f138
commit
c2527027d6
@ -728,7 +728,7 @@ export function AgentWorkflowPanelDarkV2({
|
||||
|
||||
return (
|
||||
<Fragment key={step.key}>
|
||||
<div className="group relative flex min-w-0 items-center pr-2 text-left">
|
||||
<div className="group relative flex min-w-0 items-center gap-3 pr-2 text-left">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
@ -737,7 +737,7 @@ export function AgentWorkflowPanelDarkV2({
|
||||
setActiveEmbeddedStepKey(step.key);
|
||||
setActiveEmbeddedOptionDepth(1);
|
||||
}}
|
||||
className="flex min-w-0 shrink-0 items-center gap-3 text-left transition-transform duration-200 hover:-translate-y-[1px]"
|
||||
className="flex min-w-0 shrink-0 items-center gap-3 self-center text-left transition-transform duration-200 hover:-translate-y-[1px]"
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
@ -753,7 +753,7 @@ export function AgentWorkflowPanelDarkV2({
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"truncate text-[13px] font-semibold transition-colors",
|
||||
"truncate text-[13px] font-semibold leading-none transition-colors",
|
||||
active
|
||||
? "text-white"
|
||||
: completed
|
||||
@ -764,16 +764,16 @@ export function AgentWorkflowPanelDarkV2({
|
||||
{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 className="inline-flex h-7 shrink-0 items-center rounded-full border border-emerald-300/30 bg-emerald-400/10 px-2.5 text-[10px] font-medium leading-none text-emerald-200">
|
||||
当前步骤
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
<div className="ml-3 flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
|
||||
{activeStepChildLabel ? (
|
||||
<span
|
||||
className={cn(
|
||||
"shrink-0 rounded-full border px-2 py-0.5 text-[10px] leading-none",
|
||||
"inline-flex h-7 shrink-0 items-center rounded-full border px-2.5 text-[10px] leading-none",
|
||||
active
|
||||
? "border-emerald-300/24 bg-emerald-400/10 text-emerald-100/82"
|
||||
: "border-white/10 bg-white/[0.04] text-white/38"
|
||||
@ -783,45 +783,45 @@ export function AgentWorkflowPanelDarkV2({
|
||||
</span>
|
||||
) : null}
|
||||
{stepSelectedPath.length > 0 ? (
|
||||
<div className="agent-dark-scrollbar flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto pb-1">
|
||||
{stepSelectedPath.map((option, optionIndex) => {
|
||||
const optionDepth = optionIndex + 1;
|
||||
const optionLevelActive =
|
||||
active &&
|
||||
(activeEmbeddedOptionLevel?.depth || 1) === optionDepth;
|
||||
<div className="agent-dark-scrollbar flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
|
||||
{stepSelectedPath.map((option, optionIndex) => {
|
||||
const optionDepth = optionIndex + 1;
|
||||
const optionLevelActive =
|
||||
active &&
|
||||
(activeEmbeddedOptionLevel?.depth || 1) === optionDepth;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={`${step.key}-${option.key}-${optionDepth}`}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setPendingAutoAdvanceStepKey(null);
|
||||
setAutoAdvanceNotice(null);
|
||||
setActiveEmbeddedStepKey(step.key);
|
||||
setActiveEmbeddedOptionDepth(optionDepth);
|
||||
}}
|
||||
className={cn(
|
||||
"inline-flex max-w-full items-center gap-1 rounded-full border px-2 py-1 text-[10px] leading-none transition-colors",
|
||||
optionLevelActive
|
||||
? "border-emerald-300/35 bg-emerald-400/12 text-emerald-100"
|
||||
: active || completed
|
||||
? "border-white/14 bg-white/[0.06] text-white/72 hover:border-white/22 hover:bg-white/[0.09] hover:text-white"
|
||||
: "border-white/10 bg-white/[0.03] text-white/48 hover:border-white/18 hover:text-white/72"
|
||||
)}
|
||||
title={`返回${getWorkflowOptionDepthLabel(optionDepth)}：${option.buttonName}`}
|
||||
>
|
||||
<span className="text-[9px] opacity-70">
|
||||
{getWorkflowOptionDepthShortLabel(optionDepth)}
|
||||
</span>
|
||||
<span className="max-w-[9rem] truncate">
|
||||
{option.buttonName}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<button
|
||||
key={`${step.key}-${option.key}-${optionDepth}`}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setPendingAutoAdvanceStepKey(null);
|
||||
setAutoAdvanceNotice(null);
|
||||
setActiveEmbeddedStepKey(step.key);
|
||||
setActiveEmbeddedOptionDepth(optionDepth);
|
||||
}}
|
||||
className={cn(
|
||||
"inline-flex h-7 max-w-full shrink-0 items-center gap-1 rounded-full border px-2.5 text-[10px] leading-none transition-colors",
|
||||
optionLevelActive
|
||||
? "border-emerald-300/35 bg-emerald-400/12 text-emerald-100"
|
||||
: active || completed
|
||||
? "border-white/14 bg-white/[0.06] text-white/72 hover:border-white/22 hover:bg-white/[0.09] hover:text-white"
|
||||
: "border-white/10 bg-white/[0.03] text-white/48 hover:border-white/18 hover:text-white/72"
|
||||
)}
|
||||
title={`返回${getWorkflowOptionDepthLabel(optionDepth)}：${option.buttonName}`}
|
||||
>
|
||||
<span className="text-[9px] opacity-70">
|
||||
{getWorkflowOptionDepthShortLabel(optionDepth)}
|
||||
</span>
|
||||
<span className="max-w-[9rem] truncate whitespace-nowrap">
|
||||
{option.buttonName}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<span className="truncate text-[10px] leading-4 text-white/32">
|
||||
<span className="truncate text-[10px] leading-none text-white/32">
|
||||
待选择
|
||||
</span>
|
||||
)}
|
||||
@ -869,22 +869,6 @@ export function AgentWorkflowPanelDarkV2({
|
||||
</motion.div>
|
||||
) : null}
|
||||
|
||||
<div className="rounded-2xl border border-emerald-300/12 bg-emerald-400/[0.05] px-4 py-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="rounded-full border border-emerald-300/24 bg-emerald-400/10 px-2.5 py-1 text-[11px] font-medium text-emerald-200">
|
||||
当前正在选择
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-white">
|
||||
{activeEmbeddedStepEntry.step.title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 text-xs leading-5 text-emerald-50/68">
|
||||
{activeEmbeddedOptionLevel.depth === 1
|
||||
? "当前区域展示的是这个步骤的主卡片。选中后系统会继续切到该步骤的下一级，或自动进入下一个步骤。"
|
||||
: `当前区域展示的是「${activeEmbeddedStepEntry.step.title}」的第 ${activeEmbeddedOptionLevel.depth} 级子卡片，不是上一个已完成步骤的卡片。`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="rounded-full border border-white/12 px-2.5 py-1 text-[11px] font-medium text-white/45">
|
||||
{activeEmbeddedOptionLevel.depth === 1
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user