From 8b8a9d89f0c0b4b8403fd63cbadddba7ab4d4f26 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sat, 10 Oct 2026 13:09:02 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=92=E5=90=8D):=20=E6=A1=8C=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=8A=E6=9D=A1=E5=A4=AA=E7=9F=AD=EF=BC=8C=E5=8E=8B=E5=9C=A8?=
 =?UTF-8?q?=E4=B8=8A=E9=9D=A2=E7=9A=84=E3=80=8C=E5=89=8D=E4=B8=80=E5=90=8D?=
 =?UTF-8?q?=E3=80=8D=E3=80=8C=E8=BF=9B=E6=AD=A5=E6=9C=80=E5=A4=A7=E3=80=8D?=
 =?UTF-8?q?=E6=8A=8A=E6=9D=A1=E6=95=B4=E4=B8=AA=E7=9B=96=E4=BD=8F=EF=BC=9B?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E4=BB=8E=E6=9D=A1=E4=B8=8A=E6=8B=BF=E6=8E=89?=
 =?UTF-8?q?=EF=BC=8C=E8=BF=9B=E6=AD=A5=E6=9C=80=E5=A4=A7=E6=94=B9=E6=88=90?=
 =?UTF-8?q?=E6=B6=A8=E8=B7=8C=E9=82=A3=E4=B8=80=E6=A0=BC=E7=9A=84=E6=A9=99?=
 =?UTF-8?q?=E8=89=B2=E5=BE=BD=E7=AB=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/oj/rank/components/RankTrack.vue | 50 ++++++-------------
 apps/web/src/oj/rank/list.vue                 | 23 +++++++--
 2 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/oj/rank/components/RankTrack.vue b/apps/web/src/oj/rank/components/RankTrack.vue
index 84d5921..143c925 100644
--- a/apps/web/src/oj/rank/components/RankTrack.vue
+++ b/apps/web/src/oj/rank/components/RankTrack.vue
@@ -16,6 +16,9 @@ import RankAvatar from "./RankAvatar.vue"
  * 底色；默认只列前几行和你附近几行，「看全班 N 人」点开。换范围 / 时间段时父组件换 key
  * 重新挂载，折叠状态跟着复位。
  *
+ * 桌面的条只有百来像素（老师那边多一个「⋯」，七十来像素），压不下文字标签：「前一名」
+ * 「后一名」靠条的颜色和图例认，「进步最大」改成涨跌那一格的橙底徽章。手机每行有空，标签照旧。
+ *
  * 个性签名（设计稿「签名 A」）：桌面一行只有一百来像素的条，放不下一句话，所以有签名的
  * 名字后面挂一个引号，指上去看；手机每行本来就有空，签名直接写在名字后面。
  */
@@ -142,26 +145,6 @@ function width(row: RankRow) {
   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)
-  if (r <= 60) return { left: `calc(${r}% + 6px)` }
-  const inside = { right: `calc(${100 - r}% + 4px)` }
-  return tagOf(row)?.kind === "hot" ? inside : { ...inside, backgroundColor: theme.value.cardColor }
-}
-
 function menuOf(row: RankRow): DropdownOption[] {
   return [
     { label: "看他的提交", key: "submissions" },
@@ -258,17 +241,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">
-            <span v-if="(item.row.change ?? 0) > 0" class="up">↑{{ item.row.change }}</span>
+            <span v-if="item.row.user.id === hotId" class="up hot" title="进步最大"
+              >↑{{ item.row.change }}</span
+            >
+            <span v-else-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
             >
@@ -465,6 +444,15 @@ function onMenu(key: string, row: RankRow) {
   font-weight: 600;
 }
 
+.up.hot {
+  color: #ffffff;
+  background: #c76a12;
+  border-radius: 3px;
+  padding: 0 4px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
 .down {
   color: v-bind("theme.errorColor");
 }
@@ -473,12 +461,6 @@ function onMenu(key: string, row: RankRow) {
   color: v-bind("theme.textColor3");
 }
 
-.bar-box .tag {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
 .tag {
   font-size: 12px;
   font-weight: 600;
diff --git a/apps/web/src/oj/rank/list.vue b/apps/web/src/oj/rank/list.vue
index e5cbbce..08e6cb5 100644
--- a/apps/web/src/oj/rank/list.vue
+++ b/apps/web/src/oj/rank/list.vue
@@ -432,11 +432,14 @@ async function restore(userId: number) {
             <b>{{ title }}</b>
             <span class="muted">{{ subtitle }}</span>
             <div class="spacer" />
-            <span v-if="!teacher && me" class="legend">
-              <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>
+            <span v-if="(!teacher && me) || hot" class="legend">
+              <template v-if="!teacher && me">
+                <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>
+              </template>
+              <span v-if="hot"><b class="hot-chip">↑</b>进步最大</span>
             </span>
           </div>
           <RankPodium
@@ -759,6 +762,16 @@ async function restore(userId: number) {
   gap: 4px;
 }
 
+/* 和赛道里涨跌那一格的徽章同一个样子 */
+.legend .hot-chip {
+  font-size: 12px;
+  color: #ffffff;
+  background: #c76a12;
+  border-radius: 3px;
+  padding: 0 4px;
+  line-height: 16px;
+}
+
 .legend i {
   width: 14px;
   height: 8px;