✨ feat: 新增瓦片切图工具

@@ -12,6 +12,10 @@ declare module '@vue/runtime-core' {
     AudioBackground: typeof import('./src/components/audioBackground.vue')['default']
     AudioBackground1: typeof import('./src/components/audioBackground1.vue')['default']
     AudioList: typeof import('./src/components/audioList.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     Floor: typeof import('./src/components/Floor/index.vue')['default']
     InfoPopup: typeof import('./src/components/InfoPopup.vue')['default']
     InfoPopupLite: typeof import('./src/components/InfoPopupLite.vue')['default']

@@ -25,6 +25,8 @@
     "xys_upload": "npm run build_tar && npm run scp-xys && npm run dec-xys && npm run remove_tar"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@element-plus/icons-vue": "^2.3.1",
     "@photo-sphere-viewer/core": "^5.7.3",
     "@photo-sphere-viewer/gallery-plugin": "^5.7.3",
     "@photo-sphere-viewer/gyroscope-plugin": "^5.7.3",
@@ -39,6 +41,7 @@
     "animate.css": "^4.1.1",
     "dayjs": "^1.11.3",
     "default-passive-events": "^2.0.0",
+    "element-plus": "^2.9.3",
     "font-awesome": "^4.7.0",
     "global": "^4.4.0",
     "html-to-json-parser": "^1.1.0",

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-25 17:17:40
+ * @LastEditTime: 2025-01-23 16:10:45
  * @FilePath: /map-demo/src/main.js
  * @Description:
  */
@@ -57,6 +57,8 @@ import 'video.js/dist/video-js.css';
 import 'viewerjs/dist/viewer.css';
 import VueViewer from 'v-viewer';
 
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
 const pinia = createPinia();
 const app = createApp(App);
 
@@ -102,4 +104,8 @@ app
 app.use(VueVideoPlayer)
 app.use(VueViewer);
 
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
 app.mount('#app');

 /*
  * @Date: 2023-05-29 11:10:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-20 17:54:57
+ * @LastEditTime: 2025-01-23 16:22:10
  * @FilePath: /map-demo/src/route.js
  * @Description: 文件描述
  */
@@ -69,4 +69,12 @@ export default [
       title: '详情页',
     },
   },
+  {
+    path: '/map_cutter',
+    name: '瓦片切图工具',
+    component: () => import('@/views/mapCutter.vue'),
+    meta: {
+      title: '瓦片切图工具',
+    },
+  },
 ];

