修改后台目录和创建比赛的时间设置

src/admin/announcement/list.vue

@@ -85,7 +85,15 @@ watch(query, listAnnouncements, { deep: true })
 </script>
 
 <template>
-  <h2 class="title">网站公告</h2>
+  <n-flex align="center" class="titleWrapper">
+    <h2 class="title">网站公告</h2>
+    <n-button
+      type="primary"
+      @click="$router.push({ name: 'admin announcement create' })"
+    >
+      新建
+    </n-button>
+  </n-flex>
   <n-data-table striped :columns="columns" :data="announcements" />
   <Pagination
     :total="total"
@@ -95,7 +103,11 @@ watch(query, listAnnouncements, { deep: true })
 </template>
 
 <style scoped>
+.titleWrapper {
+  margin-bottom: 16px;
+}
+
 .title {
-  margin: 0 0 16px;
+  margin: 0;
 }
 </style>

src/admin/contest/detail.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { formatISO } from "date-fns"
 import TextEditor from "~/shared/components/TextEditor.vue"
+import { parseTime } from "~/utils/functions"
 import { BlankContest } from "~/utils/types"
 import { createContest, editContest, getContest } from "../api"
 
@@ -8,8 +9,32 @@ interface Props {
   contestID?: string
 }
 
-const after10mins = Date.now() + 1000 * 600
-const after70mins = after10mins + 1000 * 3600
+function getTimes() {
+  const timestamp = Date.now()
+  const rounded = timestamp - (timestamp % 60000) // 确保秒数为0
+  const t1 = rounded + waitMins.value * 60000
+  const t2 = t1 + durationMins.value * 60000
+  return [t1, t2]
+}
+
+// 创建的时候
+const waitMins = ref(5) // 顺延5分钟
+const durationMins = ref(10) // 比赛默认时长10分钟
+
+watch([waitMins, durationMins], () => {
+  const times = getTimes()
+  contest.start_time = formatISO(times[0])
+  contest.end_time = formatISO(times[1])
+})
+
+// 编辑的时候
+const startTime = ref(0)
+const endTime = ref(0)
+
+watch([startTime, endTime], (values) => {
+  contest.start_time = formatISO(values[0])
+  contest.end_time = formatISO(values[1])
+})
 
 const route = useRoute()
 const router = useRouter()
@@ -17,8 +42,6 @@ const message = useMessage()
 const props = defineProps<Props>()
 
 const [ready, toggleReady] = useToggle()
