Merge branch 'feat-20220608-projectdata' into 'release'

Feat 20220608 projectdata

See merge request !35

src/api/fileserver/raysyncApi.ts

@@ -2,29 +2,6 @@
 //  const APIOPTION = "https://fileserver.cloudam.cn"
 //  const APIPORT = "39.105.230.38"
 import { getLoaclStorageOfKey } from "./utils";
-// const raysyncAddr = {
-//   bandwidth: null
-//   capacity: 10485760
-//   enableLargeFileTransfer: true
-//   fileServerEndPoint: "https://fileserver.cloudam.cn"
-//   fileSystemType: "standard"
-//   jobLogServerEndPoint: "https://fileserver.cloudam.cn:6677"
-//   privateIp: "10.8.2.67"
-//   protocolType: "NFS"
-//   publicMountDir: "/public"
-//   publicMountUrl: "132594ad6e-atf93.cn-beijing.nas.aliyuncs.com"
-//   ramUserId: "61261f8a2a2aa4d72f752c3c"
-//   smbMountUrl: null
-//   srcAddr: "fileserver.cloudam.cn"
-//   srcIp: "47.94.198.50"
-//   sshServerEndPoint: "https://fileserver.cloudam.cn:8888"
-//   storageType: "Capacity"
-//   token: null
-//   userMountDir: "/public/data/"
-//   userMountUrl: "132594ad6e-uop2.cn-beijing.nas.aliyuncs.com"
-//   vncServerEndPoint: "https://fileserver.cloudam.cn:9090"
-//   zoneId: "cn-beijing-h"
-// }
 
 const API = function () {
   const raysyncAddr = getLoaclStorageOfKey("raysyncAddr");
@@ -50,38 +27,6 @@ const APIPORT = function () {
   return raysyncAddr.srcIp || "";
 };
 
-// const currentRegion = {
-//   cloudProvider: "ALIYUN"
-// description: "本计算区有丰富的CPU资源，并提供部分GPU资源，可以满足大部分计算作业需求。"
-// enabled: true
-// id: "CE-Z1"
-// initialized: true
-// location: "CLOUD"
-// name: "通用计算区"
-// primary: true
-// storageConfig: {srcAddr: "fileserver.cloudam.cn", srcIp: "47.94.198.50", privateIp: "10.8.2.67",…}
-// bandwidth: null
-// capacity: 10485760
-// enableLargeFileTransfer: true
-// fileServerEndPoint: "https://fileserver.cloudam.cn"
-// fileSystemType: "standard"
-// jobLogServerEndPoint: "https://fileserver.cloudam.cn:6677"
-// privateIp: "10.8.2.67"
-// protocolType: "NFS"
-// publicMountDir: "/public"
-// publicMountUrl: "132594ad6e-atf93.cn-beijing.nas.aliyuncs.com"
-// ramUserId: "61261f8a2a2aa4d72f752c3c"
-// smbMountUrl: null
-// srcAddr: "fileserver.cloudam.cn"
-// srcIp: "47.94.198.50"
-// sshServerEndPoint: "https://fileserver.cloudam.cn:8888"
-// storageType: "Capacity"
-// token: null
-// userMountDir: "/public/data/"
-// userMountUrl: "132594ad6e-uop2.cn-beijing.nas.aliyuncs.com"
-// vncServerEndPoint: "https://fileserver.cloudam.cn:9090"
-// zoneId: "cn-beijing-h"
-// }
 // 当前计算区
 let currentRegion = localStorage.getItem("current-region");
 let currentRegionJson = currentRegion && JSON.parse(currentRegion);
@@ -114,31 +59,6 @@ const urlToken = (filetoken: string, projectId: string) => {
   return `?username=${projectId}&token=${token}&filetoken=${encodeURIComponent(
     filetoken
   )}&share=false&project=true`;
-  // let json = getLoaclStorageOfKey("current-region");
-  // const userInfo = getLoaclStorageOfKey("userinfo");
-  // if (json["location"] && json["location"] === "ON_PREMISE") {
-  //   return `?username=${
-  //     userInfo["name"]
-  //   }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=false`; // 之前的filetoken是： userInfo["shareFileAccessToken"]
-  // }
-  // if (root && root === "home") {
-  //   return `?username=${
-  //     userInfo["homeDirectoryMountPoint"]
-  //   }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=false`;
-  // }
-  // // 是否共有文件系统
-  // if (
-  //   localStorage.getItem("isShareFileSystem") &&
-  //   localStorage.getItem("isShareFileSystem") === "true"
-  // ) {
-  //   return `?username=${
-  //     userInfo["shareDirectoryMountPoint"]
-  //   }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=true`;
-  // } else {
-  //   return `?username=${
-  //     userInfo["homeDirectoryMountPoint"]
-  //   }&token=${token}&filetoken=${encodeURIComponent(filetoken)}&share=false`;
-  // }
 };
 
 const getUuid = () => {
@@ -195,3 +115,59 @@ export {
   encryptTransfer,
   getType,
 };
+
+// const raysyncAddr = {
+//   bandwidth: null
+//   capacity: 10485760
+//   enableLargeFileTransfer: true
+//   fileServerEndPoint: "https://fileserver.cloudam.cn"
+//   fileSystemType: "standard"
+//   jobLogServerEndPoint: "https://fileserver.cloudam.cn:6677"
+//   privateIp: "10.8.2.67"
+//   protocolType: "NFS"
+//   publicMountDir: "/public"
+//   publicMountUrl: "132594ad6e-atf93.cn-beijing.nas.aliyuncs.com"
+//   ramUserId: "61261f8a2a2aa4d72f752c3c"
+//   smbMountUrl: null
+//   srcAddr: "fileserver.cloudam.cn"
+//   srcIp: "47.94.198.50"
+//   sshServerEndPoint: "https://fileserver.cloudam.cn:8888"
+//   storageType: "Capacity"
+//   token: null
+//   userMountDir: "/public/data/"
+//   userMountUrl: "132594ad6e-uop2.cn-beijing.nas.aliyuncs.com"
+//   vncServerEndPoint: "https://fileserver.cloudam.cn:9090"
+//   zoneId: "cn-beijing-h"
+// }
+// const currentRegion = {
+//   cloudProvider: "ALIYUN"
+// description: "本计算区有丰富的CPU资源，并提供部分GPU资源，可以满足大部分计算作业需求。"
+// enabled: true
+// id: "CE-Z1"
+// initialized: true
+// location: "CLOUD"
+// name: "通用计算区"
+// primary: true
+// storageConfig: {srcAddr: "fileserver.cloudam.cn", srcIp: "47.94.198.50", privateIp: "10.8.2.67",…}
+// bandwidth: null
+// capacity: 10485760
+// enableLargeFileTransfer: true
+// fileServerEndPoint: "https://fileserver.cloudam.cn"
+// fileSystemType: "standard"
+// jobLogServerEndPoint: "https://fileserver.cloudam.cn:6677"
+// privateIp: "10.8.2.67"
+// protocolType: "NFS"
+// publicMountDir: "/public"
+// publicMountUrl: "132594ad6e-atf93.cn-beijing.nas.aliyuncs.com"
+// ramUserId: "61261f8a2a2aa4d72f752c3c"
+// smbMountUrl: null
+// srcAddr: "fileserver.cloudam.cn"
+// srcIp: "47.94.198.50"
+// sshServerEndPoint: "https://fileserver.cloudam.cn:8888"
+// storageType: "Capacity"
+// token: null
+// userMountDir: "/public/data/"
+// userMountUrl: "132594ad6e-uop2.cn-beijing.nas.aliyuncs.com"
+// vncServerEndPoint: "https://fileserver.cloudam.cn:9090"
+// zoneId: "cn-beijing-h"
+// }

src/components/InformationDisplay/InformationDisplay.tsx

@@ -19,7 +19,7 @@ const InformationDisplay = (props: InformationDisplayProps) => {
         return (
           <div className={style.infoListLi} key={item.label}>
             <div className={style.infoListLiLabel}>{item.label}</div>
-            <div className={style.infoListLiValue}>{item.value}</div>
+            <div className={style.infoListLiValue}>{item.value || "-"}</div>
           </div>
         );
       })}