+/*
+ * @Date: 2025-01-22 11:45:30
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-01-23 16:38:00
+ * @FilePath: /map-demo/src/utils/TileCutter.js
+ * @Description: 文件描述
+ */
+const tileSize = 512;
+
+export function TileCutter(imageURL, bounds, zoomLevel) {
+  const img = new Image();
+  img.crossOrigin = "Anonymous"; // 避免跨域问题
+  img.src = imageURL;
+  img.onload = () => {
+    sliceImageToTiles(img, bounds, zoomLevel);
+  };
+}
+
+
+function sliceImageToTiles(image, bounds, zoomLevel) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+
+  const imgWidth = image.width;
+  const imgHeight = image.height;
+
+  const southWest = bounds.getSouthWest();
+  const northEast = bounds.getNorthEast();
+
+  const lonStart = southWest.lng;
+  const latStart = southWest.lat;
+  const lonEnd = northEast.lng;
+  const latEnd = northEast.lat;
+
+  let tileStartX = lonToTileX(lonStart, zoomLevel);
+  let tileEndX = lonToTileX(lonEnd, zoomLevel);
+  let tileStartY = latToTileY(latEnd, zoomLevel); // 取 latEnd 作为起点
+  let tileEndY = latToTileY(latStart, zoomLevel); // 取 latStart 作为终点
+
+  // 确保 tileStartX <= tileEndX，tileStartY <= tileEndY
+  tileStartX = Math.min(tileStartX, tileEndX);
+  tileEndX = Math.max(tileStartX, tileEndX);
+  tileStartY = Math.min(tileStartY, tileEndY);
+  tileEndY = Math.max(tileStartY, tileEndY);
+
+  // console.warn(`瓦片编号: X(${tileStartX} -> ${tileEndX}), Y(${tileStartY} -> ${tileEndY})`);
+
+  const cols = tileEndX - tileStartX + 1;
+  const rows = tileEndY - tileStartY + 1;
+
+  const tileWidth = imgWidth / cols;
+  const tileHeight = imgHeight / rows;
+
+  const scaleFactor = 2; // 调高分辨率倍率
+
+  canvas.width = tileSize * scaleFactor;
+  canvas.height = tileSize * scaleFactor;
+
+  ctx.scale(scaleFactor, scaleFactor);
+
+  for (let x = 0; x < cols; x++) {
+      for (let y = 0; y < rows; y++) {
+          ctx.clearRect(0, 0, tileSize, tileSize);
+
+          ctx.drawImage(
+              image,
+              x * tileWidth, y * tileHeight, tileWidth, tileHeight, // 源图像区域
+              0, 0, tileSize, tileSize // 目标画布区域
+          );
+
+          canvas.toBlob((blob) => {
+              if (!blob) {
+                  console.error("瓦片转换失败！");
+                  return;
+              }
+              const tileX = tileStartX + x;
+              const tileY = tileStartY + y;
+              // console.warn(`保存瓦片: ${tileX}_${tileY}_${zoomLevel}.png`);
+              saveTile(blob, `${tileX}_${tileY}_${zoomLevel}.png`);
+          }, "image/png", 1.0);
+      }
+  }
+}
+// 经纬度转换为瓦片坐标
+function lonToTileX(lon, zoom) {
+  return Math.floor(((lon + 180) / 360) * Math.pow(2, zoom));
+}
+
+function latToTileY(lat, zoom) {
+  return Math.floor(
+    ((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2) * Math.pow(2, zoom)
+  );
+}
+
+function saveTile(blob, filename) {
+  const link = document.createElement("a");
+  link.href = URL.createObjectURL(blob);
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}

+<!--
+ * @Date: 2025-01-22 11:40:12
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-01-23 16:32:53
+ * @FilePath: /map-demo/src/views/mapCutter.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div style="display: flex; padding: 1rem 0 0 1rem; gap: 1rem;  align-items: center;">
+    <div>目标地图经纬度</div>
+    <el-input
+      v-model="map_center"
+      style="width: 240px"
+      placeholder="输入经纬度"
+      @blur="onCenterBlur"
+    />
+  </div>
+  <div style="display: flex; padding: 1rem; gap: 1rem;">
+    <div style="display: flex; align-items: center;">
+      <div>地图层级:&nbsp;</div>
+      <el-select v-model="map_zoom" placeholder="地图层级" style="width: 240px" @change="onZoomChange">
+          <el-option
+            v-for="item in zoom_options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+    </div>
+
+    <div style="display: flex; align-items: center;">
+      <div>上传图片范围:&nbsp;</div>
+      <el-input
+        v-model="map_left_bottom_range"
+        style="width: 240px"
+        placeholder="输入左下角经纬度"
+        @blur="onLBRangeBlur"
+      />
+      &nbsp;
+      <el-input
+        v-model="map_right_top_range"
+        style="width: 240px"
+        placeholder="输入右上角的经纬度"
+        @blur="onRTRangeBlur"
+      />
+    </div>
+    <div v-if="showUpload">
+      <input type="file" @change="handleImageUpload" />
+      <el-button type="primary" @click="cutTiles">切割瓦片</el-button>
+    </div>
+  </div>
+  <div id="map-container"></div>
+  <div>
+
+  </div>
+  <div v-if="showUpload" class="controls">
+    <el-button type="primary" :icon="Top" @click="moveImage('up')">图片上移</el-button>
+    <el-button type="primary" :icon="Bottom" @click="moveImage('down')">图片下移</el-button>
+    <el-button type="primary" :icon="Back" @click="moveImage('left')">图片左移</el-button>
+    <el-button type="primary" :icon="Right" @click="moveImage('right')">图片右移</el-button>
+    <el-button type="primary" :icon="Plus" @click="scaleImage(1.01)">图片放大</el-button>
+    <el-button type="primary" :icon="Minus" @click="scaleImage(0.99)">图片缩小</el-button>
+    <el-button type="primary" @click="rotateMap(10)">地图顺时针旋转</el-button>
+    <el-button type="primary" @click="rotateMap(-10)">地图逆时针旋转</el-button>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from "vue";
+// import AMapLoader from "@amap/amap-jsapi-loader";
+import { TileCutter } from "@/utils/TileCutter";
+import { Top, Bottom, Back, Right, Plus, Minus } from '@element-plus/icons-vue'
+
+const map = ref(null);
+const imageLayer = ref(null);
+const imageURL = ref(""); // 存储上传的图片
+const bounds = ref(null); // 图片覆盖的边界
+const mapRotation = ref(0); // 存储地图旋转角度
+const zooms = ref([17, 18]);
+
+const map_zoom = ref(17)
+
+const zoom_options = [
+  {
+    value: 17,
+    label: 17,
+  },
+  {
+    value: 18,
+    label: 18,
+  },
+]
+
+const map_left_bottom_range = ref(null); // 120.583625,31.311858
+const map_right_top_range = ref(null); // 120.591047,31.318265
+
+const map_center = ref(null);
+
+onMounted(async () => {
+  loadMap();
+});
+
+function loadMap() {
+  // 初始化地图
+  map.value = new AMap.Map('map-container', {
+    zoom: 17,
+    zooms: zooms.value,
+    center: [120.587648, 31.314616],
+    rotation: 0, // 初始地图角度
+    layers: [
+      new AMap.TileLayer.RoadNet(),
+      new AMap.TileLayer.Satellite(),
+    ],
+  });
+
+
+  // Canvas作为切片
+  var layer1 = new AMap.TileLayer.Flexible({
+    tileSize: 256,
+    // cacheSize: 300,
+    zIndex: 200,
+    createTile: function (x, y, z, success, fail) {
+      var c = document.createElement('canvas');
+      c.width = c.height = 256;
+
+      var cxt = c.getContext("2d");
+      cxt.font = "15px Verdana";
+      cxt.fillStyle = "#ff976a";
+      cxt.strokeStyle = "#ff976a";
+      cxt.strokeRect(0, 0, 256, 256);
+      cxt.fillText('(' + [x, y, z].join(',') + ')', 10, 30);
+
+      // 通知API切片创建完成
+      success(c);
+    }
+  });
+
+  layer1.setMap(map.value);
+
+  // 监听 zoomchange 事件
+  map.value.on('zoomchange', () => {
+    const currentZoom = map.value.getZoom();
+    if (currentZoom === 18) {
+      map_zoom.value = 18;
+    } else {
+      map_zoom.value = 17;
+    }
+  });
+}
+
+function handleImageUpload(event) {
+  const file = event.target.files[0];
+  if (!file) return;
+
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    imageURL.value = e.target.result;
+    addImageToMap(imageURL.value);
+  };
+  reader.readAsDataURL(file);
+}
+
+function addImageToMap(url) {
+  if (imageLayer.value) {
+    map.value.remove(imageLayer.value);
+  }
+
+  // TAG： 设置图片范围
+  bounds.value = new AMap.Bounds(map_left_bottom_range.value, map_right_top_range.value); // 设置图片范围 左下角 (西南) -> 右上角 (东北)
+  imageLayer.value = new AMap.ImageLayer({
+    url: url,
+    bounds: bounds.value,
+    zooms: [17, 18],
+    opacity: 0.6 // 透明度 (0 完全透明, 1 完全不透明)
+  });
+
+  map.value.add(imageLayer.value);
+}
+
+
+function cutTiles() {
+  if (!imageURL.value) {
+    alert("请先上传图片");
+    return;
+  }
+  // TAG： 切割瓦片等级
+  TileCutter(imageURL.value, bounds.value, map_zoom.value); // 传入图片、地图范围、缩放级别
+}
+
+// ✅ 1. 位置移动
+const moveImage = (direction) => {
+const offset = 0.0001; // 移动步长（经纬度差值）
+const sw = bounds.value.getSouthWest();
+const ne = bounds.value.getNorthEast();
+
+let newBounds;
+switch (direction) {
+  case "up":
+    newBounds = new AMap.Bounds([sw.lng, sw.lat + offset], [ne.lng, ne.lat + offset]);
+    break;
+  case "down":
+    newBounds = new AMap.Bounds([sw.lng, sw.lat - offset], [ne.lng, ne.lat - offset]);
+    break;
+  case "left":
+    newBounds = new AMap.Bounds([sw.lng - offset, sw.lat], [ne.lng - offset, ne.lat]);
+    break;
+  case "right":
+    newBounds = new AMap.Bounds([sw.lng + offset, sw.lat], [ne.lng + offset, ne.lat]);
+    break;
+}
+
+bounds.value = newBounds;
+imageLayer.value.setBounds(bounds.value);
+};
+
+// ✅ 2. 缩放图片
+const scaleImage = (factor) => {
+const sw = bounds.value.getSouthWest();
+const ne = bounds.value.getNorthEast();
+
+const centerX = (sw.lng + ne.lng) / 2;
+const centerY = (sw.lat + ne.lat) / 2;
+const newWidth = (ne.lng - sw.lng) * factor;
+const newHeight = (ne.lat - sw.lat) * factor;
+
+bounds.value = new AMap.Bounds(
+  [centerX - newWidth / 2, centerY - newHeight / 2],
+  [centerX + newWidth / 2, centerY + newHeight / 2]
+);
+
+imageLayer.value.setBounds(bounds.value);
+};
+
+// 旋转地图
+const rotateMap = (deltaAngle) => {
+  if (!map.value) return;
+
+  mapRotation.value += deltaAngle;
+
+  console.log(`地图旋转: ${mapRotation.value}°`);
+
+  map.value.setRotation(mapRotation.value);
+};
+
+
+const onZoomChange = (value) => { // 调整地图图层
+  map.value.setZoom(value);
+}
+
+const onLBRangeBlur = () => {
+  const str = map_left_bottom_range.value;
+  const formattedArray = str.split(',').map(Number);
+  map_left_bottom_range.value = formattedArray;
+}
+const onRTRangeBlur = () => {
+  const str = map_right_top_range.value;
+  const formattedArray = str.split(',').map(Number);
+  map_right_top_range.value = formattedArray;
+}
+
+const showUpload = computed(() => {
+  return map_left_bottom_range.value && map_right_top_range.value ? true : false;
+});
+
+const onCenterBlur = () => {
+  const str = map_center.value;
+  const formattedArray = str.split(',').map(Number);
+  map.value.setCenter(formattedArray);
+}
+</script>
+
+<style>
+#map-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.controls {
+  position: absolute;
+  top: 8rem;
+  right: 10px;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+</style>

