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

 .itemBox {
-  height: 50px;
-  padding: 16px 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #f0f2f5;
+	height: 50px;
+	padding: 16px 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-bottom: 1px solid #f0f2f5;
 }
 
 .fileNameBox {
-  white-space: nowrap;
-  display: inline-block;
-  vertical-align: middle;
-  color: #1e2633;
-  max-width: 260px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14px;
+	white-space: nowrap;
+	display: inline-block;
+	vertical-align: middle;
+	color: #1e2633;
+	max-width: 260px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 14px;
 }
+
+.contentBox {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
 .speedBox {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 }
 
 .rightBox {
-  cursor: pointer;
-  font-size: 12px;
-  color: #1370ff;
+	cursor: pointer;
+	font-size: 12px;
+	color: #1370ff;
 }
 .leftBox {
-  display: flex;
+	display: flex;
 }
 
 .span {
-  color: #8a9099;
-  font-size: 12px;
+	color: #8a9099;
+	font-size: 12px;
 }

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
  */
@@ -17,64 +17,80 @@ import classnames from "classnames";
 import { toJS } from "mobx";
 
 const MenuLayout = observer(() => {
-  const { permissionStore, currentProjectStore } = useStores();
-  let pathname = new URL(window.location.href).pathname;
+	const { permissionStore, currentProjectStore } = useStores();
+	let pathname = new URL(window.location.href).pathname;
 
-  const navigate = useNavigate();
+	const navigate = useNavigate();
 
-  const productInfo = toJS(currentProjectStore.currentProductInfo);
+	const productInfo = toJS(currentProjectStore.currentProductInfo);
 
-  // 未选择产品时 直接跳转home页面
-  if (!productInfo.name) {
-    navigate("/home");
-  }
+	// 未选择产品时 直接跳转home页面
+	if (!productInfo.name) {
+		navigate("/home");
+	}
 
-  const routerIcon = (id: string, isSelect: boolean) => {
-    try {
-      const result = require(`../../assets/project/${id}${isSelect ? '_BLUE' : ''}.svg`)
-      return result || ''
-    } catch (error) {
-      console.log(error)
-    }
-  }
+	const routerIcon = (id: string, isSelect: boolean) => {
+		try {
+			const result = require(`../../assets/project/${id}${
+				isSelect ? "_BLUE" : ""
+			}.svg`);
+			return result || "";
+		} catch (error) {
+			console.log(error);
+		}
+	};
 
-  return (
-    <Box className={style.container}>
-      <Box className={style.aside}>
-        {
-          pathname.indexOf('userCenter') < 0 && <CurrentProject />
-        }
-        <List
-          sx={{
-            paddingTop: 0,
-            paddingBottom: 0,
-          }}
-        >
-          {permissionStore.sidebarRouters.map((item, index) => {
-            if (item.show) {
-              return (
-                <li
-                  key={"sidebar" + index}
-                  className={classnames({
-                    [style.listItem]: true,
-                    [style.active]: `/v3${item.path}` === pathname,
-                  })}
-                  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>
-                </li>
-              );
-            }
-            return null;
-          })}
-        </List>
-      </Box>
-      <Box className={style.content}>
-        <Outlet></Outlet>
-      </Box>
-    </Box>
-  );
+	return (
+		<Box className={style.container}>
+			<Box className={style.aside}>
+				{pathname.indexOf("userCenter") < 0 && <CurrentProject />}
+				<List
+					sx={{
+						paddingTop: 0,
+						paddingBottom: 0,
+					}}
+				>
+					{permissionStore.sidebarRouters.map((item, index) => {
+						if (item.show) {
+							return (
+								<li
+									key={"sidebar" + index}
+									className={classnames({
+										[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>
+								</li>
+							);
+						}
+						return null;
+					})}
+				</List>
+			</Box>
+			<Box className={style.content}>
+				<Outlet></Outlet>
+			</Box>
+		</Box>
+	);
 });
 
 export default MenuLayout;

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;
-  font-weight: 600;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+	border-radius: 4px 4px 0 0;
+	background-color: rgba(25, 118, 210, 0.08);
+	line-height: 44px;
+	color: rgba(30, 38, 51, 1);
+	font-size: 14px;
+	font-weight: 600;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
 }
 .rootTitleActive {
-  background-color: rgba(25, 118, 210, 0.2);
+	background-color: rgba(25, 118, 210, 0.2);
 }
 .bigFolderIcon {
-  margin: 0 9px;
+	margin: 0 9px;
 }
 .treeLabel {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
 }
-.treeLabelText{
-  line-height: 44px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -o-text-overflow:ellipsis;
-  white-space: nowrap;
-  width: 320px;
+.treeLabelText {
+	line-height: 44px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-o-text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 320px;
 }
 .labelFolderIcon {
-  margin-right: 9px;
+	margin-right: 9px;
 }

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",
-								}}
-							/>
-						</IconButton>
+							className={styles.goBackIcon}
+							src={goback}
+							alt=""
+						/>
 
 						<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/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;
@@ -125,4 +134,4 @@
 	justify-content: center;
 	align-items: center;
 	height: calc(100vh - 100px);
-}
+}
\ No newline at end of file

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,14 +496,14 @@ const ProjectMembers = observer(() => {
 							);
 						})}
 				</MyCircularProgress>
-				<div className={styles.pagination}>
-					<MyPagination
-						page={page}
-						pageChange={handleChangePage}
-						count={count || jobList.length}
-					/>
-				</div>
 			</Box>
+			<div className={styles.pagination}>
+				<MyPagination
+					page={page}
+					pageChange={handleChangePage}
+					count={count || jobList.length}
+				/>
+			</div>
 
 			{/* <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

@@ -11,7 +11,7 @@ import ReactFlow, {
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { uuid } from "@/utils/util";
-import {  IParameter, ITask } from "../../ProjectSubmitWork/interface";
+import { IParameter, ITask } from "../../ProjectSubmitWork/interface";
 import { ILine } from "./interface";
 import BatchNode from "./components/BatchNode";
 import FlowNode from "./components/FlowNode";
@@ -61,7 +61,7 @@ const Flow = (props: IProps) => {
 		showControls = true,
 		...other
 	} = props;
-	
+
 	/** 自定义的节点类型 */
 	const nodeTypes = useMemo(() => {
 		return { batchNode: BatchNode, flowNode: FlowNode };
@@ -311,22 +311,25 @@ const Flow = (props: IProps) => {
 									/** tasks 数据 */
 									tasks: tasks,
 							  }
-							: { 	selectedStatus: externalSelectedNodeId
-								? externalSelectedNodeId.includes(item.id)
-								: inSideFlowNodeId === item.id,}),
+							: {
+									selectedStatus: externalSelectedNodeId
+										? externalSelectedNodeId.includes(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})` : "",
@@ -641,7 +644,7 @@ const Flow = (props: IProps) => {
 
 	// const onNodesChange = (val: any)=>{
 	// 	// 自定义change事件  不允许react flow组件本身删除事件
-	// 	// return 
+	// 	// return
 	// }
 
 	// const onEdgesChange = (val: any) =>{

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>