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>

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

@@ -8,7 +8,13 @@ import { useRankPalette } from "../palette"
  * 班级对抗：全服各班这学期人均做对，绿字是这周人均涨了多少。按人均比，因为班级人数从
  * 十来个到五十几个都有。列前 7 个班，自己的班不在里面就补在最后。
  */
-const props = defineProps<{ items: ClassBattleItem[]; mine: string | null; teacher?: boolean }>()
+const props = defineProps<{
+  items: ClassBattleItem[]
+  mine: string | null
+  teacher?: boolean
+  /** 放在手机页签卡里：不要自己的边框和标题 */
+  bare?: boolean
+}>()
 
 const theme = useThemeVars()
 const palette = useRankPalette()
@@ -44,9 +50,9 @@ function shortLabel(className: string) {
 </script>
 
 <template>
-  <div class="battle">
+  <div class="battle" :class="{ bare }">
     <div class="title">
-      <b>班级对抗</b><span class="muted">人均做对 · 全服 · 绿字是这周涨的</span>
+      <b v-if="!bare">班级对抗</b><span class="muted">人均做对 · 全服 · 绿字是这周涨的</span>
     </div>
     <div
       v-for="item in shown"
@@ -84,6 +90,12 @@ function shortLabel(className: string) {
   background: v-bind("theme.cardColor");
 }
 
+.battle.bare {
+  padding: 0;
+  border: 0;
+  background: none;
+}
+
 .title {
   display: flex;
   align-items: baseline;

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

@@ -25,6 +25,8 @@ const props = defineProps<{
   total: number
   label: string
   minis: MiniRank[]
+  /** 手机：对手的说明换到名字下面一行，别被截断 */
+  compact?: boolean
 }>()
 
 const theme = useThemeVars()
@@ -58,7 +60,7 @@ function threatNote(me: RankRow, behind: RankRow) {
 </script>
 
 <template>
-  <div class="me-card">
+  <div class="me-card" :class="{ compact }">
     <div class="head">
       <RankAvatar :username="me.user.username" :avatar="me.avatar" :size="46" me />
       <div class="place">
@@ -191,6 +193,18 @@ function threatNote(me: RankRow, behind: RankRow) {
   min-width: 0;
 }
 
+.compact .rival {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  align-items: center;
+  row-gap: 1px;
+}
+
+.compact .note {
+  grid-column: 3;
+  white-space: normal;
+}
+
 .rival-name {
   flex-shrink: 0;
   max-width: 120px;

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

@@ -10,6 +10,10 @@ import RankAvatar from "./RankAvatar.vue"
  * 赛道：每人一根条，条越长做对越多，一样长的先做到的排前面（设计稿 G1 / G2）。
  * 桌面两栏，机房 1366×768 一屏放得下一个班；本年级 / 全服只给前面一段 + 我附近一段，
  * 名次断开的地方折起来，点了再把中间那段要回来。
+ *
+ * 手机（设计稿「手机版」）：窄屏上条只剩几十像素宽，看不出谁多谁少，所以条改成每一行的
+ * 底色；默认只列前几行和你附近几行，「看全班 N 人」点开。换范围 / 时间段时父组件换 key
+ * 重新挂载，折叠状态跟着复位。
  */
 const props = defineProps<{
   rows: RankRow[]
@@ -25,6 +29,8 @@ const props = defineProps<{
   mateClass?: string | null
   teacher?: boolean
   expanding?: boolean
+  /** 手机上只有末尾一段折起来时按钮上的字，比如「看全班 39 人」 */
+  wholeLabel?: string
 }>()
 const emit = defineEmits<{
   open: [username: string]
@@ -37,23 +43,59 @@ const theme = useThemeVars()
 const palette = useRankPalette()
 const { isDesktop } = useBreakpoints()
 
-type Item =
+type Item = { kind: "row"; row: RankRow } | { kind: "gap"; from: number; to: number }
-  | { kind: "row"; row: RankRow }
+
-  | { kind: "gap"; from: number; to: number; tail?: boolean; mine?: boolean }
+/** 手机默认列几行：领奖台下面的前 5 行，加你上下各 2 行；没有你就列前 10 行 */
+const PHONE_HEAD = 5
+const PHONE_AROUND = 2
+const PHONE_HEAD_NO_ME = 10
+
+const collapsed = ref(true)
+
+const meRank = computed(() => props.rows.find((row) => row.user.id === props.meId)?.rank)
+
+const visible = computed(() => {
+  if (isDesktop.value || !collapsed.value) return props.rows
+  const mine = meRank.value
+  return props.rows.filter((row, index) =>
+    mine
+      ? index < PHONE_HEAD || Math.abs(row.rank - mine) <= PHONE_AROUND
+      : index < PHONE_HEAD_NO_ME,
+  )
+})
 
 const items = computed<Item[]>(() => {
   const list: Item[] = []
   let last = props.rows[0] ? props.rows[0].rank - 1 : 0
-  for (const row of props.rows) {
+  for (const row of visible.value) {
     if (row.rank > last + 1) list.push({ kind: "gap", from: last + 1, to: row.rank - 1 })
     list.push({ kind: "row", row })
     last = row.rank
   }
-  if (!props.complete && last < props.total)
+  const end = props.complete ? (props.rows.at(-1)?.rank ?? last) : props.total
-    list.push({ kind: "gap", from: last + 1, to: props.total, tail: true })
+  if (last < end) list.push({ kind: "gap", from: last + 1, to: end })
   return list
 })
 
+/** 手机上只有末尾一段折起来（本班的常见情况），按钮就说「看全班 N 人」 */
+function gapText(item: { from: number; to: number }) {
+  const gaps = items.value.filter((entry) => entry.kind === "gap")
+  if (
+    !isDesktop.value &&
+    props.wholeLabel &&
+    gaps.length === 1 &&
+    item.to === props.rows.at(-1)?.rank
+  )
+    return `${props.wholeLabel} ▾`
+  return `第 ${item.from}–${item.to} 名 · ${item.to - item.from + 1} 人 · 展开 ▾`
+}
+
+/** 展开：手上的数据够就直接摊开，不够（本年级 / 全服中间那段）再找父组件要全量 */
+function expandGap() {
+  collapsed.value = false
+  if (!props.complete) emit("expand")
+}
+
 /** 两栏：前一半、后一半。手机一栏 */
 const columns = computed(() => {
   if (!isDesktop.value) return [items.value]
@@ -70,6 +112,17 @@ function barColor(row: RankRow) {
   return palette.value.bar
 }
 
+/** 手机：条做成整行的底色，颜色淡一档，字压在上面也看得清 */
+function fillColor(row: RankRow) {
+  const id = row.user.id
+  const soft = palette.value.soft
+  if (id === props.meId) return soft.me
+  if (id === props.chaseId) return soft.chase
+  if (id === props.threatId) return soft.threat
+  if (props.mateClass && row.className === props.mateClass) return soft.mate
+  return soft.bar
+}
+
 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))}%`
@@ -93,14 +146,45 @@ function onMenu(key: string, row: RankRow) {
         v-for="item in column"
         :key="item.kind === 'row' ? item.row.user.id : `gap${item.from}`"
       >
-        <button
+        <button v-if="item.kind === 'gap'" class="gap" :disabled="expanding" @click="expandGap">
-          v-if="item.kind === 'gap'"
+          {{ gapText(item) }}
-          class="gap"
-          :disabled="expanding"
-          @click="emit('expand')"
-        >
-          第 {{ item.from }}–{{ item.to }} 名 · {{ item.to - item.from + 1 }} 人 · 展开 ▾
         </button>
+        <div
+          v-else-if="!isDesktop"
+          class="prow"
+          :class="{ me: item.row.user.id === meId, zero: !item.row.solved }"
+        >
+          <span class="fill" :style="{ width: width(item.row), background: fillColor(item.row) }" />
+          <span class="rank">{{ item.row.solved ? item.row.rank : "—" }}</span>
+          <RankAvatar
+            :username="item.row.user.username"
+            :avatar="item.row.avatar"
+            :size="20"
+            :me="item.row.user.id === meId"
+          />
+          <button class="who" @click="emit('open', item.row.user.username)">
+            <UserName :username="item.row.user.username" />
+          </button>
+          <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 class="solved">{{ item.row.solved }}</span>
+          <span class="change">
+            <span v-if="(item.row.change ?? 0) > 0" class="up">↑{{ item.row.change }}</span>
+            <span v-else-if="(item.row.change ?? 0) < 0" class="down"
+              >↓{{ -item.row.change! }}</span
+            >
+            <span v-else-if="item.row.change === 0" class="flat">—</span>
+          </span>
+          <n-dropdown
+            v-if="teacher"
+            trigger="click"
+            :options="menu"
+            @select="(key: string) => onMenu(key, item.row)"
+          >
+            <button class="more" aria-label="更多">⋯</button>
+          </n-dropdown>
+        </div>
         <div v-else class="lane" :class="{ me: item.row.user.id === meId, zero: !item.row.solved }">
           <span class="rank">{{ item.row.solved ? item.row.rank : "—" }}</span>
           <RankAvatar
@@ -170,16 +254,62 @@ function onMenu(key: string, row: RankRow) {
   font-size: 13px;
 }
 
-.single .lane {
+.single .column {
-  height: 26px;
+  gap: 3px;
 }
 
-.single .who {
+.prow {
-  width: 96px;
+  position: relative;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px 0 4px;
+  border-radius: 6px;
+  overflow: hidden;
+  font-size: 14px;
 }
 
-.single .tag-box {
+.prow > :not(.fill) {
+  position: relative;
+}
+
+.prow.me {
+  box-shadow: inset 0 0 0 1.5px #18a058;
+}
+
+.prow.zero {
+  opacity: 0.55;
+}
+
+.fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: 6px;
+}
+
+.prow .who {
   width: auto;
+  flex: 1;
+}
+
+.prow .rank {
+  width: 24px;
+}
+
+.prow .change {
+  width: 30px;
+}
+
+.single .gap {
+  height: 34px;
+  margin: 2px 0 0;
+  border: 1px dashed v-bind("theme.borderColor");
+  border-radius: 6px;
+  font-size: 13px;
+  color: #0c7a43;
 }
 
 .lane.me {

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

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { RankRow } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+import UserName from "shared/components/UserName.vue"
+import { useRankPalette } from "../palette"
+import RankAvatar from "./RankAvatar.vue"
+
+/** 这周本班前 5 名（做对过新题的），每周一清零 */
+const props = defineProps<{ rows: RankRow[]; meId?: number; loaded: boolean }>()
+defineEmits<{ open: [username: string] }>()
+
+const theme = useThemeVars()
+const palette = useRankPalette()
+
+const top = computed(() => props.rows.filter((row) => row.solved > 0).slice(0, 5))
+const scale = computed(() => top.value[0]?.solved || 1)
+</script>
+
+<template>
+  <div class="week-top">
+    <div v-for="row in top" :key="row.user.id" class="row" :class="{ me: row.user.id === meId }">
+      <span
+        class="medal"
+        :style="
+          row.rank <= 3
+            ? {
+                color: palette.medal[row.rank - 1]!.color,
+                background: palette.medal[row.rank - 1]!.background,
+              }
+            : undefined
+        "
+        >{{ row.rank }}</span
+      >
+      <RankAvatar
+        :username="row.user.username"
+        :avatar="row.avatar"
+        :size="18"
+        :me="row.user.id === meId"
+      />
+      <button class="who" @click="$emit('open', row.user.username)">
+        <UserName :username="row.user.username" />
+      </button>
+      <span class="bar-box">
+        <span
+          class="bar"
+          :style="{
+            width: `${(row.solved / scale) * 100}%`,
+            background: row.user.id === meId ? palette.me : palette.bar,
+          }"
+        />
+      </span>
+      <b class="num">{{ row.solved }}</b>
+    </div>
+    <span v-if="loaded && !top.length" class="muted"
+      >这周还没人做对新题，现在做对 1 道就是第一</span
+    >
+  </div>
+</template>
+
+<style scoped>
+.week-top {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  height: 26px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.row.me {
+  margin: 0 -8px;
+  padding: 0 8px;
+  border-radius: 4px;
+  background: rgba(24, 160, 88, 0.12);
+}
+
+.medal {
+  width: 22px;
+  height: 22px;
+  border-radius: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+  color: v-bind("theme.textColor2");
+}
+
+.who {
+  width: 110px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  cursor: pointer;
+  display: flex;
+  min-width: 0;
+}
+
+.bar-box {
+  flex-grow: 1;
+  height: 9px;
+  position: relative;
+}
+
+.bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: 2px 5px 5px 2px;
+}
+
+.num {
+  font-variant-numeric: tabular-nums;
+}
+
+.muted {
+  font-size: 12px;
+  color: v-bind("theme.textColor3");
+}
+</style>

apps/web/src/oj/rank/list.vue

@@ -16,12 +16,13 @@ import { useConfigStore } from "shared/store/config"
 import { useUserStore } from "shared/store/user"
 import { USERNAME_CLASS_RE } from "utils/constants"
 import { parseTime } from "utils/functions"
+import ChampionList from "./components/ChampionList.vue"
 import ClassBattle from "./components/ClassBattle.vue"
-import RankAvatar from "./components/RankAvatar.vue"
 import RankMe, { type MiniRank } from "./components/RankMe.vue"
 import RankPodium from "./components/RankPodium.vue"
 import RankTrack from "./components/RankTrack.vue"
 import RankTrend from "./components/RankTrend.vue"
+import WeekTop from "./components/WeekTop.vue"
 import { useRankPalette } from "./palette"
 import {
   groupTitle,
@@ -190,6 +191,14 @@ const subtitle = computed(() => {
       : ` · 只列前面 ${b.rows.length} 名`
   return `${head} · 一样多的，先做到的在前${part}`
 })
+/** 手机上标题旁边那句：只说从哪天起、跟什么时候比 */
+const shortRule = computed(() => {
+  const b = board.value
+  if (!b) return ""
+  const from = b.start ? `${parseTime(b.start, "M月D日")}起` : "全部历史"
+  return `${from} · ↑↓ 比${b.period === "week" ? "今天早上" : "周一"}`
+})
+
 const ruleText = computed(() => {
   const b = board.value
   if (!b) return ""
@@ -235,11 +244,6 @@ const teacherClassOptions = computed(() => {
 
 const myBattle = computed(() => battle.value.find((item) => item.className === classContext.value))
 
-/** 这周本班：前 5 名（做对过的） */
-const weekTop = computed(() =>
-  (weekBoard.value?.rows ?? []).filter((row) => row.solved > 0).slice(0, 5),
-)
-const weekScale = computed(() => weekTop.value[0]?.solved || 1)
 const daysLeft = computed(() => {
   const start = weekBoard.value?.start
   if (!start) return 0
@@ -263,6 +267,26 @@ const trendLines = computed(() => {
   ]
 })
 
+const weekTitle = computed(() =>
+  teacher.value && classContext.value ? `这周 · ${classLabel(classContext.value)}` : "这周本班",
+)
+
+/** 手机上的页签：没有班就只剩班级对抗，没有走势（这周 / 老师）就不给走势那页 */
+const phoneTabs = computed(() => [
+  { key: "battle", label: "班级对抗" },
+  ...(board.value?.trend && me.value ? [{ key: "trend", label: "名次走势" }] : []),
+  ...(classContext.value
+    ? [
+        { key: "week", label: teacher.value ? "这周" : "这周本班" },
+        { key: "champions", label: "每周冠军" },
+      ]
+    : []),
+])
+const phoneTab = ref("battle")
+watch(phoneTabs, (tabs) => {
+  if (!tabs.some((tab) => tab.key === phoneTab.value)) phoneTab.value = "battle"
+})
+
 function open(username: string) {
   router.push({ path: "/user", query: { name: username } })
 }
@@ -294,16 +318,15 @@ async function restore(userId: number) {
   load()
   loadBattle()
 }
-
-function weekLabel(start: string) {
-  return `${parseTime(start, "M月D日")}那周`
-}
 </script>
 
 <template>
   <div class="rank-page">
-    <div class="toolbar">
+    <div class="toolbar" :class="{ single: !isDesktop }">
+      <div class="title">
         <h2>排名</h2>
+        <span v-if="!isDesktop" class="rule">{{ shortRule }}</span>
+      </div>
       <div class="seg" role="group" aria-label="范围">
         <button
           v-for="option in SCOPE_OPTIONS"
@@ -335,8 +358,10 @@ function weekLabel(start: string) {
         placeholder="选班"
         :options="teacherClassOptions"
       />
+      <template v-if="isDesktop">
         <div class="spacer" />
         <span class="rule">{{ ruleText }}</span>
+      </template>
     </div>
 
     <div class="main" :class="{ single: !isDesktop }">
@@ -361,7 +386,9 @@ function weekLabel(start: string) {
             @open="open"
           />
           <RankTrack
+            :key="`${board.scope}|${board.period}|${board.className}`"
             :rows="trackRows"
+            :whole-label="board.scope === 'class' ? `看全班 ${board.total} 人` : undefined"
             :total="board.total"
             :complete="board.complete"
             :scale="scale"
@@ -392,6 +419,7 @@ function weekLabel(start: string) {
             :total="board.total"
             :label="`${scopeLabel(board.scope)} · ${periodLabel(board.period)}`"
             :minis="minis"
+            :compact="!isDesktop"
           />
           <div v-else-if="board.hidden" class="note-card">
             <b>你现在不计入排名</b>
@@ -432,10 +460,7 @@ function weekLabel(start: string) {
         <ClassBattle v-if="isDesktop" :items="battle" :mine="classContext" :teacher="teacher" />
       </aside>
     </div>
-    <!-- 手机上「你」那张卡提到赛道前面了，班级对抗放到赛道后面，别把赛道挤到第三屏 -->
+    <div v-if="isDesktop && classContext" class="below">
-    <ClassBattle v-if="!isDesktop" :items="battle" :mine="classContext" :teacher="teacher" />
-
-    <div v-if="classContext" class="below" :class="{ single: !isDesktop }">
       <div v-if="board?.trend && me" class="card">
         <div class="card-title">
           <b>我和对手的名次</b><span class="muted">每周日晚上 · 越高越好</span>
@@ -444,96 +469,64 @@ function weekLabel(start: string) {
       </div>
       <div class="card">
         <div class="card-title">
-          <b>{{ teacher && classContext ? `这周 · ${classLabel(classContext)}` : "这周本班" }}</b>
+          <b>{{ weekTitle }}</b>
           <span class="muted">还剩 {{ daysLeft }} 天 · 下周一清零</span>
         </div>
-        <div
+        <WeekTop :rows="weekBoard?.rows ?? []" :me-id="meId" :loaded="!!weekBoard" @open="open" />
-          v-for="row in weekTop"
-          :key="row.user.id"
-          class="week-row"
-          :class="{ me: row.user.id === meId }"
-        >
-          <span
-            class="medal"
-            :style="
-              row.rank <= 3
-                ? {
-                    color: palette.medal[row.rank - 1]!.color,
-                    background: palette.medal[row.rank - 1]!.background,
-                  }
-                : undefined
-            "
-            >{{ row.rank }}</span
-          >
-          <RankAvatar
-            :username="row.user.username"
-            :avatar="row.avatar"
-            :size="18"
-            :me="row.user.id === meId"
-          />
-          <button class="who" @click="open(row.user.username)">
-            <UserName :username="row.user.username" />
-          </button>
-          <span class="bar-box">
-            <span
-              class="bar"
-              :style="{
-                width: `${(row.solved / weekScale) * 100}%`,
-                background: row.user.id === meId ? palette.me : palette.bar,
-              }"
-            />
-          </span>
-          <b class="num">{{ row.solved }}</b>
-        </div>
-        <span v-if="weekBoard && !weekTop.length" class="muted">
-          这周还没人做对新题，现在做对 1 道就是第一
-        </span>
       </div>
       <div class="card">
         <div class="card-title">
           <b>每周冠军</b><span class="muted">本班 · 每周一清零后重新比</span>
         </div>
-        <div v-for="champion in champions" :key="champion.weekStart" class="champion">
+        <ChampionList
-          <span class="muted week">{{ weekLabel(champion.weekStart) }}</span>
+          :champions="champions"
-          <svg
+          :hot="hot"
-            width="16"
+          :since="period === 'week' ? '今天' : '这周'"
-            height="16"
+          :me-id="meId"
-            viewBox="0 0 24 24"
+          @open="open"
-            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="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>
-        <div v-if="hot" class="champion hot-line">
+
-          <span class="hot-tag">冲得最猛</span>
+    <!-- 手机：赛道下面四块收成一张页签卡（设计稿「手机版」），不然整页四屏多 -->
-          <RankAvatar
+    <div v-if="!isDesktop" class="card tabs-card">
-            :username="hot.user.username"
+      <div class="tabs" role="tablist">
-            :avatar="hot.avatar"
+        <button
-            :size="20"
+          v-for="tab in phoneTabs"
-            :me="hot.user.id === meId"
+          :key="tab.key"
-          />
+          role="tab"
-          <button class="who" @click="open(hot.user.username)">
+          :aria-selected="phoneTab === tab.key"
-            <UserName :username="hot.user.username" />
+          :class="{ on: phoneTab === tab.key }"
-          </button>
+          @click="phoneTab = tab.key"
-          <span class="muted"
-            >{{ period === "week" ? "今天" : "这周" }}升了 {{ hot.change }} 名</span
         >
+          {{ tab.label }}
+        </button>
       </div>
+      <div class="tab-body">
+        <ClassBattle
+          v-if="phoneTab === 'battle'"
+          bare
+          :items="battle"
+          :mine="classContext"
+          :teacher="teacher"
+        />
+        <RankTrend
+          v-else-if="phoneTab === 'trend' && board?.trend"
+          :trend="board.trend"
+          :lines="trendLines"
+        />
+        <template v-else-if="phoneTab === 'week'">
+          <span class="muted">{{ weekTitle }} · 还剩 {{ daysLeft }} 天 · 下周一清零</span>
+          <WeekTop :rows="weekBoard?.rows ?? []" :me-id="meId" :loaded="!!weekBoard" @open="open" />
+        </template>
+        <ChampionList
+          v-else-if="phoneTab === 'champions'"
+          :champions="champions"
+          :hot="hot"
+          :since="period === 'week' ? '今天' : '这周'"
+          :me-id="meId"
+          @open="open"
+        />
       </div>
     </div>
   </div>
@@ -614,8 +607,7 @@ function weekLabel(start: string) {
   align-items: start;
 }
 
-.main.single,
+.main.single {
-.below.single {
   grid-template-columns: minmax(0, 1fr);
 }
 
@@ -759,93 +751,66 @@ function weekLabel(start: string) {
   margin-bottom: 2px;
 }
 
-.week-row,
+.tabs-card {
-.champion {
-  height: 26px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-}
-
-.week-row.me {
-  margin: 0 -8px;
-  padding: 0 8px;
-  border-radius: 4px;
-  background: rgba(24, 160, 88, 0.12);
-}
-
-.medal {
-  width: 22px;
-  height: 22px;
-  border-radius: 11px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 700;
-  flex-shrink: 0;
-  color: v-bind("theme.textColor2");
-}
-
-.who {
   padding: 0;
+  gap: 0;
+  overflow: hidden;
+}
+
+.tabs {
+  display: flex;
+  border-bottom: 1px solid v-bind("theme.dividerColor");
+}
+
+.tabs button {
+  flex: 1;
+  height: 38px;
   border: 0;
+  border-bottom: 2px solid transparent;
   background: none;
   font: inherit;
+  font-size: 13px;
+  color: v-bind("theme.textColor2");
   cursor: pointer;
-  display: flex;
-  min-width: 0;
-  flex-shrink: 1;
 }
 
-.week-row .who {
+.tabs button.on {
-  width: 110px;
+  color: #18a058;
-  flex-shrink: 0;
-}
-
-.bar-box {
-  flex-grow: 1;
-  height: 9px;
-  position: relative;
-}
-
-.bar {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: 2px 5px 5px 2px;
-}
-
-.num {
-  font-variant-numeric: tabular-nums;
-}
-
-.week {
-  width: 78px;
-  flex-shrink: 0;
-}
-
-.champion .who {
-  flex-grow: 1;
-}
-
-.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;
+  border-bottom-color: #18a058;
-  background: #c76a12;
+}
-  border-radius: 3px;
+
-  padding: 0 5px;
+.tab-body {
-  line-height: 16px;
+  padding: 10px 12px 12px;
-  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* 手机：标题一行，两组开关各占满一行，手指好点 */
+.toolbar.single {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.title {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.toolbar.single .seg {
+  display: flex;
+  height: 34px;
+}
+
+.toolbar.single .seg button {
+  flex: 1;
+  font-size: 14px;
+}
+
+.toolbar.single .class-select {
+  width: 100%;
 }
 </style>

apps/web/src/oj/rank/palette.ts

@@ -13,6 +13,14 @@ export function useRankPalette() {
     threat: "#c76a12",
     mate: isDark.value ? "#2f6b47" : "#a8dcbd",
     bar: isDark.value ? "#4a525c" : "#c9d3dc",
+    /** 手机上条是整行底色，要淡到字压在上面看得清 */
+    soft: {
+      me: isDark.value ? "rgba(24,160,88,0.32)" : "#cdebd9",
+      chase: isDark.value ? "rgba(47,111,208,0.32)" : "#d6e3f7",
+      threat: isDark.value ? "rgba(199,106,18,0.32)" : "#f7e0cb",
+      mate: isDark.value ? "rgba(24,160,88,0.16)" : "#e2f3e9",
+      bar: isDark.value ? "rgba(255,255,255,0.08)" : "#eef1f4",
+    },
     medal: [
       {
         color: isDark.value ? "#e2b33b" : "#9a6700",