auto-save 2026-05-14 02:02 (+3, ~5)

web/components/nodes/hover-preview.tsx

@@ -3,7 +3,7 @@ import { X } from "lucide-react"
 
 /**
  * 视觉类节点统一大预览：
- * - **在 ReactFlow 节点 DOM 内**作为 absolute 元素，贴节点卡片上边缘
+ * - **在 ReactFlow 节点 DOM 内**作为 absolute 元素，底边贴当前缩略图上方边缘
  * - 跟随 ReactFlow 画布 pan/zoom 一起变化（属于"无限画布"的一部分）
  * - 媒体按"自然像素分辨率"渲染，不做 max 尺寸限制
  * - 不 pinned 时：pointer-events-none，依赖调用方传入 visible
@@ -20,6 +20,7 @@ interface Props {
   borderClass?: string
   visible?: boolean
   anchorX?: number
+  anchorY?: number
   pinned?: boolean
   onClose?: () => void
 }
@@ -30,6 +31,7 @@ export function HoverPreview({
   borderClass = "border-violet-300/55",
   visible = false,
   anchorX,
+  anchorY,
   pinned = false,
   onClose,
 }: Props) {
@@ -41,9 +43,10 @@ export function HoverPreview({
     <div
       className={`absolute transition-all duration-150 z-[120] ${visibilityCls}`}
       style={{
-        bottom: "calc(100% + 8px)",
+        top: typeof anchorY === "number" ? `${anchorY - 8}px` : undefined,
+        bottom: typeof anchorY === "number" ? undefined : "calc(100% + 8px)",
         left: typeof anchorX === "number" ? `${anchorX}px` : "50%",
-        transform: `translateX(-50%) scale(${shown ? 1 : 0.96})`,
+        transform: `${typeof anchorY === "number" ? "translate(-50%, -100%)" : "translateX(-50%)"} scale(${shown ? 1 : 0.96})`,
         transformOrigin: "bottom center",
       }}
     >