feat(web): 移动端适配——顶栏防换行 + 抽屉式侧边栏

- TopBar: 标题区 min-w-0+truncate 防换行；移动端(sm 下)隐藏心情/WS文字tag、管理/主题按钮shrink-0；新增汉堡按钮(md:hidden)
- Nav: 抽共享 NavContent；桌面 Sidebar(dd:flex) 保持；移动端新增 MobileNav 抽屉(遮罩+弹簧滑入 md:hidden)
- App: 加 menuOpen state，渲染 MobileNav + TopBar 传 onMenu
- Icon: 新增 menu 图标；index.css: 加 mu-drawer-in 滑入动画
- npm run build 绿(77模块)；后端未动

frontend/web/src/components/TopBar.tsx

@@ -25,7 +25,7 @@ const wsMeta: Record<WsStatus, { label: string; tone: "ok" | "warn" | "neutral"
   disconnected: { label: "已断开", tone: "err" },
 };
 
-export function TopBar(): React.ReactNode {
+export function TopBar({ onMenu }: { onMenu: () => void }): React.ReactNode {
   const wsStatus = useAppStore((s) => s.wsStatus);
   const mood = useAppStore((s) => s.mood);
   const currentPersona = useAppStore((s) => s.currentPersona);
@@ -41,12 +41,21 @@ export function TopBar(): React.ReactNode {
   const meta = wsMeta[wsStatus];
 
   return (
-    <header className="glass sticky top-0 z-30 flex h-[var(--mu-topbar-h)] items-center gap-3 border-b border-[var(--mu-glass-border)] px-4">
-      <div className="flex items-center gap-2">
-        <img src={personaAvatar(currentPersona)} alt={currentPersona?.name ?? "Cyrene"} className="h-7 w-7 rounded-full object-cover" />
-        <div className="leading-tight">
-          <div className="text-sm font-semibold">Cyrene · 昔涟</div>
-          <div className="text-[11px] text-[var(--mu-text-lo)]">
+    <header className="glass sticky top-0 z-30 flex h-[var(--mu-topbar-h)] items-center gap-2 border-b border-[var(--mu-glass-border)] px-3 sm:px-4">
+      <button
+        onClick={onMenu}
+        aria-label="打开菜单"
+        title="菜单"
+        className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--mu-radius)] text-[var(--mu-text-mid)] transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-4)] active:scale-95 md:hidden"
+      >
+        <Icon name="menu" size={20} />
+      </button>
+
+      <div className="flex min-w-0 items-center gap-2">
+        <img src={personaAvatar(currentPersona)} alt={currentPersona?.name ?? "Cyrene"} className="h-7 w-7 shrink-0 rounded-full object-cover" />
+        <div className="min-w-0 leading-tight">
+          <div className="truncate text-sm font-semibold">Cyrene · {currentPersona?.name ?? "昔涟"}</div>
+          <div className="truncate text-[11px] text-[var(--mu-text-lo)]">
             <span className="inline-flex items-center gap-1">
               <Icon name={MODE_ICON[mode]} size={12} />
               {MODE_LABEL[mode]}
@@ -57,11 +66,11 @@ export function TopBar(): React.ReactNode {
 
       <div className="flex-1" />
 
-      {mood ? <Tag tone="accent">心情 · {mood}</Tag> : null}
+      {mood ? <Tag tone="accent" className="hidden sm:inline-flex">心情 · {mood}</Tag> : null}
 
       <AwakenBadge />
 
-      <Tag tone={meta.tone}>
+      <Tag tone={meta.tone} className="hidden sm:inline-flex">
         <span className={`inline-block h-1.5 w-1.5 rounded-full ${wsStatus === "connected" ? "bg-[var(--mu-ok)]" : "mu-blink"}`} />
         {meta.label}
       </Tag>
@@ -70,14 +79,14 @@ export function TopBar(): React.ReactNode {
         onClick={() => { window.location.hash = "#/admin"; }}
         aria-label="管理面板"
         title="管理面板 /admin"
-        className="inline-flex h-8 w-8 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-sm transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
+        className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-sm transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
       >
         <Icon name="shield" size={18} />
       </button>
       <button
         onClick={toggleTheme}
         aria-label="切换主题"
-        className="inline-flex h-8 w-8 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-sm transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
+        className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-sm transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
       >
         <Icon name={theme === "dark" ? "sun" : "moon"} size={18} />
       </button>