fix[backend-cli]: 路由

packages/backend-cli/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/backend-cli
 
+## 1.2.3
+
+### Patch Changes
+
+- 修复路由问题
+
 ## 1.2.2
 
 ### Patch Changes

packages/backend-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/backend-cli",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "创建后台模板",
   "main": "index.js",
   "files": [

packages/backend-cli/template/src/components/SpinLoding/index.module.scss

@@ -1,10 +1,12 @@
 .SpinLoding {
   position: absolute;
-  z-index: 9999;
-  width: 100%;
-  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 9999;
 }

packages/backend-cli/template/src/pages/Layout/components/Header/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useState } from "react";
+import { FC, useCallback, useMemo, useState } from "react";
 import style from "./index.module.scss";
 import { App, Avatar, Breadcrumb, Button, Popover } from "antd";
 import { Header } from "antd/es/layout/layout";
@@ -24,6 +24,8 @@ const generateBreadcrumb = (
   title: string;
   href?: string;
 }[] => {
+  if (!pathname || !child.length) return [];
+
   const breadcrumb = [];
   const paths = pathname.split("/").filter((path) => path !== "");
   let currentPath = "";
@@ -31,6 +33,7 @@ const generateBreadcrumb = (
   for (let i = 0; i < paths.length; i++) {
     currentPath += `/${paths[i]}`;
     const item = findRouteByPath(child, currentPath);
+
     if (item) {
       breadcrumb.push({
         title: item.title,
@@ -48,7 +51,10 @@ const generateBreadcrumb = (
 export const LayoutHeader: FC<LayoutHeaderProps> = ({ menuData }) => {
   const { modal } = App.useApp();
   const location = useLocation();
-  const breadcrumbItems = generateBreadcrumb(location.pathname, menuData);
+  const breadcrumbItems = useMemo(
+    () => generateBreadcrumb(location.pathname, menuData),
+    [location, menuData]
+  );
   const [resetPwdModalVisible, setResetPwdModalVisible] = useState(false);
   const { userInfo } = useSelector<RootState, RootState["base"]>(
     (state) => state.base

packages/backend-cli/template/src/pages/Layout/components/Menu/index.tsx

@@ -22,7 +22,7 @@ export const LayoutMenu: FC<LayoutMenuProps> = memo(
       let currentPath = "";
       const stack: string[] = [];
       const paths = location.pathname.split("/").filter((path) => path !== "");
-      for (let i = 0; i < paths.length - 1; i++) {
+      for (let i = 0; i < paths.length; i++) {
         currentPath += `/${paths[i]}`;
         const item = findRouteByPath(menuData, currentPath);
         if (item) {
@@ -34,26 +34,33 @@ export const LayoutMenu: FC<LayoutMenuProps> = memo(
 
     const renderMenuItems = useCallback(
       (list: DageRouteItem[], level = 1): any[] => {
-        return list.map((item) => {
+        const stack: DageRouteItem[] = [];
+
+        list.forEach((item) => {
+          let child: DageRouteItem[] = [];
           const { title, path, icon, children, hide } = item;
+          const params = {
+            key: path,
+            icon: icon,
+            label: title,
+          };
 
           if (hide) return null;
 
           if (level <= maxShowLevel - 1 && children) {
-            return {
-              key: path,
-              icon: icon,
-              label: title,
-              children: renderMenuItems(children, level + 1),
-            };
+            child = renderMenuItems(children, level + 1);
           }
 
-          return {
-            key: path,
-            icon: icon,
-            label: title,
-          };
+          if (child.length) {
+            // @ts-ignore
+            params.children = child;
+          }
+
+          // @ts-ignore
+          stack.push(params);
         });
+
+        return stack;
       },
       [maxShowLevel]
     );
@@ -65,15 +72,15 @@ export const LayoutMenu: FC<LayoutMenuProps> = memo(
       [navigate]
     );
 
-    return (
+    return menuData.length ? (
       <Menu
         mode="inline"
         items={renderMenuItems(menuData)}
-        selectedKeys={[location.pathname]}
+        selectedKeys={location.pathname.split("/").map((i) => `/${i}`)}
         defaultOpenKeys={defaultOpenKeys}
         onClick={handleMenu}
         {...rest}
       />
-    );
+    ) : null;
   }
 );

packages/backend-cli/template/src/pages/Layout/index.tsx

@@ -85,7 +85,21 @@ export default function CustomLayout() {
                       <Navigate to={menuList[0].redirect || menuList[0].path} />
                     }
                   />
-                  {renderRoutes(menuList)}
+                  {renderRoutes(menuList).map((menu) =>
+                    menu.redirect ? (
+                      <Route
+                        key={menu.path}
+                        path={menu.path}
+                        element={<Navigate replace to={menu.redirect} />}
+                      />
+                    ) : (
+                      <Route
+                        key={menu.path}
+                        path={menu.path}
+                        Component={menu.Component}
+                      />
+                    )
+                  )}
                   <Route path="*" Component={NotFound} />
                 </Routes>
               )}
@@ -98,17 +112,19 @@ export default function CustomLayout() {
 }
 
 function renderRoutes(routes: DageRouteItem[]) {
-  return routes.map((route) => {
-    const { path, Component, children } = route;
+  function deep(v: DageRouteItem[]) {
+    const stack: DageRouteItem[] = [];
+    v.forEach((item) => {
+      const { children = [], ...rest } = item;
 
-    if (children && children.length > 0) {
-      return (
-        <Route key={path} path={path} Component={Component}>
-          {renderRoutes(children)}
-        </Route>
-      );
-    }
+      stack.push(rest);
+
+      if (!!children.length) {
+        stack.push(...deep(children));
+      }
+    });
+    return stack;
+  }
 
-    return <Route key={path} path={path} Component={Component} />;
-  });
+  return deep(routes);
 }

packages/docs/docs/log/BACKEND-CLI_CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/backend-cli
 
+## 1.2.3
+
+### Patch Changes
+
+- 修复路由问题
+
 ## 1.2.2
 
 ### Patch Changes