use ??.

src/oj/problem/components/ProblemInfo.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { DIFFICULTY } from "../../../utils/constants"
+import { getACRate, getTagColor, parseTime } from "../../../utils/functions"
+import { isDesktop } from "../../../utils/breakpoints"
+import { Problem } from "../../../utils/types"
+
+interface Props {
+  problem: Problem
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <el-descriptions border :column="isDesktop ? 3 : 1">
+    <el-descriptions-item label="编号">
+      {{ problem._id }}
+    </el-descriptions-item>
+    <el-descriptions-item label="出题人">
+      {{ problem.created_by.username }}
+    </el-descriptions-item>
+    <el-descriptions-item label="创建时间">
+      {{ parseTime(problem.create_time) }}
+    </el-descriptions-item>
+
+    <el-descriptions-item label="时间限制">
+      {{ problem.time_limit }}毫秒
+    </el-descriptions-item>
+    <el-descriptions-item label="内存限制">
+      {{ problem.memory_limit }}MB
+    </el-descriptions-item>
+    <el-descriptions-item label="难度">
+      <el-tag
+        disable-transitions
+        :type="(getTagColor(problem.difficulty) as any)"
+      >
+        {{ DIFFICULTY[problem.difficulty] }}
+      </el-tag>
+    </el-descriptions-item>
+
+    <el-descriptions-item label="提交正确">
+      {{ problem.accepted_number }}次
+    </el-descriptions-item>
+    <el-descriptions-item label="提交错误">
+      {{ problem.submission_number - problem.accepted_number }}次
+    </el-descriptions-item>
+    <el-descriptions-item label="正确率">
+      {{ getACRate(problem.accepted_number, problem.submission_number) }}
+    </el-descriptions-item>
+
+    <el-descriptions-item :span="3" label="标签">
+      <el-space>
+        <el-tag
+          disable-transitions
+          type="info"
+          v-for="tag in problem.tags"
+          :key="tag"
+        >
+          {{ tag }}
+        </el-tag>
+      </el-space>
+    </el-descriptions-item>
+  </el-descriptions>
+</template>