feat: add sn field helpmessage

+<script lang="ts" setup>
+  import { BasicHelp } from '/@/components/Basic';
+  import { createImgPreview } from '/@/components/Preview/index';
+  import snStep1 from '/@/assets/images/sn-step1.png';
+  import snStep2 from '/@/assets/images/sn-step2.png';
+  import snStep3 from '/@/assets/images/sn-step3.png';
+  const imgList: string[] = [snStep1, snStep2, snStep3];
+  function handlePreview() {
+    createImgPreview({ imageList: imgList });
+  }
+</script>
+
+<template>
+  <div>监控点编号</div>
+  <BasicHelp
+    placement="top"
+    @click="handlePreview"
+    class="mx-1"
+    text='点击查看如何获取"监控点编号"'
+  />
+</template>

@@ -5,7 +5,8 @@ import type { FormSchema as QFormSchema } from '/@/components/Form/index';
 
 import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
 import { getStreamingMediaList } from '/@/api/camera/cameraManager';
-
+import { h } from 'vue';
+import SnHelpMessage from './SnHelpMessage.vue';
 export enum AccessMode {
   ManuallyEnter = 0,
   Streaming = 1,
@@ -157,10 +158,9 @@ export const streamingMediaAcquire: FormSchema[] = [
   },
   {
     field: 'sn',
-    label: '监控点编号',
+    label: h(SnHelpMessage) as any,
     component: 'Input',
     rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
-
     componentProps: {
       placeholder: '请输入监控点编号',
     },