feat(client): 导航布局收敛与移动端菜单（E3）

- Sidebar/Topbar 统一交互与样式
- 移动端抽屉菜单（Dialog）+ 账号下拉菜单（DropdownMenu）
- 导航项抽取为 NavLinks 便于后续扩展

client/src/components/navigation/Topbar.tsx

@@ -1,16 +1,91 @@
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import { useAuth } from "../../auth/AuthContext";
+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";
+
+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>
+  );
+}
 
 export function Topbar() {
   const { me, logout } = useAuth();
   const roleCodes = me?.roleCodes ?? [];
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
   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">
       <div className="flex items-center justify-between gap-4">
-        <div>
+        <div className="flex items-center gap-2">
+          <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-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>
+                    <p className="text-xs font-semibold uppercase tracking-wide text-primary">
+                      hyb-oa
+                    </p>
+                    <p className="mt-1 text-sm font-bold text-slate-900">海音达工作台</p>
+                  </div>
+                  <DialogClose asChild>
+                    <Button size="icon" variant="ghost" aria-label="关闭菜单" type="button">
+                      ✕
+                    </Button>
+                  </DialogClose>
+                </div>
+
+                <div className="flex-1 overflow-auto p-4">
+                  <NavLinks onNavigate={() => setMobileNavOpen(false)} />
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+
+          <div>
           <p className="text-sm text-secondary">欢迎回来</p>
           <p className="text-base font-semibold text-slate-900">{me?.name ?? "-"}</p>
+          </div>
         </div>
 
         <div className="flex items-center gap-3">
@@ -19,18 +94,29 @@ export function Topbar() {
             <p className="text-sm font-medium text-slate-900">{roleCodes.join(" / ") || "-"}</p>
           </div>
 
-          <Link className="btn-secondary text-sm" to="/settings/profile">
-            个人设置
-          </Link>
-          <button
-            className="btn-primary text-sm"
-            onClick={() => {
-              void logout();
-            }}
-            type="button"
-          >
-            退出登录
-          </button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="secondary" type="button">
+                {me?.name ?? "账号"}
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent align="end">
+              <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>