feat: 点击项目列表之外关闭

src/components/mui/Tabs.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-30 18:26:23
+ * @LastEditTime: 2022-08-30 18:42:45
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */

src/views/Project/components/CurrentProject/index.tsx

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-08-26 19:13:55
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-08-30 19:26:16
+ * @FilePath: /bkunyun/src/views/Project/components/CurrentProject/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import logo from "@/assets/project/projectIcon.svg";
 import style from "./index.module.css";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import { Popper, Fade } from "@mui/material";
 import { useStores } from "@/store/index";
 import ProjectListPopper from "../ProjectListPopper";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import AddProject from "../AddProject";
 import {
@@ -17,17 +25,6 @@ const CurrentProject = observer(() => {
 	const [projectListOpen, setProjectListOpen] = useState(false);
 	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
-	useEffect(() => {
-		document.addEventListener("click", (e) => {
-			setProjectListOpen(false);
-		});
-		return () => {
-			document.removeEventListener("click", (e) => {
-				setProjectListOpen(false);
-			});
-		};
-	}, []);
-
 	const handleShowProjectList = (event: React.MouseEvent<HTMLElement>) => {
 		event.nativeEvent.stopImmediatePropagation();
 		setAnchorEl(event.currentTarget);

src/views/Project/components/ProjectListPopper/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-08-02 11:43:28
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-11 18:50:31
+ * @LastEditTime: 2022-08-30 19:32:05
  * @FilePath: /bkunyun/src/views/Project/components/ProjectListPopper/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -14,7 +14,8 @@ import AddIcon from "@mui/icons-material/Add";
 import classNames from "classnames";
 import { useStores } from "@/store/index";
 import moment from "moment";
-import React, { useMemo, useState } from "react";
+import React, {  useMemo, useState } from "react";
+import { useClickAway } from 'ahooks';
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 
@@ -38,12 +39,18 @@ const ProjectListPopper = observer((props: any) => {
 
 	const handleProjectBox = (e: React.SyntheticEvent) => {
 		setProjectListOpen(false);
-		e.nativeEvent.stopImmediatePropagation();
 	};
 
+	useClickAway(
+    () => {
+      setProjectListOpen(false);
+    },
+    () => document.getElementById('use-click-projectList-mainBox'),
+  );
+
 	return (
 		<div className={style.projectBox} onClick={handleProjectBox}>
-			<div className={style.mainBox}>
+			<div className={style.mainBox} id="use-click-projectList-mainBox" onClick={(e: any)=>e.stopPropagation()}>
 				<div className={style.searchBox}>
 					<IconButton
 						type="submit"