4c: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"] 4d: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"] 4e:T672a,import React, { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { Slot } from '@radix-ui/react-slot'; import { contextMenuStyleKeys, getContextMenuCheckState, getContextMenuPosition, getContextMenuState } from '../lib/core'; import type { ContextMenuBaseProps, ContextMenuCheckboxItemBaseProps, ContextMenuItemBaseProps, ContextMenuLabelBaseProps, ContextMenuPosition, ContextMenuRadioGroupBaseProps, ContextMenuRadioItemBaseProps, ContextMenuSubBaseProps, ContextMenuSubTriggerBaseProps, ContextMenuTriggerBaseProps, } from '../lib/core'; import { PortalProvider, usePortalContainer, type PortalContainer } from '../portal'; import styles from './context-menu.module.scss'; interface ContextMenuContextValue { open: boolean; setOpen: (open: boolean) => void; triggerRef: React.RefObject; contentId: string; position: ContextMenuPosition | null; setPosition: (position: ContextMenuPosition) => void; closeAll: () => void; } const ContextMenuContext = createContext(null); function useContextMenuContext(): ContextMenuContextValue { const context = useContext(ContextMenuContext); if (!context) { throw new Error('ContextMenu 子组件必须位于内部。'); } return context; } interface ContextMenuContentContextValue { itemsRef: React.RefObject; close: () => void; } const ContextMenuContentContext = createContext(null); function useContextMenuContentContext(): ContextMenuContentContextValue { const context = useContext(ContextMenuContentContext); if (!context) { throw new Error('ContextMenu 菜单项必须位于或内部。'); } return context; } interface ContextMenuSubContextValue { open: boolean; setOpen: (open: boolean) => void; triggerRef: React.RefObject; } const ContextMenuSubContext = createContext(null); function useContextMenuSubContext(): ContextMenuSubContextValue { const context = useContext(ContextMenuSubContext); if (!context) { throw new Error('ContextMenu 子菜单组件必须位于内部。'); } return context; } interface ContextMenuRadioGroupContextValue { value: string | undefined; setValue: (value: string) => void; } const ContextMenuRadioGroupContext = createContext(null); function useContextMenuRadioGroupContext(): ContextMenuRadioGroupContextValue { const context = useContext(ContextMenuRadioGroupContext); if (!context) { throw new Error('ContextMenuRadioItem 必须位于内部。'); } return context; } function ContextMenuCheckIcon() { return ( ); } function ContextMenuRadioIcon() { return ( ); } function ContextMenuChevronIcon() { return ( ); } export interface ContextMenuProps extends React.HTMLAttributes, ContextMenuBaseProps {} const ContextMenu = React.forwardRef(({ className = '', open, defaultOpen = false, onOpenChange, children, ...props }, ref) => { const [internalOpen, setInternalOpen] = useState(defaultOpen); const isOpen = open !== undefined ? open : internalOpen; const triggerRef = useRef(null); const contentId = useId(); const [position, setPosition] = useState(null); const setOpen = useCallback( (next: boolean) => { if (open === undefined) { setInternalOpen(next); } onOpenChange?.(next); }, [open, onOpenChange], ); const closeAll = useCallback(() => { setOpen(false); }, [setOpen]); return (

{children}

); }); ContextMenu.displayName = 'ContextMenu'; export interface ContextMenuPortalProps { container?: PortalContainer; children?: React.ReactNode; } const ContextMenuPortal = ({ container, children }: ContextMenuPortalProps) => { return {children}; }; ContextMenuPortal.displayName = 'ContextMenuPortal'; export interface ContextMenuTriggerProps extends React.ButtonHTMLAttributes, ContextMenuTriggerBaseProps {} const ContextMenuTrigger = React.forwardRef( ({ className = '', asChild = false, children, onContextMenu, onKeyDown, ...props }, ref) => { const context = useContextMenuContext(); function setRef(element: HTMLElement | null) { context.triggerRef.current = element; if (typeof ref === 'function') { ref(element as HTMLButtonElement | null); } else if (ref) { ref.current = element as HTMLButtonElement | null; } } function handleContextMenu(event: React.MouseEvent) { onContextMenu?.(event); if (event.defaultPrevented) { return; } event.preventDefault(); context.setPosition({ top: event.clientY, left: event.clientX }); context.setOpen(true); } function handleKeyDown(event: React.KeyboardEvent) { onKeyDown?.(event); if (event.defaultPrevented) { return; } if (event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)) { event.preventDefault(); const rect = event.currentTarget.getBoundingClientRect(); context.setPosition({ top: rect.bottom, left: rect.left }); context.setOpen(true); } } const Comp = asChild ? Slot : 'button'; const state = getContextMenuState(context.open); return ( {children} ); }, ); ContextMenuTrigger.displayName = 'ContextMenuTrigger'; export interface ContextMenuContentProps extends React.HTMLAttributes { container?: PortalContainer; } const ContextMenuContent = React.forwardRef(({ className = '', container, children, ...props }, ref) => { const { open, position, setPosition, triggerRef, closeAll, contentId } = useContextMenuContext(); const portalContainer = usePortalContainer(container); const contentRef = useRef(null); const itemsRef = useRef([]); const latestPositionRef = useRef(position); latestPositionRef.current = position; function setRef(element: HTMLDivElement | null) { contentRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } useLayoutEffect(() => { if (!open) { return; } function updatePosition() { const content = contentRef.current; if (!content) { return; } const contentSize = { width: content.offsetWidth, height: content.offsetHeight }; const viewport = { width: window.innerWidth, height: window.innerHeight }; const base = latestPositionRef.current ?? { top: 0, left: 0 }; setPosition(getContextMenuPosition({ x: base.left, y: base.top, contentSize, viewport })); } updatePosition(); window.addEventListener('resize', updatePosition); document.addEventListener('scroll', updatePosition, true); return () => { window.removeEventListener('resize', updatePosition); document.removeEventListener('scroll', updatePosition, true); }; }, [open, setPosition]); useEffect(() => { if (!open) { return; } const items = itemsRef.current; if (items.length === 0) { return; } items.forEach((item) => item.removeAttribute('data-highlighted')); items[0].setAttribute('data-highlighted', 'true'); items[0].focus(); }, [open]); useEffect(() => { if (!open) { return; } function handlePointerDown(event: PointerEvent) { const target = event.target as Node | null; if (!target) { return; } const content = contentRef.current; if (content && content.contains(target)) { return; } closeAll(); } function handleKeyDown(event: KeyboardEvent) { if (event.key === 'Escape') { closeAll(); triggerRef.current?.focus(); } } document.addEventListener('pointerdown', handlePointerDown); document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('pointerdown', handlePointerDown); document.removeEventListener('keydown', handleKeyDown); }; }, [open, closeAll, triggerRef]); function handleKeyDown(event: React.KeyboardEvent) { const items = itemsRef.current.filter((item) => item.getAttribute('data-disabled') !== 'true'); if (items.length === 0) { return; } const currentIndex = items.findIndex((item) => item.getAttribute('data-highlighted') === 'true'); const highlight = (next: number) => { items.forEach((item) => item.removeAttribute('data-highlighted')); items[next].setAttribute('data-highlighted', 'true'); items[next].focus(); }; switch (event.key) { case 'ArrowDown': event.preventDefault(); highlight(currentIndex < 0 ? 0 : (currentIndex + 1) % items.length); break; case 'ArrowUp': event.preventDefault(); highlight(currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length); break; case 'Home': event.preventDefault(); highlight(0); break; case 'End': event.preventDefault(); highlight(items.length - 1); break; case 'Enter': case ' ': event.preventDefault(); (currentIndex >= 0 ? items[currentIndex] : items[0]).click(); break; } } const state = getContextMenuState(open); const classes = [styles[contextMenuStyleKeys.content], className].filter(Boolean).join(' '); const content = ( ); if (!open || !portalContainer) { return null; } return createPortal(content, portalContainer); }); ContextMenuContent.displayName = 'ContextMenuContent'; export interface ContextMenuGroupProps extends React.HTMLAttributes {} const ContextMenuGroup = React.forwardRef(({ className = '', children, ...props }, ref) => { return (

{children}

); }); ContextMenuGroup.displayName = 'ContextMenuGroup'; export interface ContextMenuLabelProps extends React.HTMLAttributes, ContextMenuLabelBaseProps {} const ContextMenuLabel = React.forwardRef(({ className = '', inset = false, children, ...props }, ref) => { const classes = [styles[contextMenuStyleKeys.label], className].filter(Boolean).join(' '); return (

{children}

); }); ContextMenuLabel.displayName = 'ContextMenuLabel'; export interface ContextMenuSeparatorProps extends React.HTMLAttributes {} const ContextMenuSeparator = React.forwardRef(({ className = '', ...props }, ref) => { const classes = [styles[contextMenuStyleKeys.separator], className].filter(Boolean).join(' '); return

; }); ContextMenuSeparator.displayName = 'ContextMenuSeparator'; export interface ContextMenuShortcutProps extends React.HTMLAttributes {} const ContextMenuShortcut = React.forwardRef(({ className = '', children, ...props }, ref) => { const classes = [styles[contextMenuStyleKeys.shortcut], className].filter(Boolean).join(' '); return ( {children} ); }); ContextMenuShortcut.displayName = 'ContextMenuShortcut'; export interface ContextMenuItemProps extends Omit, 'onSelect'>, ContextMenuItemBaseProps {} const ContextMenuItem = React.forwardRef( ({ className = '', inset = false, variant = 'default', disabled = false, onSelect, children, ...props }, ref) => { const { itemsRef, close } = useContextMenuContentContext(); const itemRef = useRef(null); useEffect(() => { const element = itemRef.current; if (!element) { return; } itemsRef.current.push(element); return () => { itemsRef.current = itemsRef.current.filter((item) => item !== element); }; }, [itemsRef]); function setRef(element: HTMLDivElement | null) { itemRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } function handleClick(event: React.MouseEvent) { if (disabled) { return; } onSelect?.(event.nativeEvent); close(); } const classes = [styles[contextMenuStyleKeys.item], className].filter(Boolean).join(' '); return (

{children}

); }, ); ContextMenuItem.displayName = 'ContextMenuItem'; export interface ContextMenuCheckboxItemProps extends React.HTMLAttributes, ContextMenuCheckboxItemBaseProps {} const ContextMenuCheckboxItem = React.forwardRef( ({ className = '', checked, defaultChecked = false, onCheckedChange, disabled = false, children, ...props }, ref) => { const { itemsRef } = useContextMenuContentContext(); const itemRef = useRef(null); const [internalChecked, setInternalChecked] = useState(defaultChecked); const isChecked = checked !== undefined ? checked : internalChecked; useEffect(() => { const element = itemRef.current; if (!element) { return; } itemsRef.current.push(element); return () => { itemsRef.current = itemsRef.current.filter((item) => item !== element); }; }, [itemsRef]); function setRef(element: HTMLDivElement | null) { itemRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } function handleClick() { if (disabled) { return; } const next = !isChecked; if (checked === undefined) { setInternalChecked(next); } onCheckedChange?.(next); } const classes = [styles[contextMenuStyleKeys.checkboxItem], className].filter(Boolean).join(' '); return (

{isChecked && } {children}

); }, ); ContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem'; export interface ContextMenuRadioGroupProps extends Omit, 'defaultValue'>, ContextMenuRadioGroupBaseProps {} const ContextMenuRadioGroup = React.forwardRef(({ className = '', value, defaultValue, onValueChange, children, ...props }, ref) => { const [internalValue, setInternalValue] = useState(defaultValue); const resolvedValue = value !== undefined ? value : internalValue; const setValue = useCallback( (next: string) => { if (value === undefined) { setInternalValue(next); } onValueChange?.(next); }, [value, onValueChange], ); const classes = [styles[contextMenuStyleKeys.radioGroup], className].filter(Boolean).join(' '); return (

