From 45d79ed366d8460d5f4f9ac9d1e50d645642a35e Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sat, 10 Oct 2026 10:45:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=92=E5=90=8D):=20=E5=85=A8=E6=9C=8D?=
 =?UTF-8?q?=20100=20=E5=90=8D=E4=BB=A5=E5=A4=96=E4=B8=8D=E6=8A=A5=E5=85=B7?=
 =?UTF-8?q?=E4=BD=93=E5=90=8D=E6=AC=A1=EF=BC=8C=E5=86=99=E3=80=8C100=20?=
 =?UTF-8?q?=E5=90=8D=E4=BB=A5=E5=A4=96=E3=80=8D=E5=B9=B6=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E5=86=8D=E5=81=9A=E5=AF=B9=E5=87=A0=E9=81=93=E8=BF=9B=E5=89=8D?=
 =?UTF-8?q?=20100=EF=BC=9B=E8=B5=9B=E9=81=93=E6=AF=8F=E8=A1=8C=E5=8A=A0?=
 =?UTF-8?q?=E9=AB=98=EF=BC=8C=E6=9D=A1=E4=B8=8D=E5=86=8D=E8=A2=AB=E6=8C=A4?=
 =?UTF-8?q?=E6=88=90=E4=B8=80=E5=B0=8F=E6=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 全服排在 100 名以外：「你」卡和下面的小名次写「100 名以外」，不给前一名、后一名和名次走势，
  改成「再做对 N 道就进前 100」；名单上没有你这一行，图例和副标题也不再提「你」
- 赛道每行从 18px 加到 28px，头像、字、条都大一号（不必刻意塞进机房一屏）；
  「前一名 / 后一名 / 进步最大」挂到条的末端，不再单占一列把条挤短；领奖台台阶恢复原来的高度

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/api/src/routes/ranking.ts                | 10 ++-
 apps/web/src/oj/rank/components/RankMe.vue    | 27 ++++++-
 .../web/src/oj/rank/components/RankPodium.vue |  5 +-
 apps/web/src/oj/rank/components/RankTrack.vue | 73 +++++++++++++------
 apps/web/src/oj/rank/list.vue                 | 14 +++-
 packages/contract/src/ranking.ts              |  6 ++
 6 files changed, 98 insertions(+), 37 deletions(-)

diff --git a/apps/api/src/routes/ranking.ts b/apps/api/src/routes/ranking.ts
index 09bef46..76655d7 100644
--- a/apps/api/src/routes/ranking.ts
+++ b/apps/api/src/routes/ranking.ts
@@ -202,8 +202,11 @@ rankingRoutes.get("/rankings/board", optionalAuth, async (c) => {
     )
   }
 
+  // 全服 100 名以外：不报具体名次，前后一名、走势都不给，只给第 100 名算还差几道
+  const beyond = !!(cap && me && me.rank > cap)
+
   let trend: RankBoard["trend"] = null
