feat: 模板列表完成

src/api/api_manager.ts

@@ -56,6 +56,7 @@ const RESTAPI = {
   API_ACTORENV_DELETE:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/delete`, // 删除用户算子环境
   API_ACTORENV_DETAIL:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/detail`, // 查询应用环境的详情信息
   API_ACTOR_ENV_OPTIONS:`${BACKEND_API_URI_PREFIX}/cpp/actorenv/usableenv`, // 查询用户应用环境下拉
+  API_WORKFLOWSPEC_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workbench/product/workflowspec/list`, // 模板列表   所有的
 };
 
 export default RESTAPI;

src/api/resourceCenter.ts

@@ -102,6 +102,17 @@ const getActorEnvOptions = (params: {type: string}) => {
   });
 };
 
+// 获取工作流模板
+const getWorkflowspecList = (params: {productId?: string, title?: string}) => {
+  return request({
+    // url:`${Api.API_WORKFLOWSPEC_LIST}/${params.productId}`,
+    url:`${Api.API_WORKFLOWSPEC_LIST}`,
+    method: "get",
+    params
+  });
+};
+// API_WORKFLOWSPEC_LIST
+
 export {
   getPublicEnv,
   getPublicProject,
@@ -110,5 +121,6 @@ export {
   deleteActorenv,
   getOperatorList,
   getActorenvDetail,
-  getActorEnvOptions
+  getActorEnvOptions,
+  getWorkflowspecList
 };

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

+.template {
+	padding: 19px 24px 0;
+}
+.top {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 20px;
+}
+.tableBox {
+	height: calc(100vh - 177px);
+}
+.templateBox {
+	border: 2px solid #fff;
+	box-shadow: 0px 3px 12px 0px rgba(3, 47, 105, 0.09);
+	border-radius: 6px;
+	background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
+	height: 208px;
+	box-sizing: border-box;
+	padding: 16px 20px;
+}
+.templateTop {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	margin-bottom: 12px;
+}
+.templateTopItem {
+	font-size: 12px;
+	line-height: 20px;
+	color: rgba(138, 144, 153, 1);
+}
+.templateTopLine {
+	width: 1px;
+	height: 16px;
+	background-color: rgba(221, 225, 230, 1);
+	margin: 0 11px;
+}
+.templateTitleBox {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	margin-bottom: 12px;
+}
+.templateTitleBox {
+	height: 24px;
+}
+.templateTitle {
+	font-size: 14px;
+	line-height: 22px;
+	color: rgba(30, 38, 51, 1);
+	margin-left: 8px;
+	font-weight: 550;
+}
+.templateDesc {
+	height: 60px;
+	font-size: 12px;
+	line-height: 20px;
+	color: rgba(86, 92, 102, 1);
+	margin-bottom: 16px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	display: -webkit-box;
+}
+.templateButtons {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.button {
+	cursor: pointer;
+	line-height: 22px;
+	font-size: 14px;
+	color: rgba(19, 112, 255, 1);
+}

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

+import { useEffect, useState } from "react";
+import SearchInput from "@/components/BusinessComponents/SearchInput";
+import MyButton from "@/components/mui/MyButton";
+import MySelect from "@/components/mui/MySelect";
+import Add from "@mui/icons-material/Add";
+import CardTable from "@/components/CommonComponents/CardTable";
+import useMyRequest from "@/hooks/useMyRequest";
+import { getWorkflowspecList } from "@/api/resourceCenter";
+import style from "./index.module.css";
+
+const UserResourcesTemplate = () => {
+	const [title, setTitle] = useState("");
+	const [product, setProduct] = useState("");
+	const [list, setList] = useState([]);
+	const renderItem = (item: any) => {
+		return (
+			<div className={style.templateBox}>
+				<div className={style.templateTop}>
+					<div className={style.templateTopItem}>{item.productId}</div>
+					<div className={style.templateTopLine}></div>
+					<div className={style.templateTopItem}>{item.version}</div>
+					<div className={style.templateTopLine}></div>
+					<div className={style.templateTopItem}>{item.updatedTime}</div>
+				</div>
+				<div className={style.templateTitleBox}>
+					<img src="" alt="" />
+					<div className={style.templateTitle}>{item.title}</div>
+				</div>
+				<div className={style.templateDesc}>
+					{item.description}
+					啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是啊手动阀卡拉实际付款啦世界的分厘卡就是
+				</div>
+				<div className={style.templateButtons}>
+					<div className={style.templateBL}>
+						<span className={style.button}>升级</span>
+					</div>
+					<div className={style.templateBR}>
+						<MyButton
+							text="删除"
+							variant="outlined"
+							style={{
+								border: "1px solid rgba(221, 225, 230, 1)",
+								color: "rgba(138, 144, 153, 1)",
+								marginRight: "12px",
+							}}
+						></MyButton>
+						<MyButton text="查看" variant="outlined"></MyButton>
+					</div>
+				</div>
+			</div>
+		);
+	};
+	//   createdAt
+	// createdTime
+	// creator
+	// :
+	// description
+	// favorited
+	// id
+	// productId
+	// title
+	// updatedAt
+	// updatedTime
+	// updater
+	// version
+
+	// 获取模板列表
+	const { run } = useMyRequest(getWorkflowspecList, {
+		onSuccess: (result: any) => {
+			setList(result.data);
+		},
+	});
+
+	useEffect(() => {
+		run({
+			productId: "cadd",
+		});
+	}, [run]);
+
+	return (
+		<div className={style.template}>
+			<div className={style.top}>
+				<div className={style.topLeft}>
+					<SearchInput
+						sx={{ width: 340, marginRight: "16px" }}
+						onKeyUp={(e: any) => {
+							if (e.keyCode === 13) {
+								setTitle(e.target.value);
+							}
+						}}
+					></SearchInput>
+					<MySelect
+						title="产品类型"
+						isTitle={true}
+						options={[
+							{
+								label: "全部",
+								value: "ALL",
+							},
+							{
+								label: "批式",
+								value: "BATCH",
+							},
+							{
+								label: "流式",
+								value: "FLOW",
+							},
+						]}
+						value={product}
+						onChange={(e: any) => setProduct(e)}
+						sx={{ width: "150px", height: "32px" }}
+					></MySelect>
+				</div>
+				<div className={style.topRight}>
+					<MyButton
+						text="新建自定义模板"
+						// onClick={() => setAddopen(true)}
+						startIcon={<Add />}
+					></MyButton>
+				</div>
+			</div>
+			<div className={style.tableBox}>
+				<CardTable data={list} renderItem={renderItem}></CardTable>
+			</div>
+		</div>
+	);
+};
+
+export default UserResourcesTemplate;

src/views/ResourceCenter/UserResources/index.tsx

 import style from "./index.module.css";
 import usePass from "@/hooks/usePass";
+import UserResourcesTemplate from "./UserResourcesTemplate";
 import UserResourcesEnvironment from "./UserResourcesEnvironment";
 import { useMemo } from "react";
 import Tabs from "@/components/mui/MyTabs";
@@ -12,7 +13,7 @@ const UserResources = () => {
 			{
 				label: "工作流模版",
 				value: "USERRESOURCES_TEMPLATE",
-				component: <div />,
+				component: <UserResourcesTemplate />,
 				hide: !isPass("USERRESOURCES_TEMPLATE"),
 			},
 			{
@@ -35,7 +36,7 @@ const UserResources = () => {
 			<Tabs
 				title="个人资源"
 				tabList={tabList}
-				defaultValue={"USERRESOURCES_ENVIRONMENT"}
+				defaultValue={"USERRESOURCES_TEMPLATE"}
 				tabPanelSx={{ padding: "0" }}
 			/>
 			{/* <OperatorDetails /> */}