feat(阶段1): 搬入 ojnext 为 apps/web，未改业务代码

apps/web/src/oj/contest/components/AcAndSubmission.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ContestRank } from "utils/types"
+
+interface Props {
+  rank: ContestRank
+}
+const props = defineProps<Props>()
+const router = useRouter()
+
+function goto() {
+  router.push({
+    name: "contest submissions",
+    query: { username: props.rank.user.username },
+  })
+}
+</script>
+
+<template>
+  {{ rank.accepted_number }} /
+  <n-button text type="primary" @click="goto">
+    {{ rank.submission_number }}
+  </n-button>
+</template>
+
+<style scoped></style>

apps/web/src/oj/contest/components/ContestInfo.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { useContestStore } from "oj/store/contest"
+import { parseTime } from "utils/functions"
+import ContestType from "shared/components/ContestType.vue"
+
+const contestStore = useContestStore()
+</script>
+
+<template>
+  <n-popover
+    v-if="contestStore.contest"
+    placement="bottom-end"
+    :show-arrow="false"
+  >
+    <template #trigger>
+      <n-button>
+        <template #icon>
+          <Icon icon="streamline-emojis:exclamation-mark"></Icon>
+        </template>
+        比赛信息
+      </n-button>
+    </template>
+    <div v-html="contestStore.contest.description"></div>
+    <n-descriptions bordered label-placement="left" :column="1">
+      <n-descriptions-item label="开始时间">
+        {{
+          parseTime(contestStore.contest.start_time, "YYYY年M月D日 HH:mm:ss")
+        }}
+      </n-descriptions-item>
+      <n-descriptions-item label="结束时间">
+        {{ parseTime(contestStore.contest.end_time, "YYYY年M月D日 HH:mm:ss") }}
+      </n-descriptions-item>
+      <n-descriptions-item label="比赛类型">
+        <ContestType :contest="contestStore.contest" />
+      </n-descriptions-item>
+      <n-descriptions-item label="发起人">
+        {{ contestStore.contest.created_by.username }}
+      </n-descriptions-item>
+    </n-descriptions>
+  </n-popover>
+</template>

apps/web/src/oj/contest/components/ContestMenu.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useContestStore } from "oj/store/contest"
+import { useBreakpoints } from "shared/composables/breakpoints"
+import { ContestStatus } from "utils/constants"
+
+const route = useRoute()
+const router = useRouter()
+const contestStore = useContestStore()
+
+const { isDesktop } = useBreakpoints()
+
+const contestMenuVisible = computed(() => {
+  if (contestStore.isContestAdmin) return true
+  if (!contestStore.isPrivate) {
+    return contestStore.contestStatus !== ContestStatus.not_started
+  }
+  return contestStore.access
+})
+
+function goto(name: string) {
+  router.push({ name: "contest " + name })
+}
+
+function getCurrentType(name: string): "primary" | "default" {
+  if (route.name === "contest " + name) return "primary"
+  return "default"
+}
+
+const options: DropdownOption[] = [
+  { label: "比赛题目", key: "problems" },
+  { label: "提交信息", key: "submissions" },
+  { label: "比赛排名", key: "rank" },
+]
+</script>
+<template>
+  <div v-if="contestMenuVisible">
+    <n-flex v-if="isDesktop">
+      <n-button :type="getCurrentType('problems')" @click="goto('problems')">
+        比赛题目
+      </n-button>
+      <n-button
+        :type="getCurrentType('submissions')"
+        @click="goto('submissions')"
+      >
+        提交信息
+      </n-button>
+      <n-button :type="getCurrentType('rank')" @click="goto('rank')">
+        比赛排名
+      </n-button>
+    </n-flex>
+    <n-dropdown v-else :options="options" @select="goto">
+      <n-button>菜单</n-button>
+    </n-dropdown>
+  </div>
+</template>
+<style scoped></style>

