feat: 优化基础信息修改提示

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

@@ -34,7 +34,7 @@
   outline: none;
 }
 .projectInfoListLiValue:focus {
-  border: 1px solid #136efa;
+  border: 2px solid #136efa;
 }
 .projectInfoTextarea {
   line-height: 22px;

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

@@ -21,7 +21,7 @@ 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 { Button, TextField } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { useMessage } from "@/components/MySnackbar";
 import Loading from "@/views/Loading";
@@ -40,6 +40,10 @@ const BaseInfo = observer(() => {
   const { currentProjectStore } = useStores();
   const [projectInfo, setProjectInfo] = useState<any>({});
   const [deleteProjectName, setDeleteProjectName] = useState("");
+  const [nameCheck, setNameCheck] = useState({
+    error: false,
+    help: "",
+  });
   const currentUserName = JSON.parse(
     localStorage.getItem("userInfo") || "{}"
   ).name;
@@ -98,11 +102,50 @@ const BaseInfo = observer(() => {
     ];
   }, [projectInfo, zoneIdMap]);
 
+  const checkName = (name: string, showMessage = false) => {
+    let help = "";
+    if (name) {
+      if (name.length > 30) {
+        help = "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文";
+        setNameCheck({
+          error: true,
+          help,
+        });
+        showMessage && message.error(help);
+        return false;
+      } else if (checkIsNumberLetterChinese(name)) {
+        setNameCheck({
+          error: false,
+          help: "",
+        });
+        return true;
+      } else {
+        help = "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文";
+        setNameCheck({
+          error: true,
+          help,
+        });
+        showMessage && message.error(help);
+        return false;
+      }
+    } else {
+      help = "项目名称不能为空";
+      setNameCheck({
+        error: true,
+        help,
+      });
+      showMessage && message.error(help);
+      return false;
+    }
+  };
+
   const nameChange = (e: any) => {
     setProjectInfo({
       ...projectInfo,
       name: e.target.value,
     });
+    checkName(e.target.value);
+    // setNameCheck
   };
 
   const descChange = (e: any) => {
@@ -126,16 +169,10 @@ const BaseInfo = observer(() => {
 
   // 修改项目
   const handleClickUpdate = () => {
-    if (projectInfo.name) {
-      if (checkIsNumberLetterChinese(projectInfo.name)) {
-        updateProjectRun({ ...projectInfo, product: "CADD" });
-      } else {
-        message.info(
-          "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文"
-        );
-      }
+    if (checkName(projectInfo.name, true)) {
+      updateProjectRun({ ...projectInfo, product: "CADD" });
     } else {
-      message.info("项目名称不能为空");
+      return;
     }
   };
 
@@ -195,13 +232,26 @@ const BaseInfo = observer(() => {
           >
             项目名称
           </div>
-          <input
+          <TextField
+            required
+            error={nameCheck.error}
+            id="name"
+            variant="outlined"
+            value={projectInfo.name}
+            onChange={nameChange}
+            helperText={nameCheck.help}
+            size="small"
+            sx={{
+              width: "560px",
+            }}
+          />
+          {/* <input
             value={projectInfo.name}
             className={style.projectInfoListLiValue}
             onChange={nameChange}
             maxLength={30}
             placeholder="请输入项目名称"
-          ></input>
+          ></input> */}
         </div>
         <div className={style.projectInfoListLi}>
           <div className={style.projectInfoListLiLabel}>项目描述</div>