复杂set修改使用immer简化

修复底部工具点击区域遮挡问题

package.json

@@ -30,6 +30,7 @@
     "autofit.js": "^3.2.8",
     "dayjs": "^1.11.7",
     "echarts": "^6.0.0",
+    "immer": "^11.1.4",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "motion": "^12.23.26",

src/pages/Container/Map/components/BottomUtils/index.js

@@ -1,3 +1,4 @@
+import { produce } from "immer";
 import { AnimatePresence, motion } from "motion/react";
 import { useContext, useEffect, useState } from "react";
 import bg7 from "~/assets/images/map_bi/bottom_utils/bg7.png";
@@ -52,12 +53,13 @@ function BottomUtils(props) {
   );
 
   const resetAllCheck = () => {
-    setList((prevList) => {
+    setList(produce((draft) => {
-      return prevList.map(item => ({
+      draft.forEach((item) => {
-        ...item,
+        item.list.forEach((item1) => {
-        list: item.list.map(item1 => ({ ...item1, check: false })),
+          item1.check = false;
-      }));
+        });
-    });
+      });
+    }));
   };
 
   useEffect(() => {
@@ -95,11 +97,9 @@ function BottomUtils(props) {
 
   const optionsItemsClick = (index, index1, item, item1) => {
     // 子选项点击处理
-    setList((prevList) => {
+    setList(produce((draft) => {
-      const updatedList = [...prevList];
+      draft[index].list[index1].check = !draft[index].list[index1].check;
-      updatedList[index].list[index1].check = !updatedList[index].list[index1].check;
+    }));
-      return updatedList;
-    });
   };
 
   const renderPortUtils = () => {
@@ -118,6 +118,7 @@ function BottomUtils(props) {
             onClick={() => !portUtilsIsAnimating && !isAllowClick && optionsClick(index)}
             style={{
               cursor: isAllowClick ? "default" : "pointer",
+              zIndex: isAllowClick ? -1 : 0,
             }}
           >
             <img src={isCurrentActive ? item.checkImg : item.img} alt="" className="img" />

src/pages/Container/Map/components/BottomUtils/index.less

@@ -55,11 +55,11 @@
           .child_item {
             padding: 0 20px;
             text-align: center;
+            cursor: pointer;
 
             .child_img {
               width: 60px;
               height: 60px;
-              cursor: pointer;
 
               &:hover {
                 animation: bottomUtilsContainerSlideY 0.5s;
@@ -67,7 +67,7 @@
             }
 
             .child_label {
-              margin-top: -10px;
+              margin-top: -5px;
               font-size: 12px;
               width: 80px;
               color: rgba(255, 255, 255, 0.8);

src/pages/Container/Map/components/RightUtils/index.js

@@ -1,4 +1,5 @@
 import { message } from "antd";
+import { produce } from "immer";
 import { motion } from "motion/react";
 import { useContext, useEffect, useState } from "react";
 import tooltipImg2 from "~/assets/images/map_bi/right_utils/branch_office/bg11.png";
@@ -44,7 +45,12 @@ function RightUtils(props) {
 
   useEffect(() => {
     mitt.on(clickBackMittKey, () => {
-      setList(prev => prev.map(item => item.type === "fourColor" || item.type === "wall" ? { ...item, check: false } : item));
+      setList(produce((draft) => {
+        draft.forEach((item) => {
+          if (item.type === "fourColor" || item.type === "wall")
+            item.check = false;
+        });
+      }));
     });
 
     return () => {
@@ -53,14 +59,21 @@ function RightUtils(props) {
   }, []);
 
   useEffect(() => {
-    setList(list.map(item => item.type === "full" ? { ...item, check: props.isFullscreen } : item));
+    setList(produce((draft) => {
+      draft.forEach((item) => {
+        if (item.type === "full")
+          item.check = props.isFullscreen;
+      });
+    }));
   }, [props.isFullscreen]);
 
   const clickRightTools = (index, type) => {
     let check;
     if (list[index].check !== undefined) {
       check = !list[index].check;
-      setList(list.map((item, i) => index === i ? { ...item, check: !item.check } : item));
+      setList(produce((draft) => {
+        draft[index].check = !draft[index].check;
+      }));
     }
 
     switch (type) {
@@ -98,7 +111,9 @@ function RightUtils(props) {
       case "fourColor":
         if (!currentPort) {
           message.warning("请选择要查看的港口");
-          setList(list.map((item, i) => index === i ? { ...item, check: false } : item));
+          setList(produce((draft) => {
+            draft[index].check = false;
+          }));
           return;
         }
         if (check) {
@@ -114,7 +129,9 @@ function RightUtils(props) {
       case "wall":
         if (!currentPort) {
           message.warning("请选择要查看的港口");
-          setList(list.map((item, i) => index === i ? { ...item, check: false } : item));
+          setList(produce((draft) => {
+            draft[index].check = false;
+          }));
           return;
         }
         if (check)