apps/web/src/oj/contest/components/LineChart.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="chart" v-if="showChart">
+    <Line :data="chartData" :options="chartOptions" />
+  </div>
+</template>
+<script setup lang="ts">
+import { Line } from "vue-chartjs"
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js"
+import type { ContestRank } from "utils/types"
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+)
+
+interface Props {
+  ranks: ContestRank[]
+  problems: Array<{ id: number; title: string }>
+}
+
+const props = defineProps<Props>()
+
+const PENALTY_SECONDS = 20 * 60
+
+const showChart = computed(() => {
+  const hasRanks = props.ranks.length > 0
+  const hasProblems = props.problems.length >= 3
+  return hasProblems && hasRanks
+})
+
+const colorPalette = [
+  "#3B82F6",
+  "#EF4444",
+  "#10B981",
+  "#F59E0B",
+  "#8B5CF6",
+  "#EC4899",
+  "#06B6D4",
+  "#84CC16",
+  "#F97316",
+  "#6366F1",
+]
+
+function formatTime(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  if (h > 0) return `${h}h${m}m`
+  return `${m}m`
+}
+
+interface AcEvent {
+  time: number
+  userIndex: number
+  problemId: string
+}
+
+const chartData = computed(() => {
+  if (!props.ranks || props.ranks.length === 0) {
+    return { labels: [], datasets: [] }
+  }
+
+  const topUsers = props.ranks.slice(0, 10)
+
+  // 收集所有AC事件并按时间排序
+  const events: AcEvent[] = []
+  topUsers.forEach((rank, userIndex) => {
+    Object.entries(rank.submission_info).forEach(([problemId, info]) => {
+      if (info.is_ac) {
+        events.push({ time: info.ac_time, userIndex, problemId })
+      }
+    })
+  })
+  events.sort((a, b) => a.time - b.time)
+
+  if (events.length === 0) {
+    return { labels: [], datasets: [] }
+  }
+
+  // 在每个时间点计算所有人的排名
+  // 状态: 每个用户当前已AC题数和罚时
+  const userState = topUsers.map(() => ({
+    solved: 0,
+    penalty: 0,
+  }))
+
+  // 用于记录每个用户每道题的错误次数
+  const userErrors: Map<string, number>[] = topUsers.map(() => new Map())
+  topUsers.forEach((rank, i) => {
+    Object.entries(rank.submission_info).forEach(([problemId, info]) => {
+      if (info.error_number > 0) {
+        userErrors[i].set(problemId, info.error_number)
+      }
+    })
+  })
+
+  function calcRanks(): number[] {
+    const indexed = userState.map((s, i) => ({ ...s, i }))
+    indexed.sort((a, b) => {
+      if (b.solved !== a.solved) return b.solved - a.solved
+      return a.penalty - b.penalty
+    })
+    const ranks = new Array(topUsers.length).fill(0)
+    indexed.forEach((item, pos) => {
+      ranks[item.i] = pos + 1
+    })
+    return ranks
+  }
+
+  // 时间轴上的数据点: [时间标签, 各用户排名]
+  const timePoints: number[] = [0]
+  const rankSnapshots: number[][] = [calcRanks()]
+
+  // 按时间处理事件（合并同一时刻的事件）
+  let i = 0
+  while (i < events.length) {
+    const currentTime = events[i].time
+    // 处理同一时刻的所有事件
+    while (i < events.length && events[i].time === currentTime) {
+      const ev = events[i]
+      userState[ev.userIndex].solved++
+      const errors = userErrors[ev.userIndex].get(ev.problemId) || 0
+      userState[ev.userIndex].penalty =
+        userState[ev.userIndex].penalty + ev.time + errors * PENALTY_SECONDS
+      i++
+    }
+    timePoints.push(currentTime)
+    rankSnapshots.push(calcRanks())
+  }
+
+  const labels = timePoints.map((t) => formatTime(t))
+
+  const datasets = topUsers.map((rank, userIndex) => {
+    const color = colorPalette[userIndex % colorPalette.length]
+    const finalRank = rankSnapshots[rankSnapshots.length - 1][userIndex]
+    return {
+      label: `#${finalRank} ${rank.user.username}`,
+      data: rankSnapshots.map((snapshot) => snapshot[userIndex]),
+      borderColor: color,
+      backgroundColor: color,
+      tension: 0.3,
+      fill: false,
+      pointRadius: 3,
+      pointHoverRadius: 6,
+      pointBackgroundColor: color,
+      pointBorderColor: "#fff",
+      pointBorderWidth: 1,
+      borderWidth: 2.5,
+    }
+  })
+
+  return { labels, datasets }
+})
+
+const chartOptions = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  interaction: {
+    mode: "index" as const,
+    intersect: false,
+  },
+  plugins: {
+    legend: {
+      display: true,
+      position: "top" as const,
+      maxHeight: 80,
+      labels: {
+        boxWidth: 14,
+        boxHeight: 3,
+        padding: 10,
+        font: { size: 12 },
+      },
+    },
+    tooltip: {
+      mode: "index" as const,
+      intersect: false,
+      itemSort: (a: any, b: any) => a.parsed.y - b.parsed.y,
+      callbacks: {
+        title: (context: any) => `比赛进行: ${context[0].label}`,
+        label: (context: any) => {
+          const rank = context.parsed.y
+          const name = context.dataset.label
+          return `  第${rank}名 — ${name}`
+        },
+      },
+    },
+  },
+  scales: {
+    x: {
+      title: {
+        display: true,
+        text: "比赛时间",
+      },
+    },
+    y: {
+      title: {
+        display: true,
+        text: "排名",
+      },
+      reverse: true,
+      min: 1,
+      max: 10,
+      ticks: {
+        stepSize: 1,
+        callback: (value: any) => `第${value}名`,
+      },
+    },
+  },
+}))
+</script>
+
+<style scoped>
+.chart {
+  height: 420px;
+  width: 100%;
+  margin-bottom: 24px;
+}
+</style>

