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,9 +111,19 @@ export default function AdminLayout() {
   const selectedKey = location.pathname;
 
   return (
-    <Layout style={{ minHeight: '100vh' }}>
-      <Sider breakpoint="lg" collapsedWidth={64} theme="dark" width={220}>
-        <div style={{ padding: '16px', color: '#fff', fontWeight: 600 }}>杜康 HQ</div>
+    <Layout style={{ height: '100vh', overflow: 'hidden' }}>
+      <Sider
+        breakpoint="lg"
+        collapsedWidth={64}
+        theme="dark"
+        width={220}
+        style={{ height: '100vh', overflow: 'hidden' }}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
+          <div style={{ flexShrink: 0, padding: '16px', color: '#fff', fontWeight: 600 }}>
+            杜康 HQ
+          </div>
+          <div className="admin-sider-menu-scroll" style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>
             <Menu
               theme="dark"
               mode="inline"
@@ -119,10 +134,13 @@ export default function AdminLayout() {
                 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>
+        <div
+          ref={contentRef}
+          style={{ flex: 1, minHeight: 0, overflow: 'auto' }}
+        >
           <Content style={{ margin: 24 }}>
             <Outlet />
           </Content>
+        </div>
       </Layout>
     </Layout>
   );