fix: refine PSD template editor interactions
This commit is contained in:
Your Name
parent
0e95d9ec29
commit
0464306cc0
@ -1768,32 +1768,35 @@ export function AgentPsdTemplateEditorDialog({
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.psd-preview-viewport::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.psd-preview-viewport::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.psd-preview-viewport::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 5px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.psd-preview-viewport::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background-color: rgba(16, 185, 129, 0.5);
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<Dialog onOpenChange={onOpenChange} open={open}>
|
||||
<DialogContent
|
||||
className="flex h-[96vh] w-[96vw] max-w-[1700px] flex-col overflow-hidden rounded-[24px] border border-white/10 bg-[#0a0a0a] p-0 text-white shadow-[0_40px_100px_rgba(0,0,0,0.8)]"
|
||||
className="flex h-[96vh] w-[96vw] max-w-[1700px] flex-col overflow-hidden rounded-[24px] border border-white/12 bg-[#0a0a0a] p-0 text-white shadow-[0_40px_100px_rgba(0,0,0,0.8)]"
|
||||
hideCloseButton
|
||||
overlayClassName="bg-black/80 backdrop-blur-md"
|
||||
>
|
||||
{fontFaceCss ? <style>{fontFaceCss}</style> : null}
|
||||
|
||||
{/* Top Header Bar */}
|
||||
<div className="flex h-16 shrink-0 items-center justify-between border-white/10 border-b bg-[#0a0a0a] px-6">
|
||||
<div className="flex h-16 shrink-0 items-center justify-between border-white/12 border-b bg-[#0a0a0a] px-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/20 text-emerald-400">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
@ -1842,7 +1845,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
</div>
|
||||
|
||||
<div className="grid min-h-0 flex-1 grid-cols-1 overflow-hidden xl:grid-cols-[320px_minmax(0,1fr)_380px]">
|
||||
<div className="min-h-0 border-white/10 border-b bg-[#0a0a0a] p-5 xl:border-r xl:border-b-0">
|
||||
<div className="min-h-0 border-white/12 border-b bg-[#0a0a0a] p-5 xl:border-r xl:border-b-0">
|
||||
<ScrollArea className="h-full pr-4">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
@ -1861,14 +1864,14 @@ export function AgentPsdTemplateEditorDialog({
|
||||
主图模式模板
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 font-medium text-white/70 text-xs">
|
||||
<div className="shrink-0 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 font-medium text-white/70 text-xs">
|
||||
{mainModeTemplates.length} 个模板
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedCategorySummaryText ? (
|
||||
<div className="text-white/45 text-xs">
|
||||
<div className="rounded-lg border border-white/10 bg-white/[0.02] px-3 py-2 text-white/50 text-xs shadow-inner">
|
||||
当前按品类“{selectedCategorySummaryText}
|
||||
”筛选模板，同时保留“适合所有”的模板。
|
||||
</div>
|
||||
@ -2019,7 +2022,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
|
||||
{selectedTemplate ? (
|
||||
<>
|
||||
<div className="mx-auto w-full max-w-[220px] overflow-hidden rounded-2xl border border-white/10 bg-white/5">
|
||||
<div className="mx-auto w-full max-w-[220px] overflow-hidden rounded-2xl border border-white/10 bg-white/5 shadow-inner">
|
||||
<div
|
||||
style={{
|
||||
aspectRatio: `${Math.max(1, selectedTemplate.width)} / ${Math.max(1, selectedTemplate.height)}`,
|
||||
@ -2047,7 +2050,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
</Button>
|
||||
|
||||
{sourceImageUrl ? null : (
|
||||
<div className="rounded-2xl border border-white/12 border-dashed bg-white/[0.03] px-3.5 py-3 text-white/60 text-xs leading-5">
|
||||
<div className="rounded-xl border border-white/10 border-dashed bg-white/[0.02] px-4 py-3 text-white/50 text-xs leading-relaxed shadow-inner">
|
||||
当前未从生图结果带入图片。请先在下方图片图层中点击“上传替换图片”，再开始套用
|
||||
PSD 模板。
|
||||
</div>
|
||||
@ -2073,9 +2076,9 @@ export function AgentPsdTemplateEditorDialog({
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-0 flex-col border-white/10 border-b bg-[#0a0a0a] p-6 xl:border-r xl:border-b-0">
|
||||
<div className="flex min-h-0 flex-col border-white/12 border-b bg-[#0a0a0a] p-6 xl:border-r xl:border-b-0">
|
||||
<div
|
||||
className="psd-preview-viewport relative flex min-h-0 flex-1 items-center justify-center overflow-auto rounded-[20px] border border-white/[0.08] bg-[#141416] p-4 shadow-[inset_0_2px_20px_rgba(0,0,0,0.4)]"
|
||||
className="psd-preview-viewport relative flex min-h-0 flex-1 items-center justify-center overflow-auto rounded-[28px] border border-white/[0.08] bg-[#141416] p-4 shadow-[inset_0_2px_20px_rgba(0,0,0,0.4)]"
|
||||
ref={previewViewportRef}
|
||||
>
|
||||
{selectedTemplate ? (
|
||||
@ -2272,10 +2275,10 @@ export function AgentPsdTemplateEditorDialog({
|
||||
tabIndex={0}
|
||||
title={`${getLayerLabel(layer)}：${layer.layerName}`}
|
||||
>
|
||||
<div className="absolute top-2 left-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white">
|
||||
<div className="absolute top-2 left-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white shadow-md backdrop-blur-md">
|
||||
{layer.layerName}
|
||||
</div>
|
||||
<div className="pointer-events-none absolute right-2 bottom-2 flex items-center gap-1 rounded-full bg-orange-500/85 px-2 py-1 text-[11px] text-white">
|
||||
<div className="pointer-events-none absolute right-2 bottom-2 flex items-center gap-1 rounded-full bg-orange-500/90 px-2 py-1 text-[11px] text-white shadow-md backdrop-blur-md">
|
||||
<Move className="h-3 w-3" />
|
||||
拖动调整
|
||||
</div>
|
||||
@ -2296,12 +2299,12 @@ export function AgentPsdTemplateEditorDialog({
|
||||
title={`${getLayerLabel(layer)}：${layer.layerName}`}
|
||||
type="button"
|
||||
>
|
||||
<div className="absolute top-2 left-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white">
|
||||
<div className="absolute top-2 left-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white shadow-md backdrop-blur-md">
|
||||
{layer.layerName}
|
||||
</div>
|
||||
|
||||
{hasAssignedImage ? null : (
|
||||
<div className="pointer-events-none absolute right-2 bottom-2 rounded-full bg-orange-500/85 px-2 py-1 text-[11px] text-white">
|
||||
<div className="pointer-events-none absolute right-2 bottom-2 rounded-full bg-orange-500/90 px-2 py-1 text-[11px] text-white shadow-md backdrop-blur-md">
|
||||
点击替换图片
|
||||
</div>
|
||||
)}
|
||||
@ -2393,9 +2396,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
style={{
|
||||
...frameStyle,
|
||||
zIndex: 40,
|
||||
background: preserveSourceAppearance
|
||||
? "transparent"
|
||||
: "rgba(56,189,248,0.08)",
|
||||
background: "transparent",
|
||||
}}
|
||||
>
|
||||
{preserveSourceAppearance && layer.sourceUrl ? (
|
||||
@ -2493,7 +2494,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
: "当前未选择品牌，这里展示全部品牌下的 SKU 图模式模板。"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 font-medium text-white/70 text-xs">
|
||||
<div className="shrink-0 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 font-medium text-white/70 text-xs">
|
||||
{skuModeTemplates.length} 个模板
|
||||
</div>
|
||||
</div>
|
||||
@ -2545,7 +2546,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-0 flex-col bg-[#0a0a0a] p-5 shadow-[-10px_0_20px_rgba(0,0,0,0.4)] xl:p-6">
|
||||
<div className="flex min-h-0 flex-col bg-[#0a0a0a] p-5 shadow-[-20px_0_40px_rgba(0,0,0,0.5)] xl:p-6">
|
||||
{renderedResultUrl ? (
|
||||
<div className="mb-4 flex items-center justify-end gap-3">
|
||||
<div className="inline-flex rounded-[14px] bg-white/5 p-1 shadow-inner ring-1 ring-white/10">
|
||||
@ -2720,7 +2721,7 @@ export function AgentPsdTemplateEditorDialog({
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full border border-white/10 bg-white/5 shadow-inner">
|
||||
<Pointer className="h-6 w-6 text-white/50" />
|
||||
</div>
|
||||
请在左侧预览区点击图层进行编辑
|
||||
请在中间预览区点击图层进行编辑
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user