fix(distribution-admin): 优化左侧导航栏为固定不随页面滚动，独立右侧主体滚动区

distribution-admin/src/AppShell.tsx

@@ -74,93 +74,93 @@ function MainLayout({ member, onLogout }: { member: CurrentMember; onLogout: ()
   return (
     <MemberContext.Provider value={member}>
       <Layout className="app">
-      <Layout.Sider breakpoint="lg" collapsedWidth="0">
-        <div className="brand">
-          <ShopOutlined style={{ fontSize: 20, color: '#1677ff' }} />
-          <span>HFB 分销后台</span>
-        </div>
-        <Menu
-          theme="dark"
-          mode="inline"
-          items={menuItems}
-          selectedKeys={[selectedKey]}
-        />
-      </Layout.Sider>
-      <Layout>
-        <Layout.Header className="header">
-          <div className="header-left">
-            {member.is_superadmin ? (
-              <Tag color="gold" style={{ fontSize: 13, padding: '2px 8px' }}>
-                平台全局管理模式
-              </Tag>
-            ) : (
-              <Tag color="blue" style={{ fontSize: 13, padding: '2px 8px' }}>
-                {member.site_name || '当前分销站点'} · {member.domain || member.site_code}
-              </Tag>
-            )}
-            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
-              主站 hao858.com · 分销管理系统
-            </Typography.Text>
+        <Layout.Sider breakpoint="lg" collapsedWidth="0" className="app-sider" width={220}>
+          <div className="brand">
+            <ShopOutlined style={{ fontSize: 20, color: '#1677ff' }} />
+            <span>HFB 分销后台</span>
           </div>
-          <div className="header-right">
-            <Space size="middle">
-              {member.site_code && (
-                <Button
-                  type="primary"
-                  ghost
-                  icon={<EyeOutlined />}
-                  size="small"
-                  onClick={() => {
-                    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
-                    const targetUrl = isLocal
-                      ? `http://${window.location.hostname}:5189/?site=${member.site_code}`
-                      : member.domain
-                      ? `https://${member.domain}`
-                      : `/?site=${member.site_code}`
-                    window.open(targetUrl, '_blank')
-                  }}
-                  style={{ borderColor: '#1677ff', color: '#1677ff' }}
-                >
-                  预览分销前台商城 ↗
-                </Button>
+          <Menu
+            theme="dark"
+            mode="inline"
+            items={menuItems}
+            selectedKeys={[selectedKey]}
+          />
+        </Layout.Sider>
+        <Layout className="app-layout">
+          <Layout.Header className="header">
+            <div className="header-left">
+              {member.is_superadmin ? (
+                <Tag color="gold" style={{ fontSize: 13, padding: '2px 8px' }}>
+                  平台全局管理模式
+                </Tag>
+              ) : (
+                <Tag color="blue" style={{ fontSize: 13, padding: '2px 8px' }}>
+                  {member.site_name || '当前分销站点'} · {member.domain || member.site_code}
+                </Tag>
               )}
-              <div className="user-profile">
-                <UserOutlined style={{ color: '#1677ff' }} />
-                <Typography.Text strong style={{ fontSize: 13 }}>
-                  {member.nickname || member.username}
-                </Typography.Text>
-                <Tag color={member.is_superadmin ? 'purple' : 'cyan'}>{roleLabel}</Tag>
-              </div>
-              <Button
-                type="text"
-                danger
-                icon={<LogoutOutlined />}
-                onClick={onLogout}
-                size="small"
-              >
-                退出登录
-              </Button>
-            </Space>
-          </div>
-        </Layout.Header>
-        <Layout.Content>
-          <Routes>
-            <Route path="/" element={<Dashboard />} />
-            {member.is_superadmin && <Route path="/sites" element={<Sites isSuperadmin={true} />} />}
-            <Route path="/rules" element={<Rules />} />
-            <Route path="/payments" element={<Payments />} />
-            <Route path="/accounts" element={<Accounts />} />
-            <Route path="/wallet" element={<Wallet />} />
-            <Route path="/settings" element={<SiteSettings />} />
-            <Route path="/settlements" element={<Settlements />} />
-            <Route path="/sold" element={<Orders kind="sold" />} />
-            <Route path="/receive" element={<Orders kind="receive" />} />
-            <Route path="/orders" element={<Orders kind="all" />} />
-            <Route path="*" element={<Navigate to="/" replace />} />
-          </Routes>
-        </Layout.Content>
+              <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+                主站 hao858.com · 分销管理系统
+              </Typography.Text>
+            </div>
+            <div className="header-right">
+              <Space size="middle">
+                {member.site_code && (
+                  <Button
+                    type="primary"
+                    ghost
+                    icon={<EyeOutlined />}
+                    size="small"
+                    onClick={() => {
+                      const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
+                      const targetUrl = isLocal
+                        ? `http://${window.location.hostname}:5189/?site=${member.site_code}`
+                        : member.domain
+                        ? `https://${member.domain}`
+                        : `/?site=${member.site_code}`
+                      window.open(targetUrl, '_blank')
+                    }}
+                    style={{ borderColor: '#1677ff', color: '#1677ff' }}
+                  >
+                    预览分销前台商城 ↗
+                  </Button>
+                )}
+                <div className="user-profile">
+                  <UserOutlined style={{ color: '#1677ff' }} />
+                  <Typography.Text strong style={{ fontSize: 13 }}>
+                    {member.nickname || member.username}
+                  </Typography.Text>
+                  <Tag color={member.is_superadmin ? 'purple' : 'cyan'}>{roleLabel}</Tag>
+                </div>
+                <Button
+                  type="text"
+                  danger
+                  icon={<LogoutOutlined />}
+                  onClick={onLogout}
+                  size="small"
+                >
+                  退出登录
+                </Button>
+              </Space>
+            </div>
+          </Layout.Header>
+          <Layout.Content className="app-content">
+            <Routes>
+              <Route path="/" element={<Dashboard />} />
+              {member.is_superadmin && <Route path="/sites" element={<Sites isSuperadmin={true} />} />}
+              <Route path="/rules" element={<Rules />} />
+              <Route path="/payments" element={<Payments />} />
+              <Route path="/accounts" element={<Accounts />} />
+              <Route path="/wallet" element={<Wallet />} />
+              <Route path="/settings" element={<SiteSettings />} />
+              <Route path="/settlements" element={<Settlements />} />
+              <Route path="/sold" element={<Orders kind="sold" />} />
+              <Route path="/receive" element={<Orders kind="receive" />} />
+              <Route path="/orders" element={<Orders kind="all" />} />
+              <Route path="*" element={<Navigate to="/" replace />} />
+            </Routes>
+          </Layout.Content>
+        </Layout>
       </Layout>
-    </Layout>
     </MemberContext.Provider>
   )
 }

distribution-admin/src/style.css

@@ -8,17 +8,56 @@
   box-sizing: border-box;
 }
 
-body {
+html,
+body,
+#root {
+  height: 100%;
   margin: 0;
+  padding: 0;
 }
 
 .app {
+  height: 100vh;
   min-height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+}
+
+.app-sider {
+  height: 100vh !important;
+  position: sticky !important;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  flex-shrink: 0;
+  z-index: 100;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.12);
+}
+
+.app-sider .ant-layout-sider-children {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.app-sider .ant-layout-sider-children::-webkit-scrollbar {
+  width: 4px;
+}
+.app-sider .ant-layout-sider-children::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+}
+.app-sider .ant-layout-sider-children::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 .brand {
   height: 64px;
-  padding: 20px 20px;
+  line-height: 64px;
+  padding: 0 20px;
   color: #fff;
   font-size: 16px;
   font-weight: 600;
@@ -26,9 +65,24 @@ body {
   display: flex;
   align-items: center;
   gap: 10px;
+  flex-shrink: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.app-layout {
+  height: 100vh;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+  background: #f5f7fa;
 }
 
 .header {
+  flex-shrink: 0;
+  height: 64px;
+  line-height: 64px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -36,6 +90,7 @@ body {
   padding: 0 24px;
   border-bottom: 1px solid #edf0f5;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+  z-index: 99;
 }
 
 .header-left {
@@ -56,6 +111,29 @@ body {
   gap: 8px;
 }
 
+.app-content {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #f5f7fa;
+}
+
+.app-content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.app-content::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+.app-content::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+.app-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 .page {
   width: 100%;
   padding: 24px;