From 15d823aa20aae8164e6af498bb4f7a574c60047f Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 5 Aug 2026 10:27:42 -0600
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=B8=AA=E4=BA=BA=E4=B8=BB?=
 =?UTF-8?q?=E9=A1=B5=E7=A7=BB=E9=99=A4=E5=BE=BD=E7=AB=A0=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

徽章已在成就页的"题单奖章" tab 展示，主页重复且与旁边的成就摘要
风格不一致。连带删掉无引用的 GroupedUserBadge 组件。

成就图标那排补上"最近获得"标签，避免被误读成成就总数。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/oj/user/index.vue                      | 84 ++--------------------
 src/shared/components/GroupedUserBadge.vue | 76 --------------------
 2 files changed, 6 insertions(+), 154 deletions(-)
 delete mode 100644 src/shared/components/GroupedUserBadge.vue

diff --git a/src/oj/user/index.vue b/src/oj/user/index.vue
index 9ae0cf9..21df0b8 100644
--- a/src/oj/user/index.vue
+++ b/src/oj/user/index.vue
@@ -4,15 +4,10 @@ import { NH2, NH3 } from "naive-ui"
 import { getProfile } from "shared/api"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import { durationToDays, parseTime } from "utils/functions"
-import type {
-  AchievementSummary,
-  Profile,
-  UserBadge as UserBadgeType,
-} from "utils/types"
+import type { AchievementSummary, Profile } from "utils/types"
 import { getAchievementSummary } from "oj/achievement/api"
-import { getMetrics, getUserBadges } from "../api"
+import { getMetrics } from "../api"
 import AchievementIcon from "shared/components/AchievementIcon.vue"
-import GroupedUserBadge from "shared/components/GroupedUserBadge.vue"
 import { useUserStore } from "shared/store/user"
 
 const route = useRoute()
@@ -24,7 +19,6 @@ const firstSubmissionAt = ref("")
 const latestSubmissionAt = ref("")
 const toLatestAt = ref("")
 const learnDuration = ref("")
-const userBadges = ref<GroupedBadge[]>([])
 const achievementSummary = ref<AchievementSummary | null>(null)
 const [loading, toggle] = useToggle()
 const [show, toggleShow] = useToggle(false)
@@ -65,40 +59,6 @@ const hasMoreProblems = computed(
   () => problems.value.length > itemsPerRow.value * 3,
 )
 
-// 分组徽章接口
-interface GroupedBadge {
-  icon: string
-  count: number
-  badges: UserBadgeType[]
-  latestEarnedTime: Date
-}
-
-// 按图标分组徽章
-function groupBadgesByIcon(badges: UserBadgeType[]): GroupedBadge[] {
-  const grouped = new Map<string, UserBadgeType[]>()
-
-  // 按图标分组
-  badges.forEach((badge) => {
-    const icon = badge.badge.icon
-    if (!grouped.has(icon)) {
-      grouped.set(icon, [])
-    }
-    grouped.get(icon)!.push(badge)
-  })
-
-  // 转换为数组并排序
-  return Array.from(grouped.entries())
-    .map(([icon, badgeList]) => ({
-      icon,
-      count: badgeList.length,
-      badges: badgeList,
-      latestEarnedTime: new Date(
-        Math.max(...badgeList.map((b) => new Date(b.earned_time).getTime())),
-      ),
-    }))
-    .sort((a, b) => a.icon.localeCompare(b.icon))
-}
-
 async function init() {
   toggle(true)
   try {
@@ -113,23 +73,9 @@ async function init() {
     })
     ac.sort()
     problems.value = ac
-    const promises: Promise<{ data: any }>[] = []
 
     if (profile.value.submission_number > 0) {
-      promises.push(getMetrics(profile.value.user.id))
-    }
-
-    if (route.query.name) {
-      promises.push(getUserBadges(route.query.name as string))
-    } else {
-      promises.push(getUserBadges())
-    }
-
-    const results = await Promise.all(promises)
-
-    // 处理 metrics 结果
-    if (profile.value.submission_number > 0) {
-      const metricsRes = results[0]
+      const metricsRes = await getMetrics(profile.value.user.id)
       firstSubmissionAt.value = parseTime(metricsRes.data.first)
       latestSubmissionAt.value = parseTime(metricsRes.data.latest)
       toLatestAt.value = durationToDays(
@@ -141,9 +87,6 @@ async function init() {
         metricsRes.data.latest,
       )
     }
-
-    // 处理 badges 结果
-    userBadges.value = groupBadgesByIcon(results[1].data)
   } finally {
     toggle(false)
   }
@@ -297,6 +240,9 @@ onMounted(() => {
       </n-button>
     </n-flex>
     <n-flex align="center" :size="10" class="achievement-recent">
+      <n-text v-if="achievementSummary.recent.length" depth="3">
+        最近获得
+      </n-text>
       <n-tooltip v-for="a in achievementSummary.recent" :key="a.id">
         <template #trigger>
           <span class="achievement-icon">
@@ -311,24 +257,6 @@ onMounted(() => {
     </n-flex>
   </n-card>
 
-  <!-- 徽章展示卡片 -->
-  <n-card
-    v-if="!loading && profile && userBadges.length > 0"
-    class="wrapper"
-    hoverable
-  >
-    <template #header>
-      <n-h4 style="margin: 0">获得的徽章</n-h4>
-    </template>
-    <n-flex wrap>
-      <GroupedUserBadge
-        v-for="groupedBadge in userBadges"
-        :key="groupedBadge.icon"
-        :grouped-badge="groupedBadge"
-      />
-    </n-flex>
-  </n-card>
-
   <n-descriptions v-if="!loading && profile" class="wrapper" bordered>
     <n-descriptions-item v-if="!!problems.length">
       <template #label>
diff --git a/src/shared/components/GroupedUserBadge.vue b/src/shared/components/GroupedUserBadge.vue
deleted file mode 100644
index b71f54e..0000000
--- a/src/shared/components/GroupedUserBadge.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div class="badge-item">
-    <img
-      :src="groupedBadge.icon"
-      :alt="groupedBadge.badges[0].badge.name"
-      class="badge-icon"
-      @error="handleImageError"
-    />
-    <div v-if="groupedBadge.count > 1" class="badge-count">
-      ×{{ groupedBadge.count }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface GroupedBadge {
-  icon: string
-  count: number
-  badges: any[]
-  latestEarnedTime: Date
-}
-
-interface Props {
-  groupedBadge: GroupedBadge
-}
-
-defineProps<Props>()
-
-function handleImageError(event: Event) {
-  const img = event.target as HTMLImageElement
-  img.src = "/badge-1.png"
-}
-</script>
-
-<style scoped>
-.badge-item {
-  position: relative;
-  display: inline-block;
-  cursor: pointer;
-  width: 44px;
-  height: 44px;
-}
-
-.badge-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid #e0e0e0;
-  transition: all 0.3s ease;
-}
-
-.badge-icon:hover {
-  transform: scale(1.1);
-  border-color: #1890ff;
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
-}
-
-.badge-count {
-  position: absolute;
-  top: -5px;
-  right: -5px;
-  background: #ff4d4f;
-  color: white;
-  border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: bold;
-  border: 2px solid white;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-</style>