'use client' import React from 'react' import { type Area, imgUrl } from './types' // ── 常量 ───────────────────────────────────────────────────────────────────── export const ICON_SIZE = 80 export const CENTER_AXIS_Y = 180 export const OFFSET_Y = 40 // ── SVG 箭头 ────────────────────────────────────────────────────────────────── const ChevronUp = () => ( ) const ChevronDown = () => ( ) // ── AreaNode ────────────────────────────────────────────────────────────────── interface Props { area: Area index: number isHovered: boolean onHover: (id: string | null) => void onEdit: (id: string) => void } export default function AreaNode({ area, index, isHovered, onHover, onEdit }: Props) { const isUp = index % 2 === 0 const boxTop = isUp ? CENTER_AXIS_Y - OFFSET_Y : CENTER_AXIS_Y + OFFSET_Y const thumb = imgUrl(area.thumbnailImage) return ( // 固定高度容器，避免 hover 时触发画布 reflow

onHover(area.id)} onMouseLeave={() => onHover(null)} onClick={() => onEdit(area.id)} > {/* 整体节点包裹（绝对定位，不参与 flex 布局计算）*/}

{/* 引线 */} {/* 图标 */}

{thumb ? (

) : (

NO
IMG

)}

{/* 标签 */}

{isUp ? :

} CODE.{String(index + 1).padStart(2, '0')} {!isUp ? :

}

{area.name}

) }