fix(layout): 修復主頁大空白 + Metrics Strip 右側溢出
新增 AppLayout fullBleed prop,主頁 opt-out p-6 包裝, 移除 page.tsx 的 margin: '-24px' hack。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -175,7 +175,8 @@ export default function Home({ params }: { params: { locale: string } }) {
|
||||
]
|
||||
|
||||
return (
|
||||
<AppLayout locale={locale} showBackground={false}>
|
||||
<AppLayout locale={locale} showBackground={false} fullBleed>
|
||||
{/* fullBleed: AppLayout 不加 p-6,直接填滿 header 以下空間 */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -183,7 +184,6 @@ export default function Home({ params }: { params: { locale: string } }) {
|
||||
background: '#f5f4ed',
|
||||
fontFamily: 'var(--font-body), monospace',
|
||||
overflow: 'hidden',
|
||||
margin: '-24px',
|
||||
}}>
|
||||
|
||||
{/* ── Metrics Strip ─────────────────────────────────────────────────── */}
|
||||
|
||||
@@ -29,6 +29,8 @@ interface AppLayoutProps {
|
||||
locale: string
|
||||
children: React.ReactNode
|
||||
showBackground?: boolean
|
||||
/** 主頁用:移除 pt-16 + p-6,讓 children 自行控制佈局 */
|
||||
fullBleed?: boolean
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
@@ -45,6 +47,7 @@ export function AppLayout({
|
||||
locale,
|
||||
children,
|
||||
showBackground = true,
|
||||
fullBleed = false,
|
||||
}: AppLayoutProps) {
|
||||
const [collapsed, setCollapsed] = useState(false)
|
||||
const [mounted, setMounted] = useState(false)
|
||||
@@ -128,14 +131,19 @@ export function AppLayout({
|
||||
<main
|
||||
className={cn(
|
||||
'relative z-10',
|
||||
'pt-16', // Header height
|
||||
'pt-16', // Header height (64px)
|
||||
'transition-all duration-300 ease-out',
|
||||
collapsed ? 'ml-16' : 'ml-64'
|
||||
)}
|
||||
>
|
||||
<div className="p-6">
|
||||
{children}
|
||||
</div>
|
||||
{fullBleed ? (
|
||||
// fullBleed: 無 p-6,children 自行控制佈局(主頁用)
|
||||
children
|
||||
) : (
|
||||
<div className="p-6">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user