- 条形改成整行的底色：窄屏上原来只剩 30px 宽的条看不出谁多谁少 - 默认只列领奖台下的前 5 行和你上下各 2 行，「看全班 39 人」点开；本年级 / 全服折起来的段点开再取全量 - 「你」那张卡：对手的说明换到名字下面一行，不再被截断 - 范围、时间两组开关各占满一行；班级对抗、名次走势、这周本班、每周冠军收成一张页签卡 - 有「追你」标签的那行数字不再错位 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed
1 parent
1c6e2b9d82
commit
2cf2d4260a
7 files changed
+587
-205
No files matched your search
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user