feat: 应用环境列表完成80%

src/api/api_manager.ts

@@ -52,6 +52,7 @@ const RESTAPI = {
   API_GET_PUBLIC_ENV:`${BACKEND_API_URI_PREFIX}/cpp/common/public/env`, // 获取公共环境
   API_GET_PUBLIC_PROJECT:`${BACKEND_API_URI_PREFIX}/cpp/common/public/project`, // 获取公共环境
   API_ACTORENV_BUILDENV:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/buildenv`, // 新增应用环境
+  API_ACTORENV_LIST:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/list`, // 查询用户的应用环境（算子环境）
 };
 
 export default RESTAPI;

src/api/resourceCenter.ts

@@ -34,12 +34,28 @@ const addActorenvBuildenv = (params: addActorenvBuildenvParams) => {
   return request({
     url: Api.API_ACTORENV_BUILDENV,
     method: "post",
-    data: {...params, name: '123'},
+    data: params,
   });
 };
 
+// 获取公共环境
+const getActorenvList = (params: {
+  type: 'BATCH' | 'FLOW' | '',
+  page: number,
+  size: number,
+  title?: string,
+}) => {
+  return request({
+    url: Api.API_ACTORENV_LIST,
+    method: "get",
+    params,
+  });
+};
+
+
 export {
   getPublicEnv,
   getPublicProject,
   addActorenvBuildenv,
+  getActorenvList,
 };

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

@@ -32,7 +32,7 @@
 	display: flex;
 	border-radius: 4px;
 	margin-bottom: 24px;
-	height: 600px;
+	height: 580px;
 }
 .form {
 	width: 368px;
@@ -98,6 +98,9 @@
 	align-items: center;
 	justify-content: center;
 }
+.isDragActive {
+	border: 1px dashed #000;
+}
 .formItemHaveHelperText {
 	margin-bottom: 10px;
 }

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

@@ -262,7 +262,13 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 							<span className={style.download}>下载模板</span>
 						</div>
 						<div className={style.formItem}>
-							<div className={style.uploadBox} {...getRootProps()}>
+							<div
+								className={classNames({
+									[style.uploadBox]: true,
+									[style.isDragActive]: isDragActive,
+								})}
+								{...getRootProps()}
+							>
 								<input {...getInputProps()} />
 								<span>点击选择环境包或将文件</span>
 								<span>拖到此处上传</span>

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

 .environment {
+	padding: 19px 24px 0;
 }
 .top {
 	display: flex;
@@ -6,3 +7,6 @@
 	justify-content: space-between;
 	margin-bottom: 20px;
 }
+.tableBox {
+	height: calc(100vh - 177px);
+}

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

 // 应用环境
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import style from "./index.module.css";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
 import MySelect from "@/components/mui/MySelect";
 import MyButton from "@/components/mui/MyButton";
