Merge branch 'feat-20221012-environment' into 'release'

cn-Feat 20221012 environment

See merge request !147

src/api/resourceCenter.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-19 17:09:23
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-19 21:14:35
+ * @LastEditTime: 2022-10-20 09:26:12
  * @FilePath: /bkunyun/src/api/resourceCenter.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -76,11 +76,11 @@ const deleteActorenv = (params: {id: string}) => {
 };
 
 // 获取算子列表
-const getOperatorList = (data: IOperatorListParams) => {
+const getOperatorList = (params: IOperatorListParams) => {
   return request({
     url: Api.API_OPERATOR_LIST,
     method: "get",
-    data
+    params
   });
 }
 

src/assets/project/USERRESOURCES.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>编组 69备份 2</title>
+    <defs>
+        <path d="M14.2058659,3.5763545 L8.20586587,0.376450501 C7.76469814,0.141168108 7.23530186,0.141168108 6.79413413,0.376450501 L0.794134134,3.5763545 C0.305329737,3.83704236 1.54202278e-16,4.34591807 0,4.89989271 L0,11.0999285 C-8.68266642e-16,11.6538919 0.305317533,12.1627593 0.794106656,12.423452 L6.79410666,15.623516 C7.23528896,15.858818 7.76471104,15.858818 8.20589334,15.623516 L14.2058933,12.423452 C14.6946825,12.1627593 15,11.6538919 15,11.0999285 L15,4.89989271 C15,4.34591807 14.6946703,3.83704236 14.2058659,3.5763545 Z" id="path-1"></path>
+    </defs>
+    <g id="新" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-69备份-2">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <g id="编组-66" transform="translate(0.500000, 0.000000)">
+                <g id="矩形">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <path stroke="#8A9099" stroke-width="1.5" d="M7.14706707,1.0382196 C7.36765093,0.920578407 7.63234907,0.920578407 7.85293293,1.0382196 L7.85293293,1.0382196 L13.8529329,4.2381236 L14.25,11.0999285 L7.85294667,14.9617542 C7.63235552,15.0794052 7.36764448,15.0794052 7.14705333,14.9617542 L7.14705333,14.9617542 L1.14705333,11.7616902 L0.75,4.89989271 Z"></path>
+                    <path d="M7.5,11.25 C9.78208033,11.25 11.543715,11.9030473 12.75,13.2731396 L12.75,13.2731396 L12.75,18.6744339 L2.25,18.6744339 L2.25,13.2731396 C3.45628505,11.9030473 5.21791967,11.25 7.5,11.25 Z" stroke="#8A9099" stroke-width="1.5" mask="url(#mask-2)"></path>
+                </g>
+                <circle id="椭圆形" stroke="#8A9099" stroke-width="1.5" cx="7.5" cy="6.8" r="2.25"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/project/USERRESOURCES_BLUE.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>编组 69备份</title>
+    <defs>
+        <path d="M14.2058659,3.5763545 L8.20586587,0.376450501 C7.76469814,0.141168108 7.23530186,0.141168108 6.79413413,0.376450501 L0.794134134,3.5763545 C0.305329737,3.83704236 1.54202278e-16,4.34591807 0,4.89989271 L0,11.0999285 C-8.68266642e-16,11.6538919 0.305317533,12.1627593 0.794106656,12.423452 L6.79410666,15.623516 C7.23528896,15.858818 7.76471104,15.858818 8.20589334,15.623516 L14.2058933,12.423452 C14.6946825,12.1627593 15,11.6538919 15,11.0999285 L15,4.89989271 C15,4.34591807 14.6946703,3.83704236 14.2058659,3.5763545 Z" id="path-1"></path>
+    </defs>
+    <g id="新" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-69备份">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <g id="编组-66" transform="translate(0.500000, 0.000000)">
+                <g id="矩形">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <path stroke="#1370FF" stroke-width="1.5" d="M7.14706707,1.0382196 C7.36765093,0.920578407 7.63234907,0.920578407 7.85293293,1.0382196 L7.85293293,1.0382196 L13.8529329,4.2381236 L14.25,11.0999285 L7.85294667,14.9617542 C7.63235552,15.0794052 7.36764448,15.0794052 7.14705333,14.9617542 L7.14705333,14.9617542 L1.14705333,11.7616902 L0.75,4.89989271 Z"></path>
+                    <path d="M7.5,11.25 C9.78208033,11.25 11.543715,11.9030473 12.75,13.2731396 L12.75,13.2731396 L12.75,18.6744339 L2.25,18.6744339 L2.25,13.2731396 C3.45628505,11.9030473 5.21791967,11.25 7.5,11.25 Z" stroke="#1370FF" stroke-width="1.5" mask="url(#mask-2)"></path>
+                </g>
+                <circle id="椭圆形" stroke="#1370FF" stroke-width="1.5" cx="7.5" cy="6.8" r="2.25"></circle>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/views/MenuLayout/index.tsx

@@ -100,7 +100,7 @@ const MenuLayout = observer(() => {
 										src={
 											routerIcon(
 												item.id || "",
-												`/v3${item.path}` === pathname
+												pathname.indexOf(`/v3${item.path}`) !== -1
 											) || undefined
 										}
 										alt=""

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

@@ -33,23 +33,22 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 	const { setAddopen } = props;
 	const Message = useMessage();
 	let tokenInfo = getTokenInfo();
-	const [hpczoneList, setHpczoneList] = useState<Array<any>>([]);
-	const [publicProjectId, setPublicProjectId] = useState("");
-	const [publicZoneId, setPublicZoneId] = useState("");
-	const [computeType, setComputeType] = useState("");
-	const [fileToken, setFileToken] = useState("");
-	const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH");
-	const [name, setName] = useState("");
-	const [desc, setDesc] = useState("");
-	const [baseEnvId, setBaseEnvId] = useState("");
-	const [filePaths, setFilePaths] = useState<Array<string>>([]);
-	const [isUploading, setIsUploading] = useState(false);
-	const [fileName, setFileName] = useState("");
-	// const [bashScript, setBashScript] = useState('');
-	const [envList, setEnvList] = useState<Array<any>>([]);
-	const [progress, setProgress] = useState("0%");
-	const [code, setCode] = useState("");
-	const [upload, setUpload] = useState<any>(() => {});
+	const [hpczoneList, setHpczoneList] = useState<Array<any>>([]); // 计算区列表 通过计算区列表和计算区id拿fileServerEndPoint
+	const [publicProjectId, setPublicProjectId] = useState(""); // 公共项目id 环境压缩包临时存放在公共项目下
+	const [publicZoneId, setPublicZoneId] = useState(""); // 公共项目计算区id
+	const [computeType, setComputeType] = useState(""); // 基础环境是cpu 还是 gpu
+	const [fileToken, setFileToken] = useState(""); // 访问公共项目的fileToken
+	const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH"); // 环境类型 批式环境还是流式环境
+	const [name, setName] = useState(""); // 环境名称
+	const [desc, setDesc] = useState(""); // 环境描述
+	const [baseEnvId, setBaseEnvId] = useState(""); // 基础环境id
+	const [filePaths, setFilePaths] = useState<Array<string>>([]); // 环境压缩包上传后的路径集合（目前只有一个）
+	const [isUploading, setIsUploading] = useState(false); // 保存接口loading
+	const [fileName, setFileName] = useState(""); // 环境压缩包文件名
+	const [envList, setEnvList] = useState<Array<any>>([]); // 基础环境列表   和taskType环境类型有关
+	const [progress, setProgress] = useState("0%"); // 上传压缩包进度
+	const [code, setCode] = useState(""); // 脚本内容
+	const [upload, setUpload] = useState<any>(() => {}); // 上传压缩包实例   用于暂停（取消上传）upload.abort(true);
 	const [nameHelper, setNameHelper] = useState({
 		error: false,
 		text: "30字符以内，仅限字母、数字、中文",
@@ -370,7 +369,16 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 						<div className={style.label}>
 							上传环境压缩包<span className={style.zipText}>（.zip）</span>
 							<span className={style.required}>*</span>
-							<span className={style.download}>下载模板</span>
+							<span
+								className={style.download}
+								onClick={() =>
+									window.open(
+										"https://projectsif.oss-cn-beijing.aliyuncs.com/build_env_template.zip"
+									)
+								}
+							>
+								下载模板
+							</span>
 						</div>
 						<div className={style.formItem}>
 							{filePaths.length === 0 && !isUploading && (

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

+.seeEnv {
+	position: relative;
+}
 .titleBox {
 	padding: 14px 24px;
 	display: flex;
@@ -8,10 +11,6 @@
 .goBackIcon {
 	width: 22px;
 	height: 22px;
-	/* background-color: #fff; */
-	/* border-radius: 4px; */
-	/* margin-right: 12px; */
-	/* box-shadow: 0px 2px 5px 0px rgba(3, 47, 105, 0.09); */
 	cursor: pointer;
 }
 .title {

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

 import style from "./index.module.css";
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import LogView from "@/views/ResourceCenter/components/LogView";
 import { useNavigate } from "react-router-dom";
 import BasicInfo, {
@@ -9,6 +9,7 @@ import { getActorenvDetail } from "@/api/resourceCenter";
 import useMyRequest from "@/hooks/useMyRequest";
 import goback from "@/assets/project/goback.svg";
 import { useLocation } from "react-router-dom";
+import MyCircularProgress from "@/components/mui/MyCircularProgress";
 import jobFail from "@/assets/project/jobFail.svg";
 import jobRun from "@/assets/project/jobRun.svg";
 import jobSue from "@/assets/project/jobSue.svg";
@@ -18,8 +19,34 @@ const SeeEnv = () => {
 	const location = useLocation();
 	const [id, setId] = useState("");
 	const [info, setInfo] = useState<any>({});
-	const [infoListTop, setInfoListTop] = useState<Array<IInfoItem>>([]);
-	const [infoListBot, setInfoListBot] = useState<Array<IInfoItem>>([]);
+	const [infoListTop, setInfoListTop] = useState<Array<IInfoItem>>([
+		{
+			label: "构建状态",
+			value: "",
+		},
+		{
+			label: "创建时间",
+			value: "",
+		},
+		{
+			label: "构建时长",
+			value: "",
+		},
+		{
+			label: "构建成本",
+			value: "",
+		},
+		{
+			label: "基础环境",
+			value: "",
+		},
+	]);
+	const [infoListBot, setInfoListBot] = useState<Array<IInfoItem>>([
+		{
+			label: "描述",
+			value: "",
+		},
+	]);
 	const [logs, setLogs] = useState<Array<any>>([]);
 
 	const getStatus = (item: any) => {
@@ -58,7 +85,6 @@ const SeeEnv = () => {
 
 	const { run, loading } = useMyRequest(getActorenvDetail, {
 		onSuccess: (res) => {
-			console.log(res);
 			setInfo(res.data);
 			let data = res.data;
 			setInfoListTop([
@@ -112,6 +138,7 @@ const SeeEnv = () => {
 
 	return (
 		<div className={style.seeEnv}>
+			<MyCircularProgress loading={loading} />
 			<div className={style.titleBox}>
 				<img
 					className={style.goBackIcon}
@@ -134,7 +161,7 @@ const SeeEnv = () => {
 			<div className={style.logsBox}>
 				<div className={style.logsTitle}>日志</div>
 				<div className={style.LogViewBox}>
-					<LogView logs={logs}></LogView>
+					{!loading && <LogView logs={logs}></LogView>}
 				</div>
 			</div>
 		</div>

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

@@ -20,7 +20,7 @@ const UserResourcesEnvironment = () => {
 	const navigate = useNavigate();
 	const [addOpen, setAddopen] = useState(false);
 	const [title, setTitle] = useState("");
-	const [type, setType] = useState<"BATCH" | "FLOW" | "">("");
+	const [type, setType] = useState<"BATCH" | "FLOW" | "ALL">("ALL");
 	const [list, setList] = useState([]);
 	const [page, setPage] = useState(0);
 	const [count, setCount] = useState(0);
@@ -54,7 +54,7 @@ const UserResourcesEnvironment = () => {
 			width: 140,
 		},
 	];
-	const { run: getList } = useMyRequest(getActorenvList, {
+	const { run: getList, loading } = useMyRequest(getActorenvList, {
 		onSuccess: (res) => {
 			setList(res.data.content);
 			setCount(res.data.totalPages - 1);
@@ -72,7 +72,7 @@ const UserResourcesEnvironment = () => {
 				page,
 				size,
 				title,
-				type,
+				type: type === "ALL" ? "" : type,
 			});
 		}
 	}, [getList, page, size, title, type, addOpen, deleteOpen]);
@@ -207,6 +207,10 @@ const UserResourcesEnvironment = () => {
 							title="环境类型"
 							isTitle={true}
 							options={[
+								{
+									label: "全部",
+									value: "ALL",
+								},
 								{
 									label: "批式",
 									value: "BATCH",
@@ -253,6 +257,7 @@ const UserResourcesEnvironment = () => {
 					nodataText="暂无应用环境"
 					paginationType="complex"
 					totalElements={totalElements}
+					loading={loading}
 				></MyTable>
 			</div>
 			{addOpen && <AddEnvironment setAddopen={setAddopen}></AddEnvironment>}

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.module.css

 .addOperatorBox {
+	z-index: 2;
 	position: fixed;
 	top: 0;
 	left: 0;

src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-18 16:12:55
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-19 21:27:03
+ * @LastEditTime: 2022-10-20 11:59:34
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -25,13 +25,14 @@ import FormItemBox from "@/components/mui/FormItemBox";
 import { useStores } from "@/store";
 
 interface IAddOperator {
-	setAddOpen: (val: boolean) => void;
+	pageType: string;
+	setPageType: (val: string) => void;
 }
 
 type IBuildType = "ENVIRONMENT" | "OPERATOR";
 
 const AddOperator = observer((props: IAddOperator) => {
-	const { setAddOpen } = props;
+	const { setPageType } = props;
 
 	/** 创建类型 BATCH - 批算子;  FLOW - 流算子*/
 	const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH");
@@ -70,14 +71,18 @@ const AddOperator = observer((props: IAddOperator) => {
 				<SwitchBatchFolw
 					active={taskType}
 					setActive={setTaskType}
-					goBack={() => setAddOpen(false)}
+					goBack={() => setPageType("")}
 				></SwitchBatchFolw>
 			</div>
 			<div className={style.right}>
 				<div className={style.title}>
 					{taskType === "BATCH" ? "批式算子信息" : "流式算子信息"}
 				</div>
-				<div style={{ paddingBottom: "20px" }}>
+				<div
+					style={{
+						paddingBottom: batchBuildType === "ENVIRONMENT" ? "20px" : "2px",
+					}}
+				>
 					<RadioGroupOfButtonStyle
 						RadiosBoxStyle={{ width: 236 }}
 						value={batchBuildType}
@@ -95,7 +100,6 @@ const AddOperator = observer((props: IAddOperator) => {
 						<FormItemBox
 							label="算子名称"
 							labelClassName={style.labelClassName}
-							className={style.operatorFormItem}
 							itemFlex="column"
 							require
 						>
@@ -116,7 +120,9 @@ const AddOperator = observer((props: IAddOperator) => {
 						<FormItemBox
 							label="所属产品"
 							labelClassName={style.labelClassName}
-							className={style.operatorFormItem}
+							className={classNames({
+								[style.operatorFormItem]: batchBuildType === "ENVIRONMENT",
+							})}
 							itemFlex="column"
 							require
 						>
@@ -143,7 +149,6 @@ const AddOperator = observer((props: IAddOperator) => {
 							<FormItemBox
 								label="描述"
 								labelClassName={style.labelClassName}
-								className={style.operatorFormItem}
 								itemFlex="column"
 							>
 								<MyInput multiline rows={4} placeholder="请输入算子描述" />

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorCard/index.module.css

@@ -15,10 +15,20 @@
 .itemHeaderBox {
 	display: flex;
 	justify-content: space-between;
-	align-items: center;
 	margin-bottom: 20px;
 }
 
+.startTitleBox {
+	width: 36px;
+	height: 36px;
+	border-radius: 4px;
+	background: #a657f4;
+	color: #fff;
+	font-size: 18px;
+	font-weight: 600;
+	text-align: center;
+	line-height: 36px;
+}
 .itemContentBox {
 	display: flex;
 	flex-wrap: wrap;
@@ -30,17 +40,26 @@
 	color: #1e2633;
 }
 
-.titleBox {
-	display: block;
-	font-size: 16px;
-	color: #1e2633;
-}
 .operatorTypeBox {
 	display: block;
 	color: #8a9099;
 	font-size: 12px;
 }
 
+.operationBox {
+	display: inline-block;
+	width: 24px;
+	height: 24px;
+	text-align: center;
+	line-height: 24px;
+	cursor: pointer;
+}
+
+.operationBox:hover {
+	background-color: #ebedf0;
+	border-radius: 2px;
+}
+
 .infoBox {
 	width: 50%;
 	font-weight: 400;

src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorCard/index.tsx

@@ -2,45 +2,79 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-19 21:08:31
+ * @LastEditTime: 2022-10-20 11:39:55
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
 import styles from "./index.module.css";
-import { IOperatorInfo } from "../../interface";
+import { IOperatorInfo, operatorType } from "../../interface";
+import { observer } from "mobx-react";
+import { useStores } from "@/store";
+import { useMemo } from "react";
+import MyMenu from "@/components/mui/MyMenu";
 
 interface IProps {
 	operatorInfo: IOperatorInfo;
+	setPageType: (val: string) => void;
 }
 
-const OperatorCard = (props: IProps) => {
+const OperatorCard = observer((props: IProps) => {
 	const {
-		operatorInfo: { title = "", type, version },
+		operatorInfo: { title = "", type, version, productId, createTime },
+		setPageType,
 	} = props;
+	/** 产品store */
+	const { productListStore } = useStores();
+
+	const productText = useMemo(() => {
+		const result = productListStore.productList?.filter((item) => {
+			return item.value === productId;
+		});
+		return result?.length ? result[0].label : "";
+	}, [productListStore.productList, productId]);
+
+	const onClickOperation = (val: string) => {
+		if (val === "upgrade") {
+			setPageType("edit");
+		}
+	};
 
 	return (
 		<div className={styles.itemBox}>
 			<div className={styles.itemHeaderBox}>
-				<img alt="" style={{ width: 36, height: 36 }} />
-				<div>
+				<div className={styles.startTitleBox}>{title?.slice(0, 1)}</div>
+				<div style={{ flex: 1, marginLeft: 12 }}>
 					<b className={styles.titleBox}>{title}</b>
-					<span className={styles.operatorTypeBox}>批算子</span>
+					<span className={styles.operatorTypeBox}>
+						{operatorType[type] || ""}
+					</span>
 				</div>
+				<MyMenu
+					value=""
+					options={[{ label: "升级", value: "upgrade" }]}
+					hasTriangle={false}
+					setValue={onClickOperation}
+					sx={{
+						zIndex: 1601,
+					}}
+				>
+					<span className={styles.operationBox}>d</span>
+				</MyMenu>
 			</div>
 			<div className={styles.itemContentBox}>
 				<p className={styles.infoBox}>
-					所属产品：<span>{type}</span>
+					所属产品：<span>{productText}</span>
 				</p>
 				<p className={styles.infoBox}>
 					算子版本：<span>{`V${version}`}</span>
 				</p>
 				<p className={styles.infoBox}>
-					创建时间：<span>2022-10-11</span>
+					创建时间：<span>{createTime}</span>
 				</p>
 			</div>
 		</div>
 	);
-};
+});
 
 export default OperatorCard;

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

@@ -2,13 +2,14 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-19 21:11:50
+ * @LastEditTime: 2022-10-20 11:30:10
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 // 应用环境
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
+import _ from "lodash";
 
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 import MySelect from "@/components/mui/MySelect";
@@ -23,28 +24,47 @@ import useMyRequest from "@/hooks/useMyRequest";
 import { IOperatorInfo } from "./interface";
 
 const WorkflowOperator = observer(() => {
-	const [addOpen, setAddOpen] = useState<boolean>(false);
+	const [pageType, setPageType] = useState<string>("");
 	/** 产品store */
 	const { productListStore } = useStores();
 	/**  算子列表参数 */
 	const [searchParams, setSearchParams] = useState<IOperatorListParams>({
 		keyword: "",
-		productId: "",
-		type: "",
+		productId: "all",
+		type: "all",
 	});
 
 	const [list, setList] = useState<IOperatorInfo[]>();
 
 	const { run: getList } = useMyRequest(getOperatorList, {
+		// refreshDeps: [],
 		onSuccess: (res) => {
 			console.log(res);
 			setList(res?.data);
 		},
 	});
 
+	const newGetList = useCallback(() => {
+		const params = _.cloneDeep(searchParams);
+		if (params.productId === "all") {
+			params.productId = "";
+		}
+		if (params.type === "all") {
+			params.type = "";
+		}
+		getList(params);
+	}, [getList, searchParams]);
+
+	// 按回车搜索
+	const handleKeyWordChangeKeyUp = (e: any) => {
+		if (e.keyCode === 13) {
+			newGetList();
+		}
+	};
+
 	useEffect(() => {
-		getList();
-	}, []);
+		newGetList();
+	}, [searchParams.productId, searchParams.type]);
 
 	return (
 		<>
@@ -55,6 +75,7 @@ const WorkflowOperator = observer(() => {
 							sx={{ width: 340, marginRight: "16px" }}
 							placeholder="输入关键词搜索"
 							value={searchParams.keyword}
+							onKeyUp={handleKeyWordChangeKeyUp}
 							onChange={(e) => {
 								setSearchParams({ ...searchParams, keyword: e.target.value });
 							}}
@@ -62,8 +83,13 @@ const WorkflowOperator = observer(() => {
 						<MySelect
 							title="所属产品"
 							isTitle={true}
-							options={productListStore?.productList || []}
-							value={searchParams.keyword}
+							options={
+								[
+									{ label: "全部", value: "all" },
+									...productListStore?.productList,
+								] || []
+							}
+							value={searchParams.productId}
 							onChange={(e) => {
 								setSearchParams({ ...searchParams, productId: e });
 							}}
@@ -73,11 +99,12 @@ const WorkflowOperator = observer(() => {
 						<MySelect
 							title="环境类型"
 							isTitle={true}
-							value={searchParams.keyword}
+							value={searchParams.type}
 							onChange={(e) => {
 								setSearchParams({ ...searchParams, type: e });
 							}}
 							options={[
+								{ label: "全部", value: "all" },
 								{
 									label: "批式",
 									value: "BATCH",
@@ -98,16 +125,20 @@ const WorkflowOperator = observer(() => {
 								className="iconfont icon-dianzan"
 							></span>
 						}
-						onClick={() => setAddOpen(true)}
+						onClick={() => setPageType("add")}
 					></MyButton>
 				</div>
 				<div className={styles.contentBox}>
 					{list?.map((item) => {
-						return <OperatorCard operatorInfo={item} />;
+						return (
+							<OperatorCard operatorInfo={item} setPageType={setPageType} />
+						);
 					})}
 				</div>
 			</div>
-			{addOpen && <AddOperator setAddOpen={setAddOpen} />}
+			{pageType && (
+				<AddOperator setPageType={setPageType} pageType={pageType} />
+			)}
 		</>
 	);
 });

src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-19 20:50:18
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-19 21:09:14
+ * @LastEditTime: 2022-10-20 11:03:29
  * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -13,4 +13,10 @@ export interface IOperatorInfo{
   type: IOperatorType;
   version: string;   
   productId: string; 
+  createTime: string;
+}
+
+export enum operatorType {
+  'FLOW' = '流算子',
+  'BATCH' = '批算子',
 }
\ No newline at end of file

src/views/ResourceCenter/UserResources/index.tsx

 import style from "./index.module.css";
 import usePass from "@/hooks/usePass";
 import UserResourcesEnvironment from "./UserResourcesEnvironment";
-import { useMemo, useState } from "react";
-import classNames from "classnames";
+import { useMemo } from "react";
 import Tabs from "@/components/mui/MyTabs";
 import WorkflowOperator from "./WorkflowOperator";
 import OperatorDetails from "./WorkflowOperator/components/OperatorDetails";

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

 .switchBatchFolw {
 	height: 100vh;
-	width: 50vh;
+	width: 40vh;
 	background-color: rgba(247, 248, 250, 1);
 	display: flex;
 	flex-direction: column;
+	align-items: flex-end;
 }
 .goBackBox {
 	box-sizing: border-box;
-	height: 110px;
-	padding: 64px 0 14px 25%;
+	height: 120px;
+	padding: 64px 0 24px;
+	margin-right: 44px;
 	line-height: 32px;
 	font-size: 18px;
 	color: #8a9099;
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
+	width: calc(82% - 54px);
 }
 .goBackIcon {
 	width: 32px;
@@ -31,33 +34,35 @@
 	color: #8a9099;
 }
 .switchBox {
+	width: 100%;
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	justify-content: space-around;
+	justify-content: flex-start;
 	align-items: flex-end;
 	position: relative;
 }
 .switchItem {
-	width: 100%;
+	width: calc(82% - 44px);
 	position: relative;
-	padding-right: 44px;
 	display: flex;
 	flex-direction: column;
 	align-items: flex-end;
+	margin-bottom: 40px;
+	padding-right: calc(2% + 34px);
 }
 .activeSwitchItem {
 	padding-right: 34px;
+	width: calc(86% - 44px);
 }
 .itemImg {
-	width: 58%;
+	width: 100%;
 	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 {