fix(排名): 手机上的排名不再是四屏长的一栏，条变成每行底色、只列你附近几行，下面四块收成页签

- 条形改成整行的底色：窄屏上原来只剩 30px 宽的条看不出谁多谁少
- 默认只列领奖台下的前 5 行和你上下各 2 行，「看全班 39 人」点开；本年级 / 全服折起来的段点开再取全量
- 「你」那张卡：对手的说明换到名字下面一行，不再被截断
- 范围、时间两组开关各占满一行；班级对抗、名次走势、这周本班、每周冠军收成一张页签卡
- 有「追你」标签的那行数字不再错位

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

apps/web/src/oj/rank/components/ChampionList.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { RankRow, WeeklyChampion } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+import UserName from "shared/components/UserName.vue"
+import { parseTime } from "utils/functions"
+import RankAvatar from "./RankAvatar.vue"
+
+/** 本班最近几周的每周冠军，底下再挂这张榜上「冲得最猛」的那个人 */
+defineProps<{
+  champions: WeeklyChampion[]
+  hot: RankRow | null
+  /** 「这周升了」还是「今天升了」：这周的榜比的是今天早上 */
+  since: string
+  meId?: number
+}>()
+defineEmits<{ open: [username: string] }>()
+
+const theme = useThemeVars()
+
+function weekLabel(start: string) {
+  return `${parseTime(start, "M月D日")}那周`
+}
+</script>
+
+<template>
+  <div class="champions">
+    <div v-for="champion in champions" :key="champion.weekStart" class="row">
+      <span class="muted week">{{ weekLabel(champion.weekStart) }}</span>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="#f2c94c"
+        stroke="#9a6700"
+        stroke-width="1.6"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z" />
+      </svg>
+      <RankAvatar
+        :username="champion.user.username"
+        :avatar="champion.avatar"
+        :size="20"
+        :me="champion.user.id === meId"
+      />
+      <button class="who" @click="$emit('open', champion.user.username)">
+        <UserName :username="champion.user.username" />
+      </button>
+      <span class="muted num">{{ champion.solved }} 道</span>
+    </div>
+    <span v-if="!champions.length" class="muted">最近几周还没有冠军</span>
+    <div v-if="hot" class="row hot-line">
+      <span class="hot-tag">冲得最猛</span>
+      <RankAvatar
+        :username="hot.user.username"
+        :avatar="hot.avatar"
+        :size="20"
+        :me="hot.user.id === meId"
+      />
+      <button class="who" @click="$emit('open', hot.user.username)">
+        <UserName :username="hot.user.username" />
+      </button>
+      <span class="muted">{{ since }}升了 {{ hot.change }} 名</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.champions {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  height: 26px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.muted {
+  font-size: 12px;
+  color: v-bind("theme.textColor3");
+}
+
+.week {
+  width: 78px;
+  flex-shrink: 0;
+}
+
+.who {
+  flex-grow: 1;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  cursor: pointer;
+  display: flex;
+  min-width: 0;
+}
+
+.num {
+  font-variant-numeric: tabular-nums;
+}
+
+.hot-line {
+  margin-top: 4px;
+  padding-top: 8px;
+  height: auto;
+  border-top: 1px solid v-bind("theme.dividerColor");
+}
+
+.hot-tag {
+  font-size: 11px;
+  font-weight: 600;
+  color: #ffffff;
+  background: #c76a12;
+  border-radius: 3px;
+  padding: 0 5px;
+  line-height: 16px;
+  white-space: nowrap;
+}
+</style>