Merge branch 'feat-20220801' into 'release'

Feat 20220801

See merge request !83

src/assets/project/goback.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="点击算子" transform="translate(-24.000000, -133.000000)">
+            <g id="编组-12" transform="translate(24.000000, 133.000000)">
+                <g id="编组-16" transform="translate(11.000000, 11.000000) scale(-1, 1) rotate(-90.000000) translate(-11.000000, -11.000000) ">
+                    <rect id="矩形" x="0" y="0" width="22" height="22"></rect>
+                    <g id="编组-14" transform="translate(5.500000, 8.250000)" stroke="#8A9099" stroke-linejoin="round" stroke-width="2">
+                        <polyline id="路径-7备份" transform="translate(5.500000, 2.750000) scale(1, -1) translate(-5.500000, -2.750000) " points="0 5.5 5.5 2.98949133e-16 11 5.5"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/BusinessComponents/SearchInput/index.tsx

@@ -38,6 +38,9 @@ const SearchInput = (props: SearchInputProps) => {
                         height: "32px",
                         fontSize: "14px",
                         paddingRight: "8px",
+                        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+							borderWidth: "1px",
+						},
                         "& .MuiOutlinedInput-notchedOutline": {
 							borderColor: '#DDE1E6',
 						},

src/components/mui/MyButton.tsx

@@ -46,7 +46,7 @@ const theme = createTheme({
 		MuiButton: {
 			styleOverrides: {
 				root: {
-					minWidth: "48px",
+					minWidth: "68px",
 					boxShadow: "none !important",
 					"&.MuiButton-textError": {
 						color: "rgba(255, 78, 78, 1)",
@@ -54,7 +54,7 @@ const theme = createTheme({
 					"&.MuiButton-outlinedError": {
 						color: "rgba(255, 78, 78, 1)",
 						border: "1px solid rgba(255, 78, 78, 1)",
-						"&:hover": { backgroundColor: 'transparent' },
+						"&:hover": { backgroundColor: "transparent" },
 					},
 					"& .MuiLoadingButton-loadingIndicator": {
 						color: "#fff",
@@ -110,16 +110,19 @@ const theme = createTheme({
 					"& p": { fontSize: "12px" },
 					height: "28px",
 					padding: "0 12px",
+					minWidth: "60px",
 				},
 				sizeMedium: {
 					"& p": { fontSize: "14px" },
 					height: "32px",
 					padding: "0 16px",
+					minWidth: "68px",
 				},
 				sizeLarge: {
 					"& p": { fontSize: "16px" },
 					height: "36px",
 					padding: "0 16px",
+					minWidth: "80px",
 				},
 			},
 		},

src/components/mui/MySelect.tsx

@@ -12,6 +12,7 @@ import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
 import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
 import { createTheme, ThemeProvider } from "@mui/material";
+import selectActive from "@/assets/project/selectActive.svg";
 
 export interface IOption {
 	label: string;
@@ -80,10 +81,26 @@ export default function MySelect(props: IProps) {
 						},
 					},
 					input: {
+						fontSize: "14px",
 						"&.Mui-disabled": {
 							background: "rgba(247, 248, 250, 1)",
 							cursor: "not-allowed",
 						},
+						img: {
+							display: "none",
+						},
+					},
+				},
+			},
+			MuiList: {
+				styleOverrides: {
+					root: {
+						"& .MuiButtonBase-root": {
+							"&.Mui-selected": {
+								backgroundColor: "#fff",
+								color: "#1370FF",
+							},
+						},
 					},
 				},
 			},
@@ -91,9 +108,12 @@ export default function MySelect(props: IProps) {
 			MuiMenuItem: {
 				styleOverrides: {
 					root: {
+						paddingRight: "46px",
+						fontSize: "14px",
+						lineHeight: "24px",
 						":hover": {
-							backgroundColor: "#ECF4FF ",
-							color: "#1370FF",
+							backgroundColor: "#F0F2F5 ",
+							color: "#1E2633",
 						},
 					},
 				},
@@ -152,6 +172,14 @@ export default function MySelect(props: IProps) {
 					},
 				},
 			},
+
+			MuiPaper: {
+				styleOverrides: {
+					root: {
+						boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
+					},
+				},
+			},
 		},
 	});
 
@@ -186,6 +214,19 @@ export default function MySelect(props: IProps) {
 										key={index}
 									>
 										{item.label}
+										{value === item.value && (
+											<img
+												style={{
+													width: "16px",
+													height: "16px",
+													position: "absolute",
+													top: "10px",
+													right: "12px",
+												}}
+												src={selectActive}
+												alt=""
+											/>
+										)}
 									</MenuItem>
 								);
 						  })

src/views/ConsoleLayout/components/FileItem/index.module.css

@@ -17,6 +17,13 @@
 	text-overflow: ellipsis;
 	font-size: 14px;
 }
