鼠标显示分数

package.json

@@ -14,6 +14,7 @@
     "axios": "^0.21.1",
     "axios-progress-bar": "^1.2.0",
     "axios-retry": "^3.1.9",
+    "custom-cursor.js": "^1.3.6",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.1",
     "tailwindcss": "^2.1.1",

src/components/mark/MarkBody.vue

@@ -23,17 +23,32 @@
       </div>
     </div>
   </div>
+  <div class="cursor">
+    <div class="cursor-border">
+      <span class="text">{{ store.currentScore }}</span>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, watch, watchEffect } from "vue";
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  watch,
+  watchEffect,
+} from "vue";
 import { findCurrentTaskMarkResult, store } from "./store";
 import filters from "@/filters";
 import MarkDrawTrack from "./MarkDrawTrack.vue";
-import { Track } from "@/types";
+import { ModeEnum, Track } from "@/types";
 import { useTimers } from "@/setups/useTimers";
 import { loadImage } from "@/utils/utils";
 import { groupBy, sortBy } from "lodash";
+// @ts-ignore
+import CustomCursor from "custom-cursor.js";
 
 interface SliceImage {
   url: string;
@@ -400,6 +415,24 @@ export default defineComponent({
       { deep: true }
     );
 
+    let theCursor = null as any;
+    onMounted(() => {
+      if (store.setting.mode === ModeEnum.TRACK) {
+        theCursor = new CustomCursor(".cursor", {
+          focusElements: [
+            {
+              selector: ".mark-body-container",
+              focusClass: "cursor--focused-view",
+            },
+          ],
+        }).initialize();
+      }
+    });
+
+    onUnmounted(() => {
+      theCursor && theCursor.destroy();
+    });
+
     return {
       store,
       sliceImagesWithTrackList,
@@ -430,4 +463,60 @@ export default defineComponent({
 .image-seperator {
   border: 2px solid rgba(120, 120, 120, 0.1);
 }
+
+.cursor {
+  color: #ff5050;
+  display: none;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  top: 0;
+  left: 0;
+  position: fixed;
+  will-change: transform;
+  z-index: 1000;
+}
+
+.cursor-border {
+  position: absolute;
+  box-sizing: border-box;
+  align-items: center;
+  border: 1px solid #ff5050;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  height: 0px;
+  width: 0px;
+  left: 0;
+  top: 0;
+  transform: translate(-50%, -50%);
+  transition: all 360ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.cursor.cursor--initialized {
+  display: block;
+}
+
+.cursor .text {
+  font-size: 2rem;
+  opacity: 0;
+  transition: opacity 80ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.cursor.cursor--off-screen {
+  opacity: 0;
+}
+
+.cursor.cursor--focused .cursor-border,
+.cursor.cursor--focused-view .cursor-border {
+  width: 90px;
+  height: 90px;
+}
+
+.cursor.cursor--focused-view .text {
+  opacity: 1;
+  transition: opacity 360ms cubic-bezier(0.23, 1, 0.32, 1);
+}
 </style>

yarn.lock

@@ -531,6 +531,11 @@ csstype@^2.6.8:
   resolved "https://registry.npm.taobao.org/csstype/download/csstype-2.6.16.tgz?cache=0&sync_timestamp=1614159662633&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcsstype%2Fdownload%2Fcsstype-2.6.16.tgz#544d69f547013b85a40d15bff75db38f34fe9c39"
   integrity sha1-VE1p9UcBO4WkDRW/912zjzT+nDk=
 
+custom-cursor.js@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.nlark.com/custom-cursor.js/download/custom-cursor.js-1.3.6.tgz#95c05fbbecac134e12c65a488cc8f952300014d6"
+  integrity sha1-lcBfu+ysE04SxlpIjMj5UjAAFNY=
+
 defined@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/defined/download/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"