problem list.

src/admin/api.ts

@@ -29,3 +29,15 @@ export async function getProblemList(
     total: res.data.total,
   }
 }
+
+export function deleteProblem(id: number) {
+  return http.delete("admin/problem", { params: { id } })
+}
+
+export function editProblem(problem: Problem) {
+  return http.put("admin/problem", problem)
+}
+
+export function getProblem(id: number) {
+  return http.get("admin/problem", { params: { id } })
+}

src/admin/problem/components/DeleteProblem.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { deleteProblem } from "~/admin/api"
+
+interface Props {
+  problemID: number
+}
+const props = defineProps<Props>()
+const emit = defineEmits(["deleted"])
+const message = useMessage()
+
+async function handleDeleteProblem(problemID: number) {
+  await deleteProblem(problemID)
+  message.success("删除成功")
+  emit("deleted")
+}
+</script>
+<template>
+  <n-popconfirm @positive-click="() => handleDeleteProblem(props.problemID)">
+    <template #trigger>
+      <n-button tertiary size="small" type="error">删除</n-button>
+    </template>
+    确定删除这道题目吗？相关的提交也会被相应删除哦 😯
+  </n-popconfirm>
+</template>

src/admin/problem/components/DownloadTestcases.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+const props = defineProps<{ problemID: number }>()
+
+function download() {
+  console.log(props.problemID)
+}
+</script>
+<template>
+  <n-tooltip>
+    <template #trigger>
+      <n-button size="small" tertiary @click="download">下载</n-button>
+    </template>
+    下载测试用例
+  </n-tooltip>
+</template>

src/admin/problem/list.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { getProblemList } from "../api"
+import { getProblemList, getProblem, editProblem } from "../api"
 import Pagination from "~/shared/Pagination.vue"
 import { DataTableColumn, NButton, NSwitch } from "naive-ui"
 import { AdminProblemFiltered } from "~/utils/types"
 import { parseTime } from "~/utils/functions"
+import DownloadTestcases from "./components/DownloadTestcases.vue"
+import DeleteProblem from "./components/DeleteProblem.vue"
+
+const router = useRouter()
 
 const total = ref(0)
