feat:滚动时显示阴影、一些交互

src/views/Project/ProjectData/index.module.css

@@ -2,7 +2,7 @@
 	position: relative;
 }
 .projectDataStickyTop {
-	padding: 28px 24px;
+	padding: 28px 24px 64px;
 	position: relative;
 }
 .projectDataTitle {
@@ -56,8 +56,9 @@
 
 .projectDataStickyBox {
 	height: 64px;
-	position: sticky;
-	bottom: -1px;
+	width: calc(100vw - 220px);
+	position: fixed;
+	bottom: 0px;
 	border: 1px solid #ebedf0;
 	z-index: 100;
 	background-color: #fff;

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css

@@ -2,16 +2,31 @@
 	flex: 1;
 	background-color: #fff;
 	border-radius: 16px 0 0 0;
-	padding: 24px 32px;
+	padding-top: 24px;
 	box-sizing: border-box;
+}
+
+.headerBox {
+	padding: 0 32px;
+}
+
+.headerBoxShadow {
+	box-shadow: 0 5px 4px -4px rgb(0, 0, 0, .15);
+}
+
+.templateBox {
+	padding: 20px 32px 0;
+	height: calc(100vh - 188px);
 	overflow: auto;
 }
+
 .templateList {
 	/* height: 2000px; */
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap;
 }
+
 .templateLi {
 	height: 146px;
 	box-sizing: border-box;
@@ -24,12 +39,15 @@
 	margin-right: 16px;
 	margin-bottom: 16px;
 }
+
 .templateLiCustom {
 	height: 194px;
 }
+
 .templateLiHidden {
 	visibility: hidden;
 }
+
 .addCustomTemplate {
 	height: 194px;
 	box-sizing: border-box;
@@ -38,23 +56,28 @@
 	align-items: center;
 	flex-direction: column;
 }
+
 .addCustomTemplateText {
 	margin-top: 12px;
 	line-height: 22px;
 	font-size: 14px;
 	color: rgba(138, 144, 153, 1);
 }
+
 .templateLi:hover {
 	box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
 }
+
 .templateLi:nth-child(4n) {
 	margin-right: 0;
 }
+
 .templateLiTop {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
+
 .templateTitle {
 	font-size: 14px;
 	font-weight: 600;
@@ -64,14 +87,17 @@
 	text-overflow: ellipsis;
 	line-height: 22px;
 }
+
 .templateLiInfo {
 	margin-bottom: 8px;
 }
+
 .templateLiInfoText {
 	line-height: 20px;
 	font-size: 12px;
 	color: rgba(19, 112, 255, 1);
 }
+
 .templateLiDesc {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -82,6 +108,7 @@
 	font-size: 12px;
 	color: rgba(138, 144, 153, 1);
 }
+
 .templateLiEditBox {
 	display: flex;
 	justify-content: flex-end;

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx

@@ -50,6 +50,9 @@ const AddTemplate = (props: IAddTemplateProps) => {
 
 	const [templateType, setTemplateType] = useState("public");
 
+	// 滚轮是否到顶,判断是否显示阴影
+	const [isTop, setIsTop] = useState(true)
+
 	const handleRadio = (value: string) => {
 		setTemplateType(value);
 	};
@@ -161,9 +164,24 @@ const AddTemplate = (props: IAddTemplateProps) => {
 		return arr;
 	}, [addTemplateList, templateType]);
 
+    // 滚动滚轮时监听是否到顶
+	const onscroll = (e: any) => {
+		if (e.target.scrollTop <= 0) {
+			setIsTop(true)
+		} else {
+			setIsTop(false)
+		}
+	}
+
 	return (
 		<FullScreenDrawer handleClose={setShowAddTemplate}>
 			<div className={style.content}>
+				<div
+					className={classNames({
+						[style.headerBox]: true,
+						[style.headerBoxShadow]: !isTop,
+					})}
+				>
 					<Typography
 						sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
 					>
@@ -174,7 +192,8 @@ const AddTemplate = (props: IAddTemplateProps) => {
 							display: "flex",
 							justifyContent: "space-between",
 							alignItems: "center",
-						marginBottom: "20px",
+							paddingBottom: "20px",
+							paddingTop: "20px",
 						}}
 					>
 						<OutlinedInput
@@ -184,7 +203,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 							}}
 							placeholder="输入关键词搜索"
 							size="small"
-						sx={{ width: 340, height: 32, marginTop: "20px" }}
+							sx={{ width: 340, height: 32 }}
 							endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
 						/>
 						<Box
@@ -214,6 +233,8 @@ const AddTemplate = (props: IAddTemplateProps) => {
 							/>
 						</Box>
 					</Box>
+				</div>
+				<div className={style.templateBox} onScroll={onscroll} >
 					{templateType === "public" && addTemplateList.length === 0 && (
 						<Box
 							sx={{
@@ -310,6 +331,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 							})}
 					</div>
 				</div>
+			</div>
 			{customTemplateInfo?.show ? (
 				<WorkFlowEdit
 					id={customTemplateInfo.id || ""}

src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx

@@ -81,7 +81,7 @@ const TemplateBox = (props: any) => {
 					</Typography>
 				</Box>
 				<Typography className={styles.templateDescText}>
-					{info.description}
+					{info.description ? info.description : "此模板暂无描述。"}
 				</Typography>
 			</Box>
 			<Box

src/views/Project/components/AddProject/index.tsx

@@ -214,7 +214,7 @@ const AddProject = (props: IAddProjectProps) => {
 						id="desc"
 						label="项目描述"
 						multiline
-						rows={5}
+						rows={4}
 						placeholder="请输入项目描述"
 						onChange={handleDescChange}
 						helperText={descCheck.help}
@@ -224,7 +224,7 @@ const AddProject = (props: IAddProjectProps) => {
 							position: "absolute",
 							bottom: "7px",
 							right: "12px",
-							color: desc.length >= 100 ? "#d32f2f" : "#C2C6CC"
+							color: desc.length >= 300 ? "#d32f2f" : "#C2C6CC"
 						}}
 					>
 						{desc.length}/300

src/views/WorkFlowEdit/components/SaveCustomTemplate/index.tsx

@@ -240,14 +240,27 @@ const SaveCustomTemplate = (props: IProps) => {
 					helperText={versionHelper.helperText}
 					style={{ marginBottom: "20px" }}
 				></MyInput>
+				<div style={{ position: "relative" }}>
 					<MyInput
 						value={description}
+						id="desc"
 						label="模板描述"
 						placeholder="模板描述"
 						onChange={handleDescriptionChange}
 						multiline
 						rows={4}
-				></MyInput>
+					/>
+						<span
+							style={{
+								position: "absolute",
+								bottom: "7px",
+								right: "12px",
+								color: description.length >= 300 ? "#d32f2f" : "#C2C6CC"
+							}}
+						>
+							{description.length}/300
+						</span>
+				</div>
 			</div>
 		</MyDialog>
 	);