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 |   42 ++++++++++++++++++++++++++++++++++--------
 1 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 1c4b71c..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";
@@ -52,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);
@@ -59,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;
@@ -138,7 +141,9 @@
         setBatchSelectionVisible(false);
         setAreaSettingsVisible(false);
         setAreaDrawing(false);
+        setAreaListVisible(false);
         Tool.cancelAreaDrawing();
+        Tool.hideAreas(curZone, setShowAreas);
 
         setCurSprite(null);
         setBatchSprites([]);
@@ -213,6 +218,7 @@
         if (!mapContainer) {
             return;
         }
+        setAreaListVisible(false);
         Tool.removeSelectedEffect();
         if (curSprite) {
             if (mode === MAP_MODE.OBSERVER_MODE) {
@@ -363,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'),
@@ -390,7 +406,9 @@
                                 }
                             }}
                         >
-                            {translate('page.map.action.addArea')}
+                            {areaDrawing
+                                ? translate('page.map.action.cancelAddArea')
+                                : translate('page.map.action.addArea')}
                         </Button>
                     </>
                 )}
@@ -466,12 +484,12 @@
                         gap: 2
                     }}
                 >
-                    {mode !== MAP_MODE.AREA_MODE && (
+                    {mode === MAP_MODE.OBSERVER_MODE && (
                         <>
                             <AreaFab
                                 curZone={curZone}
-                                showRoutes={showRoutes}
-                                setShowRoutes={setShowRoutes}
+                                showAreas={showAreas}
+                                setShowAreas={setShowAreas}
                                 notify={notify}
                             />
                         </>
@@ -560,6 +578,14 @@
                 width={570}
             />
 
+            <AreaList
+                zoneId={curZone}
+                open={areaListVisible}
+                onClose={() => setAreaListVisible(false)}
+                setCurSprite={setCurSprite}
+                width={378}
+            />
+
         </Box>
     );
 }

--
Gitblit v1.9.1