660 lines
24 KiB
TypeScript
660 lines
24 KiB
TypeScript
"use client";
|
||
|
||
import { useMemo } from "react";
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { ArrowRight, Check, Copy, RotateCcw, Sparkles, Wand2 } from "lucide-react";
|
||
import { toast } from "sonner";
|
||
import { Button } from "@/components/ui/button";
|
||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||
import { SearchableSelect } from "@/components/ui/searchable-select";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { cn } from "@/lib/utils";
|
||
import {
|
||
defaultAgentWorkflowUiConfig,
|
||
getAgentWorkflowCategoryLabels,
|
||
getAgentWorkflowBrandStoreEntries,
|
||
getAgentWorkflowFifthCategoryOptionsByBrandStoreThirdFourth,
|
||
getAgentWorkflowFourthCategoryOptionsByBrandStoreThirdCategory,
|
||
getAgentWorkflowPriceBandOptions,
|
||
getAgentWorkflowThirdCategoryOptionsByBrandStore,
|
||
getAgentWorkflowStoreOptionsByBrand,
|
||
} from "@/lib/agents/workflow-ui-config";
|
||
import { createEmptyAgentWorkflowMaterialSelection } from "@/lib/agents/workflow-material-config";
|
||
import {
|
||
buildAgentWorkflowComposerContext,
|
||
getAgentWorkflowProgress,
|
||
} from "@/lib/agents/workflow-composer";
|
||
import type {
|
||
AgentWorkflowComposerSelection,
|
||
AgentWorkflowMaterialSelections,
|
||
AgentWorkflowStepKey,
|
||
AgentWorkflowUiConfig,
|
||
} from "@/types/agent";
|
||
import {
|
||
AGENT_PRESET_PREVIEW_IMAGE_SIZES,
|
||
getAgentPresetPreviewImageUrl,
|
||
} from "./agent-preset-preview";
|
||
|
||
export interface AgentWorkflowInputs {
|
||
primarySku: string;
|
||
secondarySku: string;
|
||
brand: string;
|
||
store: string;
|
||
officialSecondCategory: string;
|
||
officialThirdCategory: string;
|
||
thirdCategory: string;
|
||
fourthCategory: string;
|
||
fifthCategory: string;
|
||
priceBand: string;
|
||
}
|
||
|
||
interface AgentWorkflowPanelNewProps {
|
||
config?: AgentWorkflowUiConfig | null;
|
||
inputs: AgentWorkflowInputs;
|
||
onInputsChange: (next: AgentWorkflowInputs) => void;
|
||
materials: AgentWorkflowMaterialSelections;
|
||
onMaterialsChange: (next: AgentWorkflowMaterialSelections) => void;
|
||
selections: Partial<Record<AgentWorkflowStepKey, string>>;
|
||
onSelectionsChange: (next: Partial<Record<AgentWorkflowStepKey, string>>) => void;
|
||
onReset?: () => void;
|
||
embedded?: boolean;
|
||
onNextStep?: () => void;
|
||
onSkipStep?: () => void;
|
||
}
|
||
|
||
function buildSelectionSummary(params: {
|
||
config: AgentWorkflowUiConfig;
|
||
selections: Partial<Record<AgentWorkflowStepKey, string>>;
|
||
}) {
|
||
const result: AgentWorkflowComposerSelection[] = [];
|
||
for (const step of params.config.steps) {
|
||
const selectedOptionKey = params.selections[step.key];
|
||
if (!selectedOptionKey) continue;
|
||
const option = step.options.find((item) => item.key === selectedOptionKey && item.enabled);
|
||
if (!option) continue;
|
||
result.push({
|
||
stepKey: step.key,
|
||
stepTitle: step.title,
|
||
optionKey: option.key,
|
||
optionName: option.buttonName,
|
||
promptFragment: option.promptFragment || "",
|
||
});
|
||
}
|
||
return result;
|
||
}
|
||
|
||
function StepCard({
|
||
option,
|
||
step,
|
||
selected,
|
||
onClick,
|
||
index,
|
||
}: {
|
||
option: { key: string; buttonName: string; description?: string | null; previewImageUrl?: string | null };
|
||
step: { title: string };
|
||
selected: boolean;
|
||
onClick: () => void;
|
||
index: number;
|
||
}) {
|
||
const previewUrl = getAgentPresetPreviewImageUrl(option.previewImageUrl || "");
|
||
|
||
return (
|
||
<motion.button
|
||
type="button"
|
||
onClick={onClick}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||
whileHover={{ y: -2, scale: 1.01 }}
|
||
whileTap={{ scale: 0.99 }}
|
||
className={cn(
|
||
"group relative mx-auto w-full max-w-[230px] overflow-hidden rounded-2xl text-left transition-all duration-300",
|
||
"border bg-white",
|
||
selected
|
||
? [
|
||
"border-indigo-500/50 shadow-[0_0_0_1px_rgba(99,102,241,0.2),0_8px_24px_rgba(99,102,241,0.12)]",
|
||
"ring-1 ring-indigo-500/20",
|
||
]
|
||
: [
|
||
"border-slate-200/60 shadow-[0_0_0_1px_rgba(0,0,0,0.02),0_2px_8px_rgba(0,0,0,0.04)]",
|
||
"hover:border-indigo-300/50 hover:shadow-[0_0_0_1px_rgba(99,102,241,0.1),0_8px_24px_rgba(0,0,0,0.08)]",
|
||
]
|
||
)}
|
||
>
|
||
{/* 选中指示器 */}
|
||
<div
|
||
className={cn(
|
||
"absolute left-0 top-0 h-full w-[3px] transition-all duration-300",
|
||
selected
|
||
? "bg-gradient-to-b from-indigo-500 to-violet-500"
|
||
: "bg-transparent group-hover:bg-indigo-500/20"
|
||
)}
|
||
/>
|
||
|
||
{/* 预览图 */}
|
||
<div className="relative aspect-[16/10] w-full overflow-hidden bg-slate-50">
|
||
{previewUrl ? (
|
||
<motion.img
|
||
src={previewUrl}
|
||
alt={option.buttonName}
|
||
loading={index < 4 ? "eager" : "lazy"}
|
||
decoding="async"
|
||
fetchPriority={index < 4 ? "high" : "low"}
|
||
sizes={AGENT_PRESET_PREVIEW_IMAGE_SIZES}
|
||
className="h-full w-full object-cover"
|
||
whileHover={{ scale: 1.05 }}
|
||
transition={{ duration: 0.4 }}
|
||
/>
|
||
) : (
|
||
<div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
|
||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100 text-slate-400">
|
||
<Wand2 className="h-5 w-5" />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 选中标记 */}
|
||
<AnimatePresence>
|
||
{selected && (
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
exit={{ opacity: 0, scale: 0.8 }}
|
||
className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-indigo-500 text-white shadow-lg"
|
||
>
|
||
<Check className="h-3.5 w-3.5" />
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
{/* 步骤标签 */}
|
||
<div className="absolute left-2 top-2">
|
||
<span className="rounded-full bg-white/90 px-2 py-0.5 text-[10px] font-medium text-slate-600 shadow-sm backdrop-blur-sm">
|
||
{step.title}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 信息区 */}
|
||
<div className="space-y-1 p-3">
|
||
<h4 className="text-sm font-semibold text-slate-900">{option.buttonName}</h4>
|
||
{option.description && (
|
||
<p className="line-clamp-2 text-xs leading-relaxed text-slate-500">{option.description}</p>
|
||
)}
|
||
</div>
|
||
</motion.button>
|
||
);
|
||
}
|
||
|
||
export function AgentWorkflowPanelNew({
|
||
config,
|
||
inputs,
|
||
onInputsChange,
|
||
materials,
|
||
onMaterialsChange,
|
||
selections,
|
||
onSelectionsChange,
|
||
onReset,
|
||
embedded = false,
|
||
onNextStep,
|
||
onSkipStep,
|
||
}: AgentWorkflowPanelNewProps) {
|
||
const categoryLabels = useMemo(
|
||
() => getAgentWorkflowCategoryLabels(config),
|
||
[config]
|
||
);
|
||
const firstCategoryLabel = categoryLabels.firstCategory;
|
||
const secondCategoryLabel = categoryLabels.secondCategory;
|
||
const thirdCategoryLabel = categoryLabels.thirdCategory;
|
||
const fourthCategoryLabel = categoryLabels.fourthCategory;
|
||
const fifthCategoryLabel = categoryLabels.fifthCategory;
|
||
const brandOptions = useMemo(
|
||
() => config?.inputOptions?.brands || defaultAgentWorkflowUiConfig.inputOptions?.brands || [],
|
||
[config?.inputOptions?.brands]
|
||
);
|
||
const brandStoreEntries = useMemo(
|
||
() => getAgentWorkflowBrandStoreEntries(config),
|
||
[config]
|
||
);
|
||
const storeOptions = useMemo(
|
||
() => getAgentWorkflowStoreOptionsByBrand({ config, brand: inputs.brand }),
|
||
[config, inputs.brand]
|
||
);
|
||
const thirdCategoryOptions = useMemo(
|
||
() =>
|
||
getAgentWorkflowThirdCategoryOptionsByBrandStore({
|
||
config,
|
||
brand: inputs.brand,
|
||
store: inputs.store,
|
||
}),
|
||
[config, inputs.brand, inputs.store]
|
||
);
|
||
const fourthCategoryOptions = useMemo(
|
||
() =>
|
||
getAgentWorkflowFourthCategoryOptionsByBrandStoreThirdCategory({
|
||
config,
|
||
brand: inputs.brand,
|
||
store: inputs.store,
|
||
thirdCategory: inputs.thirdCategory,
|
||
}),
|
||
[config, inputs.brand, inputs.store, inputs.thirdCategory]
|
||
);
|
||
const fifthCategoryOptions = useMemo(
|
||
() =>
|
||
getAgentWorkflowFifthCategoryOptionsByBrandStoreThirdFourth({
|
||
config,
|
||
brand: inputs.brand,
|
||
store: inputs.store,
|
||
thirdCategory: inputs.thirdCategory,
|
||
fourthCategory: inputs.fourthCategory,
|
||
}),
|
||
[config, inputs.brand, inputs.store, inputs.thirdCategory, inputs.fourthCategory]
|
||
);
|
||
const priceBandOptions = useMemo(
|
||
() => getAgentWorkflowPriceBandOptions(config),
|
||
[config]
|
||
);
|
||
|
||
const resolvedConfig = useMemo(() => {
|
||
const source = config || defaultAgentWorkflowUiConfig;
|
||
return {
|
||
steps: [...source.steps]
|
||
.filter((step) => step.enabled)
|
||
.map((step) => ({
|
||
...step,
|
||
options: [...step.options]
|
||
.filter((option) => option.enabled)
|
||
.sort((left, right) => left.sortOrder - right.sortOrder),
|
||
}))
|
||
.filter((step) => step.options.length > 0)
|
||
.sort((left, right) => left.sortOrder - right.sortOrder),
|
||
};
|
||
}, [config]);
|
||
|
||
const summary = useMemo(
|
||
() => buildSelectionSummary({ config: resolvedConfig, selections }),
|
||
[resolvedConfig, selections]
|
||
);
|
||
|
||
const composerContext = useMemo(
|
||
() =>
|
||
buildAgentWorkflowComposerContext({
|
||
config: resolvedConfig,
|
||
inputs,
|
||
materials,
|
||
selections,
|
||
}),
|
||
[inputs, materials, resolvedConfig, selections]
|
||
);
|
||
|
||
const progress = useMemo(
|
||
() => getAgentWorkflowProgress({ config: resolvedConfig, selections }),
|
||
[resolvedConfig, selections]
|
||
);
|
||
|
||
const handleCopyPrompt = async () => {
|
||
if (!composerContext?.promptText) {
|
||
toast.error("当前还没有可复制的 Prompt");
|
||
return;
|
||
}
|
||
try {
|
||
await navigator.clipboard.writeText(composerContext.promptText);
|
||
toast.success("Prompt 已复制到剪贴板");
|
||
} catch {
|
||
toast.error("复制失败，请手动复制");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"flex h-full flex-col bg-white dark:bg-slate-950",
|
||
embedded ? "" : "border-r border-slate-200/60 dark:border-slate-800/60"
|
||
)}
|
||
>
|
||
{/* 头部 */}
|
||
<div className="border-b border-slate-200/60 bg-white/50 p-5 dark:border-slate-800/60 dark:bg-slate-950/50">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div>
|
||
<motion.div
|
||
className="flex items-center gap-2"
|
||
initial={{ opacity: 0, x: -10 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.3 }}
|
||
>
|
||
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-lg shadow-indigo-500/20">
|
||
<Sparkles className="h-4 w-4" />
|
||
</div>
|
||
<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||
风格化工作流
|
||
</h2>
|
||
</motion.div>
|
||
<motion.p
|
||
className="mt-1.5 max-w-md text-xs leading-relaxed text-slate-500 dark:text-slate-400"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.3, delay: 0.1 }}
|
||
>
|
||
先完成工作流设定，下一步再进入生图模式执行
|
||
</motion.p>
|
||
</div>
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.3, delay: 0.15 }}
|
||
>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => {
|
||
if (onReset) {
|
||
onReset();
|
||
return;
|
||
}
|
||
onInputsChange({ primarySku: "", secondarySku: "", brand: "", store: "", officialSecondCategory: "", officialThirdCategory: "", thirdCategory: "", fourthCategory: "", fifthCategory: "", priceBand: "" });
|
||
onMaterialsChange({
|
||
primary: createEmptyAgentWorkflowMaterialSelection(),
|
||
secondary: createEmptyAgentWorkflowMaterialSelection(),
|
||
});
|
||
onSelectionsChange({});
|
||
}}
|
||
className="h-9 gap-1.5 rounded-xl border-slate-200 text-xs text-slate-600 hover:bg-slate-50 hover:text-slate-900"
|
||
>
|
||
<RotateCcw className="h-3.5 w-3.5" />
|
||
清空
|
||
</Button>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* 进度指示器 */}
|
||
<motion.div
|
||
className="mt-4"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.3, delay: 0.2 }}
|
||
>
|
||
<div className="flex items-center justify-between text-[11px] text-slate-500">
|
||
<span>完成进度</span>
|
||
<span className="font-medium text-indigo-600">{progress.completed}/{progress.total}</span>
|
||
</div>
|
||
<div className="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-100">
|
||
<motion.div
|
||
className="h-full rounded-full bg-gradient-to-r from-indigo-500 to-violet-500"
|
||
initial={{ width: 0 }}
|
||
animate={{ width: `${progress.total > 0 ? (progress.completed / progress.total) * 100 : 0}%` }}
|
||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||
/>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
<ScrollArea className="flex-1">
|
||
<div className="space-y-6 p-5">
|
||
{/* 基础配置 */}
|
||
<motion.section
|
||
className="space-y-3"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.3, delay: 0.25 }}
|
||
>
|
||
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-800">
|
||
<span className="flex h-5 w-5 items-center justify-center rounded-md bg-indigo-100 text-[10px] font-bold text-indigo-600">
|
||
1
|
||
</span>
|
||
基础配置
|
||
</h3>
|
||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
|
||
<SearchableSelect
|
||
value={inputs.brand}
|
||
options={brandOptions}
|
||
placeholder={`选择${firstCategoryLabel}`}
|
||
searchPlaceholder={`输入${firstCategoryLabel}名筛选`}
|
||
emptyText={`暂无${firstCategoryLabel}可选`}
|
||
onValueChange={(value) =>
|
||
onInputsChange({
|
||
...inputs,
|
||
brand: value,
|
||
store:
|
||
value.trim().toLowerCase() === inputs.brand.trim().toLowerCase()
|
||
? inputs.store
|
||
: "",
|
||
thirdCategory:
|
||
value.trim().toLowerCase() === inputs.brand.trim().toLowerCase()
|
||
? inputs.thirdCategory
|
||
: "",
|
||
fourthCategory: "",
|
||
fifthCategory: "",
|
||
})
|
||
}
|
||
/>
|
||
<SearchableSelect
|
||
value={inputs.store}
|
||
options={storeOptions}
|
||
placeholder={`选择${secondCategoryLabel}`}
|
||
searchPlaceholder={`输入${secondCategoryLabel}名筛选`}
|
||
emptyText={
|
||
inputs.brand
|
||
? `当前${firstCategoryLabel}下暂无${secondCategoryLabel}可选`
|
||
: `请先选择${firstCategoryLabel}`
|
||
}
|
||
disabled={!inputs.brand || (brandStoreEntries.length > 0 && storeOptions.length === 0)}
|
||
onValueChange={(value) =>
|
||
onInputsChange({
|
||
...inputs,
|
||
store: value,
|
||
thirdCategory:
|
||
value.trim().toLowerCase() === inputs.store.trim().toLowerCase()
|
||
? inputs.thirdCategory
|
||
: "",
|
||
fourthCategory: "",
|
||
fifthCategory: "",
|
||
})
|
||
}
|
||
/>
|
||
<SearchableSelect
|
||
value={inputs.thirdCategory}
|
||
options={thirdCategoryOptions}
|
||
placeholder={`选择${thirdCategoryLabel}`}
|
||
searchPlaceholder={`输入${thirdCategoryLabel}筛选`}
|
||
emptyText={
|
||
inputs.store
|
||
? `当前${secondCategoryLabel}下暂无${thirdCategoryLabel}`
|
||
: `请先选择${secondCategoryLabel}`
|
||
}
|
||
disabled={!inputs.store || thirdCategoryOptions.length === 0}
|
||
onValueChange={(value) =>
|
||
onInputsChange({
|
||
...inputs,
|
||
thirdCategory: value,
|
||
fourthCategory:
|
||
value.trim().toLowerCase() === inputs.thirdCategory.trim().toLowerCase()
|
||
? inputs.fourthCategory
|
||
: "",
|
||
fifthCategory: "",
|
||
})
|
||
}
|
||
/>
|
||
<SearchableSelect
|
||
value={inputs.fourthCategory}
|
||
options={fourthCategoryOptions}
|
||
placeholder={`选择${fourthCategoryLabel}`}
|
||
searchPlaceholder={`输入${fourthCategoryLabel}筛选`}
|
||
emptyText={
|
||
inputs.thirdCategory
|
||
? `当前${thirdCategoryLabel}下暂无${fourthCategoryLabel}`
|
||
: `请先选择${thirdCategoryLabel}`
|
||
}
|
||
disabled={!inputs.thirdCategory || fourthCategoryOptions.length === 0}
|
||
onValueChange={(value) =>
|
||
onInputsChange({
|
||
...inputs,
|
||
fourthCategory: value,
|
||
fifthCategory:
|
||
value.trim().toLowerCase() === inputs.fourthCategory.trim().toLowerCase()
|
||
? inputs.fifthCategory
|
||
: "",
|
||
})
|
||
}
|
||
/>
|
||
<SearchableSelect
|
||
value={inputs.fifthCategory}
|
||
options={fifthCategoryOptions}
|
||
placeholder={`选择${fifthCategoryLabel}`}
|
||
searchPlaceholder={`输入${fifthCategoryLabel}筛选`}
|
||
emptyText={
|
||
inputs.fourthCategory
|
||
? `当前${fourthCategoryLabel}下暂无${fifthCategoryLabel}`
|
||
: `请先选择${fourthCategoryLabel}`
|
||
}
|
||
disabled={!inputs.fourthCategory || fifthCategoryOptions.length === 0}
|
||
onValueChange={(value) => onInputsChange({ ...inputs, fifthCategory: value })}
|
||
/>
|
||
<SearchableSelect
|
||
value={inputs.priceBand}
|
||
options={priceBandOptions}
|
||
placeholder="选择价格带"
|
||
searchPlaceholder="输入价格带筛选"
|
||
emptyText="暂无价格带可选"
|
||
disabled={priceBandOptions.length === 0}
|
||
onValueChange={(value) => onInputsChange({ ...inputs, priceBand: value })}
|
||
/>
|
||
</div>
|
||
</motion.section>
|
||
|
||
{/* 工作流步骤 */}
|
||
{resolvedConfig.steps.length > 0 ? (
|
||
resolvedConfig.steps.map((step, stepIndex) => (
|
||
<motion.section
|
||
key={step.key}
|
||
className="space-y-3"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.3, delay: 0.3 + stepIndex * 0.05 }}
|
||
>
|
||
<h3 className="flex items-center gap-2 text-sm font-semibold text-slate-800">
|
||
<span className="flex h-5 w-5 items-center justify-center rounded-md bg-indigo-100 text-[10px] font-bold text-indigo-600">
|
||
{stepIndex + 2}
|
||
</span>
|
||
{step.title}
|
||
</h3>
|
||
{step.description && (
|
||
<p className="text-xs text-slate-500">{step.description}</p>
|
||
)}
|
||
<div className="grid grid-cols-1 gap-3">
|
||
{step.options.map((option, optionIndex) => (
|
||
<StepCard
|
||
key={option.key}
|
||
option={option}
|
||
step={step}
|
||
selected={selections[step.key] === option.key}
|
||
onClick={() =>
|
||
onSelectionsChange({
|
||
...selections,
|
||
[step.key]: selections[step.key] === option.key ? undefined : option.key,
|
||
})
|
||
}
|
||
index={optionIndex}
|
||
/>
|
||
))}
|
||
</div>
|
||
</motion.section>
|
||
))
|
||
) : (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
className="rounded-2xl border border-dashed border-slate-200 bg-slate-50/50 p-8 text-center text-sm text-slate-500 dark:border-slate-800 dark:bg-slate-900/30"
|
||
>
|
||
当前还没有启用的工作流步骤
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* 摘要区域 */}
|
||
{summary.length > 0 && (
|
||
<motion.section
|
||
className="rounded-2xl border border-slate-200/60 bg-slate-50/50 p-4 dark:border-slate-800/60 dark:bg-slate-900/30"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.3, delay: 0.4 }}
|
||
>
|
||
<h3 className="mb-3 text-sm font-semibold text-slate-800">当前选择</h3>
|
||
<div className="space-y-2">
|
||
{summary.map((item) => (
|
||
<div
|
||
key={`${item.stepKey}-${item.optionKey}`}
|
||
className="flex items-center justify-between rounded-xl bg-white px-3 py-2 text-sm shadow-sm dark:bg-slate-900"
|
||
>
|
||
<span className="text-slate-500">{item.stepTitle}</span>
|
||
<span className="font-medium text-slate-900">{item.optionName}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.section>
|
||
)}
|
||
|
||
{/* Prompt 预览 */}
|
||
<motion.section
|
||
className="space-y-3"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.3, delay: 0.45 }}
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-sm font-semibold text-slate-800">Prompt 预览</h3>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={handleCopyPrompt}
|
||
className="h-8 gap-1.5 text-xs"
|
||
>
|
||
<Copy className="h-3.5 w-3.5" />
|
||
复制
|
||
</Button>
|
||
</div>
|
||
<Textarea
|
||
value={composerContext?.promptText || ""}
|
||
readOnly
|
||
rows={8}
|
||
placeholder="选择工作流后，这里会自动生成结构化 Prompt"
|
||
className="resize-none rounded-xl border-slate-200/60 bg-slate-50 text-xs leading-relaxed dark:border-slate-800/60 dark:bg-slate-900/50"
|
||
/>
|
||
</motion.section>
|
||
|
||
{/* 下一步按钮 */}
|
||
{onNextStep && (
|
||
<motion.div
|
||
className="flex flex-wrap justify-end gap-2 pt-2"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.3, delay: 0.5 }}
|
||
>
|
||
{onSkipStep && (
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={onSkipStep}
|
||
className="h-10 gap-1.5 rounded-xl border-slate-200 text-slate-600"
|
||
>
|
||
跳过选择
|
||
<ArrowRight className="h-4 w-4" />
|
||
</Button>
|
||
)}
|
||
<Button
|
||
type="button"
|
||
onClick={onNextStep}
|
||
disabled={progress.total > 0 && !progress.isComplete}
|
||
className="h-10 gap-1.5 rounded-xl bg-slate-900 px-6 text-white shadow-lg shadow-slate-900/20 transition-all hover:bg-slate-800 hover:shadow-xl hover:shadow-slate-900/30 disabled:opacity-50 dark:bg-indigo-600 dark:hover:bg-indigo-500"
|
||
>
|
||
下一步：选择生图模式
|
||
<ArrowRight className="h-4 w-4" />
|
||
</Button>
|
||
</motion.div>
|
||
)}
|
||
</div>
|
||
</ScrollArea>
|
||
</div>
|
||
);
|
||
}
|