fix(排名): 题数一样时一列灰色短条像没加载完的占位块，看不出是什么

条后面加一道淡色的满宽底槽，读得出「离满格还差多少」；桌面图例补上「做出的题数」，
老师也看得到。手机上条本来就是整行底色，不动。

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

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;