apps/web/src/oj/contest/detail.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { CONTEST_STATUS, ContestStatus } from "utils/constants"
+import { useBreakpoints } from "shared/composables/breakpoints"
+import { useContestStore } from "../store/contest"
+import ContestInfo from "./components/ContestInfo.vue"
+import ContestMenu from "./components/ContestMenu.vue"
+
+const props = defineProps<{
+  contestID: string
+}>()
+const contestStore = useContestStore()
+const message = useMessage()
+
+const { isDesktop } = useBreakpoints()
+
+const password = ref("")
+
+async function check() {
+  await contestStore.checkPassword(props.contestID, password.value)
+  if (!contestStore.access) {
+    message.error("密码错误")
+  }
+}
+
+watch(
+  () => contestStore.contestStatus,
+  (nv, ov) => {
+    if (nv === ContestStatus.underway && ov == ContestStatus.not_started) {
+      contestStore.init(props.contestID)
+    }
+  },
+)
+
+onMounted(() => {
+  contestStore.init(props.contestID)
+})
+
+onBeforeUnmount(contestStore.clear)
+
+const passwordFormVisible = computed(
+  () =>
+    contestStore.isPrivate &&
+    !contestStore.access &&
+    !contestStore.isContestAdmin,
+)
+</script>
+
+<template>
+  <n-flex vertical size="large" v-if="contestStore.contest">
+    <n-flex align="center" justify="space-between">
+      <n-flex align="center">
+        <n-tag :type="CONTEST_STATUS[contestStore.contestStatus]['type']">
+          {{ contestStore.countdown }}
+        </n-tag>
+        <Icon
+          v-if="contestStore.isPrivate"
+          icon="streamline-ultimate-color:shield-lock"
+          :height="30"
+        ></Icon>
+        <h2 class="contestTitle">{{ contestStore.contest.title }}</h2>
+      </n-flex>
+      <n-flex align="center">
+        <ContestInfo />
+        <ContestMenu />
+      </n-flex>
+    </n-flex>
+    <n-form
+      :inline="isDesktop"
+      label-placement="left"
+      v-if="passwordFormVisible"
+    >
+      <n-form-item label="需要输入密码才能看到题目">
+        <n-input
+          name="ContestPassword"
+          type="password"
+          v-model:value="password"
+        />
+      </n-form-item>
+      <n-form-item>
+        <n-button @click="check" :disabled="!password">确认</n-button>
+      </n-form-item>
+    </n-form>
+    <router-view></router-view>
+  </n-flex>
+</template>
+
+<style scoped>
+.contestTitle {
+  font-weight: 500;
+  margin: 0;
+}
+</style>

