细节完善

src/components/Avatar.vue

@@ -69,6 +69,7 @@ const borderColors = {
       :style="{
         width: size + 'px',
         height: size + 'px',
+        minHeight: size + 'px',
         borderColor: borderColors[borderColor],
       }"
       class="avatar-image"

src/components/MeleeResult.vue

@@ -56,7 +56,7 @@ watch(
         >
         <text>{{ player.totalRings }}环</text>
         <text v-for="(arrow, index2) in player.arrowHistory" :key="index2">
-          {{ arrow.ringScore }}环
+          {{ arrow.ring }}环
         </text>
       </view>
     </view>

src/components/PlayerScore.vue

@@ -59,6 +59,7 @@ const rowCount = new Array(6).fill(0);
 .container > image:first-child {
   width: 30px;
   height: 30px;
+  min-height: 30px;
   border: 1px solid #fff3;
   border-radius: 50%;
   margin-right: 10px;

src/components/UserHeader.vue

@@ -1,16 +1,18 @@
 <script setup>
-import { computed } from "vue";
+import { ref, onMounted, computed } from "vue";
 import Avatar from "@/components/Avatar.vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { user } = storeToRefs(store);
+const { user, config } = storeToRefs(store);
 const props = defineProps({
   showRank: {
     type: Boolean,
     default: false,
   },
 });
+const lvlName = ref("");
+const nextLvlPoints = ref("");
 const containerWidth = computed(() => (props.showRank ? "72vw" : "100vw"));
 const toUserPage = () => {
   // 获取当前页面路径
@@ -24,16 +26,25 @@ const toUserPage = () => {
     });
   }
 };
+onMounted(() => {
+  const rankInfos = config.value.randInfos || [];
+  rankInfos.some((r, index) => {
+    lvlName.value = rankInfos[index].name;
+    if (r.upgrade_scores > user.value.scores) {
+      nextLvlPoints.value = r.upgrade_scores;
+      if (rankInfos[index - 1]) {
+        lvlName.value = rankInfos[index - 1].name;
+      }
+      return true;
+    }
+    return false;
+  });
+});
 </script>
 
 <template>
   <view class="container" :style="{ width: containerWidth }">
-    <Avatar
-      :frame="true"
-      :src="user.avatar"
-      :onClick="toUserPage"
-      :size="42"
-    />
+    <Avatar :frame="true" :src="user.avatar" :onClick="toUserPage" :size="42" />
     <view class="user-details">
       <view class="user-name">
         <text>{{ user.nickName }}</text>
@@ -44,11 +55,13 @@ const toUserPage = () => {
         />
       </view>
       <view class="user-stats">
-        <text class="level-tag level-tag-first">钻石1级</text>
-        <text class="level-tag level-tag-second">{{ user.lvl }}</text>
+        <text class="level-tag level-tag-first">{{ lvlName }}</text>
+        <text class="level-tag level-tag-second">L{{ user.lvl }}</text>
         <view class="rank-tag">
           <view class="rank-tag-progress" :style="{ width: '40%' }" />
-          <text class="rank-tag-text">{{ user.lvl }}/{{ user.lvlPoints }}</text>
+          <text class="rank-tag-text"
+            >{{ user.scores }}/{{ user.nextLvlPoints }}</text
+          >
         </view>
       </view>
     </view>