feat:添加模板样式

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

@@ -15,8 +15,8 @@
 }
 
 .templateBox {
-	padding: 20px 32px 0;
-	height: calc(100vh - 188px);
+	padding: 0 32px;
+	height: calc(100vh - 168px);
 	overflow: auto;
 }
 

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

@@ -52,6 +52,18 @@ const AddTemplate = (props: IAddTemplateProps) => {
 
 	const [templateType, setTemplateType] = useState("public");
 
+	// 滚轮是否到顶,判断是否显示阴影
+	const [isTop, setIsTop] = useState(true)
+
+	// 滚动滚轮时监听是否到顶
+	const onscroll = (e: any) => {
+		if (e.target.scrollTop <= 0) {
+			setIsTop(true)
+		} else {
+			setIsTop(false)
+		}
+	}
+
 	const handleRadio = (value: string) => {
 		setTemplateType(value);
 	};
@@ -194,6 +206,12 @@ const AddTemplate = (props: IAddTemplateProps) => {
 	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" }}
 					>
@@ -204,7 +222,8 @@ const AddTemplate = (props: IAddTemplateProps) => {
 							display: "flex",
 							justifyContent: "space-between",
 							alignItems: "center",
-						marginBottom: "20px",
+							paddingBottom: "20px",
+							paddingTop: "20px",
 						}}
 					>
 						<OutlinedInput
@@ -214,7 +233,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
@@ -244,6 +263,8 @@ const AddTemplate = (props: IAddTemplateProps) => {
 						/> */}
 						</Box>
 					</Box>
+				</div>
+				<div className={style.templateBox} onScroll={onscroll} >
 					{templateType === "public" && addTemplateList.length === 0 && (
 						<Box
 							sx={{
@@ -349,6 +370,7 @@ const AddTemplate = (props: IAddTemplateProps) => {
 							})}
 					</div>
 				</div>
+			</div>
 			{customTemplateInfo?.show ? (
 				<WorkFlowEdit
 					id={customTemplateInfo.id || ""}