auto-save 2026-05-14 01:00 (+2, ~2)

web/components/nodes/node-shell.tsx

@@ -1,9 +1,14 @@
 "use client"
-import { type ReactNode } from "react"
+import { type ReactNode, useEffect, useRef } from "react"
 import { Handle, Position } from "@xyflow/react"
 import { CheckCircle2, Loader2, AlertCircle, Pin } from "lucide-react"
 import { ResizeRight, ResizeBR } from "./resize-handle"
 
+// 节点正文 zoom 范围：基准 320px (= 1)，到 640px 时放大到 ~1.6
+const BASE_WIDTH = 320
+const MIN_ZOOM = 1
+const MAX_ZOOM = 1.6
+
 export type NodeKind = "input" | "process" | "ai" | "output"
 export type NodeStatus = "pending" | "running" | "done" | "failed"
 
@@ -50,8 +55,24 @@ export function NodeShell({
   onTogglePin,
   children,
 }: Props) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const bodyRef = useRef<HTMLDivElement>(null)
+  // 卡片宽度变化 → 给 body 设 zoom，让内部文字 / 按钮 / 间距按比例放大
+  useEffect(() => {
+    const root = rootRef.current
+    const body = bodyRef.current
+    if (!root || !body) return
+    const ro = new ResizeObserver(() => {
+      const w = root.clientWidth
+      const zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, w / BASE_WIDTH))
+      body.style.zoom = String(zoom)
+    })
+    ro.observe(root)
+    return () => ro.disconnect()
+  }, [])
   return (
     <div
+      ref={rootRef}
       className={`glass-node ${selected ? "glass-node--selected" : ""} ${status === "running" ? "glass-node--running" : ""} ${pinned ? "glass-node--pinned" : ""}`}
       data-type={type}
       style={{ width, height: "100%" }}
@@ -84,7 +105,7 @@ export function NodeShell({
         </span>
       </div>
 
-      <div className="glass-node__body">
+      <div ref={bodyRef} className="glass-node__body">
         {subtitle && (
           <div className="text-[11px] mb-2 glass-node__kbd uppercase tracking-widest">
             {subtitle} · {STATUS_LABEL[status]}