43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import {ReactNode} from 'react'
|
|
import {Shell, Content, Header, Navbar, Mask} from './clients'
|
|
|
|
export default function Template(props: {
|
|
children: ReactNode
|
|
}) {
|
|
return (
|
|
<div className="relative h-dvh overflow-hidden">
|
|
{/* 外壳 */}
|
|
<Shell>
|
|
<div className="col-start-1 row-start-1 row-span-2 bg-card overflow-hidden relative z-20">
|
|
<Navbar/>
|
|
</div>
|
|
|
|
<div className="col-start-2 row-start-1 bg-card overflow-hidden relative z-20">
|
|
<Header/>
|
|
</div>
|
|
|
|
<svg className="col-start-2 row-start-2 w-full h-full z-20 pointer-events-none" preserveAspectRatio="none">
|
|
<defs>
|
|
<mask id="top-left-rounded-mask">
|
|
<rect width="100%" height="100%" fill="white"/>
|
|
<circle cx="16" cy="16" r="16" fill="black"/>
|
|
<rect x="16" y="0" width="100%" height="32" fill="black"/>
|
|
<rect x="0" y="16" width="32" height="100%" fill="black"/>
|
|
<rect x="16" y="16" width="100%" height="100%" fill="black"/>
|
|
</mask>
|
|
</defs>
|
|
<rect width="100%" height="100%" className="fill-card" mask="url(#top-left-rounded-mask)"/>
|
|
</svg>
|
|
|
|
{/* 遮罩层 */}
|
|
<Mask/>
|
|
</Shell>
|
|
|
|
{/* 内容 */}
|
|
<Content>
|
|
{props.children}
|
|
</Content>
|
|
</div>
|
|
)
|
|
}
|