feat: 在对项目信息进行增删改查时同时改变currentProjectStore 对项目列表弹窗进行用户体验优化 点击项目列表区域外时隐藏项目列表

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -26,6 +26,7 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import { useMessage } from "@/components/MySnackbar";
 import Loading from "@/views/Loading";
 import MyDialog from "@/components/mui/MyDialog";
+import { getProjectList } from "../../project";
 
 const reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
 
@@ -51,7 +52,7 @@ const BaseInfo = observer(() => {
     run({
       id: currentProjectStore.currentProjectInfo.id as string,
     });
-  }, [currentProjectStore, run]);
+  }, [currentProjectStore.currentProjectInfo.id, run]);
   const [zoneIdMap, setZoneIdMap] = useState<Map<string, string>>(new Map());
   const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
   const { run: getZone } = useMyRequest(hpczone, {
@@ -109,8 +110,11 @@ const BaseInfo = observer(() => {
   const { run: updateProjectRun, loading: updateLoading } = useMyRequest(
     updateProject,
     {
-      onSuccess: (result: any) => {
+      onSuccess: async (result: any) => {
         message.success("修改成功");
+        const projectList = await getProjectList()
+        currentProjectStore.setProjectList(projectList)
+        currentProjectStore.changeProject(projectInfo)
       },
     }
   );
@@ -132,9 +136,13 @@ const BaseInfo = observer(() => {
   const { run: deleteProjectRun, loading: deleteLoading } = useMyRequest(
     deleteProject,
     {
-      onSuccess: (result: any) => {
+      onSuccess: async (result: any) => {
         message.success("删除成功");
         DialogRef.current.handleClose();
+        const projectList = await getProjectList()
+        currentProjectStore.setProjectList(projectList)
+        currentProjectStore.changeProject(projectList[0])
+        setProjectInfo(projectList[0])
       },
     }
   );
@@ -238,7 +246,6 @@ const BaseInfo = observer(() => {
             variant="outlined"
             className={style.updateButton}
             onClick={handleClickUpdate}
-            // style={{ backgroundColor: "#1370ff", color: "#fff" }}
             loading={updateLoading}
           >
             保存修改

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

@@ -4,6 +4,9 @@ import MyDialog from "@/components/mui/MyDialog";
 import React, { useState, useEffect, useImperativeHandle } from "react";
 import useMyRequest from "@/hooks/useMyRequest";
 import { hpczone, addProject } from "@/api/project_api";
+import { useMessage } from "@/components/MySnackbar";
+import { getProjectList } from "../../project";
+import { useStores } from "@/store";
 
 const reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
 
@@ -13,6 +16,8 @@ type zoneIdOption = {
 };
 
 const AddProject = (props: any) => {
+  const { currentProjectStore } = useStores()
+  const message = useMessage()
   let DialogRef: any = React.createRef();
   useImperativeHandle(props.onRef, () => {
     return {
@@ -33,10 +38,13 @@ const AddProject = (props: any) => {
     onBefore: () => {
       setSubmitloading(true);
     },
-    onSuccess: (result: any) => {
+    onSuccess: async (result: any) => {
       if (result.data) {
         setSubmitloading(false);
         DialogRef.current.handleClose();
+        message.success('新建项目成功')
+        const projectList = await getProjectList()
+        currentProjectStore.setProjectList(projectList)
       }
     },
     onError: () => {
@@ -46,7 +54,7 @@ const AddProject = (props: any) => {
 
   useEffect(() => {
     run();
-  }, []);
+  }, [run]);
 
   const handleClickOpen = () => {
     DialogRef.current.handleClickOpen();

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

@@ -4,14 +4,23 @@ import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import { Popper, Fade } from "@mui/material";
 import { useStores } from "@/store/index";
 import ProjectListPopper from "../ProjectListPopper";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 
 const CurrentProject = observer(() => {
   const { currentProjectStore } = useStores();
   const [open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  
+  // 结合handleShowProjectList中的event.nativeEvent.stopImmediatePropagation();实现点击空白区域隐藏项目列表
+  useEffect(()=>{
+    document.addEventListener('click', (e) => {
+      setOpen(false)
+    })
+  }, [])
+
   const handleShowProjectList = (event: React.MouseEvent<HTMLElement>) => {
+    event.nativeEvent.stopImmediatePropagation();
     setAnchorEl(event.currentTarget);
     setOpen((previousOpen) => !previousOpen);
   };

src/views/Project/project.ts

+import { product } from "@/api/project_api"
+
+export const getProjectList = async () => {
+    const res = await product({product: "CADD",})
+    return res.data
+}
\ No newline at end of file