后台初步完工

src/pages/Layout/index.module.scss

@@ -113,24 +113,17 @@
         padding: 20px 0 0 10px;
         display: flex;
 
-        .mainBoxL1 {
-          width: 22px;
-          height: 368px;
-          background-image: url('../../assets/img/llTab.png');
-          background-size: 100% 100%;
-        }
 
         .mainBoxL2 {
+          padding-left: 0px;
           .mainBoxL2Row {
-            padding-left: 34px;
+            padding-left: 60px;
             cursor: pointer;
             height: 50px;
             line-height: 50px;
-            margin-bottom: 8px;
             font-size: 16px;
             color: #fef4e9;
             position: relative;
-
             &:hover {
               &::before {
                 content: '';
@@ -138,11 +131,19 @@
                 width: 150px;
                 height: 28px;
                 bottom: 6px;
-                left: 0px;
+                left: 25px;
                 background-image: url('../../assets/img/activeLL.png');
                 background-size: 100% 100%;
               }
             }
+            .tabImg{
+              z-index: 3;
+              position: absolute;
+              top: 50%;
+              left: 2px;
+              transform: translateY(-50%);
+              width: 20px;
+            }
           }
 
           .active {
@@ -153,7 +154,7 @@
               width: 150px;
               height: 28px;
               bottom: 6px;
-              left: 0px;
+              left: 25px;
               background-image: url('../../assets/img/activeLL.png');
               background-size: 100% 100%;
             }

src/pages/Layout/index.tsx

@@ -18,8 +18,15 @@ import { Base64 } from "js-base64";
 import encodeStr from "@/utils/pass";
 import { getDictListAPI, passWordEditAPI } from "@/store/action/login";
 import { getTokenInfo, removeTokenInfo } from "@/utils/storage";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { getPermissionsAPI } from "@/store/action/role";
+import { RootState } from "@/store";
+import inco1 from '@/assets/img/inco1.png'
+import inco2 from '@/assets/img/inco2.png'
+import inco3 from '@/assets/img/inco3.png'
+import inco4 from '@/assets/img/inco4.png'
+import inco5 from '@/assets/img/inco5.png'
+import inco6 from '@/assets/img/inco6.png'
 
 function Layout() {
   const dispatch = useDispatch();
@@ -27,56 +34,97 @@ function Layout() {
   const listTemp = useMemo(() => {
     return [
       {
-        id: 1,
+        id: 100,
         name: "热度统计",
         path: "/",
-        done: true,
+        done: false,
         Com: React.lazy(() => import("../Hot")),
+        inco:inco1
       },
       {
-        id: 2,
+        id: 200,
         name: "万物墙管理",
         path: "/wall",
-        done: true,
+        done: false,
         Com: React.lazy(() => import("../Wall")),
+        inco:inco2
       },
       {
-        id: 3,
+        id: 300,
         name: "馆藏管理",
         path: "/goods",
-        done: true,
+        done: false,
         Com: React.lazy(() => import("../Goods")),
-      },
-      {
-        id: 4,
-        name: "用户管理",
-        path: "/user",
-        done: true,
-        Com: React.lazy(() => import("../User")),
-      },
-      {
-        id: 5,
-        name: "角色管理",
-        path: "/role",
-        done: true,
-        Com: React.lazy(() => import("../Role")),
-      },
-      {
-        id: 6,
-        name: "操作日志",
-        path: "/log",
-        done: true,
-        Com: React.lazy(() => import("../Log")),
+        inco:inco3
       },
     ];
   }, []);
 
+  // 从仓库中获取页面权限数据
+  const authPageArr = useSelector(
+    (state: RootState) => state.loginStore.authPageArr
+  );
+
+  // 是超级管理员
+  useEffect(() => {
+    const userInfo = getTokenInfo().user;
+    if (userInfo.isAdmin === 1) {
+      listTemp.push(
+        {
+          id: 400,
+          name: "用户管理",
+          path: "/user",
+          done: true,
+          Com: React.lazy(() => import("../User")),
+          inco:inco4
+        },
+        {
+          id: 500,
+          name: "角色管理",
+          path: "/role",
+          done: true,
+          Com: React.lazy(() => import("../Role")),
+          inco:inco5
+        },
+        {
+          id: 600,
+          name: "操作日志",
+          path: "/log",
+          done: true,
+          Com: React.lazy(() => import("../Log")),
+          inco:inco6
+        }
+      );
+    }
+  }, [listTemp]);
+
+  // 权限的数据和页面判断
+  useEffect(() => {
+    authPageArr.forEach((v) => {
+      if (v.authority) {
+        listTemp.forEach((v2) => {
+          if (v.id === v2.id) v2.done = true;
+        });
+      }
+    });
+    const newList = listTemp.filter((v) => v.done);
+    setList(newList);
+  }, [authPageArr, listTemp]);
+
   const [list, setList] = useState(listTemp);
 
+  // 进页面看看第一个页面有权限的是哪一个
+  useEffect(() => {
+    const userInfo = getTokenInfo().user;
+    if (userInfo.isAdmin !== 1) {
+      if (list[0] && list[0].id !== 100) history.replace(list[0].path);
+    }
+  }, [list]);
+
   // 进页面获取所有下拉信息和权限信息
   useEffect(() => {
     dispatch(getDictListAPI());
-    dispatch(getPermissionsAPI())
+    dispatch(getPermissionsAPI());
   }, [dispatch]);
 
   // 点击跳转
@@ -165,7 +213,6 @@ function Layout() {
       {/* 下面主体 */}
       <div className="mainBox">
         <div className="mainBoxL">
-          <div className="mainBoxL1"></div>
           <div className="mainBoxL2">
             {list.map((v) => (
               <div
@@ -176,6 +223,7 @@ function Layout() {
                   v.path === path ? "active" : ""
                 )}
               >
+                <img className="tabImg" src={v.inco} alt="" />
                 <div className="txt">{v.name}</div>
               </div>
             ))}