fix(layout): hide default dashboard

2026-06-12 12:42:19 +08:00
parent bb7311589c
commit 757eea49de
4 changed files with 47 additions and 10 deletions
@@ -6,6 +6,7 @@ import authOptions from "@app/api/auth/[...nextauth]/options";
 import { Header } from "@components/header";
 import { Title } from "@components/title";
 import { MapSkeleton } from "@components/loading/MapSkeleton";
+import { AppSider } from "@components/sider/AppSider";
 import { ThemedLayout } from "@refinedev/mui";
 import { getServerSession } from "next-auth/next";
 import { redirect } from "next/navigation";
@@ -35,6 +36,7 @@ export default async function MainLayout({
    <ThemedLayout
      Header={Header}
      Title={Title}
+      Sider={AppSider}
      childrenBoxProps={{
        sx: { height: "100vh", p: 0 },
      }}
@@ -3,6 +3,7 @@ import { cookies } from "next/headers";
 import React, { Suspense } from "react";
 import { RefineContext } from "./_refine_context";
 import { META_DATA } from "@config/config";
+import { DevtoolsProvider } from "@providers/devtools";

 export const metadata: Metadata = META_DATA;

@@ -19,7 +20,9 @@ export default async function RootLayout({
    <html lang="en">
      <body>
        <Suspense>
-          <RefineContext defaultMode={defaultMode}>{children}</RefineContext>
+          <DevtoolsProvider>
+            <RefineContext defaultMode={defaultMode}>{children}</RefineContext>
+          </DevtoolsProvider>
        </Suspense>
      </body>
    </html>
@@ -0,0 +1,17 @@
+"use client";
+
+import { ThemedSider, type RefineThemedLayoutSiderProps } from "@refinedev/mui";
+
+export const AppSider: React.FC<RefineThemedLayoutSiderProps> = (props) => {
+  return (
+    <ThemedSider
+      {...props}
+      render={({ items, logout }) => (
+        <>
+          {items}
+          {logout}
+        </>
+      )}
+    />
+  );
+};
@@ -1,16 +1,31 @@
 "use client";

-import {
-  DevtoolsPanel,
-  DevtoolsProvider as DevtoolsProviderBase,
-} from "@refinedev/devtools";
-import React from "react";
+import React, { Suspense } from "react";
+
+const RefineDevtools = React.lazy(async () => {
+  const { DevtoolsPanel, DevtoolsProvider: DevtoolsProviderBase } =
+    await import("@refinedev/devtools");
+
+  return {
+    default: (props: React.PropsWithChildren) => (
+      <DevtoolsProviderBase>
+        {props.children}
+        <DevtoolsPanel />
+      </DevtoolsProviderBase>
+    ),
+  };
+});

 export const DevtoolsProvider = (props: React.PropsWithChildren) => {
+  if (process.env.NODE_ENV !== "development") {
+    return <>{props.children}</>;
+  }
+
  return (
-    <DevtoolsProviderBase>
-      {props.children}
-      <DevtoolsPanel />
-    </DevtoolsProviderBase>
+    <Suspense fallback={props.children}>
+      <RefineDevtools>
+        {props.children}
+      </RefineDevtools>
+    </Suspense>
  );
 };