update.

src/admin/api.ts

@@ -1,29 +1,6 @@
 import http from "utils/http"
-import { DIFFICULTY } from "~/utils/constants"
-import { getACRate } from "~/utils/functions"
 import { Problem } from "~/utils/types"
 
-function filterResult(result: Problem) {
-  const newResult = {
-    id: result.id,
-    _id: result._id,
-    title: result.title,
-    difficulty: DIFFICULTY[result.difficulty],
-    tags: result.tags,
-    submission: result.submission_number,
-    rate: getACRate(result.accepted_number, result.submission_number),
-    status: "",
-  }
-  if (result.my_status === null || result.my_status === undefined) {
-    newResult.status = "not_test"
-  } else if (result.my_status === 0) {
-    newResult.status = "passed"
-  } else {
-    newResult.status = "failed"
-  }
-  return newResult
-}
-
 export async function getProblemList(
   offset = 0,
   limit = 10,
@@ -41,7 +18,14 @@ export async function getProblemList(
   })
   const res = await http.get("admin/problem", { params })
   return {
-    results: res.data.results.map(filterResult),
+    results: res.data.results.map((result: Problem) => ({
+      id: result.id,
+      _id: result._id,
+      title: result.title,
+      username: result.created_by.username,
+      create_time: result.create_time,
+      visible: result.visible,
+    })),
     total: res.data.total,
   }
 }

src/admin/problem/list.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { getProblemList } from "../api"
 import Pagination from "~/shared/Pagination.vue"
-import { DataTableColumn } from "naive-ui"
-import { ProblemFiltered } from "~/utils/types"
+import { DataTableColumn, NButton, NSwitch } from "naive-ui"
+import { AdminProblemFiltered } from "~/utils/types"
+import { parseTime } from "~/utils/functions"
 
 const total = ref(0)
 const problems = ref([])
@@ -12,8 +13,45 @@ const query = reactive({
   keyword: "",
 })
 
-const columns: DataTableColumn<ProblemFiltered>[] = [
-  { title: "编号", key: "_id", width: 100 },
+const columns: DataTableColumn<AdminProblemFiltered>[] = [
+  { title: "ID", key: "id", width: 100 },
+  { title: "显示编号", key: "_id", width: 100 },
+  { title: "标题", key: "title", minWidth: 300 },
+  { title: "出题人", key: "username", width: 100 },
+  {
+    title: "创建时间",
+    key: "create_time",
+    width: 200,
+    render: (row) => parseTime(row.create_time, "YYYY-MM-DD hh:mm:ss"),
+  },
+  {
+    title: "可见",
+    key: "visible",
+    render: (row) => h(NSwitch, { value: row.visible }),
+  },
+  {
+    key: "edit",
+    render: () =>
+      h(
+        NButton,
+        { type: "primary", size: "small", tertiary: true },
+        { default: () => "编辑" }
+      ),
+  },
+  {
+    key: "delete",
+    render: () =>
+      h(
+        NButton,
+        { type: "error", size: "small", tertiary: true },
+        { default: () => "删除" }
+      ),
+  },
+  {
+    key: "download",
+    render: () =>
+      h(NButton, { size: "small", tertiary: true }, { default: () => "下载" }),
+  },
 ]
 
 async function listProblems() {
@@ -26,10 +64,17 @@ async function listProblems() {
 }
 
 onMounted(listProblems)
+
+watch(query, listProblems, { deep: true })
 </script>
 
 <template>
-  <n-data-table :columns="columns" :data="problems" />
+  <n-form inline label-placement="left">
+    <n-form-item label="标题">
+      <n-input v-model:value="query.keyword" />
+    </n-form-item>
+  </n-form>
+  <n-data-table striped size="small" :columns="columns" :data="problems" />
   <Pagination
     :total="total"
     v-model:limit="query.limit"