80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { MoreVertical, X } from "lucide-react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
interface MoreMenuProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function MoreMenu({ children }: MoreMenuProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const menuRef = useRef<HTMLDivElement>(null);
|
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
|
|
|
// 点击外部关闭菜单
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (
|
|
menuRef.current &&
|
|
buttonRef.current &&
|
|
!menuRef.current.contains(event.target as Node) &&
|
|
!buttonRef.current.contains(event.target as Node)
|
|
) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<div className="relative">
|
|
{/* 更多按钮 */}
|
|
<button
|
|
ref={buttonRef}
|
|
className="w-[34px] h-[34px] inline-flex items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
aria-label="更多选项"
|
|
title="更多选项"
|
|
>
|
|
{isOpen ? <X size={18} /> : <MoreVertical size={18} />}
|
|
</button>
|
|
|
|
{/* 弹出菜单 */}
|
|
{isOpen && (
|
|
<div
|
|
ref={menuRef}
|
|
className="absolute bottom-full right-0 mb-2 bg-zinc-900/95 backdrop-blur-xl border border-white/20 rounded-xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-200"
|
|
style={{ minWidth: "200px" }}
|
|
>
|
|
<div className="p-2 flex flex-col gap-1">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface MoreMenuItemProps {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function MoreMenuItem({ icon, label, onClick }: MoreMenuItemProps) {
|
|
return (
|
|
<button
|
|
className="flex items-center gap-3 px-3 py-2.5 text-white/90 hover:bg-white/10 rounded-lg transition-colors text-left w-full"
|
|
onClick={onClick}
|
|
>
|
|
<span className="flex-shrink-0">{icon}</span>
|
|
<span className="text-sm">{label}</span>
|
|
</button>
|
|
);
|
|
}
|