fix(成就): 题单奖章名字不再被截成「物联网专业…」；没有班级时「快拿到了」横排占满整宽

- 奖章名最长 9 个字，竖排格子只放得下 4 个，改成图标 + 全名横排、放不下就换行
- 老师、自己注册的号没有班级就没有「本班」，原来「快拿到了」只占左半边、右边空着

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/oj/achievement/components/GroupCard.vue

@@ -35,7 +35,7 @@ const showBadges = computed(() => props.group.name === "题单和比赛" && !!pr
               :to="{ name: 'problemset', params: { problemSetId: b.problemSet.id } }"
               class="badge"
             >
-              <AchievementIcon :icon="b.badge.icon" :size="32" />
+              <AchievementIcon :icon="b.badge.icon" :size="24" />
               <span>{{ b.badge.name }}</span>
             </router-link>
           </template>
@@ -89,24 +89,19 @@ h3 small {
   gap: 8px;
 }
 
+/* 奖章名最长 9 个字（「有趣和无趣的观察者」），竖排在格子里放不下，横排写全 */
 .badge {
-  width: 72px;
-  display: flex;
-  flex-direction: column;
+  display: inline-flex;
   align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  line-height: 15px;
-  text-align: center;
-  color: v-bind("theme.textColor1");
-  text-decoration: none;
-}
-
-.badge span {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  gap: 6px;
+  height: 34px;
+  padding: 0 10px 0 6px;
+  border-radius: 6px;
+  font-size: var(--oj-fs-sec);
   white-space: nowrap;
+  color: v-bind("theme.textColor1");
+  background: v-bind("theme.actionColor");
+  text-decoration: none;
 }
 
 .compact {

apps/web/src/oj/achievement/components/NearCard.vue

@@ -5,8 +5,11 @@ import { useRarityColor } from "shared/composables/rarity"
 import type { Near } from "../series"
 import Medal from "./Medal.vue"
 
-/** 「快拿到了」：每个只说还差什么，进度条底下是现在几 / 要几、本班几人有 */
-defineProps<{ items: Near[]; compact?: boolean }>()
+/**
+ * 「快拿到了」：每个只说还差什么，进度条底下是现在几 / 要几、本班几人有。
+ * `wide`：旁边没有「本班」（没有班级的号）时三个横着排，占满整宽
+ */
+defineProps<{ items: Near[]; compact?: boolean; wide?: boolean }>()
 
 const theme = useThemeVars()
 const rarityText = useRarityColor()
@@ -22,8 +25,9 @@ const percent = (item: Near) => Math.round((item.series.value / item.achievement
 </script>
 
 <template>
-  <section class="card" :class="{ compact }">
+  <section class="card" :class="{ compact, wide }">
     <h3>快拿到了</h3>
+    <div class="list">
       <div v-for="item in items" :key="item.achievement.id" class="item">
         <Medal
           :icon="item.achievement.icon"
@@ -57,6 +61,7 @@ const percent = (item: Near) => Math.round((item.series.value / item.achievement
           </div>
         </div>
       </div>
+    </div>
   </section>
 </template>
 
@@ -116,6 +121,20 @@ h3 {
   font-variant-numeric: tabular-nums;
 }
 
+.wide {
+  padding-bottom: 14px;
+}
+
+.wide .list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 32px;
+}
+
+.wide .item {
+  border-top: 1px solid v-bind("theme.dividerColor");
+}
+
 /* 手机：「还差什么」换到名字下面一行 */
 .compact {
   padding: 12px 14px 4px;

apps/web/src/oj/achievement/index.vue

@@ -85,9 +85,14 @@ watch(name, load)
           <router-link v-if="other" to="/achievement" class="mine">看我的 ›</router-link>
         </div>
 
-        <!-- 只有一张（老师没有班级、或看别人）时也只占半边，别把进度条拉得一屏宽 -->
-        <div v-if="near.length || data.classBoard" class="top">
-          <NearCard v-if="near.length" :items="near" :compact="!isDesktop" />
+        <!-- 没有班级（老师、自己注册的号）就没有「本班」，「快拿到了」三个横排占满整宽 -->
+        <div v-if="near.length || data.classBoard" class="top" :class="{ alone: !data.classBoard }">
+          <NearCard
+            v-if="near.length"
+            :items="near"
+            :compact="!isDesktop"
+            :wide="isDesktop && !data.classBoard"
+          />
           <ClassCard
             v-if="data.classBoard"
             :board="data.classBoard"
@@ -177,6 +182,10 @@ h2 {
   margin-bottom: var(--oj-gap);
 }
 
+.top.alone {
+  grid-template-columns: minmax(0, 1fr);
+}
+
 .columns {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));