UI优化

src/components/MeleeResult.vue

@@ -7,6 +7,7 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 const scores = ref([]);
+const currentUser = ref({});
 const props = defineProps({
   show: {
     type: Boolean,
@@ -25,12 +26,20 @@ watch(
   () => props.data,
   (value) => {
     const mine = value.players.find((p) => p.playerId === user.value.id);
+    currentUser.value = mine;
     if (mine && mine.arrowHistory) {
       scores.value = mine.arrowHistory;
     }
   },
   { deep: true, immediate: true }
 );
+const onSelect = (userId) => {
+  const user = props.data.players.find((p) => p.playerId === userId);
+  currentUser.value = user;
+  if (user && user.arrowHistory) {
+    scores.value = user.arrowHistory;
+  }
+};
 </script>
 
 <template>
@@ -42,7 +51,11 @@ watch(
       </view>
     </view>
     <view class="rank-rows">
-      <view v-for="(player, index) in data.players" :key="index">
+      <view
+        v-for="(player, index) in data.players"
+        :key="index"
+        @click="() => onSelect(player.playerId)"
+      >
         <image v-if="index === 0" src="../static/champ1.png" mode="widthFix" />
         <image v-if="index === 1" src="../static/champ2.png" mode="widthFix" />
         <image v-if="index === 2" src="../static/champ3.png" mode="widthFix" />
@@ -61,7 +74,11 @@ watch(
       </view>
     </view>
     <view :style="{ width: '95%' }">
-      <BowTarget :scores="scores" :showLatestArrow="false" />
+      <BowTarget
+        :scores="scores"
+        :showLatestArrow="false"
+        :avatar="currentUser.avatar"
+      />
     </view>
     <view class="score-text"
       ><text :style="{ color: '#fed847' }">12</text>支箭，共<text