+import MyTable from "@/components/mui/MyTableNew";
+import useMyRequest from "@/hooks/useMyRequest";
+import { getActorenvList } from "@/api/resourceCenter";
 import AddEnvironment from "./AddEnvironment";
 
 const UserResourcesEnvironment = () => {
 	const [addOpen, setAddopen] = useState(false);
+	const [title, setTitle] = useState("");
+	const [type, setType] = useState<"BATCH" | "FLOW" | "">("");
+	const [list, setList] = useState([]);
+	const [page, setPage] = useState(0);
+	const [count, setCount] = useState(0);
+	const [size, setSize] = useState(20);
+	const headCells: Array<any> = [
+		{
+			id: "title",
+			label: "环境名称",
+		},
+		{
+			id: "type",
+			label: "环境类型",
+			width: 100,
+		},
+		{
+			id: "",
+			label: "创建时间",
+			width: 160,
+		},
+		{
+			id: "status",
+			label: "构建状态",
+			width: 150,
+		},
+		{
+			id: "caozuo",
+			label: "操作",
+			width: 160,
+		},
+	];
+	const { run: getList } = useMyRequest(getActorenvList, {
+		onSuccess: (res) => {
+			console.log(res);
+			setList(res.data.content);
+			setCount(res.data.totalPages - 1);
+		},
+	});
+
+	const pageChange = (value: number) => {
+		setPage(value - 1);
+	};
+
+	useEffect(() => {
+		getList({
+			page,
+			size,
+			title,
+			type,
+		});
+	}, [getList, page, size, title, type]);
+
+	const renderType = (item: any) => {
+		if (item.type === "BATCH") {
+			return "批式";
+		} else if (item.type === "FLOW") {
+			return "流式";
+		} else {
+			return "";
+		}
+	};
+
+	const renderStatus = (item: any) => {
+		if (item.status === "PENDING") {
+			return "准备构建";
+		} else if (item.status === "CREATING") {
+			return "正在构建";
+		} else if (item.status === "FAILED") {
+			return "构建失败";
+		} else if (item.status === "CREATED") {
+			return "构建完成";
+		} else {
+			return "";
+		}
+	};
+
+	const renderButtons = (item: any) => {
+		if (item.status === "FAILED") {
+			return (
+				<>
+					<MyButton
+						text="详情"
+						style={{
+							position: "relative",
+							left: "-10px",
+							minWidth: "10px",
+							height: "22px",
+							padding: "0 10px",
+						}}
+						variant="text"
+						size="medium"
+					/>
+					<MyButton
+						text="删除"
+						style={{
+							position: "relative",
+							left: "-10px",
+							minWidth: "10px",
+							height: "22px",
+							padding: "0 10px",
+						}}
+						variant="text"
+						size="medium"
+						color="error"
+					/>
+				</>
+			);
+		} else {
+			return (
+				<MyButton
+					text="详情"
+					style={{
+						position: "relative",
+						left: "-10px",
+						minWidth: "10px",
+						height: "22px",
+						padding: "0 10px",
+					}}
+					variant="text"
+					size="medium"
+					// onClick={() => hanleDownloadFile(item)}
+				/>
+			);
+		}
+	};
+
 	return (
 		<div className={style.environment}>
 			<div className={style.top}>
 				<div className={style.topLeft}>
-					<SearchInput sx={{ width: 340, marginRight: "16px" }}></SearchInput>
-					<MySelect
-						options={[
-							{
-								label: "环境类型",
-								value: "a",
-							},
-						]}
-						sx={{ width: "150px", height: "32px" }}
-					></MySelect>
+					<SearchInput
+						sx={{ width: 340, marginRight: "16px" }}
+						onKeyUp={(e: any) => {
+							if (e.keyCode === 13) {
+								setTitle(e.target.value);
+							}
+						}}
+					></SearchInput>
+					{!addOpen && (
+						<MySelect
+							title="环境类型"
+							isTitle={true}
+							options={[
+								{
+									label: "批式",
+									value: "BATCH",
+								},
+								{
+									label: "流式",
+									value: "FLOW",
+								},
+							]}
+							value={type}
+							onChange={(e: any) => setType(e)}
+							sx={{ width: "150px", height: "32px" }}
+						></MySelect>
+					)}
 				</div>
 				<div className={style.topRight}>
 					<MyButton
@@ -36,7 +183,22 @@ const UserResourcesEnvironment = () => {
 					></MyButton>
 				</div>
 			</div>
-			UserResourcesEnvironment
+			<div className={style.tableBox}>
+				<MyTable
+					rows={list.map((item: any) => ({
+						...item,
+						type: renderType(item),
+						status: renderStatus(item),
+						caozuo: renderButtons(item),
+					}))}
+					headCells={headCells}
+					fixedHead={true}
+					hasTableFooter={true}
+					page={page}
+					count={count}
+					pageChange={pageChange}
+				></MyTable>
+			</div>
 			{addOpen && <AddEnvironment setAddopen={setAddopen}></AddEnvironment>}
 		</div>
 	);

src/views/ResourceCenter/UserResources/index.tsx

@@ -36,6 +36,7 @@ const UserResources = () => {
 				title="个人资源"
 				tabList={tabList}
 				defaultValue={"USERRESOURCES_ENVIRONMENT"}
+				tabPanelSx={{ padding: "0" }}
 			/>
 		</div>
 	);