From 5cb02f44b21bc15c393cda36b93e4d1f6426e060 Mon Sep 17 00:00:00 2001
From: abearxiong <xiongxiao@xiongxiao.me>
Date: Sun, 22 Feb 2026 04:24:09 +0800
Subject: [PATCH] feat: update layout styles and iframe source for improved UI
 consistency

---
 src/modules/layout/index.tsx |  6 ++---
 src/pages/page.tsx           |  2 +-
 src/routes/__root.tsx        | 49 ++++++++++++++++++++++--------------
 3 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/modules/layout/index.tsx b/src/modules/layout/index.tsx
index 0aec4a1..08254bf 100644
--- a/src/modules/layout/index.tsx
+++ b/src/modules/layout/index.tsx
@@ -61,13 +61,13 @@ export const LayoutMain = (props: LayoutMainProps) => {
   }, []);
 
   return (
-    <div className='flex gap-2 text-lg w-full relative'>
+    <div className='flex gap-2 text-lg w-full h-12 items-center'>
       <div
-        className={clsx('layout-menu items-center  w-full', !mount && 'invisible!')}
+        className={clsx('layout-menu items-center bg-gray-200 w-full h-full', !mount && 'invisible!')}
         style={{
           cursor: isElectron ? 'move' : 'default',
         }}>
-        <div className='flex grow justify-between pl-4 py-2 items-center bg-gray-200'>
+        <div className='flex grow justify-between pl-4 py-2 items-center '>
           <div className='flex items-center gap-2'>
             <div className='text-xl font-bold '>{props.title}</div>
             <div className='flex items-center gap-2 text-sm '>
diff --git a/src/pages/page.tsx b/src/pages/page.tsx
index 2a7d2bf..9cc6a0e 100644
--- a/src/pages/page.tsx
+++ b/src/pages/page.tsx
@@ -1,7 +1,7 @@
 export default function Home() {
   return (
     <div className="flex h-full items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <iframe src="/root/router-studio" className="w-full  border-0" style={{
+      <iframe src="/root/router-studio?noHeader=true" className="w-full  border-0" style={{
         height: 'calc(100vh - 48px)'
       }} />
     </div>
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index cc7922e..14e2da2 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,33 +1,45 @@
-import { Link, Outlet, createRootRoute, useNavigate } from '@tanstack/react-router'
+import { LayoutMain } from '@/modules/layout'
+
+import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { Toaster } from '@/components/ui/sonner'
 import { AuthProvider } from '@/pages/auth'
 import { TooltipProvider } from '@/components/ui/tooltip'
-import { LayoutMain } from '@/modules/layout'
+import { Home } from 'lucide-react';
 export const Route = createRootRoute({
   component: RootComponent,
 })
 
+const BaseHeader = (props: { children?: React.ReactNode }) => {
+  if (props.children) {
+    return props.children
+  }
+  return (
+    <>
+      <div className="flex gap-2 text-lg w-full h-12 items-center">
+        <div className='px-2'>
+          <Link
+            to="/"
+            activeProps={{
+              className: 'font-bold',
+            }}
+            activeOptions={{ exact: true }}
+          >
+            <Home className='w-5 h-5' />
+          </Link>
+        </div>
+      </div>
+      <hr />
+    </>
+  )
+}
 function RootComponent() {
   return (
-    <div className='h-full w-full overflow-hidden'>
-      {/* 
-      <div className="p-2 flex gap-2 text-lg">
-        <Link
-          to="/"
-          activeProps={{
-            className: 'font-bold',
-          }}
-          activeOptions={{ exact: true }}
-        >
-          Home
-        </Link>
-      </div>
-      <hr /> */}
+    <div className='h-full overflow-hidden'>
+      <BaseHeader><LayoutMain /></BaseHeader>
       <AuthProvider mustLogin={true}>
-        <LayoutMain />
         <TooltipProvider>
-          <main className='h-[calc(100%-4rem)] overflow-auto scrollbar'>
+          <main className='h-[calc(100%-3rem)] overflow-auto scrollbar'>
             <Outlet />
           </main>
         </TooltipProvider>
@@ -35,6 +47,5 @@ function RootComponent() {
       <TanStackRouterDevtools position="bottom-right" />
       <Toaster />
     </div>
-
   )
 }
\ No newline at end of file