feat: 流算子页面开发

src/components/mui/MyTabs/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-17 16:01:41
+ * @LastEditTime: 2022-10-17 16:16:42
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -14,7 +14,7 @@ import Tab from "@mui/material/Tab";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import { Typography } from "@mui/material";
-import classnames from "classnames";
+import classNames from "classnames";
 
 import styles from "./index.module.css";
 
@@ -165,7 +165,7 @@ const Tabs = (props: IProps) => {
 					>
 						{title ? (
 							<span
-								className={classnames({
+								className={classNames({
 									[styles.titleBox]: true,
 									[titleClass]: titleClass,
 								})}

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

+.indexBox {
+	padding: 0 4px;
+}
+
+.headerBox {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+	padding: 0 20px;
+}
+
+.searchSelectBox {
+	margin-left: 12px;
+}
+
+.contentBox {
+	display: flex;
+	flex-wrap: wrap;
+	padding-left: 20px;
+}

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

@@ -2,24 +2,29 @@
  * @Author: 吴永生 15770852798@163.com
  * @Date: 2022-10-17 14:35:11
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-17 14:45:31
+ * @LastEditTime: 2022-10-17 17:50:30
  * @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 { 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 OperatorCard from "./components/OperatorCard";
+import styles from "./index.module.css";
 
-const UserResourcesEnvironment = () => {
+const WorkflowOperator = () => {
 	const [addOpen, setAddopen] = useState(false);
 	return (
-		<div className={style.environment}>
-			<div className={style.top}>
-				<div className={style.topLeft}>
-					<SearchInput sx={{ width: 340, marginRight: "16px" }}></SearchInput>
+		<div className={styles.indexBox}>
+			<div className={styles.headerBox}>
+				<div>
+					<SearchInput
+						sx={{ width: 340, marginRight: "16px" }}
+						placeholder="输入关键词搜索"
+					/>
 					<MySelect
 						options={[
 							{
@@ -27,23 +32,39 @@ const UserResourcesEnvironment = () => {
 								value: "a",
 							},
 						]}
+						placeholder="环境类型"
+						className={styles.searchSelectBox}
 						sx={{ width: "150px", height: "32px" }}
-					></MySelect>
-				</div>
-				<div className={style.topRight}>
-					<MyButton
-						text="构建应用环境"
-						img={
-							<span
-								style={{ fontSize: "14px", marginRight: "8px" }}
-								className="iconfont icon-dianzan"
-							></span>
-						}
-					></MyButton>
+					/>
+					<MySelect
+						options={[
+							{
+								label: "环境类型",
+								value: "a",
+							},
+						]}
+						placeholder="批/流类型"
+						className={styles.searchSelectBox}
+						sx={{ width: "150px", height: "32px" }}
+					/>
 				</div>
+				<MyButton
+					text="构建算子"
+					img={
+						<span
+							style={{ fontSize: "14px", marginRight: "8px" }}
+							className="iconfont icon-dianzan"
+						></span>
+					}
+				></MyButton>
+			</div>
+			<div className={styles.contentBox}>
+				{[1, 2, 3, 4, 5].map((item) => {
+					return <OperatorCard />;
+				})}
 			</div>
 		</div>
 	);
 };
 
-export default UserResourcesEnvironment;
+export default WorkflowOperator;

src/views/ResourceCenter/UserResources/index.tsx

@@ -4,7 +4,7 @@ import UserResourcesEnvironment from "./UserResourcesEnvironment";
 import { useMemo, useState } from "react";
 import classNames from "classnames";
 import Tabs from "@/components/mui/MyTabs";
-
+import WorkflowOperator from "./WorkflowOperator";
 const UserResources = () => {
 	const isPass = usePass();
 	const tabList = useMemo(() => {
@@ -18,7 +18,7 @@ const UserResources = () => {
 			{
 				label: "工作流算子",
 				value: "USERRESOURCES_FLOE",
-				component: <div />,
+				component: <WorkflowOperator />,
 				hide: !isPass("USERRESOURCES_FLOE"),
 			},
 			{