add breakpoints.

src/oj/problem/components/editor.vue

@@ -7,6 +7,7 @@ import {
   LANGUAGE_VALUE,
   SOURCES,
 } from "../../../utils/constants"
+import { isDesktop } from "../../../utils/breakpoints"
 
 const { problem } = defineProps<{
   problem: {
@@ -61,11 +62,13 @@ async function init() {
   monaco.editor.create(monacoEditorRef.value, {
     value: state.values[state.language], // 编辑器初始显示文字
     language: LANGUAGE_VALUE[state.language],
-    automaticLayout: true, // 自适应布局
     theme: "vs", // 官方自带三种主题vs, hc-black, or vs-dark
     minimap: {
       enabled: false,
     },
+    lineNumbersMinChars: 3,
+    automaticLayout: true, // 自适应布局
+    tabSize: 4,
     fontSize: 24, // 字体大小
     scrollBeyondLastLine: false, // 取消代码后面一大段空白
   })
@@ -92,7 +95,10 @@ async function init() {
       <el-button @click="reset">重置</el-button>
     </el-form-item>
   </el-form>
-  <div ref="monacoEditorRef" class="editor"></div>
+  <div
+    ref="monacoEditorRef"
+    :class="isDesktop ? 'editor' : 'editorMobile'"
+  ></div>
   <el-tabs type="border-card">
     <el-tab-pane label="测试用例"> 1 </el-tab-pane>
     <el-tab-pane label="执行结果"> 2 </el-tab-pane>
@@ -113,6 +119,11 @@ async function init() {
 .editor {
   height: 70%;
 }
+
+.editorMobile {
+  height: 500px;
+}
+
 .actions {
   margin-top: 16px;
   float: right;

src/oj/problem/components/problem-content.vue

@@ -3,41 +3,39 @@ const { problem } = defineProps(["problem"])
 </script>
 
 <template>
-  <el-scrollbar height="calc(100vh - 171px)" noresize>
-    <h1>{{ problem.title }}</h1>
-    <p class="title">描述</p>
-    <div class="content" v-html="problem.description"></div>
+  <h1>{{ problem.title }}</h1>
+  <p class="title">描述</p>
+  <div class="content" v-html="problem.description"></div>
 
-    <p class="title">输入</p>
-    <div class="content" v-html="problem.input_description"></div>
+  <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>
+  <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="never">
-        <div class="content" v-html="problem.hint"></div>
-      </el-card>
-    </div>
+  <div v-if="problem.hint">
+    <p class="title">提示</p>
+    <el-card shadow="never">
+      <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-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>
+  <div v-if="problem.source">
+    <p class="title">来源</p>
+    <div class="content" v-html="problem.source"></div>
+  </div>
 </template>
 
 <style scoped>

src/oj/problem/components/problem-info.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { DIFFICULTY, getTagColor } from "../../../utils/constants"
-import { getACRate } from "../../../utils/functions"
+import { DIFFICULTY } from "../../../utils/constants"
+import { getACRate, getTagColor } from "../../../utils/functions"
+import { isDesktop } from "../../../utils/breakpoints"
 
 const { problem } = defineProps(["problem"])
 </script>
 
 <template>
-  <el-descriptions border>
+  <el-descriptions border :column="isDesktop ? 3 : 1">
     <el-descriptions-item label="编号">
       {{ problem._id }}
     </el-descriptions-item>
@@ -14,7 +15,7 @@ const { problem } = defineProps(["problem"])
       {{ problem.created_by.username }}
     </el-descriptions-item>
     <el-descriptions-item label="难度">
-      <el-tag :type="getTagColor(problem.difficulty)">
+      <el-tag disable-transitions :type="getTagColor(problem.difficulty)">
         {{ DIFFICULTY[<"Low" | "Mid" | "High">problem.difficulty] }}
       </el-tag>
     </el-descriptions-item>
@@ -40,7 +41,12 @@ const { problem } = defineProps(["problem"])
 
     <el-descriptions-item :span="3" label="标签">
       <el-space>
-        <el-tag type="info" v-for="tag in problem.tags" :key="tag">
+        <el-tag
+          disable-transitions
+          type="info"
+          v-for="tag in problem.tags"
+          :key="tag"
+        >
           {{ tag }}
         </el-tag>
       </el-space>