From 1bc33546a044cbc84dd9595c19dbcd9a4e309fc9 Mon Sep 17 00:00:00 2001
From: vincentlu <t1341870251@gmail.com>
Date: 星期六, 10 一月 2026 14:06:10 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/MapPage.jsx |   47 ++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 9251563..4981505 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -14,6 +14,7 @@
 import { NotificationProvider, useNotification } from './Notification';
 import Insight from "./insight";
 import Device from "./Device";
+import AreaList from "./AreaList";
 import Settings from "./settings";
 import Batch from "./batch";
 import AreaSettings from "./areaSettings";
@@ -26,6 +27,7 @@
 import PulseSignal from "../page/components/PulseSignal";
 import FakeFab from "./header/FakeFab";
 import RouteFab from "./header/RouteFab";
+import AreaFab from "./header/AreaFab";
 import MoreOperate from "./header/MoreOperate";
 
 let player;
@@ -51,6 +53,7 @@
     const [settingsVisible, setSettingsVisible] = useState(false);
     const [batchSelectionVisible, setBatchSelectionVisible] = useState(false);
     const [areaSettingsVisible, setAreaSettingsVisible] = useState(false);
+    const [areaListVisible, setAreaListVisible] = useState(false);
     const [areaDrawing, setAreaDrawing] = useState(false);
 
     const [curSprite, setCurSprite] = useState(null);
@@ -58,6 +61,7 @@
 
     const [rcsStatus, setRcsStatus] = useState(null);
     const [showRoutes, setShowRoutes] = useState(false);
+    const [showAreas, setShowAreas] = useState(false);
     const [curZone, setCurZone] = useState(() => {
         const storedValue = localStorage.getItem('curZone');
         return storedValue !== null ? JSON.parse(storedValue) : null;
@@ -137,7 +141,9 @@
         setBatchSelectionVisible(false);
         setAreaSettingsVisible(false);
         setAreaDrawing(false);
+        setAreaListVisible(false);
         Tool.cancelAreaDrawing();
+        Tool.hideAreas(curZone, setShowAreas);
 
         setCurSprite(null);
         setBatchSprites([]);
@@ -212,6 +218,7 @@
         if (!mapContainer) {
             return;
         }
+        setAreaListVisible(false);
         Tool.removeSelectedEffect();
         if (curSprite) {
             if (mode === MAP_MODE.OBSERVER_MODE) {
@@ -362,11 +369,21 @@
                 {mode === MAP_MODE.AREA_MODE && (
                     <>
                         <Button
-                            variant={areaDrawing ? "outlined" : "contained"}
-                            color="primary"
-                            sx={{}}
-                            disabled={areaDrawing}
+                            variant="outlined"
+                            onClick={() => setAreaListVisible(!areaListVisible)}
+                            sx={{ mr: 2 }}
+                        >
+                            {translate('page.map.action.areaList')}
+                        </Button>
+                        <Button
+                            variant="contained"
+                            color={areaDrawing ? "error" : "primary"}
                             onClick={() => {
+                                if (areaDrawing) {
+                                    Tool.cancelAreaDrawing();
+                                    setAreaDrawing(false);
+                                    return;
+                                }
                                 setCurSprite(null);
                                 const started = Tool.startAreaDrawing({
                                     promptText: translate('page.map.area.prompt.nameInput'),
@@ -389,7 +406,9 @@
                                 }
                             }}
                         >
-                            {translate('page.map.action.addArea')}
+                            {areaDrawing
+                                ? translate('page.map.action.cancelAddArea')
+                                : translate('page.map.action.addArea')}
                         </Button>
                     </>
                 )}
@@ -465,6 +484,16 @@
                         gap: 2
                     }}
                 >
+                    {mode === MAP_MODE.OBSERVER_MODE && (
+                        <>
+                            <AreaFab
+                                curZone={curZone}
+                                showAreas={showAreas}
+                                setShowAreas={setShowAreas}
+                                notify={notify}
+                            />
+                        </>
+                    )}
                     {mode !== MAP_MODE.MOVABLE_MODE && (
                         <>
                             <RouteFab
@@ -549,6 +578,14 @@
                 width={570}
             />
 
+            <AreaList
+                zoneId={curZone}
+                open={areaListVisible}
+                onClose={() => setAreaListVisible(false)}
+                setCurSprite={setCurSprite}
+                width={378}
+            />
+
         </Box>
     );
 }

--
Gitblit v1.9.1