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;