@@ -9,6 +9,7 @@ import { createProxy } from './build/proxy'
 import DefineOptions from 'unplugin-vue-define-options/vite';
 import AutoImport from 'unplugin-auto-import/vite';
 import postcsspxtoviewport from 'postcss-px-to-viewport'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 var path = require('path');
 const fs = require('fs');
@@ -30,7 +31,7 @@ export default ({ command, mode }) => {
       // 将要用到的插件数组。Falsy 虚值的插件将被忽略，插件数组将被扁平化（flatten）。查看 插件 API 获取 Vite 插件的更多细节。
       vue(),
       Components({
-        resolvers: [VantResolver()],
+        resolvers: [VantResolver(), ElementPlusResolver()],
       }),
       // styleImport({
       // resolves: [VantResolve()],
@@ -56,6 +57,7 @@ export default ({ command, mode }) => {
         eslintrc: {
           enabled: true,
         },
+        resolvers: [ElementPlusResolver()],
       }),
     ],
     publicDir: 'public', // 作为静态资源服务的文件夹。这个目录中的文件会在开发中被服务于 /，在开发模式时，会被拷贝到 outDir 的根目录，并没有转换，永远只是复制到这里。该值可以是文件系统的绝对路径，也可以是相对于项目的根目录路径。

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@amap/amap-jsapi-loader@^1.0.1":
+  version "1.0.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz#9ec4b4d5d2467eac451f6c852e35db69e9f9f0c0"
+  integrity sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==
+
 "@antfu/utils@^0.5.2":
   version "0.5.2"
   resolved "https://mirrors.cloud.tencent.com/npm/@antfu/utils/-/utils-0.5.2.tgz"
