style: align agent workflow dark theme accents
This commit is contained in:
Your Name
parent
0abded401b
commit
281593ff29
@ -694,7 +694,7 @@ export function AgentWorkflowSettingsClient({
|
||||
<div className="space-y-2">
|
||||
<Label>前台预览</Label>
|
||||
<div className="overflow-hidden rounded-2xl border bg-slate-950 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]">
|
||||
<div className="relative aspect-[21/9] w-full overflow-hidden bg-black">
|
||||
<div className="relative aspect-[10/3] w-full overflow-hidden bg-black">
|
||||
{showcaseConfig.videoUrl ? (
|
||||
<video
|
||||
key={showcaseConfig.videoUrl}
|
||||
|
||||
@ -594,8 +594,8 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
className="h-10 w-10 rounded-lg object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/20">
|
||||
<Wand2 className="h-5 w-5 text-violet-400" />
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/18">
|
||||
<Wand2 className="h-5 w-5 text-emerald-300" />
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
@ -606,7 +606,7 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
{presetPanel && onClearPreset && (
|
||||
<button
|
||||
onClick={onClearPreset}
|
||||
className="mt-3 text-xs text-violet-400 hover:text-violet-300"
|
||||
className="mt-3 text-xs text-emerald-300 hover:text-emerald-200"
|
||||
>
|
||||
更换生图模式 →
|
||||
</button>
|
||||
@ -642,7 +642,7 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<ImagePlus className="h-4 w-4 text-violet-400" />
|
||||
<ImagePlus className="h-4 w-4 text-emerald-300" />
|
||||
图片槽位
|
||||
</h3>
|
||||
{agentUploadSlots.length > 0 ? (
|
||||
@ -657,8 +657,8 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
className={cn(
|
||||
"group relative aspect-square overflow-hidden rounded-xl transition-all",
|
||||
attachments[index]
|
||||
? "ring-2 ring-violet-500/40"
|
||||
: "border-2 border-dashed border-white/15 bg-black/25 hover:border-violet-500/35"
|
||||
? "ring-2 ring-emerald-400/45"
|
||||
: "border-2 border-dashed border-white/15 bg-black/25 hover:border-emerald-400/35"
|
||||
)}
|
||||
>
|
||||
<input
|
||||
@ -694,7 +694,7 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
) : (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-1 text-white/30">
|
||||
{slotUploading === index ? (
|
||||
<Loader2 className="h-5 w-5 animate-spin text-violet-500" />
|
||||
<Loader2 className="h-5 w-5 animate-spin text-emerald-400" />
|
||||
) : (
|
||||
<>
|
||||
<Upload className="h-5 w-5" />
|
||||
@ -722,14 +722,14 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Sparkles className="h-4 w-4 text-violet-400" />
|
||||
<Sparkles className="h-4 w-4 text-emerald-300" />
|
||||
补充要求
|
||||
</h3>
|
||||
<Textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="描述你想要的风格、氛围、构图..."
|
||||
className="min-h-[100px] resize-none rounded-lg border-white/5 bg-black text-sm text-white placeholder:text-white/20 focus:border-violet-500/30"
|
||||
className="min-h-[100px] resize-none rounded-lg border-white/12 bg-black text-sm text-white placeholder:text-white/20 focus:border-emerald-400/30"
|
||||
/>
|
||||
</motion.section>
|
||||
|
||||
@ -741,7 +741,7 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Settings2 className="h-4 w-4 text-violet-400" />
|
||||
<Settings2 className="h-4 w-4 text-emerald-300" />
|
||||
生成参数
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
@ -772,9 +772,10 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
disabled={isGenerating || !selectedAgentPresetId}
|
||||
className={cn(
|
||||
"h-11 w-full gap-2 rounded-lg",
|
||||
"bg-gradient-to-r from-violet-600 to-purple-600",
|
||||
"bg-gradient-to-r from-emerald-500 to-teal-500",
|
||||
"text-white font-medium",
|
||||
"hover:from-violet-500 hover:to-purple-500",
|
||||
"hover:from-emerald-400 hover:to-teal-400",
|
||||
"shadow-[0_0_24px_rgba(16,185,129,0.24)]",
|
||||
"disabled:opacity-30"
|
||||
)}
|
||||
>
|
||||
@ -894,7 +895,7 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
className={cn(
|
||||
"relative flex-shrink-0 overflow-hidden rounded-xl transition-all",
|
||||
displayedResultUrl === url
|
||||
? "ring-2 ring-violet-500"
|
||||
? "ring-2 ring-emerald-400"
|
||||
: "ring-1 ring-white/12 hover:ring-white/30"
|
||||
)}
|
||||
>
|
||||
|
||||
@ -97,7 +97,7 @@ function StepOptionCard({
|
||||
"transition-all duration-500",
|
||||
selected
|
||||
? "ring-2 ring-white/30 shadow-[0_0_30px_rgba(255,255,255,0.1)]"
|
||||
: "ring-1 ring-white/5 hover:ring-white/20"
|
||||
: "ring-1 ring-white/12 hover:ring-white/24"
|
||||
)}
|
||||
>
|
||||
{/* 背景 */}
|
||||
@ -324,6 +324,7 @@ export function AgentWorkflowPanelDarkV2({
|
||||
{resolvedConfig.steps.map((step, stepIndex) => (
|
||||
<motion.section
|
||||
key={step.key}
|
||||
className="rounded-2xl border border-white/12 bg-white/[0.04] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.15 + stepIndex * 0.05 }}
|
||||
@ -360,7 +361,7 @@ export function AgentWorkflowPanelDarkV2({
|
||||
{/* 当前选择摘要 */}
|
||||
{summary.length > 0 && (
|
||||
<motion.section
|
||||
className="rounded-2xl border border-white/5 bg-white/[0.02] p-6"
|
||||
className="rounded-2xl border border-white/12 bg-white/[0.04] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
@ -369,7 +370,7 @@ export function AgentWorkflowPanelDarkV2({
|
||||
{summary.map((item) => (
|
||||
<div
|
||||
key={`${item.stepKey}-${item.optionKey}`}
|
||||
className="flex items-center justify-between rounded-xl bg-white/5 px-4 py-3"
|
||||
className="flex items-center justify-between rounded-xl border border-white/10 bg-black/20 px-4 py-3"
|
||||
>
|
||||
<span className="text-sm text-white/50">{item.stepTitle}</span>
|
||||
<span className="text-sm font-medium text-white">{item.optionName}</span>
|
||||
@ -402,7 +403,7 @@ export function AgentWorkflowPanelDarkV2({
|
||||
readOnly
|
||||
rows={6}
|
||||
placeholder="选择工作流后，这里会自动生成结构化 Prompt"
|
||||
className="resize-none rounded-xl border-white/5 bg-white/[0.03] text-sm text-white/80 placeholder:text-white/20 focus:border-white/10"
|
||||
className="resize-none rounded-xl border-white/12 bg-black/20 text-sm text-white/80 placeholder:text-white/20 focus:border-white/15"
|
||||
/>
|
||||
</motion.section>
|
||||
</div>
|
||||
@ -428,21 +429,21 @@ export function AgentWorkflowPanelDarkV2({
|
||||
transition={{ delay: 0.2 }}
|
||||
className="pointer-events-none fixed inset-x-0 bottom-4 z-40 px-4 sm:px-6"
|
||||
>
|
||||
<div className="pointer-events-auto mx-auto flex w-full max-w-5xl flex-col gap-4 rounded-[28px] border border-white/12 bg-black/85 px-4 py-4 shadow-[0_24px_80px_rgba(0,0,0,0.45)] backdrop-blur-2xl sm:px-5">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="pointer-events-auto mx-auto flex w-full max-w-[45rem] flex-col gap-3 rounded-[24px] border border-white/12 bg-black/88 px-3 py-3 shadow-[0_18px_54px_rgba(0,0,0,0.42)] backdrop-blur-2xl sm:px-4">
|
||||
<div className="flex flex-col gap-1.5 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-medium text-white">工作流进度</div>
|
||||
<div className="text-xs text-white/45">
|
||||
<div className="text-[13px] font-medium text-white">工作流进度</div>
|
||||
<div className="text-[11px] text-white/45">
|
||||
已完成 {progress.completed} / {progress.total} 个步骤
|
||||
{progress.isComplete ? "，可以直接进入下一步" : "，也可以选择跳过直接进入下一步"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-white">
|
||||
<div className="text-[13px] font-semibold text-white">
|
||||
{progress.total > 0 ? Math.round((progress.completed / progress.total) * 100) : 0}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-2 overflow-hidden rounded-full bg-white/10">
|
||||
<div className="h-1.5 overflow-hidden rounded-full bg-white/10">
|
||||
<motion.div
|
||||
className="h-full rounded-full bg-gradient-to-r from-emerald-500 to-teal-400"
|
||||
initial={{ width: 0 }}
|
||||
@ -456,7 +457,7 @@ export function AgentWorkflowPanelDarkV2({
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={onSkipStep}
|
||||
className="h-11 gap-2 rounded-full border border-white/10 bg-white/[0.03] px-6 text-white/75 hover:bg-white/10 hover:text-white"
|
||||
className="h-10 gap-2 rounded-full border border-white/10 bg-white/[0.03] px-5 text-white/75 hover:bg-white/10 hover:text-white"
|
||||
>
|
||||
跳过并进入下一步
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
@ -466,9 +467,9 @@ export function AgentWorkflowPanelDarkV2({
|
||||
onClick={onNextStep}
|
||||
disabled={progress.total > 0 && !progress.isComplete}
|
||||
className={cn(
|
||||
"h-11 gap-2 rounded-full px-8",
|
||||
"h-10 gap-2 rounded-full px-6",
|
||||
"bg-gradient-to-r from-emerald-500 to-teal-500",
|
||||
"text-white font-medium",
|
||||
"text-sm font-medium text-white",
|
||||
"hover:from-emerald-400 hover:to-teal-400",
|
||||
"shadow-[0_0_30px_rgba(16,185,129,0.3)]",
|
||||
"disabled:opacity-30"
|
||||
|
||||
@ -59,7 +59,7 @@ export function AgentWorkflowShowcaseBanner({
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.15 }}
|
||||
>
|
||||
<div className="aspect-[21/9] w-full">
|
||||
<div className="aspect-[10/3] w-full">
|
||||
{hasVideo ? (
|
||||
<video
|
||||
key={resolved.videoUrl}
|
||||
@ -108,7 +108,7 @@ export function AgentWorkflowShowcaseBanner({
|
||||
</div>
|
||||
{hasVideo || hasPoster ? (
|
||||
<div className="rounded-full border border-white/14 bg-black/30 px-3 py-1 text-xs text-white/55 backdrop-blur-md">
|
||||
固定比例 21:9
|
||||
固定比例 10:3
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user