From dd28307413adfcd63d61e2ca5f5333d853531237 Mon Sep 17 00:00:00 2001
From: linkeyu <linkeyu@wonderable.ai>
Date: Mon, 27 Jul 2026 11:36:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BE=A7=E6=A0=8F=E6=BB=9A=E5=8A=A8=E4=B8=8E=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E4=BD=8D=E7=BD=AE=20(#77)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 本次改动

- 修复小屏时左侧导航无法滚动、末尾菜单不可见的问题
- 将“权限管理”调整至“监控审计”板块之前

## 范围

仅修改 `src/app/(main)/layout.tsx`。

---------

Co-authored-by: linkeyu <798648091@qq.com>
Reviewed-on: https://gitea.shaguabijia.com/WonderableAI/shaguabijia-admin-web/pulls/77
Co-authored-by: linkeyu <linkeyu@wonderable.ai>
Co-committed-by: linkeyu <linkeyu@wonderable.ai>
---
 src/app/(main)/layout.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index b63fdc5..389f232 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -91,6 +91,7 @@ const NAV_GROUPS: NavGroup[] = [
       { key: '/users', icon: <UserOutlined />, label: '用户管理' },
     ],
   },
+  { key: '/admins', icon: <TeamOutlined />, label: '权限管理' },
   {
     key: 'monitoring-audit',
     icon: <FileSearchOutlined />,
@@ -103,7 +104,6 @@ const NAV_GROUPS: NavGroup[] = [
       { key: '/audit-logs', icon: <FileSearchOutlined />, label: '审计日志' },
     ],
   },
-  { key: '/admins', icon: <TeamOutlined />, label: '权限管理' },
 ];
 
 // 导航项 key(/dashboard)→ 权限页 key(dashboard),与后端 permissions.py 目录对齐
@@ -223,8 +223,7 @@ export default function MainLayout({ children }: { children: React.ReactNode })
           position: 'sticky',
           top: 0,
           height: '100vh',
-          overflowY: 'auto',
-          overflowX: 'hidden',
+          overflow: 'hidden',
         }}
       >
         <nav className={`side-nav${collapsed ? ' side-nav-collapsed' : ''}`} aria-label="后台导航">
@@ -314,8 +313,19 @@ export default function MainLayout({ children }: { children: React.ReactNode })
         .side-nav {
           display: flex;
           flex-direction: column;
+          box-sizing: border-box;
           gap: 4px;
-          padding: 0 10px 14px;
+          height: calc(100vh - 48px);
+          min-height: 0;
+          overflow-x: hidden;
+          overflow-y: auto;
+          overscroll-behavior: contain;
+          padding: 0 10px 20px;
+          scrollbar-gutter: stable;
+          -webkit-overflow-scrolling: touch;
+        }
+        .side-nav:focus-within {
+          scroll-behavior: smooth;
         }
         .nav-group {
           padding: 6px 0 8px;