-const problems = ref([])
+const problems = ref<AdminProblemFiltered[]>([])
 const query = reactive({
   limit: 10,
   page: 1,
@@ -14,10 +18,10 @@ const query = reactive({
 })
 
 const columns: DataTableColumn<AdminProblemFiltered>[] = [
-  { title: "ID", key: "id", width: 100 },
+  { title: "ID", key: "id", width: 80 },
   { title: "显示编号", key: "_id", width: 100 },
   { title: "标题", key: "title", minWidth: 300 },
-  { title: "出题人", key: "username", width: 100 },
+  { title: "出题人", key: "username", width: 120 },
   {
     title: "创建时间",
     key: "create_time",
@@ -27,30 +31,40 @@ const columns: DataTableColumn<AdminProblemFiltered>[] = [
   {
     title: "可见",
     key: "visible",
-    render: (row) => h(NSwitch, { value: row.visible }),
+    render: (row) =>
+      h(NSwitch, {
+        value: row.visible,
+        size: "small",
+        rubberBand: false,
+        onUpdateValue: () => toggleVisible(row.id),
+      }),
   },
   {
     key: "edit",
-    render: () =>
+    render: (row) =>
       h(
         NButton,
-        { type: "primary", size: "small", tertiary: true },
+        {
+          type: "primary",
+          size: "small",
+          tertiary: true,
+          onClick: () =>
+            router.push({
+              name: "problem edit",
+              params: { problemID: row.id },
+            }),
+        },
         { default: () => "编辑" }
       ),
   },
   {
     key: "delete",
-    render: () =>
-      h(
-        NButton,
-        { type: "error", size: "small", tertiary: true },
-        { default: () => "删除" }
-      ),
+    render: (row) =>
+      h(DeleteProblem, { problemID: row.id, onDeleted: listProblems }),
   },
   {
     key: "download",
-    render: () =>
-      h(NButton, { size: "small", tertiary: true }, { default: () => "下载" }),
+    render: (row) => h(DownloadTestcases, { problemID: row.id }),
   },
 ]
 
@@ -63,15 +77,26 @@ async function listProblems() {
   problems.value = res.results
 }
 
-onMounted(listProblems)
+// 这里比较傻逼，因为我传进来的时候 filter 了而且只有 edit problem 一个接口，所以只能先 get 再 edit
+async function toggleVisible(problemID: number) {
+  const res = await getProblem(problemID)
+  await editProblem({ ...res.data, visible: !res.data.visible })
+  problems.value = problems.value.map((it) => {
+    if (it.id === problemID) {
+      it.visible = !it.visible
+    }
+    return it
+  })
+}
 
+onMounted(listProblems)
 watch(query, listProblems, { deep: true })
 </script>
 
 <template>
   <n-form inline label-placement="left">
-    <n-form-item label="标题">
-      <n-input v-model:value="query.keyword" />
+    <n-form-item>
+      <n-input v-model:value="query.keyword" placeholder="输入标题关键字" />
     </n-form-item>
   </n-form>
   <n-data-table striped size="small" :columns="columns" :data="problems" />

src/components.d.ts

@@ -9,29 +9,31 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    IEpBell: typeof import('~icons/ep/bell')['default']
-    IEpCaretRight: typeof import('~icons/ep/caret-right')['default']
-    IEpLoading: typeof import('~icons/ep/loading')['default']
-    IEpLock: typeof import('~icons/ep/lock')['default']
+    IEpBell: typeof import("~icons/ep/bell")["default"]
+    IEpCaretRight: typeof import("~icons/ep/caret-right")["default"]
+    IEpLoading: typeof import("~icons/ep/loading")["default"]
+    IEpLock: typeof import("~icons/ep/lock")["default"]
     IEpMenu: typeof import('~icons/ep/menu')['default']
     IEpMoon: typeof import('~icons/ep/moon')['default']
-    IEpMoreFilled: typeof import('~icons/ep/more-filled')['default']
+    IEpMoreFilled: typeof import("~icons/ep/more-filled")["default"]
     IEpSunny: typeof import('~icons/ep/sunny')['default']
     NAlert: typeof import('naive-ui')['NAlert']
     NAvatar: typeof import("naive-ui")["NAvatar"]
+    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
+    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
-    NCard: typeof import('naive-ui')['NCard']
+    NCard: typeof import("naive-ui")["NCard"]
     NCode: typeof import("naive-ui")["NCode"]
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
-    NDescriptions: typeof import('naive-ui')['NDescriptions']
-    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
+    NDescriptions: typeof import("naive-ui")["NDescriptions"]
+    NDescriptionsItem: typeof import("naive-ui")["NDescriptionsItem"]
     NDropdown: typeof import('naive-ui')['NDropdown']
-    NEmpty: typeof import('naive-ui')['NEmpty']
+    NEmpty: typeof import("naive-ui")["NEmpty"]
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
-    NGi: typeof import('naive-ui')['NGi']
-    NGrid: typeof import('naive-ui')['NGrid']
+    NGi: typeof import("naive-ui")["NGi"]
+    NGrid: typeof import("naive-ui")["NGrid"]
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
@@ -42,14 +44,15 @@ declare module '@vue/runtime-core' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NPagination: typeof import('naive-ui')['NPagination']
-    NPopover: typeof import('naive-ui')['NPopover']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NPopconfirm: typeof import('naive-ui')['NPopconfirm']
+    NPopover: typeof import("naive-ui")["NPopover"]
+    NScrollbar: typeof import("naive-ui")["NScrollbar"]
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
-    NSwitch: typeof import('naive-ui')['NSwitch']
-    NTabPane: typeof import('naive-ui')['NTabPane']
-    NTabs: typeof import('naive-ui')['NTabs']
-    NTag: typeof import('naive-ui')['NTag']
+    NSwitch: typeof import("naive-ui")["NSwitch"]
+    NTabPane: typeof import("naive-ui")["NTabPane"]
+    NTabs: typeof import("naive-ui")["NTabs"]
+    NTag: typeof import("naive-ui")["NTag"]
     NTooltip: typeof import('naive-ui')['NTooltip']
     NUpload: typeof import("naive-ui")["NUpload"]
     RouterLink: typeof import('vue-router')['RouterLink']

src/routes.ts

@@ -140,7 +140,7 @@ export const routes: RouteRecordRaw[] = [
         component: () => import("admin/problem/detail.vue"),
       },
       {
-        path: "problem/:problemID/edit",
+        path: "problem/edit/:problemID",
         name: "problem edit",
         component: () => import("admin/problem/detail.vue"),
         props: true,
@@ -156,7 +156,7 @@ export const routes: RouteRecordRaw[] = [
         component: () => import("admin/contest/detail.vue"),
       },
       {
-        path: "contest/:contestID/edit",
+        path: "contest/edit/:contestID",
         name: "contest edit",
         component: () => import("admin/contest/detail.vue"),
         props: true,
@@ -174,7 +174,7 @@ export const routes: RouteRecordRaw[] = [
         props: true,
       },
       {
-        path: "contest/:contestID/problem/:problemID/edit",
+        path: "contest/:contestID/problem/edit/:problemID",
         name: "contest problem edit",
         component: () => import("admin/problem/detail.vue"),
         props: true,

src/shared/layout/admin.vue

@@ -94,7 +94,7 @@ const active = computed(() => (route.name as string) || "home")
     <n-layout-sider bordered :native-scrollbar="false">
       <n-menu :options="options" :value="active" />
     </n-layout-sider>
-    <n-layout-content :native-scrollbar="false" content-style="padding: 16px">
+    <n-layout-content content-style="padding: 16px">
       <router-view></router-view>
     </n-layout-content>
   </n-layout>