kurihada
ddbd56a0ac
- 新增 DropdownMenu 基础组件（基于 Radix UI） - 新增 ToolbarOverflowMenu 组件（齿轮图标设置菜单） - 将 Header 次要按钮收入溢出菜单 - 保留 Diagnostics 和 Sessions 按钮始终可见 - 溢出菜单放置在最右侧
67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
/**
|
|
* ToolbarOverflowMenu Component
|
|
*
|
|
* 工具栏溢出菜单，用于在空间不足时收纳次要按钮
|
|
*/
|
|
|
|
import { Settings, type LucideIcon } from 'lucide-react';
|
|
import { motion } from 'framer-motion';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '../primitives/DropdownMenu';
|
|
import { cn } from '../utils/cn';
|
|
|
|
export interface ToolbarMenuItem {
|
|
/** 菜单项图标 */
|
|
icon: LucideIcon;
|
|
/** 菜单项标签 */
|
|
label: string;
|
|
/** 点击回调 */
|
|
onClick?: () => void;
|
|
}
|
|
|
|
interface ToolbarOverflowMenuProps {
|
|
/** 菜单项列表 */
|
|
items: ToolbarMenuItem[];
|
|
/** 自定义类名 */
|
|
className?: string;
|
|
}
|
|
|
|
export function ToolbarOverflowMenu({ items, className }: ToolbarOverflowMenuProps) {
|
|
// 过滤掉没有 onClick 的项
|
|
const validItems = items.filter((item) => item.onClick);
|
|
|
|
if (validItems.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<motion.button
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
className={cn(
|
|
'p-1.5 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-muted transition-colors',
|
|
className
|
|
)}
|
|
title="Settings"
|
|
>
|
|
<Settings size={20} />
|
|
</motion.button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{validItems.map((item) => (
|
|
<DropdownMenuItem key={item.label} onClick={item.onClick}>
|
|
<item.icon size={16} className="text-fg-muted" />
|
|
<span>{item.label}</span>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|