feat: achievement select to show

frontend_nuxt/components/AchievementList.vue

@@ -3,13 +3,14 @@
     <div
       v-for="medal in sortedMedals"
       :key="medal.type"
-      class="achievements-list-item"
+      class="achievements-list-item select"
     >
       <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 class="achievements-list-item-title">{{ medal.title }}</div>
       <div class="achievements-list-item-description">
         {{ medal.description }}
@@ -54,6 +55,7 @@ const sortedMedals = computed(() => {
 }
 
 .achievements-list-item {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -64,6 +66,10 @@ const sortedMedals = computed(() => {
   border-radius: 10px;
 }
 
+.achievements-list-item.select {
+  border: 2px solid var(--primary-color);
+}
+
 .achievements-list-item-icon {
   width: 200px;
   height: 200px;
@@ -82,5 +88,36 @@ const sortedMedals = computed(() => {
 .not_completed {
   filter: grayscale(100%);
 }
+
+.achievements-list-item-top-right-label {
+  font-size: 10px;
+  color: white;
+  background-color: var(--primary-color);
+  padding: 2px 4px;
+  border-radius: 2px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+@media (max-width: 768px) {
+  .achievements-list-item-icon {
+    width: 100px;
+    height: 100px;
+  }
+
+  .achievements-list-item-title {
+    font-size: 14px;
+  }
+
+  .achievements-list-item-description {
+    font-size: 12px;
+  }
+
+  .achievements-list-item {
+    min-width: calc(50% - 30px);
+  }
+}
+
 </style>
 

frontend_nuxt/components/MedalPopup.vue

@@ -9,8 +9,8 @@
         </div>
       </div>
       <div class="medal-popup-actions">
-        <div class="medal-popup-button" @click="gotoMedals">去看看</div>
         <div class="medal-popup-close" @click="close">知道了</div>
+        <div class="medal-popup-button" @click="gotoMedals">去看看</div>
       </div>
     </div>
   </BasePopup>
@@ -75,8 +75,8 @@ export default {
 }
 
 .medal-popup-item-icon {
-  width: 60px;
-  height: 60px;
+  width: 100px;
+  height: 100px;
   object-fit: contain;
 }
 

frontend_nuxt/pages/users/[id].vue

@@ -66,7 +66,7 @@
         <div :class="['profile-tabs-item', { selected: selectedTab === 'achievements' }]"
           @click="selectedTab = 'achievements'">
           <i class="fas fa-medal"></i>
-          <div class="profile-tabs-item-label">勋章与成就</div>
+          <div class="profile-tabs-item-label">勋章</div>
         </div>
       </div>
 
@@ -466,7 +466,15 @@ export default {
     const init = async () => {
       try {
         await fetchUser()
-        await loadSummary()
+        if (selectedTab.value === 'summary') {
+          await loadSummary()
+        } else if (selectedTab.value === 'timeline') {
+          await loadTimeline()
+        } else if (selectedTab.value === 'following') {
+          await loadFollow()
+        } else if (selectedTab.value === 'achievements') {
+          await loadAchievements()
+        }
       } catch (e) {
         console.error(e)
       } finally {
@@ -477,7 +485,7 @@ export default {
     onMounted(init)
 
     watch(selectedTab, async val => {
-      router.replace({ query: { ...route.query, tab: val } })
+      // router.replace({ query: { ...route.query, tab: val } })
       if (val === 'timeline' && timelineItems.value.length === 0) {
         await loadTimeline()
       } else if (val === 'following' && followers.value.length === 0 && followings.value.length === 0) {