feat: wire achievements to backend

backend/src/main/java/com/openisle/service/MedalService.java

@@ -30,7 +30,7 @@ public class MedalService {
         List<MedalDto> medals = new ArrayList<>();
 
         CommentMedalDto commentMedal = new CommentMedalDto();
-        commentMedal.setIcon("comment.png");
+        commentMedal.setIcon("https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/icons/achi_comment.png");
         commentMedal.setTitle("评论达人");
         commentMedal.setDescription("评论超过100条");
         commentMedal.setType(MedalType.COMMENT);
@@ -46,9 +46,9 @@ public class MedalService {
         medals.add(commentMedal);
 
         PostMedalDto postMedal = new PostMedalDto();
-        postMedal.setIcon("post.png");
+        postMedal.setIcon("https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/icons/achi_post.png");
         postMedal.setTitle("发帖达人");
-        postMedal.setDescription("评论超过100条");
+        postMedal.setDescription("发帖超过100条");
         postMedal.setType(MedalType.POST);
         postMedal.setTargetPostCount(POST_TARGET);
         if (userId != null) {
@@ -62,7 +62,7 @@ public class MedalService {
         medals.add(postMedal);
 
         SeedUserMedalDto seedUserMedal = new SeedUserMedalDto();
-        seedUserMedal.setIcon("seed.png");
+        seedUserMedal.setIcon("https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/icons/achi_seed.png");
         seedUserMedal.setTitle("种子用户");
         seedUserMedal.setDescription("2025.9.16前注册的用户");
         seedUserMedal.setType(MedalType.SEED);

frontend_nuxt/components/AchievementList.vue

@@ -1,31 +1,58 @@
 <template>
   <div class="achievements-list">
-    <div class="achievements-list-item">
+    <div
-      <img src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/icons/achi_comment.png" alt="comment"
+      v-for="medal in medals"
-        class="achievements-list-item-icon">
+      :key="medal.type"
-      <div class="achievements-list-item-title">评论达人</div>
+      class="achievements-list-item"
-      <div class="achievements-list-item-description">评论达到300条 718/300</div>
+    >
+      <img
+        :src="medal.icon"
+        :alt="medal.title"
+        :class="['achievements-list-item-icon', { not_completed: !medal.completed }]"
+      />
+      <div class="achievements-list-item-title">{{ medal.title }}</div>
+      <div class="achievements-list-item-description">
+        {{ medal.description }}
+        <template v-if="medal.type === 'COMMENT'">
+          {{ medal.currentCommentCount }}/{{ medal.targetCommentCount }}
+        </template>
+        <template v-else-if="medal.type === 'POST'">
+          {{ medal.currentPostCount }}/{{ medal.targetPostCount }}
+        </template>
       </div>
-
-    <div class="achievements-list-item">
-      <img src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/icons/achi_comment.png" alt="comment"
-        class="achievements-list-item-icon not_completed">
-      <div class="achievements-list-item-title">评论达人</div>
-      <div class="achievements-list-item-description">评论达到300条 718/300</div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from 'vue'
+import { API_BASE_URL } from '../main'
 
-export default {
+const props = defineProps({
-  data() {
+  userId: {
-    return {
+    type: Number,
-      value: 7,
+    required: true
-      max: 10,
+  }
+})
+
+const medals = ref([])
+
+const fetchMedals = async () => {
+  const res = await fetch(`${API_BASE_URL}/api/medals?userId=${props.userId}`)
+  if (res.ok) {
+    medals.value = await res.json()
+  }
+}
+
+watch(
+  () => props.userId,
+  id => {
+    if (id) {
+      fetchMedals()
     }
   },
-}
+  { immediate: true }
+)
 </script>
 
 <style scoped>
@@ -66,5 +93,5 @@ export default {
 .not_completed {
   filter: grayscale(100%);
 }
-
 </style>
+

frontend_nuxt/pages/users/[id].vue

@@ -244,7 +244,7 @@
         </div>
 
         <div v-else-if="selectedTab === 'achievements'" class="achievements-container">
-          <AchievementList />
+          <AchievementList :user-id="user.id" />
         </div>
       </template>
     </div>