add content.

src/oj/problem/detail.vue

@@ -32,18 +32,19 @@ onMounted(() => {
 
 <template>
   <el-row>
-    <el-col :span="12">
+    <el-col :span="14">
       <el-tabs type="border-card">
         <el-tab-pane label="题目描述">
           <ProblemContent :problem="problem" />
         </el-tab-pane>
+        <el-tab-pane label="比赛信息"></el-tab-pane>
         <el-tab-pane label="题目信息">
           <ProblemInfo :problem="problem" />
         </el-tab-pane>
         <el-tab-pane label="提交信息">3</el-tab-pane>
       </el-tabs>
     </el-col>
-    <el-col :span="12">
+    <el-col :span="10">
       <Editor :value="code" :language="language" />
     </el-col>
   </el-row>

src/oj/problem/editor.vue

@@ -128,6 +128,7 @@ function editorInit() {
   height: 500px;
 }
 .actions {
-  margin-top: 20px;
+  margin-top: 16px;
+  float: right;
 }
 </style>

src/oj/problem/problem-content.vue

@@ -2,6 +2,61 @@
 const { problem } = defineProps(["problem"])
 </script>
 
-<template></template>
+<template>
+  <el-scrollbar height="calc(100vh - 171px)" noresize>
+    <h1>{{ problem.title }}</h1>
+    <p class="title">描述</p>
+    <div class="content" v-html="problem.description"></div>
 
-<style scoped></style>
+    <p class="title">输入</p>
+    <div class="content" v-html="problem.input_description"></div>
+
+    <p class="title">输出</p>
+    <div class="content" v-html="problem.output_description"></div>
+
+    <div v-if="problem.hint">
+      <p class="title">提示</p>
+      <el-card shadow="none">
+        <div class="content" v-html="problem.hint"></div>
+      </el-card>
+    </div>
+
+    <div v-for="(sample, index) of problem.samples" :key="index">
+      <p class="title">测试用例 {{ index + 1 }}</p>
+      <el-descriptions border direction="vertical">
+        <el-descriptions-item width="50%" label="输入">
+          <div class="testcase">{{ sample.input }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item width="50%" label="输出">
+          <div class="testcase">{{ sample.output }}</div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+
+    <div v-if="problem.source">
+      <p class="title">来源</p>
+      <div class="content" v-html="problem.source"></div>
+    </div>
+  </el-scrollbar>
+</template>
+
+<style scoped>
+.title {
+  font-size: 20px;
+  margin: 24px 0 16px 0;
+  color: var(--el-color-primary);
+}
+
+.content {
+  line-height: 2;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+}
+
+.testcase {
+  white-space: pre;
+}
+</style>

src/oj/problem/problem-info.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { defineProps } from "vue"
 import { DIFFICULTY, getTagColor } from "../../utils/constants"
+import { getACRate } from "../../utils/functions"
 
 const { problem } = defineProps(["problem"])
 </script>
 
 <template>
   <el-descriptions border>
-    <el-descriptions-item label="ID">
+    <el-descriptions-item label="编号">
       {{ problem._id }}
     </el-descriptions-item>
     <el-descriptions-item label="出题人">
@@ -27,7 +28,18 @@ const { problem } = defineProps(["problem"])
     <el-descriptions-item label="类型">
       {{ problem.rule_type }}
     </el-descriptions-item>
-    <el-descriptions-item label="标签">
+
+    <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 type="info" v-for="tag in problem.tags" :key="tag">
           {{ tag }}