src/hooks/useDeepEffect.ts

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-14 17:22:15
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-14 17:22:56
+ * @FilePath: /bkunyun/src/hooks/useDeepEffect.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { useEffect, useRef } from 'react';
+import _ from 'lodash';
+
+export default function useDeepEffect(effectFunc: Function, deps: any[]) {
+  const isFirstRef = useRef(true);
+  const preDeps = useRef(deps);
+  useEffect(() => {
+    const isSame = preDeps.current.every((obj, index) => {
+      return _.isEqual(obj, deps[index]);
+    });
+    if (isFirstRef.current || !isSame) {
+      effectFunc();
+    }
+    isFirstRef.current = false;
+    preDeps.current = deps;
+  }, [deps]);
+}

src/store/index.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-09 20:41:05
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-14 10:16:23
+ * @LastEditTime: 2022-06-14 20:55:22
  * @FilePath: /bkunyun/src/store/index.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,11 +11,11 @@ import { configure } from "mobx";
 import permissionStore from "./modules/permission";
 import menuStore from "./modules/menu";
 import currentProjectStore from "./modules/currentProject";
-import fileList from "./modules/fileList";
+import fileListStore from "./modules/fileList";
 
 configure({ enforceActions: "always" });
 
-export const stores = { permissionStore, menuStore, currentProjectStore, fileList };
+export const stores = { permissionStore, menuStore, currentProjectStore, fileListStore };
 
 /** Store类型 */
 export type Stores = typeof stores;

