重构：ROI选区界面改造 — 全图+自定义选区+可收起面板

RoiCanvas.vue:
- 移除矩形绘制模式，保留多边形+鼠标跟随线+闭合预览
- 键盘事件：Esc取消、Ctrl+Z撤销上一顶点
- 支持 fullscreen 类型渲染和点击检测
- 绘制中底部浮动提示条

index.vue:
- 工具栏：默认[全图][自定义选区]，绘制中[完成][撤销][取消]
- 全图按钮一键创建覆盖整张图的ROI
- 初始Canvas全宽，点击ROI后右侧面板滑出(60%/40%)
- 面板关闭按钮+删除最后ROI时自动收起
- ROI标签显示全图/自定义/矩形

apps/web-antd/src/views/aiot/device/roi/index.vue

@@ -2,7 +2,7 @@
 /**
  * ROI 区域配置页面
  *
- * 功能：摄像头截图展示、ROI 区域绘制（矩形/多边形）、ROI 属性编辑、
+ * 功能：摄像头截图展示、ROI 区域绘制（全图/自定义多边形）、ROI 属性编辑、
  *       算法绑定管理、配置推送到边缘端
  * 后端：WVP 视频平台 AiRoi / AiConfig API
  */
@@ -65,6 +65,8 @@ const selectedRoiId = ref<null | string>(null);
 const selectedRoiBindings = ref<AiotDeviceApi.RoiAlgoBinding[]>([]);
 const snapUrl = ref('');
 const snapOk = ref(false);
+const panelVisible = ref(false);
+const roiCanvasRef = ref<InstanceType<typeof RoiCanvas> | null>(null);
 
 const edgeDevices = ref<Array<{ deviceId: string }>>([]);
 
@@ -82,6 +84,12 @@ const selectedRoi = computed(() => {
   return roiList.value.find((r) => r.roiId === selectedRoiId.value) || null;
 });
 
