feat: 基础信息完成

src/api/api_manager.ts

@@ -5,6 +5,9 @@ const RESTAPI = {
   // API_PRIVILEGE_LIST: `${BACKEND_API_URI_PREFIX}/routes/privilege/list`, //
   API_PROJECT_LIST: `${BACKEND_API_URI_PREFIX}/cpp/project/list`, //获取产品下的项目列表
   API_PROJECT_ADD: `${BACKEND_API_URI_PREFIX}/cpp/project/add`, //新增项目
+  API_PROJECT_UPDATE: `${BACKEND_API_URI_PREFIX}/cpp/project/update`, //新增项目
+  API_PROJECT_DELETE: `${BACKEND_API_URI_PREFIX}/cpp/project/delete`, //删除项目
+  API_PROJECT_GET: `${BACKEND_API_URI_PREFIX}/cpp/project/get`, //获取项目信息
   API_CPCE_HPCZONE: `${BACKEND_API_URI_PREFIX}/cpp/cpce/hpczone`, //获取计算区列表
 };
 

src/api/project_api.ts

@@ -53,4 +53,48 @@ const hpczone = () => {
   });
 };
 
-export { current, menu, product, hpczone, addProject };
+type getProjectParams = {
+  id: string;
+};
+
+// 获取项目信息
+const getProject = (params: getProjectParams) => {
+  return request({
+    url: Api.API_PROJECT_GET,
+    method: "get",
+    params,
+  });
+};
+
+// 修改项目信息
+const updateProject = (params: addProjectParams) => {
+  return request({
+    url: Api.API_PROJECT_UPDATE,
+    method: "put",
+    data: params,
+  });
+};
+
+type deleteProjectParams = {
+  id: string;
+};
+
+// 删除项目
+const deleteProject = (params: deleteProjectParams) => {
+  return request({
+    url: Api.API_PROJECT_DELETE,
+    method: "delete",
+    params,
+  });
+};
+
+export {
+  current,
+  menu,
+  product,
+  hpczone,
+  addProject,
+  getProject,
+  updateProject,
+  deleteProject,
+};

src/assets/style/public.css

