Merge branch 'feat-20220801' into 'master'

Feat 20220801

See merge request !99

src/api/api_manager.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 09:56:57
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-15 17:10:49
+ * @LastEditTime: 2022-09-01 15:30:28
  * @FilePath: /bkunyun/src/api/api_manager.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -45,6 +45,9 @@ const RESTAPI = {
   API_TASK_OVERVIEW_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflowJobInformation`,  // 查询任务概览
   API_OPERATOR_LISTSTREAMACTORS:`${BACKEND_API_URI_PREFIX}/cpp/workflow/liststreamactors`,  // 获取流算子列表，可用于模糊查询，返回所有版本流算子
   API_SAVE_BATCHACTOR:`${BACKEND_API_URI_PREFIX}/cpp/workflow/savebatchactor`,  // 保存批算子
+  API_PROJECT_USERS_LIST:`${BACKEND_API_URI_PREFIX}/cpp/project/listusers`,  // 获取项目成员
+  API_ADD_PROJECT_USER:`${BACKEND_API_URI_PREFIX}/cpp/project/updatemember`,  // 添加项目成员
+  API_GET_PROJECT_POWER:`${BACKEND_API_URI_PREFIX}/cpp/project/listroles`,  // 获取项目权限
 };
 
 export default RESTAPI;

src/api/project_api.ts

@@ -318,6 +318,34 @@ const saveBatchActor = (params: saveBatchParams) => {
   });
 };
 
+// 获取项目成员
+const fetchProjectUsersList = (params: {id: string}) => {
+  return request({
+    url: Api.API_PROJECT_USERS_LIST,
+    method: "get",
+    params,
+  });
+};
+
+
+// 修改项目成员信息
+const addProjectUser = (id: string, params: any) => {
+  return request({
+    url: `${Api.API_ADD_PROJECT_USER}?id=${id}`,
+    method: "put",
+    data: params,
+  });
+};
+
+// 获取项目权限
+const fetchProjectPower = (params: {id: string}) => {
+  return request({
+    url: Api.API_GET_PROJECT_POWER,
+    method: "get",
+    params,
+  });
+};
+
 export {
   current,
   menu,
@@ -342,5 +370,8 @@ export {
   getTaskOverview,
   getOperatorList,
   saveBatchActor,
-  fetchFlowOutputNumber
+  fetchFlowOutputNumber,
+  fetchProjectUsersList,
+  addProjectUser,
+  fetchProjectPower
 };

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/assets/project/selectActive.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 4</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="切换产品" transform="translate(-337.000000, -190.000000)">
+            <g id="编组-37" transform="translate(223.000000, 172.000000)">
+                <g id="编组-34" transform="translate(0.000000, 8.000000)">
+                    <g id="编组-4" transform="translate(114.000000, 10.000000)">
+                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                        <polyline id="路径-26" stroke="#1370FF" stroke-width="1.5" stroke-linejoin="round" points="4 8.33740166 7.27434245 11 12 5"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/successIcon.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>check-circle-outline备份</title>
+    <g id="云平台视觉规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="check-circle-outline备份" fill="#0DD09B" fill-rule="nonzero">
+            <path d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 M8,14.4 C4.472,14.4 1.6,11.528 1.6,8 C1.6,4.472 4.472,1.6 8,1.6 C11.528,1.6 14.4,4.472 14.4,8 C14.4,11.528 11.528,14.4 8,14.4 M11.672,4.464 L6.4,9.736 L4.328,7.672 L3.2,8.8 L6.4,12 L12.8,5.6 L11.672,4.464 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/triangle.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 12备份</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-12备份">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <polygon id="路径-53备份-2" fill="#8A9099" points="4.5 6 11.5 6 8 11"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/style/public.css

 /* 修改滚动条样式 */
 div::-webkit-scrollbar,
 main::-webkit-scrollbar {
-  width: 4px;
+	width: 6px;
 	height: 5px !important;
 }
 
 div::-webkit-scrollbar-track,
 main::-webkit-scrollbar-track {
-  background-color: #fff;
-  -webkit-border-radius: 2em;
-  -moz-border-radius: 2em;
-  border-radius: 2em;
+	background-color: transparent;
+	-webkit-border-radius: 3em;
+	-moz-border-radius: 3em;
+	border-radius: 3em;
 }
 
 div::-webkit-scrollbar-thumb,
 main::-webkit-scrollbar-thumb {
-  background-color: #C2C6CC;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
+	background-color: rgba(138, 144, 153, 0.55);
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
 	height: 5px !important;
-  width: 4px!important;
+	width: 6px !important;
+}
+
+div::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(138, 144, 153, 0.8);
+}
+main::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(138, 144, 153, 0.8);
 }
 
 body,

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/CommonComponents/FullScreenDrawer/index.module.css

@@ -38,7 +38,7 @@
 	background-color: #fff;
 	border-radius: 16px 0 0 0;
 	box-sizing: border-box;
-	overflow: scroll;
+	overflow: overlay;
 	animation: showDrawer 0.31s ease;
 	-webkit-animation: showDrawer 0.31s ease;
 	margin: 0 auto;

src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css

 .RadiosBox {
+	position: relative;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -20,7 +21,6 @@
 	border-radius: 2px;
 	line-height: 20px;
 	padding: 6px 16px;
-	/* background-color: #e6e8eb; */
 	flex: 1;
 	display: flex;
 	align-items: center;
@@ -30,8 +30,7 @@
 
 .radioActive {
 	color: #1370ff;
-	background-color: #fff;
-	box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
+	position: relative;
 }
 .border {
 	width: 1px;
@@ -41,3 +40,19 @@
 .borderHidden {
 	visibility: hidden;
 }
+.radioActiveBgBox {
+	width: calc(100% - 2px);
+	position: absolute;
+	left: 1px;
+	top: 1px;
+	height: 28px;
+}
+.radioActiveBg {
+	box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
+	height: 100%;
+	background-color: #fff;
+	transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+	border-radius: 2px;
+	width: 50%;
+	transform: translateX(0px);
+}

src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx

@@ -22,11 +22,26 @@ type IRadioGroupOfButtonStyleProps = {
 	handleRadio: any;
 	RadiosBoxStyle?: object;
 	radioStyle?: object;
+	radioActiveBgBoxStyle?: object;
 };
 
 const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
-	const { radioOptions, value, handleRadio, RadiosBoxStyle, radioStyle } =
-		props;
+	const {
+		radioOptions,
+		value,
+		handleRadio,
+		RadiosBoxStyle,
+		radioStyle,
+		radioActiveBgBoxStyle,
+	} = props;
+
+	const radioWidth = useMemo(() => {
+		if (radioOptions.length) {
+			return Number((100 / radioOptions.length).toFixed(2));
+		} else {
+			return 100;
+		}
+	}, [radioOptions]);
 
 	const activeIndex: any = useMemo(() => {
 		let res = 0;
@@ -40,6 +55,16 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
 
 	return (
 		<div className={style.RadiosBox} style={RadiosBoxStyle}>
+			<div className={style.radioActiveBgBox} style={radioActiveBgBoxStyle}>
+				<div
+					className={style.radioActiveBg}
+					style={{
+						width: `${radioWidth}%`,
+						transform: `translateX(${activeIndex * 100}%)`,
+					}}
+				></div>
+			</div>
+
 			{radioOptions.map((options, index) => {
 				return (
 					<>

src/components/Material.Ui/SearchSelectCheckBox.jsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles({
     contentWrap: {
         padding: "8px 0", height: 0, transition: "all 1s", position: "absolute", zIndex: 9, width: "100%",
         backgroundColor: "#FFFFFF", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.16)", borderRadius: "4px",
-        overflowY: "scroll",
+        overflowY: "overlay",
         maxHeight: "398px"
     },
     contentWrapOpenPosition:{top:"-400px"},

src/components/Material.Ui/Select.jsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles({
     contentWrap: {
         padding: "8px 0", height: 0, transition: "all 1s", position: "absolute", zIndex: 9, width: "100%",
         backgroundColor: "#FFFFFF", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.16)", borderRadius: "4px",
-        overflowY: "auto",
+        overflowY: "overlay",
         maxHeight: "400px"
     },
     contentWrapOpen: { height: "auto" },

src/components/Material.Ui/SelectCheckBox.jsx

@@ -42,7 +42,7 @@ const useStyles = makeStyles({
     contentWrap: {
         padding: "8px 0", transition: "all 1s", position: "fixed", zIndex: 9, width: "552px",
         backgroundColor: "#FFFFFF", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.16)", borderRadius: "4px",
-        overflowY: "scroll",
+        overflowY: "overlay",
         maxHeight: "398px",
         // position: "fixed",
         // width: "552px"

src/components/MySnackbar/MySnackbarProvider.tsx

-import React, { Fragment, ReactNode, useMemo } from "react";
+import React, { Fragment, ReactNode } from "react";
 import { Snackbar, Alert, Fade, Grow } from "@mui/material";
 import useMySnackbar from "./useMySnackbar";
 import snackbarContext from "./snackbarContext";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
+import successIconSrc from "../../assets/project/successIcon.svg";
 
 type MySnackbarProviderProp = {
 	vertical?: "bottom" | "top";
@@ -22,7 +23,6 @@ type MySnackbarProviderProp = {
 	variant?: "filled" | "outlined" | "standard";
 	errorIcon?: ReactNode;
 	infoIcon?: ReactNode;
-	successIcon?: ReactNode;
 	warningIcon?: ReactNode;
 	elevation?: number;
 	alertSx?: object;
@@ -58,7 +58,6 @@ const MySnackbarProvider = ({
 	variant = "standard",
 	errorIcon,
 	infoIcon,
-	successIcon,
 	warningIcon,
 	elevation = 3,
 	alertSx,
@@ -86,7 +85,7 @@ const MySnackbarProvider = ({
 						minHeight: "38px",
 						boxShadow: "none",
 						"& .MuiAlert-action": {
-							paddingLeft: "60px",
+							paddingLeft: "32px",
 						},
 						"&.MuiAlert-standardError": {
 							color: "#FF4E4E",
@@ -122,6 +121,14 @@ const MySnackbarProvider = ({
 		},
 	});
 
+	const successIcon = (
+		<img
+			src={successIconSrc}
+			style={{ width: "16px", height: "16px", margin: "3px 0" }}
+			alt=""
+		/>
+	);
+
 	return (
 		<Fragment>
 			<ThemeProvider theme={theme}>

src/components/mui/MyBorderlessSelect.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2021-12-04 15:46:25
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-21 18:00:58
+ * @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+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;
+	value: string;
+	disabled?: boolean;
+}
+
+export const optionsTransform = (
+	arr: Array<any>,
+	labelKey: string = "label",
+	valueKey: string = "value",
+	disabledKey: string = "disabled"
+): Array<IOption> => {
+	return arr.map((item: any) => {
+		return {
+			label: item[labelKey],
+			value: item[valueKey],
+			disabled: item[disabledKey],
+		};
+	});
+};
+
+interface IProps
+	extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
+	value?: string;
+	options: IOption[];
+	onChange?: (val: string) => void;
+	/** 类型变种 */
+	variant?: "standard" | "outlined" | "filled";
+	/** title */
+	title?: string;
+	/** 是否显示title */
+	isTitle?: boolean;
+	/** 是否显示提示文案 */
+	error?: boolean;
+	/** 提示文案 */
+	helpertext?: string;
+}
+export default function MyBorderlessSelect(props: IProps) {
+	const {
+		value,
+		options,
+		title,
+		isTitle = false,
+		variant = "outlined",
+		multiple = false,
+		onChange,
+		fullWidth,
+		error = false,
+		helpertext,
+		...other
+	} = props;
+
+	const theme = createTheme({
+		components: {
+			MuiInputBase: {
+				styleOverrides: {
+					root: {
+						height: "36px",
+						"& .Mui-disabled": {
+							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderWidth: '0px'
+							},
+						},
+					},
+					input: {
+						fontSize: "14px",
+						"&.Mui-focused":{
+							color:"#1370FF",
+						},
+						"&.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",
+							},
+						},
+					},
+				},
+			},
+
+			MuiMenuItem: {
+				styleOverrides: {
+					root: {
+						paddingRight: "46px",
+						fontSize: "14px",
+						lineHeight: "24px",
+						":hover": {
+							backgroundColor: "#F0F2F5 ",
+							color: "#1E2633",
+						},
+					},
+				},
+			},
+
+			MuiOutlinedInput: {
+				styleOverrides: {
+					root: {
+						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+							borderWidth: "0px",
+							color: '#1370FF'
+						},
+						"& .MuiOutlinedInput-notchedOutline": {
+							borderColor: "#DDE1E6",
+							borderWidth: "0px",
+						},
+						"&.Mui-disabled": {
+							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#DDE1E6",
+							},
+						},
+						":hover": {
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#1370ff",
+							},
+							"&.Mui-disabled": {
+								background: "rgba(247, 248, 250, 1)",
+								cursor: "not-allowed",
+								"& .MuiOutlinedInput-notchedOutline": {
+									borderColor: "#DDE1E6",
+								},
+							},
+						},
+					},
+				},
+			},
+
+			MuiInputLabel: {
+				styleOverrides: {
+					root: {
+						fontSize: "14px",
+						// 下拉框未选择时的label定位
+						top: "-9px",
+					},
+					shrink: {
+						// 下拉框已经选择时的label定位
+						top: 0,
+					},
+				},
+			},
+
+			MuiSelect: {
+				styleOverrides: {
+					select: {
+						padding: "6.5px 14px",
+						fontSize: "14px",
+					},
+				},
+			},
+
+			MuiPaper: {
+				styleOverrides: {
+					root: {
+						boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
+					},
+				},
+			},
+		},
+	});
+
+	const handleChange = (e: SelectChangeEvent<unknown>) => {
+		onChange && onChange(e.target.value as string);
+	};
+
+	return (
+		<ThemeProvider theme={theme}>
+			<FormControl fullWidth={fullWidth} variant={variant} error={error}>
+				{isTitle ? (
+					<InputLabel id="demo-simple-select-label">
+						{title || "请选择"}
+					</InputLabel>
+				) : null}
+				<Select
+					labelId="demo-simple-select-label"
+					id="demo-simple-select"
+					label={title || ""}
+					size="small"
+					multiple={multiple}
+					{...other}
+					value={value || ""}
+					onChange={handleChange}
+				>
+					{options.length
+						? options?.map((item: IOption, index) => {
+							return (
+								<MenuItem
+									value={item.value}
+									disabled={item?.disabled}
+									key={index}
+								>
+									{item.label}
+									{value === item.value && (
+										<img
+											style={{
+												width: "16px",
+												height: "16px",
+												position: "absolute",
+												top: "10px",
+												right: "12px",
+											}}
+											src={selectActive}
+											alt=""
+										/>
+									)}
+								</MenuItem>
+							);
+						})
+						: null}
+				</Select>
+				{helpertext && error && <FormHelperText>{helpertext}</FormHelperText>}
+			</FormControl>
+		</ThemeProvider>
+	);
+}

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,11 +54,17 @@ const theme = createTheme({
 					"&.MuiButton-outlinedError": {
 						color: "rgba(255, 78, 78, 1)",
 						border: "1px solid rgba(255, 78, 78, 1)",
-						"&:hover": { backgroundColor: 'transparent' },
+						"&:hover": { backgroundColor: "#FFEDED" },
 					},
 					"& .MuiLoadingButton-loadingIndicator": {
 						color: "#fff",
 					},
+					"&.MuiButton-containedError": {
+						backgroundColor: "#FF4E4E",
+						"&:hover": {
+							backgroundColor: "rgba(217, 54, 54, 1)",
+						},
+					},
 				},
 				contained: {
 					backgroundColor: "#1370FF",
@@ -101,6 +107,9 @@ const theme = createTheme({
 						border: "1px solid rgba(221, 225, 230, 1)",
 					},
 				},
+				// outlinedError: {
+				// 	"&:hover": { backgroundColor: "#FFEDED " },
+				// },
 				textSecondary: {
 					backgroundColor: "transparent",
 					color: "#FF4E4E",
@@ -110,16 +119,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/MyCheckBox.tsx

@@ -12,6 +12,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 import _ from "lodash";
 
 interface IMyCheckBoxProps extends FormGroupProps {
@@ -44,6 +45,34 @@ export const optionsTransform = (
 	});
 };
 
+const theme = createTheme({
+	components: {
+		MuiFormControlLabel: {
+			styleOverrides: {
+				label: {
+					fontSize: "14px",
+				},
+			},
+		},
+		MuiSvgIcon: {
+			styleOverrides: {
+				root: {
+					fontSize: "19px",
+				},
+			},
+		},
+		MuiCheckbox: {
+			styleOverrides: {
+				root: {
+					"&.Mui-checked .MuiSvgIcon-root": {
+						color: "rgba(19, 110, 250, 1)",
+					},
+				},
+			},
+		},
+	},
+});
+
 export default function MyCheckBox(props: IMyCheckBoxProps) {
 	const {
 		value,
@@ -76,6 +105,7 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
 	};
 
 	return (
+		<ThemeProvider theme={theme}>
 			<FormControl fullWidth variant={variant} error={error}>
 				<FormGroup {...props} row>
 					{options.map((option) => {
@@ -98,5 +128,6 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
 				</FormGroup>
 				{helperText && error && <FormHelperText>{helperText}</FormHelperText>}
 			</FormControl>
+		</ThemeProvider>
 	);
 }

src/components/mui/MyDialog.tsx

-import React from "react";
+import React, { useMemo } from "react";
 
 import {
 	Dialog,
@@ -42,7 +42,14 @@ export interface IDialogProps {
 	/** 点击遮罩是否关闭  默认为false*/
 	clickMaskClose?: boolean;
 	/** 确认按钮样式*/
-	okSx?: any;
+	okColor?:
+		| "inherit"
+		| "primary"
+		| "secondary"
+		| "success"
+		| "error"
+		| "info"
+		| "warning"; //按钮颜色风格
 	loading?: boolean; // 确认按钮是否处于loading状态
 }
 
@@ -66,7 +73,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 		disabledConfirm,
 		clickMaskClose = false,
 		loading = false,
-		okSx = {},
+		okColor = "primary",
 	} = props;
 
 	const handelClose = (
@@ -79,7 +86,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 		onClose && onClose();
 	};
 
-	const Footer = () => {
+	const Footer = useMemo(() => {
 		if (isHideFooter) return null;
 		return footerRender ? (
 			footerRender()
@@ -90,7 +97,6 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 						text={cancelText || "取消"}
 						onClick={onClose}
 						variant="outlined"
-						// size="small"
 						color="secondary"
 					/>
 				) : null}
@@ -99,16 +105,28 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 						text={okText || "确定"}
 						onClick={onConfirm}
 						variant="contained"
-						// size="small"
+						color={okColor}
 						disabled={disabledConfirm}
 						isLoadingButton={true}
 						loading={loading}
-						style={{ marginLeft: '12px', ...okSx }}
+						style={{ marginLeft: "12px" }}
 					/>
 				) : null}
 			</DialogActions>
 		);
-	};
+	}, [
+		disabledConfirm,
+		okColor,
+		okText,
+		onConfirm,
+		onClose,
+		cancelText,
+		showCancel,
+		footerRender,
+		isHideFooter,
+		loading,
+		showConfirm,
+	]);
 	return (
 		<Dialog
 			open={open}
@@ -122,16 +140,13 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 					"& .MuiPaper-root": {
 						// 设置最大宽度， 实际宽度让子元素撑大
 						maxWidth: "1920px",
-						borderRadius: "8px"
+						borderRadius: "8px",
 					},
 				},
 			}}
 		>
 			{isHideHeader ? null : (
-				<DialogTitle
-					id="alert-dialog-title"
-					sx={{ padding: "20px 24px" }}
-				>
+				<DialogTitle id="alert-dialog-title" sx={{ padding: "20px 24px" }}>
 					<div
 						style={{
 							display: "flex",
@@ -140,16 +155,25 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 							fontWeight: 600,
 						}}
 					>
-						<span style={{ fontSize: 16, lineHeight: '24px', color: '#1E2633' }}>{title}</span>
+						<span
+							style={{ fontSize: 16, lineHeight: "24px", color: "#1E2633" }}
+						>
+							{title}
+						</span>
 						<CloseIcon
 							onClick={onClose}
-							sx={{ color: "#C2C6CC", cursor: "pointer", ":hover": { background: "#f0f2f5", borderRadius: '2px' } }}
+							sx={{
+								fontSize: "18px",
+								color: "#C2C6CC",
+								cursor: "pointer",
+								":hover": { background: "#f0f2f5", borderRadius: "2px" },
+							}}
 						/>
 					</div>
 				</DialogTitle>
 			)}
 			<DialogContent style={{ minWidth: 388 }}>{children}</DialogContent>
-			{Footer()}
+			{Footer}
 		</Dialog>
 	);
 };

src/components/mui/MyInput.tsx

@@ -36,11 +36,16 @@ const MyInput = (props: MyInputProps) => {
 						height: "36px",
 						fontSize: "14px",
 						border: "rgba(221, 225, 230, 1)",
+						padding: "7px 12px",
 						"&.MuiInputBase-sizeSmall": {
 							height: "32px",
 						},
-						"& .Mui-disabled": {
+						"&.Mui-disabled": {
 							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#DDE1E6",
+							},
 						},
 					},
 					multiline: {
@@ -49,13 +54,19 @@ const MyInput = (props: MyInputProps) => {
 							padding: 0,
 						},
 					},
-					input: {},
+					input: {
+						"&.Mui-disabled": {
+							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+						},
+					},
 				},
 			},
 			MuiInputLabel: {
 				styleOverrides: {
 					root: {
 						top: "-9px",
+						fontSize: "14px",
 					},
 					shrink: {
 						top: 0,
@@ -68,26 +79,48 @@ const MyInput = (props: MyInputProps) => {
 			MuiOutlinedInput: {
 				styleOverrides: {
 					root: {
+						padding: "7px 12px",
 						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
 							borderWidth: "1px",
 						},
 						"& .MuiOutlinedInput-notchedOutline": {
 							borderColor: "#DDE1E6",
 						},
+						"&.Mui-disabled": {
+							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#DDE1E6",
+							},
+						},
 						":hover": {
 							"& .MuiOutlinedInput-notchedOutline": error
 								? {}
 								: {
 										borderColor: "#1370ff",
 								  },
+							"&.Mui-disabled": {
+								background: "rgba(247, 248, 250, 1)",
+								cursor: "not-allowed",
+								"& .MuiOutlinedInput-notchedOutline": {
+									borderColor: "#DDE1E6",
+								},
+							},
 						},
 					},
 					input: {
-						padding: "6.5px 12px",
+						padding: "0",
 						verticalAlign: "middle",
 					},
 				},
 			},
+			MuiTypography: {
+				styleOverrides: {
+					root: {
+						marginRight: "-5px",
+					},
+				},
+			},
 		},
 	});
 

src/components/mui/MyMenu.tsx

@@ -23,7 +23,7 @@ const theme = createTheme({
 		MuiMenu: {
 			styleOverrides: {
 				root: {
-					overflowY: "scroll",
+					overflow: "overlay",
 				},
 			},
 		},

src/components/mui/MyMultipleMenu.tsx

@@ -14,7 +14,7 @@ const theme = createTheme({
 		MuiMenu: {
 			styleOverrides: {
 				root: {
-					overflowY: "scroll",
+					overflow: "overlay",
 				},
 			},
 		},

src/components/mui/MyPopconfirm.tsx

@@ -68,11 +68,19 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
 			placement={placement}
 			sx={{
 				zIndex: 2000,
+				bgcolor: "transparent",
+				minWidth: "200px",
+				fontSize: "14px",
+				padding: "8px 0px",
+			}}
+		>
+			<Box
+				sx={{
 					bgcolor: "#fff",
 					minWidth: "200px",
 					borderRadius: "4px",
 					fontSize: "14px",
-				padding: "20px 16px",
+					padding: "16px 20px",
 					boxShadow: "0px 3px 10px 0px rgba(0, 24, 57, 0.14)",
 				}}
 			>
@@ -106,6 +114,7 @@ const MyPopconfirm = (props: IMyPopconfirmProps) => {
 						isLoadingButton={true}
 					/>
 				</Box>
+			</Box>
 		</Popper>
 	);
 };

src/components/mui/MyPopover.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-11 09:33:46
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-16 14:21:00
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-01 19:34:26
  * @FilePath: /bkunyun/src/components/mui/MyPopover.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import * as React from "react";
+import { useRef, useEffect, useState } from "react";
 import Popover, { PopoverProps } from "@mui/material/Popover";
 import Typography from "@mui/material/Typography";
 
@@ -17,10 +17,15 @@ interface IProps extends Omit<PopoverProps, "open"> {
 	children: React.ReactNode;
 	/** 显示内容 */
 	content: React.ReactNode;
+	/** 是否打开 */
+	open?: boolean;
+	/** open 修改 */
+	changeOpen: (val: boolean) => void;
 }
 
 const MyPopover = (props: IProps) => {
-	const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
+	const [anchorEl, setAnchorEl] = useState<any | null>(null);
+	const ref = useRef(null);
 
 	const {
 		trigger = "click",
@@ -28,26 +33,37 @@ const MyPopover = (props: IProps) => {
 		content,
 		anchorOrigin,
 		transformOrigin,
+		open = false,
+		changeOpen,
 	} = props;
 
 	const handlePopoverOpen = (event: any) => {
+		changeOpen(true);
 		setAnchorEl(event.currentTarget);
 	};
 
 	const handelClick = (event: any) => {
+		changeOpen(true);
 		setAnchorEl(event?.currentTarget);
 	};
 
 	const handlePopoverClose = () => {
+		changeOpen(false);
 		setAnchorEl(null);
 	};
 
-	const open = Boolean(anchorEl);
+	useEffect(() => {
+		if (open) {
+			setAnchorEl(ref.current);
+		}
+	}, [open]);
+
 	const id = open ? "simple-popover" : undefined;
 
 	return (
 		<div>
 			<Typography
+				ref={ref}
 				aria-owns={id}
 				onClick={trigger === "click" ? handelClick : undefined}
 				onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}

src/components/mui/MyRadio.tsx

@@ -12,6 +12,7 @@ import RadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 
 interface IMyRadioProps extends RadioGroupProps {
 	value: any;
@@ -44,6 +45,34 @@ export const optionsTransform = (
 	});
 };
 
+const theme = createTheme({
+	components: {
+		MuiFormControlLabel: {
+			styleOverrides: {
+				label: {
+					fontSize: "14px",
+				},
+			},
+		},
+		MuiSvgIcon: {
+			styleOverrides: {
+				root: {
+					fontSize: "19px",
+				},
+			},
+		},
+		MuiRadio: {
+			styleOverrides: {
+				root: {
+					"&.Mui-checked span": {
+						color: "rgba(19, 110, 250, 1)",
+					},
+				},
+			},
+		},
+	},
+});
+
 export default function MyRadio(props: IMyRadioProps) {
 	const {
 		value,
@@ -55,6 +84,7 @@ export default function MyRadio(props: IMyRadioProps) {
 	} = props;
 
 	return (
+		<ThemeProvider theme={theme}>
 			<FormControl fullWidth variant={variant} error={error}>
 				<RadioGroup
 					{...props}
@@ -78,5 +108,6 @@ export default function MyRadio(props: IMyRadioProps) {
 				</RadioGroup>
 				{helperText && error && <FormHelperText>{helperText}</FormHelperText>}
 			</FormControl>
+		</ThemeProvider>
 	);
 }

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;
@@ -73,22 +74,46 @@ export default function MySelect(props: IProps) {
 						height: "36px",
 						"& .Mui-disabled": {
 							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#DDE1E6",
+							},
+						},
 					},
-						"& .MuiSelect-icon": {
+					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",
+							},
+						},
+					},
+				},
 			},
 
 			MuiMenuItem: {
 				styleOverrides: {
 					root: {
+						paddingRight: "46px",
+						fontSize: "14px",
+						lineHeight: "24px",
 						":hover": {
-							backgroundColor: "#ECF4FF ",
-							color: "#1370FF",
+							backgroundColor: "#F0F2F5 ",
+							color: "#1E2633",
 						},
 					},
 				},
@@ -97,10 +122,30 @@ export default function MySelect(props: IProps) {
 			MuiOutlinedInput: {
 				styleOverrides: {
 					root: {
+						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+							borderWidth: "1px",
+						},
+						"& .MuiOutlinedInput-notchedOutline": {
+							borderColor: "#DDE1E6",
+						},
+						"&.Mui-disabled": {
+							background: "rgba(247, 248, 250, 1)",
+							cursor: "not-allowed",
+							"& .MuiOutlinedInput-notchedOutline": {
+								borderColor: "#DDE1E6",
+							},
+						},
 						":hover": {
 							"& .MuiOutlinedInput-notchedOutline": {
 								borderColor: "#1370ff",
 							},
+							"&.Mui-disabled": {
+								background: "rgba(247, 248, 250, 1)",
+								cursor: "not-allowed",
+								"& .MuiOutlinedInput-notchedOutline": {
+									borderColor: "#DDE1E6",
+								},
+							},
 						},
 					},
 				},
@@ -109,6 +154,7 @@ export default function MySelect(props: IProps) {
 			MuiInputLabel: {
 				styleOverrides: {
 					root: {
+						fontSize: "14px",
 						// 下拉框未选择时的label定位
 						top: "-9px",
 					},
@@ -127,6 +173,22 @@ export default function MySelect(props: IProps) {
 					},
 				},
 			},
+
+			MuiPaper: {
+				styleOverrides: {
+					root: {
+						boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
+					},
+				},
+			},
+
+			// MuiFormControl: {
+			// 	styleOverrides: {
+			// 		root: {
+			// 			width: fullWidth ? "100%" : "auto",
+			// 		},
+			// 	},
+			// },
 		},
 	});
 
@@ -161,6 +223,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/components/mui/MySwitch.tsx

@@ -6,7 +6,7 @@
  * @FilePath: /bkunyun/src/components/mui/MySwitch.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import * as React from "react";
+import React, { useMemo } from "react";
 import Switch, { SwitchProps } from "@mui/material/Switch";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 
@@ -17,7 +17,18 @@ interface IMySwitchProps extends SwitchProps {
 	disabled?: boolean;
 }
 
-const theme = createTheme({
+const MySwitch = (props: IMySwitchProps) => {
+	const {
+		value,
+		defaultChecked,
+		onChange,
+		disabled = false,
+		size,
+		...other
+	} = props;
+
+	const theme = useMemo(() => {
+		return createTheme({
 			components: {
 				MuiSwitch: {
 					styleOverrides: {
@@ -32,7 +43,9 @@ const theme = createTheme({
 							"&.Mui-checked": {
 								left: "2px",
 								"& + .MuiSwitch-track": {
-							backgroundColor: "#1370ff",
+									backgroundColor: disabled
+										? "rgba(166, 211, 255, 1)"
+										: "rgba(19, 112, 255, 1)",
 									opacity: 1,
 								},
 							},
@@ -44,16 +57,17 @@ const theme = createTheme({
 						},
 						track: {
 							borderRadius: "11px",
-					backgroundColor: "#E6E8EB",
+							backgroundColor: disabled
+								? "RGBA(240, 242, 245, 1)"
+								: "RGBA(221, 225, 230, 1)",
 							opacity: 1,
 						},
 					},
 				},
 			},
-});
+		});
+	}, [disabled]);
 
-const MySwitch = (props: IMySwitchProps) => {
-	const { value, defaultChecked, onChange, disabled = false, size, ...other } = props;
 	return (
 		<ThemeProvider theme={theme}>
 			<Switch

src/components/mui/MyTable/components/EnhancedTableHead.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-01 16:53:15
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-25 12:04:49
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-06 16:30:56
  * @FilePath: /bkunyun/src/components/Material.Ui/Table/EnhancedTableHead.jsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -54,7 +54,7 @@ const EnhancedTableHead = (props: any) => {
                         classes={{ head: (k && headTableCell) || classes.headTableCell }}
                     >
                         {
-                            headCell.sort && <TableSortLabel active={orderBy === headCell.id} direction={order} onClick={createSortHandler(headCell.id)} >
+                            headCell.sort && <TableSortLabel style={{fontSize: "16px", fontWeight: '400', color: 'rgba(0, 0, 0, 0.87)', fontFamily: 'Roboto,Helvetica,Tahoma,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}} active={orderBy === headCell.id} direction={order} onClick={createSortHandler(headCell.id)} >
                                 {headCell.label}
                             </TableSortLabel>
                         }

src/components/mui/MyTable/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-07-26 10:23:43
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-07-26 11:53:00
+ * @LastEditTime: 2022-09-01 16:00:34
  * @FilePath: /bkunyun/src/components/mui/MyTable/interface.ts
  * @Description: 这是默认设置,请设置`customMade`,打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -32,7 +32,7 @@ export interface ITableProps {
   /** 每行双击事件  */
   onDoubleClick?: any,
   /** 是否loading */
-  load?: boolean,
+  loading?: boolean,
   /** table size */
   size?: any,
   /** 选中的checkbox数据 */
@@ -71,4 +71,6 @@ export interface ITableProps {
   onRef?: any;
   /** 手型 */
   cursor?: string
+  /** 没有数据文案 */
+  noDataText?: string
 }
\ No newline at end of file

src/components/mui/MyTooltip.tsx

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-11 11:56:58
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-22 10:51:10
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-08 13:55:20
  * @FilePath: /bkunyun/src/components/mui/MyTooltip.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -39,7 +39,7 @@ const MyTooltip = (props: IMyTooltipProps) => {
 			<Tooltip
 				// interactive={true}
 				arrow
-				title={title}
+				title={title || ''}
 				placement={placement}
 				{...other}
 			>

src/components/mui/Tabs.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-31 20:25:56
+ * @LastEditTime: 2022-09-01 19:34:35
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -28,7 +28,7 @@ interface ITabList {
 
 interface IProps {
 	value?: string;
-	onChange?: (val: string)=> void;
+	onChange?: (val: string) => void;
 	tabList: ITabList[];
 	defaultValue?: string;
 	tabPanelSx?: any;
@@ -88,27 +88,34 @@ const Tabs = (props: IProps) => {
 			: tabList.filter((e) => !e.hide)[0].value
 	);
 
-	const [hoverValue, setHoverValue] = useState('')
+	const [hoverValue, setHoverValue] = useState("");
 
 	const onTabChange = (val: string) => {
-		setTabValue(val)
+		setTabValue(val);
 		onChange && onChange(val);
 	};
 
-	const getImgSrc = useCallback((item: ITabList)=>{
-		let result = item.icon
-		if(value === item.value){
-			result = item.iconed
+	const getImgSrc = useCallback(
+		(item: ITabList) => {
+			let result = item.icon;
+			if (value === item.value || tabValue === item.value) {
+				result = item.iconed;
 			}
-		if(hoverValue === item.value){
-			result = item.iconHover
+			if (hoverValue === item.value) {
+				result = item.iconHover;
 			}
-		return result
-	},[hoverValue, value])
+			return result;
+		},
+		[hoverValue, value, tabValue]
+	);
 
 	const labelRender = (item: ITabList, key: number) => {
 		return (
-			<div style={{ display: "flex", alignItems: "center" }} onMouseOver={()=>setHoverValue(item.value)} onMouseOut={()=>setHoverValue('')}>
+			<div
+				style={{ display: "flex", alignItems: "center" }}
+				onMouseOver={() => setHoverValue(item.value)}
+				onMouseOut={() => setHoverValue("")}
+			>
 				{item.icon ? (
 					<img
 						style={{ width: "16px", marginRight: "8px" }}

src/hooks/useMyRequest.ts

@@ -21,7 +21,7 @@ const useMyRequest = <TData, TParams>(
     defaultParams?: TParams[];
     onBefore?: (params: TParams[]) => void;
     onSuccess?: (data: TData, params: TParams[]) => void;
-    onError?: (e: Error, params: TParams[]) => void;
+    onError?: (e: any, params: TParams[]) => void;
     onFinally?: (params: TParams[], data?: TData, e?: Error) => void;
     loadingDelay?: number;
     pollingInterval?: number;
@@ -51,9 +51,16 @@ const useMyRequest = <TData, TParams>(
 
   const request = useRequest(api, {
     ...defaultOptions,
-    onSuccess: () => {},
-    onError: (data) => {
+    onSuccess: () => { },
+    onError: (data: any) => {
       Message.error(data.message);
+      if (data.errorCode === '100003') {
+        setTimeout(() => {
+          localStorage.removeItem('token_key');
+          if (window.location.href && !window.location.href.includes("/login-page"))
+            window.location.href = '/v2/pages/login-page'
+        }, 4000);
+      }
     },
     ...options,
   });

src/hooks/usePass.ts

@@ -9,6 +9,13 @@ const roleList: any[] = [
   { OWNER: 4 }
 ]
 
+export const roleMap = {
+  VIEWER: '查看者',
+  USER: '研究员',
+  MANAGER: '管理员',
+  OWNER: '所有者',
+}
+
 const usePass = () => {
   const { permissionStore } = useStores();
   const { currentProjectStore } = useStores();

src/store/modules/currentProject.ts

@@ -18,6 +18,7 @@ type projectInfo = {
 type productInfo = {
   id?: string;
   name?: string;
+  path?: string;
 };
 
 /** 用户信息 */

src/store/modules/fileList.ts

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 17:00:19
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-16 09:43:42
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-09-01 19:34:46
  * @FilePath: /bkunyun/src/store/modules/upload.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -25,6 +25,8 @@ class FileList {
   /** 文件上传列表 */
   fileList: IUploadInfo[] = [];
   
+  /** 是否打开传输列表 */
+  openFileList: boolean = false
 
   // setFileList (val: IUploadInfo[]) {
   //   this.fileList = val
@@ -39,6 +41,10 @@ class FileList {
     this.newFileList = val
   }
 
+  /** 打开关闭文件列表 */
+  setOpenFileList = (val: boolean) => {
+    this.openFileList = val
+  }
 
   /** 设置文件上传信息 */
   setUploadInfo = (id: string, val: IUploadInfo) => {

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

@@ -88,17 +88,17 @@ const FileItem = observer((props: IProps) => {
 
 	const speed = useMemo(() => {
 		let val = 0;
-		const time = Math.floor((itemInfo?.endTime - itemInfo.startTime) / 1000);
+		const time = Math.floor((itemInfo?.endTime - itemInfo?.startTime) / 1000);
 		if (time > 0) {
 			val = Math.floor(itemInfo?.bytesUploaded / time);
 		}
 		return val;
-	}, [itemInfo?.bytesUploaded, itemInfo?.endTime, itemInfo.startTime]);
+	}, [itemInfo?.bytesUploaded, itemInfo?.endTime, itemInfo?.startTime]);
 	return (
 		<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

 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-10 18:05:21
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-21 11:28:21
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @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,11 +46,11 @@ const TranSferList = observer(() => {
 					size="small"
 				/>
 			</Box>
-			<Box style={{ height: 400, overflowY: "auto" }}>
+			<div style={{ height: 400, overflow: "overlay", padding: "0 16px" }}>
 				{uploadInfoStore?.fileList.map((item) => {
 					return <FileItem fileItemInfo={item} key={item.id} />;
 				})}
-			</Box>
+			</div>
 		</Box>
 	);
 });

src/views/ConsoleLayout/index.module.css

@@ -13,10 +13,70 @@
 }
 
 .logo {
-	padding: 0px 16px 0px 20px;
+	padding: 0px 32px 0px 20px;
 	margin-top: -10px;
 }
-
+.menuBox {
+	line-height: 57px;
+	height: 57px;
+	font-size: 14px;
+	color: rgba(86, 92, 102, 1);
+	margin-right: 24px;
+	cursor: pointer;
+	position: relative;
+}
+.menuTitle:hover {
+	color: #1e2633;
+}
+.menuBox:hover .productList {
+	display: block;
+}
+.triangle {
+	width: 16px;
+	height: 16px;
+	position: relative;
+	top: 4px;
+	transition: width 1s;
+	-webkit-transition: width 1s;
+}
+.menuBox:hover .triangle {
+	transform: rotateX(180deg);
+}
+.productList {
+	position: absolute;
+	top: 57px;
+	left: -16px;
+	padding: 8px 0;
+	display: none;
+	background: #ffffff;
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
+	border-radius: 4px;
+	z-index: 1002;
+}
+.productLi {
+	min-width: 142px;
+	height: 36px;
+	padding: 7px 50px 7px 16px;
+	font-size: 14px;
+	color: rgba(30, 38, 51, 1);
+	line-height: 22px;
+	cursor: pointer;
+	position: relative;
+	box-sizing: border-box;
+}
+.productLi:hover {
+	color: rgba(19, 112, 255, 1);
+}
+.productLiActive {
+	color: rgba(19, 112, 255, 1);
+}
+.selectActive {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	top: 10px;
+	right: 12px;
+}
 .uploadIconBox {
 	width: 32px;
 	height: 32px;
@@ -39,16 +99,14 @@
 }
 
 .topRightItem {
-	margin-right: 20px;
+	margin-right: 24px;
 }
-
-.ArrowDropDownIconRoot {
+.topRightTriangle {
 	color: #8a9099;
 	transition: all 0.2s !important;
 	transform: rotate(0);
 }
-
-.ArrowDropDownIconRootOpen {
+.topRightTriangleOpen {
 	color: #8a9099;
 	transform: rotate(180deg);
 }

src/views/ConsoleLayout/index.tsx

-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import cx from "classnames";
 import { observer } from "mobx-react-lite";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Avatar from "@mui/material/Avatar";
 import { Box, Menu, MenuItem } from "@mui/material";
 import classNames from "classnames";
 
 import uploadIcon from "@/assets/img/uploadIcon.svg";
+import triangle from "@/assets/project/triangle.svg";
+import selectActive from "@/assets/project/selectActive.svg";
 import globalText from "@/utils/globalText_CN";
 import useIndex from "./useIndex";
 import { useStores } from "@/store/index";
-import MyButton from "@/components/mui/MyButton";
 import logo from "@/assets/img/logo.svg";
 import MyPopover from "@/components/mui/MyPopover";
 import TranSferList from "./components/TransferList";
 import { getProjectList } from "@/api/project_api";
 import useMyRequest from "@/hooks/useMyRequest";
+import { toJS } from "mobx";
 import {
 	setFileServerEndPointLocalStorage,
 	getFiletokenAccordingToId,
@@ -25,29 +25,19 @@ import {
 import style from "./index.module.css";
 
 const ConsoleLayout = observer(() => {
-	const {
-		productAnchorEl,
-		utilityAnchorEl,
-		productOpen,
-		utilityOpen,
-		handleProductClick,
-		handleUtilityClick,
-		handleClose,
-	} = useIndex();
+	const { utilityAnchorEl, utilityOpen, handleUtilityClick, handleClose } =
+		useIndex();
 
-	const [currentProduct, setCurrentProduct] = useState<{
-		path: string;
-		name: string;
-	}>();
-
-	const { currentProjectStore } = useStores();
+	const { currentProjectStore, fileListStore } = useStores();
+	const { openFileList, setOpenFileList } = fileListStore;
+	const productInfo = toJS(currentProjectStore.currentProductInfo);
 	const { run: runGetProjectList } = useMyRequest(getProjectList, {
 		onSuccess: (res) => {
 			let list = res.data;
 			if (list.length === 0) {
 				currentProjectStore.setProjectList([]);
 				currentProjectStore.changeProject({});
-				navigate(currentProduct?.path as string);
+				navigate(productInfo?.path as string);
 			} else {
 				currentProjectStore.setProjectList(list);
 				currentProjectStore.changeProject(list[0]);
@@ -56,15 +46,18 @@ const ConsoleLayout = observer(() => {
 					list[0].filetoken = res;
 					currentProjectStore.changeProject(list[0]);
 				});
-				navigate(currentProduct?.path as string);
+				navigate(productInfo?.path as string);
 			}
 		},
 	});
 
 	// 切换产品
 	const getProduct = (item: any) => {
-		currentProjectStore.changeProductInfo({ id: item.id, name: item.name });
-		setCurrentProduct(item);
+		currentProjectStore.changeProductInfo({
+			id: item.id,
+			name: item.name,
+			path: item.path,
+		});
 		runGetProjectList({
 			product: item.id,
 		});
@@ -74,6 +67,15 @@ const ConsoleLayout = observer(() => {
 	const location = useLocation();
 	const { permissionStore, menuStore } = useStores();
 
+	// 不在产品页面下的时候清空当前产品
+	useEffect(() => {
+		if (location.pathname.slice(0, 8) !== "/product") {
+			currentProjectStore.setProjectList([]);
+			currentProjectStore.changeProject({});
+			currentProjectStore.changeProductInfo({});
+		}
+	}, [location, currentProjectStore]);
+
 	useEffect(() => {
 		permissionStore.setSidebarRouters(location.pathname);
 	}, [location, permissionStore]);
@@ -83,62 +85,48 @@ const ConsoleLayout = observer(() => {
 			<Box className={style.topApp}>
 				<Box className={style.topLeftBox}>
 					<img src={logo} alt="" className={style.logo} />
-					<MyButton
-						text={globalText.console}
-						variant={"text"}
-						style={{ color: "#565C66" }}
-						onClick={() => navigate("/home")}
-					/>
+					<div className={style.menuBox} onClick={() => navigate("/home")}>
+						<div className={style.menuTitle}>{globalText.console}</div>
+					</div>
 
-					<Box sx={{ display: "flex", alignItems: "center" }}>
-						<MyButton
-							text={globalText.product}
-							variant={"text"}
-							style={{ color: "#565C66", paddingLeft: '8px' }}
-							onClick={handleProductClick}
-							dropValue={productOpen}
-							drop={true}
-						/>
-						{/* <ArrowDropDownIcon classes={{
-              root: cx({
-                [style.ArrowDropDownIconRoot]: true,
-                [style.ArrowDropDownIconRootOpen]: Boolean(productOpen)
-              })
-            }} /> */}
-						<Menu
-							id="product-menu"
-							anchorEl={productAnchorEl}
-							open={productOpen}
-							onClose={handleClose}
-							classes={{
-								paper: style.menuPaper,
-							}}
-							MenuListProps={{
-								"aria-labelledby": "product-button",
-							}}
-						>
+					<div className={style.menuBox}>
+						<div className={style.menuTitle}>
+							<span>{globalText.product}</span>
+							<img className={style.triangle} src={triangle} alt="" />
+						</div>
+						<div className={style.productList}>
 							{menuStore.productList.map((item) => {
 								return (
-									<MenuItem
+									<div
 										key={item.path}
-										classes={{
-											root: style.menuItemRoot,
-										}}
+										className={classNames({
+											[style.productLi]: true,
+											[style.productLiActive]: productInfo.path === item.path,
+										})}
 										onClick={() => {
 											getProduct(item);
 											handleClose();
 										}}
 									>
 										{item.name}
-									</MenuItem>
+										{productInfo.path === item.path && (
+											<img
+												className={style.selectActive}
+												src={selectActive}
+												alt=""
+											/>
+										)}
+									</div>
 								);
 							})}
-						</Menu>
-					</Box>
+						</div>
+					</div>
 				</Box>
 
 				<Box className={style.topRightBox}>
 					<MyPopover
+						open={openFileList}
+						changeOpen={(val) => setOpenFileList(val)}
 						content={<TranSferList />}
 						transformOrigin={{
 							vertical: "top",
@@ -152,7 +140,6 @@ const ConsoleLayout = observer(() => {
 								style={{ verticalAlign: "middle" }}
 							/>
 						</div>
-					
 					</MyPopover>
 					<Box className={style.topRightItem}>
 						<Box
@@ -170,13 +157,13 @@ const ConsoleLayout = observer(() => {
 							>
 								H
 							</Avatar>
-							<ArrowDropDownIcon
-								classes={{
-									root: cx({
-										[style.ArrowDropDownIconRoot]: true,
-										[style.ArrowDropDownIconRootOpen]: Boolean(utilityOpen),
-									}),
-								}}
+							<img
+								className={classNames({
+									[style.topRightTriangle]: true,
+									[style.topRightTriangleOpen]: Boolean(utilityOpen),
+								})}
+								src={triangle}
+								alt=""
 							/>
 						</Box>
 

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

@@ -32,7 +32,7 @@
 }
 .list {
 	height: calc(100% - 55px);
-	overflow-y: auto;
+	overflow-y: overlay;
 	padding: 15px 20px;
 	box-sizing: border-box;
 }

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

@@ -202,6 +202,7 @@ const SaveOperator = (props: IProps) => {
 					<span
 						style={{
 							position: "absolute",
+							fontSize: "14px",
 							bottom: "7px",
 							right: "12px",
 							color: description.length >= 300 ? "#d32f2f" : "#C2C6CC",

src/views/CustomOperator/index.tsx

@@ -27,18 +27,14 @@ const CustomOperator = observer((props: IProps) => {
 	/** 设置选中唯一标识符 */
 	const handleNodeClick = useCallback((val: string) => {
 		// setSelectTaskId(val);
-		// console.log(val);
 	}, []);
 
 	// 判断   每个流算子必须至少有一条连接线。
 	const checkHasOneLine = (sourceArr: string[], targetArr: string[]) => {
-		console.log("checkHasOneLine");
 		const all = _.uniq([...sourceArr, ...targetArr]);
 		if (all.length === operatorList.length) {
-			console.log("checkHasOneLine1");
 			return true;
 		} else {
-			console.log("checkHasOneLine2");
 			return false;
 		}
 		// _.uniq([2, 1, 2]);
@@ -46,7 +42,6 @@ const CustomOperator = observer((props: IProps) => {
 
 	// 判断   每个起始算子（可以有多个起始点）的输入必须为文件的路径输入或数据集的路径输入。
 	const checkIn = (targetArr: string[]) => {
-		console.log("checkIn");
 		const uniqTargetArr = _.uniq(targetArr);
 		if (uniqTargetArr.length === operatorList.length) {
 			// 流节点连成一个圈了
@@ -82,7 +77,6 @@ const CustomOperator = observer((props: IProps) => {
 
 	// 判断  起码有一个结尾算子（可以有多个结尾点）的输出必须为文件保存或数据集保存。
 	const checkOut = (sourceArr: string[]) => {
-		console.log("checkOut");
 		const uniqSourceArr = _.uniq(sourceArr);
 		if (uniqSourceArr.length === operatorList.length) {
 			// 流节点连成一个圈了
@@ -134,22 +128,18 @@ const CustomOperator = observer((props: IProps) => {
 				edge.target && targetArr.push(edge.target);
 			});
 		});
-		console.log("operatorList", operatorList);
-		console.log("sourceArr", sourceArr);
-		console.log("targetArr", targetArr);
 		if (!checkHasOneLine([...sourceArr], [...targetArr])) {
-			console.log("checkHasOneLine");
-			Message.error("内容校验未通过，请检查！");
+			Message.error("部分算子没有流程线，请检查流程！");
 			return;
 		}
 		if (!checkIn([...targetArr])) {
-			console.log("checkIn");
-			Message.error("内容校验未通过，请检查！");
+			Message.error("每个流程第一步需读取文件/数据集，请检查流程！");
 			return;
 		}
 		if (!checkOut([...sourceArr])) {
-			console.log("checkOut");
-			Message.error("内容校验未通过，请检查！");
+			Message.error(
+				"每个流程最后一步必须将数据写入为文件/数据集，请检查流程！"
+			);
 			return;
 		}
 		setSaveFormDialog(true);

src/views/Home/index.module.css

+.parentBox {
+    height: calc(100vh - 57px);
+    position: relative;
+}
+
+.centerBox {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.centerImg{
+    width: 186px;
+    height: 114px;
+}
+
+.centerText {
+    font-size: 14px;
+    color: #565C66;
+    line-height: 22px;
+    margin-top: 20px;
+    text-align: center;
+}
+
+.bottomText {
+    font-size: 14px;
+    color: #8A9099;
+    line-height: 22px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20px;
+}
\ No newline at end of file

src/views/Home/index.tsx

 import React from "react";
+import style from "./index.module.css";
+import building from "@/assets/img/building.png";
 
 const Home = () => {
-  return <div>Home</div>;
+  return <div className={style.parentBox}>
+    <div className={style.centerBox}>
+      <img src={building} className={style.centerImg} />
+      <div className={style.centerText}>平台正在努力建设中…</div>
+    </div>
+    <div className={style.bottomText}>平台当前为beta版本，非最终品质</div>
+  </div>
 };
 
 export default Home;

src/views/MenuLayout/index.module.css

@@ -13,7 +13,7 @@
 .content {
 	flex: 1;
 	height: calc(100vh - 57px);
-	overflow: scroll;
+	overflow: overlay;
 }
 .listItem {
 	padding: 8px 25px;
@@ -27,6 +27,7 @@
 }
 .listItem:hover {
 	background-color: #eef1f5;
+	border-left: 3px solid #eef1f5;
 }
 .routerIcon {
 	vertical-align: middle;

src/views/MenuLayout/index.tsx

@@ -2,14 +2,14 @@
  * @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
  */
 import { Box, List } from "@mui/material";
 import CurrentProject from "../Project/components/CurrentProject";
 import React from "react";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useNavigate, useLocation } from "react-router-dom";
 import style from "./index.module.css";
 import { observer } from "mobx-react-lite";
 import { useStores } from "@/store/index";
@@ -23,27 +23,28 @@ const MenuLayout = observer(() => {
 	const navigate = useNavigate();
 
 	const productInfo = toJS(currentProjectStore.currentProductInfo);
+	const location = useLocation();
 
-  // 未选择产品时 直接跳转home页面
-  if (!productInfo.name) {
+	// 在产品页面下且未选择产品时 直接跳转home页面
+	if (!productInfo.name && location.pathname.slice(0, 8) === "/product") {
 		navigate("/home");
 	}
 
 	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 +60,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/DeleteDialog/index.tsx

@@ -89,6 +89,7 @@ const DeleteDialog = (props: IDeleteFileProps) => {
 			open={deleteDialogOpen}
 			onClose={() => setDeleteDialogOpen(false)}
 			onConfirm={handleSubmit}
+			okColor="error"
 		>
 			{currentOperateFile
 				? "确认删除该数据吗？"

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/ProjectData/SeeDataset/index.module.css

@@ -42,7 +42,7 @@
 }
 .table {
 	flex: 1;
-	overflow-y: auto;
+	overflow-y: overlay;
 	display: flex;
 	flex-direction: column;
 }
@@ -101,7 +101,7 @@
 }
 .datasetLiDataList {
 	flex: 1;
-	overflow: auto;
+	overflow: overlay;
 }
 .noDataList {
 	flex: 1;

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

@@ -158,6 +158,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 			searchDataType,
 			sort,
 			keyword,
+			firstGetList,
 			// Message,
 		]
 	);
@@ -205,7 +206,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 										},
 									]}
 									RadiosBoxStyle={{ width: "132px" }}
-								></RadioGroupOfButtonStyle>
+								/>
 							)}
 							<MyMultipleMenu
 								value={showData}
@@ -221,11 +222,12 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 						<div className={style.screensRight}>
 							<MySelect
 								options={dataTypes}
-								title="选择属性"
+								title={dataTypes.length === 0 ? "暂无属性" : "选择属性"}
 								isTitle={true}
 								value={searchDataType}
 								onChange={handleSearchDataTypeChange}
 								fullWidth={false}
+								disabled={dataTypes.length === 0}
 								sx={{
 									width: "160px",
 									marginRight: "16px",
@@ -269,8 +271,8 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 								sx={{
 									width: "340px",
 									marginRight: "16px",
-									height: "32px",
 								}}
+								size="small"
 							></MyInput>
 							<MyButton
 								text="确认"

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

@@ -50,10 +50,6 @@
 	box-sizing: border-box;
 	position: relative;
 }
-/* .tableBox {
-  height: 300px;
-  overflow: scroll;
-} */
 .fileIconBox {
 	display: flex;
 	justify-content: flex-start;

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

@@ -135,6 +135,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
 				};
 			}) || [];
 		toJS(fileListStore?.setNewFileList)(newFileList);
+		fileListStore?.setOpenFileList(true);
 		if (newFileList?.length) {
 			getFileToken(newFileList);
 		}
@@ -173,7 +174,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
 	const renderButtons = (item: any, index: number) => {
 		return (
 			<MyButton
-					text='删除'
+				text="删除"
 				style={{ position: "relative", left: "-18px" }}
 				variant="text"
 				size="small"

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

@@ -32,6 +32,9 @@
 	color: #1e2633;
 	line-height: 22px;
 	font-weight: 600;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
 }
 
 .projectDataTabsAndBtton {
@@ -77,8 +80,9 @@
 	line-height: 22px;
 	font-size: 14px;
 	color: #1e2633;
-	/* display: flex;
-  align-items: center; */
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
 }
 
 .showPathI {

src/views/Project/ProjectData/index.tsx

@@ -27,6 +27,7 @@ import SeeDataset from "./SeeDataset";
 import { getDataFind, getDataFileSearch } from "@/api/project_api";
 import MyButton from "@/components/mui/MyButton";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 const ProjectData = observer(() => {
 	const isPass = usePass();
@@ -462,7 +463,13 @@ const ProjectData = observer(() => {
 						>
 							{index === 0 ? "ProjectData" : item}{" "}
 							{index === pathArr.length - 1 ? null : (
-								<i className={style.showPathI}>{">"}</i>
+								<ChevronRightIcon
+									sx={{
+										fontSize: "16px",
+										color: "rgba(194, 198, 204, 1)",
+										margin: "0px 4px",
+									}}
+								/>
 							)}
 						</span>
 					);
@@ -494,10 +501,24 @@ const ProjectData = observer(() => {
 								: ""}
 							{index === pathArr.length - 1 ||
 							(index <= pathArr.length - 4 && index > 0) ? null : (
-								<i className={style.showPathI}>{">"}</i>
+								<ChevronRightIcon
+									sx={{
+										fontSize: "16px",
+										color: "rgba(194, 198, 204, 1)",
+										margin: "0px 4px",
+									}}
+								/>
 							)}
 							{index === 1 && "..."}
-							{index === 1 && <i className={style.showPathI}>{">"}</i>}
+							{index === 1 && (
+								<ChevronRightIcon
+									sx={{
+										fontSize: "16px",
+										color: "rgba(194, 198, 204, 1)",
+										margin: "0px 4px",
+									}}
+								/>
+							)}
 						</span>
 					);
 				});
@@ -551,7 +572,7 @@ const ProjectData = observer(() => {
 										{ value: "dataset", label: "数据集" },
 									]}
 									handleRadio={setActiveTab}
-								></RadioGroupOfButtonStyle>
+								/>
 								<IconButton
 									aria-label="refreshIcon"
 									size="small"
@@ -602,10 +623,9 @@ const ProjectData = observer(() => {
 				{selectIds.length > 0 && (
 					<div className={style.projectDataStickyBox}>
 						<MyButton
-							text={`批量删除（${selectIds.length}）`}
+							text={`批量删除 (${selectIds.length})`}
 							color="error"
 							variant="outlined"
-							size="small"
 							style={{ marginRight: "12px" }}
 							onClick={() => {
 								setCurrentOperateFile(null);
@@ -614,10 +634,9 @@ const ProjectData = observer(() => {
 							disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
 						/>
 						<MyButton
-							text={`批量移动（${selectIds.length}）`}
+							text={`批量移动 (${selectIds.length})`}
 							// color="neutral"
 							variant="contained"
-							size="small"
 							style={{ marginRight: "24px" }}
 							onClick={() => {
 								setCurrentOperateFile(null);

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

@@ -3,20 +3,12 @@
 	top: 0;
 	width: 100%;
 	height: 100%;
-    background-color: rgba(0, 0, 0, .5);
+	background-color: rgba(0, 0, 0, 0.5);
 	z-index: 1002;
 }
 
 .logViewBox {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 900px;
-    height: 600px;
-    background: #282C34;
-    box-shadow: 2px 4px 20px 0px rgba(0, 15, 45, 0.1200);
-    border-radius: 8px;
+	background: #282c34;
 }
 
 .close {
@@ -28,69 +20,112 @@
 }
 
 .logViewTop {
-    /* height: 30px; */
-    background-color: #1D2126;
-    border-radius: 8px 8px 0 0;
+	position: relative;
+	width: 100vw;
+	background-color: #1d2126;
 	display: flex;
 	font-size: 12px;
-    color: #8A9099;
-    overflow: auto;
+	color: #8a9099;
+	overflow: hidden;
+}
+
+.leftButton {
+	width: 48px;
+	height: 32px;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	border-right: 1px solid #10141A;
+	background-color: #1d2126;
+}
+
+.rightButton {
+	width: 48px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	border-left: 1px solid #10141A;
+	background-color: #1d2126;
+}
+
+.middleFixed {
+	width: calc(100vw - 98px);
+	position: relative;
+	overflow: hidden;
 }
 
-.logViewTop::-webkit-scrollbar-track {
-    background-color: #282C34;
-  }
+.middleDynamic{
+	display: flex;
+	position: absolute;
+	left: 0;
+}
 
 .logTitle {
 	display: flex;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	flex-shrink: 0;
 	align-items: center;
-    height: 30px;
+	height: 32px;
 	line-height: 20px;
-    padding: 0 24px;
+	padding: 0 20px;
 	cursor: pointer;
+	border-right: 1px solid #10141A;
+}
+
+.logName {
+	max-width: 90px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
 .logTitleSelected {
-    background: #282C34;
-    color: #FFFFFF;
+	background: #282c34;
+	color: #ffffff;
 }
 
-.fileIcon{
-    width: 14px!important;
+.fileIcon {
+	width: 14px !important;
 	margin-right: 4px;
 }
 
 .logViewContent {
 	position: relative;
 	box-sizing: border-box;
-    height: 510px;
-    padding: 16px 24px 0;
-    color: #D1D6DE;
-    white-space:pre-wrap;
+	height: calc(100vh - 148px);
+	padding: 24px 32px 0;
+	color: #d1d6de;
+	white-space: pre-wrap;
 	word-break: break-word;
-    overflow: auto;
+	overflow: overlay;
 	font-size: 14px;
 	line-height: 22px;
 }
 
-.logViewContentMask{
-    height: 16px;
-    width: 852px;
-    background-color: #282C34;
+.logViewContentMask {
+	height: 24px;
+	width: calc(100vw - 64px);
+	background-color: #282c34;
 	position: absolute;
-    top: 30px;
-    left: 24px;
+	top: 32px;
+	left: 32px;
 	z-index: 1005;
 }
 
 .logViewContent::-webkit-scrollbar-track {
-  background-color: #282C34;
+	background-color: #282c34;
 }
 
 .logViewBottom {
 	display: flex;
 	align-items: center;
 	justify-content: end;
-    height: 60px;
+	height: 76px;
 	padding-right: 24px;
 }
\ No newline at end of file

src/views/Project/ProjectJobDetail/LogView/index.tsx

@@ -7,16 +7,18 @@ import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutl
 import CloudEController from "@/api/fileserver/CloudEController";
 import { useStores } from "@/store";
 import { toJS } from "mobx";
+import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
 
 type LogViewProps = {
-    isshow: boolean;
-    handleClose: () => void;
     logs: any[];
+    setShowLogView: any;
 };
 
 const LogView = (props: LogViewProps) => {
-    const { isshow, handleClose, logs } = props;
+    const { logs, setShowLogView } = props;
     const { currentProjectStore } = useStores();
     const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
     const projectId = toJS(currentProjectStore.currentProjectInfo.id);
@@ -42,7 +44,7 @@ const LogView = (props: LogViewProps) => {
             )?.then((res) => {
                 setLogText(res.data)
             })
-        }else{
+        } else {
             setLogText("")
         }
     }, [logPath]);
@@ -53,7 +55,7 @@ const LogView = (props: LogViewProps) => {
     }, [logCurrent]);
 
     // 下载当前日志
-    const handleDownLoad=()=>{
+    const handleDownLoad = () => {
         const path = logPath.slice(12)
         CloudEController.JobFileDownload(
             path,
@@ -62,11 +64,14 @@ const LogView = (props: LogViewProps) => {
         );
     }
 
-    return <div className={style.logView} style={isshow ? {} : { display: "none" }}>
+    return (
+        <FullScreenDrawer handleClose={setShowLogView} zIndex={1002}>
             <div className={style.logViewBox}>
-            <CloseIcon onClick={handleClose} className={style.close} />
                 <div className={style.logViewContentMask}></div>
                 <div className={style.logViewTop}>
+                    <div className={style.leftButton}><ChevronLeftIcon /></div>
+                    <div className={style.middleFixed}>
+                        <div className={style.middleDynamic}>
                             {logs.map((item: any, index: number) => {
                                 return <div
                                     key={index}
@@ -76,10 +81,13 @@ const LogView = (props: LogViewProps) => {
                                         [style.logTitleSelected]: index === logCurrent,
                                     })}>
                                     <InsertDriveFileOutlinedIcon className={style.fileIcon} />
-                        <span>{item.logName}</span>
+                                    <span className={style.logName}>{item.logName}</span>
                                 </div>
                             })}
                         </div>
+                    </div>
+                    <div className={style.rightButton}><ChevronRightIcon /></div>
+                </div>
                 <div className={style.logViewContent}>
                     {logText}
                 </div>
@@ -87,7 +95,8 @@ const LogView = (props: LogViewProps) => {
                     <MyButton text='下载当前日志' onClick={handleDownLoad} />
                 </div>
             </div>
-    </div>
+        </FullScreenDrawer>
+    )
 }
 
 export default LogView
\ No newline at end of file

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

@@ -6,7 +6,7 @@
 	width: 100vw;
 	height: 100vh;
 	background-color: RGBA(247, 248, 250, 1);
-	overflow-y: auto;
+	overflow-y: overlay;
 }
 .swHeader {
 	z-index: 1001;
@@ -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,9 +25,23 @@
 	justify-content: flex-start;
 	align-items: center;
 }
+.goBackIcon {
+	cursor: pointer;
+}
+.goBackIconBox {
+	width: 32px;
+	height: 32px;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.goBackIconBox:hover {
+	background-color: rgb(240, 242, 245);
+}
 .swTemplateTitle {
-	margin: 0 19px 0 8px;
-	line-height: 22px;
+	margin: 0 19px 0 3px;
+	line-height: 20px;
 	font-size: 14px;
 	color: rgba(30, 38, 51, 1);
 	font-weight: 700;
@@ -39,9 +53,9 @@
 }
 .swFormBox {
 	background-color: #fff;
-	border-right: 1xp solid rgba(235, 237, 240, 1);
+	border-right: 1px solid #ebedf0;
 	width: 360px;
-	overflow-y: scroll;
+	overflow-y: overlay;
 	box-sizing: border-box;
 	padding: 24px;
 }
@@ -74,7 +88,7 @@
 	color: rgba(19, 112, 255, 1);
 	font-size: 14px;
 }
-.outputItemName{
+.outputItemName {
 	max-width: 172px;
 	white-space: nowrap;
 	display: block;
@@ -107,8 +121,9 @@
 	color: rgba(138, 144, 153, 1);
 	font-size: 14px;
 	line-height: 22px;
-	width: 72px;
+	width: 80px;
 	margin-right: 44px;
+	word-wrap: break-word;
 }
 .taskInfoValue {
 	color: rgba(30, 38, 51, 1);
@@ -121,6 +136,7 @@
 	word-break: break-all;
 	flex: 1;
 	justify-content: flex-end;
+	word-wrap: break-word;
 }
 .taskInfoValueClick {
 	cursor: pointer;
@@ -164,7 +180,7 @@
 	position: absolute;
 	top: 33px;
 	max-height: 230px;
-	overflow-y: scroll;
+	overflow-y: overlay;
 	padding: 8px 0px;
 	background: #ffffff;
 	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
@@ -193,6 +209,7 @@
 	right: 24px;
 	bottom: 24px;
 	padding: 8px;
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
 }
 .fullScreenBox:hover {
 	opacity: 0.6;

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

@@ -2,14 +2,14 @@
 	display: flex;
 	margin: 16px 16px 0;
 	height: 156px;
-    background: #FFFFFF;
-    box-shadow: 2px 2px 6px 0px rgba(0, 25, 57, 0.0300);
+	background: #ffffff;
+	box-shadow: 2px 2px 6px 0px rgba(0, 25, 57, 0.03);
 	border-radius: 4px;
 }
 
 .dividingLine {
 	height: 156px;
-    border-left: 1px solid #EBEDF0;
+	border-left: 1px solid #ebedf0;
 	position: relative;
 }
 
@@ -20,14 +20,16 @@
 	width: 26px;
 	height: 26px;
 	background-color: #fff;
-    border-top: 1px solid #EBEDF0;
-    border-right: 1px solid #EBEDF0;
+	border-top: 1px solid #ebedf0;
+	border-right: 1px solid #ebedf0;
 	transform: rotate(45deg);
 }
 
 .cardLeft {
 	flex: 1;
+	cursor: pointer;
 	padding: 16px 24px;
+	
 }
 
 .topLine {
@@ -43,8 +45,8 @@
 	cursor: pointer;
 }
 
-.taskName:hover{
-    color: #1370FF;
+.taskName:hover {
+	color: #1370ff;
 }
 
 .taskStatus {
@@ -66,13 +68,13 @@
 .taskCreator {
 	font-size: 12px;
 	line-height: 20px;
-    color: #1E2633;
+	color: #1e2633;
 	margin-top: 4px;
 }
 
 .taskProgress {
 	height: 32px;
-    margin: 12px 0;
+	margin: 12px 0 16px;
 }
 
 .progressInfo {
@@ -80,13 +82,13 @@
 	justify-content: space-between;
 	margin-bottom: 8px;
 	font-size: 12px;
-    color: #565C66;
+	color: #565c66;
 }
 
 .bottomLine {
 	display: flex;
 	font-size: 12px;
-    color: #565C66;
+	color: #565c66;
 }
 
 .bottomInfo {
@@ -97,7 +99,8 @@
 	flex: 1;
 	display: flex;
 	position: relative;
-    overflow: auto;
+	overflow: overlay;
+	padding: 16px 24px 16px 42px;
 }
 
 .noResult {
@@ -106,52 +109,66 @@
 	left: 50%;
 	transform: translate(-50%, -50%);
 	font-size: 14px;
-    color: #8A9099;
+	color: #8a9099;
 }
 
 .resultBox {
-    padding: 16px 24px 16px 42px;
+	/* padding: 16px 24px 16px 42px; */
 	width: 100%;
 	display: flex;
 	flex-wrap: wrap;
 	align-content: flex-start;
+	box-sizing: border-box;
 }
 
 .result {
 	box-sizing: border-box;
 	font-size: 12px;
-    color: #1E2633;
+	align-items: center;
+	color: #1e2633;
 	cursor: pointer;
-    height: 30px;
+	height: 31px;
+	display: flex;
+	align-items: center;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	padding-right: 8px;
 }
 
-@media screen and (max-width:1220px) {
+@media screen and (max-width: 1220px) {
 	.result {
 		width: 100%;
 	}
 }
 
-@media screen and (min-width:1220px) and (max-width:1600px) {
+@media screen and (min-width: 1220px) and (max-width: 1600px) {
 	.result {
 		width: 50%;
 	}
 }
 
-@media screen and (min-width:1600px) {
+@media screen and (min-width: 1600px) {
 	.result {
 		width: 33.33%;
 	}
 }
 
 .result:hover {
-    color: #1370FF;
+	color: #1370ff;
 }
 
 .outputLeftImg {
-    vertical-align: middle;
+	vertical-align: top;
 	margin-right: 8px;
 }
+
+.outputTitle {
+	display: inline-block;
+	height: 22px;
+	line-height: 22px;
+	width: calc(100% - 30px);
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}

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,50 +69,54 @@ 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;
 			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) {
+			case "SUBMITTED":
+				return "#1370FF";
 			case "RUNNING":
 				return "#1370FF";
 			case "ABORTED":
@@ -116,6 +132,8 @@ const TaskCard = (props: TaskCardProps) => {
 	// 渲染状态框背景颜色
 	const renderBackgroundColor = (data: string) => {
 		switch (data) {
+			case "SUBMITTED":
+				return "#EBF3FF";
 			case "RUNNING":
 				return "#EBF3FF";
 			case "ABORTED":
@@ -131,6 +149,8 @@ const TaskCard = (props: TaskCardProps) => {
 	//渲染进度条颜色
 	const renderProgressColor = useCallback((data: any) => {
 		switch (data) {
+			case "SUBMITTED":
+				return "info";
 			case "RUNNING":
 				return "info";
 			case "ABORTED":
@@ -143,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>
@@ -156,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} />
@@ -171,23 +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=""
 									/>
-                            {item?.name}</div>
+									<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;
+	z-index: 10;
+	background-color: #fff;
+}
+
+.topFixedShadow {
+	box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.12);
+}
+
 .basicInformation {
 	display: flex;
 	justify-content: space-between;
-    margin: 24px 24px 0 24px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #EDEFF2;
+	margin: 0 24px;
+	padding: 24px 0 20px;
+	border-bottom: 1px solid #edeff2;
 }
 
 .basicInformationRight {
@@ -31,30 +47,30 @@
 }
 
 .informationcolor {
-    color: #8A9099;
+	color: #8a9099;
 }
 
 .otherInformationBox {
 	margin-right: 24px;
-    color: #565C66;
+	color: #565c66;
 }
 
-.otherInformationBoxRight{
+.otherInformationBoxRight {
 	line-height: 22px;
 	margin-bottom: 4px;
-    color: #565C66;
+	color: #565c66;
 }
 
 .numberDisplay {
 	font-size: 20px;
 	font-weight: 600;
-    color: #1E2633;
+	color: #1e2633;
 	margin-right: 8px;
 }
 
 .verticalLine {
 	height: 32px;
-    border-right: 1px solid #EBEDF0;
+	border-right: 1px solid #ebedf0;
 	margin-left: 28px;
 	margin-right: 28px;
 }
@@ -63,6 +79,7 @@
 	display: flex;
 	justify-content: space-between;
 	margin: 24px 24px 0 24px;
+	padding-bottom: 20px;
 }
 
 .searchLineLeft {
@@ -85,10 +102,10 @@
 
 .taskDisplay {
 	position: relative;
-    margin: 20px 24px;
+	margin: 0 24px 20px;
 	padding-bottom: 16px;
 	overflow: hidden;
-    background: #F7F8FA;
+	background: #f7f8fa;
 	border-radius: 8px;
 	min-height: calc(100vh - 291px);
 }

src/views/Project/ProjectOverview/index.tsx

-import React, { useState, useCallback, useEffect, useMemo } from "react";
+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";
+import { getOverviewInfo, getTaskOverview } from "@/api/project_api";
 import { useStores } from "@/store/index";
 import NoProject from "@/components/BusinessComponents/NoProject";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import Loading from "@/views/Loading";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
-import TaskCard from './TaskCard'
+import TaskCard from "./TaskCard";
 
 import projectImg from "@/assets/project/projectIconSmall.svg";
 import noFile from "@/assets/project/noFile.svg";
 import style from "./index.module.css";
 
-
 const ProjectOverview = observer(() => {
 	const { currentProjectStore } = useStores();
 	// 概览基本信息
 	const [overviewInfo, setOverviewInfo] = useState<any>({});
 	// 任务概览列表
-    const [taskList, setTaskList] = useState([])
-    const [jobName, setJobName] = useState('')
-    const [page, setPage] = useState(0)
-    const [size, setSize] = useState(999)
+	const [taskList, setTaskList] = useState([]);
+	const [jobName, setJobName] = useState("");
+	const [page, setPage] = useState(0);
+	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) => {
@@ -64,29 +71,34 @@ const ProjectOverview = observer(() => {
 				size: size,
 			});
 		}
-    }, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);
+	}, [
+		currentProjectStore.currentProjectInfo.id,
+		getTaskOverviewList,
+		day,
+		jobName,
+	]);
 
 	const handleKeyWordChangeKeyUp = (e: any) => {
 		if (e.keyCode === 13) {
 			setJobName(e.target.value);
 		}
-    }
+	};
 
-    const handleKeyWordChangeBlur=(e:any)=>{
+	const handleKeyWordChangeBlur = (e: any) => {
 		setJobName(e.target.value);
-    }
+	};
 
 	const storageUnitFromB = (b: number) => {
 		if (b <= 0) {
-            return { data: '0.00', unit: 'KB' };
+			return { data: "0.00", unit: "KB" };
 		} else if (b < 1024 * 1024) {
-            return { data: (b / 1024).toFixed(2), unit: 'KB' };
+			return { data: (b / 1024).toFixed(2), unit: "KB" };
 		} else if (b < 1024 * 1024 * 1024) {
-            return { data: (b / (1024 * 1024)).toFixed(2), unit: 'MB' };
+			return { data: (b / (1024 * 1024)).toFixed(2), unit: "MB" };
 		} else if (b < 1024 * 1024 * 1024 * 1024) {
-            return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: 'G' };
+			return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: "G" };
 		} else {
-            return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: 'T' };
+			return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: "T" };
 		}
 	};
 
@@ -99,37 +111,87 @@ const ProjectOverview = observer(() => {
 			);
 		} else {
 			return (
-                <>
+				<div className={style.box} onScroll={onscroll}>
+					<div
+						className={classNames({
+							[style.topFixed]: true,
+							[style.topFixedShadow]: !isTop,
+						})}
+					>
 						<div className={style.basicInformation}>
 							<div>
 								<div className={style.titleBox}>
-                                <img src={projectImg} alt="项目logo" style={{ width: 30, height: 30 }} />
+									<img
+										src={projectImg}
+										alt="项目logo"
+										style={{ width: 30, height: 30 }}
+									/>
 									<span className={style.projectName}>
 										{currentProjectStore.currentProjectInfo.name}
 									</span>
 								</div>
 								<div className={style.otherInformation}>
-                                <div className={style.otherInformationBox}><span>角色：</span><span className={style.informationcolor}>{overviewInfo.projectRoleExhibit}</span></div>
-                                <div className={style.otherInformationBox}><span>计算区：</span><span className={style.informationcolor}>{overviewInfo.zoneIdExhibit}</span></div>
-                                <div className={style.otherInformationBox}><span>创建日期：</span><span className={style.informationcolor}>{moment(overviewInfo.createdAt).format('yyyy-MM-DD')}</span></div>
+									<div className={style.otherInformationBox}>
+										<span>角色：</span>
+										<span className={style.informationcolor}>
+											{overviewInfo.projectRoleExhibit}
+										</span>
+									</div>
+									<div className={style.otherInformationBox}>
+										<span>计算区：</span>
+										<span className={style.informationcolor}>
+											{overviewInfo.zoneIdExhibit}
+										</span>
+									</div>
+									<div className={style.otherInformationBox}>
+										<span>创建日期：</span>
+										<span className={style.informationcolor}>
+											{moment(overviewInfo.createdAt).format("yyyy-MM-DD")}
+										</span>
+									</div>
 								</div>
 							</div>
 							<div className={style.basicInformationRight}>
 								<div>
-                                <div className={style.otherInformationBoxRight}>项目总消费</div>
-                                <div><span className={style.numberDisplay}>{overviewInfo.projectCost?.toFixed(2)}</span>元</div>
+									<div className={style.otherInformationBoxRight}>
+										项目总消费
+									</div>
+									<div>
+										<span className={style.numberDisplay}>
+											{overviewInfo.projectCost?.toFixed(2)}
+										</span>
+										元
+									</div>
 								</div>
 								<div className={style.verticalLine}></div>
 								<div>
-                                <div className={style.otherInformationBoxRight}>项目剩余预算</div>
-                                <div><span className={style.numberDisplay}>{overviewInfo.projectRemainingBudget?.toFixed(2)}</span>元</div>
+									<div className={style.otherInformationBoxRight}>
+										项目剩余预算
+									</div>
+									<div>
+										<span className={style.numberDisplay}>
+											{overviewInfo.projectRemainingBudget?.toFixed(2)}
+										</span>
+										元
+									</div>
 								</div>
 								<div className={style.verticalLine}></div>
 								<div>
-                                <div className={style.otherInformationBoxRight} style={{ marginRight: '20px' }}>项目存储大小</div>
+									<div
+										className={style.otherInformationBoxRight}
+										style={{ marginRight: "20px" }}
+									>
+										项目存储大小
+									</div>
 									<div>
-                                    <span className={style.numberDisplay}>{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).data : ''}</span>
-                                    {overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).unit : ''}
+										<span className={style.numberDisplay}>
+											{overviewInfo.projectStorage !== undefined
+												? storageUnitFromB(overviewInfo.projectStorage).data
+												: ""}
+										</span>
+										{overviewInfo.projectStorage !== undefined
+											? storageUnitFromB(overviewInfo.projectStorage).unit
+											: ""}
 									</div>
 								</div>
 							</div>
@@ -145,7 +207,7 @@ const ProjectOverview = observer(() => {
 										{ value: "30", label: "近30天" },
 									]}
 									handleRadio={setDay}
-                            ></RadioGroupOfButtonStyle>
+								/>
 							</div>
 							<SearchInput
 								onKeyUp={handleKeyWordChangeKeyUp}
@@ -153,6 +215,7 @@ const ProjectOverview = observer(() => {
 								sx={{ width: 340 }}
 							/>
 						</div>
+					</div>
 					<div className={style.taskDisplay}>
 						{/* 任务列表为空展示 */}
 						{taskList.length === 0 && (
@@ -162,8 +225,10 @@ const ProjectOverview = observer(() => {
 							</div>
 						)}
 						{/* 任务列表卡片渲染 */}
-                        {taskList.length > 0 && taskList.map((item: any) => {
-                            return <TaskCard
+						{taskList.length > 0 &&
+							taskList.map((item: any) => {
+								return (
+									<TaskCard
 										id={item.id}
 										name={item.name}
 										creator={item.creator}
@@ -175,14 +240,14 @@ const ProjectOverview = observer(() => {
 										outputs={item.outputs}
 										key={item.id}
 									/>
+								);
 							})}
 					</div>
-                </>
+				</div>
 			);
 		}
-
 	} else {
 		return <NoProject />;
 	}
-})
-export default ProjectOverview
+});
+export default ProjectOverview;
\ No newline at end of file

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -21,7 +21,6 @@ import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import InformationDisplay from "@/components/CommonComponents/InformationDisplay";
 import classnames from "classnames";
-import LoadingButton from "@mui/lab/LoadingButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import { useMessage } from "@/components/MySnackbar";
 import Loading from "@/views/Loading";
@@ -40,6 +39,7 @@ type zoneIdOption = {
 const BaseInfo = observer(() => {
 	const message = useMessage();
 	const { currentProjectStore } = useStores();
+	const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
 	const [projectInfo, setProjectInfo] = useState<any>({});
 	const [deleteProjectName, setDeleteProjectName] = useState("");
 	const [nameCheck, setNameCheck] = useState({
@@ -260,6 +260,7 @@ const BaseInfo = observer(() => {
 				message.success("修改成功");
 				const projectList = await getProjectList();
 				currentProjectStore.setProjectList(projectList);
+				projectInfo.filetoken = fileToken;
 				currentProjectStore.changeProject(projectInfo);
 			},
 		}
@@ -354,6 +355,7 @@ const BaseInfo = observer(() => {
 						/>
 						<span
 							style={{
+								fontSize: "14px",
 								position: "absolute",
 								bottom: "7px",
 								right: "12px",
@@ -387,13 +389,11 @@ const BaseInfo = observer(() => {
 						required
 						error={budgetCheck.error}
 						disabled={currentUserName !== projectInfo.tenantUser}
-						// id="projectBudget"
 						variant="outlined"
-						value={projectInfo.projectBudget}
+						placeholder={projectInfo.projectBudget}
 						onChange={budgetChange}
 						onBlur={budgetBlur}
 						helperText={budgetCheck.help}
-						// size="small"
 						style={{ width: "560px" }}
 						InputProps={{
 							startAdornment: (
@@ -419,17 +419,12 @@ const BaseInfo = observer(() => {
 					/>
 				</div>
 				<div className={style.projectInfoListLi}>
-					<LoadingButton
+					<MyButton
 						variant="contained"
-						className={style.updateButton}
 						onClick={handleClickUpdate}
 						loading={updateLoading}
-						sx={{
-							height: "32px",
-						}}
-					>
-						保存修改
-					</LoadingButton>
+						text="保存修改"
+					/>
 				</div>
 				<div className={style.projectInfoListLi}>
 					<div
@@ -453,7 +448,7 @@ const BaseInfo = observer(() => {
 					onConfirm={handleSubmitDelete}
 					onClose={() => setDialogOpen(false)}
 					title="删除项目"
-					okSx={{ background: "#FF4E4E", color: "#fff" }}
+					okColor="error"
 				>
 					<div className={style.deleteBox}>
 						<div className={style.deleteText1}>

src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.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-31 18:27:26
+ * @LastEditTime: 2022-09-01 16:14:10
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -13,12 +13,17 @@ import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Box, OutlinedInput } from "@mui/material";
 
 import Dialog from "@/components/mui/MyDialog";
-import { IResponse, useHttp } from "@/api/http";
+import useMyRequest from "@/hooks/useMyRequest";
 import { useStores } from "@/store";
 import { useMessage } from "@/components/MySnackbar";
-import MySelect, { IOption } from "@/components/mui/MySelect";
+import MyBorderlessSelect, { IOption } from "@/components/mui/MyBorderlessSelect";
 import MyTable from "@/components/mui/MyTable";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
+import {
+	addProjectUser,
+	fetchProjectPower,
+	fetchProjectUsersList,
+} from "@/api/project_api";
 
 interface IProps {
 	setAddMemberDialog: (val: boolean) => void;
@@ -29,7 +34,6 @@ interface IProps {
 const AddMember = observer((props: IProps) => {
 	const { addMemberDialog, setAddMemberDialog, getTableList } = props;
 
-	const http = useHttp();
 	const { currentProjectStore } = useStores();
 
 	const [tableData, setTableData] = useState([]);
@@ -63,8 +67,7 @@ const AddMember = observer((props: IProps) => {
 						(every) => every.value === item
 					);
 					return (
-						<MySelect
-							input={<OutlinedInput />}
+							<MyBorderlessSelect
 								value={defaultValue?.length ? defaultValue[0]?.value : "VIEWER"}
 								onChange={(val) => changePermission(val, index)}
 								options={selectOptions}
@@ -76,14 +79,6 @@ const AddMember = observer((props: IProps) => {
 		];
 	}, [changePermission, selectOptions]);
 
-	useEffect(() => {
-		if (addMemberDialog) {
-			http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
-				setSelectOptions(res.data);
-			});
-		}
-	}, [addMemberDialog, http]);
-
 	/** 过滤表格数据 */
 	useEffect(() => {
 		if (!!projectMember) {
@@ -97,18 +92,48 @@ const AddMember = observer((props: IProps) => {
 		}
 	}, [projectMember, tableData]);
 
+	// 获取表格数据接口
+	const { run: getProjectUsersList } = useMyRequest(fetchProjectUsersList, {
+		onSuccess: (res: any) => {
+			setTableData(res?.data);
+		},
+	});
+
+	// 获取项目权限
+	const { run: getProjectPower } = useMyRequest(fetchProjectPower, {
+		onSuccess: (res: any) => {
+			setSelectOptions(res.data);
+		},
+	});
+
+	// 添加项目成员
+	const { run: saveProjectUser } = useMyRequest(addProjectUser, {
+		onSuccess: (res: any) => {
+			const { errorCode } = res;
+			if (errorCode === 0) {
+				Message.success("新增成功！");
+				getTableList();
+				setAddMemberDialog(false);
+			}
+		},
+	});
+
+	useEffect(() => {
+		if (addMemberDialog) {
+			getProjectPower();
+		}
+	}, [addMemberDialog, getProjectPower]);
+
 	/** 获取表格数据 */
 	useEffect(() => {
 		if (!addMemberDialog) return;
 		const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
-		http
-			.get<IResponse<any>>("/cpp/project/listusers", {
-				params: { id: projectInfo?.id || "" },
-			})
-			.then((res) => {
-				setTableData(res?.data);
-			});
-	}, [currentProjectStore?.currentProjectInfo, http, addMemberDialog]);
+		getProjectUsersList({ id: projectInfo?.id || "" });
+	}, [
+		currentProjectStore?.currentProjectInfo,
+		addMemberDialog,
+		getProjectUsersList,
+	]);
 
 	const onClose = (event: any = {}, reason: any = "other") => {
 		// 点击弹窗外不关闭弹窗
@@ -124,19 +149,7 @@ const AddMember = observer((props: IProps) => {
 			return checkData.includes(item?.username);
 		});
 		if (params.length) {
-			http
-				.put<IResponse<any>>(
-					`/cpp/project/updatemember?id=${projectInfo?.id || ""}`,
-					params
-				)
-				.then((res) => {
-					const { errorCode } = res;
-					if (errorCode === 0) {
-						Message.success("新增成功！");
-						getTableList();
-						setAddMemberDialog(false);
-					}
-				});
+			saveProjectUser(projectInfo?.id || "", params);
 		} else {
 			Message.info("请先选择项目成员！");
 		}
@@ -160,9 +173,12 @@ const AddMember = observer((props: IProps) => {
 						placeholder="搜索项目成员"
 						sx={{ mb: 2 }}
 					/>
-					<div style={{ overflowY: "scroll", maxHeight: 400 }}>
+					<div style={{ overflow: "overlay", maxHeight: 400 }}>
 						<MyTable
-							tableContainerStyle={{height: 346}}
+							noDataText={
+								projectMember ? `暂无 "${projectMember}" 搜索结果` : undefined
+							}
+							tableContainerStyle={{ height: 346 }}
 							checkboxData={(val: string[]) => setCheckData(val)}
 							param="username"
 							disabledParam={"enabled"}

src/views/Project/ProjectSetting/index.tsx

@@ -39,7 +39,9 @@ const ProjectSetting = observer(() => {
 	if (currentProjectStore.currentProjectInfo.name) {
 		return (
 			<div style={{ padding: "28px 24px 24px" }}>
-				<div style={{ display: "flex", alignItems: "center" }}>
+				<div
+					style={{ display: "flex", alignItems: "center", marginBottom: "3px" }}
+				>
 					<span
 						style={{
 							fontSize: "18px",

src/views/Project/ProjectSubmitWork/ConfigForm/index.module.css

@@ -2,7 +2,7 @@
 	position: relative;
 }
 .templateDescBox {
-	margin-bottom: 40px;
+	margin-bottom: 24px;
 }
 .templateDescTitle {
 	font-size: 16px;
@@ -81,11 +81,10 @@
 }
 
 .taskConfigBox {
-	padding: 16px 24px 4px;
 }
 .flowTitle {
 	line-height: 16px;
-	margin: 3px 0 27px;
+	margin: 3px 0 25px;
 	color: rgba(19, 112, 255, 1);
 	font-size: 14px;
 	font-weight: 600;
@@ -118,3 +117,13 @@
 	color: rgba(138, 144, 153, 1);
 	margin-left: 16px;
 }
+.bacthConfigBox {
+	padding: 16px 24px 4px;
+}
+.flowConfigBox {
+	border-bottom: 1px solid rgba(235, 237, 240, 1);
+	padding: 24px 24px 12px;
+}
+.flowConfigBox:nth-last-child(1) {
+	border-bottom: none;
+}

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

@@ -189,10 +189,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 		setParameter(e.target.value, taskId, parameterName);
 	};
 
-	const randerParameters = (
-		parameters: Array<IParameter>,
-		taskId: string,
-	) => {
+	const randerParameters = (parameters: Array<IParameter>, taskId: string) => {
 		return parameters
 			.filter((parameter) => parameter.hidden === false)
 			.map((parameter, parameterIndex) => {
@@ -213,7 +210,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 							</span>
 						</div>
 						<MyTooltip
-							title={parameter.description || parameter.name}
+							title={parameter.description}
 							placement="right"
 						>
 							<div className={styles.parameterContent}>
@@ -495,9 +492,15 @@ const ConfigForm = (props: ConfigFormProps) => {
 							/>
 						</div>
 						<div className={styles.taskConfigBox}>
+							{task.parameters.filter(
+								(parameter) => !parameter?.thrown && !parameter.hidden
+							).length !== 0 && (
+								<div className={styles.bacthConfigBox}>
 									{randerParameters(
 										task.parameters.filter((parameter) => !parameter?.thrown),
-								task.id,
+										task.id
+									)}
+								</div>
 							)}
 							{task.flows.map((flow) => {
 								if (
@@ -508,7 +511,11 @@ const ConfigForm = (props: ConfigFormProps) => {
 									return null;
 								}
 								return (
-									<div className={styles.flowConfigBox} key={flow.id} id={`point${flow.id}`}>
+									<div
+										className={styles.flowConfigBox}
+										key={flow.id}
+										id={`point${flow.id}`}
+									>
 										<div className={styles.flowTitle}>
 											{flow.title}
 											{flow.description && (
@@ -521,10 +528,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 												</MyTooltip>
 											)}
 										</div>
-										{randerParameters(
-											flow.parameters,
-											flow.id,
-										)}
+										{randerParameters(flow.parameters, flow.id)}
 									</div>
 								);
 							})}

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

@@ -6,7 +6,7 @@
 	width: 100vw;
 	height: 100vh;
 	background-color: RGBA(247, 248, 250, 1);
-	overflow-y: auto;
+	overflow-y: overlay;
 }
 .swHeader {
 	z-index: 1001;
@@ -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,9 +25,23 @@
 	justify-content: flex-start;
 	align-items: center;
 }
+.goBackIcon {
+	cursor: pointer;
+}
+.goBackIconBox {
+	width: 32px;
+	height: 32px;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.goBackIconBox:hover {
+	background-color: rgb(240, 242, 245);
+}
 .swTemplateTitle {
-	margin: 0 19px 0 8px;
-	line-height: 22px;
+	margin: 0 19px 0 3px;
+	line-height: 20px;
 	font-size: 14px;
 	color: rgba(30, 38, 51, 1);
 	font-weight: 700;
@@ -51,11 +65,11 @@
 }
 .swFormBox {
 	background-color: #fff;
-	border-right: 1xp solid rgba(235, 237, 240, 1);
+	border-right: 1px solid rgba(235, 237, 240, 1);
 	width: 608px;
-	overflow-y: scroll;
+	overflow-y: overlay;
 	box-sizing: border-box;
-	padding: 36px;
+	padding: 32px 32px 16px;
 }
 .swFlowBox {
 	flex: 1;
@@ -70,6 +84,7 @@
 	right: 24px;
 	bottom: 24px;
 	padding: 8px;
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
 }
 .fullScreenBox:hover {
 	opacity: 0.6;

src/views/Project/ProjectSubmitWork/index.tsx

@@ -2,14 +2,12 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-17 10:58:02
+ * @LastEditTime: 2022-09-01 14:39:36
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import { toJS } from "mobx";
 import React, { useEffect, useState } from "react";
-import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
-import IconButton from "@mui/material/IconButton";
 import _ from "lodash";
 import { useLocation, useNavigate } from "react-router-dom";
 import moment from "moment";
@@ -28,6 +26,7 @@ import { useMessage } from "@/components/MySnackbar";
 import { useStores } from "@/store";
 import { observer } from "mobx-react-lite";
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
+import goback from "@/assets/project/goback.svg";
 
 import styles from "./index.module.css";
 
@@ -223,6 +222,7 @@ const ProjectSubmitWork = observer(() => {
 				promotedParameters,
 			});
 		} else {
+			handleCancel();
 			Message.error("请完善算子信息后提交任务");
 		}
 	};
@@ -230,12 +230,20 @@ const ProjectSubmitWork = observer(() => {
 	const [popperTitle, setPopperTitle] = useState(
 		"提交前请先确认参数填写无误，确认提交吗？"
 	);
+	const [placement, setPlacement] = useState<
+		"bottom" | "bottom-start" | "bottom-end"
+	>("bottom");
 	const [anchorEl, setAnchorEl] = useState<any>(null);
 	const handleCancel = () => {
 		setAnchorEl(null);
 	};
 
-	const handleShowPopper = (e: any, title: string) => {
+	const handleShowPopper = (
+		e: any,
+		title: string,
+		placementParams: "bottom" | "bottom-start" | "bottom-end"
+	) => {
+		setPlacement(placementParams);
 		setPopperTitle(title);
 		setAnchorEl(anchorEl ? null : e.currentTarget);
 	};
@@ -253,24 +261,20 @@ const ProjectSubmitWork = observer(() => {
 			{fullScreenShow ? null : (
 				<div className={styles.swHeader}>
 					<div className={styles.swHeaderLeft}>
-						<IconButton
-							color="primary"
+						<div className={styles.goBackIconBox}>
+							<img
+								className={styles.goBackIcon}
+								src={goback}
+								alt=""
 								onClick={(e: any) =>
-								handleShowPopper(e, "返回将放弃当前页面所有操作，确认返回吗？")
+									handleShowPopper(
+										e,
+										"返回将放弃当前页面所有操作，确认返回吗？",
+										"bottom-end"
+									)
 								}
-							aria-label="upload picture"
-							component="span"
-							size="small"
-						>
-							<ArrowBackIosNewIcon
-								sx={{
-									color: "rgba(194, 198, 204, 1)",
-									width: "14px",
-									height: "14px",
-								}}
 							/>
-						</IconButton>
-
+						</div>
 						<div className={styles.swTemplateTitle}>
 							{templateConfigInfo?.title}
 						</div>
@@ -293,17 +297,16 @@ const ProjectSubmitWork = observer(() => {
 						<div className={styles.swHeaderGoback}></div>
 					</div>
 					<div className={styles.swHeaderRight}>
-						{/* <MyPopconfirm
-							title="提交前请先确认参数填写无误，确认提交吗？"
-							onConfirm={handleSubmitForm}
-						> */}
 						<MyButton
 							text="提交任务"
 							onClick={(e: any) =>
-								handleShowPopper(e, "提交前请先确认参数填写无误，确认提交吗？")
+								handleShowPopper(
+									e,
+									"提交前请先确认参数填写无误，确认提交吗？",
+									"bottom-start"
+								)
 							}
 						></MyButton>
-						{/* </MyPopconfirm> */}
 					</div>
 				</div>
 			)}
@@ -341,6 +344,7 @@ const ProjectSubmitWork = observer(() => {
 				onCancel={handleCancel}
 				onConfirm={handleConfirm}
 				loading={loading}
+				placement={placement}
 			/>
 		</div>
 	);

src/views/Project/ProjectWorkbench/index.tsx

@@ -2,7 +2,7 @@
  * @Author: rocosen
  * @Date: 2022-06-12 10:05:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-30 18:21:04
+ * @LastEditTime: 2022-09-01 11:51:16
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -35,7 +35,7 @@ const ProjectWorkbench = observer(() => {
 				hide: !isPass("PROJECT_WORKBENCH_FLOES"),
 				icon: Template,
 				iconed: TemplateSelect,
-				iconHover: TemplateHover
+				iconHover: TemplateHover,
 			},
 			{
 				label: "任务列表",
@@ -50,9 +50,19 @@ const ProjectWorkbench = observer(() => {
 	}, [isPass]);
 
 	return (
-		<div style={{ padding:'28px 24px 24px' }}>
+		<div style={{ padding: "28px 24px 24px" }}>
 			<div style={{ display: "flex", alignItems: "center" }}>
-				<span style={{ fontSize: "18px", lineHeight: "26px", fontWeight: "600", color: "#1E2633" }}>工作台</span>
+				<span
+					style={{
+						fontSize: "18px",
+						lineHeight: "26px",
+						fontWeight: "600",
+						color: "#1E2633",
+						marginBottom: "3px",
+					}}
+				>
+					工作台
+				</span>
 			</div>
 			<Box sx={{ width: "100%", typography: "body1" }}>
 				<Tabs

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

 /* .headerBox { */
-    /* margin-bottom: 20px; */
+/* margin-bottom: 20px; */
 /* } */
 
 .tabHeader {
@@ -14,22 +14,23 @@
 
 .body {
 	margin-top: 24px;
-    border-top: 1px solid #F0F2F5;
+	border-top: 1px solid #f0f2f5;
 	overflow: hidden;
-    overflow-y: auto;
+	overflow-y: overlay;
 	height: calc(100vh - 325px);
 }
 
 .tabBox {
 	padding: 16px 0px 16px 24px;
+	cursor: pointer;
 	display: flex;
 	align-items: center;
 	width: 100%;
-    border-bottom: 1px solid #F0F2F5;
+	border-bottom: 1px solid #f0f2f5;
 }
 
 .tabBox:hover {
-    background-color: #F5F6F7;
+	background-color: #f5f6f7;
 }
 
 .tabBoxInfo {
@@ -41,13 +42,16 @@
 	display: flex;
 }
 
-
 .tabBoxTitle {
 	font-size: 14px;
 	line-height: 22px;
 	font-weight: 600;
-    color: #1E2633;
+	color: #1e2633;
 	margin-bottom: 8px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	padding-right: 20px;
 }
 
 .tabBoxDesc {
@@ -55,14 +59,14 @@
 	line-height: 20px;
 	white-space: nowrap;
 	font-weight: 400;
-    color: #8A9099;
+	color: #8a9099;
 }
 
 .tabBoxTime {
 	font-size: 12px;
 	line-height: 20px;
 	font-weight: 400;
-    color: #565C66;
+	color: #565c66;
 	margin-left: 8px;
 }
 
@@ -85,7 +89,7 @@
 	font-size: 12px;
 	line-height: 20px;
 	font-weight: 400;
-    color: #1E2633;
+	color: #1e2633;
 	margin: 0px 16px 0px 8px;
 	white-space: nowrap;
 }
@@ -96,6 +100,12 @@
 	justify-content: center;
 }
 
+.jobOperateImgBox:hover {
+	padding: 8px;
+	border-radius: 4px;
+	background-color: #ebedf0;
+}
+
 .tabUpdate {
 	cursor: pointer;
 	width: 32px;
@@ -106,6 +116,12 @@
 }
 
 .tabUpdate:hover {
-    background: #F0F2F5;
+	background: #f0f2f5;
 	border-radius: 4px;
 }
+.pagination {
+	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-08-22 15:33:02
+ * @LastEditTime: 2022-09-06 10:17:18
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -12,6 +12,7 @@ import { useNavigate } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import { TablePagination } from "@mui/material";
+import MyPagination from "@/components/mui/MyPagination";
 
 import MySelect from "@/components/mui/MySelect";
 import SimpleDialog from "./components/simpleDialog";
@@ -40,6 +41,7 @@ import MyProgress from "@/components/mui/MyProgress";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 import MyCircularProgress from "@/components/mui/MyCircularProgress";
 import moment from "moment";
+import MyTooltip from "@/components/mui/MyTooltip";
 
 import styles from "./index.module.css";
 
@@ -87,13 +89,13 @@ const ProjectMembers = observer(() => {
 	const [jobData, setJobData] = useState("");
 	const [openDialog, setOpenDialog] = useState(false);
 	const [dialogType, setDialogType] = useState("del");
+	const [loading, setLoading] = useState(false);
 	// 获取作业列表
-	const { run: getWorkflowJobInfo, loading } = useMyRequest(
-		getWorkflowJobList,
-		{
+	const { run: getWorkflowJobInfo } = useMyRequest(getWorkflowJobList, {
 		onSuccess: (result: any) => {
+			setLoading(false);
 			setJobList(result.data.content);
-				setCount(result.data.totalElements);
+			setCount(result.data.totalPages - 1);
 			timer && clearTimeout(timer as number);
 			timer = null;
 			timer = setTimeout(() => {
@@ -106,8 +108,7 @@ const ProjectMembers = observer(() => {
 				});
 			}, 60000);
 		},
-		}
-	);
+	});
 
 	useEffect(() => {
 		return () => {
@@ -177,11 +178,11 @@ const ProjectMembers = observer(() => {
 		});
 	}, [projectId, getWorkflowJobInfo]);
 
-	const handleChangePage = (event: any, newPage: any) => {
-		setPage(newPage);
+	const handleChangePage = (newPage: any) => {
+		setPage(newPage - 1);
 		getWorkflowJobInfo({
 			projectId: currentProjectStore.currentProjectInfo.id as string,
-			page: newPage,
+			page: newPage - 1,
 			size: size,
 			name: jobName,
 			state: currency === "ALL" ? "" : currency,
@@ -201,6 +202,7 @@ const ProjectMembers = observer(() => {
 	};
 
 	useEffect(() => {
+		setLoading(true);
 		setTimeout(() => {
 			getWorkflowJobInfo({
 				projectId: currentProjectStore.currentProjectInfo.id as string,
@@ -299,11 +301,18 @@ const ProjectMembers = observer(() => {
 		}
 	};
 
+	const handleKeyWordChangeBlur = (e: any) => {
+		setJobName(e.target.value);
+	};
+
 	return (
 		<Box className={styles.headerBox}>
 			<Box className={styles.tabHeader}>
 				<Box sx={{ display: "flex" }}>
-					<SearchInput onKeyUp={handleKeyWordChangeKeyUp} sx={{ width: 340 }} />
+					<SearchInput
+						onKeyUp={handleKeyWordChangeKeyUp}
+						onBlur={handleKeyWordChangeBlur}
+						sx={{ width: 340 }} />
 					{/* <Box className={styles.tabHeaderSelect}>
                         <TextField
                             select
@@ -364,6 +373,7 @@ const ProjectMembers = observer(() => {
 							name: jobName,
 							state: currency === "ALL" ? "" : currency,
 						});
+						setLoading(true);
 					}}
 				>
 					<img alt="" src={onload} />
@@ -371,8 +381,8 @@ const ProjectMembers = observer(() => {
 			</Box>
 
 			<Box className={styles.body} style={{ position: "relative" }}>
-				<MyCircularProgress loading={loading} />
-				{jobList.length === 0 && !loading && (
+				<MyCircularProgress loading={loading}>
+					{jobList.length === 0 && (
 						<Box
 							sx={{
 								display: "flex",
@@ -393,9 +403,14 @@ const ProjectMembers = observer(() => {
 					{jobList.length > 0 &&
 						jobList.map((item: any, key) => {
 							return (
-							<Box className={styles.tabBox} onClick={() => rowClick(item.id)}>
+								<Box
+									className={styles.tabBox}
+									onClick={() => rowClick(item.id)}
+								>
 									<Box className={styles.tabBoxInfo}>
+										<MyTooltip title={item.name}>
 											<div className={styles.tabBoxTitle}>{item.name}</div>
+										</MyTooltip>
 										<Box className={styles.tabBoxDescInfo}>
 											<div
 												className={styles.tabBoxDesc}
@@ -415,7 +430,7 @@ const ProjectMembers = observer(() => {
 									<Box className={styles.tabBoxMiddle}>
 										<img alt="" src={jobCost} />
 										<div className={styles.tabBoxTime}>
-										{item.jobCost ? item.jobCost.toFixed(2) : "--"}
+											{item.jobCost?.toFixed(2)}元
 										</div>
 									</Box>
 									<Box className={styles.tabBoxJobStatus}>
@@ -475,6 +490,7 @@ const ProjectMembers = observer(() => {
 												<img
 													alt=""
 													src={jobDel}
+													className={styles.jobOperateImgBox}
 													style={{ cursor: "pointer" }}
 													onClick={(event) => {
 														event.stopPropagation();
@@ -489,9 +505,13 @@ const ProjectMembers = observer(() => {
 								</Box>
 							);
 						})}
+				</MyCircularProgress>
 			</Box>
+			<div className={styles.pagination}>
+				<MyPagination page={page} pageChange={handleChangePage} count={count} />
+			</div>
 
-			<TablePagination
+			{/* <TablePagination
 				rowsPerPageOptions={[5, 10, 20, 50]}
 				labelRowsPerPage={"每页行数："}
 				ActionsComponent={ActionsComponent}
@@ -501,7 +521,7 @@ const ProjectMembers = observer(() => {
 				page={page}
 				onPageChange={handleChangePage} //
 				onRowsPerPageChange={handleChangeRowsPerPage} //
-			/>
+			/> */}
 
 			<SimpleDialog
 				text={