feat: add user medal selection and display

frontend_nuxt/components/AchievementList.vue

@@ -3,14 +3,15 @@
     <div
       v-for="medal in sortedMedals"
       :key="medal.type"
-      class="achievements-list-item select"
+      :class="['achievements-list-item', { select: medal.selected, clickable: canSelect }]"
+      @click="selectMedal(medal)"
     >
       <img
         :src="medal.icon"
         :alt="medal.title"
         :class="['achievements-list-item-icon', { not_completed: !medal.completed }]"
       />
-      <div class="achievements-list-item-top-right-label">展示</div>
+      <div v-if="medal.selected" class="achievements-list-item-top-right-label">展示</div>
       <div class="achievements-list-item-title">{{ medal.title }}</div>
       <div class="achievements-list-item-description">
         {{ medal.description }}
@@ -27,12 +28,18 @@
 
 <script setup>
 import { computed } from 'vue'
+import { API_BASE_URL, toast } from '../main'
+import { getToken } from '../utils/auth'
 
 const props = defineProps({
   medals: {
     type: Array,
     required: true,
     default: () => []
+  },
+  canSelect: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -43,6 +50,32 @@ const sortedMedals = computed(() => {
   })
 })
 
+const selectMedal = async (medal) => {
+  if (!props.canSelect || medal.selected) return
+  if (!medal.completed) {
+    toast('该勋章尚未完成')
+    return
+  }
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/medals/select`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${getToken()}`
+      },
+      body: JSON.stringify({ type: medal.type })
+    })
+    if (res.ok) {
+      props.medals.forEach(m => { m.selected = m.type === medal.type })
+      toast('展示勋章已更新')
+    } else {
+      toast('选择勋章失败')
+    }
+  } catch (e) {
+    toast('选择勋章失败')
+  }
+}
+
 </script>
 
 <style scoped>
@@ -66,6 +99,10 @@ const sortedMedals = computed(() => {
   border-radius: 10px;
 }
 
+.achievements-list-item.clickable {
+  cursor: pointer;
+}
+
 .achievements-list-item.select {
   border: 2px solid var(--primary-color);
 }

frontend_nuxt/components/CommentItem.vue

@@ -11,6 +11,7 @@
       <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="level >= 2">
             <i class="fas fa-reply reply-icon"></i>
             <span class="user-name reply-user-name">{{ comment.parentUserName }}</span>
@@ -64,6 +65,7 @@ import VueEasyLightbox from 'vue-easy-lightbox'
 import { useRouter } from 'vue-router'
 import CommentEditor from './CommentEditor.vue'
 import { renderMarkdown, handleMarkdownClick } from '../utils/markdown'
+import { getMedalTitle } from '../utils/medal'
 import TimeManager from '../utils/time'
 import BaseTimeline from './BaseTimeline.vue'
 import { API_BASE_URL, toast } from '../main'
@@ -232,7 +234,7 @@ const CommentItem = {
         lightboxVisible.value = true
       }
     }
-    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply, commentMenuItems, deleteComment, lightboxVisible, lightboxIndex, lightboxImgs, handleContentClick, loggedIn, replyCount, replyList }
+    return { showReplies, toggleReplies, showEditor, toggleEditor, submitReply, copyCommentLink, renderMarkdown, isWaitingForReply, commentMenuItems, deleteComment, lightboxVisible, lightboxIndex, lightboxImgs, handleContentClick, loggedIn, replyCount, replyList, getMedalTitle }
   }
 }
 
@@ -283,6 +285,12 @@ export default CommentItem
   opacity: 0.3;
 }
 
+.medal-name {
+  font-size: 12px;
+  margin-left: 4px;
+  opacity: 0.6;
+}
+
 @keyframes highlight {
   from {
     background-color: yellow;

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;
   }

frontend_nuxt/pages/users/[id].vue

@@ -244,7 +244,7 @@
         </div>
 
         <div v-else-if="selectedTab === 'achievements'" class="achievements-container">
-          <AchievementList :medals="medals" />
+          <AchievementList :medals="medals" :can-select="isMine" />
         </div>
       </template>
     </div>

frontend_nuxt/utils/medal.js

@@ -0,0 +1,9 @@
+export const medalTitles = {
+  COMMENT: '评论达人',
+  POST: '发帖达人',
+  SEED: '种子用户'
+}
+
+export function getMedalTitle(type) {
+  return medalTitles[type] || ''
+}