Merge branch 'feat-20221012-environment' into 'release'

cn-feat: 优化code组件宽度

See merge request !148

src/components/CommonComponents/CardTable/index.tsx

+import style from "./index.module.css";
+
+const CardTable = () => {
+	return <div>CardTable</div>;
+};
+
+export default CardTable;

src/components/CommonComponents/Code/index.tsx

@@ -4,14 +4,19 @@ type ICodeType = {
 	value: string;
 	onChange: any;
 	height?: string;
+	width?: string;
+	maxWidth?: string;
 	theme?: "light" | "dark";
 };
 
 const Code = (props: ICodeType) => {
-	const { value, onChange, height, theme = "dark" } = props;
+	const { value, onChange, height, theme = "dark", width, maxWidth } = props;
 	return (
 		<CodeMirror
 			height={height || "100%"}
+			// maxWidth="200px"
+			width={width || "100%"}
+			maxWidth={maxWidth || "100%"}
 			value={value}
 			onChange={(e) => onChange(e)}
 			theme={theme}

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

@@ -36,6 +36,7 @@
 }
 .form {
 	width: 368px;
+	min-width: 368px;
 	box-sizing: border-box;
 	padding: 16px 24px;
 	border: 1px solid #ebedf0;

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

@@ -48,6 +48,7 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 	const [envList, setEnvList] = useState<Array<any>>([]); // 基础环境列表   和taskType环境类型有关
 	const [progress, setProgress] = useState("0%"); // 上传压缩包进度
 	const [code, setCode] = useState(""); // 脚本内容
+	const [codeWidth, setCodeWidth] = useState(0);
 	const [upload, setUpload] = useState<any>(() => {}); // 上传压缩包实例   用于暂停（取消上传）upload.abort(true);
 	const [nameHelper, setNameHelper] = useState({
 		error: false,
@@ -297,6 +298,16 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 		setFilePaths([]);
 	};
 
+	const getCodeWidth = () => {
+		const addEnvironmentCodeElement =
+			document.getElementById("addEnvironmentCode");
+		setCodeWidth(addEnvironmentCodeElement?.offsetWidth || 0);
+	};
+
+	useEffect(() => {
+		getCodeWidth();
+	}, []);
+
 	return (
 		<div className={style.addEnvironment}>
 			<div className={style.left}>
@@ -453,11 +464,12 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
 						<div className={style.codeTitle}>
 							{taskType === "BATCH" ? "Shell脚本" : "Python脚本"}
 						</div>
-						<div className={style.code}>
+						<div className={style.code} id="addEnvironmentCode">
 							<Code
 								value={code}
 								onChange={(e: string) => setCode(e)}
 								height="535px"
+								width={`${codeWidth}px`}
 							/>
 						</div>
 					</div>

src/views/demo/CardTableDemo/index.tsx

+const CardTableDemo = () => {
+	return <div>CardTableDemo</div>;
+};
+
+export default CardTableDemo;

src/views/demo/index.tsx

 import MyTableDemo from "./MyTableDemo";
 import QueueSelectDemo from "./QueueSelectDemo";
 import IconfontDemo from "./IconfontDemo";
+import CardTableDemo from "./CardTableDemo";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import { useState } from "react";
 import styles from "./index.module.css";
 
 const Demo = () => {
 	const radioOptionsArr = [
+		{
+			value: "cardTable",
+			label: "cardTable",
+		},
 		{
 			value: "iconfont",
 			label: "iconfont",
@@ -27,7 +32,7 @@ const Demo = () => {
 	const handleRadio = (e: string) => {
 		setSelectDemo(e);
 	};
-	const [selectDemo, setSelectDemo] = useState("iconfont");
+	const [selectDemo, setSelectDemo] = useState("cardTable");
 
 	return (
 		<div className={styles.demoBox}>
@@ -37,6 +42,7 @@ const Demo = () => {
 				handleRadio={handleRadio}
 			/>
 			<div className={styles.demoContentBox}>
+				{selectDemo === "cardTable" && <CardTableDemo></CardTableDemo>}
 				{selectDemo === "iconfont" && <IconfontDemo></IconfontDemo>}
 				{selectDemo === "队列选择器" && <QueueSelectDemo></QueueSelectDemo>}
 				{selectDemo === "表格" && <MyTableDemo></MyTableDemo>}