announcement.

src/admin/announcement/components/Actions.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { deleteAnnouncement } from "~/admin/api"
+
+interface Props {
+  announcementID: number
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(["deleted"])
+const router = useRouter()
+const message = useMessage()
+
+function goEdit() {
+  router.push({
+    name: "admin announcement edit",
+    params: { announcementID: props.announcementID },
+  })
+}
+
+async function handleDelete() {
+  await deleteAnnouncement(props.announcementID)
+  message.success("删除成功")
+  emit("deleted")
+}
+
+function goDetail() {}
+</script>
+<template>
+  <n-space>
+    <n-button size="small" type="success" secondary @click="goEdit">
+      编辑
+    </n-button>
+    <n-button size="small" type="info" secondary @click="goDetail">
+      查看
+    </n-button>
+    <n-popconfirm @positive-click="handleDelete">
+      <template #trigger>
+        <n-button size="small" type="error" secondary>删除</n-button>
+      </template>
+      确定删除这条公告吗？
+    </n-popconfirm>
+  </n-space>
+</template>
+<style scoped></style>

src/admin/announcement/detail.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import TextEditor from "~/shared/components/TextEditor.vue"
+import { createAnnouncement, editAnnouncement, getAnnouncement } from "../api"
+import { AnnouncementEdit } from "~/utils/types"
+
+interface Props {
+  announcementID?: string
+}
+
+const route = useRoute()
+const router = useRouter()
+const message = useMessage()
+const props = defineProps<Props>()
+const [ready, toggleReady] = useToggle()
+
+const announcement = reactive<AnnouncementEdit>({
+  id: 0,
+  title: "",
+  content: "",
+  visible: false,
+})
+
+async function init() {
+  if (!props.announcementID) {
+    toggleReady(true)
+    return
+  }
+  const id = parseInt(route.params.announcementID as string)
+  const res = await getAnnouncement(id)
+  toggleReady(true)
+  announcement.id = id
+  announcement.title = res.data.title
+  announcement.content = res.data.content
+  announcement.visible = res.data.visible
+}
+
+async function submit() {
+  if (announcement.content === "<p><br></p>") {
+    announcement.content = ""
+  }
+  if (!announcement.title || !announcement.content) {
+    message.error("标题和正文必填")
+    return
+  }
+  const api = {
+    "admin announcement create": createAnnouncement,
+    "admin announcement edit": editAnnouncement,
+  }[<string>route.name]
+  try {
+    await api!(announcement)
+    if (route.name === "admin announcement create") {
+      message.success("成功新建公告 💐")
+    } else {
+      message.success("修改已保存")
+    }
+    router.push({ name: "admin announcement list" })
+  } catch (err: any) {
+    message.error(err.data)
+  }
+}
+
+onMounted(init)
+</script>
+<template>
+  <h2 class="title">
+    {{ route.name === "admin announcement create" ? "新建公告" : "编辑公告" }}
+  </h2>
+  <n-form inline>
+    <n-form-item label="标题">
+      <n-input class="contestTitle" v-model:value="announcement.title" />
+    </n-form-item>
+    <n-form-item label="可见">
+      <n-switch v-model:value="announcement.visible" />
+    </n-form-item>
+  </n-form>
+  <TextEditor
+    v-if="ready"
+    title="正文"
+    v-model:value="announcement.content"
+    :min-height="200"
+  />
+  <n-space justify="end">
+    <n-button type="primary" @click="submit">保存</n-button>
+  </n-space>
+</template>
+<style scoped>
+.title {
+  margin-top: 0;
+}
+
+.contestTitle {
+  width: 400px;
+}
+</style>

src/admin/announcement/list.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import Pagination from "~/shared/components/Pagination.vue"
+import Actions from "./components/Actions.vue"
+import { Announcement } from "~/utils/types"
+import { editAnnouncement, getAnnouncementList } from "../api"
+import { parseTime } from "~/utils/functions"
+import { NSwitch } from "naive-ui"
+
+const total = ref(0)
+const query = reactive({
+  limit: 10,
+  page: 1,
+})
+const announcements = ref<Announcement[]>([])
+
+const columns: DataTableColumn<Announcement>[] = [
+  { title: "ID", key: "id", width: 60 },
+  { title: "标题", key: "title", minWidth: 300 },
+  {
+    title: "创建时间",
+    key: "create_time",
+    width: 180,
+    render: (row) => parseTime(row.create_time, "YYYY-MM-DD HH:mm:ss"),
+  },
+  {
+    title: "上次更新时间",
+    key: "last_update_time",
+    width: 180,
+    render: (row) => parseTime(row.last_update_time, "YYYY-MM-DD HH:mm:ss"),
+  },
+  {
+    title: "作者",
+    key: "created_by",
+    width: 80,
+    render: (row) => row.created_by.username,
+  },
+  {
+    title: "可见",
+    key: "visible",
+    render: (row) =>
+      h(NSwitch, {
+        value: row.visible,
+        size: "small",
+        rubberBand: false,
+        onUpdateValue: () => toggleVisible(row),
+      }),
+  },
+  {
+    title: "选项",
+    key: "actions",
+    width: 200,
+    render: (row) =>
+      h(Actions, { announcementID: row.id, onDeleted: listAnnouncements }),
+  },
+]
+
+async function toggleVisible(announcement: Announcement) {
+  announcement.visible = !announcement.visible
+  editAnnouncement({
+    id: announcement.id,
+    title: announcement.title,
+    content: announcement.content,
+    visible: announcement.visible,
+  })
+}
+
+async function listAnnouncements() {
+  const offset = (query.page - 1) * query.limit
+  const res = await getAnnouncementList(offset, query.limit)
+  announcements.value = res.data.results
+  total.value = res.data.total
+}
+
+onMounted(listAnnouncements)
+watch(query, listAnnouncements, { deep: true })
+</script>
+
+<template>
+  <h2 class="title">网站公告</h2>
+  <n-data-table striped size="small" :columns="columns" :data="announcements" />
+  <Pagination
+    :total="total"
+    v-model:limit="query.limit"
+    v-model:page="query.page"
+  />
+</template>
+
+<style scoped>
+.title {
+  margin: 0 0 16px;
+}
+</style>

src/admin/api.ts

@@ -1,6 +1,8 @@
 import http from "utils/http"
 import {
   AdminProblem,
+  Announcement,
+  AnnouncementEdit,
   BlankContest,
   BlankProblem,
   Contest,
@@ -175,3 +177,25 @@ export function getJudgeServer() {
 export function deleteJudgeServer(hostname: string) {
   return http.delete("admin/judge_server", { params: { hostname } })
 }
+
+export function getAnnouncementList(offset = 0, limit = 10) {
+  return http.get("admin/announcement", {
+    params: { paging: true, offset, limit },
+  })
+}
+
+export function getAnnouncement(id: number) {
+  return http.get<Announcement>("admin/announcement", { params: { id } })
+}
+
+export function deleteAnnouncement(id: number) {
+  return http.delete("admin/announcement", { params: { id } })
+}
+
+export function editAnnouncement(announcement: AnnouncementEdit) {
+  return http.put("admin/announcement", announcement)
+}
+
+export function createAnnouncement(announcement: AnnouncementEdit) {
+  return http.post("admin/announcement", announcement)
+}

src/admin/contest/detail.vue

@@ -29,7 +29,7 @@ const contest = reactive<BlankContest & { id: number }>({
   rule_type: "ACM",
   password: "",
   real_time_rank: true,
-  visible: true,
+  visible: false,
   allowed_ip_ranges: [],
 })
 
@@ -112,7 +112,9 @@ onMounted(getContestDetail)
     v-model:value="contest.description"
     :min-height="200"
   />
-  <n-button type="primary" @click="submit">保存</n-button>
+  <n-space justify="end">
+    <n-button type="primary" @click="submit">保存</n-button>
+  </n-space>
 </template>
 
 <style scoped>

src/admin/problem/detail.vue

@@ -46,7 +46,7 @@ const problem = reactive<BlankProblem>({
   time_limit: 1000,
   memory_limit: 64,
   difficulty: "Low",
-  visible: true,
+  visible: false,
   share_submission: false,
   tags: [],
   languages: ["C", "Python3"],

src/admin/setting/announcement.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>announcement</div>
-</template>
-
-<style scoped></style>

src/admin/user/list.vue

@@ -3,7 +3,7 @@ import { DataTableRowKey, SelectOption } from "naive-ui"
 import Pagination from "~/shared/components/Pagination.vue"
 import { parseTime } from "~/utils/functions"
 import { User } from "~/utils/types"
-import { getUserList, deleteUsers, editUser } from "../api"
+import { getUserList, deleteUsers, editUser, importUsers } from "../api"
 import Actions from "./components/Actions.vue"
 import Name from "./components/Name.vue"
 
@@ -17,6 +17,7 @@ const query = reactive({
   page: 1,
   keyword: "",
 })
+const [create, toggleCreate] = useToggle(false)
 const password = ref("")
 const userIDs = ref<DataTableRowKey[]>([])
 
@@ -93,14 +94,34 @@ async function onUserBanned(user: User) {
   })
 }
 
-async function onOpenEditModal(user: User) {
+function createNewUser() {
+  toggleCreate(true)
+  userEditing.value = {
+    id: 0,
+    username: "",
+    real_name: "",
+    email: "",
+    admin_type: "Regular User",
+    problem_permission: "",
+    create_time: new Date(),
+    last_login: new Date(),
+    two_factor_auth: false,
+    open_api: false,
+    is_disabled: false,
+    password: "",
+  }
+  password.value = ""
+}
+
+function onOpenEditModal(user: User) {
   userEditing.value = user
   password.value = ""
 }
 
-async function onCloseEditModal() {
+function onCloseEditModal() {
   userEditing.value = null
   password.value = ""
+  toggleCreate(false)
 }
 
 async function handleEditUser() {
@@ -109,10 +130,24 @@ async function handleEditUser() {
     message.error("密码长度不得小于 6")
     return
   }
-  const user = Object.assign(userEditing.value, { password: password.value })
-  await editUser(user)
+  if (create) {
+    const newUser = [
+      [
+        userEditing.value.username,
+        password.value,
+        userEditing.value.email,
+        userEditing.value.real_name,
+      ],
+    ]
+    await importUsers(newUser)
+    listUsers()
+  } else {
+    const user = Object.assign(userEditing.value, { password: password.value })
+    await editUser(user)
+  }
   userEditing.value = null
   password.value = ""
+  toggleCreate(false)
 }
 
 onMounted(listUsers)
@@ -121,7 +156,10 @@ watch(query, listUsers, { deep: true })
 
 <template>
   <n-space class="titleWrapper" justify="space-between">
-    <h2 class="title">用户列表</h2>
+    <n-space>
+      <h2 class="title">用户列表</h2>
+      <n-button type="primary" @click="createNewUser">新建用户</n-button>
+    </n-space>
     <n-space>
       <n-popconfirm
         v-if="userIDs.length"
@@ -152,7 +190,7 @@ watch(query, listUsers, { deep: true })
     :mask-closable="false"
     :show="!!userEditing"
     preset="card"
-    title="编辑用户"
+    :title="create ? '新建用户' : '编辑用户'"
     style="width: 700px"
     @close="onCloseEditModal"
   >
@@ -173,7 +211,7 @@ watch(query, listUsers, { deep: true })
         <n-form-item-gi :span="1" label="类型">
           <n-select v-model:value="userEditing.admin_type" :options="options" />
         </n-form-item-gi>
-        <n-form-item-gi :span="1" label="是否封禁">
+        <n-form-item-gi v-if="!create" :span="1" label="是否封禁">
           <n-switch v-model:value="userEditing.is_disabled">封号</n-switch>
         </n-form-item-gi>
       </n-grid>

src/routes.ts

@@ -97,11 +97,6 @@ export const admins: RouteRecordRaw = {
       name: "admin config",
       component: () => import("admin/setting/config.vue"),
     },
-    {
-      path: "announcement",
-      name: "admin announcement",
-      component: () => import("admin/setting/announcement.vue"),
-    },
     {
       path: "user/list",
       name: "admin user list",
@@ -162,5 +157,21 @@ export const admins: RouteRecordRaw = {
       component: () => import("admin/problem/detail.vue"),
       props: true,
     },
+    {
+      path: "announcement/list",
+      name: "admin announcement list",
+      component: () => import("admin/announcement/list.vue"),
+    },
+    {
+      path: "announcement/create",
+      name: "admin announcement create",
+      component: () => import("admin/announcement/detail.vue"),
+    },
+    {
+      path: "announcement/edit/:announcementID",
+      name: "admin announcement edit",
+      component: () => import("admin/announcement/detail.vue"),
+      props: true,
+    },
   ],
 }

src/shared/layout/admin.vue

@@ -16,11 +16,7 @@ const options: MenuOption[] = [
     label: () => h(RouterLink, { to: "/admin" }, { default: () => "首页" }),
     key: "admin home",
   },
-  {
-    label: "题目",
-    key: "problem",
-    disabled: true,
-  },
+  { label: "题目", key: "problem", disabled: true },
   {
     label: () =>
       h(
@@ -73,20 +69,30 @@ const options: MenuOption[] = [
       ),
     key: "admin contest create",
   },
-  { label: "其他", key: "other", disabled: true },
+  { label: "公告", key: "announcement", disabled: true },
   {
     label: () =>
-      h(RouterLink, { to: "/admin/config" }, { default: () => "系统配置" }),
-    key: "admin config",
+      h(
+        RouterLink,
+        { to: "/admin/announcement/list" },
+        { default: () => "公告列表" },
+      ),
+    key: "admin announcement list",
   },
   {
     label: () =>
       h(
         RouterLink,
-        { to: "/admin/announcement" },
-        { default: () => "公告配置" },
+        { to: "/admin/announcement/create" },
+        { default: () => "新建公告" },
       ),
-    key: "admin announcement",
+    key: "admin announcement create",
+  },
+  { label: "其他", key: "other", disabled: true },
+  {
+    label: () =>
+      h(RouterLink, { to: "/admin/config" }, { default: () => "系统配置" }),
+    key: "admin config",
   },
 ]
 

src/utils/types.ts

@@ -330,3 +330,20 @@ export interface Server {
   service_url: string
   is_disabled: boolean
 }
+
+export interface Announcement {
+  id: number
+  created_by: SampleUser
+  title: string
+  content: string
+  create_time: Date
+  last_update_time: Date
+  visible: boolean
+}
+
+export interface AnnouncementEdit {
+  id: number
+  title: string
+  content: string
+  visible: boolean
+}

vite.config.ts

@@ -6,7 +6,7 @@ import AutoImport from "unplugin-auto-import/vite"
 import Components from "unplugin-vue-components/vite"
 import { NaiveUiResolver } from "unplugin-vue-components/resolvers"
 
-const dev = false
+const dev = true
 const url = dev ? "https://ojtest.hyyz.izhai.net" : "https://oj.xuyue.cc"
 const proxyConfig = {
   target: url,