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:T6995,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 { dropdownMenuStyleKeys, getDropdownMenuCheckState, getDropdownMenuPosition, getDropdownMenuState } from '../lib/core'; import type { DropdownMenuBaseProps, DropdownMenuCheckboxItemBaseProps, DropdownMenuContentBaseProps, DropdownMenuItemBaseProps, DropdownMenuLabelBaseProps, DropdownMenuPosition, DropdownMenuRadioGroupBaseProps, DropdownMenuRadioItemBaseProps, DropdownMenuSubBaseProps, DropdownMenuSubTriggerBaseProps, DropdownMenuTriggerBaseProps, } from '../lib/core'; import { PortalProvider, usePortalContainer, type PortalContainer } from '../portal'; import styles from './dropdown-menu.module.scss'; interface DropdownMenuContextValue { open: boolean; setOpen: (open: boolean) => void; triggerRef: React.RefObject; contentId: string; closeAll: () => void; } const DropdownMenuContext = createContext(null); function useDropdownMenuContext(): DropdownMenuContextValue { const context = useContext(DropdownMenuContext); if (!context) { throw new Error('DropdownMenu 子组件必须位于内部。'); } return context; } interface DropdownMenuContentContextValue { itemsRef: React.RefObject; close: () => void; } const DropdownMenuContentContext = createContext(null); function useDropdownMenuContentContext(): DropdownMenuContentContextValue { const context = useContext(DropdownMenuContentContext); if (!context) { throw new Error('DropdownMenu 菜单项必须位于或内部。'); } return context; } interface DropdownMenuSubContextValue { open: boolean; setOpen: (open: boolean) => void; triggerRef: React.RefObject; } const DropdownMenuSubContext = createContext(null); function useDropdownMenuSubContext(): DropdownMenuSubContextValue { const context = useContext(DropdownMenuSubContext); if (!context) { throw new Error('DropdownMenu 子菜单组件必须位于内部。'); } return context; } interface DropdownMenuRadioGroupContextValue { value: string | undefined; setValue: (value: string) => void; } const DropdownMenuRadioGroupContext = createContext(null); function useDropdownMenuRadioGroupContext(): DropdownMenuRadioGroupContextValue { const context = useContext(DropdownMenuRadioGroupContext); if (!context) { throw new Error('DropdownMenuRadioItem 必须位于内部。'); } return context; } function DropdownMenuCheckIcon() { return ( ); } function DropdownMenuRadioIcon() { return ( ); } function DropdownMenuChevronIcon() { return ( ); } export interface DropdownMenuProps extends React.HTMLAttributes, DropdownMenuBaseProps {} const DropdownMenu = 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 setOpen = useCallback( (next: boolean) => { if (open === undefined) { setInternalOpen(next); } onOpenChange?.(next); }, [open, onOpenChange], ); const closeAll = useCallback(() => { setOpen(false); }, [setOpen]); return (

{children}

); }); DropdownMenu.displayName = 'DropdownMenu'; export interface DropdownMenuPortalProps { container?: PortalContainer; children?: React.ReactNode; } const DropdownMenuPortal = ({ container, children }: DropdownMenuPortalProps) => { return {children}; }; DropdownMenuPortal.displayName = 'DropdownMenuPortal'; export interface DropdownMenuTriggerProps extends React.ButtonHTMLAttributes, DropdownMenuTriggerBaseProps {} const DropdownMenuTrigger = React.forwardRef(({ className = '', asChild = false, children, onClick, onKeyDown, ...props }, ref) => { const context = useDropdownMenuContext(); 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 handleClick(event: React.MouseEvent) { onClick?.(event); context.setOpen(!context.open); } function handleKeyDown(event: React.KeyboardEvent) { onKeyDown?.(event); if (event.defaultPrevented) { return; } if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); context.setOpen(true); } } const Comp = asChild ? Slot : 'button'; const state = getDropdownMenuState(context.open); return ( {children} ); }); DropdownMenuTrigger.displayName = 'DropdownMenuTrigger'; export interface DropdownMenuContentProps extends React.HTMLAttributes, DropdownMenuContentBaseProps { container?: PortalContainer; } const DropdownMenuContent = React.forwardRef( ({ className = '', side = 'bottom', align = 'center', sideOffset = 4, alignOffset = 0, container, children, ...props }, ref) => { const { open, triggerRef, contentId, closeAll } = useDropdownMenuContext(); 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(getDropdownMenuPosition({ triggerRect, contentSize, side, align, sideOffset, alignOffset, viewport })); } updatePosition(); window.addEventListener('resize', updatePosition); document.addEventListener('scroll', updatePosition, true); return () => { window.removeEventListener('resize', updatePosition); document.removeEventListener('scroll', updatePosition, true); }; }, [open, side, align, sideOffset, alignOffset, triggerRef]); 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; const trigger = triggerRef.current; if (content && content.contains(target)) { return; } if (trigger && trigger.contains(target)) { return; } closeAll(); } document.addEventListener('pointerdown', handlePointerDown); return () => document.removeEventListener('pointerdown', handlePointerDown); }, [open, triggerRef, closeAll]); function handleKeyDown(event: React.KeyboardEvent) { const items = itemsRef.current.filter((item) => item.getAttribute('data-disabled') !== 'true'); if (items.length === 0) { if (event.key === 'Escape') { event.preventDefault(); closeAll(); } 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; case 'Escape': event.preventDefault(); closeAll(); triggerRef.current?.focus(); break; } } const state = getDropdownMenuState(open); const classes = [styles[dropdownMenuStyleKeys.content], className].filter(Boolean).join(' '); const content = ( ); if (!open || !portalContainer) { return null; } return createPortal(content, portalContainer); }, ); DropdownMenuContent.displayName = 'DropdownMenuContent'; export interface DropdownMenuGroupProps extends React.HTMLAttributes {} const DropdownMenuGroup = React.forwardRef(({ className = '', children, ...props }, ref) => { return (

{children}

); }); DropdownMenuGroup.displayName = 'DropdownMenuGroup'; export interface DropdownMenuLabelProps extends React.HTMLAttributes, DropdownMenuLabelBaseProps {} const DropdownMenuLabel = React.forwardRef(({ className = '', inset = false, children, ...props }, ref) => { const classes = [styles[dropdownMenuStyleKeys.label], className].filter(Boolean).join(' '); return (

{children}

); }); DropdownMenuLabel.displayName = 'DropdownMenuLabel'; export interface DropdownMenuSeparatorProps extends React.HTMLAttributes {} const DropdownMenuSeparator = React.forwardRef(({ className = '', ...props }, ref) => { const classes = [styles[dropdownMenuStyleKeys.separator], className].filter(Boolean).join(' '); return

; }); DropdownMenuSeparator.displayName = 'DropdownMenuSeparator'; export interface DropdownMenuShortcutProps extends React.HTMLAttributes {} const DropdownMenuShortcut = React.forwardRef(({ className = '', children, ...props }, ref) => { const classes = [styles[dropdownMenuStyleKeys.shortcut], className].filter(Boolean).join(' '); return ( {children} ); }); DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'; export interface DropdownMenuItemProps extends Omit, 'onSelect'>, DropdownMenuItemBaseProps {} const DropdownMenuItem = React.forwardRef( ({ className = '', inset = false, variant = 'default', disabled = false, onSelect, children, ...props }, ref) => { const { itemsRef, close } = useDropdownMenuContentContext(); 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[dropdownMenuStyleKeys.item], className].filter(Boolean).join(' '); return (