apps/web/src/oj/contest/list.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { useRouteQuery } from "@vueuse/router"
+import { NTag } from "naive-ui"
+import { getContestList } from "oj/api"
+import { duration, parseTime } from "utils/functions"
+import type { Contest } from "utils/types"
+import ContestTitle from "shared/components/ContestTitle.vue"
+import Pagination from "shared/components/Pagination.vue"
+import { useAuthModalStore } from "shared/store/authModal"
+import { usePagination } from "shared/composables/pagination"
+import { useUserStore } from "shared/store/user"
+import { CONTEST_STATUS, ContestType } from "utils/constants"
+import { renderTableTitle } from "utils/renders"
+
+const router = useRouter()
+const userStore = useUserStore()
+const authStore = useAuthModalStore()
+
+interface ContestQuery {
+  keyword: string
+  status: string
+  tag: string
+}
+
+// 使用分页 composable
+const { query, clearQuery } = usePagination<ContestQuery>({
+  keyword: useRouteQuery("keyword", "").value,
+  status: useRouteQuery("status", "").value,
+  tag: useRouteQuery("tag", "").value,
+})
+
+const data = ref<Contest[]>([])
+const total = ref(0)
+
+const options: SelectOption[] = [
+  { label: "全部", value: "" },
+  { label: "未开始", value: "1" },
+  { label: "进行中", value: "0" },
+  { label: "已结束", value: "-1" },
+]
+
+const tags: SelectOption[] = [
+  { label: "全部", value: "" },
+  { label: "练习", value: "练习" },
+  { label: "期中", value: "期中" },
+  { label: "期末", value: "期末" },
+]
+
+const columns: DataTableColumn<Contest>[] = [
+  {
+    title: renderTableTitle("状态", "streamline-emojis:collision"),
+    key: "status",
+    width: 100,
+    render: (row) =>
+      h(
+        NTag,
+        { type: CONTEST_STATUS[row.status]["type"] },
+        () => CONTEST_STATUS[row.status]["name"],
+      ),
+  },
+  {
+    title: renderTableTitle("比赛", "streamline-emojis:bouquet"),
+    key: "title",
+    minWidth: 360,
+    render: (row) => h(ContestTitle, { contest: row }),
+  },
+  {
+    title: renderTableTitle("标签", "fluent-emoji-flat:keycap-hashtag"),
+    key: "tag",
+    width: 100,
+    render: (row) => h(NTag, () => row.tag),
+  },
+  {
+    title: renderTableTitle("开始时间", "fluent-emoji-flat:eleven-thirty"),
+    key: "start_time",
+    width: 180,
+    render: (row) => parseTime(row.start_time),
+  },
+  {
+    title: renderTableTitle("比赛时长", "streamline-emojis:fishing-pole"),
+    key: "duration",
+    width: 180,
+    render: (row) => duration(row.start_time, row.end_time),
+  },
+]
+
+async function listContests() {
+  const offset = (query.page - 1) * query.limit
+  const res = await getContestList({
+    offset,
+    limit: query.limit,
+    keyword: query.keyword,
+    status: query.status,
+    tag: query.tag,
+  })
+  data.value = res.data.results
+  total.value = res.data.total
+}
+
+function search(value: string) {
+  query.keyword = value
+}
+
+function clear() {
+  clearQuery()
+}
+
+onMounted(listContests)
+
+// 监听搜索关键词变化（防抖）
+watchDebounced(() => query.keyword, listContests, {
+  debounce: 500,
+  maxWait: 1000,
+})
+
+// 监听其他查询条件变化
+watch(() => [query.page, query.limit, query.status, query.tag], listContests)
+
+function rowProps(row: Contest) {
+  return {
+    style: "cursor: pointer",
+    onClick() {
+      if (!userStore.isAuthed && row.contest_type === ContestType.private) {
+        authStore.openLoginModal()
+      } else {
+        router.push("/contest/" + row.id)
+      }
+    },
+  }
+}
+</script>
+<template>
+  <n-flex vertical size="large">
+    <n-space>
+      <n-form :show-feedback="false" label-placement="left" inline>
+        <n-form-item label="比赛状态">
+          <n-select
+            style="width: 120px"
+            :options="options"
+            v-model:value="query.status"
+          />
+        </n-form-item>
+        <n-form-item label="标签">
+          <n-select
+            style="width: 120px"
+            :options="tags"
+            v-model:value="query.tag"
+          />
+        </n-form-item>
+      </n-form>
+      <n-form :show-feedback="false" label-placement="left" inline>
+        <n-form-item>
+          <n-input
+            style="width: 180px"
+            clearable
+            v-model:value="query.keyword"
+            placeholder="比赛标题"
+          />
+        </n-form-item>
+        <n-form-item>
+          <n-flex :wrap="false">
+            <n-button @click="search(query.keyword)">搜索</n-button>
+            <n-button @click="clear" quaternary>重置</n-button>
+          </n-flex>
+        </n-form-item>
+      </n-form>
+    </n-space>
+    <n-data-table
+      :bordered="false"
+      :columns="columns"
+      :data="data"
+      :row-props="rowProps"
+    />
+  </n-flex>
+  <Pagination
+    v-model:limit="query.limit"
+    v-model:page="query.page"
+    :total="total"
+  />
+</template>