+
+.contentBox {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
 .speedBox {
 	display: flex;
 	justify-content: space-between;

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

@@ -98,7 +98,7 @@ const FileItem = observer((props: IProps) => {
 		<div className={styles.itemBox}>
 			<div className={styles.leftBox}>
 				<img src={bkunyunFile} alt="" style={{ marginRight: 16 }} />
-				<div>
+				<div className={styles.contentBox}>
 					<div>
 						<b className={styles.fileNameBox} title={itemInfo?.name || ""}>
 							{itemInfo?.name || ""}

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: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-09-01 15:54:33
+ * @LastEditTime: 2022-09-02 10:47:33
  * @FilePath: /bkunyun/src/views/ConsoleLayout/components/TransferList/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -20,16 +20,19 @@ const TranSferList = observer(() => {
 	const uploadInfoStore = toJS(useGlobalStore("fileListStore"));
 
 	return (
-		<Box style={{ width: 520, padding: 20 }}>
-			<MyTitle title="传输列表" />
+		<Box style={{ width: 520 }}>
+			<MyTitle style={{ padding: "12px 16px" }} title="传输列表" />
 			<Box
 				style={{
 					display: "flex",
 					justifyContent: "space-between",
 					alignItems: "center",
+					padding: "0 16px",
 				}}
 			>
-				<Box style={{ color: "#8A9099" }}>请勿在上传过程中刷新页面！</Box>
+				<Box style={{ color: "#8A9099", fontSize: 14 }}>
+					请勿在上传过程中刷新页面！
+				</Box>
 				<MySelect
 					variant="standard"
 					value={"default"}
@@ -43,7 +46,7 @@ const TranSferList = observer(() => {
 					size="small"
 				/>
 			</Box>
-			<div style={{ height: 400, overflow: "overlay" }}>
+			<div style={{ height: 400, overflow: "overlay", padding: "0 16px" }}>
 				{uploadInfoStore?.fileList.map((item) => {
 					return <FileItem fileItemInfo={item} key={item.id} />;
 				})}

src/views/MenuLayout/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-08-02 11:43:28
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-03 19:05:48
+ * @LastEditTime: 2022-09-02 12:01:12
  * @FilePath: /bkunyun/src/views/MenuLayout/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -31,19 +31,19 @@ const MenuLayout = observer(() => {
 
 	const routerIcon = (id: string, isSelect: boolean) => {
 		try {
-      const result = require(`../../assets/project/${id}${isSelect ? '_BLUE' : ''}.svg`)
-      return result || ''
+			const result = require(`../../assets/project/${id}${
+				isSelect ? "_BLUE" : ""
+			}.svg`);
+			return result || "";
 		} catch (error) {
-      console.log(error)
-    }
+			console.log(error);
 		}
+	};
 
 	return (
 		<Box className={style.container}>
 			<Box className={style.aside}>
-        {
-          pathname.indexOf('userCenter') < 0 && <CurrentProject />
-        }
+				{pathname.indexOf("userCenter") < 0 && <CurrentProject />}
 				<List
 					sx={{
 						paddingTop: 0,
@@ -59,10 +59,26 @@ const MenuLayout = observer(() => {
 										[style.listItem]: true,
 										[style.active]: `/v3${item.path}` === pathname,
 									})}
+									style={
+										`/v3${item.path}` === pathname
+											? { borderLeft: "3px solid #1370ff" }
+											: undefined
+									}
 									onClick={() => item.type === "page" && navigate(item.path)}
 								>
-                  <img className={style.routerIcon} src={routerIcon(item.id || '', `/v3${item.path}` === pathname) || undefined} alt='' />
-                  <span style={{ verticalAlign: 'middle', fontWeight: '500' }}>{item.name}</span>
+									<img
+										className={style.routerIcon}
+										src={
+											routerIcon(
+												item.id || "",
+												`/v3${item.path}` === pathname
+											) || undefined
+										}
+										alt=""
+									/>
+									<span style={{ verticalAlign: "middle", fontWeight: "500" }}>
+										{item.name}
+									</span>
 								</li>
 							);
 						}

src/views/Project/ProjectData/MoveFile/index.module.css

 .rootTitle {
 	border-radius: 4px 4px 0 0;
 	background-color: rgba(25, 118, 210, 0.08);
-  /* background-color: rgba(25, 118, 210, 0.5); */
 	line-height: 44px;
 	color: rgba(30, 38, 51, 1);
 	font-size: 14px;
@@ -21,11 +20,11 @@
 	justify-content: flex-start;
 	align-items: center;
 }
-.treeLabelText{
+.treeLabelText {
 	line-height: 44px;
 	overflow: hidden;
 	text-overflow: ellipsis;
-  -o-text-overflow:ellipsis;
+	-o-text-overflow: ellipsis;
 	white-space: nowrap;
 	width: 320px;
 }

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

@@ -14,7 +14,7 @@
 	top: 0;
 	height: 56px;
 	background-color: #fff;
-	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -25,6 +25,9 @@
 	justify-content: flex-start;
 	align-items: center;
 }
+.goBackIcon {
+	cursor: pointer;
+}
 .swTemplateTitle {
 	margin: 0 19px 0 8px;
 	line-height: 22px;
@@ -39,7 +42,7 @@
 }
 .swFormBox {
 	background-color: #fff;
-	border-right: 1xp solid rgba(235, 237, 240, 1);
+	border-right: 1px solid #ebedf0;
 	width: 360px;
 	overflow-y: overlay;
 	box-sizing: border-box;

src/views/Project/ProjectJobDetail/index.tsx

@@ -11,8 +11,6 @@ import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import classNames from "classnames";
 import { useLocation, useNavigate } from "react-router-dom";
-import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
-import IconButton from "@mui/material/IconButton";
 
 import MyButton from "@/components/mui/MyButton";
 import useMyRequest from "@/hooks/useMyRequest";
@@ -27,6 +25,7 @@ import jobStop from "@/assets/project/jobStop.svg";
 import jobRun from "@/assets/project/jobRun.svg";
 import fullScreen from "@/assets/project/fullScreen.svg";
 import partialScreen from "@/assets/project/partialScreen.svg";
+import goback from "@/assets/project/goback.svg";
 import CloudEController from "@/api/fileserver/CloudEController";
 import jobFail from "@/assets/project/jobFail.svg";
 import fileIcon from "@/assets/project/fileIcon.svg";
@@ -422,36 +421,17 @@ const ProjectSubmitWork = observer(() => {
 			{fullScreenShow ? null : (
 				<div className={styles.swHeader}>
 					<div className={styles.swHeaderLeft}>
-						<IconButton
-							color="primary"
+						<img
 							onClick={onBack}
-							aria-label="upload picture"
-							component="span"
-							size="small"
-						>
-							<ArrowBackIosNewIcon
-								sx={{
-									color: "rgba(194, 198, 204, 1)",
-									width: "12px",
-									height: "12px",
-								}}
+							className={styles.goBackIcon}
+							src={goback}
+							alt=""
 						/>
-						</IconButton>
 
 						<div className={styles.swTemplateTitle}>{name}</div>
 					</div>
 					{returnPermission && (
 						<div className={styles.swHeaderRight}>
-							{/* <MyPopconfirm
-								title={
-									state === "RUNNING"
-										? "正在运行的任务终止后将无法重新运行，确认继续吗？"
-										: "任务被删除后将无法恢复，确认继续吗？"
-								}
-								onConfirm={() => {
-									state === "RUNNING" ? onStopJob() : onDeleteJob();
-								}}
-							> */}
 							<MyButton
 								text={
 									["SUBMITTED", "RUNNING"].includes(state || "")
@@ -459,7 +439,7 @@ const ProjectSubmitWork = observer(() => {
 										: "删除"
 								}
 								variant="outlined"
-								color="secondary"
+								color="error"
 								onClick={(e: any) =>
 									handleShowPopper(
 										e,
@@ -468,9 +448,7 @@ const ProjectSubmitWork = observer(() => {
 											: "任务被删除后将无法恢复，确认继续吗？"
 									)
 								}
-								// click={onStopJob}
 							></MyButton>
-							{/* </MyPopconfirm> */}
 						</div>
 					)}
 				</div>

src/views/Project/ProjectOverview/TaskCard/index.module.css

@@ -27,6 +27,7 @@
 
 .cardLeft {
 	flex: 1;
+	cursor: pointer;
 	padding: 16px 24px;
 }
 

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

@@ -3,12 +3,12 @@ import { useNavigate } from "react-router-dom";
 import MyProgress from "@/components/mui/MyProgress";
 import style from "./index.module.css";
 
-import runTime from '../../../../assets/project/runTime.svg'
-import jobCostImg 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 runTime from "../../../../assets/project/runTime.svg";
+import jobCostImg 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 fileIcon from "@/assets/project/fileIcon.svg";
 import dataSetIcon from "@/assets/project/dataSetIcon.svg";
 
@@ -25,8 +25,20 @@ type TaskCardProps = {
 };
 
 const TaskCard = (props: TaskCardProps) => {
-    const { id, name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
+	const {
+		id,
+		name,
+		creator,
+		state,
+		completeNum,
+		totalNum,
+		costTime,
+		jobCost,
+		outputs,
+	} = props;
 	const navigate = useNavigate();
+	const [displayTitleBlue, setDisplayTitleBlue] = useState<boolean>(false);
+
 	const randerOutputs = useMemo(() => {
 		if (outputs) {
 			let result = Object.keys(outputs);
@@ -45,10 +57,10 @@ const TaskCard = (props: TaskCardProps) => {
 		} else {
 			return [];
 		}
-    }, [outputs])
+	}, [outputs]);
 	// 结果文件跳转
 	const goToProjectData = (info: any) => {
-        let { path = '', type = '' } = info
+		let { path = "", type = "" } = info;
 		const lastIndex = path.lastIndexOf("/");
 		// /projectData
 		// dataType
@@ -57,49 +69,49 @@ const TaskCard = (props: TaskCardProps) => {
 		}
 		path = path.slice(12);
 		navigate(`/product/cadd/projectData`, {
-            state: { pathName: path || '/', dataType: type },
+			state: { pathName: path || "/", dataType: type },
 		});
-    }
+	};
 	// 跳转详情页
 	const gotoDetail = (id: string) => {
 		navigate(`/product/cadd/projectJobDetail`, {
-            state: { taskId: id, from: 'projectOverview' },
+			state: { taskId: id, from: "projectOverview" },
 		});
-    }
+	};
 	// 渲染状态图标
 	const renderStatusIcon = (data: string) => {
 		switch (data) {
 			case "SUBMITTED":
-                return jobRun
+				return jobRun;
 			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 "SUBMITTED":
 				return "正在启动";
 			case "RUNNING":
-                return '正在运行'
+				return "正在运行";
 			case "ABORTED":
-                return '运行终止'
+				return "运行终止";
 			case "FAILED":
-                return '运行失败'
+				return "运行失败";
 			case "SUCCEEDED":
-                return '运行成功'
+				return "运行成功";
 			default:
-                return '未知'
-        }
+				return "未知";
 		}
+	};
 	// 渲染字体颜色
 	const renderTextColor = (data: string) => {
 		switch (data) {
@@ -151,12 +163,33 @@ const TaskCard = (props: TaskCardProps) => {
 				return "disable";
 		}
 	}, []);
-    return <div className={style.cardBox}>
-        <div className={style.cardLeft}>
+	return (
+		<div className={style.cardBox}>
+			<div
+				className={style.cardLeft}
+				onClick={() => gotoDetail(id)}
+				onMouseOver={() => setDisplayTitleBlue(true)}
+				onMouseOut={() => setDisplayTitleBlue(false)}
+			>
 				<div className={style.topLine}>
-                <div className={style.taskName} onClick={() => gotoDetail(id)}>{name}</div>
-                <div className={style.taskStatus} style={{ color: renderTextColor(state), background: renderBackgroundColor(state) }}>
-                    <img src={renderStatusIcon(state)} alt="" className={style.statusImg} />
+					<div
+						className={style.taskName}
+						style={displayTitleBlue ? { color: "#1370ff" } : undefined}
+					>
+						{name}
+					</div>
+					<div
+						className={style.taskStatus}
+						style={{
+							color: renderTextColor(state),
+							background: renderBackgroundColor(state),
+						}}
+					>
+						<img
+							src={renderStatusIcon(state)}
+							alt=""
+							className={style.statusImg}
+						/>
 						<span>{renderStatusText(state)}</span>
 					</div>
 				</div>
@@ -164,9 +197,14 @@ const TaskCard = (props: TaskCardProps) => {
 				<div className={style.taskProgress}>
 					<div className={style.progressInfo}>
 						<div>Progress</div>
-                    <div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
+						<div style={{ color: renderTextColor(state) }}>
+							{completeNum + "/" + totalNum}
 						</div>
-                <MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100} />
+					</div>
+					<MyProgress
+						color={renderProgressColor(state)}
+						value={(completeNum / totalNum) * 100}
+					/>
 				</div>
 				<div className={style.bottomLine}>
 					<img alt="" src={runTime} />
@@ -179,24 +217,31 @@ const TaskCard = (props: TaskCardProps) => {
 				<div className={style.arrow}></div>
 			</div>
 			<div className={style.cardRight}>
-            {randerOutputs.length === 0 ? <div className={style.noResult}>暂无结果文件</div> :
+				{randerOutputs.length === 0 ? (
+					<div className={style.noResult}>暂无结果文件</div>
+				) : (
 					<div className={style.resultBox}>
 						{randerOutputs.map((item, index) => {
-                        return <div key={index} className={style.result} onClick={() => goToProjectData(item)}>
+							return (
+								<div
+									key={index}
+									className={style.result}
+									onClick={() => goToProjectData(item)}
+								>
 									<img
 										className={style.outputLeftImg}
-                                src={
-                                    item?.type === "file" ? fileIcon : dataSetIcon
-                                }
+										src={item?.type === "file" ? fileIcon : dataSetIcon}
 										alt=""
 									/>
 									<span className={style.outputTitle}>{item?.name}</span>
 								</div>
+							);
 						})}
 					</div>
-            }
+				)}
 			</div>
 		</div>
-}
+	);
+};
 
-export default TaskCard
+export default TaskCard;
\ No newline at end of file

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

+.box {
+	height: calc(100vh - 57px);
+	overflow: overlay;
+}
+
 .topFixed {
 	position: sticky;
 	top: 0;
@@ -5,6 +10,10 @@
 	background-color: #fff;
 }
 
+.topFixedShadow {
+	box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.12);
+}
+
 .basicInformation {
 	display: flex;
 	justify-content: space-between;

src/views/Project/ProjectOverview/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import _ from "lodash";
 import moment from "moment";
+import classNames from "classnames";
 
 import useMyRequest from "@/hooks/useMyRequest";
 import { getOverviewInfo, getTaskOverview } from "@/api/project_api";
@@ -27,6 +28,16 @@ const ProjectOverview = observer(() => {
 	const [size, setSize] = useState(999);
 	// 选择近7天or近15天or近30天
 	const [day, setDay] = useState("7");
+	// 滚轮是否到顶,判断是否显示阴影
+	const [isTop, setIsTop] = useState(true)
+	// 滚动滚轮时监听是否到顶
+	const onscroll = (e: any) => {
+		if (e.target.scrollTop <= 0) {
+			setIsTop(true)
+		} else {
+			setIsTop(false)
+		}
+	}
 	// 获取概览基本信息
 	const { run: getOverview, loading } = useMyRequest(getOverviewInfo, {
 		onSuccess: (result: any) => {
@@ -100,8 +111,13 @@ const ProjectOverview = observer(() => {
 			);
 		} else {
 			return (
-				<>
-					<div className={style.topFixed}>
+				<div className={style.box} onScroll={onscroll}>
+					<div
+						className={classNames({
+							[style.topFixed]: true,
+							[style.topFixedShadow]: !isTop,
+						})}
+					>
 						<div className={style.basicInformation}>
 							<div>
 								<div className={style.titleBox}>
@@ -227,7 +243,7 @@ const ProjectOverview = observer(() => {
 								);
 							})}
 					</div>
-				</>
+				</div>
 			);
 		}
 	} else {

src/views/Project/ProjectWorkbench/index.tsx

@@ -58,6 +58,7 @@ const ProjectWorkbench = observer(() => {
 						lineHeight: "26px",
 						fontWeight: "600",
 						color: "#1E2633",
+						marginBottom: "3px",
 					}}
 				>
 					工作台

src/views/Project/ProjectWorkbench/workbenchList/index.module.css

@@ -22,6 +22,7 @@
 
 .tabBox {
 	padding: 16px 0px 16px 24px;
+	cursor: pointer;
 	display: flex;
 	align-items: center;
 	width: 100%;
@@ -95,6 +96,12 @@
 	justify-content: center;
 }
 
+.jobOperateImgBox:hover {
+	padding: 8px;
+	border-radius: 4px;
+	background-color: #ebedf0;
+}
+
 .tabUpdate {
 	cursor: pointer;
 	width: 32px;
@@ -109,7 +116,8 @@
 	border-radius: 4px;
 }
 .pagination {
-	padding: 19px 0;
+	padding: 19px 0 0px;
 	display: flex;
 	justify-content: end;
+	align-items: center;
 }

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-09-01 16:35:02
+ * @LastEditTime: 2022-09-02 14:45:04
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -480,6 +480,7 @@ const ProjectMembers = observer(() => {
 												<img
 													alt=""
 													src={jobDel}
+													className={styles.jobOperateImgBox}
 													style={{ cursor: "pointer" }}
 													onClick={(event) => {
 														event.stopPropagation();
@@ -495,6 +496,7 @@ const ProjectMembers = observer(() => {
 							);
 						})}
 				</MyCircularProgress>
+			</Box>
 			<div className={styles.pagination}>
 				<MyPagination
 					page={page}
@@ -502,7 +504,6 @@ const ProjectMembers = observer(() => {
 					count={count || jobList.length}
 				/>
 			</div>
-			</Box>
 
 			{/* <TablePagination
 				rowsPerPageOptions={[5, 10, 20, 50]}

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css

@@ -11,7 +11,7 @@
 }
 
 .headerBoxShadow {
-	box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.15);
+	box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.12);
 }
 
 .templateBox {

src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css

@@ -41,6 +41,7 @@
 	margin-bottom: 16px;
 	position: relative;
 	box-sizing: border-box;
+	transition: box-shadow .2s cubic-bezier(0, 0, 1, 1);
 }
 .templateBlock:hover {
 	box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);

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

@@ -10,7 +10,8 @@ import { memo, useEffect, useState } from "react";
 import { Box, Typography } from "@mui/material";
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
-import Add from "@mui/icons-material/Add";
+import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
+
 
 import MyButton from "@/components/mui/MyButton";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
@@ -115,7 +116,7 @@ const ProjectMembers = observer(() => {
 				{isPass("PROJECT_WORKBENCH_FLOES_ADD", "MANAGER") && (
 					<MyButton
 						text={"管理工作流模板"}
-						img={<Add />}
+						startIcon={<FormatListBulletedRoundedIcon fontSize="small"/>}
 						onClick={addTemplateBlock}
 						size={"medium"}
 					/>

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

 .batchNode {
 	background-color: #fff;
 	border-radius: 4px;
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
 	/* padding: 12px 20px; */
-	border: 1px solid #e6e8eb;
+	/* border: 1px solid #e6e8eb; */
 	border-left: 4px solid #e6e8eb;
 	/* display: flex; */
 	align-items: center;
 }
 
+.batchNode:hover {
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
+}
+
 .doneBatchNode {
 	border-left: 4px solid #0dd09b;
 }
@@ -45,7 +50,7 @@
 	/* transform: translateX(-50%) rotate(-90deg); */
 }
 
-.handleBox::before{
+.handleBox::before {
 	content: "";
 	position: absolute;
 	left: -4px;

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

@@ -44,3 +44,9 @@
 	width: 14px;
 	height: 14px;
 }
+
+.handleBox {
+	background: #fff;
+	width: 6px;
+	height: 6px;
+}

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-31 17:09:31
+ * @LastEditTime: 2022-09-02 14:23:07
  * @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
  */
@@ -86,8 +86,6 @@ const FlowNode = (props: any) => {
 									className={styles.handleBox}
 									id={item.name}
 									style={{
-										background: "#fff ",
-										border: "1px solid #D1D6DE",
 										...inStyle,
 										left: index * 24 + 16,
 									}}
@@ -98,8 +96,10 @@ const FlowNode = (props: any) => {
 						);
 				  })
 				: null}
-			<div style={{display: 'flex', alignItems: 'center'}}>
-				<span style={{fontSize: '12px', lineHeight: '24px'}}>{title || ""} {showVersion && version}</span>
+			<div style={{ display: "flex", alignItems: "center" }}>
+				<span style={{ fontSize: "12px", lineHeight: "20px" }}>
+					{title || ""} {showVersion && version}
+				</span>
 				{flowType !== "edit" && isCheck ? (
 					<span className={styles.successDot}></span>
 				) : null}
@@ -108,7 +108,7 @@ const FlowNode = (props: any) => {
 				) : null}
 				{getImgUrl(executionStatus) && (
 					<img
-						style={{ marginLeft: "6px" }}
+						style={{ marginLeft: "6px", width: "12px", height: "12px" }}
 						src={getImgUrl(executionStatus)}
 						alt=""
 					/>
@@ -122,8 +122,6 @@ const FlowNode = (props: any) => {
 									className={styles.handleBox}
 									id={item.name}
 									style={{
-										background: "#fff ",
-										border: "1px solid #D1D6DE",
 										...outStyle,
 										left: index * 24 + 16,
 									}}

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

@@ -311,22 +311,25 @@ const Flow = (props: IProps) => {
 									/** tasks 数据 */
 									tasks: tasks,
 							  }
-							: { 	selectedStatus: externalSelectedNodeId
+							: {
+									selectedStatus: externalSelectedNodeId
 										? externalSelectedNodeId.includes(item.id)
-								: inSideFlowNodeId === item.id,}),
+										: inSideFlowNodeId === item.id,
+							  }),
 						/** 输入输出圆点状态 */
 						// dotStatus: nodesInputAndOutputStatus(item.id),
 
 						/** 样式 */
 						style: {
 							...getBatchStyle(item),
-							marginTop: '-44px',
-							padding: "12px 20px",
+							marginTop: "-44px",
+							padding: "12px 20px 20px 20px",
 						},
 					},
 					/** 坐标 */
 					position: {
-						x: Number(item.position?.x) || 0,
+						/** 流算子生成的时候多加了15  兼容历史模版数据  直接这边减去15 */
+						x: Number(item.position?.x - 15) || 0,
 						y: Number(item.position?.y) || 0,
 					},
 					/**
@@ -379,11 +382,11 @@ const Flow = (props: IProps) => {
 							style: { stroke: "#1370FF", strokeWidth: 2 },
 							animated: true,
 					  }
-					: {}),
+					: { stroke: "#D1D6DE" }),
 				/** 点击batch节点选中 */
 				...(item?.batchId === newSelectId
 					? { style: { stroke: "#1370FF" }, animated: true }
-					: {}),
+					: { stroke: "#D1D6DE" }),
 				labelStyle: { fill: "#8A9099" },
 				labelBgStyle: { fill: "#F7F8FA " },
 				label: item.label ? `(${item.label})` : "",

src/views/Project/components/ProjectListPopper/index.module.css

@@ -56,7 +56,8 @@
 	border-top: 1px solid #f0f2f5;
 }
 .noProjectBox {
-	color: #edeff2;
+	color: #8a9099;
+	font-size: 14px;
 	height: 48px;
 	line-height: 48px;
 	text-align: center;

src/views/WorkFlowEdit/components/OperatorList/index.module.css

@@ -3,6 +3,17 @@
 	border-radius: 4px;
 	cursor: grab;
 	padding: 16px 16px 0 24px;
+	background-color: #fff;
+}
+.operatorItemBox:hover {
+	position: relative;
+	z-index: 1;
+	top: -1px;
+	left: 24px;
+	box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
+}
+.operatorItemBox:hover .footerBox {
+	border-bottom: none;
 }
 
 .dragBox {
@@ -34,15 +45,17 @@
 
 .versionBox {
 	display: inline-block;
+	background: #f0f2f5;
 	color: #1e2633;
+	cursor: pointer;
+	padding: 1px 9px;
 	border-radius: 2px;
 	font-size: 12px;
-	padding: 2px 8px;
-	background-color: #f0f2f5;
+	line-height: 20px;
 }
 
 .searchBox {
-	padding: 0 24px 16px 24px;
+	padding: 0 24px 8px 24px;
 }
 
 .footerBox {
@@ -60,16 +73,8 @@
 	overflow-y: overlay;
 	height: calc(100% - 48px);
 	position: relative;
+	overflow-x: visible;
 }
-
-.versionBox {
-	background: #e6e8eb;
-	color: #1e2633;
-	cursor: pointer;
-	padding: 0 8px;
-	border-radius: 2px;
-}
-
 .noData {
 	display: flex;
 	justify-content: center;

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

@@ -13,6 +13,7 @@ import { IResponse } from "@/api/http";
 import { fetchOperatorList } from "@/api/workbench_api";
 import { useStores } from "@/store";
 import noTemplate from "@/assets/project/noTemplate.svg";
+import SearchInput from "@/components/BusinessComponents/SearchInput";
 
 import styles from "./index.module.css";
 
@@ -198,7 +199,18 @@ const OperatorList = observer((props: IOperatorListProps) => {
 	return (
 		<div className={styles.operatorListBox}>
 			<div className={styles.searchBox}>
-				<OutlinedInput
+				<SearchInput
+					onChange={(e) => {
+						if (e.target.value?.length > 30) return;
+						setKeyword(e.target.value);
+					}}
+					value={keyword}
+					placeholder="输入关键词搜索"
+					onKeyUp={handleEnterCode}
+					size="medium"
+					sx={{ height: 32, width: "100%" }}
+				/>
+				{/* <OutlinedInput
 					onChange={(e) => {
 						if (e.target.value?.length > 30) return;
 						setKeyword(e.target.value);
@@ -209,7 +221,7 @@ const OperatorList = observer((props: IOperatorListProps) => {
 					size="small"
 					sx={{ height: 32, width: "100%" }}
 					endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
-				/>
+				/> */}
 			</div>
 			<div className={styles.listBox}>
 				{operatorListData.filter((item) => item.type === "BATCH")?.length ? (

src/views/WorkFlowEdit/index.module.css

@@ -25,6 +25,19 @@
 	justify-content: flex-start;
 	align-items: center;
 }
+.goBackIcon {
+	margin-right: 8px;
+	cursor: pointer;
+}
+/* .goBackIcon:hover:{
+	color: ;
+} */
+.goBack {
+	cursor: pointer;
+	color: #1e2633;
+	font-size: 14px;
+	font-weight: 600;
+}
 .swContent {
 	display: flex;
 	height: calc(100vh - 56px);
@@ -53,8 +66,8 @@
 	color: RGBA(66, 141, 255, 1);
 	cursor: pointer;
 	background-color: #fff;
-	transition: width 1s;
-	-webkit-transition: width 1s;
+	transition: width 0.4s;
+	-webkit-transition: width 0.4s;
 	overflow: hidden;
 	display: flex;
 	justify-content: start;
@@ -74,5 +87,5 @@
 }
 .radiosBox {
 	background-color: #fff;
-	padding: 24px;
+	padding: 24px 24px 20px;
 }

src/views/WorkFlowEdit/index.tsx

@@ -7,8 +7,6 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import React, { useCallback, useEffect, useState, useMemo } from "react";
-import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
-import IconButton from "@mui/material/IconButton";
 import _ from "lodash";
 import { observer } from "mobx-react-lite";
 
@@ -26,6 +24,7 @@ import useMyRequest from "@/hooks/useMyRequest";
 import CustomOperator from "../CustomOperator";
 import SaveCustomTemplate from "./components/SaveCustomTemplate";
 import AddIcon from "@mui/icons-material/Add";
+import goback from "@/assets/project/goback.svg";
 
 import styles from "./index.module.css";
 
@@ -189,8 +188,18 @@ const WorkFlowEdit = observer((props: IProps) => {
 	return (
 		<div className={styles.swBox}>
 			<div className={styles.swHeader}>
-				<div className={styles.swHeaderLeft}>
-					<IconButton
+				<div
+					className={styles.swHeaderLeft}
+					onClick={(e: any) =>
+						handleShowPopper(
+							e,
+							"返回后，当前页面已填写内容将不保存，确认返回吗？"
+						)
+					}
+				>
+					<img className={styles.goBackIcon} src={goback} alt="" />
+					<span className={styles.goBack}>返回</span>
+					{/* <IconButton
 						color="primary"
 						aria-label="upload picture"
 						component="span"
@@ -209,7 +218,8 @@ const WorkFlowEdit = observer((props: IProps) => {
 								height: "12px",
 							}}
 						/>
-					</IconButton>
+						返回
+					</IconButton> */}
 				</div>
 				<div className={styles.swHeaderRight}>
 					<MyButton text="保存" onClick={() => handlePreserve()}></MyButton>