From 1e8c38dfc506b8cbcaa2ffe25f21df09881d4450 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Mon, 1 Jun 2026 20:25:36 +0800
Subject: [PATCH] 1

---
 frontend/src/app/(auth)/layout.tsx       | 31 +-----------
 frontend/src/components/mobile-shell.tsx | 60 ++++++++++++++++++++++++
 frontend/src/components/nav.tsx          | 27 ++++++-----
 3 files changed, 76 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/components/mobile-shell.tsx

diff --git a/frontend/src/app/(auth)/layout.tsx b/frontend/src/app/(auth)/layout.tsx
index 80a70f1b..66b7a5fb 100644
--- a/frontend/src/app/(auth)/layout.tsx
+++ b/frontend/src/app/(auth)/layout.tsx
@@ -1,37 +1,10 @@
 import { AuthGuard } from "@/components/auth-guard";
-import { UserMenu } from "@/components/user-menu";
-import { SidebarNav } from "@/components/nav";
+import { MobileShell } from "@/components/mobile-shell";
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
   return (
     <AuthGuard>
-      <div className="flex min-h-screen">
-        <aside className="fixed inset-y-0 left-0 z-40 flex w-48 sm:w-60 flex-col glass-sidebar">
-          <div className="px-4 sm:px-6 pt-5 sm:pt-7 pb-4 sm:pb-5">
-            <div className="flex items-center gap-3">
-              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-amber-600 text-sm font-bold text-white shadow-glow-sm">
-                A
-              </div>
-              <div className="min-w-0">
-                <h1 className="text-sm font-semibold tracking-tight">AlphaX Agent</h1>
-                <p className="text-xs text-text-muted mt-0.5 font-light tracking-wide">A 股投研作战台</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="mx-5 h-px bg-gradient-to-r from-transparent via-border-default to-transparent" />
-
-          <SidebarNav />
-
-          <div className="px-4 sm:px-6 py-4 sm:py-5 border-t border-border-subtle">
-            <UserMenu />
-          </div>
-        </aside>
-
-        <main className="min-h-screen flex-1 ml-48 sm:ml-60 pb-10">
-          {children}
-        </main>
-      </div>
+      <MobileShell>{children}</MobileShell>
     </AuthGuard>
   );
 }
