From cbeb0737ef90f9f52fdaeb77dc373b4b602894cb Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 13 Oct 2026 00:26:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=88=90=E5=B0=B1):=20=E6=88=90=E5=B0=B1?=
 =?UTF-8?q?=E9=A1=B5=E6=94=B9=E6=88=90=E3=80=8C=E5=BF=AB=E6=8B=BF=E5=88=B0?=
 =?UTF-8?q?=E4=BA=86=20+=20=E6=9C=AC=E7=8F=AD=E3=80=8D=E5=8A=A0=E4=B8=80?=
 =?UTF-8?q?=E6=9D=A1=E6=9D=A1=E6=88=90=E5=B0=B1=E7=BA=BF=EF=BC=8C=E4=B8=8D?=
 =?UTF-8?q?=E5=86=8D=E6=98=AF=E4=B8=80=E5=A2=99=E7=81=B0=E5=8D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 顶上「快拿到了」三个只说还差什么，旁边「本班」：最近谁拿到了什么、成就最多前五（自己不在就钉在底下）
- 38 个成就按指标收成一条条线、分五组，同一串几档排在一根进度线上，下一档标「差几」；
  悬停看说明、哪天拿到、本班几人有、全站几人有
- 还没找到的隐藏成就只露问号；本班动态里也只说「彩蛋」，不漏名字
- 题单奖章并进「题单和比赛」那组；看别人的成就只有成就线
- 去掉「仅 X% 的人获得」（分母是全站历届账号）和完成度圆环

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/oj/achievement/api.ts            |   8 +-
 .../oj/achievement/components/ClassCard.vue   | 192 ++++++++++++
 .../oj/achievement/components/GroupCard.vue   | 115 +++++++
 .../src/oj/achievement/components/Medal.vue   | 117 +++++++
 .../oj/achievement/components/NearCard.vue    | 133 ++++++++
 .../oj/achievement/components/SeriesRow.vue   | 245 +++++++++++++++
 apps/web/src/oj/achievement/index.vue         | 296 ++++++++++--------
 apps/web/src/oj/achievement/series.ts         | 239 ++++++++++++++
 apps/web/src/utils/types.ts                   |   3 +-
 9 files changed, 1203 insertions(+), 145 deletions(-)
 create mode 100644 apps/web/src/oj/achievement/components/ClassCard.vue
 create mode 100644 apps/web/src/oj/achievement/components/GroupCard.vue
 create mode 100644 apps/web/src/oj/achievement/components/Medal.vue
 create mode 100644 apps/web/src/oj/achievement/components/NearCard.vue
 create mode 100644 apps/web/src/oj/achievement/components/SeriesRow.vue
 create mode 100644 apps/web/src/oj/achievement/series.ts

diff --git a/apps/web/src/oj/achievement/api.ts b/apps/web/src/oj/achievement/api.ts
index 02aa734..9ed07db 100644
--- a/apps/web/src/oj/achievement/api.ts
+++ b/apps/web/src/oj/achievement/api.ts
@@ -1,5 +1,5 @@
 import api from "utils/api"
