fix: expose psd text color controls
This commit is contained in:
parent
00c4e067bf
commit
ce6873f8fe
@ -2140,6 +2140,81 @@ export function AgentPsdTemplateEditorDialog({
|
||||
) : null}
|
||||
</div>
|
||||
) : null;
|
||||
const textLayerQuickColorPanel =
|
||||
editableTextLayers.length > 0 ? (
|
||||
<div className="space-y-3 rounded-2xl border border-white/10 bg-white/[0.03] p-4 shadow-inner">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 font-semibold text-sm text-white">
|
||||
<Type className="h-4 w-4 text-emerald-300" />
|
||||
<span>文字颜色快捷编辑</span>
|
||||
</div>
|
||||
<p className="mt-1 text-[11px] leading-5 text-white/45">
|
||||
这里会显示当前模板里所有可编辑文字,直接改色;点击文字名称可进入位置微调。
|
||||
</p>
|
||||
</div>
|
||||
<span className="shrink-0 rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[11px] text-white/50">
|
||||
{editableTextLayers.length} 个文字
|
||||
</span>
|
||||
</div>
|
||||
<div className="max-h-[240px] space-y-2 overflow-y-auto pr-1">
|
||||
{editableTextLayers.map((layer) => {
|
||||
const currentColor = getResolvedTextLayerColor(
|
||||
layer,
|
||||
effectiveTextColorAssignments[layer.id] || layer.textColor
|
||||
);
|
||||
const previewText = getResolvedTextPreview(
|
||||
layer,
|
||||
effectiveTextAssignments[layer.id]
|
||||
);
|
||||
const isActive = selectedLayerId === layer.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`grid grid-cols-[minmax(0,1fr)_44px_auto] items-center gap-2 rounded-xl border px-3 py-2.5 transition-all ${
|
||||
isActive
|
||||
? "border-emerald-500/45 bg-emerald-500/10"
|
||||
: "border-white/[0.08] bg-black/15 hover:border-white/15 hover:bg-white/[0.03]"
|
||||
}`}
|
||||
key={`quick-text-color-${layer.id}`}
|
||||
>
|
||||
<button
|
||||
className="min-w-0 text-left"
|
||||
onClick={() => setSelectedLayerId(layer.id)}
|
||||
title="选中后可编辑文字位置"
|
||||
type="button"
|
||||
>
|
||||
<div className="truncate font-medium text-[12px] text-white/85">
|
||||
{layer.layerName || layer.placeholder || "文字图层"}
|
||||
</div>
|
||||
<div className="mt-0.5 truncate text-[11px] text-white/38">
|
||||
{previewText}
|
||||
</div>
|
||||
</button>
|
||||
<input
|
||||
aria-label={`${layer.layerName || layer.placeholder || "文字图层"}颜色`}
|
||||
className="h-9 w-10 cursor-pointer rounded-lg border border-white/15 bg-transparent p-1"
|
||||
onChange={(event) =>
|
||||
updateTextColorAssignment(layer.id, event.target.value)
|
||||
}
|
||||
type="color"
|
||||
value={currentColor}
|
||||
/>
|
||||
<button
|
||||
className="rounded-lg px-2 py-1 text-[11px] text-white/45 transition-colors hover:bg-white/[0.06] hover:text-white/80"
|
||||
onClick={() =>
|
||||
updateTextColorAssignment(layer.id, layer.textColor)
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
原色
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
const fontFaceCss = useMemo(
|
||||
() => buildPreviewFontFaces(selectedTemplate),
|
||||
[selectedTemplate]
|
||||
@ -3864,8 +3939,9 @@ export function AgentPsdTemplateEditorDialog({
|
||||
</Button>
|
||||
</div>
|
||||
) : selectedImageLayer ? (
|
||||
<div className="flex min-h-0 flex-1 flex-col">
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-3">
|
||||
{selectedImageAdjustmentPanel}
|
||||
{textLayerQuickColorPanel}
|
||||
</div>
|
||||
) : selectedTextLayer ? (
|
||||
<div className="flex min-h-0 flex-1 flex-col rounded-2xl border border-white/10 bg-white/[0.02] p-4 shadow-inner xl:p-5">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user