wangsli/hyb-oa
1
0
派生 0
代码 工单 合并请求 工作流 5 软件包 项目 发布 百科 活动

R29-1 R29-6: 重构海音达工作台壳层与高频页面

浏览代码
这个提交包含在：
wangsli
2026-03-23 09:59:35 +08:00
父节点 f9198a781a
当前提交 7e183c0cdc
共修改 33 个文件，包含 2193 行新增和 1564 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
client/src/components/navigation/Topbar.tsx
+26 -42
查看文件
@@ -1,10 +1,12 @@
import { useState } from "react";
import { Link } from "react-router-dom";
import { Link, useLocation } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { fetchNotifications } from "../../api/notifications";
import { useAuth } from "../../auth/AuthContext";
import { resolvePageMeta } from "../../features/navigation/schema";
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 {
@@ -18,14 +20,7 @@ import { NavLinks } from "./NavLinks";
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"
>
<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>
);
@@ -33,14 +28,7 @@ function MenuIcon() {
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"
>
<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"
@@ -54,9 +42,11 @@ function BellIcon() {
export function Topbar() {
const { me, logout } = useAuth();
const location = useLocation();
const [mobileNavOpen, setMobileNavOpen] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
const wecomEntry = isWecomWebView();
const pageMeta = resolvePageMeta(location.pathname);
const unreadQuery = useQuery({
enabled: Boolean(me),
@@ -70,9 +60,9 @@ export function Topbar() {
return (
<>
<header className="sticky top-0 z-10 border-b border-zinc-200 bg-white px-4 py-3 sm:px-8">
<header className="sticky top-0 z-10 border-b border-zinc-200/80 bg-white/90 px-4 py-4 backdrop-blur sm:px-8">
<div className="flex items-center justify-between gap-4">
<div className="flex min-w-0 items-center gap-2">
<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">
@@ -80,13 +70,10 @@ export function Topbar() {
</Button>
</DialogTrigger>
<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">主业务平台</p>
<p className="mt-1 text-sm font-bold text-zinc-900">海音达工作台</p>
</div>
<DialogContent className="left-0 top-0 h-full w-80 max-w-[84vw] rounded-none rounded-r-3xl border-r border-zinc-200 p-0">
<div className="flex h-full flex-col bg-white">
<div className="flex items-start justify-between border-b border-zinc-200 px-5 py-5">
<AppBrand />
<DialogClose asChild>
<Button size="icon" variant="ghost" aria-label="关闭菜单" type="button">
✕
@@ -94,7 +81,7 @@ export function Topbar() {
</DialogClose>
</div>
<div className="flex-1 overflow-auto p-4">
<div className="flex-1 overflow-auto px-4 py-5">
<NavLinks onNavigate={() => setMobileNavOpen(false)} />
</div>
</div>
@@ -102,19 +89,23 @@ export function Topbar() {
</Dialog>
<div className="min-w-0">
<p className="text-sm text-zinc-500">欢迎回来</p>
<div className="flex flex-wrap items-center gap-2">
<p className="truncate text-base font-semibold text-zinc-900">{me?.name ?? "-"}</p>
<div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400">{pageMeta.group}</div>
<div className="mt-1 flex flex-wrap items-center gap-2">
<p className="truncate text-lg font-semibold tracking-tight text-zinc-900">{pageMeta.title}</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
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-zinc-500">{me ? `你好，${me.name}` : "欢迎进入海音达工作台"}</div>
</div>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 sm:gap-3">
<Button
size="sm"
variant="secondary"
@@ -139,14 +130,7 @@ export function Topbar() {
<span className="material-symbols-outlined text-[18px]">search</span>
</Button>
<Button
asChild
size="icon"
variant="secondary"
aria-label="通知"
type="button"
data-testid="notifications-bell"
>
<Button asChild size="icon" variant="secondary" aria-label="通知" type="button" data-testid="notifications-bell">
<Link className="relative" to="/notifications">
<BellIcon />
{unreadCount > 0 ? (
@@ -159,12 +143,12 @@ export function Topbar() {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="secondary" type="button">
<Button data-testid="topbar-profile-trigger" variant="secondary" type="button" className="max-w-[160px] truncate">
{me?.name ?? "账号"}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuContent align="end" className="w-48">
<DropdownMenuItem asChild className="cursor-pointer">
<Link to="/settings/profile">个人设置</Link>
</DropdownMenuItem>