-  if (me && period.data !== "week") {
+  if (me && !beyond && period.data !== "week") {
     const thisWeek = Date.parse(weekStart())
     const points = Array.from(
       { length: TREND_WEEKS },
@@ -237,9 +240,10 @@ rankingRoutes.get("/rankings/board", optionalAuth, async (c) => {
     rows: picked.map((row) => rowOf(row)!),
     complete: picked.length === listable.length,
     cap,
+    lastListed: beyond ? rowOf(listable.at(-1)) : null,
     me: rowOf(me),
-    ahead: rowOf(meIndex > 0 ? now[meIndex - 1] : undefined),
-    behind: rowOf(meIndex >= 0 ? now[meIndex + 1] : undefined),
+    ahead: beyond ? null : rowOf(meIndex > 0 ? now[meIndex - 1] : undefined),
+    behind: beyond ? null : rowOf(meIndex >= 0 ? now[meIndex + 1] : undefined),
     trend,
     hidden: !!mine?.rankHiddenAt,
     hiddenUsers: hiddenUsers.map((row): SampleUser => sampleUser(row, null)),
diff --git a/apps/web/src/oj/rank/components/RankMe.vue b/apps/web/src/oj/rank/components/RankMe.vue
index 2f26836..9a7267f 100644
--- a/apps/web/src/oj/rank/components/RankMe.vue
+++ b/apps/web/src/oj/rank/components/RankMe.vue
@@ -11,6 +11,8 @@ export interface MiniRank {
   label: string
   rank: number | null
   total: number | null
+  /** 那张榜最多列到第几名（全服 100）；名次在这之外就只写「100 名以外」 */
+  cap?: number | null
   go: () => void
 }
 
@@ -31,6 +33,10 @@ const props = defineProps<{
   /** 领奖台第 3 名（我不在台上时用来算「再做对几道上领奖台」） */
   third: RankRow | null
   total: number
+  /** 名单最多列到第几名（全服 100）。我在这之外只写「100 名以外」，不报具体名次 */
+  cap?: number | null
+  /** 我在 cap 名以外时，名单上最后那一位：算「再做对几道进前 100」 */
+  lastListed?: RankRow | null
   label: string
   minis: MiniRank[]
   /** 手机：前后一名的说明换到名字下面一行，别被截断 */
@@ -70,8 +76,12 @@ async function saveMood() {
   }
 }
 
+const beyond = computed(() => !!props.cap && props.me.rank > props.cap)
+
 const headline = computed(() => {
   const { me, ahead, third } = props
+  if (beyond.value)
+    return props.lastListed ? `再做对 ${toPass(me, props.lastListed)} 道就进前 ${props.cap}` : ""
   if (me.rank === 1) return "你是第一名"
   if (me.rank <= 3 && ahead)
     return `你在领奖台上 · 再做对 ${toPass(me, ahead)} 道就是第 ${ahead.rank} 名`
@@ -105,9 +115,12 @@ function threatNote(me: RankRow, behind: RankRow) {
       <div class="place">
         <span class="label">{{ label }}</span>
         <div class="big">
-          <span>第</span><b>{{ me.rank }}</b
-          ><span>名</span>
-          <span class="total">/ {{ total }}</span>
+          <b v-if="beyond" class="beyond">{{ cap }} 名以外</b>
+          <template v-else>
+            <span>第</span><b>{{ me.rank }}</b
+            ><span>名</span>
+            <span class="total">/ {{ total }}</span>
+          </template>
           <span v-if="(me.change ?? 0) > 0" class="up">↑{{ me.change }}</span>
           <span v-else-if="(me.change ?? 0) < 0" class="down">↓{{ -me.change! }}</span>
         </div>
@@ -219,7 +232,8 @@ function threatNote(me: RankRow, behind: RankRow) {
     <div v-if="minis.length" class="minis">
       <button v-for="mini in minis" :key="mini.label" class="mini" @click="mini.go">
         <span class="mini-label">{{ mini.label }}</span>
-        <b v-if="mini.rank"
+        <b v-if="mini.rank && mini.cap && mini.rank > mini.cap">{{ mini.cap }} 名以外</b>
+        <b v-else-if="mini.rank"
           >第 {{ mini.rank }}<small v-if="mini.total"> / {{ mini.total }}</small></b
         >
         <b v-else class="none">没上榜</b>
@@ -285,6 +299,11 @@ function threatNote(me: RankRow, behind: RankRow) {
   font-variant-numeric: tabular-nums;
 }
 
+.big b.beyond {
+  font-size: 30px;
+  line-height: 1.1;
+}
+
 .total {
   font-size: 13px;
   color: v-bind("theme.textColor3");
diff --git a/apps/web/src/oj/rank/components/RankPodium.vue b/apps/web/src/oj/rank/components/RankPodium.vue
index f758a35..c4c8a70 100644
--- a/apps/web/src/oj/rank/components/RankPodium.vue
+++ b/apps/web/src/oj/rank/components/RankPodium.vue
@@ -33,8 +33,7 @@ const steps = computed(() =>
     .filter((step): step is { place: number; row: RankRow } => !!step.row),
 )
 
-/** 台阶比原来矮一截：台上多了签名气泡，矮下来赛道才放得进机房第一屏（41 人的班也够） */
-const HEIGHTS: Record<number, number> = { 1: 40, 2: 30, 3: 26 }
+const HEIGHTS: Record<number, number> = { 1: 50, 2: 38, 3: 30 }
 </script>
 
 <template>
@@ -315,7 +314,7 @@ const HEIGHTS: Record<number, number> = { 1: 40, 2: 30, 3: 26 }
   align-items: flex-start;
   justify-content: center;
   gap: 10px;
-  padding-top: 3px;
+  padding-top: 5px;
 }
 
 .place {
diff --git a/apps/web/src/oj/rank/components/RankTrack.vue b/apps/web/src/oj/rank/components/RankTrack.vue
index c9e2823..ac7ac8a 100644
--- a/apps/web/src/oj/rank/components/RankTrack.vue
+++ b/apps/web/src/oj/rank/components/RankTrack.vue
@@ -8,7 +8,8 @@ import RankAvatar from "./RankAvatar.vue"
 
 /**
  * 赛道：每人一根条，条越长做对越多，一样长的先做到的排前面（设计稿 G1 / G2）。
- * 桌面两栏，机房 1366×768 一屏放得下一个班；本年级 / 全服只给前面一段 + 我附近一段，
+ * 桌面两栏，每行 28px（原来挤成 18px 想塞进机房一屏，用户嫌太矮：不必刻意一屏）；
+ * 本年级 / 全服只给前面一段 + 我附近一段，
  * 名次断开的地方折起来，点了再把中间那段要回来。
  *
  * 手机（设计稿「手机版」）：窄屏上条只剩几十像素宽，看不出谁多谁少，所以条改成每一行的
@@ -132,9 +133,32 @@ function fillColor(row: RankRow) {
   return soft.bar
 }
 
+function ratio(row: RankRow) {
+  if (!row.solved) return 0
+  return Math.max(1.5, Math.min(100, (row.solved / Math.max(1, props.scale)) * 100))
+}
+
 function width(row: RankRow) {
-  if (!row.solved) return "0"
-  return `${Math.max(1.5, Math.min(100, (row.solved / Math.max(1, props.scale)) * 100))}%`
+  return `${ratio(row)}%`
+}
+
+function tagOf(row: RankRow) {
+  const id = row.user.id
+  if (id === props.chaseId) return { kind: "chase", label: "前一名" }
+  if (id === props.threatId) return { kind: "threat", label: "后一名" }
+  if (id === props.hotId) return { kind: "hot", label: "进步最大" }
+  return null
+}
+
+/**
+ * 桌面：标签挂在条的末端（原来单占一列 58px，把条挤得只剩几十像素）。条短就挂在条后面，
+ * 条长了后面放不下，就收进条里靠右
+ */
+function tagPlace(row: RankRow) {
+  const r = ratio(row)
+  return r <= 60
+    ? { left: `calc(${r}% + 6px)` }
+    : { right: `calc(${100 - r}% + 4px)`, backgroundColor: theme.value.cardColor }
 }
 
 function menuOf(row: RankRow): DropdownOption[] {
@@ -206,7 +230,7 @@ function onMenu(key: string, row: RankRow) {
           <RankAvatar
             :username="item.row.user.username"
             :avatar="item.row.avatar"
-            :size="16"
+            :size="20"
             :me="item.row.user.id === meId"
           />
           <n-tooltip :disabled="!item.row.mood" :style="{ maxWidth: '300px' }">
@@ -233,6 +257,13 @@ function onMenu(key: string, row: RankRow) {
           </n-tooltip>
           <span class="bar-box">
             <span class="bar" :style="{ width: width(item.row), background: barColor(item.row) }" />
+            <span
+              v-if="tagOf(item.row)"
+              class="tag"
+              :class="tagOf(item.row)!.kind"
+              :style="tagPlace(item.row)"
+              >{{ tagOf(item.row)!.label }}</span
+            >
           </span>
           <span class="solved">{{ item.row.solved }}</span>
           <span class="change">
@@ -242,11 +273,6 @@ function onMenu(key: string, row: RankRow) {
             >
             <span v-else-if="item.row.change === 0" class="flat">—</span>
           </span>
-          <span class="tag-box">
-            <span v-if="item.row.user.id === chaseId" class="tag chase">前一名</span>
-            <span v-else-if="item.row.user.id === threatId" class="tag threat">后一名</span>
-            <span v-else-if="item.row.user.id === hotId" class="tag hot">进步最大</span>
-          </span>
           <n-dropdown
             v-if="teacher"
             trigger="click"
@@ -277,16 +303,16 @@ function onMenu(key: string, row: RankRow) {
 .column {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 2px;
   min-width: 0;
 }
 
 .lane {
-  height: 18px;
+  height: 28px;
   display: flex;
   align-items: center;
-  gap: 7px;
-  font-size: 13px;
+  gap: 8px;
+  font-size: 14px;
 }
 
 .single .column {
@@ -361,8 +387,7 @@ function onMenu(key: string, row: RankRow) {
 .lane.me {
   margin: 0 -8px;
   padding: 0 8px;
-  height: 20px;
-  border-radius: 4px;
+  border-radius: 6px;
   background: rgba(24, 160, 88, 0.12);
 }
 
@@ -373,7 +398,7 @@ function onMenu(key: string, row: RankRow) {
 .rank {
   width: 28px;
   text-align: right;
-  font-size: 12px;
+  font-size: 13px;
   color: v-bind("theme.textColor3");
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
@@ -385,7 +410,7 @@ function onMenu(key: string, row: RankRow) {
 }
 
 .who {
-  width: 108px;
+  width: 116px;
   flex-shrink: 0;
   padding: 0;
   border: 0;
@@ -406,7 +431,7 @@ function onMenu(key: string, row: RankRow) {
 
 .bar-box {
   flex-grow: 1;
-  height: 11px;
+  height: 14px;
   position: relative;
   min-width: 40px;
 }
@@ -420,7 +445,7 @@ function onMenu(key: string, row: RankRow) {
 }
 
 .solved {
-  width: 26px;
+  width: 30px;
   text-align: right;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
@@ -447,10 +472,10 @@ function onMenu(key: string, row: RankRow) {
   color: v-bind("theme.textColor3");
 }
 
-.tag-box {
-  width: 58px;
-  display: flex;
-  flex-shrink: 0;
+.bar-box .tag {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .tag {
@@ -488,7 +513,7 @@ function onMenu(key: string, row: RankRow) {
 }
 
 .gap {
-  height: 22px;
+  height: 30px;
   margin: 4px 0;
   border: 0;
   border-top: 1px dashed v-bind("theme.borderColor");
diff --git a/apps/web/src/oj/rank/list.vue b/apps/web/src/oj/rank/list.vue
index 0184519..d2f0ff5 100644
--- a/apps/web/src/oj/rank/list.vue
+++ b/apps/web/src/oj/rank/list.vue
@@ -37,7 +37,7 @@ import {
 /**
  * 排名页（设计稿「排名重设计」G1–G3，用户要「激发竞争」「图多」「一眼看出排名」）。
  *
- * 第一屏（机房 1366×768）：领奖台 + 全班赛道，右边是「你」和班级对抗；往下是名次走势、
+ * 上面：领奖台 + 全班赛道，右边是「你」和班级对抗（不必刻意塞进机房一屏，用户嫌行太矮）；往下是名次走势、
  * 这周本班、每周冠军。老师不上榜，选班看，每行「⋯」能把怀疑抄代码的学生设成不计入排名。
  */
 const router = useRouter()
@@ -187,6 +187,11 @@ const scale = computed(() => rows.value[1]?.solved || rows.value[0]?.solved || 1
 const hot = computed(() => hottest(rows.value))
 
 const me = computed(() => board.value?.me ?? null)
+/** 全服 100 名以外：「你」卡照样有，但名单上没有你这一行，图例和副标题别再提「你」 */
+const meListed = computed(() => {
+  const b = board.value
+  return !!b?.me && !(b.cap && b.me.rank > b.cap)
+})
 const meId = computed(() => (teacher.value ? undefined : userStore.user?.id))
 const mateClass = computed(() => (board.value?.scope !== "class" ? classContext.value : null))
 
@@ -201,7 +206,7 @@ const subtitle = computed(() => {
   const head = b.scope === "class" ? `${b.total} 人` : `${b.total} 人做对过`
   const capped = !!b.cap && b.total > b.cap
   const part = !b.complete
-    ? b.me
+    ? meListed.value
       ? " · 前面一段 + 你附近一段"
       : ` · 只列前面 ${b.rows.length} 名`
     : capped
@@ -247,6 +252,7 @@ const minis = computed<MiniRank[]>(() => {
       label: `${periodLabel(period.value)} · ${scopeLabel(s)}`,
       rank: other?.me?.rank ?? null,
       total: other ? other.total : null,
+      cap: other?.cap,
       go: () => (scope.value = s),
     })
   }
@@ -432,7 +438,7 @@ async function restore(userId: number) {
             <span class="muted">{{ subtitle }}</span>
             <div class="spacer" />
             <span v-if="!teacher && me" class="legend">
-              <span><i :style="{ background: palette.me }" />你</span>
+              <span v-if="meListed"><i :style="{ background: palette.me }" />你</span>
               <span v-if="board.ahead"><i :style="{ background: palette.chase }" />前一名</span>
               <span v-if="board.behind"><i :style="{ background: palette.threat }" />后一名</span>
               <span v-if="mateClass"><i :style="{ background: palette.mate }" />你们班</span>
@@ -482,6 +488,8 @@ async function restore(userId: number) {
             :behind="board.behind"
             :third="me.rank > 3 ? (podium[2] ?? null) : null"
             :total="board.total"
+            :cap="board.cap"
+            :last-listed="board.lastListed"
             :label="`${scopeLabel(board.scope)} · ${periodLabel(board.period)}`"
             :minis="minis"
             :compact="!isDesktop"
diff --git a/packages/contract/src/ranking.ts b/packages/contract/src/ranking.ts
index 03c24c6..d5b581d 100644
--- a/packages/contract/src/ranking.ts
+++ b/packages/contract/src/ranking.ts
@@ -71,6 +71,12 @@ export const rankBoardSchema = z.object({
    * 全服一千五百多人，展开全量会把页面卡死；100 名以外不列，「你」卡上照样报名次
    */
   cap: z.number().int().positive().nullable(),
+  /**
+   * 我排在 `cap` 名以外时：名单上最后那一位（第 `cap` 名），给「再做对几道进前 100」用。
+   * 这时 `ahead` / `behind` / `trend` 都是 null —— 100 名以外只说「100 名以外」，
+   * 不报具体名次，也就没有前一名、后一名可说（用户 2026-10-10 定的）。其余情况为 null
+   */
+  lastListed: rankRowSchema.nullable(),
   /** 我在这张榜上的那一行。没登录、老师、不计入排名、或者这段时间一道没做对时为 null */
   me: rankRowSchema.nullable(),
   /** 名次紧挨在我前面、后面的人 */