任务复核显示分数轨迹动画

src/features/mark/MarkDrawTrack.vue

@@ -3,9 +3,13 @@
     <div
       v-if="isTrackMode"
       class="score-container"
+      :class="[focusedTrack(track) && 'score-animation']"
       :style="computeTopAndLeft(track)"
     >
-      <span class="tw-m-auto">
+      <span
+        class="tw-m-auto"
+        :id="'a' + track.mainNumber + track.subNumber + track.offsetY"
+      >
         {{ track.score }}
       </span>
     </div>
@@ -21,7 +25,7 @@
 
 <script lang="ts">
 import { ModeEnum, SpecialTag, Track } from "@/types";
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType, watch } from "vue";
 import { store } from "./store";
 
 export default defineComponent({
@@ -56,7 +60,37 @@ export default defineComponent({
       };
     };
 
-    return { store, isTrackMode, computeTopAndLeft };
+    const focusedTrack = (track: Track) => {
+      return store.focusTracks.includes(track);
+    };
+
+    watch(
+      () => store.focusTracks.length,
+      () => {
+        if (store.focusTracks.length === 0) return;
+        const minImageIndex = Math.min(
+          ...store.focusTracks.map((t) => t.offsetIndex)
+        );
+        const minImageOffsetY = Math.min(
+          ...store.focusTracks
+            .filter((t) => t.offsetIndex === minImageIndex)
+            .map((t) => t.offsetY)
+        );
+        const topTrack = store.focusTracks.find(
+          (t) =>
+            t.offsetIndex === minImageIndex && t.offsetY === minImageOffsetY
+        );
+        if (topTrack) {
+          document
+            .querySelector(
+              `#a${topTrack.mainNumber + topTrack.subNumber + topTrack.offsetY}`
+            )
+            ?.scrollIntoView({ behavior: "smooth" });
+        }
+      }
+    );
+
+    return { store, focusedTrack, isTrackMode, computeTopAndLeft };
   },
 });
 </script>
@@ -77,4 +111,20 @@ export default defineComponent({
   /* to click through div */
   pointer-events: none;
 }
+.score-animation {
+  animation: 2s ease-in-out 0s infinite alternate change_size;
+}
+
+@keyframes change_size {
+  from {
+    font-size: 2em;
+    margin-top: -100px;
+    margin-left: -100px;
+  }
+  to {
+    font-size: 4em;
+    margin-top: -80px;
+    margin-left: -80px;
+  }
+}
 </style>