-import type { AchievementList, AchievementSummary, PendingAchievement } from "utils/types"
+import type { AchievementList, PendingAchievement } from "utils/types"
 
 export function getAchievements(name?: string) {
   return api.get<AchievementList>("achievements", {
@@ -7,12 +7,6 @@ export function getAchievements(name?: string) {
   })
 }
 
-export function getAchievementSummary(name?: string) {
-  return api.get<AchievementSummary>("achievements/summary", {
-    params: name ? { username: name } : {},
-  })
-}
-
 export function getPendingAchievements() {
   return api.get<PendingAchievement[]>("achievements/pending")
 }
diff --git a/apps/web/src/oj/achievement/components/ClassCard.vue b/apps/web/src/oj/achievement/components/ClassCard.vue
new file mode 100644
index 0000000..5a59638
--- /dev/null
+++ b/apps/web/src/oj/achievement/components/ClassCard.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { useThemeVars } from "naive-ui"
+import UserName from "shared/components/UserName.vue"
+import { parseTime } from "utils/functions"
+import type { Achievement, AchievementClassBoard } from "utils/types"
+import Medal from "./Medal.vue"
+
+/**
+ * 「本班」：最近谁拿到了什么、成就最多的前五名（自己不在里面就钉在底下）。
+ * 同一个人同一刻拿到的几个并成一行（一次提交常常连着解锁两三个）；
+ * 自己还没找到的隐藏成就只说「彩蛋」，不把名字漏出来。
+ */
+const props = defineProps<{
+  board: AchievementClassBoard
+  achievements: Achievement[]
+  me: string
+  compact?: boolean
+}>()
+
+const theme = useThemeVars()
+const byId = computed(() => new Map(props.achievements.map((item) => [item.id, item])))
+
+const recent = computed(() => {
+  const rows: { key: string; username: string; time: string; items: Achievement[] }[] = []
+  for (const row of props.board.recent) {
+    const item = byId.value.get(row.achievementId)
+    if (!item) continue
+    const last = rows.at(-1)
+    if (last && last.username === row.username && last.time === row.unlockTime)
+      last.items.push(item)
+    else
+      rows.push({
+        key: `${row.username}-${row.unlockTime}-${row.achievementId}`,
+        username: row.username,
+        time: row.unlockTime,
+        items: [item],
+      })
+  }
+  return rows
+})
+
+function what(items: Achievement[]) {
+  const known = items.filter((item) => item.metric !== null).map((item) => item.name)
+  const eggs = items.length - known.length
+  if (eggs) known.push(eggs === 1 ? "一个彩蛋" : `${eggs} 个彩蛋`)
+  return known.join("、")
+}
+</script>
+
+<template>
+  <section class="card" :class="{ compact }">
+    <h3>本班</h3>
+    <div class="cols">
+      <div class="col">
+        <span class="sub">最近拿到</span>
+        <div v-for="row in recent" :key="row.key" class="line">
+          <Medal
+            :icon="row.items[0]!.icon"
+            :rarity="row.items[0]!.rarity"
+            :size="28"
+            :state="row.items[0]!.metric === null ? 'unknown' : 'on'"
+          />
+          <span class="what">
+            <UserName :username="row.username" />
+            <span class="muted">拿到</span>
+            {{ what(row.items) }}
+          </span>
+          <span class="date">{{ parseTime(row.time, "M月D日") }}</span>
+        </div>
+        <span v-if="!recent.length" class="empty">这学期还没人拿到</span>
+      </div>
+      <div class="col">
+        <span class="sub">成就最多</span>
+        <div
+          v-for="row in board.most"
+          :key="row.username"
+          class="line rank"
+          :class="{ mine: row.username === me }"
+        >
+          <span class="no">{{ row.rank }}</span>
+          <UserName :username="row.username" />
+          <b>{{ row.count }}</b>
+        </div>
+        <div v-if="board.me" class="line rank mine pinned">
+          <span class="no">{{ board.me.rank }}</span>
+          <UserName :username="me" />
+          <b>{{ board.me.count }}</b>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 14px 20px 12px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+h3 {
+  margin: 0;
+  font-size: var(--oj-fs-h2);
+}
+
+.cols {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 200px;
+  gap: 28px;
+  margin-top: 10px;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sub {
+  margin-bottom: 4px;
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor3");
+}
+
+.line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 38px;
+  font-size: var(--oj-fs-sec);
+}
+
+.what {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.muted,
+.date,
+.no,
+.empty {
+  color: v-bind("theme.textColor3");
+}
+
+.muted {
+  margin: 0 4px;
+}
+
+.date {
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.empty {
+  padding: 8px 0;
+  font-size: var(--oj-fs-sec);
+}
+
+.rank .no {
+  width: 16px;
+  font-variant-numeric: tabular-nums;
+}
+
+.rank b {
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.mine {
+  margin: 0 -8px;
+  padding: 0 8px;
+  border-radius: 6px;
+  background: v-bind("theme.primaryColor + '1a'");
+}
+
+.pinned {
+  border-top: 1px dashed v-bind("theme.borderColor");
+}
+
+.compact {
+  padding: 12px 14px 8px;
+}
+
+.compact .cols {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 14px;
+}
+</style>
diff --git a/apps/web/src/oj/achievement/components/GroupCard.vue b/apps/web/src/oj/achievement/components/GroupCard.vue
new file mode 100644
index 0000000..5004c73
--- /dev/null
+++ b/apps/web/src/oj/achievement/components/GroupCard.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { useThemeVars } from "naive-ui"
+import AchievementIcon from "shared/components/AchievementIcon.vue"
+import type { UserBadge } from "utils/types"
+import type { Group } from "../series"
+import Medal from "./Medal.vue"
+import SeriesRow from "./SeriesRow.vue"
+
+/** 一组成就线（做题 / 坚持 / …），「彩蛋」组末尾是还没找到的问号，「题单和比赛」组末尾是拿到的题单奖章 */
+const props = defineProps<{ group: Group; badges?: UserBadge[]; compact?: boolean }>()
+
+const theme = useThemeVars()
+const showBadges = computed(() => props.group.name === "题单和比赛" && !!props.badges?.length)
+</script>
+
+<template>
+  <section class="card" :class="{ compact }">
+    <h3>
+      {{ group.name }}
+      <small>{{ group.got }} / {{ group.total }}</small>
+    </h3>
+    <SeriesRow v-for="item in group.series" :key="item.metric" :series="item" :compact="compact" />
+    <div v-if="group.masked" class="masked">
+      <span class="masked-title">还有 {{ group.masked }} 个没找到</span>
+      <div class="masked-list">
+        <Medal v-for="i in group.masked" :key="i" state="unknown" :size="compact ? 30 : 34" />
+      </div>
+    </div>
+    <div v-if="showBadges" class="badges">
+      <span class="masked-title">拿到的题单奖章</span>
+      <div class="badge-list">
+        <n-tooltip v-for="b in badges" :key="b.id" :delay="150">
+          <template #trigger>
+            <router-link
+              :to="{ name: 'problemset', params: { problemSetId: b.problemSet.id } }"
+              class="badge"
+            >
+              <AchievementIcon :icon="b.badge.icon" :size="32" />
+              <span>{{ b.badge.name }}</span>
+            </router-link>
+          </template>
+          {{ b.badge.description }} · 来自题单「{{ b.problemSet.title }}」
+        </n-tooltip>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 14px 20px 20px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+h3 {
+  margin: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: var(--oj-fs-h2);
+}
+
+h3 small {
+  font-size: var(--oj-fs-meta);
+  font-weight: 400;
+  color: v-bind("theme.textColor3");
+  font-variant-numeric: tabular-nums;
+}
+
+.masked,
+.badges {
+  margin-top: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.masked-title {
+  font-size: 13px;
+  color: v-bind("theme.textColor2");
+}
+
+.masked-list,
+.badge-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.badge {
+  width: 72px;
+  display: flex;
+  flex-direction: column;
+  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;
+  white-space: nowrap;
+}
+
+.compact {
+  padding: 12px 14px 16px;
+}
+</style>
diff --git a/apps/web/src/oj/achievement/components/Medal.vue b/apps/web/src/oj/achievement/components/Medal.vue
new file mode 100644
index 0000000..c9ca36f
--- /dev/null
+++ b/apps/web/src/oj/achievement/components/Medal.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { useThemeVars } from "naive-ui"
+import AchievementIcon from "shared/components/AchievementIcon.vue"
+import { RARITY_COLOR } from "utils/constants"
+import type { AchievementRarity } from "utils/types"
+
+/**
+ * 一枚徽章：拿到的是稀有度色的圈，没拿到的灰掉，还没找到的隐藏成就是虚线问号。
+ * `ring` 给了就在外面画一圈进度（「快拿到了」那几个）。
+ */
+const props = withDefaults(
+  defineProps<{
+    icon?: string
+    rarity?: AchievementRarity
+    size?: number
+    state?: "on" | "off" | "unknown"
+    ring?: number | null
+  }>(),
+  { icon: "", rarity: "bronze", size: 40, state: "on", ring: null },
+)
+
+const theme = useThemeVars()
+const color = computed(() => RARITY_COLOR[props.rarity])
+const r = computed(() => props.size / 2 + 3)
+const box = computed(() => props.size + 8)
+const circumference = computed(() => 2 * Math.PI * r.value)
+</script>
+
+<template>
+  <span class="medal" :style="{ width: `${size}px`, height: `${size}px` }">
+    <svg
+      v-if="ring !== null && state !== 'unknown'"
+      class="arc"
+      :width="box"
+      :height="box"
+      :viewBox="`0 0 ${box} ${box}`"
+      aria-hidden="true"
+    >
+      <circle :cx="box / 2" :cy="box / 2" :r="r" fill="none" class="arc-track" stroke-width="3" />
+      <circle
+        :cx="box / 2"
+        :cy="box / 2"
+        :r="r"
+        fill="none"
+        class="arc-fill"
+        stroke-width="3"
+        stroke-linecap="round"
+        :stroke-dasharray="`${circumference * Math.min(1, ring)} ${circumference}`"
+      />
+    </svg>
+    <span v-if="state === 'unknown'" class="disc unknown" :style="{ fontSize: `${size * 0.42}px` }">
+      ?
+    </span>
+    <span
+      v-else
+      class="disc"
+      :class="state"
+      :style="state === 'on' ? { borderColor: color, background: `${color}26` } : undefined"
+    >
+      <AchievementIcon :icon="icon" :size="Math.round(size * 0.56)" />
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.medal {
+  position: relative;
+  flex-shrink: 0;
+  display: block;
+}
+
+.arc {
+  position: absolute;
+  left: -4px;
+  top: -4px;
+  transform: rotate(-90deg);
+}
+
+.arc-track {
+  stroke: v-bind("theme.dividerColor");
+}
+
+.arc-fill {
+  stroke: v-bind("theme.primaryColor");
+}
+
+.disc {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.disc.off {
+  border-color: v-bind("theme.borderColor");
+  background: v-bind("theme.actionColor");
+}
+
+.disc.off :deep(svg),
+.disc.off :deep(img),
+.disc.off :deep(span) {
+  filter: grayscale(1);
+  opacity: 0.4;
+}
+
+.disc.unknown {
+  border: 1.5px dashed v-bind("theme.borderColor");
+  background: v-bind("theme.actionColor");
+  color: v-bind("theme.textColor3");
+  font-weight: 700;
+}
+</style>
diff --git a/apps/web/src/oj/achievement/components/NearCard.vue b/apps/web/src/oj/achievement/components/NearCard.vue
new file mode 100644
index 0000000..0260ed7
--- /dev/null
+++ b/apps/web/src/oj/achievement/components/NearCard.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { useThemeVars } from "naive-ui"
+import { RARITY_LABEL } from "utils/constants"
+import { useRarityColor } from "shared/composables/rarity"
+import type { Near } from "../series"
+import Medal from "./Medal.vue"
+
+/** 「快拿到了」：每个只说还差什么，进度条底下是现在几 / 要几、本班几人有 */
+defineProps<{ items: Near[]; compact?: boolean }>()
+
+const theme = useThemeVars()
+const rarityText = useRarityColor()
+
+function now(item: Near) {
+  const { series, achievement } = item
+  return series.streak
+    ? `现在连着 ${series.value} ${series.unit}`
+    : `${series.value} / ${achievement.threshold} ${series.unit}`
+}
+
+const percent = (item: Near) => Math.round((item.series.value / item.achievement.threshold!) * 100)
+</script>
+
+<template>
+  <section class="card" :class="{ compact }">
+    <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="foot">
+          <span>{{ now(item) }}</span>
+          <span v-if="item.achievement.classHolders !== null">
+            本班 {{ item.achievement.classHolders }} 人有
+          </span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.card {
+  padding: 14px 20px 6px;
+  border: 1px solid v-bind("theme.borderColor");
+  border-radius: var(--oj-radius);
+  background: v-bind("theme.cardColor");
+}
+
+h3 {
+  margin: 0 0 8px;
+  font-size: var(--oj-fs-h2);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 11px 0;
+  border-top: 1px solid v-bind("theme.dividerColor");
+}
+
+.body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--oj-fs-body);
+}
+
+.tag {
+  font-size: 12px;
+}
+
+.remain {
+  margin-left: auto;
+  font-size: var(--oj-fs-sec);
+  font-weight: 600;
+  color: v-bind("theme.primaryColorPressed");
+  white-space: nowrap;
+}
+
+.foot {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: v-bind("theme.textColor3");
+  font-variant-numeric: tabular-nums;
+}
+
+/* 手机：「还差什么」换到名字下面一行 */
+.compact {
+  padding: 12px 14px 4px;
+}
+
+.compact .head {
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+
+.compact .remain {
+  margin-left: 0;
+  flex-basis: 100%;
+}
+</style>
diff --git a/apps/web/src/oj/achievement/components/SeriesRow.vue b/apps/web/src/oj/achievement/components/SeriesRow.vue
new file mode 100644
index 0000000..7255c61
--- /dev/null
+++ b/apps/web/src/oj/achievement/components/SeriesRow.vue
@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { useThemeVars } from "naive-ui"
+import { RARITY_LABEL } from "utils/constants"
+import { parseTime } from "utils/functions"
+import type { Achievement } from "utils/types"
+import type { Series } from "../series"
+import Medal from "./Medal.vue"
+
+/**
+ * 一条成就线：左边线名和现在的数，右边几档按门槛排在一根进度线上，下一档头上标「差几」。
+ * 档位等距摆，不按门槛比例（1 / 10 / 50 / 100 / 200 按比例画，前两档会挤成一个点），
+ * 进度在相邻两档之间按比例插值。手机上线名挪到上面，线占满一行。
+ */
+const props = defineProps<{ series: Series; compact?: boolean }>()
+
+const theme = useThemeVars()
+// 「差几」的底色：主色压淡，明暗主题都跟着走
+const gapBg = computed(() => `${theme.value.primaryColor}22`)
+const size = computed(() => (props.compact ? 34 : 40))
+// 少于三档也按三格排，一档、两档的线不会被拉得很长
+const cols = computed(() => Math.max(props.series.items.length, 3))
+const center = (i: number) => ((i + 0.5) / cols.value) * 100
+
+const fill = computed(() => {
+  const { items, value } = props.series
+  // 连续几周给的是「现在连着几」，断过的人可能比已经拿到的那档还小 —— 线至少画到拿到的最后一档
+  let lastOn = -1
+  items.forEach((item, i) => {
+    if (item.unlocked) lastOn = i
+  })
+  return Math.max(lastOn < 0 ? 0 : center(lastOn), reach(items, value))
+})
+
+function reach(items: Achievement[], value: number) {
+  let prevT = 0
+  let prevX = 0
+  for (const [i, item] of items.entries()) {
+    const t = item.threshold ?? 0
+    const x = center(i)
+    if (value < t) return prevX + ((value - prevT) / (t - prevT)) * (x - prevX)
+    prevT = t
+    prevX = x
+  }
+  return prevX
+}
+
+function gap(item: Achievement) {
+  if (item !== props.series.next || props.series.value <= 0) return null
+  const r = (item.threshold ?? 0) - props.series.value
+  return r > 0 ? r : null
+}
+
+function when(item: Achievement) {
+  if (!item.unlocked) return `现在 ${props.series.value} ${props.series.unit}`
+  // 补发的不写日期：一次补发会给几百人盖上同一个时间戳
+  if (item.backfilled || !item.unlockTime) return "已拿到"
+  return `${parseTime(item.unlockTime, "M月D日")}拿到`
+}
+
+function holders(item: Achievement) {
+  const site = `全站 ${item.holders} 人有`
+  return item.classHolders === null ? site : `本班 ${item.classHolders} 人有 · ${site}`
+}
+</script>
+
+<template>
+  <div class="row" :class="{ compact }">
+    <div class="label">
+      <span class="name">{{ series.label }}</span>
+      <span class="value">
+        <b>{{ series.streak ? "现在 " : "" }}{{ series.value }}</b>
+        <small>{{ series.unit }}</small>
+      </span>
+    </div>
+    <div class="track" :style="{ height: `${size + 36}px` }">
+      <span
+        class="line"
+        :style="{ top: `${size / 2 - 2}px`, width: `${center(series.items.length - 1)}%` }"
+      ></span>
+      <span class="line done" :style="{ top: `${size / 2 - 2}px`, width: `${fill}%` }"></span>
+      <div
+        v-for="(item, i) in series.items"
+        :key="item.id"
+        class="tier"
+        :class="{ on: item.unlocked }"
+        :style="{ left: `${center(i)}%` }"
+      >
+        <n-tooltip :delay="150">
+          <template #trigger>
+            <span class="trigger">
+              <span v-if="gap(item)" class="gap" :style="{ bottom: `${size + 4}px` }">
+                差 {{ gap(item) }}
+              </span>
+              <Medal
+                :icon="item.icon"
+                :rarity="item.rarity"
+                :size="size"
+                :state="item.unlocked ? 'on' : 'off'"
+              />
+            </span>
+          </template>
+          <div class="tip">
+            <b>{{ item.name }}</b> · {{ RARITY_LABEL[item.rarity] }}<br />
+            {{ item.description }}<br />
+            {{ when(item) }} · {{ holders(item) }}
+          </div>
+        </n-tooltip>
+        <span class="tier-name">{{ item.name }}</span>
+        <span class="tier-at">{{ item.threshold }} {{ series.unit }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.row {
+  display: grid;
+  grid-template-columns: 118px minmax(0, 1fr);
+  align-items: start;
+  margin-top: 30px;
+}
+
+.label {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-right: 12px;
+}
+
+.name {
+  font-size: 13px;
+  color: v-bind("theme.textColor2");
+  white-space: nowrap;
+}
+
+.value b {
+  font-size: 18px;
+  line-height: 22px;
+  font-variant-numeric: tabular-nums;
+}
+
+.value small {
+  margin-left: 3px;
+  font-size: 12px;
+  color: v-bind("theme.textColor3");
+}
+
+.track {
+  position: relative;
+}
+
+.line {
+  position: absolute;
+  left: 0;
+  height: 4px;
+  border-radius: 2px;
+  background: v-bind("theme.dividerColor");
+}
+
+.line.done {
+  background: v-bind("theme.primaryColor");
+}
+
+.tier {
+  position: absolute;
+  top: 0;
+  width: 92px;
+  margin-left: -46px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+}
+
+.trigger {
+  position: relative;
+  display: block;
+  cursor: default;
+}
+
+.gap {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0 6px;
+  border-radius: 8px;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 600;
+  white-space: nowrap;
+  color: v-bind("theme.primaryColorPressed");
+  background: v-bind(gapBg);
+}
+
+.tier-name {
+  font-size: 12px;
+  line-height: 15px;
+  text-align: center;
+  white-space: nowrap;
+  color: v-bind("theme.textColor3");
+}
+
+.tier.on .tier-name {
+  color: v-bind("theme.textColor1");
+  font-weight: 600;
+}
+
+.tier-at {
+  font-size: 11px;
+  line-height: 14px;
+  color: v-bind("theme.textColor3");
+  font-variant-numeric: tabular-nums;
+}
+
+.tip {
+  max-width: 240px;
+  line-height: 20px;
+}
+
+/* 手机：线名挪到上面，线占满一行 */
+.compact {
+  grid-template-columns: minmax(0, 1fr);
+  margin-top: 18px;
+}
+
+.compact .label {
+  flex-direction: row;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.compact .value b {
+  font-size: 16px;
+}
+
+.compact .tier {
+  width: 72px;
+  margin-left: -36px;
+}
+
+.compact .tier-name {
+  font-size: 11px;
+}
+</style>
diff --git a/apps/web/src/oj/achievement/index.vue b/apps/web/src/oj/achievement/index.vue
index 27e993b..223b4d0 100644
--- a/apps/web/src/oj/achievement/index.vue
+++ b/apps/web/src/oj/achievement/index.vue
@@ -1,53 +1,60 @@
 <script setup lang="ts">
-import { getAchievements, getAchievementSummary } from "oj/achievement/api"
+import { useThemeVars } from "naive-ui"
+import { getAchievements } from "oj/achievement/api"
 import { getUserBadges } from "oj/api"
 import { useBreakpoints } from "shared/composables/breakpoints"
-import { useRarityColor } from "shared/composables/rarity"
-import type { Achievement, AchievementRarity, AchievementSummary, UserBadge } from "utils/types"
-import AchievementCard from "./components/AchievementCard.vue"
+import UserName from "shared/components/UserName.vue"
+import { useUserStore } from "shared/store/user"
+import { RARITY_COLOR, RARITY_LABEL } from "utils/constants"
+import type { AchievementList, AchievementRarity, UserBadge } from "utils/types"
+import ClassCard from "./components/ClassCard.vue"
+import GroupCard from "./components/GroupCard.vue"
+import NearCard from "./components/NearCard.vue"
+import { buildGroups, nearest, type GroupName } from "./series"
 
+/**
+ * 我的成就（设计稿「我的成就重设计」定稿，画布 page ach）：
+ * 顶上「快拿到了」和「本班」并排，底下 38 个成就收成一条条线、分五组。
+ * 看别人的（排名、主页点进来，?name=）只有成就线 —— 「快拿到了」是给自己定目标的，
+ * 「本班」后端也只在看自己时给。
+ */
 const route = useRoute()
-const name = computed(() => (route.query.name as string) || undefined)
-
-// 标签和进度条同色，整行读作一个单位
-const rarityColor = useRarityColor()
-
-const achievements = ref<Achievement[]>([])
-const summary = ref<AchievementSummary | null>(null)
-
-// 白金排最前，青铜垫底：稀有的先亮相，接口给的顺序是反的
-const RARITY_RANK: Record<AchievementRarity, number> = {
-  platinum: 0,
-  gold: 1,
-  silver: 2,
-  bronze: 3,
-}
-
-const rarities = computed(() =>
-  [...(summary.value?.rarity ?? [])].sort((a, b) => RARITY_RANK[a.rarity] - RARITY_RANK[b.rarity]),
-)
-const badges = ref<UserBadge[]>([])
+const userStore = useUserStore()
+const theme = useThemeVars()
 const { isDesktop } = useBreakpoints()
-const tab = ref("all")
-const loading = ref(true)
 
-const filtered = computed(() => {
-  if (tab.value === "unlocked") return achievements.value.filter((a) => a.unlocked)
-  if (tab.value === "locked") return achievements.value.filter((a) => !a.unlocked)
-  return achievements.value
-})
+const name = computed(() => (route.query.name as string) || undefined)
+const data = ref<AchievementList | null>(null)
+const badges = ref<UserBadge[]>([])
+const loading = ref(true)
+const notFound = ref(false)
+
+const other = computed(() => !!data.value && data.value.username !== userStore.user?.username)
+const groups = computed(() => (data.value ? buildGroups(data.value.achievements) : []))
+const near = computed(() => (other.value ? [] : nearest(groups.value)))
+const got = computed(() => data.value?.achievements.filter((item) => item.unlocked) ?? [])
+const rarities: AchievementRarity[] = ["platinum", "gold", "silver", "bronze"]
+const countOf = (rarity: AchievementRarity) =>
+  got.value.filter((item) => item.rarity === rarity).length
+
+// 桌面两栏：左边做题、其他、彩蛋，右边坚持、题单和比赛 —— 两边差不多高
+const LEFT: GroupName[] = ["做题", "其他", "彩蛋"]
+const RIGHT: GroupName[] = ["坚持", "题单和比赛"]
+const pick = (names: GroupName[]) => groups.value.filter((group) => names.includes(group.name))
 
 async function load() {
   loading.value = true
+  notFound.value = false
   try {
-    const [list, sum, badgeRes] = await Promise.all([
+    const [list, badgeRes] = await Promise.all([
       getAchievements(name.value),
-      getAchievementSummary(name.value),
-      getUserBadges(name.value),
+      getUserBadges(name.value).catch(() => []),
     ])
-    achievements.value = list.achievements
-    summary.value = sum
+    data.value = list
     badges.value = badgeRes ?? []
+  } catch {
+    data.value = null
+    notFound.value = true
   } finally {
     loading.value = false
   }
@@ -58,90 +65,49 @@ watch(name, load)
 </script>
 
 <template>
-  <div class="hall oj-page">
-    <h2 class="title">成就</h2>
+  <div class="oj-page achievement-page">
     <!-- delay 50ms：缓存命中时数据几乎立刻回来，不闪一下转圈 -->
     <n-spin :show="loading" :delay="50" style="min-height: 240px">
-      <n-card v-if="summary" class="summary">
-        <n-flex align="center" :wrap="false" :size="isDesktop ? 32 : 16">
-          <n-flex vertical align="center" :size="6">
-            <n-progress type="circle" :percentage="summary.percent" :stroke-width="8">
-              <n-text strong :style="{ fontSize: isDesktop ? '20px' : '14px' }">
-                {{ summary.percent }}%
-              </n-text>
-            </n-progress>
-            <n-text depth="3" class="nowrap">
-              已获得 {{ summary.unlocked }} / {{ summary.total }}
-            </n-text>
-          </n-flex>
+      <n-empty v-if="notFound" description="没有这个用户" class="blank" />
+      <template v-else-if="data">
+        <div class="title">
+          <h2 v-if="other"><UserName :username="data.username" /> 的成就</h2>
+          <h2 v-else>我的成就</h2>
+          <span class="count">
+            拿到 <b>{{ got.length }}</b> 个
+          </span>
+          <span v-if="isDesktop" class="rarities">
+            <span v-for="r in rarities" :key="r" class="rarity">
+              <i :style="{ background: RARITY_COLOR[r] }"></i>{{ RARITY_LABEL[r] }}
+              <b>{{ countOf(r) }}</b>
+            </span>
+          </span>
+          <router-link v-if="other" to="/achievement" class="mine">看我的 ›</router-link>
+        </div>
 
-          <n-flex vertical :size="8" class="rarity">
-            <n-flex v-for="r in rarities" :key="r.rarity" align="center" :wrap="false" :size="10">
-              <n-text strong :style="{ color: rarityColor[r.rarity] }">
-                {{ r.label }}
-              </n-text>
-              <n-progress
-                style="flex: 1"
-                type="line"
-                :percentage="r.total ? (r.unlocked / r.total) * 100 : 0"
-                :height="6"
-                :border-radius="3"
-                :fill-border-radius="3"
-                :color="rarityColor[r.rarity]"
-                :show-indicator="false"
-              />
-              <n-text depth="3" class="nowrap"> {{ r.unlocked }} / {{ r.total }} </n-text>
-            </n-flex>
-          </n-flex>
-        </n-flex>
-      </n-card>
+        <!-- 只有一张（老师没有班级、或看别人）时也只占半边，别把进度条拉得一屏宽 -->
+        <div v-if="near.length || data.classBoard" class="top">
+          <NearCard v-if="near.length" :items="near" :compact="!isDesktop" />
+          <ClassCard
+            v-if="data.classBoard"
+            :board="data.classBoard"
+            :achievements="data.achievements"
+            :me="data.username"
+            :compact="!isDesktop"
+          />
+        </div>
 
-      <n-tabs v-model:value="tab" type="line" class="tabs">
-        <n-tab name="all">全部</n-tab>
-        <n-tab name="unlocked">已获得</n-tab>
-        <n-tab name="locked">未获得</n-tab>
-        <n-tab name="badges">题单奖章</n-tab>
-      </n-tabs>
-
-      <template v-if="tab !== 'badges'">
-        <n-grid v-if="filtered.length" responsive="screen" cols="1 s:2 l:3" :x-gap="16" :y-gap="16">
-          <n-gi v-for="a in filtered" :key="a.id">
-            <AchievementCard :achievement="a" />
-          </n-gi>
-        </n-grid>
-        <!-- 加载中不显示空态，不然首屏会闪一下"什么都没有" -->
-        <n-empty v-else-if="!loading" description="这里还什么都没有" />
-      </template>
-
-      <template v-else>
-        <n-grid v-if="badges.length" responsive="screen" cols="1 s:2 l:3" :x-gap="16" :y-gap="16">
-          <n-gi v-for="b in badges" :key="b.id">
-            <n-card class="badge-card">
-              <n-thing :title="b.badge?.name" :description="b.badge?.description">
-                <template #avatar v-if="b.badge?.icon">
-                  <n-avatar
-                    :size="40"
-                    :src="b.badge.icon"
-                    color="transparent"
-                    object-fit="contain"
-                  />
-                </template>
-                <n-text v-if="b.problemSet" depth="3" class="source">
-                  来自题单
-                  <router-link
-                    :to="{
-                      name: 'problemset',
-                      params: { problemSetId: b.problemSet.id },
-                    }"
-                  >
-                    {{ b.problemSet.title }}
-                  </router-link>
-                </n-text>
-              </n-thing>
-            </n-card>
-          </n-gi>
-        </n-grid>
-        <n-empty v-else-if="!loading" description="还没有获得任何题单奖章" />
+        <div v-if="isDesktop" class="columns">
+          <div class="column">
+            <GroupCard v-for="g in pick(LEFT)" :key="g.name" :group="g" :badges="badges" />
+          </div>
+          <div class="column">
+            <GroupCard v-for="g in pick(RIGHT)" :key="g.name" :group="g" :badges="badges" />
+          </div>
+        </div>
+        <div v-else class="column">
+          <GroupCard v-for="g in groups" :key="g.name" :group="g" :badges="badges" compact />
+        </div>
       </template>
     </n-spin>
   </div>
@@ -149,36 +115,94 @@ watch(name, load)
 
 <style scoped>
 .title {
-  margin: 0 0 var(--oj-gap);
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  margin-bottom: var(--oj-gap);
+}
+
+h2 {
+  margin: 0;
   font-size: var(--oj-fs-title);
 }
 
-.summary,
-.badge-card {
-  border-radius: var(--oj-radius);
+.count {
+  font-size: var(--oj-fs-body);
+  color: v-bind("theme.textColor2");
 }
 
-.badge-card {
-  height: 100%;
+.count b {
+  font-size: 18px;
+  color: v-bind("theme.textColor1");
+  font-variant-numeric: tabular-nums;
 }
+
+.rarities {
+  display: flex;
+  gap: 14px;
+  margin-left: 6px;
+}
+
 .rarity {
-  flex: 1;
-  max-width: 420px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: var(--oj-fs-meta);
+  color: v-bind("theme.textColor2");
 }
-.nowrap {
-  white-space: nowrap;
+
+.rarity i {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
 }
-.tabs {
-  margin: var(--oj-gap) 0;
+
+.rarity b {
+  color: v-bind("theme.textColor1");
+  font-variant-numeric: tabular-nums;
 }
-.source {
-  display: block;
-  margin-top: 6px;
-  font-size: 13px;
+
+.mine {
+  margin-left: auto;
+  font-size: var(--oj-fs-sec);
+  color: v-bind("theme.primaryColor");
+  text-decoration: none;
 }
-.source a {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 2px;
+
+.top {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--oj-gap);
+  margin-bottom: var(--oj-gap);
+}
+
+.columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--oj-gap);
+  align-items: start;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.blank {
+  padding: 80px 0;
+}
+
+@media (max-width: 768px) {
+  .top {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 14px;
+    margin-bottom: 14px;
+  }
+
+  .column {
+    gap: 14px;
+  }
 }
 </style>
diff --git a/apps/web/src/oj/achievement/series.ts b/apps/web/src/oj/achievement/series.ts
new file mode 100644
index 0000000..24b8aa4
--- /dev/null
+++ b/apps/web/src/oj/achievement/series.ts
@@ -0,0 +1,239 @@
+import type { Achievement } from "utils/types"
+
+/**
+ * 成就页按「一条条线」摆：同一个指标的几档是一条线（做对 1 / 10 / 50 / 100 / 200 道），
+ * 几条线归一组。设计稿「我的成就重设计」定稿（画布 page ach）。
+ *
+ * 指标是后台可配的，这里没登记的指标归到「其他」、拿第一档的名字当线名 —— 不会丢，只是不好看，
+ * 在后台加了新指标记得回来补一行。
+ */
+export const GROUPS = ["做题", "坚持", "题单和比赛", "其他", "彩蛋"] as const
+export type GroupName = (typeof GROUPS)[number]
+
+interface MetricInfo {
+  group: GroupName
+  label: string
+  unit: string
+  /** 还差 r 的时候怎么说 */
+  remain: (r: number) => string
+  /** 进度是「现在连着几」，标签前面带「现在」 */
+  streak?: boolean
+}
+
+const METRICS: Record<string, MetricInfo> = {
+  accepted_count: { group: "做题", label: "做对的题", unit: "道", remain: (r) => `再做对 ${r} 道` },
+  mid_ac_count: {
+    group: "做题",
+    label: "中等题",
+    unit: "道",
+    remain: (r) => `再做对 ${r} 道中等题`,
+  },
+  hard_ac_count: {
+    group: "做题",
+    label: "困难题",
+    unit: "道",
+    remain: (r) => `再做对 ${r} 道困难题`,
+  },
+  max_ac_week_streak: {
+    group: "坚持",
+    label: "连着几周有做对",
+    unit: "周",
+    remain: (r) => `再连着 ${r} 周都有做对`,
+    streak: true,
+  },
+  max_ac_streak_days: {
+    group: "坚持",
+    label: "连着几天有做对",
+    unit: "天",
+    remain: (r) => `再连着 ${r} 天都有做对`,
+  },
+  active_days: {
+    group: "坚持",
+    label: "交过题的日子",
+    unit: "天",
+    remain: (r) => `再有 ${r} 天交题`,
+  },
+  submission_count: { group: "坚持", label: "交了几次", unit: "次", remain: (r) => `再交 ${r} 次` },
+  problemset_completed: {
+    group: "题单和比赛",
+    label: "做完的题单",
+    unit: "个",
+    remain: (r) => `再做完 ${r} 个题单`,
+  },
+  badge_count: {
+    group: "题单和比赛",
+    label: "题单奖章",
+    unit: "枚",
+    remain: (r) => `再拿 ${r} 枚题单奖章`,
+  },
+  contest_joined: {
+    group: "题单和比赛",
+    label: "参加的比赛",
+    unit: "场",
+    remain: (r) => `再参加 ${r} 场比赛`,
+  },
+  languages_used: {
+    group: "其他",
+    label: "用过的语言",
+    unit: "种",
+    remain: (r) => `再用 ${r} 种语言`,
+  },
+  achievement_unlocked_count: {
+    group: "其他",
+    label: "拿到的成就",
+    unit: "个",
+    remain: (r) => `再拿 ${r} 个成就`,
+  },
+  first_try_ac_count: {
+    group: "彩蛋",
+    label: "一交就对",
+    unit: "道",
+    remain: (r) => `再有 ${r} 道一交就对`,
+  },
+  max_ac_in_one_day: {
+    group: "彩蛋",
+    label: "一天做对",
+    unit: "道",
+    remain: (r) => `一天做对 ${r} 道`,
+  },
+  midnight_submissions: {
+    group: "彩蛋",
+    label: "凌晨交题",
+    unit: "次",
+    remain: (r) => `再交 ${r} 次`,
+  },
+  early_bird_submissions: {
+    group: "彩蛋",
+    label: "早上交题",
+    unit: "次",
+    remain: (r) => `再交 ${r} 次`,
+  },
+  compile_error_count: {
+    group: "彩蛋",
+    label: "编译失败",
+    unit: "次",
+    remain: (r) => `还差 ${r} 次`,
+  },
+  max_wa_before_ac: {
+    group: "彩蛋",
+    label: "错了好多次才做对",
+    unit: "次",
+    remain: (r) => `还差 ${r} 次`,
+  },
+  max_code_lines: {
+    group: "彩蛋",
+    label: "做对的代码最长",
+    unit: "行",
+    remain: (r) => `还差 ${r} 行`,
+  },
+}
+
+const METRIC_ORDER = Object.keys(METRICS)
+
+export interface Series {
+  metric: string
+  group: GroupName
+  label: string
+  unit: string
+  streak: boolean
+  /** 现在的数 */
+  value: number
+  /** 按门槛从低到高 */
+  items: Achievement[]
+  /** 下一档（还没拿到的门槛最低的一个），全拿到了是 null */
+  next: Achievement | null
+}
+
+export interface Group {
+  name: GroupName
+  series: Series[]
+  /** 还没找到的隐藏成就（后端已经遮成问号，连属于哪条线都不知道） */
+  masked: number
+  got: number
+  total: number
+}
+
+export function infoOf(metric: string): MetricInfo | null {
+  return METRICS[metric] ?? null
+}
+
+export function buildGroups(achievements: Achievement[]): Group[] {
+  const byMetric = new Map<string, Achievement[]>()
+  let masked = 0
+  let maskedGot = 0
+  for (const item of achievements) {
+    if (!item.metric) {
+      masked += 1
+      if (item.unlocked) maskedGot += 1
+      continue
+    }
+    const list = byMetric.get(item.metric) ?? []
+    list.push(item)
+    byMetric.set(item.metric, list)
+  }
+  const series: Series[] = [...byMetric.entries()]
+    .sort(([a], [b]) => rankOf(a) - rankOf(b))
+    .map(([metric, items]) => {
+      items.sort((a, b) => (a.threshold ?? 0) - (b.threshold ?? 0))
+      const info = METRICS[metric]
+      return {
+        metric,
+        group: info?.group ?? "其他",
+        label: info?.label ?? items[0]!.name,
+        unit: info?.unit ?? "",
+        streak: info?.streak ?? false,
+        value: items[0]!.progress ?? 0,
+        items,
+        next: items.find((item) => !item.unlocked) ?? null,
+      }
+    })
+  return GROUPS.map((name) => {
+    const own = series.filter((item) => item.group === name)
+    const extra = name === "彩蛋" ? masked : 0
+    const items = own.flatMap((item) => item.items)
+    return {
+      name,
+      series: own,
+      masked: extra,
+      got: items.filter((item) => item.unlocked).length + (name === "彩蛋" ? maskedGot : 0),
+      total: items.length + extra,
+    }
+  })
+}
+
+function rankOf(metric: string) {
+  const index = METRIC_ORDER.indexOf(metric)
+  return index < 0 ? METRIC_ORDER.length : index
+}
+
+export interface Near {
+  achievement: Achievement
+  series: Series
+  remain: string
+}
+
+/**
+ * 「快拿到了」：每条线只看下一档，按完成了几成排，取前三。
+ * 一个都没做的新同学全是 0，就按指标先后排 —— 第一个是「做对 1 道」。
+ */
+export function nearest(groups: Group[], limit = 3): Near[] {
+  const candidates: Near[] = []
+  for (const group of groups) {
+    for (const series of group.series) {
+      const next = series.next
+      if (!next || next.operator !== "gte" || !next.threshold) continue
+      const r = next.threshold - series.value
+      if (r <= 0) continue
+      const info = METRICS[series.metric]
+      candidates.push({
+        achievement: next,
+        series,
+        remain: info ? info.remain(r) : `还差 ${r}`,
+      })
+    }
+  }
+  const ratio = (item: Near) => item.series.value / item.achievement.threshold!
+  return candidates
+    .sort((a, b) => ratio(b) - ratio(a) || rankOf(a.series.metric) - rankOf(b.series.metric))
+    .slice(0, limit)
+}
diff --git a/apps/web/src/utils/types.ts b/apps/web/src/utils/types.ts
index 53eb81a..eeeb9d1 100644
--- a/apps/web/src/utils/types.ts
+++ b/apps/web/src/utils/types.ts
@@ -474,8 +474,7 @@ export type {
   Achievement,
   AchievementList,
   AchievementRarity,
-  AchievementRarityStat,
-  AchievementSummary,
+  AchievementClassBoard,
   AchievementNotification,
   PendingAchievement,
 } from "@oj2/contract"