feat: 完成批流切换组件

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/AddEnvironment/index.module.css

@@ -8,7 +8,7 @@
 	display: flex;
 }
 .left {
-	width: 412px;
+	/* width: 412px; */
 	box-sizing: border-box;
 	background-color: rgba(247, 248, 250, 1);
 }

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/AddEnvironment/index.tsx

@@ -7,6 +7,7 @@ import useMyRequest from "@/hooks/useMyRequest";
 import { urlToken } from "@/api/fileserver/raysyncApi";
 import * as tus from "tus-js-client";
 import { useDropzone } from "react-dropzone";
+import SwitchBatchFolw from "@/views/ResourceCenter/components/SwitchBatchFolw";
 import {
 	getPublicEnv,
 	getPublicProject,
@@ -16,11 +17,11 @@ import classNames from "classnames";
 import { getTokenInfo } from "@/utils/util";
 
 type IAddEnvironmentProps = {
-	// addOpen: boolean;
+	setAddopen: any;
 };
 
 const AddEnvironment = (props: IAddEnvironmentProps) => {
-	// const { addOpen } = props;
+	const { setAddopen } = props;
 	let tokenInfo = getTokenInfo();
 	const [publicPrijectId, setPublicPrijectId] = useState("");
 	const [publicZoneId, setPublicZoneId] = useState("");
@@ -154,7 +155,13 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 
 	return (
 		<div className={style.addEnvironment}>
-			<div className={style.left}></div>
+			<div className={style.left}>
+				<SwitchBatchFolw
+					active={taskType}
+					setActive={setTaskType}
+					goBack={() => setAddopen(false)}
+				></SwitchBatchFolw>
+			</div>
 			<div className={style.right}>
 				<div className={style.title}>
 					{taskType === "BATCH" ? "批式环境信息" : "流式环境信息"}

src/views/ResourceCenter/UserResources/UserResourcesEnvironment/index.tsx

@@ -32,11 +32,12 @@ const UserResourcesEnvironment = () => {
 								className="iconfont icon-dianzan"
 							></span>
 						}
+						onClick={() => setAddopen(true)}
 					></MyButton>
 				</div>
 			</div>
 			UserResourcesEnvironment
-			{addOpen && <AddEnvironment></AddEnvironment>}
+			{addOpen && <AddEnvironment setAddopen={setAddopen}></AddEnvironment>}
 		</div>
 	);
 };

src/views/ResourceCenter/UserResources/index.tsx

@@ -35,7 +35,7 @@ const UserResources = () => {
 			<Tabs
 				title="个人资源"
 				tabList={tabList}
-				defaultValue={"USERRESOURCES_TEMPLATE"}
+				defaultValue={"USERRESOURCES_ENVIRONMENT"}
 			/>
 		</div>
 	);

src/views/ResourceCenter/components/SwitchBatchFolw/index.module.css

+.switchBatchFolw {
+	height: 100vh;
+	width: 50vh;
+	background-color: rgba(247, 248, 250, 1);
+	display: flex;
+	flex-direction: column;
+}
+.goBackBox {
+	box-sizing: border-box;
+	height: 110px;
+	padding: 64px 0 14px 25%;
+	line-height: 32px;
+	font-size: 18px;
+	color: #8a9099;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+.goBackIcon {
+	width: 32px;
+	height: 32px;
+	background-color: #fff;
+	border-radius: 4px;
+	margin-right: 12px;
+	box-shadow: 0px 2px 5px 0px rgba(3, 47, 105, 0.09);
+	cursor: pointer;
+}
+.goBackText {
+	line-height: 32px;
+	font-size: 18px;
+	color: #8a9099;
+}
+.switchBox {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: flex-end;
+	position: relative;
+}
+.switchItem {
+	width: 100%;
+	position: relative;
+	padding-right: 44px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+.activeSwitchItem {
+	padding-right: 34px;
+}
+.itemImg {
+	width: 58%;
+	cursor: pointer;
+}
+.itemImg:hover {
+	box-shadow: 0px 8px 20px -6px rgba(3, 47, 105, 0.14);
+}
+.activeImg {
+	width: 64%;
+	box-shadow: 0px 12px 30px -8px rgba(3, 47, 105, 0.18);
+}
+.activeImg:hover {
+	box-shadow: 0px 12px 30px -8px rgba(3, 47, 105, 0.18);
+}
+.arrow {
+	width: 0px;
+	height: 0px;
+	border-top: 20px solid transparent;
+	border-bottom: 20px solid transparent;
+	border-right: 25px solid #fff;
+	position: absolute;
+	right: 0;
+	top: 50%;
+	transform: translateY(-50%);
+}

src/views/ResourceCenter/components/SwitchBatchFolw/index.tsx

+import batchImg from "@/assets/resourceCenter/batchImg.svg";
+import flowImg from "@/assets/resourceCenter/flowImg.svg";
+import classNames from "classnames";
+import goback from "@/assets/project/goback.svg";
+import style from "./index.module.css";
+
+type ISwitchBatchFolwProps = {
+	active: "BATCH" | "FLOW";
+	setActive: any;
+	goBack: any;
+};
+
+const SwitchBatchFolw = (props: ISwitchBatchFolwProps) => {
+	const { active, setActive, goBack } = props;
+	return (
+		<div className={style.switchBatchFolw}>
+			<div className={style.goBackBox}>
+				<img
+					className={style.goBackIcon}
+					src={goback}
+					alt=""
+					onClick={() => goBack()}
+				/>
+				<span className={style.goBackText}>返回</span>
+			</div>
+			<div className={style.switchBox}>
+				<div
+					className={classNames({
+						[style.switchItem]: true,
+						[style.activeSwitchItem]: active === "BATCH",
+					})}
+				>
+					<img
+						onClick={() => setActive("BATCH")}
+						className={classNames({
+							[style.itemImg]: true,
+							[style.activeImg]: active === "BATCH",
+						})}
+						src={batchImg}
+						alt=""
+					/>
+					{active === "BATCH" && <div className={style.arrow}></div>}
+				</div>
+				<div
+					className={classNames({
+						[style.switchItem]: true,
+						[style.activeSwitchItem]: active === "FLOW",
+					})}
+				>
+					<img
+						onClick={() => setActive("FLOW")}
+						className={classNames({
+							[style.itemImg]: true,
+							[style.activeImg]: active === "FLOW",
+						})}
+						src={flowImg}
+						alt=""
+					/>
+					{active === "FLOW" && <div className={style.arrow}></div>}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default SwitchBatchFolw;