From 620d33e043fd1d77bd13995938aed219626871d1 Mon Sep 17 00:00:00 2001
From: LiuJiaNan <15703339975@163.com>
Date: Wed, 15 Jul 2026 10:43:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(content):=20=E8=AE=A9=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E7=9A=84=E5=B1=95=E5=BC=80=E6=94=B6=E8=B5=B7=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E9=9A=8F=E9=9D=A2=E6=9D=BF=E5=90=8C=E6=AD=A5=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Map/components/CenterUtils/index.js       | 24 ++++----
 .../Container/Map/components/Content/index.js | 57 +++++++++++++------
 2 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/src/pages/Container/Map/components/CenterUtils/index.js b/src/pages/Container/Map/components/CenterUtils/index.js
index d6e84e9..1d89206 100644
--- a/src/pages/Container/Map/components/CenterUtils/index.js
+++ b/src/pages/Container/Map/components/CenterUtils/index.js
@@ -101,26 +101,26 @@ function CenterUtils(props) {
               <AnimatePresence>
                 {(activeIndex === 0 || activeIndex === 1) && (
                   <motion.div key="west" {...statisticAnimation}>
-                  <div className="statistic">
-                    <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
-                    <div className="info">
-                      <div className="value">人数：33人</div>
-                      <div className="value">车辆：33辆</div>
+                    <div className="statistic">
+                      <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
+                      <div className="info">
+                        <div className="value">人数：33人</div>
+                        <div className="value">车辆：33辆</div>
+                      </div>
                     </div>
-                  </div>
                   </motion.div>
                 )}
               </AnimatePresence>
               <AnimatePresence>
                 {(activeIndex === 2 || activeIndex === 1) && (
                   <motion.div key="east" {...statisticAnimation}>
-                  <div className="statistic">
-                    <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div>
-                    <div className="info">
-                      <div className="value">人数：33人</div>
-                      <div className="value">车辆：33辆</div>
+                    <div className="statistic">
+                      <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div>
+                      <div className="info">
+                        <div className="value">人数：33人</div>
+                        <div className="value">车辆：33辆</div>
+                      </div>
                     </div>
-                  </div>
                   </motion.div>
                 )}
               </AnimatePresence>
diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js
index 8fc07c1..705bbc8 100644
--- a/src/pages/Container/Map/components/Content/index.js
+++ b/src/pages/Container/Map/components/Content/index.js
@@ -1,5 +1,5 @@
 import { AnimatePresence, motion } from "motion/react";
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import collapseMenuImg1 from "~/assets/images/map_bi/content/collapse_menu1.png";
 import collapseMenuImg2 from "~/assets/images/map_bi/content/collapse_menu2.png";
 import collapseMenuBg1 from "~/assets/images/map_bi/content/collapse_menu_bg1.png";
@@ -49,7 +49,20 @@ function Content(props) {
     ? branchOfficeUtilsList[bottomUtilsCurrentIndex]?.type || ""
     : portUtilsList[bottomUtilsCurrentIndex]?.type || "";
   const contentKey = `${currentPort}_${currentBranchOffice}_${bottomUtilsCurrentIndex}`;
+  const pageKey = `${currentPort}_${currentBranchOffice}`;
   const isPortContent = currentPort === "00003" && !currentBranchOffice;
+  const [leftButtonKey, setLeftButtonKey] = useState(bottomUtilsCurrentIndex);
+  const [rightButtonKey, setRightButtonKey] = useState(bottomUtilsCurrentIndex);
+  const leftAnimationKey = isLeftCollapsed ? leftButtonKey : bottomUtilsCurrentIndex;
+  const rightAnimationKey = isRightCollapsed ? rightButtonKey : bottomUtilsCurrentIndex;
+
+  // 页面层级直接包含在 animation key 中；底部操作栏变化时，仅展开状态的按钮更新 key。
+  useEffect(() => {
+    if (!isLeftCollapsed)
+      setLeftButtonKey(bottomUtilsCurrentIndex);
+    if (!isRightCollapsed)
+      setRightButtonKey(bottomUtilsCurrentIndex);
+  }, [bottomUtilsCurrentIndex]);
 
   const renderPortContent = () => {
     const contentMap = {
@@ -83,9 +96,10 @@ function Content(props) {
     return Component ? <Component /> : null;
   };
 
-  const renderCollapseButton = ({ side, isCollapsed, setIsCollapsed }) => {
+  const renderCollapseButton = ({ side, isCollapsed, setIsCollapsed, animationKey }) => {
     const isPort = isPortContent;
     const collapsedX = side === "left" ? -465 : 465;
+    const hiddenX = side === "left" ? -600 : 600;
     const containerRotation = !isPort && side === "right" ? 180 : 0;
     const imageRotation = isPort
       ? (isCollapsed ? 180 : 0)
@@ -93,10 +107,22 @@ function Content(props) {
 
     return (
       <motion.div
+        key={animationKey}
         className={`collapse_menu ${isPort ? "port" : "branch_office"} ${side}`}
         style={{ backgroundImage: `url(${isPort ? collapseMenuBg1 : collapseMenuBg2})` }}
-        animate={{ x: isCollapsed ? collapsedX : 0, rotate: containerRotation }}
-        transition={{ duration: isCollapsed ? 0.3 : 0.5, ease: isCollapsed ? "easeIn" : "easeOut" }}
+        initial={{ x: hiddenX, opacity: 0, rotate: containerRotation }}
+        animate={{
+          x: isCollapsed ? collapsedX : 0,
+          opacity: 1,
+          rotate: containerRotation,
+          transition: { duration: 0.5, ease: "easeOut" },
+        }}
+        exit={{
+          x: hiddenX,
+          opacity: 0,
+          rotate: containerRotation,
+          transition: { duration: 0.3, ease: "easeIn" },
+        }}
         onClick={() => setIsCollapsed(value => !value)}
       >
         <motion.img
@@ -146,26 +172,25 @@ function Content(props) {
         )}
       </AnimatePresence>
 
-      {!pureMap && isPortContent && renderCollapseButton({
-        side: "left",
-        isCollapsed: isLeftCollapsed,
-        setIsCollapsed: setIsLeftCollapsed,
-      })}
-
-      {!pureMap && currentBranchOffice && (
-        <>
-          {bottomUtilsCurrentType !== "camera" && renderCollapseButton({
+      <AnimatePresence mode="wait">
+        {!pureMap && (isPortContent || (currentBranchOffice && (bottomUtilsCurrentType !== "camera" || isLeftCollapsed)))
+          && renderCollapseButton({
             side: "left",
             isCollapsed: isLeftCollapsed,
             setIsCollapsed: setIsLeftCollapsed,
+            animationKey: `left_${pageKey}_${leftAnimationKey}`,
           })}
-          {bottomUtilsCurrentIndex === -1 && renderCollapseButton({
+      </AnimatePresence>
+
+      <AnimatePresence mode="wait">
+        {!pureMap && currentBranchOffice && bottomUtilsCurrentIndex === -1
+          && renderCollapseButton({
             side: "right",
             isCollapsed: isRightCollapsed,
             setIsCollapsed: setIsRightCollapsed,
+            animationKey: `right_${pageKey}_${rightAnimationKey}`,
           })}
-        </>
-      )}
+      </AnimatePresence>
     </div>
   );
 }