feat(tunnel): 添加图片热区功能

- 在 App.vue 中添加新的视口配置
- 在 router/index.js 中添加新的路由路径- 修改 tunnel/index.vue，为图片添加热区
- 新增 test

src/views/tunnel/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="main">
 
-    <div class="img-box">
+    <div class="img-box" id="imghot">
       <!--        @/assets/images/tunnel/img.png-->
       <!--        <img :src="'data:image/png;base64,'+siteImage" style="width:3500px;height:1789px" id="imgModel" usemap="#image"-->
       <!--             alt="" @click="clickHandler">-->

src/views/tunnel/polygon-demo.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="polygon-demo">
+    <h2>多边形选择演示</h2>
+
+    <div class="img-box">
+      <div style="display: flex;justify-content: center;align-items: center;">
+        <PolygonSelector
+          :width="1222"
+          :height="789"
+          background-img="/images/img.png"
+          @selection-complete="handleSelectionComplete"
+          @points-change="handlePointsChange"
+        >
+          <template #controls>
+            <el-button @click="exportPoints" type="success">导出坐标</el-button>
+          </template>
+        </PolygonSelector>
+      </div>
+    </div>
+
+    <div class="points-info" v-if="points.length > 0">
+      <h3>当前选区坐标:</h3>
+      <el-table :data="points" style="width: 100%">
+        <el-table-column prop="x" label="X坐标" width="180"></el-table-column>
+        <el-table-column prop="y" label="Y坐标" width="180"></el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import PolygonSelector from '@/components/content/tunnelScene/PolygonSelector.vue'
+
+export default {
+  name: 'PolygonDemo',
+  components: {
+    PolygonSelector
+  },
+  setup() {
+    const points = ref([])
+
+    const handleSelectionComplete = (selectionPoints) => {
+      console.log('选区完成:', selectionPoints)
+    }
+
+    const handlePointsChange = (currentPoints) => {
+      points.value = currentPoints
+    }
+
+    const exportPoints = () => {
+      if (points.value.length === 0) {
+        ElMessage.warning('当前没有选区')
+        return
+      }
+
+      const dataStr = JSON.stringify(points.value, null, 2)
+      const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr)
+
+      const exportFileDefaultName = 'polygon-points.json'
+
+      const linkElement = document.createElement('a')
+      linkElement.setAttribute('href', dataUri)
+      linkElement.setAttribute('download', exportFileDefaultName)
+      linkElement.click()
+
+      ElMessage.success('坐标已导出')
+    }
+
+    return {
+      points,
+      handleSelectionComplete,
+      handlePointsChange,
+      exportPoints
+    }
+  }
+}
+</script>
+
+<style scoped>
+.polygon-demo {
+  padding: 20px;
+}
+
+.img-box {
+  position: relative;
+  margin: 20px 0;
+  width: 100%;
+  height: 100%;
+}
+
+.points-info {
+  margin-top: 20px;
+}
+</style>