From 5e7809687cead3b458d9c9341d97c5c8c17359a7 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Thu, 14 May 2026 15:35:54 +0800
Subject: [PATCH] fix: improve psd template layer interactions

---
 .../agents/AgentPsdTemplateEditorDialog.tsx   | 124 +++++++++++-------
 1 file changed, 78 insertions(+), 46 deletions(-)

diff --git a/components/agents/AgentPsdTemplateEditorDialog.tsx b/components/agents/AgentPsdTemplateEditorDialog.tsx
index 6f1ce8030..f0adda697 100644
--- a/components/agents/AgentPsdTemplateEditorDialog.tsx
+++ b/components/agents/AgentPsdTemplateEditorDialog.tsx
@@ -258,6 +258,8 @@ const PREVIEW_STAGE_TARGET_WIDTH = 760;
 const PREVIEW_STAGE_TARGET_HEIGHT = 760;
 const MIN_IMAGE_SCALE = 0.4;
 const MAX_IMAGE_SCALE = 3;
+const SELECTED_LAYER_INTERACTION_Z_BOOST = 1;
+const SELECTED_LAYER_CONTROLS_Z_BOOST = 1000;
 const MIN_TEXT_POSITION_OFFSET = -5000;
 const MAX_TEXT_POSITION_OFFSET = 5000;
 const UNASSIGNED_BRAND_LABEL = "未分类";
