管理后台布局
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}