feat: 顶部面包屑加上图标

messages/en.json

@@ -60,7 +60,7 @@
       "graphicCode": "Graphic verification code"
     },
     "menu-manage":{
-      "title":"Title",
+      "title":"Menu",
       "name":"Menu Name",
       "nameTip":"Please fill in the internationalization field",
       "path":"Path",

src/components/GlobalHeader/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 白雾茫茫丶<baiwumm.com>
  * @Date: 2024-12-10 11:01:36
  * @LastEditors: 白雾茫茫丶<baiwumm.com>
- * @LastEditTime: 2025-01-15 09:57:17
+ * @LastEditTime: 2025-01-15 16:08:43
  * @Description: 头部布局
  */
 'use client';
@@ -19,24 +19,33 @@ import ThemeModeButton from '@/components/ThemeModeButton';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import { MenuIconMap } from '@/constants/icon';
 import { ROUTES_NAME } from '@/enums';
+import { useUserStore } from '@/store/userStore';
 
 export default function GlobalHeader() {
   const t = useTranslations('Route');
   const segments = useSelectedLayoutSegments();
+
+  // 菜单列表
+  const menuList = useUserStore((state) => state.menuList);
   return (
     <header className="sticky w-full flex gap-4 justify-between items-center top-0 h-16 group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 shadow-md dark:shadow-[rgba(255,255,255,.15)] backdrop-blur dark:bg-transparent transition-all px-4 z-50">
       <div className="flex items-center gap-2">
         <SidebarTrigger className="-ml-1" />
         <Divider orientation="vertical" className="mr-2 h-4" />
         <Breadcrumbs>
-          {segments.map((path) => (
-            <BreadcrumbItem
-              key={path}
-              startContent={<div className="breadcrumb-icon">{MenuIconMap[path as ROUTES_NAME]}</div>}
-            >
-              {t(path as ROUTES_NAME)}
-            </BreadcrumbItem>
-          ))}
+          {segments.map((path) => {
+            const menuItem = menuList.find((item) => item.name === path) as App.SystemManage.Menu;
+            return (
+              <BreadcrumbItem
+                key={path}
+                startContent={
+                  menuItem?.icon ? <div className="breadcrumb-icon">{MenuIconMap[menuItem.icon]}</div> : undefined
+                }
+              >
+                {t(path as ROUTES_NAME)}
+              </BreadcrumbItem>
+            );
+          })}
         </Breadcrumbs>
       </div>
       <div className="flex">

src/components/NavMain/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 白雾茫茫丶<baiwumm.com>
  * @Date: 2024-12-06 14:47:26
  * @LastEditors: 白雾茫茫丶<baiwumm.com>
- * @LastEditTime: 2025-01-15 10:11:40
+ * @LastEditTime: 2025-01-15 15:59:51
  * @Description: 菜单布局
  */
 'use client';
@@ -26,6 +26,7 @@ import { MenuIconMap } from '@/constants/icon';
 import { get } from '@/lib/radash';
 import { convertFlatDataToTree } from '@/lib/utils';
 import { getMenuList } from '@/services/system-manage/menu-manage';
+import { useUserStore } from '@/store/userStore';
 
 export default function NavMain() {
   const t = useTranslations('Route');
@@ -38,6 +39,7 @@ export default function NavMain() {
   // 获取菜单列表
   const { data: menuList = [] } = useRequest(async () => {
     const res = get(await getMenuList(), 'data', []);
+    useUserStore.setState({ menuList: res });
     return convertFlatDataToTree(res);
   });
 

src/middleware.ts

@@ -2,7 +2,7 @@
  * @Author: 白雾茫茫丶<baiwumm.com>
  * @Date: 2025-01-03 15:16:03
  * @LastEditors: 白雾茫茫丶<baiwumm.com>
- * @LastEditTime: 2025-01-13 13:54:37
+ * @LastEditTime: 2025-01-15 15:13:52
  * @Description: 全局中间件
  */
 
@@ -29,7 +29,9 @@ export default auth(async (req: NextRequest) => {
       return NextResponse.json(responseMessage(null, '请先登录', -1));
     }
     // 如果不是GET请求，返回一个带有消息的响应
-    // return NextResponse.json(responseMessage(null, '演示系统，禁止操作', -1));
+    if (!isProtectedRoute) {
+      return NextResponse.json(responseMessage(null, '演示系统，禁止操作', -1));
+    }
   }
 
   // 检查是否为不受保护的路由

src/store/userStore.ts

@@ -0,0 +1,18 @@
+/*
+ * @Author: 白雾茫茫丶<baiwumm.com>
+ * @Date: 2025-01-15 15:54:17
+ * @LastEditors: 白雾茫茫丶<baiwumm.com>
+ * @LastEditTime: 2025-01-15 15:57:00
+ * @Description: 用户相关信息
+ */
+import { create } from 'zustand';
+
+type UserState = {
+  menuList: App.SystemManage.Menu[];
+  setMenuList: (list: App.SystemManage.Menu[]) => void;
+};
+
+export const useUserStore = create<UserState>((set) => ({
+  menuList: [],
+  setMenuList: (list) => set({ menuList: list }),
+}));