style(首页): 「更多」不再半透明

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

apps/web/src/oj/home/dashboard.vue

@@ -778,7 +778,6 @@ a.row:hover {
 
 .more {
   font-size: var(--oj-fs-sec);
-  opacity: 0.7;
 }
 
 .more:hover,

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;

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="(!teacher && me) || hot" class="legend">
-              <span v-if="meListed"><i :style="{ background: palette.me }" />你</span>
+              <template v-if="!teacher && me">
-              <span v-if="board.ahead"><i :style="{ background: palette.chase }" />前一名</span>
+                <span v-if="meListed"><i :style="{ background: palette.me }" />你</span>
-              <span v-if="board.behind"><i :style="{ background: palette.threat }" />后一名</span>
+                <span v-if="board.ahead"><i :style="{ background: palette.chase }" />前一名</span>
-              <span v-if="mateClass"><i :style="{ background: palette.mate }" />你们班</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;

apps/web/src/shared/components/Header.vue

@@ -427,17 +427,31 @@ const options = computed<Array<DropdownOption | DropdownDividerOption>>(() => {
 }
 </style>
 
-<!-- 暗色开关那一行是 render 出来挂在 dropdown 里的（teleport 到 body），scoped 够不着 -->
+<!-- 暗色开关那一行是 render 出来挂在 dropdown 里的（teleport 到 body），scoped 够不着。
+     字色、悬停底色要自己取 dropdown 的变量：teleport 出去就不在主题的容器里了，继承到的是
+     body 的黑字，暗色下黑字压在深灰底上看不见 -->
 <style>
 .theme-row {
   display: flex;
   align-items: center;
   gap: 10px;
   height: 40px;
-  padding: 0 14px 0 12px;
+  margin: 0 4px;
+  padding: 0 10px 0 8px;
+  border-radius: var(--n-border-radius);
+  color: var(--n-option-text-color);
   cursor: pointer;
 }
 
+.theme-row:hover {
+  color: var(--n-option-text-color-hover);
+  background-color: var(--n-option-color-hover);
+}
+
+.theme-row > svg {
+  color: var(--n-prefix-color);
+}
+
 .theme-row .theme-label {
   flex: 1 1 0;
   font-size: 15px;