修改图片 兼容移动端

public/version.json

@@ -1 +1 @@
-{"version":1715424448195}
+{"version":1715586949926}

src/components/Metronome/Metronome.vue

@@ -20,7 +20,12 @@
         />
       </div>
       <div class="beatWrap">
-        <div class="dot" ref="dotDom" @mousedown="handleDotMousedown"></div>
+        <div
+          class="dot"
+          ref="dotDom"
+          @mousedown="handleDotMousedown"
+          @touchstart="handleDotTouchstart"
+        ></div>
         <div class="round"></div>
         <canvas
           ref="mycanvasDom"
@@ -310,12 +315,10 @@ function speedToScalc(speed: number) {
 function scalcToSpeed(scalc: number) {
   return Math.round((scalc * 150) / 100 + 50);
 }
-const handleclickCanvas = (e: MouseEvent) => {
+const handleclickCanvas = (clickX: number, clickY: number) => {
   const circle = mycanvasDom.value!.getBoundingClientRect();
   const centerX = circle.left + circle.width / 2;
   const centerY = circle.top + circle.height / 2;
-  const clickX = e.clientX;
-  const clickY = e.clientY;
   const angle = Math.atan2(clickY - centerY, clickX - centerX);
   const percentage = (angle * (180 / Math.PI) + 180) / 360;
   const scalc = Math.round(percentage * 100) - 25;
@@ -323,14 +326,26 @@ const handleclickCanvas = (e: MouseEvent) => {
 };
 function handleDotMousedown() {
   function onMouseup() {
-    mycanvasDom.value!.removeEventListener('mousemove', onMousemove);
+    document.removeEventListener('mousemove', onMousemove);
     document.removeEventListener('mouseup', onMouseup);
   }
-  mycanvasDom.value!.addEventListener('mousemove', onMousemove);
+  document.addEventListener('mousemove', onMousemove);
   document.addEventListener('mouseup', onMouseup);
 }
+function handleDotTouchstart() {
+  function onTouchend() {
+    document.removeEventListener('touchmove', onTouchmove);
+    document.removeEventListener('touchend', onTouchend);
+  }
+  document.addEventListener('touchmove', onTouchmove);
+  document.addEventListener('touchend', onTouchend);
+}
 function onMousemove(e: MouseEvent) {
-  handleclickCanvas(e);
+  handleclickCanvas(e.clientX, e.clientY);
+}
+function onTouchmove(e: TouchEvent) {
+  const touche = e.touches[0];
+  handleclickCanvas(touche.clientX, touche.clientY);
 }
 // 根据百分比画圆
 function getCircleBar(steps: number) {
@@ -804,9 +819,9 @@ defineExpose({
   .v-binder-follower-container
   .n-base-select-menu.n-select-menu {
   --n-border-radius: 10Px !important;
-  .n-scrollbar-rail.n-scrollbar-rail--vertical{
+  .n-scrollbar-rail.n-scrollbar-rail--vertical {
     right: 3Px;
-    --n-scrollbar-width:3Px !important;
+    --n-scrollbar-width: 3Px !important;
     opacity: 0.4;
   }
 }