fix: reorder ai detail generation controls
This commit is contained in:
Your Name
parent
e5ef86f089
commit
f580a43efd
@ -3256,6 +3256,221 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
}));
|
||||
}, [updateSkuReplacementState]);
|
||||
|
||||
const aiDetailWorkbenchPanel = isDetailAiGenerationMethod ? (
|
||||
<div className="rounded-[28px] border border-white/12 bg-white/[0.02] p-4">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Wand2 className="h-4 w-4 text-emerald-300" />
|
||||
AI详情工作台
|
||||
</h3>
|
||||
<p className="mt-1 text-xs text-white/45">
|
||||
复用无限画布中的 AI详情生成链路，直接完成分镜规划和逐屏详情生图。
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-full border px-3 py-1 text-xs",
|
||||
detailGenerationProgress.status === "running"
|
||||
? "border-sky-400/25 bg-sky-500/[0.10] text-sky-100"
|
||||
: detailGenerationProgress.status === "done"
|
||||
? "border-emerald-400/25 bg-emerald-500/[0.10] text-emerald-100"
|
||||
: detailGenerationProgress.status === "error"
|
||||
? "border-rose-400/25 bg-rose-500/[0.10] text-rose-100"
|
||||
: "border-white/10 bg-white/[0.03] text-white/55"
|
||||
)}
|
||||
>
|
||||
{detailGenerationProgress.status === "running"
|
||||
? "生成中"
|
||||
: detailGenerationProgress.status === "done"
|
||||
? "已完成"
|
||||
: detailGenerationProgress.status === "error"
|
||||
? "异常"
|
||||
: "待启动"}
|
||||
</div>
|
||||
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-white/60">
|
||||
经典详情
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-[22px] border border-white/10 bg-black/25 p-4">
|
||||
<div className="mb-3 flex items-center justify-between gap-3">
|
||||
<div className="text-xs font-medium text-white/82">生成进度</div>
|
||||
<div className="text-[11px] text-white/45">
|
||||
{detailGenerationProgress.current}/{detailGenerationProgress.total || 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-2 overflow-hidden rounded-full bg-white/8">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-emerald-400 to-teal-400 transition-all duration-500"
|
||||
style={{
|
||||
width: `${
|
||||
detailGenerationProgress.total > 0
|
||||
? Math.min(
|
||||
100,
|
||||
Math.round(
|
||||
(detailGenerationProgress.current / detailGenerationProgress.total) * 100
|
||||
)
|
||||
)
|
||||
: 0
|
||||
}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 text-[11px] text-white/48">
|
||||
{detailGenerationProgress.stage || "请先补齐核心参数和素材后开始生成"}
|
||||
</div>
|
||||
{detailGenerationValidationIssues.length > 0 ? (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{detailGenerationValidationIssues.map((issue) => (
|
||||
<span
|
||||
key={issue}
|
||||
className="rounded-full border border-amber-400/20 bg-amber-500/[0.10] px-2.5 py-1 text-[11px] text-amber-100"
|
||||
>
|
||||
{issue}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4 xl:grid-cols-[1.25fr_1fr]">
|
||||
<div className="rounded-[22px] border border-white/10 bg-black/25 p-4">
|
||||
<div className="mb-3 text-xs font-medium text-white/82">核心参数</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{([
|
||||
["productSpu", "商品SPU"],
|
||||
["productName", "产品名称"],
|
||||
["targetAudience", "主购买人群 *"],
|
||||
["usageScenario", "需求场景 *"],
|
||||
["coreNeed", "核心需求 *"],
|
||||
["priceBand", "价格带"],
|
||||
["demandType", "需求类型"],
|
||||
["brandTone", "品牌语气"],
|
||||
] as Array<[keyof AgentDetailBriefForm, string]>).map(([key, label]) => (
|
||||
<div key={key} className="space-y-1">
|
||||
<label className="text-[11px] text-white/58">{label}</label>
|
||||
<Input
|
||||
value={detailGenerationBrief[key]}
|
||||
onChange={(event) =>
|
||||
updateDetailGenerationBriefField(key, event.target.value)
|
||||
}
|
||||
placeholder={AGENT_DETAIL_FIELD_EXAMPLES[key]}
|
||||
className="h-10 rounded-[18px] border-white/10 bg-black text-sm text-white placeholder:text-white/22 focus:border-emerald-400/30"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<div className="space-y-1 sm:col-span-2">
|
||||
<label className="text-[11px] text-white/58">核心卖点关键词</label>
|
||||
<Input
|
||||
value={detailGenerationBrief.coreSellingPoint}
|
||||
onChange={(event) =>
|
||||
updateDetailGenerationBriefField("coreSellingPoint", event.target.value)
|
||||
}
|
||||
placeholder={AGENT_DETAIL_FIELD_EXAMPLES.coreSellingPoint}
|
||||
className="h-10 rounded-[18px] border-white/10 bg-black text-sm text-white placeholder:text-white/22 focus:border-emerald-400/30"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1 sm:col-span-2">
|
||||
<label className="text-[11px] text-white/58">竞品对标</label>
|
||||
<Input
|
||||
value={detailGenerationBrief.competitorReference}
|
||||
onChange={(event) =>
|
||||
updateDetailGenerationBriefField("competitorReference", event.target.value)
|
||||
}
|
||||
placeholder={AGENT_DETAIL_FIELD_EXAMPLES.competitorReference}
|
||||
className="h-10 rounded-[18px] border-white/10 bg-black text-sm text-white placeholder:text-white/22 focus:border-emerald-400/30"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1 sm:col-span-2">
|
||||
<label className="text-[11px] text-white/58">用户原话样本</label>
|
||||
<Textarea
|
||||
value={detailGenerationBrief.userVoice}
|
||||
onChange={(event) =>
|
||||
updateDetailGenerationBriefField("userVoice", event.target.value)
|
||||
}
|
||||
placeholder={AGENT_DETAIL_FIELD_EXAMPLES.userVoice}
|
||||
className="min-h-[88px] rounded-[18px] border-white/10 bg-black text-sm text-white placeholder:text-white/22 focus:border-emerald-400/30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[22px] border border-white/10 bg-black/25 p-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="text-xs font-medium text-white/82">素材中心</div>
|
||||
<div className="text-[11px] text-white/45">
|
||||
产品图 {detailGenerationProductCount}/5 · 模特图{" "}
|
||||
{detailGenerationModelReady ? "1/1" : "0/1"} · 搭配图 {detailGenerationBundleCount}/3
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3 xl:grid-cols-3">
|
||||
{AGENT_DETAIL_SLOT_CONFIGS.map((slot, index) => {
|
||||
const attachment = detailGenerationSlots[index];
|
||||
return (
|
||||
<div
|
||||
key={slot.key}
|
||||
className="group relative aspect-square overflow-hidden rounded-[18px] border border-white/10 bg-black/30"
|
||||
>
|
||||
<input
|
||||
ref={(element) => {
|
||||
detailSlotInputRefs.current[index] = element;
|
||||
}}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
void handleDetailGenerationSlotFileChange(index, event);
|
||||
}}
|
||||
/>
|
||||
{attachment ? (
|
||||
<>
|
||||
<img
|
||||
src={buildPreviewImageUrl(attachment.url, 360)}
|
||||
alt={attachment.name || slot.label}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-black/70 px-2 py-1.5 text-[11px] text-white">
|
||||
{slot.label}
|
||||
</div>
|
||||
<div className="absolute left-2 top-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => detailSlotInputRefs.current[index]?.click()}
|
||||
className="rounded-full border border-white/10 bg-black/55 px-2 py-1 text-[10px] text-white"
|
||||
>
|
||||
更换
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateDetailGenerationSlot(index, null)}
|
||||
className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/10 bg-black/55 text-white transition-colors hover:border-white/20"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => detailSlotInputRefs.current[index]?.click()}
|
||||
className="flex h-full w-full flex-col items-center justify-center gap-2 text-white/55 transition-colors hover:text-white/78"
|
||||
>
|
||||
<Upload className="h-5 w-5" />
|
||||
<span className="text-[11px]">{slot.label}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
const attachmentSlotPanel = (
|
||||
<Collapsible
|
||||
open={isAttachmentSlotExpanded}
|
||||
@ -3592,232 +3807,6 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isDetailAiGenerationMethod ? (
|
||||
<div className="rounded-[28px] border border-white/12 bg-white/[0.02] p-4">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<h3 className="flex items-center gap-2 text-sm font-semibold text-white">
|
||||
<Wand2 className="h-4 w-4 text-emerald-300" />
|
||||
AI详情工作台
|
||||
</h3>
|
||||
<p className="mt-1 text-xs text-white/45">
|
||||
复用无限画布中的 AI详情生成链路，直接完成分镜规划和逐屏详情生图。
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-full border px-3 py-1 text-xs",
|
||||
detailGenerationProgress.status === "running"
|
||||
? "border-sky-400/25 bg-sky-500/[0.10] text-sky-100"
|
||||
: detailGenerationProgress.status === "done"
|
||||
? "border-emerald-400/25 bg-emerald-500/[0.10] text-emerald-100"
|
||||
: detailGenerationProgress.status === "error"
|
||||
? "border-rose-400/25 bg-rose-500/[0.10] text-rose-100"
|
||||
: "border-white/10 bg-white/[0.03] text-white/55"
|
||||
)}
|
||||
>
|
||||
{detailGenerationProgress.status === "running"
|
||||
? "生成中"
|
||||
: detailGenerationProgress.status === "done"
|
||||
? "已完成"
|
||||
: detailGenerationProgress.status === "error"
|
||||
? "异常"
|
||||
: "待启动"}
|
||||
</div>
|
||||
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-white/60">
|
||||
经典详情
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-[22px] border border-white/10 bg-black/25 p-4">
|
||||
<div className="mb-3 flex items-center justify-between gap-3">
|
||||
<div className="text-xs font-medium text-white/82">生成进度</div>
|
||||
<div className="text-[11px] text-white/45">
|
||||
{detailGenerationProgress.current}/{detailGenerationProgress.total || 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-2 overflow-hidden rounded-full bg-white/8">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-emerald-400 to-teal-400 transition-all duration-500"
|
||||
style={{
|
||||
width: `${
|
||||
detailGenerationProgress.total > 0
|
||||
? Math.min(
|
||||
100,
|
||||
Math.round(
|
||||
(detailGenerationProgress.current /
|
||||
detailGenerationProgress.total) *
|
||||
100
|
||||
)
|
||||
)
|
||||
: 0
|
||||
}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 text-[11px] text-white/48">
|
||||
{detailGenerationProgress.stage || "请先补齐核心参数和素材后开始生成"}
|
||||
</div>
|
||||
{detailGenerationValidationIssues.length > 0 ? (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{detailGenerationValidationIssues.map((issue) => (
|
||||
<span
|
||||
key={issue}
|
||||
className="rounded-full border border-amber-400/20 bg-amber-500/[0.10] px-2.5 py-1 text-[11px] text-amber-100"
|
||||
>
|
||||
{issue}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-4 xl:grid-cols-[1.25fr_1fr]">
|
||||
<div className="rounded-[22px] border border-white/10 bg-black/25 p-4">
|
||||
<div className="mb-3 text-xs font-medium text-white/82">核心参数</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{([
|
||||
["productSpu", "商品SPU"],
|
||||
["productName", "产品名称"],
|
||||
["targetAudience", "主购买人群 *"],
|
||||
["usageScenario", "需求场景 *"],
|
||||
["coreNeed", "核心需求 *"],
|
||||
["priceBand", "价格带"],
|
||||
["demandType", "需求类型"],
|
||||
["brandTone", "品牌语气"],
|
||||
] as Array<[keyof AgentDetailBriefForm, string]>).map(
|
||||
([key, label]) => (
|
||||
<div key={key} className="space-y-1">
|
||||
<label className="text-[11px] text-white/58">{label}</label>
|
||||
<Input
|
||||
value={detailGenerationBrief[key]}
|
||||
onChange={(event) =>
|
||||
updateDetailGenerationBriefField(key, event.target.value)
|
||||
}
|
||||
placeholder={AGENT_DETAIL_FIELD_EXAMPLES[key]}
|
||||
className="h-10 rounded-[18px] border-white/10 bg-black text-sm text-white placeholder:text-white/22 focus:border-emerald-400/30"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
<div className="space-y-1 sm:col-span-2">
|
||||
<label className="text-[11px] text-white/58">核心卖点关键词</label>
|
||||
<Input
|
||||
value={detailGenerationBrief.coreSellingPoint}
|
||||
onChange={(event) =>
|
||||
updateDetailGenerationBriefField(
|
||||
"coreSellingPoint",
|
||||
event.target.value
|
||||
)
|
||||
}
|
||||
placeholder={AGENT_DETAIL_FIELD_EXAMPLES.coreSellingPoint}
|
||||
className="h-10 rounded-[18px] border-white/10 bg-black text-sm text-white placeholder:text-white/22 focus:border-emerald-400/30"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1 sm:col-span-2">
|
||||
<label className="text-[11px] text-white/58">竞品对标</label>
|
||||
<Input
|
||||
value={detailGenerationBrief.competitorReference}
|
||||
onChange={(event) =>
|
||||
updateDetailGenerationBriefField(
|
||||
"competitorReference",
|
||||
event.target.value
|
||||
)
|
||||
}
|
||||
placeholder={AGENT_DETAIL_FIELD_EXAMPLES.competitorReference}
|
||||
className="h-10 rounded-[18px] border-white/10 bg-black text-sm text-white placeholder:text-white/22 focus:border-emerald-400/30"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1 sm:col-span-2">
|
||||
<label className="text-[11px] text-white/58">用户原话样本</label>
|
||||
<Textarea
|
||||
value={detailGenerationBrief.userVoice}
|
||||
onChange={(event) =>
|
||||
updateDetailGenerationBriefField("userVoice", event.target.value)
|
||||
}
|
||||
placeholder={AGENT_DETAIL_FIELD_EXAMPLES.userVoice}
|
||||
className="min-h-[88px] rounded-[18px] border-white/10 bg-black text-sm text-white placeholder:text-white/22 focus:border-emerald-400/30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[22px] border border-white/10 bg-black/25 p-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="text-xs font-medium text-white/82">素材中心</div>
|
||||
<div className="text-[11px] text-white/45">
|
||||
产品图 {detailGenerationProductCount}/5 · 模特图{" "}
|
||||
{detailGenerationModelReady ? "1/1" : "0/1"} · 搭配图{" "}
|
||||
{detailGenerationBundleCount}/3
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3 xl:grid-cols-3">
|
||||
{AGENT_DETAIL_SLOT_CONFIGS.map((slot, index) => {
|
||||
const attachment = detailGenerationSlots[index];
|
||||
return (
|
||||
<div
|
||||
key={slot.key}
|
||||
className="group relative aspect-square overflow-hidden rounded-[18px] border border-white/10 bg-black/30"
|
||||
>
|
||||
<input
|
||||
ref={(element) => {
|
||||
detailSlotInputRefs.current[index] = element;
|
||||
}}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
void handleDetailGenerationSlotFileChange(index, event);
|
||||
}}
|
||||
/>
|
||||
{attachment ? (
|
||||
<>
|
||||
<img
|
||||
src={buildPreviewImageUrl(attachment.url, 360)}
|
||||
alt={attachment.name || slot.label}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-black/70 px-2 py-1.5 text-[11px] text-white">
|
||||
{slot.label}
|
||||
</div>
|
||||
<div className="absolute left-2 top-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => detailSlotInputRefs.current[index]?.click()}
|
||||
className="rounded-full border border-white/10 bg-black/55 px-2 py-1 text-[10px] text-white"
|
||||
>
|
||||
更换
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateDetailGenerationSlot(index, null)}
|
||||
className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full border border-white/10 bg-black/55 text-white transition-colors hover:border-white/20"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => detailSlotInputRefs.current[index]?.click()}
|
||||
className="flex h-full w-full flex-col items-center justify-center gap-2 text-white/55 transition-colors hover:text-white/78"
|
||||
>
|
||||
<Upload className="h-5 w-5" />
|
||||
<span className="text-[11px]">{slot.label}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{hasAgentUploadSlots && hasMaterialStep && hasSatisfiedSlotRequirement ? (
|
||||
<div className="flex flex-col gap-3 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div className="space-y-1">
|
||||
@ -3886,6 +3875,8 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{aiDetailWorkbenchPanel}
|
||||
|
||||
{isReplacementPreset || isDetailAiGenerationMethod ? (
|
||||
<div className="rounded-[24px] border border-amber-400/20 bg-amber-500/[0.08] px-4 py-3 text-sm text-amber-100/90">
|
||||
{isDetailAiGenerationMethod
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user