diff --git a/frontend/src/components/mobile-shell.tsx b/frontend/src/components/mobile-shell.tsx
new file mode 100644
index 00000000..04eb20bc
--- /dev/null
+++ b/frontend/src/components/mobile-shell.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { UserMenu } from "@/components/user-menu";
+import { SidebarNav } from "@/components/nav";
+
+export function MobileShell({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex min-h-screen">
+      {/* 移动端汉堡按钮 */}
+      <button
+        type="button"
+        aria-label="打开菜单"
+        onClick={() => setOpen(true)}
+        className="fixed left-3 top-3 z-50 flex h-10 w-10 items-center justify-center rounded-lg glass-sidebar md:hidden"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <path d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </button>
+
+      {/* 移动端遮罩 */}
+      {open && (
+        <div className="fixed inset-0 z-40 bg-black/50 md:hidden" onClick={() => setOpen(false)} />
+      )}
+
+      <aside
+        className={`fixed inset-y-0 left-0 z-40 flex w-48 sm:w-60 flex-col glass-sidebar transition-transform duration-200 md:translate-x-0 ${
+          open ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
+        <div className="px-4 sm:px-6 pt-5 sm:pt-7 pb-4 sm:pb-5">
+          <div className="flex items-center gap-3">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-amber-600 text-sm font-bold text-white shadow-glow-sm">
+              A
+            </div>
+            <div className="min-w-0">
+              <h1 className="text-sm font-semibold tracking-tight">AlphaX Agent</h1>
+              <p className="text-xs text-text-muted mt-0.5 font-light tracking-wide">A 股投研作战台</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="mx-5 h-px bg-gradient-to-r from-transparent via-border-default to-transparent" />
+
+        <SidebarNav onNavigate={() => setOpen(false)} />
+
+        <div className="px-4 sm:px-6 py-4 sm:py-5 border-t border-border-subtle">
+          <UserMenu />
+        </div>
+      </aside>
+
+      <main className="min-h-screen flex-1 md:ml-60 pb-10">
+        {children}
+      </main>
+    </div>
+  );
+}
diff --git a/frontend/src/components/nav.tsx b/frontend/src/components/nav.tsx
index 7a7008f4..5108fcb8 100644
--- a/frontend/src/components/nav.tsx
+++ b/frontend/src/components/nav.tsx
@@ -134,13 +134,14 @@ function TasksIcon() {
   );
 }
 
-function SideNavItem({ href, icon, label }: { href: string; icon: React.ReactNode; label: string }) {
+function SideNavItem({ href, icon, label, onNavigate }: { href: string; icon: React.ReactNode; label: string; onNavigate?: () => void }) {
   const pathname = usePathname();
   const isActive = pathname === href || (href !== "/dashboard" && pathname.startsWith(href));
 
   return (
     <Link
       href={href}
+      onClick={onNavigate}
       className={`flex min-w-0 items-center gap-2.5 sm:gap-3 rounded-xl px-3 sm:px-4 py-2.5 text-sm transition-all duration-200 ${
         isActive
           ? "text-text-primary bg-surface-4"
@@ -153,24 +154,24 @@ function SideNavItem({ href, icon, label }: { href: string; icon: React.ReactNod
   );
 }
 
-export function SidebarNav() {
+export function SidebarNav({ onNavigate }: { onNavigate?: () => void }) {
   const { user } = useAuth();
 
   return (
     <nav className="flex-1 overflow-y-auto px-2 sm:px-3 py-4 sm:py-5 space-y-1">
-      <SideNavItem href="/dashboard" icon={<DashboardIcon />} label="今日作战" />
-      <SideNavItem href="/recommendations" icon={<TargetIcon />} label="推荐池" />
-      <SideNavItem href="/sectors" icon={<FireIcon />} label="板块主线" />
-      <SideNavItem href="/sentiment" icon={<RadarIcon />} label="舆情雷达" />
-      <SideNavItem href="/watchlists" icon={<WatchlistIcon />} label="自选股" />
-      <SideNavItem href="/chat" icon={<ChatIcon />} label="研究助手" />
+      <SideNavItem href="/dashboard" icon={<DashboardIcon />} label="今日作战" onNavigate={onNavigate} />
+      <SideNavItem href="/recommendations" icon={<TargetIcon />} label="推荐池" onNavigate={onNavigate} />
+      <SideNavItem href="/sectors" icon={<FireIcon />} label="板块主线" onNavigate={onNavigate} />
+      <SideNavItem href="/sentiment" icon={<RadarIcon />} label="舆情雷达" onNavigate={onNavigate} />
+      <SideNavItem href="/watchlists" icon={<WatchlistIcon />} label="自选股" onNavigate={onNavigate} />
+      <SideNavItem href="/chat" icon={<ChatIcon />} label="研究助手" onNavigate={onNavigate} />
       {user?.role === "admin" && (
         <>
-          <SideNavItem href="/strategy" icon={<StrategyIcon />} label="策略校准" />
-          <SideNavItem href="/ops-logs" icon={<LogsIcon />} label="系统日志" />
-          <SideNavItem href="/data-health" icon={<HealthIcon />} label="数据源健康" />
-          <SideNavItem href="/tasks" icon={<TasksIcon />} label="任务中心" />
-          <SideNavItem href="/settings" icon={<SettingsIcon />} label="管理设置" />
+          <SideNavItem href="/strategy" icon={<StrategyIcon />} label="策略校准" onNavigate={onNavigate} />
+          <SideNavItem href="/ops-logs" icon={<LogsIcon />} label="系统日志" onNavigate={onNavigate} />
+          <SideNavItem href="/data-health" icon={<HealthIcon />} label="数据源健康" onNavigate={onNavigate} />
+          <SideNavItem href="/tasks" icon={<TasksIcon />} label="任务中心" onNavigate={onNavigate} />
+          <SideNavItem href="/settings" icon={<SettingsIcon />} label="管理设置" onNavigate={onNavigate} />
         </>
       )}
     </nav>