add content.

components.d.ts

@@ -9,10 +9,10 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDescription: typeof import('element-plus/es')['ElDescription']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElTable: typeof import('element-plus/es')['ElTable']

package-lock.json

@@ -12,6 +12,7 @@
         "axios": "^1.2.2",
         "element-plus": "^2.2.28",
         "monaco-editor": "^0.34.1",
+        "normalize.css": "^8.0.1",
         "pinia": "^2.0.28",
         "vue": "^3.2.45",
         "vue-router": "^4.1.6"
@@ -1470,6 +1471,11 @@
       "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
     },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmmirror.com/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -3151,6 +3157,11 @@
       "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmmirror.com/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-4.0.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "axios": "^1.2.2",
     "element-plus": "^2.2.28",
     "monaco-editor": "^0.34.1",
+    "normalize.css": "^8.0.1",
     "pinia": "^2.0.28",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from "vue"
 import { createRouter, createWebHistory } from "vue-router"
 import { createPinia } from "pinia"
+import "normalize.css"
 import "element-plus/theme-chalk/display.css"
 import App from "./App.vue"
 

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 }}