update:优化性能问题

src/components/TrainingScorePanel.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from "vue";
 
+const MAX_VISIBLE_SCORE_CARDS = 60;
+
 const props = defineProps({
   arrows: {
     type: Array,
@@ -32,8 +34,16 @@ const isFailed = (arrow = {}) => {
   return arrow.ok !== true;
 };
 
+const hiddenScoreCount = computed(() =>
+  props.recordMode
+    ? 0
+    : Math.max(props.arrows.length - MAX_VISIBLE_SCORE_CARDS, 0)
+);
+
 const displayArrows = computed(() => {
-  const list = [...props.arrows];
+  const list = props.recordMode
+    ? [...props.arrows]
+    : props.arrows.slice(-MAX_VISIBLE_SCORE_CARDS);
   // total 是达标箭数，不是实际射箭上限；训练中始终预留下一箭空框。
   if (!props.recordMode) list.push(null);
   return list;
@@ -42,6 +52,10 @@ const displayArrows = computed(() => {
 
 <template>
   <view v-if="displayArrows.length" class="score-panel">
+    <text v-if="hiddenScoreCount" class="score-window-tip">
+      已省略前 {{ hiddenScoreCount }} 支，仅显示最近
+      {{ MAX_VISIBLE_SCORE_CARDS }} 支
+    </text>
     <view class="score-grid">
       <view
         v-for="(arrow, index) in displayArrows"
@@ -90,6 +104,14 @@ const displayArrows = computed(() => {
   flex-wrap: wrap;
 }
 
+.score-window-tip {
+  display: block;
+  margin-bottom: 18rpx;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 22rpx;
+  line-height: 1.4;
+}
+
 .score-card {
   position: relative;
   width: 100rpx;