refactor: PlatformSplitLayout 应用 Stitch 设计规范
- 移除 section 的 border/shadow/rounded-[2rem](No-Line Rule) - 侧边栏和右面板移除 border,改用表面层级色差分离 - 背景改用 surface-container-low 色调 - 移除 metrics 芯片的边框 - IntakeMainLayout 移动端隐藏右面板
This commit is contained in:
parent
1a8367a9da
commit
e333f68cc3
@ -28,7 +28,7 @@ export function IntakeMainLayout({
|
||||
metrics={metrics}
|
||||
fitParentHeight
|
||||
className="!min-h-0 [&>main]:!pl-4 [&>main]:!pr-0 [&>main>section]:!mx-0 [&>main>section]:!h-full [&>main>section]:!max-w-none"
|
||||
rightPanelClassName="!w-[224px] !min-w-[224px] !max-w-[224px] !overflow-hidden p-3"
|
||||
rightPanelClassName="!w-[224px] !min-w-[224px] !max-w-[224px] !overflow-hidden p-3 max-lg:!hidden"
|
||||
leftContent={leftContent}
|
||||
rightContent={rightContent}
|
||||
/>
|
||||
|
||||
@ -160,23 +160,22 @@ export function PlatformSplitLayout({
|
||||
|
||||
<main
|
||||
className={cn(
|
||||
'flex min-h-0 flex-1 overflow-hidden px-8',
|
||||
'max-lg:!px-3 max-lg:!pb-0',
|
||||
fitParentHeight ? 'pb-0' : 'pb-8',
|
||||
'flex min-h-0 flex-1 overflow-hidden',
|
||||
'max-lg:!px-0 max-lg:!pb-0',
|
||||
fitParentHeight ? 'pb-0' : '',
|
||||
)}
|
||||
>
|
||||
<section
|
||||
className="mx-auto flex min-h-0 w-full max-w-[1720px] flex-1 overflow-hidden max-lg:!mx-0 max-lg:!max-w-none max-lg:!rounded-none max-lg:!border-0 max-lg:!shadow-none rounded-[2rem] border border-white/60 shadow-apple-xl"
|
||||
className="mx-auto flex min-h-0 w-full max-w-[1720px] flex-1 overflow-hidden max-lg:!mx-0 max-lg:!max-w-none max-lg:!rounded-none"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-surface-container)',
|
||||
backgroundColor: 'var(--color-surface-container-low)',
|
||||
}}
|
||||
>
|
||||
{mainContent ? (
|
||||
<>
|
||||
<aside
|
||||
className="w-[280px] max-w-[22vw] shrink-0 overflow-y-auto border-r p-3 max-lg:!w-full max-lg:!max-w-none"
|
||||
className="w-[280px] max-w-[22vw] shrink-0 overflow-y-auto p-3 max-lg:!w-full max-lg:!max-w-none"
|
||||
style={{
|
||||
borderColor: 'var(--color-separator)',
|
||||
backgroundColor: 'var(--color-surface-container-lowest)',
|
||||
}}
|
||||
>
|
||||
@ -190,11 +189,10 @@ export function PlatformSplitLayout({
|
||||
{rightContent ? (
|
||||
<aside
|
||||
className={cn(
|
||||
'w-[var(--layout-right-panel-width)] max-w-[var(--layout-right-panel-max-width)] shrink-0 overflow-y-auto border-l p-0 max-lg:hidden',
|
||||
'w-[var(--layout-right-panel-width)] max-w-[var(--layout-right-panel-max-width)] shrink-0 overflow-y-auto p-0 max-lg:hidden',
|
||||
rightPanelClassName,
|
||||
)}
|
||||
style={{
|
||||
borderColor: 'var(--color-separator)',
|
||||
backgroundColor: 'var(--color-surface-container-lowest)',
|
||||
}}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user