+const isDrawing = computed(() => drawMode.value === 'polygon');
+
+const polygonPointCount = computed(() => {
+  return roiCanvasRef.value?.polygonPoints?.length ?? 0;
+});
+
 // ==================== 初始化 ====================
 
 onMounted(async () => {
@@ -89,7 +97,6 @@ onMounted(async () => {
   const q = route.query;
   if (q.cameraCode) {
     cameraCode.value = String(q.cameraCode);
-    // 加载摄像头信息以获取应用名
     await loadCurrentCamera();
     await buildSnapUrl();
     loadRois();
@@ -121,7 +128,7 @@ async function loadCameraOptions() {
     const list = res.list || [];
     cameraOptions.value = list.map((cam: AiotDeviceApi.Camera) => ({
       value: cam.cameraCode || '',
-      label: `${cam.app || cam.stream}${cam.srcUrl ? ` (${cam.srcUrl})` : ''}`,
+      label: `${cam.cameraName || cam.app || cam.stream}${cam.srcUrl ? ` (${cam.srcUrl})` : ''}`,
       camera: cam,
     }));
   } catch {
@@ -146,6 +153,20 @@ function goBack() {
   router.push('/aiot/device/camera');
 }
 
+// ==================== ROI 类型标签 ====================
+
+function getRoiTagColor(roi: AiotDeviceApi.Roi) {
+  if (roi.roiType === 'fullscreen') return 'orange';
+  if (roi.roiType === 'rectangle') return 'blue';
+  return 'green';
+}
+
+function getRoiTagLabel(roi: AiotDeviceApi.Roi) {
+  if (roi.roiType === 'fullscreen') return '全图';
+  if (roi.roiType === 'rectangle') return '矩形';
+  return '自定义';
+}
+
 // ==================== 截图 ====================
 
 async function buildSnapUrl(force = false) {
@@ -188,42 +209,98 @@ async function loadRoiDetail() {
   }
 }
 
-// ==================== ROI 绘制 ====================
+// ==================== 全图 ====================
+
+function addFullscreen() {
+  const hasFullscreen = roiList.value.some((r) => r.roiType === 'fullscreen');
+  if (hasFullscreen) {
+    message.warning('已存在全图选区');
+    return;
+  }
+  Modal.confirm({
+    title: '新建全图选区',
+    content: '将创建覆盖整张图片的选区',
+    async onOk() {
+      const newRoi: Partial<AiotDeviceApi.Roi> = {
+        cameraId: cameraCode.value,
+        name: `全图-${roiList.value.length + 1}`,
+        roiType: 'fullscreen',
+        coordinates: JSON.stringify({ x: 0, y: 0, w: 1, h: 1 }),
+        color: '#FF0000',
+        priority: 0,
+        enabled: 1,
+        description: '',
+        deviceId: edgeDevices.value[0]?.deviceId || 'edge',
+      };
+      try {
+        await saveRoi(newRoi);
+        message.success('全图选区已创建');
+        loadRois();
+      } catch {
+        message.error('保存失败');
+      }
+    },
+  });
+}
+
+// ==================== 自定义选区（多边形绘制） ====================
 
 function startDraw(mode: string) {
   drawMode.value = mode;
 }
 
+function finishDraw() {
+  roiCanvasRef.value?.finishPolygon();
+}
+
+function undoPoint() {
+  if (roiCanvasRef.value && roiCanvasRef.value.polygonPoints.length > 0) {
+    roiCanvasRef.value.polygonPoints.pop();
+    roiCanvasRef.value.redraw();
+    if (roiCanvasRef.value.polygonPoints.length > 0) {
+      roiCanvasRef.value.drawPolygonInProgress();
+    }
+  }
+}
+
+function cancelDraw() {
+  drawMode.value = null;
+}
+
+function onDrawCancelled() {
+  drawMode.value = null;
+}
+
 async function onRoiDrawn(data: { coordinates: string; roi_type: string }) {
   drawMode.value = null;
+  const roiName = `ROI-${roiList.value.length + 1}`;
   const newRoi: Partial<AiotDeviceApi.Roi> = {
     cameraId: cameraCode.value,
-    name: `ROI-${roiList.value.length + 1}`,
+    name: roiName,
     roiType: data.roi_type,
     coordinates: data.coordinates,
     color: '#FF0000',
     priority: 0,
     enabled: 1,
     description: '',
-    deviceId: edgeDevices.value[0]?.deviceId || 'edge', // 默认关联边缘设备
+    deviceId: edgeDevices.value[0]?.deviceId || 'edge',
   };
   try {
     await saveRoi(newRoi);
-    message.success('ROI已保存');
+    message.success('选区已保存');
     loadRois();
   } catch {
     message.error('保存失败');
   }
 }
 
-// ==================== ROI 选择 ====================
+// ==================== ROI 选择与面板 ====================
 
 function onRoiSelected(roiId: null | string) {
   selectedRoiId.value = roiId;
   if (roiId) {
+    panelVisible.value = true;
     loadRoiDetail();
-  } else {
-    selectedRoiBindings.value = [];
   }
 }
 
@@ -232,6 +309,12 @@ function selectRoi(roi: AiotDeviceApi.Roi) {
   loadRoiDetail();
 }
 
+function closePanel() {
+  panelVisible.value = false;
+  selectedRoiId.value = null;
+  selectedRoiBindings.value = [];
+}
+
 // ==================== ROI 编辑 ====================
 
 async function updateRoiData(roi: AiotDeviceApi.Roi) {
@@ -246,7 +329,13 @@ async function updateRoiData(roi: AiotDeviceApi.Roi) {
 // ==================== ROI 删除 ====================
 
 function onRoiDeleted(roiId: string) {
-  doDeleteRoi(roiId);
+  Modal.confirm({
+    title: '提示',
+    content: '确定删除该ROI？关联的算法绑定也将删除。',
+    async onOk() {
+      doDeleteRoi(roiId);
+    },
+  });
 }
 
 function handleDeleteRoi(roi: AiotDeviceApi.Roi) {
@@ -267,7 +356,10 @@ async function doDeleteRoi(roiId: string) {
       selectedRoiId.value = null;
       selectedRoiBindings.value = [];
     }
-    loadRois();
+    await loadRois();
+    if (roiList.value.length === 0) {
+      panelVisible.value = false;
+    }
   } catch {
     message.error('删除失败');
   }
@@ -316,40 +408,43 @@ function handlePush() {
       <div class="page-header">
         <div class="header-left">
           <Button size="small" @click="goBack">返回</Button>
-          <h3>{{ currentCamera?.app || cameraCode }} - ROI配置</h3>
+          <h3>{{ currentCamera?.cameraName || currentCamera?.app || cameraCode }} - ROI配置</h3>
         </div>
         <div class="header-right">
-          <Button
-            size="small"
-            type="primary"
-            :disabled="drawMode === 'rectangle'"
-            @click="startDraw('rectangle')"
-          >
-            画矩形
-          </Button>
-          <Button
-            size="small"
-            type="primary"
-            :disabled="drawMode === 'polygon'"
-            @click="startDraw('polygon')"
-          >
-            画多边形
-          </Button>
-          <Button size="small" :disabled="!drawMode" @click="drawMode = null">
-            取消绘制
-          </Button>
-          <Button size="small" @click="refreshSnap">刷新截图</Button>
-          <Button size="small" type="default" @click="handlePush">
-            推送到边缘端
-          </Button>
+          <!-- 默认工具栏 -->
+          <template v-if="!isDrawing">
+            <Button size="small" type="primary" @click="addFullscreen">
+              全图
+            </Button>
+            <Button size="small" type="primary" @click="startDraw('polygon')">
+              自定义选区
+            </Button>
+            <Button size="small" @click="refreshSnap">刷新截图</Button>
+            <Button size="small" type="default" @click="handlePush">
+              推送到边缘端
+            </Button>
+          </template>
+          <!-- 绘制中工具栏 -->
+          <template v-else>
+            <Button size="small" type="primary" :disabled="polygonPointCount < 3" @click="finishDraw">
+              完成选区
+            </Button>
+            <Button size="small" :disabled="polygonPointCount === 0" @click="undoPoint">
+              撤销上一点
+            </Button>
+            <Button size="small" danger @click="cancelDraw">
+              取消绘制
+            </Button>
+          </template>
         </div>
       </div>
 
       <!-- 主内容区：左侧画布 + 右侧面板 -->
       <div class="main-content">
         <!-- 画布区域 -->
-        <div class="canvas-panel">
+        <div :class="['canvas-panel', { 'panel-open': panelVisible }]">
           <RoiCanvas
+            ref="roiCanvasRef"
             :rois="roiList"
             :draw-mode="drawMode"
             :selected-roi-id="selectedRoiId"
@@ -357,134 +452,137 @@ function handlePush() {
             @roi-drawn="onRoiDrawn"
             @roi-selected="onRoiSelected"
             @roi-deleted="onRoiDeleted"
+            @draw-cancelled="onDrawCancelled"
             @snap-status="onSnapStatus"
           />
         </div>
 
         <!-- 右侧面板 -->
-        <div class="side-panel">
-          <!-- ROI 列表 -->
-          <div class="section-header">
-            <span>ROI列表 ({{ roiList.length }})</span>
-          </div>
-          <div v-if="roiList.length === 0" class="empty-tip">
-            暂无ROI，请在左侧画面上绘制
-          </div>
-          <div
-            v-for="roi in roiList"
-            :key="roi.roiId"
-            :class="['roi-item', { active: selectedRoiId === roi.roiId }]"
-            @click="selectRoi(roi)"
-          >
-            <div class="roi-item-header">
-              <span
-                class="roi-color"
-                :style="{ background: roi.color || '#FF0000' }"
-              />
-              <span class="roi-name">{{ roi.name || '未命名' }}</span>
-              <Tag
-                :color="roi.roiType === 'rectangle' ? 'blue' : 'green'"
-                style="margin-right: 0"
-              >
-                {{ roi.roiType === 'rectangle' ? '矩形' : '多边形' }}
-              </Tag>
-              <Switch
-                :checked="roi.enabled === 1"
-                size="small"
-                style="margin-left: auto"
-                @change="
-                  (val: string | number | boolean) => {
-                    roi.enabled = val ? 1 : 0;
-                    updateRoiData(roi);
-                  }
-                "
-                @click.stop
-              />
-              <Button
-                size="small"
-                type="text"
-                danger
-                style="margin-left: 4px"
-                @click.stop="handleDeleteRoi(roi)"
-              >
-                删除
+        <transition name="slide-panel">
+          <div v-if="panelVisible" class="side-panel">
+            <div class="panel-close">
+              <Button size="small" shape="circle" @click="closePanel">
+                ✕
               </Button>
             </div>
-          </div>
 
-          <Divider />
-
-          <!-- ROI 属性编辑 -->
-          <div v-if="selectedRoi" class="roi-detail-section">
-            <h4>ROI属性</h4>
-            <Form
-              layout="horizontal"
-              :label-col="{ span: 6 }"
-              :wrapper-col="{ span: 18 }"
-              size="small"
+            <!-- ROI 列表 -->
+            <div class="section-header">
+              <span>ROI列表 ({{ roiList.length }})</span>
+            </div>
+            <div v-if="roiList.length === 0" class="empty-tip">
+              暂无ROI，请使用上方按钮添加
+            </div>
+            <div
+              v-for="roi in roiList"
+              :key="roi.roiId"
+              :class="['roi-item', { active: selectedRoiId === roi.roiId }]"
+              @click="selectRoi(roi)"
             >
-              <Form.Item label="名称">
-                <Input
-                  v-model:value="selectedRoi.name"
-                  @blur="updateRoiData(selectedRoi!)"
+              <div class="roi-item-header">
+                <span
+                  class="roi-color"
+                  :style="{ background: roi.color || '#FF0000' }"
                 />
-              </Form.Item>
-              <Form.Item label="边缘设备">
-                <Select
-                  v-model:value="selectedRoi.deviceId"
-                  placeholder="选择边缘设备"
-                  @change="updateRoiData(selectedRoi!)"
+                <span class="roi-name">{{ roi.name || '未命名' }}</span>
+                <Tag
+                  :color="getRoiTagColor(roi)"
+                  style="margin-right: 0"
                 >
-                  <Select.Option v-for="dev in edgeDevices" :key="dev.deviceId" :value="dev.deviceId">
-                    {{ dev.deviceId }}
-                  </Select.Option>
-                </Select>
-                <div style="margin-top: 4px; font-size: 12px; color: #999">
-                  关联的边缘推理节点
-                </div>
-              </Form.Item>
-              <Form.Item label="颜色">
-                <Input
-                  v-model:value="selectedRoi.color"
-                  type="color"
-                  style="width: 60px; padding: 2px"
-                  @change="updateRoiData(selectedRoi!)"
+                  {{ getRoiTagLabel(roi) }}
+                </Tag>
+                <Switch
+                  :checked="roi.enabled === 1"
+                  size="small"
+                  style="margin-left: auto"
+                  @change="
+                    (val: string | number | boolean) => {
+                      roi.enabled = val ? 1 : 0;
+                      updateRoiData(roi);
+                    }
+                  "
+                  @click.stop
                 />
-              </Form.Item>
-              <Form.Item label="优先级">
-                <InputNumber
-                  v-model:value="selectedRoi.priority"
-                  :min="0"
-                  :max="100"
-                  @change="updateRoiData(selectedRoi!)"
-                />
-                <div style="margin-top: 4px; font-size: 12px; color: #999">
-                  数值越大优先级越高（0-100），多个ROI重叠时优先处理高优先级区域
-                </div>
-              </Form.Item>
-              <Form.Item label="描述">
-                <Input.TextArea
-                  v-model:value="selectedRoi.description"
-                  :rows="2"
-                  @blur="updateRoiData(selectedRoi!)"
-                />
-              </Form.Item>
-            </Form>
+                <Button
+                  size="small"
+                  type="text"
+                  danger
+                  style="margin-left: 4px"
+                  @click.stop="handleDeleteRoi(roi)"
+                >
+                  删除
+                </Button>
+              </div>
+            </div>
 
             <Divider />
 
-            <!-- 算法绑定管理 -->
-            <RoiAlgorithmBind
-              :roi-id="selectedRoi.roiId || ''"
-              :bindings="selectedRoiBindings"
-              :snap-ok="snapOk"
-              @changed="loadRoiDetail"
-            />
+            <!-- ROI 属性编辑 -->
+            <div v-if="selectedRoi" class="roi-detail-section">
+              <h4>ROI属性</h4>
+              <Form
+                layout="horizontal"
+                :label-col="{ span: 6 }"
+                :wrapper-col="{ span: 18 }"
+                size="small"
+              >
+                <Form.Item label="名称">
+                  <Input
+                    v-model:value="selectedRoi.name"
+                    @blur="updateRoiData(selectedRoi!)"
+                  />
+                </Form.Item>
+                <Form.Item label="边缘设备">
+                  <Select
+                    v-model:value="selectedRoi.deviceId"
+                    placeholder="选择边缘设备"
+                    @change="updateRoiData(selectedRoi!)"
+                  >
+                    <Select.Option v-for="dev in edgeDevices" :key="dev.deviceId" :value="dev.deviceId">
+                      {{ dev.deviceId }}
+                    </Select.Option>
+                  </Select>
+                </Form.Item>
+                <Form.Item label="颜色">
+                  <Input
+                    v-model:value="selectedRoi.color"
+                    type="color"
+                    style="width: 60px; padding: 2px"
+                    @change="updateRoiData(selectedRoi!)"
+                  />
+                </Form.Item>
+                <Form.Item label="优先级">
+                  <InputNumber
+                    v-model:value="selectedRoi.priority"
+                    :min="0"
+                    :max="100"
+                    @change="updateRoiData(selectedRoi!)"
+                  />
+                </Form.Item>
+                <Form.Item label="描述">
+                  <Input.TextArea
+                    v-model:value="selectedRoi.description"
+                    :rows="2"
+                    @blur="updateRoiData(selectedRoi!)"
+                  />
+                </Form.Item>
+              </Form>
+
+              <Divider />
+
+              <!-- 算法绑定管理 -->
+              <RoiAlgorithmBind
+                :roi-id="selectedRoi.roiId || ''"
+                :bindings="selectedRoiBindings"
+                :snap-ok="snapOk"
+                @changed="loadRoiDetail"
+              />
+            </div>
+            <div v-else class="empty-tip" style="margin-top: 20px">
+              点击左侧ROI区域或列表项查看详情
+            </div>
           </div>
-          <div v-else class="empty-tip" style="margin-top: 20px">
-            点击左侧ROI区域或列表项查看详情
-          </div>
-        </div>
+        </transition>
       </div>
     </div>
   </Page>
@@ -513,6 +611,7 @@ function handlePush() {
 
 .header-left h3 {
   margin: 0;
+  font-size: 15px;
 }
 
 .header-right {
@@ -523,15 +622,21 @@ function handlePush() {
 .main-content {
   display: flex;
   flex: 1;
-  gap: 12px;
+  gap: 0;
   overflow: hidden;
+  position: relative;
 }
 
 .canvas-panel {
-  flex: 6;
+  flex: 1;
   background: #000;
   border-radius: 4px;
   overflow: hidden;
+  transition: flex 0.3s ease;
+}
+
+.canvas-panel.panel-open {
+  flex: 6;
 }
 
 .side-panel {
@@ -539,8 +644,28 @@ function handlePush() {
   overflow-y: auto;
   background: #fff;
   border: 1px solid #f0f0f0;
-  border-radius: 4px;
+  border-radius: 0 4px 4px 0;
   padding: 12px;
+  margin-left: 1px;
+}
+
+.panel-close {
+  text-align: right;
+  margin-bottom: 8px;
+}
+
+/* 面板滑入动画 */
+.slide-panel-enter-active,
+.slide-panel-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-panel-enter-from,
+.slide-panel-leave-to {
+  flex: 0 !important;
+  padding: 0 !important;
+  overflow: hidden;
+  opacity: 0;
 }
 
 .section-header {