feat: 应用中心路由搭建

src/utils/util.ts

@@ -90,7 +90,7 @@ export const storageUnitFromB = (b: number) => {
   } else if (b < 1024 * 1024 * 1024 * 1024) {
     return `${(b / (1024 * 1024 * 1024)).toFixed(2)}G`;
   } else {
-    return `${(b / (1024 * 1024 * 1024 * 1024)).toFixed(2)}t`;
+    return `${(b / (1024 * 1024 * 1024 * 1024)).toFixed(2)}T`;
   }
 };
 

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

+.environment {
+}
+.top {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 20px;
+}

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

+// 应用环境
+import style from "./index.module.css";
+import SearchInput from "@/components/BusinessComponents/SearchInput";
+import MySelect from "@/components/mui/MySelect";
+import MyButton from "@/components/mui/MyButton";
+
 const UserResourcesEnvironment = () => {
-	return <div>UserResourcesEnvironment</div>;
+	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>
+				</div>
+				<div className={style.topRight}>
+					<MyButton
+						text="构建应用环境"
+						img={
+							<span
+								style={{ fontSize: "14px", marginRight: "8px" }}
+								className="iconfont icon-dianzan"
+							></span>
+						}
+					></MyButton>
+				</div>
+			</div>
+			UserResourcesEnvironment
+		</div>
+	);
 };
 
 export default UserResourcesEnvironment;

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

+.userResources {
+	height: calc(100vh - 57px);
+	width: 100%;
+}
+.top {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	border-bottom: 1px solid rgba(235, 237, 240, 1);
+}
+.title {
+	padding: 14px 24px;
+	color: rgba(30, 38, 51, 1);
+	font-size: 18px;
+	line-height: 26px;
+	font-weight: 550;
+}
+.line {
+	width: 1px;
+	height: 20px;
+	background-color: rgba(221, 225, 230, 1);
+}
+.tabs {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+.tab {
+	margin-left: 24px;
+	font-size: 16px;
+	line-height: 24px;
+	color: rgba(138, 144, 153, 1);
+	border-bottom: 2px solid transparent;
+	padding: 14px 0;
+	cursor: pointer;
+}
+.activeTab {
+	color: rgba(19, 112, 255, 1);
+	border-bottom: 2px solid rgba(19, 112, 255, 1);
+}
+.content {
+	padding: 20px 24px;
+	height: calc(100% - 55px);
+	box-sizing: border-box;
+}

src/views/ResourceCenter/UserResources/index.tsx

 import style from "./index.module.css";
+import usePass from "@/hooks/usePass";
 import UserResourcesEnvironment from "./UserResourcesEnvironment";
-// src\views\ResourceCenter\UserResources\UserResourcesEnvironment
+import { useMemo, useState } from "react";
+import classNames from "classnames";
 
 const tabs = [
 	{
@@ -21,14 +23,41 @@ const tabs = [
 ];
 
 const UserResources = () => {
-	const renderTabs = () => {};
+	const isPass = usePass();
+	const [activeTab, setActiveTab] = useState("environment");
+
+	const renderTabs = useMemo(() => {
+		return tabs.filter((tab) => isPass(tab.id));
+	}, [isPass]);
+	console.log(renderTabs);
+	// () => {};
 	return (
-		<div>
+		<div className={style.userResources}>
 			<div className={style.top}>
-				<div>个人资源</div>
-				<div className={style.tabs}></div>
+				<div className={style.title}>个人资源</div>
+				<div className={style.line}></div>
+				<div className={style.tabs}>
+					{renderTabs.map((tab) => {
+						return (
+							<div
+								className={classNames({
+									[style.tab]: true,
+									[style.activeTab]: activeTab === tab.value,
+								})}
+								onClick={() => setActiveTab(tab.value)}
+								key={tab.value}
+							>
+								{tab.label}
+							</div>
+						);
+					})}
+				</div>
+			</div>
+			<div className={style.content}>
+				{activeTab === "environment" && (
+					<UserResourcesEnvironment></UserResourcesEnvironment>
+				)}
 			</div>
-			<div className={style.content}>UserResources</div>
 		</div>
 	);
 };