feat: 样式兼容

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

@@ -49,7 +49,7 @@
 }
 .radioActiveBg {
 	box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
-	height: 28px;
+	height: 100%;
 	background-color: #fff;
 	transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 	border-radius: 2px;

src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx

@@ -22,11 +22,18 @@ 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) {
@@ -48,7 +55,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
 
 	return (
 		<div className={style.RadiosBox} style={RadiosBoxStyle}>
-			<div className={style.radioActiveBgBox}>
+			<div className={style.radioActiveBgBox} style={radioActiveBgBoxStyle}>
 				<div
 					className={style.radioActiveBg}
 					style={{

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

@@ -206,7 +206,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 										},
 									]}
 									RadiosBoxStyle={{ width: "132px" }}
-								></RadioGroupOfButtonStyle>
+								/>
 							)}
 							<MyMultipleMenu
 								value={showData}

src/views/Project/ProjectData/index.tsx

@@ -572,7 +572,7 @@ const ProjectData = observer(() => {
 										{ value: "dataset", label: "数据集" },
 									]}
 									handleRadio={setActiveTab}
-								></RadioGroupOfButtonStyle>
+								/>
 								<IconButton
 									aria-label="refreshIcon"
 									size="small"

src/views/Project/ProjectOverview/index.tsx

@@ -29,15 +29,15 @@ const ProjectOverview = observer(() => {
 	// 选择近7天or近15天or近30天
 	const [day, setDay] = useState("7");
 	// 滚轮是否到顶,判断是否显示阴影
-	const [isTop, setIsTop] = useState(true)
+	const [isTop, setIsTop] = useState(true);
 	// 滚动滚轮时监听是否到顶
 	const onscroll = (e: any) => {
 		if (e.target.scrollTop <= 0) {
-			setIsTop(true)
+			setIsTop(true);
 		} else {
-			setIsTop(false)
-		}
+			setIsTop(false);
 		}
+	};
 	// 获取概览基本信息
 	const { run: getOverview, loading } = useMyRequest(getOverviewInfo, {
 		onSuccess: (result: any) => {
@@ -207,7 +207,7 @@ const ProjectOverview = observer(() => {
 										{ value: "30", label: "近30天" },
 									]}
 									handleRadio={setDay}
-								></RadioGroupOfButtonStyle>
+								/>
 							</div>
 							<SearchInput
 								onKeyUp={handleKeyWordChangeKeyUp}

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

@@ -53,16 +53,16 @@ const AddTemplate = (props: IAddTemplateProps) => {
 	const [templateType, setTemplateType] = useState("public");
 
 	// 滚轮是否到顶,判断是否显示阴影
-	const [isTop, setIsTop] = useState(true)
+	const [isTop, setIsTop] = useState(true);
 
 	// 滚动滚轮时监听是否到顶
 	const onscroll = (e: any) => {
 		if (e.target.scrollTop <= 0) {
-			setIsTop(true)
+			setIsTop(true);
 		} else {
-			setIsTop(false)
-		}
+			setIsTop(false);
 		}
+	};
 
 	const handleRadio = (value: string) => {
 		setTemplateType(value);
@@ -144,8 +144,11 @@ const AddTemplate = (props: IAddTemplateProps) => {
 	};
 
 	// 获取模板列表
-	const getAddTemplateListFun = useCallback((newTitle?: string) => {
-		const userName = JSON.parse(localStorage.getItem("userInfo") || "{}")?.name;
+	const getAddTemplateListFun = useCallback(
+		(newTitle?: string) => {
+			const userName = JSON.parse(
+				localStorage.getItem("userInfo") || "{}"
+			)?.name;
 			setSelectTemplateData([]);
 			setAddTemplateList([]);
 			if (templateType === "public") {
@@ -163,20 +166,22 @@ const AddTemplate = (props: IAddTemplateProps) => {
 					keyword: newTitle,
 				});
 			}
-	}, [
+		},
+		[
 			setSelectTemplateData,
 			getAddTemplateList,
 			productId,
 			projectId,
 			templateType,
 			// title,
-	]);
+		]
+	);
 
 	//模板启用切换
 	const templateSwitch = (e: any, id: string) => {
 		if (e.target.checked) {
-			let arr = []
-			arr.push(id)
+			let arr = [];
+			arr.push(id);
 			addTemplate({
 				projectId: projectId as string,
 				workflowSpecIds: arr,
@@ -187,7 +192,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 				workflowSpecId: id,
 			});
 		}
-	}
+	};
 
 	useEffect(() => {
 		getAddTemplateListFun();
@@ -255,7 +260,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 								value={templateType}
 								radioOptions={radioOptions}
 								handleRadio={handleRadio}
-							></RadioGroupOfButtonStyle>
+							/>
 							{/* <MyButton
 							onClick={handleAddTemplate}
 							size={"small"}
@@ -272,7 +277,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 						</Box>
 					</Box>
 				</div>
-				<div className={style.templateBox} onScroll={onscroll} >
+				<div className={style.templateBox} onScroll={onscroll}>
 					{templateType === "public" && addTemplateList.length === 0 && (
 						<Box
 							sx={{
@@ -342,9 +347,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 									<div className={style.templateLiEditBox}>
 										<MySwitch
 											defaultChecked={item.favorited}
-											onChange={(e: any) =>
-												templateSwitch(e, item.id)
-											}
+											onChange={(e: any) => templateSwitch(e, item.id)}
 										></MySwitch>
 									</div>
 

src/views/WorkFlowEdit/index.tsx

@@ -226,7 +226,10 @@ const WorkFlowEdit = observer((props: IProps) => {
 								fontSize: "16px",
 								height: "30px",
 							}}
-						></RadioGroupOfButtonStyle>
+							radioActiveBgBoxStyle={{
+								height: "32px",
+							}}
+						/>
 					</div>
 					{leftContentType === "list" && (
 						<OperatorList