左侧菜单高亮和展开优化

src/compenents/header/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styles from "./index.module.less";
-import { Button, Dropdown, MenuProps, Image } from "antd";
+import { Button, Dropdown, MenuProps } from "antd";
 import { useSelector } from "../../store/hooks";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";

src/compenents/left-menu/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import {
   MailOutlined,
   SettingOutlined,
@@ -45,7 +45,7 @@ const items = [
   ),
   getItem(
     "系统设置",
-    "6",
+    "5",
     <SettingOutlined />,
     [
       getItem("管理人员", "/system/administrator", null, null, null),
@@ -55,51 +55,53 @@ const items = [
   ),
 ];
 
-export const LeftMenu: React.FC = () => {
+const children2Parent: any = {
-  const navigate = useNavigate();
+  "/videos": ["3"],
-  const location = useLocation();
+  "/images": ["3"],
+
+  "/member": ["4"],
+  "/department": ["4"],
+
+  "/system/administrator": ["5"],
+  "/system/adminroles": ["5"],
+};
+
+export const LeftMenu: React.FC = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  let defaultSelectedKeys: string[] = [location.pathname];
+  let defaultOpenKeys: string[] = [];
+  if (children2Parent[location.pathname]) {
+    defaultOpenKeys = children2Parent[location.pathname];
+  }
 
-  // 默认展开的subMenu
-  const [openKeys, setOpenKeys] = useState(["1"]);
-  // 默认选中的menu
-  const [selectedKeys, setSelectedKeys] = useState(["/"]);
-  //点击subMenu的回调函数
-  const onOpenChange = (keys: any) => {
-    setOpenKeys(keys);
-  };
   const onClick = (e: any) => {
     navigate(e.key);
   };
-  const onSelect = (e: any) => {
-    setSelectedKeys(e.selectedKeys);
-  };
 
-  // 监听菜单变化如果通过非直接点击『主面板』菜单进入到首页的话
+  useEffect(() => {}, [location]);
-  // 则重置菜单的选择状态
-  useEffect(() => {
-    if (location.pathname === "/") {
-      setSelectedKeys(["/"]);
-    }
-  }, [location]);
 
   return (
     <div className={styles["left-menu"]}>
-      <Link style={{ textDecoration: "none" }} to={`/`}>
+      <div
-        <img src={logo} alt="" className={styles["App-logo"]} />
+        style={{ textDecoration: "none", cursor: "pointer" }}
-      </Link>
+        onClick={() => {
+          window.location.href = "/";
+        }}
+      >
+        <img src={logo} className={styles["App-logo"]} />
+      </div>
       <Menu
         onClick={onClick}
         style={{
           width: 200,
           background: "#ffffff",
         }}
-        defaultSelectedKeys={["/"]}
+        defaultSelectedKeys={defaultSelectedKeys}
-        selectedKeys={selectedKeys}
+        defaultOpenKeys={defaultOpenKeys}
-        openKeys={openKeys}
-        onOpenChange={onOpenChange}
         mode="inline"
         items={items}
-        onSelect={onSelect}
       />
     </div>
   );

src/pages/home/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import styles from "./index.module.less";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet } from "react-router-dom";
-import { Header, LeftMenu, Footer } from "../../compenents";
+import { Header, LeftMenu } from "../../compenents";
 
 export const HomePage: React.FC = () => {
   useEffect(() => {}, []);

src/utils/index.ts

@@ -76,5 +76,14 @@ export function parseVideo(file: File): Promise<VideoParseInfo> {
 }
 
 export function getHost() {
-  return window.location.protocol + "//" + window.location.host+"/";
+  return window.location.protocol + "//" + window.location.host + "/";
+}
+
+export function inStrArray(array: string[], value: string): boolean {
+  for (let i = 0; i < array.length; i++) {
+    if (array[i] === value) {
+      return true;
+    }
+  }
+  return false;
 }