add content.

2023-01-05 20:58:33 +08:00
parent f88c053848
commit 2c7da88b06
8 changed files with 91 additions and 8 deletions
--- a/components.d.ts
+++ b/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']
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
--- a/src/main.ts
+++ b/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"

--- a/src/oj/problem/detail.vue
+++ b/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>
--- a/src/oj/problem/editor.vue
+++ b/src/oj/problem/editor.vue
@@ -128,6 +128,7 @@ function editorInit() {
  height: 500px;
 }
 .actions {
-  margin-top: 20px;
+  margin-top: 16px;
+  float: right;
 }
 </style>
--- a/src/oj/problem/problem-content.vue
+++ b/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>
--- a/src/oj/problem/problem-info.vue
+++ b/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 }}