feat: auto select medals and make badges interactive

frontend_nuxt/components/CommentItem.vue

@@ -11,7 +11,11 @@
       <div class="common-info-content-header">
         <div class="info-content-header-left">
           <span class="user-name">{{ comment.userName }}</span>
-          <span v-if="comment.medal" class="medal-name">{{ getMedalTitle(comment.medal) }}</span>
+          <span
+            v-if="comment.medal"
+            class="medal-name"
+            @click="gotoProfileMedals(comment.userId)"
+          >{{ getMedalTitle(comment.medal) }}</span>
           <span v-if="level >= 2">
             <i class="fas fa-reply reply-icon"></i>
             <span class="user-name reply-user-name">{{ comment.parentUserName }}</span>
@@ -115,6 +119,10 @@ const CommentItem = {
       showEditor.value = !showEditor.value
     }
 
+    const gotoProfileMedals = (id) => {
+      router.push(`/users/${id}?tab=achievements`)
+    }
+
     // 合并所有子回复为一个扁平数组
     const flattenReplies = (list) => {
       let result = []
@@ -234,7 +242,7 @@ const CommentItem = {
         lightboxVisible.value = true
       }
     }
-    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply, commentMenuItems, deleteComment, lightboxVisible, lightboxIndex, lightboxImgs, handleContentClick, loggedIn, replyCount, replyList, getMedalTitle }
+    return { showReplies, toggleReplies, showEditor, toggleEditor, gotoProfileMedals, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply, commentMenuItems, deleteComment, lightboxVisible, lightboxIndex, lightboxImgs, handleContentClick, loggedIn, replyCount, replyList, getMedalTitle }
   }
 }
 
@@ -289,6 +297,7 @@ export default CommentItem
   font-size: 12px;
   margin-left: 4px;
   opacity: 0.6;
+  cursor: pointer;
 }
 
 @keyframes highlight {