feat: add user medal selection and display

frontend_nuxt/pages/posts/[id]/index.vue

@@ -41,14 +41,20 @@
             <img class="user-avatar-item-img" :src="author.avatar" alt="avatar">
           </div>
           <div v-if="isMobile" class="info-content-header">
-            <div class="user-name">{{ author.username }}</div>
+            <div class="user-name">
+              {{ author.username }}
+              <span v-if="author.displayMedal" class="user-medal">{{ getMedalTitle(author.displayMedal) }}</span>
+            </div>
             <div class="post-time">{{ postTime }}</div>
           </div>
         </div>
 
         <div class="info-content">
           <div v-if="!isMobile" class="info-content-header">
-            <div class="user-name">{{ author.username }}</div>
+            <div class="user-name">
+              {{ author.username }}
+              <span v-if="author.displayMedal" class="user-medal">{{ getMedalTitle(author.displayMedal) }}</span>
+            </div>
             <div class="post-time">{{ postTime }}</div>
           </div>
           <div class="info-content-text" v-html="renderMarkdown(postContent)" @click="handleContentClick"></div>
@@ -116,6 +122,7 @@ import ArticleCategory from '../../../components/ArticleCategory.vue'
 import ReactionsGroup from '../../../components/ReactionsGroup.vue'
 import DropdownMenu from '../../../components/DropdownMenu.vue'
 import { renderMarkdown, handleMarkdownClick, stripMarkdownLength } from '../../../utils/markdown'
+import { getMedalTitle } from '../../../utils/medal'
 import { API_BASE_URL, toast } from '../../../main'
 import { getToken, authState } from '../../../utils/auth'
 import TimeManager from '../../../utils/time'
@@ -228,6 +235,7 @@ export default {
     const mapComment = (c, parentUserName = '', level = 0) => ({
       id: c.id,
       userName: c.author.username,
+      medal: c.author.displayMedal,
       time: TimeManager.format(c.createdAt),
       avatar: c.author.avatar,
       text: c.content,
@@ -648,6 +656,8 @@ export default {
       commentSort,
       fetchCommentSorts,
       isFetchingComments
+      ,
+      getMedalTitle
     }
   }
 }
@@ -926,6 +936,12 @@ export default {
   opacity: 0.7;
 }
 
+.user-medal {
+  font-size: 12px;
+  margin-left: 4px;
+  opacity: 0.6;
+}
+
 .post-time {
   font-size: 14px;
   opacity: 0.5;
@@ -990,6 +1006,10 @@ export default {
     font-size: 14px;
   }
 
+  .user-medal {
+    font-size: 12px;
+  }
+
   .post-time {
     font-size: 12px;
   }