From c65a357fc8b907af755e1ef6a2c201e31eb71e94 Mon Sep 17 00:00:00 2001
From: vincentlu <t1341870251@gmail.com>
Date: 星期六, 07 二月 2026 13:50:38 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/MapPage.jsx |   46 ++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index bf36d83..8b229e2 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -8,12 +8,13 @@
     useTheme,
     Fab,
 } from '@mui/material';
-import { MAP_MODE, MAP_DEFAULT_ROTATION } from "./constants";
+import { MAP_MODE, MAP_DEFAULT_ROTATION, setMapPreferences } from "./constants";
 import Player from './player';
 import * as Tool from './tool';
 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);
@@ -66,7 +68,9 @@
     });
 
     const handleResize = () => {
-        if (!contentRef) { return; }
+        if (!contentRef.current || !player) {
+            return;
+        }
         const width = contentRef.current.offsetWidth;
         const height = contentRef.current.offsetHeight;
         player.resize(width, height);
@@ -83,6 +87,7 @@
             Tool.setThemeMode(themeMode);
             Http.setNotify(notify);
             Http.setMapContainer(player.mapContainer);
+            await Http.fetchMapPreferences(curZone, setMapPreferences);
             websocket = new WebSocketClient('/ws/map/websocket');
 
             await Http.fetchMapData(curZone, setRcsStatus, setCurSprite);
@@ -122,6 +127,9 @@
     }, [sidebarOpen]);
 
     useEffect(() => {
+        if (!player) {
+            return;
+        }
         player.setTheme(themeMode);
         Tool.setThemeMode(themeMode);
     }, [themeMode])
@@ -139,6 +147,7 @@
         setBatchSelectionVisible(false);
         setAreaSettingsVisible(false);
         setAreaDrawing(false);
+        setAreaListVisible(false);
         Tool.cancelAreaDrawing();
         Tool.hideAreas(curZone, setShowAreas);
 
@@ -215,6 +224,7 @@
         if (!mapContainer) {
             return;
         }
+        setAreaListVisible(false);
         Tool.removeSelectedEffect();
         if (curSprite) {
             if (mode === MAP_MODE.OBSERVER_MODE) {
@@ -365,11 +375,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'),
@@ -392,7 +412,9 @@
                                 }
                             }}
                         >
-                            {translate('page.map.action.addArea')}
+                            {areaDrawing
+                                ? translate('page.map.action.cancelAddArea')
+                                : translate('page.map.action.addArea')}
                         </Button>
                     </>
                 )}
@@ -468,7 +490,7 @@
                         gap: 2
                     }}
                 >
-                    {mode !== MAP_MODE.AREA_MODE && (
+                    {mode === MAP_MODE.OBSERVER_MODE && (
                         <>
                             <AreaFab
                                 curZone={curZone}
@@ -562,6 +584,14 @@
                 width={570}
             />
 
+            <AreaList
+                zoneId={curZone}
+                open={areaListVisible}
+                onClose={() => setAreaListVisible(false)}
+                setCurSprite={setCurSprite}
+                width={378}
+            />
+
         </Box>
     );
 }

--
Gitblit v1.9.1