添加X环显示，比赛过程完善

src/components/ScorePanel2.vue

@@ -1,6 +1,6 @@
 <script setup>
 const props = defineProps({
-  scores: {
+  arrows: {
     type: Array,
     default: () => [],
   },
@@ -10,37 +10,34 @@ const getSum = (a, b, c) => {
   return sum > 0 ? sum + "环" : "-";
 };
 const roundsName = ["第一轮", "第二轮", "第三轮", "第四轮"];
+const getShowText = (arrow = {}) => {
+  return arrow.ring ? (arrow.ringX ? "X" : arrow.ring + "环") : "-";
+};
 </script>
 <template>
   <view class="container">
     <view>
       <text :style="{ transform: 'translateX(-10%)' }">总成绩</text>
-      <text>{{ scores.reduce((last, next) => last + next, 0) }}环</text>
+      <text>{{ arrows.reduce((last, next) => last + next.ring, 0) }}环</text>
     </view>
     <view
       v-for="(_, index) in new Array(
         Math.min(
-          Math.ceil(scores.length / 3) + (scores.length % 3 === 0 ? 1 : 0),
+          Math.ceil(arrows.length / 3) + (arrows.length % 3 === 0 ? 1 : 0),
           4
         )
       ).fill(1)"
       :key="index"
     >
       <text>{{ roundsName[index] }}</text>
-      <text>{{
-        scores[index * 3 + 0] ? scores[index * 3 + 0] + "环" : "-"
-      }}</text>
-      <text>{{
-        scores[index * 3 + 1] ? scores[index * 3 + 1] + "环" : "-"
-      }}</text>
-      <text>{{
-        scores[index * 3 + 2] ? scores[index * 3 + 2] + "环" : "-"
-      }}</text>
+      <text>{{ getShowText(arrows[index * 3 + 0]) }}</text>
+      <text>{{ getShowText(arrows[index * 3 + 1]) }}</text>
+      <text>{{ getShowText(arrows[index * 3 + 2]) }}</text>
       <text :style="{ width: '40%', transform: 'translateX(20%)' }">{{
         getSum(
-          scores[index * 3 + 0],
-          scores[index * 3 + 1],
-          scores[index * 3 + 2]
+          arrows[index * 3 + 0],
+          arrows[index * 3 + 1],
+          arrows[index * 3 + 2]
         )
       }}</text>
     </view>