@@ -55,6 +60,11 @@
   resolved "https://mirrors.cloud.tencent.com/npm/@colors/colors/-/colors-1.5.0.tgz"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
+"@ctrl/tinycolor@^3.4.1":
+  version "3.6.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
+  integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
+
 "@cypress/request@^2.88.10":
   version "2.88.11"
   resolved "https://mirrors.cloud.tencent.com/npm/@cypress/request/-/request-2.88.11.tgz"
@@ -87,6 +97,11 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
+"@element-plus/icons-vue@^2.3.1":
+  version "2.3.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz#1f635ad5fdd5c85ed936481525570e82b5a8307a"
+  integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
+
 "@eslint-community/eslint-utils@^4.3.0":
   version "4.4.0"
   resolved "https://mirrors.cloud.tencent.com/npm/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
@@ -94,6 +109,26 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.9"
+  resolved "https://mirrors.cloud.tencent.com/npm/@floating-ui/core/-/core-1.6.9.tgz#64d1da251433019dafa091de9b2886ff35ec14e6"
+  integrity sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==
+  dependencies:
+    "@floating-ui/utils" "^0.2.9"
+
+"@floating-ui/dom@^1.0.1":
+  version "1.6.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/@floating-ui/dom/-/dom-1.6.13.tgz#a8a938532aea27a95121ec16e667a7cbe8c59e34"
+  integrity sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.9"
+
+"@floating-ui/utils@^0.2.9":
+  version "0.2.9"
+  resolved "https://mirrors.cloud.tencent.com/npm/@floating-ui/utils/-/utils-0.2.9.tgz#50dea3616bc8191fb8e112283b49eaff03e78429"
+  integrity sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==
+
 "@jridgewell/sourcemap-codec@^1.4.13":
   version "1.4.15"
   resolved "https://mirrors.cloud.tencent.com/npm/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
