功能：ROI绑定算法时校验RTSP地址有效性

截图加载失败时阻止算法绑定并提示"RTSP拉流地址无效"，
通过Canvas截图加载状态逐层传递到算法绑定组件实现校验。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

@@ -25,11 +25,13 @@ import AlgorithmParamEditor from './AlgorithmParamEditor.vue';
 interface Props {
   roiId: string;
   bindings: AiotDeviceApi.RoiAlgoBinding[];
+  snapOk: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   roiId: '',
   bindings: () => [],
+  snapOk: false,
 });
 
 const emit = defineEmits<{
@@ -70,6 +72,10 @@ async function handleBind() {
     message.warning('请选择算法');
     return;
   }
+  if (!props.snapOk) {
+    message.error('RTSP 拉流地址无效，请先在摄像头管理中修正拉流地址');
+    return;
+  }
   try {
     await bindAlgo({
       roiId: props.roiId,

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

@@ -21,6 +21,7 @@ const emit = defineEmits<{
   'roi-drawn': [data: { roi_type: string; coordinates: string }];
   'roi-selected': [roiId: string | null];
   'roi-deleted': [roiId: string];
+  'snap-status': [ok: boolean];
 }>();
 
 const wrapper = ref<HTMLDivElement>();
@@ -77,12 +78,14 @@ onUnmounted(() => {
 
 function onImageLoad() {
   loading.value = false;
+  emit('snap-status', true);
   nextTick(() => initCanvas());
 }
 
 function onImageError() {
   loading.value = false;
-  errorMsg.value = '截图加载失败，请确认摄像头正在拉流';
+  errorMsg.value = '截图加载失败，请确认摄像头拉流地址是否有效';
+  emit('snap-status', false);
   // 关键：截图失败也初始化 canvas，使 ROI 区域可见可操作
   nextTick(() => initCanvas());
 }

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

@@ -64,6 +64,7 @@ const roiList = ref<AiotDeviceApi.Roi[]>([]);
 const selectedRoiId = ref<null | string>(null);
 const selectedRoiBindings = ref<AiotDeviceApi.RoiAlgoBinding[]>([]);
 const snapUrl = ref('');
+const snapOk = ref(false);
 
 const edgeDevices = ref<Array<{ deviceId: string }>>([]);
 
@@ -157,6 +158,10 @@ async function refreshSnap() {
   await buildSnapUrl(true);
 }
 
+function onSnapStatus(ok: boolean) {
+  snapOk.value = ok;
+}
+
 // ==================== ROI 数据加载 ====================
 
 async function loadRois() {
@@ -352,6 +357,7 @@ function handlePush() {
             @roi-drawn="onRoiDrawn"
             @roi-selected="onRoiSelected"
             @roi-deleted="onRoiDeleted"
+            @snap-status="onSnapStatus"
           />
         </div>
 
@@ -471,6 +477,7 @@ function handlePush() {
             <RoiAlgorithmBind
               :roi-id="selectedRoi.roiId || ''"
               :bindings="selectedRoiBindings"
+              :snap-ok="snapOk"
               @changed="loadRoiDetail"
             />
           </div>