面包屑配置方便界面切换

src/Router.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { Routes, Route, Outlet, Link, createBrowserRouter } from "react-router-dom";
+import {
+  Routes,
+  Route,
+  Outlet,
+  Link,
+  createBrowserRouter,
+} from "react-router-dom";
 import Layout from "@/components/Layout/Layout";
 // import Home from "@/pages/Home/Home";
 import About from "@/pages/About/About";
@@ -12,13 +18,13 @@ import DuplicateFile from "@/pages/DuplicateFile/DuplicateFile";
 import CalculateDuplicateFiles from "@/pages/DuplicateFile/CalculateDuplicateFiles";
 import DuplicateFileInfo from "@/pages/DuplicateFile/FileInfo";
 // import CalculateListPage from "@/pages/DuplicateFile/CalculateListPage";
-import CalculateListPage from '@/pages/DuplicateFile/CalculateListPage'
-import ManageDuplicateFiles from '@/pages/DuplicateFile/ManageDuplicateFiles'
-import FilesManage from '@/pages/DuplicateFile/FilesManage'
+import CalculateListPage from "@/pages/DuplicateFile/CalculateListPage";
+import ManageDuplicateFiles from "@/pages/DuplicateFile/ManageDuplicateFiles";
+import FilesManage from "@/pages/DuplicateFile/FilesManage";
 
 /* 收藏夹管理 */
-import BookmarksIndex from '@/pages/Bookmarks/List'
-import BookmarksList from '@/pages/Bookmarks/List'
+import BookmarksIndex from "@/pages/Bookmarks/List";
+import BookmarksList from "@/pages/Bookmarks/List";
 /* export default function Router() {
   return (
     <Routes>
@@ -39,90 +45,93 @@ import BookmarksList from '@/pages/Bookmarks/List'
   );
 } */
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    id: "root",
-    element: <Layout />,
-    /* 
+const router = createBrowserRouter(
+  [
+    {
+      path: "/",
+      id: "root",
+      element: <Layout />,
+      /*
     // loader: rootLoader,
     每个路由都可以定义一个“加载器”函数，以便在路由元素呈现之前向路由元素提供数据。
       loader: async () => {
         return fakeDb.from("teams").select("*");
       },
     */
-    children: [
-      {
-        path: "",
-        element: <DuplicateFileIndex />,
-        children: [
-          {
-            path: "",
-            element: <DuplicateFile />,
-          },
-          {
-            path: "info/:fileId",
-            element: <DuplicateFileInfo />,
-          },
-          {
-            path: "calculate/:fileId",
-            element: <CalculateDuplicateFiles />,
-          },
-          {
-            path: "calculate-list/:fileId",
-            element: <CalculateListPage />,
-          },
-          {
-            path: "ManageDuplicateFiles/:fileId",
-            element: <ManageDuplicateFiles />,
-          },
-          {
-            path: "files-manage/:fileId",
-            element: <FilesManage />,
-          },
-        ]
-      },
-      {
-        path: "about",
-        element: <About />,
-      },
-      {
-        path: "finder",
-        element: <Finder />,
-      },
-      {
-        path: "setting",
-        element: <Setting />,
-      },
-      {
-        path: "file-sort",
-        element: <FileSort />,
-      },
-      {
-        path: "file-clear",
-        element: <FileClear />,
-      }
-      // {
-      //   path: "duplicate-file",
-      //   element: <DuplicateFileIndex />,
-      //   children: [
-      //     {
-      //       path: "",
-      //       element: <DuplicateFile />,
-      //     },
-      //     {
-      //       path: "info/:fileId",
-      //       element: <DuplicateFileInfo />,
-      //     }
-      //   ]
-      // },
-    ],
-  },
-], {
-  future: {
-    // Normalize `useNavigation()`/`useFetcher()` `formMethod` to uppercase
-    v7_normalizeFormMethod: true,
+      children: [
+        {
+          path: "",
+          element: <DuplicateFileIndex />,
+          children: [
+            {
+              path: "",
+              element: <DuplicateFile />,
+            },
+            {
+              path: "info/:fileId",
+              element: <DuplicateFileInfo />,
+            },
+            {
+              path: "calculate/:fileId",
+              element: <CalculateDuplicateFiles />,
+            },
+            {
+              path: "calculate-list/:fileId",
+              element: <CalculateListPage />,
+            },
+            {
+              path: "ManageDuplicateFiles/:fileId",
+              element: <ManageDuplicateFiles />,
+            },
+            {
+              path: "files-manage/:fileId",
+              element: <FilesManage />,
+            },
+          ],
+        },
+        {
+          path: "about",
+          element: <About />,
+        },
+        {
+          path: "finder",
+          element: <Finder />,
+        },
+        {
+          path: "setting",
+          element: <Setting />,
+        },
+        {
+          path: "file-sort",
+          element: <FileSort />,
+        },
+        {
+          path: "file-clear",
+          element: <FileClear />,
+        },
+        // {
+        //   path: "duplicate-file",
+        //   element: <DuplicateFileIndex />,
+        //   children: [
+        //     {
+        //       path: "",
+        //       element: <DuplicateFile />,
+        //     },
+        //     {
+        //       path: "info/:fileId",
+        //       element: <DuplicateFileInfo />,
+        //     }
+        //   ]
+        // },
+      ],
+    },
+  ],
+  {
+    future: {
+      // Normalize `useNavigation()`/`useFetcher()` `formMethod` to uppercase
+      v7_normalizeFormMethod: true,
+    },
   },
