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

@@ -36,37 +36,6 @@
 	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;
-}
 
 .folderIconBox {
 	display: flex;
@@ -74,7 +43,7 @@
 	align-items: center;
 }
 
-.folderPointer{
+.folderPointer {
 	cursor: pointer;
 }
 
@@ -94,31 +63,31 @@
 	align-items: center;
 }
 
-.showPathSpan{
+.showPathSpan {
 	cursor: pointer;
 	line-height: 22px;
 	font-size: 14px;
-  color: #1E2633;
+	color: #1e2633;
 	/* display: flex;
   align-items: center; */
 }
 
-.showPathI{
+.showPathI {
 	margin: 0 10px;
 	line-height: 22px;
 	font-size: 20px;
-  color: #C2C6CC;
-  cursor: default ;
+	color: #c2c6cc;
+	cursor: default;
 }
 
-.showPathSpan:hover{
-  color: #1370FF;
+.showPathSpan:hover {
+	color: #1370ff;
 }
-.showPathSpanActive{
-  color: #1370FF;
+.showPathSpanActive {
+	color: #1370ff;
 }
 
-.noDataBox{
+.noDataBox {
 	background-color: #fff;
 	height: calc(100vh - 377px);
 	display: flex;
@@ -128,9 +97,9 @@
 	position: relative;
 	top: -53px;
 }
-.noDataText{
+.noDataText {
 	margin-top: 8px;
 	font-size: 14px;
 	line-height: 22px;
-  color: #8A9099;
+	color: #8a9099;
 }