Logo
RavenSaaS Docs

管理后台布局

RavenSaaS 内置了一个管理后台布局系统,你可以根据自己的需求开发管理后台系统。

提示

你可以在任何路径下实现一个新的管理后台布局,只需要 import 内置的 DashboardLayout 组件,传递侧边栏 sidebar 数据即可。

添加管理后台布局

参考系统内置的 admin 系统布局逻辑:

布局实现示例

app/admin/layout.tsx
1import DashboardLayout from "@/components/admin/dashboard/layout";
2import { ReactNode, Suspense } from "react";
3import type { Sidebar as SidebarType } from "@/types/blocks/sidebar";
4import { serverGetUserInfo } from "@/lib/common";
5import { redirect } from "next/navigation";
6import { navigationConfig } from "@/types/navigation";
7import { AdminSkeleton } from "@/components/skeletons/admin-skeleton";
8
9export default async function AdminLayout({
10  children,
11}: {
12  children: ReactNode;
13}) {
14  const userInfo = await serverGetUserInfo();
15  if (!userInfo?.uuid || !userInfo?.email) {
16    redirect("/auth/signin");
17  }
18
19  const adminEmails = process.env.ADMIN_EMAILS?.split(",");
20  if (!adminEmails?.includes(userInfo.email)) {
21    return (
22      <div className="w-screen h-screen flex items-center justify-center">
23        No access
24      </div>
25    );
26  }
27
28  const sidebarConfig: SidebarType = {
29    brand:  {
30      title: process.env.NEXT_PUBLIC_BRAND_NAME || "RavenSaaS",
31      logo: {
32        src: "/logo.png",
33        alt: process.env.NEXT_PUBLIC_BRAND_NAME || "RavenSaaS",
34      },
35    },
36    nav: {
37      items: [
38      {
39        title: "Users",
40        url: "/admin/users",
41        icon: "RiUserLine",
42      },
43      {
44        title: "Orders",
45        icon: "RiOrderPlayLine",
46        url: "/admin/orders",
47      },
48      {
49        title: "Blog",
50        url: "/admin/posts",
51        icon: "RiBookLine",
52      },
53      {
54        title: "Affiliate",
55        url: "/admin/affiliates",
56        icon: "RiTeamLine",
57      },
58    ],
59    },
60    social: {
61      items: [
62      {
63        title: "Home",
64        url: "/",
65        target: "_blank",
66        icon: "RiHomeLine",
67      },
68      {
69        title: "Github",
70        url: "https://github.com/",
71        target: "_blank",
72        icon: "RiGithubLine",
73      },
74      {
75        title: "Discord",
76        url: "https://discord.gg/",
77        target: "_blank",
78        icon: "RiDiscordLine",
79      },
80      {
81        title: "X",
82        url: "https://x.com/",
83        target: "_blank",
84        icon: "RiTwitterLine",
85      },
86    ],
87    },
88  };
89
90  return (
91    <DashboardLayout sidebar={sidebarConfig}>
92      <Suspense fallback={<AdminSkeleton />}>{children}</Suspense>
93    </DashboardLayout>
94  );
95}