开启 ppr 优化渲染性能

src/app/admin/layout.tsx

@@ -1,39 +1,42 @@
 import {ReactNode} from 'react'
-import Header from './_client/header'
-import Navbar from './_client/navbar'
-import Layout from './_client/layout'
-import {getProfile} from '@/actions/auth'
-import {redirect} from 'next/navigation'
-import {ChangePasswordDialog} from '@/components/composites/dialogs/change-password-dialog'
-import {RealnameAuthDialog} from '@/components/composites/dialogs/realname-auth-dialog'
+import {Shell, Content, Header, Navbar, Mask} from './clients'
 
-export type AdminLayoutProps = {
+export default function Template(props: {
   children: ReactNode
-}
-
-export default async function AdminLayout(props: AdminLayoutProps) {
-  const resp = await getProfile()
-  const profile = resp.success ? resp.data : null
-
-  if (!profile) {
-    redirect('/login')
-  }
-
+}) {
   return (
-    <Layout
-      navbar={<Navbar/>}
-      header={<Header profile={profile}/>}
-    >
-      {props.children}
-      <RealnameAuthDialog
-        hasAuthenticated={!!profile.id_token}
-        triggerClassName="hidden"
-        defaultOpen={!profile.id_token}
-      />
-      <ChangePasswordDialog
-        triggerClassName="hidden"
-        defaultOpen={!profile.has_password}
-      />
-    </Layout>
+    <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>
   )
 }