-const startTime = ref(after10mins)
-const endTime = ref(after70mins)
 
 const tags: SelectOption[] = [
   { label: "练习", value: "练习" },
@@ -31,8 +54,8 @@ const contest = reactive<BlankContest & { id: number }>({
   title: "",
   description: "",
   tag: "练习",
-  start_time: formatISO(after10mins),
-  end_time: formatISO(after70mins),
+  start_time: "",
+  end_time: "",
   rule_type: "ACM",
   password: "",
   real_time_rank: true,
@@ -40,13 +63,11 @@ const contest = reactive<BlankContest & { id: number }>({
   allowed_ip_ranges: [],
 })
 
-watch([startTime, endTime], (values) => {
-  contest.start_time = formatISO(values[0])
-  contest.end_time = formatISO(values[1])
-})
-
 async function getContestDetail() {
   if (!props.contestID) {
+    const times = getTimes()
+    contest.start_time = formatISO(times[0])
+    contest.end_time = formatISO(times[1])
     toggleReady(true)
     return
   }
@@ -71,7 +92,7 @@ async function getContestDetail() {
 
 async function submit() {
   if (contest.description === "<p><br></p>") {
-    contest.description = ""
+    contest.description = contest.title
   }
   const api = {
     "admin contest create": createContest,
@@ -94,12 +115,26 @@ onMounted(getContestDetail)
 </script>
 
 <template>
-  <h2 class="title">
-    {{ route.name === "admin contest create" ? "新建比赛" : "编辑比赛" }}
-  </h2>
+  <n-flex class="titleWrapper" align="center">
+    <h2 class="title">
+      {{ route.name === "admin contest create" ? "新建比赛" : "编辑比赛" }}
+    </h2>
+    <template v-if="!props.contestID">
+      <n-alert type="success">
+        <template #header>
+          开始时间 {{ parseTime(contest.start_time, "YYYY年M月D日 HH:mm:ss") }}
+        </template>
+      </n-alert>
+      <n-alert type="warning">
+        <template #header>
+          结束时间 {{ parseTime(contest.end_time, "YYYY年M月D日 HH:mm:ss") }}
+        </template>
+      </n-alert>
+    </template>
+  </n-flex>
   <n-form inline>
     <n-form-item label="标题">
-      <n-input class="contestTitle" v-model:value="contest.title" />
+      <n-input style="width: 300px" v-model:value="contest.title" />
     </n-form-item>
     <n-form-item label="标签">
       <n-select
@@ -108,14 +143,36 @@ onMounted(getContestDetail)
         v-model:value="contest.tag"
       />
     </n-form-item>
-    <n-form-item label="开始">
-      <n-date-picker v-model:value="startTime" type="datetime" />
-    </n-form-item>
-    <n-form-item label="结束">
-      <n-date-picker v-model:value="endTime" type="datetime" />
-    </n-form-item>
+    <template v-if="props.contestID">
+      <n-form-item label="开始">
+        <n-date-picker
+          style="width: 200px"
+          v-model:value="startTime"
+          type="datetime"
+        />
+      </n-form-item>
+      <n-form-item label="结束">
+        <n-date-picker
+          style="width: 200px"
+          v-model:value="endTime"
+          type="datetime"
+        />
+      </n-form-item>
+    </template>
+    <template v-else>
+      <n-form-item label="几分钟后开始">
+        <n-input-number style="width: 120px" v-model:value="waitMins" />
+      </n-form-item>
+      <n-form-item label="比赛时长">
+        <n-input-number
+          style="width: 120px"
+          step="5"
+          v-model:value="durationMins"
+        />
+      </n-form-item>
+    </template>
     <n-form-item label="密码">
-      <n-input v-model:value="contest.password" />
+      <n-input style="width: 160px" v-model:value="contest.password" />
     </n-form-item>
     <n-form-item label="可见">
       <n-switch v-model:value="contest.visible" />
@@ -133,11 +190,11 @@ onMounted(getContestDetail)
 </template>
 
 <style scoped>
-.title {
-  margin-top: 0;
+.titleWrapper {
+  margin-bottom: 16px;
 }
 
-.contestTitle {
-  width: 400px;
+.title {
+  margin: 0;
 }
 </style>

src/admin/contest/list.vue

@@ -87,7 +87,15 @@ watchDebounced(() => query.keyword, listContests, {
 
 <template>
   <n-flex justify="space-between" class="titleWrapper">
-    <h2 class="title">比赛列表</h2>
+    <n-flex align="center">
+      <h2 class="title">比赛列表</h2>
+      <n-button
+        type="primary"
+        @click="$router.push({ name: 'admin contest create' })"
+      >
+        新建
+      </n-button>
+    </n-flex>
     <div>
       <n-input v-model:value="query.keyword" placeholder="输入标题关键字" />
     </div>

src/admin/problem/list.vue

@@ -115,7 +115,16 @@ watchDebounced(() => query.keyword, listProblems, {
 
 <template>
   <n-flex class="titleWrapper" justify="space-between">
-    <h2 class="title">{{ title }}</h2>
+    <n-flex align="center">
+      <h2 class="title">{{ title }}</h2>
+      <n-button
+        v-if="!isContestProblemList"
+        type="primary"
+        @click="$router.push({ name: 'admin problem create' })"
+      >
+        新建
+      </n-button>
+    </n-flex>
     <n-flex>
       <n-button v-if="isContestProblemList" @click="createContestProblem">
         新建比赛题目

src/admin/user/list.vue

@@ -160,7 +160,10 @@ watch(query, listUsers, { deep: true })
   <n-flex class="titleWrapper" justify="space-between">
     <n-flex>
       <h2 class="title">用户列表</h2>
-      <n-button type="primary" @click="createNewUser">新建用户</n-button>
+      <n-button type="primary" @click="createNewUser">新建</n-button>
+      <n-button @click="$router.push({ name: 'admin user generate' })">
+        导入
+      </n-button>
     </n-flex>
     <n-flex>
       <n-popconfirm

src/components.d.ts

@@ -37,6 +37,7 @@ declare module 'vue' {
     NH4: typeof import('naive-ui')['NH4']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
@@ -46,6 +47,7 @@ declare module 'vue' {
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
+    NNumberAnimation: typeof import('naive-ui')['NNumberAnimation']
     NPagination: typeof import('naive-ui')['NPagination']
     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NPopover: typeof import('naive-ui')['NPopover']

src/oj/contest/detail.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
-import { CONTEST_STATUS } from "utils/constants"
+import { CONTEST_STATUS, ContestStatus } from "utils/constants"
 import { isDesktop } from "~/shared/composables/breakpoints"
 import { useContestStore } from "../store/contest"
 import ContestInfo from "./components/ContestInfo.vue"
@@ -21,13 +21,20 @@ async function check() {
   }
 }
 
+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()
-})
+onBeforeUnmount(contestStore.clear)
 
 const passwordFormVisible = computed(
   () =>

src/oj/problem/components/ProblemInfo.vue

@@ -2,12 +2,12 @@
 import { Icon } from "@iconify/vue"
 import { problem } from "oj/composables/problem"
 import { DIFFICULTY, JUDGE_STATUS } from "utils/constants"
-import { getACRate, getTagColor, parseTime } from "utils/functions"
+import { getACRateNumber, getTagColor, parseTime } from "utils/functions"
 import { Pie } from "vue-chartjs"
 import { getProblemBeatRate } from "~/oj/api"
 import { isDesktop } from "~/shared/composables/breakpoints"
 
-const beatRate = ref("0%")
+const beatRate = ref("0")
 
 const data = computed(() => {
   const status = problem.value!.statistic_info
@@ -32,24 +32,28 @@ const numbers = computed(() => {
       icon: "streamline-emojis:scroll",
       title: problem.value?.submission_number ?? 0,
       content: "总提交",
+      suffix: "",
     },
     {
       icon: "streamline-emojis:woman-raising-hand-2",
       title: problem.value?.accepted_number ?? 0,
       content: "通过数",
+      suffix: "",
     },
     {
       icon: "emojione:chart-increasing",
-      title: getACRate(
+      title: getACRateNumber(
         problem.value?.accepted_number ?? 0,
         problem.value?.submission_number ?? 0,
       ),
       content: "通过率",
+      suffix: "%",
     },
     {
       icon: "streamline-emojis:sparkles",
-      title: beatRate.value,
+      title: Number(beatRate.value),
       content: "你击败的用户",
+      suffix: "%",
     },
   ]
 })
@@ -98,12 +102,15 @@ onMounted(getBeatRate)
     </n-descriptions-item>
   </n-descriptions>
   <n-grid :cols="isDesktop ? 4 : 2" :x-gap="10" :y-gap="10" class="cards">
-    <n-gi v-for="item in numbers" :key="item.title">
+    <n-gi v-for="item in numbers" :key="item.content">
       <n-card hoverable>
         <n-flex align="center">
           <Icon :icon="item.icon" width="40" />
           <div>
-            <n-h2 class="number">{{ item.title }}</n-h2>
+            <n-h2 class="number">
+              <n-number-animation :to="item.title" />
+              <span v-if="item.suffix">{{ item.suffix }}</span>
+            </n-h2>
             <n-h4 class="number-label">{{ item.content }}</n-h4>
           </div>
         </n-flex>

src/oj/store/contest.ts

@@ -20,8 +20,9 @@ export const useContestStore = defineStore("contest", () => {
   let timer = 0
 
   const contestStatus = computed<ContestStatus>(() => {
-    const start = getTime(parseISO(contest.value!.start_time.toString()))
-    const end = getTime(parseISO(contest.value!.end_time.toString()))
+    if (!contest.value) return ContestStatus.initial
+    const start = getTime(parseISO(contest.value.start_time.toString()))
+    const end = getTime(parseISO(contest.value.end_time.toString()))
     if (start > now.value) {
       return ContestStatus.not_started
     } else if (end < now.value) {

src/oj/user/index.vue

@@ -79,11 +79,13 @@ const metrics = computed(() => {
       icon: "fluent-emoji:candy",
       title: profile.value?.accepted_number ?? 0,
       content: "已解决的题目数量",
+      animate: true,
     },
     {
       icon: "fluent-emoji:thinking-face",
       title: profile.value?.submission_number ?? 0,
       content: "总提交数量",
+      animate: true,
     },
   ]
 })
@@ -110,13 +112,16 @@ onMounted(init)
     :x-gap="10"
     :y-gap="10"
   >
-    <n-gi v-for="item in metrics" :key="item.title">
+    <n-gi v-for="item in metrics" :key="item.content">
       <n-card hoverable>
         <n-flex align="center">
           <Icon v-if="isDesktop" :icon="item.icon" width="50" />
           <div>
             <Component :is="isDesktop ? NH2 : NH3" class="number">
-              {{ item.title }}
+              <n-number-animation v-if="item.animate" :to="item.title" />
+              <template v-else>
+                {{ item.title }}
+              </template>
             </Component>
             <n-h4 class="number-label">{{ item.content }}</n-h4>
           </div>

src/shared/layout/admin.vue

@@ -9,110 +9,47 @@ const router = useRouter()
 const userStore = useUserStore()
 const options: MenuOption[] = [
   {
-    label: () => h(RouterLink, { to: "/" }, { default: () => "返回 OJ" }),
+    label: () => h(RouterLink, { to: "/" }, { default: () => "前台" }),
     key: "return to OJ",
   },
   {
-    label: () => h(RouterLink, { to: "/admin" }, { default: () => "首页" }),
+    label: () => h(RouterLink, { to: "/admin" }, { default: () => "管理" }),
     key: "admin home",
   },
-  { label: "题目", key: "problem", disabled: true },
   {
     label: () =>
-      h(
-        RouterLink,
-        { to: "/admin/problem/list" },
-        { default: () => "题目列表" },
-      ),
+      h(RouterLink, { to: "/admin/config" }, { default: () => "设置" }),
+    key: "admin config",
+  },
+  {
+    label: () =>
+      h(RouterLink, { to: "/admin/problem/list" }, { default: () => "题目" }),
     key: "admin problem list",
   },
   {
     label: () =>
-      h(
-        RouterLink,
-        { to: "/admin/problem/create" },
-        { default: () => "新建题目" },
-      ),
-    key: "admin problem create",
-  },
-  { label: "交流", key: "communication", disabled: true },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        { to: "/admin/comment/list" },
-        { default: () => "评论列表" },
-      ),
+      h(RouterLink, { to: "/admin/comment/list" }, { default: () => "评论" }),
     key: "admin comment list",
   },
   {
     label: () =>
-      h(
-        RouterLink,
-        { to: "/admin/message/list" },
-        { default: () => "消息列表" },
-      ),
-    key: "admin message list",
-  },
-  { label: "用户", key: "user", disabled: true },
-  {
-    label: () =>
-      h(RouterLink, { to: "/admin/user/list" }, { default: () => "用户列表" }),
+      h(RouterLink, { to: "/admin/user/list" }, { default: () => "用户" }),
     key: "admin user list",
   },
   {
     label: () =>
-      h(
-        RouterLink,
-        { to: "/admin/user/generate" },
-        { default: () => "批量生成" },
-      ),
-    key: "admin user generate",
-  },
-  { label: "比赛", key: "contest", disabled: true },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        { to: "/admin/contest/list" },
-        { default: () => "比赛列表" },
-      ),
+      h(RouterLink, { to: "/admin/contest/list" }, { default: () => "比赛" }),
     key: "admin contest list",
   },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        { to: "/admin/contest/create" },
-        { default: () => "新建比赛" },
-      ),
-    key: "admin contest create",
-  },
-  { label: "公告", key: "announcement", disabled: true },
   {
     label: () =>
       h(
         RouterLink,
         { to: "/admin/announcement/list" },
-        { default: () => "公告列表" },
+        { default: () => "公告" },
       ),
     key: "admin announcement list",
   },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        { to: "/admin/announcement/create" },
-        { default: () => "新建公告" },
-      ),
-    key: "admin announcement create",
-  },
-  { label: "其他", key: "other", disabled: true },
-  {
-    label: () =>
-      h(RouterLink, { to: "/admin/config" }, { default: () => "系统配置" }),
-    key: "admin config",
-  },
 ]
 
 const active = computed(() => (route.name as string) || "home")
@@ -131,7 +68,7 @@ onMounted(async () => {
 
 <template>
   <n-layout has-sider position="absolute">
-    <n-layout-sider width="140" bordered :native-scrollbar="false">
+    <n-layout-sider width="100" bordered :native-scrollbar="false">
       <n-menu :options="options" :value="active" />
     </n-layout-sider>
     <n-layout-content content-style="padding: 16px; min-width: 600px">

src/utils/constants.ts

@@ -15,6 +15,7 @@ export enum SubmissionStatus {
 }
 
 export enum ContestStatus {
+  initial = "2", // 这里不需要传入到后端，只是为了一开始加载数据的时候，做一个初始位
   not_started = "1",
   underway = "0",
   finished = "-1",
@@ -87,6 +88,11 @@ export const CONTEST_STATUS: {
     type: "error" | "success" | "warning"
   }
 } = {
+  // 这里不需要传入到后端，只是为了一开始加载数据的时候，做一个初始位
+  "2": {
+    name: "未开始",
+    type: "warning",
+  },
   "1": {
     name: "未开始",
     type: "warning",

src/utils/functions.ts

@@ -11,6 +11,16 @@ export function getACRate(acCount: number, totalCount: number) {
   return `${rate}%`
 }
 
+export function getACRateNumber(acCount: number, totalCount: number) {
+  let rate = ""
+  if (totalCount === 0) rate = "0.00"
+  else {
+    if (acCount >= totalCount) rate = "100.00"
+    else rate = ((acCount / totalCount) * 100).toFixed(2)
+  }
+  return Number(rate)
+}
+
 export function filterEmptyValue(object: any) {
   let query: any = {}
   Object.keys(object).forEach((key) => {
@@ -89,7 +99,7 @@ export function durationToDays(
   if (duration.days) {
     result += duration.days + "天"
   }
-  return !!result ? result :"一天以内" 
+  return !!result ? result : "一天以内"
 }
 
 export function secondsToDuration(seconds: number): string {