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/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { TopBar } from "./components/TopBar";
-import { Sidebar } from "./components/Nav";
+import { Sidebar, MobileNav } from "./components/Nav";
 import { ModeRouter } from "./modes/ModeRouter";
 import { AdminApp } from "./admin/AdminApp";
 import { parseAdminHash } from "./admin/router";
@@ -13,6 +13,7 @@ export default function App(): React.ReactNode {
   // Apply the persisted (dark-first) theme and open the realtime channel only
   // when we hold a token — otherwise the gateway rejects the handshake with 401.
   const [route, setRoute] = useState(() => parseAdminHash(window.location.hash));
+  const [menuOpen, setMenuOpen] = useState(false);
   const setCurrentPersona = useAppStore((s) => s.setCurrentPersona);
 
   useEffect(() => {
@@ -67,13 +68,14 @@ export default function App(): React.ReactNode {
 
   return (
     <div className="flex h-full flex-col">
-      <TopBar />
+      <TopBar onMenu={() => setMenuOpen(true)} />
       <div className="flex min-h-0 flex-1">
         <Sidebar />
         <main className="relative min-h-0 flex-1 overflow-y-auto">
           <ModeRouter />
         </main>
       </div>
+      <MobileNav open={menuOpen} onClose={() => setMenuOpen(false)} />
     </div>
   );
 }

frontend/web/src/components/Icon.tsx

@@ -46,7 +46,8 @@ export type IconName =
   | "arrow"          // → direction (arrow_forward_rounded)
   | "terminal"       // 🖥 code (terminal_rounded)
   | "image"          // 🖼 attachment/vision (image_rounded)
-  | "phone"          // 📞 voice call / hang up (call_rounded);
+  | "phone"          // 📞 voice call / hang up (call_rounded)
+  | "menu"           // ☰ drawer/open nav (menu_rounded);
 
 const ICON_PATHS: Record<IconName, string> = {
   chart:
@@ -125,6 +126,8 @@ const ICON_PATHS: Record<IconName, string> = {
     "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2ZM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5Z",
   phone:
     "M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2Z",
+  menu:
+    "M4 6h16v2H4V6Zm0 5h16v2H4v-2Zm0 5h16v2H4v-2Z",
 };
 
 export interface IconProps {

frontend/web/src/components/Nav.tsx

@@ -9,8 +9,15 @@ import { Tag } from "./primitives";
  * Left rail — NOT a behavior-mode list (design/01 §3: mode switching is driven
  * at runtime by the agent / user, and rendered per message). This is a small
  * navigation rail: brand + connection status + theme + admin/settings entry.
+ *
+ * Two surface variants share the same NavContent:
+ *   - Sidebar  (desktop): fixed rail, `hidden md:flex`.
+ *   - MobileNav(mobile):  drawer overlay opened from TopBar's hamburger button
+ *     (`md:hidden`), with a scrim + a spring slide-in panel. Content is shared
+ *     so desktop and mobile never diverge.
  */
-export function Sidebar(): React.ReactNode {
+
+function NavContent({ onNavigate }: { onNavigate: () => void }): React.ReactNode {
   const wsStatus = useAppStore((s) => s.wsStatus);
   const mood = useAppStore((s) => s.mood);
   const [theme, setTheme] = useState<ThemeMode>(readTheme);
@@ -24,7 +31,7 @@ export function Sidebar(): React.ReactNode {
   };
 
   return (
-    <nav className="glass hidden h-full w-[var(--mu-sidebar-w)] shrink-0 flex-col gap-1 border-r border-[var(--mu-glass-border)] p-3 md:flex">
+    <>
       <div className="flex items-center gap-2 px-2 py-2">
         <img src="/icon.svg" alt="Cyrene" className="h-7 w-7" />
         <div className="leading-tight">
@@ -38,7 +45,7 @@ export function Sidebar(): React.ReactNode {
         active={connected}
         icon="channel"
         label={connected ? "实时连接" : "未连接"}
-        onClick={() => {}}
+        onClick={onNavigate}
         hint={wsStatus}
       />
 
@@ -52,12 +59,18 @@ export function Sidebar(): React.ReactNode {
         <NavItem
           icon="settings"
           label="设置"
-          onClick={() => { window.location.hash = "#/admin/system"; }}
+          onClick={() => {
+            window.location.hash = "#/admin/system";
+            onNavigate();
+          }}
         />
         <NavItem
           icon="shield"
           label="管理面板"
-          onClick={() => { window.location.hash = "#/admin"; }}
+          onClick={() => {
+            window.location.hash = "#/admin";
+            onNavigate();
+          }}
         />
         <NavItem
           icon={theme === "dark" ? "sun" : "moon"}
@@ -66,10 +79,50 @@ export function Sidebar(): React.ReactNode {
         />
         {!hasToken ? <Tag tone="warn">未登录</Tag> : null}
       </div>
+    </>
+  );
+}
+
+/** Desktop left rail. */
+export function Sidebar(): React.ReactNode {
+  return (
+    <nav className="glass hidden h-full w-[var(--mu-sidebar-w)] shrink-0 flex-col gap-1 border-r border-[var(--mu-glass-border)] p-3 md:flex">
+      <NavContent onNavigate={() => {}} />
     </nav>
   );
 }
 
+/** Mobile drawer — overlay + scrim + spring slide-in panel. */
+export function MobileNav({ open, onClose }: { open: boolean; onClose: () => void }): React.ReactNode {
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-40 md:hidden" role="dialog" aria-modal="true">
+      {/* scrim */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-[2px]"
+        onClick={onClose}
+        aria-label="关闭侧边栏"
+      />
+      {/* panel */}
+      <nav className="glass absolute inset-y-0 left-0 flex w-[var(--mu-sidebar-w)] max-w-[80vw] flex-col gap-1 border-r border-[var(--mu-glass-border)] p-3"
+        style={{ animation: "mu-drawer-in 0.3s var(--mu-spring) both" }}
+      >
+        <div className="flex items-center justify-between px-2 pb-1">
+          <span className="text-xs font-medium text-[var(--mu-text-lo)]">菜单</span>
+          <button
+            onClick={onClose}
+            aria-label="关闭"
+            className="inline-flex h-8 w-8 items-center justify-center rounded-[var(--mu-radius)] text-[var(--mu-text-mid)] transition-all duration-200 hover:bg-[var(--mu-surface-4)] active:scale-95"
+          >
+            <Icon name="close" size={18} />
+          </button>
+        </div>
+        <NavContent onNavigate={onClose} />
+      </nav>
+    </div>
+  );
+}
+
 function NavItem({
   icon,
   label,

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>

frontend/web/src/styles/index.css

@@ -153,3 +153,13 @@ textarea {
 .mu-awaken {
   animation: mu-awaken 1.2s var(--mu-spring) ease-in-out;
 }
+
+/* 移动端抽屉（MobileNav）滑入：从左侧收起，弹簧过冲，仅一次性入场 */
+@keyframes mu-drawer-in {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}