feat(ui): [UI7-1] 重构主布局AppShell与导航层

client/src/components/navigation/Topbar.tsx

@@ -76,7 +76,7 @@ export function Topbar() {
   const unreadBadge = unreadCount > 99 ? "99+" : String(unreadCount);
 
   return (
-    <header className="sticky top-0 z-20 border-b border-slate-200 bg-white/95 px-4 py-3 backdrop-blur sm:px-6">
+    <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">
       <div className="flex items-center justify-between gap-4">
         <div className="flex items-center gap-2">
           <Dialog open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
@@ -94,12 +94,12 @@ export function Topbar() {
 
             <DialogContent className="left-0 top-0 h-full w-72 max-w-[80vw] translate-x-0 translate-y-0 rounded-none rounded-r-xl p-0">
               <div className="flex h-full flex-col">
-                <div className="flex items-center justify-between border-b border-slate-200 px-4 py-4">
+                <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-primary">
-                      hyb-oa
+                    <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="mt-1 text-sm font-bold text-slate-900">海音达工作台</p>
+                    <p className="mt-1 text-sm font-bold text-zinc-900">海音达工作台</p>
                   </div>
                   <DialogClose asChild>
                     <Button size="icon" variant="ghost" aria-label="关闭菜单" type="button">
@@ -116,8 +116,8 @@ export function Topbar() {
           </Dialog>
 
           <div>
-          <p className="text-sm text-secondary">欢迎回来</p>
-          <p className="text-base font-semibold text-slate-900">{me?.name ?? "-"}</p>
+            <p className="text-sm text-zinc-500">欢迎回来</p>
+            <p className="text-base font-semibold text-zinc-900">{me?.name ?? "-"}</p>
           </div>
         </div>
 
@@ -141,8 +141,8 @@ export function Topbar() {
           </Button>
 
           <div className="hidden text-right sm:block">
-            <p className="text-xs uppercase tracking-wide text-secondary">角色</p>
-            <p className="text-sm font-medium text-slate-900">{roleCodes.join(" / ") || "-"}</p>
+            <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>