auto-save 2026-05-14 00:42 (+4, ~3)

web/components/nodes/node-shell.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { type ReactNode } from "react"
 import { Handle, Position } from "@xyflow/react"
-import { CheckCircle2, Loader2, AlertCircle } from "lucide-react"
+import { CheckCircle2, Loader2, AlertCircle, Pin } from "lucide-react"
 import { ResizeRight, ResizeBR } from "./resize-handle"
 
 export type NodeKind = "input" | "process" | "ai" | "output"
@@ -17,6 +17,8 @@ interface Props {
   selected?: boolean
   hasTarget?: boolean
   hasSource?: boolean
+  pinned?: boolean          // 钉下 → 锁定位置与尺寸，不可拖动、不显示 resize 把手
+  onTogglePin?: () => void
   children?: ReactNode
 }
 
@@ -44,11 +46,13 @@ export function NodeShell({
   selected,
   hasTarget = true,
   hasSource = true,
+  pinned = false,
+  onTogglePin,
   children,
 }: Props) {
   return (
     <div
-      className={`glass-node ${selected ? "glass-node--selected" : ""} ${status === "running" ? "glass-node--running" : ""}`}
+      className={`glass-node ${selected ? "glass-node--selected" : ""} ${status === "running" ? "glass-node--running" : ""} ${pinned ? "glass-node--pinned" : ""}`}
       data-type={type}
       style={{ width, height: "100%" }}
     >
@@ -62,6 +66,21 @@ export function NodeShell({
            status === "done"    ? <CheckCircle2 className="h-3 w-3" /> :
            status === "failed"  ? <AlertCircle className="h-3 w-3" /> : null}
           <span className={STATUS_DOT[status]} />
+          {onTogglePin && (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onTogglePin() }}
+              onMouseDown={(e) => e.stopPropagation()}
+              title={pinned ? "已钉住 · 点击取消（恢复可拖、可缩放）" : "钉住 · 锁定位置与尺寸"}
+              className={`nodrag inline-flex h-5 w-5 items-center justify-center rounded transition ${
+                pinned
+                  ? "bg-violet-500/85 text-white shadow"
+                  : "text-white/55 hover:bg-white/15 hover:text-white"
+              }`}
+            >
+              <Pin className={`h-3 w-3 ${pinned ? "" : "rotate-45"}`} />
+            </button>
+          )}
         </span>
       </div>
 
@@ -75,8 +94,8 @@ export function NodeShell({
       </div>
 
       {hasSource && <Handle type="source" position={Position.Right} />}
-      <ResizeRight />
-      <ResizeBR />
+      {!pinned && <ResizeRight />}
+      {!pinned && <ResizeBR />}
     </div>
   )
 }