feat: refine workflow showcase particle banner

app/(admin)/settings/agent-workflow/agent-workflow-settings-client.tsx

@@ -1798,7 +1798,7 @@ export function AgentWorkflowSettingsClient({
                           onChange={(e) =>
                             setShowcaseConfig((prev) => ({ ...prev, subtitle: e.target.value }))
                           }
-                          placeholder="第一步：风格选择  第二步：生图模式"
+                          placeholder="选择生图模式、查询商品图、完成风格配置并实时查看结果"
                         />
                       </div>
                     </div>

components/agents/AgentWorkflowParticleScatter.tsx

@@ -6,12 +6,16 @@ type AgentWorkflowParticleScatterProps = {
   className?: string;
   particleSize?: number;
   particleCount?: number;
+  sceneScale?: number;
+  viewportScale?: number;
 };
 
 export function AgentWorkflowParticleScatter({
   className,
   particleSize,
   particleCount,
+  sceneScale,
+  viewportScale = 1,
 }: AgentWorkflowParticleScatterProps) {
   const searchParams = new URLSearchParams();
   if (typeof particleSize === "number" && Number.isFinite(particleSize) && particleSize > 0) {
@@ -20,9 +24,17 @@ export function AgentWorkflowParticleScatter({
   if (typeof particleCount === "number" && Number.isFinite(particleCount) && particleCount > 0) {
     searchParams.set("particleCount", String(Math.round(particleCount)));
   }
+  if (typeof sceneScale === "number" && Number.isFinite(sceneScale) && sceneScale > 0) {
+    searchParams.set("sceneScale", String(sceneScale));
+  }
   const src = searchParams.size
     ? `/particle-scatter-effect.html?${searchParams.toString()}`
     : "/particle-scatter-effect.html";
+  const safeViewportScale =
+    typeof viewportScale === "number" && Number.isFinite(viewportScale) && viewportScale > 0
+      ? viewportScale
+      : 1;
+  const overflowOffsetPercent = ((safeViewportScale - 1) / 2) * 100;
 
   return (
     <div
@@ -33,9 +45,15 @@ export function AgentWorkflowParticleScatter({
     >
       <iframe
         aria-hidden="true"
-        className="h-full w-full border-0 bg-transparent"
+        className="absolute border-0 bg-transparent"
         loading="eager"
         src={src}
+        style={{
+          width: `${safeViewportScale * 100}%`,
+          height: `${safeViewportScale * 100}%`,
+          left: `-${overflowOffsetPercent}%`,
+          top: `-${overflowOffsetPercent}%`,
+        }}
         tabIndex={-1}
         title="Particle Scatter Background"
       />

components/agents/AgentWorkflowShowcaseBanner.tsx

@@ -46,12 +46,11 @@ export function AgentWorkflowShowcaseBanner({
       >
         <AgentWorkflowParticleScatter
           className="top-0 h-full"
-          particleSize={110}
-          particleCount={76000}
+          viewportScale={1.5}
         />
-        <div className="pointer-events-none absolute inset-0 bg-black/80" />
-        <div className="pointer-events-none absolute inset-x-0 top-0 h-[24%] bg-gradient-to-b from-black via-black/72 to-transparent" />
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-[34%] bg-gradient-to-t from-black via-black/28 to-transparent" />
+        <div className="pointer-events-none absolute inset-0 bg-black/70" />
+        <div className="pointer-events-none absolute inset-x-0 top-0 h-[24%] bg-gradient-to-b from-black/84 via-black/56 to-transparent" />
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-[34%] bg-gradient-to-t from-black/80 via-black/24 to-transparent" />
 
         <div className="relative z-10">
           <h1 className="mb-3 text-3xl font-bold text-white md:text-4xl">{resolved.title}</h1>

lib/agents/workflow-showcase-config.ts

@@ -1,11 +1,14 @@
 import type { AgentWorkflowShowcaseConfig } from "@/types/agent";
 
 export const AGENT_WORKFLOW_SHOWCASE_CONFIG_KEY = "agent_workflow_showcase_config";
+const LEGACY_AGENT_WORKFLOW_SHOWCASE_SUBTITLE = "第一步：风格选择第二步：生图模式";
+const DEFAULT_AGENT_WORKFLOW_SHOWCASE_SUBTITLE =
+  "选择生图模式、查询商品图、完成风格配置并实时查看结果";
 
 export const defaultAgentWorkflowShowcaseConfig: AgentWorkflowShowcaseConfig = {
   enabled: true,
   title: "三倍速出片，电影级质感",
-  subtitle: "第一步：风格选择  第二步：生图模式",
+  subtitle: DEFAULT_AGENT_WORKFLOW_SHOWCASE_SUBTITLE,
   actionText: "我要创作",
   videoUrl: "",
   posterUrl: "",
@@ -17,6 +20,18 @@ function sanitizeText(value: unknown, maxLength: number) {
   return String(value || "").trim().slice(0, maxLength);
 }
 
+function normalizeShowcaseSubtitle(value: string) {
+  const normalized = String(value || "").trim();
+  if (!normalized) {
+    return defaultAgentWorkflowShowcaseConfig.subtitle;
+  }
+  const compact = normalized.replace(/\s+/g, "");
+  if (compact === LEGACY_AGENT_WORKFLOW_SHOWCASE_SUBTITLE) {
+    return DEFAULT_AGENT_WORKFLOW_SHOWCASE_SUBTITLE;
+  }
+  return normalized;
+}
+
 export function normalizeAgentWorkflowShowcaseConfig(
   value: unknown
 ): AgentWorkflowShowcaseConfig {
@@ -33,8 +48,7 @@ export function normalizeAgentWorkflowShowcaseConfig(
         : defaultAgentWorkflowShowcaseConfig.enabled,
     title:
       sanitizeText(raw.title, 200) || defaultAgentWorkflowShowcaseConfig.title,
-    subtitle:
-      sanitizeText(raw.subtitle, 300) || defaultAgentWorkflowShowcaseConfig.subtitle,
+    subtitle: normalizeShowcaseSubtitle(sanitizeText(raw.subtitle, 300)),
     actionText:
       sanitizeText(raw.actionText, 48) || defaultAgentWorkflowShowcaseConfig.actionText,
     videoUrl: sanitizeText(raw.videoUrl, 2000),