diff --git a/components/agents/AgentPsdTemplateEditorDialog.tsx b/components/agents/AgentPsdTemplateEditorDialog.tsx
index b22fb35c8..7d4c36bfa 100644
--- a/components/agents/AgentPsdTemplateEditorDialog.tsx
+++ b/components/agents/AgentPsdTemplateEditorDialog.tsx
@@ -821,31 +821,47 @@ function getTextLayerRenderFrame(
};
}
-function getTextLayerContentStyle(
+function renderTextLayerPreviewContent(
layer: AgentPsdTemplateTextLayerSlot,
value: string,
color: string
-): CSSProperties {
- const resolvedLayout = getTextLayerRenderFrame(layer, value);
+) {
+ const resolvedText = getResolvedTextPreview(layer, value);
+ const resolvedLayout = getTextLayerRenderFrame(layer, resolvedText);
- return {
- width: resolvedLayout.width,
- height: resolvedLayout.height,
- fontFamily: buildTextLayerFontFamily(layer),
- fontSize: resolvedLayout.fontSize,
- lineHeight: layer.lineHeight,
- letterSpacing: `${layer.letterSpacing}px`,
- color,
- fontWeight: layer.fontWeight,
- textAlign: layer.textAlign,
- paddingLeft: layer.paddingX,
- paddingRight: layer.paddingX,
- paddingTop: layer.paddingY,
- paddingBottom: layer.paddingY,
- whiteSpace: "pre",
- wordBreak: "keep-all",
- overflowWrap: "normal",
- };
+ return (
+
+ {resolvedLayout.lines.map((line, index) => (
+
+ {line || "\u00a0"}
+
+ ))}
+
+ );
}
function getAssignedImageMaskStyle(
@@ -916,24 +932,6 @@ function hasCustomizedTextLayerAppearance(
);
}
-function getInlineTextEditorStyle(
- layer: AgentPsdTemplateTextLayerSlot,
- preserveSourceAppearance: boolean,
- value: string,
- color: string
-): CSSProperties {
- const baseStyle = getTextLayerContentStyle(layer, value, color);
- return {
- ...baseStyle,
- background: "transparent",
- boxSizing: "border-box",
- overflow: "visible",
- color: preserveSourceAppearance ? "transparent" : color,
- caretColor: color,
- WebkitTextFillColor: preserveSourceAppearance ? "transparent" : color,
- };
-}
-
function getTextLayerNameBadgeClassName() {
return "pointer-events-none absolute left-0 top-0 -translate-y-[calc(100%+6px)] rounded-full bg-black/70 px-2 py-1 text-[11px] whitespace-nowrap text-white shadow-lg backdrop-blur-md";
}
@@ -1059,7 +1057,6 @@ export function AgentPsdTemplateEditorDialog({
const previewViewportRef = useRef(null);
const uploadInputRef = useRef(null);
- const inlineTextEditorRef = useRef(null);
const previousSelectedTemplateRef = useRef(null);
const imageDragStateRef = useRef<{
layerId: string;
@@ -1735,45 +1732,6 @@ export function AgentPsdTemplateEditorDialog({
};
}, [selectedTemplate]);
- useEffect(() => {
- if (!selectedTextLayer) {
- return;
- }
-
- const textarea = inlineTextEditorRef.current;
- if (!textarea) {
- return;
- }
-
- const focusTextarea = () => {
- textarea.focus();
- const valueLength = textarea.value.length;
- try {
- textarea.setSelectionRange(valueLength, valueLength);
- } catch (error) {
- console.warn(
- "[AgentPsdTemplateEditorDialog] setSelectionRange failed:",
- error
- );
- }
- };
-
- if (
- typeof window !== "undefined" &&
- typeof window.requestAnimationFrame === "function"
- ) {
- const frameId = window.requestAnimationFrame(focusTextarea);
- return () => {
- window.cancelAnimationFrame(frameId);
- };
- }
-
- const timeoutId = window.setTimeout(focusTextarea, 0);
- return () => {
- window.clearTimeout(timeoutId);
- };
- }, [selectedTextLayer?.id]);
-
async function handleSlotUpload(
slotId: string,
event: ChangeEvent
@@ -2490,16 +2448,11 @@ export function AgentPsdTemplateEditorDialog({
height: textFrame.height,
}}
>
-
- {value || layer.placeholder || layer.layerName}
-
+ {renderTextLayerPreviewContent(
+ layer,
+ value || layer.placeholder || layer.layerName,
+ resolvedTextColor
+ )}
);
})}
@@ -2673,43 +2626,31 @@ export function AgentPsdTemplateEditorDialog({
src={layer.sourceUrl}
/>
) : null}
-
+ )}
{layer.layerName}
+
+ 请在右侧面板编辑
+
);
}