Browse Source

fix: 优化布局滚动条分离与全局滚动条美化

feature/x1-owen-debug
root 4 weeks ago
parent
commit
27050366fa
  1. 4
      src/X1.WebUI/src/components/layout/Content.tsx
  2. 4
      src/X1.WebUI/src/components/layout/DashboardLayout.tsx
  3. 2
      src/X1.WebUI/src/components/layout/Sidebar.tsx
  4. 26
      src/X1.WebUI/src/index.css

4
src/X1.WebUI/src/components/layout/Content.tsx

@ -10,8 +10,8 @@ export function Content({ children }: ContentProps) {
const { isCollapsed } = useSidebarToggle(); const { isCollapsed } = useSidebarToggle();
return ( return (
<main className="flex-1 p-0 transition-all duration-300 ease-in-out"> <main className="flex-1 min-h-0 overflow-y-auto p-0 transition-all duration-300 ease-in-out">
<div className="w-full"> <div className="w-full min-h-0">
{children} {children}
</div> </div>
</main> </main>

4
src/X1.WebUI/src/components/layout/DashboardLayout.tsx

@ -16,9 +16,9 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
return ( return (
<div className="h-screen flex flex-col"> <div className="h-screen flex flex-col">
<Header /> <Header />
<div className="flex flex-1"> <div className="flex flex-1 min-h-0">
<Sidebar /> <Sidebar />
<div className="flex-1 flex flex-col transition-all duration-300 ease-in-out"> <div className="flex-1 flex flex-col min-h-0">
<Tabs /> <Tabs />
<Content> <Content>
{children} {children}

2
src/X1.WebUI/src/components/layout/Sidebar.tsx

@ -37,7 +37,7 @@ export function Sidebar() {
isCollapsed ? 'w-14' : 'w-64' isCollapsed ? 'w-14' : 'w-64'
)} )}
> >
<nav className="flex-1 mt-4 space-y-1 px-2 overflow-auto"> <nav className="flex-1 mt-4 space-y-1 px-2 overflow-y-auto">
{filteredMenuItems.map((item) => ( {filteredMenuItems.map((item) => (
<SidebarMenuItem <SidebarMenuItem
key={item.href} key={item.href}

26
src/X1.WebUI/src/index.css

@ -74,3 +74,29 @@
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
/* 优化所有滚动条样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15);
border-radius: 8px;
transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.25);
}
::-webkit-scrollbar-track {
background: transparent;
}
/* Firefox 支持 */
* {
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.15) transparent;
}
Loading…
Cancel
Save