WuYongJie/furniture-3d-system-Wu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: PlatformSplitLayout 应用 Stitch 设计规范

Browse Source 
- 移除 section 的 border/shadow/rounded-[2rem]（No-Line Rule）
- 侧边栏和右面板移除 border，改用表面层级色差分离
- 背景改用 surface-container-low 色调
- 移除 metrics 芯片的边框
- IntakeMainLayout 移动端隐藏右面板
This commit is contained in:
WuYongJie 2026-06-12 10:09:41 +08:00
parent 1a8367a9da
commit e333f68cc3
2 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
furniture-3d-system/src/app/intake/IntakeMainLayout.tsx
View File

@ -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}
/>

16
furniture-3d-system/src/components/platform/PlatformSplitLayout.tsx
View File

@ -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)',
}}
>