{children}

); }); ContextMenuRadioGroup.displayName = 'ContextMenuRadioGroup'; export interface ContextMenuRadioItemProps extends React.HTMLAttributes, ContextMenuRadioItemBaseProps {} const ContextMenuRadioItem = React.forwardRef(({ className = '', value, disabled = false, children, ...props }, ref) => { const { itemsRef } = useContextMenuContentContext(); const { value: groupValue, setValue } = useContextMenuRadioGroupContext(); const itemRef = useRef(null); const isChecked = groupValue === value; useEffect(() => { const element = itemRef.current; if (!element) { return; } itemsRef.current.push(element); return () => { itemsRef.current = itemsRef.current.filter((item) => item !== element); }; }, [itemsRef]); function setRef(element: HTMLDivElement | null) { itemRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } function handleClick() { if (disabled) { return; } setValue(value); } const classes = [styles[contextMenuStyleKeys.radioItem], className].filter(Boolean).join(' '); return (

{isChecked && } {children}

); }); ContextMenuRadioItem.displayName = 'ContextMenuRadioItem'; export interface ContextMenuSubProps extends ContextMenuSubBaseProps { children?: React.ReactNode; } const ContextMenuSub = ({ open, defaultOpen = false, onOpenChange, children }: ContextMenuSubProps) => { const [internalOpen, setInternalOpen] = useState(defaultOpen); const isOpen = open !== undefined ? open : internalOpen; const triggerRef = useRef(null); const setOpen = useCallback( (next: boolean) => { if (open === undefined) { setInternalOpen(next); } onOpenChange?.(next); }, [open, onOpenChange], ); return {children}; }; ContextMenuSub.displayName = 'ContextMenuSub'; export interface ContextMenuSubTriggerProps extends React.HTMLAttributes, ContextMenuSubTriggerBaseProps {} const ContextMenuSubTrigger = React.forwardRef(({ className = '', inset = false, disabled = false, children, ...props }, ref) => { const { itemsRef } = useContextMenuContentContext(); const { open, setOpen, triggerRef } = useContextMenuSubContext(); const itemRef = useRef(null); useEffect(() => { const element = itemRef.current; if (!element) { return; } itemsRef.current.push(element); return () => { itemsRef.current = itemsRef.current.filter((item) => item !== element); }; }, [itemsRef]); function setRef(element: HTMLDivElement | null) { itemRef.current = element; triggerRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } function handleMouseEnter() { if (disabled) { return; } setOpen(true); } function handleClick() { if (disabled) { return; } setOpen(!open); } function handleKeyDown(event: React.KeyboardEvent) { if (disabled) { return; } if (event.key === 'ArrowRight' || event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setOpen(true); } } const state = getContextMenuState(open); const classes = [styles[contextMenuStyleKeys.subTrigger], className].filter(Boolean).join(' '); return (

{children}

); }); ContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger'; export interface ContextMenuSubContentProps extends React.HTMLAttributes { container?: PortalContainer; } const ContextMenuSubContent = React.forwardRef(({ className = '', container, children, ...props }, ref) => { const { open, setOpen, triggerRef } = useContextMenuSubContext(); const portalContainer = usePortalContainer(container); const [position, setPosition] = useState(null); const contentRef = useRef(null); const itemsRef = useRef([]); function setRef(element: HTMLDivElement | null) { contentRef.current = element; if (typeof ref === 'function') { ref(element); } else if (ref) { ref.current = element; } } useLayoutEffect(() => { if (!open) { return; } function updatePosition() { const trigger = triggerRef.current; const content = contentRef.current; if (!trigger || !content) { return; } const triggerRect = trigger.getBoundingClientRect(); const contentSize = { width: content.offsetWidth, height: content.offsetHeight }; const viewport = { width: window.innerWidth, height: window.innerHeight }; setPosition(getContextMenuPosition({ x: triggerRect.right, y: triggerRect.top, contentSize, viewport })); } updatePosition(); window.addEventListener('resize', updatePosition); document.addEventListener('scroll', updatePosition, true); return () => { window.removeEventListener('resize', updatePosition); document.removeEventListener('scroll', updatePosition, true); }; }, [open, triggerRef]); useEffect(() => { if (!open) { return; } function handlePointerDown(event: PointerEvent) { const target = event.target as Node | null; if (!target) { return; } const content = contentRef.current; const trigger = triggerRef.current; if (content && content.contains(target)) { return; } if (trigger && trigger.contains(target)) { return; } setOpen(false); } document.addEventListener('pointerdown', handlePointerDown); return () => document.removeEventListener('pointerdown', handlePointerDown); }, [open, triggerRef, setOpen]); function handleKeyDown(event: React.KeyboardEvent) { const items = itemsRef.current.filter((item) => item.getAttribute('data-disabled') !== 'true'); if (event.key === 'Escape' || event.key === 'ArrowLeft') { event.preventDefault(); setOpen(false); triggerRef.current?.focus(); return; } if (items.length === 0) { return; } const currentIndex = items.findIndex((item) => item.getAttribute('data-highlighted') === 'true'); const highlight = (next: number) => { items.forEach((item) => item.removeAttribute('data-highlighted')); items[next].setAttribute('data-highlighted', 'true'); items[next].focus(); }; switch (event.key) { case 'ArrowDown': event.preventDefault(); highlight(currentIndex < 0 ? 0 : (currentIndex + 1) % items.length); break; case 'ArrowUp': event.preventDefault(); highlight(currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length); break; case 'Enter': case ' ': event.preventDefault(); (currentIndex >= 0 ? items[currentIndex] : items[0]).click(); break; } } const state = getContextMenuState(open); const classes = [styles[contextMenuStyleKeys.subContent], className].filter(Boolean).join(' '); const content = ( setOpen(false) }}> ); if (!open || !portalContainer) { return null; } return createPortal(content, portalContainer); }); ContextMenuSubContent.displayName = 'ContextMenuSubContent'; export { ContextMenu, ContextMenuPortal, ContextMenuTrigger, ContextMenuContent, ContextMenuGroup, ContextMenuLabel, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, }; export default ContextMenu; 4f:T14ff,@use '../../../styles/variables/colors' as *; // 根容器 .root { display: inline-flex; } // 触发器（默认无样式，接收右键事件） .trigger { display: inline-flex; } // 弹出内容面板 .content { position: fixed; z-index: $z-dropdown; min-width: 8rem; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); overflow-x: hidden; overflow-y: auto; border-radius: $radius-md; border: 1px solid $border; background-color: $popover; color: $popover-foreground; padding: $spacing-1; box-shadow: $shadow-md; outline: none; 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); } } // 子菜单弹出面板 .subContent { position: fixed; z-index: $z-dropdown; min-width: 8rem; overflow: hidden; border-radius: $radius-md; border: 1px solid $border; background-color: $popover; color: $popover-foreground; padding: $spacing-1; box-shadow: $shadow-lg; outline: none; transition: opacity $transition-fast, visibility $transition-fast, transform $transition-fast; &[data-state='closed'] { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-0.25rem); } &[data-state='open'] { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, 0); } } // 分组容器（占位，无视觉样式） .group { display: block; } // 菜单项 .item { position: relative; display: flex; align-items: center; gap: $spacing-2; border-radius: $radius-sm; padding: $spacing-1_5 $spacing-2; font-size: $text-sm; line-height: $leading-normal; color: $popover-foreground; outline: none; cursor: default; user-select: none; &[data-highlighted='true'] { background-color: $accent; color: $accent-foreground; } &[data-inset='true'] { padding-left: $spacing-8; } &[data-variant='destructive'] { color: $destructive; &[data-highlighted='true'] { background-color: color-mix(in srgb, $destructive 10%, transparent); color: $destructive; } } &[data-disabled='true'] { pointer-events: none; opacity: 0.5; } & > svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; color: $muted-foreground; } &[data-variant='destructive'] > svg { color: $destructive; } } // 复选框菜单项 .checkboxItem { position: relative; display: flex; align-items: center; gap: $spacing-2; border-radius: $radius-sm; padding: $spacing-1_5 $spacing-2 $spacing-1_5 $spacing-8; font-size: $text-sm; line-height: $leading-normal; color: $popover-foreground; outline: none; cursor: default; user-select: none; &[data-highlighted='true'] { background-color: $accent; color: $accent-foreground; } &[data-disabled='true'] { pointer-events: none; opacity: 0.5; } & > svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; color: $muted-foreground; } } // 单选组容器 .radioGroup { display: block; } // 单选菜单项 .radioItem { position: relative; display: flex; align-items: center; gap: $spacing-2; border-radius: $radius-sm; padding: $spacing-1_5 $spacing-2 $spacing-1_5 $spacing-8; font-size: $text-sm; line-height: $leading-normal; color: $popover-foreground; outline: none; cursor: default; user-select: none; &[data-highlighted='true'] { background-color: $accent; color: $accent-foreground; } &[data-disabled='true'] { pointer-events: none; opacity: 0.5; } & > svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; color: $muted-foreground; } } // 勾选/单选指示器（绝对定位在左侧） .indicator { position: absolute; left: $spacing-2; display: inline-flex; width: 0.875rem; height: 0.875rem; align-items: center; justify-content: center; color: currentcolor; .checkIcon { width: 1rem; height: 1rem; } .radioIcon { width: 0.5rem; height: 0.5rem; fill: currentColor; } } // 标签 .label { padding: $spacing-1_5 $spacing-2; font-size: $text-sm; font-weight: $font-medium; color: $foreground; &[data-inset='true'] { padding-left: $spacing-8; } } // 分隔线 .separator { margin: $spacing-1 (-$spacing-1); height: 1px; background-color: $border; } // 快捷键文本 .shortcut { margin-left: auto; font-size: $text-xs; letter-spacing: 0.1em; color: $muted-foreground; } // 子菜单触发器 .subTrigger { position: relative; display: flex; align-items: center; gap: $spacing-2; border-radius: $radius-sm; padding: $spacing-1_5 $spacing-2; font-size: $text-sm; line-height: $leading-normal; color: $popover-foreground; outline: none; cursor: default; user-select: none; &[data-highlighted='true'], &[data-state='open'] { background-color: $accent; color: $accent-foreground; } &[data-inset='true'] { padding-left: $spacing-8; } &[data-disabled='true'] { pointer-events: none; opacity: 0.5; } & > svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; color: $muted-foreground; } } // 子菜单箭头 .chevron { margin-left: auto; width: 1rem; height: 1rem; [dir='rtl'] & { transform: rotate(180deg); } } 4b:["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/portal","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/context-menu/context-menu.tsx","content":"$4e","type":"registry:ui","target":"components/ui/context-menu/context-menu.tsx"},{"path":"packages/styles/scss/components/context-menu.module.scss","content":"$4f","type":"registry:file","target":"components/ui/context-menu/context-menu.module.scss"},{"path":"packages/react/src/components/context-menu/index.ts","content":"export {\n\tContextMenu,\n\tContextMenuPortal,\n\tContextMenuTrigger,\n\tContextMenuContent,\n\tContextMenuGroup,\n\tContextMenuLabel,\n\tContextMenuItem,\n\tContextMenuCheckboxItem,\n\tContextMenuRadioGroup,\n\tContextMenuRadioItem,\n\tContextMenuSeparator,\n\tContextMenuShortcut,\n\tContextMenuSub,\n\tContextMenuSubTrigger,\n\tContextMenuSubContent,\n\ttype ContextMenuProps,\n\ttype ContextMenuPortalProps,\n\ttype ContextMenuTriggerProps,\n\ttype ContextMenuContentProps,\n\ttype ContextMenuGroupProps,\n\ttype ContextMenuLabelProps,\n\ttype ContextMenuItemProps,\n\ttype ContextMenuCheckboxItemProps,\n\ttype ContextMenuRadioGroupProps,\n\ttype ContextMenuRadioItemProps,\n\ttype ContextMenuSeparatorProps,\n\ttype ContextMenuShortcutProps,\n\ttype ContextMenuSubProps,\n\ttype ContextMenuSubTriggerProps,\n\ttype ContextMenuSubContentProps,\n} from './context-menu';\n","type":"registry:ui","target":"components/ui/context-menu/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]