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

style: reduce agent step flow height
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 15:07:34 +08:00
parent 30d6e5e183
commit 89ac6d69db
1 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/agents/AgentGenerationWorkspaceDarkV2.tsx
View File

@ -690,19 +690,18 @@ export function AgentGenerationWorkspaceDarkV2({
<motion.section <motion.section
initial={{ opacity: 0, y: 18 }} initial={{ opacity: 0, y: 18 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
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" className="rounded-[26px] border border-white/12 bg-white/[0.04] px-4 py-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)] lg:px-5"
> >
<div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between"> <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="min-w-0">
<div className="flex flex-wrap items-center gap-2"> <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"> <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 Step Flow
</span> </span>
<h2 className="text-base font-semibold text-white lg:text-lg">第二步：生图模式执行流程</h2> <h2 className="text-[15px] font-semibold leading-none text-white lg:text-[18px]">
第二步：生图模式执行流程
</h2>
</div> </div>
<p className="truncate text-xs text-white/38 lg:text-[13px]">
顶部流程切换中完成模式、选图、槽位和参数配置，再进入生成。
</p>
</div> </div>
<div className="flex flex-wrap items-center gap-2"> <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-[11px] text-white/58"> <div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] text-white/58">
@ -716,8 +715,8 @@ export function AgentGenerationWorkspaceDarkV2({
</div> </div>
</div> </div>
<div className="agent-dark-scrollbar mt-3 overflow-x-auto pb-1"> <div className="agent-dark-scrollbar mt-2 overflow-x-auto pb-0.5">
<div className="flex min-w-max items-center gap-2.5"> <div className="flex min-w-max items-center gap-2">
{toolSteps.map((step, index) => { {toolSteps.map((step, index) => {
const Icon = step.icon; const Icon = step.icon;
const isActive = activeToolStep === step.key; const isActive = activeToolStep === step.key;
@ -728,7 +727,7 @@ export function AgentGenerationWorkspaceDarkV2({
onClick={() => handleToolStepChange(step.key)} onClick={() => handleToolStepChange(step.key)}
disabled={step.disabled} disabled={step.disabled}
className={cn( className={cn(
"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]", "flex h-[58px] min-w-[148px] items-center gap-2 rounded-[20px] border px-2.5 py-2 text-left transition-all lg:min-w-[158px]",
isActive isActive
? "border-emerald-400/55 bg-emerald-500/[0.10] shadow-[0_0_0_1px_rgba(16,185,129,0.2)]" ? "border-emerald-400/55 bg-emerald-500/[0.10] shadow-[0_0_0_1px_rgba(16,185,129,0.2)]"
: step.completed : step.completed
@ -739,7 +738,7 @@ export function AgentGenerationWorkspaceDarkV2({
> >
<div <div
className={cn( className={cn(
"flex h-9 w-9 shrink-0 items-center justify-center rounded-[16px] border", "flex h-8 w-8 shrink-0 items-center justify-center rounded-[14px] border",
isActive isActive
? "border-emerald-300/60 bg-emerald-400/20 text-emerald-200" ? "border-emerald-300/60 bg-emerald-400/20 text-emerald-200"
: step.completed : step.completed
@ -751,22 +750,21 @@ export function AgentGenerationWorkspaceDarkV2({
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<span className="text-sm font-medium leading-none text-white">{step.label}</span> <span className="truncate text-sm font-medium leading-none text-white">
{step.label}
</span>
{step.optional ? ( {step.optional ? (
<span className="rounded-full bg-white/8 px-1.5 py-0.5 text-[9px] font-normal leading-none 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> </span>
) : null} ) : null}
</div> </div>
<div className="mt-1 truncate text-[11px] leading-4 text-white/38">
{step.description}
</div>
</div> </div>
</button> </button>
{index < toolSteps.length - 1 ? ( {index < toolSteps.length - 1 ? (
<div <div
className={cn( className={cn(
"h-px w-6 shrink-0 rounded-full lg:w-8", "h-px w-4 shrink-0 rounded-full lg:w-5",
step.completed ? "bg-emerald-400/45" : "bg-white/10" step.completed ? "bg-emerald-400/45" : "bg-white/10"
)} )}
/> />