fix: expose psd text color controls
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-04-27 22:02:36 +08:00
parent 00c4e067bf
commit ce6873f8fe

View File

@ -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">