feat: 流算子页面开发

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

+.itemBox {
+	width: 334px;
+	height: 108px;
+	padding: 20px;
+	margin: 0 20px 20px 0;
+	background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
+	box-shadow: 0px 6px 24px 0px rgba(3, 47, 105, 0.14);
+	border-radius: 6px;
+	border: 2px solid #ffffff;
+}
+
+.itemHeaderBox {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+}
+
+.itemContentBox {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.titleBox {
+	display: block;
+	font-size: 16px;
+	color: #1e2633;
+}
+
+.titleBox {
+	display: block;
+	font-size: 16px;
+	color: #1e2633;
+}
+.operatorTypeBox {
+	display: block;
+	color: #8a9099;
+	font-size: 12px;
+}
+
+.infoBox {
+	width: 50%;
+	font-weight: 400;
+	color: #8a9099;
+	font-size: 14px;
+	line-height: 26px;
+}
+
+.infoBox > span {
+	color: #1e2633;
+}

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

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-10-17 14:35:11
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-10-17 18:35:09
+ * @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";
+
+const OperatorCard = () => {
+	return (
+		<div className={styles.itemBox}>
+			<div className={styles.itemHeaderBox}>
+				<img alt="" style={{ width: 36, height: 36 }} />
+				<div>
+					<b className={styles.titleBox}>Desktop</b>
+					<span className={styles.operatorTypeBox}>批算子</span>
+				</div>
+			</div>
+			<div className={styles.itemContentBox}>
+				<p className={styles.infoBox}>
+					产品类型：<span>CADD</span>
+				</p>
+				<p className={styles.infoBox}>
+					算子版本：<span>V1.0.0</span>
+				</p>
+				<p className={styles.infoBox}>
+					创建时间：<span>2022-10-11</span>
+				</p>
+			</div>
+		</div>
+	);
+};
+
+export default OperatorCard;

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

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-10-17 14:35:11
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-10-17 19:27:00
+ * @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";
+
+const OperatorDetails = () => {
+	return (
+		<div className={styles.detailsBox}>
+			<div>
+				<h2>基础信息</h2>
+				<tr>
+					<td>所属产品</td>
+					<td>创建时间</td>
+					<td>创建人</td>
+					<td>算子版本</td>
+					<td>应用环境</td>
+				</tr>
+				<tr>
+					<td>所属产品</td>
+					<td>创建时间</td>
+					<td>创建人</td>
+					<td>算子版本</td>
+					<td>应用环境</td>
+				</tr>
+			</div>
+		</div>
+	);
+};
+
+export default OperatorDetails;