feat: tab切换按钮样式修改

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

@@ -33,3 +33,11 @@
 	background-color: #fff;
 	box-shadow: 2px 4px 12px 0px rgba(0, 27, 63, 0.06);
 }
+.border {
+	width: 1px;
+	height: 16px;
+	background-color: rgba(209, 214, 222, 1);
+}
+.borderHidden {
+	visibility: hidden;
+}

src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx

@@ -8,6 +8,7 @@
  */
 // 按钮样式的单选组
 import classnames from "classnames";
+import { useMemo } from "react";
 import style from "./index.module.css";
 
 type radioOption = {
@@ -27,21 +28,43 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
 	const { radioOptions, value, handleRadio, RadiosBoxStyle, radioStyle } =
 		props;
 
+	const activeIndex: any = useMemo(() => {
+		let res = 0;
+		radioOptions.forEach((item, index) => {
+			if (item.value === value) {
+				res = index;
+			}
+		});
+		return res;
+	}, [value, radioOptions]);
+
 	return (
 		<div className={style.RadiosBox} style={RadiosBoxStyle}>
-			{radioOptions.map((options) => {
+			{radioOptions.map((options, index) => {
 				return (
-					<div
-						key={options.value}
-						className={classnames({
-							[style.radio]: true,
-							[style.radioActive]: value === options.value,
-						})}
-						onClick={() => handleRadio(options.value)}
-						style={radioStyle}
-					>
-						{options.label}
-					</div>
+					<>
+						<div
+							key={options.value}
+							className={classnames({
+								[style.radio]: true,
+								[style.radioActive]: value === options.value,
+							})}
+							onClick={() => handleRadio(options.value)}
+							style={radioStyle}
+						>
+							{options.label}
+						</div>
+						<div
+							className={classnames({
+								[style.border]: true,
+								[style.borderHidden]: !(
+									index !== radioOptions.length - 1 &&
+									index !== activeIndex &&
+									index !== activeIndex - 1
+								),
+							})}
+						></div>
+					</>
 				);
 			})}
 		</div>