From 57c0aa5899bb31a17d14bfa1a71d07dc7f7be901 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Sat, 9 Aug 2025 17:08:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E7=9A=84=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=E5=9C=A8=E5=89=8D=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/AchievementList.vue | 14 ++++++++++++--
 frontend_nuxt/pages/users/[id].vue           |  6 ++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend_nuxt/components/AchievementList.vue b/frontend_nuxt/components/AchievementList.vue
index 46f12e706..232d6d48c 100644
--- a/frontend_nuxt/components/AchievementList.vue
+++ b/frontend_nuxt/components/AchievementList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="achievements-list">
     <div
-      v-for="medal in props.medals"
+      v-for="medal in sortedMedals"
       :key="medal.type"
       class="achievements-list-item"
     >
@@ -25,13 +25,23 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from 'vue'
+
+const props = defineProps({
   medals: {
     type: Array,
     required: true,
     default: () => []
   }
 })
+
+const sortedMedals = computed(() => {
+  return [...props.medals].sort((a, b) => {
+    if (a.completed === b.completed) return 0
+    return a.completed ? -1 : 1
+  })
+})
+
 </script>
 
 <style scoped>
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index ed9e1fd5b..2aaa20763 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -472,18 +472,16 @@ export default {
 
     onMounted(init)
 
-    const achievementsLoaded = ref(false)
-
     watch(selectedTab, async val => {
       if (val === 'timeline' && timelineItems.value.length === 0) {
         await loadTimeline()
       } else if (val === 'following' && followers.value.length === 0 && followings.value.length === 0) {
         await loadFollow()
-      } else if (val === 'achievements' && !achievementsLoaded.value) {
+      } else if (val === 'achievements' && medals.value.length === 0) {
         await loadAchievements()
-        achievementsLoaded.value = true
       }
     })
+
     return {
       user,
       hotPosts,