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

style: compact agent step flow header
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-18 14:46:38 +08:00
parent 69751f1ea1
commit 30d6e5e183
1 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/agents/AgentGenerationWorkspaceDarkV2.tsx
View File

@ -690,30 +690,34 @@ export function AgentGenerationWorkspaceDarkV2({
<motion.section
initial={{ opacity: 0, y: 18 }}
animate={{ opacity: 1, y: 0 }}
className="rounded-[28px] border border-white/12 bg-white/[0.04] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
className="rounded-[28px] border border-white/12 bg-white/[0.04] px-4 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)] lg:px-5"
>
<div className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
<div className="space-y-1">
<div className="text-xs uppercase tracking-[0.2em] text-white/35">Step Flow</div>
<h2 className="text-lg font-semibold text-white">第二步：生图模式执行流程</h2>
<p className="text-sm text-white/45">
将原来的侧边栏工具整合为顶部流程切换，按步骤逐项完成配置后再生成。
<div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between">
<div className="min-w-0 space-y-1">
<div className="flex flex-wrap items-center gap-2">
<span className="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-1 text-[10px] uppercase tracking-[0.22em] text-white/40">
Step Flow
</span>
<h2 className="text-base font-semibold text-white lg:text-lg">第二步：生图模式执行流程</h2>
</div>
<p className="truncate text-xs text-white/38 lg:text-[13px]">
顶部流程切换中完成模式、选图、槽位和参数配置，再进入生成。
</p>
</div>
<div className="flex flex-wrap items-center gap-2">
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-white/58">
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] text-white/58">
第一步：风格选择
<span className="mx-1.5 text-white/22">→</span>
<span className="font-medium text-emerald-300">第二步：生图模式</span>
</div>
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-white/58">
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] text-white/58">
当前步骤 {activeToolStepIndex + 1} / {toolSteps.length}
</div>
</div>
</div>
<div className="agent-dark-scrollbar mt-5 overflow-x-auto pb-1">
<div className="flex min-w-max items-center gap-3">
<div className="agent-dark-scrollbar mt-3 overflow-x-auto pb-1">
<div className="flex min-w-max items-center gap-2.5">
{toolSteps.map((step, index) => {
const Icon = step.icon;
const isActive = activeToolStep === step.key;
@ -724,7 +728,7 @@ export function AgentGenerationWorkspaceDarkV2({
onClick={() => handleToolStepChange(step.key)}
disabled={step.disabled}
className={cn(
"flex min-w-[210px] items-center gap-3 rounded-[24px] border px-4 py-3 text-left transition-all",
"flex min-w-[178px] items-center gap-2.5 rounded-[22px] border px-3 py-2.5 text-left transition-all lg:min-w-[188px]",
isActive
? "border-emerald-400/55 bg-emerald-500/[0.10] shadow-[0_0_0_1px_rgba(16,185,129,0.2)]"
: step.completed
@ -735,7 +739,7 @@ export function AgentGenerationWorkspaceDarkV2({
>
<div
className={cn(
"flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border",
"flex h-9 w-9 shrink-0 items-center justify-center rounded-[16px] border",
isActive
? "border-emerald-300/60 bg-emerald-400/20 text-emerald-200"
: step.completed
@ -743,24 +747,26 @@ export function AgentGenerationWorkspaceDarkV2({
: "border-white/12 bg-white/[0.03] text-white/55"
)}
>
<Icon className="h-5 w-5" />
<Icon className="h-[18px] w-[18px]" />
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2 text-sm font-medium text-white">
<span>{step.label}</span>
<div className="flex items-center gap-1.5">
<span className="text-sm font-medium leading-none text-white">{step.label}</span>
{step.optional ? (
<span className="rounded-full bg-white/8 px-2 py-0.5 text-[10px] font-normal text-white/45">
<span className="rounded-full bg-white/8 px-1.5 py-0.5 text-[9px] font-normal leading-none text-white/45">
可选
</span>
) : null}
</div>
<div className="mt-1 text-xs leading-5 text-white/42">{step.description}</div>
<div className="mt-1 truncate text-[11px] leading-4 text-white/38">
{step.description}
</div>
</div>
</button>
{index < toolSteps.length - 1 ? (
<div
className={cn(
"h-px w-10 shrink-0 rounded-full",
"h-px w-6 shrink-0 rounded-full lg:w-8",
step.completed ? "bg-emerald-400/45" : "bg-white/10"
)}
/>