Merge branch 'feat-20220801' into 'staging'

Feat 20220801

See merge request !68

src/components/mui/MyButton.tsx

@@ -47,12 +47,14 @@ const theme = createTheme({
 			styleOverrides: {
 				root: {
 					minWidth: "48px",
+					boxShadow: "none !important",
 					"&.MuiButton-textError": {
 						color: "rgba(255, 78, 78, 1)",
 					},
 					"&.MuiButton-outlinedError": {
 						color: "rgba(255, 78, 78, 1)",
 						border: "1px solid rgba(255, 78, 78, 1)",
+						"&:hover": { backgroundColor: 'transparent' },
 					},
 					"& .MuiLoadingButton-loadingIndicator": {
 						color: "#fff",
@@ -67,7 +69,6 @@ const theme = createTheme({
 				outlined: {
 					backgroundColor: "#FFFFFF",
 					border: "1px solid #1370FF",
-					boxShadow: "none !important",
 					color: "#1370FF",
 					"&:hover": { backgroundColor: "#ECF4FF " },
 					"&.MuiButton-textError": {
@@ -76,7 +77,6 @@ const theme = createTheme({
 				},
 				text: {
 					backgroundColor: "transparent",
-					boxShadow: "none !important",
 					color: "#1370FF",
 					"&:hover": { backgroundColor: "#ECF4FF " },
 				},
@@ -95,7 +95,6 @@ const theme = createTheme({
 				},
 				outlinedSecondary: {
 					border: "1px solid rgba(221, 225, 230, 1)",
-					boxShadow: "none !important",
 					color: "rgba(30, 38, 51, 1)",
 					"&:hover": {
 						backgroundColor: "rgba(240, 242, 245, 1) ",
@@ -104,7 +103,6 @@ const theme = createTheme({
 				},
 				textSecondary: {
 					backgroundColor: "transparent",
-					boxShadow: "none !important",
 					color: "#FF4E4E",
 					"&:hover": { backgroundColor: "#FFEDED " },
 				},

src/components/mui/MyDialog.tsx

@@ -103,7 +103,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 						disabled={disabledConfirm}
 						isLoadingButton={true}
 						loading={loading}
-						style={{ ...okSx }}
+						style={{ marginLeft: '12px', ...okSx }}
 					/>
 				) : null}
 			</DialogActions>

src/views/CustomOperator/components/OperatorList/index.tsx

@@ -14,10 +14,11 @@ import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
 type IProps = {
 	operatorList: ITask[];
 	setOperatorList: any;
+	setInputActive: any;
 };
 
 const OperatorList = (props: IProps) => {
-	const { operatorList, setOperatorList } = props; // 流程图中流算子列表
+	const { operatorList, setOperatorList, setInputActive } = props; // 流程图中流算子列表
 	const { currentProjectStore } = useStores();
 	const [list, setList] = useState<ITask[]>([]); // 算子列表
 	const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品ID
@@ -205,6 +206,12 @@ const OperatorList = (props: IProps) => {
 					value={keyword}
 					onChange={keywordChange}
 					onKeyUp={handleKeywordKeyUp}
+					onFocus={() => {
+						setInputActive(true);
+					}}
+					onBlur={() => {
+						setInputActive(false);
+					}}
 					sx={{ fontSize: "14px" }}
 				/>
 			</div>

src/views/CustomOperator/components/SaveOperator/index.tsx

@@ -193,8 +193,8 @@ const SaveOperator = (props: IProps) => {
 					<MyInput
 						value={description}
 						id="desc"
-						label="模板描述"
-						placeholder="模板描述"
+						label="算子描述"
+						placeholder="算子描述"
 						onChange={handleDescriptionChange}
 						multiline
 						rows={4}

src/views/CustomOperator/index.tsx

@@ -21,6 +21,7 @@ const CustomOperator = observer((props: IProps) => {
 	const Message = useMessage();
 	const [operatorList, setOperatorList] = useState<ITask[]>(initOperatorList);
 	const [saveFormDialog, setSaveFormDialog] = useState(false);
+	const [inputActive, setInputActive] = useState(true);
 	// const [showCustomOperator, setShowCustomOperator] = useState(false);
 
 	/** 设置选中唯一标识符 */
@@ -176,6 +177,7 @@ const CustomOperator = observer((props: IProps) => {
 					<OperatorList
 						operatorList={operatorList}
 						setOperatorList={setOperatorList}
+						setInputActive={setInputActive}
 					/>
 					<BatchOperatorFlow
 						tasks={operatorList}
@@ -183,7 +185,7 @@ const CustomOperator = observer((props: IProps) => {
 						type="edit"
 						onFlowNodeClick={handleNodeClick}
 						flowNodeDraggable={true}
-						ListenState={!saveFormDialog}
+						ListenState={!saveFormDialog && !inputActive}
 						showVersion={true}
 						showControls={false}
 					/>

src/views/MenuLayout/index.module.css

@@ -23,7 +23,7 @@
 	color: #565c66;
 	font-size: 14px;
 	line-height: 22px;
-	border-left: 3px solid #fff;
+	border-left: 3px solid #f7f8fa;
 }
 .listItem:hover {
 	background-color: #eef1f5;

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

@@ -54,7 +54,7 @@ const AddFolder = (props: IAddFolderProps) => {
 				refresh();
 			});
 		} else {
-			Message.info(fileNameCheck.help || "请输入文件夹名称");
+			Message.error(fileNameCheck.help || "请输入文件夹名称");
 		}
 	};
 

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

@@ -48,6 +48,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 	const [saveOpen, setSaveOpen] = useState(false); // 另存为弹窗显示控制
 	const [downloadOpen, setDownloadOpen] = useState(false); // 下载弹窗显示控制
 	const [showAnimation, setShowAnimation] = useState(true); // 弹窗动画变化中
+	const [firstGetList, setFirstGetList] = useState(true); // 第一次请求列表
 
 	// 解决图像渲染造成弹窗卡顿的问题
 	useEffect(() => {
@@ -103,7 +104,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 				name: name,
 				page: paramsPage,
 				size,
-				index: searchDataType ? `meta.${searchDataType}` : "",
+				index: searchDataType ? `${searchDataType}` : "",
 				sort: sort === "null" ? "" : sort,
 				query: keyword,
 			})
@@ -111,13 +112,30 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 					setList(res.data.list);
 					setCount(res.data.totalPage - 1);
 					if (res.data.list && res.data.list.length > 0) {
-						if (res.data.list[0].meta) {
-							const meta = res.data.list[0].meta;
-							const arr = Object.keys(meta).map((item) => {
-								return { label: item, value: item };
+						if (res.data.list[0]) {
+							let arr: any = [];
+							Object.keys(res.data.list[0]).forEach((item) => {
+								if (
+									![
+										"canonical_smiles",
+										"id",
+										"mol",
+										"mol2",
+										"pdb",
+										"sdf",
+										"sdf2d",
+										"sdf3d",
+										"smiles",
+									].includes(item)
+								) {
+									arr.push({ label: item, value: item });
+								}
 							});
-							setdataTypes(arr);
-							setSearchDataType(arr[0].value);
+							if (firstGetList) {
+								setdataTypes(arr);
+								setSearchDataType(arr[0].value);
+							}
+							setFirstGetList(false);
 						}
 					}
 				})

src/views/Project/ProjectJobDetail/index.module.css

@@ -74,6 +74,13 @@
 	color: rgba(19, 112, 255, 1);
 	font-size: 14px;
 }
+.outputItemName{
+	max-width: 190px;
+	white-space: nowrap;
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 .outputLiLeftImg {
 	margin-right: 12px;
 }

src/views/Project/ProjectJobDetail/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-15 17:18:49
+ * @LastEditTime: 2022-08-22 16:22:29
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -47,6 +47,7 @@ import { getConnectionArr, getDatasetName, getDatasetPath, getSameBatch } from "
 import styles from "./index.module.css";
 
 const stateMap = {
+	SUBMITTED:"正在启动",
 	RUNNING: "正在运行",
 	ABORTED: "运行终止",
 	FAILED: "运行失败",
@@ -348,18 +349,7 @@ const ProjectSubmitWork = observer(() => {
 		setOverviewActive(false);
 		setShowOptions(!showOptions);
 	};
-
-	const handleDownLoad = (path: string) => {
-		if (path.indexOf("/ProjectData") !== -1) {
-			path = path.slice(12);
-		}
-		CloudEController.JobFileDownload(
-			path,
-			fileToken as string,
-			projectId as string
-		);
-	};
-
+	
 	/** 终止任务 */
 	const onStopJob = useCallback(() => {
 		cancelWorkJob({
@@ -375,7 +365,7 @@ const ProjectSubmitWork = observer(() => {
 	}, [deleteWorkJob, workFlowJobInfo?.id]);
 
 	const returnPermission = useMemo(() => {
-		if (state === "RUNNING") {
+		if (['SUBMITTED', 'RUNNING'].includes(state || '')) {
 			return isPass("PROJECT_WORKBENCH_JOBS_STOP", "USER");
 		} else {
 			return isPass("PROJECT_WORKBENCH_JOBS_DELETE", "MANAGER");
@@ -446,13 +436,13 @@ const ProjectSubmitWork = observer(() => {
 								}}
 							> */}
 							<MyButton
-								text={state === "RUNNING" ? "终止" : "删除"}
+								text={['SUBMITTED', 'RUNNING'].includes(state || '') ? "终止" : "删除"}
 								variant="outlined"
 								color="secondary"
 								onClick={(e: any) =>
 									handleShowPopper(
 										e,
-										state === "RUNNING"
+										['SUBMITTED', 'RUNNING'].includes(state || '')
 											? "正在运行的任务终止后将无法重新运行，确认继续吗？"
 											: "任务被删除后将无法恢复，确认继续吗？"
 									)
@@ -490,7 +480,7 @@ const ProjectSubmitWork = observer(() => {
 																}
 																alt=""
 															/>
-															{item.name}
+															<span className={styles.outputItemName}>{item.name}</span>
 														</div>
 														{/* </MyPopconfirm> */}
 														<span className={styles.outputLiRight}>
@@ -551,7 +541,7 @@ const ProjectSubmitWork = observer(() => {
 												alt=""
 											/>
 										)}
-										{state === "RUNNING" && (
+										{['SUBMITTED', 'RUNNING'].includes(state || '') && (
 											<img
 												className={styles.taskInfoValueIcon}
 												src={jobRun}

src/views/Project/ProjectOverview/TaskCard/index.tsx

@@ -87,6 +87,8 @@ const TaskCard = (props: TaskCardProps) => {
     // 渲染状态
     const renderStatusText = (data: string) => {
         switch (data) {
+            case "SUBMITTED":
+				return "正在启动";
             case "RUNNING":
                 return '正在运行'
             case "ABORTED":

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

@@ -208,12 +208,15 @@ const ConfigForm = (props: ConfigFormProps) => {
 								[styles.required]: parameter.required,
 							})}
 						>
-							{parameter.name}
+							{parameter.title}
 							<span className={styles.parameterDataType}>
 								{parameter.classTypeName}
 							</span>
 						</div>
-						<MyTooltip title={parameter.description} placement="right">
+						<MyTooltip
+							title={parameter.description || parameter.name}
+							placement="right"
+						>
 							<div className={styles.parameterContent}>
 								{(parameter.domType || "").toLowerCase() === "file" && (
 									<MyInput

src/views/Project/ProjectSubmitWork/interface.ts

@@ -11,6 +11,7 @@ export interface IParameter {
   hidden: boolean; // 使用模板时是否展示   true 不展示 用户不需要填写
   id?: string;
   name: string; // 参数名称
+  title: string; // 参数名称
   required: boolean; // 是否必填
   defaultValue: any; // 默认值
   domType: IDomType; // 前端组件类型

src/views/Project/ProjectWorkbench/workbenchList/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-28 19:02:19
+ * @LastEditTime: 2022-08-22 15:33:02
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -48,6 +48,10 @@ const currencies = [
 		value: "ALL",
 		label: "全部",
 	},
+	{
+		value: "SUBMITTED",
+		label: "正在启动",
+	},
 	{
 		value: "RUNNING",
 		label: "正在运行",

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx

@@ -144,7 +144,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 	};
 
 	// 获取模板列表
-	const getAddTemplateListFun = useCallback(() => {
+	const getAddTemplateListFun = useCallback((newTitle?: string) => {
 		const userName = JSON.parse(localStorage.getItem("userInfo") || "{}")?.name;
 		setSelectTemplateData([]);
 		setAddTemplateList([]);
@@ -153,14 +153,14 @@ const AddTemplate = (props: IAddTemplateProps) => {
 				projectId: projectId as string,
 				productId: productId as string,
 				creator: "root",
-				keyword: title,
+				keyword: newTitle,
 			});
 		} else {
 			getAddTemplateList({
 				projectId: projectId as string,
 				productId: productId as string,
 				creator: userName,
-				keyword: title,
+				keyword: newTitle,
 			});
 		}
 	}, [
@@ -169,7 +169,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 		productId,
 		projectId,
 		templateType,
-		title,
+		// title,
 	]);
 
 	//模板启用切换
@@ -193,6 +193,13 @@ const AddTemplate = (props: IAddTemplateProps) => {
 		getAddTemplateListFun();
 	}, [getAddTemplateListFun]);
 
+		// 按回车搜索
+		const handleKeyWordChangeKeyUp = (e: any) => {
+			if (e.keyCode === 13) {
+				getAddTemplateListFun(e.target.value);
+			}
+		};
+
 	const hiddenBoxArr = useMemo(() => {
 		const length =
 			templateType === "public"
@@ -215,7 +222,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 					<Typography
 						sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
 					>
-						添加工作流模版
+						管理工作流模板
 					</Typography>
 					<Box
 						sx={{
@@ -231,6 +238,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 							onChange={(e: any) => {
 								setTitle(e.target.value);
 							}}
+							onKeyUp={handleKeyWordChangeKeyUp}
 							placeholder="输入关键词搜索"
 							size="small"
 							sx={{ width: 340, height: 32 }}

src/views/Project/ProjectWorkbench/workbenchTemplate/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-08-09 16:32:42
+ * @LastEditTime: 2022-08-18 10:01:36
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -114,7 +114,7 @@ const ProjectMembers = observer(() => {
 				<SearchInput onKeyUp={handleKeyWordChangeKeyUp} sx={{ width: 340 }} />
 				{isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
 					<MyButton
-						text={"添加工作流模版"}
+						text={"管理工作流模板"}
 						img={<Add />}
 						onClick={addTemplateBlock}
 						size={"medium"}

src/views/Project/components/Flow/components/BatchNode/index.module.css

@@ -4,7 +4,7 @@
 	/* padding: 12px 20px; */
 	border: 1px solid #e6e8eb;
 	border-left: 4px solid #e6e8eb;
-	display: flex;
+	/* display: flex; */
 	align-items: center;
 }
 
@@ -37,7 +37,12 @@
 }
 
 .batchRotate {
-	transform: translateX(-50%) rotate(-90deg);
+	margin-bottom: 20px;
+	line-height: 22px;
+	font-size: 14px;
+	font-weight: 900;
+	/* text-align: center; */
+	/* transform: translateX(-50%) rotate(-90deg); */
 }
 
 .handleBox::before{

src/views/Project/components/Flow/components/BatchNode/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-12 11:20:29
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-09 11:24:38
+ * @LastEditTime: 2022-08-22 16:41:54
  * @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -68,11 +68,12 @@ const BatchNode = (props: IBatchNode) => {
 									className={styles.handleBox}
 									id={item.name}
 									style={{
-										background: "#fff ",
+										backgroundColor: "rgba(19, 112, 255, 1)",
 										border: item.error
 											? "1px solid #FF4E4E"
-											: "1px solid #D1D6DE",
+											: "1px solid #fff",
 										left: index * 24 + 20,
+										top: '-47px',
 									}}
 									type="target"
 									position={Position.Top}
@@ -99,8 +100,8 @@ const BatchNode = (props: IBatchNode) => {
 									className={styles.handleBox}
 									id={item.name}
 									style={{
-										background: "#fff ",
-										border: "1px solid #D1D6DE",
+										backgroundColor: "rgba(19, 112, 255, 1)",
+										border: "1px solid #FFF",
 										left: index * 24 + 20,
 									}}
 									type="source"

src/views/Project/components/Flow/components/BatchOperatorFlow/index.tsx

@@ -147,16 +147,17 @@ const BatchOperatorFlow = (props: IProps) => {
 							flowNodeStyle: {
 								backgroundColor: "#fff",
 								borderRadius: "4px",
+								boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
 							},
 							inStyle: {
 								backgroundColor: "rgba(19, 112, 255, 1)",
-								border: "none",
+								border: "1px solid #FFF",
 								left: 12,
 								top: "-2px",
 							},
 							outStyle: {
 								backgroundColor: "rgba(19, 112, 255, 1)",
-								border: "none",
+								border: "1px solid #FFF",
 								left: 12,
 								bottom: "-2px",
 							},

src/views/Project/components/Flow/components/FlowNode/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-12 11:29:46
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-09 19:06:43
+ * @LastEditTime: 2022-08-22 16:47:06
  * @FilePath: /bkunyun/src/views/Project/components/Flow/components/FlowNode/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -99,7 +99,7 @@ const FlowNode = (props: any) => {
 				  })
 				: null}
 			<div>
-				{title || ""} {showVersion && version}
+				<span style={{fontSize: '12px', lineHeight: '24px'}}>{title || ""} {showVersion && version}</span>
 				{flowType !== "edit" && isCheck ? (
 					<span className={styles.successDot}></span>
 				) : null}

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

@@ -270,14 +270,14 @@ const Flow = (props: IProps) => {
 				return a - b;
 			});
 			let width = 176,
-				height = 22;
+				height = 66;
 			if (positionXArr?.length) {
-				const val = positionXArr[positionXArr.length - 1] + 150;
+				const val = positionXArr[positionXArr.length - 1] + 144;
 				width = val > 176 ? val : width;
 			}
 			if (positionYArr?.length) {
-				const val = positionYArr[positionYArr.length - 1] + 6;
-				height = val > 22 ? val : height;
+				const val = positionYArr[positionYArr.length - 1] + 74;
+				height = val > 66 ? val : height;
 			}
 			return {
 				width,
@@ -318,7 +318,8 @@ const Flow = (props: IProps) => {
 						/** 样式 */
 						style: {
 							...getBatchStyle(item),
-							padding: isFlowNode(item.id) ? "20px" : "12px 20px",
+							marginTop: '-44px',
+							padding: "12px 20px",
 						},
 					},
 					/** 坐标 */
@@ -583,12 +584,31 @@ const Flow = (props: IProps) => {
 		[connectModifyParameters, tasks]
 	);
 
+	// 获取算子类型   批算还是流算子
+	const getTaskType = useCallback(
+		(taskId: string) => {
+			let type = "";
+			tasks?.forEach((task) => {
+				if (task.id === taskId) {
+					type = task.type;
+				}
+			});
+			return type;
+		},
+		[tasks]
+	);
+
 	/** 已经连接线啦 */
 	const onConnect = useCallback(
 		(connection: Connection) => {
 			const { inputClassType, outClassType } = getClassType(connection);
 			let result: ITask[] = [];
-			if (inputClassType === outClassType) {
+			if (
+				getTaskType(connection.source as string) === "FLOW" ||
+				getTaskType(connection.target as string) === "FLOW"
+			) {
+				return;
+			} else if (inputClassType === outClassType) {
 				result = connectCheck(connection) as ITask[];
 			} else {
 				Message.error("端口数据类型不一致，无法连接！");
@@ -596,7 +616,14 @@ const Flow = (props: IProps) => {
 			}
 			setTasks && setTasks(result);
 		},
-		[Message, connectCheck, getClassType, setTasks, tasksDeleteLine]
+		[
+			Message,
+			connectCheck,
+			getClassType,
+			setTasks,
+			tasksDeleteLine,
+			getTaskType,
+		]
 	);
 
 	/** 点击连线 */

src/views/WorkFlowEdit/components/ParameterSetting/index.tsx

@@ -192,7 +192,10 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 	const renderInput = useCallback(
 		(parameter: IParameter) => {
 			return (
-				<MyTooltip title={parameter.description} placement="right">
+				<MyTooltip
+					title={parameter.description || parameter.name}
+					placement="right"
+				>
 					<div>
 						{(parameter.domType || "").toLowerCase() === "file" && (
 							<MyInput
@@ -442,7 +445,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 												[styles.required]: parameter.required,
 											})}
 										>
-											{parameter.name}
+											{parameter.title}
 										</div>
 										<div className={styles.parameterClassTypeName}>
 											{parameter.classTypeName}
@@ -569,7 +572,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 													[styles.required]: parameter.required,
 												})}
 											>
-												{parameter.name}
+												{parameter.title}
 											</div>
 											<div className={styles.inOutParameterdataType}>
 												{parameter.classTypeName}
@@ -581,6 +584,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 												onChange={(e: any) =>
 													handleHiddenChange(e, parameter.name || "")
 												}
+												disabled={true}
 											></MySwitch>
 										</div>
 									</div>
@@ -614,7 +618,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 													[styles.required]: parameter.required,
 												})}
 											>
-												{parameter.name}
+												{parameter.title}
 											</div>
 											<div className={styles.inOutParameterdataType}>
 												{parameter.classTypeName}

src/views/WorkFlowEdit/index.module.css

@@ -45,14 +45,28 @@
 	bottom: 20px;
 	width: 36px;
 	height: 36px;
-	border-radius: 50%;
+	border-radius: 18px;
 	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
 	font-size: 30px;
 	line-height: 36px;
-	text-align: center;
+	text-align: start;
 	color: RGBA(66, 141, 255, 1);
 	cursor: pointer;
 	background-color: #fff;
+	transition: width 1s;
+	-webkit-transition: width 1s;
+	overflow: hidden;
+	display: flex;
+	justify-content: start;
+	align-items: center;
+}
+.addOperator:hover {
+	width: 105px;
+}
+.addText {
+	font-size: 14px;
+	line-height: 36px;
+	white-space: nowrap;
 }
 .swFlowBox {
 	flex: 1;

src/views/WorkFlowEdit/index.tsx

@@ -6,7 +6,7 @@
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useMemo } from "react";
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import IconButton from "@mui/material/IconButton";
 import _ from "lodash";
@@ -25,6 +25,7 @@ import { getCustomTemplateParameterCheckResult } from "./util";
 import useMyRequest from "@/hooks/useMyRequest";
 import CustomOperator from "../CustomOperator";
 import SaveCustomTemplate from "./components/SaveCustomTemplate";
+import AddIcon from "@mui/icons-material/Add";
 
 import styles from "./index.module.css";
 
@@ -55,6 +56,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 	const [oldversion, setOldersion] = useState(""); // 编辑是自定义模板的老版本
 	const [description, setDescription] = useState(""); // 自定义模板描述
 	const [creator, setCreator] = useState(""); // 自定义模板创建人
+	const [operatingArea, setOperatingArea] = useState<"form" | "flow">("form"); // 当前操作区域
 
 	const [leftContentType, setLeftContentType] = useState("list"); // 页面左侧展示的是算子列表还是参数设置
 	const [popperTitle, setPopperTitle] = useState(
@@ -62,6 +64,14 @@ const WorkFlowEdit = observer((props: IProps) => {
 		"返回后，当前页面已填写内容将不保存，确认返回吗？"
 	);
 
+	// 是否要监听删除时间
+	const listenState = useMemo(() => {
+		if (operatingArea === "form") {
+			return false;
+		}
+		return !saveFormDialog && !showCustomOperator;
+	}, [operatingArea, saveFormDialog, showCustomOperator]);
+
 	// 编辑时获取模板详情的方法
 	const { run: fetchTemplateConfigInfoRun } = useMyRequest(
 		fetchTemplateConfigInfo,
@@ -206,7 +216,12 @@ const WorkFlowEdit = observer((props: IProps) => {
 				</div>
 			</div>
 			<div className={styles.swContent}>
-				<div className={styles.swFormBox}>
+				<div
+					className={styles.swFormBox}
+					onClick={() => {
+						setOperatingArea("form");
+					}}
+				>
 					<div className={styles.radiosBox}>
 						<RadioGroupOfButtonStyle
 							radioOptions={radioOptions}
@@ -240,16 +255,23 @@ const WorkFlowEdit = observer((props: IProps) => {
 						className={styles.addOperator}
 						onClick={() => setShowCustomOperator(true)}
 					>
-						+
+						<AddIcon sx={{ padding: "6px" }} />
+						<span className={styles.addText}>添加算子</span>
 					</div>
 				</div>
-				<div className={styles.swFlowBox} id="workFlowEditRight">
+				<div
+					className={styles.swFlowBox}
+					id="workFlowEditRight"
+					onClick={() => {
+						setOperatingArea("flow");
+					}}
+				>
 					<Flow
 						tasks={templateConfigInfo}
 						setTasks={setTemplateConfigInfo}
 						type="edit"
 						onFlowNodeClick={handleNodeClick}
-						ListenState={!saveFormDialog && !showCustomOperator}
+						ListenState={listenState}
 					/>
 				</div>
 			</div>

src/views/WorkFlowEdit/util.ts

@@ -50,7 +50,7 @@ export const getCustomTemplateParameterCheckResult = (
       } else if (parameter.hidden && !parameter.linked) {
         return {
           error: true,
-          helperText: '该输入为必填，需在右侧视图编辑区连接输入文件或重新改回“开启”状态',
+          helperText: '该输入为必填，需在右侧视图编辑区连接输入文件',
           deleteLine: false,
         }
       }