Merge branch 'feat-20220801' into 'release'

cn-Feat 20220801

See merge request !95

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

 .RadiosBox {
+	position: relative;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -29,8 +30,6 @@
 
 .radioActive {
 	color: #1370ff;
-	background-color: #fff;
-	box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
 	position: relative;
 }
 .border {
@@ -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: 28px;
+	background-color: #fff;
+	transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+	border-radius: 2px;
+	width: 50%;
+	transform: translateX(0px);
+}

src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx

@@ -28,6 +28,14 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
 	const { radioOptions, value, handleRadio, RadiosBoxStyle, radioStyle } =
 		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;
 		radioOptions.forEach((item, index) => {
@@ -40,6 +48,16 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
 
 	return (
 		<div className={style.RadiosBox} style={RadiosBoxStyle}>
+			<div className={style.radioActiveBgBox}>
+				<div
+					className={style.radioActiveBg}
+					style={{
+						width: `${radioWidth}%`,
+						transform: `translateX(${activeIndex * 100}%)`,
+					}}
+				></div>
+			</div>
+
 			{radioOptions.map((options, index) => {
 				return (
 					<>

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/views/Project/ProjectJobDetail/index.module.css

@@ -151,8 +151,6 @@
 }
 .taskInfoValueIcon {
 	margin-right: 9px;
-	position: relative;
-	top: 3px;
 }
 .tabs {
 	display: flex;

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

@@ -16,7 +16,7 @@ import Dialog from "@/components/mui/MyDialog";
 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 {
@@ -67,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}

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

@@ -202,6 +202,7 @@ const ProjectMembers = observer(() => {
 	};
 
 	useEffect(() => {
+		setLoading(true);
 		setTimeout(() => {
 			getWorkflowJobInfo({
 				projectId: currentProjectStore.currentProjectInfo.id as string,
@@ -297,15 +298,21 @@ const ProjectMembers = observer(() => {
 	const handleKeyWordChangeKeyUp = (e: any) => {
 		if (e.keyCode === 13) {
 			setJobName(e.target.value);
-			setLoading(true);
 		}
 	};
 
+	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
@@ -375,7 +382,7 @@ const ProjectMembers = observer(() => {
 
 			<Box className={styles.body} style={{ position: "relative" }}>
 				<MyCircularProgress loading={loading}>
-					{jobList.length === 0 && !loading && (
+					{jobList.length === 0 && (
 						<Box
 							sx={{
 								display: "flex",