From 281593ff29c61231e1d80b30cb2c6a9f3c0926f8 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Wed, 18 Mar 2026 01:37:44 +0800
Subject: [PATCH] style: align agent workflow dark theme accents

---
 .../agent-workflow-settings-client.tsx        |  2 +-
 .../agents/AgentGenerationWorkspaceDarkV2.tsx | 27 ++++++++++---------
 .../agents/AgentWorkflowPanelDarkV2.tsx       | 27 ++++++++++---------
 .../agents/AgentWorkflowShowcaseBanner.tsx    |  4 +--
 4 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/app/(admin)/settings/agent-workflow/agent-workflow-settings-client.tsx b/app/(admin)/settings/agent-workflow/agent-workflow-settings-client.tsx
index 7240c3016..4d13b33a4 100644
--- a/app/(admin)/settings/agent-workflow/agent-workflow-settings-client.tsx
+++ b/app/(admin)/settings/agent-workflow/agent-workflow-settings-client.tsx
@@ -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}
diff --git a/components/agents/AgentGenerationWorkspaceDarkV2.tsx b/components/agents/AgentGenerationWorkspaceDarkV2.tsx
index b2b0348fe..bde13a10f 100644
--- a/components/agents/AgentGenerationWorkspaceDarkV2.tsx
+++ b/components/agents/AgentGenerationWorkspaceDarkV2.tsx
@@ -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"
                           )}
                         >
diff --git a/components/agents/AgentWorkflowPanelDarkV2.tsx b/components/agents/AgentWorkflowPanelDarkV2.tsx
index f63a186b4..878f639fc 100644
--- a/components/agents/AgentWorkflowPanelDarkV2.tsx
+++ b/components/agents/AgentWorkflowPanelDarkV2.tsx
@@ -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"
diff --git a/components/agents/AgentWorkflowShowcaseBanner.tsx b/components/agents/AgentWorkflowShowcaseBanner.tsx
index 39c5f8922..eab1da5b5 100644
--- a/components/agents/AgentWorkflowShowcaseBanner.tsx
+++ b/components/agents/AgentWorkflowShowcaseBanner.tsx
@@ -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>