{children}

); }, ); DropdownMenuItem.displayName = 'DropdownMenuItem'; export interface DropdownMenuCheckboxItemProps extends Omit, 'onSelect'>, DropdownMenuCheckboxItemBaseProps {} const DropdownMenuCheckboxItem = React.forwardRef( ({ className = '', checked, defaultChecked = false, onCheckedChange, disabled = false, onSelect, children, ...props }, ref) => { const { itemsRef } = useDropdownMenuContentContext(); 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(event: React.MouseEvent) { if (disabled) { return; } const next = !isChecked; if (checked === undefined) { setInternalChecked(next); } onCheckedChange?.(next); onSelect?.(event.nativeEvent); } const classes = [styles[dropdownMenuStyleKeys.checkboxItem], className].filter(Boolean).join(' '); return (

{isChecked && } {children}

); }, ); DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem'; export interface DropdownMenuRadioGroupProps extends Omit, 'defaultValue'>, DropdownMenuRadioGroupBaseProps {} const DropdownMenuRadioGroup = 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[dropdownMenuStyleKeys.radioGroup], className].filter(Boolean).join(' '); return (

{children}

); }); DropdownMenuRadioGroup.displayName = 'DropdownMenuRadioGroup'; export interface DropdownMenuRadioItemProps extends Omit, 'onSelect'>, DropdownMenuRadioItemBaseProps {} const DropdownMenuRadioItem = React.forwardRef(({ className = '', value, disabled = false, onSelect, children, ...props }, ref) => { const { itemsRef } = useDropdownMenuContentContext(); const { value: groupValue, setValue } = useDropdownMenuRadioGroupContext(); 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(event: React.MouseEvent) { if (disabled) { return; } setValue(value); onSelect?.(event.nativeEvent); } const classes = [styles[dropdownMenuStyleKeys.radioItem], className].filter(Boolean).join(' '); return (

{isChecked && } {children}

); }); DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem'; export interface DropdownMenuSubProps extends DropdownMenuSubBaseProps { children?: React.ReactNode; } const DropdownMenuSub = ({ open, defaultOpen = false, onOpenChange, children }: DropdownMenuSubProps) => { 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}; }; DropdownMenuSub.displayName = 'DropdownMenuSub'; export interface DropdownMenuSubTriggerProps extends React.HTMLAttributes, DropdownMenuSubTriggerBaseProps {} const DropdownMenuSubTrigger = React.forwardRef(({ className = '', inset = false, disabled = false, children, ...props }, ref) => { const { itemsRef } = useDropdownMenuContentContext(); const { open, setOpen, triggerRef } = useDropdownMenuSubContext(); 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 = getDropdownMenuState(open); const classes = [styles[dropdownMenuStyleKeys.subTrigger], className].filter(Boolean).join(' '); return (