-});
+);
 
-export default router
+export default router;

src/components/Layout/Layout.tsx

@@ -1,13 +1,26 @@
 import * as React from "react";
-import { Routes, Route, Outlet, Link, useNavigate } from "react-router-dom";
+import {
+  Routes,
+  Route,
+  Outlet,
+  Link,
+  useNavigate,
+  useResolvedPath,
+  useLocation,
+} from "react-router-dom";
 import styles from "./Layout.module.less";
 // 监听 tauri 事件
 import { listen, Event as TauriEvent, UnlistenFn } from "@tauri-apps/api/event";
 import Menu from "../Menu/Menu";
-import { Affix } from "antd";
+import { Affix, Breadcrumb } from "antd";
+import userRouter from "@/Router";
+import { useState } from "react";
+import breadcrumbManage from "./breadcrumbManage";
 
 export default function Layout() {
   let navigate = useNavigate();
+  let location = useLocation();
+  const [placeholder, setPlaceholder] = useState<any[]>([]);
 
   function handleErr(msg: string) {
     console.log(msg);
@@ -21,9 +34,6 @@ export default function Layout() {
     const unListen: UnlistenFn[] = [];
     listen("routing", (e: TauriEvent<string>) => {
       navigate(e.payload);
-      // history.push({
-      //   pathname: e.payload,
-      // });
     })
       .then((ulf) => {
         unListen.push(ulf);
@@ -49,13 +59,25 @@ export default function Layout() {
       for (const ulf of unListen) ulf();
     };
   }, []);
+
+  React.useEffect(() => {
+    // 处理所有面包屑的事件和状态
+    breadcrumbManage({
+      setPlaceholder,
+      navigate,
+      location,
+    });
+  }, [location]);
+
   return (
     <div className={styles.box}>
       <div className={styles.menuBox}>
         <Menu></Menu>
       </div>
       <div className={styles.content}>
-        <div className={styles.placeholder}>留白</div>
+        <div className={styles.placeholder}>
+          <Breadcrumb items={placeholder} />
+        </div>
         <div className={styles.scrollY}>
           <Outlet />
         </div>

src/components/Layout/breadcrumbManage.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { NavigateFunction } from "react-router";
+import type { Location } from "@remix-run/router";
+export default ({
+  setPlaceholder,
+  navigate,
+  location,
+}: {
+  setPlaceholder: React.Dispatch<React.SetStateAction<any>>;
+  navigate: NavigateFunction;
+  location: Location;
+}) => {
+  const calculateFn = ({ title = "", path = "", isCallBack = true }) => {
+    if (isCallBack) {
+      return {
+        title: title,
+        path,
+        onClick: () => {
+          navigate(path, {
+            replace: true,
+          });
+        },
+      };
+    }
+    return {
+      title: title,
+    };
+  };
+  // 文件管理 的面包屑配置
+  if (location.pathname === "/") {
+    setPlaceholder([
+      calculateFn({
+        title: "文件管理",
+        isCallBack: false,
+      }),
+    ]);
+  }
+
+  // 文件详情 的面包屑配置
+  if (/^\/calculate\/[0-9]?$/.test(location.pathname)) {
+    setPlaceholder([
+      calculateFn({
+        title: "文件管理",
+      }),
+      calculateFn({ title: "文件详情", isCallBack: false }),
+    ]);
+  }
+  // 重复文件 的面包屑配置
+  if (/^\/calculate-list\/[0-9]?$/.test(location.pathname)) {
+    setPlaceholder([
+      calculateFn({
+        title: "文件管理",
+      }),
+      calculateFn({
+        title: "文件详情",
+        path: `${location.pathname}`.replace(/-list/g, ""),
+      }),
+      calculateFn({ title: "重复文件", isCallBack: false }),
+    ]);
+  }
+  // 管理文件 的面包屑配置
+  if (/^\/files-manage\/[0-9]?$/.test(location.pathname)) {
+    setPlaceholder([
+      calculateFn({
+        title: "文件管理",
+      }),
+      calculateFn({
+        title: "文件详情",
+        path: `${location.pathname}`.replace(/files-manage/g, "calculate"),
+      }),
+      calculateFn({ title: "管理文件", isCallBack: false }),
+    ]);
+  }
+};