@@ -152,6 +187,11 @@
   resolved "https://mirrors.cloud.tencent.com/npm/@photo-sphere-viewer/virtual-tour-plugin/-/virtual-tour-plugin-5.7.3.tgz#3359446d1ff429c7c7673329b80a62ff13ae0591"
   integrity sha512-TMlRT5edoLk54YtyPY1U3q7h2OfCFEvQna8zoSilhBO21ENivOtnCm055YS6JvaAuTmD91kN4lfBZlhk0+fzPg==
 
+"@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7":
+  version "2.11.7"
+  resolved "https://mirrors.cloud.tencent.com/npm/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz#a7f69e3665d3da9b115f9e71671dae1b97e13671"
+  integrity sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==
+
 "@rollup/pluginutils@^4.1.2", "@rollup/pluginutils@^4.2.1":
   version "4.2.1"
   resolved "https://mirrors.cloud.tencent.com/npm/@rollup/pluginutils/-/pluginutils-4.2.1.tgz"
@@ -181,6 +221,18 @@
   dependencies:
     "@types/sizzle" "*"
 
+"@types/lodash-es@^4.17.6":
+  version "4.17.12"
+  resolved "https://mirrors.cloud.tencent.com/npm/@types/lodash-es/-/lodash-es-4.17.12.tgz#65f6d1e5f80539aa7cfbfc962de5def0cf4f341b"
+  integrity sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.17.14"
+  resolved "https://mirrors.cloud.tencent.com/npm/@types/lodash/-/lodash-4.17.14.tgz#bafc053533f4cdc5fcc9635af46a963c1f3deaff"
+  integrity sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A==
+
 "@types/lodash@^4.14.182":
   version "4.14.182"
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz"
@@ -213,6 +265,11 @@
   resolved "https://mirrors.cloud.tencent.com/npm/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz"
   integrity sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==
 
+"@types/web-bluetooth@^0.0.16":
+  version "0.0.16"
+  resolved "https://mirrors.cloud.tencent.com/npm/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
+  integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
+
 "@types/yauzl@^2.9.1":
   version "2.10.0"
   resolved "https://mirrors.cloud.tencent.com/npm/@types/yauzl/-/yauzl-2.10.0.tgz"
@@ -451,11 +508,26 @@
     "@vueuse/shared" "8.9.4"
     vue-demi "*"
 
+"@vueuse/core@^9.1.0":
+  version "9.13.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vueuse/core/-/core-9.13.0.tgz#2f69e66d1905c1e4eebc249a01759cf88ea00cf4"
+  integrity sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.16"
+    "@vueuse/metadata" "9.13.0"
+    "@vueuse/shared" "9.13.0"
+    vue-demi "*"
+
 "@vueuse/metadata@8.9.4":
   version "8.9.4"
   resolved "https://mirrors.cloud.tencent.com/npm/@vueuse/metadata/-/metadata-8.9.4.tgz"
   integrity sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==
 
+"@vueuse/metadata@9.13.0":
+  version "9.13.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vueuse/metadata/-/metadata-9.13.0.tgz#bc25a6cdad1b1a93c36ce30191124da6520539ff"
+  integrity sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==
+
 "@vueuse/shared@8.9.4":
   version "8.9.4"
   resolved "https://mirrors.cloud.tencent.com/npm/@vueuse/shared/-/shared-8.9.4.tgz"