@@ -21,3 +21,96 @@ main::-webkit-scrollbar-thumb {
   border-radius: 4px;
   height: 5px !important;
 }
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+blockquote,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+pre,
+form,
+fieldset,
+legend,
+button,
+input,
+textarea,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+body,
+button,
+input,
+select,
+textarea {
+  font: 12px/1.5tahoma, arial, \5b8b\4f53;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+}
+address,
+cite,
+dfn,
+em,
+var {
+  font-style: normal;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: couriernew, courier, monospace;
+}
+small {
+  font-size: 12px;
+}
+ul,
+ol {
+  list-style: none;
+}
+a {
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+sup {
+  vertical-align: text-top;
+}
+sub {
+  vertical-align: text-bottom;
+}
+legend {
+  color: #000;
+}
+fieldset,
+img {
+  border: 0;
+}
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

src/components/InformationDisplay/InformationDisplay.module.css

+.infoList {
+  background-color: #fff;
+}
+.infoListLi {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 24px;
+}
+.infoListLiLabel {
+  width: 80px;
+  color: #8a9099;
+  margin-right: 24px;
+}
+.infoListLiValue {
+  color: #1e2633;
+  width: 460px;
+}

src/components/InformationDisplay/InformationDisplay.tsx

+import style from "./InformationDisplay.module.css";
+import React from "react";
+
+type InfoLi = {
+  label: string | number;
+  value: string | number;
+};
+
+type InfoList = Array<InfoLi>;
+
+type InformationDisplayProps = {
+  infoList: InfoList;
+};
+
+const InformationDisplay = (props: InformationDisplayProps) => {
+  const { infoList } = props;
+  return (
+    <div className={style.infoList}>
+      {infoList.map((item) => {
+        return (
+          <div className={style.infoListLi} key={item.label}>
+            <div className={style.infoListLiLabel}>{item.label}</div>
+            <div className={style.infoListLiValue}>{item.value}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default InformationDisplay;

src/components/InformationDisplay/index.ts

+import InformationDisplay from "./InformationDisplay";
+
+export default InformationDisplay;

src/components/MyRouter/useMyRouter.ts

@@ -43,7 +43,6 @@ const useMyRouter = () => {
     }
 
     if (productInfo.res) {
-      console.log(productInfo, "1111111111111");
       let list = productInfo.data?.data;
       if (list.length === 0) {
         currentProjectStore.setProjectList([]);

src/components/mui/MyDialog.tsx

@@ -10,8 +10,7 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import CloseIcon from "@mui/icons-material/Close";
 
 import { useState } from "react";
-import React, { useImperativeHandle } from "react";
-// import LoadingButton from '@mui/lab/LoadingButton';
+import { useImperativeHandle } from "react";
 const MyDialog = (props: any) => {
   const [open, setOpen] = useState(false);
   const { title, handleSubmit, submitloading } = props;

src/index.css

 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

src/views/MenuLayout/index.tsx

@@ -6,16 +6,10 @@ import { Outlet, useNavigate } from "react-router-dom";
 import style from "./index.module.css";
 import { observer } from "mobx-react-lite";
 import { useStores } from "@/store/index";
-import { toJS } from "mobx";
 import classnames from "classnames";
 
 const MenuLayout = observer(() => {
   const { permissionStore } = useStores();
-  console.log("11111111111111111111", toJS(permissionStore));
-  console.log("11111111111111111111", toJS(permissionStore.sidebarRouters));
-
-  console.log(new URL(window.location.href));
-  console.log(new URL(window.location.href).pathname);
   let pathname = new URL(window.location.href).pathname;
 
   const navigate = useNavigate();
@@ -29,7 +23,6 @@ const MenuLayout = observer(() => {
             return (
               <li
                 key={"sidebar" + index}
-                // className={style.listItem}
                 className={classnames({
                   [style.listItem]: true,
                   [style.active]: item.path === pathname,
@@ -38,14 +31,6 @@ const MenuLayout = observer(() => {
               >
                 {item.name}
               </li>
-
-              // <ListItem key={"sidebar" + index} className={style.listItem}>
-              //   <ListItemButton
-              //     onClick={() => item.type === "page" && navigate(item.path)}
-              //   >
-              //     <ListItemText>{item.name}</ListItemText>
-              //   </ListItemButton>
-              // </ListItem>
             );
           })}
         </List>

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

+.projectInfoList {
+  background-color: #fff;
+}
+.projectInfoListLi {
+  margin-bottom: 24px;
+}
+.projectInfoListLiLabel {
+  color: #1e2633;
+  line-height: 22px;
+  font-size: 14px;
+  font-weight: 550;
+  margin-bottom: 12px;
+}
+.projectInfoName::after {
+  content: "*";
+  color: red;
+}
+.projectInfoListLiValue {
+  width: 560px;
+  height: 36px;
+  border: 1px solid #e6e8eb;
+  border-radius: 4px;
+  color: #565c66;
+  padding: 0 12px;
+  box-sizing: border-box;
+  outline: none;
+}
+.projectInfoListLiValue:focus {
+  border: 1px solid #136efa;
+}
+.projectInfoTextarea {
+  line-height: 22px;
+  height: 82px;
+  padding: 7px 12px;
+}
+.projectInfoSelect {
+  width: 560px;
+  padding: 0 12px;
+}
+.disable {
+  background: #f7f8fa;
+}
+.projectInfoListLiText {
+  margin-bottom: 16px;
+  color: #8a9099;
+  font-size: 12px;
+  line-height: 20px;
+}

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

@@ -6,12 +6,232 @@
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { memo } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 
-import { Box } from "@mui/system";
+import style from "./index.module.css";
+import useMyRequest from "@/hooks/useMyRequest";
+import {
+  getProject,
+  hpczone,
+  updateProject,
+  deleteProject,
+} from "@/api/project_api";
+import { useStores } from "@/store";
+import { observer } from "mobx-react-lite";
+import InformationDisplay from "@/components/InformationDisplay";
+import classnames from "classnames";
+import { Button } from "@mui/material";
 
-const BaseInfo = () => {
-  return <Box>基础信息</Box>;
+type zoneIdOption = {
+  id: string;
+  name: string;
 };
 
+const BaseInfo = observer(() => {
+  const { currentProjectStore } = useStores();
+  const [projectInfo, setProjectInfo] = useState<any>({});
+  const currentUserName = JSON.parse(
+    localStorage.getItem("userInfo") || "{}"
+  ).name;
+  const { run } = useMyRequest(getProject, {
+    onSuccess: (result: any) => {
+      setProjectInfo(result.data);
+    },
+  });
+  useEffect(() => {
+    run({
+      id: currentProjectStore.currentProjectInfo.id as string,
+    });
+  }, [currentProjectStore, 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);
+      let zoneMap: Map<string, string> = new Map();
+      result.forEach((item: zoneIdOption) => {
+        zoneMap.set(item.id, item.name);
+      });
+      setZoneIdMap(zoneMap);
+    },
+  });
+  useEffect(() => {
+    getZone();
+  }, [getZone]);
+  const infoList = useMemo(() => {
+    return [
+      {
+        label: "项目名称：",
+        value: projectInfo.name,
+      },
+      {
+        label: "项目描述：",
+        value: projectInfo.desc,
+      },
+      {
+        label: "计算区：",
+        value: zoneIdMap.get(projectInfo.zoneId) || projectInfo.zoneId,
+      },
+      {
+        label: "创建人：",
+        value: projectInfo.owner,
+      },
+      {
+        label: "扣费账号：",
+        value: projectInfo.tenantUser,
+      },
+    ];
+  }, [projectInfo, zoneIdMap]);
+
+  const nameChange = (e: any) => {
+    setProjectInfo({
+      ...projectInfo,
+      name: e.target.value,
+    });
+  };
+
+  const descChange = (e: any) => {
+    setProjectInfo({
+      ...projectInfo,
+      desc: e.target.value,
+    });
+  };
+
+  const { run: updateProjectRun } = useMyRequest(updateProject, {
+    onSuccess: (result: any) => {
+      console.log("修改成功");
+    },
+  });
+
+  const handleClickUpdate = () => {
+    if (projectInfo.name) {
+      updateProjectRun({ ...projectInfo, product: "CADD" });
+    } else {
+      console.log("请输入项目名称");
+      return;
+    }
+    console.log("handleClickUpdate");
+  };
+
+  const { run: deleteProjectRun } = useMyRequest(deleteProject, {
+    onSuccess: (result: any) => {
+      console.log("删除成功");
+    },
+  });
+
+  const handleClickDelete = () => {
+    console.log("handleClickDelete");
+    deleteProjectRun({ id: projectInfo.id });
+  };
+
+  if (currentUserName === projectInfo.owner) {
+    return (
+      <div className={style.projectInfoList}>
+        <div className={style.projectInfoListLi}>
+          <div
+            className={classnames({
+              [style.projectInfoListLiLabel]: true,
+              [style.projectInfoName]: true,
+            })}
+            placeholder="请输入项目名称"
+          >
+            项目名称
+          </div>
+          <input
+            value={projectInfo.name}
+            className={style.projectInfoListLiValue}
+            onChange={nameChange}
+            maxLength={30}
+          ></input>
+        </div>
+        <div className={style.projectInfoListLi}>
+          <div className={style.projectInfoListLiLabel}>项目描述</div>
+          <textarea
+            value={projectInfo.desc}
+            className={classnames({
+              [style.projectInfoListLiValue]: true,
+              [style.projectInfoTextarea]: true,
+            })}
+            onChange={descChange}
+            placeholder="项目描述限制100字以内"
+            maxLength={100}
+          ></textarea>
+        </div>
+        <div className={style.projectInfoListLi}>
+          <div className={style.projectInfoListLiLabel}>计算区</div>
+          <select
+            value={projectInfo.zoneId}
+            disabled
+            className={classnames({
+              [style.projectInfoListLiValue]: true,
+              [style.projectInfoSelect]: true,
+              [style.disable]: true,
+            })}
+          >
+            {zoneIdOptions.map((option) => (
+              <option key={option.id} value={option.id}>
+                {option.name}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className={style.projectInfoListLi}>
+          <div className={style.projectInfoListLiLabel}>创建人</div>
+          <input
+            value={projectInfo.owner}
+            disabled
+            className={classnames({
+              [style.projectInfoListLiValue]: true,
+              [style.disable]: true,
+            })}
+          ></input>
+        </div>
+        <div className={style.projectInfoListLi}>
+          <div className={style.projectInfoListLiLabel}>扣费账号</div>
+          <input
+            value={projectInfo.tenantUser}
+            disabled
+            className={classnames({
+              [style.projectInfoListLiValue]: true,
+              [style.disable]: true,
+            })}
+          ></input>
+        </div>
+        <div className={style.projectInfoListLi}>
+          <Button
+            variant="contained"
+            size="large"
+            className={style.updateButton}
+            onClick={handleClickUpdate}
+            style={{ backgroundColor: "#1370ff", color: "#fff" }}
+          >
+            保存修改
+          </Button>
+        </div>
+        <div className={style.projectInfoListLi}>
+          <div className={style.projectInfoListLiLabel}>删除项目</div>
+          <div className={style.projectInfoListLiText}>
+            删除项目将删除其存储的数据和所有相关资源，并且已删除的项目无法恢复！请谨慎操作！
+          </div>
+          <Button
+            variant="contained"
+            size="large"
+            className={style.updateButton}
+            onClick={handleClickDelete}
+            style={{
+              backgroundColor: "#fff",
+              color: "#FF4E4E",
+              border: "1px solid #FF4E4E",
+            }}
+          >
+            删除项目
+          </Button>
+        </div>
+      </div>
+    );
+  } else {
+    return <InformationDisplay infoList={infoList} />;
+  }
+});
+
 export default memo(BaseInfo);

src/views/Project/ProjectSetting/index.tsx

@@ -45,7 +45,7 @@ const ProjectSetting = observer(() => {
       <Box style={{ padding: 24 }}>
         <div>
           <img src={projectImg} alt="项目logo" />
-          <span>项目名称A</span>
+          <span>{currentProjectStore.currentProjectInfo.name}</span>
         </div>
         <Box sx={{ width: "100%", typography: "body1" }}>
           <Tabs value={value} onChange={changeTabs} tabList={tabList} />

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

@@ -49,6 +49,7 @@ const CurrentProject = observer(() => {
         anchorEl={anchorEl}
         placement="right-start"
         transition
+        style={{ zIndex: 100 }}
       >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>

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

@@ -28,10 +28,6 @@ const ProjectListPopper = observer((props: any) => {
     });
   }, [currentProjectStore.projectList, name]);
 
-  // const handleChangeCurrentProject = (project: any) => {
-  //   currentProjectStore.changeProject(project);
-  // };
-
   return (
     <div className={style.projectBox}>
       <div className={style.searchBox}>