xuyue/OJ2
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(排名): 手机上的排名不再是四屏长的一栏，条变成每行底色、只列你附近几行，下面四块收成页签
Deploy / deploy (push) Canceled after 0s
Details

Browse Source 
- 条形改成整行的底色：窄屏上原来只剩 30px 宽的条看不出谁多谁少
- 默认只列领奖台下的前 5 行和你上下各 2 行，「看全班 39 人」点开；本年级 / 全服折起来的段点开再取全量
- 「你」那张卡：对手的说明换到名字下面一行，不再被截断
- 范围、时间两组开关各占满一行；班级对抗、名次走势、这周本班、每周冠军收成一张页签卡
- 有「追你」标签的那行数字不再错位

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed 2026-10-10 07:34:08 +08:00
1 parent 1c6e2b9d82
commit 2cf2d4260a
7 files changed
+587 -205
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/oj/rank/components/ChampionList.vue
+125
View File
@@ -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
+15 -3
View File
@@ -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
+15 -1
View File
@@ -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
+148 -18
View File
@@ -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 =
| { kind: "row"; row: RankRow }
| { kind: "gap"; from: number; to: number; tail?: boolean; mine?: boolean }
type Item = { kind: "row"; row: RankRow } | { kind: "gap"; from: number; to: number }
/** 手机默认列几行：领奖台下面的前 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)
list.push({ kind: "gap", from: last + 1, to: props.total, tail: true })
const end = props.complete ? (props.rows.at(-1)?.rank ?? last) : props.total
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
v-if="item.kind === 'gap'"
class="gap"
:disabled="expanding"
@click="emit('expand')"
>
第 {{ item.from }}–{{ item.to }} 名 · {{ item.to - item.from + 1 }} 人 · 展开 ▾
<button v-if="item.kind === 'gap'" class="gap" :disabled="expanding" @click="expandGap">
{{ gapText(item) }}
</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 {
height: 26px;
.single .column {
gap: 3px;
}
.single .who {
width: 96px;
.prow {
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
+128
View File
@@ -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
+148 -183
View File
@@ -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">
<h2>排名</h2>
<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"
/>
<div class="spacer" />
<span class="rule">{{ ruleText }}</span>
<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>
<!-- 手机上「你」那张卡提到赛道前面了，班级对抗放到赛道后面，别把赛道挤到第三屏 -->
<ClassBattle v-if="!isDesktop" :items="battle" :mine="classContext" :teacher="teacher" />
<div v-if="classContext" class="below" :class="{ single: !isDesktop }">
<div v-if="isDesktop && classContext" class="below">
<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
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>
<WeekTop :rows="weekBoard?.rows ?? []" :me-id="meId" :loaded="!!weekBoard" @open="open" />
</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">
<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="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="champion 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="open(hot.user.username)">
<UserName :username="hot.user.username" />
</button>
<span class="muted"
>{{ period === "week" ? "今天" : "这周" }}升了 {{ hot.change }} 名</span
>
</div>
<ChampionList
:champions="champions"
:hot="hot"
:since="period === 'week' ? '今天' : '这周'"
:me-id="meId"
@open="open"
/>
</div>
</div>
<!-- 手机：赛道下面四块收成一张页签卡（设计稿「手机版」），不然整页四屏多 -->
<div v-if="!isDesktop" class="card tabs-card">
<div class="tabs" role="tablist">
<button
v-for="tab in phoneTabs"
:key="tab.key"
role="tab"
:aria-selected="phoneTab === tab.key"
:class="{ on: phoneTab === tab.key }"
@click="phoneTab = tab.key"
>
{{ 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,
.below.single {
.main.single {
grid-template-columns: minmax(0, 1fr);
}
@@ -759,93 +751,66 @@ function weekLabel(start: string) {
margin-bottom: 2px;
}
.week-row,
.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 {
.tabs-card {
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 {
width: 110px;
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;
.tabs button.on {
color: #18a058;
font-weight: 600;
color: #ffffff;
background: #c76a12;
border-radius: 3px;
padding: 0 5px;
line-height: 16px;
white-space: nowrap;
border-bottom-color: #18a058;
}
.tab-body {
padding: 10px 12px 12px;
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
+8
View File
@@ -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",