diff --git a/components/agents/AgentPsdTemplateEditorDialog.tsx b/components/agents/AgentPsdTemplateEditorDialog.tsx index 09742d563..7e02a369c 100644 --- a/components/agents/AgentPsdTemplateEditorDialog.tsx +++ b/components/agents/AgentPsdTemplateEditorDialog.tsx @@ -163,6 +163,44 @@ function renderTemplateSelectContent( ); } +function renderTemplatePickerCardContent( + template: AgentPsdTemplate, + params?: { + showSecondaryCategory?: boolean; + emphasize?: boolean; + } +) { + const showSecondaryCategory = params?.showSecondaryCategory === true; + const emphasize = params?.emphasize === true; + const metaLabel = getTemplateMetaLabel(template, showSecondaryCategory); + + return ( +
+
+ {template.name} +
+
+
+ {template.name} +
+ {metaLabel ? ( +
{metaLabel}
+ ) : null} +
+
+ ); +} + function clampImageScale(value: number) { if (!Number.isFinite(value)) { return 1; @@ -483,11 +521,8 @@ export function AgentPsdTemplateEditorDialog({ const searchParams = new URLSearchParams(); searchParams.set("brand", normalizedBrandName); - if (normalizedTemplateMode) { - searchParams.set("mode", normalizedTemplateMode); - } return `/api/psd-templates?${searchParams.toString()}`; - }, [open, normalizedBrandName, normalizedTemplateMode]); + }, [open, normalizedBrandName]); const { data, isLoading } = useSWR( templateListRequestUrl, fetcher @@ -554,6 +589,14 @@ export function AgentPsdTemplateEditorDialog({ templates: grouped, })); }, [shouldGroupTemplatesBySecondaryCategory, templates]); + const mainModeTemplates = useMemo( + () => templates.filter((template) => template.mode === "main"), + [templates] + ); + const skuModeTemplates = useMemo( + () => templates.filter((template) => template.mode === "sku"), + [templates] + ); const selectedTemplateLayers = useMemo(() => { if (!selectedTemplate || !Array.isArray(selectedTemplate.layers)) { return [] as AgentPsdTemplateLayerSlot[]; @@ -839,6 +882,15 @@ export function AgentPsdTemplateEditorDialog({ const selectedTemplateSelectValue = selectedTemplate?.id; const hasTemplateOptions = templates.length > 0; + useEffect(() => { + if (open) { + return; + } + + setSelectedTemplateId(""); + setSelectedLayerId(""); + }, [open]); + useEffect(() => { if (!open) return; @@ -851,7 +903,7 @@ export function AgentPsdTemplateEditorDialog({ } if (!templates.some((template) => template.id === selectedTemplateId)) { - setSelectedTemplateId(templates[0].id); + setSelectedTemplateId(""); } }, [open, selectedTemplateId, templates]); @@ -1242,8 +1294,8 @@ export function AgentPsdTemplateEditorDialog({
- - {hasTemplateOptions ? ( + + {selectedTemplate && hasTemplateOptions ? ( ) : ( -
- {isLoading - ? "正在加载可用模板..." - : normalizedBrandName - ? `当前品牌“${normalizedBrandName}”下暂无可用模板` - : "请先在工作流中选择品牌后再打开 PSD 模板。"} +
+ {isLoading ? ( + <> + {Array.from({ length: 2 }).map((_, index) => ( +
+ 正在加载主图模式模板... +
+ ))} + + ) : mainModeTemplates.length > 0 ? ( + mainModeTemplates.map((template) => ( + + )) + ) : ( +
+ {normalizedBrandName + ? `当前品牌“${normalizedBrandName}”下暂无主图模式模板` + : "请先在工作流中选择品牌后再打开 PSD 模板。"} +
+ )}
)}
@@ -1704,10 +1787,59 @@ export function AgentPsdTemplateEditorDialog({
) : ( -
- {normalizedBrandName - ? "请选择一个模板后开始直接在模板中编辑。" - : "请先返回工作流区域选择品牌,再打开 PSD 模板。"} +
+
+
+
SKU图模式模板
+
+ {normalizedTemplateMode === "sku" + ? "当前结果属于 SKU 图模式,可直接从这里选择并进入编辑。" + : "这里集中展示当前品牌下的 SKU 图模式模板。"} +
+
+
+ {skuModeTemplates.length} 个模板 +
+
+ + {isLoading ? ( +
+ {Array.from({ length: 4 }).map((_, index) => ( +
+ 正在加载 SKU 图模式模板... +
+ ))} +
+ ) : skuModeTemplates.length > 0 ? ( +
+ {skuModeTemplates.map((template) => ( + + ))} +
+ ) : ( +
+ {normalizedBrandName + ? `当前品牌“${normalizedBrandName}”下暂无 SKU 图模式模板` + : "请先返回工作流区域选择品牌,再打开 PSD 模板。"} +
+ )}
)}