feat: R27-2 R27-5 优化企微入口与 Portal 体验
这个提交包含在:
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { fetchNotifications } from "../../api/notifications";
|
||||
import { useAuth } from "../../auth/AuthContext";
|
||||
import { isWecomWebView } from "../../lib/runtimeContext";
|
||||
import { GlobalSearchDialog } from "../GlobalSearchDialog";
|
||||
import { Button } from "../ui/button";
|
||||
import { Dialog, DialogClose, DialogContent, DialogTrigger } from "../ui/dialog";
|
||||
@@ -53,9 +54,9 @@ function BellIcon() {
|
||||
|
||||
export function Topbar() {
|
||||
const { me, logout } = useAuth();
|
||||
const roleCodes = me?.roleCodes ?? [];
|
||||
const [mobileNavOpen, setMobileNavOpen] = useState(false);
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
const wecomEntry = isWecomWebView();
|
||||
|
||||
const unreadQuery = useQuery({
|
||||
enabled: Boolean(me),
|
||||
@@ -69,9 +70,9 @@ export function Topbar() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="sticky top-0 z-10 h-16 flex flex-col justify-center border-b border-zinc-200 bg-white px-4 sm:px-8">
|
||||
<header className="sticky top-0 z-10 border-b border-zinc-200 bg-white px-4 py-3 sm:px-8">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<Dialog open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="lg:hidden" size="icon" variant="secondary" aria-label="打开菜单" type="button">
|
||||
@@ -79,13 +80,11 @@ export function Topbar() {
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="left-0 top-0 h-full w-72 max-w-[80vw] tranzinc-x-0 tranzinc-y-0 rounded-none rounded-r-xl p-0">
|
||||
<DialogContent className="left-0 top-0 h-full w-72 max-w-[80vw] rounded-none rounded-r-xl p-0">
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center justify-between border-b border-zinc-200 px-4 py-4">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
||||
<span className="text-secondary capitalize">{me?.roleCodes?.[0] || "User"}</span>
|
||||
</p>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">主业务平台</p>
|
||||
<p className="mt-1 text-sm font-bold text-zinc-900">海音达工作台</p>
|
||||
</div>
|
||||
<DialogClose asChild>
|
||||
@@ -102,9 +101,16 @@ export function Topbar() {
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm text-zinc-500">欢迎回来</p>
|
||||
<p className="text-base font-semibold text-zinc-900">{me?.name ?? "-"}</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<p className="truncate text-base font-semibold text-zinc-900">{me?.name ?? "-"}</p>
|
||||
{wecomEntry ? (
|
||||
<span className="rounded-full border border-primary-200 bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary" data-testid="topbar-wecom-entry-badge">
|
||||
当前通过企业微信进入
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -151,11 +157,6 @@ export function Topbar() {
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<div className="hidden text-right sm:block">
|
||||
<p className="text-xs uppercase tracking-wide text-zinc-500">角色</p>
|
||||
<p className="text-sm font-medium text-zinc-900">{roleCodes.join(" / ") || "-"}</p>
|
||||
</div>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="secondary" type="button">
|
||||
|
||||
在新工单中引用
屏蔽一个用户