From 4b964b70677d76955abced966273ceec797dd600 Mon Sep 17 00:00:00 2001
From: ywb <347742090@qq.com>
Date: Sun, 17 May 2026 09:10:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20map=20rotation=20controls=20(90?=
 =?UTF-8?q?=C2=B0=20left/right/reset)=20in=20map=20visualization?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 agv_app/setting.html | 29 ++++++++++++++++++++---------
 agv_app/setting.js   |  4 ++++
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/agv_app/setting.html b/agv_app/setting.html
index 1ed76f2..0bdd838 100644
--- a/agv_app/setting.html
+++ b/agv_app/setting.html
@@ -47,16 +47,27 @@
           <p v-if="mapMsg" class="hint">{% raw %}{{ mapMsg }}{% endraw %}</p>
         </section>
         <section class="card" v-if="mapLoaded" style="margin-top:16px">
-          <h2>地图可视化</h2>
+          <div style="display:flex;align-items:center;justify-content:space-between">
+            <h2>地图可视化</h2>
+            <div style="display:flex;gap:8px;align-items:center">
+              <span style="font-size:12px;color:#888">旋转:</span>
+              <button class="btn btn-secondary" style="padding:4px 10px;font-size:12px" @click="rotateMap(-90)">↶ 90°</button>
+              <button class="btn btn-secondary" style="padding:4px 10px;font-size:12px" @click="rotateMap(90)">↷ 90°</button>
+              <button class="btn btn-secondary" style="padding:4px 10px;font-size:12px" @click="mapRotation = 0">重置</button>
+            </div>
+          </div>
           <div class="map-container" style="position:relative;background:#111;border-radius:8px;overflow:hidden">
-            <img :src="mapImageUrl" @error="onMapError" style="width:100%;display:block">
-            <!-- 地图覆盖层：显示点位坐标 -->
-            <div class="map-overlay">
-              <!-- 点位坐标点 -->
-              <div v-for="(p, pi) in missionConfig.positions" :key="'pdot-'+pi"
-                   class="map-dot point-dot"
-                   :style="{ left: getMapX(p.coords) + '%', top: getMapY(p.coords) + '%' }"
-                   :title="p.coords ? p.coords.map(c => c.toFixed(2)).join(', ') : ''">
+            <!-- 地图旋转 wrapper -->
+            <div :style="{ transform: 'rotate(' + mapRotation + 'deg)', transition: 'transform 0.3s ease' }">
+              <img :src="mapImageUrl" @error="onMapError" style="width:100%;display:block">
+              <!-- 地图覆盖层：显示点位坐标 -->
+              <div class="map-overlay">
+                <!-- 点位坐标点 -->
+                <div v-for="(p, pi) in missionConfig.positions" :key="'pdot-'+pi"
+                     class="map-dot point-dot"
+                     :style="{ left: getMapX(p.coords) + '%', top: getMapY(p.coords) + '%' }"
+                     :title="p.coords ? p.coords.map(c => c.toFixed(2)).join(', ') : ''">
+                </div>
               </div>
             </div>
           </div>
diff --git a/agv_app/setting.js b/agv_app/setting.js
index 4bc8c6d..6908f49 100644
--- a/agv_app/setting.js
+++ b/agv_app/setting.js
@@ -16,6 +16,7 @@ createApp({
       mapLoaded: false,
       mapImageUrl: '',
       mapMeta: null,
+      mapRotation: 0,
       // 点位
       points: [],
       newPointName: '',
@@ -110,6 +111,9 @@ createApp({
     onMapError() {
       this.mapMsg = '❌ 地图图像加载失败'
     },
+    rotateMap(deg) {
+      this.mapRotation = (this.mapRotation + deg) % 360
+    },
     getMapX(coords) {
       if (!coords || !this.mapMeta) return 50
       const [x, y, yaw] = coords