fix: 工具栏显示在图片外部上方

1. 修改画布容器为 overflow-visible
2. 工具栏定位到图片上方 (-top-12)
3. 提高 z-index 确保不被遮挡

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Your Name 2026-02-01 15:24:11 +08:00
parent 8f1f924421
commit 58b9c1cbd5
2 changed files with 3 additions and 3 deletions

View File

@ -217,7 +217,7 @@ export function CanvasWorkspace() {
<div
ref={containerRef}
className={cn(
"relative w-full h-full overflow-hidden bg-background",
"relative w-full h-full overflow-visible bg-background",
tool === 'pan' && "cursor-grab",
isPanning && "cursor-grabbing"
)}

View File

@ -392,10 +392,10 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
</div>
)}
{/* 选中时显示的顶部工具栏 - 放在图片内部顶部,避免被裁剪 */}
{/* 选中时显示的顶部工具栏 - 显示在图片外部上方 */}
{isSelected && data.src && !isProcessing && (
<div
className="absolute top-2 left-1/2 -translate-x-1/2 flex items-center gap-0.5 bg-white/95 backdrop-blur-sm border border-gray-200 rounded-full shadow-xl px-2 py-1.5 z-50"
className="absolute -top-12 left-1/2 -translate-x-1/2 flex items-center gap-0.5 bg-white border border-gray-200 rounded-full shadow-xl px-3 py-1.5 z-[100]"
style={{
pointerEvents: 'auto',
minWidth: 'max-content',