feat: 新增一个从下往上弹的全屏抽屉

src/components/BusinessComponents/KekuleView/index.tsx

 // 2d分子结构图
 import { useEffect } from "react";
 import { Box } from "@mui/material";
+import { useMessage } from "@/components/MySnackbar";
 var Kekule = require("kekule").Kekule;
 
 type IKekuleViewProps = {
@@ -31,6 +32,7 @@ const KekuleView = (props: IKekuleViewProps) => {
 		onClick,
 		toolbar = false,
 	} = props;
+	const Message = useMessage();
 
 	useEffect(() => {
 		if (smi) {
@@ -55,6 +57,7 @@ const KekuleView = (props: IKekuleViewProps) => {
 				chemViewer.setEnableDirectInteraction(false);
 			} catch (err) {
 				console.log(err);
+				Message.error("分子结构图渲染失败，请刷新重试。");
 			}
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

src/components/BusinessComponents/NglView/index.tsx

 // 分子结构3D图
 import { useEffect, useState } from "react";
 import { Stage } from "ngl";
+import { useMessage } from "@/components/MySnackbar";
 import { Box } from "@mui/material";
 
 type INglViewProps = {
@@ -11,13 +12,14 @@ type INglViewProps = {
 };
 
 const NglView = (props: INglViewProps) => {
+	const Message = useMessage();
 	const { id, content, width = "100%", height = "100%" } = props;
 	const [stage, setStage] = useState<any>(null);
 	const [pdb, setPdb] = useState<any>(null);
 
 	let firefox = navigator.userAgent.indexOf("FireFox") !== -1;
+	// 鼠标滚动放大3d图的时候页面不会跟着滚动
 	const MouseWheel = (e: any) => {
-		console.log("e", e);
 		e = e || window.event;
 		// if (e.stopProagation) {
 		// 	e.stopPropagation();
@@ -59,15 +61,14 @@ const NglView = (props: INglViewProps) => {
 
 	useEffect(() => {
 		try {
-			// document.addEventListener("DOMContentLoaded", () => {
 			stage &&
 				stage.loadFile(pdb, {
 					ext: "pdb",
 					defaultRepresentation: true,
 				});
-			// });
 		} catch (err) {
 			console.log(err);
+			Message.error("分子结构图渲染失败，请刷新重试。");
 		}
 
 		// eslint-disable-next-line react-hooks/exhaustive-deps

src/components/CommonComponents/FullScreenDrawer/index.tsx

+// 从下往上弹的全屏抽屉
+import style from "./index.module.css";
+
+type IFullScreenDrawerProps = {};
+
+const FullScreenDrawer = (props: IFullScreenDrawerProps) => {
+	return <div>123</div>;
+};
+
+export default FullScreenDrawer;

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

 .projectData {
-  position: relative;
+	position: relative;
 }
 .projectDataStickyTop {
-  padding: 28px 24px;
-  position: relative;
+	padding: 28px 24px;
+	position: relative;
 }
 .projectDataTitle {
-  font-size: 18px;
-  color: #1e2633;
-  line-height: 26px;
-  font-weight: 600;
-  margin-bottom: 24px;
+	font-size: 18px;
+	color: #1e2633;
+	line-height: 26px;
+	font-weight: 600;
+	margin-bottom: 24px;
 }
 .projectDataButtonAndSearch {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 16px;
 }
 .projectDataSearch {
-  padding-left: 12px;
-  padding-right: 8px;
-  border-radius: 4px;
-  border: 1px solid #ebedf0;
+	padding-left: 12px;
+	padding-right: 8px;
+	border-radius: 4px;
+	border: 1px solid #ebedf0;
 }
 .projectDataPathAndTabs {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 16px;
 }
 .projectDataPath {
-  font-size: 14px;
-  color: #1e2633;
-  line-height: 22px;
-  font-weight: 600;
-}
-.projectDataTabsAndBtton {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-.projectDataTabs {
-  display: flex;
-  justify-content: space-between;
-  border: 1px solid #e6e8eb;
-  border-radius: 4px;
-  background-color: #e6e8eb;
-  cursor: pointer;
-  margin-right: 12px;
-}
-.projectDataTab {
-  height: 32px;
-  box-sizing: border-box;
-  font-size: 14px;
-  color: #565c66;
-  border-radius: 4px;
-  line-height: 20px;
-  padding: 3px 18px;
-  background-color: #e6e8eb;
-  display: flex;
-  align-items: center;
-}
-.projectDataTabActive {
-  color: #1370ff;
-  background-color: #fff;
-  border: 1px solid #e6e8eb;
+	font-size: 14px;
+	color: #1e2633;
+	line-height: 22px;
+	font-weight: 600;
 }
 
 .folderIconBox {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
 }
 
-.folderPointer{
-  cursor: pointer;
+.folderPointer {
+	cursor: pointer;
 }
 
 .folderIcon {
-  margin-right: 12px;
+	margin-right: 12px;
 }
 
 .projectDataStickyBox {
-  height: 64px;
-  position: sticky;
-  bottom: -1px;
-  border: 1px solid #ebedf0;
-  z-index: 100;
-  background-color: #fff;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+	height: 64px;
+	position: sticky;
+	bottom: -1px;
+	border: 1px solid #ebedf0;
+	z-index: 100;
+	background-color: #fff;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
 }
 
-.showPathSpan{
-  cursor: pointer;
-  line-height: 22px;
-  font-size: 14px;
-  color: #1E2633;
-  /* display: flex;
+.showPathSpan {
+	cursor: pointer;
+	line-height: 22px;
+	font-size: 14px;
+	color: #1e2633;
+	/* display: flex;
   align-items: center; */
 }
 
-.showPathI{
-  margin: 0 10px;
-  line-height: 22px;
-  font-size: 20px;
-  color: #C2C6CC;
-  cursor: default ;
+.showPathI {
+	margin: 0 10px;
+	line-height: 22px;
+	font-size: 20px;
+	color: #c2c6cc;
+	cursor: default;
 }
 
-.showPathSpan:hover{
-  color: #1370FF;
+.showPathSpan:hover {
+	color: #1370ff;
 }
-.showPathSpanActive{
-  color: #1370FF;
+.showPathSpanActive {
+	color: #1370ff;
 }
 
-.noDataBox{
-  background-color: #fff;
-  height: calc(100vh - 377px);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  top: -53px;
-}
-.noDataText{
-  margin-top: 8px;
-  font-size: 14px;
-  line-height: 22px;
-  color: #8A9099;
-}
\ No newline at end of file
+.noDataBox {
+	background-color: #fff;
+	height: calc(100vh - 377px);
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	top: -53px;
+}
+.noDataText {
+	margin-top: 8px;
+	font-size: 14px;
+	line-height: 22px;
+	color: #8a9099;
+}