From aba3767fc1fdf9fecca29509667149cdadc46442 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sat, 10 Oct 2026 14:07:31 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=92=E5=90=8D):=20=E9=A2=98=E6=95=B0?=
 =?UTF-8?q?=E4=B8=80=E6=A0=B7=E6=97=B6=E4=B8=80=E5=88=97=E7=81=B0=E8=89=B2?=
 =?UTF-8?q?=E7=9F=AD=E6=9D=A1=E5=83=8F=E6=B2=A1=E5=8A=A0=E8=BD=BD=E5=AE=8C?=
 =?UTF-8?q?=E7=9A=84=E5=8D=A0=E4=BD=8D=E5=9D=97=EF=BC=8C=E7=9C=8B=E4=B8=8D?=
 =?UTF-8?q?=E5=87=BA=E6=98=AF=E4=BB=80=E4=B9=88?=
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 |  3 ++-
 apps/web/src/oj/rank/list.vue                 | 17 ++++++++++++++++-
 apps/web/src/oj/rank/palette.ts               |  5 +++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/oj/rank/components/RankTrack.vue b/apps/web/src/oj/rank/components/RankTrack.vue
index 143c925..2f89f7e 100644
--- a/apps/web/src/oj/rank/components/RankTrack.vue
+++ b/apps/web/src/oj/rank/components/RankTrack.vue
@@ -239,7 +239,7 @@ function onMenu(key: string, row: RankRow) {
             </template>
             {{ item.row.mood }}
           </n-tooltip>
-          <span class="bar-box">
+          <span class="bar-box" :style="{ background: palette.track }">
             <span class="bar" :style="{ width: width(item.row), background: barColor(item.row) }" />
           </span>
           <span class="solved">{{ item.row.solved }}</span>
@@ -414,6 +414,7 @@ function onMenu(key: string, row: RankRow) {
   height: 16px;
   position: relative;
   min-width: 40px;
+  border-radius: 2px 6px 6px 2px;
 }
 
 .bar {
diff --git a/apps/web/src/oj/rank/list.vue b/apps/web/src/oj/rank/list.vue
index 08e6cb5..2c32a46 100644
--- a/apps/web/src/oj/rank/list.vue
+++ b/apps/web/src/oj/rank/list.vue
@@ -432,7 +432,12 @@ async function restore(userId: number) {
             <b>{{ title }}</b>
             <span class="muted">{{ subtitle }}</span>
             <div class="spacer" />
-            <span v-if="(!teacher && me) || hot" class="legend">
+            <span v-if="isDesktop || (!teacher && me) || hot" class="legend">
+              <span v-if="isDesktop"
+                ><i class="bar-key" :style="{ background: palette.track }"
+                  ><i :style="{ background: palette.bar }" /></i
+                >做出的题数</span
+              >
               <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>
@@ -778,6 +783,16 @@ async function restore(userId: number) {
   border-radius: 2px;
 }
 
+/* 条的图例：底槽里一截条，和赛道上的条同一个样子 */
+.legend .bar-key {
+  width: 24px;
+  display: flex;
+}
+
+.legend .bar-key i {
+  width: 10px;
+}
+
 .empty {
   padding: 60px 0;
   text-align: center;
diff --git a/apps/web/src/oj/rank/palette.ts b/apps/web/src/oj/rank/palette.ts
index b1880d9..5198115 100644
--- a/apps/web/src/oj/rank/palette.ts
+++ b/apps/web/src/oj/rank/palette.ts
@@ -13,6 +13,11 @@ export function useRankPalette() {
     threat: "#c76a12",
     mate: isDark.value ? "#2f6b47" : "#a8dcbd",
     bar: isDark.value ? "#4a525c" : "#c9d3dc",
+    /**
+     * 桌面上条后面那道满宽的底槽。没有它的话，大家题数一样时一列等长的灰色短条
+     * 像页面没加载完的占位块（2026-10 用户截图问「这是什么」）
+     */
+    track: isDark.value ? "rgba(255,255,255,0.05)" : "#f1f4f7",
     /** 手机上条是整行底色，要淡到字压在上面看得清 */
     soft: {
       me: isDark.value ? "rgba(24,160,88,0.32)" : "#cdebd9",