src/store/modules/fileList.ts

@@ -2,12 +2,12 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 17:00:19
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-14 11:06:13
+ * @LastEditTime: 2022-06-14 21:47:28
  * @FilePath: /bkunyun/src/store/modules/upload.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
-import { makeAutoObservable } from "mobx";
+import {  makeAutoObservable, observable, action } from "mobx";
 
 interface IUploadInfo {
   id: string,
@@ -25,14 +25,29 @@ class FileList {
   /** 文件上传列表 */
   fileList: IUploadInfo[] = [];
 
-  setFileList (val: IUploadInfo[]) {
-    this.fileList = val
+
+  // setFileList (val: IUploadInfo[]) {
+  //   this.fileList = val
+  // }
+
+  /** 新需要上传的文件列表 */
+  newFileList: IUploadInfo[] = [];
+
+  /** 设置最新需要上传的文件列表 */
+  setNewFileList (val: IUploadInfo[]) {
+    this.fileList = this.fileList.concat(val)
+
+    this.newFileList = val
+
   }
 
+
   /** 设置文件上传信息 */
   setUploadInfo(id: string, val: IUploadInfo) {
+    console.log(val,id,'22222')
     const newFileList = this.fileList?.map((item)=>{
       if(item.id === id){
+        console.log('3333',item)
         return val
       } return item
     })
@@ -65,8 +80,9 @@ class FileList {
         } return item
       })
       this.fileList = newFileList
-    }
+  }
 }
 
+const fileListStore = new FileList()
 
-export default new FileList();
+export default fileListStore

src/utils/localStorageKey.ts

 const localStorageKey = {
-  TOKEN: "token",
+  TOKEN: "token_key",
   USER_INFO: "userInfo",
   USER_LOGIN: "userlogin",
 };

src/utils/util.ts

@@ -2,12 +2,12 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-07 18:37:53
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-14 10:32:54
+ * @LastEditTime: 2022-06-14 17:21:52
  * @FilePath: /bkunyun/src/utils/util.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
