样式修改
This commit is contained in:
1 parent
d872f4e177
commit
5c5632967c
3 files changed
+20
-2
No files matched your search
@@ -20,8 +20,11 @@ export function WorkspaceContainer({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
// h-full 而非 h-screen:本容器恒在 WorkspaceRoutes 的 SidebarInset(flex-1,确定高度)下,
|
||||
// h-full 既跟随容器高度(无界等嵌套不再锁死整屏),又修掉原 h-screen=100vh 比可用区域
|
||||
// 高出一个页头高度的溢出。
|
||||
return (
|
||||
<div className={cn("flex h-screen w-full flex-col", className)} {...props}>
|
||||
<div className={cn("flex h-full w-full flex-col", className)} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -18,8 +18,11 @@ function PageLayout() {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
|
||||
// h-full(100%)而非 h-screen(100vh):配合 globals.css 的 html/body/#root height:100%
|
||||
// 高度链,根布局跟随容器高度。全屏下 100% 解析到视口,与 h-screen 等价;无界等嵌套
|
||||
// 下容器不占满整屏时,高度才能正确收缩而非锁死整屏。
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-muted/20">
|
||||
<div className="h-full flex flex-col bg-muted/20">
|
||||
{sidebarEnabled && <Header collapsed={collapsed} />}
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{sidebarEnabled && (
|
||||
|
||||
@@ -324,6 +324,18 @@
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
/* 打通高度链:html/body/#root 取满父级高度,使下游用 h-full(100%) 的根布局
|
||||
(PageRoutes 的 PageLayout)跟随容器尺寸而非视口。
|
||||
- 全屏:100% 逐级解析到视口,与原先的 h-screen 等价,无视觉变化;
|
||||
- 无界(wujie)等嵌套:wujie 会把子应用的 html/body 选择器作用到 <wujie-app>
|
||||
容器,于是高度收缩到容器而非整屏 —— 这正是「高度对齐容器」所需。
|
||||
只设 height、不设 overflow,因此不影响 Landing 等需要自然滚动的页面。 */
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[data-sidebar="menu-button"][data-active="true"] {
|
||||
box-shadow: inset 3px 0 0 var(--primary);
|
||||
font-weight: 600;
|
||||
|
||||
Reference in new issue
Block a user