@@ -2204,7 +2206,7 @@ export function AgentPsdTemplateEditorDialog({
       <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2">
         <div />
         <Button
-          className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
+          className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
           onClick={() => nudgeLayerPositionOffset(selectedLayer.id, 0, -1)}
           type="button"
           variant="outline"
@@ -2213,7 +2215,7 @@ export function AgentPsdTemplateEditorDialog({
         </Button>
         <div />
         <Button
-          className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
+          className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
           onClick={() => nudgeLayerPositionOffset(selectedLayer.id, -1, 0)}
           type="button"
           variant="outline"
@@ -2221,7 +2223,7 @@ export function AgentPsdTemplateEditorDialog({
           ←
         </Button>
         <Button
-          className="h-9 rounded-xl border-white/10 bg-white/[0.04] px-3 text-white/60 hover:bg-white/[0.08] hover:text-white"
+          className="h-9 justify-self-center rounded-xl border-white/10 bg-white/[0.04] px-3 text-white/60 hover:bg-white/[0.08] hover:text-white"
           onClick={() => resetLayerPositionOffset(selectedLayer.id)}
           type="button"
           variant="outline"
@@ -2229,7 +2231,7 @@ export function AgentPsdTemplateEditorDialog({
           归零
         </Button>
         <Button
-          className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
+          className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
           onClick={() => nudgeLayerPositionOffset(selectedLayer.id, 1, 0)}
           type="button"
           variant="outline"
@@ -2238,7 +2240,7 @@ export function AgentPsdTemplateEditorDialog({
         </Button>
         <div />
         <Button
-          className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
+          className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
           onClick={() => nudgeLayerPositionOffset(selectedLayer.id, 0, 1)}
           type="button"
           variant="outline"
@@ -2469,7 +2471,7 @@ export function AgentPsdTemplateEditorDialog({
             <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2">
               <div />
               <Button
-                className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
+                className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
                 onClick={() =>
                   nudgeImagePlacementOffset(selectedImageLayer.id, 0, -1)
                 }
@@ -2480,7 +2482,7 @@ export function AgentPsdTemplateEditorDialog({
               </Button>
               <div />
               <Button
-                className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
+                className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
                 onClick={() =>
                   nudgeImagePlacementOffset(selectedImageLayer.id, -1, 0)
                 }
@@ -2490,7 +2492,7 @@ export function AgentPsdTemplateEditorDialog({
                 ←
               </Button>
               <Button
-                className="h-9 rounded-xl border-white/10 bg-white/[0.04] px-3 text-white/60 hover:bg-white/[0.08] hover:text-white"
+                className="h-9 justify-self-center rounded-xl border-white/10 bg-white/[0.04] px-3 text-white/60 hover:bg-white/[0.08] hover:text-white"
                 onClick={() =>
                   updateImagePlacement(selectedImageLayer.id, (current) => ({
                     ...current,
@@ -2504,7 +2506,7 @@ export function AgentPsdTemplateEditorDialog({
                 归零
               </Button>
               <Button
-                className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
+                className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
                 onClick={() =>
                   nudgeImagePlacementOffset(selectedImageLayer.id, 1, 0)
                 }
@@ -2515,7 +2517,7 @@ export function AgentPsdTemplateEditorDialog({
               </Button>
               <div />
               <Button
-                className="h-9 w-12 rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
+                className="h-9 w-12 justify-self-center rounded-xl border-white/10 bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white"
                 onClick={() =>
                   nudgeImagePlacementOffset(selectedImageLayer.id, 0, 1)
                 }
@@ -4065,9 +4067,17 @@ export function AgentPsdTemplateEditorDialog({
 
                               return (
                                 <div
-                                  className="absolute overflow-hidden"
+                                  className="pointer-events-auto absolute overflow-hidden"
                                   key={layer.id}
+                                  onClick={(event) => {
+                                    event.stopPropagation();
+                                    setSelectedLayerId(layer.id);
+                                  }}
+                                  onPointerDown={(event) =>
+                                    handleLayerDragStart(layer, event)
+                                  }
                                   style={assignedImageContainerStyle}
+                                  title={`${getLayerLabel(layer)}：${layer.layerName}`}
                                 >
                                   <img
                                     alt={layer.layerName}
@@ -4110,11 +4120,6 @@ export function AgentPsdTemplateEditorDialog({
                               );
                             }
 
-                            const isSelected = selectedLayerId === layer.id;
-                            if (isSelected) {
-                              return null;
-                            }
-
                             const value =
                               effectiveTextAssignments[layer.id] ?? "";
                             const resolvedTextColor =
@@ -4134,9 +4139,17 @@ export function AgentPsdTemplateEditorDialog({
                             if (!shouldUseEditedPreview && layer.sourceUrl) {
                               return (
                                 <div
-                                  className="absolute overflow-hidden"
+                                  className="pointer-events-auto absolute overflow-hidden"
                                   key={layer.id}
+                                  onClick={(event) => {
+                                    event.stopPropagation();
+                                    setSelectedLayerId(layer.id);
+                                  }}
+                                  onPointerDown={(event) =>
+                                    handleTextDragStart(layer, event)
+                                  }
                                   style={layerBoxStyle}
+                                  title={`${getLayerLabel(layer)}：${layer.layerName}`}
                                 >
                                   <img
                                     alt={layer.layerName}
@@ -4162,8 +4175,15 @@ export function AgentPsdTemplateEditorDialog({
 
                             return (
                               <div
-                                className="absolute overflow-visible"
+                                className="pointer-events-auto absolute overflow-visible"
                                 key={layer.id}
+                                onClick={(event) => {
+                                  event.stopPropagation();
+                                  setSelectedLayerId(layer.id);
+                                }}
+                                onPointerDown={(event) =>
+                                  handleTextDragStart(layer, event)
+                                }
                                 style={{
                                   left:
                                     layer.x +
@@ -4177,7 +4197,14 @@ export function AgentPsdTemplateEditorDialog({
                                     textFrame.offsetY,
                                   width: textFrame.width,
                                   height: textFrame.height,
+                                  cursor:
+                                    textDragStateRef.current?.layerId ===
+                                    layer.id
+                                      ? "grabbing"
+                                      : "grab",
+                                  touchAction: "none",
                                 }}
+                                title={`${getLayerLabel(layer)}：${layer.layerName}`}
                               >
                                 {renderTextLayerPreviewContent(
                                   layer,
@@ -4203,17 +4230,17 @@ export function AgentPsdTemplateEditorDialog({
                               );
 
                               return (
-                                <button
+                                <div
                                   aria-label={`普通图层 ${layer.layerName}`}
-                                  className="absolute overflow-hidden rounded-lg transition-all"
+                                  className="pointer-events-none absolute overflow-hidden rounded-lg transition-all"
                                   key={`static-layer-frame-${layer.id}`}
-                                  onClick={() => setSelectedLayerId(layer.id)}
-                                  onPointerDown={(event) =>
-                                    handleLayerDragStart(layer, event)
-                                  }
                                   style={{
                                     ...frameStyle,
-                                    zIndex: baseZIndex + (isSelected ? 100 : 0),
+                                    zIndex:
+                                      baseZIndex +
+                                      (isSelected
+                                        ? SELECTED_LAYER_INTERACTION_Z_BOOST
+                                        : 0),
                                     background: isSelected
                                       ? "rgba(255,255,255,0.05)"
                                       : "transparent",
@@ -4221,11 +4248,10 @@ export function AgentPsdTemplateEditorDialog({
                                       layerDragStateRef.current?.layerId ===
                                       layer.id
                                         ? "grabbing"
-                                        : "grab",
+                                      : "grab",
                                     touchAction: "none",
                                   }}
                                   title={`普通图层：${layer.layerName}`}
-                                  type="button"
                                 >
                                   <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}
@@ -4234,7 +4260,7 @@ export function AgentPsdTemplateEditorDialog({
                                     <Move className="h-3 w-3" />
                                     拖动图层
                                   </div>
-                                </button>
+                                </div>
                               );
                             })}
 
@@ -4259,16 +4285,13 @@ export function AgentPsdTemplateEditorDialog({
                             return isSelected && hasAssignedImage ? (
                               <div
                                 aria-label={`${getLayerLabel(layer)} ${layer.layerName}`}
-                                className="absolute overflow-hidden rounded-lg transition-all"
+                                className="pointer-events-none absolute overflow-hidden rounded-lg transition-all"
                                 key={layer.id}
-                                onClick={() => setSelectedLayerId(layer.id)}
-                                onPointerDown={(event) =>
-                                  handleLayerDragStart(layer, event)
-                                }
-                                role="button"
                                 style={{
                                   ...frameStyle,
-                                  zIndex: baseZIndex + 120,
+                                  zIndex:
+                                    baseZIndex +
+                                    SELECTED_LAYER_INTERACTION_Z_BOOST,
                                   background: "rgba(249,115,22,0.08)",
                                   cursor:
                                     layerDragStateRef.current?.layerId ===
@@ -4277,7 +4300,6 @@ export function AgentPsdTemplateEditorDialog({
                                       : "grab",
                                   touchAction: "none",
                                 }}
-                                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 shadow-md backdrop-blur-md">
@@ -4299,7 +4321,11 @@ export function AgentPsdTemplateEditorDialog({
                                 }
                                 style={{
                                   ...frameStyle,
-                                  zIndex: baseZIndex + (isSelected ? 120 : 0),
+                                  zIndex:
+                                    baseZIndex +
+                                    (isSelected
+                                      ? SELECTED_LAYER_INTERACTION_Z_BOOST
+                                      : 0),
                                   background: isSelected
                                     ? "rgba(249,115,22,0.08)"
                                     : "transparent",
@@ -4365,7 +4391,9 @@ export function AgentPsdTemplateEditorDialog({
                                       ) -
                                       44
                                   ),
-                                  zIndex: baseZIndex + 140,
+                                  zIndex:
+                                    baseZIndex +
+                                    SELECTED_LAYER_CONTROLS_Z_BOOST,
                                 }}
                               >
                                 <button
@@ -4451,15 +4479,13 @@ export function AgentPsdTemplateEditorDialog({
                             if (isSelected) {
                               return (
                                 <div
-                                  className="absolute overflow-visible rounded-lg"
+                                  className="pointer-events-none absolute overflow-visible rounded-lg"
                                   key={layer.id}
-                                  onClick={() => setSelectedLayerId(layer.id)}
-                                  onPointerDown={(event) =>
-                                    handleTextDragStart(layer, event)
-                                  }
                                   style={{
                                     ...frameStyle,
-                                    zIndex: baseZIndex + 160,
+                                    zIndex:
+                                      baseZIndex +
+                                      SELECTED_LAYER_INTERACTION_Z_BOOST,
                                     background: "transparent",
                                     cursor:
                                       textDragStateRef.current?.layerId ===
@@ -4523,7 +4549,11 @@ export function AgentPsdTemplateEditorDialog({
                                 }
                                 style={{
                                   ...frameStyle,
-                                  zIndex: baseZIndex + (isSelected ? 160 : 0),
+                                  zIndex:
+                                    baseZIndex +
+                                    (isSelected
+                                      ? SELECTED_LAYER_INTERACTION_Z_BOOST
+                                      : 0),
                                   background: isSelected
                                     ? "rgba(56,189,248,0.05)"
                                     : "transparent",
@@ -4693,8 +4723,10 @@ export function AgentPsdTemplateEditorDialog({
                     </div>
                   ) : selectedImageLayer ? (
                     <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto pr-1">
+                      <div className="sticky top-0 z-20 -mx-1 bg-[#0a0a0a]/95 px-1 pb-3 backdrop-blur-md">
+                        {selectedImageAdjustmentPanel}
+                      </div>
                       {selectedLayerPositionPanel}
-                      {selectedImageAdjustmentPanel}
                       {textLayerQuickColorPanel}
                     </div>
                   ) : selectedTextLayer ? (