-import { v4 as uuidv4 } from 'uuid';
+import { v4 as uuidv4 } from "uuid";
 
 export const isProjectOwner = (name: string) => {
   let localName = "";
@@ -23,26 +23,33 @@ export const isProjectOwner = (name: string) => {
  * 生成32位的随机id
  * @returns 返回32位的uuid
  */
- export const uuid = () => {
+export const uuid = () => {
   const reg = /-/g;
-  const pwd = uuidv4().replace(reg, '');
+  const pwd = uuidv4().replace(reg, "");
   return pwd;
 };
 
-// 获取用户token 信息
+// 获取用户信息
 export const getUserInfo = () => {
   let val: any;
   try {
-    val = JSON.parse(localStorage.getItem("userInfo") || "{}")
-  }
-  catch {
-    console.error("获取用户信息token 出错");
+    val = JSON.parse(localStorage.getItem("userInfo") || "{}");
+  } catch {
+    console.error("获取用户信息 出错");
   }
-  return val
-}
-
-  
+  return val;
+};
 
+// 获取token信息
+export const getTokenInfo = () => {
+  let val: any;
+  try {
+    val = JSON.parse(localStorage.getItem("token_key") || "{}");
+  } catch {
+    console.error("获取token信息 出错");
+  }
+  return val;
+};
 
 const IsNumberLetterChineseReg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
 

src/views/ConsoleLayout/components/FileItem/index.tsx

-import { useEffect } from "react";
-
-import useGlobalStore from "@/hooks/useGlobalStore";
 import { observer } from "mobx-react-lite";
-import { toJS } from "mobx";
-import UseTusUpload from "@/utils/Upload/tusUpload";
+// import { any } from "@/store/modules/fileList";
 // toJS(currentProjectStore.currentProjectInfo.id);
 
 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-11 15:46:42
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-14 11:07:55
+ * @LastEditTime: 2022-06-14 21:35:09
  * @FilePath: /bkunyun/src/views/ConsoleLayout/components/FileItem/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-const FileItem = observer(() => {
-  const fileList = toJS(useGlobalStore("fileList"));
 
-  const { uploadFile } = UseTusUpload(fileList?.fileList);
-  useEffect(() => {
-    fileList?.fileList?.forEach((item) => {
-      uploadFile(
-        item.id,
-        item.list,
-        "/",
-        "/",
-        (upload: any, filepath: string) => console.log(upload, filepath, 1111)
-      );
-    });
-    console.log(fileList?.fileList, 1111);
-  }, [fileList.fileList, uploadFile]);
+interface IProps {
+  fileItemInfo: any;
+}
+const FileItem = (props: IProps) => {
+  const { fileItemInfo } = props;
+  console.log(fileItemInfo, 2222);
   return <div>dd</div>;
-});
+};
 
 export default FileItem;

src/views/ConsoleLayout/components/TransferList/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-10 18:05:21
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-11 18:08:27
+ * @LastEditTime: 2022-06-14 21:00:46
  * @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -12,8 +12,11 @@ import { memo } from "react";
 import MySelect from "@/components/mui/MySelect";
 import MyTitle from "@/components/mui/MyTitle";
 import FileItem from "../FileItem";
+import useGlobalStore from "@/hooks/useGlobalStore";
+import { observer } from "mobx-react-lite";
 
-const TranSferList = () => {
+const TranSferList = observer(() => {
+  const fileList = useGlobalStore("fileListStore");
   return (
     <Box style={{ width: 520, padding: 20 }}>
       <MyTitle title="传输列表" />
@@ -42,10 +45,12 @@ const TranSferList = () => {
         />
       </Box>
       <Box>
-        <FileItem />
+        {fileList?.fileList.map((item) => {
+          return <FileItem fileItemInfo={item} />;
+        })}
       </Box>
     </Box>
   );
-};
+});
 
 export default memo(TranSferList);

src/views/ConsoleLayout/index.tsx

@@ -16,6 +16,13 @@ import MyPopover from "@/components/mui/MyPopover";
 import TranSferList from "./components/TransferList";
 
 import style from "./index.module.css";
+import useGlobalStore from "@/hooks/useGlobalStore";
+import { toJS } from "mobx";
+import { urlToken } from "@/api/fileserver/raysyncApi";
+import UseTusUpload from "@/utils/Upload/tusUpload";
+import useMyRequest from "@/hooks/useMyRequest";
+import { getDataFileToken } from "@/api/project_api";
+import useDeepEffect from "@/hooks/useDeepEffect";
 
 const ConsoleLayout = observer(() => {
   const {
@@ -36,6 +43,42 @@ const ConsoleLayout = observer(() => {
     permissionStore.setSidebarRouters(location.pathname);
   }, [location, permissionStore]);
 
+  const fileList = toJS(useGlobalStore("fileListStore"));
+  const currentProjectStore = toJS(useGlobalStore("currentProjectStore"));
+  const { uploadFile } = UseTusUpload({
+    fileListStore: fileList,
+    currentProjectStore,
+  });
+
+  /** 获取文件token请求 */
+  const { run: getDataFileTokenRun } = useMyRequest(getDataFileToken, {
+    onSuccess: (res: any) => {
+      let url =
+        "https://fileserver.cloudam.cn/parallelupload/" +
+        urlToken(
+          res?.data || "",
+          currentProjectStore?.currentProjectInfo?.id as string
+        );
+      fileList?.newFileList?.forEach((item: any) => {
+        uploadFile(
+          item,
+          item?.list,
+          url,
+          "/",
+          (upload: any, filepath: string) => console.log(upload, filepath, 1111)
+        );
+      });
+    },
+  });
+
+  useDeepEffect(() => {
+    if (fileList?.newFileList?.length) {
+      getDataFileTokenRun({
+        id: currentProjectStore?.currentProjectInfo.id || "",
+      });
+    }
+  }, [fileList?.newFileList]);
+
   return (
     <Box>
       <Box className={style.topApp}>

src/views/Project/ProjectData/UpLoaderFile/index.tsx

 import React, { useState, useImperativeHandle, useCallback } from "react";
 
 import style from "./index.module.css";
-import { TextField } from "@mui/material";
 import MyDialog from "@/components/mui/MyDialog";
 import { Button } from "@mui/material";
-import { checkIsNumberLetterChinese, uuid } from "@/utils/util";
+import { uuid } from "@/utils/util";
 import { useMessage } from "@/components/MySnackbar";
 import { useDropzone } from "react-dropzone";
 import Table from "@/components/Material.Ui/Table";
@@ -13,11 +12,12 @@ import noFile from "@/assets/project/noFile.svg";
 import uploaderIcon from "@/assets/project/uploaderIcon.svg";
 import classnames from "classnames";
 import { getMbfromB } from "@/utils/util";
-import { observer } from "mobx-react-lite";
-import useGlobalStore from "@/hooks/useGlobalStore";
+import { observer } from "mobx-react";
+import { useStores } from "@/store";
+import { toJS } from "mobx";
 
 const UpLoaderFile = observer((props: any) => {
-  const uploadInfoStore = useGlobalStore("fileList");
+  const { fileListStore } = useStores();
   const message = useMessage();
   const [fileList, setFileList] = useState<any>([]);
   // list 是项目数据table的数据
@@ -59,17 +59,17 @@ const UpLoaderFile = observer((props: any) => {
   let dialogRef: any = React.createRef();
 
   const handleSubmit = () => {
-    const newFileList = fileList?.map((item: any) => {
-      return {
-        id: uuid(),
-        open: false,
-        list: item,
-        isPermanence: true,
-      };
-    });
-    uploadInfoStore.setFileList(newFileList);
-
-    console.log("handleSubmit");
+    const newFileList =
+      fileList?.map((item: any) => {
+        return {
+          id: uuid(),
+          open: false,
+          list: item,
+          isPermanence: true,
+        };
+      }) || [];
+    console.log(newFileList);
+    toJS(fileListStore?.setNewFileList)(newFileList);
   };
 
   const showDialog = () => {

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-01 09:15:10
+ * @LastEditTime: 2022-06-14 15:40:27
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -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>