diff --git a/distribution-admin/src/AppShell.tsx b/distribution-admin/src/AppShell.tsx index e5ccbb0..ed3eaf1 100644 --- a/distribution-admin/src/AppShell.tsx +++ b/distribution-admin/src/AppShell.tsx @@ -74,93 +74,93 @@ function MainLayout({ member, onLogout }: { member: CurrentMember; onLogout: () return ( - -
- - HFB 分销后台 -
- - - - -
- {member.is_superadmin ? ( - - 平台全局管理模式 - - ) : ( - - {member.site_name || '当前分销站点'} · {member.domain || member.site_code} - - )} - - 主站 hao858.com · 分销管理系统 - + +
+ + HFB 分销后台
-
- - {member.site_code && ( - + + + + +
+ {member.is_superadmin ? ( + + 平台全局管理模式 + + ) : ( + + {member.site_name || '当前分销站点'} · {member.domain || member.site_code} + )} -
- - - {member.nickname || member.username} - - {roleLabel} -
- - -
-
- - - } /> - {member.is_superadmin && } />} - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - + + 主站 hao858.com · 分销管理系统 + +
+
+ + {member.site_code && ( + + )} +
+ + + {member.nickname || member.username} + + {roleLabel} +
+ +
+
+ + + + } /> + {member.is_superadmin && } />} + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + - ) } diff --git a/distribution-admin/src/style.css b/distribution-admin/src/style.css index 2d7e552..fc013d2 100644 --- a/distribution-admin/src/style.css +++ b/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;