feat: 新增应用环境表单样式完成

src/components/mui/MyInput.tsx

@@ -121,6 +121,13 @@ const MyInput = (props: MyInputProps) => {
 					},
 				},
 			},
+			MuiFormHelperText: {
+				styleOverrides: {
+					root: {
+						marginLeft: "0px",
+					},
+				},
+			},
 		},
 	});
 

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

+.addEnvironment {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background-color: #fff;
+	display: flex;
+}
+.left {
+	width: 412px;
+	box-sizing: border-box;
+	background-color: rgba(247, 248, 250, 1);
+}
+.right {
+	flex: 1;
+	padding: 64px 44px 40px;
+	min-height: 100vh;
+	overflow: overlay;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+.title {
+	color: rgba(30, 38, 51, 1);
+	margin-bottom: 40px;
+	font-size: 24px;
+	line-height: 32px;
+	font-weight: 550;
+}
+.content {
+	display: flex;
+	border-radius: 4px;
+	margin-bottom: 24px;
+	flex: 1;
+}
+.form {
+	width: 368px;
+	box-sizing: border-box;
+	padding: 16px 24px;
+	border: 1px solid #ebedf0;
+	border-right: none;
+}
+.codeBox {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+.codeTitle {
+	background-color: rgba(230, 233, 237, 1);
+	padding: 11px 20px;
+	color: rgba(30, 38, 51, 1);
+	font-size: 14px;
+	line-height: 22px;
+	font-weight: 550;
+}
+.code {
+	background-color: rgba(247, 248, 250, 1);
+	flex: 1;
+}
+.label {
+	color: rgba(30, 38, 51, 1);
+	font-size: 14px;
+	line-height: 22px;
+	font-weight: 550;
+	margin-bottom: 8px;
+}
+.required {
+	color: rgba(255, 78, 78, 1);
+}
+
+.formItem {
+	position: relative;
+	margin-bottom: 10px;
+}

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

+import { useState } from "react";
+import MyInput from "@/components/mui/MyInput";
+import MySelect from "@/components/mui/MySelect";
+import MyButton from "@/components/mui/MyButton";
+import style from "./index.module.css";
+
+type IAddEnvironmentProps = {
+	// addOpen: boolean;
+};
+
+const AddEnvironment = (props: IAddEnvironmentProps) => {
+	// const { addOpen } = props;
+	const [taskType, setTaskType] = useState<"BATCH" | "FOLOW">("BATCH");
+	const [name, setName] = useState("");
+	const [baseEnvId, setBaseEnvId] = useState("");
+	const [nameHelper, setNameHelper] = useState({
+		error: false,
+		text: "30字符以内，仅限字母、数字、中文",
+	});
+	const [desc, setDesc] = useState("");
+
+	const handleNameChange = (e: any) => {
+		console.log(e);
+	};
+
+	const handleDescChange = (e: any) => {
+		console.log(e);
+	};
+
+	return (
+		<div className={style.addEnvironment}>
+			<div className={style.left}></div>
+			<div className={style.right}>
+				<div className={style.title}>
+					{taskType === "BATCH" ? "批式环境信息" : "流式环境信息"}
+				</div>
+				<div className={style.content}>
+					<div className={style.form}>
+						<div className={style.label}>
+							环境名称<span className={style.required}>*</span>
+						</div>
+						<div className={style.formItem}>
+							<MyInput
+								value={name}
+								onChange={handleNameChange}
+								error={nameHelper.error}
+								helperText={nameHelper.text}
+							></MyInput>
+						</div>
+						<div className={style.label}>
+							描述<span className={style.required}>*</span>
+						</div>
+						<div className={style.formItem}>
+							<MyInput
+								value={desc}
+								id="desc"
+								label="项目描述"
+								multiline
+								rows={4}
+								placeholder="请输入项目描述"
+								onChange={handleDescChange}
+							/>
+							<span
+								style={{
+									position: "absolute",
+									fontSize: "14px",
+									bottom: "7px",
+									right: "12px",
+									color: desc.length >= 300 ? "#d32f2f" : "#C2C6CC",
+								}}
+							>
+								{desc.length}/300
+							</span>
+						</div>
+						<div className={style.label}>
+							基础环境<span className={style.required}>*</span>
+						</div>
+						<div className={style.formItem}>
+							<MySelect
+								options={[]}
+								fullWidth
+								placeholder="请选择基础环境"
+								value={baseEnvId}
+							></MySelect>
+						</div>
+						<div className={style.label}>
+							上传环境压缩包<span className={style.zipText}>（.zip）</span>
+							<span className={style.required}>*</span>
+						</div>
+						<div className={style.formItem}>uploader</div>
+					</div>
+					<div className={style.codeBox}>
+						<div className={style.codeTitle}>
+							{taskType === "BATCH" ? "Shell脚本" : "Python脚本"}
+						</div>
+						<div className={style.code}></div>
+					</div>
+				</div>
+				<div className={style.button}>
+					<MyButton text="开始构建"></MyButton>
+				</div>
+			</div>
+		</div>
+	);
+};
+export default AddEnvironment;

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

 // 应用环境
+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 AddEnvironment from "./AddEnvironment";
 
 const UserResourcesEnvironment = () => {
+	const [addOpen, setAddopen] = useState(true);
 	return (
 		<div className={style.environment}>
 			<div className={style.top}>
@@ -33,6 +36,7 @@ const UserResourcesEnvironment = () => {
 				</div>
 			</div>
 			UserResourcesEnvironment
+			{addOpen && <AddEnvironment></AddEnvironment>}
 		</div>
 	);
 };