封装 Header 和 Navbar 组件，调整用户界面

src/components/page.tsx

@@ -8,14 +8,25 @@ export type PageProps = {
 export default function Page(props: ComponentProps<'main'> & PageProps) {
   return (
     <main {...props} className={merge(
-      `flex-auto flex gap-4`,
-      {
-        full: `bg-white rounded-tl-xl p-4 flex-col overflow-auto`,
-        blank: `items-stretch pb-4 pr-4 overflow-hidden`,
-      }[props.mode ?? 'full'],
-      props.className,
+      `flex-auto rounded-tl-xl overflow-hidden relative`,
     )}>
-      {props.children}
+
+      {/* background */}
+      <div className={`absolute inset-0 overflow-hidden`}>
+        <div className={`absolute w-screen h-screen bg-gray-50`}></div>
+        <div className={`absolute w-[2000px] h-[2000px] -left-[1000px] -top-[1000px] bg-radial from-blue-50 from-10% to-transparent to-50%`}></div>
+        <div className={`absolute w-[2000px] h-[2000px] -right-[1000px] -top-[1000px] bg-radial from-blue-50 from-10% to-transparent to-50%`}></div>
+        <div className={`absolute w-[2000px] h-[2000px] left-[calc(50%-1000px)] -bottom-[1000px] bg-radial from-blue-50 from-10% to-transparent to-50%`}></div>
+      </div>
+
+      {/* content */}
+      <div className={merge(
+        `relative w-full h-full`,
+        `flex flex-col gap-4 p-4 overflow-auto`,
+        props.className,
+      )}>
+        {props.children}
+      </div>
     </main>
   )
 }