refactor: 优化代码结构 增加一些注释

src/views/MenuLayout/index.tsx

 import { Box, List } from "@mui/material";
-// import CurrentProject from "./CurrentProject";
 import CurrentProject from "../Project/components/CurrentProject";
 import React from "react";
 import { Outlet, useNavigate } from "react-router-dom";

src/views/Project/ProjectSetting/BaseInfo/index.module.css

+.loadingBox {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
 .projectInfoList {
   background-color: #fff;
   position: relative;

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

@@ -55,6 +55,8 @@ const BaseInfo = observer(() => {
   }, [currentProjectStore.currentProjectInfo.id, run]);
   const [zoneIdMap, setZoneIdMap] = useState<Map<string, string>>(new Map());
   const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
+
+  // 获取计算区信息
   const { run: getZone } = useMyRequest(hpczone, {
     onSuccess: (result: any) => {
       setZoneIdOptions(result);
@@ -65,9 +67,12 @@ const BaseInfo = observer(() => {
       setZoneIdMap(zoneMap);
     },
   });
+
   useEffect(() => {
     getZone();
   }, [getZone]);
+
+  // 项目信息展示数据转换
   const infoList = useMemo(() => {
     return [
       {
@@ -112,13 +117,14 @@ const BaseInfo = observer(() => {
     {
       onSuccess: async (result: any) => {
         message.success("修改成功");
-        const projectList = await getProjectList()
-        currentProjectStore.setProjectList(projectList)
-        currentProjectStore.changeProject(projectInfo)
+        const projectList = await getProjectList();
+        currentProjectStore.setProjectList(projectList);
+        currentProjectStore.changeProject(projectInfo);
       },
     }
   );
 
+  // 修改项目
   const handleClickUpdate = () => {
     if (projectInfo.name) {
       if (reg.test(projectInfo.name)) {
@@ -139,15 +145,16 @@ const BaseInfo = observer(() => {
       onSuccess: async (result: any) => {
         message.success("删除成功");
         DialogRef.current.handleClose();
-        const projectList = await getProjectList()
-        currentProjectStore.setProjectList(projectList)
-        currentProjectStore.changeProject(projectList[0])
-        setProjectInfo(projectList[0])
+        const projectList = await getProjectList();
+        currentProjectStore.setProjectList(projectList);
+        currentProjectStore.changeProject(projectList[0]);
+        setProjectInfo(projectList[0]);
       },
     }
   );
 
   let DialogRef: any = React.createRef();
+  // 显示删除弹窗
   const handleClickDelete = () => {
     DialogRef.current.handleClickOpen();
   };
@@ -156,7 +163,8 @@ const BaseInfo = observer(() => {
     setDeleteProjectName(e.target.value);
   };
 
-  const handleSubmit = () => {
+  // 删除项目
+  const handleSubmitDelete = () => {
     if (
       deleteProjectName === toJS(currentProjectStore.currentProjectInfo.name)
     ) {
@@ -166,11 +174,17 @@ const BaseInfo = observer(() => {
     }
   };
 
-  // return <Loading></Loading>;
-  if (currentUserName === projectInfo.owner) {
+  if (loading) {
+    return (
+      <div className={style.loadingBox}>
+        <Loading />
+      </div>
+    );
+  } else if (currentUserName !== projectInfo.owner) {
+    return <InformationDisplay infoList={infoList} />;
+  } else {
     return (
       <div className={style.projectInfoList}>
-        {loading && <Loading></Loading>}
         <div className={style.projectInfoListLi}>
           <div
             className={classnames({
@@ -270,7 +284,7 @@ const BaseInfo = observer(() => {
           </Button>
         </div>
         <MyDialog
-          handleSubmit={handleSubmit}
+          handleSubmit={handleSubmitDelete}
           onRef={DialogRef}
           title="删除项目"
           submitloading={deleteLoading}
@@ -301,12 +315,6 @@ const BaseInfo = observer(() => {
         </MyDialog>
       </div>
     );
-  } else {
-    return loading ? (
-      <Loading></Loading>
-    ) : (
-      <InformationDisplay infoList={infoList} />
-    );
   }
 });
 

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

@@ -16,8 +16,8 @@ type zoneIdOption = {
 };
 
 const AddProject = (props: any) => {
-  const { currentProjectStore } = useStores()
-  const message = useMessage()
+  const { currentProjectStore } = useStores();
+  const message = useMessage();
   let DialogRef: any = React.createRef();
   useImperativeHandle(props.onRef, () => {
     return {
@@ -27,6 +27,7 @@ const AddProject = (props: any) => {
 
   const [zoneId, setZoneId] = useState("");
   const [zoneIdOptions, setZoneIdOptions] = useState<Array<zoneIdOption>>([]);
+  // 设置计算区
   const { run } = useMyRequest(hpczone, {
     onSuccess: (result: any) => {
       setZoneIdOptions(result);
@@ -42,9 +43,9 @@ const AddProject = (props: any) => {
       if (result.data) {
         setSubmitloading(false);
         DialogRef.current.handleClose();
-        message.success('新建项目成功')
-        const projectList = await getProjectList()
-        currentProjectStore.setProjectList(projectList)
+        message.success("新建项目成功");
+        const projectList = await getProjectList();
+        currentProjectStore.setProjectList(projectList);
       }
     },
     onError: () => {
@@ -70,6 +71,7 @@ const AddProject = (props: any) => {
     error: false,
     help: "",
   });
+
   const checkName = (name: string) => {
     if (name) {
       if (name.length > 30) {
@@ -95,6 +97,7 @@ const AddProject = (props: any) => {
       });
     }
   };
+
   const handleNameChange = (e: any) => {
     const name = e.target.value;
     setName(name);
@@ -104,6 +107,7 @@ const AddProject = (props: any) => {
   const handleZoneIdChange = (e: any) => {
     setZoneId(e.target.value);
   };
+
   const handleDescChange = (e: any) => {
     const desc = e.target.value;
     setDesc(desc);
@@ -135,8 +139,8 @@ const AddProject = (props: any) => {
   };
 
   const handleFromBox = (e: React.SyntheticEvent) => {
-    e.nativeEvent.stopImmediatePropagation()
-  }
+    e.nativeEvent.stopImmediatePropagation();
+  };
 
   return (
     <MyDialog