webadmin界面调整

apps/admin-web/src/admin.css

@@ -1,3 +1,20 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+/* 左侧导航可滚动但不显示滚动条 */
+.admin-sider-menu-scroll {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.admin-sider-menu-scroll::-webkit-scrollbar {
+  display: none;
+}
+
 .admin-table-nowrap .ant-table-cell {
   white-space: nowrap;
 }

apps/admin-web/src/layouts/AdminLayout.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { Layout, Menu, Typography, Button, Space } from 'antd';
 import type { MenuProps } from 'antd';
@@ -92,12 +92,17 @@ const MENU_ITEMS: MenuProps['items'] = [
 export default function AdminLayout() {
   const navigate = useNavigate();
   const location = useLocation();
+  const contentRef = useRef<HTMLDivElement>(null);
   const [profile, setProfile] = useState<HqProfile | null>(null);
 
   useEffect(() => {
     request<HqProfile>('/admin/auth/me').then(setProfile).catch(() => {});
   }, []);
 
+  useEffect(() => {
+    contentRef.current?.scrollTo({ top: 0, left: 0 });
+  }, [location.pathname]);
+
   function logout() {
     clearAuth();
     navigate('/login');
@@ -106,23 +111,36 @@ export default function AdminLayout() {
   const selectedKey = location.pathname;
 
   return (
-    <Layout style={{ minHeight: '100vh' }}>
+    <Layout style={{ height: '100vh', overflow: 'hidden' }}>
-      <Sider breakpoint="lg" collapsedWidth={64} theme="dark" width={220}>
+      <Sider
-        <div style={{ padding: '16px', color: '#fff', fontWeight: 600 }}>杜康 HQ</div>
+        breakpoint="lg"
-        <Menu
+        collapsedWidth={64}
-          theme="dark"
+        theme="dark"
-          mode="inline"
+        width={220}
-          selectedKeys={[selectedKey]}
+        style={{ height: '100vh', overflow: 'hidden' }}
-          defaultOpenKeys={['products-group', 'stores-group', 'partners-group', 'benefit-group', 'logs-group', 'deliveries-group']}
+      >
-          items={MENU_ITEMS}
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-          onClick={({ key }) => {
+          <div style={{ flexShrink: 0, padding: '16px', color: '#fff', fontWeight: 600 }}>
-            if (key.startsWith('/')) navigate(key);
+            杜康 HQ
-          }}
+          </div>
-        />
+          <div className="admin-sider-menu-scroll" style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>
+            <Menu
+              theme="dark"
+              mode="inline"
+              selectedKeys={[selectedKey]}
+              defaultOpenKeys={['products-group', 'stores-group', 'partners-group', 'benefit-group', 'logs-group', 'deliveries-group']}
+              items={MENU_ITEMS}
+              onClick={({ key }) => {
+                if (key.startsWith('/')) navigate(key);
+              }}
+            />
+          </div>
+        </div>
       </Sider>
-      <Layout>
+      <Layout style={{ height: '100vh', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
         <Header
           style={{
+            flexShrink: 0,
             background: '#fff',
             padding: '0 24px',
             display: 'flex',
@@ -142,9 +160,14 @@ export default function AdminLayout() {
             </Button>
           </Space>
         </Header>
-        <Content style={{ margin: 24 }}>
+        <div
-          <Outlet />
+          ref={contentRef}
-        </Content>
+          style={{ flex: 1, minHeight: 0, overflow: 'auto' }}
+        >
+          <Content style={{ margin: 24 }}>
+            <Outlet />
+          </Content>
+        </div>
       </Layout>
     </Layout>
   );