apps/web/src/oj/contest/pages/problems.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { ProblemFiltered } from "utils/types"
+import ProblemStatus from "oj/problem/components/ProblemStatus.vue"
+import { useContestStore } from "oj/store/contest"
+import { renderTableTitle } from "utils/renders"
+
+const props = defineProps<{ contestID: string }>()
+
+const router = useRouter()
+const contestStore = useContestStore()
+const problemsColumns: DataTableColumn<ProblemFiltered>[] = [
+  {
+    title: renderTableTitle("状态", "streamline-ultimate-color:music-note-1"),
+    key: "status",
+    width: 100,
+    render: (row) => h(ProblemStatus, { status: row.status }),
+  },
+  {
+    title: renderTableTitle("编号", "fluent-emoji-flat:input-numbers"),
+    key: "_id",
+    width: 100,
+  },
+  {
+    title: renderTableTitle("题目", "streamline-emojis:rice-ball"),
+    key: "title",
+    minWidth: 200,
+  },
+  {
+    title: renderTableTitle("提交数", "streamline-emojis:clinking-beer-mugs"),
+    key: "submission",
+    align: "center",
+    width: 120,
+  },
+  {
+    title: renderTableTitle("通过率", "streamline-emojis:clapping-hands-1"),
+    key: "rate",
+    align: "center",
+    width: 120,
+  },
+]
+
+function rowProps(row: ProblemFiltered) {
+  return {
+    style: "cursor: pointer",
+    onClick() {
+      router.push(`/contest/${props.contestID}/problem/${row._id}`)
+    },
+  }
+}
+</script>
+
+<template>
+  <n-data-table
+    striped
+    :data="contestStore.problems"
+    :columns="problemsColumns"
+    :row-props="rowProps"
+  />
+</template>
+
+<style scoped></style>

apps/web/src/oj/contest/pages/rank.vue

