feat(排名): 本周进步榜移到全服 Top100 右边,左 2/3 右 1/3
Some checks failed
Deploy / deploy (push) Has been cancelled
Some checks failed
Deploy / deploy (push) Has been cancelled
两张榜分开上下放的时候,谁也看不见谁:上面那张是历史全部 AC 的总榜,名次几乎不动; 下面那张的分母只有这一周。并排摆在同一屏里,「总榜追不上」和「这周还能进前十」 才是一眼对照出来的。桌面 cols=3、Top100 占 2 栏,移动端退回 cols=1 上下堆叠。 周榜宽度从整屏缩到 1/3,列跟着收:列头去掉「本周」前缀(卡片标题已经写着), 宽度压到 70/120min/100/90,用户名加 ellipsis tooltip —— 1280 那一档也不出横向滚动条。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -317,11 +317,13 @@ const subOptions = computed<Duration>(
|
|||||||
durationFromValue(LONG_DURATION_OPTIONS[1]!.value)!,
|
durationFromValue(LONG_DURATION_OPTIONS[1]!.value)!,
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// 周榜占的是三栏里的一栏,列头不再重复「本周」(卡片标题已经写着),
|
||||||
|
// 宽度也压到 1280 那一档能整张放下,不出横向滚动条
|
||||||
const weeklyColumns: DataTableColumn<WeeklyRankItem>[] = [
|
const weeklyColumns: DataTableColumn<WeeklyRankItem>[] = [
|
||||||
{
|
{
|
||||||
title: renderTableTitle("排名", "streamline-emojis:flexed-biceps-1"),
|
title: renderTableTitle("排名", "streamline-emojis:flexed-biceps-1"),
|
||||||
key: "rank",
|
key: "rank",
|
||||||
width: 80,
|
width: 70,
|
||||||
align: "center",
|
align: "center",
|
||||||
// rank 是服务端给的周榜名次,不是行号 —— 换算回 Index 要的 0 基下标
|
// rank 是服务端给的周榜名次,不是行号 —— 换算回 Index 要的 0 基下标
|
||||||
render: (row) => h(Index, { index: row.rank - 1, page: 1, limit: 10 }),
|
render: (row) => h(Index, { index: row.rank - 1, page: 1, limit: 10 }),
|
||||||
@@ -332,7 +334,8 @@ const weeklyColumns: DataTableColumn<WeeklyRankItem>[] = [
|
|||||||
"streamline-emojis:smiling-face-with-sunglasses",
|
"streamline-emojis:smiling-face-with-sunglasses",
|
||||||
),
|
),
|
||||||
key: "username",
|
key: "username",
|
||||||
minWidth: 160,
|
minWidth: 120,
|
||||||
|
ellipsis: { tooltip: true },
|
||||||
render: (row) =>
|
render: (row) =>
|
||||||
h(
|
h(
|
||||||
NButton,
|
NButton,
|
||||||
@@ -345,15 +348,15 @@ const weeklyColumns: DataTableColumn<WeeklyRankItem>[] = [
|
|||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: renderTableTitle("本周新解决", "fluent-emoji:party-popper"),
|
title: renderTableTitle("新解决", "fluent-emoji:party-popper"),
|
||||||
key: "solvedCount",
|
key: "solvedCount",
|
||||||
width: 120,
|
width: 100,
|
||||||
align: "center",
|
align: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: renderTableTitle("本周提交", "streamline-emojis:rocket"),
|
title: renderTableTitle("提交", "streamline-emojis:rocket"),
|
||||||
key: "submissionCount",
|
key: "submissionCount",
|
||||||
width: 110,
|
width: 90,
|
||||||
align: "center",
|
align: "center",
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
@@ -622,13 +625,59 @@ watch(
|
|||||||
</n-card>
|
</n-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
</n-grid>
|
</n-grid>
|
||||||
|
<!--
|
||||||
|
两张榜并排:左边全服总榜(分母是历史全部 AC,名次几乎不动),右边本周进步榜
|
||||||
|
(分母只有这一周)。同一屏里对照着看,「追不上」和「这周还能进前十」是一眼的事。
|
||||||
|
-->
|
||||||
|
<n-grid :cols="isDesktop ? 3 : 1" :x-gap="20" :y-gap="20">
|
||||||
|
<n-gi :span="isDesktop ? 2 : 1">
|
||||||
|
<n-card>
|
||||||
|
<template #header>全服 Top100</template>
|
||||||
|
<template #header-extra>
|
||||||
|
<n-tag
|
||||||
|
v-if="onlineCount > 0"
|
||||||
|
round
|
||||||
|
:bordered="false"
|
||||||
|
type="success"
|
||||||
|
>
|
||||||
|
当前在线 {{ onlineCount }} 人
|
||||||
|
</n-tag>
|
||||||
|
</template>
|
||||||
|
<n-data-table
|
||||||
|
:data="data"
|
||||||
|
:columns="columns"
|
||||||
|
:row-class-name="rowClassName"
|
||||||
|
/>
|
||||||
|
<template #footer>
|
||||||
|
<n-flex align="center" justify="space-between" :wrap="false">
|
||||||
|
<!-- 前 100 名之外的学生榜上找不到自己,这里单独给一行 -->
|
||||||
|
<n-tag v-if="meOffBoard" type="info" round :bordered="false">
|
||||||
|
<template #icon>
|
||||||
|
<Icon width="18" icon="fluent-emoji:person-raising-hand" />
|
||||||
|
</template>
|
||||||
|
我的排名:第 {{ me!.rank }} 名 · 已解决
|
||||||
|
{{ me!.acceptedNumber }} · 提交 {{ me!.submissionNumber }} ·
|
||||||
|
正确率
|
||||||
|
{{ getACRate(me!.acceptedNumber, me!.submissionNumber) }}
|
||||||
|
</n-tag>
|
||||||
|
<span v-else />
|
||||||
|
<Pagination
|
||||||
|
:total="total"
|
||||||
|
v-model:page="query.page"
|
||||||
|
v-model:limit="query.limit"
|
||||||
|
/>
|
||||||
|
</n-flex>
|
||||||
|
</template>
|
||||||
|
</n-card>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi :span="1">
|
||||||
<n-card>
|
<n-card>
|
||||||
<template #header>
|
<template #header>
|
||||||
<n-flex align="center" :size="8">
|
<n-flex align="center" :size="8">
|
||||||
<span>本周进步榜</span>
|
<span>本周进步榜</span>
|
||||||
<n-text depth="3" style="font-size: 13px">
|
<n-text depth="3" style="font-size: 13px">
|
||||||
{{ weeklyStart ? parseTime(weeklyStart, "M月D日") + "起" : "" }} ·
|
{{ weeklyStart ? parseTime(weeklyStart, "M月D日") + "起" : "" }}
|
||||||
每周一清零
|
· 每周一清零
|
||||||
</n-text>
|
</n-text>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
</template>
|
</template>
|
||||||
@@ -676,38 +725,8 @@ watch(
|
|||||||
</n-tag>
|
</n-tag>
|
||||||
</template>
|
</template>
|
||||||
</n-card>
|
</n-card>
|
||||||
<n-card>
|
</n-gi>
|
||||||
<template #header>全服 Top100</template>
|
</n-grid>
|
||||||
<template #header-extra>
|
|
||||||
<n-tag v-if="onlineCount > 0" round :bordered="false" type="success">
|
|
||||||
当前在线 {{ onlineCount }} 人
|
|
||||||
</n-tag>
|
|
||||||
</template>
|
|
||||||
<n-data-table
|
|
||||||
:data="data"
|
|
||||||
:columns="columns"
|
|
||||||
:row-class-name="rowClassName"
|
|
||||||
/>
|
|
||||||
<template #footer>
|
|
||||||
<n-flex align="center" justify="space-between" :wrap="false">
|
|
||||||
<!-- 前 100 名之外的学生榜上找不到自己,这里单独给一行 -->
|
|
||||||
<n-tag v-if="meOffBoard" type="info" round :bordered="false">
|
|
||||||
<template #icon>
|
|
||||||
<Icon width="18" icon="fluent-emoji:person-raising-hand" />
|
|
||||||
</template>
|
|
||||||
我的排名:第 {{ me!.rank }} 名 · 已解决 {{ me!.acceptedNumber }} ·
|
|
||||||
提交 {{ me!.submissionNumber }} · 正确率
|
|
||||||
{{ getACRate(me!.acceptedNumber, me!.submissionNumber) }}
|
|
||||||
</n-tag>
|
|
||||||
<span v-else />
|
|
||||||
<Pagination
|
|
||||||
:total="total"
|
|
||||||
v-model:page="query.page"
|
|
||||||
v-model:limit="query.limit"
|
|
||||||
/>
|
|
||||||
</n-flex>
|
|
||||||
</template>
|
|
||||||
</n-card>
|
|
||||||
<n-grid :cols="isDesktop ? 2 : 1" :x-gap="20" :y-gap="20">
|
<n-grid :cols="isDesktop ? 2 : 1" :x-gap="20" :y-gap="20">
|
||||||
<n-gi :span="1">
|
<n-gi :span="1">
|
||||||
<n-card>
|
<n-card>
|
||||||
|
|||||||
Reference in New Issue
Block a user