@@ -463,6 +535,13 @@
   dependencies:
     vue-demi "*"
 
+"@vueuse/shared@9.13.0":
+  version "9.13.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vueuse/shared/-/shared-9.13.0.tgz#089ff4cc4e2e7a4015e57a8f32e4b39d096353b9"
+  integrity sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==
+  dependencies:
+    vue-demi "*"
+
 "@xmldom/xmldom@^0.8.3":
   version "0.8.7"
   resolved "https://mirrors.cloud.tencent.com/npm/@xmldom/xmldom/-/xmldom-0.8.7.tgz"
@@ -603,6 +682,11 @@ astral-regex@^2.0.0:
   resolved "https://mirrors.cloud.tencent.com/npm/astral-regex/-/astral-regex-2.0.0.tgz"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
+async-validator@^4.2.5:
+  version "4.2.5"
+  resolved "https://mirrors.cloud.tencent.com/npm/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
+  integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
+
 async@^3.2.0:
   version "3.2.4"
   resolved "https://mirrors.cloud.tencent.com/npm/async/-/async-3.2.4.tgz"
@@ -1052,6 +1136,11 @@ dayjs@^1.10.4, dayjs@^1.11.3:
   resolved "https://mirrors.cloud.tencent.com/npm/dayjs/-/dayjs-1.11.7.tgz"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
+dayjs@^1.11.13:
+  version "1.11.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
 debug@4.3.4, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://mirrors.cloud.tencent.com/npm/debug/-/debug-4.3.4.tgz"
@@ -1134,6 +1223,27 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+element-plus@^2.9.3:
+  version "2.9.3"
+  resolved "https://mirrors.cloud.tencent.com/npm/element-plus/-/element-plus-2.9.3.tgz#9d44f9aa5a810009490ecb814052aed560d77bb0"
+  integrity sha512-6tSLp5XytDS4TMZ0P3aGZnr7MXTagfNycepNfIDitd9IgwM9y01+Ssu6mglNi8RiXYhek6LBWNOd/cvpIO12+w==
+  dependencies:
+    "@ctrl/tinycolor" "^3.4.1"
+    "@element-plus/icons-vue" "^2.3.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.7"
+    "@types/lodash" "^4.14.182"
+    "@types/lodash-es" "^4.17.6"
+    "@vueuse/core" "^9.1.0"
+    async-validator "^4.2.5"
+    dayjs "^1.11.13"
+    escape-html "^1.0.3"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    lodash-unified "^1.0.2"
+    memoize-one "^6.0.0"
+    normalize-wheel-es "^1.2.0"
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/emoji-regex/-/emoji-regex-8.0.0.tgz"
@@ -1296,6 +1406,11 @@ escalade@^3.1.1:
   resolved "https://mirrors.cloud.tencent.com/npm/escalade/-/escalade-3.1.1.tgz"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
+escape-html@^1.0.3:
+  version "1.0.3"
+  resolved "https://mirrors.cloud.tencent.com/npm/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
 escape-string-regexp@4.0.0:
   version "4.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
@@ -1993,6 +2108,16 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://mirrors.cloud.tencent.com/npm/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
+lodash-unified@^1.0.2:
+  version "1.0.3"
+  resolved "https://mirrors.cloud.tencent.com/npm/lodash-unified/-/lodash-unified-1.0.3.tgz#80b1eac10ed2eb02ed189f08614a29c27d07c894"
+  integrity sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==
+
 lodash.once@^4.1.1:
   version "4.1.1"
   resolved "https://mirrors.cloud.tencent.com/npm/lodash.once/-/lodash.once-4.1.1.tgz"
@@ -2080,6 +2205,11 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/merge-stream/-/merge-stream-2.0.0.tgz"
@@ -2301,6 +2431,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://mirrors.cloud.tencent.com/npm/normalize-path/-/normalize-path-3.0.0.tgz"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-wheel-es@^1.2.0:
+  version "1.2.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz#0fa2593d619f7245a541652619105ab076acf09e"
+  integrity sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==
+
 npm-run-path@^4.0.0:
   version "4.0.1"
   resolved "https://mirrors.cloud.tencent.com/npm/npm-run-path/-/npm-run-path-4.0.1.tgz"