@@ -0,0 +1,341 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { NButton, useThemeVars } from "naive-ui"
+import { getContestProblems, getContestRank } from "oj/api"
+import { secondsToDuration } from "utils/functions"
+import { useContestStore } from "oj/store/contest"
+import Pagination from "shared/components/Pagination.vue"
+import { usePagination } from "shared/composables/pagination"
+import { ContestStatus } from "utils/constants"
+import { renderTableTitle } from "utils/renders"
+import type { ContestRank, ProblemFiltered } from "utils/types"
+import AcAndSubmission from "../components/AcAndSubmission.vue"
+import LineChart from "../components/LineChart.vue"
+
+interface Props {
+  contestID: string
+}
+
+const props = defineProps<Props>()
+
+const route = useRoute()
+const router = useRouter()
+const theme = useThemeVars()
+
+const contestStore = useContestStore()
+
+const total = ref(0)
+const data = ref<ContestRank[]>([])
+const chart = ref<ContestRank[]>([])
+const problems = ref<ProblemFiltered[]>([])
+const [autoRefresh] = useToggle(true)
+const { resume, pause } = useIntervalFn(
+  () => {
+    query.page = 1
+    listRanks()
+  },
+  10000,
+  {
+    immediate: false,
+  },
+)
+
+// 使用分页 composable
+const { query } = usePagination({}, { defaultLimit: 50 })
+
+const columns = ref<DataTableColumn<ContestRank>[]>([
+  {
+    title: renderTableTitle("编号", "fluent-emoji-flat:input-numbers"),
+    key: "id",
+    width: 80,
+    fixed: "left",
+    align: "center",
+    render: (_, index) => index + (query.page - 1) * query.limit + 1,
+  },
+  {
+    title: renderTableTitle(
+      "用户",
+      "streamline-emojis:smiling-face-with-sunglasses",
+    ),
+    key: "username",
+    width: 120,
+    fixed: "left",
+    align: "center",
+    render: (row) =>
+      h(
+        NButton,
+        {
+          text: true,
+          type: "info",
+          onClick: () => router.push("/user?name=" + row.user.username),
+        },
+        () => row.user.username,
+      ),
+  },
+  {
+    title: renderTableTitle(
+      "正确数/总提交",
+      "streamline-ultimate-color:color-palette",
+    ),
+    key: "submission",
+    width: 140,
+    align: "center",
+    render: (row) => h(AcAndSubmission, { rank: row }),
+  },
+  {
+    title: "总时间",
+    key: "total_time",
+    width: 120,
+    align: "center",
+    render: (row) => secondsToDuration(row.total_time),
+  },
+])
+
+async function listRanks() {
+  const res = await getContestRank(props.contestID, {
+    limit: query.limit,
+    offset: query.limit * (query.page - 1),
+  })
+  total.value = res.data.total
+  data.value = res.data.results
+  if (query.page === 1) {
+    chart.value = data.value
+  }
+}
+
+async function addColumns() {
+  try {
+    problems.value = await getContestProblems(props.contestID)
+    problems.value.map((problem) => {
+      columns.value.push({
+        align: "center",
+        title: () =>
+          h(
+            NButton,
+            {
+              text: true,
+              type: "primary",
+              onClick: () => {
+                const data = router.resolve({
+                  name: "contest problem",
+                  params: {
+                    contestID: route.params.contestID,
+                    problemID: problem._id,
+                  },
+                })
+                window.open(data.href, "_blank")
+              },
+            },
+            () => problem.title,
+          ),
+        render: (row) => {
+          if (row.submission_info[problem.id]) {
+            const status = row.submission_info[problem.id]
+            let acTime
+            let errorNumber
+            if (status.is_ac) {
+              acTime = h("span", secondsToDuration(status.ac_time))
+            }
+            if (status.is_first_ac) {
+              acTime = [
+                h(Icon, {
+                  icon: "fluent-emoji:1st-place-medal",
+                  height: 20,
+                  width: 20,
+                }),
+                h("span", secondsToDuration(status.ac_time)),
+              ]
+            }
+            if (status.error_number) {
+              errorNumber = h(
+                "span",
+                { style: "margin: 0" },
+                `(-${status.error_number})`,
+              )
+            }
+            return h("div", { class: "oj-time-with-modal" }, [
+              acTime,
+              errorNumber,
+            ])
+          }
+        },
+        cellProps: (row) => {
+          let backgroundColor = ""
+          let color = theme.value.textColorBase
+          if (row.submission_info[problem.id]) {
+            const status = row.submission_info[problem.id]
+            if (status.is_first_ac) {
+              backgroundColor = theme.value.primaryColor
+              color = theme.value.baseColor
+            } else if (status.is_ac) {
+              const success = theme.value.successColor
+              backgroundColor = success + "50"
+              color = theme.value.textColorBase
+            } else {
+              const error = theme.value.errorColor
+              backgroundColor = error + "50"
+              color = theme.value.textColorBase
+            }
+          }
+          return { style: { backgroundColor, color } }
+        },
+        key: problem.id,
+        width: 150,
+        ellipsis: true,
+      })
+    })
+  } catch (err) {
+    problems.value = []
+  }
+}
+
+// 导出弹窗
+const showExportModal = ref(false)
+const exportLoading = ref(false)
+const exportForm = reactive({
+  first: 0,
+  second: 0,
+  third: 0,
+})
+
+watch(
+  () => total.value,
+  (val) => {
+    if (val > 0) {
+      exportForm.first = Math.round(val * 0.1)
+      exportForm.second = Math.round(val * 0.2)
+      exportForm.third = Math.round(val * 0.3)
+    }
+  },
+)
+
+function openExportModal() {
+  if (total.value > 0) {
+    exportForm.first = Math.round(total.value * 0.1)
+    exportForm.second = Math.round(total.value * 0.2)
+    exportForm.third = Math.round(total.value * 0.3)
+  }
+  showExportModal.value = true
+}
+
+async function downloadExcel() {
+  exportLoading.value = true
+  try {
+    const res = await getContestRank(props.contestID, {
+      limit: total.value || 10000,
+      offset: 0,
+    })
+    const allRanks: ContestRank[] = res.data.results
+
+    const rows = allRanks.map((rank, index) => {
+      const rank1 = index + 1
+      let level = ""
+      if (rank1 <= exportForm.first) {
+        level = "一等奖"
+      } else if (rank1 <= exportForm.first + exportForm.second) {
+        level = "二等奖"
+      } else if (
+        rank1 <=
+        exportForm.first + exportForm.second + exportForm.third
+      ) {
+        level = "三等奖"
+      } else {
+        level = "参与奖"
+      }
+      return { 用户名: rank.user.username, 等级: level }
+    })
+
+    const csv =
+      "用户名,等级\n" + rows.map((r) => `${r.用户名},${r.等级}`).join("\n")
+    const blob = new Blob(["" + csv], { type: "text/csv;charset=utf-8" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = `${contestStore.contest?.title ?? "contest"}获奖情况.csv`
+    a.click()
+    URL.revokeObjectURL(url)
+    showExportModal.value = false
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+// 监听分页参数变化
+watch([() => query.page, () => query.limit], listRanks)
+watch(autoRefresh, (checked) => (checked ? resume() : pause()))
+
+onMounted(() => {
+  listRanks()
+  addColumns()
+})
+</script>
+
+<template>
+  <!-- 排名变化图表 -->
+  <LineChart :ranks="chart" :problems="problems" v-if="chart.length > 0" />
+
+  <!-- 排名表格 -->
+  <n-data-table
+    striped
+    :single-line="false"
+    :scroll-x="1200"
+    :columns="columns"
+    :data="data"
+  />
+  <n-space justify="end" align="center">
+    <n-form
+      label-placement="left"
+      inline
+      :show-feedback="false"
+      v-if="contestStore.contestStatus === ContestStatus.underway"
+    >
+      <n-form-item label="开启自动刷新">
+        <n-switch v-model:value="autoRefresh" />
+      </n-form-item>
+    </n-form>
+    <n-button
+      v-if="contestStore.contestStatus === ContestStatus.finished"
+      type="primary"
+      @click="openExportModal"
+    >
+      导出数据
+    </n-button>
+    <Pagination
+      :total="total"
+      :limit="query.limit"
+      :page="query.page"
+      @update:limit="(limit: number) => (query.limit = limit)"
+      @update:page="(page: number) => (query.page = page)"
+    />
+  </n-space>
+
+  <n-modal v-model:show="showExportModal" preset="dialog" title="导出获奖数据">
+    <n-form
+      label-placement="left"
+      label-width="auto"
+      :show-feedback="false"
+      style="margin-top: 16px"
+    >
+      <n-form-item label="一等奖人数" style="margin-bottom: 12px">
+        <n-input-number v-model:value="exportForm.first" :min="0" />
+      </n-form-item>
+      <n-form-item label="二等奖人数" style="margin-bottom: 12px">
+        <n-input-number v-model:value="exportForm.second" :min="0" />
+      </n-form-item>
+      <n-form-item label="三等奖人数">
+        <n-input-number v-model:value="exportForm.third" :min="0" />
+      </n-form-item>
+    </n-form>
+    <template #action>
+      <n-button @click="showExportModal = false">取消</n-button>
+      <n-button type="primary" :loading="exportLoading" @click="downloadExcel">
+        下载 CSV
+      </n-button>
+    </template>
+  </n-modal>
+</template>
+<style>
+.oj-time-with-modal {
+  display: flex;
+}
+</style>