From 36f2a45c5e5db98ef817da1a885b77632a1144b1 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 13 Oct 2026 00:31:03 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=88=90=E5=B0=B1):=20=E9=A2=98=E5=8D=95?=
 =?UTF-8?q?=E5=A5=96=E7=AB=A0=E5=90=8D=E5=AD=97=E4=B8=8D=E5=86=8D=E8=A2=AB?=
 =?UTF-8?q?=E6=88=AA=E6=88=90=E3=80=8C=E7=89=A9=E8=81=94=E7=BD=91=E4=B8=93?=
 =?UTF-8?q?=E4=B8=9A=E2=80=A6=E3=80=8D=EF=BC=9B=E6=B2=A1=E6=9C=89=E7=8F=AD?=
 =?UTF-8?q?=E7=BA=A7=E6=97=B6=E3=80=8C=E5=BF=AB=E6=8B=BF=E5=88=B0=E4=BA=86?=
 =?UTF-8?q?=E3=80=8D=E6=A8=AA=E6=8E=92=E5=8D=A0=E6=BB=A1=E6=95=B4=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../oj/achievement/components/GroupCard.vue   | 27 +++---
 .../oj/achievement/components/NearCard.vue    | 83 ++++++++++++-------
 apps/web/src/oj/achievement/index.vue         | 15 +++-
 3 files changed, 74 insertions(+), 51 deletions(-)

diff --git a/apps/web/src/oj/achievement/components/GroupCard.vue b/apps/web/src/oj/achievement/components/GroupCard.vue
index 5004c73..08a4716 100644
--- a/apps/web/src/oj/achievement/components/GroupCard.vue
+++ b/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 {
diff --git a/apps/web/src/oj/achievement/components/NearCard.vue b/apps/web/src/oj/achievement/components/NearCard.vue
index 0260ed7..50da422 100644
--- a/apps/web/src/oj/achievement/components/NearCard.vue
+++ b/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,38 +25,40 @@ 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 v-for="item in items" :key="item.achievement.id" class="item">
-      <Medal
-        :icon="item.achievement.icon"
-        :rarity="item.achievement.rarity"
-        :size="compact ? 44 : 48"
-        state="off"
-        :ring="item.series.value / item.achievement.threshold!"
-      />
-      <div class="body">
-        <div class="head">
-          <b>{{ item.achievement.name }}</b>
-          <span class="tag" :style="{ color: rarityText[item.achievement.rarity] }">
-            {{ RARITY_LABEL[item.achievement.rarity] }}
-          </span>
-          <span class="remain">{{ item.remain }}</span>
-        </div>
-        <n-progress
-          type="line"
-          :percentage="percent(item)"
-          :height="6"
-          :show-indicator="false"
-          :color="theme.primaryColor"
-          :border-radius="3"
-          :fill-border-radius="3"
+    <div class="list">
+      <div v-for="item in items" :key="item.achievement.id" class="item">
+        <Medal
+          :icon="item.achievement.icon"
+          :rarity="item.achievement.rarity"
+          :size="compact ? 44 : 48"
+          state="off"
+          :ring="item.series.value / item.achievement.threshold!"
         />
-        <div class="foot">
-          <span>{{ now(item) }}</span>
-          <span v-if="item.achievement.classHolders !== null">
-            本班 {{ item.achievement.classHolders }} 人有
-          </span>
+        <div class="body">
+          <div class="head">
+            <b>{{ item.achievement.name }}</b>
+            <span class="tag" :style="{ color: rarityText[item.achievement.rarity] }">
+              {{ RARITY_LABEL[item.achievement.rarity] }}
+            </span>
+            <span class="remain">{{ item.remain }}</span>
+          </div>
+          <n-progress
+            type="line"
+            :percentage="percent(item)"
+            :height="6"
+            :show-indicator="false"
+            :color="theme.primaryColor"
+            :border-radius="3"
+            :fill-border-radius="3"
+          />
+          <div class="foot">
+            <span>{{ now(item) }}</span>
+            <span v-if="item.achievement.classHolders !== null">
+              本班 {{ item.achievement.classHolders }} 人有
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -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;
diff --git a/apps/web/src/oj/achievement/index.vue b/apps/web/src/oj/achievement/index.vue
index 223b4d0..e482705 100644
--- a/apps/web/src/oj/achievement/index.vue
+++ b/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));