322 行
13 KiB
TypeScript
322 行
13 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import type { NotificationItem } from "../../api/notifications";
|
|
import { fetchNotifications, markAllNotificationsRead, markNotificationRead } from "../../api/notifications";
|
|
import { useAuth } from "../../auth/AuthContext";
|
|
import { resolvePageMeta } from "../../features/navigation/schema";
|
|
import { resolveNotificationTargetLink, formatNotificationRelativeTime } from "../../lib/notificationLinks";
|
|
import { resolveErrorMessage } from "../../lib/resolveErrorMessage";
|
|
import { isWecomWebView } from "../../lib/runtimeContext";
|
|
import { GlobalSearchDialog } from "../GlobalSearchDialog";
|
|
import { AppBrand } from "../shell/AppBrand";
|
|
import { Button } from "../ui/button";
|
|
import { Dialog, DialogClose, DialogContent, DialogTrigger } from "../ui/dialog";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "../ui/dropdown-menu";
|
|
import { NavLinks } from "./NavLinks";
|
|
import { toast } from "sonner";
|
|
|
|
function MenuIcon() {
|
|
return (
|
|
<svg aria-hidden="true" fill="none" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function BellIcon() {
|
|
return (
|
|
<svg aria-hidden="true" fill="none" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M15 17H9m9-2V11a6 6 0 10-12 0v4l-2 2h16l-2-2z"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function Topbar() {
|
|
const { me, logout } = useAuth();
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
const [mobileNavOpen, setMobileNavOpen] = useState(false);
|
|
const [searchOpen, setSearchOpen] = useState(false);
|
|
const [notificationsOpen, setNotificationsOpen] = useState(false);
|
|
const wecomEntry = isWecomWebView();
|
|
const pageMeta = resolvePageMeta(location.pathname);
|
|
|
|
const unreadQuery = useQuery({
|
|
enabled: Boolean(me),
|
|
queryKey: ["notifications", "unread-count"],
|
|
queryFn: () => fetchNotifications({ unreadOnly: true, page: 1, pageSize: 1 }),
|
|
refetchInterval: 30_000,
|
|
});
|
|
|
|
const dropdownQuery = useQuery({
|
|
enabled: Boolean(me) && notificationsOpen,
|
|
queryKey: ["notifications", "dropdown"],
|
|
queryFn: () => fetchNotifications({ page: 1, pageSize: 5 }),
|
|
});
|
|
|
|
const markReadMutation = useMutation({
|
|
mutationFn: (notificationId: string) => markNotificationRead(notificationId),
|
|
onSuccess: async () => {
|
|
await queryClient.invalidateQueries({ queryKey: ["notifications"] });
|
|
},
|
|
});
|
|
|
|
const markAllReadMutation = useMutation({
|
|
mutationFn: () => markAllNotificationsRead(),
|
|
onSuccess: async () => {
|
|
toast.success("已全部标为已读");
|
|
await queryClient.invalidateQueries({ queryKey: ["notifications"] });
|
|
},
|
|
onError: (error) => {
|
|
toast.error(resolveErrorMessage(error));
|
|
},
|
|
});
|
|
|
|
const unreadCount = unreadQuery.data?.unreadCount ?? 0;
|
|
const unreadBadge = unreadCount > 99 ? "99+" : String(unreadCount);
|
|
|
|
const handleNotificationClick = async (item: NotificationItem) => {
|
|
const targetLink = resolveNotificationTargetLink(item) ?? "/notifications";
|
|
|
|
try {
|
|
if (!item.readAt) {
|
|
await markReadMutation.mutateAsync(item.id);
|
|
}
|
|
setNotificationsOpen(false);
|
|
navigate(targetLink);
|
|
} catch (error) {
|
|
toast.error(resolveErrorMessage(error));
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleKeydown = (event: KeyboardEvent) => {
|
|
if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) {
|
|
return;
|
|
}
|
|
|
|
if (event.key.toLowerCase() !== "k") {
|
|
return;
|
|
}
|
|
|
|
if (!window.matchMedia("(min-width: 768px)").matches) {
|
|
return;
|
|
}
|
|
|
|
const target = event.target;
|
|
if (target instanceof HTMLElement) {
|
|
const tagName = target.tagName.toLowerCase();
|
|
if (target.isContentEditable || tagName === "input" || tagName === "textarea" || tagName === "select") {
|
|
return;
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
setSearchOpen(true);
|
|
};
|
|
|
|
window.addEventListener("keydown", handleKeydown);
|
|
return () => window.removeEventListener("keydown", handleKeydown);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<header className="sticky top-0 z-10 border-b border-slate-200/80 bg-white/88 px-4 py-3 shadow-[0_10px_30px_rgba(15,23,42,0.06)] backdrop-blur-xl sm:px-8">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<Dialog open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button className="lg:hidden" size="icon" variant="secondary" aria-label="打开菜单" type="button">
|
|
<MenuIcon />
|
|
</Button>
|
|
</DialogTrigger>
|
|
|
|
<DialogContent className="left-0 top-0 h-dvh w-80 max-w-[88vw] translate-x-0 translate-y-0 rounded-none rounded-r-3xl border-r border-slate-200 p-0">
|
|
<div className="flex h-full flex-col bg-white">
|
|
<div className="flex items-start justify-between border-b border-slate-200 px-5 py-5">
|
|
<AppBrand />
|
|
<DialogClose asChild>
|
|
<Button size="icon" variant="ghost" aria-label="关闭菜单" type="button">
|
|
✕
|
|
</Button>
|
|
</DialogClose>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-auto px-4 py-5">
|
|
<NavLinks onNavigate={() => setMobileNavOpen(false)} />
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<div className="min-w-0">
|
|
<div className="text-xs font-bold uppercase tracking-[0.2em] text-primary/70">{pageMeta.group}</div>
|
|
<div className="mt-1 flex flex-wrap items-center gap-2">
|
|
<p className="truncate text-lg font-semibold text-[var(--color-text-primary)]">{pageMeta.title}</p>
|
|
{wecomEntry ? (
|
|
<span
|
|
className="badge-neutral border-primary-200 bg-primary-50 text-primary"
|
|
data-testid="topbar-wecom-entry-badge"
|
|
>
|
|
当前通过企业微信进入
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div className="mt-1 text-sm text-[var(--color-text-secondary)]">{me ? `你好，${me.name}` : "欢迎进入海音达工作台"}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
type="button"
|
|
onClick={() => setSearchOpen(true)}
|
|
data-testid="global-search-trigger"
|
|
className="hidden md:inline-flex"
|
|
>
|
|
<span className="material-symbols-outlined mr-1 text-[18px]">search</span>
|
|
搜索
|
|
</Button>
|
|
|
|
<Button
|
|
size="icon"
|
|
variant="secondary"
|
|
type="button"
|
|
onClick={() => setSearchOpen(true)}
|
|
data-testid="global-search-trigger-mobile"
|
|
className="md:hidden"
|
|
aria-label="打开搜索"
|
|
>
|
|
<span className="material-symbols-outlined text-[18px]">search</span>
|
|
</Button>
|
|
|
|
<DropdownMenu open={notificationsOpen} onOpenChange={setNotificationsOpen}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
size="icon"
|
|
variant="secondary"
|
|
aria-label="通知"
|
|
type="button"
|
|
data-testid="notifications-bell"
|
|
className="relative"
|
|
>
|
|
<BellIcon />
|
|
{unreadCount > 0 ? (
|
|
<span className="absolute -right-2 -top-2 min-w-5 rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-semibold leading-none text-white">
|
|
{unreadBadge}
|
|
</span>
|
|
) : null}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent align="end" className="w-80 max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border-slate-200 bg-white p-0">
|
|
<div className="flex items-center justify-between border-b border-slate-200 bg-slate-50/80 px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-semibold text-[var(--color-text-primary)]">通知</span>
|
|
<span className="rounded-full bg-white px-2 py-0.5 text-xs font-medium text-[var(--color-text-secondary)]">
|
|
{unreadCount}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="text-xs font-medium text-primary disabled:text-zinc-400"
|
|
disabled={unreadCount === 0 || markAllReadMutation.isPending}
|
|
onClick={() => markAllReadMutation.mutate()}
|
|
>
|
|
全部标为已读
|
|
</button>
|
|
</div>
|
|
|
|
<div className="max-h-[400px] overflow-y-auto">
|
|
{dropdownQuery.isLoading ? (
|
|
<div className="px-4 py-6 text-sm text-[var(--color-text-secondary)]">通知加载中...</div>
|
|
) : null}
|
|
|
|
{dropdownQuery.isError ? (
|
|
<div className="px-4 py-6 text-sm text-red-600">{resolveErrorMessage(dropdownQuery.error)}</div>
|
|
) : null}
|
|
|
|
{!dropdownQuery.isLoading && !dropdownQuery.isError ? (
|
|
dropdownQuery.data?.items?.length ? (
|
|
dropdownQuery.data.items.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
className="flex w-full items-start gap-3 border-b border-slate-100 px-4 py-3 text-left transition hover:bg-slate-50 disabled:opacity-60"
|
|
disabled={markReadMutation.isPending}
|
|
onClick={() => void handleNotificationClick(item)}
|
|
>
|
|
<span className="mt-1 flex w-3 justify-center">
|
|
{!item.readAt ? <span className="h-2 w-2 rounded-full bg-sky-500" /> : null}
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block truncate text-sm font-medium text-[var(--color-text-primary)]">{item.title}</span>
|
|
<span className="mt-1 block text-xs text-[var(--color-text-secondary)]">
|
|
{formatNotificationRelativeTime(item.createdAt)}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
))
|
|
) : (
|
|
<div className="px-4 py-6 text-sm text-[var(--color-text-secondary)]">暂无通知</div>
|
|
)
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="border-t border-slate-200 px-2 py-2">
|
|
<Button asChild variant="ghost" className="w-full justify-between" type="button">
|
|
<Link to="/notifications" onClick={() => setNotificationsOpen(false)}>
|
|
查看全部通知
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button data-testid="topbar-profile-trigger" variant="secondary" type="button" className="max-w-[160px] truncate">
|
|
{me?.name ?? "账号"}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent align="end" className="w-48 rounded-2xl border-slate-200 bg-white">
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/settings/profile">个人设置</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
className="cursor-pointer text-red-600 focus:text-red-600"
|
|
onSelect={(event) => {
|
|
event.preventDefault();
|
|
void logout();
|
|
}}
|
|
>
|
|
退出登录
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<GlobalSearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
|
|
</>
|
|
);
|
|
}
|