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

apps/web/src/oj/rank/components/Chart.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { Bar } from "vue-chartjs"
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  Colors,
+} from "chart.js"
+import { ChartType } from "utils/constants"
+import type { Rank } from "utils/types"
+
+// 仅注册柱状图所需的 Chart.js 组件
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  Colors,
+)
+
+const props = defineProps<{ rankData: Rank[]; type: ChartType }>()
+
+const data = computed(() => {
+  const labels = props.rankData.map((rank) => rank.user.username)
+  const datasets: any[] = [
+    {
+      label: props.type === ChartType.Rank ? "已解决" : "做题数",
+      data: props.rankData.map((rank) => rank.accepted_number),
+      backgroundColor: [
+        "rgba(255, 99, 132, 0.2)",
+        "rgba(255, 159, 64, 0.2)",
+        "rgba(55, 66, 250, 0.2)",
+        "rgba(75, 192, 192, 0.2)",
+        "rgba(54, 162, 235, 0.2)",
+        "rgba(153, 102, 255, 0.2)",
+        "rgba(48, 51, 107, 0.2)",
+        "rgba(249, 202, 36, 0.2)",
+        "rgba(106, 176, 76, 0.2)",
+        "rgba(119, 139, 235, 0.2)",
+      ],
+      borderColor: [
+        "rgba(255, 99, 132, 0.6)",
+        "rgba(255, 159, 64, 0.6)",
+        "rgba(55, 66, 250, 0.6)",
+        "rgba(75, 192, 192, 0.6)",
+        "rgba(54, 162, 235, 0.6)",
+        "rgba(153, 102, 255, 0.6)",
+        "rgba(48, 51, 107, 0.6)",
+        "rgba(249, 202, 36, 0.6)",
+        "rgba(106, 176, 76, 0.6)",
+        "rgba(119, 139, 235, 0.6)",
+      ],
+      hoverBackgroundColor: [
+        "rgba(255, 99, 132, 0.8)",
+        "rgba(255, 159, 64, 0.8)",
+        "rgba(55, 66, 250, 0.8)",
+        "rgba(75, 192, 192, 0.8)",
+        "rgba(54, 162, 235, 0.8)",
+        "rgba(153, 102, 255, 0.8)",
+        "rgba(48, 51, 107, 0.8)",
+        "rgba(249, 202, 36, 0.8)",
+        "rgba(106, 176, 76, 0.8)",
+        "rgba(119, 139, 235, 0.8)",
+      ],
+      hoverBorderColor: [
+        "rgba(255, 99, 132, 1)",
+        "rgba(255, 159, 64, 1)",
+        "rgba(55, 66, 250, 1)",
+        "rgba(75, 192, 192, 1)",
+        "rgba(54, 162, 235, 1)",
+        "rgba(153, 102, 255, 1)",
+        "rgba(48, 51, 107, 1)",
+        "rgba(249, 202, 36, 1)",
+        "rgba(106, 176, 76, 1)",
+        "rgba(119, 139, 235, 1)",
+      ],
+      borderWidth: 2,
+    },
+  ]
+
+  if (props.type === ChartType.Rank) {
+    datasets.push({
+      label: "总提交数",
+      data: props.rankData.map((rank) => rank.submission_number),
+      hidden: true,
+    })
+  }
+  return {
+    labels,
+    datasets,
+  }
+})
+
+const options = {
+  maintainAspectRatio: false,
+}
+</script>
+<template>
+  <div class="chart">
+    <Bar :data="data" :options="options" />
+  </div>
+</template>
+<style scoped>
+.chart {
+  height: 500px;
+  margin: 20px 0;
+}
+</style>

apps/web/src/oj/rank/components/Index.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { Icon } from "@iconify/vue"
+
+interface Props {
+  page: number
+  limit: number
+  index: number
+}
+
+const props = defineProps<Props>()
+const index = computed(() => props.index + (props.page - 1) * props.limit + 1)
+const tooltip = computed(() => {
+  if (index.value === 1) return "🏅 金牌"
+  if (index.value === 2) return "🥈 银牌"
+  if (index.value === 3) return "🥉 铜牌"
+  return ""
+})
+</script>
+<template>
+  <span v-if="index > 3">{{ index }}</span>
+  <n-tooltip v-else>
+    <template #trigger>
+      <n-icon :size="24">
+        <Icon v-if="index === 1" icon="fluent-emoji:1st-place-medal"></Icon>
+        <Icon v-if="index === 2" icon="fluent-emoji:2nd-place-medal"></Icon>
+        <Icon v-if="index === 3" icon="fluent-emoji:3rd-place-medal"></Icon>
+      </n-icon>
+    </template>
+    {{ tooltip }}
+  </n-tooltip>
+</template>