4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T2845,import React, { createContext, useCallback, useContext, useLayoutEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { Slot } from '@radix-ui/react-slot'; import { getNavigationMenuActiveState, getNavigationMenuState, navigationMenuStyleKeys } from '../lib/core'; import type { NavigationMenuBaseProps, NavigationMenuItemBaseProps, NavigationMenuLinkBaseProps } from '../lib/core'; import styles from './navigation-menu.module.scss'; interface NavigationMenuContextValue { activeValue: string | undefined; setActiveValue: (value: string | undefined) => void; viewportEnabled: boolean; viewportRef: React.RefObject; setIndicatorRect: (rect: { left: number; width: number } | null) => void; indicatorRect: { left: number; width: number } | null; } const NavigationMenuContext = createContext(null); function useNavigationMenuContext(): NavigationMenuContextValue { const context = useContext(NavigationMenuContext); if (!context) { throw new Error('NavigationMenu 子组件必须位于内部。'); } return context; } interface NavigationMenuItemContextValue { value: string; isActive: boolean; triggerRef: React.RefObject; } const NavigationMenuItemContext = createContext(null); function useNavigationMenuItemContext(): NavigationMenuItemContextValue { const context = useContext(NavigationMenuItemContext); if (!context) { throw new Error('NavigationMenu 触发器/内容必须位于内部。'); } return context; } function NavigationMenuChevronIcon() { return ( ); } export interface NavigationMenuProps extends Omit, 'defaultValue'>, NavigationMenuBaseProps {} const NavigationMenu = React.forwardRef(({ className = '', viewport = true, value, defaultValue, onValueChange, children, ...props }, ref) => { const [internalValue, setInternalValue] = useState(defaultValue); const activeValue = value !== undefined ? value : internalValue; const viewportRef = useRef(null); const [indicatorRect, setIndicatorRect] = useState<{ left: number; width: number } | null>(null); const setActiveValue = useCallback( (next: string | undefined) => { if (value === undefined) { setInternalValue(next); } onValueChange?.(next); }, [value, onValueChange], ); return ( ); }); NavigationMenu.displayName = 'NavigationMenu'; export interface NavigationMenuListProps extends React.HTMLAttributes {} const NavigationMenuList = React.forwardRef(({ className = '', children, onKeyDown, ...props }, ref) => { function handleKeyDown(event: React.KeyboardEvent) { onKeyDown?.(event); const isNext = event.key === 'ArrowRight'; const isPrev = event.key === 'ArrowLeft'; const isHome = event.key === 'Home'; const isEnd = event.key === 'End'; if (!isNext && !isPrev && !isHome && !isEnd) { return; } const triggers = Array.from(event.currentTarget.querySelectorAll('button')).filter((trigger) => !trigger.disabled); if (triggers.length === 0) { return; } const currentIndex = triggers.indexOf(document.activeElement as HTMLButtonElement); let nextIndex: number; if (isHome) { nextIndex = 0; } else if (isEnd) { nextIndex = triggers.length - 1; } else { const direction = isNext ? 1 : -1; nextIndex = (currentIndex + direction + triggers.length) % triggers.length; } triggers[nextIndex]?.focus(); event.preventDefault(); } return (

{children} ); }); NavigationMenuList.displayName = 'NavigationMenuList'; export interface NavigationMenuItemProps extends React.HTMLAttributes, NavigationMenuItemBaseProps {} const NavigationMenuItem = React.forwardRef(({ className = '', value, children, ...props }, ref) => { const { activeValue } = useNavigationMenuContext(); const triggerRef = useRef(null); const isActive = activeValue === value; return (

{children}

); }); NavigationMenuItem.displayName = 'NavigationMenuItem'; export interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes {} const NavigationMenuTrigger = React.forwardRef(({ className = '', children, onClick, ...props }, ref) => { const { activeValue, setActiveValue, setIndicatorRect } = useNavigationMenuContext(); const { value, isActive, triggerRef } = useNavigationMenuItemContext(); function setRef(element: HTMLButtonElement | null) { triggerRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } useLayoutEffect(() => { if (!isActive || !triggerRef.current) { return; } const root = triggerRef.current.closest('nav'); const rootRect = root?.getBoundingClientRect(); const triggerRect = triggerRef.current.getBoundingClientRect(); if (!rootRect) { return; } setIndicatorRect({ left: triggerRect.left - rootRect.left, width: triggerRect.width }); }, [isActive, setIndicatorRect, activeValue, triggerRef]); function handleClick(event: React.MouseEvent) { onClick?.(event); setActiveValue(isActive ? undefined : value); } function handleMouseEnter() { setActiveValue(value); } const state = getNavigationMenuState(isActive); return ( ); }); NavigationMenuTrigger.displayName = 'NavigationMenuTrigger'; export interface NavigationMenuContentProps extends React.HTMLAttributes {} const NavigationMenuContent = React.forwardRef(({ className = '', children, ...props }, ref) => { const { viewportEnabled, viewportRef } = useNavigationMenuContext(); const { isActive } = useNavigationMenuItemContext(); const state = getNavigationMenuState(isActive); const classes = [styles[navigationMenuStyleKeys.content], className].filter(Boolean).join(' '); const content = (

{children}

); if (!viewportEnabled) { return isActive ? content : null; } if (typeof document === 'undefined' || !viewportRef.current) { return null; } return isActive ? createPortal(content, viewportRef.current) : null; }); NavigationMenuContent.displayName = 'NavigationMenuContent'; export interface NavigationMenuViewportProps extends React.HTMLAttributes {} const NavigationMenuViewport = React.forwardRef(({ className = '', children, ...props }, ref) => { const { activeValue, viewportRef } = useNavigationMenuContext(); const state = getNavigationMenuState(activeValue !== undefined); const classes = [styles[navigationMenuStyleKeys.viewport], className].filter(Boolean).join(' '); return (

{children}

); }); NavigationMenuViewport.displayName = 'NavigationMenuViewport'; export interface NavigationMenuIndicatorProps extends React.HTMLAttributes { style?: React.CSSProperties; } const NavigationMenuIndicator = React.forwardRef(({ className = '', style, ...props }, ref) => { const { indicatorRect } = useNavigationMenuContext(); const visible = indicatorRect !== null; const state = visible ? 'visible' : 'hidden'; const classes = [styles[navigationMenuStyleKeys.indicator], className].filter(Boolean).join(' '); return (

); }); NavigationMenuIndicator.displayName = 'NavigationMenuIndicator'; export interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes, NavigationMenuLinkBaseProps {} const NavigationMenuLink = React.forwardRef(({ className = '', active = false, asChild = false, children, ...props }, ref) => { const Comp = asChild ? Slot : 'a'; const state = getNavigationMenuActiveState(active); return ( {children} ); }); NavigationMenuLink.displayName = 'NavigationMenuLink'; export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuViewport, NavigationMenuIndicator, NavigationMenuLink, }; export default NavigationMenu; 50:Tf0a,@use '../../../styles/variables/colors' as *; // 根容器 .root { position: relative; display: flex; max-width: max-content; flex: 1; align-items: center; justify-content: center; } // 列表容器 .list { display: flex; flex: 1; align-items: center; justify-content: center; gap: $spacing-1; list-style: none; margin: 0; padding: 0; } // 单个菜单项 .item { position: relative; } // 触发器按钮 .trigger { display: inline-flex; height: 2.25rem; width: max-content; align-items: center; justify-content: center; gap: $spacing-1; border-radius: $radius; background-color: $background; padding: $spacing-2 $spacing-4; font-size: $text-sm; font-weight: $font-medium; color: $foreground; outline: none; transition: background-color $transition-fast, color $transition-fast; cursor: pointer; &:hover { background-color: $accent; color: $accent-foreground; } &[data-state='open'] { background-color: color-mix(in srgb, $accent 50%, transparent); color: $accent-foreground; } &[data-disabled='true'] { pointer-events: none; opacity: 0.5; } } // 触发器箭头 .chevron { position: relative; top: 1px; width: 0.75rem; height: 0.75rem; transition: transform $transition-slow; &[data-state='open'] { transform: rotate(180deg); } } // 内容面板（默认：相对菜单项下方展开的下拉面板） .content { position: absolute; top: 100%; left: 0; z-index: $z-dropdown; min-width: 12rem; margin-top: $spacing-1_5; border-radius: $radius; border: 1px solid $border; background-color: $popover; color: $popover-foreground; padding: $spacing-2; box-shadow: $shadow-md; outline: none; &[data-state='closed'] { opacity: 0; visibility: hidden; pointer-events: none; } &[data-state='open'] { opacity: 1; visibility: visible; pointer-events: auto; } // 集中式视口模式下内容为正常流布局 &[data-viewport='true'] { position: static; width: 100%; min-width: 0; margin-top: 0; border: none; padding: 0; box-shadow: none; } } // 集中式视口 .viewport { position: absolute; top: 100%; left: 0; z-index: $z-dropdown; display: flex; justify-content: center; margin-top: $spacing-1_5; overflow: hidden; border-radius: $radius; border: 1px solid $border; background-color: $popover; color: $popover-foreground; box-shadow: $shadow-md; transition: opacity $transition-fast, visibility $transition-fast, transform $transition-fast; &[data-state='closed'] { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.95); } &[data-state='open'] { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); } } // 视口内部容器 .viewportInner { position: relative; width: 100%; } // 指示器 .indicator { position: absolute; top: 100%; z-index: 1; display: flex; height: $spacing-1_5; align-items: flex-end; justify-content: center; overflow: hidden; transition: opacity $transition-fast, transform $transition-fast; &[data-state='hidden'] { opacity: 0; } &[data-state='visible'] { opacity: 1; } } // 指示器箭头 .indicatorArrow { position: relative; top: 60%; width: $spacing-2; height: $spacing-2; transform: rotate(45deg); border-radius: $radius-xs 0 0 0; background-color: $border; box-shadow: $shadow-md; } // 链接 .link { display: flex; flex-direction: column; gap: $spacing-1; border-radius: $radius-sm; padding: $spacing-2; font-size: $text-sm; color: $popover-foreground; text-decoration: none; outline: none; transition: background-color $transition-fast, color $transition-fast; &:hover { background-color: $accent; color: $accent-foreground; } &[data-active='true'] { background-color: color-mix(in srgb, $accent 50%, transparent); color: $accent-foreground; } } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot"}]]}]}],["$","li","react-dom",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-dom","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-dom"}]]}]}]]}],["$","$L4d",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/styles"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"packages/react/src/components/navigation-menu/navigation-menu.tsx","content":"$4f","type":"registry:ui","target":"components/ui/navigation-menu/navigation-menu.tsx"},{"path":"packages/styles/scss/components/navigation-menu.module.scss","content":"$50","type":"registry:file","target":"components/ui/navigation-menu/navigation-menu.module.scss"},{"path":"packages/react/src/components/navigation-menu/index.ts","content":"export {\n\tNavigationMenu,\n\tNavigationMenuList,\n\tNavigationMenuItem,\n\tNavigationMenuTrigger,\n\tNavigationMenuContent,\n\tNavigationMenuViewport,\n\tNavigationMenuIndicator,\n\tNavigationMenuLink,\n\ttype NavigationMenuProps,\n\ttype NavigationMenuListProps,\n\ttype NavigationMenuItemProps,\n\ttype NavigationMenuTriggerProps,\n\ttype NavigationMenuContentProps,\n\ttype NavigationMenuViewportProps,\n\ttype NavigationMenuIndicatorProps,\n\ttype NavigationMenuLinkProps,\n} from './navigation-menu';\n","type":"registry:ui","target":"components/ui/navigation-menu/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]