diff --git a/components/agents/AgentPresetCardDark.tsx b/components/agents/AgentPresetCardDark.tsx
index 6b70bad97..14f9693eb 100644
--- a/components/agents/AgentPresetCardDark.tsx
+++ b/components/agents/AgentPresetCardDark.tsx
@@ -3,7 +3,10 @@
import { motion } from "framer-motion";
import { Play, Copy, Pencil, Sparkles, Trash2, Video, Wand2, FileText, Clock, User } from "lucide-react";
import { cn } from "@/lib/utils";
-import { getAgentPresetModeTypeFromDefaultParams } from "@/lib/agents/preset-mode-config";
+import {
+ getAgentPresetModeTypeFromDefaultParams,
+ normalizeAgentPresetModeConfig,
+} from "@/lib/agents/preset-mode-config";
import type { AgentPreset } from "@/types/agent";
interface AgentPresetCardDarkProps {
@@ -75,6 +78,7 @@ export function AgentPresetCardDark({
const typeInfo = typeConfig[preset.type] || typeConfig.image;
const TypeIcon = typeInfo.icon;
const imageModeType = getAgentPresetModeTypeFromDefaultParams(preset.defaultParams);
+ const modeConfig = normalizeAgentPresetModeConfig(preset.defaultParams);
const imageModeLabel =
imageModeType === "detail_replacement"
? "详情替换"
@@ -83,6 +87,36 @@ export function AgentPresetCardDark({
: imageModeType === "scene_generation"
? "场景图"
: null;
+ const requiresImageCount =
+ preset.type === "image" ? Math.max(0, preset.requiredUploadCount || preset.slotCount || 0) : 0;
+ const includesModelSlot =
+ preset.type === "image"
+ ? imageModeType === "scene_generation"
+ ? modeConfig.scene.includeModelSlot
+ : imageModeType === "detail_replacement"
+ ? modeConfig.detail.includeModelSlot
+ : imageModeType === "sku_replacement"
+ ? modeConfig.sku.includeModelSlot
+ : preset.requiredUploadCount > preset.slotCount
+ : false;
+ const modelControlLabel =
+ preset.type === "image"
+ ? imageModeType === "scene_generation" && modeConfig.scene.allowModelOverride
+ ? "可切模型"
+ : "锁定模型"
+ : null;
+ const categoryHint =
+ preset.categoryPath?.level3Name ||
+ preset.categoryPath?.level2Name ||
+ preset.categoryPath?.level1Name ||
+ preset.categoryPath?.sectionName ||
+ null;
+ const compactSummaryBadges = [
+ imageModeLabel || typeInfo.label,
+ preset.type === "image" && requiresImageCount > 0 ? `需${requiresImageCount}张图` : null,
+ preset.type === "image" ? (includesModelSlot ? "含模特槽" : "无模特槽") : null,
+ modelControlLabel,
+ ].filter((item): item is string => Boolean(item));
const showEdit = Boolean(onEdit);
const showDelete = Boolean(onDelete);
const showFork = Boolean(onFork) && !showEdit && !showDelete;
@@ -169,7 +203,32 @@ export function AgentPresetCardDark({
{preset.name}
-
+
option.buttonName).join(" / ");
+}
+
function StepOptionCard({
option,
step,
@@ -303,6 +319,16 @@ export function AgentWorkflowPanelDarkV2({
() => getAgentWorkflowProgress({ config: resolvedConfig, selections }),
[resolvedConfig, selections]
);
+ const stepSelectionSummaryMap = useMemo(() => {
+ const entries = flattenAgentWorkflowSteps(resolvedConfig.steps).map(({ step }) => [
+ step.key,
+ getWorkflowStepSelectionSummary({
+ step,
+ selectionValue: selections[step.key],
+ }),
+ ]);
+ return Object.fromEntries(entries) as Record;
+ }, [resolvedConfig.steps, selections]);
const [activeEmbeddedStepKey, setActiveEmbeddedStepKey] = useState("");
const [pendingAutoAdvanceStepKey, setPendingAutoAdvanceStepKey] = useState(null);
const activeEmbeddedStepIndex = Math.max(
@@ -497,6 +523,7 @@ export function AgentWorkflowPanelDarkV2({
selectionValue: selections[step.key],
});
const active = step.key === activeEmbeddedStepEntry.step.key;
+ const stepSummary = stepSelectionSummaryMap[step.key] || "";
return (
);
})}
@@ -545,6 +586,11 @@ export function AgentWorkflowPanelDarkV2({
) : null}
+
+ {compactSummaryBadges.map((badge, badgeIndex) => (
+
+ {badge}
+
+ ))}
+
+
+
+
+ 默认模型：{preset.defaultModel?.displayName || "未配置"}
+
+ {preset.description ? (
+ {preset.description}
+ ) : categoryHint ? (
+ 适用分类：{categoryHint}
+ ) : null}
+ {preset.name}
+ +
+ {compactSummaryBadges.slice(0, 4).map((badge, badgeIndex) => (
+
+ {badge}
+
+ ))}
+
{/* 元信息 */}
@@ -347,12 +422,12 @@ export function AgentPresetCardDark({
{publishedAt && (
diff --git a/components/agents/AgentWorkflowMaterialSelectionPanel.tsx b/components/agents/AgentWorkflowMaterialSelectionPanel.tsx
index c069edf29..ab87a927f 100644
--- a/components/agents/AgentWorkflowMaterialSelectionPanel.tsx
+++ b/components/agents/AgentWorkflowMaterialSelectionPanel.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import { Plus, Sparkles } from "lucide-react";
import { AgentWorkflowMaterialPicker } from "@/components/agents/AgentWorkflowMaterialPicker";
import { createEmptyAgentWorkflowMaterialSelection } from "@/lib/agents/workflow-material-config";
@@ -101,6 +101,84 @@ export function AgentWorkflowMaterialSelectionPanel({
typeof productSelectionLimit === "number" && Number.isFinite(productSelectionLimit) && productSelectionLimit > 0
? Math.max(productSelectionLimit - primarySelectedCount, secondarySelectedCount, 0)
: null;
+ const primarySelectedImages = useMemo(
+ () =>
+ (materials.primary.result?.images || []).filter((image) =>
+ materials.primary.selectedImageIds.includes(image.id)
+ ),
+ [materials.primary.result?.images, materials.primary.selectedImageIds]
+ );
+ const secondarySelectedImages = useMemo(
+ () =>
+ (materials.secondary.result?.images || []).filter((image) =>
+ materials.secondary.selectedImageIds.includes(image.id)
+ ),
+ [materials.secondary.result?.images, materials.secondary.selectedImageIds]
+ );
+ const slotPreviewCount = useMemo(() => {
+ if (
+ typeof productSelectionLimit === "number" &&
+ Number.isFinite(productSelectionLimit) &&
+ productSelectionLimit > 0
+ ) {
+ return Math.round(productSelectionLimit);
+ }
+ return primarySelectedImages.length + secondarySelectedImages.length;
+ }, [primarySelectedImages.length, productSelectionLimit, secondarySelectedImages.length]);
+ const slotPreviewItems = useMemo(() => {
+ const orderedSources = [
+ ...primarySelectedImages.map((image, index) => ({
+ source: "主商品" as const,
+ image,
+ sourceIndex: index,
+ })),
+ ...secondarySelectedImages.map((image, index) => ({
+ source: "搭配商品" as const,
+ image,
+ sourceIndex: index,
+ })),
+ ];
+
+ return Array.from({ length: slotPreviewCount }, (_, index) => {
+ const assigned = orderedSources[index] || null;
+ return {
+ slotLabel: `产品图${index + 1}`,
+ assigned,
+ };
+ });
+ }, [primarySelectedImages, secondarySelectedImages, slotPreviewCount]);
+ const hasAnyQueryInput =
+ Boolean(String(inputs.primarySku || "").trim()) ||
+ Boolean(String(inputs.secondarySku || "").trim());
+ const hasSkuSelectionPending =
+ Boolean(materials.primary.result?.skuOptions?.length) ||
+ Boolean(materials.secondary.result?.skuOptions?.length);
+ const hasAnyMaterialResult =
+ Boolean(materials.primary.result?.images?.length) ||
+ Boolean(materials.secondary.result?.images?.length) ||
+ hasSkuSelectionPending;
+ const hasAnySelectedImages =
+ materials.primary.selectedImageIds.length > 0 || materials.secondary.selectedImageIds.length > 0;
+ const materialGuideSteps = [
+ {
+ badge: "01",
+ label: "输入型号",
+ description: "先选择按 SPU 或 SKU 搜索，再输入商品型号。",
+ status: hasAnyQueryInput ? "completed" : "current",
+ },
+ {
+ badge: "02",
+ label: "选择SKU",
+ description: "如果是 SPU 查询，先从返回的 SKU 列表里点选具体 SKU。",
+ status: hasSkuSelectionPending ? "current" : hasAnyMaterialResult ? "completed" : "pending",
+ },
+ {
+ badge: "03",
+ label: "勾选图片",
+ description: "勾选你要带入生图的白底图，系统会自动映射到产品槽位。",
+ status: hasAnySelectedImages ? "completed" : hasAnyMaterialResult ? "current" : "pending",
+ },
+ ] as const;
useEffect(() => {
if (hasSecondaryMaterialContent) {
@@ -222,6 +300,157 @@ export function AgentWorkflowMaterialSelectionPanel({
+
+
+ {slotPreviewItems.length > 0 ? (
+
+
+
+
+ 选图流程
+
+
+ 按这 3 步操作就能完成输入图准备，避免来回试错。
+
+
+ {materialGuideSteps.map((step) => (
+
+
+
+ ))}
+
+
+ {step.badge}
+
+
+
+ {step.label}
+
+
+ {step.description}
+
+
+
+ ) : null}
+
+
+
+
+ 产品图槽位映射
+
+
+ 当前已选图片会按顺序自动带入后续生图槽位，先主商品，后搭配商品。
+
+
+ {slotPreviewItems.map((item, index) => {
+ const source = item.assigned?.source || null;
+ const previewUrl = item.assigned?.image.imageUrl || "";
+ const isAssigned = Boolean(item.assigned && previewUrl);
+
+ return (
+
+
+
+ );
+ })}
+
+ {isAssigned ? (
+ 
+ ) : (
+
+
+ 待选择
+
+ )}
+
+ {item.slotLabel}
+
+
+ {source || "空槽位"}
+
+
+
+
+ {isAssigned
+ ? item.assigned?.image.label || `已映射到${item.slotLabel}`
+ : `${item.slotLabel}待补图`}
+
+
+ {isAssigned
+ ? `${source}第 ${(item.assigned?.sourceIndex || 0) + 1} 张`
+ : "先在下方搜索并选择图片"}
+
+
+ {stepSelectionSummaryMap[activeEmbeddedStepEntry.step.key]
+ ? `已选：${stepSelectionSummaryMap[activeEmbeddedStepEntry.step.key]}`
+ : "待选择：完成当前卡片后会自动推进到下一步"}
+
{activeEmbeddedStepEntry.step.description ? (
{activeEmbeddedStepEntry.step.description} @@ -582,6 +628,11 @@ export function AgentWorkflowPanelDarkV2({ ) : null} +
+ {stepSelectionSummaryMap[step.key]
+ ? `已选：${stepSelectionSummaryMap[step.key]}`
+ : "待选择：先确定这一组风格卡片，系统再继续组合 Prompt"}
+
{step.description && (
{step.description}
)}