From cc01b539bc1c003c676c3de3d183c0afdf5b09c2 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Tue, 31 Mar 2026 18:18:23 +0800
Subject: [PATCH] fix: move psd text helper badges out of content

---
 .../agents/AgentPsdTemplateEditorDialog.tsx   | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/agents/AgentPsdTemplateEditorDialog.tsx b/components/agents/AgentPsdTemplateEditorDialog.tsx
index a1bdcb71d..7409a88a6 100644
--- a/components/agents/AgentPsdTemplateEditorDialog.tsx
+++ b/components/agents/AgentPsdTemplateEditorDialog.tsx
@@ -202,12 +202,22 @@ function getInlineTextEditorStyle(
   return {
     ...baseStyle,
     background: "transparent",
+    boxSizing: "border-box",
+    overflow: "hidden",
     color: preserveSourceAppearance ? "transparent" : layer.textColor,
     caretColor: layer.textColor,
     WebkitTextFillColor: preserveSourceAppearance ? "transparent" : layer.textColor,
   };
 }
 
+function getTextLayerNameBadgeClassName() {
+  return "pointer-events-none absolute left-0 top-0 -translate-y-[calc(100%+6px)] rounded-full bg-black/78 px-2 py-1 text-[11px] whitespace-nowrap text-white shadow-lg";
+}
+
+function getTextLayerHintBadgeClassName() {
+  return "pointer-events-none absolute right-0 top-0 -translate-y-[calc(100%+6px)] rounded-full bg-sky-500/90 px-2 py-1 text-[11px] whitespace-nowrap text-white shadow-lg";
+}
+
 export function AgentPsdTemplateEditorDialog({
   open,
   onOpenChange,
@@ -742,7 +752,7 @@ export function AgentPsdTemplateEditorDialog({
                           return (
                             <div
                               key={layer.id}
-                              className="absolute overflow-hidden rounded-lg"
+                              className="absolute overflow-visible rounded-lg"
                               style={{
                                 ...frameStyle,
                                 zIndex: 40,
@@ -770,7 +780,7 @@ export function AgentPsdTemplateEditorDialog({
                                 className="h-full w-full resize-none border-none bg-transparent outline-none"
                                 style={getInlineTextEditorStyle(layer, preserveSourceAppearance, currentValue)}
                               />
-                              <div className="absolute left-2 top-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white">
+                              <div className={getTextLayerNameBadgeClassName()}>
                                 {layer.layerName}
                               </div>
                             </div>
@@ -783,7 +793,7 @@ export function AgentPsdTemplateEditorDialog({
                             type="button"
                             onClick={() => setSelectedLayerId(layer.id)}
                             onDoubleClick={() => setSelectedLayerId(layer.id)}
-                            className="absolute overflow-hidden rounded-lg transition-all"
+                            className="absolute overflow-visible rounded-lg transition-all"
                             style={{
                               ...frameStyle,
                               zIndex: isSelected ? 40 : 30,
@@ -792,11 +802,11 @@ export function AgentPsdTemplateEditorDialog({
                             aria-label={`${getLayerLabel(layer)} ${layer.layerName}`}
                             title={`${getLayerLabel(layer)}：${layer.layerName}`}
                           >
-                            <div className="absolute left-2 top-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white">
+                            <div className={getTextLayerNameBadgeClassName()}>
                               {layer.layerName}
                             </div>
 
-                            <div className="pointer-events-none absolute bottom-2 right-2 rounded-full bg-sky-500/85 px-2 py-1 text-[11px] text-white">
+                            <div className={getTextLayerHintBadgeClassName()}>
                               点击编辑文字
                             </div>
                           </button>