{children}

); }); DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger'; export interface DropdownMenuSubContentProps extends React.HTMLAttributes, DropdownMenuContentBaseProps { container?: PortalContainer; } const DropdownMenuSubContent = React.forwardRef( ({ className = '', side = 'right', align = 'start', sideOffset = 0, alignOffset = 0, container, children, ...props }, ref) => { const { open, setOpen, triggerRef } = useDropdownMenuSubContext(); 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(getDropdownMenuPosition({ triggerRect, contentSize, side, align, sideOffset, alignOffset, viewport })); } updatePosition(); window.addEventListener('resize', updatePosition); document.addEventListener('scroll', updatePosition, true); return () => { window.removeEventListener('resize', updatePosition); document.removeEventListener('scroll', updatePosition, true); }; }, [open, side, align, sideOffset, alignOffset, 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 = getDropdownMenuState(open); const classes = [styles[dropdownMenuStyleKeys.subContent], className].filter(Boolean).join(' '); const content = ( setOpen(false) }}> ); if (!open || !portalContainer) { return null; } return createPortal(content, portalContainer); }, ); DropdownMenuSubContent.displayName = 'DropdownMenuSubContent'; export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, }; export default DropdownMenu; 4f:T1660,@use '../../../styles/variables/colors' as *; // 根容器 .root { display: inline-flex; } // 触发器（默认无样式按钮） .trigger { display: inline-flex; align-items: center; border: none; background: transparent; padding: 0; color: inherit; font: inherit; cursor: pointer; } // 弹出内容面板 .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; &[data-side='top'] { transform: translateY(0.25rem); } &[data-side='right'] { transform: translateX(-0.25rem); } &[data-side='bottom'] { transform: translateY(-0.25rem); } &[data-side='left'] { transform: translateX(0.25rem); } } &[data-state='open'] { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, 0); } } // 子菜单弹出面板 .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/dropdown-menu/dropdown-menu.tsx","content":"$4e","type":"registry:ui","target":"components/ui/dropdown-menu/dropdown-menu.tsx"},{"path":"packages/styles/scss/components/dropdown-menu.module.scss","content":"$4f","type":"registry:file","target":"components/ui/dropdown-menu/dropdown-menu.module.scss"},{"path":"packages/react/src/components/dropdown-menu/index.ts","content":"export {\n\tDropdownMenu,\n\tDropdownMenuPortal,\n\tDropdownMenuTrigger,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuLabel,\n\tDropdownMenuItem,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuSub,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuSubContent,\n\ttype DropdownMenuProps,\n\ttype DropdownMenuPortalProps,\n\ttype DropdownMenuTriggerProps,\n\ttype DropdownMenuContentProps,\n\ttype DropdownMenuGroupProps,\n\ttype DropdownMenuLabelProps,\n\ttype DropdownMenuItemProps,\n\ttype DropdownMenuCheckboxItemProps,\n\ttype DropdownMenuRadioGroupProps,\n\ttype DropdownMenuRadioItemProps,\n\ttype DropdownMenuSeparatorProps,\n\ttype DropdownMenuShortcutProps,\n\ttype DropdownMenuSubProps,\n\ttype DropdownMenuSubTriggerProps,\n\ttype DropdownMenuSubContentProps,\n} from './dropdown-menu';\n","type":"registry:ui","target":"components/ui/dropdown-menu/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]