diff --git a/src/views/dashboard1/index.less b/src/views/dashboard1/index.less
index 85debb0..8df452d 100644
--- a/src/views/dashboard1/index.less
+++ b/src/views/dashboard1/index.less
@@ -352,6 +352,18 @@
     content: "视";
   }
 
+  .evidence-photo {
+    display: block;
+    width: 88px;
+    height: 52px;
+    object-fit: cover;
+    border: 1px solid rgba(87, 198, 255, 0.18);
+    box-shadow:
+      inset 0 0 0 1px rgba(130, 232, 255, 0.08),
+      0 8px 18px rgba(2, 10, 18, 0.24);
+    background: rgba(8, 31, 62, 0.58);
+  }
+
   .table-actions {
     display: flex;
     align-items: center;
@@ -637,7 +649,6 @@
   .tree-panel {
     flex: 1;
     min-height: 0;
-    overflow: auto;
     display: flex;
     flex-direction: column;
     gap: 12px;
@@ -703,10 +714,45 @@
 
   .tree-device-list {
     margin-top: 10px;
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
     display: flex;
     flex-direction: column;
     gap: 8px;
     padding-left: 10px;
+    padding-right: 2px;
+  }
+
+  .tree-panel-footer {
+    padding: 12px 10px 2px;
+    border-top: 1px solid rgba(77, 188, 248, 0.12);
+  }
+
+  .tree-playback-btn {
+    width: 100%;
+    height: 40px;
+    border: 1px solid rgba(102, 235, 255, 0.28);
+    background: linear-gradient(
+      90deg,
+      rgba(20, 86, 152, 0.94) 0%,
+      rgba(10, 42, 86, 0.98) 100%
+    );
+    color: #eefcff;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    cursor: pointer;
+    box-shadow: inset 0 0 0 1px rgba(102, 235, 255, 0.08),
+      0 0 18px rgba(29, 133, 222, 0.12);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  }
+
+  .tree-playback-btn:hover {
+    transform: translateY(-1px);
+    border-color: rgba(102, 235, 255, 0.54);
+    box-shadow: inset 0 0 0 1px rgba(102, 235, 255, 0.12),
+      0 0 24px rgba(52, 177, 255, 0.18);
   }
 
   .tree-device-btn {
@@ -762,7 +808,7 @@
 
   .grid-switch-btn,
   .playback-btn,
-  .playback-filter input {
+  .playback-field input {
     height: 34px;
     border: 1px solid rgba(87, 198, 255, 0.18);
     background: rgba(8, 31, 62, 0.72);
@@ -872,42 +918,103 @@
     letter-spacing: 1px;
   }
 
-  .playback-panel {
-    margin-top: 16px;
-    padding: 14px 16px;
-    background: rgba(8, 34, 68, 0.62);
-    border: 1px solid rgba(77, 188, 248, 0.12);
+  .playback-dialog-mask {
+    position: fixed;
+    inset: 0;
+    z-index: 90;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(1, 8, 18, 0.74);
+    backdrop-filter: blur(8px);
   }
 
-  .playback-header,
-  .playback-controls,
-  .playback-filter {
+  .playback-dialog {
+    width: min(960px, calc(100vw - 80px));
+    max-height: calc(100vh - 90px);
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    padding: 24px 24px 22px;
+    background: linear-gradient(
+      180deg,
+      rgba(8, 30, 58, 0.98) 0%,
+      rgba(4, 18, 36, 0.98) 100%
+    );
+    border: 1px solid rgba(89, 203, 255, 0.24);
+    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34),
+      inset 0 0 0 1px rgba(64, 180, 244, 0.08);
+  }
+
+  .playback-dialog-header,
+  .playback-dialog-controls {
     display: flex;
     align-items: center;
   }
 
-  .playback-header {
+  .playback-dialog-header {
     justify-content: space-between;
     gap: 16px;
   }
 
-  .playback-title {
+  .playback-dialog-title {
     color: #f2fbff;
-    font-size: 15px;
+    font-size: 20px;
     font-weight: 700;
+    letter-spacing: 1px;
   }
 
-  .playback-filter {
+  .playback-dialog-meta {
+    margin-top: 6px;
+    color: rgba(166, 219, 245, 0.76);
+    font-size: 12px;
+  }
+
+  .playback-dialog-filter {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) 136px;
+    gap: 14px;
+    align-items: end;
+  }
+
+  .playback-field {
+    display: flex;
+    flex-direction: column;
     gap: 8px;
   }
 
-  .playback-filter input {
-    padding: 0 10px;
+  .playback-field span {
+    color: rgba(182, 232, 248, 0.78);
+    font-size: 12px;
   }
 
-  .playback-controls {
+  .playback-field input {
+    width: 100%;
+    padding: 0 12px;
+  }
+
+  .playback-launch-btn {
+    height: 38px;
+  }
+
+  .playback-preview {
+    position: relative;
+    height: 420px;
+    overflow: hidden;
+    border: 1px solid rgba(82, 191, 255, 0.16);
+    background: radial-gradient(circle at 50% 50%, rgba(34, 116, 190, 0.16), rgba(4, 16, 33, 0.96));
+  }
+
+  .playback-preview video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .playback-dialog-controls {
     gap: 10px;
-    margin-top: 14px;
+    flex-wrap: wrap;
   }
 
   .playback-track {
@@ -1366,9 +1473,12 @@
         flex: 1;
         overflow: hidden;
         background:
-          radial-gradient(circle at 50% 50%, rgba(32, 112, 183, 0.12), transparent 45%),
-          linear-gradient(180deg, rgba(5, 17, 35, 0.94) 0%, rgba(3, 12, 27, 0.96) 100%);
+          radial-gradient(circle at 50% 58%, rgba(46, 163, 224, 0.12), transparent 34%),
+          linear-gradient(180deg, rgba(6, 18, 31, 0.96) 0%, rgba(3, 10, 22, 0.98) 100%);
         border: 1px solid rgba(82, 191, 255, 0.16);
+        box-shadow:
+          inset 0 0 38px rgba(24, 92, 140, 0.18),
+          inset 0 -46px 72px rgba(0, 0, 0, 0.34);
       }
 
       .nav-map-stage::before {
@@ -1376,10 +1486,24 @@
         position: absolute;
         inset: 0;
         background:
-          linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
-        background-size: 48px 48px;
-        opacity: 0.5;
+          linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0, transparent 36%),
+          linear-gradient(rgba(102, 208, 255, 0.028) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(102, 208, 255, 0.022) 1px, transparent 1px);
+        background-size:
+          100% 100%,
+          46px 46px,
+          46px 46px;
+        opacity: 0.42;
+        pointer-events: none;
+      }
+
+      .nav-map-stage::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background:
+          linear-gradient(90deg, rgba(2, 8, 18, 0.62), transparent 18%, transparent 82%, rgba(2, 8, 18, 0.62)),
+          linear-gradient(180deg, rgba(2, 8, 18, 0.3), transparent 20%, transparent 80%, rgba(2, 8, 18, 0.54));
         pointer-events: none;
       }
 
@@ -1393,35 +1517,60 @@
         stroke-width: 1;
       }
 
-      .cloud-layer circle {
-        fill: rgba(140, 230, 255, 0.74);
+      .corridor-lane {
+        fill: rgba(14, 48, 76, 0.46);
+        stroke: rgba(104, 222, 255, 0.08);
+        stroke-width: 1.2;
+        filter: drop-shadow(0 0 16px rgba(54, 163, 235, 0.2));
+      }
+
+      .corridor-edge {
+        fill: none;
+        stroke: rgba(133, 224, 255, 0.36);
+        stroke-width: 1.5;
+        stroke-dasharray: 4 8;
+        stroke-linecap: round;
+        opacity: 0.72;
+      }
+
+      .wall-layer circle {
+        fill: rgba(153, 241, 255, 0.82);
         opacity: 0.88;
-        filter: drop-shadow(0 0 4px rgba(82, 198, 255, 0.28));
+        filter: drop-shadow(0 0 8px rgba(86, 214, 255, 0.24));
+      }
+
+      .wall-upper circle {
+        fill: rgba(151, 234, 255, 0.76);
+      }
+
+      .wall-lower circle {
+        fill: rgba(110, 216, 255, 0.64);
       }
 
       .route-glow {
         fill: none;
-        stroke: rgba(88, 219, 255, 0.18);
-        stroke-width: 18;
+        stroke: rgba(88, 219, 255, 0.16);
+        stroke-width: 12;
         stroke-linecap: round;
         stroke-linejoin: round;
       }
 
       .route-line {
         fill: none;
-        stroke: #67e3ff;
-        stroke-width: 5;
+        stroke: #76efff;
+        stroke-width: 4;
         stroke-linecap: round;
         stroke-linejoin: round;
-        stroke-dasharray: 12 12;
+        stroke-dasharray: 10 8;
         animation: routeFlow 12s linear infinite;
-        filter: drop-shadow(0 0 10px rgba(70, 212, 255, 0.32));
+        filter: drop-shadow(0 0 10px rgba(70, 212, 255, 0.26));
       }
 
       .checkpoint circle {
-        fill: rgba(6, 22, 51, 0.95);
-        stroke: #7ae5ff;
+        fill: rgba(5, 18, 42, 0.96);
+        stroke: #8becff;
         stroke-width: 2;
+        filter: drop-shadow(0 0 12px rgba(97, 220, 255, 0.24));
       }
 
       .checkpoint text {
@@ -1451,6 +1600,7 @@
         color: rgba(183, 234, 255, 0.82);
         font-size: 11px;
         letter-spacing: 0.7px;
+        text-shadow: 0 0 8px rgba(56, 190, 248, 0.22);
       }
 
       .nav-map-overlay.top-left {
@@ -1808,27 +1958,73 @@
           rgba(8, 31, 68, 0.92) 0%,
           rgba(10, 49, 92, 0.58) 100%
         );
-        border-left: 3px solid rgba(92, 196, 255, 0.76);
-        box-shadow: inset 0 0 0 1px rgba(65, 174, 243, 0.08);
+        border: 1px solid rgba(78, 194, 255, 0.14);
+        box-shadow:
+          inset 0 0 0 1px rgba(65, 174, 243, 0.08),
+          0 12px 22px rgba(3, 14, 28, 0.22);
       }
 
-      .alert-main {
+      .alert-content {
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        gap: 14px;
+      }
+
+      .alert-thumbnail {
+        width: 124px;
+        height: 78px;
+        flex: 0 0 124px;
+        object-fit: cover;
+        border: 1px solid rgba(116, 219, 255, 0.24);
+        box-shadow: 0 0 0 1px rgba(78, 194, 255, 0.08);
+        background: rgba(6, 22, 39, 0.72);
+      }
+
+      .alert-info {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        gap: 10px;
+      }
+
+      .alert-summary {
+        width: 100%;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
         gap: 12px;
-        margin-bottom: 8px;
+        align-items: start;
+      }
+
+      .alert-field {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .alert-field-right {
+        align-items: flex-start;
+      }
+
+      .alert-label {
+        color: rgba(146, 213, 238, 0.72);
+        font-size: 11px;
+        line-height: 1;
       }
 
       .alert-title {
         color: #f0fbff;
         font-size: 15px;
         font-weight: 700;
+        letter-spacing: 0.4px;
+        line-height: 1.2;
       }
 
       .alert-level {
-        min-width: 46px;
-        padding: 3px 8px;
+        min-width: 48px;
+        padding: 4px 10px;
         border-radius: 999px;
         text-align: center;
         font-size: 11px;
@@ -1853,12 +2049,17 @@
         border: 1px solid rgba(110, 255, 197, 0.2);
       }
 
-      .alert-meta {
+      .alert-time-row {
+        width: 100%;
         display: flex;
-        justify-content: space-between;
-        gap: 10px;
-        color: rgba(171, 223, 246, 0.8);
-        font-size: 11px;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .alert-time {
+        color: rgba(190, 234, 249, 0.84);
+        font-size: 12px;
+        line-height: 1.2;
       }
 
       .alert-empty {
@@ -1872,8 +2073,12 @@
     }
 
     .video-card {
+      > .card-header .title {
+        margin-left: 80px;
+      }
+
       .video-panel {
-        margin: 12px 24px 0;
+        margin: 12px 4px 0 20px;
         height: calc(100% - 56px);
         display: flex;
         flex-direction: column;
@@ -1984,8 +2189,12 @@
     }
 
     .control-card {
+      > .card-header .title {
+        margin-left: 80px;
+      }
+
       .control-panel {
-        margin: 12px 24px 0;
+        margin: 12px 4px 0 20px;
         display: flex;
         flex-direction: column;
         gap: 14px;
@@ -2032,7 +2241,7 @@
 
       .control-top-row {
         display: grid;
-        grid-template-columns: minmax(0, calc(50% - 10px)) minmax(0, calc(50% + 10px));
+        grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 14px;
         align-items: stretch;
       }
@@ -2064,6 +2273,45 @@
         font-size: 12px;
       }
 
+      .drive-mode-tabs {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 8px;
+        margin: 2px 0 10px;
+      }
+
+      .drive-mode-tab {
+        height: 34px;
+        border: 1px solid rgba(87, 198, 255, 0.18);
+        background: rgba(8, 31, 62, 0.72);
+        color: rgba(192, 235, 250, 0.78);
+        font-size: 12px;
+        font-weight: 700;
+        cursor: pointer;
+        transition:
+          border-color 0.18s ease,
+          background 0.18s ease,
+          box-shadow 0.18s ease,
+          transform 0.18s ease;
+
+        &:hover {
+          transform: translateY(-1px);
+          border-color: rgba(102, 235, 255, 0.38);
+        }
+
+        &.active {
+          color: #eefcff;
+          border-color: rgba(102, 235, 255, 0.7);
+          background: linear-gradient(
+            90deg,
+            rgba(24, 102, 180, 0.88),
+            rgba(35, 158, 215, 0.88)
+          );
+          box-shadow: 0 0 14px rgba(52, 177, 255, 0.18);
+        }
+      }
+
       .vehicle-pad {
         width: 208px;
         height: 208px;
@@ -2310,6 +2558,63 @@
         transform: scale(0.88);
       }
 
+      .gimbal-preset-panel {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin: 2px 0 10px;
+        padding: 0 2px;
+      }
+
+      .gimbal-preset-group {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+      }
+
+      .gimbal-preset-select {
+        width: 100%;
+        height: 40px;
+        padding: 0 12px;
+        border: 1px solid rgba(91, 208, 255, 0.22);
+        background: linear-gradient(
+          180deg,
+          rgba(10, 36, 72, 0.9) 0%,
+          rgba(7, 23, 48, 0.82) 100%
+        );
+        color: #eefcff;
+        font-size: 12px;
+        outline: none;
+        box-shadow: inset 0 0 14px rgba(62, 177, 248, 0.08);
+      }
+
+      .gimbal-preset-btn {
+        flex: 0 0 72px;
+        height: 38px;
+        border: 1px solid rgba(91, 208, 255, 0.26);
+        background: linear-gradient(
+          90deg,
+          rgba(16, 74, 132, 0.96) 0%,
+          rgba(8, 38, 78, 0.98) 56%,
+          rgba(7, 26, 52, 0.98) 100%
+        );
+        color: #eefcff;
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.8px;
+        cursor: pointer;
+        box-shadow: inset 0 0 0 1px rgba(57, 180, 246, 0.08),
+          0 0 18px rgba(29, 133, 222, 0.12);
+        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+
+        &:hover {
+          transform: translateY(-1px);
+          border-color: rgba(102, 235, 255, 0.72);
+          box-shadow: inset 0 0 0 1px rgba(57, 180, 246, 0.12),
+            0 0 22px rgba(52, 177, 255, 0.22);
+        }
+      }
+
       .lift-control-panel {
         display: flex;
         flex-direction: column;
diff --git a/src/views/dashboard1/pages/AlarmManagementPage.vue b/src/views/dashboard1/pages/AlarmManagementPage.vue
index bc95d6a..84fb44a 100644
--- a/src/views/dashboard1/pages/AlarmManagementPage.vue
+++ b/src/views/dashboard1/pages/AlarmManagementPage.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
+import { getRecentAlertPhoto } from "../shared/alertPhotos";
 
 interface AlarmRecord {
   id: string;
   type: string;
   robot: string;
   photo: string;
-  video: string;
-  status: "待研判" | "待处理" | "处置完成" | "误判";
+  status: "待处理";
   time: string;
 }
 
@@ -16,17 +16,15 @@ const alarms: AlarmRecord[] = [
     id: "AL-001",
     type: "线缆破损",
     robot: "巡检机器人 R1",
-    photo: "破损抓拍_001.jpg",
-    video: "线缆破损_001.mp4",
-    status: "待研判",
+    photo: getRecentAlertPhoto("线缆破损"),
+    status: "待处理",
     time: "2026-06-23 10:24:18",
   },
   {
     id: "AL-002",
     type: "局部高温",
     robot: "巡检机器人 Q1",
-    photo: "高温抓拍_017.jpg",
-    video: "局部高温_017.mp4",
+    photo: getRecentAlertPhoto("局部高温"),
     status: "待处理",
     time: "2026-06-23 10:18:42",
   },
@@ -34,26 +32,23 @@ const alarms: AlarmRecord[] = [
     id: "AL-003",
     type: "墙体裂缝",
     robot: "巡检机器人 N3",
-    photo: "裂缝取证_006.jpg",
-    video: "墙体裂缝_006.mp4",
-    status: "处置完成",
+    photo: getRecentAlertPhoto("墙体裂缝"),
+    status: "待处理",
     time: "2026-06-23 09:56:11",
   },
   {
     id: "AL-004",
     type: "水渍渗漏",
     robot: "巡检机器人 R2",
-    photo: "渗漏抓拍_012.jpg",
-    video: "水渍渗漏_012.mp4",
-    status: "误判",
+    photo: getRecentAlertPhoto("局部高温"),
+    status: "待处理",
     time: "2026-06-23 09:20:36",
   },
   {
     id: "AL-005",
     type: "应急门开启异常",
     robot: "巡检机器人 N1",
-    photo: "门禁取证_031.jpg",
-    video: "门禁异常_031.mp4",
+    photo: getRecentAlertPhoto("线缆破损"),
     status: "待处理",
     time: "2026-06-23 08:42:57",
   },
@@ -101,10 +96,7 @@ const visiblePages = computed(() => {
 
 function getAlarmStatusClass(status: AlarmRecord["status"]) {
   const classMap = {
-    待研判: "alarm-status-pending",
     待处理: "alarm-status-handling",
-    处置完成: "alarm-status-finished",
-    误判: "alarm-status-false",
   };
 
   return classMap[status];
@@ -125,7 +117,6 @@ function handleSearch() {
       <section class="page-card management-table-card">
         <div class="management-toolbar">
           <div class="toolbar-left">
-            <button class="page-action-btn primary" type="button">批量通知</button>
             <button class="page-action-btn ghost" type="button">导出告警</button>
             <input
               v-model="keyword"
@@ -146,7 +137,6 @@ function handleSearch() {
                 <th>告警类型</th>
                 <th>报警机器人</th>
                 <th>取证照片</th>
-                <th>取证视频</th>
                 <th>案件状态</th>
                 <th>告警时间</th>
                 <th>操作</th>
@@ -158,10 +148,7 @@ function handleSearch() {
                 <td>{{ alarm.type }}</td>
                 <td>{{ alarm.robot }}</td>
                 <td>
-                  <div class="evidence-chip photo">{{ alarm.photo }}</div>
-                </td>
-                <td>
-                  <div class="evidence-chip video">{{ alarm.video }}</div>
+                  <img class="evidence-photo" :src="alarm.photo" :alt="`${alarm.type}取证照片`" />
                 </td>
                 <td>
                   <span :class="['table-status', getAlarmStatusClass(alarm.status)]">
@@ -171,8 +158,6 @@ function handleSearch() {
                 <td>{{ alarm.time }}</td>
                 <td>
                   <div class="table-actions">
-                    <button type="button">研判</button>
-                    <button type="button">通知</button>
                     <button class="danger" type="button">删除</button>
                   </div>
                 </td>
diff --git a/src/views/dashboard1/pages/EquipmentManagementPage.vue b/src/views/dashboard1/pages/EquipmentManagementPage.vue
index e82d7e0..1a14fdf 100644
--- a/src/views/dashboard1/pages/EquipmentManagementPage.vue
+++ b/src/views/dashboard1/pages/EquipmentManagementPage.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, reactive, ref } from "vue";
+import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from "vue";
 
 type DeviceStatus = "空闲" | "离线" | "充电中";
-type PatrolPointType = "常规巡航" | "热成像" | "泵房复核";
+type PatrolPointType = "业务点" | "途经点";
+type PointDirection = "正向" | "反向";
 type PatrolTaskMode = "定时" | "周期" | "临时";
-type EditorMode = "select" | "normal" | "thermal" | "pump";
-type ConfigSideTab = "point" | "plan";
-
+type EditorMode = "select" | "normal" | "thermal" | "pump" | "waypoint";
 interface DeviceRecord {
   id: string;
   name: string;
@@ -14,17 +13,17 @@ interface DeviceRecord {
   status: DeviceStatus;
   project: string;
   gimbalSerial: string;
+  whiteLightUrl?: string;
+  infraredUrl?: string;
   createdAt: string;
 }
 
 interface DeviceFormState {
   id: string;
   name: string;
-  battery: string;
-  status: DeviceStatus;
-  project: string;
   gimbalSerial: string;
-  createdAt: string;
+  whiteLightUrl: string;
+  infraredUrl: string;
 }
 
 interface MapRecord {
@@ -38,8 +37,10 @@ interface MapRecord {
 
 interface PatrolPoint {
   id: string;
+  planId: string;
   name: string;
   type: PatrolPointType;
+  direction: PointDirection;
   x: number;
   y: number;
   routeSpeed: string;
@@ -57,12 +58,19 @@ interface PatrolTask {
   cycle: string;
   routeRange: string;
   enabled: boolean;
+  color: string;
+  loopCount: number;
+  returnMode: string;
+  speed: string;
+  stay: string;
+  rule: string;
   updatedAt: string;
 }
 
 interface DeviceConfigState {
   maps: MapRecord[];
   activeMapId: string;
+  activePlanId: string;
   mapLoaded: boolean;
   mapSyncing: boolean;
   syncProgress: number;
@@ -73,12 +81,12 @@ interface DeviceConfigState {
 }
 
 interface PlanFormState {
-  name: string;
-  mode: PatrolTaskMode;
-  time: string;
-  cycle: string;
-  routeRange: string;
-  enabled: boolean;
+  roundName: string;
+  pointName: string;
+  pointType: PatrolPointType;
+  pointDirection: PointDirection;
+  liftHeight: string;
+  gimbalPreset: string;
 }
 
 interface BatchFormState {
@@ -88,16 +96,13 @@ interface BatchFormState {
   gimbalPreset: string;
 }
 
-const statusOptions: DeviceStatus[] = ["空闲", "离线", "充电中"];
-const projectOptions = ["西江隧道", "青云隧道", "南山隧道"];
-const pointTypeOptions: PatrolPointType[] = ["常规巡航", "热成像", "泵房复核"];
-const patrolModeOptions: PatrolTaskMode[] = ["定时", "周期", "临时"];
+const defaultProject = "西江隧道";
+const pointTypeOptions: PatrolPointType[] = ["业务点", "途经点"];
+const pointDirectionOptions: PointDirection[] = ["正向", "反向"];
 
 const editorModes: Array<{ id: EditorMode; label: string }> = [
-  { id: "select", label: "框选 / 多选" },
-  { id: "normal", label: "新增常规点" },
-  { id: "thermal", label: "新增热成像点" },
-  { id: "pump", label: "新增泵房点" },
+  { id: "normal", label: "新增业务点" },
+  { id: "waypoint", label: "新增途经点" },
 ];
 
 const devices = ref<DeviceRecord[]>([
@@ -216,32 +221,34 @@ const currentPage = ref(1);
 const keyword = ref("");
 const dialogVisible = ref(false);
 const configDialogVisible = ref(false);
+const planDialogVisible = ref(false);
+const saveProgressVisible = ref(false);
+const saveProgressValue = ref(0);
+const saveProgressMessage = ref("数据正在保存中...");
 const editingId = ref<string | null>(null);
 const configuringDeviceId = ref<string | null>(null);
-const editingPlanId = ref<string | null>(null);
+const editingPointId = ref<string | null>(null);
 const formError = ref("");
 const mapEditorMode = ref<EditorMode>("select");
-const activeConfigSideTab = ref<ConfigSideTab>("point");
 const mapStageRef = ref<HTMLElement | null>(null);
+const mapCanvasRef = ref<HTMLCanvasElement | null>(null);
 const suppressStageClick = ref(false);
 
 const form = reactive<DeviceFormState>({
   id: "",
   name: "",
-  battery: "",
-  status: "空闲",
-  project: projectOptions[0],
   gimbalSerial: "",
-  createdAt: "",
+  whiteLightUrl: "",
+  infraredUrl: "",
 });
 
 const planForm = reactive<PlanFormState>({
-  name: "",
-  mode: "定时",
-  time: "02:00",
-  cycle: "每日",
-  routeRange: "全线路",
-  enabled: true,
+  roundName: "",
+  pointName: "",
+  pointType: "业务点",
+  pointDirection: "正向",
+  liftHeight: "1500",
+  gimbalPreset: "预置点1",
 });
 
 const batchForm = reactive<BatchFormState>({
@@ -260,7 +267,56 @@ const selectionBox = reactive({
   endY: 0,
 });
 
+const dragPointState = reactive({
+  active: false,
+  moved: false,
+  pointId: "",
+  offsetX: 0,
+  offsetY: 0,
+});
+
 let syncTimer: number | null = null;
+let mapRenderFrame: number | null = null;
+let mapResizeObserver: ResizeObserver | null = null;
+let mapPointerTrackingBound = false;
+let saveProgressTimer: number | null = null;
+let saveProgressCloseTimer: number | null = null;
+
+const mapPointPalette: Record<
+  PatrolPointType,
+  {
+    stroke: string;
+    glow: string;
+    labelBackground: string;
+    labelBorder: string;
+  }
+> = {
+  业务点: {
+    stroke: "#66d7ff",
+    glow: "rgba(102, 215, 255, 0.28)",
+    labelBackground: "rgba(16, 74, 118, 0.92)",
+    labelBorder: "rgba(91, 208, 255, 0.18)",
+  },
+  途经点: {
+    stroke: "#9af7c8",
+    glow: "rgba(154, 247, 200, 0.3)",
+    labelBackground: "rgba(18, 90, 66, 0.94)",
+    labelBorder: "rgba(91, 208, 255, 0.18)",
+  },
+};
+
+const selectedPointHighlight = {
+  stroke: "#ffb26e",
+  glow: "rgba(255, 178, 110, 0.32)",
+  labelBackground: "rgba(122, 72, 18, 0.94)",
+  labelBorder: "rgba(255, 196, 118, 0.72)",
+};
+
+const pointCloudSamples = Array.from({ length: 48 }, (_, index) => ({
+  x: 8 + ((index * 1.9) % 86),
+  y: 18 + ((index * 7.3) % 48),
+  radius: index % 3 === 0 ? 0.45 : 0.3,
+}));
 
 function nowString() {
   return new Date().toLocaleString("zh-CN", { hour12: false });
@@ -291,50 +347,58 @@ function buildDevicePoints(device: DeviceRecord): PatrolPoint[] {
   return [
     {
       id: `${device.id}-P01`,
+      planId: `${device.id}-TASK01`,
       name: `${device.project} 入口巡航点`,
-      type: "常规巡航",
+      type: "业务点",
+      direction: "正向",
       x: 12,
       y: 62,
       routeSpeed: "0.42",
       stopDuration: "8",
       liftHeight: "1350",
-      gimbalPreset: "P-01",
+      gimbalPreset: "预置点1",
       note: "入口洞门全景与车道观察",
     },
     {
       id: `${device.id}-P02`,
+      planId: `${device.id}-TASK01`,
       name: `${device.project} 热点复核点`,
-      type: "热成像",
+      type: "业务点",
+      direction: "反向",
       x: 38,
       y: 44,
       routeSpeed: "0.28",
       stopDuration: "12",
       liftHeight: "1680",
-      gimbalPreset: "T-03",
+      gimbalPreset: "预置点2",
       note: "热成像复核桥架及电缆温升",
     },
     {
       id: `${device.id}-P03`,
-      name: `${device.project} 泵房设备点`,
-      type: "泵房复核",
+      planId: `${device.id}-TASK02`,
+      name: `${device.project} 泵房途经点`,
+      type: "途经点",
+      direction: "正向",
       x: 66,
       y: 56,
       routeSpeed: "0.24",
       stopDuration: "18",
       liftHeight: "1820",
-      gimbalPreset: "G-07",
+      gimbalPreset: "预置点3",
       note: "停留采集泵房铭牌与压力表",
     },
     {
       id: `${device.id}-P04`,
+      planId: `${device.id}-TASK02`,
       name: `${device.project} 终点回库点`,
-      type: "常规巡航",
+      type: "业务点",
+      direction: "反向",
       x: 84,
       y: 34,
       routeSpeed: "0.35",
       stopDuration: "6",
       liftHeight: "1260",
-      gimbalPreset: "P-09",
+      gimbalPreset: "预置点4",
       note: "回库前执行末端巡检确认",
     },
   ];
@@ -350,6 +414,12 @@ function buildDevicePlans(device: DeviceRecord): PatrolTask[] {
       cycle: "每日",
       routeRange: "入口至中段",
       enabled: true,
+      color: "#5ce1e6",
+      loopCount: 1,
+      returnMode: "完成后原路返回",
+      speed: "0.42",
+      stay: "8",
+      rule: "工作日每日执行，优先覆盖主通道结构点位。",
       updatedAt: "2026-06-26 08:10:00",
     },
     {
@@ -360,6 +430,12 @@ function buildDevicePlans(device: DeviceRecord): PatrolTask[] {
       cycle: "每2小时",
       routeRange: "泵房 / 配电区",
       enabled: true,
+      color: "#f7bf5a",
+      loopCount: 2,
+      returnMode: "结束后前往充电桩",
+      speed: "0.28",
+      stay: "15",
+      rule: "重点巡查机电设备区，异常时自动追加复核。",
       updatedAt: "2026-06-25 18:24:36",
     },
   ];
@@ -372,6 +448,7 @@ function buildDeviceConfig(device: DeviceRecord): DeviceConfigState {
   return {
     maps,
     activeMapId: maps[0].id,
+    activePlanId: `${device.id}-TASK01`,
     mapLoaded: true,
     mapSyncing: false,
     syncProgress: 100,
@@ -394,7 +471,7 @@ const filteredDevices = computed(() => {
   return devices.value.filter((device) => {
     const matchKeyword =
       !search ||
-      [device.id, device.name, device.gimbalSerial, device.project]
+      [device.id, device.name, device.gimbalSerial]
         .join(" ")
         .toLowerCase()
         .includes(search);
@@ -443,12 +520,27 @@ const activeMap = computed(
     ) ?? null,
 );
 
+const activeRound = computed(
+  () =>
+    currentConfig.value?.plans.find(
+      (plan) => plan.id === currentConfig.value?.activePlanId,
+    ) ?? null,
+);
+
+const activeRoundPoints = computed(() => {
+  if (!currentConfig.value) {
+    return [];
+  }
+
+  return currentConfig.value.points;
+});
+
 const selectedPoints = computed(() => {
   if (!currentConfig.value) {
     return [];
   }
 
-  return currentConfig.value.points.filter((point) =>
+  return activeRoundPoints.value.filter((point) =>
     currentConfig.value?.selectedPointIds.includes(point.id),
   );
 });
@@ -457,39 +549,23 @@ const singleSelectedPoint = computed(() =>
   selectedPoints.value.length === 1 ? selectedPoints.value[0] : null,
 );
 
-const selectionRectStyle = computed(() => {
-  const left = Math.min(selectionBox.startX, selectionBox.endX);
-  const top = Math.min(selectionBox.startY, selectionBox.endY);
-  const width = Math.abs(selectionBox.endX - selectionBox.startX);
-  const height = Math.abs(selectionBox.endY - selectionBox.startY);
-
-  return {
-    left: `${left}%`,
-    top: `${top}%`,
-    width: `${width}%`,
-    height: `${height}%`,
-  };
-});
-
 function resetForm() {
   form.id = "";
   form.name = "";
-  form.battery = "";
-  form.status = "空闲";
-  form.project = projectOptions[0];
   form.gimbalSerial = "";
-  form.createdAt = "";
+  form.whiteLightUrl = "";
+  form.infraredUrl = "";
   formError.value = "";
 }
 
 function resetPlanForm() {
-  editingPlanId.value = null;
-  planForm.name = "";
-  planForm.mode = "定时";
-  planForm.time = "02:00";
-  planForm.cycle = "每日";
-  planForm.routeRange = "全线路";
-  planForm.enabled = true;
+  editingPointId.value = null;
+  planForm.roundName = "";
+  planForm.pointName = "";
+  planForm.pointType = "业务点";
+  planForm.pointDirection = "正向";
+  planForm.liftHeight = "1500";
+  planForm.gimbalPreset = "预置点1";
 }
 
 function openCreateDialog() {
@@ -502,11 +578,9 @@ function openEditDialog(device: DeviceRecord) {
   editingId.value = device.id;
   form.id = device.id;
   form.name = device.name;
-  form.battery = device.battery;
-  form.status = device.status;
-  form.project = device.project;
   form.gimbalSerial = device.gimbalSerial;
-  form.createdAt = device.createdAt;
+  form.whiteLightUrl = device.whiteLightUrl ?? "";
+  form.infraredUrl = device.infraredUrl ?? "";
   formError.value = "";
   dialogVisible.value = true;
 }
@@ -517,15 +591,24 @@ function openConfigDialog(device: DeviceRecord) {
   deviceConfigs[device.id] = config;
   configuringDeviceId.value = device.id;
   configDialogVisible.value = true;
-  mapEditorMode.value = "select";
-  activeConfigSideTab.value = "point";
+  mapEditorMode.value = "normal";
 
-  if (!config.selectedPointIds.length && config.points.length) {
-    config.selectedPointIds = [config.points[0].id];
+  if (!config.plans.some((plan) => plan.id === config.activePlanId)) {
+    config.activePlanId = config.plans[0]?.id ?? "";
+  }
+
+  const currentRoundPoints = config.points;
+
+  if (!config.selectedPointIds.length && currentRoundPoints.length) {
+    config.selectedPointIds = [currentRoundPoints[0].id];
   }
 
   syncBatchForm();
   resetPlanForm();
+  nextTick(() => {
+    attachMapResizeObserver();
+    scheduleMapCanvasRender();
+  });
 }
 
 function closeDialog() {
@@ -534,20 +617,57 @@ function closeDialog() {
 }
 
 function closeConfigDialog() {
+  if (saveProgressVisible.value) {
+    return;
+  }
+
   configDialogVisible.value = false;
+  planDialogVisible.value = false;
   configuringDeviceId.value = null;
   clearSelectionBox();
+  clearDragPointState();
   stopMapSyncTimer();
 }
 
-function normalizeBattery(value: string) {
-  const digits = value.replace(/[^\d]/g, "");
-  if (!digits) {
-    return "";
+function stopSaveProgressTimers() {
+  if (saveProgressTimer !== null) {
+    window.clearInterval(saveProgressTimer);
+    saveProgressTimer = null;
   }
 
-  const numericValue = Math.min(100, Math.max(0, Number(digits)));
-  return `${numericValue}%`;
+  if (saveProgressCloseTimer !== null) {
+    window.clearTimeout(saveProgressCloseTimer);
+    saveProgressCloseTimer = null;
+  }
+}
+
+function finishSaveProgress() {
+  stopSaveProgressTimers();
+  saveProgressValue.value = 100;
+  saveProgressMessage.value = "保存成功，正在关闭...";
+
+  saveProgressCloseTimer = window.setTimeout(() => {
+    saveProgressVisible.value = false;
+    saveProgressCloseTimer = null;
+    configDialogVisible.value = false;
+    planDialogVisible.value = false;
+    configuringDeviceId.value = null;
+    clearSelectionBox();
+    clearDragPointState();
+    stopMapSyncTimer();
+  }, 700);
+}
+
+function setActiveRound(planId: string) {
+  if (!currentConfig.value) {
+    return;
+  }
+
+  currentConfig.value.activePlanId = planId;
+
+  if (!currentConfig.value.selectedPointIds.length && currentConfig.value.points.length) {
+    updateSelection([currentConfig.value.points[0].id]);
+  }
 }
 
 function buildNextId() {
@@ -562,18 +682,15 @@ function buildNextId() {
 }
 
 function saveDevice() {
-  const normalizedBattery = normalizeBattery(form.battery);
+  const existingDevice = editingId.value
+    ? devices.value.find((device) => device.id === editingId.value)
+    : null;
 
   if (!form.name.trim()) {
     formError.value = "请填写设备名称";
     return;
   }
 
-  if (!normalizedBattery) {
-    formError.value = "请填写当前电量";
-    return;
-  }
-
   if (!form.gimbalSerial.trim()) {
     formError.value = "请填写云台序列号";
     return;
@@ -582,11 +699,13 @@ function saveDevice() {
   const payload: DeviceRecord = {
     id: editingId.value ?? buildNextId(),
     name: form.name.trim(),
-    battery: normalizedBattery,
-    status: form.status,
-    project: form.project,
+    battery: existingDevice?.battery ?? "--",
+    status: existingDevice?.status ?? "离线",
+    project: existingDevice?.project ?? defaultProject,
     gimbalSerial: form.gimbalSerial.trim(),
-    createdAt: form.createdAt || nowString(),
+    whiteLightUrl: form.whiteLightUrl.trim(),
+    infraredUrl: form.infraredUrl.trim(),
+    createdAt: existingDevice?.createdAt ?? nowString(),
   };
 
   if (editingId.value) {
@@ -637,14 +756,281 @@ function getStatusClass(status: DeviceStatus) {
   return classMap[status];
 }
 
-function getPointTypeClass(type: PatrolPointType) {
-  const classMap: Record<PatrolPointType, string> = {
-    常规巡航: "type-normal",
-    热成像: "type-thermal",
-    泵房复核: "type-pump",
-  };
+function getMapStageRect() {
+  return mapStageRef.value?.getBoundingClientRect() ?? null;
+}
 
-  return classMap[type];
+function percentToStagePixels(x: number, y: number, rect: DOMRect) {
+  return {
+    x: (x / 100) * rect.width,
+    y: (y / 100) * rect.height,
+  };
+}
+
+function estimatePointLabelWidth(name: string) {
+  return Math.max(72, name.length * 12 + 18);
+}
+
+function getPointLabelFrame(point: PatrolPoint, rect: DOMRect) {
+  const pixelPoint = percentToStagePixels(point.x, point.y, rect);
+  const labelWidth = estimatePointLabelWidth(point.name);
+  const labelHeight = 24;
+  let left = pixelPoint.x + 18;
+
+  if (left + labelWidth > rect.width - 10) {
+    left = pixelPoint.x - labelWidth - 18;
+  }
+
+  return {
+    left,
+    top: pixelPoint.y - labelHeight / 2,
+    width: labelWidth,
+    height: labelHeight,
+  };
+}
+
+function findHitPoint(position: { x: number; y: number }) {
+  const rect = getMapStageRect();
+  if (!rect) {
+    return null;
+  }
+
+  const points = [...activeRoundPoints.value].reverse();
+
+  for (const point of points) {
+    const pixelPoint = percentToStagePixels(point.x, point.y, rect);
+    const deltaX = pixelPoint.x - (position.x / 100) * rect.width;
+    const deltaY = pixelPoint.y - (position.y / 100) * rect.height;
+
+    if (Math.hypot(deltaX, deltaY) <= 16) {
+      return point;
+    }
+
+    const labelFrame = getPointLabelFrame(point, rect);
+    const pointerX = (position.x / 100) * rect.width;
+    const pointerY = (position.y / 100) * rect.height;
+
+    if (
+      pointerX >= labelFrame.left &&
+      pointerX <= labelFrame.left + labelFrame.width &&
+      pointerY >= labelFrame.top &&
+      pointerY <= labelFrame.top + labelFrame.height
+    ) {
+      return point;
+    }
+  }
+
+  return null;
+}
+
+function drawRoundRect(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number,
+) {
+  const clampedRadius = Math.min(radius, width / 2, height / 2);
+
+  ctx.beginPath();
+  ctx.moveTo(x + clampedRadius, y);
+  ctx.lineTo(x + width - clampedRadius, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + clampedRadius);
+  ctx.lineTo(x + width, y + height - clampedRadius);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - clampedRadius, y + height);
+  ctx.lineTo(x + clampedRadius, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - clampedRadius);
+  ctx.lineTo(x, y + clampedRadius);
+  ctx.quadraticCurveTo(x, y, x + clampedRadius, y);
+  ctx.closePath();
+}
+
+function renderMapCanvas() {
+  const canvas = mapCanvasRef.value;
+  const rect = getMapStageRect();
+
+  if (!canvas || !rect || rect.width <= 0 || rect.height <= 0) {
+    return;
+  }
+
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return;
+  }
+
+  const dpr = window.devicePixelRatio || 1;
+  const displayWidth = Math.max(1, Math.round(rect.width));
+  const displayHeight = Math.max(1, Math.round(rect.height));
+
+  if (
+    canvas.width !== Math.round(displayWidth * dpr) ||
+    canvas.height !== Math.round(displayHeight * dpr)
+  ) {
+    canvas.width = Math.round(displayWidth * dpr);
+    canvas.height = Math.round(displayHeight * dpr);
+  }
+
+  context.setTransform(dpr, 0, 0, dpr, 0, 0);
+  context.clearRect(0, 0, displayWidth, displayHeight);
+
+  const unitX = displayWidth / 100;
+  const unitY = displayHeight / 100;
+
+  context.save();
+  context.strokeStyle = "rgba(97, 214, 255, 0.08)";
+  context.lineWidth = 1;
+
+  for (let line = 1; line < 10; line += 1) {
+    context.beginPath();
+    context.moveTo(0, line * 10 * unitY);
+    context.lineTo(displayWidth, line * 10 * unitY);
+    context.stroke();
+
+    context.beginPath();
+    context.moveTo(line * 10 * unitX, 0);
+    context.lineTo(line * 10 * unitX, displayHeight);
+    context.stroke();
+  }
+  context.restore();
+
+  context.save();
+  context.fillStyle = "rgba(146, 236, 255, 0.42)";
+  pointCloudSamples.forEach((sample) => {
+    context.beginPath();
+    context.arc(sample.x * unitX, sample.y * unitY, sample.radius * unitX, 0, Math.PI * 2);
+    context.fill();
+  });
+  context.restore();
+
+  context.save();
+  context.beginPath();
+  context.moveTo(6 * unitX, 72 * unitY);
+  context.bezierCurveTo(16 * unitX, 68 * unitY, 28 * unitX, 50 * unitY, 40 * unitX, 47 * unitY);
+  context.bezierCurveTo(52 * unitX, 44 * unitY, 62 * unitX, 62 * unitY, 76 * unitX, 52 * unitY);
+  context.bezierCurveTo(86 * unitX, 46 * unitY, 92 * unitX, 32 * unitY, 96 * unitX, 28 * unitY);
+  context.lineCap = "round";
+  context.strokeStyle = "rgba(78, 192, 255, 0.12)";
+  context.lineWidth = 18;
+  context.stroke();
+  context.strokeStyle = "rgba(78, 192, 255, 0.28)";
+  context.lineWidth = 8;
+  context.stroke();
+  context.restore();
+
+  if (activeRoundPoints.value.length > 1) {
+    context.save();
+    context.beginPath();
+    activeRoundPoints.value.forEach((point, index) => {
+      const pixelPoint = percentToStagePixels(point.x, point.y, rect);
+
+      if (index === 0) {
+        context.moveTo(pixelPoint.x, pixelPoint.y);
+      } else {
+        context.lineTo(pixelPoint.x, pixelPoint.y);
+      }
+    });
+    context.strokeStyle = "#8ff3ff";
+    context.lineWidth = 2;
+    context.lineCap = "round";
+    context.lineJoin = "round";
+    context.setLineDash([8, 6]);
+    context.shadowColor = "rgba(143, 243, 255, 0.32)";
+    context.shadowBlur = 12;
+    context.stroke();
+    context.restore();
+  }
+
+  context.textBaseline = "middle";
+
+  activeRoundPoints.value.forEach((point, index) => {
+    const pixelPoint = percentToStagePixels(point.x, point.y, rect);
+    const palette = mapPointPalette[point.type];
+    const selected = currentConfig.value?.selectedPointIds.includes(point.id) ?? false;
+    const highlightPalette = selected ? selectedPointHighlight : palette;
+    const labelFrame = getPointLabelFrame(point, rect);
+
+    context.save();
+    context.fillStyle = selected ? highlightPalette.glow : "rgba(255, 255, 255, 0.02)";
+    context.beginPath();
+    context.arc(pixelPoint.x, pixelPoint.y, selected ? 18 : 14, 0, Math.PI * 2);
+    context.fill();
+
+    context.fillStyle = "rgba(5, 18, 38, 0.94)";
+    context.strokeStyle = highlightPalette.stroke;
+    context.lineWidth = selected ? 3 : 2;
+    context.beginPath();
+    context.arc(pixelPoint.x, pixelPoint.y, 11, 0, Math.PI * 2);
+    context.fill();
+    context.shadowColor = highlightPalette.glow;
+    context.shadowBlur = selected ? 18 : 12;
+    context.stroke();
+
+    drawRoundRect(context, labelFrame.left, labelFrame.top, labelFrame.width, labelFrame.height, 8);
+    context.fillStyle = selected
+      ? highlightPalette.labelBackground
+      : "rgba(4, 19, 39, 0.82)";
+    context.strokeStyle = selected
+      ? highlightPalette.labelBorder
+      : "rgba(91, 208, 255, 0.18)";
+    context.lineWidth = 1;
+    context.shadowBlur = 0;
+    context.fill();
+    context.stroke();
+
+    context.fillStyle = "#eefcff";
+    context.font = '700 11px "Microsoft YaHei", sans-serif';
+    context.textAlign = "center";
+    context.fillText(String(index + 1), pixelPoint.x, pixelPoint.y + 0.5);
+
+    context.font = '500 12px "Microsoft YaHei", sans-serif';
+    context.textAlign = "left";
+    context.fillText(point.name, labelFrame.left + 8, labelFrame.top + labelFrame.height / 2 + 0.5);
+    context.restore();
+  });
+
+  if (selectionBox.active) {
+    const left = Math.min(selectionBox.startX, selectionBox.endX) * unitX;
+    const top = Math.min(selectionBox.startY, selectionBox.endY) * unitY;
+    const width = Math.abs(selectionBox.endX - selectionBox.startX) * unitX;
+    const height = Math.abs(selectionBox.endY - selectionBox.startY) * unitY;
+
+    context.save();
+    context.setLineDash([6, 4]);
+    context.strokeStyle = "rgba(121, 234, 255, 0.92)";
+    context.fillStyle = "rgba(92, 220, 255, 0.1)";
+    context.lineWidth = 1;
+    context.fillRect(left, top, width, height);
+    context.strokeRect(left, top, width, height);
+    context.restore();
+  }
+}
+
+function scheduleMapCanvasRender() {
+  if (mapRenderFrame !== null) {
+    return;
+  }
+
+  mapRenderFrame = window.requestAnimationFrame(() => {
+    mapRenderFrame = null;
+    renderMapCanvas();
+  });
+}
+
+function attachMapResizeObserver() {
+  if (mapResizeObserver) {
+    mapResizeObserver.disconnect();
+    mapResizeObserver = null;
+  }
+
+  if (!mapStageRef.value || typeof ResizeObserver === "undefined") {
+    return;
+  }
+
+  mapResizeObserver = new ResizeObserver(() => {
+    scheduleMapCanvasRender();
+  });
+  mapResizeObserver.observe(mapStageRef.value);
 }
 
 function syncBatchForm() {
@@ -676,18 +1062,13 @@ function updateSelection(nextIds: string[]) {
     return;
   }
 
-  currentConfig.value.selectedPointIds = nextIds;
+  const validIds = activeRoundPoints.value.map((point) => point.id);
+  currentConfig.value.selectedPointIds = nextIds.filter((id) =>
+    validIds.includes(id),
+  );
   syncBatchForm();
 }
 
-function selectMap(mapId: string) {
-  if (!currentConfig.value) {
-    return;
-  }
-
-  currentConfig.value.activeMapId = mapId;
-}
-
 function stopMapSyncTimer() {
   if (syncTimer !== null) {
     window.clearInterval(syncTimer);
@@ -734,7 +1115,7 @@ function syncMapFromDevice() {
 }
 
 function getRelativePosition(event: MouseEvent) {
-  const rect = mapStageRef.value?.getBoundingClientRect();
+  const rect = getMapStageRect();
   if (!rect) {
     return null;
   }
@@ -757,8 +1138,52 @@ function clearSelectionBox() {
   selectionBox.endY = 0;
 }
 
+function clearDragPointState() {
+  dragPointState.active = false;
+  dragPointState.moved = false;
+  dragPointState.pointId = "";
+  dragPointState.offsetX = 0;
+  dragPointState.offsetY = 0;
+  unbindMapPointerTracking();
+}
+
+function clampMapPosition(x: number, y: number) {
+  return {
+    x: Math.min(96, Math.max(4, Number(x.toFixed(2)))),
+    y: Math.min(92, Math.max(8, Number(y.toFixed(2)))),
+  };
+}
+
+function bindMapPointerTracking() {
+  if (mapPointerTrackingBound) {
+    return;
+  }
+
+  window.addEventListener("mousemove", handleWindowMapPointerMove);
+  window.addEventListener("mouseup", handleWindowMapPointerUp);
+  mapPointerTrackingBound = true;
+}
+
+function unbindMapPointerTracking() {
+  if (!mapPointerTrackingBound) {
+    return;
+  }
+
+  window.removeEventListener("mousemove", handleWindowMapPointerMove);
+  window.removeEventListener("mouseup", handleWindowMapPointerUp);
+  mapPointerTrackingBound = false;
+}
+
+function handleWindowMapPointerMove(event: MouseEvent) {
+  handleMapPointerMove(event);
+}
+
+function handleWindowMapPointerUp(event: MouseEvent) {
+  handleMapPointerUp(event);
+}
+
 function handleMapPointerDown(event: MouseEvent) {
-  if (!currentConfig.value?.mapLoaded || mapEditorMode.value !== "select") {
+  if (!currentConfig.value?.mapLoaded) {
     return;
   }
 
@@ -767,15 +1192,68 @@ function handleMapPointerDown(event: MouseEvent) {
     return;
   }
 
+  const hitPoint = findHitPoint(position);
+  if (hitPoint) {
+    if (!currentConfig.value.selectedPointIds.includes(hitPoint.id)) {
+      updateSelection([hitPoint.id]);
+    }
+
+    dragPointState.active = true;
+    dragPointState.moved = false;
+    dragPointState.pointId = hitPoint.id;
+    dragPointState.offsetX = hitPoint.x - position.x;
+    dragPointState.offsetY = hitPoint.y - position.y;
+    bindMapPointerTracking();
+    return;
+  }
+
+  if (mapEditorMode.value !== "select") {
+    return;
+  }
+
   selectionBox.active = true;
   selectionBox.moved = false;
   selectionBox.startX = position.x;
   selectionBox.startY = position.y;
   selectionBox.endX = position.x;
   selectionBox.endY = position.y;
+  bindMapPointerTracking();
 }
 
 function handleMapPointerMove(event: MouseEvent) {
+  if (dragPointState.active && currentConfig.value) {
+    const position = getRelativePosition(event);
+    if (!position) {
+      return;
+    }
+
+    const targetPoint = currentConfig.value.points.find(
+      (point) => point.id === dragPointState.pointId,
+    );
+
+    if (!targetPoint) {
+      clearDragPointState();
+      return;
+    }
+
+    const nextPosition = clampMapPosition(
+      position.x + dragPointState.offsetX,
+      position.y + dragPointState.offsetY,
+    );
+
+    if (
+      Math.abs(nextPosition.x - targetPoint.x) > 0.05 ||
+      Math.abs(nextPosition.y - targetPoint.y) > 0.05
+    ) {
+      dragPointState.moved = true;
+    }
+
+    targetPoint.x = nextPosition.x;
+    targetPoint.y = nextPosition.y;
+    scheduleMapCanvasRender();
+    return;
+  }
+
   if (!selectionBox.active) {
     return;
   }
@@ -797,6 +1275,15 @@ function handleMapPointerMove(event: MouseEvent) {
 }
 
 function handleMapPointerUp(event: MouseEvent) {
+  if (dragPointState.active) {
+    if (dragPointState.moved) {
+      suppressStageClick.value = true;
+    }
+
+    clearDragPointState();
+    return;
+  }
+
   if (!selectionBox.active || !currentConfig.value) {
     return;
   }
@@ -807,7 +1294,7 @@ function handleMapPointerUp(event: MouseEvent) {
     const top = Math.min(selectionBox.startY, selectionBox.endY);
     const bottom = Math.max(selectionBox.startY, selectionBox.endY);
 
-    const hits = currentConfig.value.points
+    const hits = activeRoundPoints.value
       .filter(
         (point) =>
           point.x >= left &&
@@ -826,28 +1313,24 @@ function handleMapPointerUp(event: MouseEvent) {
   }
 
   clearSelectionBox();
+  unbindMapPointerTracking();
 }
 
 function buildPointTypeFromMode(mode: EditorMode): PatrolPointType {
-  if (mode === "thermal") {
-    return "热成像";
-  }
-
-  if (mode === "pump") {
-    return "泵房复核";
-  }
-
-  return "常规巡航";
+  return mode === "waypoint" ? "途经点" : "业务点";
 }
 
-function buildPointName(type: PatrolPointType) {
+function buildPointName(mode: EditorMode, type: PatrolPointType) {
+  if (mode === "waypoint") {
+    return `途经点 ${String(activeRoundPoints.value.length + 1).padStart(2, "0")}`;
+  }
+
   const prefixMap: Record<PatrolPointType, string> = {
-    常规巡航: "常规巡航点",
-    热成像: "热成像点",
-    泵房复核: "泵房复核点",
+    业务点: "业务点",
+    途经点: "途经点",
   };
 
-  return `${prefixMap[type]} ${String((currentConfig.value?.points.length ?? 0) + 1).padStart(2, "0")}`;
+  return `${prefixMap[type]} ${String(activeRoundPoints.value.length + 1).padStart(2, "0")}`;
 }
 
 function buildNextPointId() {
@@ -886,27 +1369,35 @@ function handleMapStageClick(event: MouseEvent) {
     return;
   }
 
-  if (mapEditorMode.value === "select") {
-    updateSelection([]);
+  const position = getRelativePosition(event);
+  if (!position) {
     return;
   }
 
-  const position = getRelativePosition(event);
-  if (!position) {
+  const hitPoint = findHitPoint(position);
+  if (hitPoint) {
+    handlePointClick(hitPoint.id, event);
+    return;
+  }
+
+  if (mapEditorMode.value === "select") {
+    updateSelection([]);
     return;
   }
 
   const type = buildPointTypeFromMode(mapEditorMode.value);
   const point: PatrolPoint = {
     id: buildNextPointId(),
-    name: buildPointName(type),
+    planId: currentConfig.value.activePlanId,
+    name: buildPointName(mapEditorMode.value, type),
     type,
+    direction: type === "业务点" ? "正向" : "正向",
     x: position.x,
     y: position.y,
     routeSpeed: "0.30",
     stopDuration: "10",
     liftHeight: "1500",
-    gimbalPreset: "P-00",
+    gimbalPreset: "预置点1",
     note: "新建点位，待补充巡检说明",
   };
 
@@ -968,40 +1459,171 @@ function applyBatchConfig() {
   syncBatchForm();
 }
 
-function loadPlan(plan: PatrolTask) {
-  editingPlanId.value = plan.id;
-  planForm.name = plan.name;
-  planForm.mode = plan.mode;
-  planForm.time = plan.time;
-  planForm.cycle = plan.cycle;
-  planForm.routeRange = plan.routeRange;
-  planForm.enabled = plan.enabled;
-}
-
-function savePlan() {
-  if (!currentConfig.value || !planForm.name.trim()) {
+function addRound() {
+  if (!currentConfig.value || !currentConfiguredDevice.value) {
     return;
   }
 
+  const nextIndex = currentConfig.value.plans.length + 1;
   const payload: PatrolTask = {
-    id: editingPlanId.value ?? buildNextPlanId(),
-    name: planForm.name.trim(),
-    mode: planForm.mode,
-    time: planForm.time.trim() || "--:--",
-    cycle: planForm.cycle.trim() || "手动触发",
-    routeRange: planForm.routeRange.trim() || "未指定路线",
-    enabled: planForm.enabled,
+    id: buildNextPlanId(),
+    name: `第 ${nextIndex} 轮次`,
+    mode: "定时",
+    time: "09:00",
+    cycle: "每日",
+    routeRange: "全线路",
+    enabled: true,
+    color: nextIndex % 2 === 0 ? "#f7bf5a" : "#5ce1e6",
+    loopCount: 1,
+    returnMode: "结束后待命",
+    speed: "0.30",
+    stay: "10",
+    rule: "新增轮次规则待配置。",
     updatedAt: nowString(),
   };
 
-  if (editingPlanId.value) {
-    currentConfig.value.plans = currentConfig.value.plans.map((plan) =>
-      plan.id === editingPlanId.value ? payload : plan,
-    );
-  } else {
-    currentConfig.value.plans = [payload, ...currentConfig.value.plans];
+  currentConfig.value.plans.push(payload);
+  setActiveRound(payload.id);
+}
+
+function removeRound(planId: string) {
+  if (!currentConfig.value || currentConfig.value.plans.length <= 1) {
+    return;
   }
 
+  currentConfig.value.plans = currentConfig.value.plans.filter(
+    (plan) => plan.id !== planId,
+  );
+
+  if (currentConfig.value.activePlanId === planId) {
+    currentConfig.value.activePlanId = currentConfig.value.plans[0]?.id ?? "";
+    closePlanDialog();
+  }
+}
+
+function addPointToActiveRound() {
+  if (!currentConfig.value?.mapLoaded) {
+    return;
+  }
+
+  mapEditorMode.value = "normal";
+}
+
+function clearCanvas() {
+  if (!currentConfig.value) {
+    return;
+  }
+
+  currentConfig.value.points = [];
+  updateSelection([]);
+}
+
+function saveConfigDialog() {
+  if (!currentConfig.value || saveProgressVisible.value) {
+    return;
+  }
+
+  stopSaveProgressTimers();
+  currentConfig.value.lastSyncedAt = nowString();
+  saveProgressVisible.value = true;
+  saveProgressValue.value = 0;
+  saveProgressMessage.value = "数据正在保存中...";
+
+  saveProgressTimer = window.setInterval(() => {
+    const step = saveProgressValue.value < 72 ? 12 : saveProgressValue.value < 90 ? 6 : 3;
+    saveProgressValue.value = Math.min(100, saveProgressValue.value + step);
+
+    if (saveProgressValue.value >= 100) {
+      finishSaveProgress();
+    }
+  }, 180);
+}
+
+function editPoint(pointId: string) {
+  updateSelection([pointId]);
+}
+
+function removePoint(pointId: string) {
+  if (!currentConfig.value) {
+    return;
+  }
+
+  currentConfig.value.points = currentConfig.value.points.filter(
+    (point) => point.id !== pointId,
+  );
+  const nextPoint = activeRoundPoints.value.find((point) => point.id !== pointId);
+  updateSelection(nextPoint ? [nextPoint.id] : []);
+}
+
+function loadPlan(point: PatrolPoint) {
+  if (!activeRound.value) {
+    return;
+  }
+
+  editingPointId.value = point.id;
+  planForm.roundName = activeRound.value.name;
+  planForm.pointName = point.name;
+  planForm.pointType = point.type;
+  planForm.pointDirection = point.direction;
+  planForm.liftHeight = point.liftHeight;
+  planForm.gimbalPreset = point.gimbalPreset;
+}
+
+function openPlanDialog(point?: PatrolPoint | null) {
+  if (!point) {
+    return;
+  }
+
+  loadPlan(point);
+  planDialogVisible.value = true;
+}
+
+function closePlanDialog() {
+  planDialogVisible.value = false;
+  resetPlanForm();
+}
+
+function savePlan() {
+  if (
+    !currentConfig.value ||
+    !activeRound.value ||
+    !editingPointId.value ||
+    !planForm.roundName.trim() ||
+    !planForm.pointName.trim()
+  ) {
+    return;
+  }
+
+  currentConfig.value.plans = currentConfig.value.plans.map((plan) =>
+    plan.id === currentConfig.value?.activePlanId
+      ? {
+          ...plan,
+          name: planForm.roundName.trim(),
+          updatedAt: nowString(),
+        }
+      : plan,
+  );
+
+  currentConfig.value.points = currentConfig.value.points.map((point) =>
+    point.id === editingPointId.value
+      ? {
+          ...point,
+          name: planForm.pointName.trim(),
+          type: planForm.pointType,
+          direction: planForm.pointType === "业务点" ? planForm.pointDirection : "正向",
+          liftHeight:
+            planForm.pointType === "业务点"
+              ? planForm.liftHeight.trim() || point.liftHeight
+              : "",
+          gimbalPreset:
+            planForm.pointType === "业务点"
+              ? planForm.gimbalPreset.trim() || point.gimbalPreset
+              : "",
+        }
+      : point,
+  );
+
+  planDialogVisible.value = false;
   resetPlanForm();
 }
 
@@ -1014,14 +1636,76 @@ function removePlan(planId: string) {
     (plan) => plan.id !== planId,
   );
 
-  if (editingPlanId.value === planId) {
-    resetPlanForm();
+  if (currentConfig.value.activePlanId === planId) {
+    closePlanDialog();
   }
 }
 
 onBeforeUnmount(() => {
   stopMapSyncTimer();
+  unbindMapPointerTracking();
+  stopSaveProgressTimers();
+
+  if (mapRenderFrame !== null) {
+    window.cancelAnimationFrame(mapRenderFrame);
+    mapRenderFrame = null;
+  }
+
+  if (mapResizeObserver) {
+    mapResizeObserver.disconnect();
+    mapResizeObserver = null;
+  }
 });
+
+watch(
+  mapStageRef,
+  () => {
+    nextTick(() => {
+      attachMapResizeObserver();
+      scheduleMapCanvasRender();
+    });
+  },
+  { flush: "post" },
+);
+
+watch(
+  activeRoundPoints,
+  () => {
+    nextTick(() => {
+      scheduleMapCanvasRender();
+    });
+  },
+  { deep: true },
+);
+
+watch(
+  () => currentConfig.value?.selectedPointIds,
+  () => {
+    nextTick(() => {
+      scheduleMapCanvasRender();
+    });
+  },
+  { deep: true },
+);
+
+watch(
+  () => currentConfig.value?.mapLoaded,
+  () => {
+    nextTick(() => {
+      scheduleMapCanvasRender();
+    });
+  },
+);
+
+watch(
+  selectionBox,
+  () => {
+    nextTick(() => {
+      scheduleMapCanvasRender();
+    });
+  },
+  { deep: true },
+);
 </script>
 
 <template>
@@ -1056,7 +1740,6 @@ onBeforeUnmount(() => {
               <tr>
                 <th>设备编号</th>
                 <th>设备名称</th>
-                <th>所属项目</th>
                 <th>当前电量</th>
                 <th>当前状态</th>
                 <th>云台序列号</th>
@@ -1068,7 +1751,6 @@ onBeforeUnmount(() => {
               <tr v-for="device in pagedDevices" :key="device.id">
                 <td>{{ device.id }}</td>
                 <td>{{ device.name }}</td>
-                <td>{{ device.project }}</td>
                 <td>{{ device.battery }}</td>
                 <td>
                   <span
@@ -1102,7 +1784,7 @@ onBeforeUnmount(() => {
                 </td>
               </tr>
               <tr v-if="!pagedDevices.length">
-                <td class="table-empty" colspan="8">
+                <td class="table-empty" colspan="7">
                   当前筛选条件下暂无设备数据
                 </td>
               </tr>
@@ -1159,45 +1841,17 @@ onBeforeUnmount(() => {
             <span>设备名称</span>
             <input v-model="form.name" type="text" />
           </label>
-          <label class="crud-field">
-            <span>当前电量</span>
-            <input v-model="form.battery" placeholder="例如 82%" type="text" />
-          </label>
-          <label class="crud-field">
-            <span>当前状态</span>
-            <select v-model="form.status">
-              <option
-                v-for="status in statusOptions"
-                :key="status"
-                :value="status"
-              >
-                {{ status }}
-              </option>
-            </select>
-          </label>
-          <label class="crud-field">
-            <span>所属项目</span>
-            <select v-model="form.project">
-              <option
-                v-for="project in projectOptions"
-                :key="project"
-                :value="project"
-              >
-                {{ project }}
-              </option>
-            </select>
-          </label>
           <label class="crud-field">
             <span>云台序列号</span>
             <input v-model="form.gimbalSerial" type="text" />
           </label>
           <label class="crud-field">
-            <span>创建时间</span>
-            <input
-              v-model="form.createdAt"
-              placeholder="留空则自动生成"
-              type="text"
-            />
+            <span>白光链接</span>
+            <input v-model="form.whiteLightUrl" placeholder="请输入白光视频链接" type="text" />
+          </label>
+          <label class="crud-field">
+            <span>红外链接</span>
+            <input v-model="form.infraredUrl" placeholder="请输入红外视频链接" type="text" />
           </label>
         </div>
         <div v-if="formError" class="crud-form-error">{{ formError }}</div>
@@ -1227,35 +1881,34 @@ onBeforeUnmount(() => {
     >
       <div class="config-dialog">
         <div class="config-dialog-header">
-          <div class="config-header-main">
+          <div class="config-header-main modern">
             <div class="config-title-row">
-              <h3 class="config-dialog-title">机器人配套配置</h3>
+              <h3 class="config-dialog-title">机器人配置</h3>
               <span class="config-device-chip">
-                {{ currentConfiguredDevice.name }} /
-                {{ currentConfiguredDevice.id }}
+                {{ currentConfiguredDevice.name }} / {{ currentConfiguredDevice.id }}
               </span>
             </div>
-            <div class="config-header-meta">
-              <span>所属项目：{{ currentConfiguredDevice.project }}</span>
-              <span>地图最近同步：{{ currentConfig.lastSyncedAt }}</span>
-              <span
-                >云台序列号：{{ currentConfiguredDevice.gimbalSerial }}</span
-              >
-            </div>
           </div>
-          <button class="dialog-close" type="button" @click="closeConfigDialog">
-            ×
-          </button>
+          <div class="config-top-actions">
+            <button class="page-action-btn ghost" type="button" @click="closeConfigDialog">
+              取消
+            </button>
+            <button
+              class="page-action-btn primary"
+              :disabled="saveProgressVisible"
+              type="button"
+              @click="saveConfigDialog"
+            >
+              {{ saveProgressVisible ? "保存中..." : "保存下发" }}
+            </button>
+          </div>
         </div>
 
-        <div class="config-dialog-body">
-          <section class="config-map-panel">
-            <div class="panel-head">
+        <div class="config-dialog-body redesigned">
+          <section class="config-map-panel redesigned-map-panel">
+            <div class="panel-head modern">
               <div>
-                <div class="panel-title">地图编辑</div>
-                <div class="panel-subtitle">
-                  从机器人本地地图加载环境点云，完成巡航点标注、框选和参数编辑
-                </div>
+                <div class="panel-title">地图绘制主模块</div>
               </div>
               <div class="panel-actions">
                 <button
@@ -1285,78 +1938,13 @@ onBeforeUnmount(() => {
               >
                 {{ mode.label }}
               </button>
-              <div class="editor-tip">
-                提示：点击画布新增点位；拖拽框选点位；`Shift` 可追加多选
-              </div>
+              <button class="editor-tool-btn" type="button" @click="clearCanvas">
+                清空画布
+              </button>
             </div>
 
             <div class="config-map-stage" ref="mapStageRef">
-              <svg
-                class="config-map-svg"
-                viewBox="0 0 100 100"
-                preserveAspectRatio="none"
-              >
-                <defs>
-                  <linearGradient
-                    id="routeGlow"
-                    x1="0%"
-                    y1="0%"
-                    x2="100%"
-                    y2="0%"
-                  >
-                    <stop
-                      offset="0%"
-                      stop-color="#3cc7ff"
-                      stop-opacity="0.12"
-                    />
-                    <stop
-                      offset="48%"
-                      stop-color="#8ff3ff"
-                      stop-opacity="0.9"
-                    />
-                    <stop
-                      offset="100%"
-                      stop-color="#3cc7ff"
-                      stop-opacity="0.12"
-                    />
-                  </linearGradient>
-                </defs>
-                <g class="map-grid">
-                  <line
-                    v-for="line in 9"
-                    :key="`h-${line}`"
-                    x1="0"
-                    :y1="line * 10"
-                    x2="100"
-                    :y2="line * 10"
-                  />
-                  <line
-                    v-for="line in 9"
-                    :key="`v-${line}`"
-                    :x1="line * 10"
-                    y1="0"
-                    :x2="line * 10"
-                    y2="100"
-                  />
-                </g>
-                <path
-                  class="map-tunnel-outline"
-                  d="M 6 72 C 16 68, 28 50, 40 47 S 62 62, 76 52 S 90 30, 96 28"
-                />
-                <path
-                  class="map-route-line"
-                  d="M 8 70 C 16 64, 26 46, 40 44 S 62 58, 74 50 S 88 35, 94 30"
-                />
-                <g class="point-cloud-layer">
-                  <circle
-                    v-for="index in 48"
-                    :key="`cloud-${index}`"
-                    :cx="8 + ((index * 1.9) % 86)"
-                    :cy="18 + ((index * 7.3) % 48)"
-                    :r="index % 3 === 0 ? 0.45 : 0.3"
-                  />
-                </g>
-              </svg>
+              <canvas ref="mapCanvasRef" class="config-map-canvas"></canvas>
 
               <div
                 class="map-hit-layer"
@@ -1367,30 +1955,6 @@ onBeforeUnmount(() => {
                 @mouseleave="handleMapPointerUp"
               ></div>
 
-              <button
-                v-for="point in currentConfig.points"
-                :key="point.id"
-                :class="[
-                  'map-point',
-                  getPointTypeClass(point.type),
-                  {
-                    selected: currentConfig.selectedPointIds.includes(point.id),
-                  },
-                ]"
-                :style="{ left: `${point.x}%`, top: `${point.y}%` }"
-                type="button"
-                @click.stop="handlePointClick(point.id, $event)"
-              >
-                <span class="map-point-core"></span>
-                <span class="map-point-label">{{ point.name }}</span>
-              </button>
-
-              <div
-                v-if="selectionBox.active"
-                class="selection-rect"
-                :style="selectionRectStyle"
-              ></div>
-
               <div class="stage-overlay top-left">
                 {{ activeMap?.name }} / {{ activeMap?.version }}
               </div>
@@ -1404,298 +1968,173 @@ onBeforeUnmount(() => {
             </div>
           </section>
 
-          <section class="config-side-panel">
-            <div class="side-tabs">
-              <button
-                :class="[
-                  'side-tab-btn',
-                  { active: activeConfigSideTab === 'point' },
-                ]"
-                type="button"
-                @click="activeConfigSideTab = 'point'"
-              >
-                点位参数配置
-              </button>
-              <button
-                :class="[
-                  'side-tab-btn',
-                  { active: activeConfigSideTab === 'plan' },
-                ]"
-                type="button"
-                @click="activeConfigSideTab = 'plan'"
-              >
-                巡检计划配置
-              </button>
-            </div>
-
-            <div
-              v-if="activeConfigSideTab === 'point'"
-              class="config-side-card"
-            >
-              <div class="panel-title">点位参数配置</div>
-              <template v-if="singleSelectedPoint">
-                <div class="point-tag-row">
-                  <span
-                    :class="[
-                      'point-type-tag',
-                      getPointTypeClass(singleSelectedPoint.type),
-                    ]"
-                  >
-                    {{ singleSelectedPoint.type }}
-                  </span>
-                  <span class="point-id-tag">{{ singleSelectedPoint.id }}</span>
-                </div>
-                <div class="config-form-grid">
-                  <label class="config-field wide">
-                    <span>点位名称</span>
-                    <input v-model="singleSelectedPoint.name" type="text" />
-                  </label>
-                  <label class="config-field">
-                    <span>点位类型</span>
-                    <select v-model="singleSelectedPoint.type">
-                      <option
-                        v-for="type in pointTypeOptions"
-                        :key="type"
-                        :value="type"
-                      >
-                        {{ type }}
-                      </option>
-                    </select>
-                  </label>
-                  <label class="config-field">
-                    <span>巡航速度 (m/s)</span>
-                    <input
-                      v-model="singleSelectedPoint.routeSpeed"
-                      type="text"
-                    />
-                  </label>
-                  <label class="config-field">
-                    <span>停留时长 (s)</span>
-                    <input
-                      v-model="singleSelectedPoint.stopDuration"
-                      type="text"
-                    />
-                  </label>
-                  <label class="config-field">
-                    <span>升降柱高度 (mm)</span>
-                    <input
-                      v-model="singleSelectedPoint.liftHeight"
-                      type="text"
-                    />
-                  </label>
-                  <label class="config-field">
-                    <span>云台预置点</span>
-                    <input
-                      v-model="singleSelectedPoint.gimbalPreset"
-                      type="text"
-                    />
-                  </label>
-                  <label class="config-field wide">
-                    <span>巡检说明</span>
-                    <textarea
-                      v-model="singleSelectedPoint.note"
-                      rows="3"
-                    ></textarea>
-                  </label>
-                </div>
-              </template>
-              <div v-else class="config-empty">
-                选择单个巡航点位后，可在此配置巡航线参数、升降柱高度和云台预置点。
-              </div>
-            </div>
-
-            <div
-              v-if="activeConfigSideTab === 'point'"
-              class="config-side-card"
-            >
-              <div class="panel-title">批量参数统一配置</div>
-              <template v-if="selectedPoints.length > 1">
-                <div class="batch-tip">
-                  已选中
-                  {{ selectedPoints.length }} 个巡航点位，留空字段将保留原值。
-                </div>
-                <div class="config-form-grid compact">
-                  <label class="config-field">
-                    <span>巡航速度 (m/s)</span>
-                    <input
-                      v-model="batchForm.routeSpeed"
-                      placeholder="统一速度"
-                      type="text"
-                    />
-                  </label>
-                  <label class="config-field">
-                    <span>停留时长 (s)</span>
-                    <input
-                      v-model="batchForm.stopDuration"
-                      placeholder="统一停留"
-                      type="text"
-                    />
-                  </label>
-                  <label class="config-field">
-                    <span>升降柱高度 (mm)</span>
-                    <input
-                      v-model="batchForm.liftHeight"
-                      placeholder="统一高度"
-                      type="text"
-                    />
-                  </label>
-                  <label class="config-field">
-                    <span>云台预置点</span>
-                    <input
-                      v-model="batchForm.gimbalPreset"
-                      placeholder="统一预置点"
-                      type="text"
-                    />
-                  </label>
-                </div>
-                <button
-                  class="page-action-btn primary batch-apply-btn"
-                  type="button"
-                  @click="applyBatchConfig"
-                >
-                  应用到选中点位
-                </button>
-              </template>
-              <div v-else class="config-empty">
-                使用框选或 `Shift + 点击`
-                选中多个点位后，可在这里一次性下发统一参数。
-              </div>
-            </div>
-
-            <div
-              v-if="activeConfigSideTab === 'plan'"
-              class="config-side-card plan-card"
-            >
+          <section class="config-side-panel redesigned-side-panel">
+            <div class="config-side-card rounds-board">
               <div class="panel-head inline">
                 <div>
-                  <div class="panel-title">巡检计划配置</div>
+                  <div class="panel-title">巡航线多轮次配置</div>
                   <div class="panel-subtitle">
-                    支持创建、调整定时与周期巡检任务
+                    所有轮次共用同一条巡检线路，轮次表示多次往返执行
                   </div>
                 </div>
-                <button
-                  class="page-action-btn ghost"
-                  type="button"
-                  @click="resetPlanForm"
-                >
-                  新建计划
-                </button>
               </div>
 
-              <div class="config-form-grid compact">
-                <label class="config-field wide">
-                  <span>任务名称</span>
-                  <input
-                    v-model="planForm.name"
-                    placeholder="例如：夜间全线路巡检"
-                    type="text"
-                  />
-                </label>
-                <label class="config-field">
-                  <span>任务模式</span>
-                  <select v-model="planForm.mode">
-                    <option
-                      v-for="mode in patrolModeOptions"
-                      :key="mode"
-                      :value="mode"
+              <div class="rounds-split-layout">
+                <div class="rounds-nav-column">
+                  <div class="sub-panel-header">
+                    <div class="sub-panel-title">轮次列表</div>
+                    <button
+                      class="round-add-btn"
+                      type="button"
+                      title="新增轮次"
+                      aria-label="新增轮次"
+                      @click="addRound"
                     >
-                      {{ mode }}
-                    </option>
-                  </select>
-                </label>
-                <label class="config-field">
-                  <span>执行时间</span>
-                  <input
-                    v-model="planForm.time"
-                    placeholder="02:00"
-                    type="text"
-                  />
-                </label>
-                <label class="config-field">
-                  <span>执行周期</span>
-                  <input
-                    v-model="planForm.cycle"
-                    placeholder="每日 / 每2小时"
-                    type="text"
-                  />
-                </label>
-                <label class="config-field">
-                  <span>巡检范围</span>
-                  <input
-                    v-model="planForm.routeRange"
-                    placeholder="全线路 / 泵房区"
-                    type="text"
-                  />
-                </label>
-                <label class="config-field switch-field">
-                  <span>是否启用</span>
-                  <button
-                    :class="['plan-switch', { active: planForm.enabled }]"
-                    type="button"
-                    @click="planForm.enabled = !planForm.enabled"
-                  >
-                    {{ planForm.enabled ? "已启用" : "已停用" }}
-                  </button>
-                </label>
-              </div>
-
-              <div class="plan-editor-actions">
-                <button
-                  class="page-action-btn primary"
-                  type="button"
-                  @click="savePlan"
-                >
-                  {{ editingPlanId ? "更新计划" : "保存计划" }}
-                </button>
-                <button
-                  class="page-action-btn ghost"
-                  type="button"
-                  @click="resetPlanForm"
-                >
-                  重置
-                </button>
-              </div>
-
-              <div class="plan-list-shell">
-                <div
-                  v-for="plan in currentConfig.plans"
-                  :key="plan.id"
-                  class="plan-list-item"
-                >
-                  <div class="plan-item-main">
-                    <div class="plan-item-title">
-                      <span>{{ plan.name }}</span>
-                      <span
-                        :class="['plan-status-chip', { active: plan.enabled }]"
+                      <svg viewBox="0 0 24 24" aria-hidden="true">
+                        <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z" />
+                      </svg>
+                    </button>
+                  </div>
+                  <div class="round-list-shell">
+                    <div
+                      v-for="(plan, index) in currentConfig.plans"
+                      :key="plan.id"
+                      :class="['round-list-item compact', { active: currentConfig.activePlanId === plan.id }]"
+                      @click="setActiveRound(plan.id)"
+                    >
+                      <div class="round-list-main">
+                        <div class="round-list-title">轮次 {{ index + 1 }}</div>
+                      </div>
+                      <button
+                        class="round-delete-btn icon"
+                        type="button"
+                        title="删除轮次"
+                        aria-label="删除轮次"
+                        @click.stop="removeRound(plan.id)"
                       >
-                        {{ plan.enabled ? "启用中" : "已停用" }}
-                      </span>
-                    </div>
-                    <div class="plan-item-meta">
-                      <span>{{ plan.mode }}</span>
-                      <span>{{ plan.time }}</span>
-                      <span>{{ plan.cycle }}</span>
-                      <span>{{ plan.routeRange }}</span>
-                    </div>
-                    <div class="plan-item-updated">
-                      最近调整：{{ plan.updatedAt }}
+                        <svg viewBox="0 0 24 24" aria-hidden="true">
+                          <path
+                            d="M9 3h6l1 2h4v2H4V5h4l1-2zm1 7h2v8h-2v-8zm4 0h2v8h-2v-8zM7 10h2v8H7v-8z"
+                          />
+                        </svg>
+                      </button>
                     </div>
                   </div>
-                  <div class="plan-item-actions">
-                    <button type="button" @click="loadPlan(plan)">编辑</button>
-                    <button
-                      class="danger"
-                      type="button"
-                      @click="removePlan(plan.id)"
+                </div>
+
+                <div class="rounds-point-column">
+                  <div class="sub-panel-title">巡检点列表</div>
+                  <div class="point-list-shell">
+                    <div
+                      v-for="(point, index) in activeRoundPoints"
+                      :key="point.id"
+                      :class="[
+                        'point-list-item',
+                        {
+                          active: currentConfig.selectedPointIds.includes(point.id),
+                        },
+                      ]"
+                      @click="editPoint(point.id)"
                     >
-                      删除
-                    </button>
+                      <div class="point-list-main">
+                        <div class="point-list-title">点位 {{ index + 1 }} · {{ point.name }}</div>
+                        <div class="point-list-meta">
+                          <span>{{ point.type }}</span>
+                          <span v-if="point.type === '业务点'">{{ point.direction }}</span>
+                          <span v-if="point.type === '业务点'">升降柱 {{ point.liftHeight }}</span>
+                          <span v-if="point.type === '业务点'">{{ point.gimbalPreset }}</span>
+                        </div>
+                      </div>
+                      <div class="point-list-actions">
+                        <button type="button" @click.stop="openPlanDialog(point)">编辑</button>
+                        <button class="danger" type="button" @click.stop="removePoint(point.id)">
+                          删除
+                        </button>
+                      </div>
+                    </div>
+                    <div v-if="!activeRoundPoints.length" class="config-empty point-list-empty">
+                      当前巡检线路暂无巡检点，请在左侧地图中新增点位。
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
+
           </section>
         </div>
+
+        <div v-if="planDialogVisible" class="plan-dialog-mask" @click.self="closePlanDialog">
+          <div class="plan-dialog-card">
+            <div class="panel-head inline">
+              <div>
+                <div class="panel-title">当前航线参数编辑</div>
+                <div class="panel-subtitle">
+                  配置当前选中轮次的执行参数
+                </div>
+              </div>
+              <button class="dialog-close" type="button" @click="closePlanDialog">×</button>
+            </div>
+
+            <div class="config-form-grid compact plan-dialog-grid">
+              <label class="config-field wide">
+                <span>轮次名称</span>
+                <input v-model="planForm.roundName" type="text" />
+              </label>
+              <label class="config-field">
+                <span>巡检点名称</span>
+                <input v-model="planForm.pointName" type="text" />
+              </label>
+              <label class="config-field">
+                <span>巡检点类型</span>
+                <select v-model="planForm.pointType">
+                  <option v-for="type in pointTypeOptions" :key="type" :value="type">
+                    {{ type }}
+                  </option>
+                </select>
+              </label>
+              <label v-if="planForm.pointType === '业务点'" class="config-field">
+                <span>方向</span>
+                <select v-model="planForm.pointDirection">
+                  <option
+                    v-for="direction in pointDirectionOptions"
+                    :key="direction"
+                    :value="direction"
+                  >
+                    {{ direction }}
+                  </option>
+                </select>
+              </label>
+              <label v-if="planForm.pointType === '业务点'" class="config-field">
+                <span>升降柱高度</span>
+                <input v-model="planForm.liftHeight" type="text" />
+              </label>
+              <label v-if="planForm.pointType === '业务点'" class="config-field">
+                <span>预置点</span>
+                <input v-model="planForm.gimbalPreset" type="text" />
+              </label>
+            </div>
+
+            <div class="plan-editor-actions">
+              <button class="page-action-btn ghost" type="button" @click="closePlanDialog">
+                取消
+              </button>
+              <button class="page-action-btn primary" type="button" @click="savePlan">
+                保存参数
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="saveProgressVisible" class="save-progress-mask">
+          <div class="save-progress-card">
+            <div class="save-progress-title">保存下发</div>
+            <div class="save-progress-text">{{ saveProgressMessage }}</div>
+            <div class="save-progress-track">
+              <div class="save-progress-fill" :style="{ width: `${saveProgressValue}%` }"></div>
+            </div>
+            <div class="save-progress-value">{{ saveProgressValue }}%</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -1725,6 +2164,7 @@ onBeforeUnmount(() => {
 }
 
 .config-dialog {
+  position: relative;
   width: min(1760px, calc(100vw - 52px));
   height: min(980px, calc(100vh - 52px));
   display: flex;
@@ -1759,6 +2199,10 @@ onBeforeUnmount(() => {
   min-width: 0;
 }
 
+.config-header-main.modern {
+  flex: 1;
+}
+
 .config-title-row {
   display: flex;
   align-items: center;
@@ -1794,6 +2238,13 @@ onBeforeUnmount(() => {
   font-size: 12px;
 }
 
+.config-top-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
 .config-dialog-body {
   margin-top: 18px;
   flex: 1;
@@ -1803,6 +2254,10 @@ onBeforeUnmount(() => {
   gap: 16px;
 }
 
+.config-dialog-body.redesigned {
+  grid-template-columns: 60% 40%;
+}
+
 .config-map-panel,
 .config-side-card {
   background: linear-gradient(
@@ -1821,6 +2276,10 @@ onBeforeUnmount(() => {
   padding: 18px;
 }
 
+.redesigned-map-panel {
+  gap: 14px;
+}
+
 .config-side-panel {
   min-height: 0;
   display: flex;
@@ -1830,6 +2289,14 @@ onBeforeUnmount(() => {
   padding-right: 2px;
 }
 
+.redesigned-side-panel {
+  gap: 16px;
+}
+
+.panel-head.modern {
+  align-items: center;
+}
+
 .side-tabs {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1889,6 +2356,13 @@ onBeforeUnmount(() => {
   line-height: 1.5;
 }
 
+.sub-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
 .panel-actions {
   display: flex;
   flex-wrap: wrap;
@@ -1930,9 +2404,33 @@ onBeforeUnmount(() => {
   font-size: 12px;
 }
 
+.map-meta-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.meta-chip {
+  padding: 12px 14px;
+  border: 1px solid rgba(87, 198, 255, 0.14);
+  background: rgba(8, 31, 62, 0.58);
+}
+
+.meta-chip span {
+  display: block;
+  color: rgba(170, 224, 246, 0.72);
+  font-size: 12px;
+}
+
+.meta-chip strong {
+  display: block;
+  margin-top: 8px;
+  color: #f2fbff;
+  font-size: 14px;
+}
+
 .config-map-stage {
   position: relative;
-  margin-top: 14px;
   flex: 1;
   min-height: 420px;
   overflow: hidden;
@@ -1951,7 +2449,7 @@ onBeforeUnmount(() => {
     linear-gradient(135deg, rgba(5, 18, 38, 0.98), rgba(6, 28, 56, 0.96));
 }
 
-.config-map-svg,
+.config-map-canvas,
 .map-hit-layer {
   position: absolute;
   inset: 0;
@@ -1961,92 +2459,10 @@ onBeforeUnmount(() => {
   z-index: 2;
 }
 
-.config-map-svg {
+.config-map-canvas {
   width: 100%;
   height: 100%;
-}
-
-.map-grid line {
-  stroke: rgba(97, 214, 255, 0.08);
-  stroke-width: 0.15;
-}
-
-.map-tunnel-outline {
-  fill: none;
-  stroke: rgba(78, 192, 255, 0.22);
-  stroke-width: 8;
-  stroke-linecap: round;
-}
-
-.map-route-line {
-  fill: none;
-  stroke: url(#routeGlow);
-  stroke-width: 1.2;
-  stroke-linecap: round;
-  stroke-dasharray: 1.5 1.2;
-}
-
-.point-cloud-layer circle {
-  fill: rgba(146, 236, 255, 0.42);
-}
-
-.map-point {
-  position: absolute;
-  z-index: 3;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  transform: translate(-50%, -50%);
-  cursor: pointer;
-}
-
-.map-point-core {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: 2px solid rgba(231, 250, 255, 0.88);
-  box-shadow: 0 0 18px currentColor;
-}
-
-.map-point-label {
-  padding: 4px 8px;
-  background: rgba(4, 19, 39, 0.78);
-  border: 1px solid rgba(91, 208, 255, 0.18);
-  color: #eafcff;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.map-point.selected .map-point-core,
-.map-point.selected .map-point-label {
-  box-shadow: 0 0 18px rgba(112, 226, 255, 0.26);
-}
-
-.map-point.selected .map-point-label {
-  border-color: rgba(112, 226, 255, 0.58);
-  background: rgba(10, 48, 88, 0.88);
-}
-
-.type-normal {
-  color: #66d7ff;
-}
-
-.type-thermal {
-  color: #ffb26e;
-}
-
-.type-pump {
-  color: #9af7c8;
-}
-
-.selection-rect {
-  position: absolute;
-  z-index: 4;
-  border: 1px dashed rgba(121, 234, 255, 0.92);
-  background: rgba(92, 220, 255, 0.1);
+  display: block;
 }
 
 .stage-overlay {
@@ -2079,6 +2495,52 @@ onBeforeUnmount(() => {
   bottom: 14px;
 }
 
+.map-bottom-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+  gap: 14px;
+  min-height: 0;
+}
+
+.point-list-panel,
+.point-editor-card {
+  min-height: 0;
+  padding: 16px;
+  background: linear-gradient(
+    180deg,
+    rgba(7, 28, 56, 0.82),
+    rgba(4, 16, 34, 0.88)
+  );
+  border: 1px solid rgba(82, 197, 255, 0.14);
+  box-shadow: inset 0 0 18px rgba(54, 170, 245, 0.04);
+}
+
+.sub-panel-title {
+  color: #f0fbff;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.round-add-btn {
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(87, 198, 255, 0.2);
+  background: rgba(8, 31, 62, 0.72);
+  color: #8cf7ff;
+  cursor: pointer;
+}
+
+.round-add-btn svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
 .point-tag-row {
   margin-top: 12px;
   display: flex;
@@ -2201,6 +2663,101 @@ onBeforeUnmount(() => {
   gap: 10px;
 }
 
+.plan-dialog-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+  background: rgba(2, 10, 22, 0.62);
+  backdrop-filter: blur(6px);
+}
+
+.plan-dialog-card {
+  width: min(760px, calc(100% - 32px));
+  padding: 18px;
+  background: linear-gradient(
+    180deg,
+    rgba(8, 31, 62, 0.98) 0%,
+    rgba(4, 15, 34, 0.98) 100%
+  );
+  border: 1px solid rgba(89, 208, 255, 0.24);
+  box-shadow:
+    0 24px 56px rgba(0, 0, 0, 0.42),
+    inset 0 0 0 1px rgba(83, 193, 255, 0.08);
+}
+
+.plan-dialog-grid {
+  margin-top: 16px;
+}
+
+.save-progress-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+  background: rgba(2, 10, 22, 0.62);
+  backdrop-filter: blur(6px);
+}
+
+.save-progress-card {
+  width: min(420px, calc(100% - 32px));
+  padding: 22px 24px;
+  background: linear-gradient(
+    180deg,
+    rgba(8, 31, 62, 0.98) 0%,
+    rgba(4, 15, 34, 0.98) 100%
+  );
+  border: 1px solid rgba(89, 208, 255, 0.24);
+  box-shadow:
+    0 24px 56px rgba(0, 0, 0, 0.42),
+    inset 0 0 0 1px rgba(83, 193, 255, 0.08);
+}
+
+.save-progress-title {
+  color: #f2fbff;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.save-progress-text {
+  margin-top: 10px;
+  color: rgba(179, 227, 247, 0.82);
+  font-size: 13px;
+}
+
+.save-progress-track {
+  margin-top: 18px;
+  height: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(87, 198, 255, 0.16);
+  background: rgba(8, 31, 62, 0.62);
+}
+
+.save-progress-fill {
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgba(24, 102, 180, 0.92) 0%,
+    rgba(35, 158, 215, 0.9) 100%
+  );
+  box-shadow: 0 0 18px rgba(52, 177, 255, 0.26);
+  transition: width 0.18s ease;
+}
+
+.save-progress-value {
+  margin-top: 12px;
+  color: #9af6ff;
+  font-size: 13px;
+  font-weight: 700;
+  text-align: right;
+}
+
 .plan-list-shell {
   margin-top: 14px;
   display: flex;
@@ -2281,6 +2838,225 @@ onBeforeUnmount(() => {
   background: rgba(126, 31, 20, 0.22);
 }
 
+.rounds-board {
+  padding: 16px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.rounds-split-layout {
+  margin-top: 14px;
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(180px, 36%) minmax(0, 64%);
+  gap: 14px;
+}
+
+.rounds-nav-column,
+.rounds-point-column {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  border: 1px solid rgba(87, 198, 255, 0.14);
+  box-shadow: inset 0 0 18px rgba(54, 170, 245, 0.04);
+}
+
+.rounds-nav-column {
+  background: linear-gradient(
+    180deg,
+    rgba(6, 24, 46, 0.82),
+    rgba(5, 18, 36, 0.9)
+  );
+}
+
+.rounds-point-column {
+  background: linear-gradient(
+    180deg,
+    rgba(8, 34, 62, 0.84),
+    rgba(6, 22, 42, 0.92)
+  );
+}
+
+.round-list-shell {
+  margin-top: 14px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+}
+
+.round-list-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid rgba(84, 197, 255, 0.12);
+  background: rgba(8, 31, 62, 0.62);
+  cursor: pointer;
+}
+
+.round-list-item.compact {
+  gap: 8px;
+  align-items: center;
+  padding: 10px 10px 10px 12px;
+}
+
+.round-list-item.active {
+  border-color: rgba(102, 235, 255, 0.42);
+  background: rgba(10, 48, 88, 0.88);
+}
+
+.round-list-main,
+.point-list-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.round-list-item.compact .round-list-title {
+  font-size: 13px;
+  line-height: 1.2;
+}
+
+.round-list-item.compact .round-list-meta {
+  margin-top: 4px;
+  font-size: 11px;
+}
+
+.round-list-title,
+.point-list-title {
+  color: #f2fbff;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.round-list-meta,
+.point-list-meta {
+  margin-top: 6px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  color: rgba(171, 223, 246, 0.76);
+  font-size: 12px;
+}
+
+.round-delete-btn,
+.point-list-actions button {
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgba(87, 198, 255, 0.2);
+  background: rgba(8, 31, 62, 0.72);
+  color: #eafcff;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.round-delete-btn.icon {
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.round-delete-btn.icon svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.point-list-shell {
+  margin-top: 14px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+}
+
+.point-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid rgba(84, 197, 255, 0.12);
+  background: rgba(8, 31, 62, 0.62);
+  cursor: pointer;
+}
+
+.point-list-empty {
+  margin-top: 0;
+}
+
+.point-list-item.active {
+  border-color: rgba(255, 196, 118, 0.52);
+  background: rgba(96, 56, 18, 0.62);
+  box-shadow: inset 0 0 0 1px rgba(255, 196, 118, 0.12);
+}
+
+.point-list-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.point-list-actions .danger,
+.round-delete-btn,
+.page-action-btn.danger {
+  border-color: rgba(255, 126, 112, 0.2);
+  color: #ffd0cc;
+  background: rgba(126, 31, 20, 0.22);
+}
+
+.point-editor-grid {
+  margin-top: 14px;
+}
+
+.round-summary-strip {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.summary-item {
+  padding: 12px;
+  border: 1px solid rgba(87, 198, 255, 0.14);
+  background: rgba(8, 31, 62, 0.54);
+}
+
+.summary-item span {
+  display: block;
+  color: rgba(170, 224, 246, 0.72);
+  font-size: 12px;
+}
+
+.summary-item strong {
+  display: block;
+  margin-top: 6px;
+  color: #f2fbff;
+  font-size: 14px;
+}
+
+.page-action-btn.amber {
+  color: #ffe0a8;
+  border-color: rgba(245, 190, 88, 0.34) !important;
+  background: linear-gradient(
+    90deg,
+    rgba(118, 78, 16, 0.88),
+    rgba(168, 116, 32, 0.74)
+  ) !important;
+}
+
 @media (max-width: 1480px) {
   .config-dialog-body {
     grid-template-columns: 1fr;
@@ -2295,5 +3071,37 @@ onBeforeUnmount(() => {
     max-height: calc(100vh - 52px);
     overflow: auto;
   }
+
+  .config-dialog-body.redesigned,
+  .map-meta-strip,
+  .map-bottom-grid,
+  .round-summary-strip {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .rounds-split-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 960px) {
+  .config-top-actions,
+  .config-dialog-header {
+    flex-direction: column;
+  }
+
+  .config-top-actions {
+    width: 100%;
+  }
+
+  .config-top-actions .page-action-btn {
+    width: 100%;
+  }
+
+  .map-meta-strip,
+  .map-bottom-grid,
+  .round-summary-strip {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/src/views/dashboard1/pages/IntegratedCenterPage.vue b/src/views/dashboard1/pages/IntegratedCenterPage.vue
index 697d0cb..7ca0ad0 100644
--- a/src/views/dashboard1/pages/IntegratedCenterPage.vue
+++ b/src/views/dashboard1/pages/IntegratedCenterPage.vue
@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import monitorVideo from "../assets/循环背景动画.mp4";
+import { recentAlertPhotoSources } from "../shared/alertPhotos";
+
+const monitorVideo = "https://wuhuimg.oss-cn-shanghai.aliyuncs.com/video/output.mp4";
+
+type DriveMode = "阿克曼" | "旋转" | "横移";
 
 interface DeviceItem {
   id: string;
@@ -26,7 +30,11 @@ interface NavPoint {
 
 interface NavScenario {
   routePath: string;
-  cloudPoints: NavPoint[];
+  lanePath: string;
+  upperEdgePath: string;
+  lowerEdgePath: string;
+  upperWallPoints: NavPoint[];
+  lowerWallPoints: NavPoint[];
   checkPoints: Array<{ x: number; y: number; label: string }>;
 }
 
@@ -34,8 +42,8 @@ interface AlertItem {
   id: string;
   title: string;
   level: "高" | "中" | "低";
-  location: string;
   time: string;
+  photo: string;
 }
 
 const projectDevices: ProjectItem[] = [
@@ -92,28 +100,35 @@ const recentAlerts: AlertItem[] = [
     id: "AL-001",
     title: "线缆破损",
     level: "高",
-    location: "西江隧道 K1+240",
-    time: "10:24:18",
+    time: "2026-06-26 10:24:18",
+    photo: recentAlertPhotoSources["线缆破损"],
   },
   {
     id: "AL-002",
     title: "局部高温",
     level: "中",
-    location: "西江隧道 泵房区",
-    time: "10:18:42",
+    time: "2026-06-26 10:18:42",
+    photo: recentAlertPhotoSources["局部高温"],
   },
   {
     id: "AL-003",
     title: "墙体裂缝",
     level: "低",
-    location: "西江隧道 K1+860",
-    time: "09:56:11",
+    time: "2026-06-26 09:56:11",
+    photo: recentAlertPhotoSources["墙体裂缝"],
   },
 ];
 
 const alertTabs = ["全部", "线缆破损", "局部高温", "墙体裂缝"] as const;
 const activeAlertTab = ref<(typeof alertTabs)[number]>("全部");
 const activeCameraMode = ref<"white" | "infrared">("white");
+const driveModeTabs: DriveMode[] = ["阿克曼", "旋转", "横移"];
+const activeDriveMode = ref<DriveMode>("阿克曼");
+const presetPointOptions = Array.from(
+  { length: 10 },
+  (_, index) => `预置点${index + 1}`,
+);
+const selectedPresetPoint = ref("预置点1");
 const controlMode = ref<"人工接管" | "自主巡检">("人工接管");
 const targetLiftHeight = ref("1200");
 const liftRealtimeStatus = ref("待命");
@@ -121,38 +136,73 @@ const liftRealtimeHeight = ref("1180");
 
 const navScenario: NavScenario = {
   routePath:
-    "M 72 310 C 118 282, 164 265, 212 248 S 312 205, 360 216 S 446 270, 504 248 S 612 188, 690 210",
-  cloudPoints: [
-    { x: 52, y: 120 },
-    { x: 86, y: 132 },
-    { x: 128, y: 148 },
-    { x: 164, y: 138 },
-    { x: 204, y: 118 },
-    { x: 252, y: 104 },
-    { x: 304, y: 120 },
-    { x: 346, y: 142 },
-    { x: 392, y: 168 },
-    { x: 442, y: 162 },
-    { x: 494, y: 134 },
-    { x: 548, y: 116 },
-    { x: 602, y: 132 },
-    { x: 660, y: 152 },
-    { x: 94, y: 254 },
-    { x: 150, y: 236 },
-    { x: 214, y: 220 },
-    { x: 278, y: 208 },
-    { x: 338, y: 214 },
-    { x: 400, y: 236 },
-    { x: 468, y: 258 },
-    { x: 530, y: 238 },
-    { x: 592, y: 214 },
-    { x: 656, y: 226 },
+    "M 106 318 L 154 306 L 208 292 L 256 278 L 306 264 L 358 258 L 414 258 L 468 248 L 522 241 L 578 234 L 638 226",
+  lanePath:
+    "M 82 270 L 136 258 L 190 244 L 244 230 L 296 216 L 350 208 L 408 208 L 464 198 L 518 190 L 576 182 L 642 174 L 656 188 L 650 278 L 586 286 L 528 294 L 472 302 L 414 312 L 358 312 L 304 320 L 252 334 L 198 348 L 142 360 L 88 370 L 74 356 Z",
+  upperEdgePath:
+    "M 82 270 L 136 258 L 190 244 L 244 230 L 296 216 L 350 208 L 408 208 L 464 198 L 518 190 L 576 182 L 642 174",
+  lowerEdgePath:
+    "M 88 370 L 142 360 L 198 348 L 252 334 L 304 320 L 358 312 L 414 312 L 472 302 L 528 294 L 586 286 L 650 278",
+  upperWallPoints: [
+    { x: 64, y: 164 },
+    { x: 84, y: 150 },
+    { x: 104, y: 142 },
+    { x: 126, y: 136 },
+    { x: 148, y: 132 },
+    { x: 172, y: 126 },
+    { x: 196, y: 122 },
+    { x: 224, y: 118 },
+    { x: 252, y: 116 },
+    { x: 280, y: 112 },
+    { x: 312, y: 110 },
+    { x: 344, y: 108 },
+    { x: 378, y: 108 },
+    { x: 412, y: 110 },
+    { x: 448, y: 112 },
+    { x: 484, y: 114 },
+    { x: 520, y: 116 },
+    { x: 556, y: 120 },
+    { x: 590, y: 126 },
+    { x: 622, y: 134 },
+    { x: 650, y: 144 },
+    { x: 676, y: 158 },
+    { x: 116, y: 170 },
+    { x: 214, y: 156 },
+    { x: 326, y: 146 },
+    { x: 446, y: 148 },
+    { x: 566, y: 160 },
+    { x: 638, y: 172 },
+  ],
+  lowerWallPoints: [
+    { x: 72, y: 380 },
+    { x: 96, y: 392 },
+    { x: 122, y: 404 },
+    { x: 150, y: 410 },
+    { x: 180, y: 416 },
+    { x: 214, y: 420 },
+    { x: 248, y: 422 },
+    { x: 284, y: 424 },
+    { x: 322, y: 426 },
+    { x: 360, y: 426 },
+    { x: 400, y: 424 },
+    { x: 440, y: 420 },
+    { x: 480, y: 414 },
+    { x: 520, y: 408 },
+    { x: 558, y: 400 },
+    { x: 594, y: 392 },
+    { x: 628, y: 384 },
+    { x: 660, y: 374 },
+    { x: 700, y: 366 },
+    { x: 126, y: 376 },
+    { x: 238, y: 392 },
+    { x: 354, y: 396 },
+    { x: 474, y: 388 },
+    { x: 590, y: 372 },
   ],
   checkPoints: [
-    { x: 104, y: 280, label: "起点" },
-    { x: 268, y: 224, label: "高温检测点" },
-    { x: 480, y: 256, label: "泵房区" },
-    { x: 674, y: 214, label: "终点" },
+    { x: 106, y: 318, label: "起点" },
+    { x: 358, y: 258, label: "途经点" },
+    { x: 638, y: 226, label: "终点" },
   ],
 };
 
@@ -177,11 +227,19 @@ function switchCameraMode(mode: "white" | "infrared") {
   activeCameraMode.value = mode;
 }
 
+function switchDriveMode(mode: DriveMode) {
+  activeDriveMode.value = mode;
+}
+
 function toggleControlMode() {
   controlMode.value =
     controlMode.value === "人工接管" ? "自主巡检" : "人工接管";
 }
 
+function jumpToPresetPoint() {
+  selectedPresetPoint.value = selectedPresetPoint.value;
+}
+
 function runToTargetHeight() {
   const normalizedHeight = targetLiftHeight.value.replace(/[^\d]/g, "");
 
@@ -218,7 +276,6 @@ function getStatusClass(status: DeviceItem["status"]) {
               </div>
               <div class="device-meta">
                 <span>{{ device.id }}</span>
-                <span>{{ device.location }}</span>
                 <span>{{ device.battery }}</span>
               </div>
             </div>
@@ -242,14 +299,24 @@ function getStatusClass(status: DeviceItem["status"]) {
           </div>
           <template v-if="filteredRecentAlerts.length">
             <div v-for="alert in filteredRecentAlerts" :key="alert.id" class="alert-item">
-              <div class="alert-main">
-                <div class="alert-title">{{ alert.title }}</div>
-                <div class="alert-level">{{ alert.level }}级</div>
-              </div>
-              <div class="alert-meta">
-                <span>{{ alert.id }}</span>
-                <span>{{ alert.location }}</span>
-                <span>{{ alert.time }}</span>
+              <div class="alert-content">
+                <img class="alert-thumbnail" :src="alert.photo" :alt="alert.title" />
+                <div class="alert-info">
+                  <div class="alert-summary">
+                    <div class="alert-field">
+                      <div class="alert-label">告警类型</div>
+                      <div class="alert-title">{{ alert.title }}</div>
+                    </div>
+                    <div class="alert-field alert-field-right">
+                      <div class="alert-label">告警等级</div>
+                      <div :class="['alert-level', `level-${alert.level}`]">{{ alert.level }}级</div>
+                    </div>
+                  </div>
+                  <div class="alert-time-row">
+                    <span class="alert-label">告警时间</span>
+                    <span class="alert-time">{{ alert.time }}</span>
+                  </div>
+                </div>
               </div>
             </div>
           </template>
@@ -266,13 +333,25 @@ function getStatusClass(status: DeviceItem["status"]) {
               <line v-for="line in 7" :key="`h-${line}`" :x1="40" :y1="line * 52" :x2="720" :y2="line * 52" />
               <line v-for="line in 12" :key="`v-${line}`" :x1="line * 56" :y1="40" :x2="line * 56" :y2="380" />
             </g>
-            <g class="cloud-layer">
+            <path class="corridor-lane" :d="currentScenario.lanePath" />
+            <path class="corridor-edge" :d="currentScenario.upperEdgePath" />
+            <path class="corridor-edge" :d="currentScenario.lowerEdgePath" />
+            <g class="wall-layer wall-upper">
               <circle
-                v-for="(point, index) in currentScenario.cloudPoints"
-                :key="`point-${index}`"
+                v-for="(point, index) in currentScenario.upperWallPoints"
+                :key="`upper-wall-${index}`"
                 :cx="point.x"
                 :cy="point.y"
-                :r="index % 3 === 0 ? 3 : 2"
+                :r="index % 4 === 0 ? 3.4 : 2.4"
+              />
+            </g>
+            <g class="wall-layer wall-lower">
+              <circle
+                v-for="(point, index) in currentScenario.lowerWallPoints"
+                :key="`lower-wall-${index}`"
+                :cx="point.x"
+                :cy="point.y"
+                :r="index % 5 === 0 ? 3.2 : 2.3"
               />
             </g>
             <path class="route-glow" :d="currentScenario.routePath" />
@@ -300,35 +379,14 @@ function getStatusClass(status: DeviceItem["status"]) {
               </path>
             </g>
           </svg>
-          <div class="nav-map-overlay top-left">激光雷达点云</div>
-          <div class="nav-map-overlay top-right">路径跟踪中</div>
+          <div class="nav-map-overlay top-left">隧道点云走廊</div>
+          <div class="nav-map-overlay top-right">窄通道路径跟踪</div>
           <div class="nav-map-overlay bottom-left">
             机器人编号：{{ currentRobot.id }} / {{ currentRobot.task }}
           </div>
           <div class="nav-map-overlay bottom-right">
-            线速度 {{ currentRobot.linearSpeed }} / 角速度 {{ currentRobot.angularSpeed }}
-          </div>
-        </div>
-        <div class="nav-map-footer">
-          <div class="footer-item">
-            <span class="footer-label">当前位置</span>
-            <span class="footer-value">{{ currentRobot.location }}</span>
-          </div>
-          <div class="footer-item">
-            <span class="footer-label">电量</span>
-            <span class="footer-value">{{ currentRobot.battery }}</span>
-          </div>
-          <div class="footer-item">
-            <span class="footer-label">任务状态</span>
-            <span class="footer-value">{{ currentRobot.task }}</span>
-          </div>
-          <div class="footer-item">
-            <span class="footer-label">实时线速度</span>
-            <span class="footer-value">{{ currentRobot.linearSpeed }}</span>
-          </div>
-          <div class="footer-item">
-            <span class="footer-label">实时角速度</span>
-            <span class="footer-value">{{ currentRobot.angularSpeed }}</span>
+            电量 {{ currentRobot.battery }} / 线速度 {{ currentRobot.linearSpeed }} / 角速度
+            {{ currentRobot.angularSpeed }}
           </div>
         </div>
       </div>
@@ -371,7 +429,6 @@ function getStatusClass(status: DeviceItem["status"]) {
               {{ activeCameraMode === "white" ? "白光镜头" : "红外镜头" }}
             </div>
             <div class="video-overlay bottom-left">{{ currentRobot.id }}</div>
-            <div class="video-overlay bottom-right">{{ currentRobot.location }}</div>
           </div>
         </div>
       </div>
@@ -403,6 +460,17 @@ function getStatusClass(status: DeviceItem["status"]) {
             <div class="control-top-row">
               <div class="vehicle-section">
                 <div class="section-title control-block-title">底盘驱动</div>
+                <div class="drive-mode-tabs">
+                  <button
+                    v-for="mode in driveModeTabs"
+                    :key="mode"
+                    :class="['drive-mode-tab', { active: activeDriveMode === mode }]"
+                    type="button"
+                    @click="switchDriveMode(mode)"
+                  >
+                    {{ mode }}
+                  </button>
+                </div>
                 <div class="vehicle-pad">
                   <button class="drive-btn drive-up" type="button">
                     <span class="drive-arrow">↑</span>
@@ -425,6 +493,22 @@ function getStatusClass(status: DeviceItem["status"]) {
               </div>
               <div class="control-section gimbal-section">
                 <div class="section-title">云台控制</div>
+                <div class="gimbal-preset-panel">
+                  <label class="gimbal-preset-group">
+                    <select v-model="selectedPresetPoint" class="gimbal-preset-select">
+                      <option
+                        v-for="preset in presetPointOptions"
+                        :key="preset"
+                        :value="preset"
+                      >
+                        {{ preset }}
+                      </option>
+                    </select>
+                  </label>
+                  <button class="gimbal-preset-btn" type="button" @click="jumpToPresetPoint">
+                    跳转
+                  </button>
+                </div>
                 <div class="vehicle-pad gimbal-wheel">
                   <button class="drive-btn drive-up" type="button">
                     <span class="drive-arrow">↑</span>
@@ -482,3 +566,4 @@ function getStatusClass(status: DeviceItem["status"]) {
     </div>
   </div>
 </template>
+
diff --git a/src/views/dashboard1/pages/PatrolPlanPage.vue b/src/views/dashboard1/pages/PatrolPlanPage.vue
index ba7f0c4..02c6778 100644
--- a/src/views/dashboard1/pages/PatrolPlanPage.vue
+++ b/src/views/dashboard1/pages/PatrolPlanPage.vue
@@ -12,7 +12,6 @@ interface PatrolRecord {
   robot: string;
   startTime: string;
   endTime: string;
-  mileage: string;
   alarms: PatrolAlarmRecord[];
 }
 
@@ -22,7 +21,6 @@ const patrolRecords: PatrolRecord[] = [
     robot: "巡检机器人 R1",
     startTime: "2026-06-23 08:10:22",
     endTime: "2026-06-23 09:02:15",
-    mileage: "3.8 km",
     alarms: [
       { id: "AL-001", type: "线缆破损", reportTime: "2026-06-23 08:36:12" },
       { id: "AL-002", type: "局部高温", reportTime: "2026-06-23 08:42:09" },
@@ -33,7 +31,6 @@ const patrolRecords: PatrolRecord[] = [
     robot: "巡检机器人 Q1",
     startTime: "2026-06-23 09:20:08",
     endTime: "2026-06-23 10:01:46",
-    mileage: "2.9 km",
     alarms: [
       { id: "AL-005", type: "应急门开启异常", reportTime: "2026-06-23 09:48:57" },
     ],
@@ -43,7 +40,6 @@ const patrolRecords: PatrolRecord[] = [
     robot: "巡检机器人 N3",
     startTime: "2026-06-23 10:08:34",
     endTime: "2026-06-23 11:12:25",
-    mileage: "4.6 km",
     alarms: [
       { id: "AL-003", type: "墙体裂缝", reportTime: "2026-06-23 10:36:41" },
       { id: "AL-006", type: "水渍渗漏", reportTime: "2026-06-23 10:54:18" },
@@ -55,7 +51,6 @@ const patrolRecords: PatrolRecord[] = [
     robot: "巡检机器人 R2",
     startTime: "2026-06-23 13:15:17",
     endTime: "2026-06-23 14:05:52",
-    mileage: "3.2 km",
     alarms: [],
   },
 ];
@@ -93,7 +88,6 @@ function closeDialog() {
                 <th>巡检机器人</th>
                 <th>开始巡检时间</th>
                 <th>结束巡检时间</th>
-                <th>巡检里程</th>
                 <th>告警触发次数</th>
               </tr>
             </thead>
@@ -103,7 +97,6 @@ function closeDialog() {
                 <td>{{ record.robot }}</td>
                 <td>{{ record.startTime }}</td>
                 <td>{{ record.endTime }}</td>
-                <td>{{ record.mileage }}</td>
                 <td>
                   <button
                     class="alarm-link-btn"
diff --git a/src/views/dashboard1/pages/VideoCenterPage.vue b/src/views/dashboard1/pages/VideoCenterPage.vue
index a77c62d..93b8803 100644
--- a/src/views/dashboard1/pages/VideoCenterPage.vue
+++ b/src/views/dashboard1/pages/VideoCenterPage.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, nextTick, ref } from "vue";
 import monitorVideo from "../assets/循环背景动画.mp4";
 
 type GridMode = 1 | 4 | 9;
@@ -38,7 +38,7 @@ const projectData: ProjectNode = {
       cameras: [
         { id: "CAM-001", name: "白光镜头", type: "白光", status: "在线" },
         { id: "CAM-002", name: "红外镜头", type: "红外", status: "在线" },
-        { id: "CAM-003", name: "云台辅镜头", type: "辅助", status: "在线" },
+        { id: "CAM-003", name: "云台辅助镜头", type: "辅助", status: "在线" },
       ],
     },
     {
@@ -53,10 +53,13 @@ const projectData: ProjectNode = {
 };
 
 const gridMode = ref<GridMode>(4);
-const playbackProgress = ref(42);
-const playbackDate = ref("2026-06-23");
-const playbackTime = ref("14:20:00");
 const activeCameraId = ref(projectData.devices[0].cameras[0].id);
+const playbackDialogVisible = ref(false);
+const playbackStartAt = ref("2026-06-23T14:20");
+const playbackEndAt = ref("2026-06-23T14:50");
+const playbackProgress = ref(0);
+const playbackPaused = ref(true);
+const playbackPlayerRef = ref<HTMLVideoElement | null>(null);
 
 const currentProject = computed(() => projectData);
 
@@ -71,7 +74,9 @@ const projectCameras = computed<ProjectCameraItem[]>(() =>
 );
 
 const activeCamera = computed(
-  () => projectCameras.value.find((camera) => camera.id === activeCameraId.value) ?? projectCameras.value[0],
+  () =>
+    projectCameras.value.find((camera) => camera.id === activeCameraId.value) ??
+    projectCameras.value[0],
 );
 
 const orderedCameras = computed(() => {
@@ -97,6 +102,12 @@ const visibleCameras = computed(() => {
   return Array.from({ length: targetCount }, (_, index) => cameras[index] ?? null);
 });
 
+const playbackRangeLabel = computed(() => {
+  const startLabel = playbackStartAt.value.replace("T", " ");
+  const endLabel = playbackEndAt.value.replace("T", " ");
+  return `${startLabel} - ${endLabel}`;
+});
+
 function selectCamera(cameraId: string) {
   activeCameraId.value = cameraId;
 }
@@ -104,6 +115,92 @@ function selectCamera(cameraId: string) {
 function setGridMode(mode: GridMode) {
   gridMode.value = mode;
 }
+
+function syncPlaybackProgress() {
+  const video = playbackPlayerRef.value;
+
+  if (!video) {
+    playbackProgress.value = 0;
+    playbackPaused.value = true;
+    return;
+  }
+
+  const duration = Number.isFinite(video.duration) ? video.duration : 0;
+  playbackProgress.value = duration > 0 ? (video.currentTime / duration) * 100 : 0;
+  playbackPaused.value = video.paused;
+}
+
+function startPlayback() {
+  const video = playbackPlayerRef.value;
+
+  if (!video) {
+    return;
+  }
+
+  video.currentTime = 0;
+  void video.play();
+  playbackPaused.value = false;
+  syncPlaybackProgress();
+}
+
+async function openPlaybackDialog() {
+  playbackDialogVisible.value = true;
+  playbackProgress.value = 0;
+  playbackPaused.value = true;
+
+  await nextTick();
+  startPlayback();
+}
+
+function closePlaybackDialog() {
+  playbackPlayerRef.value?.pause();
+  playbackDialogVisible.value = false;
+  playbackPaused.value = true;
+}
+
+function togglePlaybackPause() {
+  const video = playbackPlayerRef.value;
+
+  if (!video) {
+    return;
+  }
+
+  if (video.paused) {
+    void video.play();
+  } else {
+    video.pause();
+  }
+
+  syncPlaybackProgress();
+}
+
+function seekPlayback(offsetSeconds: number) {
+  const video = playbackPlayerRef.value;
+
+  if (!video) {
+    return;
+  }
+
+  const duration = Number.isFinite(video.duration) ? video.duration : 0;
+  const targetTime = Math.max(0, Math.min(duration, video.currentTime + offsetSeconds));
+  video.currentTime = targetTime;
+  syncPlaybackProgress();
+}
+
+function updatePlaybackProgress() {
+  const video = playbackPlayerRef.value;
+
+  if (!video) {
+    return;
+  }
+
+  const duration = Number.isFinite(video.duration) ? video.duration : 0;
+  if (duration <= 0) {
+    return;
+  }
+
+  video.currentTime = (playbackProgress.value / 100) * duration;
+}
 </script>
 
 <template>
@@ -128,6 +225,11 @@ function setGridMode(mode: GridMode) {
               <span class="tree-device-id">{{ camera.deviceName }} / {{ camera.id }}</span>
             </button>
           </div>
+          <div class="tree-panel-footer">
+            <button class="tree-playback-btn" type="button" @click="openPlaybackDialog">
+              录像回放
+            </button>
+          </div>
         </div>
       </aside>
 
@@ -176,36 +278,74 @@ function setGridMode(mode: GridMode) {
             </template>
           </div>
         </div>
-
-        <div class="playback-panel">
-          <div class="playback-header">
-            <div class="playback-title">录像回放</div>
-            <div class="playback-filter">
-              <input v-model="playbackDate" type="date" />
-              <input v-model="playbackTime" type="time" step="1" />
-            </div>
-          </div>
-          <div class="playback-controls">
-            <button class="playback-btn" type="button">回放</button>
-            <button class="playback-btn" type="button">暂停</button>
-            <button class="playback-btn" type="button">快退</button>
-            <button class="playback-btn" type="button">快进</button>
-            <div class="playback-track">
-              <div class="playback-track-line">
-                <span :style="{ width: `${playbackProgress}%` }"></span>
-              </div>
-              <input
-                v-model="playbackProgress"
-                class="playback-range"
-                max="100"
-                min="0"
-                type="range"
-              />
-            </div>
-            <div class="playback-time">{{ playbackDate }} {{ playbackTime }}</div>
-          </div>
-        </div>
       </section>
     </div>
+
+    <div
+      v-if="playbackDialogVisible && activeCamera"
+      class="playback-dialog-mask"
+      @click.self="closePlaybackDialog"
+    >
+      <div class="playback-dialog">
+        <div class="playback-dialog-header">
+          <div>
+            <div class="playback-dialog-title">录像回放</div>
+            <div class="playback-dialog-meta">
+              {{ activeCamera.deviceName }} / {{ activeCamera.name }} / {{ activeCamera.id }}
+            </div>
+          </div>
+          <button class="dialog-close" type="button" @click="closePlaybackDialog">×</button>
+        </div>
+
+        <div class="playback-dialog-filter">
+          <label class="playback-field">
+            <span>开始时间</span>
+            <input v-model="playbackStartAt" type="datetime-local" />
+          </label>
+          <label class="playback-field">
+            <span>结束时间</span>
+            <input v-model="playbackEndAt" type="datetime-local" />
+          </label>
+          <button class="playback-btn playback-launch-btn" type="button" @click="startPlayback">
+            开始回放
+          </button>
+        </div>
+
+        <div class="playback-preview">
+          <video
+            ref="playbackPlayerRef"
+            :src="monitorVideo"
+            playsinline
+            @ended="syncPlaybackProgress"
+            @loadedmetadata="syncPlaybackProgress"
+            @pause="syncPlaybackProgress"
+            @play="syncPlaybackProgress"
+            @timeupdate="syncPlaybackProgress"
+          ></video>
+        </div>
+
+        <div class="playback-dialog-controls">
+          <button class="playback-btn" type="button" @click="togglePlaybackPause">
+            {{ playbackPaused ? "播放" : "暂停" }}
+          </button>
+          <button class="playback-btn" type="button" @click="seekPlayback(-10)">快退 10s</button>
+          <button class="playback-btn" type="button" @click="seekPlayback(10)">快进 10s</button>
+          <div class="playback-track">
+            <div class="playback-track-line">
+              <span :style="{ width: `${playbackProgress}%` }"></span>
+            </div>
+            <input
+              v-model="playbackProgress"
+              class="playback-range"
+              max="100"
+              min="0"
+              type="range"
+              @input="updatePlaybackProgress"
+            />
+          </div>
+          <div class="playback-time">{{ playbackRangeLabel }}</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/src/views/dashboard1/shared/alertPhotos.ts b/src/views/dashboard1/shared/alertPhotos.ts
new file mode 100644
index 0000000..907a15c
--- /dev/null
+++ b/src/views/dashboard1/shared/alertPhotos.ts
@@ -0,0 +1,78 @@
+export type AlertPhotoScene = "cable" | "heat" | "crack";
+
+export function createAlertPhoto(scene: AlertPhotoScene, accent: string) {
+  const sceneMarkup =
+    scene === "cable"
+      ? `
+        <path d="M64 112 C140 90, 222 88, 304 104 S470 132, 556 110" stroke="${accent}" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.9" />
+        <path d="M314 106 L340 92 L366 120" stroke="#ffe9a6" stroke-width="5" fill="none" stroke-linecap="round" />
+        <circle cx="340" cy="106" r="32" fill="rgba(255,102,82,0.18)" stroke="#ff8e79" stroke-width="2" stroke-dasharray="6 6" />
+      `
+      : scene === "heat"
+        ? `
+          <ellipse cx="340" cy="122" rx="84" ry="46" fill="rgba(255,122,68,0.26)" />
+          <ellipse cx="344" cy="122" rx="58" ry="30" fill="rgba(255,193,82,0.28)" />
+          <path d="M320 146 C330 126, 334 114, 332 96 C344 112, 350 126, 348 148" fill="none" stroke="#ffd36a" stroke-width="4" stroke-linecap="round" />
+          <path d="M358 142 C366 126, 372 114, 370 100 C382 112, 388 126, 384 144" fill="none" stroke="#ff8a5b" stroke-width="4" stroke-linecap="round" />
+        `
+        : `
+          <path d="M206 88 L234 130 L226 166 L268 210 L254 248 L294 282" stroke="#d8ecff" stroke-width="4" fill="none" stroke-linecap="round" />
+          <path d="M248 152 L280 136 L306 164" stroke="#d8ecff" stroke-width="3" fill="none" stroke-linecap="round" />
+          <path d="M266 212 L302 196 L328 220" stroke="#d8ecff" stroke-width="3" fill="none" stroke-linecap="round" />
+          <ellipse cx="258" cy="178" rx="86" ry="118" fill="rgba(132,196,255,0.08)" stroke="${accent}" stroke-width="2" stroke-dasharray="5 7" />
+        `;
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360">
+      <defs>
+        <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+          <stop offset="0%" stop-color="#041523" />
+          <stop offset="55%" stop-color="#0a2740" />
+          <stop offset="100%" stop-color="#06111d" />
+        </linearGradient>
+        <linearGradient id="tunnel" x1="0" x2="1" y1="0.4" y2="0.6">
+          <stop offset="0%" stop-color="#132b3f" />
+          <stop offset="50%" stop-color="#0a2135" />
+          <stop offset="100%" stop-color="#132b3f" />
+        </linearGradient>
+      </defs>
+      <rect width="640" height="360" fill="url(#bg)" />
+      <rect x="0" y="0" width="640" height="58" fill="rgba(7,18,30,0.52)" />
+      <rect x="0" y="302" width="640" height="58" fill="rgba(3,10,18,0.66)" />
+      <path d="M0 82 C98 58, 196 52, 320 56 C448 60, 548 58, 640 78 L640 0 L0 0 Z" fill="rgba(17,38,56,0.88)" />
+      <path d="M0 314 C112 286, 228 278, 320 282 C456 286, 554 280, 640 256 L640 360 L0 360 Z" fill="rgba(14,24,36,0.96)" />
+      <path d="M44 250 C148 226, 254 214, 352 214 C452 214, 548 204, 606 188" stroke="url(#tunnel)" stroke-width="92" fill="none" stroke-linecap="round" opacity="0.92" />
+      <path d="M54 248 C158 226, 254 214, 352 214 C452 214, 540 204, 596 190" stroke="rgba(113,227,255,0.12)" stroke-width="1.6" fill="none" stroke-dasharray="4 10" />
+      <g opacity="0.78">
+        <circle cx="96" cy="104" r="3" fill="#8ae5ff" />
+        <circle cx="134" cy="118" r="2.2" fill="#8ae5ff" />
+        <circle cx="182" cy="94" r="2.6" fill="#8ae5ff" />
+        <circle cx="444" cy="96" r="2.8" fill="#8ae5ff" />
+        <circle cx="522" cy="116" r="2.4" fill="#8ae5ff" />
+        <circle cx="564" cy="102" r="2.8" fill="#8ae5ff" />
+      </g>
+      <g opacity="0.54">
+        <circle cx="86" cy="286" r="2.2" fill="#74d9ff" />
+        <circle cx="154" cy="300" r="2.8" fill="#74d9ff" />
+        <circle cx="452" cy="292" r="2.2" fill="#74d9ff" />
+        <circle cx="548" cy="284" r="2.6" fill="#74d9ff" />
+      </g>
+      ${sceneMarkup}
+      <rect x="20" y="20" width="600" height="320" rx="16" fill="none" stroke="rgba(110,224,255,0.12)" stroke-width="2" />
+    </svg>
+  `;
+
+  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
+}
+
+export const recentAlertPhotoSources = {
+  "线缆破损": createAlertPhoto("cable", "#ff8f79"),
+  "局部高温": createAlertPhoto("heat", "#ffc86c"),
+  "墙体裂缝": createAlertPhoto("crack", "#89d8ff"),
+} as const;
+
+const fallbackAlertPhoto = recentAlertPhotoSources["墙体裂缝"];
+
+export function getRecentAlertPhoto(type: string) {
+  return recentAlertPhotoSources[type as keyof typeof recentAlertPhotoSources] ?? fallbackAlertPhoto;
+}