feat: 基础信息完成

src/assets/style/public.css

@@ -114,3 +114,22 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
+input::-webkit-input-placeholder {
+  color: #c2c6cc;
+}
+
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  color: #c2c6cc;
+}
+
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  color: #c2c6cc;
+}
+
+input:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: #c2c6cc;
+}

src/components/mui/MyDialog.tsx

@@ -13,7 +13,12 @@ import { useState } from "react";
 import { useImperativeHandle } from "react";
 const MyDialog = (props: any) => {
   const [open, setOpen] = useState(false);
-  const { title, handleSubmit, submitloading } = props;
+  const {
+    title,
+    handleSubmit,
+    submitloading,
+    submitStyle = { backgroundColor: "#1370FF" },
+  } = props;
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -61,7 +66,7 @@ const MyDialog = (props: any) => {
           onClick={handleSubmit}
           color="primary"
           variant="contained"
-          style={{ backgroundColor: "#1370FF" }}
+          style={submitStyle}
         >
           确认
         </LoadingButton>

src/views/MenuLayout/index.module.css

@@ -12,6 +12,8 @@
 }
 .content {
   flex: 1;
+  height: calc(100vh - 57px);
+  overflow: scroll;
 }
 .list {
   /* background-color: red; */

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

 .projectInfoList {
   background-color: #fff;
+  position: relative;
 }
 .projectInfoListLi {
   margin-bottom: 24px;
@@ -46,3 +47,41 @@
   font-size: 12px;
   line-height: 20px;
 }
+
+.deleteBox {
+  width: 380px;
+}
+.deleteText1 {
+  font-size: 14px;
+  line-height: 22px;
+  color: #ff4e4e;
+  margin-bottom: 8px;
+}
+.deleteText2 {
+  color: #1e2633;
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 8px;
+}
+.deleteText3 {
+  color: #1e2633;
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 20px;
+}
+.deleteProjectName {
+  color: #1370ff;
+}
+.deleteProjectInput {
+  width: 100%;
+  height: 36px;
+  border: 1px solid #e6e8eb;
+  border-radius: 4px;
+  color: #565c66;
+  padding: 0 12px;
+  box-sizing: border-box;
+  outline: none;
+}
+.deleteProjectInput:focus {
+  border: 1px solid #136efa;
+}

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

@@ -6,7 +6,7 @@
  * @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, useEffect, useMemo, useState } from "react";
+import React, { memo, useEffect, useMemo, useState } from "react";
 
 import style from "./index.module.css";
 import useMyRequest from "@/hooks/useMyRequest";
@@ -17,10 +17,17 @@ import {
   deleteProject,
 } from "@/api/project_api";
 import { useStores } from "@/store";
+import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import InformationDisplay from "@/components/InformationDisplay";
 import classnames from "classnames";
 import { Button } from "@mui/material";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { useMessage } from "@/components/MySnackbar";
+import Loading from "@/views/Loading";
+import MyDialog from "@/components/mui/MyDialog";
+
+const reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
 
 type zoneIdOption = {
   id: string;
@@ -28,12 +35,14 @@ type zoneIdOption = {
 };
 
 const BaseInfo = observer(() => {
+  const message = useMessage();
   const { currentProjectStore } = useStores();
   const [projectInfo, setProjectInfo] = useState<any>({});
+  const [deleteProjectName, setDeleteProjectName] = useState("");
   const currentUserName = JSON.parse(
     localStorage.getItem("userInfo") || "{}"
   ).name;
-  const { run } = useMyRequest(getProject, {
+  const { run, loading } = useMyRequest(getProject, {
     onSuccess: (result: any) => {
       setProjectInfo(result.data);
     },
@@ -97,43 +106,69 @@ const BaseInfo = observer(() => {
     });
   };
 
-  const { run: updateProjectRun } = useMyRequest(updateProject, {
-    onSuccess: (result: any) => {
-      console.log("修改成功");
-    },
-  });
+  const { run: updateProjectRun, loading: updateLoading } = useMyRequest(
+    updateProject,
+    {
+      onSuccess: (result: any) => {
+        message.success("修改成功");
+      },
+    }
+  );
 
   const handleClickUpdate = () => {
     if (projectInfo.name) {
-      updateProjectRun({ ...projectInfo, product: "CADD" });
+      if (reg.test(projectInfo.name)) {
+        updateProjectRun({ ...projectInfo, product: "CADD" });
+      } else {
+        message.info(
+          "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文"
+        );
+      }
     } else {
-      console.log("请输入项目名称");
-      return;
+      message.info("项目名称不能为空");
     }
-    console.log("handleClickUpdate");
   };
 
-  const { run: deleteProjectRun } = useMyRequest(deleteProject, {
-    onSuccess: (result: any) => {
-      console.log("删除成功");
-    },
-  });
+  const { run: deleteProjectRun, loading: deleteLoading } = useMyRequest(
+    deleteProject,
+    {
+      onSuccess: (result: any) => {
+        message.success("删除成功");
+        DialogRef.current.handleClose();
+      },
+    }
+  );
 
+  let DialogRef: any = React.createRef();
   const handleClickDelete = () => {
-    console.log("handleClickDelete");
-    deleteProjectRun({ id: projectInfo.id });
+    DialogRef.current.handleClickOpen();
+  };
+
+  const deleteProjectNameChange = (e: any) => {
+    setDeleteProjectName(e.target.value);
+  };
+
+  const handleSubmit = () => {
+    if (
+      deleteProjectName === toJS(currentProjectStore.currentProjectInfo.name)
+    ) {
+      deleteProjectRun({ id: projectInfo.id });
+    } else {
+      message.error("项目名称不匹配");
+    }
   };
 
+  // return <Loading></Loading>;
   if (currentUserName === projectInfo.owner) {
     return (
       <div className={style.projectInfoList}>
+        {loading && <Loading></Loading>}
         <div className={style.projectInfoListLi}>
           <div
             className={classnames({
               [style.projectInfoListLiLabel]: true,
               [style.projectInfoName]: true,
             })}
-            placeholder="请输入项目名称"
           >
             项目名称
           </div>
@@ -142,6 +177,7 @@ const BaseInfo = observer(() => {
             className={style.projectInfoListLiValue}
             onChange={nameChange}
             maxLength={30}
+            placeholder="请输入项目名称"
           ></input>
         </div>
         <div className={style.projectInfoListLi}>
@@ -198,15 +234,15 @@ const BaseInfo = observer(() => {
           ></input>
         </div>
         <div className={style.projectInfoListLi}>
-          <Button
-            variant="contained"
-            size="large"
+          <LoadingButton
+            variant="outlined"
             className={style.updateButton}
             onClick={handleClickUpdate}
-            style={{ backgroundColor: "#1370ff", color: "#fff" }}
+            // style={{ backgroundColor: "#1370ff", color: "#fff" }}
+            loading={updateLoading}
           >
             保存修改
-          </Button>
+          </LoadingButton>
         </div>
         <div className={style.projectInfoListLi}>
           <div className={style.projectInfoListLiLabel}>删除项目</div>
@@ -215,7 +251,6 @@ const BaseInfo = observer(() => {
           </div>
           <Button
             variant="contained"
-            size="large"
             className={style.updateButton}
             onClick={handleClickDelete}
             style={{
@@ -227,10 +262,44 @@ const BaseInfo = observer(() => {
             删除项目
           </Button>
         </div>
+        <MyDialog
+          handleSubmit={handleSubmit}
+          onRef={DialogRef}
+          title="删除项目"
+          submitloading={deleteLoading}
+          submitStyle={{ background: "#FF4E4E", color: "#fff" }}
+        >
+          <div className={style.deleteBox}>
+            <div className={style.deleteText1}>
+              您要删除本项目。已删除的项目将无法恢复！您真的确定吗？
+            </div>
+            <div className={style.deleteText2}>
+              此操作可能会导致数据丢失。为防止意外操作，我们要求您确认您的操作。
+            </div>
+            <div className={style.deleteText3}>
+              请输入“
+              <span className={style.deleteProjectName}>
+                {currentProjectStore.currentProjectInfo.name}
+              </span>
+              ”以确认此操作。
+            </div>
+            <input
+              value={deleteProjectName}
+              className={style.deleteProjectInput}
+              onChange={deleteProjectNameChange}
+              maxLength={30}
+              placeholder="请输入项目名称"
+            ></input>
+          </div>
+        </MyDialog>
       </div>
     );
   } else {
-    return <InformationDisplay infoList={infoList} />;
+    return loading ? (
+      <Loading></Loading>
+    ) : (
+      <InformationDisplay infoList={infoList} />
+    );
   }
 });