feat: 任务列表样式修改

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: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-07-26 20:39:32
+ * @LastEditTime: 2022-07-28 18:32:03
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -318,7 +318,8 @@ const BaseInfo = observer(() => {
 					>
 						项目名称
 					</div>
-					<TextField
+
+					<MyInput
 						required
 						error={nameCheck.error}
 						id="name"
@@ -326,21 +327,8 @@ const BaseInfo = observer(() => {
 						value={projectInfo.name}
 						onChange={nameChange}
 						helperText={nameCheck.help}
-						size="small"
-						sx={{
-							width: "560px",
-							"& .MuiOutlinedInput-root": {
-								height: "36px",
-							},
-						}}
+						style={{ width: "560px" }}
 					/>
-					{/* <input
-            value={projectInfo.name}
-            className={style.projectInfoListLiValue}
-            onChange={nameChange}
-            maxLength={30}
-            placeholder="请输入项目名称"
-          ></input> */}
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>项目描述</div>
@@ -354,6 +342,13 @@ const BaseInfo = observer(() => {
 						placeholder="项目描述限制100字以内"
 						maxLength={100}
 					></textarea>
+					{/* <MyInput
+						value={projectInfo.desc}
+						multiline
+						rows={4}
+						placeholder="项目描述限制100字以内"
+						onChange={descChange}
+					/> */}
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>计算区</div>
@@ -375,42 +370,26 @@ const BaseInfo = observer(() => {
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>创建人</div>
-					<input
+					<MyInput
 						value={projectInfo.owner}
 						disabled
-						className={classnames({
-							[style.projectInfoListLiValue]: true,
-							[style.disable]: true,
-						})}
-					></input>
+						style={{ width: "560px" }}
+					/>
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>项目预算</div>
-					{/* <MyInput
-						sx={{
-							width: "560px",
-							'& .MuiOutlinedInput-root': {
-								height: '36px'
-							}
-						}}
-					/> */}
-					<TextField
+					<MyInput
 						required
 						error={budgetCheck.error}
 						disabled={currentUserName !== projectInfo.tenantUser}
-						id="projectBudget"
+						// id="projectBudget"
 						variant="outlined"
 						value={projectInfo.projectBudget}
 						onChange={budgetChange}
 						onBlur={budgetBlur}
 						helperText={budgetCheck.help}
-						size="small"
-						sx={{
-							width: "560px",
-							"& .MuiOutlinedInput-root": {
-								height: "36px",
-							},
-						}}
+						// size="small"
+						style={{ width: "560px" }}
 						InputProps={{
 							startAdornment: (
 								<InputAdornment position="start">¥</InputAdornment>
@@ -420,14 +399,11 @@ const BaseInfo = observer(() => {
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div className={style.projectInfoListLiLabel}>扣费账号</div>
-					<input
+					<MyInput
 						value={projectInfo.tenantUser}
 						disabled
-						className={classnames({
-							[style.projectInfoListLiValue]: true,
-							[style.disable]: true,
-						})}
-					></input>
+						style={{ width: "560px" }}
+					/>
 				</div>
 				<div className={style.projectInfoListLi}>
 					<LoadingButton

src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx

@@ -2,23 +2,24 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-07-26 11:13:10
+ * @LastEditTime: 2022-07-28 18:10:42
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import _ from "lodash";
-
-import Dialog from "@/components/mui/MyDialog";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Box, OutlinedInput } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
+
+import Dialog from "@/components/mui/MyDialog";
 import { IResponse, useHttp } from "@/api/http";
 import { useStores } from "@/store";
 import { useMessage } from "@/components/MySnackbar";
 import MySelect, { IOption } from "@/components/mui/MySelect";
 import MyTable from "@/components/mui/MyTable";
+import SearchInput from "@/components/BusinessComponents/SearchInput";
+
 interface IProps {
 	setAddMemberDialog: (val: boolean) => void;
 	addMemberDialog: boolean;
@@ -158,19 +159,15 @@ const AddMember = observer((props: IProps) => {
 				title="添加成员"
 			>
 				<Box>
-					<Box sx={{ mb: 2 }}>
-						<OutlinedInput
-							onChange={(e: any) => {
-								_.debounce(() => {
+					<SearchInput
+						onKeyUp={(e: any) => {
+							if (e.keyCode === 13) {
 								setProjectMember(e.target.value);
-								}, 200)();
+							}
 						}}
 						placeholder="搜索项目成员"
-							size="small"
-							sx={{ width: "100%", height: 32 }}
-							endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
+						sx={{ mb: 2 }}
 					/>
-					</Box>
 					<div style={{ overflowY: "scroll", maxHeight: 400 }}>
 						<MyTable
 							checkboxData={(val: string[]) => setCheckData(val)}

src/views/Project/ProjectWorkbench/workbenchList/index.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-22 16:20:26
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-07-28 19:02:19
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,29 +11,27 @@ import _ from "lodash";
 import { useNavigate } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import OutlinedInput from "@mui/material/OutlinedInput";
-import SearchIcon from "@mui/icons-material/Search";
-import { TablePagination } from '@mui/material';
-import TextField from '@mui/material/TextField';
-import MenuItem from '@mui/material/MenuItem';
+import { TablePagination } from "@mui/material";
 
-import SimpleDialog from "./components/simpleDialog"
+import MySelect from "@/components/mui/MySelect";
+import SimpleDialog from "./components/simpleDialog";
 import { useStores } from "@/store";
 import useMyRequest from "@/hooks/useMyRequest";
-import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent"
-import runTime from '../../../../assets/project/runTime.svg'
-import jobCost from '../../../../assets/project/jobCost.svg'
-import jobSue from '../../../../assets/project/jobSue.svg'
-import jobFail from '../../../../assets/project/jobFail.svg'
-import jobRun from '../../../../assets/project/jobRun.svg'
-import jobCadence from '../../../../assets/project/jobCadence.svg'
-import jobStop from '../../../../assets/project/jobStop.svg'
-import jobDel from '../../../../assets/project/jobDel.svg'
-import noData from '../../../../assets/project/noTemplate.svg'
-import onload from '../../../../assets/project/onload.svg'
+import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent";
+import runTime from "../../../../assets/project/runTime.svg";
+import jobCost from "../../../../assets/project/jobCost.svg";
+import jobSue from "../../../../assets/project/jobSue.svg";
+import jobFail from "../../../../assets/project/jobFail.svg";
+import jobRun from "../../../../assets/project/jobRun.svg";
+import jobCadence from "../../../../assets/project/jobCadence.svg";
+import jobStop from "../../../../assets/project/jobStop.svg";
+import jobDel from "../../../../assets/project/jobDel.svg";
+import noData from "../../../../assets/project/noTemplate.svg";
+import onload from "../../../../assets/project/onload.svg";
 import {
 	getWorkflowJobList,
 	deleteWorkflowJob,
-    cancelWorkflowJob
+	cancelWorkflowJob,
 } from "@/api/workbench_api";
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
@@ -43,52 +41,51 @@ import SearchInput from "@/components/BusinessComponents/SearchInput";
 
 import styles from "./index.module.css";
 
-
 const currencies = [
 	{
-        value: 'ALL',
-        label: '全部',
+		value: "ALL",
+		label: "全部",
 	},
 	{
-        value: 'RUNNING',
-        label: '正在运行',
+		value: "RUNNING",
+		label: "正在运行",
 	},
 	{
-        value: 'SUCCEEDED',
-        label: '运行成功',
+		value: "SUCCEEDED",
+		label: "运行成功",
 	},
 	{
-        value: 'FAILED',
-        label: '运行失败',
+		value: "FAILED",
+		label: "运行失败",
 	},
 	{
-        value: 'ABORTED',
-        label: '运行终止',
+		value: "ABORTED",
+		label: "运行终止",
 	},
 ];
 
-let timer: string | number | NodeJS.Timeout | null | undefined = null
+let timer: string | number | NodeJS.Timeout | null | undefined = null;
 const ProjectMembers = observer(() => {
 	const { currentProjectStore } = useStores();
 	const projectId = toJS(currentProjectStore.currentProjectInfo.id);
 	const isPass = usePass();
-    const [jobName, setJobName] = useState('')
-    const [jobList, setJobList] = useState([])
-    const [currency, setCurrency] = useState('ALL');
-    const [page, setPage] = useState(0)
-    const [size, setSize] = useState(10)
-    const [rowsPerPage, setRowsPerPage] = useState(10)
-    const [count, setCount] = useState(0)
+	const [jobName, setJobName] = useState("");
+	const [jobList, setJobList] = useState([]);
+	const [currency, setCurrency] = useState("ALL");
+	const [page, setPage] = useState(0);
+	const [size, setSize] = useState(10);
+	const [rowsPerPage, setRowsPerPage] = useState(10);
+	const [count, setCount] = useState(0);
 	/** 简单弹窗 */
-    const [jobData, setJobData] = useState('');
+	const [jobData, setJobData] = useState("");
 	const [openDialog, setOpenDialog] = useState(false);
-    const [dialogType, setDialogType] = useState('del');
+	const [dialogType, setDialogType] = useState("del");
 	// 获取作业列表
 	const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, {
 		onSuccess: (result: any) => {
 			setJobList(result.data.content);
-            setCount(result.data.totalElements)
-            timer && clearTimeout(timer as number)
+			setCount(result.data.totalElements);
+			timer && clearTimeout(timer as number);
 			timer = null;
 			timer = setTimeout(() => {
 				getWorkflowJobInfo({
@@ -96,7 +93,7 @@ const ProjectMembers = observer(() => {
 					page: page,
 					size: size,
 					name: jobName,
-                    state: currency === 'ALL' ? "" : currency
+					state: currency === "ALL" ? "" : currency,
 				});
 			}, 60000);
 		},
@@ -104,22 +101,22 @@ const ProjectMembers = observer(() => {
 
 	useEffect(() => {
 		return () => {
-            clearTimeout(timer as number)
-        }
-    }, [])
+			clearTimeout(timer as number);
+		};
+	}, []);
 
-    const navigate = useNavigate()
+	const navigate = useNavigate();
 
 	// 删除作业
 	const { run: delWorkflowJob } = useMyRequest(deleteWorkflowJob, {
 		onSuccess: (result: any) => {
-            setOpenDialog(false)
+			setOpenDialog(false);
 			getWorkflowJobInfo({
 				projectId: currentProjectStore.currentProjectInfo.id as string,
 				page: page,
 				size: size,
 				name: jobName,
-                state: currency === 'ALL' ? "" : currency
+				state: currency === "ALL" ? "" : currency,
 			});
 		},
 	});
@@ -127,23 +124,19 @@ const ProjectMembers = observer(() => {
 	// 删除作业
 	const { run: cancelWorkflowJobInfo } = useMyRequest(cancelWorkflowJob, {
 		onSuccess: (result: any) => {
-            setOpenDialog(false)
+			setOpenDialog(false);
 			getWorkflowJobInfo({
 				projectId: currentProjectStore.currentProjectInfo.id as string,
 				page: page,
 				size: size,
 				name: jobName,
-                state: currency === 'ALL' ? "" : currency
+				state: currency === "ALL" ? "" : currency,
 			});
 		},
 	});
 
-    const searchChange = (data: any) => {
-        setJobName(data.length > 30 ? data.slice(0, 30) : data);
-    }
-
-    const handleChange = (event: any) => {
-        setCurrency(event.target.value);
+	const handleChange = (val: string) => {
+		setCurrency(val);
 	};
 
 	/** 关闭弹窗 */
@@ -155,12 +148,12 @@ const ProjectMembers = observer(() => {
 	const onConfirm = () => {
 		if (dialogType === "del") {
 			delWorkflowJob({
-                id: jobData
-            })
+				id: jobData,
+			});
 		} else {
 			cancelWorkflowJobInfo({
-                jobid: jobData
-            })
+				jobid: jobData,
+			});
 		}
 	};
 
@@ -170,32 +163,32 @@ const ProjectMembers = observer(() => {
 			page: page,
 			size: size,
 			name: jobName,
-            state: currency === 'ALL' ? "" : currency
+			state: currency === "ALL" ? "" : currency,
 		});
 	}, [projectId, getWorkflowJobInfo]);
 
 	const handleChangePage = (event: any, newPage: any) => {
-        setPage(newPage)
+		setPage(newPage);
 		getWorkflowJobInfo({
 			projectId: currentProjectStore.currentProjectInfo.id as string,
 			page: newPage,
 			size: size,
 			name: jobName,
-            state: currency === 'ALL' ? "" : currency
+			state: currency === "ALL" ? "" : currency,
 		});
-    }
+	};
 
 	const handleChangeRowsPerPage = (event: any) => {
-        setRowsPerPage(event.target.value)
-        setSize(event.target.value)
+		setRowsPerPage(event.target.value);
+		setSize(event.target.value);
 		getWorkflowJobInfo({
 			projectId: currentProjectStore.currentProjectInfo.id as string,
 			page: page,
 			size: event.target.value,
 			name: jobName,
-            state: currency === 'ALL' ? "" : currency
+			state: currency === "ALL" ? "" : currency,
 		});
-    }
+	};
 
 	useEffect(() => {
 		setTimeout(() => {
@@ -204,40 +197,40 @@ const ProjectMembers = observer(() => {
 				page: page,
 				size: size,
 				name: jobName,
-                state: currency === 'ALL' ? "" : currency
+				state: currency === "ALL" ? "" : currency,
 			});
-        }, 300)
+		}, 300);
 	}, [jobName, currency]);
 
 	const renderStatusIcon = (data: string) => {
 		switch (data) {
 			case "RUNNING":
-                return jobRun
+				return jobRun;
 			case "ABORTED":
-                return jobCadence
+				return jobCadence;
 			case "FAILED":
-                return jobFail
+				return jobFail;
 			case "SUCCEEDED":
-                return jobSue
+				return jobSue;
 			default:
-                return jobCadence
-        }
+				return jobCadence;
 		}
+	};
 
 	const renderStatusText = (data: string) => {
 		switch (data) {
 			case "RUNNING":
-                return '正在运行'
+				return "正在运行";
 			case "ABORTED":
-                return '运行终止'
+				return "运行终止";
 			case "FAILED":
-                return '运行失败'
+				return "运行失败";
 			case "SUCCEEDED":
-                return '运行成功'
+				return "运行成功";
 			default:
-                return '未知'
-        }
+				return "未知";
 		}
+	};
 
 	/** 渲染字体颜色 */
 	const renderTextColor = (data: any) => {
@@ -278,7 +271,7 @@ const ProjectMembers = observer(() => {
 				state: { taskId: id },
 			});
 		},
-        [navigate],
+		[navigate]
 	);
 
 	// 回车搜索
@@ -286,19 +279,14 @@ const ProjectMembers = observer(() => {
 		if (e.keyCode === 13) {
 			setJobName(e.target.value);
 		}
-    }
+	};
 
 	return (
 		<Box className={styles.headerBox}>
-
 			<Box className={styles.tabHeader}>
-
-                <Box sx={{ display: 'flex' }}>
-                    <SearchInput
-                        onKeyUp={handleKeyWordChangeKeyUp}
-                        sx={{ width: 340 }}
-                    />
-                    <Box className={styles.tabHeaderSelect}>
+				<Box sx={{ display: "flex" }}>
+					<SearchInput onKeyUp={handleKeyWordChangeKeyUp} sx={{ width: 340 }} />
+					{/* <Box className={styles.tabHeaderSelect}>
                         <TextField
                             select
                             label="运行状态"
@@ -319,48 +307,86 @@ const ProjectMembers = observer(() => {
                             }}
                         >
                             {currencies.map((option) => (
-                                <MenuItem key={option.value} value={option.value}>
                                     {option.label}
-                                </MenuItem>
                             ))}
                         </TextField>
+                    </Box> */}
+
+					<Box className={styles.tabHeaderSelect}>
+						<MySelect
+							input={<OutlinedInput />}
+							value={currency}
+							onChange={handleChange}
+							options={currencies}
+							size="small"
+							sx={{
+								width: 180,
+								height: 32,
+								"& .MuiOutlinedInput-root": {
+									height: "32px",
+									color: "#1E2633",
+									fontSize: "14px",
+								},
+								"& .MuiInputLabel-root": {
+									color: "#8A9099",
+									fontSize: "14px",
+								},
+							}}
+						/>
 					</Box>
 				</Box>
 
-                <Box className={styles.tabUpdate} onClick={() => {
+				<Box
+					className={styles.tabUpdate}
+					onClick={() => {
 						getWorkflowJobInfo({
 							projectId: currentProjectStore.currentProjectInfo.id as string,
 							page: page,
 							size: size,
 							name: jobName,
-                        state: currency === 'ALL' ? "" : currency
-                    })
-                }} >
+							state: currency === "ALL" ? "" : currency,
+						});
+					}}
+				>
 					<img alt="" src={onload} />
 				</Box>
-
 			</Box>
 
 			<Box className={styles.body}>
-                {
-                    jobList.length === 0 &&
-                    <Box sx={{
-                        display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)',
-                        justifyContent: 'center'
-                    }}>
+				{jobList.length === 0 && (
+					<Box
+						sx={{
+							display: "flex",
+							alignItems: "center",
+							flexDirection: "column",
+							minHeight: "calc(100vh - 376px)",
+							justifyContent: "center",
+						}}
+					>
 						<img alt="" src={noData} />
-                        <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>暂无任务</Typography>
+						<Typography
+							sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
+						>
+							暂无任务
+						</Typography>
 					</Box>
-                }
-                {
-                    jobList.length > 0 && jobList.map((item: any, key) => {
+				)}
+				{jobList.length > 0 &&
+					jobList.map((item: any, key) => {
 						return (
 							<Box className={styles.tabBox} onClick={() => rowClick(item.id)}>
 								<Box className={styles.tabBoxInfo}>
 									<div className={styles.tabBoxTitle}>{item.name}</div>
 									<Box className={styles.tabBoxDescInfo}>
-                                        <div className={styles.tabBoxDesc} style={{ marginRight: "24px" }} >创建时间：{item.createTime}</div>
-                                        <div className={styles.tabBoxDesc}>创建人：{item.creator}</div>
+										<div
+											className={styles.tabBoxDesc}
+											style={{ marginRight: "24px" }}
+										>
+											创建时间：{item.createTime}
+										</div>
+										<div className={styles.tabBoxDesc}>
+											创建人：{item.creator}
+										</div>
 									</Box>
 								</Box>
 								<Box className={styles.tabBoxMiddle}>
@@ -373,76 +399,90 @@ const ProjectMembers = observer(() => {
 								</Box>
 								<Box className={styles.tabBoxJobStatus}>
 									<img alt="" src={renderStatusIcon(item.state)} />
-                                    <div className={styles.tabBoxStatusText}>{renderStatusText(item.state)}</div>
-                                    <Box sx={{ width: '100%' }}>
-                                        <MyProgress color={renderProgressColor(item.state)} value={(item.completeNum / item.totalNum) * 100}
+									<div className={styles.tabBoxStatusText}>
+										{renderStatusText(item.state)}
+									</div>
+									<Box sx={{ width: "100%" }}>
+										<MyProgress
+											color={renderProgressColor(item.state)}
+											value={(item.completeNum / item.totalNum) * 100}
 											sx={{
-                                                marginRight: '16px',
+												marginRight: "16px",
 											}}
 										/>
 									</Box>
-                                    <div style={{ color: renderTextColor(item.state) }} className={styles.tabBoxStatusText}>{item.completeNum + "/" + item.totalNum}</div>
+									<div
+										style={{ color: renderTextColor(item.state) }}
+										className={styles.tabBoxStatusText}
+									>
+										{item.completeNum + "/" + item.totalNum}
+									</div>
 								</Box>
 
-                                {
-                                    item.state === "RUNNING" && isPass("PROJECT_WORKBENCH_JOBS_STOP", 'USER') && <Box className={styles.tabBoxJobOperate}>
-                                        <img alt=""
+								{item.state === "RUNNING" &&
+									isPass("PROJECT_WORKBENCH_JOBS_STOP", "USER") && (
+										<Box className={styles.tabBoxJobOperate}>
+											<img
+												alt=""
 												src={jobStop}
 												style={{ cursor: "pointer" }}
 												onClick={(event) => {
 													event.stopPropagation();
 													event.nativeEvent.stopImmediatePropagation();
-                                                setJobData(item.id)
-                                                setOpenDialog(true)
-                                                setDialogType('stop')
+													setJobData(item.id);
+													setOpenDialog(true);
+													setDialogType("stop");
 												}}
 											/>
 										</Box>
-                                }
+									)}
 
-                                {
-                                    item.state !== "RUNNING" && isPass("PROJECT_WORKBENCH_JOBS_DELETE", 'MANAGER') && <Box className={styles.tabBoxJobOperate}>
-                                        <img alt=""
+								{item.state !== "RUNNING" &&
+									isPass("PROJECT_WORKBENCH_JOBS_DELETE", "MANAGER") && (
+										<Box className={styles.tabBoxJobOperate}>
+											<img
+												alt=""
 												src={jobDel}
 												style={{ cursor: "pointer" }}
 												onClick={(event) => {
 													event.stopPropagation();
 													event.nativeEvent.stopImmediatePropagation();
-                                                setJobData(item.id)
-                                                setOpenDialog(true)
-                                                setDialogType('del')
+													setJobData(item.id);
+													setOpenDialog(true);
+													setDialogType("del");
 												}}
 											/>
 										</Box>
-                                }
-
+									)}
 							</Box>
-                        )
-                    })
-                }
+						);
+					})}
 			</Box>
 
 			<TablePagination
 				rowsPerPageOptions={[5, 10, 20, 50]}
-                labelRowsPerPage={'每页行数：'}
+				labelRowsPerPage={"每页行数："}
 				ActionsComponent={ActionsComponent}
 				component="div"
 				count={count || jobList.length}
 				rowsPerPage={rowsPerPage || 10}
 				page={page}
-                onPageChange={handleChangePage}//
-                onRowsPerPageChange={handleChangeRowsPerPage}//
+				onPageChange={handleChangePage} //
+				onRowsPerPageChange={handleChangeRowsPerPage} //
 			/>
 
 			<SimpleDialog
-                text={dialogType === "del" ? '任务被删除后将无法恢复，确认继续吗？' : '正在运行的任务终止后将无法重新运行，确认继续吗？'}
-                title={dialogType === "del" ? '删除任务' : '终止任务'}
+				text={
+					dialogType === "del"
+						? "任务被删除后将无法恢复，确认继续吗？"
+						: "正在运行的任务终止后将无法重新运行，确认继续吗？"
+				}
+				title={dialogType === "del" ? "删除任务" : "终止任务"}
 				openDialog={openDialog}
 				closeDialog={closeDialog}
 				onConfirm={onConfirm}
 			/>
-
-        </Box >
+		</Box>
 	);
 });
 

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

-import style from "./index.module.css";
 import { MenuItem } from "@mui/material";
+import React, { useState, useEffect } from "react";
+
 import MyInput from "@/components/mui/MyInput";
 import MyDialog from "@/components/mui/MyDialog";
-import React, { useState, useEffect } from "react";
 import useMyRequest from "@/hooks/useMyRequest";
 import { hpczone, addProject } from "@/api/project_api";
 import { useMessage } from "@/components/MySnackbar";
@@ -14,6 +14,8 @@ import {
 	getFiletokenAccordingToId,
 } from "@/views/Project/project";
 
+import style from "./index.module.css";
+
 type zoneIdOption = {
 	id: string;
 	name: string;