add contest problem.

src/oj/problem/components/ProblemInfo.vue

@@ -14,11 +14,10 @@ const data = computed(() => {
   const status = props.problem.statistic_info
   const labels = []
   for (let i in status) {
-    if (status[i] === 0) {
-      delete status[i]
+    if (status[i] !== 0) {
+      // @ts-ignore
+      labels.push(JUDGE_STATUS[i]["name"])
     }
-    // @ts-ignore
-    labels.push(JUDGE_STATUS[i]["name"])
   }
   return {
     labels,

src/oj/problem/components/ProblemStatus.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Select, SemiSelect } from "@element-plus/icons-vue"
+import { useThemeVars } from "naive-ui"
+
+const theme = useThemeVars()
+const props = defineProps<{
+  status: "not_test" | "passed" | "failed"
+}>()
+
+const showIcon = computed(() => props.status !== "not_test")
+const color = computed(() => {
+  if (props.status === "passed") return theme.value.successColor
+  if (props.status === "failed") return theme.value.errorColor
+})
+
+const Icon = computed(() => {
+  if (props.status === "passed") return Select
+  if (props.status === "failed") return SemiSelect
+})
+</script>
+
+<template>
+  <n-icon v-if="showIcon" :color="color">
+    <component :is="Icon"></component>
+  </n-icon>
+</template>
+
+<style scoped></style>

src/oj/problem/list.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { useUserStore } from "~/shared/store/user"
 import { filterEmptyValue, getTagColor } from "utils/functions"
+import { ProblemFiltered } from "utils/types"
 import { isDesktop } from "~/shared/composables/breakpoints"
 import { getProblemList, getProblemTagList, getRandomProblemID } from "oj/api"
 
 import Pagination from "~/shared/Pagination.vue"
-import { DataTableColumn, NIcon, NSpace, NTag, useThemeVars } from "naive-ui"
-import { Select, SemiSelect } from "@element-plus/icons-vue"
+import { DataTableColumn, NSpace, NTag } from "naive-ui"
+import ProblemStatus from "./components/ProblemStatus.vue"
 
 interface Query {
   keyword: string
@@ -16,16 +17,6 @@ interface Query {
   limit: number
 }
 
-interface ProblemFiltered {
-  _id: string
-  title: string
-  difficulty: "简单" | "中等" | "困难"
-  tags: string[]
-  submission: number
-  rate: string
-  status: "not_test" | "passed" | "failed"
-}
-
 const difficultyOptions = [
   { label: "全部", value: "" },
   { label: "简单", value: "Low" },
@@ -35,7 +26,7 @@ const difficultyOptions = [
 
 const router = useRouter()
 const route = useRoute()
-const theme = useThemeVars()
+
 const userStore = useUserStore()
 const problems = ref<ProblemFiltered[]>([])
 const total = ref(0)
@@ -129,18 +120,10 @@ const columns: DataTableColumn<ProblemFiltered>[] = [
     title: "状态",
     key: "status",
     width: 60,
-    render: (row) => {
-      if (row.status === "passed") {
-        return h(NIcon, { color: theme.value.successColor }, () => h(Select))
-      } else if (row.status === "failed") {
-        return h(NIcon, { color: theme.value.errorColor }, () => h(SemiSelect))
-      } else {
-        return null
-      }
-    },
+    render: (row) => h(ProblemStatus, { status: row.status }),
   },
   { title: "编号", key: "_id", width: 100 },
-  { title: "标题", key: "title", minWidth: 200 },
+  { title: "题目", key: "title", minWidth: 200 },
   {
     title: "难度",
     key: "difficulty",