OmniAI/omniai-ds-code-package
3
0
Fork 0
Code Issues Pull Requests 2 Actions 16 Packages Projects Releases Wiki Activity

feat(ecommerce): 电商模板改为从服务端 API 加载

Browse Source 
- 新增 ecommerceTemplateClient，通过应用 API 拉取模板清单（符合 AGENTS.md 数据走 API 规则）
- EcommercePage 接入远程模板，按 categorySlug 映射到场景，补充 mediaType/sourceAssets
- 移除硬编码 popularCommerceScenarioTemplates，改为远程模板为空时回退本地
- 补充 ecommerce-standalone.css 模板条样式
- .gitignore 忽略 ecommerce-template-manifest.* 运行时清单（属 API/OSS 数据，不入库）
This commit is contained in:
Stringadmin
2026-06-18 16:20:33 +08:00
parent a2ccf290e5
commit ba885fd6ff
4 changed files with 361 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/ecommerce/EcommercePage.tsx
+159 -35
View File
@@ -224,6 +224,7 @@ const buildInspirationPrompt = (title: string, meta: string): string => {
};
import { aiGenerationClient } from "../../api/aiGenerationClient";
import { listEcommerceTemplates, type EcommerceTemplateManifestItem } from "../../api/ecommerceTemplateClient";
import { ServerRequestError } from "../../api/serverConnection";
import { waitForTask } from "../../api/taskSubscription";
import { toast } from "../../components/toast/toastStore";
@@ -277,6 +278,13 @@ type CloneTemplateAsset = {
title: string;
prompt: string;
mediaUrl: string;
mediaType?: "image" | "video";
sourceAssets?: Array<{
url: string;
name: string;
ossKey?: string;
mimeType?: string;
}>;
};
interface CommerceScenarioTemplate extends CloneTemplateAsset {
scenario: Exclude<CommerceScenarioKey, "popular">;
@@ -416,6 +424,56 @@ const commerceScenarioOutputMap: Record<Exclude<CommerceScenarioKey, "popular">,
salesVideo: "video",
};
const ecommerceTemplateCategoryMap: Record<string, Exclude<CommerceScenarioKey, "popular">> = {
poster: "poster",
"main-image": "mainImage",
"scene-image": "scene",
"festival-image": "festival",
"model-image": "model",
"background-replace": "background",
retouch: "retouch",
"sales-video": "salesVideo",
};
const getTemplateMediaType = (template: EcommerceTemplateManifestItem): "image" | "video" => {
const extension = template.preview?.extension?.toLowerCase() || template.preview?.url?.split("?")[0].split(".").pop()?.toLowerCase() || "";
return extension.includes("mp4") || extension.includes("webm") || extension.includes("mov") ? "video" : "image";
};
const mapRemoteTemplateToScenarioTemplate = (template: EcommerceTemplateManifestItem): CommerceScenarioTemplate | null => {
const scenario = ecommerceTemplateCategoryMap[String(template.categorySlug || "").trim()];
const mediaUrl = template.preview?.url?.trim();
if (!scenario || !template.id || !mediaUrl) return null;
const title = template.templateName?.trim() || template.templateSlug?.trim() || template.id;
const prompt = template.prompt?.trim() || title;
const sourceAssets = (template.assets || [])
.filter((asset) => typeof asset.url === "string" && asset.url.trim())
.map((asset, index) => {
const url = asset.url!.trim();
const extension = asset.extension?.replace(/^\./, "") || url.split("?")[0].split(".").pop() || "png";
return {
url,
name: asset.fileName?.trim() || `${title}-素材${asset.assetIndex || index + 1}.${extension}`,
ossKey: asset.ossKey,
mimeType: extension.toLowerCase() === "jpg" || extension.toLowerCase() === "jpeg" ? "image/jpeg" : "image/png",
};
});
return {
id: template.id,
scenario,
output: commerceScenarioOutputMap[scenario],
title,
desc: template.category?.trim() || commerceScenarioOptions.find((option) => option.key === scenario)?.desc || "",
badge: template.category?.trim() || commerceScenarioOptions.find((option) => option.key === scenario)?.label || title,
prompt,
mediaUrl,
mediaType: getTemplateMediaType(template),
sourceAssets,
};
};
const defaultCommerceIntentFallback: CommerceDefaultIntent = { kind: "image", scenario: "mainImage" };
const normalizeDefaultCommerceIntent = (value: unknown): CommerceDefaultIntent => {
@@ -795,10 +853,6 @@ const commerceScenarioTemplates: CommerceScenarioTemplate[] = [
mediaUrl: ossAssets.ecommerce.inspiration.nightLightUnboxingDouyin,
},
];
const popularCommerceScenarioTemplates = commerceScenarioOptions
.filter((option): option is { key: Exclude<CommerceScenarioKey, "popular">; label: string; desc: string; icon: ReactNode } => option.key !== "popular")
.map((option) => commerceScenarioTemplates.find((template) => template.scenario === option.key))
.filter((template): template is CommerceScenarioTemplate => Boolean(template));
const cloneSetCountOptions: Array<{
key: CloneSetCountKey;
title: string;
@@ -1181,6 +1235,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
const [isProductUploadDragging, setIsProductUploadDragging] = useState(false);
const [activeCommerceScenario, setActiveCommerceScenario] = useState<CommerceScenarioKey | null>(null);
const [isCommerceScenarioMoreOpen, setIsCommerceScenarioMoreOpen] = useState(false);
const [remoteCommerceScenarioTemplates, setRemoteCommerceScenarioTemplates] = useState<CommerceScenarioTemplate[] | null>(null);
const [cloneOutput, setCloneOutput] = useState<CloneOutputKey>(defaultCloneOutput);
const [isCloneTemplateStripVisible, setIsCloneTemplateStripVisible] = useState(false);
const [videoHistoryVisible, setVideoHistoryVisible] = useState(false);
@@ -1675,6 +1730,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
const [hotStatus, setHotStatus] = useState<DetailStatus>("idle");
const [hotResultUrl, setHotResultUrl] = useState<string | null>(null);
const [hotProgress, setHotProgress] = useState(0);
useEffect(() => {
let cancelled = false;
listEcommerceTemplates()
.then((response) => {
if (cancelled) return;
const templates = response.templates
.map(mapRemoteTemplateToScenarioTemplate)
.filter((template): template is CommerceScenarioTemplate => Boolean(template));
setRemoteCommerceScenarioTemplates(templates.length ? templates : null);
})
.catch(() => {
if (!cancelled) setRemoteCommerceScenarioTemplates(null);
});
return () => {
cancelled = true;
};
}, []);
const productSetRatioOptions = useMemo(
() => getPlatformRatioOptions(productSetPlatform, productSetOutput),
[productSetOutput, productSetPlatform],
@@ -1736,11 +1809,22 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
: commerceScenarioOptions.filter((option) => primaryCommerceScenarioKeys.includes(option.key)),
[isCommerceScenarioMoreOpen],
);
const effectiveCommerceScenarioTemplates = remoteCommerceScenarioTemplates?.length
? remoteCommerceScenarioTemplates
: commerceScenarioTemplates;
const popularCommerceScenarioTemplates = useMemo(
() =>
commerceScenarioOptions
.filter((option): option is { key: Exclude<CommerceScenarioKey, "popular">; label: string; desc: string; icon: ReactNode } => option.key !== "popular")
.map((option) => effectiveCommerceScenarioTemplates.find((template) => template.scenario === option.key))
.filter((template): template is CommerceScenarioTemplate => Boolean(template)),
[effectiveCommerceScenarioTemplates],
);
const activeCommerceScenarioTemplates = activeCommerceScenario === null
? []
: activeCommerceScenario === "popular"
? popularCommerceScenarioTemplates
: commerceScenarioTemplates.filter((template) => template.scenario === activeCommerceScenario);
: effectiveCommerceScenarioTemplates.filter((template) => template.scenario === activeCommerceScenario);
const shouldShowScenarioSettings = activeCommerceScenario !== null && scenarioSettingsKeys.includes(activeCommerceScenario);
useEffect(() => {
templateStripRef.current?.scrollTo({ left: 0, behavior: "auto" });
@@ -5509,7 +5593,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
} else if (composerAssetTab === "recipe") {
content = (
<div className="ecom-command-library-list">
{commerceScenarioTemplates.slice(0, 4).map((template) => (
{effectiveCommerceScenarioTemplates.slice(0, 4).map((template) => (
<button key={template.id} type="button" onClick={() => { handleCloneTemplateCardClick(template); setComposerMenu(null); }}>
<strong>{template.title}</strong>
<span>{template.badge} · {template.desc}</span>
@@ -5755,6 +5839,26 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
setVideoPlanTrigger((value) => value + 1);
}
const showDefaultRoutingGeneratingState = () => {
setComposerMenu(null);
setIsCommandComposerCompact(true);
imageAbortRef.current = { current: false };
lastFailedActionRef.current = null;
setGenerationProgress(2);
setResults([]);
setProductSetResultImages([]);
setPreviewZoom(1);
setPreviewOffset({ x: 0, y: 0 });
previewOffsetRef.current = { x: 0, y: 0 };
setStatus("generating");
};
const resetDefaultRoutingGeneratingState = () => {
setStatus("idle");
setGenerationProgress(0);
setIsCommandComposerCompact(false);
};
const handleCommandGenerate = async () => {
if (cloneOutput === "video") {
handleStartVideoPlan();
@@ -5762,7 +5866,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
}
if (isDefaultCommandRouting) {
if (!canPlanVideo) return;
if ((appUsage?.balanceCents ?? 0) <= 0) {
toast.error("积分不足，请充值后继续");
return;
}
setIsDefaultIntentRouting(true);
showDefaultRoutingGeneratingState();
try {
const intent = await classifyDefaultCommerceIntent({
prompt: requirement,
@@ -5772,14 +5881,20 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
platform,
});
if (intent.kind === "video") {
resetDefaultRoutingGeneratingState();
handleCloneOutputChange("video");
handleStartVideoPlan();
return;
}
if (!canGenerate) {
resetDefaultRoutingGeneratingState();
toast.info("请先上传商品图");
return;
}
handleGenerate(intent);
} catch (error) {
resetDefaultRoutingGeneratingState();
toast.error(error instanceof Error ? error.message : "智能识别失败，请重试");
} finally {
setIsDefaultIntentRouting(false);
}
@@ -5838,36 +5953,41 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
});
};
const addTemplateImageToComposer = async (card: CloneTemplateAsset) => {
if (productImages.length >= maxCloneProductImages) {
toast.info("模板图片已达上限");
return;
}
const addTemplateAssetsToComposer = (card: CloneTemplateAsset) => {
const sourceAssets = card.sourceAssets?.filter((asset) => asset.url.trim()) || [];
if (!sourceAssets.length) return;
try {
const stamp = Date.now();
const uploaded = await aiGenerationClient.uploadAssetByUrl({
sourceUrl: card.mediaUrl,
name: `${card.id}-${stamp}`,
scope: ecommerceOssScopes.productSource,
});
const nextImage: CloneImageItem = {
id: `template-${card.id}-${stamp}`,
src: uploaded.url || card.mediaUrl,
name: card.title,
ossKey: uploaded.ossKey,
};
setProductImages((current) => [...current, nextImage].slice(0, maxCloneProductImages));
void readImageDimensions(nextImage.src)
const stamp = Date.now();
const nextImages: CloneImageItem[] = sourceAssets.map((asset, index) => ({
id: `template-${card.id}-${stamp}-${index}`,
src: asset.url,
name: asset.name || `${card.title}-素材${index + 1}`,
ossKey: asset.ossKey,
mimeType: asset.mimeType,
format: getRemoteImageFormat(asset.mimeType || "", asset.url),
}));
let insertedImages: CloneImageItem[] = [];
setProductImages((current) => {
const userImages = current.filter((image) => !image.id.startsWith("template-"));
const remainingSlots = maxCloneProductImages - userImages.length;
if (remainingSlots <= 0) {
toast.info("模板素材已达上限");
return userImages;
}
insertedImages = nextImages.slice(0, remainingSlots);
return [...userImages, ...insertedImages];
});
insertedImages.forEach((image) => {
void readImageDimensions(image.src)
.then(({ width, height }) => {
setProductImages((current) =>
current.map((item) => (item.id === nextImage.id ? { ...item, width, height } : item)),
current.map((item) => (item.id === image.id ? { ...item, width, height } : item)),
);
})
.catch(() => undefined);
} catch {
toast.error("模板图片导入失败");
}
});
};
const handleCloneTemplateCardClick = (card: CommerceScenarioTemplate) => {
@@ -5875,7 +5995,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
if (card.output !== cloneOutput) handleCloneOutputChange(card.output);
setIsCloneTemplateStripVisible(true);
setComposerMenu(null);
void addTemplateImageToComposer(card);
addTemplateAssetsToComposer(card);
applyComposerPrompt(card.prompt);
};
@@ -6250,9 +6370,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
</button>
</div>
</div>
<span className="ecom-command-scenario-scroll-hint" aria-hidden="true">
{isCommerceScenarioMoreOpen ? "左右滑动查看全部场景" : "点击更多查看全部场景"}
</span>
<div className="clone-ai-input-wrapper ecom-command-composer">
{productImages.length ? (
<div className="ecom-command-asset-popover" aria-label={`已上传素材，${productImages.length}/${maxCloneProductImages}张`}>
@@ -6435,13 +6552,20 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
}}
>
<span className="ecom-command-template-card__media" aria-hidden="true">
<img src={card.mediaUrl} alt="" loading="lazy" />
{card.mediaType === "video" ? (
<video src={card.mediaUrl} muted playsInline loop preload="metadata" />
) : (
<img src={card.mediaUrl} alt="" loading="lazy" />
)}
</span>
<span className="ecom-command-template-card__body">
<span className="ecom-command-template-card__badge">{card.badge}</span>
<strong>{card.title}</strong>
<em>{card.desc}</em>
</span>
<span className="ecom-command-template-card__prompt" aria-hidden="true">
{card.prompt}
</span>
</button>
))}
</section>